@lanaco/lnc-react-ui 4.0.93 → 4.0.95

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,40 @@
-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 he } from "./motion-Ckekul_K.js";
+import { jsx as t, jsxs as w, Fragment as G } from "react/jsx-runtime";
+import { useState as B, useEffect as U, useMemo as te, createElement as ce, forwardRef as V, useRef as Y, useImperativeHandle as de, Suspense as he, memo as ge } from "react";
+import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { z as fe, A as ue, B as pe, a as O, l as J, o as oe } from "./utils-WHYrEnYF.js";
+import { M as E } from "./consts-BuFChS64.js";
+import { m as me } from "./motion-Ckekul_K.js";
 import { P as i } from "./index-S5Cd7WrG.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 te } from "./useDetectMobile-Bkvj0VMa.js";
-import pe from "./FlexBox.js";
-import { I as q } from "./index-Dhf4jQmS.js";
-import L from "./IconButton.js";
-const ue = f.div`
+import we from "./Icon.js";
+import be from "./Badge.js";
+import { u as Z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { u as ie } from "./useDetectMobile-Bkvj0VMa.js";
+import ve from "./FlexBox.js";
+import { I as K } from "./index-Dhf4jQmS.js";
+import j from "./IconButton.js";
+var xe = function(e) {
+  return e === void 0 && (e = { laptopL: 1440, laptop: 1024, tablet: 768 }), function() {
+    var o = B(fe ? window.innerWidth : 0), a = o[0], s = o[1];
+    U(function() {
+      var n = function() {
+        s(window.innerWidth);
+      };
+      return n(), ue(window, "resize", n), function() {
+        pe(window, "resize", n);
+      };
+    });
+    var u = te(function() {
+      return Object.entries(e).sort(function(n, h) {
+        return n[1] >= h[1] ? 1 : -1;
+      });
+    }, [e]), l = u.reduce(function(n, h) {
+      var v = h[0], p = h[1];
+      return a >= p ? v : n;
+    }, u[0][0]);
+    return l;
+  };
+};
+const ye = b.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -20,15 +42,15 @@ const ue = f.div`
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
     border: none;
     border-radius: 0;
   }
-`, we = f.div`
-  border-radius: ${(e) => B(e.theme, "edged")};
+`, $e = b.div`
+  border-radius: ${(e) => O(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -51,12 +73,12 @@ const ue = f.div`
     }
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, be = f.div`
+`, De = b.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -105,7 +127,7 @@ const ue = f.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -119,7 +141,7 @@ const ue = f.div`
       gap: 0.25rem;
     }
   }
-`, xe = {
+`, ke = {
   "#ADE3EB": "#76D0DB",
   "#DDD6FE": "#C4B5FD",
   "#FDE68A": "#FCD34D",
@@ -131,13 +153,13 @@ const ue = f.div`
   "#E7E5E4": "#D6D3D1",
   "#FED7AA": "#FDBA74",
   default: "#C4C8CF"
-}, J = (e = !1, t = !1, l = !1) => `
+}, Q = (e = !1, o = !1, a = !1) => `
     display: flex;
-    ${t ? "flex-wrap: wrap;" : ""}
-    ${t ? "" : "flex-wrap: nowrap;"}
+    ${o ? "flex-wrap: wrap;" : ""}
+    ${o ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
-    ${l ? "justify-content: center;" : ""}
-  `, ve = f(he.div)`
+    ${a ? "justify-content: center;" : ""}
+  `, Se = b(me.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -154,22 +176,22 @@ const ue = f.div`
     text-decoration: none;
   }
 
-  ${J(!0)}
+  ${Q(!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) => B(e.theme, "slight")};
+  border-radius: ${(e) => O(e.theme, "slight")};
   transition: all 0.25s ease;
 
   & .logo-wrapper {
-    ${J(!0, !1, !0)}
+    ${Q(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
     border: 3px solid
-      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : xe[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
+      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : ke[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -211,15 +233,15 @@ const ue = f.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, ye = f.div`
+`, Ce = b.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, $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)};
+`, Ne = (e) => `var(--${e}-700)`, Te = b.div`
+  border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
+  background-color: ${(e) => Ne(e == null ? void 0 : e.color)};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
@@ -233,61 +255,61 @@ const ue = f.div`
   & i {
     font-size: 0.813rem;
   }
-`, oe = (e) => {
+`, ne = (e) => {
   const {
-    uuid: t,
-    hasPermission: l = !0,
-    isUser: a,
-    image: w,
-    name: n,
-    notifications: g = 0,
-    color: m = "primary",
-    size: b = "large",
-    style: D,
-    disabled: s,
-    onSelect: d = () => {
+    uuid: o,
+    hasPermission: a = !0,
+    isUser: s,
+    image: u,
+    name: l,
+    notifications: n = 0,
+    color: h = "primary",
+    size: v = "large",
+    style: p,
+    disabled: y,
+    onClick: c = () => {
     },
-    isActive: v,
-    className: x,
+    isActive: $,
+    className: m,
     // new
-    themeData: p
-  } = e, C = {
-    theme: M(),
-    color: m,
-    size: b,
-    style: D,
-    disabled: s
+    themeData: x
+  } = e, D = {
+    theme: Z(),
+    color: h,
+    size: v,
+    style: p,
+    disabled: y
   };
-  return /* @__PURE__ */ se(
-    ve,
+  return /* @__PURE__ */ ce(
+    Se,
     {
-      onClick: (S) => {
-        S.stopPropagation(), l === !0 && (d == null || d());
+      onClick: (k) => {
+        k.stopPropagation(), a === !0 && (c == null || c());
       },
-      ...C,
-      key: n,
+      ...D,
+      key: l,
       animate: {
         y: 0,
         opacity: 1
       },
-      className: `profile-item ${x}`,
+      className: `profile-item ${m}`,
       exit: {
         opacity: 0
       },
-      hasPermission: l,
+      hasPermission: a,
       initial: {
         y: -10,
         opacity: 0
       },
-      isActive: v,
-      themeColor: (p == null ? void 0 : p.code) || "transparent"
+      isActive: $,
+      themeColor: (x == null ? void 0 : x.code) || "transparent"
     },
-    /* @__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 }) })
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: u }),
+    /* @__PURE__ */ t("div", { className: "name", children: l }),
+    n > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(be, { className: "badge", color: "danger", size: "small", children: n > 99 ? "99+" : n }) })
   );
 };
-oe.propTypes = {
+ne.propTypes = {
   id: i.any,
   isUserProfile: i.bool,
   themeColor: i.string,
@@ -309,86 +331,87 @@ oe.propTypes = {
   onSelect: i.func,
   hasPermission: i.bool
 };
-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);
-}, ie = (e) => {
-  const t = M(), {
-    uuid: l,
-    shopUuid: a,
-    title: w = "",
+const ee = (e, o) => {
+  if (!e || !o) return null;
+  let a = Math.floor((e == null ? void 0 : e.getTime()) - (o == null ? void 0 : o.getTime())), s = 1e3 * 60 * 60 * 24;
+  return Math.ceil(a / s);
+}, ae = V((e, o) => {
+  const a = Z(), {
+    uuid: s,
+    shopUuid: u,
+    title: l = "",
     description: n,
-    badges: g,
-    coverPhoto: m,
-    onSelect: b,
-    status: D,
-    startDate: s,
-    endDate: d,
-    salesPackages: v,
+    badges: h,
+    coverPhoto: v,
+    onSelect: p,
+    status: y,
+    startDate: c,
+    endDate: $,
+    salesPackages: m,
     shopName: x,
-    shopImage: p,
-    className: h,
-    onSelectCard: C = () => {
+    shopImage: g,
+    className: D,
+    onSelectCard: k = () => {
     },
-    onSelectShop: S = () => {
+    onSelectShop: I = () => {
     },
-    campaignSingleText: r,
-    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
+    campaignSingleText: P,
+    salesCampaignTypes: S = [],
+    startsInPrefixTextPlural: d,
+    startsinSuffixTextPlural: T,
+    startsInPrefixTextSingular: C,
+    startsinSuffixTextSingular: r,
+    themeData: _,
+    ...X
+  } = e, M = c ? new Date(c) <= /* @__PURE__ */ new Date() : !1;
+  ee(
+    $ ? new Date($) : null,
+    c ? new Date(c) : null
   );
-  const c = K(
-    s ? new Date(s) : null,
+  const f = ee(
+    c ? new Date(c) : null,
     /* @__PURE__ */ new Date()
   );
-  return /* @__PURE__ */ u(
-    ue,
+  return /* @__PURE__ */ w(
+    ye,
     {
-      theme: t,
-      className: h,
-      onClick: C,
-      ...j,
+      ref: o,
+      theme: a,
+      className: D,
+      onClick: k,
+      ...X,
       children: [
-        /* @__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,
+        /* @__PURE__ */ w($e, { theme: a, onClick: () => p == null ? void 0 : p(), children: [
+          /* @__PURE__ */ t("img", { src: v }),
+          /* @__PURE__ */ t(Ce, { children: m == null ? void 0 : m.map((N, z) => {
+            var F, R;
+            return /* @__PURE__ */ t(
+              Te,
               {
-                color: (T = y == null ? void 0 : y.find((P) => P.value === $)) == null ? void 0 : T.color,
-                theme: t,
-                children: /* @__PURE__ */ o(
-                  fe,
+                color: (F = S == null ? void 0 : S.find((L) => L.value === N)) == null ? void 0 : F.color,
+                theme: a,
+                children: /* @__PURE__ */ t(
+                  we,
                   {
-                    icon: (_ = y == null ? void 0 : y.find((P) => P.value === $)) == null ? void 0 : _.icon
+                    icon: (R = S == null ? void 0 : S.find((L) => L.value === N)) == null ? void 0 : R.icon
                   }
                 )
               },
-              `package__${F}`
+              `package__${z}`
             );
           }) })
         ] }),
-        /* @__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__ */ w(De, { theme: a, children: [
+          /* @__PURE__ */ w("div", { className: "text-block-wrapper", children: [
+            /* @__PURE__ */ w("div", { className: "title-block-wrapper", children: [
+              /* @__PURE__ */ t("div", { className: "campaign-title", children: P }),
+              /* @__PURE__ */ t("div", { className: "campaign-title-text", children: l }),
+              /* @__PURE__ */ t("div", { className: "timestamp-text", children: M ? "" : f === 1 ? `${C} ${f} ${r}` : `${d} ${f} ${T}` })
             ] }),
-            /* @__PURE__ */ o("div", { children: n })
+            /* @__PURE__ */ t("div", { children: n })
           ] }),
-          /* @__PURE__ */ o(
-            oe,
+          /* @__PURE__ */ t(
+            ne,
             {
               hasPermission: !0,
               image: (
@@ -398,33 +421,33 @@ const K = (e, t) => {
                 //   size={ImageSize.SMALL}
                 //   className={`${shopImage ? "" : "no-image"}`}
                 // />
-                /* @__PURE__ */ o(
+                /* @__PURE__ */ t(
                   "img",
                   {
-                    src: p,
-                    className: `${p ? "" : "no-image"}`
+                    src: g,
+                    className: `${g ? "" : "no-image"}`
                   }
                 )
               ),
-              themeData: W,
+              themeData: _,
               isActive: !0,
               isUser: !1,
               name: x,
-              onClick: () => S(a)
+              onClick: () => I(u)
             }
           )
         ] })
       ]
     }
   );
-};
-ie.propTypes = {
+});
+ae.propTypes = {
   title: i.oneOfType([i.string, i.element]),
   numberOfListings: i.number,
   dropdown: i.any,
   color: i.string
 };
-const ke = f.div`
+const Ae = b.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -435,7 +458,7 @@ const ke = f.div`
     position: absolute;
     top: 50%;
     left: 1.5rem;
-    z-index: ${(e) => Y(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+    z-index: ${(e) => J(e.arrowsZIndex) ? e.arrowsZIndex : 20};
   }
 
   & .hover-right-arrow {
@@ -443,7 +466,7 @@ const ke = f.div`
     position: absolute;
     top: 50%;
     right: 1.5rem;
-    z-index: ${(e) => Y(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+    z-index: ${(e) => J(e.arrowsZIndex) ? e.arrowsZIndex : 20};
   }
 
   & .clip-loader-wrapper {
@@ -451,14 +474,14 @@ const ke = f.div`
     padding: 0 1rem;
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     gap: 1.25rem;
     & .hover-left-arrow,
     .hover-right-arrow {
       display: flex;
     }
   }
-`, Ce = f.div`
+`, _e = b.div`
   display: flex;
   align-items: center;
 
@@ -473,13 +496,13 @@ const ke = f.div`
     gap: 0.375rem;
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     padding: 0 1rem;
     & .btns-group {
       display: none;
     }
   }
-`, Se = f.div`
+`, Fe = b.div`
   position: relative;
   padding: ${(e) => e.padding};
 
@@ -547,7 +570,7 @@ const ke = f.div`
     visibility: ${(e) => e.hasOverflow ? "visible" : "hidden"};
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     & .scroll-arrow-left,
     & .scroll-arrow-right {
       display: none;
@@ -557,200 +580,203 @@ const ke = f.div`
       right: 0;
     }
   }
-`, Ne = (e, t) => {
-  const [l, a] = z({
+`, Be = (e, o) => {
+  const [a, s] = B({
     trigger: null,
     direction: null
-  }), w = (n) => n.touches || n.originalEvent.touches;
-  return G(() => {
-    const n = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
-    let g = null, m = null;
-    if (n) {
-      const b = (s) => {
-        const d = w(s)[0];
-        g = d.clientX, m = d.clientY;
-      }, D = (s) => {
-        if (!g || !m)
+  }), u = (l) => l.touches || l.originalEvent.touches;
+  return U(() => {
+    const l = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
+    let n = null, h = null;
+    if (l) {
+      const v = (y) => {
+        const c = u(y)[0];
+        n = c.clientX, h = c.clientY;
+      }, p = (y) => {
+        if (!n || !h)
           return;
-        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;
+        const c = y.touches[0].clientX, $ = y.touches[0].clientY, m = n - c, x = h - $;
+        Math.abs(m) > Math.abs(x) ? m > 0 ? s((g) => ({
+          trigger: !g.trigger,
+          direction: W.LEFT
+        })) : s((g) => ({
+          trigger: !g.trigger,
+          direction: W.RIGHT
+        })) : x > 0 ? s((g) => ({
+          trigger: !g.trigger,
+          direction: W.UP
+        })) : s((g) => ({
+          trigger: !g.trigger,
+          direction: W.DOWN
+        })), n = null, h = null;
       };
-      return n.addEventListener("touchstart", b), n.addEventListener("touchmove", D), () => {
-        n.removeEventListener("touchstart", b), n.addEventListener("touchmove", D);
+      return l.addEventListener("touchstart", v), l.addEventListener("touchmove", p), () => {
+        l.removeEventListener("touchstart", v), l.addEventListener("touchmove", p);
       };
     }
-  }, []), l;
-}, E = {
+  }, []), a;
+}, W = {
   UP: "up",
   DOWN: "down",
   RIGHT: "right",
   LEFT: "left"
-}, ae = Z(
+}, se = V(
   ({
     title: e,
-    columnGap: t = "2rem",
-    rowGap: l = "1.25rem",
-    scrollBySize: a = 300,
-    wrapForMobile: w = !1,
-    wrap: n = !1,
-    children: g,
-    methodsRef: m,
-    arrowsVisibleOnHover: b = !0,
-    rightAlignArrows: D = !1,
-    padding: s = "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 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)
+    columnGap: o = "2rem",
+    rowGap: a = "1.25rem",
+    scrollBySize: s = 300,
+    wrapForMobile: u = !1,
+    wrap: l = !1,
+    children: n,
+    methodsRef: h,
+    arrowsVisibleOnHover: v = !0,
+    rightAlignArrows: p = !1,
+    padding: y = "0",
+    showTimesBtn: c,
+    noArrows: $,
+    onShowEnd: m,
+    arrowsZIndex: x,
+    showArrows: g,
+    elementsCount: D,
+    minElementsCount: k = 2,
+    ...I
+  }, P) => {
+    const S = ie(), d = Z(), [T, C] = B(
+      D < k
+    ), [r, _] = B(!1), [X, M] = B(!0), f = Y(), N = Be(f);
+    U(() => {
+      (N == null ? void 0 : N.direction) === W.RIGHT && r !== !0 ? F() : (N == null ? void 0 : N.direction) === W.LEFT && T !== !0 && z();
+    }, [N]);
+    const z = () => {
+      var A;
+      (A = f.current) == null || A.scrollBy(s, 0);
+    }, F = () => {
+      var A;
+      (A = f.current) == null || A.scrollBy(-s, 0);
+    }, [R, L] = B(!1);
+    U(() => {
+      var A, q;
+      L(
+        ((A = f == null ? void 0 : f.current) == null ? void 0 : A.scrollWidth) > ((q = f == null ? void 0 : f.current) == null ? void 0 : q.clientWidth)
       );
-    }, [g]), le(m, () => ({
+    }, [n]), de(h, () => ({
       scrollToEnd() {
-        ne();
+        le();
       },
       scrollLeft() {
-        T();
+        F();
       },
       scrollRight() {
-        F();
+        z();
       }
     }));
-    const ne = () => {
-      c.current.scrollLeft = c.current.scrollWidth;
+    const le = () => {
+      f.current.scrollLeft = f.current.scrollWidth;
     };
-    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,
+    return /* @__PURE__ */ w(Ae, { arrowsZIndex: x, children: [
+      /* @__PURE__ */ w(_e, { children: [
+        /* @__PURE__ */ t("div", { children: e }),
+        g && /* @__PURE__ */ w("div", { className: "btns-group", children: [
+          /* @__PURE__ */ t(
+            j,
             {
               borderRadius: "curved",
               btnType: "tinted",
               className: "scroll-arrow-left",
               color: "neutral",
-              disabled: I,
+              disabled: r,
               icon: "angle-left",
-              onClick: T
+              onClick: F
             }
           ),
-          /* @__PURE__ */ o(
-            L,
+          /* @__PURE__ */ t(
+            j,
             {
               borderRadius: "curved",
               btnType: "tinted",
               className: "scroll-arrow-right",
               color: "neutral",
-              disabled: N,
+              disabled: T,
               icon: "angle-right",
-              onClick: F
+              onClick: z
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ o(
-        L,
-        {
-          borderRadius: "curved",
-          btnType: "tinted",
-          className: "hover-left-arrow scroll-arrow-left",
-          color: "neutral",
-          disabled: I,
-          icon: "angle-left",
-          onClick: T
-        }
-      ),
-      /* @__PURE__ */ o(
-        L,
-        {
-          borderRadius: "curved",
-          btnType: "tinted",
-          className: "hover-right-arrow scroll-arrow-right",
-          color: "neutral",
-          disabled: N,
-          icon: "angle-right",
-          onClick: F
-        }
-      ),
-      /* @__PURE__ */ o(
-        Se,
+      g && /* @__PURE__ */ w(G, { children: [
+        /* @__PURE__ */ t(
+          j,
+          {
+            borderRadius: "curved",
+            btnType: "tinted",
+            className: "hover-left-arrow scroll-arrow-left",
+            color: "neutral",
+            disabled: r,
+            icon: "angle-left",
+            onClick: F
+          }
+        ),
+        /* @__PURE__ */ t(
+          j,
+          {
+            borderRadius: "curved",
+            btnType: "tinted",
+            className: "hover-right-arrow scroll-arrow-right",
+            color: "neutral",
+            disabled: T,
+            icon: "angle-right",
+            onClick: z
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(
+        Fe,
         {
-          ref: r,
-          arrowsVisibleOnHover: b,
-          hasOverflow: _,
-          noArrows: v,
-          padding: s,
-          rightAlignArrows: D,
-          showTimesBtn: d,
-          theme: H,
-          ...S,
-          children: /* @__PURE__ */ u(
-            pe,
+          ref: P,
+          arrowsVisibleOnHover: v,
+          hasOverflow: R,
+          noArrows: $,
+          padding: y,
+          rightAlignArrows: p,
+          showTimesBtn: c,
+          theme: d,
+          ...I,
+          children: /* @__PURE__ */ w(
+            ve,
             {
-              ref: c,
+              ref: f,
               className: "scrollable-container",
-              columnGap: t,
-              rowGap: l,
-              wrap: n || w && y ? "Wrap" : "NoWrap",
+              columnGap: o,
+              rowGap: a,
+              wrap: l || u && S ? "Wrap" : "NoWrap",
               children: [
-                /* @__PURE__ */ o(
-                  q,
+                /* @__PURE__ */ t(
+                  K,
                   {
                     isHorizontal: !0,
                     onIsNotVisible: () => {
-                      I === !0 && W(!1);
+                      r === !0 && _(!1);
                     },
                     onIsVisible: () => {
-                      I === !1 && W(!0);
+                      r === !1 && _(!0);
                     }
                   }
                 ),
-                g,
-                /* @__PURE__ */ o(
-                  q,
+                n,
+                /* @__PURE__ */ t(
+                  K,
                   {
                     isHorizontal: !0,
                     onIsNotVisible: () => {
-                      N === !0 && R(!1), U(!0);
+                      T === !0 && C(!1), M(!0);
                     },
                     onIsVisible: () => {
-                      N === !1 && R(!0), U(!1), x == null || x();
+                      T === !1 && C(!0), M(!1), m == null || m();
                     }
                   }
                 ),
-                j && _ && /* @__PURE__ */ o("div", { className: "gradient" })
+                X && R && /* @__PURE__ */ t("div", { className: "gradient" })
               ]
             }
           )
@@ -759,7 +785,7 @@ const ke = f.div`
     ] });
   }
 );
-ae.propTypes = {
+se.propTypes = {
   title: i.string,
   rowGap: i.string,
   columnGap: i.string,
@@ -771,7 +797,7 @@ ae.propTypes = {
   rightAlignArrows: i.bool,
   padding: i.string
 };
-const Ie = f.div`
+const Ee = b.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -789,35 +815,39 @@ const Ie = f.div`
   }
 
   & .gradient {
-    background: transparent;
+    background: transparent !important;
   }
 
   & .campaign-item {
     min-width: calc(50% - 0.87rem);
     width: calc(50% - 0.87rem);
-    margin-right: 1.25rem;
+    margin-right: 1rem;
+
+    &:nth-child(${(e) => e == null ? void 0 : e.lastItemIdx}) {
+      margin-right: 0;
+    }
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
       margin-right: 0;
     }
   }
-`, O = f.div`
+`, H = b.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${re("-90deg")}
-`, Te = f.div`
+  ${oe("-90deg")}
+`, Ie = b.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%"};
-`, Q = f.div`
-  border-radius: ${(e) => B(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, re = b.div`
+  border-radius: ${(e) => O(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"};
@@ -826,10 +856,10 @@ const Ie = f.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${re()}
-`, Ae = f.div`
+  ${oe()}
+`, Pe = b.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => B(e.theme, "edged")};
+  border-radius: ${(e) => O(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);
 
@@ -855,129 +885,148 @@ const Ie = f.div`
     align-items: center;
     gap: 0.5rem;
   }
-`, 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,
+`, ze = V(({}, e) => {
+  const o = Z();
+  return /* @__PURE__ */ w(Pe, { ref: e, theme: o, children: [
+    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
+      re,
       {
-        theme: t,
+        theme: o,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
-    /* @__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__right-section", children: [
+      /* @__PURE__ */ w(Ie, { theme: o, children: [
+        /* @__PURE__ */ t(H, { heightCoeff: 0.75, theme: o, width: "35%" }),
+        /* @__PURE__ */ t(H, { heightCoeff: 1.25, theme: o }),
+        /* @__PURE__ */ t(H, { heightCoeff: 3, theme: o })
       ] }),
-      /* @__PURE__ */ u("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ o(
-          Q,
+      /* @__PURE__ */ w("div", { className: "campaign__user", children: [
+        /* @__PURE__ */ t(
+          re,
           {
-            theme: t,
+            theme: o,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ o(O, { theme: t, width: "75%" })
+        /* @__PURE__ */ t(H, { theme: o, width: "75%" })
       ] })
     ] })
   ] });
-}), Ee = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ o(V, { children: Array.from({ length: e }, (l, a) => /* @__PURE__ */ o(
-  Fe,
+}), We = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (a, s) => /* @__PURE__ */ t(
+  ze,
   {},
-  `${t}-skeleton-campaign-card-${a}`
-)) }), _e = ({
+  `${o}-skeleton-campaign-card-${s}`
+)) }), Re = ({
   children: e,
-  fallbackComponent: t = /* @__PURE__ */ o(V, {}),
-  isLoading: l = !1,
-  itemsCount: a = 5,
-  keyPrefix: w
-}) => /* @__PURE__ */ o(ce, { fallback: t, children: l === !0 ? /* @__PURE__ */ o(Ee, { itemsCount: a, keyPrefix: w }) : e }), Pe = de(ie), Ye = Z(
+  fallbackComponent: o = /* @__PURE__ */ t(G, {}),
+  isLoading: a = !1,
+  itemsCount: s = 5,
+  keyPrefix: u
+}) => /* @__PURE__ */ t(he, { fallback: o, children: a === !0 ? /* @__PURE__ */ t(We, { itemsCount: s, keyPrefix: u }) : e }), Le = xe(), Ue = ge(ae), rr = V(
   ({
     sellerType: e = "Shop",
-    items: t = [],
-    title: l,
-    isLoading: a,
-    onSelectCard: w = () => {
+    items: o = [],
+    title: a,
+    isLoading: s,
+    onSelectCard: u = () => {
     },
-    onSelectShop: n = () => {
+    onSelectShop: l = () => {
     },
-    getImage: g = () => {
+    getImage: n = () => {
     },
     // new
-    customScrollSize: m,
-    campaignSingleText: b,
-    salesCampaignTypes: D = [],
-    startsInPrefixTextPlural: s,
-    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: g(
-          r == null ? void 0 : r.coverPhoto,
-          (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
-        ),
-        description: r == null ? void 0 : r.description,
-        endDate: r == null ? void 0 : r.endDate,
-        salesPackages: r == null ? void 0 : r.salesPackages,
-        sellerType: e,
-        shopImage: r == null ? void 0 : r.profileImage,
-        shopName: r == null ? void 0 : r.shopName,
-        shopUuid: r == null ? void 0 : r.shopUuid,
-        startDate: r == null ? void 0 : r.startDate,
-        title: r == null ? void 0 : r.name,
-        uuid: r == null ? void 0 : r.campaignUuid,
-        onSelectCard: () => w(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
-        onSelectShop: () => n(r == null ? void 0 : r.shopUuid),
-        campaignSingleText: b,
-        salesCampaignTypes: D,
-        startsInPrefixTextPlural: s,
-        startsinSuffixTextPlural: d,
-        startsInPrefixTextSingular: v,
-        startsinSuffixTextSingular: x,
-        themeData: r == null ? void 0 : r.themeData
-      },
-      `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: h,
-        mobileHoverScrollButtons: !0,
-        noArrows: !0,
-        padding: "0.25rem 0",
-        rightAlignArrows: !0,
-        elementsCount: t == null ? void 0 : t.length,
-        scrollBySize: C ? window.innerWidth : m > 0 ? m : window.innerWidth,
-        showTimesBtn: !1,
-        title: l,
-        onShowEnd: () => {
+    customScrollSize: h,
+    campaignSingleText: v,
+    salesCampaignTypes: p = [],
+    startsInPrefixTextPlural: y,
+    startsinSuffixTextPlural: c,
+    startsInPrefixTextSingular: $,
+    startsinSuffixTextSingular: m
+  }, x) => {
+    const g = Y(), D = Y(), k = Le(), I = ie(), [P, S] = B(0), d = te(() => {
+      var C;
+      return (C = o == null ? void 0 : o.slice(0, 6)) == null ? void 0 : C.map((r, _) => /* @__PURE__ */ t(
+        Ue,
+        {
+          className: "campaign-item",
+          ref: _ === 0 ? D : null,
+          coverPhoto: n(
+            r == null ? void 0 : r.coverPhoto,
+            (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
+          ),
+          description: r == null ? void 0 : r.description,
+          endDate: r == null ? void 0 : r.endDate,
+          salesPackages: r == null ? void 0 : r.salesPackages,
+          sellerType: e,
+          shopImage: r == null ? void 0 : r.profileImage,
+          shopName: r == null ? void 0 : r.shopName,
+          shopUuid: r == null ? void 0 : r.shopUuid,
+          startDate: r == null ? void 0 : r.startDate,
+          title: r == null ? void 0 : r.name,
+          uuid: r == null ? void 0 : r.campaignUuid,
+          onSelectCard: () => u(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+          onSelectShop: () => l(r == null ? void 0 : r.shopUuid),
+          campaignSingleText: v,
+          salesCampaignTypes: p,
+          startsInPrefixTextPlural: y,
+          startsinSuffixTextPlural: c,
+          startsInPrefixTextSingular: $,
+          startsinSuffixTextSingular: m,
+          themeData: r == null ? void 0 : r.themeData
         },
-        arrowsZIndex: 11,
-        children: /* @__PURE__ */ o(
-          _e,
+        `campaign__item__${_}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}__${k}`
+      ));
+    }, [k, o]);
+    U(() => {
+      var C;
+      S(h ?? ((C = D == null ? void 0 : D.current) == null ? void 0 : C.offsetWidth));
+    }, [d, k]);
+    const T = I ? (d == null ? void 0 : d.length) > 1 : (d == null ? void 0 : d.length) > 2;
+    return /* @__PURE__ */ t(G, { children: (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t(
+      Ee,
+      {
+        ref: x,
+        className: "row-section-scroll",
+        lastItemIdx: (d == null ? void 0 : d.length) + 1,
+        children: /* @__PURE__ */ t(
+          se,
           {
-            isLoading: a,
-            itemsCount: 2,
-            keyPrefix: "sales-camp",
-            children: S
-          }
+            arrowsVisibleOnHover: !1,
+            columnGap: "0",
+            methodsRef: g,
+            mobileHoverScrollButtons: !0,
+            noArrows: !0,
+            padding: "0.25rem 0",
+            rightAlignArrows: !0,
+            elementsCount: o == null ? void 0 : o.length,
+            scrollBySize: I ? P : P * 2 + 24,
+            showTimesBtn: !1,
+            title: a,
+            onShowEnd: () => {
+            },
+            arrowsZIndex: 11,
+            showArrows: T,
+            children: /* @__PURE__ */ t(
+              Re,
+              {
+                isLoading: s,
+                itemsCount: 2,
+                keyPrefix: "sales-camp",
+                children: d
+              }
+            )
+          },
+          `scroll-${k}`
         )
       }
-    ) }) });
+    ) });
   }
 );
 export {
-  Ye as default
+  rr as default
 };