@lanaco/lnc-react-ui 4.0.92 → 4.0.94

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,40 @@
 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 { M as A } from "./consts-BuFChS64.js";
-import { m as de } from "./motion-Ckekul_K.js";
+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 ge from "./Icon.js";
-import he 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 L from "./IconButton.js";
-const me = m.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 me = m.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;
   }
-`, pe = m.div`
-  border-radius: ${(e) => _(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 me = m.div`
     }
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, ue = m.div`
+`, De = b.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -105,7 +127,7 @@ const me = m.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -119,7 +141,7 @@ const me = m.div`
       gap: 0.25rem;
     }
   }
-`, we = {
+`, ke = {
   "#ADE3EB": "#76D0DB",
   "#DDD6FE": "#C4B5FD",
   "#FDE68A": "#FCD34D",
@@ -131,13 +153,13 @@ const me = m.div`
   "#E7E5E4": "#D6D3D1",
   "#FED7AA": "#FDBA74",
   default: "#C4C8CF"
-}, q = (e = !1, o = !1, l = !1) => `
+}, Q = (e = !1, o = !1, a = !1) => `
     display: flex;
     ${o ? "flex-wrap: wrap;" : ""}
     ${o ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
-    ${l ? "justify-content: center;" : ""}
-  `, be = m(de.div)`
+    ${a ? "justify-content: center;" : ""}
+  `, Se = b(me.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -154,22 +176,22 @@ const me = m.div`
     text-decoration: none;
   }
 
-  ${q(!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) => _(e.theme, "slight")};
+  border-radius: ${(e) => O(e.theme, "slight")};
   transition: all 0.25s ease;
 
   & .logo-wrapper {
-    ${q(!0, !1, !0)}
+    ${Q(!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)" : ke[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -211,15 +233,15 @@ const me = m.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, xe = m.div`
+`, Ce = b.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)};
+`, 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 me = m.div`
   & i {
     font-size: 0.813rem;
   }
-`, te = (e) => {
+`, ne = (e) => {
   const {
     uuid: o,
-    hasPermission: l = !0,
-    isUser: a,
-    image: b,
-    name: n,
-    notifications: d = 0,
-    color: p = "primary",
-    size: x = "large",
-    style: D,
-    disabled: s,
-    onSelect: c = () => {
+    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: $,
-    className: v,
+    className: m,
     // new
-    themeData: u
-  } = e, S = {
-    theme: M(),
-    color: p,
-    size: x,
-    style: D,
-    disabled: s
+    themeData: x
+  } = e, D = {
+    theme: Z(),
+    color: h,
+    size: v,
+    style: p,
+    disabled: y
   };
-  return /* @__PURE__ */ ae(
-    be,
+  return /* @__PURE__ */ ce(
+    Se,
     {
-      onClick: (N) => {
-        N.stopPropagation(), l === !0 && (c == null || c());
+      onClick: (k) => {
+        k.stopPropagation(), a === !0 && (c == null || c());
       },
-      ...S,
-      key: n,
+      ...D,
+      key: l,
       animate: {
         y: 0,
         opacity: 1
       },
-      className: `profile-item ${v}`,
+      className: `profile-item ${m}`,
       exit: {
         opacity: 0
       },
-      hasPermission: l,
+      hasPermission: a,
       initial: {
         y: -10,
         opacity: 0
       },
       isActive: $,
-      themeColor: (u == null ? void 0 : u.code) || "transparent"
+      themeColor: (x == null ? void 0 : x.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__ */ 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 }) })
   );
 };
-te.propTypes = {
+ne.propTypes = {
   id: i.any,
   isUserProfile: i.bool,
   themeColor: i.string,
@@ -309,86 +331,87 @@ te.propTypes = {
   onSelect: i.func,
   hasPermission: i.bool
 };
-const J = (e, o) => {
+const ee = (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;
-  return Math.ceil(l / a);
-}, oe = (e) => {
-  const o = M(), {
-    uuid: l,
-    shopUuid: a,
-    title: b = "",
+  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: d,
-    coverPhoto: p,
-    onSelect: x,
-    status: D,
-    startDate: s,
-    endDate: c,
-    salesPackages: $,
-    shopName: v,
-    shopImage: u,
-    className: g,
-    onSelectCard: S = () => {
+    badges: h,
+    coverPhoto: v,
+    onSelect: p,
+    status: y,
+    startDate: c,
+    endDate: $,
+    salesPackages: m,
+    shopName: x,
+    shopImage: g,
+    className: D,
+    onSelectCard: k = () => {
     },
-    onSelectShop: N = () => {
+    onSelectShop: I = () => {
     },
-    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,
-    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 = J(
-    s ? new Date(s) : null,
+  const f = ee(
+    c ? new Date(c) : null,
     /* @__PURE__ */ new Date()
   );
   return /* @__PURE__ */ w(
-    me,
+    ye,
     {
-      theme: o,
-      className: g,
-      onClick: S,
-      ...f,
+      ref: o,
+      theme: a,
+      className: D,
+      onClick: k,
+      ...X,
       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;
+        /* @__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(
-              ye,
+              Te,
               {
-                color: (W = h == null ? void 0 : h.find((y) => y.value === T)) == null ? void 0 : W.color,
-                theme: o,
+                color: (F = S == null ? void 0 : S.find((L) => L.value === N)) == null ? void 0 : F.color,
+                theme: a,
                 children: /* @__PURE__ */ t(
-                  ge,
+                  we,
                   {
-                    icon: (U = h == null ? void 0 : h.find((y) => y.value === T)) == null ? void 0 : U.icon
+                    icon: (R = S == null ? void 0 : S.find((L) => L.value === N)) == null ? void 0 : R.icon
                   }
                 )
               },
-              `package__${R}`
+              `package__${z}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ w(ue, { theme: o, children: [
+        /* @__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: 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__ */ 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__ */ t("div", { children: n })
           ] }),
           /* @__PURE__ */ t(
-            te,
+            ne,
             {
               hasPermission: !0,
               image: (
@@ -401,30 +424,30 @@ const J = (e, o) => {
                 /* @__PURE__ */ t(
                   "img",
                   {
-                    src: u,
-                    className: `${u ? "" : "no-image"}`
+                    src: g,
+                    className: `${g ? "" : "no-image"}`
                   }
                 )
               ),
-              themeData: B,
+              themeData: _,
               isActive: !0,
               isUser: !1,
-              name: v,
-              onClick: () => N(a)
+              name: x,
+              onClick: () => I(u)
             }
           )
         ] })
       ]
     }
   );
-};
-oe.propTypes = {
+});
+ae.propTypes = {
   title: i.oneOfType([i.string, i.element]),
   numberOfListings: i.number,
   dropdown: i.any,
   color: i.string
 };
-const $e = m.div`
+const Ae = b.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -435,7 +458,7 @@ const $e = m.div`
     position: absolute;
     top: 50%;
     left: 1.5rem;
-    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+    z-index: ${(e) => J(e.arrowsZIndex) ? e.arrowsZIndex : 20};
   }
 
   & .hover-right-arrow {
@@ -443,7 +466,7 @@ const $e = m.div`
     position: absolute;
     top: 50%;
     right: 1.5rem;
-    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+    z-index: ${(e) => J(e.arrowsZIndex) ? e.arrowsZIndex : 20};
   }
 
   & .clip-loader-wrapper {
@@ -451,14 +474,14 @@ const $e = m.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;
     }
   }
-`, De = m.div`
+`, _e = b.div`
   display: flex;
   align-items: center;
 
@@ -473,13 +496,13 @@ const $e = m.div`
     gap: 0.375rem;
   }
 
-  @media (max-width: ${A + "px"}) {
+  @media (max-width: ${E + "px"}) {
     padding: 0 1rem;
     & .btns-group {
       display: none;
     }
   }
-`, ke = m.div`
+`, Fe = b.div`
   position: relative;
   padding: ${(e) => e.padding};
 
@@ -547,7 +570,7 @@ const $e = m.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,196 +580,203 @@ const $e = m.div`
       right: 0;
     }
   }
-`, Ce = (e, o) => {
-  const [l, a] = E({
+`, Be = (e, o) => {
+  const [a, s] = B({
     trigger: null,
     direction: null
-  }), b = (n) => n.touches || n.originalEvent.touches;
-  return j(() => {
-    const n = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
-    let d = null, p = null;
-    if (n) {
-      const x = (s) => {
-        const c = b(s)[0];
-        d = c.clientX, p = c.clientY;
-      }, D = (s) => {
-        if (!d || !p)
+  }), 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 c = s.touches[0].clientX, $ = s.touches[0].clientY, v = d - c, u = p - $;
-        Math.abs(v) > Math.abs(u) ? v > 0 ? a((g) => ({
+        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: F.LEFT
-        })) : a((g) => ({
+          direction: W.LEFT
+        })) : s((g) => ({
           trigger: !g.trigger,
-          direction: F.RIGHT
-        })) : u > 0 ? a((g) => ({
+          direction: W.RIGHT
+        })) : x > 0 ? s((g) => ({
           trigger: !g.trigger,
-          direction: F.UP
-        })) : a((g) => ({
+          direction: W.UP
+        })) : s((g) => ({
           trigger: !g.trigger,
-          direction: F.DOWN
-        })), d = null, p = null;
+          direction: W.DOWN
+        })), n = null, h = null;
       };
-      return n.addEventListener("touchstart", x), n.addEventListener("touchmove", D), () => {
-        n.removeEventListener("touchstart", x), n.addEventListener("touchmove", D);
+      return l.addEventListener("touchstart", v), l.addEventListener("touchmove", p), () => {
+        l.removeEventListener("touchstart", v), l.addEventListener("touchmove", p);
       };
     }
-  }, []), l;
-}, F = {
+  }, []), a;
+}, W = {
   UP: "up",
   DOWN: "down",
   RIGHT: "right",
   LEFT: "left"
-}, ie = V(
+}, se = V(
   ({
     title: e,
     columnGap: o = "2rem",
-    rowGap: l = "1.25rem",
-    scrollBySize: a = 300,
-    wrapForMobile: b = !1,
-    wrap: n = !1,
-    children: d,
-    methodsRef: p,
-    arrowsVisibleOnHover: x = !0,
-    rightAlignArrows: D = !1,
-    padding: s = "0",
+    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: 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);
-    }, 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)
+    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)
       );
-    }, [d]), ne(p, () => ({
+    }, [n]), de(h, () => ({
       scrollToEnd() {
-        U();
+        le();
       },
       scrollLeft() {
-        T();
+        F();
       },
       scrollRight() {
-        C();
+        z();
       }
     }));
-    const U = () => {
+    const le = () => {
       f.current.scrollLeft = f.current.scrollWidth;
     };
-    return /* @__PURE__ */ w($e, { arrowsZIndex: u, children: [
-      /* @__PURE__ */ w(De, { children: [
+    return /* @__PURE__ */ w(Ae, { arrowsZIndex: x, children: [
+      /* @__PURE__ */ w(_e, { children: [
         /* @__PURE__ */ t("div", { children: e }),
-        /* @__PURE__ */ w("div", { className: "btns-group", children: [
+        g && /* @__PURE__ */ w("div", { className: "btns-group", children: [
           /* @__PURE__ */ t(
-            L,
+            j,
             {
               borderRadius: "curved",
               btnType: "tinted",
               className: "scroll-arrow-left",
               color: "neutral",
-              disabled: I,
+              disabled: r,
               icon: "angle-left",
-              onClick: T
+              onClick: F
             }
           ),
           /* @__PURE__ */ t(
-            L,
+            j,
             {
               borderRadius: "curved",
               btnType: "tinted",
               className: "scroll-arrow-right",
               color: "neutral",
-              disabled: h,
+              disabled: T,
               icon: "angle-right",
-              onClick: C
+              onClick: z
             }
           )
         ] })
       ] }),
+      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(
-        L,
-        {
-          borderRadius: "curved",
-          btnType: "tinted",
-          className: "hover-left-arrow scroll-arrow-left",
-          color: "neutral",
-          disabled: I,
-          icon: "angle-left",
-          onClick: T
-        }
-      ),
-      /* @__PURE__ */ t(
-        L,
-        {
-          borderRadius: "curved",
-          btnType: "tinted",
-          className: "hover-right-arrow scroll-arrow-right",
-          color: "neutral",
-          disabled: h,
-          icon: "angle-right",
-          onClick: C
-        }
-      ),
-      /* @__PURE__ */ t(
-        ke,
+        Fe,
         {
-          ref: S,
-          arrowsVisibleOnHover: x,
+          ref: P,
+          arrowsVisibleOnHover: v,
           hasOverflow: R,
           noArrows: $,
-          padding: s,
-          rightAlignArrows: D,
+          padding: y,
+          rightAlignArrows: p,
           showTimesBtn: c,
-          theme: r,
-          ...g,
+          theme: d,
+          ...I,
           children: /* @__PURE__ */ w(
-            fe,
+            ve,
             {
               ref: f,
               className: "scrollable-container",
               columnGap: o,
-              rowGap: l,
-              wrap: n || b && N ? "Wrap" : "NoWrap",
+              rowGap: a,
+              wrap: l || u && S ? "Wrap" : "NoWrap",
               children: [
                 /* @__PURE__ */ t(
-                  Y,
+                  K,
                   {
                     isHorizontal: !0,
                     onIsNotVisible: () => {
-                      I === !0 && z(!1);
+                      r === !0 && _(!1);
                     },
                     onIsVisible: () => {
-                      I === !1 && z(!0);
+                      r === !1 && _(!0);
                     }
                   }
                 ),
-                d,
+                n,
                 /* @__PURE__ */ t(
-                  Y,
+                  K,
                   {
                     isHorizontal: !0,
                     onIsNotVisible: () => {
-                      h === !0 && P(!1), B(!0);
+                      T === !0 && C(!1), M(!0);
                     },
                     onIsVisible: () => {
-                      h === !1 && P(!0), B(!1), v == null || v();
+                      T === !1 && C(!0), M(!1), m == null || m();
                     }
                   }
                 ),
-                H && R && /* @__PURE__ */ t("div", { className: "gradient" })
+                X && R && /* @__PURE__ */ t("div", { className: "gradient" })
               ]
             }
           )
@@ -755,7 +785,7 @@ const $e = m.div`
     ] });
   }
 );
-ie.propTypes = {
+se.propTypes = {
   title: i.string,
   rowGap: i.string,
   columnGap: i.string,
@@ -767,7 +797,7 @@ ie.propTypes = {
   rightAlignArrows: i.bool,
   padding: i.string
 };
-const Se = m.div`
+const Ee = b.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -785,35 +815,39 @@ const Se = m.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 = m.div`
+`, H = b.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`
+  ${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%"};
-`, K = m.div`
-  border-radius: ${(e) => _(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"};
@@ -822,10 +856,10 @@ const Se = m.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${ee()}
-`, Ie = m.div`
+  ${oe()}
+`, Pe = b.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => _(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);
 
@@ -851,11 +885,11 @@ 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: [
+`, 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(
-      K,
+      re,
       {
         theme: o,
         width: "15rem",
@@ -864,14 +898,14 @@ const Se = m.div`
       }
     ) }),
     /* @__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__ */ 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__ */ w("div", { className: "campaign__user", children: [
         /* @__PURE__ */ t(
-          K,
+          re,
           {
             theme: o,
             width: "2.5rem",
@@ -879,100 +913,120 @@ const Se = m.div`
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(O, { theme: o, width: "75%" })
+        /* @__PURE__ */ t(H, { theme: o, width: "75%" })
       ] })
     ] })
   ] });
-}), Ae = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (l, a) => /* @__PURE__ */ t(
-  Te,
+}), We = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (a, s) => /* @__PURE__ */ t(
+  ze,
   {},
-  `${o}-skeleton-campaign-card-${a}`
-)) }), Fe = ({
+  `${o}-skeleton-campaign-card-${s}`
+)) }), Re = ({
   children: e,
   fallbackComponent: o = /* @__PURE__ */ t(G, {}),
-  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(
+  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: o = [],
-    title: l,
-    isLoading: a,
-    onSelectCard: b = () => {
+    title: a,
+    isLoading: s,
+    onSelectCard: u = () => {
     },
-    onSelectShop: n = () => {
+    onSelectShop: l = () => {
     },
-    getImage: d = () => {
+    getImage: n = () => {
     },
     // new
-    customScrollSize: p,
-    campaignSingleText: x,
-    salesCampaignTypes: D = [],
-    startsInPrefixTextPlural: s,
+    customScrollSize: h,
+    campaignSingleText: v,
+    salesCampaignTypes: p = [],
+    startsInPrefixTextPlural: y,
     startsinSuffixTextPlural: c,
     startsInPrefixTextSingular: $,
-    startsinSuffixTextSingular: v
-  }, u) => {
-    const g = Q(), S = re(), N = ce(() => o == null ? void 0 : o.map((r, h) => /* @__PURE__ */ t(
+    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
+        },
+        `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,
       {
-        className: "campaign-item",
-        coverPhoto: d(
-          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: () => b(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
-        onSelectShop: () => n(r == null ? void 0 : r.shopUuid),
-        campaignSingleText: x,
-        salesCampaignTypes: D,
-        startsInPrefixTextPlural: s,
-        startsinSuffixTextPlural: c,
-        startsInPrefixTextSingular: $,
-        startsinSuffixTextSingular: v,
-        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,
-      {
-        arrowsVisibleOnHover: !1,
-        columnGap: "0",
-        methodsRef: g,
-        mobileHoverScrollButtons: !0,
-        noArrows: !0,
-        padding: "0.25rem 0",
-        rightAlignArrows: !0,
-        scrollBySize: S ? window.innerWidth : p > 0 ? p : window.innerWidth,
-        showTimesBtn: !1,
-        title: l,
-        onShowEnd: () => {
-        },
-        arrowsZIndex: 11,
+        ref: x,
+        className: "row-section-scroll",
+        lastItemIdx: (d == null ? void 0 : d.length) + 1,
         children: /* @__PURE__ */ t(
-          Fe,
+          se,
           {
-            isLoading: a,
-            itemsCount: 2,
-            keyPrefix: "sales-camp",
-            children: N
-          }
+            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 {
-  Ze as default
+  rr as default
 };