meticulous-ui 3.7.12 → 3.7.13

package/components/Toast/Toast.js

@@ -48,9 +48,7 @@ const P = () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${({
-  $bg: e
-}) => e};
+  background-color: ${({ $bg: e }) => e};
   height: 7.68rem;
   width: 44.8rem;
   border-radius: 1.28rem;
@@ -117,9 +115,7 @@ const P = () => {
   width: 6.4rem;
   height: 6.4rem;
   border-radius: 50%;
-  background-color: ${({
-  $side: e
-}) => e};
+  background-color: ${({ $side: e }) => e};
   animation: ${V} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
 
   @media screen and (max-width: 768px) {
@@ -138,17 +134,11 @@ const P = () => {
   }
 `, ne = o.div`
   position: absolute;
-  top: ${({
-  $isWarning: e
-}) => e ? "49%" : "50%"};
+  top: ${({ $isWarning: e }) => e ? "49%" : "50%"};
   left: 50%;
   transform: translate(-50%, -50%);
-  width: ${({
-  size: e
-}) => e}rem;
-  height: ${({
-  size: e
-}) => e}rem;
+  width: ${({ size: e }) => e}rem;
+  height: ${({ size: e }) => e}rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -157,12 +147,8 @@ const P = () => {
     top: 42.8%;
     left: 42.8%;
     transform: translate(
-      ${({
-  $isWarning: e
-}) => e ? "-45.8%" : "-42.8%"},
-      ${({
-  $isWarning: e
-}) => e ? "-50.8%" : "-42.8%"}
+      ${({ $isWarning: e }) => e ? "-45.8%" : "-42.8%"},
+      ${({ $isWarning: e }) => e ? "-50.8%" : "-42.8%"}
     );
     scale: 0.75;
   }
@@ -174,9 +160,7 @@ const P = () => {
   width: 4.8rem;
   height: 4.8rem;
   border-radius: 50%;
-  background-color: ${({
-  $main: e
-}) => e};
+  background-color: ${({ $main: e }) => e};
   animation: ${Y} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
 
   @media screen and (max-width: 768px) {
@@ -207,16 +191,12 @@ const P = () => {
 `, me = o.svg`
   position: absolute;
   inset: 0;
-  transform: ${({
-  $hasClockwiseRotation: e
-}) => e ? "rotate(-90deg)" : "rotate(90deg) scaleX(-1)"};
+  transform: ${({ $hasClockwiseRotation: e }) => e ? "rotate(-90deg)" : "rotate(90deg) scaleX(-1)"};
   pointer-events: none;
 
   circle {
     fill: none;
-    stroke: ${({
-  $color: e
-}) => e};
+    stroke: ${({ $color: e }) => e};
     stroke-width: 2;
     stroke-linecap: round;
     stroke-dasharray: ${C};
@@ -229,12 +209,8 @@ const P = () => {
 
   circle:last-child {
     stroke-dashoffset: ${C};
-    animation: ${se} ${({
-  $duration: e
-}) => e - 0.5}s linear forwards;
-    animation-play-state: ${({
-  $paused: e
-}) => e ? "paused" : "running"};
+    animation: ${se} ${({ $duration: e }) => e - 0.5}s linear forwards;
+    animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
   }
 `, ce = o(S)`
   cursor: pointer;
@@ -280,45 +256,36 @@ const P = () => {
   @media screen and (max-width: 380px) {
     font-size: 1.32rem;
   }
-`, ue = (e, r) => e === f ? /* @__PURE__ */ i(S, { size: 16, color: r }) : e === N ? /* @__PURE__ */ i(U, { size: 18, color: r }) : e === R ? /* @__PURE__ */ i(H, { size: 28, color: L }) : /* @__PURE__ */ i(q, { size: 22, color: r }), pe = (e) => e === f ? 1.6 : e === N ? 1.76 : e === R ? 2.8 : 2.08, ge = ({
-  type: e,
-  $main: r,
-  $side: n
-}) => {
+`, ue = (e, r) => e === f ? /* @__PURE__ */ i(S, { size: 16, color: r }) : e === N ? /* @__PURE__ */ i(U, { size: 18, color: r }) : e === R ? /* @__PURE__ */ i(H, { size: 28, color: L }) : /* @__PURE__ */ i(q, { size: 22, color: r }), pe = (e) => e === f ? 1.6 : e === N ? 1.76 : e === R ? 2.8 : 2.08, ge = ({ type: e, $main: r, $side: n }) => {
   const a = ue(e, r), s = e === R;
   return /* @__PURE__ */ m(oe, { "aria-hidden": "true", $side: n, children: [
     /* @__PURE__ */ i(ae, { $main: r }),
     !s && /* @__PURE__ */ i(ie, { $main: r, type: e }),
     /* @__PURE__ */ i(ne, { size: pe(e), $isWarning: s, children: a })
   ] });
-}, we = ({
-  toasts: e,
-  ...r
-}) => {
+}, we = ({ toasts: e, ...r }) => {
   const [n, a] = h(e);
   y(() => {
     a(e);
   }, [e]);
-  const s = ({
-    type: u,
-    id: l,
-    title: p,
-    subtitle: g,
-    duration: d,
-    onExpire: w = P
-  }, x) => /* @__PURE__ */ B(W, { type: u, title: p, subtitle: g, duration: d, key: l, onExpire: w });
-  return D(/* @__PURE__ */ i(re, { ...r, children: [...n].reverse().map(s) }), document.body);
+  const s = ({ type: u, id: l, title: p, subtitle: g, duration: d, onExpire: w = P }, x) => /* @__PURE__ */ B(W, { type: u, title: p, subtitle: g, duration: d, key: l, onExpire: w });
+  return D(
+    /* @__PURE__ */ i(re, { ...r, children: [...n].reverse().map(s) }),
+    document.body
+  );
 };
 we.propTypes = {
   /** Array of toast config objects, each with `{ id, type, title, subtitle, duration, onExpire }` */
-  toasts: /* @__PURE__ */ t.arrayOf(/* @__PURE__ */ t.shape({
-    id: t.any,
-    type: t.string,
-    title: t.string,
-    subtitle: t.string,
-    duration: t.number,
-    onExpire: t.func
-  }))
+  toasts: t.arrayOf(
+    t.shape({
+      id: t.any,
+      type: t.string,
+      title: t.string,
+      subtitle: t.string,
+      duration: t.number,
+      onExpire: t.func
+    })
+  )
 };
 const M = (e, r, n) => () => {
   e(!0), setTimeout(() => {
@@ -345,26 +312,54 @@ const M = (e, r, n) => () => {
     clearTimeout(b.current), $.current -= Date.now() - z.current, T(!0);
   }, X = () => {
     T(!1), O($.current);
-  }, {
-    main: E,
-    side: G,
-    bg: A
-  } = (I = J[e]) != null ? I : Q;
+  }, { main: E, side: G, bg: A } = (I = J[e]) != null ? I : Q;
   if (g)
-    return /* @__PURE__ */ m(te, { $bg: A, role: e === f ? "alert" : "status", "aria-live": e === f ? "assertive" : "polite", "aria-atomic": "true", className: `${w ? "fade-out" : "fade-in"}`, onMouseEnter: F, onMouseLeave: X, ...p, children: [
-      /* @__PURE__ */ i(ge, { type: e, $main: E, $side: G }),
-      /* @__PURE__ */ m(he, { children: [
-        /* @__PURE__ */ i(le, { children: u }),
-        l && /* @__PURE__ */ i(fe, { children: l })
-      ] }),
-      /* @__PURE__ */ m(de, { children: [
-        /* @__PURE__ */ m(me, { "aria-hidden": "true", viewBox: "0 0 28 28", $duration: n, $color: E, $paused: j, $hasClockwiseRotation: s, children: [
-          /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" }),
-          /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" })
-        ] }),
-        /* @__PURE__ */ i(ce, { "aria-label": "Close notification", size: 13, color: k.m600, onClick: M(x, d, a) })
-      ] })
-    ] });
+    return /* @__PURE__ */ m(
+      te,
+      {
+        $bg: A,
+        role: e === f ? "alert" : "status",
+        "aria-live": e === f ? "assertive" : "polite",
+        "aria-atomic": "true",
+        className: `${w ? "fade-out" : "fade-in"}`,
+        onMouseEnter: F,
+        onMouseLeave: X,
+        ...p,
+        children: [
+          /* @__PURE__ */ i(ge, { type: e, $main: E, $side: G }),
+          /* @__PURE__ */ m(he, { children: [
+            /* @__PURE__ */ i(le, { children: u }),
+            l && /* @__PURE__ */ i(fe, { children: l })
+          ] }),
+          /* @__PURE__ */ m(de, { children: [
+            /* @__PURE__ */ m(
+              me,
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 28 28",
+                $duration: n,
+                $color: E,
+                $paused: j,
+                $hasClockwiseRotation: s,
+                children: [
+                  /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" }),
+                  /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(
+              ce,
+              {
+                "aria-label": "Close notification",
+                size: 13,
+                color: k.m600,
+                onClick: M(x, d, a)
+              }
+            )
+          ] })
+        ]
+      }
+    );
 };
 W.propTypes = {
   /** Notification variant: `'info'`, `'success'`, `'warning'`, or `'error'`. Defaults to `'info'` */

package/components/Typography/Headings/H1.js

@@ -2,15 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import s from "styled-components";
 import r from "prop-types";
 const m = s.h1`
-  color: ${({
-  $color: o
-}) => o};
+  color: ${({ $color: o }) => o};
   font-size: 5.76rem;
-`, n = ({
-  color: o,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
 n.propTypes = {
   /** Heading content */
   children: r.node,

package/components/Typography/Headings/H2.js

@@ -2,15 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import s from "styled-components";
 import r from "prop-types";
 const m = s.h2`
-  color: ${({
-  $color: o
-}) => o};
+  color: ${({ $color: o }) => o};
   font-size: 4.8rem;
-`, n = ({
-  color: o,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
 n.propTypes = {
   /** Heading content */
   children: r.node,

package/components/Typography/Headings/H3.js

@@ -2,15 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import s from "styled-components";
 import r from "prop-types";
 const m = s.h3`
-  color: ${({
-  $color: o
-}) => o};
+  color: ${({ $color: o }) => o};
   font-size: 3.84rem;
-`, n = ({
-  color: o,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
 n.propTypes = {
   /** Heading content */
   children: r.node,

package/components/Typography/Headings/H4.js

@@ -2,15 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import s from "styled-components";
 import r from "prop-types";
 const m = s.h4`
-  color: ${({
-  $color: o
-}) => o};
+  color: ${({ $color: o }) => o};
   font-size: 2.88rem;
-`, n = ({
-  color: o,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
 n.propTypes = {
   /** Heading content */
   children: r.node,

package/components/Typography/Headings/H5.js

@@ -2,15 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import s from "styled-components";
 import r from "prop-types";
 const m = s.h5`
-  color: ${({
-  $color: o
-}) => o};
+  color: ${({ $color: o }) => o};
   font-size: 2.24rem;
-`, n = ({
-  color: o,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
 n.propTypes = {
   /** Heading content */
   children: r.node,

package/components/Typography/Headings/H6.js

@@ -2,15 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import s from "styled-components";
 import r from "prop-types";
 const m = s.h6`
-  color: ${({
-  $color: o
-}) => o};
+  color: ${({ $color: o }) => o};
   font-size: 1.92rem;
-`, n = ({
-  color: o,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
 n.propTypes = {
   /** Heading content */
   children: r.node,

package/components/Typography/Headings/index.js

@@ -4,14 +4,7 @@ import m from "./H3.js";
 import t from "./H4.js";
 import f from "./H5.js";
 import i from "./H6.js";
-const s = {
-  H1: o,
-  H2: r,
-  H3: m,
-  H4: t,
-  H5: f,
-  H6: i
-};
+const s = { H1: o, H2: r, H3: m, H4: t, H5: f, H6: i };
 export {
   o as H1,
   r as H2,

package/components/Typography/P/P.js

@@ -3,20 +3,11 @@ import o from "prop-types";
 import s from "styled-components";
 import { black as m } from "../../../colors/black.js";
 const n = s.p`
-  font-size: ${({
-  $size: r
-}) => r || "1.92rem"};
-  color: ${({
-  $color: r
-}) => r || m};
+  font-size: ${({ $size: r }) => r || "1.92rem"};
+  color: ${({ $color: r }) => r || m};
   margin: 0;
   height: auto;
-`, c = ({
-  color: r,
-  size: t,
-  children: e,
-  ...p
-}) => /* @__PURE__ */ i(n, { $color: r, $size: t, ...p, children: e });
+`, c = ({ color: r, size: t, children: e, ...p }) => /* @__PURE__ */ i(n, { $color: r, $size: t, ...p, children: e });
 c.propTypes = {
   /** Paragraph content */
   children: o.node,

package/components/VideoPlayer/VideoPlayer.js

@@ -10,23 +10,15 @@ const V = i.div`
   position: absolute;
   inset: 0;
   z-index: 2;
-  border-radius: ${({
-  $borderRadius: o
-}) => o}px;
-  opacity: ${({
-  $loaded: o
-}) => o ? 0 : 1};
+  border-radius: ${({ $borderRadius: o }) => o}px;
+  opacity: ${({ $loaded: o }) => o ? 0 : 1};
   transition: opacity 0.35s ease-out;
   pointer-events: none;
 `, j = i.div`
   position: relative;
   display: inline-block;
-  width: ${({
-  $width: o
-}) => o}px;
-  height: ${({
-  $height: o
-}) => o}px;
+  width: ${({ $width: o }) => o}px;
+  height: ${({ $height: o }) => o}px;
 
   &:fullscreen video {
     width: 100vw;
@@ -35,14 +27,10 @@ const V = i.div`
     background: ${y.m900};
   }
 `, k = i.video`
-  border-radius: ${({
-  $borderRadius: o
-}) => o}px;
+  border-radius: ${({ $borderRadius: o }) => o}px;
   width: 100%;
   height: 100%;
-  max-width: ${({
-  width: o
-}) => o}px;
+  max-width: ${({ width: o }) => o}px;
   aspect-ratio: 16 / 9;
   background-color: #000;
   object-fit: contain;
@@ -61,13 +49,21 @@ const V = i.div`
   hasShimmer: c = !0,
   ...u
 }) => {
-  const r = s(null), n = s(null), {
-    volume: m,
-    showVolume: p
-  } = g(), [h, f] = b(!1);
+  const r = s(null), n = s(null), { volume: m, showVolume: p } = g(), [h, f] = b(!1);
   return $(r, n, p), /* @__PURE__ */ v(j, { ref: n, $width: d, $height: l, ...u, children: [
     c && /* @__PURE__ */ e(V, { $loaded: h, $borderRadius: t, children: /* @__PURE__ */ e(w, { borderRadius: `${t}px` }) }),
-    /* @__PURE__ */ e(k, { $borderRadius: t, ref: r, src: o, poster: a, controls: !0, onLoadedData: () => f(!0), children: "Your browser does not support the video tag." }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        $borderRadius: t,
+        ref: r,
+        src: o,
+        poster: a,
+        controls: !0,
+        onLoadedData: () => f(!0),
+        children: "Your browser does not support the video tag."
+      }
+    ),
     /* @__PURE__ */ e(x, { volume: m })
   ] });
 };

package/components/VideoPlayer/components/Volumebar/Volumebar.js

@@ -20,9 +20,7 @@ const o = r.div`
   align-items: flex-end;
 `, d = r.div`
   width: 100%;
-  height: ${({
-  $pct: e
-}) => e}%;
+  height: ${({ $pct: e }) => e}%;
   background: #fff;
   border-radius: 0.32rem;
   transition: height 0.1s ease;
@@ -32,9 +30,7 @@ const o = r.div`
   font-weight: 500;
   width: 5.6rem;
   text-align: center;
-`, h = ({
-  volume: e
-}) => {
+`, h = ({ volume: e }) => {
   if (e === null) return null;
   const i = Math.round(e);
   return /* @__PURE__ */ n(o, { "aria-hidden": "true", children: [

package/components/VideoPlayer/useSpacebarToggle.js

@@ -3,7 +3,17 @@ const l = (a, c, r) => {
   f(() => {
     const u = (t) => {
       var d;
-      if (!["Space", "KeyF", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "KeyM"].includes(t.code)) return;
+      if (![
+        "Space",
+        "KeyF",
+        "Escape",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "KeyM"
+      ].includes(t.code))
+        return;
       const n = t.target;
       if (n && (n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.isContentEditable))
         return;

package/components/VideoPlayer/useVolumeOverlay.js

@@ -3,10 +3,7 @@ const c = () => {
   const [u, e] = r(null), t = n(null), o = s((l) => {
     e(Math.round(l * 100)), clearTimeout(t.current), t.current = setTimeout(() => e(null), 1500);
   }, []);
-  return {
-    volume: u,
-    showVolume: o
-  };
+  return { volume: u, showVolume: o };
 };
 export {
   c as useVolumeOverlay

package/hooks/useThrottle.js

@@ -2,9 +2,12 @@ import { useState as c, useRef as u, useEffect as i } from "react";
 const f = (t, e) => {
   const [r, n] = c(t), o = u(Date.now());
   return i(() => {
-    const s = e - (Date.now() - o.current), a = setTimeout(() => {
-      n(t), o.current = Date.now();
-    }, Math.max(0, s));
+    const s = e - (Date.now() - o.current), a = setTimeout(
+      () => {
+        n(t), o.current = Date.now();
+      },
+      Math.max(0, s)
+    );
     return () => clearTimeout(a);
   }, [t, e]), r;
 };

package/hooks/useWindowSize.js

@@ -5,10 +5,7 @@ const w = () => {
     height: window.innerHeight
   });
   return r(() => {
-    const e = () => n({
-      width: window.innerWidth,
-      height: window.innerHeight
-    });
+    const e = () => n({ width: window.innerWidth, height: window.innerHeight });
     return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []), i;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.7.12",
+  "version": "3.7.13",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",

package/reactUtils/composeProviders.js

@@ -1,7 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-const d = (...e) => ({
-  children: o
-}) => e.reduceRight((r, s) => /* @__PURE__ */ t(s, { children: r }), o);
+const d = (...e) => ({ children: o }) => e.reduceRight((r, s) => /* @__PURE__ */ t(s, { children: r }), o);
 export {
   d as default
 };

package/reactUtils/lazyImport.js

@@ -1,8 +1,6 @@
 import { lazy as l } from "react";
 const e = (o, t) => ({
-  [t]: l(() => o().then((a) => ({
-    default: a[t]
-  })))
+  [t]: l(() => o().then((a) => ({ default: a[t] })))
 });
 export {
   e as default

package/reactUtils/withErrorBoundary.js

@@ -2,16 +2,10 @@ import { jsx as o } from "react/jsx-runtime";
 import { Component as i } from "react";
 class l extends i {
   constructor(r) {
-    super(r), this.state = {
-      hasError: !1,
-      error: null
-    };
+    super(r), this.state = { hasError: !1, error: null };
   }
   static getDerivedStateFromError(r) {
-    return {
-      hasError: !0,
-      error: r
-    };
+    return { hasError: !0, error: r };
   }
   render() {
     if (this.state.hasError) {

package/utils/cancelablePromise.js

@@ -2,11 +2,10 @@ const t = (c) => {
   let e = !1;
   return {
     promise: new Promise((n, a) => {
-      c.then((r) => e ? a({
-        canceled: !0
-      }) : n(r), (r) => a(e ? {
-        canceled: !0
-      } : r));
+      c.then(
+        (r) => e ? a({ canceled: !0 }) : n(r),
+        (r) => a(e ? { canceled: !0 } : r)
+      );
     }),
     cancel: () => {
       e = !0;

package/utils/createPubSub.js

@@ -1,17 +1,14 @@
 const p = () => {
   const u = {};
-  return {
-    subscribe: (s, c) => {
-      var b;
-      return ((b = u[s]) != null ? b : u[s] = []).push(c), () => {
-        u[s] = u[s].filter((r) => r !== c);
-      };
-    },
-    publish: (s, ...c) => {
-      var b;
-      ((b = u[s]) != null ? b : []).forEach((r) => r(...c));
-    }
-  };
+  return { subscribe: (s, c) => {
+    var b;
+    return ((b = u[s]) != null ? b : u[s] = []).push(c), () => {
+      u[s] = u[s].filter((r) => r !== c);
+    };
+  }, publish: (s, ...c) => {
+    var b;
+    ((b = u[s]) != null ? b : []).forEach((r) => r(...c));
+  } };
 };
 export {
   p as default

package/utils/formatCompactNumber.js

@@ -1,7 +1,6 @@
-const r = (t, o = "en-US") => typeof t != "number" ? t : new Intl.NumberFormat(o, {
-  notation: "compact",
-  compactDisplay: "short"
-}).format(t);
+const r = (t, o = "en-US") => typeof t != "number" ? t : new Intl.NumberFormat(o, { notation: "compact", compactDisplay: "short" }).format(
+  t
+);
 export {
   r as default
 };

package/utils/formatCurrency.js

@@ -1,7 +1,4 @@
-const n = (r, e = "USD", t = "en-US") => typeof r != "number" ? r : new Intl.NumberFormat(t, {
-  style: "currency",
-  currency: e
-}).format(r);
+const n = (r, e = "USD", t = "en-US") => typeof r != "number" ? r : new Intl.NumberFormat(t, { style: "currency", currency: e }).format(r);
 export {
   n as default
 };