@lanaco/lnc-react-ui 4.0.205 → 4.0.207

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,18 @@
-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 { jsx as n, jsxs as s, Fragment as Ue } from "react/jsx-runtime";
+import { forwardRef as R, useRef as Se, useEffect as ae, Fragment as Ee, createElement as Me, useState as ne, Suspense as Re, memo as je, useMemo as Oe } from "react";
+import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { b as oe, l as te, m as Be, z as We, A as Ge, B as Ve, C as he } from "./utils-B2fsQ6PS.js";
+import { d as z, o as Fe } from "./breakpoints-ff0SIcV3.js";
+import $e from "./Icon.js";
 import { D as fe } from "./ShopAvatar-4-fCYGEc.js";
-import Fe from "./Badge.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 ke } from "./useDetectMobile-Bkvj0VMa.js";
-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`
+import { u as Ce } from "./useDetectMobile-CcVo3PNi.js";
+import { I as qe } from "./index-BdKi2ogu.js";
+import { m as He } from "./motion-Ckekul_K.js";
+import { S as M, c as xe, b as be, a as y, d as ve } from "./style-BwQ4djFC.js";
+const Ye = S.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -33,11 +33,11 @@ const qe = w.a`
         background: #ffffff;
       `}
 
-  @media (max-width: ${T + "px"}) {
+  @media ${z("S")} {
     width: 100%;
     gap: 0;
   }
-`, He = w.div`
+`, Ze = S.div`
   border-radius: ${(r) => oe(r.theme, "edged")};
   cursor: pointer;
 
@@ -58,10 +58,10 @@ const qe = w.a`
     }
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media ${z("S")} {
     width: 14.5rem;
   }
-`, Xe = w.div`
+`, Je = S.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -144,7 +144,7 @@ const qe = w.a`
     color: var(--gray-600, #676e79);
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media ${z("S")} {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -175,7 +175,7 @@ const qe = w.a`
     ${t ? "" : "flex-wrap: nowrap;"}
     ${r ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Ye = w.a`
+  `, Ke = S.a`
   text-decoration: none;
   color: var(--gray-950);
   ${(r) => r.hasPermission === !0 && "cursor: pointer"};
@@ -247,17 +247,17 @@ const qe = w.a`
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media ${z("S")} {
     padding: 0;
     font-size: 0.875rem;
   }
-`, Je = w.div`
+`, Qe = S.div`
   position: absolute;
   top: 0.5rem;
   ${(r) => r.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Ke = w.div`
+`, Xe = S.div`
   border-radius: ${(r) => oe(r.theme, r.borderRadius || "slight")};
   background-color: ${(r) => r == null ? void 0 : r.color};
   color: white;
@@ -273,66 +273,66 @@ const qe = w.a`
   & i {
     font-size: 0.813rem;
   }
-`, Qe = R(({ src: r, ...t }, o) => {
-  const a = $e();
+`, er = R(({ src: r, ...t }, o) => {
+  const a = Se();
   return ae(() => {
-    var m;
-    const c = (i) => {
-      i.target.src = fe, i.onerror = null;
+    var g;
+    const c = (d) => {
+      d.target.src = fe, d.onerror = null;
     };
-    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);
+    return (g = a == null ? void 0 : a.current) == null || g.addEventListener("error", c), () => {
+      var d;
+      (d = a == null ? void 0 : a.current) == null || d.removeEventListener("error", c);
     };
-  }, []), /* @__PURE__ */ n(Ue, { ref: o, children: te(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
-}), er = (r) => {
+  }, []), /* @__PURE__ */ n(Ee, { ref: o, children: te(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
+}), rr = (r) => {
   const {
     uuid: t,
     hasPermission: o = !0,
     isUser: a,
     image: c,
-    imageComponent: m,
-    name: i,
-    notifications: S = 0,
-    color: d = "primary",
-    size: p = "large",
-    style: g,
-    disabled: k,
-    onClick: f = () => {
+    imageComponent: g,
+    name: d,
+    notifications: m = 0,
+    color: x = "primary",
+    size: i = "large",
+    style: b,
+    disabled: p,
+    onClick: $ = () => {
     },
-    isActive: b,
-    className: C,
-    shopCategory: I,
+    isActive: v,
+    className: w,
+    shopCategory: D,
     // new
-    themeData: y,
-    LinkComponent: l
-  } = r, u = l || "a", E = {
+    themeData: _,
+    LinkComponent: k
+  } = r, l = k || "a", I = {
     theme: _e(),
-    color: d,
-    size: p,
-    style: g,
-    disabled: k
+    color: x,
+    size: i,
+    style: b,
+    disabled: p
   };
   return /* @__PURE__ */ Me(
-    Ye,
+    Ke,
     {
       onClick: (h) => {
-        h == null || h.preventDefault(), h.stopPropagation(), o === !0 && (f == null || f());
+        h == null || h.preventDefault(), h.stopPropagation(), o === !0 && ($ == null || $());
       },
-      ...E,
-      key: i,
-      className: `profile-item ${C}`,
+      ...I,
+      key: d,
+      className: `profile-item ${w}`,
       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}` }
+      isActive: v,
+      themeColor: (_ == null ? void 0 : _.code) || "transparent",
+      as: l,
+      ...k ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Oe(m) ? m : c }),
+    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Be(g) ? g : c }),
     /* @__PURE__ */ s("div", { children: [
-      /* @__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 }) })
+      /* @__PURE__ */ n("div", { className: "name", children: d }),
+      !a && /* @__PURE__ */ n("div", { className: "description", children: D }),
+      m > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Ae, { className: "badge", color: "danger", size: "small", children: m > 99 ? "99+" : m }) })
     ] })
   );
 }, ye = (r) => {
@@ -340,115 +340,115 @@ const qe = w.a`
     const t = new Date(r), o = t.getFullYear(), a = t.getMonth() + 1;
     return `${String(t.getDate()).padStart(2)}. ${a}. ${o}.`;
   }
-}, rr = R((r, t) => {
+}, nr = R((r, t) => {
   var pe;
   const o = _e(), {
     uuid: a,
     shopUuid: c,
-    title: m = "",
+    title: g = "",
     // description,
     // badges,
-    coverPhoto: i,
-    onSelect: S,
+    coverPhoto: d,
+    onSelect: m,
     // status,
-    startDate: d,
-    endDate: p,
-    salesPackages: g,
-    shopName: k,
-    shopCategory: f,
-    shopImage: b,
-    shopImageComponent: C,
-    className: I,
-    onSelectCard: y = () => {
+    startDate: x,
+    endDate: i,
+    salesPackages: b,
+    shopName: p,
+    shopCategory: $,
+    shopImage: v,
+    shopImageComponent: w,
+    className: D,
+    onSelectCard: _ = () => {
     },
-    onSelectShop: l = () => {
+    onSelectShop: k = () => {
     },
-    upcoming: u = !1,
-    upcomingCampaignText: D,
-    campaignSingleText: E,
+    upcoming: l = !1,
+    upcomingCampaignText: f,
+    campaignSingleText: I,
     salesCampaignTypes: h = [],
     startsInPrefixTextPlural: V,
     startsinSuffixTextPlural: F,
     startsInPrefixTextSingular: A,
     startsinSuffixTextSingular: se,
-    endsInPrefixTextPlural: Z,
-    endsinSuffixTextPlural: q,
+    endsInPrefixTextPlural: q,
+    endsinSuffixTextPlural: H,
     endsInPrefixTextSingular: j,
-    endsinSuffixTextSingular: H,
-    endedText: X,
+    endsinSuffixTextSingular: Y,
+    endedText: Z,
     themeData: ie,
-    numberOfListings: z,
-    numberOfListingsTextSingular: Y,
-    numberOfListingsTextPlural: B,
+    numberOfListings: P,
+    numberOfListingsTextSingular: J,
+    numberOfListingsTextPlural: O,
     metadata: e,
-    LinkComponent: O,
+    LinkComponent: B,
     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 _ = Te, $ = L.getTime() - _.getTime();
-    if ($ <= 0) return null;
-    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 };
+    ...K
+  } = r, ke = B || "a", ce = Se(), E = We(x, i), Q = E !== -1 && (E == null ? void 0 : E.isEnded) === !0, X = E !== -1 && !Q, ee = Ge(x), L = Ve(i), Ie = L !== null && L <= 2 && L > 0, de = he(i), ge = de ? new Date(de) : null, Ne = /* @__PURE__ */ new Date(), re = ge ? ge.getTime() - Ne.getTime() : null, W = re !== null && re > 0 && re < 24 * 60 * 60 * 1e3, me = (u, U, N, C, T) => N === 1 ? `${u} ${N} ${C}` : `${U} ${N} ${T}`, De = () => {
+    if (!i) return null;
+    const u = he(i), U = u ? new Date(u) : null;
+    if (!U) return null;
+    const N = Te, C = U.getTime() - N.getTime();
+    if (C <= 0) return null;
+    const T = Math.floor(C / (1e3 * 60 * 60)), Pe = Math.floor(C % (1e3 * 60 * 60) / (1e3 * 60)), Le = Math.floor(C % (1e3 * 60) / 1e3);
+    return { hours: T, minutes: Pe, seconds: Le };
   }, [Te, ze] = ne(/* @__PURE__ */ new Date());
   ae(() => {
     if (!W) return;
-    const x = setInterval(() => {
+    const u = setInterval(() => {
       ze(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(x);
+    return () => clearInterval(u);
   }, [W]);
-  const G = W ? Ne() : null;
+  const G = W ? De() : null;
   return /* @__PURE__ */ s(
-    qe,
+    Ye,
     {
       ref: ce,
       theme: o,
-      className: I,
+      className: D,
       name: e == null ? void 0 : e.name,
       "data-accessor": e == null ? void 0 : e.accessor,
-      onClick: (x) => y(x, ce),
-      as: Ce,
-      ...O ? { to: `/shop/${c}/campaign/${a}` } : { href: `/shop/${c}/campaign/${a}` },
+      onClick: (u) => _(u, ce),
+      as: ke,
+      ...B ? { to: `/shop/${c}/campaign/${a}` } : { href: `/shop/${c}/campaign/${a}` },
       sponsored: le,
-      ...J,
+      ...K,
       children: [
-        /* @__PURE__ */ s(He, { theme: o, children: [
-          /* @__PURE__ */ n("img", { src: i }),
-          /* @__PURE__ */ n(Je, { children: g == null ? void 0 : g.map((x, L) => {
-            var _, $;
+        /* @__PURE__ */ s(Ze, { theme: o, children: [
+          /* @__PURE__ */ n("img", { src: d }),
+          /* @__PURE__ */ n(Qe, { children: b == null ? void 0 : b.map((u, U) => {
+            var N, C;
             return /* @__PURE__ */ n(
-              Ke,
+              Xe,
               {
-                color: (_ = h == null ? void 0 : h.find((N) => N.value === x)) == null ? void 0 : _.color,
+                color: (N = h == null ? void 0 : h.find((T) => T.value === u)) == null ? void 0 : N.color,
                 theme: o,
                 children: /* @__PURE__ */ n(
-                  Se,
+                  $e,
                   {
-                    icon: ($ = h == null ? void 0 : h.find((N) => N.value === x)) == null ? void 0 : $.icon
+                    icon: (C = h == null ? void 0 : h.find((T) => T.value === u)) == null ? void 0 : C.icon
                   }
                 )
               },
-              `package__${L}`
+              `package__${U}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ s(Xe, { theme: o, children: [
+        /* @__PURE__ */ s(Je, { 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: (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),
+            /* @__PURE__ */ n("div", { className: "campaign-title", children: (pe = l ? f : I) == null ? void 0 : pe.toUpperCase() }),
+            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: g }),
+            i && x && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
+              ye(x),
               " - ",
-              ye(p)
+              ye(i)
             ] }),
             /* @__PURE__ */ s("div", { className: "timestamp-text", children: [
-              z > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
-                z,
+              P > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
+                P,
                 " ",
-                z === 1 ? Y : B,
+                P === 1 ? J : O,
                 " ",
                 "∙",
                 " "
@@ -456,7 +456,7 @@ const qe = w.a`
               /* @__PURE__ */ n(
                 "span",
                 {
-                  className: `duration-text ${Ie ? "urgent" : ""} ${Q ? "" : "starts-in"}`,
+                  className: `duration-text ${Ie ? "urgent" : ""} ${X ? "" : "starts-in"}`,
                   children: W && G ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
                     j,
                     " ",
@@ -465,13 +465,13 @@ const qe = w.a`
                     G.minutes.toString().padStart(2, "0"),
                     ":",
                     G.seconds.toString().padStart(2, "0")
-                  ] }) : Q && !K && P !== null && P > 0 ? me(
+                  ] }) : X && !Q && L !== null && L > 0 ? me(
                     j,
-                    Z,
-                    P,
-                    H,
-                    q
-                  ) : K ? X || "Završena" : !Q && ee !== null && ee > 0 ? me(
+                    q,
+                    L,
+                    Y,
+                    H
+                  ) : Q ? Z || "Završena" : !X && ee !== null && ee > 0 ? me(
                     A,
                     V,
                     ee,
@@ -483,25 +483,25 @@ const qe = w.a`
             ] })
           ] }) }),
           /* @__PURE__ */ n(
-            er,
+            rr,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(Qe, { src: b }),
-              imageComponent: C,
+              image: /* @__PURE__ */ n(er, { src: v }),
+              imageComponent: w,
               themeData: ie,
               isActive: !0,
               isUser: !1,
-              name: k,
-              shopCategory: f,
+              name: p,
+              shopCategory: $,
               uuid: c,
-              onClick: () => l(c)
+              onClick: () => k(c)
             }
           )
         ] })
       ]
     }
   );
-}), nr = w.div`
+}), tr = S.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -540,7 +540,7 @@ const qe = w.a`
     right: 0;
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media ${z("S")} {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -552,13 +552,17 @@ const qe = w.a`
       }
     }
   }
-`, tr = w(Ze.div)`
+`, ar = S(He.div)`
   display: grid;
   grid-template-columns: repeat(${(r) => r == null ? void 0 : r.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${T + "px"}) {
+  @media ${Fe("M")} {
+    grid-template-columns: repeat(${(r) => (r == null ? void 0 : r.tabletNumOfColumns) ?? 2}, 1fr);
+  }
+
+  @media ${z("S")} {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -580,37 +584,38 @@ const qe = w.a`
       /* Safari and Chrome */
     }
   }
-`, ar = R(
+`, or = R(
   ({
     icon: r,
     title: t,
     numOfSlides: o = 4,
-    showNavigation: a = !0,
-    hasNextPage: c = !1,
-    handleFetchNextPage: m = () => {
+    tabletNumOfSlides: a,
+    showNavigation: c = !0,
+    hasNextPage: g = !1,
+    handleFetchNextPage: d = () => {
     },
-    children: i
-  }, S) => {
-    const [d, p] = ne(0), [g, k] = ne(1), f = ke(), b = (i == null ? void 0 : i.length) ?? 1;
+    children: m
+  }, x) => {
+    const [i, b] = ne(0), [p, $] = ne(1), v = Ce(), w = (m == null ? void 0 : m.length) ?? 1;
     ae(() => {
       const l = () => {
-        k(o);
+        $(o);
       };
       return window.addEventListener("resize", l), l(), () => window.removeEventListener("resize", l);
     }, []);
-    const C = f ? i : i == null ? void 0 : i.slice(d, d + g), I = (l) => {
-      var D;
-      (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);
+    const D = v ? m : m == null ? void 0 : m.slice(i, i + p), _ = (l) => {
+      var I;
+      (I = l == null ? void 0 : l.target) == null || I.blur();
+      const f = i + p;
+      f < w && b(f), f + p >= w && g && d();
+    }, k = (l) => {
+      var f;
+      (f = l == null ? void 0 : l.target) == null || f.blur(), i - p >= 0 && b(i - p);
     };
-    return /* @__PURE__ */ s(nr, { ref: S, children: [
+    return /* @__PURE__ */ s(tr, { ref: x, children: [
       /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ s("div", { className: "scrollable-section__title", children: [
         te(r) && /* @__PURE__ */ n(
-          Se,
+          $e,
           {
             icon: r,
             color: "primary",
@@ -624,10 +629,11 @@ const qe = w.a`
         ] })
       ] }) }),
       /* @__PURE__ */ s(
-        tr,
+        ar,
         {
           numOfColumns: o,
-          ...!f && {
+          tabletNumOfColumns: a,
+          ...!v && {
             animate: {
               x: 0,
               opacity: 1
@@ -638,13 +644,13 @@ const qe = w.a`
             }
           },
           children: [
-            C,
-            f && c && /* @__PURE__ */ n(Ae, { onIsVisible: m })
+            D,
+            v && g && /* @__PURE__ */ n(qe, { onIsVisible: d })
           ]
         },
-        `scrollable-section__content-${d}`
+        `scrollable-section__content-${i}`
       ),
-      a && b > g && !f && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
+      c && w > p && !v && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
         /* @__PURE__ */ n(
           ue,
           {
@@ -653,8 +659,8 @@ const qe = w.a`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: d === 0,
-            onClick: y
+            disabled: i === 0,
+            onClick: k
           }
         ),
         /* @__PURE__ */ n(
@@ -665,14 +671,14 @@ const qe = w.a`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: d + g >= b,
-            onClick: I
+            disabled: i + p >= w,
+            onClick: _
           }
         )
       ] })
     ] });
   }
-), or = w.div`
+), sr = S.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -689,7 +695,7 @@ const qe = w.a`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, sr = R(
+`, ir = R(
   ({
     sectionName: r,
     imageUrl: t,
@@ -697,18 +703,18 @@ const qe = w.a`
     className: a = "",
     handleClick: c = () => {
     }
-  }, m) => /* @__PURE__ */ n(
-    or,
+  }, g) => /* @__PURE__ */ n(
+    sr,
     {
-      ref: m,
+      ref: g,
       maxHeight: o,
       onClick: c,
       className: `itemless-banner ${a}`,
       children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
     }
   )
-), ir = w(M)`
-  @media (max-width: ${T + "px"}) {
+), lr = S(M)`
+  @media ${z("S")} {
     flex-direction: column;
 
     & .skeleton__image {
@@ -722,7 +728,7 @@ const qe = w.a`
       }
     }
   }
-`, lr = ({ keyPrefix: r }) => /* @__PURE__ */ s(ir, { children: [
+`, cr = ({ keyPrefix: r }) => /* @__PURE__ */ s(lr, { children: [
   /* @__PURE__ */ s(M, { children: [
     /* @__PURE__ */ n(
       xe,
@@ -734,13 +740,13 @@ const qe = w.a`
       `${r}-1`
     ),
     /* @__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__ */ n(y, { height: "1rem" }),
+      /* @__PURE__ */ n(y, { height: "1.75rem" }),
+      /* @__PURE__ */ n(y, { height: "1.25rem" }),
+      /* @__PURE__ */ n(y, { 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__ */ n(y, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }),
@@ -755,66 +761,66 @@ const qe = w.a`
       `${r}-2`
     ),
     /* @__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__ */ n(y, { height: "1rem" }),
+      /* @__PURE__ */ n(y, { height: "1.75rem" }),
+      /* @__PURE__ */ n(y, { height: "1.25rem" }),
+      /* @__PURE__ */ n(y, { 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__ */ n(y, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] })
-] }), cr = ({
+] }), dr = ({
   keyPrefix: r,
   isLoading: t = !1,
-  fallbackComponent: o = /* @__PURE__ */ n(Ee, {}),
+  fallbackComponent: o = /* @__PURE__ */ n(Ue, {}),
   children: a
-}) => /* @__PURE__ */ n(Re, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(lr, { keyPrefix: r }) : a }), dr = je(rr), kr = R(
+}) => /* @__PURE__ */ n(Re, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(cr, { keyPrefix: r }) : a }), gr = je(nr), kr = R(
   ({
     sellerType: r = "Shop",
     items: t = [],
     title: o,
     icon: a,
     isLoading: c,
-    onSelectCard: m = () => {
+    onSelectCard: g = () => {
     },
-    onSelectShop: i = () => {
+    onSelectShop: d = () => {
     },
-    getImage: S = () => {
+    getImage: m = () => {
     },
-    campaignSingleText: d,
-    upcomingCampaignText: p,
-    salesCampaignTypes: g = [],
-    startsInPrefixTextPlural: k,
-    startsinSuffixTextPlural: f,
-    startsInPrefixTextSingular: b,
-    startsinSuffixTextSingular: C,
-    endsInPrefixTextPlural: I,
-    endsinSuffixTextPlural: y,
-    endsInPrefixTextSingular: l,
-    endsinSuffixTextSingular: u,
-    endedText: D,
-    numOfSlides: E = 4,
+    campaignSingleText: x,
+    upcomingCampaignText: i,
+    salesCampaignTypes: b = [],
+    startsInPrefixTextPlural: p,
+    startsinSuffixTextPlural: $,
+    startsInPrefixTextSingular: v,
+    startsinSuffixTextSingular: w,
+    endsInPrefixTextPlural: D,
+    endsinSuffixTextPlural: _,
+    endsInPrefixTextSingular: k,
+    endsinSuffixTextSingular: l,
+    endedText: f,
+    numOfSlides: I = 4,
     showNavigation: h = !0,
     numberOfListingsTextSingular: V,
     numberOfListingsTextPlural: F,
     itemlessImageUrl: A,
     itemlessLink: se,
-    handleItemlessLink: Z = () => {
+    handleItemlessLink: q = () => {
     },
-    componentName: q,
+    componentName: H,
     hasNextPage: j = !1,
-    handleFetchNextPage: H = () => {
+    handleFetchNextPage: Y = () => {
     },
-    LinkComponent: X
+    LinkComponent: Z
   }, ie) => {
-    const z = ke(), Y = Be(() => {
-      let B = t == null ? void 0 : t.map((e, O) => /* @__PURE__ */ n(
-        dr,
+    const P = Ce(), J = Oe(() => {
+      let O = t == null ? void 0 : t.map((e, B) => /* @__PURE__ */ n(
+        gr,
         {
           className: "campaign-item",
-          coverPhoto: S(
+          coverPhoto: m(
             e == null ? void 0 : e.coverPhoto,
             (e == null ? void 0 : e.uuid) || (e == null ? void 0 : e.campaignUuid)
           ),
@@ -830,61 +836,62 @@ const qe = w.a`
           startDate: e == null ? void 0 : e.startDate,
           title: e == null ? void 0 : e.name,
           uuid: e == null ? void 0 : e.campaignUuid,
-          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,
+          onSelectCard: (le, K) => g(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, K),
+          onSelectShop: () => d(e == null ? void 0 : e.shopUuid),
+          campaignSingleText: x,
+          upcomingCampaignText: i,
           upcoming: e == null ? void 0 : e.upcoming,
-          salesCampaignTypes: g,
-          startsInPrefixTextPlural: k,
-          startsinSuffixTextPlural: f,
-          startsInPrefixTextSingular: b,
-          startsinSuffixTextSingular: C,
-          endsInPrefixTextPlural: I,
-          endsinSuffixTextPlural: y,
-          endsInPrefixTextSingular: l,
-          endsinSuffixTextSingular: u,
-          endedText: D,
+          salesCampaignTypes: b,
+          startsInPrefixTextPlural: p,
+          startsinSuffixTextPlural: $,
+          startsInPrefixTextSingular: v,
+          startsinSuffixTextSingular: w,
+          endsInPrefixTextPlural: D,
+          endsinSuffixTextPlural: _,
+          endsInPrefixTextSingular: k,
+          endsinSuffixTextSingular: l,
+          endedText: f,
           themeData: e == null ? void 0 : e.themeData,
           numberOfListings: e == null ? void 0 : e.numberOfListings,
           numberOfListingsTextSingular: V,
           numberOfListingsTextPlural: F,
-          metadata: { name: q, accessor: e == null ? void 0 : e.accessor },
-          LinkComponent: X,
+          metadata: { name: H, accessor: e == null ? void 0 : e.accessor },
+          LinkComponent: Z,
           sponsored: e == null ? void 0 : e.sponsored
         },
-        `campaign__item__${O}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
+        `campaign__item__${B}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
       ));
-      return (t == null ? void 0 : t.length) < 4 && !z ? [
-        ...B,
+      return (t == null ? void 0 : t.length) < 4 && !P ? [
+        ...O,
         /* @__PURE__ */ n(
-          sr,
+          ir,
           {
             imageUrl: A,
             className: "campaign-item",
-            handleClick: Z
+            handleClick: q
           },
           "itemless-campaign-section-banner"
         )
-      ] : B;
+      ] : O;
     }, [t]);
     return /* @__PURE__ */ n(
-      cr,
+      dr,
       {
         isLoading: c,
         keyPrefix: "sales-campaign-skeleton",
         children: /* @__PURE__ */ n(
-          ar,
+          or,
           {
             icon: a,
             title: o,
-            numOfSlides: E,
+            numOfSlides: I,
+            tabletNumOfSlides: 2,
             showNavigation: h,
             hasNextPage: j,
-            handleFetchNextPage: H,
-            children: Y
+            handleFetchNextPage: Y,
+            children: J
           },
-          `sales-campaign-section__${z}`
+          `sales-campaign-section__${P}`
         )
       }
     );