@graphty/compact-mantine 0.3.0 → 0.5.0

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 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 { 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 = {
+  ...Ae.colors,
+  dark: Gt
+}, Xt = {
+  "--button-height": "24px",
+  "--button-fz": "11px",
+  "--button-padding-x": "8px"
+}, Wt = {
+  "--ai-size": "24px"
+}, Kt = {
+  "--cb-size": "16px",
+  "--cb-icon-size": "12px"
+}, Zt = {
+  Button: tt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: Xt
+    })
   }),
-  ActionIcon: D.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--ai-size": "24px"
-      }
-    } : { root: {} }
+  ActionIcon: L.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "subtle"
+    },
+    vars: () => ({
+      root: Wt
+    })
   }),
-  CloseButton: Ge.extend({
+  CloseButton: Be.extend({
     defaultProps: {
-      size: "compact"
+      size: "xs"
     },
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--cb-size": "16px",
-        "--cb-icon-size": "12px"
-      }
-    } : { root: {} }
+    vars: () => ({
+      root: Kt
+    })
   })
-}, 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"
+}, Se = {
+  "--slider-size": "4px",
+  "--slider-thumb-size": "12px"
+}, Qt = {
+  "--sc-font-size": "10px",
+  "--sc-padding": "4px 8px"
+}, eo = {
+  backgroundColor: "transparent"
+}, to = {
+  backgroundColor: "var(--mantine-color-dark-6)"
+}, ae = {
+  fontSize: 11
+}, we = {
+  fontSize: 10,
+  marginTop: 2
+}, oo = {
+  SegmentedControl: Fe.extend({
+    defaultProps: {
+      size: "sm",
+      withItemsBorders: !1
+    },
+    vars: () => ({
+      root: Qt
+    }),
+    styles: {
+      root: eo,
+      indicator: to
+    }
   }),
-  Checkbox: ve.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--checkbox-size": "16px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      label: {
-        fontSize: 11
-      }
-    } : {}
+  Checkbox: Ee.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: rt.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: Se
+    }),
+    styles: {
+      markLabel: we
+    }
   }),
-  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: nt.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: Se
+    }),
+    styles: {
+      markLabel: we
+    }
   })
-}, Mt = {
+}, no = {
+  "--badge-height": "14px",
+  "--badge-fz": "9px",
+  "--badge-padding-x": "4px"
+}, ro = {
+  "--avatar-size": "24px"
+}, so = {
+  "--ti-size": "24px"
+}, ao = {
+  "--indicator-size": "8px"
+}, io = {
+  "--kbd-fz": "10px",
+  "--kbd-padding": "2px 4px"
+}, lo = {
+  "--pill-height": "16px",
+  "--pill-fz": "10px"
+}, co = {
   Text: H.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--text-fz": "11px",
-        "--text-lh": "1.2"
-      }
-    } : { root: {} }
+    // 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: dt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: no
+    })
   }),
-  Pill: et.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--pill-height": "16px",
-        "--pill-fz": "10px"
-      }
-    } : { root: {} }
+  Pill: ct.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: lo
+    })
   }),
-  Avatar: Qe.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--avatar-size": "24px"
-      }
-    } : { root: {} }
+  Avatar: lt.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: ro
+    })
   }),
-  ThemeIcon: Je.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--ti-size": "24px"
-      }
-    } : { root: {} }
+  ThemeIcon: it.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: so
+    })
   }),
-  Indicator: qe.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--indicator-size": "8px"
-      }
-    } : { root: {} }
+  Indicator: at.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: ao
+    })
   }),
-  Kbd: Ye.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--kbd-fz": "10px",
-        "--kbd-padding": "2px 4px"
-      }
-    } : { root: {} }
+  Kbd: st.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: io
+    })
   })
-}, Nt = {
-  Loader: nt.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--loader-size": "18px"
-      }
-    } : { root: {} }
+}, po = {
+  "--loader-size": "18px"
+}, uo = {
+  "--progress-size": "4px"
+}, fo = {
+  label: {
+    fontSize: 9
+  }
+}, mo = {
+  Loader: ft.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: po
+    })
   }),
-  Progress: ot.extend({
-    vars: (t, e) => e.size === "compact" ? {
-      root: {
-        "--progress-size": "4px"
-      }
-    } : { root: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      label: {
-        fontSize: 9
-      }
-    } : {}
+  Progress: ut.extend({
+    defaultProps: {
+      size: "sm"
+    },
+    vars: () => ({
+      root: uo
+    }),
+    styles: fo
   }),
   // 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: pt.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 = {
+}, Ce = 1e3, j = 1100, go = 8, ln = 4, K = {
+  "--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
+}, ge = {
+  paddingLeft: 8,
+  paddingRight: 8,
+  border: "none",
+  backgroundColor: "var(--mantine-color-default)"
+}, Y = {
+  label: J,
+  input: ge
+}, Ie = {
+  label: J,
+  input: ge
+}, oe = {
   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
+  }
+}, xo = {
+  TextInput: Oe.extend({
+    defaultProps: {
+      size: "sm",
+      variant: "filled"
+    },
+    vars: () => ({
+      root: {},
+      wrapper: K
+    }),
+    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",
+        ...K,
         "--input-right-section-width": "24px"
       },
       controls: {
         "--ni-chevron-size": "10px"
       }
-    } : { root: {}, wrapper: {}, controls: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
+    }),
+    styles: {
+      label: J,
+      input: ge,
       control: {
         borderColor: "transparent"
       }
-    } : {}
+    }
   }),
-  Select: we.extend({
+  Select: Ve.extend({
     defaultProps: {
-      comboboxProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: j }
     },
-    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
-    styles: (t, e) => e.size === "compact" ? {
-      ...B,
-      ...re
-    } : {}
+    vars: () => ({
+      root: {},
+      wrapper: K
+    }),
+    styles: {
+      ...Y,
+      ...oe
+    }
   }),
-  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: K
+    }),
+    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: Pt.extend({
     defaultProps: {
-      popoverProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: j }
     },
-    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: K
+    }),
+    styles: {
+      ...Y,
+      ...oe
+    }
   }),
-  MultiSelect: ut.extend({
+  MultiSelect: bt.extend({
     defaultProps: {
-      comboboxProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: j }
     },
-    vars: (t, e) => e.size === "compact" ? {
+    vars: () => ({
       root: {},
       wrapper: {
-        "--input-fz": "11px",
-        "--input-bg": "var(--mantine-color-default)",
-        "--input-bd": "none",
-        "--input-size": "24px",
+        ...K,
         "--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,
+      ...oe,
+      ...ie,
       inputField: {
         minWidth: 60,
         flexBasis: 60
-      },
-      pillsList: {
-        columnGap: 4,
-        rowGap: 2
-      },
-      pill: {
-        margin: 0,
-        paddingTop: 2,
-        paddingBottom: 2
       }
-    } : {}
+    }
   }),
-  TagsInput: ct.extend({
+  TagsInput: vt.extend({
     defaultProps: {
-      comboboxProps: { zIndex: V }
+      size: "sm",
+      variant: "filled",
+      comboboxProps: { zIndex: j }
     },
-    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,
+      ...oe,
+      ...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: 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,
-      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: K
+    }),
+    styles: Y
   }),
-  JsonInput: at.extend({
-    vars: (t, e) => e.size === "compact" ? {
+  JsonInput: gt.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({
+}, ho = {
+  "--pagination-control-size": "24px",
+  "--pagination-control-fz": "11px"
+}, vo = {
+  "--stepper-icon-size": "24px",
+  "--stepper-fz": "11px",
+  "--stepper-spacing": "8px"
+}, bo = {
+  "--burger-size": "18px",
+  "--burger-line-size": "2px"
+}, Po = {
+  root: {
+    fontSize: 11
+  }
+}, zo = {
+  root: {
+    fontSize: 11,
+    minHeight: 28
+  },
+  label: {
+    fontSize: 11
+  }
+}, yo = {
+  tab: {
+    fontSize: 11,
+    padding: "6px 10px"
+  }
+}, So = {
+  Anchor: kt.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    styles: Po
   }),
-  Tooltip: Pt.extend({
+  Burger: Tt.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    vars: () => ({
+      root: bo
+    })
+  }),
+  NavLink: It.extend({
+    // NavLink does not have a size prop, only styles for compact appearance
+    styles: zo
   }),
-  Popover: oe.extend({
+  Pagination: Ct.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    vars: () => ({
+      root: ho
+    })
   }),
-  HoverCard: vt.extend({
+  Stepper: wt.extend({
     defaultProps: {
-      zIndex: V
-    }
+      size: "sm"
+    },
+    vars: () => ({
+      root: vo
+    })
+  }),
+  Tabs: St.extend({
+    // Tabs does not have a size prop, only styles for compact appearance
+    styles: yo
   })
-}, 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
+}, wo = {
+  "--menu-item-fz": "11px"
+}, Co = {
+  tooltip: {
+    fontSize: 11,
+    padding: "4px 8px"
   }
-}), 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°" }
-          ]
-        }
-      )
-    ] })
-  ] });
+}, Io = {
+  dropdown: {
+    padding: 8
+  }
+}, To = {
+  dropdown: {
+    padding: 8
+  }
+}, ko = {
+  Menu: Ft.extend({
+    defaultProps: {
+      zIndex: j
+    },
+    vars: () => ({
+      dropdown: wo
+    })
+  }),
+  Tooltip: Et.extend({
+    defaultProps: {
+      zIndex: j
+    },
+    styles: Co
+  }),
+  Popover: Bt.extend({
+    defaultProps: {
+      zIndex: j
+    },
+    styles: Io
+  }),
+  HoverCard: At.extend({
+    defaultProps: {
+      zIndex: j
+    },
+    styles: To
+  })
+}, Ao = {
+  xs: "10px",
+  sm: "11px",
+  // Our compact default
+  md: "13px",
+  lg: "14px",
+  xl: "16px"
+}, Bo = {
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px"
+}, Eo = {
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px"
+}, Fo = Ot({
+  colors: jt,
+  fontSizes: Ao,
+  spacing: Bo,
+  radius: Eo,
+  // 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,
+    ...Zt,
+    ...oo,
+    ...co,
+    ...mo,
+    ...So,
+    ...ko
+  }
+}), cn = Vt(Ae, Fo), dn = ["#5B8FF9", "#FF6B6B", "#61D095", "#F7B731", "#9B59B6"], Vo = [
+  "#5B8FF9FF",
+  "#FF6B6BFF",
+  "#61D095FF",
+  "#F7B731FF",
+  "#9B59B6FF",
+  "#5B8FF980",
+  "#FF6B6B80",
+  "#61D09580",
+  "#F7B73180",
+  "#9B59B680"
+], le = "#888888", Ue = 255, Ge = 100;
+function je(e) {
+  return Math.round(parseInt(e, 16) / Ue * Ge);
+}
+function Xe(e) {
+  return Math.round(e / Ge * Ue).toString(16).padStart(2, "0");
+}
+function pn(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 };
+}
+function un(e, t) {
+  const s = e.replace("#", ""), n = Xe(t);
+  return `#${s}${n}`;
 }
-function Yt({ children: t }) {
-  return /* @__PURE__ */ o(A, { p: "sm", children: t });
+function fn(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 qt = [
+const We = me(null);
+function Oo() {
+  return re(We);
+}
+function Do({ children: e }) {
+  const t = $(null);
+  if (!_e(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 });
+}
+function Lo({ children: e }) {
+  return /* @__PURE__ */ r(R, { p: "sm", children: e });
+}
+const Ro = [
   // Mantine portal containers
   "[data-portal]",
   // Combobox/Select dropdowns
@@ -1020,52 +722,52 @@ const qt = [
   // Modal (just in case)
   "[data-modal]"
 ].join(", ");
-function Jt(t, e = !0) {
+function Mo(e, t = !0) {
   U(() => {
-    if (!e)
+    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 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();
     };
-    return document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
+    return document.addEventListener("mousedown", s), () => {
+      document.removeEventListener("mousedown", s);
     };
-  }, [t, e]);
+  }, [e, t]);
 }
-function Qt(t, e = !0) {
+function _o(e, t = !0) {
   U(() => {
-    if (!e)
+    if (!t)
       return;
-    const n = (i) => {
-      i.key === "Escape" && (i.preventDefault(), t());
+    const s = (n) => {
+      n.key === "Escape" && (n.preventDefault(), e());
     };
-    return document.addEventListener("keydown", n), () => {
-      document.removeEventListener("keydown", n);
+    return document.addEventListener("keydown", s), () => {
+      document.removeEventListener("keydown", s);
     };
-  }, [t, e]);
+  }, [e, t]);
 }
-const pe = Ie(null), Oe = Ie(null);
-function Ae() {
-  const t = ue(pe);
-  if (!t)
+const xe = me(null), Ke = me(null);
+function he() {
+  const e = re(xe);
+  if (!e)
     throw new Error("usePopoutContext must be used within a Popout component");
-  return t;
+  return e;
 }
-function er() {
-  return ue(pe);
+function Ho() {
+  return re(xe);
 }
-function tr() {
-  const t = ue(Oe);
-  if (!t)
+function No() {
+  const e = re(Ke);
+  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 $o({ children: e, parentId: t = null }) {
+  const s = $e(), [n, a] = _(!1), o = $(null), i = Ne(
     () => ({
-      id: n,
-      isOpen: i,
+      id: s,
+      isOpen: n,
       open: () => {
         a(!0);
       },
@@ -1075,173 +777,173 @@ function rr({ children: t, parentId: e = null }) {
       toggle: () => {
         a((c) => !c);
       },
-      triggerRef: r,
-      parentId: e
+      triggerRef: o,
+      parentId: t
     }),
-    [n, i, e]
+    [s, n, t]
   );
-  return /* @__PURE__ */ o(pe.Provider, { value: s, children: t });
+  return /* @__PURE__ */ r(xe.Provider, { value: i, 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);
+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;
             }
-            y = Y ?? null;
+            D = I ?? null;
           }
         }
-        for (const k of E.reverse())
-          (w = a.current.get(k)) == null || w();
-        (M = a.current.get(d)) == null || M();
+        for (const O of M.reverse())
+          (y = a.current.get(O)) == null || y();
+        (N = a.current.get(B)) == null || N();
       }
-      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)
+      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;
-          k = y ?? null;
+          O = D ?? null;
         }
         return !1;
-      })), p], a.current.set(p, m), r.current.set(p, P ?? null), c((d) => d + 1);
+      })), p], a.current.set(p, m), o.current.set(p, P ?? null), c((B) => B + 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),
+  }, []), 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((w) => w + 1));
-  }, []), u = T((p) => r.current.get(p) ?? null, []), f = T((p, m) => {
+    ], c((y) => y + 1));
+  }, []), d = w((p) => o.current.get(p) ?? null, []), h = w((p, m) => {
     let P = m;
     for (; P; ) {
-      const w = r.current.get(P);
-      if (w === p)
+      const y = o.current.get(P);
+      if (y === p)
         return !0;
-      P = w ?? null;
+      P = y ?? null;
     }
     return !1;
-  }, []), F = T((p) => {
-    const m = [], P = i.current;
-    for (const w of P)
-      f(p, w) && m.push(w);
+  }, []), F = w((p) => {
+    const m = [], P = n.current;
+    for (const y of P)
+      h(p, y) && m.push(y);
     return m;
-  }, [f]), l = T((p) => {
+  }, [h]), l = w((p) => {
     const m = F(p);
     for (const P of [...m].reverse()) {
-      const w = a.current.get(P);
-      w == null || w();
+      const y = a.current.get(P);
+      y == null || y();
     }
-  }, [F]), x = T((p) => {
+  }, [F]), g = w((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)
+  }, [l]), b = w((p, m) => {
+    const P = n.current;
+    for (const y of P) {
+      if (y === p)
         continue;
-      r.current.get(w) === m && x(w);
+      o.current.get(y) === m && g(y);
     }
-  }, [x]), _ = T(() => {
-    const p = i.current;
+  }, [g]), C = w(() => {
+    const p = n.current;
     if (p.length === 0)
       return;
     const m = p[p.length - 1], P = a.current.get(m);
     P == null || P();
-  }, []), O = T(() => {
-    const p = [...i.current];
+  }, []), A = w(() => {
+    const p = [...n.current];
     for (const m of p) {
       const P = a.current.get(m);
       P == null || P();
     }
-  }, []), I = T(() => i.current.length > 0, []), [$, j] = L(!1);
+  }, []), T = w(() => n.current.length > 0, []), [X, G] = _(!1);
   U(() => {
-    j(i.current.length > 0);
-  }, [s]), Qt(_, $), Jt(O, $);
-  const q = _e(
+    G(n.current.length > 0);
+  }, [i]), _o(C, X), Mo(A, X);
+  const Q = Ne(
     () => ({
-      register: g,
-      unregister: b,
-      getZIndex: z,
-      bringToFront: h,
-      portalContainer: e,
-      zIndexVersion: s,
-      closeFocused: _,
-      closeAll: O,
-      hasOpenPopouts: I,
-      closeWithDescendants: x,
+      register: u,
+      unregister: x,
+      getZIndex: v,
+      bringToFront: f,
+      portalContainer: t,
+      zIndexVersion: i,
+      closeFocused: C,
+      closeAll: A,
+      hasOpenPopouts: T,
+      closeWithDescendants: g,
       closeDescendants: l,
-      closeSiblings: v,
-      getParentId: u,
-      isAncestor: f
+      closeSiblings: b,
+      getParentId: d,
+      isAncestor: h
     }),
-    [g, b, z, h, e, s, _, O, I, x, l, v, u, f]
+    [u, x, v, f, t, i, C, A, T, g, l, b, d, h]
   );
-  return /* @__PURE__ */ S(Oe.Provider, { value: q, children: [
-    t,
-    /* @__PURE__ */ o("div", { ref: n, "data-popout-portal-container": !0 })
+  return /* @__PURE__ */ S(Ke.Provider, { value: Q, children: [
+    e,
+    /* @__PURE__ */ r("div", { ref: s, "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 Go(e) {
+  const { isOpen: t, onDragStart: s } = e, [n, a] = _({ left: 0, top: 0 }), o = $(!1), i = $({
     x: 0,
     y: 0,
     offsetLeft: 0,
     offsetTop: 0
-  }), c = T(() => {
+  }), c = w(() => {
     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));
+  }, []), 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,
+        offsetLeft: n.left,
+        offsetTop: n.top
+      }, s == null || s(), f.target.setPointerCapture(f.pointerId));
     },
-    [i.left, i.top, n]
-  ), b = T((h) => {
-    if (!r.current)
+    [n.left, n.top, s]
+  ), x = w((f) => {
+    if (!o.current)
       return;
-    const u = h.clientX - s.current.x, f = h.clientY - s.current.y;
+    const d = f.clientX - i.current.x, h = f.clientY - i.current.y;
     a({
-      left: s.current.offsetLeft + u,
-      top: s.current.offsetTop + f
+      left: i.current.offsetLeft + d,
+      top: i.current.offsetTop + h
     });
-  }, []), z = T((h) => {
-    r.current && (r.current = !1, h.target.releasePointerCapture(h.pointerId));
+  }, []), v = w((f) => {
+    o.current && (o.current = !1, f.target.releasePointerCapture(f.pointerId));
   }, []);
-  return e ? {
+  return t ? {
     dragTriggerProps: {
       "data-drag-trigger": !0,
-      onPointerDown: g,
-      onPointerMove: b,
-      onPointerUp: z,
+      onPointerDown: u,
+      onPointerMove: x,
+      onPointerUp: v,
       style: {
         cursor: "grab",
         userSelect: "none",
         touchAction: "none"
       }
     },
-    dragOffset: i,
+    dragOffset: n,
     resetDragOffset: c
   } : {
     dragTriggerProps: {},
@@ -1249,263 +951,194 @@ function nr(t) {
     resetDragOffset: c
   };
 }
-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 = [],
+function jo({
+  config: e,
+  onClose: t,
+  dragTriggerProps: s = {},
+  actions: n = [],
   activeTab: a,
-  onTabChange: r,
-  titleId: s
+  onTabChange: o,
+  titleId: i
 }) {
-  var u;
-  const { style: c, ...g } = n, z = t.variant === "tabs" ? t : null, h = (f) => {
-    r && r(f);
-  };
+  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
+  }))) ?? [];
   return /* @__PURE__ */ S(
-    R,
+    E,
     {
       justify: "space-between",
       px: "sm",
       py: "xs",
-      ...g,
+      ...u,
       style: {
         ...c
       },
       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__ */ 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,
             {
-              id: f.id,
-              label: f.label,
-              isActive: a === f.id,
-              onClick: () => {
-                h(f.id);
-              }
-            },
-            f.id
-          ))
+              data: f,
+              value: a,
+              onChange: (h) => o == null ? void 0 : o(h),
+              size: "xs"
+            }
+          )
         ] }),
-        /* @__PURE__ */ S(R, { gap: 4, children: [
-          i.map((f) => /* @__PURE__ */ o(
-            D,
+        /* @__PURE__ */ S(E, { gap: 4, children: [
+          n.map((h) => /* @__PURE__ */ r(
+            L,
             {
               variant: "subtle",
-              size: "compact",
-              onClick: f.onClick,
-              "aria-label": f.label,
-              children: f.icon
+              onClick: h.onClick,
+              "aria-label": h.label,
+              children: h.icon
             },
-            f.id
+            h.id
           )),
-          /* @__PURE__ */ o(D, { variant: "subtle", size: "compact", onClick: e, "aria-label": "Close panel", children: /* @__PURE__ */ o(ne, { size: 14 }) })
+          /* @__PURE__ */ r(Be, { 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;
+function Xo(e, t, s = go, n = {}) {
+  const { placement: a = "left", alignment: o = "start", panelHeight: i = 0 } = n;
+  let c, u;
   switch (a) {
     case "left":
-      c = t.left - e - n, g = be(t, r, s);
+      c = e.left - t - s, u = Te(e, o, i);
       break;
     case "right":
-      c = t.right + n, g = be(t, r, s);
+      c = e.right + s, u = Te(e, o, i);
       break;
     case "top":
-      c = ze(t, r, e), g = t.top - s - n;
+      c = ke(e, o, t), u = e.top - i - s;
       break;
     case "bottom":
-      c = ze(t, r, e), g = t.bottom + n;
+      c = ke(e, o, t), u = e.bottom + s;
       break;
     default: {
-      const b = a;
-      throw new Error(`Unknown placement: ${String(b)}`);
+      const x = a;
+      throw new Error(`Unknown placement: ${String(x)}`);
     }
   }
-  return { left: c, top: g };
+  return { left: c, top: u };
 }
-function be(t, e, n) {
-  switch (e) {
+function Te(e, t, s) {
+  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 - s / 2;
     case "end":
-      return t.bottom - n;
+      return e.bottom - s;
     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 ke(e, t, s) {
+  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 - s / 2;
     case "end":
-      return t.right - n;
+      return e.right - s;
     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,
+function Wo({
+  width: e,
+  height: t,
+  header: s,
+  children: n,
   anchorRef: a,
-  placement: r = "left",
-  alignment: s = "start",
+  placement: o = "left",
+  alignment: i = "start",
   gap: c = 0,
-  actions: g
+  actions: u
 }) {
-  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 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);
     },
-    [y]
-  ), De = T(
-    (C) => {
-      C.stopPropagation(), $(u), _(u);
+    [I]
+  ), qe = w(
+    (k) => {
+      k.stopPropagation(), X(d), C(d);
     },
-    [$, _, 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
+    [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,
+          panelHeight: t
         });
-        P(Ue), w.current || (E(), k && fe(Y));
+        y(et), N.current || (O(), D && 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();
+    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();
       }, 0);
       return () => {
-        clearTimeout(C);
+        clearTimeout(k);
       };
-    } else !b && h.current && h.current.focus();
-  }, [b, h]), !b || !l || !m)
+    } else !x && f.current && f.current.focus();
+  }, [x, f]), !x || !l || !P)
     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 Je = F(d), Pe = {
+    left: P.left + M.left,
+    top: P.top + M.top
+  }, Qe = /* @__PURE__ */ S(
+    Dt,
     {
-      ref: M,
-      id: q,
+      ref: z,
+      id: p,
       role: "dialog",
       "aria-modal": "false",
-      "aria-labelledby": p,
+      "aria-labelledby": m,
       tabIndex: -1,
-      radius: ie ? 0 : 8,
-      onClick: De,
-      "data-popout-id": u,
-      ...f && { "data-parent-id": f },
+      radius: 8,
+      onClick: qe,
+      "data-popout-id": d,
+      ...h && { "data-parent-id": h },
       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: Je,
         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))",
@@ -1519,120 +1152,505 @@ function lr({
         outline: "none"
       },
       children: [
-        /* @__PURE__ */ o(
-          ar,
+        /* @__PURE__ */ r(
+          jo,
           {
-            config: n,
-            onClose: $e,
-            dragTriggerProps: N,
-            activeTab: de,
-            onTabChange: Le,
-            actions: g,
-            titleId: p
+            config: s,
+            onClose: Ye,
+            dragTriggerProps: B,
+            activeTab: ve,
+            onTabChange: Ze,
+            actions: u,
+            titleId: m
           }
         ),
-        /* @__PURE__ */ o(A, { children: k ? (he = y == null ? void 0 : y.tabs.find((C) => C.id === de)) == null ? void 0 : he.content : i })
+        /* @__PURE__ */ r(R, { children: D ? (ye = I == null ? void 0 : I.tabs.find((k) => k.id === ve)) == null ? void 0 : ye.content : n })
       ]
     }
   );
-  return At(Ve, l);
+  return Ut(Qe, l);
 }
-function cr({ children: t }) {
-  const { toggle: e, triggerRef: n, isOpen: i, id: a } = Ae(), r = T(
-    (g) => {
-      g.stopPropagation(), e();
+function Ko({ children: e }) {
+  const { toggle: t, triggerRef: s, isOpen: n, id: a } = he(), o = w(
+    (u) => {
+      u.stopPropagation(), t();
     },
-    [e]
+    [t]
   );
-  if (!Et(t))
+  if (!_e(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 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);
     },
-    ref: n,
+    ref: s,
     // 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": i,
     "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 Zo({ children: e }) {
+  const t = Ho(), s = (t == null ? void 0 : t.id) ?? null;
+  return /* @__PURE__ */ r($o, { parentId: s, 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,
+      {
+        ref: a,
+        variant: o ? "light" : "subtle",
+        size: s,
+        c: o ? void 0 : "dimmed",
+        ...n,
+        children: t
+      }
+    );
+  }
+);
+function gn({ children: e }) {
+  return /* @__PURE__ */ r(Uo, { children: e });
+}
+function qo({
+  color: e,
+  defaultColor: t,
+  opacity: s,
+  defaultOpacity: n = 100,
+  onColorChange: a,
+  onOpacityChange: o,
+  label: i,
+  showOpacity: c = !0
+}) {
+  const [u, x] = q({
+    value: e,
+    defaultValue: void 0,
+    finalValue: void 0,
+    onChange: a
+  }), [v, f] = q({
+    value: s,
+    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);
+    } 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);
+    else {
+      const V = Math.min(100, Math.max(0, z));
+      V !== g && f(V);
+    }
+  }, 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,
+          {
+            variant: "filled",
+            size: 24,
+            radius: 0,
+            style: {
+              backgroundColor: "var(--mantine-color-default)",
+              borderRadius: "4px 0 0 4px"
+            },
+            "aria-label": "Color swatch",
+            children: /* @__PURE__ */ r(
+              Lt,
+              {
+                color: l,
+                size: 14,
+                radius: 2,
+                style: {
+                  border: "1px solid var(--mantine-color-default-border)"
+                }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          ne.Panel,
+          {
+            width: 220,
+            header: { variant: "title", title: i ?? "Color" },
+            placement: "bottom",
+            alignment: "start",
+            gap: 4,
+            children: /* @__PURE__ */ r(ne.Content, { children: /* @__PURE__ */ r(
+              Rt,
+              {
+                format: "hexa",
+                value: G(),
+                onChange: X,
+                swatches: [...Vo]
+              }
+            ) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(
+        Oe,
+        {
+          value: b,
+          onChange: Q,
+          onBlur: p,
+          "aria-label": "Color hex value",
+          "data-is-default": d ? "true" : "false",
+          w: 72,
+          styles: {
+            input: {
+              borderRadius: c ? 0 : "0 4px 4px 0",
+              fontFamily: "monospace",
+              textTransform: "uppercase",
+              ...d ? {
+                fontStyle: "italic",
+                color: "var(--mantine-color-dimmed)"
+              } : {}
+            }
+          }
+        }
+      ),
+      c && /* @__PURE__ */ S(Le, { children: [
+        /* @__PURE__ */ r(
+          R,
+          {
+            style: {
+              width: 1,
+              height: 24,
+              backgroundColor: "var(--mantine-color-default-border)"
+            }
+          }
+        ),
+        /* @__PURE__ */ r(
+          pe,
+          {
+            value: A,
+            onChange: m,
+            onBlur: P,
+            min: 0,
+            max: 100,
+            hideControls: !0,
+            suffix: "%",
+            "aria-label": "Opacity",
+            "data-is-default": h ? "true" : "false",
+            w: 54,
+            styles: {
+              input: {
+                borderRadius: "0 4px 4px 0",
+                textAlign: "right",
+                ...h ? {
+                  fontStyle: "italic",
+                  color: "var(--mantine-color-dimmed)"
+                } : {}
+              }
+            }
+          }
+        )
+      ] })
+    ] }),
+    !F && /* @__PURE__ */ r(
+      L,
+      {
+        variant: "subtle",
+        size: "xs",
+        c: "dimmed",
+        "aria-label": `Reset ${i ?? "color"} to default`,
+        onClick: y,
+        children: /* @__PURE__ */ r(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;
+}
+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 })
+    ] }),
+    /* @__PURE__ */ r(Z, { gap: 0, px: 8, children: s })
+  ] });
+}
+function hn({
+  label: e,
+  defaultOpen: t = !0,
+  children: s,
+  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 }) })
+  ] });
+}
+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 Yo() {
+  return crypto.randomUUID().slice(0, 8);
+}
+function de(e, t) {
+  return {
+    id: Yo(),
+    offset: e,
+    color: t
+  };
+}
+function Jo() {
+  return [de(0, "#6366F1"), de(1, "#06B6D4")];
 }
-const Br = Object.assign(ur, {
-  Trigger: cr,
-  Panel: lr,
-  Content: Yt
-});
-function Rr({ children: t }) {
-  return /* @__PURE__ */ o(or, { children: t });
+function bn({
+  stops: e,
+  defaultStops: t,
+  direction: s,
+  defaultDirection: n = 0,
+  showDirection: a = !0,
+  onChange: o
+}) {
+  const [i, c] = q({
+    value: e,
+    defaultValue: t,
+    finalValue: Jo(),
+    onChange: (l) => o == null ? void 0 : o(l, u)
+  }), [u, x] = q({
+    value: s,
+    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)
+      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)
+      return;
+    const g = i.filter((b, C) => C !== l);
+    c(g), o == null || o(g, u);
+  };
+  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,
+        {
+          variant: "subtle",
+          color: "gray",
+          onClick: h,
+          disabled: i.length >= 5,
+          "aria-label": "Add color stop",
+          children: /* @__PURE__ */ r(Ht, { size: 12 })
+        }
+      )
+    ] }),
+    i.map((l, g) => /* @__PURE__ */ S(E, { gap: "xs", align: "flex-end", children: [
+      /* @__PURE__ */ r(
+        qo,
+        {
+          color: l.color,
+          defaultColor: le,
+          onColorChange: (b) => {
+            v(g, b ?? le);
+          },
+          showOpacity: !1
+        }
+      ),
+      /* @__PURE__ */ r(R, { style: { width: "80px" }, children: /* @__PURE__ */ r(
+        ce,
+        {
+          min: 0,
+          max: 100,
+          value: l.offset * 100,
+          onChange: (b) => {
+            f(g, b);
+          },
+          label: (b) => `${Math.round(b)}%`,
+          "aria-label": `Stop ${g + 1} position`
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        L,
+        {
+          variant: "subtle",
+          color: "gray",
+          onClick: () => {
+            F(g);
+          },
+          disabled: i.length <= 2,
+          "aria-label": `Remove color stop ${g + 1}`,
+          children: /* @__PURE__ */ r(Nt, { size: 12 })
+        }
+      )
+    ] }, l.id)),
+    a && /* @__PURE__ */ S(R, { pb: "md", children: [
+      /* @__PURE__ */ r(H, { size: "xs", c: "dimmed", mb: 4, children: "Direction" }),
+      /* @__PURE__ */ r(
+        ce,
+        {
+          min: 0,
+          max: 360,
+          value: u,
+          onChange: d,
+          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°" }
+          ]
+        }
+      )
+    ] })
+  ] });
 }
-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 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 Er({
-  label: t,
-  value: e,
-  defaultValue: n,
-  onChange: i,
+function zn({
+  label: e,
+  value: t,
+  defaultValue: s,
+  onChange: n,
   min: a,
-  max: r,
-  step: s,
+  max: o,
+  step: i,
   decimalScale: c,
-  suffix: g,
-  hideControls: b = !0
+  suffix: u,
+  hideControls: x = !0
 }) {
-  const [z, h] = Z({
-    value: e,
+  const [v, f] = q({
+    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);
+    onChange: n
+  }), d = v === void 0, h = v ?? s, [F, l] = _(h);
   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);
+    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);
     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 = A;
+      a !== void 0 && T < a && (T = a), o !== void 0 && T > o && (T = o), T !== v && f(T), l(T);
     }
-  }, _ = () => {
-    h(void 0);
+  }, C = () => {
+    f(void 0);
   };
-  return /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
-    /* @__PURE__ */ o(
-      le,
+  return /* @__PURE__ */ S(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+    /* @__PURE__ */ r(
+      pe,
       {
-        label: t,
-        "aria-label": t,
+        label: e,
+        "aria-label": e,
         value: F,
-        onChange: x,
-        onBlur: v,
+        onChange: g,
+        onBlur: b,
         min: a,
-        max: r,
-        step: s,
+        max: o,
+        step: i,
         decimalScale: c,
-        suffix: g,
-        hideControls: b,
-        size: "compact",
-        "data-is-default": u ? "true" : "false",
+        suffix: u,
+        hideControls: x,
+        "data-is-default": d ? "true" : "false",
         styles: {
-          input: u ? {
+          input: d ? {
             fontStyle: "italic",
             color: "var(--mantine-color-dimmed)"
           } : void 0
@@ -1640,43 +1658,42 @@ function Er({
         style: { flex: 1 }
       }
     ),
-    !u && /* @__PURE__ */ o(
-      D,
+    !d && /* @__PURE__ */ r(
+      L,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
-        "aria-label": `Reset ${t} to default`,
-        onClick: _,
+        "aria-label": `Reset ${e} to default`,
+        onClick: C,
         style: { marginBottom: 2 },
-        children: /* @__PURE__ */ o(ne, { size: 12 })
+        children: /* @__PURE__ */ r(ue, { size: 12 })
       }
     )
   ] });
 }
-function Or({ label: t, value: e, defaultValue: n, options: i, onChange: a }) {
-  const [r, s] = Z({
-    value: e,
+function yn({ label: e, value: t, defaultValue: s, options: n, onChange: a }) {
+  const [o, i] = q({
+    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);
+  }), c = o === void 0, u = o ?? s, x = (f) => {
+    f !== null && i(f);
+  }, v = () => {
+    i(void 0);
   };
-  return /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
-    /* @__PURE__ */ o(
-      we,
+  return /* @__PURE__ */ S(E, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+    /* @__PURE__ */ r(
+      Ve,
       {
-        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: u,
+        onChange: x,
+        data: n,
+        rightSection: /* @__PURE__ */ r(fe, { size: 14 }),
         rightSectionPointerEvents: "none",
         "data-is-default": c ? "true" : "false",
         allowDeselect: !1,
@@ -1689,61 +1706,90 @@ function Or({ label: t, value: e, defaultValue: n, options: i, onChange: a }) {
         style: { flex: 1 }
       }
     ),
-    !c && /* @__PURE__ */ o(
-      D,
+    !c && /* @__PURE__ */ r(
+      L,
       {
         variant: "subtle",
         size: "xs",
         c: "dimmed",
-        "aria-label": `Reset ${t} to default`,
-        onClick: z,
+        "aria-label": `Reset ${e} to default`,
+        onClick: v,
         style: { marginBottom: 2 },
-        children: /* @__PURE__ */ o(ne, { size: 12 })
+        children: /* @__PURE__ */ r(ue, { size: 12 })
       }
     )
   ] });
 }
-function Ar() {
-  return kt("dark");
+function Sn({
+  label: e,
+  checked: t,
+  defaultChecked: s,
+  onChange: n,
+  children: a
+}) {
+  const [o, i] = q({
+    value: t,
+    defaultValue: s,
+    finalValue: !1,
+    onChange: n
+  });
+  return /* @__PURE__ */ S(Z, { gap: 4, children: [
+    /* @__PURE__ */ r(
+      Ee,
+      {
+        label: e,
+        checked: o,
+        onChange: (c) => {
+          i(c.currentTarget.checked);
+        }
+      }
+    ),
+    o && /* @__PURE__ */ r(R, { "data-testid": "toggle-with-content-children", pl: "md", children: /* @__PURE__ */ r(Z, { gap: 4, children: a }) })
+  ] });
+}
+function wn() {
+  return _t("dark");
 }
-const Lr = {
-  xs: Q(4),
-  sm: Q(8),
-  md: Q(16),
-  lg: Q(24),
-  xl: Q(32)
-}, Dr = "0.1.0";
+const Cn = {
+  xs: ee(4),
+  sm: ee(8),
+  md: ee(16),
+  lg: ee(24),
+  xl: ee(32)
+}, In = "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
+  qo as CompactColorInput,
+  xn as ControlGroup,
+  hn as ControlSection,
+  vn 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,
+  jt as compactColors,
+  Gt as compactDarkColors,
+  cn as compactTheme,
+  Fo 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
 };