feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/Option.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Option", {
+    enumerable: true,
+    get: function() {
+        return Option;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useOption = require("./useOption");
+const _renderOption = require("./renderOption");
+const _useOptionStylesstyles = require("./useOptionStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Option = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useOption.useOption_unstable)(props, ref);
+    (0, _useOptionStylesstyles.useOptionStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOptionStyles_unstable')(state);
+    return (0, _renderOption.renderOption_unstable)(state);
+});
+Option.displayName = 'Option';

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","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-combobox/lib-commonjs/components/Option/Option.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-combobox/lib-commonjs/components/Option/Option.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /** The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /**\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    active: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /** If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /** If true, the option is selected */\n    selected: boolean;\n  };\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/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, {
+    Option: function() {
+        return _Option.Option;
+    },
+    optionClassNames: function() {
+        return _useOptionStylesstyles.optionClassNames;
+    },
+    renderOption_unstable: function() {
+        return _renderOption.renderOption_unstable;
+    },
+    useOptionBase_unstable: function() {
+        return _useOption.useOptionBase_unstable;
+    },
+    useOptionStyles_unstable: function() {
+        return _useOptionStylesstyles.useOptionStyles_unstable;
+    },
+    useOption_unstable: function() {
+        return _useOption.useOption_unstable;
+    }
+});
+const _Option = require("./Option");
+const _renderOption = require("./renderOption");
+const _useOption = require("./useOption");
+const _useOptionStylesstyles = require("./useOptionStyles.styles");

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable, useOptionBase_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","renderOption_unstable","useOption_unstable","useOptionBase_unstable","optionClassNames","useOptionStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAINI,uCAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eACxBE,+CAAwB;;;eAD1CH,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/renderOption.js

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

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/renderOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Option/renderOption.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 { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState): JSXElement => {\n  assertSlots<OptionSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkIcon && <state.checkIcon />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderOption_unstable","state","root","checkIcon","children"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/useOption.js

@@ -0,0 +1,151 @@
+'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, {
+    useOptionBase_unstable: function() {
+        return useOptionBase_unstable;
+    },
+    useOption_unstable: function() {
+        return useOption_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactaria = require("@fluentui/react-aria");
+const _reacticons = require("@fluentui/react-icons");
+const _ListboxContext = require("../../contexts/ListboxContext");
+function getTextString(text, children) {
+    if (text !== undefined) {
+        return text;
+    }
+    let textString = '';
+    let hasNonStringChild = false;
+    _react.Children.forEach(children, (child)=>{
+        if (typeof child === 'string') {
+            textString += child;
+        } else {
+            hasNonStringChild = true;
+        }
+    });
+    // warn if an Option has non-string children and no text prop
+    if (hasNonStringChild) {
+        // eslint-disable-next-line no-console
+        console.warn('Provide a `text` prop to Option components when they contain non-string children.');
+    }
+    return textString;
+}
+const useOption_unstable = (props, ref)=>{
+    'use no memo';
+    const state = useOptionBase_unstable(props, ref);
+    // check icon
+    let CheckIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkFilled, null);
+    if (state.multiselect) {
+        CheckIcon = state.selected ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null) : '';
+    }
+    if (state.checkIcon) {
+        var _state_checkIcon;
+        var _children;
+        (_children = (_state_checkIcon = state.checkIcon).children) !== null && _children !== void 0 ? _children : _state_checkIcon.children = CheckIcon;
+    }
+    return state;
+};
+const useOptionBase_unstable = (props, ref)=>{
+    const { children, disabled, text, value } = props;
+    const optionRef = _react.useRef(null);
+    const optionText = getTextString(text, children);
+    const optionValue = value !== null && value !== void 0 ? value : optionText;
+    // use the id if provided, otherwise use a generated id
+    const id = (0, _reactutilities.useId)('fluent-option', props.id);
+    // data used for context registration & events
+    const optionData = _react.useMemo(()=>({
+            id,
+            disabled,
+            text: optionText,
+            value: optionValue
+        }), [
+        id,
+        disabled,
+        optionText,
+        optionValue
+    ]);
+    // context values
+    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
+    const multiselect = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.multiselect);
+    const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
+    const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{
+        const selectedOptions = ctx.selectedOptions;
+        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
+    });
+    const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
+    const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
+    const onClick = (event)=>{
+        var _props_onClick;
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        activeDescendantController.focus(id);
+        // handle selection change
+        selectOption(event, optionData);
+        onOptionClick(event);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+    };
+    // register option data with context
+    _react.useEffect(()=>{
+        if (id && optionRef.current) {
+            return registerOption(optionData, optionRef.current);
+        }
+    }, [
+        id,
+        optionData,
+        registerOption
+    ]);
+    const semanticProps = multiselect ? {
+        role: 'menuitemcheckbox',
+        'aria-checked': selected
+    } : {
+        role: 'option',
+        'aria-selected': selected
+    };
+    return {
+        components: {
+            root: 'div',
+            checkIcon: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: (0, _reactutilities.useMergedRefs)(ref, optionRef),
+            'aria-disabled': disabled ? 'true' : undefined,
+            id,
+            ...semanticProps,
+            ...props,
+            onClick
+        }), {
+            elementType: 'div'
+        }),
+        checkIcon: _reactutilities.slot.optional(props.checkIcon, {
+            renderByDefault: true,
+            defaultProps: {
+                'aria-hidden': 'true'
+            },
+            elementType: 'span'
+        }),
+        disabled,
+        multiselect,
+        selected,
+        // no longer used
+        focusVisible: false,
+        active: false
+    };
+};

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/useOptionStyles.styles.js

@@ -0,0 +1,348 @@
+'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, {
+    optionClassNames: function() {
+        return optionClassNames;
+    },
+    useOptionStyles_unstable: function() {
+        return useOptionStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const optionClassNames = {
+    root: 'fui-Option',
+    checkIcon: 'fui-Option__checkIcon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bt984gj: "f122n59",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        sj55zd: "f19n0e5",
+        i8kkvl: "f1ufnopg",
+        Bceei9c: "f1k6fduh",
+        mc9l5x: "f22iagw",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bg96gwp: "f1i3iumi",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fm5eomj",
+        qhf8xq: "f10pi13n",
+        Jwef8y: "f1knas48",
+        Bi91k9c: "feu1g3u",
+        zqbkvg: "fo79ri9",
+        h82x05: [
+            "f1osiabc",
+            "f1e8le25"
+        ],
+        cqj998: "f1yusjty",
+        j3hlsh: [
+            "f1e8le25",
+            "f1osiabc"
+        ],
+        ecr2s2: "fb40n2d",
+        lj723h: "f1g4hkjv",
+        Btxx2vb: "f1lnr2zp",
+        sltcwy: [
+            "f1ogfk9z",
+            "f1g7j8ec"
+        ],
+        dnwvvm: "fiuf46r",
+        Blyvkvs: [
+            "f1g7j8ec",
+            "f1ogfk9z"
+        ]
+    },
+    active: {
+        Bowz1zl: "f11vrvdw",
+        oxogb1: "f17hxjb7",
+        Ix2sn8: "f1dha69c",
+        q7v32p: "f1lm7500",
+        B7cbj04: 0,
+        Bewtojm: 0,
+        b50fsz: 0,
+        B1wzb3v: 0,
+        Bqwk70n: 0,
+        B37u8z8: 0,
+        avt0cx: 0,
+        f0sref: 0,
+        B9fkznv: 0,
+        Be3o27t: 0,
+        Bertapg: 0,
+        B53xpsf: 0,
+        Bsv72rj: 0,
+        B39dzdd: 0,
+        Btq9bd3: 0,
+        Bqfxd14: 0,
+        atup0s: "fo7xqb",
+        Fffuxt: 0,
+        Bttcd12: 0,
+        Beitzug: 0,
+        Bqougee: 0,
+        B86i8pi: "f1kurthe",
+        Bhijsxg: "fwq15dy",
+        kktds4: "f1pb3wry",
+        Bmau3bo: [
+            "ftjv2f4",
+            "f1flhb1f"
+        ],
+        npektv: [
+            "f1flhb1f",
+            "ftjv2f4"
+        ]
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        Jwef8y: "f9ql6rf",
+        Bi91k9c: "fvgxktp",
+        zqbkvg: "f185j3qj",
+        h82x05: [
+            "f1dligi3",
+            "f1vydzie"
+        ],
+        cqj998: "fjw1di3",
+        j3hlsh: [
+            "f1vydzie",
+            "f1dligi3"
+        ],
+        ecr2s2: "fgj9um3",
+        lj723h: "f19wldhg",
+        Btxx2vb: "f1ss0kt2",
+        sltcwy: [
+            "f1t6oli3",
+            "fjy9ci8"
+        ],
+        dnwvvm: "fresaxk",
+        Blyvkvs: [
+            "fjy9ci8",
+            "f1t6oli3"
+        ],
+        B7iucu3: "f1cyfu5x"
+    },
+    selected: {},
+    checkIcon: {
+        Bnnss6s: "fi64zpg",
+        Be2twd7: "fod5ikn",
+        Frg6f3: [
+            "f18b9hdq",
+            "fn6qj8t"
+        ],
+        t21cq0: [
+            "f1xk557c",
+            "f1h9en5y"
+        ],
+        Bcdw1i0: "fd7fpy0",
+        Bo70h7d: "fvc9v3g"
+    },
+    selectedCheck: {
+        Bcdw1i0: "f1022m68"
+    },
+    multiselectCheck: {
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f1l3cf7o",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fq9zq91",
+        B7ck84d: "f1ewtqcl",
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        Brf1p80: "f4d9j23",
+        Bkfmm31: "f1w9h62z",
+        Be2twd7: "f1ugzwwg",
+        Bqenvij: "fd461yt",
+        a9b677: "fjw5fx7",
+        Bcdw1i0: "f1022m68"
+    },
+    selectedMultiselectCheck: {
+        De3pzq: "ftywsgz",
+        sj55zd: "fqpbvvt",
+        g2u3we: "f3xi7mh",
+        h3c5rm: [
+            "ftovhe4",
+            "f1wczvin"
+        ],
+        B9xav0g: "f68vbr6",
+        zhjwy3: [
+            "f1wczvin",
+            "ftovhe4"
+        ]
+    },
+    checkDisabled: {
+        sj55zd: "f1s2aq7o",
+        B7iucu3: "f1cyfu5x"
+    },
+    multiselectCheckDisabled: {
+        g2u3we: "f1r1t4y1",
+        h3c5rm: [
+            "fmj8ijw",
+            "figx54m"
+        ],
+        B9xav0g: "f360ss8",
+        zhjwy3: [
+            "figx54m",
+            "fmj8ijw"
+        ]
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
+        ".f1k6fduh{cursor:pointer;}",
+        ".f22iagw{display:flex;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        [
+            ".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".f10pi13n{position:relative;}",
+        ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}",
+        ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}",
+        ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}",
+        ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}",
+        [
+            ".fo7xqb[data-activedescendant-focusvisible]::after{border:2px solid var(--colorStrokeFocus2);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}",
+        ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}",
+        ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
+        ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".fi64zpg{flex-shrink:0;}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
+        ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}",
+        ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
+        ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
+        ".fd7fpy0{visibility:hidden;}",
+        ".fvc9v3g svg{display:block;}",
+        ".f1022m68{visibility:visible;}",
+        [
+            ".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f4d9j23{justify-content:center;}",
+        ".f1w9h62z{fill:currentColor;}",
+        ".f1ugzwwg{font-size:12px;}",
+        ".fd461yt{height:16px;}",
+        ".fjw5fx7{width:16px;}",
+        ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}",
+        ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
+        ".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}",
+        ".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}",
+        ".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}",
+        ".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}",
+        ".f1r1t4y1{border-top-color:var(--colorNeutralForegroundDisabled);}",
+        ".fmj8ijw{border-right-color:var(--colorNeutralForegroundDisabled);}",
+        ".figx54m{border-left-color:var(--colorNeutralForegroundDisabled);}",
+        ".f360ss8{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    h: [
+        ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
+        ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
+        ".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
+        ".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
+        ".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
+        ".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
+        ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
+        ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
+        ".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
+        ".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
+        ".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
+        ".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    a: [
+        ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
+        ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
+        ".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
+        ".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
+        ".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
+        ".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
+        ".fgj9um3:active{background-color:var(--colorTransparentBackground);}",
+        ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
+        ".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
+        ".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
+        ".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useOptionStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled, multiselect, selected } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+    if (state.checkIcon) {
+        state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-combobox/lib-commonjs/components/Option/useOptionStyles.styles.raw.js

@@ -0,0 +1,134 @@
+'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, {
+    optionClassNames: function() {
+        return optionClassNames;
+    },
+    useOptionStyles_unstable: function() {
+        return useOptionStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _reactaria = require("@fluentui/react-aria");
+const _react = require("@griffel/react");
+const optionClassNames = {
+    root: 'fui-Option',
+    checkIcon: 'fui-Option__checkIcon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        alignItems: 'center',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        columnGap: _reacttheme.tokens.spacingHorizontalXS,
+        cursor: 'pointer',
+        display: 'flex',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        lineHeight: _reacttheme.tokens.lineHeightBase300,
+        padding: `${_reacttheme.tokens.spacingVerticalSNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
+        position: 'relative',
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            [`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForeground1Hover)
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+            color: _reacttheme.tokens.colorNeutralForeground1Pressed,
+            [`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForeground1Hover)
+        }
+    },
+    active: {
+        [`[${_reactaria.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {
+            content: '""',
+            position: 'absolute',
+            pointerEvents: 'none',
+            zIndex: 1,
+            border: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            top: '-2px',
+            bottom: '-2px',
+            left: '-2px',
+            right: '-2px'
+        }
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            [`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            [`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    selected: {},
+    checkIcon: {
+        flexShrink: 0,
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        // Shift icon(s) to the left to give text content extra spacing without needing an extra node
+        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon
+        marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} * -1)`,
+        marginRight: _reacttheme.tokens.spacingHorizontalXXS,
+        visibility: 'hidden',
+        '& svg': {
+            display: 'block'
+        }
+    },
+    selectedCheck: {
+        visibility: 'visible'
+    },
+    multiselectCheck: {
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: _reacttheme.tokens.borderRadiusSmall,
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fill: 'currentColor',
+        fontSize: '12px',
+        height: '16px',
+        width: '16px',
+        visibility: 'visible'
+    },
+    selectedMultiselectCheck: {
+        backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundInverted,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorCompoundBrandBackground)
+    },
+    checkDisabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    multiselectCheckDisabled: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
+});
+const useOptionStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled, multiselect, selected } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+    if (state.checkIcon) {
+        state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
+    }
+    return state;
+};