@fluentui/react-input 9.8.3 → 9.8.4

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Tue, 26 May 2026 09:34:23 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.4)
+
+Wed, 24 Jun 2026 11:03:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.3..@fluentui/react-input_v9.8.4)
+
+### Patches
+
+- fix: move Field control props to base hooks ([PR #36312](https://github.com/microsoft/fluentui/pull/36312) by dmytrokirpa@microsoft.com)
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
 ## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.3)
 
-Tue, 26 May 2026 09:34:23 GMT 
+Tue, 26 May 2026 09:40:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.2..@fluentui/react-input_v9.8.3)
 
 ### Patches

package/lib/components/Input/useInput.js

@@ -11,11 +11,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - props from this instance of Input
  * @param ref - reference to `<input>` element of Input
  */ export const useInput_unstable = (props, ref)=>{
-    props = useFieldControlProps_unstable(props, {
-        supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
-    });
     const overrides = useOverrides();
     var _overrides_inputDefaultAppearance;
     const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
@@ -37,14 +32,18 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - User provided props to the Input component.
  * @param ref - User provided ref to be passed to the Input component.
  */ export const useInputBase_unstable = (props, ref)=>{
-    const { onChange } = props;
+    const fieldControlProps = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
     const [value, setValue] = useControllableState({
-        state: props.value,
-        defaultState: props.defaultValue,
+        state: fieldControlProps.value,
+        defaultState: fieldControlProps.defaultValue,
         initialState: ''
     });
     const nativeProps = getPartitionedNativeProps({
-        props,
+        props: fieldControlProps,
         primarySlotTagName: 'input',
         excludedPropNames: [
             'onChange',
@@ -59,7 +58,7 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
             contentBefore: 'span',
             contentAfter: 'span'
         },
-        input: slot.always(props.input, {
+        input: slot.always(fieldControlProps.input, {
             defaultProps: {
                 type: 'text',
                 ref,
@@ -67,21 +66,22 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
             },
             elementType: 'input'
         }),
-        contentAfter: slot.optional(props.contentAfter, {
+        contentAfter: slot.optional(fieldControlProps.contentAfter, {
             elementType: 'span'
         }),
-        contentBefore: slot.optional(props.contentBefore, {
+        contentBefore: slot.optional(fieldControlProps.contentBefore, {
             elementType: 'span'
         }),
-        root: slot.always(props.root, {
+        root: slot.always(fieldControlProps.root, {
             defaultProps: nativeProps.root,
             elementType: 'span'
         })
     };
     state.input.value = value;
     state.input.onChange = useEventCallback((ev)=>{
+        var _fieldControlProps_onChange;
         const newValue = ev.target.value;
-        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+        (_fieldControlProps_onChange = fieldControlProps.onChange) === null || _fieldControlProps_onChange === void 0 ? void 0 : _fieldControlProps_onChange.call(fieldControlProps, ev, {
             value: newValue
         });
         setValue(newValue);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const { onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(props.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(props.contentBefore, { elementType: 'span' }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","onChange","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnDD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAEoBO;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGT;IAEtG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWR;IAE/C,OAAO;QACLK;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAAChB,OAAuBC;IAC3D,MAAM,EAAEgB,QAAQ,EAAE,GAAGjB;IAErB,MAAM,CAACkB,OAAOC,SAAS,GAAGzB,qBAAqB;QAC7CqB,OAAOf,MAAMkB,KAAK;QAClBE,cAAcpB,MAAMqB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMV,QAAwB;QAC5BW,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,KAAKmC,MAAM,CAAC/B,MAAM4B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,KAAKwC,QAAQ,CAACpC,MAAM8B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAejC,KAAKwC,QAAQ,CAACpC,MAAM6B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM/B,KAAKmC,MAAM,CAAC/B,MAAM2B,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEApB,MAAMa,KAAK,CAACV,KAAK,GAAGA;IACpBH,MAAMa,KAAK,CAACX,QAAQ,GAAGtB,iBAAiB0C,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACrB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWoB,IAAI;YAAEnB,OAAOoB;QAAS;QACjCnB,SAASmB;IACX;IAEA,OAAOvB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const fieldControlProps = useFieldControlProps_unstable(props, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n\n  const [value, setValue] = useControllableState({\n    state: fieldControlProps.value,\n    defaultState: fieldControlProps.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props: fieldControlProps,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(fieldControlProps.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(fieldControlProps.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(fieldControlProps.contentBefore, { elementType: 'span' }),\n    root: slot.always(fieldControlProps.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    fieldControlProps.onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","fieldControlProps","supportsLabelFor","supportsRequired","supportsSize","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","onChange","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAMC,YAAYJ;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWL;IAE/C,OAAO;QACLE;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACb,OAAuBC;IAC3D,MAAMa,oBAAoBtB,8BAA8BQ,OAAO;QAC7De,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAChB;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGzB,qBAAqB;QAC7CkB,OAAOE,kBAAkBI,KAAK;QAC9BE,cAAcN,kBAAkBO,YAAY;QAC5CC,cAAc;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO,OAAOc;QACPU,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMb,QAAwB;QAC5Bc,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,KAAKmC,MAAM,CAACjB,kBAAkBc,KAAK,EAAE;YAC1CI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,KAAKwC,QAAQ,CAACtB,kBAAkBgB,YAAY,EAAE;YAAEK,aAAa;QAAO;QAClFN,eAAejC,KAAKwC,QAAQ,CAACtB,kBAAkBe,aAAa,EAAE;YAAEM,aAAa;QAAO;QACpFR,MAAM/B,KAAKmC,MAAM,CAACjB,kBAAkBa,IAAI,EAAE;YACxCK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAvB,MAAMgB,KAAK,CAACV,KAAK,GAAGA;IACpBN,MAAMgB,KAAK,CAACS,QAAQ,GAAG1C,iBAAiB2C,CAAAA;YAEtCxB;QADA,MAAMyB,WAAWD,GAAGE,MAAM,CAACtB,KAAK;SAChCJ,8BAAAA,kBAAkBuB,QAAQ,cAA1BvB,kDAAAA,iCAAAA,mBAA6BwB,IAAI;YAAEpB,OAAOqB;QAAS;QACnDpB,SAASoB;IACX;IAEA,OAAO3B;AACT,EAAE"}

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

@@ -229,8 +229,6 @@ const useContentStyles = /*#__PURE__*/__styles({
  * Apply styling to the Input slots based on the state
  */
 export const useInputStyles_unstable = state => {
-  'use no memo';
-
   const {
     size,
     appearance

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

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

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

@@ -306,7 +306,6 @@ const useContentStyles = makeStyles({
 /**
  * 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';

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

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

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

@@ -21,11 +21,6 @@ const _reactfield = require("@fluentui/react-field");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useInput_unstable = (props, ref)=>{
-    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
-        supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
-    });
     const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
     var _overrides_inputDefaultAppearance;
     const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
@@ -41,14 +36,18 @@ const useInput_unstable = (props, ref)=>{
     };
 };
 const useInputBase_unstable = (props, ref)=>{
-    const { onChange } = props;
+    const fieldControlProps = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
     const [value, setValue] = (0, _reactutilities.useControllableState)({
-        state: props.value,
-        defaultState: props.defaultValue,
+        state: fieldControlProps.value,
+        defaultState: fieldControlProps.defaultValue,
         initialState: ''
     });
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
-        props,
+        props: fieldControlProps,
         primarySlotTagName: 'input',
         excludedPropNames: [
             'onChange',
@@ -63,7 +62,7 @@ const useInputBase_unstable = (props, ref)=>{
             contentBefore: 'span',
             contentAfter: 'span'
         },
-        input: _reactutilities.slot.always(props.input, {
+        input: _reactutilities.slot.always(fieldControlProps.input, {
             defaultProps: {
                 type: 'text',
                 ref,
@@ -71,21 +70,22 @@ const useInputBase_unstable = (props, ref)=>{
             },
             elementType: 'input'
         }),
-        contentAfter: _reactutilities.slot.optional(props.contentAfter, {
+        contentAfter: _reactutilities.slot.optional(fieldControlProps.contentAfter, {
             elementType: 'span'
         }),
-        contentBefore: _reactutilities.slot.optional(props.contentBefore, {
+        contentBefore: _reactutilities.slot.optional(fieldControlProps.contentBefore, {
             elementType: 'span'
         }),
-        root: _reactutilities.slot.always(props.root, {
+        root: _reactutilities.slot.always(fieldControlProps.root, {
             defaultProps: nativeProps.root,
             elementType: 'span'
         })
     };
     state.input.value = value;
     state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
+        var _fieldControlProps_onChange;
         const newValue = ev.target.value;
-        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+        (_fieldControlProps_onChange = fieldControlProps.onChange) === null || _fieldControlProps_onChange === void 0 ? void 0 : _fieldControlProps_onChange.call(fieldControlProps, ev, {
             value: newValue
         });
         setValue(newValue);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const { onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(props.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(props.contentBefore, { elementType: 'span' }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","onChange","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;yBAmDawB;eAAAA;;IAlCAjB,iBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,0BAA0B,CAACC,OAAmBC;IACnDD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEoBO;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,qCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGT;IAEtG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWR;IAE/C,OAAO;QACLK;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACf,OAAuBC;IAC3D,MAAM,EAAEgB,QAAQ,EAAE,GAAGjB;IAErB,MAAM,CAACkB,OAAOC,SAAS,OAAGzB,oCAAAA,EAAqB;QAC7CqB,OAAOf,MAAMkB,KAAK;QAClBE,cAAcpB,MAAMqB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMV,QAAwB;QAC5BW,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,oBAAAA,CAAKmC,MAAM,CAAC/B,MAAM4B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,oBAAAA,CAAKwC,QAAQ,CAACpC,MAAM8B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAejC,oBAAAA,CAAKwC,QAAQ,CAACpC,MAAM6B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM/B,oBAAAA,CAAKmC,MAAM,CAAC/B,MAAM2B,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEApB,MAAMa,KAAK,CAACV,KAAK,GAAGA;IACpBH,MAAMa,KAAK,CAACX,QAAQ,OAAGtB,gCAAAA,EAAiB0C,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACrB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWoB,IAAI;YAAEnB,OAAOoB;QAAS;QACjCnB,SAASmB;IACX;IAEA,OAAOvB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const state = useInputBase_unstable(baseProps, ref);\n\n  return {\n    size,\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n *\n * @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n  const fieldControlProps = useFieldControlProps_unstable(props, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n\n  const [value, setValue] = useControllableState({\n    state: fieldControlProps.value,\n    defaultState: fieldControlProps.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props: fieldControlProps,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputBaseState = {\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: slot.always(fieldControlProps.input, {\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    contentAfter: slot.optional(fieldControlProps.contentAfter, { elementType: 'span' }),\n    contentBefore: slot.optional(fieldControlProps.contentBefore, { elementType: 'span' }),\n    root: slot.always(fieldControlProps.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    fieldControlProps.onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","fieldControlProps","supportsLabelFor","supportsRequired","supportsSize","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","onChange","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;yBAiDaqB;eAAAA;;IAhCAd,iBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,0BAA0B,CAACC,OAAmBC;IACnD,MAAMC,gBAAYJ,0CAAAA;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,AAAtBA,MAAsB,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWL;IAE/C,OAAO;QACLE;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACZ,OAAuBC;IAC3D,MAAMa,wBAAoBtB,yCAAAA,EAA8BQ,OAAO;QAC7De,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAChB;IAEA,MAAM,CAACC,OAAOC,SAAS,OAAGzB,oCAAAA,EAAqB;QAC7CkB,OAAOE,kBAAkBI,KAAK;QAC9BE,cAAcN,kBAAkBO,YAAY;QAC5CC,cAAc;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO,OAAOc;QACPU,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMb,QAAwB;QAC5Bc,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,oBAAAA,CAAKmC,MAAM,CAACjB,kBAAkBc,KAAK,EAAE;YAC1CI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,oBAAAA,CAAKwC,QAAQ,CAACtB,kBAAkBgB,YAAY,EAAE;YAAEK,aAAa;QAAO;QAClFN,eAAejC,oBAAAA,CAAKwC,QAAQ,CAACtB,kBAAkBe,aAAa,EAAE;YAAEM,aAAa;QAAO;QACpFR,MAAM/B,oBAAAA,CAAKmC,MAAM,CAACjB,kBAAkBa,IAAI,EAAE;YACxCK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAvB,MAAMgB,KAAK,CAACV,KAAK,GAAGA;IACpBN,MAAMgB,KAAK,CAACS,QAAQ,OAAG1C,gCAAAA,EAAiB2C,CAAAA;YAEtCxB;QADA,MAAMyB,WAAWD,GAAGE,MAAM,CAACtB,KAAK;SAChCJ,8BAAAA,kBAAkBuB,QAAAA,AAAQ,MAAA,QAA1BvB,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAAAA,IAAAA,CAAAA,mBAA6BwB,IAAI;YAAEpB,OAAOqB;QAAS;QACnDpB,SAASoB;IACX;IAEA,OAAO3B;AACT,EAAE"}

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

@@ -466,7 +466,6 @@ const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useInputStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.input.disabled;
     const invalid = `${state.input['aria-invalid']}` === 'true';

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

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

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

@@ -318,7 +318,6 @@ const useContentStyles = (0, _react.makeStyles)({
     }
 });
 const useInputStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.input.disabled;
     const invalid = `${state.input['aria-invalid']}` === 'true';

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

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

package/package.json

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