welcome-ui 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/Swiper.js

@@ -0,0 +1,141 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),z=require("./_commonjsHelpers-DvH0V_XJ.js"),c=require("@xstyled/styled-components"),K=require("./IconFont.js"),ot=require("./use-viewport-BDDjd1nl.js"),st=require("./Button.js");var at="Expected a function",X=NaN,lt="[object Symbol]",ct=/^\s+|\s+$/g,ut=/^[-+]0x[0-9a-f]+$/i,dt=/^0b[01]+$/i,ft=/^0o[0-7]+$/i,ht=parseInt,gt=typeof z.commonjsGlobal=="object"&&z.commonjsGlobal&&z.commonjsGlobal.Object===Object&&z.commonjsGlobal,mt=typeof self=="object"&&self&&self.Object===Object&&self,pt=gt||mt||Function("return this")(),wt=Object.prototype,bt=wt.toString,yt=Math.max,$t=Math.min,_=function(){return pt.Date.now()};function St(t,e,n){var s,r,a,d,l,y,m=0,A=!1,S=!1,R=!0;if(typeof t!="function")throw new TypeError(at);e=J(e)||0,D(n)&&(A=!!n.leading,S="maxWait"in n,a=S?yt(J(n.maxWait)||0,e):a,R="trailing"in n?!!n.trailing:R);function f(i){var g=s,P=r;return s=r=void 0,m=i,d=t.apply(P,g),d}function I(i){return m=i,l=setTimeout(b,e),A?f(i):d}function v(i){var g=i-y,P=i-m,W=e-g;return S?$t(W,a-P):W}function k(i){var g=i-y,P=i-m;return y===void 0||g>=e||g<0||S&&P>=a}function b(){var i=_();if(k(i))return T(i);l=setTimeout(b,v(i))}function T(i){return l=void 0,R&&s?f(i):(s=r=void 0,d)}function O(){l!==void 0&&clearTimeout(l),m=0,s=y=r=l=void 0}function M(){return l===void 0?d:T(_())}function p(){var i=_(),g=k(i);if(s=arguments,r=this,y=i,g){if(l===void 0)return I(y);if(S)return l=setTimeout(b,e),f(y)}return l===void 0&&(l=setTimeout(b,e)),d}return p.cancel=O,p.flush=M,p}function D(t){var e=typeof t;return!!t&&(e=="object"||e=="function")}function vt(t){return!!t&&typeof t=="object"}function xt(t){return typeof t=="symbol"||vt(t)&&bt.call(t)==lt}function J(t){if(typeof t=="number")return t;if(xt(t))return X;if(D(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;t=D(e)?e+"":e}if(typeof t!="string")return t===0?t:+t;t=t.replace(ct,"");var n=dt.test(t);return n||ft.test(t)?ht(t.slice(2),n?2:8):ut.test(t)?X:+t}var Pt=St;const Et=z.getDefaultExportFromCjs(Pt),Rt=(t,e)=>{const n=o.useRef();o.useEffect(()=>{n.current=t},[t]),o.useEffect(()=>{function s(){n.current()}if(e!==null){const r=setInterval(s,e);return()=>clearInterval(r)}},[e])},x=(t=3,e,n)=>{if(e===0)return`${100/t}%`;const r=n(e*(t===1?4:2));return`calc(${100/t}% - ${r})`},Y=c.div`
+  overflow-y: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  ${c.system}
+`,Q=c(st.Button)(({disabled:t,withDarkUI:e,withNavigation:{desktop:n,mobile:s}})=>c.css`
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    z-index: ${s?1:-1};
+    display: ${s?"flex":"none"};
+
+    ${!e&&c.css`
+      background-color: neutral-10 !important;
+
+      &:hover {
+        background-color: neutral-40 !important;
+      }
+    `}
+
+    @media (min-width: md) {
+      z-index: ${n?1:-1};
+      display: ${n?"flex":"none"};
+    }
+
+    ${t&&c.css`
+      opacity: 0;
+      z-index: -1;
+    `};
+  `),kt=c.divBox(({withPagination:{desktop:t,mobile:e}})=>c.css`
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: sm;
+
+    z-index: ${e?1:-1};
+    display: ${e?"flex":"none"};
+
+    @media (min-width: md) {
+      z-index: ${t?1:-1};
+      display: ${t?"flex":"none"};
+    }
+  `),jt=c.div(({active:t,withDarkUI:e})=>c.css`
+    height: 10;
+    width: 10;
+    border-radius: 50%;
+    cursor: pointer;
+    margin: 0 xxs;
+    ${t?c.th("swipers.navigation.bullet.active"):c.th("swipers.navigation.bullet.default")}
+    ${e&&c.css`
+      background-color: ${t?"neutral-90":"neutral-50"};
+    `}
+    ${c.system}
+  `),Lt=c.ulBox(({fullWidth:t,slidesPerView:{desktop:e,mobile:n,tablet:s},spaceBetween:r,theme:a})=>c.css`
+    scroll-snap-type: x mandatory;
+    display: flex;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: scroll;
+    margin: 0;
+
+    /* Hide scrollbar */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    height: 100%;
+    padding: 0;
+
+    > [aria-roledescription='slide'][aria-hidden='true'] {
+      pointer-events: none;
+    }
+
+    > * {
+      list-style-type: none;
+      margin-right: ${r};
+      min-width: ${x(n,r,a.toRem)};
+      max-width: ${x(n,r,a.toRem)};
+      flex: 1;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    @media (min-width: sm) {
+      ${n&&c.css`
+        > * {
+          min-width: ${x(n,r,a.toRem)};
+          max-width: ${x(n,r,a.toRem)};
+
+          &:nth-of-type(${n}n + 1) {
+            scroll-snap-align: start;
+          }
+        }
+      `}
+    }
+
+    @media (min-width: md) {
+      ${s&&c.css`
+        > * {
+          min-width: ${x(s,r,a.toRem)};
+          max-width: ${x(s,r,a.toRem)};
+
+          &:nth-of-type(${s}n + 1) {
+            scroll-snap-align: start;
+          }
+        }
+      `}
+    }
+
+    @media (min-width: lg) {
+      ${e&&c.css`
+        > * {
+          min-width: ${x(e,r,a.toRem)};
+          max-width: ${x(e,r,a.toRem)};
+
+          scroll-snap-align: unset;
+
+          &:nth-of-type(${e}n + 1) {
+            scroll-snap-align: start;
+          }
+
+          &:not(:nth-of-type(${e}n + 1)) {
+            scroll-snap-align: unset;
+          }
+        }
+      `}
+    }
+
+    @media (min-width: xl) {
+      ${e&&t&&c.css`
+        > * {
+          min-width: ${x(e+2,r,a.toRem)};
+          max-width: ${x(e+2,r,a.toRem)};
+        }
+      `}
+    }
+  `),Ct=(t={})=>{const{autoplay:e=!1,centeredSlides:n=!1,duration:s=5e3,firstSlideToShow:r=0,fullWidth:a=!1,id:d="swiper",loop:l=!1,navigationSize:y="md",slidesPerView:m={mobile:1,tablet:1,desktop:1},spaceBetween:A=20,withDarkUI:S=!1,withNavigation:R={mobile:!0,desktop:!0},withPagination:f={mobile:!1,desktop:!1}}=t,I=l||e,{width:v}=ot.useViewportSize(),[k,b]=o.useState(0),[T,O]=o.useState(!1),[M,p]=o.useState(!1),i=o.useRef(),{screens:g}=c.useTheme(),P=o.useMemo(()=>v<=g.md?m.mobile:v<=g.lg?m.tablet:v>=g["4xl"]&&a?m.desktop+2:m.desktop,[a,v,g,m]);return{centeredSlides:n,firstSlideToShow:r,currentSlidesPerView:P,currentPage:k,setCurrentPage:b,fullWidth:a,id:d,navigationSize:y,slidesPerView:m,spaceBetween:A,withNavigation:R,withPagination:f,autoplay:e,shouldLoop:I,duration:s,withDarkUI:S,ref:i,setShowLeftArrow:O,setShowRightArrow:p,showLeftArrow:T,showRightArrow:M}},Z=({children:t,dataTestId:e,store:n,...s})=>{const{autoplay:r,centeredSlides:a,currentPage:d,currentSlidesPerView:l,duration:y,firstSlideToShow:m,fullWidth:A,id:S,navigationSize:R,ref:f,setCurrentPage:I,setShowLeftArrow:v,setShowRightArrow:k,shouldLoop:b,showLeftArrow:T,showRightArrow:O,slidesPerView:M,spaceBetween:p,withDarkUI:i,withNavigation:g,withPagination:P}=n,W=o.Children.toArray(t).length,H=Math.ceil(W/l),C=Array.from(Array(H).keys()),U=d===0,q=d===C.length-1,tt=o.Children.map(t,(w,u)=>{const h=`${S}-${u}`,$=u+1,L=Math.ceil($/l)-1,E=q?W-$>=l:L!==d;return o.cloneElement(w,{...w.props,id:h,key:h,"aria-hidden":E,"aria-roledescription":"slide","aria-label":`${$} of ${W}`})}),et=a?Math.floor(H/2):Math.ceil(m/l)-1,G=o.useCallback(()=>{const w=f==null?void 0:f.current;if(w&&!b){const{offsetWidth:u,scrollLeft:h,scrollWidth:$}=w,L=!(h>p),E=!($-(h+u)>p);v(!L),k(!E)}else v(!0),k(!0)},[f,v,k,b,p]),nt=()=>{var u,h;const w=f==null?void 0:f.current;if(w){const{children:$,offsetWidth:L,scrollLeft:E,scrollWidth:N}=w,rt=(h=(u=$==null?void 0:$[0])==null?void 0:u.getBoundingClientRect())==null?void 0:h.width,B=!(N-(E+L)>p)?C.length-1:Math.round(E/((rt+p)*l));B!==d&&I(B)}},it=Et(()=>{G(),nt()},100),j=o.useCallback((w,u=!1)=>{var L,E,N;const h=f==null?void 0:f.current,$=(N=(E=(L=h==null?void 0:h.children)==null?void 0:L[0])==null?void 0:E.getBoundingClientRect())==null?void 0:N.width;h==null||h.scrollTo({left:w*($+p)*l,top:0,behavior:u?"auto":"smooth"})},[l,p,f]),F=o.useCallback(()=>{j(b&&q?0:d+1)},[d,j,q,b]),V=o.useCallback(()=>{j(U&&b?C.length-1:d-1)},[C.length,d,j,U,b]);return Rt(()=>{r&&F()},r?y:null),o.useEffect(()=>{const w=u=>{u.code==="ArrowLeft"&&V(),u.code==="ArrowRight"&&F()};return window.addEventListener("keydown",w),()=>window.removeEventListener("keydown",w)},[V,F]),o.useEffect(()=>{j(et,!0)},[]),o.useEffect(()=>{G()},[G,t]),o.createElement(Y,{"data-testid":e,...s},o.createElement(Lt,{fullWidth:A,onScroll:it,ref:f,slidesPerView:M,spaceBetween:p},tt),o.createElement(Q,{"data-testid":e&&`${e}-prev-button`,disabled:!T,left:10,onClick:V,position:"absolute",shape:"circle",size:R,variant:i?"secondary":"ghost",withDarkUI:i,withNavigation:g},o.createElement(K.IconFont.Left,null)),o.createElement(Q,{"data-testid":e&&`${e}-next-button`,disabled:!O,onClick:F,position:"absolute",right:10,shape:"circle",size:R,variant:i?"secondary":"ghost",withDarkUI:i,withNavigation:g},o.createElement(K.IconFont.Right,null)),o.createElement(kt,{className:"swiper-pagination","data-testid":e&&`${e}-pagination`,role:"tablist",withPagination:P},C.length>1&&C.map((w,u)=>{const h={idx:u,role:"tab","aria-controls":`${S}-${u}`,"aria-label":`${u+1} of ${C.length}`,"aria-selected":u===d,onClick:()=>j(u)};return o.createElement(jt,{active:u===d,key:`bullet-${u+1}`,withDarkUI:i,...h})})))};Z.displayName="Swiper";const At=Y;exports.StyledSwiper=At;exports.Swiper=Z;exports.useSwiper=Ct;

package/dist/Swiper.mjs

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

package/dist/System.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),t=require("@xstyled/styled-components");function a(o){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const p=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(r,s,p.get?p:{enumerable:!0,get:()=>o[s]})}}return r.default=o,Object.freeze(r)}const e=a(t),i=t.compose(t.style({prop:"opacity"}),t.style({prop:"overflow"}),t.style({prop:"transition",themeGet:t.getTransition}),t.style({prop:"position"}),t.style({prop:"zIndex",themeGet:t.getZIndex}),t.style({prop:"top",themeGet:t.getPx}),t.style({prop:"right",themeGet:t.getPx}),t.style({prop:"bottom",themeGet:t.getPx}),t.style({prop:"left",themeGet:t.getPx})),l=Object.freeze([e.backgrounds,e.borders,e.boxShadow,e.color,e.display,e.flexboxes,e.grids,e.height,e.maxHeight,e.maxWidth,e.minHeight,e.minWidth,e.space,e.typography,e.verticalAlign,e.width,i]),d=Object.freeze([e.margin,e.marginBottom,e.marginLeft,e.marginRight,e.marginTop,e.mx,e.my,e.width,i]),n=t.compose(...l),c=t.compose(...d),f=n.meta.props.filter(o=>!c.meta.props.includes(o)).map(o=>o==="w"?e.width:o==="h"?e.height:e[o]).filter(Boolean),g=t.compose(...f),y=o=>!n.meta.props.includes(o),u=(o,r)=>r(o),h=o=>m.forwardRef(o);exports.componentSystem=g;exports.filterSystemProps=y;exports.forwardRef=h;exports.shouldForwardProp=u;exports.system=n;exports.wrapperSystem=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),t=require("@xstyled/styled-components");function a(o){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const p=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(r,s,p.get?p:{enumerable:!0,get:()=>o[s]})}}return r.default=o,Object.freeze(r)}const e=a(t),i=t.compose(t.style({prop:"opacity"}),t.style({prop:"overflow"}),t.style({prop:"transition",themeGet:t.getTransition}),t.style({prop:"position"}),t.style({prop:"zIndex",themeGet:t.getZIndex}),t.style({prop:"top",themeGet:t.getPx}),t.style({prop:"right",themeGet:t.getPx}),t.style({prop:"bottom",themeGet:t.getPx}),t.style({prop:"left",themeGet:t.getPx})),l=Object.freeze([e.backgrounds,e.borders,e.boxShadow,e.color,e.display,e.flexboxes,e.grids,e.height,e.maxHeight,e.maxWidth,e.minHeight,e.minWidth,e.space,e.typography,e.verticalAlign,e.width,i]),d=Object.freeze([e.margin,e.marginBottom,e.marginLeft,e.marginRight,e.marginTop,e.mx,e.my,e.width,i]),n=t.compose(...l),c=t.compose(...d),y=n.meta.props.filter(o=>!c.meta.props.includes(o)).map(o=>o==="w"?e.width:o==="h"?e.height:e[o]).filter(Boolean),f=t.compose(...y),g=o=>!n.meta.props.includes(o),u=(o,r)=>r(o),h=o=>m.forwardRef(o);exports.componentSystem=f;exports.filterSystemProps=g;exports.forwardRef=h;exports.shouldForwardProp=u;exports.system=n;exports.wrapperSystem=c;

package/dist/System.mjs

@@ -40,12 +40,12 @@ const i = p(
   t.my,
   t.width,
   i
-]), n = p(...h), f = p(...d), g = n.meta.props.filter((e) => !f.meta.props.includes(e)).map((e) => e === "w" ? t.width : e === "h" ? t.height : t[e]).filter(Boolean), u = p(...g), w = (e) => !n.meta.props.includes(e), x = (e, s) => s(e), y = (e) => m.forwardRef(e);
+]), n = p(...h), f = p(...d), l = n.meta.props.filter((e) => !f.meta.props.includes(e)).map((e) => e === "w" ? t.width : e === "h" ? t.height : t[e]).filter(Boolean), P = p(...l), u = (e) => !n.meta.props.includes(e), w = (e, s) => s(e), x = (e) => m.forwardRef(e);
 export {
-  u as componentSystem,
-  w as filterSystemProps,
-  y as forwardRef,
-  x as shouldForwardProp,
+  P as componentSystem,
+  u as filterSystemProps,
+  x as forwardRef,
+  w as shouldForwardProp,
   n as system,
   f as wrapperSystem
 };

package/dist/Table.js

@@ -0,0 +1,55 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),n=require("./System.js"),t=require("@xstyled/styled-components"),c=t.divBox(({indent:e})=>t.css`
+    overflow: hidden;
+    width: 100%;
+
+    ${e&&t.css`
+      ${i}, ${o} {
+        &:first-child {
+          padding-left: xl;
+        }
+
+        &:last-child {
+          padding-right: xl;
+        }
+      }
+    `}
+  `),h=t.div`
+  width: 100%;
+  overflow-x: auto;
+`,b=t.tableBox`
+  border: 0;
+  width: 100%;
+  border-collapse: collapse;
+`,T=t.theadBox``,g=t.tbodyBox``,p=t.trBox(({onClick:e,variant:l})=>t.css`
+    ${t.th("tables.tr.default")};
+    ${l&&t.th(`tables.tr.${l}`)};
+    ${e&&t.th("tables.tr.clickable")};
+
+    &:last-child {
+      border: 0;
+    }
+  `),o=t.thBox`
+  ${t.th("tables.th")};
+  padding: xl;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`,i=t.tdBox`
+  ${t.th("tables.td")};
+  position: relative;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`,a=n.forwardRef(({children:e,indent:l,...r},s)=>d.createElement(c,{indent:l,ref:s,...r},d.createElement(h,null,d.createElement(b,null,e)))),f=Object.assign(a,{Thead:T,Tbody:g,Th:o,Tr:p,Td:i});exports.Table=f;exports.TableComponent=a;