meticulous-ui 2.9.3 → 3.0.0

package/components/Pagination/Pagination.js

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

package/components/Pagination/constants.js

@@ -1,15 +1,15 @@
 const _ = "small", I = "medium", E = "large", M = {
-  [_]: 1.9,
-  [I]: 2.6,
-  [E]: 3.1
+  [_]: 3.4,
+  [I]: 4.2,
+  [E]: 5
 }, S = {
-  [_]: 1,
-  [I]: 1.2,
-  [E]: 1.4
+  [_]: 1.5,
+  [I]: 1.7,
+  [E]: 1.9
 }, L = {
-  [_]: 18,
-  [I]: 19,
-  [E]: 20
+  [_]: 23,
+  [I]: 25,
+  [E]: 27
 }, t = "selected_bg", N = "not_selected_bg", A = "active_not_selected_bg";
 export {
   A as ACTIVE_NOT_SELECTED_BG,

package/components/Pagination/styles.js

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

package/components/RootComponent/RootComponent.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Root as m } from "./styles.js";
+const p = ({ children: o, ...t }) => /* @__PURE__ */ r(m, { ...t, children: o });
+export {
+  p as default
+};

package/components/RootComponent/index.js

@@ -0,0 +1,4 @@
+import t from "./RootComponent.js";
+export {
+  t as default
+};

package/components/RootComponent/styles.js

@@ -0,0 +1,8 @@
+import t from "styled-components";
+const e = t.div`
+  font-size: 62.5%;
+  -webkit-text-size-adjust: 100%;
+`;
+export {
+  e as Root
+};

package/components/Selectbox/Selectbox.js

@@ -18,8 +18,8 @@ const ye = (o) => {
   options: o,
   onChange: E,
   value: c = [],
-  width: f = "20rem",
-  menuHeight: F = "20rem",
+  width: f = "32rem",
+  menuHeight: F = "32rem",
   placeholder: q,
   theme: N = "blue",
   isDisabled: m,
@@ -136,7 +136,7 @@ const ye = (o) => {
         role: "option",
         "aria-selected": D,
         "aria-disabled": n || void 0,
-        $width: `calc(${f} + 1rem)`,
+        $width: `calc(${f} + 1.6rem)`,
         $isHighlighted: p === s,
         $isDisabled: n,
         $hoverColor: ee,
@@ -192,7 +192,7 @@ 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: oe }),
+              /* @__PURE__ */ i(he, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.92rem", children: oe }),
               /* @__PURE__ */ i(be, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }

package/components/Selectbox/styles.js

@@ -25,12 +25,12 @@ const c = r.m500, l = i`
       opacity: 0.7;
     `}
 `, w = o.div`
-  height: 2rem;
+  height: 3.2rem;
   width: ${({ $width: e }) => e};
-  border-radius: 0.6rem;
+  border-radius: 0.96rem;
   outline: none;
   border: ${({ $isOpen: e, $isFocused: t, $border: m }) => e || t ? `2px solid ${m}` : `1px solid ${c}`};
-  padding: 0.4rem 0.6rem 0.4rem;
+  padding: 0.64rem 0.96rem 0.64rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -39,20 +39,20 @@ const c = r.m500, l = i`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({ $width: e }) => e} - 2rem);
+  max-width: calc(${({ $width: e }) => e} - 3.2rem);
   pointer-events: none;
 `, k = o(d)`
   animation: ${({ $isOpen: e }) => e ? l : g} 0.15s linear;
   transform: rotate(${({ $isOpen: e }) => e ? 180 : 0}deg);
 `, S = o.div`
   border: 1px solid ${r.m700};
-  width: calc(${({ $width: e }) => e} + 1rem);
+  width: calc(${({ $width: e }) => e} + 1.6rem);
   display: flex;
   flex-direction: column;
   position: absolute;
   z-index: 1000;
   background-color: ${a};
-  left: 0.15rem;
+  left: 0.24rem;
   max-height: 0;
   transition: max-height 0.15s ease-out;
   opacity: 0;
@@ -66,14 +66,14 @@ const c = r.m500, l = i`
   ${({ $top: e }) => e ? n`
           bottom: 100%;
           flex-direction: column-reverse;
-          border-top-right-radius: 0.6rem;
-          border-top-left-radius: 0.6rem;
-          margin-bottom: 0.1rem;
+          border-top-right-radius: 0.96rem;
+          border-top-left-radius: 0.96rem;
+          margin-bottom: 0.16rem;
         ` : n`
           top: 100%;
-          border-bottom-right-radius: 0.6rem;
-          border-bottom-left-radius: 0.6rem;
-          margin-top: 0.1rem;
+          border-bottom-right-radius: 0.96rem;
+          border-bottom-left-radius: 0.96rem;
+          margin-top: 0.16rem;
         `}
 `, W = o.div`
   overflow-y: auto;
@@ -83,11 +83,11 @@ const c = r.m500, l = i`
   box-sizing: border-box;
   background-color: ${({ $isHighlighted: e, $hoverColor: t }) => e ? t : "transparent"};
   cursor: ${({ $isDisabled: e }) => e ? "not-allowed" : "pointer"};
-  padding: 0.6rem 1rem 0.8rem;
-  margin-top: 0.1rem;
+  padding: 0.96rem 1.6rem 1.28rem;
+  margin-top: 0.16rem;
   display: flex;
   align-items: center;
-  gap: 0.6rem;
+  gap: 0.96rem;
   pointer-events: ${({ $isDisabled: e }) => e ? "none" : "auto"};
 
   &:active {
@@ -107,8 +107,8 @@ const c = r.m500, l = i`
   width: 100%;
   box-sizing: border-box;
   border: none;
-  padding: 0.5rem 0.75rem 0.5rem 0;
-  font-size: 1.2rem;
+  padding: 0.8rem 1.2rem 0.8rem 0;
+  font-size: 1.92rem;
   color: ${r.m700};
   background: transparent;
   outline: none;
@@ -117,17 +117,17 @@ const c = r.m500, l = i`
     color: ${r.m400};
   }
 `, B = o(p)`
-  margin: 0 0.8rem;
+  margin: 0 1.28rem;
 `, I = o.div`
   position: absolute;
-  top: 0.8rem;
-  right: 1.2rem;
+  top: 1.28rem;
+  right: 1.92rem;
 `, L = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1rem 0;
-  min-height: 1rem;
+  padding: 1.6rem 0;
+  min-height: 1.6rem;
   width: 100%;
 `;
 export {

package/components/Shimmer/Shimmer.js

@@ -6,7 +6,7 @@ const e = (r) => {
 }, p = ({
   width: r = "100%",
   height: t = "100%",
-  borderRadius: o = "0.4rem",
+  borderRadius: o = "0.64rem",
   label: i = "Loading...",
   ...m
 }) => /* @__PURE__ */ n(

package/components/Spinner/Spinner.js

@@ -5,9 +5,9 @@ import d from "../../colors/green.js";
 import p from "../../colors/white.js";
 import c from "../../colors/grey.js";
 const g = {
-  small: { strokeWidth: 6, $length: "1rem" },
-  medium: { strokeWidth: 5, $length: "2rem" },
-  large: { strokeWidth: 5, $length: "3rem" }
+  small: { strokeWidth: 6, $length: "2.4rem" },
+  medium: { strokeWidth: 5, $length: "3.6rem" },
+  large: { strokeWidth: 5, $length: "5rem" }
 }, $ = ({ color: e = "green", size: o = "medium", ...n }) => {
   var t;
   const { strokeWidth: m, $length: r } = g[o], l = [p, c.m600].includes(e) ? e : (t = h[e] ?? d) == null ? void 0 : t.m500;

package/components/Timer/Timer.js

@@ -25,7 +25,7 @@ const c = () => {
   onTimerRemove: K = c,
   onTimerPause: q = c,
   onTimerPlay: J = c,
-  size: M = 20,
+  size: M = 30,
   ...Q
 }) => {
   const [S, V] = a(/* @__PURE__ */ new Date()), [s, T] = a(0), [m, $] = a(!1), [A, X] = a(Ce(o)), [Y, y] = a(0), [R, D] = a(!1), k = de(m), t = Math.round(M), P = Math.round(14 * M / 20);

package/components/Toast/Toast.js

@@ -1,51 +1,55 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import { useState as d, useEffect as T, createElement as $ } from "react";
-import { Logo as F } from "./helpers.js";
-import L from "../../colors/grey.js";
-import { COLOR_MAP as N, INFO as j, INFO_COLORS as k } from "./constants.js";
-import { ToastWrapper as w, Message as x, Title as A, Subtitle as I, CloseWrapper as M, ToastsContainer as R } from "./styles.js";
+import { jsxs as T, jsx as s } from "react/jsx-runtime";
+import { useState as u, useEffect as p, createElement as $ } from "react";
+import { createPortal as F } from "react-dom";
+import { Logo as L } from "./helpers.js";
+import N from "../../colors/grey.js";
+import { COLOR_MAP as j, INFO as k, INFO_COLORS as w } from "./constants.js";
+import { ToastWrapper as x, Message as y, Title as A, Subtitle as I, CloseWrapper as M, ToastsContainer as P } from "./styles.js";
 const O = () => {
-}, b = ({ toasts: e, ...o }) => {
-  const [t, n] = d(e);
-  T(() => {
-    n(e);
+}, B = ({ toasts: e, ...o }) => {
+  const [t, a] = u(e);
+  p(() => {
+    a(e);
   }, [e]);
-  const m = ({ type: a, id: c, title: i, subtitle: r, onExpire: l = O }, f) => /* @__PURE__ */ $(W, { type: a, title: i, subtitle: r, key: c, onExpire: l });
-  return /* @__PURE__ */ s(R, { ...o, children: [...t].reverse().map(m) });
-}, u = (e, o, t) => () => {
+  const m = ({ type: n, id: c, title: i, subtitle: r, onExpire: l = O }, f) => /* @__PURE__ */ $(R, { type: n, title: i, subtitle: r, key: c, onExpire: l });
+  return F(
+    /* @__PURE__ */ s(P, { ...o, children: [...t].reverse().map(m) }),
+    document.body
+  );
+}, d = (e, o, t) => () => {
   e(!0), setTimeout(() => {
     o(!1), t();
   }, 500);
-}, W = ({
-  type: e = j,
+}, R = ({
+  type: e = k,
   visible: o = !0,
   duration: t = 5,
-  onExpire: n = O,
+  onExpire: a = O,
   title: m,
-  subtitle: a,
+  subtitle: n,
   ...c
 }) => {
-  const [i, r] = d(o), [l, f] = d(!1);
-  T(() => {
+  const [i, r] = u(o), [l, f] = u(!1);
+  p(() => {
     r(o);
-  }, [o]), T(() => {
-    const S = setTimeout(u(f, r, n), t * 1e3 - 500);
+  }, [o]), p(() => {
+    const S = setTimeout(d(f, r, a), t * 1e3 - 500);
     return () => {
       clearTimeout(S);
     };
-  }, [t, u]);
-  const { main: h, side: C, bg: g } = N[e] ?? k;
+  }, [t, d]);
+  const { main: h, side: C, bg: g } = j[e] ?? w;
   if (i)
-    return /* @__PURE__ */ p(w, { $bg: g, className: `${l ? "fade-out" : "fade-in"}`, ...c, children: [
-      /* @__PURE__ */ s(F, { type: e, $main: h, $side: C }),
-      /* @__PURE__ */ p(x, { children: [
+    return /* @__PURE__ */ T(x, { $bg: g, className: `${l ? "fade-out" : "fade-in"}`, ...c, children: [
+      /* @__PURE__ */ s(L, { type: e, $main: h, $side: C }),
+      /* @__PURE__ */ T(y, { children: [
         /* @__PURE__ */ s(A, { children: m }),
-        a && /* @__PURE__ */ s(I, { children: a })
+        n && /* @__PURE__ */ s(I, { children: n })
       ] }),
-      /* @__PURE__ */ s(M, { size: 20, color: L.m600, onClick: u(f, r, n) })
+      /* @__PURE__ */ s(M, { size: 20, color: N.m600, onClick: d(f, r, a) })
     ] });
 };
 export {
-  b as ToastContainer,
-  W as default
+  B as ToastContainer,
+  R as default
 };

package/components/Toast/helpers.js

@@ -4,7 +4,7 @@ import f from "../Icons/Close/Close.js";
 import m from "../Icons/Check/Check.js";
 import g from "../Icons/Info/Info.js";
 import { Outer as u, OuterChild as l, LogoContainer as C, Icon as z } from "./styles.js";
-const h = (o, r) => o === t ? /* @__PURE__ */ e(f, { size: 16, color: r }) : o === i ? /* @__PURE__ */ e(m, { size: 18, color: r }) : /* @__PURE__ */ e(g, { size: 22, color: r }), I = (o) => o === t ? 1 : o === i ? 1.1 : 1.3, R = ({ type: o, $main: r, $side: n }) => {
+const h = (o, r) => o === t ? /* @__PURE__ */ e(f, { size: 16, color: r }) : o === i ? /* @__PURE__ */ e(m, { size: 18, color: r }) : /* @__PURE__ */ e(g, { size: 22, color: r }), I = (o) => o === t ? 1.6 : o === i ? 1.76 : 2.08, R = ({ type: o, $main: r, $side: n }) => {
   const s = h(o, r);
   return /* @__PURE__ */ c(u, { $side: n, children: [
     /* @__PURE__ */ e(l, { $main: r }),