feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useCombobox_unstable } from './useCombobox';
+import { renderCombobox_unstable } from './renderCombobox';
+import { useComboboxStyles_unstable } from './useComboboxStyles.styles';
+import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Combobox component: a selection control that allows users to choose from a set of possible options
+ */ export const Combobox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCombobox_unstable(props, ref);
+    const contextValues = useComboboxContextValues(state);
+    useComboboxStyles_unstable(state);
+    useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);
+    return renderCombobox_unstable(state, contextValues);
+});
+Combobox.displayName = 'Combobox';

node_modules/@fluentui/react-combobox/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

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

node_modules/@fluentui/react-combobox/lib/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":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,4 @@
+export { Combobox } from './Combobox';
+export { renderCombobox_unstable } from './renderCombobox';
+export { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';
+export { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';

node_modules/@fluentui/react-combobox/lib/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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

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

@@ -0,0 +1,31 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { Portal } from '@fluentui/react-portal';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
+import { assertSlots } from '@fluentui/react-utilities';
+import { ComboboxContext } from '../../contexts/ComboboxContext';
+import { ListboxProvider } from '../../contexts/ListboxContext';
+/**
+ * Render the final JSX of Combobox
+ */ export const renderCombobox_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ _jsx(ListboxProvider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ _jsx(state.input, {}),
+                        state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
+                        state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ _jsx(state.listbox, {})
+                        }))
+                    ]
+                })
+            })
+        })
+    });
+};

node_modules/@fluentui/react-combobox/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAA0BC;IAChEL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}

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

@@ -0,0 +1,206 @@
+'use client';
+import * as React from 'react';
+import { useActiveDescendant } from '@fluentui/react-aria';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot, useOnClickOutside } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
+import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
+import { Listbox } from '../Listbox/Listbox';
+import { useListboxSlot } from '../../utils/useListboxSlot';
+import { useInputTriggerSlot } from './useInputTriggerSlot';
+import { optionClassNames } from '../Option/useOptionStyles.styles';
+/**
+ * Create the base state required to render Combobox, without design-only props.
+ *
+ * @param props - props from this instance of Combobox (without appearance and size)
+ * @param ref - reference to root HTMLInputElement of Combobox
+ */ export const useComboboxBase_unstable = (props, ref)=>{
+    'use no memo';
+    var _state_clearIcon, _state_clearIcon1;
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
+        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+    });
+    const comboboxInternalState = 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] = useComboboxPositioning(props);
+    const { disableAutoFocus = false, freeform, inlinePopup } = props;
+    const comboId = useId('combobox-');
+    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'children'
+        ]
+    });
+    const triggerRef = React.useRef(null);
+    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
+        state: comboboxInternalState,
+        triggerRef,
+        defaultProps: {
+            children: props.children,
+            disableAutoFocus
+        }
+    });
+    var _props_input;
+    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, 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 = slot.always(props.root, {
+        defaultProps: {
+            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
+            ...rootNativeProps
+        },
+        elementType: 'div'
+    });
+    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
+    const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
+    const state = {
+        components: {
+            root: 'div',
+            input: 'input',
+            expandIcon: 'span',
+            listbox: Listbox,
+            clearIcon: 'span'
+        },
+        root: rootSlot,
+        input: triggerSlot,
+        listbox: open || hasFocus ? listbox : undefined,
+        clearIcon: slot.optional(props.clearIcon, {
+            defaultProps: {
+                'aria-hidden': 'true'
+            },
+            elementType: 'span',
+            renderByDefault: true
+        }),
+        expandIcon: slot.optional(props.expandIcon, {
+            renderByDefault: true,
+            defaultProps: {
+                'aria-disabled': disabled ? 'true' : undefined,
+                'aria-expanded': open,
+                role: 'button'
+            },
+            elementType: 'span'
+        }),
+        showClearIcon,
+        activeDescendantController,
+        ...baseState
+    };
+    const { targetDocument } = useFluent();
+    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 = useEventCallback(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 = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
+        ev.preventDefault();
+    }));
+    const onClearIconClick = useEventCallback(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;
+};
+/**
+ * Create the state required to render Combobox.
+ *
+ * The returned state can be modified with hooks such as useComboboxStyles_unstable,
+ * before being passed to renderCombobox_unstable.
+ *
+ * @param props - props from this instance of Combobox
+ * @param ref - reference to root HTMLElement of Combobox
+ */ export 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(DismissIcon, 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(ChevronDownIcon, null);
+    }
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};

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

@@ -0,0 +1,411 @@
+'use client';
+
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { iconSizes } from '../../utils/internalTokens';
+export 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__*/__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__*/__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__*/__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;}"]
+});
+/**
+ * Apply styling to the Combobox slots based on the state
+ */
+export 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 = 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 = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+  if (state.listbox) {
+    state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
+  }
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
+  }
+  if (state.clearIcon) {
+    state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,256 @@
+'use client';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { iconSizes } from '../../utils/internalTokens';
+export 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 = makeStyles({
+    root: {
+        alignItems: 'center',
+        borderRadius: tokens.borderRadiusMedium,
+        boxSizing: 'border-box',
+        columnGap: 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, ${tokens.borderRadiusMedium})`,
+            borderBottomLeftRadius: tokens.borderRadiusMedium,
+            borderBottomRightRadius: tokens.borderRadiusMedium,
+            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
+            clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationUltraFast,
+            transitionDelay: tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationNormal,
+            transitionDelay: tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within:active::after': {
+            borderBottomColor: tokens.colorCompoundBrandStrokePressed
+        }
+    },
+    listbox: {
+        boxShadow: `${tokens.shadow16}`,
+        borderRadius: 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: tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        height: fieldHeights.medium,
+        paddingRight: tokens.spacingHorizontalMNudge
+    },
+    large: {
+        columnGap: tokens.spacingHorizontalSNudge,
+        height: fieldHeights.large,
+        paddingRight: tokens.spacingHorizontalM
+    },
+    // appearance variants
+    outline: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+        borderBottomColor: tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
+        },
+        '&:active': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '&:focus-within': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0'
+    },
+    'filled-lighter': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
+    },
+    'filled-darker': {
+        backgroundColor: tokens.colorNeutralBackground3,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: tokens.colorPaletteRedBorder2
+        }
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('GrayText')
+        }
+    }
+});
+const useInputStyles = makeStyles({
+    input: {
+        alignSelf: 'stretch',
+        backgroundColor: tokens.colorTransparentBackground,
+        border: 'none',
+        color: tokens.colorNeutralForeground1,
+        fontFamily: tokens.fontFamilyBase,
+        '&:focus': {
+            outlineStyle: 'none'
+        },
+        '&::placeholder': {
+            color: tokens.colorNeutralForeground4,
+            opacity: 1
+        }
+    },
+    // size variants
+    small: {
+        ...typographyStyles.caption1,
+        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`
+    },
+    medium: {
+        ...typographyStyles.body1,
+        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`
+    },
+    large: {
+        ...typographyStyles.body2,
+        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        backgroundColor: tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useIconStyles = makeStyles({
+    icon: {
+        boxSizing: 'border-box',
+        color: tokens.colorNeutralStrokeAccessible,
+        cursor: 'pointer',
+        display: 'block',
+        fontSize: 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: iconSizes.small,
+        marginLeft: tokens.spacingHorizontalXXS
+    },
+    medium: {
+        fontSize: iconSizes.medium,
+        marginLeft: tokens.spacingHorizontalXXS
+    },
+    large: {
+        fontSize: iconSizes.large,
+        marginLeft: tokens.spacingHorizontalSNudge
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed'
+    }
+});
+/**
+ * Apply styling to the Combobox slots based on the state
+ */ export 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 = 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 = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+    if (state.listbox) {
+        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
+    }
+    if (state.expandIcon) {
+        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
+    }
+    if (state.clearIcon) {
+        state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,109 @@
+'use client';
+import * as React from 'react';
+import { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';
+import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
+import { useTriggerSlot } from '../../utils/useTriggerSlot';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+/**
+ * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
+ * with the semantics and event handlers needed for the Combobox and Dropdown components.
+ * The element type of the ref should always match the element type used in the trigger shorthand.
+ *
+ * @internal
+ */ export 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 = useTriggerSlot(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'input',
+        activeDescendantController
+    });
+    trigger.onChange = mergeCallbacks(trigger.onChange, onChange);
+    trigger.onBlur = 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 = useEventCallback((event)=>{
+        if (!open && getDropdownActionFromKey(event) === 'Type') {
+            setOpen(event, true);
+        }
+        // clear activedescendant when moving the text insertion cursor
+        if (event.key === ArrowLeft || event.key === ArrowRight) {
+            setHideActiveDescendant(true);
+        } else {
+            setHideActiveDescendant(false);
+        }
+        // update typing state to true if the user is typing
+        const action = 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;
+}

node_modules/@fluentui/react-combobox/lib/components/Dropdown/Dropdown.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useDropdown_unstable } from './useDropdown';
+import { renderDropdown_unstable } from './renderDropdown';
+import { useDropdownStyles_unstable } from './useDropdownStyles.styles';
+import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Dropdown component: a selection control that allows users to choose from a set of possible options
+ */ export const Dropdown = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useDropdown_unstable(props, ref);
+    const contextValues = useComboboxContextValues(state);
+    useDropdownStyles_unstable(state);
+    useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);
+    return renderDropdown_unstable(state, contextValues);
+});
+Dropdown.displayName = 'Dropdown';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

node_modules/@fluentui/react-combobox/lib/components/Dropdown/Dropdown.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-combobox/lib/components/Dropdown/Dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import 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 DropdownSlots = {\n  /** The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /** The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * Dropdown Props without design-only props.\n */\nexport type DropdownBaseProps = DistributiveOmit<DropdownProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /** Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/**\n * State used in rendering Dropdown, without design-only state.\n */\nexport type DropdownBaseState = DistributiveOmit<DropdownState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AA6DA,WAAwE"}

node_modules/@fluentui/react-combobox/lib/components/Dropdown/index.js

@@ -0,0 +1,4 @@
+export { Dropdown } from './Dropdown';
+export { renderDropdown_unstable } from './renderDropdown';
+export { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';
+export { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n  ActiveOptionChangeData,\n  DropdownBaseProps as DropdownBaseHookProps,\n  DropdownBaseState as DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","renderDropdown_unstable","useDropdownBase_unstable","useDropdown_unstable","dropdownClassNames","useDropdownStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

node_modules/@fluentui/react-combobox/lib/components/Dropdown/renderDropdown.js

@@ -0,0 +1,35 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { Portal } from '@fluentui/react-portal';
+import { assertSlots } from '@fluentui/react-utilities';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
+import { ComboboxContext } from '../../contexts/ComboboxContext';
+import { ListboxContext } from '../../contexts/ListboxContext';
+/**
+ * Render the final JSX of Dropdown
+ */ export const renderDropdown_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ _jsxs(state.button, {
+                            children: [
+                                state.button.children,
+                                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
+                            ]
+                        }),
+                        state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ _jsx(state.listbox, {})
+                        }))
+                    ]
+                })
+            })
+        })
+    });
+};

node_modules/@fluentui/react-combobox/lib/components/Dropdown/renderDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues): JSXElement => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\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        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DN,YAA2BK;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN,eAAeO,QAAQ;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,cAAA,MAACT,gBAAgBQ,QAAQ;oBAACF,OAAOF,cAAcM,QAAQ;;sCACrD,MAACP,MAAMQ,MAAM;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;;;wBAEvCV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMM,OAAO,sBAEd,KAACZ;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,cAAA,KAACb,MAAMM,OAAO;0BAElB;;;;;;AAOd,EAAE"}

node_modules/@fluentui/react-combobox/lib/components/Dropdown/useButtonTriggerSlot.js

@@ -0,0 +1,95 @@
+'use client';
+import * as React from 'react';
+import { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';
+import { useTriggerSlot } from '../../utils/useTriggerSlot';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+/**
+ * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
+ * with the semantics and event handlers needed for the Combobox and Dropdown components.
+ * The element type of the ref should always match the element type used in the trigger shorthand.
+ *
+ * @internal
+ */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {
+    'use no memo';
+    const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
+    // jump to matching option based on typing
+    const searchString = React.useRef('');
+    const [setKeyTimeout, clearKeyTimeout] = useTimeout();
+    const moveToNextMatchingOption = (matcher, opt = {
+        startFromNext: false
+    })=>{
+        const { startFromNext } = opt;
+        const activeOptionId = activeDescendantController.active();
+        const nextInOrder = activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        }, {
+            startFrom: startFromNext ? activeDescendantController.next({
+                passive: true
+            }) : activeOptionId
+        });
+        if (nextInOrder) {
+            return nextInOrder;
+        }
+        // Cycle back to first match
+        return activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        });
+    };
+    const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{
+        if (moveToNextMatchingOption((optionText)=>{
+            return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;
+        }, {
+            // Slowly pressing the same key will cycle through options
+            startFromNext: searchString.current.length === 1
+        })) {
+            return;
+        }
+        // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
+        if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{
+            return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;
+        }, {
+            // if the search is all the same letter, cycle through options starting with that letter
+            startFromNext: true
+        })) {
+            return;
+        }
+        activeDescendantController.blur();
+    };
+    const onTriggerKeyDown = (ev)=>{
+        // clear timeout, if it exists
+        clearKeyTimeout();
+        // if the key was a char key, update search string
+        if (getDropdownActionFromKey(ev) === 'Type') {
+            // update search string
+            searchString.current += ev.key.toLowerCase();
+            setKeyTimeout(()=>{
+                searchString.current = '';
+            }, 500);
+            if (open) {
+                moveToNextMatchingOptionWithSameCharacterHandling();
+            }
+            // update state
+            !open && setOpen(ev, true);
+        }
+    };
+    const trigger = useTriggerSlot(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'button',
+        activeDescendantController
+    });
+    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);
+    return trigger;
+}
+/**
+ * @returns - whether every character in the string is the same
+ */ function allCharactersSame(str) {
+    for(let i = 1; i < str.length; i++){
+        if (str[i] !== str[i - 1]) {
+            return false;
+        }
+    }
+    return true;
+}

node_modules/@fluentui/react-combobox/lib/components/Dropdown/useDropdown.js

@@ -0,0 +1,170 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { useActiveDescendant } from '@fluentui/react-aria';
+import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback, useOnClickOutside } from '@fluentui/react-utilities';
+import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
+import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
+import { Listbox } from '../Listbox/Listbox';
+import { useListboxSlot } from '../../utils/useListboxSlot';
+import { useButtonTriggerSlot } from './useButtonTriggerSlot';
+import { optionClassNames } from '../Option/useOptionStyles.styles';
+/**
+ * Create the base state required to render Dropdown, without design-only props.
+ *
+ * @param props - props from this instance of Dropdown (without appearance and size)
+ * @param ref - reference to root HTMLButtonElement of Dropdown
+ */ export const useDropdownBase_unstable = (props, ref)=>{
+    'use no memo';
+    var _state_clearButton;
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true
+    });
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
+        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+    });
+    const dropdownInternalState = useComboboxBaseState({
+        ...props,
+        activeDescendantController,
+        freeform: false
+    });
+    const { appearance: _appearance, size: _size, freeform: _freeform, ...baseState } = dropdownInternalState;
+    const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
+    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'button',
+        excludedPropNames: [
+            'children'
+        ]
+    });
+    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
+    const triggerRef = React.useRef(null);
+    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
+        state: dropdownInternalState,
+        triggerRef,
+        defaultProps: {
+            children: props.children
+        }
+    });
+    const { targetDocument } = useFluent();
+    useOnClickOutside({
+        element: targetDocument,
+        callback: (event)=>setOpen(event, false),
+        refs: [
+            triggerRef,
+            comboboxPopupRef,
+            comboboxTargetRef
+        ],
+        disabled: !open
+    });
+    var _props_button;
+    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, activeParentRef, ref), {
+        state: dropdownInternalState,
+        defaultProps: {
+            type: 'button',
+            // tabster navigation breaks if the button is disabled and tabIndex is 0
+            tabIndex: triggerNativeProps.disabled ? undefined : 0,
+            children: baseState.value || props.placeholder,
+            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
+            ...triggerNativeProps
+        },
+        activeDescendantController
+    });
+    const rootSlot = slot.always(props.root, {
+        defaultProps: {
+            'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
+            children: props.children,
+            ...rootNativeProps
+        },
+        elementType: 'div'
+    });
+    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
+    const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
+    const state = {
+        components: {
+            root: 'div',
+            button: 'button',
+            clearButton: 'button',
+            expandIcon: 'span',
+            listbox: Listbox
+        },
+        root: rootSlot,
+        button: trigger,
+        listbox: open || hasFocus ? listbox : undefined,
+        clearButton: slot.optional(props.clearButton, {
+            defaultProps: {
+                'aria-label': 'Clear selection',
+                // Safari doesn't allow to focus an element with this
+                // when the element is not visible (display: none) we need to remove it to avoid tabster issues
+                tabIndex: showClearButton ? 0 : undefined,
+                type: 'button'
+            },
+            elementType: 'button',
+            renderByDefault: true
+        }),
+        expandIcon: slot.optional(props.expandIcon, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        placeholderVisible: !baseState.value && !!props.placeholder,
+        showClearButton,
+        activeDescendantController,
+        ...baseState
+    };
+    const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{
+        var _triggerRef_current;
+        clearSelection(ev);
+        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+    }));
+    if (state.clearButton) {
+        state.clearButton.onClick = onClearButtonClick;
+    }
+    // Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
+    if (multiselect) {
+        state.clearButton = 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;
+};
+/**
+ * Create the state required to render Dropdown.
+ *
+ * The returned state can be modified with hooks such as useDropdownStyles_unstable,
+ * before being passed to renderDropdown_unstable.
+ *
+ * @param props - props from this instance of Dropdown
+ * @param ref - reference to root HTMLElement of Dropdown
+ */ export const useDropdown_unstable = (props, ref)=>{
+    'use no memo';
+    const { appearance = 'outline', size = 'medium', ...baseProps } = props;
+    const baseState = useDropdownBase_unstable(baseProps, ref);
+    if (baseState.clearButton) {
+        var _baseState_clearButton;
+        var _children;
+        (_children = (_baseState_clearButton = baseState.clearButton).children) !== null && _children !== void 0 ? _children : _baseState_clearButton.children = /*#__PURE__*/ React.createElement(DismissIcon, 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(ChevronDownIcon, null);
+    }
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};

node_modules/@fluentui/react-combobox/lib/components/Dropdown/useDropdownStyles.styles.js

@@ -0,0 +1,376 @@
+'use client';
+
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { iconSizes } from '../../utils/internalTokens';
+export const dropdownClassNames = {
+  root: 'fui-Dropdown',
+  button: 'fui-Dropdown__button',
+  clearButton: 'fui-Dropdown__clearButton',
+  expandIcon: 'fui-Dropdown__expandIcon',
+  listbox: 'fui-Dropdown__listbox'
+};
+/**
+ * Styles for Dropdown
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "ftuwxu6",
+    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: "ffyw7fx",
+    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",
+    Br277j9: "f18qfb8s",
+    Btis473: "f1m082s7"
+  },
+  listbox: {
+    B7ck84d: "f1ewtqcl",
+    E5pizo: "f1hg901r",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    Bxyxcbc: "fmmk62d"
+  },
+  listboxCollapsed: {
+    mc9l5x: "fjseox"
+  },
+  inlineListbox: {
+    Bj3rh1h: "f19g0ac"
+  },
+  button: {
+    Bt984gj: "f122n59",
+    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",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "f19n0e5",
+    i8kkvl: "f14mj54c",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f13qh94s",
+    Bahqtrf: "fk6fouc",
+    Budl1dq: "f12nh0o2",
+    Brf1p80: "f1869bpl",
+    fsow6f: ["f1o700av", "fes3tcz"],
+    a9b677: "fly5x3f",
+    Brovlpu: "ftqa4ok"
+  },
+  placeholder: {
+    sj55zd: "fxc4j92"
+  },
+  small: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["fye6m5k", "f3cq2dl"]
+  },
+  medium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f14ev680", "f58uxzw"]
+  },
+  large: {
+    i8kkvl: "f1rjii52",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "faaz57k",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f139mn7i", "f1v3q0m"]
+  },
+  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: "fs2rfia"
+  },
+  "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: "fs2rfia"
+  },
+  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"]
+  },
+  disabledText: {
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr"
+  },
+  hidden: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".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;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), 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;}", ".f122n59{align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", {
+    p: -1
+  }], [".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}", {
+    p: -1
+  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
+    p: -2
+  }], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", [".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
+    p: -1
+  }], [".fokr779{border-radius:0;}", {
+    p: -1
+  }], [".fs2rfia{border:var(--strokeWidthThin) solid transparent;}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", [".fs2rfia{border:var(--strokeWidthThin) solid transparent;}", {
+    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);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  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)"
+  }]],
+  t: ["@supports selector(:has(*)){.f18qfb8s:has(.fui-Dropdown__clearButton:focus)::after{border-bottom-color:initial;}}", "@supports selector(:has(*)){.f1m082s7:has(.fui-Dropdown__clearButton:focus)::after{transform:scaleX(0);}}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  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 useIconStyles = /*#__PURE__*/__styles({
+  icon: {
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "fxkbij4",
+    mc9l5x: "ftgm304",
+    Be2twd7: "f1pp30po",
+    Br312pm: "f12w6cgp",
+    Bw0ie65: "f8bv1bt",
+    Bo70h7d: "fvc9v3g"
+  },
+  small: {
+    Be2twd7: "f4ybsrx",
+    Frg6f3: ["f1h9en5y", "f1xk557c"]
+  },
+  medium: {
+    Be2twd7: "fe5j1ua",
+    Frg6f3: ["f1h9en5y", "f1xk557c"]
+  },
+  large: {
+    Be2twd7: "f1rt2boy",
+    Frg6f3: ["f1t5qyk5", "f1ikr372"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o"
+  }
+}, {
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".fvc9v3g svg{display:block;}", ".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);}"]
+});
+const useBaseClearButtonStyle = /*#__PURE__*/__resetStyles("rticfuj", "r1vp6jef", {
+  r: [".rticfuj{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".rticfuj:focus{outline-style:none;}", ".rticfuj:focus-visible{outline-style:none;}", ".rticfuj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rticfuj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1vp6jef{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1vp6jef:focus{outline-style:none;}", ".r1vp6jef:focus-visible{outline-style:none;}", ".r1vp6jef[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1vp6jef[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.rticfuj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1vp6jef[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+});
+/**
+ * Apply styling to the Dropdown slots based on the state
+ */
+export const useDropdownStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    appearance,
+    open,
+    placeholderVisible,
+    showClearButton,
+    size
+  } = state;
+  const invalid = `${state.button['aria-invalid']}` === 'true';
+  const disabled = state.button.disabled;
+  const styles = useStyles();
+  const iconStyles = useIconStyles();
+  const clearButtonStyle = useBaseClearButtonStyle();
+  state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+  state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
+  if (state.listbox) {
+    state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
+  }
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
+  }
+  if (state.clearButton) {
+    state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-combobox/lib/components/Dropdown/useDropdownStyles.styles.raw.js

@@ -0,0 +1,244 @@
+'use client';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { iconSizes } from '../../utils/internalTokens';
+export const dropdownClassNames = {
+    root: 'fui-Dropdown',
+    button: 'fui-Dropdown__button',
+    clearButton: 'fui-Dropdown__clearButton',
+    expandIcon: 'fui-Dropdown__expandIcon',
+    listbox: 'fui-Dropdown__listbox'
+};
+/**
+ * Styles for Dropdown
+ */ const useStyles = makeStyles({
+    root: {
+        borderRadius: tokens.borderRadiusMedium,
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,
+            borderBottomLeftRadius: tokens.borderRadiusMedium,
+            borderBottomRightRadius: tokens.borderRadiusMedium,
+            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
+            clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationUltraFast,
+            transitionDelay: tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationNormal,
+            transitionDelay: tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within:active::after': {
+            borderBottomColor: tokens.colorCompoundBrandStrokePressed
+        },
+        '@supports selector(:has(*))': {
+            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {
+                borderBottomColor: 'initial',
+                transform: 'scaleX(0)'
+            }
+        }
+    },
+    listbox: {
+        boxSizing: 'border-box',
+        boxShadow: `${tokens.shadow16}`,
+        borderRadius: tokens.borderRadiusMedium,
+        maxHeight: '80vh'
+    },
+    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
+    },
+    button: {
+        alignItems: 'center',
+        backgroundColor: tokens.colorTransparentBackground,
+        border: 'none',
+        boxSizing: 'border-box',
+        color: tokens.colorNeutralForeground1,
+        columnGap: tokens.spacingHorizontalXXS,
+        cursor: 'pointer',
+        display: 'grid',
+        fontFamily: tokens.fontFamilyBase,
+        gridTemplateColumns: '[content] 1fr [icon] auto [end]',
+        justifyContent: 'space-between',
+        textAlign: 'left',
+        width: '100%',
+        '&:focus': {
+            outlineStyle: 'none'
+        }
+    },
+    placeholder: {
+        color: tokens.colorNeutralForeground4
+    },
+    // size variants
+    small: {
+        ...typographyStyles.caption1,
+        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`
+    },
+    medium: {
+        ...typographyStyles.body1,
+        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`
+    },
+    large: {
+        columnGap: tokens.spacingHorizontalSNudge,
+        ...typographyStyles.body2,
+        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`
+    },
+    // appearance variants
+    outline: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+        borderBottomColor: tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
+        },
+        '&:active': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '&:focus-within': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0'
+    },
+    'filled-lighter': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid transparent`
+    },
+    'filled-darker': {
+        backgroundColor: tokens.colorNeutralBackground3,
+        border: `${tokens.strokeWidthThin} solid transparent`
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: tokens.colorPaletteRedBorder2
+        }
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('GrayText')
+        }
+    },
+    disabledText: {
+        color: tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed'
+    },
+    hidden: {
+        display: 'none'
+    }
+});
+const useIconStyles = makeStyles({
+    icon: {
+        boxSizing: 'border-box',
+        color: tokens.colorNeutralStrokeAccessible,
+        display: 'block',
+        fontSize: tokens.fontSizeBase500,
+        gridColumnStart: 'icon',
+        gridColumnEnd: 'end',
+        // the SVG must have display: block for accurate positioning
+        // otherwise an extra inline space is inserted after the svg element
+        '& svg': {
+            display: 'block'
+        }
+    },
+    // icon size variants
+    small: {
+        fontSize: iconSizes.small,
+        marginLeft: tokens.spacingHorizontalXXS
+    },
+    medium: {
+        fontSize: iconSizes.medium,
+        marginLeft: tokens.spacingHorizontalXXS
+    },
+    large: {
+        fontSize: iconSizes.large,
+        marginLeft: tokens.spacingHorizontalSNudge
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    }
+});
+const useBaseClearButtonStyle = makeResetStyles({
+    alignSelf: 'center',
+    backgroundColor: tokens.colorTransparentBackground,
+    border: 'none',
+    cursor: 'pointer',
+    height: 'fit-content',
+    margin: 0,
+    marginRight: tokens.spacingHorizontalMNudge,
+    padding: 0,
+    position: 'relative',
+    ...createFocusOutlineStyle()
+});
+/**
+ * Apply styling to the Dropdown slots based on the state
+ */ export const useDropdownStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, open, placeholderVisible, showClearButton, size } = state;
+    const invalid = `${state.button['aria-invalid']}` === 'true';
+    const disabled = state.button.disabled;
+    const styles = useStyles();
+    const iconStyles = useIconStyles();
+    const clearButtonStyle = useBaseClearButtonStyle();
+    state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+    state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
+    if (state.listbox) {
+        state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
+    }
+    if (state.expandIcon) {
+        state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
+    }
+    if (state.clearButton) {
+        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-combobox/lib/components/Listbox/Listbox.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useListbox_unstable } from './useListbox';
+import { renderListbox_unstable } from './renderListbox';
+import { useListboxStyles_unstable } from './useListboxStyles.styles';
+import { useListboxContextValues } from '../../contexts/useListboxContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Listbox component: a standalone selection control, or the popup in a Combobox
+ */ export const Listbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useListbox_unstable(props, ref);
+    const contextValues = useListboxContextValues(state);
+    useListboxStyles_unstable(state);
+    useCustomStyleHook_unstable('useListboxStyles_unstable')(state);
+    return renderListbox_unstable(state, contextValues);
+});
+Listbox.displayName = 'Listbox';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,SAASC,uBAAuB,QAAQ,yCAAyC;AAEjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,wBAAwBM;IAE9CP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

node_modules/@fluentui/react-combobox/lib/components/Listbox/Listbox.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-combobox/lib/components/Listbox/Listbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /** The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n  SelectionProps & {\n    /**\n     * Disable auto-focusing on the first item when mounting.\n     *\n     * @default false\n     */\n    disableAutoFocus?: boolean;\n  };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n    standalone: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AA8DA,WAGE"}

node_modules/@fluentui/react-combobox/lib/components/Listbox/index.js

@@ -0,0 +1,4 @@
+export { Listbox } from './Listbox';
+export { renderListbox_unstable } from './renderListbox';
+export { useListbox_unstable } from './useListbox';
+export { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","renderListbox_unstable","useListbox_unstable","listboxClassNames","useListboxStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

node_modules/@fluentui/react-combobox/lib/components/Listbox/renderListbox.js

@@ -0,0 +1,16 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
+import { ListboxContext } from '../../contexts/ListboxContext';
+/**
+ * Render the final JSX of Listbox
+ */ export const renderListbox_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
+        value: contextValues.activeDescendant,
+        children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {
+            value: contextValues.listbox,
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
+    });
+};

node_modules/@fluentui/react-combobox/lib/components/Listbox/renderListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Listbox/renderListbox.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 { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues): JSXElement => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DL,YAA0BI;IAE1B,qBACE,KAACH;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,cAAA,KAACL,eAAeM,QAAQ;YAACF,OAAOD,cAAcI,OAAO;sBACnD,cAAA,KAACL,MAAMM,IAAI;;;AAInB,EAAE"}

node_modules/@fluentui/react-combobox/lib/components/Listbox/useListbox.js

@@ -0,0 +1,196 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+import { useOptionCollection } from '../../utils/useOptionCollection';
+import { useSelection } from '../../utils/useSelection';
+import { optionClassNames } from '../Option/useOptionStyles.styles';
+import { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';
+import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const UNSAFE_noLongerUsed = {
+    activeOption: undefined,
+    focusVisible: false,
+    setActiveOption: ()=>null
+};
+/**
+ * Create the state required to render Listbox.
+ *
+ * The returned state can be modified with hooks such as useListboxStyles_unstable,
+ * before being passed to renderListbox_unstable.
+ *
+ * @param props - props from this instance of Listbox
+ * @param ref - reference to root HTMLElement of Listbox
+ */ export const useListbox_unstable = (props, ref)=>{
+    'use no memo';
+    const { multiselect, disableAutoFocus = false } = props;
+    const optionCollection = useOptionCollection();
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({
+        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+    });
+    const hasListboxContext = useHasParentContext(ListboxContext);
+    const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);
+    const contextGetOptionById = useListboxContext_unstable((ctx)=>ctx.getOptionById);
+    const contextGetOptionsMatchingValue = useListboxContext_unstable((ctx)=>ctx.getOptionsMatchingValue);
+    const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;
+    const getOptionsMatchingValue = hasListboxContext ? contextGetOptionsMatchingValue : optionCollection.getOptionsMatchingValue;
+    const listenerRef = React.useMemo(()=>{
+        let element = null;
+        const listener = (untypedEvent)=>{
+            // Typescript doesn't support custom event types on handler
+            const event = untypedEvent;
+            onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);
+        };
+        return (el)=>{
+            if (!el) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);
+                return;
+            }
+            element = el;
+            element.addEventListener('activedescendantchange', listener);
+        };
+    }, [
+        onActiveDescendantChange
+    ]);
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);
+    useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);
+    const activeDescendantContext = useActiveDescendantContext();
+    const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();
+    const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
+    const { clearSelection, selectedOptions, selectOption } = useSelection(props);
+    const onKeyDown = (event)=>{
+        const action = getDropdownActionFromKey(event, {
+            open: true
+        });
+        const activeOptionId = activeDescendantController.active();
+        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
+        switch(action){
+            case 'First':
+            case 'Last':
+            case 'Next':
+            case 'Previous':
+            case 'PageDown':
+            case 'PageUp':
+            case 'CloseSelect':
+            case 'Select':
+                event.preventDefault();
+                break;
+        }
+        switch(action){
+            case 'Next':
+                if (activeOption) {
+                    activeDescendantController.next();
+                } else {
+                    activeDescendantController.first();
+                }
+                break;
+            case 'Previous':
+                if (activeOption) {
+                    activeDescendantController.prev();
+                } else {
+                    activeDescendantController.first();
+                }
+                break;
+            case 'PageUp':
+            case 'First':
+                activeDescendantController.first();
+                break;
+            case 'PageDown':
+            case 'Last':
+                activeDescendantController.last();
+                break;
+            case 'Select':
+            case 'CloseSelect':
+                activeOption && selectOption(event, activeOption);
+                break;
+        }
+    };
+    // get state from parent combobox, if it exists
+    const contextSelectedOptions = useListboxContext_unstable((ctx)=>ctx.selectedOptions);
+    const contextSelectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
+    // without a parent combobox context, provide values directly from Listbox
+    const optionContextValues = hasListboxContext ? {
+        selectedOptions: contextSelectedOptions,
+        selectOption: contextSelectOption,
+        ...UNSAFE_noLongerUsed
+    } : {
+        selectedOptions,
+        selectOption,
+        ...UNSAFE_noLongerUsed
+    };
+    React.useEffect(()=>{
+        // if the listbox has a parent context, that parent context should handle the activedescendant
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        // disable focus-visible attributes until focus is received
+        activeDescendantController.hideFocusVisibleAttributes();
+        if (!disableAutoFocus) {
+            // if it is single-select and there is a selected option, start at the selected option
+            if (!multiselect && optionContextValues.selectedOptions.length > 0) {
+                const selectedOption = getOptionsMatchingValue((v)=>v === optionContextValues.selectedOptions[0]).pop();
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
+            } else {
+                activeDescendantController.first();
+            }
+        }
+        return ()=>{
+            activeDescendantController.blur();
+        };
+    // this should only be run once in the lifecycle of the Listbox
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onFocus = React.useCallback(()=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        activeDescendantController.showFocusVisibleAttributes();
+        if (isNavigatingWithKeyboard) {
+            activeDescendantController.scrollActiveIntoView();
+        }
+    }, [
+        activeDescendantController,
+        hasParentActiveDescendantContext,
+        isNavigatingWithKeyboard
+    ]);
+    const onBlur = React.useCallback(()=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        activeDescendantController.hideFocusVisibleAttributes();
+    }, [
+        activeDescendantController,
+        hasParentActiveDescendantContext
+    ]);
+    const state = {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(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: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef, listenerRef),
+            role: multiselect ? 'menu' : 'listbox',
+            tabIndex: 0,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        standalone: !hasListboxContext,
+        multiselect,
+        clearSelection,
+        activeDescendantController,
+        onActiveDescendantChange,
+        ...optionCollection,
+        ...optionContextValues
+    };
+    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
+    state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));
+    state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));
+    return state;
+};

node_modules/@fluentui/react-combobox/lib/components/Listbox/useListboxStyles.styles.js

@@ -0,0 +1,46 @@
+'use client';
+
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+export const listboxClassNames = {
+  root: 'fui-Listbox'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    De3pzq: "fxugw4r",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Bf4jedk: "f3hsy1e",
+    Bmxbyg5: "f5zp4f",
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f1iepc6i",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1t35pdg",
+    Belr9w4: "fiut8dr"
+  }
+}, {
+  d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", [".f1iepc6i{outline:1px solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".f1t35pdg{padding:var(--spacingHorizontalXS);}", {
+    p: -1
+  }], ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
+});
+/**
+ * Apply styling to the Listbox slots based on the state
+ */
+export const useListboxStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-combobox/lib/components/Listbox/useListboxStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-combobox/lib/components/Listbox/useListboxStyles.styles.raw.js

@@ -0,0 +1,29 @@
+'use client';
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const listboxClassNames = {
+    root: 'fui-Listbox'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: '160px',
+        overflowY: 'auto',
+        outline: `1px solid ${tokens.colorTransparentStroke}`,
+        padding: tokens.spacingHorizontalXS,
+        rowGap: tokens.spacingHorizontalXXS
+    }
+});
+/**
+ * Apply styling to the Listbox slots based on the state
+ */ export const useListboxStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-combobox/lib/components/Listbox/useListboxStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    outline: `1px solid ${tokens.colorTransparentStroke}`,\n    padding: tokens.spacingHorizontalXS,\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","listboxClassNames","root","useStyles","backgroundColor","colorNeutralBackground1","boxSizing","display","flexDirection","minWidth","overflowY","outline","colorTransparentStroke","padding","spacingHorizontalXS","rowGap","spacingHorizontalXXS","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,iBAAiBN,OAAOO,uBAAuB;QAC/CC,WAAW;QACXC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,SAAS,CAAC,UAAU,EAAEb,OAAOc,sBAAsB,EAAE;QACrDC,SAASf,OAAOgB,mBAAmB;QACnCC,QAAQjB,OAAOkB,oBAAoB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,SAAShB;IACfe,MAAMhB,IAAI,CAACkB,SAAS,GAAGpB,aAAaC,kBAAkBC,IAAI,EAAEiB,OAAOjB,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IAE7F,OAAOF;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useOption_unstable } from './useOption';
+import { renderOption_unstable } from './renderOption';
+import { useOptionStyles_unstable } from './useOptionStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Option component: a styled child option of a Combobox
+ */ export const Option = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useOption_unstable(props, ref);
+    useOptionStyles_unstable(state);
+    useCustomStyleHook_unstable('useOptionStyles_unstable')(state);
+    return renderOption_unstable(state);
+});
+Option.displayName = 'Option';

node_modules/@fluentui/react-combobox/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

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

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

node_modules/@fluentui/react-combobox/lib/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":"AACA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,4 @@
+export { Option } from './Option';
+export { renderOption_unstable } from './renderOption';
+export { useOption_unstable, useOptionBase_unstable } from './useOption';
+export { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';

node_modules/@fluentui/react-combobox/lib/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":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

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

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Option
+ */ export const renderOption_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.checkIcon && /*#__PURE__*/ _jsx(state.checkIcon, {}),
+            state.root.children
+        ]
+    });
+};

node_modules/@fluentui/react-combobox/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

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

@@ -0,0 +1,145 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useActiveDescendantContext } from '@fluentui/react-aria';
+import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
+import { useListboxContext_unstable } from '../../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;
+}
+/**
+ * Create the state required to render Option.
+ *
+ * The returned state can be modified with hooks such as useOptionStyles_unstable,
+ * before being passed to renderOption_unstable.
+ *
+ * @param props - props from this instance of Option
+ * @param ref - reference to root HTMLElement of Option
+ */ export const useOption_unstable = (props, ref)=>{
+    'use no memo';
+    const state = useOptionBase_unstable(props, ref);
+    // check icon
+    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);
+    if (state.multiselect) {
+        CheckIcon = state.selected ? /*#__PURE__*/ React.createElement(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;
+};
+/**
+ * Create the base state required to render Option.
+ *
+ * @param props - props from this instance of Option
+ * @param ref - reference to root HTMLElement of Option
+ */ export 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 = 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 } = useActiveDescendantContext();
+    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);
+    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
+    const selected = useListboxContext_unstable((ctx)=>{
+        const selectedOptions = ctx.selectedOptions;
+        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
+    });
+    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
+    const onOptionClick = 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: slot.always(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: useMergedRefs(ref, optionRef),
+            'aria-disabled': disabled ? 'true' : undefined,
+            id,
+            ...semanticProps,
+            ...props,
+            onClick
+        }), {
+            elementType: 'div'
+        }),
+        checkIcon: 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/components/Option/useOptionStyles.styles.js

@@ -0,0 +1,195 @@
+'use client';
+
+import { tokens } from '@fluentui/react-theme';
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const optionClassNames = {
+  root: 'fui-Option',
+  checkIcon: 'fui-Option__checkIcon'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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)"
+  }]]
+});
+/**
+ * Apply styling to the Option slots based on the state
+ */
+export const useOptionStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    disabled,
+    multiselect,
+    selected
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+  if (state.checkIcon) {
+    state.checkIcon.className = 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/components/Option/useOptionStyles.styles.raw.js

@@ -0,0 +1,118 @@
+'use client';
+import { tokens } from '@fluentui/react-theme';
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+export const optionClassNames = {
+    root: 'fui-Option',
+    checkIcon: 'fui-Option__checkIcon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        alignItems: 'center',
+        borderRadius: tokens.borderRadiusMedium,
+        color: tokens.colorNeutralForeground1,
+        columnGap: tokens.spacingHorizontalXS,
+        cursor: 'pointer',
+        display: 'flex',
+        fontFamily: tokens.fontFamilyBase,
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300,
+        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
+        position: 'relative',
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            color: tokens.colorNeutralForeground1Hover,
+            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground1Pressed,
+            color: tokens.colorNeutralForeground1Pressed,
+            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)
+        }
+    },
+    active: {
+        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {
+            content: '""',
+            position: 'absolute',
+            pointerEvents: 'none',
+            zIndex: 1,
+            border: `2px solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            top: '-2px',
+            bottom: '-2px',
+            left: '-2px',
+            right: '-2px'
+        }
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackground,
+            color: tokens.colorNeutralForegroundDisabled,
+            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)
+        },
+        ':active': {
+            backgroundColor: tokens.colorTransparentBackground,
+            color: tokens.colorNeutralForegroundDisabled,
+            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    selected: {},
+    checkIcon: {
+        flexShrink: 0,
+        fontSize: 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(${tokens.spacingHorizontalXXS} * -1)`,
+        marginRight: tokens.spacingHorizontalXXS,
+        visibility: 'hidden',
+        '& svg': {
+            display: 'block'
+        }
+    },
+    selectedCheck: {
+        visibility: 'visible'
+    },
+    multiselectCheck: {
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: tokens.borderRadiusSmall,
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fill: 'currentColor',
+        fontSize: '12px',
+        height: '16px',
+        width: '16px',
+        visibility: 'visible'
+    },
+    selectedMultiselectCheck: {
+        backgroundColor: tokens.colorCompoundBrandBackground,
+        color: tokens.colorNeutralForegroundInverted,
+        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)
+    },
+    checkDisabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)
+});
+/**
+ * Apply styling to the Option slots based on the state
+ */ export const useOptionStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled, multiselect, selected } = state;
+    const styles = useStyles();
+    state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+    if (state.checkIcon) {
+        state.checkIcon.className = 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/components/OptionGroup/OptionGroup.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useOptionGroup_unstable } from './useOptionGroup';
+import { renderOptionGroup_unstable } from './renderOptionGroup';
+import { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * OptionGroup component: allows grouping of Option components within a Combobox
+ */ export const OptionGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useOptionGroup_unstable(props, ref);
+    useOptionGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);
+    return renderOptionGroup_unstable(state);
+});
+OptionGroup.displayName = 'OptionGroup';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/OptionGroup.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering OptionGroup
+ */ export { };

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/OptionGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n  /** The root group wrapper */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The option group label, displayed as static text before the child options.\n   * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n   */\n  label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"],"names":[],"mappings":"AAkBA;;CAEC,GACD,WAAgE"}

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/index.js

@@ -0,0 +1,4 @@
+export { OptionGroup } from './OptionGroup';
+export { renderOptionGroup_unstable } from './renderOptionGroup';
+export { useOptionGroup_unstable } from './useOptionGroup';
+export { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","renderOptionGroup_unstable","useOptionGroup_unstable","optionGroupClassNames","useOptionGroupStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/renderOptionGroup.js

@@ -0,0 +1,15 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of OptionGroup
+ */ export const renderOptionGroup_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.label && /*#__PURE__*/ _jsx(state.label, {
+                children: state.label.children
+            }),
+            state.root.children
+        ]
+    });
+};

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/renderOptionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OptionGroup/renderOptionGroup.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 { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState): JSXElement => {\n  assertSlots<OptionGroupSlots>(state);\n\n  return (\n    <state.root>\n      {state.label && <state.label>{state.label.children}</state.label>}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderOptionGroup_unstable","state","root","label","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;0BAAEF,MAAME,KAAK,CAACC,QAAQ;;YACjDH,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/useOptionGroup.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render OptionGroup.
+ *
+ * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,
+ * before being passed to renderOptionGroup_unstable.
+ *
+ * @param props - props from this instance of OptionGroup
+ * @param ref - reference to root HTMLElement of OptionGroup
+ */ export const useOptionGroup_unstable = (props, ref)=>{
+    const labelId = useId('group-label');
+    const { label } = props;
+    return {
+        components: {
+            root: 'div',
+            label: 'span'
+        },
+        root: slot.always(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: ref,
+            role: 'group',
+            'aria-labelledby': label ? labelId : undefined,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        label: slot.optional(label, {
+            defaultProps: {
+                id: labelId,
+                role: 'presentation'
+            },
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/useOptionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n  const labelId = useId('group-label');\n  const { label } = props;\n\n  return {\n    components: {\n      root: 'div',\n      label: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'group',\n        'aria-labelledby': label ? labelId : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    label: slot.optional(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,UAAUL,MAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,KAAKQ,MAAM,CACfV,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,KAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/useOptionGroupStyles.styles.js

@@ -0,0 +1,70 @@
+'use client';
+
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+export const optionGroupClassNames = {
+  root: 'fui-OptionGroup',
+  label: 'fui-OptionGroup__label'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "fiut8dr",
+    B8lkq7l: "f1xxzjds",
+    eii1in: 0,
+    H93o2g: 0,
+    Gwp8xu: 0,
+    Bd39igo: "f16cmn8k",
+    om0q45: "f5642y",
+    Hl9o3s: "ffdf81h",
+    sl1c2c: 0,
+    z4hxbw: 0,
+    B0i58d9: 0,
+    Bi9x0x4: 0,
+    Bgurq3m: "f1bsn9kn"
+  },
+  label: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    sj55zd: "f11d4kpn",
+    mc9l5x: "ftgm304",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mpq0zz"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".f1xxzjds:not(:last-child)::after{content:\"\";}", [".f16cmn8k:not(:last-child)::after{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}", {
+    p: -1
+  }], ".f5642y:not(:last-child)::after{display:block;}", ".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}", [".f1bsn9kn:not(:last-child)::after{margin:0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".ftgm304{display:block;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".f1mpq0zz{padding:var(--spacingHorizontalS) var(--spacingHorizontalSNudge);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the OptionGroup slots based on the state
+ */
+export const useOptionGroupStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
+  if (state.label) {
+    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,KAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;EAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;IACbkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;EAC1G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js

@@ -0,0 +1,43 @@
+'use client';
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const optionGroupClassNames = {
+    root: 'fui-OptionGroup',
+    label: 'fui-OptionGroup__label'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: tokens.spacingHorizontalXXS,
+        '&:not(:last-child)::after': {
+            content: '""',
+            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+            display: 'block',
+            paddingBottom: tokens.spacingHorizontalXS,
+            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`
+        }
+    },
+    label: {
+        borderRadius: tokens.borderRadiusMedium,
+        color: tokens.colorNeutralForeground3,
+        display: 'block',
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightSemibold,
+        lineHeight: tokens.lineHeightBase200,
+        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`
+    }
+});
+/**
+ * Apply styling to the OptionGroup slots based on the state
+ */ export const useOptionGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
+    if (state.label) {
+        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-combobox/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n  root: 'fui-OptionGroup',\n  label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingHorizontalXXS,\n\n    '&:not(:last-child)::after': {\n      content: '\"\"',\n      borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n      display: 'block',\n      paddingBottom: tokens.spacingHorizontalXS,\n      margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`,\n    },\n  },\n\n  label: {\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase200,\n    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,\n  },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,OAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,OAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,OAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,OAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,OAAOoB,kBAAkB;QACvCC,OAAOrB,OAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,OAAOwB,eAAe;QAChCC,YAAYzB,OAAO0B,kBAAkB;QACrCC,YAAY3B,OAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,OAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,OAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGjC,aAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf4B,MAAM5B,KAAK,CAAC8B,SAAS,GAAGjC,aAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}