meticulous-ui 2.9.3 → 3.0.0

package/components/Button/Button.js

@@ -2,7 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { useRef as x } from "react";
 import D from "../Spinner/Spinner.js";
 import I from "../../colors/index.js";
-import u from "../../colors/blue.js";
+import C from "../../colors/blue.js";
 import { ButtonWrapper as R, SpinnerWrapper as B, Content as E, ButtonContainer as L } from "./styles.js";
 import S from "../Ripple/Ripple.js";
 import k from "../../colors/white.js";
@@ -11,26 +11,26 @@ import { MEDIUM as K, SIZE as M } from "./constants.js";
 const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m100, children: i }), Q = (t) => {
   const {
     children: i,
-    theme: n = u,
-    size: C = K,
-    width: d,
+    theme: n = C,
+    size: u = K,
+    width: s,
     leftIcon: W,
     rightIcon: j,
-    isLoading: r,
-    textColor: s,
+    isLoading: e,
+    textColor: d,
     onKeyDown: l,
     ...w
-  } = t || {}, m = x(0), $ = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
+  } = t || {}, m = x(0), $ = (r) => {
+    if (r.key === "Enter" || r.key === " ") {
       const f = Date.now();
       if (f - m.current < 500) {
-        e.preventDefault(), e.stopPropagation();
+        r.preventDefault(), r.stopPropagation();
         return;
       }
       m.current = f;
     }
-    l == null || l(e);
-  }, { m400: g, m500: b, m600: y } = I[n] ?? u, { height: c, width: h, font: v } = M[C] || {}, p = ["white", "yellow"].includes(n) ? z.m600 : k, a = /* @__PURE__ */ o(
+    l == null || l(r);
+  }, { m400: g, m500: b, m600: y } = I[n] ?? C, { height: c, width: h, font: v } = M[u] || {}, p = ["white", "yellow"].includes(n) ? z.m600 : k, a = /* @__PURE__ */ o(
     R,
     {
       ...w,
@@ -39,13 +39,13 @@ const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m
       $activeColor: y,
       $selectedColor: g,
       $height: c,
-      $width: d || h,
+      $width: s || h,
       disabled: t.disabled,
-      $isLoading: r,
-      children: r ? /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(D, { size: "medium", color: s || p }) }) : /* @__PURE__ */ o(
+      $isLoading: e,
+      children: e ? /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(D, { size: "small", color: d || p }) }) : /* @__PURE__ */ o(
         E,
         {
-          $textColor: s || p,
+          $textColor: d || p,
           $font: v,
           children: i
         }
@@ -56,10 +56,10 @@ const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m
     L,
     {
       $height: c,
-      $width: d || h,
+      $width: s || h,
       disabled: t.disabled,
-      $isLoading: r,
-      children: r ? a : /* @__PURE__ */ o(P, { theme: n, children: a })
+      $isLoading: e,
+      children: e ? a : /* @__PURE__ */ o(P, { theme: n, children: a })
     }
   );
 };

package/components/Button/constants.js

@@ -1,23 +1,23 @@
 const t = "small", h = "medium", o = "large", e = "ex-large", i = {
   [t]: {
-    height: 2.8,
-    width: 5.25,
-    font: 1
+    height: 4.48,
+    width: 8.4,
+    font: 1.6
   },
   [h]: {
-    height: 3.2,
-    width: 6,
-    font: 1.2
+    height: 5.12,
+    width: 9.6,
+    font: 1.92
   },
   [o]: {
-    height: 3.6,
-    width: 6.75,
-    font: 1.4
+    height: 5.76,
+    width: 10.8,
+    font: 2.24
   },
   [e]: {
-    height: 4,
-    width: 7.5,
-    font: 1.6
+    height: 6.4,
+    width: 12,
+    font: 2.56
   }
 };
 export {

package/components/Button/styles.js

@@ -3,9 +3,9 @@ import i from "../../colors/grey.js";
 const d = e.button`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
-  border-radius: 0.6rem;
+  border-radius: 0.96rem;
   border: none;
-  padding: 0.6rem 0.4rem;
+  padding: 0.96rem 0.64rem;
   background-color: ${({ $selectedColor: o, disabled: r }) => r ? i.m500 : o};
   cursor: ${({ disabled: o, $isLoading: r }) => o ? "not-allowed" : r ? "auto" : "pointer"};
 
@@ -37,7 +37,7 @@ const d = e.button`
   width: ${({ $width: o }) => o}rem;
   display: inline-block;
   position: relative;
-  border-radius: 0.6rem;
+  border-radius: 0.96rem;
 
   ${({ disabled: o, $isLoading: r }) => !(o || r) && n`
       box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);

package/components/Dropdown/Dropdown.js

@@ -18,8 +18,8 @@ const Ee = (n) => {
   options: n,
   onChange: O,
   value: s,
-  width: b = "20rem",
-  menuHeight: F = "20rem",
+  width: b = "32rem",
+  menuHeight: F = "32rem",
   placeholder: Q,
   theme: U = "blue",
   isLoading: w,
@@ -195,7 +195,7 @@ const Ee = (n) => {
             $border: te,
             $isFocused: N && !r,
             children: [
-              /* @__PURE__ */ u(xe, { $width: b, color: s ? E.m700 : E.m500, size: "1.2rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
+              /* @__PURE__ */ u(xe, { $width: b, color: s ? E.m700 : E.m500, size: "1.92rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
               /* @__PURE__ */ u(ge, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }

package/components/Dropdown/styles.js

@@ -34,11 +34,11 @@ const l = n`
       opacity: 0.7;
     `}
 `, y = e.div`
-  height: 2rem;
+  height: 3.2rem;
   width: ${({ $width: o }) => o};
-  border-radius: 0.6rem;
+  border-radius: 0.96rem;
   border: ${({ $isOpen: o, $isFocused: i, $border: m }) => o || i ? `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;
@@ -47,21 +47,21 @@ const l = n`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({ $width: o }) => o} - 2rem);
+  max-width: calc(${({ $width: o }) => o} - 3.2rem);
   pointer-events: none;
 `, k = e(d)`
   animation: ${({ $isOpen: o }) => o ? l : f} 0.15s linear;
   transform: rotate(${({ $isOpen: o }) => o ? 180 : 0}deg);
 `, D = e.div`
   border: 1px solid ${t.m700};
-  width: calc(${({ $width: o }) => o} + 1rem);
+  width: calc(${({ $width: o }) => o} + 1.6rem);
   /* Remove overflow: auto from here */
   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;
@@ -75,22 +75,22 @@ const l = n`
   ${({ $top: o }) => o ? r`
           bottom: 100%;
           flex-direction: column-reverse; /* Search at bottom if menu opens upward */
-          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;
         ` : r`
           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 = e.div`
   overflow-y: auto;
   flex: 1;
 `, z = e.div`
   position: absolute;
-  top: 0.8rem;
-  right: 1.2rem;
+  top: 1.28rem;
+  right: 1.92rem;
 `, C = e.div`
   position: relative;
   display: flex;
@@ -106,8 +106,8 @@ const l = n`
   box-sizing: border-box;
   border: none;
   /* Add left padding to make room for the icon */
-  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: ${t.m700};
   background: transparent;
   outline: none;
@@ -116,13 +116,13 @@ const l = n`
     color: ${t.m400};
   }
 `, O = e(p)`
-  margin: 0 0.8rem;
+  margin: 0 1.28rem;
 `, R = e.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/Input/Checkbox/Checkbox.js

@@ -59,7 +59,7 @@ const J = ({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ s(j, { color: p, size: "1.2rem", children: u })
+    /* @__PURE__ */ s(j, { color: p, size: "1.92rem", children: u })
   ] });
 };
 export {

package/components/Input/Checkbox/styles.js

@@ -5,7 +5,7 @@ const c = e.div`
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.28rem;
   width: max-content;
   position: relative;
 
@@ -14,10 +14,10 @@ const c = e.div`
       opacity: 0.4;
     `}
 `, d = e(i)`
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1.92rem;
+  height: 1.92rem;
   border: 1px solid ${({ $value: r, $outerShade: o }) => r ? o : n.m800};
-  border-radius: 0.2rem;
+  border-radius: 0.32rem;
   background-color: ${({ $value: r, $innerShade: o }) => r ? o : "transparent"};
   transition:
     background-color 0.5s ease,

package/components/Input/Input/helpers.js

@@ -23,7 +23,7 @@ const d = {
   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";
+}, 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";
 export {
   H as getColor,
   M as getCssShade,

package/components/Input/Input/styles.js

@@ -4,9 +4,9 @@ import a from "../../../colors/grey.js";
 import l from "../../../colors/red.js";
 import { getPadding as p, getCssShade as i } from "./helpers.js";
 const g = e.input`
-  height: 3rem;
-  border-radius: 0.4rem;
-  font-size: 1.4rem;
+  height: 4.8rem;
+  border-radius: 0.64rem;
+  font-size: 2.24rem;
   border: 2px solid ${({ $hasError: o }) => o ? l.m400 : m.m200};
   padding: ${p};
   font-weight: 400;
@@ -26,7 +26,7 @@ const g = e.input`
   &::placeholder {
     color: ${a.m500};
     font-weight: 300;
-    font-size: 1.4rem;
+    font-size: 2.24rem;
     background-color: ${({ $background: o }) => o};
     pointer-events: none;
   }
@@ -37,21 +37,21 @@ const g = e.input`
     outline: none;
   }
 `, h = e.p`
-  margin-top: 0.4rem;
-  margin-left: 0.4rem;
-  font-size: 0.8rem;
+  margin-top: 0.64rem;
+  margin-left: 0.64rem;
+  font-size: 1.28rem;
   color: ${i};
 `, v = e.div`
   position: relative;
   width: fit-content;
 `, w = e.div`
   position: absolute;
-  top: 0.8rem;
-  left: 0.6rem;
+  top: 1.28rem;
+  left: 0.96rem;
 `, $ = e.div`
   position: absolute;
-  top: 0.8rem;
-  right: 0.6rem;
+  top: 1.28rem;
+  right: 0.96rem;
 `;
 e.div`
   position: relative;
@@ -59,26 +59,26 @@ e.div`
 `;
 const k = e.div`
   position: absolute;
-  top: -0.4rem;
-  left: 0.5rem;
-  font-size: 0.8rem;
+  top: -0.64rem;
+  left: 0.8rem;
+  font-size: 1.28rem;
   background-color: ${({ $outerBackground: o }) => o};
-  border-radius: 0.4rem;
-  margin: 0 0.4rem;
+  border-radius: 0.64rem;
+  margin: 0 0.64rem;
   transition: 0.25s;
   font-weight: 400;
   pointer-events: none;
   color: ${i};
 
   ${({ $isFocused: o, value: t, $onlyPh: s }) => !s && (o || t) ? n`
-          top: -0.4rem;
-          left: ${({ $hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
-          padding: 0 0.4rem;
+          top: -0.64rem;
+          left: ${({ $hasLeftIcon: r }) => r ? 3.52 : 0.8}rem;
+          padding: 0 0.64rem;
           margin: 0;
         ` : n`
-          top: 0.8rem;
-          left: ${({ $hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
-          font-size: 1.4rem;
+          top: 1.28rem;
+          left: ${({ $hasLeftIcon: r }) => r ? 3.52 : 0.8}rem;
+          font-size: 2.24rem;
         `}
 `;
 export {

package/components/Input/Radio/Radio.js

@@ -30,7 +30,7 @@ const C = ({
       }
     ),
     /* @__PURE__ */ n(w, { "aria-hidden": "true", $isSelected: d, $shade: a, children: /* @__PURE__ */ n(x, { $isSelected: d, $shade: o }) }),
-    /* @__PURE__ */ n($, { color: f, size: "1.2rem", children: s })
+    /* @__PURE__ */ n($, { color: f, size: "1.92rem", children: s })
   ] });
 };
 export {

package/components/Input/Radio/styles.js

@@ -2,8 +2,8 @@ import e, { css as t } from "styled-components";
 import i from "../../../colors/grey.js";
 const p = e.div`
   position: absolute;
-  width: 0.7rem;
-  height: 0.7rem;
+  width: 1.12rem;
+  height: 1.12rem;
   border-radius: 50%;
   left: 50%;
   top: 50%;
@@ -11,8 +11,8 @@ const p = e.div`
   background-color: ${({ $isSelected: o, $shade: r }) => o ? r : "transparent"};
   transition: background-color 0.35s ease;
 `, s = e.div`
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1.76rem;
+  height: 1.76rem;
   border: 1px solid ${({ $isSelected: o, $shade: r }) => o ? r : i.m900};
   border-radius: 50%;
   position: relative;
@@ -32,7 +32,7 @@ const p = e.div`
 `, c = e.label`
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.28rem;
   width: max-content;
 
   &:focus-within ${s} {

package/components/Input/RadioGroup/styles.js

@@ -10,7 +10,7 @@ const p = n.fieldset`
           flex-wrap: wrap;
           justify-content: space-between;
         ` : r`
-          gap: 1.2rem;
+          gap: 1.92rem;
         `};
 `;
 export {

package/components/Input/Textarea/styles.js

@@ -4,15 +4,15 @@ import l from "../../../colors/grey.js";
 import s from "../../../colors/red.js";
 import { getCssShade as i } from "./helpers.js";
 const b = o.textarea`
-  border-radius: 0.4rem;
-  font-size: 1.4rem;
+  border-radius: 0.64rem;
+  font-size: 2.24rem;
   border: 2px solid ${({ $hasError: e }) => e ? s.m400 : a.m200};
-  padding: 0.6rem;
+  padding: 0.96rem;
   font-weight: 400;
   transition: border-color 0.3s ease;
   background-color: ${({ $background: e }) => e} !important;
-  min-height: 1.4rem;
-  min-width: 3rem;
+  min-height: 2.24rem;
+  min-width: 4.8rem;
 
   ${({ $isResizeNone: e }) => e && r`
       resize: none;
@@ -36,7 +36,7 @@ const b = o.textarea`
   &::placeholder {
     color: ${l.m500};
     font-weight: 300;
-    font-size: 1.4rem;
+    font-size: 2.24rem;
     background-color: ${({ $background: e }) => e};
     pointer-events: none;
   }
@@ -47,21 +47,21 @@ const b = o.textarea`
     outline: none;
   }
 `, w = o.p`
-  margin-top: 0.4rem;
-  margin-left: 0.4rem;
-  font-size: 0.8rem;
+  margin-top: 0.64rem;
+  margin-left: 0.64rem;
+  font-size: 1.28rem;
   color: ${i};
 `, h = o.div`
   position: relative;
   width: fit-content;
 `, u = o.div`
   position: absolute;
-  top: -0.4rem;
-  left: 0.5rem;
-  font-size: 0.8rem;
+  top: -0.64rem;
+  left: 0.8rem;
+  font-size: 1.28rem;
   background-color: ${({ $outerBackground: e }) => e};
-  border-radius: 0.4rem;
-  margin: 0 0.4rem;
+  border-radius: 0.64rem;
+  margin: 0 0.64rem;
   transition: 0.25s;
   font-weight: 400;
   pointer-events: none;
@@ -74,14 +74,14 @@ const b = o.textarea`
   max-width: stretch; /* Modern Standard */
 
   ${({ $isFocused: e, $value: t, $onlyPh: n }) => !n && (e || t) ? r`
-          top: -0.4rem;
-          left: 0.5rem;
-          padding: 0 0.4rem;
+          top: -0.64rem;
+          left: 0.8rem;
+          padding: 0 0.64rem;
           margin: 0;
         ` : r`
-          top: 0.8rem;
-          left: 0.5rem;
-          font-size: 1.4rem;
+          top: 1.28rem;
+          left: 0.8rem;
+          font-size: 2.24rem;
         `}
 `, g = o.div`
   overflow: hidden;

package/components/Loader/constants.js

@@ -1,7 +1,7 @@
 const m = "small", o = "medium", t = "large", e = {
-  [m]: { dot: "0.5rem", gap: "0.3rem" },
-  [o]: { dot: "0.75rem", gap: "0.5rem" },
-  [t]: { dot: "1rem", gap: "0.7rem" }
+  [m]: { dot: "0.8rem", gap: "0.48rem" },
+  [o]: { dot: "1.2rem", gap: "0.8rem" },
+  [t]: { dot: "1.6rem", gap: "1.12rem" }
 }, r = "blue", s = ["m200", "m300", "m400", "m600", "m800"], E = [0, 0.17, 0.34, 0.51, 0.68];
 export {
   E as ANIMATION_DELAYS,

package/components/MenuItem/MenuItem.js

@@ -7,14 +7,14 @@ const w = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500
   id: o,
   value: e,
   label: l,
-  width: n = "20rem",
+  width: n = "32rem",
   isSelected: t,
   defaultColor: p = s,
   selectedColor: a = m.m200,
   hoverColor: d = m.m50,
   activeColor: f = m.m100,
   isHighlighted: h,
-  size: $ = "1.2rem",
+  size: $ = "1.92rem",
   onSelect: u,
   isDisabled: r,
   onMouseEnter: C,

package/components/MenuItem/styles.js

@@ -11,8 +11,8 @@ const d = t.div`
 }) => o ? i : e ? a : r};
 
   cursor: ${({ $isSelected: o, $isDisabled: r }) => o ? "auto" : r ? "not-allowed" : "pointer"};
-  padding: 0.6rem 0 0.8rem 1rem;
-  margin-top: 0.1rem;
+  padding: 0.96rem 0 1.28rem 1.6rem;
+  margin-top: 0.16rem;
   pointer-events: ${({ $isDisabled: o }) => o ? "none" : "auto"};
 
   &:active {
@@ -22,7 +22,7 @@ const d = t.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({ $width: o }) => o} - 2rem);
+  max-width: calc(${({ $width: o }) => o} - 3.2rem);
 `;
 export {
   m as PWrapper,

package/components/OtpInput/styles.js

@@ -3,19 +3,19 @@ import e from "../../colors/grey.js";
 const m = r.div`
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.64rem;
 
   @media screen and (max-width: 768px) {\
-    gap: 0.2rem;
+    gap: 0.32rem;
   }
 `, o = r.input`
-  height: 2rem;
-  width: 2rem;
-  font-size: 1.2rem;
+  height: 3.2rem;
+  width: 3.2rem;
+  font-size: 1.92rem;
   text-align: center;
   color: ${e.m600};
   border: 1px solid ${e.m800};
-  border-radius: 0.2rem;
+  border-radius: 0.32rem;
 `;
 export {
   o as Input,