@lanaco/lnc-react-ui 4.0.221 → 4.0.222

package/dist/SalesCampaignsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),l=require("react"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./utils-CITgSxXe.cjs"),N=require("./breakpoints-CcVm-gVm.cjs"),ue=require("./Icon.cjs"),ce=require("./ShopAvatar-CV3lj34D.cjs"),$e=require("./Badge.cjs"),me=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),de=require("./IconButton.cjs"),pe=require("./useDetectMobile-DYV6V1yw.cjs"),ke=require("./index-CX2A-q39.cjs"),_e=require("./motion-B_VPZaJq.cjs"),a=require("./style-BAcV7F53.cjs"),Ce=y.styled.a`
+"use strict";const r=require("react/jsx-runtime"),i=require("react"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./utils-CITgSxXe.cjs"),N=require("./breakpoints-CcVm-gVm.cjs"),me=require("./Icon.cjs"),ce=require("./ShopAvatar-CV3lj34D.cjs"),$e=require("./Badge.cjs"),ue=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),de=require("./IconButton.cjs"),pe=require("./useDetectMobile-DYV6V1yw.cjs"),_e=require("./index-CX2A-q39.cjs"),ke=require("./motion-B_VPZaJq.cjs"),s=require("./style-BAcV7F53.cjs"),Ce=j.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -19,12 +19,30 @@
         background: #ffffff;
       `}
 
+  &.horizontal-campaign-item {
+    flex-direction: row;
+
+    & img {
+      max-width: 13.75rem;
+      max-height: 13.75rem;
+    }
+  }
+
   @media ${N.down("S")} {
     width: 100%;
     gap: 0;
+
+    &.horizontal-campaign-item {
+      flex-direction: column;
+
+      & img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
   }
-`,Ie=y.styled.div`
-  border-radius: ${n=>f.getBorderRadiusValueWithUnits(n.theme,"edged")};
+`,Ie=j.styled.div`
+  border-radius: ${n=>b.getBorderRadiusValueWithUnits(n.theme,"edged")};
   cursor: pointer;
 
   position: relative;
@@ -47,7 +65,7 @@
   @media ${N.down("S")} {
     width: 14.5rem;
   }
-`,De=y.styled.div`
+`,Ne=j.styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -155,13 +173,13 @@
       gap: 0.25rem;
     }
   }
-`,ge=(n=!1,t=!1,s=!1)=>`
+`,ge=(n=!1,t=!1,a=!1)=>`
     display: flex;
     ${t?"flex-wrap: wrap;":""}
     ${t?"":"flex-wrap: nowrap;"}
     ${n?"align-items: center;":""}
-    ${s?"justify-content: center;":""}
-  `,Ne=y.styled.a`
+    ${a?"justify-content: center;":""}
+  `,De=j.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   ${n=>n.hasPermission===!0&&"cursor: pointer"};
@@ -185,7 +203,7 @@
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: ${n=>f.getBorderRadiusValueWithUnits(n.theme,"slight")};
+  border-radius: ${n=>b.getBorderRadiusValueWithUnits(n.theme,"slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -237,14 +255,14 @@
     padding: 0;
     font-size: 0.875rem;
   }
-`,Pe=y.styled.div`
+`,Pe=j.styled.div`
   position: absolute;
   top: 0.5rem;
   ${n=>n.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`,Te=y.styled.div`
-  border-radius: ${n=>f.getBorderRadiusValueWithUnits(n.theme,n.borderRadius||"slight")};
+`,ze=j.styled.div`
+  border-radius: ${n=>b.getBorderRadiusValueWithUnits(n.theme,n.borderRadius||"slight")};
   background-color: ${n=>n==null?void 0:n.color};
   color: white;
   height: 1.5rem;
@@ -259,7 +277,7 @@
   & i {
     font-size: 0.813rem;
   }
-`,Le=l.forwardRef(({src:n,...t},s)=>{const o=l.useRef();return l.useEffect(()=>{var h;const d=g=>{g.target.src=ce.DefaultShopImage,g.onerror=null};return(h=o==null?void 0:o.current)==null||h.addEventListener("error",d),()=>{var g;(g=o==null?void 0:o.current)==null||g.removeEventListener("error",d)}},[]),r.jsx(l.Fragment,{ref:s,children:f.isDefinedNotEmptyString(n)?r.jsx("img",{ref:o,src:n,...t}):r.jsx("img",{src:ce.DefaultShopImage,...t})})}),ze=n=>{const{uuid:t,hasPermission:s=!0,isUser:o,image:d,imageComponent:h,name:g,notifications:u=0,color:w="primary",size:i="large",style:v,disabled:m,onClick:$=()=>{},isActive:S,className:j,shopCategory:P,themeData:k,LinkComponent:C}=n,c=C||"a",I={theme:me.useTheme(),color:w,size:i,style:v,disabled:m};return l.createElement(Ne,{onClick:p=>{p==null||p.preventDefault(),p.stopPropagation(),s===!0&&($==null||$())},...I,key:g,className:`profile-item ${j}`,hasPermission:s,isActive:S,themeColor:(k==null?void 0:k.code)||"transparent",as:c,...C?{to:`/${o?"user":"shop"}/${t}`}:{href:`/${o?"user":"shop"}/${t}`}},r.jsx("div",{className:"logo-wrapper",children:f.isDefined(h)?h:d}),r.jsxs("div",{children:[r.jsx("div",{className:"name",children:g}),!o&&r.jsx("div",{className:"description",children:P}),u>0&&r.jsx("div",{className:"notifications-number",children:r.jsx($e,{className:"badge",color:"danger",size:"small",children:u>99?"99+":u})})]}))},he=n=>{if(n!==void 0){const t=new Date(n),s=t.getFullYear(),o=t.getMonth()+1;return`${String(t.getDate()).padStart(2)}. ${o}. ${s}.`}},Re=l.forwardRef((n,t)=>{var le;const s=me.useTheme(),{uuid:o,shopUuid:d,title:h="",coverPhoto:g,onSelect:u,startDate:w,endDate:i,salesPackages:v,shopName:m,shopCategory:$,shopImage:S,shopImageComponent:j,className:P,onSelectCard:k=()=>{},onSelectShop:C=()=>{},upcoming:c=!1,upcomingCampaignText:x,campaignSingleText:I,salesCampaignTypes:p=[],startsInPrefixTextPlural:B,startsinSuffixTextPlural:V,startsInPrefixTextSingular:G,startsinSuffixTextSingular:re,endsInPrefixTextPlural:F,endsinSuffixTextPlural:A,endsInPrefixTextSingular:U,endsinSuffixTextSingular:H,endedText:Y,themeData:ne,numberOfListings:L,numberOfListingsTextSingular:Z,numberOfListingsTextPlural:q,metadata:e,LinkComponent:W,sponsored:te,...J}=n,fe=W||"a",oe=l.useRef(),E=f.getDayNumberPrecise(w,i),K=E!==-1&&(E==null?void 0:E.isEnded)===!0,Q=E!==-1&&!K,X=f.calcDaysUntil(w),z=f.calcDaysRemaining(i),xe=z!==null&&z<=2&&z>0,se=f.normalizeDate(i),ae=se?new Date(se):null,be=new Date,ee=ae?ae.getTime()-be.getTime():null,M=ee!==null&&ee>0&&ee<24*60*60*1e3,ie=(b,R,D,_,T)=>D===1?`${b} ${D} ${_}`:`${R} ${D} ${T}`,we=()=>{if(!i)return null;const b=f.normalizeDate(i),R=b?new Date(b):null;if(!R)return null;const D=ve,_=R.getTime()-D.getTime();if(_<=0)return null;const T=Math.floor(_/(1e3*60*60)),je=Math.floor(_%(1e3*60*60)/(1e3*60)),ye=Math.floor(_%(1e3*60)/1e3);return{hours:T,minutes:je,seconds:ye}},[ve,Se]=l.useState(new Date);l.useEffect(()=>{if(!M)return;const b=setInterval(()=>{Se(new Date)},1e3);return()=>clearInterval(b)},[M]);const O=M?we():null;return r.jsxs(Ce,{ref:oe,theme:s,className:P,name:e==null?void 0:e.name,"data-accessor":e==null?void 0:e.accessor,onClick:b=>k(b,oe),as:fe,...W?{to:`/shop/${d}/campaign/${o}`}:{href:`/shop/${d}/campaign/${o}`},sponsored:te,...J,children:[r.jsxs(Ie,{theme:s,children:[r.jsx("img",{src:g}),r.jsx(Pe,{children:v==null?void 0:v.map((b,R)=>{var D,_;return r.jsx(Te,{color:(D=p==null?void 0:p.find(T=>T.value===b))==null?void 0:D.color,theme:s,children:r.jsx(ue,{icon:(_=p==null?void 0:p.find(T=>T.value===b))==null?void 0:_.icon})},`package__${R}`)})})]}),r.jsxs(De,{theme:s,children:[r.jsx("div",{className:"text-block-wrapper",children:r.jsxs("div",{className:"title-block-wrapper",children:[r.jsx("div",{className:"campaign-title",children:(le=c?x:I)==null?void 0:le.toUpperCase()}),r.jsx("div",{className:"campaign-title-text",children:h}),i&&w&&r.jsxs("div",{className:"campaign-date",children:[he(w)," - ",he(i)]}),r.jsxs("div",{className:"timestamp-text",children:[L>0&&r.jsxs("span",{className:"listings-text",children:[L," ",L===1?Z:q," ","∙"," "]}),r.jsx("span",{className:`duration-text ${xe?"urgent":""} ${Q?"":"starts-in"}`,children:M&&O?r.jsxs("div",{className:"countdown-timer",children:[U," ",O.hours.toString().padStart(2,"0"),":",O.minutes.toString().padStart(2,"0"),":",O.seconds.toString().padStart(2,"0")]}):Q&&!K&&z!==null&&z>0?ie(U,F,z,H,A):K?Y||"Završena":!Q&&X!==null&&X>0?ie(G,B,X,re,V):null})]})]})}),r.jsx(ze,{hasPermission:!0,image:r.jsx(Le,{src:S}),imageComponent:j,themeData:ne,isActive:!0,isUser:!1,name:m,shopCategory:$,uuid:d,onClick:()=>C(d)})]})]})}),Ee=y.styled.div`
+`,Te=i.forwardRef(({src:n,...t},a)=>{const o=i.useRef();return i.useEffect(()=>{var u;const l=p=>{p.target.src=ce.DefaultShopImage,p.onerror=null};return(u=o==null?void 0:o.current)==null||u.addEventListener("error",l),()=>{var p;(p=o==null?void 0:o.current)==null||p.removeEventListener("error",l)}},[]),r.jsx(i.Fragment,{ref:a,children:b.isDefinedNotEmptyString(n)?r.jsx("img",{ref:o,src:n,...t}):r.jsx("img",{src:ce.DefaultShopImage,...t})})}),Le=n=>{const{uuid:t,hasPermission:a=!0,isUser:o,image:l,imageComponent:u,name:p,notifications:y=0,color:c="primary",size:f="large",style:d,disabled:k,onClick:m=()=>{},isActive:D,className:v,shopCategory:S,themeData:$,LinkComponent:C}=n,P=C||"a",x={theme:ue.useTheme(),color:c,size:f,style:d,disabled:k};return i.createElement(De,{onClick:h=>{h==null||h.preventDefault(),h.stopPropagation(),a===!0&&(m==null||m())},...x,key:p,className:`profile-item ${v}`,hasPermission:a,isActive:D,themeColor:($==null?void 0:$.code)||"transparent",as:P,...C?{to:`/${o?"user":"shop"}/${t}`}:{href:`/${o?"user":"shop"}/${t}`}},r.jsx("div",{className:"logo-wrapper",children:b.isDefined(u)?u:l}),r.jsxs("div",{children:[r.jsx("div",{className:"name",children:p}),!o&&r.jsx("div",{className:"description",children:S}),y>0&&r.jsx("div",{className:"notifications-number",children:r.jsx($e,{className:"badge",color:"danger",size:"small",children:y>99?"99+":y})})]}))},he=n=>{if(n!==void 0){const t=new Date(n),a=t.getFullYear(),o=t.getMonth()+1;return`${String(t.getDate()).padStart(2)}. ${o}. ${a}.`}},Re=i.forwardRef((n,t)=>{var le;const a=ue.useTheme(),{uuid:o,shopUuid:l,title:u="",coverPhoto:p,onSelect:y,startDate:c,endDate:f,salesPackages:d,shopName:k,shopCategory:m,shopImage:D,shopImageComponent:v,className:S,onSelectCard:$=()=>{},onSelectShop:C=()=>{},upcoming:P=!1,upcomingCampaignText:g,campaignSingleText:x,salesCampaignTypes:h=[],startsInPrefixTextPlural:B,startsinSuffixTextPlural:V,startsInPrefixTextSingular:G,startsinSuffixTextSingular:F,endsInPrefixTextPlural:A,endsinSuffixTextPlural:H,endsInPrefixTextSingular:U,endsinSuffixTextSingular:Y,endedText:Z,themeData:ne,numberOfListings:z,numberOfListingsTextSingular:J,numberOfListingsTextPlural:q,metadata:e,LinkComponent:W,sponsored:te,...K}=n,fe=W||"a",oe=i.useRef(),E=b.getDayNumberPrecise(c,f),Q=E!==-1&&(E==null?void 0:E.isEnded)===!0,X=E!==-1&&!Q,ee=b.calcDaysUntil(c),L=b.calcDaysRemaining(f),xe=L!==null&&L<=2&&L>0,ae=b.normalizeDate(f),se=ae?new Date(ae):null,be=new Date,re=se?se.getTime()-be.getTime():null,M=re!==null&&re>0&&re<24*60*60*1e3,ie=(w,R,I,_,T)=>I===1?`${w} ${I} ${_}`:`${R} ${I} ${T}`,we=()=>{if(!f)return null;const w=b.normalizeDate(f),R=w?new Date(w):null;if(!R)return null;const I=ve,_=R.getTime()-I.getTime();if(_<=0)return null;const T=Math.floor(_/(1e3*60*60)),je=Math.floor(_%(1e3*60*60)/(1e3*60)),ye=Math.floor(_%(1e3*60)/1e3);return{hours:T,minutes:je,seconds:ye}},[ve,Se]=i.useState(new Date);i.useEffect(()=>{if(!M)return;const w=setInterval(()=>{Se(new Date)},1e3);return()=>clearInterval(w)},[M]);const O=M?we():null;return r.jsxs(Ce,{ref:oe,theme:a,className:S,name:e==null?void 0:e.name,"data-accessor":e==null?void 0:e.accessor,onClick:w=>$(w,oe),as:fe,...W?{to:`/shop/${l}/campaign/${o}`}:{href:`/shop/${l}/campaign/${o}`},sponsored:te,...K,children:[r.jsxs(Ie,{theme:a,children:[r.jsx("img",{src:p}),r.jsx(Pe,{children:d==null?void 0:d.map((w,R)=>{var I,_;return r.jsx(ze,{color:(I=h==null?void 0:h.find(T=>T.value===w))==null?void 0:I.color,theme:a,children:r.jsx(me,{icon:(_=h==null?void 0:h.find(T=>T.value===w))==null?void 0:_.icon})},`package__${R}`)})})]}),r.jsxs(Ne,{theme:a,children:[r.jsx("div",{className:"text-block-wrapper",children:r.jsxs("div",{className:"title-block-wrapper",children:[r.jsx("div",{className:"campaign-title",children:(le=P?g:x)==null?void 0:le.toUpperCase()}),r.jsx("div",{className:"campaign-title-text",children:u}),f&&c&&r.jsxs("div",{className:"campaign-date",children:[he(c)," - ",he(f)]}),r.jsxs("div",{className:"timestamp-text",children:[z>0&&r.jsxs("span",{className:"listings-text",children:[z," ",z===1?J:q," ","∙"," "]}),r.jsx("span",{className:`duration-text ${xe?"urgent":""} ${X?"":"starts-in"}`,children:M&&O?r.jsxs("div",{className:"countdown-timer",children:[U," ",O.hours.toString().padStart(2,"0"),":",O.minutes.toString().padStart(2,"0"),":",O.seconds.toString().padStart(2,"0")]}):X&&!Q&&L!==null&&L>0?ie(U,A,L,Y,H):Q?Z||"Završena":!X&&ee!==null&&ee>0?ie(G,B,ee,F,V):null})]})]})}),r.jsx(Le,{hasPermission:!0,image:r.jsx(Te,{src:D}),imageComponent:v,themeData:ne,isActive:!0,isUser:!1,name:k,shopCategory:m,uuid:l,onClick:()=>C(l)})]})]})}),Ee=j.styled.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -298,6 +316,18 @@
     right: 0;
   }
 
+  &.itemless {
+    & .scrollable-section__content {
+      &:has(.campaign-item:nth-child(3):last-child) {
+        & .campaign-item {
+          &:last-child {
+            grid-column: span 2;
+          }
+        }
+      }
+    }
+  }
+
   @media ${N.down("S")} {
     gap: 1.25rem;
 
@@ -310,7 +340,7 @@
       }
     }
   }
-`,Ue=y.styled(_e.motion.div)`
+`,Ue=j.styled(ke.motion.div)`
   display: grid;
   grid-template-columns: repeat(${n=>n==null?void 0:n.numOfColumns}, 1fr);
   gap: 1.5rem;
@@ -342,7 +372,7 @@
       /* Safari and Chrome */
     }
   }
-`,qe=l.forwardRef(({icon:n,title:t,numOfSlides:s=4,tabletNumOfSlides:o,showNavigation:d=!0,hasNextPage:h=!1,handleFetchNextPage:g=()=>{},children:u},w)=>{const[i,v]=l.useState(0),[m,$]=l.useState(1),S=pe.useDetectMobile(),j=(u==null?void 0:u.length)??1;l.useEffect(()=>{const c=()=>{$(s)};return window.addEventListener("resize",c),c(),()=>window.removeEventListener("resize",c)},[]);const P=S?u:u==null?void 0:u.slice(i,i+m),k=c=>{var I;(I=c==null?void 0:c.target)==null||I.blur();const x=i+m;x<j&&v(x),x+m>=j&&h&&g()},C=c=>{var x;(x=c==null?void 0:c.target)==null||x.blur(),i-m>=0&&v(i-m)};return r.jsxs(Ee,{ref:w,children:[r.jsx("div",{className:"scrollable-section__header",children:r.jsxs("div",{className:"scrollable-section__title",children:[f.isDefinedNotEmptyString(n)&&r.jsx(ue,{icon:n,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),f.isDefinedNotEmptyString(t)&&r.jsxs("div",{className:"title__text",children:[" ",t]})]})}),r.jsxs(Ue,{numOfColumns:s,tabletNumOfColumns:o,...!S&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},children:[P,S&&h&&r.jsx(ke.InfiniteScrollEndElement,{onIsVisible:g})]},`scrollable-section__content-${i}`),d&&j>m&&!S&&r.jsxs("div",{className:"scrollable-section__navigation",children:[r.jsx(de,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i===0,onClick:C}),r.jsx(de,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i+m>=j,onClick:k})]})]})}),We=y.styled.div`
+`,qe=i.forwardRef(({icon:n,title:t,numOfSlides:a=4,tabletNumOfSlides:o,showNavigation:l=!0,hasNextPage:u=!1,className:p="",handleFetchNextPage:y=()=>{},children:c},f)=>{const[d,k]=i.useState(0),[m,D]=i.useState(1),v=pe.useDetectMobile(),S=(c==null?void 0:c.length)??1;i.useEffect(()=>{const g=()=>{D(a)};return window.addEventListener("resize",g),g(),()=>window.removeEventListener("resize",g)},[]);const $=v?c:c==null?void 0:c.slice(d,d+m),C=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur();const x=d+m;x<S&&k(x),x+m>=S&&u&&y()},P=g=>{var x;(x=g==null?void 0:g.target)==null||x.blur(),d-m>=0&&k(d-m)};return r.jsxs(Ee,{ref:f,className:p,children:[r.jsx("div",{className:"scrollable-section__header",children:r.jsxs("div",{className:"scrollable-section__title",children:[b.isDefinedNotEmptyString(n)&&r.jsx(me,{icon:n,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),b.isDefinedNotEmptyString(t)&&r.jsxs("div",{className:"title__text",children:[" ",t]})]})}),r.jsxs(Ue,{numOfColumns:a,tabletNumOfColumns:o,...!v&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},className:"scrollable-section__content",children:[$,v&&u&&r.jsx(_e.InfiniteScrollEndElement,{onIsVisible:y})]},`scrollable-section__content-${d}`),l&&S>m&&!v&&r.jsxs("div",{className:"scrollable-section__navigation",children:[r.jsx(de,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:d===0,onClick:P}),r.jsx(de,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:d+m>=S,onClick:C})]})]})}),We=j.styled.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -359,7 +389,7 @@
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`,Me=l.forwardRef(({sectionName:n,imageUrl:t,maxHeight:s="16.25rem",className:o="",handleClick:d=()=>{}},h)=>r.jsx(We,{ref:h,maxHeight:s,onClick:d,className:`itemless-banner ${o}`,children:r.jsx("img",{src:t,alt:`itemless-banner__${n}`})})),Oe=y.styled(a.SkeletonRowWrapper)`
+`,Me=i.forwardRef(({sectionName:n,imageUrl:t,maxHeight:a="16.25rem",className:o="",handleClick:l=()=>{}},u)=>r.jsx(We,{ref:u,maxHeight:a,onClick:l,className:`itemless-banner ${o}`,children:r.jsx("img",{src:t,alt:`itemless-banner__${n}`})})),Oe=j.styled(s.SkeletonRowWrapper)`
   @media ${N.down("S")} {
     flex-direction: column;
 
@@ -374,4 +404,4 @@
       }
     }
   }
-`,Be=({keyPrefix:n})=>r.jsxs(Oe,{children:[r.jsxs(a.SkeletonRowWrapper,{children:[r.jsx(a.SkeletonSquarePlaceholder,{width:"13.75rem",height:"13.75rem",className:"skeleton__image"},`${n}-1`),r.jsxs(a.SkeletonColumnWrapper,{noGradient:!0,children:[r.jsx(a.SkeletonLinePlaceholder,{height:"1rem"}),r.jsx(a.SkeletonLinePlaceholder,{height:"1.75rem"}),r.jsx(a.SkeletonLinePlaceholder,{height:"1.25rem"}),r.jsx(a.SkeletonLinePlaceholder,{height:"2rem"}),r.jsxs(a.SkeletonRowWrapper,{alignItems:"center",noGradient:!0,children:[r.jsx(a.SkeletonCirclePlaceholder,{width:"2.5rem",height:"2.5rem"}),r.jsx(a.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]}),r.jsxs(a.SkeletonRowWrapper,{noGradient:!0,children:[r.jsx(a.SkeletonSquarePlaceholder,{width:"13.75rem",height:"13.75rem",className:"skeleton__image"},`${n}-2`),r.jsxs(a.SkeletonColumnWrapper,{noGradient:!0,children:[r.jsx(a.SkeletonLinePlaceholder,{height:"1rem"}),r.jsx(a.SkeletonLinePlaceholder,{height:"1.75rem"}),r.jsx(a.SkeletonLinePlaceholder,{height:"1.25rem"}),r.jsx(a.SkeletonLinePlaceholder,{height:"2rem"}),r.jsxs(a.SkeletonRowWrapper,{alignItems:"center",noGradient:!0,children:[r.jsx(a.SkeletonCirclePlaceholder,{width:"2.5rem",height:"2.5rem"}),r.jsx(a.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]})]}),Ve=({keyPrefix:n,isLoading:t=!1,fallbackComponent:s=r.jsx(r.Fragment,{}),children:o})=>r.jsx(l.Suspense,{fallbackComponent:s,children:t===!0?r.jsx(Be,{keyPrefix:n}):o}),Ge=l.memo(Re),Fe=l.forwardRef(({sellerType:n="Shop",items:t=[],title:s,icon:o,isLoading:d,onSelectCard:h=()=>{},onSelectShop:g=()=>{},getImage:u=()=>{},campaignSingleText:w,upcomingCampaignText:i,salesCampaignTypes:v=[],startsInPrefixTextPlural:m,startsinSuffixTextPlural:$,startsInPrefixTextSingular:S,startsinSuffixTextSingular:j,endsInPrefixTextPlural:P,endsinSuffixTextPlural:k,endsInPrefixTextSingular:C,endsinSuffixTextSingular:c,endedText:x,numOfSlides:I=4,showNavigation:p=!0,numberOfListingsTextSingular:B,numberOfListingsTextPlural:V,itemlessImageUrl:G,itemlessLink:re,handleItemlessLink:F=()=>{},componentName:A,hasNextPage:U=!1,handleFetchNextPage:H=()=>{},LinkComponent:Y},ne)=>{const L=pe.useDetectMobile(),Z=l.useMemo(()=>{let q=t==null?void 0:t.map((e,W)=>r.jsx(Ge,{className:"campaign-item",coverPhoto:u(e==null?void 0:e.coverPhoto,(e==null?void 0:e.uuid)||(e==null?void 0:e.campaignUuid)),description:e==null?void 0:e.description,endDate:e==null?void 0:e.endDate,salesPackages:e==null?void 0:e.salesPackages,sellerType:n,shopImage:e==null?void 0:e.profileImage,shopImageComponent:e==null?void 0:e.profileImageComponent,shopName:e==null?void 0:e.shopName,shopUuid:e==null?void 0:e.shopUuid,shopCategory:e==null?void 0:e.shopCategory,startDate:e==null?void 0:e.startDate,title:e==null?void 0:e.name,uuid:e==null?void 0:e.campaignUuid,onSelectCard:(te,J)=>h(e==null?void 0:e.campaignUuid,e==null?void 0:e.shopUuid,J),onSelectShop:()=>g(e==null?void 0:e.shopUuid),campaignSingleText:w,upcomingCampaignText:i,upcoming:e==null?void 0:e.upcoming,salesCampaignTypes:v,startsInPrefixTextPlural:m,startsinSuffixTextPlural:$,startsInPrefixTextSingular:S,startsinSuffixTextSingular:j,endsInPrefixTextPlural:P,endsinSuffixTextPlural:k,endsInPrefixTextSingular:C,endsinSuffixTextSingular:c,endedText:x,themeData:e==null?void 0:e.themeData,numberOfListings:e==null?void 0:e.numberOfListings,numberOfListingsTextSingular:B,numberOfListingsTextPlural:V,metadata:{name:A,accessor:e==null?void 0:e.accessor},LinkComponent:Y,sponsored:e==null?void 0:e.sponsored},`campaign__item__${W}__${e==null?void 0:e.startDate}___${e==null?void 0:e.endDate}`));return(t==null?void 0:t.length)<4&&!L?[...q,r.jsx(Me,{imageUrl:G,className:"campaign-item",handleClick:F},"itemless-campaign-section-banner")]:q},[t]);return r.jsx(Ve,{isLoading:d,keyPrefix:"sales-campaign-skeleton",children:r.jsx(qe,{icon:o,title:s,numOfSlides:I,tabletNumOfSlides:2,showNavigation:p,hasNextPage:U,handleFetchNextPage:H,children:Z},`sales-campaign-section__${L}`)})});module.exports=Fe;
+`,Be=({keyPrefix:n})=>r.jsxs(Oe,{children:[r.jsxs(s.SkeletonRowWrapper,{children:[r.jsx(s.SkeletonSquarePlaceholder,{width:"13.75rem",height:"13.75rem",className:"skeleton__image"},`${n}-1`),r.jsxs(s.SkeletonColumnWrapper,{noGradient:!0,children:[r.jsx(s.SkeletonLinePlaceholder,{height:"1rem"}),r.jsx(s.SkeletonLinePlaceholder,{height:"1.75rem"}),r.jsx(s.SkeletonLinePlaceholder,{height:"1.25rem"}),r.jsx(s.SkeletonLinePlaceholder,{height:"2rem"}),r.jsxs(s.SkeletonRowWrapper,{alignItems:"center",noGradient:!0,children:[r.jsx(s.SkeletonCirclePlaceholder,{width:"2.5rem",height:"2.5rem"}),r.jsx(s.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]}),r.jsxs(s.SkeletonRowWrapper,{noGradient:!0,children:[r.jsx(s.SkeletonSquarePlaceholder,{width:"13.75rem",height:"13.75rem",className:"skeleton__image"},`${n}-2`),r.jsxs(s.SkeletonColumnWrapper,{noGradient:!0,children:[r.jsx(s.SkeletonLinePlaceholder,{height:"1rem"}),r.jsx(s.SkeletonLinePlaceholder,{height:"1.75rem"}),r.jsx(s.SkeletonLinePlaceholder,{height:"1.25rem"}),r.jsx(s.SkeletonLinePlaceholder,{height:"2rem"}),r.jsxs(s.SkeletonRowWrapper,{alignItems:"center",noGradient:!0,children:[r.jsx(s.SkeletonCirclePlaceholder,{width:"2.5rem",height:"2.5rem"}),r.jsx(s.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]})]}),Ve=({keyPrefix:n,isLoading:t=!1,fallbackComponent:a=r.jsx(r.Fragment,{}),children:o})=>r.jsx(i.Suspense,{fallbackComponent:a,children:t===!0?r.jsx(Be,{keyPrefix:n}):o}),Ge=i.memo(Re),Fe=i.forwardRef(({sellerType:n="Shop",items:t=[],title:a,icon:o,isLoading:l,onSelectCard:u=()=>{},onSelectShop:p=()=>{},getImage:y=()=>{},campaignSingleText:c,upcomingCampaignText:f,salesCampaignTypes:d=[],startsInPrefixTextPlural:k,startsinSuffixTextPlural:m,startsInPrefixTextSingular:D,startsinSuffixTextSingular:v,endsInPrefixTextPlural:S,endsinSuffixTextPlural:$,endsInPrefixTextSingular:C,endsinSuffixTextSingular:P,endedText:g,numOfSlides:x=4,showNavigation:h=!0,numberOfListingsTextSingular:B,numberOfListingsTextPlural:V,itemlessImageUrl:G,itemlessMaxHeight:F,handleItemlessLink:A=()=>{},componentName:H,hasNextPage:U=!1,handleFetchNextPage:Y=()=>{},LinkComponent:Z},ne)=>{const z=pe.useDetectMobile(),J=i.useMemo(()=>{let q=t==null?void 0:t.map((e,W)=>r.jsx(Ge,{className:`campaign-item ${(t==null?void 0:t.length)===1?"horizontal-campaign-item":""}`,coverPhoto:y(e==null?void 0:e.coverPhoto,(e==null?void 0:e.uuid)||(e==null?void 0:e.campaignUuid)),description:e==null?void 0:e.description,endDate:e==null?void 0:e.endDate,salesPackages:e==null?void 0:e.salesPackages,sellerType:n,shopImage:e==null?void 0:e.profileImage,shopImageComponent:e==null?void 0:e.profileImageComponent,shopName:e==null?void 0:e.shopName,shopUuid:e==null?void 0:e.shopUuid,shopCategory:e==null?void 0:e.shopCategory,startDate:e==null?void 0:e.startDate,title:e==null?void 0:e.name,uuid:e==null?void 0:e.campaignUuid,onSelectCard:(te,K)=>u(e==null?void 0:e.campaignUuid,e==null?void 0:e.shopUuid,K),onSelectShop:()=>p(e==null?void 0:e.shopUuid),campaignSingleText:c,upcomingCampaignText:f,upcoming:e==null?void 0:e.upcoming,salesCampaignTypes:d,startsInPrefixTextPlural:k,startsinSuffixTextPlural:m,startsInPrefixTextSingular:D,startsinSuffixTextSingular:v,endsInPrefixTextPlural:S,endsinSuffixTextPlural:$,endsInPrefixTextSingular:C,endsinSuffixTextSingular:P,endedText:g,themeData:e==null?void 0:e.themeData,numberOfListings:e==null?void 0:e.numberOfListings,numberOfListingsTextSingular:B,numberOfListingsTextPlural:V,metadata:{name:H,accessor:e==null?void 0:e.accessor},LinkComponent:Z,sponsored:e==null?void 0:e.sponsored},`campaign__item__${W}__${e==null?void 0:e.startDate}___${e==null?void 0:e.endDate}`));return(t==null?void 0:t.length)<4&&!z?[...q,r.jsx(Me,{imageUrl:G,className:"campaign-item",maxHeight:F,handleClick:A},"itemless-campaign-section-banner")]:q},[t]);return r.jsx(Ve,{isLoading:l,keyPrefix:"sales-campaign-skeleton",children:r.jsx(qe,{icon:o,title:a,numOfSlides:x,tabletNumOfSlides:2,showNavigation:h,hasNextPage:U,handleFetchNextPage:Y,className:(t==null?void 0:t.length)<4&&!z?"itemless":"",children:J},`sales-campaign-section__${z}`)})});module.exports=Fe;

package/dist/SalesCampaignsSection.js

@@ -1,18 +1,18 @@
-import { jsx as n, jsxs as s, Fragment as Ue } from "react/jsx-runtime";
-import { forwardRef as R, useRef as Se, useEffect as ae, Fragment as Ee, createElement as Me, useState as ne, Suspense as Re, memo as je, useMemo as Oe } from "react";
-import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as oe, l as te, m as Be, z as We, A as Ge, B as Ve, C as he } from "./utils-B2fsQ6PS.js";
-import { d as z, o as Fe } from "./breakpoints-ff0SIcV3.js";
+import { jsx as n, jsxs as i, Fragment as Ue } from "react/jsx-runtime";
+import { forwardRef as R, useRef as Se, useEffect as oe, Fragment as Ee, createElement as Me, useState as te, Suspense as Re, memo as je, useMemo as Oe } from "react";
+import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { b as ie, l as ae, m as Be, z as We, A as Ge, B as Ve, C as pe } from "./utils-B2fsQ6PS.js";
+import { d as P, o as Fe } from "./breakpoints-ff0SIcV3.js";
 import $e from "./Icon.js";
 import { D as fe } from "./ShopAvatar-4-fCYGEc.js";
 import Ae from "./Badge.js";
 import { u as _e } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import ue from "./IconButton.js";
 import { u as Ce } from "./useDetectMobile-CcVo3PNi.js";
-import { I as qe } from "./index-BdKi2ogu.js";
-import { m as He } from "./motion-Ckekul_K.js";
-import { S as M, c as xe, b as be, a as y, d as ve } from "./style-BwQ4djFC.js";
-const Ye = S.a`
+import { I as He } from "./index-BdKi2ogu.js";
+import { m as qe } from "./motion-Ckekul_K.js";
+import { S as M, c as xe, b as be, a as w, d as ve } from "./style-BwQ4djFC.js";
+const Ye = y.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -33,12 +33,30 @@ const Ye = S.a`
         background: #ffffff;
       `}
 
-  @media ${z("S")} {
+  &.horizontal-campaign-item {
+    flex-direction: row;
+
+    & img {
+      max-width: 13.75rem;
+      max-height: 13.75rem;
+    }
+  }
+
+  @media ${P("S")} {
     width: 100%;
     gap: 0;
+
+    &.horizontal-campaign-item {
+      flex-direction: column;
+
+      & img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
   }
-`, Ze = S.div`
-  border-radius: ${(r) => oe(r.theme, "edged")};
+`, Ze = y.div`
+  border-radius: ${(r) => ie(r.theme, "edged")};
   cursor: pointer;
 
   position: relative;
@@ -58,10 +76,10 @@ const Ye = S.a`
     }
   }
 
-  @media ${z("S")} {
+  @media ${P("S")} {
     width: 14.5rem;
   }
-`, Je = S.div`
+`, Je = y.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -144,7 +162,7 @@ const Ye = S.a`
     color: var(--gray-600, #676e79);
   }
 
-  @media ${z("S")} {
+  @media ${P("S")} {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -175,7 +193,7 @@ const Ye = S.a`
     ${t ? "" : "flex-wrap: nowrap;"}
     ${r ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Ke = S.a`
+  `, Ke = y.a`
   text-decoration: none;
   color: var(--gray-950);
   ${(r) => r.hasPermission === !0 && "cursor: pointer"};
@@ -199,7 +217,7 @@ const Ye = S.a`
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: ${(r) => oe(r.theme, "slight")};
+  border-radius: ${(r) => ie(r.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -247,18 +265,18 @@ const Ye = S.a`
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media ${z("S")} {
+  @media ${P("S")} {
     padding: 0;
     font-size: 0.875rem;
   }
-`, Qe = S.div`
+`, Qe = y.div`
   position: absolute;
   top: 0.5rem;
   ${(r) => r.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, Xe = S.div`
-  border-radius: ${(r) => oe(r.theme, r.borderRadius || "slight")};
+`, Xe = y.div`
+  border-radius: ${(r) => ie(r.theme, r.borderRadius || "slight")};
   background-color: ${(r) => r == null ? void 0 : r.color};
   color: white;
   height: 1.5rem;
@@ -275,64 +293,64 @@ const Ye = S.a`
   }
 `, er = R(({ src: r, ...t }, o) => {
   const a = Se();
-  return ae(() => {
-    var g;
-    const c = (d) => {
-      d.target.src = fe, d.onerror = null;
+  return oe(() => {
+    var h;
+    const s = (p) => {
+      p.target.src = fe, p.onerror = null;
     };
-    return (g = a == null ? void 0 : a.current) == null || g.addEventListener("error", c), () => {
-      var d;
-      (d = a == null ? void 0 : a.current) == null || d.removeEventListener("error", c);
+    return (h = a == null ? void 0 : a.current) == null || h.addEventListener("error", s), () => {
+      var p;
+      (p = a == null ? void 0 : a.current) == null || p.removeEventListener("error", s);
     };
-  }, []), /* @__PURE__ */ n(Ee, { ref: o, children: te(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
+  }, []), /* @__PURE__ */ n(Ee, { ref: o, children: ae(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: fe, ...t }) });
 }), rr = (r) => {
   const {
     uuid: t,
     hasPermission: o = !0,
     isUser: a,
-    image: c,
-    imageComponent: g,
-    name: d,
-    notifications: m = 0,
-    color: x = "primary",
-    size: i = "large",
-    style: b,
-    disabled: p,
-    onClick: $ = () => {
+    image: s,
+    imageComponent: h,
+    name: p,
+    notifications: S = 0,
+    color: l = "primary",
+    size: f = "large",
+    style: c,
+    disabled: C,
+    onClick: m = () => {
     },
-    isActive: v,
-    className: w,
-    shopCategory: D,
+    isActive: N,
+    className: b,
+    shopCategory: v,
     // new
-    themeData: _,
+    themeData: $,
     LinkComponent: k
-  } = r, l = k || "a", I = {
+  } = r, D = k || "a", u = {
     theme: _e(),
-    color: x,
-    size: i,
-    style: b,
-    disabled: p
+    color: l,
+    size: f,
+    style: c,
+    disabled: C
   };
   return /* @__PURE__ */ Me(
     Ke,
     {
-      onClick: (h) => {
-        h == null || h.preventDefault(), h.stopPropagation(), o === !0 && ($ == null || $());
+      onClick: (g) => {
+        g == null || g.preventDefault(), g.stopPropagation(), o === !0 && (m == null || m());
       },
-      ...I,
-      key: d,
-      className: `profile-item ${w}`,
+      ...u,
+      key: p,
+      className: `profile-item ${b}`,
       hasPermission: o,
-      isActive: v,
-      themeColor: (_ == null ? void 0 : _.code) || "transparent",
-      as: l,
+      isActive: N,
+      themeColor: ($ == null ? void 0 : $.code) || "transparent",
+      as: D,
       ...k ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Be(g) ? g : c }),
-    /* @__PURE__ */ s("div", { children: [
-      /* @__PURE__ */ n("div", { className: "name", children: d }),
-      !a && /* @__PURE__ */ n("div", { className: "description", children: D }),
-      m > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Ae, { className: "badge", color: "danger", size: "small", children: m > 99 ? "99+" : m }) })
+    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Be(h) ? h : s }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ n("div", { className: "name", children: p }),
+      !a && /* @__PURE__ */ n("div", { className: "description", children: v }),
+      S > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Ae, { className: "badge", color: "danger", size: "small", children: S > 99 ? "99+" : S }) })
     ] })
   );
 }, ye = (r) => {
@@ -341,93 +359,93 @@ const Ye = S.a`
     return `${String(t.getDate()).padStart(2)}. ${a}. ${o}.`;
   }
 }, nr = R((r, t) => {
-  var pe;
+  var he;
   const o = _e(), {
     uuid: a,
-    shopUuid: c,
-    title: g = "",
+    shopUuid: s,
+    title: h = "",
     // description,
     // badges,
-    coverPhoto: d,
-    onSelect: m,
+    coverPhoto: p,
+    onSelect: S,
     // status,
-    startDate: x,
-    endDate: i,
-    salesPackages: b,
-    shopName: p,
-    shopCategory: $,
-    shopImage: v,
-    shopImageComponent: w,
-    className: D,
-    onSelectCard: _ = () => {
+    startDate: l,
+    endDate: f,
+    salesPackages: c,
+    shopName: C,
+    shopCategory: m,
+    shopImage: N,
+    shopImageComponent: b,
+    className: v,
+    onSelectCard: $ = () => {
     },
     onSelectShop: k = () => {
     },
-    upcoming: l = !1,
-    upcomingCampaignText: f,
-    campaignSingleText: I,
-    salesCampaignTypes: h = [],
+    upcoming: D = !1,
+    upcomingCampaignText: d,
+    campaignSingleText: u,
+    salesCampaignTypes: g = [],
     startsInPrefixTextPlural: V,
     startsinSuffixTextPlural: F,
     startsInPrefixTextSingular: A,
-    startsinSuffixTextSingular: se,
+    startsinSuffixTextSingular: H,
     endsInPrefixTextPlural: q,
-    endsinSuffixTextPlural: H,
+    endsinSuffixTextPlural: Y,
     endsInPrefixTextSingular: j,
-    endsinSuffixTextSingular: Y,
-    endedText: Z,
-    themeData: ie,
-    numberOfListings: P,
-    numberOfListingsTextSingular: J,
+    endsinSuffixTextSingular: Z,
+    endedText: J,
+    themeData: se,
+    numberOfListings: z,
+    numberOfListingsTextSingular: K,
     numberOfListingsTextPlural: O,
     metadata: e,
     LinkComponent: B,
     sponsored: le,
-    ...K
-  } = r, ke = B || "a", ce = Se(), E = We(x, i), Q = E !== -1 && (E == null ? void 0 : E.isEnded) === !0, X = E !== -1 && !Q, ee = Ge(x), L = Ve(i), Ie = L !== null && L <= 2 && L > 0, de = he(i), ge = de ? new Date(de) : null, Ne = /* @__PURE__ */ new Date(), re = ge ? ge.getTime() - Ne.getTime() : null, W = re !== null && re > 0 && re < 24 * 60 * 60 * 1e3, me = (u, U, N, C, T) => N === 1 ? `${u} ${N} ${C}` : `${U} ${N} ${T}`, De = () => {
-    if (!i) return null;
-    const u = he(i), U = u ? new Date(u) : null;
+    ...Q
+  } = r, ke = B || "a", ce = Se(), E = We(l, f), X = E !== -1 && (E == null ? void 0 : E.isEnded) === !0, ee = E !== -1 && !X, re = Ge(l), L = Ve(f), Ie = L !== null && L <= 2 && L > 0, de = pe(f), ge = de ? new Date(de) : null, Ne = /* @__PURE__ */ new Date(), ne = ge ? ge.getTime() - Ne.getTime() : null, W = ne !== null && ne > 0 && ne < 24 * 60 * 60 * 1e3, me = (x, U, I, _, T) => I === 1 ? `${x} ${I} ${_}` : `${U} ${I} ${T}`, De = () => {
+    if (!f) return null;
+    const x = pe(f), U = x ? new Date(x) : null;
     if (!U) return null;
-    const N = Te, C = U.getTime() - N.getTime();
-    if (C <= 0) return null;
-    const T = Math.floor(C / (1e3 * 60 * 60)), Pe = Math.floor(C % (1e3 * 60 * 60) / (1e3 * 60)), Le = Math.floor(C % (1e3 * 60) / 1e3);
+    const I = ze, _ = U.getTime() - I.getTime();
+    if (_ <= 0) return null;
+    const T = Math.floor(_ / (1e3 * 60 * 60)), Pe = Math.floor(_ % (1e3 * 60 * 60) / (1e3 * 60)), Le = Math.floor(_ % (1e3 * 60) / 1e3);
     return { hours: T, minutes: Pe, seconds: Le };
-  }, [Te, ze] = ne(/* @__PURE__ */ new Date());
-  ae(() => {
+  }, [ze, Te] = te(/* @__PURE__ */ new Date());
+  oe(() => {
     if (!W) return;
-    const u = setInterval(() => {
-      ze(/* @__PURE__ */ new Date());
+    const x = setInterval(() => {
+      Te(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(u);
+    return () => clearInterval(x);
   }, [W]);
   const G = W ? De() : null;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     Ye,
     {
       ref: ce,
       theme: o,
-      className: D,
+      className: v,
       name: e == null ? void 0 : e.name,
       "data-accessor": e == null ? void 0 : e.accessor,
-      onClick: (u) => _(u, ce),
+      onClick: (x) => $(x, ce),
       as: ke,
-      ...B ? { to: `/shop/${c}/campaign/${a}` } : { href: `/shop/${c}/campaign/${a}` },
+      ...B ? { to: `/shop/${s}/campaign/${a}` } : { href: `/shop/${s}/campaign/${a}` },
       sponsored: le,
-      ...K,
+      ...Q,
       children: [
-        /* @__PURE__ */ s(Ze, { theme: o, children: [
-          /* @__PURE__ */ n("img", { src: d }),
-          /* @__PURE__ */ n(Qe, { children: b == null ? void 0 : b.map((u, U) => {
-            var N, C;
+        /* @__PURE__ */ i(Ze, { theme: o, children: [
+          /* @__PURE__ */ n("img", { src: p }),
+          /* @__PURE__ */ n(Qe, { children: c == null ? void 0 : c.map((x, U) => {
+            var I, _;
             return /* @__PURE__ */ n(
               Xe,
               {
-                color: (N = h == null ? void 0 : h.find((T) => T.value === u)) == null ? void 0 : N.color,
+                color: (I = g == null ? void 0 : g.find((T) => T.value === x)) == null ? void 0 : I.color,
                 theme: o,
                 children: /* @__PURE__ */ n(
                   $e,
                   {
-                    icon: (C = h == null ? void 0 : h.find((T) => T.value === u)) == null ? void 0 : C.icon
+                    icon: (_ = g == null ? void 0 : g.find((T) => T.value === x)) == null ? void 0 : _.icon
                   }
                 )
               },
@@ -435,20 +453,20 @@ const Ye = S.a`
             );
           }) })
         ] }),
-        /* @__PURE__ */ s(Je, { theme: o, children: [
-          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ s("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ n("div", { className: "campaign-title", children: (pe = l ? f : I) == null ? void 0 : pe.toUpperCase() }),
-            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: g }),
-            i && x && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
-              ye(x),
+        /* @__PURE__ */ i(Je, { theme: o, children: [
+          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ i("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ n("div", { className: "campaign-title", children: (he = D ? d : u) == null ? void 0 : he.toUpperCase() }),
+            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: h }),
+            f && l && /* @__PURE__ */ i("div", { className: "campaign-date", children: [
+              ye(l),
               " - ",
-              ye(i)
+              ye(f)
             ] }),
-            /* @__PURE__ */ s("div", { className: "timestamp-text", children: [
-              P > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
-                P,
+            /* @__PURE__ */ i("div", { className: "timestamp-text", children: [
+              z > 0 && /* @__PURE__ */ i("span", { className: "listings-text", children: [
+                z,
                 " ",
-                P === 1 ? J : O,
+                z === 1 ? K : O,
                 " ",
                 "∙",
                 " "
@@ -456,8 +474,8 @@ const Ye = S.a`
               /* @__PURE__ */ n(
                 "span",
                 {
-                  className: `duration-text ${Ie ? "urgent" : ""} ${X ? "" : "starts-in"}`,
-                  children: W && G ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
+                  className: `duration-text ${Ie ? "urgent" : ""} ${ee ? "" : "starts-in"}`,
+                  children: W && G ? /* @__PURE__ */ i("div", { className: "countdown-timer", children: [
                     j,
                     " ",
                     G.hours.toString().padStart(2, "0"),
@@ -465,17 +483,17 @@ const Ye = S.a`
                     G.minutes.toString().padStart(2, "0"),
                     ":",
                     G.seconds.toString().padStart(2, "0")
-                  ] }) : X && !Q && L !== null && L > 0 ? me(
+                  ] }) : ee && !X && L !== null && L > 0 ? me(
                     j,
                     q,
                     L,
-                    Y,
-                    H
-                  ) : Q ? Z || "Završena" : !X && ee !== null && ee > 0 ? me(
+                    Z,
+                    Y
+                  ) : X ? J || "Završena" : !ee && re !== null && re > 0 ? me(
                     A,
                     V,
-                    ee,
-                    se,
+                    re,
+                    H,
                     F
                   ) : null
                 }
@@ -486,22 +504,22 @@ const Ye = S.a`
             rr,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(er, { src: v }),
-              imageComponent: w,
-              themeData: ie,
+              image: /* @__PURE__ */ n(er, { src: N }),
+              imageComponent: b,
+              themeData: se,
               isActive: !0,
               isUser: !1,
-              name: p,
-              shopCategory: $,
-              uuid: c,
-              onClick: () => k(c)
+              name: C,
+              shopCategory: m,
+              uuid: s,
+              onClick: () => k(s)
             }
           )
         ] })
       ]
     }
   );
-}), tr = S.div`
+}), tr = y.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -540,7 +558,19 @@ const Ye = S.a`
     right: 0;
   }
 
-  @media ${z("S")} {
+  &.itemless {
+    & .scrollable-section__content {
+      &:has(.campaign-item:nth-child(3):last-child) {
+        & .campaign-item {
+          &:last-child {
+            grid-column: span 2;
+          }
+        }
+      }
+    }
+  }
+
+  @media ${P("S")} {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -552,7 +582,7 @@ const Ye = S.a`
       }
     }
   }
-`, ar = S(He.div)`
+`, ar = y(qe.div)`
   display: grid;
   grid-template-columns: repeat(${(r) => r == null ? void 0 : r.numOfColumns}, 1fr);
   gap: 1.5rem;
@@ -562,7 +592,7 @@ const Ye = S.a`
     grid-template-columns: repeat(${(r) => (r == null ? void 0 : r.tabletNumOfColumns) ?? 2}, 1fr);
   }
 
-  @media ${z("S")} {
+  @media ${P("S")} {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -590,31 +620,32 @@ const Ye = S.a`
     title: t,
     numOfSlides: o = 4,
     tabletNumOfSlides: a,
-    showNavigation: c = !0,
-    hasNextPage: g = !1,
-    handleFetchNextPage: d = () => {
+    showNavigation: s = !0,
+    hasNextPage: h = !1,
+    className: p = "",
+    handleFetchNextPage: S = () => {
     },
-    children: m
-  }, x) => {
-    const [i, b] = ne(0), [p, $] = ne(1), v = Ce(), w = (m == null ? void 0 : m.length) ?? 1;
-    ae(() => {
-      const l = () => {
-        $(o);
+    children: l
+  }, f) => {
+    const [c, C] = te(0), [m, N] = te(1), b = Ce(), v = (l == null ? void 0 : l.length) ?? 1;
+    oe(() => {
+      const d = () => {
+        N(o);
       };
-      return window.addEventListener("resize", l), l(), () => window.removeEventListener("resize", l);
+      return window.addEventListener("resize", d), d(), () => window.removeEventListener("resize", d);
     }, []);
-    const D = v ? m : m == null ? void 0 : m.slice(i, i + p), _ = (l) => {
-      var I;
-      (I = l == null ? void 0 : l.target) == null || I.blur();
-      const f = i + p;
-      f < w && b(f), f + p >= w && g && d();
-    }, k = (l) => {
-      var f;
-      (f = l == null ? void 0 : l.target) == null || f.blur(), i - p >= 0 && b(i - p);
+    const $ = b ? l : l == null ? void 0 : l.slice(c, c + m), k = (d) => {
+      var g;
+      (g = d == null ? void 0 : d.target) == null || g.blur();
+      const u = c + m;
+      u < v && C(u), u + m >= v && h && S();
+    }, D = (d) => {
+      var u;
+      (u = d == null ? void 0 : d.target) == null || u.blur(), c - m >= 0 && C(c - m);
     };
-    return /* @__PURE__ */ s(tr, { ref: x, children: [
-      /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ s("div", { className: "scrollable-section__title", children: [
-        te(r) && /* @__PURE__ */ n(
+    return /* @__PURE__ */ i(tr, { ref: f, className: p, children: [
+      /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ i("div", { className: "scrollable-section__title", children: [
+        ae(r) && /* @__PURE__ */ n(
           $e,
           {
             icon: r,
@@ -623,17 +654,17 @@ const Ye = S.a`
             className: "title__icon"
           }
         ),
-        te(t) && /* @__PURE__ */ s("div", { className: "title__text", children: [
+        ae(t) && /* @__PURE__ */ i("div", { className: "title__text", children: [
           " ",
           t
         ] })
       ] }) }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ i(
         ar,
         {
           numOfColumns: o,
           tabletNumOfColumns: a,
-          ...!v && {
+          ...!b && {
             animate: {
               x: 0,
               opacity: 1
@@ -643,14 +674,15 @@ const Ye = S.a`
               opacity: 0
             }
           },
+          className: "scrollable-section__content",
           children: [
-            D,
-            v && g && /* @__PURE__ */ n(qe, { onIsVisible: d })
+            $,
+            b && h && /* @__PURE__ */ n(He, { onIsVisible: S })
           ]
         },
-        `scrollable-section__content-${i}`
+        `scrollable-section__content-${c}`
       ),
-      c && w > p && !v && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
+      s && v > m && !b && /* @__PURE__ */ i("div", { className: "scrollable-section__navigation", children: [
         /* @__PURE__ */ n(
           ue,
           {
@@ -659,8 +691,8 @@ const Ye = S.a`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: i === 0,
-            onClick: k
+            disabled: c === 0,
+            onClick: D
           }
         ),
         /* @__PURE__ */ n(
@@ -671,14 +703,14 @@ const Ye = S.a`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: i + p >= w,
-            onClick: _
+            disabled: c + m >= v,
+            onClick: k
           }
         )
       ] })
     ] });
   }
-), sr = S.div`
+), ir = y.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -695,26 +727,26 @@ const Ye = S.a`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, ir = R(
+`, sr = R(
   ({
     sectionName: r,
     imageUrl: t,
     maxHeight: o = "16.25rem",
     className: a = "",
-    handleClick: c = () => {
+    handleClick: s = () => {
     }
-  }, g) => /* @__PURE__ */ n(
-    sr,
+  }, h) => /* @__PURE__ */ n(
+    ir,
     {
-      ref: g,
+      ref: h,
       maxHeight: o,
-      onClick: c,
+      onClick: s,
       className: `itemless-banner ${a}`,
       children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
     }
   )
-), lr = S(M)`
-  @media ${z("S")} {
+), lr = y(M)`
+  @media ${P("S")} {
     flex-direction: column;
 
     & .skeleton__image {
@@ -728,8 +760,8 @@ const Ye = S.a`
       }
     }
   }
-`, cr = ({ keyPrefix: r }) => /* @__PURE__ */ s(lr, { children: [
-  /* @__PURE__ */ s(M, { children: [
+`, cr = ({ keyPrefix: r }) => /* @__PURE__ */ i(lr, { children: [
+  /* @__PURE__ */ i(M, { children: [
     /* @__PURE__ */ n(
       xe,
       {
@@ -739,18 +771,18 @@ const Ye = S.a`
       },
       `${r}-1`
     ),
-    /* @__PURE__ */ s(be, { noGradient: !0, children: [
-      /* @__PURE__ */ n(y, { height: "1rem" }),
-      /* @__PURE__ */ n(y, { height: "1.75rem" }),
-      /* @__PURE__ */ n(y, { height: "1.25rem" }),
-      /* @__PURE__ */ n(y, { height: "2rem" }),
-      /* @__PURE__ */ s(M, { alignItems: "center", noGradient: !0, children: [
+    /* @__PURE__ */ i(be, { noGradient: !0, children: [
+      /* @__PURE__ */ n(w, { height: "1rem" }),
+      /* @__PURE__ */ n(w, { height: "1.75rem" }),
+      /* @__PURE__ */ n(w, { height: "1.25rem" }),
+      /* @__PURE__ */ n(w, { height: "2rem" }),
+      /* @__PURE__ */ i(M, { alignItems: "center", noGradient: !0, children: [
         /* @__PURE__ */ n(ve, { width: "2.5rem", height: "2.5rem" }),
-        /* @__PURE__ */ n(y, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ n(w, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ s(M, { noGradient: !0, children: [
+  /* @__PURE__ */ i(M, { noGradient: !0, children: [
     /* @__PURE__ */ n(
       xe,
       {
@@ -760,14 +792,14 @@ const Ye = S.a`
       },
       `${r}-2`
     ),
-    /* @__PURE__ */ s(be, { noGradient: !0, children: [
-      /* @__PURE__ */ n(y, { height: "1rem" }),
-      /* @__PURE__ */ n(y, { height: "1.75rem" }),
-      /* @__PURE__ */ n(y, { height: "1.25rem" }),
-      /* @__PURE__ */ n(y, { height: "2rem" }),
-      /* @__PURE__ */ s(M, { alignItems: "center", noGradient: !0, children: [
+    /* @__PURE__ */ i(be, { noGradient: !0, children: [
+      /* @__PURE__ */ n(w, { height: "1rem" }),
+      /* @__PURE__ */ n(w, { height: "1.75rem" }),
+      /* @__PURE__ */ n(w, { height: "1.25rem" }),
+      /* @__PURE__ */ n(w, { height: "2rem" }),
+      /* @__PURE__ */ i(M, { alignItems: "center", noGradient: !0, children: [
         /* @__PURE__ */ n(ve, { width: "2.5rem", height: "2.5rem" }),
-        /* @__PURE__ */ n(y, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ n(w, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] })
@@ -782,45 +814,45 @@ const Ye = S.a`
     items: t = [],
     title: o,
     icon: a,
-    isLoading: c,
-    onSelectCard: g = () => {
+    isLoading: s,
+    onSelectCard: h = () => {
     },
-    onSelectShop: d = () => {
+    onSelectShop: p = () => {
     },
-    getImage: m = () => {
+    getImage: S = () => {
     },
-    campaignSingleText: x,
-    upcomingCampaignText: i,
-    salesCampaignTypes: b = [],
-    startsInPrefixTextPlural: p,
-    startsinSuffixTextPlural: $,
-    startsInPrefixTextSingular: v,
-    startsinSuffixTextSingular: w,
-    endsInPrefixTextPlural: D,
-    endsinSuffixTextPlural: _,
+    campaignSingleText: l,
+    upcomingCampaignText: f,
+    salesCampaignTypes: c = [],
+    startsInPrefixTextPlural: C,
+    startsinSuffixTextPlural: m,
+    startsInPrefixTextSingular: N,
+    startsinSuffixTextSingular: b,
+    endsInPrefixTextPlural: v,
+    endsinSuffixTextPlural: $,
     endsInPrefixTextSingular: k,
-    endsinSuffixTextSingular: l,
-    endedText: f,
-    numOfSlides: I = 4,
-    showNavigation: h = !0,
+    endsinSuffixTextSingular: D,
+    endedText: d,
+    numOfSlides: u = 4,
+    showNavigation: g = !0,
     numberOfListingsTextSingular: V,
     numberOfListingsTextPlural: F,
     itemlessImageUrl: A,
-    itemlessLink: se,
+    itemlessMaxHeight: H,
     handleItemlessLink: q = () => {
     },
-    componentName: H,
+    componentName: Y,
     hasNextPage: j = !1,
-    handleFetchNextPage: Y = () => {
+    handleFetchNextPage: Z = () => {
     },
-    LinkComponent: Z
-  }, ie) => {
-    const P = Ce(), J = Oe(() => {
+    LinkComponent: J
+  }, se) => {
+    const z = Ce(), K = Oe(() => {
       let O = t == null ? void 0 : t.map((e, B) => /* @__PURE__ */ n(
         gr,
         {
-          className: "campaign-item",
-          coverPhoto: m(
+          className: `campaign-item ${(t == null ? void 0 : t.length) === 1 ? "horizontal-campaign-item" : ""}`,
+          coverPhoto: S(
             e == null ? void 0 : e.coverPhoto,
             (e == null ? void 0 : e.uuid) || (e == null ? void 0 : e.campaignUuid)
           ),
@@ -836,38 +868,39 @@ const Ye = S.a`
           startDate: e == null ? void 0 : e.startDate,
           title: e == null ? void 0 : e.name,
           uuid: e == null ? void 0 : e.campaignUuid,
-          onSelectCard: (le, K) => g(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, K),
-          onSelectShop: () => d(e == null ? void 0 : e.shopUuid),
-          campaignSingleText: x,
-          upcomingCampaignText: i,
+          onSelectCard: (le, Q) => h(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, Q),
+          onSelectShop: () => p(e == null ? void 0 : e.shopUuid),
+          campaignSingleText: l,
+          upcomingCampaignText: f,
           upcoming: e == null ? void 0 : e.upcoming,
-          salesCampaignTypes: b,
-          startsInPrefixTextPlural: p,
-          startsinSuffixTextPlural: $,
-          startsInPrefixTextSingular: v,
-          startsinSuffixTextSingular: w,
-          endsInPrefixTextPlural: D,
-          endsinSuffixTextPlural: _,
+          salesCampaignTypes: c,
+          startsInPrefixTextPlural: C,
+          startsinSuffixTextPlural: m,
+          startsInPrefixTextSingular: N,
+          startsinSuffixTextSingular: b,
+          endsInPrefixTextPlural: v,
+          endsinSuffixTextPlural: $,
           endsInPrefixTextSingular: k,
-          endsinSuffixTextSingular: l,
-          endedText: f,
+          endsinSuffixTextSingular: D,
+          endedText: d,
           themeData: e == null ? void 0 : e.themeData,
           numberOfListings: e == null ? void 0 : e.numberOfListings,
           numberOfListingsTextSingular: V,
           numberOfListingsTextPlural: F,
-          metadata: { name: H, accessor: e == null ? void 0 : e.accessor },
-          LinkComponent: Z,
+          metadata: { name: Y, accessor: e == null ? void 0 : e.accessor },
+          LinkComponent: J,
           sponsored: e == null ? void 0 : e.sponsored
         },
         `campaign__item__${B}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
       ));
-      return (t == null ? void 0 : t.length) < 4 && !P ? [
+      return (t == null ? void 0 : t.length) < 4 && !z ? [
         ...O,
         /* @__PURE__ */ n(
-          ir,
+          sr,
           {
             imageUrl: A,
             className: "campaign-item",
+            maxHeight: H,
             handleClick: q
           },
           "itemless-campaign-section-banner"
@@ -877,21 +910,22 @@ const Ye = S.a`
     return /* @__PURE__ */ n(
       dr,
       {
-        isLoading: c,
+        isLoading: s,
         keyPrefix: "sales-campaign-skeleton",
         children: /* @__PURE__ */ n(
           or,
           {
             icon: a,
             title: o,
-            numOfSlides: I,
+            numOfSlides: u,
             tabletNumOfSlides: 2,
-            showNavigation: h,
+            showNavigation: g,
             hasNextPage: j,
-            handleFetchNextPage: Y,
-            children: J
+            handleFetchNextPage: Z,
+            className: (t == null ? void 0 : t.length) < 4 && !z ? "itemless" : "",
+            children: K
           },
-          `sales-campaign-section__${P}`
+          `sales-campaign-section__${z}`
         )
       }
     );

package/package.json

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