@smwb/ui-react 2.1.2 → 2.2.0

package/dist/assets/styles/less/components/carousel/carousel.entry.css

@@ -1 +1 @@
-.smwb-carousel{max-width:var(--smwb-carousel-max-width, 412px)}.smwb-carousel__inner{position:relative}.smwb-carousel__track{text-align:center;overflow:hidden;cursor:pointer;margin-left:calc(-1 * var(--smwb-carousel-gap, 4px));margin-right:calc(-1 * var(--smwb-carousel-gap, 4px));touch-action:pan-y}.smwb-carousel__layer{width:100%;height:100%;display:flex;will-change:transform}.smwb-carousel__slide{flex-shrink:0;padding-left:var(--smwb-carousel-gap, 4px);padding-right:var(--smwb-carousel-gap, 4px)}.smwb-carousel__slide-inner{border-radius:28px;overflow:hidden;will-change:width}.smwb-carousel__slide-inner_clickable{cursor:zoom-in}.smwb-carousel__slide-inner img{height:var(--smwb-carousel-cell-height, 205px);aspect-ratio:var(--smwb-carousel-aspect-ratio, .9);object-fit:cover;width:100%;user-select:none;-webkit-user-drag:none}.smwb-carousel__navigation{display:flex;justify-content:center}.smwb-carousel__navigation .current{background-color:var(--smui-onPrimaryContainerActive)}.smwb-carousel__navigation__dot{margin:3px;width:10px;height:10px;border-radius:50%;border:1px solid var(--smui-onPrimaryContainer)}.smwb-carousel__arrow{cursor:pointer;position:absolute;background:var(--smui-onPrimaryContainerActive);color:var(--smui-onPrimaryContainer);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-stage{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}.smwb-carousel__fullscreen-stage img{max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}.smwb-carousel__fullscreen-arrow,.smwb-carousel__fullscreen-close{position:absolute;z-index:1;cursor:pointer;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.smwb-carousel__fullscreen-arrow{top:50%;transform:translateY(-50%)}.smwb-carousel__fullscreen-arrow_prev{left:16px}.smwb-carousel__fullscreen-arrow_next{right:16px}.smwb-carousel__fullscreen-close{top:16px;right:16px}
+.smwb-carousel{max-width:var(--smwb-carousel-max-width, 412px)}.smwb-carousel__inner{position:relative}.smwb-carousel__track{text-align:center;overflow:hidden;cursor:pointer;margin-left:calc(-1 * var(--smwb-carousel-gap, 4px));margin-right:calc(-1 * var(--smwb-carousel-gap, 4px));touch-action:pan-y}.smwb-carousel__layer{width:100%;height:100%;display:flex;will-change:transform}.smwb-carousel__slide{flex-shrink:0;padding-left:var(--smwb-carousel-gap, 4px);padding-right:var(--smwb-carousel-gap, 4px)}.smwb-carousel__slide-inner{border-radius:28px;overflow:hidden;will-change:width}.smwb-carousel__slide-inner_clickable{cursor:zoom-in}.smwb-carousel__slide-inner img{height:var(--smwb-carousel-cell-height, 205px);aspect-ratio:var(--smwb-carousel-aspect-ratio, .9);object-fit:cover;width:100%;user-select:none;-webkit-user-drag:none}.smwb-carousel__navigation{display:flex;justify-content:center}.smwb-carousel__navigation .current{background-color:var(--smui-onPrimaryContainerActive)}.smwb-carousel__navigation__dot{margin:3px;width:10px;height:10px;border-radius:50%;border:1px solid var(--smui-onPrimaryContainer)}.smwb-carousel__arrow{cursor:pointer;position:absolute;background:var(--smui-onPrimaryContainerActive);color:var(--smui-onPrimaryContainer);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-stage{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y}.smwb-carousel__fullscreen-track{display:flex;width:100%;height:100%;will-change:transform}.smwb-carousel__fullscreen-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-slide img{max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}.smwb-carousel__fullscreen-arrow,.smwb-carousel__fullscreen-close{position:absolute;z-index:1;cursor:pointer;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.smwb-carousel__fullscreen-arrow{top:50%;transform:translateY(-50%)}.smwb-carousel__fullscreen-arrow_prev{left:16px}.smwb-carousel__fullscreen-arrow_next{right:16px}.smwb-carousel__fullscreen-close{top:16px;right:16px}

package/dist/components/dataDisplay/carousel/carousel.js

@@ -1,14 +1,14 @@
-import { jsx as a, Fragment as ie, jsxs as j } from "react/jsx-runtime";
+import { jsx as a, Fragment as de, jsxs as j } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/carousel/carousel.entry.css';/* empty css                                                           */
-import O, { forwardRef as Oe, useState as x, useRef as T, useId as ze, useEffect as ue } from "react";
-import m from "clsx";
-import { useForkRef as Be } from "../../../hooks/useForkRef.js";
-import { dragPrevent as de, getStartSlide as He, getSlidesToShow as Ke, isMouseEvent as fe, coordX as z, coordY as me, getSlideStyle as Ge, isTouchEvent as qe, getSlideWidth as Je, clamp as Qe, toCssLength as B, toCssNumber as Ue, getSlideIndexForMultipleParts as he } from "./utils.js";
-import { useSafeLayoutEffect as _e } from "../../../hooks/useSafeLayoutEffect.js";
+import z, { forwardRef as qe, useState as _, useRef as N, useId as Je, useEffect as fe } from "react";
+import h from "clsx";
+import { useForkRef as Qe } from "../../../hooks/useForkRef.js";
+import { dragPrevent as me, getStartSlide as Ue, getSlidesToShow as Ze, isMouseEvent as he, coordX as O, coordY as _e, getSlideStyle as et, isTouchEvent as tt, getSlideWidth as st, clamp as rt, toCssLength as B, toCssNumber as nt, getSlideIndexForMultipleParts as we } from "./utils.js";
+import { useSafeLayoutEffect as ge } from "../../../hooks/useSafeLayoutEffect.js";
 import { useEventCallback as H } from "../../../hooks/useEventCallback.js";
-import { Icon as E } from "../../base/icon/icon.js";
-import { Modal as Ze } from "../../feedBack/modal/modal.js";
-const et = {
+import { Icon as M } from "../../base/icon/icon.js";
+import { Modal as ot } from "../../feedBack/modal/modal.js";
+const ct = {
   isPressed: !1,
   startX: 0,
   startY: 0,
@@ -16,272 +16,291 @@ const et = {
   lastT: 0,
   axis: null,
   dragged: !1
-}, we = 8, tt = 0.4, ht = Oe(function({
-  slidesToShow: ve = 3,
-  startSlide: ge = 0,
-  children: w,
-  className: be,
-  showNavigation: xe = !0,
-  showArrows: pe,
+}, ve = 8, at = 0.4, xt = qe(function({
+  slidesToShow: be = 3,
+  startSlide: xe = 0,
+  children: g,
+  className: pe,
+  showNavigation: Se = !0,
+  showArrows: ye,
   arrowsSize: v = 30,
-  navigationClassName: Se,
-  onSlideChange: g,
+  navigationClassName: Ie,
+  onSlideChange: b,
   navigationDotRenderer: K,
-  "aria-label": Ie = "Carousel",
+  "aria-label": Te = "Carousel",
   autoplay: G = !1,
   autoplayInterval: q = 4e3,
-  pauseOnHover: M = !0,
-  cellHeight: ye,
-  aspectRatio: Ne,
-  gap: Te,
+  pauseOnHover: k = !0,
+  cellHeight: Ne,
+  aspectRatio: Me,
+  gap: ke,
   maxWidth: Ee,
-  enableFullscreen: k = !1
-}, Me) {
-  const s = O.Children.count(w), n = Ke(ve, s), L = He(ge, s), J = pe && s > 1, X = Math.max(0, s - n), [l, Q] = x(L), [Y, $] = x({
+  enableFullscreen: E = !1
+}, Xe) {
+  const s = z.Children.count(g), o = Ze(be, s), X = Ue(xe, s), J = ye && s > 1, L = Math.max(0, s - o), [l, Q] = _(X), [F, Y] = _({
     animation: void 0
-  }), [ke, U] = x(0), [Le, Z] = x(!1), [h, A] = x(null), P = T(null), Xe = T(null), Ae = Be(Me, Xe), f = T(null), [ee, te] = x(!1), i = T({ ...et });
-  _e(() => {
-    $((e) => ({
+  }), [Le, U] = _(0), [Pe, Z] = _(!1), [u, P] = _(null), [De, ee] = _(0), [Ae, te] = _(!1), D = N(null), Ce = N(null), Re = Qe(Xe, Ce), m = N(null), [se, re] = _(!1), i = N({ ...ct });
+  ge(() => {
+    Y((e) => ({
       ...e,
       animation: !1
     }));
-  }, [n]), _e(() => {
-    Q(L), g == null || g(L), Y.animation !== void 0 && $((e) => ({
+  }, [o]), ge(() => {
+    Q(X), b == null || b(X), F.animation !== void 0 && Y((e) => ({
       ...e,
       animation: !0
     }));
-  }, [L]);
-  const F = (e) => {
+  }, [X]);
+  const $ = (e) => {
     Object.assign(i.current, e);
-  }, V = () => typeof performance != "undefined" ? performance.now() : Date.now(), se = (e) => {
-    const t = Qe(e, 0, X);
-    Q(t), $((r) => ({ ...r, animation: !0 })), g == null || g(t);
-  }, p = (e) => {
-    A((t) => t === null ? t : (t + e + s) % s);
-  }, S = T(null), Pe = (e) => {
-    f.current && (f.current.removeEventListener(e ? "mousemove" : "touchmove", ne), f.current.removeEventListener(e ? "mouseup" : "touchend", b), e && f.current.removeEventListener("mouseleave", b));
-  }, re = H((e) => {
-    if (!f.current)
+  }, V = () => typeof performance != "undefined" ? performance.now() : Date.now(), ne = (e) => {
+    const t = rt(e, 0, L);
+    Q(t), Y((r) => ({ ...r, animation: !0 })), b == null || b(t);
+  }, S = (e) => {
+    P((t) => t === null ? t : (t + e + s) % s);
+  }, x = N(null), Fe = (e) => {
+    m.current && (m.current.removeEventListener(e ? "mousemove" : "touchmove", ce), m.current.removeEventListener(e ? "mouseup" : "touchend", p), e && m.current.removeEventListener("mouseleave", p));
+  }, oe = H((e) => {
+    if (!m.current)
       return;
-    const t = fe(e);
+    const t = he(e);
     if (t && e.button !== 0)
       return;
     e.stopPropagation();
-    const r = z(e), o = me(e);
-    F({
+    const r = O(e), n = _e(e);
+    $({
       isPressed: !0,
       startX: r,
-      startY: o,
+      startY: n,
       lastX: r,
       lastT: V(),
       axis: null,
       dragged: !1
-    }), f.current.addEventListener(t ? "mousemove" : "touchmove", ne, { passive: !1 }), f.current.addEventListener(t ? "mouseup" : "touchend", b), t && f.current.addEventListener("mouseleave", b);
-  }), ne = H((e) => {
-    if (!P.current || !i.current.isPressed)
+    }), m.current.addEventListener(t ? "mousemove" : "touchmove", ce, { passive: !1 }), m.current.addEventListener(t ? "mouseup" : "touchend", p), t && m.current.addEventListener("mouseleave", p);
+  }), ce = H((e) => {
+    if (!D.current || !i.current.isPressed)
       return;
-    if (qe(e) && e.touches.length > 1)
-      return b(e);
-    const t = z(e), r = me(e), o = t - i.current.startX, c = r - i.current.startY;
+    if (tt(e) && e.touches.length > 1)
+      return p(e);
+    const t = O(e), r = _e(e), n = t - i.current.startX, c = r - i.current.startY;
     if (i.current.axis === null) {
-      if (Math.abs(o) < we && Math.abs(c) < we)
+      if (Math.abs(n) < ve && Math.abs(c) < ve)
         return;
-      const u = Math.abs(o) >= Math.abs(c) ? "x" : "y";
-      if (F({ axis: u, dragged: !0 }), u === "y")
-        return b(e);
+      const d = Math.abs(n) >= Math.abs(c) ? "x" : "y";
+      if ($({ axis: d, dragged: !0 }), d === "y")
+        return p(e);
       s > 1 && Z(!0);
     }
     if (i.current.axis === "x") {
       if (e.preventDefault(), e.stopPropagation(), s > 1) {
-        const u = l <= 0, d = l >= X, _ = u && o > 0 || d && o < 0 ? o * 0.35 : o;
-        U(_);
+        const d = l <= 0, f = l >= L, w = d && n > 0 || f && n < 0 ? n * 0.35 : n;
+        U(w);
       }
       i.current.lastX = t, i.current.lastT = V();
     }
-  }), b = H((e) => {
+  }), p = H((e) => {
     if (!i.current.isPressed)
       return;
-    const t = fe(e);
-    Pe(t);
-    const { axis: r, dragged: o, startX: c, lastX: u, lastT: d } = i.current;
-    if (F({ isPressed: !1 }), Z(!1), r === "x" && o && s > 1 && P.current) {
-      const _ = z(e), D = _ - c, y = P.current.offsetWidth / n, R = d ? (_ - u) / Math.max(1, V() - d) : 0;
-      let N = y > 0 ? Math.round(-D / y) : 0;
-      N === 0 && Math.abs(R) > tt && (N = R < 0 ? 1 : -1), se(l + N);
+    const t = he(e);
+    Fe(t);
+    const { axis: r, dragged: n, startX: c, lastX: d, lastT: f } = i.current;
+    if ($({ isPressed: !1 }), Z(!1), r === "x" && n && s > 1 && D.current) {
+      const w = O(e), C = w - c, I = D.current.offsetWidth / o, R = f ? (w - d) / Math.max(1, V() - f) : 0;
+      let T = I > 0 ? Math.round(-C / I) : 0;
+      T === 0 && Math.abs(R) > at && (T = R < 0 ? 1 : -1), ne(l + T);
     }
     U(0);
-  }), Ce = (e) => () => {
-    i.current.dragged || k && A(e);
-  }, C = (e) => () => se(e), W = (e) => {
-    const t = n === 1, r = t ? s : Math.ceil(s / n), o = l + n, c = s - n <= l, d = (he(o, n, s, c) + e + r) % r;
-    return t ? d : d * n;
-  }, De = () => {
-    if (!xe)
-      return /* @__PURE__ */ a(ie, {});
-    const e = s - n <= l, t = n === 1, r = t ? s : Math.ceil(s / n), o = [];
+  }), Ye = (e) => () => {
+    i.current.dragged || E && P(e);
+  }, A = (e) => () => ne(e), W = (e) => {
+    const t = o === 1, r = t ? s : Math.ceil(s / o), n = l + o, c = s - o <= l, f = (we(n, o, s, c) + e + r) % r;
+    return t ? f : f * o;
+  }, $e = () => {
+    if (!Se)
+      return /* @__PURE__ */ a(de, {});
+    const e = s - o <= l, t = o === 1, r = t ? s : Math.ceil(s / o), n = [];
     for (let c = 0; c < r; c++) {
-      let u = c, d = l;
+      let d = c, f = l;
       if (!t) {
-        const R = c === r - 1, N = l + n;
-        u = R ? s - n : c * n, d = he(N, n, s, e);
+        const R = c === r - 1, T = l + o;
+        d = R ? s - o : c * o, f = we(T, o, s, e);
       }
-      const _ = d === c, D = C(u);
-      let y = /* @__PURE__ */ a("div", { className: m("smwb-carousel__navigation__dot", _ && "current"), onClick: D }, c);
-      K && (y = K(c, _, D)), o.push(y);
+      const w = f === c, C = A(d);
+      let I = /* @__PURE__ */ a("div", { className: h("smwb-carousel__navigation__dot", w && "current"), onClick: C }, c);
+      K && (I = K(c, w, C)), n.push(I);
     }
-    return /* @__PURE__ */ a("div", { className: m("smwb-carousel__navigation", Se), children: o });
-  }, Re = () => {
-    const e = l > X ? X : l;
-    return Je(n) * e;
-  }, Ye = ze(), $e = Ge(n), Fe = {
-    transform: `translateX(calc(-${Re()}% + ${ke}px))`,
-    transition: Le || Y.animation === void 0 ? "none" : Y.animation ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none"
-  }, I = {}, oe = B(ye), ce = Ue(Ne), ae = B(Te), le = B(Ee);
-  if (oe && (I["--smwb-carousel-cell-height"] = oe), ce && (I["--smwb-carousel-aspect-ratio"] = ce), ae && (I["--smwb-carousel-gap"] = ae), le && (I["--smwb-carousel-max-width"] = le), O.useEffect(() => {
-    Array.isArray(w) || console.error("SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.");
-  }, [w]), ue(() => {
-    if (!G || s <= 1 || M && ee || h !== null)
+    return /* @__PURE__ */ a("div", { className: h("smwb-carousel__navigation", Ie), children: n });
+  }, Ve = () => {
+    const e = l > L ? L : l;
+    return st(o) * e;
+  }, We = Je(), je = et(o), ze = {
+    transform: `translateX(calc(-${Ve()}% + ${Le}px))`,
+    transition: Pe || F.animation === void 0 ? "none" : F.animation ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none"
+  }, y = {}, ae = B(Ne), le = nt(Me), ie = B(ke), ue = B(Ee);
+  if (ae && (y["--smwb-carousel-cell-height"] = ae), le && (y["--smwb-carousel-aspect-ratio"] = le), ie && (y["--smwb-carousel-gap"] = ie), ue && (y["--smwb-carousel-max-width"] = ue), z.useEffect(() => {
+    Array.isArray(g) || console.error("SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.");
+  }, [g]), fe(() => {
+    if (!G || s <= 1 || k && se || u !== null)
       return;
     const e = window.setInterval(() => {
-      C(W(1))();
+      A(W(1))();
     }, q);
     return () => window.clearInterval(e);
   }, [
     G,
     q,
-    M,
-    ee,
+    k,
+    se,
     s,
     l,
-    n,
-    h
-  ]), ue(() => {
-    if (h === null || s <= 1)
+    o,
+    u
+  ]), fe(() => {
+    if (u === null || s <= 1)
       return;
     const e = (t) => {
-      t.key === "ArrowLeft" ? p(-1) : t.key === "ArrowRight" && p(1);
+      t.key === "ArrowLeft" ? S(-1) : t.key === "ArrowRight" && S(1);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [h, s]), !Array.isArray(w))
-    return /* @__PURE__ */ a(ie, {});
-  const Ve = w, We = (e) => {
+  }, [u, s]), !Array.isArray(g))
+    return /* @__PURE__ */ a(de, {});
+  const Oe = g, Be = (e) => {
     var t, r;
-    S.current = (r = (t = e.touches[0]) == null ? void 0 : t.clientX) != null ? r : null;
-  }, je = (e) => {
-    var r, o;
-    if (S.current === null || s <= 1)
+    x.current = (r = (t = e.touches[0]) == null ? void 0 : t.clientX) != null ? r : null;
+  }, He = (e) => {
+    var r, n;
+    if (x.current === null || s <= 1)
       return;
-    const t = ((o = (r = e.changedTouches[0]) == null ? void 0 : r.clientX) != null ? o : S.current) - S.current;
-    S.current = null, Math.abs(t) > 40 && p(t < 0 ? 1 : -1);
+    const t = ((n = (r = e.touches[0]) == null ? void 0 : r.clientX) != null ? n : x.current) - x.current;
+    te(!0), ee(t);
+  }, Ke = (e) => {
+    var n, c;
+    const t = x.current;
+    if (x.current = null, te(!1), ee(0), t === null || s <= 1)
+      return;
+    const r = ((c = (n = e.changedTouches[0]) == null ? void 0 : n.clientX) != null ? c : t) - t;
+    Math.abs(r) > 40 && S(r < 0 ? 1 : -1);
+  }, Ge = {
+    transform: `translateX(calc(-${(u != null ? u : 0) * 100}% + ${De}px))`,
+    transition: Ae ? "none" : "transform 350ms cubic-bezier(.22, .61, .36, 1)"
   };
   return /* @__PURE__ */ j(
     "div",
     {
-      className: m("smwb-carousel", be),
+      className: h("smwb-carousel", pe),
       "data-testid": "carousel",
-      ref: Ae,
+      ref: Re,
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": Ie,
-      style: I,
-      onMouseEnter: M ? () => te(!0) : void 0,
-      onMouseLeave: M ? () => te(!1) : void 0,
+      "aria-label": Te,
+      style: y,
+      onMouseEnter: k ? () => re(!0) : void 0,
+      onMouseLeave: k ? () => re(!1) : void 0,
       children: [
-        /* @__PURE__ */ j("div", { className: m("smwb-carousel__inner"), ref: P, children: [
+        /* @__PURE__ */ j("div", { className: h("smwb-carousel__inner"), ref: D, children: [
           J && /* @__PURE__ */ a(
-            E,
+            M,
             {
               name: "chevron_left",
               size: v,
-              className: m("smwb-carousel__arrow", "smwb-carousel__arrow_prev"),
+              className: h("smwb-carousel__arrow", "smwb-carousel__arrow_prev"),
               style: {
                 top: `calc(50% - ${v / 2}px)`,
                 left: -v / 2
               },
-              onClick: () => C(W(-1))()
+              onClick: () => A(W(-1))()
             }
           ),
           /* @__PURE__ */ a(
             "div",
             {
-              ref: f,
+              ref: m,
               className: "smwb-carousel__track",
-              onMouseDown: re,
-              onTouchStart: re,
-              onDragStart: de,
-              onDragEnd: de,
-              children: /* @__PURE__ */ a("div", { className: "smwb-carousel__layer", style: Fe, children: O.Children.map(w, (e, t) => /* @__PURE__ */ a("div", { id: `${Ye}${t}`, className: "smwb-carousel__slide", style: $e, children: /* @__PURE__ */ a(
+              onMouseDown: oe,
+              onTouchStart: oe,
+              onDragStart: me,
+              onDragEnd: me,
+              children: /* @__PURE__ */ a("div", { className: "smwb-carousel__layer", style: ze, children: z.Children.map(g, (e, t) => /* @__PURE__ */ a("div", { id: `${We}${t}`, className: "smwb-carousel__slide", style: je, children: /* @__PURE__ */ a(
                 "div",
                 {
-                  className: m(
+                  className: h(
                     "smwb-carousel__slide-inner",
-                    k && "smwb-carousel__slide-inner_clickable"
+                    E && "smwb-carousel__slide-inner_clickable"
                   ),
-                  onClick: k ? Ce(t) : void 0,
+                  onClick: E ? Ye(t) : void 0,
                   children: e
                 }
               ) }, t)) })
             }
           ),
           J && /* @__PURE__ */ a(
-            E,
+            M,
             {
               name: "chevron_right",
               size: v,
-              className: m("smwb-carousel__arrow", "smwb-carousel__arrow_next"),
+              className: h("smwb-carousel__arrow", "smwb-carousel__arrow_next"),
               style: {
                 top: `calc(50% - ${v / 2}px)`,
                 right: -v / 2
               },
-              onClick: () => C(W(1))()
+              onClick: () => A(W(1))()
             }
           )
         ] }),
-        De(),
-        k && /* @__PURE__ */ a(
-          Ze,
+        $e(),
+        E && /* @__PURE__ */ a(
+          ot,
           {
-            open: h !== null,
+            open: u !== null,
             size: "fullscreen",
             backdrop: "darkBlured",
             className: "smwb-carousel__fullscreen",
-            onClose: () => A(null),
+            onClose: () => P(null),
             "aria-label": "Image viewer",
-            children: h !== null && /* @__PURE__ */ j("div", { className: "smwb-carousel__fullscreen-content", children: [
+            children: u !== null && /* @__PURE__ */ j("div", { className: "smwb-carousel__fullscreen-content", children: [
               s > 1 && /* @__PURE__ */ a(
-                E,
+                M,
                 {
                   name: "chevron_left",
                   size: 40,
-                  className: m("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev"),
-                  onClick: () => p(-1)
+                  className: h("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev"),
+                  onClick: () => S(-1)
                 }
               ),
               /* @__PURE__ */ a(
                 "div",
                 {
                   className: "smwb-carousel__fullscreen-stage",
-                  onTouchStart: We,
-                  onTouchEnd: je,
-                  children: Ve[h]
+                  onTouchStart: Be,
+                  onTouchMove: He,
+                  onTouchEnd: Ke,
+                  children: /* @__PURE__ */ a("div", { className: "smwb-carousel__fullscreen-track", style: Ge, children: Oe.map((e, t) => /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: "smwb-carousel__fullscreen-slide",
+                      "aria-hidden": t !== u,
+                      children: e
+                    },
+                    t
+                  )) })
                 }
               ),
               s > 1 && /* @__PURE__ */ a(
-                E,
+                M,
                 {
                   name: "chevron_right",
                   size: 40,
-                  className: m("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next"),
-                  onClick: () => p(1)
+                  className: h("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next"),
+                  onClick: () => S(1)
                 }
               ),
               /* @__PURE__ */ a(
-                E,
+                M,
                 {
                   name: "close",
                   size: 32,
                   className: "smwb-carousel__fullscreen-close",
-                  onClick: () => A(null)
+                  onClick: () => P(null)
                 }
               )
             ] })
@@ -292,6 +311,6 @@ const et = {
   );
 });
 export {
-  ht as Carousel
+  xt as Carousel
 };
 //# sourceMappingURL=carousel.js.map