@graphty/compact-mantine 0.5.0 → 0.5.1

package/dist/index.js

@@ -1,8 +1,8 @@
-import { DEFAULT_THEME as Ae, CloseButton as Be, ActionIcon as L, Button as tt, RangeSlider as ot, Radio as nt, Slider as ce, Switch as rt, Checkbox as Ee, SegmentedControl as Fe, Kbd as st, Indicator as at, ThemeIcon as it, Avatar as lt, Pill as ct, Badge as dt, Text as H, RingProgress as pt, Progress as ut, Loader as ft, InputClearButton as mt, JsonInput as gt, FileInput as xt, PillsInput as ht, TagsInput as vt, MultiSelect as bt, Autocomplete as Pt, PasswordInput as zt, Textarea as yt, Select as Ve, NumberInput as pe, TextInput as Oe, Tabs as St, Stepper as wt, Pagination as Ct, NavLink as It, Burger as Tt, Anchor as kt, HoverCard as At, Popover as Bt, Tooltip as Et, Menu as Ft, mergeMantineTheme as Vt, createTheme as Ot, Box as R, Group as E, Paper as Dt, ColorSwatch as Lt, ColorPicker as Rt, Stack as Z, Divider as De, Collapse as Mt, useComputedColorScheme as _t, rem as ee } from "@mantine/core";
-import { jsx as r, jsxs as S, Fragment as Le } from "react/jsx-runtime";
-import { useUncontrolled as q, useDisclosure as Re } from "@mantine/hooks";
-import { X as ue, ChevronDown as fe, ChevronRight as Me, Plus as Ht, Minus as Nt } from "lucide-react";
-import { useRef as $, isValidElement as _e, cloneElement as He, createContext as me, useContext as re, useEffect as U, useState as _, useCallback as w, useMemo as Ne, useId as $e, forwardRef as $t } from "react";
+import { DEFAULT_THEME as Ee, CloseButton as Ae, ActionIcon as V, Button as nt, RangeSlider as ot, Radio as rt, Slider as ce, Switch as st, Checkbox as De, SegmentedControl as Oe, Kbd as at, Indicator as it, ThemeIcon as lt, Avatar as ct, Pill as dt, Badge as pt, Text as M, RingProgress as ut, Progress as ft, Loader as gt, InputClearButton as mt, JsonInput as ht, FileInput as xt, PillsInput as vt, TagsInput as bt, MultiSelect as Pt, Autocomplete as Ct, PasswordInput as zt, Textarea as yt, Select as Fe, NumberInput as pe, TextInput as Ve, Tabs as St, Stepper as wt, Pagination as It, NavLink as kt, Burger as Tt, Anchor as Et, HoverCard as At, Popover as Dt, Tooltip as Ot, Menu as Ft, mergeMantineTheme as Vt, createTheme as Bt, Box as B, Group as E, Paper as Rt, ColorSwatch as Lt, ColorPicker as Mt, Stack as K, Divider as Be, Collapse as Re, useComputedColorScheme as _t, rem as ee } from "@mantine/core";
+import { jsx as o, jsxs as y, Fragment as Le } from "react/jsx-runtime";
+import { useUncontrolled as W, useDisclosure as Me } from "@mantine/hooks";
+import { X as ue, ChevronDown as fe, ChevronRight as _e, Plus as Nt, Minus as Ht } from "lucide-react";
+import { useRef as R, isValidElement as Ne, cloneElement as He, createContext as ge, useContext as re, useEffect as _, useState as L, useCallback as z, useMemo as $e, useId as Ue, forwardRef as $t } from "react";
 import { createPortal as Ut } from "react-dom";
 const Gt = [
   "#d5d7da",
@@ -26,19 +26,19 @@ const Gt = [
   "#0d1117"
   // 9 - darkest (main background)
 ], jt = {
-  ...Ae.colors,
+  ...Ee.colors,
   dark: Gt
 }, Xt = {
   "--button-height": "24px",
   "--button-fz": "11px",
   "--button-padding-x": "8px"
-}, Wt = {
-  "--ai-size": "24px"
 }, Kt = {
+  "--ai-size": "24px"
+}, Wt = {
   "--cb-size": "16px",
   "--cb-icon-size": "12px"
 }, Zt = {
-  Button: tt.extend({
+  Button: nt.extend({
     defaultProps: {
       size: "sm"
     },
@@ -46,21 +46,21 @@ const Gt = [
       root: Xt
     })
   }),
-  ActionIcon: L.extend({
+  ActionIcon: V.extend({
     defaultProps: {
       size: "sm",
       variant: "subtle"
     },
     vars: () => ({
-      root: Wt
+      root: Kt
     })
   }),
-  CloseButton: Be.extend({
+  CloseButton: Ae.extend({
     defaultProps: {
       size: "xs"
     },
     vars: () => ({
-      root: Kt
+      root: Wt
     })
   })
 }, qt = {
@@ -74,23 +74,23 @@ const Gt = [
 }, Jt = {
   "--radio-size": "16px",
   "--radio-icon-size": "6px"
-}, Se = {
+}, ye = {
   "--slider-size": "4px",
   "--slider-thumb-size": "12px"
 }, Qt = {
   "--sc-font-size": "10px",
   "--sc-padding": "4px 8px"
-}, eo = {
+}, en = {
   backgroundColor: "transparent"
-}, to = {
-  backgroundColor: "var(--mantine-color-dark-6)"
+}, tn = {
+  backgroundColor: "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))"
 }, ae = {
   fontSize: 11
-}, we = {
+}, Se = {
   fontSize: 10,
   marginTop: 2
-}, oo = {
-  SegmentedControl: Fe.extend({
+}, nn = {
+  SegmentedControl: Oe.extend({
     defaultProps: {
       size: "sm",
       withItemsBorders: !1
@@ -99,11 +99,11 @@ const Gt = [
       root: Qt
     }),
     styles: {
-      root: eo,
-      indicator: to
+      root: en,
+      indicator: tn
     }
   }),
-  Checkbox: Ee.extend({
+  Checkbox: De.extend({
     defaultProps: {
       size: "sm"
     },
@@ -114,7 +114,7 @@ const Gt = [
       label: ae
     }
   }),
-  Switch: rt.extend({
+  Switch: st.extend({
     defaultProps: {
       size: "sm"
     },
@@ -130,13 +130,13 @@ const Gt = [
       size: "sm"
     },
     vars: () => ({
-      root: Se
+      root: ye
     }),
     styles: {
-      markLabel: we
+      markLabel: Se
     }
   }),
-  Radio: nt.extend({
+  Radio: rt.extend({
     defaultProps: {
       size: "sm"
     },
@@ -152,116 +152,116 @@ const Gt = [
       size: "sm"
     },
     vars: () => ({
-      root: Se
+      root: ye
     }),
     styles: {
-      markLabel: we
+      markLabel: Se
     }
   })
-}, no = {
+}, on = {
   "--badge-height": "14px",
   "--badge-fz": "9px",
   "--badge-padding-x": "4px"
-}, ro = {
+}, rn = {
   "--avatar-size": "24px"
-}, so = {
+}, sn = {
   "--ti-size": "24px"
-}, ao = {
+}, an = {
   "--indicator-size": "8px"
-}, io = {
+}, ln = {
   "--kbd-fz": "10px",
   "--kbd-padding": "2px 4px"
-}, lo = {
+}, cn = {
   "--pill-height": "16px",
   "--pill-fz": "10px"
-}, co = {
-  Text: H.extend({
+}, dn = {
+  Text: M.extend({
     // Text does NOT set a default size or vars - it uses the global fontSizes
     // from the theme (compactFontSizes) which are already set correctly.
     // This allows size="xs", "sm", "md", "lg", "xl" to work as expected.
   }),
-  Badge: dt.extend({
+  Badge: pt.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: no
+      root: on
     })
   }),
-  Pill: ct.extend({
+  Pill: dt.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: lo
+      root: cn
     })
   }),
-  Avatar: lt.extend({
+  Avatar: ct.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: ro
+      root: rn
     })
   }),
-  ThemeIcon: it.extend({
+  ThemeIcon: lt.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: so
+      root: sn
     })
   }),
-  Indicator: at.extend({
+  Indicator: it.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: ao
+      root: an
     })
   }),
-  Kbd: st.extend({
+  Kbd: at.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: io
+      root: ln
     })
   })
-}, po = {
+}, pn = {
   "--loader-size": "18px"
-}, uo = {
+}, un = {
   "--progress-size": "4px"
-}, fo = {
+}, fn = {
   label: {
     fontSize: 9
   }
-}, mo = {
-  Loader: ft.extend({
+}, gn = {
+  Loader: gt.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: po
+      root: pn
     })
   }),
-  Progress: ut.extend({
+  Progress: ft.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: uo
+      root: un
     }),
-    styles: fo
+    styles: fn
   }),
   // Note: RingProgress uses numeric size directly in SVG calculations,
   // so we can't use CSS variables or string size prop.
   // Use size={48} in components for compact-equivalent sizing.
-  RingProgress: pt.extend({
+  RingProgress: ut.extend({
     // No defaultProps - RingProgress requires numeric size
     // Use size={48} in your components for compact sizing
   })
-}, Ce = 1e3, j = 1100, go = 8, ln = 4, K = {
+}, we = 1e3, N = 1100, mn = 8, io = 4, X = {
   "--input-height": "24px",
   "--input-size": "24px",
   // For components that use this variable
@@ -277,18 +277,18 @@ const Gt = [
   color: "var(--mantine-color-dimmed)",
   marginBottom: 1,
   lineHeight: 1.2
-}, ge = {
+}, me = {
   paddingLeft: 8,
   paddingRight: 8,
   border: "none",
   backgroundColor: "var(--mantine-color-default)"
 }, Y = {
   label: J,
-  input: ge
+  input: me
 }, Ie = {
   label: J,
-  input: ge
-}, oe = {
+  input: me
+}, ne = {
   dropdown: {
     padding: 4,
     border: "none",
@@ -328,15 +328,15 @@ const Gt = [
     // Only set margin, not padding. Pill component controls its own height/centering.
     margin: 0
   }
-}, xo = {
-  TextInput: Oe.extend({
+}, hn = {
+  TextInput: Ve.extend({
     defaultProps: {
       size: "sm",
       variant: "filled"
     },
     vars: () => ({
       root: {},
-      wrapper: K
+      wrapper: X
     }),
     styles: Y
   }),
@@ -348,7 +348,7 @@ const Gt = [
     vars: () => ({
       root: {},
       wrapper: {
-        ...K,
+        ...X,
         "--input-right-section-width": "24px"
       },
       controls: {
@@ -357,25 +357,25 @@ const Gt = [
     }),
     styles: {
       label: J,
-      input: ge,
+      input: me,
       control: {
         borderColor: "transparent"
       }
     }
   }),
-  Select: Ve.extend({
+  Select: Fe.extend({
     defaultProps: {
       size: "sm",
       variant: "filled",
-      comboboxProps: { zIndex: j }
+      comboboxProps: { zIndex: N }
     },
     vars: () => ({
       root: {},
-      wrapper: K
+      wrapper: X
     }),
     styles: {
       ...Y,
-      ...oe
+      ...ne
     }
   }),
   Textarea: yt.extend({
@@ -396,7 +396,7 @@ const Gt = [
     },
     vars: () => ({
       root: {},
-      wrapper: K
+      wrapper: X
     }),
     styles: {
       ...Y,
@@ -406,37 +406,37 @@ const Gt = [
       }
     }
   }),
-  Autocomplete: Pt.extend({
+  Autocomplete: Ct.extend({
     defaultProps: {
       size: "sm",
       variant: "filled",
-      comboboxProps: { zIndex: j }
+      comboboxProps: { zIndex: N }
     },
     vars: () => ({
       root: {},
-      wrapper: K
+      wrapper: X
     }),
     styles: {
       ...Y,
-      ...oe
+      ...ne
     }
   }),
-  MultiSelect: bt.extend({
+  MultiSelect: Pt.extend({
     defaultProps: {
       size: "sm",
       variant: "filled",
-      comboboxProps: { zIndex: j }
+      comboboxProps: { zIndex: N }
     },
     vars: () => ({
       root: {},
       wrapper: {
-        ...K,
+        ...X,
         "--combobox-chevron-size": "12px"
       }
     }),
     styles: {
       label: J,
-      ...oe,
+      ...ne,
       ...ie,
       inputField: {
         minWidth: 60,
@@ -444,11 +444,11 @@ const Gt = [
       }
     }
   }),
-  TagsInput: vt.extend({
+  TagsInput: bt.extend({
     defaultProps: {
       size: "sm",
       variant: "filled",
-      comboboxProps: { zIndex: j }
+      comboboxProps: { zIndex: N }
     },
     vars: () => ({
       root: {},
@@ -456,7 +456,7 @@ const Gt = [
     }),
     styles: {
       label: J,
-      ...oe,
+      ...ne,
       ...ie,
       inputField: {
         minWidth: 30,
@@ -464,7 +464,7 @@ const Gt = [
       }
     }
   }),
-  PillsInput: ht.extend({
+  PillsInput: vt.extend({
     defaultProps: {
       size: "sm",
       variant: "filled"
@@ -485,11 +485,11 @@ const Gt = [
     },
     vars: () => ({
       root: {},
-      wrapper: K
+      wrapper: X
     }),
     styles: Y
   }),
-  JsonInput: gt.extend({
+  JsonInput: ht.extend({
     defaultProps: {
       size: "sm",
       variant: "filled"
@@ -511,21 +511,21 @@ const Gt = [
       }
     })
   })
-}, ho = {
+}, xn = {
   "--pagination-control-size": "24px",
   "--pagination-control-fz": "11px"
-}, vo = {
+}, vn = {
   "--stepper-icon-size": "24px",
   "--stepper-fz": "11px",
   "--stepper-spacing": "8px"
-}, bo = {
+}, bn = {
   "--burger-size": "18px",
   "--burger-line-size": "2px"
-}, Po = {
+}, Pn = {
   root: {
     fontSize: 11
   }
-}, zo = {
+}, Cn = {
   root: {
     fontSize: 11,
     minHeight: 28
@@ -533,36 +533,36 @@ const Gt = [
   label: {
     fontSize: 11
   }
-}, yo = {
+}, zn = {
   tab: {
     fontSize: 11,
     padding: "6px 10px"
   }
-}, So = {
-  Anchor: kt.extend({
+}, yn = {
+  Anchor: Et.extend({
     defaultProps: {
       size: "sm"
     },
-    styles: Po
+    styles: Pn
   }),
   Burger: Tt.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: bo
+      root: bn
     })
   }),
-  NavLink: It.extend({
+  NavLink: kt.extend({
     // NavLink does not have a size prop, only styles for compact appearance
-    styles: zo
+    styles: Cn
   }),
-  Pagination: Ct.extend({
+  Pagination: It.extend({
     defaultProps: {
       size: "sm"
     },
     vars: () => ({
-      root: ho
+      root: xn
     })
   }),
   Stepper: wt.extend({
@@ -570,94 +570,94 @@ const Gt = [
       size: "sm"
     },
     vars: () => ({
-      root: vo
+      root: vn
     })
   }),
   Tabs: St.extend({
     // Tabs does not have a size prop, only styles for compact appearance
-    styles: yo
+    styles: zn
   })
-}, wo = {
+}, Sn = {
   "--menu-item-fz": "11px"
-}, Co = {
+}, wn = {
   tooltip: {
     fontSize: 11,
     padding: "4px 8px"
   }
-}, Io = {
+}, In = {
   dropdown: {
     padding: 8
   }
-}, To = {
+}, kn = {
   dropdown: {
     padding: 8
   }
-}, ko = {
+}, Tn = {
   Menu: Ft.extend({
     defaultProps: {
-      zIndex: j
+      zIndex: N
     },
     vars: () => ({
-      dropdown: wo
+      dropdown: Sn
     })
   }),
-  Tooltip: Et.extend({
+  Tooltip: Ot.extend({
     defaultProps: {
-      zIndex: j
+      zIndex: N
     },
-    styles: Co
+    styles: wn
   }),
-  Popover: Bt.extend({
+  Popover: Dt.extend({
     defaultProps: {
-      zIndex: j
+      zIndex: N
     },
-    styles: Io
+    styles: In
   }),
   HoverCard: At.extend({
     defaultProps: {
-      zIndex: j
+      zIndex: N
     },
-    styles: To
+    styles: kn
   })
-}, Ao = {
+}, En = {
   xs: "10px",
   sm: "11px",
   // Our compact default
   md: "13px",
   lg: "14px",
   xl: "16px"
-}, Bo = {
+}, An = {
   xs: "4px",
   sm: "6px",
   md: "8px",
   lg: "12px",
   xl: "16px"
-}, Eo = {
+}, Dn = {
   xs: "2px",
   sm: "4px",
   md: "6px",
   lg: "8px",
   xl: "12px"
-}, Fo = Ot({
+}, On = Bt({
   colors: jt,
-  fontSizes: Ao,
-  spacing: Bo,
-  radius: Eo,
+  fontSizes: En,
+  spacing: An,
+  radius: Dn,
   // Disable focus ring outlines globally for a cleaner UI
   // This is appropriate for dense/professional interfaces like design tools
   focusRing: "never",
   // Spread all component extensions into the theme
   // Each extension object provides compact size support for a category of components
   components: {
-    ...xo,
+    ...hn,
     ...Zt,
-    ...oo,
-    ...co,
-    ...mo,
-    ...So,
-    ...ko
+    ...nn,
+    ...dn,
+    ...gn,
+    ...yn,
+    ...Tn
   }
-}), cn = Vt(Ae, Fo), dn = ["#5B8FF9", "#FF6B6B", "#61D095", "#F7B731", "#9B59B6"], Vo = [
+}), lo = Vt(Ee, On), Fn = [
   "#5B8FF9FF",
   "#FF6B6BFF",
   "#61D095FF",
@@ -668,43 +668,43 @@ const Gt = [
   "#61D09580",
   "#F7B73180",
   "#9B59B680"
-], le = "#888888", Ue = 255, Ge = 100;
-function je(e) {
-  return Math.round(parseInt(e, 16) / Ue * Ge);
-}
+], le = "#888888", Ge = 255, je = 100;
 function Xe(e) {
-  return Math.round(e / Ge * Ue).toString(16).padStart(2, "0");
+  return Math.round(parseInt(e, 16) / Ge * je);
 }
-function pn(e) {
+function Ke(e) {
+  return Math.round(e / je * Ge).toString(16).padStart(2, "0");
+}
+function co(e) {
   let t = e.replace("#", "");
-  t.length === 3 ? t = `${t.split("").map((o) => o + o).join("")}ff` : t.length === 4 ? t = t.split("").map((o) => o + o).join("") : t.length === 6 && (t = `${t}ff`);
-  const s = `#${t.slice(0, 6)}`, n = t.slice(6, 8), a = je(n);
-  return { hex: s, opacity: a };
+  t.length === 3 ? t = `${t.split("").map((s) => s + s).join("")}ff` : t.length === 4 ? t = t.split("").map((s) => s + s).join("") : t.length === 6 && (t = `${t}ff`);
+  const a = `#${t.slice(0, 6)}`, n = t.slice(6, 8), i = Xe(n);
+  return { hex: a, opacity: i };
 }
-function un(e, t) {
-  const s = e.replace("#", ""), n = Xe(t);
-  return `#${s}${n}`;
+function po(e, t) {
+  const a = e.replace("#", ""), n = Ke(t);
+  return `#${a}${n}`;
 }
-function fn(e) {
+function uo(e) {
   return /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(e);
 }
-const We = me(null);
-function Oo() {
+const We = ge(null);
+function Vn() {
   return re(We);
 }
-function Do({ children: e }) {
-  const t = $(null);
-  if (!_e(e))
+function Bn({ children: e }) {
+  const t = R(null);
+  if (!Ne(e))
     throw new Error("PopoutAnchor requires a single valid React element as its child");
   const n = He(e, {
     ref: t
   });
-  return /* @__PURE__ */ r(We.Provider, { value: { anchorRef: t }, children: n });
+  return /* @__PURE__ */ o(We.Provider, { value: { anchorRef: t }, children: n });
 }
-function Lo({ children: e }) {
-  return /* @__PURE__ */ r(R, { p: "sm", children: e });
+function Rn({ children: e }) {
+  return /* @__PURE__ */ o(B, { p: "sm", children: e });
 }
-const Ro = [
+const Ln = [
   // Mantine portal containers
   "[data-portal]",
   // Combobox/Select dropdowns
@@ -722,221 +722,229 @@ const Ro = [
   // Modal (just in case)
   "[data-modal]"
 ].join(", ");
-function Mo(e, t = !0) {
-  U(() => {
+function Mn(e, t = !0) {
+  _(() => {
     if (!t)
       return;
-    const s = (n) => {
-      const a = n.target;
-      a.closest('[role="dialog"]') || a.closest("[data-popout-trigger]") || a.closest("[data-popout-portal-container]") || a.closest(Ro) || e();
+    const a = (n) => {
+      const i = n.target;
+      i.closest('[role="dialog"]') || i.closest("[data-popout-trigger]") || i.closest("[data-popout-portal-container]") || i.closest(Ln) || e();
     };
-    return document.addEventListener("mousedown", s), () => {
-      document.removeEventListener("mousedown", s);
+    return document.addEventListener("mousedown", a), () => {
+      document.removeEventListener("mousedown", a);
     };
   }, [e, t]);
 }
-function _o(e, t = !0) {
-  U(() => {
+function _n(e, t = !0) {
+  _(() => {
     if (!t)
       return;
-    const s = (n) => {
+    const a = (n) => {
       n.key === "Escape" && (n.preventDefault(), e());
     };
-    return document.addEventListener("keydown", s), () => {
-      document.removeEventListener("keydown", s);
+    return document.addEventListener("keydown", a), () => {
+      document.removeEventListener("keydown", a);
     };
   }, [e, t]);
 }
-const xe = me(null), Ke = me(null);
-function he() {
-  const e = re(xe);
+const he = ge(null), Ze = ge(null);
+function xe() {
+  const e = re(he);
   if (!e)
     throw new Error("usePopoutContext must be used within a Popout component");
   return e;
 }
-function Ho() {
-  return re(xe);
+function Nn() {
+  return re(he);
 }
-function No() {
-  const e = re(Ke);
+function Hn() {
+  const e = re(Ze);
   if (!e)
     throw new Error("usePopoutManagerContext must be used within a PopoutManager");
   return e;
 }
-function $o({ children: e, parentId: t = null }) {
-  const s = $e(), [n, a] = _(!1), o = $(null), i = Ne(
+function $n({ children: e, parentId: t = null }) {
+  const a = Ue(), [n, i] = L(!1), s = R(null), l = $e(
     () => ({
-      id: s,
+      id: a,
       isOpen: n,
       open: () => {
-        a(!0);
+        i(!0);
       },
       close: () => {
-        a(!1);
+        i(!1);
       },
       toggle: () => {
-        a((c) => !c);
+        i((d) => !d);
       },
-      triggerRef: o,
+      triggerRef: s,
       parentId: t
     }),
-    [s, n, t]
+    [a, n, t]
   );
-  return /* @__PURE__ */ r(xe.Provider, { value: i, children: e });
+  return /* @__PURE__ */ o(he.Provider, { value: l, children: e });
 }
-function Uo({ children: e }) {
-  const [t, s] = _(null), n = $([]), a = $(/* @__PURE__ */ new Map()), o = $(/* @__PURE__ */ new Map()), [i, c] = _(0), u = w((p, m, P) => {
-    var y, N;
-    if (!n.current.includes(p)) {
-      const z = n.current, V = [];
-      for (const B of z)
-        o.current.get(B) === (P ?? null) && V.push(B);
-      for (const B of V.reverse()) {
-        const M = [];
-        for (const O of z) {
-          let D = O;
-          for (; D; ) {
-            const I = o.current.get(D);
-            if (I === B) {
-              M.push(O);
-              break;
-            }
-            D = I ?? null;
-          }
+function Un({ children: e }) {
+  const [t, a] = L(null), n = R([]), i = R(/* @__PURE__ */ new Map()), s = R(/* @__PURE__ */ new Map()), [l, d] = L(0), b = z((c) => {
+    const r = [];
+    for (const p of n.current)
+      (s.current.get(p) ?? null) === c && r.push(p);
+    return r;
+  }, []), h = z((c) => {
+    const r = [];
+    for (const p of n.current) {
+      let g = p;
+      for (; g; ) {
+        const O = s.current.get(g) ?? null;
+        if (O === c) {
+          r.push(p);
+          break;
         }
-        for (const O of M.reverse())
-          (y = a.current.get(O)) == null || y();
-        (N = a.current.get(B)) == null || N();
+        g = O;
       }
-      n.current = [...n.current.filter((B) => !V.includes(B) && !V.some((M) => {
-        let O = B;
-        for (; O; ) {
-          const D = o.current.get(O);
-          if (D === M)
-            return !0;
-          O = D ?? null;
-        }
-        return !1;
-      })), p], a.current.set(p, m), o.current.set(p, P ?? null), c((B) => B + 1);
     }
-  }, []), x = w((p) => {
-    n.current = n.current.filter((m) => m !== p), a.current.delete(p), o.current.delete(p), c((m) => m + 1);
-  }, []), v = w((p) => {
-    const m = n.current.indexOf(p);
-    return m >= 0 ? Ce + m : Ce;
-  }, []), f = w((p) => {
-    const m = n.current, P = m.indexOf(p);
-    P === -1 || P === m.length - 1 || (n.current = [
-      ...m.filter((y) => y !== p),
-      p
-    ], c((y) => y + 1));
-  }, []), d = w((p) => o.current.get(p) ?? null, []), h = w((p, m) => {
-    let P = m;
-    for (; P; ) {
-      const y = o.current.get(P);
-      if (y === p)
+    return r;
+  }, []), x = z((c) => {
+    let r = 0, p = c;
+    for (; p; ) {
+      const g = s.current.get(p) ?? null;
+      if (!g)
+        break;
+      r++, p = g;
+    }
+    return r;
+  }, []), m = z((c) => {
+    var p;
+    const r = [...c].sort((g, O) => x(O) - x(g));
+    for (const g of r)
+      (p = i.current.get(g)) == null || p();
+  }, [x]), u = z((c, r, p) => {
+    if (n.current.includes(c))
+      return;
+    const g = p ?? null, O = b(g), G = [];
+    for (const S of O)
+      G.push(S), G.push(...h(S));
+    m(G);
+    const q = new Set(G);
+    n.current = n.current.filter((S) => !q.has(S)), n.current.push(c), i.current.set(c, r), s.current.set(c, g), d((S) => S + 1);
+  }, [b, h, m]), P = z((c) => {
+    n.current = n.current.filter((r) => r !== c), i.current.delete(c), s.current.delete(c), d((r) => r + 1);
+  }, []), A = z((c) => {
+    const r = n.current.indexOf(c);
+    return r >= 0 ? we + r : we;
+  }, []), f = z((c) => {
+    const r = n.current, p = r.indexOf(c);
+    p === -1 || p === r.length - 1 || (n.current = [
+      ...r.filter((g) => g !== c),
+      c
+    ], d((g) => g + 1));
+  }, []), v = z((c) => s.current.get(c) ?? null, []), C = z((c, r) => {
+    let p = r;
+    for (; p; ) {
+      const g = s.current.get(p);
+      if (g === c)
         return !0;
-      P = y ?? null;
+      p = g ?? null;
     }
     return !1;
-  }, []), F = w((p) => {
-    const m = [], P = n.current;
-    for (const y of P)
-      h(p, y) && m.push(y);
-    return m;
-  }, [h]), l = w((p) => {
-    const m = F(p);
-    for (const P of [...m].reverse()) {
-      const y = a.current.get(P);
-      y == null || y();
+  }, []), w = z((c) => {
+    const r = [], p = n.current;
+    for (const g of p)
+      C(c, g) && r.push(g);
+    return r;
+  }, [C]), D = z((c) => {
+    const r = w(c);
+    for (const p of [...r].reverse()) {
+      const g = i.current.get(p);
+      g == null || g();
     }
-  }, [F]), g = w((p) => {
-    l(p);
-    const m = a.current.get(p);
-    m == null || m();
-  }, [l]), b = w((p, m) => {
-    const P = n.current;
-    for (const y of P) {
-      if (y === p)
+  }, [w]), k = z((c) => {
+    D(c);
+    const r = i.current.get(c);
+    r == null || r();
+  }, [D]), T = z((c, r) => {
+    const p = n.current;
+    for (const g of p) {
+      if (g === c)
         continue;
-      o.current.get(y) === m && g(y);
+      s.current.get(g) === r && k(g);
     }
-  }, [g]), C = w(() => {
-    const p = n.current;
-    if (p.length === 0)
+  }, [k]), F = z(() => {
+    const c = n.current;
+    if (c.length === 0)
       return;
-    const m = p[p.length - 1], P = a.current.get(m);
-    P == null || P();
-  }, []), A = w(() => {
-    const p = [...n.current];
-    for (const m of p) {
-      const P = a.current.get(m);
-      P == null || P();
+    const r = c[c.length - 1], p = i.current.get(r);
+    p == null || p();
+  }, []), H = z(() => {
+    const c = [...n.current];
+    for (const r of c) {
+      const p = i.current.get(r);
+      p == null || p();
     }
-  }, []), T = w(() => n.current.length > 0, []), [X, G] = _(!1);
-  U(() => {
-    G(n.current.length > 0);
-  }, [i]), _o(C, X), Mo(A, X);
-  const Q = Ne(
+  }, []), Z = z(() => n.current.length > 0, []), [$, U] = L(!1);
+  _(() => {
+    U(n.current.length > 0);
+  }, [l]), _n(F, $), Mn(H, $);
+  const Q = $e(
     () => ({
       register: u,
-      unregister: x,
-      getZIndex: v,
+      unregister: P,
+      getZIndex: A,
       bringToFront: f,
       portalContainer: t,
-      zIndexVersion: i,
-      closeFocused: C,
-      closeAll: A,
-      hasOpenPopouts: T,
-      closeWithDescendants: g,
-      closeDescendants: l,
-      closeSiblings: b,
-      getParentId: d,
-      isAncestor: h
+      zIndexVersion: l,
+      closeFocused: F,
+      closeAll: H,
+      hasOpenPopouts: Z,
+      closeWithDescendants: k,
+      closeDescendants: D,
+      closeSiblings: T,
+      getParentId: v,
+      isAncestor: C
     }),
-    [u, x, v, f, t, i, C, A, T, g, l, b, d, h]
+    [u, P, A, f, t, l, F, H, Z, k, D, T, v, C]
   );
-  return /* @__PURE__ */ S(Ke.Provider, { value: Q, children: [
+  return /* @__PURE__ */ y(Ze.Provider, { value: Q, children: [
     e,
-    /* @__PURE__ */ r("div", { ref: s, "data-popout-portal-container": !0 })
+    /* @__PURE__ */ o("div", { ref: a, "data-popout-portal-container": !0 })
   ] });
 }
-function Go(e) {
-  const { isOpen: t, onDragStart: s } = e, [n, a] = _({ left: 0, top: 0 }), o = $(!1), i = $({
+function Gn(e) {
+  const { isOpen: t, onDragStart: a } = e, [n, i] = L({ left: 0, top: 0 }), s = R(!1), l = R({
     x: 0,
     y: 0,
     offsetLeft: 0,
     offsetTop: 0
-  }), c = w(() => {
-    a({ left: 0, top: 0 });
-  }, []), u = w(
-    (f) => {
-      const d = f.target;
-      d.tagName === "INPUT" || d.tagName === "TEXTAREA" || d.tagName === "BUTTON" || d.tagName === "SELECT" || d.closest("button") || d.closest("input") || d.closest("textarea") || d.closest("select") || (o.current = !0, i.current = {
-        x: f.clientX,
-        y: f.clientY,
+  }), d = z(() => {
+    i({ left: 0, top: 0 });
+  }, []), b = z(
+    (m) => {
+      const u = m.target;
+      u.tagName === "INPUT" || u.tagName === "TEXTAREA" || u.tagName === "BUTTON" || u.tagName === "SELECT" || u.closest("button") || u.closest("input") || u.closest("textarea") || u.closest("select") || (s.current = !0, l.current = {
+        x: m.clientX,
+        y: m.clientY,
         offsetLeft: n.left,
         offsetTop: n.top
-      }, s == null || s(), f.target.setPointerCapture(f.pointerId));
+      }, a == null || a(), m.target.setPointerCapture(m.pointerId));
     },
-    [n.left, n.top, s]
-  ), x = w((f) => {
-    if (!o.current)
+    [n.left, n.top, a]
+  ), h = z((m) => {
+    if (!s.current)
       return;
-    const d = f.clientX - i.current.x, h = f.clientY - i.current.y;
-    a({
-      left: i.current.offsetLeft + d,
-      top: i.current.offsetTop + h
+    const u = m.clientX - l.current.x, P = m.clientY - l.current.y;
+    i({
+      left: l.current.offsetLeft + u,
+      top: l.current.offsetTop + P
     });
-  }, []), v = w((f) => {
-    o.current && (o.current = !1, f.target.releasePointerCapture(f.pointerId));
+  }, []), x = z((m) => {
+    s.current && (s.current = !1, m.target.releasePointerCapture(m.pointerId));
   }, []);
   return t ? {
     dragTriggerProps: {
       "data-drag-trigger": !0,
-      onPointerDown: u,
-      onPointerMove: x,
-      onPointerUp: v,
+      onPointerDown: b,
+      onPointerMove: h,
+      onPointerUp: x,
       style: {
         cursor: "grab",
         userSelect: "none",
@@ -944,199 +952,199 @@ function Go(e) {
       }
     },
     dragOffset: n,
-    resetDragOffset: c
+    resetDragOffset: d
   } : {
     dragTriggerProps: {},
     dragOffset: { left: 0, top: 0 },
-    resetDragOffset: c
+    resetDragOffset: d
   };
 }
-function jo({
+function jn({
   config: e,
   onClose: t,
-  dragTriggerProps: s = {},
+  dragTriggerProps: a = {},
   actions: n = [],
-  activeTab: a,
-  onTabChange: o,
-  titleId: i
+  activeTab: i,
+  onTabChange: s,
+  titleId: l
 }) {
-  var d;
-  const { style: c, ...u } = s, v = e.variant === "tabs" ? e : null, f = (v == null ? void 0 : v.tabs.map((h) => ({
-    value: h.id,
-    label: h.label
+  var u;
+  const { style: d, ...b } = a, x = e.variant === "tabs" ? e : null, m = (x == null ? void 0 : x.tabs.map((P) => ({
+    value: P.id,
+    label: P.label
   }))) ?? [];
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ y(
     E,
     {
       justify: "space-between",
       px: "sm",
       py: "xs",
-      ...u,
+      ...b,
       style: {
-        ...c
+        ...d
       },
       children: [
-        e.variant === "title" ? /* @__PURE__ */ r(H, { id: i, size: "sm", fw: 500, children: e.title }) : /* @__PURE__ */ S(Le, { children: [
-          /* @__PURE__ */ r("span", { id: i, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0, 0, 0, 0)" }, children: ((d = v == null ? void 0 : v.tabs[0]) == null ? void 0 : d.label) ?? "Settings" }),
-          /* @__PURE__ */ r(
-            Fe,
+        e.variant === "title" ? /* @__PURE__ */ o(M, { id: l, size: "sm", fw: 500, children: e.title }) : /* @__PURE__ */ y(Le, { children: [
+          /* @__PURE__ */ o("span", { id: l, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0, 0, 0, 0)" }, children: ((u = x == null ? void 0 : x.tabs[0]) == null ? void 0 : u.label) ?? "Settings" }),
+          /* @__PURE__ */ o(
+            Oe,
             {
-              data: f,
-              value: a,
-              onChange: (h) => o == null ? void 0 : o(h),
+              data: m,
+              value: i,
+              onChange: (P) => s == null ? void 0 : s(P),
               size: "xs"
             }
           )
         ] }),
-        /* @__PURE__ */ S(E, { gap: 4, children: [
-          n.map((h) => /* @__PURE__ */ r(
-            L,
+        /* @__PURE__ */ y(E, { gap: 4, children: [
+          n.map((P) => /* @__PURE__ */ o(
+            V,
             {
               variant: "subtle",
-              onClick: h.onClick,
-              "aria-label": h.label,
-              children: h.icon
+              onClick: P.onClick,
+              "aria-label": P.label,
+              children: P.icon
             },
-            h.id
+            P.id
           )),
-          /* @__PURE__ */ r(Be, { size: "sm", onClick: t, "aria-label": "Close panel" })
+          /* @__PURE__ */ o(Ae, { size: "sm", onClick: t, "aria-label": "Close panel" })
         ] })
       ]
     }
   );
 }
-function Xo(e, t, s = go, n = {}) {
-  const { placement: a = "left", alignment: o = "start", panelHeight: i = 0 } = n;
-  let c, u;
-  switch (a) {
+function Xn(e, t, a = mn, n = {}) {
+  const { placement: i = "left", alignment: s = "start", panelHeight: l = 0 } = n;
+  let d, b;
+  switch (i) {
     case "left":
-      c = e.left - t - s, u = Te(e, o, i);
+      d = e.left - t - a, b = ke(e, s, l);
       break;
     case "right":
-      c = e.right + s, u = Te(e, o, i);
+      d = e.right + a, b = ke(e, s, l);
       break;
     case "top":
-      c = ke(e, o, t), u = e.top - i - s;
+      d = Te(e, s, t), b = e.top - l - a;
       break;
     case "bottom":
-      c = ke(e, o, t), u = e.bottom + s;
+      d = Te(e, s, t), b = e.bottom + a;
       break;
     default: {
-      const x = a;
-      throw new Error(`Unknown placement: ${String(x)}`);
+      const h = i;
+      throw new Error(`Unknown placement: ${String(h)}`);
     }
   }
-  return { left: c, top: u };
+  return { left: d, top: b };
 }
-function Te(e, t, s) {
+function ke(e, t, a) {
   switch (t) {
     case "start":
       return e.top;
     case "center":
-      return e.top + e.height / 2 - s / 2;
+      return e.top + e.height / 2 - a / 2;
     case "end":
-      return e.bottom - s;
+      return e.bottom - a;
     default: {
       const n = t;
       throw new Error(`Unknown alignment: ${String(n)}`);
     }
   }
 }
-function ke(e, t, s) {
+function Te(e, t, a) {
   switch (t) {
     case "start":
       return e.left;
     case "center":
-      return e.left + e.width / 2 - s / 2;
+      return e.left + e.width / 2 - a / 2;
     case "end":
-      return e.right - s;
+      return e.right - a;
     default: {
       const n = t;
       throw new Error(`Unknown alignment: ${String(n)}`);
     }
   }
 }
-function Wo({
+function Kn({
   width: e,
   height: t,
-  header: s,
+  header: a,
   children: n,
-  anchorRef: a,
-  placement: o = "left",
-  alignment: i = "start",
-  gap: c = 0,
-  actions: u
+  anchorRef: i,
+  placement: s = "left",
+  alignment: l = "start",
+  gap: d = 0,
+  actions: b
 }) {
-  var ze, ye;
-  const { isOpen: x, close: v, triggerRef: f, id: d, parentId: h } = he(), { getZIndex: F, portalContainer: l, register: g, unregister: b, bringToFront: C, zIndexVersion: A, closeWithDescendants: T, closeDescendants: X } = No(), G = Oo(), Q = $e(), p = `popout-panel-${d}`, m = `popout-title-${Q}`, [P, y] = _(null), N = $(!1), z = $(null), V = w(() => {
-    C(d);
-  }, [C, d]), { dragTriggerProps: B, dragOffset: M, resetDragOffset: O } = Go({
-    isOpen: x,
-    onDragStart: V
-  }), D = s.variant === "tabs", I = D ? s : null, se = (I == null ? void 0 : I.defaultTab) ?? ((ze = I == null ? void 0 : I.tabs[0]) == null ? void 0 : ze.id), [ve, be] = _(se), Ze = w(
-    (k) => {
-      var W;
-      be(k), (W = I == null ? void 0 : I.onTabChange) == null || W.call(I, k);
+  var Ce, ze;
+  const { isOpen: h, close: x, triggerRef: m, id: u, parentId: P } = xe(), { getZIndex: A, portalContainer: f, register: v, unregister: C, bringToFront: w, zIndexVersion: D, closeWithDescendants: k, closeDescendants: T } = Hn(), F = Vn(), H = Ue(), Z = `popout-panel-${u}`, $ = `popout-title-${H}`, [U, Q] = L(null), c = R(!1), r = R(null), p = z(() => {
+    w(u);
+  }, [w, u]), { dragTriggerProps: g, dragOffset: O, resetDragOffset: G } = Gn({
+    isOpen: h,
+    onDragStart: p
+  }), q = a.variant === "tabs", S = q ? a : null, se = (S == null ? void 0 : S.defaultTab) ?? ((Ce = S == null ? void 0 : S.tabs[0]) == null ? void 0 : Ce.id), [ve, be] = L(se), qe = z(
+    (I) => {
+      var j;
+      be(I), (j = S == null ? void 0 : S.onTabChange) == null || j.call(S, I);
     },
-    [I]
-  ), qe = w(
-    (k) => {
-      k.stopPropagation(), X(d), C(d);
+    [S]
+  ), Ye = z(
+    (I) => {
+      I.stopPropagation(), T(u), w(u);
     },
-    [X, C, d]
-  ), Ye = w(() => {
-    T(d);
-  }, [T, d]);
-  if (U(() => (x ? g(d, v, h) : b(d), () => {
-    b(d);
-  }), [x, d, g, b, v, h]), U(() => {
-    if (x) {
-      let k = (a == null ? void 0 : a.current) ?? null;
-      if (!k && (G != null && G.anchorRef.current) && (k = G.anchorRef.current), !k && h && (k = document.querySelector(`[data-popout-id="${h}"]`)), k || (k = f.current), k) {
-        const W = k.getBoundingClientRect(), et = Xo(W, e, c, {
-          placement: o,
-          alignment: i,
+    [T, w, u]
+  ), Je = z(() => {
+    k(u);
+  }, [k, u]);
+  if (_(() => (h ? v(u, x, P) : C(u), () => {
+    C(u);
+  }), [h, u, v, C, x, P]), _(() => {
+    if (h) {
+      let I = (i == null ? void 0 : i.current) ?? null;
+      if (!I && (F != null && F.anchorRef.current) && (I = F.anchorRef.current), !I && P && (I = document.querySelector(`[data-popout-id="${P}"]`)), I || (I = m.current), I) {
+        const j = I.getBoundingClientRect(), tt = Xn(j, e, d, {
+          placement: s,
+          alignment: l,
           panelHeight: t
         });
-        y(et), N.current || (O(), D && be(se));
+        Q(tt), c.current || (G(), q && be(se));
       }
     }
-    N.current = x;
-  }, [x, e, t, c, f, a, o, i, O, D, se, h]), U(() => {
-    if (x && z.current) {
-      const k = setTimeout(() => {
-        var W;
-        (W = z.current) == null || W.focus();
+    c.current = h;
+  }, [h, e, t, d, m, i, s, l, G, q, se, P, F]), _(() => {
+    if (h && r.current) {
+      const I = setTimeout(() => {
+        var j;
+        (j = r.current) == null || j.focus();
       }, 0);
       return () => {
-        clearTimeout(k);
+        clearTimeout(I);
       };
-    } else !x && f.current && f.current.focus();
-  }, [x, f]), !x || !l || !P)
+    } else !h && m.current && m.current.focus();
+  }, [h, m]), !h || !f || !U)
     return null;
-  const Je = F(d), Pe = {
-    left: P.left + M.left,
-    top: P.top + M.top
-  }, Qe = /* @__PURE__ */ S(
-    Dt,
+  const Qe = A(u), Pe = {
+    left: U.left + O.left,
+    top: U.top + O.top
+  }, et = /* @__PURE__ */ y(
+    Rt,
     {
-      ref: z,
-      id: p,
+      ref: r,
+      id: Z,
       role: "dialog",
       "aria-modal": "false",
-      "aria-labelledby": m,
+      "aria-labelledby": $,
       tabIndex: -1,
       radius: 8,
-      onClick: qe,
-      "data-popout-id": d,
-      ...h && { "data-parent-id": h },
+      onClick: Ye,
+      "data-popout-id": u,
+      ...P && { "data-parent-id": P },
       style: {
         position: "fixed",
         left: Pe.left,
         top: Pe.top,
         minWidth: e,
         ...t !== void 0 && { minHeight: t },
-        zIndex: Je,
+        zIndex: Qe,
         backgroundColor: "var(--mantine-color-body)",
         border: "1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12))",
         // Figma-style shadows: tight, hard near edges, softer further out
@@ -1152,133 +1160,133 @@ function Wo({
         outline: "none"
       },
       children: [
-        /* @__PURE__ */ r(
-          jo,
+        /* @__PURE__ */ o(
+          jn,
           {
-            config: s,
-            onClose: Ye,
-            dragTriggerProps: B,
+            config: a,
+            onClose: Je,
+            dragTriggerProps: g,
             activeTab: ve,
-            onTabChange: Ze,
-            actions: u,
-            titleId: m
+            onTabChange: qe,
+            actions: b,
+            titleId: $
           }
         ),
-        /* @__PURE__ */ r(R, { children: D ? (ye = I == null ? void 0 : I.tabs.find((k) => k.id === ve)) == null ? void 0 : ye.content : n })
+        /* @__PURE__ */ o(B, { children: q ? (ze = S == null ? void 0 : S.tabs.find((I) => I.id === ve)) == null ? void 0 : ze.content : n })
       ]
     }
   );
-  return Ut(Qe, l);
+  return Ut(et, f);
 }
-function Ko({ children: e }) {
-  const { toggle: t, triggerRef: s, isOpen: n, id: a } = he(), o = w(
-    (u) => {
-      u.stopPropagation(), t();
+function Wn({ children: e }) {
+  const { toggle: t, triggerRef: a, isOpen: n, id: i } = xe(), s = z(
+    (b) => {
+      b.stopPropagation(), t();
     },
     [t]
   );
-  if (!_e(e))
+  if (!Ne(e))
     throw new Error("PopoutTrigger requires a single valid React element as its child");
-  const i = `popout-panel-${a}`, c = e;
-  return He(c, {
-    onClick: (u) => {
-      var x, v;
-      (v = (x = c.props).onClick) == null || v.call(x, u), o(u);
+  const l = `popout-panel-${i}`, d = e;
+  return He(d, {
+    onClick: (b) => {
+      var h, x;
+      (x = (h = d.props).onClick) == null || x.call(h, b), s(b);
     },
-    ref: s,
+    ref: a,
     // Mark this element as a popout trigger for click-outside detection
     "data-popout-trigger": !0,
     // ARIA attributes for accessibility
     "aria-expanded": n,
-    "aria-controls": i,
+    "aria-controls": l,
     "aria-haspopup": "dialog"
   });
 }
-function Zo({ children: e }) {
-  const t = Ho(), s = (t == null ? void 0 : t.id) ?? null;
-  return /* @__PURE__ */ r($o, { parentId: s, children: e });
+function Zn({ children: e }) {
+  const t = Nn(), a = (t == null ? void 0 : t.id) ?? null;
+  return /* @__PURE__ */ o($n, { parentId: a, children: e });
 }
-const ne = Object.assign(Zo, {
-  Trigger: Ko,
-  Panel: Wo,
-  Content: Lo,
-  Anchor: Do
-}), mn = $t(
-  function({ icon: t, size: s = "xs", ...n }, a) {
-    const { isOpen: o } = he();
-    return /* @__PURE__ */ r(
-      L,
+const oe = Object.assign(Zn, {
+  Trigger: Wn,
+  Panel: Kn,
+  Content: Rn,
+  Anchor: Bn
+}), fo = $t(
+  function({ icon: t, size: a = "xs", ...n }, i) {
+    const { isOpen: s } = xe();
+    return /* @__PURE__ */ o(
+      V,
       {
-        ref: a,
-        variant: o ? "light" : "subtle",
-        size: s,
-        c: o ? void 0 : "dimmed",
+        ref: i,
+        variant: s ? "light" : "subtle",
+        size: a,
+        c: s ? void 0 : "dimmed",
         ...n,
         children: t
       }
     );
   }
 );
-function gn({ children: e }) {
-  return /* @__PURE__ */ r(Uo, { children: e });
+function go({ children: e }) {
+  return /* @__PURE__ */ o(Un, { children: e });
 }
-function qo({
+function qn({
   color: e,
   defaultColor: t,
-  opacity: s,
+  opacity: a,
   defaultOpacity: n = 100,
-  onColorChange: a,
-  onOpacityChange: o,
-  label: i,
-  showOpacity: c = !0
+  onColorChange: i,
+  onOpacityChange: s,
+  label: l,
+  showOpacity: d = !0
 }) {
-  const [u, x] = q({
+  const [b, h] = W({
     value: e,
     defaultValue: void 0,
     finalValue: void 0,
-    onChange: a
-  }), [v, f] = q({
-    value: s,
+    onChange: i
+  }), [x, m] = W({
+    value: a,
     defaultValue: void 0,
     finalValue: void 0,
-    onChange: o
-  }), d = u === void 0, h = v === void 0, F = d && (!c || h), l = u ?? t, g = v ?? n, [b, C] = _(l.replace("#", "").toUpperCase()), [A, T] = _(g);
-  U(() => {
-    C(l.replace("#", "").toUpperCase());
-  }, [l]), U(() => {
-    T(g);
-  }, [g]);
-  const X = (z) => {
-    if (z.length === 9) {
-      const V = z.slice(0, 7).toUpperCase(), B = z.slice(7, 9), M = je(B);
-      x(V), c && f(M);
+    onChange: s
+  }), u = b === void 0, P = x === void 0, A = u && (!d || P), f = b ?? t, v = x ?? n, [C, w] = L(f.replace("#", "").toUpperCase()), [D, k] = L(v);
+  _(() => {
+    w(f.replace("#", "").toUpperCase());
+  }, [f]), _(() => {
+    k(v);
+  }, [v]);
+  const T = (r) => {
+    if (r.length === 9) {
+      const p = r.slice(0, 7).toUpperCase(), g = r.slice(7, 9), O = Xe(g);
+      h(p), d && m(O);
     } else
-      x(z.toUpperCase());
-  }, G = () => {
-    const z = Xe(g);
-    return `${l}${z}`.toUpperCase();
-  }, Q = (z) => {
-    C(z.currentTarget.value.toUpperCase());
-  }, p = () => {
-    let z = b.toUpperCase();
-    z && !z.startsWith("#") && (z = `#${z}`), /^#[0-9A-F]{6}$/i.test(z) && z !== l ? x(z) : C(l.replace("#", "").toUpperCase());
-  }, m = (z) => {
-    T(z);
-  }, P = () => {
-    const z = typeof A == "string" ? parseFloat(A) : A;
-    if (isNaN(z))
-      T(g);
+      h(r.toUpperCase());
+  }, F = () => {
+    const r = Ke(v);
+    return `${f}${r}`.toUpperCase();
+  }, H = (r) => {
+    w(r.currentTarget.value.toUpperCase());
+  }, Z = () => {
+    let r = C.toUpperCase();
+    r && !r.startsWith("#") && (r = `#${r}`), /^#[0-9A-F]{6}$/i.test(r) && r !== f ? h(r) : w(f.replace("#", "").toUpperCase());
+  }, $ = (r) => {
+    k(r);
+  }, U = () => {
+    const r = typeof D == "string" ? parseFloat(D) : D;
+    if (isNaN(r))
+      k(v);
     else {
-      const V = Math.min(100, Math.max(0, z));
-      V !== g && f(V);
+      const p = Math.min(100, Math.max(0, r));
+      p !== v && m(p);
     }
-  }, y = () => {
-    x(void 0), c && f(void 0);
-  }, N = /* @__PURE__ */ S(E, { gap: 4, wrap: "nowrap", children: [
-    /* @__PURE__ */ S(E, { gap: 0, children: [
-      /* @__PURE__ */ S(ne, { children: [
-        /* @__PURE__ */ r(ne.Trigger, { children: /* @__PURE__ */ r(
-          L,
+  }, Q = () => {
+    h(void 0), d && m(void 0);
+  }, c = /* @__PURE__ */ y(E, { gap: 4, wrap: "nowrap", children: [
+    /* @__PURE__ */ y(E, { gap: 0, children: [
+      /* @__PURE__ */ y(oe, { children: [
+        /* @__PURE__ */ o(oe.Trigger, { children: /* @__PURE__ */ o(
+          V,
           {
             variant: "filled",
             size: 24,
@@ -1288,10 +1296,10 @@ function qo({
               borderRadius: "4px 0 0 4px"
             },
             "aria-label": "Color swatch",
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ o(
               Lt,
               {
-                color: l,
+                color: f,
                 size: 14,
                 radius: 2,
                 style: {
@@ -1301,41 +1309,41 @@ function qo({
             )
           }
         ) }),
-        /* @__PURE__ */ r(
-          ne.Panel,
+        /* @__PURE__ */ o(
+          oe.Panel,
           {
             width: 220,
-            header: { variant: "title", title: i ?? "Color" },
+            header: { variant: "title", title: l ?? "Color" },
             placement: "bottom",
             alignment: "start",
             gap: 4,
-            children: /* @__PURE__ */ r(ne.Content, { children: /* @__PURE__ */ r(
-              Rt,
+            children: /* @__PURE__ */ o(oe.Content, { children: /* @__PURE__ */ o(
+              Mt,
               {
                 format: "hexa",
-                value: G(),
-                onChange: X,
-                swatches: [...Vo]
+                value: F(),
+                onChange: T,
+                swatches: [...Fn]
               }
             ) })
           }
         )
       ] }),
-      /* @__PURE__ */ r(
-        Oe,
+      /* @__PURE__ */ o(
+        Ve,
         {
-          value: b,
-          onChange: Q,
-          onBlur: p,
+          value: C,
+          onChange: H,
+          onBlur: Z,
           "aria-label": "Color hex value",
-          "data-is-default": d ? "true" : "false",
+          "data-is-default": u ? "true" : "false",
           w: 72,
           styles: {
             input: {
-              borderRadius: c ? 0 : "0 4px 4px 0",
+              borderRadius: d ? 0 : "0 4px 4px 0",
               fontFamily: "monospace",
               textTransform: "uppercase",
-              ...d ? {
+              ...u ? {
                 fontStyle: "italic",
                 color: "var(--mantine-color-dimmed)"
               } : {}
@@ -1343,9 +1351,9 @@ function qo({
           }
         }
       ),
-      c && /* @__PURE__ */ S(Le, { children: [
-        /* @__PURE__ */ r(
-          R,
+      d && /* @__PURE__ */ y(Le, { children: [
+        /* @__PURE__ */ o(
+          B,
           {
             style: {
               width: 1,
@@ -1354,24 +1362,24 @@ function qo({
             }
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           pe,
           {
-            value: A,
-            onChange: m,
-            onBlur: P,
+            value: D,
+            onChange: $,
+            onBlur: U,
             min: 0,
             max: 100,
             hideControls: !0,
             suffix: "%",
             "aria-label": "Opacity",
-            "data-is-default": h ? "true" : "false",
+            "data-is-default": P ? "true" : "false",
             w: 54,
             styles: {
               input: {
                 borderRadius: "0 4px 4px 0",
                 textAlign: "right",
-                ...h ? {
+                ...P ? {
                   fontStyle: "italic",
                   color: "var(--mantine-color-dimmed)"
                 } : {}
@@ -1381,204 +1389,239 @@ function qo({
         )
       ] })
     ] }),
-    !F && /* @__PURE__ */ r(
-      L,
+    !A && /* @__PURE__ */ o(
+      V,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
-        "aria-label": `Reset ${i ?? "color"} to default`,
-        onClick: y,
-        children: /* @__PURE__ */ r(ue, { size: 12 })
+        "aria-label": `Reset ${l ?? "color"} to default`,
+        onClick: Q,
+        children: /* @__PURE__ */ o(ue, { size: 12 })
       }
     )
   ] });
-  return i ? /* @__PURE__ */ S(Z, { gap: 0, children: [
-    /* @__PURE__ */ r(H, { size: "xs", c: "dimmed", mb: 1, lh: 1.2, children: i }),
-    N
-  ] }) : N;
+  return l ? /* @__PURE__ */ y(K, { gap: 0, children: [
+    /* @__PURE__ */ o(M, { size: "xs", c: "dimmed", mb: 1, lh: 1.2, children: l }),
+    c
+  ] }) : c;
 }
-function xn({ label: e, actions: t, children: s, bleed: n }) {
-  return /* @__PURE__ */ S(R, { children: [
-    /* @__PURE__ */ r(De, { color: "gray.7", mt: 8, mb: 0, mx: n ? "calc(-1 * var(--mantine-spacing-sm) - 1px)" : void 0 }),
-    /* @__PURE__ */ S(E, { justify: "space-between", py: 8, px: 8, children: [
-      /* @__PURE__ */ r(H, { size: "xs", fw: 500, lh: 1.2, children: e }),
-      t && /* @__PURE__ */ r(E, { gap: 4, children: t })
+function mo({ label: e, actions: t, children: a, bleed: n }) {
+  return /* @__PURE__ */ y(B, { children: [
+    /* @__PURE__ */ o(Be, { color: "var(--mantine-color-default-border)", mt: 8, mb: 0, mx: n ? "calc(-1 * var(--mantine-spacing-sm) - 1px)" : void 0 }),
+    /* @__PURE__ */ y(E, { justify: "space-between", py: 8, px: 8, children: [
+      /* @__PURE__ */ o(M, { size: "xs", fw: 500, lh: 1.2, children: e }),
+      t && /* @__PURE__ */ o(E, { gap: 4, children: t })
     ] }),
-    /* @__PURE__ */ r(Z, { gap: 0, px: 8, children: s })
+    /* @__PURE__ */ o(K, { gap: 0, px: 8, children: a })
   ] });
 }
-function hn({
+function ho({
   label: e,
   defaultOpen: t = !0,
-  children: s,
+  children: a,
   hasConfiguredValues: n = !1
 }) {
-  const [a, { toggle: o }] = Re(t);
-  return /* @__PURE__ */ S(R, { children: [
-    /* @__PURE__ */ r(De, { color: "gray.7", mt: 8, mb: 0, mx: 8 }),
-    /* @__PURE__ */ r(E, { justify: "space-between", py: 8, px: 8, style: { cursor: "pointer" }, onClick: o, children: /* @__PURE__ */ S(E, { gap: 4, children: [
-      /* @__PURE__ */ r(
-        L,
-        {
-          variant: "subtle",
-          size: "xs",
-          c: "dimmed",
-          "aria-label": a ? `Collapse ${e}` : `Expand ${e}`,
-          children: a ? /* @__PURE__ */ r(fe, { size: 12 }) : /* @__PURE__ */ r(Me, { size: 12 })
-        }
-      ),
-      /* @__PURE__ */ r(H, { size: "xs", fw: 500, lh: 1.2, children: e }),
-      n && /* @__PURE__ */ r(
-        R,
-        {
-          "aria-label": `${e} has configured values`,
-          style: {
-            width: 6,
-            height: 6,
-            borderRadius: "50%",
-            backgroundColor: "var(--mantine-color-blue-5)",
-            marginLeft: 4
-          }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ r(Mt, { in: a, children: /* @__PURE__ */ r(Z, { gap: 0, children: s }) })
+  const [i, { toggle: s }] = Me(t), l = (d) => {
+    (d.key === "Enter" || d.key === " ") && (d.preventDefault(), s());
+  };
+  return /* @__PURE__ */ y(B, { children: [
+    /* @__PURE__ */ o(Be, { color: "var(--mantine-color-default-border)", mt: 8, mb: 0, mx: 8 }),
+    /* @__PURE__ */ o(
+      E,
+      {
+        justify: "space-between",
+        py: 8,
+        px: 8,
+        style: { cursor: "pointer" },
+        onClick: s,
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": i,
+        "aria-label": i ? `Collapse ${e}` : `Expand ${e}`,
+        onKeyDown: l,
+        children: /* @__PURE__ */ y(E, { gap: 4, children: [
+          /* @__PURE__ */ o(
+            V,
+            {
+              variant: "subtle",
+              size: "xs",
+              c: "dimmed",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              children: i ? /* @__PURE__ */ o(fe, { size: 12 }) : /* @__PURE__ */ o(_e, { size: 12 })
+            }
+          ),
+          /* @__PURE__ */ o(M, { size: "xs", fw: 500, lh: 1.2, children: e }),
+          n && /* @__PURE__ */ o(
+            B,
+            {
+              "aria-label": `${e} has configured values`,
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                backgroundColor: "var(--mantine-color-blue-5)",
+                marginLeft: 4
+              }
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ o(Re, { in: i, children: /* @__PURE__ */ o(K, { gap: 0, children: a }) })
   ] });
 }
-function vn({ label: e, defaultOpen: t = !1, children: s }) {
-  const [n, { toggle: a }] = Re(t);
-  return /* @__PURE__ */ S(R, { children: [
-    /* @__PURE__ */ S(E, { gap: 4, py: 4, style: { cursor: "pointer" }, onClick: a, children: [
-      /* @__PURE__ */ r(
-        L,
-        {
-          variant: "subtle",
-          size: "xs",
-          c: "dimmed",
-          "aria-label": n ? `Collapse ${e}` : `Expand ${e}`,
-          children: n ? /* @__PURE__ */ r(fe, { size: 10 }) : /* @__PURE__ */ r(Me, { size: 10 })
-        }
-      ),
-      /* @__PURE__ */ r(H, { size: "xs", c: "dimmed", lh: 1.2, children: e })
-    ] }),
-    n && /* @__PURE__ */ r(R, { pl: "md", children: /* @__PURE__ */ r(Z, { gap: 4, children: s }) })
+function xo({ label: e, defaultOpen: t = !1, children: a }) {
+  const [n, { toggle: i }] = Me(t), s = (l) => {
+    (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i());
+  };
+  return /* @__PURE__ */ y(B, { children: [
+    /* @__PURE__ */ y(
+      E,
+      {
+        gap: 4,
+        py: 4,
+        style: { cursor: "pointer" },
+        onClick: i,
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": n,
+        "aria-label": n ? `Collapse ${e}` : `Expand ${e}`,
+        onKeyDown: s,
+        children: [
+          /* @__PURE__ */ o(
+            V,
+            {
+              variant: "subtle",
+              size: "xs",
+              c: "dimmed",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              children: n ? /* @__PURE__ */ o(fe, { size: 10 }) : /* @__PURE__ */ o(_e, { size: 10 })
+            }
+          ),
+          /* @__PURE__ */ o(M, { size: "xs", c: "dimmed", lh: 1.2, children: e })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(Re, { in: n, children: /* @__PURE__ */ o(B, { pl: "md", children: /* @__PURE__ */ o(K, { gap: 4, children: a }) }) })
   ] });
 }
-function Yo() {
+function Yn() {
   return crypto.randomUUID().slice(0, 8);
 }
 function de(e, t) {
   return {
-    id: Yo(),
+    id: Yn(),
     offset: e,
     color: t
   };
 }
-function Jo() {
+function Jn() {
   return [de(0, "#6366F1"), de(1, "#06B6D4")];
 }
-function bn({
+function vo({
   stops: e,
   defaultStops: t,
-  direction: s,
+  direction: a,
   defaultDirection: n = 0,
-  showDirection: a = !0,
-  onChange: o
+  showDirection: i = !0,
+  onChange: s
 }) {
-  const [i, c] = q({
+  const [l, d] = W({
     value: e,
     defaultValue: t,
-    finalValue: Jo(),
-    onChange: (l) => o == null ? void 0 : o(l, u)
-  }), [u, x] = q({
-    value: s,
+    finalValue: Jn(),
+    onChange: (f) => s == null ? void 0 : s(f, b)
+  }), [b, h] = W({
+    value: a,
     defaultValue: n,
     finalValue: 0,
-    onChange: (l) => o == null ? void 0 : o(i, l)
-  }), v = (l, g) => {
-    const b = [...i];
-    b[l] = { ...b[l], color: g }, c(b), o == null || o(b, u);
-  }, f = (l, g) => {
-    const b = [...i];
-    b[l] = { ...b[l], offset: g / 100 }, c(b), o == null || o(b, u);
-  }, d = (l) => {
-    x(l), o == null || o(i, l);
-  }, h = () => {
-    if (i.length >= 5)
+    onChange: (f) => s == null ? void 0 : s(l, f)
+  }), x = (f, v) => {
+    const C = [...l];
+    C[f] = { ...C[f], color: v }, d(C);
+  }, m = (f, v) => {
+    const C = [...l];
+    C[f] = { ...C[f], offset: v / 100 }, d(C);
+  }, u = (f) => {
+    h(f);
+  }, P = () => {
+    if (l.length >= 5)
       return;
-    const l = i.length > 0 ? (i[i.length - 1].offset + 1) / 2 : 0.5, g = [...i, de(l, le)];
-    g.sort((b, C) => b.offset - C.offset), c(g), o == null || o(g, u);
-  }, F = (l) => {
-    if (i.length <= 2)
+    const f = l.length > 0 ? (l[l.length - 1].offset + 1) / 2 : 0.5, v = [...l, de(f, le)];
+    v.sort((C, w) => C.offset - w.offset), d(v);
+  }, A = (f) => {
+    if (l.length <= 2)
       return;
-    const g = i.filter((b, C) => C !== l);
-    c(g), o == null || o(g, u);
+    const v = l.filter((C, w) => w !== f);
+    d(v);
   };
-  return /* @__PURE__ */ S(Z, { gap: "xs", children: [
-    /* @__PURE__ */ S(E, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ r(H, { size: "xs", c: "dimmed", children: "Color Stops" }),
-      /* @__PURE__ */ r(
-        L,
+  return /* @__PURE__ */ y(K, { gap: "xs", children: [
+    /* @__PURE__ */ y(E, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ o(M, { size: "xs", c: "dimmed", children: "Color Stops" }),
+      /* @__PURE__ */ o(
+        V,
         {
           variant: "subtle",
           color: "gray",
-          onClick: h,
-          disabled: i.length >= 5,
+          onClick: P,
+          disabled: l.length >= 5,
           "aria-label": "Add color stop",
-          children: /* @__PURE__ */ r(Ht, { size: 12 })
+          children: /* @__PURE__ */ o(Nt, { size: 12 })
         }
       )
     ] }),
-    i.map((l, g) => /* @__PURE__ */ S(E, { gap: "xs", align: "flex-end", children: [
-      /* @__PURE__ */ r(
-        qo,
+    l.map((f, v) => /* @__PURE__ */ y(E, { gap: "xs", align: "flex-end", children: [
+      /* @__PURE__ */ o(
+        qn,
         {
-          color: l.color,
+          color: f.color,
           defaultColor: le,
-          onColorChange: (b) => {
-            v(g, b ?? le);
+          onColorChange: (C) => {
+            x(v, C ?? le);
           },
           showOpacity: !1
         }
       ),
-      /* @__PURE__ */ r(R, { style: { width: "80px" }, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ o(B, { style: { width: "80px" }, children: /* @__PURE__ */ o(
         ce,
         {
           min: 0,
           max: 100,
-          value: l.offset * 100,
-          onChange: (b) => {
-            f(g, b);
+          value: f.offset * 100,
+          onChange: (C) => {
+            m(v, C);
           },
-          label: (b) => `${Math.round(b)}%`,
-          "aria-label": `Stop ${g + 1} position`
+          label: (C) => `${Math.round(C)}%`,
+          "aria-label": `Stop ${v + 1} position`
         }
       ) }),
-      /* @__PURE__ */ r(
-        L,
+      /* @__PURE__ */ o(
+        V,
         {
           variant: "subtle",
           color: "gray",
           onClick: () => {
-            F(g);
+            A(v);
           },
-          disabled: i.length <= 2,
-          "aria-label": `Remove color stop ${g + 1}`,
-          children: /* @__PURE__ */ r(Nt, { size: 12 })
+          disabled: l.length <= 2,
+          "aria-label": `Remove color stop ${v + 1}`,
+          children: /* @__PURE__ */ o(Ht, { size: 12 })
         }
       )
-    ] }, l.id)),
-    a && /* @__PURE__ */ S(R, { pb: "md", children: [
-      /* @__PURE__ */ r(H, { size: "xs", c: "dimmed", mb: 4, children: "Direction" }),
-      /* @__PURE__ */ r(
+    ] }, f.id)),
+    i && /* @__PURE__ */ y(B, { pb: "md", children: [
+      /* @__PURE__ */ o(M, { size: "xs", c: "dimmed", mb: 4, children: "Direction" }),
+      /* @__PURE__ */ o(
         ce,
         {
           min: 0,
           max: 360,
-          value: u,
-          onChange: d,
-          label: (l) => `${l}°`,
+          value: b,
+          onChange: u,
+          label: (f) => `${f}°`,
           "aria-label": "Gradient direction",
           marks: [
             { value: 0, label: "0°" },
@@ -1592,65 +1635,65 @@ function bn({
     ] })
   ] });
 }
-function Pn({ label: e, value: t }) {
-  return /* @__PURE__ */ S(E, { justify: "space-between", py: 4, children: [
-    /* @__PURE__ */ r(H, { size: "sm", c: "dimmed", children: e }),
-    /* @__PURE__ */ r(H, { size: "sm", c: "var(--mantine-color-text)", fw: 500, children: String(t) })
+function bo({ label: e, value: t }) {
+  return /* @__PURE__ */ y(E, { justify: "space-between", py: 4, children: [
+    /* @__PURE__ */ o(M, { size: "sm", c: "dimmed", children: e }),
+    /* @__PURE__ */ o(M, { size: "sm", c: "var(--mantine-color-text)", fw: 500, children: String(t) })
   ] });
 }
-function zn({
+function Po({
   label: e,
   value: t,
-  defaultValue: s,
+  defaultValue: a,
   onChange: n,
-  min: a,
-  max: o,
-  step: i,
-  decimalScale: c,
-  suffix: u,
-  hideControls: x = !0
+  min: i,
+  max: s,
+  step: l,
+  decimalScale: d,
+  suffix: b,
+  hideControls: h = !0
 }) {
-  const [v, f] = q({
+  const [x, m] = W({
     value: t,
     defaultValue: void 0,
     // Start with undefined (using default)
     finalValue: void 0,
     onChange: n
-  }), d = v === void 0, h = v ?? s, [F, l] = _(h);
-  U(() => {
-    l(v ?? s);
-  }, [v, s]);
-  const g = (A) => {
-    l(A);
-  }, b = () => {
-    const A = typeof F == "string" ? parseFloat(F) : F;
-    if (isNaN(A))
-      l(v ?? s);
+  }), u = x === void 0, P = x ?? a, A = R(!1), [f, v] = L(P);
+  _(() => {
+    A.current || v(x ?? a), A.current = !1;
+  }, [x, a]);
+  const C = (k) => {
+    A.current = !0, v(k);
+  }, w = () => {
+    const k = typeof f == "string" ? parseFloat(f) : f;
+    if (isNaN(k))
+      v(x ?? a);
     else {
-      let T = A;
-      a !== void 0 && T < a && (T = a), o !== void 0 && T > o && (T = o), T !== v && f(T), l(T);
+      let T = k;
+      i !== void 0 && T < i && (T = i), s !== void 0 && T > s && (T = s), T !== x && m(T), v(T);
     }
-  }, C = () => {
-    f(void 0);
+  }, D = () => {
+    m(void 0);
   };
-  return /* @__PURE__ */ S(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ y(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+    /* @__PURE__ */ o(
       pe,
       {
         label: e,
         "aria-label": e,
-        value: F,
-        onChange: g,
-        onBlur: b,
-        min: a,
-        max: o,
-        step: i,
-        decimalScale: c,
-        suffix: u,
-        hideControls: x,
-        "data-is-default": d ? "true" : "false",
+        value: f,
+        onChange: C,
+        onBlur: w,
+        min: i,
+        max: s,
+        step: l,
+        decimalScale: d,
+        suffix: b,
+        hideControls: h,
+        "data-is-default": u ? "true" : "false",
         styles: {
-          input: d ? {
+          input: u ? {
             fontStyle: "italic",
             color: "var(--mantine-color-dimmed)"
           } : void 0
@@ -1658,47 +1701,47 @@ function zn({
         style: { flex: 1 }
       }
     ),
-    !d && /* @__PURE__ */ r(
-      L,
+    !u && /* @__PURE__ */ o(
+      V,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
         "aria-label": `Reset ${e} to default`,
-        onClick: C,
+        onClick: D,
         style: { marginBottom: 2 },
-        children: /* @__PURE__ */ r(ue, { size: 12 })
+        children: /* @__PURE__ */ o(ue, { size: 12 })
       }
     )
   ] });
 }
-function yn({ label: e, value: t, defaultValue: s, options: n, onChange: a }) {
-  const [o, i] = q({
+function Co({ label: e, value: t, defaultValue: a, options: n, onChange: i }) {
+  const [s, l] = W({
     value: t,
     defaultValue: void 0,
     // Start with undefined (using default)
     finalValue: void 0,
-    onChange: a
-  }), c = o === void 0, u = o ?? s, x = (f) => {
-    f !== null && i(f);
-  }, v = () => {
-    i(void 0);
+    onChange: i
+  }), d = s === void 0, b = s ?? a, h = (m) => {
+    m !== null && l(m);
+  }, x = () => {
+    l(void 0);
   };
-  return /* @__PURE__ */ S(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
-    /* @__PURE__ */ r(
-      Ve,
+  return /* @__PURE__ */ y(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+    /* @__PURE__ */ o(
+      Fe,
       {
         label: e,
         "aria-label": e,
-        value: u,
-        onChange: x,
+        value: b,
+        onChange: h,
         data: n,
-        rightSection: /* @__PURE__ */ r(fe, { size: 14 }),
+        rightSection: /* @__PURE__ */ o(fe, { size: 14 }),
         rightSectionPointerEvents: "none",
-        "data-is-default": c ? "true" : "false",
+        "data-is-default": d ? "true" : "false",
         allowDeselect: !1,
         styles: {
-          input: c ? {
+          input: d ? {
             fontStyle: "italic",
             color: "var(--mantine-color-dimmed)"
           } : void 0
@@ -1706,90 +1749,99 @@ function yn({ label: e, value: t, defaultValue: s, options: n, onChange: a }) {
         style: { flex: 1 }
       }
     ),
-    !c && /* @__PURE__ */ r(
-      L,
+    !d && /* @__PURE__ */ o(
+      V,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
         "aria-label": `Reset ${e} to default`,
-        onClick: v,
+        onClick: x,
         style: { marginBottom: 2 },
-        children: /* @__PURE__ */ r(ue, { size: 12 })
+        children: /* @__PURE__ */ o(ue, { size: 12 })
       }
     )
   ] });
 }
-function Sn({
+function zo({
   label: e,
   checked: t,
-  defaultChecked: s,
+  defaultChecked: a,
   onChange: n,
-  children: a
+  children: i
 }) {
-  const [o, i] = q({
+  const [s, l] = W({
     value: t,
-    defaultValue: s,
+    defaultValue: a,
     finalValue: !1,
     onChange: n
   });
-  return /* @__PURE__ */ S(Z, { gap: 4, children: [
-    /* @__PURE__ */ r(
-      Ee,
+  return /* @__PURE__ */ y(K, { gap: 4, children: [
+    /* @__PURE__ */ o(
+      De,
       {
         label: e,
-        checked: o,
-        onChange: (c) => {
-          i(c.currentTarget.checked);
+        checked: s,
+        onChange: (d) => {
+          l(d.currentTarget.checked);
         }
       }
     ),
-    o && /* @__PURE__ */ r(R, { "data-testid": "toggle-with-content-children", pl: "md", children: /* @__PURE__ */ r(Z, { gap: 4, children: a }) })
+    s && /* @__PURE__ */ o(B, { "data-testid": "toggle-with-content-children", pl: "md", children: /* @__PURE__ */ o(K, { gap: 4, children: i }) })
   ] });
 }
-function wn() {
-  return _t("dark");
+function yo(e = "dark") {
+  return _t(e);
 }
-const Cn = {
+const So = {
   xs: ee(4),
   sm: ee(8),
   md: ee(16),
   lg: ee(24),
   xl: ee(32)
-}, In = "0.1.0";
+}, wo = {
+  /** Standard compact component height (inputs, buttons, icons) in pixels */
+  HEIGHT: 24,
+  /** Standard compact font size in pixels */
+  FONT_SIZE: 11,
+  /** Standard padding for control elements in pixels */
+  CONTROL_PADDING: 8,
+  /** Gap between items in sections/lists in pixels */
+  SECTION_GAP: 4
+}, Io = "0.1.0";
 export {
-  qo as CompactColorInput,
-  xn as ControlGroup,
-  hn as ControlSection,
-  vn as ControlSubGroup,
+  wo as COMPACT_SIZING,
+  qn as CompactColorInput,
+  mo as ControlGroup,
+  ho as ControlSection,
+  xo as ControlSubGroup,
   le as DEFAULT_GRADIENT_STOP_COLOR,
-  bn as GradientEditor,
-  Cn as MANTINE_SPACING,
-  Ue as MAX_ALPHA_HEX,
-  Ge as MAX_OPACITY_PERCENT,
-  go as POPOUT_GAP,
-  ln as POPOUT_NESTED_GAP,
-  Ce as POPOUT_Z_INDEX_BASE,
-  ne as Popout,
-  mn as PopoutButton,
-  gn as PopoutManager,
-  dn as SWATCH_COLORS,
-  Vo as SWATCH_COLORS_HEXA,
-  Pn as StatRow,
-  zn as StyleNumberInput,
-  yn as StyleSelect,
-  Sn as ToggleWithContent,
-  In as VERSION,
+  vo as GradientEditor,
+  So as MANTINE_SPACING,
+  Ge as MAX_ALPHA_HEX,
+  je as MAX_OPACITY_PERCENT,
+  mn as POPOUT_GAP,
+  io as POPOUT_NESTED_GAP,
+  we as POPOUT_Z_INDEX_BASE,
+  oe as Popout,
+  fo as PopoutButton,
+  go as PopoutManager,
+  Fn as SWATCH_COLORS_HEXA,
+  bo as StatRow,
+  Po as StyleNumberInput,
+  Co as StyleSelect,
+  zo as ToggleWithContent,
+  Io as VERSION,
   jt as compactColors,
   Gt as compactDarkColors,
-  cn as compactTheme,
-  Fo as compactThemeOverride,
+  lo as compactTheme,
+  On as compactThemeOverride,
   de as createColorStop,
-  Jo as createDefaultGradientStops,
-  fn as isValidHex,
-  Xe as opacityToAlphaHex,
-  je as parseAlphaFromHexa,
-  pn as parseHexaColor,
-  un as toHexaColor,
-  wn as useActualColorScheme
+  Jn as createDefaultGradientStops,
+  uo as isValidHex,
+  Ke as opacityToAlphaHex,
+  Xe as parseAlphaFromHexa,
+  co as parseHexaColor,
+  po as toHexaColor,
+  yo as useActualColorScheme
 };