@lanaco/lnc-react-ui 4.0.99 → 4.0.100

package/dist/{utils-WHYrEnYF.js → utils-BXCGNjIy.js}

@@ -1,21 +1,10 @@
 import { jsxs as W, Fragment as m } from "react/jsx-runtime";
 import { useState as D, useEffect as w, cloneElement as C, isValidElement as v, Children as h } from "react";
-var N = function() {
-};
-function $(e) {
-  for (var t = [], a = 1; a < arguments.length; a++)
-    t[a - 1] = arguments[a];
-  e && e.addEventListener && e.addEventListener.apply(e, t);
-}
-function K(e) {
-  for (var t = [], a = 1; a < arguments.length; a++)
-    t[a - 1] = arguments[a];
-  e && e.removeEventListener && e.removeEventListener.apply(e, t);
-}
-var B = typeof window < "u", E = function(e, t) {
+var $ = function() {
+}, B = typeof window < "u", A = function(e, t) {
   return B ? window.matchMedia(e).matches : (process.env.NODE_ENV !== "production" && console.warn("`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."), !1);
 }, x = function(e, t) {
-  var a = D(E(e)), o = a[0], n = a[1];
+  var a = D(A(e)), o = a[0], n = a[1];
   return w(function() {
     var r = !0, d = window.matchMedia(e), b = function() {
       r && n(!!d.matches);
@@ -3455,7 +3444,7 @@ const k = {
     tooltip: 1500,
     popover: 1299
   }
-}, A = {
+}, E = {
   name: "Lanaco Dark",
   class: "lnc-dark",
   colorContext: {
@@ -10242,7 +10231,7 @@ const k = {
     tooltip: 1500,
     popover: 1299
   }
-}, P = [k, A, T], U = {
+}, L = [k, E, T], K = {
   SUCCESS: k.palette.green[500],
   ERROR: k.palette.red[500],
   WARNING: k.palette.yellow[500],
@@ -10271,7 +10260,7 @@ const k = {
     type: "XL",
     mediaQuery: "(min-width: 1281px)"
   }
-}, G = (e, t) => {
+}, P = (e, t) => {
   var a = S(e, t);
   return a && v(a) ? { current: a } : { current: null };
 }, S = (e = "", t) => {
@@ -10285,7 +10274,7 @@ const k = {
     if (a) return a;
   }
   return null;
-}, Q = (e, t, a) => {
+}, U = (e, t, a) => {
   var o = R(e, t, a);
   return o && v(o) ? { current: o } : { current: null };
 }, R = (e = "", t, a) => {
@@ -10299,10 +10288,10 @@ const k = {
     if (o) return o;
   }
   return null;
-}, V = () => {
+}, _ = () => {
   const e = x(g.XS.mediaQuery), t = x(g.S.mediaQuery), a = x(g.M.mediaQuery), o = x(g.L.mediaQuery), n = x(g.XL.mediaQuery);
   return e ? g.XS.type : t ? g.S.type : a ? g.M.type : o ? g.L.type : n ? g.XL.type : g.M.type;
-}, X = (e, t, a = null, o = !1) => e.current !== null ? (t.children = a !== null ? o == !0 ? /* @__PURE__ */ W(m, { children: [
+}, G = (e, t, a = null, o = !1) => e.current !== null ? (t.children = a !== null ? o == !0 ? /* @__PURE__ */ W(m, { children: [
   e.current.props.children,
   a
 ] }) : a : e.current.props.children, C(e.current, t)) : null, p = (e, t) => {
@@ -10314,31 +10303,31 @@ const k = {
     a: t
   } : null;
   return o ? `rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})` : null;
-}, Y = (e, t, a, o, n, r) => {
+}, Q = (e, t, a, o, n, r) => {
   var y, f;
   const d = e.colorContext[a], b = e.components[t].default, c = (f = (y = e.components[t]) == null ? void 0 : y[d]) == null ? void 0 : f[o], u = c == null ? void 0 : c[n], i = b[o][n], l = c == null ? void 0 : c[r], s = b[o][r], O = u || u == 0 ? e.palette[d][u] : e.palette[b.palette][i], F = l || l == 0 ? e.palette.opacity[l] : e.palette.opacity[s];
   return p(O, F ?? "100%");
-}, _ = (e, t, a, o, n) => {
+}, V = (e, t, a, o, n) => {
   var i, l;
   const r = e.colorContext[a], d = e.components[t].default, b = (l = (i = e.components[t]) == null ? void 0 : i[r]) == null ? void 0 : l[o], c = b == null ? void 0 : b[n], u = d[o][n];
   return c || c == 0 ? c : u;
-}, Z = (e, t) => e.sizes[t], q = (e, t, a, o) => `
+}, X = (e, t) => e.sizes[t], Y = (e, t, a, o) => `
     font-weight: ${e.components[t].default[o].fontWeight};
     font-size: ${e.typography.component[a].fontSize};
     line-height: ${e.typography.component[a].lineHeight};
-  `, J = (e, t) => e.borderRadius[t], j = (e, t) => e.boxShadow[t], e0 = (e, t) => {
+  `, Z = (e, t) => e.borderRadius[t], q = (e, t) => e.boxShadow[t], j = (e, t) => {
   const a = e.colorContext[e.palette.outline.context], o = e.palette[a][e.palette.outline.weight];
   return `
     outline: ${e.palette.outline.width} ${e.palette.outline.style} ${o};
     ${`outline-offset: ${e.palette.outline.offset}`};
     `;
-}, t0 = (e) => {
+}, J = (e) => {
   const t = e.palette.disabled.color, a = e.palette[t][e.palette.disabled.background], o = e.palette[t][e.palette.disabled.text], n = e.palette.opacity[e.palette.disabled.opacity];
   return `
     background-color: ${p(a, n ?? "100%")};
     color: ${o};
   `;
-}, a0 = (e) => {
+}, e0 = (e) => {
   const t = e.palette.disabled.color, a = e.palette[t][e.palette.disabled.background], o = e.palette.opacity[e.palette.disabled.opacity];
   return `
     background-color: ${p(a, o ?? "100%")};
@@ -10347,7 +10336,7 @@ const k = {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  `, o0 = (e) => e == null || e == 0 || e == 1 ? z() : `
+  `, t0 = (e) => e == null || e == 0 || e == 1 ? z() : `
     overflow: hidden;
     text-overflow: ellipsis;
     overflow-wrap: anywhere;
@@ -10361,7 +10350,7 @@ const k = {
       -webkit-line-clamp: ${e};
       -webkit-box-orient: vertical;    
     }
-  `, n0 = (e = "-45deg", t = "500% 500%", a = "#b3b9c4", o = "#e5e9f1") => `
+  `, a0 = (e = "-45deg", t = "500% 500%", a = "#b3b9c4", o = "#e5e9f1") => `
     @keyframes gradient {
       0% {
         background-position: 0% 0%;
@@ -10381,7 +10370,7 @@ const k = {
     background: linear-gradient(${e}, ${a}, ${o});
     background-size: ${t};
     animation: gradient 1s linear infinite alternate;
-  `, r0 = (e) => e != null && e !== "", d0 = (e) => e != null, c0 = (e) => Number.isInteger(Number(e)) ? new Intl.NumberFormat("de-DE").format(e) : new Intl.NumberFormat("de-DE", {
+  `, o0 = (e) => e != null && e !== "", n0 = (e) => e != null, r0 = (e) => Number.isInteger(Number(e)) ? new Intl.NumberFormat("de-DE").format(e) : new Intl.NumberFormat("de-DE", {
   minimumFractionDigits: 2,
   maximumFractionDigits: 2
 }).format(e), H = {
@@ -10425,7 +10414,7 @@ const k = {
   GHS: "₵",
   KES: "KSh",
   TZS: "TSh"
-}, b0 = (e) => H[e] || "";
+}, d0 = (e) => H[e] || "";
 function I(e, t = { carbs: 0.5, protein: 0.25, fat: 0.25 }) {
   const a = t.carbs + t.protein + t.fat;
   if (Math.abs(a - 1) > 0.01)
@@ -10437,7 +10426,7 @@ function I(e, t = { carbs: 0.5, protein: 0.25, fat: 0.25 }) {
     fat: Math.round(e * t.fat / o.fat)
   };
 }
-const g0 = ({
+const c0 = ({
   gender: e,
   age: t,
   heightCm: a,
@@ -10484,48 +10473,46 @@ const g0 = ({
     calories: Math.round(i),
     ...l
   };
-}, i0 = (e) => {
+}, b0 = (e) => {
   const t = String(Math.floor(e / 60)).padStart(2, "0"), a = String(e % 60).padStart(2, "0");
   return `${t}:${a}`;
-}, u0 = (e, ...t) => e.replace(/{(\d+)}/g, function(a, o) {
+}, g0 = (e, ...t) => e.replace(/{(\d+)}/g, function(a, o) {
   return typeof t[o] < "u" ? t[o] : a;
-}), l0 = (e) => (e = e || 0, e > 999 ? Math.round(e / 1e3).toLocaleString() + "K" : e.toLocaleString()), k0 = (e) => {
+}), i0 = (e) => (e = e || 0, e > 999 ? Math.round(e / 1e3).toLocaleString() + "K" : e.toLocaleString()), u0 = (e) => {
   const t = new Date(e);
   let a = t.getDate(), o = t.getMonth() + 1, n = t.getFullYear();
   return `${a}. ${o}. ${n}`;
 };
 export {
-  $ as A,
-  K as B,
-  Q as C,
-  N as D,
-  U as E,
-  g as F,
-  b0 as G,
-  J as a,
-  Y as b,
-  q as c,
-  Z as d,
-  e0 as e,
-  a0 as f,
-  _ as g,
-  t0 as h,
-  G as i,
-  j,
-  r0 as k,
-  d0 as l,
+  B as A,
+  $ as B,
+  K as C,
+  g as D,
+  d0 as G,
+  Z as a,
+  Q as b,
+  Y as c,
+  X as d,
+  j as e,
+  e0 as f,
+  V as g,
+  J as h,
+  P as i,
+  q as j,
+  o0 as k,
+  n0 as l,
   p as m,
-  P as n,
-  n0 as o,
-  o0 as p,
-  c0 as q,
-  X as r,
-  k0 as s,
+  L as n,
+  a0 as o,
+  t0 as p,
+  r0 as q,
+  G as r,
+  u0 as s,
   z as t,
-  V as u,
-  u0 as v,
-  l0 as w,
-  i0 as x,
-  g0 as y,
-  B as z
+  _ as u,
+  g0 as v,
+  i0 as w,
+  b0 as x,
+  c0 as y,
+  U as z
 };

package/package.json

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

package/dist/index-BKeVVABC.js

@@ -1,345 +0,0 @@
-import { jsx as i, jsxs as d, Fragment as z } from "react/jsx-runtime";
-import _, { useState as w, useRef as F, useEffect as j, useImperativeHandle as P, forwardRef as q } from "react";
-import { P as r } from "./index-S5Cd7WrG.js";
-import U from "./FlexBox.js";
-import W from "./IconButton.js";
-import { useTheme as X } from "./ThemeProvider.js";
-import { s as Z } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as C } from "./consts-BuFChS64.js";
-import { u as J } from "./useDetectMobile-Bkvj0VMa.js";
-import { I as H } from "./index-Dhf4jQmS.js";
-import V from "./Button.js";
-import Q from "./Icon.js";
-import { l as Y } from "./utils-WHYrEnYF.js";
-const ee = Z.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: ${C + "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: ${C + "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"};
-    }
-  }
-`, L = _.forwardRef(
-  ({
-    columnGap: e = "2rem",
-    rowGap: v = "1.25rem",
-    scrollBySize: f = 300,
-    wrapForMobile: y = !1,
-    wrap: a = !1,
-    children: u,
-    methodsRef: b,
-    arrowsVisibleOnHover: k = !0,
-    rightAlignArrows: x = !1,
-    padding: m = "0",
-    showTimesBtn: h,
-    noArrows: n,
-    noGradient: S = !1,
-    hideDisabledArrows: c = !1,
-    noMargin: g = !1,
-    ...N
-  }, T) => {
-    const $ = J(), { theme: l } = X(), [t, A] = w(!1), [p, B] = w(!1), [M, I] = w(!0), o = F(), R = () => {
-      var s;
-      (s = o.current) == null || s.scrollBy(f, 0);
-    }, K = () => {
-      var s;
-      (s = o.current) == null || s.scrollBy(-f, 0);
-    }, [E, D] = w(!1);
-    j(() => {
-      var s, O;
-      D(
-        ((s = o == null ? void 0 : o.current) == null ? void 0 : s.scrollWidth) > ((O = o == null ? void 0 : o.current) == null ? void 0 : O.clientWidth)
-      );
-    }, [u]), P(b, () => ({
-      scrollToEnd() {
-        G();
-      },
-      scrollLeft() {
-        K();
-      },
-      scrollRight() {
-        R();
-      }
-    }));
-    const G = () => {
-      o.current.scrollLeft = o.current.scrollWidth;
-    };
-    return /* @__PURE__ */ i(
-      ee,
-      {
-        ref: T,
-        arrowsVisibleOnHover: k,
-        hasOverflow: E,
-        noArrows: n,
-        padding: m,
-        rightAlignArrows: x,
-        showTimesBtn: h,
-        theme: l,
-        noMargin: g,
-        ...N,
-        children: /* @__PURE__ */ d(
-          U,
-          {
-            ref: o,
-            className: "scrollable-container",
-            columnGap: e,
-            rowGap: v,
-            wrap: a || y && $ ? "Wrap" : "NoWrap",
-            children: [
-              n !== !0 && /* @__PURE__ */ d(z, { children: [
-                !(c === !0 && p === !0) && /* @__PURE__ */ i(
-                  W,
-                  {
-                    borderRadius: "curved",
-                    btnType: "tinted",
-                    className: "scroll-arrow-left",
-                    color: "neutral",
-                    disabled: p,
-                    icon: "angle-left",
-                    onClick: K
-                  }
-                ),
-                !(c === !0 && t === !0) && /* @__PURE__ */ i(
-                  W,
-                  {
-                    borderRadius: "curved",
-                    btnType: "tinted",
-                    className: "scroll-arrow-right",
-                    color: "neutral",
-                    disabled: t,
-                    icon: "angle-right",
-                    onClick: R
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ i(
-                H,
-                {
-                  isHorizontal: !0,
-                  onIsNotVisible: () => {
-                    p === !0 && B(!1);
-                  },
-                  onIsVisible: () => {
-                    p === !1 && B(!0);
-                  }
-                }
-              ),
-              u,
-              /* @__PURE__ */ i(
-                H,
-                {
-                  className: "right-scroller",
-                  isHorizontal: !0,
-                  onIsNotVisible: () => {
-                    t === !0 && A(!1), I(!0);
-                  },
-                  onIsVisible: () => {
-                    t === !1 && A(!0), I(!1);
-                  }
-                }
-              ),
-              M && E && S !== !0 && /* @__PURE__ */ i("div", { className: "gradient" })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-L.propTypes = {
-  title: r.string,
-  rowGap: r.string,
-  columnGap: r.string,
-  scrollBySize: r.number,
-  wrapForMobile: r.bool,
-  wrap: r.bool,
-  methodsRef: r.any,
-  arrowsVisibleOnHover: r.bool,
-  rightAlignArrows: r.bool,
-  padding: r.string
-};
-const re = q((e, v) => {
-  const {
-    allButton: f = !0,
-    items: y = [],
-    selectedIds: a = [],
-    onSelect: u = () => {
-    },
-    onRemove: b = () => {
-    },
-    onSelectAll: k = () => {
-    },
-    className: x,
-    showTimesBtn: m = !1,
-    labelKey: h = "label",
-    valueKey: n = "value",
-    codeKey: S = "code",
-    uniqueKey: c,
-    typeKey: g,
-    productsToolbarName: N = "All",
-    ...T
-  } = e, $ = (l, t) => {
-    a != null && a.includes(t) ? b(l, t) : u(l, t);
-  };
-  return /* @__PURE__ */ d(
-    L,
-    {
-      ref: v,
-      arrowsVisibleOnHover: !1,
-      className: x,
-      columnGap: "0.75rem",
-      padding: "0.25rem 0",
-      rightAlignArrows: !0,
-      showTimesBtn: m,
-      ...T,
-      children: [
-        f && /* @__PURE__ */ i(
-          V,
-          {
-            borderRadius: "curved",
-            btnType: a.length === 0 ? "filled" : "tinted",
-            className: "badge-button",
-            color: "neutral",
-            onClick: k,
-            children: N
-          }
-        ),
-        y.map((l, t) => /* @__PURE__ */ d(
-          V,
-          {
-            borderRadius: "curved",
-            btnType: a.includes(l.uuid) ? "filled" : "tinted",
-            className: "badge-button",
-            color: "neutral",
-            onClick: () => $(l, l[n]),
-            children: [
-              Y(l == null ? void 0 : l.icon) && /* @__PURE__ */ d(z, { children: [
-                /* @__PURE__ */ i("i", { className: l == null ? void 0 : l.icon }),
-                " "
-              ] }),
-              l[h],
-              m === !0 && /* @__PURE__ */ i(
-                Q,
-                {
-                  className: "times-btn",
-                  icon: "times",
-                  sizeInUnits: "0.75rem",
-                  onClick: () => b(
-                    l[n],
-                    l[h],
-                    l[S],
-                    c ? l[c] : null,
-                    g ? l[g] : null
-                  )
-                }
-              )
-            ]
-          },
-          t
-        ))
-      ]
-    }
-  );
-});
-re.propTypes = {
-  allButton: r.bool,
-  items: r.array,
-  selectedIds: r.array,
-  onSelect: r.func,
-  onRemove: r.func,
-  onSelectAll: r.func,
-  className: r.string,
-  showTimesBtn: r.bool,
-  valuKey: r.string,
-  labelKey: r.string,
-  codeKey: r.string
-};
-export {
-  re as S
-};

package/dist/index-CHDRU86t.cjs

@@ -1,4 +0,0 @@
-"use strict";const d=require("react/jsx-runtime"),t=require("react"),l=require("./index-BPVoEhTF.cjs"),a=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./useUpdateEffect-BtMgpgIV.cjs"),m=s=>{const[i,n]=t.useState(!1),e=t.useMemo(()=>new IntersectionObserver(([r])=>n(r.isIntersecting)),[]);return t.useEffect(()=>(e.observe(s.current),()=>{e.disconnect()}),[s,e]),i},I=a.styled.div`
-  min-height: 1px;
-  ${s=>s.isHorizontal===!0?"min-width: 1px; width: 1px;":"width: 100%;"}
-`,u=t.forwardRef((s,i)=>{const{onIsVisible:n=()=>{},onIsNotVisible:e,isHorizontal:r=!1,className:f=""}=s,o=t.useRef(null),c=m(o);return p.useUpdateEffect(()=>{c?n():e==null||e()},[c]),d.jsx(I,{ref:o,className:`scroller-element ${f}`,isHorizontal:r})});u.propTypes={onIsVisible:l.PropTypes.func,isHorizontal:l.PropTypes.bool};exports.InfiniteScrollEndElement=u;

package/dist/index-Ce6e4efi.cjs

@@ -1,95 +0,0 @@
-"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-BtEseadx.cjs"),E=require("./consts-goSZX3xP.cjs"),D=require("./useDetectMobile-zkbzoOGV.cjs"),K=require("./index-CHDRU86t.cjs"),O=require("./Button.cjs"),F=require("./Icon.cjs"),G=require("./utils-BOtq2mcF.cjs"),X=z.styled.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;