@lanaco/lnc-react-ui 4.0.226 → 4.0.228

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,18 @@
-import { jsx as n, jsxs as i, Fragment as Ue } from "react/jsx-runtime";
-import { forwardRef as R, useRef as Se, useEffect as oe, Fragment as Ee, createElement as Me, useState as te, Suspense as Re, memo as je, useMemo as Oe } from "react";
-import { s as y } from "./emotion-styled.browser.esm-DfbrHHed.js";
-import { b as ie, l as ae, m as Be, z as We, A as Ge, B as Ve, C as pe } from "./utils-MoGhNMmj.js";
-import { d as P, o as Fe } from "./breakpoints-BubDitvo.js";
-import $e from "./Icon.js";
-import { D as fe } from "./ShopAvatar-4-fCYGEc.js";
-import Ae from "./Badge.js";
-import { u as _e } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import ue from "./IconButton.js";
-import { u as Ce } from "./useDetectMobile-B0Jog4jQ.js";
-import { I as He } from "./index-DMmw5Ad5.js";
-import { m as qe } from "./motion-Ckekul_K.js";
-import { S as M, c as xe, b as be, a as w, d as ve } from "./style-DvkivBNg.js";
-const Ye = y.a`
+import { jsx as r, jsxs as s, Fragment as Te } from "react/jsx-runtime";
+import { forwardRef as M, useRef as be, useEffect as ne, Fragment as Pe, createElement as Le, useState as X, Suspense as Ue, memo as Ee, useMemo as Me } from "react";
+import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
+import { b as re, l as ee, m as je, z as Oe, A as Re, B as me } from "./utils-BUdHa0nB.js";
+import { d as T, o as Be } from "./breakpoints-BubDitvo.js";
+import ve from "./Icon.js";
+import { D as pe } from "./ShopAvatar-4-fCYGEc.js";
+import Ve from "./Badge.js";
+import { u as we } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import fe from "./IconButton.js";
+import { u as Se } from "./useDetectMobile-B0Jog4jQ.js";
+import { I as We } from "./index-DMmw5Ad5.js";
+import { m as Ae } from "./motion-Ckekul_K.js";
+import { S as Fe, c as he, d as He, e as qe, a as E, f as Ye } from "./style-BFPpppS9.js";
+const Ze = w.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -23,7 +23,7 @@ const Ye = y.a`
   border-radius: 1.25rem;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
 
-  ${(r) => r != null && r.sponsored ? `
+  ${(n) => n != null && n.sponsored ? `
         border: 1px solid transparent;
         background: 
           linear-gradient(#ffffff, #ffffff) padding-box,
@@ -42,7 +42,7 @@ const Ye = y.a`
     }
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     width: 100%;
     gap: 0;
 
@@ -55,8 +55,8 @@ const Ye = y.a`
       }
     }
   }
-`, Ze = y.div`
-  border-radius: ${(r) => ie(r.theme, "edged")};
+`, Ge = w.div`
+  border-radius: ${(n) => re(n.theme, "edged")};
   cursor: pointer;
 
   position: relative;
@@ -76,10 +76,10 @@ const Ye = y.a`
     }
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     width: 14.5rem;
   }
-`, Je = y.div`
+`, Je = w.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -162,7 +162,7 @@ const Ye = y.a`
     color: var(--gray-600, #676e79);
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -187,16 +187,16 @@ const Ye = y.a`
       gap: 0.25rem;
     }
   }
-`, we = (r = !1, t = !1, o = !1) => `
+`, ue = (n = !1, t = !1, o = !1) => `
     display: flex;
     ${t ? "flex-wrap: wrap;" : ""}
     ${t ? "" : "flex-wrap: nowrap;"}
-    ${r ? "align-items: center;" : ""}
+    ${n ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Ke = y.a`
+  `, Ke = w.a`
   text-decoration: none;
   color: var(--gray-950);
-  ${(r) => r.hasPermission === !0 && "cursor: pointer"};
+  ${(n) => n.hasPermission === !0 && "cursor: pointer"};
 
   &:focus,
   &:hover,
@@ -211,13 +211,13 @@ const Ye = y.a`
     text-decoration: none;
   }
 
-  ${we(!0)}
+  ${ue(!0)}
   gap: 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: ${(n) => re(n.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -226,7 +226,7 @@ const Ye = y.a`
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${we(!0, !1, !0)}
+    ${ue(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -265,261 +265,253 @@ const Ye = y.a`
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     padding: 0;
     font-size: 0.875rem;
   }
-`, Qe = y.div`
+`, Qe = w.div`
   position: absolute;
   top: 0.5rem;
-  ${(r) => r.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
+  ${(n) => n.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Xe = y.div`
-  border-radius: ${(r) => ie(r.theme, r.borderRadius || "slight")};
-  background-color: ${(r) => r == null ? void 0 : r.color};
+`, Xe = w.div`
+  border-radius: ${(n) => re(n.theme, n.borderRadius || "slight")};
+  background-color: ${(n) => n == null ? void 0 : n.color};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
-  width: ${(r) => r.fitContent === !0 ? "fit-content" : "1.5rem"};
-  ${(r) => r.fitContent === !0 && "padding: 0 0.1rem;"};
+  width: ${(n) => n.fitContent === !0 ? "fit-content" : "1.5rem"};
+  ${(n) => n.fitContent === !0 && "padding: 0 0.1rem;"};
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${(r) => r.padding};
+  padding: ${(n) => n.padding};
   & i {
     font-size: 0.813rem;
   }
-`, er = R(({ src: r, ...t }, o) => {
-  const a = Se();
-  return oe(() => {
-    var h;
-    const s = (p) => {
-      p.target.src = fe, p.onerror = null;
+`, en = M(({ src: n, ...t }, o) => {
+  const a = be();
+  return ne(() => {
+    var p;
+    const i = (f) => {
+      f.target.src = pe, f.onerror = null;
     };
-    return (h = a == null ? void 0 : a.current) == null || h.addEventListener("error", s), () => {
-      var p;
-      (p = a == null ? void 0 : a.current) == null || p.removeEventListener("error", s);
+    return (p = a == null ? void 0 : a.current) == null || p.addEventListener("error", i), () => {
+      var f;
+      (f = a == null ? void 0 : a.current) == null || f.removeEventListener("error", i);
     };
-  }, []), /* @__PURE__ */ n(Ee, { ref: o, children: ae(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
-}), rr = (r) => {
+  }, []), /* @__PURE__ */ r(Pe, { ref: o, children: ee(n) ? /* @__PURE__ */ r("img", { ref: a, src: n, ...t }) : /* @__PURE__ */ r("img", { src: pe, ...t }) });
+}), nn = (n) => {
   const {
     uuid: t,
     hasPermission: o = !0,
     isUser: a,
-    image: s,
-    imageComponent: h,
-    name: p,
+    image: i,
+    imageComponent: p,
+    name: f,
     notifications: S = 0,
     color: l = "primary",
-    size: f = "large",
+    size: h = "large",
     style: c,
-    disabled: C,
+    disabled: _,
     onClick: m = () => {
     },
     isActive: N,
     className: b,
     shopCategory: v,
     // new
-    themeData: $,
-    LinkComponent: k
-  } = r, D = k || "a", u = {
-    theme: _e(),
+    themeData: y,
+    LinkComponent: C
+  } = n, I = C || "a", u = {
+    theme: we(),
     color: l,
-    size: f,
+    size: h,
     style: c,
-    disabled: C
+    disabled: _
   };
-  return /* @__PURE__ */ Me(
+  return /* @__PURE__ */ Le(
     Ke,
     {
       onClick: (g) => {
         g == null || g.preventDefault(), g.stopPropagation(), o === !0 && (m == null || m());
       },
       ...u,
-      key: p,
+      key: f,
       className: `profile-item ${b}`,
       hasPermission: o,
       isActive: N,
-      themeColor: ($ == null ? void 0 : $.code) || "transparent",
-      as: D,
-      ...k ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
+      themeColor: (y == null ? void 0 : y.code) || "transparent",
+      as: I,
+      ...C ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Be(h) ? h : s }),
-    /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ n("div", { className: "name", children: p }),
-      !a && /* @__PURE__ */ n("div", { className: "description", children: v }),
-      S > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Ae, { className: "badge", color: "danger", size: "small", children: S > 99 ? "99+" : S }) })
+    /* @__PURE__ */ r("div", { className: "logo-wrapper", children: je(p) ? p : i }),
+    /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ r("div", { className: "name", children: f }),
+      !a && /* @__PURE__ */ r("div", { className: "description", children: v }),
+      S > 0 && /* @__PURE__ */ r("div", { className: "notifications-number", children: /* @__PURE__ */ r(Ve, { className: "badge", color: "danger", size: "small", children: S > 99 ? "99+" : S }) })
     ] })
   );
-}, ye = (r) => {
-  if (r !== void 0) {
-    const t = new Date(r), o = t.getFullYear(), a = t.getMonth() + 1;
+}, xe = (n) => {
+  if (n !== void 0) {
+    const t = new Date(n), o = t.getFullYear(), a = t.getMonth() + 1;
     return `${String(t.getDate()).padStart(2)}. ${a}. ${o}.`;
   }
-}, nr = R((r, t) => {
-  var he;
-  const o = _e(), {
+}, rn = M((n, t) => {
+  var ge;
+  const o = we(), {
     uuid: a,
-    shopUuid: s,
-    title: h = "",
+    shopUuid: i,
+    title: p = "",
     // description,
     // badges,
-    coverPhoto: p,
+    coverPhoto: f,
     onSelect: S,
     // status,
     startDate: l,
-    endDate: f,
+    endDate: h,
     salesPackages: c,
-    shopName: C,
+    shopName: _,
     shopCategory: m,
     shopImage: N,
     shopImageComponent: b,
     className: v,
-    onSelectCard: $ = () => {
+    onSelectCard: y = () => {
     },
-    onSelectShop: k = () => {
+    onSelectShop: C = () => {
     },
-    upcoming: D = !1,
+    upcoming: I = !1,
     upcomingCampaignText: d,
     campaignSingleText: u,
     salesCampaignTypes: g = [],
-    startsInPrefixTextPlural: V,
+    startsInPrefixTextPlural: A,
     startsinSuffixTextPlural: F,
-    startsInPrefixTextSingular: A,
-    startsinSuffixTextSingular: H,
-    endsInPrefixTextPlural: q,
-    endsinSuffixTextPlural: Y,
-    endsInPrefixTextSingular: j,
-    endsinSuffixTextSingular: Z,
-    endedText: J,
+    startsInPrefixTextSingular: H,
+    startsinSuffixTextSingular: q,
+    endsInPrefixTextPlural: te,
+    endsinSuffixTextPlural: ae,
+    endsInPrefixTextSingular: Y,
+    endsinSuffixTextSingular: oe,
+    endedText: Z,
     themeData: se,
     numberOfListings: z,
-    numberOfListingsTextSingular: K,
-    numberOfListingsTextPlural: O,
+    numberOfListingsTextSingular: G,
+    numberOfListingsTextPlural: j,
     metadata: e,
-    LinkComponent: B,
-    sponsored: le,
-    ...Q
-  } = r, ke = B || "a", ce = Se(), E = We(l, f), X = E !== -1 && (E == null ? void 0 : E.isEnded) === !0, ee = E !== -1 && !X, re = Ge(l), L = Ve(f), Ie = L !== null && L <= 2 && L > 0, de = pe(f), ge = de ? new Date(de) : null, Ne = /* @__PURE__ */ new Date(), ne = ge ? ge.getTime() - Ne.getTime() : null, W = ne !== null && ne > 0 && ne < 24 * 60 * 60 * 1e3, me = (x, U, I, _, T) => I === 1 ? `${x} ${I} ${_}` : `${U} ${I} ${T}`, De = () => {
-    if (!f) return null;
-    const x = pe(f), U = x ? new Date(x) : null;
-    if (!U) return null;
-    const I = ze, _ = U.getTime() - I.getTime();
-    if (_ <= 0) return null;
-    const T = Math.floor(_ / (1e3 * 60 * 60)), Pe = Math.floor(_ % (1e3 * 60 * 60) / (1e3 * 60)), Le = Math.floor(_ % (1e3 * 60) / 1e3);
-    return { hours: T, minutes: Pe, seconds: Le };
-  }, [ze, Te] = te(/* @__PURE__ */ new Date());
-  oe(() => {
-    if (!W) return;
+    LinkComponent: O,
+    sponsored: ie,
+    ...J
+  } = n, ye = O || "a", le = be(), L = Oe(l, h), R = L !== -1 && (L == null ? void 0 : L.isEnded) === !0, B = L !== -1 && !R, U = Re(l), ce = me(h), de = ce ? new Date(ce) : null, $e = /* @__PURE__ */ new Date(), K = de ? de.getTime() - $e.getTime() : null, V = K !== null && K > 0 && K < 24 * 60 * 60 * 1e3, _e = (x, P, k, $, D) => k === 1 ? `${x} ${k} ${$}` : `${P} ${k} ${D}`, Ce = () => {
+    if (!h) return null;
+    const x = me(h), P = x ? new Date(x) : null;
+    if (!P) return null;
+    const k = ke, $ = P.getTime() - k.getTime();
+    if ($ <= 0) return null;
+    const D = Math.floor($ / (1e3 * 60 * 60)), ze = Math.floor($ % (1e3 * 60 * 60) / (1e3 * 60)), De = Math.floor($ % (1e3 * 60) / 1e3);
+    return { hours: D, minutes: ze, seconds: De };
+  }, [ke, Ne] = X(/* @__PURE__ */ new Date());
+  ne(() => {
+    if (!V) return;
     const x = setInterval(() => {
-      Te(/* @__PURE__ */ new Date());
+      Ne(/* @__PURE__ */ new Date());
     }, 1e3);
     return () => clearInterval(x);
-  }, [W]);
-  const G = W ? De() : null;
-  return /* @__PURE__ */ i(
-    Ye,
+  }, [V]);
+  const W = V ? Ce() : null, Q = !!(B && !R && V && W), Ie = Q || R || !B && U !== null && U > 0;
+  return /* @__PURE__ */ s(
+    Ze,
     {
-      ref: ce,
+      ref: le,
       theme: o,
       className: v,
       name: e == null ? void 0 : e.name,
       "data-accessor": e == null ? void 0 : e.accessor,
-      onClick: (x) => $(x, ce),
-      as: ke,
-      ...B ? { to: `/shop/${s}/campaign/${a}` } : { href: `/shop/${s}/campaign/${a}` },
-      sponsored: le,
-      ...Q,
+      onClick: (x) => y(x, le),
+      as: ye,
+      ...O ? { to: `/shop/${i}/campaign/${a}` } : { href: `/shop/${i}/campaign/${a}` },
+      sponsored: ie,
+      ...J,
       children: [
-        /* @__PURE__ */ i(Ze, { theme: o, children: [
-          /* @__PURE__ */ n("img", { src: p }),
-          /* @__PURE__ */ n(Qe, { children: c == null ? void 0 : c.map((x, U) => {
-            var I, _;
-            return /* @__PURE__ */ n(
+        /* @__PURE__ */ s(Ge, { theme: o, children: [
+          /* @__PURE__ */ r("img", { src: f }),
+          /* @__PURE__ */ r(Qe, { children: c == null ? void 0 : c.map((x, P) => {
+            var k, $;
+            return /* @__PURE__ */ r(
               Xe,
               {
-                color: (I = g == null ? void 0 : g.find((T) => T.value === x)) == null ? void 0 : I.color,
+                color: (k = g == null ? void 0 : g.find((D) => D.value === x)) == null ? void 0 : k.color,
                 theme: o,
-                children: /* @__PURE__ */ n(
-                  $e,
+                children: /* @__PURE__ */ r(
+                  ve,
                   {
-                    icon: (_ = g == null ? void 0 : g.find((T) => T.value === x)) == null ? void 0 : _.icon
+                    icon: ($ = g == null ? void 0 : g.find((D) => D.value === x)) == null ? void 0 : $.icon
                   }
                 )
               },
-              `package__${U}`
+              `package__${P}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ i(Je, { theme: o, children: [
-          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ i("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ n("div", { className: "campaign-title", children: (he = D ? d : u) == null ? void 0 : he.toUpperCase() }),
-            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: h }),
-            f && l && /* @__PURE__ */ i("div", { className: "campaign-date", children: [
-              ye(l),
+        /* @__PURE__ */ s(Je, { theme: o, children: [
+          /* @__PURE__ */ r("div", { className: "text-block-wrapper", children: /* @__PURE__ */ s("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ r("div", { className: "campaign-title", children: (ge = I ? d : u) == null ? void 0 : ge.toUpperCase() }),
+            /* @__PURE__ */ r("div", { className: "campaign-title-text", children: p }),
+            h && l && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
+              xe(l),
               " - ",
-              ye(f)
+              xe(h)
             ] }),
-            /* @__PURE__ */ i("div", { className: "timestamp-text", children: [
-              z > 0 && /* @__PURE__ */ i("span", { className: "listings-text", children: [
+            /* @__PURE__ */ s("div", { className: "timestamp-text", children: [
+              z > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
                 z,
                 " ",
-                z === 1 ? K : O,
-                " ",
-                "∙",
-                " "
+                z === 1 ? G : j,
+                Ie ? " ∙ " : ""
               ] }),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ r(
                 "span",
                 {
-                  className: `duration-text ${Ie ? "urgent" : ""} ${ee ? "" : "starts-in"}`,
-                  children: W && G ? /* @__PURE__ */ i("div", { className: "countdown-timer", children: [
-                    j,
+                  className: `duration-text ${Q ? "urgent" : ""} ${B ? "" : "starts-in"}`,
+                  children: Q ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
+                    Y,
                     " ",
-                    G.hours.toString().padStart(2, "0"),
+                    W.hours.toString().padStart(2, "0"),
                     ":",
-                    G.minutes.toString().padStart(2, "0"),
+                    W.minutes.toString().padStart(2, "0"),
                     ":",
-                    G.seconds.toString().padStart(2, "0")
-                  ] }) : ee && !X && L !== null && L > 0 ? me(
-                    j,
-                    q,
-                    L,
-                    Z,
-                    Y
-                  ) : X ? J || "Završena" : !ee && re !== null && re > 0 ? me(
-                    A,
-                    V,
-                    re,
+                    W.seconds.toString().padStart(2, "0")
+                  ] }) : R ? Z || "Završena" : !B && U !== null && U > 0 ? _e(
                     H,
+                    A,
+                    U,
+                    q,
                     F
                   ) : null
                 }
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ n(
-            rr,
+          /* @__PURE__ */ r(
+            nn,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(er, { src: N }),
+              image: /* @__PURE__ */ r(en, { src: N }),
               imageComponent: b,
               themeData: se,
               isActive: !0,
               isUser: !1,
-              name: C,
+              name: _,
               shopCategory: m,
-              uuid: s,
-              onClick: () => k(s)
+              uuid: i,
+              onClick: () => C(i)
             }
           )
         ] })
       ]
     }
   );
-}), tr = y.div`
+}), tn = w.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -570,7 +562,7 @@ const Ye = y.a`
     }
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -582,17 +574,17 @@ const Ye = y.a`
       }
     }
   }
-`, ar = y(qe.div)`
+`, an = w(Ae.div)`
   display: grid;
-  grid-template-columns: repeat(${(r) => r == null ? void 0 : r.numOfColumns}, 1fr);
+  grid-template-columns: repeat(${(n) => n == null ? void 0 : n.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media ${Fe("M")} {
-    grid-template-columns: repeat(${(r) => (r == null ? void 0 : r.tabletNumOfColumns) ?? 2}, 1fr);
+  @media ${Be("M")} {
+    grid-template-columns: repeat(${(n) => (n == null ? void 0 : n.tabletNumOfColumns) ?? 2}, 1fr);
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -614,53 +606,53 @@ const Ye = y.a`
       /* Safari and Chrome */
     }
   }
-`, or = R(
+`, on = M(
   ({
-    icon: r,
+    icon: n,
     title: t,
     numOfSlides: o = 4,
     tabletNumOfSlides: a,
-    showNavigation: s = !0,
-    hasNextPage: h = !1,
-    className: p = "",
+    showNavigation: i = !0,
+    hasNextPage: p = !1,
+    className: f = "",
     handleFetchNextPage: S = () => {
     },
     children: l
-  }, f) => {
-    const [c, C] = te(0), [m, N] = te(1), b = Ce(), v = (l == null ? void 0 : l.length) ?? 1;
-    oe(() => {
+  }, h) => {
+    const [c, _] = X(0), [m, N] = X(1), b = Se(), v = (l == null ? void 0 : l.length) ?? 1;
+    ne(() => {
       const d = () => {
         N(o);
       };
       return window.addEventListener("resize", d), d(), () => window.removeEventListener("resize", d);
     }, []);
-    const $ = b ? l : l == null ? void 0 : l.slice(c, c + m), k = (d) => {
+    const y = b ? l : l == null ? void 0 : l.slice(c, c + m), C = (d) => {
       var g;
       (g = d == null ? void 0 : d.target) == null || g.blur();
       const u = c + m;
-      u < v && C(u), u + m >= v && h && S();
-    }, D = (d) => {
+      u < v && _(u), u + m >= v && p && S();
+    }, I = (d) => {
       var u;
-      (u = d == null ? void 0 : d.target) == null || u.blur(), c - m >= 0 && C(c - m);
+      (u = d == null ? void 0 : d.target) == null || u.blur(), c - m >= 0 && _(c - m);
     };
-    return /* @__PURE__ */ i(tr, { ref: f, className: p, children: [
-      /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ i("div", { className: "scrollable-section__title", children: [
-        ae(r) && /* @__PURE__ */ n(
-          $e,
+    return /* @__PURE__ */ s(tn, { ref: h, className: f, children: [
+      /* @__PURE__ */ r("div", { className: "scrollable-section__header", children: /* @__PURE__ */ s("div", { className: "scrollable-section__title", children: [
+        ee(n) && /* @__PURE__ */ r(
+          ve,
           {
-            icon: r,
+            icon: n,
             color: "primary",
             sizeInUnits: "1.5rem",
             className: "title__icon"
           }
         ),
-        ae(t) && /* @__PURE__ */ i("div", { className: "title__text", children: [
+        ee(t) && /* @__PURE__ */ s("div", { className: "title__text", children: [
           " ",
           t
         ] })
       ] }) }),
-      /* @__PURE__ */ i(
-        ar,
+      /* @__PURE__ */ s(
+        an,
         {
           numOfColumns: o,
           tabletNumOfColumns: a,
@@ -676,15 +668,15 @@ const Ye = y.a`
           },
           className: "scrollable-section__content",
           children: [
-            $,
-            b && h && /* @__PURE__ */ n(He, { onIsVisible: S })
+            y,
+            b && p && /* @__PURE__ */ r(We, { onIsVisible: S })
           ]
         },
         `scrollable-section__content-${c}`
       ),
-      s && v > m && !b && /* @__PURE__ */ i("div", { className: "scrollable-section__navigation", children: [
-        /* @__PURE__ */ n(
-          ue,
+      i && v > m && !b && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
+        /* @__PURE__ */ r(
+          fe,
           {
             icon: "angle-left",
             borderRadius: "curved",
@@ -692,11 +684,11 @@ const Ye = y.a`
             color: "neutral",
             className: "navigation__arrow",
             disabled: c === 0,
-            onClick: D
+            onClick: I
           }
         ),
-        /* @__PURE__ */ n(
-          ue,
+        /* @__PURE__ */ r(
+          fe,
           {
             icon: "angle-right",
             borderRadius: "curved",
@@ -704,17 +696,17 @@ const Ye = y.a`
             color: "neutral",
             className: "navigation__arrow",
             disabled: c + m >= v,
-            onClick: k
+            onClick: C
           }
         )
       ] })
     ] });
   }
-), ir = y.div`
+), sn = w.div`
   display: flex;
   flex: 1;
   width: 100%;
-  max-height: ${(r) => r == null ? void 0 : r.maxHeight};
+  max-height: ${(n) => n == null ? void 0 : n.maxHeight};
   border-radius: 1.25rem;
 
   &:hover {
@@ -727,26 +719,26 @@ const Ye = y.a`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, sr = R(
+`, ln = M(
   ({
-    sectionName: r,
+    sectionName: n,
     imageUrl: t,
     maxHeight: o = "16.25rem",
     className: a = "",
-    handleClick: s = () => {
+    handleClick: i = () => {
     }
-  }, h) => /* @__PURE__ */ n(
-    ir,
+  }, p) => /* @__PURE__ */ r(
+    sn,
     {
-      ref: h,
+      ref: p,
       maxHeight: o,
-      onClick: s,
+      onClick: i,
       className: `itemless-banner ${a}`,
-      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
+      children: /* @__PURE__ */ r("img", { src: t, alt: `itemless-banner__${n}` })
     }
   )
-), lr = y(M)`
-  @media ${P("S")} {
+), cn = w(Fe)`
+  @media ${T("S")} {
     flex-direction: column;
 
     & .skeleton__image {
@@ -760,96 +752,65 @@ const Ye = y.a`
       }
     }
   }
-`, cr = ({ keyPrefix: r }) => /* @__PURE__ */ i(lr, { children: [
-  /* @__PURE__ */ i(M, { children: [
-    /* @__PURE__ */ n(
-      xe,
-      {
-        width: "13.75rem",
-        height: "13.75rem",
-        className: "skeleton__image"
-      },
-      `${r}-1`
-    ),
-    /* @__PURE__ */ i(be, { 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__ */ i(M, { alignItems: "center", noGradient: !0, children: [
-        /* @__PURE__ */ n(ve, { width: "2.5rem", height: "2.5rem" }),
-        /* @__PURE__ */ n(w, { width: "5rem", height: "1.25rem" })
-      ] })
-    ] })
-  ] }),
-  /* @__PURE__ */ i(M, { noGradient: !0, children: [
-    /* @__PURE__ */ n(
-      xe,
-      {
-        width: "13.75rem",
-        height: "13.75rem",
-        className: "skeleton__image"
-      },
-      `${r}-2`
-    ),
-    /* @__PURE__ */ i(be, { 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__ */ i(M, { alignItems: "center", noGradient: !0, children: [
-        /* @__PURE__ */ n(ve, { width: "2.5rem", height: "2.5rem" }),
-        /* @__PURE__ */ n(w, { width: "5rem", height: "1.25rem" })
-      ] })
+`, dn = ({ keyPrefix: n }) => /* @__PURE__ */ r(cn, { children: [1, 2].map((t) => /* @__PURE__ */ s(he, { children: [
+  /* @__PURE__ */ r(He, { size: "13.75rem", className: "skeleton__image" }),
+  /* @__PURE__ */ s(qe, { children: [
+    /* @__PURE__ */ r(E, { width: "100%", height: "1rem" }),
+    /* @__PURE__ */ r(E, { width: "100%", height: "1.75rem" }),
+    /* @__PURE__ */ r(E, { width: "100%", height: "1.25rem" }),
+    /* @__PURE__ */ r(E, { width: "100%", height: "2rem" }),
+    /* @__PURE__ */ s(he, { alignItems: "center", children: [
+      /* @__PURE__ */ r(Ye, { size: "2.5rem" }),
+      /* @__PURE__ */ r(E, { width: "5rem", height: "1.25rem" })
     ] })
   ] })
-] }), dr = ({
-  keyPrefix: r,
+] }, `${n}-${t}`)) }), gn = ({
+  keyPrefix: n,
   isLoading: t = !1,
-  fallbackComponent: o = /* @__PURE__ */ n(Ue, {}),
+  fallbackComponent: o = /* @__PURE__ */ r(Te, {}),
   children: a
-}) => /* @__PURE__ */ n(Re, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(cr, { keyPrefix: r }) : a }), gr = je(nr), kr = R(
+}) => /* @__PURE__ */ r(Ue, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ r(dn, { keyPrefix: n }) : a }), mn = Ee(rn), Nn = M(
   ({
-    sellerType: r = "Shop",
+    sellerType: n = "Shop",
     items: t = [],
     title: o,
     icon: a,
-    isLoading: s,
-    onSelectCard: h = () => {
+    isLoading: i,
+    onSelectCard: p = () => {
     },
-    onSelectShop: p = () => {
+    onSelectShop: f = () => {
     },
     getImage: S = () => {
     },
     campaignSingleText: l,
-    upcomingCampaignText: f,
+    upcomingCampaignText: h,
     salesCampaignTypes: c = [],
-    startsInPrefixTextPlural: C,
+    startsInPrefixTextPlural: _,
     startsinSuffixTextPlural: m,
     startsInPrefixTextSingular: N,
     startsinSuffixTextSingular: b,
     endsInPrefixTextPlural: v,
-    endsinSuffixTextPlural: $,
-    endsInPrefixTextSingular: k,
-    endsinSuffixTextSingular: D,
+    endsinSuffixTextPlural: y,
+    endsInPrefixTextSingular: C,
+    endsinSuffixTextSingular: I,
     endedText: d,
     numOfSlides: u = 4,
     showNavigation: g = !0,
-    numberOfListingsTextSingular: V,
+    numberOfListingsTextSingular: A,
     numberOfListingsTextPlural: F,
-    itemlessImageUrl: A,
-    itemlessMaxHeight: H,
-    handleItemlessLink: q = () => {
+    itemlessImageUrl: H,
+    itemlessMaxHeight: q,
+    handleItemlessLink: te = () => {
     },
-    componentName: Y,
-    hasNextPage: j = !1,
-    handleFetchNextPage: Z = () => {
+    componentName: ae,
+    hasNextPage: Y = !1,
+    handleFetchNextPage: oe = () => {
     },
-    LinkComponent: J
+    LinkComponent: Z
   }, se) => {
-    const z = Ce(), K = Oe(() => {
-      let O = t == null ? void 0 : t.map((e, B) => /* @__PURE__ */ n(
-        gr,
+    const z = Se(), G = Me(() => {
+      let j = t == null ? void 0 : t.map((e, O) => /* @__PURE__ */ r(
+        mn,
         {
           className: `campaign-item ${(t == null ? void 0 : t.length) === 1 ? "horizontal-campaign-item" : ""}`,
           coverPhoto: S(
@@ -859,7 +820,7 @@ const Ye = y.a`
           description: e == null ? void 0 : e.description,
           endDate: e == null ? void 0 : e.endDate,
           salesPackages: e == null ? void 0 : e.salesPackages,
-          sellerType: r,
+          sellerType: n,
           shopImage: e == null ? void 0 : e.profileImage,
           shopImageComponent: e == null ? void 0 : e.profileImageComponent,
           shopName: e == null ? void 0 : e.shopName,
@@ -868,62 +829,62 @@ const Ye = y.a`
           startDate: e == null ? void 0 : e.startDate,
           title: e == null ? void 0 : e.name,
           uuid: e == null ? void 0 : e.campaignUuid,
-          onSelectCard: (le, Q) => h(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, Q),
-          onSelectShop: () => p(e == null ? void 0 : e.shopUuid),
+          onSelectCard: (ie, J) => p(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, J),
+          onSelectShop: () => f(e == null ? void 0 : e.shopUuid),
           campaignSingleText: l,
-          upcomingCampaignText: f,
+          upcomingCampaignText: h,
           upcoming: e == null ? void 0 : e.upcoming,
           salesCampaignTypes: c,
-          startsInPrefixTextPlural: C,
+          startsInPrefixTextPlural: _,
           startsinSuffixTextPlural: m,
           startsInPrefixTextSingular: N,
           startsinSuffixTextSingular: b,
           endsInPrefixTextPlural: v,
-          endsinSuffixTextPlural: $,
-          endsInPrefixTextSingular: k,
-          endsinSuffixTextSingular: D,
+          endsinSuffixTextPlural: y,
+          endsInPrefixTextSingular: C,
+          endsinSuffixTextSingular: I,
           endedText: d,
           themeData: e == null ? void 0 : e.themeData,
           numberOfListings: e == null ? void 0 : e.numberOfListings,
-          numberOfListingsTextSingular: V,
+          numberOfListingsTextSingular: A,
           numberOfListingsTextPlural: F,
-          metadata: { name: Y, accessor: e == null ? void 0 : e.accessor },
-          LinkComponent: J,
+          metadata: { name: ae, accessor: e == null ? void 0 : e.accessor },
+          LinkComponent: Z,
           sponsored: e == null ? void 0 : e.sponsored
         },
-        `campaign__item__${B}__${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) < 4 && !z ? [
-        ...O,
-        /* @__PURE__ */ n(
-          sr,
+        ...j,
+        /* @__PURE__ */ r(
+          ln,
           {
-            imageUrl: A,
+            imageUrl: H,
             className: "campaign-item",
-            maxHeight: H,
-            handleClick: q
+            maxHeight: q,
+            handleClick: te
           },
           "itemless-campaign-section-banner"
         )
-      ] : O;
+      ] : j;
     }, [t]);
-    return /* @__PURE__ */ n(
-      dr,
+    return /* @__PURE__ */ r(
+      gn,
       {
-        isLoading: s,
+        isLoading: i,
         keyPrefix: "sales-campaign-skeleton",
-        children: /* @__PURE__ */ n(
-          or,
+        children: /* @__PURE__ */ r(
+          on,
           {
             icon: a,
             title: o,
             numOfSlides: u,
             tabletNumOfSlides: 2,
             showNavigation: g,
-            hasNextPage: j,
-            handleFetchNextPage: Z,
+            hasNextPage: Y,
+            handleFetchNextPage: oe,
             className: (t == null ? void 0 : t.length) < 4 && !z ? "itemless" : "",
-            children: K
+            children: G
           },
           `sales-campaign-section__${z}`
         )
@@ -932,5 +893,5 @@ const Ye = y.a`
   }
 );
 export {
-  kr as default
+  Nn as default
 };