meticulous-ui 3.0.5 → 3.0.7

package/README.md

@@ -58,26 +58,27 @@ import blue from 'meticulous-ui/colors/blue';
 
 ## 📦 Components
 
-| Component      | Description                                              |
-| -------------- | -------------------------------------------------------- |
-| `Pagination`   | Fully responsive pagination component                    |
-| `Toast`        | Push 4 types of notifications on screen                  |
-| `Timer`        | Renders analog / digital clock with alarm                |
-| `OtpInput`     | Gives inputs to enter and edit OTP                       |
-| `VideoPlayer`  | Renders video with keyboard shortcuts                    |
-| `Image`        | Renders image with shimmer, lower resolution             |
-| `Input`        | Renders input box to let user enter input                |
-| `Checkbox`     | Renders checkbox to let user give boolean value          |
-| `RadioGroup`   | Renders radio options in a group to let user select      |
-| `FileUploader` | Renders a button type input from where user can upload   |
-| `Textarea`     | Renders textarea box to let user enter description       |
-| `Dropdown`     | Renders dropdown to select from options                  |
-| `SelectBox`    | Renders selectbox to select multiple values from options |
-| `Spinner`      | Renders a spinner to show the loading state              |
-| `Loader`       | Renders a loader with dots to show the loading state     |
-| `PageLoader`   | Renders a loader with line at the top of page            |
-| `Button`       | Renders a button to click & take an action               |
-| `Shimmer`      | Animated skeleton loading placeholder                    |
+| Component       | Description                                                      |
+| --------------- | ---------------------------------------------------------------- |
+| `Pagination`    | Fully responsive pagination component                            |
+| `Toast`         | Push 4 types of notifications on screen                          |
+| `Timer`         | Renders analog / digital clock with alarm                        |
+| `OtpInput`      | Gives inputs to enter and edit OTP                               |
+| `VideoPlayer`   | Renders video with keyboard shortcuts                            |
+| `Image`         | Renders image with shimmer, lower resolution                     |
+| `Input`         | Renders input box to let user enter input                        |
+| `Checkbox`      | Renders checkbox to let user give boolean value                  |
+| `RadioGroup`    | Renders radio options in a group to let user select              |
+| `FileUploader`  | Renders a button type input from where user can upload           |
+| `Textarea`      | Renders textarea box to let user enter description               |
+| `Dropdown`      | Renders dropdown to select from options                          |
+| `SelectBox`     | Renders selectbox to select multiple values from options         |
+| `Spinner`       | Renders a spinner to show the loading state                      |
+| `Loader`        | Renders a loader with dots to show the loading state             |
+| `PageLoader`    | Renders a loader with line at the top of page                    |
+| `Button`        | Renders a button to click & take an action                       |
+| `Shimmer`       | Animated skeleton loading placeholder                            |
+| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui |
 
 ## 📦 Icon Components
 

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 C from "../../colors/blue.js";
+import u 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,41 +11,42 @@ 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 = C,
-    size: u = K,
+    theme: n = u,
+    size: C = K,
     width: s,
     leftIcon: W,
     rightIcon: j,
-    isLoading: e,
+    isLoading: r,
     textColor: d,
     onKeyDown: l,
     ...w
-  } = t || {}, m = x(0), $ = (r) => {
-    if (r.key === "Enter" || r.key === " ") {
+  } = t || {}, m = x(0), $ = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
       const f = Date.now();
       if (f - m.current < 500) {
-        r.preventDefault(), r.stopPropagation();
+        e.preventDefault(), e.stopPropagation();
         return;
       }
       m.current = f;
     }
-    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(
+    l == null || l(e);
+  }, { m400: g, m500: b, m600: y } = I[n] ?? u, { height: c, width: p, font: v } = M[C] || {}, h = ["white", "yellow"].includes(n) ? z.m600 : k, a = /* @__PURE__ */ o(
     R,
     {
+      type: "button",
       ...w,
       onKeyDown: $,
       $hoverColor: b,
       $activeColor: y,
       $selectedColor: g,
       $height: c,
-      $width: s || h,
+      $width: s || p,
       disabled: t.disabled,
-      $isLoading: e,
-      children: e ? /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(D, { size: "small", color: d || p }) }) : /* @__PURE__ */ o(
+      $isLoading: r,
+      children: r ? /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(D, { size: "small", color: d || h }) }) : /* @__PURE__ */ o(
         E,
         {
-          $textColor: d || p,
+          $textColor: d || h,
           $font: v,
           children: i
         }
@@ -56,10 +57,10 @@ const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m
     L,
     {
       $height: c,
-      $width: s || h,
+      $width: s || p,
       disabled: t.disabled,
-      $isLoading: e,
-      children: e ? a : /* @__PURE__ */ o(P, { theme: n, children: a })
+      $isLoading: r,
+      children: r ? a : /* @__PURE__ */ o(P, { theme: n, children: a })
     }
   );
 };

package/components/Image/Image.js

@@ -7,24 +7,24 @@ const o = (e) => {
     return typeof e == "number" ? `${e}rem` : e;
 }, k = ({
   src: e,
-  alt: l = "",
+  alt: n = "",
   width: c = "100%",
   height: f = "100%",
   borderRadius: r = "0.4rem",
   loadLow: m = !1,
-  lowSrc: n,
-  ...u
+  lowSrc: i,
+  ...l
 }) => {
-  const [i, $] = a(!1), [d, h] = a(!1), [s, L] = a(!1), p = () => $(!0), g = () => h(!0), w = () => L(!0), I = m ? i : d;
+  const [u, h] = a(!1), [d, $] = a(!1), [s, L] = a(!1), p = () => h(!0), g = () => $(!0), w = () => L(!0), I = m ? u : d;
   return /* @__PURE__ */ x(S, { $width: o(c), $height: o(f), $borderRadius: o(r), children: [
     !s && /* @__PURE__ */ t(j, { $loaded: I, children: /* @__PURE__ */ t(y, { borderRadius: r }) }),
-    m && n && !s && /* @__PURE__ */ t(
+    m && i && !s && /* @__PURE__ */ t(
       E,
       {
-        src: n,
+        src: i,
         alt: "",
         "aria-hidden": "true",
-        $lowLoaded: i,
+        $lowLoaded: u,
         $loaded: d,
         $borderRadius: o(r),
         onLoad: p
@@ -34,12 +34,13 @@ const o = (e) => {
       R,
       {
         src: e,
-        alt: l,
+        alt: n,
+        "aria-hidden": n === "" ? "true" : void 0,
         $loaded: d,
         $borderRadius: o(r),
         onLoad: g,
         onError: w,
-        ...u
+        ...l
       }
     )
   ] });

package/components/Input/FileUploader/FileUploader.js

@@ -1,22 +1,22 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
+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 B from "../../../colors/white.js";
+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 F from "../../../colors/grey.js";
-import H from "../../Icons/Link/Link.js";
-import P from "../../../colors/index.js";
-import Z from "../../Ripple/Ripple.js";
-import { SIZE as q, MEDIUM as A } from "./constants.js";
-const G = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m100, children: l }), oo = ({
-  label: e,
+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 = ({
+  label: t,
   labelColor: l,
   theme: p = x,
-  size: D = A,
+  size: D = G,
   width: s,
-  isLoading: t,
+  isLoading: e,
   disabled: r,
-  prefixIcon: c = H,
+  prefixIcon: c = P,
   suffixIcon: m,
   type: I = "file",
   accept: R,
@@ -24,37 +24,35 @@ const G = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
   onChange: z,
   ...K
 }) => {
-  const u = C(null), { m400: v, m500: E, m600: U } = P[p] ?? x, { height: h, width: a, font: n } = q[D] || {}, f = l || ["white", "yellow"].includes(p) ? F.m600 : B, $ = C(0), w = /* @__PURE__ */ g(
+  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,
     {
-      $selectedColor: v,
-      $hoverColor: E,
-      $height: h,
-      $width: s || a,
-      $activeColor: U,
+      $selectedColor: g,
+      $hoverColor: v,
+      $height: u,
+      $width: s || $,
+      $activeColor: E,
       disabled: r,
-      $isLoading: t,
-      role: "button",
+      $isLoading: e,
       tabIndex: 0,
       "aria-disabled": r,
-      "aria-busy": t,
       onKeyDown: (i) => {
-        var d;
+        var w;
         if (i.key === "Enter" || i.key === " ") {
           i.preventDefault();
           const y = Date.now();
-          if (y - $.current < 500) {
+          if (y - a.current < 500) {
             i.stopPropagation();
             return;
           }
-          $.current = y, !r && !t && ((d = u.current) == null || d.click());
+          a.current = y, !r && !e && ((w = h.current) == null || w.click());
         }
       },
       children: [
         /* @__PURE__ */ o(
           W,
           {
-            ref: u,
+            ref: h,
             type: I,
             accept: R,
             multiple: k,
@@ -65,15 +63,15 @@ const G = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
         ),
         c && /* @__PURE__ */ o(c, { color: f, size: n + 19 }),
         /* @__PURE__ */ o(
-          b,
+          B,
           {
             color: f,
             size: `${n}rem`,
             $prefixIcon: !!c,
             $suffixIcon: !!m,
             $iconSize: n + 19,
-            title: e,
-            children: e
+            title: t,
+            children: t
           }
         ),
         m && /* @__PURE__ */ o(m, { color: f, size: n + 19 })
@@ -83,12 +81,12 @@ const G = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
   return /* @__PURE__ */ o(
     j,
     {
-      $height: h,
-      $width: s || a,
+      $height: u,
+      $width: s || $,
       disabled: r,
-      $isLoading: t,
+      $isLoading: e,
       ...K,
-      children: t || r ? w : /* @__PURE__ */ o(G, { theme: p, children: w })
+      children: e || r ? d : /* @__PURE__ */ o(J, { theme: p, children: d })
     }
   );
 };

package/components/OtpInput/OtpInput.js

@@ -1,59 +1,51 @@
-import { jsx as A } from "react/jsx-runtime";
-import { useState as E, useRef as y, useEffect as I } from "react";
-import { OTPWrapper as P } from "./styles.js";
+import { jsx as E } from "react/jsx-runtime";
+import { useState as I, useRef as y, useEffect as P } from "react";
+import { OTPWrapper as j } from "./styles.js";
 import { renderNums as b } from "./helpers.js";
-const B = ({ length: r = 6, value: p = "", onChange: u, onComplete: e, ...O }) => {
-  const [a, D] = E(Array(r).fill("")), d = y([]), w = y(a), o = y(!1), f = (s) => {
+const B = ({ length: s = 6, value: p = "", onChange: n, onComplete: e, ...O }) => {
+  const [a, D] = I(Array(s).fill("")), d = y([]), w = y(a), o = y(!1), f = (r) => {
     var t;
-    o.current = !0, (t = d.current[s]) == null || t.focus();
+    o.current = !0, (t = d.current[r]) == null || t.focus();
   };
-  I(() => {
+  P(() => {
     if (!p) return;
-    const s = String(p).replace(/\D/g, "").slice(0, r), t = s.split("");
-    for (; t.length < r; ) t.push("");
-    D(t), s.length === r && (e == null || e(s));
-  }, [p, r, e]);
-  const l = (s) => {
-    w.current = s, D(s);
-    const t = s.join("");
-    u == null || u(t), t.length === r && (e == null || e(t));
-  }, k = (s, t) => {
-    s = s.replace(/\D/g, "").slice(-1);
+    const r = String(p).replace(/\D/g, "").slice(0, s), t = r.split("");
+    for (; t.length < s; ) t.push("");
+    D(t), r.length === s && (e == null || e(r));
+  }, [p, s, e]);
+  const l = (r) => {
+    w.current = r, D(r);
+    const t = r.join("");
+    n == null || n(t), t.length === s && (e == null || e(t));
+  }, k = (r, t) => {
+    r = r.replace(/\D/g, "").slice(-1);
     const c = [...a];
-    c[t] = s, l(c), s && t < r - 1 && f(t + 1);
-  }, m = (s, t) => {
-    const c = a.findIndex((n) => n === ""), i = c === -1 ? r - 1 : c;
-    if (s.key === "Backspace") {
-      if (s.preventDefault(), a[t]) {
-        const n = [...a];
-        n[t] = "", l(n);
+    c[t] = r, l(c), r && t < s - 1 && f(t + 1);
+  }, m = (r, t) => {
+    const c = a.findIndex((u) => u === ""), i = c === -1 ? s - 1 : c;
+    if (r.key === "Backspace") {
+      if (r.preventDefault(), a[t]) {
+        const u = [...a];
+        u[t] = "", l(u);
       }
       t > 0 && f(t - 1);
-    } else s.key === "ArrowLeft" && t > 0 ? (s.preventDefault(), f(t - 1)) : s.key === "ArrowRight" ? (s.preventDefault(), t + 1 <= i && f(t + 1)) : s.key === "Tab" && (s.preventDefault(), s.shiftKey ? t > 0 && f(t - 1) : f(i));
-  }, R = (s) => {
+    } else r.key === "ArrowLeft" && t > 0 ? (r.preventDefault(), f(t - 1)) : r.key === "ArrowRight" ? (r.preventDefault(), t + 1 <= i && f(t + 1)) : r.key === "Tab" && (r.preventDefault(), r.shiftKey ? t > 0 && f(t - 1) : f(i));
+  }, R = (r) => {
     if (o.current) {
       o.current = !1;
       return;
     }
-    const t = w.current.findIndex((i) => i === ""), c = t === -1 ? r - 1 : t;
-    s !== c && f(c);
+    const t = w.current.findIndex((i) => i === ""), c = t === -1 ? s - 1 : t;
+    r !== c && f(c);
   };
-  return /* @__PURE__ */ A(
-    P,
-    {
-      style: { display: "flex", gap: "10px", justifyContent: "center" },
-      onPaste: (s) => {
-        const t = s.clipboardData.getData("text").replace(/\D/g, "");
-        if (!t) return;
-        const c = Array(r).fill("");
-        t.slice(0, r).split("").forEach((n, j) => c[j] = n), l(c);
-        const i = Math.min(t.length - 1, r - 1);
-        f(i);
-      },
-      ...O,
-      children: a.map(b({ inputsRef: d, handleChange: k, handleKeyDown: m, handleFocus: R }))
-    }
-  );
+  return /* @__PURE__ */ E(j, { onPaste: (r) => {
+    const t = r.clipboardData.getData("text").replace(/\D/g, "");
+    if (!t) return;
+    const c = Array(s).fill("");
+    t.slice(0, s).split("").forEach((u, A) => c[A] = u), l(c);
+    const i = Math.min(t.length - 1, s - 1);
+    f(i);
+  }, ...O, children: a.map(b({ inputsRef: d, handleChange: k, handleKeyDown: m, handleFocus: R, length: s })) });
 };
 export {
   B as default

package/components/OtpInput/helpers.js

@@ -1,31 +1,33 @@
 import { jsx as m } from "react/jsx-runtime";
-import { Input as a } from "./styles.js";
-const s = (o, t) => (n) => {
+import { Input as s } from "./styles.js";
+const g = (o, t) => (n) => {
   o(n.target.value, t);
-}, p = (o, t) => (n) => o(n, t), g = ({ inputsRef: o, handleChange: t, handleKeyDown: n, handleFocus: r, digit: u, index: e }) => /* @__PURE__ */ m(
-  a,
+}, l = (o, t) => (n) => o(n, t), p = ({ inputsRef: o, handleChange: t, handleKeyDown: n, handleFocus: a, digit: u, index: e, length: r }) => /* @__PURE__ */ m(
+  s,
   {
     ref: (c) => o.current[e] = c,
     maxLength: 1,
     inputMode: "numeric",
     autoComplete: "one-time-code",
+    "aria-label": `Digit ${e + 1} of ${r}`,
     value: u,
-    onChange: s(t, e),
-    onKeyDown: p(n, e),
-    onFocus: () => r(e)
+    onChange: g(t, e),
+    onKeyDown: l(n, e),
+    onFocus: () => a(e)
   },
   `key-${e}`
-), y = ({ inputsRef: o, handleChange: t, handleKeyDown: n, handleFocus: r }) => (u, e) => /* @__PURE__ */ m(
-  g,
+), y = ({ inputsRef: o, handleChange: t, handleKeyDown: n, handleFocus: a, length: u }) => (e, r) => /* @__PURE__ */ m(
+  p,
   {
     inputsRef: o,
     handleChange: t,
     handleKeyDown: n,
-    handleFocus: r,
-    digit: u,
-    index: e
+    handleFocus: a,
+    digit: e,
+    index: r,
+    length: u
   },
-  `otp-num-${e}`
+  `otp-num-${r}`
 );
 export {
   y as renderNums

package/components/OtpInput/styles.js

@@ -3,7 +3,7 @@ import e from "../../colors/grey.js";
 const m = r.div`
   display: flex;
   align-items: center;
-  gap: 0.64rem;
+  gap: 1rem;
 
   @media screen and (max-width: 768px) {\
     gap: 0.32rem;

package/components/Toast/Toast.js

@@ -1,22 +1,22 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as i, useRef as h, useEffect as R, createElement as N } from "react";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as l, useRef as h, useEffect as R, createElement as N } from "react";
 import { createPortal as b } from "react-dom";
 import { Logo as j } from "./helpers.js";
 import k from "../../colors/grey.js";
-import { COLOR_MAP as y, INFO as A, INFO_COLORS as B, ERROR as M } from "./constants.js";
+import { COLOR_MAP as y, INFO as A, INFO_COLORS as B, ERROR as v } from "./constants.js";
 import { ToastWrapper as D, Message as I, Title as W, Subtitle as _, CloseButtonContainer as z, ProgressRing as q, CloseWrapper as G, ToastsContainer as H } from "./styles.js";
-const w = () => {
+const x = () => {
 }, ee = ({ toasts: e, ...r }) => {
-  const [o, s] = i(e);
+  const [o, s] = l(e);
   R(() => {
     s(e);
   }, [e]);
-  const l = ({ type: a, id: u, title: m, subtitle: n, onExpire: d = w }, f) => /* @__PURE__ */ N(J, { type: a, title: m, subtitle: n, key: u, onExpire: d });
+  const u = ({ type: a, id: m, title: d, subtitle: n, duration: f, onExpire: c = x }, C) => /* @__PURE__ */ N(J, { type: a, title: d, subtitle: n, duration: f, key: m, onExpire: c });
   return b(
-    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(l) }),
+    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(u) }),
     document.body
   );
-}, v = (e, r, o) => () => {
+}, w = (e, r, o) => () => {
   e(!0), setTimeout(() => {
     r(!1), o();
   }, 500);
@@ -24,49 +24,49 @@ const w = () => {
   type: e = A,
   visible: r = !0,
   duration: o = 5,
-  onExpire: s = w,
-  title: l,
+  onExpire: s = x,
+  title: u,
   subtitle: a,
-  ...u
+  ...m
 }) => {
-  const [m, n] = i(r), [d, f] = i(!1), [x, C] = i(!1), T = h(null), p = h((o - 0.5) * 1e3), O = h(null), g = (F) => {
-    O.current = Date.now(), T.current = setTimeout(v(f, n, s), F);
+  const [d, n] = l(r), [f, c] = l(!1), [C, O] = l(!1), T = h(null), p = h((o - 0.5) * 1e3), g = h(null), $ = (F) => {
+    g.current = Date.now(), T.current = setTimeout(w(c, n, s), F);
   };
   R(() => {
     n(r);
-  }, [r]), R(() => (g(p.current), () => clearTimeout(T.current)), []);
+  }, [r]), R(() => ($(p.current), () => clearTimeout(T.current)), []);
   const L = () => {
-    clearTimeout(T.current), p.current -= Date.now() - O.current, C(!0);
+    clearTimeout(T.current), p.current -= Date.now() - g.current, O(!0);
   }, E = () => {
-    C(!1), g(p.current);
-  }, { main: $, side: P, bg: S } = y[e] ?? B;
-  if (m)
-    return /* @__PURE__ */ c(
+    O(!1), $(p.current);
+  }, { main: M, side: P, bg: S } = y[e] ?? B;
+  if (d)
+    return /* @__PURE__ */ i(
       D,
       {
         $bg: S,
-        role: e === M ? "alert" : "status",
-        "aria-live": e === M ? "assertive" : "polite",
+        role: e === v ? "alert" : "status",
+        "aria-live": e === v ? "assertive" : "polite",
         "aria-atomic": "true",
-        className: `${d ? "fade-out" : "fade-in"}`,
+        className: `${f ? "fade-out" : "fade-in"}`,
         onMouseEnter: L,
         onMouseLeave: E,
-        ...u,
+        ...m,
         children: [
-          /* @__PURE__ */ t(j, { type: e, $main: $, $side: P }),
-          /* @__PURE__ */ c(I, { children: [
-            /* @__PURE__ */ t(W, { children: l }),
+          /* @__PURE__ */ t(j, { type: e, $main: M, $side: P }),
+          /* @__PURE__ */ i(I, { children: [
+            /* @__PURE__ */ t(W, { children: u }),
             a && /* @__PURE__ */ t(_, { children: a })
           ] }),
-          /* @__PURE__ */ c(z, { children: [
-            /* @__PURE__ */ c(
+          /* @__PURE__ */ i(z, { children: [
+            /* @__PURE__ */ i(
               q,
               {
                 "aria-hidden": "true",
                 viewBox: "0 0 28 28",
                 $duration: o,
-                $color: $,
-                $paused: x,
+                $color: M,
+                $paused: C,
                 children: [
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" }),
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" })
@@ -79,7 +79,7 @@ const w = () => {
                 "aria-label": "Close notification",
                 size: 13,
                 color: k.m600,
-                onClick: v(f, n, s)
+                onClick: w(c, n, s)
               }
             )
           ] })

package/components/Toast/helpers.js

@@ -1,19 +1,19 @@
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { WARNING as e, ERROR as t, SUCCESS as n } from "./constants.js";
-import c from "../Icons/Close/Close.js";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { WARNING as n, ERROR as t, SUCCESS as s } from "./constants.js";
+import g from "../Icons/Close/Close.js";
 import l from "../Icons/Check/Check.js";
 import u from "../Icons/Info/Info.js";
-import g from "../Icons/WarningTriangleFilled/WarningTriangleFilled.js";
-import C from "../../colors/white.js";
-import { Outer as d, OuterChild as h, LogoContainer as z, Icon as I } from "./styles.js";
-const L = (r, o) => r === t ? /* @__PURE__ */ i(c, { size: 16, color: o }) : r === n ? /* @__PURE__ */ i(l, { size: 18, color: o }) : r === e ? /* @__PURE__ */ i(g, { size: 28, color: C }) : /* @__PURE__ */ i(u, { size: 22, color: o }), R = (r) => r === t ? 1.6 : r === n ? 1.76 : r === e ? 2.8 : 2.08, W = ({ type: r, $main: o, $side: f }) => {
-  const m = L(r, o);
-  return /* @__PURE__ */ s(d, { "aria-hidden": "true", $side: f, children: [
-    /* @__PURE__ */ i(h, { $main: o }),
-    r !== e && /* @__PURE__ */ i(z, { $main: o, type: r }),
-    /* @__PURE__ */ i(I, { size: R(r), children: m })
+import C from "../Icons/WarningTriangleFilled/WarningTriangleFilled.js";
+import d from "../../colors/white.js";
+import { Outer as h, OuterChild as z, LogoContainer as a, Icon as I } from "./styles.js";
+const L = (r, o) => r === t ? /* @__PURE__ */ i(g, { size: 16, color: o }) : r === s ? /* @__PURE__ */ i(l, { size: 18, color: o }) : r === n ? /* @__PURE__ */ i(C, { size: 28, color: d }) : /* @__PURE__ */ i(u, { size: 22, color: o }), R = (r) => r === t ? 1.6 : r === s ? 1.76 : r === n ? 2.8 : 2.08, k = ({ type: r, $main: o, $side: f }) => {
+  const m = L(r, o), e = r === n;
+  return /* @__PURE__ */ c(h, { "aria-hidden": "true", $side: f, children: [
+    /* @__PURE__ */ i(z, { $main: o }),
+    !e && /* @__PURE__ */ i(a, { $main: o, type: r }),
+    /* @__PURE__ */ i(I, { size: R(r), $isWarning: e, children: m })
   ] });
 };
 export {
-  W as Logo
+  k as Logo
 };

package/components/Toast/styles.js

@@ -89,9 +89,9 @@ const a = r`
     width: 4.8rem;
     height: 4.8rem;
   }
-`, y = t.div`
+`, $ = t.div`
   position: absolute;
-  top: 50%;
+  top: ${({ $isWarning: e }) => e ? "49%" : "50%"};
   left: 50%;
   transform: translate(-50%, -50%);
   width: ${({ size: e }) => e}rem;
@@ -103,10 +103,13 @@ const a = r`
   @media screen and (max-width: 768px) {
     top: 42.8%;
     left: 42.8%;
-    transform: translate(-42.8%, -42.8%);
+    transform: translate(
+      ${({ $isWarning: e }) => e ? "-45.8%" : "-42.8%"},
+      ${({ $isWarning: e }) => e ? "-50.8%" : "-42.8%"}
+    );
     scale: 0.75;
   }
-`, $ = t.div`
+`, y = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -179,11 +182,11 @@ const a = r`
 export {
   v as CloseButtonContainer,
   C as CloseWrapper,
-  y as Icon,
+  $ as Icon,
   x as LogoContainer,
   z as Message,
   b as Outer,
-  $ as OuterChild,
+  y as OuterChild,
   k as ProgressRing,
   I as Subtitle,
   R as Title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",