@dss-kit/ui-kit 0.3.10 → 1.0.0

package/dist/components/shared/Avatar/Avatar.js

@@ -5,32 +5,32 @@ import { theme as b } from "../../../utils/theme/index.js";
 import { Box as h } from "../../builders/Box/Box.js";
 const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
   primary: {
-    bg: i.fill.accentTint,
+    bg: i.fill.accent_tint,
     text: i.text.accent,
     icon: i.icon.accent
   },
   secondary: {
-    bg: i.fill.neutralTint,
+    bg: i.fill.neutral_tint,
     text: i.text.secondary,
     icon: i.icon.tertiary
   },
   negative: {
-    bg: i.fill.negativeTint,
+    bg: i.fill.negative_tint,
     text: i.text.negative,
     icon: i.icon.negative
   },
   positive: {
-    bg: i.fill.positiveTint,
+    bg: i.fill.positive_tint,
     text: i.text.positive,
     icon: i.icon.positive
   },
   warning: {
-    bg: i.fill.warningTint,
+    bg: i.fill.warning_tint,
     text: i.text.warning,
     icon: i.icon.warning
   },
   neutral: {
-    bg: i.fill.neutralTint,
+    bg: i.fill.neutral_tint,
     text: i.text.tertiary,
     icon: i.icon.tertiary
   },
@@ -40,7 +40,7 @@ const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
     icon: "var(--icon-transfer)"
   },
   custom: {
-    bg: i.fill.accentTint,
+    bg: i.fill.accent_tint,
     text: i.text.accent,
     icon: i.icon.accent
   }
@@ -126,7 +126,7 @@ const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
       },
       "&:has(img)": {
         backgroundColor: "transparent",
-        border: `1px solid ${i.border.neutralAlphaLow}`
+        border: `1px solid ${i.border.neutral_alpha_low}`
       }
     }), [n, e, c]);
     return /* @__PURE__ */ v(

package/dist/components/shared/Badge/Badge.js

@@ -1,38 +1,38 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { jsxs as B, jsx as n } from "react/jsx-runtime";
 import { cx as y, css as x } from "@emotion/css";
-import B from "../../../assets/svg/shared/close-outline.svg.js";
-import { Box as L } from "../../builders/Box/Box.js";
-import { theme as $ } from "../../../utils/theme/index.js";
-import { Ripple as j } from "../../builders/Ripple/Ripple.js";
+import $ from "../../../assets/svg/shared/close-outline.svg.js";
+import { Box as j } from "../../builders/Box/Box.js";
+import { theme as R } from "../../../utils/theme/index.js";
+import { Ripple as S } from "../../builders/Ripple/Ripple.js";
 import { Text as h } from "../../builders/Text/Text.js";
-const { color: e, cornerRadius: l, spacing: a } = $, b = {
+const { color: e, cornerRadius: i, spacing: a } = R, b = {
   neutral: {
-    border: e.border.neutralAlphaLow,
-    bg: e.status.neutralTint,
+    border: e.border.neutral_alpha_low,
+    bg: e.status.neutral_tint,
     color: e.text.secondary,
     colorName: "secondary"
   },
   accent: {
-    border: e.border.accentSecondary,
-    bg: e.status.accentTintLow,
+    border: e.border.accent_secondary,
+    bg: e.status.accent_tint_low,
     color: e.text.accent,
     colorName: "accent"
   },
   warning: {
-    border: e.border.warningSecondary,
-    bg: e.status.warningTintLow,
+    border: e.border.warning_secondary,
+    bg: e.status.warning_tint_low,
     color: e.text.warning,
     colorName: "warning"
   },
   positive: {
-    border: e.border.positiveSecondary,
-    bg: e.status.positiveTintLow,
+    border: e.border.positive_secondary,
+    bg: e.status.positive_tint_low,
     color: e.text.positive,
     colorName: "positive"
   },
   negative: {
-    border: e.border.negativeSecondary,
-    bg: e.status.negativeTintLow,
+    border: e.border.negative_secondary,
+    bg: e.status.negative_tint_low,
     color: e.text.negative,
     colorName: "negative"
   },
@@ -46,35 +46,35 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
   xs: {
     h: 18,
     text: "caption-2",
-    corner: l.xs,
+    corner: i.xs,
     p: `3px ${a.xs}`,
     gap: "2px"
   },
   sm: {
     h: 24,
     text: "caption-1",
-    corner: l.xs,
+    corner: i.xs,
     p: `6px ${a.sm}`,
     gap: a.sm
   },
   md: {
     h: 32,
     text: "body-2",
-    corner: l.sm,
+    corner: i.sm,
     p: `6px ${a.md}`,
     gap: a.sm
   },
   lg: {
     h: 40,
     text: "body-2",
-    corner: l.md,
+    corner: i.md,
     p: `6px ${a.lg}`,
     gap: a.sm
   }
-}, R = (d, s, o, m) => {
+}, I = (d, s, o, m) => {
   const t = b[s];
   let r = t.bg, c = "none";
-  const i = t.color;
+  const l = t.color;
   switch (d) {
     case "outline":
       r = "transparent", c = `1px solid ${t.border}`;
@@ -93,10 +93,10 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
     position: "relative",
     transition: "background-color 0.2s, opacity 0.2s",
     backgroundColor: r,
-    color: i,
+    color: l,
     border: c
   });
-}, I = x({
+}, O = x({
   display: "inline-flex",
   cursor: "pointer",
   opacity: 0.6,
@@ -105,7 +105,7 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
   display: "inline-flex",
   alignItems: "center",
   color: "inherit"
-}), O = ({
+}), T = ({
   label: d,
   color: s = "neutral",
   size: o = "md",
@@ -113,30 +113,30 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
   width: t,
   textAlign: r = "center",
   leftElement: c,
-  rightElement: i,
+  rightElement: l,
   disabled: u,
   onClick: g,
   onDelete: f,
   className: N,
-  labelClassName: C,
-  deleteButtonClassName: S
+  labelClassName: _,
+  deleteButtonClassName: C
 }) => {
-  const T = R(m, s, u, g);
-  return /* @__PURE__ */ k(
-    L,
+  const k = I(m, s, u, g);
+  return /* @__PURE__ */ B(
+    j,
     {
       row: !0,
       alignItems: "center",
       justifyContent: "center",
       p: p[o].p,
-      h: p[o].h,
+      minHeight: p[o].h,
       w: t,
       overflow: "hidden",
       borderRadius: p[o].corner,
       onClick: g,
-      className: y(T, N),
+      className: y(k, N),
       children: [
-        g && /* @__PURE__ */ n(j, {}),
+        g && /* @__PURE__ */ n(S, {}),
         c && /* @__PURE__ */ n("span", { className: w, children: c }),
         /* @__PURE__ */ n(
           h,
@@ -148,27 +148,27 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
             center: r === "center",
             right: r === "right",
             flex: t ? 1 : void 0,
-            className: C,
+            className: _,
             children: d
           }
         ),
-        i && /* @__PURE__ */ n("span", { className: w, children: i }),
+        l && /* @__PURE__ */ n("span", { className: w, children: l }),
         f && !u && /* @__PURE__ */ n(
           h,
           {
-            className: y(I, S),
+            className: y(O, C),
             colorName: b[s].colorName,
             onClick: (v) => {
               v.stopPropagation(), f(v);
             },
-            children: /* @__PURE__ */ n(B, {})
+            children: /* @__PURE__ */ n($, {})
           }
         )
       ]
     }
   );
 };
-O.displayName = "Badge";
+T.displayName = "Badge";
 export {
-  O as Badge
+  T as Badge
 };

package/dist/components/shared/Hint/styles.js

@@ -65,27 +65,27 @@ const { color: t, cornerRadius: o, spacing: n } = i, s = {
   },
   soft: {
     warning: e({
-      background: t.status.warningTintLow,
+      background: t.status.warning_tint_low,
       color: t.text.warning
     }),
     negative: e({
-      background: t.status.negativeTintLow,
+      background: t.status.negative_tint_low,
       color: t.text.negative
     }),
     positive: e({
-      background: t.status.positiveTintLow,
+      background: t.status.positive_tint_low,
       color: t.text.positive
     }),
     accent: e({
-      background: t.status.accentTintLow,
+      background: t.status.accent_tint_low,
       color: t.text.accent
     }),
     neutral: e({
-      background: t.status.neutralTintLow,
+      background: t.status.neutral_tint_low,
       color: t.text.tertiary
     }),
     transfer: e({
-      background: t.status.transferTintLow,
+      background: t.status.transfer_tint_low,
       color: t.text.transfer
     })
   }

package/dist/components/shared/MarkdownText/MarkdownText.js

@@ -6,11 +6,11 @@ import { ContentEditable as f } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary as c } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin as p } from "@lexical/react/LexicalRichTextPlugin";
 import { useMemo as s } from "react";
-import { getEditorConfig as u } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
-import { EDITOR_TRANSFORMERS as x } from "../../controls/MarkdownTextEditor/transformers/index.js";
-import { markdownTextStyle as w } from "./MarkdownText.styles.js";
-import { Text as E } from "../../builders/Text/Text.js";
-import { EditorStateContext as k } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
+import { EDITOR_TRANSFORMERS as u } from "../../controls/MarkdownTextEditor/transformers/index.js";
+import { markdownTextStyle as x } from "./MarkdownText.styles.js";
+import { Text as w } from "../../builders/Text/Text.js";
+import { EditorStateContext as E } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
+import { getEditorConfig as k } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
 function F({
   markdown: t,
   className: i,
@@ -27,15 +27,15 @@ function F({
     }),
     [r]
   );
-  return r ? /* @__PURE__ */ o(k.Provider, { value: a, children: /* @__PURE__ */ o(
+  return r ? /* @__PURE__ */ o(E.Provider, { value: a, children: /* @__PURE__ */ o(
     d,
     {
       initialConfig: {
-        ...u(),
+        ...k(),
         editable: !1,
         namespace: "ui-kit-markdown-text-viewer",
         editorState: () => {
-          l(r, x);
+          l(r, u);
         }
       },
       children: /* @__PURE__ */ o(
@@ -44,7 +44,7 @@ function F({
           contentEditable: /* @__PURE__ */ o(
             f,
             {
-              className: m(w, i),
+              className: m(x, i),
               "aria-placeholder": "markdown text",
               placeholder: () => null
             }
@@ -56,7 +56,7 @@ function F({
     },
     r
   ) }) : typeof e == "string" ? /* @__PURE__ */ o(
-    E,
+    w,
     {
       variant: "body-2",
       colorName: "tertiary",

package/dist/components/shared/MarkdownText/MarkdownText.styles.js

@@ -58,7 +58,7 @@ const { color: o, cornerRadius: n, spacing: t } = l, h = i({
   code: {
     padding: `0 ${t.xs}`,
     borderRadius: n.xs,
-    backgroundColor: o.fill.neutralSecondary,
+    backgroundColor: o.fill.neutral_secondary,
     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
   },
   "pre code": {
@@ -69,7 +69,7 @@ const { color: o, cornerRadius: n, spacing: t } = l, h = i({
   blockquote: {
     marginLeft: 0,
     paddingLeft: t.md,
-    borderLeft: `3px solid ${o.border.neutralAlphaBasic}`,
+    borderLeft: `3px solid ${o.border.neutral_alpha_basic}`,
     color: o.text.secondary
   },
   table: {
@@ -77,12 +77,12 @@ const { color: o, cornerRadius: n, spacing: t } = l, h = i({
     borderCollapse: "collapse"
   },
   "th, td": {
-    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    border: `1px solid ${o.border.neutral_alpha_basic}`,
     padding: t.sm,
     textAlign: "left"
   },
   th: {
-    backgroundColor: o.fill.neutralSecondary
+    backgroundColor: o.fill.neutral_secondary
   }
 });
 export {

package/dist/components/shared/Popover/PopoverContent/PopoverContent.js

@@ -11,7 +11,7 @@ const { color: o, cornerRadius: p } = i, f = m`
   }
 `, d = c({
   animation: `${f} 0.2s ease-out`,
-  boxShadow: `0 4px 20px 0 ${o.effect.shadowS}`
+  boxShadow: `0 4px 20px 0 ${o.effect.shadow_s}`
 }), b = ({
   children: r,
   className: t,
@@ -20,7 +20,7 @@ const { color: o, cornerRadius: p } = i, f = m`
   n,
   {
     relative: !0,
-    backgroundColor: o.fill.bgPrimary,
+    backgroundColor: o.fill.bg_primary,
     borderRadius: p.md,
     className: a(d, t),
     ...e,

package/dist/components/shared/Skeleton/Skeleton.js

@@ -8,7 +8,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
   md: { width: 32, height: 32 },
   lg: { width: 40, height: 40 },
   xl: { width: 48, height: 48 }
-}, T = {
+}, z = {
   zero: e.zero,
   xs: e.xs,
   sm: e.sm,
@@ -23,7 +23,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
   "full-round": e.fullRound,
   circular: "50%"
 }, w = t({
-  backgroundColor: A.status.neutralTint,
+  backgroundColor: A.status.neutral_tint,
   borderRadius: e.sm,
   position: "relative",
   overflow: "hidden",
@@ -37,7 +37,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
     background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)",
     transform: "translateX(-100%)"
   }
-}), z = t({
+}), M = t({
   animation: "skeleton-pulse 1.5s ease-in-out infinite",
   "@keyframes skeleton-pulse": {
     "0%": {
@@ -50,7 +50,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
       opacity: 1
     }
   }
-}), M = t({
+}), N = t({
   "&::before": {
     animation: "skeleton-wave 1.6s linear infinite"
   },
@@ -68,7 +68,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
 }), b = (r, n) => {
   if (n !== void 0)
     return t({
-      borderRadius: T[n]
+      borderRadius: z[n]
     });
   switch (r) {
     case "circular":
@@ -87,13 +87,13 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
 }, y = (r) => {
   switch (r) {
     case "pulse":
-      return z;
-    case "wave":
       return M;
+    case "wave":
+      return N;
     default:
       return "";
   }
-}, N = ({
+}, T = ({
   width: r,
   height: n,
   variant: s = "rectangular",
@@ -111,7 +111,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
   if (!d)
     return null;
   const h = r || k[i].width, g = n || k[i].height;
-  return s === "text" && a > 1 ? /* @__PURE__ */ o(l, { gap: X.sm, className: u, children: Array.from({ length: a }, (j, p) => /* @__PURE__ */ o(
+  return s === "text" && a > 1 ? /* @__PURE__ */ o(l, { gap: X.sm, className: u, children: Array.from({ length: a }, (_, p) => /* @__PURE__ */ o(
     l,
     {
       className: x(
@@ -138,7 +138,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
     }
   );
 };
-N.displayName = "Skeleton";
+T.displayName = "Skeleton";
 export {
-  N as Skeleton
+  T as Skeleton
 };

package/dist/components/shared/Tag/Tag.js

@@ -1,4 +1,4 @@
-import { jsxs as $, jsx as o } from "react/jsx-runtime";
+import { jsxs as T, jsx as o } from "react/jsx-runtime";
 import { css as x, cx as w } from "@emotion/css";
 import { forwardRef as j, useRef as k, useMemo as B } from "react";
 import M from "../../../assets/svg/shared/close-outline.svg.js";
@@ -35,34 +35,34 @@ const { color: t, cornerRadius: I, spacing: e } = O, u = {
     className: v,
     labelClassName: y,
     avatarClassName: b,
-    iconClassName: T,
+    iconClassName: _,
     deleteButtonClassName: N
   }, a) => {
     const R = k(null), p = B(() => {
       switch (s) {
         case "primary":
           return {
-            bg: t.status.neutralTintLow,
+            bg: t.status.neutral_tint_low,
             color: t.text.primary
           };
         case "accent":
           return {
-            bg: t.status.accentTintLow,
+            bg: t.status.accent_tint_low,
             color: t.text.accent
           };
         case "warning":
           return {
-            bg: t.status.warningTintLow,
+            bg: t.status.warning_tint_low,
             color: t.text.warning
           };
         case "positive":
           return {
-            bg: t.status.positiveTintLow,
+            bg: t.status.positive_tint_low,
             color: t.text.positive
           };
         case "negative":
           return {
-            bg: t.status.negativeTintLow,
+            bg: t.status.negative_tint_low,
             color: t.text.negative
           };
         case "transfer":
@@ -72,11 +72,11 @@ const { color: t, cornerRadius: I, spacing: e } = O, u = {
           };
         default:
           return {
-            bg: t.status.neutralTintLow,
+            bg: t.status.neutral_tint_low,
             color: t.text.primary
           };
       }
-    }, [s]), L = x({
+    }, [s]), C = x({
       cursor: n ? "not-allowed" : l ? "pointer" : "default",
       opacity: n ? 0.5 : 1,
       userSelect: "none",
@@ -85,13 +85,13 @@ const { color: t, cornerRadius: I, spacing: e } = O, u = {
       "&:hover": n ? void 0 : {
         backgroundColor: p.bg
       }
-    }), C = x({
+    }), $ = x({
       display: "inline-flex",
       cursor: "pointer",
       opacity: 0.6,
       "&:hover": { opacity: 1 }
     });
-    return /* @__PURE__ */ $(
+    return /* @__PURE__ */ T(
       m,
       {
         ref: (r) => {
@@ -108,7 +108,7 @@ const { color: t, cornerRadius: I, spacing: e } = O, u = {
         backgroundColor: p.bg,
         color: p.color,
         onClick: l,
-        className: w(L, v),
+        className: w(C, v),
         children: [
           l && /* @__PURE__ */ o(S, {}),
           f && /* @__PURE__ */ o(
@@ -122,7 +122,7 @@ const { color: t, cornerRadius: I, spacing: e } = O, u = {
               children: f
             }
           ),
-          d && /* @__PURE__ */ o(m, { className: T, children: d }),
+          d && /* @__PURE__ */ o(m, { className: _, children: d }),
           typeof i == "string" ? /* @__PURE__ */ o(
             h,
             {
@@ -137,7 +137,7 @@ const { color: t, cornerRadius: I, spacing: e } = O, u = {
           g && !n && /* @__PURE__ */ o(
             h,
             {
-              className: w(C, N),
+              className: w($, N),
               colorName: s,
               onClick: (r) => {
                 r.stopPropagation(), g(r);