@cronocode/react-box 3.1.10 → 3.1.12

package/core.mjs

@@ -1,36 +1,36 @@
 import we, { useContext as xe, useState as de, useLayoutEffect as U, useMemo as le, useEffect as ge, useRef as Ne } from "react";
-import { jsx as S } from "react/jsx-runtime";
+import { jsx as $ } from "react/jsx-runtime";
 import T from "./components/baseSvg.mjs";
 import Fe from "./box.mjs";
 function fe(...e) {
-  return e.reduce((r, a) => a ? typeof a == "string" ? (r.push(a), r) : Array.isArray(a) ? (r.push(...fe(...a)), r) : (Object.entries(a).forEach(([l, t]) => {
-    t && r.push(l);
+  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(([o, t]) => {
+    t && r.push(o);
   }), r) : r, []);
 }
 const Y = 4;
-var o;
+var a;
 ((e) => {
   ((r) => {
-    function a(t, n) {
+    function l(t, n) {
       return `${t}${n.replace("/", "-")}`;
     }
-    r.fraction = a;
-    function l(t) {
+    r.fraction = l;
+    function o(t) {
       return [`${t} path`, `${t} circle`, `${t} rect`, `${t} line`];
     }
-    r.svg = l;
+    r.svg = o;
   })(e.ClassName || (e.ClassName = {})), ((r) => {
-    function a(x, C, k = Y) {
-      return `${x / k}rem`;
+    function l(x, C, R = Y) {
+      return `${x / R}rem`;
     }
-    r.rem = a;
-    function l(x) {
+    r.rem = l;
+    function o(x) {
       return `${x}px`;
     }
-    r.px = l;
+    r.px = o;
     function t(x) {
-      const [C, k] = x.split("/");
-      return `${+C / +k * 100}%`;
+      const [C, R] = x.split("/");
+      return `${+C / +R * 100}%`;
     }
     r.fraction = t;
     function n(x, C) {
@@ -44,18 +44,18 @@ var o;
       }
     }
     r.widthHeight = n;
-    function u(x) {
-      return (C, k) => `var(--${x}${k});`;
+    function i(x) {
+      return (C, R) => `var(--${x}${R});`;
     }
-    r.variables = u;
+    r.variables = i;
     function c(x) {
-      return (C, k) => `var(--${x}${k});`;
+      return (C, R) => `var(--${x}${R});`;
     }
     r.svgVariables = c;
-    function s(x, C) {
+    function u(x, C) {
       return `repeat(${C},minmax(0,1fr))`;
     }
-    r.gridColumns = s;
+    r.gridColumns = u;
     function m(x, C) {
       return C === "full-row" ? "1/-1" : `span ${C}/span ${C}`;
     }
@@ -73,7 +73,7 @@ var o;
     }
     r.flip = z;
   })(e.Value || (e.Value = {}));
-})(o || (o = {}));
+})(a || (a = {}));
 var Z;
 ((e) => {
   e.colors = {
@@ -398,24 +398,24 @@ var Z;
     "-10/12",
     "-11/12"
   ], e.percentString = "";
-  const a = { ...{
+  const l = { ...{
     inherit: "inherit",
     none: "none"
-  }, ...e.colors, ...e.bgImages, ...e.shadows }, l = {}, t = {};
+  }, ...e.colors, ...e.bgImages, ...e.shadows }, o = {}, t = {};
   let n = {};
-  function u(y) {
-    return y in l || (y in n ? (t[y] = n[y], l[y] = n[y]) : y in a ? (t[y] = a[y], l[y] = a[y]) : (t[y] = y, l[y] = y)), `var(--${y})`;
+  function i(y) {
+    return y in o || (y in n ? (t[y] = n[y], o[y] = n[y]) : y in l ? (t[y] = l[y], o[y] = l[y]) : (t[y] = y, o[y] = y)), `var(--${y})`;
   }
-  e.getVariableValue = u;
+  e.getVariableValue = i;
   function c() {
-    return Object.entries(l).map(([y, z]) => `--${y}: ${z};`).join("");
+    return Object.entries(o).map(([y, z]) => `--${y}: ${z};`).join("");
   }
   e.generateVariables = c;
-  function s() {
+  function u() {
     const y = { ...t };
     return Object.keys(t).forEach((z) => delete t[z]), y;
   }
-  e.getPendingVariables = s;
+  e.getPendingVariables = u;
   function m() {
     return Object.keys(t).length > 0;
   }
@@ -425,7 +425,7 @@ var Z;
   }
   e.setUserVariables = f;
 })(Z || (Z = {}));
-const i = Z, L = {
+const s = Z, L = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -437,7 +437,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's left and right border. */
@@ -445,7 +445,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-inline-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's top and bottom border. */
@@ -453,7 +453,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-block-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-top-width CSS property sets the width of the top border of an element. */
@@ -461,7 +461,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-top-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-right-width CSS property sets the width of the right border of an element. */
@@ -469,7 +469,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-right-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-bottom-width CSS property sets the width of the bottom border of an element. */
@@ -477,7 +477,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-left-width CSS property sets the width of the left border of an element. */
@@ -485,7 +485,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-left-width",
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     }
   ],
   /** The border-style shorthand CSS property sets the line style for all four sides of an element's border. */
@@ -500,7 +500,7 @@ const i = Z, L = {
     {
       styleName: "border-radius",
       values: 0,
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -508,7 +508,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-top-right-radius"],
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -516,7 +516,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: ["border-top-right-radius", "border-bottom-right-radius"],
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -524,7 +524,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: ["border-bottom-left-radius", "border-bottom-right-radius"],
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -532,7 +532,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-bottom-left-radius"],
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -540,7 +540,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-top-left-radius",
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -548,7 +548,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-top-right-radius",
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -556,7 +556,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-right-radius",
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -564,7 +564,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-left-radius",
-      valueFormat: o.Value.rem
+      valueFormat: a.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. */
@@ -577,82 +577,82 @@ const i = Z, L = {
   top: [
     {
       values: 0,
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
-      valueFormat: o.Value.fraction
+      values: s.negativePercentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
-      valueFormat: o.Value.fraction
+      values: s.negativePercentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
-      valueFormat: o.Value.fraction
+      values: s.negativePercentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
-      valueFormat: o.Value.fraction
+      values: s.negativePercentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
@@ -831,7 +831,7 @@ const i = Z, L = {
     {
       styleName: "font-size",
       values: 0,
-      valueFormat: (e) => o.Value.rem(e, void 0, 16)
+      valueFormat: (e) => a.Value.rem(e, void 0, 16)
     },
     {
       styleName: "font-size",
@@ -856,10 +856,10 @@ const i = Z, L = {
   gap: [
     {
       values: 0,
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The row-gap CSS property sets the size of the gap (gutter) between an element's rows. */
@@ -867,11 +867,11 @@ const i = Z, L = {
     {
       styleName: "row-gap",
       values: 0,
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       styleName: "row-gap",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The column-gap CSS property sets the size of the gap (gutter) between an element's columns. */
@@ -879,11 +879,11 @@ const i = Z, L = {
     {
       styleName: "column-gap",
       values: 0,
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       styleName: "column-gap",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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. */
@@ -895,7 +895,7 @@ const i = Z, L = {
   ],
   /** 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: o.Value.rem },
+    { values: 0, valueFormat: a.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -905,19 +905,19 @@ const i = Z, L = {
       valueFormat: () => "100vh"
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem },
+    { styleName: "min-height", values: 0, valueFormat: a.Value.rem },
     {
       styleName: "min-height",
       values: ["fit"],
@@ -930,8 +930,8 @@ const i = Z, L = {
     },
     {
       styleName: "min-height",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
       styleName: "min-height",
@@ -939,12 +939,12 @@ const i = Z, L = {
     },
     {
       styleName: "min-height",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem },
+    { styleName: "max-height", values: 0, valueFormat: a.Value.rem },
     {
       styleName: "max-height",
       values: ["fit"],
@@ -957,8 +957,8 @@ const i = Z, L = {
     },
     {
       styleName: "max-height",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
       styleName: "max-height",
@@ -966,12 +966,12 @@ const i = Z, L = {
     },
     {
       styleName: "max-height",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem },
+    { values: 0, valueFormat: a.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -981,19 +981,19 @@ const i = Z, L = {
       valueFormat: () => "100vw"
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem },
+    { styleName: "min-width", values: 0, valueFormat: a.Value.rem },
     {
       styleName: "min-width",
       values: ["fit"],
@@ -1006,8 +1006,8 @@ const i = Z, L = {
     },
     {
       styleName: "min-width",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
       styleName: "min-width",
@@ -1015,12 +1015,12 @@ const i = Z, L = {
     },
     {
       styleName: "min-width",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** 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: o.Value.rem },
+    { styleName: "max-width", values: 0, valueFormat: a.Value.rem },
     {
       styleName: "max-width",
       values: ["fit"],
@@ -1033,8 +1033,8 @@ const i = Z, L = {
     },
     {
       styleName: "max-width",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
       styleName: "max-width",
@@ -1042,7 +1042,7 @@ const i = Z, L = {
     },
     {
       styleName: "max-width",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. */
@@ -1050,7 +1050,7 @@ const i = Z, L = {
     {
       styleName: "letter-spacing",
       values: 0,
-      valueFormat: o.Value.px
+      valueFormat: a.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. */
@@ -1058,7 +1058,7 @@ const i = Z, L = {
     {
       styleName: "line-height",
       values: 0,
-      valueFormat: o.Value.px
+      valueFormat: a.Value.px
     },
     {
       styleName: "line-height",
@@ -1078,7 +1078,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
@@ -1086,11 +1086,11 @@ const i = Z, L = {
     },
     {
       styleName: "margin",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin"
     }
   ],
@@ -1099,7 +1099,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-inline",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
@@ -1107,11 +1107,11 @@ const i = Z, L = {
     },
     {
       styleName: "margin-inline",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-inline"
     }
   ],
@@ -1120,7 +1120,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-block",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
@@ -1128,11 +1128,11 @@ const i = Z, L = {
     },
     {
       styleName: "margin-block",
-      values: i.percentages,
-      valueFormat: o.Value.fraction
+      values: s.percentages,
+      valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-block"
     }
   ],
@@ -1141,19 +1141,19 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-top",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-top"
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "margin-top"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-top"
     }
   ],
@@ -1162,19 +1162,19 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-right",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-right"
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "margin-right"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-right"
     }
   ],
@@ -1183,19 +1183,19 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-bottom",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-bottom"
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "margin-bottom"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-bottom"
     }
   ],
@@ -1204,19 +1204,19 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-left",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
       values: ["auto"],
       styleName: "margin-left"
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "margin-left"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-left"
     }
   ],
@@ -1225,15 +1225,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding"
     }
   ],
@@ -1242,15 +1242,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-inline",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding-inline"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-inline"
     }
   ],
@@ -1259,15 +1259,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-block",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding-block"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-block"
     }
   ],
@@ -1276,15 +1276,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-top",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding-top"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-top"
     }
   ],
@@ -1293,15 +1293,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-right",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding-right"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-right"
     }
   ],
@@ -1310,15 +1310,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-bottom",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding-bottom"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-bottom"
     }
   ],
@@ -1327,15 +1327,15 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-left",
-      valueFormat: o.Value.rem
+      valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
-      valueFormat: o.Value.fraction,
+      values: s.percentages,
+      valueFormat: a.Value.fraction,
       styleName: "padding-left"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-left"
     }
   ],
@@ -1357,7 +1357,7 @@ const i = Z, L = {
     {
       styleName: "outline-width",
       values: 0,
-      valueFormat: o.Value.px
+      valueFormat: a.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. */
@@ -1372,7 +1372,7 @@ const i = Z, L = {
     {
       styleName: "outline-offset",
       values: 0,
-      valueFormat: o.Value.px
+      valueFormat: a.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. */
@@ -1588,14 +1588,14 @@ const i = Z, L = {
   /** The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.  */
   color: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-color CSS property sets the background color of an element. */
   bgColor: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "background-color"
     }
@@ -1603,7 +1603,7 @@ const i = Z, L = {
   /** The border-color shorthand CSS property sets the color of an element's border. */
   borderColor: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "border-color"
     }
@@ -1611,7 +1611,7 @@ const i = Z, L = {
   /** The outline-color CSS property sets the color of an element's outline. */
   outlineColor: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "outline-color"
     }
@@ -1619,21 +1619,21 @@ const i = Z, L = {
   /** 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: i.colorValues,
+      values: s.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: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-image CSS property sets one or more background images on an element. */
   bgImage: [
     {
-      values: i.bgImageValues,
+      values: s.bgImageValues,
       valueFormat: (e, r) => r(e),
       styleName: "background-image"
     }
@@ -1641,7 +1641,7 @@ const i = Z, L = {
   /** The box-shadow CSS property adds shadow effects around an element's frame */
   shadow: [
     {
-      values: i.shadowValues,
+      values: s.shadowValues,
       valueFormat: (e, r) => r(e),
       styleName: "box-shadow"
     }
@@ -1654,17 +1654,17 @@ const i = Z, L = {
       styleName: "transform"
     },
     {
-      values: i.percentages,
-      valueFormat: (e) => `translateX(${o.Value.fraction(e)})`,
+      values: s.percentages,
+      valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.negativePercentages,
-      valueFormat: (e) => `translateX(${o.Value.fraction(e)})`,
+      values: s.negativePercentages,
+      valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       valueFormat: (e) => `translateX(${e})`,
       styleName: "transform"
     }
@@ -1677,17 +1677,17 @@ const i = Z, L = {
       styleName: "transform"
     },
     {
-      values: i.percentages,
-      valueFormat: (e) => `translateY(${o.Value.fraction(e)})`,
+      values: s.percentages,
+      valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.negativePercentages,
-      valueFormat: (e) => `translateY(${o.Value.fraction(e)})`,
+      values: s.negativePercentages,
+      valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       valueFormat: (e) => `translateY(${e})`,
       styleName: "transform"
     }
@@ -1719,7 +1719,8 @@ const i = Z, L = {
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])",
   before: "::before",
-  after: "::after"
+  after: "::after",
+  placeholderStyles: "::placeholder"
 }, W = {
   indeterminate: ":indeterminate",
   checked: ":checked",
@@ -1729,25 +1730,25 @@ const i = Z, L = {
 }, Ve = {
   theme: ""
 }, K = { ...me, ...W, ...Ve }, ye = Object.entries(K).reduce(
-  (e, [r], a) => (e[r] = Math.pow(2, a), e),
+  (e, [r], l) => (e[r] = Math.pow(2, l), e),
   {}
 ), X = Object.entries(K).reduce(
   (e, [r]) => {
-    const a = ye[r];
-    return Object.entries(e).forEach(([l, t]) => {
-      e[+l + a] = [...t, r];
+    const l = ye[r];
+    return Object.entries(e).forEach(([o, t]) => {
+      e[+o + l] = [...t, r];
     }), e;
   },
   { 0: [] }
-), P = {
+), D = {
   hoverGroup: "hover",
   focusGroup: "focus",
   activeGroup: "active",
   disabledGroup: "disabled",
   selectedGroup: "selected"
-}, ie = {
+}, se = {
   theme: "theme"
-}, D = {
+}, P = {
   /** Styles applied for small screens and larger. >= 640 */
   sm: 640,
   /** Styles applied for medium screens and larger. >= 768 */
@@ -1761,32 +1762,32 @@ const i = Z, L = {
 };
 var Q;
 ((e) => {
-  function r(n, u, c) {
-    const s = { ...n }, m = s.props || {};
-    return u.forEach((f) => {
-      f in s && (m[f] = s[f], delete s[f]);
+  function r(n, i, c) {
+    const u = { ...n }, m = u.props || {};
+    return i.forEach((f) => {
+      f in u && (m[f] = u[f], delete u[f]);
     }), c && Object.entries(c).forEach(([f, y]) => {
       m[f] = y;
-    }), s.props = m, s;
+    }), u.props = m, u;
   }
   e.buildProps = r;
-  function a(n) {
+  function l(n) {
     return !!n && typeof n == "object";
   }
-  e.isObject = a;
-  function l(...n) {
-    return n.reduce((u, c) => (Object.keys(c ?? {}).forEach((s) => {
-      const m = u[s], f = c[s];
-      a(f) && "clean" in f && f.clean ? u[s] = f : s in W && typeof f == "boolean" || (s in W && Array.isArray(f) ? u[s] = l(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? u[s] = m.concat(...f) : a(m) && a(f) ? u[s] = l(m, f) : u[s] = f);
-    }), u), {});
+  e.isObject = l;
+  function o(...n) {
+    return n.reduce((i, c) => (Object.keys(c ?? {}).forEach((u) => {
+      const m = i[u], f = c[u];
+      l(f) && "clean" in f && f.clean ? i[u] = f : u in W && typeof f == "boolean" || (u in W && Array.isArray(f) ? i[u] = o(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? i[u] = m.concat(...f) : l(m) && l(f) ? i[u] = o(m, f) : i[u] = f);
+    }), i), {});
   }
-  e.mergeDeep = l;
-  function t(n, u) {
-    return n in u;
+  e.mergeDeep = o;
+  function t(n, i) {
+    return n in i;
   }
   e.isKeyOf = t;
 })(Q || (Q = {}));
-const R = Q, se = {
+const k = Q, ie = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -2436,6 +2437,9 @@ const R = Q, se = {
       }
     },
     children: {
+      content: {
+        styles: {}
+      },
       topBar: {
         styles: {
           py: 3,
@@ -2862,9 +2866,21 @@ const R = Q, se = {
               isLastLeaf: {},
               isEmptyCell: {}
             }
+          },
+          detailRow: {
+            styles: {}
+          },
+          row: {
+            styles: {}
+          },
+          groupRow: {
+            styles: {}
           }
         }
       },
+      emptyColumns: {
+        styles: {}
+      },
       bottomBar: {
         styles: {
           py: 3,
@@ -2884,56 +2900,72 @@ const R = Q, se = {
               color: "gray-200"
             }
           }
+        },
+        children: {
+          pagination: {
+            styles: {}
+          }
         }
       }
     }
   }
 };
+function Se(e) {
+  const r = { ...e };
+  for (const [l, o] of Object.entries(r)) {
+    if (!o.extends) continue;
+    const t = r[o.extends];
+    if (!t) continue;
+    const { extends: n, ...i } = o;
+    r[l] = k.mergeDeep({}, t, i);
+  }
+  return r;
+}
 var J;
 ((e) => {
-  function r(l, t, n) {
-    return i.setUserVariables(l), Object.entries(t).forEach(([u, c]) => {
-      L[u] = c;
-    }), Object.entries(n).forEach(([u, c]) => {
-      const s = L[u];
-      L[u] = s ? [...c, ...s] : c;
+  function r(o, t, n) {
+    return s.setUserVariables(o), Object.entries(t).forEach(([i, c]) => {
+      L[i] = c;
+    }), Object.entries(n).forEach(([i, c]) => {
+      const u = L[i];
+      L[i] = u ? [...c, ...u] : c;
     }), { extendedProps: t, extendedPropTypes: n };
   }
-  e.extend = r, e.componentsStyles = se;
-  function a(l) {
-    return e.componentsStyles = R.mergeDeep(se, l), l;
+  e.extend = r, e.componentsStyles = ie;
+  function l(o) {
+    return e.componentsStyles = Se(k.mergeDeep(ie, o)), o;
   }
-  e.components = a;
+  e.components = l;
 })(J || (J = {}));
 const $e = J, ee = we.createContext({ theme: "", setTheme: () => {
 } });
 function re(e) {
-  const { children: r, theme: a, use: l = "local" } = e, [t, n] = de(a ?? "light");
+  const { children: r, theme: l, use: o = "local" } = e, [t, n] = de(l ?? "light");
   return U(() => {
-    if (a !== void 0) return;
-    const u = window.matchMedia("(prefers-color-scheme: dark)");
-    n(u.matches ? "dark" : "light");
-    const c = (s) => {
-      n(s.matches ? "dark" : "light");
+    if (l !== void 0) return;
+    const i = window.matchMedia("(prefers-color-scheme: dark)");
+    n(i.matches ? "dark" : "light");
+    const c = (u) => {
+      n(u.matches ? "dark" : "light");
     };
-    return u.addEventListener("change", c), () => u.removeEventListener("change", c);
-  }, [a]), U(() => {
-    if (l === "local") return;
-    const u = document.documentElement;
-    return u.classList.add(t), () => {
-      u.classList.remove(t);
+    return i.addEventListener("change", c), () => i.removeEventListener("change", c);
+  }, [l]), U(() => {
+    if (o === "local") return;
+    const i = document.documentElement;
+    return i.classList.add(t), () => {
+      i.classList.remove(t);
     };
-  }, [t, l]), l === "local" ? /* @__PURE__ */ S(ee.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ S(Fe, { className: t, children: r }) }) : /* @__PURE__ */ S(ee.Provider, { value: { theme: t, setTheme: n }, children: r });
+  }, [t, o]), o === "local" ? /* @__PURE__ */ $(ee.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ $(Fe, { className: t, children: r }) }) : /* @__PURE__ */ $(ee.Provider, { value: { theme: t, setTheme: n }, children: r });
 }
 ((e) => {
   function r() {
-    const { theme: a, setTheme: l } = xe(ee);
-    return [a, l];
+    const { theme: l, setTheme: o } = xe(ee);
+    return [l, o];
   }
   e.useTheme = r;
 })(re || (re = {}));
-const Se = re;
-class ze {
+const ze = re;
+class ke {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -2941,89 +2973,90 @@ class ze {
     return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
   getByIndex(r) {
-    const { first: a, next: l } = ke, t = r - a.length;
+    const { first: l, next: o } = Re, t = r - l.length;
     if (t < 0)
-      return a[r];
-    const n = Math.floor(t / l.length), u = t - n * l.length;
-    return this.getByIndex(n) + l[u];
+      return l[r];
+    const n = Math.floor(t / o.length), i = t - n * o.length;
+    return this.getByIndex(n) + o[i];
   }
 }
-const ke = {
+const Re = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-function Re(e) {
-  const { clean: r, component: a, variant: l } = e;
+function Ae(e) {
+  const { clean: r, component: l, variant: o } = e;
   return le(() => {
     if (r) return;
-    const t = a?.split(".");
+    const t = l?.split(".");
     if (!t) return;
-    const n = t.reduce((s, m, f) => f === 0 ? $e.componentsStyles[m] : s?.children?.[m], void 0);
+    const n = t.reduce((u, m, f) => f === 0 ? $e.componentsStyles[m] : u?.children?.[m], void 0);
     if (!n) return;
-    if (!l) return n.styles;
-    const u = fe(l);
-    if (u.length === 0) return n.styles;
-    const c = R.mergeDeep(...u.map((s) => n.variants?.[s]));
-    return n.styles ? R.mergeDeep(n.styles, c) : c;
-  }, [r, a, l]);
+    if (!o) return n.styles;
+    const i = fe(o);
+    if (i.length === 0) return n.styles;
+    const c = k.mergeDeep(...i.map((u) => n.variants?.[u]));
+    return n.styles ? k.mergeDeep(n.styles, c) : c;
+  }, [r, l, o]);
 }
-const Ae = new ze(), Oe = typeof window < "u" && typeof window.document < "u", H = typeof process == "object" && process.env?.NODE_ENV === "test", Ee = Oe && !H ? U : ge, be = "_b", I = "_s";
-function He(e, r) {
-  const a = Re(e), l = le(() => a ? R.mergeDeep(a, e) : e, [e, a]), t = [r ? I : be];
-  return B.addClassNames(l, t, []), Ee(() => {
+const Oe = new ke(), Ee = typeof window < "u" && typeof window.document < "u", H = typeof process == "object" && process.env?.NODE_ENV === "test", je = Ee && !H ? U : ge, be = "_b", I = "_s";
+function Me(e, r) {
+  const l = Ae(e), o = le(() => l ? k.mergeDeep(l, e) : e, [e, l]), t = [r ? I : be];
+  return B.addClassNames(o, t, []), je(() => {
     B.flush();
-  }, [l]), t;
+  }, [o]), t;
 }
 var B;
 ((e) => {
-  let r = !0, a = !1;
-  const l = /* @__PURE__ */ new Set(), t = [], n = [];
-  let u = 0;
+  let r = !0, l = !1;
+  const o = /* @__PURE__ */ new Set(), t = [], n = [];
+  let i = 0;
   const c = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
-  let s = {};
+  let u = {};
   function m(b, h, w, p, g) {
     Object.entries(b).forEach(([v, d]) => {
-      if (R.isKeyOf(v, L))
-        x(v, d, h, w, p, g);
-      else if (R.isKeyOf(v, me))
-        m(d, h, [...w, v], p, g);
-      else if (R.isKeyOf(v, W)) {
-        if (Array.isArray(d)) {
-          const [N, F] = d;
-          m(F, h, [...w, v], p, g);
-        }
-        R.isObject(d) && m(d, h, [...w, v], p, g);
-      } else R.isKeyOf(v, D) ? m(d, h, w, v, g) : R.isKeyOf(v, P) ? Object.entries(d).forEach(([N, F]) => {
-        m(F, h, [...w, P[v]], p, N);
-      }) : R.isKeyOf(v, ie) && Object.entries(d).forEach(([N, F]) => {
-        const $ = [...w, ie[v]];
-        Object.entries(F).forEach(([V, O]) => {
-          R.isKeyOf(V, P) ? Object.entries(O).forEach(([M, E]) => {
-            m(
-              E,
-              h,
-              [...$, P[V]],
-              p,
-              // Use | as separator to distinguish theme from group name
-              `${N}|${M}`
-            );
-          }) : m({ [V]: O }, h, $, p, N);
+      if (d != null)
+        if (k.isKeyOf(v, L))
+          x(v, d, h, w, p, g);
+        else if (k.isKeyOf(v, me))
+          m(d, h, [...w, v], p, g);
+        else if (k.isKeyOf(v, W)) {
+          if (Array.isArray(d)) {
+            const [N, F] = d;
+            m(F, h, [...w, v], p, g);
+          }
+          k.isObject(d) && m(d, h, [...w, v], p, g);
+        } else k.isKeyOf(v, P) ? m(d, h, w, v, g) : k.isKeyOf(v, D) ? Object.entries(d).forEach(([N, F]) => {
+          m(F, h, [...w, D[v]], p, N);
+        }) : k.isKeyOf(v, se) && Object.entries(d).forEach(([N, F]) => {
+          const S = [...w, se[v]];
+          Object.entries(F).forEach(([V, O]) => {
+            k.isKeyOf(V, D) ? Object.entries(O).forEach(([M, E]) => {
+              m(
+                E,
+                h,
+                [...S, D[V]],
+                p,
+                // Use | as separator to distinguish theme from group name
+                `${N}|${M}`
+              );
+            }) : m({ [V]: O }, h, S, p, N);
+          });
         });
-      });
     });
   }
   e.addClassNames = m;
   function f() {
-    const b = i.hasPendingVariables();
+    const b = s.hasPendingVariables();
     if (!r && !b) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
     const h = q(), w = h.sheet;
-    if (a) {
-      if (i.hasPendingVariables()) {
-        const p = i.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, d]) => `--${v}: ${d};`).join("")}}`;
+    if (l) {
+      if (s.hasPendingVariables()) {
+        const p = s.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, d]) => `--${v}: ${d};`).join("")}}`;
         if (w && !H)
           try {
-            w.insertRule(g, 0), u++;
+            w.insertRule(g, 0), i++;
           } catch {
           }
         else
@@ -3032,7 +3065,7 @@ var B;
       }
     } else {
       const p = [
-        `:root{${i.generateVariables()}}`,
+        `:root{${s.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;}",
@@ -3048,13 +3081,13 @@ var B;
       if (w && !H)
         for (const g of p)
           try {
-            w.insertRule(g, u), u++;
+            w.insertRule(g, i), i++;
           } catch {
           }
       else
         h.textContent = p.join(`
 `);
-      a = !0;
+      l = !0;
     }
     if (t.length > 0) {
       if (t.sort((p, g) => p[1] - g[1] || p[0] - g[0]), w && !H)
@@ -3067,7 +3100,7 @@ var B;
               break;
             }
           try {
-            w.insertRule(v, u + N), n.splice(N, 0, d);
+            w.insertRule(v, i + N), n.splice(N, 0, d);
           } catch {
             w.insertRule(v, w.cssRules.length), n.push(d);
           }
@@ -3082,7 +3115,7 @@ var B;
   function y(b, h, w, p, g) {
     const d = L[b].find((V) => Array.isArray(V.values) ? V.values.includes(h) : typeof h == typeof V.values);
     if (!d) return null;
-    const N = c[b] ?? 0, F = D[p] ?? 0, $ = C(
+    const N = c[b] ?? 0, F = P[p] ?? 0, S = C(
       b,
       h,
       w,
@@ -3094,37 +3127,37 @@ var B;
       let A;
       if (G) {
         const [j, Ce] = g.split("|");
-        A = `.${j} .${Ce}${E} .${$}`;
-      } else O ? A = `.${g} .${$}${E}` : A = `.${g}${E} .${$}`;
-      const he = d.selector?.(A, "") ?? A, ve = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], pe = d.valueFormat?.(h, i.getVariableValue) ?? h, ne = `${he}{${ve.map((j) => `${j}:${pe}`).join(";")}}`;
-      return p !== "normal" ? { rule: `@media(min-width: ${D[p]}px){${ne}}`, sortIndex: N, breakpointOrder: F } : { rule: ne, sortIndex: N, breakpointOrder: F };
+        A = `.${j} .${Ce}${E} .${S}`;
+      } else O ? A = `.${g} .${S}${E}` : A = `.${g}${E} .${S}`;
+      const he = d.selector?.(A, "") ?? A, ve = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], pe = d.valueFormat?.(h, s.getVariableValue) ?? h, ne = `${he}{${ve.map((j) => `${j}:${pe}`).join(";")}}`;
+      return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${ne}}`, sortIndex: N, breakpointOrder: F } : { rule: ne, sortIndex: N, breakpointOrder: F };
     } else {
-      const V = X[w].map((A) => K[A]).join(""), O = d.selector?.(`.${$}`, V) ?? `.${$}${V}`, M = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], E = d.valueFormat?.(h, i.getVariableValue) ?? h, G = `${O}{${M.map((A) => `${A}:${E}`).join(";")}}`;
-      return p !== "normal" ? { rule: `@media(min-width: ${D[p]}px){${G}}`, sortIndex: N, breakpointOrder: F } : { rule: G, sortIndex: N, breakpointOrder: F };
+      const V = X[w].map((A) => K[A]).join(""), O = d.selector?.(`.${S}`, V) ?? `.${S}${V}`, M = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], E = d.valueFormat?.(h, s.getVariableValue) ?? h, G = `${O}{${M.map((A) => `${A}:${E}`).join(";")}}`;
+      return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${G}}`, sortIndex: N, breakpointOrder: F } : { rule: G, sortIndex: N, breakpointOrder: F };
     }
   }
   function z() {
-    s = {}, l.clear(), t.length = 0, n.length = 0, u = 0, a = !1;
+    u = {}, o.clear(), t.length = 0, n.length = 0, i = 0, l = !1;
   }
   e.clear = z;
   function x(b, h, w, p, g = "normal", v) {
     if (h == null) return;
-    const d = p.reduce(($, V) => $ + ye[V], 0), N = C(b, h, d, g, v), F = `${g}-${d}-${b}-${h}-${v ?? ""}`;
-    if (!l.has(F)) {
-      l.add(F);
-      const $ = y(b, h, d, g, v);
-      $ && (t.push([$.sortIndex, $.breakpointOrder, $.rule]), r = !0), s[g] ? s[g][d] ? s[g][d][b] || (s[g][d][b] = /* @__PURE__ */ new Set()) : s[g][d] = { [b]: /* @__PURE__ */ new Set() } : s[g] = { [d]: { [b]: /* @__PURE__ */ new Set() } }, v ? (s[g][d].__parents ? s[g][d].__parents[v] ? s[g][d].__parents[v][b] || (s[g][d].__parents[v][b] = /* @__PURE__ */ new Set()) : s[g][d].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : s[g][d].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, s[g][d].__parents[v][b].add(h)) : s[g][d][b].add(h);
+    const d = p.reduce((S, V) => S + ye[V], 0), N = C(b, h, d, g, v), F = `${g}-${d}-${b}-${h}-${v ?? ""}`;
+    if (!o.has(F)) {
+      o.add(F);
+      const S = y(b, h, d, g, v);
+      S && (t.push([S.sortIndex, S.breakpointOrder, S.rule]), r = !0), u[g] ? u[g][d] ? u[g][d][b] || (u[g][d][b] = /* @__PURE__ */ new Set()) : u[g][d] = { [b]: /* @__PURE__ */ new Set() } : u[g] = { [d]: { [b]: /* @__PURE__ */ new Set() } }, v ? (u[g][d].__parents ? u[g][d].__parents[v] ? u[g][d].__parents[v][b] || (u[g][d].__parents[v][b] = /* @__PURE__ */ new Set()) : u[g][d].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : u[g][d].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, u[g][d].__parents[v][b].add(h)) : u[g][d][b].add(h);
     }
     w.push(N);
   }
   function C(b, h, w, p, g) {
     const v = X[w], d = `${p === "normal" ? "" : `${p}-`}${v.map((N) => `${N}-`).join("")}${g ? `${g}-` : ""}${b}-${h}`;
-    return H ? d : Ae.getIdentity(d);
+    return H ? d : Oe.getIdentity(d);
   }
-  const k = "crono-styles";
+  const R = "crono-styles";
   function q() {
-    let b = document.getElementById(k);
-    return b || (b = document.createElement("style"), b.setAttribute("id", k), b.setAttribute("type", "text/css"), document.head.insertBefore(b, document.head.firstChild)), b;
+    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;
   }
 })(B || (B = {}));
 var ue;
@@ -3142,12 +3175,12 @@ Array.prototype.add || (Array.prototype.add = function(...e) {
   return r.push(...e), r;
 });
 Array.prototype.sumBy || (Array.prototype.sumBy = function(e, r = 0) {
-  return this.reduce((a, l, t) => a + e(l, t), r);
+  return this.reduce((l, o, t) => l + e(o, t), r);
 });
 Array.prototype.sortBy || (Array.prototype.sortBy = function(e, r) {
-  return [...this].sort((l, t) => {
-    const n = e(l), u = e(t);
-    return n < u ? r === "DESC" ? 1 : -1 : n > u ? r === "DESC" ? -1 : 1 : 0;
+  return [...this].sort((o, t) => {
+    const n = e(o), i = e(t);
+    return n < i ? r === "DESC" ? 1 : -1 : n > i ? r === "DESC" ? -1 : 1 : 0;
   });
 });
 Array.prototype.maxBy || (Array.prototype.maxBy = function(e) {
@@ -3160,54 +3193,54 @@ Array.prototype.findOrThrow || (Array.prototype.findOrThrow = function(e) {
 });
 Array.prototype.toRecord || (Array.prototype.toRecord = function(e) {
   return this.reduce(
-    (r, a) => {
-      const l = e(a);
-      if (!l) return r;
-      const [t, n] = l;
+    (r, l) => {
+      const o = e(l);
+      if (!o) return r;
+      const [t, n] = o;
       return r[t] = n, r;
     },
     {}
   );
 });
 Array.prototype.groupBy || (Array.prototype.groupBy = function(e, r = !1) {
-  const a = this.reduce((l, t, n) => {
-    const u = e(t, n);
-    return r && typeof u != "number" && !u || (l.has(u) === !1 && l.set(u, []), l.get(u)?.push(t)), l;
+  const l = this.reduce((o, t, n) => {
+    const i = e(t, n);
+    return r && typeof i != "number" && !i || (o.has(i) === !1 && o.set(i, []), o.get(i)?.push(t)), o;
   }, /* @__PURE__ */ new Map());
-  return Array.from(a, ([l, t]) => ({ key: l, values: t }));
+  return Array.from(l, ([o, t]) => ({ key: o, values: t }));
 });
-function Me(e) {
-  const { node: r = null, event: a = "click", hideOnScroll: l = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [u, c] = de(!1), s = Ne(null);
+function Ge(e) {
+  const { node: r = null, event: l = "click", hideOnScroll: o = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [i, c] = de(!1), u = Ne(null);
   return ge(() => {
     function m(C) {
-      (r ?? s.current)?.contains(C.target) === !1 && c(!1);
+      (r ?? u.current)?.contains(C.target) === !1 && c(!1);
     }
     function f() {
       c(!1);
     }
     function y(C) {
-      (r ?? s.current)?.contains(C.target) === !1 && c(!1);
+      (r ?? u.current)?.contains(C.target) === !1 && c(!1);
     }
     function z(C) {
       C.key === "Escape" && c(!1);
     }
     const x = new AbortController();
-    return u && (window.addEventListener(a, m, x), n && window.addEventListener("keydown", z, x), t && window.addEventListener("resize", f, x), l && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
+    return i && (window.addEventListener(l, m, x), n && window.addEventListener("keydown", z, x), t && window.addEventListener("resize", f, x), o && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
       x.abort();
     };
-  }, [r, u]), [u, c, s];
+  }, [r, i]), [i, c, u];
 }
-const je = {
+const Ie = {
   selected: "aria-selected"
 };
 var ce;
 ((e) => {
-  function r(a, l, t) {
-    a !== void 0 && a != null && (t[je[l] ?? l] = Array.isArray(a) ? a[0] : a);
+  function r(l, o, t) {
+    l !== void 0 && l != null && (t[Ie[o] ?? o] = Array.isArray(l) ? l[0] : l);
   }
   e.assignBooleanProp = r;
 })(ce || (ce = {}));
-function Ge(e) {
+function De(e) {
   let r;
   return Object.defineProperty({
     clear() {
@@ -3217,68 +3250,67 @@ function Ge(e) {
     get: () => (r === void 0 && (r = e()), r)
   });
 }
-function Ie(e, r) {
+function Le(e, r) {
   if (!e) return { score: 1, matches: [] };
   if (!r) return null;
-  const a = e.toLowerCase(), l = r.toLowerCase();
+  const l = e.toLowerCase(), o = r.toLowerCase();
   let t = 0, n = 0;
-  const u = [];
-  let c = -1, s = 0, m = 0;
-  for (; t < a.length && n < l.length; )
-    a[t] === l[n] ? (c === -1 && (c = n), t++, m++, s += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (s += 5), e[t - 1] === r[n] && (s += 1)) : (c !== -1 && (u.push([c, n]), c = -1), m = 0), n++;
-  return c !== -1 && u.push([c, n]), t < a.length ? null : (s = s / r.length, { score: s, matches: u });
+  const i = [];
+  let c = -1, u = 0, m = 0;
+  for (; t < l.length && n < o.length; )
+    l[t] === o[n] ? (c === -1 && (c = n), t++, m++, u += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (u += 5), e[t - 1] === r[n] && (u += 1)) : (c !== -1 && (i.push([c, n]), c = -1), m = 0), n++;
+  return c !== -1 && i.push([c, n]), t < l.length ? null : (u = u / r.length, { score: u, matches: i });
 }
 function Pe(e, r) {
-  return Ie(e, r) !== null;
+  return Le(e, r) !== null;
+}
+function Ue(e) {
+  return /* @__PURE__ */ $(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ $(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M12.707 14.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L12 12.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5Z",
+      clipRule: "evenodd"
+    }
+  ) });
 }
 var te;
 ((e) => {
-  function r(a, l = 300) {
+  function r(l, o = 300) {
     let t = !1, n;
-    return (...u) => {
+    return (...i) => {
       if (t) {
-        n = u;
+        n = i;
         return;
       }
-      a(...u), t = !0, setTimeout(() => {
-        t = !1, n && a(...n);
-      }, l);
+      l(...i), t = !0, setTimeout(() => {
+        t = !1, n && l(...n);
+      }, o);
     };
   }
   e.throttle = r;
 })(te || (te = {}));
-const De = te;
-function Ue(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ S(
-    "path",
-    {
-      fillRule: "evenodd",
-      d: "M12.707 14.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L12 12.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5Z",
-      clipRule: "evenodd"
-    }
-  ) });
-}
-const _ = /* @__PURE__ */ new Map();
-function We() {
-  const [e] = Se.useTheme(), r = le(() => {
-    const a = "crono-box";
-    let l = document.getElementById(a);
-    return l || (l = document.createElement("div"), l.id = a, document.body.appendChild(l)), l;
+const We = te, _ = /* @__PURE__ */ new Map();
+function Ke() {
+  const [e] = ze.useTheme(), r = le(() => {
+    const l = "crono-box";
+    let o = document.getElementById(l);
+    return o || (o = document.createElement("div"), o.id = l, document.body.appendChild(o)), o;
   }, []);
   return U(() => {
     if (!e) return;
-    const a = _.get(e) ?? 0;
-    return _.set(e, a + 1), a === 0 && r.classList.add(e), () => {
+    const l = _.get(e) ?? 0;
+    return _.set(e, l + 1), l === 0 && r.classList.add(e), () => {
       const t = (_.get(e) ?? 1) - 1;
       t <= 0 ? (_.delete(e), r.classList.remove(e)) : _.set(e, t);
     };
   }, [r, e]), r;
 }
-function Ke(e) {
-  return /* @__PURE__ */ S(T, { ...e, children: /* @__PURE__ */ S("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
-}
 function qe(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ S(
+  return /* @__PURE__ */ $(T, { ...e, children: /* @__PURE__ */ $("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+}
+function Xe(e) {
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ $(
     "path",
     {
       strokeWidth: 4,
@@ -3286,85 +3318,85 @@ function qe(e) {
     }
   ) });
 }
-function Xe(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ S("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
-}
 function Ye(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ S("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" }) });
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ $("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
+}
+function Ze(e) {
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ $("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 oe;
 ((e) => {
-  function r(a) {
-    return a.charAt(0).toUpperCase() + a.slice(1);
+  function r(l) {
+    return l.charAt(0).toUpperCase() + l.slice(1);
   }
   e.capitalize = r;
 })(oe || (oe = {}));
-const Ze = oe;
-function Qe(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ S("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" }) });
+const Qe = oe;
+function Je(e) {
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ $("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 ae;
 ((e) => {
-  function r(l) {
-    const t = Array.from(l.elements).reduce(
-      (n, u) => {
-        const c = u.name;
-        return c && (n[c] || (n[c] = []), n[c].push(u)), n;
+  function r(o) {
+    const t = Array.from(o.elements).reduce(
+      (n, i) => {
+        const c = i.name;
+        return c && (n[c] || (n[c] = []), n[c].push(i)), n;
       },
       {}
     );
-    return Object.entries(t).reduce((n, [u, c]) => {
+    return Object.entries(t).reduce((n, [i, c]) => {
       if (c.length === 1) {
-        const s = c[0];
-        a(n, u, s.type === "checkbox" || s.type === "radio" ? s.checked : s.value);
+        const u = c[0];
+        l(n, i, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
       } else {
-        const s = c.reduce((m, f) => (f.type === "checkbox" || f.type === "radio" ? f.checked && m.push(f.value) : m.push(f.value), m), []);
-        a(n, u, s);
+        const u = c.reduce((m, f) => (f.type === "checkbox" || f.type === "radio" ? f.checked && m.push(f.value) : m.push(f.value), m), []);
+        l(n, i, u);
       }
       return n;
     }, {});
   }
   e.getFormEntries = r;
-  function a(l, t, n) {
+  function l(o, t, n) {
     if (t.includes(".")) {
-      const u = t.split(".");
-      let c = l;
-      u.forEach((s, m) => {
-        if (u.length > m + 1) {
-          const f = s.match(/^(.+)\[(\d)\]$/);
+      const i = t.split(".");
+      let c = o;
+      i.forEach((u, m) => {
+        if (i.length > m + 1) {
+          const f = u.match(/^(.+)\[(\d)\]$/);
           if (f) {
             const [, y, z] = f;
             c[y] = c[y] || [], c[y][z] = c[y][z] || {}, c = c[y][z];
           } else
-            c[s] = c[s] || {}, c = c[s];
+            c[u] = c[u] || {}, c = c[u];
         } else
-          c[s] = n;
+          c[u] = n;
       });
     } else
-      l[t] = n;
+      o[t] = n;
   }
 })(ae || (ae = {}));
-const Je = ae;
+const er = ae;
 export {
   ce as B,
-  qe as D,
+  Xe as D,
   Ue as E,
-  De as F,
-  Xe as G,
-  R as O,
-  Ye as P,
-  Ke as S,
-  Se as T,
-  i as V,
+  We as F,
+  Ye as G,
+  k as O,
+  Ze as P,
+  qe as S,
+  ze as T,
+  s as V,
   $e as a,
-  Me as b,
+  Ge as b,
   fe as c,
-  Qe as d,
-  Je as e,
+  Je as d,
+  er as e,
   Pe as f,
-  Ze as g,
-  We as h,
+  Qe as g,
+  Ke as h,
   ue as i,
-  Ge as m,
-  He as u
+  De as m,
+  Me as u
 };