@dss-kit/ui-kit 0.3.10 → 1.0.0

package/dist/components/builders/Table/TablePagination/TablePagination.js

@@ -1,17 +1,17 @@
 import { jsxs as v, jsx as e } from "react/jsx-runtime";
 import { css as R, cx as G } from "@emotion/css";
-import { useRef as J, useState as K, useEffect as Q } from "react";
+import { useRef as H, useState as J, useEffect as K } from "react";
 import z from "../../../../assets/svg/table/chevron-left.svg.js";
-import B from "../../../../assets/svg/table/chevron-right.svg.js";
-import U from "../../../../assets/svg/table/dots.svg.js";
-import { getPageNumbers as X } from "./TablePagination.utils.js";
-import { Button as M } from "../../../controls/Button/Button.js";
-import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
+import M from "../../../../assets/svg/table/chevron-right.svg.js";
+import Q from "../../../../assets/svg/table/dots.svg.js";
+import { getPageNumbers as U } from "./TablePagination.utils.js";
+import { Button as _ } from "../../../controls/Button/Button.js";
+import { IconButton as B } from "../../../controls/IconButton/IconButton.js";
 import { Box as r } from "../../Box/Box.js";
-import { Select as Y } from "../../../controls/Select/Select.js";
-import { theme as Z } from "../../../../utils/theme/index.js";
-import { Text as _ } from "../../Text/Text.js";
-const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
+import { Select as X } from "../../../controls/Select/Select.js";
+import { theme as Y } from "../../../../utils/theme/index.js";
+import { Text as Z } from "../../Text/Text.js";
+const { color: i, cornerRadius: tt, spacing: b } = Y, bt = ({
   pageIndex: o,
   pageSize: n,
   totalCount: a,
@@ -21,20 +21,20 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
   labels: d,
   pageSizeOptions: m = [10, 20, 50, 100],
   showPageSizeSelector: h = !0,
-  renderPageSizeSelectorDropdownItem: T = (u) => u.label,
-  renderPageSizeSelectorInputItem: V,
-  className: D,
+  renderPageSizeSelectorDropdownItem: L = (u) => u.label,
+  renderPageSizeSelectorInputItem: T,
+  className: V,
   itemClassName: x,
-  activeItemClassName: S,
-  pageSizeSelectorClassName: I
+  activeItemClassName: w,
+  pageSizeSelectorClassName: D
 }) => {
-  const { prev: u = "Previous", next: O = "Next" } = d ?? {}, w = J(null), [$, A] = K(0), y = Math.ceil(a / n), f = o > 0, g = o < y - 1;
-  Q(() => {
-    const t = w.current;
+  const { prev: u = "Previous", next: I = "Next" } = d ?? {}, S = H(null), [O, $] = J(0), y = Math.ceil(a / n), f = o > 0, g = o < y - 1;
+  K(() => {
+    const t = S.current;
     if (!t) return;
     const p = new ResizeObserver((W) => {
       for (const C of W)
-        A(C.contentRect.width);
+        $(C.contentRect.width);
     });
     return p.observe(t), () => {
       p.disconnect();
@@ -48,7 +48,7 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
       return 1;
     const F = Math.floor((k + 8) / 48);
     return Math.max(1, Math.min(10, F));
-  })($), H = X({
+  })(O), q = U({
     page: o + 1,
     count: y,
     maxVisiblePages: E
@@ -56,7 +56,7 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
     f && s(o - 1);
   }, P = () => {
     g && s(o + 1);
-  }, q = (t) => {
+  }, A = (t) => {
     c(Number(t));
   };
   return a === 0 ? null : /* @__PURE__ */ v(r, { flex: 1, row: !0, justifyContent: "space-between", children: [
@@ -67,10 +67,10 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
         row: !0,
         gap: b.sm,
         alignItems: "center",
-        className: D,
+        className: V,
         children: [
           /* @__PURE__ */ e(
-            M,
+            _,
             {
               width: "auto",
               size: "sm",
@@ -82,23 +82,23 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
             }
           ),
           /* @__PURE__ */ e(
-            L,
+            j,
             {
               className: x,
-              activeClassName: S,
+              activeClassName: w,
               children: o + 1
             }
           ),
           /* @__PURE__ */ e(
-            M,
+            _,
             {
               width: "auto",
               size: "sm",
               color: "neutral",
-              iconRight: /* @__PURE__ */ e(B, { width: 20, height: 20 }),
+              iconRight: /* @__PURE__ */ e(M, { width: 20, height: 20 }),
               disabled: !g,
               onClick: P,
-              children: O
+              children: I
             }
           )
         ]
@@ -106,14 +106,14 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
     ) : /* @__PURE__ */ v(
       r,
       {
-        ref: w,
+        ref: S,
         flex: 1,
         row: !0,
         overflow: "hidden",
         gap: b.sm,
         children: [
           /* @__PURE__ */ e(
-            j,
+            B,
             {
               onClick: N,
               disabled: !f,
@@ -122,34 +122,34 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
               children: /* @__PURE__ */ e(z, {})
             }
           ),
-          /* @__PURE__ */ e(r, { row: !0, gap: b.sm, children: H.map((t) => /* @__PURE__ */ e(
-            L,
+          /* @__PURE__ */ e(r, { row: !0, gap: b.sm, children: q.map((t) => /* @__PURE__ */ e(
+            j,
             {
               isDots: t === "start-dots" || t === "end-dots",
               isCurrentPage: t === o + 1,
               disabled: t === "start-dots" || t === "end-dots",
               onClick: () => s(t - 1),
               className: x,
-              activeClassName: S,
+              activeClassName: w,
               children: t
             },
             t
           )) }),
           /* @__PURE__ */ e(
-            j,
+            B,
             {
               color: "neutral",
               size: "sm",
               onClick: P,
               disabled: !g,
-              children: /* @__PURE__ */ e(B, {})
+              children: /* @__PURE__ */ e(M, {})
             }
           )
         ]
       }
     ),
-    h && /* @__PURE__ */ e(r, { alignItems: "flex-end", className: I, children: /* @__PURE__ */ e(
-      Y,
+    h && /* @__PURE__ */ e(r, { alignItems: "flex-end", className: D, children: /* @__PURE__ */ e(
+      X,
       {
         width: "fit-content",
         value: n.toString(),
@@ -159,13 +159,13 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
           label: t.toString()
         })),
         returnedValue: (t) => t.value,
-        renderDropdownItem: T,
-        renderSingleInputItem: V,
-        onChange: (t) => q(t)
+        renderDropdownItem: L,
+        renderSingleInputItem: T,
+        onChange: (t) => A(t)
       }
     ) })
   ] });
-}, L = ({
+}, j = ({
   children: o,
   isCurrentPage: n = !1,
   onClick: a,
@@ -182,9 +182,9 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: n ? i.fill.accentSecondary : i.fill.bgSecondary,
+    backgroundColor: n ? i.fill.accent_secondary : i.fill.bg_secondary,
     borderRadius: tt.sm,
-    border: n ? `1px solid ${i.fill.accentSecondaryHover}` : `1px solid ${i.border.neutralAlphaBasic}`
+    border: n ? `1px solid ${i.fill.accent_secondary_hover}` : `1px solid ${i.border.neutral_alpha_basic}`
   }), h = R({
     width: "24px",
     height: "24px",
@@ -199,7 +199,7 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
         n && d
       ),
       onClick: c ? void 0 : a,
-      children: s ? /* @__PURE__ */ e(U, { className: h }) : /* @__PURE__ */ e(_, { center: !0, variant: "body-2", fontWeight: "medium", children: o })
+      children: s ? /* @__PURE__ */ e(Q, { className: h }) : /* @__PURE__ */ e(Z, { center: !0, variant: "body-2", fontWeight: "medium", children: o })
     }
   );
 };

package/dist/components/builders/Table/TableWrapper/TableWrapper.js

@@ -1,11 +1,11 @@
 import { jsx as c } from "react/jsx-runtime";
 import { css as n, cx as f } from "@emotion/css";
-import { memo as k, useState as d, useRef as x, useCallback as E, useEffect as W } from "react";
-import { theme as $ } from "../../../../utils/theme/index.js";
-import { Box as m } from "../../Box/Box.js";
-const { color: o, cornerRadius: C } = $, P = n({
+import { memo as k, useState as d, useRef as x, useCallback as E, useEffect as L } from "react";
+import { theme as W } from "../../../../utils/theme/index.js";
+import { Box as p } from "../../Box/Box.js";
+const { color: o, cornerRadius: $ } = W, C = n({
   position: "relative",
-  borderRadius: C.md,
+  borderRadius: $.md,
   overflow: "hidden",
   "&::before, &::after": {
     content: '""',
@@ -18,21 +18,21 @@ const { color: o, cornerRadius: C } = $, P = n({
   },
   "&::before": {
     left: 0,
-    background: `linear-gradient(to left, transparent 0%, ${o.fill.bgPrimary} 100%)`
+    background: `linear-gradient(to left, transparent 0%, ${o.fill.bg_primary} 100%)`
   },
   "&::after": {
     right: 0,
-    background: `linear-gradient(to right, transparent 0%, ${o.fill.bgPrimary} 100%)`
+    background: `linear-gradient(to right, transparent 0%, ${o.fill.bg_primary} 100%)`
   }
 }), N = n({
   overflowX: "auto",
   scrollbarWidth: "thin",
-  scrollbarColor: `${o.scrollbar.thumbPrimary} ${o.scrollbar.trackPrimary}`
+  scrollbarColor: `${o.scrollbar.thumb_primary} ${o.scrollbar.track_primary}`
 }), T = k(
   ({
-    data: b,
-    children: h,
-    className: p,
+    data: m,
+    children: b,
+    className: h,
     scrollContainerClassName: u,
     showBorders: w = !1,
     ...y
@@ -45,7 +45,7 @@ const { color: o, cornerRadius: C } = $, P = n({
         i && t < a - l - 1
       );
     }, []);
-    W(() => {
+    L(() => {
       const r = s.current;
       if (!r) return;
       e();
@@ -53,9 +53,9 @@ const { color: o, cornerRadius: C } = $, P = n({
       return t.observe(r), r.addEventListener("scroll", e), () => {
         t.disconnect(), r.removeEventListener("scroll", e);
       };
-    }, [e, b]);
-    const L = n({
-      border: w ? `1px solid ${o.border.neutralAlphaLow}` : "transparent",
+    }, [e, m]);
+    const _ = n({
+      border: w ? `1px solid ${o.border.neutral_alpha_low}` : "transparent",
       "&::before": {
         opacity: S ? 1 : 0
       },
@@ -64,16 +64,16 @@ const { color: o, cornerRadius: C } = $, P = n({
       }
     });
     return /* @__PURE__ */ c(
-      m,
+      p,
       {
-        className: f(P, L, p),
+        className: f(C, _, h),
         ...y,
         children: /* @__PURE__ */ c(
-          m,
+          p,
           {
             ref: s,
             className: f(N, u),
-            children: h
+            children: b
           }
         )
       }

package/dist/components/charts/LineChart/constants.js

@@ -1,5 +1,5 @@
 import { theme as l } from "../../../utils/theme/index.js";
-const { color: i } = l, e = {
+const { color: i } = l, r = {
   chart: {
     type: "areaspline",
     backgroundColor: "transparent",
@@ -34,44 +34,44 @@ const { color: i } = l, e = {
   credits: {
     enabled: !1
   }
-}, t = {
+}, e = {
   positive: {
-    color: i.fill.positivePrimary,
+    color: i.fill.positive_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.positiveTintHigh],
-        [1, i.fill.positiveTransparent]
+        [0, i.fill.positive_tint_high],
+        [1, i.fill.positive_transparent]
       ]
     }
   },
   negative: {
-    color: i.fill.negativePrimary,
+    color: i.fill.negative_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.negativeTintHigh],
-        [1, i.fill.negativeTransparent]
+        [0, i.fill.negative_tint_high],
+        [1, i.fill.negative_transparent]
       ]
     }
   },
   accent: {
-    color: i.fill.accentPrimary,
+    color: i.fill.accent_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.accentTintHigh],
-        [1, i.fill.accentTransparent]
+        [0, i.fill.accent_tint_high],
+        [1, i.fill.accent_transparent]
       ]
     }
   },
   warning: {
-    color: i.fill.warningPrimary,
+    color: i.fill.warning_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.warningTintHigh],
-        [1, i.fill.warningTransparent]
+        [0, i.fill.warning_tint_high],
+        [1, i.fill.warning_transparent]
       ]
     }
   },
@@ -87,6 +87,6 @@ const { color: i } = l, e = {
   }
 };
 export {
-  t as lineChartColorPreset,
-  e as lineChartPreset
+  e as lineChartColorPreset,
+  r as lineChartPreset
 };

package/dist/components/charts/LineChart/utils.js

@@ -38,12 +38,12 @@ const { color: r } = n, f = (e, s, t, a, i) => ({
     alignByTranslate: !0
   },
   shadow: {
-    color: r.effect.shadowM,
+    color: r.effect.shadow_m,
     offsetX: 0,
     offsetY: 0
   },
   borderRadius: 8,
-  backgroundColor: r.fill.bgPrimary,
+  backgroundColor: r.fill.bg_primary,
   useHTML: !0,
   ...e
 });

package/dist/components/charts/PieProgressChart/constants.js

@@ -1,5 +1,5 @@
 import { theme as i } from "../../../utils/theme/index.js";
-const { color: e } = i, r = {
+const { color: e } = i, l = {
   chart: {
     type: "pie",
     backgroundColor: "transparent",
@@ -53,30 +53,36 @@ const { color: e } = i, r = {
   credits: {
     enabled: !1
   }
-}, t = {
+}, r = {
   positive: {
     colors: [
-      e.fill.positivePrimary,
-      e.fill.positiveTintHigh
+      e.fill.positive_primary,
+      e.fill.positive_tint_high
     ]
   },
   negative: {
     colors: [
-      e.fill.negativePrimary,
-      e.fill.negativeTintHigh
+      e.fill.negative_primary,
+      e.fill.negative_tint_high
     ]
   },
   accent: {
-    colors: [e.fill.accentPrimary, e.fill.accentTintHigh]
+    colors: [
+      e.fill.accent_primary,
+      e.fill.accent_tint_high
+    ]
   },
   warning: {
-    colors: [e.fill.warningPrimary, e.fill.warningTintHigh]
+    colors: [
+      e.fill.warning_primary,
+      e.fill.warning_tint_high
+    ]
   },
   transfer: {
     colors: ["var(--fill-transfer-primary)", "var(--fill-transfer-tint-high)"]
   }
 };
 export {
-  t as pieProgressChartColorPreset,
-  r as pieProgressChartPreset
+  r as pieProgressChartColorPreset,
+  l as pieProgressChartPreset
 };

package/dist/components/controls/Button/Button.js

@@ -1,22 +1,22 @@
 import { jsx as o, jsxs as b, Fragment as O } from "react/jsx-runtime";
-import { cx as w, css as P } from "@emotion/css";
-import { motion as k } from "framer-motion";
+import { cx as _, css as k } from "@emotion/css";
+import { motion as q } from "framer-motion";
 import { useMemo as n } from "react";
-import { cornerRadiusValues as m, baseButton as q, getVariantStyles as D, typeStyles as E, sizeValues as G } from "./styles.js";
-import { Loader as H } from "../../builders/Loader/Loader.js";
-import { AnimatedText as I } from "../../builders/Text/Text.js";
-import { theme as J } from "../../../utils/theme/index.js";
-import { Box as K } from "../../builders/Box/Box.js";
+import { cornerRadiusValues as m, baseButton as D, getVariantStyles as E, typeStyles as G, sizeValues as H } from "./styles.js";
+import { Loader as I } from "../../builders/Loader/Loader.js";
+import { AnimatedText as J } from "../../builders/Text/Text.js";
+import { theme as K } from "../../../utils/theme/index.js";
+import { Box as P } from "../../builders/Box/Box.js";
 import { Ripple as Q } from "../../builders/Ripple/Ripple.js";
-const { color: u } = J, sr = ({
+const { color: u } = K, sr = ({
   disabled: a,
   loading: l,
-  className: g,
-  wrapperClassName: S,
-  buttonClassName: _,
-  buttonDisabledClassName: $,
-  textClassName: N,
-  children: B,
+  className: w,
+  wrapperClassName: g,
+  buttonClassName: $,
+  buttonDisabledClassName: N,
+  textClassName: S,
+  children: v,
   variant: e = "filled",
   backgroundColor: f,
   textColor: d,
@@ -27,7 +27,7 @@ const { color: u } = J, sr = ({
   borderRadius: x,
   width: c = "auto",
   size: s = "md",
-  iconLeft: v,
+  iconLeft: B,
   iconRight: R,
   intensity: t = "primary",
   flex: T,
@@ -43,7 +43,7 @@ const { color: u } = J, sr = ({
       default:
         return c;
     }
-  }, [c]), A = n(() => f || (e === "filled" ? r === "neutral" ? u.fill.neutralSecondary : r === "neutral-primary" ? u.fill.neutralPrimary : `var(--fill-${r}-${t})` : "transparent"), [e, f, r, t]), F = n(() => {
+  }, [c]), F = n(() => f || (e === "filled" ? r === "neutral" ? u.fill.neutral_secondary : r === "neutral-primary" ? u.fill.neutral_primary : `var(--fill-${r}-${t})` : "transparent"), [e, f, r, t]), W = n(() => {
     if (t === "primary") {
       if (r === "neutral" || r === "neutral-primary")
         return u.text.secondary;
@@ -58,7 +58,7 @@ const { color: u } = J, sr = ({
     } else if (r === "neutral" || r === "neutral-primary")
       return "secondary";
     return r;
-  }, [e, r, t]), W = n(() => i || (e === "outline" ? r === "neutral-primary" ? u.border.neutralAlphaBasic : `var(--border-${r}-${t})` : "transparent"), [e, i, r, t]), C = n(() => {
+  }, [e, r, t]), A = n(() => i || (e === "outline" ? r === "neutral-primary" ? u.border.neutral_alpha_basic : `var(--border-${r}-${t})` : "transparent"), [e, i, r, t]), C = n(() => {
     switch (s) {
       case "lg":
         return m.lg;
@@ -70,21 +70,21 @@ const { color: u } = J, sr = ({
       default:
         return m.md;
     }
-  }, [s]), L = w(
-    q,
-    D(e, r, t, a),
-    E[e],
-    a ? $ : void 0,
-    P({
+  }, [s]), L = _(
+    D,
+    E(e, r, t, a),
+    G[e],
+    a ? N : void 0,
+    k({
       borderRadius: x ? m[x] : C,
-      backgroundColor: A,
-      borderColor: W,
+      backgroundColor: F,
+      borderColor: A,
       color: d ?? `var(--text-${y})`,
       width: h,
-      height: G[s],
+      height: H[s],
       opacity: p || (a ? 0.7 : 1)
     }),
-    _
+    $
   ), M = n(() => {
     switch (s) {
       case "lg":
@@ -98,15 +98,15 @@ const { color: u } = J, sr = ({
     }
   }, [s]);
   return /* @__PURE__ */ o(
-    K,
+    P,
     {
-      className: w(S, g),
+      className: _(g, w),
       w: h,
       flex: T,
       relative: !0,
       overflow: "hidden",
       children: /* @__PURE__ */ b(
-        k.button,
+        q.button,
         {
           ...j,
           whileTap: !a && !l ? {
@@ -118,18 +118,18 @@ const { color: u } = J, sr = ({
           className: L,
           type: V,
           children: [
-            l ? /* @__PURE__ */ o(H, { color: F }) : /* @__PURE__ */ b(O, { children: [
-              v,
+            l ? /* @__PURE__ */ o(I, { color: W }) : /* @__PURE__ */ b(O, { children: [
+              B,
               /* @__PURE__ */ o(
-                I,
+                J,
                 {
                   style: { color: d },
                   colorName: y,
                   variant: M,
-                  className: N,
+                  className: S,
                   textOverflow: "ellipsis",
                   overflow: "hidden",
-                  children: B
+                  children: v
                 }
               ),
               R

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

@@ -38,15 +38,15 @@ const { color: t, cornerRadius: r, height: n, transition: i } = d, v = o({
     border: "none"
   }),
   filled: o({
-    backgroundColor: t.fill.accentPrimary,
+    backgroundColor: t.fill.accent_primary,
     color: "white",
     border: "none"
   }),
   outline: o({
     backgroundColor: "transparent",
-    border: `1px solid ${t.border.accentPrimary}`
+    border: `1px solid ${t.border.accent_primary}`
   })
-}, h = (s, e, l, c) => {
+}, p = (s, e, l, c) => {
   if (c)
     return o({
       cursor: "not-allowed",
@@ -100,7 +100,7 @@ const { color: t, cornerRadius: r, height: n, transition: i } = d, v = o({
 export {
   v as baseButton,
   x as cornerRadiusValues,
-  h as getVariantStyles,
+  p as getVariantStyles,
   f as sizeValues,
   b as typeStyles
 };

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

@@ -24,22 +24,22 @@ const { color: r } = e, t = {
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 4,
-    border: `1px solid ${r.border.neutralAlphaHigh}`,
-    backgroundColor: r.fill.bgSecondary,
+    border: `1px solid ${r.border.neutral_alpha_high}`,
+    backgroundColor: r.fill.bg_secondary,
     opacity: 1,
     transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
     position: "relative",
     "& svg": {
-      color: r.border.accentPrimary
+      color: r.border.accent_primary
     }
   }),
   checked: o({
-    borderColor: `${r.border.accentPrimary} !important`,
-    backgroundColor: `${r.fill.accentSecondary} !important`
+    borderColor: `${r.border.accent_primary} !important`,
+    backgroundColor: `${r.fill.accent_secondary} !important`
   }),
   error: o({
-    borderColor: r.border.negativePrimary,
-    backgroundColor: r.fill.negativeSecondary
+    borderColor: r.border.negative_primary,
+    backgroundColor: r.fill.negative_secondary
   })
 }, a = {
   primary: o({}),