meticulous-ui 3.3.0 → 3.4.0

package/components/Input/Textarea/Textarea.js

@@ -1,81 +1,92 @@
-import { jsxs as m, jsx as d } from "react/jsx-runtime";
-import { useState as E, useRef as L } from "react";
-import { Wrapper as N, TextareaBox as O, Parent as S, Label as T, HelperText as W } from "./styles.js";
-import { getColor as q } from "./helpers.js";
-import G from "../../../colors/white.js";
-const V = ({
+import { jsxs as R, jsx as e } from "react/jsx-runtime";
+import { useState as J, useRef as K } from "react";
+import { Wrapper as M, TextareaBox as Q, Parent as U, Label as V, HelperText as X } from "./styles.js";
+import { LeftIconWrapper as Y, RightIconWrapper as Z } from "../Input/styles.js";
+import { getColor as _, getIcon as F } from "./helpers.js";
+import D from "../../../colors/white.js";
+import ee from "../../../colors/grey.js";
+import b from "./SvgIcon.js";
+const he = ({
   label: s,
-  onChange: p,
-  value: e,
-  type: g,
-  hasError: F,
-  name: h = "textarea",
-  color: b = "blue",
-  helperText: n = "",
+  onChange: v,
+  value: t,
+  type: B,
+  hasError: j,
+  name: p = "textarea",
+  color: C = "blue",
+  helperText: c = "",
   background: u = "transparent",
-  outerBackground: B = G,
-  isDynamic: a,
-  isResizeNone: j,
-  rows: y = "2",
-  cols: C = "20",
-  placeholder: i,
-  ...H
+  outerBackground: H = D,
+  isDynamic: i,
+  isResizeNone: L,
+  rows: S = "2",
+  cols: W = "20",
+  leftIcon: w,
+  rightIcon: z,
+  placeholder: a,
+  ...P
 }) => {
-  const [t, f] = E(!1), c = q(b), $ = L(null), I = () => f(!0), R = () => f(!1), w = (z) => {
-    if (a) {
-      const o = $.current;
-      if (o) {
-        o.style.height = "0px";
-        const A = o.scrollHeight;
-        o.style.height = `${A}px`;
+  const [o, g] = J(!1), h = _(C), $ = K(null), k = () => g(!0), A = () => g(!1), E = (q) => {
+    if (i) {
+      const n = $.current;
+      if (n) {
+        n.style.height = "0px";
+        const G = n.scrollHeight;
+        n.style.height = `${G}px`;
       }
     }
-    p(z);
-  }, r = F, P = a, k = u, v = a ? {} : { rows: y }, l = `textarea-${h}`, x = n ? `${l}-helper` : void 0;
-  return /* @__PURE__ */ m(N, { children: [
-    /* @__PURE__ */ d(
-      O,
+    v(q);
+  }, I = { color: ee.m500, size: 20 }, l = F(w), d = F(z), f = !!l, x = !!d, r = j, N = i, O = u, T = i ? {} : { rows: S }, m = `textarea-${p}`, y = c ? `${m}-helper` : void 0;
+  return /* @__PURE__ */ R(M, { children: [
+    /* @__PURE__ */ e(
+      Q,
       {
-        type: g,
-        name: h,
+        type: B,
+        name: p,
         $hasError: r,
-        value: e,
-        $isFocused: t,
-        $shade: c,
-        $isDynamic: P,
-        $background: k,
-        cols: C,
-        $isResizeNone: j,
-        ...v,
-        id: l,
+        value: t,
+        $isFocused: o,
+        $shade: h,
+        $isDynamic: N,
+        $background: O,
+        cols: W,
+        $hasLeftIcon: f,
+        $hasRightIcon: x,
+        $isResizeNone: L,
+        ...T,
+        id: m,
         "aria-invalid": r ? !0 : void 0,
-        "aria-describedby": x,
+        "aria-describedby": y,
         ref: $,
-        onFocus: I,
-        onBlur: R,
-        onChange: w,
-        ...H
+        onFocus: k,
+        onBlur: A,
+        onChange: E,
+        ...P
       }
     ),
-    /* @__PURE__ */ m(S, { children: [
-      (s || i && !e) && /* @__PURE__ */ d(
-        T,
+    l && /* @__PURE__ */ e(Y, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ e(b, { svgIcon: l, iconStyles: I }) }),
+    d && /* @__PURE__ */ e(Z, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ e(b, { svgIcon: d, iconStyles: I }) }),
+    /* @__PURE__ */ R(U, { children: [
+      (s || a && !t) && /* @__PURE__ */ e(
+        V,
         {
           as: "label",
-          htmlFor: l,
+          htmlFor: m,
           $hasError: r,
-          $isFocused: t,
-          $shade: c,
-          $value: e,
-          $outerBackground: t || e ? B : u,
-          $onlyPh: i && !s,
-          children: s || i
+          $isFocused: o,
+          $shade: h,
+          $value: t,
+          $outerBackground: o || t ? H : u,
+          $hasLeftIcon: f,
+          $hasRightIcon: x,
+          $onlyPh: a && !s,
+          children: s || a
         }
       ),
-      n && /* @__PURE__ */ d(W, { id: x, $hasError: r, $isFocused: t, $shade: c, children: n })
+      c && /* @__PURE__ */ e(X, { id: y, $hasError: r, $isFocused: o, $shade: h, $hasLeftIcon: f, children: c })
     ] })
   ] });
 };
 export {
-  V as default
+  he as default
 };

package/components/Input/Textarea/helpers.js

@@ -1,29 +1,30 @@
-import f from "../../../colors/blue.js";
-import t from "../../../colors/green.js";
-import p from "../../../colors/red.js";
-import n from "../../../colors/yellow.js";
+import { blue as n } from "../../../colors/blue.js";
+import l from "../../../colors/green.js";
+import e from "../../../colors/red.js";
+import f from "../../../colors/yellow.js";
 import g from "../../../colors/orange.js";
-import a from "../../../colors/black.js";
-import r from "../../../colors/grey.js";
-import u from "../../../colors/violet.js";
-import y from "../../../colors/teal.js";
-import b from "../../../colors/purple.js";
-import c from "../../../colors/pink.js";
+import { black as a } from "../../../colors/black.js";
+import m from "../../../colors/grey.js";
+import c from "../../../colors/violet.js";
+import s from "../../../colors/teal.js";
+import u from "../../../colors/purple.js";
+import y from "../../../colors/pink.js";
+import b from "../../Icons/iconsMap.js";
 const k = {
-  blue: f.m500,
-  green: t.m500,
-  red: p.m500,
-  green: t.m500,
-  yellow: n.m500,
+  blue: n.m500,
+  red: e.m500,
+  green: l.m500,
+  yellow: f.m500,
   orange: g.m500,
   black: a.m500,
-  grey: r.m500,
-  violet: u.m500,
-  teal: y.m500,
-  purple: b.m500,
-  pink: c.m500
-}, E = (m) => k[m] ?? r.m500, H = ({ $hasError: m, $shade: i, $isFocused: o, value: e, $onlyPh: l, textColor: s }) => m ? typeof e == "string" && !e && !o ? r.m500 : p.m400 : o && !l ? i : r.m500;
+  grey: m.m500,
+  violet: c.m500,
+  teal: s.m500,
+  purple: u.m500,
+  pink: y.m500
+}, E = (r) => k[r] ?? m.m500, H = (r) => b[r] ?? null, I = ({ $hasError: r, $shade: p, $isFocused: o, value: t, $onlyPh: i }) => r ? typeof t == "string" && !t && !o ? m.m500 : e.m400 : o && !i ? p : m.m500;
 export {
   E as getColor,
-  H as getCssShade
+  I as getCssShade,
+  H as getIcon
 };

package/components/Input/Textarea/styles.js

@@ -1,5 +1,5 @@
 import o, { css as r } from "styled-components";
-import a from "../../../colors/black.js";
+import { black as a } from "../../../colors/black.js";
 import l from "../../../colors/grey.js";
 import s from "../../../colors/red.js";
 import { getCssShade as i } from "./helpers.js";

package/components/Loader/helpers.js

@@ -1,9 +1,9 @@
-import o from "../../colors/blue.js";
+import { blue as o } from "../../colors/blue.js";
 import m from "../../colors/green.js";
 import t from "../../colors/red.js";
 import p from "../../colors/yellow.js";
 import e from "../../colors/orange.js";
-import i from "../../colors/black.js";
+import { black as i } from "../../colors/black.js";
 import f from "../../colors/grey.js";
 import l from "../../colors/violet.js";
 import n from "../../colors/teal.js";

package/components/MenuItem/MenuItem.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import i from "../../colors/grey.js";
-import m from "../../colors/blue.js";
+import { blue as m } from "../../colors/blue.js";
 import s from "../../colors/white.js";
 import { Wrapper as k, PWrapper as v } from "./styles.js";
 const w = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500, M = ({

package/components/OtpInput/OtpInput.js

@@ -1,52 +1,51 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useState as I, useRef as y, useEffect as P } from "react";
-import { OTPWrapper as j } from "./styles.js";
-import { renderNums as b } from "./helpers.js";
-const B = ({ length: s = 6, value: p = "", onChange: n, onComplete: e, ...O }) => {
-  const [a, D] = I(Array(s).fill("")), d = y([]), w = y(a), o = y(!1), f = (r) => {
-    var t;
-    o.current = !0, (t = d.current[r]) == null || t.focus();
+import { jsx as A } from "react/jsx-runtime";
+import { useState as E, useRef as l, useEffect as I } from "react";
+import { OTPWrapper as P } from "./styles.js";
+import { renderNums as j } from "./helpers.js";
+const g = ({ length: s = 6, value: a = "", onChange: d, onComplete: i, ...w }) => {
+  const [f, m] = E(Array(s).fill("")), y = l([]), D = l(f), p = l(!1), c = (r) => {
+    p.current = !0, y.current[r]?.focus();
   };
-  P(() => {
-    if (!p) return;
-    const r = String(p).replace(/\D/g, "").slice(0, s), t = r.split("");
+  I(() => {
+    if (!a) return;
+    const r = String(a).replace(/\D/g, "").slice(0, s), t = r.split("");
     for (; t.length < s; ) t.push("");
-    D(t), r.length === s && (e == null || e(r));
-  }, [p, s, e]);
-  const l = (r) => {
-    w.current = r, D(r);
+    m(t), r.length === s && i?.(r);
+  }, [a, s, i]);
+  const u = (r) => {
+    D.current = r, m(r);
     const t = r.join("");
-    n == null || n(t), t.length === s && (e == null || e(t));
-  }, k = (r, t) => {
+    d?.(t), t.length === s && i?.(t);
+  }, O = (r, t) => {
     r = r.replace(/\D/g, "").slice(-1);
-    const c = [...a];
-    c[t] = r, l(c), r && t < s - 1 && f(t + 1);
-  }, m = (r, t) => {
-    const c = a.findIndex((u) => u === ""), i = c === -1 ? s - 1 : c;
+    const e = [...f];
+    e[t] = r, u(e), r && t < s - 1 && c(t + 1);
+  }, h = (r, t) => {
+    const e = f.findIndex((n) => n === ""), o = e === -1 ? s - 1 : e;
     if (r.key === "Backspace") {
-      if (r.preventDefault(), a[t]) {
-        const u = [...a];
-        u[t] = "", l(u);
+      if (r.preventDefault(), f[t]) {
+        const n = [...f];
+        n[t] = "", u(n);
       }
-      t > 0 && f(t - 1);
-    } else r.key === "ArrowLeft" && t > 0 ? (r.preventDefault(), f(t - 1)) : r.key === "ArrowRight" ? (r.preventDefault(), t + 1 <= i && f(t + 1)) : r.key === "Tab" && (r.preventDefault(), r.shiftKey ? t > 0 && f(t - 1) : f(i));
-  }, R = (r) => {
-    if (o.current) {
-      o.current = !1;
+      t > 0 && c(t - 1);
+    } else r.key === "ArrowLeft" && t > 0 ? (r.preventDefault(), c(t - 1)) : r.key === "ArrowRight" ? (r.preventDefault(), t + 1 <= o && c(t + 1)) : r.key === "Tab" && (r.preventDefault(), r.shiftKey ? t > 0 && c(t - 1) : c(o));
+  }, k = (r) => {
+    if (p.current) {
+      p.current = !1;
       return;
     }
-    const t = w.current.findIndex((i) => i === ""), c = t === -1 ? s - 1 : t;
-    r !== c && f(c);
+    const t = D.current.findIndex((o) => o === ""), e = t === -1 ? s - 1 : t;
+    r !== e && c(e);
   };
-  return /* @__PURE__ */ E(j, { onPaste: (r) => {
+  return /* @__PURE__ */ A(P, { onPaste: (r) => {
     const t = r.clipboardData.getData("text").replace(/\D/g, "");
     if (!t) return;
-    const c = Array(s).fill("");
-    t.slice(0, s).split("").forEach((u, A) => c[A] = u), l(c);
-    const i = Math.min(t.length - 1, s - 1);
-    f(i);
-  }, ...O, children: a.map(b({ inputsRef: d, handleChange: k, handleKeyDown: m, handleFocus: R, length: s })) });
+    const e = Array(s).fill("");
+    t.slice(0, s).split("").forEach((n, R) => e[R] = n), u(e);
+    const o = Math.min(t.length - 1, s - 1);
+    c(o);
+  }, ...w, children: f.map(j({ inputsRef: y, handleChange: O, handleKeyDown: h, handleFocus: k, length: s })) });
 };
 export {
-  B as default
+  g as default
 };

package/components/PageLoader/PageLoader.js

@@ -1,13 +1,13 @@
 import { jsx as l } from "react/jsx-runtime";
 import { getColor as t } from "../Input/Checkbox/helpers.js";
 import { PageLdr as i } from "./styles.js";
-import n from "../../colors/blue.js";
-const f = ({ theme: o = "blue", color: a, ...e }) => {
-  const r = t(o), m = a || ((r == null ? void 0 : r.m500) ?? n.m500);
+import { blue as s } from "../../colors/blue.js";
+const d = ({ theme: r = "blue", color: o, ...a }) => {
+  const e = t(r), m = o || (e?.m500 ?? s.m500);
   return /* @__PURE__ */ l(
     i,
     {
-      ...e,
+      ...a,
       $color: m,
       role: "progressbar",
       "aria-label": "Loading",
@@ -17,5 +17,5 @@ const f = ({ theme: o = "blue", color: a, ...e }) => {
   );
 };
 export {
-  f as default
+  d as default
 };

package/components/Pagination/Pagination.js

@@ -1,90 +1,89 @@
-import { jsxs as l, jsx as f } from "react/jsx-runtime";
-import { useRef as S, useEffect as u } from "react";
-import { PrevArrow as M, renderPageNum as t, NextArrow as R, renderThreeDots as $ } from "./helpers.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useRef as E, useEffect as u } from "react";
+import { PrevArrow as I, renderPageNum as t, NextArrow as M, renderThreeDots as R } from "./helpers.js";
 import j from "../../colors/colorMap.js";
 import G from "../../colors/teal.js";
 import { ICON_SIZE_MAPPING as L, MEDIUM as U, SIZE_REM_MAPPING as Z } from "./constants.js";
-import { AllPages as v, MiddleLayer as x } from "./styles.js";
+import { AllPages as $, MiddleLayer as v } from "./styles.js";
 const F = ({
   pageNumber: r,
-  setPageNumber: _,
+  setPageNumber: S,
   totalPages: n,
-  theme: K = "lime",
-  size: o = U,
-  isDisabled: D = !1,
-  ...E
+  theme: _ = "lime",
+  size: c = U,
+  isDisabled: m = !1,
+  ...x
 }) => {
-  const s = S(null), h = S(!1);
+  const s = E(null), h = E(!1);
   u(() => {
-    var c, m;
-    h.current && (h.current = !1, (m = (c = s.current) == null ? void 0 : c.querySelector('[aria-current="page"]')) == null || m.focus());
+    h.current && (h.current = !1, s.current?.querySelector('[aria-current="page"]')?.focus());
   }, [r]);
-  const e = (c) => {
-    c !== r && _(c);
+  const o = (d) => {
+    d !== r && S(d);
   }, A = () => {
-    r > 1 && e(r - 1);
+    r > 1 && o(r - 1);
   }, w = () => {
-    r < n && e(r + 1);
-  }, y = (c) => {
-    ["ArrowLeft", "ArrowUp"].includes(c.code) && (h.current = !0, A()), ["ArrowRight", "ArrowDown"].includes(c.code) && (h.current = !0, w());
-  }, i = j[K] ?? G, I = Z[o], d = L[o];
+    r < n && o(r + 1);
+  }, D = (d) => {
+    ["ArrowLeft", "ArrowUp"].includes(d.code) && (h.current = !0, A()), ["ArrowRight", "ArrowDown"].includes(d.code) && (h.current = !0, w());
+  }, i = j[_] ?? G, y = Z[c], f = L[c];
   return n <= 7 ? /* @__PURE__ */ l(
-    v,
+    $,
     {
       ref: s,
-      onKeyDown: y,
+      onKeyDown: D,
       "aria-label": "Pagination",
-      $isDisabled: D,
-      ...E,
+      $isDisabled: m,
+      ...x,
       children: [
-        /* @__PURE__ */ f(M, { iconSize: d, shades: i, setPrevPage: A }),
-        /* @__PURE__ */ f(x, { size: `${n * I}rem`, children: Array.from({ length: n }, (c, m) => m + 1).map(
-          t({ size: o, selected: r, shades: i, changePage: e })
+        /* @__PURE__ */ e(I, { iconSize: f, shades: i, setPrevPage: A }),
+        /* @__PURE__ */ e(v, { size: `${n * y}rem`, children: Array.from({ length: n }, (d, K) => K + 1).map(
+          t({ size: c, selected: r, shades: i, changePage: o })
         ) }),
-        /* @__PURE__ */ f(R, { iconSize: d, shades: i, setNextPage: w })
+        /* @__PURE__ */ e(M, { iconSize: f, shades: i, setNextPage: w })
       ]
     }
   ) : n < 10 || r < 4 || r > n - 3 && r <= n ? /* @__PURE__ */ l(
-    v,
+    $,
     {
       ref: s,
-      onKeyDown: y,
+      onKeyDown: D,
       "aria-label": "Pagination",
-      $isDisabled: D,
-      ...E,
+      $isDisabled: m,
+      ...x,
       children: [
-        /* @__PURE__ */ f(M, { iconSize: d, shades: i, setPrevPage: A }),
-        /* @__PURE__ */ l(x, { size: `${9 * I}rem`, children: [
-          [1, 2, 3, 4].map(t({ size: o, selected: r, shades: i, changePage: e })),
-          $(),
+        /* @__PURE__ */ e(I, { iconSize: f, shades: i, setPrevPage: A }),
+        /* @__PURE__ */ l(v, { size: `${9 * y}rem`, children: [
+          [1, 2, 3, 4].map(t({ size: c, selected: r, shades: i, changePage: o })),
+          R(),
           [n - 3, n - 2, n - 1, n].map(
-            t({ size: o, selected: r, shades: i, changePage: e })
+            t({ size: c, selected: r, shades: i, changePage: o })
           )
         ] }),
-        /* @__PURE__ */ f(R, { iconSize: d, shades: i, setNextPage: w })
+        /* @__PURE__ */ e(M, { iconSize: f, shades: i, setNextPage: w })
       ]
     }
   ) : /* @__PURE__ */ l(
-    v,
+    $,
     {
       ref: s,
-      onKeyDown: y,
+      onKeyDown: D,
       "aria-label": "Pagination",
-      $isDisabled: D,
+      $isDisabled: m,
       children: [
-        /* @__PURE__ */ f(M, { iconSize: d, shades: i, setPrevPage: A }),
-        /* @__PURE__ */ l(x, { size: `${9 * I}rem`, children: [
-          [1, 2].map(t({ size: o, selected: r, shades: i, changePage: e })),
-          r > 4 && $(),
+        /* @__PURE__ */ e(I, { iconSize: f, shades: i, setPrevPage: A }),
+        /* @__PURE__ */ l(v, { size: `${9 * y}rem`, children: [
+          [1, 2].map(t({ size: c, selected: r, shades: i, changePage: o })),
+          r > 4 && R(),
           [r - 1, r, r + 1].map(
-            t({ size: o, selected: r, shades: i, changePage: e })
+            t({ size: c, selected: r, shades: i, changePage: o })
           ),
-          r < n - 3 && $(),
+          r < n - 3 && R(),
           [n - 1, n].map(
-            t({ size: o, selected: r, shades: i, changePage: e })
+            t({ size: c, selected: r, shades: i, changePage: o })
           )
         ] }),
-        /* @__PURE__ */ f(R, { iconSize: d, shades: i, setNextPage: w })
+        /* @__PURE__ */ e(M, { iconSize: f, shades: i, setNextPage: w })
       ]
     }
   );

package/components/Pagination/styles.js

@@ -1,20 +1,20 @@
-import e, { css as n } from "styled-components";
-import u from "../Icons/ChevronLeft/ChevronLeft.js";
-import f from "../Icons/ChevronRight/ChevronRight.js";
+import o, { css as n } from "styled-components";
 import s from "../../colors/grey.js";
 import l from "../../colors/white.js";
-import p from "../../colors/black.js";
+import { black as u } from "../../colors/black.js";
 import { SELECTED_BG as i, NOT_SELECTED_BG as c, ACTIVE_NOT_SELECTED_BG as m } from "./constants.js";
-const t = (o) => ({ $shades: r }) => {
+import f from "../Icons/ChevronLeft/ChevronLeft.js";
+import a from "../Icons/ChevronRight/ChevronRight.js";
+const t = (e) => ({ $shades: r }) => {
   if (["#FFFFFF"].includes(r))
-    return p.m900;
-  if (o === i)
+    return u.m900;
+  if (e === i)
     return r.m600;
-  if (o === c)
+  if (e === c)
     return r.m50;
-  if (o === m)
+  if (e === m)
     return r.m100;
-}, E = e.nav`
+}, x = o.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,26 +22,26 @@ const t = (o) => ({ $shades: r }) => {
   min-width: 100%;
   width: 100%;
 
-  ${({ $isDisabled: o }) => o && n`
+  ${({ $isDisabled: e }) => e && n`
       pointer-events: none;
       opacity: 0.4;
     `};
-`, $ = e.button`
+`, y = o.button`
   border: none;
   padding: 0;
   font-family: inherit;
   outline-offset: 2px;
 
-  height: ${({ $individualRemSize: o }) => `${o}rem`};
-  width: ${({ $individualRemSize: o }) => `${o}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: o }) => o}rem;
-  ${({ $isSelected: o }) => o ? n`
+  font-size: ${({ $fontRemSize: e }) => e}rem;
+  ${({ $isSelected: e }) => e ? n`
           cursor: auto;
           color: ${l};
           background-color: ${t(i)};
@@ -66,11 +66,11 @@ const t = (o) => ({ $shades: r }) => {
             outline: 1px solid ${t(c)};
           }
         `}
-`, C = e.span`
+`, E = o.span`
   color: ${s.m700};
   font-size: 1.4rem;
   user-select: none;
-`, h = e.button`
+`, C = o.button`
   border: none;
   background: none;
   padding: 0;
@@ -82,24 +82,24 @@ const t = (o) => ({ $shades: r }) => {
   outline-offset: 2px;
 
   &:focus-visible {
-    outline: 1px solid ${({ $shades: o }) => o == null ? void 0 : o.m600};
+    outline: 1px solid ${({ $shades: e }) => e?.m600};
   }
-`, k = e(u)`
+`, k = o(f)`
   cursor: pointer;
-`, w = e(f)`
+`, w = o(a)`
   cursor: pointer;
-`, F = e.div`
-  min-width: ${({ size: o }) => o};
+`, F = o.div`
+  min-width: ${({ size: e }) => e};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export {
-  E as AllPages,
-  h as ArrowButton,
+  x as AllPages,
+  C as ArrowButton,
   k as ClickableChevronLeft,
   w as ClickableChevronRight,
-  C as Ellipsis,
+  E as Ellipsis,
   F as MiddleLayer,
-  $ as Page
+  y as Page
 };

package/components/Selectbox/Selectbox.js

@@ -2,7 +2,7 @@ import { jsxs as $, jsx as i } from "react/jsx-runtime";
 import { useState as C, useId as T, useRef as v, useMemo as ce, useEffect as I, useLayoutEffect as le, useCallback as ae } from "react";
 import O from "../../colors/grey.js";
 import ue from "../../colors/colorMap.js";
-import de from "../../colors/blue.js";
+import { blue as de } from "../../colors/blue.js";
 import pe from "../Input/Checkbox/Checkbox.js";
 import U from "../Spinner/Spinner.js";
 import { SelectBoxWrapper as fe, Box as me, PWrapper as he, ChevronDownWrapper as be, OptionWrapper as ge, SearchContainer as xe, SearchIcon as we, SearchInput as $e, OptionsList as Ce, LoadMoreSentinel as Ie, SpinnerWrapper as ke, CheckboxItem as Se } from "./styles.js";
@@ -104,7 +104,7 @@ const ye = (o) => {
         case "ArrowDown": {
           e.preventDefault();
           const n = _(s);
-          n === s && b && !a && (l == null || l()), x(n);
+          n === s && b && !a && l?.(), x(n);
           break;
         }
         case "ArrowUp": {
@@ -169,8 +169,7 @@ const ye = (o) => {
       $isLoading: k,
       onKeyDown: M,
       onBlur: (e) => {
-        var t;
-        (t = u.current) != null && t.contains(e.relatedTarget) || (A(!1), g(!1));
+        u.current?.contains(e.relatedTarget) || (A(!1), g(!1));
       },
       onFocus: () => A(!0),
       ...G,

package/components/Selectbox/styles.js

@@ -1,9 +1,9 @@
 import o, { css as n, keyframes as i } from "styled-components";
 import r from "../../colors/grey.js";
 import s from "../Typography/P/P.js";
+import a from "../../colors/white.js";
 import d from "../Icons/ChevronDown/ChevronDown.js";
 import p from "../Icons/Search/Search.js";
-import a from "../../colors/white.js";
 const c = r.m500, l = i`
   from { transform: rotate(0deg); }
   to { transform: rotate(180deg); }