meticulous-ui 2.8.6 → 2.9.1

package/components/Timer/Timer.js

@@ -1,156 +1,174 @@
-import { jsxs as i, jsx as e, Fragment as F } from "react/jsx-runtime";
-import { useState as n, useRef as oe, useEffect as N } from "react";
-import se from "../Glass/Glass.js";
-import le from "./components/TimerRing/TimerRing.js";
-import m from "../../colors/white.js";
-import { Wrapper as de, Dimmer as ce, DotsWrapper as ue, AllDots as me, Dots as he, Time as v, TimeTxt as E, HourHand as pe, MinuteHand as ge, SecondHand as be, AlarmRing as fe, BulletRing as Te, Bullet as Se, VisuallyHidden as ye, LeftActions as Ae, ActionBtn as h, MediaStopFilledWrapper as $e, MediaPauseFilledWrapper as Re, MediaPlayFilledWrapper as De, RightActions as Pe, AddWrapper as we } from "./styles.js";
-const d = () => {
-}, He = (p) => () => {
-  const a = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: p }).split(", ")[1].split(" ")[0], [b, t, c] = a.split(":").map(Number);
+import { jsxs as n, jsx as e, Fragment as v } from "react/jsx-runtime";
+import { useState as a, useRef as de, useEffect as O } from "react";
+import ce from "../Glass/Glass.js";
+import ue from "./components/TimerRing/TimerRing.js";
+import h from "../../colors/white.js";
+import { Wrapper as me, Dimmer as he, DotsWrapper as pe, AllDots as ge, Dots as be, Time as U, TimeTxt as _, HourHand as fe, MinuteHand as Se, SecondHand as Te, AlarmRing as $e, BulletRing as Ae, Bullet as ye, VisuallyHidden as Re, LeftActions as De, ActionBtn as p, MediaStopFilledWrapper as Pe, MediaPauseFilledWrapper as we, MediaPlayFilledWrapper as He, RightActions as Ie, AddWrapper as Me } from "./styles.js";
+import { getSize as ke } from "./helpers.js";
+const c = () => {
+}, Ce = (g) => () => {
+  const o = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: g }).split(", ")[1].split(" ")[0], [f, r, u] = o.split(":").map(Number);
   return {
-    second: c * 6,
-    minute: t * 6 + c * 0.1,
-    hour: b % 12 * 30 + t * 0.5
+    second: u * 6,
+    minute: r * 6 + u * 0.1,
+    hour: f % 12 * 30 + r * 0.5
   };
-}, ze = ({
-  color: p = "green",
-  showTime: w = !0,
-  showTimeWithSec: g = !0,
-  timeZone: a = "Asia/Kolkata",
-  isDigital: b = !0,
-  timerSeconds: t = 0,
-  onTimerAdd: c = d,
-  onTimerComplete: U = d,
-  onTimerRemove: O = d,
-  onTimerPause: G = d,
-  onTimerPlay: K = d,
-  ..._
+}, ve = ({
+  color: g = "green",
+  showTime: M = !0,
+  showTimeWithSec: b = !0,
+  timeZone: o = "Asia/Kolkata",
+  isDigital: f = !0,
+  timerSeconds: r = 0,
+  onTimerAdd: u = c,
+  onTimerComplete: G = c,
+  onTimerRemove: K = c,
+  onTimerPause: q = c,
+  onTimerPlay: J = c,
+  size: S = 20,
+  ...Q
 }) => {
-  const [f, q] = n(/* @__PURE__ */ new Date()), [o, T] = n(0), [u, S] = n(!1), [y, J] = n(He(a)), [Q, A] = n(0), [$, R] = n(!1), H = oe(u);
-  N(() => {
-    H.current = u;
-  }, [u]);
-  const V = () => {
-    T(t), A(t % 60 * 6), S(!1), c();
-  }, X = () => {
-    R(!0), O();
-  }, Y = () => {
-    T(0), A(0), R(!1);
-  }, Z = () => {
-    S(!0), G();
+  const [T, V] = a(/* @__PURE__ */ new Date()), [s, $] = a(0), [m, A] = a(!1), [y, X] = a(Ce(o)), [Y, R] = a(0), [D, P] = a(!1), k = de(m), t = Math.round(S), w = Math.round(14 * S / 20);
+  O(() => {
+    k.current = m;
+  }, [m]);
+  const Z = () => {
+    $(r), R(r % 60 * 6), A(!1), u();
   }, ee = () => {
-    S(!1), K();
+    P(!0), K();
+  }, te = () => {
+    $(0), R(0), P(!1);
+  }, re = () => {
+    A(!0), q();
+  }, ie = () => {
+    A(!1), J();
   };
-  N(() => {
-    const C = setInterval(() => {
-      const l = /* @__PURE__ */ new Date();
-      q(l), J((r) => {
-        const te = l.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [re, L, j] = te.split(":").map(Number), ie = j * 6, ne = L * 6 + j * 0.1, ae = re % 12 * 30 + L * 0.5, P = (x, z) => {
-          const B = x % 360;
-          return x - B + z + (z < B ? 360 : 0);
+  O(() => {
+    const j = setInterval(() => {
+      const d = /* @__PURE__ */ new Date();
+      V(d), X((i) => {
+        const ne = d.toLocaleString("en-Us", { hour12: !0, timeZone: o }).split(", ")[1].split(" ")[0], [ae, x, z] = ne.split(":").map(Number), oe = z * 6, se = x * 6 + z * 0.1, le = ae % 12 * 30 + x * 0.5, I = (B, E) => {
+          const F = B % 360;
+          return B - F + E + (E < F ? 360 : 0);
         };
         return {
-          second: P(r.second, ie),
-          minute: P(r.minute, ne),
-          hour: P(r.hour, ae)
+          second: I(i.second, oe),
+          minute: I(i.minute, se),
+          hour: I(i.hour, le)
         };
-      }), H.current || (T((r) => (r - 1 === 0 && (U(), R(!0)), r - 1)), A((r) => r - 6));
+      }), k.current || ($((i) => (i - 1 === 0 && (G(), P(!0)), i - 1)), R((i) => i - 6));
     }, 1e3);
-    return () => clearInterval(C);
+    return () => clearInterval(j);
   }, []);
-  const D = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], k = D.split(" ")[0], I = D.split(" ")[1], M = D.split(":").slice(0, 2).join(":"), s = !(Number.isInteger(o) && o > 0), W = `${g ? k : M} ${I}`;
-  return /* @__PURE__ */ i(de, { $color: p, role: "region", "aria-label": "Clock", ..._, children: [
-    /* @__PURE__ */ e(se, { borderRadius: "1.2rem", "aria-hidden": "true" }),
-    w && /* @__PURE__ */ i(F, { children: [
-      /* @__PURE__ */ e(ce, { "aria-hidden": "true", children: /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e(me, { "aria-hidden": "true", children: [...Array(60)].map((C, l) => /* @__PURE__ */ e(he, { style: { rotate: `${l * 6}deg` } }, l)) }) }) }),
-      b ? /* @__PURE__ */ i(v, { as: "time", dateTime: f.toISOString(), "aria-label": W, children: [
-        /* @__PURE__ */ e(E, { "aria-hidden": "true", children: g ? k : M }),
-        /* @__PURE__ */ e(E, { "aria-hidden": "true", children: I })
-      ] }) : /* @__PURE__ */ i(v, { as: "time", dateTime: f.toISOString(), "aria-label": W, children: [
+  const H = T.toLocaleString("en-Us", { hour12: !0, timeZone: o }).split(", ")[1], C = H.split(" ")[0], W = H.split(" ")[1], L = H.split(":").slice(0, 2).join(":"), l = !(Number.isInteger(s) && s > 0), N = `${b ? C : L} ${W}`;
+  return /* @__PURE__ */ n(me, { $color: g, role: "region", "aria-label": "Clock", $size: t, ...Q, children: [
+    /* @__PURE__ */ e(ce, { borderRadius: `${ke(16.67)({ $size: t })}rem`, "aria-hidden": "true" }),
+    M && /* @__PURE__ */ n(v, { children: [
+      /* @__PURE__ */ e(he, { "aria-hidden": "true", $size: t, children: /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(ge, { "aria-hidden": "true", children: [...Array(60)].map((j, d) => /* @__PURE__ */ e(be, { $i: d, $size: t }, d)) }) }) }),
+      f ? /* @__PURE__ */ n(U, { as: "time", dateTime: T.toISOString(), "aria-label": N, children: [
+        /* @__PURE__ */ e(_, { $size: t, "aria-hidden": "true", children: b ? C : L }),
+        /* @__PURE__ */ e(_, { $size: t, "aria-hidden": "true", children: W })
+      ] }) : /* @__PURE__ */ n(U, { as: "time", dateTime: T.toISOString(), "aria-label": N, children: [
         /* @__PURE__ */ e(
-          pe,
+          fe,
           {
+            $size: t,
             style: { "--hand-rotate": `${y.hour}deg` },
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ e(
-          ge,
+          Se,
           {
+            $size: t,
             style: { "--hand-rotate": `${y.minute}deg` },
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ e(
-          be,
+          Te,
           {
+            $size: t,
             style: { "--hand-rotate": `${y.second}deg` },
             "aria-hidden": "true"
           }
         )
       ] })
     ] }),
-    (!s || $) && /* @__PURE__ */ i(F, { children: [
+    (!l || D) && /* @__PURE__ */ n(v, { children: [
       /* @__PURE__ */ e(
-        fe,
+        $e,
         {
-          $dismissing: $,
-          onAnimationEnd: Y,
+          $dismissing: D,
+          onAnimationEnd: te,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(le, { progress: o >= 60 ? 1 : o % 60 / 60 })
+          children: /* @__PURE__ */ e(ue, { size: S, progress: s >= 60 ? 1 : s % 60 / 60 })
         }
       ),
       /* @__PURE__ */ e(
-        Te,
+        Ae,
         {
-          style: { "--bullet-rotate": `${45 + Q}deg` },
-          $dismissing: $,
+          $size: t,
+          style: { "--bullet-rotate": `${45 + Y}deg` },
+          $dismissing: D,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(Se, {})
+          children: /* @__PURE__ */ e(ye, { $size: t })
         }
       ),
       /* @__PURE__ */ e(
-        ye,
+        Re,
         {
           role: "timer",
           "aria-live": "polite",
-          "aria-label": `${o} seconds remaining`
+          "aria-label": `${s} seconds remaining`
         }
       )
     ] }),
-    t > 0 && /* @__PURE__ */ i(Ae, { $noActions: s, role: "group", "aria-label": "Timer controls", children: [
-      /* @__PURE__ */ e(
-        h,
-        {
-          type: "button",
-          onClick: X,
-          "aria-label": "Stop timer",
-          "aria-disabled": s,
-          children: /* @__PURE__ */ e($e, { color: m, size: 14, "aria-hidden": "true" })
-        }
-      ),
-      s || !u ? /* @__PURE__ */ e(
-        h,
-        {
-          type: "button",
-          onClick: Z,
-          "aria-label": "Pause timer",
-          "aria-disabled": s,
-          children: /* @__PURE__ */ e(Re, { color: m, size: 14, "aria-hidden": "true" })
-        }
-      ) : /* @__PURE__ */ e(h, { type: "button", onClick: ee, "aria-label": "Resume timer", children: /* @__PURE__ */ e(De, { color: m, size: 14, "aria-hidden": "true" }) })
-    ] }),
-    t > 0 && /* @__PURE__ */ e(Pe, { role: "group", "aria-label": "Start timer", children: /* @__PURE__ */ e(
-      h,
+    r > 0 && /* @__PURE__ */ n(
+      De,
+      {
+        $size: t,
+        $noActions: l,
+        role: "group",
+        "aria-label": "Timer controls",
+        children: [
+          /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              onClick: ee,
+              $size: t,
+              "aria-label": "Stop timer",
+              "aria-disabled": l,
+              children: /* @__PURE__ */ e(Pe, { color: h, size: w, "aria-hidden": "true" })
+            }
+          ),
+          l || !m ? /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              onClick: re,
+              $size: t,
+              "aria-label": "Pause timer",
+              "aria-disabled": l,
+              children: /* @__PURE__ */ e(we, { color: h, size: w, "aria-hidden": "true" })
+            }
+          ) : /* @__PURE__ */ e(p, { type: "button", onClick: ie, "aria-label": "Resume timer", $size: t, children: /* @__PURE__ */ e(He, { color: h, size: w, "aria-hidden": "true" }) })
+        ]
+      }
+    ),
+    r > 0 && /* @__PURE__ */ e(Ie, { role: "group", $size: t, "aria-label": "Start timer", children: /* @__PURE__ */ e(
+      p,
       {
         type: "button",
-        onClick: V,
-        "aria-label": `Start ${t} second timer`,
-        children: /* @__PURE__ */ e(we, { color: m, size: 20, "aria-hidden": "true" })
+        onClick: Z,
+        $size: t,
+        "aria-label": `Start ${r} second timer`,
+        children: /* @__PURE__ */ e(Me, { color: h, size: t, "aria-hidden": "true" })
       }
     ) })
   ] });
 };
 export {
-  ze as default
+  ve as default
 };

package/components/Timer/components/TimerRing/TimerRing.js

@@ -1,42 +1,42 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { useRef as f, useEffect as n } from "react";
-import a from "../../../../colors/white.js";
-import { SVG as l } from "./styles.js";
-const d = ({ progress: t }) => {
-  const s = f(null), e = 105, r = 2 * Math.PI * e;
-  return n(() => {
-    const i = r * (1 - t);
-    s.current.style.strokeDashoffset = i;
-  }, [t]), /* @__PURE__ */ c(l, { width: "220", height: "220", children: [
-    /* @__PURE__ */ o(
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { useRef as i, useEffect as a } from "react";
+import l from "../../../../colors/white.js";
+import { SVG as h } from "./styles.js";
+const p = ({ progress: o, size: r }) => {
+  const s = i(null), t = r * 5.25, e = 2 * Math.PI * t;
+  return a(() => {
+    const f = e * (1 - o);
+    s.current.style.strokeDashoffset = f;
+  }, [o]), /* @__PURE__ */ n(h, { width: r * 11, height: r * 11, children: [
+    /* @__PURE__ */ c(
       "circle",
       {
-        cx: "110",
-        cy: "110",
-        r: e,
+        cx: "50%",
+        cy: "50%",
+        r: t,
         stroke: "rgba(255,255,255,.2)",
-        strokeWidth: "4",
+        strokeWidth: r * 0.2,
         fill: "none"
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ c(
       "circle",
       {
         ref: s,
-        cx: "110",
-        cy: "110",
-        r: e,
-        stroke: a,
-        strokeWidth: "4",
+        cx: "50%",
+        cy: "50%",
+        r: t,
+        stroke: l,
+        strokeWidth: r * 0.2,
         fill: "none",
         strokeLinecap: "round",
-        strokeDasharray: r,
-        strokeDashoffset: r,
+        strokeDasharray: e,
+        strokeDashoffset: e,
         style: { transition: "stroke-dashoffset 0.2s linear" }
       }
     )
   ] });
 };
 export {
-  d as default
+  p as default
 };

package/components/Timer/helpers.js

@@ -0,0 +1,4 @@
+const o = (e) => ({ $size: t }) => t / e;
+export {
+  o as getSize
+};

package/components/Timer/styles.js

@@ -1,195 +1,197 @@
-import t, { css as i, keyframes as a } from "styled-components";
-import s from "../Icons/Add/Add.js";
-import d from "../Icons/MediaStopFilled/MediaStopFilled.js";
-import p from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
-import l from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
-import r from "../../colors/white.js";
-import m from "../../colors/black.js";
-import c from "../../colors/red.js";
-import { COLOR_MAPPING as h } from "./constants.js";
-const u = ({ $color: o }) => h[o], e = i`
+import o, { css as r, keyframes as l } from "styled-components";
+import m from "../Icons/Add/Add.js";
+import p from "../Icons/MediaStopFilled/MediaStopFilled.js";
+import c from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
+import h from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
+import i from "../../colors/white.js";
+import u from "../../colors/black.js";
+import b from "../../colors/red.js";
+import { COLOR_MAPPING as $ } from "./constants.js";
+import { getSize as t } from "./helpers.js";
+const a = 1, f = 16.67, s = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
   border-radius: 4px;
   transition: rotate 0.3s ease-in-out;
   rotate: var(--hand-rotate);
-`, A = t.div`
+`, T = o.div`
   position: relative;
-  height: 20rem;
-  width: 20rem;
-  border-radius: 1.2rem;
-  background-color: ${u};
-`, M = t.div`
+  height: ${t(a)}rem;
+  width: ${t(a)}rem;
+  border-radius: ${t(f)}rem;
+  background-color: ${v};
+`, W = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
-  width: 12rem;
-  height: 12rem;
+  width: ${t(s)}rem;
+  height: ${t(s)}rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
   pointer-events: none;
-`, F = t.div`
+`, _ = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
   transform: translate(-50%, -50%);
-`, H = t.div`
-  color: ${r};
-  font-size: 1.5rem;
+`, F = o.div`
+  color: ${i};
+  font-size: ${t(13.33)}rem;
   font-weight: 600;
   text-align: center;
   opacity: 0.8;
-`, P = t.span`
+`, S = o.span`
   position: absolute;
-  width: 2.4px;
-  height: 2.4px;
+  width: ${t(120)}rem;
+  height: ${t(120)}rem;
   background: rgba(255, 255, 255, 0.4);
-  transform-origin: 5.875rem;
+  transform-origin: ${t(g)}rem;
   border-radius: 2px;
+  rotate: ${({ $i: e }) => `${e * 6}deg`};
 
   &:nth-child(5n) {
-    width: 3px;
-    height: 3px;
+    width: ${t(90)}rem;
+    height: ${t(90)}rem;
     background: rgba(255, 255, 255, 0.7);
   }
 
   &:nth-child(15n) {
-    width: 6px;
-    height: 2px;
+    width: ${t(50)}rem;
+    height: ${t(130)}rem;
     background: rgba(255, 255, 255);
   }
-`, W = t.div`
+`, D = o.div`
   position: relative;
   height: 100%;
   width: 100%;
-`, D = t.div`
+`, H = o.div`
   position: absolute;
   left: 1.6%;
   top: 43.8%;
   transform: translate(-50%, -50%) rotate(6.7deg);
-`, S = t.div`
-  ${e};
-  width: 0.4rem;
-  height: 3.75rem;
-  background: ${r};
-`, R = t.div`
-  ${e};
-  width: 0.25rem;
-  height: 5rem;
-  background: ${m.m200};
-`, B = t.div`
-  ${e};
-  width: 0.15rem;
-  height: 5.5rem;
-  background: ${c.m800};
-`, n = a`
+`, B = o.div`
+  ${n};
+  width: ${t(50)}rem;
+  height: ${t(5.33)}rem;
+  background: ${i};
+`, N = o.div`
+  ${n};
+  width: ${t(80)}rem;
+  height: ${t(4)}rem;
+  background: ${u.m200};
+`, C = o.div`
+  ${n};
+  width: ${t(133.33)}rem;
+  height: ${t(3.64)}rem;
+  background: ${b.m800};
+`, d = l`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.85); }
-`, C = t.div`
+`, E = o.div`
   position: absolute;
   left: 16%;
   top: 14%;
-  ${({ $dismissing: o }) => o && i`
-      animation: ${n} 0.4s ease-out forwards;
+  ${({ $dismissing: e }) => e && r`
+      animation: ${d} 0.4s ease-out forwards;
     `}
-`, T = t.div`
+`, z = o.div`
   position: absolute;
   bottom: 6%;
   left: 8%;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: ${t(50)}rem;
 
-  ${({ $noActions: o }) => o && i`
+  ${({ $noActions: e }) => e && r`
       pointer-events: none;
       opacity: 0.5;
     `}
-`, L = t.div`
+`, G = o.div`
   position: absolute;
   bottom: 6%;
   right: 8%;
-  border-radius: 0.4rem;
-`, N = t.button`
+  border-radius: ${t(50)}rem;
+`, L = o.button`
   position: relative;
-  height: 2.4rem;
-  width: 2.4rem;
+  height: ${t(8.33)}rem;
+  width: ${t(8.33)}rem;
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.4);
   border: none;
-  border-radius: 0.4rem;
+  border-radius: ${t(50)}rem;
   padding: 0;
 
   &:focus-visible {
-    outline: 2px solid ${r};
+    outline: 2px solid ${i};
     outline-offset: 2px;
   }
-`, O = t(s)`
+`, V = o(m)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, _ = t(d)`
+`, j = o(p)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, z = t(p)`
+`, q = o(c)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, G = t(l)`
+`, J = o(h)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, I = t.span`
+`, K = o.span`
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
-`, V = t.div`
-  width: 9px;
-  height: 9px;
+`, Q = o.div`
+  width: ${t(35)}rem;
+  height: ${t(35)}rem;
   border-radius: 50%;
-  background-color: ${r};
-`, j = t.div`
+  background-color: ${i};
+`, U = o.div`
   position: absolute;
   left: 26%;
   top: 24%;
   rotate: var(--bullet-rotate);
-  height: 157.5px;
-  width: 157.5px;
+  height: ${t(2.05)}rem;
+  width: ${t(2.05)}rem;
   transform-origin: center;
   transition: rotate 0.3s ease;
-  ${({ $dismissing: o }) => o && i`
-      animation: ${n} 0.4s ease-out forwards;
+  ${({ $dismissing: e }) => e && r`
+      animation: ${d} 0.4s ease-out forwards;
     `}
 `;
 export {
-  N as ActionBtn,
-  O as AddWrapper,
-  C as AlarmRing,
-  D as AllDots,
-  V as Bullet,
-  j as BulletRing,
-  M as Dimmer,
-  P as Dots,
-  W as DotsWrapper,
-  S as HourHand,
-  T as LeftActions,
-  z as MediaPauseFilledWrapper,
-  G as MediaPlayFilledWrapper,
-  _ as MediaStopFilledWrapper,
-  R as MinuteHand,
-  L as RightActions,
-  B as SecondHand,
-  F as Time,
-  H as TimeTxt,
-  I as VisuallyHidden,
-  A as Wrapper
+  L as ActionBtn,
+  V as AddWrapper,
+  E as AlarmRing,
+  H as AllDots,
+  Q as Bullet,
+  U as BulletRing,
+  W as Dimmer,
+  S as Dots,
+  D as DotsWrapper,
+  B as HourHand,
+  z as LeftActions,
+  q as MediaPauseFilledWrapper,
+  J as MediaPlayFilledWrapper,
+  j as MediaStopFilledWrapper,
+  N as MinuteHand,
+  G as RightActions,
+  C as SecondHand,
+  _ as Time,
+  F as TimeTxt,
+  K as VisuallyHidden,
+  T as Wrapper
 };

package/package.json

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