@ledgerhq/lumen-ui-react 0.1.36 → 0.1.37

package/dist/lib/Components/AmountInput/AmountInput.d.ts

@@ -4,5 +4,5 @@ import { AmountInputProps } from './types';
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export declare const AmountInput: ({ ref, className, currencyText, currencyPosition, disabled: disabledProp, maxIntegerLength, maxDecimalLength, allowDecimals, thousandsSeparator, value, onChange, ...props }: AmountInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AmountInput: ({ ref, className, size, align, currencyText, currencyPosition, disabled: disabledProp, maxIntegerLength, maxDecimalLength, allowDecimals, thousandsSeparator, value, onChange, ...props }: AmountInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AmountInput.d.ts.map

package/dist/lib/Components/AmountInput/AmountInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgChD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,8KAazB,gBAAgB,4CAkHlB,CAAC"}
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,SAAS,CAAC;AAyGjE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,2LAezB,gBAAgB,4CAmHlB,CAAC"}

package/dist/lib/Components/AmountInput/AmountInput.js

@@ -1,126 +1,176 @@
-import { jsxs as j, jsx as l } from "react/jsx-runtime";
-import { useDisabledContext as F, getFontSize as z, cn as a, textFormatter as D } from "../../../libs/utils-shared/dist/index.js";
-import { cva as M } from "class-variance-authority";
-import { useRef as d, useState as h, useMemo as W, useLayoutEffect as q, useEffect as L } from "react";
-const Y = M(
+import { jsxs as T, jsx as u } from "react/jsx-runtime";
+import { useDisabledContext as j, useMergedRef as k, getFontSize as G, cn as h, textFormatter as H } from "../../../libs/utils-shared/dist/index.js";
+import { cva as c } from "class-variance-authority";
+import { useRef as g, useState as D, useMemo as Y, useCallback as F, useLayoutEffect as O, useEffect as v } from "react";
+const L = 33, z = 8, q = 24, B = 16, J = {
+  md: q,
+  sm: B
+}, Q = (m, p, e) => {
+  const i = m === "" ? L : z;
+  return p ? i : i + J[e];
+}, Z = c(
   [
-    "bg-transparent heading-0 caret-active outline-hidden transition-colors",
+    "bg-transparent caret-active outline-hidden transition-colors",
     "text-base placeholder:text-muted-subtle",
     "disabled:cursor-not-allowed disabled:bg-base-transparent disabled:text-disabled",
     "aria-invalid:text-error",
-    "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-    "h-56"
+    "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
   ],
   {
     variants: {
+      size: {
+        md: "heading-0-semi-bold h-56",
+        sm: "heading-2-semi-bold h-36"
+      },
       isChanging: {
         true: "animate-translate-from-right",
         false: ""
       }
     },
     defaultVariants: {
+      size: "md",
       isChanging: !1
     }
   }
-), b = a(
-  "cursor-text heading-0",
-  "text-base",
-  "group-has-[input:placeholder-shown]:text-muted-subtle",
-  "group-has-[input:disabled]:cursor-not-allowed group-has-[input:disabled]:text-disabled",
-  'group-has-[input[aria-invalid="true"]]:text-error'
-), J = ({
-  ref: x,
-  className: S,
-  currencyText: r,
-  currencyPosition: p = "left",
-  disabled: v,
-  maxIntegerLength: w = 9,
-  maxDecimalLength: y = 9,
-  allowDecimals: C = !0,
-  thousandsSeparator: N = !0,
-  value: u,
-  onChange: A,
-  ...R
+), x = c(
+  [
+    "cursor-text text-base",
+    "group-has-[input:placeholder-shown]:text-muted-subtle",
+    "group-has-[input:disabled]:cursor-not-allowed group-has-[input:disabled]:text-disabled",
+    'group-has-[input[aria-invalid="true"]]:text-error'
+  ],
+  {
+    variants: {
+      size: {
+        md: "heading-0-semi-bold",
+        sm: "heading-2-semi-bold"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), $ = c("invisible absolute whitespace-pre", {
+  variants: {
+    size: {
+      md: "heading-0-semi-bold",
+      sm: "heading-2-semi-bold"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), K = c(
+  "group relative flex w-full items-center overflow-visible transition-transform",
+  {
+    variants: {
+      align: {
+        center: "justify-center",
+        start: "justify-start",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: {
+      align: "center"
+    }
+  }
+), st = ({
+  ref: m,
+  className: p,
+  size: e = "md",
+  align: i = "center",
+  currencyText: a,
+  currencyPosition: b = "left",
+  disabled: w,
+  maxIntegerLength: C = 9,
+  maxDecimalLength: R = 9,
+  allowDecimals: S = !0,
+  thousandsSeparator: P = !0,
+  value: f,
+  onChange: y,
+  ...W
 }) => {
-  const k = F({
+  const A = j({
     consumerName: "AmountInput",
-    mergeWith: { disabled: v }
-  }), c = d(null), s = d(null), [n, f] = h(u.toString()), [E, m] = h(!1), g = d(n);
-  function I(...t) {
-    return (e) => {
-      t.forEach((o) => {
-        o && (typeof o == "function" ? o(e) : o.current = e);
-      });
-    };
-  }
-  const i = W(() => z(n) + "px", [n]);
-  q(() => {
-    if (c.current && s.current) {
-      const t = c.current.offsetWidth, e = n === "" ? 33 : 8;
-      s.current.style.width = `${t + e}px`;
+    mergeWith: { disabled: w }
+  }), r = g(null), o = g(null), E = k(m, o), [s, I] = D(f.toString()), [M, N] = D(!1), _ = g(s), U = Y(
+    () => G(s, e) + "px",
+    [s, e]
+  ), l = F(() => {
+    if (r.current && o.current) {
+      const t = Math.ceil(
+        Math.max(r.current.scrollWidth, r.current.offsetWidth)
+      ), n = Q(s, a, e);
+      o.current.style.width = `${t + n}px`;
     }
-  }, [n]), L(() => {
-    f(u.toString());
-  }, [u]);
+  }, [s, a, e]);
+  O(l, [l]), v(() => {
+    const t = r.current;
+    if (!t) return;
+    const n = new ResizeObserver(l);
+    return n.observe(t), () => n.disconnect();
+  }, [l]), v(() => {
+    I(f.toString());
+  }, [f]);
   const V = (t) => {
-    const e = D(t.target.value, {
-      allowDecimals: C,
-      thousandsSeparator: N,
-      maxIntegerLength: w,
-      maxDecimalLength: y
+    const n = H(t.target.value, {
+      allowDecimals: S,
+      thousandsSeparator: P,
+      maxIntegerLength: C,
+      maxDecimalLength: R
     });
-    f(e), A({ ...t, target: { ...t.target, value: e } }), e !== g.current && m(!0), g.current = e;
-  };
-  return /* @__PURE__ */ j(
+    I(n), y({ ...t, target: { ...t.target, value: n } }), n !== _.current && N(!0), _.current = n;
+  }, d = { fontSize: U, letterSpacing: "normal" };
+  return /* @__PURE__ */ T(
     "div",
     {
-      className: "group relative flex items-center justify-center transition-transform",
+      className: K({ align: i }),
       onPointerDown: () => {
-        const t = s.current;
+        const t = o.current;
         t && window.requestAnimationFrame(() => {
           t.focus();
         });
       },
       children: [
-        r && p === "left" && /* @__PURE__ */ l(
+        a && b === "left" && /* @__PURE__ */ u(
           "span",
           {
-            className: a(b, "shrink-0"),
-            style: { fontSize: i, letterSpacing: "normal" },
-            children: r
+            className: h(x({ size: e }), "shrink-0"),
+            style: d,
+            children: a
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ u(
           "span",
           {
-            ref: c,
-            className: a("invisible absolute heading-0"),
+            ref: r,
+            className: $({ size: e }),
             "aria-hidden": "true",
-            style: { fontSize: i, letterSpacing: "normal" },
-            children: n
+            style: d,
+            children: s
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ u(
           "input",
           {
-            ref: I(x, s),
+            ref: E,
             type: "text",
             inputMode: "decimal",
-            disabled: k,
-            value: n,
+            disabled: A,
+            value: s,
             onChange: V,
-            onAnimationEnd: () => m(!1),
-            className: a(Y({ isChanging: E }), S),
-            ...R,
-            style: { fontSize: i, letterSpacing: "normal" }
+            onAnimationEnd: () => N(!1),
+            className: h(Z({ size: e, isChanging: M }), p),
+            ...W,
+            style: d
           }
         ),
-        r && p === "right" && /* @__PURE__ */ l(
+        a && b === "right" && /* @__PURE__ */ u(
           "span",
           {
-            className: a(b, "shrink-0"),
-            style: { fontSize: i, letterSpacing: "normal" },
-            children: r
+            className: h(x({ size: e }), "shrink-0"),
+            style: d,
+            children: a
           }
         )
       ]
@@ -128,5 +178,5 @@ const Y = M(
   );
 };
 export {
-  J as AmountInput
+  st as AmountInput
 };

package/dist/lib/Components/AmountInput/types.d.ts

@@ -1,4 +1,6 @@
 import { ChangeEvent, ComponentPropsWithRef } from 'react';
+export type AmountInputSize = 'md' | 'sm';
+export type AmountInputAlign = 'center' | 'start' | 'end';
 export type AmountInputProps = {
     /**
      * The controlled value of the input
@@ -10,6 +12,16 @@ export type AmountInputProps = {
      * @required
      */
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Visual size of the amount input.
+     * @default 'md'
+     */
+    size?: AmountInputSize;
+    /**
+     * Horizontal alignment of the amount and currency.
+     * @default 'center'
+     */
+    align?: AmountInputAlign;
     /**
      * The currency text (e.g. USD, EUR)
      */

package/dist/lib/Components/AmountInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,GAAG,IAAI,CACN,qBAAqB,CAAC,OAAO,CAAC,EAC9B,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CACzC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,GAAG,IAAI,CACN,qBAAqB,CAAC,OAAO,CAAC,EAC9B,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CACzC,CAAC"}

package/dist/lib/Components/Avatar/Avatar.d.ts

@@ -15,5 +15,5 @@ import { AvatarProps } from './types';
  * // With notification indicator
  * <Avatar src="https://example.com/photo.jpg" showNotification />
  */
-export declare const Avatar: ({ ref, className, src, alt, size, imgLoading, showNotification, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ ref, className, src, alt, size, imgLoading, showNotification: showNotificationProp, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/lib/Components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsC3C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,GAAI,4EASpB,WAAW,4CA+Cb,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAqC3C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,GAAI,kGASpB,WAAW,4CAuDb,CAAC"}

package/dist/lib/Components/Avatar/Avatar.js

@@ -1,10 +1,11 @@
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { cva as l } from "class-variance-authority";
-import { useState as g, useEffect as x } from "react";
-import { useCommonTranslation as h } from "../../../i18n/useCommonTranslation.js";
-import { User as j } from "../../Symbols/Icons/User.js";
-const n = {
-  root: l(
+import { jsx as t } from "react/jsx-runtime";
+import { cva as h } from "class-variance-authority";
+import { useState as g, useEffect as z } from "react";
+import { useCommonTranslation as x } from "../../../i18n/useCommonTranslation.js";
+import { User as A } from "../../Symbols/Icons/User.js";
+import { DotIndicator as N } from "../DotIndicator/DotIndicator.js";
+const j = {
+  root: h(
     "relative inline-flex items-center justify-center rounded-full bg-muted-transparent transition-colors",
     {
       variants: {
@@ -19,73 +20,59 @@ const n = {
         size: "md"
       }
     }
-  ),
-  notification: l("absolute top-0 right-0 rounded-full bg-error-strong", {
-    variants: {
-      size: {
-        sm: "size-10",
-        md: "size-12",
-        lg: "size-14",
-        xl: "size-16"
-      }
-    }
-  })
-}, A = {
+  )
+}, k = {
   sm: 16,
   md: 24,
   lg: 32,
   xl: 40
-}, S = ({
-  ref: m,
-  className: d,
-  src: e,
+}, w = {
+  sm: "lg",
+  md: "xl"
+}, V = ({
+  ref: l,
+  className: m,
+  src: o,
   alt: c,
   size: a = "md",
-  imgLoading: f,
-  showNotification: t = !1,
+  imgLoading: d,
+  showNotification: f = !1,
   ...u
 }) => {
-  const { t: o } = h(), [p, i] = g(!1), v = !e || p, s = c || o("components.avatar.defaultAlt"), z = t ? `${s}, ${o("components.avatar.notificationAriaLabel")}` : s;
-  return x(() => {
-    i(!1);
-  }, [e]), /* @__PURE__ */ b(
+  const { t: r } = x(), [p, e] = g(!1), v = !o || p, i = c || r("components.avatar.defaultAlt"), n = f && (a === "sm" || a === "md"), b = n ? `${i}, ${r("components.avatar.notificationAriaLabel")}` : i;
+  z(() => {
+    e(!1);
+  }, [o]);
+  const s = /* @__PURE__ */ t(
     "div",
     {
-      ref: m,
-      className: n.root({ size: a, className: d }),
+      ref: l,
+      className: j.root({ size: a, className: m }),
       role: "img",
-      "aria-label": z,
+      "aria-label": b,
       ...u,
-      children: [
-        t && /* @__PURE__ */ r(
-          "div",
-          {
-            className: n.notification({ size: a }),
-            "aria-hidden": "true"
-          }
-        ),
-        v ? /* @__PURE__ */ r(
-          j,
-          {
-            size: A[a],
-            "aria-label": "Fallback Icon",
-            "aria-hidden": "true"
-          }
-        ) : /* @__PURE__ */ r(
-          "img",
-          {
-            src: e,
-            alt: "",
-            loading: f,
-            onError: () => i(!0),
-            className: "size-full overflow-hidden rounded-full object-cover",
-            "aria-hidden": "true"
-          }
-        )
-      ]
+      children: v ? /* @__PURE__ */ t(
+        A,
+        {
+          size: k[a],
+          "aria-label": "Fallback Icon",
+          "aria-hidden": "true"
+        }
+      ) : /* @__PURE__ */ t(
+        "img",
+        {
+          src: o,
+          alt: "",
+          loading: d,
+          onError: () => e(!0),
+          className: "size-full overflow-hidden rounded-full object-cover",
+          "aria-hidden": "true"
+        }
+      )
     }
   );
+  return n ? /* @__PURE__ */ t(N, { size: w[a], appearance: "red", children: s }) : s;
 };
 export {
-  S as Avatar
+  V as Avatar
 };

package/dist/lib/Components/Button/BaseButton.d.ts

@@ -1,9 +1,9 @@
 import { BaseButtonProps } from './types';
 export declare const baseButtonVariants: (props?: ({
-    appearance?: "base" | "gray" | "accent" | "transparent" | "no-background" | "red" | null | undefined;
+    appearance?: "base" | "red" | "gray" | "accent" | "transparent" | "no-background" | null | undefined;
     disabled?: boolean | null | undefined;
     loading?: boolean | null | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    size?: "md" | "sm" | "lg" | "xs" | null | undefined;
     isFull?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const BaseButton: ({ ref, className, appearance, size, isFull, disabled: disabledProp, asChild, icon: Icon, loading, children, onClick, ...props }: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/Components/Button/Button.js

@@ -1,8 +1,8 @@
-import { jsx as n } from "react/jsx-runtime";
-import { cn as d } from "../../../libs/utils-shared/dist/index.js";
-import { cva as e } from "class-variance-authority";
+import { jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../../libs/utils-shared/dist/index.js";
+import { cva as d } from "class-variance-authority";
 import { BaseButton as b } from "./BaseButton.js";
-const l = e("", {
+const l = d("", {
   variants: {
     size: {
       sm: "px-16 py-10 body-2-semi-bold",
@@ -16,21 +16,21 @@ const l = e("", {
 }), x = ({
   ref: t,
   className: m,
-  loading: r,
-  disabled: s,
+  loading: s,
+  disabled: r,
   children: a,
   size: o,
   icon: i,
   ...p
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ e(
   b,
   {
     ref: t,
     size: o,
-    disabled: s,
+    disabled: r,
     icon: i,
-    loading: r,
-    className: d(l({ size: o }), "gap-8", m),
+    loading: s,
+    className: n(l({ size: o }), "gap-8", m),
     ...p,
     children: a
   }

package/dist/lib/Components/Card/Card.js

@@ -144,7 +144,7 @@ const k = ({
       ]
     }
   );
-}, V = ({
+}, z = ({
   ref: t,
   children: a,
   className: r,
@@ -157,7 +157,7 @@ const k = ({
     ...e,
     children: a
   }
-), z = ({
+), V = ({
   ref: t,
   children: a,
   className: r,
@@ -226,7 +226,7 @@ const k = ({
       children: a
     }
   );
-}, K = ({
+}, L = ({
   ref: t,
   children: a,
   className: r,
@@ -249,7 +249,7 @@ const k = ({
       children: a
     }
   );
-}, L = ({
+}, M = ({
   ref: t,
   children: a,
   className: r,
@@ -272,7 +272,7 @@ const k = ({
       children: a
     }
   ) });
-}, M = ({
+}, S = ({
   ref: t,
   children: a,
   className: r,
@@ -304,7 +304,7 @@ const k = ({
       ) })
     }
   );
-}, S = ({
+}, U = ({
   ref: t,
   children: a,
   className: r,
@@ -320,14 +320,14 @@ const k = ({
 );
 export {
   P as Card,
-  z as CardContent,
-  K as CardContentDescription,
+  V as CardContent,
+  L as CardContentDescription,
   B as CardContentRow,
   I as CardContentTitle,
-  M as CardFooter,
-  S as CardFooterActions,
+  S as CardFooter,
+  U as CardFooterActions,
   T as CardHeader,
-  V as CardLeading,
-  L as CardTrailing,
+  z as CardLeading,
+  M as CardTrailing,
   k as resolveCardInnerContext
 };

package/dist/lib/Components/DataTable/DataTable.js

@@ -97,7 +97,7 @@ const [M, u] = w("DataTableContext"), Q = ({
       children: [
         /* @__PURE__ */ d(k, { children: [
           !i && /* @__PURE__ */ a(j, {}),
-          s ? /* @__PURE__ */ a(K, {}) : /* @__PURE__ */ a(P, {})
+          s ? /* @__PURE__ */ a(z, {}) : /* @__PURE__ */ a(P, {})
         ] }),
         t === "infinite-scroll" && /* @__PURE__ */ a(y, {})
       ]
@@ -117,7 +117,7 @@ const [M, u] = w("DataTableContext"), Q = ({
     (!e || e.key !== i) && (e = { key: i, rows: [], count: 0 }, o.push(e)), e.rows.push(t), e.count++;
   }
   return o;
-}, K = ({
+}, z = ({
   className: l,
   ref: n,
   ...o

package/dist/lib/Components/Divider/Divider.js

@@ -2,9 +2,9 @@ import { jsx as l } from "react/jsx-runtime";
 import { cn as a } from "../../../libs/utils-shared/dist/index.js";
 const d = ({
   ref: o,
-  className: t,
+  className: e,
   orientation: r = "horizontal",
-  ...e
+  ...t
 }) => /* @__PURE__ */ l(
   "div",
   {
@@ -14,9 +14,9 @@ const d = ({
     className: a(
       "border-muted-subtle",
       r === "horizontal" ? "w-full border-t" : "h-full border-l",
-      t
+      e
     ),
-    ...e
+    ...t
   }
 );
 export {

package/dist/lib/Components/DotCount/DotCount.js

@@ -57,10 +57,10 @@ function y({
   ref: f,
   ...u
 }) {
-  const r = g({
+  const d = g({
     consumerName: "DotCount",
     mergeWith: { disabled: c }
-  }), d = Math.max(1, Math.min(b, 99)), o = !!i;
+  }), r = Math.max(1, Math.min(b, 99)), o = !!i;
   return /* @__PURE__ */ x(
     "div",
     {
@@ -75,10 +75,10 @@ function y({
             "aria-label": n,
             "aria-hidden": !n || void 0,
             className: a(
-              h({ size: t, appearance: s, disabled: r }),
+              h({ size: t, appearance: s, disabled: d }),
               o && "absolute top-0 right-0 z-1"
             ),
-            children: e > 0 && /* @__PURE__ */ l("span", { className: a(v({ size: t, appearance: s, disabled: r })), children: e <= d ? e : `${d}+` })
+            children: e > 0 && /* @__PURE__ */ l("span", { className: a(v({ size: t, appearance: s, disabled: d })), children: e <= r ? e : `${r}+` })
           }
         ),
         i

package/dist/lib/Components/DotIcon/DotIcon.d.ts

@@ -5,12 +5,13 @@ export declare const mediaImageDotIconSizeMap: {
     readonly 48: 20;
     readonly 56: 24;
     readonly 64: 24;
+    readonly 72: 32;
 };
 export declare const spotDotIconSizeMap: {
     readonly 40: 16;
     readonly 48: 20;
     readonly 56: 24;
-    readonly 72: 24;
+    readonly 72: 32;
 };
 export declare const dotIconSizeMap: Record<DotIconSize, IconSize>;
 /**