@lanaco/lnc-react-ui 4.0.38 → 4.0.40

package/dist/SalesCampaignsSection.cjs

@@ -1,10 +1,10 @@
-"use strict";const r=require("react/jsx-runtime"),s=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),j=require("./utils-NZLCh-J5.cjs"),I=require("./consts-CtNoHdBj.cjs"),K=require("./motion-B_VPZaJq.cjs"),i=require("./index-BPVoEhTF.cjs"),Q=require("./Icon.cjs"),ee=require("./Badge.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),G=require("./useDetectMobile-D6d5LpdL.cjs"),re=require("./FlexBox.cjs"),q=require("./index-Cb_AeN9A.cjs"),z=require("./IconButton.cjs"),te=u.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),s=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),S=require("./utils-NZLCh-J5.cjs"),I=require("./consts-CtNoHdBj.cjs"),K=require("./motion-B_VPZaJq.cjs"),i=require("./index-BPVoEhTF.cjs"),Q=require("./Icon.cjs"),ee=require("./Badge.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),G=require("./useDetectMobile-D6d5LpdL.cjs"),re=require("./FlexBox.cjs"),q=require("./index-Cb_AeN9A.cjs"),z=require("./IconButton.cjs"),te=u.newStyled.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
   padding: 1.25rem;
-  border-radius: ${e=>j.getBorderRadiusValueWithUnits(e.theme,"slightCurve")};
-  border: 1px solid var(--gray-95080, #14161acc);
+  border-radius: 20px;
+  border: 1px solid var(--gray-95008, #14161a14);
 
   @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
@@ -14,7 +14,7 @@
     border-radius: 0;
   }
 `,oe=u.newStyled.div`
-  border-radius: ${e=>j.getBorderRadiusValueWithUnits(e.theme,"edged")};
+  border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,"edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -135,7 +135,7 @@
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${e=>j.getBorderRadiusValueWithUnits(e.theme,"slight")};
+  border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,"slight")};
   transition: all 0.25s ease;
 
   & .logo-wrapper {
@@ -192,7 +192,7 @@
   display: flex;
   gap: 0.25rem;
 `,le=e=>`var(--${e}-700)`,ce=u.newStyled.div`
-  border-radius: ${e=>j.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
+  border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
   background-color: ${e=>le(e==null?void 0:e.color)};
   color: white;
   height: 1.5rem;
@@ -207,7 +207,7 @@
   & i {
     font-size: 0.813rem;
   }
-`,X=e=>{const{uuid:o,hasPermission:c=!0,isUser:n,image:m,name:a,notifications:d=0,color:x="primary",size:w="large",style:S,disabled:l,onSelect:h=()=>{},isActive:y,className:b,themeData:f}=e,T={theme:M.useTheme(),color:x,size:w,style:S,disabled:l};return s.createElement(se,{onClick:t=>{t.stopPropagation(),c===!0&&(h==null||h())},...T,key:a,animate:{y:0,opacity:1},className:`profile-item ${b}`,exit:{opacity:0},hasPermission:c,initial:{y:-10,opacity:0},isActive:y,themeColor:(f==null?void 0:f.code)||"transparent"},r.jsx("div",{className:"logo-wrapper",children:m}),r.jsx("div",{className:"name",children:a}),d>0&&r.jsx("div",{className:"notifications-number",children:r.jsx(ee,{className:"badge",color:"danger",size:"small",children:d>99?"99+":d})}))};X.propTypes={id:i.PropTypes.any,isUserProfile:i.PropTypes.bool,themeColor:i.PropTypes.string,image:i.PropTypes.any,name:i.PropTypes.string,notifications:i.PropTypes.number,style:i.PropTypes.object,className:i.PropTypes.string,color:i.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:i.PropTypes.oneOf(["large"]),onSelect:i.PropTypes.func,hasPermission:i.PropTypes.bool};const H=(e,o)=>{if(!e||!o)return null;let c=Math.floor((e==null?void 0:e.getTime())-(o==null?void 0:o.getTime())),n=1e3*60*60*24;return Math.ceil(c/n)},Y=e=>{const o=M.useTheme(),{uuid:c,shopUuid:n,title:m="",description:a,badges:d,coverPhoto:x,onSelect:w,status:S,startDate:l,endDate:h,salesPackages:y,shopName:b,shopImage:f,onSelectCard:g=()=>{},onSelectShop:T=()=>{},campaignSingleText:t,salesCampaignTypes:$=[],startsInPrefixTextPlural:P,startsinSuffixTextPlural:F,startsInPrefixTextSingular:C,startsinSuffixTextSingular:A,themeData:O,...R}=e,p=l?new Date(l)<=new Date:!1;H(h?new Date(h):null,l?new Date(l):null);const v=H(l?new Date(l):null,new Date);return r.jsxs(te,{theme:o,onClick:g,...R,children:[r.jsxs(oe,{theme:o,onClick:()=>w==null?void 0:w(),children:[r.jsx("img",{src:x}),r.jsx(ae,{children:y==null?void 0:y.map((k,E)=>{var N,W;return r.jsx(ce,{color:(N=$==null?void 0:$.find(B=>B.value===k))==null?void 0:N.color,theme:o,children:r.jsx(Q,{icon:(W=$==null?void 0:$.find(B=>B.value===k))==null?void 0:W.icon})},`package__${E}`)})})]}),r.jsxs(ie,{theme:o,children:[r.jsxs("div",{className:"text-block-wrapper",children:[r.jsxs("div",{className:"title-block-wrapper",children:[r.jsx("div",{className:"campaign-title",children:t}),r.jsx("div",{className:"campaign-title-text",children:m}),r.jsx("div",{className:"timestamp-text",children:p?"":v===1?`${C} ${v} ${A}`:`${P} ${v} ${F}`})]}),r.jsx("div",{children:a})]}),r.jsx(X,{hasPermission:!0,image:r.jsx("img",{src:f,className:`${f?"":"no-image"}`}),themeData:O,isActive:!0,isUser:!1,name:b,onClick:()=>T(n)})]})]})};Y.propTypes={title:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]),numberOfListings:i.PropTypes.number,dropdown:i.PropTypes.any,color:i.PropTypes.string};const de=u.newStyled.div`
+`,X=e=>{const{uuid:o,hasPermission:c=!0,isUser:n,image:m,name:a,notifications:d=0,color:x="primary",size:w="large",style:j,disabled:l,onSelect:g=()=>{},isActive:y,className:b,themeData:f}=e,T={theme:M.useTheme(),color:x,size:w,style:j,disabled:l};return s.createElement(se,{onClick:t=>{t.stopPropagation(),c===!0&&(g==null||g())},...T,key:a,animate:{y:0,opacity:1},className:`profile-item ${b}`,exit:{opacity:0},hasPermission:c,initial:{y:-10,opacity:0},isActive:y,themeColor:(f==null?void 0:f.code)||"transparent"},r.jsx("div",{className:"logo-wrapper",children:m}),r.jsx("div",{className:"name",children:a}),d>0&&r.jsx("div",{className:"notifications-number",children:r.jsx(ee,{className:"badge",color:"danger",size:"small",children:d>99?"99+":d})}))};X.propTypes={id:i.PropTypes.any,isUserProfile:i.PropTypes.bool,themeColor:i.PropTypes.string,image:i.PropTypes.any,name:i.PropTypes.string,notifications:i.PropTypes.number,style:i.PropTypes.object,className:i.PropTypes.string,color:i.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:i.PropTypes.oneOf(["large"]),onSelect:i.PropTypes.func,hasPermission:i.PropTypes.bool};const H=(e,o)=>{if(!e||!o)return null;let c=Math.floor((e==null?void 0:e.getTime())-(o==null?void 0:o.getTime())),n=1e3*60*60*24;return Math.ceil(c/n)},Y=e=>{const o=M.useTheme(),{uuid:c,shopUuid:n,title:m="",description:a,badges:d,coverPhoto:x,onSelect:w,status:j,startDate:l,endDate:g,salesPackages:y,shopName:b,shopImage:f,onSelectCard:h=()=>{},onSelectShop:T=()=>{},campaignSingleText:t,salesCampaignTypes:$=[],startsInPrefixTextPlural:P,startsinSuffixTextPlural:F,startsInPrefixTextSingular:k,startsinSuffixTextSingular:A,themeData:O,...R}=e,p=l?new Date(l)<=new Date:!1;H(g?new Date(g):null,l?new Date(l):null);const v=H(l?new Date(l):null,new Date);return r.jsxs(te,{theme:o,onClick:h,...R,children:[r.jsxs(oe,{theme:o,onClick:()=>w==null?void 0:w(),children:[r.jsx("img",{src:x}),r.jsx(ae,{children:y==null?void 0:y.map((C,E)=>{var N,W;return r.jsx(ce,{color:(N=$==null?void 0:$.find(B=>B.value===C))==null?void 0:N.color,theme:o,children:r.jsx(Q,{icon:(W=$==null?void 0:$.find(B=>B.value===C))==null?void 0:W.icon})},`package__${E}`)})})]}),r.jsxs(ie,{theme:o,children:[r.jsxs("div",{className:"text-block-wrapper",children:[r.jsxs("div",{className:"title-block-wrapper",children:[r.jsx("div",{className:"campaign-title",children:t}),r.jsx("div",{className:"campaign-title-text",children:m}),r.jsx("div",{className:"timestamp-text",children:p?"":v===1?`${k} ${v} ${A}`:`${P} ${v} ${F}`})]}),r.jsx("div",{children:a})]}),r.jsx(X,{hasPermission:!0,image:r.jsx("img",{src:f,className:`${f?"":"no-image"}`}),themeData:O,isActive:!0,isUser:!1,name:b,onClick:()=>T(n)})]})]})};Y.propTypes={title:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]),numberOfListings:i.PropTypes.number,dropdown:i.PropTypes.any,color:i.PropTypes.string};const de=u.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -218,7 +218,7 @@
     position: absolute;
     top: 50%;
     left: 1.5rem;
-    z-index: ${e=>j.isDefined(e.arrowsZIndex)?e.arrowsZIndex:20};
+    z-index: ${e=>S.isDefined(e.arrowsZIndex)?e.arrowsZIndex:20};
   }
 
   & .hover-right-arrow {
@@ -226,7 +226,7 @@
     position: absolute;
     top: 50%;
     right: 1.5rem;
-    z-index: ${e=>j.isDefined(e.arrowsZIndex)?e.arrowsZIndex:20};
+    z-index: ${e=>S.isDefined(e.arrowsZIndex)?e.arrowsZIndex:20};
   }
 
   & .clip-loader-wrapper {
@@ -241,7 +241,7 @@
       display: flex;
     }
   }
-`,he=u.newStyled.div`
+`,ge=u.newStyled.div`
   display: flex;
   align-items: center;
 
@@ -262,7 +262,7 @@
       display: none;
     }
   }
-`,ge=u.newStyled.div`
+`,he=u.newStyled.div`
   position: relative;
   padding: ${e=>e.padding};
 
@@ -340,7 +340,7 @@
       right: 0;
     }
   }
-`,pe=(e,o)=>{const[c,n]=s.useState({trigger:null,direction:null}),m=a=>a.touches||a.originalEvent.touches;return s.useEffect(()=>{const a=typeof e=="string"||e instanceof String?document.getElementById(e):e.current;let d=null,x=null;if(a){const w=l=>{const h=m(l)[0];d=h.clientX,x=h.clientY},S=l=>{if(!d||!x)return;const h=l.touches[0].clientX,y=l.touches[0].clientY,b=d-h,f=x-y;Math.abs(b)>Math.abs(f)?b>0?n(g=>({trigger:!g.trigger,direction:_.LEFT})):n(g=>({trigger:!g.trigger,direction:_.RIGHT})):f>0?n(g=>({trigger:!g.trigger,direction:_.UP})):n(g=>({trigger:!g.trigger,direction:_.DOWN})),d=null,x=null};return a.addEventListener("touchstart",w),a.addEventListener("touchmove",S),()=>{a.removeEventListener("touchstart",w),a.addEventListener("touchmove",S)}}},[]),c},_={UP:"up",DOWN:"down",RIGHT:"right",LEFT:"left"},J=s.forwardRef(({title:e,columnGap:o="2rem",rowGap:c="1.25rem",scrollBySize:n=300,wrapForMobile:m=!1,wrap:a=!1,children:d,methodsRef:x,arrowsVisibleOnHover:w=!0,rightAlignArrows:S=!1,padding:l="0",showTimesBtn:h,noArrows:y,onShowEnd:b,arrowsZIndex:f,...g},T)=>{const t=G.useDetectMobile(),$=M.useTheme(),[P,F]=s.useState(!1),[C,A]=s.useState(!1),[O,R]=s.useState(!0),p=s.useRef(),v=pe(p);s.useEffect(()=>{(v==null?void 0:v.direction)===_.RIGHT&&C!==!0?E():(v==null?void 0:v.direction)===_.LEFT&&P!==!0&&k()},[v]);const k=()=>{var D;(D=p.current)==null||D.scrollBy(n,0)},E=()=>{var D;(D=p.current)==null||D.scrollBy(-n,0)},[N,W]=s.useState(!1);s.useEffect(()=>{var D,U;W(((D=p==null?void 0:p.current)==null?void 0:D.scrollWidth)>((U=p==null?void 0:p.current)==null?void 0:U.clientWidth))},[d]),s.useImperativeHandle(x,()=>({scrollToEnd(){B()},scrollLeft(){E()},scrollRight(){k()}}));const B=()=>{p.current.scrollLeft=p.current.scrollWidth};return r.jsxs(de,{arrowsZIndex:f,children:[r.jsxs(he,{children:[r.jsx("div",{children:e}),r.jsxs("div",{className:"btns-group",children:[r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:C,icon:"angle-left",onClick:E}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:P,icon:"angle-right",onClick:k})]})]}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"hover-left-arrow scroll-arrow-left",color:"neutral",disabled:C,icon:"angle-left",onClick:E}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"hover-right-arrow scroll-arrow-right",color:"neutral",disabled:P,icon:"angle-right",onClick:k}),r.jsx(ge,{ref:T,arrowsVisibleOnHover:w,hasOverflow:N,noArrows:y,padding:l,rightAlignArrows:S,showTimesBtn:h,theme:$,...g,children:r.jsxs(re,{ref:p,className:"scrollable-container",columnGap:o,rowGap:c,wrap:a||m&&t?"Wrap":"NoWrap",children:[r.jsx(q.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{C===!0&&A(!1)},onIsVisible:()=>{C===!1&&A(!0)}}),d,r.jsx(q.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{P===!0&&F(!1),R(!0)},onIsVisible:()=>{P===!1&&F(!0),R(!1),b==null||b()}}),O&&N&&r.jsx("div",{className:"gradient"})]})})]})});J.propTypes={title:i.PropTypes.string,rowGap:i.PropTypes.string,columnGap:i.PropTypes.string,scrollBySize:i.PropTypes.number,wrapForMobile:i.PropTypes.bool,wrap:i.PropTypes.bool,methodsRef:i.PropTypes.any,arrowsVisibleOnHover:i.PropTypes.bool,rightAlignArrows:i.PropTypes.bool,padding:i.PropTypes.string};const ue=u.newStyled.div`
+`,pe=(e,o)=>{const[c,n]=s.useState({trigger:null,direction:null}),m=a=>a.touches||a.originalEvent.touches;return s.useEffect(()=>{const a=typeof e=="string"||e instanceof String?document.getElementById(e):e.current;let d=null,x=null;if(a){const w=l=>{const g=m(l)[0];d=g.clientX,x=g.clientY},j=l=>{if(!d||!x)return;const g=l.touches[0].clientX,y=l.touches[0].clientY,b=d-g,f=x-y;Math.abs(b)>Math.abs(f)?b>0?n(h=>({trigger:!h.trigger,direction:_.LEFT})):n(h=>({trigger:!h.trigger,direction:_.RIGHT})):f>0?n(h=>({trigger:!h.trigger,direction:_.UP})):n(h=>({trigger:!h.trigger,direction:_.DOWN})),d=null,x=null};return a.addEventListener("touchstart",w),a.addEventListener("touchmove",j),()=>{a.removeEventListener("touchstart",w),a.addEventListener("touchmove",j)}}},[]),c},_={UP:"up",DOWN:"down",RIGHT:"right",LEFT:"left"},J=s.forwardRef(({title:e,columnGap:o="2rem",rowGap:c="1.25rem",scrollBySize:n=300,wrapForMobile:m=!1,wrap:a=!1,children:d,methodsRef:x,arrowsVisibleOnHover:w=!0,rightAlignArrows:j=!1,padding:l="0",showTimesBtn:g,noArrows:y,onShowEnd:b,arrowsZIndex:f,...h},T)=>{const t=G.useDetectMobile(),$=M.useTheme(),[P,F]=s.useState(!1),[k,A]=s.useState(!1),[O,R]=s.useState(!0),p=s.useRef(),v=pe(p);s.useEffect(()=>{(v==null?void 0:v.direction)===_.RIGHT&&k!==!0?E():(v==null?void 0:v.direction)===_.LEFT&&P!==!0&&C()},[v]);const C=()=>{var D;(D=p.current)==null||D.scrollBy(n,0)},E=()=>{var D;(D=p.current)==null||D.scrollBy(-n,0)},[N,W]=s.useState(!1);s.useEffect(()=>{var D,U;W(((D=p==null?void 0:p.current)==null?void 0:D.scrollWidth)>((U=p==null?void 0:p.current)==null?void 0:U.clientWidth))},[d]),s.useImperativeHandle(x,()=>({scrollToEnd(){B()},scrollLeft(){E()},scrollRight(){C()}}));const B=()=>{p.current.scrollLeft=p.current.scrollWidth};return r.jsxs(de,{arrowsZIndex:f,children:[r.jsxs(ge,{children:[r.jsx("div",{children:e}),r.jsxs("div",{className:"btns-group",children:[r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:k,icon:"angle-left",onClick:E}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:P,icon:"angle-right",onClick:C})]})]}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"hover-left-arrow scroll-arrow-left",color:"neutral",disabled:k,icon:"angle-left",onClick:E}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"hover-right-arrow scroll-arrow-right",color:"neutral",disabled:P,icon:"angle-right",onClick:C}),r.jsx(he,{ref:T,arrowsVisibleOnHover:w,hasOverflow:N,noArrows:y,padding:l,rightAlignArrows:j,showTimesBtn:g,theme:$,...h,children:r.jsxs(re,{ref:p,className:"scrollable-container",columnGap:o,rowGap:c,wrap:a||m&&t?"Wrap":"NoWrap",children:[r.jsx(q.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{k===!0&&A(!1)},onIsVisible:()=>{k===!1&&A(!0)}}),d,r.jsx(q.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{P===!0&&F(!1),R(!0)},onIsVisible:()=>{P===!1&&F(!0),R(!1),b==null||b()}}),O&&N&&r.jsx("div",{className:"gradient"})]})})]})});J.propTypes={title:i.PropTypes.string,rowGap:i.PropTypes.string,columnGap:i.PropTypes.string,scrollBySize:i.PropTypes.number,wrapForMobile:i.PropTypes.bool,wrap:i.PropTypes.bool,methodsRef:i.PropTypes.any,arrowsVisibleOnHover:i.PropTypes.bool,rightAlignArrows:i.PropTypes.bool,padding:i.PropTypes.string};const ue=u.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -375,14 +375,14 @@
   height: ${e=>(e.heightCoeff||1)*1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${j.linearGradientAnimation("-90deg")}
+  ${S.linearGradientAnimation("-90deg")}
 `,fe=u.newStyled.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%"};
 `,Z=u.newStyled.div`
-  border-radius: ${e=>j.getBorderRadiusValueWithUnits(e.theme,(e==null?void 0:e.borderRadius)??"regular")};
+  border-radius: ${e=>S.getBorderRadiusValueWithUnits(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"};
@@ -391,10 +391,10 @@
   width: ${e=>(e==null?void 0:e.width)??"5rem"};
   flex-shrink: 0;
 
-  ${j.linearGradientAnimation()}
+  ${S.linearGradientAnimation()}
 `,me=u.newStyled.div`
   background: var(--white, #fff);
-  border-radius: ${e=>j.getBorderRadiusValueWithUnits(e.theme,"edged")};
+  border-radius:  ${e=>S.getBorderRadiusValueWithUnits(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);
 
@@ -420,4 +420,4 @@
     align-items: center;
     gap: 0.5rem;
   }
-`,xe=s.forwardRef(({},e)=>{const o=M.useTheme();return r.jsxs(me,{ref:e,theme:o,children:[r.jsx("div",{className:"campaign__left-section",children:r.jsx(Z,{theme:o,width:"15rem",height:"15rem",borderRadius:"edged"})}),r.jsxs("div",{className:"campaign__right-section",children:[r.jsxs(fe,{theme:o,children:[r.jsx(L,{heightCoeff:.75,theme:o,width:"35%"}),r.jsx(L,{heightCoeff:1.25,theme:o}),r.jsx(L,{heightCoeff:3,theme:o})]}),r.jsxs("div",{className:"campaign__user",children:[r.jsx(Z,{theme:o,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),r.jsx(L,{theme:o,width:"75%"})]})]})]})}),we=({itemsCount:e=5,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:e},(c,n)=>r.jsx(xe,{},`${o}-skeleton-campaign-card-${n}`))}),be=({children:e,fallbackComponent:o=r.jsx(r.Fragment,{}),isLoading:c=!1,itemsCount:n=5,keyPrefix:m})=>r.jsx(s.Suspense,{fallback:o,children:c===!0?r.jsx(we,{itemsCount:n,keyPrefix:m}):e}),ye=s.memo(Y),ve=s.forwardRef(({sellerType:e="Shop",items:o=[],title:c,isLoading:n,onSelectCard:m=()=>{},onSelectShop:a=()=>{},customScrollSize:d,campaignSingleText:x,salesCampaignTypes:w=[],startsInPrefixTextPlural:S,startsinSuffixTextPlural:l,startsInPrefixTextSingular:h,startsinSuffixTextSingular:y},b)=>{const f=s.useRef(),g=G.useDetectMobile(),T=s.useMemo(()=>o==null?void 0:o.map((t,$)=>r.jsx(ye,{className:"campaign-item",coverPhoto:t==null?void 0:t.coverPhoto,description:t==null?void 0:t.description,endDate:t==null?void 0:t.endDate,salesPackages:t==null?void 0:t.salesPackages,sellerType:e,shopImage:t==null?void 0:t.profileImage,shopName:t==null?void 0:t.shopName,shopUuid:t==null?void 0:t.shopUuid,startDate:t==null?void 0:t.startDate,title:t==null?void 0:t.name,uuid:t==null?void 0:t.campaignUuid,onSelectCard:()=>m(t==null?void 0:t.campaignUuid,t==null?void 0:t.shopUuid),onSelectShop:()=>a(t==null?void 0:t.shopUuid),campaignSingleText:x,salesCampaignTypes:w,startsInPrefixTextPlural:S,startsinSuffixTextPlural:l,startsInPrefixTextSingular:h,startsinSuffixTextSingular:y,themeData:t==null?void 0:t.themeData},`campaign__item__${$}__${t==null?void 0:t.startDate}___${t==null?void 0:t.endDate}`)),[o]);return r.jsx(r.Fragment,{children:(o==null?void 0:o.length)>0&&r.jsx(ue,{ref:b,className:"row-section-scroll",children:r.jsx(J,{arrowsVisibleOnHover:!1,columnGap:"0",methodsRef:f,mobileHoverScrollButtons:!0,noArrows:!0,padding:"0.25rem 0",rightAlignArrows:!0,scrollBySize:g?window.innerWidth:d>0?d:window.innerWidth,showTimesBtn:!1,title:c,onShowEnd:()=>{},arrowsZIndex:11,children:r.jsx(be,{isLoading:n,itemsCount:2,keyPrefix:"sales-camp",children:T})})})})});module.exports=ve;
+`,xe=s.forwardRef(({},e)=>{const o=M.useTheme();return r.jsxs(me,{ref:e,theme:o,children:[r.jsx("div",{className:"campaign__left-section",children:r.jsx(Z,{theme:o,width:"15rem",height:"15rem",borderRadius:"edged"})}),r.jsxs("div",{className:"campaign__right-section",children:[r.jsxs(fe,{theme:o,children:[r.jsx(L,{heightCoeff:.75,theme:o,width:"35%"}),r.jsx(L,{heightCoeff:1.25,theme:o}),r.jsx(L,{heightCoeff:3,theme:o})]}),r.jsxs("div",{className:"campaign__user",children:[r.jsx(Z,{theme:o,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),r.jsx(L,{theme:o,width:"75%"})]})]})]})}),we=({itemsCount:e=5,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:e},(c,n)=>r.jsx(xe,{},`${o}-skeleton-campaign-card-${n}`))}),be=({children:e,fallbackComponent:o=r.jsx(r.Fragment,{}),isLoading:c=!1,itemsCount:n=5,keyPrefix:m})=>r.jsx(s.Suspense,{fallback:o,children:c===!0?r.jsx(we,{itemsCount:n,keyPrefix:m}):e}),ye=s.memo(Y),ve=s.forwardRef(({sellerType:e="Shop",items:o=[],title:c,isLoading:n,onSelectCard:m=()=>{},onSelectShop:a=()=>{},customScrollSize:d,campaignSingleText:x,salesCampaignTypes:w=[],startsInPrefixTextPlural:j,startsinSuffixTextPlural:l,startsInPrefixTextSingular:g,startsinSuffixTextSingular:y},b)=>{const f=s.useRef(),h=G.useDetectMobile(),T=s.useMemo(()=>o==null?void 0:o.map((t,$)=>r.jsx(ye,{className:"campaign-item",coverPhoto:t==null?void 0:t.coverPhoto,description:t==null?void 0:t.description,endDate:t==null?void 0:t.endDate,salesPackages:t==null?void 0:t.salesPackages,sellerType:e,shopImage:t==null?void 0:t.profileImage,shopName:t==null?void 0:t.shopName,shopUuid:t==null?void 0:t.shopUuid,startDate:t==null?void 0:t.startDate,title:t==null?void 0:t.name,uuid:t==null?void 0:t.campaignUuid,onSelectCard:()=>m(t==null?void 0:t.campaignUuid,t==null?void 0:t.shopUuid),onSelectShop:()=>a(t==null?void 0:t.shopUuid),campaignSingleText:x,salesCampaignTypes:w,startsInPrefixTextPlural:j,startsinSuffixTextPlural:l,startsInPrefixTextSingular:g,startsinSuffixTextSingular:y,themeData:t==null?void 0:t.themeData},`campaign__item__${$}__${t==null?void 0:t.startDate}___${t==null?void 0:t.endDate}`)),[o]);return r.jsx(r.Fragment,{children:(o==null?void 0:o.length)>0&&r.jsx(ue,{ref:b,className:"row-section-scroll",children:r.jsx(J,{arrowsVisibleOnHover:!1,columnGap:"0",methodsRef:f,mobileHoverScrollButtons:!0,noArrows:!0,padding:"0.25rem 0",rightAlignArrows:!0,scrollBySize:h?window.innerWidth:d>0?d:window.innerWidth,showTimesBtn:!1,title:c,onShowEnd:()=>{},arrowsZIndex:11,children:r.jsx(be,{isLoading:n,itemsCount:2,keyPrefix:"sales-camp",children:T})})})})});module.exports=ve;

package/dist/SalesCampaignsSection.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as p, Fragment as G } from "react/jsx-runtime";
-import { createElement as ae, useState as z, useEffect as j, forwardRef as V, useRef as Q, useImperativeHandle as ne, Suspense as se, memo as le, useMemo as ce } from "react";
-import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { a as E, l as X, m as ee } from "./utils-DtRLzzTZ.js";
+import { createElement as ae, useState as P, useEffect as j, forwardRef as V, useRef as Q, useImperativeHandle as ne, Suspense as se, memo as le, useMemo as ce } from "react";
+import { n as f } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { a as z, l as X, m as ee } from "./utils-DtRLzzTZ.js";
 import { M as T } from "./consts-C1uHV4xc.js";
 import { m as de } from "./motion-Ckekul_K.js";
 import { P as i } from "./index-S5Cd7WrG.js";
@@ -9,16 +9,16 @@ import ge from "./Icon.js";
 import he from "./Badge.js";
 import { u as M } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { u as re } from "./useDetectMobile-BC6EGaBc.js";
-import me from "./FlexBox.js";
+import fe from "./FlexBox.js";
 import { I as Y } from "./index-wy-PXQR9.js";
 import U from "./IconButton.js";
-const fe = m.div`
+const me = f.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
   padding: 1.25rem;
-  border-radius: ${(e) => E(e.theme, "slightCurve")};
-  border: 1px solid var(--gray-95080, #14161acc);
+  border-radius: 20px;
+  border: 1px solid var(--gray-95008, #14161a14);
 
   @media (max-width: ${T + "px"}) {
     flex-direction: column;
@@ -27,8 +27,8 @@ const fe = m.div`
     border: none;
     border-radius: 0;
   }
-`, pe = m.div`
-  border-radius: ${(e) => E(e.theme, "edged")};
+`, pe = f.div`
+  border-radius: ${(e) => z(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -56,7 +56,7 @@ const fe = m.div`
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, ue = m.div`
+`, ue = f.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -137,7 +137,7 @@ const fe = m.div`
     ${o ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${l ? "justify-content: center;" : ""}
-  `, be = m(de.div)`
+  `, be = f(de.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -161,7 +161,7 @@ const fe = m.div`
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${(e) => E(e.theme, "slight")};
+  border-radius: ${(e) => z(e.theme, "slight")};
   transition: all 0.25s ease;
 
   & .logo-wrapper {
@@ -211,15 +211,15 @@ const fe = m.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, ve = m.div`
+`, xe = f.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, xe = (e) => `var(--${e}-700)`, ye = m.div`
-  border-radius: ${(e) => E(e.theme, e.borderRadius || "slight")};
-  background-color: ${(e) => xe(e == null ? void 0 : e.color)};
+`, ve = (e) => `var(--${e}-700)`, ye = f.div`
+  border-radius: ${(e) => z(e.theme, e.borderRadius || "slight")};
+  background-color: ${(e) => ve(e == null ? void 0 : e.color)};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
@@ -247,11 +247,11 @@ const fe = m.div`
     disabled: s,
     onSelect: d = () => {
     },
-    isActive: x,
-    className: v,
+    isActive: v,
+    className: x,
     // new
-    themeData: f
-  } = e, k = {
+    themeData: m
+  } = e, C = {
     theme: M(),
     color: w,
     size: b,
@@ -264,13 +264,13 @@ const fe = m.div`
       onClick: (r) => {
         r.stopPropagation(), l === !0 && (d == null || d());
       },
-      ...k,
+      ...C,
       key: n,
       animate: {
         y: 0,
         opacity: 1
       },
-      className: `profile-item ${v}`,
+      className: `profile-item ${x}`,
       exit: {
         opacity: 0
       },
@@ -279,8 +279,8 @@ const fe = m.div`
         y: -10,
         opacity: 0
       },
-      isActive: x,
-      themeColor: (f == null ? void 0 : f.code) || "transparent"
+      isActive: v,
+      themeColor: (m == null ? void 0 : m.code) || "transparent"
     },
     /* @__PURE__ */ t("div", { className: "logo-wrapper", children: u }),
     /* @__PURE__ */ t("div", { className: "name", children: n }),
@@ -325,12 +325,12 @@ const J = (e, o) => {
     status: D,
     startDate: s,
     endDate: d,
-    salesPackages: x,
-    shopName: v,
-    shopImage: f,
+    salesPackages: v,
+    shopName: x,
+    shopImage: m,
     onSelectCard: g = () => {
     },
-    onSelectShop: k = () => {
+    onSelectShop: C = () => {
     },
     campaignSingleText: r,
     salesCampaignTypes: $ = [],
@@ -350,7 +350,7 @@ const J = (e, o) => {
     /* @__PURE__ */ new Date()
   );
   return /* @__PURE__ */ p(
-    fe,
+    me,
     {
       theme: o,
       onClick: g,
@@ -358,17 +358,17 @@ const J = (e, o) => {
       children: [
         /* @__PURE__ */ p(pe, { theme: o, onClick: () => b == null ? void 0 : b(), children: [
           /* @__PURE__ */ t("img", { src: w }),
-          /* @__PURE__ */ t(ve, { children: x == null ? void 0 : x.map((I, A) => {
-            var _, L;
+          /* @__PURE__ */ t(xe, { children: v == null ? void 0 : v.map((I, A) => {
+            var E, L;
             return /* @__PURE__ */ t(
               ye,
               {
-                color: (_ = $ == null ? void 0 : $.find((P) => P.value === I)) == null ? void 0 : _.color,
+                color: (E = $ == null ? void 0 : $.find((_) => _.value === I)) == null ? void 0 : E.color,
                 theme: o,
                 children: /* @__PURE__ */ t(
                   ge,
                   {
-                    icon: (L = $ == null ? void 0 : $.find((P) => P.value === I)) == null ? void 0 : L.icon
+                    icon: (L = $ == null ? void 0 : $.find((_) => _.value === I)) == null ? void 0 : L.icon
                   }
                 )
               },
@@ -399,16 +399,16 @@ const J = (e, o) => {
                 /* @__PURE__ */ t(
                   "img",
                   {
-                    src: f,
-                    className: `${f ? "" : "no-image"}`
+                    src: m,
+                    className: `${m ? "" : "no-image"}`
                   }
                 )
               ),
               themeData: H,
               isActive: !0,
               isUser: !1,
-              name: v,
-              onClick: () => k(a)
+              name: x,
+              onClick: () => C(a)
             }
           )
         ] })
@@ -422,7 +422,7 @@ oe.propTypes = {
   dropdown: i.any,
   color: i.string
 };
-const $e = m.div`
+const $e = f.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -456,7 +456,7 @@ const $e = m.div`
       display: flex;
     }
   }
-`, De = m.div`
+`, De = f.div`
   display: flex;
   align-items: center;
 
@@ -477,7 +477,7 @@ const $e = m.div`
       display: none;
     }
   }
-`, Ce = m.div`
+`, ke = f.div`
   position: relative;
   padding: ${(e) => e.padding};
 
@@ -555,8 +555,8 @@ const $e = m.div`
       right: 0;
     }
   }
-`, ke = (e, o) => {
-  const [l, a] = z({
+`, Ce = (e, o) => {
+  const [l, a] = P({
     trigger: null,
     direction: null
   }), u = (n) => n.touches || n.originalEvent.touches;
@@ -570,14 +570,14 @@ const $e = m.div`
       }, D = (s) => {
         if (!c || !w)
           return;
-        const d = s.touches[0].clientX, x = s.touches[0].clientY, v = c - d, f = w - x;
-        Math.abs(v) > Math.abs(f) ? v > 0 ? a((g) => ({
+        const d = s.touches[0].clientX, v = s.touches[0].clientY, x = c - d, m = w - v;
+        Math.abs(x) > Math.abs(m) ? x > 0 ? a((g) => ({
           trigger: !g.trigger,
           direction: F.LEFT
         })) : a((g) => ({
           trigger: !g.trigger,
           direction: F.RIGHT
-        })) : f > 0 ? a((g) => ({
+        })) : m > 0 ? a((g) => ({
           trigger: !g.trigger,
           direction: F.UP
         })) : a((g) => ({
@@ -609,30 +609,30 @@ const $e = m.div`
     rightAlignArrows: D = !1,
     padding: s = "0",
     showTimesBtn: d,
-    noArrows: x,
-    onShowEnd: v,
-    arrowsZIndex: f,
+    noArrows: v,
+    onShowEnd: x,
+    arrowsZIndex: m,
     ...g
-  }, k) => {
-    const r = re(), $ = M(), [S, B] = z(!1), [N, R] = z(!1), [H, W] = z(!0), h = Q(), y = ke(h);
+  }, C) => {
+    const r = re(), $ = M(), [S, B] = P(!1), [N, R] = P(!1), [H, W] = P(!0), h = Q(), y = Ce(h);
     j(() => {
       (y == null ? void 0 : y.direction) === F.RIGHT && N !== !0 ? A() : (y == null ? void 0 : y.direction) === F.LEFT && S !== !0 && I();
     }, [y]);
     const I = () => {
-      var C;
-      (C = h.current) == null || C.scrollBy(a, 0);
+      var k;
+      (k = h.current) == null || k.scrollBy(a, 0);
     }, A = () => {
-      var C;
-      (C = h.current) == null || C.scrollBy(-a, 0);
-    }, [_, L] = z(!1);
+      var k;
+      (k = h.current) == null || k.scrollBy(-a, 0);
+    }, [E, L] = P(!1);
     j(() => {
-      var C, Z;
+      var k, Z;
       L(
-        ((C = h == null ? void 0 : h.current) == null ? void 0 : C.scrollWidth) > ((Z = h == null ? void 0 : h.current) == null ? void 0 : Z.clientWidth)
+        ((k = h == null ? void 0 : h.current) == null ? void 0 : k.scrollWidth) > ((Z = h == null ? void 0 : h.current) == null ? void 0 : Z.clientWidth)
       );
     }, [c]), ne(w, () => ({
       scrollToEnd() {
-        P();
+        _();
       },
       scrollLeft() {
         A();
@@ -641,10 +641,10 @@ const $e = m.div`
         I();
       }
     }));
-    const P = () => {
+    const _ = () => {
       h.current.scrollLeft = h.current.scrollWidth;
     };
-    return /* @__PURE__ */ p($e, { arrowsZIndex: f, children: [
+    return /* @__PURE__ */ p($e, { arrowsZIndex: m, children: [
       /* @__PURE__ */ p(De, { children: [
         /* @__PURE__ */ t("div", { children: e }),
         /* @__PURE__ */ p("div", { className: "btns-group", children: [
@@ -699,19 +699,19 @@ const $e = m.div`
         }
       ),
       /* @__PURE__ */ t(
-        Ce,
+        ke,
         {
-          ref: k,
+          ref: C,
           arrowsVisibleOnHover: b,
-          hasOverflow: _,
-          noArrows: x,
+          hasOverflow: E,
+          noArrows: v,
           padding: s,
           rightAlignArrows: D,
           showTimesBtn: d,
           theme: $,
           ...g,
           children: /* @__PURE__ */ p(
-            me,
+            fe,
             {
               ref: h,
               className: "scrollable-container",
@@ -740,11 +740,11 @@ const $e = m.div`
                       S === !0 && B(!1), W(!0);
                     },
                     onIsVisible: () => {
-                      S === !1 && B(!0), W(!1), v == null || v();
+                      S === !1 && B(!0), W(!1), x == null || x();
                     }
                   }
                 ),
-                H && _ && /* @__PURE__ */ t("div", { className: "gradient" })
+                H && E && /* @__PURE__ */ t("div", { className: "gradient" })
               ]
             }
           )
@@ -765,7 +765,7 @@ ie.propTypes = {
   rightAlignArrows: i.bool,
   padding: i.string
 };
-const Se = m.div`
+const Se = f.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -795,19 +795,19 @@ const Se = m.div`
       margin-right: 0;
     }
   }
-`, O = m.div`
+`, O = f.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
   ${ee("-90deg")}
-`, Ne = m.div`
+`, Ne = f.div`
   display: flex;
   flex-direction: ${(e) => e != null && e.row ? "row" : "column"};
   gap: ${(e) => (e == null ? void 0 : e.gap) ?? "0.5rem"};
   width: ${(e) => (e == null ? void 0 : e.width) ?? "100%"};
-`, K = m.div`
-  border-radius: ${(e) => E(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, K = f.div`
+  border-radius: ${(e) => z(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"};
@@ -817,9 +817,9 @@ const Se = m.div`
   flex-shrink: 0;
 
   ${ee()}
-`, Ie = m.div`
+`, Ie = f.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => E(e.theme, "edged")};
+  border-radius:  ${(e) => z(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);
 
@@ -904,9 +904,9 @@ const Se = m.div`
     startsInPrefixTextPlural: D,
     startsinSuffixTextPlural: s,
     startsInPrefixTextSingular: d,
-    startsinSuffixTextSingular: x
-  }, v) => {
-    const f = Q(), g = re(), k = ce(() => o == null ? void 0 : o.map((r, $) => /* @__PURE__ */ t(
+    startsinSuffixTextSingular: v
+  }, x) => {
+    const m = Q(), g = re(), C = ce(() => o == null ? void 0 : o.map((r, $) => /* @__PURE__ */ t(
       Ee,
       {
         className: "campaign-item",
@@ -928,17 +928,17 @@ const Se = m.div`
         startsInPrefixTextPlural: D,
         startsinSuffixTextPlural: s,
         startsInPrefixTextSingular: d,
-        startsinSuffixTextSingular: x,
+        startsinSuffixTextSingular: v,
         themeData: r == null ? void 0 : r.themeData
       },
       `campaign__item__${$}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
     )), [o]);
-    return /* @__PURE__ */ t(G, { children: (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(Se, { ref: v, className: "row-section-scroll", children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ t(G, { children: (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(Se, { ref: x, className: "row-section-scroll", children: /* @__PURE__ */ t(
       ie,
       {
         arrowsVisibleOnHover: !1,
         columnGap: "0",
-        methodsRef: f,
+        methodsRef: m,
         mobileHoverScrollButtons: !0,
         noArrows: !0,
         padding: "0.25rem 0",
@@ -955,7 +955,7 @@ const Se = m.div`
             isLoading: a,
             itemsCount: 2,
             keyPrefix: "sales-camp",
-            children: k
+            children: C
           }
         )
       }