@fluentui/react-textarea 9.7.1 → 9.7.2

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-textarea
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.2)
+
+Thu, 23 Apr 2026 11:59:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.1..@fluentui/react-textarea_v9.7.2)
+
+### Patches
+
+- fix: update types for render function ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.1)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.0..@fluentui/react-textarea_v9.7.1)
 
 ### Patches

package/dist/index.d.ts

@@ -2,14 +2,14 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Render the final JSX of Textarea
  */
-export declare const renderTextarea_unstable: (state: TextareaState) => JSXElement;
+export declare const renderTextarea_unstable: (state: TextareaBaseState) => JSXElement;
 
 /**
  * The Textarea component allows the user to enter and edit text in multiple lines.

package/lib/components/Textarea/Textarea.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n  /**\n   * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n   * indicator border animation. For more information, see Spec.md\n   *\n   * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n   */\n  textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\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?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\n\n  /**\n   * The default value of the Textarea.\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback for when the user changes the value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n  /**\n   * Which direction the Textarea is allowed to be resized.\n   *\n   * @default none\n   */\n  resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n  /**\n   * Size of the Textarea.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n  /**\n   * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n   * indicator border animation. For more information, see Spec.md\n   *\n   * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n   */\n  textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\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?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\n\n  /**\n   * The default value of the Textarea.\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback for when the user changes the value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n  /**\n   * Which direction the Textarea is allowed to be resized.\n   *\n   * @default none\n   */\n  resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n  /**\n   * Size of the Textarea.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":[],"mappings":"AAkFA;;CAEC,GACD,WAEE"}

package/lib/components/Textarea/renderTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,QAAQ;;AAGrB,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaBaseState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaBaseState): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,QAAQ;;AAGrB,EAAE"}

package/lib/components/Textarea/useTextarea.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';

package/lib/components/Textarea/useTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,YAAYJ;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,2BAA2B,CACtCb,OACAC;IAEA,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,GAAG1B,qBAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,cAAcjC,0BAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,KAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,KAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,GAAGvB,iBAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,YAAYJ;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,2BAA2B,CACtCb,OACAC;IAEA,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,GAAG1B,qBAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,cAAcjC,0BAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,KAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,KAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,GAAGvB,iBAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}

package/lib/components/Textarea/useTextareaStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 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: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  'use no memo';\n\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 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: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  'use no memo';\n\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}

package/lib-commonjs/components/Textarea/Textarea.types.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n  /**\n   * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n   * indicator border animation. For more information, see Spec.md\n   *\n   * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n   */\n  textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\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?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\n\n  /**\n   * The default value of the Textarea.\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback for when the user changes the value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n  /**\n   * Which direction the Textarea is allowed to be resized.\n   *\n   * @default none\n   */\n  resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n  /**\n   * Size of the Textarea.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n  /**\n   * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n   * indicator border animation. For more information, see Spec.md\n   *\n   * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n   */\n  textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\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?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\n\n  /**\n   * The default value of the Textarea.\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback for when the user changes the value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n  /**\n   * Which direction the Textarea is allowed to be resized.\n   *\n   * @default none\n   */\n  resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n  /**\n   * Size of the Textarea.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":[],"mappings":"AAkFA;;CAEC,GACD,WAEE"}

package/lib-commonjs/components/Textarea/renderTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,GACE,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACD,MAAME,QAAQ,EAAA,CAAA;;AAGrB,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaBaseState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaBaseState): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,GACE,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACD,MAAME,QAAQ,EAAA,CAAA;;AAGrB,EAAE"}

package/lib-commonjs/components/Textarea/useTextarea.js

@@ -17,8 +17,6 @@ _export(exports, {
         return useTextarea_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");

package/lib-commonjs/components/Textarea/useTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;4BAiDasB;eAAAA;;IAhCAd,oBAAAA;;;;;iEAfU,QAAQ;4BACe,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,0CAAAA;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AASK,iCAAiC,CACtCJ,OACAC;IAEA,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,OAAG1B,oCAAAA,EAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,kBAAcjC,yCAAAA,EAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,OAAGvB,gCAAAA,EAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;4BAiDaqB;eAAAA;;IAhCAd,oBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,0CAAAA;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,AAAtBA,MAAsB,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AASK,iCAAiC,CACtCJ,OACAC;IAEA,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,OAAG1B,oCAAAA,EAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,kBAAcjC,yCAAAA,EAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,OAAGvB,gCAAAA,EAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}

package/lib-commonjs/components/Textarea/useTextareaStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 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: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  'use no memo';\n\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 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: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  'use no memo';\n\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,kBAAAA;;;8BAsNA8F;eAAAA;;;uBA3NwC,iBAAiB;4BAC7B,wBAAwB;AAI1D,2BAA0D;IAC/D7F,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAgBR,iBAAAA,EAAW;IAC/BS,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACV,oHAAoH;QACpHC,SAAS,CAAC,IAAI,EAAEV,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,CAAC;QAC3CC,QAAQ;QACRC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,eAAe;IACjB;IAEAC,UAAU;QACRC,iBAAiBjB,kBAAAA,CAAOkB,0BAA0B;QAClDC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOqB,0BAA0B,EAAE;QAE9E,kCAAkC;YAChC,GAAGtB,iBAAAA,CAAWuB,WAAW,CAAC,WAAW;QACvC;IACF;IAEAC,aAAa;QACX,2CAA2C;QAC3C,+FAA+F;QAC/F,WAAW;YACTf,WAAW;YACXgB,SAAS;YACTf,UAAU;YACVgB,MAAM;YACNC,QAAQ;YACRC,OAAO;YAEP,yCAAyC;YACzC,sFAAsF;YACtF,gFAAgF;YAChF,qGAAqG;YACrGC,QAAQ,CAAC,IAAI,EAAE5B,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,EAAEX,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB7B,kBAAAA,CAAOc,kBAAkB;YACjDgB,yBAAyB9B,kBAAAA,CAAOc,kBAAkB;YAElD,mBAAmB;YACnB,8FAA8F;YAC9F,2FAA2F;YAC3F,4EAA4E;YAC5EiB,cAAc,GAAG/B,kBAAAA,CAAOW,gBAAgB,CAAC,OAAO,EAAEX,kBAAAA,CAAOgC,wBAAwB,EAAE;YACnFC,UAAU,CAAC,kBAAkB,EAAEjC,kBAAAA,CAAOW,gBAAgB,CAAC,QAAQ,CAAC;YAEhE,0BAA0B;YAC1BuB,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOqC,iBAAiB;YAC5CC,iBAAiBtC,kBAAAA,CAAOuC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtB,yBAAyB;YACzBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOwC,cAAc;YACzCF,iBAAiBtC,kBAAAA,CAAOyC,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7B,wEAAwE;YACxEI,mBAAmB1C,kBAAAA,CAAO2C,+BAA+B;QAC3D;QACA,iBAAiB;YACfC,cAAc5C,kBAAAA,CAAOW,gBAAgB;YACrCkC,cAAc;YACdC,cAAc;QAChB;IACF;IAEAC,QAAQ;QACN5B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOgD,sBAAsB,EAAE;QAC1E,wBAAwB;YACtB,GAAGjD,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAOiD,iCAAiC,CAAC;QACrE;IACF;IACA,iBAAiB;QACfhC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;IACjD;IACA,kBAAkB;QAChBjC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;IACjD;IACA,wBAAwB;QACtBlC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;QAC/C/B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IACA,yBAAyB;QACvBpC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IAEAC,SAAS;QACPrC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOuD,mBAAmB,EAAE;QACvEb,mBAAmB1C,kBAAAA,CAAOwD,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,UAAU;YACRtC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO0D,wBAAwB,EAAE;YAC5EhB,mBAAmB1C,kBAAAA,CAAO2D,iCAAiC;QAC7D;QAEA,WAAW;YACTxC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAO6D,mCAAmC;QAC/D;QAEA,iBAAiB;YACf1C,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAOgC,wBAAwB;QACpD;IACF;IAEA8B,SAAS;QACP,iDAAiD;YAC/C,GAAG/D,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAO+D,sBAAsB,CAAC;QAC1D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,wBAAoBnE,iBAAAA,EAAW;IACnCS,MAAM;QACJ,GAAGP,iBAAAA,CAAWkE,WAAW,CAAC,OAAO;QACjCrD,QAAQ;QACRK,iBAAiB;QACjBT,WAAW;QACX0D,OAAOlE,kBAAAA,CAAOmE,uBAAuB;QACrCC,UAAU;QACVC,YAAYrE,kBAAAA,CAAOsE,cAAc;QACjC1C,QAAQ;QAER,iBAAiB;YACfsC,OAAOlE,kBAAAA,CAAOuE,uBAAuB;YACrCC,SAAS;QACX;QAEA3B,cAAc;IAChB;IAEA7B,UAAU;QACRkD,OAAOlE,kBAAAA,CAAOyE,8BAA8B;QAC5CC,QAAQ;QACR,iBAAiB;YACfR,OAAOlE,kBAAAA,CAAOyE,8BAA8B;QAC9C;IACF;IAEA,gHAAgH;IAChH,gDAAgD;IAChDE,OAAO;QACLC,WAAW;QACXlE,SAAS,GAAGV,kBAAAA,CAAO6E,iBAAiB,CAAC,MAAM,EAAE7E,kBAAAA,CAAO8E,uBAAuB,CAAC,GAAG,EAAE9E,kBAAAA,CAAO+E,oBAAoB,CAAC,CAAC,CAAC;QAC/GC,WAAW;QACX,GAAG/E,4BAAAA,CAAiBgF,QAAQ;IAC9B;IACAC,QAAQ;QACNN,WAAW;QACXlE,SAAS,GAAGV,kBAAAA,CAAOmF,qBAAqB,CAAC,MAAM,EAAEnF,kBAAAA,CAAOoF,uBAAuB,CAAC,GAAG,EAAEpF,kBAAAA,CAAO+E,oBAAoB,CAAC,CAAC,CAAC;QACnHC,WAAW;QACX,GAAG/E,4BAAAA,CAAiBoF,KAAK;IAC3B;IACAC,OAAO;QACLV,WAAW;QACXlE,SAAS,GAAGV,kBAAAA,CAAOuF,gBAAgB,CAAC,MAAM,EAAEvF,kBAAAA,CAAOwF,kBAAkB,CAAC,GAAG,EAAExF,kBAAAA,CAAO+E,oBAAoB,CAAC,CAAC,CAAC;QACzGC,WAAW;QACX,GAAG/E,4BAAAA,CAAiBwF,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,8BAA0B7F,iBAAAA,EAAW;IACzC8F,MAAM;QACJC,QAAQ;IACV;IACAC,MAAM;QACJD,QAAQ;IACV;IACAE,YAAY;QACVF,QAAQ;IACV;IACAG,UAAU;QACRH,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACK;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEP,MAAM,EAAE,GAAGK;IACrC,MAAMjF,WAAWiF,MAAM7F,QAAQ,CAACY,QAAQ;IACxC,MAAM8C,UAAU,GAAGmC,MAAM7F,QAAQ,CAAC,eAAe,EAAE,KAAK;IACxD,MAAM2C,SAASoD,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAahG;IACnB4F,MAAM9F,IAAI,CAACmG,SAAS,OAAGxG,mBAAAA,EACrBI,mBAAmBC,IAAI,EACvBkG,WAAW/F,IAAI,EACfU,YAAYqF,WAAWrF,QAAQ,EAC/B,CAACA,YAAY+B,UAAUsD,WAAWtD,MAAM,EACxC,CAAC/B,YAAYqF,UAAU,CAACF,WAAW,EACnC,CAACnF,YAAYqF,WAAW9E,WAAW,EACnC,CAACP,YAAYmF,eAAe,aAAaE,WAAW5C,kBAAkB,EACtE,CAACzC,YAAY8C,WAAWuC,WAAWvC,OAAO,EAC1CmC,MAAM9F,IAAI,CAACmG,SAAS;IAGtB,MAAMC,iBAAiBvC;IACvB,MAAMwC,uBAAuBd;IAC7BO,MAAM7F,QAAQ,CAACkG,SAAS,OAAGxG,mBAAAA,EACzBI,mBAAmBE,QAAQ,EAC3BmG,eAAejG,IAAI,EACnBiG,cAAc,CAACL,KAAK,EACpBM,oBAAoB,CAACZ,OAAO,EAC5B5E,YAAYuF,eAAevF,QAAQ,EACnCiF,MAAM7F,QAAQ,CAACkG,SAAS;IAG1B,OAAOL;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.7.1",
+  "version": "9.7.2",
   "description": "Fluent UI TextArea component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.0",
+    "@fluentui/react-field": "^9.5.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },