meticulous-ui 3.11.6 → 3.11.8

package/README.md

@@ -3,6 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/meticulous-ui)](https://www.npmjs.com/package/meticulous-ui)
 [![npm downloads](https://img.shields.io/npm/dm/meticulous-ui)](https://www.npmjs.com/package/meticulous-ui)
 [![license](https://img.shields.io/npm/l/meticulous-ui)](https://www.npmjs.com/package/meticulous-ui)
+[![Socket](https://socket.dev/api/badge/npm/package/meticulous-ui)](https://socket.dev/npm/package/meticulous-ui)
 
 [![meticulous-ui](https://raw.githubusercontent.com/xe3110/meticulous-ui/main/assets/readme_banner.png)](https://meticulous-ui.vercel.app/)
 

package/components/Timer/Timer.js

@@ -1,32 +1,32 @@
-import { jsxs as p, jsx as e, Fragment as U } from "react/jsx-runtime";
-import { useState as b, useRef as Tt, useEffect as K } from "react";
+import { jsxs as g, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { useState as d, useRef as vt, useEffect as z } from "react";
 import n from "prop-types";
-import vt from "../Glass/Glass.js";
+import At from "../Glass/Glass.js";
 import St from "./components/TimerRing/TimerRing.js";
-import c from "../../colors/white.js";
+import m from "../../colors/white.js";
 import { black as kt } from "../../colors/black.js";
-import At from "../../colors/red.js";
-import Rt from "../Icons/ClockCircleOutline.js";
-import xt from "../Icons/Add.js";
+import Tt from "../../colors/red.js";
+import xt from "../Icons/ClockCircleOutline.js";
+import Rt from "../Icons/Add.js";
 import Pt from "../Icons/MediaStopFilled.js";
 import It from "../Icons/MediaPauseFilled.js";
 import Mt from "../Icons/MediaPlayFilled.js";
 import { COLOR_MAPPING as Dt } from "./constants.js";
-import r, { css as h, keyframes as S } from "styled-components";
-const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.404, zt = ({ $color: i }) => Dt[i], _ = h`
+import o, { css as p, keyframes as f } from "styled-components";
+const t = (r) => ({ $size: u }) => u / r, q = 1, Ct = 16.67, J = 1.67, Ot = 3.404, Et = ({ $color: r }) => Dt[r], _ = p`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
   border-radius: 4px;
   transition: rotate 0.3s ease-in-out;
   rotate: var(--hand-rotate);
-`, _t = r.div`
+`, zt = o.div`
   position: relative;
   height: ${t(q)}rem;
   width: ${t(q)}rem;
   border-radius: ${t(Ct)}rem;
-  background-color: ${zt};
-`, Et = r.div`
+  background-color: ${Et};
+`, _t = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
@@ -36,25 +36,25 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
   pointer-events: none;
-`, Q = r.div`
+`, Q = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
   transform: translate(-50%, -50%);
-`, V = r.div`
-  color: ${c};
+`, V = o.div`
+  color: ${m};
   font-size: ${t(13.33)}rem;
   font-weight: 650;
   text-align: center;
   opacity: 0.84;
-`, Ht = r.span`
+`, Ft = o.span`
   position: absolute;
   width: ${t(120)}rem;
   height: ${t(120)}rem;
   background: rgba(255, 255, 255, 0.4);
   transform-origin: ${t(Ot)}rem;
   border-radius: 2px;
-  rotate: ${({ $i: i }) => `${i * 6}deg`};
+  rotate: ${({ $i: r }) => `${r * 6}deg`};
 
   &:nth-child(5n) {
     width: ${t(90)}rem;
@@ -67,46 +67,67 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
     height: ${t(130)}rem;
     background: rgba(255, 255, 255);
   }
-`, Nt = r.div`
+`, Ht = o.div`
   position: relative;
   height: 100%;
   width: 100%;
-`, Wt = r.div`
+`, Nt = o.div`
   position: absolute;
   left: 1.6%;
   top: 43.8%;
   transform: translate(-50%, -50%) rotate(6.7deg);
-`, Ft = r.div`
+`, Wt = o.div`
   ${_};
   width: ${t(50)}rem;
   height: ${t(5.33)}rem;
-  background: ${c};
-`, Lt = r.div`
+  background: ${m};
+`, Lt = o.div`
   ${_};
   width: ${t(80)}rem;
   height: ${t(4)}rem;
   background: ${kt.m200};
-`, Yt = r.div`
+`, Xt = o.div`
   ${_};
   width: ${t(133.33)}rem;
   height: ${t(3.64)}rem;
-  background: ${At.m800};
-`, Z = S`
+  background: ${Tt.m800};
+`, Z = f`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.9); }
-`, Bt = S`
+`, Yt = f`
   from { opacity: 0; transform: translateY(-5px); }
   to   { opacity: 1; transform: translateY(0); }
-`, jt = S`
+`, Bt = f`
   from { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.9); }
   to   { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
-`, Xt = S`
+`, jt = f`
   from { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
   to   { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.85); }
-`, Gt = r.span`
+`;
+o.span`
   display: inline-block;
-  animation: ${Bt} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-`, Ut = r.div`
+  animation: ${Yt} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+`;
+const Gt = f`
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+`, Ut = o.span`
+  animation: ${Gt} 0.35s ease-out forwards;
+`, Kt = f`
+  0%   { transform: perspective(200px) rotateX(0deg); }
+  100% { transform: perspective(200px) rotateX(-90deg); }
+`, qt = f`
+  0%   { transform: perspective(200px) rotateX(90deg); }
+  100% { transform: perspective(200px) rotateX(0deg); }
+`, Jt = o.span`
+  display: inline-block;
+  ${({ $phase: r }) => r === "out" && p`
+      animation: ${Kt} 0.14s ease-in forwards;
+    `}
+  ${({ $phase: r }) => r === "in" && p`
+      animation: ${qt} 0.14s ease-out forwards;
+    `}
+`, Qt = o.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -119,10 +140,10 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
     rgba(0, 0, 0, 0.3) 85%,
     rgba(0, 0, 0, 0.42) 100%
   );
-  ${({ $dismissing: i }) => i && h`
+  ${({ $dismissing: r }) => r && p`
       animation: ${Z} 0.6s ease-out forwards;
     `}
-`, Kt = r.div`
+`, Vt = o.div`
   position: absolute;
   left: 50%;
   top: calc(${t(100 / 12)}rem - ${t(55)}rem);
@@ -141,12 +162,12 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
   -webkit-backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   pointer-events: none;
-  animation: ${({ $dismissing: i }) => i ? h`
-          ${Xt} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
-        ` : h`
-          ${jt} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
+  animation: ${({ $dismissing: r }) => r ? p`
+          ${jt} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
+        ` : p`
+          ${Bt} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
         `};
-`, qt = r.div`
+`, Zt = o.div`
   position: absolute;
   bottom: 6%;
   left: 8%;
@@ -154,16 +175,16 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
   align-items: center;
   gap: ${t(50)}rem;
 
-  ${({ $noActions: i }) => i && h`
+  ${({ $noActions: r }) => r && p`
       pointer-events: none;
       opacity: 0.5;
     `}
-`, Jt = r.div`
+`, te = o.div`
   position: absolute;
   bottom: 6%;
   right: 8%;
   border-radius: ${t(50)}rem;
-`, v = r.button`
+`, T = o.button`
   position: relative;
   height: ${t(8.33)}rem;
   width: ${t(8.33)}rem;
@@ -176,45 +197,45 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
   padding: 0;
 
   &:focus-visible {
-    outline: 2px solid ${c};
+    outline: 2px solid ${m};
     outline-offset: 2px;
   }
-`, Qt = r(xt)`
+`, ee = o(Rt)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, Vt = r(Pt)`
+`, re = o(Pt)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, Zt = r(It)`
+`, oe = o(It)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, te = r(Mt)`
+`, ie = o(Mt)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, ee = r.span`
+`, ne = o.span`
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
-`, re = r.div`
+`, ae = o.div`
   position: absolute;
   width: ${t(35)}rem;
   height: ${t(35)}rem;
   border-radius: 50%;
-  background-color: ${c};
+  background-color: ${m};
   left: calc(-${t(70)}rem);
   top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
-`, oe = r.div`
+`, se = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
@@ -223,89 +244,96 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
   rotate: var(--bullet-rotate);
   transform-origin: 0 0;
   transition: rotate 0.3s ease;
-  ${({ $dismissing: i }) => i && h`
+  ${({ $dismissing: r }) => r && p`
       animation: ${Z} 0.6s ease-out forwards;
     `}
-`, $ = () => {
-}, ie = (i) => () => {
-  const g = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: i }).split(", ")[1].split(" ")[0], [A, a, y] = g.split(":").map(Number);
+`, le = ({ value: r }) => {
+  const [u, w] = d(r), [l, h] = d(null);
+  return z(() => {
+    r !== u && h("out");
+  }, [r]), /* @__PURE__ */ e(Jt, { $phase: l, onAnimationEnd: () => {
+    l === "out" ? (w(r), h("in")) : h(null);
+  }, children: u });
+}, A = () => {
+}, ce = (r) => () => {
+  const l = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: r }).split(", ")[1].split(" ")[0], [h, a, S] = l.split(":").map(Number);
   return {
-    second: y * 6,
-    minute: a * 6 + y * 0.1,
-    hour: A % 12 * 30 + a * 0.5
+    second: S * 6,
+    minute: a * 6 + S * 0.1,
+    hour: h % 12 * 30 + a * 0.5
   };
-}, ne = ({
-  color: i = "green",
-  showTime: w = !0,
-  showTimeWithSec: k = !0,
-  timeZone: g = "Asia/Kolkata",
-  isDigital: A = !0,
+}, de = ({
+  color: r = "green",
+  showTime: u = !0,
+  showTimeWithSec: w = !0,
+  timeZone: l = "Asia/Kolkata",
+  isDigital: h = !0,
   timerSeconds: a = 0,
-  onTimerAdd: y = $,
-  onTimerComplete: tt = $,
-  onTimerRemove: et = $,
-  onTimerPause: rt = $,
-  onTimerPlay: ot = $,
-  size: E = 30,
+  onTimerAdd: S = A,
+  onTimerComplete: tt = A,
+  onTimerRemove: et = A,
+  onTimerPause: rt = A,
+  onTimerPlay: ot = A,
+  size: F = 30,
   ...it
 }) => {
-  const [R, nt] = b(/* @__PURE__ */ new Date()), [s, x] = b(0), [T, P] = b(!1), [I, at] = b(ie(g)), [st, M] = b(0), [f, D] = b(!1), H = Tt(T), o = Math.round(E), C = Math.round(14 * E / 20);
-  K(() => {
-    H.current = T;
-  }, [T]);
+  const [x, nt] = d(/* @__PURE__ */ new Date()), [s, R] = d(0), [k, P] = d(!1), [I, at] = d(ce(l)), [st, M] = d(0), [y, D] = d(!1), H = vt(k), i = Math.round(F), C = Math.round(14 * F / 20);
+  z(() => {
+    H.current = k;
+  }, [k]);
   const lt = () => {
-    x(a), M(a % 60 * 6), P(!1), y();
-  }, dt = () => {
-    D(!0), et();
+    R(a), M(a % 60 * 6), P(!1), S();
   }, ct = () => {
-    x(0), M(0), D(!1);
+    D(!0), et();
+  }, dt = () => {
+    R(0), M(0), D(!1);
   }, mt = () => {
     P(!0), rt();
   }, pt = () => {
     P(!1), ot();
   };
-  K(() => {
-    const m = setInterval(() => {
-      const l = /* @__PURE__ */ new Date();
-      nt(l), at((d) => {
-        const gt = l.toLocaleString("en-Us", { hour12: !0, timeZone: g }).split(", ")[1].split(" ")[0], [ft, Y, B] = gt.split(":").map(Number), $t = B * 6, wt = Y * 6 + B * 0.1, yt = ft % 12 * 30 + Y * 0.5, z = (j, X) => {
-          const G = j % 360;
-          return j - G + X + (X < G ? 360 : 0);
+  z(() => {
+    const v = setInterval(() => {
+      const b = /* @__PURE__ */ new Date();
+      nt(b), at((c) => {
+        const gt = b.toLocaleString("en-Us", { hour12: !0, timeZone: l }).split(", ")[1].split(" ")[0], [ft, Y, B] = gt.split(":").map(Number), $t = B * 6, wt = Y * 6 + B * 0.1, yt = ft % 12 * 30 + Y * 0.5, E = (j, G) => {
+          const U = j % 360;
+          return j - U + G + (G < U ? 360 : 0);
         };
         return {
-          second: z(d.second, $t),
-          minute: z(d.minute, wt),
-          hour: z(d.hour, yt)
+          second: E(c.second, $t),
+          minute: E(c.minute, wt),
+          hour: E(c.hour, yt)
         };
-      }), H.current || (x((d) => (d - 1 === 0 && (tt(), D(!0)), d - 1)), M((d) => d - 6));
+      }), H.current || (R((c) => (c - 1 === 0 && (tt(), D(!0)), c - 1)), M((c) => c - 6));
     }, 1e3);
-    return () => clearInterval(m);
+    return () => clearInterval(v);
   }, []);
-  const O = R.toLocaleString("en-Us", { hour12: !0, timeZone: g }).split(", ")[1], N = O.split(" ")[0], W = O.split(" ")[1], F = O.split(":").slice(0, 2).join(":"), u = !(Number.isInteger(s) && s > 0), ut = String(Math.floor(s / 60)).padStart(2, "0"), bt = String(s % 60).padStart(2, "0"), ht = `${ut}:${bt}`, L = `${k ? N : F} ${W}`;
-  return /* @__PURE__ */ p(_t, { $color: i, role: "region", "aria-label": "Clock", $size: o, ...it, children: [
-    /* @__PURE__ */ e(vt, { borderRadius: `${t(16.67)({ $size: o })}rem`, "aria-hidden": "true" }),
-    (!u || f) && /* @__PURE__ */ p(U, { children: [
+  const O = x.toLocaleString("en-Us", { hour12: !0, timeZone: l }).split(", ")[1], N = O.split(" ")[0], W = O.split(" ")[1], L = O.split(":").slice(0, 2).join(":"), $ = !(Number.isInteger(s) && s > 0), ut = String(Math.floor(s / 60)).padStart(2, "0"), ht = String(s % 60).padStart(2, "0"), bt = `${ut}:${ht}`, X = `${w ? N : L} ${W}`;
+  return /* @__PURE__ */ g(zt, { $color: r, role: "region", "aria-label": "Clock", $size: i, ...it, children: [
+    /* @__PURE__ */ e(At, { borderRadius: `${t(16.67)({ $size: i })}rem`, "aria-hidden": "true" }),
+    (!$ || y) && /* @__PURE__ */ g(K, { children: [
       /* @__PURE__ */ e(
-        Ut,
+        Qt,
         {
-          $dismissing: f,
-          onAnimationEnd: ct,
+          $dismissing: y,
+          onAnimationEnd: dt,
           "aria-hidden": "true",
           children: /* @__PURE__ */ e(St, { progress: s >= 60 ? 1 : s % 60 / 60 })
         }
       ),
       /* @__PURE__ */ e(
-        oe,
+        se,
         {
-          $size: o,
+          $size: i,
           style: { "--bullet-rotate": `${st}deg` },
-          $dismissing: f,
+          $dismissing: y,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(re, { $size: o })
+          children: /* @__PURE__ */ e(ae, { $size: i })
         }
       ),
       /* @__PURE__ */ e(
-        ee,
+        ne,
         {
           role: "timer",
           "aria-live": "polite",
@@ -313,16 +341,16 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
         }
       )
     ] }),
-    w && /* @__PURE__ */ p(U, { children: [
-      /* @__PURE__ */ e(Et, { "aria-hidden": "true", $size: o, children: /* @__PURE__ */ e(Nt, { children: /* @__PURE__ */ e(Wt, { "aria-hidden": "true", children: [...Array(60)].map((m, l) => /* @__PURE__ */ e(Ht, { $i: l, $size: o }, l)) }) }) }),
-      A ? /* @__PURE__ */ p(Q, { as: "time", dateTime: R.toISOString(), "aria-label": L, children: [
-        /* @__PURE__ */ e(V, { $size: o, "aria-hidden": "true", children: k ? N : F }),
-        /* @__PURE__ */ e(V, { $size: o, "aria-hidden": "true", children: W })
-      ] }) : /* @__PURE__ */ p(Q, { as: "time", dateTime: R.toISOString(), "aria-label": L, children: [
+    u && /* @__PURE__ */ g(K, { children: [
+      /* @__PURE__ */ e(_t, { "aria-hidden": "true", $size: i, children: /* @__PURE__ */ e(Ht, { children: /* @__PURE__ */ e(Nt, { "aria-hidden": "true", children: [...Array(60)].map((v, b) => /* @__PURE__ */ e(Ft, { $i: b, $size: i }, b)) }) }) }),
+      h ? /* @__PURE__ */ g(Q, { as: "time", dateTime: x.toISOString(), "aria-label": X, children: [
+        /* @__PURE__ */ e(V, { $size: i, "aria-hidden": "true", children: w ? N : L }),
+        /* @__PURE__ */ e(V, { $size: i, "aria-hidden": "true", children: W })
+      ] }) : /* @__PURE__ */ g(Q, { as: "time", dateTime: x.toISOString(), "aria-label": X, children: [
         /* @__PURE__ */ e(
-          Ft,
+          Wt,
           {
-            $size: o,
+            $size: i,
             style: { "--hand-rotate": `${I.hour}deg` },
             "aria-hidden": "true"
           }
@@ -330,87 +358,87 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
         /* @__PURE__ */ e(
           Lt,
           {
-            $size: o,
+            $size: i,
             style: { "--hand-rotate": `${I.minute}deg` },
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ e(
-          Yt,
+          Xt,
           {
-            $size: o,
+            $size: i,
             style: { "--hand-rotate": `${I.second}deg` },
             "aria-hidden": "true"
           }
         )
       ] })
     ] }),
-    a > 0 && /* @__PURE__ */ p(
-      qt,
+    a > 0 && /* @__PURE__ */ g(
+      Zt,
       {
-        $size: o,
-        $noActions: u,
+        $size: i,
+        $noActions: $,
         role: "group",
         "aria-label": "Timer controls",
         children: [
           /* @__PURE__ */ e(
-            v,
+            T,
             {
               type: "button",
-              onClick: dt,
-              $size: o,
+              onClick: ct,
+              $size: i,
               "aria-label": "Stop timer",
-              "aria-disabled": u,
-              children: /* @__PURE__ */ e(Vt, { color: c, size: C, "aria-hidden": "true" })
+              "aria-disabled": $,
+              children: /* @__PURE__ */ e(re, { color: m, size: C, "aria-hidden": "true" })
             }
           ),
-          u || !T ? /* @__PURE__ */ e(
-            v,
+          $ || !k ? /* @__PURE__ */ e(
+            T,
             {
               type: "button",
               onClick: mt,
-              $size: o,
+              $size: i,
               "aria-label": "Pause timer",
-              "aria-disabled": u,
-              children: /* @__PURE__ */ e(Zt, { color: c, size: C, "aria-hidden": "true" })
+              "aria-disabled": $,
+              children: /* @__PURE__ */ e(oe, { color: m, size: C, "aria-hidden": "true" })
             }
-          ) : /* @__PURE__ */ e(v, { type: "button", onClick: pt, "aria-label": "Resume timer", $size: o, children: /* @__PURE__ */ e(te, { color: c, size: C, "aria-hidden": "true" }) })
+          ) : /* @__PURE__ */ e(T, { type: "button", onClick: pt, "aria-label": "Resume timer", $size: i, children: /* @__PURE__ */ e(ie, { color: m, size: C, "aria-hidden": "true" }) })
         ]
       }
     ),
-    (!u || f) && /* @__PURE__ */ p(
-      Kt,
+    (!$ || y) && /* @__PURE__ */ g(
+      Vt,
       {
-        $size: o,
-        $dismissing: f,
+        $size: i,
+        $dismissing: y,
         "aria-label": `${s} seconds remaining`,
         children: [
           /* @__PURE__ */ e(
-            Rt,
+            xt,
             {
               color: "rgba(255,255,255,0.82)",
               style: { width: "1em", height: "1em", flexShrink: 0 }
             }
           ),
-          ht.split("").map(
-            (m, l) => m === ":" ? /* @__PURE__ */ e("span", { children: m }, l) : /* @__PURE__ */ e(Gt, { children: m }, `${l}-${m}`)
+          bt.split("").map(
+            (v, b) => v === ":" ? /* @__PURE__ */ e(Ut, { children: ":" }, `colon-${s}`) : /* @__PURE__ */ e(le, { value: v }, b)
           )
         ]
       }
     ),
-    a > 0 && /* @__PURE__ */ e(Jt, { role: "group", $size: o, "aria-label": "Start timer", children: /* @__PURE__ */ e(
-      v,
+    a > 0 && /* @__PURE__ */ e(te, { role: "group", $size: i, "aria-label": "Start timer", children: /* @__PURE__ */ e(
+      T,
       {
         type: "button",
         onClick: lt,
-        $size: o,
+        $size: i,
         "aria-label": `Start ${a} second timer`,
-        children: /* @__PURE__ */ e(Qt, { color: c, size: o, "aria-hidden": "true" })
+        children: /* @__PURE__ */ e(ee, { color: m, size: i, "aria-hidden": "true" })
       }
     ) })
   ] });
 };
-ne.propTypes = {
+de.propTypes = {
   /** Color theme key for the clock and accent elements. Defaults to `'green'` */
   color: n.string,
   /** Diameter of the clock in pixels. Defaults to `30` */
@@ -437,5 +465,5 @@ ne.propTypes = {
   onTimerPlay: n.func
 };
 export {
-  ne as default
+  de as default
 };

package/package.json

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