@lanaco/lnc-react-ui 4.0.125 → 4.0.127

package/dist/SalesCampaignsSection.js

@@ -1,16 +1,16 @@
-import { jsx as t, jsxs as c, Fragment as _e } from "react/jsx-runtime";
-import { createElement as Se, forwardRef as V, useState as z, useEffect as oe, Suspense as Te, memo as Ce, useMemo as Ne } from "react";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as O, o as ie, k as Q } from "./utils-BbgAIA9N.js";
+import { jsx as t, jsxs as c, Fragment as Se } from "react/jsx-runtime";
+import { createElement as Ce, forwardRef as L, useState as U, useEffect as le, Suspense as Te, memo as Ne, useMemo as ke } from "react";
+import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as O, o as ce, k as te } from "./utils-BPdU4_1q.js";
 import { M } from "./consts-BuFChS64.js";
-import { m as se } from "./motion-Ckekul_K.js";
-import { P as i } from "./index-CblbdqjE.js";
-import le from "./Icon.js";
-import ke from "./Badge.js";
-import { u as Z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import ee from "./IconButton.js";
-import { u as ce } from "./useDetectMobile-Bkvj0VMa.js";
-const De = h.div`
+import { m as de } from "./motion-Ckekul_K.js";
+import { P as a } from "./index-CblbdqjE.js";
+import ge from "./Icon.js";
+import De from "./Badge.js";
+import { u as q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import ne from "./IconButton.js";
+import { u as me } from "./useDetectMobile-Bkvj0VMa.js";
+const Ie = m.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -25,11 +25,11 @@ const De = h.div`
     border: none;
     border-radius: 0;
   }
-`, Ie = h.div`
+`, Pe = m.div`
   border-radius: ${(e) => O(e.theme, "edged")};
-  height: 15rem;
-  width: 15rem;
-  min-width: 15rem;
+  height: 13.75rem;
+  width: 13.75rem;
+  min-width: 13.75rem;
   cursor: pointer;
 
   position: relative;
@@ -54,7 +54,7 @@ const De = h.div`
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, Pe = h.div`
+`, Me = m.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -140,13 +140,13 @@ const De = h.div`
       gap: 0.25rem;
     }
   }
-`, re = (e = !1, n = !1, o = !1) => `
+`, ae = (e = !1, n = !1, o = !1) => `
     display: flex;
     ${n ? "flex-wrap: wrap;" : ""}
     ${n ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Me = h(se.div)`
+  `, ze = m(de.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -163,7 +163,7 @@ const De = h.div`
     text-decoration: none;
   }
 
-  ${re(!0)}
+  ${ae(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: var(--gray-950);
@@ -179,7 +179,7 @@ const De = h.div`
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${re(!0, !1, !0)}
+    ${ae(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -217,13 +217,13 @@ const De = h.div`
     cursor: pointer;
     background-color: var(--gray-95080, #14161acc);
   }
-`, ze = h.div`
+`, Ue = m.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Oe = h.div`
+`, Le = m.div`
   border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
   background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
@@ -239,34 +239,34 @@ const De = h.div`
   & i {
     font-size: 0.813rem;
   }
-`, de = (e) => {
+`, he = (e) => {
   const {
     uuid: n,
     hasPermission: o = !0,
     isUser: l,
-    image: v,
+    image: f,
     name: u,
-    notifications: f = 0,
+    notifications: p = 0,
     color: s = "primary",
     size: d = "large",
     style: g,
-    disabled: C,
+    disabled: T,
     onClick: b = () => {
     },
     isActive: $,
     className: _,
     shopCategory: S,
     // new
-    themeData: p
+    themeData: x
   } = e, y = {
-    theme: Z(),
+    theme: q(),
     color: s,
     size: d,
     style: g,
-    disabled: C
+    disabled: T
   };
-  return /* @__PURE__ */ Se(
-    Me,
+  return /* @__PURE__ */ Ce(
+    ze,
     {
       onClick: (k) => {
         k.stopPropagation(), o === !0 && (b == null || b());
@@ -276,26 +276,26 @@ const De = h.div`
       className: `profile-item ${_}`,
       hasPermission: o,
       isActive: $,
-      themeColor: (p == null ? void 0 : p.code) || "transparent"
+      themeColor: (x == null ? void 0 : x.code) || "transparent"
     },
-    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: v }),
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: f }),
     /* @__PURE__ */ c("div", { children: [
       /* @__PURE__ */ t("div", { className: "name", children: u }),
       !l && /* @__PURE__ */ t("div", { className: "description", children: S }),
-      f > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(ke, { className: "badge", color: "danger", size: "small", children: f > 99 ? "99+" : f }) })
+      p > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(De, { className: "badge", color: "danger", size: "small", children: p > 99 ? "99+" : p }) })
     ] })
   );
 };
-de.propTypes = {
-  id: i.any,
-  isUserProfile: i.bool,
-  themeColor: i.string,
-  image: i.any,
-  name: i.string,
-  notifications: i.number,
-  style: i.object,
-  className: i.string,
-  color: i.oneOf([
+he.propTypes = {
+  id: a.any,
+  isUserProfile: a.bool,
+  themeColor: a.string,
+  image: a.any,
+  name: a.string,
+  notifications: a.number,
+  style: a.object,
+  className: a.string,
+  color: a.oneOf([
     "primary",
     "secondary",
     "success",
@@ -304,122 +304,122 @@ de.propTypes = {
     "information",
     "neutral"
   ]),
-  size: i.oneOf(["large"]),
-  onSelect: i.func,
-  hasPermission: i.bool
+  size: a.oneOf(["large"]),
+  onSelect: a.func,
+  hasPermission: a.bool
 };
-const te = (e, n) => {
+const ie = (e, n) => {
   if (!e || !n) return null;
   const o = e.getTime() - n.getTime(), l = 24 * 60 * 60 * 1e3;
   return o >= 0 ? Math.ceil(o / l) : Math.floor(o / l);
-}, ne = (e) => {
+}, oe = (e) => {
   if (e !== void 0) {
     const n = new Date(e), o = n.getFullYear(), l = n.getMonth() + 1;
     return `${String(n.getDate()).padStart(2)}. ${l}. ${o}.`;
   }
-}, ge = V((e, n) => {
-  var K;
-  const o = Z(), {
+}, ue = L((e, n) => {
+  var re;
+  const o = q(), {
     // uuid,
     shopUuid: l,
-    title: v = "",
+    title: f = "",
     // description,
     // badges,
     coverPhoto: u,
-    onSelect: f,
+    onSelect: p,
     // status,
     startDate: s,
     endDate: d,
     salesPackages: g,
-    shopName: C,
+    shopName: T,
     shopCategory: b,
     shopImage: $,
     className: _,
     onSelectCard: S = () => {
     },
-    onSelectShop: p = () => {
+    onSelectShop: x = () => {
     },
     upcoming: N = !1,
     upcomingCampaignText: y,
     campaignSingleText: k,
-    salesCampaignTypes: x = [],
+    salesCampaignTypes: w = [],
     startsInPrefixTextPlural: I,
-    startsinSuffixTextPlural: L,
-    startsInPrefixTextSingular: U,
-    startsinSuffixTextSingular: R,
-    endsInPrefixTextPlural: a,
-    endsinSuffixTextPlural: m,
-    endsInPrefixTextSingular: E,
-    endsinSuffixTextSingular: r,
-    themeData: X,
-    numberOfListings: G,
-    numberOfListingsTextSingular: he,
-    numberOfListingsTextPlural: ue,
-    ...fe
-  } = e, q = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1, pe = te(
+    startsinSuffixTextPlural: R,
+    startsInPrefixTextSingular: j,
+    startsinSuffixTextSingular: E,
+    endsInPrefixTextPlural: i,
+    endsinSuffixTextPlural: h,
+    endsInPrefixTextSingular: B,
+    endsinSuffixTextSingular: J,
+    themeData: W,
+    numberOfListings: z,
+    numberOfListingsTextSingular: F,
+    numberOfListingsTextPlural: r,
+    ...Y
+  } = e, K = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1, xe = ie(
     s ? new Date(s) : null,
     /* @__PURE__ */ new Date()
-  ), j = te(
+  ), A = ie(
     d ? new Date(d) : null,
     /* @__PURE__ */ new Date()
-  ), xe = j !== null && j <= 2 && j > 0, H = d ? new Date(d).getTime() : null, we = Date.now(), Y = H !== null ? H - we : null, B = Y !== null && Y > 0 && Y < 24 * 60 * 60 * 1e3, J = (T, F, w, P, D) => w === 1 ? `${T} ${w} ${P}` : `${F} ${w} ${D}`, ve = () => {
+  ), we = A !== null && A <= 2 && A > 0, Q = d ? new Date(d).getTime() : null, ve = Date.now(), Z = Q !== null ? Q - ve : null, V = Z !== null && Z > 0 && Z < 24 * 60 * 60 * 1e3, ee = (C, H, v, P, D) => v === 1 ? `${C} ${v} ${P}` : `${H} ${v} ${D}`, be = () => {
     if (!d) return null;
-    const T = be, w = new Date(d).getTime() - T.getTime();
-    if (w <= 0) return null;
-    const P = Math.floor(w / (1e3 * 60 * 60)), D = Math.floor(w % (1e3 * 60 * 60) / (1e3 * 60)), $e = Math.floor(w % (1e3 * 60) / 1e3);
-    return { hours: P, minutes: D, seconds: $e };
-  }, [be, ye] = z(/* @__PURE__ */ new Date());
-  oe(() => {
-    if (!B) return;
-    const T = setInterval(() => {
-      ye(/* @__PURE__ */ new Date());
+    const C = ye, v = new Date(d).getTime() - C.getTime();
+    if (v <= 0) return null;
+    const P = Math.floor(v / (1e3 * 60 * 60)), D = Math.floor(v % (1e3 * 60 * 60) / (1e3 * 60)), _e = Math.floor(v % (1e3 * 60) / 1e3);
+    return { hours: P, minutes: D, seconds: _e };
+  }, [ye, $e] = U(/* @__PURE__ */ new Date());
+  le(() => {
+    if (!V) return;
+    const C = setInterval(() => {
+      $e(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(T);
-  }, [B]);
-  const W = B ? ve() : null;
+    return () => clearInterval(C);
+  }, [V]);
+  const X = V ? be() : null;
   return /* @__PURE__ */ c(
-    De,
+    Ie,
     {
       ref: n,
       theme: o,
       className: _,
       onClick: S,
-      ...fe,
+      ...Y,
       children: [
-        /* @__PURE__ */ c(Ie, { theme: o, onClick: () => f == null ? void 0 : f(), children: [
+        /* @__PURE__ */ c(Pe, { theme: o, onClick: () => p == null ? void 0 : p(), children: [
           /* @__PURE__ */ t("img", { src: u }),
-          /* @__PURE__ */ t(ze, { children: g == null ? void 0 : g.map((T, F) => {
-            var w, P;
+          /* @__PURE__ */ t(Ue, { children: g == null ? void 0 : g.map((C, H) => {
+            var v, P;
             return /* @__PURE__ */ t(
-              Oe,
+              Le,
               {
-                color: (w = x == null ? void 0 : x.find((D) => D.value === T)) == null ? void 0 : w.color,
+                color: (v = w == null ? void 0 : w.find((D) => D.value === C)) == null ? void 0 : v.color,
                 theme: o,
                 children: /* @__PURE__ */ t(
-                  le,
+                  ge,
                   {
-                    icon: (P = x == null ? void 0 : x.find((D) => D.value === T)) == null ? void 0 : P.icon
+                    icon: (P = w == null ? void 0 : w.find((D) => D.value === C)) == null ? void 0 : P.icon
                   }
                 )
               },
-              `package__${F}`
+              `package__${H}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ c(Pe, { theme: o, children: [
+        /* @__PURE__ */ c(Me, { theme: o, children: [
           /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ c("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ t("div", { className: "campaign-title", children: (K = N ? y : k) == null ? void 0 : K.toUpperCase() }),
-            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: v }),
+            /* @__PURE__ */ t("div", { className: "campaign-title", children: (re = N ? y : k) == null ? void 0 : re.toUpperCase() }),
+            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: f }),
             d && s && /* @__PURE__ */ c("div", { children: [
-              ne(s),
+              oe(s),
               " - ",
-              ne(d)
+              oe(d)
             ] }),
             /* @__PURE__ */ c("div", { className: "timestamp-text", children: [
-              G > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
-                G,
+              z > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
+                z,
                 " ",
-                G === 1 ? he : ue,
+                z === 1 ? F : r,
                 " ",
                 "∙",
                 " "
@@ -427,34 +427,34 @@ const te = (e, n) => {
               /* @__PURE__ */ t(
                 "span",
                 {
-                  className: `duration-text ${xe ? "urgent" : ""} ${q ? "" : "starts-in"}`,
-                  children: B && W ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
-                    E,
+                  className: `duration-text ${we ? "urgent" : ""} ${K ? "" : "starts-in"}`,
+                  children: V && X ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
+                    B,
                     " ",
-                    W.hours.toString().padStart(2, "0"),
+                    X.hours.toString().padStart(2, "0"),
                     ":",
-                    W.minutes.toString().padStart(2, "0"),
+                    X.minutes.toString().padStart(2, "0"),
                     ":",
-                    W.seconds.toString().padStart(2, "0")
-                  ] }) : q ? J(
-                    E,
-                    a,
+                    X.seconds.toString().padStart(2, "0")
+                  ] }) : K ? ee(
+                    B,
+                    i,
+                    A,
+                    J,
+                    h
+                  ) : ee(
                     j,
-                    r,
-                    m
-                  ) : J(
-                    U,
                     I,
-                    pe,
-                    R,
-                    L
+                    xe,
+                    E,
+                    R
                   )
                 }
               )
             ] })
           ] }) }),
           /* @__PURE__ */ t(
-            de,
+            he,
             {
               hasPermission: !0,
               image: (
@@ -472,12 +472,12 @@ const te = (e, n) => {
                   }
                 )
               ),
-              themeData: X,
+              themeData: W,
               isActive: !0,
               isUser: !1,
-              name: C,
+              name: T,
               shopCategory: b,
-              onClick: () => p(l)
+              onClick: () => x(l)
             }
           )
         ] })
@@ -485,13 +485,13 @@ const te = (e, n) => {
     }
   );
 });
-ge.propTypes = {
-  title: i.oneOfType([i.string, i.element]),
-  numberOfListings: i.number,
-  dropdown: i.any,
-  color: i.string
+ue.propTypes = {
+  title: a.oneOfType([a.string, a.element]),
+  numberOfListings: a.number,
+  dropdown: a.any,
+  color: a.string
 };
-h.div`
+m.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -530,18 +530,18 @@ h.div`
     }
   }
 `;
-const A = h.div`
+const G = m.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${ie("-90deg")}
-`, Le = h.div`
+  ${ce("-90deg")}
+`, Oe = 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%"};
-`, ae = h.div`
+`, se = m.div`
   border-radius: ${(e) => O(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
   background: var(--gray-200, #dddfe4);
   position: relative;
@@ -551,8 +551,8 @@ const A = h.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${ie()}
-`, Ue = h.div`
+  ${ce()}
+`, Re = m.div`
   background: var(--white, #fff);
   border-radius: ${(e) => O(e.theme, "edged")};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
@@ -588,14 +588,14 @@ const A = h.div`
       margin-top: 1rem;
     }
   }
-`, Re = h.div`
+`, je = m.div`
   display: flex;
   gap: 1.5rem;
-`, Ee = V(({}, e) => {
-  const n = Z();
-  return /* @__PURE__ */ c(Ue, { ref: e, theme: n, children: [
+`, Ee = L(({}, e) => {
+  const n = q();
+  return /* @__PURE__ */ c(Re, { ref: e, theme: n, children: [
     /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
-      ae,
+      se,
       {
         theme: n,
         width: "15rem",
@@ -604,14 +604,14 @@ const A = h.div`
       }
     ) }),
     /* @__PURE__ */ c("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ c(Le, { theme: n, children: [
-        /* @__PURE__ */ t(A, { heightCoeff: 0.75, theme: n, width: "35%" }),
-        /* @__PURE__ */ t(A, { heightCoeff: 1.25, theme: n }),
-        /* @__PURE__ */ t(A, { heightCoeff: 3, theme: n })
+      /* @__PURE__ */ c(Oe, { theme: n, children: [
+        /* @__PURE__ */ t(G, { heightCoeff: 0.75, theme: n, width: "35%" }),
+        /* @__PURE__ */ t(G, { heightCoeff: 1.25, theme: n }),
+        /* @__PURE__ */ t(G, { heightCoeff: 3, theme: n })
       ] }),
       /* @__PURE__ */ c("div", { className: "campaign__user", children: [
         /* @__PURE__ */ t(
-          ae,
+          se,
           {
             theme: n,
             width: "2.5rem",
@@ -619,21 +619,21 @@ const A = h.div`
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(A, { theme: n, width: "75%" })
+        /* @__PURE__ */ t(G, { theme: n, width: "75%" })
       ] })
     ] })
   ] });
-}), je = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(Re, { children: Array.from({ length: e }, (o, l) => /* @__PURE__ */ t(
+}), Be = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(je, { children: Array.from({ length: e }, (o, l) => /* @__PURE__ */ t(
   Ee,
   {},
   `${n}-skeleton-campaign-card-${l}`
-)) }), Be = ({
+)) }), We = ({
   children: e,
-  fallbackComponent: n = /* @__PURE__ */ t(_e, {}),
+  fallbackComponent: n = /* @__PURE__ */ t(Se, {}),
   isLoading: o = !1,
   itemsCount: l = 5,
-  keyPrefix: v
-}) => /* @__PURE__ */ t(Te, { fallback: n, children: o === !0 ? /* @__PURE__ */ t(je, { itemsCount: l, keyPrefix: v }) : e }), We = h.div`
+  keyPrefix: f
+}) => /* @__PURE__ */ t(Te, { fallback: n, children: o === !0 ? /* @__PURE__ */ t(Be, { itemsCount: l, keyPrefix: f }) : e }), Fe = m.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -674,7 +674,7 @@ const A = h.div`
     top: 0;
     right: 0;
   }
-`, Fe = h(se.div)`
+`, Ae = m(de.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
@@ -682,48 +682,48 @@ const A = h.div`
   @media (max-width: ${M + "px"}) {
     grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
   }
-`, me = V(
+`, fe = L(
   ({
     icon: e,
     title: n,
     numOfSlides: o = 2,
     numOfSlidesForMobile: l = 1,
-    showNavigation: v = !0,
+    showNavigation: f = !0,
     children: u
-  }, f) => {
-    const [s, d] = z(0), [g, C] = z(1), [b, $] = z(null), [_, S] = z(null), p = ce(), N = 50, y = (u == null ? void 0 : u.length) ?? 1;
-    oe(() => {
-      const a = () => {
-        C(p ? l : o);
+  }, p) => {
+    const [s, d] = U(0), [g, T] = U(1), [b, $] = U(null), [_, S] = U(null), x = me(), N = 50, y = (u == null ? void 0 : u.length) ?? 1;
+    le(() => {
+      const i = () => {
+        T(x ? l : o);
       };
-      return window.addEventListener("resize", a), a(), () => window.removeEventListener("resize", a);
+      return window.addEventListener("resize", i), i(), () => window.removeEventListener("resize", i);
     }, []);
-    const k = u == null ? void 0 : u.slice(s, s + g), x = (a) => {
-      var m;
-      (m = a == null ? void 0 : a.target) == null || m.blur(), s + g < y && d(s + g);
-    }, I = (a) => {
-      var m;
-      (m = a == null ? void 0 : a.target) == null || m.blur(), s - g >= 0 && d(s - g);
+    const k = u == null ? void 0 : u.slice(s, s + g), w = (i) => {
+      var h;
+      (h = i == null ? void 0 : i.target) == null || h.blur(), s + g < y && d(s + g);
+    }, I = (i) => {
+      var h;
+      (h = i == null ? void 0 : i.target) == null || h.blur(), s - g >= 0 && d(s - g);
     };
     return /* @__PURE__ */ c(
-      We,
+      Fe,
       {
-        ref: f,
-        ...p ? { onTouchStart: (a) => {
-          var m;
-          S(null), $((m = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : m.clientX);
-        }, onTouchMove: (a) => {
-          var m;
-          S((m = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : m.clientX);
+        ref: p,
+        ...x ? { onTouchStart: (i) => {
+          var h;
+          S(null), $((h = i == null ? void 0 : i.targetTouches["0"]) == null ? void 0 : h.clientX);
+        }, onTouchMove: (i) => {
+          var h;
+          S((h = i == null ? void 0 : i.targetTouches["0"]) == null ? void 0 : h.clientX);
         }, onTouchEnd: () => {
           if (!b || !_) return;
-          const a = b - _;
-          a > N && x(), a < -N && I();
+          const i = b - _;
+          i > N && w(), i < -N && I();
         } } : {},
         children: [
           /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ c("div", { className: "scrollable-section__title", children: [
-            Q(e) && /* @__PURE__ */ t(
-              le,
+            te(e) && /* @__PURE__ */ t(
+              ge,
               {
                 icon: e,
                 color: "primary",
@@ -731,10 +731,10 @@ const A = h.div`
                 className: "title__icon"
               }
             ),
-            Q(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
+            te(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
           ] }) }),
           /* @__PURE__ */ t(
-            Fe,
+            Ae,
             {
               numOfColumns: o,
               numOfColumnsForMobile: l,
@@ -750,9 +750,9 @@ const A = h.div`
             },
             `scrollable-section__content-${s}`
           ),
-          v && y > g && !p && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
+          f && y > g && !x && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
             /* @__PURE__ */ t(
-              ee,
+              ne,
               {
                 icon: "angle-left",
                 borderRadius: "curved",
@@ -764,7 +764,7 @@ const A = h.div`
               }
             ),
             /* @__PURE__ */ t(
-              ee,
+              ne,
               {
                 icon: "angle-right",
                 borderRadius: "curved",
@@ -772,7 +772,7 @@ const A = h.div`
                 color: "neutral",
                 className: "navigation__arrow",
                 disabled: s + g >= y,
-                onClick: x
+                onClick: w
               }
             )
           ] })
@@ -781,98 +781,157 @@ const A = h.div`
     );
   }
 );
-me.propTypes = {
-  icon: i.string,
-  title: i.string,
-  numOfSlides: i.number,
-  numOfSlidesForMobile: i.number,
-  showNavigation: i.bool
+fe.propTypes = {
+  icon: a.string,
+  title: a.string,
+  numOfSlides: a.number,
+  numOfSlidesForMobile: a.number,
+  showNavigation: a.bool
+};
+const Ve = m.div`
+  display: flex;
+  flex: 1;
+  width: 100%;
+  max-height: ${(e) => e == null ? void 0 : e.maxHeight};
+  border-radius: 1.25rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & img {
+    width: 100%;
+    height: 100%;
+    border-radius: 1.25rem;
+    object-fit: cover;
+  }
+`, pe = L(
+  ({
+    sectionName: e,
+    imageUrl: n,
+    maxHeight: o = "16.25rem",
+    className: l = "",
+    handleClick: f = () => {
+    }
+  }) => /* @__PURE__ */ t(
+    Ve,
+    {
+      maxHeight: o,
+      onClick: f,
+      className: `itemless-banner ${l}`,
+      children: /* @__PURE__ */ t("img", { src: n, alt: `itemless-banner__${e}` })
+    }
+  )
+);
+pe.propTypes = {
+  sectionName: a.string,
+  imageUrl: a.string,
+  maxHeight: a.string,
+  className: a.string,
+  handleClick: a.func
 };
-const Ae = Ce(ge), tr = V(
+const Xe = Ne(ue), ar = L(
   ({
     sellerType: e = "Shop",
     items: n = [],
     title: o,
     icon: l,
-    isLoading: v,
+    isLoading: f,
     onSelectCard: u = () => {
     },
-    onSelectShop: f = () => {
+    onSelectShop: p = () => {
     },
     getImage: s = () => {
     },
     campaignSingleText: d,
     upcomingCampaignText: g,
-    salesCampaignTypes: C = [],
+    salesCampaignTypes: T = [],
     startsInPrefixTextPlural: b,
     startsinSuffixTextPlural: $,
     startsInPrefixTextSingular: _,
     startsinSuffixTextSingular: S,
-    endsInPrefixTextPlural: p,
+    endsInPrefixTextPlural: x,
     endsinSuffixTextPlural: N,
     endsInPrefixTextSingular: y,
     endsinSuffixTextSingular: k,
-    numOfSlides: x = 2,
+    numOfSlides: w = 2,
     numOfSlidesForMobile: I = 1,
-    showNavigation: L = !0,
-    numberOfListingsTextSingular: U,
-    numberOfListingsTextPlural: R
-  }, a) => {
-    const m = ce(), E = Ne(() => n == null ? void 0 : n.map((r, X) => /* @__PURE__ */ t(
-      Ae,
-      {
-        className: "campaign-item",
-        coverPhoto: s(
-          r == null ? void 0 : r.coverPhoto,
-          (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.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,
-        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: () => u(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
-        onSelectShop: () => f(r == null ? void 0 : r.shopUuid),
-        campaignSingleText: d,
-        upcomingCampaignText: g,
-        upcoming: r == null ? void 0 : r.upcoming,
-        salesCampaignTypes: C,
-        startsInPrefixTextPlural: b,
-        startsinSuffixTextPlural: $,
-        startsInPrefixTextSingular: _,
-        startsinSuffixTextSingular: S,
-        endsInPrefixTextPlural: p,
-        endsinSuffixTextPlural: N,
-        endsInPrefixTextSingular: y,
-        endsinSuffixTextSingular: k,
-        themeData: r == null ? void 0 : r.themeData,
-        numberOfListings: r == null ? void 0 : r.numberOfListings,
-        numberOfListingsTextSingular: U,
-        numberOfListingsTextPlural: R
-      },
-      `campaign__item__${X}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
-    )), [n]);
+    showNavigation: R = !0,
+    numberOfListingsTextSingular: j,
+    numberOfListingsTextPlural: E,
+    itemlessImageUrl: i,
+    itemlessLink: h,
+    handleItemlessLink: B = () => {
+    }
+  }, J) => {
+    const W = me(), z = ke(() => {
+      let F = n == null ? void 0 : n.map((r, Y) => /* @__PURE__ */ t(
+        Xe,
+        {
+          className: "campaign-item",
+          coverPhoto: s(
+            r == null ? void 0 : r.coverPhoto,
+            (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.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,
+          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: () => u(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+          onSelectShop: () => p(r == null ? void 0 : r.shopUuid),
+          campaignSingleText: d,
+          upcomingCampaignText: g,
+          upcoming: r == null ? void 0 : r.upcoming,
+          salesCampaignTypes: T,
+          startsInPrefixTextPlural: b,
+          startsinSuffixTextPlural: $,
+          startsInPrefixTextSingular: _,
+          startsinSuffixTextSingular: S,
+          endsInPrefixTextPlural: x,
+          endsinSuffixTextPlural: N,
+          endsInPrefixTextSingular: y,
+          endsinSuffixTextSingular: k,
+          themeData: r == null ? void 0 : r.themeData,
+          numberOfListings: r == null ? void 0 : r.numberOfListings,
+          numberOfListingsTextSingular: j,
+          numberOfListingsTextPlural: E
+        },
+        `campaign__item__${Y}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+      ));
+      return (n == null ? void 0 : n.length) < 2 && !W ? [
+        ...F,
+        /* @__PURE__ */ t(
+          pe,
+          {
+            imageUrl: i,
+            className: "campaign-item",
+            handleClick: B
+          }
+        )
+      ] : F;
+    }, [n]);
     return /* @__PURE__ */ t(
-      Be,
+      We,
       {
-        isLoading: v,
-        itemsCount: m ? 1 : 2,
+        isLoading: f,
+        itemsCount: W ? 1 : 2,
         keyPrefix: "sales-camp",
         children: /* @__PURE__ */ t(
-          me,
+          fe,
           {
             icon: l,
             title: o,
-            numOfSlides: x,
+            numOfSlides: w,
             numOfSlidesForMobile: I,
-            showNavigation: L,
-            children: E
+            showNavigation: R,
+            children: z
           }
         )
       }
@@ -880,5 +939,5 @@ const Ae = Ce(ge), tr = V(
   }
 );
 export {
-  tr as default
+  ar as default
 };