@graphty/compact-mantine 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,10 +1,10 @@
-import { CloseButton as Ge, ActionIcon as D, Button as je, RangeSlider as Xe, Radio as We, Slider as ae, Switch as Ze, Checkbox as ve, SegmentedControl as Ke, Kbd as Ye, Indicator as qe, ThemeIcon as Je, Avatar as Qe, Pill as et, Badge as tt, Text as H, RingProgress as rt, Progress as ot, Loader as nt, InputClearButton as it, JsonInput as at, FileInput as st, PillsInput as lt, TagsInput as ct, MultiSelect as ut, ColorInput as Pe, Autocomplete as pt, PasswordInput as dt, Textarea as ft, Select as we, NumberInput as le, TextInput as ye, Tabs as mt, Stepper as gt, Pagination as ht, NavLink as xt, Burger as bt, Anchor as zt, HoverCard as vt, Popover as oe, Tooltip as Pt, Menu as wt, createTheme as yt, Group as R, ColorSwatch as Ct, ColorPicker as St, Box as A, Stack as W, Divider as Ce, Collapse as Tt, UnstyledButton as _t, Paper as It, useComputedColorScheme as kt, rem as Q } from "@mantine/core";
-import { jsxs as S, jsx as o, Fragment as Bt } from "react/jsx-runtime";
-import { useUncontrolled as Z, useDisclosure as Se } from "@mantine/hooks";
-import { X as ne, ChevronDown as ce, ChevronRight as Te, Plus as Rt, Minus as Ft } from "lucide-react";
-import { useState as L, useEffect as U, useRef as G, useCallback as T, useMemo as _e, createContext as Ie, useContext as ue, useId as ke, isValidElement as Et, cloneElement as Ot } from "react";
-import { createPortal as At } from "react-dom";
-const Lt = [
+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",
   // 0 - lightest (light mode text)
   "#a3a8b1",
@@ -25,215 +25,270 @@ const Lt = [
   // 8
   "#0d1117"
   // 9 - darkest (main background)
-], Dt = {
-  dark: Lt
-}, $t = {
-  Button: je.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--button-height": "24px",
-        "--button-fz": "11px",
-        "--button-padding-x": "8px"
-      }
-    } : { root: {} }
+], jt = {
+  ...Ee.colors,
+  dark: Gt
+}, Xt = {
+  "--button-height": "24px",
+  "--button-fz": "11px",
+  "--button-padding-x": "8px"
+}, Kt = {
+  "--ai-size": "24px"
+}, Wt = {
+  "--cb-size": "16px",
+  "--cb-icon-size": "12px"
+}, Zt = {
+  Button: nt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: Xt
+    })
   }),
-  ActionIcon: D.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--ai-size": "24px"
-      }
-    } : { root: {} }
+  ActionIcon: V.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "subtle"
+    },
+    vars: () => ({
+      root: Kt
+    })
   }),
-  CloseButton: Ge.extend({
+  CloseButton: Ae.extend({
     defaultProps: {
-      size: "compact"
+      size: "xs"
     },
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--cb-size": "16px",
-        "--cb-icon-size": "12px"
-      }
-    } : { root: {} }
+    vars: () => ({
+      root: Wt
+    })
   })
-}, Ht = {
-  SegmentedControl: Ke.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--sc-font-size": "10px",
-        "--sc-padding": "4px 8px"
-      }
-    } : { root: {} }
+}, qt = {
+  "--switch-height": "16px",
+  "--switch-width": "28px",
+  "--switch-thumb-size": "12px",
+  "--switch-track-label-padding": "2px",
+  "--switch-label-font-size": "5px"
+}, Yt = {
+  "--checkbox-size": "16px"
+}, Jt = {
+  "--radio-size": "16px",
+  "--radio-icon-size": "6px"
+}, ye = {
+  "--slider-size": "4px",
+  "--slider-thumb-size": "12px"
+}, Qt = {
+  "--sc-font-size": "10px",
+  "--sc-padding": "4px 8px"
+}, en = {
+  backgroundColor: "transparent"
+}, tn = {
+  backgroundColor: "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))"
+}, ae = {
+  fontSize: 11
+}, Se = {
+  fontSize: 10,
+  marginTop: 2
+}, nn = {
+  SegmentedControl: Oe.extend({
+    defaultProps: {
+      size: "sm",
+      withItemsBorders: !1
+    },
+    vars: () => ({
+      root: Qt
+    }),
+    styles: {
+      root: en,
+      indicator: tn
+    }
   }),
-  Checkbox: ve.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--checkbox-size": "16px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      label: {
-        fontSize: 11
-      }
-    } : {}
+  Checkbox: De.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: Yt
+    }),
+    styles: {
+      label: ae
+    }
   }),
-  Switch: Ze.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--switch-height": "16px",
-        "--switch-width": "28px",
-        "--switch-thumb-size": "12px",
-        "--switch-track-label-padding": "2px",
-        "--switch-label-font-size": "5px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      label: {
-        fontSize: 11
-      }
-    } : {}
+  Switch: st.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: qt
+    }),
+    styles: {
+      label: ae
+    }
   }),
-  Slider: ae.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--slider-size": "4px",
-        "--slider-thumb-size": "12px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      markLabel: {
-        fontSize: 10,
-        marginTop: 2
-      }
-    } : {}
+  Slider: ce.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: ye
+    }),
+    styles: {
+      markLabel: Se
+    }
   }),
-  Radio: We.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--radio-size": "16px",
-        "--radio-icon-size": "6px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      label: {
-        fontSize: 11
-      }
-    } : {}
+  Radio: rt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: Jt
+    }),
+    styles: {
+      label: ae
+    }
   }),
-  RangeSlider: Xe.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--slider-size": "4px",
-        "--slider-thumb-size": "12px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      markLabel: {
-        fontSize: 10,
-        marginTop: 2
-      }
-    } : {}
+  RangeSlider: ot.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: ye
+    }),
+    styles: {
+      markLabel: Se
+    }
   })
-}, Mt = {
-  Text: H.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--text-fz": "11px",
-        "--text-lh": "1.2"
-      }
-    } : { root: {} }
+}, on = {
+  "--badge-height": "14px",
+  "--badge-fz": "9px",
+  "--badge-padding-x": "4px"
+}, rn = {
+  "--avatar-size": "24px"
+}, sn = {
+  "--ti-size": "24px"
+}, an = {
+  "--indicator-size": "8px"
+}, ln = {
+  "--kbd-fz": "10px",
+  "--kbd-padding": "2px 4px"
+}, cn = {
+  "--pill-height": "16px",
+  "--pill-fz": "10px"
+}, 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: tt.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--badge-height": "14px",
-        "--badge-fz": "9px",
-        "--badge-padding-x": "4px"
-      }
-    } : { root: {} }
+  Badge: pt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: on
+    })
   }),
-  Pill: et.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--pill-height": "16px",
-        "--pill-fz": "10px"
-      }
-    } : { root: {} }
+  Pill: dt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: cn
+    })
   }),
-  Avatar: Qe.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--avatar-size": "24px"
-      }
-    } : { root: {} }
+  Avatar: ct.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: rn
+    })
   }),
-  ThemeIcon: Je.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--ti-size": "24px"
-      }
-    } : { root: {} }
+  ThemeIcon: lt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: sn
+    })
   }),
-  Indicator: qe.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--indicator-size": "8px"
-      }
-    } : { root: {} }
+  Indicator: it.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: an
+    })
   }),
-  Kbd: Ye.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--kbd-fz": "10px",
-        "--kbd-padding": "2px 4px"
-      }
-    } : { root: {} }
+  Kbd: at.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: ln
+    })
   })
-}, Nt = {
-  Loader: nt.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--loader-size": "18px"
-      }
-    } : { root: {} }
+}, pn = {
+  "--loader-size": "18px"
+}, un = {
+  "--progress-size": "4px"
+}, fn = {
+  label: {
+    fontSize: 9
+  }
+}, gn = {
+  Loader: gt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: pn
+    })
   }),
-  Progress: ot.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--progress-size": "4px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      label: {
-        fontSize: 9
-      }
-    } : {}
+  Progress: ft.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: un
+    }),
+    styles: fn
   }),
   // Note: RingProgress uses numeric size directly in SVG calculations,
-  // so we can't use CSS variables. Use size={48} for compact-equivalent sizing.
-  RingProgress: rt.extend({
-    vars: () => ({ root: {} })
+  // so we can't use CSS variables or string size prop.
+  // Use size={48} in components for compact-equivalent sizing.
+  RingProgress: ut.extend({
+    // No defaultProps - RingProgress requires numeric size
+    // Use size={48} in your components for compact sizing
   })
-}, xe = 1e3, V = 1100, Vt = 8, br = 4, ee = {
-  root: {},
-  wrapper: {
-    "--input-size": "24px",
-    "--input-fz": "11px",
-    "--input-bg": "var(--mantine-color-default)",
-    "--input-bd": "none"
-  }
-}, B = {
-  label: {
-    fontSize: 11,
-    color: "var(--mantine-color-dimmed)",
-    marginBottom: 1,
-    lineHeight: 1.2
-  },
-  input: {
-    paddingLeft: 8,
-    paddingRight: 8,
-    border: "none"
-  }
-}, re = {
+}, we = 1e3, N = 1100, mn = 8, io = 4, X = {
+  "--input-height": "24px",
+  "--input-size": "24px",
+  // For components that use this variable
+  "--input-fz": "11px",
+  "--input-bg": "var(--mantine-color-default)",
+  "--input-bd": "none"
+}, te = {
+  "--input-fz": "11px",
+  "--input-bg": "var(--mantine-color-default)",
+  "--input-bd": "none"
+}, J = {
+  fontSize: 11,
+  color: "var(--mantine-color-dimmed)",
+  marginBottom: 1,
+  lineHeight: 1.2
+}, me = {
+  paddingLeft: 8,
+  paddingRight: 8,
+  border: "none",
+  backgroundColor: "var(--mantine-color-default)"
+}, Y = {
+  label: J,
+  input: me
+}, Ie = {
+  label: J,
+  input: me
+}, ne = {
   dropdown: {
     padding: 4,
     border: "none",
@@ -255,754 +310,401 @@ const Lt = [
     fontSize: 11,
     padding: "8px"
   }
-}, Ut = {
-  TextInput: ye.extend({
-    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? B : {}
+}, ie = {
+  input: {
+    ...Y.input,
+    minHeight: 24,
+    height: "auto",
+    display: "flex",
+    alignItems: "center",
+    paddingTop: 4,
+    paddingBottom: 4
+  },
+  pillsList: {
+    columnGap: 4,
+    rowGap: 2
+  },
+  pill: {
+    // Only set margin, not padding. Pill component controls its own height/centering.
+    margin: 0
+  }
+}, hn = {
+  TextInput: Ve.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
+      root: {},
+      wrapper: X
+    }),
+    styles: Y
   }),
-  NumberInput: le.extend({
-    vars: (t, e) => e.size === "compact" ? {
+  NumberInput: pe.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
       root: {},
       wrapper: {
-        "--input-size": "24px",
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none",
+        ...X,
         "--input-right-section-width": "24px"
       },
       controls: {
         "--ni-chevron-size": "10px"
       }
-    } : { root: {}, wrapper: {}, controls: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
+    }),
+    styles: {
+      label: J,
+      input: me,
       control: {
         borderColor: "transparent"
       }
-    } : {}
+    }
   }),
-  Select: we.extend({
+  Select: Fe.extend({
     defaultProps: {
-      comboboxProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: N }
     },
-    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      ...re
-    } : {}
+    vars: () => ({
+      root: {},
+      wrapper: X
+    }),
+    styles: {
+      ...Y,
+      ...ne
+    }
   }),
-  Textarea: ft.extend({
-    vars: (t, e) => e.size === "compact" ? {
+  Textarea: yt.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
       root: {},
-      wrapper: {
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none"
-      }
-    } : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? B : {}
+      wrapper: te
+    }),
+    styles: Ie
   }),
-  PasswordInput: dt.extend({
-    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
+  PasswordInput: zt.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
+      root: {},
+      wrapper: X
+    }),
+    styles: {
+      ...Y,
       innerInput: {
         paddingLeft: 8,
         paddingRight: 8
       }
-    } : {}
-  }),
-  Autocomplete: pt.extend({
-    defaultProps: {
-      comboboxProps: { zIndex: V }
-    },
-    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      ...re
-    } : {}
+    }
   }),
-  // ColorInput uses styles instead of vars due to complex type requirements
-  // (ColorInput requires eyeDropperIcon, eyeDropperButton, colorPreview CSS vars)
-  ColorInput: Pe.extend({
+  Autocomplete: Ct.extend({
     defaultProps: {
-      popoverProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: N }
     },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      wrapper: {
-        "--input-size": "24px",
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none"
-      }
-    } : {}
+    vars: () => ({
+      root: {},
+      wrapper: X
+    }),
+    styles: {
+      ...Y,
+      ...ne
+    }
   }),
-  MultiSelect: ut.extend({
+  MultiSelect: Pt.extend({
     defaultProps: {
-      comboboxProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: N }
     },
-    vars: (t, e) => e.size === "compact" ? {
+    vars: () => ({
       root: {},
       wrapper: {
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none",
-        "--input-size": "24px",
+        ...X,
         "--combobox-chevron-size": "12px"
       }
-    } : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      ...re,
-      input: {
-        ...B.input,
-        minHeight: 24,
-        height: "auto",
-        display: "flex",
-        alignItems: "center",
-        paddingTop: 4,
-        paddingBottom: 4
-      },
+    }),
+    styles: {
+      label: J,
+      ...ne,
+      ...ie,
       inputField: {
         minWidth: 60,
         flexBasis: 60
-      },
-      pillsList: {
-        columnGap: 4,
-        rowGap: 2
-      },
-      pill: {
-        margin: 0,
-        paddingTop: 2,
-        paddingBottom: 2
       }
-    } : {}
+    }
   }),
-  TagsInput: ct.extend({
+  TagsInput: bt.extend({
     defaultProps: {
-      comboboxProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: N }
     },
-    vars: (t, e) => e.size === "compact" ? {
+    vars: () => ({
       root: {},
-      wrapper: {
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none"
-      }
-    } : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      ...re,
-      input: {
-        ...B.input,
-        minHeight: 24,
-        height: "auto",
-        display: "flex",
-        alignItems: "center",
-        paddingTop: 4,
-        paddingBottom: 4
-      },
+      wrapper: te
+    }),
+    styles: {
+      label: J,
+      ...ne,
+      ...ie,
       inputField: {
         minWidth: 30,
         flexBasis: 30
-      },
-      pillsList: {
-        columnGap: 4,
-        rowGap: 2
-      },
-      pill: {
-        margin: 0,
-        paddingTop: 2,
-        paddingBottom: 2
       }
-    } : {}
+    }
   }),
-  PillsInput: lt.extend({
-    vars: (t, e) => e.size === "compact" ? {
+  PillsInput: vt.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
       root: {},
-      wrapper: {
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none"
-      }
-    } : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      input: {
-        ...B.input,
-        minHeight: 24,
-        height: "auto",
-        display: "flex",
-        alignItems: "center",
-        paddingTop: 4,
-        paddingBottom: 4
-      },
-      inputField: {
-        minWidth: 30,
-        flexBasis: 30
-      },
-      pillsList: {
-        columnGap: 4,
-        rowGap: 2
-      },
-      pill: {
-        margin: 0,
-        paddingTop: 2,
-        paddingBottom: 2
-      }
-    } : {}
+      wrapper: te
+    }),
+    styles: {
+      label: J,
+      ...ie
+    }
   }),
-  FileInput: st.extend({
-    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? B : {}
+  FileInput: xt.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
+      root: {},
+      wrapper: X
+    }),
+    styles: Y
   }),
-  JsonInput: at.extend({
-    vars: (t, e) => e.size === "compact" ? {
+  JsonInput: ht.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
       root: {},
-      wrapper: {
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none"
-      }
-    } : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? B : {}
+      wrapper: te
+    }),
+    styles: Ie
   }),
-  InputClearButton: it.extend({
+  InputClearButton: mt.extend({
     defaultProps: {
-      size: "compact"
+      size: "xs"
     },
-    vars: (t, e) => e.size === "compact" ? {
+    vars: () => ({
       root: {
         "--cb-size": "16px",
         "--cb-icon-size": "12px"
       }
-    } : { root: {} }
+    })
   })
-}, Gt = {
-  // Anchor uses --text-fz since it inherits from Text component
-  Anchor: zt.extend({
-    styles: (t, e) => e.size === "compact" ? {
-      root: {
-        fontSize: 11
-      }
-    } : {}
-  }),
-  Burger: bt.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--burger-size": "18px",
-        "--burger-line-size": "2px"
-      }
-    } : { root: {} }
-  }),
-  // NavLink uses styles since it doesn't have a size prop and requires
-  // a 'children' CSS variable. Apply styles based on custom variant prop.
-  NavLink: xt.extend({
-    styles: (t, e) => e.variant === "compact" ? {
-      root: {
-        fontSize: 11,
-        minHeight: 28
-      },
-      label: {
-        fontSize: 11
-      }
-    } : {}
-  }),
-  Pagination: ht.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--pagination-control-size": "24px",
-        "--pagination-control-fz": "11px"
-      }
-    } : { root: {} }
-  }),
-  Stepper: gt.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--stepper-icon-size": "24px",
-        "--stepper-fz": "11px",
-        "--stepper-spacing": "8px"
-      }
-    } : { root: {} }
-  }),
-  // Tabs uses styles since it doesn't have a size prop and the CSS vars
-  // for tabs are limited to --tabs-color and --tabs-radius.
-  // Apply styles based on custom variant prop.
-  Tabs: mt.extend({
-    styles: (t, e) => e.variant === "compact" ? {
-      tab: {
-        fontSize: 11,
-        padding: "6px 10px"
-      }
-    } : {}
-  })
-}, jt = {
-  Menu: wt.extend({
+}, xn = {
+  "--pagination-control-size": "24px",
+  "--pagination-control-fz": "11px"
+}, vn = {
+  "--stepper-icon-size": "24px",
+  "--stepper-fz": "11px",
+  "--stepper-spacing": "8px"
+}, bn = {
+  "--burger-size": "18px",
+  "--burger-line-size": "2px"
+}, Pn = {
+  root: {
+    fontSize: 11
+  }
+}, Cn = {
+  root: {
+    fontSize: 11,
+    minHeight: 28
+  },
+  label: {
+    fontSize: 11
+  }
+}, zn = {
+  tab: {
+    fontSize: 11,
+    padding: "6px 10px"
+  }
+}, yn = {
+  Anchor: Et.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    styles: Pn
   }),
-  Tooltip: Pt.extend({
+  Burger: Tt.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    vars: () => ({
+      root: bn
+    })
   }),
-  Popover: oe.extend({
+  NavLink: kt.extend({
+    // NavLink does not have a size prop, only styles for compact appearance
+    styles: Cn
+  }),
+  Pagination: It.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    vars: () => ({
+      root: xn
+    })
   }),
-  HoverCard: vt.extend({
+  Stepper: wt.extend({
     defaultProps: {
-      zIndex: V
-    }
-  })
-}, zr = yt({
-  colors: Dt,
-  // Spread all component extensions into the theme
-  // Each extension object provides compact size support for a category of components
-  components: {
-    ...Ut,
-    ...$t,
-    ...Ht,
-    ...Mt,
-    ...Nt,
-    ...Gt,
-    ...jt
-  }
-}), vr = ["#5B8FF9", "#FF6B6B", "#61D095", "#F7B731", "#9B59B6"], Xt = [
-  "#5B8FF9FF",
-  "#FF6B6BFF",
-  "#61D095FF",
-  "#F7B731FF",
-  "#9B59B6FF",
-  "#5B8FF980",
-  "#FF6B6B80",
-  "#61D09580",
-  "#F7B73180",
-  "#9B59B680"
-], Wt = "#888888", Be = 255, Re = 100;
-function Fe(t) {
-  return Math.round(parseInt(t, 16) / Be * Re);
-}
-function Ee(t) {
-  return Math.round(t / Re * Be).toString(16).padStart(2, "0");
-}
-function Pr(t) {
-  let e = t.replace("#", "");
-  e.length === 3 ? e = `${e.split("").map((r) => r + r).join("")}ff` : e.length === 4 ? e = e.split("").map((r) => r + r).join("") : e.length === 6 && (e = `${e}ff`);
-  const n = `#${e.slice(0, 6)}`, i = e.slice(6, 8), a = Fe(i);
-  return { hex: n, opacity: a };
-}
-function wr(t, e) {
-  const n = t.replace("#", ""), i = Ee(e);
-  return `#${n}${i}`;
-}
-function yr(t) {
-  return /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t);
-}
-function Cr({
-  color: t,
-  defaultColor: e,
-  opacity: n,
-  defaultOpacity: i = 100,
-  onColorChange: a,
-  onOpacityChange: r,
-  label: s,
-  showOpacity: c = !0
-}) {
-  const [g, b] = Z({
-    value: t,
-    defaultValue: void 0,
-    finalValue: void 0,
-    onChange: a
-  }), [z, h] = Z({
-    value: n,
-    defaultValue: void 0,
-    finalValue: void 0,
-    onChange: r
-  }), u = g === void 0, f = z === void 0, F = u && (!c || f), l = g ?? e, x = z ?? i, [v, _] = L(!1), [O, I] = L(l.replace("#", "").toUpperCase()), [$, j] = L(x);
-  U(() => {
-    I(l.replace("#", "").toUpperCase());
-  }, [l]), U(() => {
-    j(x);
-  }, [x]);
-  const q = (d) => {
-    if (d.length === 9) {
-      const E = d.slice(0, 7).toUpperCase(), k = d.slice(7, 9), y = Fe(k);
-      b(E), c && h(y);
-    } else
-      b(d.toUpperCase());
-  }, p = () => {
-    const d = Ee(x);
-    return `${l}${d}`.toUpperCase();
-  }, m = (d) => {
-    I(d.currentTarget.value.toUpperCase());
-  }, P = () => {
-    let d = O.toUpperCase();
-    d && !d.startsWith("#") && (d = `#${d}`), /^#[0-9A-F]{6}$/i.test(d) && d !== l ? b(d) : I(l.replace("#", "").toUpperCase());
-  }, w = (d) => {
-    j(d);
-  }, M = () => {
-    const d = typeof $ == "string" ? parseFloat($) : $;
-    if (isNaN(d))
-      j(x);
-    else {
-      const E = Math.min(100, Math.max(0, d));
-      E !== x && h(E);
-    }
-  }, K = () => {
-    b(void 0), c && h(void 0);
-  }, N = /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", children: [
-    /* @__PURE__ */ S(R, { gap: 0, children: [
-      /* @__PURE__ */ S(oe, { opened: v, onChange: _, position: "bottom-start", shadow: "md", children: [
-        /* @__PURE__ */ o(oe.Target, { children: /* @__PURE__ */ o(
-          D,
-          {
-            variant: "filled",
-            size: 24,
-            radius: 0,
-            style: {
-              backgroundColor: "var(--mantine-color-default)",
-              borderRadius: "4px 0 0 4px"
-            },
-            onClick: () => {
-              _((d) => !d);
-            },
-            "aria-label": "Color swatch",
-            children: /* @__PURE__ */ o(
-              Ct,
-              {
-                color: l,
-                size: 14,
-                radius: 2,
-                style: {
-                  border: "1px solid var(--mantine-color-default-border)"
-                }
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ o(oe.Dropdown, { p: "xs", children: /* @__PURE__ */ o(
-          St,
-          {
-            format: "hexa",
-            value: p(),
-            onChange: q,
-            swatches: [...Xt]
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ o(
-        ye,
-        {
-          size: "compact",
-          value: O,
-          onChange: m,
-          onBlur: P,
-          "aria-label": "Color hex value",
-          "data-is-default": u ? "true" : "false",
-          w: 72,
-          styles: {
-            input: {
-              borderRadius: c ? 0 : "0 4px 4px 0",
-              fontFamily: "monospace",
-              textTransform: "uppercase",
-              ...u ? {
-                fontStyle: "italic",
-                color: "var(--mantine-color-dimmed)"
-              } : {}
-            }
-          }
-        }
-      ),
-      c && /* @__PURE__ */ S(Bt, { children: [
-        /* @__PURE__ */ o(
-          A,
-          {
-            style: {
-              width: 1,
-              height: 24,
-              backgroundColor: "var(--mantine-color-default-border)"
-            }
-          }
-        ),
-        /* @__PURE__ */ o(
-          le,
-          {
-            size: "compact",
-            value: $,
-            onChange: w,
-            onBlur: M,
-            min: 0,
-            max: 100,
-            hideControls: !0,
-            suffix: "%",
-            "aria-label": "Opacity",
-            "data-is-default": f ? "true" : "false",
-            w: 54,
-            styles: {
-              input: {
-                borderRadius: "0 4px 4px 0",
-                textAlign: "right",
-                ...f ? {
-                  fontStyle: "italic",
-                  color: "var(--mantine-color-dimmed)"
-                } : {}
-              }
-            }
-          }
-        )
-      ] })
-    ] }),
-    !F && /* @__PURE__ */ o(
-      D,
-      {
-        variant: "subtle",
-        size: "xs",
-        c: "dimmed",
-        "aria-label": `Reset ${s ?? "color"} to default`,
-        onClick: K,
-        children: /* @__PURE__ */ o(ne, { size: 12 })
-      }
-    )
-  ] });
-  return s ? /* @__PURE__ */ S(W, { gap: 0, children: [
-    /* @__PURE__ */ o(H, { size: "xs", c: "dimmed", mb: 1, lh: 1.2, children: s }),
-    N
-  ] }) : N;
-}
-function Sr({ label: t, actions: e, children: n }) {
-  return /* @__PURE__ */ S(A, { children: [
-    /* @__PURE__ */ o(Ce, { color: "gray.7", mt: 8, mb: 0 }),
-    /* @__PURE__ */ S(R, { justify: "space-between", py: 8, children: [
-      /* @__PURE__ */ o(H, { size: "xs", fw: 500, lh: 1.2, children: t }),
-      e && /* @__PURE__ */ o(R, { gap: 4, children: e })
-    ] }),
-    /* @__PURE__ */ o(W, { gap: 0, children: n })
-  ] });
-}
-function Tr({
-  label: t,
-  defaultOpen: e = !0,
-  children: n,
-  hasConfiguredValues: i = !1
-}) {
-  const [a, { toggle: r }] = Se(e);
-  return /* @__PURE__ */ S(A, { children: [
-    /* @__PURE__ */ o(Ce, { color: "gray.7", mt: 8, mb: 0 }),
-    /* @__PURE__ */ o(R, { justify: "space-between", py: 8, style: { cursor: "pointer" }, onClick: r, children: /* @__PURE__ */ S(R, { gap: 4, children: [
-      /* @__PURE__ */ o(
-        D,
-        {
-          variant: "subtle",
-          size: "xs",
-          c: "dimmed",
-          "aria-label": a ? `Collapse ${t}` : `Expand ${t}`,
-          children: a ? /* @__PURE__ */ o(ce, { size: 12 }) : /* @__PURE__ */ o(Te, { size: 12 })
-        }
-      ),
-      /* @__PURE__ */ o(H, { size: "xs", fw: 500, lh: 1.2, children: t }),
-      i && /* @__PURE__ */ o(
-        A,
-        {
-          "aria-label": `${t} has configured values`,
-          style: {
-            width: 6,
-            height: 6,
-            borderRadius: "50%",
-            backgroundColor: "var(--mantine-color-blue-5)",
-            marginLeft: 4
-          }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ o(Tt, { in: a, children: /* @__PURE__ */ o(W, { gap: 0, children: n }) })
-  ] });
-}
-function _r({ label: t, defaultOpen: e = !1, children: n }) {
-  const [i, { toggle: a }] = Se(e);
-  return /* @__PURE__ */ S(A, { children: [
-    /* @__PURE__ */ S(R, { gap: 4, py: 4, style: { cursor: "pointer" }, onClick: a, children: [
-      /* @__PURE__ */ o(
-        D,
-        {
-          variant: "subtle",
-          size: "xs",
-          c: "dimmed",
-          "aria-label": i ? `Collapse ${t}` : `Expand ${t}`,
-          children: i ? /* @__PURE__ */ o(ce, { size: 10 }) : /* @__PURE__ */ o(Te, { size: 10 })
-        }
-      ),
-      /* @__PURE__ */ o(H, { size: "xs", c: "dimmed", lh: 1.2, children: t })
-    ] }),
-    i && /* @__PURE__ */ o(A, { pl: "md", children: /* @__PURE__ */ o(W, { gap: 4, children: n }) })
-  ] });
-}
-function Ir({
-  label: t,
-  checked: e,
-  defaultChecked: n,
-  onChange: i,
-  children: a
-}) {
-  const [r, s] = Z({
-    value: e,
-    defaultValue: n,
-    finalValue: !1,
-    onChange: i
-  });
-  return /* @__PURE__ */ S(W, { gap: 4, children: [
-    /* @__PURE__ */ o(
-      ve,
-      {
-        size: "compact",
-        label: t,
-        checked: r,
-        onChange: (c) => {
-          s(c.currentTarget.checked);
-        }
-      }
-    ),
-    r && /* @__PURE__ */ o(A, { "data-testid": "effect-toggle-children", pl: "md", children: /* @__PURE__ */ o(W, { gap: 4, children: a }) })
-  ] });
-}
-function Zt() {
-  return crypto.randomUUID().slice(0, 8);
-}
-function se(t, e) {
-  return {
-    id: Zt(),
-    offset: t,
-    color: e
-  };
-}
-function Kt() {
-  return [se(0, "#6366F1"), se(1, "#06B6D4")];
-}
-function kr({
-  stops: t,
-  defaultStops: e,
-  direction: n,
-  defaultDirection: i = 0,
-  showDirection: a = !0,
-  onChange: r
-}) {
-  const [s, c] = Z({
-    value: t,
-    defaultValue: e,
-    finalValue: Kt(),
-    onChange: (l) => r == null ? void 0 : r(l, g)
-  }), [g, b] = Z({
-    value: n,
-    defaultValue: i,
-    finalValue: 0,
-    onChange: (l) => r == null ? void 0 : r(s, l)
-  }), z = (l, x) => {
-    const v = [...s];
-    v[l] = { ...v[l], color: x }, c(v), r == null || r(v, g);
-  }, h = (l, x) => {
-    const v = [...s];
-    v[l] = { ...v[l], offset: x / 100 }, c(v), r == null || r(v, g);
-  }, u = (l) => {
-    b(l), r == null || r(s, l);
-  }, f = () => {
-    if (s.length >= 5)
-      return;
-    const l = s.length > 0 ? (s[s.length - 1].offset + 1) / 2 : 0.5, x = [...s, se(l, Wt)];
-    x.sort((v, _) => v.offset - _.offset), c(x), r == null || r(x, g);
-  }, F = (l) => {
-    if (s.length <= 2)
-      return;
-    const x = s.filter((v, _) => _ !== l);
-    c(x), r == null || r(x, g);
-  };
-  return /* @__PURE__ */ S(W, { gap: "xs", children: [
-    /* @__PURE__ */ S(R, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ o(H, { size: "xs", c: "dimmed", children: "Color Stops" }),
-      /* @__PURE__ */ o(
-        D,
-        {
-          size: "compact",
-          variant: "subtle",
-          color: "gray",
-          onClick: f,
-          disabled: s.length >= 5,
-          "aria-label": "Add color stop",
-          children: /* @__PURE__ */ o(Rt, { size: 12 })
-        }
-      )
-    ] }),
-    s.map((l, x) => /* @__PURE__ */ S(R, { gap: "xs", align: "flex-end", children: [
-      /* @__PURE__ */ o(A, { style: { flex: 1 }, children: /* @__PURE__ */ o(
-        Pe,
-        {
-          size: "compact",
-          value: l.color,
-          onChange: (v) => {
-            z(x, v);
-          },
-          "aria-label": `Color stop ${x + 1}`
-        }
-      ) }),
-      /* @__PURE__ */ o(A, { style: { width: "80px" }, children: /* @__PURE__ */ o(
-        ae,
-        {
-          size: "compact",
-          min: 0,
-          max: 100,
-          value: l.offset * 100,
-          onChange: (v) => {
-            h(x, v);
-          },
-          label: (v) => `${Math.round(v)}%`,
-          "aria-label": `Stop ${x + 1} position`
-        }
-      ) }),
-      /* @__PURE__ */ o(
-        D,
-        {
-          size: "compact",
-          variant: "subtle",
-          color: "gray",
-          onClick: () => {
-            F(x);
-          },
-          disabled: s.length <= 2,
-          "aria-label": `Remove color stop ${x + 1}`,
-          children: /* @__PURE__ */ o(Ft, { size: 12 })
-        }
-      )
-    ] }, l.id)),
-    a && /* @__PURE__ */ S(A, { children: [
-      /* @__PURE__ */ o(H, { size: "xs", c: "dimmed", mb: 4, children: "Direction" }),
-      /* @__PURE__ */ o(
-        ae,
-        {
-          size: "compact",
-          min: 0,
-          max: 360,
-          value: g,
-          onChange: u,
-          label: (l) => `${l}°`,
-          "aria-label": "Gradient direction",
-          marks: [
-            { value: 0, label: "0°" },
-            { value: 90, label: "90°" },
-            { value: 180, label: "180°" },
-            { value: 270, label: "270°" },
-            { value: 360, label: "360°" }
-          ]
-        }
-      )
-    ] })
-  ] });
+      size: "sm"
+    },
+    vars: () => ({
+      root: vn
+    })
+  }),
+  Tabs: St.extend({
+    // Tabs does not have a size prop, only styles for compact appearance
+    styles: zn
+  })
+}, Sn = {
+  "--menu-item-fz": "11px"
+}, wn = {
+  tooltip: {
+    fontSize: 11,
+    padding: "4px 8px"
+  }
+}, In = {
+  dropdown: {
+    padding: 8
+  }
+}, kn = {
+  dropdown: {
+    padding: 8
+  }
+}, Tn = {
+  Menu: Ft.extend({
+    defaultProps: {
+      zIndex: N
+    },
+    vars: () => ({
+      dropdown: Sn
+    })
+  }),
+  Tooltip: Ot.extend({
+    defaultProps: {
+      zIndex: N
+    },
+    styles: wn
+  }),
+  Popover: Dt.extend({
+    defaultProps: {
+      zIndex: N
+    },
+    styles: In
+  }),
+  HoverCard: At.extend({
+    defaultProps: {
+      zIndex: N
+    },
+    styles: kn
+  })
+}, En = {
+  xs: "10px",
+  sm: "11px",
+  // Our compact default
+  md: "13px",
+  lg: "14px",
+  xl: "16px"
+}, An = {
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px"
+}, Dn = {
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px"
+}, On = Bt({
+  colors: jt,
+  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: {
+    ...hn,
+    ...Zt,
+    ...nn,
+    ...dn,
+    ...gn,
+    ...yn,
+    ...Tn
+  }
+}), lo = Vt(Ee, On), Fn = [
+  "#5B8FF9FF",
+  "#FF6B6BFF",
+  "#61D095FF",
+  "#F7B731FF",
+  "#9B59B6FF",
+  "#5B8FF980",
+  "#FF6B6B80",
+  "#61D09580",
+  "#F7B73180",
+  "#9B59B680"
+], le = "#888888", Ge = 255, je = 100;
+function Xe(e) {
+  return Math.round(parseInt(e, 16) / Ge * je);
+}
+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((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 po(e, t) {
+  const a = e.replace("#", ""), n = Ke(t);
+  return `#${a}${n}`;
+}
+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);
 }
-function Yt({ children: t }) {
-  return /* @__PURE__ */ o(A, { p: "sm", children: t });
+const We = ge(null);
+function Vn() {
+  return re(We);
 }
-const qt = [
+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__ */ o(We.Provider, { value: { anchorRef: t }, children: n });
+}
+function Rn({ children: e }) {
+  return /* @__PURE__ */ o(B, { p: "sm", children: e });
+}
+const Ln = [
   // Mantine portal containers
   "[data-portal]",
   // Combobox/Select dropdowns
@@ -1020,492 +722,431 @@ const qt = [
   // Modal (just in case)
   "[data-modal]"
 ].join(", ");
-function Jt(t, e = !0) {
-  U(() => {
-    if (!e)
+function Mn(e, t = !0) {
+  _(() => {
+    if (!t)
       return;
-    const n = (i) => {
-      const a = i.target;
-      a.closest('[role="dialog"]') || a.closest("[data-popout-trigger]") || a.closest("[data-popout-portal-container]") || a.closest(qt) || t();
+    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", n), () => {
-      document.removeEventListener("mousedown", n);
+    return document.addEventListener("mousedown", a), () => {
+      document.removeEventListener("mousedown", a);
     };
-  }, [t, e]);
+  }, [e, t]);
 }
-function Qt(t, e = !0) {
-  U(() => {
-    if (!e)
+function _n(e, t = !0) {
+  _(() => {
+    if (!t)
       return;
-    const n = (i) => {
-      i.key === "Escape" && (i.preventDefault(), t());
+    const a = (n) => {
+      n.key === "Escape" && (n.preventDefault(), e());
     };
-    return document.addEventListener("keydown", n), () => {
-      document.removeEventListener("keydown", n);
+    return document.addEventListener("keydown", a), () => {
+      document.removeEventListener("keydown", a);
     };
-  }, [t, e]);
+  }, [e, t]);
 }
-const pe = Ie(null), Oe = Ie(null);
-function Ae() {
-  const t = ue(pe);
-  if (!t)
+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 t;
+  return e;
 }
-function er() {
-  return ue(pe);
+function Nn() {
+  return re(he);
 }
-function tr() {
-  const t = ue(Oe);
-  if (!t)
+function Hn() {
+  const e = re(Ze);
+  if (!e)
     throw new Error("usePopoutManagerContext must be used within a PopoutManager");
-  return t;
+  return e;
 }
-function rr({ children: t, parentId: e = null }) {
-  const n = ke(), [i, a] = L(!1), r = G(null), s = _e(
+function $n({ children: e, parentId: t = null }) {
+  const a = Ue(), [n, i] = L(!1), s = R(null), l = $e(
     () => ({
-      id: n,
-      isOpen: i,
+      id: a,
+      isOpen: n,
       open: () => {
-        a(!0);
+        i(!0);
       },
       close: () => {
-        a(!1);
+        i(!1);
       },
       toggle: () => {
-        a((c) => !c);
+        i((d) => !d);
       },
-      triggerRef: r,
-      parentId: e
+      triggerRef: s,
+      parentId: t
     }),
-    [n, i, e]
+    [a, n, t]
   );
-  return /* @__PURE__ */ o(pe.Provider, { value: s, children: t });
+  return /* @__PURE__ */ o(he.Provider, { value: l, children: e });
 }
-function or({ children: t }) {
-  const [e, n] = L(null), i = G([]), a = G(/* @__PURE__ */ new Map()), r = G(/* @__PURE__ */ new Map()), [s, c] = L(0), g = T((p, m, P) => {
-    var w, M;
-    if (!i.current.includes(p)) {
-      const K = i.current, N = [];
-      for (const d of K)
-        r.current.get(d) === (P ?? null) && N.push(d);
-      for (const d of N.reverse()) {
-        const E = [];
-        for (const k of K) {
-          let y = k;
-          for (; y; ) {
-            const Y = r.current.get(y);
-            if (Y === d) {
-              E.push(k);
-              break;
-            }
-            y = Y ?? 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 k of E.reverse())
-          (w = a.current.get(k)) == null || w();
-        (M = a.current.get(d)) == null || M();
+        g = O;
       }
-      i.current = [...i.current.filter((d) => !N.includes(d) && !N.some((E) => {
-        let k = d;
-        for (; k; ) {
-          const y = r.current.get(k);
-          if (y === E)
-            return !0;
-          k = y ?? null;
-        }
-        return !1;
-      })), p], a.current.set(p, m), r.current.set(p, P ?? null), c((d) => d + 1);
     }
-  }, []), b = T((p) => {
-    i.current = i.current.filter((m) => m !== p), a.current.delete(p), r.current.delete(p), c((m) => m + 1);
-  }, []), z = T((p) => {
-    const m = i.current.indexOf(p);
-    return m >= 0 ? xe + m : xe;
-  }, []), h = T((p) => {
-    const m = i.current, P = m.indexOf(p);
-    P === -1 || P === m.length - 1 || (i.current = [
-      ...m.filter((w) => w !== p),
-      p
-    ], c((w) => w + 1));
-  }, []), u = T((p) => r.current.get(p) ?? null, []), f = T((p, m) => {
-    let P = m;
-    for (; P; ) {
-      const w = r.current.get(P);
-      if (w === 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 = w ?? null;
+      p = g ?? null;
     }
     return !1;
-  }, []), F = T((p) => {
-    const m = [], P = i.current;
-    for (const w of P)
-      f(p, w) && m.push(w);
-    return m;
-  }, [f]), l = T((p) => {
-    const m = F(p);
-    for (const P of [...m].reverse()) {
-      const w = a.current.get(P);
-      w == null || w();
+  }, []), 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]), x = T((p) => {
-    l(p);
-    const m = a.current.get(p);
-    m == null || m();
-  }, [l]), v = T((p, m) => {
-    const P = i.current;
-    for (const w of P) {
-      if (w === 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;
-      r.current.get(w) === m && x(w);
+      s.current.get(g) === r && k(g);
     }
-  }, [x]), _ = T(() => {
-    const p = i.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();
-  }, []), O = T(() => {
-    const p = [...i.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();
     }
-  }, []), I = T(() => i.current.length > 0, []), [$, j] = L(!1);
-  U(() => {
-    j(i.current.length > 0);
-  }, [s]), Qt(_, $), Jt(O, $);
-  const q = _e(
+  }, []), Z = z(() => n.current.length > 0, []), [$, U] = L(!1);
+  _(() => {
+    U(n.current.length > 0);
+  }, [l]), _n(F, $), Mn(H, $);
+  const Q = $e(
     () => ({
-      register: g,
-      unregister: b,
-      getZIndex: z,
-      bringToFront: h,
-      portalContainer: e,
-      zIndexVersion: s,
-      closeFocused: _,
-      closeAll: O,
-      hasOpenPopouts: I,
-      closeWithDescendants: x,
-      closeDescendants: l,
-      closeSiblings: v,
-      getParentId: u,
-      isAncestor: f
+      register: u,
+      unregister: P,
+      getZIndex: A,
+      bringToFront: f,
+      portalContainer: t,
+      zIndexVersion: l,
+      closeFocused: F,
+      closeAll: H,
+      hasOpenPopouts: Z,
+      closeWithDescendants: k,
+      closeDescendants: D,
+      closeSiblings: T,
+      getParentId: v,
+      isAncestor: C
     }),
-    [g, b, z, h, e, s, _, O, I, x, l, v, u, f]
+    [u, P, A, f, t, l, F, H, Z, k, D, T, v, C]
   );
-  return /* @__PURE__ */ S(Oe.Provider, { value: q, children: [
-    t,
-    /* @__PURE__ */ o("div", { ref: n, "data-popout-portal-container": !0 })
+  return /* @__PURE__ */ y(Ze.Provider, { value: Q, children: [
+    e,
+    /* @__PURE__ */ o("div", { ref: a, "data-popout-portal-container": !0 })
   ] });
 }
-function nr(t) {
-  const { isOpen: e, onDragStart: n } = t, [i, a] = L({ left: 0, top: 0 }), r = G(!1), s = G({
+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 = T(() => {
-    a({ left: 0, top: 0 });
-  }, []), g = T(
-    (h) => {
-      const u = h.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") || (r.current = !0, s.current = {
-        x: h.clientX,
-        y: h.clientY,
-        offsetLeft: i.left,
-        offsetTop: i.top
-      }, n == null || n(), h.target.setPointerCapture(h.pointerId));
+  }), 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
+      }, a == null || a(), m.target.setPointerCapture(m.pointerId));
     },
-    [i.left, i.top, n]
-  ), b = T((h) => {
-    if (!r.current)
+    [n.left, n.top, a]
+  ), h = z((m) => {
+    if (!s.current)
       return;
-    const u = h.clientX - s.current.x, f = h.clientY - s.current.y;
-    a({
-      left: s.current.offsetLeft + u,
-      top: s.current.offsetTop + f
+    const u = m.clientX - l.current.x, P = m.clientY - l.current.y;
+    i({
+      left: l.current.offsetLeft + u,
+      top: l.current.offsetTop + P
     });
-  }, []), z = T((h) => {
-    r.current && (r.current = !1, h.target.releasePointerCapture(h.pointerId));
+  }, []), x = z((m) => {
+    s.current && (s.current = !1, m.target.releasePointerCapture(m.pointerId));
   }, []);
-  return e ? {
+  return t ? {
     dragTriggerProps: {
       "data-drag-trigger": !0,
-      onPointerDown: g,
-      onPointerMove: b,
-      onPointerUp: z,
+      onPointerDown: b,
+      onPointerMove: h,
+      onPointerUp: x,
       style: {
         cursor: "grab",
         userSelect: "none",
         touchAction: "none"
       }
     },
-    dragOffset: i,
-    resetDragOffset: c
+    dragOffset: n,
+    resetDragOffset: d
   } : {
     dragTriggerProps: {},
     dragOffset: { left: 0, top: 0 },
-    resetDragOffset: c
+    resetDragOffset: d
   };
 }
-function ir({ id: t, label: e, isActive: n, onClick: i }) {
-  return /* @__PURE__ */ o(
-    _t,
-    {
-      role: "tab",
-      id: `tab-${t}`,
-      "aria-selected": n,
-      "aria-controls": `tabpanel-${t}`,
-      onClick: i,
-      px: "xs",
-      py: 3,
-      style: {
-        fontSize: "11px",
-        fontWeight: n ? 500 : 400,
-        color: n ? "var(--mantine-color-text)" : "var(--mantine-color-dimmed)",
-        borderBottom: n ? "2px solid var(--mantine-color-blue-filled)" : "2px solid transparent",
-        cursor: "pointer"
-      },
-      children: e
-    }
-  );
-}
-function ar({
-  config: t,
-  onClose: e,
-  dragTriggerProps: n = {},
-  actions: i = [],
-  activeTab: a,
-  onTabChange: r,
-  titleId: s
+function jn({
+  config: e,
+  onClose: t,
+  dragTriggerProps: a = {},
+  actions: n = [],
+  activeTab: i,
+  onTabChange: s,
+  titleId: l
 }) {
   var u;
-  const { style: c, ...g } = n, z = t.variant === "tabs" ? t : null, h = (f) => {
-    r && r(f);
-  };
-  return /* @__PURE__ */ S(
-    R,
+  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__ */ y(
+    E,
     {
       justify: "space-between",
       px: "sm",
       py: "xs",
-      ...g,
+      ...b,
       style: {
-        ...c
+        ...d
       },
       children: [
-        t.variant === "title" ? /* @__PURE__ */ o(H, { id: s, size: "compact", fw: 500, children: t.title }) : /* @__PURE__ */ S(R, { gap: 0, role: "tablist", "aria-label": "Panel tabs", children: [
-          /* @__PURE__ */ o("span", { id: s, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0, 0, 0, 0)" }, children: ((u = z == null ? void 0 : z.tabs[0]) == null ? void 0 : u.label) ?? "Settings" }),
-          z == null ? void 0 : z.tabs.map((f) => /* @__PURE__ */ o(
-            ir,
+        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,
             {
-              id: f.id,
-              label: f.label,
-              isActive: a === f.id,
-              onClick: () => {
-                h(f.id);
-              }
-            },
-            f.id
-          ))
+              data: m,
+              value: i,
+              onChange: (P) => s == null ? void 0 : s(P),
+              size: "xs"
+            }
+          )
         ] }),
-        /* @__PURE__ */ S(R, { gap: 4, children: [
-          i.map((f) => /* @__PURE__ */ o(
-            D,
+        /* @__PURE__ */ y(E, { gap: 4, children: [
+          n.map((P) => /* @__PURE__ */ o(
+            V,
             {
               variant: "subtle",
-              size: "compact",
-              onClick: f.onClick,
-              "aria-label": f.label,
-              children: f.icon
+              onClick: P.onClick,
+              "aria-label": P.label,
+              children: P.icon
             },
-            f.id
+            P.id
           )),
-          /* @__PURE__ */ o(D, { variant: "subtle", size: "compact", onClick: e, "aria-label": "Close panel", children: /* @__PURE__ */ o(ne, { size: 14 }) })
+          /* @__PURE__ */ o(Ae, { size: "sm", onClick: t, "aria-label": "Close panel" })
         ] })
       ]
     }
   );
 }
-function sr(t, e, n = Vt, i = {}) {
-  const { placement: a = "left", alignment: r = "start", panelHeight: s = 0 } = i;
-  let c, g;
-  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 = t.left - e - n, g = be(t, r, s);
+      d = e.left - t - a, b = ke(e, s, l);
       break;
     case "right":
-      c = t.right + n, g = be(t, r, s);
+      d = e.right + a, b = ke(e, s, l);
       break;
     case "top":
-      c = ze(t, r, e), g = t.top - s - n;
+      d = Te(e, s, t), b = e.top - l - a;
       break;
     case "bottom":
-      c = ze(t, r, e), g = t.bottom + n;
+      d = Te(e, s, t), b = e.bottom + a;
       break;
     default: {
-      const b = a;
-      throw new Error(`Unknown placement: ${String(b)}`);
+      const h = i;
+      throw new Error(`Unknown placement: ${String(h)}`);
     }
   }
-  return { left: c, top: g };
+  return { left: d, top: b };
 }
-function be(t, e, n) {
-  switch (e) {
+function ke(e, t, a) {
+  switch (t) {
     case "start":
-      return t.top;
+      return e.top;
     case "center":
-      return t.top + t.height / 2 - n / 2;
+      return e.top + e.height / 2 - a / 2;
     case "end":
-      return t.bottom - n;
+      return e.bottom - a;
     default: {
-      const i = e;
-      throw new Error(`Unknown alignment: ${String(i)}`);
+      const n = t;
+      throw new Error(`Unknown alignment: ${String(n)}`);
     }
   }
 }
-function ze(t, e, n) {
-  switch (e) {
+function Te(e, t, a) {
+  switch (t) {
     case "start":
-      return t.left;
+      return e.left;
     case "center":
-      return t.left + t.width / 2 - n / 2;
+      return e.left + e.width / 2 - a / 2;
     case "end":
-      return t.right - n;
+      return e.right - a;
     default: {
-      const i = e;
-      throw new Error(`Unknown alignment: ${String(i)}`);
+      const n = t;
+      throw new Error(`Unknown alignment: ${String(n)}`);
     }
   }
 }
-function lr({
-  width: t,
-  height: e,
-  header: n,
-  children: i,
-  anchorRef: a,
-  placement: r = "left",
-  alignment: s = "start",
-  gap: c = 0,
-  actions: g
+function Kn({
+  width: e,
+  height: t,
+  header: a,
+  children: n,
+  anchorRef: i,
+  placement: s = "left",
+  alignment: l = "start",
+  gap: d = 0,
+  actions: b
 }) {
-  var ge, he;
-  const { isOpen: b, close: z, triggerRef: h, id: u, parentId: f } = Ae(), { getZIndex: F, portalContainer: l, register: x, unregister: v, bringToFront: _, zIndexVersion: O, closeWithDescendants: I, closeDescendants: $ } = tr(), j = ke(), q = `popout-panel-${u}`, p = `popout-title-${j}`, [m, P] = L(null), w = G(!1), M = G(null), K = T(() => {
-    _(u);
-  }, [_, u]), { dragTriggerProps: N, dragOffset: d, resetDragOffset: E } = nr({
-    isOpen: b,
-    onDragStart: K
-  }), k = n.variant === "tabs", y = k ? n : null, Y = (y == null ? void 0 : y.defaultTab) ?? ((ge = y == null ? void 0 : y.tabs[0]) == null ? void 0 : ge.id), [de, fe] = L(Y), Le = T(
-    (C) => {
-      var X;
-      fe(C), (X = y == null ? void 0 : y.onTabChange) == null || X.call(y, C);
+  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);
     },
-    [y]
-  ), De = T(
-    (C) => {
-      C.stopPropagation(), $(u), _(u);
+    [S]
+  ), Ye = z(
+    (I) => {
+      I.stopPropagation(), T(u), w(u);
     },
-    [$, _, u]
-  ), $e = T(() => {
-    I(u);
-  }, [I, u]);
-  if (U(() => (b ? x(u, z, f) : v(u), () => {
-    v(u);
-  }), [b, u, x, v, z, f]), U(() => {
-    if (b) {
-      let C = (a == null ? void 0 : a.current) ?? null;
-      if (!C && f && (C = document.querySelector(`[data-popout-id="${f}"]`)), C || (C = h.current), C) {
-        const X = C.getBoundingClientRect(), Ue = sr(X, t, c, {
-          placement: r,
-          alignment: s,
-          panelHeight: e
+    [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
         });
-        P(Ue), w.current || (E(), k && fe(Y));
+        Q(tt), c.current || (G(), q && be(se));
       }
     }
-    w.current = b;
-  }, [b, t, e, c, h, a, r, s, E, k, Y, f]), U(() => {
-    if (b && M.current) {
-      const C = setTimeout(() => {
-        var X;
-        (X = M.current) == null || X.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(C);
+        clearTimeout(I);
       };
-    } else !b && h.current && h.current.focus();
-  }, [b, h]), !b || !l || !m)
+    } else !h && m.current && m.current.focus();
+  }, [h, m]), !h || !f || !U)
     return null;
-  const He = F(u), me = {
-    left: m.left + d.left,
-    top: m.top + d.top
-  }, J = "1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12))", te = "none", ie = a !== void 0 || f !== void 0, Me = () => ie ? {
-    borderTop: r === "bottom" ? te : J,
-    borderRight: r === "left" ? te : J,
-    borderBottom: r === "top" ? te : J,
-    borderLeft: r === "right" ? te : J
-  } : { border: J }, Ne = () => {
-    if (!ie)
-      return {};
-    const C = 8;
-    switch (r) {
-      case "left":
-        return {
-          borderTopLeftRadius: C,
-          borderBottomLeftRadius: C,
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0
-        };
-      case "right":
-        return {
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          borderTopRightRadius: C,
-          borderBottomRightRadius: C
-        };
-      case "top":
-        return {
-          borderTopLeftRadius: C,
-          borderTopRightRadius: C,
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0
-        };
-      case "bottom":
-        return {
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-          borderBottomLeftRadius: C,
-          borderBottomRightRadius: C
-        };
-      default:
-        return {};
-    }
-  }, Ve = /* @__PURE__ */ S(
-    It,
+  const Qe = A(u), Pe = {
+    left: U.left + O.left,
+    top: U.top + O.top
+  }, et = /* @__PURE__ */ y(
+    Rt,
     {
-      ref: M,
-      id: q,
+      ref: r,
+      id: Z,
       role: "dialog",
       "aria-modal": "false",
-      "aria-labelledby": p,
+      "aria-labelledby": $,
       tabIndex: -1,
-      radius: ie ? 0 : 8,
-      onClick: De,
+      radius: 8,
+      onClick: Ye,
       "data-popout-id": u,
-      ...f && { "data-parent-id": f },
+      ...P && { "data-parent-id": P },
       style: {
         position: "fixed",
-        left: me.left,
-        top: me.top,
-        width: t,
-        ...e !== void 0 && { height: e },
-        zIndex: He,
+        left: Pe.left,
+        top: Pe.top,
+        minWidth: e,
+        ...t !== void 0 && { minHeight: t },
+        zIndex: Qe,
         backgroundColor: "var(--mantine-color-body)",
-        // Conditional borders for pixel-perfect edge alignment with anchor
-        ...Me(),
-        // Conditional border radius - flatten corners on snapping side
-        ...Ne(),
+        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
         boxShadow: [
           "0 1px 2px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))",
@@ -1520,116 +1161,536 @@ function lr({
       },
       children: [
         /* @__PURE__ */ o(
-          ar,
+          jn,
           {
-            config: n,
-            onClose: $e,
-            dragTriggerProps: N,
-            activeTab: de,
-            onTabChange: Le,
-            actions: g,
-            titleId: p
+            config: a,
+            onClose: Je,
+            dragTriggerProps: g,
+            activeTab: ve,
+            onTabChange: qe,
+            actions: b,
+            titleId: $
           }
         ),
-        /* @__PURE__ */ o(A, { children: k ? (he = y == null ? void 0 : y.tabs.find((C) => C.id === de)) == null ? void 0 : he.content : i })
+        /* @__PURE__ */ o(B, { children: q ? (ze = S == null ? void 0 : S.tabs.find((I) => I.id === ve)) == null ? void 0 : ze.content : n })
       ]
     }
   );
-  return At(Ve, l);
+  return Ut(et, f);
 }
-function cr({ children: t }) {
-  const { toggle: e, triggerRef: n, isOpen: i, id: a } = Ae(), r = T(
-    (g) => {
-      g.stopPropagation(), e();
+function Wn({ children: e }) {
+  const { toggle: t, triggerRef: a, isOpen: n, id: i } = xe(), s = z(
+    (b) => {
+      b.stopPropagation(), t();
     },
-    [e]
+    [t]
   );
-  if (!Et(t))
+  if (!Ne(e))
     throw new Error("PopoutTrigger requires a single valid React element as its child");
-  const s = `popout-panel-${a}`, c = t;
-  return Ot(c, {
-    onClick: (g) => {
-      var b, z;
-      (z = (b = c.props).onClick) == null || z.call(b, g), r(g);
+  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: n,
+    ref: a,
     // Mark this element as a popout trigger for click-outside detection
     "data-popout-trigger": !0,
     // ARIA attributes for accessibility
-    "aria-expanded": i,
-    "aria-controls": s,
+    "aria-expanded": n,
+    "aria-controls": l,
     "aria-haspopup": "dialog"
   });
 }
-function ur({ children: t }) {
-  const e = er(), n = (e == null ? void 0 : e.id) ?? null;
-  return /* @__PURE__ */ o(rr, { parentId: n, children: t });
+function Zn({ children: e }) {
+  const t = Nn(), a = (t == null ? void 0 : t.id) ?? null;
+  return /* @__PURE__ */ o($n, { parentId: a, children: e });
+}
+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: i,
+        variant: s ? "light" : "subtle",
+        size: a,
+        c: s ? void 0 : "dimmed",
+        ...n,
+        children: t
+      }
+    );
+  }
+);
+function go({ children: e }) {
+  return /* @__PURE__ */ o(Un, { children: e });
+}
+function qn({
+  color: e,
+  defaultColor: t,
+  opacity: a,
+  defaultOpacity: n = 100,
+  onColorChange: i,
+  onOpacityChange: s,
+  label: l,
+  showOpacity: d = !0
+}) {
+  const [b, h] = W({
+    value: e,
+    defaultValue: void 0,
+    finalValue: void 0,
+    onChange: i
+  }), [x, m] = W({
+    value: a,
+    defaultValue: void 0,
+    finalValue: void 0,
+    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
+      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 p = Math.min(100, Math.max(0, r));
+      p !== v && m(p);
+    }
+  }, 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,
+            radius: 0,
+            style: {
+              backgroundColor: "var(--mantine-color-default)",
+              borderRadius: "4px 0 0 4px"
+            },
+            "aria-label": "Color swatch",
+            children: /* @__PURE__ */ o(
+              Lt,
+              {
+                color: f,
+                size: 14,
+                radius: 2,
+                style: {
+                  border: "1px solid var(--mantine-color-default-border)"
+                }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          oe.Panel,
+          {
+            width: 220,
+            header: { variant: "title", title: l ?? "Color" },
+            placement: "bottom",
+            alignment: "start",
+            gap: 4,
+            children: /* @__PURE__ */ o(oe.Content, { children: /* @__PURE__ */ o(
+              Mt,
+              {
+                format: "hexa",
+                value: F(),
+                onChange: T,
+                swatches: [...Fn]
+              }
+            ) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(
+        Ve,
+        {
+          value: C,
+          onChange: H,
+          onBlur: Z,
+          "aria-label": "Color hex value",
+          "data-is-default": u ? "true" : "false",
+          w: 72,
+          styles: {
+            input: {
+              borderRadius: d ? 0 : "0 4px 4px 0",
+              fontFamily: "monospace",
+              textTransform: "uppercase",
+              ...u ? {
+                fontStyle: "italic",
+                color: "var(--mantine-color-dimmed)"
+              } : {}
+            }
+          }
+        }
+      ),
+      d && /* @__PURE__ */ y(Le, { children: [
+        /* @__PURE__ */ o(
+          B,
+          {
+            style: {
+              width: 1,
+              height: 24,
+              backgroundColor: "var(--mantine-color-default-border)"
+            }
+          }
+        ),
+        /* @__PURE__ */ o(
+          pe,
+          {
+            value: D,
+            onChange: $,
+            onBlur: U,
+            min: 0,
+            max: 100,
+            hideControls: !0,
+            suffix: "%",
+            "aria-label": "Opacity",
+            "data-is-default": P ? "true" : "false",
+            w: 54,
+            styles: {
+              input: {
+                borderRadius: "0 4px 4px 0",
+                textAlign: "right",
+                ...P ? {
+                  fontStyle: "italic",
+                  color: "var(--mantine-color-dimmed)"
+                } : {}
+              }
+            }
+          }
+        )
+      ] })
+    ] }),
+    !A && /* @__PURE__ */ o(
+      V,
+      {
+        variant: "subtle",
+        size: "xs",
+        c: "dimmed",
+        "aria-label": `Reset ${l ?? "color"} to default`,
+        onClick: Q,
+        children: /* @__PURE__ */ o(ue, { size: 12 })
+      }
+    )
+  ] });
+  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 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__ */ o(K, { gap: 0, px: 8, children: a })
+  ] });
 }
-const Br = Object.assign(ur, {
-  Trigger: cr,
-  Panel: lr,
-  Content: Yt
-});
-function Rr({ children: t }) {
-  return /* @__PURE__ */ o(or, { children: t });
+function ho({
+  label: e,
+  defaultOpen: t = !0,
+  children: a,
+  hasConfiguredValues: n = !1
+}) {
+  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 Fr({ label: t, value: e }) {
-  return /* @__PURE__ */ S(R, { justify: "space-between", py: 4, children: [
-    /* @__PURE__ */ o(H, { size: "compact", c: "dimmed", children: t }),
-    /* @__PURE__ */ o(H, { size: "compact", c: "var(--mantine-color-text)", fw: 500, children: String(e) })
+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 Er({
-  label: t,
-  value: e,
-  defaultValue: n,
-  onChange: i,
-  min: a,
-  max: r,
-  step: s,
-  decimalScale: c,
-  suffix: g,
-  hideControls: b = !0
+function Yn() {
+  return crypto.randomUUID().slice(0, 8);
+}
+function de(e, t) {
+  return {
+    id: Yn(),
+    offset: e,
+    color: t
+  };
+}
+function Jn() {
+  return [de(0, "#6366F1"), de(1, "#06B6D4")];
+}
+function vo({
+  stops: e,
+  defaultStops: t,
+  direction: a,
+  defaultDirection: n = 0,
+  showDirection: i = !0,
+  onChange: s
 }) {
-  const [z, h] = Z({
+  const [l, d] = W({
     value: e,
+    defaultValue: t,
+    finalValue: Jn(),
+    onChange: (f) => s == null ? void 0 : s(f, b)
+  }), [b, h] = W({
+    value: a,
+    defaultValue: n,
+    finalValue: 0,
+    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 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 v = l.filter((C, w) => w !== f);
+    d(v);
+  };
+  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: P,
+          disabled: l.length >= 5,
+          "aria-label": "Add color stop",
+          children: /* @__PURE__ */ o(Nt, { size: 12 })
+        }
+      )
+    ] }),
+    l.map((f, v) => /* @__PURE__ */ y(E, { gap: "xs", align: "flex-end", children: [
+      /* @__PURE__ */ o(
+        qn,
+        {
+          color: f.color,
+          defaultColor: le,
+          onColorChange: (C) => {
+            x(v, C ?? le);
+          },
+          showOpacity: !1
+        }
+      ),
+      /* @__PURE__ */ o(B, { style: { width: "80px" }, children: /* @__PURE__ */ o(
+        ce,
+        {
+          min: 0,
+          max: 100,
+          value: f.offset * 100,
+          onChange: (C) => {
+            m(v, C);
+          },
+          label: (C) => `${Math.round(C)}%`,
+          "aria-label": `Stop ${v + 1} position`
+        }
+      ) }),
+      /* @__PURE__ */ o(
+        V,
+        {
+          variant: "subtle",
+          color: "gray",
+          onClick: () => {
+            A(v);
+          },
+          disabled: l.length <= 2,
+          "aria-label": `Remove color stop ${v + 1}`,
+          children: /* @__PURE__ */ o(Ht, { size: 12 })
+        }
+      )
+    ] }, 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: b,
+          onChange: u,
+          label: (f) => `${f}°`,
+          "aria-label": "Gradient direction",
+          marks: [
+            { value: 0, label: "0°" },
+            { value: 90, label: "90°" },
+            { value: 180, label: "180°" },
+            { value: 270, label: "270°" },
+            { value: 360, label: "360°" }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+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 Po({
+  label: e,
+  value: t,
+  defaultValue: a,
+  onChange: n,
+  min: i,
+  max: s,
+  step: l,
+  decimalScale: d,
+  suffix: b,
+  hideControls: h = !0
+}) {
+  const [x, m] = W({
+    value: t,
     defaultValue: void 0,
     // Start with undefined (using default)
     finalValue: void 0,
-    onChange: i
-  }), u = z === void 0, f = z ?? n, [F, l] = L(f);
-  U(() => {
-    l(z ?? n);
-  }, [z, n]);
-  const x = (O) => {
-    l(O);
-  }, v = () => {
-    const O = typeof F == "string" ? parseFloat(F) : F;
-    if (isNaN(O))
-      l(z ?? n);
+    onChange: n
+  }), 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 I = O;
-      a !== void 0 && I < a && (I = a), r !== void 0 && I > r && (I = r), I !== z && h(I), l(I);
+      let T = k;
+      i !== void 0 && T < i && (T = i), s !== void 0 && T > s && (T = s), T !== x && m(T), v(T);
     }
-  }, _ = () => {
-    h(void 0);
+  }, D = () => {
+    m(void 0);
   };
-  return /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+  return /* @__PURE__ */ y(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
     /* @__PURE__ */ o(
-      le,
+      pe,
       {
-        label: t,
-        "aria-label": t,
-        value: F,
-        onChange: x,
-        onBlur: v,
-        min: a,
-        max: r,
-        step: s,
-        decimalScale: c,
-        suffix: g,
-        hideControls: b,
-        size: "compact",
+        label: e,
+        "aria-label": e,
+        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: u ? {
@@ -1641,47 +1702,46 @@ function Er({
       }
     ),
     !u && /* @__PURE__ */ o(
-      D,
+      V,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
-        "aria-label": `Reset ${t} to default`,
-        onClick: _,
+        "aria-label": `Reset ${e} to default`,
+        onClick: D,
         style: { marginBottom: 2 },
-        children: /* @__PURE__ */ o(ne, { size: 12 })
+        children: /* @__PURE__ */ o(ue, { size: 12 })
       }
     )
   ] });
 }
-function Or({ label: t, value: e, defaultValue: n, options: i, onChange: a }) {
-  const [r, s] = Z({
-    value: e,
+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 = r === void 0, g = r ?? n, b = (h) => {
-    h !== null && s(h);
-  }, z = () => {
-    s(void 0);
+    onChange: i
+  }), d = s === void 0, b = s ?? a, h = (m) => {
+    m !== null && l(m);
+  }, x = () => {
+    l(void 0);
   };
-  return /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+  return /* @__PURE__ */ y(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
     /* @__PURE__ */ o(
-      we,
+      Fe,
       {
-        label: t,
-        "aria-label": t,
-        value: g,
-        onChange: b,
-        data: i,
-        size: "compact",
-        rightSection: /* @__PURE__ */ o(ce, { size: 14 }),
+        label: e,
+        "aria-label": e,
+        value: b,
+        onChange: h,
+        data: n,
+        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
@@ -1689,61 +1749,99 @@ function Or({ label: t, value: e, defaultValue: n, options: i, onChange: a }) {
         style: { flex: 1 }
       }
     ),
-    !c && /* @__PURE__ */ o(
-      D,
+    !d && /* @__PURE__ */ o(
+      V,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
-        "aria-label": `Reset ${t} to default`,
-        onClick: z,
+        "aria-label": `Reset ${e} to default`,
+        onClick: x,
         style: { marginBottom: 2 },
-        children: /* @__PURE__ */ o(ne, { size: 12 })
+        children: /* @__PURE__ */ o(ue, { size: 12 })
       }
     )
   ] });
 }
-function Ar() {
-  return kt("dark");
+function zo({
+  label: e,
+  checked: t,
+  defaultChecked: a,
+  onChange: n,
+  children: i
+}) {
+  const [s, l] = W({
+    value: t,
+    defaultValue: a,
+    finalValue: !1,
+    onChange: n
+  });
+  return /* @__PURE__ */ y(K, { gap: 4, children: [
+    /* @__PURE__ */ o(
+      De,
+      {
+        label: e,
+        checked: s,
+        onChange: (d) => {
+          l(d.currentTarget.checked);
+        }
+      }
+    ),
+    s && /* @__PURE__ */ o(B, { "data-testid": "toggle-with-content-children", pl: "md", children: /* @__PURE__ */ o(K, { gap: 4, children: i }) })
+  ] });
+}
+function yo(e = "dark") {
+  return _t(e);
 }
-const Lr = {
-  xs: Q(4),
-  sm: Q(8),
-  md: Q(16),
-  lg: Q(24),
-  xl: Q(32)
-}, Dr = "0.1.0";
+const So = {
+  xs: ee(4),
+  sm: ee(8),
+  md: ee(16),
+  lg: ee(24),
+  xl: ee(32)
+}, 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 {
-  Cr as CompactColorInput,
-  Sr as ControlGroup,
-  Tr as ControlSection,
-  _r as ControlSubGroup,
-  Wt as DEFAULT_GRADIENT_STOP_COLOR,
-  Ir as EffectToggle,
-  kr as GradientEditor,
-  Lr as MANTINE_SPACING,
-  Be as MAX_ALPHA_HEX,
-  Re as MAX_OPACITY_PERCENT,
-  Vt as POPOUT_GAP,
-  br as POPOUT_NESTED_GAP,
-  xe as POPOUT_Z_INDEX_BASE,
-  Br as Popout,
-  Rr as PopoutManager,
-  vr as SWATCH_COLORS,
-  Xt as SWATCH_COLORS_HEXA,
-  Fr as StatRow,
-  Er as StyleNumberInput,
-  Or as StyleSelect,
-  Dr as VERSION,
-  Dt as compactColors,
-  Lt as compactDarkColors,
-  zr as compactTheme,
-  se as createColorStop,
-  Kt as createDefaultGradientStops,
-  yr as isValidHex,
-  Ee as opacityToAlphaHex,
-  Fe as parseAlphaFromHexa,
-  Pr as parseHexaColor,
-  wr as toHexaColor,
-  Ar as useActualColorScheme
+  wo as COMPACT_SIZING,
+  qn as CompactColorInput,
+  mo as ControlGroup,
+  ho as ControlSection,
+  xo as ControlSubGroup,
+  le as DEFAULT_GRADIENT_STOP_COLOR,
+  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,
+  lo as compactTheme,
+  On as compactThemeOverride,
+  de as createColorStop,
+  Jn as createDefaultGradientStops,
+  uo as isValidHex,
+  Ke as opacityToAlphaHex,
+  Xe as parseAlphaFromHexa,
+  co as parseHexaColor,
+  po as toHexaColor,
+  yo as useActualColorScheme
 };