feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+    enumerable: true,
+    get: function() {
+        return Checkbox;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCheckbox = require("./useCheckbox");
+const _renderCheckbox = require("./renderCheckbox");
+const _useCheckboxStylesstyles = require("./useCheckboxStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Checkbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCheckbox.useCheckbox_unstable)(props, ref);
+    (0, _useCheckboxStylesstyles.useCheckboxStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCheckboxStyles_unstable')(state);
+    return (0, _renderCheckbox.renderCheckbox_unstable)(state);
+});
+Checkbox.displayName = 'Checkbox';

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAMvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/Checkbox.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-checkbox/lib-commonjs/components/Checkbox/Checkbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` 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   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value 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: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/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, {
+    Checkbox: function() {
+        return _Checkbox.Checkbox;
+    },
+    checkboxClassNames: function() {
+        return _useCheckboxStylesstyles.checkboxClassNames;
+    },
+    renderCheckbox_unstable: function() {
+        return _renderCheckbox.renderCheckbox_unstable;
+    },
+    useCheckboxBase_unstable: function() {
+        return _useCheckbox.useCheckboxBase_unstable;
+    },
+    useCheckboxStyles_unstable: function() {
+        return _useCheckboxStylesstyles.useCheckboxStyles_unstable;
+    },
+    useCheckbox_unstable: function() {
+        return _useCheckbox.useCheckbox_unstable;
+    }
+});
+const _Checkbox = require("./Checkbox");
+const _renderCheckbox = require("./renderCheckbox");
+const _useCheckbox = require("./useCheckbox");
+const _useCheckboxStylesstyles = require("./useCheckboxStyles.styles");

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type {\n  CheckboxBaseProps,\n  CheckboxBaseState,\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n} from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","useCheckboxBase_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAWRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACDE,qCAAwB;;;eAC1BE,mDAA0B;;;eAD9CH,iCAAoB;;;0BAVJ,aAAa;gCASE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/renderCheckbox.js

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

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/renderCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.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 { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAOaC;;;;;;4BANb,iCAAiD;gCAErB,4BAA4B;AAIjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC/DJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,SAAS,EAAA,CAAA;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGrE,EAAE"}

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/useCheckbox.js

@@ -0,0 +1,155 @@
+'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, {
+    useCheckboxBase_unstable: function() {
+        return useCheckboxBase_unstable;
+    },
+    useCheckbox_unstable: function() {
+        return useCheckbox_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactfield = require("@fluentui/react-field");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacticons = require("@fluentui/react-icons");
+const _reactlabel = require("@fluentui/react-label");
+const _reacttabster = require("@fluentui/react-tabster");
+const useCheckbox_unstable = (props, ref)=>{
+    'use no memo';
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
+    const { shape = 'square', size = 'medium', ...checkboxProps } = props;
+    const state = useCheckboxBase_unstable(checkboxProps, ref);
+    // Override indicator children with size+shape-appropriate icon
+    const mixed = state.checked === 'mixed';
+    let checkmarkIcon;
+    if (mixed) {
+        if (shape === 'circular') {
+            checkmarkIcon = /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null);
+        } else {
+            checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Square16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Square12Filled, null);
+        }
+    } else if (state.checked) {
+        checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null);
+    }
+    if (state.indicator) {
+        var _state_indicator;
+        var _children;
+        (_children = (_state_indicator = state.indicator).children) !== null && _children !== void 0 ? _children : _state_indicator.children = checkmarkIcon;
+    }
+    return {
+        shape,
+        size,
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            label: _reactlabel.Label
+        },
+        label: _reactutilities.slot.optional(props.label, {
+            defaultProps: {
+                ...state.label,
+                size: 'medium'
+            },
+            elementType: _reactlabel.Label
+        })
+    };
+};
+const useCheckboxBase_unstable = (props, ref)=>{
+    'use no memo';
+    const { disabled = false, required, labelPosition = 'after', onChange } = props;
+    const [checked, setChecked] = (0, _reactutilities.useControllableState)({
+        defaultState: props.defaultChecked,
+        state: props.checked,
+        initialState: false
+    });
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'checked',
+            'defaultChecked',
+            'onChange'
+        ]
+    });
+    const mixed = checked === 'mixed';
+    const id = (0, _reactutilities.useId)('checkbox-', nativeProps.primary.id);
+    const state = {
+        checked,
+        disabled,
+        labelPosition,
+        components: {
+            root: 'span',
+            input: 'input',
+            indicator: 'div',
+            label: 'label'
+        },
+        root: _reactutilities.slot.always(props.root, {
+            defaultProps: {
+                ref: (0, _reacttabster.useFocusWithin)(),
+                ...nativeProps.root
+            },
+            elementType: 'span'
+        }),
+        input: _reactutilities.slot.always(props.input, {
+            defaultProps: {
+                type: 'checkbox',
+                id,
+                ref,
+                checked: checked === true,
+                ...nativeProps.primary
+            },
+            elementType: 'input'
+        }),
+        label: _reactutilities.slot.optional(props.label, {
+            defaultProps: {
+                htmlFor: id,
+                disabled,
+                required
+            },
+            elementType: 'label'
+        }),
+        indicator: _reactutilities.slot.optional(props.indicator, {
+            renderByDefault: true,
+            defaultProps: {
+                'aria-hidden': true
+            },
+            elementType: 'div'
+        })
+    };
+    state.input.onChange = (0, _reactutilities.mergeCallbacks)(state.input.onChange, (ev)=>{
+        const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            checked: val
+        });
+        setChecked(val);
+    });
+    // Create a ref object for the input element so we can use it to set the indeterminate prop.
+    // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
+    const inputRef = (0, _reactutilities.useMergedRefs)(state.input.ref);
+    state.input.ref = inputRef;
+    // Set the <input> element's checked and indeterminate properties based on our tri-state property.
+    // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (inputRef.current) {
+            inputRef.current.indeterminate = mixed;
+        }
+    }, [
+        inputRef,
+        mixed
+    ]);
+    return state;
+};

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js

@@ -0,0 +1,257 @@
+'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, {
+    checkboxClassNames: function() {
+        return checkboxClassNames;
+    },
+    useCheckboxStyles_unstable: function() {
+        return useCheckboxStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const checkboxClassNames = {
+    root: 'fui-Checkbox',
+    label: 'fui-Checkbox__label',
+    input: 'fui-Checkbox__input',
+    indicator: 'fui-Checkbox__indicator'
+};
+// CSS variables used internally in Checkbox's styles
+const vars = {
+    indicatorColor: '--fui-Checkbox__indicator--color',
+    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
+    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSizeMedium = '16px';
+const indicatorSizeLarge = '20px';
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1nzur1d", "r128arqq", {
+    r: [
+        ".r1nzur1d{position:relative;display:inline-flex;cursor:pointer;max-width:fit-content;vertical-align:middle;color:var(--colorNeutralForeground3);}",
+        ".r1nzur1d:focus{outline-style:none;}",
+        ".r1nzur1d:focus-visible{outline-style:none;}",
+        ".r1nzur1d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r1nzur1d[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);}",
+        ".r128arqq{position:relative;display:inline-flex;cursor:pointer;max-width:fit-content;vertical-align:middle;color:var(--colorNeutralForeground3);}",
+        ".r128arqq:focus{outline-style:none;}",
+        ".r128arqq:focus-visible{outline-style:none;}",
+        ".r128arqq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".r128arqq[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){.r1nzur1d[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){.r128arqq[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)({
+    unchecked: {
+        Bi91k9c: "f3p8bqa",
+        pv5h1i: "fium13f",
+        lj723h: "f1r2dosr",
+        Hnthvo: "f1729es6"
+    },
+    checked: {
+        sj55zd: "f19n0e5",
+        wkncrt: "f35ds98",
+        zxk7z7: "f12mnkne",
+        Hmsnfy: "fei9a8h",
+        e6czan: "fix56y3",
+        pv5h1i: "f1bcv2js",
+        qbydtz: "f7dr4go",
+        Hnthvo: "f1r5cpua"
+    },
+    mixed: {
+        sj55zd: "f19n0e5",
+        Hmsnfy: "f1l27tf0",
+        zxk7z7: "fcilktj",
+        pv5h1i: "f1lphd54",
+        Bunfa6h: "f1obkvq7",
+        Hnthvo: "f2gmbuh",
+        B15ykmv: "f1oy4fa1"
+    },
+    disabled: {
+        Bceei9c: "f158kwzp",
+        sj55zd: "f1s2aq7o",
+        Hmsnfy: "f1w7mfl5",
+        zxk7z7: "fcoafq6",
+        B7iucu3: "f1cyfu5x",
+        Bptavk6: "f1lwde8o"
+    }
+}, {
+    h: [
+        ".f3p8bqa:hover{color:var(--colorNeutralForeground2);}",
+        ".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}",
+        ".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}",
+        ".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}",
+        ".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}",
+        ".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}"
+    ],
+    a: [
+        ".f1r2dosr:active{color:var(--colorNeutralForeground1);}",
+        ".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}",
+        ".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}",
+        ".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}",
+        ".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}"
+    ],
+    d: [
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}",
+        ".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}",
+        ".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}",
+        ".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}",
+        ".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}",
+        ".f158kwzp{cursor:default;}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}",
+        ".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1lwde8o{--fui-Checkbox__indicator--color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("ruo9svu", null, [
+    ".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}"
+]);
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    before: {
+        j35jbq: [
+            "f1e31b4d",
+            "f1vgc2s3"
+        ]
+    },
+    after: {
+        oyh7mz: [
+            "f1vgc2s3",
+            "f1e31b4d"
+        ]
+    },
+    large: {
+        a9b677: "f1mq5jt6"
+    }
+}, {
+    d: [
+        ".f1e31b4d{right:0;}",
+        ".f1vgc2s3{left:0;}",
+        ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"
+    ]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rl7ci6d", null, [
+    ".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"
+]);
+const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
+    large: {
+        Be2twd7: "f4ybsrx",
+        Bqenvij: "fjamq6b",
+        a9b677: "f64fuq3"
+    },
+    circular: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f44lkw9"
+    }
+}, {
+    d: [
+        ".f4ybsrx{font-size:16px;}",
+        ".fjamq6b{height:20px;}",
+        ".f64fuq3{width:20px;}",
+        [
+            ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        qb2dma: "f7nlbp4",
+        sj55zd: "f1ym3bx4",
+        Bceei9c: "fpo1scq",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1f5q0n8"
+    },
+    before: {
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
+        ]
+    },
+    after: {
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ]
+    },
+    medium: {
+        B6of3ja: "fjzwpt6",
+        jrapky: "fh6j2fo"
+    },
+    large: {
+        B6of3ja: "f1xlvstr",
+        jrapky: "f49ad5g"
+    }
+}, {
+    d: [
+        ".f7nlbp4{align-self:center;}",
+        ".f1ym3bx4{color:inherit;}",
+        ".fpo1scq{cursor:inherit;}",
+        [
+            ".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
+        ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}",
+        ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}",
+        ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"
+    ]
+});
+const useCheckboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { checked, disabled, labelPosition, shape, size } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    if (state.indicator) {
+        state.indicator.className = (0, _react.mergeClasses)(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    }
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-checkbox/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.raw.js

@@ -0,0 +1,197 @@
+'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, {
+    checkboxClassNames: function() {
+        return checkboxClassNames;
+    },
+    useCheckboxStyles_unstable: function() {
+        return useCheckboxStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const checkboxClassNames = {
+    root: 'fui-Checkbox',
+    label: 'fui-Checkbox__label',
+    input: 'fui-Checkbox__input',
+    indicator: 'fui-Checkbox__indicator'
+};
+// CSS variables used internally in Checkbox's styles
+const vars = {
+    indicatorColor: '--fui-Checkbox__indicator--color',
+    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
+    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSizeMedium = '16px';
+const indicatorSizeLarge = '20px';
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    position: 'relative',
+    display: 'inline-flex',
+    cursor: 'pointer',
+    maxWidth: 'fit-content',
+    verticalAlign: 'middle',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    ...(0, _reacttabster.createFocusOutlineStyle)({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = (0, _react.makeStyles)({
+    unchecked: {
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground2,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        ':active': {
+            color: _reacttheme.tokens.colorNeutralForeground1,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    checked: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        [vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackground,
+        [vars.indicatorColor]: _reacttheme.tokens.colorNeutralForegroundInverted,
+        [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackground,
+        ':hover': {
+            [vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackgroundHover
+        },
+        ':active': {
+            [vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed
+        }
+    },
+    mixed: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStroke,
+        [vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1,
+        ':hover': {
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStrokeHover,
+            [vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1Hover
+        },
+        ':active': {
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStrokePressed,
+            [vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1Pressed
+        }
+    },
+    disabled: {
+        cursor: 'default',
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        [vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeDisabled,
+        [vars.indicatorColor]: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            [vars.indicatorColor]: 'GrayText'
+        }
+    }
+});
+const useInputBaseClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    cursor: 'inherit',
+    height: '100%',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    top: 0,
+    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+    // This is done so that clicking on that "empty space" still toggles the checkbox.
+    width: `calc(${indicatorSizeMedium} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`
+});
+const useInputStyles = (0, _react.makeStyles)({
+    before: {
+        right: 0
+    },
+    after: {
+        left: 0
+    },
+    large: {
+        width: `calc(${indicatorSizeLarge} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`
+    }
+});
+const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    color: `var(${vars.indicatorColor})`,
+    backgroundColor: `var(${vars.indicatorBackgroundColor})`,
+    borderColor: `var(${vars.indicatorBorderColor}, ${_reacttheme.tokens.colorNeutralStrokeAccessible})`,
+    borderStyle: 'solid',
+    borderWidth: _reacttheme.tokens.strokeWidthThin,
+    borderRadius: _reacttheme.tokens.borderRadiusSmall,
+    margin: _reacttheme.tokens.spacingVerticalS + ' ' + _reacttheme.tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    fontSize: '12px',
+    height: indicatorSizeMedium,
+    width: indicatorSizeMedium
+});
+const useIndicatorStyles = (0, _react.makeStyles)({
+    large: {
+        fontSize: '16px',
+        height: indicatorSizeLarge,
+        width: indicatorSizeLarge
+    },
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = (0, _react.makeStyles)({
+    base: {
+        alignSelf: 'center',
+        color: 'inherit',
+        cursor: 'inherit',
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`
+    },
+    before: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalXS
+    },
+    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 checkbox, but preserves line height if the label wraps.
+    medium: {
+        marginTop: `calc((${indicatorSizeMedium} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeMedium} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
+    },
+    large: {
+        marginTop: `calc((${indicatorSizeLarge} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeLarge} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
+    }
+});
+const useCheckboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { checked, disabled, labelPosition, shape, size } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    if (state.indicator) {
+        state.indicator.className = (0, _react.mergeClasses)(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    }
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};