meticulous-ui 2.6.2 → 2.7.0

package/components/OtpInput/OtpInput.js

@@ -1,13 +1,13 @@
-import { jsx as j } from "react/jsx-runtime";
-import { useState as A, useRef as y, useEffect as E } from "react";
-import { OTPWrapper as I } from "./styles.js";
-import { renderNums as P } from "./helpers.js";
-const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
-  const [a, D] = A(Array(r).fill("")), d = y([]), w = y(a), o = y(!1), f = (s) => {
+import { jsx as A } from "react/jsx-runtime";
+import { useState as E, useRef as y, useEffect as I } from "react";
+import { OTPWrapper as P } from "./styles.js";
+import { renderNums as b } from "./helpers.js";
+const B = ({ length: r = 6, value: p = "", onChange: u, onComplete: e, ...O }) => {
+  const [a, D] = E(Array(r).fill("")), d = y([]), w = y(a), o = y(!1), f = (s) => {
     var t;
     o.current = !0, (t = d.current[s]) == null || t.focus();
   };
-  E(() => {
+  I(() => {
     if (!p) return;
     const s = String(p).replace(/\D/g, "").slice(0, r), t = s.split("");
     for (; t.length < r; ) t.push("");
@@ -17,11 +17,11 @@ const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
     w.current = s, D(s);
     const t = s.join("");
     u == null || u(t), t.length === r && (e == null || e(t));
-  }, O = (s, t) => {
+  }, k = (s, t) => {
     s = s.replace(/\D/g, "").slice(-1);
     const c = [...a];
     c[t] = s, l(c), s && t < r - 1 && f(t + 1);
-  }, k = (s, t) => {
+  }, m = (s, t) => {
     const c = a.findIndex((n) => n === ""), i = c === -1 ? r - 1 : c;
     if (s.key === "Backspace") {
       if (s.preventDefault(), a[t]) {
@@ -30,7 +30,7 @@ const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
       }
       t > 0 && f(t - 1);
     } else s.key === "ArrowLeft" && t > 0 ? (s.preventDefault(), f(t - 1)) : s.key === "ArrowRight" ? (s.preventDefault(), t + 1 <= i && f(t + 1)) : s.key === "Tab" && (s.preventDefault(), s.shiftKey ? t > 0 && f(t - 1) : f(i));
-  }, m = (s) => {
+  }, R = (s) => {
     if (o.current) {
       o.current = !1;
       return;
@@ -38,22 +38,23 @@ const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
     const t = w.current.findIndex((i) => i === ""), c = t === -1 ? r - 1 : t;
     s !== c && f(c);
   };
-  return /* @__PURE__ */ j(
-    I,
+  return /* @__PURE__ */ A(
+    P,
     {
       style: { display: "flex", gap: "10px", justifyContent: "center" },
       onPaste: (s) => {
         const t = s.clipboardData.getData("text").replace(/\D/g, "");
         if (!t) return;
         const c = Array(r).fill("");
-        t.slice(0, r).split("").forEach((n, R) => c[R] = n), l(c);
+        t.slice(0, r).split("").forEach((n, j) => c[j] = n), l(c);
         const i = Math.min(t.length - 1, r - 1);
         f(i);
       },
-      children: a.map(P({ inputsRef: d, handleChange: O, handleKeyDown: k, handleFocus: m }))
+      ...O,
+      children: a.map(b({ inputsRef: d, handleChange: k, handleKeyDown: m, handleFocus: R }))
     }
   );
 };
 export {
-  T as default
+  B as default
 };

package/components/Pagination/Pagination.js

@@ -1,32 +1,33 @@
 import { jsxs as l, jsx as f } from "react/jsx-runtime";
-import { useRef as x, useEffect as _ } from "react";
+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 K from "../../colors/index.js";
-import a from "../../colors/teal.js";
-import { ICON_SIZE_MAPPING as j, MEDIUM as G, SIZE_REM_MAPPING as L } from "./constants.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 k = ({
+const B = ({
   pageNumber: r,
-  setPageNumber: E,
+  setPageNumber: S,
   totalPages: n,
-  theme: S = "lime",
-  size: o = G,
-  isDisabled: D = !1
+  theme: _ = "lime",
+  size: o = L,
+  isDisabled: D = !1,
+  ...x
 }) => {
-  const s = x(null), h = x(!1);
-  _(() => {
+  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());
   }, [r]);
   const c = (i) => {
-    i !== r && E(i);
+    i !== r && S(i);
   }, 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 = K[S] ?? a, I = L[o], t = j[o];
+  }, e = a[_] ?? j, I = P[o], t = G[o];
   return n <= 7 ? /* @__PURE__ */ l(
     u,
     {
@@ -34,6 +35,7 @@ const k = ({
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
+      ...x,
       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(
@@ -49,6 +51,7 @@ const k = ({
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
+      ...x,
       children: [
         /* @__PURE__ */ f(M, { iconSize: t, shades: e, setPrevPage: A }),
         /* @__PURE__ */ l(v, { size: `${9 * I}rem`, children: [
@@ -87,5 +90,5 @@ const k = ({
   );
 };
 export {
-  k as default
+  B as default
 };

package/components/Selectbox/Selectbox.js

@@ -1,12 +1,12 @@
 import { jsxs as $, jsx as i } from "react/jsx-runtime";
-import { useState as C, useId as T, useRef as v, useMemo as se, useEffect as I, useLayoutEffect as ce, useCallback as le } from "react";
+import { useState as C, useId as T, useRef as v, useMemo as ce, useEffect as I, useLayoutEffect as le, useCallback as ae } from "react";
 import O from "../../colors/grey.js";
-import ae from "../../colors/index.js";
-import ue from "../../colors/blue.js";
-import de from "../Input/Checkbox/Checkbox.js";
+import ue from "../../colors/index.js";
+import de from "../../colors/blue.js";
+import pe from "../Input/Checkbox/Checkbox.js";
 import U from "../Spinner/Spinner.js";
-import { SelectBoxWrapper as pe, Box as fe, PWrapper as me, ChevronDownWrapper as he, OptionWrapper as be, SearchContainer as ge, SearchIcon as xe, SearchInput as we, OptionsList as $e, LoadMoreSentinel as Ce, SpinnerWrapper as Ie, CheckboxItem as ke } from "./styles.js";
-const Se = (o) => {
+import { SelectBoxWrapper as fe, Box as me, PWrapper as he, ChevronDownWrapper as be, OptionWrapper as ge, SearchContainer as xe, SearchIcon as we, SearchInput as $e, OptionsList as Ce, LoadMoreSentinel as Ie, SpinnerWrapper as ke, CheckboxItem as Se } from "./styles.js";
+const ye = (o) => {
   if (typeof o != "string") return o;
   if (o.endsWith("px")) return parseFloat(o);
   if (o.endsWith("rem")) {
@@ -14,7 +14,7 @@ const Se = (o) => {
     return E * c;
   }
   return parseFloat(o);
-}, We = ({
+}, Ae = ({
   options: o,
   onChange: E,
   value: c = [],
@@ -29,12 +29,13 @@ const Se = (o) => {
   onLoadMore: l,
   hasMore: b = !1,
   isLoadingMore: a = !1,
-  loaderColor: W
+  loaderColor: W,
+  ...G
 }) => {
-  const [r, g] = C(!1), [G, A] = C(!1), [J, X] = C("bottom"), [S, P] = C(""), [s, x] = C(-1), y = T(), H = T(), u = v(null), w = v(null), z = v(null), V = v(null), Y = () => !m && !k && g((e) => !e), B = (e) => {
+  const [r, g] = C(!1), [J, A] = C(!1), [X, Y] = C("bottom"), [S, P] = C(""), [s, x] = C(-1), y = T(), H = T(), u = v(null), w = v(null), z = v(null), V = v(null), Z = () => !m && !k && g((e) => !e), B = (e) => {
     const t = c.includes(e) ? c.filter((n) => n !== e) : [...c, e];
     E(t);
-  }, d = se(() => {
+  }, d = ce(() => {
     if (!h || !S.trim()) return o;
     const e = S.toLowerCase();
     return o.filter(({ label: t }) => t.toLowerCase().includes(e));
@@ -57,29 +58,29 @@ const Se = (o) => {
       u.current && !u.current.contains(t.target) && g(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ce(() => {
+  }, []), le(() => {
     if (r && w.current && u.current) {
-      const e = u.current.getBoundingClientRect(), t = window.innerHeight, n = Se(F), p = t - e.bottom;
-      X(
+      const e = u.current.getBoundingClientRect(), t = window.innerHeight, n = ye(F), p = t - e.bottom;
+      Y(
         p < n + 8 && e.top > p ? "top" : "bottom"
       );
     }
   }, [r, F]);
-  const Z = (e) => {
+  const _ = (e) => {
     let t = e + 1;
     for (; t < d.length; ) {
       if (!d[t].disabled) return t;
       t++;
     }
     return e;
-  }, _ = (e) => {
+  }, L = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
       if (!d[t].disabled) return t;
       t--;
     }
     return e;
-  }, j = le(() => {
+  }, j = ae(() => {
     b && !a && l && l();
   }, [b, a, l]);
   I(() => {
@@ -93,7 +94,7 @@ const Se = (o) => {
     );
     return t.observe(e), () => t.disconnect();
   }, [j, l, b, a]);
-  const L = (e) => {
+  const M = (e) => {
     if (!(m || k)) {
       if (!r) {
         (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), g(!0));
@@ -102,12 +103,12 @@ const Se = (o) => {
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
-          const n = Z(s);
+          const n = _(s);
           n === s && b && !a && (l == null || l()), x(n);
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), x(_(s));
+          e.preventDefault(), x(L(s));
           break;
         }
         case "Enter":
@@ -122,14 +123,14 @@ const Se = (o) => {
       }
     }
   }, {
-    m50: M,
-    m100: ee,
+    m50: ee,
+    m100: te,
     m500: K,
-    m800: te
-  } = ae[N] ?? ue, re = (e, t) => () => !e && x(t), Q = (e) => `${y}-opt-${e}`, ne = c.length === 0 ? q : `${c.length} selected`, oe = ({ value: e, label: t, disabled: n }, p) => {
+    m800: re
+  } = ue[N] ?? de, ne = (e, t) => () => !e && x(t), Q = (e) => `${y}-opt-${e}`, oe = c.length === 0 ? q : `${c.length} selected`, ie = ({ value: e, label: t, disabled: n }, p) => {
     const D = c.includes(e);
     return /* @__PURE__ */ i(
-      ke,
+      Se,
       {
         id: Q(p),
         role: "option",
@@ -138,20 +139,20 @@ const Se = (o) => {
         $width: `calc(${f} + 1rem)`,
         $isHighlighted: p === s,
         $isDisabled: n,
-        $hoverColor: M,
-        $activeColor: ee,
+        $hoverColor: ee,
+        $activeColor: te,
         onClick: () => B(e),
-        onMouseEnter: re(n, p),
+        onMouseEnter: ne(n, p),
         title: t,
-        children: /* @__PURE__ */ i("div", { onClick: (ie) => ie.stopPropagation(), children: /* @__PURE__ */ i(
-          de,
+        children: /* @__PURE__ */ i("div", { onClick: (se) => se.stopPropagation(), children: /* @__PURE__ */ i(
+          pe,
           {
             value: D,
             onChange: () => B(e),
             label: t,
             disabled: n,
             innerShade: K,
-            outerShade: te,
+            outerShade: re,
             tabIndex: -1
           }
         ) })
@@ -160,29 +161,30 @@ const Se = (o) => {
     );
   };
   return /* @__PURE__ */ $(
-    pe,
+    fe,
     {
       ref: u,
       $width: f,
       $isDisabled: m,
       $isLoading: k,
-      onKeyDown: L,
+      onKeyDown: M,
       onBlur: (e) => {
         var t;
         (t = u.current) != null && t.contains(e.relatedTarget) || (A(!1), g(!1));
       },
       onFocus: () => A(!0),
+      ...G,
       children: [
         /* @__PURE__ */ $(
-          fe,
+          me,
           {
             id: H,
             role: "button",
             $width: f,
-            onClick: Y,
+            onClick: Z,
             $isOpen: r,
             $border: K,
-            $isFocused: G && !r,
+            $isFocused: J && !r,
             tabIndex: m ? -1 : 0,
             "aria-haspopup": "listbox",
             "aria-expanded": r,
@@ -190,16 +192,16 @@ const Se = (o) => {
             "aria-disabled": m || void 0,
             "aria-activedescendant": s !== -1 ? Q(s) : void 0,
             children: [
-              /* @__PURE__ */ i(me, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: ne }),
-              /* @__PURE__ */ i(he, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ i(he, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: oe }),
+              /* @__PURE__ */ i(be, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ $(be, { $isOpen: r, $width: f, $height: F, $top: J === "top", children: [
-          h && /* @__PURE__ */ $(ge, { onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ i(xe, { size: 20, color: O.m600, "aria-hidden": !0 }),
+        /* @__PURE__ */ $(ge, { $isOpen: r, $width: f, $height: F, $top: X === "top", children: [
+          h && /* @__PURE__ */ $(xe, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ i(we, { size: 20, color: O.m600, "aria-hidden": !0 }),
             /* @__PURE__ */ i(
-              we,
+              $e,
               {
                 ref: z,
                 value: S,
@@ -215,7 +217,7 @@ const Se = (o) => {
             )
           ] }),
           /* @__PURE__ */ $(
-            $e,
+            Ce,
             {
               ref: w,
               role: "listbox",
@@ -224,17 +226,17 @@ const Se = (o) => {
               "aria-multiselectable": !0,
               "aria-labelledby": H,
               children: [
-                d.map(oe),
-                l && /* @__PURE__ */ i(Ce, { ref: V, children: a && /* @__PURE__ */ i(U, { size: "small", color: W }) })
+                d.map(ie),
+                l && /* @__PURE__ */ i(Ie, { ref: V, children: a && /* @__PURE__ */ i(U, { size: "small", color: W }) })
               ]
             }
           )
         ] }),
-        k && /* @__PURE__ */ i(Ie, { children: /* @__PURE__ */ i(U, { size: "small", color: W }) })
+        k && /* @__PURE__ */ i(ke, { children: /* @__PURE__ */ i(U, { size: "small", color: W }) })
       ]
     }
   );
 };
 export {
-  We as default
+  Ae as default
 };

package/components/Shimmer/Shimmer.js

@@ -1,9 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
-import { ShimmerWrapper as m } from "./styles.js";
+import { jsx as n } from "react/jsx-runtime";
+import { ShimmerWrapper as u } from "./styles.js";
 const e = (r) => {
   if (r != null)
     return typeof r == "number" ? `${r}rem` : r;
-}, p = ({ width: r = "100%", height: t = "100%", label: o = "Loading..." }) => /* @__PURE__ */ i(m, { role: "status", "aria-label": o, width: e(r), height: e(t) });
+}, p = ({ width: r = "100%", height: t = "100%", borderRadius: o = "0.4rem", label: i = "Loading...", ...m }) => /* @__PURE__ */ n(u, { role: "status", "aria-label": i, $width: e(r), $height: e(t), $borderRadius: e(o), ...m });
 export {
   p as default
 };

package/components/Shimmer/styles.js

@@ -7,9 +7,9 @@ const i = o`
   position: relative;
   overflow: hidden;
   background-color: ${e.m300};
-  border-radius: 0.4rem;
-  width: ${({ width: r }) => r};
-  height: ${({ height: r }) => r};
+  border-radius: ${({ $borderRadius: r }) => r};
+  width: ${({ $width: r }) => r};
+  height: ${({ $height: r }) => r};
 
   &:after {
     content: '';

package/components/Spinner/Spinner.js

@@ -1,18 +1,18 @@
 import { jsx as i } from "react/jsx-runtime";
-import { SpinnerSVG as l, SpinnerCircle as s } from "./styles.js";
-import a from "../../colors/index.js";
-import h from "../../colors/green.js";
-import d from "../../colors/white.js";
-import p from "../../colors/grey.js";
-const c = {
+import { SpinnerSVG as s, SpinnerCircle as a } from "./styles.js";
+import h from "../../colors/index.js";
+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" }
-}, W = ({ color: e = "green", size: o = "medium" }) => {
+}, $ = ({ color: e = "green", size: o = "medium", ...n }) => {
   var t;
-  const { strokeWidth: n, $length: r } = c[o], m = [d, p.m600].includes(e) ? e : (t = a[e] ?? h) == null ? void 0 : t.m500;
+  const { strokeWidth: m, $length: r } = g[o], l = [p, c.m600].includes(e) ? e : (t = h[e] ?? d) == null ? void 0 : t.m500;
   return /* @__PURE__ */ i(
-    l,
+    s,
     {
       viewBox: "0 0 50 50",
       width: r,
@@ -20,15 +20,16 @@ const c = {
       role: "status",
       "aria-label": "Loading",
       "aria-live": "polite",
+      ...n,
       children: /* @__PURE__ */ i(
-        s,
+        a,
         {
           cx: "25",
           cy: "25",
           r: "20",
           fill: "none",
-          stroke: m,
-          strokeWidth: n,
+          stroke: l,
+          strokeWidth: m,
           strokeLinecap: "round"
         }
       )
@@ -36,5 +37,5 @@ const c = {
   );
 };
 export {
-  W as default
+  $ as default
 };

package/components/Timer/Timer.js

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