@lanaco/lnc-react-ui 4.0.117 → 4.0.119

package/dist/SalesCampaignsSection.js

@@ -1,16 +1,16 @@
-import { jsx as t, jsxs as m, Fragment as pe } from "react/jsx-runtime";
-import { createElement as xe, forwardRef as B, Suspense as be, useState as M, useEffect as we, memo as ve, useMemo as ye } from "react";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as F, o as Q, k as Z } from "./utils-BbgAIA9N.js";
-import { M as P } from "./consts-BuFChS64.js";
-import { m as ee } from "./motion-Ckekul_K.js";
+import { jsx as t, jsxs as c, Fragment as be } from "react/jsx-runtime";
+import { createElement as ye, forwardRef as V, useState as z, useEffect as te, Suspense as $e, memo as De, useMemo as Ce } from "react";
+import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as A, o as ne, k as H } from "./utils-BbgAIA9N.js";
+import { M as F } from "./consts-BuFChS64.js";
+import { m as ae } from "./motion-Ckekul_K.js";
 import { P as o } from "./index-CblbdqjE.js";
-import re from "./Icon.js";
-import $e from "./Badge.js";
-import { u as X } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import q from "./IconButton.js";
-import { u as ae } from "./useDetectMobile-Bkvj0VMa.js";
-const _e = h.div`
+import oe from "./Icon.js";
+import _e from "./Badge.js";
+import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import J from "./IconButton.js";
+import { u as ie } from "./useDetectMobile-Bkvj0VMa.js";
+const Se = m.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -18,15 +18,15 @@ const _e = h.div`
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${P + "px"}) {
+  @media (max-width: ${F + "px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
     border: none;
     border-radius: 0;
   }
-`, Ce = h.div`
-  border-radius: ${(e) => F(e.theme, "edged")};
+`, Te = m.div`
+  border-radius: ${(e) => A(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -49,12 +49,12 @@ const _e = h.div`
     }
   }
 
-  @media (max-width: ${P + "px"}) {
+  @media (max-width: ${F + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, De = h.div`
+`, ke = m.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -93,13 +93,30 @@ const _e = h.div`
     font-weight: 500;
     padding-top: 0.75rem;
     color: var(--gray-700, #4e555f);
+
+    & .listings-text {
+      color: var(--gray-700, #4e555f);
+    }
+
+    & .duration-text {
+      color: var(--gray-700, #4e555f);
+
+      &.urgent {
+        color: var(--primary-500, #f59e0b);
+      }
+    }
+
+    & .countdown-timer {
+      color: var(--primary-500, #f59e0b);
+      font-weight: 600;
+    }
   }
 
   & .profile-item:hover {
     background-color: transparent;
   }
 
-  @media (max-width: ${P + "px"}) {
+  @media (max-width: ${F + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -113,7 +130,7 @@ const _e = h.div`
       gap: 0.25rem;
     }
   }
-`, Se = {
+`, Ne = {
   "#ADE3EB": "#76D0DB",
   "#DDD6FE": "#C4B5FD",
   "#FDE68A": "#FCD34D",
@@ -125,13 +142,13 @@ const _e = h.div`
   "#E7E5E4": "#D6D3D1",
   "#FED7AA": "#FDBA74",
   default: "#C4C8CF"
-}, H = (e = !1, a = !1, i = !1) => `
+}, K = (e = !1, n = !1, i = !1) => `
     display: flex;
-    ${a ? "flex-wrap: wrap;" : ""}
-    ${a ? "" : "flex-wrap: nowrap;"}
+    ${n ? "flex-wrap: wrap;" : ""}
+    ${n ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${i ? "justify-content: center;" : ""}
-  `, Te = h(ee.div)`
+  `, Ie = m(ae.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -148,14 +165,14 @@ const _e = h.div`
     text-decoration: none;
   }
 
-  ${H(!0)}
+  ${K(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: ${(e) => e.isActive === !1 ? "var(--gray-900)" : "var(--primary-600)"};
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${(e) => F(e.theme, "slight")};
+  border-radius: ${(e) => A(e.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -164,11 +181,11 @@ const _e = h.div`
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${H(!0, !1, !0)}
+    ${K(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
     border: 3px solid
-      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : Se[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
+      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : Ne[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -211,14 +228,14 @@ const _e = h.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, ke = h.div`
+`, Pe = m.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Ne = h.div`
-  border-radius: ${(e) => F(e.theme, e.borderRadius || "slight")};
+`, Ee = m.div`
+  border-radius: ${(e) => A(e.theme, e.borderRadius || "slight")};
   background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
   height: 1.5rem;
@@ -233,54 +250,54 @@ const _e = h.div`
   & i {
     font-size: 0.813rem;
   }
-`, te = (e) => {
+`, se = (e) => {
   const {
-    uuid: a,
+    uuid: n,
     hasPermission: i = !0,
     isUser: l,
-    image: p,
-    name: u,
-    notifications: y = 0,
-    color: g = "primary",
-    size: $ = "large",
-    style: c,
+    image: f,
+    name: h,
+    notifications: p = 0,
+    color: s = "primary",
+    size: u = "large",
+    style: d,
     disabled: S,
-    onClick: s = () => {
+    onClick: b = () => {
     },
-    isActive: f,
-    className: b,
-    shopCategory: _,
+    isActive: $,
+    className: D,
+    shopCategory: C,
     // new
     themeData: x
-  } = e, w = {
-    theme: X(),
-    color: g,
-    size: $,
-    style: c,
+  } = e, y = {
+    theme: Y(),
+    color: s,
+    size: u,
+    style: d,
     disabled: S
   };
-  return /* @__PURE__ */ xe(
-    Te,
+  return /* @__PURE__ */ ye(
+    Ie,
     {
-      onClick: (D) => {
-        D.stopPropagation(), i === !0 && (s == null || s());
+      onClick: (k) => {
+        k.stopPropagation(), i === !0 && (b == null || b());
       },
-      ...w,
-      key: u,
-      className: `profile-item ${b}`,
+      ...y,
+      key: h,
+      className: `profile-item ${D}`,
       hasPermission: i,
-      isActive: f,
+      isActive: $,
       themeColor: (x == null ? void 0 : x.code) || "transparent"
     },
-    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: p }),
-    /* @__PURE__ */ m("div", { children: [
-      /* @__PURE__ */ t("div", { className: "name", children: u }),
-      !l && /* @__PURE__ */ t("div", { className: "description", children: _ }),
-      y > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t($e, { className: "badge", color: "danger", size: "small", children: y > 99 ? "99+" : y }) })
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: f }),
+    /* @__PURE__ */ c("div", { children: [
+      /* @__PURE__ */ t("div", { className: "name", children: h }),
+      !l && /* @__PURE__ */ t("div", { className: "description", children: C }),
+      p > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(_e, { className: "badge", color: "danger", size: "small", children: p > 99 ? "99+" : p }) })
     ] })
   );
 };
-te.propTypes = {
+se.propTypes = {
   id: o.any,
   isUserProfile: o.bool,
   themeColor: o.string,
@@ -302,123 +319,153 @@ te.propTypes = {
   onSelect: o.func,
   hasPermission: o.bool
 };
-const V = (e, a) => {
-  if (!e || !a) return null;
-  let i = Math.floor((e == null ? void 0 : e.getTime()) - (a == null ? void 0 : a.getTime())), l = 1e3 * 60 * 60 * 24;
-  return Math.ceil(i / l);
-}, J = (e) => {
+const Q = (e, n) => {
+  if (!e || !n) return null;
+  let i = Math.floor((e == null ? void 0 : e.getTime()) - (n == null ? void 0 : n.getTime())), l = 1e3 * 60 * 60 * 24;
+  return Math.floor(i / l);
+}, ee = (e) => {
   if (e !== void 0) {
-    const a = new Date(e), i = a.getFullYear(), l = a.getMonth() + 1;
-    return `${String(a.getDate()).padStart(2)}. ${l}. ${i}.`;
-  }
-}, ne = B((e, a) => {
-  var Y;
-  const i = X(), {
-    uuid: l,
-    shopUuid: p,
-    title: u = "",
-    description: y,
-    badges: g,
-    coverPhoto: $,
-    onSelect: c,
-    status: S,
+    const n = new Date(e), i = n.getFullYear(), l = n.getMonth() + 1;
+    return `${String(n.getDate()).padStart(2)}. ${l}. ${i}.`;
+  }
+}, le = V((e, n) => {
+  var q;
+  const i = Y(), {
+    // uuid,
+    shopUuid: l,
+    title: f = "",
+    // description,
+    // badges,
+    coverPhoto: h,
+    onSelect: p,
+    // status,
     startDate: s,
-    endDate: f,
-    salesPackages: b,
-    shopName: _,
-    shopCategory: x,
-    shopImage: C,
-    className: w,
-    onSelectCard: D = () => {
+    endDate: u,
+    salesPackages: d,
+    shopName: S,
+    shopCategory: b,
+    shopImage: $,
+    className: D,
+    onSelectCard: C = () => {
     },
-    onSelectShop: T = () => {
+    onSelectShop: x = () => {
     },
-    upcoming: k = !1,
-    upcomingCampaignText: I,
-    campaignSingleText: z,
+    upcoming: T = !1,
+    upcomingCampaignText: y,
+    campaignSingleText: k,
     salesCampaignTypes: v = [],
-    startsInPrefixTextPlural: n,
-    startsinSuffixTextPlural: d,
-    startsInPrefixTextSingular: L,
-    startsinSuffixTextSingular: r,
-    endsInPrefixTextPlural: R,
-    endsinSuffixTextPlural: ie,
-    endsInPrefixTextSingular: se,
-    endsinSuffixTextSingular: le,
-    themeData: ce,
-    numberOfListings: j,
+    startsInPrefixTextPlural: P,
+    startsinSuffixTextPlural: M,
+    startsInPrefixTextSingular: O,
+    startsinSuffixTextSingular: L,
+    endsInPrefixTextPlural: a,
+    endsinSuffixTextPlural: g,
+    endsInPrefixTextSingular: U,
+    endsinSuffixTextSingular: r,
+    themeData: X,
+    numberOfListings: G,
     numberOfListingsTextSingular: de,
     numberOfListingsTextPlural: ge,
     ...me
-  } = e, he = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1;
-  V(
-    f ? new Date(f) : null,
-    s ? new Date(s) : null
-  );
-  const ue = V(
+  } = e, he = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1, ue = Q(
     s ? new Date(s) : null,
     /* @__PURE__ */ new Date()
-  ), fe = V(
-    f ? new Date(f) : null,
+  ), N = Q(
+    u ? new Date(u) : null,
     /* @__PURE__ */ new Date()
-  ), G = (A, W, N, O, E) => N === 1 ? `${A} ${N} ${O}` : `${W} ${N} ${E}`;
-  return /* @__PURE__ */ m(
-    _e,
+  ), fe = N !== null && N <= 3 && N > 0, B = N !== null && N <= 1 && N >= 0, Z = (_, j, w, E, I) => w === 1 ? `${_} ${w} ${E}` : `${j} ${w} ${I}`, pe = () => {
+    if (!u) return null;
+    const _ = xe, w = new Date(u).getTime() - _.getTime();
+    if (w <= 0) return null;
+    const E = Math.floor(w / (1e3 * 60 * 60)), I = Math.floor(w % (1e3 * 60 * 60) / (1e3 * 60)), we = Math.floor(w % (1e3 * 60) / 1e3);
+    return { hours: E, minutes: I, seconds: we };
+  }, [xe, ve] = z(/* @__PURE__ */ new Date());
+  te(() => {
+    if (!B) return;
+    const _ = setInterval(() => {
+      ve(/* @__PURE__ */ new Date());
+    }, 1e3);
+    return () => clearInterval(_);
+  }, [B]);
+  const R = B ? pe() : null;
+  return /* @__PURE__ */ c(
+    Se,
     {
-      ref: a,
+      ref: n,
       theme: i,
-      className: w,
-      onClick: D,
+      className: D,
+      onClick: C,
       ...me,
       children: [
-        /* @__PURE__ */ m(Ce, { theme: i, onClick: () => c == null ? void 0 : c(), children: [
-          /* @__PURE__ */ t("img", { src: $ }),
-          /* @__PURE__ */ t(ke, { children: b == null ? void 0 : b.map((A, W) => {
-            var N, O;
+        /* @__PURE__ */ c(Te, { theme: i, onClick: () => p == null ? void 0 : p(), children: [
+          /* @__PURE__ */ t("img", { src: h }),
+          /* @__PURE__ */ t(Pe, { children: d == null ? void 0 : d.map((_, j) => {
+            var w, E;
             return /* @__PURE__ */ t(
-              Ne,
+              Ee,
               {
-                color: (N = v == null ? void 0 : v.find((E) => E.value === A)) == null ? void 0 : N.color,
+                color: (w = v == null ? void 0 : v.find((I) => I.value === _)) == null ? void 0 : w.color,
                 theme: i,
                 children: /* @__PURE__ */ t(
-                  re,
+                  oe,
                   {
-                    icon: (O = v == null ? void 0 : v.find((E) => E.value === A)) == null ? void 0 : O.icon
+                    icon: (E = v == null ? void 0 : v.find((I) => I.value === _)) == null ? void 0 : E.icon
                   }
                 )
               },
-              `package__${W}`
+              `package__${j}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ m(De, { theme: i, children: [
-          /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ m("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ t("div", { className: "campaign-title", children: (Y = k ? I : z) == null ? void 0 : Y.toUpperCase() }),
-            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: u }),
-            f && s && /* @__PURE__ */ m("div", { children: [
-              J(s),
+        /* @__PURE__ */ c(ke, { theme: i, children: [
+          /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ c("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ t("div", { className: "campaign-title", children: (q = T ? y : k) == null ? void 0 : q.toUpperCase() }),
+            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: f }),
+            u && s && /* @__PURE__ */ c("div", { children: [
+              ee(s),
               " - ",
-              J(f)
+              ee(u)
             ] }),
-            /* @__PURE__ */ m("div", { className: "timestamp-text", children: [
-              j > 0 && `${j} ${j === 1 ? de : ge} ∙ `,
-              he ? G(
-                se,
-                R,
-                fe,
-                le,
-                ie
-              ) : G(
-                L,
-                n,
-                ue,
-                r,
-                d
+            /* @__PURE__ */ c("div", { className: "timestamp-text", children: [
+              G > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
+                G,
+                " ",
+                G === 1 ? de : ge,
+                " ",
+                "∙",
+                " "
+              ] }),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: `duration-text ${fe ? "urgent" : ""}`,
+                  children: B && R ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
+                    U,
+                    " ",
+                    R.hours.toString().padStart(2, "0"),
+                    ":",
+                    R.minutes.toString().padStart(2, "0"),
+                    ":",
+                    R.seconds.toString().padStart(2, "0")
+                  ] }) : he ? Z(
+                    U,
+                    a,
+                    N,
+                    r,
+                    g
+                  ) : Z(
+                    O,
+                    P,
+                    ue,
+                    L,
+                    M
+                  )
+                }
               )
             ] })
           ] }) }),
           /* @__PURE__ */ t(
-            te,
+            se,
             {
               hasPermission: !0,
               image: (
@@ -431,17 +478,17 @@ const V = (e, a) => {
                 /* @__PURE__ */ t(
                   "img",
                   {
-                    src: C,
-                    className: `${C ? "" : "no-image"}`
+                    src: $,
+                    className: `${$ ? "" : "no-image"}`
                   }
                 )
               ),
-              themeData: ce,
+              themeData: X,
               isActive: !0,
               isUser: !1,
-              name: _,
-              shopCategory: x,
-              onClick: () => T(p)
+              name: S,
+              shopCategory: b,
+              onClick: () => x(l)
             }
           )
         ] })
@@ -449,13 +496,13 @@ const V = (e, a) => {
     }
   );
 });
-ne.propTypes = {
+le.propTypes = {
   title: o.oneOfType([o.string, o.element]),
   numberOfListings: o.number,
   dropdown: o.any,
   color: o.string
 };
-h.div`
+m.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -486,7 +533,7 @@ h.div`
     }
   }
 
-  @media (max-width: ${P + "px"}) {
+  @media (max-width: ${F + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
@@ -494,19 +541,19 @@ h.div`
     }
   }
 `;
-const U = h.div`
+const W = m.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${Q("-90deg")}
-`, Pe = h.div`
+  ${ne("-90deg")}
+`, Fe = m.div`
   display: flex;
   flex-direction: ${(e) => e != null && e.row ? "row" : "column"};
   gap: ${(e) => (e == null ? void 0 : e.gap) ?? "0.5rem"};
   width: ${(e) => (e == null ? void 0 : e.width) ?? "100%"};
-`, K = h.div`
-  border-radius: ${(e) => F(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, re = m.div`
+  border-radius: ${(e) => A(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
   background: var(--gray-200, #dddfe4);
   position: relative;
   max-height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
@@ -515,10 +562,10 @@ const U = h.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${Q()}
-`, Ee = h.div`
+  ${ne()}
+`, ze = m.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => F(e.theme, "edged")};
+  border-radius: ${(e) => A(e.theme, "edged")};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
   border: 1px solid var(--gray-95012, #14161a1f);
 
@@ -545,59 +592,59 @@ const U = h.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${P + "px"}) {
+  @media (max-width: ${F + "px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`, Fe = h.div`
+`, Ae = m.div`
   display: flex;
   gap: 1.5rem;
-`, Ie = B(({}, e) => {
-  const a = X();
-  return /* @__PURE__ */ m(Ee, { ref: e, theme: a, children: [
+`, Me = V(({}, e) => {
+  const n = Y();
+  return /* @__PURE__ */ c(ze, { ref: e, theme: n, children: [
     /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
-      K,
+      re,
       {
-        theme: a,
+        theme: n,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
-    /* @__PURE__ */ m("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ m(Pe, { theme: a, children: [
-        /* @__PURE__ */ t(U, { heightCoeff: 0.75, theme: a, width: "35%" }),
-        /* @__PURE__ */ t(U, { heightCoeff: 1.25, theme: a }),
-        /* @__PURE__ */ t(U, { heightCoeff: 3, theme: a })
+    /* @__PURE__ */ c("div", { className: "campaign__right-section", children: [
+      /* @__PURE__ */ c(Fe, { theme: n, children: [
+        /* @__PURE__ */ t(W, { heightCoeff: 0.75, theme: n, width: "35%" }),
+        /* @__PURE__ */ t(W, { heightCoeff: 1.25, theme: n }),
+        /* @__PURE__ */ t(W, { heightCoeff: 3, theme: n })
       ] }),
-      /* @__PURE__ */ m("div", { className: "campaign__user", children: [
+      /* @__PURE__ */ c("div", { className: "campaign__user", children: [
         /* @__PURE__ */ t(
-          K,
+          re,
           {
-            theme: a,
+            theme: n,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(U, { theme: a, width: "75%" })
+        /* @__PURE__ */ t(W, { theme: n, width: "75%" })
       ] })
     ] })
   ] });
-}), ze = ({ itemsCount: e = 5, keyPrefix: a }) => /* @__PURE__ */ t(Fe, { children: Array.from({ length: e }, (i, l) => /* @__PURE__ */ t(
-  Ie,
+}), Oe = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(Ae, { children: Array.from({ length: e }, (i, l) => /* @__PURE__ */ t(
+  Me,
   {},
-  `${a}-skeleton-campaign-card-${l}`
-)) }), Ae = ({
+  `${n}-skeleton-campaign-card-${l}`
+)) }), Le = ({
   children: e,
-  fallbackComponent: a = /* @__PURE__ */ t(pe, {}),
+  fallbackComponent: n = /* @__PURE__ */ t(be, {}),
   isLoading: i = !1,
   itemsCount: l = 5,
-  keyPrefix: p
-}) => /* @__PURE__ */ t(be, { fallback: a, children: i === !0 ? /* @__PURE__ */ t(ze, { itemsCount: l, keyPrefix: p }) : e }), Oe = h.div`
+  keyPrefix: f
+}) => /* @__PURE__ */ t($e, { fallback: n, children: i === !0 ? /* @__PURE__ */ t(Oe, { itemsCount: l, keyPrefix: f }) : e }), Ue = m.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -638,56 +685,56 @@ const U = h.div`
     top: 0;
     right: 0;
   }
-`, Me = h(ee.div)`
+`, Be = m(ae.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
 
-  @media (max-width: ${P + "px"}) {
+  @media (max-width: ${F + "px"}) {
     grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
   }
-`, oe = B(
+`, ce = V(
   ({
     icon: e,
-    title: a,
+    title: n,
     numOfSlides: i = 2,
     numOfSlidesForMobile: l = 1,
-    showNavigation: p = !0,
-    children: u
-  }, y) => {
-    const [g, $] = M(0), [c, S] = M(1), [s, f] = M(null), [b, _] = M(null), x = ae(), C = 50, w = (u == null ? void 0 : u.length) ?? 1;
-    we(() => {
-      const n = () => {
+    showNavigation: f = !0,
+    children: h
+  }, p) => {
+    const [s, u] = z(0), [d, S] = z(1), [b, $] = z(null), [D, C] = z(null), x = ie(), T = 50, y = (h == null ? void 0 : h.length) ?? 1;
+    te(() => {
+      const a = () => {
         S(x ? l : i);
       };
-      return window.addEventListener("resize", n), n(), () => window.removeEventListener("resize", n);
+      return window.addEventListener("resize", a), a(), () => window.removeEventListener("resize", a);
     }, []);
-    const D = u == null ? void 0 : u.slice(g, g + c), T = (n) => {
-      var d;
-      (d = n == null ? void 0 : n.target) == null || d.blur(), g + c < w && $(g + c);
-    }, k = (n) => {
-      var d;
-      (d = n == null ? void 0 : n.target) == null || d.blur(), g - c >= 0 && $(g - c);
+    const k = h == null ? void 0 : h.slice(s, s + d), v = (a) => {
+      var g;
+      (g = a == null ? void 0 : a.target) == null || g.blur(), s + d < y && u(s + d);
+    }, P = (a) => {
+      var g;
+      (g = a == null ? void 0 : a.target) == null || g.blur(), s - d >= 0 && u(s - d);
     };
-    return /* @__PURE__ */ m(
-      Oe,
+    return /* @__PURE__ */ c(
+      Ue,
       {
-        ref: y,
-        ...x ? { onTouchStart: (n) => {
-          var d;
-          _(null), f((d = n == null ? void 0 : n.targetTouches["0"]) == null ? void 0 : d.clientX);
-        }, onTouchMove: (n) => {
-          var d;
-          _((d = n == null ? void 0 : n.targetTouches["0"]) == null ? void 0 : d.clientX);
+        ref: p,
+        ...x ? { onTouchStart: (a) => {
+          var g;
+          C(null), $((g = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : g.clientX);
+        }, onTouchMove: (a) => {
+          var g;
+          C((g = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : g.clientX);
         }, onTouchEnd: () => {
-          if (!s || !b) return;
-          const n = s - b;
-          n > C && T(), n < -C && k();
+          if (!b || !D) return;
+          const a = b - D;
+          a > T && v(), a < -T && P();
         } } : {},
         children: [
-          /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ m("div", { className: "scrollable-section__title", children: [
-            Z(e) && /* @__PURE__ */ t(
-              re,
+          /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ c("div", { className: "scrollable-section__title", children: [
+            H(e) && /* @__PURE__ */ t(
+              oe,
               {
                 icon: e,
                 color: "primary",
@@ -695,10 +742,10 @@ const U = h.div`
                 className: "title__icon"
               }
             ),
-            Z(a) && /* @__PURE__ */ t("div", { className: "title__text", children: a })
+            H(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
           ] }) }),
           /* @__PURE__ */ t(
-            Me,
+            Be,
             {
               numOfColumns: i,
               numOfColumnsForMobile: l,
@@ -710,33 +757,33 @@ const U = h.div`
                 x: 10,
                 opacity: 0
               },
-              children: D
+              children: k
             },
-            `scrollable-section__content-${g}`
+            `scrollable-section__content-${s}`
           ),
-          p && w > c && !x && /* @__PURE__ */ m("div", { className: "scrollable-section__navigation", children: [
+          f && y > d && !x && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
             /* @__PURE__ */ t(
-              q,
+              J,
               {
                 icon: "angle-left",
                 borderRadius: "curved",
                 btnType: "tinted",
                 color: "neutral",
                 className: "navigation__arrow",
-                disabled: g === 0,
-                onClick: k
+                disabled: s === 0,
+                onClick: P
               }
             ),
             /* @__PURE__ */ t(
-              q,
+              J,
               {
                 icon: "angle-right",
                 borderRadius: "curved",
                 btnType: "tinted",
                 color: "neutral",
                 className: "navigation__arrow",
-                disabled: g + c >= w,
-                onClick: T
+                disabled: s + d >= y,
+                onClick: v
               }
             )
           ] })
@@ -745,48 +792,48 @@ const U = h.div`
     );
   }
 );
-oe.propTypes = {
+ce.propTypes = {
   icon: o.string,
   title: o.string,
   numOfSlides: o.number,
   numOfSlidesForMobile: o.number,
   showNavigation: o.bool
 };
-const Ue = ve(ne), Je = B(
+const Re = De(le), er = V(
   ({
     sellerType: e = "Shop",
-    items: a = [],
+    items: n = [],
     title: i,
     icon: l,
-    isLoading: p,
-    onSelectCard: u = () => {
+    isLoading: f,
+    onSelectCard: h = () => {
     },
-    onSelectShop: y = () => {
+    onSelectShop: p = () => {
     },
-    getImage: g = () => {
+    getImage: s = () => {
     },
-    campaignSingleText: $,
-    upcomingCampaignText: c,
+    campaignSingleText: u,
+    upcomingCampaignText: d,
     salesCampaignTypes: S = [],
-    startsInPrefixTextPlural: s,
-    startsinSuffixTextPlural: f,
-    startsInPrefixTextSingular: b,
-    startsinSuffixTextSingular: _,
+    startsInPrefixTextPlural: b,
+    startsinSuffixTextPlural: $,
+    startsInPrefixTextSingular: D,
+    startsinSuffixTextSingular: C,
     endsInPrefixTextPlural: x,
-    endsinSuffixTextPlural: C,
-    endsInPrefixTextSingular: w,
-    endsinSuffixTextSingular: D,
-    numOfSlides: T = 2,
-    numOfSlidesForMobile: k = 1,
-    showNavigation: I = !0,
-    numberOfListingsTextSingular: z,
-    numberOfListingsTextPlural: v
-  }, n) => {
-    const d = ae(), L = ye(() => a == null ? void 0 : a.map((r, R) => /* @__PURE__ */ t(
-      Ue,
+    endsinSuffixTextPlural: T,
+    endsInPrefixTextSingular: y,
+    endsinSuffixTextSingular: k,
+    numOfSlides: v = 2,
+    numOfSlidesForMobile: P = 1,
+    showNavigation: M = !0,
+    numberOfListingsTextSingular: O,
+    numberOfListingsTextPlural: L
+  }, a) => {
+    const g = ie(), U = Ce(() => n == null ? void 0 : n.map((r, X) => /* @__PURE__ */ t(
+      Re,
       {
         className: "campaign-item",
-        coverPhoto: g(
+        coverPhoto: s(
           r == null ? void 0 : r.coverPhoto,
           (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
         ),
@@ -801,42 +848,42 @@ const Ue = ve(ne), Je = B(
         startDate: r == null ? void 0 : r.startDate,
         title: r == null ? void 0 : r.name,
         uuid: r == null ? void 0 : r.campaignUuid,
-        onSelectCard: () => u(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
-        onSelectShop: () => y(r == null ? void 0 : r.shopUuid),
-        campaignSingleText: $,
-        upcomingCampaignText: c,
+        onSelectCard: () => h(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+        onSelectShop: () => p(r == null ? void 0 : r.shopUuid),
+        campaignSingleText: u,
+        upcomingCampaignText: d,
         upcoming: r == null ? void 0 : r.upcoming,
         salesCampaignTypes: S,
-        startsInPrefixTextPlural: s,
-        startsinSuffixTextPlural: f,
-        startsInPrefixTextSingular: b,
-        startsinSuffixTextSingular: _,
+        startsInPrefixTextPlural: b,
+        startsinSuffixTextPlural: $,
+        startsInPrefixTextSingular: D,
+        startsinSuffixTextSingular: C,
         endsInPrefixTextPlural: x,
-        endsinSuffixTextPlural: C,
-        endsInPrefixTextSingular: w,
-        endsinSuffixTextSingular: D,
+        endsinSuffixTextPlural: T,
+        endsInPrefixTextSingular: y,
+        endsinSuffixTextSingular: k,
         themeData: r == null ? void 0 : r.themeData,
         numberOfListings: r == null ? void 0 : r.numberOfListings,
-        numberOfListingsTextSingular: z,
-        numberOfListingsTextPlural: v
+        numberOfListingsTextSingular: O,
+        numberOfListingsTextPlural: L
       },
-      `campaign__item__${R}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
-    )), [a]);
+      `campaign__item__${X}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+    )), [n]);
     return /* @__PURE__ */ t(
-      Ae,
+      Le,
       {
-        isLoading: p,
-        itemsCount: d ? 1 : 2,
+        isLoading: f,
+        itemsCount: g ? 1 : 2,
         keyPrefix: "sales-camp",
         children: /* @__PURE__ */ t(
-          oe,
+          ce,
           {
             icon: l,
             title: i,
-            numOfSlides: T,
-            numOfSlidesForMobile: k,
-            showNavigation: I,
-            children: L
+            numOfSlides: v,
+            numOfSlidesForMobile: P,
+            showNavigation: M,
+            children: U
           }
         )
       }
@@ -844,5 +891,5 @@ const Ue = ve(ne), Je = B(
   }
 );
 export {
-  Je as default
+  er as default
 };