@lanaco/lnc-react-ui 4.0.99 → 4.0.100

package/dist/SalesCampaignsSection.js

@@ -1,40 +1,16 @@
-import { jsx as t, jsxs as w, Fragment as G } from "react/jsx-runtime";
-import { useState as B, useEffect as U, useMemo as te, createElement as ce, forwardRef as V, useRef as Y, useImperativeHandle as de, Suspense as he, memo as ge } from "react";
-import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { z as fe, A as ue, B as pe, a as O, l as J, o as oe } from "./utils-WHYrEnYF.js";
-import { M as E } from "./consts-BuFChS64.js";
-import { m as me } from "./motion-Ckekul_K.js";
-import { P as i } from "./index-S5Cd7WrG.js";
-import we from "./Icon.js";
-import be from "./Badge.js";
-import { u as Z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { u as ie } from "./useDetectMobile-Bkvj0VMa.js";
-import ve from "./FlexBox.js";
-import { I as K } from "./index-Dhf4jQmS.js";
-import j from "./IconButton.js";
-var xe = function(e) {
-  return e === void 0 && (e = { laptopL: 1440, laptop: 1024, tablet: 768 }), function() {
-    var o = B(fe ? window.innerWidth : 0), a = o[0], s = o[1];
-    U(function() {
-      var n = function() {
-        s(window.innerWidth);
-      };
-      return n(), ue(window, "resize", n), function() {
-        pe(window, "resize", n);
-      };
-    });
-    var u = te(function() {
-      return Object.entries(e).sort(function(n, h) {
-        return n[1] >= h[1] ? 1 : -1;
-      });
-    }, [e]), l = u.reduce(function(n, h) {
-      var v = h[0], p = h[1];
-      return a >= p ? v : n;
-    }, u[0][0]);
-    return l;
-  };
-};
-const ye = b.div`
+import { jsx as a, jsxs as f, Fragment as ae } from "react/jsx-runtime";
+import { createElement as te, forwardRef as P, Suspense as oe, useState as E, useEffect as ne, memo as ie, useMemo as se } from "react";
+import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as N, o as G, k as O } from "./utils-BXCGNjIy.js";
+import { M as k } from "./consts-BuFChS64.js";
+import { m as Z } from "./motion-Ckekul_K.js";
+import { P as n } from "./index-S5Cd7WrG.js";
+import q from "./Icon.js";
+import le from "./Badge.js";
+import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import L from "./IconButton.js";
+import { u as H } from "./useDetectMobile-Bkvj0VMa.js";
+const ce = d.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -42,15 +18,15 @@ const ye = b.div`
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${k + "px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
     border: none;
     border-radius: 0;
   }
-`, $e = b.div`
-  border-radius: ${(e) => O(e.theme, "edged")};
+`, de = d.div`
+  border-radius: ${(e) => N(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -73,12 +49,12 @@ const ye = b.div`
     }
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${k + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, De = b.div`
+`, me = d.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -127,7 +103,7 @@ const ye = b.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${k + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -141,7 +117,7 @@ const ye = b.div`
       gap: 0.25rem;
     }
   }
-`, ke = {
+`, ge = {
   "#ADE3EB": "#76D0DB",
   "#DDD6FE": "#C4B5FD",
   "#FDE68A": "#FCD34D",
@@ -153,13 +129,13 @@ const ye = b.div`
   "#E7E5E4": "#D6D3D1",
   "#FED7AA": "#FDBA74",
   default: "#C4C8CF"
-}, Q = (e = !1, o = !1, a = !1) => `
+}, W = (e = !1, t = !1, i = !1) => `
     display: flex;
-    ${o ? "flex-wrap: wrap;" : ""}
-    ${o ? "" : "flex-wrap: nowrap;"}
+    ${t ? "flex-wrap: wrap;" : ""}
+    ${t ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
-    ${a ? "justify-content: center;" : ""}
-  `, Se = b(me.div)`
+    ${i ? "justify-content: center;" : ""}
+  `, he = d(Z.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -176,22 +152,22 @@ const ye = b.div`
     text-decoration: none;
   }
 
-  ${Q(!0)}
+  ${W(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: ${(e) => e.isActive === !1 ? "var(--gray-900)" : "var(--primary-600)"};
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${(e) => O(e.theme, "slight")};
+  border-radius: ${(e) => N(e.theme, "slight")};
   transition: all 0.25s ease;
 
   & .logo-wrapper {
-    ${Q(!0, !1, !0)}
+    ${W(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
     border: 3px solid
-      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : ke[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
+      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : ge[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -233,15 +209,15 @@ const ye = b.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, Ce = b.div`
+`, fe = d.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Ne = (e) => `var(--${e}-700)`, Te = b.div`
-  border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
-  background-color: ${(e) => Ne(e == null ? void 0 : e.color)};
+`, ue = (e) => `var(--${e}-700)`, pe = d.div`
+  border-radius: ${(e) => N(e.theme, e.borderRadius || "slight")};
+  background-color: ${(e) => ue(e == null ? void 0 : e.color)};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
@@ -255,70 +231,59 @@ const ye = b.div`
   & i {
     font-size: 0.813rem;
   }
-`, ne = (e) => {
+`, J = (e) => {
   const {
-    uuid: o,
-    hasPermission: a = !0,
-    isUser: s,
+    uuid: t,
+    hasPermission: i = !0,
+    isUser: h,
     image: u,
-    name: l,
-    notifications: n = 0,
-    color: h = "primary",
-    size: v = "large",
-    style: p,
-    disabled: y,
-    onClick: c = () => {
+    name: m,
+    notifications: v = 0,
+    color: c = "primary",
+    size: w = "large",
+    style: s,
+    disabled: C,
+    onClick: l = () => {
     },
-    isActive: $,
-    className: m,
+    isActive: y,
+    className: p,
     // new
     themeData: x
-  } = e, D = {
-    theme: Z(),
-    color: h,
-    size: v,
-    style: p,
-    disabled: y
+  } = e, $ = {
+    theme: A(),
+    color: c,
+    size: w,
+    style: s,
+    disabled: C
   };
-  return /* @__PURE__ */ ce(
-    Se,
+  return /* @__PURE__ */ te(
+    he,
     {
-      onClick: (k) => {
-        k.stopPropagation(), a === !0 && (c == null || c());
-      },
-      ...D,
-      key: l,
-      animate: {
-        y: 0,
-        opacity: 1
+      onClick: (_) => {
+        _.stopPropagation(), i === !0 && (l == null || l());
       },
-      className: `profile-item ${m}`,
-      exit: {
-        opacity: 0
-      },
-      hasPermission: a,
-      initial: {
-        y: -10,
-        opacity: 0
-      },
-      isActive: $,
+      ...$,
+      key: m,
+      className: `profile-item ${p}`,
+      hasPermission: i,
+      isActive: y,
       themeColor: (x == null ? void 0 : x.code) || "transparent"
     },
-    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: u }),
-    /* @__PURE__ */ t("div", { className: "name", children: l }),
-    n > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(be, { className: "badge", color: "danger", size: "small", children: n > 99 ? "99+" : n }) })
+    /* @__PURE__ */ a("div", { className: "logo-wrapper", children: u }),
+    /* @__PURE__ */ a("div", { className: "name", children: m }),
+    v > 0 && /* @__PURE__ */ a("div", { className: "notifications-number", children: /* @__PURE__ */ a(le, { className: "badge", color: "danger", size: "small", children: v > 99 ? "99+" : v }) })
   );
 };
-ne.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([
+J.propTypes = {
+  id: n.any,
+  isUserProfile: n.bool,
+  themeColor: n.string,
+  image: n.any,
+  name: n.string,
+  notifications: n.number,
+  style: n.object,
+  className: n.string,
+  color: n.oneOf([
     "primary",
     "secondary",
     "success",
@@ -327,91 +292,91 @@ ne.propTypes = {
     "information",
     "neutral"
   ]),
-  size: i.oneOf(["large"]),
-  onSelect: i.func,
-  hasPermission: i.bool
+  size: n.oneOf(["large"]),
+  onSelect: n.func,
+  hasPermission: n.bool
 };
-const ee = (e, o) => {
-  if (!e || !o) return null;
-  let a = Math.floor((e == null ? void 0 : e.getTime()) - (o == null ? void 0 : o.getTime())), s = 1e3 * 60 * 60 * 24;
-  return Math.ceil(a / s);
-}, ae = V((e, o) => {
-  const a = Z(), {
-    uuid: s,
+const V = (e, t) => {
+  if (!e || !t) return null;
+  let i = Math.floor((e == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime())), h = 1e3 * 60 * 60 * 24;
+  return Math.ceil(i / h);
+}, K = P((e, t) => {
+  const i = A(), {
+    uuid: h,
     shopUuid: u,
-    title: l = "",
-    description: n,
-    badges: h,
-    coverPhoto: v,
-    onSelect: p,
-    status: y,
-    startDate: c,
-    endDate: $,
-    salesPackages: m,
+    title: m = "",
+    description: v,
+    badges: c,
+    coverPhoto: w,
+    onSelect: s,
+    status: C,
+    startDate: l,
+    endDate: y,
+    salesPackages: p,
     shopName: x,
-    shopImage: g,
-    className: D,
-    onSelectCard: k = () => {
+    shopImage: b,
+    className: $,
+    onSelectCard: _ = () => {
     },
-    onSelectShop: I = () => {
+    onSelectShop: S = () => {
     },
-    campaignSingleText: P,
-    salesCampaignTypes: S = [],
-    startsInPrefixTextPlural: d,
-    startsinSuffixTextPlural: T,
-    startsInPrefixTextSingular: C,
-    startsinSuffixTextSingular: r,
-    themeData: _,
-    ...X
-  } = e, M = c ? new Date(c) <= /* @__PURE__ */ new Date() : !1;
-  ee(
-    $ ? new Date($) : null,
-    c ? new Date(c) : null
+    campaignSingleText: D,
+    salesCampaignTypes: r = [],
+    startsInPrefixTextPlural: T,
+    startsinSuffixTextPlural: B,
+    startsInPrefixTextSingular: M,
+    startsinSuffixTextSingular: o,
+    themeData: g,
+    ...Y
+  } = e, ee = l ? new Date(l) <= /* @__PURE__ */ new Date() : !1;
+  V(
+    y ? new Date(y) : null,
+    l ? new Date(l) : null
   );
-  const f = ee(
-    c ? new Date(c) : null,
+  const I = V(
+    l ? new Date(l) : null,
     /* @__PURE__ */ new Date()
   );
-  return /* @__PURE__ */ w(
-    ye,
+  return /* @__PURE__ */ f(
+    ce,
     {
-      ref: o,
-      theme: a,
-      className: D,
-      onClick: k,
-      ...X,
+      ref: t,
+      theme: i,
+      className: $,
+      onClick: _,
+      ...Y,
       children: [
-        /* @__PURE__ */ w($e, { theme: a, onClick: () => p == null ? void 0 : p(), children: [
-          /* @__PURE__ */ t("img", { src: v }),
-          /* @__PURE__ */ t(Ce, { children: m == null ? void 0 : m.map((N, z) => {
-            var F, R;
-            return /* @__PURE__ */ t(
-              Te,
+        /* @__PURE__ */ f(de, { theme: i, onClick: () => s == null ? void 0 : s(), children: [
+          /* @__PURE__ */ a("img", { src: w }),
+          /* @__PURE__ */ a(fe, { children: p == null ? void 0 : p.map((U, re) => {
+            var R, j;
+            return /* @__PURE__ */ a(
+              pe,
               {
-                color: (F = S == null ? void 0 : S.find((L) => L.value === N)) == null ? void 0 : F.color,
-                theme: a,
-                children: /* @__PURE__ */ t(
-                  we,
+                color: (R = r == null ? void 0 : r.find((z) => z.value === U)) == null ? void 0 : R.color,
+                theme: i,
+                children: /* @__PURE__ */ a(
+                  q,
                   {
-                    icon: (R = S == null ? void 0 : S.find((L) => L.value === N)) == null ? void 0 : R.icon
+                    icon: (j = r == null ? void 0 : r.find((z) => z.value === U)) == null ? void 0 : j.icon
                   }
                 )
               },
-              `package__${z}`
+              `package__${re}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ w(De, { theme: a, children: [
-          /* @__PURE__ */ w("div", { className: "text-block-wrapper", children: [
-            /* @__PURE__ */ w("div", { className: "title-block-wrapper", children: [
-              /* @__PURE__ */ t("div", { className: "campaign-title", children: P }),
-              /* @__PURE__ */ t("div", { className: "campaign-title-text", children: l }),
-              /* @__PURE__ */ t("div", { className: "timestamp-text", children: M ? "" : f === 1 ? `${C} ${f} ${r}` : `${d} ${f} ${T}` })
+        /* @__PURE__ */ f(me, { theme: i, children: [
+          /* @__PURE__ */ f("div", { className: "text-block-wrapper", children: [
+            /* @__PURE__ */ f("div", { className: "title-block-wrapper", children: [
+              /* @__PURE__ */ a("div", { className: "campaign-title", children: D }),
+              /* @__PURE__ */ a("div", { className: "campaign-title-text", children: m }),
+              /* @__PURE__ */ a("div", { className: "timestamp-text", children: ee ? "" : I === 1 ? `${M} ${I} ${o}` : `${T} ${I} ${B}` })
             ] }),
-            /* @__PURE__ */ t("div", { children: n })
+            /* @__PURE__ */ a("div", { children: v })
           ] }),
-          /* @__PURE__ */ t(
-            ne,
+          /* @__PURE__ */ a(
+            J,
             {
               hasPermission: !0,
               image: (
@@ -421,19 +386,19 @@ const ee = (e, o) => {
                 //   size={ImageSize.SMALL}
                 //   className={`${shopImage ? "" : "no-image"}`}
                 // />
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ a(
                   "img",
                   {
-                    src: g,
-                    className: `${g ? "" : "no-image"}`
+                    src: b,
+                    className: `${b ? "" : "no-image"}`
                   }
                 )
               ),
-              themeData: _,
+              themeData: g,
               isActive: !0,
               isUser: !1,
               name: x,
-              onClick: () => I(u)
+              onClick: () => S(u)
             }
           )
         ] })
@@ -441,363 +406,13 @@ const ee = (e, o) => {
     }
   );
 });
-ae.propTypes = {
-  title: i.oneOfType([i.string, i.element]),
-  numberOfListings: i.number,
-  dropdown: i.any,
-  color: i.string
-};
-const Ae = b.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  position: relative;
-
-  & .hover-left-arrow {
-    display: none;
-    position: absolute;
-    top: 50%;
-    left: 1.5rem;
-    z-index: ${(e) => J(e.arrowsZIndex) ? e.arrowsZIndex : 20};
-  }
-
-  & .hover-right-arrow {
-    display: none;
-    position: absolute;
-    top: 50%;
-    right: 1.5rem;
-    z-index: ${(e) => J(e.arrowsZIndex) ? e.arrowsZIndex : 20};
-  }
-
-  & .clip-loader-wrapper {
-    margin: auto;
-    padding: 0 1rem;
-  }
-
-  @media (max-width: ${E + "px"}) {
-    gap: 1.25rem;
-    & .hover-left-arrow,
-    .hover-right-arrow {
-      display: flex;
-    }
-  }
-`, _e = b.div`
-  display: flex;
-  align-items: center;
-
-  justify-content: space-between;
-  gap: 1rem;
-
-  font-weight: 600;
-  font-size: 1.5rem;
-
-  & .btns-group {
-    display: flex;
-    gap: 0.375rem;
-  }
-
-  @media (max-width: ${E + "px"}) {
-    padding: 0 1rem;
-    & .btns-group {
-      display: none;
-    }
-  }
-`, Fe = b.div`
-  position: relative;
-  padding: ${(e) => e.padding};
-
-  & button {
-    white-space: nowrap;
-  }
-
-  & .badge-button {
-    ${(e) => e.showTimesBtn === !0 && "padding-left: 0.5rem; padding-right: 0.5rem;"}
-  }
-
-  & .gradient {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 4;
-    transition: ${"0.3s"};
-    right: ${(e) => e.noArrows !== !0 ? "6rem" : "0"};
-    width: 2rem;
-    background: #fff;
-    height: 100%;
-    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
-    mask-image: linear-gradient(to left, black 10%, transparent 50%);
-  }
-
-  & .scrollable-container {
-    scroll-behavior: smooth;
-    overflow: hidden;
-    -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 */
-    }
-  }
-  & .scroll-arrow-right,
-  & .scroll-arrow-left {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    visibility: ${(e) => e.arrowsVisibleOnHover === !1 && e.hasOverflow ? "visible" : "hidden"};
-    z-index: 4;
-    transition: ${"0.3s"};
-  }
-  & .scroll-arrow-right {
-    ${(e) => e.rightAlignArrows === !0 ? "right: 0" : "right: 0.7rem"};
-  }
-  & .scroll-arrow-left {
-    ${(e) => e.rightAlignArrows === !0 ? "right: 2.625rem" : "left: 0.7rem"};
-  }
-  & .scrollable-container:hover > .scroll-arrow-left,
-  & .scrollable-container:hover > .scroll-arrow-right {
-    visibility: ${(e) => e.hasOverflow ? "visible" : "hidden"};
-  }
-
-  @media (max-width: ${E + "px"}) {
-    & .scroll-arrow-left,
-    & .scroll-arrow-right {
-      display: none;
-    }
-
-    & .gradient {
-      right: 0;
-    }
-  }
-`, Be = (e, o) => {
-  const [a, s] = B({
-    trigger: null,
-    direction: null
-  }), u = (l) => l.touches || l.originalEvent.touches;
-  return U(() => {
-    const l = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
-    let n = null, h = null;
-    if (l) {
-      const v = (y) => {
-        const c = u(y)[0];
-        n = c.clientX, h = c.clientY;
-      }, p = (y) => {
-        if (!n || !h)
-          return;
-        const c = y.touches[0].clientX, $ = y.touches[0].clientY, m = n - c, x = h - $;
-        Math.abs(m) > Math.abs(x) ? m > 0 ? s((g) => ({
-          trigger: !g.trigger,
-          direction: W.LEFT
-        })) : s((g) => ({
-          trigger: !g.trigger,
-          direction: W.RIGHT
-        })) : x > 0 ? s((g) => ({
-          trigger: !g.trigger,
-          direction: W.UP
-        })) : s((g) => ({
-          trigger: !g.trigger,
-          direction: W.DOWN
-        })), n = null, h = null;
-      };
-      return l.addEventListener("touchstart", v), l.addEventListener("touchmove", p), () => {
-        l.removeEventListener("touchstart", v), l.addEventListener("touchmove", p);
-      };
-    }
-  }, []), a;
-}, W = {
-  UP: "up",
-  DOWN: "down",
-  RIGHT: "right",
-  LEFT: "left"
-}, se = V(
-  ({
-    title: e,
-    columnGap: o = "2rem",
-    rowGap: a = "1.25rem",
-    scrollBySize: s = 300,
-    wrapForMobile: u = !1,
-    wrap: l = !1,
-    children: n,
-    methodsRef: h,
-    arrowsVisibleOnHover: v = !0,
-    rightAlignArrows: p = !1,
-    padding: y = "0",
-    showTimesBtn: c,
-    noArrows: $,
-    onShowEnd: m,
-    arrowsZIndex: x,
-    showArrows: g,
-    elementsCount: D,
-    minElementsCount: k = 2,
-    ...I
-  }, P) => {
-    const S = ie(), d = Z(), [T, C] = B(
-      D < k
-    ), [r, _] = B(!1), [X, M] = B(!0), f = Y(), N = Be(f);
-    U(() => {
-      (N == null ? void 0 : N.direction) === W.RIGHT && r !== !0 ? F() : (N == null ? void 0 : N.direction) === W.LEFT && T !== !0 && z();
-    }, [N]);
-    const z = () => {
-      var A;
-      (A = f.current) == null || A.scrollBy(s, 0);
-    }, F = () => {
-      var A;
-      (A = f.current) == null || A.scrollBy(-s, 0);
-    }, [R, L] = B(!1);
-    U(() => {
-      var A, q;
-      L(
-        ((A = f == null ? void 0 : f.current) == null ? void 0 : A.scrollWidth) > ((q = f == null ? void 0 : f.current) == null ? void 0 : q.clientWidth)
-      );
-    }, [n]), de(h, () => ({
-      scrollToEnd() {
-        le();
-      },
-      scrollLeft() {
-        F();
-      },
-      scrollRight() {
-        z();
-      }
-    }));
-    const le = () => {
-      f.current.scrollLeft = f.current.scrollWidth;
-    };
-    return /* @__PURE__ */ w(Ae, { arrowsZIndex: x, children: [
-      /* @__PURE__ */ w(_e, { children: [
-        /* @__PURE__ */ t("div", { children: e }),
-        g && /* @__PURE__ */ w("div", { className: "btns-group", children: [
-          /* @__PURE__ */ t(
-            j,
-            {
-              borderRadius: "curved",
-              btnType: "tinted",
-              className: "scroll-arrow-left",
-              color: "neutral",
-              disabled: r,
-              icon: "angle-left",
-              onClick: F
-            }
-          ),
-          /* @__PURE__ */ t(
-            j,
-            {
-              borderRadius: "curved",
-              btnType: "tinted",
-              className: "scroll-arrow-right",
-              color: "neutral",
-              disabled: T,
-              icon: "angle-right",
-              onClick: z
-            }
-          )
-        ] })
-      ] }),
-      g && /* @__PURE__ */ w(G, { children: [
-        /* @__PURE__ */ t(
-          j,
-          {
-            borderRadius: "curved",
-            btnType: "tinted",
-            className: "hover-left-arrow scroll-arrow-left",
-            color: "neutral",
-            disabled: r,
-            icon: "angle-left",
-            onClick: F
-          }
-        ),
-        /* @__PURE__ */ t(
-          j,
-          {
-            borderRadius: "curved",
-            btnType: "tinted",
-            className: "hover-right-arrow scroll-arrow-right",
-            color: "neutral",
-            disabled: T,
-            icon: "angle-right",
-            onClick: z
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t(
-        Fe,
-        {
-          ref: P,
-          arrowsVisibleOnHover: v,
-          hasOverflow: R,
-          noArrows: $,
-          padding: y,
-          rightAlignArrows: p,
-          showTimesBtn: c,
-          theme: d,
-          ...I,
-          children: /* @__PURE__ */ w(
-            ve,
-            {
-              ref: f,
-              className: "scrollable-container",
-              columnGap: o,
-              rowGap: a,
-              wrap: l || u && S ? "Wrap" : "NoWrap",
-              children: [
-                /* @__PURE__ */ t(
-                  K,
-                  {
-                    isHorizontal: !0,
-                    onIsNotVisible: () => {
-                      r === !0 && _(!1);
-                    },
-                    onIsVisible: () => {
-                      r === !1 && _(!0);
-                    }
-                  }
-                ),
-                n,
-                /* @__PURE__ */ t(
-                  K,
-                  {
-                    isHorizontal: !0,
-                    onIsNotVisible: () => {
-                      T === !0 && C(!1), M(!0);
-                    },
-                    onIsVisible: () => {
-                      T === !1 && C(!0), M(!1), m == null || m();
-                    }
-                  }
-                ),
-                X && R && /* @__PURE__ */ t("div", { className: "gradient" })
-              ]
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
-se.propTypes = {
-  title: i.string,
-  rowGap: i.string,
-  columnGap: i.string,
-  scrollBySize: i.number,
-  wrapForMobile: i.bool,
-  wrap: i.bool,
-  methodsRef: i.any,
-  arrowsVisibleOnHover: i.bool,
-  rightAlignArrows: i.bool,
-  padding: i.string
+K.propTypes = {
+  title: n.oneOfType([n.string, n.element]),
+  numberOfListings: n.number,
+  dropdown: n.any,
+  color: n.string
 };
-const Ee = b.div`
+d.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -828,26 +443,27 @@ const Ee = b.div`
     }
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${k + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
       margin-right: 0;
     }
   }
-`, H = b.div`
+`;
+const F = d.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${oe("-90deg")}
-`, Ie = b.div`
+  ${G("-90deg")}
+`, xe = d.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%"};
-`, re = b.div`
-  border-radius: ${(e) => O(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, X = d.div`
+  border-radius: ${(e) => N(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"};
@@ -856,10 +472,10 @@ const Ee = b.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${oe()}
-`, Pe = b.div`
+  ${G()}
+`, ve = d.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => O(e.theme, "edged")};
+  border-radius: ${(e) => N(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);
 
@@ -885,148 +501,288 @@ const Ee = b.div`
     align-items: center;
     gap: 0.5rem;
   }
-`, ze = V(({}, e) => {
-  const o = Z();
-  return /* @__PURE__ */ w(Pe, { ref: e, theme: o, children: [
-    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
-      re,
+
+  @media (max-width: ${k + "px"}) {
+    flex-direction: column;
+
+    & .campaign__user {
+      margin-top: 1rem;
+    }
+  }
+`, be = d.div`
+  display: flex;
+  gap: 1.5rem;
+`, we = P(({}, e) => {
+  const t = A();
+  return /* @__PURE__ */ f(ve, { ref: e, theme: t, children: [
+    /* @__PURE__ */ a("div", { className: "campaign__left-section", children: /* @__PURE__ */ a(
+      X,
       {
-        theme: o,
+        theme: t,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
-    /* @__PURE__ */ w("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ w(Ie, { theme: o, children: [
-        /* @__PURE__ */ t(H, { heightCoeff: 0.75, theme: o, width: "35%" }),
-        /* @__PURE__ */ t(H, { heightCoeff: 1.25, theme: o }),
-        /* @__PURE__ */ t(H, { heightCoeff: 3, theme: o })
+    /* @__PURE__ */ f("div", { className: "campaign__right-section", children: [
+      /* @__PURE__ */ f(xe, { theme: t, children: [
+        /* @__PURE__ */ a(F, { heightCoeff: 0.75, theme: t, width: "35%" }),
+        /* @__PURE__ */ a(F, { heightCoeff: 1.25, theme: t }),
+        /* @__PURE__ */ a(F, { heightCoeff: 3, theme: t })
       ] }),
-      /* @__PURE__ */ w("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ t(
-          re,
+      /* @__PURE__ */ f("div", { className: "campaign__user", children: [
+        /* @__PURE__ */ a(
+          X,
           {
-            theme: o,
+            theme: t,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(H, { theme: o, width: "75%" })
+        /* @__PURE__ */ a(F, { theme: t, width: "75%" })
       ] })
     ] })
   ] });
-}), We = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (a, s) => /* @__PURE__ */ t(
-  ze,
+}), ye = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ a(be, { children: Array.from({ length: e }, (i, h) => /* @__PURE__ */ a(
+  we,
   {},
-  `${o}-skeleton-campaign-card-${s}`
-)) }), Re = ({
+  `${t}-skeleton-campaign-card-${h}`
+)) }), $e = ({
   children: e,
-  fallbackComponent: o = /* @__PURE__ */ t(G, {}),
-  isLoading: a = !1,
-  itemsCount: s = 5,
+  fallbackComponent: t = /* @__PURE__ */ a(ae, {}),
+  isLoading: i = !1,
+  itemsCount: h = 5,
   keyPrefix: u
-}) => /* @__PURE__ */ t(he, { fallback: o, children: a === !0 ? /* @__PURE__ */ t(We, { itemsCount: s, keyPrefix: u }) : e }), Le = xe(), Ue = ge(ae), rr = V(
+}) => /* @__PURE__ */ a(oe, { fallback: t, children: i === !0 ? /* @__PURE__ */ a(ye, { itemsCount: h, keyPrefix: u }) : e }), _e = d.div`
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  align-self: stretch;
+  position: relative;
+
+  & .scrollable-section__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    & .scrollable-section__title {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      & .title__icon {
+      }
+
+      & .title__text {
+        color: var(--gray-950, #14161a);
+        font-size: 1.5rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2rem;
+      }
+    }
+  }
+
+  & .scrollable-section__navigation {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+`, Ce = d(Z.div)`
+  display: grid;
+  grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
+  gap: 1.5rem;
+
+  @media (max-width: ${k + "px"}) {
+    grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
+  }
+`, Q = P(
+  ({
+    icon: e,
+    title: t,
+    numOfSlides: i = 2,
+    numOfSlidesForMobile: h = 1,
+    showNavigation: u = !0,
+    children: m
+  }, v) => {
+    const [c, w] = E(0), [s, C] = E(1), [l, y] = E(null), [p, x] = E(null), b = H(), $ = 50, _ = (m == null ? void 0 : m.length) ?? 1;
+    ne(() => {
+      const o = () => {
+        C(b ? h : i);
+      };
+      return window.addEventListener("resize", o), o(), () => window.removeEventListener("resize", o);
+    }, []);
+    const S = m == null ? void 0 : m.slice(c, c + s), D = (o) => {
+      var g;
+      (g = o == null ? void 0 : o.target) == null || g.blur(), c + s < _ && w(c + s);
+    }, r = (o) => {
+      var g;
+      (g = o == null ? void 0 : o.target) == null || g.blur(), c - s >= 0 && w(c - s);
+    };
+    return /* @__PURE__ */ f(
+      _e,
+      {
+        ref: v,
+        ...b ? { onTouchStart: (o) => {
+          var g;
+          x(null), y((g = o == null ? void 0 : o.targetTouches["0"]) == null ? void 0 : g.clientX);
+        }, onTouchMove: (o) => {
+          var g;
+          x((g = o == null ? void 0 : o.targetTouches["0"]) == null ? void 0 : g.clientX);
+        }, onTouchEnd: () => {
+          if (!l || !p) return;
+          const o = l - p;
+          o > $ && D(), o < -$ && r();
+        } } : {},
+        children: [
+          /* @__PURE__ */ a("div", { className: "scrollable-section__header", children: /* @__PURE__ */ f("div", { className: "scrollable-section__title", children: [
+            O(e) && /* @__PURE__ */ a(
+              q,
+              {
+                icon: e,
+                color: "primary",
+                sizeInUnits: "1.5rem",
+                className: "title__icon"
+              }
+            ),
+            O(t) && /* @__PURE__ */ a("div", { className: "title__text", children: t })
+          ] }) }),
+          /* @__PURE__ */ a(
+            Ce,
+            {
+              numOfColumns: i,
+              numOfColumnsForMobile: h,
+              animate: {
+                x: 0,
+                opacity: 1
+              },
+              initial: {
+                x: 10,
+                opacity: 0
+              },
+              children: S
+            },
+            `scrollable-section__content-${c}`
+          ),
+          u && _ > s && !b && /* @__PURE__ */ f("div", { className: "scrollable-section__navigation", children: [
+            /* @__PURE__ */ a(
+              L,
+              {
+                icon: "angle-left",
+                borderRadius: "curved",
+                btnType: "tinted",
+                color: "neutral",
+                className: "navigation__arrow",
+                disabled: c === 0,
+                onClick: r
+              }
+            ),
+            /* @__PURE__ */ a(
+              L,
+              {
+                icon: "angle-right",
+                borderRadius: "curved",
+                btnType: "tinted",
+                color: "neutral",
+                className: "navigation__arrow",
+                disabled: c + s >= _,
+                onClick: D
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Q.propTypes = {
+  icon: n.string,
+  title: n.string,
+  numOfSlides: n.number,
+  numOfSlidesForMobile: n.number,
+  showNavigation: n.bool
+};
+const De = ie(K), Ue = P(
   ({
     sellerType: e = "Shop",
-    items: o = [],
-    title: a,
-    isLoading: s,
-    onSelectCard: u = () => {
+    items: t = [],
+    title: i,
+    icon: h,
+    isLoading: u,
+    onSelectCard: m = () => {
     },
-    onSelectShop: l = () => {
+    onSelectShop: v = () => {
     },
-    getImage: n = () => {
+    getImage: c = () => {
     },
-    // new
-    customScrollSize: h,
-    campaignSingleText: v,
-    salesCampaignTypes: p = [],
-    startsInPrefixTextPlural: y,
-    startsinSuffixTextPlural: c,
-    startsInPrefixTextSingular: $,
-    startsinSuffixTextSingular: m
-  }, x) => {
-    const g = Y(), D = Y(), k = Le(), I = ie(), [P, S] = B(0), d = te(() => {
-      var C;
-      return (C = o == null ? void 0 : o.slice(0, 6)) == null ? void 0 : C.map((r, _) => /* @__PURE__ */ t(
-        Ue,
-        {
-          className: "campaign-item",
-          ref: _ === 0 ? D : null,
-          coverPhoto: n(
-            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,
-          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: () => l(r == null ? void 0 : r.shopUuid),
-          campaignSingleText: v,
-          salesCampaignTypes: p,
-          startsInPrefixTextPlural: y,
-          startsinSuffixTextPlural: c,
-          startsInPrefixTextSingular: $,
-          startsinSuffixTextSingular: m,
-          themeData: r == null ? void 0 : r.themeData
-        },
-        `campaign__item__${_}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}__${k}`
-      ));
-    }, [k, o]);
-    U(() => {
-      var C;
-      S(h ?? ((C = D == null ? void 0 : D.current) == null ? void 0 : C.offsetWidth));
-    }, [d, k]);
-    const T = I ? (d == null ? void 0 : d.length) > 1 : (d == null ? void 0 : d.length) > 2;
-    return /* @__PURE__ */ t(G, { children: (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t(
-      Ee,
+    campaignSingleText: w,
+    salesCampaignTypes: s = [],
+    startsInPrefixTextPlural: C,
+    startsinSuffixTextPlural: l,
+    startsInPrefixTextSingular: y,
+    startsinSuffixTextSingular: p,
+    numOfSlides: x = 2,
+    numOfSlidesForMobile: b = 1,
+    showNavigation: $ = !0
+  }, _) => {
+    const S = H(), D = se(() => t == null ? void 0 : t.map((r, T) => /* @__PURE__ */ a(
+      De,
+      {
+        className: "campaign-item",
+        coverPhoto: c(
+          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,
+        startDate: r == null ? void 0 : r.startDate,
+        title: r == null ? void 0 : r.name,
+        uuid: r == null ? void 0 : r.campaignUuid,
+        onSelectCard: () => m(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+        onSelectShop: () => v(r == null ? void 0 : r.shopUuid),
+        campaignSingleText: w,
+        salesCampaignTypes: s,
+        startsInPrefixTextPlural: C,
+        startsinSuffixTextPlural: l,
+        startsInPrefixTextSingular: y,
+        startsinSuffixTextSingular: p,
+        themeData: r == null ? void 0 : r.themeData
+      },
+      `campaign__item__${T}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+    )), [t]);
+    return /* @__PURE__ */ a(
+      $e,
       {
-        ref: x,
-        className: "row-section-scroll",
-        lastItemIdx: (d == null ? void 0 : d.length) + 1,
-        children: /* @__PURE__ */ t(
-          se,
+        isLoading: u,
+        itemsCount: S ? 1 : 2,
+        keyPrefix: "sales-camp",
+        children: /* @__PURE__ */ a(
+          Q,
           {
-            arrowsVisibleOnHover: !1,
-            columnGap: "0",
-            methodsRef: g,
-            mobileHoverScrollButtons: !0,
-            noArrows: !0,
-            padding: "0.25rem 0",
-            rightAlignArrows: !0,
-            elementsCount: o == null ? void 0 : o.length,
-            scrollBySize: I ? P + 1 : P * 2 + 24,
-            showTimesBtn: !1,
-            title: a,
-            onShowEnd: () => {
-            },
-            arrowsZIndex: 11,
-            showArrows: T,
-            children: /* @__PURE__ */ t(
-              Re,
-              {
-                isLoading: s,
-                itemsCount: 2,
-                keyPrefix: "sales-camp",
-                children: d
-              }
-            )
-          },
-          `scroll-${k}`
+            icon: h,
+            title: i,
+            numOfSlides: x,
+            numOfSlidesForMobile: b,
+            showNavigation: $,
+            children: D
+          }
         )
       }
-    ) });
+    );
   }
 );
 export {
-  rr as default
+  Ue as default
 };