meticulous-ui 3.2.9 → 3.3.1

package/components/Input/Checkbox/Checkbox.js

@@ -1,24 +1,24 @@
-import { jsxs as $, jsx as s } from "react/jsx-runtime";
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
 import { useState as g, useRef as H } from "react";
 import P from "../../../colors/grey.js";
 import j from "../../Typography/P/P.js";
 import z from "../../../colors/white.js";
-import m from "../../../colors/blue.js";
+import { blue as m } from "../../../colors/blue.js";
 import { Wrapper as B, CbInput as C, Box as E } from "./styles.js";
 import { getColor as F } from "./helpers.js";
 const J = ({
   label: u,
-  value: o,
-  color: l = "blue",
-  textColor: p = P.m700,
-  disabled: c,
-  onChange: t,
-  tabIndex: d,
+  value: r,
+  color: d = "blue",
+  textColor: l = P.m700,
+  disabled: s,
+  onChange: o,
+  tabIndex: p,
   innerShade: h,
   outerShade: k,
   ...y
 }) => {
-  const [S, n] = g(!1), r = F(l), b = h ?? (r == null ? void 0 : r.m500) ?? m.m500, x = k ?? (r == null ? void 0 : r.m600) ?? m.m600, a = H(0), w = (e) => t(e.target.checked), D = (e) => {
+  const [S, t] = g(!1), c = F(d), b = h ?? c?.m500 ?? m.m500, x = k ?? c?.m600 ?? m.m600, a = H(0), w = (e) => o(e.target.checked), D = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       const i = Date.now();
       if (i - a.current < 500) {
@@ -26,31 +26,31 @@ const J = ({
         return;
       }
       if (a.current = i, e.key === " ") {
-        e.preventDefault(), t(!o);
+        e.preventDefault(), o(!r);
         return;
       }
-      t(!o), n(!1);
+      o(!r), t(!1);
     }
-    e.key === "Escape" && n(!1);
-  }, f = (e) => () => n(e);
-  return /* @__PURE__ */ $(B, { as: "label", $disabled: c, ...y, children: [
-    /* @__PURE__ */ s(
+    e.key === "Escape" && t(!1);
+  }, f = (e) => () => t(e);
+  return /* @__PURE__ */ $(B, { as: "label", $disabled: s, ...y, children: [
+    /* @__PURE__ */ n(
       C,
       {
         type: "checkbox",
-        checked: o,
+        checked: r,
         onChange: w,
         onKeyDown: D,
         onFocus: f(!0),
         onBlur: f(!1),
-        disabled: c,
-        tabIndex: d
+        disabled: s,
+        tabIndex: p
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ n(
       E,
       {
-        $value: o,
+        $value: r,
         $focused: S,
         size: 6,
         color: z,
@@ -59,7 +59,7 @@ const J = ({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ s(j, { color: p, size: "1.92rem", children: u })
+    /* @__PURE__ */ n(j, { color: l, size: "1.92rem", children: u })
   ] });
 };
 export {

package/components/Input/Checkbox/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 i from "../../../colors/orange.js";
-import e from "../../../colors/black.js";
+import { black as e } from "../../../colors/black.js";
 import f from "../../../colors/grey.js";
 import l from "../../../colors/violet.js";
 import n from "../../../colors/teal.js";

package/components/Input/Checkbox/styles.js

@@ -1,6 +1,6 @@
 import e, { css as t } from "styled-components";
-import i from "../../Icons/Check/Check.js";
-import n from "../../../colors/grey.js";
+import i from "../../../colors/grey.js";
+import n from "../../Icons/Check/Check.js";
 const c = e.div`
   cursor: pointer;
   display: flex;
@@ -13,10 +13,10 @@ const c = e.div`
       pointer-events: none;
       opacity: 0.4;
     `}
-`, d = e(i)`
+`, d = e(n)`
   width: 1.92rem;
   height: 1.92rem;
-  border: 1px solid ${({ $value: r, $outerShade: o }) => r ? o : n.m800};
+  border: 1px solid ${({ $value: r, $outerShade: o }) => r ? o : i.m800};
   border-radius: 0.32rem;
   background-color: ${({ $value: r, $innerShade: o }) => r ? o : "transparent"};
   transition:

package/components/Input/FileUploader/FileUploader.js

@@ -1,69 +1,68 @@
-import { jsx as o, jsxs as U } from "react/jsx-runtime";
-import { useRef as C } from "react";
-import { UploadBtnContainer as j, Wrapper as M, HiddenInput as W, PWrapper as B } from "./styles.js";
-import F from "../../../colors/white.js";
-import x from "../../../colors/blue.js";
-import H from "../../../colors/grey.js";
-import P from "../../Icons/Link/Link.js";
-import Z from "../../../colors/index.js";
-import q from "../../Ripple/Ripple.js";
-import { SIZE as A, MEDIUM as G } from "./constants.js";
-const J = ({ theme: t, children: l }) => /* @__PURE__ */ o(q, { rippleColor: t.m100, children: l }), oo = ({
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { useRef as y } from "react";
+import { UploadBtnContainer as U, Wrapper as j, HiddenInput as M, PWrapper as W } from "./styles.js";
+import B from "../../../colors/white.js";
+import { blue as C } from "../../../colors/blue.js";
+import F from "../../../colors/grey.js";
+import H from "../../../colors/colorMap.js";
+import P from "../../Ripple/Ripple.js";
+import { SIZE as Z, MEDIUM as q } from "./constants.js";
+import A from "../../Icons/Link/Link.js";
+const G = ({ theme: t, children: l }) => /* @__PURE__ */ o(P, { rippleColor: t.m100, children: l }), b = ({
   label: t,
   labelColor: l,
-  theme: p = x,
-  size: D = G,
+  theme: p = C,
+  size: x = q,
   width: s,
   isLoading: e,
   disabled: r,
-  prefixIcon: c = P,
+  prefixIcon: c = A,
   suffixIcon: m,
-  type: I = "file",
-  accept: R,
-  isMultiple: k,
-  onChange: z,
-  ...K
+  type: D = "file",
+  accept: I,
+  isMultiple: R,
+  onChange: k,
+  ...z
 }) => {
-  const h = C(null), { m400: g, m500: v, m600: E } = Z[p] ?? x, { height: u, width: $, font: n } = A[D] || {}, f = l || ["white", "yellow"].includes(p) ? H.m600 : F, a = C(0), d = /* @__PURE__ */ U(
-    M,
+  const h = y(null), { m400: K, m500: g, m600: v } = H[p] ?? C, { height: u, width: $, font: n } = Z[x] || {}, f = l || ["white", "yellow"].includes(p) ? F.m600 : B, a = y(0), d = /* @__PURE__ */ E(
+    j,
     {
-      $selectedColor: g,
-      $hoverColor: v,
+      $selectedColor: K,
+      $hoverColor: g,
       $height: u,
       $width: s || $,
-      $activeColor: E,
+      $activeColor: v,
       disabled: r,
       $isLoading: e,
       tabIndex: 0,
       "aria-disabled": r,
       onKeyDown: (i) => {
-        var w;
         if (i.key === "Enter" || i.key === " ") {
           i.preventDefault();
-          const y = Date.now();
-          if (y - a.current < 500) {
+          const w = Date.now();
+          if (w - a.current < 500) {
             i.stopPropagation();
             return;
           }
-          a.current = y, !r && !e && ((w = h.current) == null || w.click());
+          a.current = w, !r && !e && h.current?.click();
         }
       },
       children: [
         /* @__PURE__ */ o(
-          W,
+          M,
           {
             ref: h,
-            type: I,
-            accept: R,
-            multiple: k,
+            type: D,
+            accept: I,
+            multiple: R,
             disabled: r,
-            onChange: z,
+            onChange: k,
             tabIndex: -1
           }
         ),
         c && /* @__PURE__ */ o(c, { color: f, size: n + 19 }),
         /* @__PURE__ */ o(
-          B,
+          W,
           {
             color: f,
             size: `${n}rem`,
@@ -79,17 +78,17 @@ const J = ({ theme: t, children: l }) => /* @__PURE__ */ o(q, { rippleColor: t.m
     }
   );
   return /* @__PURE__ */ o(
-    j,
+    U,
     {
       $height: u,
       $width: s || $,
       disabled: r,
       $isLoading: e,
-      ...K,
-      children: e || r ? d : /* @__PURE__ */ o(J, { theme: p, children: d })
+      ...z,
+      children: e || r ? d : /* @__PURE__ */ o(G, { theme: p, children: d })
     }
   );
 };
 export {
-  oo as default
+  b as default
 };

package/components/Input/Input/Input.js

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

package/components/Input/Input/helpers.js

@@ -1,32 +1,31 @@
-import l from "../../../colors/blue.js";
-import n from "../../../colors/green.js";
+import { blue as p } from "../../../colors/blue.js";
+import f from "../../../colors/green.js";
 import i from "../../../colors/red.js";
-import f from "../../../colors/yellow.js";
+import l from "../../../colors/yellow.js";
 import g from "../../../colors/orange.js";
-import u from "../../../colors/black.js";
-import e from "../../../colors/grey.js";
+import { black as u } from "../../../colors/black.js";
+import o from "../../../colors/grey.js";
 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";
+import b from "../../Icons/iconsMap.js";
 const d = {
-  blue: l.m500,
-  green: n.m500,
+  blue: p.m500,
   red: i.m500,
-  green: n.m500,
-  yellow: f.m500,
+  green: f.m500,
+  yellow: l.m500,
   orange: g.m500,
   black: u.m500,
-  grey: e.m500,
+  grey: o.m500,
   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 3.84rem" : r ? "0 0.96rem 0 3.84rem" : m ? "0 3.84rem 0 0.96rem" : "0 0.96rem";
+}, E = (r) => d[r] ?? o.m500, H = ({ $hasError: r, $shade: m, $isFocused: e, value: t, $onlyPh: n }) => r ? typeof t == "string" && !t && !e ? o.m500 : i.m400 : e && !n ? m : o.m500, j = (r) => b[r] ?? null, q = ({ $hasLeftIcon: r, $hasRightIcon: m }) => r && m ? "0 3.84rem" : r ? "0 0.96rem 0 3.84rem" : m ? "0 3.84rem 0 0.96rem" : "0 0.96rem";
 export {
-  H as getColor,
-  M as getCssShade,
+  E as getColor,
+  H as getCssShade,
   j as getIcon,
   q as getPadding
 };

package/components/Input/Input/styles.js

@@ -1,5 +1,5 @@
 import e, { css as n } from "styled-components";
-import m from "../../../colors/black.js";
+import { black as m } from "../../../colors/black.js";
 import a from "../../../colors/grey.js";
 import l from "../../../colors/red.js";
 import { getPadding as p, getCssShade as i } from "./helpers.js";

package/components/Input/Radio/Radio.js

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

package/components/Input/RadioGroup/RadioGroup.js

@@ -1,42 +1,42 @@
-import { jsxs as u, jsx as g } from "react/jsx-runtime";
-import { createElement as h } from "react";
-import { getColor as x } from "../Checkbox/helpers.js";
-import j from "../Radio/Radio.js";
-import { Wrapper as k } from "./styles.js";
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { createElement as g } from "react";
+import { getColor as h } from "../Checkbox/helpers.js";
+import x from "../Radio/Radio.js";
+import { Wrapper as j } from "./styles.js";
 const y = ({
   options: i,
-  color: n = "blue",
-  value: o,
-  onChange: a,
-  isHorizonatal: d,
-  label: e,
-  ariaLabel: m,
-  name: c,
-  ...l
+  color: t = "blue",
+  value: e,
+  onChange: n,
+  isHorizonatal: a,
+  label: o,
+  ariaLabel: d,
+  name: m,
+  ...c
 }) => {
-  const s = x(n), t = (r) => {
-    r !== o && a(r);
-  }, f = (r) => /* @__PURE__ */ h(
-    j,
+  const l = h(t), s = (r) => {
+    r !== e && n(r);
+  }, p = (r) => /* @__PURE__ */ g(
+    x,
     {
       ...r,
-      key: r == null ? void 0 : r.value,
-      name: c,
-      color: s,
-      isSelected: o === (r == null ? void 0 : r.value),
-      onChange: t
+      key: r?.value,
+      name: m,
+      color: l,
+      isSelected: e === r?.value,
+      onChange: s
     }
   );
-  return /* @__PURE__ */ u(
-    k,
+  return /* @__PURE__ */ f(
+    j,
     {
       role: "radiogroup",
-      "aria-label": e ? void 0 : m,
-      $isHorizonatal: d,
-      ...l,
+      "aria-label": o ? void 0 : d,
+      $isHorizonatal: a,
+      ...c,
       children: [
-        e && /* @__PURE__ */ g("legend", { children: e }),
-        i.map(f)
+        o && /* @__PURE__ */ u("legend", { children: o }),
+        i.map(p)
       ]
     }
   );

package/components/Input/Textarea/SvgIcon.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Suspense as n } from "react";
+const c = ({ svgIcon: t, iconStyles: r }) => t ? /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e("div", { style: { width: "1em", height: "1em" } }), children: /* @__PURE__ */ e(t, { ...r }) }) : null;
+export {
+  c as default
+};