feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCombobox = require("./useCombobox");
+const _renderCombobox = require("./renderCombobox");
+const _useComboboxStylesstyles = require("./useComboboxStyles.styles");
+const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Combobox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCombobox.useCombobox_unstable)(props, ref);
+    const contextValues = (0, _useComboboxContextValues.useComboboxContextValues)(state);
+    (0, _useComboboxStylesstyles.useComboboxStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useComboboxStyles_unstable')(state);
+    return (0, _renderCombobox.renderCombobox_unstable)(state, contextValues);
+});
+Combobox.displayName = 'Combobox';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAE/B,0CAA0C;qCAEvC,kCAAkC;AAKvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /** The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /** The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /**\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * Combobox Props without design-only props.\n */\nexport type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/**\n * State used in rendering Combobox, without design-only state.\n */\nexport type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-combobox/lib-commonjs/components/Combobox/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, {
+    Combobox: function() {
+        return _Combobox.Combobox;
+    },
+    comboboxClassNames: function() {
+        return _useComboboxStylesstyles.comboboxClassNames;
+    },
+    renderCombobox_unstable: function() {
+        return _renderCombobox.renderCombobox_unstable;
+    },
+    useComboboxBase_unstable: function() {
+        return _useCombobox.useComboboxBase_unstable;
+    },
+    useComboboxStyles_unstable: function() {
+        return _useComboboxStylesstyles.useComboboxStyles_unstable;
+    },
+    useCombobox_unstable: function() {
+        return _useCombobox.useCombobox_unstable;
+    }
+});
+const _Combobox = require("./Combobox");
+const _renderCombobox = require("./renderCombobox");
+const _useCombobox = require("./useCombobox");
+const _useComboboxStylesstyles = require("./useComboboxStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAcRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACvBC,qCAAwB;;;eACJG,mDAA0B;;;eADpBF,iCAAoB;;;0BAb9B,aAAa;gCAYE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCombobox_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCombobox_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactportal = require("@fluentui/react-portal");
+const _reactaria = require("@fluentui/react-aria");
+const _reactutilities = require("@fluentui/react-utilities");
+const _ComboboxContext = require("../../contexts/ComboboxContext");
+const _ListboxContext = require("../../contexts/ListboxContext");
+const renderCombobox_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxProvider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+                        state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
+                        state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
+                        }))
+                    ]
+                })
+            })
+        })
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":";;;;+BAcaK;;;;;;4BAbb,iCAAiD;6BAC1B,yBAAyB;2BACA,uBAAuB;gCAE3C,4BAA4B;iCAExB,iCAAiC;gCAEjC,gCAAgC;AAKzD,gCAAgC,CAACC,OAA0BC;QAChEL,2BAAAA,EAA2BI;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,0CAAAA,EAAAA;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,WAAA,OAAA,eAAA,EAACN,+BAAAA,EAAAA;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,WAAA,OAAA,gBAAA,EAACR,gCAAAA,CAAgBS,QAAQ,EAAA;oBAACH,OAAOF,cAAcM,QAAQ;;0CACrD,eAAA,EAACP,MAAMQ,KAAK,EAAA,CAAA;wBACXR,MAAMS,SAAS,IAAA,WAAA,GAAI,mBAAA,EAACT,MAAMS,SAAS,EAAA,CAAA;wBACnCT,MAAMU,UAAU,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,UAAU,EAAA,CAAA;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,GAAA,WAAA,OAChB,eAAA,EAACX,MAAMK,OAAO,EAAA,CAAA,KAAA,WAAA,OAEd,eAAA,EAACX,mBAAAA,EAAAA;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,WAAA,OAAA,eAAA,EAACZ,MAAMK,OAAO,EAAA,CAAA;2BAElB;;;;;;AAOd,EAAE"}

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

@@ -0,0 +1,212 @@
+'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, {
+    useComboboxBase_unstable: function() {
+        return useComboboxBase_unstable;
+    },
+    useCombobox_unstable: function() {
+        return useCombobox_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactaria = require("@fluentui/react-aria");
+const _reactfield = require("@fluentui/react-field");
+const _reacticons = require("@fluentui/react-icons");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
+const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
+const _Listbox = require("../Listbox/Listbox");
+const _useListboxSlot = require("../../utils/useListboxSlot");
+const _useInputTriggerSlot = require("./useInputTriggerSlot");
+const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
+const useComboboxBase_unstable = (props, ref)=>{
+    'use no memo';
+    var _state_clearIcon, _state_clearIcon1;
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
+        matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
+    });
+    const comboboxInternalState = (0, _useComboboxBaseState.useComboboxBaseState)({
+        ...props,
+        editable: true,
+        activeDescendantController
+    });
+    const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;
+    const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
+    const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
+    const { disableAutoFocus = false, freeform, inlinePopup } = props;
+    const comboId = (0, _reactutilities.useId)('combobox-');
+    const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'children'
+        ]
+    });
+    const triggerRef = _react.useRef(null);
+    const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
+        state: comboboxInternalState,
+        triggerRef,
+        defaultProps: {
+            children: props.children,
+            disableAutoFocus
+        }
+    });
+    var _props_input;
+    const triggerSlot = (0, _useInputTriggerSlot.useInputTriggerSlot)((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
+        state: comboboxInternalState,
+        freeform,
+        defaultProps: {
+            type: 'text',
+            value: value !== null && value !== void 0 ? value : '',
+            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
+            ...triggerNativeProps
+        },
+        activeDescendantController
+    });
+    const rootSlot = _reactutilities.slot.always(props.root, {
+        defaultProps: {
+            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
+            ...rootNativeProps
+        },
+        elementType: 'div'
+    });
+    rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
+    const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
+    const state = {
+        components: {
+            root: 'div',
+            input: 'input',
+            expandIcon: 'span',
+            listbox: _Listbox.Listbox,
+            clearIcon: 'span'
+        },
+        root: rootSlot,
+        input: triggerSlot,
+        listbox: open || hasFocus ? listbox : undefined,
+        clearIcon: _reactutilities.slot.optional(props.clearIcon, {
+            defaultProps: {
+                'aria-hidden': 'true'
+            },
+            elementType: 'span',
+            renderByDefault: true
+        }),
+        expandIcon: _reactutilities.slot.optional(props.expandIcon, {
+            renderByDefault: true,
+            defaultProps: {
+                'aria-disabled': disabled ? 'true' : undefined,
+                'aria-expanded': open,
+                role: 'button'
+            },
+            elementType: 'span'
+        }),
+        showClearIcon,
+        activeDescendantController,
+        ...baseState
+    };
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    (0, _reactutilities.useOnClickOutside)({
+        element: targetDocument,
+        callback: (event)=>setOpen(event, false),
+        refs: [
+            triggerRef,
+            comboboxPopupRef,
+            comboboxTargetRef
+        ],
+        disabled: !open
+    });
+    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
+    const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, (event)=>{
+        var _triggerRef_current;
+        event.preventDefault();
+        state.setOpen(event, !state.open);
+        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+    }));
+    if (state.expandIcon) {
+        state.expandIcon.onMouseDown = onExpandIconMouseDown;
+        // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
+        // using the following steps:
+        // 1. If there is an aria-label, it is "Open [aria-label]"
+        // 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
+        // 3. If there is no aria-label/ledby attr, it falls back to "Open"
+        // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
+        const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
+        const defaultOpenString = 'Open'; // this is english-only since it is the fallback
+        if (!hasExpandLabel) {
+            if (props['aria-labelledby']) {
+                var _state_expandIcon_id;
+                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
+                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
+                state.expandIcon['aria-label'] = defaultOpenString;
+                state.expandIcon.id = chevronId;
+                state.expandIcon['aria-labelledby'] = chevronLabelledBy;
+            } else if (props['aria-label']) {
+                state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
+            } else {
+                state.expandIcon['aria-label'] = defaultOpenString;
+            }
+        }
+    }
+    const onClearIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
+        ev.preventDefault();
+    }));
+    const onClearIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{
+        clearSelection(ev);
+    }));
+    if (state.clearIcon) {
+        state.clearIcon.onMouseDown = onClearIconMouseDown;
+        state.clearIcon.onClick = onClearIconClick;
+    }
+    // Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
+    if (multiselect) {
+        state.clearIcon = undefined;
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
+        _react.useEffect(()=>{
+            if (clearable && multiselect) {
+                // eslint-disable-next-line no-console
+                console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
+            }
+        }, [
+            clearable,
+            multiselect
+        ]);
+    }
+    return state;
+};
+const useCombobox_unstable = (props, ref)=>{
+    'use no memo';
+    const { appearance = 'outline', size = 'medium', ...baseProps } = props;
+    const baseState = useComboboxBase_unstable(baseProps, ref);
+    if (baseState.clearIcon) {
+        var _baseState_clearIcon;
+        var _children;
+        (_children = (_baseState_clearIcon = baseState.clearIcon).children) !== null && _children !== void 0 ? _children : _baseState_clearIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null);
+    }
+    if (baseState.expandIcon) {
+        var _baseState_expandIcon;
+        var _children1;
+        (_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
+    }
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};

node_modules/@fluentui/react-combobox/lib-commonjs/components/Combobox/useComboboxStyles.styles.js

@@ -0,0 +1,709 @@
+'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, {
+    comboboxClassNames: function() {
+        return comboboxClassNames;
+    },
+    useComboboxStyles_unstable: function() {
+        return useComboboxStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const comboboxClassNames = {
+    root: 'fui-Combobox',
+    input: 'fui-Combobox__input',
+    expandIcon: 'fui-Combobox__expandIcon',
+    clearIcon: 'fui-Combobox__clearIcon',
+    listbox: 'fui-Combobox__listbox'
+};
+// Matches internal heights for Select and Input, but there are no theme variables for these
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+/**
+ * Styles for Combobox
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bt984gj: "f122n59",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        B7ck84d: "f1ewtqcl",
+        i8kkvl: "f14mj54c",
+        mc9l5x: "fwk3njj",
+        Budl1dq: "fz17x9o",
+        Brf1p80: "f1869bpl",
+        Bf4jedk: "f1exfvgq",
+        qhf8xq: "f10pi13n",
+        ha4doy: "fmrv4ls",
+        Bbr2w1p: "f14a1fxs",
+        Bduesf4: "f3e99gv",
+        Bpq79vn: "fhljsf7",
+        li1rpt: "f1gw3sf2",
+        Bsft5z2: "f13zj6fq",
+        E3zdtr: "f1mdlcz9",
+        Eqx8gd: [
+            "f1a7op3",
+            "f1cjjd47"
+        ],
+        By385i5: "f1gboi2j",
+        B1piin3: [
+            "f1cjjd47",
+            "f1a7op3"
+        ],
+        Dlnsje: "f145g4dw",
+        d9w3h3: [
+            "f1kp91vd",
+            "f1ibwz09"
+        ],
+        B3778ie: [
+            "f1ibwz09",
+            "f1kp91vd"
+        ],
+        B1q35kw: 0,
+        Bw17bha: 0,
+        Bcgy8vk: 0,
+        Bjuhk93: "f1mnjydx",
+        Gjdm7m: "f13evtba",
+        b1kco5: "f1yk9hq",
+        Ba2ppi3: "fhwpy7i",
+        F2fol1: "f14ee0xe",
+        lck23g: "f1xhbsuh",
+        wi16st: "fsrmcvb",
+        ywj3b2: "f1t3k7v9",
+        umuwi5: "fjw5xc1",
+        Blcqepd: "f1xdyd5c",
+        nplu4u: "fatpbeo",
+        Bioka5o: "fb7uyps",
+        Bnupc0a: "fx04xgm",
+        bing71: "f1c7in40",
+        Bercvud: "f1ibeo51"
+    },
+    listbox: {
+        E5pizo: "f1hg901r",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        Bxyxcbc: "fmmk62d",
+        B7ck84d: "f1ewtqcl"
+    },
+    listboxCollapsed: {
+        mc9l5x: "fjseox"
+    },
+    inlineListbox: {
+        Bj3rh1h: "f19g0ac"
+    },
+    small: {
+        Bqenvij: "frvgh55",
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ]
+    },
+    medium: {
+        Bqenvij: "f1d2rq10",
+        z189sj: [
+            "f11gcy0p",
+            "f1ng84yb"
+        ]
+    },
+    large: {
+        i8kkvl: "f1rjii52",
+        Bqenvij: "fbhnoac",
+        z189sj: [
+            "fw5db7e",
+            "f1uw59to"
+        ]
+    },
+    outline: {
+        De3pzq: "fxugw4r",
+        Bgfg5da: 0,
+        B9xav0g: "f1c1zstj",
+        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: "fhz96rm"
+    },
+    outlineInteractive: {
+        Bgoe8wy: "fvcxoqz",
+        Bwzppfd: [
+            "f1ub3y4t",
+            "f1m52nbi"
+        ],
+        oetu4i: "f1l4zc64",
+        gg5e9n: [
+            "f1m52nbi",
+            "f1ub3y4t"
+        ],
+        B6oc9vd: "fvs00aa",
+        ak43y8: [
+            "f1assf6x",
+            "f4ruux4"
+        ],
+        wmxk5l: "f1z0osm6",
+        B50zh58: [
+            "f4ruux4",
+            "f1assf6x"
+        ],
+        Bvq3b66: "f1b473iu",
+        Brahy3i: [
+            "f381qr8",
+            "ft4skwv"
+        ],
+        zoxjo1: "f1qzcrsd",
+        an54nd: [
+            "ft4skwv",
+            "f381qr8"
+        ]
+    },
+    underline: {
+        De3pzq: "f1c21dwh",
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        Bgfg5da: "f9ez7ne",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fokr779"
+    },
+    "filled-lighter": {
+        De3pzq: "fxugw4r",
+        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: "f88035w"
+    },
+    "filled-darker": {
+        De3pzq: "f16xq7d1",
+        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: "f88035w"
+    },
+    invalid: {
+        tvckwq: "fs4k3qj",
+        gk2u95: [
+            "fcee079",
+            "fmyw78r"
+        ],
+        hhx65j: "f1fgmyf4",
+        Bxowmz0: [
+            "fmyw78r",
+            "fcee079"
+        ]
+    },
+    invalidUnderline: {
+        hhx65j: "f1fgmyf4"
+    },
+    disabled: {
+        Bceei9c: "fdrzuqr",
+        De3pzq: "f1c21dwh",
+        g2u3we: "f1jj8ep1",
+        h3c5rm: [
+            "f15xbau",
+            "fy0fskl"
+        ],
+        B9xav0g: "f4ikngz",
+        zhjwy3: [
+            "fy0fskl",
+            "f15xbau"
+        ],
+        Bcq6wej: "f9dbb4x",
+        Jcjdmf: [
+            "f3qs60o",
+            "f5u9ap2"
+        ],
+        sc4o1m: "fwd1oij",
+        Bosien3: [
+            "f5u9ap2",
+            "f3qs60o"
+        ]
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
+        ".fwk3njj{display:inline-grid;}",
+        ".fz17x9o{grid-template-columns:1fr auto;}",
+        ".f1869bpl{justify-content:space-between;}",
+        ".f1exfvgq{min-width:250px;}",
+        ".f10pi13n{position:relative;}",
+        ".fmrv4ls{vertical-align:middle;}",
+        ".f1gw3sf2::after{box-sizing:border-box;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".f1mdlcz9::after{position:absolute;}",
+        ".f1a7op3::after{left:-1px;}",
+        ".f1cjjd47::after{right:-1px;}",
+        ".f1gboi2j::after{bottom:-1px;}",
+        ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}",
+        ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        [
+            ".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}",
+            {
+                p: -1
+            }
+        ],
+        ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}",
+        ".f1yk9hq::after{transform:scaleX(0);}",
+        ".fhwpy7i::after{transition-property:transform;}",
+        ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
+        ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}",
+        ".f1hg901r{box-shadow:var(--shadow16);}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".fmmk62d{max-height:80vh;}",
+        ".fjseox{display:none;}",
+        ".f19g0ac{z-index:1;}",
+        ".frvgh55{height:24px;}",
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".f1d2rq10{height:32px;}",
+        ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
+        ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
+        ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
+        ".fbhnoac{height:40px;}",
+        ".fw5db7e{padding-right:var(--spacingHorizontalM);}",
+        ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        [
+            ".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        [
+            ".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fokr779{border-radius:0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        [
+            ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
+        ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
+        ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
+        ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
+        ".fdrzuqr{cursor:not-allowed;}",
+        ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
+        ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
+        ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
+        ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"
+    ],
+    w: [
+        ".f14a1fxs:focus-within{outline-width:2px;}",
+        ".f3e99gv:focus-within{outline-style:solid;}",
+        ".fhljsf7:focus-within{outline-color:transparent;}",
+        ".fjw5xc1:focus-within::after{transform:scaleX(1);}",
+        ".f1xdyd5c:focus-within::after{transition-property:transform;}",
+        ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}",
+        ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}",
+        ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
+        ".f1b473iu:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}",
+        ".f381qr8:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}",
+        ".ft4skwv:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}",
+        ".f1qzcrsd:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
+    ],
+    m: [
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ],
+    h: [
+        ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
+        ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
+        ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
+        ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"
+    ],
+    a: [
+        ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
+        ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
+        ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
+        ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
+    ]
+});
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    input: {
+        qb2dma: "f1ub7u0d",
+        De3pzq: "f1c21dwh",
+        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: "f3bhgqh",
+        sj55zd: "f19n0e5",
+        Bahqtrf: "fk6fouc",
+        Brovlpu: "ftqa4ok",
+        yvdlaj: "fwyc1cq",
+        B3o7kgh: "f13ta7ih"
+    },
+    small: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: [
+            "fxe2rs",
+            "f1gflqzi"
+        ]
+    },
+    medium: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: [
+            "fzy81xo",
+            "f58b53b"
+        ]
+    },
+    large: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "faaz57k",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: [
+            "f1kdav7a",
+            "footqm6"
+        ]
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        De3pzq: "f1c21dwh",
+        Bceei9c: "fdrzuqr",
+        yvdlaj: "fahhnxm"
+    }
+}, {
+    d: [
+        ".f1ub7u0d{align-self:stretch;}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}",
+        ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}",
+        ".f13ta7ih::-webkit-input-placeholder{opacity:1;}",
+        ".f13ta7ih::-moz-placeholder{opacity:1;}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        [
+            ".fxe2rs{padding:0 0 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1gflqzi{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 0 0;}",
+            {
+                p: -1
+            }
+        ],
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        [
+            ".fzy81xo{padding:0 0 0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f58b53b{padding:0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 0 0;}",
+            {
+                p: -1
+            }
+        ],
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        [
+            ".f1kdav7a{padding:0 0 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".footqm6{padding:0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 0 0;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".fdrzuqr{cursor:not-allowed;}",
+        ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
+        ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    f: [
+        ".ftqa4ok:focus{outline-style:none;}"
+    ]
+});
+const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    icon: {
+        B7ck84d: "f1ewtqcl",
+        sj55zd: "fxkbij4",
+        Bceei9c: "f1k6fduh",
+        mc9l5x: "ftgm304",
+        Be2twd7: "f1pp30po",
+        Bo70h7d: "fvc9v3g"
+    },
+    hidden: {
+        mc9l5x: "fjseox"
+    },
+    visuallyHidden: {
+        Bh84pgu: "f1ekcaio",
+        Bqenvij: "f1mpe4l3",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "f1jlpb2r",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1a3p1vp",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1c5fvqg",
+        a9b677: "frkrog8",
+        qhf8xq: "f1euv43f"
+    },
+    small: {
+        Be2twd7: "f4ybsrx",
+        Frg6f3: [
+            "f1h9en5y",
+            "f1xk557c"
+        ]
+    },
+    medium: {
+        Be2twd7: "fe5j1ua",
+        Frg6f3: [
+            "f1h9en5y",
+            "f1xk557c"
+        ]
+    },
+    large: {
+        Be2twd7: "f1rt2boy",
+        Frg6f3: [
+            "f1t5qyk5",
+            "f1ikr372"
+        ]
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        Bceei9c: "fdrzuqr"
+    }
+}, {
+    d: [
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
+        ".f1k6fduh{cursor:pointer;}",
+        ".ftgm304{display:block;}",
+        ".f1pp30po{font-size:var(--fontSizeBase500);}",
+        ".fvc9v3g svg{display:block;}",
+        ".fjseox{display:none;}",
+        ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}",
+        ".f1mpe4l3{height:1px;}",
+        [
+            ".f1jlpb2r{margin:-1px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1a3p1vp{overflow:hidden;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1c5fvqg{padding:0px;}",
+            {
+                p: -1
+            }
+        ],
+        ".frkrog8{width:1px;}",
+        ".f1euv43f{position:absolute;}",
+        ".f4ybsrx{font-size:16px;}",
+        ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
+        ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
+        ".fe5j1ua{font-size:20px;}",
+        ".f1rt2boy{font-size:24px;}",
+        ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}",
+        ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".fdrzuqr{cursor:not-allowed;}"
+    ]
+});
+const useComboboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, open, size, showClearIcon } = state;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const disabled = state.input.disabled;
+    const styles = useStyles();
+    const iconStyles = useIconStyles();
+    const inputStyles = useInputStyles();
+    state.root.className = (0, _react.mergeClasses)(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+    if (state.listbox) {
+        state.listbox.className = (0, _react.mergeClasses)(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
+    }
+    if (state.expandIcon) {
+        state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
+    }
+    if (state.clearIcon) {
+        state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-combobox/lib-commonjs/components/Combobox/useComboboxStyles.styles.raw.js

@@ -0,0 +1,272 @@
+'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, {
+    comboboxClassNames: function() {
+        return comboboxClassNames;
+    },
+    useComboboxStyles_unstable: function() {
+        return useComboboxStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _internalTokens = require("../../utils/internalTokens");
+const comboboxClassNames = {
+    root: 'fui-Combobox',
+    input: 'fui-Combobox__input',
+    expandIcon: 'fui-Combobox__expandIcon',
+    clearIcon: 'fui-Combobox__clearIcon',
+    listbox: 'fui-Combobox__listbox'
+};
+// Matches internal heights for Select and Input, but there are no theme variables for these
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+/**
+ * Styles for Combobox
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        alignItems: 'center',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        boxSizing: 'border-box',
+        columnGap: _reacttheme.tokens.spacingHorizontalXXS,
+        display: 'inline-grid',
+        gridTemplateColumns: '1fr auto',
+        justifyContent: 'space-between',
+        minWidth: '250px',
+        position: 'relative',
+        verticalAlign: 'middle',
+        // windows high contrast mode focus indicator
+        ':focus-within': {
+            outlineWidth: '2px',
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        },
+        // bottom focus border, shared with Input, Select, and SpinButton
+        '::after': {
+            boxSizing: 'border-box',
+            content: '""',
+            position: 'absolute',
+            left: '-1px',
+            bottom: '-1px',
+            right: '-1px',
+            height: `max(2px, ${_reacttheme.tokens.borderRadiusMedium})`,
+            borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
+            borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+            borderBottom: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+            clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationUltraFast,
+            transitionDelay: _reacttheme.tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationNormal,
+            transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within:active::after': {
+            borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
+        }
+    },
+    listbox: {
+        boxShadow: `${_reacttheme.tokens.shadow16}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        maxHeight: '80vh',
+        boxSizing: 'border-box'
+    },
+    listboxCollapsed: {
+        display: 'none'
+    },
+    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
+    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
+    inlineListbox: {
+        zIndex: 1
+    },
+    // size variants
+    small: {
+        height: fieldHeights.small,
+        paddingRight: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        height: fieldHeights.medium,
+        paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
+    },
+    large: {
+        columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
+        height: fieldHeights.large,
+        paddingRight: _reacttheme.tokens.spacingHorizontalM
+    },
+    // appearance variants
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        '&:active': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '&:focus-within': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0'
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
+        }
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        }
+    }
+});
+const useInputStyles = (0, _react.makeStyles)({
+    input: {
+        alignSelf: 'stretch',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        '&:focus': {
+            outlineStyle: 'none'
+        },
+        '&::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForeground4,
+            opacity: 1
+        }
+    },
+    // size variants
+    small: {
+        ..._reacttheme.typographyStyles.caption1,
+        padding: `0 0 0 ${`calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
+    },
+    medium: {
+        ..._reacttheme.typographyStyles.body1,
+        padding: `0 0 0 ${`calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
+    },
+    large: {
+        ..._reacttheme.typographyStyles.body2,
+        padding: `0 0 0 ${`calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`}`
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    icon: {
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralStrokeAccessible,
+        cursor: 'pointer',
+        display: 'block',
+        fontSize: _reacttheme.tokens.fontSizeBase500,
+        // the SVG must have display: block for accurate positioning
+        // otherwise an extra inline space is inserted after the svg element
+        '& svg': {
+            display: 'block'
+        }
+    },
+    hidden: {
+        display: 'none'
+    },
+    visuallyHidden: {
+        clip: 'rect(0px, 0px, 0px, 0px)',
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: '0px',
+        width: '1px',
+        position: 'absolute'
+    },
+    // icon size variants
+    small: {
+        fontSize: _internalTokens.iconSizes.small,
+        marginLeft: _reacttheme.tokens.spacingHorizontalXXS
+    },
+    medium: {
+        fontSize: _internalTokens.iconSizes.medium,
+        marginLeft: _reacttheme.tokens.spacingHorizontalXXS
+    },
+    large: {
+        fontSize: _internalTokens.iconSizes.large,
+        marginLeft: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed'
+    }
+});
+const useComboboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, open, size, showClearIcon } = state;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const disabled = state.input.disabled;
+    const styles = useStyles();
+    const iconStyles = useIconStyles();
+    const inputStyles = useInputStyles();
+    state.root.className = (0, _react.mergeClasses)(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+    if (state.listbox) {
+        state.listbox.className = (0, _react.mergeClasses)(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
+    }
+    if (state.expandIcon) {
+        state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
+    }
+    if (state.clearIcon) {
+        state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,114 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useInputTriggerSlot", {
+    enumerable: true,
+    get: function() {
+        return useInputTriggerSlot;
+    }
+});
+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 _keyboardkeys = require("@fluentui/keyboard-keys");
+const _useTriggerSlot = require("../../utils/useTriggerSlot");
+const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
+function useInputTriggerSlot(triggerFromProps, ref, options) {
+    'use no memo';
+    const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
+    const onBlur = (event)=>{
+        // handle selection and updating value if freeform is false
+        if (!open && !freeform) {
+            const activeOptionId = activeDescendantController.active();
+            const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
+            // select matching option, if the value fully matches
+            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
+                selectOption(event, activeOption);
+            }
+            // reset typed value when the input loses focus while collapsed, unless freeform is true
+            setValue(undefined);
+        }
+    };
+    const getOptionFromInput = (inputValue)=>{
+        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
+        if (!searchString || searchString.length === 0) {
+            activeDescendantController.blur();
+            return;
+        }
+        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
+        const match = activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        });
+        if (!match) {
+            activeDescendantController.blur();
+            return undefined;
+        }
+        return getOptionById(match);
+    };
+    // update value and active option based on input
+    const onChange = (event)=>{
+        const inputValue = event.target.value;
+        // update uncontrolled value
+        setValue(inputValue);
+        // handle updating active option based on input
+        const matchingOption = getOptionFromInput(inputValue);
+        // clear selection for single-select if the input value no longer matches the selection
+        if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
+            clearSelection(event);
+        }
+    };
+    const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'input',
+        activeDescendantController
+    });
+    trigger.onChange = (0, _reactutilities.mergeCallbacks)(trigger.onChange, onChange);
+    trigger.onBlur = (0, _reactutilities.mergeCallbacks)(trigger.onBlur, onBlur);
+    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
+    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
+    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
+    const [hideActiveDescendant, setHideActiveDescendant] = _react.useState(false);
+    // save the typing vs. navigating options state, as the space key should behave differently in each case
+    // we do not want to update the combobox when this changes, just save the value between renders
+    const isTyping = _react.useRef(false);
+    /**
+   * Freeform combobox should not select
+   */ const defaultOnKeyDown = trigger.onKeyDown;
+    const onKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
+        if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(event) === 'Type') {
+            setOpen(event, true);
+        }
+        // clear activedescendant when moving the text insertion cursor
+        if (event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.ArrowRight) {
+            setHideActiveDescendant(true);
+        } else {
+            setHideActiveDescendant(false);
+        }
+        // update typing state to true if the user is typing
+        const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
+            open,
+            multiselect
+        });
+        if (action === 'Type') {
+            isTyping.current = true;
+        } else if (action === 'Open' && event.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
+            isTyping.current = false;
+        }
+        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
+        if ((isTyping.current || !open) && event.key === ' ') {
+            var _triggerFromProps_onKeyDown;
+            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, event);
+            return;
+        }
+        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
+    });
+    trigger.onKeyDown = onKeyDown;
+    if (hideActiveDescendant) {
+        trigger['aria-activedescendant'] = undefined;
+    }
+    return trigger;
+}