feat: Fluent UI Outlook Lite + connections mockup

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"}