@lanaco/lnc-react-ui 4.0.142 → 4.0.144

package/dist/SalesCampaignsSection.js

@@ -1,33 +1,31 @@
-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 J, l as ze, o as de } from "./utils-BdsZgOUE.js";
-import { M as L } from "./consts-BuFChS64.js";
-import { m as ge } from "./motion-Ckekul_K.js";
+import { jsx as t, jsxs as g, Fragment as ke } from "react/jsx-runtime";
+import { forwardRef as z, useRef as Ne, useEffect as Z, Fragment as Ie, createElement as De, useState as M, Suspense as Te, memo as Pe, useMemo as ze } from "react";
+import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as L, k as Y, l as Me, o as ce } from "./utils-BdsZgOUE.js";
+import { M as _ } from "./consts-BuFChS64.js";
+import { m as de } 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 ge from "./Icon.js";
+import { D as ne } from "./ShopAvatar-4-fCYGEc.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 Ue = f.div`
+import { u as q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import ae from "./IconButton.js";
+import { u as me } from "./useDetectMobile-Bkvj0VMa.js";
+const Ue = h.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
   padding: 1.25rem;
-  border-radius: 20px;
-  border: 1px solid var(--gray-95008, #14161a14);
+  border-radius: 1.25rem;
+  border: 1px solid var(--gray-200, #e4e9f0);
 
-  @media (max-width: ${L + "px"}) {
+  @media (max-width: ${_ + "px"}) {
     flex-direction: column;
-    padding: 0;
+    padding: 1rem;
     gap: 0;
-    border: none;
-    border-radius: 0;
   }
-`, Oe = f.div`
-  border-radius: ${(e) => O(e.theme, "edged")};
+`, Oe = h.div`
+  border-radius: ${(e) => L(e.theme, "edged")};
   height: 13.75rem;
   width: 13.75rem;
   min-width: 13.75rem;
@@ -50,12 +48,11 @@ const Ue = f.div`
     }
   }
 
-  @media (max-width: ${L + "px"}) {
+  @media (max-width: ${_ + "px"}) {
     width: 100%;
-    max-width: 100dvh;
-    height: 23.438rem;
+    height: 100%;
   }
-`, Ee = f.div`
+`, Ee = h.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -68,6 +65,7 @@ const Ue = f.div`
   & .campaign-title {
     font-weight: 500;
     font-size: 0.75rem;
+    line-height: 1rem;
     letter-spacing: 0.1rem;
     color: var(--teal-500, #009ea8);
   }
@@ -75,7 +73,8 @@ const Ue = f.div`
   & .campaign-title-text {
     font-weight: 600;
     font-size: 1.375rem;
-    transition: var(--transition, all 0.3s ease);
+    leading-trim: none;
+    line-height: 1.75rem;
   }
 
   & .text-block-wrapper {
@@ -88,6 +87,7 @@ const Ue = f.div`
     display: flex;
     flex-direction: column;
     gap: 0.1875rem;
+    padding-top: 0.5rem;
   }
 
   & .timestamp-text {
@@ -127,11 +127,30 @@ const Ue = f.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${L + "px"}) {
-    padding: 1.25rem;
+  & .campaign-date {
+    font-weight: 400;
+    font-size: 0.875rem;
+    leading-trim: none;
+    line-height: 1.25rem;
+    color: var(--gray-600, #676e79);
+  }
+
+  @media (max-width: ${_ + "px"}) {
+    padding: 1rem 0 0 0;
+
+    & .campaign-title-text {
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+
+    & .campaign-date {
+      display: none;
+    }
 
-    & .campaign-title {
-      font-size: 0.875rem;
+    & .timestamp-text {
+      line-height: 1rem;
+      padding-top: 0.5rem;
     }
 
     & .text-block-wrapper {
@@ -141,13 +160,13 @@ const Ue = f.div`
       gap: 0.25rem;
     }
   }
-`, ie = (e = !1, t = !1, o = !1) => `
+`, ie = (e = !1, n = !1, i = !1) => `
     display: flex;
-    ${t ? "flex-wrap: wrap;" : ""}
-    ${t ? "" : "flex-wrap: nowrap;"}
+    ${n ? "flex-wrap: wrap;" : ""}
+    ${n ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
-    ${o ? "justify-content: center;" : ""}
-  `, je = f(ge.div)`
+    ${i ? "justify-content: center;" : ""}
+  `, je = h(de.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -167,11 +186,11 @@ const Ue = f.div`
   ${ie(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
-  color: var(--gray-950);
+  color: var(--gray-950, #14161a);
   font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  border-radius: ${(e) => O(e.theme, "slight")};
+  font-size: 1rem;
+  line-height: 1.5rem;
+  border-radius: ${(e) => L(e.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -218,14 +237,19 @@ const Ue = f.div`
     cursor: pointer;
     background-color: var(--gray-95080, #14161acc);
   }
-`, Re = f.div`
+
+  @media (max-width: ${_ + "px"}) {
+    padding: 0;
+    font-size: 0.875rem;
+  }
+`, Re = h.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Be = f.div`
-  border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
+`, Be = h.div`
+  border-radius: ${(e) => L(e.theme, e.borderRadius || "slight")};
   background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
   height: 1.5rem;
@@ -240,67 +264,67 @@ const Ue = f.div`
   & i {
     font-size: 0.813rem;
   }
-`, Fe = z(({ src: e, ...t }, o) => {
-  const i = ke();
-  return K(() => {
-    var c;
-    const m = (d) => {
-      d.target.src = ae, d.onerror = null;
+`, Fe = z(({ src: e, ...n }, i) => {
+  const o = Ne();
+  return Z(() => {
+    var f;
+    const l = (s) => {
+      s.target.src = ne, s.onerror = null;
     };
-    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);
+    return (f = o == null ? void 0 : o.current) == null || f.addEventListener("error", l), () => {
+      var s;
+      (s = o == null ? void 0 : o.current) == null || s.removeEventListener("error", l);
     };
-  }, []), /* @__PURE__ */ n(Ne, { ref: o, children: J(e) ? /* @__PURE__ */ n("img", { ref: i, src: e, ...t }) : /* @__PURE__ */ n("img", { src: ae, ...t }) });
-}), ue = (e) => {
+  }, []), /* @__PURE__ */ t(Ie, { ref: i, children: Y(e) ? /* @__PURE__ */ t("img", { ref: o, src: e, ...n }) : /* @__PURE__ */ t("img", { src: ne, ...n }) });
+}), he = (e) => {
   const {
-    uuid: t,
-    hasPermission: o = !0,
-    isUser: i,
-    image: m,
-    imageComponent: c,
-    name: d,
-    notifications: l = 0,
-    color: h = "primary",
-    size: u = "large",
-    style: N,
-    disabled: $,
-    onClick: b = () => {
+    uuid: n,
+    hasPermission: i = !0,
+    isUser: o,
+    image: l,
+    imageComponent: f,
+    name: s,
+    notifications: m = 0,
+    color: c = "primary",
+    size: x = "large",
+    style: k,
+    disabled: N,
+    onClick: y = () => {
     },
-    isActive: _,
-    className: C,
-    shopCategory: y,
+    isActive: I,
+    className: w,
+    shopCategory: b,
     // new
     themeData: v
-  } = e, D = {
-    theme: Q(),
-    color: h,
-    size: u,
-    style: N,
-    disabled: $
+  } = e, C = {
+    theme: q(),
+    color: c,
+    size: x,
+    style: k,
+    disabled: N
   };
   return /* @__PURE__ */ De(
     je,
     {
-      onClick: (T) => {
-        T.stopPropagation(), o === !0 && (b == null || b());
+      onClick: (d) => {
+        d.stopPropagation(), i === !0 && (y == null || y());
       },
-      ...D,
-      key: d,
-      className: `profile-item ${C}`,
-      hasPermission: o,
-      isActive: _,
+      ...C,
+      key: s,
+      className: `profile-item ${w}`,
+      hasPermission: i,
+      isActive: I,
       themeColor: (v == null ? void 0 : v.code) || "transparent"
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: ze(c) ? c : m }),
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: Me(f) ? f : l }),
     /* @__PURE__ */ g("div", { children: [
-      /* @__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 }) })
+      /* @__PURE__ */ t("div", { className: "name", children: s }),
+      !o && /* @__PURE__ */ t("div", { className: "description", children: b }),
+      m > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(Le, { className: "badge", color: "danger", size: "small", children: m > 99 ? "99+" : m }) })
     ] })
   );
 };
-ue.propTypes = {
+he.propTypes = {
   id: a.any,
   isUserProfile: a.bool,
   themeColor: a.string,
@@ -322,164 +346,164 @@ ue.propTypes = {
   onSelect: a.func,
   hasPermission: a.bool
 };
-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) => {
+const oe = (e, n) => {
+  if (!e || !n) return null;
+  const i = e.getTime() - n.getTime(), o = 24 * 60 * 60 * 1e3;
+  return i >= 0 ? Math.ceil(i / o) : Math.floor(i / o);
+}, se = (e) => {
   if (e !== void 0) {
-    const t = new Date(e), o = t.getFullYear(), i = t.getMonth() + 1;
-    return `${String(t.getDate()).padStart(2)}. ${i}. ${o}.`;
+    const n = new Date(e), i = n.getFullYear(), o = n.getMonth() + 1;
+    return `${String(n.getDate()).padStart(2)}. ${o}. ${i}.`;
   }
-}, fe = z((e, t) => {
+}, pe = z((e, n) => {
   var te;
-  const o = Q(), {
+  const i = q(), {
     // uuid,
-    shopUuid: i,
-    title: m = "",
+    shopUuid: o,
+    title: l = "",
     // description,
     // badges,
-    coverPhoto: c,
-    onSelect: d,
+    coverPhoto: f,
+    onSelect: s,
     // status,
-    startDate: l,
-    endDate: h,
-    salesPackages: u,
-    shopName: N,
-    shopCategory: $,
-    shopImage: b,
-    shopImageComponent: _,
-    className: C,
-    onSelectCard: y = () => {
+    startDate: m,
+    endDate: c,
+    salesPackages: x,
+    shopName: k,
+    shopCategory: N,
+    shopImage: y,
+    shopImageComponent: I,
+    className: w,
+    onSelectCard: b = () => {
     },
     onSelectShop: v = () => {
     },
-    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,
+    upcoming: D = !1,
+    upcomingCampaignText: C,
+    campaignSingleText: d,
+    salesCampaignTypes: p = [],
+    startsInPrefixTextPlural: F,
+    startsinSuffixTextPlural: W,
+    startsInPrefixTextSingular: A,
+    startsinSuffixTextSingular: J,
+    endsInPrefixTextPlural: V,
+    endsinSuffixTextPlural: K,
+    endsInPrefixTextSingular: T,
+    endsinSuffixTextSingular: H,
+    themeData: U,
+    numberOfListings: r,
+    numberOfListingsTextSingular: G,
+    numberOfListingsTextPlural: xe,
     ...we
-  } = e, ee = l ? new Date(l) <= /* @__PURE__ */ new Date() : !1, ve = se(
-    l ? new Date(l) : null,
+  } = e, Q = m ? new Date(m) <= /* @__PURE__ */ new Date() : !1, be = oe(
+    m ? new Date(m) : null,
     /* @__PURE__ */ new Date()
-  ), F = se(
-    h ? new Date(h) : null,
+  ), O = oe(
+    c ? new Date(c) : null,
     /* @__PURE__ */ new Date()
-  ), 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 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(() => {
+  ), ve = O !== null && O <= 2 && O > 0, ee = c ? new Date(c).getTime() : null, ye = Date.now(), X = ee !== null ? ee - ye : null, E = X !== null && X > 0 && X < 24 * 60 * 60 * 1e3, re = ($, R, u, P, S) => u === 1 ? `${$} ${u} ${P}` : `${R} ${u} ${S}`, $e = () => {
+    if (!c) return null;
+    const $ = _e, u = new Date(c).getTime() - $.getTime();
+    if (u <= 0) return null;
+    const P = Math.floor(u / (1e3 * 60 * 60)), S = Math.floor(u % (1e3 * 60 * 60) / (1e3 * 60)), Se = Math.floor(u % (1e3 * 60) / 1e3);
+    return { hours: P, minutes: S, seconds: Se };
+  }, [_e, Ce] = M(/* @__PURE__ */ new Date());
+  Z(() => {
+    if (!E) return;
+    const $ = setInterval(() => {
       Ce(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(k);
-  }, [W]);
-  const A = W ? $e() : null;
+    return () => clearInterval($);
+  }, [E]);
+  const j = E ? $e() : null;
   return /* @__PURE__ */ g(
     Ue,
     {
-      ref: t,
-      theme: o,
-      className: C,
-      onClick: y,
+      ref: n,
+      theme: i,
+      className: w,
+      onClick: b,
       ...we,
       children: [
-        /* @__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(
+        /* @__PURE__ */ g(Oe, { theme: i, onClick: () => s == null ? void 0 : s(), children: [
+          /* @__PURE__ */ t("img", { src: f }),
+          /* @__PURE__ */ t(Re, { children: x == null ? void 0 : x.map(($, R) => {
+            var u, P;
+            return /* @__PURE__ */ t(
               Be,
               {
-                color: (w = x == null ? void 0 : x.find((I) => I.value === k)) == null ? void 0 : w.color,
-                theme: o,
-                children: /* @__PURE__ */ n(
-                  me,
+                color: (u = p == null ? void 0 : p.find((S) => S.value === $)) == null ? void 0 : u.color,
+                theme: i,
+                children: /* @__PURE__ */ t(
+                  ge,
                   {
-                    icon: (M = x == null ? void 0 : x.find((I) => I.value === k)) == null ? void 0 : M.icon
+                    icon: (P = p == null ? void 0 : p.find((S) => S.value === $)) == null ? void 0 : P.icon
                   }
                 )
               },
-              `package__${V}`
+              `package__${R}`
             );
           }) })
         ] }),
-        /* @__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),
+        /* @__PURE__ */ g(Ee, { theme: i, children: [
+          /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ g("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ t("div", { className: "campaign-title", children: (te = D ? C : d) == null ? void 0 : te.toUpperCase() }),
+            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: l }),
+            c && m && /* @__PURE__ */ g("div", { className: "campaign-date", children: [
+              se(m),
               " - ",
-              le(h)
+              se(c)
             ] }),
             /* @__PURE__ */ g("div", { className: "timestamp-text", children: [
-              P > 0 && /* @__PURE__ */ g("span", { className: "listings-text", children: [
-                P,
+              r > 0 && /* @__PURE__ */ g("span", { className: "listings-text", children: [
+                r,
                 " ",
-                P === 1 ? r : Z,
+                r === 1 ? G : xe,
                 " ",
                 "∙",
                 " "
               ] }),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ t(
                 "span",
                 {
-                  className: `duration-text ${be ? "urgent" : ""} ${ee ? "" : "starts-in"}`,
-                  children: W && A ? /* @__PURE__ */ g("div", { className: "countdown-timer", children: [
-                    G,
+                  className: `duration-text ${ve ? "urgent" : ""} ${Q ? "" : "starts-in"}`,
+                  children: E && j ? /* @__PURE__ */ g("div", { className: "countdown-timer", children: [
+                    T,
                     " ",
-                    A.hours.toString().padStart(2, "0"),
+                    j.hours.toString().padStart(2, "0"),
                     ":",
-                    A.minutes.toString().padStart(2, "0"),
+                    j.minutes.toString().padStart(2, "0"),
                     ":",
-                    A.seconds.toString().padStart(2, "0")
-                  ] }) : ee ? ne(
-                    G,
-                    p,
+                    j.seconds.toString().padStart(2, "0")
+                  ] }) : Q ? re(
+                    T,
+                    V,
+                    O,
+                    H,
+                    K
+                  ) : re(
+                    A,
                     F,
-                    B,
-                    H
-                  ) : ne(
-                    R,
-                    E,
-                    ve,
-                    s,
-                    j
+                    be,
+                    J,
+                    W
                   )
                 }
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ n(
-            ue,
+          /* @__PURE__ */ t(
+            he,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(Fe, { src: b }),
-              imageComponent: _,
-              themeData: Y,
+              image: /* @__PURE__ */ t(Fe, { src: y }),
+              imageComponent: I,
+              themeData: U,
               isActive: !0,
               isUser: !1,
-              name: N,
-              shopCategory: $,
-              onClick: () => v(i)
+              name: k,
+              shopCategory: N,
+              onClick: () => v(o)
             }
           )
         ] })
@@ -487,13 +511,13 @@ const se = (e, t) => {
     }
   );
 });
-fe.propTypes = {
+pe.propTypes = {
   title: a.oneOfType([a.string, a.element]),
   numberOfListings: a.number,
   dropdown: a.any,
   color: a.string
 };
-f.div`
+h.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -524,7 +548,7 @@ f.div`
     }
   }
 
-  @media (max-width: ${L + "px"}) {
+  @media (max-width: ${_ + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
@@ -532,19 +556,19 @@ f.div`
     }
   }
 `;
-const X = f.div`
+const B = h.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${de("-90deg")}
-`, We = f.div`
+  ${ce("-90deg")}
+`, We = h.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%"};
-`, ce = f.div`
-  border-radius: ${(e) => O(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, le = h.div`
+  border-radius: ${(e) => L(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"};
@@ -553,10 +577,10 @@ const X = f.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${de()}
-`, Ae = f.div`
+  ${ce()}
+`, Ae = h.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => O(e.theme, "edged")};
+  border-radius: ${(e) => L(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);
 
@@ -583,59 +607,59 @@ const X = f.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${L + "px"}) {
+  @media (max-width: ${_ + "px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`, Ve = f.div`
+`, Ve = h.div`
   display: flex;
   gap: 1.5rem;
-`, 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,
+`, He = z(({}, e) => {
+  const n = q();
+  return /* @__PURE__ */ g(Ae, { ref: e, theme: n, children: [
+    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
+      le,
       {
-        theme: t,
+        theme: n,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
     /* @__PURE__ */ g("div", { className: "campaign__right-section", children: [
-      /* @__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(We, { theme: n, children: [
+        /* @__PURE__ */ t(B, { heightCoeff: 0.75, theme: n, width: "35%" }),
+        /* @__PURE__ */ t(B, { heightCoeff: 1.25, theme: n }),
+        /* @__PURE__ */ t(B, { heightCoeff: 3, theme: n })
       ] }),
       /* @__PURE__ */ g("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ n(
-          ce,
+        /* @__PURE__ */ t(
+          le,
           {
-            theme: t,
+            theme: n,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ n(X, { theme: t, width: "75%" })
+        /* @__PURE__ */ t(B, { theme: n, width: "75%" })
       ] })
     ] })
   ] });
-}), He = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ n(Ve, { children: Array.from({ length: e }, (o, i) => /* @__PURE__ */ n(
-  Xe,
+}), Ge = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(Ve, { children: Array.from({ length: e }, (i, o) => /* @__PURE__ */ t(
+  He,
   {},
-  `${t}-skeleton-campaign-card-${i}`
-)) }), Ge = ({
+  `${n}-skeleton-campaign-card-${o}`
+)) }), Xe = ({
   children: e,
-  fallbackComponent: t = /* @__PURE__ */ n(Te, {}),
-  isLoading: o = !1,
-  itemsCount: i = 5,
-  keyPrefix: m
-}) => /* @__PURE__ */ n(Ie, { fallback: t, children: o === !0 ? /* @__PURE__ */ n(He, { itemsCount: i, keyPrefix: m }) : e }), Ye = f.div`
+  fallbackComponent: n = /* @__PURE__ */ t(ke, {}),
+  isLoading: i = !1,
+  itemsCount: o = 5,
+  keyPrefix: l
+}) => /* @__PURE__ */ t(Te, { fallback: n, children: i === !0 ? /* @__PURE__ */ t(Ge, { itemsCount: o, keyPrefix: l }) : e }), Ye = h.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -655,9 +679,6 @@ const X = f.div`
       align-items: center;
       gap: 0.5rem;
 
-      & .title__icon {
-      }
-
       & .title__text {
         color: var(--gray-950, #14161a);
         font-size: 1.5rem;
@@ -676,122 +697,129 @@ const X = f.div`
     top: 0;
     right: 0;
   }
-`, Ze = f(ge.div)`
+
+  @media (max-width: ${_ + "px"}) {
+    & .scrollable-section__header {
+      & .scrollable-section__title {
+        & .title__text {
+          font-size: 1.375rem;
+          line-height: 1.75rem;
+        }
+      }
+    }
+  }
+`, Ze = h(de.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${L + "px"}) {
-    grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
+  @media (max-width: ${_ + "px"}) {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    justify-content: flex-start;
+    gap: 1rem;
+
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
   }
-`, pe = z(
-  ({
-    icon: e,
-    title: t,
-    numOfSlides: o = 2,
-    numOfSlidesForMobile: i = 1,
-    showNavigation: m = !0,
-    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 = () => {
-        N(y ? i : o);
+`, fe = z(
+  ({ icon: e, title: n, numOfSlides: i = 2, showNavigation: o = !0, children: l }, f) => {
+    const [s, m] = M(0), [c, x] = M(1), [k, N] = M(null), [y, I] = M(null), w = me(), b = (l == null ? void 0 : l.length) ?? 1;
+    Z(() => {
+      const d = () => {
+        x(i);
       };
-      return window.addEventListener("resize", s), s(), () => window.removeEventListener("resize", s);
+      return window.addEventListener("resize", d), d(), () => window.removeEventListener("resize", d);
     }, []);
-    const D = c == null ? void 0 : c.slice(l, l + u), T = (s) => {
+    const v = w ? l : l == null ? void 0 : l.slice(s, s + c), D = (d) => {
       var p;
-      (p = s == null ? void 0 : s.target) == null || p.blur(), l + u < S && h(l + u);
-    }, x = (s) => {
+      (p = d == null ? void 0 : d.target) == null || p.blur(), s + c < b && m(s + c);
+    }, C = (d) => {
       var p;
-      (p = s == null ? void 0 : s.target) == null || p.blur(), l - u >= 0 && h(l - u);
+      (p = d == null ? void 0 : d.target) == null || p.blur(), s - c >= 0 && m(s - c);
     };
-    return /* @__PURE__ */ g(
-      Ye,
-      {
-        ref: d,
-        ...y ? { onTouchStart: (s) => {
-          var p;
-          C(null), b((p = s == null ? void 0 : s.targetTouches["0"]) == null ? void 0 : p.clientX);
-        }, onTouchMove: (s) => {
-          var p;
-          C((p = s == null ? void 0 : s.targetTouches["0"]) == null ? void 0 : p.clientX);
-        }, onTouchEnd: () => {
-          if (!$ || !_) return;
-          const s = $ - _;
-          s > v && T(), s < -v && x();
-        } } : {},
-        children: [
-          /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ g("div", { className: "scrollable-section__title", children: [
-            J(e) && /* @__PURE__ */ n(
-              me,
-              {
-                icon: e,
-                color: "primary",
-                sizeInUnits: "1.5rem",
-                className: "title__icon"
-              }
-            ),
-            J(t) && /* @__PURE__ */ n("div", { className: "title__text", children: t })
-          ] }) }),
-          /* @__PURE__ */ n(
-            Ze,
-            {
-              numOfColumns: o,
-              numOfColumnsForMobile: i,
-              animate: {
-                x: 0,
-                opacity: 1
-              },
-              initial: {
-                x: 10,
-                opacity: 0
-              },
-              children: D
+    return /* @__PURE__ */ g(Ye, { ref: f, children: [
+      /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ g("div", { className: "scrollable-section__title", children: [
+        Y(e) && /* @__PURE__ */ t(
+          ge,
+          {
+            icon: e,
+            color: "primary",
+            sizeInUnits: "1.5rem",
+            className: "title__icon"
+          }
+        ),
+        Y(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
+      ] }) }),
+      /* @__PURE__ */ t(
+        Ze,
+        {
+          numOfColumns: i,
+          ...!w && {
+            animate: {
+              x: 0,
+              opacity: 1
             },
-            `scrollable-section__content-${l}`
-          ),
-          m && S > u && !y && /* @__PURE__ */ g("div", { className: "scrollable-section__navigation", children: [
-            /* @__PURE__ */ n(
-              oe,
-              {
-                icon: "angle-left",
-                borderRadius: "curved",
-                btnType: "tinted",
-                color: "neutral",
-                className: "navigation__arrow",
-                disabled: l === 0,
-                onClick: x
-              }
-            ),
-            /* @__PURE__ */ n(
-              oe,
-              {
-                icon: "angle-right",
-                borderRadius: "curved",
-                btnType: "tinted",
-                color: "neutral",
-                className: "navigation__arrow",
-                disabled: l + u >= S,
-                onClick: T
-              }
-            )
-          ] })
-        ]
-      }
-    );
+            initial: {
+              x: 10,
+              opacity: 0
+            }
+          },
+          children: v
+        },
+        `scrollable-section__content-${s}`
+      ),
+      o && b > c && !w && /* @__PURE__ */ g("div", { className: "scrollable-section__navigation", children: [
+        /* @__PURE__ */ t(
+          ae,
+          {
+            icon: "angle-left",
+            borderRadius: "curved",
+            btnType: "tinted",
+            color: "neutral",
+            className: "navigation__arrow",
+            disabled: s === 0,
+            onClick: C
+          }
+        ),
+        /* @__PURE__ */ t(
+          ae,
+          {
+            icon: "angle-right",
+            borderRadius: "curved",
+            btnType: "tinted",
+            color: "neutral",
+            className: "navigation__arrow",
+            disabled: s + c >= b,
+            onClick: D
+          }
+        )
+      ] })
+    ] });
   }
 );
-pe.propTypes = {
+fe.propTypes = {
   icon: a.string,
   title: a.string,
   numOfSlides: a.number,
   numOfSlidesForMobile: a.number,
   showNavigation: a.bool
 };
-const qe = f.div`
+const qe = h.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -808,71 +836,70 @@ const qe = f.div`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, xe = z(
+`, ue = z(
   ({
     sectionName: e,
-    imageUrl: t,
-    maxHeight: o = "16.25rem",
-    className: i = "",
-    handleClick: m = () => {
+    imageUrl: n,
+    maxHeight: i = "16.25rem",
+    className: o = "",
+    handleClick: l = () => {
     }
-  }) => /* @__PURE__ */ n(
+  }) => /* @__PURE__ */ t(
     qe,
     {
-      maxHeight: o,
-      onClick: m,
-      className: `itemless-banner ${i}`,
-      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${e}` })
+      maxHeight: i,
+      onClick: l,
+      className: `itemless-banner ${o}`,
+      children: /* @__PURE__ */ t("img", { src: n, alt: `itemless-banner__${e}` })
     }
   )
 );
-xe.propTypes = {
+ue.propTypes = {
   sectionName: a.string,
   imageUrl: a.string,
   maxHeight: a.string,
   className: a.string,
   handleClick: a.func
 };
-const Je = Pe(fe), gr = z(
+const Je = Pe(pe), gr = z(
   ({
     sellerType: e = "Shop",
-    items: t = [],
-    title: o,
-    icon: i,
-    isLoading: m,
-    onSelectCard: c = () => {
+    items: n = [],
+    title: i,
+    icon: o,
+    isLoading: l,
+    onSelectCard: f = () => {
     },
-    onSelectShop: d = () => {
+    onSelectShop: s = () => {
     },
-    getImage: l = () => {
+    getImage: m = () => {
     },
-    campaignSingleText: h,
-    upcomingCampaignText: u,
-    salesCampaignTypes: N = [],
-    startsInPrefixTextPlural: $,
-    startsinSuffixTextPlural: b,
-    startsInPrefixTextSingular: _,
-    startsinSuffixTextSingular: C,
-    endsInPrefixTextPlural: y,
+    campaignSingleText: c,
+    upcomingCampaignText: x,
+    salesCampaignTypes: k = [],
+    startsInPrefixTextPlural: N,
+    startsinSuffixTextPlural: y,
+    startsInPrefixTextSingular: I,
+    startsinSuffixTextSingular: w,
+    endsInPrefixTextPlural: b,
     endsinSuffixTextPlural: v,
-    endsInPrefixTextSingular: S,
-    endsinSuffixTextSingular: D,
-    numOfSlides: T = 2,
-    numOfSlidesForMobile: x = 1,
-    showNavigation: E = !0,
-    numberOfListingsTextSingular: j,
-    numberOfListingsTextPlural: R,
-    itemlessImageUrl: s,
-    itemlessLink: p,
-    handleItemlessLink: H = () => {
+    endsInPrefixTextSingular: D,
+    endsinSuffixTextSingular: C,
+    numOfSlides: d = 2,
+    showNavigation: p = !0,
+    numberOfListingsTextSingular: F,
+    numberOfListingsTextPlural: W,
+    itemlessImageUrl: A,
+    itemlessLink: J,
+    handleItemlessLink: V = () => {
     }
-  }, G) => {
-    const B = he(), Y = Me(() => {
-      let P = t == null ? void 0 : t.map((r, Z) => /* @__PURE__ */ n(
+  }, K) => {
+    const T = me(), H = ze(() => {
+      let U = n == null ? void 0 : n.map((r, G) => /* @__PURE__ */ t(
         Je,
         {
           className: "campaign-item",
-          coverPhoto: l(
+          coverPhoto: m(
             r == null ? void 0 : r.coverPhoto,
             (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
           ),
@@ -888,55 +915,55 @@ const Je = Pe(fe), gr = z(
           startDate: r == null ? void 0 : r.startDate,
           title: r == null ? void 0 : r.name,
           uuid: r == null ? void 0 : r.campaignUuid,
-          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,
+          onSelectCard: () => f(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+          onSelectShop: () => s(r == null ? void 0 : r.shopUuid),
+          campaignSingleText: c,
+          upcomingCampaignText: x,
           upcoming: r == null ? void 0 : r.upcoming,
-          salesCampaignTypes: N,
-          startsInPrefixTextPlural: $,
-          startsinSuffixTextPlural: b,
-          startsInPrefixTextSingular: _,
-          startsinSuffixTextSingular: C,
-          endsInPrefixTextPlural: y,
+          salesCampaignTypes: k,
+          startsInPrefixTextPlural: N,
+          startsinSuffixTextPlural: y,
+          startsInPrefixTextSingular: I,
+          startsinSuffixTextSingular: w,
+          endsInPrefixTextPlural: b,
           endsinSuffixTextPlural: v,
-          endsInPrefixTextSingular: S,
-          endsinSuffixTextSingular: D,
+          endsInPrefixTextSingular: D,
+          endsinSuffixTextSingular: C,
           themeData: r == null ? void 0 : r.themeData,
           numberOfListings: r == null ? void 0 : r.numberOfListings,
-          numberOfListingsTextSingular: j,
-          numberOfListingsTextPlural: R
+          numberOfListingsTextSingular: F,
+          numberOfListingsTextPlural: W
         },
-        `campaign__item__${Z}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+        `campaign__item__${G}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
       ));
-      return (t == null ? void 0 : t.length) < 2 && !B ? [
-        ...P,
-        /* @__PURE__ */ n(
-          xe,
+      return (n == null ? void 0 : n.length) < 2 && !T ? [
+        ...U,
+        /* @__PURE__ */ t(
+          ue,
           {
-            imageUrl: s,
+            imageUrl: A,
             className: "campaign-item",
-            handleClick: H
+            handleClick: V
           }
         )
-      ] : P;
-    }, [t]);
-    return /* @__PURE__ */ n(
-      Ge,
+      ] : U;
+    }, [n]);
+    return /* @__PURE__ */ t(
+      Xe,
       {
-        isLoading: m,
-        itemsCount: B ? 1 : 2,
+        isLoading: l,
+        itemsCount: T ? 1 : 2,
         keyPrefix: "sales-camp",
-        children: /* @__PURE__ */ n(
-          pe,
+        children: /* @__PURE__ */ t(
+          fe,
           {
-            icon: i,
-            title: o,
-            numOfSlides: T,
-            numOfSlidesForMobile: x,
-            showNavigation: E,
-            children: Y
-          }
+            icon: o,
+            title: i,
+            numOfSlides: d,
+            showNavigation: p,
+            children: H
+          },
+          `sales-campaign-section__${T}`
         )
       }
     );