welcome-ui 8.1.0 → 8.2.0-alpha.0

package/dist/Modal.mjs

@@ -1,32 +1,32 @@
 "use client";
 import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
-import a, { css as h, th as l, up as J, system as K, useTheme as w } from "@xstyled/styled-components";
-import F, { useState as L, useMemo as Q, Children as D, useEffect as U, cloneElement as H } from "react";
+import i, { css as x, th as a, up as G, system as J, useTheme as w } from "@xstyled/styled-components";
+import K, { useState as L, useMemo as Q, Children as D, useEffect as U, cloneElement as F } from "react";
 import { Shape as X } from "./Shape.mjs";
 import { forwardRef as c } from "./System.mjs";
 import { Box as $ } from "./Box.mjs";
-import { Text as x } from "./Text.mjs";
+import { Text as p } from "./Text.mjs";
 import { StyledSwiper as Y } from "./Swiper.mjs";
 import { Button as Z } from "./Button.mjs";
 import { IconsFont as tt } from "./IconsFont.mjs";
-import { D as S } from "./SYRFVSLH-B6m278Vb.mjs";
+import { D as H } from "./SYRFVSLH-B6m278Vb.mjs";
 import { CloseButton as et } from "./CloseButton.mjs";
-import { D as ot, u as rt } from "./JC64G2H7-afsomHuH.mjs";
-import { D as it } from "./AXB53BZF-XKOjjeWO.mjs";
-const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(100vh - 2 * 5rem);", N = h`
+import { D as ot, u as nt } from "./JC64G2H7-afsomHuH.mjs";
+import { D as rt } from "./AXB53BZF-XKOjjeWO.mjs";
+const S = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", E = "calc(100vh - 2 * 5rem);", M = x`
   width: ${W};
-  max-height: ${M};
+  max-height: ${E};
 
   @media (min-width: md) {
-    width: ${E};
+    width: ${S};
   }
 
   /* for big screens */
   @media (min-width: 1700px) {
     max-width: 1600;
   }
-`, T = a.div`
-  ${N};
+`, N = i.div`
+  ${M};
   flex: 1;
 
   @media (min-width: md) {
@@ -37,16 +37,16 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     width: 100%;
     height: 100%;
   }
-`, j = a.divBox`
+`, j = i.divBox`
   transition: margin-top 250ms ease-in-out;
 
   > img,
   > div {
     max-width: ${W};
-    max-height: ${M};
+    max-height: ${E};
 
     @media (min-width: md) {
-      max-width: ${E};
+      max-width: ${S};
     }
 
     /* for big screens */
@@ -54,8 +54,8 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
       max-width: 1600;
     }
   }
-`, nt = a.div`
-  ${l("modals.default")};
+`, st = i.div`
+  ${a("modals.default")};
   position: fixed;
   inset: 0;
   margin: auto;
@@ -67,7 +67,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   transition: opacity 250ms ease-in-out;
 
   &:has(${Y}) {
-    ${N};
+    ${M};
   }
 
   ${j} {
@@ -81,9 +81,9 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
       margin-top: 0;
     }
   }
-`, z = a(x).attrs({ lines: 2, variant: "h4" })`
+`, T = i(p).attrs({ lines: 2, variant: "h4" })`
   margin: 0;
-`, v = "4rem", b = "6rem", st = a.divBox`
+`, b = "4rem", v = "6rem", it = i.divBox`
   display: flex;
   flex-direction: column;
   border-radius: xxl;
@@ -92,24 +92,24 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   > img {
     width: auto;
     max-width: fit-content;
-    max-height: calc(100vh - 2 * 5rem - ${v});
+    max-height: calc(100vh - 2 * 5rem - ${b});
     flex-shrink: 0;
 
     @media (min-width: md) {
-      max-height: calc(100vh - 2 * 5rem - ${b});
+      max-height: calc(100vh - 2 * 5rem - ${v});
     }
   }
 
-  ${T} {
+  ${N} {
     background-color: neutral-90;
-    max-height: calc(100vh - 2 * 5rem - ${v});
+    max-height: calc(100vh - 2 * 5rem - ${b});
 
     @media (min-width: md) {
-      max-height: calc(100vh - 2 * 5rem - ${b});
+      max-height: calc(100vh - 2 * 5rem - ${v});
     }
   }
 `, at = c(
-  ({ children: t, customContent: e, subtitle: r, title: n }, d) => /* @__PURE__ */ o.jsxs(st, { ref: d, children: [
+  ({ children: t, customContent: e, subtitle: n, title: r }, l) => /* @__PURE__ */ o.jsxs(it, { ref: l, children: [
     t,
     /* @__PURE__ */ o.jsxs(
       $,
@@ -119,23 +119,23 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
         flexDirection: "column",
         flexShrink: 0,
         gap: "xxs",
-        h: { _: v, md: b },
+        h: { _: b, md: v },
         justifyContent: "center",
         px: { _: "md", md: "xl" },
         w: "100%",
         children: [
           e,
-          !e && r ? /* @__PURE__ */ o.jsx(x, { variant: "subtitle-sm", children: r }) : null,
-          !e && n ? /* @__PURE__ */ o.jsx(z, { children: n }) : null
+          !e && n ? /* @__PURE__ */ o.jsx(p, { variant: "subtitle-sm", children: n }) : null,
+          !e && r ? /* @__PURE__ */ o.jsx(T, { children: r }) : null
         ]
       }
     )
   ] })
-), I = a.divBox.withConfig({
+), z = i.divBox.withConfig({
   shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
 })(
-  ({ hideOnInteractOutside: t }) => h`
-    ${l("modals.backdrop")};
+  ({ hideOnInteractOutside: t }) => x`
+    ${a("modals.backdrop")};
     position: fixed;
     top: 0;
     right: 0;
@@ -144,7 +144,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     opacity: 0;
     transition: opacity 150ms ease-in-out;
 
-    ${t && h`
+    ${t && x`
       cursor: pointer;
     `}
 
@@ -152,10 +152,10 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
       opacity: 1;
     }
   `
-), lt = a.divBox(
-  ({ size: t }) => h`
-    ${l("cards.default")};
-    ${l("modals.default")};
+), lt = i.divBox(
+  ({ size: t }) => x`
+    ${a("cards.default")};
+    ${a("modals.default")};
     position: fixed;
     inset: 0;
     margin: auto;
@@ -179,37 +179,37 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
       margin-top: 0;
     }
 
-    ${J(
+    ${G(
     "md",
-    h`
+    x`
         height: fit-content;
-        max-height: calc(100vh - ${l("space.xl")} * 2);
-        ${l(`modals.sizes.${t}`)};
+        max-height: calc(100vh - ${a("space.xl")} * 2);
+        ${a(`modals.sizes.${t}`)};
       `
   )}
   `
-), dt = a.sectionBox`
-  ${l("modals.body")};
-`, ct = a.headerBox`
+), dt = i.sectionBox`
+  ${a("modals.body")};
+`, ct = i.headerBox`
   position: sticky;
   top: 0;
   flex-shrink: 0;
   z-index: 1;
-  ${l("modals.header")};
-`, mt = a(x)`
-  ${l(".modals.header.subtitle")};
+  ${a("modals.header")};
+`, mt = i(p)`
+  ${a(".modals.header.subtitle")};
   margin-bottom: 0;
-`, ut = a.footerBox`
+`, ut = i.footerBox`
   position: sticky;
   bottom: 0;
   flex-shrink: 0;
   z-index: 1;
-  ${l("modals.footer")};
-`, xt = a($)`
-  ${l("modals.footer.children")};
-`, ht = a.divBox`
-  ${l("modals.footer.information")};
-`, pt = a(Z)`
+  ${a("modals.footer")};
+`, pt = i($)`
+  ${a("modals.footer.children")};
+`, xt = i.divBox`
+  ${a("modals.footer.information")};
+`, ht = i(Z)`
   position: absolute;
   right: xl;
   top: xl;
@@ -223,40 +223,40 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     background-color: neutral-40;
   }
 
-  ${K}
-`, _ = c(
-  ({ hideOnInteractOutside: t, ...e }, r) => /* @__PURE__ */ o.jsx(
-    I,
+  ${J}
+`, I = c(
+  ({ hideOnInteractOutside: t, ...e }, n) => /* @__PURE__ */ o.jsx(
+    z,
     {
       backgroundColor: "rgba(0, 0, 0, 0.9)",
       hideOnInteractOutside: t,
       ...e,
-      ref: r,
+      ref: n,
       children: /* @__PURE__ */ o.jsx(
-        S,
+        H,
         {
-          render: /* @__PURE__ */ o.jsx(pt, { shape: "circle", variant: "secondary", children: /* @__PURE__ */ o.jsx(tt.Cross, {}) })
+          render: /* @__PURE__ */ o.jsx(ht, { shape: "circle", variant: "secondary", children: /* @__PURE__ */ o.jsx(tt.Cross, {}) })
         }
       )
     }
   )
 );
-_.displayName = "Backdrop";
-const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE__ */ o.jsx($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 }, children: t }) }), gt = Object.assign(nt, {
+I.displayName = "Backdrop";
+const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(N, { children: /* @__PURE__ */ o.jsx($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 }, children: t }) }), gt = Object.assign(st, {
   AssetWithTitle: at,
-  Backdrop: _,
+  Backdrop: I,
   Content: j,
   Iframe: ft,
-  Title: z
-}), A = ({ isOnHeader: t, ...e }) => {
-  const r = w();
+  Title: T
+}), _ = ({ isOnHeader: t, ...e }) => {
+  const n = w();
   return /* @__PURE__ */ o.jsx(
-    S,
+    H,
     {
       render: /* @__PURE__ */ o.jsx(
         et,
         {
-          left: t ? void 0 : `calc(100% - ${r.space.lg} - ${r.buttons.sizes.sm.height})`,
+          left: t ? void 0 : `calc(100% - ${n.space.lg} - ${n.buttons.sizes.sm.height})`,
           position: t ? "absolute" : "sticky",
           right: t ? "lg" : void 0,
           top: "lg",
@@ -266,97 +266,93 @@ const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE_
       )
     }
   );
-}, O = c(
-  ({ children: t, store: e, withClosingButton: r = !0, ...n }, d) => {
-    const { borderWidths: u, space: m } = w(), [y, p] = L(!1), f = e.useState("contentElement"), B = e.useState("open"), i = Q(
+}, A = c(
+  ({ children: t, store: e, withClosingButton: n = !0, ...r }, l) => {
+    const { borderWidths: u, space: m } = w(), [y, h] = L(!1), f = e.useState("contentElement"), B = e.useState("open"), d = Q(
       () => D.map(t, (s) => {
-        if (F.isValidElement(s)) {
+        if (K.isValidElement(s)) {
           const g = s.type;
           return g.displayName ?? g.name ?? "";
         }
         return "";
       }),
       [t]
-    ), q = !(i != null && i.includes("Header")) && r, G = (s) => s === "Header" ? {
+    ), V = !d.includes("Header") && n, q = (s) => s === "Header" ? {
       // if the Modal have a Body but not a Footer || have a Footer but not a Body
-      pb: i != null && i.includes("Body") && !i.includes("Footer") || i != null && i.includes("Footer") && !i.includes("Body") ? m.lg : m.xxl
+      pb: d.includes("Body") && !d.includes("Footer") || d.includes("Footer") && !d.includes("Body") ? m.lg : m.xxl
     } : s === "Body" ? {
-      pb: i != null && i.includes("Footer") ? m.lg : null,
-      pr: i != null && i.includes("Header") ? m.xxl : null
+      pb: d.includes("Footer") ? m.lg : null,
+      pr: d.includes("Header") ? m.xxl : null
     } : s === "Footer" ? {
       borderWidth: y ? u.sm : "0",
-      pt: i != null && i.includes("Header") || i != null && i.includes("Body") ? null : m.lg
+      pt: d.includes("Header") || d.includes("Body") ? null : m.lg
     } : {};
     return U(() => {
-      B ? f && p(f.scrollHeight > f.offsetHeight) : p(!1);
-    }, [e, B, f]), /* @__PURE__ */ o.jsxs($, { ref: d, ...n, children: [
-      q ? /* @__PURE__ */ o.jsx(A, {}) : null,
+      B ? f && h(f.scrollHeight > f.offsetHeight) : h(!1);
+    }, [e, B, f]), /* @__PURE__ */ o.jsxs($, { ref: l, ...r, children: [
+      V ? /* @__PURE__ */ o.jsx(_, {}) : null,
       D.map(t, (s) => {
         var k, C;
         if (!s) return null;
         const g = ((k = s == null ? void 0 : s.type) == null ? void 0 : k.displayName) || ((C = s == null ? void 0 : s.type) == null ? void 0 : C.name);
-        return H(s, {
-          ...G(g),
+        return F(s, {
+          ...q(g),
           ...s.props
         });
       })
     ] });
   }
 );
-O.displayName = "Content";
-const R = c(({ children: t, information: e, ...r }, n) => /* @__PURE__ */ o.jsxs(ut, { ref: n, w: "100%", ...r, children: [
-  t ? /* @__PURE__ */ o.jsx(xt, { children: t }) : null,
-  e ? /* @__PURE__ */ o.jsxs(ht, { children: [
-    /* @__PURE__ */ o.jsx(x, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm", children: e.title }),
-    /* @__PURE__ */ o.jsx(x, { color: "neutral-90", mb: "0", mt: "md", variant: "sm", children: e.subtitle })
+A.displayName = "Content";
+const O = c(({ children: t, information: e, ...n }, r) => /* @__PURE__ */ o.jsxs(ut, { ref: r, w: "100%", ...n, children: [
+  t ? /* @__PURE__ */ o.jsx(pt, { children: t }) : null,
+  e ? /* @__PURE__ */ o.jsxs(xt, { children: [
+    /* @__PURE__ */ o.jsx(p, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm", children: e.title }),
+    /* @__PURE__ */ o.jsx(p, { color: "neutral-90", mb: "0", mt: "md", variant: "sm", children: e.subtitle })
   ] }) : null
 ] }));
-R.displayName = "Footer";
-const V = c(({ icon: t, subtitle: e, title: r, ...n }, d) => /* @__PURE__ */ o.jsxs(ct, { ref: d, textAlign: t ? "center" : null, w: "100%", ...n, children: [
-  /* @__PURE__ */ o.jsx(A, { isOnHeader: !0 }),
+O.displayName = "Footer";
+const R = c(({ icon: t, subtitle: e, title: n, ...r }, l) => /* @__PURE__ */ o.jsxs(ct, { ref: l, textAlign: t ? "center" : null, w: "100%", ...r, children: [
+  /* @__PURE__ */ o.jsx(_, { isOnHeader: !0 }),
   t,
-  /* @__PURE__ */ o.jsx(x, { mb: e ? "lg" : 0, mt: t ? "xl" : 0, variant: "h4", children: r }),
+  /* @__PURE__ */ o.jsx(p, { mb: e ? "lg" : 0, mt: t ? "xl" : 0, variant: "h4", children: n }),
   e ? /* @__PURE__ */ o.jsx(mt, { children: e }) : null
 ] }));
-V.displayName = "Header";
+R.displayName = "Header";
 function zt(t) {
-  const { onClose: e, setOpen: r, ...n } = t || {};
-  return rt({
+  const { onClose: e, setOpen: n, ...r } = t || {};
+  return nt({
     animated: !0,
     setOpen: (u) => {
-      !u && e && e(), r == null || r(u);
+      !u && e && e(), n == null || n(u);
     },
-    ...n
+    ...r
   });
 }
 const $t = c(
-  ({ backdrop: t, hideOnInteractOutside: e, ...r }, n) => t === !0 ? /* @__PURE__ */ o.jsx(I, { hideOnInteractOutside: e, ref: n, ...r }) : F.isValidElement(t) ? H(t, {
-    hideOnInteractOutside: e,
-    ref: n,
-    ...r
-  }) : null
+  ({ backdrop: t, hideOnInteractOutside: e, ...n }, r) => t === !0 ? /* @__PURE__ */ o.jsx(z, { hideOnInteractOutside: e, ref: r, ...n }) : F(t, { hideOnInteractOutside: e, ref: r, ...n })
 ), yt = c(
   ({
     ariaLabel: t,
     /** for render property */
     as: e = lt,
-    backdrop: r = !0,
-    children: n,
-    hideOnInteractOutside: d = !0,
+    backdrop: n = !0,
+    children: r,
+    hideOnInteractOutside: l = !0,
     size: u = "lg",
     store: m,
     ...y
-  }, p) => /* @__PURE__ */ o.jsx(
+  }, h) => /* @__PURE__ */ o.jsx(
     ot,
     {
       "aria-label": t,
-      backdrop: !!r && /* @__PURE__ */ o.jsx($t, { backdrop: r, hideOnInteractOutside: d }),
-      hideOnInteractOutside: d,
-      ref: p,
+      backdrop: n ? /* @__PURE__ */ o.jsx($t, { backdrop: n, hideOnInteractOutside: l }) : null,
+      hideOnInteractOutside: l,
+      ref: h,
       render: /* @__PURE__ */ o.jsx(e, { size: u }),
       store: m,
       ...y,
-      children: n
+      children: r
     }
   )
 ), P = c((t, e) => /* @__PURE__ */ o.jsx(dt, { ref: e, ...t }));
@@ -364,21 +360,21 @@ P.displayName = "Body";
 const jt = (t) => {
   const { modals: e } = w();
   return /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(X, { ...e.cover, ...t }) });
-}, vt = c(({ as: t, store: e, ...r }, n) => /* @__PURE__ */ o.jsx(
-  it,
+}, bt = c(({ as: t, store: e, ...n }, r) => /* @__PURE__ */ o.jsx(
+  rt,
   {
-    ref: n,
-    render: t ? (d) => /* @__PURE__ */ o.jsx(t, { ...d }) : void 0,
+    ref: r,
+    render: t ? (l) => /* @__PURE__ */ o.jsx(t, { ...l }) : void 0,
     store: e,
-    ...r
+    ...n
   }
 )), It = Object.assign(yt, {
   Body: P,
-  Content: O,
+  Content: A,
   Cover: jt,
-  Footer: R,
-  Header: V,
-  Trigger: vt
+  Footer: O,
+  Header: R,
+  Trigger: bt
 }), _t = gt;
 export {
   _t as AssetModal,

package/dist/Pagination.mjs

@@ -57,53 +57,55 @@ const S = d.navBox``, q = d.ulBox`
     ${n["aria-current"] && h("paginations.active")}
   `
 ), f = 5, O = 3;
-function Q({ page: n, pageCount: t, rangeDisplay: i }) {
+function Q({ page: n, pageCount: t, rangeDisplay: r }) {
   return z(() => {
-    if (t <= i || t <= f + 1)
+    if (t <= r || t <= f + 1)
       return x(t, (l) => l + 1);
-    const e = U(n, t), c = e === "before" ? x(f, (l) => l + 1) : [1], r = e === "center" ? x(O, (l) => l + n - 1) : [], u = e === "after" ? x(f, (l) => l + t - f + 1) : [t];
-    return V([c, r, u], "-");
-  }, [n, t, i]);
+    const e = U(n, t), c = e === "before" ? x(f, (l) => l + 1) : [1], i = e === "center" ? x(O, (l) => l + n - 1) : [], u = e === "after" ? x(f, (l) => l + t - f + 1) : [t];
+    return V([c, i, u], "-");
+  }, [n, t, r]);
 }
 function x(n, t) {
-  return Array.from({ length: n }, (i, e) => t(e));
+  return Array.from({ length: n }, (r, e) => t(e));
 }
 function U(n, t) {
-  return n < f ? "before" : n >= f && n <= t - f + 1 ? "center" : n > t - f + 1 ? "after" : null;
+  if (n < f) return "before";
+  if (n >= f && n <= t - f + 1) return "center";
+  if (n > t - f + 1) return "after";
 }
 function V(n, t) {
-  return n.reduce((i, e, c) => {
-    const r = [];
-    return r.push(...i), r.push(...e), e.length && c < n.length - 1 && r.push(t), r;
+  return n.reduce((r, e, c) => {
+    const i = [];
+    return i.push(...r), i.push(...e), e.length && c < n.length - 1 && i.push(t), i;
   }, []);
 }
 const g = F(
   ({
     "aria-label": n,
     dataTestId: t,
-    getHref: i,
+    getHref: r,
     leftArrow: e,
     onChange: c,
-    page: r,
+    page: i,
     pageCount: u,
     rangeDisplay: l = 5,
     rightArrow: A,
     ...D
   }, L) => {
-    const w = Q({ page: r, pageCount: u, rangeDisplay: l }), j = k(null), v = k(null), $ = r === 1, R = r === u, E = p(
+    const w = Q({ page: i, pageCount: u, rangeDisplay: l }), $ = k(null), R = k(null), j = i === 1, v = i === u, E = p(
       (s) => {
         s.preventDefault();
-        const a = r - 1;
-        a === 1 && j.current && j.current.focus(), c(a);
+        const a = i - 1;
+        a === 1 && $.current.focus(), c(a);
       },
-      [r, c]
+      [i, c]
     ), N = p(
       (s) => {
         s.preventDefault();
-        const a = r + 1;
-        a === u && v.current && v.current.focus(), c(a);
+        const a = i + 1;
+        a === u && R.current.focus(), c(a);
       },
-      [r, u, c]
+      [i, u, c]
     );
     return /* @__PURE__ */ o.jsx(
       S,
@@ -117,11 +119,11 @@ const g = F(
           /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(
             y,
             {
-              "aria-disabled": $,
+              "aria-disabled": j,
               "data-testid": t ? `${t}-arrow-prev` : void 0,
-              href: i ? i($ ? r : r - 1) : "",
-              onClick: $ ? void 0 : E,
-              ref: j,
+              href: r ? r(j ? i : i - 1) : "",
+              onClick: j ? void 0 : E,
+              ref: $,
               children: e || /* @__PURE__ */ o.jsx(G, { size: "sm" })
             }
           ) }),
@@ -129,9 +131,9 @@ const g = F(
             (s, a) => s === "-" ? /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(J, { children: "..." }) }, `${a}-`) : /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(
               K,
               {
-                "aria-current": s === r,
+                "aria-current": s === i,
                 "data-testid": t ? `${t}-${s}` : void 0,
-                href: i ? i(s) : "",
+                href: r ? r(s) : "",
                 onClick: (P) => {
                   P.preventDefault(), c(s);
                 },
@@ -142,11 +144,11 @@ const g = F(
           /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(
             y,
             {
-              "aria-disabled": R,
+              "aria-disabled": v,
               "data-testid": t ? `${t}-arrow-next` : void 0,
-              href: i ? i(R ? r : r + 1) : "",
-              onClick: R ? void 0 : N,
-              ref: v,
+              href: r ? r(v ? i : i + 1) : "",
+              onClick: v ? void 0 : N,
+              ref: R,
               children: A || /* @__PURE__ */ o.jsx(_, { size: "sm" })
             }
           ) })

package/dist/PasswordInput.mjs

@@ -3,31 +3,31 @@ import { j as t } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { useState as c } from "react";
 import { InputText as m } from "./InputText.mjs";
 import { forwardRef as x } from "./System.mjs";
-import { Button as d } from "./Button.mjs";
+import { Button as l } from "./Button.mjs";
 import "./Icon.mjs";
-import { S as l, H as u } from "./index-wl3X6EM1.mjs";
+import { S as d, H as u } from "./index-wl3X6EM1.mjs";
 const f = ({
   dataTestId: o,
   isHidden: s,
   onClick: r,
   title: e
 }) => /* @__PURE__ */ t.jsx(
-  d,
+  l,
   {
     "aria-controls": "password",
     "aria-expanded": `${!s}`,
-    dataTestId: o ? `${o}-action` : void 0,
+    dataTestId: o ? `${o}-action` : null,
     onClick: r,
     shape: "circle",
     size: "xs",
     title: e,
     variant: "ghost",
-    children: s ? /* @__PURE__ */ t.jsx(l, {}) : /* @__PURE__ */ t.jsx(u, {})
+    children: s ? /* @__PURE__ */ t.jsx(d, {}) : /* @__PURE__ */ t.jsx(u, {})
   }
 ), w = x(
   ({ dataTestId: o, title: s, ...r }, e) => {
-    const [n, p] = c("password"), i = n === "password", a = () => {
-      p(i ? "text" : "password");
+    const [n, a] = c("password"), p = n === "password", i = () => {
+      a(p ? "text" : "password");
     };
     return /* @__PURE__ */ t.jsx(
       m,
@@ -38,8 +38,8 @@ const f = ({
           f,
           {
             dataTestId: o,
-            isHidden: i,
-            onClick: a,
+            isHidden: p,
+            onClick: i,
             title: s
           }
         ),