meticulous-ui 3.7.12 → 3.7.13

package/components/Input/Textarea/Textarea.js

@@ -29,36 +29,22 @@ const ie = {
 }, ne = (e) => {
   var o;
   return (o = ie[e]) != null ? o : s.m500;
-}, x = ({
-  $hasError: e,
-  $shade: o,
-  $isFocused: r,
-  value: a,
-  $onlyPh: d
-}) => e ? typeof a == "string" && !a && !r ? s.m500 : v.m400 : r && !d ? o : s.m500, se = n.textarea`
+}, x = ({ $hasError: e, $shade: o, $isFocused: r, value: a, $onlyPh: d }) => e ? typeof a == "string" && !a && !r ? s.m500 : v.m400 : r && !d ? o : s.m500, se = n.textarea`
   border-radius: 0.64rem;
   font-size: 2.24rem;
-  border: 2px solid ${({
-  $hasError: e
-}) => e ? v.m400 : L.m200};
+  border: 2px solid ${({ $hasError: e }) => e ? v.m400 : L.m200};
   padding: 0.96rem;
   font-weight: 400;
   transition: border-color 0.3s ease;
-  background-color: ${({
-  $background: e
-}) => e} !important;
+  background-color: ${({ $background: e }) => e} !important;
   min-height: 2.24rem;
   min-width: 4.8rem;
 
-  ${({
-  $isResizeNone: e
-}) => e && c`
+  ${({ $isResizeNone: e }) => e && c`
       resize: none;
     `}
 
-  ${({
-  $isDynamic: e
-}) => e && c`
+  ${({ $isDynamic: e }) => e && c`
       resize: none;
     `}
 
@@ -75,22 +61,13 @@ const ie = {
     color: ${s.m500};
     font-weight: 300;
     font-size: 2.24rem;
-    background-color: ${({
-  $background: e
-}) => e};
+    background-color: ${({ $background: e }) => e};
     pointer-events: none;
   }
 
   &:focus {
     border: 2px solid
-      ${({
-  $shade: e,
-  $hasError: o
-}) => x({
-  $shade: e,
-  $hasError: o,
-  $isFocused: !0
-})};
+      ${({ $shade: e, $hasError: o }) => x({ $shade: e, $hasError: o, $isFocused: !0 })};
     outline: none;
   }
 `, ae = n.p`
@@ -106,9 +83,7 @@ const ie = {
   top: -0.64rem;
   left: 0.8rem;
   font-size: 1.28rem;
-  background-color: ${({
-  $outerBackground: e
-}) => e};
+  background-color: ${({ $outerBackground: e }) => e};
   border-radius: 0.64rem;
   margin: 0 0.64rem;
   transition: 0.25s;
@@ -122,11 +97,7 @@ const ie = {
   max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
   max-width: stretch; /* Modern Standard */
 
-  ${({
-  $isFocused: e,
-  $value: o,
-  $onlyPh: r
-}) => !r && (e || o) ? c`
+  ${({ $isFocused: e, $value: o, $onlyPh: r }) => !r && (e || o) ? c`
           top: -0.64rem;
           left: 0.8rem;
           padding: 0 0.64rem;
@@ -175,24 +146,53 @@ const ie = {
     }
   }, T = () => C(!0), _ = () => C(!1), D = (t) => {
     z && b.current && M(b.current), o(t);
-  }, S = {
-    color: s.m500,
-    size: 20
-  }, w = !!f, F = !!h, l = d, N = z, q = y, G = {
-    rows: O
-  }, $ = `textarea-${k}`, I = p ? `${$}-helper` : void 0;
+  }, S = { color: s.m500, size: 20 }, w = !!f, F = !!h, l = d, N = z, q = y, G = { rows: O }, $ = `textarea-${k}`, I = p ? `${$}-helper` : void 0;
   return /* @__PURE__ */ H(me, { children: [
-    /* @__PURE__ */ i(se, { type: a, name: k, $hasError: l, value: r, $isFocused: m, $shade: g, $isDynamic: N, $background: q, cols: P, $hasLeftIcon: w, $hasRightIcon: F, $isResizeNone: E, ...G, id: $, "aria-invalid": l ? !0 : void 0, "aria-describedby": I, ref: b, onFocus: T, onBlur: _, onChange: D, ...W }),
-    f && /* @__PURE__ */ i(de, { "aria-hidden": "true", style: {
-      top: "1.2rem",
-      transform: "none"
-    }, children: /* @__PURE__ */ i(B, { svgIcon: f, iconStyles: S }) }),
-    h && /* @__PURE__ */ i(pe, { "aria-hidden": "true", style: {
-      top: "1.2rem",
-      transform: "none"
-    }, children: /* @__PURE__ */ i(B, { svgIcon: h, iconStyles: S }) }),
+    /* @__PURE__ */ i(
+      se,
+      {
+        type: a,
+        name: k,
+        $hasError: l,
+        value: r,
+        $isFocused: m,
+        $shade: g,
+        $isDynamic: N,
+        $background: q,
+        cols: P,
+        $hasLeftIcon: w,
+        $hasRightIcon: F,
+        $isResizeNone: E,
+        ...G,
+        id: $,
+        "aria-invalid": l ? !0 : void 0,
+        "aria-describedby": I,
+        ref: b,
+        onFocus: T,
+        onBlur: _,
+        onChange: D,
+        ...W
+      }
+    ),
+    f && /* @__PURE__ */ i(de, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ i(B, { svgIcon: f, iconStyles: S }) }),
+    h && /* @__PURE__ */ i(pe, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ i(B, { svgIcon: h, iconStyles: S }) }),
     /* @__PURE__ */ H(ce, { children: [
-      (e || u && !r) && /* @__PURE__ */ i(le, { as: "label", htmlFor: $, $hasError: l, $isFocused: m, $shade: g, $value: r, $outerBackground: m || r ? A : y, $hasLeftIcon: w, $hasRightIcon: F, $onlyPh: u && !e, children: e || u }),
+      (e || u && !r) && /* @__PURE__ */ i(
+        le,
+        {
+          as: "label",
+          htmlFor: $,
+          $hasError: l,
+          $isFocused: m,
+          $shade: g,
+          $value: r,
+          $outerBackground: m || r ? A : y,
+          $hasLeftIcon: w,
+          $hasRightIcon: F,
+          $onlyPh: u && !e,
+          children: e || u
+        }
+      ),
       p && /* @__PURE__ */ i(ae, { id: I, $hasError: l, $isFocused: m, $shade: g, $hasLeftIcon: w, children: p })
     ] })
   ] });

package/components/Loader/Loader.js

@@ -52,9 +52,7 @@ const Y = {
 `, N = s.div`
   display: inline-flex;
   align-items: center;
-  gap: ${({
-  $gap: o
-}) => o};
+  gap: ${({ $gap: o }) => o};
 `, U = s.span`
   position: absolute;
   width: 1px;
@@ -67,22 +65,13 @@ const Y = {
   border: 0;
 `, C = s.span`
   display: inline-block;
-  width: ${({
-  $size: o
-}) => o};
-  height: ${({
-  $size: o
-}) => o};
+  width: ${({ $size: o }) => o};
+  height: ${({ $size: o }) => o};
   border-radius: 50%;
-  background-color: ${({
-  $color: o
-}) => o};
+  background-color: ${({ $color: o }) => o};
   flex-shrink: 0;
 
-  ${({
-  $delay: o,
-  $isBounce: i
-}) => A`
+  ${({ $delay: o, $isBounce: i }) => A`
     animation: ${i ? B : z} ${i ? 1.2 : 1.3}s ease-in-out infinite;
     animation-delay: ${o}s;
 
@@ -90,24 +79,24 @@ const Y = {
       animation: none;
     }
   `}
-`, R = ({
-  size: o = c,
-  theme: i = w,
-  isBounce: u,
-  isMini: g,
-  isMiniDark: h,
-  ...$
-}) => {
-  const {
-    dot: y,
-    gap: b
-  } = p[o] || p[c], a = j(i), m = M, x = (h ? r.slice(2, 6) : g ? r.slice(0, 3) : r).map((n) => {
+`, R = ({ size: o = c, theme: i = w, isBounce: u, isMini: g, isMiniDark: h, ...$ }) => {
+  const { dot: y, gap: b } = p[o] || p[c], a = j(i), m = M, x = (h ? r.slice(2, 6) : g ? r.slice(0, 3) : r).map((n) => {
     var e;
     return (e = a[n]) != null ? e : a.m500;
   }), E = m.map(() => y);
   return /* @__PURE__ */ k(N, { role: "status", $gap: b, ...$, children: [
     /* @__PURE__ */ l(U, { children: "Loading" }),
-    E.map((n, e) => /* @__PURE__ */ l(C, { "aria-hidden": "true", $size: n, $color: x[e], $delay: m[e], $isBounce: u }, `dot-${e}`))
+    E.map((n, e) => /* @__PURE__ */ l(
+      C,
+      {
+        "aria-hidden": "true",
+        $size: n,
+        $color: x[e],
+        $delay: m[e],
+        $isBounce: u
+      },
+      `dot-${e}`
+    ))
   ] });
 };
 R.propTypes = {

package/components/Loader/constants.js

@@ -1,16 +1,7 @@
 const m = "small", o = "medium", t = "large", e = {
-  [m]: {
-    dot: "0.8rem",
-    gap: "0.48rem"
-  },
-  [o]: {
-    dot: "1.2rem",
-    gap: "0.8rem"
-  },
-  [t]: {
-    dot: "1.6rem",
-    gap: "1.12rem"
-  }
+  [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

@@ -5,9 +5,7 @@ import v from "../../colors/white.js";
 import c from "styled-components";
 import C from "../Typography/P/P.js";
 const k = c.div`
-  width: ${({
-  $width: r
-}) => r};
+  width: ${({ $width: r }) => r};
   background-color: ${({
   $isSelected: r,
   $defaultColor: o,
@@ -16,34 +14,20 @@ const k = c.div`
   $selectedColor: t
 }) => r ? t : e ? i : o};
 
-  cursor: ${({
-  $isSelected: r,
-  $isDisabled: o
-}) => r ? "auto" : o ? "not-allowed" : "pointer"};
+  cursor: ${({ $isSelected: r, $isDisabled: o }) => r ? "auto" : o ? "not-allowed" : "pointer"};
   padding: 0.96rem 0 1.28rem 1.6rem;
   margin-top: 0.16rem;
-  pointer-events: ${({
-  $isDisabled: r
-}) => r ? "none" : "auto"};
+  pointer-events: ${({ $isDisabled: r }) => r ? "none" : "auto"};
 
   &:active {
-    background-color: ${({
-  $isSelected: r,
-  $activeColor: o,
-  $selectedColor: e
-}) => r ? e : o};
+    background-color: ${({ $isSelected: r, $activeColor: o, $selectedColor: e }) => r ? e : o};
   }
 `, x = c(C)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({
-  $width: r
-}) => r} - 3.2rem);
-`, y = ({
-  isSelected: r,
-  isDisabled: o
-}) => r ? n.m700 : o ? n.m300 : n.m500, q = ({
+  max-width: calc(${({ $width: r }) => r} - 3.2rem);
+`, y = ({ isSelected: r, isDisabled: o }) => r ? n.m700 : o ? n.m300 : n.m500, q = ({
   id: r,
   value: o,
   label: e,
@@ -59,12 +43,30 @@ const k = c.div`
   isDisabled: m,
   onMouseEnter: w,
   ...g
-}) => /* @__PURE__ */ a(k, { $isSelected: t, $width: i, $defaultColor: d, $selectedColor: p, $hoverColor: $, $activeColor: f, $isDisabled: m, $isHighlighted: h, id: r, role: "option", ...g, "aria-selected": t, "aria-disabled": m || void 0, onClick: () => {
-  m || s(o);
-}, onMouseEnter: w, title: e, children: /* @__PURE__ */ a(x, { size: u, color: y({
-  isSelected: t,
-  isDisabled: m
-}), $width: i, children: e }) });
+}) => /* @__PURE__ */ a(
+  k,
+  {
+    $isSelected: t,
+    $width: i,
+    $defaultColor: d,
+    $selectedColor: p,
+    $hoverColor: $,
+    $activeColor: f,
+    $isDisabled: m,
+    $isHighlighted: h,
+    id: r,
+    role: "option",
+    ...g,
+    "aria-selected": t,
+    "aria-disabled": m || void 0,
+    onClick: () => {
+      m || s(o);
+    },
+    onMouseEnter: w,
+    title: e,
+    children: /* @__PURE__ */ a(x, { size: u, color: y({ isSelected: t, isDisabled: m }), $width: i, children: e })
+  }
+);
 export {
   q as default
 };

package/components/Modal/Modal.js

@@ -31,9 +31,7 @@ const q = d`
   animation: ${q} 0.2s ease;
   padding: 1rem;
 
-  ${({
-  $fullOnMobile: e
-}) => e && f`
+  ${({ $fullOnMobile: e }) => e && f`
       @media (max-width: 640px) {
         align-items: flex-end;
         padding: 0;
@@ -46,18 +44,11 @@ const q = d`
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  width: ${({
-  $width: e
-}) => e || "32rem"};
+  width: ${({ $width: e }) => e || "32rem"};
   max-width: 100%;
-  animation: ${({
-  $isClosing: e
-}) => e ? H : P} 0.3s ease forwards;
+  animation: ${({ $isClosing: e }) => e ? H : P} 0.3s ease forwards;
 
-  ${({
-  $fullOnMobile: e,
-  $isClosing: o
-}) => e && f`
+  ${({ $fullOnMobile: e, $isClosing: o }) => e && f`
       @media (max-width: 640px) {
         width: 100%;
         max-width: 100%;
@@ -121,21 +112,31 @@ const q = d`
   border-top: 1px solid ${i.m200};
   flex-shrink: 0;
 
-  ${({
-  $align: e
-}) => e === "left" && f`
+  ${({ $align: e }) => e === "left" && f`
       justify-content: flex-start;
     `}
 
-  ${({
-  $align: e
-}) => e === "center" && f`
+  ${({ $align: e }) => e === "center" && f`
       justify-content: center;
     `}
-`, R = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', _ = () => /* @__PURE__ */ p("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ n("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ n("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] }), ee = ({
+`, R = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', _ = () => /* @__PURE__ */ p(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ n("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ n("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+), ee = ({
   isOpen: e,
   onClose: o,
   title: a,
@@ -163,9 +164,12 @@ const q = d`
     if (!c.length) return;
     const E = c[0], M = c[c.length - 1];
     t.shiftKey ? document.activeElement === E && (t.preventDefault(), M.focus()) : document.activeElement === M && (t.preventDefault(), E.focus());
-  }, []), y = B((t) => {
-    t.key === "Escape" && (o == null || o()), j(t);
-  }, [o, j]);
+  }, []), y = B(
+    (t) => {
+      t.key === "Escape" && (o == null || o()), j(t);
+    },
+    [o, j]
+  );
   return g(() => {
     if (!e) return;
     document.addEventListener("keydown", y);
@@ -173,16 +177,33 @@ const q = d`
     return document.body.style.overflow = "hidden", () => {
       document.removeEventListener("keydown", y), document.body.style.overflow = t;
     };
-  }, [e, y]), w ? F(/* @__PURE__ */ n(W, { onClick: (t) => {
-    z && t.target === t.currentTarget && (o == null || o());
-  }, $fullOnMobile: k, children: /* @__PURE__ */ p(G, { ref: s, role: "dialog", "aria-modal": "true", "aria-labelledby": a ? h : void 0, tabIndex: -1, $width: S, $fullOnMobile: k, $isClosing: C, ...A, children: [
-    (a || v) && /* @__PURE__ */ p(J, { children: [
-      a && (D(a) ? /* @__PURE__ */ n("div", { id: h, children: a }) : /* @__PURE__ */ n(N, { id: h, children: a })),
-      v && /* @__PURE__ */ n(Q, { onClick: o, "aria-label": "Close modal", children: /* @__PURE__ */ n(_, {}) })
-    ] }),
-    /* @__PURE__ */ n(X, { children: L }),
-    x && /* @__PURE__ */ n(Z, { $align: O, children: x })
-  ] }) }), document.body) : null;
+  }, [e, y]), w ? F(
+    /* @__PURE__ */ n(W, { onClick: (t) => {
+      z && t.target === t.currentTarget && (o == null || o());
+    }, $fullOnMobile: k, children: /* @__PURE__ */ p(
+      G,
+      {
+        ref: s,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": a ? h : void 0,
+        tabIndex: -1,
+        $width: S,
+        $fullOnMobile: k,
+        $isClosing: C,
+        ...A,
+        children: [
+          (a || v) && /* @__PURE__ */ p(J, { children: [
+            a && (D(a) ? /* @__PURE__ */ n("div", { id: h, children: a }) : /* @__PURE__ */ n(N, { id: h, children: a })),
+            v && /* @__PURE__ */ n(Q, { onClick: o, "aria-label": "Close modal", children: /* @__PURE__ */ n(_, {}) })
+          ] }),
+          /* @__PURE__ */ n(X, { children: L }),
+          x && /* @__PURE__ */ n(Z, { $align: O, children: x })
+        ]
+      }
+    ) }),
+    document.body
+  ) : null;
 };
 ee.propTypes = {
   /** Controls whether the modal is visible */
@@ -190,7 +211,7 @@ ee.propTypes = {
   /** Called when the modal requests to close (Escape key, overlay click, or close button) */
   onClose: r.func,
   /** Modal header title — string or React element */
-  title: /* @__PURE__ */ r.oneOfType([r.string, r.node]),
+  title: r.oneOfType([r.string, r.node]),
   /** Modal body content */
   children: r.node,
   /** Content rendered in the modal footer (e.g. action buttons) */

package/components/OtpInput/OtpInput.js

@@ -21,27 +21,33 @@ const E = O.div`
   border-radius: 0.32rem;
 `, j = (e, c) => (a) => {
   e(a.target.value, c);
-}, v = (e, c) => (a) => e(a, c), F = ({
-  inputsRef: e,
-  handleChange: c,
-  handleKeyDown: a,
-  handleFocus: n,
-  digit: l,
-  index: s,
-  length: i
-}) => /* @__PURE__ */ w(T, { ref: (m) => e.current[s] = m, maxLength: 1, inputMode: "numeric", autoComplete: "one-time-code", "aria-label": `Digit ${s + 1} of ${i}`, value: l, onChange: j(c, s), onKeyDown: v(a, s), onFocus: () => n(s) }, `key-${s}`), K = ({
-  inputsRef: e,
-  handleChange: c,
-  handleKeyDown: a,
-  handleFocus: n,
-  length: l
-}) => (s, i) => /* @__PURE__ */ w(F, { inputsRef: e, handleChange: c, handleKeyDown: a, handleFocus: n, digit: s, index: i, length: l }, `otp-num-${i}`), B = ({
-  length: e = 6,
-  value: c = "",
-  onChange: a,
-  onComplete: n,
-  ...l
-}) => {
+}, v = (e, c) => (a) => e(a, c), F = ({ inputsRef: e, handleChange: c, handleKeyDown: a, handleFocus: n, digit: l, index: s, length: i }) => /* @__PURE__ */ w(
+  T,
+  {
+    ref: (m) => e.current[s] = m,
+    maxLength: 1,
+    inputMode: "numeric",
+    autoComplete: "one-time-code",
+    "aria-label": `Digit ${s + 1} of ${i}`,
+    value: l,
+    onChange: j(c, s),
+    onKeyDown: v(a, s),
+    onFocus: () => n(s)
+  },
+  `key-${s}`
+), K = ({ inputsRef: e, handleChange: c, handleKeyDown: a, handleFocus: n, length: l }) => (s, i) => /* @__PURE__ */ w(
+  F,
+  {
+    inputsRef: e,
+    handleChange: c,
+    handleKeyDown: a,
+    handleFocus: n,
+    digit: s,
+    index: i,
+    length: l
+  },
+  `otp-num-${i}`
+), B = ({ length: e = 6, value: c = "", onChange: a, onComplete: n, ...l }) => {
   const [s, i] = P(Array(e).fill("")), d = h([]), m = h(s), g = h(!1), f = (r) => {
     var t;
     g.current = !0, (t = d.current[r]) == null || t.focus();
@@ -84,13 +90,7 @@ const E = O.div`
     t.slice(0, e).split("").forEach((p, I) => o[I] = p), D(o);
     const u = Math.min(t.length - 1, e - 1);
     f(u);
-  }, ...l, children: s.map(K({
-    inputsRef: d,
-    handleChange: R,
-    handleKeyDown: b,
-    handleFocus: $,
-    length: e
-  })) });
+  }, ...l, children: s.map(K({ inputsRef: d, handleChange: R, handleKeyDown: b, handleFocus: $, length: e })) });
 };
 B.propTypes = {
   /** Number of OTP input boxes. Defaults to 6 */

package/components/PageLoader/PageLoader.js

@@ -32,19 +32,23 @@ const x = {
 `, h = v.div`
   width: 90%;
   height: 3px;
-  background-color: ${({
-  $color: r
-}) => r};
+  background-color: ${({ $color: r }) => r};
   transform-origin: left;
   animation: ${L} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-`, M = ({
-  theme: r = "blue",
-  color: o,
-  ...a
-}) => {
+`, M = ({ theme: r = "blue", color: o, ...a }) => {
   var e;
   const m = y(r), i = o || ((e = m == null ? void 0 : m.m500) != null ? e : t.m500);
-  return /* @__PURE__ */ l(h, { ...a, $color: i, role: "progressbar", "aria-label": "Loading", "aria-valuemin": 0, "aria-valuemax": 100 });
+  return /* @__PURE__ */ l(
+    h,
+    {
+      ...a,
+      $color: i,
+      role: "progressbar",
+      "aria-label": "Loading",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }
+  );
 };
 export {
   M as default