feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-textarea/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-textarea
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

node_modules/@fluentui/react-textarea/README.md

@@ -0,0 +1,20 @@
+# @fluentui/react-textarea
+
+**React Textarea components for [Fluent UI React](https://react.fluentui.dev)**
+
+The Textarea component is a multiline text input that allows the user to enter
+
+## Usage
+
+To import Textarea:
+
+```js
+import { Textarea } from '@fluentui/react-textarea';
+```
+
+### Examples
+
+```js
+<Textarea placeholder="Enter text here..." />
+<Textarea defaultValue="Lorem ipsum dolor" />
+```

node_modules/@fluentui/react-textarea/dist/index.d.ts

@@ -0,0 +1,121 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render the final JSX of Textarea
+ */
+export declare const renderTextarea_unstable: (state: TextareaState) => JSXElement;
+
+/**
+ * The Textarea component allows the user to enter and edit text in multiple lines.
+ */
+export declare const Textarea: ForwardRefComponent<TextareaProps>;
+
+/**
+ * Textarea base props, excluding design-related props like appearance and size.
+ * Note: resize is kept as it is a structural/behavioral prop.
+ */
+export declare type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;
+
+/**
+ * Textarea base state, excluding design-related state like appearance and size.
+ */
+export declare type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;
+
+export declare const textareaClassNames: SlotClassNames<TextareaSlots>;
+
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */
+export declare type TextareaOnChangeData = {
+    value: string;
+};
+
+/**
+ * Textarea Props
+ */
+export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
+    /**
+     * Styling the Textarea should use.
+     *
+     * @default outline
+     *
+     * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
+     */
+    appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
+    /**
+     * The default value of the Textarea.
+     */
+    defaultValue?: string;
+    /**
+     * Callback for when the user changes the value.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
+    /**
+     * Which direction the Textarea is allowed to be resized.
+     *
+     * @default none
+     */
+    resize?: 'none' | 'horizontal' | 'vertical' | 'both';
+    /**
+     * Size of the Textarea.
+     *
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The value of the Textarea.
+     */
+    value?: string;
+};
+
+export declare type TextareaSlots = {
+    /**
+     * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus
+     * indicator border animation. For more information, see Spec.md
+     *
+     * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.
+     */
+    textarea: NonNullable<Slot<'textarea'>>;
+};
+
+/**
+ * State used in rendering Textarea
+ */
+export declare type TextareaState = ComponentState<TextareaSlots> & Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;
+
+/**
+ * Create the state required to render Textarea.
+ *
+ * The returned state can be modified with hooks such as useTextareaStyles_unstable,
+ * before being passed to renderTextarea_unstable.
+ *
+ * @param props - props from this instance of Textarea
+ * @param ref - reference to root HTMLElement of Textarea
+ */
+export declare const useTextarea_unstable: (props: TextareaProps, ref: React_2.Ref<HTMLTextAreaElement>) => TextareaState;
+
+/**
+ * Base hook for Textarea component, which manages state related to slots structure and
+ * controlled/uncontrolled value state.
+ *
+ * @param props - User provided props to the Textarea component.
+ * @param ref - User provided ref to be passed to the Textarea component.
+ */
+export declare const useTextareaBase_unstable: (props: TextareaBaseProps, ref?: React_2.Ref<HTMLTextAreaElement>) => TextareaBaseState;
+
+/**
+ * Apply styling to the Textarea slots based on the state
+ */
+export declare const useTextareaStyles_unstable: (state: TextareaState) => TextareaState;
+
+export { }

node_modules/@fluentui/react-textarea/lib-commonjs/Textarea.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Textarea: function() {
+        return _index.Textarea;
+    },
+    renderTextarea_unstable: function() {
+        return _index.renderTextarea_unstable;
+    },
+    textareaClassNames: function() {
+        return _index.textareaClassNames;
+    },
+    useTextareaBase_unstable: function() {
+        return _index.useTextareaBase_unstable;
+    },
+    useTextareaStyles_unstable: function() {
+        return _index.useTextareaStyles_unstable;
+    },
+    useTextarea_unstable: function() {
+        return _index.useTextarea_unstable;
+    }
+});
+const _index = require("./components/Textarea/index");

node_modules/@fluentui/react-textarea/lib-commonjs/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type {\n  TextareaBaseProps,\n  TextareaBaseState,\n  TextareaOnChangeData,\n  TextareaProps,\n  TextareaSlots,\n  TextareaState,\n} from './components/Textarea/index';\nexport {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n  useTextareaBase_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable","useTextareaBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAGlBG,+BAAwB;;;eAFxBF,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,8BAA8B"}

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/Textarea.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Textarea", {
+    enumerable: true,
+    get: function() {
+        return Textarea;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderTextarea = require("./renderTextarea");
+const _useTextarea = require("./useTextarea");
+const _useTextareaStylesstyles = require("./useTextareaStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Textarea = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTextarea.useTextarea_unstable)(props, ref);
+    (0, _useTextareaStylesstyles.useTextareaStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTextareaStyles_unstable')(state);
+    return (0, _renderTextarea.renderTextarea_unstable)(state);
+});
+Textarea.displayName = 'Textarea';

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderTextarea_unstable } from './renderTextarea';\nimport { useTextarea_unstable } from './useTextarea';\nimport { useTextareaStyles_unstable } from './useTextareaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { TextareaProps } from './Textarea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Textarea component allows the user to enter and edit text in multiple lines.\n */\nexport const Textarea: ForwardRefComponent<TextareaProps> = React.forwardRef((props, ref) => {\n  const state = useTextarea_unstable(props, ref);\n\n  useTextareaStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTextareaStyles_unstable')(state);\n\n  return renderTextarea_unstable(state);\n});\n\nTextarea.displayName = 'Textarea';\n"],"names":["React","renderTextarea_unstable","useTextarea_unstable","useTextareaStyles_unstable","useCustomStyleHook_unstable","Textarea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;6BACtB,gBAAgB;yCACV,6BAA6B;qCAG5B,kCAAkC;AAKvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQP,iCAAAA,EAAqBK,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/Textarea.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/Textarea.types.js.map

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

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Textarea: function() {
+        return _Textarea.Textarea;
+    },
+    renderTextarea_unstable: function() {
+        return _renderTextarea.renderTextarea_unstable;
+    },
+    textareaClassNames: function() {
+        return _useTextareaStylesstyles.textareaClassNames;
+    },
+    useTextareaBase_unstable: function() {
+        return _useTextarea.useTextareaBase_unstable;
+    },
+    useTextareaStyles_unstable: function() {
+        return _useTextareaStylesstyles.useTextareaStyles_unstable;
+    },
+    useTextarea_unstable: function() {
+        return _useTextarea.useTextarea_unstable;
+    }
+});
+const _Textarea = require("./Textarea");
+const _renderTextarea = require("./renderTextarea");
+const _useTextarea = require("./useTextarea");
+const _useTextareaStylesstyles = require("./useTextareaStyles.styles");

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type {\n  TextareaBaseProps,\n  TextareaBaseState,\n  TextareaOnChangeData,\n  TextareaProps,\n  TextareaSlots,\n  TextareaState,\n} from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable, useTextareaBase_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","useTextarea_unstable","useTextareaBase_unstable","textareaClassNames","useTextareaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eASRC,uCAAuB;;;eAEvBG,2CAAkB;;;eADID,qCAAwB;;;eAC1BE,mDAA0B;;;eAD9CH,iCAAoB;;;0BAVJ,aAAa;gCASE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/renderTextarea.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTextarea_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTextarea_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderTextarea_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.textarea, {})
+    });
+};

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/renderTextarea.js.map

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

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/useTextarea.js

@@ -0,0 +1,89 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTextareaBase_unstable: function() {
+        return useTextareaBase_unstable;
+    },
+    useTextarea_unstable: function() {
+        return useTextarea_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactfield = require("@fluentui/react-field");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+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;
+    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.');
+    }
+    const baseState = useTextareaBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size,
+        appearance
+    };
+};
+const useTextareaBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const { resize = 'none', onChange } = props;
+    const [value, setValue] = (0, _reactutilities.useControllableState)({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: undefined
+    });
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'textarea',
+        excludedPropNames: [
+            'onChange',
+            'value',
+            'defaultValue'
+        ]
+    });
+    const state = {
+        resize,
+        components: {
+            root: 'span',
+            textarea: 'textarea'
+        },
+        textarea: _reactutilities.slot.always(props.textarea, {
+            defaultProps: {
+                ref,
+                ...nativeProps.primary
+            },
+            elementType: 'textarea'
+        }),
+        root: _reactutilities.slot.always(props.root, {
+            defaultProps: nativeProps.root,
+            elementType: 'span'
+        })
+    };
+    state.textarea.value = value;
+    state.textarea.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
+        const newValue = ev.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            value: newValue
+        });
+        setValue(newValue);
+    });
+    return state;
+};

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/useTextareaStyles.styles.js

@@ -0,0 +1,621 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    textareaClassNames: function() {
+        return textareaClassNames;
+    },
+    useTextareaStyles_unstable: function() {
+        return useTextareaStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const textareaClassNames = {
+    root: 'fui-Textarea',
+    textarea: 'fui-Textarea__textarea'
+};
+/**
+ * Styles for the root(wrapper) slot
+ */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        mc9l5x: "ftuwxu6",
+        B7ck84d: "f1ewtqcl",
+        qhf8xq: "f10pi13n",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1yiegib",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "f1s184ao",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        ha4doy: "f12kltsn"
+    },
+    disabled: {
+        De3pzq: "f1c21dwh",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "ff3nzm7",
+        Bcq6wej: "f9dbb4x",
+        Jcjdmf: [
+            "f3qs60o",
+            "f5u9ap2"
+        ],
+        sc4o1m: "fwd1oij",
+        Bosien3: [
+            "f5u9ap2",
+            "f3qs60o"
+        ]
+    },
+    interactive: {
+        li1rpt: "f1gw3sf2",
+        Bsft5z2: "f13zj6fq",
+        E3zdtr: "f1mdlcz9",
+        Eqx8gd: [
+            "f1a7op3",
+            "f1cjjd47"
+        ],
+        By385i5: "f1gboi2j",
+        B1piin3: [
+            "f1cjjd47",
+            "f1a7op3"
+        ],
+        Dlnsje: "ffyw7fx",
+        d9w3h3: [
+            "f1kp91vd",
+            "f1ibwz09"
+        ],
+        B3778ie: [
+            "f1ibwz09",
+            "f1kp91vd"
+        ],
+        B1q35kw: 0,
+        Bw17bha: 0,
+        Bcgy8vk: 0,
+        Bjuhk93: "f1mnjydx",
+        Gjdm7m: "fj2g8qd",
+        b1kco5: "f1yk9hq",
+        Ba2ppi3: "fhwpy7i",
+        F2fol1: "f14ee0xe",
+        lck23g: "f1xhbsuh",
+        wi16st: "fsrmcvb",
+        ywj3b2: "f1t3k7v9",
+        umuwi5: "fjw5xc1",
+        Blcqepd: "f1xdyd5c",
+        nplu4u: "fatpbeo",
+        Bioka5o: "fb7uyps",
+        Bnupc0a: "fx04xgm",
+        bing71: "f1c7in40",
+        Bercvud: "f1ibeo51",
+        Bbr2w1p: "f1vnc8sk",
+        Bduesf4: "f3e99gv",
+        Bpq79vn: "fhljsf7"
+    },
+    filled: {
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f88035w",
+        q7v0qe: "ftmjh5b",
+        kmh5ft: [
+            "f17blpuu",
+            "fsrcdbj"
+        ],
+        nagaa4: "f1tpwn32",
+        B1yhkcb: [
+            "fsrcdbj",
+            "f17blpuu"
+        ]
+    },
+    "filled-darker": {
+        De3pzq: "f16xq7d1"
+    },
+    "filled-lighter": {
+        De3pzq: "fxugw4r"
+    },
+    "filled-darker-shadow": {
+        De3pzq: "f16xq7d1",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f1gmd7mu",
+        E5pizo: "fyed02w"
+    },
+    "filled-lighter-shadow": {
+        De3pzq: "fxugw4r",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f1gmd7mu",
+        E5pizo: "fyed02w"
+    },
+    outline: {
+        De3pzq: "fxugw4r",
+        Bgfg5da: 0,
+        B9xav0g: "f1c1zstj",
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fhz96rm"
+    },
+    outlineInteractive: {
+        kzujx5: 0,
+        oetu4i: "f1l4zc64",
+        gvrnp0: 0,
+        xv9156: 0,
+        jek2p4: 0,
+        gg5e9n: 0,
+        Beu9t3s: 0,
+        dt87k2: 0,
+        Bt1vbvt: 0,
+        Bwzppfd: 0,
+        Bop6t4b: 0,
+        B2zwrfe: 0,
+        Bwp2tzp: 0,
+        Bgoe8wy: 0,
+        Bf40cpq: 0,
+        ckks6v: 0,
+        Baalond: "f9mts5e",
+        v2iqwr: 0,
+        wmxk5l: "f1z0osm6",
+        Bj33j0h: 0,
+        Bs0cc2w: 0,
+        qwjtx1: 0,
+        B50zh58: 0,
+        f7epvg: 0,
+        e1hlit: 0,
+        B7mkhst: 0,
+        ak43y8: 0,
+        Bbcopvn: 0,
+        Bvecx4l: 0,
+        lwioe0: 0,
+        B6oc9vd: 0,
+        e2sjt0: 0,
+        uqwnxt: 0,
+        asj8p9: "f1acnei2",
+        Br8fjdy: 0,
+        zoxjo1: "f1so894s",
+        Bt3ojkv: 0,
+        B7pmvfx: 0,
+        Bfht2n1: 0,
+        an54nd: 0,
+        t1ykpo: 0,
+        Belqbek: 0,
+        bbt1vd: 0,
+        Brahy3i: 0,
+        r7b1zc: 0,
+        rexu52: 0,
+        ovtnii: 0,
+        Bvq3b66: 0,
+        Bawrxx6: 0,
+        Bbs6y8j: 0,
+        B2qpgjt: "f19ezbcq"
+    },
+    invalid: {
+        tvckwq: "fs4k3qj",
+        gk2u95: [
+            "fcee079",
+            "fmyw78r"
+        ],
+        hhx65j: "f1fgmyf4",
+        Bxowmz0: [
+            "fmyw78r",
+            "fcee079"
+        ]
+    }
+}, {
+    d: [
+        ".ftuwxu6{display:inline-flex;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f10pi13n{position:relative;}",
+        [
+            ".f1yiegib{padding:0 0 var(--strokeWidthThick) 0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1s184ao{margin:0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f12kltsn{vertical-align:top;}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        [
+            ".ff3nzm7{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeDisabled);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1gw3sf2::after{box-sizing:border-box;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".f1mdlcz9::after{position:absolute;}",
+        ".f1a7op3::after{left:-1px;}",
+        ".f1cjjd47::after{right:-1px;}",
+        ".f1gboi2j::after{bottom:-1px;}",
+        ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}",
+        ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        [
+            ".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}",
+            {
+                p: -1
+            }
+        ],
+        ".fj2g8qd::after{clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}",
+        ".f1yk9hq::after{transform:scaleX(0);}",
+        ".fhwpy7i::after{transition-property:transform;}",
+        ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
+        ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}",
+        [
+            ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        [
+            ".f1gmd7mu{border:var(--strokeWidthThin) solid var(--colorTransparentStrokeInteractive);}",
+            {
+                p: -2
+            }
+        ],
+        ".fyed02w{box-shadow:var(--shadow2);}",
+        [
+            ".f1gmd7mu{border:var(--strokeWidthThin) solid var(--colorTransparentStrokeInteractive);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
+        ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
+        ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
+        ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
+        ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ]
+    ],
+    w: [
+        ".fjw5xc1:focus-within::after{transform:scaleX(1);}",
+        ".f1xdyd5c:focus-within::after{transition-property:transform;}",
+        ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}",
+        ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}",
+        ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
+        ".f1vnc8sk:focus-within{outline-width:var(--strokeWidthThick);}",
+        ".f3e99gv:focus-within{outline-style:solid;}",
+        ".fhljsf7:focus-within{outline-color:transparent;}",
+        [
+            ".f19ezbcq:focus-within{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Pressed);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1so894s:focus-within{border-bottom-color:var(--colorCompoundBrandStroke);}"
+    ],
+    h: [
+        ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}",
+        ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}",
+        ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}",
+        ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}",
+        [
+            ".f9mts5e:hover{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Hover);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"
+    ],
+    a: [
+        [
+            ".f1acnei2:active{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Pressed);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
+    ]
+});
+/**
+ * Styles for the textarea slot
+ */ const useTextareaStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        icvyot: "f1ern45e",
+        vrafjx: [
+            "f1n71otn",
+            "f1deefiw"
+        ],
+        oivjwe: "f1h8hb77",
+        wvpqe5: [
+            "f1deefiw",
+            "f1n71otn"
+        ],
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "f1s184ao",
+        De3pzq: "f3rmtva",
+        B7ck84d: "f1ewtqcl",
+        sj55zd: "f19n0e5",
+        Bh6795r: "fqerorx",
+        Bahqtrf: "fk6fouc",
+        Bqenvij: "f1l02sjl",
+        yvdlaj: "fwyc1cq",
+        B3o7kgh: "f13ta7ih",
+        oeaueh: "f1s6fcnf"
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        Bceei9c: "fdrzuqr",
+        yvdlaj: "fahhnxm"
+    },
+    small: {
+        sshi5w: "f1w5jphr",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1pnffij",
+        Bxyxcbc: "f192z54u",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    medium: {
+        sshi5w: "fvmd9f",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1ww82xo",
+        Bxyxcbc: "f1if7ixc",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    large: {
+        sshi5w: "f1kfson",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f15hvtkj",
+        Bxyxcbc: "f3kip1f",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "faaz57k"
+    }
+}, {
+    d: [
+        ".f1ern45e{border-top-style:none;}",
+        ".f1n71otn{border-right-style:none;}",
+        ".f1deefiw{border-left-style:none;}",
+        ".f1h8hb77{border-bottom-style:none;}",
+        [
+            ".f1s184ao{margin:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".f3rmtva{background-color:transparent;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fqerorx{flex-grow:1;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".f1l02sjl{height:100%;}",
+        ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}",
+        ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}",
+        ".f13ta7ih::-webkit-input-placeholder{opacity:1;}",
+        ".f13ta7ih::-moz-placeholder{opacity:1;}",
+        ".f1s6fcnf{outline-style:none;}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".fdrzuqr{cursor:not-allowed;}",
+        ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
+        ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1w5jphr{min-height:40px;}",
+        [
+            ".f1pnffij{padding:var(--spacingVerticalXS) calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
+            {
+                p: -1
+            }
+        ],
+        ".f192z54u{max-height:200px;}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".fvmd9f{min-height:52px;}",
+        [
+            ".f1ww82xo{padding:var(--spacingVerticalSNudge) calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
+            {
+                p: -1
+            }
+        ],
+        ".f1if7ixc{max-height:260px;}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f1kfson{min-height:64px;}",
+        [
+            ".f15hvtkj{padding:var(--spacingVerticalS) calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}",
+            {
+                p: -1
+            }
+        ],
+        ".f3kip1f{max-height:320px;}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}"
+    ]
+});
+/**
+ * Styles for the textarea's resize property
+ */ const useTextareaResizeStyles = /*#__PURE__*/ (0, _react.__styles)({
+    none: {
+        B3rzk8w: "f1o1s39h"
+    },
+    both: {
+        B3rzk8w: "f1pxm0xe"
+    },
+    horizontal: {
+        B3rzk8w: "fq6nmtn"
+    },
+    vertical: {
+        B3rzk8w: "f1f5ktr4"
+    }
+}, {
+    d: [
+        ".f1o1s39h{resize:none;}",
+        ".f1pxm0xe{resize:both;}",
+        ".fq6nmtn{resize:horizontal;}",
+        ".f1f5ktr4{resize:vertical;}"
+    ]
+});
+const useTextareaStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance, resize } = state;
+    const disabled = state.textarea.disabled;
+    const invalid = `${state.textarea['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.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);
+    const textareaStyles = useTextareaStyles();
+    const textareaResizeStyles = useTextareaResizeStyles();
+    state.textarea.className = (0, _react.mergeClasses)(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
+    return state;
+};

node_modules/@fluentui/react-textarea/lib-commonjs/components/Textarea/useTextareaStyles.styles.raw.js

@@ -0,0 +1,221 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    textareaClassNames: function() {
+        return textareaClassNames;
+    },
+    useTextareaStyles_unstable: function() {
+        return useTextareaStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const textareaClassNames = {
+    root: 'fui-Textarea',
+    textarea: 'fui-Textarea__textarea'
+};
+/**
+ * Styles for the root(wrapper) slot
+ */ const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'inline-flex',
+        boxSizing: 'border-box',
+        position: 'relative',
+        // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.
+        padding: `0 0 ${_reacttheme.tokens.strokeWidthThick} 0`,
+        margin: '0',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        verticalAlign: 'top'
+    },
+    disabled: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeDisabled}`,
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        }
+    },
+    interactive: {
+        // This is all for the bottom focus border.
+        // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
+        '::after': {
+            boxSizing: 'border-box',
+            content: '""',
+            position: 'absolute',
+            left: '-1px',
+            bottom: '-1px',
+            right: '-1px',
+            // Maintaining the correct corner radius:
+            // Use the whole border-radius as the height and only put radii on the bottom corners.
+            // (Otherwise the radius would be automatically reduced to fit available space.)
+            // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+            height: `max(${_reacttheme.tokens.strokeWidthThick}, ${_reacttheme.tokens.borderRadiusMedium})`,
+            borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
+            borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+            // Flat 2px border:
+            // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
+            // (This could be done without trimming using `background: linear-gradient(...)`, but using
+            // borderBottom makes it easier for people to override the color if needed.)
+            borderBottom: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+            clipPath: `inset(calc(100% - ${_reacttheme.tokens.strokeWidthThick}) 0 0 0)`,
+            // Animation for focus OUT
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationUltraFast,
+            transitionDelay: _reacttheme.tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within::after': {
+            // Animation for focus IN
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationNormal,
+            transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within:active::after': {
+            // This is if the user clicks the field again while it's already focused
+            borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
+        },
+        ':focus-within': {
+            outlineWidth: _reacttheme.tokens.strokeWidthThick,
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        }
+    },
+    filled: {
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        ':hover,:focus-within': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
+        }
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    'filled-darker-shadow': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStrokeInteractive}`,
+        boxShadow: _reacttheme.tokens.shadow2
+    },
+    'filled-lighter-shadow': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStrokeInteractive}`,
+        boxShadow: _reacttheme.tokens.shadow2
+    },
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        ':hover': {
+            border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1Hover}`,
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        ':active': {
+            border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1Pressed}`,
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        },
+        ':focus-within': {
+            border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1Pressed}`,
+            borderBottomColor: _reacttheme.tokens.colorCompoundBrandStroke
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    }
+});
+/**
+ * Styles for the textarea slot
+ */ const useTextareaStyles = (0, _react.makeStyles)({
+    base: {
+        ..._react.shorthands.borderStyle('none'),
+        margin: '0',
+        backgroundColor: 'transparent',
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        flexGrow: 1,
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        height: '100%',
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForeground4,
+            opacity: 1
+        },
+        outlineStyle: 'none'
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    },
+    // The padding style adds both content and regular padding (from design spec), this is because the handle is not
+    // affected by changing the padding of the root.
+    small: {
+        minHeight: '40px',
+        padding: `${_reacttheme.tokens.spacingVerticalXS} calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+        maxHeight: '200px',
+        ..._reacttheme.typographyStyles.caption1
+    },
+    medium: {
+        minHeight: '52px',
+        padding: `${_reacttheme.tokens.spacingVerticalSNudge} calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+        maxHeight: '260px',
+        ..._reacttheme.typographyStyles.body1
+    },
+    large: {
+        minHeight: '64px',
+        padding: `${_reacttheme.tokens.spacingVerticalS} calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+        maxHeight: '320px',
+        ..._reacttheme.typographyStyles.body2
+    }
+});
+/**
+ * Styles for the textarea's resize property
+ */ const useTextareaResizeStyles = (0, _react.makeStyles)({
+    none: {
+        resize: 'none'
+    },
+    both: {
+        resize: 'both'
+    },
+    horizontal: {
+        resize: 'horizontal'
+    },
+    vertical: {
+        resize: 'vertical'
+    }
+});
+const useTextareaStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance, resize } = state;
+    const disabled = state.textarea.disabled;
+    const invalid = `${state.textarea['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.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);
+    const textareaStyles = useTextareaStyles();
+    const textareaResizeStyles = useTextareaResizeStyles();
+    state.textarea.className = (0, _react.mergeClasses)(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
+    return state;
+};

node_modules/@fluentui/react-textarea/lib-commonjs/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Textarea: function() {
+        return _Textarea.Textarea;
+    },
+    renderTextarea_unstable: function() {
+        return _Textarea.renderTextarea_unstable;
+    },
+    textareaClassNames: function() {
+        return _Textarea.textareaClassNames;
+    },
+    useTextareaBase_unstable: function() {
+        return _Textarea.useTextareaBase_unstable;
+    },
+    useTextareaStyles_unstable: function() {
+        return _Textarea.useTextareaStyles_unstable;
+    },
+    useTextarea_unstable: function() {
+        return _Textarea.useTextarea_unstable;
+    }
+});
+const _Textarea = require("./Textarea");

node_modules/@fluentui/react-textarea/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n  useTextareaBase_unstable,\n} from './Textarea';\nexport type {\n  TextareaOnChangeData,\n  TextareaProps,\n  TextareaSlots,\n  TextareaState,\n  TextareaBaseProps,\n  TextareaBaseState,\n} from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable","useTextareaBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,iCAAuB;;;eACvBC,4BAAkB;;;eAGlBG,kCAAwB;;;eAFxBF,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,aAAa"}

node_modules/@fluentui/react-textarea/lib/Textarea.js

@@ -0,0 +1 @@
+export { Textarea, renderTextarea_unstable, textareaClassNames, useTextareaStyles_unstable, useTextarea_unstable, useTextareaBase_unstable } from './components/Textarea/index';

node_modules/@fluentui/react-textarea/lib/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type {\n  TextareaBaseProps,\n  TextareaBaseState,\n  TextareaOnChangeData,\n  TextareaProps,\n  TextareaSlots,\n  TextareaState,\n} from './components/Textarea/index';\nexport {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n  useTextareaBase_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable","useTextareaBase_unstable"],"mappings":"AAQA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,8BAA8B"}

node_modules/@fluentui/react-textarea/lib/components/Textarea/Textarea.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { renderTextarea_unstable } from './renderTextarea';
+import { useTextarea_unstable } from './useTextarea';
+import { useTextareaStyles_unstable } from './useTextareaStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The Textarea component allows the user to enter and edit text in multiple lines.
+ */ export const Textarea = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTextarea_unstable(props, ref);
+    useTextareaStyles_unstable(state);
+    useCustomStyleHook_unstable('useTextareaStyles_unstable')(state);
+    return renderTextarea_unstable(state);
+});
+Textarea.displayName = 'Textarea';

node_modules/@fluentui/react-textarea/lib/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderTextarea_unstable } from './renderTextarea';\nimport { useTextarea_unstable } from './useTextarea';\nimport { useTextareaStyles_unstable } from './useTextareaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { TextareaProps } from './Textarea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Textarea component allows the user to enter and edit text in multiple lines.\n */\nexport const Textarea: ForwardRefComponent<TextareaProps> = React.forwardRef((props, ref) => {\n  const state = useTextarea_unstable(props, ref);\n\n  useTextareaStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTextareaStyles_unstable')(state);\n\n  return renderTextarea_unstable(state);\n});\n\nTextarea.displayName = 'Textarea';\n"],"names":["React","renderTextarea_unstable","useTextarea_unstable","useTextareaStyles_unstable","useCustomStyleHook_unstable","Textarea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

node_modules/@fluentui/react-textarea/lib/components/Textarea/Textarea.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-textarea/lib/components/Textarea/Textarea.types.js.map

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

node_modules/@fluentui/react-textarea/lib/components/Textarea/index.js

@@ -0,0 +1,4 @@
+export { Textarea } from './Textarea';
+export { renderTextarea_unstable } from './renderTextarea';
+export { useTextarea_unstable, useTextareaBase_unstable } from './useTextarea';
+export { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';

node_modules/@fluentui/react-textarea/lib/components/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type {\n  TextareaBaseProps,\n  TextareaBaseState,\n  TextareaOnChangeData,\n  TextareaProps,\n  TextareaSlots,\n  TextareaState,\n} from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable, useTextareaBase_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","useTextarea_unstable","useTextareaBase_unstable","textareaClassNames","useTextareaStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAStC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

node_modules/@fluentui/react-textarea/lib/components/Textarea/renderTextarea.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Textarea
+ */ export const renderTextarea_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(state.textarea, {})
+    });
+};

node_modules/@fluentui/react-textarea/lib/components/Textarea/renderTextarea.js.map

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

node_modules/@fluentui/react-textarea/lib/components/Textarea/useTextarea.js

@@ -0,0 +1,84 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
+import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render Textarea.
+ *
+ * The returned state can be modified with hooks such as useTextareaStyles_unstable,
+ * before being passed to renderTextarea_unstable.
+ *
+ * @param props - props from this instance of Textarea
+ * @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;
+    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.');
+    }
+    const baseState = useTextareaBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size,
+        appearance
+    };
+};
+/**
+ * Base hook for Textarea component, which manages state related to slots structure and
+ * controlled/uncontrolled value state.
+ *
+ * @param props - User provided props to the Textarea component.
+ * @param ref - User provided ref to be passed to the Textarea component.
+ */ export const useTextareaBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const { resize = 'none', onChange } = props;
+    const [value, setValue] = useControllableState({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: undefined
+    });
+    const nativeProps = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'textarea',
+        excludedPropNames: [
+            'onChange',
+            'value',
+            'defaultValue'
+        ]
+    });
+    const state = {
+        resize,
+        components: {
+            root: 'span',
+            textarea: 'textarea'
+        },
+        textarea: slot.always(props.textarea, {
+            defaultProps: {
+                ref,
+                ...nativeProps.primary
+            },
+            elementType: 'textarea'
+        }),
+        root: slot.always(props.root, {
+            defaultProps: nativeProps.root,
+            elementType: 'span'
+        })
+    };
+    state.textarea.value = value;
+    state.textarea.onChange = useEventCallback((ev)=>{
+        const newValue = ev.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+            value: newValue
+        });
+        setValue(newValue);
+    });
+    return state;
+};

node_modules/@fluentui/react-textarea/lib/components/Textarea/useTextareaStyles.styles.js

@@ -0,0 +1,403 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const textareaClassNames = {
+  root: 'fui-Textarea',
+  textarea: 'fui-Textarea__textarea'
+};
+/**
+ * Styles for the root(wrapper) slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6",
+    B7ck84d: "f1ewtqcl",
+    qhf8xq: "f10pi13n",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1yiegib",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1s184ao",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    ha4doy: "f12kltsn"
+  },
+  disabled: {
+    De3pzq: "f1c21dwh",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "ff3nzm7",
+    Bcq6wej: "f9dbb4x",
+    Jcjdmf: ["f3qs60o", "f5u9ap2"],
+    sc4o1m: "fwd1oij",
+    Bosien3: ["f5u9ap2", "f3qs60o"]
+  },
+  interactive: {
+    li1rpt: "f1gw3sf2",
+    Bsft5z2: "f13zj6fq",
+    E3zdtr: "f1mdlcz9",
+    Eqx8gd: ["f1a7op3", "f1cjjd47"],
+    By385i5: "f1gboi2j",
+    B1piin3: ["f1cjjd47", "f1a7op3"],
+    Dlnsje: "ffyw7fx",
+    d9w3h3: ["f1kp91vd", "f1ibwz09"],
+    B3778ie: ["f1ibwz09", "f1kp91vd"],
+    B1q35kw: 0,
+    Bw17bha: 0,
+    Bcgy8vk: 0,
+    Bjuhk93: "f1mnjydx",
+    Gjdm7m: "fj2g8qd",
+    b1kco5: "f1yk9hq",
+    Ba2ppi3: "fhwpy7i",
+    F2fol1: "f14ee0xe",
+    lck23g: "f1xhbsuh",
+    wi16st: "fsrmcvb",
+    ywj3b2: "f1t3k7v9",
+    umuwi5: "fjw5xc1",
+    Blcqepd: "f1xdyd5c",
+    nplu4u: "fatpbeo",
+    Bioka5o: "fb7uyps",
+    Bnupc0a: "fx04xgm",
+    bing71: "f1c7in40",
+    Bercvud: "f1ibeo51",
+    Bbr2w1p: "f1vnc8sk",
+    Bduesf4: "f3e99gv",
+    Bpq79vn: "fhljsf7"
+  },
+  filled: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w",
+    q7v0qe: "ftmjh5b",
+    kmh5ft: ["f17blpuu", "fsrcdbj"],
+    nagaa4: "f1tpwn32",
+    B1yhkcb: ["fsrcdbj", "f17blpuu"]
+  },
+  "filled-darker": {
+    De3pzq: "f16xq7d1"
+  },
+  "filled-lighter": {
+    De3pzq: "fxugw4r"
+  },
+  "filled-darker-shadow": {
+    De3pzq: "f16xq7d1",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f1gmd7mu",
+    E5pizo: "fyed02w"
+  },
+  "filled-lighter-shadow": {
+    De3pzq: "fxugw4r",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f1gmd7mu",
+    E5pizo: "fyed02w"
+  },
+  outline: {
+    De3pzq: "fxugw4r",
+    Bgfg5da: 0,
+    B9xav0g: "f1c1zstj",
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fhz96rm"
+  },
+  outlineInteractive: {
+    kzujx5: 0,
+    oetu4i: "f1l4zc64",
+    gvrnp0: 0,
+    xv9156: 0,
+    jek2p4: 0,
+    gg5e9n: 0,
+    Beu9t3s: 0,
+    dt87k2: 0,
+    Bt1vbvt: 0,
+    Bwzppfd: 0,
+    Bop6t4b: 0,
+    B2zwrfe: 0,
+    Bwp2tzp: 0,
+    Bgoe8wy: 0,
+    Bf40cpq: 0,
+    ckks6v: 0,
+    Baalond: "f9mts5e",
+    v2iqwr: 0,
+    wmxk5l: "f1z0osm6",
+    Bj33j0h: 0,
+    Bs0cc2w: 0,
+    qwjtx1: 0,
+    B50zh58: 0,
+    f7epvg: 0,
+    e1hlit: 0,
+    B7mkhst: 0,
+    ak43y8: 0,
+    Bbcopvn: 0,
+    Bvecx4l: 0,
+    lwioe0: 0,
+    B6oc9vd: 0,
+    e2sjt0: 0,
+    uqwnxt: 0,
+    asj8p9: "f1acnei2",
+    Br8fjdy: 0,
+    zoxjo1: "f1so894s",
+    Bt3ojkv: 0,
+    B7pmvfx: 0,
+    Bfht2n1: 0,
+    an54nd: 0,
+    t1ykpo: 0,
+    Belqbek: 0,
+    bbt1vd: 0,
+    Brahy3i: 0,
+    r7b1zc: 0,
+    rexu52: 0,
+    ovtnii: 0,
+    Bvq3b66: 0,
+    Bawrxx6: 0,
+    Bbs6y8j: 0,
+    B2qpgjt: "f19ezbcq"
+  },
+  invalid: {
+    tvckwq: "fs4k3qj",
+    gk2u95: ["fcee079", "fmyw78r"],
+    hhx65j: "f1fgmyf4",
+    Bxowmz0: ["fmyw78r", "fcee079"]
+  }
+}, {
+  d: [".ftuwxu6{display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10pi13n{position:relative;}", [".f1yiegib{padding:0 0 var(--strokeWidthThick) 0;}", {
+    p: -1
+  }], [".f1s184ao{margin:0;}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f12kltsn{vertical-align:top;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".ff3nzm7{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeDisabled);}", {
+    p: -2
+  }], ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
+    p: -1
+  }], ".fj2g8qd::after{clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".f1gmd7mu{border:var(--strokeWidthThin) solid var(--colorTransparentStrokeInteractive);}", {
+    p: -2
+  }], ".fyed02w{box-shadow:var(--shadow2);}", [".f1gmd7mu{border:var(--strokeWidthThin) solid var(--colorTransparentStrokeInteractive);}", {
+    p: -2
+  }], [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
+    p: -2
+  }], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
+  m: [["@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]],
+  w: [".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f1vnc8sk:focus-within{outline-width:var(--strokeWidthThick);}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", [".f19ezbcq:focus-within{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Pressed);}", {
+    p: -2
+  }], ".f1so894s:focus-within{border-bottom-color:var(--colorCompoundBrandStroke);}"],
+  h: [".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", [".f9mts5e:hover{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Hover);}", {
+    p: -2
+  }], ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
+  a: [[".f1acnei2:active{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Pressed);}", {
+    p: -2
+  }], ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"]
+});
+/**
+ * Styles for the textarea slot
+ */
+const useTextareaStyles = /*#__PURE__*/__styles({
+  base: {
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1s184ao",
+    De3pzq: "f3rmtva",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "f19n0e5",
+    Bh6795r: "fqerorx",
+    Bahqtrf: "fk6fouc",
+    Bqenvij: "f1l02sjl",
+    yvdlaj: "fwyc1cq",
+    B3o7kgh: "f13ta7ih",
+    oeaueh: "f1s6fcnf"
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr",
+    yvdlaj: "fahhnxm"
+  },
+  small: {
+    sshi5w: "f1w5jphr",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1pnffij",
+    Bxyxcbc: "f192z54u",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  medium: {
+    sshi5w: "fvmd9f",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1ww82xo",
+    Bxyxcbc: "f1if7ixc",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  large: {
+    sshi5w: "f1kfson",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f15hvtkj",
+    Bxyxcbc: "f3kip1f",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "faaz57k"
+  }
+}, {
+  d: [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", [".f1s184ao{margin:0;}", {
+    p: -1
+  }], ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{flex-grow:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1l02sjl{height:100%;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1s6fcnf{outline-style:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1w5jphr{min-height:40px;}", [".f1pnffij{padding:var(--spacingVerticalXS) calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], ".f192z54u{max-height:200px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fvmd9f{min-height:52px;}", [".f1ww82xo{padding:var(--spacingVerticalSNudge) calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], ".f1if7ixc{max-height:260px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kfson{min-height:64px;}", [".f15hvtkj{padding:var(--spacingVerticalS) calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], ".f3kip1f{max-height:320px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
+});
+/**
+ * Styles for the textarea's resize property
+ */
+const useTextareaResizeStyles = /*#__PURE__*/__styles({
+  none: {
+    B3rzk8w: "f1o1s39h"
+  },
+  both: {
+    B3rzk8w: "f1pxm0xe"
+  },
+  horizontal: {
+    B3rzk8w: "fq6nmtn"
+  },
+  vertical: {
+    B3rzk8w: "f1f5ktr4"
+  }
+}, {
+  d: [".f1o1s39h{resize:none;}", ".f1pxm0xe{resize:both;}", ".fq6nmtn{resize:horizontal;}", ".f1f5ktr4{resize:vertical;}"]
+});
+/**
+ * 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';
+  const filled = appearance.startsWith('filled');
+  const rootStyles = useRootStyles();
+  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);
+  const textareaStyles = useTextareaStyles();
+  const textareaResizeStyles = useTextareaResizeStyles();
+  state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
+  return state;
+};

node_modules/@fluentui/react-textarea/lib/components/Textarea/useTextareaStyles.styles.raw.js

@@ -0,0 +1,205 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const textareaClassNames = {
+    root: 'fui-Textarea',
+    textarea: 'fui-Textarea__textarea'
+};
+/**
+ * Styles for the root(wrapper) slot
+ */ const useRootStyles = makeStyles({
+    base: {
+        display: 'inline-flex',
+        boxSizing: 'border-box',
+        position: 'relative',
+        // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.
+        padding: `0 0 ${tokens.strokeWidthThick} 0`,
+        margin: '0',
+        borderRadius: tokens.borderRadiusMedium,
+        verticalAlign: 'top'
+    },
+    disabled: {
+        backgroundColor: tokens.colorTransparentBackground,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('GrayText')
+        }
+    },
+    interactive: {
+        // This is all for the bottom focus border.
+        // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
+        '::after': {
+            boxSizing: 'border-box',
+            content: '""',
+            position: 'absolute',
+            left: '-1px',
+            bottom: '-1px',
+            right: '-1px',
+            // Maintaining the correct corner radius:
+            // Use the whole border-radius as the height and only put radii on the bottom corners.
+            // (Otherwise the radius would be automatically reduced to fit available space.)
+            // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+            height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,
+            borderBottomLeftRadius: tokens.borderRadiusMedium,
+            borderBottomRightRadius: tokens.borderRadiusMedium,
+            // Flat 2px border:
+            // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
+            // (This could be done without trimming using `background: linear-gradient(...)`, but using
+            // borderBottom makes it easier for people to override the color if needed.)
+            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
+            clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,
+            // Animation for focus OUT
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationUltraFast,
+            transitionDelay: tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within::after': {
+            // Animation for focus IN
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationNormal,
+            transitionDelay: tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within:active::after': {
+            // This is if the user clicks the field again while it's already focused
+            borderBottomColor: tokens.colorCompoundBrandStrokePressed
+        },
+        ':focus-within': {
+            outlineWidth: tokens.strokeWidthThick,
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        }
+    },
+    filled: {
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        ':hover,:focus-within': {
+            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)
+        }
+    },
+    'filled-darker': {
+        backgroundColor: tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: tokens.colorNeutralBackground1
+    },
+    'filled-darker-shadow': {
+        backgroundColor: tokens.colorNeutralBackground3,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,
+        boxShadow: tokens.shadow2
+    },
+    'filled-lighter-shadow': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,
+        boxShadow: tokens.shadow2
+    },
+    outline: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+        borderBottomColor: tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        ':hover': {
+            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,
+            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
+        },
+        ':active': {
+            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        },
+        ':focus-within': {
+            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,
+            borderBottomColor: tokens.colorCompoundBrandStroke
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+        }
+    }
+});
+/**
+ * Styles for the textarea slot
+ */ const useTextareaStyles = makeStyles({
+    base: {
+        ...shorthands.borderStyle('none'),
+        margin: '0',
+        backgroundColor: 'transparent',
+        boxSizing: 'border-box',
+        color: tokens.colorNeutralForeground1,
+        flexGrow: 1,
+        fontFamily: tokens.fontFamilyBase,
+        height: '100%',
+        '::placeholder': {
+            color: tokens.colorNeutralForeground4,
+            opacity: 1
+        },
+        outlineStyle: 'none'
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    },
+    // The padding style adds both content and regular padding (from design spec), this is because the handle is not
+    // affected by changing the padding of the root.
+    small: {
+        minHeight: '40px',
+        padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
+        maxHeight: '200px',
+        ...typographyStyles.caption1
+    },
+    medium: {
+        minHeight: '52px',
+        padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
+        maxHeight: '260px',
+        ...typographyStyles.body1
+    },
+    large: {
+        minHeight: '64px',
+        padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,
+        maxHeight: '320px',
+        ...typographyStyles.body2
+    }
+});
+/**
+ * Styles for the textarea's resize property
+ */ const useTextareaResizeStyles = makeStyles({
+    none: {
+        resize: 'none'
+    },
+    both: {
+        resize: 'both'
+    },
+    horizontal: {
+        resize: 'horizontal'
+    },
+    vertical: {
+        resize: 'vertical'
+    }
+});
+/**
+ * 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';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    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);
+    const textareaStyles = useTextareaStyles();
+    const textareaResizeStyles = useTextareaResizeStyles();
+    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
+    return state;
+};

node_modules/@fluentui/react-textarea/lib/index.js

@@ -0,0 +1 @@
+export { Textarea, renderTextarea_unstable, textareaClassNames, useTextareaStyles_unstable, useTextarea_unstable, useTextareaBase_unstable } from './Textarea';

node_modules/@fluentui/react-textarea/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n  useTextareaBase_unstable,\n} from './Textarea';\nexport type {\n  TextareaOnChangeData,\n  TextareaProps,\n  TextareaSlots,\n  TextareaState,\n  TextareaBaseProps,\n  TextareaBaseState,\n} from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable","useTextareaBase_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,aAAa"}

node_modules/@fluentui/react-textarea/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@fluentui/react-textarea",
+  "version": "9.7.1",
+  "description": "Fluent UI TextArea component",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui/react-field": "^9.5.0",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@griffel/react": "^1.5.32",
+    "@swc/helpers": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
+}