@dss-kit/ui-kit 0.3.10 → 1.0.0

package/dist/components/controls/IconButton/styles.js

@@ -44,75 +44,75 @@ const c = r({
   custom: r({})
 }, n = {
   primary: r({
-    backgroundColor: o.color.fill.accentPrimary,
-    ":where(&) svg": { color: o.color.icon.primaryInverse },
+    backgroundColor: o.color.fill.accent_primary,
+    ":where(&) svg": { color: o.color.icon.primary_inverse },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.accentPrimaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryInverse }
+      backgroundColor: o.color.fill.accent_primary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_inverse }
     }
   }),
   secondary: r({
-    backgroundColor: o.color.fill.accentSecondary,
+    backgroundColor: o.color.fill.accent_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.accentSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.accent_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   negative: r({
-    backgroundColor: o.color.fill.negativeSecondary,
+    backgroundColor: o.color.fill.negative_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.negativeSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.negative_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   positive: r({
-    backgroundColor: o.color.fill.positiveSecondary,
+    backgroundColor: o.color.fill.positive_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.positiveSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.positive_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   warning: r({
-    backgroundColor: o.color.fill.warningSecondary,
+    backgroundColor: o.color.fill.warning_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.warningSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.warning_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   neutral: r({
-    backgroundColor: o.color.fill.neutralSecondary,
+    backgroundColor: o.color.fill.neutral_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.neutralSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.neutral_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   transfer: r({
-    backgroundColor: o.color.fill.transferSecondary,
+    backgroundColor: o.color.fill.transfer_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.transferSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.transfer_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   "neutral-white": r({
-    backgroundColor: o.color.fill.bgPrimary,
+    backgroundColor: o.color.fill.bg_primary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.bgSecondary,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.bg_secondary,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   "no-bg": r({
     backgroundColor: "transparent",
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.bgSecondary,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.bg_secondary,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   custom: r({})

package/dist/components/controls/Input/styles.js

@@ -11,12 +11,12 @@ const { color: o, spacing: e } = i, a = r({
   }
 }), l = r({
   "&:hover": {
-    backgroundColor: o.fill.neutralPrimaryHover
+    backgroundColor: o.fill.neutral_primary_hover
   }
-}), g = {
+}), p = {
   "input-container": r({
-    backgroundColor: o.fill.accentSecondary,
-    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    backgroundColor: o.fill.accent_secondary,
+    border: `1px solid ${o.border.neutral_alpha_basic}`,
     padding: `${e.md} ${e.lg}`,
     borderRadius: 12,
     minHeight: 40,
@@ -26,9 +26,9 @@ const { color: o, spacing: e } = i, a = r({
       resize: "none"
     },
     "&:focus-within": {
-      borderColor: o.border.accentPrimary,
+      borderColor: o.border.accent_primary,
       "&:hover": {
-        borderColor: o.border.accentPrimary
+        borderColor: o.border.accent_primary
       }
     }
   }),
@@ -57,7 +57,7 @@ const { color: o, spacing: e } = i, a = r({
     padding: `14px ${e.lg} 14px ${e.lg}`
   }),
   error: r({
-    borderColor: o.border.negativePrimary
+    borderColor: o.border.negative_primary
   }),
   disabled: a,
   readOnly: n,
@@ -66,10 +66,10 @@ const { color: o, spacing: e } = i, a = r({
     height: "auto"
   }),
   primary: r({
-    background: o.fill.bgPrimary
+    background: o.fill.bg_primary
   }),
   secondary: r({
-    background: o.fill.bgSecondary
+    background: o.fill.bg_secondary
   }),
   "clear-button": r({
     cursor: "pointer",
@@ -81,5 +81,5 @@ const { color: o, spacing: e } = i, a = r({
   })
 };
 export {
-  g as styles
+  p as styles
 };

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.js

@@ -1,17 +1,17 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { $convertToMarkdownString as y } from "@lexical/markdown";
-import { AutoFocusPlugin as B } from "@lexical/react/LexicalAutoFocusPlugin";
-import { LexicalComposer as D } from "@lexical/react/LexicalComposer";
-import { HashtagPlugin as V } from "@lexical/react/LexicalHashtagPlugin";
-import { ListPlugin as j } from "@lexical/react/LexicalListPlugin";
+import { AutoFocusPlugin as D } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer as V } from "@lexical/react/LexicalComposer";
+import { HashtagPlugin as j } from "@lexical/react/LexicalHashtagPlugin";
+import { ListPlugin as B } from "@lexical/react/LexicalListPlugin";
 import { MarkdownShortcutPlugin as U } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { OnChangePlugin as W } from "@lexical/react/LexicalOnChangePlugin";
 import { TablePlugin as H } from "@lexical/react/LexicalTablePlugin";
 import { useState as u, useMemo as a, useCallback as p } from "react";
-import { getEditorConfig as K } from "./configs/editor.config.js";
-import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as q } from "./MarkdownTextEditor.const.js";
-import { MarkdownTextEditorLocaleProvider as z } from "./MarkdownTextEditor.locale.js";
+import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as K } from "./MarkdownTextEditor.const.js";
+import { MarkdownTextEditorLocaleProvider as q } from "./MarkdownTextEditor.locale.js";
 import { EDITOR_TRANSFORMERS as g } from "./transformers/index.js";
+import { getEditorConfig as z } from "./configs/editor.config.js";
 import { EditorStateContext as G } from "./contexts/EditorStateContext/EditorStateContext.js";
 import { ToolbarContext as J } from "./contexts/ToolbarContext/ToolbarContext.js";
 import { EditorToolbar as Q } from "./components/EditorToolbar/EditorToolbar.js";
@@ -24,38 +24,38 @@ import { Box as h } from "../../builders/Box/Box.js";
 import { theme as to } from "../../../utils/theme/index.js";
 import { Text as eo } from "../../builders/Text/Text.js";
 const { color: n, cornerRadius: w, spacing: e } = to;
-function No({
+function Ao({
   label: l,
   plugins: C,
   field: k,
   disabled: m = !1,
   locale: M,
-  toolbar: P,
-  defaultMarkdown: b,
+  toolbar: b,
+  defaultMarkdown: P,
   events: r = {},
   className: x,
-  labelClassName: S,
-  toolbarClassName: T,
-  editorClassName: E,
+  labelClassName: T,
+  toolbarClassName: E,
+  editorClassName: S,
   fieldClassName: R,
   previewClassName: v
 }) {
-  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => K(), []), L = a(
+  const [d, N] = u(""), [i, A] = u(!1), { availableActions: s, onImagesUpload: _ } = b || {}, O = a(() => z(), []), I = a(
     () => ({
       isEditable: !m,
       isPreviewMode: i,
-      setPreviewMode: N,
+      setPreviewMode: A,
       markdownText: d
     }),
     [m, i, d]
-  ), F = a(() => ({
-    availableActions: s || q
+  ), L = a(() => ({
+    availableActions: s || K
   }), [s]), f = p(
     (t) => {
-      A(t), r.onMarkdownChange && r.onMarkdownChange(t);
+      N(t), r.onMarkdownChange && r.onMarkdownChange(t);
     },
     [r]
-  ), _ = p(
+  ), F = p(
     (t) => {
       t.read(() => {
         const $ = y(g);
@@ -64,7 +64,7 @@ function No({
     },
     [f, r]
   );
-  return /* @__PURE__ */ o(z, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
+  return /* @__PURE__ */ o(q, { locale: M, children: /* @__PURE__ */ o(V, { initialConfig: O, children: /* @__PURE__ */ o(G.Provider, { value: I, children: /* @__PURE__ */ c(J.Provider, { value: L, children: [
     /* @__PURE__ */ c(
       h,
       {
@@ -73,7 +73,7 @@ function No({
         borderRadius: w.lg,
         p: e.lg,
         gap: e.sm,
-        backgroundColor: n.fill.neutralSecondary,
+        backgroundColor: n.fill.neutral_secondary,
         className: x,
         children: [
           l ? /* @__PURE__ */ o(
@@ -81,46 +81,46 @@ function No({
             {
               variant: "headline-3",
               fontWeight: "semibold",
-              className: S,
+              className: T,
               children: l
             }
           ) : null,
           /* @__PURE__ */ o(
             Q,
             {
-              onImagesUpload: O,
-              className: T
+              onImagesUpload: _,
+              className: E
             }
           ),
           /* @__PURE__ */ o(
             h,
             {
-              backgroundColor: n.fill.neutralPrimary,
-              border: `1px solid ${n.border.neutralAlphaBasic}`,
+              backgroundColor: n.fill.neutral_primary,
+              border: `1px solid ${n.border.neutral_alpha_basic}`,
               borderRadius: w.md,
               p: `${e.md} ${e.lg}`,
               w: "full",
               h: 144,
               overflow: "auto",
-              className: E,
+              className: S,
               children: i ? /* @__PURE__ */ o(X, { className: v }) : /* @__PURE__ */ o(Y, { ...k, className: R })
             }
           )
         ]
       }
     ),
+    /* @__PURE__ */ o(D, {}),
     /* @__PURE__ */ o(B, {}),
-    /* @__PURE__ */ o(j, {}),
     /* @__PURE__ */ o(H, {}),
-    /* @__PURE__ */ o(V, {}),
+    /* @__PURE__ */ o(j, {}),
     /* @__PURE__ */ o(U, { transformers: g }),
-    /* @__PURE__ */ o(W, { onChange: _ }),
+    /* @__PURE__ */ o(W, { onChange: F }),
     /* @__PURE__ */ o(Z, {}),
-    /* @__PURE__ */ o(oo, { defaultValue: b }),
+    /* @__PURE__ */ o(oo, { defaultValue: P }),
     /* @__PURE__ */ o(ro, {}),
     C
   ] }) }) }) });
 }
 export {
-  No as MarkdownTextEditor
+  Ao as MarkdownTextEditor
 };

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.js

@@ -1,15 +1,15 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import { cx as k } from "@emotion/css";
-import { useState as y, useCallback as h, useMemo as B, Fragment as I } from "react";
-import P from "../../../../../../assets/svg/markdown/dots-horizontal.svg.js";
-import { rowStyle as S, rowStyleInteractive as j } from "./ActionMenuButton.styles.js";
-import { IconButton as z } from "../../../../IconButton/IconButton.js";
+import { useState as y, useCallback as h, useMemo as I, Fragment as P } from "react";
+import S from "../../../../../../assets/svg/markdown/dots-horizontal.svg.js";
+import { rowStyle as j, rowStyleInteractive as B } from "./ActionMenuButton.styles.js";
+import { IconButton as b } from "../../../../IconButton/IconButton.js";
 import { Box as c } from "../../../../../builders/Box/Box.js";
-import { theme as A } from "../../../../../../utils/theme/index.js";
+import { theme as z } from "../../../../../../utils/theme/index.js";
 import { Text as O } from "../../../../../builders/Text/Text.js";
 import { Popover as T } from "../../../../../shared/Popover/Popover.js";
-const { color: x, spacing: v } = A;
-function K({
+const { color: x, spacing: v } = z;
+function J({
   groups: n,
   toolbarVisibleActionsCount: m,
   onAction: s,
@@ -24,7 +24,7 @@ function K({
     ({ IconComponent: t, ...o }, l) => /* @__PURE__ */ u(
       c,
       {
-        className: k(S, !r && j),
+        className: k(j, !r && B),
         p: v.sm,
         alignItems: "center",
         flex: !0,
@@ -46,7 +46,7 @@ function K({
       o.id
     ),
     [r, s, p]
-  ), g = B(() => n.map((t, o) => {
+  ), g = I(() => n.map((t, o) => {
     const l = o === n.length - 1;
     if (!t.length)
       return null;
@@ -54,14 +54,14 @@ function K({
       const M = (o ? n.slice(0, o).flat().length : 0) + d + m;
       return f(i, M);
     });
-    return /* @__PURE__ */ u(I, { children: [
+    return /* @__PURE__ */ u(P, { children: [
       C,
       l ? null : /* @__PURE__ */ e(
         c,
         {
           w: "full",
           h: 1,
-          backgroundColor: x.border.neutralAlphaBasic
+          backgroundColor: x.border.neutral_alpha_basic
         }
       )
     ] }, t.flatMap((i) => i.id).join("-"));
@@ -73,10 +73,10 @@ function K({
       placement: "bottom",
       open: w,
       onChange: a,
-      children: /* @__PURE__ */ e(z, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(P, {}) })
+      children: /* @__PURE__ */ e(b, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(S, {}) })
     }
   );
 }
 export {
-  K as ActionMenuButton
+  J as ActionMenuButton
 };

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.styles.js

@@ -4,10 +4,10 @@ const { color: o } = t, l = r({
   cursor: "pointer"
 }), n = r({
   ":hover": {
-    backgroundColor: o.fill.bgSecondary
+    backgroundColor: o.fill.bg_secondary
   },
   ":active": {
-    backgroundColor: o.fill.bgSecondary
+    backgroundColor: o.fill.bg_secondary
   }
 });
 export {

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.js

@@ -2,21 +2,21 @@ import { jsx as o, jsxs as w } from "react/jsx-runtime";
 import { INSERT_ORDERED_LIST_COMMAND as ie, INSERT_UNORDERED_LIST_COMMAND as se } from "@lexical/list";
 import { useLexicalComposerContext as ce } from "@lexical/react/LexicalComposerContext";
 import { INSERT_TABLE_COMMAND as le } from "@lexical/table";
-import { $getSelection as ae, $isRangeSelection as ue, $createTextNode as de, $insertNodes as me, FORMAT_ELEMENT_COMMAND as D, FORMAT_TEXT_COMMAND as x } from "lexical";
+import { $getSelection as ae, $isRangeSelection as ue, $createTextNode as de, $insertNodes as me, FORMAT_ELEMENT_COMMAND as P, FORMAT_TEXT_COMMAND as x } from "lexical";
 import pe from "lodash.debounce";
-import { useState as P, useRef as V, useMemo as p, useCallback as b, Fragment as fe, useEffect as he } from "react";
+import { useState as B, useRef as V, useMemo as p, useCallback as b, Fragment as fe, useEffect as he } from "react";
 import be from "../../../../../assets/svg/markdown/eye.svg.js";
 import { useMarkdownTextEditorLocale as ve } from "../../MarkdownTextEditor.locale.js";
 import { previewStyles as Ce } from "./EditorToolbar.styles.js";
 import { defaultOnImagesUpload as ge } from "./EditorToolbar.utils.js";
 import { TextSizeSelect as Ee } from "./TextSizeSelect/TextSizeSelect.js";
 import { useToolbarActions as Te } from "../../hooks/useToolbarActions/useToolbarActions.js";
-import { createCustomLinkNode as Ae } from "../../nodes/CustomLinkNode/CustomLinkNode.utils.js";
-import { createImageRowNode as Le } from "../../nodes/ImageRowNode/ImageRowNode.utils.js";
+import { createCustomLinkNode as Le } from "../../nodes/CustomLinkNode/CustomLinkNode.utils.js";
+import { createImageRowNode as Ne } from "../../nodes/ImageRowNode/ImageRowNode.utils.js";
 import { MarkdownToolbarAction as c } from "../../hooks/useToolbarActions/useToolbarActions.const.js";
 import { LinkPopoverContent as q } from "./LinkPopoverContent/LinkPopoverContent.js";
 import { TablePopoverContent as X } from "./TablePopoverContent/TablePopoverContent.js";
-import { ActionMenuButton as Ne } from "./ActionMenuButton/ActionMenuButton.js";
+import { ActionMenuButton as Ae } from "./ActionMenuButton/ActionMenuButton.js";
 import { useEditorStates as Me } from "../../contexts/EditorStateContext/EditorStateContext.hook.js";
 import { Popover as I } from "../../../../shared/Popover/Popover.js";
 import { IconButton as W } from "../../../IconButton/IconButton.js";
@@ -28,12 +28,12 @@ function eo({
   onImagesUpload: U = ge,
   className: J
 }) {
-  const [d, Q] = P(11), [v, T] = P(null), [C, A] = P(
+  const [d, Q] = B(11), [v, T] = B(null), [C, L] = B(
     null
-  ), L = V(null), { toolbar: Y } = ve(), S = Y.preview, [r] = ce(), { isEditable: F, isPreviewMode: f, setPreviewMode: Z } = Me(), { availableActionGroups: N } = Te(), k = V(null), m = p(() => !F || f, [F, f]), ee = p(() => f ? S.hide : S.show, [f, S]), { toolbarGroups: y, menuGroups: $ } = p(() => {
+  ), N = V(null), { toolbar: Y } = ve(), _ = Y.preview, [r] = ce(), { isEditable: F, isPreviewMode: f, setPreviewMode: Z } = Me(), { availableActionGroups: A } = Te(), S = V(null), m = p(() => !F || f, [F, f]), ee = p(() => f ? _.hide : _.show, [f, _]), { toolbarGroups: k, menuGroups: $ } = p(() => {
     const e = [], t = [];
     let s = 0;
-    for (const i of N) {
+    for (const i of A) {
       const l = [], n = [];
       for (const a of i)
         s += 1, s <= d ? l.push(a) : n.push(a);
@@ -43,13 +43,13 @@ function eo({
       toolbarGroups: e,
       menuGroups: t
     };
-  }, [N, d]), oe = p(() => typeof v == "number" && v > d - 1, [v, d]), te = p(() => typeof C == "number" && C > d - 1, [C, d]), G = b(
+  }, [A, d]), oe = p(() => typeof v == "number" && v > d - 1, [v, d]), te = p(() => typeof C == "number" && C > d - 1, [C, d]), y = b(
     (e) => {
       const { text: t, url: s } = e;
       r.update(() => {
         const i = ae();
         if (ue(i)) {
-          const l = Ae({
+          const l = Le({
             text: t,
             url: s
           });
@@ -60,17 +60,17 @@ function eo({
       }), T(null);
     },
     [r]
-  ), _ = b(
+  ), G = b(
     (e) => {
       const { rows: t, columns: s } = e;
       r.dispatchCommand(le, {
         rows: t,
         columns: s
-      }), A(null);
+      }), L(null);
     },
     [r]
   ), j = b(() => {
-    k.current && k.current.click();
+    S.current && S.current.click();
   }, []), ne = b(
     async (e) => {
       try {
@@ -79,7 +79,7 @@ function eo({
           return;
         const s = await U(t);
         r.update(() => {
-          const i = Le(s);
+          const i = Ne(s);
           i && me([i]);
         });
       } catch (t) {
@@ -105,13 +105,13 @@ function eo({
           r.dispatchCommand(x, "strikethrough");
         },
         [c.ALIGN_LEFT]: () => {
-          r.dispatchCommand(D, "left");
+          r.dispatchCommand(P, "left");
         },
         [c.ALIGN_CENTER]: () => {
-          r.dispatchCommand(D, "center");
+          r.dispatchCommand(P, "center");
         },
         [c.ALIGN_RIGHT]: () => {
-          r.dispatchCommand(D, "right");
+          r.dispatchCommand(P, "right");
         },
         [c.LINK]: () => {
           T(t);
@@ -120,7 +120,7 @@ function eo({
           j();
         },
         [c.TABLE]: () => {
-          A(t);
+          L(t);
         },
         [c.BULLET_LIST]: () => {
           r.dispatchCommand(se, void 0);
@@ -131,8 +131,8 @@ function eo({
       })[e]();
     },
     [j, r]
-  ), re = p(() => y.map((e, t) => {
-    const s = y.slice(0, t).reduce((n, a) => n + a.length, 0);
+  ), re = p(() => k.map((e, t) => {
+    const s = k.slice(0, t).reduce((n, a) => n + a.length, 0);
     if (!e.length)
       return null;
     const i = e.map(
@@ -141,11 +141,11 @@ function eo({
         return u === c.LINK ? /* @__PURE__ */ o(
           I,
           {
-            content: /* @__PURE__ */ o(q, { onSave: G }),
+            content: /* @__PURE__ */ o(q, { onSave: y }),
             placement: "bottom",
             open: v === h,
-            onChange: (B) => {
-              T(B ? h : null);
+            onChange: (D) => {
+              T(D ? h : null);
             },
             children: /* @__PURE__ */ o(W, { size: "xs", color: "no-bg", disabled: m, children: /* @__PURE__ */ o(n, {}) })
           },
@@ -153,11 +153,11 @@ function eo({
         ) : u === c.TABLE ? /* @__PURE__ */ o(
           I,
           {
-            content: /* @__PURE__ */ o(X, { onSave: _ }),
+            content: /* @__PURE__ */ o(X, { onSave: G }),
             placement: "bottom",
             open: C === h,
-            onChange: (B) => {
-              A(B ? h : null);
+            onChange: (D) => {
+              L(D ? h : null);
             },
             children: /* @__PURE__ */ o(
               W,
@@ -190,25 +190,25 @@ function eo({
         {
           w: 1,
           h: 32,
-          backgroundColor: E.border.neutralAlphaBasic
+          backgroundColor: E.border.neutral_alpha_basic
         }
       )
     ] }, e.flatMap((n) => n.id).join("-"));
   }), [
-    y,
+    k,
     O,
     v,
     m,
     C,
-    G,
-    _
+    y,
+    G
   ]), H = b(() => {
-    const e = L.current;
+    const e = N.current;
     if (!e)
       return;
     const t = e.clientWidth, s = 40, i = 4, l = 1, n = i + l + i + s + i;
     let a = t - n, u = 0;
-    for (const M of N)
+    for (const M of A)
       if (M.length) {
         for (const h of M) {
           const g = s + i;
@@ -220,19 +220,19 @@ function eo({
         a -= l + i;
       }
     Q(u);
-  }, [N]), K = p(() => pe(H, 20, {}), [H]);
+  }, [A]), K = p(() => pe(H, 20, {}), [H]);
   return he(() => {
-    if (!L.current)
+    if (!N.current)
       return;
     const e = new ResizeObserver(() => {
       K();
     });
-    return e.observe(L.current), () => e.disconnect();
+    return e.observe(N.current), () => e.disconnect();
   }, [K]), /* @__PURE__ */ w(
     R,
     {
-      backgroundColor: E.fill.neutralPrimary,
-      border: `1px solid ${E.border.neutralAlphaBasic}`,
+      backgroundColor: E.fill.neutral_primary,
+      border: `1px solid ${E.border.neutral_alpha_basic}`,
       borderRadius: Ie.md,
       flex: !0,
       row: !0,
@@ -245,7 +245,7 @@ function eo({
           /* @__PURE__ */ o(
             "input",
             {
-              ref: k,
+              ref: S,
               type: "file",
               accept: "image/*",
               hidden: !0,
@@ -258,7 +258,7 @@ function eo({
           /* @__PURE__ */ o(
             I,
             {
-              content: /* @__PURE__ */ o(q, { onSave: G }),
+              content: /* @__PURE__ */ o(q, { onSave: y }),
               placement: "bottom",
               open: oe,
               onChange: (e) => {
@@ -270,11 +270,11 @@ function eo({
           /* @__PURE__ */ o(
             I,
             {
-              content: /* @__PURE__ */ o(X, { onSave: _ }),
+              content: /* @__PURE__ */ o(X, { onSave: G }),
               placement: "bottom",
               open: te,
               onChange: (e) => {
-                e || A(null);
+                e || L(null);
               },
               children: /* @__PURE__ */ o("div", {})
             }
@@ -289,11 +289,11 @@ function eo({
               w: "full",
               ml: z.xs,
               overflow: "hidden",
-              ref: L,
+              ref: N,
               children: [
                 re,
                 $.length ? /* @__PURE__ */ o(
-                  Ne,
+                  Ae,
                   {
                     disabled: m,
                     onAction: O,