react-spring-carousel 3.0.0-beta090.4 → 3.0.0-beta090.5

package/dist/index.es2.js

@@ -1,35 +1,35 @@
-import { u as De, a as qe, j as P } from "./useThumbsModule-4e4b7969.js";
-import { useSpring as Be, config as Q, useIsomorphicLayoutEffect as He } from "@react-spring/web";
+import { u as qe, a as Be, j as P } from "./useThumbsModule-4e4b7969.js";
+import { useSpring as He, config as Q, useIsomorphicLayoutEffect as ze } from "@react-spring/web";
 import { useDrag as Oe } from "@use-gesture/react";
-import { useRef as m, useEffect as E, createContext as ze, useCallback as O, useContext as Xe } from "react";
-import Ye from "resize-observer-polyfill";
-import $ from "screenfull";
-function Je({
+import { useRef as h, useEffect as $, createContext as Xe, useCallback as z, useContext as Ye } from "react";
+import Je from "resize-observer-polyfill";
+import E from "screenfull";
+function Ke({
   mainCarouselWrapperRef: n,
   onFullScreenChange: v,
   handleResize: N
 }) {
-  const U = m(!1);
-  E(() => {
-    function h() {
-      document.fullscreenElement && (z(!0), v(!0), N && N()), document.fullscreenElement || (z(!1), v(!1), N && N());
+  const U = h(!1);
+  $(() => {
+    function m() {
+      document.fullscreenElement && (O(!0), v(!0), N && N()), document.fullscreenElement || (O(!1), v(!1), N && N());
     }
-    if ($.isEnabled)
-      return $.on("change", h), () => {
-        $.isEnabled && $.off("change", h);
+    if (E.isEnabled)
+      return E.on("change", m), () => {
+        E.isEnabled && E.off("change", m);
       };
   }, []);
-  function z(h) {
-    U.current = h;
+  function O(m) {
+    U.current = m;
   }
   function I() {
     return U.current;
   }
-  function T(h) {
-    $.isEnabled && $.request(h || n.current);
+  function T(m) {
+    E.isEnabled && E.request(m || n.current);
   }
   function u() {
-    $.isEnabled && $.exit();
+    E.isEnabled && E.exit();
   }
   return {
     enterFullscreen: T,
@@ -37,29 +37,30 @@ function Je({
     getIsFullscreen: I
   };
 }
-function et({
+function tt({
   items: n,
   init: v = !0,
   withThumbs: N,
   thumbsSlideAxis: U = "x",
-  itemsPerSlide: z = 1,
+  itemsPerSlide: O = 1,
   slideType: I = "fixed",
   gutter: T = 0,
   withLoop: u = !1,
-  startEndGutter: h = 0,
+  startEndGutter: m = 0,
   carouselSlideAxis: o = "x",
-  disableGestures: ge = !1,
-  draggingSlideTreshold: te,
+  disableGestures: he = !1,
+  draggingSlideTreshold: re,
   slideWhenThresholdIsReached: me = !1,
   freeScroll: c,
-  enableFreeScrollDrag: re,
+  enableFreeScrollDrag: ne,
   initialStartingPosition: Z,
-  prepareThumbsData: ye,
+  prepareThumbsData: Ie,
   initialActiveItem: C = 0,
-  animateWhenActiveItemChange: Ie = !0,
-  getControllerRef: ne
+  animateWhenActiveItemChange: be = !0,
+  getControllerRef: ce,
+  slideGroupOfItems: _ = !1
 }) {
-  const w = z > n.length ? n.length : z, X = m(!1), _ = m(te ?? 0), k = m("initial"), ce = m("initial"), ue = m("initial"), p = m(C), f = m(C === 0), l = m(I === "fixed" && C === n.length - 1), a = m(null), x = m(null), oe = m(0), ie = m(0), d = m(0), be = m(u), Te = m(I), we = m(c), R = m(!1), G = O(() => u ? [
+  const w = O > n.length ? n.length : O, X = h(!1), G = h(re ?? 0), k = h("initial"), ue = h("initial"), oe = h("initial"), p = h(C), a = h(C === 0), l = h(I === "fixed" && C === n.length - 1), f = h(null), x = h(null), ie = h(0), le = h(0), d = h(0), Te = h(u), we = h(I), Me = h(c), R = h(!1), L = z(() => u ? [
     ...n.map((e) => ({
       ...e,
       id: `prev-repeated-item-${e.id}`
@@ -69,37 +70,37 @@ function et({
       ...e,
       id: `next-repeated-item-${e.id}`
     }))
-  ] : [...n], [n, u])(), [W, y] = Be(
+  ] : [...n], [n, u])(), [W, y] = He(
     () => ({
       val: 0,
       pause: !v,
       onChange: ({ value: e }) => {
-        c && a.current ? (o === "x" ? a.current.scrollLeft = Math.abs(e.val) : a.current.scrollTop = Math.abs(e.val), ee()) : x.current && (o === "x" ? x.current.style.transform = `translate3d(${e.val}px, 0px,0px)` : x.current.style.transform = `translate3d(0px,${e.val}px,0px)`);
+        c && f.current ? (o === "x" ? f.current.scrollLeft = Math.abs(e.val) : f.current.scrollTop = Math.abs(e.val), te()) : x.current && (o === "x" ? x.current.style.transform = `translate3d(${e.val}px, 0px,0px)` : x.current.style.transform = `translate3d(0px,${e.val}px,0px)`);
       }
     }),
     [c]
-  ), { emitEvent: L, useListenToCustomEvent: A } = De(), { thumbsFragment: Me, handleScroll: Ce } = qe({
+  ), { emitEvent: A, useListenToCustomEvent: S } = qe(), { thumbsFragment: Ce, handleScroll: ke } = Be({
     withThumbs: !!N,
     thumbsSlideAxis: U,
-    prepareThumbsData: ye,
+    prepareThumbsData: Ie,
     items: n,
     renderThumbFnProps: {
-      getIsActiveItem: ae,
-      getIsPrevItem: fe,
-      useListenToCustomEvent: A,
-      getIsNextItem: se
+      getIsActiveItem: de,
+      getIsPrevItem: ae,
+      useListenToCustomEvent: S,
+      getIsNextItem: fe
     }
-  }), { enterFullscreen: he, exitFullscreen: ve, getIsFullscreen: pe } = Je({
-    mainCarouselWrapperRef: a,
-    handleResize: () => S(),
+  }), { enterFullscreen: ve, exitFullscreen: pe, getIsFullscreen: xe } = Ke({
+    mainCarouselWrapperRef: f,
+    handleResize: () => ee(),
     onFullScreenChange: (e) => {
-      L({
+      A({
         eventName: "onFullscreenChange",
         isFullscreen: e
       });
     }
   });
-  function ke(e) {
+  function Fe(e) {
     return I === "fixed" && !c ? {
       marginRight: `${e ? 0 : T}px`,
       flex: `1 0 calc(100% / ${w} - ${T * (w - 1) / w}px)`
@@ -107,20 +108,20 @@ function et({
       marginRight: `${e ? 0 : T}px`
     };
   }
-  const s = O(() => {
+  const s = z(() => {
     var r;
-    const e = (r = a.current) == null ? void 0 : r.querySelector(".use-spring-carousel-item");
+    const e = _ ? f.current : (r = f.current) == null ? void 0 : r.querySelector(".use-spring-carousel-item");
     if (!e)
       throw Error("No carousel items available!");
     return e.getBoundingClientRect()[o === "x" ? "width" : "height"] + T;
-  }, [o, T]);
+  }, [o, T, _]);
   function j({ from: e, to: r, nextActiveItem: t, immediate: i = !1, slideMode: M }) {
-    ce.current = M, typeof t == "number" && (c || (p.current = t), L({
+    ue.current = M, typeof t == "number" && (c || (p.current = t), A({
       eventName: "onSlideStartChange",
       slideActionType: k.current,
-      slideMode: ce.current,
+      slideMode: ue.current,
       nextItem: {
-        startReached: f.current,
+        startReached: a.current,
         endReached: l.current,
         index: c ? -1 : p.current,
         id: c ? "" : n[p.current].id
@@ -138,48 +139,48 @@ function et({
         velocity: W.val.velocity
       },
       onRest(B) {
-        !i && B.finished && L({
+        !i && B.finished && A({
           eventName: "onSlideChange",
           slideActionType: k.current,
-          slideMode: ce.current,
+          slideMode: ue.current,
           currentItem: {
-            startReached: f.current,
+            startReached: a.current,
             endReached: l.current,
             index: c ? -1 : p.current,
             id: c ? "" : n[p.current].id
           }
         });
       }
-    }), N && !i && Ce(p.current);
+    }), N && !i && ke(p.current);
   }
-  const g = O(() => {
+  const g = z(() => {
     var e;
     return x.current ? u ? s() * n.length : Math.round(
       Number(
         (e = x.current) == null ? void 0 : e[o === "x" ? "scrollWidth" : "scrollHeight"]
-      ) - x.current.getBoundingClientRect()[o === "x" ? "width" : "height"] - h * 2
+      ) - x.current.getBoundingClientRect()[o === "x" ? "width" : "height"] - m * 2
     ) : 0;
-  }, [o, s, n.length, h, u]);
-  function Fe() {
-    const e = `calc(100% - ${h * 2}px)`;
+  }, [o, s, n.length, m, u]);
+  function Ee() {
+    const e = `calc(100% - ${m * 2}px)`;
     return {
       width: o === "x" ? e : "100%",
       height: o === "y" ? e : "100%"
     };
   }
-  const Y = O(() => {
+  const Y = z(() => {
     var r;
     const e = (r = x.current) == null ? void 0 : r.querySelector(".use-spring-carousel-item");
     if (!e)
       throw Error("No carousel items available!");
     return e.getBoundingClientRect()[o === "x" ? "width" : "height"] + T;
-  }, [o, T]), J = O(
+  }, [o, T]), J = z(
     (e) => {
       const r = o === "x" ? "left" : "top", t = x.current;
-      t && (u ? (t.style.top = "0px", t.style.left = "0px", t.style[r] = `-${e - h}px`, f.current = !1, l.current = !1) : (t.style.left = "0px", t.style.top = "0px"));
+      t && (u ? (t.style.top = "0px", t.style.left = "0px", t.style[r] = `-${e - m}px`, a.current = !1, l.current = !1) : (t.style.left = "0px", t.style.top = "0px"));
     },
-    [o, h, u]
-  ), S = O(
+    [o, m, u]
+  ), ee = z(
     (e = !1) => {
       if (x.current && e && (x.current.style.transform = "translate3d(0px, 0px,0px)", x.current.style.left = "0", x.current.style.top = "0"), I === "fixed" && J(
         Z === "center" ? Y() * n.length - s() * Math.round((w - 1) / 2) : Z === "end" ? Y() * n.length - s() * Math.round(w - 1) : Y() * n.length
@@ -192,8 +193,8 @@ function et({
           });
           return;
         }
-        if (Math.abs(d.current) > 0 && g() !== Math.abs(d.current) && !u && !c && ue.current === "backward") {
-          const r = oe.current - g(), t = d.current + r;
+        if (Math.abs(d.current) > 0 && g() !== Math.abs(d.current) && !u && !c && oe.current === "backward") {
+          const r = ie.current - g(), t = d.current + r;
           return y.start({
             immediate: !0,
             val: t
@@ -237,7 +238,7 @@ function et({
     ]
   );
   function F() {
-    return c && a.current ? a.current[o === "x" ? "scrollLeft" : "scrollTop"] : W.val.get();
+    return c && f.current ? f.current[o === "x" ? "scrollLeft" : "scrollTop"] : W.val.get();
   }
   function K(e, r) {
     if (c && e === "next") {
@@ -251,16 +252,16 @@ function et({
     return e === "next" ? typeof r == "number" ? -(r * s()) : d.current - s() : typeof r == "number" ? -(r * s()) : d.current + s();
   }
   function V({ type: e, index: r, immediate: t }) {
-    if (!v || R.current || f.current && !u)
+    if (!v || R.current || a.current && !u)
       return;
-    l.current && (ue.current = "backward"), k.current = "prev", l.current = !1;
+    l.current && (oe.current = "backward"), k.current = "prev", l.current = !1;
     const i = typeof r == "number" ? r : p.current - 1;
-    if (c && ee(), !u) {
+    if (c && te(), !u) {
       const M = c ? K("prev", r) - s() / 3 < 0 : K("prev", r) + s() / 3 > 0;
-      if (f.current)
+      if (a.current)
         return;
       if (M) {
-        f.current = !0, l.current = !1, j({
+        a.current = !0, l.current = !1, j({
           slideMode: e,
           from: F(),
           to: 0,
@@ -270,8 +271,8 @@ function et({
         return;
       }
     }
-    if (u && (f.current || i < 0)) {
-      f.current = !1, l.current = !0, j({
+    if (u && (a.current || i < 0)) {
+      a.current = !1, l.current = !0, j({
         slideMode: e,
         from: F() - s() * n.length,
         to: -(s() * n.length) + s(),
@@ -280,7 +281,7 @@ function et({
       });
       return;
     }
-    i === 0 && (f.current = !0), (i === n.length - 1 || i === -1) && (l.current = !0), j({
+    i === 0 && (a.current = !0), (i === n.length - 1 || i === -1) && (l.current = !0), j({
       slideMode: e,
       from: F(),
       to: K("prev", r),
@@ -291,14 +292,14 @@ function et({
   function D({ type: e, index: r, immediate: t }) {
     if (!v || R.current || l.current && !u)
       return;
-    f.current && (ue.current = "forward"), k.current = "next", f.current = !1;
+    a.current && (oe.current = "forward"), k.current = "next", a.current = !1;
     const i = r || p.current + 1;
-    if (c && ee(), !u) {
+    if (c && te(), !u) {
       const M = Math.abs(K("next", r)) > g() - s() / 3;
       if (l.current)
         return;
       if (M) {
-        f.current = !1, l.current = !0, j({
+        a.current = !1, l.current = !0, j({
           slideMode: e,
           from: F(),
           to: c ? g() : -g(),
@@ -309,7 +310,7 @@ function et({
       }
     }
     if (u && (l.current || i > n.length - 1)) {
-      l.current = !1, f.current = !0, j({
+      l.current = !1, a.current = !0, j({
         slideMode: e,
         from: F() + s() * n.length,
         to: 0,
@@ -318,7 +319,7 @@ function et({
       });
       return;
     }
-    i === 0 && (f.current = !0), i === n.length - 1 && (l.current = !0), j({
+    i === 0 && (a.current = !0), i === n.length - 1 && (l.current = !0), j({
       slideMode: e,
       from: F(),
       to: K("next", r),
@@ -327,16 +328,16 @@ function et({
     });
   }
   function $e() {
-    te ? _.current = te : _.current = Math.floor(s() / 2 / 2);
+    re ? G.current = re : G.current = Math.floor(s() / 2 / 2);
   }
-  function xe() {
-    x.current && (oe.current = g(), be.current = u, Te.current = I, we.current = c, ie.current = window.innerWidth, d.current = 0, le({ id: 0, immediate: !0, shouldReset: !0 }), $e(), S());
+  function ye() {
+    x.current && (ie.current = g(), Te.current = u, we.current = I, Me.current = c, le.current = window.innerWidth, d.current = 0, se({ id: 0, immediate: !0, shouldReset: !0 }), $e(), ee());
   }
-  const Ee = Oe(
+  const Ne = Oe(
     (e) => {
-      const r = e.dragging, t = e.offset[o === "x" ? 0 : 1], i = e.movement[o === "x" ? 0 : 1], M = e.direction[o === "x" ? 0 : 1], B = i > _.current, H = i < -_.current, Ve = g();
+      const r = e.dragging, t = e.offset[o === "x" ? 0 : 1], i = e.movement[o === "x" ? 0 : 1], M = e.direction[o === "x" ? 0 : 1], B = i > G.current, H = i < -G.current, De = g();
       if (r) {
-        if (M > 0 ? k.current = "prev" : k.current = "next", L({
+        if (M > 0 ? k.current = "prev" : k.current = "next", A({
           ...e,
           eventName: "onDrag",
           slideActionType: k.current
@@ -379,7 +380,7 @@ function et({
             friction: 50,
             tension: 1e3
           }
-        }), me && H ? (D({ type: "drag" }), e.cancel()) : me && B && (V({ type: "drag" }), e.cancel()), Ve - Math.abs(t) < -(s() * 2) && e.cancel();
+        }), me && H ? (D({ type: "drag" }), e.cancel()) : me && B && (V({ type: "drag" }), e.cancel()), De - Math.abs(t) < -(s() * 2) && e.cancel();
         return;
       }
       if (e.last && c && t > 0) {
@@ -404,7 +405,7 @@ function et({
           ...Q.default,
           velocity: e.velocity
         }
-      }) : D({ type: "drag" }) : B ? !u && f.current ? y.start({
+      }) : D({ type: "drag" }) : B ? !u && a.current ? y.start({
         val: 0,
         config: {
           ...Q.default,
@@ -425,28 +426,28 @@ function et({
       });
     },
     {
-      enabled: v && !ge && !c || !!c && !!re,
+      enabled: v && !he && !c || !!c && !!ne,
       axis: o,
-      from: () => c && a.current ? [
-        -a.current.scrollLeft,
-        -a.current.scrollTop
+      from: () => c && f.current ? [
+        -f.current.scrollLeft,
+        -f.current.scrollTop
       ] : o === "x" ? [W.val.get(), W.val.get()] : [W.val.get(), W.val.get()]
     }
   );
-  function Ne() {
+  function We() {
     return c ? o === "x" ? {
       overflowX: "auto"
     } : {
       overflowY: "auto"
     } : {};
   }
-  function ee() {
-    a.current && (d.current = a.current[o === "x" ? "scrollLeft" : "scrollTop"], a.current[o === "x" ? "scrollLeft" : "scrollTop"] === 0 && (f.current = !0, l.current = !1), a.current[o === "x" ? "scrollLeft" : "scrollTop"] > 0 && a.current[o === "x" ? "scrollLeft" : "scrollTop"] < g() && (f.current = !1, l.current = !1), a.current[o === "x" ? "scrollLeft" : "scrollTop"] === g() && (f.current = !1, l.current = !0));
+  function te() {
+    f.current && (d.current = f.current[o === "x" ? "scrollLeft" : "scrollTop"], f.current[o === "x" ? "scrollLeft" : "scrollTop"] === 0 && (a.current = !0, l.current = !1), f.current[o === "x" ? "scrollLeft" : "scrollTop"] > 0 && f.current[o === "x" ? "scrollLeft" : "scrollTop"] < g() && (a.current = !1, l.current = !1), f.current[o === "x" ? "scrollLeft" : "scrollTop"] === g() && (a.current = !1, l.current = !0));
   }
-  function We() {
+  function Pe() {
     return c ? {
       onWheel() {
-        W.val.stop(), ee();
+        W.val.stop(), te();
       }
     } : {};
   }
@@ -459,10 +460,10 @@ function et({
     }
     return t;
   }
-  function le({ id: e, immediate: r, shouldReset: t, type: i }) {
+  function se({ id: e, immediate: r, shouldReset: t, type: i }) {
     if (!v || R.current)
       return;
-    f.current = !1, l.current = !1;
+    a.current = !1, l.current = !1;
     const M = q(
       e,
       "The item you want to slide to doesn't exist; check the provided id."
@@ -480,25 +481,25 @@ function et({
       immediate: r
     });
   }
-  function se(e) {
+  function fe(e) {
     const r = q(e, "The item doesn't exist; check the provided id."), t = p.current;
     return u && t === n.length - 1 ? r === 0 : r === t + 1;
   }
-  function fe(e) {
+  function ae(e) {
     const r = q(e, "The item doesn't exist; check the provided id."), t = p.current;
     return u && t === 0 ? r === n.length - 1 : r === t - 1;
   }
-  function ae(e) {
+  function de(e) {
     return q(e, "The item you want to check doesn't exist; check the provided id.") === p.current;
   }
-  function Pe() {
-    return ge ? "unset" : o === "x" ? "pan-y" : "pan-x";
+  function Re() {
+    return he ? "unset" : o === "x" ? "pan-y" : "pan-x";
   }
   const b = c ? {
-    useListenToCustomEvent: A,
-    enterFullscreen: he,
-    exitFullscreen: ve,
-    getIsFullscreen: pe,
+    useListenToCustomEvent: S,
+    enterFullscreen: ve,
+    exitFullscreen: pe,
+    getIsFullscreen: xe,
     slideToPrevItem: (e = !0) => {
       V({
         type: "click",
@@ -512,10 +513,10 @@ function et({
       });
     }
   } : {
-    useListenToCustomEvent: A,
-    enterFullscreen: he,
-    exitFullscreen: ve,
-    getIsFullscreen: pe,
+    useListenToCustomEvent: S,
+    enterFullscreen: ve,
+    exitFullscreen: pe,
+    getIsFullscreen: xe,
     slideToPrevItem: (e = !0) => {
       V({
         type: "click",
@@ -529,20 +530,20 @@ function et({
       });
     },
     slideToItem: (e, r = !0) => {
-      le({ id: e, immediate: !r });
+      se({ id: e, immediate: !r });
     },
-    getIsNextItem: se,
-    getIsPrevItem: fe,
-    getIsActiveItem: ae
+    getIsNextItem: fe,
+    getIsPrevItem: ae,
+    getIsActiveItem: de
   };
-  He(() => {
-    x.current && v && (X.current = !0, xe());
-  }, [v]), E(() => {
-    p.current !== C && (X.current = !0, le({
+  ze(() => {
+    x.current && v && (X.current = !0, ye());
+  }, [v]), $(() => {
+    p.current !== C && (X.current = !0, se({
       id: C,
-      immediate: !Ie
+      immediate: !be
     }));
-  }, [C]), E(() => {
+  }, [C]), $(() => {
     if (v) {
       if (C > n.length - 1)
         throw new Error(
@@ -552,31 +553,34 @@ function et({
         `itemsPerSlide (${w}) is greater than the total quantity available items (${n.length}). Fallback to ${n.length})`
       );
     }
-  }, [C, n.length, w, v]), E(() => {
-    ie.current = window.innerWidth;
-  }, []), E(() => {
+  }, [C, n.length, w, v]), $(() => {
+    le.current = window.innerWidth;
+  }, []), $(() => {
     if (v) {
       if (u && c)
         throw new Error("`withLoop` and `freeScroll` can't be used together.");
       if (c && I === "fixed")
         throw new Error("`freeScroll` can't be used when `scrollType=fixed`.");
-      if (re && (I !== "fluid" || !c))
+      if (ne && (I !== "fluid" || !c))
         throw new Error(
           "`enableFreeScrollDrag` must be used with `slideType=fluid` and `freeScroll=true`"
         );
-      X.current = !0, xe();
+      if (_ && c)
+        throw new Error("`slideGroupOfItems` and `freeScroll` can't be used together.");
+      X.current = !0, ye();
     }
   }, [
     Z,
     w,
-    h,
+    m,
     T,
     v,
     u,
     I,
     c,
-    re
-  ]), E(() => {
+    ne,
+    _
+  ]), $(() => {
     if (!v)
       return;
     function e() {
@@ -585,66 +589,66 @@ function et({
     return document.addEventListener("visibilitychange", e), () => {
       document.removeEventListener("visibilitychange", e);
     };
-  }, [v]), E(() => {
-    if (a.current) {
+  }, [v]), $(() => {
+    if (f.current) {
       let e;
-      const r = new Ye(() => {
+      const r = new Je(() => {
         if (!R.current && !X.current) {
-          ie.current = window.innerWidth;
-          const t = S();
+          le.current = window.innerWidth;
+          const t = ee();
           window.clearTimeout(e), e = setTimeout(() => {
-            oe.current = g(), typeof t == "function" && t();
+            ie.current = g(), typeof t == "function" && t();
           }, 100);
         }
       });
-      return r.observe(a.current), () => {
+      return r.observe(f.current), () => {
         r.disconnect();
       };
     }
-  }, [S, g]), E(() => {
-    ne && ne({
+  }, [ee, g]), $(() => {
+    ce && ce({
       slideToNextItem: b.slideToNextItem,
       slideToPrevItem: b.slideToPrevItem,
       slideToItem: b == null ? void 0 : b.slideToItem
     });
-  }, [ne, b.slideToItem, b.slideToNextItem, b.slideToPrevItem]);
-  const Re = /* @__PURE__ */ P.jsx(de.Provider, { value: b, children: Me }), je = /* @__PURE__ */ P.jsx(de.Provider, { value: b, children: /* @__PURE__ */ P.jsx(
+  }, [ce, b.slideToItem, b.slideToNextItem, b.slideToPrevItem]);
+  const je = /* @__PURE__ */ P.jsx(ge.Provider, { value: b, children: Ce }), Ve = /* @__PURE__ */ P.jsx(ge.Provider, { value: b, children: /* @__PURE__ */ P.jsx(
     "div",
     {
       className: "use-spring-carousel-main-wrapper",
-      ref: a,
-      ...We(),
+      ref: f,
+      ...Pe(),
       style: {
         display: "flex",
         position: "relative",
         width: "100%",
         height: "100%",
-        ...Ne()
+        ...We()
       },
       children: /* @__PURE__ */ P.jsxs(
         "div",
         {
           className: "use-spring-carousel-track-wrapper",
           ref: x,
-          ...Ee(),
+          ...Ne(),
           style: {
             position: "relative",
             display: "flex",
             flexDirection: o === "x" ? "row" : "column",
-            touchAction: Pe(),
-            ...Fe()
+            touchAction: Re(),
+            ...Ee()
           },
           children: [
-            (c || !u) && h ? /* @__PURE__ */ P.jsx(
+            (c || !u) && m ? /* @__PURE__ */ P.jsx(
               "div",
               {
                 style: {
                   flexShrink: 0,
-                  width: h
+                  width: m
                 }
               }
             ) : null,
-            G.map((e, r) => /* @__PURE__ */ P.jsx(
+            L.map((e, r) => /* @__PURE__ */ P.jsx(
               "div",
               {
                 className: "use-spring-carousel-item",
@@ -653,27 +657,27 @@ function et({
                   display: "flex",
                   position: "relative",
                   flex: "1",
-                  ...ke(
-                    r === G.findIndex(
-                      (t) => t.id === G[G.length - 1].id
+                  ...Fe(
+                    r === L.findIndex(
+                      (t) => t.id === L[L.length - 1].id
                     )
                   )
                 },
                 children: typeof e.renderItem == "function" ? e.renderItem({
-                  getIsActiveItem: ae,
-                  getIsNextItem: se,
-                  getIsPrevItem: fe,
-                  useListenToCustomEvent: A
+                  getIsActiveItem: de,
+                  getIsNextItem: fe,
+                  getIsPrevItem: ae,
+                  useListenToCustomEvent: S
                 }) : e.renderItem
               },
               `${e.id}-${r}`
             )),
-            (c || !u) && h ? /* @__PURE__ */ P.jsx(
+            (c || !u) && m ? /* @__PURE__ */ P.jsx(
               "div",
               {
                 style: {
                   flexShrink: 0,
-                  width: h
+                  width: m
                 }
               }
             ) : null
@@ -682,17 +686,17 @@ function et({
       )
     }
   ) });
-  return { ...b, carouselFragment: je, thumbsFragment: Re };
+  return { ...b, carouselFragment: Ve, thumbsFragment: je };
 }
-const de = ze(void 0);
-function tt() {
-  const n = Xe(de);
+const ge = Xe(void 0);
+function rt() {
+  const n = Ye(ge);
   if (!n)
     throw new Error("useSpringCarouselContext must be used within the carousel.");
   return n;
 }
 export {
-  et as useSpringCarousel,
-  tt as useSpringCarouselContext
+  tt as useSpringCarousel,
+  rt as useSpringCarouselContext
 };
 //# sourceMappingURL=index.es2.js.map