meticulous-ui 3.0.3 → 3.0.4

package/components/Icons/WarningTriangleFilled/index.js

@@ -0,0 +1,4 @@
+import a from "./WarningTriangleFilled.js";
+export {
+  a as default
+};

package/components/Toast/helpers.js

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

package/components/Toast/styles.js

@@ -1,15 +1,14 @@
-import t, { keyframes as o, css as i } from "styled-components";
+import t, { keyframes as r } from "styled-components";
 import s from "../../colors/white.js";
-import m from "../Icons/Close/Close.js";
-import d from "../../colors/grey.js";
-import { WARNING as n } from "./constants.js";
-const l = o`
+import n from "../Icons/Close/Close.js";
+import i from "../../colors/grey.js";
+const a = r`
   from { transform: scale(0); }
   to   { transform: scale(1); }
-`, c = o`
+`, d = r`
   from { transform: translate(-50%, -50%) scale(0); }
   to   { transform: translate(-50%, -50%) scale(1); }
-`, h = o`
+`, m = r`
   from {
     opacity: 0;
     transform: translateX(100%); /* Start off-screen to the right */
@@ -18,7 +17,7 @@ const l = o`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`, f = o`
+`, c = r`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -27,7 +26,7 @@ const l = o`
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`, $ = t.div`
+`, u = t.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -36,7 +35,7 @@ const l = o`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`, y = t.div`
+`, w = t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -50,12 +49,12 @@ const l = o`
 
   &.fade-in {
     opacity: 1;
-    animation: ${h} 0.5s ease-out forwards; /* slide down + fade */
+    animation: ${m} 0.5s ease-out forwards; /* slide down + fade */
   }
 
   &.fade-out {
     opacity: 0;
-    animation: ${f} 0.5s ease-in forwards; /* slide right */
+    animation: ${c} 0.5s ease-in forwards; /* slide right */
   }
 
   @media screen and (max-width: 768px) {
@@ -64,61 +63,42 @@ const l = o`
     border-radius: 0.96rem;
     padding: 0.48rem 1.28rem;
   }
-`, v = t.div`
+`, x = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: ${s};
-
-  ${({ type: e, $main: r }) => e === n ? i`
-          top: 48%;
-          border-color: ${r} ${r} ${s} ${r};
-          border-style: solid;
-          border-width: 0 1.44rem 2.24rem 1.44rem;
-          height: 0;
-          width: 0;
-        ` : i`
-          top: 50%;
-          width: 2.88rem;
-          height: 2.88rem;
-          border-radius: 50%;
-        `}
+  width: 2.88rem;
+  height: 2.88rem;
+  border-radius: 50%;
 
   @media screen and (max-width: 768px) {
-    ${({ type: e, $main: r }) => e === n ? i`
-            top: 48%;
-            border-color: ${r} ${r} ${s} ${r};
-            border-style: solid;
-            border-width: 0 1.12rem 1.68rem 1.088rem;
-            height: 0;
-            width: 0;
-          ` : i`
-            top: 50%;
-            width: 2.16rem;
-            height: 2.16rem;
-            border-radius: 50%;
-          `}
+    width: 2.16rem;
+    height: 2.16rem;
   }
-`, k = t.div`
+`, b = t.div`
   position: relative;
   width: 6.4rem;
   height: 6.4rem;
   border-radius: 50%;
   background-color: ${({ $side: e }) => e};
-  animation: ${l} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
+  animation: ${a} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
 
   @media screen and (max-width: 768px) {
     width: 4.8rem;
     height: 4.8rem;
   }
-`, C = t.div`
+`, y = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: ${({ size: e }) => e}rem;
   height: ${({ size: e }) => e}rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   @media screen and (max-width: 768px) {
     top: 42.8%;
@@ -126,7 +106,7 @@ const l = o`
     transform: translate(-42.8%, -42.8%);
     scale: 0.75;
   }
-`, R = t.div`
+`, $ = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -135,16 +115,16 @@ const l = o`
   height: 4.8rem;
   border-radius: 50%;
   background-color: ${({ $main: e }) => e};
-  animation: ${c} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
+  animation: ${d} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
 
   @media screen and (max-width: 768px) {
     width: 3.6rem;
     height: 3.6rem;
   }
-`, a = 75.4, p = o`
-  from { stroke-dashoffset: ${a}; }
+`, o = 75.4, l = r`
+  from { stroke-dashoffset: ${o}; }
   to   { stroke-dashoffset: 0; }
-`, z = t.div`
+`, v = t.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -152,7 +132,7 @@ const l = o`
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
-`, I = t.svg`
+`, k = t.svg`
   position: absolute;
   inset: 0;
   transform: rotate(-90deg);
@@ -163,7 +143,7 @@ const l = o`
     stroke: ${({ $color: e }) => e};
     stroke-width: 2;
     stroke-linecap: round;
-    stroke-dasharray: ${a};
+    stroke-dasharray: ${o};
   }
 
   circle:first-child {
@@ -172,17 +152,17 @@ const l = o`
   }
 
   circle:last-child {
-    stroke-dashoffset: ${a};
-    animation: ${p} ${({ $duration: e }) => e - 0.5}s linear forwards;
+    stroke-dashoffset: ${o};
+    animation: ${l} ${({ $duration: e }) => e - 0.5}s linear forwards;
     animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
   }
-`, G = t(m)`
+`, C = t(n)`
   cursor: pointer;
-`, M = t.div`
+`, R = t.div`
   font-weight: 600;
   font-size: 1.92rem;
-  color: ${d.m800};
-`, N = t.div`
+  color: ${i.m800};
+`, z = t.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -191,22 +171,22 @@ const l = o`
   @media screen and (max-width: 768px) {
     width: 24rem;
   }
-`, X = t.div`
+`, I = t.div`
   font-weight: 400;
   font-size: 1.6rem;
-  color: ${d.m700};
+  color: ${i.m700};
 `;
 export {
-  z as CloseButtonContainer,
-  G as CloseWrapper,
-  C as Icon,
-  v as LogoContainer,
-  N as Message,
-  k as Outer,
-  R as OuterChild,
-  I as ProgressRing,
-  X as Subtitle,
-  M as Title,
-  y as ToastWrapper,
-  $ as ToastsContainer
+  v as CloseButtonContainer,
+  C as CloseWrapper,
+  y as Icon,
+  x as LogoContainer,
+  z as Message,
+  b as Outer,
+  $ as OuterChild,
+  k as ProgressRing,
+  I as Subtitle,
+  R as Title,
+  w as ToastWrapper,
+  u as ToastsContainer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "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",