@fluentui/react-input 9.6.7 → 9.7.1

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.1)
+
+Mon, 28 Jul 2025 18:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.0..@fluentui/react-input_v9.7.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.0)
+
+Thu, 17 Jul 2025 13:49:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.6.7..@fluentui/react-input_v9.7.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.6.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.6.6..@fluentui/react-input_v9.6.7)
 
 ### Patches

package/lib/Input.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","Input","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOP,qBAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","Input","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOP,qBAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","inputClassNames","useInputStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","inputClassNames","useInputStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/renderInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInput_unstable","state","root","contentBefore","input","contentAfter"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IACxB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;;;AAGhD,EAAE"}
+{"version":3,"sources":["../src/components/Input/renderInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInput_unstable","state","root","contentBefore","input","contentAfter"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IACxB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;;;AAGhD,EAAE"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["import { 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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"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}

package/lib-commonjs/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Input.ts"],"sourcesContent":["export type { InputOnChangeData, InputProps, InputSlots, InputState } from './components/Input/index';\nexport {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n} from './components/Input/index';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,KAAK;eAALA,YAAK;;IACLC,eAAe;eAAfA,sBAAe;;IACfC,oBAAoB;eAApBA,2BAAoB;;IACpBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,iBAAiB;eAAjBA,wBAAiB;;;uBACZ"}
+{"version":3,"sources":["../src/Input.ts"],"sourcesContent":["export type { InputOnChangeData, InputProps, InputSlots, InputState } from './components/Input/index';\nexport {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n} from './components/Input/index';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["Input","React","forwardRef","props","ref","state","useInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","renderInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;0BACW;6BACG;sCACG;qCAGI;AAKrC,MAAMA,QAAAA,WAAAA,GAAyCC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQC,IAAAA,2BAAAA,EAAkBH,OAAOC;IAEvCG,IAAAA,6CAAAA,EAAwBF;IAExBG,IAAAA,gDAAAA,EAA4B,2BAA2BH;IAEvD,OAAOI,IAAAA,iCAAAA,EAAqBJ;AAC9B;AAEAL,MAAMU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","Input","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;0BACG,aAAa;6BACV,gBAAgB;sCACb,0BAA0B;qCAGtB,kCAAkC;AAKvE,cAAMA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,+BAAAA,EAAkBM,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOP,iCAAAA,EAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAILC,eAAe;eAAfA,qCAAe;;IAFfC,oBAAoB;eAApBA,iCAAoB;;IAEHC,uBAAuB;eAAvBA,6CAAuB;;IADxCC,iBAAiB;eAAjBA,2BAAiB;;;uBAHJ;6BAEe;0BACH;sCACuB"}
+{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","inputClassNames","useInputStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAILG,qCAAe;;;eAFfF,iCAAoB;;;eAEHG,6CAAuB;;;eADxCF,2BAAiB;;;uBAHJ,UAAU;6BAEK,gBAAgB;0BACnB,aAAa;sCACU,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/renderInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["renderInput_unstable","state","assertSlots","_jsxs","root","contentBefore","_jsx","input","contentAfter"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,uBAAuB,CAACC;IACnCC,IAAAA,2BAAAA,EAAwBD;IACxB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,aAAa,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,aAAa,EAAA,CAAA;0BAC5CC,IAAAA,eAAA,EAACL,MAAMM,KAAK,EAAA,CAAA;YACXN,MAAMO,YAAY,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,YAAY,EAAA,CAAA;;;AAGhD"}
+{"version":3,"sources":["../src/components/Input/renderInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInput_unstable","state","root","contentBefore","input","contentAfter"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IACxB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,aAAa,IAAA,WAAA,GAAI,mBAAA,EAACF,MAAME,aAAa,EAAA,CAAA;8BAC5C,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXH,MAAMI,YAAY,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,YAAY,EAAA,CAAA;;;AAGhD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(props.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(props.contentBefore, { elementType: 'span' }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useInput_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","overrides","useOverrides","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","useControllableState","state","defaultState","defaultValue","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","slot","always","defaultProps","type","primary","elementType","optional","useEventCallback","ev","newValue","target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;4BACuB;gCAC0C;qCAElC;AAW/C,MAAMA,oBAAoB,CAACC,OAAmBC;IACnDD,QAAQE,IAAAA,yCAAAA,EAA8BF,OAAO;QAAEG,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYC,IAAAA,0CAAAA;QAEoBD;IAAtC,MAAM,EAAEE,OAAO,QAAQ,EAAEC,aAAaH,CAAAA,oCAAAA,UAAUI,sBAAsB,AAAtBA,MAAsB,QAAhCJ,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEK,QAAQ,EAAE,GAAGX;IAElG,IACEY,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,GACzD;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7CC,OAAOpB,MAAMiB,KAAK;QAClBI,cAAcrB,MAAMsB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAcC,IAAAA,yCAAAA,EAA0B;QAC5CzB;QACA0B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAQ;YAAY;YAAS;SAAe;IAClE;IAEA,MAAMP,QAAoB;QACxBZ;QACAC;QACAmB,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOG,oBAAAA,CAAKC,MAAM,CAAClC,MAAM8B,KAAK,EAAE;YAC9BK,cAAc;gBACZC,MAAM;gBACNnC;gBACA,GAAGuB,YAAYa,OAAO;YACxB;YACAC,aAAa;QACf;QACAN,cAAcC,oBAAAA,CAAKM,QAAQ,CAACvC,MAAMgC,YAAY,EAAE;YAAEM,aAAa;QAAO;QACtEP,eAAeE,oBAAAA,CAAKM,QAAQ,CAACvC,MAAM+B,aAAa,EAAE;YAAEO,aAAa;QAAO;QACxET,MAAMI,oBAAAA,CAAKC,MAAM,CAAClC,MAAM6B,IAAI,EAAE;YAC5BM,cAAcX,YAAYK,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMU,KAAK,CAACb,KAAK,GAAGA;IACpBG,MAAMU,KAAK,CAACnB,QAAQ,GAAG6B,IAAAA,gCAAAA,EAAiBC,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAAC1B,KAAK;QAChCN,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAW8B,IAAI;YAAExB,OAAOyB;QAAS;QACjCxB,SAASwB;IACX;IAEA,OAAOtB;AACT"}
+{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(props.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(props.contentBefore, { elementType: 'span' }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":";;;;+BAeaQ;;;;;;;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,YAAYP,8CAAAA;QAEoBO;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEI,QAAQ,EAAE,GAAGT;IAElG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,OAAGtB,oCAAAA,EAAqB;QAC7CuB,OAAOjB,MAAMe,KAAK;QAClBG,cAAclB,MAAMmB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,kBAAc5B,yCAAAA,EAA0B;QAC5CO;QACAsB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAQ;YAAY;YAAS;SAAe;IAClE;IAEA,MAAMN,QAAoB;QACxBX;QACAC;QACAiB,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAO9B,oBAAAA,CAAKiC,MAAM,CAAC7B,MAAM0B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACN9B;gBACA,GAAGoB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAchC,oBAAAA,CAAKsC,QAAQ,CAAClC,MAAM4B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAe/B,oBAAAA,CAAKsC,QAAQ,CAAClC,MAAM2B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM7B,oBAAAA,CAAKiC,MAAM,CAAC7B,MAAMyB,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAhB,MAAMS,KAAK,CAACX,KAAK,GAAGA;IACpBE,MAAMS,KAAK,CAACjB,QAAQ,OAAGd,gCAAAA,EAAiBwC,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACtB,KAAK;QAChCN,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAW0B,IAAI;YAAEpB,OAAOqB;QAAS;QACjCpB,SAASoB;IACX;IAEA,OAAOnB;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["import { 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":["inputClassNames","useInputStyles_unstable","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","tokens","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","__resetStyles","r","s","useRootStyles","__styles","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","mergeClasses","contentClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["import { 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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["import { 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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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;;uBAAQ"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAAEC,sBAAe;;;eAAEC,2BAAoB;;;eAAEC,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.6.7",
+  "version": "9.7.1",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,11 +19,11 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.3.7",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
+    "@fluentui/react-field": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },