@ledgerhq/lumen-ui-react 0.1.62 → 0.1.63

package/dist/lib/Components/core/DotIcon/DotIcon.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import { useDisabledContext as x, DisabledProvider as v, cn as i } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as d } from "class-variance-authority";
-import { useMemo as z } from "react";
-const N = d("relative inline-flex w-fit", {
+import { useMemo as N } from "react";
+const z = d("relative inline-flex w-fit", {
   variants: {
     disabled: {
       true: "opacity-30",
@@ -68,7 +68,7 @@ const N = d("relative inline-flex w-fit", {
   ref: p,
   ...b
 }) => {
-  const u = z(() => y(r), [r]), f = x({
+  const u = N(() => y(r), [r]), f = x({
     consumerName: "DotIcon",
     mergeWith: { disabled: m }
   });
@@ -76,7 +76,7 @@ const N = d("relative inline-flex w-fit", {
     "div",
     {
       ref: p,
-      className: i(N({ disabled: f, className: l })),
+      className: i(z({ disabled: f, className: l })),
       ...b,
       children: [
         /* @__PURE__ */ e("div", { className: "inline-flex", children: s }),

package/dist/lib/Components/core/DotSymbol/DotSymbol.js

@@ -1,4 +1,4 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
 import { useDisabledContext as z, DisabledProvider as N, cn as v } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as d } from "class-variance-authority";
 import { useMemo as g, useState as q, useEffect as y } from "react";
@@ -47,7 +47,7 @@ const D = d("relative inline-flex w-fit", {
       { shape: "circle", className: "rounded-full" }
     ]
   }
-), w = {
+), E = {
   8: -2,
   10: -2,
   12: -2,
@@ -55,18 +55,18 @@ const D = d("relative inline-flex w-fit", {
   20: -3,
   24: -3,
   32: -3
-}, E = {
+}, V = {
   "top-start": ["top", "left"],
   "top-end": ["top", "right"],
   "bottom-start": ["bottom", "left"],
   "bottom-end": ["bottom", "right"]
-}, V = (r, o) => {
-  const [t, s] = E[r], e = w[o];
-  return { [t]: e, [s]: e };
-}, j = ({
-  children: r,
-  src: o,
-  alt: t,
+}, j = (a, t) => {
+  const [r, s] = V[a], e = E[t];
+  return { [r]: e, [s]: e };
+}, w = ({
+  children: a,
+  src: t,
+  alt: r,
   pin: s = "bottom-end",
   size: e = 20,
   shape: n = "circle",
@@ -76,25 +76,25 @@ const D = d("relative inline-flex w-fit", {
   ref: p,
   ...u
 }) => {
-  const b = g(() => V(s, e), [s, e]), [f, i] = q(!1), h = z({
+  const b = g(() => j(s, e), [s, e]), [f, i] = q(!1), h = z({
     consumerName: "DotSymbol",
     mergeWith: { disabled: m }
   });
   return y(() => {
     i(!1);
-  }, [o]), /* @__PURE__ */ a(N, { value: { disabled: !1 }, children: /* @__PURE__ */ x(
+  }, [t]), /* @__PURE__ */ o(N, { value: { disabled: !1 }, children: /* @__PURE__ */ x(
     "div",
     {
       ref: p,
       className: v(D({ disabled: h, className: c })),
       ...u,
       children: [
-        /* @__PURE__ */ a("div", { className: "inline-flex", children: r }),
-        /* @__PURE__ */ a("div", { className: S({ size: e, shape: n, pin: s }), style: b, children: !f && /* @__PURE__ */ a(
+        /* @__PURE__ */ o("div", { className: "inline-flex", children: a }),
+        /* @__PURE__ */ o("div", { className: S({ size: e, shape: n, pin: s }), style: b, children: !f && /* @__PURE__ */ o(
           "img",
           {
-            alt: t,
-            src: o,
+            alt: r,
+            src: t,
             loading: l,
             "aria-hidden": "true",
             onError: () => i(!0)
@@ -104,7 +104,7 @@ const D = d("relative inline-flex w-fit", {
     }
   ) });
 };
-j.displayName = "DotSymbol";
+w.displayName = "DotSymbol";
 export {
-  j as DotSymbol
+  w as DotSymbol
 };

package/dist/lib/Components/core/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Link/Link.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoCzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,IAAI,GAAI,wHAYlB,SAAS,4CAgDX,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Link/Link.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoCzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,IAAI,GAAI,wHAYlB,SAAS,4CAmDX,CAAC"}

package/dist/lib/Components/core/Link/Link.js

@@ -1,9 +1,10 @@
-import { jsx as e, jsxs as c, Fragment as l } from "react/jsx-runtime";
-import { useDisabledContext as x, cn as h } from "../../../../libs/utils-shared/dist/index.js";
-import { Slot as g } from "@radix-ui/react-slot";
-import { cva as k } from "class-variance-authority";
-import { ExternalLink as y } from "../../symbols/icons/ExternalLink.js";
-const z = k(
+import { jsx as e, jsxs as l, Fragment as c } from "react/jsx-runtime";
+import { useDisabledContext as h, cn as g } from "../../../../libs/utils-shared/dist/index.js";
+import { Slot as k } from "@radix-ui/react-slot";
+import { cva as N } from "class-variance-authority";
+import { useCommonTranslation as y } from "../../../../translations/translations.js";
+import { ExternalLink as z } from "../../symbols/icons/ExternalLink.js";
+const w = N(
   "inline-flex w-fit max-w-full items-center justify-center transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus",
   {
     variants: {
@@ -16,7 +17,7 @@ const z = k(
       size: {
         sm: "gap-4 body-2-semi-bold",
         md: "gap-8 body-1-semi-bold",
-        inherit: ""
+        inherit: "gap-4"
       },
       underline: {
         true: "underline underline-offset-2",
@@ -34,35 +35,35 @@ const z = k(
       disabled: !1
     }
   }
-), M = ({
+), V = ({
   ref: d,
   className: m,
   children: r,
-  appearance: u,
+  appearance: p,
   size: i = "inherit",
-  underline: p = !0,
+  underline: u = !0,
   icon: f,
   isExternal: n = !1,
   asChild: t = !1,
   disabled: b,
   ...v
 }) => {
-  const a = x({
+  const { t: x } = y(), a = h({
     consumerName: "Link",
     mergeWith: { disabled: b }
-  }), s = i ? {
+  }), o = i ? {
     sm: 16,
     md: 20
-  }[i] : 20, o = f;
+  }[i] : 20, s = f;
   return /* @__PURE__ */ e(
-    t ? g : "a",
+    t ? k : "a",
     {
       ref: d,
-      className: h(
-        z({
-          appearance: u,
+      className: g(
+        w({
+          appearance: p,
           size: i,
-          underline: p,
+          underline: u,
           disabled: a
         }),
         m
@@ -71,17 +72,17 @@ const z = k(
       target: n && !t ? "_blank" : void 0,
       rel: n && !t ? "noopener noreferrer" : void 0,
       ...v,
-      children: t ? r : /* @__PURE__ */ c(l, { children: [
-        o && /* @__PURE__ */ e(o, { size: s }),
+      children: t ? r : /* @__PURE__ */ l(c, { children: [
+        s && /* @__PURE__ */ e(s, { size: o }),
         /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: r }),
-        n && /* @__PURE__ */ c(l, { children: [
-          /* @__PURE__ */ e(y, { size: s, "aria-hidden": "true" }),
-          /* @__PURE__ */ e("span", { className: "sr-only", children: "(opens in a new tab)" })
+        n && /* @__PURE__ */ l(c, { children: [
+          /* @__PURE__ */ e(z, { size: o, "aria-hidden": "true" }),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: x("components.link.opensInNewTabAriaLabel") })
         ] })
       ] })
     }
   );
 };
 export {
-  M as Link
+  V as Link
 };

package/dist/lib/Components/core/ListItem/ListItem.js

@@ -181,7 +181,7 @@ const [L, l] = b("ListItemTrailing", {
       children: t
     }
   );
-}, D = ({
+}, k = ({
   ref: e,
   children: t,
   className: s,
@@ -208,7 +208,7 @@ const [L, l] = b("ListItemTrailing", {
       children: t
     }
   );
-}, k = ({
+}, D = ({
   ref: e,
   children: t,
   className: s,
@@ -240,8 +240,8 @@ export {
   R as ListItem,
   P as ListItemContent,
   C as ListItemContentRow,
-  D as ListItemDescription,
+  k as ListItemDescription,
   q as ListItemLeading,
   j as ListItemTitle,
-  k as ListItemTrailing
+  D as ListItemTrailing
 };

package/dist/lib/Components/core/MediaBanner/MediaBanner.js

@@ -2,7 +2,7 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { cn as n, getButtonA11yProps as v } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as b } from "class-variance-authority";
 import { useState as g, useEffect as h } from "react";
-import { useCommonTranslation as x } from "../../../../i18n/useCommonTranslation.js";
+import { useCommonTranslation as x } from "../../../../translations/translations.js";
 import { Close as N } from "../../symbols/icons/Close.js";
 import { InteractiveIcon as w } from "../InteractiveIcon/InteractiveIcon.js";
 const y = b(
@@ -18,8 +18,8 @@ const y = b(
   }
 ), k = ({
   ref: r,
-  imageUrl: a,
-  onClose: t,
+  imageUrl: t,
+  onClose: a,
   closeAriaLabel: s,
   children: c,
   className: d,
@@ -29,8 +29,8 @@ const y = b(
   const { t: u } = x(), [f, l] = g(!1);
   h(() => {
     l(!1);
-  }, [a]);
-  const p = a && !f;
+  }, [t]);
+  const p = t && !f;
   return /* @__PURE__ */ i("div", { className: n("relative w-full", d), children: [
     /* @__PURE__ */ i(
       "div",
@@ -45,7 +45,7 @@ const y = b(
             p && /* @__PURE__ */ e(
               "img",
               {
-                src: a,
+                src: t,
                 alt: "",
                 "aria-hidden": !0,
                 className: "absolute inset-0 size-full object-cover",
@@ -64,7 +64,7 @@ const y = b(
         ]
       }
     ),
-    t && /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e(
       w,
       {
         "data-testid": "media-banner-close-button",
@@ -74,36 +74,36 @@ const y = b(
         icon: N,
         size: 16,
         className: "absolute top-8 right-8",
-        onClick: t,
+        onClick: a,
         "aria-label": s || u("components.banner.closeAriaLabel")
       }
     )
   ] });
 }, z = ({
   ref: r,
-  children: a,
-  className: t,
+  children: t,
+  className: a,
   ...s
 }) => /* @__PURE__ */ e(
   "div",
   {
     ref: r,
-    className: n("line-clamp-1 body-2-semi-bold text-base", t),
+    className: n("line-clamp-1 body-2-semi-bold text-base", a),
     ...s,
-    children: a
+    children: t
   }
 ), A = ({
   ref: r,
-  children: a,
-  className: t,
+  children: t,
+  className: a,
   ...s
 }) => /* @__PURE__ */ e(
   "div",
   {
     ref: r,
-    className: n("line-clamp-2 body-3 text-muted", t),
+    className: n("line-clamp-2 body-3 text-muted", a),
     ...s,
-    children: a
+    children: t
   }
 );
 export {

package/dist/lib/Components/core/MediaButton/MediaButton.js

@@ -81,7 +81,7 @@ const b = S("gap-8 body-2-semi-bold", {
     leadingContentShape: "none",
     hasChevron: !0
   }
-}), M = ({
+}), k = ({
   ref: r,
   className: p,
   appearance: i = "gray",
@@ -129,5 +129,5 @@ const b = S("gap-8 body-2-semi-bold", {
   );
 };
 export {
-  M as MediaButton
+  k as MediaButton
 };

package/dist/lib/Components/core/MediaCard/MediaCard.js

@@ -3,7 +3,7 @@ import { cn as m, getButtonA11yProps as y } from "../../../../libs/utils-shared/
 import { cva as o } from "class-variance-authority";
 import { useState as x, useEffect as N } from "react";
 import { Close as w } from "../../symbols/icons/Close.js";
-import { useCommonTranslation as z } from "../../../../i18n/useCommonTranslation.js";
+import { useCommonTranslation as z } from "../../../../translations/translations.js";
 import { InteractiveIcon as j } from "../InteractiveIcon/InteractiveIcon.js";
 const r = {
   root: o(

package/dist/lib/Components/core/MediaImage/MediaImage.js

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as s } from "react/jsx-runtime";
 import { useDisabledContext as x, cn as b } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as g } from "class-variance-authority";
-import { useState as v, useEffect as N } from "react";
+import { useState as N, useEffect as v } from "react";
 import { Skeleton as j } from "../Skeleton/Skeleton.js";
 const S = {
   12: 10,
@@ -42,7 +42,7 @@ const S = {
       }
     }
   )
-}, k = ({
+}, F = ({
   ref: d,
   className: n,
   src: r,
@@ -55,11 +55,11 @@ const S = {
   disabled: c = !1,
   ...f
 }) => {
-  const [p, i] = v(!1), o = !r || p, z = x({
+  const [p, i] = N(!1), o = !r || p, z = x({
     consumerName: "MediaImage",
     mergeWith: { disabled: c }
   });
-  return N(() => {
+  return v(() => {
     i(!1);
   }, [r]), /* @__PURE__ */ h(
     "div",
@@ -100,6 +100,6 @@ const S = {
   );
 };
 export {
-  k as MediaImage,
+  F as MediaImage,
   S as fontSizeMap
 };

package/dist/lib/Components/core/Menu/Menu.js

@@ -8,8 +8,8 @@ import { Divider as w } from "../Divider/Divider.js";
 import { ChevronRight as z } from "../../symbols/icons/ChevronRight.js";
 import { MenuRoot as G } from "../../../../node_modules/@base-ui/react/esm/menu/root/MenuRoot.js";
 import { MenuTrigger as P } from "../../../../node_modules/@base-ui/react/esm/menu/trigger/MenuTrigger.js";
-import { MenuPortal as C } from "../../../../node_modules/@base-ui/react/esm/menu/portal/MenuPortal.js";
-import { MenuPositioner as N } from "../../../../node_modules/@base-ui/react/esm/menu/positioner/MenuPositioner.js";
+import { MenuPortal as N } from "../../../../node_modules/@base-ui/react/esm/menu/portal/MenuPortal.js";
+import { MenuPositioner as C } from "../../../../node_modules/@base-ui/react/esm/menu/positioner/MenuPositioner.js";
 import { MenuPopup as v } from "../../../../node_modules/@base-ui/react/esm/menu/popup/MenuPopup.js";
 import { MenuItem as T } from "../../../../node_modules/@base-ui/react/esm/menu/item/MenuItem.js";
 import { MenuCheckboxItem as I } from "../../../../node_modules/@base-ui/react/esm/menu/checkbox-item/MenuCheckboxItem.js";
@@ -17,10 +17,10 @@ import { MenuCheckboxItemIndicator as $ } from "../../../../node_modules/@base-u
 import { MenuRadioItem as j } from "../../../../node_modules/@base-ui/react/esm/menu/radio-item/MenuRadioItem.js";
 import { MenuRadioItemIndicator as W } from "../../../../node_modules/@base-ui/react/esm/menu/radio-item-indicator/MenuRadioItemIndicator.js";
 import { MenuGroupLabel as D } from "../../../../node_modules/@base-ui/react/esm/menu/group-label/MenuGroupLabel.js";
-import { MenuGroup as L } from "../../../../node_modules/@base-ui/react/esm/menu/group/MenuGroup.js";
-import { MenuSubmenuRoot as O } from "../../../../node_modules/@base-ui/react/esm/menu/submenu-root/MenuSubmenuRoot.js";
-import { MenuSubmenuTrigger as V } from "../../../../node_modules/@base-ui/react/esm/menu/submenu-trigger/MenuSubmenuTrigger.js";
-import { MenuRadioGroup as q } from "../../../../node_modules/@base-ui/react/esm/menu/radio-group/MenuRadioGroup.js";
+import { MenuGroup as O } from "../../../../node_modules/@base-ui/react/esm/menu/group/MenuGroup.js";
+import { MenuSubmenuRoot as V } from "../../../../node_modules/@base-ui/react/esm/menu/submenu-root/MenuSubmenuRoot.js";
+import { MenuSubmenuTrigger as L } from "../../../../node_modules/@base-ui/react/esm/menu/submenu-trigger/MenuSubmenuTrigger.js";
+import { MenuRadioGroup as F } from "../../../../node_modules/@base-ui/react/esm/menu/radio-group/MenuRadioGroup.js";
 const k = M(
   [
     "min-w-160 overflow-hidden rounded-sm bg-muted p-8",
@@ -72,7 +72,7 @@ const k = M(
       appearance: "base"
     }
   }
-), A = r("px-8 py-4 body-3-semi-bold text-muted"), B = r(
+), q = r("px-8 py-4 body-3-semi-bold text-muted"), A = r(
   c(),
   "data-popup-open:bg-base-transparent-hover"
 );
@@ -95,17 +95,17 @@ const he = ({
   }
 );
 function fe({ ...e }) {
-  return /* @__PURE__ */ t(L, { "data-slot": "menu-group", ...e });
+  return /* @__PURE__ */ t(O, { "data-slot": "menu-group", ...e });
 }
 function ge({ ...e }) {
-  return /* @__PURE__ */ t(O, { ...e });
+  return /* @__PURE__ */ t(V, { ...e });
 }
-function E({
+function B({
   onValueChange: e,
   ...a
 }) {
   return /* @__PURE__ */ t(
-    q,
+    F,
     {
       "data-slot": "menu-radio-group",
       onValueChange: (o) => e?.(String(o)),
@@ -119,18 +119,18 @@ const Me = ({
   children: o,
   ...n
 }) => /* @__PURE__ */ p(
-  V,
+  L,
   {
     ref: e,
     "data-slot": "menu-sub-trigger",
-    className: r(B, a),
+    className: r(A, a),
     ...n,
     children: [
       o,
       /* @__PURE__ */ t(z, { size: 20, className: "ml-auto text-muted" })
     ]
   }
-), xe = ({ className: e, children: a }) => /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t(N, { className: "z-menu", side: "right", sideOffset: 4, children: /* @__PURE__ */ t(
+), xe = ({ className: e, children: a }) => /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(C, { className: "z-menu", side: "right", sideOffset: 4, children: /* @__PURE__ */ t(
   v,
   {
     "data-slot": "menu-sub-content",
@@ -138,7 +138,7 @@ const Me = ({
     onClick: (o) => o.stopPropagation(),
     children: a
   }
-) }) }), Ce = ({
+) }) }), Ne = ({
   side: e = "bottom",
   sideOffset: a = 4,
   align: o = "start",
@@ -146,8 +146,8 @@ const Me = ({
   sticky: i = !0,
   className: s,
   children: m
-}) => /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t(
-  N,
+}) => /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(
+  C,
   {
     className: "z-menu",
     side: e,
@@ -165,7 +165,7 @@ const Me = ({
       }
     )
   }
-) }), Ne = ({
+) }), Ce = ({
   ref: e,
   className: a,
   appearance: o = "base",
@@ -273,7 +273,7 @@ const Me = ({
       ]
     }
   ) });
-}, F = ({
+}, E = ({
   ref: e,
   className: a,
   children: o,
@@ -303,22 +303,22 @@ const Me = ({
   {
     ref: e,
     "data-slot": "menu-label",
-    className: r(A, a),
+    className: r(q, a),
     ...o
   }
 ), Se = ({ ref: e, className: a, ...o }) => /* @__PURE__ */ t(w, { ref: e, className: r("mx-8 my-4 w-auto", a), ...o });
 function Re() {
-  return { MenuRadioGroup: E, MenuRadioItem: F };
+  return { MenuRadioGroup: B, MenuRadioItem: E };
 }
 export {
   be as Menu,
   ve as MenuCheckboxItem,
-  Ce as MenuContent,
+  Ne as MenuContent,
   fe as MenuGroup,
-  Ne as MenuItem,
+  Ce as MenuItem,
   ke as MenuLabel,
-  E as MenuRadioGroup,
-  F as MenuRadioItem,
+  B as MenuRadioGroup,
+  E as MenuRadioItem,
   Se as MenuSeparator,
   ge as MenuSub,
   xe as MenuSubContent,

package/dist/lib/Components/core/NavBar/CoinCapsule.js

@@ -2,8 +2,8 @@ import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../../../libs/utils-shared/dist/index.js";
 const o = ({
   ref: s,
-  ticker: n,
-  leadingContent: t,
+  ticker: t,
+  leadingContent: n,
   className: r
 }) => /* @__PURE__ */ a(
   "div",
@@ -15,8 +15,8 @@ const o = ({
     ),
     "data-slot": "coin-capsule",
     children: [
-      /* @__PURE__ */ e("span", { className: "flex size-24 shrink-0 items-center justify-center", children: t }),
-      /* @__PURE__ */ e("span", { className: "body-1 text-base select-none", children: n })
+      /* @__PURE__ */ e("span", { className: "flex size-24 shrink-0 items-center justify-center", children: n }),
+      /* @__PURE__ */ e("span", { className: "body-1 text-base select-none", children: t })
     ]
   }
 );

package/dist/lib/Components/core/NavBar/NavBar.js

@@ -1,10 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
 import { cn as o } from "../../../../libs/utils-shared/dist/index.js";
 import { CoinCapsule as i } from "./CoinCapsule.js";
-import { useCommonTranslation as l } from "../../../../i18n/useCommonTranslation.js";
+import { useCommonTranslation as l } from "../../../../translations/translations.js";
 import { IconButton as c } from "../IconButton/IconButton.js";
 import { ArrowLeft as m } from "../../symbols/icons/ArrowLeft.js";
-const N = ({
+const f = ({
   ref: a,
   ticker: t,
   leadingContent: e,
@@ -107,7 +107,7 @@ const N = ({
 export {
   C as NavBar,
   B as NavBarBackButton,
-  N as NavBarCoinCapsule,
+  f as NavBarCoinCapsule,
   g as NavBarDescription,
   k as NavBarLeading,
   x as NavBarTitle,

package/dist/lib/Components/core/PageIndicator/PageIndicator.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { cn as p } from "../../../../libs/utils-shared/dist/index.js";
-import { useMemo as k, useRef as _, useEffect as S, useCallback as x } from "react";
-const I = 4, v = 6, A = 4, D = v + A, N = 200, X = ({ isActive: t, isShrunk: n }) => /* @__PURE__ */ i(
+import { useMemo as k, useRef as _, useEffect as N, useCallback as x } from "react";
+const I = 4, v = 6, A = 4, S = v + A, D = 200, X = ({ isActive: t, isShrunk: n }) => /* @__PURE__ */ i(
   "span",
   {
     className: p(
@@ -15,13 +15,13 @@ const I = 4, v = 6, A = 4, D = v + A, N = 200, X = ({ isActive: t, isShrunk: n }
   totalPages: n
 }) => {
   const s = _(t), d = t > s.current ? "forward" : "backward";
-  S(() => {
+  N(() => {
     s.current = t;
   }, [t]);
   const f = I - 2, l = d === "forward" ? f : 1, m = n - 1, r = Math.min(n, I), o = Math.max(
     0,
     Math.min(t - l, m - (r - 1))
-  ), h = r * v + (r - 1) * A, e = -o * D, c = o, u = o + r - 1, b = x(
+  ), h = r * v + (r - 1) * A, e = -o * S, c = o, u = o + r - 1, b = x(
     (a) => a === t,
     [t]
   ), M = x(
@@ -69,7 +69,7 @@ const I = 4, v = 6, A = 4, D = v + A, N = 200, X = ({ isActive: t, isShrunk: n }
               className: "flex flex-row items-center gap-4",
               style: {
                 transform: `translateX(${m}px)`,
-                transition: `transform ${N}ms ease-out`
+                transition: `transform ${D}ms ease-out`
               },
               children: h.map((e) => /* @__PURE__ */ i(
                 X,