@lanaco/lnc-react-ui 4.0.157 → 4.0.161

package/dist/ProductsWithBannerSection.js

@@ -1,12 +1,12 @@
-import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
-import { forwardRef as u, Suspense as P, memo as y, useMemo as N } from "react";
-import { s as p } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as g } from "./consts-BuFChS64.js";
-import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
-import { R as U } from "./style-BLuyU97E.js";
-import { p as I, o as w, l as M, k as W } from "./utils-BdsZgOUE.js";
-import { P as j } from "./index-CF3HhgvN.js";
-const E = p.div`
+import { jsxs as u, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as f, useRef as U, Suspense as y, memo as M, useMemo as R } from "react";
+import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as b } from "./consts-BuFChS64.js";
+import { u as W } from "./useDetectMobile-Bkvj0VMa.js";
+import { R as j } from "./style-DKAOBWn3.js";
+import { p as I, o as k, l as z, k as B } from "./utils-BdsZgOUE.js";
+import { P as D } from "./index-CF3HhgvN.js";
+const E = w.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -24,37 +24,30 @@ const E = p.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media (max-width: ${b + "px"}) {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
     aspect-ratio: 1 / 1;
+
+    & .product-card {
+      & img {
+        width: 100%;
+        height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    }
   }
-`, R = p.div`
+`, _ = w.div`
   display: grid;
   grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${g + "px"}) {
-    display: flex;
-    gap: 1rem;
-    overflow-x: auto;
-
-    -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 */
-    }
+  @media (max-width: ${b + "px"}) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-`, k = p.div`
+`, P = w.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -74,18 +67,18 @@ const E = p.div`
   }
 
   & .skeleton-img {
-    background-color: ${w("-90deg")};
+    background-color: ${k("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${w("-90deg")};
+    background-color: ${k("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -96,92 +89,114 @@ const E = p.div`
       object-fit: cover;
     }
   }
-`, z = u((t, l) => {
+`, A = f((t, n) => {
   const {
     uuid: o,
     title: i,
     image: a,
-    sellerUuid: h,
-    onSelectCard: d = () => {
+    sellerUuid: S,
+    onSelectCard: m = () => {
     },
-    imageComponent: n
-  } = t;
-  return /* @__PURE__ */ s(k, { ref: l, className: "product-card", onClick: d, children: [
-    M(n) ? n : /* @__PURE__ */ r(j, { src: a }),
-    /* @__PURE__ */ r("div", { className: "card-title", children: i })
-  ] });
-}), B = u(({}, t) => /* @__PURE__ */ s(k, { className: "product-card", children: [
+    imageComponent: s,
+    metadata: d
+  } = t, l = U(null);
+  return /* @__PURE__ */ u(
+    P,
+    {
+      ref: l,
+      className: "product-card",
+      name: d == null ? void 0 : d.name,
+      "data-accessor": d == null ? void 0 : d.accessor,
+      onClick: (c) => m(c, n),
+      children: [
+        z(s) ? s : /* @__PURE__ */ r(D, { src: a }),
+        /* @__PURE__ */ r("div", { className: "card-title", children: i })
+      ]
+    }
+  );
+}), G = f(({}, t) => /* @__PURE__ */ u(P, { className: "product-card", children: [
   /* @__PURE__ */ r("img", { className: "skeleton-img" }),
   /* @__PURE__ */ r("div", { className: "skeleton-title" })
-] })), D = ({ limit: t = 4, isLoading: l = !1, keyPrefix: o }) => /* @__PURE__ */ r(c, { children: Array.from({ length: t }, (i, a) => /* @__PURE__ */ r(
-  B,
+] })), T = ({ limit: t = 4, isLoading: n = !1, keyPrefix: o }) => /* @__PURE__ */ r(h, { children: Array.from({ length: t }, (i, a) => /* @__PURE__ */ r(
+  G,
   {
-    isLoading: l
+    isLoading: n
   },
   `${o}-skeleton-product-card-${a}`
-)) }), _ = ({
+)) }), F = ({
   children: t,
-  fallbackComponent: l = /* @__PURE__ */ r(c, {}),
+  fallbackComponent: n = /* @__PURE__ */ r(h, {}),
   isLoading: o = !1,
   limit: i,
   keyPrefix: a
-}) => /* @__PURE__ */ r(P, { fallbackComponent: l, children: o === !0 ? /* @__PURE__ */ r(
-  D,
+}) => /* @__PURE__ */ r(y, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(
+  T,
   {
     isLoading: o,
     limit: i,
     keyPrefix: a
   }
-) : t }), S = y(z), q = u((t, l) => {
+) : t }), v = M(A), Q = f((t, n) => {
   const {
     icon: o,
     items: i,
     limit: a = 4,
-    imageUrl: h,
-    onSelectCard: d = () => {
+    imageUrl: S,
+    onSelectCard: m = () => {
     },
-    title: n = "Season inspiration",
-    isLoading: v = !1,
-    getImage: f = () => {
-    }
-  } = t, b = $(), C = N(() => /* @__PURE__ */ r(c, { children: b === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
-    S,
+    title: s = "Season inspiration",
+    isLoading: d = !1,
+    getImage: l = () => {
+    },
+    componentName: c
+  } = t, C = W(), N = R(() => /* @__PURE__ */ r(h, { children: C === !0 ? i == null ? void 0 : i.map((e, p) => /* @__PURE__ */ r(
+    v,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: () => d({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug }),
-      image: f(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
+      onSelectCard: ($, g) => m({
+        uuid: e == null ? void 0 : e.uuid,
+        nameSlug: e == null ? void 0 : e.nameSlug,
+        cardRef: g
+      }),
+      image: l(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
     },
-    m
-  )) : i == null ? void 0 : i.slice(0, a).map((e, m) => /* @__PURE__ */ r(
-    S,
+    p
+  )) : i == null ? void 0 : i.slice(0, a).map((e, p) => /* @__PURE__ */ r(
+    v,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: () => d({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug }),
-      image: f(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
+      onSelectCard: ($, g) => m({
+        uuid: e == null ? void 0 : e.uuid,
+        nameSlug: e == null ? void 0 : e.nameSlug,
+        cardRef: g
+      }),
+      image: l(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
     },
-    m
-  )) }), [i, b, a]);
-  return /* @__PURE__ */ s(U, { ref: l, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
-      W(o) && /* @__PURE__ */ r("i", { className: o }),
-      /* @__PURE__ */ r("span", { children: n })
+    p
+  )) }), [i, C, a]);
+  return /* @__PURE__ */ u(j, { ref: n, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ u("div", { className: "regular-title-text", children: [
+      B(o) && /* @__PURE__ */ r("i", { className: o }),
+      /* @__PURE__ */ r("span", { children: s })
     ] }) }),
-    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: h }) }),
-    /* @__PURE__ */ r(R, { limit: a, children: /* @__PURE__ */ r(
-      _,
+    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: S }) }),
+    /* @__PURE__ */ r(_, { limit: a, children: /* @__PURE__ */ r(
+      F,
       {
-        isLoading: v,
+        isLoading: d,
         limit: a,
         keyPrefix: "explore-landing",
-        children: C
+        children: N
       }
     ) })
   ] });
 });
 export {
-  q as default
+  Q as default
 };

package/dist/QuattroCardsSection.cjs

@@ -155,6 +155,8 @@
   }
 
   @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+    gap: 1.25rem;
+
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;

package/dist/QuattroCardsSection.js

@@ -174,6 +174,8 @@ const y = c.div`
   }
 
   @media (max-width: ${m + "px"}) {
+    gap: 1.25rem;
+
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;

package/dist/SalesCampaignsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./utils-Dl9xPH4c.cjs"),$=require("./consts-goSZX3xP.cjs"),se=require("./motion-B_VPZaJq.cjs"),a=require("./index-BpbMKBf_.cjs"),oe=require("./Icon.cjs"),Q=require("./ShopAvatar-CV3lj34D.cjs"),ve=require("./Badge.cjs"),Z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),ee=require("./IconButton.cjs"),ie=require("./useDetectMobile-zkbzoOGV.cjs"),_e=p.styled.div`
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./utils-Dl9xPH4c.cjs"),P=require("./consts-goSZX3xP.cjs"),ce=require("./motion-B_VPZaJq.cjs"),s=require("./index-BpbMKBf_.cjs"),de=require("./Icon.cjs"),ne=require("./ShopAvatar-CV3lj34D.cjs"),je=require("./Badge.cjs"),Y=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),se=require("./IconButton.cjs"),ge=require("./useDetectMobile-zkbzoOGV.cjs"),Te=m.styled.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -6,12 +6,12 @@
   border-radius: 1.25rem;
   border: 1px solid var(--gray-200, #e4e9f0);
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
     padding: 1rem;
     gap: 0;
   }
-`,je=p.styled.div`
+`,Se=m.styled.div`
   border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,"edged")};
   height: 13.75rem;
   width: 13.75rem;
@@ -34,7 +34,7 @@
       transform: scale(1.25);
     }
   }
-`,Te=p.styled.div`
+`,$e=m.styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -117,7 +117,7 @@
     color: var(--gray-600, #676e79);
   }
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -142,13 +142,13 @@
       gap: 0.25rem;
     }
   }
-`,re=(e=!1,n=!1,s=!1)=>`
+`,ae=(e=!1,n=!1,a=!1)=>`
     display: flex;
     ${n?"flex-wrap: wrap;":""}
     ${n?"":"flex-wrap: nowrap;"}
     ${e?"align-items: center;":""}
-    ${s?"justify-content: center;":""}
-  `,Se=p.styled(se.motion.div)`
+    ${a?"justify-content: center;":""}
+  `,Pe=m.styled(ce.motion.div)`
   text-decoration: none;
   ${e=>e.hasPermission===!0&&"cursor: pointer"};
 
@@ -165,7 +165,7 @@
     text-decoration: none;
   }
 
-  ${re(!0)}
+  ${ae(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: var(--gray-950, #14161a);
@@ -181,7 +181,7 @@
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${re(!0,!1,!0)}
+    ${ae(!0,!1,!0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -220,17 +220,17 @@
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
     padding: 0;
     font-size: 0.875rem;
   }
-`,$e=p.styled.div`
+`,Ie=m.styled.div`
   position: absolute;
   top: 0.5rem;
   ${e=>e.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`,Pe=p.styled.div`
+`,Ce=m.styled.div`
   border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
   background-color: ${e=>e==null?void 0:e.color};
   color: white;
@@ -246,7 +246,7 @@
   & i {
     font-size: 0.813rem;
   }
-`,Ie=d.forwardRef(({src:e,...n},s)=>{const o=d.useRef();return d.useEffect(()=>{var u;const l=i=>{i.target.src=Q.DefaultShopImage,i.onerror=null};return(u=o==null?void 0:o.current)==null||u.addEventListener("error",l),()=>{var i;(i=o==null?void 0:o.current)==null||i.removeEventListener("error",l)}},[]),t.jsx(d.Fragment,{ref:s,children:x.isDefinedNotEmptyString(e)?t.jsx("img",{ref:o,src:e,...n}):t.jsx("img",{src:Q.DefaultShopImage,...n})})}),le=e=>{const{uuid:n,hasPermission:s=!0,isUser:o,image:l,imageComponent:u,name:i,notifications:m=0,color:c="primary",size:y="large",style:P,disabled:I,onClick:_=()=>{},isActive:C,className:w,shopCategory:b,themeData:v}=e,T={theme:Z.useTheme(),color:c,size:y,style:P,disabled:I};return d.createElement(Se,{onClick:g=>{g.stopPropagation(),s===!0&&(_==null||_())},...T,key:i,className:`profile-item ${w}`,hasPermission:s,isActive:C,themeColor:(v==null?void 0:v.code)||"transparent"},t.jsx("div",{className:"logo-wrapper",children:x.isDefined(u)?u:l}),t.jsxs("div",{children:[t.jsx("div",{className:"name",children:i}),!o&&t.jsx("div",{className:"description",children:b}),m>0&&t.jsx("div",{className:"notifications-number",children:t.jsx(ve,{className:"badge",color:"danger",size:"small",children:m>99?"99+":m})})]}))};le.propTypes={id:a.PropTypes.any,isUserProfile:a.PropTypes.bool,themeColor:a.PropTypes.string,image:a.PropTypes.any,name:a.PropTypes.string,notifications:a.PropTypes.number,style:a.PropTypes.object,className:a.PropTypes.string,color:a.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:a.PropTypes.oneOf(["large"]),onSelect:a.PropTypes.func,hasPermission:a.PropTypes.bool};const te=(e,n)=>{if(!e||!n)return null;const s=e.getTime()-n.getTime(),o=24*60*60*1e3;return s>=0?Math.ceil(s/o):Math.floor(s/o)},ne=e=>{if(e!==void 0){const n=new Date(e),s=n.getFullYear(),o=n.getMonth()+1;return`${String(n.getDate()).padStart(2)}. ${o}. ${s}.`}},ce=d.forwardRef((e,n)=>{var K;const s=Z.useTheme(),{shopUuid:o,title:l="",coverPhoto:u,onSelect:i,startDate:m,endDate:c,salesPackages:y,shopName:P,shopCategory:I,shopImage:_,shopImageComponent:C,className:w,onSelectCard:b=()=>{},onSelectShop:v=()=>{},upcoming:k=!1,upcomingCampaignText:T,campaignSingleText:g,salesCampaignTypes:h=[],startsInPrefixTextPlural:U,startsinSuffixTextPlural:B,startsInPrefixTextSingular:q,startsinSuffixTextSingular:A,endsInPrefixTextPlural:W,endsinSuffixTextPlural:G,endsInPrefixTextSingular:N,endsinSuffixTextSingular:V,themeData:E,numberOfListings:r,numberOfListingsTextSingular:F,numberOfListingsTextPlural:me,...pe}=e,H=m?new Date(m)<=new Date:!1,he=te(m?new Date(m):null,new Date),M=te(c?new Date(c):null,new Date),ue=M!==null&&M<=2&&M>0,Y=c?new Date(c).getTime():null,fe=Date.now(),X=Y!==null?Y-fe:null,z=X!==null&&X>0&&X<24*60*60*1e3,J=(j,R,f,D,S)=>f===1?`${j} ${f} ${D}`:`${R} ${f} ${S}`,xe=()=>{if(!c)return null;const j=ye,f=new Date(c).getTime()-j.getTime();if(f<=0)return null;const D=Math.floor(f/(1e3*60*60)),S=Math.floor(f%(1e3*60*60)/(1e3*60)),be=Math.floor(f%(1e3*60)/1e3);return{hours:D,minutes:S,seconds:be}},[ye,we]=d.useState(new Date);d.useEffect(()=>{if(!z)return;const j=setInterval(()=>{we(new Date)},1e3);return()=>clearInterval(j)},[z]);const L=z?xe():null;return t.jsxs(_e,{ref:n,theme:s,className:w,onClick:b,...pe,children:[t.jsxs(je,{theme:s,onClick:()=>i==null?void 0:i(),children:[t.jsx("img",{src:u}),t.jsx($e,{children:y==null?void 0:y.map((j,R)=>{var f,D;return t.jsx(Pe,{color:(f=h==null?void 0:h.find(S=>S.value===j))==null?void 0:f.color,theme:s,children:t.jsx(oe,{icon:(D=h==null?void 0:h.find(S=>S.value===j))==null?void 0:D.icon})},`package__${R}`)})})]}),t.jsxs(Te,{theme:s,children:[t.jsx("div",{className:"text-block-wrapper",children:t.jsxs("div",{className:"title-block-wrapper",children:[t.jsx("div",{className:"campaign-title",children:(K=k?T:g)==null?void 0:K.toUpperCase()}),t.jsx("div",{className:"campaign-title-text",children:l}),c&&m&&t.jsxs("div",{className:"campaign-date",children:[ne(m)," - ",ne(c)]}),t.jsxs("div",{className:"timestamp-text",children:[r>0&&t.jsxs("span",{className:"listings-text",children:[r," ",r===1?F:me," ","∙"," "]}),t.jsx("span",{className:`duration-text ${ue?"urgent":""} ${H?"":"starts-in"}`,children:z&&L?t.jsxs("div",{className:"countdown-timer",children:[N," ",L.hours.toString().padStart(2,"0"),":",L.minutes.toString().padStart(2,"0"),":",L.seconds.toString().padStart(2,"0")]}):H?J(N,W,M,V,G):J(q,U,he,A,B)})]})]})}),t.jsx(le,{hasPermission:!0,image:t.jsx(Ie,{src:_}),imageComponent:C,themeData:E,isActive:!0,isUser:!1,name:P,shopCategory:I,onClick:()=>v(o)})]})]})});ce.propTypes={title:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.element]),numberOfListings:a.PropTypes.number,dropdown:a.PropTypes.any,color:a.PropTypes.string};p.styled.div`
+`,ke=c.forwardRef(({src:e,...n},a)=>{const o=c.useRef();return c.useEffect(()=>{var u;const l=i=>{i.target.src=ne.DefaultShopImage,i.onerror=null};return(u=o==null?void 0:o.current)==null||u.addEventListener("error",l),()=>{var i;(i=o==null?void 0:o.current)==null||i.removeEventListener("error",l)}},[]),t.jsx(c.Fragment,{ref:a,children:x.isDefinedNotEmptyString(e)?t.jsx("img",{ref:o,src:e,...n}):t.jsx("img",{src:ne.DefaultShopImage,...n})})}),pe=e=>{const{uuid:n,hasPermission:a=!0,isUser:o,image:l,imageComponent:u,name:i,notifications:p=0,color:d="primary",size:w="large",style:I,disabled:C,onClick:j=()=>{},isActive:k,className:b,shopCategory:v,themeData:_}=e,T={theme:Y.useTheme(),color:d,size:w,style:I,disabled:C};return c.createElement(Pe,{onClick:g=>{g.stopPropagation(),a===!0&&(j==null||j())},...T,key:i,className:`profile-item ${b}`,hasPermission:a,isActive:k,themeColor:(_==null?void 0:_.code)||"transparent"},t.jsx("div",{className:"logo-wrapper",children:x.isDefined(u)?u:l}),t.jsxs("div",{children:[t.jsx("div",{className:"name",children:i}),!o&&t.jsx("div",{className:"description",children:v}),p>0&&t.jsx("div",{className:"notifications-number",children:t.jsx(je,{className:"badge",color:"danger",size:"small",children:p>99?"99+":p})})]}))};pe.propTypes={id:s.PropTypes.any,isUserProfile:s.PropTypes.bool,themeColor:s.PropTypes.string,image:s.PropTypes.any,name:s.PropTypes.string,notifications:s.PropTypes.number,style:s.PropTypes.object,className:s.PropTypes.string,color:s.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:s.PropTypes.oneOf(["large"]),onSelect:s.PropTypes.func,hasPermission:s.PropTypes.bool};const oe=(e,n)=>{if(!e||!n)return null;const a=e.getTime()-n.getTime(),o=24*60*60*1e3;return Math.floor(a/o)},ie=e=>{if(e!==void 0){const n=new Date(e),a=n.getFullYear(),o=n.getMonth()+1;return`${String(n.getDate()).padStart(2)}. ${o}. ${a}.`}},me=c.forwardRef((e,n)=>{var te;const a=Y.useTheme(),{shopUuid:o,title:l="",coverPhoto:u,onSelect:i,startDate:p,endDate:d,salesPackages:w,shopName:I,shopCategory:C,shopImage:j,shopImageComponent:k,className:b,onSelectCard:v=()=>{},onSelectShop:_=()=>{},upcoming:N=!1,upcomingCampaignText:T,campaignSingleText:g,salesCampaignTypes:h=[],startsInPrefixTextPlural:B,startsinSuffixTextPlural:q,startsInPrefixTextSingular:W,startsinSuffixTextSingular:J,endsInPrefixTextPlural:V,endsinSuffixTextPlural:F,endsInPrefixTextSingular:X,endsinSuffixTextSingular:M,themeData:Z,numberOfListings:D,numberOfListingsTextSingular:r,numberOfListingsTextPlural:A,metadata:S,...G}=e,K=c.useRef(),Q=p?new Date(p)<=new Date:!1,fe=oe(p?new Date(p):null,new Date),z=oe(d?new Date(d):null,new Date),xe=z!==null&&z<=2&&z>0,ee=d?new Date(d).getTime():null,ye=Date.now(),H=ee!==null?ee-ye:null,R=H!==null&&H>0&&H<24*60*60*1e3,re=(y,O,f,E,$)=>f===1?`${y} ${f} ${E}`:`${O} ${f} ${$}`,we=()=>{if(!d)return null;const y=be,f=new Date(d).getTime()-y.getTime();if(f<=0)return null;const E=Math.floor(f/(1e3*60*60)),$=Math.floor(f%(1e3*60*60)/(1e3*60)),_e=Math.floor(f%(1e3*60)/1e3);return{hours:E,minutes:$,seconds:_e}},[be,ve]=c.useState(new Date);c.useEffect(()=>{if(!R)return;const y=setInterval(()=>{ve(new Date)},1e3);return()=>clearInterval(y)},[R]);const L=R?we():null;return t.jsxs(Te,{ref:K,theme:a,className:b,name:S==null?void 0:S.name,"data-accessor":S==null?void 0:S.accessor,onClick:y=>v(y,K),...G,children:[t.jsxs(Se,{theme:a,onClick:()=>i==null?void 0:i(),children:[t.jsx("img",{src:u}),t.jsx(Ie,{children:w==null?void 0:w.map((y,O)=>{var f,E;return t.jsx(Ce,{color:(f=h==null?void 0:h.find($=>$.value===y))==null?void 0:f.color,theme:a,children:t.jsx(de,{icon:(E=h==null?void 0:h.find($=>$.value===y))==null?void 0:E.icon})},`package__${O}`)})})]}),t.jsxs($e,{theme:a,children:[t.jsx("div",{className:"text-block-wrapper",children:t.jsxs("div",{className:"title-block-wrapper",children:[t.jsx("div",{className:"campaign-title",children:(te=N?T:g)==null?void 0:te.toUpperCase()}),t.jsx("div",{className:"campaign-title-text",children:l}),d&&p&&t.jsxs("div",{className:"campaign-date",children:[ie(p)," - ",ie(d)]}),t.jsxs("div",{className:"timestamp-text",children:[D>0&&t.jsxs("span",{className:"listings-text",children:[D," ",D===1?r:A," ","∙"," "]}),t.jsx("span",{className:`duration-text ${xe?"urgent":""} ${Q?"":"starts-in"}`,children:R&&L?t.jsxs("div",{className:"countdown-timer",children:[X," ",L.hours.toString().padStart(2,"0"),":",L.minutes.toString().padStart(2,"0"),":",L.seconds.toString().padStart(2,"0")]}):Q?re(X,V,z,M,F):re(W,B,fe,J,q)})]})]})}),t.jsx(pe,{hasPermission:!0,image:t.jsx(ke,{src:j}),imageComponent:k,themeData:Z,isActive:!0,isUser:!1,name:I,shopCategory:C,onClick:()=>_(o)})]})]})});me.propTypes={title:s.PropTypes.oneOfType([s.PropTypes.string,s.PropTypes.element]),numberOfListings:s.PropTypes.number,dropdown:s.PropTypes.any,color:s.PropTypes.string};m.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -277,25 +277,25 @@
     }
   }
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
       margin-right: 0;
     }
   }
-`;const O=p.styled.div`
+`;const U=m.styled.div`
   width: ${e=>e.width||"100%"};
   height: ${e=>(e.heightCoeff||1)*1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
   ${x.linearGradientAnimation("-90deg")}
-`,Ce=p.styled.div`
+`,Ne=m.styled.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=p.styled.div`
+`,le=m.styled.div`
   border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,(e==null?void 0:e.borderRadius)??"regular")};
   background: var(--gray-200, #dddfe4);
   position: relative;
@@ -306,7 +306,7 @@
   flex-shrink: 0;
 
   ${x.linearGradientAnimation()}
-`,ke=p.styled.div`
+`,De=m.styled.div`
   background: var(--white, #fff);
   border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,"edged")};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
@@ -335,17 +335,17 @@
     gap: 0.5rem;
   }
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`,Ne=p.styled.div`
+`,Ee=m.styled.div`
   display: flex;
   gap: 1.5rem;
-`,De=d.forwardRef(({},e)=>{const n=Z.useTheme();return t.jsxs(ke,{ref:e,theme:n,children:[t.jsx("div",{className:"campaign__left-section",children:t.jsx(ae,{theme:n,width:"15rem",height:"15rem",borderRadius:"edged"})}),t.jsxs("div",{className:"campaign__right-section",children:[t.jsxs(Ce,{theme:n,children:[t.jsx(O,{heightCoeff:.75,theme:n,width:"35%"}),t.jsx(O,{heightCoeff:1.25,theme:n}),t.jsx(O,{heightCoeff:3,theme:n})]}),t.jsxs("div",{className:"campaign__user",children:[t.jsx(ae,{theme:n,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),t.jsx(O,{theme:n,width:"75%"})]})]})]})}),Ee=({itemsCount:e=5,keyPrefix:n})=>t.jsx(Ne,{children:Array.from({length:e},(s,o)=>t.jsx(De,{},`${n}-skeleton-campaign-card-${o}`))}),Me=({children:e,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:s=!1,itemsCount:o=5,keyPrefix:l})=>t.jsx(d.Suspense,{fallback:n,children:s===!0?t.jsx(Ee,{itemsCount:o,keyPrefix:l}):e}),ze=p.styled.div`
+`,Me=c.forwardRef(({},e)=>{const n=Y.useTheme();return t.jsxs(De,{ref:e,theme:n,children:[t.jsx("div",{className:"campaign__left-section",children:t.jsx(le,{theme:n,width:"15rem",height:"15rem",borderRadius:"edged"})}),t.jsxs("div",{className:"campaign__right-section",children:[t.jsxs(Ne,{theme:n,children:[t.jsx(U,{heightCoeff:.75,theme:n,width:"35%"}),t.jsx(U,{heightCoeff:1.25,theme:n}),t.jsx(U,{heightCoeff:3,theme:n})]}),t.jsxs("div",{className:"campaign__user",children:[t.jsx(le,{theme:n,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),t.jsx(U,{theme:n,width:"75%"})]})]})]})}),ze=({itemsCount:e=5,keyPrefix:n})=>t.jsx(Ee,{children:Array.from({length:e},(a,o)=>t.jsx(Me,{},`${n}-skeleton-campaign-card-${o}`))}),Re=({children:e,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:a=!1,itemsCount:o=5,keyPrefix:l})=>t.jsx(c.Suspense,{fallback:n,children:a===!0?t.jsx(ze,{itemsCount:o,keyPrefix:l}):e}),Le=m.styled.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -384,7 +384,9 @@
     right: 0;
   }
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
+    gap: 1.25rem;
+
     & .scrollable-section__header {
       & .scrollable-section__title {
         & .title__text {
@@ -394,13 +396,13 @@
       }
     }
   }
-`,Le=p.styled(se.motion.div)`
+`,Oe=m.styled(ce.motion.div)`
   display: grid;
   grid-template-columns: repeat(${e=>e==null?void 0:e.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${P.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -422,7 +424,7 @@
       /* Safari and Chrome */
     }
   }
-`,de=d.forwardRef(({icon:e,title:n,numOfSlides:s=2,showNavigation:o=!0,children:l},u)=>{const[i,m]=d.useState(0),[c,y]=d.useState(1),[P,I]=d.useState(null),[_,C]=d.useState(null),w=ie.useDetectMobile(),b=(l==null?void 0:l.length)??1;d.useEffect(()=>{const g=()=>{y(s)};return window.addEventListener("resize",g),g(),()=>window.removeEventListener("resize",g)},[]);const v=w?l:l==null?void 0:l.slice(i,i+c),k=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur(),i+c<b&&m(i+c)},T=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur(),i-c>=0&&m(i-c)};return t.jsxs(ze,{ref:u,children:[t.jsx("div",{className:"scrollable-section__header",children:t.jsxs("div",{className:"scrollable-section__title",children:[x.isDefinedNotEmptyString(e)&&t.jsx(oe,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),x.isDefinedNotEmptyString(n)&&t.jsxs("div",{className:"title__text",children:[" ",n]})]})}),t.jsx(Le,{numOfColumns:s,...!w&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},children:v},`scrollable-section__content-${i}`),o&&b>c&&!w&&t.jsxs("div",{className:"scrollable-section__navigation",children:[t.jsx(ee,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i===0,onClick:T}),t.jsx(ee,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i+c>=b,onClick:k})]})]})});de.propTypes={icon:a.PropTypes.string,title:a.PropTypes.string,numOfSlides:a.PropTypes.number,numOfSlidesForMobile:a.PropTypes.number,showNavigation:a.PropTypes.bool};const Re=p.styled.div`
+`,he=c.forwardRef(({icon:e,title:n,numOfSlides:a=2,showNavigation:o=!0,children:l},u)=>{const[i,p]=c.useState(0),[d,w]=c.useState(1),[I,C]=c.useState(null),[j,k]=c.useState(null),b=ge.useDetectMobile(),v=(l==null?void 0:l.length)??1;c.useEffect(()=>{const g=()=>{w(a)};return window.addEventListener("resize",g),g(),()=>window.removeEventListener("resize",g)},[]);const _=b?l:l==null?void 0:l.slice(i,i+d),N=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur(),i+d<v&&p(i+d)},T=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur(),i-d>=0&&p(i-d)};return t.jsxs(Le,{ref:u,children:[t.jsx("div",{className:"scrollable-section__header",children:t.jsxs("div",{className:"scrollable-section__title",children:[x.isDefinedNotEmptyString(e)&&t.jsx(de,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),x.isDefinedNotEmptyString(n)&&t.jsxs("div",{className:"title__text",children:[" ",n]})]})}),t.jsx(Oe,{numOfColumns:a,...!b&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},children:_},`scrollable-section__content-${i}`),o&&v>d&&!b&&t.jsxs("div",{className:"scrollable-section__navigation",children:[t.jsx(se,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i===0,onClick:T}),t.jsx(se,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i+d>=v,onClick:N})]})]})});he.propTypes={icon:s.PropTypes.string,title:s.PropTypes.string,numOfSlides:s.PropTypes.number,numOfSlidesForMobile:s.PropTypes.number,showNavigation:s.PropTypes.bool};const Ue=m.styled.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -439,4 +441,4 @@
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`,ge=d.forwardRef(({sectionName:e,imageUrl:n,maxHeight:s="16.25rem",className:o="",handleClick:l=()=>{}},u)=>t.jsx(Re,{ref:u,maxHeight:s,onClick:l,className:`itemless-banner ${o}`,children:t.jsx("img",{src:n,alt:`itemless-banner__${e}`})}));ge.propTypes={sectionName:a.PropTypes.string,imageUrl:a.PropTypes.string,maxHeight:a.PropTypes.string,className:a.PropTypes.string,handleClick:a.PropTypes.func};const Oe=d.memo(ce),Ue=d.forwardRef(({sellerType:e="Shop",items:n=[],title:s,icon:o,isLoading:l,onSelectCard:u=()=>{},onSelectShop:i=()=>{},getImage:m=()=>{},campaignSingleText:c,upcomingCampaignText:y,salesCampaignTypes:P=[],startsInPrefixTextPlural:I,startsinSuffixTextPlural:_,startsInPrefixTextSingular:C,startsinSuffixTextSingular:w,endsInPrefixTextPlural:b,endsinSuffixTextPlural:v,endsInPrefixTextSingular:k,endsinSuffixTextSingular:T,numOfSlides:g=2,showNavigation:h=!0,numberOfListingsTextSingular:U,numberOfListingsTextPlural:B,itemlessImageUrl:q,itemlessLink:A,handleItemlessLink:W=()=>{}},G)=>{const N=ie.useDetectMobile(),V=d.useMemo(()=>{let E=n==null?void 0:n.map((r,F)=>t.jsx(Oe,{className:"campaign-item",coverPhoto:m(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,shopImageComponent:r==null?void 0:r.profileImageComponent,shopName:r==null?void 0:r.shopName,shopUuid:r==null?void 0:r.shopUuid,shopCategory:r==null?void 0:r.shopCategory,startDate:r==null?void 0:r.startDate,title:r==null?void 0:r.name,uuid:r==null?void 0:r.campaignUuid,onSelectCard:()=>u(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid),onSelectShop:()=>i(r==null?void 0:r.shopUuid),campaignSingleText:c,upcomingCampaignText:y,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:P,startsInPrefixTextPlural:I,startsinSuffixTextPlural:_,startsInPrefixTextSingular:C,startsinSuffixTextSingular:w,endsInPrefixTextPlural:b,endsinSuffixTextPlural:v,endsInPrefixTextSingular:k,endsinSuffixTextSingular:T,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:U,numberOfListingsTextPlural:B},`campaign__item__${F}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`));return(n==null?void 0:n.length)<2&&!N?[...E,t.jsx(ge,{imageUrl:q,className:"campaign-item",handleClick:W})]:E},[n]);return t.jsx(Me,{isLoading:l,itemsCount:N?1:2,keyPrefix:"sales-camp",children:t.jsx(de,{icon:o,title:s,numOfSlides:g,showNavigation:h,children:V},`sales-campaign-section__${N}`)})});module.exports=Ue;
+`,ue=c.forwardRef(({sectionName:e,imageUrl:n,maxHeight:a="16.25rem",className:o="",handleClick:l=()=>{}},u)=>t.jsx(Ue,{ref:u,maxHeight:a,onClick:l,className:`itemless-banner ${o}`,children:t.jsx("img",{src:n,alt:`itemless-banner__${e}`})}));ue.propTypes={sectionName:s.PropTypes.string,imageUrl:s.PropTypes.string,maxHeight:s.PropTypes.string,className:s.PropTypes.string,handleClick:s.PropTypes.func};const Be=c.memo(me),qe=c.forwardRef(({sellerType:e="Shop",items:n=[],title:a,icon:o,isLoading:l,onSelectCard:u=()=>{},onSelectShop:i=()=>{},getImage:p=()=>{},campaignSingleText:d,upcomingCampaignText:w,salesCampaignTypes:I=[],startsInPrefixTextPlural:C,startsinSuffixTextPlural:j,startsInPrefixTextSingular:k,startsinSuffixTextSingular:b,endsInPrefixTextPlural:v,endsinSuffixTextPlural:_,endsInPrefixTextSingular:N,endsinSuffixTextSingular:T,numOfSlides:g=2,showNavigation:h=!0,numberOfListingsTextSingular:B,numberOfListingsTextPlural:q,itemlessImageUrl:W,itemlessLink:J,handleItemlessLink:V=()=>{},componentName:F},X)=>{const M=ge.useDetectMobile(),Z=c.useMemo(()=>{let D=n==null?void 0:n.map((r,A)=>t.jsx(Be,{className:"campaign-item",coverPhoto:p(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,shopImageComponent:r==null?void 0:r.profileImageComponent,shopName:r==null?void 0:r.shopName,shopUuid:r==null?void 0:r.shopUuid,shopCategory:r==null?void 0:r.shopCategory,startDate:r==null?void 0:r.startDate,title:r==null?void 0:r.name,uuid:r==null?void 0:r.campaignUuid,onSelectCard:(S,G)=>u(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid,G),onSelectShop:()=>i(r==null?void 0:r.shopUuid),campaignSingleText:d,upcomingCampaignText:w,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:I,startsInPrefixTextPlural:C,startsinSuffixTextPlural:j,startsInPrefixTextSingular:k,startsinSuffixTextSingular:b,endsInPrefixTextPlural:v,endsinSuffixTextPlural:_,endsInPrefixTextSingular:N,endsinSuffixTextSingular:T,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:B,numberOfListingsTextPlural:q,metadata:{name:F,accessor:r==null?void 0:r.accessor}},`campaign__item__${A}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`));return(n==null?void 0:n.length)<2&&!M?[...D,t.jsx(ue,{imageUrl:W,className:"campaign-item",handleClick:V},"itemless-campaign-section-banner")]:D},[n]);return t.jsx(Re,{isLoading:l,itemsCount:M?1:2,keyPrefix:"sales-camp",children:t.jsx(he,{icon:o,title:a,numOfSlides:g,showNavigation:h,children:Z},`sales-campaign-section__${M}`)})});module.exports=qe;