@lanaco/lnc-react-ui 4.0.199 → 4.0.201

package/dist/SalesCampaignsSection.js

@@ -1,38 +1,44 @@
-import { jsx as n, jsxs as s, Fragment as Oe } from "react/jsx-runtime";
-import { forwardRef as j, useRef as $e, useEffect as oe, Fragment as je, createElement as Re, useState as te, Suspense as Be, memo as We, useMemo as Fe } from "react";
-import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as ie, k as ae, l as Ge, z as Ve, A as Ae, B as He, C as ue } from "./utils-DtEfC-TX.js";
-import { M as U } from "./consts-BuFChS64.js";
-import _e from "./Icon.js";
+import { jsx as n, jsxs as s, Fragment as Ee } from "react/jsx-runtime";
+import { forwardRef as R, useRef as $e, useEffect as ae, Fragment as Ue, createElement as Me, useState as ne, Suspense as Re, memo as je, useMemo as Be } from "react";
+import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as oe, k as te, l as Oe, z as We, A as Ge, B as Ve, C as he } from "./utils-DtEfC-TX.js";
+import { M as T } from "./consts-BuFChS64.js";
+import Se from "./Icon.js";
 import { D as fe } from "./ShopAvatar-4-fCYGEc.js";
-import Ze from "./Badge.js";
-import { P as o } from "./index-CblbdqjE.js";
-import { u as Ce } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import xe from "./IconButton.js";
+import Fe from "./Badge.js";
+import { u as _e } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import ue from "./IconButton.js";
 import { u as ke } from "./useDetectMobile-Bkvj0VMa.js";
-import { I as qe } from "./index-C0LcDEqa.js";
-import { m as Xe } from "./motion-Ckekul_K.js";
-import { S as O, c as be, b as ve, a as w, d as we } from "./style-BwQ4djFC.js";
-const Ye = y.a`
+import { I as Ae } from "./index-BdKi2ogu.js";
+import { m as Ze } from "./motion-Ckekul_K.js";
+import { S as M, c as xe, b as be, a as v, d as ve } from "./style-BwQ4djFC.js";
+const qe = w.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
   display: flex;
+  flex-direction: column;
   gap: 1rem;
-  padding: 1.25rem;
+  padding: 1rem;
   border-radius: 1.25rem;
-  border: 1px solid var(--gray-200, #e4e9f0);
-
-  @media (max-width: ${U + "px"}) {
-    flex-direction: column;
-    padding: 1rem;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  ${(r) => r != null && r.sponsored ? `
+        border: 1px solid transparent;
+        background: 
+          linear-gradient(#ffffff, #ffffff) padding-box,
+          linear-gradient(to bottom, #fcd34d, #fef3c7) border-box;
+      ` : `
+        border: 1px solid var(--gray-200, #e4e9f0);
+        background: #ffffff;
+      `}
+
+  @media (max-width: ${T + "px"}) {
+    width: 100%;
     gap: 0;
   }
-`, Je = y.div`
-  border-radius: ${(r) => ie(r.theme, "edged")};
-  height: 13.75rem;
-  width: 13.75rem;
-  min-width: 13.75rem;
+`, He = w.div`
+  border-radius: ${(r) => oe(r.theme, "edged")};
   cursor: pointer;
 
   position: relative;
@@ -51,7 +57,11 @@ const Ye = y.a`
       transform: scale(1.25);
     }
   }
-`, Ke = y.div`
+
+  @media (max-width: ${T + "px"}) {
+    width: 14.5rem;
+  }
+`, Xe = w.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -134,7 +144,7 @@ const Ye = y.a`
     color: var(--gray-600, #676e79);
   }
 
-  @media (max-width: ${U + "px"}) {
+  @media (max-width: ${T + "px"}) {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -159,13 +169,13 @@ const Ye = y.a`
       gap: 0.25rem;
     }
   }
-`, ye = (r = !1, t = !1, i = !1) => `
+`, we = (r = !1, t = !1, o = !1) => `
     display: flex;
     ${t ? "flex-wrap: wrap;" : ""}
     ${t ? "" : "flex-wrap: nowrap;"}
     ${r ? "align-items: center;" : ""}
-    ${i ? "justify-content: center;" : ""}
-  `, Qe = y.a`
+    ${o ? "justify-content: center;" : ""}
+  `, Ye = w.a`
   text-decoration: none;
   color: var(--gray-950);
   ${(r) => r.hasPermission === !0 && "cursor: pointer"};
@@ -183,14 +193,13 @@ const Ye = y.a`
     text-decoration: none;
   }
 
-  ${ye(!0)}
+  ${we(!0)}
   gap: 0.5rem;
-  padding: 0.5rem;
   color: var(--gray-950, #14161a);
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: ${(r) => ie(r.theme, "slight")};
+  border-radius: ${(r) => oe(r.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -199,7 +208,7 @@ const Ye = y.a`
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${ye(!0, !1, !0)}
+    ${we(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -238,18 +247,18 @@ const Ye = y.a`
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media (max-width: ${U + "px"}) {
+  @media (max-width: ${T + "px"}) {
     padding: 0;
     font-size: 0.875rem;
   }
-`, er = y.div`
+`, Je = w.div`
   position: absolute;
   top: 0.5rem;
   ${(r) => r.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, rr = y.div`
-  border-radius: ${(r) => ie(r.theme, r.borderRadius || "slight")};
+`, Ke = w.div`
+  border-radius: ${(r) => oe(r.theme, r.borderRadius || "slight")};
   background-color: ${(r) => r == null ? void 0 : r.color};
   color: white;
   height: 1.5rem;
@@ -264,182 +273,161 @@ const Ye = y.a`
   & i {
     font-size: 0.813rem;
   }
-`, nr = j(({ src: r, ...t }, i) => {
+`, Qe = R(({ src: r, ...t }, o) => {
   const a = $e();
-  return oe(() => {
-    var p;
-    const d = (l) => {
-      l.target.src = fe, l.onerror = null;
+  return ae(() => {
+    var m;
+    const c = (i) => {
+      i.target.src = fe, i.onerror = null;
     };
-    return (p = a == null ? void 0 : a.current) == null || p.addEventListener("error", d), () => {
-      var l;
-      (l = a == null ? void 0 : a.current) == null || l.removeEventListener("error", d);
+    return (m = a == null ? void 0 : a.current) == null || m.addEventListener("error", c), () => {
+      var i;
+      (i = a == null ? void 0 : a.current) == null || i.removeEventListener("error", c);
     };
-  }, []), /* @__PURE__ */ n(je, { ref: i, children: ae(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
-}), Ie = (r) => {
+  }, []), /* @__PURE__ */ n(Ue, { ref: o, children: te(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
+}), er = (r) => {
   const {
     uuid: t,
-    hasPermission: i = !0,
+    hasPermission: o = !0,
     isUser: a,
-    image: d,
-    imageComponent: p,
-    name: l,
-    notifications: _ = 0,
-    color: m = "primary",
-    size: h = "large",
+    image: c,
+    imageComponent: m,
+    name: i,
+    notifications: S = 0,
+    color: d = "primary",
+    size: p = "large",
     style: g,
     disabled: k,
     onClick: f = () => {
     },
-    isActive: v,
-    className: I,
-    shopCategory: N,
+    isActive: b,
+    className: C,
+    shopCategory: I,
     // new
-    themeData: S,
-    LinkComponent: c
-  } = r, x = c || "a", E = {
-    theme: Ce(),
-    color: m,
-    size: h,
+    themeData: y,
+    LinkComponent: l
+  } = r, u = l || "a", E = {
+    theme: _e(),
+    color: d,
+    size: p,
     style: g,
     disabled: k
   };
-  return /* @__PURE__ */ Re(
-    Qe,
+  return /* @__PURE__ */ Me(
+    Ye,
     {
-      onClick: (u) => {
-        u == null || u.preventDefault(), u.stopPropagation(), i === !0 && (f == null || f());
+      onClick: (h) => {
+        h == null || h.preventDefault(), h.stopPropagation(), o === !0 && (f == null || f());
       },
       ...E,
-      key: l,
-      className: `profile-item ${I}`,
-      hasPermission: i,
-      isActive: v,
-      themeColor: (S == null ? void 0 : S.code) || "transparent",
-      as: x,
-      ...c ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
+      key: i,
+      className: `profile-item ${C}`,
+      hasPermission: o,
+      isActive: b,
+      themeColor: (y == null ? void 0 : y.code) || "transparent",
+      as: u,
+      ...l ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Ge(p) ? p : d }),
+    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Oe(m) ? m : c }),
     /* @__PURE__ */ s("div", { children: [
-      /* @__PURE__ */ n("div", { className: "name", children: l }),
-      !a && /* @__PURE__ */ n("div", { className: "description", children: N }),
-      _ > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Ze, { className: "badge", color: "danger", size: "small", children: _ > 99 ? "99+" : _ }) })
+      /* @__PURE__ */ n("div", { className: "name", children: i }),
+      !a && /* @__PURE__ */ n("div", { className: "description", children: I }),
+      S > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Fe, { className: "badge", color: "danger", size: "small", children: S > 99 ? "99+" : S }) })
     ] })
   );
-};
-Ie.propTypes = {
-  id: o.any,
-  isUserProfile: o.bool,
-  themeColor: o.string,
-  image: o.any,
-  name: o.string,
-  notifications: o.number,
-  style: o.object,
-  className: o.string,
-  color: o.oneOf([
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "information",
-    "neutral"
-  ]),
-  size: o.oneOf(["large"]),
-  onSelect: o.func,
-  hasPermission: o.bool
-};
-const Se = (r) => {
+}, ye = (r) => {
   if (r !== void 0) {
-    const t = new Date(r), i = t.getFullYear(), a = t.getMonth() + 1;
-    return `${String(t.getDate()).padStart(2)}. ${a}. ${i}.`;
+    const t = new Date(r), o = t.getFullYear(), a = t.getMonth() + 1;
+    return `${String(t.getDate()).padStart(2)}. ${a}. ${o}.`;
   }
-}, tr = j((r, t) => {
-  var he;
-  const i = Ce(), {
+}, rr = R((r, t) => {
+  var pe;
+  const o = _e(), {
     uuid: a,
-    shopUuid: d,
-    title: p = "",
+    shopUuid: c,
+    title: m = "",
     // description,
     // badges,
-    coverPhoto: l,
-    onSelect: _,
+    coverPhoto: i,
+    onSelect: S,
     // status,
-    startDate: m,
-    endDate: h,
+    startDate: d,
+    endDate: p,
     salesPackages: g,
     shopName: k,
     shopCategory: f,
-    shopImage: v,
-    shopImageComponent: I,
-    className: N,
-    onSelectCard: S = () => {
+    shopImage: b,
+    shopImageComponent: C,
+    className: I,
+    onSelectCard: y = () => {
     },
-    onSelectShop: c = () => {
+    onSelectShop: l = () => {
     },
-    upcoming: x = !1,
+    upcoming: u = !1,
     upcomingCampaignText: D,
     campaignSingleText: E,
-    salesCampaignTypes: u = [],
+    salesCampaignTypes: h = [],
     startsInPrefixTextPlural: V,
-    startsinSuffixTextPlural: A,
-    startsInPrefixTextSingular: H,
+    startsinSuffixTextPlural: F,
+    startsInPrefixTextSingular: A,
     startsinSuffixTextSingular: se,
     endsInPrefixTextPlural: Z,
     endsinSuffixTextPlural: q,
-    endsInPrefixTextSingular: R,
-    endsinSuffixTextSingular: X,
-    endedText: Y,
-    themeData: le,
-    numberOfListings: P,
-    numberOfListingsTextSingular: J,
+    endsInPrefixTextSingular: j,
+    endsinSuffixTextSingular: H,
+    endedText: X,
+    themeData: ie,
+    numberOfListings: z,
+    numberOfListingsTextSingular: Y,
     numberOfListingsTextPlural: B,
     metadata: e,
-    LinkComponent: W,
-    ...ce
-  } = r, K = W || "a", de = $e(), M = Ve(m, h), Q = M !== -1 && (M == null ? void 0 : M.isEnded) === !0, ee = M !== -1 && !Q, re = Ae(m), z = He(h), Te = z !== null && z <= 2 && z > 0, me = ue(h), ge = me ? new Date(me) : null, Pe = /* @__PURE__ */ new Date(), ne = ge ? ge.getTime() - Pe.getTime() : null, F = ne !== null && ne > 0 && ne < 24 * 60 * 60 * 1e3, pe = (b, L, C, $, T) => C === 1 ? `${b} ${C} ${$}` : `${L} ${C} ${T}`, ze = () => {
-    if (!h) return null;
-    const b = ue(h), L = b ? new Date(b) : null;
+    LinkComponent: O,
+    sponsored: le,
+    ...J
+  } = r, Ce = O || "a", ce = $e(), U = We(d, p), K = U !== -1 && (U == null ? void 0 : U.isEnded) === !0, Q = U !== -1 && !K, ee = Ge(d), P = Ve(p), Ie = P !== null && P <= 2 && P > 0, de = he(p), ge = de ? new Date(de) : null, De = /* @__PURE__ */ new Date(), re = ge ? ge.getTime() - De.getTime() : null, W = re !== null && re > 0 && re < 24 * 60 * 60 * 1e3, me = (x, L, _, $, N) => _ === 1 ? `${x} ${_} ${$}` : `${L} ${_} ${N}`, Ne = () => {
+    if (!p) return null;
+    const x = he(p), L = x ? new Date(x) : null;
     if (!L) return null;
-    const C = Le, $ = L.getTime() - C.getTime();
+    const _ = Te, $ = L.getTime() - _.getTime();
     if ($ <= 0) return null;
-    const T = Math.floor($ / (1e3 * 60 * 60)), Ee = Math.floor($ % (1e3 * 60 * 60) / (1e3 * 60)), Me = Math.floor($ % (1e3 * 60) / 1e3);
-    return { hours: T, minutes: Ee, seconds: Me };
-  }, [Le, Ue] = te(/* @__PURE__ */ new Date());
-  oe(() => {
-    if (!F) return;
-    const b = setInterval(() => {
-      Ue(/* @__PURE__ */ new Date());
+    const N = Math.floor($ / (1e3 * 60 * 60)), Pe = Math.floor($ % (1e3 * 60 * 60) / (1e3 * 60)), Le = Math.floor($ % (1e3 * 60) / 1e3);
+    return { hours: N, minutes: Pe, seconds: Le };
+  }, [Te, ze] = ne(/* @__PURE__ */ new Date());
+  ae(() => {
+    if (!W) return;
+    const x = setInterval(() => {
+      ze(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(b);
-  }, [F]);
-  const G = F ? ze() : null;
+    return () => clearInterval(x);
+  }, [W]);
+  const G = W ? Ne() : null;
   return /* @__PURE__ */ s(
-    Ye,
+    qe,
     {
-      ref: de,
-      theme: i,
-      className: N,
+      ref: ce,
+      theme: o,
+      className: I,
       name: e == null ? void 0 : e.name,
       "data-accessor": e == null ? void 0 : e.accessor,
-      onClick: (b) => S(b, de),
-      as: K,
-      ...W ? { to: `/shop/${d}/campaign/${a}` } : { href: `/shop/${d}/campaign/${a}` },
-      ...ce,
+      onClick: (x) => y(x, ce),
+      as: Ce,
+      ...O ? { to: `/shop/${c}/campaign/${a}` } : { href: `/shop/${c}/campaign/${a}` },
+      sponsored: le,
+      ...J,
       children: [
-        /* @__PURE__ */ s(Je, { theme: i, children: [
-          /* @__PURE__ */ n("img", { src: l }),
-          /* @__PURE__ */ n(er, { children: g == null ? void 0 : g.map((b, L) => {
-            var C, $;
+        /* @__PURE__ */ s(He, { theme: o, children: [
+          /* @__PURE__ */ n("img", { src: i }),
+          /* @__PURE__ */ n(Je, { children: g == null ? void 0 : g.map((x, L) => {
+            var _, $;
             return /* @__PURE__ */ n(
-              rr,
+              Ke,
               {
-                color: (C = u == null ? void 0 : u.find((T) => T.value === b)) == null ? void 0 : C.color,
-                theme: i,
+                color: (_ = h == null ? void 0 : h.find((N) => N.value === x)) == null ? void 0 : _.color,
+                theme: o,
                 children: /* @__PURE__ */ n(
-                  _e,
+                  Se,
                   {
-                    icon: ($ = u == null ? void 0 : u.find((T) => T.value === b)) == null ? void 0 : $.icon
+                    icon: ($ = h == null ? void 0 : h.find((N) => N.value === x)) == null ? void 0 : $.icon
                   }
                 )
               },
@@ -447,20 +435,20 @@ const Se = (r) => {
             );
           }) })
         ] }),
-        /* @__PURE__ */ s(Ke, { theme: i, children: [
+        /* @__PURE__ */ s(Xe, { theme: o, children: [
           /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ s("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ n("div", { className: "campaign-title", children: (he = x ? D : E) == null ? void 0 : he.toUpperCase() }),
-            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: p }),
-            h && m && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
-              Se(m),
+            /* @__PURE__ */ n("div", { className: "campaign-title", children: (pe = u ? D : E) == null ? void 0 : pe.toUpperCase() }),
+            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: m }),
+            p && d && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
+              ye(d),
               " - ",
-              Se(h)
+              ye(p)
             ] }),
             /* @__PURE__ */ s("div", { className: "timestamp-text", children: [
-              P > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
-                P,
+              z > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
+                z,
                 " ",
-                P === 1 ? J : B,
+                z === 1 ? Y : B,
                 " ",
                 "∙",
                 " "
@@ -468,52 +456,52 @@ const Se = (r) => {
               /* @__PURE__ */ n(
                 "span",
                 {
-                  className: `duration-text ${Te ? "urgent" : ""} ${ee ? "" : "starts-in"}`,
-                  children: F && G ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
-                    R,
+                  className: `duration-text ${Ie ? "urgent" : ""} ${Q ? "" : "starts-in"}`,
+                  children: W && G ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
+                    j,
                     " ",
                     G.hours.toString().padStart(2, "0"),
                     ":",
                     G.minutes.toString().padStart(2, "0"),
                     ":",
                     G.seconds.toString().padStart(2, "0")
-                  ] }) : ee && !Q && z !== null && z > 0 ? pe(
-                    R,
+                  ] }) : Q && !K && P !== null && P > 0 ? me(
+                    j,
                     Z,
-                    z,
-                    X,
-                    q
-                  ) : Q ? Y || "Završena" : !ee && re !== null && re > 0 ? pe(
+                    P,
                     H,
+                    q
+                  ) : K ? X || "Završena" : !Q && ee !== null && ee > 0 ? me(
+                    A,
                     V,
-                    re,
+                    ee,
                     se,
-                    A
+                    F
                   ) : null
                 }
               )
             ] })
           ] }) }),
           /* @__PURE__ */ n(
-            Ie,
+            er,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(nr, { src: v }),
-              imageComponent: I,
-              themeData: le,
+              image: /* @__PURE__ */ n(Qe, { src: b }),
+              imageComponent: C,
+              themeData: ie,
               isActive: !0,
               isUser: !1,
               name: k,
               shopCategory: f,
-              uuid: d,
-              onClick: () => c(d)
+              uuid: c,
+              onClick: () => l(c)
             }
           )
         ] })
       ]
     }
   );
-}), ar = y.div`
+}), nr = w.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -552,7 +540,7 @@ const Se = (r) => {
     right: 0;
   }
 
-  @media (max-width: ${U + "px"}) {
+  @media (max-width: ${T + "px"}) {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -564,13 +552,13 @@ const Se = (r) => {
       }
     }
   }
-`, or = y(Xe.div)`
+`, tr = w(Ze.div)`
   display: grid;
   grid-template-columns: repeat(${(r) => r == null ? void 0 : r.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${U + "px"}) {
+  @media (max-width: ${T + "px"}) {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -592,37 +580,37 @@ const Se = (r) => {
       /* Safari and Chrome */
     }
   }
-`, Ne = j(
+`, ar = R(
   ({
     icon: r,
     title: t,
-    numOfSlides: i = 2,
+    numOfSlides: o = 4,
     showNavigation: a = !0,
-    hasNextPage: d = !1,
-    handleFetchNextPage: p = () => {
+    hasNextPage: c = !1,
+    handleFetchNextPage: m = () => {
     },
-    children: l
-  }, _) => {
-    const [m, h] = te(0), [g, k] = te(1), f = ke(), v = (l == null ? void 0 : l.length) ?? 1;
-    oe(() => {
-      const c = () => {
-        k(i);
+    children: i
+  }, S) => {
+    const [d, p] = ne(0), [g, k] = ne(1), f = ke(), b = (i == null ? void 0 : i.length) ?? 1;
+    ae(() => {
+      const l = () => {
+        k(o);
       };
-      return window.addEventListener("resize", c), c(), () => window.removeEventListener("resize", c);
+      return window.addEventListener("resize", l), l(), () => window.removeEventListener("resize", l);
     }, []);
-    const I = f ? l : l == null ? void 0 : l.slice(m, m + g), N = (c) => {
+    const C = f ? i : i == null ? void 0 : i.slice(d, d + g), I = (l) => {
       var D;
-      (D = c == null ? void 0 : c.target) == null || D.blur();
-      const x = m + g;
-      x < v && h(x), x + g >= v && d && p();
-    }, S = (c) => {
-      var x;
-      (x = c == null ? void 0 : c.target) == null || x.blur(), m - g >= 0 && h(m - g);
+      (D = l == null ? void 0 : l.target) == null || D.blur();
+      const u = d + g;
+      u < b && p(u), u + g >= b && c && m();
+    }, y = (l) => {
+      var u;
+      (u = l == null ? void 0 : l.target) == null || u.blur(), d - g >= 0 && p(d - g);
     };
-    return /* @__PURE__ */ s(ar, { ref: _, children: [
+    return /* @__PURE__ */ s(nr, { ref: S, children: [
       /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ s("div", { className: "scrollable-section__title", children: [
-        ae(r) && /* @__PURE__ */ n(
-          _e,
+        te(r) && /* @__PURE__ */ n(
+          Se,
           {
             icon: r,
             color: "primary",
@@ -630,15 +618,15 @@ const Se = (r) => {
             className: "title__icon"
           }
         ),
-        ae(t) && /* @__PURE__ */ s("div", { className: "title__text", children: [
+        te(t) && /* @__PURE__ */ s("div", { className: "title__text", children: [
           " ",
           t
         ] })
       ] }) }),
       /* @__PURE__ */ s(
-        or,
+        tr,
         {
-          numOfColumns: i,
+          numOfColumns: o,
           ...!f && {
             animate: {
               x: 0,
@@ -650,50 +638,41 @@ const Se = (r) => {
             }
           },
           children: [
-            I,
-            f && d && /* @__PURE__ */ n(qe, { onIsVisible: p })
+            C,
+            f && c && /* @__PURE__ */ n(Ae, { onIsVisible: m })
           ]
         },
-        `scrollable-section__content-${m}`
+        `scrollable-section__content-${d}`
       ),
-      a && v > g && !f && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
+      a && b > g && !f && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
         /* @__PURE__ */ n(
-          xe,
+          ue,
           {
             icon: "angle-left",
             borderRadius: "curved",
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: m === 0,
-            onClick: S
+            disabled: d === 0,
+            onClick: y
           }
         ),
         /* @__PURE__ */ n(
-          xe,
+          ue,
           {
             icon: "angle-right",
             borderRadius: "curved",
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: m + g >= v,
-            onClick: N
+            disabled: d + g >= b,
+            onClick: I
           }
         )
       ] })
     ] });
   }
-);
-Ne.propTypes = {
-  icon: o.string,
-  title: o.string,
-  numOfSlides: o.number,
-  numOfSlidesForMobile: o.number,
-  handleFetchNextPage: o.func,
-  showNavigation: o.bool
-};
-const ir = y.div`
+), or = w.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -710,34 +689,26 @@ const ir = y.div`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, De = j(
+`, sr = R(
   ({
     sectionName: r,
     imageUrl: t,
-    maxHeight: i = "16.25rem",
+    maxHeight: o = "16.25rem",
     className: a = "",
-    handleClick: d = () => {
+    handleClick: c = () => {
     }
-  }, p) => /* @__PURE__ */ n(
-    ir,
+  }, m) => /* @__PURE__ */ n(
+    or,
     {
-      ref: p,
-      maxHeight: i,
-      onClick: d,
+      ref: m,
+      maxHeight: o,
+      onClick: c,
       className: `itemless-banner ${a}`,
       children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
     }
   )
-);
-De.propTypes = {
-  sectionName: o.string,
-  imageUrl: o.string,
-  maxHeight: o.string,
-  className: o.string,
-  handleClick: o.func
-};
-const sr = y(O)`
-  @media (max-width: ${U + "px"}) {
+), ir = w(M)`
+  @media (max-width: ${T + "px"}) {
     flex-direction: column;
 
     & .skeleton__image {
@@ -751,10 +722,10 @@ const sr = y(O)`
       }
     }
   }
-`, lr = ({ keyPrefix: r }) => /* @__PURE__ */ s(sr, { children: [
-  /* @__PURE__ */ s(O, { children: [
+`, lr = ({ keyPrefix: r }) => /* @__PURE__ */ s(ir, { children: [
+  /* @__PURE__ */ s(M, { children: [
     /* @__PURE__ */ n(
-      be,
+      xe,
       {
         width: "13.75rem",
         height: "13.75rem",
@@ -762,20 +733,20 @@ const sr = y(O)`
       },
       `${r}-1`
     ),
-    /* @__PURE__ */ s(ve, { noGradient: !0, children: [
-      /* @__PURE__ */ n(w, { height: "1rem" }),
-      /* @__PURE__ */ n(w, { height: "1.75rem" }),
-      /* @__PURE__ */ n(w, { height: "1.25rem" }),
-      /* @__PURE__ */ n(w, { height: "2rem" }),
-      /* @__PURE__ */ s(O, { alignItems: "center", noGradient: !0, children: [
-        /* @__PURE__ */ n(we, { width: "2.5rem", height: "2.5rem" }),
-        /* @__PURE__ */ n(w, { width: "5rem", height: "1.25rem" })
+    /* @__PURE__ */ s(be, { noGradient: !0, children: [
+      /* @__PURE__ */ n(v, { height: "1rem" }),
+      /* @__PURE__ */ n(v, { height: "1.75rem" }),
+      /* @__PURE__ */ n(v, { height: "1.25rem" }),
+      /* @__PURE__ */ n(v, { height: "2rem" }),
+      /* @__PURE__ */ s(M, { alignItems: "center", noGradient: !0, children: [
+        /* @__PURE__ */ n(ve, { width: "2.5rem", height: "2.5rem" }),
+        /* @__PURE__ */ n(v, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ s(O, { noGradient: !0, children: [
+  /* @__PURE__ */ s(M, { noGradient: !0, children: [
     /* @__PURE__ */ n(
-      be,
+      xe,
       {
         width: "13.75rem",
         height: "13.75rem",
@@ -783,67 +754,67 @@ const sr = y(O)`
       },
       `${r}-2`
     ),
-    /* @__PURE__ */ s(ve, { noGradient: !0, children: [
-      /* @__PURE__ */ n(w, { height: "1rem" }),
-      /* @__PURE__ */ n(w, { height: "1.75rem" }),
-      /* @__PURE__ */ n(w, { height: "1.25rem" }),
-      /* @__PURE__ */ n(w, { height: "2rem" }),
-      /* @__PURE__ */ s(O, { alignItems: "center", noGradient: !0, children: [
-        /* @__PURE__ */ n(we, { width: "2.5rem", height: "2.5rem" }),
-        /* @__PURE__ */ n(w, { width: "5rem", height: "1.25rem" })
+    /* @__PURE__ */ s(be, { noGradient: !0, children: [
+      /* @__PURE__ */ n(v, { height: "1rem" }),
+      /* @__PURE__ */ n(v, { height: "1.75rem" }),
+      /* @__PURE__ */ n(v, { height: "1.25rem" }),
+      /* @__PURE__ */ n(v, { height: "2rem" }),
+      /* @__PURE__ */ s(M, { alignItems: "center", noGradient: !0, children: [
+        /* @__PURE__ */ n(ve, { width: "2.5rem", height: "2.5rem" }),
+        /* @__PURE__ */ n(v, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] })
 ] }), cr = ({
   keyPrefix: r,
   isLoading: t = !1,
-  fallbackComponent: i = /* @__PURE__ */ n(Oe, {}),
+  fallbackComponent: o = /* @__PURE__ */ n(Ee, {}),
   children: a
-}) => /* @__PURE__ */ n(Be, { fallbackComponent: i, children: t === !0 ? /* @__PURE__ */ n(lr, { keyPrefix: r }) : a }), dr = We(tr), kr = j(
+}) => /* @__PURE__ */ n(Re, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(lr, { keyPrefix: r }) : a }), dr = je(rr), kr = R(
   ({
     sellerType: r = "Shop",
     items: t = [],
-    title: i,
+    title: o,
     icon: a,
-    isLoading: d,
-    onSelectCard: p = () => {
+    isLoading: c,
+    onSelectCard: m = () => {
     },
-    onSelectShop: l = () => {
+    onSelectShop: i = () => {
     },
-    getImage: _ = () => {
+    getImage: S = () => {
     },
-    campaignSingleText: m,
-    upcomingCampaignText: h,
+    campaignSingleText: d,
+    upcomingCampaignText: p,
     salesCampaignTypes: g = [],
     startsInPrefixTextPlural: k,
     startsinSuffixTextPlural: f,
-    startsInPrefixTextSingular: v,
-    startsinSuffixTextSingular: I,
-    endsInPrefixTextPlural: N,
-    endsinSuffixTextPlural: S,
-    endsInPrefixTextSingular: c,
-    endsinSuffixTextSingular: x,
+    startsInPrefixTextSingular: b,
+    startsinSuffixTextSingular: C,
+    endsInPrefixTextPlural: I,
+    endsinSuffixTextPlural: y,
+    endsInPrefixTextSingular: l,
+    endsinSuffixTextSingular: u,
     endedText: D,
-    numOfSlides: E = 2,
-    showNavigation: u = !0,
+    numOfSlides: E = 4,
+    showNavigation: h = !0,
     numberOfListingsTextSingular: V,
-    numberOfListingsTextPlural: A,
-    itemlessImageUrl: H,
+    numberOfListingsTextPlural: F,
+    itemlessImageUrl: A,
     itemlessLink: se,
     handleItemlessLink: Z = () => {
     },
     componentName: q,
-    hasNextPage: R = !1,
-    handleFetchNextPage: X = () => {
+    hasNextPage: j = !1,
+    handleFetchNextPage: H = () => {
     },
-    LinkComponent: Y
-  }, le) => {
-    const P = ke(), J = Fe(() => {
-      let B = t == null ? void 0 : t.map((e, W) => /* @__PURE__ */ n(
+    LinkComponent: X
+  }, ie) => {
+    const z = ke(), Y = Be(() => {
+      let B = t == null ? void 0 : t.map((e, O) => /* @__PURE__ */ n(
         dr,
         {
           className: "campaign-item",
-          coverPhoto: _(
+          coverPhoto: S(
             e == null ? void 0 : e.coverPhoto,
             (e == null ? void 0 : e.uuid) || (e == null ? void 0 : e.campaignUuid)
           ),
@@ -859,36 +830,37 @@ const sr = y(O)`
           startDate: e == null ? void 0 : e.startDate,
           title: e == null ? void 0 : e.name,
           uuid: e == null ? void 0 : e.campaignUuid,
-          onSelectCard: (ce, K) => p(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, K),
-          onSelectShop: () => l(e == null ? void 0 : e.shopUuid),
-          campaignSingleText: m,
-          upcomingCampaignText: h,
+          onSelectCard: (le, J) => m(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, J),
+          onSelectShop: () => i(e == null ? void 0 : e.shopUuid),
+          campaignSingleText: d,
+          upcomingCampaignText: p,
           upcoming: e == null ? void 0 : e.upcoming,
           salesCampaignTypes: g,
           startsInPrefixTextPlural: k,
           startsinSuffixTextPlural: f,
-          startsInPrefixTextSingular: v,
-          startsinSuffixTextSingular: I,
-          endsInPrefixTextPlural: N,
-          endsinSuffixTextPlural: S,
-          endsInPrefixTextSingular: c,
-          endsinSuffixTextSingular: x,
+          startsInPrefixTextSingular: b,
+          startsinSuffixTextSingular: C,
+          endsInPrefixTextPlural: I,
+          endsinSuffixTextPlural: y,
+          endsInPrefixTextSingular: l,
+          endsinSuffixTextSingular: u,
           endedText: D,
           themeData: e == null ? void 0 : e.themeData,
           numberOfListings: e == null ? void 0 : e.numberOfListings,
           numberOfListingsTextSingular: V,
-          numberOfListingsTextPlural: A,
+          numberOfListingsTextPlural: F,
           metadata: { name: q, accessor: e == null ? void 0 : e.accessor },
-          LinkComponent: Y
+          LinkComponent: X,
+          sponsored: e == null ? void 0 : e.sponsored
         },
-        `campaign__item__${W}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
+        `campaign__item__${O}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
       ));
-      return (t == null ? void 0 : t.length) < 2 && !P ? [
+      return (t == null ? void 0 : t.length) < 4 && !z ? [
         ...B,
         /* @__PURE__ */ n(
-          De,
+          sr,
           {
-            imageUrl: H,
+            imageUrl: A,
             className: "campaign-item",
             handleClick: Z
           },
@@ -899,20 +871,20 @@ const sr = y(O)`
     return /* @__PURE__ */ n(
       cr,
       {
-        isLoading: d,
+        isLoading: c,
         keyPrefix: "sales-campaign-skeleton",
         children: /* @__PURE__ */ n(
-          Ne,
+          ar,
           {
             icon: a,
-            title: i,
+            title: o,
             numOfSlides: E,
-            showNavigation: u,
-            hasNextPage: R,
-            handleFetchNextPage: X,
-            children: J
+            showNavigation: h,
+            hasNextPage: j,
+            handleFetchNextPage: H,
+            children: Y
           },
-          `sales-campaign-section__${P}`
+          `sales-campaign-section__${z}`
         )
       }
     );