@lanaco/lnc-react-ui 4.0.35 → 4.0.37

package/dist/SalesCampaignsSection.js

@@ -0,0 +1,967 @@
+import { jsx as t, jsxs as p, Fragment as G } from "react/jsx-runtime";
+import { createElement as ae, useState as z, useEffect as j, forwardRef as V, useRef as Q, useImperativeHandle as ne, Suspense as se, memo as le, useMemo as ce } from "react";
+import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { a as E, l as X, m as ee } from "./utils-DtRLzzTZ.js";
+import { M as T } from "./consts-C1uHV4xc.js";
+import { m as de } from "./motion-Ckekul_K.js";
+import { P as i } from "./index-S5Cd7WrG.js";
+import ge from "./Icon.js";
+import he from "./Badge.js";
+import { u as M } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { u as re } from "./useDetectMobile-BC6EGaBc.js";
+import me from "./FlexBox.js";
+import { I as Y } from "./index-wy-PXQR9.js";
+import U from "./IconButton.js";
+const fe = m.div`
+  cursor: pointer;
+  display: flex;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-radius: ${(e) => E(e.theme, "slightCurve")};
+  border: 1px solid var(--gray-95080, #14161acc);
+
+  @media (max-width: ${T + "px"}) {
+    flex-direction: column;
+    padding: 0;
+    gap: 0;
+    border: none;
+    border-radius: 0;
+  }
+`, pe = m.div`
+  border-radius: ${(e) => E(e.theme, "edged")};
+  height: 15rem;
+  width: 15rem;
+  min-width: 15rem;
+  cursor: pointer;
+
+  position: relative;
+  overflow: hidden;
+
+  & img {
+    max-width: 100%;
+    min-width: 100%;
+    max-height: 100%;
+    min-height: 100%;
+    object-fit: cover;
+
+    transform: scale(1.1);
+    transition: var(--transition, all 0.3s ease);
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
+
+  @media (max-width: ${T + "px"}) {
+    width: 100%;
+    max-width: 100dvh;
+    height: 23.438rem;
+  }
+`, ue = m.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--gray-950, #14161a);
+  font-weight: 400;
+  font-size: 0.875rem;
+
+  & .campaign-title {
+    font-weight: 500;
+    font-size: 0.75rem;
+    letter-spacing: 0.1rem;
+    color: var(--primary-500, #f59e0b);
+  }
+
+  & .campaign-title-text {
+    font-weight: 600;
+    font-size: 1.375rem;
+    transition: var(--transition, all 0.3s ease);
+    &:hover {
+      color: var(--primary-500, #f59e0b);
+      font-size: 1.4rem;
+    }
+  }
+
+  & .text-block-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  & .title-block-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .timestamp-text {
+    font-size: 0.875rem;
+    font-weight: 400;
+    padding-top: 0.25rem;
+    color: var(--gray-700, #4e555f);
+  }
+
+  & .profile-item:hover {
+    background-color: transparent;
+  }
+
+  @media (max-width: ${T + "px"}) {
+    padding: 1.25rem;
+
+    & .campaign-title {
+      font-size: 0.875rem;
+    }
+
+    & .text-block-wrapper {
+      gap: 0.25rem;
+    }
+    & .text-block-wrapper {
+      gap: 0.25rem;
+    }
+  }
+`, we = {
+  "#ADE3EB": "#76D0DB",
+  "#DDD6FE": "#C4B5FD",
+  "#FDE68A": "#FCD34D",
+  "#A7F3D0": "#6EE7B7",
+  "#BADFFF": "#87C6FA",
+  "#FECDD3": "#FDA4AF",
+  "#EFE2CF": "#EAD2AF",
+  "#DDDFE4": "#C4C8CF",
+  "#E7E5E4": "#D6D3D1",
+  "#FED7AA": "#FDBA74",
+  default: "#C4C8CF"
+}, q = (e = !1, o = !1, l = !1) => `
+    display: flex;
+    ${o ? "flex-wrap: wrap;" : ""}
+    ${o ? "" : "flex-wrap: nowrap;"}
+    ${e ? "align-items: center;" : ""}
+    ${l ? "justify-content: center;" : ""}
+  `, be = m(de.div)`
+  text-decoration: none;
+  ${(e) => e.hasPermission === !0 && "cursor: pointer"};
+
+  &:focus,
+  &:hover,
+  &:visited,
+  &:link,
+  &:active {
+    text-decoration: none;
+  }
+
+  & .icon,
+  .name {
+    text-decoration: none;
+  }
+
+  ${q(!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) => E(e.theme, "slight")};
+  transition: all 0.25s ease;
+
+  & .logo-wrapper {
+    ${q(!0, !1, !0)}
+    flex-shrink: 0;
+    border-radius: 999px;
+    border: 3px solid
+      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : we[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
+
+    & img,
+    .img-placeholder {
+      border-radius: 999px;
+      object-fit: cover;
+      height: 1.25rem;
+      width: 1.25rem;
+      background-color: var(--gray-200, #dddfe4);
+    }
+
+    & .no-image {
+      background: white;
+    }
+  }
+
+  &.user-profile-item {
+    & .logo-wrapper {
+      border: 3px solid transparent;
+    }
+  }
+
+  & .name {
+    flex-grow: 15;
+  }
+
+  & .notifications-number .badge {
+    font-size: 0.75rem;
+  }
+
+  & .badge {
+    max-height: 1.25rem;
+    min-height: 1.25rem;
+    padding: 0.375rem;
+    line-height: 1rem;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--gray-95080, #14161acc);
+    color: var(--gray-600, #676e79);
+  }
+`, ve = m.div`
+  position: absolute;
+  top: 0.5rem;
+  ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
+  display: flex;
+  gap: 0.25rem;
+`, xe = (e) => `var(--${e}-700)`, ye = m.div`
+  border-radius: ${(e) => E(e.theme, e.borderRadius || "slight")};
+  background-color: ${(e) => xe(e == null ? void 0 : e.color)};
+  color: white;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  width: ${(e) => e.fitContent === !0 ? "fit-content" : "1.5rem"};
+  ${(e) => e.fitContent === !0 && "padding: 0 0.1rem;"};
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${(e) => e.padding};
+  & i {
+    font-size: 0.813rem;
+  }
+`, te = (e) => {
+  const {
+    uuid: o,
+    hasPermission: l = !0,
+    isUser: a,
+    image: u,
+    name: n,
+    notifications: c = 0,
+    color: w = "primary",
+    size: b = "large",
+    style: D,
+    disabled: s,
+    onSelect: d = () => {
+    },
+    isActive: x,
+    className: v,
+    // new
+    themeData: f
+  } = e, k = {
+    theme: M(),
+    color: w,
+    size: b,
+    style: D,
+    disabled: s
+  };
+  return /* @__PURE__ */ ae(
+    be,
+    {
+      onClick: (r) => {
+        r.stopPropagation(), l === !0 && (d == null || d());
+      },
+      ...k,
+      key: n,
+      animate: {
+        y: 0,
+        opacity: 1
+      },
+      className: `profile-item ${v}`,
+      exit: {
+        opacity: 0
+      },
+      hasPermission: l,
+      initial: {
+        y: -10,
+        opacity: 0
+      },
+      isActive: x,
+      themeColor: (f == null ? void 0 : f.code) || "transparent"
+    },
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: u }),
+    /* @__PURE__ */ t("div", { className: "name", children: n }),
+    c > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(he, { className: "badge", color: "danger", size: "small", children: c > 99 ? "99+" : c }) })
+  );
+};
+te.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([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral"
+  ]),
+  size: i.oneOf(["large"]),
+  onSelect: i.func,
+  hasPermission: i.bool
+};
+const J = (e, o) => {
+  if (!e || !o) return null;
+  let l = Math.floor((e == null ? void 0 : e.getTime()) - (o == null ? void 0 : o.getTime())), a = 1e3 * 60 * 60 * 24;
+  return Math.ceil(l / a);
+}, oe = (e) => {
+  const o = M(), {
+    uuid: l,
+    shopUuid: a,
+    title: u = "",
+    description: n,
+    badges: c,
+    coverPhoto: w,
+    onSelect: b,
+    status: D,
+    startDate: s,
+    endDate: d,
+    salesPackages: x,
+    shopName: v,
+    shopImage: f,
+    onSelectCard: g = () => {
+    },
+    onSelectShop: k = () => {
+    },
+    campaignSingleText: r,
+    salesCampaignTypes: $ = [],
+    startsInPrefixTextPlural: S,
+    startsinSuffixTextPlural: B,
+    startsInPrefixTextSingular: N,
+    startsinSuffixTextSingular: R,
+    themeData: H,
+    ...W
+  } = e, h = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1;
+  J(
+    d ? new Date(d) : null,
+    s ? new Date(s) : null
+  );
+  const y = J(
+    s ? new Date(s) : null,
+    /* @__PURE__ */ new Date()
+  );
+  return /* @__PURE__ */ p(
+    fe,
+    {
+      theme: o,
+      onClick: g,
+      ...W,
+      children: [
+        /* @__PURE__ */ p(pe, { theme: o, onClick: () => b == null ? void 0 : b(), children: [
+          /* @__PURE__ */ t("img", { src: w }),
+          /* @__PURE__ */ t(ve, { children: x == null ? void 0 : x.map((I, A) => {
+            var _, L;
+            return /* @__PURE__ */ t(
+              ye,
+              {
+                color: (_ = $ == null ? void 0 : $.find((P) => P.value === I)) == null ? void 0 : _.color,
+                theme: o,
+                children: /* @__PURE__ */ t(
+                  ge,
+                  {
+                    icon: (L = $ == null ? void 0 : $.find((P) => P.value === I)) == null ? void 0 : L.icon
+                  }
+                )
+              },
+              `package__${A}`
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ p(ue, { theme: o, children: [
+          /* @__PURE__ */ p("div", { className: "text-block-wrapper", children: [
+            /* @__PURE__ */ p("div", { className: "title-block-wrapper", children: [
+              /* @__PURE__ */ t("div", { className: "campaign-title", children: r }),
+              /* @__PURE__ */ t("div", { className: "campaign-title-text", children: u }),
+              /* @__PURE__ */ t("div", { className: "timestamp-text", children: h ? "" : y === 1 ? `${N} ${y} ${R}` : `${S} ${y} ${B}` })
+            ] }),
+            /* @__PURE__ */ t("div", { children: n })
+          ] }),
+          /* @__PURE__ */ t(
+            te,
+            {
+              hasPermission: !0,
+              image: (
+                // <ShopFallbackImage
+                //   image={shopImage}
+                //   uuid={shopUuid}
+                //   size={ImageSize.SMALL}
+                //   className={`${shopImage ? "" : "no-image"}`}
+                // />
+                /* @__PURE__ */ t(
+                  "img",
+                  {
+                    src: f,
+                    className: `${f ? "" : "no-image"}`
+                  }
+                )
+              ),
+              themeData: H,
+              isActive: !0,
+              isUser: !1,
+              name: v,
+              onClick: () => k(a)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+oe.propTypes = {
+  title: i.oneOfType([i.string, i.element]),
+  numberOfListings: i.number,
+  dropdown: i.any,
+  color: i.string
+};
+const $e = m.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) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+  }
+
+  & .hover-right-arrow {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 1.5rem;
+    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
+  }
+
+  & .clip-loader-wrapper {
+    margin: auto;
+    padding: 0 1rem;
+  }
+
+  @media (max-width: ${T + "px"}) {
+    gap: 1.25rem;
+    & .hover-left-arrow,
+    .hover-right-arrow {
+      display: flex;
+    }
+  }
+`, De = m.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: ${T + "px"}) {
+    padding: 0 1rem;
+    & .btns-group {
+      display: none;
+    }
+  }
+`, Ce = m.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: ${T + "px"}) {
+    & .scroll-arrow-left,
+    & .scroll-arrow-right {
+      display: none;
+    }
+
+    & .gradient {
+      right: 0;
+    }
+  }
+`, ke = (e, o) => {
+  const [l, a] = z({
+    trigger: null,
+    direction: null
+  }), u = (n) => n.touches || n.originalEvent.touches;
+  return j(() => {
+    const n = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
+    let c = null, w = null;
+    if (n) {
+      const b = (s) => {
+        const d = u(s)[0];
+        c = d.clientX, w = d.clientY;
+      }, D = (s) => {
+        if (!c || !w)
+          return;
+        const d = s.touches[0].clientX, x = s.touches[0].clientY, v = c - d, f = w - x;
+        Math.abs(v) > Math.abs(f) ? v > 0 ? a((g) => ({
+          trigger: !g.trigger,
+          direction: F.LEFT
+        })) : a((g) => ({
+          trigger: !g.trigger,
+          direction: F.RIGHT
+        })) : f > 0 ? a((g) => ({
+          trigger: !g.trigger,
+          direction: F.UP
+        })) : a((g) => ({
+          trigger: !g.trigger,
+          direction: F.DOWN
+        })), c = null, w = null;
+      };
+      return n.addEventListener("touchstart", b), n.addEventListener("touchmove", D), () => {
+        n.removeEventListener("touchstart", b), n.addEventListener("touchmove", D);
+      };
+    }
+  }, []), l;
+}, F = {
+  UP: "up",
+  DOWN: "down",
+  RIGHT: "right",
+  LEFT: "left"
+}, ie = V(
+  ({
+    title: e,
+    columnGap: o = "2rem",
+    rowGap: l = "1.25rem",
+    scrollBySize: a = 300,
+    wrapForMobile: u = !1,
+    wrap: n = !1,
+    children: c,
+    methodsRef: w,
+    arrowsVisibleOnHover: b = !0,
+    rightAlignArrows: D = !1,
+    padding: s = "0",
+    showTimesBtn: d,
+    noArrows: x,
+    onShowEnd: v,
+    arrowsZIndex: f,
+    ...g
+  }, k) => {
+    const r = re(), $ = M(), [S, B] = z(!1), [N, R] = z(!1), [H, W] = z(!0), h = Q(), y = ke(h);
+    j(() => {
+      (y == null ? void 0 : y.direction) === F.RIGHT && N !== !0 ? A() : (y == null ? void 0 : y.direction) === F.LEFT && S !== !0 && I();
+    }, [y]);
+    const I = () => {
+      var C;
+      (C = h.current) == null || C.scrollBy(a, 0);
+    }, A = () => {
+      var C;
+      (C = h.current) == null || C.scrollBy(-a, 0);
+    }, [_, L] = z(!1);
+    j(() => {
+      var C, Z;
+      L(
+        ((C = h == null ? void 0 : h.current) == null ? void 0 : C.scrollWidth) > ((Z = h == null ? void 0 : h.current) == null ? void 0 : Z.clientWidth)
+      );
+    }, [c]), ne(w, () => ({
+      scrollToEnd() {
+        P();
+      },
+      scrollLeft() {
+        A();
+      },
+      scrollRight() {
+        I();
+      }
+    }));
+    const P = () => {
+      h.current.scrollLeft = h.current.scrollWidth;
+    };
+    return /* @__PURE__ */ p($e, { arrowsZIndex: f, children: [
+      /* @__PURE__ */ p(De, { children: [
+        /* @__PURE__ */ t("div", { children: e }),
+        /* @__PURE__ */ p("div", { className: "btns-group", children: [
+          /* @__PURE__ */ t(
+            U,
+            {
+              borderRadius: "curved",
+              btnType: "tinted",
+              className: "scroll-arrow-left",
+              color: "neutral",
+              disabled: N,
+              icon: "angle-left",
+              onClick: A
+            }
+          ),
+          /* @__PURE__ */ t(
+            U,
+            {
+              borderRadius: "curved",
+              btnType: "tinted",
+              className: "scroll-arrow-right",
+              color: "neutral",
+              disabled: S,
+              icon: "angle-right",
+              onClick: I
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t(
+        U,
+        {
+          borderRadius: "curved",
+          btnType: "tinted",
+          className: "hover-left-arrow scroll-arrow-left",
+          color: "neutral",
+          disabled: N,
+          icon: "angle-left",
+          onClick: A
+        }
+      ),
+      /* @__PURE__ */ t(
+        U,
+        {
+          borderRadius: "curved",
+          btnType: "tinted",
+          className: "hover-right-arrow scroll-arrow-right",
+          color: "neutral",
+          disabled: S,
+          icon: "angle-right",
+          onClick: I
+        }
+      ),
+      /* @__PURE__ */ t(
+        Ce,
+        {
+          ref: k,
+          arrowsVisibleOnHover: b,
+          hasOverflow: _,
+          noArrows: x,
+          padding: s,
+          rightAlignArrows: D,
+          showTimesBtn: d,
+          theme: $,
+          ...g,
+          children: /* @__PURE__ */ p(
+            me,
+            {
+              ref: h,
+              className: "scrollable-container",
+              columnGap: o,
+              rowGap: l,
+              wrap: n || u && r ? "Wrap" : "NoWrap",
+              children: [
+                /* @__PURE__ */ t(
+                  Y,
+                  {
+                    isHorizontal: !0,
+                    onIsNotVisible: () => {
+                      N === !0 && R(!1);
+                    },
+                    onIsVisible: () => {
+                      N === !1 && R(!0);
+                    }
+                  }
+                ),
+                c,
+                /* @__PURE__ */ t(
+                  Y,
+                  {
+                    isHorizontal: !0,
+                    onIsNotVisible: () => {
+                      S === !0 && B(!1), W(!0);
+                    },
+                    onIsVisible: () => {
+                      S === !1 && B(!0), W(!1), v == null || v();
+                    }
+                  }
+                ),
+                H && _ && /* @__PURE__ */ t("div", { className: "gradient" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+ie.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
+};
+const Se = m.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  & .arrow-icon {
+    & i {
+      transition: all 0.25s ease;
+      transform: ${(e) => e.expanded === !0 ? "rotate(-180deg)" : "rotate(0)"};
+    }
+  }
+
+  & .badge-button {
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
+  & .campaign-item {
+    min-width: calc(50% - 0.87rem);
+    width: calc(50% - 0.87rem);
+    margin-right: 1.25rem;
+  }
+
+  @media (max-width: ${T + "px"}) {
+    & .campaign-item {
+      min-width: 100%;
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+`, O = m.div`
+  width: ${(e) => e.width || "100%"};
+  height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
+  background-color: var(--gray-200, #dddfe4);
+
+  ${ee("-90deg")}
+`, Ne = m.div`
+  display: flex;
+  flex-direction: ${(e) => e != null && e.row ? "row" : "column"};
+  gap: ${(e) => (e == null ? void 0 : e.gap) ?? "0.5rem"};
+  width: ${(e) => (e == null ? void 0 : e.width) ?? "100%"};
+`, K = m.div`
+  border-radius: ${(e) => E(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+  background: var(--gray-200, #dddfe4);
+  position: relative;
+  max-height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
+  max-width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
+  height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
+  width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
+  flex-shrink: 0;
+
+  ${ee()}
+`, Ie = m.div`
+  background: var(--white, #fff);
+  border-radius: ${(e) => E(e.theme, "edged")};
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-95012, #14161a1f);
+
+  display: flex;
+  gap: 1rem;
+  padding: 1.25rem;
+  width: 100%;
+
+  & .campaign__left-section {
+    position: relative;
+  }
+
+  & .campaign__right-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: 18rem;
+    width: 100%;
+  }
+
+  & .campaign__user {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+`, Te = V(({}, e) => {
+  const o = M();
+  return /* @__PURE__ */ p(Ie, { ref: e, theme: o, children: [
+    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
+      K,
+      {
+        theme: o,
+        width: "15rem",
+        height: "15rem",
+        borderRadius: "edged"
+      }
+    ) }),
+    /* @__PURE__ */ p("div", { className: "campaign__right-section", children: [
+      /* @__PURE__ */ p(Ne, { theme: o, children: [
+        /* @__PURE__ */ t(O, { heightCoeff: 0.75, theme: o, width: "35%" }),
+        /* @__PURE__ */ t(O, { heightCoeff: 1.25, theme: o }),
+        /* @__PURE__ */ t(O, { heightCoeff: 3, theme: o })
+      ] }),
+      /* @__PURE__ */ p("div", { className: "campaign__user", children: [
+        /* @__PURE__ */ t(
+          K,
+          {
+            theme: o,
+            width: "2.5rem",
+            height: "2.5rem",
+            borderRadius: "curved"
+          }
+        ),
+        /* @__PURE__ */ t(O, { theme: o, width: "75%" })
+      ] })
+    ] })
+  ] });
+}), Ae = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (l, a) => /* @__PURE__ */ t(
+  Te,
+  {},
+  `${o}-skeleton-campaign-card-${a}`
+)) }), Fe = ({
+  children: e,
+  fallbackComponent: o = /* @__PURE__ */ t(G, {}),
+  isLoading: l = !1,
+  itemsCount: a = 5,
+  keyPrefix: u
+}) => /* @__PURE__ */ t(se, { fallback: o, children: l === !0 ? /* @__PURE__ */ t(Ae, { itemsCount: a, keyPrefix: u }) : e }), Ee = le(oe), Ze = V(
+  ({
+    sellerType: e = "Shop",
+    items: o = [],
+    title: l,
+    isLoading: a,
+    onSelectCard: u = () => {
+    },
+    onSelectShop: n = () => {
+    },
+    // new
+    customScrollSize: c,
+    campaignSingleText: w,
+    salesCampaignTypes: b = [],
+    startsInPrefixTextPlural: D,
+    startsinSuffixTextPlural: s,
+    startsInPrefixTextSingular: d,
+    startsinSuffixTextSingular: x
+  }, v) => {
+    const f = Q(), g = re(), k = ce(() => o == null ? void 0 : o.map((r, $) => /* @__PURE__ */ t(
+      Ee,
+      {
+        className: "campaign-item",
+        coverPhoto: r == null ? void 0 : r.coverPhoto,
+        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: () => n(r == null ? void 0 : r.shopUuid),
+        campaignSingleText: w,
+        salesCampaignTypes: b,
+        startsInPrefixTextPlural: D,
+        startsinSuffixTextPlural: s,
+        startsInPrefixTextSingular: d,
+        startsinSuffixTextSingular: x,
+        themeData: r == null ? void 0 : r.themeData
+      },
+      `campaign__item__${$}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+    )), [o]);
+    return /* @__PURE__ */ t(G, { children: (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(Se, { ref: v, className: "row-section-scroll", children: /* @__PURE__ */ t(
+      ie,
+      {
+        arrowsVisibleOnHover: !1,
+        columnGap: "0",
+        methodsRef: f,
+        mobileHoverScrollButtons: !0,
+        noArrows: !0,
+        padding: "0.25rem 0",
+        rightAlignArrows: !0,
+        scrollBySize: g ? window.innerWidth : c > 0 ? c : window.innerWidth,
+        showTimesBtn: !1,
+        title: l,
+        onShowEnd: () => {
+        },
+        arrowsZIndex: 11,
+        children: /* @__PURE__ */ t(
+          Fe,
+          {
+            isLoading: a,
+            itemsCount: 2,
+            keyPrefix: "sales-camp",
+            children: k
+          }
+        )
+      }
+    ) }) });
+  }
+);
+export {
+  Ze as default
+};