meticulous-ui 2.5.6 → 2.6.0

package/components/Input/Input/Input.js

@@ -1,75 +1,75 @@
 import { jsxs as H, jsx as o } from "react/jsx-runtime";
-import P from "lodash-es/omit";
-import { useState as _ } from "react";
+import { useState as P } from "react";
 import { Wrapper as q, InputBox as v, LeftIconWrapper as A, RightIconWrapper as D, Label as G, HelperText as J } from "./styles.js";
-import { getColor as K, getIcon as B } from "./helpers.js";
+import { getColor as K, getIcon as y } from "./helpers.js";
 import M from "../../../colors/white.js";
 import N from "../../../colors/grey.js";
-const T = ({
+const Z = ({
   label: e,
-  onChange: C,
-  value: r,
-  type: b,
-  hasError: x,
-  name: l = "input",
-  color: L = "blue",
-  size: W = "20",
-  disableAutoComplete: j,
+  onChange: B,
+  value: n,
+  type: C,
+  hasError: b,
+  name: u = "input",
+  color: x = "blue",
+  size: L = "20",
+  disableAutoComplete: W,
   helperText: s = "",
-  background: u = "transparent",
-  outerBackground: R = M,
+  background: l = "transparent",
+  outerBackground: j = M,
   leftIcon: m,
   rightIcon: f,
-  ...I
+  placeholder: i,
+  ...R
 }) => {
-  const [t, $] = _(!1), c = K(L), S = () => $(!0), k = () => $(!1), w = (E) => {
-    C(E);
-  }, { placeholder: i } = I, g = { color: N.m500, size: 22 }, d = B(m), a = B(f), h = !!(m && d), F = !!(f && a), n = x, z = u, p = `input-${l}`, y = s ? `${p}-helper` : void 0;
+  const [t, I] = P(!1), c = K(x), S = () => I(!0), k = () => I(!1), w = (E) => {
+    B(E);
+  }, $ = { color: N.m500, size: 22 }, a = y(m), d = y(f), h = !!(m && a), g = !!(f && d), r = b, z = l, p = `input-${u}`, F = s ? `${p}-helper` : void 0;
   return /* @__PURE__ */ H(q, { children: [
     /* @__PURE__ */ o(
       v,
       {
-        type: b,
-        name: l,
-        $hasError: n,
-        size: W,
-        value: r,
+        type: C,
+        name: u,
+        $hasError: r,
+        size: L,
+        value: n,
         $isFocused: t,
         $shade: c,
         $background: z,
         $hasLeftIcon: h,
-        $hasRightIcon: F,
+        $hasRightIcon: g,
         id: p,
-        "aria-invalid": n ? !0 : void 0,
-        "aria-describedby": y,
+        "aria-invalid": r ? !0 : void 0,
+        "aria-describedby": F,
         onFocus: S,
         onBlur: k,
         onChange: w,
-        autoComplete: j ? "off" : "on",
-        ...P(I, "placeholder")
+        autoComplete: W ? "off" : "on",
+        ...R
       }
     ),
-    d && /* @__PURE__ */ o(A, { "aria-hidden": "true", children: d(g) }),
-    a && /* @__PURE__ */ o(D, { "aria-hidden": "true", children: a(g) }),
-    (e || i && !r) && /* @__PURE__ */ o(
+    a && /* @__PURE__ */ o(A, { "aria-hidden": "true", children: a($) }),
+    d && /* @__PURE__ */ o(D, { "aria-hidden": "true", children: d($) }),
+    (e || i && !n) && /* @__PURE__ */ o(
       G,
       {
         as: "label",
         htmlFor: p,
-        $hasError: n,
+        $hasError: r,
         $isFocused: t,
         $shade: c,
-        value: r,
-        $outerBackground: t || r ? R : u,
+        value: n,
+        $outerBackground: t || n ? j : l,
         $hasLeftIcon: h,
-        $hasRightIcon: F,
+        $hasRightIcon: g,
         $onlyPh: i && !e,
         children: e || i
       }
     ),
-    s && /* @__PURE__ */ o(J, { id: y, $hasError: n, $isFocused: t, $shade: c, $hasLeftIcon: h, children: s })
+    s && /* @__PURE__ */ o(J, { id: F, $hasError: r, $isFocused: t, $shade: c, $hasLeftIcon: h, children: s })
   ] });
 };
 export {
-  T as default
+  Z as default
 };

package/components/Input/Input/helpers.js

@@ -1,33 +1,32 @@
-import n from "lodash-es/get";
 import l from "../../../colors/blue.js";
-import i from "../../../colors/green.js";
-import p from "../../../colors/red.js";
-import g from "../../../colors/yellow.js";
-import u from "../../../colors/orange.js";
-import a from "../../../colors/black.js";
+import n from "../../../colors/green.js";
+import i from "../../../colors/red.js";
+import f from "../../../colors/yellow.js";
+import g from "../../../colors/orange.js";
+import u from "../../../colors/black.js";
 import e from "../../../colors/grey.js";
-import c from "../../../colors/violet.js";
-import s from "../../../colors/teal.js";
-import y from "../../../colors/purple.js";
-import b from "../../../colors/pink.js";
-import d from "../../Icons/index.js";
-const k = {
+import a from "../../../colors/violet.js";
+import c from "../../../colors/teal.js";
+import s from "../../../colors/purple.js";
+import y from "../../../colors/pink.js";
+import b from "../../Icons/index.js";
+const d = {
   blue: l.m500,
-  green: i.m500,
-  red: p.m500,
-  green: i.m500,
-  yellow: g.m500,
-  orange: u.m500,
-  black: a.m500,
+  green: n.m500,
+  red: i.m500,
+  green: n.m500,
+  yellow: f.m500,
+  orange: g.m500,
+  black: u.m500,
   grey: e.m500,
-  violet: c.m500,
-  teal: s.m500,
-  purple: y.m500,
-  pink: b.m500
-}, j = (r) => n(k, r, e.m500), q = ({ $hasError: r, $shade: m, $isFocused: o, value: t, $onlyPh: f }) => r ? typeof t == "string" && !t && !o ? e.m500 : p.m400 : o && !f ? m : e.m500, z = (r) => n(d, r, null), B = ({ $hasLeftIcon: r, $hasRightIcon: m }) => r && m ? "0 2.4rem" : r ? "0 0.6rem 0 2.4rem" : m ? "0 2.4rem 0 0.6rem" : "0 0.6rem";
+  violet: a.m500,
+  teal: c.m500,
+  purple: s.m500,
+  pink: y.m500
+}, H = (r) => d[r] ?? e.m500, M = ({ $hasError: r, $shade: m, $isFocused: o, value: t, $onlyPh: p }) => r ? typeof t == "string" && !t && !o ? e.m500 : i.m400 : o && !p ? m : e.m500, j = (r) => b[r] ?? null, q = ({ $hasLeftIcon: r, $hasRightIcon: m }) => r && m ? "0 2.4rem" : r ? "0 0.6rem 0 2.4rem" : m ? "0 2.4rem 0 0.6rem" : "0 0.6rem";
 export {
-  j as getColor,
-  q as getCssShade,
-  z as getIcon,
-  B as getPadding
+  H as getColor,
+  M as getCssShade,
+  j as getIcon,
+  q as getPadding
 };

package/components/Input/Radio/Radio.js

@@ -1,29 +1,28 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import c from "lodash-es/get";
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
 import u from "../../Typography/P/P.js";
 import m from "../../../colors/blue.js";
-import { Wrapper as $, HiddenInput as y, CircleBorder as D, Circle as g } from "./styles.js";
-const C = ({ label: h, value: r, name: s, color: t, textColor: p, isSelected: n, disabled: o, onChange: d }) => {
-  const f = c(t, "m500", m.m500), i = c(t, "m800", m.m800);
-  return /* @__PURE__ */ l($, { $disabled: o, $focusShade: i, children: [
-    /* @__PURE__ */ e(
+import { Wrapper as $, HiddenInput as y, CircleBorder as D, Circle as w } from "./styles.js";
+const k = ({ label: s, value: r, name: p, color: e, textColor: f, isSelected: d, disabled: t, onChange: i }) => {
+  const c = (e == null ? void 0 : e.m500) ?? m.m500, a = (e == null ? void 0 : e.m800) ?? m.m800;
+  return /* @__PURE__ */ o($, { $disabled: t, $focusShade: a, children: [
+    /* @__PURE__ */ n(
       y,
       {
         type: "radio",
-        name: s,
+        name: p,
         value: r,
-        checked: n,
-        disabled: o,
-        onChange: () => d(r),
-        onKeyDown: (a) => {
-          a.key === "Enter" && (a.preventDefault(), o || d(r));
+        checked: d,
+        disabled: t,
+        onChange: () => i(r),
+        onKeyDown: (h) => {
+          h.key === "Enter" && (h.preventDefault(), t || i(r));
         }
       }
     ),
-    /* @__PURE__ */ e(D, { "aria-hidden": "true", $isSelected: n, $shade: i, children: /* @__PURE__ */ e(g, { $isSelected: n, $shade: f }) }),
-    /* @__PURE__ */ e(u, { color: p, size: "1.2rem", children: h })
+    /* @__PURE__ */ n(D, { "aria-hidden": "true", $isSelected: d, $shade: a, children: /* @__PURE__ */ n(w, { $isSelected: d, $shade: c }) }),
+    /* @__PURE__ */ n(u, { color: f, size: "1.2rem", children: s })
   ] });
 };
 export {
-  C as default
+  k as default
 };

package/components/Input/Textarea/Textarea.js

@@ -1,81 +1,81 @@
-import { jsxs as x, jsx as d } from "react/jsx-runtime";
-import E from "lodash-es/omit";
-import { useState as L, useRef as N } from "react";
-import { Wrapper as O, TextareaBox as S, Parent as T, Label as W, HelperText as _ } from "./styles.js";
+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 X = ({
+const V = ({
   label: s,
-  onChange: g,
+  onChange: p,
   value: e,
-  type: F,
-  hasError: b,
+  type: g,
+  hasError: F,
   name: h = "textarea",
-  color: B = "blue",
+  color: b = "blue",
   helperText: n = "",
   background: u = "transparent",
-  outerBackground: j = G,
+  outerBackground: B = G,
   isDynamic: a,
-  isResizeNone: y,
-  rows: C = "2",
-  cols: H = "20",
-  ...f
+  isResizeNone: j,
+  rows: y = "2",
+  cols: C = "20",
+  placeholder: i,
+  ...H
 }) => {
-  const [t, p] = L(!1), c = q(B), m = N(null), I = () => p(!0), R = () => p(!1), w = (z) => {
+  const [t, f] = E(!1), c = q(b), $ = L(null), I = () => f(!0), R = () => f(!1), w = (z) => {
     if (a) {
-      const r = m.current;
-      if (r) {
-        r.style.height = "0px";
-        const A = r.scrollHeight;
-        r.style.height = `${A}px`;
+      const o = $.current;
+      if (o) {
+        o.style.height = "0px";
+        const A = o.scrollHeight;
+        o.style.height = `${A}px`;
       }
     }
-    g(z);
-  }, { placeholder: i } = f, o = b, P = a, k = u, v = a ? {} : { rows: C }, l = `textarea-${h}`, $ = n ? `${l}-helper` : void 0;
-  return /* @__PURE__ */ x(O, { children: [
+    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(
-      S,
+      O,
       {
-        type: F,
+        type: g,
         name: h,
-        $hasError: o,
+        $hasError: r,
         value: e,
         $isFocused: t,
         $shade: c,
         $isDynamic: P,
         $background: k,
-        cols: H,
-        $isResizeNone: y,
+        cols: C,
+        $isResizeNone: j,
         ...v,
         id: l,
-        "aria-invalid": o ? !0 : void 0,
-        "aria-describedby": $,
-        ref: m,
+        "aria-invalid": r ? !0 : void 0,
+        "aria-describedby": x,
+        ref: $,
         onFocus: I,
         onBlur: R,
         onChange: w,
-        ...E(f, "placeholder")
+        ...H
       }
     ),
-    /* @__PURE__ */ x(T, { children: [
+    /* @__PURE__ */ m(S, { children: [
       (s || i && !e) && /* @__PURE__ */ d(
-        W,
+        T,
         {
           as: "label",
           htmlFor: l,
-          $hasError: o,
+          $hasError: r,
           $isFocused: t,
           $shade: c,
           $value: e,
-          $outerBackground: t || e ? j : u,
+          $outerBackground: t || e ? B : u,
           $onlyPh: i && !s,
           children: s || i
         }
       ),
-      n && /* @__PURE__ */ d(_, { id: $, $hasError: o, $isFocused: t, $shade: c, children: n })
+      n && /* @__PURE__ */ d(W, { id: x, $hasError: r, $isFocused: t, $shade: c, children: n })
     ] })
   ] });
 };
 export {
-  X as default
+  V as default
 };

package/components/Input/Textarea/helpers.js

@@ -1,30 +1,29 @@
-import l from "lodash-es/get";
-import n from "../../../colors/blue.js";
+import f from "../../../colors/blue.js";
 import t from "../../../colors/green.js";
 import p from "../../../colors/red.js";
-import g from "../../../colors/yellow.js";
-import a from "../../../colors/orange.js";
-import u from "../../../colors/black.js";
+import n from "../../../colors/yellow.js";
+import g from "../../../colors/orange.js";
+import a from "../../../colors/black.js";
 import r from "../../../colors/grey.js";
-import y from "../../../colors/violet.js";
-import b from "../../../colors/teal.js";
-import c from "../../../colors/purple.js";
-import k from "../../../colors/pink.js";
-const s = {
-  blue: n.m500,
+import u from "../../../colors/violet.js";
+import y from "../../../colors/teal.js";
+import b from "../../../colors/purple.js";
+import c from "../../../colors/pink.js";
+const k = {
+  blue: f.m500,
   green: t.m500,
   red: p.m500,
   green: t.m500,
-  yellow: g.m500,
-  orange: a.m500,
-  black: u.m500,
+  yellow: n.m500,
+  orange: g.m500,
+  black: a.m500,
   grey: r.m500,
-  violet: y.m500,
-  teal: b.m500,
-  purple: c.m500,
-  pink: k.m500
-}, L = (m) => l(s, m, r.m500), M = ({ $hasError: m, $shade: i, $isFocused: o, value: e, $onlyPh: f, textColor: C }) => m ? typeof e == "string" && !e && !o ? r.m500 : p.m400 : o && !f ? i : 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;
 export {
-  L as getColor,
-  M as getCssShade
+  E as getColor,
+  H as getCssShade
 };

package/components/Loader/Loader.js

@@ -1,14 +1,13 @@
-import { jsxs as h, jsx as d } from "react/jsx-runtime";
-import u from "lodash-es/get";
-import { LoaderWrapper as L, VisuallyHidden as $, Dot as g } from "./styles.js";
-import { SIZE as c, MEDIUM as l, THEME_SHADE as t, MINI_ANIMATION_DELAYS as D, ANIMATION_DELAYS as M, BLUE as N } from "./constants.js";
-import { getTheme as _ } from "./helpers.js";
-const B = ({ size: m = l, theme: n = N, isBounce: p, isMini: r, isMiniDark: i }) => {
-  const { dot: E, gap: I } = c[m] || c[l], s = _(n), a = r ? D : M, A = (i ? t.slice(2, 6) : r ? t.slice(0, 3) : t).map((o) => u(s, o, s.m500)), f = a.map(() => E);
-  return /* @__PURE__ */ h(L, { role: "status", $gap: I, children: [
+import { jsxs as u, jsx as d } from "react/jsx-runtime";
+import { LoaderWrapper as L, VisuallyHidden as $, Dot as f } from "./styles.js";
+import { SIZE as c, MEDIUM as l, THEME_SHADE as s, MINI_ANIMATION_DELAYS as D, ANIMATION_DELAYS as M, BLUE as N } from "./constants.js";
+import { getTheme as g } from "./helpers.js";
+const H = ({ size: m = l, theme: n = N, isBounce: p, isMini: t, isMiniDark: i }) => {
+  const { dot: E, gap: I } = c[m] || c[l], r = g(n), a = t ? D : M, A = (i ? s.slice(2, 6) : t ? s.slice(0, 3) : s).map((o) => r[o] ?? r.m500), h = a.map(() => E);
+  return /* @__PURE__ */ u(L, { role: "status", $gap: I, children: [
     /* @__PURE__ */ d($, { children: "Loading" }),
-    f.map((o, e) => /* @__PURE__ */ d(
-      g,
+    h.map((o, e) => /* @__PURE__ */ d(
+      f,
       {
         "aria-hidden": "true",
         $size: o,
@@ -21,5 +20,5 @@ const B = ({ size: m = l, theme: n = N, isBounce: p, isMini: r, isMiniDark: i })
   ] });
 };
 export {
-  B as default
+  H as default
 };

package/components/Loader/helpers.js

@@ -1,28 +1,27 @@
-import m from "lodash-es/get";
 import o from "../../colors/blue.js";
-import t from "../../colors/green.js";
-import p from "../../colors/red.js";
-import e from "../../colors/yellow.js";
-import i from "../../colors/orange.js";
-import f from "../../colors/black.js";
-import l from "../../colors/grey.js";
-import g from "../../colors/violet.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 f from "../../colors/grey.js";
+import l from "../../colors/violet.js";
 import n from "../../colors/teal.js";
-import a from "../../colors/purple.js";
-import c from "../../colors/pink.js";
-const _ = {
+import g from "../../colors/purple.js";
+import a from "../../colors/pink.js";
+const c = {
   blue: o,
-  green: t,
-  red: p,
-  yellow: e,
-  orange: i,
-  black: f,
-  grey: l,
-  violet: g,
+  green: m,
+  red: t,
+  yellow: p,
+  orange: e,
+  black: i,
+  grey: f,
+  violet: l,
   teal: n,
-  purple: a,
-  pink: c
-}, C = (r) => m(_, r, o);
+  purple: g,
+  pink: a
+}, w = (r) => c[r] ?? o;
 export {
-  C as getTheme
+  w as getTheme
 };

package/components/PageLoader/PageLoader.js

@@ -1,14 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
-import l from "lodash-es/get";
-import { getColor as i } from "../Input/Checkbox/helpers.js";
-import { PageLdr as s } from "./styles.js";
-import p from "../../colors/blue.js";
-const d = ({ theme: r = "blue", color: o, ...a }) => {
-  const e = i(r), m = o || l(e, "m500", p.m500);
-  return /* @__PURE__ */ t(
-    s,
+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);
+  return /* @__PURE__ */ l(
+    i,
     {
-      ...a,
+      ...e,
       $color: m,
       role: "progressbar",
       "aria-label": "Loading",
@@ -18,5 +17,5 @@ const d = ({ theme: r = "blue", color: o, ...a }) => {
   );
 };
 export {
-  d as default
+  f as default
 };