feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-select/lib-commonjs/Select.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Select: function() {
+        return _index.Select;
+    },
+    renderSelect_unstable: function() {
+        return _index.renderSelect_unstable;
+    },
+    selectClassNames: function() {
+        return _index.selectClassNames;
+    },
+    useSelectBase_unstable: function() {
+        return _index.useSelectBase_unstable;
+    },
+    useSelectStyles_unstable: function() {
+        return _index.useSelectStyles_unstable;
+    },
+    useSelect_unstable: function() {
+        return _index.useSelect_unstable;
+    }
+});
+const _index = require("./components/Select/index");

node_modules/@fluentui/react-select/lib-commonjs/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelectBase_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eASEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,uBAAgB;;;eAEhBE,6BAAsB;;;eADtBD,+BAAwB;;;eAExBE,yBAAkB;;;uBACb,4BAA4B"}

node_modules/@fluentui/react-select/lib-commonjs/components/Select/Select.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Select", {
+    enumerable: true,
+    get: function() {
+        return Select;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSelect = require("./useSelect");
+const _renderSelect = require("./renderSelect");
+const _useSelectStylesstyles = require("./useSelectStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Select = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSelect.useSelect_unstable)(props, ref);
+    (0, _useSelectStylesstyles.useSelectStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSelectStyles_unstable')(state);
+    return (0, _renderSelect.renderSelect_unstable)(state);
+});
+Select.displayName = 'Select';

node_modules/@fluentui/react-select/lib-commonjs/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-select/lib-commonjs/components/Select/Select.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-select/lib-commonjs/components/Select/Select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-select/lib-commonjs/components/Select/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Select: function() {
+        return _Select.Select;
+    },
+    renderSelect_unstable: function() {
+        return _renderSelect.renderSelect_unstable;
+    },
+    selectClassNames: function() {
+        return _useSelectStylesstyles.selectClassNames;
+    },
+    useSelectBase_unstable: function() {
+        return _useSelect.useSelectBase_unstable;
+    },
+    useSelectStyles_unstable: function() {
+        return _useSelectStylesstyles.useSelectStyles_unstable;
+    },
+    useSelect_unstable: function() {
+        return _useSelect.useSelect_unstable;
+    }
+});
+const _Select = require("./Select");
+const _renderSelect = require("./renderSelect");
+const _useSelect = require("./useSelect");
+const _useSelectStylesstyles = require("./useSelectStyles.styles");

node_modules/@fluentui/react-select/lib-commonjs/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eASNC,mCAAqB;;;eAErBG,uCAAgB;;;eADhBF,iCAAsB;;;eACJG,+CAAwB;;;eADlBF,6BAAkB;;;wBAV5B,WAAW;8BASI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}

node_modules/@fluentui/react-select/lib-commonjs/components/Select/renderSelect.js

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

node_modules/@fluentui/react-select/lib-commonjs/components/Select/renderSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/renderSelect.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 { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,MAAM,EAAA;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}

node_modules/@fluentui/react-select/lib-commonjs/components/Select/useSelect.js

@@ -0,0 +1,89 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSelectBase_unstable: function() {
+        return useSelectBase_unstable;
+    },
+    useSelect_unstable: function() {
+        return useSelect_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactfield = require("@fluentui/react-field");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacticons = require("@fluentui/react-icons");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const useSelect_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
+    var _overrides_inputDefaultAppearance;
+    const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
+    const state = useSelectBase_unstable(baseProps, ref);
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
+    }
+    return {
+        ...state,
+        appearance,
+        size
+    };
+};
+const useSelectBase_unstable = (props, ref)=>{
+    const { defaultValue, value, select, icon, root, onChange } = props;
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'select',
+        excludedPropNames: [
+            'defaultValue',
+            'onChange',
+            'value'
+        ]
+    });
+    const state = {
+        components: {
+            root: 'span',
+            select: 'select',
+            icon: 'span'
+        },
+        select: _reactutilities.slot.always(select, {
+            defaultProps: {
+                defaultValue,
+                value,
+                ref,
+                ...nativeProps.primary
+            },
+            elementType: 'select'
+        }),
+        icon: _reactutilities.slot.optional(icon, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        root: _reactutilities.slot.always(root, {
+            defaultProps: nativeProps.root,
+            elementType: 'span'
+        })
+    };
+    state.select.onChange = (0, _reactutilities.useEventCallback)((event)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+            value: event.target.value
+        });
+    });
+    return state;
+};

node_modules/@fluentui/react-select/lib-commonjs/components/Select/useSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;;;;;;;;;;;;0BAyCaoB;eAAAA;;IAvBAZ,kBAAAA;;;;;iEAhBU,QAAQ;4BACe,wBAAwB;gCACJ,4BAA4B;4BAC3D,wBAAwB;qCAEL,kCAAkC;AAWjF,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAAA,AAAsB,MAAA,QAAhCF,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,CAAAA,YAAAA,CAAAA,cAAAA,MAAME,IAAI,AAAJA,EAAKC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAXH,YAAWG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACjB,8BAAAA,EAAAA;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAQK,+BAA+B,CAACR,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,kBAAc1B,yCAAAA,EAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,oBAAAA,CAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,oBAAAA,CAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,oBAAAA,CAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,OAAGxB,gCAAAA,EAAiBmC,CAAAA;QACvCX,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWW,OAAO;YAAEd,OAAQc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}

node_modules/@fluentui/react-select/lib-commonjs/components/Select/useSelectStyles.styles.js

@@ -0,0 +1,568 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    selectClassNames: function() {
+        return selectClassNames;
+    },
+    useSelectStyles_unstable: function() {
+        return useSelectStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const selectClassNames = {
+    root: 'fui-Select',
+    select: 'fui-Select__select',
+    icon: 'fui-Select__icon'
+};
+const iconSizes = {
+    small: '16px',
+    medium: '20px',
+    large: '24px'
+};
+//TODO: Should fieldHeights be a set of global design tokens or constants?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+/* Since the <select> element must span the full width and cannot have children,
+ * the right padding needs to be calculated from the sum of the following:
+ * 1. Field padding-right
+ * 2. Icon width
+ * 3. Content-icon spacing
+ * 4. Content inner padding
+ */ const paddingRight = {
+    small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge}
+    + ${iconSizes.small}
+    + ${_reacttheme.tokens.spacingHorizontalXXS}
+    + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge}
+    + ${iconSizes.medium}
+    + ${_reacttheme.tokens.spacingHorizontalXXS}
+    + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    large: `calc(${_reacttheme.tokens.spacingHorizontalM}
+    + ${iconSizes.large}
+    + ${_reacttheme.tokens.spacingHorizontalSNudge}
+    + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+};
+/* Left padding is calculated from the outer padding + inner content padding values
+ * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
+    small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+};
+/* end of shared values */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bt984gj: "f122n59",
+        B7ck84d: "f1ewtqcl",
+        mc9l5x: "f22iagw",
+        Eh141a: "flvyvdh",
+        Bahqtrf: "fk6fouc",
+        qhf8xq: "f10pi13n",
+        h62rwi: "f7ll8cq",
+        d9w3h3: 0,
+        B3778ie: 0,
+        B4j8arr: 0,
+        Bl18szs: 0,
+        Blrzh8d: "fe5s0lv",
+        li1rpt: "f1gw3sf2",
+        Bsft5z2: "f13zj6fq",
+        Dlnsje: "fhwjr99",
+        E3zdtr: "f1mdlcz9",
+        By385i5: "fo72kxq",
+        Eqx8gd: [
+            "f1n6gb5g",
+            "f15yvnhg"
+        ],
+        B1piin3: [
+            "f15yvnhg",
+            "f1n6gb5g"
+        ],
+        b1kco5: "f1yk9hq",
+        Ba2ppi3: "fhwpy7i",
+        F2fol1: "f14ee0xe",
+        lck23g: "f1xhbsuh",
+        wi16st: "fsrmcvb",
+        ywj3b2: "f1t3k7v9",
+        umuwi5: "fjw5xc1",
+        Blcqepd: "f1xdyd5c",
+        nplu4u: "fatpbeo",
+        Bioka5o: "fb7uyps",
+        Bnupc0a: "fx04xgm",
+        bing71: "f1c7in40"
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f22iagw{display:flex;}",
+        ".flvyvdh{flex-wrap:nowrap;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".f10pi13n{position:relative;}",
+        ".f7ll8cq::after{background-image:linear-gradient(\n        0deg,\n        var(--colorCompoundBrandStroke) 0%,\n        var(--colorCompoundBrandStroke) 50%,\n        transparent 50%,\n        transparent 100%\n      );}",
+        [
+            ".fe5s0lv::after{border-radius:0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1gw3sf2::after{box-sizing:border-box;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".fhwjr99::after{height:var(--borderRadiusMedium);}",
+        ".f1mdlcz9::after{position:absolute;}",
+        ".fo72kxq::after{bottom:0;}",
+        ".f1n6gb5g::after{left:0;}",
+        ".f15yvnhg::after{right:0;}",
+        ".f1yk9hq::after{transform:scaleX(0);}",
+        ".fhwpy7i::after{transition-property:transform;}",
+        ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
+        ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}"
+    ],
+    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)"
+            }
+        ]
+    ],
+    w: [
+        ".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);}"
+    ]
+});
+const useSelectStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bowrso0: "fqrijq1",
+        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: "faev5xe",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        E5pizo: "f1couhl3",
+        B7ck84d: "f1ewtqcl",
+        sj55zd: "f19n0e5",
+        Bceei9c: "f1k6fduh",
+        Bh6795r: "fqerorx",
+        B2u0y6b: "f6dzj5z",
+        Byoj8tv: "f1qch9an",
+        z8tnut: "f1g0x7ka",
+        B3aqqti: "fatbyko",
+        Brovlpu: "f1grzc83",
+        Bxa1mx5: "f19shzzi"
+    },
+    disabled: {
+        De3pzq: "f1c21dwh",
+        g2u3we: "f1jj8ep1",
+        h3c5rm: [
+            "f15xbau",
+            "fy0fskl"
+        ],
+        B9xav0g: "f4ikngz",
+        zhjwy3: [
+            "fy0fskl",
+            "f15xbau"
+        ],
+        sj55zd: "f1s2aq7o",
+        Bceei9c: "fdrzuqr",
+        Bcq6wej: "f9dbb4x",
+        Jcjdmf: [
+            "f3qs60o",
+            "f5u9ap2"
+        ],
+        sc4o1m: "fwd1oij",
+        Bosien3: [
+            "f5u9ap2",
+            "f3qs60o"
+        ]
+    },
+    disabledUnderline: {
+        g2u3we: "fgig46g",
+        h3c5rm: [
+            "f1mxt3zg",
+            "fziff3p"
+        ],
+        B9xav0g: "f4ikngz",
+        zhjwy3: [
+            "fziff3p",
+            "f1mxt3zg"
+        ]
+    },
+    small: {
+        Bqenvij: "frvgh55",
+        uwmqm3: [
+            "f1xile11",
+            "fqznh8f"
+        ],
+        z189sj: [
+            "fiqd4sw",
+            "f11fkzut"
+        ],
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    medium: {
+        Bqenvij: "f1d2rq10",
+        uwmqm3: [
+            "f1e60jzv",
+            "f135dnwl"
+        ],
+        z189sj: [
+            "f154vowv",
+            "flqamny"
+        ],
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    large: {
+        Bqenvij: "fbhnoac",
+        uwmqm3: [
+            "fnphzt9",
+            "flt1dlf"
+        ],
+        z189sj: [
+            "f1xi5ia2",
+            "f1xi1l47"
+        ],
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "faaz57k"
+    },
+    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: "fm9niy"
+    },
+    outlineInteractive: {
+        Bgoe8wy: "fvcxoqz",
+        Bwzppfd: [
+            "f1ub3y4t",
+            "f1m52nbi"
+        ],
+        oetu4i: "flmw63s",
+        gg5e9n: [
+            "f1m52nbi",
+            "f1ub3y4t"
+        ],
+        B6oc9vd: "fvs00aa",
+        ak43y8: [
+            "f1assf6x",
+            "f4ruux4"
+        ],
+        wmxk5l: "fqhmt4z",
+        B50zh58: [
+            "f4ruux4",
+            "f1assf6x"
+        ]
+    },
+    underline: {
+        De3pzq: "f1c21dwh",
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        Bgfg5da: "fd91s9p",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fokr779",
+        C8i20h: "fb77jct"
+    },
+    "filled-lighter": {
+        De3pzq: "fxugw4r"
+    },
+    "filled-darker": {
+        De3pzq: "f16xq7d1"
+    },
+    invalid: {
+        tvckwq: "fs4k3qj",
+        gk2u95: [
+            "fcee079",
+            "fmyw78r"
+        ],
+        hhx65j: "f1fgmyf4",
+        Bxowmz0: [
+            "fmyw78r",
+            "fcee079"
+        ]
+    },
+    invalidUnderline: {
+        hhx65j: "f1fgmyf4"
+    }
+}, {
+    d: [
+        ".fqrijq1{-webkit-appearance:none;-moz-appearance:none;appearance:none;}",
+        [
+            ".faev5xe{border:1px solid transparent;}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1couhl3{box-shadow:none;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f1k6fduh{cursor:pointer;}",
+        ".fqerorx{flex-grow:1;}",
+        ".f6dzj5z{max-width:100%;}",
+        ".f1qch9an{padding-bottom:0;}",
+        ".f1g0x7ka{padding-top:0;}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".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);}",
+        ".fdrzuqr{cursor:not-allowed;}",
+        ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}",
+        ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}",
+        ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}",
+        ".frvgh55{height:24px;}",
+        ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
+        ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
+        ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n    + 16px\n    + var(--spacingHorizontalXXS)\n    + var(--spacingHorizontalXXS));}",
+        ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n    + 16px\n    + var(--spacingHorizontalXXS)\n    + var(--spacingHorizontalXXS));}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1d2rq10{height:32px;}",
+        ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
+        ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
+        ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n    + 20px\n    + var(--spacingHorizontalXXS)\n    + var(--spacingHorizontalXXS));}",
+        ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n    + 20px\n    + var(--spacingHorizontalXXS)\n    + var(--spacingHorizontalXXS));}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fbhnoac{height:40px;}",
+        ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+        ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+        ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n    + 24px\n    + var(--spacingHorizontalSNudge)\n    + var(--spacingHorizontalSNudge));}",
+        ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n    + 24px\n    + var(--spacingHorizontalSNudge)\n    + var(--spacingHorizontalSNudge));}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        [
+            ".fm9niy{border:1px solid var(--colorNeutralStroke1);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
+        [
+            ".fd91s9p{border-bottom:1px solid var(--colorNeutralStrokeAccessible);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fokr779{border-radius:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".fb77jct option{background-color:var(--colorNeutralBackground1);}",
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".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);}"
+    ],
+    f: [
+        ".fatbyko:focus{outline-width:2px;}",
+        ".f1grzc83:focus{outline-style:solid;}",
+        ".f19shzzi:focus{outline-color:transparent;}"
+    ],
+    m: [
+        [
+            "@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);}",
+        ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
+    ],
+    a: [
+        ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
+        ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
+        ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
+        ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
+    ]
+});
+const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    icon: {
+        B7ck84d: "f1ewtqcl",
+        sj55zd: "fxkbij4",
+        mc9l5x: "ftgm304",
+        qhf8xq: "f1euv43f",
+        Bkecrkj: "f1aehjj5",
+        Bo70h7d: "fvc9v3g"
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        B7iucu3: "f1cyfu5x"
+    },
+    small: {
+        Be2twd7: "f4ybsrx",
+        Bqenvij: "fd461yt",
+        j35jbq: [
+            "f13lnp83",
+            "f1i5nn0v"
+        ],
+        a9b677: "fjw5fx7"
+    },
+    medium: {
+        Be2twd7: "fe5j1ua",
+        Bqenvij: "fjamq6b",
+        j35jbq: [
+            "fnyteob",
+            "f1enpzzf"
+        ],
+        a9b677: "f64fuq3"
+    },
+    large: {
+        Be2twd7: "f1rt2boy",
+        Bqenvij: "frvgh55",
+        j35jbq: [
+            "f8b87gs",
+            "fedtrts"
+        ],
+        a9b677: "fq4mcun"
+    }
+}, {
+    d: [
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
+        ".ftgm304{display:block;}",
+        ".f1euv43f{position:absolute;}",
+        ".f1aehjj5{pointer-events:none;}",
+        ".fvc9v3g svg{display:block;}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f4ybsrx{font-size:16px;}",
+        ".fd461yt{height:16px;}",
+        ".f13lnp83{right:var(--spacingHorizontalSNudge);}",
+        ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}",
+        ".fjw5fx7{width:16px;}",
+        ".fe5j1ua{font-size:20px;}",
+        ".fjamq6b{height:20px;}",
+        ".fnyteob{right:var(--spacingHorizontalMNudge);}",
+        ".f1enpzzf{left:var(--spacingHorizontalMNudge);}",
+        ".f64fuq3{width:20px;}",
+        ".f1rt2boy{font-size:24px;}",
+        ".frvgh55{height:24px;}",
+        ".f8b87gs{right:var(--spacingHorizontalM);}",
+        ".fedtrts{left:var(--spacingHorizontalM);}",
+        ".fq4mcun{width:24px;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useSelectStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance } = state;
+    const disabled = state.select.disabled;
+    const invalid = `${state.select['aria-invalid']}` === 'true';
+    const iconStyles = useIconStyles();
+    const rootStyles = useRootStyles();
+    const selectStyles = useSelectStyles();
+    state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
+    state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-select/lib-commonjs/components/Select/useSelectStyles.styles.raw.js

@@ -0,0 +1,251 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    selectClassNames: function() {
+        return selectClassNames;
+    },
+    useSelectStyles_unstable: function() {
+        return useSelectStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const selectClassNames = {
+    root: 'fui-Select',
+    select: 'fui-Select__select',
+    icon: 'fui-Select__icon'
+};
+const iconSizes = {
+    small: '16px',
+    medium: '20px',
+    large: '24px'
+};
+//TODO: Should fieldHeights be a set of global design tokens or constants?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+/* Since the <select> element must span the full width and cannot have children,
+ * the right padding needs to be calculated from the sum of the following:
+ * 1. Field padding-right
+ * 2. Icon width
+ * 3. Content-icon spacing
+ * 4. Content inner padding
+ */ const paddingRight = {
+    small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge}
+    + ${iconSizes.small}
+    + ${_reacttheme.tokens.spacingHorizontalXXS}
+    + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge}
+    + ${iconSizes.medium}
+    + ${_reacttheme.tokens.spacingHorizontalXXS}
+    + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    large: `calc(${_reacttheme.tokens.spacingHorizontalM}
+    + ${iconSizes.large}
+    + ${_reacttheme.tokens.spacingHorizontalSNudge}
+    + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+};
+/* Left padding is calculated from the outer padding + inner content padding values
+ * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
+    small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+};
+/* end of shared values */ const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        position: 'relative',
+        '&::after': {
+            backgroundImage: `linear-gradient(
+        0deg,
+        ${_reacttheme.tokens.colorCompoundBrandStroke} 0%,
+        ${_reacttheme.tokens.colorCompoundBrandStroke} 50%,
+        transparent 50%,
+        transparent 100%
+      )`,
+            borderRadius: `0 0 ${_reacttheme.tokens.borderRadiusMedium} ${_reacttheme.tokens.borderRadiusMedium}`,
+            boxSizing: 'border-box',
+            content: '""',
+            height: _reacttheme.tokens.borderRadiusMedium,
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationUltraFast,
+            transitionDelay: _reacttheme.tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        '&:focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationNormal,
+            transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        }
+    }
+});
+const useSelectStyles = (0, _react.makeStyles)({
+    base: {
+        appearance: 'none',
+        border: '1px solid transparent',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        cursor: 'pointer',
+        flexGrow: 1,
+        maxWidth: '100%',
+        paddingBottom: 0,
+        paddingTop: 0,
+        ':focus': {
+            outlineWidth: '2px',
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        }
+    },
+    disabled: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        }
+    },
+    disabledUnderline: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorNeutralStrokeDisabled)
+    },
+    small: {
+        height: fieldHeights.small,
+        paddingLeft: paddingLeft.small,
+        paddingRight: paddingRight.small,
+        ..._reacttheme.typographyStyles.caption1
+    },
+    medium: {
+        height: fieldHeights.medium,
+        paddingLeft: paddingLeft.medium,
+        paddingRight: paddingRight.medium,
+        ..._reacttheme.typographyStyles.body1
+    },
+    large: {
+        height: fieldHeights.large,
+        paddingLeft: paddingLeft.large,
+        paddingRight: paddingRight.large,
+        ..._reacttheme.typographyStyles.body2
+    },
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        },
+        '&:active': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0',
+        '& option': {
+            // The transparent select bg means the option background must be set so the text is visible in dark themes
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+        }
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
+        }
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    icon: {
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralStrokeAccessible,
+        display: 'block',
+        position: 'absolute',
+        pointerEvents: 'none',
+        // the SVG must have display: block for accurate positioning
+        // otherwise an extra inline space is inserted after the svg element
+        '& svg': {
+            display: 'block'
+        }
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    small: {
+        fontSize: iconSizes.small,
+        height: iconSizes.small,
+        right: _reacttheme.tokens.spacingHorizontalSNudge,
+        width: iconSizes.small
+    },
+    medium: {
+        fontSize: iconSizes.medium,
+        height: iconSizes.medium,
+        right: _reacttheme.tokens.spacingHorizontalMNudge,
+        width: iconSizes.medium
+    },
+    large: {
+        fontSize: iconSizes.large,
+        height: iconSizes.large,
+        right: _reacttheme.tokens.spacingHorizontalM,
+        width: iconSizes.large
+    }
+});
+const useSelectStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance } = state;
+    const disabled = state.select.disabled;
+    const invalid = `${state.select['aria-invalid']}` === 'true';
+    const iconStyles = useIconStyles();
+    const rootStyles = useRootStyles();
+    const selectStyles = useSelectStyles();
+    state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
+    state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-select/lib-commonjs/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Select: function() {
+        return _Select.Select;
+    },
+    renderSelect_unstable: function() {
+        return _Select.renderSelect_unstable;
+    },
+    selectClassNames: function() {
+        return _Select.selectClassNames;
+    },
+    useSelectBase_unstable: function() {
+        return _Select.useSelectBase_unstable;
+    },
+    useSelectStyles_unstable: function() {
+        return _Select.useSelectStyles_unstable;
+    },
+    useSelect_unstable: function() {
+        return _Select.useSelect_unstable;
+    }
+});
+const _Select = require("./Select");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelectBase_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eAENE,6BAAqB;;;eADrBD,wBAAgB;;;eAGhBG,8BAAsB;;;eADtBD,gCAAwB;;;eAExBE,0BAAkB;;;wBACb,WAAW"}