meticulous-ui 3.7.12 → 3.7.13

package/components/Pagination/Pagination.js

@@ -10,9 +10,7 @@ import j from "../../colors/grey.js";
 import M from "../../colors/white.js";
 import { black as q } from "../../colors/black.js";
 import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as J, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as T, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
-const v = (e) => ({
-  $shades: o
-}) => {
+const v = (e) => ({ $shades: o }) => {
   if (["#FFFFFF"].includes(o))
     return q.m900;
   if (e === I)
@@ -29,9 +27,7 @@ const v = (e) => ({
   min-width: 100%;
   width: 100%;
 
-  ${({
-  $isDisabled: e
-}) => e && R`
+  ${({ $isDisabled: e }) => e && R`
       pointer-events: none;
       opacity: 0.4;
     `};
@@ -41,24 +37,16 @@ const v = (e) => ({
   font-family: inherit;
   outline-offset: 2px;
 
-  height: ${({
-  $individualRemSize: e
-}) => `${e}rem`};
-  width: ${({
-  $individualRemSize: e
-}) => `${e}rem`};
+  height: ${({ $individualRemSize: e }) => `${e}rem`};
+  width: ${({ $individualRemSize: e }) => `${e}rem`};
   border-radius: 50%;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  font-size: ${({
-  $fontRemSize: e
-}) => e}rem;
-  ${({
-  $isSelected: e
-}) => e ? R`
+  font-size: ${({ $fontRemSize: e }) => e}rem;
+  ${({ $isSelected: e }) => e ? R`
           cursor: auto;
           color: ${M};
           background-color: ${v(I)};
@@ -99,42 +87,41 @@ const v = (e) => ({
   outline-offset: 2px;
 
   &:focus-visible {
-    outline: 1px solid ${({
-  $shades: e
-}) => e == null ? void 0 : e.m600};
+    outline: 1px solid ${({ $shades: e }) => e == null ? void 0 : e.m600};
   }
 `, X = f(O)`
   cursor: pointer;
 `, Y = f(z)`
   cursor: pointer;
 `, D = f.div`
-  min-width: ${({
-  size: e
-}) => e};
+  min-width: ${({ size: e }) => e};
   display: flex;
   align-items: center;
   justify-content: space-between;
-`, h = ({
-  size: e,
-  selected: o,
-  shades: n,
-  changePage: x
-}) => (r) => {
+`, h = ({ size: e, selected: o, shades: n, changePage: x }) => (r) => {
   const p = G[e], y = J[e], a = n, l = o === r, c = () => {
     x(r);
   }, u = (d) => {
     (d.key === "Enter" || d.key === " ") && (d.preventDefault(), c());
   };
-  return /* @__PURE__ */ i(Q, { "data-testid": l ? "current-page" : `test-${r}`, $isSelected: l, onClick: c, onKeyDown: u, tabIndex: l ? 0 : -1, "aria-label": `Page ${r}`, "aria-current": l ? "page" : void 0, $shades: a, $individualRemSize: p, $fontRemSize: y, children: r }, `page_${r}`);
-}, S = () => /* @__PURE__ */ i(W, { "aria-hidden": "true", children: "…" }), _ = ({
-  iconSize: e,
-  shades: o,
-  setPrevPage: n
-}) => /* @__PURE__ */ i(P, { onClick: n, "aria-label": "Previous page", $shades: o, children: /* @__PURE__ */ i(b, { rippleColor: o.m50, children: /* @__PURE__ */ i(X, { size: e, "aria-hidden": "true" }) }) }), k = ({
-  iconSize: e,
-  shades: o,
-  setNextPage: n
-}) => /* @__PURE__ */ i(P, { onClick: n, "aria-label": "Next page", $shades: o, children: /* @__PURE__ */ i(b, { rippleColor: o.m50, children: /* @__PURE__ */ i(Y, { size: e, "aria-hidden": "true" }) }) }), fe = ({
+  return /* @__PURE__ */ i(
+    Q,
+    {
+      "data-testid": l ? "current-page" : `test-${r}`,
+      $isSelected: l,
+      onClick: c,
+      onKeyDown: u,
+      tabIndex: l ? 0 : -1,
+      "aria-label": `Page ${r}`,
+      "aria-current": l ? "page" : void 0,
+      $shades: a,
+      $individualRemSize: p,
+      $fontRemSize: y,
+      children: r
+    },
+    `page_${r}`
+  );
+}, S = () => /* @__PURE__ */ i(W, { "aria-hidden": "true", children: "…" }), _ = ({ iconSize: e, shades: o, setPrevPage: n }) => /* @__PURE__ */ i(P, { onClick: n, "aria-label": "Previous page", $shades: o, children: /* @__PURE__ */ i(b, { rippleColor: o.m50, children: /* @__PURE__ */ i(X, { size: e, "aria-hidden": "true" }) }) }), k = ({ iconSize: e, shades: o, setNextPage: n }) => /* @__PURE__ */ i(P, { onClick: n, "aria-label": "Next page", $shades: o, children: /* @__PURE__ */ i(b, { rippleColor: o.m50, children: /* @__PURE__ */ i(Y, { size: e, "aria-hidden": "true" }) }) }), fe = ({
   pageNumber: e,
   setPageNumber: o,
   totalPages: n,
@@ -158,61 +145,66 @@ const v = (e) => ({
   }, E = (s) => {
     ["ArrowLeft", "ArrowUp"].includes(s.code) && (l.current = !0, u()), ["ArrowRight", "ArrowDown"].includes(s.code) && (l.current = !0, d());
   }, t = (F = Z[x]) != null ? F : U, C = G[r], m = H[r];
-  return n <= 7 ? /* @__PURE__ */ $(A, { ref: a, onKeyDown: E, "aria-label": "Pagination", $isDisabled: p, ...y, children: [
-    /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
-    /* @__PURE__ */ i(D, { size: `${n * C}rem`, children: Array.from({
-      length: n
-    }, (s, w) => w + 1).map(h({
-      size: r,
-      selected: e,
-      shades: t,
-      changePage: c
-    })) }),
-    /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
-  ] }) : n < 10 || e < 4 || e > n - 3 && e <= n ? /* @__PURE__ */ $(A, { ref: a, onKeyDown: E, "aria-label": "Pagination", $isDisabled: p, ...y, children: [
-    /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
-    /* @__PURE__ */ $(D, { size: `${9 * C}rem`, children: [
-      [1, 2, 3, 4].map(h({
-        size: r,
-        selected: e,
-        shades: t,
-        changePage: c
-      })),
-      S(),
-      [n - 3, n - 2, n - 1, n].map(h({
-        size: r,
-        selected: e,
-        shades: t,
-        changePage: c
-      }))
-    ] }),
-    /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
-  ] }) : /* @__PURE__ */ $(A, { ref: a, onKeyDown: E, "aria-label": "Pagination", $isDisabled: p, children: [
-    /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
-    /* @__PURE__ */ $(D, { size: `${9 * C}rem`, children: [
-      [1, 2].map(h({
-        size: r,
-        selected: e,
-        shades: t,
-        changePage: c
-      })),
-      e > 4 && S(),
-      [e - 1, e, e + 1].map(h({
-        size: r,
-        selected: e,
-        shades: t,
-        changePage: c
-      })),
-      e < n - 3 && S(),
-      [n - 1, n].map(h({
-        size: r,
-        selected: e,
-        shades: t,
-        changePage: c
-      }))
-    ] }),
-    /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
-  ] });
+  return n <= 7 ? /* @__PURE__ */ $(
+    A,
+    {
+      ref: a,
+      onKeyDown: E,
+      "aria-label": "Pagination",
+      $isDisabled: p,
+      ...y,
+      children: [
+        /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
+        /* @__PURE__ */ i(D, { size: `${n * C}rem`, children: Array.from({ length: n }, (s, w) => w + 1).map(
+          h({ size: r, selected: e, shades: t, changePage: c })
+        ) }),
+        /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
+      ]
+    }
+  ) : n < 10 || e < 4 || e > n - 3 && e <= n ? /* @__PURE__ */ $(
+    A,
+    {
+      ref: a,
+      onKeyDown: E,
+      "aria-label": "Pagination",
+      $isDisabled: p,
+      ...y,
+      children: [
+        /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
+        /* @__PURE__ */ $(D, { size: `${9 * C}rem`, children: [
+          [1, 2, 3, 4].map(h({ size: r, selected: e, shades: t, changePage: c })),
+          S(),
+          [n - 3, n - 2, n - 1, n].map(
+            h({ size: r, selected: e, shades: t, changePage: c })
+          )
+        ] }),
+        /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
+      ]
+    }
+  ) : /* @__PURE__ */ $(
+    A,
+    {
+      ref: a,
+      onKeyDown: E,
+      "aria-label": "Pagination",
+      $isDisabled: p,
+      children: [
+        /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
+        /* @__PURE__ */ $(D, { size: `${9 * C}rem`, children: [
+          [1, 2].map(h({ size: r, selected: e, shades: t, changePage: c })),
+          e > 4 && S(),
+          [e - 1, e, e + 1].map(
+            h({ size: r, selected: e, shades: t, changePage: c })
+          ),
+          e < n - 3 && S(),
+          [n - 1, n].map(
+            h({ size: r, selected: e, shades: t, changePage: c })
+          )
+        ] }),
+        /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
+      ]
+    }
+  );
 };
 export {
   fe as default

package/components/Ripple/Ripple.js

@@ -2,7 +2,7 @@ import { jsx as f } from "react/jsx-runtime";
 import { useRef as y } from "react";
 const h = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
 if (typeof document != "undefined" && !document.getElementById("meticulous-ripple-styles")) {
-  const i = /* @__PURE__ */ document.createElement("style");
+  const i = document.createElement("style");
   i.id = "meticulous-ripple-styles", i.textContent = h, document.head.appendChild(i);
 }
 const R = ({
@@ -25,7 +25,17 @@ const R = ({
     const n = o.current.getBoundingClientRect();
     s(n.width / 2, n.height / 2);
   };
-  return /* @__PURE__ */ f("div", { ref: o, className: `ripple-container ${a}`, onClick: u, onKeyDown: m, ...d, children: i });
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: o,
+      className: `ripple-container ${a}`,
+      onClick: u,
+      onKeyDown: m,
+      ...d,
+      children: i
+    }
+  );
 };
 export {
   R as default

package/components/RootComponent/RootComponent.js

@@ -4,10 +4,7 @@ import p from "styled-components";
 const s = p.div`
   font-size: 62.5%;
   -webkit-text-size-adjust: 100%;
-`, i = ({
-  children: o,
-  ...t
-}) => /* @__PURE__ */ e(s, { ...t, children: o });
+`, i = ({ children: o, ...t }) => /* @__PURE__ */ e(s, { ...t, children: o });
 i.propTypes = {
   /** Content to render inside the root wrapper */
   children: r.node

package/components/Selectbox/Selectbox.js

@@ -18,37 +18,25 @@ const ye = d.m500, ke = J`
   from { transform: rotate(180deg); }
   to { transform: rotate(0deg); }
 `, Ie = s.div`
-  max-width: ${({
-  $width: t
-}) => t};
+  max-width: ${({ $width: t }) => t};
   position: relative;
   outline: none;
 
-  ${({
-  $isDisabled: t
-}) => t && O`
+  ${({ $isDisabled: t }) => t && O`
       pointer-events: none;
       opacity: 0.7;
     `}
 
-  ${({
-  $isLoading: t
-}) => t && O`
+  ${({ $isLoading: t }) => t && O`
       pointer-events: none;
       opacity: 0.7;
     `}
 `, Se = s.div`
   height: 3.2rem;
-  width: ${({
-  $width: t
-}) => t};
+  width: ${({ $width: t }) => t};
   border-radius: 0.96rem;
   outline: none;
-  border: ${({
-  $isOpen: t,
-  $isFocused: m,
-  $border: a
-}) => t || m ? `2px solid ${a}` : `1px solid ${ye}`};
+  border: ${({ $isOpen: t, $isFocused: m, $border: a }) => t || m ? `2px solid ${a}` : `1px solid ${ye}`};
   padding: 0.64rem 0.96rem 0.64rem;
   display: flex;
   align-items: center;
@@ -58,22 +46,14 @@ const ye = d.m500, ke = J`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({
-  $width: t
-}) => t} - 3.2rem);
+  max-width: calc(${({ $width: t }) => t} - 3.2rem);
   pointer-events: none;
 `, Ee = s(we)`
-  animation: ${({
-  $isOpen: t
-}) => t ? ke : Ce} 0.15s linear;
-  transform: rotate(${({
-  $isOpen: t
-}) => t ? 180 : 0}deg);
+  animation: ${({ $isOpen: t }) => t ? ke : Ce} 0.15s linear;
+  transform: rotate(${({ $isOpen: t }) => t ? 180 : 0}deg);
 `, ze = s.div`
   border: 1px solid ${d.m700};
-  width: calc(${({
-  $width: t
-}) => t} + 1.6rem);
+  width: calc(${({ $width: t }) => t} + 1.6rem);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -85,18 +65,12 @@ const ye = d.m500, ke = J`
   opacity: 0;
   overflow: hidden;
 
-  ${({
-  $isOpen: t
-}) => t && O`
-      max-height: ${({
-  $height: m
-}) => m};
+  ${({ $isOpen: t }) => t && O`
+      max-height: ${({ $height: m }) => m};
       opacity: 1;
     `};
 
-  ${({
-  $top: t
-}) => t ? O`
+  ${({ $top: t }) => t ? O`
           bottom: 100%;
           flex-direction: column-reverse;
           border-top-right-radius: 0.96rem;
@@ -112,30 +86,19 @@ const ye = d.m500, ke = J`
   overflow-y: auto;
   flex: 1;
 `, Fe = s.div`
-  width: ${({
-  $width: t
-}) => t};
+  width: ${({ $width: t }) => t};
   box-sizing: border-box;
-  background-color: ${({
-  $isHighlighted: t,
-  $hoverColor: m
-}) => t ? m : "transparent"};
-  cursor: ${({
-  $isDisabled: t
-}) => t ? "not-allowed" : "pointer"};
+  background-color: ${({ $isHighlighted: t, $hoverColor: m }) => t ? m : "transparent"};
+  cursor: ${({ $isDisabled: t }) => t ? "not-allowed" : "pointer"};
   padding: 0.96rem 1.6rem 1.28rem;
   margin-top: 0.16rem;
   display: flex;
   align-items: center;
   gap: 0.96rem;
-  pointer-events: ${({
-  $isDisabled: t
-}) => t ? "none" : "auto"};
+  pointer-events: ${({ $isDisabled: t }) => t ? "none" : "auto"};
 
   &:active {
-    background-color: ${({
-  $activeColor: t
-}) => t};
+    background-color: ${({ $activeColor: t }) => t};
   }
 `, Re = s.div`
   position: relative;
@@ -206,9 +169,7 @@ const ye = d.m500, ke = J`
   }, h = ue(() => {
     if (!$ || !z.trim()) return t;
     const e = z.toLowerCase();
-    return t.filter(({
-      label: r
-    }) => r.toLowerCase().includes(e));
+    return t.filter(({ label: r }) => r.toLowerCase().includes(e));
   }, [t, z, $]);
   S(() => {
     if (n) {
@@ -219,10 +180,7 @@ const ye = d.m500, ke = J`
   }, [n]), S(() => {
     if (n && l !== -1 && k.current) {
       const e = k.current.children[l];
-      e && e.scrollIntoView({
-        block: "nearest",
-        behavior: "auto"
-      });
+      e && e.scrollIntoView({ block: "nearest", behavior: "auto" });
     }
   }, [l, n]), S(() => {
     n && $ && B.current && B.current.focus();
@@ -234,7 +192,9 @@ const ye = d.m500, ke = J`
   }, []), fe(() => {
     if (n && k.current && f.current) {
       const e = f.current.getBoundingClientRect(), r = window.innerHeight, i = Te(R), b = r - e.bottom;
-      te(b < i + 8 && e.top > b ? "top" : "bottom");
+      te(
+        b < i + 8 && e.top > b ? "top" : "bottom"
+      );
     }
   }, [n, R]);
   const oe = (e) => {
@@ -257,13 +217,12 @@ const ye = d.m500, ke = J`
   S(() => {
     const e = V.current;
     if (!e || !p || !w) return;
-    const r = new IntersectionObserver(([i]) => {
-      i.isIntersecting && !u && K();
-    }, {
-      root: k.current,
-      threshold: 0.1,
-      rootMargin: "20px"
-    });
+    const r = new IntersectionObserver(
+      ([i]) => {
+        i.isIntersecting && !u && K();
+      },
+      { root: k.current, threshold: 0.1, rootMargin: "20px" }
+    );
     return r.observe(e), () => r.disconnect();
   }, [K, p, w, u]);
   const ie = (e) => {
@@ -299,44 +258,127 @@ const ye = d.m500, ke = J`
     m100: ae,
     m500: Q,
     m800: ce
-  } = (N = be[Z]) != null ? N : ge, le = (e, r) => () => !e && y(r), q = (e) => `${D}-opt-${e}`, de = a.length === 0 ? Y : `${a.length} selected`, me = ({
-    value: e,
-    label: r,
-    disabled: i
-  }, b) => {
+  } = (N = be[Z]) != null ? N : ge, le = (e, r) => () => !e && y(r), q = (e) => `${D}-opt-${e}`, de = a.length === 0 ? Y : `${a.length} selected`, me = ({ value: e, label: r, disabled: i }, b) => {
     const W = a.includes(e);
-    return /* @__PURE__ */ c(Fe, { id: q(b), role: "option", "aria-selected": W, "aria-disabled": i || void 0, $width: `calc(${g} + 1.6rem)`, $isHighlighted: b === l, $isDisabled: i, $hoverColor: se, $activeColor: ae, onClick: () => P(e), onMouseEnter: le(i, b), title: r, children: /* @__PURE__ */ c("div", { onClick: (pe) => pe.stopPropagation(), children: /* @__PURE__ */ c(xe, { value: W, onChange: () => P(e), label: r, disabled: i, innerShade: Q, outerShade: ce, tabIndex: -1 }) }) }, e);
+    return /* @__PURE__ */ c(
+      Fe,
+      {
+        id: q(b),
+        role: "option",
+        "aria-selected": W,
+        "aria-disabled": i || void 0,
+        $width: `calc(${g} + 1.6rem)`,
+        $isHighlighted: b === l,
+        $isDisabled: i,
+        $hoverColor: se,
+        $activeColor: ae,
+        onClick: () => P(e),
+        onMouseEnter: le(i, b),
+        title: r,
+        children: /* @__PURE__ */ c("div", { onClick: (pe) => pe.stopPropagation(), children: /* @__PURE__ */ c(
+          xe,
+          {
+            value: W,
+            onChange: () => P(e),
+            label: r,
+            disabled: i,
+            innerShade: Q,
+            outerShade: ce,
+            tabIndex: -1
+          }
+        ) })
+      },
+      e
+    );
   };
-  return /* @__PURE__ */ C(Ie, { ref: f, $width: g, $isDisabled: x, $isLoading: E, onKeyDown: ie, onBlur: (e) => {
-    var r;
-    (r = f.current) != null && r.contains(e.relatedTarget) || (j(!1), v(!1));
-  }, onFocus: () => j(!0), ...L, children: [
-    /* @__PURE__ */ C(Se, { id: U, role: "button", $width: g, onClick: re, $isOpen: n, $border: Q, $isFocused: M && !n, tabIndex: x ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": n, "aria-controls": D, "aria-disabled": x || void 0, "aria-activedescendant": l !== -1 ? q(l) : void 0, children: [
-      /* @__PURE__ */ c(Oe, { $width: g, color: a.length > 0 ? d.m700 : d.m500, size: "1.92rem", children: de }),
-      /* @__PURE__ */ c(Ee, { color: d.m500, size: 22, $isOpen: n, "aria-hidden": !0 })
-    ] }),
-    /* @__PURE__ */ C(ze, { $isOpen: n, $width: g, $height: R, $top: ee === "top", children: [
-      $ && /* @__PURE__ */ C(Re, { onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ c(Pe, { size: 20, color: d.m600, "aria-hidden": !0 }),
-        /* @__PURE__ */ c(Be, { ref: B, value: z, onChange: (e) => H(e.target.value), placeholder: A, "aria-label": A, "aria-controls": D, "aria-autocomplete": "list", "aria-expanded": n, role: "combobox", tabIndex: n ? 0 : -1 })
-      ] }),
-      /* @__PURE__ */ C(De, { ref: k, role: "listbox", id: D, tabIndex: -1, "aria-multiselectable": !0, "aria-labelledby": U, children: [
-        h.map(me),
-        p && /* @__PURE__ */ c(Ae, { ref: V, children: u && /* @__PURE__ */ c(G, { size: "small", color: T }) })
-      ] })
-    ] }),
-    E && /* @__PURE__ */ c(We, { children: /* @__PURE__ */ c(G, { size: "small", color: T }) })
-  ] });
+  return /* @__PURE__ */ C(
+    Ie,
+    {
+      ref: f,
+      $width: g,
+      $isDisabled: x,
+      $isLoading: E,
+      onKeyDown: ie,
+      onBlur: (e) => {
+        var r;
+        (r = f.current) != null && r.contains(e.relatedTarget) || (j(!1), v(!1));
+      },
+      onFocus: () => j(!0),
+      ...L,
+      children: [
+        /* @__PURE__ */ C(
+          Se,
+          {
+            id: U,
+            role: "button",
+            $width: g,
+            onClick: re,
+            $isOpen: n,
+            $border: Q,
+            $isFocused: M && !n,
+            tabIndex: x ? -1 : 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": n,
+            "aria-controls": D,
+            "aria-disabled": x || void 0,
+            "aria-activedescendant": l !== -1 ? q(l) : void 0,
+            children: [
+              /* @__PURE__ */ c(Oe, { $width: g, color: a.length > 0 ? d.m700 : d.m500, size: "1.92rem", children: de }),
+              /* @__PURE__ */ c(Ee, { color: d.m500, size: 22, $isOpen: n, "aria-hidden": !0 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(ze, { $isOpen: n, $width: g, $height: R, $top: ee === "top", children: [
+          $ && /* @__PURE__ */ C(Re, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ c(Pe, { size: 20, color: d.m600, "aria-hidden": !0 }),
+            /* @__PURE__ */ c(
+              Be,
+              {
+                ref: B,
+                value: z,
+                onChange: (e) => H(e.target.value),
+                placeholder: A,
+                "aria-label": A,
+                "aria-controls": D,
+                "aria-autocomplete": "list",
+                "aria-expanded": n,
+                role: "combobox",
+                tabIndex: n ? 0 : -1
+              }
+            )
+          ] }),
+          /* @__PURE__ */ C(
+            De,
+            {
+              ref: k,
+              role: "listbox",
+              id: D,
+              tabIndex: -1,
+              "aria-multiselectable": !0,
+              "aria-labelledby": U,
+              children: [
+                h.map(me),
+                p && /* @__PURE__ */ c(Ae, { ref: V, children: u && /* @__PURE__ */ c(G, { size: "small", color: T }) })
+              ]
+            }
+          )
+        ] }),
+        E && /* @__PURE__ */ c(We, { children: /* @__PURE__ */ c(G, { size: "small", color: T }) })
+      ]
+    }
+  );
 };
 je.propTypes = {
   /** Array of option objects: `{ value, label, disabled? }` */
-  options: /* @__PURE__ */ o.arrayOf(/* @__PURE__ */ o.shape({
-    value: o.any,
-    label: o.string,
-    disabled: o.bool
-  })),
+  options: o.arrayOf(
+    o.shape({
+      value: o.any,
+      label: o.string,
+      disabled: o.bool
+    })
+  ),
   /** Array of currently selected values (controlled multi-select). Defaults to `[]` */
-  value: /* @__PURE__ */ o.arrayOf(o.any),
+  value: o.arrayOf(o.any),
   /** Called with the updated array of selected values on each change */
   onChange: o.func,
   /** CSS width of the selectbox trigger. Defaults to `'32rem'` */

package/components/Shimmer/Shimmer.js

@@ -9,15 +9,9 @@ const f = p`
   position: relative;
   overflow: hidden;
   background-color: ${o.m300};
-  border-radius: ${({
-  $borderRadius: r
-}) => r};
-  width: ${({
-  $width: r
-}) => r};
-  height: ${({
-  $height: r
-}) => r};
+  border-radius: ${({ $borderRadius: r }) => r};
+  width: ${({ $width: r }) => r};
+  height: ${({ $height: r }) => r};
 
   &:after {
     content: '';
@@ -40,14 +34,24 @@ const f = p`
   borderRadius: n = "0.64rem",
   label: s = "Loading...",
   ...m
-}) => /* @__PURE__ */ a(u, { role: "status", "aria-label": s, $width: t(r), $height: t(i), $borderRadius: t(n), ...m });
+}) => /* @__PURE__ */ a(
+  u,
+  {
+    role: "status",
+    "aria-label": s,
+    $width: t(r),
+    $height: t(i),
+    $borderRadius: t(n),
+    ...m
+  }
+);
 g.propTypes = {
   /** Width of the shimmer block (rem string or number). Defaults to `'100%'` */
-  width: /* @__PURE__ */ e.oneOfType([e.string, e.number]),
+  width: e.oneOfType([e.string, e.number]),
   /** Height of the shimmer block (rem string or number). Defaults to `'100%'` */
-  height: /* @__PURE__ */ e.oneOfType([e.string, e.number]),
+  height: e.oneOfType([e.string, e.number]),
   /** Border-radius of the shimmer block. Defaults to `'0.64rem'` */
-  borderRadius: /* @__PURE__ */ e.oneOfType([e.string, e.number]),
+  borderRadius: e.oneOfType([e.string, e.number]),
   /** Accessible label for screen readers. Defaults to `'Loading...'` */
   label: e.string
 };