feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-switch/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-switch
+
+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-switch/README.md

@@ -0,0 +1,38 @@
+# @fluentui/react-switch
+
+**Switch components for [Fluent UI React](https://react.fluentui.dev/)**
+
+The `Switch` control enables users to trigger an option on or off through interacting with the component.
+
+## Usage
+
+To import Switch:
+
+```js
+import { Switch } from '@fluentui/react-components';
+```
+
+### Examples
+
+```jsx
+<Switch />
+<Switch defaultChecked required />
+<Switch checked onChange={onChange} />
+<Switch disabled />
+<Switch label="Enable dark mode" labelPosition="after" />
+```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-switch` 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 Switch implementation.

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

@@ -0,0 +1,139 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { 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 type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSwitch_unstable: (state: SwitchBaseState) => JSXElement;
+
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+export declare const Switch: ForwardRefComponent<SwitchProps>;
+
+/**
+ * Switch base props, excluding design-related props like size
+ */
+export declare type SwitchBaseProps = Omit<SwitchProps, 'size'>;
+
+/**
+ * Switch base state, excluding design-related state like size
+ */
+export declare type SwitchBaseState = Omit<SwitchState, 'size'>;
+
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+export declare const switchClassName: string;
+
+export declare const switchClassNames: SlotClassNames<SwitchSlots>;
+
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
+
+/**
+ * Switch Props
+ */
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> & {
+    /**
+     * Defines the controlled checked state of the Switch.
+     * If passed, Switch ignores the `defaultChecked` property.
+     * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
+     * correct value based on handling `onChange` events and re-rendering.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is
+     * important to keep a consistent tab order for screen reader and keyboard users.
+     *
+     * @default false
+     */
+    disabledFocusable?: boolean;
+    /**
+     * Defines whether the Switch is initially in a checked state or not when rendered.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The position of the label relative to the Switch.
+     *
+     * @default after
+     */
+    labelPosition?: 'above' | 'after' | 'before';
+    /**
+     * The size of the Switch.
+     *
+     *  @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+
+export declare type SwitchSlots = {
+    /**
+     * The root element of the Switch.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
+     * All other native props will be applied to the primary slot: `input`.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The track and the thumb sliding over it indicating the on and off status of the Switch.
+     */
+    indicator: NonNullable<Slot<'div'>>;
+    /**
+     * Hidden input that handles the Switch's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
+     * slot, except `className` and `style`, which remain on the root slot.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /**
+     * The Switch's label.
+     */
+    label?: Slot<typeof Label>;
+};
+
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;
+
+/**
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+export declare const useSwitch_unstable: (props: SwitchProps, ref: React_2.Ref<HTMLInputElement>) => SwitchState;
+
+/**
+ * Base hook for Switch component, manages state and structure common to all variants of Switch
+ *
+ * @param props - base props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+export declare const useSwitchBase_unstable: (props: SwitchBaseProps, ref?: React_2.Ref<HTMLInputElement>) => SwitchBaseState;
+
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
+
+export { }

node_modules/@fluentui/react-switch/lib-commonjs/Switch.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, {
+    Switch: function() {
+        return _index.Switch;
+    },
+    renderSwitch_unstable: function() {
+        return _index.renderSwitch_unstable;
+    },
+    switchClassName: function() {
+        return _index.switchClassName;
+    },
+    switchClassNames: function() {
+        return _index.switchClassNames;
+    },
+    useSwitchBase_unstable: function() {
+        return _index.useSwitchBase_unstable;
+    },
+    useSwitchStyles_unstable: function() {
+        return _index.useSwitchStyles_unstable;
+    },
+    useSwitch_unstable: function() {
+        return _index.useSwitch_unstable;
+    }
+});
+const _index = require("./components/Switch/index");

node_modules/@fluentui/react-switch/lib-commonjs/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './components/Switch/index';\nexport {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,aAAM;;;eACNC,4BAAqB,EACrB,4DAA4D;;;eAC5DC,sBAAe;;;eACfC,uBAAgB;;;eAGhBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/Switch.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Switch", {
+    enumerable: true,
+    get: function() {
+        return Switch;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSwitch = require("./useSwitch");
+const _renderSwitch = require("./renderSwitch");
+const _useSwitchStylesstyles = require("./useSwitchStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Switch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSwitch.useSwitch_unstable)(props, ref);
+    (0, _useSwitchStylesstyles.useSwitchStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwitchStyles_unstable')(state);
+    return (0, _renderSwitch.renderSwitch_unstable)(state);
+});
+Switch.displayName = 'Switch';

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * The size of the Switch.\n   *\n   *  @default 'medium'\n   */\n  size?: 'small' | 'medium';\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: SwitchOnChangeData) => void;\n};\n\n/**\n * Switch base props, excluding design-related props like size\n */\nexport type SwitchBaseProps = Omit<SwitchProps, 'size'>;\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> &\n  Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;\n\n/**\n * Switch base state, excluding design-related state like size\n */\nexport type SwitchBaseState = Omit<SwitchState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/index.js

@@ -0,0 +1,37 @@
+"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, {
+    Switch: function() {
+        return _Switch.Switch;
+    },
+    renderSwitch_unstable: function() {
+        return _renderSwitch.renderSwitch_unstable;
+    },
+    switchClassName: function() {
+        return _useSwitchStylesstyles.switchClassName;
+    },
+    switchClassNames: function() {
+        return _useSwitchStylesstyles.switchClassNames;
+    },
+    useSwitchBase_unstable: function() {
+        return _useSwitch.useSwitchBase_unstable;
+    },
+    useSwitchStyles_unstable: function() {
+        return _useSwitchStylesstyles.useSwitchStyles_unstable;
+    },
+    useSwitch_unstable: function() {
+        return _useSwitch.useSwitch_unstable;
+    }
+});
+const _Switch = require("./Switch");
+const _renderSwitch = require("./renderSwitch");
+const _useSwitch = require("./useSwitch");
+const _useSwitchStylesstyles = require("./useSwitchStyles.styles");

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';\nexport {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","useSwitchBase_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eASNC,mCAAqB;;;eAI5BG,sCAAe;;;eACfC,uCAAgB;;;eAJWF,iCAAsB;;;eAKjDG,+CAAwB;;;eALjBJ,6BAAkB;;;wBAVJ,WAAW;8BASI,iBAAiB;2BACI,cAAc;uCAMlE,2BAA2B"}

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/renderSwitch.js

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

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/renderSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchBaseState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchBaseState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;8BACzD,eAAA,EAACJ,MAAMK,SAAS,EAAA,CAAA;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAG/D,EAAE"}

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/useSwitch.js

@@ -0,0 +1,119 @@
+'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, {
+    useSwitchBase_unstable: function() {
+        return useSwitchBase_unstable;
+    },
+    useSwitch_unstable: function() {
+        return useSwitch_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 _reacticons = require("@fluentui/react-icons");
+const _reactlabel = require("@fluentui/react-label");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactutilities = require("@fluentui/react-utilities");
+const useSwitch_unstable = (props, ref)=>{
+    const { size = 'medium', ...baseProps } = props;
+    const baseState = useSwitchBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size
+    };
+};
+const useSwitchBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
+    const { checked, defaultChecked, disabled, disabledFocusable = false, labelPosition = 'after', onChange, required } = props;
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'checked',
+            'defaultChecked',
+            'onChange',
+            'disabledFocusable'
+        ]
+    });
+    const id = (0, _reactutilities.useId)('switch-', nativeProps.primary.id);
+    const root = _reactutilities.slot.always(props.root, {
+        defaultProps: {
+            ref: (0, _reacttabster.useFocusWithin)(),
+            ...nativeProps.root
+        },
+        elementType: 'div'
+    });
+    const indicator = _reactutilities.slot.always(props.indicator, {
+        defaultProps: {
+            'aria-hidden': true,
+            children: /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null)
+        },
+        elementType: 'div'
+    });
+    const input = _reactutilities.slot.always(props.input, {
+        defaultProps: {
+            checked,
+            defaultChecked,
+            id,
+            ref,
+            role: 'switch',
+            type: 'checkbox',
+            ...nativeProps.primary,
+            disabled: disabled && !disabledFocusable,
+            ...disabledFocusable && {
+                'aria-disabled': true
+            }
+        },
+        elementType: 'input'
+    });
+    input.onChange = (0, _reactutilities.mergeCallbacks)(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            checked: ev.currentTarget.checked
+        }));
+    input.onClick = (0, _reactutilities.mergeCallbacks)(input.onClick, (ev)=>{
+        if (disabledFocusable) {
+            ev.preventDefault();
+        }
+    });
+    input.onKeyDown = (0, _reactutilities.mergeCallbacks)(input.onKeyDown, (ev)=>{
+        if (disabledFocusable && (ev.key === ' ' || ev.key === 'Enter')) {
+            ev.preventDefault();
+        }
+    });
+    const label = _reactutilities.slot.optional(props.label, {
+        defaultProps: {
+            disabled: disabled || disabledFocusable,
+            htmlFor: id,
+            required,
+            size: 'medium'
+        },
+        elementType: _reactlabel.Label
+    });
+    return {
+        disabledFocusable,
+        labelPosition,
+        components: {
+            root: 'div',
+            indicator: 'div',
+            input: 'input',
+            label: _reactlabel.Label
+        },
+        root,
+        indicator,
+        input,
+        label
+    };
+};

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/useSwitchStyles.styles.js

@@ -0,0 +1,246 @@
+'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, {
+    switchClassName: function() {
+        return switchClassName;
+    },
+    switchClassNames: function() {
+        return switchClassNames;
+    },
+    useSwitchStyles_unstable: function() {
+        return useSwitchStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const switchClassNames = {
+    root: 'fui-Switch',
+    indicator: 'fui-Switch__indicator',
+    input: 'fui-Switch__input',
+    label: 'fui-Switch__label'
+};
+const switchClassName = switchClassNames.root;
+// Thumb and track sizes used by the component.
+const spaceBetweenThumbAndTrack = 2;
+// Medium size dimensions
+const trackHeightMedium = 20;
+const trackWidthMedium = 40;
+const thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;
+// Small size dimensions (from design mockup)
+const trackHeightSmall = 16;
+const trackWidthSmall = 32;
+const thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2i81i2", "rofhmb8", {
+    r: [
+        ".r2i81i2{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}",
+        ".r2i81i2:focus{outline-style:none;}",
+        ".r2i81i2:focus-visible{outline-style:none;}",
+        ".r2i81i2[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r2i81i2[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);}",
+        ".rofhmb8{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}",
+        ".rofhmb8:focus{outline-style:none;}",
+        ".rofhmb8:focus-visible{outline-style:none;}",
+        ".rofhmb8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".rofhmb8[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){.r2i81i2[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){.rofhmb8[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
+    ]
+});
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    vertical: {
+        Beiy3e4: "f1vx9l62"
+    }
+}, {
+    d: [
+        ".f1vx9l62{flex-direction:column;}"
+    ]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1c3hft5", null, {
+    r: [
+        ".r1c3hft5{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}",
+        ".r1c3hft5>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"
+    ],
+    s: [
+        "@media screen and (prefers-reduced-motion: reduce){.r1c3hft5{transition-duration:0.01ms;}}",
+        "@media (forced-colors: active){.r1c3hft5{color:CanvasText;}.r1c3hft5>i{forced-color-adjust:none;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1c3hft5>*{transition-duration:0.01ms;}}"
+    ]
+});
+const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
+    labelAbove: {
+        B6of3ja: "f1hu3pq6"
+    },
+    sizeSmall: {
+        Be2twd7: "fses1vf",
+        Bqenvij: "fd461yt",
+        a9b677: "f1szoe96"
+    }
+}, {
+    d: [
+        ".f1hu3pq6{margin-top:0;}",
+        ".fses1vf{font-size:14px;}",
+        ".fd461yt{height:16px;}",
+        ".f1szoe96{width:32px;}"
+    ]
+});
+const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r12ojtgy", "rhc0e9x", {
+    r: [
+        ".r12ojtgy{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
+        ".r12ojtgy:checked~.fui-Switch__indicator>*{transform:translateX(20px);}",
+        ".r12ojtgy:disabled,.r12ojtgy[aria-disabled=\"true\"]{cursor:default;}",
+        ".r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
+        ".r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
+        ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".r12ojtgy:disabled:not(:checked)~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
+        ".r12ojtgy:disabled:checked~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
+        ".rhc0e9x{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
+        ".rhc0e9x:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}",
+        ".rhc0e9x:disabled,.rhc0e9x[aria-disabled=\"true\"]{cursor:default;}",
+        ".rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
+        ".rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
+        ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".rhc0e9x:disabled:not(:checked)~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
+        ".rhc0e9x:disabled:checked~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.r12ojtgy:hover{color:CanvasText;}.r12ojtgy:hover:active{color:CanvasText;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}",
+        "@media (forced-colors: active){.rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.rhc0e9x:hover{color:CanvasText;}.rhc0e9x:hover:active{color:CanvasText;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"
+    ]
+});
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    before: {
+        j35jbq: [
+            "f1e31b4d",
+            "f1vgc2s3"
+        ],
+        Bhzewxz: "f15twtuk"
+    },
+    after: {
+        oyh7mz: [
+            "f1vgc2s3",
+            "f1e31b4d"
+        ],
+        Bhzewxz: "f15twtuk"
+    },
+    above: {
+        B5kzvoi: "f1yab3r1",
+        Bqenvij: "f1aar7gd",
+        a9b677: "fly5x3f"
+    },
+    sizeSmall: {
+        a9b677: "f83td6f",
+        oedwrj: [
+            "f1t5zc5r",
+            "fmy58zi"
+        ]
+    }
+}, {
+    d: [
+        ".f1e31b4d{right:0;}",
+        ".f1vgc2s3{left:0;}",
+        ".f15twtuk{top:0;}",
+        ".f1yab3r1{bottom:0;}",
+        ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}",
+        ".fly5x3f{width:100%;}",
+        ".f83td6f{width:calc(32px + 2 * var(--spacingHorizontalS));}",
+        ".f1t5zc5r:checked~.fui-Switch__indicator>*{transform:translateX(16px);}",
+        ".fmy58zi:checked~.fui-Switch__indicator>*{transform:translateX(-16px);}"
+    ]
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bceei9c: "f1k6fduh",
+        jrapky: "f49ad5g",
+        B6of3ja: "f1xlvstr",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1f5q0n8"
+    },
+    sizeSmall: {
+        Be2twd7: "fy9rknc",
+        Bg96gwp: "fwrc4pm",
+        jrapky: "f1suqah5",
+        B6of3ja: "f26bnac"
+    },
+    above: {
+        z8tnut: "f1ywm7hm",
+        Byoj8tv: "f14wxoun",
+        a9b677: "fly5x3f"
+    },
+    after: {
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ]
+    },
+    before: {
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
+        ]
+    }
+}, {
+    d: [
+        ".f1k6fduh{cursor:pointer;}",
+        ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}",
+        ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}",
+        [
+            ".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1suqah5{margin-bottom:calc((16px - var(--lineHeightBase200)) / 2);}",
+        ".f26bnac{margin-top:calc((16px - var(--lineHeightBase200)) / 2);}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
+        ".fly5x3f{width:100%;}",
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"
+    ]
+});
+const useSwitchStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    const labelStyles = useLabelStyles();
+    const { label, labelPosition, size } = state;
+    state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+    state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+    state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-switch/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js

@@ -0,0 +1,291 @@
+'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, {
+    switchClassName: function() {
+        return switchClassName;
+    },
+    switchClassNames: function() {
+        return switchClassNames;
+    },
+    useSwitchStyles_unstable: function() {
+        return useSwitchStyles_unstable;
+    }
+});
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const switchClassNames = {
+    root: 'fui-Switch',
+    indicator: 'fui-Switch__indicator',
+    input: 'fui-Switch__input',
+    label: 'fui-Switch__label'
+};
+const switchClassName = switchClassNames.root;
+// Thumb and track sizes used by the component.
+const spaceBetweenThumbAndTrack = 2;
+// Medium size dimensions
+const trackHeightMedium = 20;
+const trackWidthMedium = 40;
+const thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;
+// Small size dimensions (from design mockup)
+const trackHeightSmall = 16;
+const trackWidthSmall = 32;
+const thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    alignItems: 'flex-start',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    position: 'relative',
+    ...(0, _reacttabster.createFocusOutlineStyle)({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    border: '1px solid',
+    lineHeight: 0,
+    boxSizing: 'border-box',
+    fill: 'currentColor',
+    flexShrink: 0,
+    fontSize: `${thumbSizeMedium}px`,
+    height: `${trackHeightMedium}px`,
+    margin: _reacttheme.tokens.spacingVerticalS + ' ' + _reacttheme.tokens.spacingHorizontalS,
+    pointerEvents: 'none',
+    transitionDuration: _reacttheme.tokens.durationNormal,
+    transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
+    transitionProperty: 'background, border, color',
+    width: `${trackWidthMedium}px`,
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms'
+    },
+    '@media (forced-colors: active)': {
+        color: 'CanvasText',
+        '> i': {
+            forcedColorAdjust: 'none'
+        }
+    },
+    '> *': {
+        transitionDuration: _reacttheme.tokens.durationNormal,
+        transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
+        transitionProperty: 'transform',
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms'
+        }
+    }
+});
+const useIndicatorStyles = (0, _react.makeStyles)({
+    labelAbove: {
+        marginTop: 0
+    },
+    sizeSmall: {
+        fontSize: `${thumbSizeSmall}px`,
+        height: `${trackHeightSmall}px`,
+        width: `${trackWidthSmall}px`
+    }
+});
+const useInputBaseClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    height: '100%',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    // 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 switch.
+    width: `calc(${trackWidthMedium}px + 2 * ${_reacttheme.tokens.spacingHorizontalS})`,
+    // Checked (both enabled and disabled)
+    ':checked': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            '> *': {
+                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`
+            }
+        }
+    },
+    // Disabled (both checked and unchecked)
+    ':disabled, &[aria-disabled="true"]': {
+        cursor: 'default',
+        [`& ~ .${switchClassNames.indicator}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        [`& ~ .${switchClassNames.label}`]: {
+            cursor: 'default',
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    },
+    // Enabled and unchecked
+    ':enabled:not(:checked):not([aria-disabled="true"])': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            color: _reacttheme.tokens.colorNeutralStrokeAccessible,
+            borderColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        },
+        [`& ~ .${switchClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1
+        },
+        ':hover': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                color: _reacttheme.tokens.colorNeutralStrokeAccessibleHover,
+                borderColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                color: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed,
+                borderColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+            }
+        }
+    },
+    // Enabled and checked
+    ':enabled:checked:not([aria-disabled="true"])': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground,
+            color: _reacttheme.tokens.colorNeutralForegroundInverted,
+            borderColor: _reacttheme.tokens.colorTransparentStroke
+        },
+        ':hover': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                backgroundColor: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
+                borderColor: _reacttheme.tokens.colorTransparentStrokeInteractive
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                backgroundColor: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
+                borderColor: _reacttheme.tokens.colorTransparentStrokeInteractive
+            }
+        }
+    },
+    // Disabled and unchecked
+    ':disabled:not(:checked), &[aria-disabled="true"]:not(:checked)': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorNeutralStrokeDisabled
+        }
+    },
+    // Disabled and checked
+    ':disabled:checked, &[aria-disabled="true"]:checked': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+            borderColor: _reacttheme.tokens.colorTransparentStrokeDisabled
+        }
+    },
+    '@media (forced-colors: active)': {
+        ':disabled, &[aria-disabled="true"]': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                color: 'GrayText',
+                borderColor: 'GrayText'
+            },
+            [`& ~ .${switchClassNames.label}`]: {
+                color: 'GrayText'
+            }
+        },
+        ':hover': {
+            color: 'CanvasText'
+        },
+        ':hover:active': {
+            color: 'CanvasText'
+        },
+        ':enabled:checked:not([aria-disabled="true"])': {
+            ':hover': {
+                [`& ~ .${switchClassNames.indicator}`]: {
+                    backgroundColor: 'Highlight',
+                    color: 'Canvas'
+                }
+            },
+            ':hover:active': {
+                [`& ~ .${switchClassNames.indicator}`]: {
+                    backgroundColor: 'Highlight',
+                    color: 'Canvas'
+                }
+            },
+            [`& ~ .${switchClassNames.indicator}`]: {
+                backgroundColor: 'Highlight',
+                color: 'Canvas'
+            }
+        }
+    }
+});
+const useInputStyles = (0, _react.makeStyles)({
+    before: {
+        right: 0,
+        top: 0
+    },
+    after: {
+        left: 0,
+        top: 0
+    },
+    above: {
+        bottom: 0,
+        height: `calc(${trackHeightMedium}px + ${_reacttheme.tokens.spacingVerticalS})`,
+        width: '100%'
+    },
+    sizeSmall: {
+        width: `calc(${trackWidthSmall}px + 2 * ${_reacttheme.tokens.spacingHorizontalS})`,
+        ':checked': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                '> *': {
+                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`
+                }
+            }
+        }
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = (0, _react.makeStyles)({
+    base: {
+        cursor: 'pointer',
+        // Use a (negative) margin to account for the difference between the track's height and the label's line height.
+        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.
+        marginBottom: `calc((${trackHeightMedium}px - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginTop: `calc((${trackHeightMedium}px - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`
+    },
+    sizeSmall: {
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        marginBottom: `calc((${trackHeightSmall}px - ${_reacttheme.tokens.lineHeightBase200}) / 2)`,
+        marginTop: `calc((${trackHeightSmall}px - ${_reacttheme.tokens.lineHeightBase200}) / 2)`
+    },
+    above: {
+        paddingTop: _reacttheme.tokens.spacingVerticalXS,
+        paddingBottom: _reacttheme.tokens.spacingVerticalXS,
+        width: '100%'
+    },
+    after: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXS
+    },
+    before: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalXS
+    }
+});
+const useSwitchStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    const labelStyles = useLabelStyles();
+    const { label, labelPosition, size } = state;
+    state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+    state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+    state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-switch/lib-commonjs/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, {
+    Switch: function() {
+        return _Switch.Switch;
+    },
+    renderSwitch_unstable: function() {
+        return _Switch.renderSwitch_unstable;
+    },
+    switchClassName: function() {
+        return _Switch.switchClassName;
+    },
+    switchClassNames: function() {
+        return _Switch.switchClassNames;
+    },
+    useSwitchBase_unstable: function() {
+        return _Switch.useSwitchBase_unstable;
+    },
+    useSwitchStyles_unstable: function() {
+        return _Switch.useSwitchStyles_unstable;
+    },
+    useSwitch_unstable: function() {
+        return _Switch.useSwitch_unstable;
+    }
+});
+const _Switch = require("./Switch");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eACNC,6BAAqB,EACrB,4DAA4D;;;eAC5DC,uBAAe;;;eACfC,wBAAgB;;;eAGhBG,8BAAsB;;;eAFtBF,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,WAAW"}

node_modules/@fluentui/react-switch/lib/Switch.js

@@ -0,0 +1,2 @@
+export { Switch, renderSwitch_unstable, // eslint-disable-next-line @typescript-eslint/no-deprecated
+switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from './components/Switch/index';

node_modules/@fluentui/react-switch/lib/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './components/Switch/index';\nexport {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}

node_modules/@fluentui/react-switch/lib/components/Switch/Switch.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useSwitch_unstable } from './useSwitch';
+import { renderSwitch_unstable } from './renderSwitch';
+import { useSwitchStyles_unstable } from './useSwitchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */ export const Switch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSwitch_unstable(props, ref);
+    useSwitchStyles_unstable(state);
+    useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);
+    return renderSwitch_unstable(state);
+});
+Switch.displayName = 'Switch';

node_modules/@fluentui/react-switch/lib/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-switch/lib/components/Switch/Switch.types.js

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

node_modules/@fluentui/react-switch/lib/components/Switch/Switch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * The size of the Switch.\n   *\n   *  @default 'medium'\n   */\n  size?: 'small' | 'medium';\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: SwitchOnChangeData) => void;\n};\n\n/**\n * Switch base props, excluding design-related props like size\n */\nexport type SwitchBaseProps = Omit<SwitchProps, 'size'>;\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> &\n  Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;\n\n/**\n * Switch base state, excluding design-related state like size\n */\nexport type SwitchBaseState = Omit<SwitchState, 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-switch/lib/components/Switch/index.js

@@ -0,0 +1,5 @@
+export { Switch } from './Switch';
+export { renderSwitch_unstable } from './renderSwitch';
+export { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';
+export { // eslint-disable-next-line @typescript-eslint/no-deprecated
+switchClassName, switchClassNames, useSwitchStyles_unstable } from './useSwitchStyles.styles';

node_modules/@fluentui/react-switch/lib/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';\nexport {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","useSwitchBase_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AASlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SACE,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,QACnB,2BAA2B"}

node_modules/@fluentui/react-switch/lib/components/Switch/renderSwitch.js

@@ -0,0 +1,16 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */ export const renderSwitch_unstable = (state)=>{
+    assertSlots(state);
+    const { labelPosition } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.input, {}),
+            labelPosition !== 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {}),
+            /*#__PURE__*/ _jsx(state.indicator, {}),
+            labelPosition === 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {})
+        ]
+    });
+};

node_modules/@fluentui/react-switch/lib/components/Switch/renderSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchBaseState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchBaseState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACF,MAAMG,KAAK;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;0BACzD,KAACJ,MAAMK,SAAS;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAG/D,EAAE"}

node_modules/@fluentui/react-switch/lib/components/Switch/useSwitch.js

@@ -0,0 +1,113 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { CircleFilled } from '@fluentui/react-icons';
+import { Label } from '@fluentui/react-label';
+import { useFocusWithin } from '@fluentui/react-tabster';
+import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */ export const useSwitch_unstable = (props, ref)=>{
+    const { size = 'medium', ...baseProps } = props;
+    const baseState = useSwitchBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size
+    };
+};
+/**
+ * Base hook for Switch component, manages state and structure common to all variants of Switch
+ *
+ * @param props - base props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */ export const useSwitchBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
+    const { checked, defaultChecked, disabled, disabledFocusable = false, labelPosition = 'after', onChange, required } = props;
+    const nativeProps = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'checked',
+            'defaultChecked',
+            'onChange',
+            'disabledFocusable'
+        ]
+    });
+    const id = useId('switch-', nativeProps.primary.id);
+    const root = slot.always(props.root, {
+        defaultProps: {
+            ref: useFocusWithin(),
+            ...nativeProps.root
+        },
+        elementType: 'div'
+    });
+    const indicator = slot.always(props.indicator, {
+        defaultProps: {
+            'aria-hidden': true,
+            children: /*#__PURE__*/ React.createElement(CircleFilled, null)
+        },
+        elementType: 'div'
+    });
+    const input = slot.always(props.input, {
+        defaultProps: {
+            checked,
+            defaultChecked,
+            id,
+            ref,
+            role: 'switch',
+            type: 'checkbox',
+            ...nativeProps.primary,
+            disabled: disabled && !disabledFocusable,
+            ...disabledFocusable && {
+                'aria-disabled': true
+            }
+        },
+        elementType: 'input'
+    });
+    input.onChange = mergeCallbacks(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            checked: ev.currentTarget.checked
+        }));
+    input.onClick = mergeCallbacks(input.onClick, (ev)=>{
+        if (disabledFocusable) {
+            ev.preventDefault();
+        }
+    });
+    input.onKeyDown = mergeCallbacks(input.onKeyDown, (ev)=>{
+        if (disabledFocusable && (ev.key === ' ' || ev.key === 'Enter')) {
+            ev.preventDefault();
+        }
+    });
+    const label = slot.optional(props.label, {
+        defaultProps: {
+            disabled: disabled || disabledFocusable,
+            htmlFor: id,
+            required,
+            size: 'medium'
+        },
+        elementType: Label
+    });
+    return {
+        disabledFocusable,
+        labelPosition,
+        components: {
+            root: 'div',
+            indicator: 'div',
+            input: 'input',
+            label: Label
+        },
+        root,
+        indicator,
+        input,
+        label
+    };
+};

node_modules/@fluentui/react-switch/lib/components/Switch/useSwitchStyles.styles.js

@@ -0,0 +1,137 @@
+'use client';
+
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+export const switchClassNames = {
+  root: 'fui-Switch',
+  indicator: 'fui-Switch__indicator',
+  input: 'fui-Switch__input',
+  label: 'fui-Switch__label'
+};
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+export const switchClassName = switchClassNames.root;
+// Thumb and track sizes used by the component.
+const spaceBetweenThumbAndTrack = 2;
+// Medium size dimensions
+const trackHeightMedium = 20;
+const trackWidthMedium = 40;
+const thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;
+// Small size dimensions (from design mockup)
+const trackHeightSmall = 16;
+const trackWidthSmall = 32;
+const thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r2i81i2", "rofhmb8", {
+  r: [".r2i81i2{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}", ".r2i81i2:focus{outline-style:none;}", ".r2i81i2:focus-visible{outline-style:none;}", ".r2i81i2[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r2i81i2[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);}", ".rofhmb8{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}", ".rofhmb8:focus{outline-style:none;}", ".rofhmb8:focus-visible{outline-style:none;}", ".rofhmb8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rofhmb8[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){.r2i81i2[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){.rofhmb8[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({
+  vertical: {
+    Beiy3e4: "f1vx9l62"
+  }
+}, {
+  d: [".f1vx9l62{flex-direction:column;}"]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1c3hft5", null, {
+  r: [".r1c3hft5{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}", ".r1c3hft5>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.r1c3hft5{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r1c3hft5{color:CanvasText;}.r1c3hft5>i{forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r1c3hft5>*{transition-duration:0.01ms;}}"]
+});
+const useIndicatorStyles = /*#__PURE__*/__styles({
+  labelAbove: {
+    B6of3ja: "f1hu3pq6"
+  },
+  sizeSmall: {
+    Be2twd7: "fses1vf",
+    Bqenvij: "fd461yt",
+    a9b677: "f1szoe96"
+  }
+}, {
+  d: [".f1hu3pq6{margin-top:0;}", ".fses1vf{font-size:14px;}", ".fd461yt{height:16px;}", ".f1szoe96{width:32px;}"]
+});
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("r12ojtgy", "rhc0e9x", {
+  r: [".r12ojtgy{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r12ojtgy:checked~.fui-Switch__indicator>*{transform:translateX(20px);}", ".r12ojtgy:disabled,.r12ojtgy[aria-disabled=\"true\"]{cursor:default;}", ".r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r12ojtgy:disabled:not(:checked)~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r12ojtgy:disabled:checked~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", ".rhc0e9x{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rhc0e9x:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}", ".rhc0e9x:disabled,.rhc0e9x[aria-disabled=\"true\"]{cursor:default;}", ".rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rhc0e9x:disabled:not(:checked)~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rhc0e9x:disabled:checked~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"],
+  s: ["@media (forced-colors: active){.r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.r12ojtgy:hover{color:CanvasText;}.r12ojtgy:hover:active{color:CanvasText;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", "@media (forced-colors: active){.rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.rhc0e9x:hover{color:CanvasText;}.rhc0e9x:hover:active{color:CanvasText;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]
+});
+const useInputStyles = /*#__PURE__*/__styles({
+  before: {
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bhzewxz: "f15twtuk"
+  },
+  after: {
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    Bhzewxz: "f15twtuk"
+  },
+  above: {
+    B5kzvoi: "f1yab3r1",
+    Bqenvij: "f1aar7gd",
+    a9b677: "fly5x3f"
+  },
+  sizeSmall: {
+    a9b677: "f83td6f",
+    oedwrj: ["f1t5zc5r", "fmy58zi"]
+  }
+}, {
+  d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}", ".f83td6f{width:calc(32px + 2 * var(--spacingHorizontalS));}", ".f1t5zc5r:checked~.fui-Switch__indicator>*{transform:translateX(16px);}", ".fmy58zi:checked~.fui-Switch__indicator>*{transform:translateX(-16px);}"]
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/__styles({
+  base: {
+    Bceei9c: "f1k6fduh",
+    jrapky: "f49ad5g",
+    B6of3ja: "f1xlvstr",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1f5q0n8"
+  },
+  sizeSmall: {
+    Be2twd7: "fy9rknc",
+    Bg96gwp: "fwrc4pm",
+    jrapky: "f1suqah5",
+    B6of3ja: "f26bnac"
+  },
+  above: {
+    z8tnut: "f1ywm7hm",
+    Byoj8tv: "f14wxoun",
+    a9b677: "fly5x3f"
+  },
+  after: {
+    uwmqm3: ["fruq291", "f7x41pl"]
+  },
+  before: {
+    z189sj: ["f7x41pl", "fruq291"]
+  }
+}, {
+  d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1suqah5{margin-bottom:calc((16px - var(--lineHeightBase200)) / 2);}", ".f26bnac{margin-top:calc((16px - var(--lineHeightBase200)) / 2);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
+});
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+export const useSwitchStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  const indicatorBaseClassName = useIndicatorBaseClassName();
+  const indicatorStyles = useIndicatorStyles();
+  const inputBaseClassName = useInputBaseClassName();
+  const inputStyles = useInputStyles();
+  const labelStyles = useLabelStyles();
+  const {
+    label,
+    labelPosition,
+    size
+  } = state;
+  state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+  state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
+  if (state.label) {
+    state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-switch/lib/components/Switch/useSwitchStyles.styles.raw.js

@@ -0,0 +1,274 @@
+'use client';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+export const switchClassNames = {
+    root: 'fui-Switch',
+    indicator: 'fui-Switch__indicator',
+    input: 'fui-Switch__input',
+    label: 'fui-Switch__label'
+};
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */ export const switchClassName = switchClassNames.root;
+// Thumb and track sizes used by the component.
+const spaceBetweenThumbAndTrack = 2;
+// Medium size dimensions
+const trackHeightMedium = 20;
+const trackWidthMedium = 40;
+const thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;
+// Small size dimensions (from design mockup)
+const trackHeightSmall = 16;
+const trackWidthSmall = 32;
+const thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'flex-start',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    position: 'relative',
+    ...createFocusOutlineStyle({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = makeStyles({
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+const useIndicatorBaseClassName = makeResetStyles({
+    borderRadius: tokens.borderRadiusCircular,
+    border: '1px solid',
+    lineHeight: 0,
+    boxSizing: 'border-box',
+    fill: 'currentColor',
+    flexShrink: 0,
+    fontSize: `${thumbSizeMedium}px`,
+    height: `${trackHeightMedium}px`,
+    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,
+    pointerEvents: 'none',
+    transitionDuration: tokens.durationNormal,
+    transitionTimingFunction: tokens.curveEasyEase,
+    transitionProperty: 'background, border, color',
+    width: `${trackWidthMedium}px`,
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms'
+    },
+    '@media (forced-colors: active)': {
+        color: 'CanvasText',
+        '> i': {
+            forcedColorAdjust: 'none'
+        }
+    },
+    '> *': {
+        transitionDuration: tokens.durationNormal,
+        transitionTimingFunction: tokens.curveEasyEase,
+        transitionProperty: 'transform',
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms'
+        }
+    }
+});
+const useIndicatorStyles = makeStyles({
+    labelAbove: {
+        marginTop: 0
+    },
+    sizeSmall: {
+        fontSize: `${thumbSizeSmall}px`,
+        height: `${trackHeightSmall}px`,
+        width: `${trackWidthSmall}px`
+    }
+});
+const useInputBaseClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    height: '100%',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    // 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 switch.
+    width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,
+    // Checked (both enabled and disabled)
+    ':checked': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            '> *': {
+                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`
+            }
+        }
+    },
+    // Disabled (both checked and unchecked)
+    ':disabled, &[aria-disabled="true"]': {
+        cursor: 'default',
+        [`& ~ .${switchClassNames.indicator}`]: {
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        [`& ~ .${switchClassNames.label}`]: {
+            cursor: 'default',
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    },
+    // Enabled and unchecked
+    ':enabled:not(:checked):not([aria-disabled="true"])': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            color: tokens.colorNeutralStrokeAccessible,
+            borderColor: tokens.colorNeutralStrokeAccessible
+        },
+        [`& ~ .${switchClassNames.label}`]: {
+            color: tokens.colorNeutralForeground1
+        },
+        ':hover': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                color: tokens.colorNeutralStrokeAccessibleHover,
+                borderColor: tokens.colorNeutralStrokeAccessibleHover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                color: tokens.colorNeutralStrokeAccessiblePressed,
+                borderColor: tokens.colorNeutralStrokeAccessiblePressed
+            }
+        }
+    },
+    // Enabled and checked
+    ':enabled:checked:not([aria-disabled="true"])': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            backgroundColor: tokens.colorCompoundBrandBackground,
+            color: tokens.colorNeutralForegroundInverted,
+            borderColor: tokens.colorTransparentStroke
+        },
+        ':hover': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                backgroundColor: tokens.colorCompoundBrandBackgroundHover,
+                borderColor: tokens.colorTransparentStrokeInteractive
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
+                borderColor: tokens.colorTransparentStrokeInteractive
+            }
+        }
+    },
+    // Disabled and unchecked
+    ':disabled:not(:checked), &[aria-disabled="true"]:not(:checked)': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            borderColor: tokens.colorNeutralStrokeDisabled
+        }
+    },
+    // Disabled and checked
+    ':disabled:checked, &[aria-disabled="true"]:checked': {
+        [`& ~ .${switchClassNames.indicator}`]: {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            borderColor: tokens.colorTransparentStrokeDisabled
+        }
+    },
+    '@media (forced-colors: active)': {
+        ':disabled, &[aria-disabled="true"]': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                color: 'GrayText',
+                borderColor: 'GrayText'
+            },
+            [`& ~ .${switchClassNames.label}`]: {
+                color: 'GrayText'
+            }
+        },
+        ':hover': {
+            color: 'CanvasText'
+        },
+        ':hover:active': {
+            color: 'CanvasText'
+        },
+        ':enabled:checked:not([aria-disabled="true"])': {
+            ':hover': {
+                [`& ~ .${switchClassNames.indicator}`]: {
+                    backgroundColor: 'Highlight',
+                    color: 'Canvas'
+                }
+            },
+            ':hover:active': {
+                [`& ~ .${switchClassNames.indicator}`]: {
+                    backgroundColor: 'Highlight',
+                    color: 'Canvas'
+                }
+            },
+            [`& ~ .${switchClassNames.indicator}`]: {
+                backgroundColor: 'Highlight',
+                color: 'Canvas'
+            }
+        }
+    }
+});
+const useInputStyles = makeStyles({
+    before: {
+        right: 0,
+        top: 0
+    },
+    after: {
+        left: 0,
+        top: 0
+    },
+    above: {
+        bottom: 0,
+        height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,
+        width: '100%'
+    },
+    sizeSmall: {
+        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,
+        ':checked': {
+            [`& ~ .${switchClassNames.indicator}`]: {
+                '> *': {
+                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`
+                }
+            }
+        }
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = makeStyles({
+    base: {
+        cursor: 'pointer',
+        // Use a (negative) margin to account for the difference between the track's height and the label's line height.
+        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.
+        marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,
+        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`
+    },
+    sizeSmall: {
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,
+        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`
+    },
+    above: {
+        paddingTop: tokens.spacingVerticalXS,
+        paddingBottom: tokens.spacingVerticalXS,
+        width: '100%'
+    },
+    after: {
+        paddingLeft: tokens.spacingHorizontalXS
+    },
+    before: {
+        paddingRight: tokens.spacingHorizontalXS
+    }
+});
+/**
+ * Apply styling to the Switch slots based on the state
+ */ export const useSwitchStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    const labelStyles = useLabelStyles();
+    const { label, labelPosition, size } = state;
+    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
+    if (state.label) {
+        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,2 @@
+export { Switch, renderSwitch_unstable, // eslint-disable-next-line @typescript-eslint/no-deprecated
+switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from './Switch';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW"}

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

@@ -0,0 +1,53 @@
+{
+  "name": "@fluentui/react-switch",
+  "version": "9.7.1",
+  "description": "Fluent UI React Switch 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"
+  ]
+}