@fluentui/react-input 9.4.68 → 9.4.70

package/CHANGELOG.md

@@ -1,21 +1,44 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Mon, 18 Mar 2024 19:44:52 GMT and should not be manually modified.
+This log was last generated on Tue, 02 Apr 2024 09:41:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.70)
+
+Tue, 02 Apr 2024 09:41:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.69..@fluentui/react-input_v9.4.70)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.60 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+
+## [9.4.69](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.69)
+
+Mon, 25 Mar 2024 11:12:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.68..@fluentui/react-input_v9.4.69)
+
+### Patches
+
+- Revert #30845 "fix: Input should start with undefined, same as textarea" ([PR #30845](https://github.com/microsoft/fluentui/pull/30845) by lingfangao@hotmail.com)
+- chore: Increase hit target of input element to fill to the border ([PR #30825](https://github.com/microsoft/fluentui/pull/30825) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.1.59 ([PR #30845](https://github.com/microsoft/fluentui/pull/30845) by beachball)
+
 ## [9.4.68](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.68)
 
-Mon, 18 Mar 2024 19:44:52 GMT 
+Mon, 18 Mar 2024 19:50:46 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.67..@fluentui/react-input_v9.4.68)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.1.58 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-theme to v9.1.19 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-utilities to v9.18.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
+- Bump @fluentui/react-field to v9.1.58 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
 
 ## [9.4.67](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.67)
 

package/lib/components/Input/useInput.js

@@ -26,7 +26,7 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
     const [value, setValue] = useControllableState({
         state: props.value,
         defaultState: props.defaultValue,
-        initialState: undefined
+        initialState: ''
     });
     const nativeProps = getPartitionedNativeProps({
         props,

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

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

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

@@ -12,15 +12,32 @@ const fieldHeights = {
   medium: '32px',
   large: '40px'
 };
-const useRootClassName = /*#__PURE__*/__resetStyles("r1jtohuq", "rl1z2p5", {
-  r: [".r1jtohuq{display:inline-flex;align-items:center;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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r1jtohuq:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:inline-flex;align-items:center;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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".rl1z2p5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"],
-  s: ["@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
+// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
+// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
+const horizontalPadding = {
+  root: {
+    small: tokens.spacingHorizontalSNudge,
+    medium: tokens.spacingHorizontalMNudge,
+    large: tokens.spacingHorizontalM
+  },
+  input: {
+    small: tokens.spacingHorizontalXXS,
+    medium: tokens.spacingHorizontalXXS,
+    large: tokens.spacingHorizontalSNudge
+  },
+  combined: {
+    small: tokens.spacingHorizontalS,
+    medium: tokens.spacingHorizontalM,
+    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
+  }
+};
+const useRootClassName = /*#__PURE__*/__resetStyles("r1qp7m7v", "r1e50w0p", {
+  r: [".r1qp7m7v{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;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);}", ".r1qp7m7v::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r1qp7m7v:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r1qp7m7v:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1qp7m7v:focus-within{outline:2px solid transparent;}", ".r1e50w0p{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;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);}", ".r1e50w0p::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r1e50w0p:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r1e50w0p:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1e50w0p:focus-within{outline:2px solid transparent;}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.r1qp7m7v::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1qp7m7v:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1e50w0p::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1e50w0p:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
 });
 const useRootStyles = /*#__PURE__*/__styles({
   small: {
     sshi5w: "f1pha7fy",
-    uwmqm3: ["fk8j09s", "fdw0yi8"],
-    z189sj: ["fdw0yi8", "fk8j09s"],
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
@@ -29,8 +46,6 @@ const useRootStyles = /*#__PURE__*/__styles({
   medium: {},
   large: {
     sshi5w: "f1w5jphr",
-    uwmqm3: ["f1uw59to", "fw5db7e"],
-    z189sj: ["fw5db7e", "f1uw59to"],
     Bahqtrf: "fk6fouc",
     Be2twd7: "fod5ikn",
     Bhrd7zp: "figsok6",
@@ -114,9 +129,27 @@ const useRootStyles = /*#__PURE__*/__styles({
     n51gp8: ["f14g86mu", "f1rvyvqg"],
     Bsft5z2: "fhr9occ",
     Bduesf4: "f99w1ws"
+  },
+  smallWithContentBefore: {
+    uwmqm3: ["fk8j09s", "fdw0yi8"]
+  },
+  smallWithContentAfter: {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  mediumWithContentBefore: {
+    uwmqm3: ["f1ng84yb", "f11gcy0p"]
+  },
+  mediumWithContentAfter: {
+    z189sj: ["f11gcy0p", "f1ng84yb"]
+  },
+  largeWithContentBefore: {
+    uwmqm3: ["f1uw59to", "fw5db7e"]
+  },
+  largeWithContentAfter: {
+    z189sj: ["fw5db7e", "f1uw59to"]
   }
 }, {
-  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{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;}"],
+  d: [".f1pha7fy{min-height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{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;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}"],
   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;}}", {
@@ -128,10 +161,33 @@ const useRootStyles = /*#__PURE__*/__styles({
   }]],
   w: [".f99w1ws:focus-within{outline-style:none;}"]
 });
-const useInputClassName = /*#__PURE__*/__resetStyles("rvp2gzh", null, [".rvp2gzh{box-sizing:border-box;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 useInputClassName = /*#__PURE__*/__resetStyles("r12stul0", null, [".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r12stul0:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
 const useInputElementStyles = /*#__PURE__*/__styles({
+  small: {
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  medium: {},
   large: {
-    uwmqm3: ["fk8j09s", "fdw0yi8"],
+    uwmqm3: ["fnphzt9", "flt1dlf"],
+    z189sj: ["flt1dlf", "fnphzt9"]
+  },
+  smallWithContentBefore: {
+    uwmqm3: ["fgiv446", "ffczdla"]
+  },
+  smallWithContentAfter: {
+    z189sj: ["ffczdla", "fgiv446"]
+  },
+  mediumWithContentBefore: {
+    uwmqm3: ["fgiv446", "ffczdla"]
+  },
+  mediumWithContentAfter: {
+    z189sj: ["ffczdla", "fgiv446"]
+  },
+  largeWithContentBefore: {
+    uwmqm3: ["fk8j09s", "fdw0yi8"]
+  },
+  largeWithContentAfter: {
     z189sj: ["fdw0yi8", "fk8j09s"]
   },
   disabled: {
@@ -141,7 +197,7 @@ const useInputElementStyles = /*#__PURE__*/__styles({
     yvdlaj: "fahhnxm"
   }
 }, {
-  d: [".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"]
+  d: [".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"]
 });
 const useContentClassName = /*#__PURE__*/__resetStyles("r1572tok", null, [".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}", ".r1572tok>svg{font-size:20px;}"]);
 const useContentStyles = /*#__PURE__*/__styles({
@@ -172,8 +228,8 @@ export const useInputStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();
-  state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
-  state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), size === 'large' && inputStyles.large, disabled && inputStyles.disabled, state.input.className);
+  state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+  state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
   const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];
   if (state.contentBefore) {
     state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);

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

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

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

@@ -29,7 +29,7 @@ const useInput_unstable = (props, ref)=>{
     const [value, setValue] = (0, _reactutilities.useControllableState)({
         state: props.value,
         defaultState: props.defaultValue,
-        initialState: undefined
+        initialState: ''
     });
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
         props,

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

@@ -1 +1 @@
-{"version":3,"sources":["useInput.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 */ export const useInput_unstable = (props, ref)=>{\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const overrides = useOverrides();\n    var _overrides_inputDefaultAppearance;\n    const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', onChange } = props;\n    if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {\n        // eslint-disable-next-line no-console\n        console.error(\"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" + ' future.');\n    }\n    const [value, setValue] = useControllableState({\n        state: props.value,\n        defaultState: props.defaultValue,\n        initialState: undefined\n    });\n    const nativeProps = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'size',\n            'onChange',\n            'value',\n            'defaultValue'\n        ]\n    });\n    const state = {\n        size,\n        appearance,\n        components: {\n            root: 'span',\n            input: 'input',\n            contentBefore: 'span',\n            contentAfter: 'span'\n        },\n        input: slot.always(props.input, {\n            defaultProps: {\n                type: 'text',\n                ref,\n                ...nativeProps.primary\n            },\n            elementType: 'input'\n        }),\n        contentAfter: slot.optional(props.contentAfter, {\n            elementType: 'span'\n        }),\n        contentBefore: slot.optional(props.contentBefore, {\n            elementType: 'span'\n        }),\n        root: slot.always(props.root, {\n            defaultProps: nativeProps.root,\n            elementType: 'span'\n        })\n    };\n    state.input.value = value;\n    state.input.onChange = useEventCallback((ev)=>{\n        const newValue = ev.target.value;\n        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n            value: newValue\n        });\n        setValue(newValue);\n    });\n    return state;\n};\n"],"names":["useInput_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","overrides","useOverrides","_overrides_inputDefaultAppearance","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","useControllableState","state","defaultState","defaultValue","initialState","undefined","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","slot","always","defaultProps","type","primary","elementType","optional","useEventCallback","ev","newValue","target"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;4BACuB;gCAC0C;qCAClC;AAS3C,MAAMA,oBAAoB,CAACC,OAAOC;IACzCD,QAAQE,IAAAA,yCAA6B,EAACF,OAAO;QACzCG,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAClB;IACA,MAAMC,YAAYC,IAAAA,0CAAY;IAC9B,IAAIC;IACJ,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAa,AAACF,CAAAA,oCAAoCF,UAAUK,sBAAsB,AAAD,MAAO,QAAQH,sCAAsC,KAAK,IAAIA,oCAAoC,SAAS,EAAEI,QAAQ,EAAE,GAAGZ;IACpO,IAAIa,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAiBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAAI;QAC5H,sCAAsC;QACtCM,QAAQC,KAAK,CAAC,iHAAiH;IACnI;IACA,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,oCAAoB,EAAC;QAC3CC,OAAOrB,MAAMkB,KAAK;QAClBI,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAClB;IACA,MAAMC,cAAcC,IAAAA,yCAAyB,EAAC;QAC1C3B;QACA4B,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;YACA;SACH;IACL;IACA,MAAMR,QAAQ;QACVZ;QACAC;QACAoB,YAAY;YACRC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAClB;QACAF,OAAOG,oBAAI,CAACC,MAAM,CAACpC,MAAMgC,KAAK,EAAE;YAC5BK,cAAc;gBACVC,MAAM;gBACNrC;gBACA,GAAGyB,YAAYa,OAAO;YAC1B;YACAC,aAAa;QACjB;QACAN,cAAcC,oBAAI,CAACM,QAAQ,CAACzC,MAAMkC,YAAY,EAAE;YAC5CM,aAAa;QACjB;QACAP,eAAeE,oBAAI,CAACM,QAAQ,CAACzC,MAAMiC,aAAa,EAAE;YAC9CO,aAAa;QACjB;QACAT,MAAMI,oBAAI,CAACC,MAAM,CAACpC,MAAM+B,IAAI,EAAE;YAC1BM,cAAcX,YAAYK,IAAI;YAC9BS,aAAa;QACjB;IACJ;IACAnB,MAAMW,KAAK,CAACd,KAAK,GAAGA;IACpBG,MAAMW,KAAK,CAACpB,QAAQ,GAAG8B,IAAAA,gCAAgB,EAAC,CAACC;QACrC,MAAMC,WAAWD,GAAGE,MAAM,CAAC3B,KAAK;QAChCN,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAAS+B,IAAI;YAC7DzB,OAAO0B;QACX;QACAzB,SAASyB;IACb;IACA,OAAOvB;AACX"}
+{"version":3,"sources":["useInput.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 */ export const useInput_unstable = (props, ref)=>{\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const overrides = useOverrides();\n    var _overrides_inputDefaultAppearance;\n    const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', onChange } = props;\n    if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {\n        // eslint-disable-next-line no-console\n        console.error(\"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" + ' future.');\n    }\n    const [value, setValue] = useControllableState({\n        state: props.value,\n        defaultState: props.defaultValue,\n        initialState: ''\n    });\n    const nativeProps = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'size',\n            'onChange',\n            'value',\n            'defaultValue'\n        ]\n    });\n    const state = {\n        size,\n        appearance,\n        components: {\n            root: 'span',\n            input: 'input',\n            contentBefore: 'span',\n            contentAfter: 'span'\n        },\n        input: slot.always(props.input, {\n            defaultProps: {\n                type: 'text',\n                ref,\n                ...nativeProps.primary\n            },\n            elementType: 'input'\n        }),\n        contentAfter: slot.optional(props.contentAfter, {\n            elementType: 'span'\n        }),\n        contentBefore: slot.optional(props.contentBefore, {\n            elementType: 'span'\n        }),\n        root: slot.always(props.root, {\n            defaultProps: nativeProps.root,\n            elementType: 'span'\n        })\n    };\n    state.input.value = value;\n    state.input.onChange = useEventCallback((ev)=>{\n        const newValue = ev.target.value;\n        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n            value: newValue\n        });\n        setValue(newValue);\n    });\n    return state;\n};\n"],"names":["useInput_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","overrides","useOverrides","_overrides_inputDefaultAppearance","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","useControllableState","state","defaultState","defaultValue","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","slot","always","defaultProps","type","primary","elementType","optional","useEventCallback","ev","newValue","target"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;4BACuB;gCAC0C;qCAClC;AAS3C,MAAMA,oBAAoB,CAACC,OAAOC;IACzCD,QAAQE,IAAAA,yCAA6B,EAACF,OAAO;QACzCG,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAClB;IACA,MAAMC,YAAYC,IAAAA,0CAAY;IAC9B,IAAIC;IACJ,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAa,AAACF,CAAAA,oCAAoCF,UAAUK,sBAAsB,AAAD,MAAO,QAAQH,sCAAsC,KAAK,IAAIA,oCAAoC,SAAS,EAAEI,QAAQ,EAAE,GAAGZ;IACpO,IAAIa,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAiBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAAI;QAC5H,sCAAsC;QACtCM,QAAQC,KAAK,CAAC,iHAAiH;IACnI;IACA,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,oCAAoB,EAAC;QAC3CC,OAAOrB,MAAMkB,KAAK;QAClBI,cAActB,MAAMuB,YAAY;QAChCC,cAAc;IAClB;IACA,MAAMC,cAAcC,IAAAA,yCAAyB,EAAC;QAC1C1B;QACA2B,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;YACA;SACH;IACL;IACA,MAAMP,QAAQ;QACVZ;QACAC;QACAmB,YAAY;YACRC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAClB;QACAF,OAAOG,oBAAI,CAACC,MAAM,CAACnC,MAAM+B,KAAK,EAAE;YAC5BK,cAAc;gBACVC,MAAM;gBACNpC;gBACA,GAAGwB,YAAYa,OAAO;YAC1B;YACAC,aAAa;QACjB;QACAN,cAAcC,oBAAI,CAACM,QAAQ,CAACxC,MAAMiC,YAAY,EAAE;YAC5CM,aAAa;QACjB;QACAP,eAAeE,oBAAI,CAACM,QAAQ,CAACxC,MAAMgC,aAAa,EAAE;YAC9CO,aAAa;QACjB;QACAT,MAAMI,oBAAI,CAACC,MAAM,CAACnC,MAAM8B,IAAI,EAAE;YAC1BM,cAAcX,YAAYK,IAAI;YAC9BS,aAAa;QACjB;IACJ;IACAlB,MAAMU,KAAK,CAACb,KAAK,GAAGA;IACpBG,MAAMU,KAAK,CAACnB,QAAQ,GAAG6B,IAAAA,gCAAgB,EAAC,CAACC;QACrC,MAAMC,WAAWD,GAAGE,MAAM,CAAC1B,KAAK;QAChCN,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAAS8B,IAAI;YAC7DxB,OAAOyB;QACX;QACAxB,SAASwB;IACb;IACA,OAAOtB;AACX"}

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

@@ -16,6 +16,7 @@ _export(exports, {
         return useInputStyles_unstable;
     }
 });
+const _reacttheme = require("@fluentui/react-theme");
 const _react = require("@griffel/react");
 const inputClassNames = {
     root: 'fui-Input',
@@ -29,37 +30,48 @@ const fieldHeights = {
     medium: '32px',
     large: '40px'
 };
-const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1jtohuq", "rl1z2p5", {
+// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
+// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
+const horizontalPadding = {
+    root: {
+        small: _reacttheme.tokens.spacingHorizontalSNudge,
+        medium: _reacttheme.tokens.spacingHorizontalMNudge,
+        large: _reacttheme.tokens.spacingHorizontalM
+    },
+    input: {
+        small: _reacttheme.tokens.spacingHorizontalXXS,
+        medium: _reacttheme.tokens.spacingHorizontalXXS,
+        large: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    combined: {
+        small: _reacttheme.tokens.spacingHorizontalS,
+        medium: _reacttheme.tokens.spacingHorizontalM,
+        large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+    }
+};
+const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1qp7m7v", "r1e50w0p", {
     r: [
-        ".r1jtohuq{display:inline-flex;align-items:center;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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
-        ".r1jtohuq:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
-        ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
-        ".r1jtohuq:focus-within{outline:2px solid transparent;}",
-        ".rl1z2p5{display:inline-flex;align-items:center;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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
-        ".rl1z2p5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
-        ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
-        ".rl1z2p5:focus-within{outline:2px solid transparent;}"
+        ".r1qp7m7v{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;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);}",
+        ".r1qp7m7v::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
+        ".r1qp7m7v:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
+        ".r1qp7m7v:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
+        ".r1qp7m7v:focus-within{outline:2px solid transparent;}",
+        ".r1e50w0p{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;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);}",
+        ".r1e50w0p::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
+        ".r1e50w0p:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
+        ".r1e50w0p:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
+        ".r1e50w0p:focus-within{outline:2px solid transparent;}"
     ],
     s: [
-        "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
+        "@media screen and (prefers-reduced-motion: reduce){.r1qp7m7v::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1qp7m7v:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1e50w0p::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1e50w0p:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
     ]
 });
 const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     small: {
         sshi5w: "f1pha7fy",
-        uwmqm3: [
-            "fk8j09s",
-            "fdw0yi8"
-        ],
-        z189sj: [
-            "fdw0yi8",
-            "fk8j09s"
-        ],
         Bahqtrf: "fk6fouc",
         Be2twd7: "fy9rknc",
         Bhrd7zp: "figsok6",
@@ -68,14 +80,6 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     medium: {},
     large: {
         sshi5w: "f1w5jphr",
-        uwmqm3: [
-            "f1uw59to",
-            "fw5db7e"
-        ],
-        z189sj: [
-            "fw5db7e",
-            "f1uw59to"
-        ],
         Bahqtrf: "fk6fouc",
         Be2twd7: "fod5ikn",
         Bhrd7zp: "figsok6",
@@ -237,19 +241,51 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ],
         Bsft5z2: "fhr9occ",
         Bduesf4: "f99w1ws"
+    },
+    smallWithContentBefore: {
+        uwmqm3: [
+            "fk8j09s",
+            "fdw0yi8"
+        ]
+    },
+    smallWithContentAfter: {
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ]
+    },
+    mediumWithContentBefore: {
+        uwmqm3: [
+            "f1ng84yb",
+            "f11gcy0p"
+        ]
+    },
+    mediumWithContentAfter: {
+        z189sj: [
+            "f11gcy0p",
+            "f1ng84yb"
+        ]
+    },
+    largeWithContentBefore: {
+        uwmqm3: [
+            "f1uw59to",
+            "fw5db7e"
+        ]
+    },
+    largeWithContentAfter: {
+        z189sj: [
+            "fw5db7e",
+            "f1uw59to"
+        ]
     }
 }, {
     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{column-gap:var(--spacingHorizontalSNudge);}",
@@ -284,7 +320,13 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
         ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
         ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
-        ".fhr9occ::after{content:unset;}"
+        ".fhr9occ::after{content:unset;}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
+        ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
+        ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
+        ".fw5db7e{padding-right:var(--spacingHorizontalM);}"
     ],
     h: [
         ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
@@ -326,19 +368,66 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f99w1ws:focus-within{outline-style:none;}"
     ]
 });
-const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvp2gzh", null, [
-    ".rvp2gzh{box-sizing:border-box;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 useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r12stul0", null, [
+    ".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}",
+    ".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r12stul0:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"
 ]);
 const useInputElementStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ]
+    },
+    medium: {},
     large: {
+        uwmqm3: [
+            "fnphzt9",
+            "flt1dlf"
+        ],
+        z189sj: [
+            "flt1dlf",
+            "fnphzt9"
+        ]
+    },
+    smallWithContentBefore: {
+        uwmqm3: [
+            "fgiv446",
+            "ffczdla"
+        ]
+    },
+    smallWithContentAfter: {
+        z189sj: [
+            "ffczdla",
+            "fgiv446"
+        ]
+    },
+    mediumWithContentBefore: {
+        uwmqm3: [
+            "fgiv446",
+            "ffczdla"
+        ]
+    },
+    mediumWithContentAfter: {
+        z189sj: [
+            "ffczdla",
+            "fgiv446"
+        ]
+    },
+    largeWithContentBefore: {
         uwmqm3: [
             "fk8j09s",
             "fdw0yi8"
-        ],
+        ]
+    },
+    largeWithContentAfter: {
         z189sj: [
             "fdw0yi8",
             "fk8j09s"
@@ -352,6 +441,12 @@ const useInputElementStyles = /*#__PURE__*/ (0, _react.__styles)({
     }
 }, {
     d: [
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+        ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
+        ".fgiv446{padding-left:var(--spacingHorizontalXXS);}",
+        ".ffczdla{padding-right:var(--spacingHorizontalXXS);}",
         ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
         ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
         ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
@@ -391,8 +486,8 @@ const useInputStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
-    state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
-    state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), size === 'large' && inputStyles.large, disabled && inputStyles.disabled, state.input.className);
+    state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
     const contentClasses = [
         useContentClassName(),
         disabled && contentStyles.disabled,

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

@@ -1 +1 @@
-{"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px'\n};\nconst useRootClassName = /*#__PURE__*/__resetStyles(\"r1jtohuq\", \"rl1z2p5\", {\n  r: [\".r1jtohuq{display:inline-flex;align-items:center;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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}\", \".r1jtohuq:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}\", \".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".r1jtohuq:focus-within{outline:2px solid transparent;}\", \".rl1z2p5{display:inline-flex;align-items:center;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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}\", \".rl1z2p5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}\", \".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".rl1z2p5:focus-within{outline:2px solid transparent;}\"],\n  s: [\"@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n  small: {\n    sshi5w: \"f1pha7fy\",\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"],\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"],\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  },\n  medium: {},\n  large: {\n    sshi5w: \"f1w5jphr\",\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\",\n    i8kkvl: \"f1rjii52\",\n    Belr9w4: \"f1r7g2jn\"\n  },\n  outline: {},\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"f1l4zc64\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    Drbcw7: \"f8vnjqi\",\n    udz0bu: [\"fz1etlk\", \"f1hc16gm\"],\n    Be8ivqh: \"f1klwx88\",\n    ofdepl: [\"f1hc16gm\", \"fz1etlk\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    icvyot: \"f1ern45e\",\n    vrafjx: [\"f1n71otn\", \"f1deefiw\"],\n    wvpqe5: [\"f1deefiw\", \"f1n71otn\"],\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    B1piin3: [\"f15yvnhg\", \"f1n6gb5g\"]\n  },\n  underlineInteractive: {\n    oetu4i: \"f1l4zc64\",\n    Be8ivqh: \"f1klwx88\",\n    B3778ie: [\"f1nf3wye\", \"feulmo5\"],\n    d9w3h3: [\"feulmo5\", \"f1nf3wye\"],\n    Bl18szs: [\"f18vqdqu\", \"f53nyzz\"],\n    B4j8arr: [\"f53nyzz\", \"f18vqdqu\"]\n  },\n  filled: {\n    g2u3we: \"fghlq4f\",\n    h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n    B9xav0g: \"fb073pr\",\n    zhjwy3: [\"fjscplz\", \"f1gn591s\"]\n  },\n  filledInteractive: {\n    q7v0qe: \"ftmjh5b\",\n    kmh5ft: [\"f17blpuu\", \"fsrcdbj\"],\n    nagaa4: \"f1tpwn32\",\n    B1yhkcb: [\"fsrcdbj\", \"f17blpuu\"]\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\"\n  },\n  \"filled-darker-shadow\": {\n    De3pzq: \"f16xq7d1\",\n    E5pizo: \"fyed02w\"\n  },\n  \"filled-lighter-shadow\": {\n    De3pzq: \"fxugw4r\",\n    E5pizo: \"fyed02w\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"],\n    Bsft5z2: \"fhr9occ\",\n    Bduesf4: \"f99w1ws\"\n  }\n}, {\n  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{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;}\"],\n  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);}\"],\n  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);}\"],\n  m: [[\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  w: [\".f99w1ws:focus-within{outline-style:none;}\"]\n});\nconst useInputClassName = /*#__PURE__*/__resetStyles(\"rvp2gzh\", null, [\".rvp2gzh{box-sizing:border-box;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;}\"]);\nconst useInputElementStyles = /*#__PURE__*/__styles({\n  large: {\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"],\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    De3pzq: \"f1c21dwh\",\n    Bceei9c: \"fdrzuqr\",\n    yvdlaj: \"fahhnxm\"\n  }\n}, {\n  d: [\".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}\", \".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fdrzuqr{cursor:not-allowed;}\", \".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}\", \".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}\"]\n});\nconst useContentClassName = /*#__PURE__*/__resetStyles(\"r1572tok\", null, [\".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}\", \".r1572tok>svg{font-size:20px;}\"]);\nconst useContentStyles = /*#__PURE__*/__styles({\n  disabled: {\n    sj55zd: \"f1s2aq7o\"\n  },\n  small: {\n    kwki1k: \"f3u2cy0\"\n  },\n  medium: {},\n  large: {\n    kwki1k: \"fa420co\"\n  }\n}, {\n  d: [\".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f3u2cy0>svg{font-size:16px;}\", \".fa420co>svg{font-size:24px;}\"]\n});\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = state => {\n  const {\n    size,\n    appearance\n  } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n  state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n  state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), size === 'large' && inputStyles.large, disabled && inputStyles.disabled, state.input.className);\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useInputStyles.styles.js.map"],"names":["inputClassNames","useInputStyles_unstable","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","__resetStyles","r","s","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","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","mergeClasses","contentClasses"],"mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAiKAC,uBAAuB;eAAvBA;;;uBAlKqD;AAC3D,MAAMD,kBAAkB;IAC7BE,MAAM;IACNC,OAAO;IACPC,eAAe;IACfC,cAAc;AAChB;AACA,kDAAkD;AAClD,MAAMC,eAAe;IACnBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AACA,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IACzEC,GAAG;QAAC;QAAihB;QAA0e;QAA0K;QAAqG;QAA0D;QAAghB;QAAye;QAAyK;QAAoG;KAAwD;IACtoFC,GAAG;QAAC;QAA6H;QAA0I;QAA4H;KAAwI;AACjhB;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CR,OAAO;QACLS,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAd,QAAQ,CAAC;IACTC,OAAO;QACLO,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,SAAS,CAAC;IACVC,oBAAoB;QAClBC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,WAAW;QACTC,QAAQ;QACRC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAW;IACnC;IACAC,sBAAsB;QACpBjB,QAAQ;QACRI,SAAS;QACTc,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;IAClC;IACAC,QAAQ;QACNC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,mBAAmB;QACjBC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAW;IAClC;IACAC,SAAS;QACPC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAU;IACjC;IACA,iBAAiB;QACf7B,QAAQ;IACV;IACA,kBAAkB;QAChBA,QAAQ;IACV;IACA,wBAAwB;QACtBA,QAAQ;QACR8B,QAAQ;IACV;IACA,yBAAyB;QACvB9B,QAAQ;QACR8B,QAAQ;IACV;IACAC,UAAU;QACRC,SAAS;QACThC,QAAQ;QACRgB,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;QAC9Bc,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA+B;QAA0D;QAA2D;QAAgD;QAA+C;QAAmD;QAAmD;QAA+B;QAAsD;QAAsD;QAA+C;QAAmD;QAAyD;QAAsD;QAAkE;QAA4C;QAA2C;QAAyC;QAAwC;QAAqC;QAAuC;QAAsC;QAA6B;QAA8B;QAAmD;QAAiD;QAAgD;QAA8C;QAA6D;QAAgE;QAA8D;QAAgE;QAAkH;QAAoH;QAAmH;QAAuH;QAA+D;QAA8D;QAAwC;QAAiC;QAAkE;QAAmE;QAAkE;QAAoE;KAAkC;IACh9EC,GAAG;QAAC;QAAqE;QAAwE;QAAuE;QAAkF;QAAoG;QAAwG;QAAqG;KAAwG;IACnsBC,GAAG;QAAC;QAA8F;QAAgG;QAAiG;KAA2G;IAC9YC,GAAG;QAAC;YAAC;YAAwE;gBAC3EA,GAAG;YACL;SAAE;QAAE;YAAC;YAAiH;gBACpHA,GAAG;YACL;SAAE;QAAE;YAAC;YAA2E;gBAC9EA,GAAG;YACL;SAAE;KAAC;IACHC,GAAG;QAAC;KAA6C;AACnD;AACA,MAAMC,oBAAoB,WAAW,GAAErE,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;IAAuR;IAAwF;IAA+E;IAAmF;CAAyE;AACjqB,MAAMsE,wBAAwB,WAAW,GAAElE,IAAAA,eAAQ,EAAC;IAClDN,OAAO;QACLQ,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAiD,UAAU;QACRe,QAAQ;QACR9C,QAAQ;QACRgC,SAAS;QACTe,QAAQ;IACV;AACF,GAAG;IACDR,GAAG;QAAC;QAA0D;QAA2D;QAA2D;QAAkE;QAAiC;QAAqF;KAA2E;AACzb;AACA,MAAMS,sBAAsB,WAAW,GAAEzE,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAAuF;CAAiC;AAClM,MAAM0E,mBAAmB,WAAW,GAAEtE,IAAAA,eAAQ,EAAC;IAC7CoD,UAAU;QACRe,QAAQ;IACV;IACA3E,OAAO;QACL+E,QAAQ;IACV;IACA9E,QAAQ,CAAC;IACTC,OAAO;QACL6E,QAAQ;IACV;AACF,GAAG;IACDX,GAAG;QAAC;QAA2D;QAAiC;KAAgC;AAClI;AAIO,MAAM1E,0BAA0BsF,CAAAA;IACrC,MAAM,EACJC,IAAI,EACJC,UAAU,EACX,GAAGF;IACJ,MAAMpB,WAAWoB,MAAMpF,KAAK,CAACgE,QAAQ;IACrC,MAAMN,UAAU,CAAC,EAAE0B,MAAMpF,KAAK,CAAC,eAAe,CAAC,CAAC,KAAK;IACrD,MAAMgD,SAASsC,WAAWC,UAAU,CAAC;IACrC,MAAMC,aAAa7E;IACnB,MAAM8E,cAAcX;IACpB,MAAMY,gBAAgBR;IACtBE,MAAMrF,IAAI,CAAC4F,SAAS,GAAGC,IAAAA,mBAAY,EAAC/F,gBAAgBE,IAAI,EAAEQ,oBAAoBiF,UAAU,CAACH,KAAK,EAAEG,UAAU,CAACF,WAAW,EAAE,CAACtB,YAAYsB,eAAe,aAAaE,WAAWjE,kBAAkB,EAAE,CAACyC,YAAYsB,eAAe,eAAeE,WAAW7C,oBAAoB,EAAE,CAACqB,YAAYhB,UAAUwC,WAAWnC,iBAAiB,EAAEL,UAAUwC,WAAWxC,MAAM,EAAE,CAACgB,YAAYN,WAAW8B,WAAW9B,OAAO,EAAEM,YAAYwB,WAAWxB,QAAQ,EAAEoB,MAAMrF,IAAI,CAAC4F,SAAS;IAC/bP,MAAMpF,KAAK,CAAC2F,SAAS,GAAGC,IAAAA,mBAAY,EAAC/F,gBAAgBG,KAAK,EAAE6E,qBAAqBQ,SAAS,WAAWI,YAAYnF,KAAK,EAAE0D,YAAYyB,YAAYzB,QAAQ,EAAEoB,MAAMpF,KAAK,CAAC2F,SAAS;IAC/K,MAAME,iBAAiB;QAACZ;QAAuBjB,YAAY0B,cAAc1B,QAAQ;QAAE0B,aAAa,CAACL,KAAK;KAAC;IACvG,IAAID,MAAMnF,aAAa,EAAE;QACvBmF,MAAMnF,aAAa,CAAC0F,SAAS,GAAGC,IAAAA,mBAAY,EAAC/F,gBAAgBI,aAAa,KAAK4F,gBAAgBT,MAAMnF,aAAa,CAAC0F,SAAS;IAC9H;IACA,IAAIP,MAAMlF,YAAY,EAAE;QACtBkF,MAAMlF,YAAY,CAACyF,SAAS,GAAGC,IAAAA,mBAAY,EAAC/F,gBAAgBK,YAAY,KAAK2F,gBAAgBT,MAAMlF,YAAY,CAACyF,SAAS;IAC3H;IACA,OAAOP;AACT,GACA,iDAAiD"}
+{"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n  root: {\n    small: tokens.spacingHorizontalSNudge,\n    medium: tokens.spacingHorizontalMNudge,\n    large: tokens.spacingHorizontalM\n  },\n  input: {\n    small: tokens.spacingHorizontalXXS,\n    medium: tokens.spacingHorizontalXXS,\n    large: tokens.spacingHorizontalSNudge\n  },\n  combined: {\n    small: tokens.spacingHorizontalS,\n    medium: tokens.spacingHorizontalM,\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n  }\n};\nconst useRootClassName = /*#__PURE__*/__resetStyles(\"r1qp7m7v\", \"r1e50w0p\", {\n  r: [\".r1qp7m7v{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;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);}\", \".r1qp7m7v::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}\", \".r1qp7m7v:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}\", \".r1qp7m7v:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".r1qp7m7v:focus-within{outline:2px solid transparent;}\", \".r1e50w0p{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;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);}\", \".r1e50w0p::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}\", \".r1e50w0p:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}\", \".r1e50w0p:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".r1e50w0p:focus-within{outline:2px solid transparent;}\"],\n  s: [\"@media screen and (prefers-reduced-motion: reduce){.r1qp7m7v::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1qp7m7v:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1e50w0p::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1e50w0p:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n  small: {\n    sshi5w: \"f1pha7fy\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  },\n  medium: {},\n  large: {\n    sshi5w: \"f1w5jphr\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\",\n    i8kkvl: \"f1rjii52\",\n    Belr9w4: \"f1r7g2jn\"\n  },\n  outline: {},\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"f1l4zc64\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    Drbcw7: \"f8vnjqi\",\n    udz0bu: [\"fz1etlk\", \"f1hc16gm\"],\n    Be8ivqh: \"f1klwx88\",\n    ofdepl: [\"f1hc16gm\", \"fz1etlk\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    icvyot: \"f1ern45e\",\n    vrafjx: [\"f1n71otn\", \"f1deefiw\"],\n    wvpqe5: [\"f1deefiw\", \"f1n71otn\"],\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    B1piin3: [\"f15yvnhg\", \"f1n6gb5g\"]\n  },\n  underlineInteractive: {\n    oetu4i: \"f1l4zc64\",\n    Be8ivqh: \"f1klwx88\",\n    B3778ie: [\"f1nf3wye\", \"feulmo5\"],\n    d9w3h3: [\"feulmo5\", \"f1nf3wye\"],\n    Bl18szs: [\"f18vqdqu\", \"f53nyzz\"],\n    B4j8arr: [\"f53nyzz\", \"f18vqdqu\"]\n  },\n  filled: {\n    g2u3we: \"fghlq4f\",\n    h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n    B9xav0g: \"fb073pr\",\n    zhjwy3: [\"fjscplz\", \"f1gn591s\"]\n  },\n  filledInteractive: {\n    q7v0qe: \"ftmjh5b\",\n    kmh5ft: [\"f17blpuu\", \"fsrcdbj\"],\n    nagaa4: \"f1tpwn32\",\n    B1yhkcb: [\"fsrcdbj\", \"f17blpuu\"]\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\"\n  },\n  \"filled-darker-shadow\": {\n    De3pzq: \"f16xq7d1\",\n    E5pizo: \"fyed02w\"\n  },\n  \"filled-lighter-shadow\": {\n    De3pzq: \"fxugw4r\",\n    E5pizo: \"fyed02w\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"],\n    Bsft5z2: \"fhr9occ\",\n    Bduesf4: \"f99w1ws\"\n  },\n  smallWithContentBefore: {\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"]\n  },\n  smallWithContentAfter: {\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"]\n  },\n  mediumWithContentBefore: {\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  mediumWithContentAfter: {\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"]\n  },\n  largeWithContentBefore: {\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"]\n  },\n  largeWithContentAfter: {\n    z189sj: [\"fw5db7e\", \"f1uw59to\"]\n  }\n}, {\n  d: [\".f1pha7fy{min-height:24px;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".f1w5jphr{min-height:40px;}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".f1rjii52{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;}\", \".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}\", \".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}\", \".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}\", \".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\"],\n  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);}\"],\n  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);}\"],\n  m: [[\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  w: [\".f99w1ws:focus-within{outline-style:none;}\"]\n});\nconst useInputClassName = /*#__PURE__*/__resetStyles(\"r12stul0\", null, [\".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}\", \".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r12stul0:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}\"]);\nconst useInputElementStyles = /*#__PURE__*/__styles({\n  small: {\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"]\n  },\n  medium: {},\n  large: {\n    uwmqm3: [\"fnphzt9\", \"flt1dlf\"],\n    z189sj: [\"flt1dlf\", \"fnphzt9\"]\n  },\n  smallWithContentBefore: {\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  },\n  smallWithContentAfter: {\n    z189sj: [\"ffczdla\", \"fgiv446\"]\n  },\n  mediumWithContentBefore: {\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  },\n  mediumWithContentAfter: {\n    z189sj: [\"ffczdla\", \"fgiv446\"]\n  },\n  largeWithContentBefore: {\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"]\n  },\n  largeWithContentAfter: {\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    De3pzq: \"f1c21dwh\",\n    Bceei9c: \"fdrzuqr\",\n    yvdlaj: \"fahhnxm\"\n  }\n}, {\n  d: [\".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}\", \".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}\", \".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fdrzuqr{cursor:not-allowed;}\", \".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}\", \".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}\"]\n});\nconst useContentClassName = /*#__PURE__*/__resetStyles(\"r1572tok\", null, [\".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}\", \".r1572tok>svg{font-size:20px;}\"]);\nconst useContentStyles = /*#__PURE__*/__styles({\n  disabled: {\n    sj55zd: \"f1s2aq7o\"\n  },\n  small: {\n    kwki1k: \"f3u2cy0\"\n  },\n  medium: {},\n  large: {\n    kwki1k: \"fa420co\"\n  }\n}, {\n  d: [\".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f3u2cy0>svg{font-size:16px;}\", \".fa420co>svg{font-size:24px;}\"]\n});\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = state => {\n  const {\n    size,\n    appearance\n  } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n  state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n  state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);\n  const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useInputStyles.styles.js.map"],"names":["inputClassNames","useInputStyles_unstable","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","tokens","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","__resetStyles","r","s","useRootStyles","__styles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","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","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","kwki1k","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","mergeClasses","contentClasses"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.4.68",
+  "version": "9.4.70",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,11 +34,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.58",
-    "@fluentui/react-jsx-runtime": "^9.0.34",
-    "@fluentui/react-shared-contexts": "^9.15.2",
+    "@fluentui/react-field": "^9.1.60",
+    "@fluentui/react-jsx-runtime": "^9.0.35",
+    "@fluentui/react-shared-contexts": "^9.16.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.5",
+    "@fluentui/react-utilities": "^9.18.6",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },