@lanaco/lnc-react-ui 4.0.226 → 4.0.227

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 { jsx as r, jsxs as s, Fragment as Te } from "react/jsx-runtime";
+import { forwardRef as M, useRef as ve, useEffect as te, Fragment as Pe, createElement as Le, useState as re, 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 oe, l as ae, m as Re, z as je, A as Oe, B as Be, C as pe } from "./utils-MoGhNMmj.js";
+import { d as T, o as Ve } from "./breakpoints-BubDitvo.js";
+import we 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 We from "./Badge.js";
+import { u as ye } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import he from "./IconButton.js";
+import { u as Se } from "./useDetectMobile-B0Jog4jQ.js";
+import { I as Ae } from "./index-DMmw5Ad5.js";
+import { m as Fe } from "./motion-Ckekul_K.js";
+import { S as He, c as ue, d as qe, e as Ye, a as E, f as Ze } from "./style-BFPpppS9.js";
+const Ge = 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")};
+`, Je = w.div`
+  border-radius: ${(n) => oe(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`
+`, Ke = 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) => `
+`, xe = (n = !1, a = !1, o = !1) => `
     display: flex;
-    ${t ? "flex-wrap: wrap;" : ""}
-    ${t ? "" : "flex-wrap: nowrap;"}
-    ${r ? "align-items: center;" : ""}
+    ${a ? "flex-wrap: wrap;" : ""}
+    ${a ? "" : "flex-wrap: nowrap;"}
+    ${n ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Ke = y.a`
+  `, Qe = 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)}
+  ${xe(!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) => oe(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)}
+    ${xe(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -265,261 +265,261 @@ 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`
+`, Xe = 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};
+`, en = w.div`
+  border-radius: ${(n) => oe(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;
+`, nn = M(({ src: n, ...a }, o) => {
+  const t = ve();
+  return te(() => {
+    var p;
+    const i = (f) => {
+      f.target.src = fe, 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 = t == null ? void 0 : t.current) == null || p.addEventListener("error", i), () => {
+      var f;
+      (f = t == null ? void 0 : t.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: ae(n) ? /* @__PURE__ */ r("img", { ref: t, src: n, ...a }) : /* @__PURE__ */ r("img", { src: fe, ...a }) });
+}), rn = (n) => {
   const {
-    uuid: t,
+    uuid: a,
     hasPermission: o = !0,
-    isUser: a,
-    image: s,
-    imageComponent: h,
-    name: p,
-    notifications: S = 0,
+    isUser: t,
+    image: i,
+    imageComponent: p,
+    name: f,
+    notifications: y = 0,
     color: l = "primary",
-    size: f = "large",
+    size: h = "large",
     style: c,
-    disabled: C,
+    disabled: _,
     onClick: m = () => {
     },
-    isActive: N,
+    isActive: I,
     className: b,
     shopCategory: v,
     // new
-    themeData: $,
-    LinkComponent: k
-  } = r, D = k || "a", u = {
-    theme: _e(),
+    themeData: S,
+    LinkComponent: C
+  } = n, N = C || "a", u = {
+    theme: ye(),
     color: l,
-    size: f,
+    size: h,
     style: c,
-    disabled: C
+    disabled: _
   };
-  return /* @__PURE__ */ Me(
-    Ke,
+  return /* @__PURE__ */ Le(
+    Qe,
     {
       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}` }
+      isActive: I,
+      themeColor: (S == null ? void 0 : S.code) || "transparent",
+      as: N,
+      ...C ? { to: `/${t ? "user" : "shop"}/${a}` } : { href: `/${t ? "user" : "shop"}/${a}` }
     },
-    /* @__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: Re(p) ? p : i }),
+    /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ r("div", { className: "name", children: f }),
+      !t && /* @__PURE__ */ r("div", { className: "description", children: v }),
+      y > 0 && /* @__PURE__ */ r("div", { className: "notifications-number", children: /* @__PURE__ */ r(We, { className: "badge", color: "danger", size: "small", children: y > 99 ? "99+" : y }) })
     ] })
   );
-}, ye = (r) => {
-  if (r !== void 0) {
-    const t = new Date(r), o = t.getFullYear(), a = t.getMonth() + 1;
-    return `${String(t.getDate()).padStart(2)}. ${a}. ${o}.`;
-  }
-}, nr = R((r, t) => {
-  var he;
-  const o = _e(), {
-    uuid: a,
-    shopUuid: s,
-    title: h = "",
+}, be = (n) => {
+  if (n !== void 0) {
+    const a = new Date(n), o = a.getFullYear(), t = a.getMonth() + 1;
+    return `${String(a.getDate()).padStart(2)}. ${t}. ${o}.`;
+  }
+}, an = M((n, a) => {
+  var me;
+  const o = ye(), {
+    uuid: t,
+    shopUuid: i,
+    title: p = "",
     // description,
     // badges,
-    coverPhoto: p,
-    onSelect: S,
+    coverPhoto: f,
+    onSelect: y,
     // status,
     startDate: l,
-    endDate: f,
+    endDate: h,
     salesPackages: c,
-    shopName: C,
+    shopName: _,
     shopCategory: m,
-    shopImage: N,
+    shopImage: I,
     shopImageComponent: b,
     className: v,
-    onSelectCard: $ = () => {
+    onSelectCard: S = () => {
     },
-    onSelectShop: k = () => {
+    onSelectShop: C = () => {
     },
-    upcoming: D = !1,
+    upcoming: N = !1,
     upcomingCampaignText: d,
     campaignSingleText: u,
     salesCampaignTypes: g = [],
-    startsInPrefixTextPlural: V,
-    startsinSuffixTextPlural: F,
-    startsInPrefixTextSingular: A,
+    startsInPrefixTextPlural: W,
+    startsinSuffixTextPlural: A,
+    startsInPrefixTextSingular: F,
     startsinSuffixTextSingular: H,
     endsInPrefixTextPlural: q,
     endsinSuffixTextPlural: Y,
-    endsInPrefixTextSingular: j,
+    endsInPrefixTextSingular: R,
     endsinSuffixTextSingular: Z,
-    endedText: J,
+    endedText: G,
     themeData: se,
-    numberOfListings: z,
-    numberOfListingsTextSingular: K,
-    numberOfListingsTextPlural: O,
+    numberOfListings: D,
+    numberOfListingsTextSingular: J,
+    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,
+    ...K
+  } = n, $e = O || "a", le = ve(), U = je(l, h), Q = U !== -1 && (U == null ? void 0 : U.isEnded) === !0, X = U !== -1 && !Q, ee = Oe(l), P = Be(h), _e = P !== null && P <= 2 && P > 0, ce = pe(h), de = ce ? new Date(ce) : null, Ce = /* @__PURE__ */ new Date(), ne = de ? de.getTime() - Ce.getTime() : null, B = ne !== null && ne > 0 && ne < 24 * 60 * 60 * 1e3, ge = (x, L, k, $, z) => k === 1 ? `${x} ${k} ${$}` : `${L} ${k} ${z}`, ke = () => {
+    if (!h) return null;
+    const x = pe(h), L = x ? new Date(x) : null;
+    if (!L) return null;
+    const k = Ie, $ = L.getTime() - k.getTime();
+    if ($ <= 0) return null;
+    const z = Math.floor($ / (1e3 * 60 * 60)), De = Math.floor($ % (1e3 * 60 * 60) / (1e3 * 60)), ze = Math.floor($ % (1e3 * 60) / 1e3);
+    return { hours: z, minutes: De, seconds: ze };
+  }, [Ie, Ne] = re(/* @__PURE__ */ new Date());
+  te(() => {
+    if (!B) 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,
+  }, [B]);
+  const V = B ? ke() : null;
+  return /* @__PURE__ */ s(
+    Ge,
     {
-      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) => S(x, le),
+      as: $e,
+      ...O ? { to: `/shop/${i}/campaign/${t}` } : { href: `/shop/${i}/campaign/${t}` },
+      sponsored: ie,
+      ...K,
       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(
-              Xe,
+        /* @__PURE__ */ s(Je, { theme: o, children: [
+          /* @__PURE__ */ r("img", { src: f }),
+          /* @__PURE__ */ r(Xe, { children: c == null ? void 0 : c.map((x, L) => {
+            var k, $;
+            return /* @__PURE__ */ r(
+              en,
               {
-                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((z) => z.value === x)) == null ? void 0 : k.color,
                 theme: o,
-                children: /* @__PURE__ */ n(
-                  $e,
+                children: /* @__PURE__ */ r(
+                  we,
                   {
-                    icon: (_ = g == null ? void 0 : g.find((T) => T.value === x)) == null ? void 0 : _.icon
+                    icon: ($ = g == null ? void 0 : g.find((z) => z.value === x)) == null ? void 0 : $.icon
                   }
                 )
               },
-              `package__${U}`
+              `package__${L}`
             );
           }) })
         ] }),
-        /* @__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(Ke, { 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: (me = N ? d : u) == null ? void 0 : me.toUpperCase() }),
+            /* @__PURE__ */ r("div", { className: "campaign-title-text", children: p }),
+            h && l && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
+              be(l),
               " - ",
-              ye(f)
+              be(h)
             ] }),
-            /* @__PURE__ */ i("div", { className: "timestamp-text", children: [
-              z > 0 && /* @__PURE__ */ i("span", { className: "listings-text", children: [
-                z,
+            /* @__PURE__ */ s("div", { className: "timestamp-text", children: [
+              D > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
+                D,
                 " ",
-                z === 1 ? K : O,
+                D === 1 ? J : j,
                 " ",
                 "∙",
                 " "
               ] }),
-              /* @__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 ${_e ? "urgent" : ""} ${X ? "" : "starts-in"}`,
+                  children: B && V ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
+                    R,
                     " ",
-                    G.hours.toString().padStart(2, "0"),
+                    V.hours.toString().padStart(2, "0"),
                     ":",
-                    G.minutes.toString().padStart(2, "0"),
+                    V.minutes.toString().padStart(2, "0"),
                     ":",
-                    G.seconds.toString().padStart(2, "0")
-                  ] }) : ee && !X && L !== null && L > 0 ? me(
-                    j,
+                    V.seconds.toString().padStart(2, "0")
+                  ] }) : X && !Q && P !== null && P > 0 ? ge(
+                    R,
                     q,
-                    L,
+                    P,
                     Z,
                     Y
-                  ) : X ? J || "Završena" : !ee && re !== null && re > 0 ? me(
-                    A,
-                    V,
-                    re,
+                  ) : Q ? G || "Završena" : !X && ee !== null && ee > 0 ? ge(
+                    F,
+                    W,
+                    ee,
                     H,
-                    F
+                    A
                   ) : null
                 }
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ n(
-            rr,
+          /* @__PURE__ */ r(
+            rn,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(er, { src: N }),
+              image: /* @__PURE__ */ r(nn, { src: I }),
               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 +570,7 @@ const Ye = y.a`
     }
   }
 
-  @media ${P("S")} {
+  @media ${T("S")} {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -582,17 +582,17 @@ const Ye = y.a`
       }
     }
   }
-`, ar = y(qe.div)`
+`, on = w(Fe.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 ${Ve("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,56 +614,56 @@ const Ye = y.a`
       /* Safari and Chrome */
     }
   }
-`, or = R(
+`, sn = M(
   ({
-    icon: r,
-    title: t,
+    icon: n,
+    title: a,
     numOfSlides: o = 4,
-    tabletNumOfSlides: a,
-    showNavigation: s = !0,
-    hasNextPage: h = !1,
-    className: p = "",
-    handleFetchNextPage: S = () => {
+    tabletNumOfSlides: t,
+    showNavigation: i = !0,
+    hasNextPage: p = !1,
+    className: f = "",
+    handleFetchNextPage: y = () => {
     },
     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, _] = re(0), [m, I] = re(1), b = Se(), v = (l == null ? void 0 : l.length) ?? 1;
+    te(() => {
       const d = () => {
-        N(o);
+        I(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 S = 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 && y();
+    }, N = (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: [
+        ae(n) && /* @__PURE__ */ r(
+          we,
           {
-            icon: r,
+            icon: n,
             color: "primary",
             sizeInUnits: "1.5rem",
             className: "title__icon"
           }
         ),
-        ae(t) && /* @__PURE__ */ i("div", { className: "title__text", children: [
+        ae(a) && /* @__PURE__ */ s("div", { className: "title__text", children: [
           " ",
-          t
+          a
         ] })
       ] }) }),
-      /* @__PURE__ */ i(
-        ar,
+      /* @__PURE__ */ s(
+        on,
         {
           numOfColumns: o,
-          tabletNumOfColumns: a,
+          tabletNumOfColumns: t,
           ...!b && {
             animate: {
               x: 0,
@@ -676,15 +676,15 @@ const Ye = y.a`
           },
           className: "scrollable-section__content",
           children: [
-            $,
-            b && h && /* @__PURE__ */ n(He, { onIsVisible: S })
+            S,
+            b && p && /* @__PURE__ */ r(Ae, { onIsVisible: y })
           ]
         },
         `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(
+          he,
           {
             icon: "angle-left",
             borderRadius: "curved",
@@ -692,11 +692,11 @@ const Ye = y.a`
             color: "neutral",
             className: "navigation__arrow",
             disabled: c === 0,
-            onClick: D
+            onClick: N
           }
         ),
-        /* @__PURE__ */ n(
-          ue,
+        /* @__PURE__ */ r(
+          he,
           {
             icon: "angle-right",
             borderRadius: "curved",
@@ -704,17 +704,17 @@ const Ye = y.a`
             color: "neutral",
             className: "navigation__arrow",
             disabled: c + m >= v,
-            onClick: k
+            onClick: C
           }
         )
       ] })
     ] });
   }
-), ir = y.div`
+), ln = 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 +727,26 @@ const Ye = y.a`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, sr = R(
+`, cn = M(
   ({
-    sectionName: r,
-    imageUrl: t,
+    sectionName: n,
+    imageUrl: a,
     maxHeight: o = "16.25rem",
-    className: a = "",
-    handleClick: s = () => {
+    className: t = "",
+    handleClick: i = () => {
     }
-  }, h) => /* @__PURE__ */ n(
-    ir,
+  }, p) => /* @__PURE__ */ r(
+    ln,
     {
-      ref: h,
+      ref: p,
       maxHeight: o,
-      onClick: s,
-      className: `itemless-banner ${a}`,
-      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
+      onClick: i,
+      className: `itemless-banner ${t}`,
+      children: /* @__PURE__ */ r("img", { src: a, alt: `itemless-banner__${n}` })
     }
   )
-), lr = y(M)`
-  @media ${P("S")} {
+), dn = w(He)`
+  @media ${T("S")} {
     flex-direction: column;
 
     & .skeleton__image {
@@ -760,106 +760,75 @@ 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" })
-      ] })
+`, gn = ({ keyPrefix: n }) => /* @__PURE__ */ r(dn, { children: [1, 2].map((a) => /* @__PURE__ */ s(ue, { children: [
+  /* @__PURE__ */ r(qe, { size: "13.75rem", className: "skeleton__image" }),
+  /* @__PURE__ */ s(Ye, { 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(ue, { alignItems: "center", children: [
+      /* @__PURE__ */ r(Ze, { size: "2.5rem" }),
+      /* @__PURE__ */ r(E, { width: "5rem", height: "1.25rem" })
     ] })
   ] })
-] }), dr = ({
-  keyPrefix: r,
-  isLoading: t = !1,
-  fallbackComponent: o = /* @__PURE__ */ n(Ue, {}),
-  children: a
-}) => /* @__PURE__ */ n(Re, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(cr, { keyPrefix: r }) : a }), gr = je(nr), kr = R(
+] }, `${n}-${a}`)) }), mn = ({
+  keyPrefix: n,
+  isLoading: a = !1,
+  fallbackComponent: o = /* @__PURE__ */ r(Te, {}),
+  children: t
+}) => /* @__PURE__ */ r(Ue, { fallbackComponent: o, children: a === !0 ? /* @__PURE__ */ r(gn, { keyPrefix: n }) : t }), pn = Ee(an), Nn = M(
   ({
-    sellerType: r = "Shop",
-    items: t = [],
+    sellerType: n = "Shop",
+    items: a = [],
     title: o,
-    icon: a,
-    isLoading: s,
-    onSelectCard: h = () => {
+    icon: t,
+    isLoading: i,
+    onSelectCard: p = () => {
     },
-    onSelectShop: p = () => {
+    onSelectShop: f = () => {
     },
-    getImage: S = () => {
+    getImage: y = () => {
     },
     campaignSingleText: l,
-    upcomingCampaignText: f,
+    upcomingCampaignText: h,
     salesCampaignTypes: c = [],
-    startsInPrefixTextPlural: C,
+    startsInPrefixTextPlural: _,
     startsinSuffixTextPlural: m,
-    startsInPrefixTextSingular: N,
+    startsInPrefixTextSingular: I,
     startsinSuffixTextSingular: b,
     endsInPrefixTextPlural: v,
-    endsinSuffixTextPlural: $,
-    endsInPrefixTextSingular: k,
-    endsinSuffixTextSingular: D,
+    endsinSuffixTextPlural: S,
+    endsInPrefixTextSingular: C,
+    endsinSuffixTextSingular: N,
     endedText: d,
     numOfSlides: u = 4,
     showNavigation: g = !0,
-    numberOfListingsTextSingular: V,
-    numberOfListingsTextPlural: F,
-    itemlessImageUrl: A,
+    numberOfListingsTextSingular: W,
+    numberOfListingsTextPlural: A,
+    itemlessImageUrl: F,
     itemlessMaxHeight: H,
     handleItemlessLink: q = () => {
     },
     componentName: Y,
-    hasNextPage: j = !1,
+    hasNextPage: R = !1,
     handleFetchNextPage: Z = () => {
     },
-    LinkComponent: J
+    LinkComponent: G
   }, se) => {
-    const z = Ce(), K = Oe(() => {
-      let O = t == null ? void 0 : t.map((e, B) => /* @__PURE__ */ n(
-        gr,
+    const D = Se(), J = Me(() => {
+      let j = a == null ? void 0 : a.map((e, O) => /* @__PURE__ */ r(
+        pn,
         {
-          className: `campaign-item ${(t == null ? void 0 : t.length) === 1 ? "horizontal-campaign-item" : ""}`,
-          coverPhoto: S(
+          className: `campaign-item ${(a == null ? void 0 : a.length) === 1 ? "horizontal-campaign-item" : ""}`,
+          coverPhoto: y(
             e == null ? void 0 : e.coverPhoto,
             (e == null ? void 0 : e.uuid) || (e == null ? void 0 : e.campaignUuid)
           ),
           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,69 +837,69 @@ 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, K) => p(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, K),
+          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,
+          startsInPrefixTextSingular: I,
           startsinSuffixTextSingular: b,
           endsInPrefixTextPlural: v,
-          endsinSuffixTextPlural: $,
-          endsInPrefixTextSingular: k,
-          endsinSuffixTextSingular: D,
+          endsinSuffixTextPlural: S,
+          endsInPrefixTextSingular: C,
+          endsinSuffixTextSingular: N,
           endedText: d,
           themeData: e == null ? void 0 : e.themeData,
           numberOfListings: e == null ? void 0 : e.numberOfListings,
-          numberOfListingsTextSingular: V,
-          numberOfListingsTextPlural: F,
+          numberOfListingsTextSingular: W,
+          numberOfListingsTextPlural: A,
           metadata: { name: Y, accessor: e == null ? void 0 : e.accessor },
-          LinkComponent: J,
+          LinkComponent: G,
           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,
+      return (a == null ? void 0 : a.length) < 4 && !D ? [
+        ...j,
+        /* @__PURE__ */ r(
+          cn,
           {
-            imageUrl: A,
+            imageUrl: F,
             className: "campaign-item",
             maxHeight: H,
             handleClick: q
           },
           "itemless-campaign-section-banner"
         )
-      ] : O;
-    }, [t]);
-    return /* @__PURE__ */ n(
-      dr,
+      ] : j;
+    }, [a]);
+    return /* @__PURE__ */ r(
+      mn,
       {
-        isLoading: s,
+        isLoading: i,
         keyPrefix: "sales-campaign-skeleton",
-        children: /* @__PURE__ */ n(
-          or,
+        children: /* @__PURE__ */ r(
+          sn,
           {
-            icon: a,
+            icon: t,
             title: o,
             numOfSlides: u,
             tabletNumOfSlides: 2,
             showNavigation: g,
-            hasNextPage: j,
+            hasNextPage: R,
             handleFetchNextPage: Z,
-            className: (t == null ? void 0 : t.length) < 4 && !z ? "itemless" : "",
-            children: K
+            className: (a == null ? void 0 : a.length) < 4 && !D ? "itemless" : "",
+            children: J
           },
-          `sales-campaign-section__${z}`
+          `sales-campaign-section__${D}`
         )
       }
     );
   }
 );
 export {
-  kr as default
+  Nn as default
 };