@lanaco/lnc-react-ui 4.0.38 → 4.0.40

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/dist/suspense-product-card-detailed-BETmfKMT.js

@@ -0,0 +1,189 @@
+import { jsxs as t, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as c, Suspense as $ } from "react";
+import { t as y, o as m, m as s, l as S, n as C, G as z } from "./utils-DtRLzzTZ.js";
+import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as P } from "./consts-C1uHV4xc.js";
+const h = g.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & img {
+    width: 100%;
+    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;
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${y(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${m()}
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${m()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #f59e0b);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${s("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${s("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${s("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${s("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${s("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  @media (max-width: ${P + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  }
+`, D = g.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-500);
+  font-size:  0.75rem;
+  font-weight: 500;
+
+  & i {
+    font-size: 1rem;
+    color: var(--warning-500, #F59E0B);
+  }
+`, j = c(({ sponsoredText: r = "Sponsored" }, i) => /* @__PURE__ */ t(D, { ref: i, className: "sponsored-line", children: [
+  /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
+  /* @__PURE__ */ e("span", { children: r })
+] })), M = c((r, i) => {
+  const {
+    uuid: o,
+    title: n,
+    price: a,
+    currency: d,
+    isNegotiable: f,
+    isFree: u,
+    image: w,
+    sellerUuid: E,
+    location: x,
+    isSponsored: k,
+    imageComponent: l,
+    onSelectCard: v = () => {
+    },
+    freeText: N = "Free",
+    negotiableText: b = "Negotiable"
+  } = r;
+  return (
+    // <LandingPageProductCardSkeleton />
+    /* @__PURE__ */ t(h, { className: "product-card", onClick: v, children: [
+      S(l) ? l : /* @__PURE__ */ e("img", { src: w }),
+      /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: n }) }),
+      /* @__PURE__ */ t("div", { className: "wrapper-card-2", children: [
+        /* @__PURE__ */ t("div", { className: "price-text", children: [
+          a && d && `${C(a)} ${z(d)}`,
+          f && { negotiableText: b },
+          u && { freeText: N }
+        ] }),
+        /* @__PURE__ */ e("div", { className: "location-text", children: x })
+      ] }),
+      k === !0 && /* @__PURE__ */ e(j, {})
+    ] })
+  );
+}), F = c(({}, r) => /* @__PURE__ */ t(h, { className: "product-card", children: [
+  /* @__PURE__ */ e("img", { className: "skeleton-img" }),
+  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ e("div", { className: "skeleton-title" }),
+    /* @__PURE__ */ e("div", { className: "skeleton-tags" })
+  ] }),
+  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ e("div", { className: "skeleton-price" }),
+    /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
+  ] })
+] })), T = ({ limit: r = 5, isLoading: i = !1, keyPrefix: o }) => /* @__PURE__ */ e(p, { children: Array.from({ length: r }, (n, a) => /* @__PURE__ */ e(
+  F,
+  {
+    isLoading: i
+  },
+  `${o}-skeleton-product-card-${a}`
+)) }), R = ({
+  children: r,
+  fallbackComponent: i = /* @__PURE__ */ e(p, {}),
+  isLoading: o = !1,
+  limit: n,
+  keyPrefix: a
+}) => /* @__PURE__ */ e($, { fallbackComponent: i, children: o === !0 ? /* @__PURE__ */ e(
+  T,
+  {
+    isLoading: o,
+    limit: n,
+    keyPrefix: a
+  }
+) : r });
+export {
+  M as D,
+  R as S
+};

package/dist/{index-vXmvgZ2Y.cjs → suspense-product-card-detailed-DtzOxHaH.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),s=require("react"),c=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),w=require("./consts-CtNoHdBj.cjs"),r=require("./utils-NZLCh-J5.cjs"),b=c.newStyled.div`
+"use strict";const e=require("react/jsx-runtime"),o=require("react"),r=require("./utils-NZLCh-J5.cjs"),l=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),k=require("./consts-CtNoHdBj.cjs"),m=l.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -83,7 +83,7 @@
     height: 1rem;
   }
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -99,7 +99,7 @@
       font-weight: 600;
     }
   }
-`,j=c.newStyled.div`
+`,v=l.newStyled.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -111,4 +111,4 @@
     font-size: 1rem;
     color: var(--warning-500, #F59E0B);
   }
-`,v=s.forwardRef(({sponsoredText:i="Sponsored"},t)=>e.jsxs(j,{ref:t,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:i})]})),y=s.forwardRef((i,t)=>{const{uuid:k,title:d,price:n,currency:o,isNegotiable:l,isFree:m,image:g,sellerUuid:$,location:p,isSponsored:h,imageComponent:a,onSelectCard:u=()=>{},freeText:x="Free",negotiableText:f="Negotiable"}=i;return e.jsxs(b,{className:"product-card",onClick:u,children:[r.isDefined(a)?a:e.jsx("img",{src:g}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:d})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[n&&o&&`${r.formatPrice(n)} ${r.GetCurrencySymbol(o)}`,l&&{negotiableText:f},m&&{freeText:x}]}),e.jsx("div",{className:"location-text",children:p})]}),h===!0&&e.jsx(v,{})]})});exports.DetailedProductCard=y;
+`,N=o.forwardRef(({sponsoredText:t="Sponsored"},i)=>e.jsxs(v,{ref:i,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),b=o.forwardRef((t,i)=>{const{uuid:a,title:n,price:s,currency:c,isNegotiable:p,isFree:g,image:h,sellerUuid:C,location:u,isSponsored:x,imageComponent:d,onSelectCard:f=()=>{},freeText:w="Free",negotiableText:j="Negotiable"}=t;return e.jsxs(m,{className:"product-card",onClick:f,children:[r.isDefined(d)?d:e.jsx("img",{src:h}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:n})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[s&&c&&`${r.formatPrice(s)} ${r.GetCurrencySymbol(c)}`,p&&{negotiableText:j},g&&{freeText:w}]}),e.jsx("div",{className:"location-text",children:u})]}),x===!0&&e.jsx(N,{})]})}),y=o.forwardRef(({},t)=>e.jsxs(m,{className:"product-card",children:[e.jsx("img",{className:"skeleton-img"}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"skeleton-tags"})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-price"}),e.jsx("div",{className:"skeleton-sponsored"})]})]})),S=({limit:t=5,isLoading:i=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(n,s)=>e.jsx(y,{isLoading:i},`${a}-skeleton-product-card-${s}`))}),$=({children:t,fallbackComponent:i=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:n,keyPrefix:s})=>e.jsx(o.Suspense,{fallbackComponent:i,children:a===!0?e.jsx(S,{isLoading:a,limit:n,keyPrefix:s}):t});exports.DetailedProductCard=b;exports.SuspenseDetailedProductCard=$;

package/package.json

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

package/dist/index-D6g5ZqyJ.js

@@ -1,159 +0,0 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { n as l } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as v } from "./consts-C1uHV4xc.js";
-import { t as k, o as d, m as r, l as y, n as $, G as N } from "./utils-DtRLzzTZ.js";
-const S = l.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  cursor: pointer;
-
-  & .wrapper-card-1 {
-    display: flex;
-    flex-direction: column;
-    gap: 0.38rem;
-  }
-
-  & .wrapper-card-2 {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  & img {
-    width: 100%;
-    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;
-  }
-
-  & .card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    ${k(2)}
-  }
-
-  & .price-text {
-    font-size: 1rem;
-    font-weight: 600;
-    ${d()}
-  }
-
-  & .location-text {
-    font-size: 0.75rem;
-    font-weight: 400;
-    color: var(--gray-600, #676e79);
-    ${d()}
-  }
-
-  & .tags-wrapper {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  &:hover {
-    & .card-title {
-      color: var(--primary-500, #f59e0b);
-    }
-  }
-
-  & .skeleton-img {
-    background-color: ${r("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
-
-  & .skeleton-title {
-    background-color: ${r("-90deg")};
-    width: 100%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-tags {
-    background-color: ${r("-90deg")};
-    width: 80%;
-    height: 1.5rem;
-  }
-
-  & .skeleton-price {
-    background-color: ${r("-90deg")};
-    width: 50%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-sponsored {
-    background-color: ${r("-90deg")};
-    width: 50%;
-    height: 1rem;
-  }
-
-  @media (max-width: ${v + "px"}) {
-    & img {
-      width: 8.875rem;
-      height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      object-fit: cover;
-    }
-
-    & .price-text {
-      font-size: 0.875rem;
-      font-weight: 600;
-    }
-  }
-`, z = l.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--gray-500);
-  font-size:  0.75rem;
-  font-weight: 500;
-
-  & i {
-    font-size: 1rem;
-    color: var(--warning-500, #F59E0B);
-  }
-`, C = s(({ sponsoredText: t = "Sponsored" }, o) => /* @__PURE__ */ i(z, { ref: o, className: "sponsored-line", children: [
-  /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
-  /* @__PURE__ */ e("span", { children: t })
-] })), P = s((t, o) => {
-  const {
-    uuid: j,
-    title: m,
-    price: a,
-    currency: n,
-    isNegotiable: p,
-    isFree: g,
-    image: h,
-    sellerUuid: T,
-    location: f,
-    isSponsored: w,
-    imageComponent: c,
-    onSelectCard: u = () => {
-    },
-    freeText: x = "Free",
-    negotiableText: b = "Negotiable"
-  } = t;
-  return (
-    // <LandingPageProductCardSkeleton />
-    /* @__PURE__ */ i(S, { className: "product-card", onClick: u, children: [
-      y(c) ? c : /* @__PURE__ */ e("img", { src: h }),
-      /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: m }) }),
-      /* @__PURE__ */ i("div", { className: "wrapper-card-2", children: [
-        /* @__PURE__ */ i("div", { className: "price-text", children: [
-          a && n && `${$(a)} ${N(n)}`,
-          p && { negotiableText: b },
-          g && { freeText: x }
-        ] }),
-        /* @__PURE__ */ e("div", { className: "location-text", children: f })
-      ] }),
-      w === !0 && /* @__PURE__ */ e(C, {})
-    ] })
-  );
-});
-export {
-  P as D
-};

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;