@lanaco/lnc-react-ui 4.0.91 → 4.0.93

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,18 @@
-import { jsx as t, jsxs as w, Fragment as G } from "react/jsx-runtime";
-import { createElement as ae, useState as E, useEffect as j, forwardRef as V, useRef as Q, useImperativeHandle as ne, Suspense as se, memo as le, useMemo as ce } from "react";
-import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as _, l as X, o as ee } from "./utils-BXCGNjIy.js";
+import { jsx as o, jsxs as u, Fragment as V } from "react/jsx-runtime";
+import { createElement as se, useState as z, useEffect as G, forwardRef as Z, useRef as ee, useImperativeHandle as le, Suspense as ce, memo as de, useMemo as ge } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as B, l as Y, o as re } from "./utils-BXCGNjIy.js";
 import { M as A } from "./consts-BuFChS64.js";
-import { m as de } from "./motion-Ckekul_K.js";
+import { m as he } from "./motion-Ckekul_K.js";
 import { P as i } from "./index-S5Cd7WrG.js";
-import ge from "./Icon.js";
-import he from "./Badge.js";
+import fe from "./Icon.js";
+import me from "./Badge.js";
 import { u as M } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { u as re } from "./useDetectMobile-Bkvj0VMa.js";
-import fe from "./FlexBox.js";
-import { I as Y } from "./index-Dhf4jQmS.js";
+import { u as te } from "./useDetectMobile-Bkvj0VMa.js";
+import pe from "./FlexBox.js";
+import { I as q } from "./index-Dhf4jQmS.js";
 import L from "./IconButton.js";
-const me = m.div`
+const ue = f.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -27,8 +27,8 @@ const me = m.div`
     border: none;
     border-radius: 0;
   }
-`, pe = m.div`
-  border-radius: ${(e) => _(e.theme, "edged")};
+`, we = f.div`
+  border-radius: ${(e) => B(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -56,7 +56,7 @@ const me = m.div`
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, ue = m.div`
+`, be = f.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -119,7 +119,7 @@ const me = m.div`
       gap: 0.25rem;
     }
   }
-`, we = {
+`, xe = {
   "#ADE3EB": "#76D0DB",
   "#DDD6FE": "#C4B5FD",
   "#FDE68A": "#FCD34D",
@@ -131,13 +131,13 @@ const me = m.div`
   "#E7E5E4": "#D6D3D1",
   "#FED7AA": "#FDBA74",
   default: "#C4C8CF"
-}, q = (e = !1, o = !1, l = !1) => `
+}, J = (e = !1, t = !1, l = !1) => `
     display: flex;
-    ${o ? "flex-wrap: wrap;" : ""}
-    ${o ? "" : "flex-wrap: nowrap;"}
+    ${t ? "flex-wrap: wrap;" : ""}
+    ${t ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${l ? "justify-content: center;" : ""}
-  `, be = m(de.div)`
+  `, ve = f(he.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -154,22 +154,22 @@ const me = m.div`
     text-decoration: none;
   }
 
-  ${q(!0)}
+  ${J(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: ${(e) => e.isActive === !1 ? "var(--gray-900)" : "var(--primary-600)"};
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${(e) => _(e.theme, "slight")};
+  border-radius: ${(e) => B(e.theme, "slight")};
   transition: all 0.25s ease;
 
   & .logo-wrapper {
-    ${q(!0, !1, !0)}
+    ${J(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
     border: 3px solid
-      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : we[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
+      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : xe[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -211,15 +211,15 @@ const me = m.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, xe = m.div`
+`, ye = f.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, ve = (e) => `var(--${e}-700)`, ye = m.div`
-  border-radius: ${(e) => _(e.theme, e.borderRadius || "slight")};
-  background-color: ${(e) => ve(e == null ? void 0 : e.color)};
+`, $e = (e) => `var(--${e}-700)`, De = f.div`
+  border-radius: ${(e) => B(e.theme, e.borderRadius || "slight")};
+  background-color: ${(e) => $e(e == null ? void 0 : e.color)};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
@@ -233,44 +233,44 @@ const me = m.div`
   & i {
     font-size: 0.813rem;
   }
-`, te = (e) => {
+`, oe = (e) => {
   const {
-    uuid: o,
+    uuid: t,
     hasPermission: l = !0,
     isUser: a,
-    image: b,
+    image: w,
     name: n,
-    notifications: d = 0,
-    color: p = "primary",
-    size: x = "large",
+    notifications: g = 0,
+    color: m = "primary",
+    size: b = "large",
     style: D,
     disabled: s,
-    onSelect: c = () => {
+    onSelect: d = () => {
     },
-    isActive: $,
-    className: v,
+    isActive: v,
+    className: x,
     // new
-    themeData: u
-  } = e, S = {
+    themeData: p
+  } = e, C = {
     theme: M(),
-    color: p,
-    size: x,
+    color: m,
+    size: b,
     style: D,
     disabled: s
   };
-  return /* @__PURE__ */ ae(
-    be,
+  return /* @__PURE__ */ se(
+    ve,
     {
-      onClick: (N) => {
-        N.stopPropagation(), l === !0 && (c == null || c());
+      onClick: (S) => {
+        S.stopPropagation(), l === !0 && (d == null || d());
       },
-      ...S,
+      ...C,
       key: n,
       animate: {
         y: 0,
         opacity: 1
       },
-      className: `profile-item ${v}`,
+      className: `profile-item ${x}`,
       exit: {
         opacity: 0
       },
@@ -279,15 +279,15 @@ const me = m.div`
         y: -10,
         opacity: 0
       },
-      isActive: $,
-      themeColor: (u == null ? void 0 : u.code) || "transparent"
+      isActive: v,
+      themeColor: (p == null ? void 0 : p.code) || "transparent"
     },
-    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: b }),
-    /* @__PURE__ */ t("div", { className: "name", children: n }),
-    d > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(he, { className: "badge", color: "danger", size: "small", children: d > 99 ? "99+" : d }) })
+    /* @__PURE__ */ o("div", { className: "logo-wrapper", children: w }),
+    /* @__PURE__ */ o("div", { className: "name", children: n }),
+    g > 0 && /* @__PURE__ */ o("div", { className: "notifications-number", children: /* @__PURE__ */ o(me, { className: "badge", color: "danger", size: "small", children: g > 99 ? "99+" : g }) })
   );
 };
-te.propTypes = {
+oe.propTypes = {
   id: i.any,
   isUserProfile: i.bool,
   themeColor: i.string,
@@ -309,86 +309,86 @@ te.propTypes = {
   onSelect: i.func,
   hasPermission: i.bool
 };
-const J = (e, o) => {
-  if (!e || !o) return null;
-  let l = Math.floor((e == null ? void 0 : e.getTime()) - (o == null ? void 0 : o.getTime())), a = 1e3 * 60 * 60 * 24;
+const K = (e, t) => {
+  if (!e || !t) return null;
+  let l = Math.floor((e == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime())), a = 1e3 * 60 * 60 * 24;
   return Math.ceil(l / a);
-}, oe = (e) => {
-  const o = M(), {
+}, ie = (e) => {
+  const t = M(), {
     uuid: l,
     shopUuid: a,
-    title: b = "",
+    title: w = "",
     description: n,
-    badges: d,
-    coverPhoto: p,
-    onSelect: x,
+    badges: g,
+    coverPhoto: m,
+    onSelect: b,
     status: D,
     startDate: s,
-    endDate: c,
-    salesPackages: $,
-    shopName: v,
-    shopImage: u,
-    className: g,
-    onSelectCard: S = () => {
+    endDate: d,
+    salesPackages: v,
+    shopName: x,
+    shopImage: p,
+    className: h,
+    onSelectCard: C = () => {
     },
-    onSelectShop: N = () => {
+    onSelectShop: S = () => {
     },
     campaignSingleText: r,
-    salesCampaignTypes: h = [],
-    startsInPrefixTextPlural: P,
-    startsinSuffixTextPlural: I,
-    startsInPrefixTextSingular: z,
-    startsinSuffixTextSingular: H,
-    themeData: B,
-    ...f
-  } = e, k = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1;
-  J(
-    c ? new Date(c) : null,
+    salesCampaignTypes: y = [],
+    startsInPrefixTextPlural: H,
+    startsinSuffixTextPlural: N,
+    startsInPrefixTextSingular: R,
+    startsinSuffixTextSingular: I,
+    themeData: W,
+    ...j
+  } = e, U = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1;
+  K(
+    d ? new Date(d) : null,
     s ? new Date(s) : null
   );
-  const C = J(
+  const c = K(
     s ? new Date(s) : null,
     /* @__PURE__ */ new Date()
   );
-  return /* @__PURE__ */ w(
-    me,
+  return /* @__PURE__ */ u(
+    ue,
     {
-      theme: o,
-      className: g,
-      onClick: S,
-      ...f,
+      theme: t,
+      className: h,
+      onClick: C,
+      ...j,
       children: [
-        /* @__PURE__ */ w(pe, { theme: o, onClick: () => x == null ? void 0 : x(), children: [
-          /* @__PURE__ */ t("img", { src: p }),
-          /* @__PURE__ */ t(xe, { children: $ == null ? void 0 : $.map((T, R) => {
-            var W, U;
-            return /* @__PURE__ */ t(
-              ye,
+        /* @__PURE__ */ u(we, { theme: t, onClick: () => b == null ? void 0 : b(), children: [
+          /* @__PURE__ */ o("img", { src: m }),
+          /* @__PURE__ */ o(ye, { children: v == null ? void 0 : v.map(($, F) => {
+            var T, _;
+            return /* @__PURE__ */ o(
+              De,
               {
-                color: (W = h == null ? void 0 : h.find((y) => y.value === T)) == null ? void 0 : W.color,
-                theme: o,
-                children: /* @__PURE__ */ t(
-                  ge,
+                color: (T = y == null ? void 0 : y.find((P) => P.value === $)) == null ? void 0 : T.color,
+                theme: t,
+                children: /* @__PURE__ */ o(
+                  fe,
                   {
-                    icon: (U = h == null ? void 0 : h.find((y) => y.value === T)) == null ? void 0 : U.icon
+                    icon: (_ = y == null ? void 0 : y.find((P) => P.value === $)) == null ? void 0 : _.icon
                   }
                 )
               },
-              `package__${R}`
+              `package__${F}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ w(ue, { theme: o, children: [
-          /* @__PURE__ */ w("div", { className: "text-block-wrapper", children: [
-            /* @__PURE__ */ w("div", { className: "title-block-wrapper", children: [
-              /* @__PURE__ */ t("div", { className: "campaign-title", children: r }),
-              /* @__PURE__ */ t("div", { className: "campaign-title-text", children: b }),
-              /* @__PURE__ */ t("div", { className: "timestamp-text", children: k ? "" : C === 1 ? `${z} ${C} ${H}` : `${P} ${C} ${I}` })
+        /* @__PURE__ */ u(be, { theme: t, children: [
+          /* @__PURE__ */ u("div", { className: "text-block-wrapper", children: [
+            /* @__PURE__ */ u("div", { className: "title-block-wrapper", children: [
+              /* @__PURE__ */ o("div", { className: "campaign-title", children: r }),
+              /* @__PURE__ */ o("div", { className: "campaign-title-text", children: w }),
+              /* @__PURE__ */ o("div", { className: "timestamp-text", children: U ? "" : c === 1 ? `${R} ${c} ${I}` : `${H} ${c} ${N}` })
             ] }),
-            /* @__PURE__ */ t("div", { children: n })
+            /* @__PURE__ */ o("div", { children: n })
           ] }),
-          /* @__PURE__ */ t(
-            te,
+          /* @__PURE__ */ o(
+            oe,
             {
               hasPermission: !0,
               image: (
@@ -398,19 +398,19 @@ const J = (e, o) => {
                 //   size={ImageSize.SMALL}
                 //   className={`${shopImage ? "" : "no-image"}`}
                 // />
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ o(
                   "img",
                   {
-                    src: u,
-                    className: `${u ? "" : "no-image"}`
+                    src: p,
+                    className: `${p ? "" : "no-image"}`
                   }
                 )
               ),
-              themeData: B,
+              themeData: W,
               isActive: !0,
               isUser: !1,
-              name: v,
-              onClick: () => N(a)
+              name: x,
+              onClick: () => S(a)
             }
           )
         ] })
@@ -418,13 +418,13 @@ const J = (e, o) => {
     }
   );
 };
-oe.propTypes = {
+ie.propTypes = {
   title: i.oneOfType([i.string, i.element]),
   numberOfListings: i.number,
   dropdown: i.any,
   color: i.string
 };
-const $e = m.div`
+const ke = f.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -435,7 +435,7 @@ const $e = m.div`
     position: absolute;
     top: 50%;
     left: 1.5rem;
-    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+    z-index: ${(e) => Y(e.arrowsZIndex) ? e.arrowsZIndex : 20};
   }
 
   & .hover-right-arrow {
@@ -443,7 +443,7 @@ const $e = m.div`
     position: absolute;
     top: 50%;
     right: 1.5rem;
-    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+    z-index: ${(e) => Y(e.arrowsZIndex) ? e.arrowsZIndex : 20};
   }
 
   & .clip-loader-wrapper {
@@ -458,7 +458,7 @@ const $e = m.div`
       display: flex;
     }
   }
-`, De = m.div`
+`, Ce = f.div`
   display: flex;
   align-items: center;
 
@@ -479,7 +479,7 @@ const $e = m.div`
       display: none;
     }
   }
-`, ke = m.div`
+`, Se = f.div`
   position: relative;
   padding: ${(e) => e.padding};
 
@@ -557,100 +557,104 @@ const $e = m.div`
       right: 0;
     }
   }
-`, Ce = (e, o) => {
-  const [l, a] = E({
+`, Ne = (e, t) => {
+  const [l, a] = z({
     trigger: null,
     direction: null
-  }), b = (n) => n.touches || n.originalEvent.touches;
-  return j(() => {
+  }), w = (n) => n.touches || n.originalEvent.touches;
+  return G(() => {
     const n = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
-    let d = null, p = null;
+    let g = null, m = null;
     if (n) {
-      const x = (s) => {
-        const c = b(s)[0];
-        d = c.clientX, p = c.clientY;
+      const b = (s) => {
+        const d = w(s)[0];
+        g = d.clientX, m = d.clientY;
       }, D = (s) => {
-        if (!d || !p)
+        if (!g || !m)
           return;
-        const c = s.touches[0].clientX, $ = s.touches[0].clientY, v = d - c, u = p - $;
-        Math.abs(v) > Math.abs(u) ? v > 0 ? a((g) => ({
-          trigger: !g.trigger,
-          direction: F.LEFT
-        })) : a((g) => ({
-          trigger: !g.trigger,
-          direction: F.RIGHT
-        })) : u > 0 ? a((g) => ({
-          trigger: !g.trigger,
-          direction: F.UP
-        })) : a((g) => ({
-          trigger: !g.trigger,
-          direction: F.DOWN
-        })), d = null, p = null;
+        const d = s.touches[0].clientX, v = s.touches[0].clientY, x = g - d, p = m - v;
+        Math.abs(x) > Math.abs(p) ? x > 0 ? a((h) => ({
+          trigger: !h.trigger,
+          direction: E.LEFT
+        })) : a((h) => ({
+          trigger: !h.trigger,
+          direction: E.RIGHT
+        })) : p > 0 ? a((h) => ({
+          trigger: !h.trigger,
+          direction: E.UP
+        })) : a((h) => ({
+          trigger: !h.trigger,
+          direction: E.DOWN
+        })), g = null, m = null;
       };
-      return n.addEventListener("touchstart", x), n.addEventListener("touchmove", D), () => {
-        n.removeEventListener("touchstart", x), n.addEventListener("touchmove", D);
+      return n.addEventListener("touchstart", b), n.addEventListener("touchmove", D), () => {
+        n.removeEventListener("touchstart", b), n.addEventListener("touchmove", D);
       };
     }
   }, []), l;
-}, F = {
+}, E = {
   UP: "up",
   DOWN: "down",
   RIGHT: "right",
   LEFT: "left"
-}, ie = V(
+}, ae = Z(
   ({
     title: e,
-    columnGap: o = "2rem",
+    columnGap: t = "2rem",
     rowGap: l = "1.25rem",
     scrollBySize: a = 300,
-    wrapForMobile: b = !1,
+    wrapForMobile: w = !1,
     wrap: n = !1,
-    children: d,
-    methodsRef: p,
-    arrowsVisibleOnHover: x = !0,
+    children: g,
+    methodsRef: m,
+    arrowsVisibleOnHover: b = !0,
     rightAlignArrows: D = !1,
     padding: s = "0",
-    showTimesBtn: c,
-    noArrows: $,
-    onShowEnd: v,
-    arrowsZIndex: u,
-    ...g
-  }, S) => {
-    const N = re(), r = M(), [h, P] = E(!1), [I, z] = E(!1), [H, B] = E(!0), f = Q(), k = Ce(f);
-    j(() => {
-      (k == null ? void 0 : k.direction) === F.RIGHT && I !== !0 ? T() : (k == null ? void 0 : k.direction) === F.LEFT && h !== !0 && C();
-    }, [k]);
-    const C = () => {
-      var y;
-      (y = f.current) == null || y.scrollBy(a, 0);
+    showTimesBtn: d,
+    noArrows: v,
+    onShowEnd: x,
+    arrowsZIndex: p,
+    elementsCount: h,
+    minElementsCount: C = 2,
+    ...S
+  }, r) => {
+    const y = te(), H = M(), [N, R] = z(
+      h < C
+    ), [I, W] = z(!1), [j, U] = z(!0), c = ee(), $ = Ne(c);
+    G(() => {
+      ($ == null ? void 0 : $.direction) === E.RIGHT && I !== !0 ? T() : ($ == null ? void 0 : $.direction) === E.LEFT && N !== !0 && F();
+    }, [$]);
+    const F = () => {
+      var k;
+      (k = c.current) == null || k.scrollBy(a, 0);
     }, T = () => {
-      var y;
-      (y = f.current) == null || y.scrollBy(-a, 0);
-    }, [R, W] = E(!1);
-    j(() => {
-      var y, Z;
-      W(
-        ((y = f == null ? void 0 : f.current) == null ? void 0 : y.scrollWidth) > ((Z = f == null ? void 0 : f.current) == null ? void 0 : Z.clientWidth)
+      var k;
+      (k = c.current) == null || k.scrollBy(-a, 0);
+    }, [_, P] = z(!1);
+    G(() => {
+      var k, X;
+      P(
+        ((k = c == null ? void 0 : c.current) == null ? void 0 : k.scrollWidth) > ((X = c == null ? void 0 : c.current) == null ? void 0 : X.clientWidth)
       );
-    }, [d]), ne(p, () => ({
+    }, [g]), le(m, () => ({
       scrollToEnd() {
-        U();
+        ne();
       },
       scrollLeft() {
         T();
       },
       scrollRight() {
-        C();
+        F();
       }
     }));
-    const U = () => {
-      f.current.scrollLeft = f.current.scrollWidth;
+    const ne = () => {
+      c.current.scrollLeft = c.current.scrollWidth;
     };
-    return /* @__PURE__ */ w($e, { arrowsZIndex: u, children: [
-      /* @__PURE__ */ w(De, { children: [
-        /* @__PURE__ */ t("div", { children: e }),
-        /* @__PURE__ */ w("div", { className: "btns-group", children: [
-          /* @__PURE__ */ t(
+    return /* @__PURE__ */ u(ke, { arrowsZIndex: p, children: [
+      /* @__PURE__ */ u(Ce, { children: [
+        /* @__PURE__ */ o("div", { children: e }),
+        /* @__PURE__ */ u("div", { className: "btns-group", children: [
+          /* @__PURE__ */ o(
             L,
             {
               borderRadius: "curved",
@@ -662,21 +666,21 @@ const $e = m.div`
               onClick: T
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ o(
             L,
             {
               borderRadius: "curved",
               btnType: "tinted",
               className: "scroll-arrow-right",
               color: "neutral",
-              disabled: h,
+              disabled: N,
               icon: "angle-right",
-              onClick: C
+              onClick: F
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         L,
         {
           borderRadius: "curved",
@@ -688,65 +692,65 @@ const $e = m.div`
           onClick: T
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         L,
         {
           borderRadius: "curved",
           btnType: "tinted",
           className: "hover-right-arrow scroll-arrow-right",
           color: "neutral",
-          disabled: h,
+          disabled: N,
           icon: "angle-right",
-          onClick: C
+          onClick: F
         }
       ),
-      /* @__PURE__ */ t(
-        ke,
+      /* @__PURE__ */ o(
+        Se,
         {
-          ref: S,
-          arrowsVisibleOnHover: x,
-          hasOverflow: R,
-          noArrows: $,
+          ref: r,
+          arrowsVisibleOnHover: b,
+          hasOverflow: _,
+          noArrows: v,
           padding: s,
           rightAlignArrows: D,
-          showTimesBtn: c,
-          theme: r,
-          ...g,
-          children: /* @__PURE__ */ w(
-            fe,
+          showTimesBtn: d,
+          theme: H,
+          ...S,
+          children: /* @__PURE__ */ u(
+            pe,
             {
-              ref: f,
+              ref: c,
               className: "scrollable-container",
-              columnGap: o,
+              columnGap: t,
               rowGap: l,
-              wrap: n || b && N ? "Wrap" : "NoWrap",
+              wrap: n || w && y ? "Wrap" : "NoWrap",
               children: [
-                /* @__PURE__ */ t(
-                  Y,
+                /* @__PURE__ */ o(
+                  q,
                   {
                     isHorizontal: !0,
                     onIsNotVisible: () => {
-                      I === !0 && z(!1);
+                      I === !0 && W(!1);
                     },
                     onIsVisible: () => {
-                      I === !1 && z(!0);
+                      I === !1 && W(!0);
                     }
                   }
                 ),
-                d,
-                /* @__PURE__ */ t(
-                  Y,
+                g,
+                /* @__PURE__ */ o(
+                  q,
                   {
                     isHorizontal: !0,
                     onIsNotVisible: () => {
-                      h === !0 && P(!1), B(!0);
+                      N === !0 && R(!1), U(!0);
                     },
                     onIsVisible: () => {
-                      h === !1 && P(!0), B(!1), v == null || v();
+                      N === !1 && R(!0), U(!1), x == null || x();
                     }
                   }
                 ),
-                H && R && /* @__PURE__ */ t("div", { className: "gradient" })
+                j && _ && /* @__PURE__ */ o("div", { className: "gradient" })
               ]
             }
           )
@@ -755,7 +759,7 @@ const $e = m.div`
     ] });
   }
 );
-ie.propTypes = {
+ae.propTypes = {
   title: i.string,
   rowGap: i.string,
   columnGap: i.string,
@@ -767,7 +771,7 @@ ie.propTypes = {
   rightAlignArrows: i.bool,
   padding: i.string
 };
-const Se = m.div`
+const Ie = f.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -801,19 +805,19 @@ const Se = m.div`
       margin-right: 0;
     }
   }
-`, O = m.div`
+`, O = f.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${ee("-90deg")}
-`, Ne = m.div`
+  ${re("-90deg")}
+`, Te = f.div`
   display: flex;
   flex-direction: ${(e) => e != null && e.row ? "row" : "column"};
   gap: ${(e) => (e == null ? void 0 : e.gap) ?? "0.5rem"};
   width: ${(e) => (e == null ? void 0 : e.width) ?? "100%"};
-`, K = m.div`
-  border-radius: ${(e) => _(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, Q = f.div`
+  border-radius: ${(e) => B(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
   background: var(--gray-200, #dddfe4);
   position: relative;
   max-height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
@@ -822,10 +826,10 @@ const Se = m.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${ee()}
-`, Ie = m.div`
+  ${re()}
+`, Ae = f.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => _(e.theme, "edged")};
+  border-radius: ${(e) => B(e.theme, "edged")};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
   border: 1px solid var(--gray-95012, #14161a1f);
 
@@ -851,74 +855,74 @@ const Se = m.div`
     align-items: center;
     gap: 0.5rem;
   }
-`, Te = V(({}, e) => {
-  const o = M();
-  return /* @__PURE__ */ w(Ie, { ref: e, theme: o, children: [
-    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
-      K,
+`, Fe = Z(({}, e) => {
+  const t = M();
+  return /* @__PURE__ */ u(Ae, { ref: e, theme: t, children: [
+    /* @__PURE__ */ o("div", { className: "campaign__left-section", children: /* @__PURE__ */ o(
+      Q,
       {
-        theme: o,
+        theme: t,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
-    /* @__PURE__ */ w("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ w(Ne, { theme: o, children: [
-        /* @__PURE__ */ t(O, { heightCoeff: 0.75, theme: o, width: "35%" }),
-        /* @__PURE__ */ t(O, { heightCoeff: 1.25, theme: o }),
-        /* @__PURE__ */ t(O, { heightCoeff: 3, theme: o })
+    /* @__PURE__ */ u("div", { className: "campaign__right-section", children: [
+      /* @__PURE__ */ u(Te, { theme: t, children: [
+        /* @__PURE__ */ o(O, { heightCoeff: 0.75, theme: t, width: "35%" }),
+        /* @__PURE__ */ o(O, { heightCoeff: 1.25, theme: t }),
+        /* @__PURE__ */ o(O, { heightCoeff: 3, theme: t })
       ] }),
-      /* @__PURE__ */ w("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ t(
-          K,
+      /* @__PURE__ */ u("div", { className: "campaign__user", children: [
+        /* @__PURE__ */ o(
+          Q,
           {
-            theme: o,
+            theme: t,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(O, { theme: o, width: "75%" })
+        /* @__PURE__ */ o(O, { theme: t, width: "75%" })
       ] })
     ] })
   ] });
-}), Ae = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (l, a) => /* @__PURE__ */ t(
-  Te,
+}), Ee = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ o(V, { children: Array.from({ length: e }, (l, a) => /* @__PURE__ */ o(
+  Fe,
   {},
-  `${o}-skeleton-campaign-card-${a}`
-)) }), Fe = ({
+  `${t}-skeleton-campaign-card-${a}`
+)) }), _e = ({
   children: e,
-  fallbackComponent: o = /* @__PURE__ */ t(G, {}),
+  fallbackComponent: t = /* @__PURE__ */ o(V, {}),
   isLoading: l = !1,
   itemsCount: a = 5,
-  keyPrefix: b
-}) => /* @__PURE__ */ t(se, { fallback: o, children: l === !0 ? /* @__PURE__ */ t(Ae, { itemsCount: a, keyPrefix: b }) : e }), Ee = le(oe), Ze = V(
+  keyPrefix: w
+}) => /* @__PURE__ */ o(ce, { fallback: t, children: l === !0 ? /* @__PURE__ */ o(Ee, { itemsCount: a, keyPrefix: w }) : e }), Pe = de(ie), Ye = Z(
   ({
     sellerType: e = "Shop",
-    items: o = [],
+    items: t = [],
     title: l,
     isLoading: a,
-    onSelectCard: b = () => {
+    onSelectCard: w = () => {
     },
     onSelectShop: n = () => {
     },
-    getImage: d = () => {
+    getImage: g = () => {
     },
     // new
-    customScrollSize: p,
-    campaignSingleText: x,
+    customScrollSize: m,
+    campaignSingleText: b,
     salesCampaignTypes: D = [],
     startsInPrefixTextPlural: s,
-    startsinSuffixTextPlural: c,
-    startsInPrefixTextSingular: $,
-    startsinSuffixTextSingular: v
-  }, u) => {
-    const g = Q(), S = re(), N = ce(() => o == null ? void 0 : o.map((r, h) => /* @__PURE__ */ t(
-      Ee,
+    startsinSuffixTextPlural: d,
+    startsInPrefixTextSingular: v,
+    startsinSuffixTextSingular: x
+  }, p) => {
+    const h = ee(), C = te(), S = ge(() => t == null ? void 0 : t.map((r, y) => /* @__PURE__ */ o(
+      Pe,
       {
         className: "campaign-item",
-        coverPhoto: d(
+        coverPhoto: g(
           r == null ? void 0 : r.coverPhoto,
           (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
         ),
@@ -932,41 +936,42 @@ const Se = m.div`
         startDate: r == null ? void 0 : r.startDate,
         title: r == null ? void 0 : r.name,
         uuid: r == null ? void 0 : r.campaignUuid,
-        onSelectCard: () => b(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+        onSelectCard: () => w(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
         onSelectShop: () => n(r == null ? void 0 : r.shopUuid),
-        campaignSingleText: x,
+        campaignSingleText: b,
         salesCampaignTypes: D,
         startsInPrefixTextPlural: s,
-        startsinSuffixTextPlural: c,
-        startsInPrefixTextSingular: $,
-        startsinSuffixTextSingular: v,
+        startsinSuffixTextPlural: d,
+        startsInPrefixTextSingular: v,
+        startsinSuffixTextSingular: x,
         themeData: r == null ? void 0 : r.themeData
       },
-      `campaign__item__${h}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
-    )), [o]);
-    return /* @__PURE__ */ t(G, { children: (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(Se, { ref: u, className: "row-section-scroll", children: /* @__PURE__ */ t(
-      ie,
+      `campaign__item__${y}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+    )), [t]);
+    return /* @__PURE__ */ o(V, { children: (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ o(Ie, { ref: p, className: "row-section-scroll", children: /* @__PURE__ */ o(
+      ae,
       {
         arrowsVisibleOnHover: !1,
         columnGap: "0",
-        methodsRef: g,
+        methodsRef: h,
         mobileHoverScrollButtons: !0,
         noArrows: !0,
         padding: "0.25rem 0",
         rightAlignArrows: !0,
-        scrollBySize: S ? window.innerWidth : p > 0 ? p : window.innerWidth,
+        elementsCount: t == null ? void 0 : t.length,
+        scrollBySize: C ? window.innerWidth : m > 0 ? m : window.innerWidth,
         showTimesBtn: !1,
         title: l,
         onShowEnd: () => {
         },
         arrowsZIndex: 11,
-        children: /* @__PURE__ */ t(
-          Fe,
+        children: /* @__PURE__ */ o(
+          _e,
           {
             isLoading: a,
             itemsCount: 2,
             keyPrefix: "sales-camp",
-            children: N
+            children: S
           }
         )
       }
@@ -974,5 +979,5 @@ const Se = m.div`
   }
 );
 export {
-  Ze as default
+  Ye as default
 };