meticulous-ui 1.1.8 → 1.2.0

package/components/Toast/styles.js

@@ -1,9 +1,9 @@
-import o, { keyframes as s, css as e } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import r, { keyframes as d, css as o } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import i from "../../colors/white.js";
 import n from "../Icons/Close/Close.js";
-import a from "../../colors/grey.js";
-import { WARNING as d } from "./constants.js";
-const m = s`
+import s from "../../colors/grey.js";
+import { WARNING as a } from "./constants.js";
+const m = d`
   from {
     opacity: 0;
     transform: translateX(100%); /* Start off-screen to the right */
@@ -12,7 +12,7 @@ const m = s`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`, l = s`
+`, h = d`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -22,21 +22,21 @@ const m = s`
     transform: translateX(100%); /* Move off-screen to the right */
   }
 `;
-o.div`
+r.div`
   position: fixed;
   top: 1rem;
-  right: 2rem;
+  right: 1rem;
   z-index: 9999;
 
   display: flex;
   flex-direction: column;
   gap: 1rem;
 `;
-const u = o.div`
+const w = r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${({ $bg: t }) => t};
+  background-color: ${({ $bg: e }) => e};
   height: 4.8rem;
   width: 28rem;
   border-radius: 0.8rem;
@@ -51,42 +51,77 @@ const u = o.div`
 
   &.fade-out {
     opacity: 0;
-    animation: ${l} 0.5s ease-in forwards; /* slide right */
+    animation: ${h} 0.5s ease-in forwards; /* slide right */
   }
-`, b = o.div`
+
+  @media screen and (max-width: 768px) {
+    height: 3.6rem;
+    width: 21rem;
+    border-radius: 0.6rem;
+    padding: 0.3rem 0.8rem;
+  }
+`, x = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: ${i};
 
-  ${({ type: t, $main: r }) => t === d ? e`
+  ${({ type: e, $main: t }) => e === a ? o`
           top: 48%;
-          border-color: ${r} ${r} ${i} ${r};
+          border-color: ${t} ${t} ${i} ${t};
           border-style: solid;
           border-width: 0 0.9rem 1.4rem 0.9rem;
           height: 0;
           width: 0;
-        ` : e`
+        ` : o`
           top: 50%;
           width: 1.8rem;
           height: 1.8rem;
           border-radius: 50%;
         `}
-`, w = o.div`
+
+  @media screen and (max-width: 768px) {
+    ${({ type: e, $main: t }) => e === a ? o`
+            top: 48%;
+            border-color: ${t} ${t} ${i} ${t};
+            border-style: solid;
+            border-width: 0 0.7rem 1.05rem 0.68rem;
+            height: 0;
+            width: 0;
+          ` : o`
+            top: 50%;
+            width: 1.35rem;
+            height: 1.35rem;
+            border-radius: 50%;
+          `}
+  }
+`, b = r.div`
   position: relative;
   width: 4rem;
   height: 4rem;
   border-radius: 50%;
-  background-color: ${({ $side: t }) => t};
-`, y = o.div`
+  background-color: ${({ $side: e }) => e};
+
+  @media screen and (max-width: 768px) {
+    width: 3rem;
+    height: 3rem;
+  }
+`, u = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: ${({ size: t }) => t}rem;
-  height: ${({ size: t }) => t}rem;
-`, $ = o.div`
+  width: ${({ size: e }) => e}rem;
+  height: ${({ size: e }) => e}rem;
+
+  @media screen and (max-width: 768px) {
+    top: 42.8%;
+    left: 42.8%;
+    transform: translate(-42.8%, -42.8%);
+    scale: 0.75;
+  }
+`, $ = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -94,31 +129,40 @@ const u = o.div`
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
-  background-color: ${({ $main: t }) => t};
-`, v = o(n)`
+  background-color: ${({ $main: e }) => e};
+
+  @media screen and (max-width: 768px) {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+`, y = r(n)`
   cursor: pointer;
-`, x = o.div`
+`, v = r.div`
   font-weight: 600;
   font-size: 1.2rem;
-  color: ${a.m800};
-`, k = o.div`
+  color: ${s.m800};
+`, k = r.div`
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   width: 21rem;
-`, C = o.div`
+
+  @media screen and (max-width: 768px) {
+    width: 15rem;
+  }
+`, C = r.div`
   font-weight: 400;
   font-size: 1rem;
-  color: ${a.m700};
+  color: ${s.m700};
 `;
 export {
-  v as CloseWrapper,
-  y as Icon,
-  b as LogoContainer,
+  y as CloseWrapper,
+  u as Icon,
+  x as LogoContainer,
   k as Message,
-  w as Outer,
+  b as Outer,
   $ as OuterChild,
   C as Subtitle,
-  x as Title,
-  u as ToastWrapper
+  v as Title,
+  w as ToastWrapper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {