@vkzstudio/muza-ui 1.0.28 → 1.0.30

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,23 +1,23 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import f, { forwardRef as V, useId as $, useMemo as T, useRef as _, useEffect as B } from "react";
+import f, { forwardRef as $, useId as P, useMemo as T, useRef as _, useEffect as B } from "react";
 import { triggerWrapperVariants as L } from "../Select/utils.js";
-import { useMuzaTranslations as P } from "../../translations/TranslationContext.js";
+import { useMuzaTranslations as U } from "../../translations/TranslationContext.js";
 import { Tag as p } from "../Tag/Tag.js";
-import { FormField as U } from "../FormField/FormField.js";
-import { DropdownMenu as G, DropdownMenuTrigger as H, DropdownMenuContent as J, DropdownMenuCheckboxItem as K } from "../DropdownMenu/DropdownMenu.js";
-import { Typography as Q } from "../Typography/Typography.js";
-import { AltArrowUpOutline as X } from "@solar-icons/react-perf";
-import { cn as Y } from "../../utils/cn.js";
-const Z = V(
+import { FormField as G } from "../FormField/FormField.js";
+import { DropdownMenu as H, DropdownMenuTrigger as J, DropdownMenuContent as K, DropdownMenuCheckboxItem as Q } from "../DropdownMenu/DropdownMenu.js";
+import { Typography as X } from "../Typography/Typography.js";
+import { AltArrowUpOutline as Y } from "@solar-icons/react-perf";
+import { cn as Z } from "../../utils/cn.js";
+const ee = $(
   (I, h) => {
-    const z = P(), {
+    const z = U(), {
       label: x,
       hint: g,
       error: b,
-      options: c,
+      options: o,
       onChange: l,
       value: t,
-      disabled: o,
+      disabled: c,
       prefix: d,
       maxNumberOfVisibleTags: i = 2,
       size: D,
@@ -25,8 +25,9 @@ const Z = V(
       required: v,
       disableRequiredAsterisk: W,
       labelExtra: k,
-      infoTooltip: A
-    } = I, w = S ?? z.select.placeholder, N = $(), C = x ? `${N}-label` : void 0, O = g ? `${N}-hint` : void 0, M = T(() => new Map(c.map((e) => [e.value, e.label])), [c]), j = T(() => {
+      infoTooltip: A,
+      collisionPadding: C
+    } = I, w = S ?? z.select.placeholder, N = P(), O = x ? `${N}-label` : void 0, j = g ? `${N}-hint` : void 0, M = T(() => new Map(o.map((e) => [e.value, e.label])), [o]), q = T(() => {
       const e = t && t.map((n) => M.get(n));
       return e != null && e.length ? e.length <= i ? /* @__PURE__ */ r("div", { className: "flex flex-1 items-start justify-start gap-xs", children: e.map((n, s) => /* @__PURE__ */ r(p, { variant: "info", className: "max-w-[72px]", children: n }, s)) }) : /* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-xs", children: [
         ...e.slice(0, i).map((n, s) => /* @__PURE__ */ r(
@@ -43,7 +44,7 @@ const Z = V(
           "+"
         ] }, "more")
       ] }) : /* @__PURE__ */ r(
-        Q,
+        X,
         {
           size: "input",
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
@@ -52,10 +53,10 @@ const Z = V(
           children: w
         }
       );
-    }, [t, w, i, M]), [y, q] = f.useState(!1), [R, E] = f.useState(0), m = f.useRef(!1), F = _(null), a = (typeof h == "function" ? null : h) ?? F;
+    }, [t, w, i, M]), [y, E] = f.useState(!1), [R, F] = f.useState(0), m = f.useRef(!1), V = _(null), a = (typeof h == "function" ? null : h) ?? V;
     return B(() => {
       const e = () => {
-        a.current && E(a.current.offsetWidth);
+        a.current && F(a.current.offsetWidth);
       };
       e();
       const n = new ResizeObserver(e);
@@ -63,32 +64,32 @@ const Z = V(
         n.disconnect();
       };
     }, [a]), /* @__PURE__ */ r(
-      U,
+      G,
       {
         label: x,
         hint: g,
         error: b,
         required: v,
         disableRequiredAsterisk: W,
-        labelId: C,
-        hintId: O,
+        labelId: O,
+        hintId: j,
         labelExtra: k,
         infoTooltip: A,
         children: /* @__PURE__ */ u(
-          G,
+          H,
           {
             onOpenChange: (e) => {
-              q(e);
+              E(e);
             },
             children: [
-              /* @__PURE__ */ r(H, { disabled: o, asChild: !0, children: /* @__PURE__ */ r(
+              /* @__PURE__ */ r(J, { disabled: c, asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
                   ref: a,
                   type: "button",
                   role: "input",
                   tabIndex: 0,
-                  disabled: o,
+                  disabled: c,
                   "aria-required": v,
                   className: L({
                     size: D,
@@ -100,15 +101,15 @@ const Z = V(
                     d && /* @__PURE__ */ r(
                       "span",
                       {
-                        className: o ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                        className: c ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
                         children: d
                       }
                     ),
-                    j,
+                    q,
                     /* @__PURE__ */ r(
-                      X,
+                      Y,
                       {
-                        className: Y(
+                        className: Z(
                           "transition-transform duration-200",
                           y ? "rotate-0" : "rotate-180"
                         )
@@ -118,7 +119,7 @@ const Z = V(
                 }
               ) }),
               /* @__PURE__ */ r(
-                J,
+                K,
                 {
                   className: "mt-1",
                   style: {
@@ -127,8 +128,9 @@ const Z = V(
                   onCloseAutoFocus: (e) => {
                     m.current || e.preventDefault(), m.current = !1;
                   },
-                  children: c.map((e) => /* @__PURE__ */ r(
-                    K,
+                  collisionPadding: C,
+                  children: o.map((e) => /* @__PURE__ */ r(
+                    Q,
                     {
                       checked: t == null ? void 0 : t.includes(e.value),
                       disabled: e.disabled,
@@ -149,7 +151,7 @@ const Z = V(
     );
   }
 );
-Z.displayName = "MultiSelect";
+ee.displayName = "MultiSelect";
 export {
-  Z as MultiSelect
+  ee as MultiSelect
 };

package/dist/components/Radio/Radio.d.ts

@@ -27,8 +27,10 @@ export interface RadioGroupItemProps extends React.ComponentProps<typeof RadioGr
     label?: string;
     /** Secondary text displayed below the primary label in lighter styling. */
     secondaryLabel?: string;
+    /** Font weight for the primary label. When `secondaryLabel` is present, primary is always medium. @default 'regular' */
+    weight?: 'regular' | 'medium';
 }
 declare const RadioGroup: ({ className, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
-declare const RadioGroupItem: ({ className, id, label, secondaryLabel, disabled, ...props }: RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroupItem: ({ className, id, label, secondaryLabel, disabled, weight, ...props }: RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE;;;GAGG;AACH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,UAAU,GAAI,yBAAyB,eAAe,4CAQ3D,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,8DAOrB,mBAAmB,4CAgErB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE;;;GAGG;AACH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wHAAwH;IACxH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC9B;AAED,QAAA,MAAM,UAAU,GAAI,yBAAyB,eAAe,4CAQ3D,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,sEAQrB,mBAAmB,4CAgErB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Radio/Radio.js

@@ -1,24 +1,25 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import * as p from "react";
+import * as b from "react";
 import * as s from "@radix-ui/react-radio-group";
 import { cn as t } from "../../utils/cn.js";
 import { Typography as m } from "../Typography/Typography.js";
-const x = ({ className: i, ...a }) => /* @__PURE__ */ r(
+const g = ({ className: i, ...a }) => /* @__PURE__ */ r(
   s.Root,
   {
     "data-slot": "radio-group",
     className: t(i),
     ...a
   }
-), g = ({
+), k = ({
   className: i,
   id: a,
   label: c,
   secondaryLabel: e,
   disabled: o,
-  ...l
+  weight: l = "regular",
+  ...f
 }) => {
-  const f = p.useId(), d = a || f;
+  const p = b.useId(), d = a || p;
   return /* @__PURE__ */ n("div", { className: "isolate flex items-start gap-sm", children: [
     /* @__PURE__ */ r(
       s.Item,
@@ -35,7 +36,7 @@ const x = ({ className: i, ...a }) => /* @__PURE__ */ r(
         ),
         id: d,
         disabled: o,
-        ...l,
+        ...f,
         children: /* @__PURE__ */ r(
           s.Indicator,
           {
@@ -63,7 +64,7 @@ const x = ({ className: i, ...a }) => /* @__PURE__ */ r(
             {
               component: "span",
               variant: "body",
-              weight: e != null && e.length ? "medium" : "regular",
+              weight: e != null && e.length ? "medium" : l,
               size: "base",
               children: c
             }
@@ -87,6 +88,6 @@ const x = ({ className: i, ...a }) => /* @__PURE__ */ r(
   ] });
 };
 export {
-  x as RadioGroup,
-  g as RadioGroupItem
+  g as RadioGroup,
+  k as RadioGroupItem
 };

package/dist/components/Radio/Radio.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof RadioGroupItem>;
 export declare const Default: Story;
 export declare const Playground: Story;
+export declare const MediumWeight: Story;
 export declare const WithSecondaryLabel: Story;
 //# sourceMappingURL=Radio.stories.d.ts.map

package/dist/components/Radio/Radio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAoDrC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5C,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAA"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAwDrC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5C,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAA"}

package/dist/components/TextEditor/EditorToolbar.js

@@ -1,8 +1,8 @@
-import { jsxs as u, Fragment as m, jsx as n } from "react/jsx-runtime";
-import { ToolbarButton as h } from "./ToolbarButton.js";
-import { ToolbarSeparator as e } from "./ToolbarSeparator.js";
+import { jsxs as h, Fragment as m, jsx as n } from "react/jsx-runtime";
+import { ToolbarButton as u } from "./ToolbarButton.js";
+import { ToolbarSeparator as v } from "./ToolbarSeparator.js";
 import { TextH1 as B, TextH2 as L, TextH3 as A, BulletList as T, NumberList as i } from "../Icons/CustomIcons.js";
-import { Flex as v } from "../Flex/Flex.js";
+import { Flex as e } from "../Flex/Flex.js";
 import { UndoLeftBold as H, UndoRightBold as y, TextBoldBold as F, TextItalicBold as w, TextCrossBold as I, LinkRoundBold as N, EraserBold as S } from "@solar-icons/react-perf";
 const O = ({
   editor: l,
@@ -13,19 +13,19 @@ const O = ({
   toolbarExtra: p
 }) => {
   const g = (k, f) => typeof k == "boolean" ? k : k.includes(f);
-  return /* @__PURE__ */ u(
-    v,
+  return /* @__PURE__ */ h(
+    e,
     {
       wrap: "wrap",
       align: "center",
       gap: "md",
       padding: { px: "2xl", py: "md" },
-      className: "border-b border-comp-texteditor-stroke-def",
+      className: "border-b border-comp-input-stroke-def",
       children: [
-        c.history !== !1 && /* @__PURE__ */ u(m, { children: [
-          /* @__PURE__ */ u(v, { align: "center", gap: "3xs", children: [
+        c.history !== !1 && /* @__PURE__ */ h(m, { children: [
+          /* @__PURE__ */ h(e, { align: "center", gap: "3xs", children: [
             g(c.history, "undo") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(H, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().undo().run(),
@@ -34,7 +34,7 @@ const O = ({
               }
             ),
             g(c.history, "redo") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(y, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().redo().run(),
@@ -43,12 +43,12 @@ const O = ({
               }
             )
           ] }),
-          /* @__PURE__ */ n(e, {})
+          /* @__PURE__ */ n(v, {})
         ] }),
-        c.headings !== !1 && /* @__PURE__ */ u(m, { children: [
-          /* @__PURE__ */ u(v, { align: "center", gap: "3xs", children: [
+        c.headings !== !1 && /* @__PURE__ */ h(m, { children: [
+          /* @__PURE__ */ h(e, { align: "center", gap: "3xs", children: [
             g(c.headings, 1) && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(B, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleHeading({ level: 1 }).run(),
@@ -58,7 +58,7 @@ const O = ({
               }
             ),
             g(c.headings, 2) && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(L, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleHeading({ level: 2 }).run(),
@@ -68,7 +68,7 @@ const O = ({
               }
             ),
             g(c.headings, 3) && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(A, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleHeading({ level: 3 }).run(),
@@ -78,12 +78,12 @@ const O = ({
               }
             )
           ] }),
-          /* @__PURE__ */ n(e, {})
+          /* @__PURE__ */ n(v, {})
         ] }),
-        c.formatting !== !1 && /* @__PURE__ */ u(m, { children: [
-          /* @__PURE__ */ u(v, { align: "center", gap: "3xs", children: [
+        c.formatting !== !1 && /* @__PURE__ */ h(m, { children: [
+          /* @__PURE__ */ h(e, { align: "center", gap: "3xs", children: [
             g(c.formatting, "bold") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(F, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleBold().run(),
@@ -93,7 +93,7 @@ const O = ({
               }
             ),
             g(c.formatting, "italic") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(w, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleItalic().run(),
@@ -103,7 +103,7 @@ const O = ({
               }
             ),
             g(c.formatting, "strikethrough") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(I, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleStrike().run(),
@@ -113,12 +113,12 @@ const O = ({
               }
             )
           ] }),
-          /* @__PURE__ */ n(e, {})
+          /* @__PURE__ */ n(v, {})
         ] }),
-        c.lists !== !1 && /* @__PURE__ */ u(m, { children: [
-          /* @__PURE__ */ u(v, { align: "center", gap: "3xs", children: [
+        c.lists !== !1 && /* @__PURE__ */ h(m, { children: [
+          /* @__PURE__ */ h(e, { align: "center", gap: "3xs", children: [
             g(c.lists, "bullet") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(T, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleBulletList().run(),
@@ -128,7 +128,7 @@ const O = ({
               }
             ),
             g(c.lists, "ordered") && /* @__PURE__ */ n(
-              h,
+              u,
               {
                 icon: /* @__PURE__ */ n(i, {}),
                 onClick: () => l == null ? void 0 : l.chain().focus().toggleOrderedList().run(),
@@ -138,11 +138,11 @@ const O = ({
               }
             )
           ] }),
-          /* @__PURE__ */ n(e, {})
+          /* @__PURE__ */ n(v, {})
         ] }),
-        c.link && /* @__PURE__ */ u(m, { children: [
+        c.link && /* @__PURE__ */ h(m, { children: [
           /* @__PURE__ */ n(
-            h,
+            u,
             {
               icon: /* @__PURE__ */ n(N, {}),
               onClick: x,
@@ -151,11 +151,11 @@ const O = ({
               label: s.insertLink
             }
           ),
-          /* @__PURE__ */ n(e, {})
+          /* @__PURE__ */ n(v, {})
         ] }),
-        c.clearFormatting && /* @__PURE__ */ u(m, { children: [
+        c.clearFormatting && /* @__PURE__ */ h(m, { children: [
           /* @__PURE__ */ n(
-            h,
+            u,
             {
               icon: /* @__PURE__ */ n(S, {}),
               onClick: () => l == null ? void 0 : l.chain().focus().unsetAllMarks().clearNodes().run(),
@@ -163,7 +163,7 @@ const O = ({
               label: s.clearFormatting
             }
           ),
-          p && /* @__PURE__ */ n(e, {})
+          p && /* @__PURE__ */ n(v, {})
         ] }),
         p
       ]

package/dist/components/TextEditor/TextEditor.js

@@ -14,16 +14,16 @@ import { cn as b } from "../../utils/cn.js";
 const et = J(
   [
     "overflow-hidden rounded-xl border bg-surface-base-secondary transition-colors",
-    "focus-within:border-comp-texteditor-stroke-focused",
+    "focus-within:border-comp-input-stroke-focused",
     "pb-[calc(var(--spacing-xl)/2)]"
     // Offset scrollbar to make resize handle visible
   ],
   {
     variants: {
       state: {
-        default: "border-comp-texteditor-stroke-def hover:border-comp-texteditor-stroke-hover",
-        disabled: "cursor-not-allowed border-comp-texteditor-stroke-disabled opacity-60",
-        error: "border-comp-texteditor-stroke-error"
+        default: "border-comp-input-stroke-def hover:border-comp-input-stroke-hover",
+        disabled: "cursor-not-allowed border-comp-input-stroke-disabled opacity-60",
+        error: "border-comp-input-stroke-error"
       }
     },
     defaultVariants: {
@@ -34,7 +34,7 @@ const et = J(
   ({
     value: i,
     defaultValue: g,
-    onChange: d,
+    onChange: c,
     onBlur: y,
     onFocus: v,
     placeholder: L = "",
@@ -42,7 +42,7 @@ const et = J(
     hint: T,
     infoTooltip: C,
     disabled: o = !1,
-    readOnly: c = !1,
+    readOnly: d = !1,
     required: M,
     disableRequiredAsterisk: H,
     error: l,
@@ -92,10 +92,10 @@ const et = J(
         ...w
       ],
       content: i ?? g ?? "",
-      editable: !o && !c,
+      editable: !o && !d,
       onUpdate: ({ editor: e }) => {
         const x = e.getText().trim(), h = e.getHTML();
-        d == null || d(x.length === 0 ? "" : h);
+        c == null || c(x.length === 0 ? "" : h);
       },
       onBlur: y,
       onFocus: v,
@@ -138,8 +138,8 @@ const et = J(
         (i || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(i, !1);
       }
     }, [t, i]), _(() => {
-      t && t.setEditable(!o && !c);
-    }, [t, o, c]), $(
+      t && t.setEditable(!o && !d);
+    }, [t, o, d]), $(
       S,
       () => ({
         editor: t,

package/dist/components/Textarea/Textarea.js

@@ -1,10 +1,10 @@
 import { jsxs as G, jsx as l } from "react/jsx-runtime";
 import { forwardRef as H, useId as U, useRef as W, useState as B } from "react";
-import { cva as h } from "class-variance-authority";
+import { cva as x } from "class-variance-authority";
 import { FormField as D } from "../FormField/FormField.js";
-import { cn as x } from "../../utils/cn.js";
+import { cn as h } from "../../utils/cn.js";
 import { typographyVariants as b } from "../Typography/Typography.js";
-const E = h(
+const E = x(
   [
     b({
       variant: "body",
@@ -36,10 +36,10 @@ const E = h(
       resize: "none"
     }
   }
-), J = h(
+), J = x(
   [
-    "overflow-hidden rounded-xl border border-comp-input-stroke-def bg-comp-input-fill-def transition-colors",
-    "focus-within:border-comp-texteditor-stroke-focused",
+    "overflow-hidden rounded-xl border bg-comp-input-fill-def transition-colors",
+    "focus-within:border-comp-input-stroke-focused",
     "pb-[calc(var(--spacing-xl)/2)]",
     // Offset scrollbar to make resize handle visible
     "flex"
@@ -47,9 +47,9 @@ const E = h(
   {
     variants: {
       state: {
-        default: "border-comp-texteditor-stroke-def hover:border-comp-texteditor-stroke-hover",
+        default: "border-comp-input-stroke-def hover:border-comp-input-stroke-hover",
         disabled: "cursor-not-allowed border-comp-input-stroke-disabled bg-comp-input-fill-disabled",
-        error: "border-comp-texteditor-stroke-error"
+        error: "border-comp-input-stroke-error"
       }
     },
     defaultVariants: {
@@ -85,7 +85,7 @@ const E = h(
     }, C = R && i.maxLength != null ? /* @__PURE__ */ G(
       "span",
       {
-        className: x(
+        className: h(
           b({
             variant: "body",
             weight: "regular",
@@ -122,7 +122,7 @@ const E = h(
             id: r,
             required: o,
             "aria-required": o,
-            className: x(
+            className: h(
               E({ error: e, resize: z, autoResize: s }),
               g
             ),