@fluentui/react-input 0.0.0-nightlyf8be6a7c6520220106.1 → 0.0.0

package/dist/{react-input.d.ts → index.d.ts}

@@ -1,17 +1,16 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } 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.
- *
- * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.**
  */
 export declare const Input: ForwardRefComponent<InputProps>;
 
-export declare const inputClassName = "fui-Input";
+export declare const inputClassNames: SlotClassNames<InputSlots>;
 
 /**
  * Data passed to the `onChange` callback when a user changes the input's value.
@@ -21,7 +20,7 @@ export declare type InputOnChangeData = {
     value: string;
 };
 
-export declare type InputProps = Omit<ComponentProps<InputSlots, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
+export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
     /** Input can't have children. */
     children?: never;
     /**
@@ -29,16 +28,11 @@ export declare type InputProps = Omit<ComponentProps<InputSlots, 'input'>, 'chil
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
-    /**
-     * If true, the input will have inline display, allowing it be used within text content.
-     * If false (the default), the input will have block display.
-     */
-    inline?: boolean;
     /**
      * Controls the colors and borders of the input.
      * @default 'outline'
      */
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     /**
      * Default value of the input. Provide this if the input should be an uncontrolled component
      * which tracks its current state internally; otherwise, use `value`.
@@ -56,7 +50,7 @@ export declare type InputProps = Omit<ComponentProps<InputSlots, 'input'>, 'chil
     /**
      * Called when the user changes the input's value.
      */
-    onChange?: (ev: React_2.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    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.
@@ -79,7 +73,7 @@ export declare type InputSlots = {
      * 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: IntrinsicShorthandProps<'span'>;
+    root: NonNullable<Slot<'span'>>;
     /**
      * The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
      *
@@ -87,37 +81,37 @@ export declare type InputSlots = {
      * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
      * also go here.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /** Element before the input text, within the input border */
-    contentBefore?: IntrinsicShorthandProps<'span'>;
+    contentBefore?: Slot<'span'>;
     /** Element after the input text, within the input border */
-    contentAfter?: IntrinsicShorthandProps<'span'>;
+    contentAfter?: Slot<'span'>;
 };
 
 /**
  * State used in rendering Input.
  */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
+export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
 
 /**
  * Render the final JSX of Input
  */
-export declare const renderInput: (state: InputState) => JSX.Element;
+export declare const renderInput_unstable: (state: InputState) => JSX.Element;
 
 /**
  * Create the state required to render Input.
  *
- * The returned state can be modified with hooks such as useInputStyles,
- * before being passed to renderInput.
+ * 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: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState;
+export declare const useInput_unstable: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState;
 
 /**
  * Apply styling to the Input slots based on the state
  */
-export declare const useInputStyles: (state: InputState) => InputState;
+export declare const useInputStyles_unstable: (state: InputState) => InputState;
 
 export { }

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../src/Input.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"../src/","sources":["Input.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Input/index';\n"]}

package/lib/components/Input/Input.js

@@ -1,17 +1,15 @@
 import * as React from 'react';
-import { useInput } from './useInput';
-import { renderInput } from './renderInput';
-import { useInputStyles } from './useInputStyles';
+import { useInput_unstable } from './useInput';
+import { renderInput_unstable } from './renderInput';
+import { useInputStyles_unstable } from './useInputStyles';
 /**
  * The Input component allows people to enter and edit text.
- *
- * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.**
  */
 
 export const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useInput(props, ref);
-  useInputStyles(state);
-  return renderInput(state);
+  const state = useInput_unstable(props, ref);
+  useInputStyles_unstable(state);
+  return renderInput_unstable(state);
 });
 Input.displayName = 'Input';
 //# sourceMappingURL=Input.js.map

package/lib/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAIA;;;;AAIG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AAEA,EAAA,cAAc,CAAC,KAAD,CAAd;AACA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
+{"version":3,"sources":["components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}

package/lib/components/Input/Input.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.types.js","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Input.types.js","sourceRoot":"../src/","sources":["components/Input/Input.types.ts"],"names":[],"mappings":"","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  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\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  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"]}

package/lib/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"]}

package/lib/components/Input/renderInput.js

@@ -4,15 +4,15 @@ import { getSlots } from '@fluentui/react-utilities';
  * Render the final JSX of Input
  */
 
-export const renderInput = state => {
+export const renderInput_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, ['input', 'contentBefore', 'contentAfter', 'root']);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.contentBefore, { ...slotProps.contentBefore
+  }, slots.contentBefore && /*#__PURE__*/React.createElement(slots.contentBefore, { ...slotProps.contentBefore
   }), /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
-  }), /*#__PURE__*/React.createElement(slots.contentAfter, { ...slotProps.contentAfter
+  }), slots.contentAfter && /*#__PURE__*/React.createElement(slots.contentAfter, { ...slotProps.contentAfter
   }));
 };
 //# sourceMappingURL=renderInput.js.map

package/lib/components/Input/renderInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Input/renderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,EAAoB,CAAC,OAAD,EAAU,eAAV,EAA2B,cAA3B,EAA2C,MAA3C,CAApB,CAArC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;AAAf,GAApB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAnB,CAHF,CADF;AAOD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/Input/renderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,iBAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Input/useInput.js

@@ -2,18 +2,17 @@ import { getPartitionedNativeProps, resolveShorthand, useControllableState, useE
 /**
  * Create the state required to render Input.
  *
- * The returned state can be modified with hooks such as useInputStyles,
- * before being passed to renderInput.
+ * 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 = (props, ref) => {
+export const useInput_unstable = (props, ref) => {
   const {
     size = 'medium',
     appearance = 'outline',
-    inline = false,
     onChange
   } = props;
   const [value, setValue] = useControllableState({
@@ -29,7 +28,6 @@ export const useInput = (props, ref) => {
   const state = {
     size,
     appearance,
-    inline,
     components: {
       root: 'span',
       input: 'input',

package/lib/components/Input/useInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Input/useInput.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AAC1F,QAAM;AAAE,IAAA,IAAI,GAAG,QAAT;AAAmB,IAAA,UAAU,GAAG,SAAhC;AAA2C,IAAA,MAAM,GAAG,KAApD;AAA2D,IAAA;AAA3D,MAAwE,KAA9E;AAEA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;AAC7C,IAAA,KAAK,EAAE,KAAK,CAAC,KADgC;AAE7C,IAAA,YAAY,EAAE,KAAK,CAAC,YAFyB;AAG7C,IAAA,YAAY,EAAE;AAH+B,GAAD,CAA9C;AAMA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;AAHyB,GAAD,CAA7C;AAMA,QAAM,KAAK,GAAe;AACxB,IAAA,IADwB;AAExB,IAAA,UAFwB;AAGxB,IAAA,MAHwB;AAIxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ,KAJY;AAUxB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,MADM;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC;AAHH;AAFqB,KAAd,CAVC;AAkBxB,IAAA,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAlBN;AAmBxB,IAAA,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAnBP;AAoBxB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAAb;AApBE,GAA1B;AA0BA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;AAC3C,UAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,QAAQ,CAAC,QAAD,CAAR;AACD,GAJsC,CAAvC;AAMA,SAAO,KAAP;AACD,CAjDM","sourceRoot":""}
+{"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;EAEA,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAAd,CATC;IAiBxB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAjBN;IAkBxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAlBP;IAmBxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAnBE,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsC,CAAvC;EAMA,OAAO,KAAP;AACD,CAhDM","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\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  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\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: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\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"],"sourceRoot":"../src/"}

package/lib/components/Input/useInputStyles.js

@@ -1,37 +1,19 @@
-import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
-export const inputClassName = 'fui-Input'; // TODO(sharing) use theme values once available
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const inputClassNames = {
+  root: 'fui-Input',
+  input: 'fui-Input__input',
+  contentBefore: 'fui-Input__contentBefore',
+  contentAfter: 'fui-Input__contentAfter'
+}; // TODO(sharing) use theme values once available
 
-const horizontalSpacing = {
-  xxs: '2px',
-  xs: '4px',
-  sNudge: '6px',
-  s: '8px',
-  mNudge: '10px',
-  m: '12px'
-};
-const motionDurations = {
-  ultraFast: '0.05s',
-  normal: '0.2s'
-};
-const motionCurves = {
-  accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
-  decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)'
-};
 const contentSizes = {
-  // TODO(sharing) shouldn't these be in the theme?
-  body1: theme => ({
-    fontSize: theme.fontSizeBase300,
-    lineHeight: theme.lineHeightBase300
-  }),
-  caption1: theme => ({
-    fontSize: theme.fontSizeBase200,
-    lineHeight: theme.lineHeightBase200
-  }),
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  400: theme => ({
-    fontSize: theme.fontSizeBase400,
-    lineHeight: theme.lineHeightBase400
-  })
+  // TODO: This 400 style is not in the typography styles.
+  // May need a design change
+  400: {
+    fontSize: tokens.fontSizeBase400,
+    lineHeight: tokens.lineHeightBase400
+  }
 }; // TODO(sharing) should these be shared somewhere?
 
 const fieldHeights = {
@@ -42,11 +24,11 @@ const fieldHeights = {
 
 const useRootStyles = /*#__PURE__*/__styles({
   "base": {
-    "mc9l5x": "f22iagw",
+    "mc9l5x": "ftuwxu6",
     "Bt984gj": "f122n59",
     "Eh141a": "flvyvdh",
-    "i8kkvl": "f16mnhsx",
-    "Belr9w4": "fbi42co",
+    "i8kkvl": "f14mj54c",
+    "Belr9w4": "fiut8dr",
     "Bahqtrf": "fk6fouc",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -56,60 +38,64 @@ const useRootStyles = /*#__PURE__*/__styles({
     "B7ck84d": "f1ewtqcl"
   },
   "interactive": {
-    "oqd9ik": "ffdc0f3",
-    "Bs6t6z0": "fqc6z8f",
-    "Hdbjpj": "f11ef69",
-    "jc51t6": ["f383sj6", "fpmdmpy"],
-    "Bj55yzk": "fqmzrrm",
-    "cnmfks": ["fpmdmpy", "f383sj6"],
-    "mpb1vu": "f1iv82i4",
-    "B9nohqn": ["f1j2a01o", "fvxed1z"],
-    "frdscb": ["fvxed1z", "f1j2a01o"],
-    "B3zxwmv": "f1gw3il9",
-    "J4s2b0": "fd0py6g",
-    "Bk8j60v": "f1ta67ae",
-    "B5pt6m4": "fabrkco",
-    "xn0juu": "f1lmmjng",
-    "wbfbqe": "fopw4to",
-    "mafdb0": "f1dw3w9y",
-    "s1xtto": "f1n2ytmg",
-    "Hbcoss": "fnqdfvx",
-    "lq1u8j": "fbqc2tv",
-    "B37x0ls": "fvvig05",
-    "H8rp7s": "f1nwpqpa",
-    "uvoyur": "f1e6xsgv"
+    "li1rpt": "f1gw3sf2",
+    "Bsft5z2": "f13zj6fq",
+    "E3zdtr": "f1mdlcz9",
+    "Eqx8gd": ["f1a7op3", "f1cjjd47"],
+    "By385i5": "f1gboi2j",
+    "B1piin3": ["f1cjjd47", "f1a7op3"],
+    "Dlnsje": "f145g4dw",
+    "d9w3h3": ["f1kp91vd", "f1ibwz09"],
+    "B3778ie": ["f1ibwz09", "f1kp91vd"],
+    "Bcgy8vk": "f1cb6c3",
+    "Bw17bha": "f1lh990p",
+    "B1q35kw": "f1jc6hxc",
+    "Gjdm7m": "f13evtba",
+    "b1kco5": "f1yk9hq",
+    "Ba2ppi3": "fhwpy7i",
+    "F2fol1": "f14ee0xe",
+    "lck23g": "f1xhbsuh",
+    "umuwi5": "fjw5xc1",
+    "Blcqepd": "f1xdyd5c",
+    "nplu4u": "fatpbeo",
+    "Bioka5o": "fb7uyps",
+    "Bercvud": "f1ibeo51",
+    "Bbr2w1p": "f14a1fxs",
+    "Bduesf4": "f3e99gv",
+    "Bpq79vn": "fhljsf7"
   },
   "small": {
     "sshi5w": "f1pha7fy",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "z189sj": ["fdw0yi8", "fk8j09s"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "uwmqm3": ["fk8j09s", "fdw0yi8"],
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
     "sshi5w": "f1nxs5xn",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f81rol6", "frdkuqy"],
+    "z189sj": ["f11gcy0p", "f1ng84yb"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["frdkuqy", "f81rol6"],
+    "uwmqm3": ["f1ng84yb", "f11gcy0p"],
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
     "sshi5w": "f1w5jphr",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "z189sj": ["fw5db7e", "f1uw59to"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "uwmqm3": ["f1uw59to", "fw5db7e"],
     "Be2twd7": "fod5ikn",
     "Bg96gwp": "faaz57k",
-    "i8kkvl": "fgfbwa2",
-    "Belr9w4": "f1y3hx6l"
-  },
-  "inline": {
-    "mc9l5x": "ftuwxu6"
+    "i8kkvl": "f1rjii52",
+    "Belr9w4": "f1r7g2jn"
   },
   "outline": {
     "De3pzq": "fxugw4r",
@@ -149,10 +135,10 @@ const useRootStyles = /*#__PURE__*/__styles({
   "underlineInteractive": {
     "oetu4i": "f1l4zc64",
     "Be8ivqh": "f1klwx88",
-    "frdscb": ["fqvcdsd", "f9cg6ix"],
-    "B9nohqn": ["f9cg6ix", "fqvcdsd"],
-    "B1dhsta": ["f1pvm60u", "f179ivkp"],
-    "Bjdmjzx": ["f179ivkp", "f1pvm60u"]
+    "B3778ie": ["f1nf3wye", "feulmo5"],
+    "d9w3h3": ["feulmo5", "f1nf3wye"],
+    "Bl18szs": ["f18vqdqu", "f53nyzz"],
+    "B4j8arr": ["f53nyzz", "f18vqdqu"]
   },
   "filled": {
     "E5pizo": "fyed02w",
@@ -175,14 +161,15 @@ const useRootStyles = /*#__PURE__*/__styles({
     "nagaa4": "f1tpwn32",
     "B1yhkcb": ["fsrcdbj", "f17blpuu"]
   },
-  "filledDarker": {
+  "filled-darker": {
     "De3pzq": "f16xq7d1"
   },
-  "filledLighter": {
+  "filled-lighter": {
     "De3pzq": "fxugw4r"
   },
   "disabled": {
     "Bceei9c": "fdrzuqr",
+    "De3pzq": "f1c21dwh",
     "B4j52fo": "f5ogflp",
     "Bekrc4i": ["f1hqa2wf", "finvdd3"],
     "Bn0qgzm": "f1f09k3d",
@@ -198,48 +185,66 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
     "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"]
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "Bjwas2f": "fg455y9",
+    "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
+    "Bxeuatn": "f1cwzwz",
+    "n51gp8": ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:-webkit-max(2px, var(--borderRadiusMedium));height:-moz-max(2px, var(--borderRadiusMedium));height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
-  "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv:focus-within:active:after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
-  "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,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-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,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
+  "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){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 
 const useInputElementStyles = /*#__PURE__*/__styles({
   "base": {
     "B7ck84d": "f1ewtqcl",
     "Bh6795r": "fqerorx",
+    "Bf4jedk": "fy77jfu",
     "icvyot": "f1ern45e",
     "vrafjx": ["f1n71otn", "f1deefiw"],
     "oivjwe": "f1h8hb77",
     "wvpqe5": ["f1deefiw", "f1n71otn"],
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f12huiiw", "f161knb0"],
+    "z189sj": ["ffczdla", "fgiv446"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "uwmqm3": ["fgiv446", "ffczdla"],
     "sj55zd": "f19n0e5",
     "De3pzq": "f3rmtva",
     "yvdlaj": "fwyc1cq",
     "B3o7kgh": "f13ta7ih",
-    "B486eqv": "f2hkw1w"
+    "oeaueh": "f1s6fcnf"
   },
   "small": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
     "Be2twd7": "fod5ikn",
     "Bg96gwp": "faaz57k",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "z189sj": ["fdw0yi8", "fk8j09s"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
+    "uwmqm3": ["fk8j09s", "fdw0yi8"]
   },
   "disabled": {
     "sj55zd": "f1s2aq7o",
@@ -248,8 +253,7 @@ const useInputElementStyles = /*#__PURE__*/__styles({
     "yvdlaj": "fahhnxm"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".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);}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1s6fcnf{outline-style:none;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left: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 useContentStyles = /*#__PURE__*/__styles({
@@ -260,16 +264,25 @@ const useContentStyles = /*#__PURE__*/__styles({
   },
   "disabled": {
     "sj55zd": "f1s2aq7o"
+  },
+  "small": {
+    "kwki1k": "f3u2cy0"
+  },
+  "medium": {
+    "kwki1k": "f1oqplr0"
+  },
+  "large": {
+    "kwki1k": "fa420co"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".f1oqplr0>svg{font-size:20px;}", ".fa420co>svg{font-size:24px;}"]
 });
 /**
  * Apply styling to the Input slots based on the state
  */
 
 
-export const useInputStyles = state => {
+export const useInputStyles_unstable = state => {
   const {
     size,
     appearance
@@ -279,16 +292,16 @@ export const useInputStyles = state => {
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();
-  state.root.className = mergeClasses(inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
-  state.input.className = mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
-  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
+  state.root.className = mergeClasses(inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
+  state.input.className = mergeClasses(inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
 
   if (state.contentBefore) {
-    state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);
+    state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
   }
 
   if (state.contentAfter) {
-    state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);
+    state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
   }
 
   return state;