@fluentui/react-textarea 9.7.3 → 9.7.5

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-textarea
 
-This log was last generated on Tue, 26 May 2026 09:33:33 GMT and should not be manually modified.
+This log was last generated on Tue, 04 Aug 2026 10:09:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.5)
+
+Tue, 04 Aug 2026 10:09:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.4..@fluentui/react-textarea_v9.7.5)
+
+### Patches
+
+- fix: fix Field control size handling ([PR #36453](https://github.com/microsoft/fluentui/pull/36453) by dmytrokirpa@microsoft.com)
+
+## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.4)
+
+Wed, 24 Jun 2026 11:10:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.3..@fluentui/react-textarea_v9.7.4)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
 ## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.3)
 
-Tue, 26 May 2026 09:33:33 GMT 
+Tue, 26 May 2026 09:39:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.2..@fluentui/react-textarea_v9.7.3)
 
 ### Patches

package/lib/components/Textarea/useTextarea.js

@@ -1,5 +1,5 @@
 'use client';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { useFieldContext_unstable, 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';
 /**
@@ -12,8 +12,9 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param ref - reference to root HTMLElement of Textarea
  */ export const useTextarea_unstable = (props, ref)=>{
     const overrides = useOverrides();
-    var _overrides_inputDefaultAppearance;
-    const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
+    const fieldContext = useFieldContext_unstable();
+    var _fieldContext_size, _overrides_inputDefaultAppearance;
+    const { size = (_fieldContext_size = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _fieldContext_size !== void 0 ? _fieldContext_size : 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
     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.');
@@ -35,8 +36,7 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
+        supportsRequired: true
     });
     const { resize = 'none', onChange } = props;
     const [value, setValue] = useControllableState({

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldContext_unstable, 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  const fieldContext = useFieldContext_unstable();\n\n  const {\n    size = fieldContext?.size ?? 'medium',\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n    ...baseProps\n  } = 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 });\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":["useFieldContext_unstable","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","fieldContext","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","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,wBAAwB,EAAEC,6BAA6B,QAAQ,wBAAwB;AAChG,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;IAClB,MAAMK,eAAeZ;QAGZY,oBACMD;IAFf,MAAM,EACJE,OAAOD,CAAAA,qBAAAA,yBAAAA,mCAAAA,aAAcC,IAAI,cAAlBD,gCAAAA,qBAAsB,QAAQ,EACrCE,aAAaH,CAAAA,oCAAAA,UAAUI,sBAAsB,cAAhCJ,+CAAAA,oCAAoC,SAAS,EAC1D,GAAGK,WACJ,GAAGP;IAEJ,IACEQ,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,WAAWN;IAEtD,OAAO;QACL,GAAGY,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,2BAA2B,CACtCd,OACAC;IAEA,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEe,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,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.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            // Animation for focus IN\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            // This is if the user clicks the field again while it's already focused\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        ':focus-within': {\n            outlineWidth: tokens.strokeWidthThick,\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\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    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        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const 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        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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 * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n    'use no memo';\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    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            // Animation for focus IN\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            // This is if the user clicks the field again while it's already focused\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        ':focus-within': {\n            outlineWidth: tokens.strokeWidthThick,\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\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    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        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const 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        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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 * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\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    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -191,7 +191,6 @@ export const textareaClassNames = {
 /**
  * Apply styling to the Textarea slots based on the state
  */ export const useTextareaStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance, resize } = state;
     const disabled = state.textarea.disabled;
     const invalid = `${state.textarea['aria-invalid']}` === 'true';

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 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  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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  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  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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/useTextarea.js

@@ -22,8 +22,9 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useTextarea_unstable = (props, ref)=>{
     const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
-    var _overrides_inputDefaultAppearance;
-    const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
+    const fieldContext = (0, _reactfield.useFieldContext_unstable)();
+    var _fieldContext_size, _overrides_inputDefaultAppearance;
+    const { size = (_fieldContext_size = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _fieldContext_size !== void 0 ? _fieldContext_size : 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
     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.');
@@ -39,8 +40,7 @@ const useTextareaBase_unstable = (props, ref)=>{
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
+        supportsRequired: true
     });
     const { resize = 'none', onChange } = props;
     const [value, setValue] = (0, _reactutilities.useControllableState)({

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldContext_unstable, 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  const fieldContext = useFieldContext_unstable();\n\n  const {\n    size = fieldContext?.size ?? 'medium',\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n    ...baseProps\n  } = 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 });\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":["useFieldContext_unstable","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","fieldContext","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;4BAsDauB;eAAAA;;IArCAf,oBAAAA;;;;4BAd2D,wBAAwB;gCACR,4BAA4B;qCAE9D,kCAAkC;AAWjF,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,0CAAAA;IAClB,MAAMK,mBAAeZ,oCAAAA;QAGZY,oBACMD;IAFf,MAAM,EACJE,OAAOD,CAAAA,qBAAAA,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcC,IAAAA,AAAI,MAAA,QAAlBD,uBAAAA,KAAAA,IAAAA,qBAAsB,QAAQ,EACrCE,aAAaH,CAAAA,oCAAAA,UAAUI,sBAAAA,AAAsB,MAAA,QAAhCJ,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAC1D,GAAGK,WACJ,GAAGP;IAEJ,IACEQ,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,WAAWN;IAEtD,OAAO;QACL,GAAGY,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AASK,iCAAiC,CACtCL,OACAC;IAEA,+CAA+C;IAC/CD,QAAQR,6CAAAA,EAA8BQ,OAAO;QAAEe,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,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,GAAGvB,oCAAAA,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.js

@@ -607,7 +607,6 @@ const textareaClassNames = {
     ]
 });
 const useTextareaStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance, resize } = state;
     const disabled = state.textarea.disabled;
     const invalid = `${state.textarea['aria-invalid']}` === 'true';

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

@@ -1 +1 @@
-{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            // Animation for focus IN\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            // This is if the user clicks the field again while it's already focused\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        ':focus-within': {\n            outlineWidth: tokens.strokeWidthThick,\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\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    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        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const 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        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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 * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n    'use no memo';\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    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
+{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            // Animation for focus IN\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            // This is if the user clicks the field again while it's already focused\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        ':focus-within': {\n            outlineWidth: tokens.strokeWidthThick,\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\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    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        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const 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        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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 * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\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    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,kBAAkB;;;IA6Ld2K,0BAA0B;;;;uBA/LU,gBAAgB;AAE9D,2BAA2B;IAC9B1K,IAAI,EAAE,cAAc;IACpBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,aAAa,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAApD,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAqC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA,iBAAA;QAAAzD,MAAA,EAAA;IAAA;IAAA,kBAAA;QAAAA,MAAA,EAAA;IAAA;IAAA,wBAAA;QAAAA,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAyC,MAAA,EAAA;IAAA;IAAA,yBAAA;QAAA1D,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAyC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAA3D,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA2C,kBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAF,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAH,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAI,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAJ,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAsHzB,CAAC;AACF;;CAEA,GAAI,MAAMK,iBAAiB,GAAA,WAAA,OAAGzJ,eAAA,EAAA;IAAAS,IAAA,EAAA;QAAAoC,MAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,MAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAnB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAnB,OAAA,EAAA;QAAA+I,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAnI,QAAA,EAAA;QAAA6H,MAAA,EAAA;QAAAO,OAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAtJ,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAmJ,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAL,MAAA,EAAA;QAAAtJ,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAmJ,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAN,MAAA,EAAA;QAAAtJ,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAmJ,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAApB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA2C7B,CAAC;AACF;;CAEA,GAAI,MAAMsB,uBAAuB,GAAA,WAAA,OAAG1K,eAAA,EAAA;IAAA2K,IAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,UAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,QAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAzB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAanC,CAAC;AAGS,oCAAoC8B,KAAK,IAAG;IACnD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,MAAAA,EAAQ,GAAGH,KAAK;IAC1C,MAAMpJ,QAAQ,GAAGoJ,KAAK,CAAC1K,QAAQ,CAACsB,QAAQ;IACxC,MAAMiH,OAAO,GAAG,GAAGmC,KAAK,CAAC1K,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;IAC9D,MAAM4E,MAAM,GAAGgG,UAAU,CAACE,UAAU,CAAC,QAAQ,CAAC;IAC9C,MAAMC,UAAU,GAAG9K,aAAa,CAAC,CAAC;IAClC,oDAAA;IACAyK,KAAK,CAAC3K,IAAI,CAACiL,SAAS,OAAGtL,mBAAY,EAACI,kBAAkB,CAACC,IAAI,EAAEgL,UAAU,CAAC7K,IAAI,EAAEoB,QAAQ,IAAIyJ,UAAU,CAACzJ,QAAQ,EAAE,CAACA,QAAQ,IAAIsD,MAAM,IAAImG,UAAU,CAACnG,MAAM,EAAE,CAACtD,QAAQ,IAAIyJ,UAAU,CAACH,UAAU,CAAC,EAAE,CAACtJ,QAAQ,IAAIyJ,UAAU,CAAClI,WAAW,EAAE,CAACvB,QAAQ,IAAIsJ,UAAU,KAAK,SAAS,IAAIG,UAAU,CAAC5F,kBAAkB,EAAE,CAAC7D,QAAQ,IAAIiH,OAAO,IAAIwC,UAAU,CAACxC,OAAO,EAAEmC,KAAK,CAAC3K,IAAI,CAACiL,SAAS,CAAC;IAC5W,MAAMC,cAAc,GAAG/B,iBAAiB,CAAC,CAAC;IAC1C,MAAMgC,oBAAoB,GAAGf,uBAAuB,CAAC,CAAC;IACtD,oDAAA;IACAO,KAAK,CAAC1K,QAAQ,CAACgL,SAAS,OAAGtL,mBAAY,EAACI,kBAAkB,CAACE,QAAQ,EAAEiL,cAAc,CAAC/K,IAAI,EAAE+K,cAAc,CAACN,IAAI,CAAC,EAAEO,oBAAoB,CAACL,MAAM,CAAC,EAAEvJ,QAAQ,IAAI2J,cAAc,CAAC3J,QAAQ,EAAEoJ,KAAK,CAAC1K,QAAQ,CAACgL,SAAS,CAAC;IAC5M,OAAON,KAAK;AAChB,CAAC"}

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

@@ -207,7 +207,6 @@ const textareaClassNames = {
     }
 });
 const useTextareaStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance, resize } = state;
     const disabled = state.textarea.disabled;
     const invalid = `${state.textarea['aria-invalid']}` === 'true';

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 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  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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  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  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.7.3",
+  "version": "9.7.5",
   "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.2",
+    "@fluentui/react-field": "^9.5.3",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.4",
-    "@fluentui/react-jsx-runtime": "^9.4.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },