feat: Fluent UI Outlook Lite + connections mockup

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