@graphty/compact-mantine 0.0.1 → 0.3.0

package/dist/index.js

@@ -0,0 +1,1749 @@
+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 = [
+  "#d5d7da",
+  // 0 - lightest (light mode text)
+  "#a3a8b1",
+  // 1
+  "#7a828e",
+  // 2 - dimmed text
+  "#5f6873",
+  // 3
+  "#48525c",
+  // 4
+  "#374047",
+  // 5
+  "#2a3035",
+  // 6 - input background
+  "#1f2428",
+  // 7
+  "#161b22",
+  // 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: {} }
+  }),
+  ActionIcon: D.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--ai-size": "24px"
+      }
+    } : { root: {} }
+  }),
+  CloseButton: Ge.extend({
+    defaultProps: {
+      size: "compact"
+    },
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--cb-size": "16px",
+        "--cb-icon-size": "12px"
+      }
+    } : { root: {} }
+  })
+}, Ht = {
+  SegmentedControl: Ke.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--sc-font-size": "10px",
+        "--sc-padding": "4px 8px"
+      }
+    } : { root: {} }
+  }),
+  Checkbox: ve.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--checkbox-size": "16px"
+      }
+    } : { root: {} },
+    styles: (t, e) => e.size === "compact" ? {
+      label: {
+        fontSize: 11
+      }
+    } : {}
+  }),
+  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
+      }
+    } : {}
+  }),
+  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
+      }
+    } : {}
+  }),
+  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
+      }
+    } : {}
+  }),
+  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
+      }
+    } : {}
+  })
+}, Mt = {
+  Text: H.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--text-fz": "11px",
+        "--text-lh": "1.2"
+      }
+    } : { root: {} }
+  }),
+  Badge: tt.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--badge-height": "14px",
+        "--badge-fz": "9px",
+        "--badge-padding-x": "4px"
+      }
+    } : { root: {} }
+  }),
+  Pill: et.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--pill-height": "16px",
+        "--pill-fz": "10px"
+      }
+    } : { root: {} }
+  }),
+  Avatar: Qe.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--avatar-size": "24px"
+      }
+    } : { root: {} }
+  }),
+  ThemeIcon: Je.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--ti-size": "24px"
+      }
+    } : { root: {} }
+  }),
+  Indicator: qe.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--indicator-size": "8px"
+      }
+    } : { root: {} }
+  }),
+  Kbd: Ye.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--kbd-fz": "10px",
+        "--kbd-padding": "2px 4px"
+      }
+    } : { root: {} }
+  })
+}, Nt = {
+  Loader: nt.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--loader-size": "18px"
+      }
+    } : { root: {} }
+  }),
+  Progress: ot.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {
+        "--progress-size": "4px"
+      }
+    } : { root: {} },
+    styles: (t, e) => e.size === "compact" ? {
+      label: {
+        fontSize: 9
+      }
+    } : {}
+  }),
+  // 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: {} })
+  })
+}, 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 = {
+  dropdown: {
+    padding: 4,
+    border: "none",
+    boxShadow: "var(--mantine-shadow-md)"
+  },
+  option: {
+    fontSize: 11,
+    padding: "4px 8px",
+    borderRadius: 4
+  },
+  options: {
+    // No gap between options for compact appearance
+  },
+  groupLabel: {
+    fontSize: 10,
+    padding: "4px 8px"
+  },
+  empty: {
+    fontSize: 11,
+    padding: "8px"
+  }
+}, Ut = {
+  TextInput: ye.extend({
+    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
+    styles: (t, e) => e.size === "compact" ? B : {}
+  }),
+  NumberInput: le.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {},
+      wrapper: {
+        "--input-size": "24px",
+        "--input-fz": "11px",
+        "--input-bg": "var(--mantine-color-default)",
+        "--input-bd": "none",
+        "--input-right-section-width": "24px"
+      },
+      controls: {
+        "--ni-chevron-size": "10px"
+      }
+    } : { root: {}, wrapper: {}, controls: {} },
+    styles: (t, e) => e.size === "compact" ? {
+      ...B,
+      control: {
+        borderColor: "transparent"
+      }
+    } : {}
+  }),
+  Select: we.extend({
+    defaultProps: {
+      comboboxProps: { zIndex: V }
+    },
+    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
+    styles: (t, e) => e.size === "compact" ? {
+      ...B,
+      ...re
+    } : {}
+  }),
+  Textarea: ft.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {},
+      wrapper: {
+        "--input-fz": "11px",
+        "--input-bg": "var(--mantine-color-default)",
+        "--input-bd": "none"
+      }
+    } : { root: {}, wrapper: {} },
+    styles: (t, e) => e.size === "compact" ? B : {}
+  }),
+  PasswordInput: dt.extend({
+    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
+    styles: (t, e) => e.size === "compact" ? {
+      ...B,
+      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({
+    defaultProps: {
+      popoverProps: { zIndex: V }
+    },
+    styles: (t, e) => e.size === "compact" ? {
+      ...B,
+      wrapper: {
+        "--input-size": "24px",
+        "--input-fz": "11px",
+        "--input-bg": "var(--mantine-color-default)",
+        "--input-bd": "none"
+      }
+    } : {}
+  }),
+  MultiSelect: ut.extend({
+    defaultProps: {
+      comboboxProps: { zIndex: V }
+    },
+    vars: (t, e) => e.size === "compact" ? {
+      root: {},
+      wrapper: {
+        "--input-fz": "11px",
+        "--input-bg": "var(--mantine-color-default)",
+        "--input-bd": "none",
+        "--input-size": "24px",
+        "--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
+      },
+      inputField: {
+        minWidth: 60,
+        flexBasis: 60
+      },
+      pillsList: {
+        columnGap: 4,
+        rowGap: 2
+      },
+      pill: {
+        margin: 0,
+        paddingTop: 2,
+        paddingBottom: 2
+      }
+    } : {}
+  }),
+  TagsInput: ct.extend({
+    defaultProps: {
+      comboboxProps: { zIndex: V }
+    },
+    vars: (t, e) => e.size === "compact" ? {
+      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
+      },
+      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" ? {
+      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
+      }
+    } : {}
+  }),
+  FileInput: st.extend({
+    vars: (t, e) => e.size === "compact" ? ee : { root: {}, wrapper: {} },
+    styles: (t, e) => e.size === "compact" ? B : {}
+  }),
+  JsonInput: at.extend({
+    vars: (t, e) => e.size === "compact" ? {
+      root: {},
+      wrapper: {
+        "--input-fz": "11px",
+        "--input-bg": "var(--mantine-color-default)",
+        "--input-bd": "none"
+      }
+    } : { root: {}, wrapper: {} },
+    styles: (t, e) => e.size === "compact" ? B : {}
+  }),
+  InputClearButton: it.extend({
+    defaultProps: {
+      size: "compact"
+    },
+    vars: (t, e) => e.size === "compact" ? {
+      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({
+    defaultProps: {
+      zIndex: V
+    }
+  }),
+  Tooltip: Pt.extend({
+    defaultProps: {
+      zIndex: V
+    }
+  }),
+  Popover: oe.extend({
+    defaultProps: {
+      zIndex: V
+    }
+  }),
+  HoverCard: vt.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°" }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Yt({ children: t }) {
+  return /* @__PURE__ */ o(A, { p: "sm", children: t });
+}
+const qt = [
+  // Mantine portal containers
+  "[data-portal]",
+  // Combobox/Select dropdowns
+  "[data-combobox-dropdown]",
+  // Menu dropdowns
+  "[data-menu-dropdown]",
+  // Popover dropdowns
+  "[data-popover-dropdown]",
+  // Tooltip content
+  "[data-tooltip]",
+  // HoverCard dropdown
+  "[data-hovercard-dropdown]",
+  // DatePicker dropdowns
+  "[data-dates-dropdown]",
+  // Modal (just in case)
+  "[data-modal]"
+].join(", ");
+function Jt(t, e = !0) {
+  U(() => {
+    if (!e)
+      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();
+    };
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [t, e]);
+}
+function Qt(t, e = !0) {
+  U(() => {
+    if (!e)
+      return;
+    const n = (i) => {
+      i.key === "Escape" && (i.preventDefault(), t());
+    };
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, [t, e]);
+}
+const pe = Ie(null), Oe = Ie(null);
+function Ae() {
+  const t = ue(pe);
+  if (!t)
+    throw new Error("usePopoutContext must be used within a Popout component");
+  return t;
+}
+function er() {
+  return ue(pe);
+}
+function tr() {
+  const t = ue(Oe);
+  if (!t)
+    throw new Error("usePopoutManagerContext must be used within a PopoutManager");
+  return t;
+}
+function rr({ children: t, parentId: e = null }) {
+  const n = ke(), [i, a] = L(!1), r = G(null), s = _e(
+    () => ({
+      id: n,
+      isOpen: i,
+      open: () => {
+        a(!0);
+      },
+      close: () => {
+        a(!1);
+      },
+      toggle: () => {
+        a((c) => !c);
+      },
+      triggerRef: r,
+      parentId: e
+    }),
+    [n, i, e]
+  );
+  return /* @__PURE__ */ o(pe.Provider, { value: s, children: t });
+}
+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;
+          }
+        }
+        for (const k of E.reverse())
+          (w = a.current.get(k)) == null || w();
+        (M = a.current.get(d)) == null || M();
+      }
+      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 !0;
+      P = w ?? 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();
+    }
+  }, [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)
+        continue;
+      r.current.get(w) === m && x(w);
+    }
+  }, [x]), _ = T(() => {
+    const p = i.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];
+    for (const m of p) {
+      const P = a.current.get(m);
+      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(
+    () => ({
+      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
+    }),
+    [g, b, z, h, e, s, _, O, I, x, l, v, u, f]
+  );
+  return /* @__PURE__ */ S(Oe.Provider, { value: q, children: [
+    t,
+    /* @__PURE__ */ o("div", { ref: n, "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({
+    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));
+    },
+    [i.left, i.top, n]
+  ), b = T((h) => {
+    if (!r.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
+    });
+  }, []), z = T((h) => {
+    r.current && (r.current = !1, h.target.releasePointerCapture(h.pointerId));
+  }, []);
+  return e ? {
+    dragTriggerProps: {
+      "data-drag-trigger": !0,
+      onPointerDown: g,
+      onPointerMove: b,
+      onPointerUp: z,
+      style: {
+        cursor: "grab",
+        userSelect: "none",
+        touchAction: "none"
+      }
+    },
+    dragOffset: i,
+    resetDragOffset: c
+  } : {
+    dragTriggerProps: {},
+    dragOffset: { left: 0, top: 0 },
+    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 = [],
+  activeTab: a,
+  onTabChange: r,
+  titleId: s
+}) {
+  var u;
+  const { style: c, ...g } = n, z = t.variant === "tabs" ? t : null, h = (f) => {
+    r && r(f);
+  };
+  return /* @__PURE__ */ S(
+    R,
+    {
+      justify: "space-between",
+      px: "sm",
+      py: "xs",
+      ...g,
+      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,
+            {
+              id: f.id,
+              label: f.label,
+              isActive: a === f.id,
+              onClick: () => {
+                h(f.id);
+              }
+            },
+            f.id
+          ))
+        ] }),
+        /* @__PURE__ */ S(R, { gap: 4, children: [
+          i.map((f) => /* @__PURE__ */ o(
+            D,
+            {
+              variant: "subtle",
+              size: "compact",
+              onClick: f.onClick,
+              "aria-label": f.label,
+              children: f.icon
+            },
+            f.id
+          )),
+          /* @__PURE__ */ o(D, { variant: "subtle", size: "compact", onClick: e, "aria-label": "Close panel", children: /* @__PURE__ */ o(ne, { size: 14 }) })
+        ] })
+      ]
+    }
+  );
+}
+function sr(t, e, n = Vt, i = {}) {
+  const { placement: a = "left", alignment: r = "start", panelHeight: s = 0 } = i;
+  let c, g;
+  switch (a) {
+    case "left":
+      c = t.left - e - n, g = be(t, r, s);
+      break;
+    case "right":
+      c = t.right + n, g = be(t, r, s);
+      break;
+    case "top":
+      c = ze(t, r, e), g = t.top - s - n;
+      break;
+    case "bottom":
+      c = ze(t, r, e), g = t.bottom + n;
+      break;
+    default: {
+      const b = a;
+      throw new Error(`Unknown placement: ${String(b)}`);
+    }
+  }
+  return { left: c, top: g };
+}
+function be(t, e, n) {
+  switch (e) {
+    case "start":
+      return t.top;
+    case "center":
+      return t.top + t.height / 2 - n / 2;
+    case "end":
+      return t.bottom - n;
+    default: {
+      const i = e;
+      throw new Error(`Unknown alignment: ${String(i)}`);
+    }
+  }
+}
+function ze(t, e, n) {
+  switch (e) {
+    case "start":
+      return t.left;
+    case "center":
+      return t.left + t.width / 2 - n / 2;
+    case "end":
+      return t.right - n;
+    default: {
+      const i = e;
+      throw new Error(`Unknown alignment: ${String(i)}`);
+    }
+  }
+}
+function lr({
+  width: t,
+  height: e,
+  header: n,
+  children: i,
+  anchorRef: a,
+  placement: r = "left",
+  alignment: s = "start",
+  gap: c = 0,
+  actions: g
+}) {
+  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);
+    },
+    [y]
+  ), De = T(
+    (C) => {
+      C.stopPropagation(), $(u), _(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
+        });
+        P(Ue), w.current || (E(), k && fe(Y));
+      }
+    }
+    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();
+      }, 0);
+      return () => {
+        clearTimeout(C);
+      };
+    } else !b && h.current && h.current.focus();
+  }, [b, h]), !b || !l || !m)
+    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,
+    {
+      ref: M,
+      id: q,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": p,
+      tabIndex: -1,
+      radius: ie ? 0 : 8,
+      onClick: De,
+      "data-popout-id": u,
+      ...f && { "data-parent-id": f },
+      style: {
+        position: "fixed",
+        left: me.left,
+        top: me.top,
+        width: t,
+        ...e !== void 0 && { height: e },
+        zIndex: He,
+        backgroundColor: "var(--mantine-color-body)",
+        // Conditional borders for pixel-perfect edge alignment with anchor
+        ...Me(),
+        // Conditional border radius - flatten corners on snapping side
+        ...Ne(),
+        // 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))",
+          // Hard close shadow
+          "0 4px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35))",
+          // Medium shadow
+          "0 8px 16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25))"
+          // Soft far shadow
+        ].join(", "),
+        // Focus outline for keyboard navigation
+        outline: "none"
+      },
+      children: [
+        /* @__PURE__ */ o(
+          ar,
+          {
+            config: n,
+            onClose: $e,
+            dragTriggerProps: N,
+            activeTab: de,
+            onTabChange: Le,
+            actions: g,
+            titleId: p
+          }
+        ),
+        /* @__PURE__ */ o(A, { children: k ? (he = y == null ? void 0 : y.tabs.find((C) => C.id === de)) == null ? void 0 : he.content : i })
+      ]
+    }
+  );
+  return At(Ve, l);
+}
+function cr({ children: t }) {
+  const { toggle: e, triggerRef: n, isOpen: i, id: a } = Ae(), r = T(
+    (g) => {
+      g.stopPropagation(), e();
+    },
+    [e]
+  );
+  if (!Et(t))
+    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);
+    },
+    ref: n,
+    // 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-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 });
+}
+const Br = Object.assign(ur, {
+  Trigger: cr,
+  Panel: lr,
+  Content: Yt
+});
+function Rr({ children: t }) {
+  return /* @__PURE__ */ o(or, { children: t });
+}
+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 Er({
+  label: t,
+  value: e,
+  defaultValue: n,
+  onChange: i,
+  min: a,
+  max: r,
+  step: s,
+  decimalScale: c,
+  suffix: g,
+  hideControls: b = !0
+}) {
+  const [z, h] = Z({
+    value: e,
+    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);
+    else {
+      let I = O;
+      a !== void 0 && I < a && (I = a), r !== void 0 && I > r && (I = r), I !== z && h(I), l(I);
+    }
+  }, _ = () => {
+    h(void 0);
+  };
+  return /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+    /* @__PURE__ */ o(
+      le,
+      {
+        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",
+        "data-is-default": u ? "true" : "false",
+        styles: {
+          input: u ? {
+            fontStyle: "italic",
+            color: "var(--mantine-color-dimmed)"
+          } : void 0
+        },
+        style: { flex: 1 }
+      }
+    ),
+    !u && /* @__PURE__ */ o(
+      D,
+      {
+        variant: "subtle",
+        size: "xs",
+        c: "dimmed",
+        "aria-label": `Reset ${t} to default`,
+        onClick: _,
+        style: { marginBottom: 2 },
+        children: /* @__PURE__ */ o(ne, { size: 12 })
+      }
+    )
+  ] });
+}
+function Or({ label: t, value: e, defaultValue: n, options: i, onChange: a }) {
+  const [r, s] = Z({
+    value: e,
+    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);
+  };
+  return /* @__PURE__ */ S(R, { gap: 4, wrap: "nowrap", align: "flex-end", children: [
+    /* @__PURE__ */ o(
+      we,
+      {
+        label: t,
+        "aria-label": t,
+        value: g,
+        onChange: b,
+        data: i,
+        size: "compact",
+        rightSection: /* @__PURE__ */ o(ce, { size: 14 }),
+        rightSectionPointerEvents: "none",
+        "data-is-default": c ? "true" : "false",
+        allowDeselect: !1,
+        styles: {
+          input: c ? {
+            fontStyle: "italic",
+            color: "var(--mantine-color-dimmed)"
+          } : void 0
+        },
+        style: { flex: 1 }
+      }
+    ),
+    !c && /* @__PURE__ */ o(
+      D,
+      {
+        variant: "subtle",
+        size: "xs",
+        c: "dimmed",
+        "aria-label": `Reset ${t} to default`,
+        onClick: z,
+        style: { marginBottom: 2 },
+        children: /* @__PURE__ */ o(ne, { size: 12 })
+      }
+    )
+  ] });
+}
+function Ar() {
+  return kt("dark");
+}
+const Lr = {
+  xs: Q(4),
+  sm: Q(8),
+  md: Q(16),
+  lg: Q(24),
+  xl: Q(32)
+}, Dr = "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
+};