feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-input/lib-commonjs/components/Input/Input.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Input", {
+    enumerable: true,
+    get: function() {
+        return Input;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useInput = require("./useInput");
+const _renderInput = require("./renderInput");
+const _useInputStylesstyles = require("./useInputStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Input = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useInput.useInput_unstable)(props, ref);
+    (0, _useInputStylesstyles.useInputStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useInputStyles_unstable')(state);
+    return (0, _renderInput.renderInput_unstable)(state);
+});
+Input.displayName = 'Input';

node_modules/@fluentui/react-input/lib-commonjs/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","Input","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0BACG,aAAa;6BACV,gBAAgB;sCACb,0BAA0B;qCAGtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQR,2BAAAA,EAAkBM,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOP,iCAAAA,EAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type InputSlots = {\n  /**\n   * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n   * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Input>`.\n   * All other top-level native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n   *\n   * This is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n   * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will\n   * also go here.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /** Element before the input text, within the input border */\n  contentBefore?: Slot<'span'>;\n\n  /** Element after the input text, within the input border */\n  contentAfter?: Slot<'span'>;\n};\n\nexport type InputProps = Omit<\n  ComponentProps<Partial<InputSlots>, 'input'>,\n  // `children` is unsupported. The rest of these native props have customized definitions.\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> & {\n  /** Input can't have children. */\n  children?: never;\n\n  /**\n   * Size of the input (changes the font size and spacing).\n   * @default 'medium'\n   */\n  // This name overlaps with the native `size` prop, but that prop isn't very useful in practice\n  // (we could add `htmlSize` for the native functionality if someone needs it)\n  // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Controls the colors and borders of the input.\n   * @default 'outline'\n   *\n   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n   */\n  appearance?:\n    | 'outline'\n    | 'underline'\n    | 'filled-darker'\n    | 'filled-lighter'\n    | 'filled-darker-shadow'\n    | 'filled-lighter-shadow';\n\n  /**\n   * Default value of the input. Provide this if the input should be an uncontrolled component\n   * which tracks its current state internally; otherwise, use `value`.\n   *\n   * (This prop is mutually exclusive with `value`.)\n   */\n  defaultValue?: string;\n\n  /**\n   * Current value of the input. Provide this if the input is a controlled component where you\n   * are maintaining its current state; otherwise, use `defaultValue`.\n   *\n   * (This prop is mutually exclusive with `defaultValue`.)\n   */\n  value?: string;\n\n  /**\n   * Called when the user changes the input's value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;\n\n  /**\n   * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\n   * based on the type of value the user will enter.\n   *\n   * Note that no custom styling is currently applied for alternative types, and some types may\n   * activate browser-default styling which does not match the Fluent design language.\n   *\n   * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n   * `<input>` element instead.)\n   * @default 'text'\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'datetime-local'\n    | 'month'\n    | 'number'\n    | 'time'\n    | 'week';\n};\n\n/**\n * Input props without design-specific props (appearance, size).\n * Use this when building a base input that is unstyled or uses a custom design system.\n */\nexport type InputBaseProps = Omit<InputProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Input.\n */\nexport type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;\n\n/**\n * Input state without design-specific state (appearance, size).\n */\nexport type InputBaseState = Omit<InputState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a user changes the input's value.\n */\nexport type InputOnChangeData = {\n  /** Updated input value from the user */\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-input/lib-commonjs/components/Input/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, {
+    Input: function() {
+        return _Input.Input;
+    },
+    inputClassNames: function() {
+        return _useInputStylesstyles.inputClassNames;
+    },
+    renderInput_unstable: function() {
+        return _renderInput.renderInput_unstable;
+    },
+    useInputBase_unstable: function() {
+        return _useInput.useInputBase_unstable;
+    },
+    useInputStyles_unstable: function() {
+        return _useInputStylesstyles.useInputStyles_unstable;
+    },
+    useInput_unstable: function() {
+        return _useInput.useInput_unstable;
+    }
+});
+const _Input = require("./Input");
+const _renderInput = require("./renderInput");
+const _useInput = require("./useInput");
+const _useInputStylesstyles = require("./useInputStyles.styles");

node_modules/@fluentui/react-input/lib-commonjs/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type {\n  InputBaseProps,\n  InputBaseState,\n  InputOnChangeData,\n  InputProps,\n  InputSlots,\n  InputState,\n} from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable, useInputBase_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","useInputBase_unstable","inputClassNames","useInputStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAWLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAVJ,UAAU;6BASK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

node_modules/@fluentui/react-input/lib-commonjs/components/Input/renderInput.js

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

node_modules/@fluentui/react-input/lib-commonjs/components/Input/renderInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/renderInput.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 { InputBaseState, InputSlots } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputBaseState): JSXElement => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInput_unstable","state","root","contentBefore","input","contentAfter"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IACxB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,aAAa,IAAA,WAAA,GAAI,mBAAA,EAACF,MAAME,aAAa,EAAA,CAAA;8BAC5C,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXH,MAAMI,YAAY,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,YAAY,EAAA,CAAA;;;AAGhD,EAAE"}

node_modules/@fluentui/react-input/lib-commonjs/components/Input/useInput.js

@@ -0,0 +1,96 @@
+'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, {
+    useInputBase_unstable: function() {
+        return useInputBase_unstable;
+    },
+    useInput_unstable: function() {
+        return useInput_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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const useInput_unstable = (props, ref)=>{
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
+    var _overrides_inputDefaultAppearance;
+    const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
+    if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
+        // eslint-disable-next-line no-console
+        console.error("The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" + ' future.');
+    }
+    const state = useInputBase_unstable(baseProps, ref);
+    return {
+        size,
+        appearance,
+        ...state
+    };
+};
+const useInputBase_unstable = (props, ref)=>{
+    const { onChange } = props;
+    const [value, setValue] = (0, _reactutilities.useControllableState)({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: ''
+    });
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'onChange',
+            'value',
+            'defaultValue'
+        ]
+    });
+    const state = {
+        components: {
+            root: 'span',
+            input: 'input',
+            contentBefore: 'span',
+            contentAfter: 'span'
+        },
+        input: _reactutilities.slot.always(props.input, {
+            defaultProps: {
+                type: 'text',
+                ref,
+                ...nativeProps.primary
+            },
+            elementType: 'input'
+        }),
+        contentAfter: _reactutilities.slot.optional(props.contentAfter, {
+            elementType: 'span'
+        }),
+        contentBefore: _reactutilities.slot.optional(props.contentBefore, {
+            elementType: 'span'
+        }),
+        root: _reactutilities.slot.always(props.root, {
+            defaultProps: nativeProps.root,
+            elementType: 'span'
+        })
+    };
+    state.input.value = value;
+    state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
+        const newValue = ev.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            value: newValue
+        });
+        setValue(newValue);
+    });
+    return state;
+};

node_modules/@fluentui/react-input/lib-commonjs/components/Input/useInputStyles.styles.js

@@ -0,0 +1,491 @@
+'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, {
+    inputClassNames: function() {
+        return inputClassNames;
+    },
+    useInputStyles_unstable: function() {
+        return useInputStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const inputClassNames = {
+    root: 'fui-Input',
+    input: 'fui-Input__input',
+    contentBefore: 'fui-Input__contentBefore',
+    contentAfter: 'fui-Input__contentAfter'
+};
+// TODO(sharing) should these be shared somewhere?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
+// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
+const horizontalPadding = {
+    root: {
+        small: _reacttheme.tokens.spacingHorizontalSNudge,
+        medium: _reacttheme.tokens.spacingHorizontalMNudge,
+        large: _reacttheme.tokens.spacingHorizontalM
+    },
+    input: {
+        small: _reacttheme.tokens.spacingHorizontalXXS,
+        medium: _reacttheme.tokens.spacingHorizontalXXS,
+        large: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    combined: {
+        small: _reacttheme.tokens.spacingHorizontalS,
+        medium: _reacttheme.tokens.spacingHorizontalM,
+        large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+    }
+};
+const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1oeeo9n", "r9sxh5", {
+    r: [
+        ".r1oeeo9n{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}",
+        ".r1oeeo9n::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
+        ".r1oeeo9n:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
+        ".r1oeeo9n:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
+        ".r1oeeo9n:focus-within{outline:2px solid transparent;}",
+        ".r9sxh5{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}",
+        ".r9sxh5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
+        ".r9sxh5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
+        ".r9sxh5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
+        ".r9sxh5:focus-within{outline:2px solid transparent;}"
+    ],
+    s: [
+        "@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r9sxh5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r9sxh5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
+    ]
+});
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        sshi5w: "f1pha7fy",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    medium: {},
+    large: {
+        sshi5w: "f1w5jphr",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "faaz57k",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "f1eyhf9v"
+    },
+    outline: {},
+    outlineInteractive: {
+        Bgoe8wy: "fvcxoqz",
+        Bwzppfd: [
+            "f1ub3y4t",
+            "f1m52nbi"
+        ],
+        oetu4i: "f1l4zc64",
+        gg5e9n: [
+            "f1m52nbi",
+            "f1ub3y4t"
+        ],
+        Drbcw7: "f8vnjqi",
+        udz0bu: [
+            "fz1etlk",
+            "f1hc16gm"
+        ],
+        Be8ivqh: "f1klwx88",
+        ofdepl: [
+            "f1hc16gm",
+            "fz1etlk"
+        ]
+    },
+    underline: {
+        De3pzq: "f1c21dwh",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fokr779",
+        icvyot: "f1ern45e",
+        vrafjx: [
+            "f1n71otn",
+            "f1deefiw"
+        ],
+        wvpqe5: [
+            "f1deefiw",
+            "f1n71otn"
+        ],
+        Eqx8gd: [
+            "f1n6gb5g",
+            "f15yvnhg"
+        ],
+        B1piin3: [
+            "f15yvnhg",
+            "f1n6gb5g"
+        ]
+    },
+    underlineInteractive: {
+        oetu4i: "f1l4zc64",
+        Be8ivqh: "f1klwx88",
+        d9w3h3: 0,
+        B3778ie: 0,
+        B4j8arr: 0,
+        Bl18szs: 0,
+        Blrzh8d: "f2ale1x"
+    },
+    filled: {
+        g2u3we: "fghlq4f",
+        h3c5rm: [
+            "f1gn591s",
+            "fjscplz"
+        ],
+        B9xav0g: "fb073pr",
+        zhjwy3: [
+            "fjscplz",
+            "f1gn591s"
+        ]
+    },
+    filledInteractive: {
+        q7v0qe: "ftmjh5b",
+        kmh5ft: [
+            "f17blpuu",
+            "fsrcdbj"
+        ],
+        nagaa4: "f1tpwn32",
+        B1yhkcb: [
+            "fsrcdbj",
+            "f17blpuu"
+        ]
+    },
+    invalid: {
+        tvckwq: "fs4k3qj",
+        gk2u95: [
+            "fcee079",
+            "fmyw78r"
+        ],
+        hhx65j: "f1fgmyf4",
+        Bxowmz0: [
+            "fmyw78r",
+            "fcee079"
+        ]
+    },
+    "filled-darker": {
+        De3pzq: "f16xq7d1"
+    },
+    "filled-lighter": {
+        De3pzq: "fxugw4r"
+    },
+    "filled-darker-shadow": {
+        De3pzq: "f16xq7d1",
+        E5pizo: "fyed02w"
+    },
+    "filled-lighter-shadow": {
+        De3pzq: "fxugw4r",
+        E5pizo: "fyed02w"
+    },
+    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"
+        ],
+        Bsft5z2: "fhr9occ",
+        Bduesf4: "f99w1ws"
+    },
+    smallWithContentBefore: {
+        uwmqm3: [
+            "fk8j09s",
+            "fdw0yi8"
+        ]
+    },
+    smallWithContentAfter: {
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ]
+    },
+    mediumWithContentBefore: {
+        uwmqm3: [
+            "f1ng84yb",
+            "f11gcy0p"
+        ]
+    },
+    mediumWithContentAfter: {
+        z189sj: [
+            "f11gcy0p",
+            "f1ng84yb"
+        ]
+    },
+    largeWithContentBefore: {
+        uwmqm3: [
+            "f1uw59to",
+            "fw5db7e"
+        ]
+    },
+    largeWithContentAfter: {
+        z189sj: [
+            "fw5db7e",
+            "f1uw59to"
+        ]
+    }
+}, {
+    d: [
+        ".f1pha7fy{min-height:24px;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1w5jphr{min-height:40px;}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        [
+            ".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        [
+            ".fokr779{border-radius:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1ern45e{border-top-style:none;}",
+        ".f1n71otn{border-right-style:none;}",
+        ".f1deefiw{border-left-style:none;}",
+        ".f1n6gb5g::after{left:0;}",
+        ".f15yvnhg::after{right:0;}",
+        [
+            ".f2ale1x::after{border-radius:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
+        ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
+        ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
+        ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
+        ".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);}",
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        ".fyed02w{box-shadow:var(--shadow2);}",
+        ".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);}",
+        ".fhr9occ::after{content:unset;}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
+        ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
+        ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
+        ".fw5db7e{padding-right:var(--spacingHorizontalM);}"
+    ],
+    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);}",
+        ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}",
+        ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}",
+        ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}",
+        ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"
+    ],
+    a: [
+        ".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}",
+        ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}",
+        ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}",
+        ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
+    ],
+    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)"
+            }
+        ]
+    ],
+    w: [
+        ".f99w1ws:focus-within{outline-style:none;}"
+    ]
+});
+const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r12stul0", null, [
+    ".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}",
+    ".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"
+]);
+const useInputElementStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ]
+    },
+    medium: {},
+    large: {
+        uwmqm3: [
+            "fnphzt9",
+            "flt1dlf"
+        ],
+        z189sj: [
+            "flt1dlf",
+            "fnphzt9"
+        ]
+    },
+    smallWithContentBefore: {
+        uwmqm3: [
+            "fgiv446",
+            "ffczdla"
+        ]
+    },
+    smallWithContentAfter: {
+        z189sj: [
+            "ffczdla",
+            "fgiv446"
+        ]
+    },
+    mediumWithContentBefore: {
+        uwmqm3: [
+            "fgiv446",
+            "ffczdla"
+        ]
+    },
+    mediumWithContentAfter: {
+        z189sj: [
+            "ffczdla",
+            "fgiv446"
+        ]
+    },
+    largeWithContentBefore: {
+        uwmqm3: [
+            "fk8j09s",
+            "fdw0yi8"
+        ]
+    },
+    largeWithContentAfter: {
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ]
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        De3pzq: "f1c21dwh",
+        Bceei9c: "fdrzuqr",
+        yvdlaj: "fahhnxm"
+    }
+}, {
+    d: [
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+        ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+        ".fgiv446{padding-left:var(--spacingHorizontalXXS);}",
+        ".ffczdla{padding-right:var(--spacingHorizontalXXS);}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".fdrzuqr{cursor:not-allowed;}",
+        ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
+        ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
+    ]
+});
+const useContentClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1572tok", null, [
+    ".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}",
+    ".r1572tok>svg{font-size:20px;}"
+]);
+const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
+    disabled: {
+        sj55zd: "f1s2aq7o"
+    },
+    small: {
+        Duoase: "f3qv9w"
+    },
+    medium: {},
+    large: {
+        Duoase: "f16u2scb"
+    }
+}, {
+    d: [
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f3qv9w>svg{font-size:16px;}",
+        ".f16u2scb>svg{font-size:24px;}"
+    ]
+});
+const useInputStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance } = state;
+    const disabled = state.input.disabled;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputElementStyles();
+    const contentStyles = useContentStyles();
+    state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
+    const contentClasses = [
+        useContentClassName(),
+        disabled && contentStyles.disabled,
+        contentStyles[size]
+    ];
+    if (state.contentBefore) {
+        state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-input/lib-commonjs/components/Input/useInputStyles.styles.raw.js

@@ -0,0 +1,343 @@
+'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, {
+    inputClassNames: function() {
+        return inputClassNames;
+    },
+    useInputStyles_unstable: function() {
+        return useInputStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const inputClassNames = {
+    root: 'fui-Input',
+    input: 'fui-Input__input',
+    contentBefore: 'fui-Input__contentBefore',
+    contentAfter: 'fui-Input__contentAfter'
+};
+// TODO(sharing) should these be shared somewhere?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
+// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
+const horizontalPadding = {
+    root: {
+        small: _reacttheme.tokens.spacingHorizontalSNudge,
+        medium: _reacttheme.tokens.spacingHorizontalMNudge,
+        large: _reacttheme.tokens.spacingHorizontalM
+    },
+    input: {
+        small: _reacttheme.tokens.spacingHorizontalXXS,
+        medium: _reacttheme.tokens.spacingHorizontalXXS,
+        large: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    combined: {
+        small: _reacttheme.tokens.spacingHorizontalS,
+        medium: _reacttheme.tokens.spacingHorizontalM,
+        large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+    }
+};
+const useRootClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    gap: _reacttheme.tokens.spacingHorizontalXXS,
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    position: 'relative',
+    boxSizing: 'border-box',
+    verticalAlign: 'middle',
+    // size: medium (default)
+    minHeight: fieldHeights.medium,
+    ..._reacttheme.typographyStyles.body1,
+    // appearance: outline (default)
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible,
+    // This is all for the bottom focus border.
+    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
+    '::after': {
+        boxSizing: 'border-box',
+        content: '""',
+        position: 'absolute',
+        left: '-1px',
+        bottom: '-1px',
+        right: '-1px',
+        // Maintaining the correct corner radius:
+        // Use the whole border-radius as the height and only put radii on the bottom corners.
+        // (Otherwise the radius would be automatically reduced to fit available space.)
+        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+        height: `max(2px, ${_reacttheme.tokens.borderRadiusMedium})`,
+        borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
+        borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+        // Flat 2px border:
+        // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
+        // (This could be done without trimming using `background: linear-gradient(...)`, but using
+        // borderBottom makes it easier for people to override the color if needed.)
+        borderBottom: `2px solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+        clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+        // Animation for focus OUT
+        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': {
+        // Animation for focus IN
+        transform: 'scaleX(1)',
+        transitionProperty: 'transform',
+        transitionDuration: _reacttheme.tokens.durationNormal,
+        transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms',
+            transitionDelay: '0.01ms'
+        }
+    },
+    ':focus-within:active::after': {
+        // This is if the user clicks the field again while it's already focused
+        borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
+    },
+    ':focus-within': {
+        outline: '2px solid transparent'
+    }
+});
+const useRootStyles = (0, _react.makeStyles)({
+    small: {
+        minHeight: fieldHeights.small,
+        ..._reacttheme.typographyStyles.caption1
+    },
+    medium: {},
+    large: {
+        minHeight: fieldHeights.large,
+        ..._reacttheme.typographyStyles.body2,
+        gap: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    outline: {},
+    outlineInteractive: {
+        ':hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderRadius: '0',
+        // border is specified in rootBaseStyles, but we only want a bottom border here
+        borderTopStyle: 'none',
+        borderRightStyle: 'none',
+        borderLeftStyle: 'none',
+        // Make the focus underline (::after) match the width of the bottom border
+        '::after': {
+            left: 0,
+            right: 0
+        }
+    },
+    underlineInteractive: {
+        ':hover': {
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '::after': {
+            // remove rounded corners from focus underline
+            borderRadius: '0'
+        }
+    },
+    filled: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+    },
+    filledInteractive: {
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':hover,:focus-within': {
+            // also handles pressed border color (:active)
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-darker-shadow': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        boxShadow: _reacttheme.tokens.shadow2
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-lighter-shadow': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        boxShadow: _reacttheme.tokens.shadow2
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        },
+        // remove the focus border
+        '::after': {
+            content: 'unset'
+        },
+        // remove the focus outline
+        ':focus-within': {
+            outlineStyle: 'none'
+        }
+    },
+    smallWithContentBefore: {
+        paddingLeft: horizontalPadding.root.small
+    },
+    smallWithContentAfter: {
+        paddingRight: horizontalPadding.root.small
+    },
+    mediumWithContentBefore: {
+        paddingLeft: horizontalPadding.root.medium
+    },
+    mediumWithContentAfter: {
+        paddingRight: horizontalPadding.root.medium
+    },
+    largeWithContentBefore: {
+        paddingLeft: horizontalPadding.root.large
+    },
+    largeWithContentAfter: {
+        paddingRight: horizontalPadding.root.large
+    }
+});
+const useInputClassName = (0, _react.makeResetStyles)({
+    alignSelf: 'stretch',
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    minWidth: 0,
+    borderStyle: 'none',
+    padding: `0 ${horizontalPadding.combined.medium}`,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    // Use literal "transparent" (not from the theme) to always let the color from the root show through
+    backgroundColor: 'transparent',
+    '::placeholder': {
+        color: _reacttheme.tokens.colorNeutralForeground4,
+        opacity: 1
+    },
+    outlineStyle: 'none',
+    // Inherit typography styles from root
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit'
+});
+const useInputElementStyles = (0, _react.makeStyles)({
+    small: {
+        paddingLeft: horizontalPadding.combined.small,
+        paddingRight: horizontalPadding.combined.small
+    },
+    medium: {},
+    large: {
+        paddingLeft: horizontalPadding.combined.large,
+        paddingRight: horizontalPadding.combined.large
+    },
+    smallWithContentBefore: {
+        paddingLeft: horizontalPadding.input.small
+    },
+    smallWithContentAfter: {
+        paddingRight: horizontalPadding.input.small
+    },
+    mediumWithContentBefore: {
+        paddingLeft: horizontalPadding.input.medium
+    },
+    mediumWithContentAfter: {
+        paddingRight: horizontalPadding.input.medium
+    },
+    largeWithContentBefore: {
+        paddingLeft: horizontalPadding.input.large
+    },
+    largeWithContentAfter: {
+        paddingRight: horizontalPadding.input.large
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useContentClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    display: 'flex',
+    // special case styling for icons (most common case) to ensure they're centered vertically
+    // size: medium (default)
+    '> svg': {
+        fontSize: '20px'
+    }
+});
+const useContentStyles = (0, _react.makeStyles)({
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {},
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+const useInputStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance } = state;
+    const disabled = state.input.disabled;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputElementStyles();
+    const contentStyles = useContentStyles();
+    state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
+    const contentClasses = [
+        useContentClassName(),
+        disabled && contentStyles.disabled,
+        contentStyles[size]
+    ];
+    if (state.contentBefore) {
+        state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
+    }
+    return state;
+};