meticulous-ui 2.9.4 → 3.0.0

package/components/Pagination/Pagination.js

@@ -1,94 +1,94 @@
 import { jsxs as l, jsx as f } from "react/jsx-runtime";
-import { useRef as E, useEffect as K } from "react";
-import { PrevArrow as M, renderPageNum as d, NextArrow as R, renderThreeDots as $ } from "./helpers.js";
-import a from "../../colors/index.js";
-import j from "../../colors/teal.js";
-import { ICON_SIZE_MAPPING as G, MEDIUM as L, SIZE_REM_MAPPING as P } from "./constants.js";
-import { AllPages as u, MiddleLayer as v } from "./styles.js";
-const B = ({
+import { useRef as S, useEffect as u } from "react";
+import { PrevArrow as M, renderPageNum as t, NextArrow as R, renderThreeDots as $ } from "./helpers.js";
+import j from "../../colors/index.js";
+import G from "../../colors/teal.js";
+import { ICON_SIZE_MAPPING as L, MEDIUM as U, SIZE_REM_MAPPING as Z } from "./constants.js";
+import { AllPages as v, MiddleLayer as x } from "./styles.js";
+const F = ({
   pageNumber: r,
-  setPageNumber: S,
+  setPageNumber: _,
   totalPages: n,
-  theme: _ = "lime",
-  size: o = L,
+  theme: K = "lime",
+  size: o = U,
   isDisabled: D = !1,
-  ...x
+  ...E
 }) => {
-  const s = E(null), h = E(!1);
-  K(() => {
-    var i, w;
-    h.current && (h.current = !1, (w = (i = s.current) == null ? void 0 : i.querySelector('[aria-current="page"]')) == null || w.focus());
+  const s = S(null), h = S(!1);
+  u(() => {
+    var c, m;
+    h.current && (h.current = !1, (m = (c = s.current) == null ? void 0 : c.querySelector('[aria-current="page"]')) == null || m.focus());
   }, [r]);
-  const c = (i) => {
-    i !== r && S(i);
+  const e = (c) => {
+    c !== r && _(c);
   }, A = () => {
-    r > 1 && c(r - 1);
-  }, m = () => {
-    r < n && c(r + 1);
-  }, y = (i) => {
-    ["ArrowLeft", "ArrowUp"].includes(i.code) && (h.current = !0, A()), ["ArrowRight", "ArrowDown"].includes(i.code) && (h.current = !0, m());
-  }, e = a[_] ?? j, I = P[o], t = G[o];
+    r > 1 && e(r - 1);
+  }, w = () => {
+    r < n && e(r + 1);
+  }, y = (c) => {
+    ["ArrowLeft", "ArrowUp"].includes(c.code) && (h.current = !0, A()), ["ArrowRight", "ArrowDown"].includes(c.code) && (h.current = !0, w());
+  }, i = j[K] ?? G, I = Z[o], d = L[o];
   return n <= 7 ? /* @__PURE__ */ l(
-    u,
+    v,
     {
       ref: s,
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
-      ...x,
+      ...E,
       children: [
-        /* @__PURE__ */ f(M, { iconSize: t, shades: e, setPrevPage: A }),
-        /* @__PURE__ */ f(v, { size: `${n * I}rem`, children: Array.from({ length: n }, (i, w) => w + 1).map(
-          d({ size: o, selected: r, shades: e, changePage: c })
+        /* @__PURE__ */ f(M, { iconSize: d, shades: i, setPrevPage: A }),
+        /* @__PURE__ */ f(x, { size: `${n * I}rem`, children: Array.from({ length: n }, (c, m) => m + 1).map(
+          t({ size: o, selected: r, shades: i, changePage: e })
         ) }),
-        /* @__PURE__ */ f(R, { iconSize: t, shades: e, setNextPage: m })
+        /* @__PURE__ */ f(R, { iconSize: d, shades: i, setNextPage: w })
       ]
     }
   ) : n < 10 || r < 4 || r > n - 3 && r <= n ? /* @__PURE__ */ l(
-    u,
+    v,
     {
       ref: s,
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
-      ...x,
+      ...E,
       children: [
-        /* @__PURE__ */ f(M, { iconSize: t, shades: e, setPrevPage: A }),
-        /* @__PURE__ */ l(v, { size: `${9 * I}rem`, children: [
-          [1, 2, 3, 4].map(d({ size: o, selected: r, shades: e, changePage: c })),
+        /* @__PURE__ */ f(M, { iconSize: d, shades: i, setPrevPage: A }),
+        /* @__PURE__ */ l(x, { size: `${9 * I}rem`, children: [
+          [1, 2, 3, 4].map(t({ size: o, selected: r, shades: i, changePage: e })),
           $(),
           [n - 3, n - 2, n - 1, n].map(
-            d({ size: o, selected: r, shades: e, changePage: c })
+            t({ size: o, selected: r, shades: i, changePage: e })
           )
         ] }),
-        /* @__PURE__ */ f(R, { iconSize: t, shades: e, setNextPage: m })
+        /* @__PURE__ */ f(R, { iconSize: d, shades: i, setNextPage: w })
       ]
     }
   ) : /* @__PURE__ */ l(
-    u,
+    v,
     {
       ref: s,
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
       children: [
-        /* @__PURE__ */ f(M, { iconSize: t, shades: e, setPrevPage: A }),
-        /* @__PURE__ */ l(v, { size: `${9 * I}rem`, children: [
-          [1, 2].map(d({ size: o, selected: r, shades: e, changePage: c })),
-          $(),
+        /* @__PURE__ */ f(M, { iconSize: d, shades: i, setPrevPage: A }),
+        /* @__PURE__ */ l(x, { size: `${9 * I}rem`, children: [
+          [1, 2].map(t({ size: o, selected: r, shades: i, changePage: e })),
+          r > 4 && $(),
           [r - 1, r, r + 1].map(
-            d({ size: o, selected: r, shades: e, changePage: c })
+            t({ size: o, selected: r, shades: i, changePage: e })
           ),
-          $(),
+          r < n - 3 && $(),
           [n - 1, n].map(
-            d({ size: o, selected: r, shades: e, changePage: c })
+            t({ size: o, selected: r, shades: i, changePage: e })
           )
         ] }),
-        /* @__PURE__ */ f(R, { iconSize: t, shades: e, setNextPage: m })
+        /* @__PURE__ */ f(R, { iconSize: d, shades: i, setNextPage: w })
       ]
     }
   );
 };
 export {
-  B as default
+  F as default
 };

package/components/Pagination/constants.js

@@ -1,15 +1,15 @@
 const _ = "small", I = "medium", E = "large", M = {
-  [_]: 1.9,
-  [I]: 2.6,
-  [E]: 3.1
+  [_]: 3.4,
+  [I]: 4.2,
+  [E]: 5
 }, S = {
-  [_]: 1,
-  [I]: 1.2,
-  [E]: 1.4
+  [_]: 1.5,
+  [I]: 1.7,
+  [E]: 1.9
 }, L = {
-  [_]: 18,
-  [I]: 19,
-  [E]: 20
+  [_]: 23,
+  [I]: 25,
+  [E]: 27
 }, t = "selected_bg", N = "not_selected_bg", A = "active_not_selected_bg";
 export {
   A as ACTIVE_NOT_SELECTED_BG,

package/components/Pagination/styles.js

@@ -1,10 +1,10 @@
 import e, { css as n } from "styled-components";
-import m from "../Icons/ChevronLeft/ChevronLeft.js";
+import u from "../Icons/ChevronLeft/ChevronLeft.js";
 import f from "../Icons/ChevronRight/ChevronRight.js";
 import s from "../../colors/grey.js";
 import l from "../../colors/white.js";
 import p from "../../colors/black.js";
-import { SELECTED_BG as i, NOT_SELECTED_BG as c, ACTIVE_NOT_SELECTED_BG as u } from "./constants.js";
+import { SELECTED_BG as i, NOT_SELECTED_BG as c, ACTIVE_NOT_SELECTED_BG as m } from "./constants.js";
 const t = (o) => ({ $shades: r }) => {
   if (["#FFFFFF"].includes(r))
     return p.m900;
@@ -12,7 +12,7 @@ const t = (o) => ({ $shades: r }) => {
     return r.m600;
   if (o === c)
     return r.m50;
-  if (o === u)
+  if (o === m)
     return r.m100;
 }, E = e.nav`
   display: flex;
@@ -58,7 +58,7 @@ const t = (o) => ({ $shades: r }) => {
           }
 
           &:active {
-            background-color: ${t(u)};
+            background-color: ${t(m)};
             color: ${l};
           }
 
@@ -67,7 +67,8 @@ const t = (o) => ({ $shades: r }) => {
           }
         `}
 `, C = e.span`
-  color: ${s.m500};
+  color: ${s.m700};
+  font-size: 1.4rem;
   user-select: none;
 `, h = e.button`
   border: none;
@@ -83,7 +84,7 @@ const t = (o) => ({ $shades: r }) => {
   &:focus-visible {
     outline: 1px solid ${({ $shades: o }) => o == null ? void 0 : o.m600};
   }
-`, k = e(m)`
+`, k = e(u)`
   cursor: pointer;
 `, w = e(f)`
   cursor: pointer;

package/components/RootComponent/RootComponent.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Root as m } from "./styles.js";
+const p = ({ children: o, ...t }) => /* @__PURE__ */ r(m, { ...t, children: o });
+export {
+  p as default
+};

package/components/RootComponent/index.js

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

package/components/RootComponent/styles.js

@@ -0,0 +1,8 @@
+import t from "styled-components";
+const e = t.div`
+  font-size: 62.5%;
+  -webkit-text-size-adjust: 100%;
+`;
+export {
+  e as Root
+};

package/components/Selectbox/Selectbox.js

@@ -18,8 +18,8 @@ const ye = (o) => {
   options: o,
   onChange: E,
   value: c = [],
-  width: f = "20rem",
-  menuHeight: F = "20rem",
+  width: f = "32rem",
+  menuHeight: F = "32rem",
   placeholder: q,
   theme: N = "blue",
   isDisabled: m,
@@ -136,7 +136,7 @@ const ye = (o) => {
         role: "option",
         "aria-selected": D,
         "aria-disabled": n || void 0,
-        $width: `calc(${f} + 1rem)`,
+        $width: `calc(${f} + 1.6rem)`,
         $isHighlighted: p === s,
         $isDisabled: n,
         $hoverColor: ee,
@@ -192,7 +192,7 @@ const ye = (o) => {
             "aria-disabled": m || void 0,
             "aria-activedescendant": s !== -1 ? Q(s) : void 0,
             children: [
-              /* @__PURE__ */ i(he, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: oe }),
+              /* @__PURE__ */ i(he, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.92rem", children: oe }),
               /* @__PURE__ */ i(be, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }

package/components/Selectbox/styles.js

@@ -25,12 +25,12 @@ const c = r.m500, l = i`
       opacity: 0.7;
     `}
 `, w = o.div`
-  height: 2rem;
+  height: 3.2rem;
   width: ${({ $width: e }) => e};
-  border-radius: 0.6rem;
+  border-radius: 0.96rem;
   outline: none;
   border: ${({ $isOpen: e, $isFocused: t, $border: m }) => e || t ? `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;
@@ -39,20 +39,20 @@ const c = r.m500, l = i`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({ $width: e }) => e} - 2rem);
+  max-width: calc(${({ $width: e }) => e} - 3.2rem);
   pointer-events: none;
 `, k = o(d)`
   animation: ${({ $isOpen: e }) => e ? l : g} 0.15s linear;
   transform: rotate(${({ $isOpen: e }) => e ? 180 : 0}deg);
 `, S = o.div`
   border: 1px solid ${r.m700};
-  width: calc(${({ $width: e }) => e} + 1rem);
+  width: calc(${({ $width: e }) => e} + 1.6rem);
   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;
@@ -66,14 +66,14 @@ const c = r.m500, l = i`
   ${({ $top: e }) => e ? n`
           bottom: 100%;
           flex-direction: column-reverse;
-          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;
         ` : n`
           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 = o.div`
   overflow-y: auto;
@@ -83,11 +83,11 @@ const c = r.m500, l = i`
   box-sizing: border-box;
   background-color: ${({ $isHighlighted: e, $hoverColor: t }) => e ? t : "transparent"};
   cursor: ${({ $isDisabled: e }) => e ? "not-allowed" : "pointer"};
-  padding: 0.6rem 1rem 0.8rem;
-  margin-top: 0.1rem;
+  padding: 0.96rem 1.6rem 1.28rem;
+  margin-top: 0.16rem;
   display: flex;
   align-items: center;
-  gap: 0.6rem;
+  gap: 0.96rem;
   pointer-events: ${({ $isDisabled: e }) => e ? "none" : "auto"};
 
   &:active {
@@ -107,8 +107,8 @@ const c = r.m500, l = i`
   width: 100%;
   box-sizing: border-box;
   border: none;
-  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: ${r.m700};
   background: transparent;
   outline: none;
@@ -117,17 +117,17 @@ const c = r.m500, l = i`
     color: ${r.m400};
   }
 `, B = o(p)`
-  margin: 0 0.8rem;
+  margin: 0 1.28rem;
 `, I = o.div`
   position: absolute;
-  top: 0.8rem;
-  right: 1.2rem;
+  top: 1.28rem;
+  right: 1.92rem;
 `, L = o.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/Shimmer/Shimmer.js

@@ -6,7 +6,7 @@ const e = (r) => {
 }, p = ({
   width: r = "100%",
   height: t = "100%",
-  borderRadius: o = "0.4rem",
+  borderRadius: o = "0.64rem",
   label: i = "Loading...",
   ...m
 }) => /* @__PURE__ */ n(

package/components/Spinner/Spinner.js

@@ -5,9 +5,9 @@ import d from "../../colors/green.js";
 import p from "../../colors/white.js";
 import c from "../../colors/grey.js";
 const g = {
-  small: { strokeWidth: 6, $length: "1rem" },
-  medium: { strokeWidth: 5, $length: "2rem" },
-  large: { strokeWidth: 5, $length: "3rem" }
+  small: { strokeWidth: 6, $length: "2.4rem" },
+  medium: { strokeWidth: 5, $length: "3.6rem" },
+  large: { strokeWidth: 5, $length: "5rem" }
 }, $ = ({ color: e = "green", size: o = "medium", ...n }) => {
   var t;
   const { strokeWidth: m, $length: r } = g[o], l = [p, c.m600].includes(e) ? e : (t = h[e] ?? d) == null ? void 0 : t.m500;

package/components/Timer/Timer.js

@@ -25,7 +25,7 @@ const c = () => {
   onTimerRemove: K = c,
   onTimerPause: q = c,
   onTimerPlay: J = c,
-  size: M = 20,
+  size: M = 30,
   ...Q
 }) => {
   const [S, V] = a(/* @__PURE__ */ new Date()), [s, T] = a(0), [m, $] = a(!1), [A, X] = a(Ce(o)), [Y, y] = a(0), [R, D] = a(!1), k = de(m), t = Math.round(M), P = Math.round(14 * M / 20);

package/components/Toast/helpers.js

@@ -4,7 +4,7 @@ import f from "../Icons/Close/Close.js";
 import m from "../Icons/Check/Check.js";
 import g from "../Icons/Info/Info.js";
 import { Outer as u, OuterChild as l, LogoContainer as C, Icon as z } 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(g, { size: 22, color: r }), I = (o) => o === t ? 1 : o === i ? 1.1 : 1.3, R = ({ type: o, $main: r, $side: n }) => {
+const h = (o, r) => o === t ? /* @__PURE__ */ e(f, { size: 16, color: r }) : o === i ? /* @__PURE__ */ e(m, { size: 18, color: r }) : /* @__PURE__ */ e(g, { size: 22, color: r }), I = (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(u, { $side: n, children: [
     /* @__PURE__ */ e(l, { $main: r }),

package/components/Toast/styles.js

@@ -23,22 +23,22 @@ const m = s`
   }
 `, w = r.div`
   position: fixed;
-  top: 1rem;
-  right: 1rem;
+  top: 1.6rem;
+  right: 1.6rem;
   z-index: 9999;
 
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.6rem;
 `, x = r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: ${({ $bg: e }) => e};
-  height: 4.8rem;
-  width: 28rem;
-  border-radius: 0.8rem;
-  padding: 0.4rem 1.6rem;
+  height: 7.68rem;
+  width: 44.8rem;
+  border-radius: 1.28rem;
+  padding: 0.64rem 2.56rem;
   box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;
   transition: all 0.5s ease;
 
@@ -53,10 +53,10 @@ const m = s`
   }
 
   @media screen and (max-width: 768px) {
-    height: 3.6rem;
-    width: 21rem;
-    border-radius: 0.6rem;
-    padding: 0.3rem 0.8rem;
+    height: 5.76rem;
+    width: 33.6rem;
+    border-radius: 0.96rem;
+    padding: 0.48rem 1.28rem;
   }
 `, b = r.div`
   position: absolute;
@@ -69,13 +69,13 @@ const m = s`
           top: 48%;
           border-color: ${t} ${t} ${i} ${t};
           border-style: solid;
-          border-width: 0 0.9rem 1.4rem 0.9rem;
+          border-width: 0 1.44rem 2.24rem 1.44rem;
           height: 0;
           width: 0;
         ` : o`
           top: 50%;
-          width: 1.8rem;
-          height: 1.8rem;
+          width: 2.88rem;
+          height: 2.88rem;
           border-radius: 50%;
         `}
 
@@ -84,26 +84,26 @@ const m = s`
             top: 48%;
             border-color: ${t} ${t} ${i} ${t};
             border-style: solid;
-            border-width: 0 0.7rem 1.05rem 0.68rem;
+            border-width: 0 1.12rem 1.68rem 1.088rem;
             height: 0;
             width: 0;
           ` : o`
             top: 50%;
-            width: 1.35rem;
-            height: 1.35rem;
+            width: 2.16rem;
+            height: 2.16rem;
             border-radius: 50%;
           `}
   }
 `, u = r.div`
   position: relative;
-  width: 4rem;
-  height: 4rem;
+  width: 6.4rem;
+  height: 6.4rem;
   border-radius: 50%;
   background-color: ${({ $side: e }) => e};
 
   @media screen and (max-width: 768px) {
-    width: 3rem;
-    height: 3rem;
+    width: 4.8rem;
+    height: 4.8rem;
   }
 `, $ = r.div`
   position: absolute;
@@ -124,33 +124,33 @@ const m = s`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 3rem;
-  height: 3rem;
+  width: 4.8rem;
+  height: 4.8rem;
   border-radius: 50%;
   background-color: ${({ $main: e }) => e};
 
   @media screen and (max-width: 768px) {
-    width: 2.25rem;
-    height: 2.25rem;
+    width: 3.6rem;
+    height: 3.6rem;
   }
 `, v = r(n)`
   cursor: pointer;
 `, k = r.div`
   font-weight: 600;
-  font-size: 1.2rem;
+  font-size: 1.92rem;
   color: ${d.m800};
 `, C = r.div`
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
-  width: 21rem;
+  gap: 0.32rem;
+  width: 33.6rem;
 
   @media screen and (max-width: 768px) {
-    width: 15rem;
+    width: 24rem;
   }
 `, X = r.div`
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 1.6rem;
   color: ${d.m700};
 `;
 export {

package/components/Typography/Headings/H1.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import s from "styled-components";
 const m = s.h1`
   color: ${({ $color: o }) => o};
-  font-size: 3.6rem;
+  font-size: 5.76rem;
 `, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
   f as default

package/components/Typography/Headings/H2.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import s from "styled-components";
 const m = s.h2`
   color: ${({ $color: o }) => o};
-  font-size: 3rem;
+  font-size: 4.8rem;
 `, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
   f as default

package/components/Typography/Headings/H3.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import s from "styled-components";
 const m = s.h3`
   color: ${({ $color: o }) => o};
-  font-size: 2.4rem;
+  font-size: 3.84rem;
 `, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
   f as default

package/components/Typography/Headings/H4.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import s from "styled-components";
 const m = s.h4`
   color: ${({ $color: o }) => o};
-  font-size: 1.8rem;
+  font-size: 2.88rem;
 `, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
   f as default

package/components/Typography/Headings/H5.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import s from "styled-components";
 const m = s.h5`
   color: ${({ $color: o }) => o};
-  font-size: 1.4rem;
+  font-size: 2.24rem;
 `, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
   f as default

package/components/Typography/Headings/H6.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import s from "styled-components";
 const m = s.h6`
   color: ${({ $color: o }) => o};
-  font-size: 1.2rem;
+  font-size: 1.92rem;
 `, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
   f as default

package/components/Typography/P/styles.js

@@ -1,7 +1,7 @@
 import r from "styled-components";
 import t from "../../../colors/black.js";
 const p = r.p`
-  font-size: ${({ $size: o }) => o || "1.2rem"};
+  font-size: ${({ $size: o }) => o || "1.92rem"};
   color: ${({ $color: o }) => o || t};
   margin: 0;
   height: auto;