feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-input/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-input
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

node_modules/@fluentui/react-input/README.md

@@ -0,0 +1,35 @@
+# @fluentui/react-input
+
+**React Input components for [Fluent UI React](https://react.fluentui.dev)**
+
+Inputs give people a way to enter and edit text.
+
+### Usage
+
+Import Input:
+
+```js
+import { Input } from '@fluentui/react-components';
+```
+
+#### Examples
+
+```jsx
+<Input defaultValue="Hello, World!" />
+<Input value={value} onChange={onInputChange} />
+```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-input` from the list.
+
+### Specification
+
+See [Spec.md](./Spec.md)
+
+### Upgrade Guide
+
+If you're upgrading to Fluent UI v9 see the upgrade guide in [Storybook](https://react.fluentui.dev/) under Concepts > Upgrading.

node_modules/@fluentui/react-input/dist/index.d.ts

@@ -0,0 +1,140 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * The Input component allows people to enter and edit text.
+ */
+export declare const Input: ForwardRefComponent<InputProps>;
+
+/**
+ * Input props without design-specific props (appearance, size).
+ * Use this when building a base input that is unstyled or uses a custom design system.
+ */
+export declare type InputBaseProps = Omit<InputProps, 'appearance' | 'size'>;
+
+/**
+ * Input state without design-specific state (appearance, size).
+ */
+export declare type InputBaseState = Omit<InputState, 'appearance' | 'size'>;
+
+export declare const inputClassNames: SlotClassNames<InputSlots>;
+
+/**
+ * Data passed to the `onChange` callback when a user changes the input's value.
+ */
+export declare type InputOnChangeData = {
+    /** Updated input value from the user */
+    value: string;
+};
+
+export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
+    /** Input can't have children. */
+    children?: never;
+    /**
+     * Size of the input (changes the font size and spacing).
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Controls the colors and borders of the input.
+     * @default 'outline'
+     *
+     * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
+     */
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
+    /**
+     * Default value of the input. Provide this if the input should be an uncontrolled component
+     * which tracks its current state internally; otherwise, use `value`.
+     *
+     * (This prop is mutually exclusive with `value`.)
+     */
+    defaultValue?: string;
+    /**
+     * Current value of the input. Provide this if the input is a controlled component where you
+     * are maintaining its current state; otherwise, use `defaultValue`.
+     *
+     * (This prop is mutually exclusive with `defaultValue`.)
+     */
+    value?: string;
+    /**
+     * Called when the user changes the input's value.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    /**
+     * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
+     * based on the type of value the user will enter.
+     *
+     * Note that no custom styling is currently applied for alternative types, and some types may
+     * activate browser-default styling which does not match the Fluent design language.
+     *
+     * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an
+     * `<input>` element instead.)
+     * @default 'text'
+     */
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'number' | 'time' | 'week';
+};
+
+export declare type InputSlots = {
+    /**
+     * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
+     * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Input>`.
+     * All other top-level native props will be applied to the primary slot, `input`.
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
+     *
+     * This is the "primary" slot, so native props specified directly on the `<Input>` will go here
+     * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
+     * also go here.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /** Element before the input text, within the input border */
+    contentBefore?: Slot<'span'>;
+    /** Element after the input text, within the input border */
+    contentAfter?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering Input.
+ */
+export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
+
+/**
+ * Render the final JSX of Input
+ */
+export declare const renderInput_unstable: (state: InputBaseState) => JSXElement;
+
+/**
+ * Create the state required to render Input.
+ *
+ * The returned state can be modified with hooks such as useInputStyles_unstable,
+ * before being passed to renderInput_unstable.
+ *
+ * @param props - props from this instance of Input
+ * @param ref - reference to `<input>` element of Input
+ */
+export declare const useInput_unstable: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState;
+
+/**
+ * Base hook for Input component, which manages state related to controlled/uncontrolled value,
+ * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).
+ *
+ * @param props - User provided props to the Input component.
+ * @param ref - User provided ref to be passed to the Input component.
+ */
+export declare const useInputBase_unstable: (props: InputBaseProps, ref: React_2.Ref<HTMLInputElement>) => InputBaseState;
+
+/**
+ * Apply styling to the Input slots based on the state
+ */
+export declare const useInputStyles_unstable: (state: InputState) => InputState;
+
+export { }

node_modules/@fluentui/react-input/lib-commonjs/Input.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, {
+    Input: function() {
+        return _index.Input;
+    },
+    inputClassNames: function() {
+        return _index.inputClassNames;
+    },
+    renderInput_unstable: function() {
+        return _index.renderInput_unstable;
+    },
+    useInputBase_unstable: function() {
+        return _index.useInputBase_unstable;
+    },
+    useInputStyles_unstable: function() {
+        return _index.useInputStyles_unstable;
+    },
+    useInput_unstable: function() {
+        return _index.useInput_unstable;
+    }
+});
+const _index = require("./components/Input/index");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Input.ts"],"sourcesContent":["export type {\n  InputOnChangeData,\n  InputProps,\n  InputSlots,\n  InputState,\n  InputBaseProps,\n  InputBaseState,\n} from './components/Input/index';\nexport {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n  useInputBase_unstable,\n} from './components/Input/index';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","useInputBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

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;
+};

node_modules/@fluentui/react-input/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, {
+    Input: function() {
+        return _Input.Input;
+    },
+    inputClassNames: function() {
+        return _Input.inputClassNames;
+    },
+    renderInput_unstable: function() {
+        return _Input.renderInput_unstable;
+    },
+    useInputBase_unstable: function() {
+        return _Input.useInputBase_unstable;
+    },
+    useInputStyles_unstable: function() {
+        return _Input.useInputStyles_unstable;
+    },
+    useInput_unstable: function() {
+        return _Input.useInput_unstable;
+    }
+});
+const _Input = require("./Input");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n  useInputBase_unstable,\n} from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState, InputBaseProps, InputBaseState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","useInputBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU"}

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

@@ -0,0 +1 @@
+export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, useInputBase_unstable } from './components/Input/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Input.ts"],"sourcesContent":["export type {\n  InputOnChangeData,\n  InputProps,\n  InputSlots,\n  InputState,\n  InputBaseProps,\n  InputBaseState,\n} from './components/Input/index';\nexport {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n  useInputBase_unstable,\n} from './components/Input/index';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","useInputBase_unstable"],"mappings":"AAQA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useInput_unstable } from './useInput';
+import { renderInput_unstable } from './renderInput';
+import { useInputStyles_unstable } from './useInputStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The Input component allows people to enter and edit text.
+ */ export const Input = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInput_unstable(props, ref);
+    useInputStyles_unstable(state);
+    useCustomStyleHook_unstable('useInputStyles_unstable')(state);
+    return renderInput_unstable(state);
+});
+Input.displayName = 'Input';

node_modules/@fluentui/react-input/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOP,qBAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

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

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

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

@@ -0,0 +1,4 @@
+export { Input } from './Input';
+export { renderInput_unstable } from './renderInput';
+export { useInput_unstable, useInputBase_unstable } from './useInput';
+export { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';

node_modules/@fluentui/react-input/lib/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":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAShC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

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

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

node_modules/@fluentui/react-input/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IACxB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;;;AAGhD,EAAE"}

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

@@ -0,0 +1,91 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
+import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render Input.
+ *
+ * The returned state can be modified with hooks such as useInputStyles_unstable,
+ * before being passed to renderInput_unstable.
+ *
+ * @param props - props from this instance of Input
+ * @param ref - reference to `<input>` element of Input
+ */ export const useInput_unstable = (props, ref)=>{
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const overrides = useOverrides();
+    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
+    };
+};
+/**
+ * Base hook for Input component, which manages state related to controlled/uncontrolled value,
+ * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).
+ *
+ * @param props - User provided props to the Input component.
+ * @param ref - User provided ref to be passed to the Input component.
+ */ export const useInputBase_unstable = (props, ref)=>{
+    const { onChange } = props;
+    const [value, setValue] = useControllableState({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: ''
+    });
+    const nativeProps = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'onChange',
+            'value',
+            'defaultValue'
+        ]
+    });
+    const state = {
+        components: {
+            root: 'span',
+            input: 'input',
+            contentBefore: 'span',
+            contentAfter: 'span'
+        },
+        input: slot.always(props.input, {
+            defaultProps: {
+                type: 'text',
+                ref,
+                ...nativeProps.primary
+            },
+            elementType: 'input'
+        }),
+        contentAfter: slot.optional(props.contentAfter, {
+            elementType: 'span'
+        }),
+        contentBefore: slot.optional(props.contentBefore, {
+            elementType: 'span'
+        }),
+        root: slot.always(props.root, {
+            defaultProps: nativeProps.root,
+            elementType: 'span'
+        })
+    };
+    state.input.value = value;
+    state.input.onChange = 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/components/Input/useInputStyles.styles.js

@@ -0,0 +1,254 @@
+'use client';
+
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+export 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: tokens.spacingHorizontalSNudge,
+    medium: tokens.spacingHorizontalMNudge,
+    large: tokens.spacingHorizontalM
+  },
+  input: {
+    small: tokens.spacingHorizontalXXS,
+    medium: tokens.spacingHorizontalXXS,
+    large: tokens.spacingHorizontalSNudge
+  },
+  combined: {
+    small: tokens.spacingHorizontalS,
+    medium: tokens.spacingHorizontalM,
+    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
+  }
+};
+const useRootClassName = /*#__PURE__*/__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__*/__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__*/__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__*/__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__*/__resetStyles("r1572tok", null, [".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}", ".r1572tok>svg{font-size:20px;}"]);
+const useContentStyles = /*#__PURE__*/__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;}"]
+});
+/**
+ * Apply styling to the Input slots based on the state
+ */
+export 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 = 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 = 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 = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
+  }
+  if (state.contentAfter) {
+    state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,331 @@
+'use client';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+export 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: tokens.spacingHorizontalSNudge,
+        medium: tokens.spacingHorizontalMNudge,
+        large: tokens.spacingHorizontalM
+    },
+    input: {
+        small: tokens.spacingHorizontalXXS,
+        medium: tokens.spacingHorizontalXXS,
+        large: tokens.spacingHorizontalSNudge
+    },
+    combined: {
+        small: tokens.spacingHorizontalS,
+        medium: tokens.spacingHorizontalM,
+        large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
+    }
+};
+const useRootClassName = makeResetStyles({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    gap: tokens.spacingHorizontalXXS,
+    borderRadius: tokens.borderRadiusMedium,
+    position: 'relative',
+    boxSizing: 'border-box',
+    verticalAlign: 'middle',
+    // size: medium (default)
+    minHeight: fieldHeights.medium,
+    ...typographyStyles.body1,
+    // appearance: outline (default)
+    backgroundColor: tokens.colorNeutralBackground1,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderBottomColor: 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, ${tokens.borderRadiusMedium})`,
+        borderBottomLeftRadius: tokens.borderRadiusMedium,
+        borderBottomRightRadius: 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 ${tokens.colorCompoundBrandStroke}`,
+        clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+        // Animation for focus OUT
+        transform: 'scaleX(0)',
+        transitionProperty: 'transform',
+        transitionDuration: tokens.durationUltraFast,
+        transitionDelay: tokens.curveAccelerateMid,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms',
+            transitionDelay: '0.01ms'
+        }
+    },
+    ':focus-within::after': {
+        // Animation for focus IN
+        transform: 'scaleX(1)',
+        transitionProperty: 'transform',
+        transitionDuration: tokens.durationNormal,
+        transitionDelay: tokens.curveDecelerateMid,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms',
+            transitionDelay: '0.01ms'
+        }
+    },
+    ':focus-within:active::after': {
+        // This is if the user clicks the field again while it's already focused
+        borderBottomColor: tokens.colorCompoundBrandStrokePressed
+    },
+    ':focus-within': {
+        outline: '2px solid transparent'
+    }
+});
+const useRootStyles = makeStyles({
+    small: {
+        minHeight: fieldHeights.small,
+        ...typographyStyles.caption1
+    },
+    medium: {
+    },
+    large: {
+        minHeight: fieldHeights.large,
+        ...typographyStyles.body2,
+        gap: tokens.spacingHorizontalSNudge
+    },
+    outline: {
+    },
+    outlineInteractive: {
+        ':hover': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: 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: tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '::after': {
+            // remove rounded corners from focus underline
+            borderRadius: '0'
+        }
+    },
+    filled: {
+        ...shorthands.borderColor(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)
+            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+        }
+    },
+    'filled-darker': {
+        backgroundColor: tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: tokens.colorNeutralBackground1
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-darker-shadow': {
+        backgroundColor: tokens.colorNeutralBackground3,
+        boxShadow: tokens.shadow2
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-lighter-shadow': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: tokens.shadow2
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ...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 = makeResetStyles({
+    alignSelf: 'stretch',
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    minWidth: 0,
+    borderStyle: 'none',
+    padding: `0 ${horizontalPadding.combined.medium}`,
+    color: tokens.colorNeutralForeground1,
+    // Use literal "transparent" (not from the theme) to always let the color from the root show through
+    backgroundColor: 'transparent',
+    '::placeholder': {
+        color: tokens.colorNeutralForeground4,
+        opacity: 1
+    },
+    outlineStyle: 'none',
+    // Inherit typography styles from root
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit'
+});
+const useInputElementStyles = 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: tokens.colorNeutralForegroundDisabled,
+        backgroundColor: tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useContentClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    color: 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 = makeStyles({
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {
+    },
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+/**
+ * Apply styling to the Input slots based on the state
+ */ export 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 = 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 = 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 = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-input/lib/index.js

@@ -0,0 +1 @@
+export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, useInputBase_unstable } from './Input';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n  useInputBase_unstable,\n} from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState, InputBaseProps, InputBaseState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","useInputBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU"}

node_modules/@fluentui/react-input/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@fluentui/react-input",
+  "version": "9.8.1",
+  "description": "Fluent UI React Input component",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui/react-field": "^9.5.0",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@griffel/react": "^1.5.32",
+    "@swc/helpers": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
+}