meticulous-ui 2.5.6 → 2.6.0

package/components/Pagination/Pagination.js

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

package/components/Selectbox/Selectbox.js

@@ -1,13 +1,12 @@
 import { jsxs as $, jsx as i } from "react/jsx-runtime";
 import { useState as C, useId as T, useRef as v, useMemo as se, useEffect as I, useLayoutEffect as ce, useCallback as le } from "react";
-import ae from "lodash-es/get";
 import O from "../../colors/grey.js";
-import ue from "../../colors/index.js";
-import de from "../../colors/blue.js";
-import pe from "../Input/Checkbox/Checkbox.js";
+import ae from "../../colors/index.js";
+import ue from "../../colors/blue.js";
+import de 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";
-const ye = (o) => {
+import { SelectBoxWrapper as pe, Box as fe, PWrapper as me, ChevronDownWrapper as he, OptionWrapper as be, SearchContainer as ge, SearchIcon as xe, SearchInput as we, OptionsList as $e, LoadMoreSentinel as Ce, SpinnerWrapper as Ie, CheckboxItem as ke } from "./styles.js";
+const Se = (o) => {
   if (typeof o != "string") return o;
   if (o.endsWith("px")) return parseFloat(o);
   if (o.endsWith("rem")) {
@@ -15,7 +14,7 @@ const ye = (o) => {
     return E * c;
   }
   return parseFloat(o);
-}, Pe = ({
+}, We = ({
   options: o,
   onChange: E,
   value: c = [],
@@ -32,7 +31,7 @@ const ye = (o) => {
   isLoadingMore: a = !1,
   loaderColor: W
 }) => {
-  const [r, g] = C(!1), [_, A] = C(!1), [G, J] = C("bottom"), [S, P] = C(""), [s, x] = C(-1), y = T(), H = T(), u = v(null), w = v(null), z = v(null), V = v(null), X = () => !m && !k && g((e) => !e), B = (e) => {
+  const [r, g] = C(!1), [G, A] = C(!1), [J, X] = C("bottom"), [S, P] = C(""), [s, x] = C(-1), y = T(), H = T(), u = v(null), w = v(null), z = v(null), V = v(null), Y = () => !m && !k && g((e) => !e), B = (e) => {
     const t = c.includes(e) ? c.filter((n) => n !== e) : [...c, e];
     E(t);
   }, d = se(() => {
@@ -60,20 +59,20 @@ const ye = (o) => {
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []), ce(() => {
     if (r && w.current && u.current) {
-      const e = u.current.getBoundingClientRect(), t = window.innerHeight, n = ye(F), p = t - e.bottom;
-      J(
+      const e = u.current.getBoundingClientRect(), t = window.innerHeight, n = Se(F), p = t - e.bottom;
+      X(
         p < n + 8 && e.top > p ? "top" : "bottom"
       );
     }
   }, [r, F]);
-  const Y = (e) => {
+  const Z = (e) => {
     let t = e + 1;
     for (; t < d.length; ) {
       if (!d[t].disabled) return t;
       t++;
     }
     return e;
-  }, Z = (e) => {
+  }, _ = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
       if (!d[t].disabled) return t;
@@ -103,12 +102,12 @@ const ye = (o) => {
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
-          const n = Y(s);
+          const n = Z(s);
           n === s && b && !a && (l == null || l()), x(n);
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), x(Z(s));
+          e.preventDefault(), x(_(s));
           break;
         }
         case "Enter":
@@ -127,10 +126,10 @@ const ye = (o) => {
     m100: ee,
     m500: K,
     m800: te
-  } = ae(ue, N, de), re = (e, t) => () => !e && x(t), Q = (e) => `${y}-opt-${e}`, ne = c.length === 0 ? q : `${c.length} selected`, oe = ({ value: e, label: t, disabled: n }, p) => {
+  } = ae[N] ?? ue, re = (e, t) => () => !e && x(t), Q = (e) => `${y}-opt-${e}`, ne = c.length === 0 ? q : `${c.length} selected`, oe = ({ value: e, label: t, disabled: n }, p) => {
     const D = c.includes(e);
     return /* @__PURE__ */ i(
-      Se,
+      ke,
       {
         id: Q(p),
         role: "option",
@@ -145,7 +144,7 @@ const ye = (o) => {
         onMouseEnter: re(n, p),
         title: t,
         children: /* @__PURE__ */ i("div", { onClick: (ie) => ie.stopPropagation(), children: /* @__PURE__ */ i(
-          pe,
+          de,
           {
             value: D,
             onChange: () => B(e),
@@ -161,7 +160,7 @@ const ye = (o) => {
     );
   };
   return /* @__PURE__ */ $(
-    fe,
+    pe,
     {
       ref: u,
       $width: f,
@@ -175,15 +174,15 @@ const ye = (o) => {
       onFocus: () => A(!0),
       children: [
         /* @__PURE__ */ $(
-          me,
+          fe,
           {
             id: H,
             role: "button",
             $width: f,
-            onClick: X,
+            onClick: Y,
             $isOpen: r,
             $border: K,
-            $isFocused: _ && !r,
+            $isFocused: G && !r,
             tabIndex: m ? -1 : 0,
             "aria-haspopup": "listbox",
             "aria-expanded": r,
@@ -191,16 +190,16 @@ const ye = (o) => {
             "aria-disabled": m || void 0,
             "aria-activedescendant": s !== -1 ? Q(s) : void 0,
             children: [
-              /* @__PURE__ */ i(he, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: ne }),
-              /* @__PURE__ */ i(be, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ i(me, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: ne }),
+              /* @__PURE__ */ i(he, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ $(ge, { $isOpen: r, $width: f, $height: F, $top: G === "top", children: [
-          h && /* @__PURE__ */ $(xe, { onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ i(we, { size: 20, color: O.m600, "aria-hidden": !0 }),
+        /* @__PURE__ */ $(be, { $isOpen: r, $width: f, $height: F, $top: J === "top", children: [
+          h && /* @__PURE__ */ $(ge, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ i(xe, { size: 20, color: O.m600, "aria-hidden": !0 }),
             /* @__PURE__ */ i(
-              $e,
+              we,
               {
                 ref: z,
                 value: S,
@@ -216,7 +215,7 @@ const ye = (o) => {
             )
           ] }),
           /* @__PURE__ */ $(
-            Ce,
+            $e,
             {
               ref: w,
               role: "listbox",
@@ -226,16 +225,16 @@ const ye = (o) => {
               "aria-labelledby": H,
               children: [
                 d.map(oe),
-                l && /* @__PURE__ */ i(Ie, { ref: V, children: a && /* @__PURE__ */ i(U, { size: "small", color: W }) })
+                l && /* @__PURE__ */ i(Ce, { ref: V, children: a && /* @__PURE__ */ i(U, { size: "small", color: W }) })
               ]
             }
           )
         ] }),
-        k && /* @__PURE__ */ i(ke, { children: /* @__PURE__ */ i(U, { size: "small", color: W }) })
+        k && /* @__PURE__ */ i(Ie, { children: /* @__PURE__ */ i(U, { size: "small", color: W }) })
       ]
     }
   );
 };
 export {
-  Pe as default
+  We as default
 };

package/components/Shimmer/Shimmer.js

@@ -1,20 +1,9 @@
-import { jsx as o } from "react/jsx-runtime";
-/* empty css            */
-const r = (e) => {
-  if (e != null)
-    return typeof e == "number" ? `${e}rem` : e;
-}, n = ({ width: e = "100%", height: t = "100%", label: i = "Loading..." }) => /* @__PURE__ */ o(
-  "div",
-  {
-    className: "shimmer",
-    role: "status",
-    "aria-label": i,
-    style: {
-      width: r(e),
-      height: r(t)
-    }
-  }
-);
+import { jsx as i } from "react/jsx-runtime";
+import { ShimmerWrapper as m } from "./styles.js";
+const e = (r) => {
+  if (r != null)
+    return typeof r == "number" ? `${r}rem` : r;
+}, p = ({ width: r = "100%", height: t = "100%", label: o = "Loading..." }) => /* @__PURE__ */ i(m, { role: "status", "aria-label": o, width: e(r), height: e(t) });
 export {
-  n as default
+  p as default
 };

package/components/Shimmer/styles.js

@@ -0,0 +1,29 @@
+import t, { keyframes as o } from "styled-components";
+import e from "../../colors/grey.js";
+const i = o`
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(100%); }
+`, m = t.div`
+  position: relative;
+  overflow: hidden;
+  background-color: ${e.m300};
+  border-radius: 0.4rem;
+  width: ${({ width: r }) => r};
+  height: ${({ height: r }) => r};
+
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      120deg,
+      rgba(245, 245, 245, 0) 30%,
+      ${e.m100} 50%,
+      rgba(245, 245, 245, 0) 70%
+    );
+    animation: ${i} 1.8s infinite;
+  }
+`;
+export {
+  m as ShimmerWrapper
+};

package/components/Spinner/Spinner.js

@@ -1,19 +1,18 @@
-import { jsx as o } from "react/jsx-runtime";
-import l from "lodash-es/get";
-import { SpinnerSVG as s, SpinnerCircle as a } from "./styles.js";
-import h from "../../colors/index.js";
-import p from "../../colors/green.js";
+import { jsx as i } from "react/jsx-runtime";
+import { SpinnerSVG as l, SpinnerCircle as s } from "./styles.js";
+import a from "../../colors/index.js";
+import h from "../../colors/green.js";
 import d from "../../colors/white.js";
-import g from "../../colors/grey.js";
+import p from "../../colors/grey.js";
 const c = {
   small: { strokeWidth: 6, $length: "1rem" },
   medium: { strokeWidth: 5, $length: "2rem" },
   large: { strokeWidth: 5, $length: "3rem" }
-}, w = ({ color: e = "green", size: i = "medium" }) => {
+}, W = ({ color: e = "green", size: o = "medium" }) => {
   var t;
-  const { strokeWidth: m, $length: r } = c[i], n = [d, g.m600].includes(e) ? e : (t = l(h, e, p)) == null ? void 0 : t.m500;
-  return /* @__PURE__ */ o(
-    s,
+  const { strokeWidth: n, $length: r } = c[o], m = [d, p.m600].includes(e) ? e : (t = a[e] ?? h) == null ? void 0 : t.m500;
+  return /* @__PURE__ */ i(
+    l,
     {
       viewBox: "0 0 50 50",
       width: r,
@@ -21,15 +20,15 @@ const c = {
       role: "status",
       "aria-label": "Loading",
       "aria-live": "polite",
-      children: /* @__PURE__ */ o(
-        a,
+      children: /* @__PURE__ */ i(
+        s,
         {
           cx: "25",
           cy: "25",
           r: "20",
           fill: "none",
-          stroke: n,
-          strokeWidth: m,
+          stroke: m,
+          strokeWidth: n,
           strokeLinecap: "round"
         }
       )
@@ -37,5 +36,5 @@ const c = {
   );
 };
 export {
-  w as default
+  W as default
 };

package/components/Timer/Timer.js

@@ -1,18 +1,18 @@
 import { jsxs as i, jsx as e, Fragment as B } from "react/jsx-runtime";
 import { useState as n, useRef as ae, useEffect as F } from "react";
-import l from "lodash-es/noop";
-import oe from "../Glass/Glass.js";
-import se from "./components/TimerRing/TimerRing.js";
+import se from "../Glass/Glass.js";
+import oe from "./components/TimerRing/TimerRing.js";
 import u from "../../colors/white.js";
 import { Wrapper as le, Dimmer as ce, Time as N, TimeTxt as E, HourHand as de, MinuteHand as ue, SecondHand as me, AllDots as he, Dots as pe, AlarmRing as ge, BulletRing as fe, Bullet as Se, LeftActions as be, ActionBtn as m, MediaStopFilledWrapper as Te, MediaPauseFilledWrapper as we, MediaPlayFilledWrapper as Ae, RightActions as $e, AddWrapper as Re } from "./styles.js";
-const Pe = (h) => () => {
+const l = () => {
+}, Pe = (h) => () => {
   const a = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: h }).split(", ")[1].split(" ")[0], [g, r, c] = a.split(":").map(Number);
   return {
     second: c * 6,
     minute: r * 6 + c * 0.1,
     hour: g % 12 * 30 + r * 0.5
   };
-}, je = ({
+}, We = ({
   color: h = "green",
   showTime: H = !0,
   showTimeWithSec: p = !0,
@@ -22,10 +22,10 @@ const Pe = (h) => () => {
   onTimerAdd: c = l,
   onTimerComplete: U = l,
   onTimerRemove: O = l,
-  onTimerPause: _ = l,
-  onTimerPlay: G = l
+  onTimerPause: G = l,
+  onTimerPlay: K = l
 }) => {
-  const [f, K] = n(/* @__PURE__ */ new Date()), [o, S] = n(0), [d, b] = n(!1), [T, q] = n(Pe(a)), [J, w] = n(0), [A, $] = n(!1), k = ae(d);
+  const [f, _] = n(/* @__PURE__ */ new Date()), [s, S] = n(0), [d, b] = n(!1), [T, q] = n(Pe(a)), [J, w] = n(0), [A, $] = n(!1), k = ae(d);
   F(() => {
     k.current = d;
   }, [d]);
@@ -36,15 +36,15 @@ const Pe = (h) => () => {
   }, Y = () => {
     S(0), w(0), $(!1);
   }, V = () => {
-    b(!0), _();
+    b(!0), G();
   }, Z = () => {
-    b(!1), G();
+    b(!1), K();
   };
   F(() => {
     const L = setInterval(() => {
-      const s = /* @__PURE__ */ new Date();
-      K(s), q((t) => {
-        const ee = s.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [te, W, j] = ee.split(":").map(Number), re = j * 6, ie = W * 6 + j * 0.1, ne = te % 12 * 30 + W * 0.5, D = (v, x) => {
+      const o = /* @__PURE__ */ new Date();
+      _(o), q((t) => {
+        const ee = o.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [te, W, j] = ee.split(":").map(Number), re = j * 6, ie = W * 6 + j * 0.1, ne = te % 12 * 30 + W * 0.5, D = (v, x) => {
           const z = v % 360;
           return v - z + x + (x < z ? 360 : 0);
         };
@@ -57,9 +57,9 @@ const Pe = (h) => () => {
     }, 1e3);
     return () => clearInterval(L);
   }, []);
-  const R = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], I = R.split(" ")[0], M = R.split(" ")[1], y = R.split(":").slice(0, 2).join(":"), P = !(Number.isInteger(o) && o > 0), C = `${p ? I : y} ${M}`;
+  const R = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], I = R.split(" ")[0], M = R.split(" ")[1], y = R.split(":").slice(0, 2).join(":"), P = !(Number.isInteger(s) && s > 0), C = `${p ? I : y} ${M}`;
   return /* @__PURE__ */ i(le, { $color: h, role: "region", "aria-label": "Clock", children: [
-    /* @__PURE__ */ e(oe, { borderRadius: "1.2rem", "aria-hidden": "true" }),
+    /* @__PURE__ */ e(se, { borderRadius: "1.2rem", "aria-hidden": "true" }),
     H && /* @__PURE__ */ i(B, { children: [
       /* @__PURE__ */ e(ce, { "aria-hidden": "true" }),
       g ? /* @__PURE__ */ i(N, { as: "time", dateTime: f.toISOString(), "aria-label": C, children: [
@@ -71,7 +71,7 @@ const Pe = (h) => () => {
         /* @__PURE__ */ e(me, { $rotate: T.second, "aria-hidden": "true" })
       ] })
     ] }),
-    /* @__PURE__ */ e(he, { "aria-hidden": "true", children: [...Array(60)].map((L, s) => /* @__PURE__ */ e(pe, { style: { rotate: `${s * 6}deg` } }, s)) }),
+    /* @__PURE__ */ e(he, { "aria-hidden": "true", children: [...Array(60)].map((L, o) => /* @__PURE__ */ e(pe, { style: { rotate: `${o * 6}deg` } }, o)) }),
     (!P || A) && /* @__PURE__ */ i(B, { children: [
       /* @__PURE__ */ e(
         ge,
@@ -79,7 +79,7 @@ const Pe = (h) => () => {
           $dismissing: A,
           onAnimationEnd: Y,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(se, { progress: o >= 60 ? 1 : o % 60 / 60 })
+          children: /* @__PURE__ */ e(oe, { progress: s >= 60 ? 1 : s % 60 / 60 })
         }
       ),
       /* @__PURE__ */ e(fe, { $angle: J, $dismissing: A, "aria-hidden": "true", children: /* @__PURE__ */ e(Se, {}) }),
@@ -88,7 +88,7 @@ const Pe = (h) => () => {
         {
           role: "timer",
           "aria-live": "polite",
-          "aria-label": `${o} seconds remaining`,
+          "aria-label": `${s} seconds remaining`,
           style: {
             position: "absolute",
             width: 1,
@@ -108,5 +108,5 @@ const Pe = (h) => () => {
   ] });
 };
 export {
-  je as default
+  We as default
 };

package/components/Toast/Toast.js

@@ -1,43 +1,35 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as n, useEffect as p } from "react";
-import C from "lodash-es/get";
-import S from "lodash-es/noop";
-import { Logo as _ } from "./helpers.js";
-import $ from "../../colors/grey.js";
-import { COLOR_MAP as F, INFO as L, INFO_COLORS as N } from "./constants.js";
-import { ToastWrapper as j, Message as w, Title as x, Subtitle as I, CloseWrapper as M } from "./styles.js";
-const s = (o, e, r) => () => {
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as f, useEffect as u } from "react";
+import { Logo as C } from "./helpers.js";
+import S from "../../colors/grey.js";
+import { COLOR_MAP as $, INFO as F, INFO_COLORS as L } from "./constants.js";
+import { ToastWrapper as N, Message as j, Title as w, Subtitle as x, CloseWrapper as I } from "./styles.js";
+const M = () => {
+}, m = (o, e, t) => () => {
   o(!0), setTimeout(() => {
-    e(!1), r();
+    e(!1), t();
   }, 500);
-}, v = ({
-  type: o = L,
-  visible: e = !0,
-  duration: r = 5,
-  onExpire: i = S,
-  title: u,
-  subtitle: a
-}) => {
-  const [l, m] = n(e), [d, f] = n(!1);
-  p(() => {
-    m(e);
-  }, [e]), p(() => {
-    const h = setTimeout(s(f, m, i), r * 1e3 - 500);
+}, P = ({ type: o = F, visible: e = !0, duration: t = 5, onExpire: a = M, title: l, subtitle: i }) => {
+  const [d, s] = f(e), [p, c] = f(!1);
+  u(() => {
+    s(e);
+  }, [e]), u(() => {
+    const g = setTimeout(m(c, s, a), t * 1e3 - 500);
     return () => {
-      clearTimeout(h);
+      clearTimeout(g);
     };
-  }, [r, s]);
-  const { main: O, side: T, bg: g } = C(F, o, N);
-  if (l)
-    return /* @__PURE__ */ c(j, { $bg: g, className: `${d ? "fade-out" : "fade-in"}`, children: [
-      /* @__PURE__ */ t(_, { type: o, $main: O, $side: T }),
-      /* @__PURE__ */ c(w, { children: [
-        /* @__PURE__ */ t(x, { children: u }),
-        a && /* @__PURE__ */ t(I, { children: a })
+  }, [t, m]);
+  const { main: O, side: T, bg: h } = $[o] ?? L;
+  if (d)
+    return /* @__PURE__ */ n(N, { $bg: h, className: `${p ? "fade-out" : "fade-in"}`, children: [
+      /* @__PURE__ */ r(C, { type: o, $main: O, $side: T }),
+      /* @__PURE__ */ n(j, { children: [
+        /* @__PURE__ */ r(w, { children: l }),
+        i && /* @__PURE__ */ r(x, { children: i })
       ] }),
-      /* @__PURE__ */ t(M, { size: 20, color: $.m600, onClick: s(f, m, i) })
+      /* @__PURE__ */ r(I, { size: 20, color: S.m600, onClick: m(c, s, a) })
     ] });
 };
 export {
-  v as default
+  P as default
 };

package/components/Typography/P/P.js

@@ -1,10 +1,6 @@
-import { jsx as t } from "react/jsx-runtime";
-import { PWrapper as c } from "./styles.js";
-import m from "lodash-es/omit";
-const f = (o) => {
-  const { color: r, size: e, children: i } = o || {};
-  return /* @__PURE__ */ t(c, { $color: r, $size: e, ...m(o, ["color", "size", "children"]), children: i });
-};
+import { jsx as p } from "react/jsx-runtime";
+import { PWrapper as m } from "./styles.js";
+const f = ({ color: r, size: o, children: t, ...e }) => /* @__PURE__ */ p(m, { $color: r, $size: o, ...e, children: t });
 export {
   f as default
 };