@lanaco/lnc-react-ui 4.0.133 → 4.0.135

package/dist/SalesCampaignsSection.js

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as g, Fragment as Ce } from "react/jsx-runtime";
-import { forwardRef as M, useRef as Te, useEffect as J, Fragment as ke, createElement as Ne, useState as U, Suspense as De, memo as Ie, useMemo as Pe } from "react";
+import { jsx as n, jsxs as g, Fragment as Te } from "react/jsx-runtime";
+import { forwardRef as z, useRef as ke, useEffect as K, Fragment as Ne, createElement as De, useState as U, Suspense as Ie, memo as Pe, useMemo as Me } from "react";
 import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as O, k as q, o as de } from "./utils-BPdU4_1q.js";
-import { M as z } from "./consts-BuFChS64.js";
+import { a as O, k as J, l as ze, o as de } from "./utils-BPdU4_1q.js";
+import { M as L } from "./consts-BuFChS64.js";
 import { m as ge } from "./motion-Ckekul_K.js";
 import { P as a } from "./index-CblbdqjE.js";
 import me from "./Icon.js";
 import { D as ae } from "./ShopAvatar-4-fCYGEc.js";
-import Me from "./Badge.js";
-import { u as K } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import Le from "./Badge.js";
+import { u as Q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import oe from "./IconButton.js";
 import { u as he } from "./useDetectMobile-Bkvj0VMa.js";
-const ze = f.div`
+const Ue = f.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -19,14 +19,14 @@ const ze = f.div`
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${z + "px"}) {
+  @media (max-width: ${L + "px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
     border: none;
     border-radius: 0;
   }
-`, Le = f.div`
+`, Oe = f.div`
   border-radius: ${(e) => O(e.theme, "edged")};
   height: 13.75rem;
   width: 13.75rem;
@@ -50,12 +50,12 @@ const ze = f.div`
     }
   }
 
-  @media (max-width: ${z + "px"}) {
+  @media (max-width: ${L + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, Ue = f.div`
+`, Ee = f.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -127,7 +127,7 @@ const ze = f.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${z + "px"}) {
+  @media (max-width: ${L + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -141,13 +141,13 @@ const ze = f.div`
       gap: 0.25rem;
     }
   }
-`, ie = (e = !1, n = !1, o = !1) => `
+`, ie = (e = !1, t = !1, o = !1) => `
     display: flex;
-    ${n ? "flex-wrap: wrap;" : ""}
-    ${n ? "" : "flex-wrap: nowrap;"}
+    ${t ? "flex-wrap: wrap;" : ""}
+    ${t ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Oe = f(ge.div)`
+  `, je = f(ge.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -218,13 +218,13 @@ const ze = f.div`
     cursor: pointer;
     background-color: var(--gray-95080, #14161acc);
   }
-`, Ee = f.div`
+`, Re = f.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, je = f.div`
+`, Be = f.div`
   border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
   background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
@@ -240,62 +240,63 @@ const ze = f.div`
   & i {
     font-size: 0.813rem;
   }
-`, Re = M(({ src: e, ...n }, o) => {
-  const i = Te();
-  return J(() => {
-    var d;
-    const m = (c) => {
-      c.target.src = ae, c.onerror = null;
+`, Fe = z(({ src: e, ...t }, o) => {
+  const i = ke();
+  return K(() => {
+    var c;
+    const m = (d) => {
+      d.target.src = ae, d.onerror = null;
     };
-    return (d = i == null ? void 0 : i.current) == null || d.addEventListener("error", m), () => {
-      var c;
-      (c = i == null ? void 0 : i.current) == null || c.removeEventListener("error", m);
+    return (c = i == null ? void 0 : i.current) == null || c.addEventListener("error", m), () => {
+      var d;
+      (d = i == null ? void 0 : i.current) == null || d.removeEventListener("error", m);
     };
-  }, []), /* @__PURE__ */ t(ke, { ref: o, children: q(e) ? /* @__PURE__ */ t("img", { ref: i, src: e, ...n }) : /* @__PURE__ */ t("img", { src: ae, ...n }) });
+  }, []), /* @__PURE__ */ n(Ne, { ref: o, children: J(e) ? /* @__PURE__ */ n("img", { ref: i, src: e, ...t }) : /* @__PURE__ */ n("img", { src: ae, ...t }) });
 }), ue = (e) => {
   const {
-    uuid: n,
+    uuid: t,
     hasPermission: o = !0,
     isUser: i,
     image: m,
+    imageComponent: c,
     name: d,
-    notifications: c = 0,
-    color: l = "primary",
-    size: h = "large",
-    style: u,
-    disabled: C,
+    notifications: l = 0,
+    color: h = "primary",
+    size: u = "large",
+    style: N,
+    disabled: $,
     onClick: b = () => {
     },
-    isActive: T,
-    className: $,
-    shopCategory: _,
+    isActive: _,
+    className: C,
+    shopCategory: y,
     // new
-    themeData: x
-  } = e, y = {
-    theme: K(),
-    color: l,
-    size: h,
-    style: u,
-    disabled: C
+    themeData: v
+  } = e, D = {
+    theme: Q(),
+    color: h,
+    size: u,
+    style: N,
+    disabled: $
   };
-  return /* @__PURE__ */ Ne(
-    Oe,
+  return /* @__PURE__ */ De(
+    je,
     {
-      onClick: (N) => {
-        N.stopPropagation(), o === !0 && (b == null || b());
+      onClick: (T) => {
+        T.stopPropagation(), o === !0 && (b == null || b());
       },
-      ...y,
+      ...D,
       key: d,
-      className: `profile-item ${$}`,
+      className: `profile-item ${C}`,
       hasPermission: o,
-      isActive: T,
-      themeColor: (x == null ? void 0 : x.code) || "transparent"
+      isActive: _,
+      themeColor: (v == null ? void 0 : v.code) || "transparent"
     },
-    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: m }),
+    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: ze(c) ? c : m }),
     /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ t("div", { className: "name", children: d }),
-      !i && /* @__PURE__ */ t("div", { className: "description", children: _ }),
-      c > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(Me, { className: "badge", color: "danger", size: "small", children: c > 99 ? "99+" : c }) })
+      /* @__PURE__ */ n("div", { className: "name", children: d }),
+      !i && /* @__PURE__ */ n("div", { className: "description", children: y }),
+      l > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Le, { className: "badge", color: "danger", size: "small", children: l > 99 ? "99+" : l }) })
     ] })
   );
 };
@@ -321,162 +322,164 @@ ue.propTypes = {
   onSelect: a.func,
   hasPermission: a.bool
 };
-const se = (e, n) => {
-  if (!e || !n) return null;
-  const o = e.getTime() - n.getTime(), i = 24 * 60 * 60 * 1e3;
+const se = (e, t) => {
+  if (!e || !t) return null;
+  const o = e.getTime() - t.getTime(), i = 24 * 60 * 60 * 1e3;
   return o >= 0 ? Math.ceil(o / i) : Math.floor(o / i);
 }, le = (e) => {
   if (e !== void 0) {
-    const n = new Date(e), o = n.getFullYear(), i = n.getMonth() + 1;
-    return `${String(n.getDate()).padStart(2)}. ${i}. ${o}.`;
+    const t = new Date(e), o = t.getFullYear(), i = t.getMonth() + 1;
+    return `${String(t.getDate()).padStart(2)}. ${i}. ${o}.`;
   }
-}, fe = M((e, n) => {
-  var ne;
-  const o = K(), {
+}, fe = z((e, t) => {
+  var te;
+  const o = Q(), {
     // uuid,
     shopUuid: i,
     title: m = "",
     // description,
     // badges,
-    coverPhoto: d,
-    onSelect: c,
+    coverPhoto: c,
+    onSelect: d,
     // status,
     startDate: l,
     endDate: h,
     salesPackages: u,
-    shopName: C,
-    shopCategory: b,
-    shopImage: T,
-    className: $,
-    onSelectCard: _ = () => {
+    shopName: N,
+    shopCategory: $,
+    shopImage: b,
+    shopImageComponent: _,
+    className: C,
+    onSelectCard: y = () => {
     },
-    onSelectShop: x = () => {
+    onSelectShop: v = () => {
     },
-    upcoming: k = !1,
-    upcomingCampaignText: y,
-    campaignSingleText: N,
-    salesCampaignTypes: w = [],
-    startsInPrefixTextPlural: I,
-    startsinSuffixTextPlural: E,
-    startsInPrefixTextSingular: j,
-    startsinSuffixTextSingular: R,
-    endsInPrefixTextPlural: s,
-    endsinSuffixTextPlural: p,
-    endsInPrefixTextSingular: B,
-    endsinSuffixTextSingular: Q,
-    themeData: F,
-    numberOfListings: L,
-    numberOfListingsTextSingular: W,
-    numberOfListingsTextPlural: r,
-    ...Y
-  } = e, ee = l ? new Date(l) <= /* @__PURE__ */ new Date() : !1, we = se(
+    upcoming: S = !1,
+    upcomingCampaignText: D,
+    campaignSingleText: T,
+    salesCampaignTypes: x = [],
+    startsInPrefixTextPlural: E,
+    startsinSuffixTextPlural: j,
+    startsInPrefixTextSingular: R,
+    startsinSuffixTextSingular: s,
+    endsInPrefixTextPlural: p,
+    endsinSuffixTextPlural: H,
+    endsInPrefixTextSingular: G,
+    endsinSuffixTextSingular: B,
+    themeData: Y,
+    numberOfListings: P,
+    numberOfListingsTextSingular: r,
+    numberOfListingsTextPlural: Z,
+    ...we
+  } = e, ee = l ? new Date(l) <= /* @__PURE__ */ new Date() : !1, ve = se(
     l ? new Date(l) : null,
     /* @__PURE__ */ new Date()
-  ), A = se(
+  ), F = se(
     h ? new Date(h) : null,
     /* @__PURE__ */ new Date()
-  ), ve = A !== null && A <= 2 && A > 0, re = h ? new Date(h).getTime() : null, be = Date.now(), Z = re !== null ? re - be : null, V = Z !== null && Z > 0 && Z < 24 * 60 * 60 * 1e3, te = (S, H, v, P, D) => v === 1 ? `${S} ${v} ${P}` : `${H} ${v} ${D}`, ye = () => {
+  ), be = F !== null && F <= 2 && F > 0, re = h ? new Date(h).getTime() : null, ye = Date.now(), q = re !== null ? re - ye : null, W = q !== null && q > 0 && q < 24 * 60 * 60 * 1e3, ne = (k, V, w, M, I) => w === 1 ? `${k} ${w} ${M}` : `${V} ${w} ${I}`, $e = () => {
     if (!h) return null;
-    const S = $e, v = new Date(h).getTime() - S.getTime();
-    if (v <= 0) return null;
-    const P = Math.floor(v / (1e3 * 60 * 60)), D = Math.floor(v % (1e3 * 60 * 60) / (1e3 * 60)), Se = Math.floor(v % (1e3 * 60) / 1e3);
-    return { hours: P, minutes: D, seconds: Se };
-  }, [$e, _e] = U(/* @__PURE__ */ new Date());
-  J(() => {
-    if (!V) return;
-    const S = setInterval(() => {
-      _e(/* @__PURE__ */ new Date());
+    const k = _e, w = new Date(h).getTime() - k.getTime();
+    if (w <= 0) return null;
+    const M = Math.floor(w / (1e3 * 60 * 60)), I = Math.floor(w % (1e3 * 60 * 60) / (1e3 * 60)), Se = Math.floor(w % (1e3 * 60) / 1e3);
+    return { hours: M, minutes: I, seconds: Se };
+  }, [_e, Ce] = U(/* @__PURE__ */ new Date());
+  K(() => {
+    if (!W) return;
+    const k = setInterval(() => {
+      Ce(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(S);
-  }, [V]);
-  const X = V ? ye() : null;
+    return () => clearInterval(k);
+  }, [W]);
+  const A = W ? $e() : null;
   return /* @__PURE__ */ g(
-    ze,
+    Ue,
     {
-      ref: n,
+      ref: t,
       theme: o,
-      className: $,
-      onClick: _,
-      ...Y,
+      className: C,
+      onClick: y,
+      ...we,
       children: [
-        /* @__PURE__ */ g(Le, { theme: o, onClick: () => c == null ? void 0 : c(), children: [
-          /* @__PURE__ */ t("img", { src: d }),
-          /* @__PURE__ */ t(Ee, { children: u == null ? void 0 : u.map((S, H) => {
-            var v, P;
-            return /* @__PURE__ */ t(
-              je,
+        /* @__PURE__ */ g(Oe, { theme: o, onClick: () => d == null ? void 0 : d(), children: [
+          /* @__PURE__ */ n("img", { src: c }),
+          /* @__PURE__ */ n(Re, { children: u == null ? void 0 : u.map((k, V) => {
+            var w, M;
+            return /* @__PURE__ */ n(
+              Be,
               {
-                color: (v = w == null ? void 0 : w.find((D) => D.value === S)) == null ? void 0 : v.color,
+                color: (w = x == null ? void 0 : x.find((I) => I.value === k)) == null ? void 0 : w.color,
                 theme: o,
-                children: /* @__PURE__ */ t(
+                children: /* @__PURE__ */ n(
                   me,
                   {
-                    icon: (P = w == null ? void 0 : w.find((D) => D.value === S)) == null ? void 0 : P.icon
+                    icon: (M = x == null ? void 0 : x.find((I) => I.value === k)) == null ? void 0 : M.icon
                   }
                 )
               },
-              `package__${H}`
+              `package__${V}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ g(Ue, { theme: o, children: [
-          /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ g("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ t("div", { className: "campaign-title", children: (ne = k ? y : N) == null ? void 0 : ne.toUpperCase() }),
-            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: m }),
+        /* @__PURE__ */ g(Ee, { theme: o, children: [
+          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ g("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ n("div", { className: "campaign-title", children: (te = S ? D : T) == null ? void 0 : te.toUpperCase() }),
+            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: m }),
             h && l && /* @__PURE__ */ g("div", { children: [
               le(l),
               " - ",
               le(h)
             ] }),
             /* @__PURE__ */ g("div", { className: "timestamp-text", children: [
-              L > 0 && /* @__PURE__ */ g("span", { className: "listings-text", children: [
-                L,
+              P > 0 && /* @__PURE__ */ g("span", { className: "listings-text", children: [
+                P,
                 " ",
-                L === 1 ? W : r,
+                P === 1 ? r : Z,
                 " ",
                 "∙",
                 " "
               ] }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ n(
                 "span",
                 {
-                  className: `duration-text ${ve ? "urgent" : ""} ${ee ? "" : "starts-in"}`,
-                  children: V && X ? /* @__PURE__ */ g("div", { className: "countdown-timer", children: [
-                    B,
+                  className: `duration-text ${be ? "urgent" : ""} ${ee ? "" : "starts-in"}`,
+                  children: W && A ? /* @__PURE__ */ g("div", { className: "countdown-timer", children: [
+                    G,
                     " ",
-                    X.hours.toString().padStart(2, "0"),
+                    A.hours.toString().padStart(2, "0"),
                     ":",
-                    X.minutes.toString().padStart(2, "0"),
+                    A.minutes.toString().padStart(2, "0"),
                     ":",
-                    X.seconds.toString().padStart(2, "0")
-                  ] }) : ee ? te(
+                    A.seconds.toString().padStart(2, "0")
+                  ] }) : ee ? ne(
+                    G,
+                    p,
+                    F,
                     B,
-                    s,
-                    A,
-                    Q,
-                    p
-                  ) : te(
-                    j,
-                    I,
-                    we,
+                    H
+                  ) : ne(
                     R,
-                    E
+                    E,
+                    ve,
+                    s,
+                    j
                   )
                 }
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ n(
             ue,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ t(Re, { src: T }),
-              themeData: F,
+              image: /* @__PURE__ */ n(Fe, { src: b }),
+              imageComponent: _,
+              themeData: Y,
               isActive: !0,
               isUser: !1,
-              name: C,
-              shopCategory: b,
-              onClick: () => x(i)
+              name: N,
+              shopCategory: $,
+              onClick: () => v(i)
             }
           )
         ] })
@@ -521,7 +524,7 @@ f.div`
     }
   }
 
-  @media (max-width: ${z + "px"}) {
+  @media (max-width: ${L + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
@@ -529,13 +532,13 @@ f.div`
     }
   }
 `;
-const G = f.div`
+const X = f.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
   ${de("-90deg")}
-`, Be = f.div`
+`, We = f.div`
   display: flex;
   flex-direction: ${(e) => e != null && e.row ? "row" : "column"};
   gap: ${(e) => (e == null ? void 0 : e.gap) ?? "0.5rem"};
@@ -551,7 +554,7 @@ const G = f.div`
   flex-shrink: 0;
 
   ${de()}
-`, Fe = f.div`
+`, Ae = f.div`
   background: var(--white, #fff);
   border-radius: ${(e) => O(e.theme, "edged")};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
@@ -580,59 +583,59 @@ const G = f.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${z + "px"}) {
+  @media (max-width: ${L + "px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`, We = f.div`
+`, Ve = f.div`
   display: flex;
   gap: 1.5rem;
-`, Ae = M(({}, e) => {
-  const n = K();
-  return /* @__PURE__ */ g(Fe, { ref: e, theme: n, children: [
-    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
+`, Xe = z(({}, e) => {
+  const t = Q();
+  return /* @__PURE__ */ g(Ae, { ref: e, theme: t, children: [
+    /* @__PURE__ */ n("div", { className: "campaign__left-section", children: /* @__PURE__ */ n(
       ce,
       {
-        theme: n,
+        theme: t,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
     /* @__PURE__ */ g("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ g(Be, { theme: n, children: [
-        /* @__PURE__ */ t(G, { heightCoeff: 0.75, theme: n, width: "35%" }),
-        /* @__PURE__ */ t(G, { heightCoeff: 1.25, theme: n }),
-        /* @__PURE__ */ t(G, { heightCoeff: 3, theme: n })
+      /* @__PURE__ */ g(We, { theme: t, children: [
+        /* @__PURE__ */ n(X, { heightCoeff: 0.75, theme: t, width: "35%" }),
+        /* @__PURE__ */ n(X, { heightCoeff: 1.25, theme: t }),
+        /* @__PURE__ */ n(X, { heightCoeff: 3, theme: t })
       ] }),
       /* @__PURE__ */ g("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ n(
           ce,
           {
-            theme: n,
+            theme: t,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(G, { theme: n, width: "75%" })
+        /* @__PURE__ */ n(X, { theme: t, width: "75%" })
       ] })
     ] })
   ] });
-}), Ve = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(We, { children: Array.from({ length: e }, (o, i) => /* @__PURE__ */ t(
-  Ae,
+}), He = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ n(Ve, { children: Array.from({ length: e }, (o, i) => /* @__PURE__ */ n(
+  Xe,
   {},
-  `${n}-skeleton-campaign-card-${i}`
-)) }), Xe = ({
+  `${t}-skeleton-campaign-card-${i}`
+)) }), Ge = ({
   children: e,
-  fallbackComponent: n = /* @__PURE__ */ t(Ce, {}),
+  fallbackComponent: t = /* @__PURE__ */ n(Te, {}),
   isLoading: o = !1,
   itemsCount: i = 5,
   keyPrefix: m
-}) => /* @__PURE__ */ t(De, { fallback: n, children: o === !0 ? /* @__PURE__ */ t(Ve, { itemsCount: i, keyPrefix: m }) : e }), He = f.div`
+}) => /* @__PURE__ */ n(Ie, { fallback: t, children: o === !0 ? /* @__PURE__ */ n(He, { itemsCount: i, keyPrefix: m }) : e }), Ye = f.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -673,56 +676,56 @@ const G = f.div`
     top: 0;
     right: 0;
   }
-`, Ge = f(ge.div)`
+`, Ze = f(ge.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${z + "px"}) {
+  @media (max-width: ${L + "px"}) {
     grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
   }
-`, pe = M(
+`, pe = z(
   ({
     icon: e,
-    title: n,
+    title: t,
     numOfSlides: o = 2,
     numOfSlidesForMobile: i = 1,
     showNavigation: m = !0,
-    children: d
-  }, c) => {
-    const [l, h] = U(0), [u, C] = U(1), [b, T] = U(null), [$, _] = U(null), x = he(), k = 50, y = (d == null ? void 0 : d.length) ?? 1;
-    J(() => {
+    children: c
+  }, d) => {
+    const [l, h] = U(0), [u, N] = U(1), [$, b] = U(null), [_, C] = U(null), y = he(), v = 50, S = (c == null ? void 0 : c.length) ?? 1;
+    K(() => {
       const s = () => {
-        C(x ? i : o);
+        N(y ? i : o);
       };
       return window.addEventListener("resize", s), s(), () => window.removeEventListener("resize", s);
     }, []);
-    const N = d == null ? void 0 : d.slice(l, l + u), w = (s) => {
+    const D = c == null ? void 0 : c.slice(l, l + u), T = (s) => {
       var p;
-      (p = s == null ? void 0 : s.target) == null || p.blur(), l + u < y && h(l + u);
-    }, I = (s) => {
+      (p = s == null ? void 0 : s.target) == null || p.blur(), l + u < S && h(l + u);
+    }, x = (s) => {
       var p;
       (p = s == null ? void 0 : s.target) == null || p.blur(), l - u >= 0 && h(l - u);
     };
     return /* @__PURE__ */ g(
-      He,
+      Ye,
       {
-        ref: c,
-        ...x ? { onTouchStart: (s) => {
+        ref: d,
+        ...y ? { onTouchStart: (s) => {
           var p;
-          _(null), T((p = s == null ? void 0 : s.targetTouches["0"]) == null ? void 0 : p.clientX);
+          C(null), b((p = s == null ? void 0 : s.targetTouches["0"]) == null ? void 0 : p.clientX);
         }, onTouchMove: (s) => {
           var p;
-          _((p = s == null ? void 0 : s.targetTouches["0"]) == null ? void 0 : p.clientX);
+          C((p = s == null ? void 0 : s.targetTouches["0"]) == null ? void 0 : p.clientX);
         }, onTouchEnd: () => {
-          if (!b || !$) return;
-          const s = b - $;
-          s > k && w(), s < -k && I();
+          if (!$ || !_) return;
+          const s = $ - _;
+          s > v && T(), s < -v && x();
         } } : {},
         children: [
-          /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ g("div", { className: "scrollable-section__title", children: [
-            q(e) && /* @__PURE__ */ t(
+          /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ g("div", { className: "scrollable-section__title", children: [
+            J(e) && /* @__PURE__ */ n(
               me,
               {
                 icon: e,
@@ -731,10 +734,10 @@ const G = f.div`
                 className: "title__icon"
               }
             ),
-            q(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
+            J(t) && /* @__PURE__ */ n("div", { className: "title__text", children: t })
           ] }) }),
-          /* @__PURE__ */ t(
-            Ge,
+          /* @__PURE__ */ n(
+            Ze,
             {
               numOfColumns: o,
               numOfColumnsForMobile: i,
@@ -746,12 +749,12 @@ const G = f.div`
                 x: 10,
                 opacity: 0
               },
-              children: N
+              children: D
             },
             `scrollable-section__content-${l}`
           ),
-          m && y > u && !x && /* @__PURE__ */ g("div", { className: "scrollable-section__navigation", children: [
-            /* @__PURE__ */ t(
+          m && S > u && !y && /* @__PURE__ */ g("div", { className: "scrollable-section__navigation", children: [
+            /* @__PURE__ */ n(
               oe,
               {
                 icon: "angle-left",
@@ -760,10 +763,10 @@ const G = f.div`
                 color: "neutral",
                 className: "navigation__arrow",
                 disabled: l === 0,
-                onClick: I
+                onClick: x
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ n(
               oe,
               {
                 icon: "angle-right",
@@ -771,8 +774,8 @@ const G = f.div`
                 btnType: "tinted",
                 color: "neutral",
                 className: "navigation__arrow",
-                disabled: l + u >= y,
-                onClick: w
+                disabled: l + u >= S,
+                onClick: T
               }
             )
           ] })
@@ -788,7 +791,7 @@ pe.propTypes = {
   numOfSlidesForMobile: a.number,
   showNavigation: a.bool
 };
-const Ye = f.div`
+const qe = f.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -805,21 +808,21 @@ const Ye = f.div`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, xe = M(
+`, xe = z(
   ({
     sectionName: e,
-    imageUrl: n,
+    imageUrl: t,
     maxHeight: o = "16.25rem",
     className: i = "",
     handleClick: m = () => {
     }
-  }) => /* @__PURE__ */ t(
-    Ye,
+  }) => /* @__PURE__ */ n(
+    qe,
     {
       maxHeight: o,
       onClick: m,
       className: `itemless-banner ${i}`,
-      children: /* @__PURE__ */ t("img", { src: n, alt: `itemless-banner__${e}` })
+      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${e}` })
     }
   )
 );
@@ -830,43 +833,43 @@ xe.propTypes = {
   className: a.string,
   handleClick: a.func
 };
-const Ze = Ie(fe), cr = M(
+const Je = Pe(fe), gr = z(
   ({
     sellerType: e = "Shop",
-    items: n = [],
+    items: t = [],
     title: o,
     icon: i,
     isLoading: m,
-    onSelectCard: d = () => {
+    onSelectCard: c = () => {
     },
-    onSelectShop: c = () => {
+    onSelectShop: d = () => {
     },
     getImage: l = () => {
     },
     campaignSingleText: h,
     upcomingCampaignText: u,
-    salesCampaignTypes: C = [],
-    startsInPrefixTextPlural: b,
-    startsinSuffixTextPlural: T,
-    startsInPrefixTextSingular: $,
-    startsinSuffixTextSingular: _,
-    endsInPrefixTextPlural: x,
-    endsinSuffixTextPlural: k,
-    endsInPrefixTextSingular: y,
-    endsinSuffixTextSingular: N,
-    numOfSlides: w = 2,
-    numOfSlidesForMobile: I = 1,
+    salesCampaignTypes: N = [],
+    startsInPrefixTextPlural: $,
+    startsinSuffixTextPlural: b,
+    startsInPrefixTextSingular: _,
+    startsinSuffixTextSingular: C,
+    endsInPrefixTextPlural: y,
+    endsinSuffixTextPlural: v,
+    endsInPrefixTextSingular: S,
+    endsinSuffixTextSingular: D,
+    numOfSlides: T = 2,
+    numOfSlidesForMobile: x = 1,
     showNavigation: E = !0,
     numberOfListingsTextSingular: j,
     numberOfListingsTextPlural: R,
     itemlessImageUrl: s,
     itemlessLink: p,
-    handleItemlessLink: B = () => {
+    handleItemlessLink: H = () => {
     }
-  }, Q) => {
-    const F = he(), L = Pe(() => {
-      let W = n == null ? void 0 : n.map((r, Y) => /* @__PURE__ */ t(
-        Ze,
+  }, G) => {
+    const B = he(), Y = Me(() => {
+      let P = t == null ? void 0 : t.map((r, Z) => /* @__PURE__ */ n(
+        Je,
         {
           className: "campaign-item",
           coverPhoto: l(
@@ -878,60 +881,61 @@ const Ze = Ie(fe), cr = M(
           salesPackages: r == null ? void 0 : r.salesPackages,
           sellerType: e,
           shopImage: r == null ? void 0 : r.profileImage,
+          shopImageComponent: r == null ? void 0 : r.profileImageComponent,
           shopName: r == null ? void 0 : r.shopName,
           shopUuid: r == null ? void 0 : r.shopUuid,
           shopCategory: r == null ? void 0 : r.shopCategory,
           startDate: r == null ? void 0 : r.startDate,
           title: r == null ? void 0 : r.name,
           uuid: r == null ? void 0 : r.campaignUuid,
-          onSelectCard: () => d(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
-          onSelectShop: () => c(r == null ? void 0 : r.shopUuid),
+          onSelectCard: () => c(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+          onSelectShop: () => d(r == null ? void 0 : r.shopUuid),
           campaignSingleText: h,
           upcomingCampaignText: u,
           upcoming: r == null ? void 0 : r.upcoming,
-          salesCampaignTypes: C,
-          startsInPrefixTextPlural: b,
-          startsinSuffixTextPlural: T,
-          startsInPrefixTextSingular: $,
-          startsinSuffixTextSingular: _,
-          endsInPrefixTextPlural: x,
-          endsinSuffixTextPlural: k,
-          endsInPrefixTextSingular: y,
-          endsinSuffixTextSingular: N,
+          salesCampaignTypes: N,
+          startsInPrefixTextPlural: $,
+          startsinSuffixTextPlural: b,
+          startsInPrefixTextSingular: _,
+          startsinSuffixTextSingular: C,
+          endsInPrefixTextPlural: y,
+          endsinSuffixTextPlural: v,
+          endsInPrefixTextSingular: S,
+          endsinSuffixTextSingular: D,
           themeData: r == null ? void 0 : r.themeData,
           numberOfListings: r == null ? void 0 : r.numberOfListings,
           numberOfListingsTextSingular: j,
           numberOfListingsTextPlural: R
         },
-        `campaign__item__${Y}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+        `campaign__item__${Z}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
       ));
-      return (n == null ? void 0 : n.length) < 2 && !F ? [
-        ...W,
-        /* @__PURE__ */ t(
+      return (t == null ? void 0 : t.length) < 2 && !B ? [
+        ...P,
+        /* @__PURE__ */ n(
           xe,
           {
             imageUrl: s,
             className: "campaign-item",
-            handleClick: B
+            handleClick: H
           }
         )
-      ] : W;
-    }, [n]);
-    return /* @__PURE__ */ t(
-      Xe,
+      ] : P;
+    }, [t]);
+    return /* @__PURE__ */ n(
+      Ge,
       {
         isLoading: m,
-        itemsCount: F ? 1 : 2,
+        itemsCount: B ? 1 : 2,
         keyPrefix: "sales-camp",
-        children: /* @__PURE__ */ t(
+        children: /* @__PURE__ */ n(
           pe,
           {
             icon: i,
             title: o,
-            numOfSlides: w,
-            numOfSlidesForMobile: I,
+            numOfSlides: T,
+            numOfSlidesForMobile: x,
             showNavigation: E,
-            children: L
+            children: Y
           }
         )
       }
@@ -939,5 +943,5 @@ const Ze = Ie(fe), cr = M(
   }
 );
 export {
-  cr as default
+  gr as default
 };