Initial commit

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

@@ -0,0 +1,14 @@
+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":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,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 * State used in rendering Input.\n */\nexport type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;\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"],"rangeMappings":"","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 } 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 { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","inputClassNames","useInputStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,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 { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;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,78 @@
+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', onChange } = 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 [value, setValue] = useControllableState({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: ''
+    });
+    const nativeProps = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'size',
+            'onChange',
+            'value',
+            'defaultValue'
+        ]
+    });
+    const state = {
+        size,
+        appearance,
+        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/useInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(props.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(props.contentBefore, { elementType: 'span' }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnDD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAEoBO;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAEI,QAAQ,EAAE,GAAGT;IAElG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGtB,qBAAqB;QAC7CuB,OAAOjB,MAAMe,KAAK;QAClBG,cAAclB,MAAMmB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAc5B,0BAA0B;QAC5CO;QACAsB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAQ;YAAY;YAAS;SAAe;IAClE;IAEA,MAAMN,QAAoB;QACxBX;QACAC;QACAiB,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAO9B,KAAKiC,MAAM,CAAC7B,MAAM0B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACN9B;gBACA,GAAGoB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAchC,KAAKsC,QAAQ,CAAClC,MAAM4B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAe/B,KAAKsC,QAAQ,CAAClC,MAAM2B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM7B,KAAKiC,MAAM,CAAC7B,MAAMyB,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAhB,MAAMS,KAAK,CAACX,KAAK,GAAGA;IACpBE,MAAMS,KAAK,CAACjB,QAAQ,GAAGd,iBAAiBwC,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACtB,KAAK;QAChCN,qBAAAA,+BAAAA,SAAW0B,IAAI;YAAEpB,OAAOqB;QAAS;QACjCpB,SAASoB;IACX;IAEA,OAAOnB;AACT,EAAE"}

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

@@ -0,0 +1,252 @@
+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"],
+    Bjwas2f: "fg455y9",
+    Bn1d65q: ["f1rvyvqg", "f14g86mu"],
+    Bxeuatn: "f1cwzwz",
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    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){.fg455y9{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{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;
+};