feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-checkbox/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-checkbox
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

node_modules/@fluentui/react-checkbox/README.md

@@ -0,0 +1,37 @@
+# @fluentui/react-checkbox
+
+**Checkbox component for [Fluent UI React](https://react.fluentui.dev/)**
+
+Checkboxes give people a way to select one or more items from a group, or switch between
+two mutually exclusive options (checked or unchecked).
+
+### Usage
+
+Import Checkbox:
+
+```js
+import { Checkbox } from '@fluentui/react-components';
+```
+
+#### Examples
+
+```jsx
+<Checkbox label="Default checkbox" />
+<Checkbox disabled label="Disabled" />
+<Checkbox shape="circular" label="Circular" />
+```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-checkbox` from the list.
+
+### Specification
+
+See [Spec.md](./Spec.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Checkbox implementation.

node_modules/@fluentui/react-checkbox/dist/index.d.ts

@@ -0,0 +1,131 @@
+import { ComponentProps } from '@fluentui/react-utilities';
+import { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import * as React_2 from 'react';
+import { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
+ */
+export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
+
+export declare type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;
+
+export declare type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;
+
+export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
+
+/**
+ * Data for the onChange event for checkbox.
+ */
+export declare interface CheckboxOnChangeData {
+    checked: 'mixed' | boolean;
+}
+
+/**
+ * Checkbox Props
+ */
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> & {
+    /**
+     * The controlled value for the checkbox.
+     *
+     * @default false
+     */
+    checked?: 'mixed' | boolean;
+    /**
+     * Checkboxes don't support children. To add a label, use the `label` prop.
+     */
+    children?: never;
+    /**
+     * Whether the checkbox should be rendered as checked by default.
+     */
+    defaultChecked?: 'mixed' | boolean;
+    /**
+     * The position of the label relative to the checkbox indicator.
+     *
+     * @default after
+     */
+    labelPosition?: 'before' | 'after';
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
+    /**
+     * The shape of the checkbox indicator.
+     *
+     * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     *
+     * @default square
+     */
+    shape?: 'square' | 'circular';
+    /**
+     * The size of the checkbox indicator.
+     *
+     * @default medium
+     */
+    size?: 'medium' | 'large';
+};
+
+export declare type CheckboxSlots = {
+    /**
+     * The root element of the Checkbox.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
+     * All other native props will be applied to the primary slot: `input`
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Checkbox's label.
+     */
+    label?: Slot<typeof Label>;
+    /**
+     * Hidden input that handles the checkbox's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /**
+     * The checkbox, with the checkmark icon as its child when checked.
+     */
+    indicator: Slot<'div', 'span'>;
+};
+
+/**
+ * State used in rendering Checkbox
+ */
+export declare type CheckboxState = ComponentState<CheckboxSlots> & Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
+
+export declare const renderCheckbox_unstable: (state: CheckboxBaseState) => JSXElement;
+
+/**
+ * Create the state required to render Checkbox.
+ *
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
+ *
+ * @param props - props from this instance of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
+ */
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
+
+/**
+ * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
+ * focus management, and slot structure without design props.
+ *
+ * @param props - props from this instance of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
+ */
+export declare const useCheckboxBase_unstable: (props: CheckboxBaseProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxBaseState;
+
+/**
+ * Apply styling to the Checkbox slots based on the state
+ */
+export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;
+
+export { }

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

@@ -0,0 +1,31 @@
+"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 _index.Checkbox;
+    },
+    checkboxClassNames: function() {
+        return _index.checkboxClassNames;
+    },
+    renderCheckbox_unstable: function() {
+        return _index.renderCheckbox_unstable;
+    },
+    useCheckboxBase_unstable: function() {
+        return _index.useCheckboxBase_unstable;
+    },
+    useCheckboxStyles_unstable: function() {
+        return _index.useCheckboxStyles_unstable;
+    },
+    useCheckbox_unstable: function() {
+        return _index.useCheckbox_unstable;
+    }
+});
+const _index = require("./components/Checkbox/index");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAGvBG,+BAAwB;;;eAFxBF,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,8BAA8B"}

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;
+};

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

@@ -0,0 +1,31 @@
+"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 _Checkbox.checkboxClassNames;
+    },
+    renderCheckbox_unstable: function() {
+        return _Checkbox.renderCheckbox_unstable;
+    },
+    useCheckboxBase_unstable: function() {
+        return _Checkbox.useCheckboxBase_unstable;
+    },
+    useCheckboxStyles_unstable: function() {
+        return _Checkbox.useCheckboxStyles_unstable;
+    },
+    useCheckbox_unstable: function() {
+        return _Checkbox.useCheckbox_unstable;
+    }
+});
+const _Checkbox = require("./Checkbox");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './Checkbox';\nexport type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,4BAAkB;;;eAClBC,iCAAuB;;;eAGvBG,kCAAwB;;;eAFxBF,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,aAAa"}

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

@@ -0,0 +1 @@
+export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, useCheckboxBase_unstable } from './components/Checkbox/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":"AAQA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,8BAA8B"}

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useCheckbox_unstable } from './useCheckbox';
+import { renderCheckbox_unstable } from './renderCheckbox';
+import { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
+ */ export const Checkbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCheckbox_unstable(props, ref);
+    useCheckboxStyles_unstable(state);
+    useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);
+    return renderCheckbox_unstable(state);
+});
+Checkbox.displayName = 'Checkbox';

node_modules/@fluentui/react-checkbox/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-checkbox/lib/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":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,4 @@
+export { Checkbox } from './Checkbox';
+export { renderCheckbox_unstable } from './renderCheckbox';
+export { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';
+export { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';

node_modules/@fluentui/react-checkbox/lib/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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAStC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

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

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+export const renderCheckbox_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.input, {}),
+            state.labelPosition === 'before' && state.label && /*#__PURE__*/ _jsx(state.label, {}),
+            state.indicator && /*#__PURE__*/ _jsx(state.indicator, {}),
+            state.labelPosition === 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {})
+        ]
+    });
+};

node_modules/@fluentui/react-checkbox/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}

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

@@ -0,0 +1,150 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { getPartitionedNativeProps, useControllableState, mergeCallbacks, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';
+import { Label } from '@fluentui/react-label';
+import { useFocusWithin } from '@fluentui/react-tabster';
+/**
+ * Create the state required to render Checkbox.
+ *
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
+ *
+ * @param props - props from this instance of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
+ */ export const useCheckbox_unstable = (props, ref)=>{
+    'use no memo';
+    // Merge props from surrounding <Field>, if any
+    props = 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(CircleFilled, null);
+        } else {
+            checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Square16Filled, null) : /*#__PURE__*/ React.createElement(Square12Filled, null);
+        }
+    } else if (state.checked) {
+        checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Checkmark16Filled, null) : /*#__PURE__*/ React.createElement(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: Label
+        },
+        label: slot.optional(props.label, {
+            defaultProps: {
+                ...state.label,
+                size: 'medium'
+            },
+            elementType: Label
+        })
+    };
+};
+/**
+ * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
+ * focus management, and slot structure without design props.
+ *
+ * @param props - props from this instance of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
+ */ export const useCheckboxBase_unstable = (props, ref)=>{
+    'use no memo';
+    const { disabled = false, required, labelPosition = 'after', onChange } = props;
+    const [checked, setChecked] = useControllableState({
+        defaultState: props.defaultChecked,
+        state: props.checked,
+        initialState: false
+    });
+    const nativeProps = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'checked',
+            'defaultChecked',
+            'onChange'
+        ]
+    });
+    const mixed = checked === 'mixed';
+    const id = useId('checkbox-', nativeProps.primary.id);
+    const state = {
+        checked,
+        disabled,
+        labelPosition,
+        components: {
+            root: 'span',
+            input: 'input',
+            indicator: 'div',
+            label: 'label'
+        },
+        root: slot.always(props.root, {
+            defaultProps: {
+                ref: useFocusWithin(),
+                ...nativeProps.root
+            },
+            elementType: 'span'
+        }),
+        input: slot.always(props.input, {
+            defaultProps: {
+                type: 'checkbox',
+                id,
+                ref,
+                checked: checked === true,
+                ...nativeProps.primary
+            },
+            elementType: 'input'
+        }),
+        label: slot.optional(props.label, {
+            defaultProps: {
+                htmlFor: id,
+                disabled,
+                required
+            },
+            elementType: 'label'
+        }),
+        indicator: slot.optional(props.indicator, {
+            renderByDefault: true,
+            defaultProps: {
+                'aria-hidden': true
+            },
+            elementType: 'div'
+        })
+    };
+    state.input.onChange = 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 = 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.
+    useIsomorphicLayoutEffect(()=>{
+        if (inputRef.current) {
+            inputRef.current.indeterminate = mixed;
+        }
+    }, [
+        inputRef,
+        mixed
+    ]);
+    return state;
+};

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

@@ -0,0 +1,162 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export 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__*/__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__*/__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__*/__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__*/__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__*/__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__*/__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__*/__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);}"]
+});
+/**
+ * Apply styling to the Checkbox slots based on the state
+ */
+export const useCheckboxStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    checked,
+    disabled,
+    labelPosition,
+    shape,
+    size
+  } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  state.root.className = 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 = 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 = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+  }
+  const labelStyles = useLabelStyles();
+  if (state.label) {
+    state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,181 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export 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 = makeResetStyles({
+    position: 'relative',
+    display: 'inline-flex',
+    cursor: 'pointer',
+    maxWidth: 'fit-content',
+    verticalAlign: 'middle',
+    color: tokens.colorNeutralForeground3,
+    ...createFocusOutlineStyle({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = makeStyles({
+    unchecked: {
+        ':hover': {
+            color: tokens.colorNeutralForeground2,
+            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover
+        },
+        ':active': {
+            color: tokens.colorNeutralForeground1,
+            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    checked: {
+        color: tokens.colorNeutralForeground1,
+        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,
+        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,
+        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,
+        ':hover': {
+            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover
+        },
+        ':active': {
+            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed
+        }
+    },
+    mixed: {
+        color: tokens.colorNeutralForeground1,
+        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,
+        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,
+        ':hover': {
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,
+            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover
+        },
+        ':active': {
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,
+            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed
+        }
+    },
+    disabled: {
+        cursor: 'default',
+        color: tokens.colorNeutralForegroundDisabled,
+        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,
+        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            [vars.indicatorColor]: 'GrayText'
+        }
+    }
+});
+const useInputBaseClassName = 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 * ${tokens.spacingHorizontalS})`
+});
+const useInputStyles = makeStyles({
+    before: {
+        right: 0
+    },
+    after: {
+        left: 0
+    },
+    large: {
+        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`
+    }
+});
+const useIndicatorBaseClassName = 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}, ${tokens.colorNeutralStrokeAccessible})`,
+    borderStyle: 'solid',
+    borderWidth: tokens.strokeWidthThin,
+    borderRadius: tokens.borderRadiusSmall,
+    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    fontSize: '12px',
+    height: indicatorSizeMedium,
+    width: indicatorSizeMedium
+});
+const useIndicatorStyles = makeStyles({
+    large: {
+        fontSize: '16px',
+        height: indicatorSizeLarge,
+        width: indicatorSizeLarge
+    },
+    circular: {
+        borderRadius: tokens.borderRadiusCircular
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = makeStyles({
+    base: {
+        alignSelf: 'center',
+        color: 'inherit',
+        cursor: 'inherit',
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`
+    },
+    before: {
+        paddingRight: tokens.spacingHorizontalXS
+    },
+    after: {
+        paddingLeft: 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} - ${tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`
+    },
+    large: {
+        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`
+    }
+});
+/**
+ * Apply styling to the Checkbox slots based on the state
+ */ export const useCheckboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { checked, disabled, labelPosition, shape, size } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = 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 = 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 = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    }
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-checkbox/lib/index.js

@@ -0,0 +1 @@
+export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, useCheckboxBase_unstable } from './Checkbox';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './Checkbox';\nexport type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,aAAa"}

node_modules/@fluentui/react-checkbox/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@fluentui/react-checkbox",
+  "version": "9.6.0",
+  "description": "Fluent UI checkbox component",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui/react-field": "^9.5.0",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-label": "^9.4.0",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@griffel/react": "^1.5.32",
+    "@swc/helpers": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
+}