@cronocode/react-box 3.1.2 → 3.1.6

package/core.mjs

@@ -1,80 +1,80 @@
-import { jsx as h, jsxs as pe } from "react/jsx-runtime";
-import he, { useContext as we, useState as se, useLayoutEffect as ie, useMemo as J, useEffect as ne, useRef as xe } from "react";
-import Fe from "./box.mjs";
-import O from "./components/baseSvg.mjs";
-function ue(...e) {
-  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ue(...r)), t) : (Object.entries(r).forEach(([o, i]) => {
-    i && t.push(o);
-  }), t) : t, []);
+import we, { useContext as xe, useState as de, useLayoutEffect as ae, useMemo as le, useEffect as ge, useRef as Fe } from "react";
+import { jsx as z } from "react/jsx-runtime";
+import T from "./components/baseSvg.mjs";
+import Ne from "./box.mjs";
+function fe(...e) {
+  return e.reduce((r, l) => l ? typeof l == "string" ? (r.push(l), r) : Array.isArray(l) ? (r.push(...fe(...l)), r) : (Object.entries(l).forEach(([a, o]) => {
+    o && r.push(a);
+  }), r) : r, []);
 }
-const U = 4;
-var a;
+const Y = 4;
+var t;
 ((e) => {
-  ((t) => {
-    function r(i, n) {
-      return `${i}${n.replace("/", "-")}`;
-    }
-    t.fraction = r;
-    function o(i) {
-      return [`${i} path`, `${i} circle`, `${i} rect`, `${i} line`];
-    }
-    t.svg = o;
-  })(e.ClassName || (e.ClassName = {})), ((t) => {
-    function r(v, c, f = U) {
-      return `${v / f}rem`;
-    }
-    t.rem = r;
-    function o(v) {
-      return `${v}px`;
-    }
-    t.px = o;
-    function i(v) {
-      const [c, f] = v.split("/");
-      return `${+c / +f * 100}%`;
-    }
-    t.fraction = i;
-    function n(v, c) {
-      switch (c) {
+  ((r) => {
+    function l(o, n) {
+      return `${o}${n.replace("/", "-")}`;
+    }
+    r.fraction = l;
+    function a(o) {
+      return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
+    }
+    r.svg = a;
+  })(e.ClassName || (e.ClassName = {})), ((r) => {
+    function l(x, C, R = Y) {
+      return `${x / R}rem`;
+    }
+    r.rem = l;
+    function a(x) {
+      return `${x}px`;
+    }
+    r.px = a;
+    function o(x) {
+      const [C, R] = x.split("/");
+      return `${+C / +R * 100}%`;
+    }
+    r.fraction = o;
+    function n(x, C) {
+      switch (C) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return v.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return x.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return c;
+          return C;
       }
     }
-    t.widthHeight = n;
-    function u(v) {
-      return (c, f) => `var(--${v}${f});`;
+    r.widthHeight = n;
+    function s(x) {
+      return (C, R) => `var(--${x}${R});`;
     }
-    t.variables = u;
-    function s(v) {
-      return (c, f) => `var(--${v}${f});`;
+    r.variables = s;
+    function u(x) {
+      return (C, R) => `var(--${x}${R});`;
     }
-    t.svgVariables = s;
-    function d(v, c) {
-      return `repeat(${c},minmax(0,1fr))`;
+    r.svgVariables = u;
+    function i(x, C) {
+      return `repeat(${C},minmax(0,1fr))`;
     }
-    t.gridColumns = d;
-    function b(v, c) {
-      return c === "full-row" ? "1/-1" : `span ${c}/span ${c}`;
+    r.gridColumns = i;
+    function m(x, C) {
+      return C === "full-row" ? "1/-1" : `span ${C}/span ${C}`;
     }
-    t.gridColumn = b;
-    function l(v, c) {
-      return `${c}ms`;
+    r.gridColumn = m;
+    function f(x, C) {
+      return `${C}ms`;
     }
-    t.ms = l;
-    function g(v, c) {
-      return `${c}deg`;
+    r.ms = f;
+    function y(x, C) {
+      return `${C}deg`;
     }
-    t.rotate = g;
-    function p(v, c) {
-      return c === "xAxis" ? "-1 1" : "1 -1";
+    r.rotate = y;
+    function k(x, C) {
+      return C === "xAxis" ? "-1 1" : "1 -1";
     }
-    t.flip = p;
+    r.flip = k;
   })(e.Value || (e.Value = {}));
-})(a || (a = {}));
-var G;
+})(t || (t = {}));
+var X;
 ((e) => {
   e.colors = {
     currentColor: "currentColor",
@@ -328,7 +328,21 @@ var G;
     "rose-800": "#9f1239",
     "rose-900": "#881337",
     "rose-950": "#4c0519"
-  }, e.percentages = [
+  }, e.colorValues = Object.keys(e.colors), e.colorValues.push("none"), e.bgImages = {
+    "gradient-primary": "linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)",
+    "gradient-aurora-light": "radial-gradient(900px circle at 18% 18%, rgba(99, 102, 241, 0.12), transparent 46%), radial-gradient(780px circle at 82% 12%, rgba(14, 165, 233, 0.1), transparent 45%), radial-gradient(960px circle at 48% 78%, rgba(236, 72, 153, 0.08), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.88) 100%)",
+    "gradient-aurora-dark": "radial-gradient(900px circle at 18% 18%, rgba(129, 140, 248, 0.16), transparent 46%), radial-gradient(820px circle at 82% 10%, rgba(45, 212, 191, 0.12), transparent 48%), radial-gradient(980px circle at 50% 80%, rgba(59, 130, 246, 0.12), transparent 55%), linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%)",
+    "gradient-accent": "linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%)",
+    // checkbox/radio images
+    "bg-img-checked": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>")}")`,
+    "bg-img-indeterminate": `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><line stroke='${e.colors["violet-400"]}' x1='4' y1='10' x2='16' y2='10' stroke-width='1' /></svg>`)}")`,
+    "bg-img-radio": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><circle fill='#FFF' cx='10' cy='10' r='5'/></svg>")}")`
+  }, e.bgImageValues = Object.keys(e.bgImages), e.bgImageValues.push("none"), e.shadows = {
+    small: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+    medium: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+    large: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px"
+  }, e.shadowValues = Object.keys(e.shadows), e.shadowValues.push("none"), e.percentages = [
+    "1/1",
     "1/2",
     "1/3",
     "2/3",
@@ -355,32 +369,63 @@ var G;
     "9/12",
     "10/12",
     "11/12"
+  ], e.negativePercentages = [
+    "-1/1",
+    "-1/2",
+    "-1/3",
+    "-2/3",
+    "-1/4",
+    "-2/4",
+    "-3/4",
+    "-1/5",
+    "-2/5",
+    "-3/5",
+    "-4/5",
+    "-1/6",
+    "-2/6",
+    "-3/6",
+    "-4/6",
+    "-5/6",
+    "-1/12",
+    "-2/12",
+    "-3/12",
+    "-4/12",
+    "-5/12",
+    "-6/12",
+    "-7/12",
+    "-8/12",
+    "-9/12",
+    "-10/12",
+    "-11/12"
   ];
-  const t = {
+  const l = { ...{
     inherit: "inherit",
-    none: "none",
-    "bg-img-checked": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>")}")`,
-    "bg-img-indeterminate": `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><line stroke='${e.colors["violet-400"]}' x1='4' y1='10' x2='16' y2='10' stroke-width='1' /></svg>`)}")`,
-    "bg-img-radio": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><circle fill='#FFF' cx='10' cy='10' r='5'/></svg>")}")`,
-    "small-shadow": "rgba(0, 0, 0, 0.16) 0px 1px 4px",
-    "medium-shadow": "rgba(0, 0, 0, 0.24) 0px 3px 8px",
-    "large-shadow": "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px"
-  }, r = {};
-  let o = {};
-  function i(s) {
-    return s in o ? r[s] = o[s] : s in t ? r[s] = t[s] : s in e.colors ? r[s] = e.colors[s] : r[s] = s, `var(--${s})`;
+    none: "none"
+  }, ...e.colors, ...e.bgImages, ...e.shadows }, a = {}, o = {};
+  let n = {};
+  function s(y) {
+    return y in a || (y in n ? (o[y] = n[y], a[y] = n[y]) : y in l ? (o[y] = l[y], a[y] = l[y]) : (o[y] = y, a[y] = y)), `var(--${y})`;
+  }
+  e.getVariableValue = s;
+  function u() {
+    return Object.entries(a).map(([y, k]) => `--${y}: ${k};`).join("");
+  }
+  e.generateVariables = u;
+  function i() {
+    const y = { ...o };
+    return Object.keys(o).forEach((k) => delete o[k]), y;
   }
-  e.getVariableValue = i;
-  function n() {
-    return Object.entries(r).map(([s, d]) => `--${s}: ${d};`).join("");
+  e.getPendingVariables = i;
+  function m() {
+    return Object.keys(o).length > 0;
   }
-  e.generateVariables = n;
-  function u(s) {
-    o = s;
+  e.hasPendingVariables = m;
+  function f(y) {
+    n = y;
   }
-  e.setUserVariables = u;
-})(G || (G = {}));
-const y = G, S = {
+  e.setUserVariables = f;
+})(X || (X = {}));
+const d = X, L = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -392,7 +437,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's left and right border. */
@@ -400,7 +445,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-inline-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's top and bottom border. */
@@ -408,7 +453,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-block-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-top-width CSS property sets the width of the top border of an element. */
@@ -416,7 +461,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-top-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-right-width CSS property sets the width of the right border of an element. */
@@ -424,7 +469,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-right-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-bottom-width CSS property sets the width of the bottom border of an element. */
@@ -432,7 +477,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-bottom-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-left-width CSS property sets the width of the left border of an element. */
@@ -440,7 +485,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-left-width",
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The border-style shorthand CSS property sets the line style for all four sides of an element's border. */
@@ -455,7 +500,7 @@ const y = G, S = {
     {
       styleName: "border-radius",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -463,7 +508,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-top-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -471,7 +516,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: ["border-top-right-radius", "border-bottom-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -479,7 +524,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: ["border-bottom-left-radius", "border-bottom-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -487,7 +532,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-bottom-left-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -495,7 +540,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-top-left-radius",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -503,7 +548,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-top-right-radius",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -511,7 +556,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-bottom-right-radius",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -519,7 +564,7 @@ const y = G, S = {
     {
       values: 0,
       styleName: "border-bottom-left-radius",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
@@ -532,51 +577,67 @@ const y = G, S = {
   top: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
+    },
+    {
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.negativePercentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The right CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
   right: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
+    },
+    {
+      values: d.negativePercentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements. */
   bottom: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
+    },
+    {
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.negativePercentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
   left: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
+    },
+    {
+      values: d.negativePercentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand. */
   inset: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
@@ -755,7 +816,7 @@ const y = G, S = {
     {
       styleName: "font-size",
       values: 0,
-      valueFormat: (e) => a.Value.rem(e, void 0, 16)
+      valueFormat: (e) => t.Value.rem(e, void 0, 16)
     },
     {
       styleName: "font-size",
@@ -780,7 +841,7 @@ const y = G, S = {
   gap: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The row-gap CSS property sets the size of the gap (gutter) between an element's rows. */
@@ -788,7 +849,7 @@ const y = G, S = {
     {
       styleName: "row-gap",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The column-gap CSS property sets the size of the gap (gutter) between an element's columns. */
@@ -796,7 +857,7 @@ const y = G, S = {
     {
       styleName: "column-gap",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     }
   ],
   /** The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0. */
@@ -808,7 +869,7 @@ const y = G, S = {
   ],
   /** The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. */
   height: [
-    { values: 0, valueFormat: a.Value.rem },
+    { values: 0, valueFormat: t.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -818,8 +879,8 @@ const y = G, S = {
       valueFormat: () => "100vh"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
@@ -827,7 +888,7 @@ const y = G, S = {
   ],
   /** The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height. */
   minHeight: [
-    { styleName: "min-height", values: 0, valueFormat: a.Value.rem },
+    { styleName: "min-height", values: 0, valueFormat: t.Value.rem },
     {
       styleName: "min-height",
       values: ["fit"],
@@ -840,8 +901,8 @@ const y = G, S = {
     },
     {
       styleName: "min-height",
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
       styleName: "min-height",
@@ -850,7 +911,7 @@ const y = G, S = {
   ],
   /** The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height. */
   maxHeight: [
-    { styleName: "max-height", values: 0, valueFormat: a.Value.rem },
+    { styleName: "max-height", values: 0, valueFormat: t.Value.rem },
     {
       styleName: "max-height",
       values: ["fit"],
@@ -863,8 +924,8 @@ const y = G, S = {
     },
     {
       styleName: "max-height",
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
       styleName: "max-height",
@@ -873,7 +934,7 @@ const y = G, S = {
   ],
   /** The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. */
   width: [
-    { values: 0, valueFormat: a.Value.rem },
+    { values: 0, valueFormat: t.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -883,8 +944,8 @@ const y = G, S = {
       valueFormat: () => "100vw"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
@@ -892,7 +953,7 @@ const y = G, S = {
   ],
   /** The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width. */
   minWidth: [
-    { styleName: "min-width", values: 0, valueFormat: a.Value.rem },
+    { styleName: "min-width", values: 0, valueFormat: t.Value.rem },
     {
       styleName: "min-width",
       values: ["fit"],
@@ -905,8 +966,8 @@ const y = G, S = {
     },
     {
       styleName: "min-width",
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
       styleName: "min-width",
@@ -915,7 +976,7 @@ const y = G, S = {
   ],
   /** The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. */
   maxWidth: [
-    { styleName: "max-width", values: 0, valueFormat: a.Value.rem },
+    { styleName: "max-width", values: 0, valueFormat: t.Value.rem },
     {
       styleName: "max-width",
       values: ["fit"],
@@ -928,8 +989,8 @@ const y = G, S = {
     },
     {
       styleName: "max-width",
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     },
     {
       styleName: "max-width",
@@ -941,7 +1002,7 @@ const y = G, S = {
     {
       styleName: "letter-spacing",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The line-height CSS property sets the height of a line box in horizontal writing modes. In vertical writing modes, it sets the width of a line box. It's commonly used to set the distance between lines of text. On block-level elements in horizontal writing modes, it specifies the preferred height of line boxes within the element, and on non-replaced inline elements, it specifies the height that is used to calculate line box height. */
@@ -949,7 +1010,7 @@ const y = G, S = {
     {
       styleName: "line-height",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     },
     {
       styleName: "line-height",
@@ -969,15 +1030,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. */
@@ -985,15 +1046,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin-inline",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-inline"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. */
@@ -1001,15 +1062,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin-block",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-block"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1017,15 +1078,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin-top",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-top"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1033,15 +1094,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin-right",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-right"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1049,15 +1110,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin-bottom",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-bottom"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1065,15 +1126,15 @@ const y = G, S = {
     {
       values: 0,
       styleName: "margin-left",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-left"
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding CSS shorthand property sets the padding area on all four sides of an element at once. */
@@ -1081,11 +1142,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
@@ -1093,11 +1154,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding-inline",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
@@ -1105,11 +1166,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding-block",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding-top CSS property sets the height of the padding area on the top of an element. */
@@ -1117,11 +1178,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding-top",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding-right CSS property sets the width of the padding area on the right of an element. */
@@ -1129,11 +1190,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding-right",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding-bottom CSS property sets the height of the padding area on the bottom of an element. */
@@ -1141,11 +1202,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding-bottom",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The padding-left CSS property sets the width of the padding area to the left of an element. */
@@ -1153,11 +1214,11 @@ const y = G, S = {
     {
       values: 0,
       styleName: "padding-left",
-      valueFormat: a.Value.rem
+      valueFormat: t.Value.rem
     },
     {
-      values: y.percentages,
-      valueFormat: a.Value.fraction
+      values: d.percentages,
+      valueFormat: t.Value.fraction
     }
   ],
   /** The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. */
@@ -1178,7 +1239,7 @@ const y = G, S = {
     {
       styleName: "outline-width",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border. */
@@ -1193,7 +1254,7 @@ const y = G, S = {
     {
       styleName: "outline-offset",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: t.Value.px
     }
   ],
   /** The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction. */
@@ -1409,69 +1470,79 @@ const y = G, S = {
   /** The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.  */
   color: [
     {
-      values: Object.keys(y.colors),
-      valueFormat: (e, t) => t(e)
+      values: d.colorValues,
+      valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-color CSS property sets the background color of an element. */
   bgColor: [
     {
-      values: Object.keys(y.colors),
-      valueFormat: (e, t) => t(e),
+      values: d.colorValues,
+      valueFormat: (e, r) => r(e),
       styleName: "background-color"
     }
   ],
   /** The border-color shorthand CSS property sets the color of an element's border. */
   borderColor: [
     {
-      values: Object.keys(y.colors),
-      valueFormat: (e, t) => t(e),
+      values: d.colorValues,
+      valueFormat: (e, r) => r(e),
       styleName: "border-color"
     }
   ],
   /** The outline-color CSS property sets the color of an element's outline. */
   outlineColor: [
     {
-      values: Object.keys(y.colors),
-      valueFormat: (e, t) => t(e),
+      values: d.colorValues,
+      valueFormat: (e, r) => r(e),
       styleName: "outline-color"
     }
   ],
   /** The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. */
   fill: [
     {
-      values: Object.keys(y.colors),
-      valueFormat: (e, t) => t(e)
+      values: d.colorValues,
+      valueFormat: (e, r) => r(e)
     }
   ],
   /** The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. */
   stroke: [
     {
-      values: Object.keys(y.colors),
-      valueFormat: (e, t) => t(e)
+      values: d.colorValues,
+      valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-image CSS property sets one or more background images on an element. */
   bgImage: [
     {
-      values: ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"],
-      valueFormat: (e, t) => t(e),
+      values: d.bgImageValues,
+      valueFormat: (e, r) => r(e),
       styleName: "background-image"
     }
   ],
   /** The box-shadow CSS property adds shadow effects around an element's frame */
   shadow: [
     {
-      values: ["small", "medium", "large"],
-      valueFormat: (e, t) => t(`${e}-shadow`),
+      values: d.shadowValues,
+      valueFormat: (e, r) => r(e),
       styleName: "box-shadow"
     }
   ],
-  /** The translateY() CSS function repositions an element vertically on the 2D plane. */
+  /** The translateX() CSS function repositions an element horizontally on the 2D plane. */
   translateX: [
     {
       values: 0,
-      valueFormat: (e) => `translateX(${e / U}rem)`,
+      valueFormat: (e) => `translateX(${e / Y}rem)`,
+      styleName: "transform"
+    },
+    {
+      values: d.percentages,
+      valueFormat: (e) => `translateX(${t.Value.fraction(e)})`,
+      styleName: "transform"
+    },
+    {
+      values: d.negativePercentages,
+      valueFormat: (e) => `translateX(${t.Value.fraction(e)})`,
       styleName: "transform"
     }
   ],
@@ -1479,7 +1550,17 @@ const y = G, S = {
   translateY: [
     {
       values: 0,
-      valueFormat: (e) => `translateY(${e / U}rem)`,
+      valueFormat: (e) => `translateY(${e / Y}rem)`,
+      styleName: "transform"
+    },
+    {
+      values: d.percentages,
+      valueFormat: (e) => `translateY(${t.Value.fraction(e)})`,
+      styleName: "transform"
+    },
+    {
+      values: d.negativePercentages,
+      valueFormat: (e) => `translateY(${t.Value.fraction(e)})`,
       styleName: "transform"
     }
   ],
@@ -1489,8 +1570,14 @@ const y = G, S = {
       values: ["empty"],
       valueFormat: () => "''"
     }
+  ],
+  backdropFilter: [
+    {
+      values: ["none", "blur(12px)", "blur(8px)", "blur(4px)"],
+      styleName: "backdrop-filter"
+    }
   ]
-}, ce = {
+}, me = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1505,32 +1592,34 @@ const y = G, S = {
   hasDisabled: ":has([disabled])",
   before: "::before",
   after: "::after"
-}, k = {
+}, U = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
   disabled: "[disabled]",
   selected: '[aria-selected="true"]'
-}, Ne = {
+}, Ve = {
   theme: ""
-}, Q = { ...ce, ...k, ...Ne }, de = Object.entries(Q).reduce(
-  (e, [t], r) => (e[t] = Math.pow(2, r), e),
+}, W = { ...me, ...U, ...Ve }, ye = Object.entries(W).reduce(
+  (e, [r], l) => (e[r] = Math.pow(2, l), e),
   {}
-), D = Object.entries(Q).reduce(
-  (e, [t]) => {
-    const r = de[t];
-    return Object.entries(e).forEach(([o, i]) => {
-      e[+o + r] = [...i, t];
+), q = Object.entries(W).reduce(
+  (e, [r]) => {
+    const l = ye[r];
+    return Object.entries(e).forEach(([a, o]) => {
+      e[+a + l] = [...o, r];
     }), e;
   },
   { 0: [] }
-), re = {
+), P = {
   hoverGroup: "hover",
   focusGroup: "focus",
   activeGroup: "active",
   disabledGroup: "disabled",
+  selectedGroup: "selected"
+}, ie = {
   theme: "theme"
-}, _ = {
+}, D = {
   /** Styles applied for small screens and larger. >= 640 */
   sm: 640,
   /** Styles applied for medium screens and larger. >= 768 */
@@ -1542,34 +1631,34 @@ const y = G, S = {
   /** Styles applied for 2x extra-large screens and larger. >= 1536 */
   xxl: 1536
 };
-var W;
+var Z;
 ((e) => {
-  function t(n, u, s) {
-    const d = { ...n }, b = d.props || {};
-    return u.forEach((l) => {
-      l in d && (b[l] = d[l], delete d[l]);
-    }), s && Object.entries(s).forEach(([l, g]) => {
-      b[l] = g;
-    }), d.props = b, d;
+  function r(n, s, u) {
+    const i = { ...n }, m = i.props || {};
+    return s.forEach((f) => {
+      f in i && (m[f] = i[f], delete i[f]);
+    }), u && Object.entries(u).forEach(([f, y]) => {
+      m[f] = y;
+    }), i.props = m, i;
   }
-  e.buildProps = t;
-  function r(n) {
+  e.buildProps = r;
+  function l(n) {
     return !!n && typeof n == "object";
   }
-  e.isObject = r;
-  function o(...n) {
-    return n.reduce((u, s) => (Object.keys(s ?? {}).forEach((d) => {
-      const b = u[d], l = s[d];
-      r(l) && "clean" in l && l.clean ? u[d] = l : d in k && typeof l == "boolean" || (d in k && Array.isArray(l) ? u[d] = o(b, l[1] ?? {}) : Array.isArray(b) && Array.isArray(l) ? u[d] = b.concat(...l) : r(b) && r(l) ? u[d] = o(b, l) : u[d] = l);
-    }), u), {});
+  e.isObject = l;
+  function a(...n) {
+    return n.reduce((s, u) => (Object.keys(u ?? {}).forEach((i) => {
+      const m = s[i], f = u[i];
+      l(f) && "clean" in f && f.clean ? s[i] = f : i in U && typeof f == "boolean" || (i in U && Array.isArray(f) ? s[i] = a(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? s[i] = m.concat(...f) : l(m) && l(f) ? s[i] = a(m, f) : s[i] = f);
+    }), s), {});
   }
-  e.mergeDeep = o;
-  function i(n, u) {
-    return n in u;
+  e.mergeDeep = a;
+  function o(n, s) {
+    return n in s;
   }
-  e.isKeyOf = i;
-})(W || (W = {}));
-const C = W, ae = {
+  e.isKeyOf = o;
+})(Z || (Z = {}));
+const S = Z, se = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -1594,42 +1683,131 @@ const C = W, ae = {
   button: {
     styles: {
       display: "inline-flex",
+      ai: "center",
+      jc: "center",
+      gap: 2,
+      bgColor: "indigo-600",
       color: "white",
-      bgColor: "violet-500",
-      borderColor: "violet-500",
-      p: 3,
+      fontWeight: 500,
+      py: 2.5,
+      px: 5,
+      borderRadius: 2,
+      b: 0,
       cursor: "pointer",
-      b: 1,
-      borderRadius: 1,
-      userSelect: "none",
-      lineHeight: 20,
       hover: {
-        bgColor: "violet-600",
-        borderColor: "violet-600"
+        bgColor: "indigo-700"
+      },
+      active: {
+        bgColor: "indigo-800"
+      },
+      focus: {
+        outline: 2,
+        outlineOffset: 2,
+        outlineColor: "indigo-200"
       },
       disabled: {
-        cursor: "not-allowed",
-        bgColor: "violet-50",
+        bgColor: "gray-200",
         color: "gray-400",
-        borderColor: "gray-300"
+        cursor: "not-allowed",
+        hover: {
+          bgColor: "gray-200"
+        }
+      },
+      theme: {
+        dark: {
+          bgColor: "indigo-500",
+          hover: {
+            bgColor: "indigo-400"
+          },
+          active: {
+            bgColor: "indigo-600"
+          },
+          focus: {
+            outlineColor: "indigo-800"
+          },
+          disabled: {
+            bgColor: "gray-800",
+            color: "gray-600",
+            hover: {
+              bgColor: "gray-800"
+            }
+          }
+        }
       }
     },
     variants: {
-      hover: {
-        position: "relative",
-        overflow: "hidden",
-        b: 0,
-        before: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: 0,
-          height: "fit",
-          bgColor: "violet-700",
-          content: "empty",
-          transitionDuration: 300
+      secondary: {
+        bgColor: "white",
+        color: "gray-900",
+        b: 1,
+        borderColor: "gray-300",
+        hover: {
+          bgColor: "gray-50"
+        },
+        active: {
+          bgColor: "gray-100"
+        },
+        focus: {
+          borderColor: "indigo-500",
+          outlineColor: "indigo-100"
+        },
+        disabled: {
+          bgColor: "gray-50",
+          color: "gray-400",
+          borderColor: "gray-200"
+        },
+        theme: {
+          dark: {
+            bgColor: "gray-800",
+            color: "gray-100",
+            borderColor: "gray-700",
+            hover: {
+              bgColor: "gray-700"
+            },
+            active: {
+              bgColor: "gray-600"
+            },
+            focus: {
+              borderColor: "indigo-400",
+              outlineColor: "indigo-900"
+            },
+            disabled: {
+              bgColor: "gray-900",
+              color: "gray-600",
+              borderColor: "gray-800"
+            }
+          }
+        }
+      },
+      ghost: {
+        bgColor: "transparent",
+        color: "gray-700",
+        hover: {
+          bgColor: "gray-100"
+        },
+        active: {
+          bgColor: "gray-200"
         },
-        hover: { before: { width: "fit" } }
+        disabled: {
+          bgColor: "transparent",
+          color: "gray-400"
+        },
+        theme: {
+          dark: {
+            bgColor: "transparent",
+            color: "gray-300",
+            hover: {
+              bgColor: "gray-800"
+            },
+            active: {
+              bgColor: "gray-700"
+            },
+            disabled: {
+              bgColor: "transparent",
+              color: "gray-600"
+            }
+          }
+        }
       }
     }
   },
@@ -1637,26 +1815,53 @@ const C = W, ae = {
     styles: {
       display: "inline-block",
       b: 1,
-      borderColor: "violet-200",
-      bgColor: "violet-50",
-      color: "violet-950",
-      borderRadius: 1,
+      borderColor: "gray-300",
+      bgColor: "white",
+      color: "gray-900",
+      borderRadius: 2,
       p: 3,
-      transition: "none",
+      px: 4,
       lineHeight: 20,
       hover: {
-        borderColor: "violet-300"
+        borderColor: "gray-400"
       },
       focus: {
-        outline: 1,
-        borderColor: "violet-500",
-        outlineColor: "violet-500"
+        outline: 2,
+        outlineOffset: 0,
+        borderColor: "indigo-500",
+        outlineColor: "indigo-200"
       },
       disabled: {
         cursor: "not-allowed",
-        bgColor: "violet-50",
+        bgColor: "gray-100",
         color: "gray-400",
-        borderColor: "gray-300"
+        borderColor: "gray-200"
+      },
+      theme: {
+        dark: {
+          bgColor: "gray-800",
+          color: "gray-100",
+          borderColor: "gray-700",
+          hover: {
+            borderColor: "gray-600"
+          },
+          focus: {
+            borderColor: "indigo-400",
+            outlineColor: "indigo-900"
+          },
+          disabled: {
+            bgColor: "gray-900",
+            color: "gray-600",
+            borderColor: "gray-800"
+          }
+        }
+      }
+    },
+    variants: {
+      compact: {
+        px: 2,
+        py: 1,
+        fontSize: 13
       }
     }
   },
@@ -1664,26 +1869,46 @@ const C = W, ae = {
     styles: {
       display: "inline-block",
       b: 1,
-      borderColor: "violet-200",
-      bgColor: "violet-50",
-      color: "violet-950",
-      borderRadius: 1,
+      borderColor: "gray-300",
+      bgColor: "white",
+      color: "gray-900",
+      borderRadius: 2,
       p: 3,
-      transition: "none",
+      px: 4,
       hover: {
-        borderColor: "violet-300"
+        borderColor: "gray-400"
       },
       focus: {
-        outline: 1,
-        borderColor: "violet-500",
-        outlineColor: "violet-500"
+        outline: 2,
+        outlineOffset: 0,
+        borderColor: "indigo-500",
+        outlineColor: "indigo-200"
       },
       disabled: {
         cursor: "not-allowed",
-        bgColor: "violet-50",
+        bgColor: "gray-100",
         color: "gray-400",
-        borderColor: "gray-300",
+        borderColor: "gray-200",
         resize: "none"
+      },
+      theme: {
+        dark: {
+          bgColor: "gray-800",
+          color: "gray-100",
+          borderColor: "gray-700",
+          hover: {
+            borderColor: "gray-600"
+          },
+          focus: {
+            borderColor: "indigo-400",
+            outlineColor: "indigo-900"
+          },
+          disabled: {
+            bgColor: "gray-900",
+            color: "gray-600",
+            borderColor: "gray-800"
+          }
+        }
       }
     }
   },
@@ -1691,34 +1916,64 @@ const C = W, ae = {
     styles: {
       display: "inline-block",
       appearance: "none",
-      b: 1,
-      borderColor: "violet-300",
+      b: 2,
+      borderColor: "gray-300",
       borderRadius: 1,
       p: 2,
       cursor: "pointer",
-      transition: "none",
       hover: {
-        borderColor: "violet-500"
+        borderColor: "indigo-400"
       },
       focus: {
         outline: 2,
         outlineOffset: 2,
-        outlineColor: "violet-500"
+        outlineColor: "indigo-200"
       },
       checked: {
-        bgColor: "violet-500",
-        borderColor: "violet-500",
+        bgColor: "indigo-500",
+        borderColor: "indigo-500",
         bgImage: "bg-img-checked"
       },
       indeterminate: {
-        color: "violet-500",
+        borderColor: "indigo-500",
         bgImage: "bg-img-indeterminate"
       },
       disabled: {
         cursor: "not-allowed",
-        bgColor: "violet-100",
-        color: "gray-400",
-        borderColor: "gray-300"
+        borderColor: "gray-200",
+        checked: {
+          bgColor: "gray-300"
+        },
+        hover: {
+          borderColor: "gray-200"
+        }
+      },
+      theme: {
+        dark: {
+          borderColor: "gray-600",
+          hover: {
+            borderColor: "indigo-400"
+          },
+          focus: {
+            outlineColor: "indigo-900"
+          },
+          checked: {
+            bgColor: "indigo-500",
+            borderColor: "indigo-500"
+          },
+          indeterminate: {
+            borderColor: "indigo-500"
+          },
+          disabled: {
+            borderColor: "gray-700",
+            checked: {
+              bgColor: "gray-600"
+            },
+            hover: {
+              borderColor: "gray-700"
+            }
+          }
+        }
       }
     },
     variants: {
@@ -1729,72 +1984,122 @@ const C = W, ae = {
     styles: {
       appearance: "none",
       b: 1,
-      borderColor: "violet-300",
+      borderColor: "gray-300",
       borderRadius: 3,
       p: 2,
       cursor: "pointer",
-      transition: "none",
       hover: {
-        borderColor: "violet-500"
+        borderColor: "indigo-400"
       },
       focus: {
         outline: 2,
         outlineOffset: 2,
-        outlineColor: "violet-500"
+        outlineColor: "indigo-200"
       },
       checked: {
-        bgColor: "violet-500",
-        borderColor: "violet-500",
+        bgColor: "indigo-500",
+        borderColor: "indigo-500",
         bgImage: "bg-img-radio"
       },
       disabled: {
+        checked: {
+          bgColor: "gray-300",
+          borderColor: "gray-200"
+        },
         cursor: "not-allowed",
-        bgColor: "violet-100",
-        color: "gray-400",
-        borderColor: "violet-200"
+        borderColor: "gray-200",
+        hover: {
+          borderColor: "gray-200"
+        }
+      },
+      theme: {
+        dark: {
+          borderColor: "gray-600",
+          hover: {
+            borderColor: "indigo-400"
+          },
+          focus: {
+            outlineColor: "indigo-900"
+          },
+          checked: {
+            bgColor: "indigo-500",
+            borderColor: "indigo-500"
+          },
+          disabled: {
+            borderColor: "gray-700",
+            checked: {
+              bgColor: "gray-600"
+            },
+            hover: {
+              borderColor: "gray-700"
+            }
+          }
+        }
       }
     }
   },
   dropdown: {
     styles: {
-      display: "inline-flex",
-      ai: "center",
+      display: "inline-block",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      textAlign: "left",
       gap: 2,
-      jc: "space-between",
       p: 3,
       cursor: "pointer",
-      bgColor: "violet-50",
-      color: "violet-950",
+      bgColor: "white",
+      color: "gray-900",
       b: 1,
-      borderColor: "violet-200",
-      borderRadius: 1,
+      borderColor: "gray-300",
+      borderRadius: 2,
       userSelect: "none",
       lineHeight: 20,
       minWidth: 40,
       transition: "none",
       hover: {
-        borderColor: "violet-300"
+        borderColor: "gray-400"
       },
       focus: {
-        outline: 1,
-        borderColor: "violet-500",
-        outlineColor: "violet-500"
+        outline: 2,
+        outlineOffset: 0,
+        borderColor: "indigo-500",
+        outlineColor: "indigo-200"
       },
       disabled: {
         cursor: "not-allowed",
-        bgColor: "violet-50",
+        bgColor: "gray-100",
         color: "gray-400",
         borderColor: "gray-300"
+      },
+      theme: {
+        dark: {
+          bgColor: "gray-800",
+          color: "gray-100",
+          borderColor: "gray-700",
+          hover: {
+            borderColor: "gray-600"
+          },
+          focus: {
+            borderColor: "indigo-400",
+            outlineColor: "indigo-900"
+          },
+          disabled: {
+            bgColor: "gray-900",
+            color: "gray-500",
+            borderColor: "gray-700"
+          }
+        }
+      }
+    },
+    variants: {
+      compact: {
+        px: 2,
+        py: 1,
+        fontSize: 13
       }
     },
     children: {
-      display: {
-        styles: {
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis",
-          overflow: "hidden"
-        }
-      },
       items: {
         styles: {
           display: "flex",
@@ -1802,15 +2107,21 @@ const C = W, ae = {
           gap: 1,
           p: 1,
           b: 1,
-          borderRadius: 1,
+          borderRadius: 2,
           position: "relative",
-          top: 1,
           bgColor: "white",
           overflow: "auto",
           maxHeight: 62,
-          borderColor: "violet-300",
-          color: "violet-950",
-          shadow: "medium"
+          borderColor: "gray-300",
+          color: "gray-900",
+          shadow: "medium",
+          theme: {
+            dark: {
+              bgColor: "gray-800",
+              borderColor: "gray-700",
+              color: "gray-100"
+            }
+          }
         }
       },
       item: {
@@ -1820,21 +2131,42 @@ const C = W, ae = {
           p: 3,
           cursor: "pointer",
           borderRadius: 1,
+          lineHeight: 20,
           hover: {
             bgColor: "gray-100"
           },
           focus: {
-            bgColor: "violet-50"
+            bgColor: "indigo-50"
           },
           selected: {
-            bgColor: "violet-50",
+            bgColor: "indigo-50",
             cursor: "default",
             hover: {
-              bgColor: "violet-100"
+              bgColor: "indigo-100"
+            }
+          },
+          theme: {
+            dark: {
+              hover: {
+                bgColor: "gray-700"
+              },
+              focus: {
+                bgColor: "gray-700"
+              },
+              selected: {
+                bgColor: "indigo-900",
+                hover: {
+                  bgColor: "indigo-800"
+                }
+              }
             }
           }
         },
         variants: {
+          compact: {
+            px: 2,
+            py: 1
+          },
           multiple: {
             selected: {
               cursor: "pointer"
@@ -1850,16 +2182,36 @@ const C = W, ae = {
           cursor: "pointer",
           lineHeight: 20,
           borderRadius: 1,
-          color: "violet-400",
+          color: "gray-500",
           hover: {
-            bgColor: "violet-50"
+            bgColor: "gray-100"
           },
           focus: {
-            bgColor: "violet-50"
+            bgColor: "gray-100"
           },
           selected: {
-            bgColor: "violet-50",
+            bgColor: "gray-100",
             cursor: "default"
+          },
+          theme: {
+            dark: {
+              color: "gray-400",
+              hover: {
+                bgColor: "gray-700"
+              },
+              focus: {
+                bgColor: "gray-700"
+              },
+              selected: {
+                bgColor: "gray-700"
+              }
+            }
+          }
+        },
+        variants: {
+          compact: {
+            px: 2,
+            py: 1
           }
         }
       },
@@ -1871,16 +2223,36 @@ const C = W, ae = {
           cursor: "pointer",
           lineHeight: 20,
           borderRadius: 1,
-          color: "violet-400",
+          color: "gray-500",
           hover: {
-            bgColor: "violet-50"
+            bgColor: "gray-100"
           },
           focus: {
-            bgColor: "violet-50"
+            bgColor: "gray-100"
           },
           selected: {
-            bgColor: "violet-50",
+            bgColor: "gray-100",
             cursor: "default"
+          },
+          theme: {
+            dark: {
+              color: "gray-400",
+              hover: {
+                bgColor: "gray-700"
+              },
+              focus: {
+                bgColor: "gray-700"
+              },
+              selected: {
+                bgColor: "gray-700"
+              }
+            }
+          }
+        },
+        variants: {
+          compact: {
+            px: 2,
+            py: 1
           }
         }
       },
@@ -1892,7 +2264,27 @@ const C = W, ae = {
           cursor: "default",
           lineHeight: 20,
           borderRadius: 1,
-          color: "violet-400"
+          color: "gray-400",
+          theme: {
+            dark: {
+              color: "gray-500"
+            }
+          }
+        },
+        variants: {
+          compact: {
+            px: 2,
+            py: 1
+          }
+        }
+      },
+      icon: {
+        styles: {
+          position: "absolute",
+          top: 0,
+          right: 0,
+          height: "fit",
+          px: 1.5
         }
       }
     }
@@ -1902,44 +2294,177 @@ const C = W, ae = {
     styles: {
       b: 1,
       bgColor: "white",
-      borderColor: "gray-400",
+      borderColor: "gray-200",
       overflow: "hidden",
-      borderRadius: 1
+      borderRadius: 3,
+      shadow: "large",
+      theme: {
+        dark: {
+          bgColor: "gray-900",
+          borderColor: "gray-800"
+        }
+      }
     },
     children: {
       topBar: {
         styles: {
-          p: 2,
+          py: 3,
+          px: 4,
           bb: 1,
-          borderColor: "gray-400",
-          color: "gray-400",
-          gap: 2,
-          ai: "center"
+          borderColor: "gray-200",
+          color: "gray-800",
+          gap: 3,
+          ai: "center",
+          bgColor: "gray-50",
+          theme: {
+            dark: {
+              bgColor: "gray-800",
+              borderColor: "gray-700",
+              color: "gray-200"
+            }
+          }
         },
         children: {
+          globalFilter: {
+            styles: {
+              display: "flex",
+              ai: "center",
+              gap: 2
+            },
+            children: {
+              stats: {
+                styles: {
+                  fontSize: 13,
+                  color: "gray-500",
+                  textWrap: "nowrap",
+                  theme: {
+                    dark: {
+                      color: "gray-400"
+                    }
+                  }
+                }
+              },
+              inputWrapper: {
+                styles: {
+                  display: "flex",
+                  position: "relative"
+                },
+                children: {
+                  icon: {
+                    styles: {
+                      display: "flex",
+                      position: "absolute",
+                      left: 2,
+                      top: "1/2",
+                      translateY: "-1/2",
+                      pointerEvents: "none",
+                      color: "gray-500",
+                      theme: {
+                        dark: {
+                          color: "gray-400"
+                        }
+                      }
+                    }
+                  },
+                  input: {
+                    styles: {
+                      display: "inline-block",
+                      b: 1,
+                      borderColor: "gray-300",
+                      bgColor: "white",
+                      color: "gray-900",
+                      borderRadius: 2,
+                      py: 2,
+                      fontSize: 13,
+                      focus: {
+                        outline: 2,
+                        outlineOffset: 0,
+                        borderColor: "violet-500",
+                        outlineColor: "violet-100"
+                      },
+                      theme: {
+                        dark: {
+                          bgColor: "gray-800",
+                          borderColor: "gray-700",
+                          color: "gray-100",
+                          focus: {
+                            borderColor: "violet-500",
+                            outlineColor: "violet-950"
+                          }
+                        }
+                      }
+                    }
+                  },
+                  clear: {
+                    styles: {
+                      display: "flex",
+                      position: "absolute",
+                      right: 2,
+                      top: "1/2",
+                      translateY: "-1/2",
+                      cursor: "pointer",
+                      fontSize: 13,
+                      color: "gray-500",
+                      hover: {
+                        color: "gray-700"
+                      },
+                      theme: {
+                        dark: {
+                          color: "gray-400",
+                          hover: {
+                            color: "gray-200"
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          },
           contextMenu: {
             clean: !0,
             styles: {
               cursor: "pointer",
-              p: 1,
-              hover: { bgColor: "gray-200", borderRadius: 1 }
+              p: 2,
+              borderRadius: 2,
+              color: "gray-700",
+              hover: {
+                bgColor: "gray-100"
+              },
+              theme: {
+                dark: {
+                  color: "gray-300",
+                  hover: {
+                    bgColor: "gray-800"
+                  }
+                }
+              }
             },
             children: {
               tooltip: {
                 styles: {
                   bgColor: "white",
+                  color: "gray-900",
                   width: 56,
                   b: 1,
                   borderColor: "gray-300",
-                  borderRadius: 1,
+                  borderRadius: 3,
                   display: "flex",
                   d: "column",
-                  mt: 4,
+                  mt: 2,
                   py: 2,
                   translateX: -1,
-                  shadow: "medium",
+                  shadow: "large",
                   overflow: "auto",
-                  maxHeight: 100
+                  maxHeight: 100,
+                  theme: {
+                    dark: {
+                      bgColor: "gray-800",
+                      borderColor: "gray-700",
+                      color: "gray-100"
+                    }
+                  }
                 },
                 children: {
                   item: {
@@ -1949,7 +2474,31 @@ const C = W, ae = {
                       gap: 2,
                       p: 3,
                       cursor: "pointer",
-                      hover: { bgColor: "gray-200" }
+                      color: "gray-900",
+                      hover: {
+                        bgColor: "violet-50"
+                      },
+                      theme: {
+                        dark: {
+                          color: "gray-100",
+                          hover: {
+                            bgColor: "gray-700"
+                          }
+                        }
+                      }
+                    },
+                    children: {
+                      icon: {
+                        styles: {
+                          width: 4,
+                          color: "violet-950",
+                          theme: {
+                            dark: {
+                              color: "violet-300"
+                            }
+                          }
+                        }
+                      }
                     }
                   }
                 }
@@ -1964,8 +2513,13 @@ const C = W, ae = {
             children: {
               icon: {
                 styles: {
-                  color: "violet-950",
-                  width: 4
+                  color: "gray-700",
+                  width: 4,
+                  theme: {
+                    dark: {
+                      color: "gray-300"
+                    }
+                  }
                 }
               },
               separator: {
@@ -1976,20 +2530,41 @@ const C = W, ae = {
                   gap: 2,
                   ai: "center",
                   b: 1,
-                  borderColor: "gray-400",
-                  bgColor: "gray-100",
-                  borderRadius: 1,
-                  py: 1,
-                  pl: 2,
-                  pr: 1,
-                  color: "violet-950"
+                  borderColor: "gray-300",
+                  bgColor: "white",
+                  borderRadius: 2,
+                  py: 2,
+                  pl: 3,
+                  pr: 2,
+                  color: "gray-800",
+                  fontSize: 14,
+                  fontWeight: 500,
+                  shadow: "small",
+                  theme: {
+                    dark: {
+                      bgColor: "gray-800",
+                      borderColor: "gray-700",
+                      color: "gray-200"
+                    }
+                  }
                 },
                 children: {
                   icon: {
                     styles: {
                       width: 3,
-                      color: "gray-400",
-                      cursor: "pointer"
+                      color: "gray-500",
+                      cursor: "pointer",
+                      hover: {
+                        color: "gray-700"
+                      },
+                      theme: {
+                        dark: {
+                          color: "gray-400",
+                          hover: {
+                            color: "gray-200"
+                          }
+                        }
+                      }
                     }
                   }
                 }
@@ -1998,6 +2573,64 @@ const C = W, ae = {
           }
         }
       },
+      filter: {
+        styles: {},
+        children: {
+          row: {
+            styles: {
+              bgColor: "gray-50",
+              bb: 1,
+              borderColor: "gray-200",
+              theme: {
+                dark: {
+                  bgColor: "gray-800",
+                  borderColor: "gray-700"
+                }
+              }
+            }
+          },
+          cell: {
+            styles: {
+              display: "flex",
+              ai: "center",
+              p: 2,
+              transition: "none"
+            },
+            variants: {
+              isPinned: {
+                position: "sticky",
+                bgColor: "gray-50",
+                zIndex: 2,
+                theme: {
+                  dark: {
+                    bgColor: "gray-800"
+                  }
+                }
+              },
+              isFirstLeftPinned: {},
+              isLastLeftPinned: {
+                br: 1,
+                borderColor: "gray-200",
+                theme: {
+                  dark: {
+                    borderColor: "gray-700"
+                  }
+                }
+              },
+              isFirstRightPinned: {
+                bl: 1,
+                borderColor: "gray-200",
+                theme: {
+                  dark: {
+                    borderColor: "gray-700"
+                  }
+                }
+              },
+              isLastRightPinned: {}
+            }
+          }
+        }
+      },
       header: {
         styles: {
           position: "sticky",
@@ -2005,7 +2638,12 @@ const C = W, ae = {
           width: "max-content",
           minWidth: "fit",
           zIndex: 1,
-          bgColor: "gray-200"
+          bgColor: "gray-50",
+          theme: {
+            dark: {
+              bgColor: "gray-800"
+            }
+          }
         },
         variants: {
           isResizeMode: { userSelect: "none" }
@@ -2013,21 +2651,69 @@ const C = W, ae = {
         children: {
           cell: {
             styles: {
-              borderColor: "gray-400",
+              borderColor: "gray-200",
               bb: 1,
               minHeight: 12,
               position: "relative",
-              transition: "none"
+              transition: "none",
+              fontSize: 13,
+              fontWeight: 600,
+              color: "gray-800",
+              py: 3.5,
+              theme: {
+                dark: {
+                  borderColor: "gray-700",
+                  color: "gray-200"
+                }
+              }
             },
             variants: {
-              isRowNumber: {},
-              isRowSelection: {},
-              isPinned: { position: "sticky", zIndex: 2, bgColor: "gray-200" },
+              isPinned: {
+                position: "sticky",
+                zIndex: 2,
+                bgColor: "gray-50",
+                theme: {
+                  dark: {
+                    bgColor: "gray-800"
+                  }
+                }
+              },
               isFirstLeftPinned: {},
-              isLastLeftPinned: { br: 1 },
-              isFirstRightPinned: { bl: 1 },
+              isLastLeftPinned: {
+                br: 1,
+                borderColor: "gray-200",
+                theme: {
+                  dark: {
+                    borderColor: "gray-700"
+                  }
+                }
+              },
+              isFirstRightPinned: {
+                bl: 1,
+                borderColor: "gray-200",
+                theme: {
+                  dark: {
+                    borderColor: "gray-700"
+                  }
+                }
+              },
               isLastRightPinned: {},
-              isSortable: { cursor: "pointer" }
+              isSortable: {
+                cursor: "pointer",
+                hover: {
+                  bgColor: "gray-100"
+                },
+                theme: {
+                  dark: {
+                    hover: {
+                      bgColor: "gray-800"
+                    }
+                  }
+                }
+              },
+              isRowSelected: {},
+              isRowSelection: {},
+              isRowNumber: { jc: "center" }
             },
             children: {
               contextMenu: {
@@ -2043,8 +2729,14 @@ const C = W, ae = {
                   jc: "center",
                   ai: "center",
                   transition: "none",
-                  bgColor: "gray-200",
-                  hover: { bgColor: "gray-300" }
+                  color: "gray-600",
+                  hover: { bgColor: "gray-300" },
+                  theme: {
+                    dark: {
+                      color: "gray-400",
+                      hover: { bgColor: "gray-700" }
+                    }
+                  }
                 },
                 children: {
                   icon: {
@@ -2053,20 +2745,23 @@ const C = W, ae = {
                   tooltip: {
                     styles: {
                       bgColor: "white",
+                      color: "gray-900",
                       width: 56,
                       b: 1,
                       borderColor: "gray-300",
-                      borderRadius: 1,
+                      borderRadius: 3,
                       display: "flex",
                       d: "column",
-                      mt: 4,
                       py: 2,
                       overflow: "hidden",
-                      translateX: -5,
-                      shadow: "medium"
-                    },
-                    variants: {
-                      openLeft: { translateX: -55 }
+                      shadow: "medium",
+                      theme: {
+                        dark: {
+                          bgColor: "gray-800",
+                          borderColor: "gray-700",
+                          color: "gray-100"
+                        }
+                      }
                     },
                     children: {
                       item: {
@@ -2076,13 +2771,37 @@ const C = W, ae = {
                           gap: 2,
                           p: 3,
                           cursor: "pointer",
-                          hover: { bgColor: "gray-200" }
+                          color: "gray-900",
+                          hover: { bgColor: "violet-50" },
+                          theme: {
+                            dark: {
+                              color: "gray-100",
+                              hover: { bgColor: "gray-700" }
+                            }
+                          }
                         },
                         children: {
                           icon: {
                             styles: {
                               width: 4,
-                              color: "violet-950"
+                              color: "violet-950",
+                              theme: {
+                                dark: {
+                                  color: "violet-300"
+                                }
+                              }
+                            }
+                          },
+                          separator: {
+                            styles: {
+                              bb: 1,
+                              my: 2,
+                              borderColor: "gray-300",
+                              theme: {
+                                dark: {
+                                  borderColor: "gray-700"
+                                }
+                              }
                             }
                           }
                         }
@@ -2103,308 +2822,446 @@ const C = W, ae = {
           }
         }
       },
-      cell: {
-        styles: {
-          bb: 1,
-          borderColor: "gray-400",
-          transition: "none",
-          ai: "center",
-          hoverGroup: { "grid-row": { bgColor: "gray-200" } }
-        },
-        variants: {
-          isRowNumber: { bgColor: "gray-200", jc: "right" },
-          isRowSelection: {},
-          isPinned: { position: "sticky", bgColor: "gray-100", zIndex: 1 },
-          isFirstLeftPinned: {},
-          isLastLeftPinned: { br: 1 },
-          isFirstRightPinned: { bl: 1 },
-          isLastRightPinned: {}
+      body: {
+        styles: {},
+        children: {
+          cell: {
+            styles: {
+              bb: 1,
+              borderColor: "gray-200",
+              transition: "none",
+              ai: "center",
+              hoverGroup: {
+                "grid-row": {
+                  bgColor: "gray-100"
+                }
+              },
+              theme: {
+                dark: {
+                  borderColor: "gray-800",
+                  hoverGroup: {
+                    "grid-row": {
+                      bgColor: "gray-700"
+                    }
+                  }
+                }
+              }
+            },
+            variants: {
+              isPinned: {
+                position: "sticky",
+                bgColor: "white",
+                zIndex: 1,
+                theme: {
+                  dark: {
+                    bgColor: "gray-900"
+                  }
+                }
+              },
+              isFirstLeftPinned: {},
+              isLastLeftPinned: {
+                br: 1,
+                borderColor: "gray-200",
+                theme: {
+                  dark: {
+                    borderColor: "gray-800"
+                  }
+                }
+              },
+              isFirstRightPinned: {
+                bl: 1,
+                borderColor: "gray-200",
+                theme: {
+                  dark: {
+                    borderColor: "gray-800"
+                  }
+                }
+              },
+              isLastRightPinned: {},
+              isRowNumber: { jc: "right" },
+              isRowSelection: {},
+              isRowSelected: {}
+            }
+          }
         }
       },
       bottomBar: {
         styles: {
-          p: 3,
-          bgColor: "gray-200",
+          py: 3,
+          px: 4,
+          lineHeight: 36,
+          bgColor: "gray-50",
           bt: 1,
-          borderColor: "gray-400",
-          gap: 4
+          borderColor: "gray-200",
+          gap: 4,
+          ai: "center",
+          fontSize: 14,
+          color: "gray-800",
+          theme: {
+            dark: {
+              bgColor: "gray-800",
+              borderColor: "gray-700",
+              color: "gray-200"
+            }
+          }
         }
       }
     }
   }
 };
-var K;
+var J;
 ((e) => {
-  function t(o, i, n) {
-    return y.setUserVariables(o), Object.entries(i).forEach(([u, s]) => {
-      S[u] = s;
-    }), Object.entries(n).forEach(([u, s]) => {
-      const d = S[u];
-      S[u] = d ? [...s, ...d] : s;
-    }), { extendedProps: i, extendedPropTypes: n };
+  function r(a, o, n) {
+    return d.setUserVariables(a), Object.entries(o).forEach(([s, u]) => {
+      L[s] = u;
+    }), Object.entries(n).forEach(([s, u]) => {
+      const i = L[s];
+      L[s] = i ? [...u, ...i] : u;
+    }), { extendedProps: o, extendedPropTypes: n };
   }
-  e.extend = t, e.componentsStyles = ae;
-  function r(o) {
-    return e.componentsStyles = C.mergeDeep(ae, o), o;
+  e.extend = r, e.componentsStyles = se;
+  function l(a) {
+    return e.componentsStyles = S.mergeDeep(se, a), a;
   }
-  e.components = r;
-})(K || (K = {}));
-const Ce = K, q = he.createContext({ theme: "", setTheme: () => {
+  e.components = l;
+})(J || (J = {}));
+const $e = J, Q = we.createContext({ theme: "", setTheme: () => {
 } });
-function X(e) {
-  const { children: t, theme: r, use: o = "local" } = e, [i, n] = se(r);
-  return ie(() => {
-    if (o === "local") return;
-    const u = document.documentElement;
-    return u.classList.add(i), () => {
-      u.classList.remove(i);
+function ee(e) {
+  const { children: r, theme: l, use: a = "local" } = e, [o, n] = de(l);
+  return ae(() => {
+    if (a === "local") return;
+    const s = document.documentElement;
+    return s.classList.add(o), () => {
+      s.classList.remove(o);
     };
-  }, [i]), o === "local" ? /* @__PURE__ */ h(q.Provider, { value: { theme: i, setTheme: n }, children: /* @__PURE__ */ h(Fe, { className: i, children: t }) }) : /* @__PURE__ */ h(q.Provider, { value: { theme: i, setTheme: n }, children: t });
+  }, [o, a]), a === "local" ? /* @__PURE__ */ z(Q.Provider, { value: { theme: o, setTheme: n }, children: /* @__PURE__ */ z(Ne, { className: o, children: r }) }) : /* @__PURE__ */ z(Q.Provider, { value: { theme: o, setTheme: n }, children: r });
 }
 ((e) => {
-  function t() {
-    const { theme: r, setTheme: o } = we(q);
-    return [r, o];
+  function r() {
+    const { theme: l, setTheme: a } = xe(Q);
+    return [l, a];
   }
-  e.useTheme = t;
-})(X || (X = {}));
-const Le = X;
-class Ve {
+  e.useTheme = r;
+})(ee || (ee = {}));
+const ze = ee;
+class ke {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(t) {
-    return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
+  getIdentity(r) {
+    return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
-  getByIndex(t) {
-    const { first: r, next: o } = ze, i = t - r.length;
-    if (i < 0)
-      return r[t];
-    const n = Math.floor(i / o.length), u = i - n * o.length;
-    return this.getByIndex(n) + o[u];
+  getByIndex(r) {
+    const { first: l, next: a } = Re, o = r - l.length;
+    if (o < 0)
+      return l[r];
+    const n = Math.floor(o / a.length), s = o - n * a.length;
+    return this.getByIndex(n) + a[s];
   }
 }
-const ze = {
+const Re = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-function $e(e) {
-  const { clean: t, component: r, variant: o } = e;
-  return J(() => {
-    if (t) return;
-    const i = r?.split(".");
-    if (!i) return;
-    const n = i.reduce((d, b, l) => l === 0 ? Ce.componentsStyles[b] : d?.children?.[b], void 0);
+function Se(e) {
+  const { clean: r, component: l, variant: a } = e;
+  return le(() => {
+    if (r) return;
+    const o = l?.split(".");
+    if (!o) return;
+    const n = o.reduce((i, m, f) => f === 0 ? $e.componentsStyles[m] : i?.children?.[m], void 0);
     if (!n) return;
-    if (!o) return n.styles;
-    const u = ue(o);
-    if (u.length === 0) return n.styles;
-    const s = C.mergeDeep(...u.map((d) => n.variants?.[d]));
-    return n.styles ? C.mergeDeep(n.styles, s) : s;
-  }, [t, r, o]);
+    if (!a) return n.styles;
+    const s = fe(a);
+    if (s.length === 0) return n.styles;
+    const u = S.mergeDeep(...s.map((i) => n.variants?.[i]));
+    return n.styles ? S.mergeDeep(n.styles, u) : u;
+  }, [r, l, a]);
 }
-const Ae = new Ve(), Se = typeof window < "u" && typeof window.document < "u", fe = typeof process == "object" && process.env?.NODE_ENV === "test", Re = Se && !fe ? ie : ne, me = "_b", E = "_s";
-function Ie(e, t) {
-  Re(j.flush, [e]);
-  const r = $e(e);
-  return J(() => {
-    const o = [t ? E : me], i = r ? C.mergeDeep(r, e) : e;
-    return j.addClassNames(i, o, []), o;
-  }, [e, t, r]);
+const Ae = new ke(), Oe = typeof window < "u" && typeof window.document < "u", H = typeof process == "object" && process.env?.NODE_ENV === "test", je = Oe && !H ? ae : ge, be = "_b", E = "_s";
+function He(e, r) {
+  const l = Se(e), a = le(() => l ? S.mergeDeep(l, e) : e, [e, l]), o = [r ? E : be];
+  return B.addClassNames(a, o, []), je(() => {
+    B.flush();
+  }, [a]), o;
 }
-var j;
+var B;
 ((e) => {
-  let t = !0, r = {};
-  function o(l, g, p, v, c) {
-    Object.entries(l).forEach(([f, m]) => {
-      if (C.isKeyOf(f, S))
-        u(f, m, g, p, v, c);
-      else if (C.isKeyOf(f, ce))
-        o(m, g, [...p, f], v, c);
-      else if (C.isKeyOf(f, k)) {
-        if (Array.isArray(m)) {
-          const [w, x] = m;
-          o(x, g, [...p, f], v, c);
+  let r = !0, l = !1;
+  const a = /* @__PURE__ */ new Set(), o = [], n = [];
+  let s = 0;
+  const u = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
+  let i = {};
+  function m(b, h, w, p, g) {
+    Object.entries(b).forEach(([v, c]) => {
+      if (S.isKeyOf(v, L))
+        x(v, c, h, w, p, g);
+      else if (S.isKeyOf(v, me))
+        m(c, h, [...w, v], p, g);
+      else if (S.isKeyOf(v, U)) {
+        if (Array.isArray(c)) {
+          const [F, N] = c;
+          m(N, h, [...w, v], p, g);
         }
-        C.isObject(m) && o(m, g, [...p, f], v, c);
-      } else C.isKeyOf(f, _) ? o(m, g, p, f, c) : C.isKeyOf(f, re) && Object.entries(m).forEach(([w, x]) => {
-        o(x, g, [...p, re[f]], v, w);
+        S.isObject(c) && m(c, h, [...w, v], p, g);
+      } else S.isKeyOf(v, D) ? m(c, h, w, v, g) : S.isKeyOf(v, P) ? Object.entries(c).forEach(([F, N]) => {
+        m(N, h, [...w, P[v]], p, F);
+      }) : S.isKeyOf(v, ie) && Object.entries(c).forEach(([F, N]) => {
+        const $ = [...w, ie[v]];
+        Object.entries(N).forEach(([V, O]) => {
+          S.isKeyOf(V, P) ? Object.entries(O).forEach(([M, j]) => {
+            m(
+              j,
+              h,
+              [...$, P[V]],
+              p,
+              // Use | as separator to distinguish theme from group name
+              `${F}|${M}`
+            );
+          }) : m({ [V]: O }, h, $, p, F);
+        });
       });
     });
   }
-  e.addClassNames = o;
-  function i() {
-    if (!t) return;
+  e.addClassNames = m;
+  function f() {
+    const b = d.hasPendingVariables();
+    if (!r && !b) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const l = Object.entries(S).reduce((f, [m], w) => (f[m] = w, f), {}), g = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;z-index:99999;}
-html{font-size: 16px;font-family: Arial, sans-serif;}
-body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
-a,ul{all: unset;}
-.${me}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${E}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${E} path,.${E} circle,.${E} rect,.${E} line {transition: all var(--svgTransitionTime);}
-`, p = Object.entries(r);
-    p.sort(
-      ([f], [m]) => (_[f] ?? 0) - (_[m] ?? 0)
-    );
-    const v = p.reduce(
-      (f, [m, w]) => (m !== "normal" && f.push(`@media(min-width: ${_[m]}px){`), Object.entries(w).forEach(([x, M]) => {
-        const { __parents: ee, ...ve } = M, te = Object.entries(ve);
-        te.sort(([V], [B]) => l[V] - l[B]), te.forEach(([V, B]) => {
-          B.forEach((z) => {
-            const F = S[V].find((N) => Array.isArray(N.values) ? N.values.includes(z) : typeof z == typeof N.values);
-            if (!F) return;
-            const $ = s(V, z, +x, m), H = D[+x].map((N) => Q[N]).join(""), A = F.selector?.(`.${$}`, H) ?? `.${$}${H}`, L = Array.isArray(F.styleName) ? F.styleName : [F.styleName ?? V], I = F.valueFormat?.(z, y.getVariableValue) ?? z;
-            f.push(`${A}{${L.map((N) => `${N}:${I}`).join(";")}}`);
-          });
-        }), ee && Object.entries(ee).forEach(([V, B]) => {
-          const z = Object.entries(B);
-          z.sort(([R], [F]) => l[R] - l[F]), z.forEach(([R, F]) => {
-            F.forEach(($) => {
-              const A = S[R].find((T) => Array.isArray(T.values) ? T.values.includes($) : typeof $ == typeof T.values);
-              if (!A) return;
-              const L = s(R, $, +x, m, V), [I] = D[+x], N = I === "theme" ? `.${V} .${L}` : `.${V}:${I} .${L}`, ye = A.selector?.(N, "") ?? N, ge = Array.isArray(A.styleName) ? A.styleName : [A.styleName ?? R], be = A.valueFormat?.($, y.getVariableValue) ?? $;
-              f.push(`${ye}{${ge.map((T) => `${T}:${be}`).join(";")}}`);
-            });
-          });
-        });
-      }), m !== "normal" && f.push("}"), f),
-      [g]
+    const h = K(), w = h.sheet;
+    if (l) {
+      if (d.hasPendingVariables()) {
+        const p = d.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, c]) => `--${v}: ${c};`).join("")}}`;
+        if (w && !H)
+          try {
+            w.insertRule(g, 0), s++;
+          } catch {
+          }
+        else
+          h.textContent = g + `
+` + h.textContent;
+      }
+    } else {
+      const p = [
+        `:root{${d.generateVariables()}}`,
+        ":root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}",
+        "#crono-box {position: absolute;top: 0;left: 0;height: 0;z-index:99999;}",
+        "html{font-size: 16px;font-family: Arial, sans-serif;}",
+        "body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}",
+        "a,ul{all: unset;}",
+        "button{color: inherit;}",
+        'input[type="number"]{-moz-appearance: textfield;}',
+        'input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}',
+        `.${be}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}`,
+        `.${E}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}`,
+        `.${E} path,.${E} circle,.${E} rect,.${E} line {transition: all var(--svgTransitionTime);}`
+      ];
+      if (w && !H)
+        for (const g of p)
+          try {
+            w.insertRule(g, s), s++;
+          } catch {
+          }
+      else
+        h.textContent = p.join(`
+`);
+      l = !0;
+    }
+    if (o.length > 0) {
+      if (o.sort((p, g) => p[1] - g[1] || p[0] - g[0]), w && !H)
+        for (const [p, g, v] of o) {
+          const c = g * 1e5 + p;
+          let F = n.length;
+          for (let N = 0; N < n.length; N++)
+            if (c < n[N]) {
+              F = N;
+              break;
+            }
+          try {
+            w.insertRule(v, s + F), n.splice(F, 0, c);
+          } catch {
+            w.insertRule(v, w.cssRules.length), n.push(c);
+          }
+        }
+      else
+        h.textContent += o.map((p) => p[2]).join("");
+      o.length = 0;
+    }
+    r = !1;
+  }
+  e.flush = f;
+  function y(b, h, w, p, g) {
+    const c = L[b].find((V) => Array.isArray(V.values) ? V.values.includes(h) : typeof h == typeof V.values);
+    if (!c) return null;
+    const F = u[b] ?? 0, N = D[p] ?? 0, $ = C(
+      b,
+      h,
+      w,
+      p,
+      g
     );
-    v.unshift(`:root{${y.generateVariables()}}`);
-    const c = b();
-    c.innerHTML = v.join(""), t = !1;
+    if (g) {
+      const V = q[w], O = V.includes("theme"), j = (O ? V.filter((I) => I !== "theme") : V).map((I) => W[I]).join(""), G = g.includes("|");
+      let A;
+      if (G) {
+        const [I, Ce] = g.split("|");
+        A = `.${I} .${Ce}${j} .${$}`;
+      } else O ? A = `.${g} .${$}${j}` : A = `.${g}${j} .${$}`;
+      const he = c.selector?.(A, "") ?? A, ve = Array.isArray(c.styleName) ? c.styleName : [c.styleName ?? b], pe = c.valueFormat?.(h, d.getVariableValue) ?? h, ne = `${he}{${ve.map((I) => `${I}:${pe}`).join(";")}}`;
+      return p !== "normal" ? { rule: `@media(min-width: ${D[p]}px){${ne}}`, sortIndex: F, breakpointOrder: N } : { rule: ne, sortIndex: F, breakpointOrder: N };
+    } else {
+      const V = q[w].map((A) => W[A]).join(""), O = c.selector?.(`.${$}`, V) ?? `.${$}${V}`, M = Array.isArray(c.styleName) ? c.styleName : [c.styleName ?? b], j = c.valueFormat?.(h, d.getVariableValue) ?? h, G = `${O}{${M.map((A) => `${A}:${j}`).join(";")}}`;
+      return p !== "normal" ? { rule: `@media(min-width: ${D[p]}px){${G}}`, sortIndex: F, breakpointOrder: N } : { rule: G, sortIndex: F, breakpointOrder: N };
+    }
   }
-  e.flush = i;
-  function n() {
-    r = {};
+  function k() {
+    i = {}, a.clear(), o.length = 0, n.length = 0, s = 0, l = !1;
   }
-  e.clear = n;
-  function u(l, g, p, v, c = "normal", f) {
-    if (g == null) return;
-    const m = v.reduce((x, M) => x + de[M], 0);
-    r[c] ? r[c][m] ? r[c][m][l] || (r[c][m][l] = /* @__PURE__ */ new Set()) : r[c][m] = { [l]: /* @__PURE__ */ new Set() } : r[c] = { [m]: { [l]: /* @__PURE__ */ new Set() } }, f ? (r[c][m].__parents ? r[c][m].__parents[f] ? r[c][m].__parents[f][l] || (r[c][m].__parents[f][l] = /* @__PURE__ */ new Set()) : r[c][m].__parents[f] = { [l]: /* @__PURE__ */ new Set() } : r[c][m].__parents = { [f]: { [l]: /* @__PURE__ */ new Set() } }, r[c][m].__parents[f][l].has(g) || (r[c][m].__parents[f][l].add(g), t = !0)) : r[c][m][l].has(g) || (r[c][m][l].add(g), t = !0);
-    const w = s(l, g, m, c, f);
-    p.push(w);
+  e.clear = k;
+  function x(b, h, w, p, g = "normal", v) {
+    if (h == null) return;
+    const c = p.reduce(($, V) => $ + ye[V], 0), F = C(b, h, c, g, v), N = `${g}-${c}-${b}-${h}-${v ?? ""}`;
+    if (!a.has(N)) {
+      a.add(N);
+      const $ = y(b, h, c, g, v);
+      $ && (o.push([$.sortIndex, $.breakpointOrder, $.rule]), r = !0), i[g] ? i[g][c] ? i[g][c][b] || (i[g][c][b] = /* @__PURE__ */ new Set()) : i[g][c] = { [b]: /* @__PURE__ */ new Set() } : i[g] = { [c]: { [b]: /* @__PURE__ */ new Set() } }, v ? (i[g][c].__parents ? i[g][c].__parents[v] ? i[g][c].__parents[v][b] || (i[g][c].__parents[v][b] = /* @__PURE__ */ new Set()) : i[g][c].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : i[g][c].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, i[g][c].__parents[v][b].add(h)) : i[g][c][b].add(h);
+    }
+    w.push(F);
   }
-  function s(l, g, p, v, c) {
-    const f = D[p], m = `${v === "normal" ? "" : `${v}-`}${f.map((w) => `${w}-`).join("")}${c ? `${c}-` : ""}${l}-${g}`;
-    return fe ? m : Ae.getIdentity(m);
+  function C(b, h, w, p, g) {
+    const v = q[w], c = `${p === "normal" ? "" : `${p}-`}${v.map((F) => `${F}-`).join("")}${g ? `${g}-` : ""}${b}-${h}`;
+    return H ? c : Ae.getIdentity(c);
   }
-  const d = "crono-styles";
-  function b() {
-    let l = document.getElementById(d);
-    return l || (l = document.createElement("style"), l.setAttribute("id", d), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
+  const R = "crono-styles";
+  function K() {
+    let b = document.getElementById(R);
+    return b || (b = document.createElement("style"), b.setAttribute("id", R), b.setAttribute("type", "text/css"), document.head.insertBefore(b, document.head.firstChild)), b;
   }
-})(j || (j = {}));
-var oe;
+})(B || (B = {}));
+var ue;
 ((e) => {
-  e.flush = j.flush, e.clear = j.clear;
-})(oe || (oe = {}));
+  e.flush = B.flush, e.clear = B.clear;
+})(ue || (ue = {}));
 Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
-  return this.filter((t) => !e(t));
+  return this.filter((r) => !e(r));
 });
-Array.prototype.take || (Array.prototype.take = function(e, t = 0) {
-  return this.slice(t, t + e);
+Array.prototype.take || (Array.prototype.take = function(e, r = 0) {
+  return this.slice(r, r + e);
 });
 Array.prototype.add || (Array.prototype.add = function(...e) {
-  const t = [...this];
-  return t.push(...e), t;
+  const r = [...this];
+  return r.push(...e), r;
 });
-Array.prototype.sumBy || (Array.prototype.sumBy = function(e, t = 0) {
-  return this.reduce((r, o, i) => r + e(o, i), t);
+Array.prototype.sumBy || (Array.prototype.sumBy = function(e, r = 0) {
+  return this.reduce((l, a, o) => l + e(a, o), r);
 });
-Array.prototype.sortBy || (Array.prototype.sortBy = function(e, t) {
-  return [...this].sort((o, i) => {
-    const n = e(o), u = e(i);
-    return n < u ? t === "DESC" ? 1 : -1 : n > u ? t === "DESC" ? -1 : 1 : 0;
+Array.prototype.sortBy || (Array.prototype.sortBy = function(e, r) {
+  return [...this].sort((a, o) => {
+    const n = e(a), s = e(o);
+    return n < s ? r === "DESC" ? 1 : -1 : n > s ? r === "DESC" ? -1 : 1 : 0;
   });
 });
 Array.prototype.maxBy || (Array.prototype.maxBy = function(e) {
   return Math.max(...this.map(e));
 });
 Array.prototype.findOrThrow || (Array.prototype.findOrThrow = function(e) {
-  const t = this.find(e);
-  if (typeof t > "u") throw new Error("No items satisfy the provided condition.");
-  return t;
+  const r = this.find(e);
+  if (typeof r > "u") throw new Error("No items satisfy the provided condition.");
+  return r;
 });
 Array.prototype.toRecord || (Array.prototype.toRecord = function(e) {
   return this.reduce(
-    (t, r) => {
-      const o = e(r);
-      if (!o) return t;
-      const [i, n] = o;
-      return t[i] = n, t;
+    (r, l) => {
+      const a = e(l);
+      if (!a) return r;
+      const [o, n] = a;
+      return r[o] = n, r;
     },
     {}
   );
 });
-Array.prototype.groupBy || (Array.prototype.groupBy = function(e, t = !1) {
-  const r = this.reduce((o, i, n) => {
-    const u = e(i, n);
-    return t && typeof u != "number" && !u || (o.has(u) === !1 && o.set(u, []), o.get(u)?.push(i)), o;
+Array.prototype.groupBy || (Array.prototype.groupBy = function(e, r = !1) {
+  const l = this.reduce((a, o, n) => {
+    const s = e(o, n);
+    return r && typeof s != "number" && !s || (a.has(s) === !1 && a.set(s, []), a.get(s)?.push(o)), a;
   }, /* @__PURE__ */ new Map());
-  return Array.from(r, ([o, i]) => ({ key: o, values: i }));
+  return Array.from(l, ([a, o]) => ({ key: a, values: o }));
 });
-function _e(e) {
-  const { node: t = null, event: r = "click", hideOnScroll: o = !1, hideOnResize: i = !1, hideOnEscape: n = !0 } = e ?? {}, [u, s] = se(!1), d = xe(null);
-  return ne(() => {
-    function b(c) {
-      (t ?? d.current)?.contains(c.target) === !1 && s(!1);
+function Me(e) {
+  const { node: r = null, event: l = "click", hideOnScroll: a = !1, hideOnResize: o = !1, hideOnEscape: n = !0 } = e ?? {}, [s, u] = de(!1), i = Fe(null);
+  return ge(() => {
+    function m(C) {
+      (r ?? i.current)?.contains(C.target) === !1 && u(!1);
     }
-    function l() {
-      s(!1);
+    function f() {
+      u(!1);
     }
-    function g(c) {
-      (t ?? d.current)?.contains(c.target) === !1 && s(!1);
+    function y(C) {
+      (r ?? i.current)?.contains(C.target) === !1 && u(!1);
     }
-    function p(c) {
-      c.key === "Escape" && s(!1);
+    function k(C) {
+      C.key === "Escape" && u(!1);
     }
-    const v = new AbortController();
-    return u && (window.addEventListener(r, b, v), n && window.addEventListener("keydown", p, v), i && window.addEventListener("resize", l, v), o && window.addEventListener("scroll", g, { signal: v.signal, capture: !0 })), () => {
-      v.abort();
+    const x = new AbortController();
+    return s && (window.addEventListener(l, m, x), n && window.addEventListener("keydown", k, x), o && window.addEventListener("resize", f, x), a && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
+      x.abort();
     };
-  }, [t, u]), [u, s, d];
+  }, [r, s]), [s, u, i];
 }
-const Ee = {
+const Ie = {
   selected: "aria-selected"
 };
-var le;
+var ce;
 ((e) => {
-  function t(r, o, i) {
-    r !== void 0 && r != null && (i[Ee[o] ?? o] = Array.isArray(r) ? r[0] : r);
+  function r(l, a, o) {
+    l !== void 0 && l != null && (o[Ie[a] ?? a] = Array.isArray(l) ? l[0] : l);
   }
-  e.assignBooleanProp = t;
-})(le || (le = {}));
-var Z;
-((e) => {
-  function t(r, o = 300) {
-    let i = !1, n;
-    return (...u) => {
-      if (i) {
-        n = u;
-        return;
-      }
-      r(...u), i = !0, setTimeout(() => {
-        i = !1, n && r(...n);
-      }, o);
-    };
-  }
-  e.throttle = t;
-})(Z || (Z = {}));
-const ke = Z;
-function Me(e) {
-  let t;
+  e.assignBooleanProp = r;
+})(ce || (ce = {}));
+function Ge(e) {
+  let r;
   return Object.defineProperty({
     clear() {
-      t = void 0;
+      r = void 0;
     }
   }, "value", {
-    get: () => (t === void 0 && (t = e()), t)
+    get: () => (r === void 0 && (r = e()), r)
   });
 }
-function He(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ h(
+function Ee(e, r) {
+  if (!e) return { score: 1, matches: [] };
+  if (!r) return null;
+  const l = e.toLowerCase(), a = r.toLowerCase();
+  let o = 0, n = 0;
+  const s = [];
+  let u = -1, i = 0, m = 0;
+  for (; o < l.length && n < a.length; )
+    l[o] === a[n] ? (u === -1 && (u = n), o++, m++, i += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (i += 5), e[o - 1] === r[n] && (i += 1)) : (u !== -1 && (s.push([u, n]), u = -1), m = 0), n++;
+  return u !== -1 && s.push([u, n]), o < l.length ? null : (i = i / r.length, { score: i, matches: s });
+}
+function Pe(e, r) {
+  return Ee(e, r) !== null;
+}
+var re;
+((e) => {
+  function r(l, a = 300) {
+    let o = !1, n;
+    return (...s) => {
+      if (o) {
+        n = s;
+        return;
+      }
+      l(...s), o = !0, setTimeout(() => {
+        o = !1, n && l(...n);
+      }, a);
+    };
+  }
+  e.throttle = r;
+})(re || (re = {}));
+const De = re;
+function Ue(e) {
+  return /* @__PURE__ */ z(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ z(
     "path",
     {
       fillRule: "evenodd",
@@ -2413,11 +3270,27 @@ function He(e) {
     }
   ) });
 }
-function De(e) {
-  return /* @__PURE__ */ h(O, { ...e, children: /* @__PURE__ */ h("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+const _ = /* @__PURE__ */ new Map();
+function We() {
+  const [e] = ze.useTheme(), r = le(() => {
+    const l = "crono-box";
+    let a = document.getElementById(l);
+    return a || (a = document.createElement("div"), a.id = l, document.body.appendChild(a)), a;
+  }, []);
+  return ae(() => {
+    if (!e) return;
+    const l = _.get(e) ?? 0;
+    return _.set(e, l + 1), l === 0 && r.classList.add(e), () => {
+      const o = (_.get(e) ?? 1) - 1;
+      o <= 0 ? (_.delete(e), r.classList.remove(e)) : _.set(e, o);
+    };
+  }, [r, e]), r;
 }
-function Ue(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ h(
+function Ke(e) {
+  return /* @__PURE__ */ z(T, { ...e, children: /* @__PURE__ */ z("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+}
+function qe(e) {
+  return /* @__PURE__ */ z(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ z(
     "path",
     {
       strokeWidth: 4,
@@ -2425,97 +3298,85 @@ function Ue(e) {
     }
   ) });
 }
-function Ge(e) {
-  return /* @__PURE__ */ pe(O, { viewBox: "0 0 490.6 490.6", ...e, children: [
-    /* @__PURE__ */ h("path", { d: "M151.549 145.274c0 23.39 9.145 50.385 24.462 72.214 17.389 24.78 39.376 38.427 61.911 38.427 22.534 0 44.521-13.647 61.91-38.428 15.317-21.828 24.462-48.824 24.462-72.213 0-47.626-38.746-86.372-86.372-86.372s-86.373 38.746-86.373 86.372zm86.373-71.372c39.354 0 71.372 32.018 71.372 71.372 0 20.118-8.33 44.487-21.74 63.598-14.29 20.364-32.38 32.043-49.632 32.043-17.252 0-35.342-11.679-49.632-32.043-13.41-19.11-21.741-43.479-21.741-63.598 0-39.355 32.018-71.372 71.373-71.372z" }),
-    /* @__PURE__ */ h("path", { d: "M302.372 239.167a7.502 7.502 0 0 0-8.52 1.461c-16.775 16.728-36.117 25.569-55.935 25.569-19.821 0-39.158-8.841-55.923-25.567a7.5 7.5 0 0 0-8.521-1.463c-25.254 12.022-46.628 30.829-61.811 54.388-15.596 24.2-23.84 52.277-23.84 81.195v.121c0 2.116.894 4.134 2.461 5.556 40.492 36.722 92.922 56.945 147.633 56.945s107.141-20.224 147.632-56.945a7.499 7.499 0 0 0 2.462-5.556v-.121c0-28.918-8.242-56.995-23.834-81.194-15.179-23.561-36.551-42.368-61.804-54.389zm-64.454 183.205c-49.861 0-97.685-18.023-135.057-50.827.583-24.896 7.956-48.986 21.411-69.865 12.741-19.77 30.322-35.823 51.058-46.676 18.746 17.157 40.285 26.193 62.588 26.193 22.3 0 43.842-9.035 62.598-26.193 20.734 10.853 38.313 26.906 51.053 46.676 13.452 20.877 20.823 44.968 21.406 69.865-37.373 32.804-85.197 50.827-135.057 50.827z" }),
-    /* @__PURE__ */ h("path", { d: "M455.077 243.89c-13.23-20.532-31.856-36.923-53.864-47.399a7.501 7.501 0 0 0-8.52 1.461c-14.312 14.271-30.79 21.815-47.654 21.815-9.142 0-18.184-2.205-26.873-6.553a7.5 7.5 0 0 0-6.712 13.414c10.793 5.401 22.093 8.139 33.586 8.139 19.335 0 38.004-7.737 54.288-22.437a116.088 116.088 0 0 1 43.141 39.685c11.445 17.763 17.756 38.243 18.338 59.416-18.524 16.158-40.553 28.449-63.91 35.634a7.5 7.5 0 0 0 4.41 14.338c26.509-8.154 51.435-22.362 72.082-41.088a7.499 7.499 0 0 0 2.462-5.556v-.105c-.001-25.204-7.185-49.674-20.774-70.764zM130.493 210.473c7.93 0 15.841-1.934 23.516-5.748a7.5 7.5 0 0 0-6.675-13.433c-5.582 2.774-11.248 4.18-16.841 4.18-14.541 0-29.836-9.914-41.964-27.2-11.449-16.318-18.562-37.112-18.562-54.266 0-33.375 27.152-60.527 60.526-60.527 15.752 0 30.67 6.022 42.006 16.958a7.499 7.499 0 0 0 10.604-.19 7.499 7.499 0 0 0-.19-10.604c-14.146-13.647-32.763-21.163-52.42-21.163-41.646 0-75.526 33.881-75.526 75.527 0 20.38 7.957 43.887 21.283 62.881 15.195 21.657 34.459 33.585 54.243 33.585z" }),
-    /* @__PURE__ */ h("path", { d: "M61.034 340.143a175.333 175.333 0 0 1-45.989-29.004c.582-21.112 6.875-41.53 18.291-59.243a115.795 115.795 0 0 1 43.01-39.566c16.239 14.662 34.856 22.376 54.139 22.376 11.587 0 22.969-2.785 33.829-8.277a7.501 7.501 0 0 0-6.77-13.386c-8.742 4.421-17.846 6.663-27.059 6.663-16.811 0-33.238-7.522-47.504-21.754a7.501 7.501 0 0 0-8.521-1.462c-21.954 10.451-40.534 26.8-53.733 47.28C7.167 264.811 0 289.221 0 314.362v.103c0 2.116.894 4.134 2.461 5.556 15.629 14.174 33.338 25.579 52.634 33.897a7.481 7.481 0 0 0 2.966.615 7.503 7.503 0 0 0 2.973-14.39zM69.854 351.003c-2.671 6.443 4.532 12.832 10.617 9.387 3.238-1.834 4.683-5.937 3.227-9.385-2.407-6.145-11.378-5.952-13.844-.002z" }),
-    /* @__PURE__ */ h("path", { d: "M83.698 351.005c.19.45-.18-.46 0 0zM303.345 70.438c11.336-10.936 26.254-16.958 42.006-16.958 33.374 0 60.526 27.152 60.526 60.527 0 17.154-7.112 37.947-18.563 54.266-12.128 17.286-27.424 27.2-41.964 27.2-5.593 0-11.259-1.406-16.841-4.18a7.5 7.5 0 0 0-6.676 13.433c7.675 3.814 15.587 5.748 23.517 5.748 19.783 0 39.048-11.927 54.243-33.585 13.327-18.994 21.283-42.501 21.283-62.881 0-41.646-33.881-75.527-75.526-75.527-19.657 0-38.273 7.516-52.42 21.163a7.5 7.5 0 0 0 10.415 10.794z" })
-  ] });
+function Ye(e) {
+  return /* @__PURE__ */ z(T, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ z("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
 }
-function We(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ h("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
+function Xe(e) {
+  return /* @__PURE__ */ z(T, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ z("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
 }
-var Y;
+var oe;
 ((e) => {
-  function t(r) {
-    return r.charAt(0).toUpperCase() + r.slice(1);
+  function r(l) {
+    return l.charAt(0).toUpperCase() + l.slice(1);
   }
-  e.capitalize = t;
-})(Y || (Y = {}));
-const Ke = Y;
-function qe() {
-  return J(() => {
-    const e = "crono-box";
-    let t = document.getElementById(e);
-    return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
-  }, []);
-}
-function Xe(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ h("path", { d: "M4.238 2.988a1.25 1.25 0 0 0-.87 2.147L10.231 12l-6.87 6.87a1.251 1.251 0 1 0 1.769 1.769L12 13.768l6.865 6.865a1.25 1.25 0 1 0 1.768-1.768L13.768 12l6.857-6.857a1.25 1.25 0 1 0-1.768-1.768L12 10.232 5.135 3.367a1.25 1.25 0 0 0-.897-.379z" }) });
+  e.capitalize = r;
+})(oe || (oe = {}));
+const Ze = oe;
+function Je(e) {
+  return /* @__PURE__ */ z(T, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ z("path", { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" }) });
 }
-var P;
+var te;
 ((e) => {
-  function t(o) {
-    const i = Array.from(o.elements).reduce(
-      (n, u) => {
-        const s = u.name;
-        return s && (n[s] || (n[s] = []), n[s].push(u)), n;
+  function r(a) {
+    const o = Array.from(a.elements).reduce(
+      (n, s) => {
+        const u = s.name;
+        return u && (n[u] || (n[u] = []), n[u].push(s)), n;
       },
       {}
     );
-    return Object.entries(i).reduce((n, [u, s]) => {
-      if (s.length === 1) {
-        const d = s[0];
-        r(n, u, d.type === "checkbox" || d.type === "radio" ? d.checked : d.value);
+    return Object.entries(o).reduce((n, [s, u]) => {
+      if (u.length === 1) {
+        const i = u[0];
+        l(n, s, i.type === "checkbox" || i.type === "radio" ? i.checked : i.value);
       } else {
-        const d = s.reduce((b, l) => (l.type === "checkbox" || l.type === "radio" ? l.checked && b.push(l.value) : b.push(l.value), b), []);
-        r(n, u, d);
+        const i = u.reduce((m, f) => (f.type === "checkbox" || f.type === "radio" ? f.checked && m.push(f.value) : m.push(f.value), m), []);
+        l(n, s, i);
       }
       return n;
     }, {});
   }
-  e.getFormEntries = t;
-  function r(o, i, n) {
-    if (i.includes(".")) {
-      const u = i.split(".");
-      let s = o;
-      u.forEach((d, b) => {
-        if (u.length > b + 1) {
-          const l = d.match(/^(.+)\[(\d)\]$/);
-          if (l) {
-            const [, g, p] = l;
-            s[g] = s[g] || [], s[g][p] = s[g][p] || {}, s = s[g][p];
+  e.getFormEntries = r;
+  function l(a, o, n) {
+    if (o.includes(".")) {
+      const s = o.split(".");
+      let u = a;
+      s.forEach((i, m) => {
+        if (s.length > m + 1) {
+          const f = i.match(/^(.+)\[(\d)\]$/);
+          if (f) {
+            const [, y, k] = f;
+            u[y] = u[y] || [], u[y][k] = u[y][k] || {}, u = u[y][k];
           } else
-            s[d] = s[d] || {}, s = s[d];
+            u[i] = u[i] || {}, u = u[i];
         } else
-          s[d] = n;
+          u[i] = n;
       });
     } else
-      o[i] = n;
+      a[o] = n;
   }
-})(P || (P = {}));
-const Ze = P;
+})(te || (te = {}));
+const Qe = te;
 export {
-  le as B,
-  Xe as C,
-  Ue as D,
-  He as E,
-  ke as F,
-  Ge as G,
-  C as O,
-  We as P,
-  De as S,
-  Le as T,
-  y as V,
-  Ce as a,
-  _e as b,
-  ue as c,
-  Ze as d,
-  Ke as e,
-  qe as f,
-  oe as g,
-  Me as m,
-  Ie as u
+  ce as B,
+  qe as D,
+  Ue as E,
+  De as F,
+  Ye as G,
+  S as O,
+  Xe as P,
+  Ke as S,
+  ze as T,
+  d as V,
+  $e as a,
+  Me as b,
+  fe as c,
+  Je as d,
+  Qe as e,
+  Pe as f,
+  Ze as g,
+  We as h,
+  ue as i,
+  Ge as m,
+  He as u
 };