@fluentui/react-input 9.2.5 → 9.2.6

package/CHANGELOG.json

@@ -2,7 +2,42 @@
   "name": "@fluentui/react-input",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:52 GMT",
+      "date": "Thu, 17 Nov 2022 23:02:37 GMT",
+      "tag": "@fluentui/react-input_v9.2.6",
+      "version": "9.2.6",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.9",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-text to v9.1.7",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:58:05 GMT",
       "tag": "@fluentui/react-input_v9.2.5",
       "version": "9.2.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Fri, 11 Nov 2022 14:53:52 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Nov 2022 23:02:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.2.6)
+
+Thu, 17 Nov 2022 23:02:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.2.5..@fluentui/react-input_v9.2.6)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-text to v9.1.7 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.2.5)
 
-Fri, 11 Nov 2022 14:53:52 GMT 
+Fri, 11 Nov 2022 14:58:05 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.2.4..@fluentui/react-input_v9.2.5)
 
 ### Patches

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"../src/","sources":["Input.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Input/index';\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"../src/","sources":["packages/react-components/react-input/src/Input.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Input/index';\n"]}

package/lib/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"../src/","sources":["InputField.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/InputField/index';\n"]}
+{"version":3,"file":"InputField.js","sourceRoot":"../src/","sources":["packages/react-components/react-input/src/InputField.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/InputField/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/renderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,iBAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/renderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,iBAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAAd,CATC;IAiBxB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAjBN;IAkBxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAlBP;IAmBxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAnBE,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsC,CAAvC;EAMA,OAAO,KAAP;AACD,CA3DM","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/useInput.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAAd,CATC;IAiBxB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAjBN;IAkBxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAlBP;IAmBxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAnBE,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsC,CAAvC;EAMA,OAAO,KAAP;AACD,CA3DM","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,KAAT,QAAsB,aAAtB;AAIA,OAAO,MAAM,oBAAoB,gBAAG,kBAAkB,CAAC,YAAD,CAA/C;AAEP,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,KAAb;IAAoB,UAAU,EAAE;EAAhC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJ+D,CAAzD;AAMP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,KAAT,QAAsB,aAAtB;AAIA,OAAO,MAAM,oBAAoB,gBAAG,kBAAkB,CAAC,YAAD,CAA/C;AAEP,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,KAAb;IAAoB,UAAU,EAAE;EAAhC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJ+D,CAAzD;AAMP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/InputField/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './InputField';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/InputField/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './InputField';\n"]}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGnH,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-input/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGnH,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"]}

package/lib-amd/Input.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Input/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Input.js.map

package/lib-amd/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-input/src/Input.ts"],"names":[],"mappings":";;;IAAA,uCAAyC","sourcesContent":["export * from './components/Input/index';\n"]}

package/lib-amd/InputField.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/InputField/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=InputField.js.map

package/lib-amd/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-input/src/InputField.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/InputField/index';\n"]}

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useInput", "./renderInput", "./useInputStyles"], function (require, exports, React, useInput_1, renderInput_1, useInputStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Input = void 0;
+    /**
+     * The Input component allows people to enter and edit text.
+     */
+    exports.Input = React.forwardRef(function (props, ref) {
+        var state = useInput_1.useInput_unstable(props, ref);
+        useInputStyles_1.useInputStyles_unstable(state);
+        return renderInput_1.renderInput_unstable(state);
+    });
+    exports.Input.displayName = 'Input';
+});
+//# sourceMappingURL=Input.js.map

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

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

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Input.types.js.map

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

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

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Input", "./Input.types", "./renderInput", "./useInput", "./useInputStyles"], function (require, exports, tslib_1, Input_1, Input_types_1, renderInput_1, useInput_1, useInputStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Input_1, exports);
+    tslib_1.__exportStar(Input_types_1, exports);
+    tslib_1.__exportStar(renderInput_1, exports);
+    tslib_1.__exportStar(useInput_1, exports);
+    tslib_1.__exportStar(useInputStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"]}

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

@@ -0,0 +1,17 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderInput_unstable = void 0;
+    /**
+     * Render the final JSX of Input
+     */
+    var renderInput_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.contentBefore && React.createElement(slots.contentBefore, tslib_1.__assign({}, slotProps.contentBefore)),
+            React.createElement(slots.input, tslib_1.__assign({}, slotProps.input)),
+            slots.contentAfter && React.createElement(slots.contentAfter, tslib_1.__assign({}, slotProps.contentAfter))));
+    };
+    exports.renderInput_unstable = renderInput_unstable;
+});
+//# sourceMappingURL=renderInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderInput.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/renderInput.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAiB;QAC9C,IAAA,KAAuB,0BAAQ,CAAa,KAAK,CAAC,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAgC,CAAC;QACzD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,aAAa,IAAI,oBAAC,KAAK,CAAC,aAAa,uBAAK,SAAS,CAAC,aAAa,EAAI;YAC5E,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnC,KAAK,CAAC,YAAY,IAAI,oBAAC,KAAK,CAAC,YAAY,uBAAK,SAAS,CAAC,YAAY,EAAI,CAC9D,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,oBAAoB,wBAS/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -0,0 +1,62 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useInput_unstable = void 0;
+    /**
+     * Create the state required to render Input.
+     *
+     * The returned state can be modified with hooks such as useInputStyles_unstable,
+     * before being passed to renderInput_unstable.
+     *
+     * @param props - props from this instance of Input
+     * @param ref - reference to `<input>` element of Input
+     */
+    var useInput_unstable = function (props, ref) {
+        var _a = props.size, size = _a === void 0 ? 'medium' : _a, _b = props.appearance, appearance = _b === void 0 ? 'outline' : _b, onChange = props.onChange;
+        if (process.env.NODE_ENV !== 'production' &&
+            (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
+            // eslint-disable-next-line no-console
+            console.error("The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" +
+                ' future.');
+        }
+        var _c = react_utilities_1.useControllableState({
+            state: props.value,
+            defaultState: props.defaultValue,
+            initialState: '',
+        }), value = _c[0], setValue = _c[1];
+        var nativeProps = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'input',
+            excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],
+        });
+        var state = {
+            size: size,
+            appearance: appearance,
+            components: {
+                root: 'span',
+                input: 'input',
+                contentBefore: 'span',
+                contentAfter: 'span',
+            },
+            input: react_utilities_1.resolveShorthand(props.input, {
+                required: true,
+                defaultProps: tslib_1.__assign({ type: 'text', ref: ref }, nativeProps.primary),
+            }),
+            contentAfter: react_utilities_1.resolveShorthand(props.contentAfter),
+            contentBefore: react_utilities_1.resolveShorthand(props.contentBefore),
+            root: react_utilities_1.resolveShorthand(props.root, {
+                required: true,
+                defaultProps: nativeProps.root,
+            }),
+        };
+        state.input.value = value;
+        state.input.onChange = react_utilities_1.useEventCallback(function (ev) {
+            var newValue = ev.target.value;
+            onChange === null || onChange === void 0 ? void 0 : onChange(ev, { value: newValue });
+            setValue(newValue);
+        });
+        return state;
+    };
+    exports.useInput_unstable = useInput_unstable;
+});
+//# sourceMappingURL=useInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInput.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInput.ts"],"names":[],"mappings":";;;;IASA;;;;;;;;OAQG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAiB,EAAE,GAAgC;QAC3E,IAAA,KAAsD,KAAK,KAA5C,EAAf,IAAI,mBAAG,QAAQ,KAAA,EAAE,KAAqC,KAAK,WAApB,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAEpE,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;YACrC,CAAC,UAAU,KAAK,sBAAsB,IAAI,UAAU,KAAK,uBAAuB,CAAC,EACjF;YACA,sCAAsC;YACtC,OAAO,CAAC,KAAK,CACX,8GAA8G;gBAC5G,UAAU,CACb,CAAC;SACH;QAEK,IAAA,KAAoB,sCAAoB,CAAC;YAC7C,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,YAAY,EAAE,EAAE;SACjB,CAAC,EAJK,KAAK,QAAA,EAAE,QAAQ,QAIpB,CAAC;QAEH,IAAM,WAAW,GAAG,2CAAyB,CAAC;YAC5C,KAAK,OAAA;YACL,kBAAkB,EAAE,OAAO;YAC3B,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,CAAC;SACjE,CAAC,CAAC;QAEH,IAAM,KAAK,GAAe;YACxB,IAAI,MAAA;YACJ,UAAU,YAAA;YACV,UAAU,EAAE;gBACV,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,OAAO;gBACd,aAAa,EAAE,MAAM;gBACrB,YAAY,EAAE,MAAM;aACrB;YACD,KAAK,EAAE,kCAAgB,CAAC,KAAK,CAAC,KAAK,EAAE;gBACnC,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,IAAI,EAAE,MAAM,EACZ,GAAG,KAAA,IACA,WAAW,CAAC,OAAO,CACvB;aACF,CAAC;YACF,YAAY,EAAE,kCAAgB,CAAC,KAAK,CAAC,YAAY,CAAC;YAClD,aAAa,EAAE,kCAAgB,CAAC,KAAK,CAAC,aAAa,CAAC;YACpD,IAAI,EAAE,kCAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,WAAW,CAAC,IAAI;aAC/B,CAAC;SACH,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QAC1B,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,kCAAgB,CAAC,UAAA,EAAE;YACxC,IAAM,QAAQ,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YACpC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA3DW,QAAA,iBAAiB,qBA2D5B","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,171 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useInputStyles_unstable = exports.inputClassNames = void 0;
+    exports.inputClassNames = {
+        root: 'fui-Input',
+        input: 'fui-Input__input',
+        contentBefore: 'fui-Input__contentBefore',
+        contentAfter: 'fui-Input__contentAfter',
+    };
+    // TODO(sharing) use theme values once available
+    var contentSizes = {
+        // TODO: This 400 style is not in the typography styles.
+        // May need a design change
+        400: {
+            fontSize: react_theme_1.tokens.fontSizeBase400,
+            lineHeight: react_theme_1.tokens.lineHeightBase400,
+        },
+    };
+    // TODO(sharing) should these be shared somewhere?
+    var fieldHeights = {
+        small: '24px',
+        medium: '32px',
+        large: '40px',
+    };
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap' }, react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalXXS)), { fontFamily: react_theme_1.tokens.fontFamilyBase }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { position: 'relative', boxSizing: 'border-box' }),
+        interactive: {
+            // This is all for the bottom focus border.
+            // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
+            '::after': tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', content: '""', position: 'absolute', left: '-1px', bottom: '-1px', right: '-1px', 
+                // Maintaining the correct corner radius:
+                // Use the whole border-radius as the height and only put radii on the bottom corners.
+                // (Otherwise the radius would be automatically reduced to fit available space.)
+                // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+                height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")", borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium, borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium }, react_1.shorthands.borderBottom('2px', 'solid', react_theme_1.tokens.colorCompoundBrandStroke)), { clipPath: 'inset(calc(100% - 2px) 0 0 0)', 
+                // Animation for focus OUT
+                transform: 'scaleX(0)', transitionProperty: 'transform', transitionDuration: react_theme_1.tokens.durationUltraFast, transitionDelay: react_theme_1.tokens.curveAccelerateMid, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }),
+            ':focus-within::after': {
+                // Animation for focus IN
+                transform: 'scaleX(1)',
+                transitionProperty: 'transform',
+                transitionDuration: react_theme_1.tokens.durationNormal,
+                transitionDelay: react_theme_1.tokens.curveDecelerateMid,
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                },
+            },
+            ':focus-within:active::after': {
+                // This is if the user clicks the field again while it's already focused
+                borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+            },
+            ':focus-within': {
+                outlineWidth: '2px',
+                outlineStyle: 'solid',
+                outlineColor: 'transparent',
+            },
+        },
+        small: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.small }, react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalSNudge)), react_theme_1.typographyStyles.caption1),
+        medium: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.medium }, react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalMNudge)), react_theme_1.typographyStyles.body1),
+        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.large }, react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalM)), contentSizes[400]), react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalSNudge)),
+        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        outlineInteractive: {
+            ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':active,:focus-within': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
+        },
+        underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderRadius(0)), react_1.shorthands.borderBottom('1px', 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)),
+        underlineInteractive: {
+            ':hover': {
+                borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
+            },
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':active,:focus-within': {
+                borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
+            },
+            '::after': react_1.shorthands.borderRadius(0), // remove rounded corners from focus underline
+        },
+        filled: tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
+        filledInteractive: {
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':hover,:focus-within': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
+        },
+        invalid: {
+            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
+        },
+        'filled-darker': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
+        },
+        'filled-lighter': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+        },
+        'filled-darker-shadow': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
+            boxShadow: react_theme_1.tokens.shadow2,
+        },
+        'filled-lighter-shadow': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+            boxShadow: react_theme_1.tokens.shadow2,
+        },
+        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+    });
+    var useInputElementStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', flexGrow: 1, minWidth: 0 }, react_1.shorthands.borderStyle('none')), react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalXXS)), { color: react_theme_1.tokens.colorNeutralForeground1, 
+            // Use literal "transparent" (not from the theme) to always let the color from the root show through
+            backgroundColor: 'transparent', '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForeground4,
+                opacity: 1, // browser style override
+            }, outlineStyle: 'none' }),
+        small: tslib_1.__assign({}, react_theme_1.typographyStyles.caption1),
+        medium: tslib_1.__assign({}, react_theme_1.typographyStyles.body1),
+        large: tslib_1.__assign(tslib_1.__assign({}, contentSizes[400]), react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalSNudge)),
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            cursor: 'not-allowed',
+            '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+    });
+    var useContentStyles = react_1.makeStyles({
+        base: {
+            boxSizing: 'border-box',
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            // special case styling for icons (most common case) to ensure they're centered vertically
+            '> svg': { display: 'block' },
+        },
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+        },
+        // Ensure resizable icons show up with the proper font size
+        small: {
+            '> svg': { fontSize: '16px' },
+        },
+        medium: {
+            '> svg': { fontSize: '20px' },
+        },
+        large: {
+            '> svg': { fontSize: '24px' },
+        },
+    });
+    /**
+     * Apply styling to the Input slots based on the state
+     */
+    var useInputStyles_unstable = function (state) {
+        var size = state.size, appearance = state.appearance;
+        var disabled = state.input.disabled;
+        var invalid = "" + state.input['aria-invalid'] === 'true';
+        var filled = appearance.startsWith('filled');
+        var rootStyles = useRootStyles();
+        var inputStyles = useInputElementStyles();
+        var contentStyles = useContentStyles();
+        state.root.className = react_1.mergeClasses(exports.inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !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 = react_1.mergeClasses(exports.inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+        var contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
+        if (state.contentBefore) {
+            state.contentBefore.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.inputClassNames.contentBefore], contentClasses), [state.contentBefore.className]));
+        }
+        if (state.contentAfter) {
+            state.contentAfter.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.inputClassNames.contentAfter], contentClasses), [state.contentAfter.className]));
+        }
+        return state;
+    };
+    exports.useInputStyles_unstable = useInputStyles_unstable;
+});
+//# sourceMappingURL=useInputStyles.js.map

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

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

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

@@ -0,0 +1,13 @@
+define(["require", "exports", "react", "@fluentui/react-field", "../../Input"], function (require, exports, React, react_field_1, Input_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InputField = exports.inputFieldClassNames = void 0;
+    exports.inputFieldClassNames = react_field_1.getFieldClassNames('InputField');
+    exports.InputField = React.forwardRef(function (props, ref) {
+        var state = react_field_1.useField_unstable(props, ref, { component: Input_1.Input, classNames: exports.inputFieldClassNames });
+        react_field_1.useFieldStyles_unstable(state);
+        return react_field_1.renderField_unstable(state);
+    });
+    exports.InputField.displayName = 'InputField';
+});
+//# sourceMappingURL=InputField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,oBAAoB,GAAG,gCAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,aAAK,EAAE,UAAU,EAAE,4BAAoB,EAAE,CAAC,CAAC;QACpG,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"]}

package/lib-amd/components/InputField/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./InputField"], function (require, exports, tslib_1, InputField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(InputField_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/InputField/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B","sourcesContent":["export * from './InputField';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Input", "./InputField"], function (require, exports, Input_1, InputField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.inputFieldClassNames = exports.InputField_unstable = exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.Input = void 0;
+    Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+    Object.defineProperty(exports, "inputClassNames", { enumerable: true, get: function () { return Input_1.inputClassNames; } });
+    Object.defineProperty(exports, "renderInput_unstable", { enumerable: true, get: function () { return Input_1.renderInput_unstable; } });
+    Object.defineProperty(exports, "useInputStyles_unstable", { enumerable: true, get: function () { return Input_1.useInputStyles_unstable; } });
+    Object.defineProperty(exports, "useInput_unstable", { enumerable: true, get: function () { return Input_1.useInput_unstable; } });
+    Object.defineProperty(exports, "InputField_unstable", { enumerable: true, get: function () { return InputField_1.InputField; } });
+    Object.defineProperty(exports, "inputFieldClassNames", { enumerable: true, get: function () { return InputField_1.inputFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-input/src/index.ts"],"names":[],"mappings":";;;;IAAS,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA;IAGxF,iHAAA,UAAU,OAAuB;IAAE,kHAAA,oBAAoB,OAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"]}

package/lib-commonjs/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Input.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Input/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/Input.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Input/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/InputField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/InputField/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/InputField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/InputField/index';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/renderInput.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,IAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/renderInput.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,IAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAA9B,CATiB;IAiBxB,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;IAkBxB,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;IAmBxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAnBkB,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsB,CAAvB;EAMA,OAAO,KAAP;AACD,CA3DM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAA9B,CATiB;IAiBxB,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;IAkBxB,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;IAmBxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAnBkB,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsB,CAAvB;EAMA,OAAO,KAAP;AACD,CA3DM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/InputField/InputField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,gBAAuB,aAAA,CAAA,kBAAA,CAAmB,YAAnB,CAAvB;AAEA,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,OAAA,CAAA,KAAb;IAAoB,UAAU,EAAE,OAAA,CAAA;EAAhC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJ+D,CAAnD;AAMb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,gBAAuB,aAAA,CAAA,kBAAA,CAAmB,YAAnB,CAAvB;AAEA,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,OAAA,CAAA,KAAb;IAAoB,UAAU,EAAE,OAAA,CAAA;EAAhC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJ+D,CAAnD;AAMb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/InputField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './InputField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/InputField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './InputField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;;AAGhF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AAAmC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;;AAGhF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AAAmC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.2.5",
+  "version": "9.2.6",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,22 +20,21 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-input/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/react-text": "^9.1.6",
+    "@fluentui/react-text": "^9.1.7",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.8",
+    "@fluentui/react-field": "9.0.0-alpha.9",
     "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },