feat: Fluent UI Outlook Lite + connections mockup

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"}