welcome-ui 8.1.3 → 8.2.0-alpha.1

package/dist/Stack.mjs

@@ -1,32 +1,33 @@
 "use client";
-import t, { Children as p, isValidElement as u } from "react";
-import { Box as r } from "./Box.mjs";
+import { j as i } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { Children as f, isValidElement as x } from "react";
+import { Box as t } from "./Box.mjs";
 import { forwardRef as h } from "./System.mjs";
-const y = h(
-  ({ as: e = "div", children: i, dataTestId: l, direction: a = "column", spacing: o = "md", ...c }, d) => {
-    const m = p.toArray(i).filter(u);
-    return /* @__PURE__ */ t.createElement(
-      r,
+const u = h(
+  ({ as: r = "div", children: e, dataTestId: o, direction: l = "column", spacing: d = "md", ...s }, a) => {
+    const c = f.toArray(e).filter(x);
+    return /* @__PURE__ */ i.jsx(
+      t,
       {
-        as: e,
-        "data-testid": l,
+        as: r,
+        "data-testid": o,
         display: "flex",
-        flexDirection: a,
-        gap: o,
-        ref: d,
-        ...c
-      },
-      m.map((n, s) => {
-        const f = {
-          as: e === "ol" || e === "ul" ? "li" : "div",
-          key: `stack-item-${s}`
-        };
-        return /* @__PURE__ */ t.createElement(r, { ...f }, n);
-      })
+        flexDirection: l,
+        gap: d,
+        ref: a,
+        ...s,
+        children: c.map((m, n) => {
+          const p = {
+            as: r === "ol" || r === "ul" ? "li" : "div",
+            key: `stack-item-${n}`
+          };
+          return /* @__PURE__ */ i.jsx(t, { ...p, children: m });
+        })
+      }
     );
   }
 );
-y.displayName = "Stack";
+u.displayName = "Stack";
 export {
-  y as Stack
+  u as Stack
 };

package/dist/Swiper.mjs

@@ -1,59 +1,60 @@
 "use client";
-import C, { useRef as lt, useEffect as X, useState as tt, useMemo as ut, Children as it, cloneElement as ft, useCallback as Q } from "react";
-import { c as Y, g as ht } from "./_commonjsHelpers-CXJ7dpIk.mjs";
-import B, { system as ct, css as P, th as rt, useTheme as gt } from "@xstyled/styled-components";
-import { u as mt } from "./use-viewport-CfklieD-.mjs";
-import { Button as pt } from "./Button.mjs";
+import { j as T } from "./jsx-runtime-B7I4PJ0H.mjs";
+import B, { system as lt, css as j, th as it, useTheme as ut } from "@xstyled/styled-components";
+import { c as Q, g as ft } from "./_commonjsHelpers-CXJ7dpIk.mjs";
+import { useRef as ct, useEffect as X, useState as tt, useMemo as ht, Children as rt, cloneElement as gt, useCallback as Y } from "react";
 import { IconsFont as ot } from "./IconsFont.mjs";
+import { u as mt } from "./use-viewport-CWpjoHXy.mjs";
+import { Button as pt } from "./Button.mjs";
 var et, st;
 function wt() {
   if (st) return et;
   st = 1;
-  var i = "Expected a function", e = NaN, a = "[object Symbol]", f = /^\s+|\s+$/g, s = /^[-+]0x[0-9a-f]+$/i, d = /^0b[01]+$/i, g = /^0o[0-7]+$/i, S = parseInt, D = typeof Y == "object" && Y && Y.Object === Object && Y, L = typeof self == "object" && self && self.Object === Object && self, V = D || L || Function("return this")(), N = Object.prototype, z = N.toString, h = Math.max, H = Math.min, $ = function() {
+  var i = "Expected a function", e = NaN, a = "[object Symbol]", f = /^\s+|\s+$/g, s = /^[-+]0x[0-9a-f]+$/i, d = /^0b[01]+$/i, g = /^0o[0-7]+$/i, x = parseInt, D = typeof Q == "object" && Q && Q.Object === Object && Q, P = typeof self == "object" && self && self.Object === Object && self, V = D || P || Function("return this")(), N = Object.prototype, z = N.toString, h = Math.max, H = Math.min, $ = function() {
     return V.Date.now();
   };
-  function T(t, r, u) {
-    var R, A, W, m, p, x, O = 0, J = !1, j = !1, G = !0;
+  function E(t, r, u) {
+    var L, A, W, m, p, S, O = 0, J = !1, C = !1, G = !0;
     if (typeof t != "function")
       throw new TypeError(i);
-    r = M(r) || 0, y(u) && (J = !!u.leading, j = "maxWait" in u, W = j ? h(M(u.maxWait) || 0, r) : W, G = "trailing" in u ? !!u.trailing : G);
+    r = M(r) || 0, y(u) && (J = !!u.leading, C = "maxWait" in u, W = C ? h(M(u.maxWait) || 0, r) : W, G = "trailing" in u ? !!u.trailing : G);
     function K(n) {
-      var b = R, I = A;
-      return R = A = void 0, O = n, m = t.apply(I, b), m;
+      var b = L, I = A;
+      return L = A = void 0, O = n, m = t.apply(I, b), m;
     }
-    function E(n) {
+    function R(n) {
       return O = n, p = setTimeout(l, r), J ? K(n) : m;
     }
-    function _(n) {
-      var b = n - x, I = n - O, Z = r - b;
-      return j ? H(Z, W - I) : Z;
-    }
     function F(n) {
-      var b = n - x, I = n - O;
-      return x === void 0 || b >= r || b < 0 || j && I >= W;
+      var b = n - S, I = n - O, Z = r - b;
+      return C ? H(Z, W - I) : Z;
+    }
+    function _(n) {
+      var b = n - S, I = n - O;
+      return S === void 0 || b >= r || b < 0 || C && I >= W;
     }
     function l() {
       var n = $();
-      if (F(n))
+      if (_(n))
         return o(n);
-      p = setTimeout(l, _(n));
+      p = setTimeout(l, F(n));
     }
     function o(n) {
-      return p = void 0, G && R ? K(n) : (R = A = void 0, m);
+      return p = void 0, G && L ? K(n) : (L = A = void 0, m);
     }
     function c() {
-      p !== void 0 && clearTimeout(p), O = 0, R = x = A = p = void 0;
+      p !== void 0 && clearTimeout(p), O = 0, L = S = A = p = void 0;
     }
     function w() {
       return p === void 0 ? m : o($());
     }
     function v() {
-      var n = $(), b = F(n);
-      if (R = arguments, A = this, x = n, b) {
+      var n = $(), b = _(n);
+      if (L = arguments, A = this, S = n, b) {
         if (p === void 0)
-          return E(x);
-        if (j)
-          return p = setTimeout(l, r), K(x);
+          return R(S);
+        if (C)
+          return p = setTimeout(l, r), K(S);
       }
       return p === void 0 && (p = setTimeout(l, r)), m;
     }
@@ -82,25 +83,12 @@ function wt() {
       return t === 0 ? t : +t;
     t = t.replace(f, "");
     var u = d.test(t);
-    return u || g.test(t) ? S(t.slice(2), u ? 2 : 8) : s.test(t) ? e : +t;
+    return u || g.test(t) ? x(t.slice(2), u ? 2 : 8) : s.test(t) ? e : +t;
   }
-  return et = T, et;
+  return et = E, et;
 }
 var bt = wt();
-const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
-  const a = lt();
-  X(() => {
-    a.current = i;
-  }, [i]), X(() => {
-    function f() {
-      a.current();
-    }
-    if (e !== null) {
-      const s = setInterval(f, e);
-      return () => clearInterval(s);
-    }
-  }, [e]);
-}, k = (i = 3, e, a) => {
+const $t = /* @__PURE__ */ ft(bt), k = (i = 3, e, a) => {
   if (e === 0)
     return `${100 / i}%`;
   const s = a(e * (i === 1 ? 4 : 2));
@@ -111,15 +99,15 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
   width: 100%;
   height: 100%;
 
-  ${ct}
+  ${lt}
 `, at = B(pt)(
-  ({ disabled: i, withDarkUI: e, withNavigation: { desktop: a, mobile: f } }) => P`
+  ({ disabled: i, withDarkUI: e, withNavigation: { desktop: a, mobile: f } }) => j`
     top: 50%;
     transform: translate3d(0, -50%, 0);
     z-index: ${f ? 1 : -1};
     display: ${f ? "flex" : "none"};
 
-    ${!e && P`
+    ${!e && j`
       background-color: neutral-10 !important;
 
       &:hover {
@@ -132,13 +120,13 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
       display: ${a ? "flex" : "none"};
     }
 
-    ${i && P`
+    ${i && j`
       opacity: 0;
       z-index: -1;
     `};
   `
-), vt = B.divBox(
-  ({ withPagination: { desktop: i, mobile: e } }) => P`
+), yt = B.divBox(
+  ({ withPagination: { desktop: i, mobile: e } }) => j`
     justify-content: center;
     position: absolute;
     bottom: 0;
@@ -153,20 +141,20 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
       display: ${i ? "flex" : "none"};
     }
   `
-), St = B.div(
-  ({ active: i, withDarkUI: e }) => P`
+), vt = B.div(
+  ({ active: i, withDarkUI: e }) => j`
     height: 10;
     width: 10;
     border-radius: 50%;
     cursor: pointer;
     margin: 0 xxs;
-    ${i ? rt("swipers.navigation.bullet.active") : rt("swipers.navigation.bullet.default")}
-    ${e && P`
+    ${i ? it("swipers.navigation.bullet.active") : it("swipers.navigation.bullet.default")}
+    ${e && j`
       background-color: ${i ? "neutral-90" : "neutral-50"};
     `}
-    ${ct}
+    ${lt}
   `
-), xt = B.ulBox(({ fullWidth: i, slidesPerView: { desktop: e, mobile: a, tablet: f }, spaceBetween: s, theme: d }) => P`
+), xt = B.ulBox(({ fullWidth: i, slidesPerView: { desktop: e, mobile: a, tablet: f }, spaceBetween: s, theme: d }) => j`
     scroll-snap-type: x mandatory;
     display: flex;
     -webkit-overflow-scrolling: touch;
@@ -199,7 +187,7 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
     }
 
     @media (min-width: sm) {
-      ${a && P`
+      ${a && j`
         > * {
           min-width: ${k(a, s, d.toRem)};
           max-width: ${k(a, s, d.toRem)};
@@ -212,7 +200,7 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
     }
 
     @media (min-width: md) {
-      ${f && P`
+      ${f && j`
         > * {
           min-width: ${k(f, s, d.toRem)};
           max-width: ${k(f, s, d.toRem)};
@@ -225,7 +213,7 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
     }
 
     @media (min-width: lg) {
-      ${e && P`
+      ${e && j`
         > * {
           min-width: ${k(e, s, d.toRem)};
           max-width: ${k(e, s, d.toRem)};
@@ -244,14 +232,27 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
     }
 
     @media (min-width: xl) {
-      ${e && i && P`
+      ${e && i && j`
         > * {
           min-width: ${k(e + 2, s, d.toRem)};
           max-width: ${k(e + 2, s, d.toRem)};
         }
       `}
     }
-  `), Ct = (i = {}) => {
+  `), St = (i, e) => {
+  const a = ct();
+  X(() => {
+    a.current = i;
+  }, [i]), X(() => {
+    function f() {
+      a.current();
+    }
+    if (e !== null) {
+      const s = setInterval(f, e);
+      return () => clearInterval(s);
+    }
+  }, [e]);
+}, Et = (i = {}) => {
   const {
     autoplay: e = !1,
     centeredSlides: a = !1,
@@ -259,52 +260,52 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
     firstSlideToShow: s = 0,
     fullWidth: d = !1,
     id: g = "swiper",
-    loop: S = !1,
+    loop: x = !1,
     navigationSize: D = "md",
-    slidesPerView: L = { mobile: 1, tablet: 1, desktop: 1 },
+    slidesPerView: P = { desktop: 1, mobile: 1, tablet: 1 },
     spaceBetween: V = 20,
     withDarkUI: N = !1,
-    withNavigation: z = { mobile: !0, desktop: !0 },
-    withPagination: h = { mobile: !1, desktop: !1 }
-  } = i, H = S || e, { width: $ } = mt(), [T, y] = tt(0), [U, q] = tt(!1), [M, t] = tt(!1), r = lt(), { screens: u } = gt(), R = ut(() => $ <= u.md ? L.mobile : $ <= u.lg ? L.tablet : $ >= u["4xl"] && d ? L.desktop + 2 : L.desktop, [d, $, u, L]);
+    withNavigation: z = { desktop: !0, mobile: !0 },
+    withPagination: h = { desktop: !1, mobile: !1 }
+  } = i, H = x || e, { width: $ } = mt(), [E, y] = tt(0), [U, q] = tt(!1), [M, t] = tt(!1), r = ct(), { screens: u } = ut(), L = ht(() => $ <= u.md ? P.mobile : $ <= u.lg ? P.tablet : $ >= u["4xl"] && d ? P.desktop + 2 : P.desktop, [d, $, u, P]);
   return {
+    autoplay: e,
     centeredSlides: a,
+    currentPage: E,
+    currentSlidesPerView: L,
+    duration: f,
     firstSlideToShow: s,
-    currentSlidesPerView: R,
-    currentPage: T,
-    setCurrentPage: y,
     fullWidth: d,
     id: g,
     navigationSize: D,
-    slidesPerView: L,
-    spaceBetween: V,
-    withNavigation: z,
-    withPagination: h,
-    autoplay: e,
-    shouldLoop: H,
-    duration: f,
-    withDarkUI: N,
     ref: r,
+    setCurrentPage: y,
     setShowLeftArrow: q,
     setShowRightArrow: t,
+    shouldLoop: H,
     showLeftArrow: U,
-    showRightArrow: M
+    showRightArrow: M,
+    slidesPerView: P,
+    spaceBetween: V,
+    withDarkUI: N,
+    withNavigation: z,
+    withPagination: h
   };
-}, Pt = ({ children: i, dataTestId: e, store: a, ...f }) => {
+}, jt = ({ children: i, dataTestId: e, store: a, ...f }) => {
   const {
     autoplay: s,
     centeredSlides: d,
     currentPage: g,
-    currentSlidesPerView: S,
+    currentSlidesPerView: x,
     duration: D,
-    firstSlideToShow: L,
+    firstSlideToShow: P,
     fullWidth: V,
     id: N,
     navigationSize: z,
     ref: h,
     setCurrentPage: H,
     setShowLeftArrow: $,
-    setShowRightArrow: T,
+    setShowRightArrow: E,
     shouldLoop: y,
     showLeftArrow: U,
     showRightArrow: q,
@@ -312,145 +313,150 @@ const $t = /* @__PURE__ */ ht(bt), yt = (i, e) => {
     spaceBetween: t,
     withDarkUI: r,
     withNavigation: u,
-    withPagination: R
-  } = a, A = it.toArray(i).length, W = Math.ceil(A / S), m = Array.from(Array(W).keys()), p = g === 0, x = g === m.length - 1, O = it.map(i, (l, o) => {
-    const c = `${N}-${o}`, w = o + 1, v = Math.ceil(w / S) - 1, n = x ? A - w >= S : v !== g;
-    return ft(l, {
+    withPagination: L
+  } = a, A = rt.toArray(i).length, W = Math.ceil(A / x), m = Array.from(Array(W).keys()), p = g === 0, S = g === m.length - 1, O = rt.map(i, (l, o) => {
+    const c = `${N}-${o}`, w = o + 1, v = Math.ceil(w / x) - 1, n = S ? A - w >= x : v !== g;
+    return gt(l, {
       ...l.props,
-      id: c,
-      key: c,
       "aria-hidden": n,
+      "aria-label": `${w} of ${A}`,
       "aria-roledescription": "slide",
-      "aria-label": `${w} of ${A}`
+      id: c,
+      key: c
     });
   }), J = d ? (
     // if centeredSlides is true, we calculate which number is the middle page
     Math.floor(W / 2)
   ) : (
     // if centeredSlides is false, we calculate on which page the number in firstSlideToShow props is
-    Math.ceil(L / S) - 1
-  ), j = Q(() => {
+    Math.ceil(P / x) - 1
+  ), C = Y(() => {
     const l = h == null ? void 0 : h.current;
     if (l && !y) {
       const { offsetWidth: o, scrollLeft: c, scrollWidth: w } = l, v = !(c > t), n = !(w - (c + o) > t);
-      $(!v), T(!n);
+      $(!v), E(!n);
     } else
-      $(!0), T(!0);
-  }, [h, $, T, y, t]), G = () => {
+      $(!0), E(!0);
+  }, [h, $, E, y, t]), G = () => {
     var o, c;
     const l = h == null ? void 0 : h.current;
     if (l) {
-      const { children: w, offsetWidth: v, scrollLeft: n, scrollWidth: b } = l, I = (c = (o = w == null ? void 0 : w[0]) == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : c.width, nt = !(b - (n + v) > t) ? m.length - 1 : Math.round(n / ((I + t) * S));
+      const { children: w, offsetWidth: v, scrollLeft: n, scrollWidth: b } = l, I = (c = (o = w == null ? void 0 : w[0]) == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : c.width, nt = !(b - (n + v) > t) ? m.length - 1 : Math.round(n / ((I + t) * x));
       nt !== g && H(nt);
     }
   }, K = $t(() => {
-    j(), G();
-  }, 100), E = Q(
+    C(), G();
+  }, 100), R = Y(
     (l, o = !1) => {
       var v, n, b;
       const c = h == null ? void 0 : h.current, w = (b = (n = (v = c == null ? void 0 : c.children) == null ? void 0 : v[0]) == null ? void 0 : n.getBoundingClientRect()) == null ? void 0 : b.width;
       c == null || c.scrollTo({
-        left: l * (w + t) * S,
-        top: 0,
         // We don't want to have a scroll effect when we first render the swiper
-        behavior: o ? "auto" : "smooth"
+        behavior: o ? "auto" : "smooth",
+        left: l * (w + t) * x,
+        top: 0
       });
     },
-    [S, t, h]
-  ), _ = Q(() => {
-    E(y && x ? 0 : g + 1);
-  }, [g, E, x, y]), F = Q(() => {
-    E(p && y ? m.length - 1 : g - 1);
-  }, [m.length, g, E, p, y]);
-  return yt(
+    [x, t, h]
+  ), F = Y(() => {
+    R(y && S ? 0 : g + 1);
+  }, [g, R, S, y]), _ = Y(() => {
+    R(p && y ? m.length - 1 : g - 1);
+  }, [m.length, g, R, p, y]);
+  return St(
     () => {
-      s && _();
+      s && F();
     },
     s ? D : null
   ), X(() => {
     const l = (o) => {
-      o.code === "ArrowLeft" && F(), o.code === "ArrowRight" && _();
+      o.code === "ArrowLeft" && _(), o.code === "ArrowRight" && F();
     };
     return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
-  }, [F, _]), X(() => {
-    E(J, !0);
+  }, [_, F]), X(() => {
+    R(J, !0);
   }, []), X(() => {
-    j();
-  }, [j, i]), /* @__PURE__ */ C.createElement(dt, { "data-testid": e, ...f }, /* @__PURE__ */ C.createElement(
-    xt,
-    {
-      fullWidth: V,
-      onScroll: K,
-      ref: h,
-      slidesPerView: M,
-      spaceBetween: t
-    },
-    O
-  ), /* @__PURE__ */ C.createElement(
-    at,
-    {
-      "aria-label": "Previous slide",
-      "data-testid": e && `${e}-prev-button`,
-      disabled: !U,
-      left: 10,
-      onClick: F,
-      position: "absolute",
-      shape: "circle",
-      size: z,
-      variant: r ? "secondary" : "ghost",
-      withDarkUI: r,
-      withNavigation: u
-    },
-    /* @__PURE__ */ C.createElement(ot.Left, null)
-  ), /* @__PURE__ */ C.createElement(
-    at,
-    {
-      "aria-label": "Next slide",
-      "data-testid": e && `${e}-next-button`,
-      disabled: !q,
-      onClick: _,
-      position: "absolute",
-      right: 10,
-      shape: "circle",
-      size: z,
-      variant: r ? "secondary" : "ghost",
-      withDarkUI: r,
-      withNavigation: u
-    },
-    /* @__PURE__ */ C.createElement(ot.Right, null)
-  ), /* @__PURE__ */ C.createElement(
-    vt,
-    {
-      className: "swiper-pagination",
-      "data-testid": e && `${e}-pagination`,
-      role: "tablist",
-      withPagination: R
-    },
-    m.length > 1 && m.map((l, o) => {
-      const c = {
-        idx: o,
-        role: "tab",
-        "aria-controls": `${N}-${o}`,
-        "aria-label": `${o + 1} of ${m.length}`,
-        "aria-selected": o === g,
-        onClick: () => E(o)
-      };
-      return /* @__PURE__ */ C.createElement(
-        St,
-        {
-          active: o === g,
-          key: `bullet-${o + 1}`,
-          withDarkUI: r,
-          ...c
-        }
-      );
-    })
-  ));
+    C();
+  }, [C, i]), /* @__PURE__ */ T.jsxs(dt, { "data-testid": e, ...f, children: [
+    /* @__PURE__ */ T.jsx(
+      xt,
+      {
+        fullWidth: V,
+        onScroll: K,
+        ref: h,
+        slidesPerView: M,
+        spaceBetween: t,
+        children: O
+      }
+    ),
+    /* @__PURE__ */ T.jsx(
+      at,
+      {
+        "aria-label": "Previous slide",
+        "data-testid": e ? `${e}-prev-button` : null,
+        disabled: !U,
+        left: 10,
+        onClick: _,
+        position: "absolute",
+        shape: "circle",
+        size: z,
+        variant: r ? "secondary" : "ghost",
+        withDarkUI: r,
+        withNavigation: u,
+        children: /* @__PURE__ */ T.jsx(ot.Left, {})
+      }
+    ),
+    /* @__PURE__ */ T.jsx(
+      at,
+      {
+        "aria-label": "Next slide",
+        "data-testid": e ? `${e}-next-button` : null,
+        disabled: !q,
+        onClick: F,
+        position: "absolute",
+        right: 10,
+        shape: "circle",
+        size: z,
+        variant: r ? "secondary" : "ghost",
+        withDarkUI: r,
+        withNavigation: u,
+        children: /* @__PURE__ */ T.jsx(ot.Right, {})
+      }
+    ),
+    /* @__PURE__ */ T.jsx(
+      yt,
+      {
+        className: "swiper-pagination",
+        "data-testid": e ? `${e}-pagination` : null,
+        role: "tablist",
+        withPagination: L,
+        children: m.length > 1 && m.map((l, o) => {
+          const c = {
+            "aria-controls": `${N}-${o}`,
+            "aria-label": `${o + 1} of ${m.length}`,
+            "aria-selected": o === g,
+            idx: o,
+            onClick: () => R(o),
+            role: "tab"
+          };
+          return /* @__PURE__ */ T.jsx(
+            vt,
+            {
+              active: o === g,
+              withDarkUI: r,
+              ...c
+            },
+            `bullet-${o + 1}`
+          );
+        })
+      }
+    )
+  ] });
 };
-Pt.displayName = "Swiper";
-const Tt = dt;
+jt.displayName = "Swiper";
+const Wt = dt;
 export {
-  Tt as StyledSwiper,
-  Pt as Swiper,
-  Ct as useSwiper
+  Wt as StyledSwiper,
+  jt as Swiper,
+  Et as useSwiper
 };