@vkzstudio/muza-ui 1.0.17 → 1.0.18

package/dist/components/Select/Select.js

@@ -1,30 +1,33 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import m, { forwardRef as A, useMemo as I, useRef as N, useEffect as R } from "react";
-import { triggerWrapperVariants as j } from "./utils.js";
-import { useMuzaTranslations as E } from "../../translations/TranslationContext.js";
-import { Typography as s } from "../Typography/Typography.js";
-import { DropdownMenu as P, DropdownMenuTrigger as _, DropdownMenuContent as k, DropdownMenuRadioGroup as B, DropdownMenuRadioItem as F } from "../DropdownMenu/DropdownMenu.js";
-import { AltArrowUpOutline as G } from "@solar-icons/react-perf";
-import { cn as L } from "../../utils/cn.js";
-const U = A(
-  (z, f) => {
-    const S = E(), {
-      label: h,
-      hint: x,
-      error: g,
-      options: c,
-      onChange: a,
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import u, { forwardRef as j, useId as k, useMemo as E, useRef as N, useEffect as S } from "react";
+import { triggerWrapperVariants as P } from "./utils.js";
+import { useMuzaTranslations as _ } from "../../translations/TranslationContext.js";
+import { FormField as B } from "../FormField/FormField.js";
+import { Typography as I } from "../Typography/Typography.js";
+import { DropdownMenu as G, DropdownMenuTrigger as L, DropdownMenuContent as U, DropdownMenuRadioGroup as H, DropdownMenuRadioItem as J } from "../DropdownMenu/DropdownMenu.js";
+import { AltArrowUpOutline as K } from "@solar-icons/react-perf";
+import { cn as Q } from "../../utils/cn.js";
+const X = j(
+  (M, p) => {
+    const T = _(), {
+      label: f,
+      hint: m,
+      error: h,
+      options: i,
+      onChange: s,
       value: r,
-      disabled: i,
-      prefix: b,
-      size: M,
-      placeholder: T,
-      shouldScrollToSelectedOption: w,
-      collisionPadding: D
-    } = z, v = T ?? S.select.placeholder, O = I(() => {
-      const e = r && c.find((l) => l.value === r);
+      disabled: a,
+      prefix: g,
+      size: z,
+      placeholder: D,
+      shouldScrollToSelectedOption: x,
+      collisionPadding: O,
+      required: b,
+      disableRequiredAsterisk: W
+    } = M, w = D ?? T.select.placeholder, v = k(), A = f ? `${v}-label` : void 0, C = m ? `${v}-hint` : void 0, V = E(() => {
+      const e = r && i.find((o) => o.value === r);
       return e ? typeof e.label != "function" ? /* @__PURE__ */ t(
-        s,
+        I,
         {
           size: "input",
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
@@ -33,128 +36,120 @@ const U = A(
           children: e.label
         }
       ) : e.label : /* @__PURE__ */ t(
-        s,
+        I,
         {
           size: "input",
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
           weight: "regular",
           component: "span",
-          children: v
+          children: w
         }
       );
-    }, [c, r, v]), [o, W] = m.useState(!1), [y, C] = m.useState(0), d = m.useRef(!1), V = N(null), u = N({}), n = (typeof f == "function" ? null : f) ?? V;
-    return R(() => {
+    }, [i, r, w]), [l, q] = u.useState(!1), [R, F] = u.useState(0), c = u.useRef(!1), $ = N(null), d = N({}), n = (typeof p == "function" ? null : p) ?? $;
+    return S(() => {
       const e = () => {
-        n.current && C(n.current.offsetWidth);
+        n.current && F(n.current.offsetWidth);
       };
       e();
-      const l = new ResizeObserver(e);
-      return n.current && l.observe(n.current), () => {
-        l.disconnect();
+      const o = new ResizeObserver(e);
+      return n.current && o.observe(n.current), () => {
+        o.disconnect();
       };
-    }, [n]), R(() => {
+    }, [n]), S(() => {
       var e;
-      o && r && u.current[r] && w && ((e = u.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
-    }, [o, w, r]), /* @__PURE__ */ p("div", { className: "flex flex-1 flex-col gap-sm", children: [
-      h && /* @__PURE__ */ t(
-        s,
-        {
-          component: "label",
-          size: "sm",
-          weight: "regular",
-          className: "text-comp-select-text-primary",
-          children: h
-        }
-      ),
-      /* @__PURE__ */ p(
-        P,
-        {
-          onOpenChange: (e) => {
-            W(e);
-          },
-          children: [
-            /* @__PURE__ */ t(_, { disabled: i, asChild: !0, children: /* @__PURE__ */ t(
-              "button",
-              {
-                ref: n,
-                type: "button",
-                role: "input",
-                tabIndex: 0,
-                disabled: i,
-                className: j({ size: M, error: g, expanded: o }),
-                children: /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
-                  b && /* @__PURE__ */ t(
-                    "span",
-                    {
-                      className: i ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
-                      children: b
-                    }
-                  ),
-                  O,
-                  /* @__PURE__ */ t(
-                    G,
+      l && r && d.current[r] && x && ((e = d.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [l, x, r]), /* @__PURE__ */ t(
+      B,
+      {
+        label: f,
+        hint: m,
+        error: h,
+        required: b,
+        disableRequiredAsterisk: W,
+        labelId: A,
+        hintId: C,
+        className: "flex-1",
+        children: /* @__PURE__ */ y(
+          G,
+          {
+            onOpenChange: (e) => {
+              q(e);
+            },
+            children: [
+              /* @__PURE__ */ t(L, { disabled: a, asChild: !0, children: /* @__PURE__ */ t(
+                "button",
+                {
+                  ref: n,
+                  type: "button",
+                  role: "input",
+                  tabIndex: 0,
+                  disabled: a,
+                  "aria-required": b,
+                  className: P({ size: z, error: h, expanded: l }),
+                  children: /* @__PURE__ */ y("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+                    g && /* @__PURE__ */ t(
+                      "span",
+                      {
+                        className: a ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                        children: g
+                      }
+                    ),
+                    V,
+                    /* @__PURE__ */ t(
+                      K,
+                      {
+                        className: Q(
+                          "transition-transform duration-200",
+                          l ? "rotate-0" : "rotate-180"
+                        )
+                      }
+                    )
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ t(
+                U,
+                {
+                  className: "mt-1",
+                  style: {
+                    width: R > 0 ? `${R}px` : void 0
+                  },
+                  onCloseAutoFocus: (e) => {
+                    c.current || e.preventDefault(), c.current = !1;
+                  },
+                  collisionPadding: O,
+                  children: /* @__PURE__ */ t(
+                    H,
                     {
-                      className: L(
-                        "transition-transform duration-200",
-                        o ? "rotate-0" : "rotate-180"
-                      )
+                      value: r,
+                      onValueChange: (e) => {
+                        c.current = !0, s == null || s(e);
+                      },
+                      children: i.map((e) => /* @__PURE__ */ t(
+                        J,
+                        {
+                          value: e.value.toString(),
+                          disabled: e.disabled,
+                          icon: e.icon,
+                          ref: (o) => {
+                            d.current[e.value] = o;
+                          },
+                          children: e.label
+                        },
+                        e.value
+                      ))
                     }
                   )
-                ] })
-              }
-            ) }),
-            /* @__PURE__ */ t(
-              k,
-              {
-                className: "mt-1",
-                style: {
-                  width: y > 0 ? `${y}px` : void 0
-                },
-                onCloseAutoFocus: (e) => {
-                  d.current || e.preventDefault(), d.current = !1;
-                },
-                collisionPadding: D,
-                children: /* @__PURE__ */ t(
-                  B,
-                  {
-                    value: r,
-                    onValueChange: (e) => {
-                      d.current = !0, a == null || a(e);
-                    },
-                    children: c.map((e) => /* @__PURE__ */ t(
-                      F,
-                      {
-                        value: e.value.toString(),
-                        disabled: e.disabled,
-                        icon: e.icon,
-                        ref: (l) => {
-                          u.current[e.value] = l;
-                        },
-                        children: e.label
-                      },
-                      e.value
-                    ))
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ),
-      x && /* @__PURE__ */ t(
-        s,
-        {
-          component: "p",
-          size: "sm",
-          weight: "regular",
-          className: g ? "text-comp-select-text-error" : "text-comp-select-text-secondary",
-          children: x
-        }
-      )
-    ] });
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
   }
 );
-U.displayName = "Select";
+X.displayName = "Select";
 export {
-  U as Select
+  X as Select
 };

package/dist/components/TextEditor/TextEditor.d.ts

@@ -98,6 +98,10 @@ export interface TextEditorProps {
     disabled?: boolean;
     /** Allows viewing but not editing content */
     readOnly?: boolean;
+    /** Marks the field as required and displays a red asterisk next to the label. @default false */
+    required?: boolean;
+    /** Hides the required asterisk even when `required` is true. @default false */
+    disableRequiredAsterisk?: boolean;
     /** Error state. String shows as error message, boolean only shows error styling. */
     error?: string | boolean;
     /**

package/dist/components/TextEditor/TextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"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"}

package/dist/components/TextEditor/TextEditor.js

@@ -1,20 +1,19 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as I, useEffect as T, useImperativeHandle as O, useRef as $ } from "react";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as I, useEffect as b, useImperativeHandle as O, useRef as $ } from "react";
 import { Link as K } from "../../node_modules/@tiptap/extension-link/dist/index.js";
 import { Placeholder as W } from "../../node_modules/@tiptap/extension-placeholder/dist/index.js";
-import { useEditor as Y, EditorContent as q } from "../../node_modules/@tiptap/react/dist/index.js";
-import { StarterKit as D } from "../../node_modules/@tiptap/starter-kit/dist/index.js";
-import { cva as G } from "class-variance-authority";
-import { EditorToolbar as J } from "./EditorToolbar.js";
-import { LinkBubbleMenu as Q } from "./LinkBubbleMenu.js";
-import { useLinkEditor as X } from "./useLinkEditor.js";
+import { useEditor as q, EditorContent as D } from "../../node_modules/@tiptap/react/dist/index.js";
+import { StarterKit as G } from "../../node_modules/@tiptap/starter-kit/dist/index.js";
+import { cva as J } from "class-variance-authority";
+import { EditorToolbar as Q } from "./EditorToolbar.js";
+import { LinkBubbleMenu as X } from "./LinkBubbleMenu.js";
+import { useLinkEditor as Y } from "./useLinkEditor.js";
 import { useMuzaTranslations as Z } from "../../translations/TranslationContext.js";
-import { cn as d } from "../../utils/cn.js";
-import { Flex as L } from "../Flex/Flex.js";
-import { Typography as E } from "../Typography/Typography.js";
-import { TooltipProvider as tt, Tooltip as et, TooltipTrigger as rt, TooltipContent as ot } from "../Tooltip/Tooltip.js";
-import { InfoCircleBold as it } from "@solar-icons/react-perf";
-const nt = G(
+import { FormField as tt } from "../FormField/FormField.js";
+import { cn as g } from "../../utils/cn.js";
+import { TooltipProvider as et, Tooltip as rt, TooltipTrigger as ot, TooltipContent as it } from "../Tooltip/Tooltip.js";
+import { InfoCircleBold as nt } from "@solar-icons/react-perf";
+const lt = J(
   [
     "overflow-hidden rounded-xl border bg-surface-base-secondary transition-colors",
     "focus-within:border-comp-texteditor-stroke-focused",
@@ -35,39 +34,41 @@ const nt = G(
   }
 ), st = I(
   ({
-    value: s,
-    defaultValue: C,
-    onChange: p,
-    onBlur: M,
-    onFocus: w,
-    placeholder: H = "",
-    label: x,
-    hint: u,
-    infoTooltip: h,
+    value: l,
+    defaultValue: y,
+    onChange: d,
+    onBlur: v,
+    onFocus: L,
+    placeholder: T = "",
+    label: E,
+    hint: C,
+    infoTooltip: p,
     disabled: i = !1,
-    readOnly: f = !1,
-    error: a,
+    readOnly: c = !1,
+    required: M,
+    disableRequiredAsterisk: H,
+    error: s,
     toolbar: n = {},
-    toolbarExtra: g,
-    extensions: z = [],
-    minHeight: N = 200,
-    maxHeight: m,
+    toolbarExtra: x,
+    extensions: w = [],
+    minHeight: z = 200,
+    maxHeight: a,
     resizable: P = !0,
-    className: R,
-    contentClassName: U,
-    unstyled: S = !1,
-    editorClassName: V
-  }, j) => {
-    const k = Z(), c = {
+    className: N,
+    contentClassName: R,
+    unstyled: U = !1,
+    editorClassName: F
+  }, S) => {
+    const u = Z(), m = {
       history: n.history ?? !0,
       headings: n.headings ?? !0,
       formatting: n.formatting ?? !0,
       lists: n.lists ?? !0,
       link: n.link ?? !0,
       clearFormatting: n.clearFormatting ?? !0
-    }, A = !!g || Object.values(c).some((e) => e !== !1), t = Y({
+    }, V = !!x || Object.values(m).some((e) => e !== !1), t = q({
       extensions: [
-        D.configure({
+        G.configure({
           heading: { levels: [1, 2, 3] },
           bulletList: {
             HTMLAttributes: { class: "list-disc ml-6" }
@@ -76,7 +77,7 @@ const nt = G(
             HTMLAttributes: { class: "list-decimal ml-6" }
           }
         }),
-        ...c.link ? [
+        ...m.link ? [
           K.configure({
             openOnClick: !1,
             autolink: !0,
@@ -88,23 +89,23 @@ const nt = G(
           })
         ] : [],
         W.configure({
-          placeholder: ({ editor: e }) => e.state.doc.textContent.length === 0 ? H : ""
+          placeholder: ({ editor: e }) => e.state.doc.textContent.length === 0 ? T : ""
         }),
-        ...z
+        ...w
       ],
-      content: s ?? C ?? "",
-      editable: !i && !f,
+      content: l ?? y ?? "",
+      editable: !i && !c,
       onUpdate: ({ editor: e }) => {
-        const b = e.getText().trim(), v = e.getHTML();
-        p == null || p(b.length === 0 ? "" : v);
+        const k = e.getText().trim(), _ = e.getHTML();
+        d == null || d(k.length === 0 ? "" : _);
       },
-      onBlur: M,
-      onFocus: w,
+      onBlur: v,
+      onFocus: L,
       editorProps: {
         attributes: {
-          class: d(
+          class: g(
             "outline-none text-sm",
-            !S && [
+            !U && [
               // Headings
               "[&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-text-dark-primary-def [&_h1]:my-3",
               "[&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:text-text-dark-primary-def [&_h2]:my-3",
@@ -124,7 +125,7 @@ const nt = G(
             ],
             // Placeholder (only when the entire editor is empty — controlled via placeholder function)
             "[&_.is-empty]:before:content-[attr(data-placeholder)] [&_.is-empty]:before:text-comp-input-text-placeholder [&_.is-empty]:before:float-left [&_.is-empty]:before:h-0 [&_.is-empty]:before:pointer-events-none",
-            V
+            F
           ),
           // Inline styles needed because Tailwind CSS 4 JIT doesn't apply to dynamically created elements
           style: "width: 100%; min-height: 100%; max-width: none;",
@@ -133,15 +134,15 @@ const nt = G(
         }
       }
     });
-    T(() => {
-      if (t && s !== void 0) {
+    b(() => {
+      if (t && l !== void 0) {
         const e = t.getHTML();
-        (s || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(s, !1);
+        (l || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(l, !1);
       }
-    }, [t, s]), T(() => {
-      t && t.setEditable(!i && !f);
-    }, [t, i, f]), O(
-      j,
+    }, [t, l]), b(() => {
+      t && t.setEditable(!i && !c);
+    }, [t, i, c]), O(
+      S,
       () => ({
         editor: t,
         focus: () => t == null ? void 0 : t.commands.focus(),
@@ -153,91 +154,68 @@ const nt = G(
       }),
       [t]
     );
-    const o = X(t), y = $(null), B = i ? "disabled" : a ? "error" : "default", _ = typeof a == "string" ? a : void 0, F = {
-      minHeight: `${Math.max(N, 200)}px`,
-      maxHeight: m ? typeof m == "number" ? `${m}px` : m : void 0,
+    const o = Y(t), h = $(null), j = i ? "disabled" : s ? "error" : "default", A = typeof s == "string" ? s : void 0, B = {
+      minHeight: `${Math.max(z, 200)}px`,
+      maxHeight: a ? typeof a == "number" ? `${a}px` : a : void 0,
       resize: P && !i ? "vertical" : "none"
     };
-    return /* @__PURE__ */ r("div", { ref: y, children: /* @__PURE__ */ l(
-      L,
+    return /* @__PURE__ */ r("div", { ref: h, children: /* @__PURE__ */ r(
+      tt,
       {
-        direction: "column",
-        className: d("gap-comp-input-gap", R),
-        children: [
-          x && /* @__PURE__ */ l(L, { align: "center", gap: "2xs", children: [
-            /* @__PURE__ */ r(
-              E,
-              {
-                component: "label",
-                weight: "regular",
-                size: "sm",
-                className: "text-comp-select-text-primary",
-                fixY: !0,
-                children: x
-              }
-            ),
-            h && /* @__PURE__ */ r(tt, { children: /* @__PURE__ */ l(et, { children: [
-              /* @__PURE__ */ r(rt, { asChild: !0, children: /* @__PURE__ */ r(it, { className: "cursor-help text-comp-info-ico-def hover:text-comp-info-ico-hover" }) }),
-              /* @__PURE__ */ r(ot, { children: h })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ l("div", { className: nt({ state: B }), children: [
-            A && /* @__PURE__ */ r(
-              J,
-              {
-                editor: t,
-                toolbarConfig: c,
-                disabled: i,
-                translations: k.textEditor,
-                onLinkClick: o.handleLinkToolbarClick,
-                toolbarExtra: g
-              }
-            ),
-            /* @__PURE__ */ l(
-              "div",
-              {
-                className: d(
-                  "relative overflow-auto px-2xl py-xl",
-                  "mr-[calc(var(--spacing-xl)/2)]",
-                  "pr-[calc(var(--spacing-2xl)-var(--spacing-xl)/2)]",
-                  // Compensate for scrollbar offset
-                  U
-                ),
-                style: F,
-                children: [
-                  /* @__PURE__ */ r(q, { editor: t, className: "h-full w-full" }),
-                  t && c.link && /* @__PURE__ */ r(
-                    Q,
-                    {
-                      editor: t,
-                      containerRef: y,
-                      linkUrl: o.linkUrl,
-                      isEditingLink: o.isEditingLink,
-                      onUrlChange: o.setLinkUrl,
-                      onEdit: o.handleOpenLinkEdit,
-                      onSave: o.handleSaveLink,
-                      onRemove: o.handleRemoveLink,
-                      onCancel: o.handleCancelEdit,
-                      translations: k.textEditor
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          (u || _) && /* @__PURE__ */ r(
-            E,
+        label: E,
+        hint: A || C,
+        error: !!s,
+        required: M,
+        disableRequiredAsterisk: H,
+        className: N,
+        labelExtra: p ? /* @__PURE__ */ r(et, { children: /* @__PURE__ */ f(rt, { children: [
+          /* @__PURE__ */ r(ot, { asChild: !0, children: /* @__PURE__ */ r(nt, { className: "cursor-help text-comp-info-ico-def hover:text-comp-info-ico-hover" }) }),
+          /* @__PURE__ */ r(it, { children: p })
+        ] }) }) : void 0,
+        children: /* @__PURE__ */ f("div", { className: lt({ state: j }), children: [
+          V && /* @__PURE__ */ r(
+            Q,
             {
-              component: "span",
-              size: "sm",
-              weight: "regular",
-              className: d("text-comp-select-text-secondary", {
-                "text-comp-input-text-error": a
-              }),
-              children: _ || u
+              editor: t,
+              toolbarConfig: m,
+              disabled: i,
+              translations: u.textEditor,
+              onLinkClick: o.handleLinkToolbarClick,
+              toolbarExtra: x
+            }
+          ),
+          /* @__PURE__ */ f(
+            "div",
+            {
+              className: g(
+                "relative overflow-auto px-2xl py-xl",
+                "mr-[calc(var(--spacing-xl)/2)]",
+                "pr-[calc(var(--spacing-2xl)-var(--spacing-xl)/2)]",
+                // Compensate for scrollbar offset
+                R
+              ),
+              style: B,
+              children: [
+                /* @__PURE__ */ r(D, { editor: t, className: "h-full w-full" }),
+                t && m.link && /* @__PURE__ */ r(
+                  X,
+                  {
+                    editor: t,
+                    containerRef: h,
+                    linkUrl: o.linkUrl,
+                    isEditingLink: o.isEditingLink,
+                    onUrlChange: o.setLinkUrl,
+                    onEdit: o.handleOpenLinkEdit,
+                    onSave: o.handleSaveLink,
+                    onRemove: o.handleRemoveLink,
+                    onCancel: o.handleCancelEdit,
+                    translations: u.textEditor
+                  }
+                )
+              ]
             }
           )
-        ]
+        ] })
       }
     ) });
   }

package/dist/components/Textarea/Textarea.d.ts

@@ -11,6 +11,10 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
     error?: boolean;
     /** Error message displayed below textarea when error is true. Overrides hint text. */
     errorMessage?: string;
+    /** Marks the field as required and displays a red asterisk next to the label. @default false */
+    required?: boolean;
+    /** Hides the required asterisk even when `required` is true. @default false */
+    disableRequiredAsterisk?: boolean;
     /** Name attribute for form submission. */
     name?: string;
     /** Automatically grows textarea height to fit content. @default false */

package/dist/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAA;AAyCtE,wCAAwC;AACxC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,4HA0EpB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAA;AA0CtE,wCAAwC;AACxC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,4HA8DpB,CAAA"}