@lanaco/lnc-react-ui 4.0.169 → 4.0.171

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,19 @@
-import { jsx as n, jsxs as c, Fragment as De } from "react/jsx-runtime";
-import { forwardRef as z, useRef as he, useEffect as ee, Fragment as Te, createElement as Pe, useState as K, Suspense as ze, memo as Me, useMemo as Le } from "react";
-import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as M, k as Q, l as Ue, o as fe } from "./utils-BdsZgOUE.js";
-import { M as T } from "./consts-BuFChS64.js";
-import { m as pe } from "./motion-Ckekul_K.js";
+import { jsx as n, jsxs as c, Fragment as Pe } from "react/jsx-runtime";
+import { forwardRef as M, useRef as fe, useEffect as ee, Fragment as ze, createElement as Le, useState as K, Suspense as Me, memo as Ue, useMemo as Oe } from "react";
+import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as re, k as Q, l as Ee } from "./utils-DHfRApMf.js";
+import { M as z } from "./consts-BuFChS64.js";
+import { m as ue } from "./motion-Ckekul_K.js";
 import { P as a } from "./index-CblbdqjE.js";
-import ue from "./Icon.js";
+import xe from "./Icon.js";
 import { D as se } from "./ShopAvatar-4-fCYGEc.js";
-import Oe from "./Badge.js";
-import { u as re } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import je from "./Badge.js";
+import { u as we } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import le from "./IconButton.js";
-import { u as xe } from "./useDetectMobile-Bkvj0VMa.js";
-import { I as Ee } from "./index-C0LcDEqa.js";
-const je = m.div`
+import { u as be } from "./useDetectMobile-Bkvj0VMa.js";
+import { I as Re } from "./index-C0LcDEqa.js";
+import { a as L, c as ce, S as de, b as y, d as me } from "./style-CXMUA6cI.js";
+const Be = S.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -20,13 +21,13 @@ const je = m.div`
   border-radius: 1.25rem;
   border: 1px solid var(--gray-200, #e4e9f0);
 
-  @media (max-width: ${T + "px"}) {
+  @media (max-width: ${z + "px"}) {
     flex-direction: column;
     padding: 1rem;
     gap: 0;
   }
-`, Re = m.div`
-  border-radius: ${(e) => M(e.theme, "edged")};
+`, We = S.div`
+  border-radius: ${(r) => re(r.theme, "edged")};
   height: 13.75rem;
   width: 13.75rem;
   min-width: 13.75rem;
@@ -48,7 +49,7 @@ const je = m.div`
       transform: scale(1.25);
     }
   }
-`, Be = m.div`
+`, Fe = S.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -131,7 +132,7 @@ const je = m.div`
     color: var(--gray-600, #676e79);
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media (max-width: ${z + "px"}) {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -156,15 +157,15 @@ const je = m.div`
       gap: 0.25rem;
     }
   }
-`, ce = (e = !1, t = !1, o = !1) => `
+`, ge = (r = !1, t = !1, o = !1) => `
     display: flex;
     ${t ? "flex-wrap: wrap;" : ""}
     ${t ? "" : "flex-wrap: nowrap;"}
-    ${e ? "align-items: center;" : ""}
+    ${r ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Fe = m(pe.div)`
+  `, Ge = S(ue.div)`
   text-decoration: none;
-  ${(e) => e.hasPermission === !0 && "cursor: pointer"};
+  ${(r) => r.hasPermission === !0 && "cursor: pointer"};
 
   &:focus,
   &:hover,
@@ -179,14 +180,14 @@ const je = m.div`
     text-decoration: none;
   }
 
-  ${ce(!0)}
+  ${ge(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: var(--gray-950, #14161a);
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: ${(e) => M(e.theme, "slight")};
+  border-radius: ${(r) => re(r.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -195,7 +196,7 @@ const je = m.div`
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${ce(!0, !1, !0)}
+    ${ge(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -234,93 +235,93 @@ const je = m.div`
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media (max-width: ${z + "px"}) {
     padding: 0;
     font-size: 0.875rem;
   }
-`, We = m.div`
+`, Ve = S.div`
   position: absolute;
   top: 0.5rem;
-  ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
+  ${(r) => r.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Ve = m.div`
-  border-radius: ${(e) => M(e.theme, e.borderRadius || "slight")};
-  background-color: ${(e) => e == null ? void 0 : e.color};
+`, Ae = S.div`
+  border-radius: ${(r) => re(r.theme, r.borderRadius || "slight")};
+  background-color: ${(r) => r == null ? void 0 : r.color};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
-  width: ${(e) => e.fitContent === !0 ? "fit-content" : "1.5rem"};
-  ${(e) => e.fitContent === !0 && "padding: 0 0.1rem;"};
+  width: ${(r) => r.fitContent === !0 ? "fit-content" : "1.5rem"};
+  ${(r) => r.fitContent === !0 && "padding: 0 0.1rem;"};
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${(e) => e.padding};
+  padding: ${(r) => r.padding};
   & i {
     font-size: 0.813rem;
   }
-`, Ae = z(({ src: e, ...t }, o) => {
-  const i = he();
+`, He = M(({ src: r, ...t }, o) => {
+  const i = fe();
   return ee(() => {
-    var h;
-    const d = (s) => {
+    var g;
+    const m = (s) => {
       s.target.src = se, s.onerror = null;
     };
-    return (h = i == null ? void 0 : i.current) == null || h.addEventListener("error", d), () => {
+    return (g = i == null ? void 0 : i.current) == null || g.addEventListener("error", m), () => {
       var s;
-      (s = i == null ? void 0 : i.current) == null || s.removeEventListener("error", d);
+      (s = i == null ? void 0 : i.current) == null || s.removeEventListener("error", m);
     };
-  }, []), /* @__PURE__ */ n(Te, { ref: o, children: Q(e) ? /* @__PURE__ */ n("img", { ref: i, src: e, ...t }) : /* @__PURE__ */ n("img", { src: se, ...t }) });
-}), we = (e) => {
+  }, []), /* @__PURE__ */ n(ze, { ref: o, children: Q(r) ? /* @__PURE__ */ n("img", { ref: i, src: r, ...t }) : /* @__PURE__ */ n("img", { src: se, ...t }) });
+}), ve = (r) => {
   const {
     uuid: t,
     hasPermission: o = !0,
     isUser: i,
-    image: d,
-    imageComponent: h,
+    image: m,
+    imageComponent: g,
     name: s,
-    notifications: f = 0,
+    notifications: p = 0,
     color: l = "primary",
-    size: b = "large",
-    style: p,
-    disabled: S,
-    onClick: u = () => {
+    size: w = "large",
+    style: h,
+    disabled: I,
+    onClick: f = () => {
     },
-    isActive: v,
-    className: k,
-    shopCategory: I,
+    isActive: b,
+    className: C,
+    shopCategory: N,
     // new
-    themeData: $
-  } = e, x = {
-    theme: re(),
+    themeData: _
+  } = r, u = {
+    theme: we(),
     color: l,
-    size: b,
-    style: p,
-    disabled: S
+    size: w,
+    style: h,
+    disabled: I
   };
-  return /* @__PURE__ */ Pe(
-    Fe,
+  return /* @__PURE__ */ Le(
+    Ge,
     {
-      onClick: (_) => {
-        _.stopPropagation(), o === !0 && (u == null || u());
+      onClick: ($) => {
+        $.stopPropagation(), o === !0 && (f == null || f());
       },
-      ...x,
+      ...u,
       key: s,
-      className: `profile-item ${k}`,
+      className: `profile-item ${C}`,
       hasPermission: o,
-      isActive: v,
-      themeColor: ($ == null ? void 0 : $.code) || "transparent"
+      isActive: b,
+      themeColor: (_ == null ? void 0 : _.code) || "transparent"
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Ue(h) ? h : d }),
+    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Ee(g) ? g : m }),
     /* @__PURE__ */ c("div", { children: [
       /* @__PURE__ */ n("div", { className: "name", children: s }),
-      !i && /* @__PURE__ */ n("div", { className: "description", children: I }),
-      f > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Oe, { className: "badge", color: "danger", size: "small", children: f > 99 ? "99+" : f }) })
+      !i && /* @__PURE__ */ n("div", { className: "description", children: N }),
+      p > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(je, { className: "badge", color: "danger", size: "small", children: p > 99 ? "99+" : p }) })
     ] })
   );
 };
-we.propTypes = {
+ve.propTypes = {
   id: a.any,
   isUserProfile: a.bool,
   themeColor: a.string,
@@ -342,122 +343,122 @@ we.propTypes = {
   onSelect: a.func,
   hasPermission: a.bool
 };
-const de = (e, t) => {
-  if (!e || !t) return null;
-  const o = e.getTime() - t.getTime(), i = 24 * 60 * 60 * 1e3;
+const pe = (r, t) => {
+  if (!r || !t) return null;
+  const o = r.getTime() - t.getTime(), i = 24 * 60 * 60 * 1e3;
   return Math.floor(o / i);
-}, ge = (e) => {
-  if (e !== void 0) {
-    const t = new Date(e), o = t.getFullYear(), i = t.getMonth() + 1;
+}, he = (r) => {
+  if (r !== void 0) {
+    const t = new Date(r), o = t.getFullYear(), i = t.getMonth() + 1;
     return `${String(t.getDate()).padStart(2)}. ${i}. ${o}.`;
   }
-}, be = z((e, t) => {
+}, ye = M((r, t) => {
   var ie;
-  const o = re(), {
+  const o = we(), {
     // uuid,
     shopUuid: i,
-    title: d = "",
+    title: m = "",
     // description,
     // badges,
-    coverPhoto: h,
+    coverPhoto: g,
     onSelect: s,
     // status,
-    startDate: f,
+    startDate: p,
     endDate: l,
-    salesPackages: b,
-    shopName: p,
-    shopCategory: S,
-    shopImage: u,
-    shopImageComponent: v,
-    className: k,
-    onSelectCard: I = () => {
+    salesPackages: w,
+    shopName: h,
+    shopCategory: I,
+    shopImage: f,
+    shopImageComponent: b,
+    className: C,
+    onSelectCard: N = () => {
     },
-    onSelectShop: $ = () => {
+    onSelectShop: _ = () => {
     },
-    upcoming: g = !1,
-    upcomingCampaignText: x,
-    campaignSingleText: _,
-    salesCampaignTypes: C = [],
-    startsInPrefixTextPlural: W,
-    startsinSuffixTextPlural: V,
-    startsInPrefixTextSingular: A,
+    upcoming: d = !1,
+    upcomingCampaignText: u,
+    campaignSingleText: $,
+    salesCampaignTypes: k = [],
+    startsInPrefixTextPlural: F,
+    startsinSuffixTextPlural: G,
+    startsInPrefixTextSingular: V,
     startsinSuffixTextSingular: ne,
-    endsInPrefixTextPlural: H,
-    endsinSuffixTextPlural: G,
-    endsInPrefixTextSingular: L,
-    endsinSuffixTextSingular: X,
+    endsInPrefixTextPlural: A,
+    endsinSuffixTextPlural: H,
+    endsInPrefixTextSingular: U,
+    endsinSuffixTextSingular: q,
     themeData: te,
-    numberOfListings: N,
-    numberOfListingsTextSingular: Y,
-    numberOfListingsTextPlural: U,
-    metadata: r,
-    ...Z
-  } = e, q = he(), O = f ? new Date(f) <= /* @__PURE__ */ new Date() : !1, $e = de(
-    f ? new Date(f) : null,
+    numberOfListings: T,
+    numberOfListingsTextSingular: X,
+    numberOfListingsTextPlural: O,
+    metadata: e,
+    ...Y
+  } = r, Z = fe(), E = p ? new Date(p) <= /* @__PURE__ */ new Date() : !1, $e = pe(
+    p ? new Date(p) : null,
     /* @__PURE__ */ new Date()
-  ), E = de(
+  ), j = pe(
     l ? new Date(l) : null,
     /* @__PURE__ */ new Date()
-  ), _e = E !== null && E <= 2 && E > 0, ae = l ? new Date(l).getTime() : null, Ce = Date.now(), J = ae !== null ? ae - Ce : null, j = J !== null && J > 0 && J < 24 * 60 * 60 * 1e3, oe = (y, B, w, P, D) => w === 1 ? `${y} ${w} ${P}` : `${B} ${w} ${D}`, Se = () => {
+  ), ke = j !== null && j <= 2 && j > 0, ae = l ? new Date(l).getTime() : null, Ie = Date.now(), J = ae !== null ? ae - Ie : null, R = J !== null && J > 0 && J < 24 * 60 * 60 * 1e3, oe = (v, W, x, P, D) => x === 1 ? `${v} ${x} ${P}` : `${W} ${x} ${D}`, Ce = () => {
     if (!l) return null;
-    const y = ke, w = new Date(l).getTime() - y.getTime();
-    if (w <= 0) return null;
-    const P = Math.floor(w / (1e3 * 60 * 60)), D = Math.floor(w % (1e3 * 60 * 60) / (1e3 * 60)), Ne = Math.floor(w % (1e3 * 60) / 1e3);
-    return { hours: P, minutes: D, seconds: Ne };
-  }, [ke, Ie] = K(/* @__PURE__ */ new Date());
+    const v = Ne, x = new Date(l).getTime() - v.getTime();
+    if (x <= 0) return null;
+    const P = Math.floor(x / (1e3 * 60 * 60)), D = Math.floor(x % (1e3 * 60 * 60) / (1e3 * 60)), Te = Math.floor(x % (1e3 * 60) / 1e3);
+    return { hours: P, minutes: D, seconds: Te };
+  }, [Ne, De] = K(/* @__PURE__ */ new Date());
   ee(() => {
-    if (!j) return;
-    const y = setInterval(() => {
-      Ie(/* @__PURE__ */ new Date());
+    if (!R) return;
+    const v = setInterval(() => {
+      De(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(y);
-  }, [j]);
-  const R = j ? Se() : null;
+    return () => clearInterval(v);
+  }, [R]);
+  const B = R ? Ce() : null;
   return /* @__PURE__ */ c(
-    je,
+    Be,
     {
-      ref: q,
+      ref: Z,
       theme: o,
-      className: k,
-      name: r == null ? void 0 : r.name,
-      "data-accessor": r == null ? void 0 : r.accessor,
-      onClick: (y) => I(y, q),
-      ...Z,
+      className: C,
+      name: e == null ? void 0 : e.name,
+      "data-accessor": e == null ? void 0 : e.accessor,
+      onClick: (v) => N(v, Z),
+      ...Y,
       children: [
-        /* @__PURE__ */ c(Re, { theme: o, onClick: () => s == null ? void 0 : s(), children: [
-          /* @__PURE__ */ n("img", { src: h }),
-          /* @__PURE__ */ n(We, { children: b == null ? void 0 : b.map((y, B) => {
-            var w, P;
+        /* @__PURE__ */ c(We, { theme: o, onClick: () => s == null ? void 0 : s(), children: [
+          /* @__PURE__ */ n("img", { src: g }),
+          /* @__PURE__ */ n(Ve, { children: w == null ? void 0 : w.map((v, W) => {
+            var x, P;
             return /* @__PURE__ */ n(
-              Ve,
+              Ae,
               {
-                color: (w = C == null ? void 0 : C.find((D) => D.value === y)) == null ? void 0 : w.color,
+                color: (x = k == null ? void 0 : k.find((D) => D.value === v)) == null ? void 0 : x.color,
                 theme: o,
                 children: /* @__PURE__ */ n(
-                  ue,
+                  xe,
                   {
-                    icon: (P = C == null ? void 0 : C.find((D) => D.value === y)) == null ? void 0 : P.icon
+                    icon: (P = k == null ? void 0 : k.find((D) => D.value === v)) == null ? void 0 : P.icon
                   }
                 )
               },
-              `package__${B}`
+              `package__${W}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ c(Be, { theme: o, children: [
+        /* @__PURE__ */ c(Fe, { theme: o, children: [
           /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ c("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ n("div", { className: "campaign-title", children: (ie = g ? x : _) == null ? void 0 : ie.toUpperCase() }),
-            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: d }),
-            l && f && /* @__PURE__ */ c("div", { className: "campaign-date", children: [
-              ge(f),
+            /* @__PURE__ */ n("div", { className: "campaign-title", children: (ie = d ? u : $) == null ? void 0 : ie.toUpperCase() }),
+            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: m }),
+            l && p && /* @__PURE__ */ c("div", { className: "campaign-date", children: [
+              he(p),
               " - ",
-              ge(l)
+              he(l)
             ] }),
             /* @__PURE__ */ c("div", { className: "timestamp-text", children: [
-              N > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
-                N,
+              T > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
+                T,
                 " ",
-                N === 1 ? Y : U,
+                T === 1 ? X : O,
                 " ",
                 "∙",
                 " "
@@ -465,44 +466,44 @@ const de = (e, t) => {
               /* @__PURE__ */ n(
                 "span",
                 {
-                  className: `duration-text ${_e ? "urgent" : ""} ${O ? "" : "starts-in"}`,
-                  children: j && R ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
-                    L,
+                  className: `duration-text ${ke ? "urgent" : ""} ${E ? "" : "starts-in"}`,
+                  children: R && B ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
+                    U,
                     " ",
-                    R.hours.toString().padStart(2, "0"),
+                    B.hours.toString().padStart(2, "0"),
                     ":",
-                    R.minutes.toString().padStart(2, "0"),
+                    B.minutes.toString().padStart(2, "0"),
                     ":",
-                    R.seconds.toString().padStart(2, "0")
-                  ] }) : O ? oe(
-                    L,
-                    H,
-                    E,
-                    X,
-                    G
-                  ) : oe(
+                    B.seconds.toString().padStart(2, "0")
+                  ] }) : E ? oe(
+                    U,
                     A,
-                    W,
+                    j,
+                    q,
+                    H
+                  ) : oe(
+                    V,
+                    F,
                     $e,
                     ne,
-                    V
+                    G
                   )
                 }
               )
             ] })
           ] }) }),
           /* @__PURE__ */ n(
-            we,
+            ve,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(Ae, { src: u }),
-              imageComponent: v,
+              image: /* @__PURE__ */ n(He, { src: f }),
+              imageComponent: b,
               themeData: te,
               isActive: !0,
               isUser: !1,
-              name: p,
-              shopCategory: S,
-              onClick: () => $(i)
+              name: h,
+              shopCategory: I,
+              onClick: () => _(i)
             }
           )
         ] })
@@ -510,155 +511,13 @@ const de = (e, t) => {
     }
   );
 });
-be.propTypes = {
+ye.propTypes = {
   title: a.oneOfType([a.string, a.element]),
   numberOfListings: a.number,
   dropdown: a.any,
   color: a.string
 };
-m.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-
-  & .arrow-icon {
-    & i {
-      transition: all 0.25s ease;
-      transform: ${(e) => e.expanded === !0 ? "rotate(-180deg)" : "rotate(0)"};
-    }
-  }
-
-  & .badge-button {
-    white-space: nowrap;
-    font-weight: 500;
-  }
-
-  & .gradient {
-    background: transparent !important;
-  }
-
-  & .campaign-item {
-    min-width: calc(50% - 0.87rem);
-    width: calc(50% - 0.87rem);
-    margin-right: 1rem;
-
-    &:nth-child(${(e) => e == null ? void 0 : e.lastItemIdx}) {
-      margin-right: 0;
-    }
-  }
-
-  @media (max-width: ${T + "px"}) {
-    & .campaign-item {
-      min-width: 100%;
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-`;
-const F = m.div`
-  width: ${(e) => e.width || "100%"};
-  height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
-  background-color: var(--gray-200, #dddfe4);
-
-  ${fe("-90deg")}
-`, He = 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%"};
-`, me = m.div`
-  border-radius: ${(e) => M(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"};
-  max-width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
-  height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
-  width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
-  flex-shrink: 0;
-
-  ${fe()}
-`, Ge = m.div`
-  background: var(--white, #fff);
-  border-radius: ${(e) => M(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);
-
-  display: flex;
-  gap: 1rem;
-  padding: 1.25rem;
-  width: 100%;
-
-  & .campaign__left-section {
-    position: relative;
-  }
-
-  & .campaign__right-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    max-width: 18rem;
-    width: 100%;
-  }
-
-  & .campaign__user {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  @media (max-width: ${T + "px"}) {
-    flex-direction: column;
-
-    & .campaign__user {
-      margin-top: 1rem;
-    }
-  }
-`, Xe = m.div`
-  display: flex;
-  gap: 1.5rem;
-`, Ye = z(({}, e) => {
-  const t = re();
-  return /* @__PURE__ */ c(Ge, { ref: e, theme: t, children: [
-    /* @__PURE__ */ n("div", { className: "campaign__left-section", children: /* @__PURE__ */ n(
-      me,
-      {
-        theme: t,
-        width: "15rem",
-        height: "15rem",
-        borderRadius: "edged"
-      }
-    ) }),
-    /* @__PURE__ */ c("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ c(He, { theme: t, children: [
-        /* @__PURE__ */ n(F, { heightCoeff: 0.75, theme: t, width: "35%" }),
-        /* @__PURE__ */ n(F, { heightCoeff: 1.25, theme: t }),
-        /* @__PURE__ */ n(F, { heightCoeff: 3, theme: t })
-      ] }),
-      /* @__PURE__ */ c("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ n(
-          me,
-          {
-            theme: t,
-            width: "2.5rem",
-            height: "2.5rem",
-            borderRadius: "curved"
-          }
-        ),
-        /* @__PURE__ */ n(F, { theme: t, width: "75%" })
-      ] })
-    ] })
-  ] });
-}), Ze = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ n(Xe, { children: Array.from({ length: e }, (o, i) => /* @__PURE__ */ n(
-  Ye,
-  {},
-  `${t}-skeleton-campaign-card-${i}`
-)) }), qe = ({
-  children: e,
-  fallbackComponent: t = /* @__PURE__ */ n(De, {}),
-  isLoading: o = !1,
-  itemsCount: i = 5,
-  keyPrefix: d
-}) => /* @__PURE__ */ n(ze, { fallback: t, children: o === !0 ? /* @__PURE__ */ n(Ze, { itemsCount: i, keyPrefix: d }) : e }), Je = m.div`
+const qe = S.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -697,7 +556,7 @@ const F = m.div`
     right: 0;
   }
 
-  @media (max-width: ${T + "px"}) {
+  @media (max-width: ${z + "px"}) {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -709,13 +568,13 @@ const F = m.div`
       }
     }
   }
-`, Ke = m(pe.div)`
+`, Xe = S(ue.div)`
   display: grid;
-  grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
+  grid-template-columns: repeat(${(r) => r == null ? void 0 : r.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${T + "px"}) {
+  @media (max-width: ${z + "px"}) {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -737,39 +596,39 @@ const F = m.div`
       /* Safari and Chrome */
     }
   }
-`, ve = z(
+`, Se = M(
   ({
-    icon: e,
+    icon: r,
     title: t,
     numOfSlides: o = 2,
     showNavigation: i = !0,
-    hasNextPage: d = !1,
-    handleFetchNextPage: h = () => {
+    hasNextPage: m = !1,
+    handleFetchNextPage: g = () => {
     },
     children: s
-  }, f) => {
-    const [l, b] = K(0), [p, S] = K(1), u = xe(), v = (s == null ? void 0 : s.length) ?? 1;
+  }, p) => {
+    const [l, w] = K(0), [h, I] = K(1), f = be(), b = (s == null ? void 0 : s.length) ?? 1;
     ee(() => {
-      const g = () => {
-        S(o);
+      const d = () => {
+        I(o);
       };
-      return window.addEventListener("resize", g), g(), () => window.removeEventListener("resize", g);
+      return window.addEventListener("resize", d), d(), () => window.removeEventListener("resize", d);
     }, []);
-    const k = u ? s : s == null ? void 0 : s.slice(l, l + p), I = (g) => {
-      var _;
-      (_ = g == null ? void 0 : g.target) == null || _.blur();
-      const x = l + p;
-      x < v && b(x), x + p >= v && d && h();
-    }, $ = (g) => {
-      var x;
-      (x = g == null ? void 0 : g.target) == null || x.blur(), l - p >= 0 && b(l - p);
+    const C = f ? s : s == null ? void 0 : s.slice(l, l + h), N = (d) => {
+      var $;
+      ($ = d == null ? void 0 : d.target) == null || $.blur();
+      const u = l + h;
+      u < b && w(u), u + h >= b && m && g();
+    }, _ = (d) => {
+      var u;
+      (u = d == null ? void 0 : d.target) == null || u.blur(), l - h >= 0 && w(l - h);
     };
-    return /* @__PURE__ */ c(Je, { ref: f, children: [
+    return /* @__PURE__ */ c(qe, { ref: p, children: [
       /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ c("div", { className: "scrollable-section__title", children: [
-        Q(e) && /* @__PURE__ */ n(
-          ue,
+        Q(r) && /* @__PURE__ */ n(
+          xe,
           {
-            icon: e,
+            icon: r,
             color: "primary",
             sizeInUnits: "1.5rem",
             className: "title__icon"
@@ -781,10 +640,10 @@ const F = m.div`
         ] })
       ] }) }),
       /* @__PURE__ */ c(
-        Ke,
+        Xe,
         {
           numOfColumns: o,
-          ...!u && {
+          ...!f && {
             animate: {
               x: 0,
               opacity: 1
@@ -795,13 +654,13 @@ const F = m.div`
             }
           },
           children: [
-            k,
-            u && d && /* @__PURE__ */ n(Ee, { onIsVisible: h })
+            C,
+            f && m && /* @__PURE__ */ n(Re, { onIsVisible: g })
           ]
         },
         `scrollable-section__content-${l}`
       ),
-      i && v > p && !u && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
+      i && b > h && !f && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
         /* @__PURE__ */ n(
           le,
           {
@@ -811,7 +670,7 @@ const F = m.div`
             color: "neutral",
             className: "navigation__arrow",
             disabled: l === 0,
-            onClick: $
+            onClick: _
           }
         ),
         /* @__PURE__ */ n(
@@ -822,15 +681,15 @@ const F = m.div`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: l + p >= v,
-            onClick: I
+            disabled: l + h >= b,
+            onClick: N
           }
         )
       ] })
     ] });
   }
 );
-ve.propTypes = {
+Se.propTypes = {
   icon: a.string,
   title: a.string,
   numOfSlides: a.number,
@@ -838,11 +697,11 @@ ve.propTypes = {
   handleFetchNextPage: a.func,
   showNavigation: a.bool
 };
-const Qe = m.div`
+const Ye = S.div`
   display: flex;
   flex: 1;
   width: 100%;
-  max-height: ${(e) => e == null ? void 0 : e.maxHeight};
+  max-height: ${(r) => r == null ? void 0 : r.maxHeight};
   border-radius: 1.25rem;
 
   &:hover {
@@ -855,148 +714,210 @@ const Qe = m.div`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, ye = z(
+`, _e = M(
   ({
-    sectionName: e,
+    sectionName: r,
     imageUrl: t,
     maxHeight: o = "16.25rem",
     className: i = "",
-    handleClick: d = () => {
+    handleClick: m = () => {
     }
-  }, h) => /* @__PURE__ */ n(
-    Qe,
+  }, g) => /* @__PURE__ */ n(
+    Ye,
     {
-      ref: h,
+      ref: g,
       maxHeight: o,
-      onClick: d,
+      onClick: m,
       className: `itemless-banner ${i}`,
-      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${e}` })
+      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
     }
   )
 );
-ye.propTypes = {
+_e.propTypes = {
   sectionName: a.string,
   imageUrl: a.string,
   maxHeight: a.string,
   className: a.string,
   handleClick: a.func
 };
-const er = Me(be), pr = z(
+const Ze = S(L)`
+  @media (max-width: ${z + "px"}) {
+    flex-direction: column;
+
+    & .skeleton__image {
+      width: 100%;
+      height: 100%;
+    }
+
+    & > div {
+      &:last-of-type {
+        display: none;
+      }
+    }
+  }
+`, Je = ({ keyPrefix: r }) => /* @__PURE__ */ c(Ze, { children: [
+  /* @__PURE__ */ c(L, { children: [
+    /* @__PURE__ */ n(
+      ce,
+      {
+        width: "13.75rem",
+        height: "13.75rem",
+        className: "skeleton__image"
+      },
+      `${r}-1`
+    ),
+    /* @__PURE__ */ c(de, { noGradient: !0, children: [
+      /* @__PURE__ */ n(y, { height: "1rem" }),
+      /* @__PURE__ */ n(y, { height: "1.75rem" }),
+      /* @__PURE__ */ n(y, { height: "1.25rem" }),
+      /* @__PURE__ */ n(y, { height: "2rem" }),
+      /* @__PURE__ */ c(L, { alignItems: "center", noGradient: !0, children: [
+        /* @__PURE__ */ n(me, { width: "2.5rem", height: "2.5rem" }),
+        /* @__PURE__ */ n(y, { width: "5rem", height: "1.25rem" })
+      ] })
+    ] })
+  ] }),
+  /* @__PURE__ */ c(L, { noGradient: !0, children: [
+    /* @__PURE__ */ n(
+      ce,
+      {
+        width: "13.75rem",
+        height: "13.75rem",
+        className: "skeleton__image"
+      },
+      `${r}-2`
+    ),
+    /* @__PURE__ */ c(de, { noGradient: !0, children: [
+      /* @__PURE__ */ n(y, { height: "1rem" }),
+      /* @__PURE__ */ n(y, { height: "1.75rem" }),
+      /* @__PURE__ */ n(y, { height: "1.25rem" }),
+      /* @__PURE__ */ n(y, { height: "2rem" }),
+      /* @__PURE__ */ c(L, { alignItems: "center", noGradient: !0, children: [
+        /* @__PURE__ */ n(me, { width: "2.5rem", height: "2.5rem" }),
+        /* @__PURE__ */ n(y, { width: "5rem", height: "1.25rem" })
+      ] })
+    ] })
+  ] })
+] }), Ke = ({
+  keyPrefix: r,
+  isLoading: t = !1,
+  fallbackComponent: o = /* @__PURE__ */ n(Pe, {}),
+  children: i
+}) => /* @__PURE__ */ n(Me, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(Je, { keyPrefix: r }) : i }), Qe = Ue(ye), fr = M(
   ({
-    sellerType: e = "Shop",
+    sellerType: r = "Shop",
     items: t = [],
     title: o,
     icon: i,
-    isLoading: d,
-    onSelectCard: h = () => {
+    isLoading: m,
+    onSelectCard: g = () => {
     },
     onSelectShop: s = () => {
     },
-    getImage: f = () => {
+    getImage: p = () => {
     },
     campaignSingleText: l,
-    upcomingCampaignText: b,
-    salesCampaignTypes: p = [],
-    startsInPrefixTextPlural: S,
-    startsinSuffixTextPlural: u,
-    startsInPrefixTextSingular: v,
-    startsinSuffixTextSingular: k,
-    endsInPrefixTextPlural: I,
-    endsinSuffixTextPlural: $,
-    endsInPrefixTextSingular: g,
-    endsinSuffixTextSingular: x,
-    numOfSlides: _ = 2,
-    showNavigation: C = !0,
-    numberOfListingsTextSingular: W,
-    numberOfListingsTextPlural: V,
-    itemlessImageUrl: A,
+    upcomingCampaignText: w,
+    salesCampaignTypes: h = [],
+    startsInPrefixTextPlural: I,
+    startsinSuffixTextPlural: f,
+    startsInPrefixTextSingular: b,
+    startsinSuffixTextSingular: C,
+    endsInPrefixTextPlural: N,
+    endsinSuffixTextPlural: _,
+    endsInPrefixTextSingular: d,
+    endsinSuffixTextSingular: u,
+    numOfSlides: $ = 2,
+    showNavigation: k = !0,
+    numberOfListingsTextSingular: F,
+    numberOfListingsTextPlural: G,
+    itemlessImageUrl: V,
     itemlessLink: ne,
-    handleItemlessLink: H = () => {
+    handleItemlessLink: A = () => {
     },
-    componentName: G,
-    hasNextPage: L = !1,
-    handleFetchNextPage: X = () => {
+    componentName: H,
+    hasNextPage: U = !1,
+    handleFetchNextPage: q = () => {
     }
   }, te) => {
-    const N = xe(), Y = Le(() => {
-      let U = t == null ? void 0 : t.map((r, Z) => /* @__PURE__ */ n(
-        er,
+    const T = be(), X = Oe(() => {
+      let O = t == null ? void 0 : t.map((e, Y) => /* @__PURE__ */ n(
+        Qe,
         {
           className: "campaign-item",
-          coverPhoto: f(
-            r == null ? void 0 : r.coverPhoto,
-            (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
+          coverPhoto: p(
+            e == null ? void 0 : e.coverPhoto,
+            (e == null ? void 0 : e.uuid) || (e == null ? void 0 : e.campaignUuid)
           ),
-          description: r == null ? void 0 : r.description,
-          endDate: r == null ? void 0 : r.endDate,
-          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: (q, O) => h(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid, O),
-          onSelectShop: () => s(r == null ? void 0 : r.shopUuid),
+          description: e == null ? void 0 : e.description,
+          endDate: e == null ? void 0 : e.endDate,
+          salesPackages: e == null ? void 0 : e.salesPackages,
+          sellerType: r,
+          shopImage: e == null ? void 0 : e.profileImage,
+          shopImageComponent: e == null ? void 0 : e.profileImageComponent,
+          shopName: e == null ? void 0 : e.shopName,
+          shopUuid: e == null ? void 0 : e.shopUuid,
+          shopCategory: e == null ? void 0 : e.shopCategory,
+          startDate: e == null ? void 0 : e.startDate,
+          title: e == null ? void 0 : e.name,
+          uuid: e == null ? void 0 : e.campaignUuid,
+          onSelectCard: (Z, E) => g(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, E),
+          onSelectShop: () => s(e == null ? void 0 : e.shopUuid),
           campaignSingleText: l,
-          upcomingCampaignText: b,
-          upcoming: r == null ? void 0 : r.upcoming,
-          salesCampaignTypes: p,
-          startsInPrefixTextPlural: S,
-          startsinSuffixTextPlural: u,
-          startsInPrefixTextSingular: v,
-          startsinSuffixTextSingular: k,
-          endsInPrefixTextPlural: I,
-          endsinSuffixTextPlural: $,
-          endsInPrefixTextSingular: g,
-          endsinSuffixTextSingular: x,
-          themeData: r == null ? void 0 : r.themeData,
-          numberOfListings: r == null ? void 0 : r.numberOfListings,
-          numberOfListingsTextSingular: W,
-          numberOfListingsTextPlural: V,
-          metadata: { name: G, accessor: r == null ? void 0 : r.accessor }
+          upcomingCampaignText: w,
+          upcoming: e == null ? void 0 : e.upcoming,
+          salesCampaignTypes: h,
+          startsInPrefixTextPlural: I,
+          startsinSuffixTextPlural: f,
+          startsInPrefixTextSingular: b,
+          startsinSuffixTextSingular: C,
+          endsInPrefixTextPlural: N,
+          endsinSuffixTextPlural: _,
+          endsInPrefixTextSingular: d,
+          endsinSuffixTextSingular: u,
+          themeData: e == null ? void 0 : e.themeData,
+          numberOfListings: e == null ? void 0 : e.numberOfListings,
+          numberOfListingsTextSingular: F,
+          numberOfListingsTextPlural: G,
+          metadata: { name: H, accessor: e == null ? void 0 : e.accessor }
         },
-        `campaign__item__${Z}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+        `campaign__item__${Y}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
       ));
-      return (t == null ? void 0 : t.length) < 2 && !N ? [
-        ...U,
+      return (t == null ? void 0 : t.length) < 2 && !T ? [
+        ...O,
         /* @__PURE__ */ n(
-          ye,
+          _e,
           {
-            imageUrl: A,
+            imageUrl: V,
             className: "campaign-item",
-            handleClick: H
+            handleClick: A
           },
           "itemless-campaign-section-banner"
         )
-      ] : U;
+      ] : O;
     }, [t]);
     return /* @__PURE__ */ n(
-      qe,
+      Ke,
       {
-        isLoading: d,
-        itemsCount: N ? 1 : 2,
-        keyPrefix: "sales-camp",
+        isLoading: m,
+        keyPrefix: "sales-campaign-skeleton",
         children: /* @__PURE__ */ n(
-          ve,
+          Se,
           {
             icon: i,
             title: o,
-            numOfSlides: _,
-            showNavigation: C,
-            hasNextPage: L,
-            handleFetchNextPage: X,
-            children: Y
+            numOfSlides: $,
+            showNavigation: k,
+            hasNextPage: U,
+            handleFetchNextPage: q,
+            children: X
           },
-          `sales-campaign-section__${N}`
+          `sales-campaign-section__${T}`
         )
       }
     );
   }
 );
 export {
-  pr as default
+  fr as default
 };