@fluentui/react-input 9.3.6 → 9.4.0

package/CHANGELOG.json

@@ -2,7 +2,67 @@
   "name": "@fluentui/react-input",
   "entries": [
     {
-      "date": "Thu, 16 Feb 2023 19:18:18 GMT",
+      "date": "Wed, 08 Mar 2023 17:39:01 GMT",
+      "tag": "@fluentui/react-input_v9.4.0",
+      "version": "9.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "d489c1a10a96019bbcc3c811f7c853980b727c67",
+            "comment": "feat: custom styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.22",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-text to v9.2.4",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 23:06:05 GMT",
+      "tag": "@fluentui/react-input_v9.3.7",
+      "version": "9.3.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "fbee0f3858ee67d53ee2540531a0cfb6497165cb",
+            "comment": "chore: Clean up Input's interactive styles"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "29ed7fb57a05a6595835f947193460886e80cfc5",
+            "comment": "fix: Fix the width of Input's focus border with appearance=underline"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Feb 2023 19:18:47 GMT",
       "tag": "@fluentui/react-input_v9.3.6",
       "version": "9.3.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Thu, 16 Feb 2023 19:18:18 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:39:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.0)
+
+Wed, 08 Mar 2023 17:39:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.3.7..@fluentui/react-input_v9.4.0)
+
+### Minor changes
+
+- feat: custom styles ([PR #27065](https://github.com/microsoft/fluentui/pull/27065) by gcox@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.22 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-text to v9.2.4 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.3.7)
+
+Wed, 22 Feb 2023 23:06:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.3.6..@fluentui/react-input_v9.3.7)
+
+### Patches
+
+- chore: Clean up Input's interactive styles ([PR #26865](https://github.com/microsoft/fluentui/pull/26865) by behowell@microsoft.com)
+- fix: Fix the width of Input's focus border with appearance=underline ([PR #26881](https://github.com/microsoft/fluentui/pull/26881) by behowell@microsoft.com)
+
 ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.3.6)
 
-Thu, 16 Feb 2023 19:18:18 GMT 
+Thu, 16 Feb 2023 19:18:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.3.5..@fluentui/react-input_v9.3.6)
 
 ### Patches

package/lib/components/Input/Input.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useInput_unstable } from './useInput';
 import { renderInput_unstable } from './renderInput';
 import { useInputStyles_unstable } from './useInputStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * The Input component allows people to enter and edit text.
  */
 export const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useInput_unstable(props, ref);
   useInputStyles_unstable(state);
+  const {
+    useInputStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderInput_unstable(state);
 });
 Input.displayName = 'Input';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAI1D;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE3CJ,uBAAuB,CAACK,KAAK,CAAC;EAC9B,OAAON,oBAAoB,CAACM,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","Input","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"]}
+{"version":3,"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHooks_unstable","Input","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-input/src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  const { useInputStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAG1D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGR,iBAAiB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE3CL,uBAAuB,CAACM,KAAK,CAAC;EAE9B,MAAM;IAAEN,uBAAuB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACnFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACM,WAAW,GAAG,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EACxD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,aAAa,iBAAIP,oBAACI,KAAK,CAACG,aAAa;IAAA,GAAKF,SAAS,CAACE;EAAa,EAAI,eAC5EP,oBAACI,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,EACnCJ,KAAK,CAACK,YAAY,iBAAIT,oBAACI,KAAK,CAACK,YAAY;IAAA,GAAKJ,SAAS,CAACI;EAAY,EAAI,CAC9D;AAEjB,CAAC","names":["React","getSlots","renderInput_unstable","state","slots","slotProps","root","contentBefore","input","contentAfter"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/renderInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","renderInput_unstable","state","slots","slotProps","createElement","root","contentBefore","input","contentAfter"],"sources":["../src/packages/react-components/react-input/src/components/Input/renderInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EACxD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,aAAa,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,aAAa;IAAA,GAAKH,SAAS,CAACG;EAAa,EAAI,eAC5ER,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnCL,KAAK,CAACM,YAAY,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,YAAY;IAAA,GAAKL,SAAS,CAACK;EAAY,EAAI,CAC9D;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SACEA,yBAAyB,EACzBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,QACX,2BAA2B;AAElC,SAASC,qBAAqB,IAAIC,YAAY,QAAQ,iCAAiC;AAEvF;;;;;;;;;AASA,OAAO,MAAMC,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;;EACnG,MAAMC,SAAS,GAAGJ,YAAY,EAAE;EAEhC,MAAM;IAAEK,IAAI,GAAG,QAAQ;IAAEC,UAAU,GAAG,eAAS,CAACC,sBAAsB,mCAAI,SAAS;IAAEC;EAAQ,CAAE,GAAGN,KAAK;EAEvG,IACEO,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,KACpCL,UAAU,KAAK,sBAAsB,IAAIA,UAAU,KAAK,uBAAuB,CAAC,EACjF;IACA;IACAM,OAAO,CAACC,KAAK,CACX,8GAA8G,GAC5G,UAAU,CACb;;EAGH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,oBAAoB,CAAC;IAC7CmB,KAAK,EAAEd,KAAK,CAACY,KAAK;IAClBG,YAAY,EAAEf,KAAK,CAACgB,YAAY;IAChCC,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAGzB,yBAAyB,CAAC;IAC5CO,KAAK;IACLmB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;GAChE,CAAC;EAEF,MAAMN,KAAK,GAAe;IACxBX,IAAI;IACJC,UAAU;IACViB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE;KACf;IACDF,KAAK,EAAE7B,gBAAgB,CAACM,KAAK,CAACuB,KAAK,EAAE;MACnCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,IAAI,EAAE,MAAM;QACZ3B,GAAG;QACH,GAAGiB,WAAW,CAACW;;KAElB,CAAC;IACFJ,YAAY,EAAE/B,gBAAgB,CAACM,KAAK,CAACyB,YAAY,CAAC;IAClDD,aAAa,EAAE9B,gBAAgB,CAACM,KAAK,CAACwB,aAAa,CAAC;IACpDF,IAAI,EAAE5B,gBAAgB,CAACM,KAAK,CAACsB,IAAI,EAAE;MACjCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAET,WAAW,CAACI;KAC3B;GACF;EAEDR,KAAK,CAACS,KAAK,CAACX,KAAK,GAAGA,KAAK;EACzBE,KAAK,CAACS,KAAK,CAACjB,QAAQ,GAAGV,gBAAgB,CAACkC,EAAE,IAAG;IAC3C,MAAMC,QAAQ,GAAGD,EAAE,CAACE,MAAM,CAACpB,KAAK;IAChCN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGwB,EAAE,EAAE;MAAElB,KAAK,EAAEmB;IAAQ,CAAE,CAAC;IACnClB,QAAQ,CAACkB,QAAQ,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOjB,KAAK;AACd,CAAC","names":["getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","required","defaultProps","type","primary","ev","newValue","target"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\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', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"]}
+{"version":3,"names":["getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","size","appearance","_a","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","required","defaultProps","type","primary","ev","newValue","target"],"sources":["../src/packages/react-components/react-input/src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\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', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"mappings":"AACA,SACEA,yBAAyB,EACzBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,QACX,2BAA2B;AAElC,SAASC,qBAAqB,IAAIC,YAAY,QAAQ,iCAAiC;AAEvF;;;;;;;;;AASA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;;EACnG,MAAMC,SAAS,GAAGJ,YAAY,EAAE;EAEhC,MAAM;IAAEK,IAAI,GAAG,QAAQ;IAAEC,UAAU,GAAG,CAAAC,EAAA,GAAAH,SAAS,CAACI,sBAAsB,cAAAD,EAAA,cAAAA,EAAA,GAAI,SAAS;IAAEE;EAAQ,CAAE,GAAGP,KAAK;EAEvG,IACEQ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,KACpCN,UAAU,KAAK,sBAAsB,IAAIA,UAAU,KAAK,uBAAuB,CAAC,EACjF;IACA;IACAO,OAAO,CAACC,KAAK,CACX,8GAA8G,GAC5G,UAAU,CACb;;EAGH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGnB,oBAAoB,CAAC;IAC7CoB,KAAK,EAAEf,KAAK,CAACa,KAAK;IAClBG,YAAY,EAAEhB,KAAK,CAACiB,YAAY;IAChCC,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAG1B,yBAAyB,CAAC;IAC5CO,KAAK;IACLoB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;GAChE,CAAC;EAEF,MAAMN,KAAK,GAAe;IACxBZ,IAAI;IACJC,UAAU;IACVkB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE;KACf;IACDF,KAAK,EAAE9B,gBAAgB,CAACM,KAAK,CAACwB,KAAK,EAAE;MACnCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,IAAI,EAAE,MAAM;QACZ5B,GAAG;QACH,GAAGkB,WAAW,CAACW;;KAElB,CAAC;IACFJ,YAAY,EAAEhC,gBAAgB,CAACM,KAAK,CAAC0B,YAAY,CAAC;IAClDD,aAAa,EAAE/B,gBAAgB,CAACM,KAAK,CAACyB,aAAa,CAAC;IACpDF,IAAI,EAAE7B,gBAAgB,CAACM,KAAK,CAACuB,IAAI,EAAE;MACjCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAET,WAAW,CAACI;KAC3B;GACF;EAEDR,KAAK,CAACS,KAAK,CAACX,KAAK,GAAGA,KAAK;EACzBE,KAAK,CAACS,KAAK,CAACjB,QAAQ,GAAGX,gBAAgB,CAACmC,EAAE,IAAG;IAC3C,MAAMC,QAAQ,GAAGD,EAAE,CAACE,MAAM,CAACpB,KAAK;IAChCN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGwB,EAAE,EAAE;MAAElB,KAAK,EAAEmB;IAAQ,CAAE,CAAC;IACnClB,QAAQ,CAACkB,QAAQ,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOjB,KAAK;AACd,CAAC"}

package/lib/components/Input/useInputStyles.js

@@ -12,77 +12,7 @@ const fieldHeights = {
   medium: '32px',
   large: '40px'
 };
-const rootBaseStyles = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  flexWrap: 'nowrap',
-  gap: tokens.spacingHorizontalXXS,
-  borderRadius: tokens.borderRadiusMedium,
-  position: 'relative',
-  boxSizing: 'border-box',
-  // size: medium (default)
-  minHeight: fieldHeights.medium,
-  padding: `0 ${tokens.spacingHorizontalMNudge}`,
-  ...typographyStyles.body1,
-  // appearance: outline (default)
-  backgroundColor: tokens.colorNeutralBackground1,
-  border: `1px solid ${tokens.colorNeutralStroke1}`,
-  borderBottomColor: tokens.colorNeutralStrokeAccessible
-};
-const rootInteractiveStyles = {
-  // This is all for the bottom focus border.
-  // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
-  '::after': {
-    boxSizing: 'border-box',
-    content: '""',
-    position: 'absolute',
-    left: '-1px',
-    bottom: '-1px',
-    right: '-1px',
-    // Maintaining the correct corner radius:
-    // Use the whole border-radius as the height and only put radii on the bottom corners.
-    // (Otherwise the radius would be automatically reduced to fit available space.)
-    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
-    height: `max(2px, ${tokens.borderRadiusMedium})`,
-    borderBottomLeftRadius: tokens.borderRadiusMedium,
-    borderBottomRightRadius: tokens.borderRadiusMedium,
-    // Flat 2px border:
-    // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
-    // (This could be done without trimming using `background: linear-gradient(...)`, but using
-    // borderBottom makes it easier for people to override the color if needed.)
-    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,
-    clipPath: 'inset(calc(100% - 2px) 0 0 0)',
-    // Animation for focus OUT
-    transform: 'scaleX(0)',
-    transitionProperty: 'transform',
-    transitionDuration: tokens.durationUltraFast,
-    transitionDelay: tokens.curveAccelerateMid,
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-      transitionDelay: '0.01ms'
-    }
-  },
-  ':focus-within::after': {
-    // Animation for focus IN
-    transform: 'scaleX(1)',
-    transitionProperty: 'transform',
-    transitionDuration: tokens.durationNormal,
-    transitionDelay: tokens.curveDecelerateMid,
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-      transitionDelay: '0.01ms'
-    }
-  },
-  ':focus-within:active::after': {
-    // This is if the user clicks the field again while it's already focused
-    borderBottomColor: tokens.colorCompoundBrandStrokePressed
-  },
-  ':focus-within': {
-    outline: '2px solid transparent'
-  }
-};
-const useRootNonInteractiveClassName = /*#__PURE__*/__resetStyles("rqztyh5", null, [".rqztyh5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}"]);
-const useRootInteractiveClassName = /*#__PURE__*/__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
+const useRootClassName = /*#__PURE__*/__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   small: {
     sshi5w: "f1pha7fy",
@@ -124,7 +54,9 @@ const useRootStyles = /*#__PURE__*/__styles({
     Btl43ni: ["f1ozlkrg", "f10ostut"],
     icvyot: "f1ern45e",
     vrafjx: ["f1n71otn", "f1deefiw"],
-    wvpqe5: ["f1deefiw", "f1n71otn"]
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
+    B1piin3: ["f15yvnhg", "f1n6gb5g"]
   },
   underlineInteractive: {
     oetu4i: "f1l4zc64",
@@ -176,10 +108,12 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bjwas2f: "fg455y9",
     Bn1d65q: ["f1rvyvqg", "f14g86mu"],
     Bxeuatn: "f1cwzwz",
-    n51gp8: ["f14g86mu", "f1rvyvqg"]
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    Bsft5z2: "fhr9occ",
+    Bduesf4: "f99w1ws"
   }
 }, {
-  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}"],
   h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
   a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
   m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
@@ -190,7 +124,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }]]
+  }]],
+  w: [".f99w1ws:focus-within{outline-style:none;}"]
 });
 const useInputClassName = /*#__PURE__*/__resetStyles("rvp2gzh", null, [".rvp2gzh{box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalXXS);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".rvp2gzh::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
 const useInputElementStyles = /*#__PURE__*/__styles({
@@ -233,9 +168,6 @@ export const useInputStyles_unstable = state => {
   const disabled = state.input.disabled;
   const invalid = `${state.input['aria-invalid']}` === 'true';
   const filled = appearance.startsWith('filled');
-  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-  // different styles applied, which makes it ok to conditionally change which hook is called.
-  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","rootBaseStyles","display","alignItems","flexWrap","gap","spacingHorizontalXXS","borderRadius","borderRadiusMedium","position","boxSizing","minHeight","padding","spacingHorizontalMNudge","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","rootInteractiveStyles","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootNonInteractiveClassName","useRootInteractiveClassName","useRootStyles","useInputClassName","useInputElementStyles","useContentClassName","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","useRootClassName","rootStyles","inputStyles","contentStyles","className","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { GriffelResetStyle } from '@griffel/react';\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\nconst rootBaseStyles: GriffelResetStyle = {\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\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n};\n\nconst rootInteractiveStyles: GriffelResetStyle = {\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 useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);\nconst useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.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    ...shorthands.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  },\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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\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  },\n});\n\nconst useInputClassName = makeResetStyles({\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 ${tokens.spacingHorizontalXXS}`,\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  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\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  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with\n  // different styles applied, which makes it ok to conditionally change which hook is called.\n  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","useRootStyles","sshi5w","uwmqm3","z189sj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bsft5z2","Bduesf4","d","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","kwki1k","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["../src/packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\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\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\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    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.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    ...shorthands.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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\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});\n\nconst useInputClassName = makeResetStyles({\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 ${tokens.spacingHorizontalXXS}`,\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  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\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  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,KAAK,EAAEC,eAAe,QAAoB,aAAa;AAIhE;AACA,OAAO,MAAMC,oBAAoB,gBAAGJ,4BAA4B,CAACG,eAAe,CAACE,IAAI,CAAC;AACtF;AACA,OAAO,MAAMC,UAAU,gBAAyCL,mBAAmB,CAACC,KAAK,CAAC","names":["getDeprecatedFieldClassNames","makeDeprecatedField","Input","inputClassNames","inputFieldClassNames","root","InputField"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input, inputClassNames, InputProps } from '../../Input';\n\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport type InputFieldProps = DeprecatedFieldProps<InputProps>;\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const inputFieldClassNames = getDeprecatedFieldClassNames(inputClassNames.root);\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const InputField: ForwardRefComponent<InputFieldProps> = makeDeprecatedField(Input);\n"]}
+{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Input","inputClassNames","inputFieldClassNames","root","InputField"],"sources":["../src/packages/react-components/react-input/src/components/InputField/InputField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input, inputClassNames, InputProps } from '../../Input';\n\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport type InputFieldProps = DeprecatedFieldProps<InputProps>;\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const inputFieldClassNames = getDeprecatedFieldClassNames(inputClassNames.root);\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const InputField: ForwardRefComponent<InputFieldProps> = makeDeprecatedField(Input);\n"],"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,KAAK,EAAEC,eAAe,QAAoB,aAAa;AAIhE;AACA,OAAO,MAAMC,oBAAoB,gBAAGJ,4BAA4B,CAACG,eAAe,CAACE,IAAI,CAAC;AACtF;AACA,OAAO,MAAMC,UAAU,gBAAyCL,mBAAmB,CAACC,KAAK,CAAC"}

package/lib-amd/components/Input/Input.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./useInput", "./renderInput", "./useInputStyles"], function (require, exports, React, useInput_1, renderInput_1, useInputStyles_1) {
+define(["require", "exports", "react", "./useInput", "./renderInput", "./useInputStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useInput_1, renderInput_1, useInputStyles_1, react_shared_contexts_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Input = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useInput", "./renderInput", "./useInpu
     exports.Input = React.forwardRef(function (props, ref) {
         var state = useInput_1.useInput_unstable(props, ref);
         useInputStyles_1.useInputStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useInputStyles_unstable;
+        useCustomStyles(state);
         return renderInput_1.renderInput_unstable(state);
     });
     exports.Input.displayName = 'Input';

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/Input.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/Input.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAyB,eAAe,GAAK,oDAA4B,EAAE,wBAAnC,CAAoC;QACpF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  const { useInputStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"]}

package/lib-amd/components/Input/useInputStyles.js

@@ -14,12 +14,11 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
         medium: '32px',
         large: '40px',
     };
-    var rootBaseStyles = tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap', gap: react_theme_1.tokens.spacingHorizontalXXS, borderRadius: react_theme_1.tokens.borderRadiusMedium, position: 'relative', boxSizing: 'border-box', 
+    var useRootClassName = react_1.makeResetStyles(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap', gap: react_theme_1.tokens.spacingHorizontalXXS, borderRadius: react_theme_1.tokens.borderRadiusMedium, position: 'relative', boxSizing: 'border-box', 
         // size: medium (default)
         minHeight: fieldHeights.medium, padding: "0 " + react_theme_1.tokens.spacingHorizontalMNudge }, react_theme_1.typographyStyles.body1), { 
         // appearance: outline (default)
-        backgroundColor: react_theme_1.tokens.colorNeutralBackground1, border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1, borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible });
-    var rootInteractiveStyles = {
+        backgroundColor: react_theme_1.tokens.colorNeutralBackground1, border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1, borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible, 
         // This is all for the bottom focus border.
         // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
         '::after': {
@@ -51,8 +50,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
                 transitionDuration: '0.01ms',
                 transitionDelay: '0.01ms',
             },
-        },
-        ':focus-within::after': {
+        }, ':focus-within::after': {
             // Animation for focus IN
             transform: 'scaleX(1)',
             transitionProperty: 'transform',
@@ -62,17 +60,12 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
                 transitionDuration: '0.01ms',
                 transitionDelay: '0.01ms',
             },
-        },
-        ':focus-within:active::after': {
+        }, ':focus-within:active::after': {
             // This is if the user clicks the field again while it's already focused
             borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
-        },
-        ':focus-within': {
+        }, ':focus-within': {
             outline: '2px solid transparent',
-        },
-    };
-    var useRootNonInteractiveClassName = react_1.makeResetStyles(rootBaseStyles);
-    var useRootInteractiveClassName = react_1.makeResetStyles(tslib_1.__assign(tslib_1.__assign({}, rootBaseStyles), rootInteractiveStyles));
+        } }));
     var useRootStyles = react_1.makeStyles({
         small: tslib_1.__assign({ minHeight: fieldHeights.small, paddingLeft: react_theme_1.tokens.spacingHorizontalSNudge, paddingRight: react_theme_1.tokens.spacingHorizontalSNudge }, react_theme_1.typographyStyles.caption1),
         medium: {
@@ -89,7 +82,12 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
         },
         underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderRadius(0)), { 
             // border is specified in rootBaseStyles, but we only want a bottom border here
-            borderTopStyle: 'none', borderRightStyle: 'none', borderLeftStyle: 'none' }),
+            borderTopStyle: 'none', borderRightStyle: 'none', borderLeftStyle: 'none', 
+            // Make the focus underline (::after) match the width of the bottom border
+            '::after': {
+                left: 0,
+                right: 0,
+            } }),
         underlineInteractive: {
             ':hover': {
                 borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
@@ -122,7 +120,15 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
             backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
             boxShadow: react_theme_1.tokens.shadow2,
         },
-        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), 
+            // remove the focus border
+            '::after': {
+                content: 'unset',
+            }, 
+            // remove the focus outline
+            ':focus-within': {
+                outlineStyle: 'none',
+            } }),
     });
     var useInputClassName = react_1.makeResetStyles({
         boxSizing: 'border-box',
@@ -189,9 +195,6 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
         var disabled = state.input.disabled;
         var invalid = "" + state.input['aria-invalid'] === 'true';
         var filled = appearance.startsWith('filled');
-        // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-        // different styles applied, which makes it ok to conditionally change which hook is called.
-        var useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
         var rootStyles = useRootStyles();
         var inputStyles = useInputElementStyles();
         var contentStyles = useContentStyles();

package/lib-amd/components/Input/useInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { GriffelResetStyle } from '@griffel/react';\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\nconst rootBaseStyles: GriffelResetStyle = {\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\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n};\n\nconst rootInteractiveStyles: GriffelResetStyle = {\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 useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);\nconst useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.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    ...shorthands.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  },\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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\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  },\n});\n\nconst useInputClassName = makeResetStyles({\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 ${tokens.spacingHorizontalXXS}`,\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  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\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  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with\n  // different styles applied, which makes it ok to conditionally change which hook is called.\n  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"file":"useInputStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\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\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\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    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.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    ...shorthands.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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\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});\n\nconst useInputClassName = makeResetStyles({\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 ${tokens.spacingHorizontalXXS}`,\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  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\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  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/Input.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/Input.ts"],"sourcesContent":["export * from './components/Input/index';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-input/src/Input.ts"],"sourcesContent":["export * from './components/Input/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,8BAAAC,OAAA"}

package/lib-commonjs/InputField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/InputField.ts"],"sourcesContent":["export * from './components/InputField/index';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-input/src/InputField.ts"],"sourcesContent":["export * from './components/InputField/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mCAAAC,OAAA"}

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

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useInput_1 = /*#__PURE__*/require("./useInput");
 const renderInput_1 = /*#__PURE__*/require("./renderInput");
 const useInputStyles_1 = /*#__PURE__*/require("./useInputStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * The Input component allows people to enter and edit text.
  */
 exports.Input = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useInput_1.useInput_unstable(props, ref);
   useInputStyles_1.useInputStyles_unstable(state);
+  const {
+    useInputStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderInput_1.renderInput_unstable(state);
 });
 exports.Input.displayName = 'Input';

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useInput_1","useInputStyles_1","renderInput_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"]}
+{"version":3,"names":["React","require","useInput_1","renderInput_1","useInputStyles_1","react_shared_contexts_1","exports","Input","forwardRef","props","ref","state","useInput_unstable","useInputStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderInput_unstable","displayName"],"sources":["../src/packages/react-components/react-input/src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  const { useInputStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,UAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AACA,MAAAG,gBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,KAAK,gBAAoCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGT,UAAA,CAAAU,iBAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CN,gBAAA,CAAAS,uBAAuB,CAACF,KAAK,CAAC;EAE9B,MAAM;IAAEE,uBAAuB,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACnFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,aAAA,CAAAa,oBAAoB,CAACL,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,OAAA,CAAAC,KAAK,CAACU,WAAW,GAAG,OAAO"}

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

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

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/index.ts"],"sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-input/src/components/Input/index.ts"],"sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,aAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EACxD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,aAAa,IAAIF,oBAACH,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,EAC5EF,oBAACH,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnCN,KAAK,CAACO,YAAY,IAAIJ,oBAACH,KAAK,CAACO,YAAY;IAAA,GAAKN,SAAS,CAACM;EAAY,EAAI,CAC9D;AAEjB,CAAC;AATYC,4BAAoB","names":["renderInput_unstable","state","slots","slotProps","react_utilities_1","React","root","contentBefore","input","contentAfter","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/renderInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","require","react_utilities_1","renderInput_unstable","state","slots","slotProps","getSlots","createElement","root","contentBefore","input","contentAfter","exports"],"sources":["../src/packages/react-components/react-input/src/components/Input/renderInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAaH,KAAK,CAAC;EACxD,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,aAAa,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,EAC5EV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnCN,KAAK,CAACO,YAAY,IAAIZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,YAAY;IAAA,GAAKN,SAAS,CAACM;EAAY,EAAI,CAC9D;AAEjB,CAAC;AATYC,OAAA,CAAAV,oBAAoB,GAAAA,oBAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AAOA;AAEA;;;;;;;;;AASO,MAAMA,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;;EACnG,MAAMC,SAAS,GAAGC,6CAAY,EAAE;EAEhC,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAEC,UAAU,GAAG,eAAS,CAACC,sBAAsB,mCAAI,SAAS;IAAEC;EAAQ,CAAE,GAAGP,KAAK;EAEvG,IACEQ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,KACpCL,UAAU,KAAK,sBAAsB,IAAIA,UAAU,KAAK,uBAAuB,CAAC,EACjF;IACA;IACAM,OAAO,CAACC,KAAK,CACX,8GAA8G,GAC5G,UAAU,CACb;;EAGH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,sCAAoB,CAAC;IAC7CC,KAAK,EAAEhB,KAAK,CAACa,KAAK;IAClBI,YAAY,EAAEjB,KAAK,CAACkB,YAAY;IAChCC,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAGL,2CAAyB,CAAC;IAC5Cf,KAAK;IACLqB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;GAChE,CAAC;EAEF,MAAMN,KAAK,GAAe;IACxBZ,IAAI;IACJC,UAAU;IACVkB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE;KACf;IACDF,KAAK,EAAEV,kCAAgB,CAACf,KAAK,CAACyB,KAAK,EAAE;MACnCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,IAAI,EAAE,MAAM;QACZ7B,GAAG;QACH,GAAGmB,WAAW,CAACW;;KAElB,CAAC;IACFJ,YAAY,EAAEZ,kCAAgB,CAACf,KAAK,CAAC2B,YAAY,CAAC;IAClDD,aAAa,EAAEX,kCAAgB,CAACf,KAAK,CAAC0B,aAAa,CAAC;IACpDF,IAAI,EAAET,kCAAgB,CAACf,KAAK,CAACwB,IAAI,EAAE;MACjCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAET,WAAW,CAACI;KAC3B;GACF;EAEDR,KAAK,CAACS,KAAK,CAACZ,KAAK,GAAGA,KAAK;EACzBG,KAAK,CAACS,KAAK,CAAClB,QAAQ,GAAGQ,kCAAgB,CAACiB,EAAE,IAAG;IAC3C,MAAMC,QAAQ,GAAGD,EAAE,CAACE,MAAM,CAACrB,KAAK;IAChCN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGyB,EAAE,EAAE;MAAEnB,KAAK,EAAEoB;IAAQ,CAAE,CAAC;IACnCnB,QAAQ,CAACmB,QAAQ,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOjB,KAAK;AACd,CAAC;AA7DYmB,yBAAiB","names":["useInput_unstable","props","ref","overrides","react_shared_contexts_1","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","react_utilities_1","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","required","defaultProps","type","primary","ev","newValue","target","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\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', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_utilities_1","require","react_shared_contexts_1","useInput_unstable","props","ref","overrides","useOverrides_unstable","size","appearance","_a","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","useControllableState","state","defaultState","defaultValue","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","resolveShorthand","required","defaultProps","type","primary","useEventCallback","ev","newValue","target","exports"],"sources":["../src/packages/react-components/react-input/src/components/Input/useInput.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\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', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAOA,MAAAC,uBAAA,gBAAAD,OAAA;AAEA;;;;;;;;;AASO,MAAME,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;;EACnG,MAAMC,SAAS,GAAGJ,uBAAA,CAAAK,qBAAY,EAAE;EAEhC,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAEC,UAAU,GAAG,CAAAC,EAAA,GAAAJ,SAAS,CAACK,sBAAsB,cAAAD,EAAA,cAAAA,EAAA,GAAI,SAAS;IAAEE;EAAQ,CAAE,GAAGR,KAAK;EAEvG,IACES,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,KACpCN,UAAU,KAAK,sBAAsB,IAAIA,UAAU,KAAK,uBAAuB,CAAC,EACjF;IACA;IACAO,OAAO,CAACC,KAAK,CACX,8GAA8G,GAC5G,UAAU,CACb;;EAGH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGnB,iBAAA,CAAAoB,oBAAoB,CAAC;IAC7CC,KAAK,EAAEjB,KAAK,CAACc,KAAK;IAClBI,YAAY,EAAElB,KAAK,CAACmB,YAAY;IAChCC,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAGzB,iBAAA,CAAA0B,yBAAyB,CAAC;IAC5CtB,KAAK;IACLuB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;GAChE,CAAC;EAEF,MAAMP,KAAK,GAAe;IACxBb,IAAI;IACJC,UAAU;IACVoB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE;KACf;IACDF,KAAK,EAAE/B,iBAAA,CAAAkC,gBAAgB,CAAC9B,KAAK,CAAC2B,KAAK,EAAE;MACnCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,IAAI,EAAE,MAAM;QACZhC,GAAG;QACH,GAAGoB,WAAW,CAACa;;KAElB,CAAC;IACFL,YAAY,EAAEjC,iBAAA,CAAAkC,gBAAgB,CAAC9B,KAAK,CAAC6B,YAAY,CAAC;IAClDD,aAAa,EAAEhC,iBAAA,CAAAkC,gBAAgB,CAAC9B,KAAK,CAAC4B,aAAa,CAAC;IACpDF,IAAI,EAAE9B,iBAAA,CAAAkC,gBAAgB,CAAC9B,KAAK,CAAC0B,IAAI,EAAE;MACjCK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAEX,WAAW,CAACK;KAC3B;GACF;EAEDT,KAAK,CAACU,KAAK,CAACb,KAAK,GAAGA,KAAK;EACzBG,KAAK,CAACU,KAAK,CAACnB,QAAQ,GAAGZ,iBAAA,CAAAuC,gBAAgB,CAACC,EAAE,IAAG;IAC3C,MAAMC,QAAQ,GAAGD,EAAE,CAACE,MAAM,CAACxB,KAAK;IAChCN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG4B,EAAE,EAAE;MAAEtB,KAAK,EAAEuB;IAAQ,CAAE,CAAC;IACnCtB,QAAQ,CAACsB,QAAQ,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOpB,KAAK;AACd,CAAC;AA7DYsB,OAAA,CAAAxC,iBAAiB,GAAAA,iBAAA"}

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

@@ -18,77 +18,7 @@ const fieldHeights = {
   medium: '32px',
   large: '40px'
 };
-const rootBaseStyles = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  flexWrap: 'nowrap',
-  gap: react_theme_1.tokens.spacingHorizontalXXS,
-  borderRadius: react_theme_1.tokens.borderRadiusMedium,
-  position: 'relative',
-  boxSizing: 'border-box',
-  // size: medium (default)
-  minHeight: fieldHeights.medium,
-  padding: `0 ${react_theme_1.tokens.spacingHorizontalMNudge}`,
-  ...react_theme_1.typographyStyles.body1,
-  // appearance: outline (default)
-  backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
-  border: `1px solid ${react_theme_1.tokens.colorNeutralStroke1}`,
-  borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible
-};
-const rootInteractiveStyles = {
-  // This is all for the bottom focus border.
-  // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
-  '::after': {
-    boxSizing: 'border-box',
-    content: '""',
-    position: 'absolute',
-    left: '-1px',
-    bottom: '-1px',
-    right: '-1px',
-    // Maintaining the correct corner radius:
-    // Use the whole border-radius as the height and only put radii on the bottom corners.
-    // (Otherwise the radius would be automatically reduced to fit available space.)
-    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
-    height: `max(2px, ${react_theme_1.tokens.borderRadiusMedium})`,
-    borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
-    borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
-    // Flat 2px border:
-    // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
-    // (This could be done without trimming using `background: linear-gradient(...)`, but using
-    // borderBottom makes it easier for people to override the color if needed.)
-    borderBottom: `2px solid ${react_theme_1.tokens.colorCompoundBrandStroke}`,
-    clipPath: 'inset(calc(100% - 2px) 0 0 0)',
-    // Animation for focus OUT
-    transform: 'scaleX(0)',
-    transitionProperty: 'transform',
-    transitionDuration: react_theme_1.tokens.durationUltraFast,
-    transitionDelay: react_theme_1.tokens.curveAccelerateMid,
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-      transitionDelay: '0.01ms'
-    }
-  },
-  ':focus-within::after': {
-    // Animation for focus IN
-    transform: 'scaleX(1)',
-    transitionProperty: 'transform',
-    transitionDuration: react_theme_1.tokens.durationNormal,
-    transitionDelay: react_theme_1.tokens.curveDecelerateMid,
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-      transitionDelay: '0.01ms'
-    }
-  },
-  ':focus-within:active::after': {
-    // This is if the user clicks the field again while it's already focused
-    borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed
-  },
-  ':focus-within': {
-    outline: '2px solid transparent'
-  }
-};
-const useRootNonInteractiveClassName = /*#__PURE__*/react_1.__resetStyles("rqztyh5", null, [".rqztyh5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}"]);
-const useRootInteractiveClassName = /*#__PURE__*/react_1.__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
+const useRootClassName = /*#__PURE__*/react_1.__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   small: {
     sshi5w: "f1pha7fy",
@@ -130,7 +60,9 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Btl43ni: ["f1ozlkrg", "f10ostut"],
     icvyot: "f1ern45e",
     vrafjx: ["f1n71otn", "f1deefiw"],
-    wvpqe5: ["f1deefiw", "f1n71otn"]
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
+    B1piin3: ["f15yvnhg", "f1n6gb5g"]
   },
   underlineInteractive: {
     oetu4i: "f1l4zc64",
@@ -182,10 +114,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Bjwas2f: "fg455y9",
     Bn1d65q: ["f1rvyvqg", "f14g86mu"],
     Bxeuatn: "f1cwzwz",
-    n51gp8: ["f14g86mu", "f1rvyvqg"]
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    Bsft5z2: "fhr9occ",
+    Bduesf4: "f99w1ws"
   }
 }, {
-  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}"],
   h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
   a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
   m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
@@ -196,7 +130,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }]]
+  }]],
+  w: [".f99w1ws:focus-within{outline-style:none;}"]
 });
 const useInputClassName = /*#__PURE__*/react_1.__resetStyles("rvp2gzh", null, [".rvp2gzh{box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalXXS);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".rvp2gzh::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
 const useInputElementStyles = /*#__PURE__*/react_1.__styles({
@@ -239,9 +174,6 @@ const useInputStyles_unstable = state => {
   const disabled = state.input.disabled;
   const invalid = `${state.input['aria-invalid']}` === 'true';
   const filled = appearance.startsWith('filled');
-  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-  // different styles applied, which makes it ok to conditionally change which hook is called.
-  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","rootBaseStyles","display","alignItems","flexWrap","gap","react_theme_1","spacingHorizontalXXS","borderRadius","borderRadiusMedium","position","boxSizing","minHeight","padding","spacingHorizontalMNudge","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","rootInteractiveStyles","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootNonInteractiveClassName","react_1","useRootInteractiveClassName","useRootStyles","useInputClassName","useInputElementStyles","useContentClassName","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","useRootClassName","rootStyles","inputStyles","contentStyles","className","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { GriffelResetStyle } from '@griffel/react';\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\nconst rootBaseStyles: GriffelResetStyle = {\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\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n};\n\nconst rootInteractiveStyles: GriffelResetStyle = {\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 useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);\nconst useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.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    ...shorthands.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  },\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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\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  },\n});\n\nconst useInputClassName = makeResetStyles({\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 ${tokens.spacingHorizontalXXS}`,\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  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\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  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with\n  // different styles applied, which makes it ok to conditionally change which hook is called.\n  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_theme_1","require","react_1","exports","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","__resetStyles","useRootStyles","__styles","sshi5w","uwmqm3","z189sj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bsft5z2","Bduesf4","d","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","kwki1k","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","mergeClasses","contentClasses"],"sources":["../src/packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\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\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\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    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.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    ...shorthands.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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\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});\n\nconst useInputClassName = makeResetStyles({\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 ${tokens.spacingHorizontalXXS}`,\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  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\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  state.root.className = mergeClasses(\n    inputClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAIA;AACaA,4BAAoB,gBAAGC,0CAA4B,CAACC,uBAAe,CAACC,IAAI,CAAC;AACtF;AACaH,kBAAU,gBAAyCC,iCAAmB,CAACC,aAAK,CAAC","names":["exports","react_field_1","Input_1","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input, inputClassNames, InputProps } from '../../Input';\n\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport type InputFieldProps = DeprecatedFieldProps<InputProps>;\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const inputFieldClassNames = getDeprecatedFieldClassNames(inputClassNames.root);\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const InputField: ForwardRefComponent<InputFieldProps> = makeDeprecatedField(Input);\n"]}
+{"version":3,"names":["react_field_1","require","Input_1","exports","inputFieldClassNames","getDeprecatedFieldClassNames","inputClassNames","root","InputField","makeDeprecatedField","Input"],"sources":["../src/packages/react-components/react-input/src/components/InputField/InputField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input, inputClassNames, InputProps } from '../../Input';\n\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport type InputFieldProps = DeprecatedFieldProps<InputProps>;\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const inputFieldClassNames = getDeprecatedFieldClassNames(inputClassNames.root);\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const InputField: ForwardRefComponent<InputFieldProps> = makeDeprecatedField(Input);\n"],"mappings":";;;;;;AAAA;AACA,MAAAA,aAAA,gBAAAC,OAAA;AAEA,MAAAC,OAAA,gBAAAD,OAAA;AAIA;AACaE,OAAA,CAAAC,oBAAoB,gBAAGJ,aAAA,CAAAK,4BAA4B,CAACH,OAAA,CAAAI,eAAe,CAACC,IAAI,CAAC;AACtF;AACaJ,OAAA,CAAAK,UAAU,gBAAyCR,aAAA,CAAAS,mBAAmB,CAACP,OAAA,CAAAQ,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/InputField/index.ts"],"sourcesContent":["export * from './InputField';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-input/src/components/InputField/index.ts"],"sourcesContent":["export * from './InputField';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AAGjG;AACA;AAASF;EAAAC;EAAAC;IAAA,8BAAU;EAAA;AAAA;AAAyBF;EAAAC;EAAAC;IAAA,wCAAoB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"]}
+{"version":3,"names":["Input_1","require","Object","defineProperty","exports","enumerable","get","Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","InputField_1","InputField","inputFieldClassNames"],"sources":["../src/packages/react-components/react-input/src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,gBAAAC,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAO,KAAK;EAAA;AAAA;AAAEL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAQ,eAAe;EAAA;AAAA;AAAEN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAS,oBAAoB;EAAA;AAAA;AAAEP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAU,uBAAuB;EAAA;AAAA;AAAER,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAW,iBAAiB;EAAA;AAAA;AAGjG;AACA,IAAAC,YAAA,gBAAAX,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,YAAA,CAAAC,UAAU;EAAA;AAAA;AAAyBX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,YAAA,CAAAE,oBAAoB;EAAA;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.3.6",
+  "version": "9.4.0",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,15 +28,15 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
-    "@fluentui/react-text": "^9.2.3",
+    "@fluentui/react-text": "^9.2.4",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.21",
-    "@fluentui/react-shared-contexts": "^9.2.0",
+    "@fluentui/react-field": "9.0.0-alpha.22",
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.6.0",
+    "@fluentui/react-utilities": "^9.6.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },