@lanaco/lnc-react-ui 4.0.124 → 4.0.125

package/dist/SalesCampaignsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),u=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),_=require("./utils-CZynEOC_.cjs"),k=require("./consts-goSZX3xP.cjs"),re=require("./motion-B_VPZaJq.cjs"),o=require("./index-BpbMKBf_.cjs"),te=require("./Icon.cjs"),ye=require("./Badge.cjs"),X=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),H=require("./IconButton.cjs"),ne=require("./useDetectMobile-zkbzoOGV.cjs"),we=m.styled.div`
+"use strict";const t=require("react/jsx-runtime"),u=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),_=require("./utils-CZynEOC_.cjs"),M=require("./consts-goSZX3xP.cjs"),te=require("./motion-B_VPZaJq.cjs"),o=require("./index-BpbMKBf_.cjs"),ne=require("./Icon.cjs"),ye=require("./Badge.cjs"),Z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),J=require("./IconButton.cjs"),se=require("./useDetectMobile-zkbzoOGV.cjs"),we=m.styled.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -6,14 +6,14 @@
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
     border: none;
     border-radius: 0;
   }
-`,ve=m.styled.div`
+`,be=m.styled.div`
   border-radius: ${e=>_.getBorderRadiusValueWithUnits(e.theme,"edged")};
   height: 15rem;
   width: 15rem;
@@ -37,12 +37,12 @@
     }
   }
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`,be=m.styled.div`
+`,ve=m.styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -56,7 +56,7 @@
     font-weight: 500;
     font-size: 0.75rem;
     letter-spacing: 0.1rem;
-    color: var(--primary-500, #f59e0b);
+    color: var(--teal-500, #009ea8);
   }
 
   & .campaign-title-text {
@@ -74,6 +74,7 @@
   & .title-block-wrapper {
     display: flex;
     flex-direction: column;
+    gap: 0.1875rem;
   }
 
   & .timestamp-text {
@@ -98,6 +99,10 @@
       &.urgent {
         color: var(--primary-500, #f59e0b);
       }
+
+      &.starts-in {
+        color: var(--teal-500, #009ea8);
+      }
     }
 
     & .countdown-timer {
@@ -109,7 +114,7 @@
     background-color: transparent;
   }
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -123,13 +128,13 @@
       gap: 0.25rem;
     }
   }
-`,_e={"#ADE3EB":"#76D0DB","#DDD6FE":"#C4B5FD","#FDE68A":"#FCD34D","#A7F3D0":"#6EE7B7","#BADFFF":"#87C6FA","#FECDD3":"#FDA4AF","#EFE2CF":"#EAD2AF","#DDDFE4":"#C4C8CF","#E7E5E4":"#D6D3D1","#FED7AA":"#FDBA74",default:"#C4C8CF"},J=(e=!1,n=!1,a=!1)=>`
+`,K=(e=!1,n=!1,a=!1)=>`
     display: flex;
     ${n?"flex-wrap: wrap;":""}
     ${n?"":"flex-wrap: nowrap;"}
     ${e?"align-items: center;":""}
     ${a?"justify-content: center;":""}
-  `,Te=m.styled(re.motion.div)`
+  `,_e=m.styled(te.motion.div)`
   text-decoration: none;
   ${e=>e.hasPermission===!0&&"cursor: pointer"};
 
@@ -146,10 +151,10 @@
     text-decoration: none;
   }
 
-  ${J(!0)}
+  ${K(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
-  color: ${e=>e.isActive===!1?"var(--gray-900)":"var(--primary-600)"};
+  color: var(--gray-950);
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -162,11 +167,9 @@
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${J(!0,!1,!0)}
+    ${K(!0,!1,!0)}
     flex-shrink: 0;
     border-radius: 999px;
-    border: 3px solid
-      ${e=>e.isActive===!1?"var(--gray-300, #c4c8cf)":_e[e.themeColor]??"var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -182,12 +185,6 @@
     }
   }
 
-  &.user-profile-item {
-    & .logo-wrapper {
-      border: 3px solid transparent;
-    }
-  }
-
   & .name {
     flex-grow: 15;
     font-size: 1.055rem;
@@ -207,15 +204,14 @@
   &:hover {
     cursor: pointer;
     background-color: var(--gray-95080, #14161acc);
-    color: var(--gray-600, #676e79);
   }
-`,je=m.styled.div`
+`,Te=m.styled.div`
   position: absolute;
   top: 0.5rem;
   ${e=>e.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`,De=m.styled.div`
+`,je=m.styled.div`
   border-radius: ${e=>_.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
   background-color: ${e=>e==null?void 0:e.color};
   color: white;
@@ -231,7 +227,7 @@
   & i {
     font-size: 0.813rem;
   }
-`,se=e=>{const{uuid:n,hasPermission:a=!0,isUser:l,image:w,name:p,notifications:h=0,color:i="primary",size:c="large",style:d,disabled:S,onClick:v=()=>{},isActive:T,className:j,shopCategory:D,themeData:f}=e,b={theme:X.useTheme(),color:i,size:c,style:d,disabled:S};return u.createElement(Te,{onClick:C=>{C.stopPropagation(),a===!0&&(v==null||v())},...b,key:p,className:`profile-item ${j}`,hasPermission:a,isActive:T,themeColor:(f==null?void 0:f.code)||"transparent"},t.jsx("div",{className:"logo-wrapper",children:w}),t.jsxs("div",{children:[t.jsx("div",{className:"name",children:p}),!l&&t.jsx("div",{className:"description",children:D}),h>0&&t.jsx("div",{className:"notifications-number",children:t.jsx(ye,{className:"badge",color:"danger",size:"small",children:h>99?"99+":h})})]}))};se.propTypes={id:o.PropTypes.any,isUserProfile:o.PropTypes.bool,themeColor:o.PropTypes.string,image:o.PropTypes.any,name:o.PropTypes.string,notifications:o.PropTypes.number,style:o.PropTypes.object,className:o.PropTypes.string,color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:o.PropTypes.oneOf(["large"]),onSelect:o.PropTypes.func,hasPermission:o.PropTypes.bool};const K=(e,n)=>{if(!e||!n)return null;const a=e.getTime()-n.getTime(),l=24*60*60*1e3;return a>=0?Math.ceil(a/l):Math.floor(a/l)},Q=e=>{if(e!==void 0){const n=new Date(e),a=n.getFullYear(),l=n.getMonth()+1;return`${String(n.getDate()).padStart(2)}. ${l}. ${a}.`}},ae=u.forwardRef((e,n)=>{var Y;const a=X.useTheme(),{shopUuid:l,title:w="",coverPhoto:p,onSelect:h,startDate:i,endDate:c,salesPackages:d,shopName:S,shopCategory:v,shopImage:T,className:j,onSelectCard:D=()=>{},onSelectShop:f=()=>{},upcoming:P=!1,upcomingCampaignText:b,campaignSingleText:C,salesCampaignTypes:x=[],startsInPrefixTextPlural:E,startsinSuffixTextPlural:M,startsInPrefixTextSingular:F,startsinSuffixTextSingular:B,endsInPrefixTextPlural:s,endsinSuffixTextPlural:g,endsInPrefixTextSingular:R,endsinSuffixTextSingular:r,themeData:q,numberOfListings:W,numberOfListingsTextSingular:ie,numberOfListingsTextPlural:le,...ce}=e,de=i?new Date(i)<=new Date:!1,ge=K(i?new Date(i):null,new Date),z=K(c?new Date(c):null,new Date),ue=z!==null&&z<=3&&z>0,Z=c?new Date(c).getTime():null,me=Date.now(),V=Z!==null?Z-me:null,O=V!==null&&V>0&&V<24*60*60*1e3,G=($,L,y,N,I)=>y===1?`${$} ${y} ${N}`:`${L} ${y} ${I}`,pe=()=>{if(!c)return null;const $=he,y=new Date(c).getTime()-$.getTime();if(y<=0)return null;const N=Math.floor(y/(1e3*60*60)),I=Math.floor(y%(1e3*60*60)/(1e3*60)),xe=Math.floor(y%(1e3*60)/1e3);return{hours:N,minutes:I,seconds:xe}},[he,fe]=u.useState(new Date);u.useEffect(()=>{if(!O)return;const $=setInterval(()=>{fe(new Date)},1e3);return()=>clearInterval($)},[O]);const A=O?pe():null;return t.jsxs(we,{ref:n,theme:a,className:j,onClick:D,...ce,children:[t.jsxs(ve,{theme:a,onClick:()=>h==null?void 0:h(),children:[t.jsx("img",{src:p}),t.jsx(je,{children:d==null?void 0:d.map(($,L)=>{var y,N;return t.jsx(De,{color:(y=x==null?void 0:x.find(I=>I.value===$))==null?void 0:y.color,theme:a,children:t.jsx(te,{icon:(N=x==null?void 0:x.find(I=>I.value===$))==null?void 0:N.icon})},`package__${L}`)})})]}),t.jsxs(be,{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:(Y=P?b:C)==null?void 0:Y.toUpperCase()}),t.jsx("div",{className:"campaign-title-text",children:w}),c&&i&&t.jsxs("div",{children:[Q(i)," - ",Q(c)]}),t.jsxs("div",{className:"timestamp-text",children:[W>0&&t.jsxs("span",{className:"listings-text",children:[W," ",W===1?ie:le," ","∙"," "]}),t.jsx("span",{className:`duration-text ${ue?"urgent":""}`,children:O&&A?t.jsxs("div",{className:"countdown-timer",children:[R," ",A.hours.toString().padStart(2,"0"),":",A.minutes.toString().padStart(2,"0"),":",A.seconds.toString().padStart(2,"0")]}):de?G(R,s,z,r,g):G(F,E,ge,B,M)})]})]})}),t.jsx(se,{hasPermission:!0,image:t.jsx("img",{src:T,className:`${T?"":"no-image"}`}),themeData:q,isActive:!0,isUser:!1,name:S,shopCategory:v,onClick:()=>f(l)})]})]})});ae.propTypes={title:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),numberOfListings:o.PropTypes.number,dropdown:o.PropTypes.any,color:o.PropTypes.string};m.styled.div`
+`,ae=e=>{const{uuid:n,hasPermission:a=!0,isUser:l,image:w,name:h,notifications:p=0,color:i="primary",size:c="large",style:d,disabled:P,onClick:b=()=>{},isActive:T,className:j,shopCategory:$,themeData:f}=e,v={theme:Z.useTheme(),color:i,size:c,style:d,disabled:P};return u.createElement(_e,{onClick:I=>{I.stopPropagation(),a===!0&&(b==null||b())},...v,key:h,className:`profile-item ${j}`,hasPermission:a,isActive:T,themeColor:(f==null?void 0:f.code)||"transparent"},t.jsx("div",{className:"logo-wrapper",children:w}),t.jsxs("div",{children:[t.jsx("div",{className:"name",children:h}),!l&&t.jsx("div",{className:"description",children:$}),p>0&&t.jsx("div",{className:"notifications-number",children:t.jsx(ye,{className:"badge",color:"danger",size:"small",children:p>99?"99+":p})})]}))};ae.propTypes={id:o.PropTypes.any,isUserProfile:o.PropTypes.bool,themeColor:o.PropTypes.string,image:o.PropTypes.any,name:o.PropTypes.string,notifications:o.PropTypes.number,style:o.PropTypes.object,className:o.PropTypes.string,color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:o.PropTypes.oneOf(["large"]),onSelect:o.PropTypes.func,hasPermission:o.PropTypes.bool};const Q=(e,n)=>{if(!e||!n)return null;const a=e.getTime()-n.getTime(),l=24*60*60*1e3;return a>=0?Math.ceil(a/l):Math.floor(a/l)},ee=e=>{if(e!==void 0){const n=new Date(e),a=n.getFullYear(),l=n.getMonth()+1;return`${String(n.getDate()).padStart(2)}. ${l}. ${a}.`}},oe=u.forwardRef((e,n)=>{var H;const a=Z.useTheme(),{shopUuid:l,title:w="",coverPhoto:h,onSelect:p,startDate:i,endDate:c,salesPackages:d,shopName:P,shopCategory:b,shopImage:T,className:j,onSelectCard:$=()=>{},onSelectShop:f=()=>{},upcoming:C=!1,upcomingCampaignText:v,campaignSingleText:I,salesCampaignTypes:x=[],startsInPrefixTextPlural:N,startsinSuffixTextPlural:E,startsInPrefixTextSingular:R,startsinSuffixTextSingular:z,endsInPrefixTextPlural:s,endsinSuffixTextPlural:g,endsInPrefixTextSingular:O,endsinSuffixTextSingular:r,themeData:V,numberOfListings:X,numberOfListingsTextSingular:le,numberOfListingsTextPlural:ce,...de}=e,A=i?new Date(i)<=new Date:!1,ge=Q(i?new Date(i):null,new Date),L=Q(c?new Date(c):null,new Date),ue=L!==null&&L<=2&&L>0,G=c?new Date(c).getTime():null,me=Date.now(),F=G!==null?G-me:null,U=F!==null&&F>0&&F<24*60*60*1e3,Y=(S,q,y,k,D)=>y===1?`${S} ${y} ${k}`:`${q} ${y} ${D}`,he=()=>{if(!c)return null;const S=pe,y=new Date(c).getTime()-S.getTime();if(y<=0)return null;const k=Math.floor(y/(1e3*60*60)),D=Math.floor(y%(1e3*60*60)/(1e3*60)),xe=Math.floor(y%(1e3*60)/1e3);return{hours:k,minutes:D,seconds:xe}},[pe,fe]=u.useState(new Date);u.useEffect(()=>{if(!U)return;const S=setInterval(()=>{fe(new Date)},1e3);return()=>clearInterval(S)},[U]);const B=U?he():null;return t.jsxs(we,{ref:n,theme:a,className:j,onClick:$,...de,children:[t.jsxs(be,{theme:a,onClick:()=>p==null?void 0:p(),children:[t.jsx("img",{src:h}),t.jsx(Te,{children:d==null?void 0:d.map((S,q)=>{var y,k;return t.jsx(je,{color:(y=x==null?void 0:x.find(D=>D.value===S))==null?void 0:y.color,theme:a,children:t.jsx(ne,{icon:(k=x==null?void 0:x.find(D=>D.value===S))==null?void 0:k.icon})},`package__${q}`)})})]}),t.jsxs(ve,{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:(H=C?v:I)==null?void 0:H.toUpperCase()}),t.jsx("div",{className:"campaign-title-text",children:w}),c&&i&&t.jsxs("div",{children:[ee(i)," - ",ee(c)]}),t.jsxs("div",{className:"timestamp-text",children:[X>0&&t.jsxs("span",{className:"listings-text",children:[X," ",X===1?le:ce," ","∙"," "]}),t.jsx("span",{className:`duration-text ${ue?"urgent":""} ${A?"":"starts-in"}`,children:U&&B?t.jsxs("div",{className:"countdown-timer",children:[O," ",B.hours.toString().padStart(2,"0"),":",B.minutes.toString().padStart(2,"0"),":",B.seconds.toString().padStart(2,"0")]}):A?Y(O,s,L,r,g):Y(R,N,ge,z,E)})]})]})}),t.jsx(ae,{hasPermission:!0,image:t.jsx("img",{src:T,className:`${T?"":"no-image"}`}),themeData:V,isActive:!0,isUser:!1,name:P,shopCategory:b,onClick:()=>f(l)})]})]})});oe.propTypes={title:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),numberOfListings:o.PropTypes.number,dropdown:o.PropTypes.any,color:o.PropTypes.string};m.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -262,14 +258,14 @@
     }
   }
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
       margin-right: 0;
     }
   }
-`;const U=m.styled.div`
+`;const W=m.styled.div`
   width: ${e=>e.width||"100%"};
   height: ${e=>(e.heightCoeff||1)*1.125}rem;
   background-color: var(--gray-200, #dddfe4);
@@ -280,7 +276,7 @@
   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%"};
-`,ee=m.styled.div`
+`,re=m.styled.div`
   border-radius: ${e=>_.getBorderRadiusValueWithUnits(e.theme,(e==null?void 0:e.borderRadius)??"regular")};
   background: var(--gray-200, #dddfe4);
   position: relative;
@@ -320,7 +316,7 @@
     gap: 0.5rem;
   }
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
 
     & .campaign__user {
@@ -330,7 +326,7 @@
 `,Pe=m.styled.div`
   display: flex;
   gap: 1.5rem;
-`,Ce=u.forwardRef(({},e)=>{const n=X.useTheme();return t.jsxs(Se,{ref:e,theme:n,children:[t.jsx("div",{className:"campaign__left-section",children:t.jsx(ee,{theme:n,width:"15rem",height:"15rem",borderRadius:"edged"})}),t.jsxs("div",{className:"campaign__right-section",children:[t.jsxs($e,{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(ee,{theme:n,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),t.jsx(U,{theme:n,width:"75%"})]})]})]})}),Ie=({itemsCount:e=5,keyPrefix:n})=>t.jsx(Pe,{children:Array.from({length:e},(a,l)=>t.jsx(Ce,{},`${n}-skeleton-campaign-card-${l}`))}),Ee=({children:e,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:a=!1,itemsCount:l=5,keyPrefix:w})=>t.jsx(u.Suspense,{fallback:n,children:a===!0?t.jsx(Ie,{itemsCount:l,keyPrefix:w}):e}),Ne=m.styled.div`
+`,Ce=u.forwardRef(({},e)=>{const n=Z.useTheme();return t.jsxs(Se,{ref:e,theme:n,children:[t.jsx("div",{className:"campaign__left-section",children:t.jsx(re,{theme:n,width:"15rem",height:"15rem",borderRadius:"edged"})}),t.jsxs("div",{className:"campaign__right-section",children:[t.jsxs($e,{theme:n,children:[t.jsx(W,{heightCoeff:.75,theme:n,width:"35%"}),t.jsx(W,{heightCoeff:1.25,theme:n}),t.jsx(W,{heightCoeff:3,theme:n})]}),t.jsxs("div",{className:"campaign__user",children:[t.jsx(re,{theme:n,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),t.jsx(W,{theme:n,width:"75%"})]})]})]})}),Ie=({itemsCount:e=5,keyPrefix:n})=>t.jsx(Pe,{children:Array.from({length:e},(a,l)=>t.jsx(Ce,{},`${n}-skeleton-campaign-card-${l}`))}),De=({children:e,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:a=!1,itemsCount:l=5,keyPrefix:w})=>t.jsx(u.Suspense,{fallback:n,children:a===!0?t.jsx(Ie,{itemsCount:l,keyPrefix:w}):e}),Ne=m.styled.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -371,12 +367,12 @@
     top: 0;
     right: 0;
   }
-`,ke=m.styled(re.motion.div)`
+`,ke=m.styled(te.motion.div)`
   display: grid;
   grid-template-columns: repeat(${e=>e==null?void 0:e.numOfColumns}, 1fr);
   gap: 1.5rem;
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(${e=>e==null?void 0:e.numOfColumnsForMobile}, 1fr);
   }
-`,oe=u.forwardRef(({icon:e,title:n,numOfSlides:a=2,numOfSlidesForMobile:l=1,showNavigation:w=!0,children:p},h)=>{const[i,c]=u.useState(0),[d,S]=u.useState(1),[v,T]=u.useState(null),[j,D]=u.useState(null),f=ne.useDetectMobile(),P=50,b=(p==null?void 0:p.length)??1;u.useEffect(()=>{const s=()=>{S(f?l:a)};return window.addEventListener("resize",s),s(),()=>window.removeEventListener("resize",s)},[]);const C=p==null?void 0:p.slice(i,i+d),x=s=>{var g;(g=s==null?void 0:s.target)==null||g.blur(),i+d<b&&c(i+d)},E=s=>{var g;(g=s==null?void 0:s.target)==null||g.blur(),i-d>=0&&c(i-d)},M=s=>{var g;D(null),T((g=s==null?void 0:s.targetTouches["0"])==null?void 0:g.clientX)},F=s=>{var g;D((g=s==null?void 0:s.targetTouches["0"])==null?void 0:g.clientX)},B=()=>{if(!v||!j)return;const s=v-j;s>P&&x(),s<-P&&E()};return t.jsxs(Ne,{ref:h,...f?{onTouchStart:M,onTouchMove:F,onTouchEnd:B}:{},children:[t.jsx("div",{className:"scrollable-section__header",children:t.jsxs("div",{className:"scrollable-section__title",children:[_.isDefinedNotEmptyString(e)&&t.jsx(te,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),_.isDefinedNotEmptyString(n)&&t.jsx("div",{className:"title__text",children:n})]})}),t.jsx(ke,{numOfColumns:a,numOfColumnsForMobile:l,animate:{x:0,opacity:1},initial:{x:10,opacity:0},children:C},`scrollable-section__content-${i}`),w&&b>d&&!f&&t.jsxs("div",{className:"scrollable-section__navigation",children:[t.jsx(H,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i===0,onClick:E}),t.jsx(H,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i+d>=b,onClick:x})]})]})});oe.propTypes={icon:o.PropTypes.string,title:o.PropTypes.string,numOfSlides:o.PropTypes.number,numOfSlidesForMobile:o.PropTypes.number,showNavigation:o.PropTypes.bool};const Me=u.memo(ae),Fe=u.forwardRef(({sellerType:e="Shop",items:n=[],title:a,icon:l,isLoading:w,onSelectCard:p=()=>{},onSelectShop:h=()=>{},getImage:i=()=>{},campaignSingleText:c,upcomingCampaignText:d,salesCampaignTypes:S=[],startsInPrefixTextPlural:v,startsinSuffixTextPlural:T,startsInPrefixTextSingular:j,startsinSuffixTextSingular:D,endsInPrefixTextPlural:f,endsinSuffixTextPlural:P,endsInPrefixTextSingular:b,endsinSuffixTextSingular:C,numOfSlides:x=2,numOfSlidesForMobile:E=1,showNavigation:M=!0,numberOfListingsTextSingular:F,numberOfListingsTextPlural:B},s)=>{const g=ne.useDetectMobile(),R=u.useMemo(()=>n==null?void 0:n.map((r,q)=>t.jsx(Me,{className:"campaign-item",coverPhoto:i(r==null?void 0:r.coverPhoto,(r==null?void 0:r.uuid)||(r==null?void 0:r.campaignUuid)),description:r==null?void 0:r.description,endDate:r==null?void 0:r.endDate,salesPackages:r==null?void 0:r.salesPackages,sellerType:e,shopImage:r==null?void 0:r.profileImage,shopName:r==null?void 0:r.shopName,shopUuid:r==null?void 0:r.shopUuid,shopCategory:r==null?void 0:r.shopCategory,startDate:r==null?void 0:r.startDate,title:r==null?void 0:r.name,uuid:r==null?void 0:r.campaignUuid,onSelectCard:()=>p(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid),onSelectShop:()=>h(r==null?void 0:r.shopUuid),campaignSingleText:c,upcomingCampaignText:d,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:S,startsInPrefixTextPlural:v,startsinSuffixTextPlural:T,startsInPrefixTextSingular:j,startsinSuffixTextSingular:D,endsInPrefixTextPlural:f,endsinSuffixTextPlural:P,endsInPrefixTextSingular:b,endsinSuffixTextSingular:C,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:F,numberOfListingsTextPlural:B},`campaign__item__${q}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`)),[n]);return t.jsx(Ee,{isLoading:w,itemsCount:g?1:2,keyPrefix:"sales-camp",children:t.jsx(oe,{icon:l,title:a,numOfSlides:x,numOfSlidesForMobile:E,showNavigation:M,children:R})})});module.exports=Fe;
+`,ie=u.forwardRef(({icon:e,title:n,numOfSlides:a=2,numOfSlidesForMobile:l=1,showNavigation:w=!0,children:h},p)=>{const[i,c]=u.useState(0),[d,P]=u.useState(1),[b,T]=u.useState(null),[j,$]=u.useState(null),f=se.useDetectMobile(),C=50,v=(h==null?void 0:h.length)??1;u.useEffect(()=>{const s=()=>{P(f?l:a)};return window.addEventListener("resize",s),s(),()=>window.removeEventListener("resize",s)},[]);const I=h==null?void 0:h.slice(i,i+d),x=s=>{var g;(g=s==null?void 0:s.target)==null||g.blur(),i+d<v&&c(i+d)},N=s=>{var g;(g=s==null?void 0:s.target)==null||g.blur(),i-d>=0&&c(i-d)},E=s=>{var g;$(null),T((g=s==null?void 0:s.targetTouches["0"])==null?void 0:g.clientX)},R=s=>{var g;$((g=s==null?void 0:s.targetTouches["0"])==null?void 0:g.clientX)},z=()=>{if(!b||!j)return;const s=b-j;s>C&&x(),s<-C&&N()};return t.jsxs(Ne,{ref:p,...f?{onTouchStart:E,onTouchMove:R,onTouchEnd:z}:{},children:[t.jsx("div",{className:"scrollable-section__header",children:t.jsxs("div",{className:"scrollable-section__title",children:[_.isDefinedNotEmptyString(e)&&t.jsx(ne,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),_.isDefinedNotEmptyString(n)&&t.jsx("div",{className:"title__text",children:n})]})}),t.jsx(ke,{numOfColumns:a,numOfColumnsForMobile:l,animate:{x:0,opacity:1},initial:{x:10,opacity:0},children:I},`scrollable-section__content-${i}`),w&&v>d&&!f&&t.jsxs("div",{className:"scrollable-section__navigation",children:[t.jsx(J,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i===0,onClick:N}),t.jsx(J,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i+d>=v,onClick:x})]})]})});ie.propTypes={icon:o.PropTypes.string,title:o.PropTypes.string,numOfSlides:o.PropTypes.number,numOfSlidesForMobile:o.PropTypes.number,showNavigation:o.PropTypes.bool};const Me=u.memo(oe),Ee=u.forwardRef(({sellerType:e="Shop",items:n=[],title:a,icon:l,isLoading:w,onSelectCard:h=()=>{},onSelectShop:p=()=>{},getImage:i=()=>{},campaignSingleText:c,upcomingCampaignText:d,salesCampaignTypes:P=[],startsInPrefixTextPlural:b,startsinSuffixTextPlural:T,startsInPrefixTextSingular:j,startsinSuffixTextSingular:$,endsInPrefixTextPlural:f,endsinSuffixTextPlural:C,endsInPrefixTextSingular:v,endsinSuffixTextSingular:I,numOfSlides:x=2,numOfSlidesForMobile:N=1,showNavigation:E=!0,numberOfListingsTextSingular:R,numberOfListingsTextPlural:z},s)=>{const g=se.useDetectMobile(),O=u.useMemo(()=>n==null?void 0:n.map((r,V)=>t.jsx(Me,{className:"campaign-item",coverPhoto:i(r==null?void 0:r.coverPhoto,(r==null?void 0:r.uuid)||(r==null?void 0:r.campaignUuid)),description:r==null?void 0:r.description,endDate:r==null?void 0:r.endDate,salesPackages:r==null?void 0:r.salesPackages,sellerType:e,shopImage:r==null?void 0:r.profileImage,shopName:r==null?void 0:r.shopName,shopUuid:r==null?void 0:r.shopUuid,shopCategory:r==null?void 0:r.shopCategory,startDate:r==null?void 0:r.startDate,title:r==null?void 0:r.name,uuid:r==null?void 0:r.campaignUuid,onSelectCard:()=>h(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid),onSelectShop:()=>p(r==null?void 0:r.shopUuid),campaignSingleText:c,upcomingCampaignText:d,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:P,startsInPrefixTextPlural:b,startsinSuffixTextPlural:T,startsInPrefixTextSingular:j,startsinSuffixTextSingular:$,endsInPrefixTextPlural:f,endsinSuffixTextPlural:C,endsInPrefixTextSingular:v,endsinSuffixTextSingular:I,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:R,numberOfListingsTextPlural:z},`campaign__item__${V}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`)),[n]);return t.jsx(De,{isLoading:w,itemsCount:g?1:2,keyPrefix:"sales-camp",children:t.jsx(ie,{icon:l,title:a,numOfSlides:x,numOfSlidesForMobile:N,showNavigation:E,children:O})})});module.exports=Ee;

package/dist/SalesCampaignsSection.js

@@ -1,16 +1,16 @@
-import { jsx as t, jsxs as c, Fragment as De } from "react/jsx-runtime";
-import { createElement as Ce, forwardRef as V, useState as F, useEffect as ae, Suspense as _e, memo as Se, useMemo as Te } from "react";
+import { jsx as t, jsxs as c, Fragment as _e } from "react/jsx-runtime";
+import { createElement as Se, forwardRef as V, useState as z, useEffect as oe, Suspense as Te, memo as Ce, useMemo as Ne } from "react";
 import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as M, o as oe, k as K } from "./utils-BbgAIA9N.js";
-import { M as E } from "./consts-BuFChS64.js";
-import { m as ie } from "./motion-Ckekul_K.js";
+import { a as O, o as ie, k as Q } from "./utils-BbgAIA9N.js";
+import { M } from "./consts-BuFChS64.js";
+import { m as se } from "./motion-Ckekul_K.js";
 import { P as i } from "./index-CblbdqjE.js";
-import se from "./Icon.js";
+import le from "./Icon.js";
 import ke from "./Badge.js";
 import { u as Z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import Q from "./IconButton.js";
-import { u as le } from "./useDetectMobile-Bkvj0VMa.js";
-const Ne = h.div`
+import ee from "./IconButton.js";
+import { u as ce } from "./useDetectMobile-Bkvj0VMa.js";
+const De = h.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -18,7 +18,7 @@ const Ne = h.div`
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${M + "px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
@@ -26,7 +26,7 @@ const Ne = h.div`
     border-radius: 0;
   }
 `, Ie = h.div`
-  border-radius: ${(e) => M(e.theme, "edged")};
+  border-radius: ${(e) => O(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -49,7 +49,7 @@ const Ne = h.div`
     }
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${M + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
@@ -68,7 +68,7 @@ const Ne = h.div`
     font-weight: 500;
     font-size: 0.75rem;
     letter-spacing: 0.1rem;
-    color: var(--primary-500, #f59e0b);
+    color: var(--teal-500, #009ea8);
   }
 
   & .campaign-title-text {
@@ -86,6 +86,7 @@ const Ne = h.div`
   & .title-block-wrapper {
     display: flex;
     flex-direction: column;
+    gap: 0.1875rem;
   }
 
   & .timestamp-text {
@@ -110,6 +111,10 @@ const Ne = h.div`
       &.urgent {
         color: var(--primary-500, #f59e0b);
       }
+
+      &.starts-in {
+        color: var(--teal-500, #009ea8);
+      }
     }
 
     & .countdown-timer {
@@ -121,7 +126,7 @@ const Ne = h.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${M + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -135,25 +140,13 @@ const Ne = h.div`
       gap: 0.25rem;
     }
   }
-`, Ee = {
-  "#ADE3EB": "#76D0DB",
-  "#DDD6FE": "#C4B5FD",
-  "#FDE68A": "#FCD34D",
-  "#A7F3D0": "#6EE7B7",
-  "#BADFFF": "#87C6FA",
-  "#FECDD3": "#FDA4AF",
-  "#EFE2CF": "#EAD2AF",
-  "#DDDFE4": "#C4C8CF",
-  "#E7E5E4": "#D6D3D1",
-  "#FED7AA": "#FDBA74",
-  default: "#C4C8CF"
-}, ee = (e = !1, n = !1, o = !1) => `
+`, re = (e = !1, n = !1, o = !1) => `
     display: flex;
     ${n ? "flex-wrap: wrap;" : ""}
     ${n ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Fe = h(ie.div)`
+  `, Me = h(se.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -170,14 +163,14 @@ const Ne = h.div`
     text-decoration: none;
   }
 
-  ${ee(!0)}
+  ${re(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
-  color: ${(e) => e.isActive === !1 ? "var(--gray-900)" : "var(--primary-600)"};
+  color: var(--gray-950);
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${(e) => M(e.theme, "slight")};
+  border-radius: ${(e) => O(e.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -186,11 +179,9 @@ const Ne = h.div`
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${ee(!0, !1, !0)}
+    ${re(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
-    border: 3px solid
-      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : Ee[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
@@ -206,12 +197,6 @@ const Ne = h.div`
     }
   }
 
-  &.user-profile-item {
-    & .logo-wrapper {
-      border: 3px solid transparent;
-    }
-  }
-
   & .name {
     flex-grow: 15;
     font-size: 1.055rem;
@@ -231,16 +216,15 @@ const Ne = h.div`
   &:hover {
     cursor: pointer;
     background-color: var(--gray-95080, #14161acc);
-    color: var(--gray-600, #676e79);
   }
-`, Me = h.div`
+`, ze = h.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, ze = h.div`
-  border-radius: ${(e) => M(e.theme, e.borderRadius || "slight")};
+`, Oe = h.div`
+  border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
   background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
   height: 1.5rem;
@@ -255,23 +239,23 @@ const Ne = h.div`
   & i {
     font-size: 0.813rem;
   }
-`, ce = (e) => {
+`, de = (e) => {
   const {
     uuid: n,
     hasPermission: o = !0,
     isUser: l,
-    image: w,
+    image: v,
     name: u,
     notifications: f = 0,
     color: s = "primary",
     size: d = "large",
     style: g,
-    disabled: S,
+    disabled: C,
     onClick: b = () => {
     },
     isActive: $,
-    className: D,
-    shopCategory: C,
+    className: _,
+    shopCategory: S,
     // new
     themeData: p
   } = e, y = {
@@ -279,30 +263,30 @@ const Ne = h.div`
     color: s,
     size: d,
     style: g,
-    disabled: S
+    disabled: C
   };
-  return /* @__PURE__ */ Ce(
-    Fe,
+  return /* @__PURE__ */ Se(
+    Me,
     {
       onClick: (k) => {
         k.stopPropagation(), o === !0 && (b == null || b());
       },
       ...y,
       key: u,
-      className: `profile-item ${D}`,
+      className: `profile-item ${_}`,
       hasPermission: o,
       isActive: $,
       themeColor: (p == null ? void 0 : p.code) || "transparent"
     },
-    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: w }),
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: v }),
     /* @__PURE__ */ c("div", { children: [
       /* @__PURE__ */ t("div", { className: "name", children: u }),
-      !l && /* @__PURE__ */ t("div", { className: "description", children: C }),
+      !l && /* @__PURE__ */ t("div", { className: "description", children: S }),
       f > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(ke, { className: "badge", color: "danger", size: "small", children: f > 99 ? "99+" : f }) })
     ] })
   );
 };
-ce.propTypes = {
+de.propTypes = {
   id: i.any,
   isUserProfile: i.bool,
   themeColor: i.string,
@@ -324,21 +308,21 @@ ce.propTypes = {
   onSelect: i.func,
   hasPermission: i.bool
 };
-const re = (e, n) => {
+const te = (e, n) => {
   if (!e || !n) return null;
   const o = e.getTime() - n.getTime(), l = 24 * 60 * 60 * 1e3;
   return o >= 0 ? Math.ceil(o / l) : Math.floor(o / l);
-}, te = (e) => {
+}, ne = (e) => {
   if (e !== void 0) {
     const n = new Date(e), o = n.getFullYear(), l = n.getMonth() + 1;
     return `${String(n.getDate()).padStart(2)}. ${l}. ${o}.`;
   }
-}, de = V((e, n) => {
-  var J;
+}, ge = V((e, n) => {
+  var K;
   const o = Z(), {
     // uuid,
     shopUuid: l,
-    title: w = "",
+    title: v = "",
     // description,
     // badges,
     coverPhoto: u,
@@ -347,95 +331,95 @@ const re = (e, n) => {
     startDate: s,
     endDate: d,
     salesPackages: g,
-    shopName: S,
+    shopName: C,
     shopCategory: b,
     shopImage: $,
-    className: D,
-    onSelectCard: C = () => {
+    className: _,
+    onSelectCard: S = () => {
     },
     onSelectShop: p = () => {
     },
-    upcoming: T = !1,
+    upcoming: N = !1,
     upcomingCampaignText: y,
     campaignSingleText: k,
     salesCampaignTypes: x = [],
     startsInPrefixTextPlural: I,
-    startsinSuffixTextPlural: z,
-    startsInPrefixTextSingular: A,
-    startsinSuffixTextSingular: O,
+    startsinSuffixTextPlural: L,
+    startsInPrefixTextSingular: U,
+    startsinSuffixTextSingular: R,
     endsInPrefixTextPlural: a,
     endsinSuffixTextPlural: m,
-    endsInPrefixTextSingular: L,
+    endsInPrefixTextSingular: E,
     endsinSuffixTextSingular: r,
     themeData: X,
     numberOfListings: G,
-    numberOfListingsTextSingular: me,
-    numberOfListingsTextPlural: he,
-    ...ue
-  } = e, fe = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1, pe = re(
+    numberOfListingsTextSingular: he,
+    numberOfListingsTextPlural: ue,
+    ...fe
+  } = e, q = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1, pe = te(
     s ? new Date(s) : null,
     /* @__PURE__ */ new Date()
-  ), U = re(
+  ), j = te(
     d ? new Date(d) : null,
     /* @__PURE__ */ new Date()
-  ), xe = U !== null && U <= 3 && U > 0, q = d ? new Date(d).getTime() : null, ve = Date.now(), Y = q !== null ? q - ve : null, B = Y !== null && Y > 0 && Y < 24 * 60 * 60 * 1e3, H = (_, j, v, P, N) => v === 1 ? `${_} ${v} ${P}` : `${j} ${v} ${N}`, we = () => {
+  ), xe = j !== null && j <= 2 && j > 0, H = d ? new Date(d).getTime() : null, we = Date.now(), Y = H !== null ? H - we : null, B = Y !== null && Y > 0 && Y < 24 * 60 * 60 * 1e3, J = (T, F, w, P, D) => w === 1 ? `${T} ${w} ${P}` : `${F} ${w} ${D}`, ve = () => {
     if (!d) return null;
-    const _ = be, v = new Date(d).getTime() - _.getTime();
-    if (v <= 0) return null;
-    const P = Math.floor(v / (1e3 * 60 * 60)), N = Math.floor(v % (1e3 * 60 * 60) / (1e3 * 60)), $e = Math.floor(v % (1e3 * 60) / 1e3);
-    return { hours: P, minutes: N, seconds: $e };
-  }, [be, ye] = F(/* @__PURE__ */ new Date());
-  ae(() => {
+    const T = be, w = new Date(d).getTime() - T.getTime();
+    if (w <= 0) return null;
+    const P = Math.floor(w / (1e3 * 60 * 60)), D = Math.floor(w % (1e3 * 60 * 60) / (1e3 * 60)), $e = Math.floor(w % (1e3 * 60) / 1e3);
+    return { hours: P, minutes: D, seconds: $e };
+  }, [be, ye] = z(/* @__PURE__ */ new Date());
+  oe(() => {
     if (!B) return;
-    const _ = setInterval(() => {
+    const T = setInterval(() => {
       ye(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(_);
+    return () => clearInterval(T);
   }, [B]);
-  const R = B ? we() : null;
+  const W = B ? ve() : null;
   return /* @__PURE__ */ c(
-    Ne,
+    De,
     {
       ref: n,
       theme: o,
-      className: D,
-      onClick: C,
-      ...ue,
+      className: _,
+      onClick: S,
+      ...fe,
       children: [
         /* @__PURE__ */ c(Ie, { theme: o, onClick: () => f == null ? void 0 : f(), children: [
           /* @__PURE__ */ t("img", { src: u }),
-          /* @__PURE__ */ t(Me, { children: g == null ? void 0 : g.map((_, j) => {
-            var v, P;
+          /* @__PURE__ */ t(ze, { children: g == null ? void 0 : g.map((T, F) => {
+            var w, P;
             return /* @__PURE__ */ t(
-              ze,
+              Oe,
               {
-                color: (v = x == null ? void 0 : x.find((N) => N.value === _)) == null ? void 0 : v.color,
+                color: (w = x == null ? void 0 : x.find((D) => D.value === T)) == null ? void 0 : w.color,
                 theme: o,
                 children: /* @__PURE__ */ t(
-                  se,
+                  le,
                   {
-                    icon: (P = x == null ? void 0 : x.find((N) => N.value === _)) == null ? void 0 : P.icon
+                    icon: (P = x == null ? void 0 : x.find((D) => D.value === T)) == null ? void 0 : P.icon
                   }
                 )
               },
-              `package__${j}`
+              `package__${F}`
             );
           }) })
         ] }),
         /* @__PURE__ */ c(Pe, { theme: o, children: [
           /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ c("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ t("div", { className: "campaign-title", children: (J = T ? y : k) == null ? void 0 : J.toUpperCase() }),
-            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: w }),
+            /* @__PURE__ */ t("div", { className: "campaign-title", children: (K = N ? y : k) == null ? void 0 : K.toUpperCase() }),
+            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: v }),
             d && s && /* @__PURE__ */ c("div", { children: [
-              te(s),
+              ne(s),
               " - ",
-              te(d)
+              ne(d)
             ] }),
             /* @__PURE__ */ c("div", { className: "timestamp-text", children: [
               G > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
                 G,
                 " ",
-                G === 1 ? me : he,
+                G === 1 ? he : ue,
                 " ",
                 "∙",
                 " "
@@ -443,34 +427,34 @@ const re = (e, n) => {
               /* @__PURE__ */ t(
                 "span",
                 {
-                  className: `duration-text ${xe ? "urgent" : ""}`,
-                  children: B && R ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
-                    L,
+                  className: `duration-text ${xe ? "urgent" : ""} ${q ? "" : "starts-in"}`,
+                  children: B && W ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
+                    E,
                     " ",
-                    R.hours.toString().padStart(2, "0"),
+                    W.hours.toString().padStart(2, "0"),
                     ":",
-                    R.minutes.toString().padStart(2, "0"),
+                    W.minutes.toString().padStart(2, "0"),
                     ":",
-                    R.seconds.toString().padStart(2, "0")
-                  ] }) : fe ? H(
-                    L,
+                    W.seconds.toString().padStart(2, "0")
+                  ] }) : q ? J(
+                    E,
                     a,
-                    U,
+                    j,
                     r,
                     m
-                  ) : H(
-                    A,
+                  ) : J(
+                    U,
                     I,
                     pe,
-                    O,
-                    z
+                    R,
+                    L
                   )
                 }
               )
             ] })
           ] }) }),
           /* @__PURE__ */ t(
-            ce,
+            de,
             {
               hasPermission: !0,
               image: (
@@ -491,7 +475,7 @@ const re = (e, n) => {
               themeData: X,
               isActive: !0,
               isUser: !1,
-              name: S,
+              name: C,
               shopCategory: b,
               onClick: () => p(l)
             }
@@ -501,7 +485,7 @@ const re = (e, n) => {
     }
   );
 });
-de.propTypes = {
+ge.propTypes = {
   title: i.oneOfType([i.string, i.element]),
   numberOfListings: i.number,
   dropdown: i.any,
@@ -538,7 +522,7 @@ h.div`
     }
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${M + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
@@ -546,19 +530,19 @@ h.div`
     }
   }
 `;
-const W = h.div`
+const A = h.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${oe("-90deg")}
-`, Ae = h.div`
+  ${ie("-90deg")}
+`, Le = h.div`
   display: flex;
   flex-direction: ${(e) => e != null && e.row ? "row" : "column"};
   gap: ${(e) => (e == null ? void 0 : e.gap) ?? "0.5rem"};
   width: ${(e) => (e == null ? void 0 : e.width) ?? "100%"};
-`, ne = h.div`
-  border-radius: ${(e) => M(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, ae = h.div`
+  border-radius: ${(e) => O(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"};
@@ -567,10 +551,10 @@ const W = h.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${oe()}
-`, Oe = h.div`
+  ${ie()}
+`, Ue = h.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => M(e.theme, "edged")};
+  border-radius: ${(e) => O(e.theme, "edged")};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
   border: 1px solid var(--gray-95012, #14161a1f);
 
@@ -597,21 +581,21 @@ const W = h.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${M + "px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`, Le = h.div`
+`, Re = h.div`
   display: flex;
   gap: 1.5rem;
-`, Ue = V(({}, e) => {
+`, Ee = V(({}, e) => {
   const n = Z();
-  return /* @__PURE__ */ c(Oe, { ref: e, theme: n, children: [
+  return /* @__PURE__ */ c(Ue, { ref: e, theme: n, children: [
     /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
-      ne,
+      ae,
       {
         theme: n,
         width: "15rem",
@@ -620,14 +604,14 @@ const W = h.div`
       }
     ) }),
     /* @__PURE__ */ c("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ c(Ae, { theme: n, children: [
-        /* @__PURE__ */ t(W, { heightCoeff: 0.75, theme: n, width: "35%" }),
-        /* @__PURE__ */ t(W, { heightCoeff: 1.25, theme: n }),
-        /* @__PURE__ */ t(W, { heightCoeff: 3, theme: n })
+      /* @__PURE__ */ c(Le, { theme: n, children: [
+        /* @__PURE__ */ t(A, { heightCoeff: 0.75, theme: n, width: "35%" }),
+        /* @__PURE__ */ t(A, { heightCoeff: 1.25, theme: n }),
+        /* @__PURE__ */ t(A, { heightCoeff: 3, theme: n })
       ] }),
       /* @__PURE__ */ c("div", { className: "campaign__user", children: [
         /* @__PURE__ */ t(
-          ne,
+          ae,
           {
             theme: n,
             width: "2.5rem",
@@ -635,21 +619,21 @@ const W = h.div`
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ t(W, { theme: n, width: "75%" })
+        /* @__PURE__ */ t(A, { theme: n, width: "75%" })
       ] })
     ] })
   ] });
-}), Be = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(Le, { children: Array.from({ length: e }, (o, l) => /* @__PURE__ */ t(
-  Ue,
+}), je = ({ itemsCount: e = 5, keyPrefix: n }) => /* @__PURE__ */ t(Re, { children: Array.from({ length: e }, (o, l) => /* @__PURE__ */ t(
+  Ee,
   {},
   `${n}-skeleton-campaign-card-${l}`
-)) }), Re = ({
+)) }), Be = ({
   children: e,
-  fallbackComponent: n = /* @__PURE__ */ t(De, {}),
+  fallbackComponent: n = /* @__PURE__ */ t(_e, {}),
   isLoading: o = !1,
   itemsCount: l = 5,
-  keyPrefix: w
-}) => /* @__PURE__ */ t(_e, { fallback: n, children: o === !0 ? /* @__PURE__ */ t(Be, { itemsCount: l, keyPrefix: w }) : e }), je = h.div`
+  keyPrefix: v
+}) => /* @__PURE__ */ t(Te, { fallback: n, children: o === !0 ? /* @__PURE__ */ t(je, { itemsCount: l, keyPrefix: v }) : e }), We = h.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -690,27 +674,27 @@ const W = h.div`
     top: 0;
     right: 0;
   }
-`, We = h(ie.div)`
+`, Fe = h(se.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
 
-  @media (max-width: ${E + "px"}) {
+  @media (max-width: ${M + "px"}) {
     grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
   }
-`, ge = V(
+`, me = V(
   ({
     icon: e,
     title: n,
     numOfSlides: o = 2,
     numOfSlidesForMobile: l = 1,
-    showNavigation: w = !0,
+    showNavigation: v = !0,
     children: u
   }, f) => {
-    const [s, d] = F(0), [g, S] = F(1), [b, $] = F(null), [D, C] = F(null), p = le(), T = 50, y = (u == null ? void 0 : u.length) ?? 1;
-    ae(() => {
+    const [s, d] = z(0), [g, C] = z(1), [b, $] = z(null), [_, S] = z(null), p = ce(), N = 50, y = (u == null ? void 0 : u.length) ?? 1;
+    oe(() => {
       const a = () => {
-        S(p ? l : o);
+        C(p ? l : o);
       };
       return window.addEventListener("resize", a), a(), () => window.removeEventListener("resize", a);
     }, []);
@@ -722,24 +706,24 @@ const W = h.div`
       (m = a == null ? void 0 : a.target) == null || m.blur(), s - g >= 0 && d(s - g);
     };
     return /* @__PURE__ */ c(
-      je,
+      We,
       {
         ref: f,
         ...p ? { onTouchStart: (a) => {
           var m;
-          C(null), $((m = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : m.clientX);
+          S(null), $((m = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : m.clientX);
         }, onTouchMove: (a) => {
           var m;
-          C((m = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : m.clientX);
+          S((m = a == null ? void 0 : a.targetTouches["0"]) == null ? void 0 : m.clientX);
         }, onTouchEnd: () => {
-          if (!b || !D) return;
-          const a = b - D;
-          a > T && x(), a < -T && I();
+          if (!b || !_) return;
+          const a = b - _;
+          a > N && x(), a < -N && I();
         } } : {},
         children: [
           /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ c("div", { className: "scrollable-section__title", children: [
-            K(e) && /* @__PURE__ */ t(
-              se,
+            Q(e) && /* @__PURE__ */ t(
+              le,
               {
                 icon: e,
                 color: "primary",
@@ -747,10 +731,10 @@ const W = h.div`
                 className: "title__icon"
               }
             ),
-            K(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
+            Q(n) && /* @__PURE__ */ t("div", { className: "title__text", children: n })
           ] }) }),
           /* @__PURE__ */ t(
-            We,
+            Fe,
             {
               numOfColumns: o,
               numOfColumnsForMobile: l,
@@ -766,9 +750,9 @@ const W = h.div`
             },
             `scrollable-section__content-${s}`
           ),
-          w && y > g && !p && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
+          v && y > g && !p && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
             /* @__PURE__ */ t(
-              Q,
+              ee,
               {
                 icon: "angle-left",
                 borderRadius: "curved",
@@ -780,7 +764,7 @@ const W = h.div`
               }
             ),
             /* @__PURE__ */ t(
-              Q,
+              ee,
               {
                 icon: "angle-right",
                 borderRadius: "curved",
@@ -797,20 +781,20 @@ const W = h.div`
     );
   }
 );
-ge.propTypes = {
+me.propTypes = {
   icon: i.string,
   title: i.string,
   numOfSlides: i.number,
   numOfSlidesForMobile: i.number,
   showNavigation: i.bool
 };
-const Ve = Se(de), nr = V(
+const Ae = Ce(ge), tr = V(
   ({
     sellerType: e = "Shop",
     items: n = [],
     title: o,
     icon: l,
-    isLoading: w,
+    isLoading: v,
     onSelectCard: u = () => {
     },
     onSelectShop: f = () => {
@@ -819,23 +803,23 @@ const Ve = Se(de), nr = V(
     },
     campaignSingleText: d,
     upcomingCampaignText: g,
-    salesCampaignTypes: S = [],
+    salesCampaignTypes: C = [],
     startsInPrefixTextPlural: b,
     startsinSuffixTextPlural: $,
-    startsInPrefixTextSingular: D,
-    startsinSuffixTextSingular: C,
+    startsInPrefixTextSingular: _,
+    startsinSuffixTextSingular: S,
     endsInPrefixTextPlural: p,
-    endsinSuffixTextPlural: T,
+    endsinSuffixTextPlural: N,
     endsInPrefixTextSingular: y,
     endsinSuffixTextSingular: k,
     numOfSlides: x = 2,
     numOfSlidesForMobile: I = 1,
-    showNavigation: z = !0,
-    numberOfListingsTextSingular: A,
-    numberOfListingsTextPlural: O
+    showNavigation: L = !0,
+    numberOfListingsTextSingular: U,
+    numberOfListingsTextPlural: R
   }, a) => {
-    const m = le(), L = Te(() => n == null ? void 0 : n.map((r, X) => /* @__PURE__ */ t(
-      Ve,
+    const m = ce(), E = Ne(() => n == null ? void 0 : n.map((r, X) => /* @__PURE__ */ t(
+      Ae,
       {
         className: "campaign-item",
         coverPhoto: s(
@@ -858,37 +842,37 @@ const Ve = Se(de), nr = V(
         campaignSingleText: d,
         upcomingCampaignText: g,
         upcoming: r == null ? void 0 : r.upcoming,
-        salesCampaignTypes: S,
+        salesCampaignTypes: C,
         startsInPrefixTextPlural: b,
         startsinSuffixTextPlural: $,
-        startsInPrefixTextSingular: D,
-        startsinSuffixTextSingular: C,
+        startsInPrefixTextSingular: _,
+        startsinSuffixTextSingular: S,
         endsInPrefixTextPlural: p,
-        endsinSuffixTextPlural: T,
+        endsinSuffixTextPlural: N,
         endsInPrefixTextSingular: y,
         endsinSuffixTextSingular: k,
         themeData: r == null ? void 0 : r.themeData,
         numberOfListings: r == null ? void 0 : r.numberOfListings,
-        numberOfListingsTextSingular: A,
-        numberOfListingsTextPlural: O
+        numberOfListingsTextSingular: U,
+        numberOfListingsTextPlural: R
       },
       `campaign__item__${X}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
     )), [n]);
     return /* @__PURE__ */ t(
-      Re,
+      Be,
       {
-        isLoading: w,
+        isLoading: v,
         itemsCount: m ? 1 : 2,
         keyPrefix: "sales-camp",
         children: /* @__PURE__ */ t(
-          ge,
+          me,
           {
             icon: l,
             title: o,
             numOfSlides: x,
             numOfSlidesForMobile: I,
-            showNavigation: z,
-            children: L
+            showNavigation: L,
+            children: E
           }
         )
       }
@@ -896,5 +880,5 @@ const Ve = Se(de), nr = V(
   }
 );
 export {
-  nr as default
+  tr as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.124",
+  "version": "4.0.125",
   "description": "React component library",
   "type": "module",
   "keywords": [