@lanaco/lnc-react-ui 4.0.39 → 4.0.40

package/dist/{index-_Db92CJE.cjs → index-DHJmdMN8.cjs}

@@ -6,7 +6,7 @@
   max-width: 11.625rem;
   max-height: 11.625rem;
   ${r.linearGradientAnimation("-90deg")}
-`,h=a.newStyled.div`
+`,b=a.newStyled.div`
   display: flex;
   flex-direction: column;
   justify-content: end;
@@ -49,6 +49,7 @@
     aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
     object-fit: cover; /* making sure the image isn't distorted */
     border-radius: 0.75rem;
+    mix-blend-mode: multiply;
   }
 
   & .fallback-image {
@@ -70,7 +71,7 @@
     border-radius: 62.4375rem;
     z-index: 1;
     background-color: var(--white, #fff);
-    color: var(--gray-950, #14161A);
+    color: var(--gray-950, #14161a);
   }
   & .title-simple-product-card {
     z-index: 1;
@@ -81,7 +82,7 @@
   &:hover {
     & .title-simple-product-card {
       z-index: 1;
-      color: var(--primary-500, #F59E0B);
+      color: var(--primary-500, #f59e0b);
     }
   }
-`,b=u.forwardRef((n,x)=>{const{uuid:y,title:d,price:i,currency:t,isNegotiable:c,isFree:l,image:s,sellerUuid:v,onSelectCard:m=()=>{},imageComponent:o,negotiableText:p="Negotiable",freeText:g="Free"}=n;return e.jsxs(h,{className:"simple-product-card",onClick:m,children:[r.isDefined(o)?o:e.jsx("img",{src:s}),e.jsxs("div",{className:"text-block",children:[e.jsx("div",{className:"title-simple-product-card",children:d}),e.jsxs("div",{className:"price-chip",children:[i&&t&&`${r.formatPrice(i)} ${r.GetCurrencySymbol(t)}`,c&&p,l&&g]})]})]})});exports.SimpleProductCard=b;exports.SkeletonWrapper=f;
+`,h=u.forwardRef((n,x)=>{const{uuid:y,title:d,price:i,currency:t,isNegotiable:l,isFree:c,image:s,sellerUuid:v,onSelectCard:m=()=>{},imageComponent:o,negotiableText:p="Negotiable",freeText:g="Free"}=n;return e.jsxs(b,{className:"simple-product-card",onClick:m,children:[r.isDefined(o)?o:e.jsx("img",{src:s}),e.jsxs("div",{className:"text-block",children:[e.jsx("div",{className:"title-simple-product-card",children:d}),e.jsxs("div",{className:"price-chip",children:[i&&t&&`${r.formatPrice(i)} ${r.GetCurrencySymbol(t)}`,l&&p,c&&g]})]})]})});exports.SimpleProductCard=h;exports.SkeletonWrapper=f;

package/dist/index-Dn5tPLgP.cjs

@@ -0,0 +1,95 @@
+"use strict";const l=require("react/jsx-runtime"),n=require("react"),r=require("./index-BPVoEhTF.cjs"),V=require("./FlexBox.cjs"),R=require("./IconButton.cjs"),_=require("./ThemeProvider.cjs"),z=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),E=require("./consts-CtNoHdBj.cjs"),D=require("./useDetectMobile-D6d5LpdL.cjs"),K=require("./index-Cb_AeN9A.cjs"),O=require("./Button.cjs"),F=require("./Icon.cjs"),G=require("./utils-NZLCh-J5.cjs"),X=z.newStyled.div`
+  position: relative;
+  padding: ${e=>e.padding};
+
+  & button {
+    white-space: nowrap;
+  }
+
+  & .badge-button {
+    ${e=>e.showTimesBtn===!0&&"padding-left: 0.5rem; padding-right: 0.5rem;"}
+  }
+
+  & .gradient {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 4;
+    transition: ${"0.3s"};
+    right: ${e=>e.noArrows!==!0?"6rem":"0"};
+    width: 2rem;
+    background: #fff;
+    height: 100%;
+    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
+    mask-image: linear-gradient(to left, black 10%, transparent 50%);
+  }
+
+  & .scrollable-container {
+    max-width: -webkit-fill-available;
+    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
+    max-width: fill-available;
+
+    ${e=>e.rightAlignArrows===!0&&e.noArrows!==!0&&"margin-right: 6rem"};
+    scroll-behavior: smooth;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
+
+    @media (max-width: ${E.MOBILE_SIZE_PX+"px"}) {
+      margin-right: 0;
+    }
+  }
+  & .scroll-arrow-right,
+  & .scroll-arrow-left {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    visibility: ${e=>e.arrowsVisibleOnHover===!1&&e.hasOverflow?"visible":"hidden"};
+    z-index: 4;
+    transition: ${"0.3s"};
+  }
+  & .scroll-arrow-right {
+    ${e=>e.rightAlignArrows===!0?"right: 0":"right: 0.7rem"};
+  }
+  & .scroll-arrow-left {
+    ${e=>e.rightAlignArrows===!0?"right: 2.625rem":"left: 0.7rem"};
+  }
+  & .scrollable-container:hover > .scroll-arrow-left,
+  & .scrollable-container:hover > .scroll-arrow-right {
+    visibility: ${e=>e.hasOverflow?"visible":"hidden"};
+  }
+
+  @media (max-width: ${E.MOBILE_SIZE_PX+"px"}) {
+    & .scrollable-container {
+      overflow: auto;
+    }
+    & .scroll-arrow-left,
+    & .scroll-arrow-right {
+      display: none;
+    }
+
+    & .gradient {
+      right: 0;
+    }
+
+    & .scrollable-container button:nth-of-type(3) {
+      ${e=>e.noMargin!==!0&&"margin-left: 1rem"};
+    }
+  }
+`,W=n.forwardRef(({columnGap:e="2rem",rowGap:w="1.25rem",scrollBySize:u=300,wrapForMobile:y=!1,wrap:a=!1,children:p,methodsRef:b,arrowsVisibleOnHover:T=!0,rightAlignArrows:v=!1,padding:f="0",showTimesBtn:h,noArrows:c,noGradient:x=!1,hideDisabledArrows:d=!1,noMargin:g=!1,...P},S)=>{const k=D.useDetectMobile(),{theme:o}=_.useTheme(),[t,j]=n.useState(!1),[m,N]=n.useState(!1),[H,I]=n.useState(!0),s=n.useRef(),q=()=>{var i;(i=s.current)==null||i.scrollBy(u,0)},B=()=>{var i;(i=s.current)==null||i.scrollBy(-u,0)},[$,L]=n.useState(!1);n.useEffect(()=>{var i,A;L(((i=s==null?void 0:s.current)==null?void 0:i.scrollWidth)>((A=s==null?void 0:s.current)==null?void 0:A.clientWidth))},[p]),n.useImperativeHandle(b,()=>({scrollToEnd(){M()},scrollLeft(){B()},scrollRight(){q()}}));const M=()=>{s.current.scrollLeft=s.current.scrollWidth};return l.jsx(X,{ref:S,arrowsVisibleOnHover:T,hasOverflow:$,noArrows:c,padding:f,rightAlignArrows:v,showTimesBtn:h,theme:o,noMargin:g,...P,children:l.jsxs(V,{ref:s,className:"scrollable-container",columnGap:e,rowGap:w,wrap:a||y&&k?"Wrap":"NoWrap",children:[c!==!0&&l.jsxs(l.Fragment,{children:[!(d===!0&&m===!0)&&l.jsx(R,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:m,icon:"angle-left",onClick:B}),!(d===!0&&t===!0)&&l.jsx(R,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:t,icon:"angle-right",onClick:q})]}),l.jsx(K.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{m===!0&&N(!1)},onIsVisible:()=>{m===!1&&N(!0)}}),p,l.jsx(K.InfiniteScrollEndElement,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{t===!0&&j(!1),I(!0)},onIsVisible:()=>{t===!1&&j(!0),I(!1)}}),H&&$&&x!==!0&&l.jsx("div",{className:"gradient"})]})})});W.propTypes={title:r.PropTypes.string,rowGap:r.PropTypes.string,columnGap:r.PropTypes.string,scrollBySize:r.PropTypes.number,wrapForMobile:r.PropTypes.bool,wrap:r.PropTypes.bool,methodsRef:r.PropTypes.any,arrowsVisibleOnHover:r.PropTypes.bool,rightAlignArrows:r.PropTypes.bool,padding:r.PropTypes.string};const C=n.forwardRef((e,w)=>{const{allButton:u=!0,items:y=[],selectedIds:a=[],onSelect:p=()=>{},onRemove:b=()=>{},onSelectAll:T=()=>{},className:v,showTimesBtn:f=!1,labelKey:h="label",valueKey:c="value",codeKey:x="code",uniqueKey:d,typeKey:g,productsToolbarName:P="All",...S}=e,k=(o,t)=>{a!=null&&a.includes(t)?b(o,t):p(o,t)};return l.jsxs(W,{ref:w,arrowsVisibleOnHover:!1,className:v,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:f,...S,children:[u&&l.jsx(O,{borderRadius:"curved",btnType:a.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:T,children:P}),y.map((o,t)=>l.jsxs(O,{borderRadius:"curved",btnType:a.includes(o.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>k(o,o[c]),children:[G.isDefined(o==null?void 0:o.icon)&&l.jsxs(l.Fragment,{children:[l.jsx("i",{className:o==null?void 0:o.icon})," "]}),o[h],f===!0&&l.jsx(F,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>b(o[c],o[h],o[x],d?o[d]:null,g?o[g]:null)})]},t))]})});C.propTypes={allButton:r.PropTypes.bool,items:r.PropTypes.array,selectedIds:r.PropTypes.array,onSelect:r.PropTypes.func,onRemove:r.PropTypes.func,onSelectAll:r.PropTypes.func,className:r.PropTypes.string,showTimesBtn:r.PropTypes.bool,valuKey:r.PropTypes.string,labelKey:r.PropTypes.string,codeKey:r.PropTypes.string};exports.SelectBar=C;

package/dist/{style-6tSw9aqK.js → style-CiePxaJ_.js}

@@ -20,7 +20,7 @@ const s = r.div`
 
     & i {
       font-size: 1.5rem;
-      color: var(--primary-500, #F59E0B);
+      color: var(--primary-500, #f59e0b);
     }
   }
 
@@ -35,7 +35,7 @@ const s = r.div`
       }
     }
   }
-`, o = r.div`
+`, d = r.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -56,7 +56,7 @@ const s = r.div`
 
     & i {
       font-size: 1.5rem;
-      color: var(--primary-500, #F59E0B);
+      color: var(--primary-500, #f59e0b);
     }
   }
 
@@ -65,7 +65,7 @@ const s = r.div`
       font-size: 1.375rem;
     }
   }
-`, t = (e) => (e == null ? void 0 : e.toLowerCase()) == "success" ? "color: var(--success-700); border: 1px solid var(--success-600); background-color: var(--sucess-60008);" : (e == null ? void 0 : e.toLowerCase()) == "warning" ? "color: var(--warning-600); border: 1px solid var(--warning-500); background-color: var(--warning-50012);" : (e == null ? void 0 : e.toLowerCase()) == "info" ? "color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);" : (e == null ? void 0 : e.toLowerCase()) == "danger" ? "color: var(--danger-600); border: 1px solid var(--danger-500); background-color: var(--danger-5008);" : (e == null ? void 0 : e.toLowerCase()) == "gray" ? "color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);" : "color: var(--gray-950, #14161A); border: 1px solid var(--gray-200); background-color: var(--white);", g = r.div`
+`, t = (e) => (e == null ? void 0 : e.toLowerCase()) == "success" ? "color: var(--success-700, #047857); border: 1px solid var(--success-600, #059669); background-color: var(--sucess-60008, #05966914);" : (e == null ? void 0 : e.toLowerCase()) == "warning" ? "color: var(--warning-600, #d97706); border: 1px solid var(--warning-500, #f59e0b); background-color: var(--warning-50012, #f59e0b1f);" : (e == null ? void 0 : e.toLowerCase()) == "info" ? "color: var(--info-700, #6d28d9); border: 1px solid var(--info-600, #7c3aed); background-color: var(--info-60012, #7c3aed1f);" : (e == null ? void 0 : e.toLowerCase()) == "danger" ? "color: var(--danger-600, #e11d48); border: 1px solid var(--danger-500, #f43f5e); background-color: var(--danger-5008, #f43f5e14);" : (e == null ? void 0 : e.toLowerCase()) == "secondary" ? "color: var(--secondary-700, #2667a0); border: 1px solid var(--secondary-600, #3284cb); background-color: var(--secondary-60012, #3284cb1f);" : "color: var(--gray-950, #14161A); border: 1px solid var(--gray-200, #dddfe4); background-color: var(--white, #fff);", o = r.div`
   font-size: 0.75rem;
   font-weight: 500;
   padding: 0 0.5rem;
@@ -77,7 +77,7 @@ const s = r.div`
   ${(e) => t(e.color)}
 `;
 export {
-  g as B,
+  o as B,
   s as R,
-  o as T
+  d as T
 };

package/dist/{style-BR3tIhP1.cjs → style-DN1qT8BE.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./consts-CtNoHdBj.cjs"),i=r.newStyled.div`
+"use strict";const r=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./consts-CtNoHdBj.cjs"),a=r.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -18,7 +18,7 @@
 
     & i {
       font-size: 1.5rem;
-      color: var(--primary-500, #F59E0B);
+      color: var(--primary-500, #f59e0b);
     }
   }
 
@@ -33,7 +33,7 @@
       }
     }
   }
-`,a=r.newStyled.div`
+`,i=r.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -54,7 +54,7 @@
 
     & i {
       font-size: 1.5rem;
-      color: var(--primary-500, #F59E0B);
+      color: var(--primary-500, #f59e0b);
     }
   }
 
@@ -63,7 +63,7 @@
       font-size: 1.375rem;
     }
   }
-`,n=e=>(e==null?void 0:e.toLowerCase())=="success"?"color: var(--success-700); border: 1px solid var(--success-600); background-color: var(--sucess-60008);":(e==null?void 0:e.toLowerCase())=="warning"?"color: var(--warning-600); border: 1px solid var(--warning-500); background-color: var(--warning-50012);":(e==null?void 0:e.toLowerCase())=="info"?"color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);":(e==null?void 0:e.toLowerCase())=="danger"?"color: var(--danger-600); border: 1px solid var(--danger-500); background-color: var(--danger-5008);":(e==null?void 0:e.toLowerCase())=="gray"?"color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);":"color: var(--gray-950, #14161A); border: 1px solid var(--gray-200); background-color: var(--white);",s=r.newStyled.div`
+`,n=e=>(e==null?void 0:e.toLowerCase())=="success"?"color: var(--success-700, #047857); border: 1px solid var(--success-600, #059669); background-color: var(--sucess-60008, #05966914);":(e==null?void 0:e.toLowerCase())=="warning"?"color: var(--warning-600, #d97706); border: 1px solid var(--warning-500, #f59e0b); background-color: var(--warning-50012, #f59e0b1f);":(e==null?void 0:e.toLowerCase())=="info"?"color: var(--info-700, #6d28d9); border: 1px solid var(--info-600, #7c3aed); background-color: var(--info-60012, #7c3aed1f);":(e==null?void 0:e.toLowerCase())=="danger"?"color: var(--danger-600, #e11d48); border: 1px solid var(--danger-500, #f43f5e); background-color: var(--danger-5008, #f43f5e14);":(e==null?void 0:e.toLowerCase())=="secondary"?"color: var(--secondary-700, #2667a0); border: 1px solid var(--secondary-600, #3284cb); background-color: var(--secondary-60012, #3284cb1f);":"color: var(--gray-950, #14161A); border: 1px solid var(--gray-200, #dddfe4); background-color: var(--white, #fff);",s=r.newStyled.div`
   font-size: 0.75rem;
   font-weight: 500;
   padding: 0 0.5rem;
@@ -73,4 +73,4 @@
   border-radius: 0.25rem;
   display: flex;
   ${e=>n(e.color)}
-`;exports.BlogTag=s;exports.RegulatTitleSectionWrapper=i;exports.TitleWithOptionsSectionWrapper=a;
+`;exports.BlogTag=s;exports.RegulatTitleSectionWrapper=a;exports.TitleWithOptionsSectionWrapper=i;

package/package.json

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

package/dist/index-Q_i-aqsF.cjs

@@ -1,95 +0,0 @@
-"use strict";const o=require("react/jsx-runtime"),n=require("react"),l=require("./index-BPVoEhTF.cjs"),V=require("./FlexBox.cjs"),R=require("./IconButton.cjs"),_=require("./ThemeProvider.cjs"),z=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),E=require("./consts-CtNoHdBj.cjs"),D=require("./useDetectMobile-D6d5LpdL.cjs"),K=require("./index-Cb_AeN9A.cjs"),O=require("./Button.cjs"),F=require("./Icon.cjs"),G=require("./utils-NZLCh-J5.cjs"),X=z.newStyled.div`
-  position: relative;
-  padding: ${r=>r.padding};
-
-  & button {
-    white-space: nowrap;
-  }
-
-  & .badge-button {
-    ${r=>r.showTimesBtn===!0&&"padding-left: 0.5rem; padding-right: 0.5rem;"}
-  }
-
-  & .gradient {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 4;
-    transition: ${"0.3s"};
-    right: ${r=>r.noArrows!==!0?"6rem":"0"};
-    width: 2rem;
-    background: #fff;
-    height: 100%;
-    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
-    mask-image: linear-gradient(to left, black 10%, transparent 50%);
-  }
-
-  & .scrollable-container {
-    max-width: -webkit-fill-available;
-    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
-    max-width: fill-available;
-
-    ${r=>r.rightAlignArrows===!0&&r.noArrows!==!0&&"margin-right: 6rem"};
-    scroll-behavior: smooth;
-    overflow: hidden;
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
-
-    @media (max-width: ${E.MOBILE_SIZE_PX+"px"}) {
-      margin-right: 0;
-    }
-  }
-  & .scroll-arrow-right,
-  & .scroll-arrow-left {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    visibility: ${r=>r.arrowsVisibleOnHover===!1&&r.hasOverflow?"visible":"hidden"};
-    z-index: 4;
-    transition: ${"0.3s"};
-  }
-  & .scroll-arrow-right {
-    ${r=>r.rightAlignArrows===!0?"right: 0":"right: 0.7rem"};
-  }
-  & .scroll-arrow-left {
-    ${r=>r.rightAlignArrows===!0?"right: 2.625rem":"left: 0.7rem"};
-  }
-  & .scrollable-container:hover > .scroll-arrow-left,
-  & .scrollable-container:hover > .scroll-arrow-right {
-    visibility: ${r=>r.hasOverflow?"visible":"hidden"};
-  }
-
-  @media (max-width: ${E.MOBILE_SIZE_PX+"px"}) {
-    & .scrollable-container {
-      overflow: auto;
-    }
-    & .scroll-arrow-left,
-    & .scroll-arrow-right {
-      display: none;
-    }
-
-    & .gradient {
-      right: 0;
-    }
-
-    & .scrollable-container button:nth-of-type(3) {
-      ${r=>r.noMargin!==!0&&"margin-left: 1rem"};
-    }
-  }
-`,W=n.forwardRef(({columnGap:r="2rem",rowGap:N="1.25rem",scrollBySize:g=300,wrapForMobile:v=!1,wrap:a=!1,children:w,methodsRef:m,arrowsVisibleOnHover:x=!0,rightAlignArrows:P=!1,padding:y="0",showTimesBtn:p,noArrows:b,noGradient:T=!1,hideDisabledArrows:c=!1,noMargin:u=!1,...S},k)=>{const j=D.useDetectMobile(),{theme:e}=_.useTheme(),[t,f]=n.useState(!1),[d,h]=n.useState(!1),[H,I]=n.useState(!0),s=n.useRef(),B=()=>{var i;(i=s.current)==null||i.scrollBy(g,0)},$=()=>{var i;(i=s.current)==null||i.scrollBy(-g,0)},[q,L]=n.useState(!1);n.useEffect(()=>{var i,A;L(((i=s==null?void 0:s.current)==null?void 0:i.scrollWidth)>((A=s==null?void 0:s.current)==null?void 0:A.clientWidth))},[w]),n.useImperativeHandle(m,()=>({scrollToEnd(){M()},scrollLeft(){$()},scrollRight(){B()}}));const M=()=>{s.current.scrollLeft=s.current.scrollWidth};return o.jsx(X,{ref:k,arrowsVisibleOnHover:x,hasOverflow:q,noArrows:b,padding:y,rightAlignArrows:P,showTimesBtn:p,theme:e,noMargin:u,...S,children:o.jsxs(V,{ref:s,className:"scrollable-container",columnGap:r,rowGap:N,wrap:a||v&&j?"Wrap":"NoWrap",children:[b!==!0&&o.jsxs(o.Fragment,{children:[!(c===!0&&d===!0)&&o.jsx(R,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:d,icon:"angle-left",onClick:$}),!(c===!0&&t===!0)&&o.jsx(R,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:t,icon:"angle-right",onClick:B})]}),o.jsx(K.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{d===!0&&h(!1)},onIsVisible:()=>{d===!1&&h(!0)}}),w,o.jsx(K.InfiniteScrollEndElement,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{t===!0&&f(!1),I(!0)},onIsVisible:()=>{t===!1&&f(!0),I(!1)}}),H&&q&&T!==!0&&o.jsx("div",{className:"gradient"})]})})});W.propTypes={title:l.PropTypes.string,rowGap:l.PropTypes.string,columnGap:l.PropTypes.string,scrollBySize:l.PropTypes.number,wrapForMobile:l.PropTypes.bool,wrap:l.PropTypes.bool,methodsRef:l.PropTypes.any,arrowsVisibleOnHover:l.PropTypes.bool,rightAlignArrows:l.PropTypes.bool,padding:l.PropTypes.string};const C=n.forwardRef((r,N)=>{const{allButton:g=!0,items:v=[],selectedIds:a=[],onSelect:w=()=>{},onRemove:m=()=>{},onSelectAll:x=()=>{},className:P,showTimesBtn:y=!1,labelKey:p="label",valueKey:b="value",codeKey:T="code",uniqueKey:c,typeKey:u,productsToolbarName:S="All",...k}=r,j=(e,t,f,d,h)=>{a!=null&&a.includes(e)?m(e,t,f,d,h):w(e,t,f,d,h)};return o.jsxs(W,{arrowsVisibleOnHover:!1,className:P,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:y,...k,children:[g&&o.jsx(O,{borderRadius:"curved",btnType:a.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:x,children:S}),v.map((e,t)=>o.jsxs(O,{borderRadius:"curved",btnType:a.includes(e.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>j(e[b],e[p],e[T],c?e[c]:null,u?e[u]:null),children:[G.isDefined(e==null?void 0:e.icon)&&o.jsxs(o.Fragment,{children:[o.jsx("i",{className:e==null?void 0:e.icon})," "]}),e[p],y===!0&&o.jsx(F,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>m(e[b],e[p],e[T],c?e[c]:null,u?e[u]:null)})]},t))]})});C.propTypes={allButton:l.PropTypes.bool,items:l.PropTypes.array,selectedIds:l.PropTypes.array,onSelect:l.PropTypes.func,onRemove:l.PropTypes.func,onSelectAll:l.PropTypes.func,className:l.PropTypes.string,showTimesBtn:l.PropTypes.bool,valuKey:l.PropTypes.string,labelKey:l.PropTypes.string,codeKey:l.PropTypes.string};exports.SelectBar=C;