feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/Radio.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Radio", {
+    enumerable: true,
+    get: function() {
+        return Radio;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderRadio = require("./renderRadio");
+const _useRadio = require("./useRadio");
+const _useRadioStylesstyles = require("./useRadioStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Radio = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useRadio.useRadio_unstable)(props, ref);
+    (0, _useRadioStylesstyles.useRadioStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useRadioStyles_unstable')(state);
+    return (0, _renderRadio.renderRadio_unstable)(state);
+});
+Radio.displayName = 'Radio';

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n  const state = useRadio_unstable(props, ref);\n\n  useRadioStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n  return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;qCACtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQP,2BAAAA,EAAkBK,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOR,iCAAAA,EAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/Radio.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/Radio.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/Radio.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n  /**\n   * The root element of the Radio.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Radio's label.\n   */\n  label: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the radio's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * A circle outline, with a filled circle icon inside when the Radio is checked.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {\n  /**\n   * The value of the RadioGroup when this Radio item is selected.\n   */\n  value?: string;\n\n  /**\n   * The position of the label relative to the radio indicator.\n   *\n   * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n   * in which case it defaults to `below`.\n   *\n   * @defaultvalue after\n   */\n  labelPosition?: 'after' | 'below';\n\n  /**\n   * Disable this Radio item.\n   */\n  disabled?: boolean;\n\n  /**\n   * Callback when this Radio is selected in its group.\n   *\n   * **Note:** `onChange` is NOT called when this Radio is deselected.\n   * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\nexport type RadioBaseProps = RadioProps;\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n  /**\n   * The value prop of this Radio item.\n   */\n  value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n\nexport type RadioBaseState = RadioState;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Radio: function() {
+        return _Radio.Radio;
+    },
+    radioClassNames: function() {
+        return _useRadioStylesstyles.radioClassNames;
+    },
+    renderRadio_unstable: function() {
+        return _renderRadio.renderRadio_unstable;
+    },
+    useRadioBase_unstable: function() {
+        return _useRadio.useRadioBase_unstable;
+    },
+    useRadioStyles_unstable: function() {
+        return _useRadioStylesstyles.useRadioStyles_unstable;
+    },
+    useRadio_unstable: function() {
+        return _useRadio.useRadio_unstable;
+    }
+});
+const _Radio = require("./Radio");
+const _renderRadio = require("./renderRadio");
+const _useRadio = require("./useRadio");
+const _useRadioStylesstyles = require("./useRadioStyles.styles");

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/index.ts"],"sourcesContent":["export { Radio } from './Radio';\nexport type {\n  RadioOnChangeData,\n  RadioProps,\n  RadioSlots,\n  RadioState,\n  RadioBaseProps,\n  RadioBaseState,\n} from './Radio.types';\nexport { renderRadio_unstable } from './renderRadio';\nexport { useRadio_unstable, useRadioBase_unstable } from './useRadio';\nexport { radioClassNames, useRadioStyles_unstable } from './useRadioStyles.styles';\n"],"names":["Radio","renderRadio_unstable","useRadio_unstable","useRadioBase_unstable","radioClassNames","useRadioStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAWLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAVJ,UAAU;6BASK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/renderRadio.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderRadio_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderRadio_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderRadio_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.indicator, {}),
+            state.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {})
+        ]
+    });
+};

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/renderRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/renderRadio.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioBaseState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioBaseState): JSXElement => {\n  assertSlots<RadioSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.indicator />\n      {state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderRadio_unstable","state","root","input","indicator","label"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,SAAS,EAAA,CAAA;YACfH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGlC,EAAE"}

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/useRadio.js

@@ -0,0 +1,106 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useRadioBase_unstable: function() {
+        return useRadioBase_unstable;
+    },
+    useRadio_unstable: function() {
+        return useRadio_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactlabel = require("@fluentui/react-label");
+const _reactutilities = require("@fluentui/react-utilities");
+const _RadioGroupContext = require("../../contexts/RadioGroupContext");
+const _reacttabster = require("@fluentui/react-tabster");
+const useRadio_unstable = (props, ref)=>{
+    const state = useRadioBase_unstable(props, ref);
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            label: _reactlabel.Label
+        },
+        label: _reactutilities.slot.optional(props.label, {
+            defaultProps: {
+                ...state.label
+            },
+            elementType: _reactlabel.Label
+        })
+    };
+};
+const useRadioBase_unstable = (props, ref)=>{
+    const group = (0, _RadioGroupContext.useRadioGroupContextValue_unstable)();
+    const { name = group.name, checked = group.value !== undefined ? group.value === props.value : undefined, defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined, labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after', disabled = group.disabled, required = group.required, 'aria-describedby': ariaDescribedBy = group['aria-describedby'], onChange } = props;
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'checked',
+            'defaultChecked',
+            'onChange'
+        ]
+    });
+    const root = _reactutilities.slot.always(props.root, {
+        defaultProps: {
+            ref: (0, _reacttabster.useFocusWithin)(),
+            ...nativeProps.root
+        },
+        elementType: 'span'
+    });
+    const input = _reactutilities.slot.always(props.input, {
+        defaultProps: {
+            ref,
+            type: 'radio',
+            id: (0, _reactutilities.useId)('radio-', nativeProps.primary.id),
+            name,
+            checked,
+            defaultChecked,
+            disabled,
+            required,
+            'aria-describedby': ariaDescribedBy,
+            ...nativeProps.primary
+        },
+        elementType: 'input'
+    });
+    input.onChange = (0, _reactutilities.mergeCallbacks)(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            value: ev.currentTarget.value
+        }));
+    const label = _reactutilities.slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: input.id,
+            disabled: input.disabled
+        },
+        elementType: 'label'
+    });
+    const indicator = _reactutilities.slot.always(props.indicator, {
+        defaultProps: {
+            'aria-hidden': true
+        },
+        elementType: 'div'
+    });
+    return {
+        labelPosition,
+        components: {
+            root: 'span',
+            input: 'input',
+            label: 'label',
+            indicator: 'div'
+        },
+        root,
+        input,
+        label,
+        indicator
+    };
+};

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/useRadioStyles.styles.js

@@ -0,0 +1,180 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    radioClassNames: function() {
+        return radioClassNames;
+    },
+    useRadioStyles_unstable: function() {
+        return useRadioStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const radioClassNames = {
+    root: 'fui-Radio',
+    indicator: 'fui-Radio__indicator',
+    input: 'fui-Radio__input',
+    label: 'fui-Radio__label'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSize = '16px';
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1siqwd8", "rmnplyc", {
+    r: [
+        ".r1siqwd8{display:inline-flex;position:relative;}",
+        ".r1siqwd8:focus{outline-style:none;}",
+        ".r1siqwd8:focus-visible{outline-style:none;}",
+        ".r1siqwd8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r1siqwd8[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".rmnplyc{display:inline-flex;position:relative;}",
+        ".rmnplyc:focus{outline-style:none;}",
+        ".rmnplyc:focus-visible{outline-style:none;}",
+        ".rmnplyc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".rmnplyc[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r1siqwd8[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media (forced-colors: active){.rmnplyc[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
+    ]
+});
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    vertical: {
+        Beiy3e4: "f1vx9l62",
+        Bt984gj: "f122n59"
+    }
+}, {
+    d: [
+        ".f1vx9l62{flex-direction:column;}",
+        ".f122n59{align-items:center;}"
+    ]
+});
+const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rg1upok", "rzwdzb4", {
+    r: [
+        ".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
+        ".rg1upok:enabled{cursor:pointer;}",
+        ".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}",
+        ".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
+        ".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
+        ".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
+        ".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
+        ".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
+        ".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
+        ".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
+        ".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}",
+        ".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
+        ".rzwdzb4:enabled{cursor:pointer;}",
+        ".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}",
+        ".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
+        ".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
+        ".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
+        ".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
+        ".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
+        ".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
+        ".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
+        ".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}",
+        "@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}",
+        "@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}",
+        "@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}",
+        "@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}",
+        "@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}",
+        "@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}",
+        "@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}"
+    ]
+});
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    below: {
+        a9b677: "fly5x3f",
+        Bqenvij: "f1je6zif"
+    },
+    defaultIndicator: {
+        Blbys7f: "f9ma1gx"
+    },
+    customIndicator: {
+        Bj53wkj: "f12zxao0"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}",
+        ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}",
+        ".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
+    ]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rwtekvw", null, [
+    ".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}",
+    ".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}"
+]);
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        qb2dma: "f7nlbp4",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1f5q0n8"
+    },
+    after: {
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ],
+        B6of3ja: "fjzwpt6",
+        jrapky: "fh6j2fo"
+    },
+    below: {
+        z8tnut: "f1ywm7hm",
+        fsow6f: "f17mccla"
+    }
+}, {
+    d: [
+        ".f7nlbp4{align-self:center;}",
+        [
+            ".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
+        ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".f17mccla{text-align:center;}"
+    ]
+});
+const useRadioStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    state.indicator.className = (0, _react.mergeClasses)(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/useRadioStyles.styles.raw.js

@@ -0,0 +1,218 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    radioClassNames: function() {
+        return radioClassNames;
+    },
+    useRadioStyles_unstable: function() {
+        return useRadioStyles_unstable;
+    }
+});
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const radioClassNames = {
+    root: 'fui-Radio',
+    indicator: 'fui-Radio__indicator',
+    input: 'fui-Radio__input',
+    label: 'fui-Radio__label'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSize = '16px';
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    position: 'relative',
+    ...(0, _reacttabster.createFocusOutlineStyle)({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column',
+        alignItems: 'center'
+    }
+});
+const useInputBaseClassName = (0, _react.makeResetStyles)({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: `calc(${indicatorSize} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`,
+    height: '100%',
+    boxSizing: 'border-box',
+    margin: 0,
+    opacity: 0,
+    ':enabled': {
+        cursor: 'pointer',
+        [`& ~ .${radioClassNames.label}`]: {
+            cursor: 'pointer'
+        }
+    },
+    // Colors for the unchecked state
+    ':enabled:not(:checked)': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorNeutralStrokeAccessible,
+            '@media (forced-colors: active)': {
+                borderColor: 'ButtonBorder'
+            }
+        },
+        ':hover': {
+            [`& ~ .${radioClassNames.label}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2
+            },
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${radioClassNames.label}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground1
+            },
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+            }
+        }
+    },
+    // Colors for the checked state
+    ':enabled:checked': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorCompoundBrandStroke,
+            color: _reacttheme.tokens.colorCompoundBrandForeground1,
+            '@media (forced-colors: active)': {
+                borderColor: 'Highlight',
+                color: 'Highlight',
+                '::after': {
+                    backgroundColor: 'Highlight'
+                }
+            }
+        },
+        ':hover': {
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorCompoundBrandStrokeHover,
+                color: _reacttheme.tokens.colorCompoundBrandForeground1Hover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorCompoundBrandStrokePressed,
+                color: _reacttheme.tokens.colorCompoundBrandForeground1Pressed
+            }
+        }
+    },
+    // Colors for the disabled state
+    ':disabled': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            cursor: 'default',
+            '@media (forced-colors: active)': {
+                color: 'GrayText'
+            }
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorNeutralStrokeDisabled,
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            '@media (forced-colors: active)': {
+                borderColor: 'GrayText',
+                color: 'GrayText',
+                '::after': {
+                    backgroundColor: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useInputStyles = (0, _react.makeStyles)({
+    below: {
+        width: '100%',
+        height: `calc(${indicatorSize} + 2 * ${_reacttheme.tokens.spacingVerticalS})`
+    },
+    // If the indicator has no children, use the ::after pseudo-element for the checked state
+    defaultIndicator: {
+        [`:checked ~ .${radioClassNames.indicator}::after`]: {
+            content: '""'
+        }
+    },
+    // If the indicator has a child, hide it until the radio is checked
+    customIndicator: {
+        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {
+            opacity: '0'
+        }
+    }
+});
+const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
+    position: 'relative',
+    width: indicatorSize,
+    height: indicatorSize,
+    fontSize: '12px',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    border: _reacttheme.tokens.strokeWidthThin + ' solid',
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    margin: _reacttheme.tokens.spacingVerticalS + ' ' + _reacttheme.tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    '::after': {
+        position: 'absolute',
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        // Use a transform to avoid pixel rounding errors at 125% DPI
+        // https://github.com/microsoft/fluentui/issues/30025
+        transform: 'scale(0.625)',
+        backgroundColor: 'currentColor'
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = (0, _react.makeStyles)({
+    base: {
+        alignSelf: 'center',
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`
+    },
+    after: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXS,
+        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.
+        marginTop: `calc((${indicatorSize} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSize} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
+    },
+    below: {
+        paddingTop: _reacttheme.tokens.spacingVerticalXS,
+        textAlign: 'center'
+    }
+});
+const useRadioStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    state.indicator.className = (0, _react.mergeClasses)(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};