@fluentui/react-input 9.8.1 → 9.8.3

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.3)
+
+Tue, 26 May 2026 09:34:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.2..@fluentui/react-input_v9.8.3)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.2)
+
+Thu, 23 Apr 2026 14:21:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.1..@fluentui/react-input_v9.8.2)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.1)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.0..@fluentui/react-input_v9.8.1)
 
 ### Patches

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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 * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 

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

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * Data passed to the `onChange` callback when a user changes the input's value.
+ */ export { };

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/Input/Input.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AA4HA;;CAEC,GACD,WAGE"}

package/lib/components/Input/useInput.js

@@ -1,5 +1,4 @@
 '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';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, 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', ...baseProps } = 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 state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const { onChange } = props;\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: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\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","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","onChange","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;AAEA,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,EAAE,GAAGI,WAAW,GAAGT;IAEtG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWR;IAE/C,OAAO;QACLK;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAAChB,OAAuBC;IAC3D,MAAM,EAAEgB,QAAQ,EAAE,GAAGjB;IAErB,MAAM,CAACkB,OAAOC,SAAS,GAAGzB,qBAAqB;QAC7CqB,OAAOf,MAAMkB,KAAK;QAClBE,cAAcpB,MAAMqB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMV,QAAwB;QAC5BW,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,KAAKmC,MAAM,CAAC/B,MAAM4B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,KAAKwC,QAAQ,CAACpC,MAAM8B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAejC,KAAKwC,QAAQ,CAACpC,MAAM6B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM/B,KAAKmC,MAAM,CAAC/B,MAAM2B,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEApB,MAAMa,KAAK,CAACV,KAAK,GAAGA;IACpBH,MAAMa,KAAK,CAACX,QAAQ,GAAGtB,iBAAiB0C,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACrB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWoB,IAAI;YAAEnB,OAAOoB;QAAS;QACjCnB,SAASmB;IACX;IAEA,OAAOvB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, 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', ...baseProps } = 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 state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const { onChange } = props;\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: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\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":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","onChange","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,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,EAAE,GAAGI,WAAW,GAAGT;IAEtG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWR;IAE/C,OAAO;QACLK;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAAChB,OAAuBC;IAC3D,MAAM,EAAEgB,QAAQ,EAAE,GAAGjB;IAErB,MAAM,CAACkB,OAAOC,SAAS,GAAGzB,qBAAqB;QAC7CqB,OAAOf,MAAMkB,KAAK;QAClBE,cAAcpB,MAAMqB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMV,QAAwB;QAC5BW,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,KAAKmC,MAAM,CAAC/B,MAAM4B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,KAAKwC,QAAQ,CAACpC,MAAM8B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAejC,KAAKwC,QAAQ,CAACpC,MAAM6B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM/B,KAAKmC,MAAM,CAAC/B,MAAM2B,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEApB,MAAMa,KAAK,CAACV,KAAK,GAAGA;IACpBH,MAAMa,KAAK,CAACX,QAAQ,GAAGtB,iBAAiB0C,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACrB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWoB,IAAI;YAAEnB,OAAOoB;QAAS;QACjCnB,SAASmB;IACX;IAEA,OAAOvB;AACT,EAAE"}

package/lib/components/Input/useInputStyles.styles.js

@@ -241,13 +241,17 @@ export const useInputStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();
+  // eslint-disable-next-line react-hooks/immutability
   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);
+  // eslint-disable-next-line react-hooks/immutability
   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) {
+    // eslint-disable-next-line react-hooks/immutability
     state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
   }
   if (state.contentAfter) {
+    // eslint-disable-next-line react-hooks/immutability
     state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n    root: 'fui-Input',\n    input: 'fui-Input__input',\n    contentBefore: 'fui-Input__contentBefore',\n    contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n    root: {\n        small: tokens.spacingHorizontalSNudge,\n        medium: tokens.spacingHorizontalMNudge,\n        large: tokens.spacingHorizontalM\n    },\n    input: {\n        small: tokens.spacingHorizontalXXS,\n        medium: tokens.spacingHorizontalXXS,\n        large: tokens.spacingHorizontalSNudge\n    },\n    combined: {\n        small: tokens.spacingHorizontalS,\n        medium: tokens.spacingHorizontalM,\n        large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n    }\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    gap: tokens.spacingHorizontalXXS,\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    boxSizing: 'border-box',\n    verticalAlign: 'middle',\n    // size: medium (default)\n    minHeight: fieldHeights.medium,\n    ...typographyStyles.body1,\n    // appearance: outline (default)\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        left: '-1px',\n        bottom: '-1px',\n        right: '-1px',\n        // Maintaining the correct corner radius:\n        // Use the whole border-radius as the height and only put radii on the bottom corners.\n        // (Otherwise the radius would be automatically reduced to fit available space.)\n        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n        height: `max(2px, ${tokens.borderRadiusMedium})`,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        // Flat 2px border:\n        // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n        // (This could be done without trimming using `background: linear-gradient(...)`, but using\n        // borderBottom makes it easier for people to override the color if needed.)\n        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n        clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n        // Animation for focus OUT\n        transform: 'scaleX(0)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationUltraFast,\n        transitionDelay: tokens.curveAccelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within::after': {\n        // Animation for focus IN\n        transform: 'scaleX(1)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationNormal,\n        transitionDelay: tokens.curveDecelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within:active::after': {\n        // This is if the user clicks the field again while it's already focused\n        borderBottomColor: tokens.colorCompoundBrandStrokePressed\n    },\n    ':focus-within': {\n        outline: '2px solid transparent'\n    }\n});\nconst useRootStyles = makeStyles({\n    small: {\n        minHeight: fieldHeights.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n    },\n    large: {\n        minHeight: fieldHeights.large,\n        ...typographyStyles.body2,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    outline: {\n    },\n    outlineInteractive: {\n        ':hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderRadius: '0',\n        // border is specified in rootBaseStyles, but we only want a bottom border here\n        borderTopStyle: 'none',\n        borderRightStyle: 'none',\n        borderLeftStyle: 'none',\n        // Make the focus underline (::after) match the width of the bottom border\n        '::after': {\n            left: 0,\n            right: 0\n        }\n    },\n    underlineInteractive: {\n        ':hover': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '::after': {\n            // remove rounded corners from focus underline\n            borderRadius: '0'\n        }\n    },\n    filled: {\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    filledInteractive: {\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':hover,:focus-within': {\n            // also handles pressed border color (:active)\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-darker-shadow': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        boxShadow: tokens.shadow2\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow2\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        },\n        // remove the focus border\n        '::after': {\n            content: 'unset'\n        },\n        // remove the focus outline\n        ':focus-within': {\n            outlineStyle: 'none'\n        }\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.root.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.root.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.root.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.root.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.root.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.root.large\n    }\n});\nconst useInputClassName = makeResetStyles({\n    alignSelf: 'stretch',\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0,\n    borderStyle: 'none',\n    padding: `0 ${horizontalPadding.combined.medium}`,\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    '::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    outlineStyle: 'none',\n    // Inherit typography styles from root\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n    small: {\n        paddingLeft: horizontalPadding.combined.small,\n        paddingRight: horizontalPadding.combined.small\n    },\n    medium: {\n    },\n    large: {\n        paddingLeft: horizontalPadding.combined.large,\n        paddingRight: horizontalPadding.combined.large\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.input.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.input.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.input.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.input.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.input.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.input.large\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useContentClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    // size: medium (default)\n    '> svg': {\n        fontSize: '20px'\n    }\n});\nconst useContentStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    // Ensure resizable icons show up with the proper font size\n    small: {\n        '> svg': {\n            fontSize: '16px'\n        }\n    },\n    medium: {\n    },\n    large: {\n        '> svg': {\n            fontSize: '24px'\n        }\n    }\n});\n/**\n * Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, appearance } = state;\n    const disabled = state.input.disabled;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const filled = appearance.startsWith('filled');\n    const rootStyles = useRootStyles();\n    const inputStyles = useInputElementStyles();\n    const contentStyles = useContentStyles();\n    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);\n    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);\n    const contentClasses = [\n        useContentClassName(),\n        disabled && contentStyles.disabled,\n        contentStyles[size]\n    ];\n    if (state.contentBefore) {\n        state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n    root: 'fui-Input',\n    input: 'fui-Input__input',\n    contentBefore: 'fui-Input__contentBefore',\n    contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n    root: {\n        small: tokens.spacingHorizontalSNudge,\n        medium: tokens.spacingHorizontalMNudge,\n        large: tokens.spacingHorizontalM\n    },\n    input: {\n        small: tokens.spacingHorizontalXXS,\n        medium: tokens.spacingHorizontalXXS,\n        large: tokens.spacingHorizontalSNudge\n    },\n    combined: {\n        small: tokens.spacingHorizontalS,\n        medium: tokens.spacingHorizontalM,\n        large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n    }\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    gap: tokens.spacingHorizontalXXS,\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    boxSizing: 'border-box',\n    verticalAlign: 'middle',\n    // size: medium (default)\n    minHeight: fieldHeights.medium,\n    ...typographyStyles.body1,\n    // appearance: outline (default)\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        left: '-1px',\n        bottom: '-1px',\n        right: '-1px',\n        // Maintaining the correct corner radius:\n        // Use the whole border-radius as the height and only put radii on the bottom corners.\n        // (Otherwise the radius would be automatically reduced to fit available space.)\n        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n        height: `max(2px, ${tokens.borderRadiusMedium})`,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        // Flat 2px border:\n        // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n        // (This could be done without trimming using `background: linear-gradient(...)`, but using\n        // borderBottom makes it easier for people to override the color if needed.)\n        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n        clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n        // Animation for focus OUT\n        transform: 'scaleX(0)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationUltraFast,\n        transitionDelay: tokens.curveAccelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within::after': {\n        // Animation for focus IN\n        transform: 'scaleX(1)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationNormal,\n        transitionDelay: tokens.curveDecelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within:active::after': {\n        // This is if the user clicks the field again while it's already focused\n        borderBottomColor: tokens.colorCompoundBrandStrokePressed\n    },\n    ':focus-within': {\n        outline: '2px solid transparent'\n    }\n});\nconst useRootStyles = makeStyles({\n    small: {\n        minHeight: fieldHeights.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n    },\n    large: {\n        minHeight: fieldHeights.large,\n        ...typographyStyles.body2,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    outline: {\n    },\n    outlineInteractive: {\n        ':hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderRadius: '0',\n        // border is specified in rootBaseStyles, but we only want a bottom border here\n        borderTopStyle: 'none',\n        borderRightStyle: 'none',\n        borderLeftStyle: 'none',\n        // Make the focus underline (::after) match the width of the bottom border\n        '::after': {\n            left: 0,\n            right: 0\n        }\n    },\n    underlineInteractive: {\n        ':hover': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '::after': {\n            // remove rounded corners from focus underline\n            borderRadius: '0'\n        }\n    },\n    filled: {\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    filledInteractive: {\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':hover,:focus-within': {\n            // also handles pressed border color (:active)\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-darker-shadow': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        boxShadow: tokens.shadow2\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow2\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        },\n        // remove the focus border\n        '::after': {\n            content: 'unset'\n        },\n        // remove the focus outline\n        ':focus-within': {\n            outlineStyle: 'none'\n        }\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.root.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.root.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.root.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.root.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.root.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.root.large\n    }\n});\nconst useInputClassName = makeResetStyles({\n    alignSelf: 'stretch',\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0,\n    borderStyle: 'none',\n    padding: `0 ${horizontalPadding.combined.medium}`,\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    '::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    outlineStyle: 'none',\n    // Inherit typography styles from root\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n    small: {\n        paddingLeft: horizontalPadding.combined.small,\n        paddingRight: horizontalPadding.combined.small\n    },\n    medium: {\n    },\n    large: {\n        paddingLeft: horizontalPadding.combined.large,\n        paddingRight: horizontalPadding.combined.large\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.input.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.input.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.input.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.input.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.input.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.input.large\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useContentClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    // size: medium (default)\n    '> svg': {\n        fontSize: '20px'\n    }\n});\nconst useContentStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    // Ensure resizable icons show up with the proper font size\n    small: {\n        '> svg': {\n            fontSize: '16px'\n        }\n    },\n    medium: {\n    },\n    large: {\n        '> svg': {\n            fontSize: '24px'\n        }\n    }\n});\n/**\n * Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, appearance } = state;\n    const disabled = state.input.disabled;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const filled = appearance.startsWith('filled');\n    const rootStyles = useRootStyles();\n    const inputStyles = useInputElementStyles();\n    const contentStyles = useContentStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    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);\n    // eslint-disable-next-line react-hooks/immutability\n    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);\n    const contentClasses = [\n        useContentClassName(),\n        disabled && contentStyles.disabled,\n        contentStyles[size]\n    ];\n    if (state.contentBefore) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Input/useInputStyles.styles.raw.js

@@ -314,7 +314,9 @@ const useContentStyles = makeStyles({
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
+    // eslint-disable-next-line react-hooks/immutability
     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);
+    // eslint-disable-next-line react-hooks/immutability
     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(),
@@ -322,9 +324,11 @@ const useContentStyles = makeStyles({
         contentStyles[size]
     ];
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
     }
     return state;

package/lib/components/Input/useInputStyles.styles.raw.js.map

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

package/lib-commonjs/components/Input/Input.types.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * Data passed to the `onChange` callback when a user changes the input's value.
+ */ "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"));

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/Input/Input.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AA4HA;;CAEC,GACD,WAGE"}

package/lib-commonjs/components/Input/useInput.js

@@ -17,8 +17,6 @@ _export(exports, {
         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");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, 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', ...baseProps } = 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 state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const { onChange } = props;\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: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\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","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","onChange","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;yBAmDayB;eAAAA;;IAlCAjB,iBAAAA;;;;;iEAfU,QAAQ;4BACe,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,0BAA0B,CAACC,OAAmBC;IACnDD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEoBO;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGT;IAEtG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWR;IAE/C,OAAO;QACLK;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACf,OAAuBC;IAC3D,MAAM,EAAEgB,QAAQ,EAAE,GAAGjB;IAErB,MAAM,CAACkB,OAAOC,SAAS,OAAGzB,oCAAAA,EAAqB;QAC7CqB,OAAOf,MAAMkB,KAAK;QAClBE,cAAcpB,MAAMqB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMV,QAAwB;QAC5BW,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,oBAAAA,CAAKmC,MAAM,CAAC/B,MAAM4B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,oBAAAA,CAAKwC,QAAQ,CAACpC,MAAM8B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAejC,oBAAAA,CAAKwC,QAAQ,CAACpC,MAAM6B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM/B,oBAAAA,CAAKmC,MAAM,CAAC/B,MAAM2B,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEApB,MAAMa,KAAK,CAACV,KAAK,GAAGA;IACpBH,MAAMa,KAAK,CAACX,QAAQ,OAAGtB,gCAAAA,EAAiB0C,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACrB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWoB,IAAI;YAAEnB,OAAOoB;QAAS;QACjCnB,SAASmB;IACX;IAEA,OAAOvB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, 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', ...baseProps } = 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 state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const { onChange } = props;\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: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\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":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","onChange","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;yBAmDawB;eAAAA;;IAlCAjB,iBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,0BAA0B,CAACC,OAAmBC;IACnDD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEoBO;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,qCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGT;IAEtG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWR;IAE/C,OAAO;QACLK;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACf,OAAuBC;IAC3D,MAAM,EAAEgB,QAAQ,EAAE,GAAGjB;IAErB,MAAM,CAACkB,OAAOC,SAAS,OAAGzB,oCAAAA,EAAqB;QAC7CqB,OAAOf,MAAMkB,KAAK;QAClBE,cAAcpB,MAAMqB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMV,QAAwB;QAC5BW,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,oBAAAA,CAAKmC,MAAM,CAAC/B,MAAM4B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,oBAAAA,CAAKwC,QAAQ,CAACpC,MAAM8B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAejC,oBAAAA,CAAKwC,QAAQ,CAACpC,MAAM6B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM/B,oBAAAA,CAAKmC,MAAM,CAAC/B,MAAM2B,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEApB,MAAMa,KAAK,CAACV,KAAK,GAAGA;IACpBH,MAAMa,KAAK,CAACX,QAAQ,OAAGtB,gCAAAA,EAAiB0C,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACrB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWoB,IAAI;YAAEnB,OAAOoB;QAAS;QACjCnB,SAASmB;IACX;IAEA,OAAOvB;AACT,EAAE"}

package/lib-commonjs/components/Input/useInputStyles.styles.js

@@ -474,7 +474,9 @@ const useInputStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
+    // eslint-disable-next-line react-hooks/immutability
     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);
+    // eslint-disable-next-line react-hooks/immutability
     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(),
@@ -482,9 +484,11 @@ const useInputStyles_unstable = (state)=>{
         contentStyles[size]
     ];
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
     }
     return state;

package/lib-commonjs/components/Input/useInputStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n    root: 'fui-Input',\n    input: 'fui-Input__input',\n    contentBefore: 'fui-Input__contentBefore',\n    contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n    root: {\n        small: tokens.spacingHorizontalSNudge,\n        medium: tokens.spacingHorizontalMNudge,\n        large: tokens.spacingHorizontalM\n    },\n    input: {\n        small: tokens.spacingHorizontalXXS,\n        medium: tokens.spacingHorizontalXXS,\n        large: tokens.spacingHorizontalSNudge\n    },\n    combined: {\n        small: tokens.spacingHorizontalS,\n        medium: tokens.spacingHorizontalM,\n        large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n    }\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    gap: tokens.spacingHorizontalXXS,\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    boxSizing: 'border-box',\n    verticalAlign: 'middle',\n    // size: medium (default)\n    minHeight: fieldHeights.medium,\n    ...typographyStyles.body1,\n    // appearance: outline (default)\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        left: '-1px',\n        bottom: '-1px',\n        right: '-1px',\n        // Maintaining the correct corner radius:\n        // Use the whole border-radius as the height and only put radii on the bottom corners.\n        // (Otherwise the radius would be automatically reduced to fit available space.)\n        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n        height: `max(2px, ${tokens.borderRadiusMedium})`,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        // Flat 2px border:\n        // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n        // (This could be done without trimming using `background: linear-gradient(...)`, but using\n        // borderBottom makes it easier for people to override the color if needed.)\n        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n        clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n        // Animation for focus OUT\n        transform: 'scaleX(0)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationUltraFast,\n        transitionDelay: tokens.curveAccelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within::after': {\n        // Animation for focus IN\n        transform: 'scaleX(1)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationNormal,\n        transitionDelay: tokens.curveDecelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within:active::after': {\n        // This is if the user clicks the field again while it's already focused\n        borderBottomColor: tokens.colorCompoundBrandStrokePressed\n    },\n    ':focus-within': {\n        outline: '2px solid transparent'\n    }\n});\nconst useRootStyles = makeStyles({\n    small: {\n        minHeight: fieldHeights.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n    },\n    large: {\n        minHeight: fieldHeights.large,\n        ...typographyStyles.body2,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    outline: {\n    },\n    outlineInteractive: {\n        ':hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderRadius: '0',\n        // border is specified in rootBaseStyles, but we only want a bottom border here\n        borderTopStyle: 'none',\n        borderRightStyle: 'none',\n        borderLeftStyle: 'none',\n        // Make the focus underline (::after) match the width of the bottom border\n        '::after': {\n            left: 0,\n            right: 0\n        }\n    },\n    underlineInteractive: {\n        ':hover': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '::after': {\n            // remove rounded corners from focus underline\n            borderRadius: '0'\n        }\n    },\n    filled: {\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    filledInteractive: {\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':hover,:focus-within': {\n            // also handles pressed border color (:active)\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-darker-shadow': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        boxShadow: tokens.shadow2\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow2\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        },\n        // remove the focus border\n        '::after': {\n            content: 'unset'\n        },\n        // remove the focus outline\n        ':focus-within': {\n            outlineStyle: 'none'\n        }\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.root.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.root.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.root.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.root.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.root.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.root.large\n    }\n});\nconst useInputClassName = makeResetStyles({\n    alignSelf: 'stretch',\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0,\n    borderStyle: 'none',\n    padding: `0 ${horizontalPadding.combined.medium}`,\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    '::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    outlineStyle: 'none',\n    // Inherit typography styles from root\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n    small: {\n        paddingLeft: horizontalPadding.combined.small,\n        paddingRight: horizontalPadding.combined.small\n    },\n    medium: {\n    },\n    large: {\n        paddingLeft: horizontalPadding.combined.large,\n        paddingRight: horizontalPadding.combined.large\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.input.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.input.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.input.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.input.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.input.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.input.large\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useContentClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    // size: medium (default)\n    '> svg': {\n        fontSize: '20px'\n    }\n});\nconst useContentStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    // Ensure resizable icons show up with the proper font size\n    small: {\n        '> svg': {\n            fontSize: '16px'\n        }\n    },\n    medium: {\n    },\n    large: {\n        '> svg': {\n            fontSize: '24px'\n        }\n    }\n});\n/**\n * Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, appearance } = state;\n    const disabled = state.input.disabled;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const filled = appearance.startsWith('filled');\n    const rootStyles = useRootStyles();\n    const inputStyles = useInputElementStyles();\n    const contentStyles = useContentStyles();\n    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);\n    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);\n    const contentClasses = [\n        useContentClassName(),\n        disabled && contentStyles.disabled,\n        contentStyles[size]\n    ];\n    if (state.contentBefore) {\n        state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n    }\n    return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}
+{"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n    root: 'fui-Input',\n    input: 'fui-Input__input',\n    contentBefore: 'fui-Input__contentBefore',\n    contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n    root: {\n        small: tokens.spacingHorizontalSNudge,\n        medium: tokens.spacingHorizontalMNudge,\n        large: tokens.spacingHorizontalM\n    },\n    input: {\n        small: tokens.spacingHorizontalXXS,\n        medium: tokens.spacingHorizontalXXS,\n        large: tokens.spacingHorizontalSNudge\n    },\n    combined: {\n        small: tokens.spacingHorizontalS,\n        medium: tokens.spacingHorizontalM,\n        large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n    }\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    gap: tokens.spacingHorizontalXXS,\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    boxSizing: 'border-box',\n    verticalAlign: 'middle',\n    // size: medium (default)\n    minHeight: fieldHeights.medium,\n    ...typographyStyles.body1,\n    // appearance: outline (default)\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        left: '-1px',\n        bottom: '-1px',\n        right: '-1px',\n        // Maintaining the correct corner radius:\n        // Use the whole border-radius as the height and only put radii on the bottom corners.\n        // (Otherwise the radius would be automatically reduced to fit available space.)\n        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n        height: `max(2px, ${tokens.borderRadiusMedium})`,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        // Flat 2px border:\n        // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n        // (This could be done without trimming using `background: linear-gradient(...)`, but using\n        // borderBottom makes it easier for people to override the color if needed.)\n        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n        clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n        // Animation for focus OUT\n        transform: 'scaleX(0)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationUltraFast,\n        transitionDelay: tokens.curveAccelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within::after': {\n        // Animation for focus IN\n        transform: 'scaleX(1)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationNormal,\n        transitionDelay: tokens.curveDecelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within:active::after': {\n        // This is if the user clicks the field again while it's already focused\n        borderBottomColor: tokens.colorCompoundBrandStrokePressed\n    },\n    ':focus-within': {\n        outline: '2px solid transparent'\n    }\n});\nconst useRootStyles = makeStyles({\n    small: {\n        minHeight: fieldHeights.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n    },\n    large: {\n        minHeight: fieldHeights.large,\n        ...typographyStyles.body2,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    outline: {\n    },\n    outlineInteractive: {\n        ':hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderRadius: '0',\n        // border is specified in rootBaseStyles, but we only want a bottom border here\n        borderTopStyle: 'none',\n        borderRightStyle: 'none',\n        borderLeftStyle: 'none',\n        // Make the focus underline (::after) match the width of the bottom border\n        '::after': {\n            left: 0,\n            right: 0\n        }\n    },\n    underlineInteractive: {\n        ':hover': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '::after': {\n            // remove rounded corners from focus underline\n            borderRadius: '0'\n        }\n    },\n    filled: {\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    filledInteractive: {\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':hover,:focus-within': {\n            // also handles pressed border color (:active)\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-darker-shadow': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        boxShadow: tokens.shadow2\n    },\n    // This shadow appearance is deprecated and will be removed in a future release.\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow2\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        },\n        // remove the focus border\n        '::after': {\n            content: 'unset'\n        },\n        // remove the focus outline\n        ':focus-within': {\n            outlineStyle: 'none'\n        }\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.root.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.root.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.root.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.root.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.root.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.root.large\n    }\n});\nconst useInputClassName = makeResetStyles({\n    alignSelf: 'stretch',\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0,\n    borderStyle: 'none',\n    padding: `0 ${horizontalPadding.combined.medium}`,\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    '::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    outlineStyle: 'none',\n    // Inherit typography styles from root\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n    small: {\n        paddingLeft: horizontalPadding.combined.small,\n        paddingRight: horizontalPadding.combined.small\n    },\n    medium: {\n    },\n    large: {\n        paddingLeft: horizontalPadding.combined.large,\n        paddingRight: horizontalPadding.combined.large\n    },\n    smallWithContentBefore: {\n        paddingLeft: horizontalPadding.input.small\n    },\n    smallWithContentAfter: {\n        paddingRight: horizontalPadding.input.small\n    },\n    mediumWithContentBefore: {\n        paddingLeft: horizontalPadding.input.medium\n    },\n    mediumWithContentAfter: {\n        paddingRight: horizontalPadding.input.medium\n    },\n    largeWithContentBefore: {\n        paddingLeft: horizontalPadding.input.large\n    },\n    largeWithContentAfter: {\n        paddingRight: horizontalPadding.input.large\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useContentClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    // size: medium (default)\n    '> svg': {\n        fontSize: '20px'\n    }\n});\nconst useContentStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    // Ensure resizable icons show up with the proper font size\n    small: {\n        '> svg': {\n            fontSize: '16px'\n        }\n    },\n    medium: {\n    },\n    large: {\n        '> svg': {\n            fontSize: '24px'\n        }\n    }\n});\n/**\n * Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, appearance } = state;\n    const disabled = state.input.disabled;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const filled = appearance.startsWith('filled');\n    const rootStyles = useRootStyles();\n    const inputStyles = useInputElementStyles();\n    const contentStyles = useContentStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    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);\n    // eslint-disable-next-line react-hooks/immutability\n    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);\n    const contentClasses = [\n        useContentClassName(),\n        disabled && contentStyles.disabled,\n        contentStyles[size]\n    ];\n    if (state.contentBefore) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n    }\n    return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,eAAe;;;IAgTXqG,uBAAuB;;;;4BAlTC,uBAAuB;uBACM,gBAAgB;AAC/E,wBAAwB;IAC3BpG,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,kBAAkB;IACzBC,aAAa,EAAE,0BAA0B;IACzCC,YAAY,EAAE;AAClB,CAAC;AACD,kDAAA;AACA,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;AACX,CAAC;AACD,0GAAA;AACA,yGAAA;AACA,MAAMC,iBAAiB,GAAG;IACtBR,IAAI,EAAE;QACFK,KAAK,EAAEZ,kBAAM,CAACgB,uBAAuB;QACrCH,MAAM,EAAEb,kBAAM,CAACiB,uBAAuB;QACtCH,KAAK,EAAEd,kBAAM,CAACkB,kBAAAA;IAClB,CAAC;IACDV,KAAK,EAAE;QACHI,KAAK,EAAEZ,kBAAM,CAACmB,oBAAoB;QAClCN,MAAM,EAAEb,kBAAM,CAACmB,oBAAoB;QACnCL,KAAK,EAAEd,kBAAM,CAACgB,uBAAAA;IAClB,CAAC;IACDI,QAAQ,EAAE;QACNR,KAAK,EAAEZ,kBAAM,CAACqB,kBAAkB;QAChCR,MAAM,EAAEb,kBAAM,CAACkB,kBAAkB;QACjCJ,KAAK,EAAE,CAAA,KAAA,EAAQd,kBAAM,CAACkB,kBAAkB,CAAA,GAAA,EAAMlB,kBAAM,CAACgB,uBAAuB,CAAA,CAAA,CAAA;IAChF;AACJ,CAAC;AACD,MAAMM,gBAAgB,GAAA,WAAA,OAAGpB,oBAAA,EAAA,YAAA,UAAA;IAAAqB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAkExB,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,OAAGtB,eAAA,EAAA;IAAAS,KAAA,EAAA;QAAAc,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAjB,MAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAY,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA,CAAA;IAAAC,kBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,oBAAA,EAAA;QAAAlB,MAAA,EAAA;QAAAI,OAAA,EAAA;QAAAe,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA,iBAAA;QAAA/B,MAAA,EAAA;IAAA;IAAA,kBAAA;QAAAA,MAAA,EAAA;IAAA;IAAA,wBAAA;QAAAA,MAAA,EAAA;QAAAgC,MAAA,EAAA;IAAA;IAAA,yBAAA;QAAAhC,MAAA,EAAA;QAAAgC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAlC,MAAA,EAAA;QAAAkB,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAc,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,sBAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,qBAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,uBAAA,EAAA;QAAAH,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,sBAAA,EAAA;QAAAF,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAG,sBAAA,EAAA;QAAAL,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,qBAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAK,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAoHrB,CAAC;AACF,MAAMC,iBAAiB,GAAA,WAAA,OAAGlG,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;CAoBzB,CAAC;AACF,MAAMmG,qBAAqB,GAAA,WAAA,OAAGlG,eAAA,EAAA;IAAAS,KAAA,EAAA;QAAA2E,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA5E,MAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAyE,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAH,sBAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,qBAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,uBAAA,EAAA;QAAAH,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,sBAAA,EAAA;QAAAF,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAG,sBAAA,EAAA;QAAAL,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,qBAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAX,QAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAzD,MAAA,EAAA;QAAAkC,OAAA,EAAA;QAAAwB,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAT,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC7B,CAAC;AACF,MAAMU,mBAAmB,GAAA,WAAA,OAAGtG,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;CAS3B,CAAC;AACF,MAAMuG,gBAAgB,GAAA,WAAA,OAAGtG,eAAA,EAAA;IAAA2E,QAAA,EAAA;QAAAwB,MAAA,EAAA;IAAA;IAAA1F,KAAA,EAAA;QAAA8F,MAAA,EAAA;IAAA;IAAA7F,MAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAA4F,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiBxB,CAAC;AAGS,iCAAiCc,KAAK,IAAG;IAChD,aAAa;IACb,MAAM,EAAEC,IAAI,EAAEC,UAAAA,EAAY,GAAGF,KAAK;IAClC,MAAM9B,QAAQ,GAAG8B,KAAK,CAACpG,KAAK,CAACsE,QAAQ;IACrC,MAAMN,OAAO,GAAG,GAAGoC,KAAK,CAACpG,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;IAC3D,MAAMsD,MAAM,GAAGgD,UAAU,CAACC,UAAU,CAAC,QAAQ,CAAC;IAC9C,MAAMC,UAAU,GAAGvF,aAAa,CAAC,CAAC;IAClC,MAAMwF,WAAW,GAAGZ,qBAAqB,CAAC,CAAC;IAC3C,MAAMa,aAAa,GAAGT,gBAAgB,CAAC,CAAC;IACxC,oDAAA;IACAG,KAAK,CAACrG,IAAI,CAAC4G,SAAS,OAAG/G,mBAAY,EAACE,eAAe,CAACC,IAAI,EAAEe,gBAAgB,CAAC,CAAC,EAAE0F,UAAU,CAACH,IAAI,CAAC,EAAED,KAAK,CAACnG,aAAa,IAAIuG,UAAU,CAAC,GAAGH,IAAI,CAAA,iBAAA,CAAmB,CAAC,EAAED,KAAK,CAAClG,YAAY,IAAIsG,UAAU,CAAC,GAAGH,IAAI,CAAA,gBAAA,CAAkB,CAAC,EAAEG,UAAU,CAACF,UAAU,CAAC,EAAE,CAAChC,QAAQ,IAAIgC,UAAU,KAAK,SAAS,IAAIE,UAAU,CAAC7E,kBAAkB,EAAE,CAAC2C,QAAQ,IAAIgC,UAAU,KAAK,WAAW,IAAIE,UAAU,CAACxD,oBAAoB,EAAE,CAACsB,QAAQ,IAAIhB,MAAM,IAAIkD,UAAU,CAAC7C,iBAAiB,EAAEL,MAAM,IAAIkD,UAAU,CAAClD,MAAM,EAAE,CAACgB,QAAQ,IAAIN,OAAO,IAAIwC,UAAU,CAACxC,OAAO,EAAEM,QAAQ,IAAIkC,UAAU,CAAClC,QAAQ,EAAE8B,KAAK,CAACrG,IAAI,CAAC4G,SAAS,CAAC;IAC5jB,oDAAA;IACAP,KAAK,CAACpG,KAAK,CAAC2G,SAAS,OAAG/G,mBAAY,EAACE,eAAe,CAACE,KAAK,EAAE4F,iBAAiB,CAAC,CAAC,EAAEa,WAAW,CAACJ,IAAI,CAAC,EAAED,KAAK,CAACnG,aAAa,IAAIwG,WAAW,CAAC,GAAGJ,IAAI,CAAA,iBAAA,CAAmB,CAAC,EAAED,KAAK,CAAClG,YAAY,IAAIuG,WAAW,CAAC,GAAGJ,IAAI,CAAA,gBAAA,CAAkB,CAAC,EAAE/B,QAAQ,IAAImC,WAAW,CAACnC,QAAQ,EAAE8B,KAAK,CAACpG,KAAK,CAAC2G,SAAS,CAAC;IAC1R,MAAMC,cAAc,GAAG;QACnBZ,mBAAmB,CAAC,CAAC;QACrB1B,QAAQ,IAAIoC,aAAa,CAACpC,QAAQ;QAClCoC,aAAa,CAACL,IAAI,CAAC;KACtB;IACD,IAAID,KAAK,CAACnG,aAAa,EAAE;QACrB,oDAAA;QACAmG,KAAK,CAACnG,aAAa,CAAC0G,SAAS,OAAG/G,mBAAY,EAACE,eAAe,CAACG,aAAa,EAAE,GAAG2G,cAAc,EAAER,KAAK,CAACnG,aAAa,CAAC0G,SAAS,CAAC;IACjI;IACA,IAAIP,KAAK,CAAClG,YAAY,EAAE;QACpB,oDAAA;QACAkG,KAAK,CAAClG,YAAY,CAACyG,SAAS,OAAG/G,mBAAY,EAACE,eAAe,CAACI,YAAY,EAAE,GAAG0G,cAAc,EAAER,KAAK,CAAClG,YAAY,CAACyG,SAAS,CAAC;IAC9H;IACA,OAAOP,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Input/useInputStyles.styles.raw.js

@@ -326,7 +326,9 @@ const useInputStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
+    // eslint-disable-next-line react-hooks/immutability
     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);
+    // eslint-disable-next-line react-hooks/immutability
     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(),
@@ -334,9 +336,11 @@ const useInputStyles_unstable = (state)=>{
         contentStyles[size]
     ];
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
     }
     return state;

package/lib-commonjs/components/Input/useInputStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n  root: {\n    small: tokens.spacingHorizontalSNudge,\n    medium: tokens.spacingHorizontalMNudge,\n    large: tokens.spacingHorizontalM,\n  },\n  input: {\n    small: tokens.spacingHorizontalXXS,\n    medium: tokens.spacingHorizontalXXS,\n    large: tokens.spacingHorizontalSNudge,\n  },\n  combined: {\n    small: tokens.spacingHorizontalS, // SNudge + XXS\n    medium: tokens.spacingHorizontalM, // MNudge + XXS\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n  },\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  gap: tokens.spacingHorizontalXXS,\n  borderRadius: tokens.borderRadiusMedium, // used for all but underline\n  position: 'relative',\n  boxSizing: 'border-box',\n  verticalAlign: 'middle',\n\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n  // This is all for the bottom focus border.\n  // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n  '::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    left: '-1px',\n    bottom: '-1px',\n    right: '-1px',\n\n    // Maintaining the correct corner radius:\n    // Use the whole border-radius as the height and only put radii on the bottom corners.\n    // (Otherwise the radius would be automatically reduced to fit available space.)\n    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n    height: `max(2px, ${tokens.borderRadiusMedium})`,\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n\n    // Flat 2px border:\n    // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n    // (This could be done without trimming using `background: linear-gradient(...)`, but using\n    // borderBottom makes it easier for people to override the color if needed.)\n    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n    clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n    // Animation for focus OUT\n    transform: 'scaleX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationUltraFast,\n    transitionDelay: tokens.curveAccelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within::after': {\n    // Animation for focus IN\n    transform: 'scaleX(1)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationNormal,\n    transitionDelay: tokens.curveDecelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within:active::after': {\n    // This is if the user clicks the field again while it's already focused\n    borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n  },\n  ':focus-within': {\n    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...typographyStyles.body2,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  outline: {\n    // included in rootBaseStyles\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderRadius: '0', // corners look strange if rounded\n    // border is specified in rootBaseStyles, but we only want a bottom border here\n    borderTopStyle: 'none',\n    borderRightStyle: 'none',\n    borderLeftStyle: 'none',\n    // Make the focus underline (::after) match the width of the bottom border\n    '::after': {\n      left: 0,\n      right: 0,\n    },\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': {\n      // remove rounded corners from focus underline\n      borderRadius: '0',\n    },\n  },\n  filled: {\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  // This shadow appearance is deprecated and will be removed in a future release.\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  // This shadow appearance is deprecated and will be removed in a future release.\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow2,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n    // remove the focus border\n    '::after': {\n      content: 'unset',\n    },\n    // remove the focus outline\n    ':focus-within': {\n      outlineStyle: 'none',\n    },\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.root.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.root.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.root.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.root.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.root.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.root.large,\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  alignSelf: 'stretch',\n  boxSizing: 'border-box',\n  flexGrow: 1,\n  minWidth: 0, // required to make the input shrink to fit the wrapper\n  borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n  padding: `0 ${horizontalPadding.combined.medium}`,\n  color: tokens.colorNeutralForeground1,\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n\n  '::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1, // browser style override\n  },\n\n  outlineStyle: 'none', // disable default browser outline\n\n  // Inherit typography styles from root\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n  small: {\n    paddingLeft: horizontalPadding.combined.small,\n    paddingRight: horizontalPadding.combined.small,\n  },\n  medium: {\n    // Included in useInputClassName\n  },\n  large: {\n    paddingLeft: horizontalPadding.combined.large,\n    paddingRight: horizontalPadding.combined.large,\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.input.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.input.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.input.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.input.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.input.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.input.large,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    // included in useContentClassName\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  'use no memo';\n\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    state.contentBefore && rootStyles[`${size}WithContentBefore`],\n    state.contentAfter && rootStyles[`${size}WithContentAfter`],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    inputStyles[size],\n    state.contentBefore && inputStyles[`${size}WithContentBefore`],\n    state.contentAfter && inputStyles[`${size}WithContentAfter`],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n  root: {\n    small: tokens.spacingHorizontalSNudge,\n    medium: tokens.spacingHorizontalMNudge,\n    large: tokens.spacingHorizontalM,\n  },\n  input: {\n    small: tokens.spacingHorizontalXXS,\n    medium: tokens.spacingHorizontalXXS,\n    large: tokens.spacingHorizontalSNudge,\n  },\n  combined: {\n    small: tokens.spacingHorizontalS, // SNudge + XXS\n    medium: tokens.spacingHorizontalM, // MNudge + XXS\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n  },\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  gap: tokens.spacingHorizontalXXS,\n  borderRadius: tokens.borderRadiusMedium, // used for all but underline\n  position: 'relative',\n  boxSizing: 'border-box',\n  verticalAlign: 'middle',\n\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n  // This is all for the bottom focus border.\n  // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n  '::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    left: '-1px',\n    bottom: '-1px',\n    right: '-1px',\n\n    // Maintaining the correct corner radius:\n    // Use the whole border-radius as the height and only put radii on the bottom corners.\n    // (Otherwise the radius would be automatically reduced to fit available space.)\n    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n    height: `max(2px, ${tokens.borderRadiusMedium})`,\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n\n    // Flat 2px border:\n    // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n    // (This could be done without trimming using `background: linear-gradient(...)`, but using\n    // borderBottom makes it easier for people to override the color if needed.)\n    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n    clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n    // Animation for focus OUT\n    transform: 'scaleX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationUltraFast,\n    transitionDelay: tokens.curveAccelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within::after': {\n    // Animation for focus IN\n    transform: 'scaleX(1)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationNormal,\n    transitionDelay: tokens.curveDecelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within:active::after': {\n    // This is if the user clicks the field again while it's already focused\n    borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n  },\n  ':focus-within': {\n    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...typographyStyles.body2,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  outline: {\n    // included in rootBaseStyles\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderRadius: '0', // corners look strange if rounded\n    // border is specified in rootBaseStyles, but we only want a bottom border here\n    borderTopStyle: 'none',\n    borderRightStyle: 'none',\n    borderLeftStyle: 'none',\n    // Make the focus underline (::after) match the width of the bottom border\n    '::after': {\n      left: 0,\n      right: 0,\n    },\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': {\n      // remove rounded corners from focus underline\n      borderRadius: '0',\n    },\n  },\n  filled: {\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  // This shadow appearance is deprecated and will be removed in a future release.\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  // This shadow appearance is deprecated and will be removed in a future release.\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow2,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n    // remove the focus border\n    '::after': {\n      content: 'unset',\n    },\n    // remove the focus outline\n    ':focus-within': {\n      outlineStyle: 'none',\n    },\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.root.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.root.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.root.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.root.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.root.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.root.large,\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  alignSelf: 'stretch',\n  boxSizing: 'border-box',\n  flexGrow: 1,\n  minWidth: 0, // required to make the input shrink to fit the wrapper\n  borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n  padding: `0 ${horizontalPadding.combined.medium}`,\n  color: tokens.colorNeutralForeground1,\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n\n  '::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1, // browser style override\n  },\n\n  outlineStyle: 'none', // disable default browser outline\n\n  // Inherit typography styles from root\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n  small: {\n    paddingLeft: horizontalPadding.combined.small,\n    paddingRight: horizontalPadding.combined.small,\n  },\n  medium: {\n    // Included in useInputClassName\n  },\n  large: {\n    paddingLeft: horizontalPadding.combined.large,\n    paddingRight: horizontalPadding.combined.large,\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.input.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.input.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.input.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.input.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.input.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.input.large,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    // included in useContentClassName\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  'use no memo';\n\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    state.contentBefore && rootStyles[`${size}WithContentBefore`],\n    state.contentAfter && rootStyles[`${size}WithContentAfter`],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    inputStyles[size],\n    state.contentBefore && inputStyles[`${size}WithContentBefore`],\n    state.contentAfter && inputStyles[`${size}WithContentAfter`],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"AAAA;;;;;;;;;;;;IAOaM,eAAAA;;;2BAmUA6G;;;;4BAxU4B,wBAAwB;uBAEK,iBAAiB;AAGhF,wBAAoD;IACzD5G,MAAM;IACNC,OAAO;IACPC,eAAe;IACfC,cAAc;AAChB,EAAE;AAEF,kDAAkD;AAClD,MAAMC,eAAe;IACnBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA,0GAA0G;AAC1G,yGAAyG;AACzG,MAAMC,oBAAoB;IACxBR,MAAM;QACJK,OAAOZ,kBAAAA,CAAOgB,uBAAuB;QACrCH,QAAQb,kBAAAA,CAAOiB,uBAAuB;QACtCH,OAAOd,kBAAAA,CAAOkB,kBAAkB;IAClC;IACAV,OAAO;QACLI,OAAOZ,kBAAAA,CAAOmB,oBAAoB;QAClCN,QAAQb,kBAAAA,CAAOmB,oBAAoB;QACnCL,OAAOd,kBAAAA,CAAOgB,uBAAuB;IACvC;IACAI,UAAU;QACRR,OAAOZ,kBAAAA,CAAOqB,kBAAkB;QAChCR,QAAQb,kBAAAA,CAAOkB,kBAAkB;QACjCJ,OAAO,CAAC,KAAK,EAAEd,kBAAAA,CAAOkB,kBAAkB,CAAC,GAAG,EAAElB,kBAAAA,CAAOgB,uBAAuB,CAAC,CAAC,CAAC;IACjF;AACF;AAEA,MAAMM,uBAAmBpB,sBAAAA,EAAgB;IACvCqB,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,KAAK1B,kBAAAA,CAAOmB,oBAAoB;IAChCQ,cAAc3B,kBAAAA,CAAO4B,kBAAkB;IACvCC,UAAU;IACVC,WAAW;IACXC,eAAe;IAEf,yBAAyB;IACzBC,WAAWrB,aAAaE,MAAM;IAC9B,GAAGZ,4BAAAA,CAAiBgC,KAAK;IAEzB,gCAAgC;IAChCC,iBAAiBlC,kBAAAA,CAAOmC,uBAAuB;IAC/CC,QAAQ,CAAC,UAAU,EAAEpC,kBAAAA,CAAOqC,mBAAmB,EAAE;IACjDC,mBAAmBtC,kBAAAA,CAAOuC,4BAA4B;IAEtD,2CAA2C;IAC3C,+FAA+F;IAC/F,WAAW;QACTT,WAAW;QACXU,SAAS;QACTX,UAAU;QACVY,MAAM;QACNC,QAAQ;QACRC,OAAO;QAEP,yCAAyC;QACzC,sFAAsF;QACtF,gFAAgF;QAChF,qGAAqG;QACrGC,QAAQ,CAAC,SAAS,EAAE5C,kBAAAA,CAAO4B,kBAAkB,CAAC,CAAC,CAAC;QAChDiB,wBAAwB7C,kBAAAA,CAAO4B,kBAAkB;QACjDkB,yBAAyB9C,kBAAAA,CAAO4B,kBAAkB;QAElD,mBAAmB;QACnB,8FAA8F;QAC9F,2FAA2F;QAC3F,4EAA4E;QAC5EmB,cAAc,CAAC,UAAU,EAAE/C,kBAAAA,CAAOgD,wBAAwB,EAAE;QAC5DC,UAAU;QAEV,0BAA0B;QAC1BC,WAAW;QACXC,oBAAoB;QACpBC,oBAAoBpD,kBAAAA,CAAOqD,iBAAiB;QAC5CC,iBAAiBtD,kBAAAA,CAAOuD,kBAAkB;QAE1C,sDAAsD;YACpDH,oBAAoB;YACpBE,iBAAiB;QACnB;IACF;IACA,wBAAwB;QACtB,yBAAyB;QACzBJ,WAAW;QACXC,oBAAoB;QACpBC,oBAAoBpD,kBAAAA,CAAOwD,cAAc;QACzCF,iBAAiBtD,kBAAAA,CAAOyD,kBAAkB;QAE1C,sDAAsD;YACpDL,oBAAoB;YACpBE,iBAAiB;QACnB;IACF;IACA,+BAA+B;QAC7B,wEAAwE;QACxEhB,mBAAmBtC,kBAAAA,CAAO0D,+BAA+B;IAC3D;IACA,iBAAiB;QACfC,SAAS;IACX;AACF;AAEA,MAAMC,oBAAgBzD,iBAAAA,EAAW;IAC/BS,OAAO;QACLoB,WAAWrB,aAAaC,KAAK;QAC7B,GAAGX,4BAAAA,CAAiB4D,QAAQ;IAC9B;IACAhD,QAAQ,CAER;IACAC,OAAO;QACLkB,WAAWrB,aAAaG,KAAK;QAC7B,GAAGb,4BAAAA,CAAiB6D,KAAK;QACzBpC,KAAK1B,kBAAAA,CAAOgB,uBAAuB;IACrC;IACA2C,SAAS,CAET;IACAI,oBAAoB;QAClB,UAAU;YACR,GAAG1D,iBAAAA,CAAW2D,WAAW,CAAChE,kBAAAA,CAAOiE,wBAAwB,CAAC;YAC1D3B,mBAAmBtC,kBAAAA,CAAOkE,iCAAiC;QAC7D;QACA,oFAAoF;QACpF,yBAAyB;YACvB,GAAG7D,iBAAAA,CAAW2D,WAAW,CAAChE,kBAAAA,CAAOmE,0BAA0B,CAAC;YAC5D7B,mBAAmBtC,kBAAAA,CAAOoE,mCAAmC;QAC/D;IACF;IACAC,WAAW;QACTnC,iBAAiBlC,kBAAAA,CAAOsE,0BAA0B;QAClD3C,cAAc;QACd,+EAA+E;QAC/E4C,gBAAgB;QAChBC,kBAAkB;QAClBC,iBAAiB;QACjB,0EAA0E;QAC1E,WAAW;YACThC,MAAM;YACNE,OAAO;QACT;IACF;IACA+B,sBAAsB;QACpB,UAAU;YACRpC,mBAAmBtC,kBAAAA,CAAOkE,iCAAiC;QAC7D;QACA,oFAAoF;QACpF,yBAAyB;YACvB5B,mBAAmBtC,kBAAAA,CAAOoE,mCAAmC;QAC/D;QACA,WAAW;YACT,8CAA8C;YAC9CzC,cAAc;QAChB;IACF;IACAgD,QAAQ;QACN,GAAGtE,iBAAAA,CAAW2D,WAAW,CAAChE,kBAAAA,CAAO4E,sBAAsB,CAAC;IAC1D;IACAC,mBAAmB;QACjB,oFAAoF;QACpF,wBAAwB;YACtB,8CAA8C;YAC9C,GAAGxE,iBAAAA,CAAW2D,WAAW,CAAChE,kBAAAA,CAAO8E,iCAAiC,CAAC;QACrE;IACF;IACAC,SAAS;QACP,iDAAiD;YAC/C,GAAG1E,iBAAAA,CAAW2D,WAAW,CAAChE,kBAAAA,CAAOgF,sBAAsB,CAAC;QAC1D;IACF;IACA,iBAAiB;QACf9C,iBAAiBlC,kBAAAA,CAAOiF,uBAAuB;IACjD;IACA,kBAAkB;QAChB/C,iBAAiBlC,kBAAAA,CAAOmC,uBAAuB;IACjD;IACA,gFAAgF;IAChF,wBAAwB;QACtBD,iBAAiBlC,kBAAAA,CAAOiF,uBAAuB;QAC/CC,WAAWlF,kBAAAA,CAAOmF,OAAO;IAC3B;IACA,gFAAgF;IAChF,yBAAyB;QACvBjD,iBAAiBlC,kBAAAA,CAAOmC,uBAAuB;QAC/C+C,WAAWlF,kBAAAA,CAAOmF,OAAO;IAC3B;IACAC,UAAU;QACRC,QAAQ;QACRnD,iBAAiBlC,kBAAAA,CAAOsE,0BAA0B;QAClD,GAAGjE,iBAAAA,CAAW2D,WAAW,CAAChE,kBAAAA,CAAOsF,0BAA0B,CAAC;QAC5D,kCAAkC;YAChC,GAAGjF,iBAAAA,CAAW2D,WAAW,CAAC,WAAW;QACvC;QACA,0BAA0B;QAC1B,WAAW;YACTxB,SAAS;QACX;QACA,2BAA2B;QAC3B,iBAAiB;YACf+C,cAAc;QAChB;IACF;IACAC,wBAAwB;QACtBC,aAAa1E,kBAAkBR,IAAI,CAACK,KAAK;IAC3C;IACA8E,uBAAuB;QACrBC,cAAc5E,kBAAkBR,IAAI,CAACK,KAAK;IAC5C;IACAgF,yBAAyB;QACvBH,aAAa1E,kBAAkBR,IAAI,CAACM,MAAM;IAC5C;IACAgF,wBAAwB;QACtBF,cAAc5E,kBAAkBR,IAAI,CAACM,MAAM;IAC7C;IACAiF,wBAAwB;QACtBL,aAAa1E,kBAAkBR,IAAI,CAACO,KAAK;IAC3C;IACAiF,uBAAuB;QACrBJ,cAAc5E,kBAAkBR,IAAI,CAACO,KAAK;IAC5C;AACF;AAEA,MAAMkF,wBAAoB9F,sBAAAA,EAAgB;IACxC+F,WAAW;IACXnE,WAAW;IACXoE,UAAU;IACVC,UAAU;IACVC,aAAa;IACbC,SAAS,CAAC,EAAE,EAAEtF,kBAAkBK,QAAQ,CAACP,MAAM,EAAE;IACjDyF,OAAOtG,kBAAAA,CAAOuG,uBAAuB;IACrC,oGAAoG;IACpGrE,iBAAiB;IAEjB,iBAAiB;QACfoE,OAAOtG,kBAAAA,CAAOwG,uBAAuB;QACrCC,SAAS;IACX;IAEAlB,cAAc;IAEd,sCAAsC;IACtCmB,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,YAAY;AACd;AAEA,MAAMC,4BAAwB3G,iBAAAA,EAAW;IACvCS,OAAO;QACL6E,aAAa1E,kBAAkBK,QAAQ,CAACR,KAAK;QAC7C+E,cAAc5E,kBAAkBK,QAAQ,CAACR,KAAK;IAChD;IACAC,QAAQ,CAER;IACAC,OAAO;QACL2E,aAAa1E,kBAAkBK,QAAQ,CAACN,KAAK;QAC7C6E,cAAc5E,kBAAkBK,QAAQ,CAACN,KAAK;IAChD;IACA0E,wBAAwB;QACtBC,aAAa1E,kBAAkBP,KAAK,CAACI,KAAK;IAC5C;IACA8E,uBAAuB;QACrBC,cAAc5E,kBAAkBP,KAAK,CAACI,KAAK;IAC7C;IACAgF,yBAAyB;QACvBH,aAAa1E,kBAAkBP,KAAK,CAACK,MAAM;IAC7C;IACAgF,wBAAwB;QACtBF,cAAc5E,kBAAkBP,KAAK,CAACK,MAAM;IAC9C;IACAiF,wBAAwB;QACtBL,aAAa1E,kBAAkBP,KAAK,CAACM,KAAK;IAC5C;IACAiF,uBAAuB;QACrBJ,cAAc5E,kBAAkBP,KAAK,CAACM,KAAK;IAC7C;IACAsE,UAAU;QACRkB,OAAOtG,kBAAAA,CAAO+G,8BAA8B;QAC5C7E,iBAAiBlC,kBAAAA,CAAOsE,0BAA0B;QAClDe,QAAQ;QACR,iBAAiB;YACfiB,OAAOtG,kBAAAA,CAAO+G,8BAA8B;QAC9C;IACF;AACF;AAEA,MAAMC,0BAAsB9G,sBAAAA,EAAgB;IAC1C4B,WAAW;IACXwE,OAAOtG,kBAAAA,CAAOiH,uBAAuB;IACrC1F,SAAS;IACT,0FAA0F;IAC1F,yBAAyB;IACzB,SAAS;QAAEoF,UAAU;IAAO;AAC9B;AAEA,MAAMO,uBAAmB/G,iBAAAA,EAAW;IAClCiF,UAAU;QACRkB,OAAOtG,kBAAAA,CAAO+G,8BAA8B;IAC9C;IACA,2DAA2D;IAC3DnG,OAAO;QACL,SAAS;YAAE+F,UAAU;QAAO;IAC9B;IACA9F,QAAQ,CAER;IACAC,OAAO;QACL,SAAS;YAAE6F,UAAU;QAAO;IAC9B;AACF;AAKO,MAAMQ,0BAA0B,CAACC;IACtC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGF;IAC7B,MAAMhC,WAAWgC,MAAM5G,KAAK,CAAC4E,QAAQ;IACrC,MAAML,UAAU,GAAGqC,MAAM5G,KAAK,CAAC,eAAe,EAAE,KAAK;IACrD,MAAMmE,SAAS2C,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAa5D;IACnB,MAAM6D,cAAcX;IACpB,MAAMY,gBAAgBR;IAEtB,oDAAoD;IACpDE,MAAM7G,IAAI,CAACoH,SAAS,OAAGvH,mBAAAA,EACrBE,gBAAgBC,IAAI,EACpBe,oBACAkG,UAAU,CAACH,KAAK,EAChBD,MAAM3G,aAAa,IAAI+G,UAAU,CAAC,GAAGH,KAAK,iBAAiB,CAAC,CAAC,EAC7DD,MAAM1G,YAAY,IAAI8G,UAAU,CAAC,GAAGH,KAAK,gBAAgB,CAAC,CAAC,EAC3DG,UAAU,CAACF,WAAW,EACtB,CAAClC,YAAYkC,eAAe,aAAaE,WAAWzD,kBAAkB,EACtE,CAACqB,YAAYkC,eAAe,eAAeE,WAAW9C,oBAAoB,EAC1E,CAACU,YAAYT,UAAU6C,WAAW3C,iBAAiB,EACnDF,UAAU6C,WAAW7C,MAAM,EAC3B,CAACS,YAAYL,WAAWyC,WAAWzC,OAAO,EAC1CK,YAAYoC,WAAWpC,QAAQ,EAC/BgC,MAAM7G,IAAI,CAACoH,SAAS;IAGtB,oDAAoD;IACpDP,MAAM5G,KAAK,CAACmH,SAAS,OAAGvH,mBAAAA,EACtBE,gBAAgBE,KAAK,EACrBwF,qBACAyB,WAAW,CAACJ,KAAK,EACjBD,MAAM3G,aAAa,IAAIgH,WAAW,CAAC,GAAGJ,KAAK,iBAAiB,CAAC,CAAC,EAC9DD,MAAM1G,YAAY,IAAI+G,WAAW,CAAC,GAAGJ,KAAK,gBAAgB,CAAC,CAAC,EAC5DjC,YAAYqC,YAAYrC,QAAQ,EAChCgC,MAAM5G,KAAK,CAACmH,SAAS;IAGvB,MAAMC,iBAAiB;QAACZ;QAAuB5B,YAAYsC,cAActC,QAAQ;QAAEsC,aAAa,CAACL,KAAK;KAAC;IACvG,IAAID,MAAM3G,aAAa,EAAE;QACvB,oDAAoD;QACpD2G,MAAM3G,aAAa,CAACkH,SAAS,OAAGvH,mBAAAA,EAC9BE,gBAAgBG,aAAa,KAC1BmH,gBACHR,MAAM3G,aAAa,CAACkH,SAAS;IAEjC;IACA,IAAIP,MAAM1G,YAAY,EAAE;QACtB,oDAAoD;QACpD0G,MAAM1G,YAAY,CAACiH,SAAS,OAAGvH,mBAAAA,EAC7BE,gBAAgBI,YAAY,KACzBkH,gBACHR,MAAM1G,YAAY,CAACiH,SAAS;IAEhC;IAEA,OAAOP;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.8.1",
+  "version": "9.8.3",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.0",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-field": "^9.5.2",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },