@carto/ps-react-ui 4.17.1 → 4.17.3

package/dist/legend.js

@@ -1,18 +1,18 @@
-import { jsx as d, jsxs as z, Fragment as he } from "react/jsx-runtime";
+import { jsx as d, jsxs as M, Fragment as he } from "react/jsx-runtime";
 import { c as T } from "react/compiler-runtime";
-import { createContext as me, useContext as be, useState as J, useLayoutEffect as Ge, Children as ut, isValidElement as pt, useEffect as ft, useRef as Te, useId as ht } from "react";
-import { L as gt, h as yt, g as X, a as mt, m as bt, r as xt, u as vt, n as N, o as Z, p as U, b as ke, i as re, f as Lt, e as De, s as Me, j as xe, l as Ee } from "./legend-store-registry-Bo8U_qWM.js";
-import { Box as P, IconButton as ve, Typography as E, Collapse as He, createSvgIcon as St, Menu as $e, CircularProgress as Re, MenuItem as q, Divider as Ct, Slider as wt, InputAdornment as It, OutlinedInput as kt, ButtonBase as $t } from "@mui/material";
-import { DragIndicator as Ot, ExpandMore as Ve, VisibilityOffOutlined as _t, VisibilityOutlined as Be, MoreVert as Gt, ChecklistOutlined as Mt, Close as Pt, ArrowDropDown as zt, ErrorOutline as At } from "@mui/icons-material";
-import { useSortable as Tt, SortableContext as We, verticalListSortingStrategy as Ne } from "@dnd-kit/sortable";
-import { S as Fe } from "./smart-tooltip-D4vwQpFf.js";
+import { createContext as me, useContext as be, useState as J, useLayoutEffect as Pe, Children as ut, isValidElement as pt, useEffect as ft, useRef as De, useId as ht } from "react";
+import { L as gt, h as yt, g as X, a as mt, m as bt, r as vt, u as xt, n as N, o as Z, p as j, b as $e, i as re, f as Lt, e as Ee, s as Ae, j as ve, l as He } from "./legend-store-registry-p1tSwJXH.js";
+import { Box as A, IconButton as xe, Typography as E, Collapse as Re, createSvgIcon as wt, Menu as Oe, CircularProgress as Ve, MenuItem as q, Divider as St, Slider as Ct, InputAdornment as It, OutlinedInput as kt, ButtonBase as $t } from "@mui/material";
+import { DragIndicator as Ot, ExpandMore as We, VisibilityOffOutlined as _t, VisibilityOutlined as Be, MoreVert as Gt, ChecklistOutlined as Pt, Close as At, ArrowDropDown as Mt, ErrorOutline as zt } from "@mui/icons-material";
+import { useSortable as Tt, SortableContext as Ne, verticalListSortingStrategy as Fe } from "@dnd-kit/sortable";
+import { S as Ue } from "./smart-tooltip-DFV6GD8R.js";
 import { CSS as Dt } from "@dnd-kit/utilities";
 import { T as ie } from "./tooltip-BDnrRKrp.js";
 import "zustand";
 import "zustand/vanilla";
 import "zustand/middleware";
 import "zustand/react/shallow";
-import { useSensors as Et, useSensor as Pe, PointerSensor as Ht, KeyboardSensor as Rt, DndContext as Vt, closestCenter as Bt, DragOverlay as Wt } from "@dnd-kit/core";
+import { useSensors as Et, useSensor as Me, PointerSensor as Ht, KeyboardSensor as Rt, DndContext as Vt, closestCenter as Wt, DragOverlay as Bt } from "@dnd-kit/core";
 const ge = {
   expandLayer: "Expand layer",
   collapseLayer: "Collapse layer",
@@ -46,11 +46,11 @@ const ge = {
   colorGradient: "Color gradient",
   maxPrefix: "MAX: ",
   minPrefix: "MIN: "
-}, Ue = me({
+}, je = me({
   labels: ge
 });
-function B() {
-  return be(Ue);
+function W() {
+  return be(je);
 }
 function Nt(t) {
   const e = T(24), {
@@ -65,55 +65,55 @@ function Nt(t) {
   e[0] !== l || e[1] !== o || e[2] !== r ? (c = () => {
     if (yt(o))
       return X(o);
-    const w = mt(o, {
+    const C = mt(o, {
       layers: r,
       groups: l
     });
-    return bt(o, w), w;
+    return bt(o, C), C;
   }, e[0] = l, e[1] = o, e[2] = r, e[3] = c) : c = e[3];
   const [p] = J(c);
   let f, u;
-  e[4] !== o || e[5] !== s || e[6] !== p ? (f = () => (xt(o, p), () => {
-    vt(o, {
+  e[4] !== o || e[5] !== s || e[6] !== p ? (f = () => (vt(o, p), () => {
+    xt(o, {
       keepAlive: s
     });
-  }), u = [o, p, s], e[4] = o, e[5] = s, e[6] = p, e[7] = f, e[8] = u) : (f = e[7], u = e[8]), Ge(f, u);
+  }), u = [o, p, s], e[4] = o, e[5] = s, e[6] = p, e[7] = f, e[8] = u) : (f = e[7], u = e[8]), Pe(f, u);
   let y, h;
   e[9] !== l || e[10] !== r || e[11] !== p ? (y = () => {
     p.getState()._sync(r, l ?? []);
-  }, h = [p, r, l], e[9] = l, e[10] = r, e[11] = p, e[12] = y, e[13] = h) : (y = e[12], h = e[13]), Ge(y, h);
+  }, h = [p, r, l], e[9] = l, e[10] = r, e[11] = p, e[12] = y, e[13] = h) : (y = e[12], h = e[13]), Pe(y, h);
   let g;
   e[14] !== i ? (g = i ? {
     ...ge,
     ...i
   } : ge, e[14] = i, e[15] = g) : g = e[15];
-  let v;
-  e[16] !== g ? (v = {
+  let x;
+  e[16] !== g ? (x = {
     labels: g
-  }, e[16] = g, e[17] = v) : v = e[17];
-  const b = v;
-  let C;
-  e[18] !== a || e[19] !== b ? (C = /* @__PURE__ */ d(Ue.Provider, { value: b, children: a }), e[18] = a, e[19] = b, e[20] = C) : C = e[20];
+  }, e[16] = g, e[17] = x) : x = e[17];
+  const b = x;
+  let S;
+  e[18] !== a || e[19] !== b ? (S = /* @__PURE__ */ d(je.Provider, { value: b, children: a }), e[18] = a, e[19] = b, e[20] = S) : S = e[20];
   let L;
-  return e[21] !== o || e[22] !== C ? (L = /* @__PURE__ */ d(gt.Provider, { value: o, children: C }), e[21] = o, e[22] = C, e[23] = L) : L = e[23], L;
+  return e[21] !== o || e[22] !== S ? (L = /* @__PURE__ */ d(gt.Provider, { value: o, children: S }), e[21] = o, e[22] = S, e[23] = L) : L = e[23], L;
 }
-function je(t) {
+function Ze(t) {
   return (e) => {
     (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
   };
 }
-const Ze = me(null);
-function Q() {
-  return be(Ze);
-}
 const Ke = me(null);
-function ue() {
+function Q() {
   return be(Ke);
 }
 const Xe = me(null);
-function qe() {
+function ue() {
   return be(Xe);
 }
+const qe = me(null);
+function Qe() {
+  return be(qe);
+}
 const Ft = {
   fadeGroup: {
     display: "flex",
@@ -121,17 +121,17 @@ const Ft = {
     gap: 0.25
   }
 };
-function Qe(t) {
+function Ye(t) {
   const e = T(3), {
     children: o
   } = t, l = Q() !== null ? "PsLegend-rowFade" : "PsLegend-groupFade";
   let i;
-  return e[0] !== o || e[1] !== l ? (i = /* @__PURE__ */ d(P, { className: l, sx: Ft.fadeGroup, children: o }), e[0] = o, e[1] = l, e[2] = i) : i = e[2], i;
+  return e[0] !== o || e[1] !== l ? (i = /* @__PURE__ */ d(A, { className: l, sx: Ft.fadeGroup, children: o }), e[0] = o, e[1] = l, e[2] = i) : i = e[2], i;
 }
-function Ye(t) {
+function Je(t) {
   const e = [], o = [];
   for (const r of ut.toArray(t))
-    Ut(r, Qe) ? e.push(r) : o.push(r);
+    Ut(r, Ye) ? e.push(r) : o.push(r);
   return {
     actions: e,
     body: o
@@ -140,9 +140,9 @@ function Ye(t) {
 function Ut(t, e) {
   return pt(t) && t.type === e;
 }
-const Je = me(!1);
-function et() {
-  return be(Je);
+const et = me(!1);
+function tt() {
+  return be(et);
 }
 const Se = (t, e) => `${t}:${e}`;
 function de(t) {
@@ -154,132 +154,57 @@ function de(t) {
     id: t.slice(e + 1)
   };
 }
-const le = {
-  // Absolute handle — no flex slot; sticky header is the containing block.
-  handleSlot: {
-    position: "absolute",
-    zIndex: 1,
+const we = 48, Y = {
+  group: {
     display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: 24
-  },
-  handleSlotLayer: {
-    right: 2
-  },
-  handleSlotGroup: {
-    right: 2
-  },
-  handle: {
-    padding: "2px",
-    cursor: "grab",
-    touchAction: "none",
-    color: "text.secondary",
-    "& .MuiSvgIcon-root": {
-      fontSize: 18
-    },
-    "&:active": {
-      cursor: "grabbing"
-    },
-    "&:hover": {
-      backgroundColor: "transparent"
+    flexDirection: "column",
+    "& + &": {
+      borderTop: "1px solid",
+      borderColor: "divider"
     }
   },
-  overlay: {
+  // The original stays in place, dimmed, while its overlay clone is dragged.
+  groupDragging: {
+    opacity: 0.4
+  },
+  // Figma: 48px tall, 16px left inset (matches the row's own left inset),
+  // 8px gap to the label, actions right-aligned with ~8px edge inset (the
+  // small icon-button padding brings the glyphs to the design's 16px optical
+  // inset), hairline divider below. Sticky: pins to the top of the panel's
+  // scroll container.
+  header: {
     display: "flex",
     alignItems: "center",
     gap: 1,
     padding: ({
       spacing: t
-    }) => t(1, 1.5),
-    backgroundColor: "background.paper",
-    borderRadius: 1,
-    boxShadow: 4,
-    height: "auto",
-    maxWidth: "100%",
-    overflow: "hidden"
-  },
-  overlayIcon: {
-    display: "flex",
-    color: "text.secondary"
-  },
-  overlayLabel: {
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }
-};
-function tt(t) {
-  const e = T(31), {
-    kind: o,
-    id: r,
-    render: l
-  } = t, {
-    labels: i
-  } = B();
-  let n;
-  e[0] !== r || e[1] !== o ? (n = Se(o, r), e[0] = r, e[1] = o, e[2] = n) : n = e[2];
-  let a;
-  e[3] !== n ? (a = {
-    id: n
-  }, e[3] = n, e[4] = a) : a = e[4];
-  const {
-    attributes: s,
-    listeners: c,
-    setNodeRef: p,
-    setActivatorNodeRef: f,
-    transform: u,
-    transition: y,
-    isDragging: h
-  } = Tt(a);
-  let g;
-  if (e[5] !== s || e[6] !== h || e[7] !== o || e[8] !== i.reorder || e[9] !== c || e[10] !== l || e[11] !== f || e[12] !== p || e[13] !== u || e[14] !== y) {
-    const v = {
-      transform: Dt.Transform.toString(u ? {
-        ...u,
-        x: 0
-      } : null),
-      transition: y
-    }, b = `PsLegend-dragHandle-${o}`, C = o === "group" ? le.handleSlotGroup : le.handleSlotLayer;
-    let L;
-    e[16] !== C ? (L = [le.handleSlot, C], e[16] = C, e[17] = L) : L = e[17];
-    let w;
-    e[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ d(Ot, {}), e[18] = w) : w = e[18];
-    let x;
-    e[19] !== s || e[20] !== i.reorder || e[21] !== c || e[22] !== f ? (x = /* @__PURE__ */ d(ve, { ref: f, size: "xsmall", "aria-label": i.reorder, ...s, ...c, sx: le.handle, children: w }), e[19] = s, e[20] = i.reorder, e[21] = c, e[22] = f, e[23] = x) : x = e[23];
-    let I;
-    e[24] !== i.reorder || e[25] !== x ? (I = /* @__PURE__ */ d(ie, { title: i.reorder, children: x }), e[24] = i.reorder, e[25] = x, e[26] = I) : I = e[26];
-    let S;
-    e[27] !== b || e[28] !== L || e[29] !== I ? (S = /* @__PURE__ */ d(P, { component: "span", className: b, sx: L, children: I }), e[27] = b, e[28] = L, e[29] = I, e[30] = S) : S = e[30], g = l({
-      rootRef: p,
-      rootStyle: v,
-      dragging: h,
-      handle: S
-    }), e[5] = s, e[6] = h, e[7] = o, e[8] = i.reorder, e[9] = c, e[10] = l, e[11] = f, e[12] = p, e[13] = u, e[14] = y, e[15] = g;
-  } else
-    g = e[15];
-  return g;
-}
-const ot = 48, Y = {
-  group: {
-    display: "flex",
-    flexDirection: "column",
-    "& + &": {
-      borderTop: "1px solid",
-      borderColor: "divider"
-    },
-    // Hover-fade group actions (widgets-v2 Wrapper parity). Revealed by
-    // hovering anywhere in the group block (including member rows); a control
-    // carrying `.active` (hidden group) stays visible. Touch devices always
-    // show them. The collapse chevron sits outside the fade group. Member
-    // rows use the distinct `PsLegend-rowFade` class, so group hover never
-    // lights up row actions.
+    }) => t(1.5, 2, 1.5, 2),
+    minHeight: we,
+    borderBottom: "1px solid",
+    borderColor: "divider",
+    position: "sticky",
+    top: 0,
+    // Above the sticky row headers (2), which in turn sit above MUI's
+    // z-index-1 form internals in row content.
+    zIndex: 3,
+    // Distinct from the row header / panel body (both `background.paper`) so
+    // the group header visually separates from the rest.
+    backgroundColor: "background.default",
+    // Hover-fade group actions (widgets-v2 Wrapper parity). Scoped to the
+    // header itself (not the group root) so hovering a member row's body
+    // below never lights up the group's own actions/handle — only hovering
+    // the header (title/handle/actions) does. A control carrying `.active`
+    // (hidden group) stays visible. Touch devices always show them. The
+    // collapse chevron sits outside the fade group. Each non-active child
+    // also collapses to zero width on its own (not just the whole actions
+    // slot) so a sibling's `.active` pin (e.g. the eye on a mixed-visibility
+    // group) doesn't leave a same-sized invisible hole where the still-faded
+    // ⋮ menu would've been.
     "& .PsLegend-groupFade > *": {
       opacity: 1,
       transition: ({
         transitions: t
-      }) => t.create("opacity", {
+      }) => t.create(["opacity", "width"], {
         duration: t.duration.standard,
         easing: t.easing.easeInOut
       }),
@@ -290,8 +215,46 @@ const ot = 48, Y = {
         opacity: 1
       }
     },
+    // Faded actions don't reserve flex space on fine-pointer devices — the
+    // label grows to the trailing edge. Hover/focus-within restores the slot
+    // so the label reflows with the buttons; a dirty `.active` child keeps
+    // the slot open even outside hover.
+    "@media (hover: hover)": {
+      "& .PsLegend-groupFade > *:not(.active)": {
+        width: 0,
+        minWidth: 0,
+        // border-box IconButtons keep their padding inside `width` — zero it
+        // too, otherwise the fixed 2px+2px padding survives as a tiny but
+        // needless residual gap.
+        padding: 0,
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      "& .PsLegend-groupActions:not(:has(.active))": {
+        width: 0,
+        minWidth: 0,
+        overflow: "hidden",
+        // Cancel the header gap so nothing is left behind the label.
+        marginInlineStart: ({
+          spacing: t
+        }) => `calc(-1 * ${t(1)})`,
+        pointerEvents: "none"
+      }
+    },
     "&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *": {
-      opacity: 1
+      opacity: 1,
+      width: "auto",
+      minWidth: 0,
+      padding: "2px",
+      overflow: "visible",
+      pointerEvents: "auto"
+    },
+    "&:hover .PsLegend-groupActions, &:focus-within .PsLegend-groupActions": {
+      width: "auto",
+      minWidth: 0,
+      overflow: "visible",
+      marginInlineStart: 0,
+      pointerEvents: "auto"
     },
     // Drag handle (Legend.Sortable): absolutely positioned (no reserved flex
     // slot, so it never shifts the title/icon); the button inside fades in
@@ -312,33 +275,6 @@ const ot = 48, Y = {
       opacity: 1
     }
   },
-  // The original stays in place, dimmed, while its overlay clone is dragged.
-  groupDragging: {
-    opacity: 0.4
-  },
-  // Figma: 48px tall, icon at 12px from the left, 8px gap to the label,
-  // actions right-aligned with ~8px edge inset (the small icon-button padding
-  // brings the glyphs to the design's 16px optical inset), hairline divider
-  // below. Sticky: pins to the top of the panel's scroll container.
-  header: {
-    display: "flex",
-    alignItems: "center",
-    gap: 1,
-    padding: ({
-      spacing: t
-    }) => t(1.5, 2, 1.5, 1),
-    minHeight: ot,
-    borderBottom: "1px solid",
-    borderColor: "divider",
-    position: "sticky",
-    top: 0,
-    // Above the sticky row headers (2), which in turn sit above MUI's
-    // z-index-1 form internals in row content.
-    zIndex: 3,
-    // Distinct from the row header / panel body (both `background.paper`) so
-    // the group header visually separates from the rest.
-    backgroundColor: "background.default"
-  },
   // Accordion click target: everything in the header but the actions box.
   // Non-native button (role='button'), so it carries its own focus ring.
   titleArea: {
@@ -359,6 +295,10 @@ const ot = 48, Y = {
     display: "flex",
     color: "text.secondary"
   },
+  // No `flex:1` here — the label sizes to its own text (shrinking to
+  // ellipsis when too long) so the chevron sits right after it, instead of
+  // being dragged to the trailing edge of `titleArea` (which keeps its own
+  // `flex:1` to fill the header up to the actions).
   label: {
     minWidth: 0,
     overflow: "hidden",
@@ -394,53 +334,167 @@ const ot = 48, Y = {
       padding: "2px"
     }
   }
+}, le = {
+  // Absolute handle, flush against the header's top-left corner — no flex
+  // slot; sticky header is the containing block.
+  handleSlot: {
+    position: "absolute",
+    zIndex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    left: 0,
+    top: 0
+  },
+  // Both headers center their title on the same 24px band from the header's
+  // top edge (group: 48px header, `alignItems:'center'`; row: 12px top
+  // padding + 24px `titleLine`, `alignItems:'flex-start'`) — so `height:48`
+  // centers the icon on the title in both cases, even though the row's own
+  // header is only 32px tall (a 32px-tall slot would center at 16px, 8px
+  // short of the title).
+  handleSlotLayer: {
+    height: we
+  },
+  handleSlotGroup: {
+    height: we
+  },
+  handle: {
+    padding: "2px",
+    cursor: "grab",
+    touchAction: "none",
+    color: "text.secondary",
+    "& .MuiSvgIcon-root": {
+      fontSize: 18
+    },
+    "&:active": {
+      cursor: "grabbing"
+    },
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  overlay: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    padding: ({
+      spacing: t
+    }) => t(1, 1.5),
+    backgroundColor: "background.paper",
+    borderRadius: 1,
+    boxShadow: 4,
+    height: "auto",
+    maxWidth: "100%",
+    overflow: "hidden"
+  },
+  overlayIcon: {
+    display: "flex",
+    color: "text.secondary"
+  },
+  overlayLabel: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
 };
+function ot(t) {
+  const e = T(31), {
+    kind: o,
+    id: r,
+    render: l
+  } = t, {
+    labels: i
+  } = W();
+  let n;
+  e[0] !== r || e[1] !== o ? (n = Se(o, r), e[0] = r, e[1] = o, e[2] = n) : n = e[2];
+  let a;
+  e[3] !== n ? (a = {
+    id: n
+  }, e[3] = n, e[4] = a) : a = e[4];
+  const {
+    attributes: s,
+    listeners: c,
+    setNodeRef: p,
+    setActivatorNodeRef: f,
+    transform: u,
+    transition: y,
+    isDragging: h
+  } = Tt(a);
+  let g;
+  if (e[5] !== s || e[6] !== h || e[7] !== o || e[8] !== i.reorder || e[9] !== c || e[10] !== l || e[11] !== f || e[12] !== p || e[13] !== u || e[14] !== y) {
+    const x = {
+      transform: Dt.Transform.toString(u ? {
+        ...u,
+        x: 0
+      } : null),
+      transition: y
+    }, b = `PsLegend-dragHandle-${o}`, S = o === "group" ? le.handleSlotGroup : le.handleSlotLayer;
+    let L;
+    e[16] !== S ? (L = [le.handleSlot, S], e[16] = S, e[17] = L) : L = e[17];
+    let C;
+    e[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ d(Ot, {}), e[18] = C) : C = e[18];
+    let v;
+    e[19] !== s || e[20] !== i.reorder || e[21] !== c || e[22] !== f ? (v = /* @__PURE__ */ d(xe, { ref: f, size: "xsmall", "aria-label": i.reorder, ...s, ...c, sx: le.handle, children: C }), e[19] = s, e[20] = i.reorder, e[21] = c, e[22] = f, e[23] = v) : v = e[23];
+    let I;
+    e[24] !== i.reorder || e[25] !== v ? (I = /* @__PURE__ */ d(ie, { title: i.reorder, children: v }), e[24] = i.reorder, e[25] = v, e[26] = I) : I = e[26];
+    let w;
+    e[27] !== b || e[28] !== L || e[29] !== I ? (w = /* @__PURE__ */ d(A, { component: "span", className: b, sx: L, children: I }), e[27] = b, e[28] = L, e[29] = I, e[30] = w) : w = e[30], g = l({
+      rootRef: p,
+      rootStyle: x,
+      dragging: h,
+      handle: w
+    }), e[5] = s, e[6] = h, e[7] = o, e[8] = i.reorder, e[9] = c, e[10] = l, e[11] = f, e[12] = p, e[13] = u, e[14] = y, e[15] = g;
+  } else
+    g = e[15];
+  return g;
+}
 function jt(t) {
   const e = T(27), {
     groupId: o,
     children: r
   } = t, l = N();
   let i;
-  e[0] !== o ? (i = (x) => x.groups[o], e[0] = o, e[1] = i) : i = e[1];
+  e[0] !== o ? (i = (v) => v.groups[o], e[0] = o, e[1] = i) : i = e[1];
   const n = Z(l, i), a = Z(l, Kt);
   let s;
-  e[2] !== o ? (s = (x) => ke(x, o) === "hidden", e[2] = o, e[3] = s) : s = e[3];
-  const c = U(l, s), p = et();
+  e[2] !== o ? (s = (v) => $e(v, o) === "hidden", e[2] = o, e[3] = s) : s = e[3];
+  const c = j(l, s), p = tt();
   let f;
-  e[4] !== o ? (f = (x) => re(x, o).map(Zt), e[4] = o, e[5] = f) : f = e[5];
+  e[4] !== o ? (f = (v) => re(v, o).map(Zt), e[4] = o, e[5] = f) : f = e[5];
   const u = Z(l, f);
   if (!n)
     return null;
   let y;
-  e[6] !== r ? (y = Ye(r), e[6] = r, e[7] = y) : y = e[7];
+  e[6] !== r ? (y = Je(r), e[6] = r, e[7] = y) : y = e[7];
   const {
     actions: h,
     body: g
   } = y;
-  let v;
-  e[8] !== n.collapsed || e[9] !== o || e[10] !== a ? (v = () => a(o, !n.collapsed), e[8] = n.collapsed, e[9] = o, e[10] = a, e[11] = v) : v = e[11];
-  const b = v;
-  let C;
-  e[12] !== h || e[13] !== g || e[14] !== n.collapsed || e[15] !== n.icon || e[16] !== n.label || e[17] !== o || e[18] !== c || e[19] !== u || e[20] !== p || e[21] !== b ? (C = (x) => /* @__PURE__ */ d(Ke.Provider, { value: o, children: /* @__PURE__ */ z(P, { ref: x?.rootRef, style: x?.rootStyle, sx: [Y.group, x?.dragging === !0 && Y.groupDragging], children: [
-    /* @__PURE__ */ z(P, { sx: Y.header, children: [
-      x?.handle,
-      /* @__PURE__ */ z(P, { sx: Y.titleArea, role: "button", tabIndex: 0, "aria-expanded": !n.collapsed, onClick: b, onKeyDown: je(b), children: [
-        n.icon != null && /* @__PURE__ */ d(P, { sx: Y.groupIcon, children: n.icon }),
-        /* @__PURE__ */ d(Fe, { title: n.label, dependencies: [n.label], children: (I) => {
+  let x;
+  e[8] !== n.collapsed || e[9] !== o || e[10] !== a ? (x = () => a(o, !n.collapsed), e[8] = n.collapsed, e[9] = o, e[10] = a, e[11] = x) : x = e[11];
+  const b = x;
+  let S;
+  e[12] !== h || e[13] !== g || e[14] !== n.collapsed || e[15] !== n.icon || e[16] !== n.label || e[17] !== o || e[18] !== c || e[19] !== u || e[20] !== p || e[21] !== b ? (S = (v) => /* @__PURE__ */ d(Xe.Provider, { value: o, children: /* @__PURE__ */ M(A, { ref: v?.rootRef, style: v?.rootStyle, sx: [Y.group, v?.dragging === !0 && Y.groupDragging], children: [
+    /* @__PURE__ */ M(A, { sx: Y.header, children: [
+      v?.handle,
+      /* @__PURE__ */ M(A, { sx: Y.titleArea, role: "button", tabIndex: 0, "aria-expanded": !n.collapsed, onClick: b, onKeyDown: Ze(b), children: [
+        n.icon != null && /* @__PURE__ */ d(A, { sx: Y.groupIcon, children: n.icon }),
+        /* @__PURE__ */ d(Ue, { title: n.label, dependencies: [n.label], children: (I) => {
           const {
-            ref: S
+            ref: w
           } = I;
-          return /* @__PURE__ */ d(E, { ref: S, variant: "button", fontWeight: "bold", color: c ? "text.disabled" : "text.primary", sx: Y.label, children: n.label });
+          return /* @__PURE__ */ d(E, { ref: w, variant: "button", fontWeight: "bold", color: c ? "text.disabled" : "text.primary", sx: Y.label, children: n.label });
         } }),
-        /* @__PURE__ */ d(Ve, { sx: [Y.chevron, n.collapsed && Y.chevronCollapsed] })
+        /* @__PURE__ */ d(We, { sx: [Y.chevron, n.collapsed && Y.chevronCollapsed] })
       ] }),
-      /* @__PURE__ */ d(P, { sx: Y.actions, children: h })
+      /* @__PURE__ */ d(A, { className: "PsLegend-groupActions", sx: Y.actions, children: h })
     ] }),
-    /* @__PURE__ */ d(He, { in: !n.collapsed, children: p ? /* @__PURE__ */ d(We, { items: u, strategy: Ne, children: g }) : g })
-  ] }) }), e[12] = h, e[13] = g, e[14] = n.collapsed, e[15] = n.icon, e[16] = n.label, e[17] = o, e[18] = c, e[19] = u, e[20] = p, e[21] = b, e[22] = C) : C = e[22];
-  const L = C;
-  let w;
-  return e[23] !== o || e[24] !== L || e[25] !== p ? (w = p ? /* @__PURE__ */ d(tt, { kind: "group", id: o, render: L }) : L(), e[23] = o, e[24] = L, e[25] = p, e[26] = w) : w = e[26], w;
+    /* @__PURE__ */ d(Re, { in: !n.collapsed, children: p ? /* @__PURE__ */ d(Ne, { items: u, strategy: Fe, children: g }) : g })
+  ] }) }), e[12] = h, e[13] = g, e[14] = n.collapsed, e[15] = n.icon, e[16] = n.label, e[17] = o, e[18] = c, e[19] = u, e[20] = p, e[21] = b, e[22] = S) : S = e[22];
+  const L = S;
+  let C;
+  return e[23] !== o || e[24] !== L || e[25] !== p ? (C = p ? /* @__PURE__ */ d(ot, { kind: "group", id: o, render: L }) : L(), e[23] = o, e[24] = L, e[25] = p, e[26] = C) : C = e[26], C;
 }
 function Zt(t) {
   return Se("layer", t.id);
@@ -448,7 +502,7 @@ function Zt(t) {
 function Kt(t) {
   return t.setGroupCollapsed;
 }
-const j = {
+const F = {
   // Padding lives on header/content/footer (not the root) so the sticky
   // header is opaque and full-bleed while pinned.
   row: {
@@ -463,13 +517,17 @@ const j = {
     // `.PsLegend-rowFade` are hidden on fine-pointer devices and fade in when
     // the row is hovered or holds focus; a control carrying `.active` (dirty
     // state — hidden layer, open menu, opacity ≠ 1) stays visible. Coarse-
-    // pointer (touch) devices always show them. The collapse chevron sits
-    // outside the fade group and never fades.
+    // pointer (touch) devices always show them. Each non-active child also
+    // collapses to zero width on its own (not just the whole actions slot —
+    // see `PsLegend-rowActions` below) so a sibling's `.active` pin (e.g. the
+    // eye while hidden) doesn't leave a same-sized invisible hole where the
+    // still-faded ⋮ menu would've been; the title grows into that space. The
+    // collapse chevron sits outside the fade group and never fades.
     "& .PsLegend-rowFade > *": {
       opacity: 1,
       transition: ({
         transitions: t
-      }) => t.create("opacity", {
+      }) => t.create(["opacity", "width"], {
         duration: t.duration.standard,
         easing: t.easing.easeInOut
       }),
@@ -480,8 +538,46 @@ const j = {
         opacity: 1
       }
     },
+    // Faded actions don't reserve flex space on fine-pointer devices — the
+    // title grows to the trailing edge. Hover/focus-within restores the slot
+    // so the title reflows with the buttons; a dirty `.active` child keeps
+    // the slot open even outside hover.
+    "@media (hover: hover)": {
+      "& .PsLegend-rowFade > *:not(.active)": {
+        width: 0,
+        minWidth: 0,
+        // border-box IconButtons keep their padding inside `width` — zero it
+        // too, otherwise the fixed 2px+2px padding survives as a tiny but
+        // needless residual gap.
+        padding: 0,
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      "& .PsLegend-rowActions:not(:has(.active))": {
+        width: 0,
+        minWidth: 0,
+        overflow: "hidden",
+        // Cancel the header gap so nothing is left behind the title.
+        marginInlineStart: ({
+          spacing: t
+        }) => `calc(-1 * ${t(0.5)})`,
+        pointerEvents: "none"
+      }
+    },
     "&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *": {
-      opacity: 1
+      opacity: 1,
+      width: "auto",
+      minWidth: 0,
+      padding: "2px",
+      overflow: "visible",
+      pointerEvents: "auto"
+    },
+    "&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions": {
+      width: "auto",
+      minWidth: 0,
+      overflow: "visible",
+      marginInlineStart: 0,
+      pointerEvents: "auto"
     },
     // Hovering anywhere in the row also reveals the category/icon values
     // (the renderers keep their own list-scoped rule for standalone usage).
@@ -516,7 +612,9 @@ const j = {
   // band (subtitle flows below them) — hence `flex-start` with the title
   // optically centered against the 30px icon-button row. Sticky: pins inside
   // the panel's scroll container; `top` is applied inline per row (0, or the
-  // group-header height for grouped rows).
+  // group-header height for grouped rows). Grouped rows get an extra 20px
+  // left inset (36px total) so member layers read as nested under the group
+  // and line up with the group's own icon+label text start.
   header: {
     display: "flex",
     alignItems: "flex-start",
@@ -531,6 +629,9 @@ const j = {
     zIndex: 2,
     backgroundColor: "background.paper"
   },
+  headerGrouped: {
+    paddingLeft: 4.5
+  },
   titleBox: {
     flex: 1,
     minWidth: 0,
@@ -557,6 +658,10 @@ const j = {
     alignItems: "center",
     gap: 0.5
   },
+  // No `flex:1` here — the title sizes to its own text (shrinking to
+  // ellipsis when too long) so the chevron sits right after it, instead of
+  // being dragged to the trailing edge of `titleLine` (which spans the full
+  // width of `titleBox`, itself `flex:1` to fill the header up to actions).
   title: {
     minWidth: 0,
     overflow: "hidden",
@@ -607,18 +712,24 @@ const j = {
       spacing: t
     }) => t(0.5, 2, 1, 2)
   },
+  contentGrouped: {
+    paddingLeft: 4.5
+  },
   // ~16px above the note (content's 8px bottom inset + 8px here), per design.
   footer: {
     padding: ({
       spacing: t
     }) => t(1, 2, 1, 2)
   },
+  footerGrouped: {
+    paddingLeft: 4.5
+  },
   dimmed: {
     opacity: 0.5
   }
 };
 function Xt(t) {
-  const e = T(30), {
+  const e = T(31), {
     layerId: o,
     children: r
   } = t, l = N();
@@ -627,67 +738,64 @@ function Xt(t) {
   const n = Z(l, i), a = Z(l, qt);
   let s;
   e[2] !== o ? (s = (m) => Lt(m, o), e[2] = o, e[3] = s) : s = e[3];
-  const c = U(l, s), p = ue() !== null, f = et(), [u, y] = J(!1), h = n?.visible ?? !0, g = u && h;
-  let v;
-  e[4] !== o || e[5] !== g ? (v = {
+  const c = j(l, s), p = ue() !== null, f = tt(), [u, y] = J(!1), h = n?.visible ?? !0, g = u && h;
+  let x;
+  e[4] !== o || e[5] !== g ? (x = {
     layerId: o,
     opacityOpen: g,
     setOpacityOpen: y
-  }, e[4] = o, e[5] = g, e[6] = v) : v = e[6];
-  const b = v;
+  }, e[4] = o, e[5] = g, e[6] = x) : x = e[6];
+  const b = x;
   if (!n)
     return null;
-  let C;
-  e[7] !== r ? (C = Ye(r), e[7] = r, e[8] = C) : C = e[8];
+  let S;
+  e[7] !== r ? (S = Je(r), e[7] = r, e[8] = S) : S = e[8];
   const {
     actions: L,
-    body: w
-  } = C, x = !n.visible || n.collapsed, I = p ? ot : 0, S = n.visible && c;
+    body: C
+  } = S, v = !n.visible || n.collapsed, I = p ? we : 0, w = n.visible && c;
   let O;
   e[9] !== n.collapsed || e[10] !== o || e[11] !== a ? (O = () => a(o, !n.collapsed), e[9] = n.collapsed, e[10] = o, e[11] = a, e[12] = O) : O = e[12];
   const k = O;
   let $;
-  e[13] !== L || e[14] !== w || e[15] !== S || e[16] !== x || e[17] !== n.collapsed || e[18] !== n.helperText || e[19] !== n.name || e[20] !== n.subtitle || e[21] !== n.visible || e[22] !== b || e[23] !== I || e[24] !== k ? ($ = (m) => /* @__PURE__ */ d(Ze.Provider, { value: b, children: /* @__PURE__ */ z(P, { ref: m?.rootRef, style: m?.rootStyle, sx: [j.row, m?.dragging === !0 && j.rowDragging], children: [
-    /* @__PURE__ */ z(P, { sx: j.header, style: {
+  e[13] !== L || e[14] !== C || e[15] !== w || e[16] !== v || e[17] !== p || e[18] !== n.collapsed || e[19] !== n.helperText || e[20] !== n.name || e[21] !== n.subtitle || e[22] !== n.visible || e[23] !== b || e[24] !== I || e[25] !== k ? ($ = (m) => /* @__PURE__ */ d(Ke.Provider, { value: b, children: /* @__PURE__ */ M(A, { ref: m?.rootRef, style: m?.rootStyle, sx: [F.row, m?.dragging === !0 && F.rowDragging], children: [
+    /* @__PURE__ */ M(A, { sx: [F.header, p && F.headerGrouped], style: {
       top: I
     }, children: [
       m?.handle,
-      /* @__PURE__ */ z(P, { sx: [j.titleBox, S && j.titleBoxInteractive], ...S && {
+      /* @__PURE__ */ M(A, { sx: [F.titleBox, w && F.titleBoxInteractive], ...w && {
         role: "button",
         tabIndex: 0,
         "aria-expanded": !n.collapsed,
         onClick: k,
-        onKeyDown: je(k)
+        onKeyDown: Ze(k)
       }, children: [
-        /* @__PURE__ */ z(P, { sx: j.titleLine, children: [
-          /* @__PURE__ */ d(Fe, { title: n.name, dependencies: [n.name], children: (M) => {
+        /* @__PURE__ */ M(A, { sx: F.titleLine, children: [
+          /* @__PURE__ */ d(Ue, { title: n.name, dependencies: [n.name], children: (P) => {
             const {
-              ref: A
-            } = M;
-            return /* @__PURE__ */ d(E, { ref: A, variant: "button", color: n.visible ? "text.primary" : "text.disabled", sx: j.title, children: n.name });
+              ref: z
+            } = P;
+            return /* @__PURE__ */ d(E, { ref: z, variant: "button", color: n.visible ? "text.primary" : "text.disabled", sx: F.title, children: n.name });
           } }),
-          S && /* @__PURE__ */ d(Ve, { sx: [j.chevron, n.collapsed && j.chevronCollapsed] })
+          w && /* @__PURE__ */ d(We, { sx: [F.chevron, n.collapsed && F.chevronCollapsed] })
         ] }),
-        n.subtitle && !x && /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: n.subtitle })
+        n.subtitle && !v && /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: n.subtitle })
       ] }),
-      /* @__PURE__ */ d(P, { sx: j.actions, children: L })
+      /* @__PURE__ */ d(A, { className: "PsLegend-rowActions", sx: F.actions, children: L })
     ] }),
-    /* @__PURE__ */ z(He, { in: !x, children: [
-      /* @__PURE__ */ d(P, { sx: n.visible ? j.content : {
-        ...j.content,
-        ...j.dimmed
-      }, children: w }),
-      n.helperText && /* @__PURE__ */ d(P, { sx: j.footer, children: typeof n.helperText == "string" ? /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: n.helperText }) : n.helperText })
+    /* @__PURE__ */ M(Re, { in: !v, children: [
+      /* @__PURE__ */ d(A, { sx: [F.content, p && F.contentGrouped, !n.visible && F.dimmed], children: C }),
+      n.helperText && /* @__PURE__ */ d(A, { sx: [F.footer, p && F.footerGrouped], children: typeof n.helperText == "string" ? /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: n.helperText }) : n.helperText })
     ] })
-  ] }) }), e[13] = L, e[14] = w, e[15] = S, e[16] = x, e[17] = n.collapsed, e[18] = n.helperText, e[19] = n.name, e[20] = n.subtitle, e[21] = n.visible, e[22] = b, e[23] = I, e[24] = k, e[25] = $) : $ = e[25];
+  ] }) }), e[13] = L, e[14] = C, e[15] = w, e[16] = v, e[17] = p, e[18] = n.collapsed, e[19] = n.helperText, e[20] = n.name, e[21] = n.subtitle, e[22] = n.visible, e[23] = b, e[24] = I, e[25] = k, e[26] = $) : $ = e[26];
   const _ = $;
   let G;
-  return e[26] !== o || e[27] !== _ || e[28] !== f ? (G = f ? /* @__PURE__ */ d(tt, { kind: "layer", id: o, render: _ }) : _(), e[26] = o, e[27] = _, e[28] = f, e[29] = G) : G = e[29], G;
+  return e[27] !== o || e[28] !== _ || e[29] !== f ? (G = f ? /* @__PURE__ */ d(ot, { kind: "layer", id: o, render: _ }) : _(), e[27] = o, e[28] = _, e[29] = f, e[30] = G) : G = e[30], G;
 }
 function qt(t) {
   return t.setCollapsed;
 }
-const Qt = St(/* @__PURE__ */ z("g", { transform: "translate(12 12) scale(1.33333) translate(-184 -24)", children: [
+const Qt = wt(/* @__PURE__ */ M("g", { transform: "translate(12 12) scale(1.33333) translate(-184 -24)", children: [
   /* @__PURE__ */ d("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M184.901 29.5794L185.217 29.5415C185.803 29.4604 186.372 29.3216 186.918 29.1319L187 29.1007L187 29.1033L187.208 29.0255L187.536 28.8904C187.722 28.8088 187.906 28.721 188.086 28.6272L188.366 28.4747C188.381 28.4663 188.395 28.4578 188.41 28.4493C188.418 28.4451 188.425 28.4408 188.432 28.4365C188.455 28.4234 188.478 28.4102 188.5 28.3969C188.551 28.3668 188.601 28.3362 188.652 28.3052L188.912 28.1374C189.598 27.6788 190.217 27.1271 190.75 26.5002L190.751 26.4954C190.989 26.2164 191.21 25.9226 191.413 25.6152C191.488 25.5007 191.561 25.3843 191.631 25.2662L191.757 25.0445L191.878 24.8189L192.021 24.5306L192.15 24.2443L192.25 24C190.98 20.7776 187.885 18.4747 184.239 18.3782L184 18.375L183.716 18.3795L183.637 18.3823L183.373 18.3967L183.103 18.4198L182.838 18.4506L182.666 18.4749L182.426 18.5146C182.19 18.557 181.957 18.6087 181.728 18.6684L181.55 18.7175L181.271 18.8039L182.508 20.04L182.801 19.9854C183.194 19.9182 183.592 19.875 184 19.875C186.842 19.875 189.378 21.4725 190.615 24C190.172 24.915 189.55 25.7025 188.807 26.34L188.811 26.3446C188.71 26.4323 188.606 26.5172 188.5 26.5991C188.455 26.6337 188.41 26.6679 188.364 26.7015C188.108 26.8897 187.84 27.0611 187.562 27.2145C187.088 27.4755 186.585 27.6844 186.058 27.836L186.062 27.84L185.778 27.9125C185.707 27.9293 185.635 27.9452 185.563 27.9602C185.297 28.0173 185.025 28.06 184.75 28.0876V28.0866C184.503 28.1118 184.253 28.125 184 28.125C181.158 28.125 178.622 26.5275 177.385 24C177.91 22.9275 178.675 22.0425 179.582 21.3525L180.895 22.665L180.826 22.844C180.697 23.2065 180.625 23.595 180.625 24C180.625 25.86 182.14 27.375 184 27.375C184.258 27.375 184.509 27.3459 184.75 27.2915C185.462 27.129 186.09 26.7397 186.553 26.2048L179.79 19.4389C179.339 19.6833 178.912 19.9656 178.512 20.2817L178.517 20.2875L178.271 20.4884C177.704 20.9671 177.197 21.516 176.766 22.1227C176.404 22.6333 176.095 23.1838 175.845 23.7662L175.75 24C177.048 27.2925 180.25 29.625 184 29.625L184.285 29.6205L184.492 29.6116L184.628 29.6025L184.901 29.5794ZM182.133 23.9025L184.09 25.86L184.045 25.8703L184 25.875C182.965 25.875 182.125 25.035 182.125 24L182.133 23.9025Z" }),
   /* @__PURE__ */ d("path", { d: "M187.368 23.9925C187.375 22.1325 185.86 20.625 184 20.625C183.722 20.625 183.46 20.6625 183.198 20.73L184.75 22.2825L184.889 22.3507C185.252 22.5477 185.543 22.8625 185.71 23.2425L187.263 24.795L187.304 24.6011C187.342 24.4045 187.368 24.2006 187.368 23.9925Z" })
 ] }), "VisibilityIndeterminate"), Yt = {
@@ -702,45 +810,45 @@ function Jt(t) {
     labels: l
   } = t, i = N(), n = Q(), a = ue(), {
     labels: s
-  } = B(), c = o !== void 0 && r !== void 0;
+  } = W(), c = o !== void 0 && r !== void 0;
   let p;
   e[0] !== c || e[1] !== n ? (p = (m) => !c && n ? m.layers[n.layerId]?.visible ?? !0 : !0, e[0] = c, e[1] = n, e[2] = p) : p = e[2];
-  const f = U(i, p);
+  const f = j(i, p);
   let u;
-  e[3] !== c || e[4] !== a || e[5] !== n ? (u = (m) => !c && !n && a ? ke(m, a) : "visible", e[3] = c, e[4] = a, e[5] = n, e[6] = u) : u = e[6];
-  const y = Z(i, u), h = U(i, to), g = U(i, eo);
-  let v, b;
-  e[7] !== c || e[8] !== a || e[9] !== n ? (v = () => {
+  e[3] !== c || e[4] !== a || e[5] !== n ? (u = (m) => !c && !n && a ? $e(m, a) : "visible", e[3] = c, e[4] = a, e[5] = n, e[6] = u) : u = e[6];
+  const y = Z(i, u), h = j(i, to), g = j(i, eo);
+  let x, b;
+  e[7] !== c || e[8] !== a || e[9] !== n ? (x = () => {
     !c && !n && !a && console.warn("Legend.VisibilityToggle needs `visibility`/`onToggle` props or a Legend.Row / Legend.Group context.");
-  }, b = [c, n, a], e[7] = c, e[8] = a, e[9] = n, e[10] = v, e[11] = b) : (v = e[10], b = e[11]), ft(v, b);
-  let C, L, w = l;
+  }, b = [c, n, a], e[7] = c, e[8] = a, e[9] = n, e[10] = x, e[11] = b) : (x = e[10], b = e[11]), ft(x, b);
+  let S, L, C = l;
   if (c) {
-    C = o;
+    S = o;
     let m;
     e[12] !== r || e[13] !== o ? (m = () => r(o === "hidden"), e[12] = r, e[13] = o, e[14] = m) : m = e[14], L = m;
   } else if (n) {
-    C = f ? "visible" : "hidden";
+    S = f ? "visible" : "hidden";
     let m;
     e[15] !== f || e[16] !== n || e[17] !== h ? (m = () => h(n.layerId, !f), e[15] = f, e[16] = n, e[17] = h, e[18] = m) : m = e[18], L = m;
   } else if (a) {
-    C = y;
+    S = y;
     let m;
     e[19] !== a || e[20] !== y || e[21] !== g ? (m = () => g(a, y === "hidden"), e[19] = a, e[20] = y, e[21] = g, e[22] = m) : m = e[22], L = m;
-    let M;
-    e[23] !== s || e[24] !== l ? (M = l ?? {
+    let P;
+    e[23] !== s || e[24] !== l ? (P = l ?? {
       hideLayer: s.hideGroup,
       showLayer: s.showGroup
-    }, e[23] = s, e[24] = l, e[25] = M) : M = e[25], w = M;
+    }, e[23] = s, e[24] = l, e[25] = P) : P = e[25], C = P;
   } else
     return null;
   const {
-    hideLayer: x,
+    hideLayer: v,
     showLayer: I
-  } = w ?? s, S = Yt[C], O = C === "hidden" ? I : x, k = C === "visible" ? void 0 : "active";
+  } = C ?? s, w = Yt[S], O = S === "hidden" ? I : v, k = S === "visible" ? void 0 : "active";
   let $;
-  e[26] !== S ? ($ = /* @__PURE__ */ d(S, { fontSize: "small" }), e[26] = S, e[27] = $) : $ = e[27];
+  e[26] !== w ? ($ = /* @__PURE__ */ d(w, { fontSize: "small" }), e[26] = w, e[27] = $) : $ = e[27];
   let _;
-  e[28] !== L || e[29] !== O || e[30] !== k || e[31] !== $ ? (_ = /* @__PURE__ */ d(ve, { size: "small", className: k, onClick: L, "aria-label": O, children: $ }), e[28] = L, e[29] = O, e[30] = k, e[31] = $, e[32] = _) : _ = e[32];
+  e[28] !== L || e[29] !== O || e[30] !== k || e[31] !== $ ? (_ = /* @__PURE__ */ d(xe, { size: "small", className: k, onClick: L, "aria-label": O, children: $ }), e[28] = L, e[29] = O, e[30] = k, e[31] = $, e[32] = _) : _ = e[32];
   let G;
   return e[33] !== O || e[34] !== _ ? (G = /* @__PURE__ */ d(ie, { title: O, children: _ }), e[33] = O, e[34] = _, e[35] = G) : G = e[35], G;
 }
@@ -750,39 +858,39 @@ function eo(t) {
 function to(t) {
   return t.setVisibility;
 }
-function Oe(t) {
+function _e(t) {
   const e = T(23), {
     children: o,
     gate: r,
     ariaLabel: l,
     active: i
-  } = t, n = r === void 0 ? !0 : r, a = i === void 0 ? !1 : i, [s, c] = J(null), [p, f] = J(!1), u = Te(!1), y = !!s, {
+  } = t, n = r === void 0 ? !0 : r, a = i === void 0 ? !1 : i, [s, c] = J(null), [p, f] = J(!1), u = De(!1), y = !!s, {
     labels: h
-  } = B();
+  } = W();
   let g;
   e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = () => c(null), e[0] = g) : g = e[0];
-  const v = g;
+  const x = g;
   let b;
   e[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = (V) => {
     u.current = V, f(V);
   }, e[1] = b) : b = e[1];
-  const C = b;
+  const S = b;
   let L;
   e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (L = () => u.current, e[2] = L) : L = e[2];
-  const w = L;
-  let x;
-  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = () => {
-    u.current || v();
-  }, e[3] = x) : x = e[3];
-  const I = x;
-  let S;
-  e[4] !== p ? (S = {
+  const C = L;
+  let v;
+  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = () => {
+    u.current || x();
+  }, e[3] = v) : v = e[3];
+  const I = v;
+  let w;
+  e[4] !== p ? (w = {
     busy: p,
-    isBusy: w,
-    setBusy: C,
-    close: v
-  }, e[4] = p, e[5] = S) : S = e[5];
-  const O = S;
+    isBusy: C,
+    setBusy: S,
+    close: x
+  }, e[4] = p, e[5] = w) : w = e[5];
+  const O = w;
   if (!n || !o)
     return null;
   let k;
@@ -793,25 +901,25 @@ function Oe(t) {
   let G;
   e[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (G = /* @__PURE__ */ d(Gt, { fontSize: "small" }), e[7] = G) : G = e[7];
   let m;
-  e[8] !== l || e[9] !== y || e[10] !== _ ? (m = /* @__PURE__ */ d(ve, { size: "small", className: _, onClick: $, "aria-label": l, "aria-haspopup": "menu", "aria-expanded": y, children: G }), e[8] = l, e[9] = y, e[10] = _, e[11] = m) : m = e[11];
-  let M;
-  e[12] !== h.moreOptions || e[13] !== m ? (M = /* @__PURE__ */ d(ie, { title: h.moreOptions, children: m }), e[12] = h.moreOptions, e[13] = m, e[14] = M) : M = e[14];
-  let A;
-  e[15] !== s || e[16] !== o || e[17] !== y ? (A = /* @__PURE__ */ d($e, { anchorEl: s, open: y, onClose: I, onClick: I, children: o }), e[15] = s, e[16] = o, e[17] = y, e[18] = A) : A = e[18];
+  e[8] !== l || e[9] !== y || e[10] !== _ ? (m = /* @__PURE__ */ d(xe, { size: "small", className: _, onClick: $, "aria-label": l, "aria-haspopup": "menu", "aria-expanded": y, children: G }), e[8] = l, e[9] = y, e[10] = _, e[11] = m) : m = e[11];
+  let P;
+  e[12] !== h.moreOptions || e[13] !== m ? (P = /* @__PURE__ */ d(ie, { title: h.moreOptions, children: m }), e[12] = h.moreOptions, e[13] = m, e[14] = P) : P = e[14];
+  let z;
+  e[15] !== s || e[16] !== o || e[17] !== y ? (z = /* @__PURE__ */ d(Oe, { anchorEl: s, open: y, onClose: I, onClick: I, children: o }), e[15] = s, e[16] = o, e[17] = y, e[18] = z) : z = e[18];
   let D;
-  return e[19] !== O || e[20] !== M || e[21] !== A ? (D = /* @__PURE__ */ z(Xe.Provider, { value: O, children: [
-    M,
-    A
-  ] }), e[19] = O, e[20] = M, e[21] = A, e[22] = D) : D = e[22], D;
+  return e[19] !== O || e[20] !== P || e[21] !== z ? (D = /* @__PURE__ */ M(qe.Provider, { value: O, children: [
+    P,
+    z
+  ] }), e[19] = O, e[20] = P, e[21] = z, e[22] = D) : D = e[22], D;
 }
 function oo(t) {
   const e = T(5), {
     children: o
   } = t, r = Q(), {
     labels: l
-  } = B(), i = !!r, n = r?.opacityOpen ?? !1;
+  } = W(), i = !!r, n = r?.opacityOpen ?? !1;
   let a;
-  return e[0] !== o || e[1] !== l.layerOptions || e[2] !== i || e[3] !== n ? (a = /* @__PURE__ */ d(Oe, { gate: i, ariaLabel: l.layerOptions, active: n, children: o }), e[0] = o, e[1] = l.layerOptions, e[2] = i, e[3] = n, e[4] = a) : a = e[4], a;
+  return e[0] !== o || e[1] !== l.layerOptions || e[2] !== i || e[3] !== n ? (a = /* @__PURE__ */ d(_e, { gate: i, ariaLabel: l.layerOptions, active: n, children: o }), e[0] = o, e[1] = l.layerOptions, e[2] = i, e[3] = n, e[4] = a) : a = e[4], a;
 }
 async function nt(t, e) {
   if (!t.isBusy()) {
@@ -826,12 +934,12 @@ async function nt(t, e) {
 function no(t) {
   const e = T(13), {
     onZoomTo: o
-  } = t, r = N(), l = Q(), i = qe();
+  } = t, r = N(), l = Q(), i = Qe();
   let n;
   e[0] !== l ? (n = (g) => l ? g.layers[l.layerId]?.visible ?? !1 : !1, e[0] = l, e[1] = n) : n = e[1];
-  const a = U(r, n), {
+  const a = j(r, n), {
     labels: s
-  } = B();
+  } = W();
   if (!l || !a)
     return null;
   const c = i?.busy ?? !1;
@@ -841,12 +949,12 @@ function no(t) {
   }, e[2] = i, e[3] = o, e[4] = l, e[5] = p) : p = e[5];
   const f = p;
   let u;
-  e[6] !== c ? (u = c && /* @__PURE__ */ d(Re, { size: 16, sx: {
+  e[6] !== c ? (u = c && /* @__PURE__ */ d(Ve, { size: 16, sx: {
     mr: 1
   } }), e[6] = c, e[7] = u) : u = e[7];
   const y = c ? s.loading : s.zoomTo;
   let h;
-  return e[8] !== c || e[9] !== f || e[10] !== u || e[11] !== y ? (h = /* @__PURE__ */ z(q, { disabled: c, onClick: f, children: [
+  return e[8] !== c || e[9] !== f || e[10] !== u || e[11] !== y ? (h = /* @__PURE__ */ M(q, { disabled: c, onClick: f, children: [
     u,
     y
   ] }), e[8] = c, e[9] = f, e[10] = u, e[11] = y, e[12] = h) : h = e[12], h;
@@ -854,7 +962,7 @@ function no(t) {
 function lo() {
   const t = T(6), e = N(), o = Q(), {
     labels: r
-  } = B();
+  } = W();
   if (!o)
     return null;
   let l;
@@ -871,7 +979,7 @@ function lo() {
 function io() {
   const t = T(6), e = N(), o = ue(), r = Q(), {
     labels: l
-  } = B();
+  } = W();
   if (o === null && !r)
     return null;
   let i;
@@ -892,20 +1000,20 @@ function ro(t) {
     children: o
   } = t, r = ue(), {
     labels: l
-  } = B(), i = r !== null;
+  } = W(), i = r !== null;
   let n;
-  return e[0] !== o || e[1] !== l.groupOptions || e[2] !== i ? (n = /* @__PURE__ */ d(Oe, { gate: i, ariaLabel: l.groupOptions, children: o }), e[0] = o, e[1] = l.groupOptions, e[2] = i, e[3] = n) : n = e[3], n;
+  return e[0] !== o || e[1] !== l.groupOptions || e[2] !== i ? (n = /* @__PURE__ */ d(_e, { gate: i, ariaLabel: l.groupOptions, children: o }), e[0] = o, e[1] = l.groupOptions, e[2] = i, e[3] = n) : n = e[3], n;
 }
 function so() {
   const t = T(6), e = N(), o = ue(), {
     labels: r
-  } = B();
+  } = W();
   if (o === null)
     return null;
   let l;
   t[0] !== o || t[1] !== e ? (l = () => {
     const a = X(e).getState();
-    for (const s of xe(a))
+    for (const s of ve(a))
       a.setGroupVisibility(s.id, s.id === o);
     for (const s of re(a, void 0))
       a.setVisibility(s.id, !1);
@@ -915,15 +1023,15 @@ function so() {
   return t[3] !== r.showOnlyGroup || t[4] !== i ? (n = /* @__PURE__ */ d(q, { onClick: i, children: r.showOnlyGroup }), t[3] = r.showOnlyGroup, t[4] = i, t[5] = n) : n = t[5], n;
 }
 function ao() {
-  const t = T(5), e = N(), o = U(e, De), {
+  const t = T(5), e = N(), o = j(e, Ee), {
     labels: r
-  } = B();
+  } = W();
   if (!o)
     return null;
   let l;
   t[0] !== e ? (l = () => {
     const a = X(e).getState();
-    for (const s of xe(a))
+    for (const s of ve(a))
       a.setGroupVisibility(s.id, !0);
     for (const s of re(a, void 0))
       a.setVisibility(s.id, !0);
@@ -933,15 +1041,15 @@ function ao() {
   return t[2] !== r.showAllGroups || t[3] !== i ? (n = /* @__PURE__ */ d(q, { onClick: i, children: r.showAllGroups }), t[2] = r.showAllGroups, t[3] = i, t[4] = n) : n = t[4], n;
 }
 function co() {
-  const t = T(5), e = N(), o = U(e, De), r = U(e, Me), {
+  const t = T(5), e = N(), o = j(e, Ee), r = j(e, Ae), {
     labels: l
-  } = B();
+  } = W();
   if (!o)
     return null;
   let i;
   t[0] !== e ? (i = () => {
-    const c = X(e).getState(), p = Me(c);
-    for (const f of xe(c))
+    const c = X(e).getState(), p = Ae(c);
+    for (const f of ve(c))
       c.setGroupCollapsed(f.id, !p);
   }, t[0] = e, t[1] = i) : i = t[1];
   const n = i, a = r ? l.expandAllGroups : l.collapseAllGroups;
@@ -951,12 +1059,12 @@ function co() {
 function uo(t) {
   const e = T(13), {
     onZoomTo: o
-  } = t, r = N(), l = ue(), i = qe();
+  } = t, r = N(), l = ue(), i = Qe();
   let n;
-  e[0] !== l ? (n = (g) => l !== null && ke(g, l) === "hidden", e[0] = l, e[1] = n) : n = e[1];
-  const a = U(r, n), {
+  e[0] !== l ? (n = (g) => l !== null && $e(g, l) === "hidden", e[0] = l, e[1] = n) : n = e[1];
+  const a = j(r, n), {
     labels: s
-  } = B();
+  } = W();
   if (l === null || a)
     return null;
   const c = i?.busy ?? !1;
@@ -966,12 +1074,12 @@ function uo(t) {
   }, e[2] = l, e[3] = i, e[4] = o, e[5] = p) : p = e[5];
   const f = p;
   let u;
-  e[6] !== c ? (u = c && /* @__PURE__ */ d(Re, { size: 16, sx: {
+  e[6] !== c ? (u = c && /* @__PURE__ */ d(Ve, { size: 16, sx: {
     mr: 1
   } }), e[6] = c, e[7] = u) : u = e[7];
   const y = c ? s.loading : s.zoomToGroup;
   let h;
-  return e[8] !== c || e[9] !== f || e[10] !== u || e[11] !== y ? (h = /* @__PURE__ */ z(q, { disabled: c, onClick: f, children: [
+  return e[8] !== c || e[9] !== f || e[10] !== u || e[11] !== y ? (h = /* @__PURE__ */ M(q, { disabled: c, onClick: f, children: [
     u,
     y
   ] }), e[8] = c, e[9] = f, e[10] = u, e[11] = y, e[12] = h) : h = e[12], h;
@@ -981,9 +1089,9 @@ function po(t) {
     children: o
   } = t, {
     labels: r
-  } = B();
+  } = W();
   let l;
-  return e[0] !== o || e[1] !== r.panelOptions ? (l = /* @__PURE__ */ d(Oe, { ariaLabel: r.panelOptions, children: o }), e[0] = o, e[1] = r.panelOptions, e[2] = l) : l = e[2], l;
+  return e[0] !== o || e[1] !== r.panelOptions ? (l = /* @__PURE__ */ d(_e, { ariaLabel: r.panelOptions, children: o }), e[0] = o, e[1] = r.panelOptions, e[2] = l) : l = e[2], l;
 }
 const ee = {
   // Tooltip wrapper around the (possibly disabled) trigger button. A plain
@@ -1045,14 +1153,14 @@ const ee = {
   }
 };
 function fo(t, e) {
-  return Ee(X(t).getState());
+  return He(X(t).getState());
 }
 function ho() {
   const t = T(33), e = N(), [o, r] = J(null);
-  U(e, mo);
+  j(e, mo);
   const l = fo(e), i = Z(e, yo), {
     labels: n
-  } = B(), a = l.reduce(go, 0), s = !!o && a > 0;
+  } = W(), a = l.reduce(go, 0), s = !!o && a > 0;
   let c;
   t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = (G) => r(G.currentTarget), t[0] = c) : c = t[0];
   const p = c;
@@ -1060,40 +1168,40 @@ function ho() {
   t[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = () => r(null), t[1] = f) : f = t[1];
   const u = f, y = s ? "active" : void 0, h = a === 0;
   let g;
-  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ d(Mt, { fontSize: "small" }), t[2] = g) : g = t[2];
-  let v;
-  t[3] !== n.enabledLayers || t[4] !== s || t[5] !== y || t[6] !== h ? (v = /* @__PURE__ */ d(P, { component: "span", sx: ee.triggerWrap, children: /* @__PURE__ */ d(ve, { size: "small", className: y, disabled: h, onClick: p, "aria-label": n.enabledLayers, "aria-haspopup": "menu", "aria-expanded": s, children: g }) }), t[3] = n.enabledLayers, t[4] = s, t[5] = y, t[6] = h, t[7] = v) : v = t[7];
+  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ d(Pt, { fontSize: "small" }), t[2] = g) : g = t[2];
+  let x;
+  t[3] !== n.enabledLayers || t[4] !== s || t[5] !== y || t[6] !== h ? (x = /* @__PURE__ */ d(A, { component: "span", sx: ee.triggerWrap, children: /* @__PURE__ */ d(xe, { size: "small", className: y, disabled: h, onClick: p, "aria-label": n.enabledLayers, "aria-haspopup": "menu", "aria-expanded": s, children: g }) }), t[3] = n.enabledLayers, t[4] = s, t[5] = y, t[6] = h, t[7] = x) : x = t[7];
   let b;
-  t[8] !== n.toggleEnabledLayers || t[9] !== v ? (b = /* @__PURE__ */ d(ie, { title: n.toggleEnabledLayers, children: v }), t[8] = n.toggleEnabledLayers, t[9] = v, t[10] = b) : b = t[10];
-  const C = $e;
+  t[8] !== n.toggleEnabledLayers || t[9] !== x ? (b = /* @__PURE__ */ d(ie, { title: n.toggleEnabledLayers, children: x }), t[8] = n.toggleEnabledLayers, t[9] = x, t[10] = b) : b = t[10];
+  const S = Oe;
   let L;
   t[11] !== u ? (L = {
     onExited: u
   }, t[11] = u, t[12] = L) : L = t[12];
-  let w, x;
-  t[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = {
+  let C, v;
+  t[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = {
     disablePadding: !0
-  }, x = {
+  }, v = {
     paper: {
       sx: ee.paper
     }
-  }, t[13] = w, t[14] = x) : (w = t[13], x = t[14]);
+  }, t[13] = C, t[14] = v) : (C = t[13], v = t[14]);
   const I = `${n.enabledLayers} (${a})`;
-  let S;
-  t[15] !== I ? (S = /* @__PURE__ */ d(E, { component: "div", variant: "caption", color: "text.primary", sx: ee.stickyHeader, children: I }), t[15] = I, t[16] = S) : S = t[16];
+  let w;
+  t[15] !== I ? (w = /* @__PURE__ */ d(E, { component: "div", variant: "caption", color: "text.primary", sx: ee.stickyHeader, children: I }), t[15] = I, t[16] = w) : w = t[16];
   let O;
-  t[17] !== n.hideLayer || t[18] !== i ? (O = (G, m) => [m > 0 ? /* @__PURE__ */ d(Ct, { sx: ee.divider }, `divider-${G.group?.id ?? "ungrouped"}`) : null, G.group ? /* @__PURE__ */ d(E, { variant: "caption", fontWeight: "medium", color: "text.secondary", sx: ee.groupCaption, children: G.group.label }, `caption-${G.group.id}`) : null, ...G.layers.map((M) => /* @__PURE__ */ z(q, { disableRipple: !0, sx: ee.item, onClick: () => i(M.id, !1), children: [
-    /* @__PURE__ */ d(E, { variant: "body2", sx: ee.itemName, children: M.name }),
+  t[17] !== n.hideLayer || t[18] !== i ? (O = (G, m) => [m > 0 ? /* @__PURE__ */ d(St, { sx: ee.divider }, `divider-${G.group?.id ?? "ungrouped"}`) : null, G.group ? /* @__PURE__ */ d(E, { variant: "caption", fontWeight: "medium", color: "text.secondary", sx: ee.groupCaption, children: G.group.label }, `caption-${G.group.id}`) : null, ...G.layers.map((P) => /* @__PURE__ */ M(q, { disableRipple: !0, sx: ee.item, onClick: () => i(P.id, !1), children: [
+    /* @__PURE__ */ d(E, { variant: "body2", sx: ee.itemName, children: P.name }),
     /* @__PURE__ */ d(ie, { title: n.hideLayer, children: /* @__PURE__ */ d(Be, { sx: ee.eye }) })
-  ] }, M.id))], t[17] = n.hideLayer, t[18] = i, t[19] = O) : O = t[19];
+  ] }, P.id))], t[17] = n.hideLayer, t[18] = i, t[19] = O) : O = t[19];
   const k = l.flatMap(O);
   let $;
-  t[20] !== C || t[21] !== o || t[22] !== u || t[23] !== s || t[24] !== S || t[25] !== k || t[26] !== L || t[27] !== w || t[28] !== x ? ($ = /* @__PURE__ */ z(C, { anchorEl: o, open: s, onClose: u, TransitionProps: L, MenuListProps: w, slotProps: x, children: [
-    S,
+  t[20] !== S || t[21] !== o || t[22] !== u || t[23] !== s || t[24] !== w || t[25] !== k || t[26] !== L || t[27] !== C || t[28] !== v ? ($ = /* @__PURE__ */ M(S, { anchorEl: o, open: s, onClose: u, TransitionProps: L, MenuListProps: C, slotProps: v, children: [
+    w,
     k
-  ] }), t[20] = C, t[21] = o, t[22] = u, t[23] = s, t[24] = S, t[25] = k, t[26] = L, t[27] = w, t[28] = x, t[29] = $) : $ = t[29];
+  ] }), t[20] = S, t[21] = o, t[22] = u, t[23] = s, t[24] = w, t[25] = k, t[26] = L, t[27] = C, t[28] = v, t[29] = $) : $ = t[29];
   let _;
-  return t[30] !== $ || t[31] !== b ? (_ = /* @__PURE__ */ z(he, { children: [
+  return t[30] !== $ || t[31] !== b ? (_ = /* @__PURE__ */ M(he, { children: [
     b,
     $
   ] }), t[30] = $, t[31] = b, t[32] = _) : _ = t[32], _;
@@ -1105,22 +1213,22 @@ function yo(t) {
   return t.setVisibility;
 }
 function mo(t) {
-  return Ee(t).map(bo).join("|");
+  return He(t).map(bo).join("|");
 }
 function bo(t) {
   const {
     group: e,
     layers: o
   } = t;
-  return `${e?.id ?? ""}${e?.label ?? ""}:${o.map(xo).join(",")}`;
+  return `${e?.id ?? ""}${e?.label ?? ""}:${o.map(vo).join(",")}`;
 }
-function xo(t) {
+function vo(t) {
   return `${t.id}${t.name}`;
 }
-function vo(t) {
+function xo(t) {
   const e = T(27), {
     children: o
-  } = t, r = N(), [l, i] = J(null), n = Te(void 0), a = Z(r, Lo);
+  } = t, r = N(), [l, i] = J(null), n = De(void 0), a = Z(r, Lo);
   let s;
   e[0] !== r ? (s = (k, $) => {
     const _ = de(k), G = de($);
@@ -1134,19 +1242,19 @@ function vo(t) {
     } = $, {
       active: G,
       collisionRect: m,
-      droppableRects: M,
-      droppableContainers: A
+      droppableRects: P,
+      droppableContainers: z
     } = _;
     if (!G || !m || k.code !== "ArrowDown" && k.code !== "ArrowUp")
       return;
     k.preventDefault();
-    const D = k.code === "ArrowDown", W = A.getEnabled().filter((R) => R.id !== G.id && c(String(G.id), String(R.id))).flatMap((R) => {
-      const H = M.get(R.id);
+    const D = k.code === "ArrowDown", B = z.getEnabled().filter((R) => R.id !== G.id && c(String(G.id), String(R.id))).flatMap((R) => {
+      const H = P.get(R.id);
       return H ? [H] : [];
     }).filter((R) => D ? R.top > m.top : R.top < m.top).sort((R, H) => D ? R.top - H.top : H.top - R.top)[0];
-    return W ? {
-      x: W.left,
-      y: W.top
+    return B ? {
+      x: B.left,
+      y: B.top
     } : void 0;
   }, e[2] = c, e[3] = p) : p = e[3];
   const f = p;
@@ -1154,26 +1262,26 @@ function vo(t) {
   e[4] !== f ? (u = {
     coordinateGetter: f
   }, e[4] = f, e[5] = u) : u = e[5];
-  const y = Et(Pe(Ht), Pe(Rt, u));
+  const y = Et(Me(Ht), Me(Rt, u));
   let h;
   e[6] !== c ? (h = (k) => {
     const $ = k.droppableContainers.filter((_) => c(String(k.active.id), String(_.id)));
-    return Bt({
+    return Wt({
       ...k,
       droppableContainers: $
     });
   }, e[6] = c, e[7] = h) : h = e[7];
   const g = h;
-  let v;
-  e[8] !== r ? (v = (k) => {
+  let x;
+  e[8] !== r ? (x = (k) => {
     const $ = String(k.active.id);
     i($);
     const _ = de($);
     n.current = _?.kind === "layer" ? X(r).getState().layers[_.id]?.groupId : void 0;
-  }, e[8] = r, e[9] = v) : v = e[9];
-  const b = v;
-  let C;
-  e[10] !== r ? (C = (k) => {
+  }, e[8] = r, e[9] = x) : x = e[9];
+  const b = x;
+  let S;
+  e[10] !== r ? (S = (k) => {
     i(null);
     const {
       active: $,
@@ -1184,43 +1292,43 @@ function vo(t) {
     const G = de(String($.id)), m = de(String(_.id));
     if (!G || G.kind !== m?.kind)
       return;
-    const M = X(r).getState();
+    const P = X(r).getState();
     if (G.kind === "group") {
-      const R = xe(M).findIndex((H) => H.id === m.id);
-      R !== -1 && M.moveGroup(G.id, R);
+      const R = ve(P).findIndex((H) => H.id === m.id);
+      R !== -1 && P.moveGroup(G.id, R);
       return;
     }
-    const A = M.layers[G.id], D = M.layers[m.id];
-    if (!A || !D || A.groupId !== D.groupId)
+    const z = P.layers[G.id], D = P.layers[m.id];
+    if (!z || !D || z.groupId !== D.groupId)
       return;
-    const W = re(M, A.groupId).findIndex((R) => R.id === m.id);
-    W !== -1 && M.moveLayer(G.id, W);
-  }, e[10] = r, e[11] = C) : C = e[11];
-  const L = C;
-  let w;
-  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = () => i(null), e[12] = w) : w = e[12];
-  let x;
-  e[13] !== o || e[14] !== a ? (x = /* @__PURE__ */ d(We, { items: a, strategy: Ne, children: o }), e[13] = o, e[14] = a, e[15] = x) : x = e[15];
+    const B = re(P, z.groupId).findIndex((R) => R.id === m.id);
+    B !== -1 && P.moveLayer(G.id, B);
+  }, e[10] = r, e[11] = S) : S = e[11];
+  const L = S;
+  let C;
+  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = () => i(null), e[12] = C) : C = e[12];
+  let v;
+  e[13] !== o || e[14] !== a ? (v = /* @__PURE__ */ d(Ne, { items: a, strategy: Fe, children: o }), e[13] = o, e[14] = a, e[15] = v) : v = e[15];
   let I;
-  e[16] !== l ? (I = l && /* @__PURE__ */ d(wo, { activeId: l }), e[16] = l, e[17] = I) : I = e[17];
-  let S;
-  e[18] !== I ? (S = /* @__PURE__ */ d(Wt, { children: I }), e[18] = I, e[19] = S) : S = e[19];
+  e[16] !== l ? (I = l && /* @__PURE__ */ d(Co, { activeId: l }), e[16] = l, e[17] = I) : I = e[17];
+  let w;
+  e[18] !== I ? (w = /* @__PURE__ */ d(Bt, { children: I }), e[18] = I, e[19] = w) : w = e[19];
   let O;
-  return e[20] !== g || e[21] !== L || e[22] !== b || e[23] !== y || e[24] !== S || e[25] !== x ? (O = /* @__PURE__ */ d(Je.Provider, { value: !0, children: /* @__PURE__ */ z(Vt, { sensors: y, collisionDetection: g, onDragStart: b, onDragEnd: L, onDragCancel: w, children: [
-    x,
-    S
-  ] }) }), e[20] = g, e[21] = L, e[22] = b, e[23] = y, e[24] = S, e[25] = x, e[26] = O) : O = e[26], O;
+  return e[20] !== g || e[21] !== L || e[22] !== b || e[23] !== y || e[24] !== w || e[25] !== v ? (O = /* @__PURE__ */ d(et.Provider, { value: !0, children: /* @__PURE__ */ M(Vt, { sensors: y, collisionDetection: g, onDragStart: b, onDragEnd: L, onDragCancel: C, children: [
+    v,
+    w
+  ] }) }), e[20] = g, e[21] = L, e[22] = b, e[23] = y, e[24] = w, e[25] = v, e[26] = O) : O = e[26], O;
 }
 function Lo(t) {
-  return [...xe(t).map(Co), ...re(t, void 0).map(So)];
+  return [...ve(t).map(So), ...re(t, void 0).map(wo)];
 }
-function So(t) {
+function wo(t) {
   return Se("layer", t.id);
 }
-function Co(t) {
+function So(t) {
   return Se("group", t.id);
 }
-function wo(t) {
+function Co(t) {
   const e = T(15), {
     activeId: o
   } = t, r = N();
@@ -1229,19 +1337,19 @@ function wo(t) {
   const i = l;
   let n;
   e[2] !== i ? (n = (h) => i ? i.kind === "group" ? h.groups[i.id]?.label : h.layers[i.id]?.name : void 0, e[2] = i, e[3] = n) : n = e[3];
-  const a = U(r, n);
+  const a = j(r, n);
   let s;
   e[4] !== i ? (s = (h) => i?.kind === "group" ? h.groups[i.id]?.icon : void 0, e[4] = i, e[5] = s) : s = e[5];
-  const c = U(r, s);
+  const c = j(r, s);
   if (!i || a === void 0)
     return null;
   let p;
-  e[6] !== c || e[7] !== i.kind ? (p = i.kind === "group" && c != null && /* @__PURE__ */ d(P, { sx: le.overlayIcon, children: c }), e[6] = c, e[7] = i.kind, e[8] = p) : p = e[8];
+  e[6] !== c || e[7] !== i.kind ? (p = i.kind === "group" && c != null && /* @__PURE__ */ d(A, { sx: le.overlayIcon, children: c }), e[6] = c, e[7] = i.kind, e[8] = p) : p = e[8];
   const f = i.kind === "group" ? "bold" : void 0;
   let u;
   e[9] !== a || e[10] !== f ? (u = /* @__PURE__ */ d(E, { variant: "button", fontWeight: f, color: "text.primary", sx: le.overlayLabel, children: a }), e[9] = a, e[10] = f, e[11] = u) : u = e[11];
   let y;
-  return e[12] !== p || e[13] !== u ? (y = /* @__PURE__ */ z(P, { sx: le.overlay, children: [
+  return e[12] !== p || e[13] !== u ? (y = /* @__PURE__ */ M(A, { sx: le.overlay, children: [
     p,
     u
   ] }), e[12] = p, e[13] = u, e[14] = y) : y = e[14], y;
@@ -1283,7 +1391,7 @@ function Io() {
   t[0] !== o ? (r = (p) => o ? p.layers[o.layerId] : void 0, t[0] = o, t[1] = r) : r = t[1];
   const l = Z(e, r), i = Z(e, ko), {
     labels: n
-  } = B();
+  } = W();
   if (!o || !l?.visible || !l.opacityControl)
     return null;
   let a;
@@ -1302,9 +1410,9 @@ function $o() {
   const t = T(47), e = N(), o = Q(), r = o?.layerId;
   let l;
   t[0] !== r ? (l = (H) => r ? H.layers[r]?.opacity ?? 1 : 1, t[0] = r, t[1] = l) : l = t[1];
-  const i = U(e, l), n = U(e, _o), {
+  const i = j(e, l), n = j(e, _o), {
     labels: a
-  } = B(), [s, c] = J(null), [p, f] = J(null);
+  } = W(), [s, c] = J(null), [p, f] = J(null);
   if (!o || !r || !o.opacityOpen)
     return null;
   let u;
@@ -1312,73 +1420,73 @@ function $o() {
   const y = u;
   let h;
   t[5] !== r || t[6] !== n ? (h = (H) => {
-    const F = ze(H);
-    return n(r, F / 100), F;
+    const U = ze(H);
+    return n(r, U / 100), U;
   }, t[5] = r, t[6] = n, t[7] = h) : h = t[7];
   const g = h;
-  let v;
-  t[8] !== g ? (v = (H) => {
+  let x;
+  t[8] !== g ? (x = (H) => {
     if (f(H), H.trim() === "")
       return;
-    const F = Number(H);
-    if (!Number.isFinite(F))
+    const U = Number(H);
+    if (!Number.isFinite(U))
       return;
-    const se = g(F);
-    se !== F && f(String(se));
-  }, t[8] = g, t[9] = v) : v = t[9];
-  const b = v;
-  let C;
-  t[10] !== o ? (C = () => {
+    const se = g(U);
+    se !== U && f(String(se));
+  }, t[8] = g, t[9] = x) : x = t[9];
+  const b = x;
+  let S;
+  t[10] !== o ? (S = () => {
     o.setOpacityOpen(!1), f(null), c(null);
-  }, t[10] = o, t[11] = C) : C = t[11];
-  const L = C;
-  let w;
-  t[12] !== a.opacity ? (w = /* @__PURE__ */ d(E, { variant: "caption", fontWeight: "medium", color: "text.primary", children: a.opacity }), t[12] = a.opacity, t[13] = w) : w = t[13];
-  let x;
-  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ d(Pt, { fontSize: "small" }), t[14] = x) : x = t[14];
+  }, t[10] = o, t[11] = S) : S = t[11];
+  const L = S;
+  let C;
+  t[12] !== a.opacity ? (C = /* @__PURE__ */ d(E, { variant: "caption", fontWeight: "medium", color: "text.primary", children: a.opacity }), t[12] = a.opacity, t[13] = C) : C = t[13];
+  let v;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ d(At, { fontSize: "small" }), t[14] = v) : v = t[14];
   let I;
-  t[15] !== L || t[16] !== a.close ? (I = /* @__PURE__ */ d(ve, { size: "small", onClick: L, "aria-label": a.close, children: x }), t[15] = L, t[16] = a.close, t[17] = I) : I = t[17];
-  let S;
-  t[18] !== a.close || t[19] !== I ? (S = /* @__PURE__ */ d(ie, { title: a.close, children: I }), t[18] = a.close, t[19] = I, t[20] = S) : S = t[20];
+  t[15] !== L || t[16] !== a.close ? (I = /* @__PURE__ */ d(xe, { size: "small", onClick: L, "aria-label": a.close, children: v }), t[15] = L, t[16] = a.close, t[17] = I) : I = t[17];
+  let w;
+  t[18] !== a.close || t[19] !== I ? (w = /* @__PURE__ */ d(ie, { title: a.close, children: I }), t[18] = a.close, t[19] = I, t[20] = w) : w = t[20];
   let O;
-  t[21] !== w || t[22] !== S ? (O = /* @__PURE__ */ z(P, { sx: pe.inlineHeader, children: [
-    w,
-    S
-  ] }), t[21] = w, t[22] = S, t[23] = O) : O = t[23];
+  t[21] !== C || t[22] !== w ? (O = /* @__PURE__ */ M(A, { sx: pe.inlineHeader, children: [
+    C,
+    w
+  ] }), t[21] = C, t[22] = w, t[23] = O) : O = t[23];
   let k;
-  t[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = (H, F) => {
-    c(F), f(null);
+  t[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = (H, U) => {
+    c(U), f(null);
   }, t[24] = k) : k = t[24];
   let $;
-  t[25] !== g ? ($ = (H, F) => {
-    g(F), c(null);
+  t[25] !== g ? ($ = (H, U) => {
+    g(U), c(null);
   }, t[25] = g, t[26] = $) : $ = t[26];
   let _;
-  t[27] !== a.opacity || t[28] !== y || t[29] !== $ ? (_ = /* @__PURE__ */ d(wt, { size: "small", min: 0, max: 100, step: 1, value: y, onChange: k, onChangeCommitted: $, "aria-label": a.opacity, sx: pe.slider }), t[27] = a.opacity, t[28] = y, t[29] = $, t[30] = _) : _ = t[30];
+  t[27] !== a.opacity || t[28] !== y || t[29] !== $ ? (_ = /* @__PURE__ */ d(Ct, { size: "small", min: 0, max: 100, step: 1, value: y, onChange: k, onChangeCommitted: $, "aria-label": a.opacity, sx: pe.slider }), t[27] = a.opacity, t[28] = y, t[29] = $, t[30] = _) : _ = t[30];
   const G = p ?? String(y);
   let m;
   t[31] !== b ? (m = (H) => b(H.target.value), t[31] = b, t[32] = m) : m = t[32];
-  let M;
-  t[33] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = () => f(null), t[33] = M) : M = t[33];
-  let A;
-  t[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (A = /* @__PURE__ */ d(It, { position: "end", children: "%" }), t[34] = A) : A = t[34];
+  let P;
+  t[33] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (P = () => f(null), t[33] = P) : P = t[33];
+  let z;
+  t[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = /* @__PURE__ */ d(It, { position: "end", children: "%" }), t[34] = z) : z = t[34];
   let D;
   t[35] !== a.opacity ? (D = {
     inputMode: "numeric",
     "aria-label": a.opacity
   }, t[35] = a.opacity, t[36] = D) : D = t[36];
   let V;
-  t[37] !== G || t[38] !== m || t[39] !== D ? (V = /* @__PURE__ */ d(kt, { size: "small", value: G, onChange: m, onBlur: M, onKeyDown: Oo, endAdornment: A, inputProps: D, sx: pe.input }), t[37] = G, t[38] = m, t[39] = D, t[40] = V) : V = t[40];
-  let W;
-  t[41] !== _ || t[42] !== V ? (W = /* @__PURE__ */ z(P, { sx: pe.inlineControls, children: [
+  t[37] !== G || t[38] !== m || t[39] !== D ? (V = /* @__PURE__ */ d(kt, { size: "small", value: G, onChange: m, onBlur: P, onKeyDown: Oo, endAdornment: z, inputProps: D, sx: pe.input }), t[37] = G, t[38] = m, t[39] = D, t[40] = V) : V = t[40];
+  let B;
+  t[41] !== _ || t[42] !== V ? (B = /* @__PURE__ */ M(A, { sx: pe.inlineControls, children: [
     _,
     V
-  ] }), t[41] = _, t[42] = V, t[43] = W) : W = t[43];
+  ] }), t[41] = _, t[42] = V, t[43] = B) : B = t[43];
   let R;
-  return t[44] !== W || t[45] !== O ? (R = /* @__PURE__ */ z(P, { sx: pe.inline, children: [
+  return t[44] !== B || t[45] !== O ? (R = /* @__PURE__ */ M(A, { sx: pe.inline, children: [
     O,
-    W
-  ] }), t[44] = W, t[45] = O, t[46] = R) : R = t[46], R;
+    B
+  ] }), t[44] = B, t[45] = O, t[46] = R) : R = t[46], R;
 }
 function Oo(t) {
   t.key === "Enter" && t.target.blur();
@@ -1441,13 +1549,13 @@ const Go = {
     }
   }
 };
-function Mo() {
+function Po() {
   const t = T(34), e = N(), r = Q()?.layerId;
   let l;
   t[0] !== r ? (l = (O) => r ? O.layers[r]?.sections : void 0, t[0] = r, t[1] = l) : l = t[1];
-  const i = Z(e, l), n = Z(e, Po), {
+  const i = Z(e, l), n = Z(e, Ao), {
     labels: a
-  } = B(), [s, c] = J(null), p = !!s;
+  } = W(), [s, c] = J(null), p = !!s;
   if (!r || !i || i.length === 0)
     return null;
   const f = i[0].active, u = i.length > 1;
@@ -1460,41 +1568,41 @@ function Mo() {
     ...ne.chevron,
     ...ne.chevronOpen
   } : ne.chevron, t[5] = p, t[6] = g) : g = t[6];
-  let v;
-  t[7] !== g ? (v = /* @__PURE__ */ d(zt, { fontSize: "small", sx: g }), t[7] = g, t[8] = v) : v = t[8];
+  let x;
+  t[7] !== g ? (x = /* @__PURE__ */ d(Mt, { fontSize: "small", sx: g }), t[7] = g, t[8] = x) : x = t[8];
   let b;
-  t[9] !== a.attribute || t[10] !== p || t[11] !== h || t[12] !== v ? (b = /* @__PURE__ */ z($t, { sx: ne.trigger, onClick: y, "aria-label": a.attribute, "aria-haspopup": "listbox", "aria-expanded": p, children: [
+  t[9] !== a.attribute || t[10] !== p || t[11] !== h || t[12] !== x ? (b = /* @__PURE__ */ M($t, { sx: ne.trigger, onClick: y, "aria-label": a.attribute, "aria-haspopup": "listbox", "aria-expanded": p, children: [
     h,
-    v
-  ] }), t[9] = a.attribute, t[10] = p, t[11] = h, t[12] = v, t[13] = b) : b = t[13];
-  let C;
-  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = () => c(null), t[14] = C) : C = t[14];
+    x
+  ] }), t[9] = a.attribute, t[10] = p, t[11] = h, t[12] = x, t[13] = b) : b = t[13];
+  let S;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (S = () => c(null), t[14] = S) : S = t[14];
   const L = s?.clientWidth;
-  let w;
-  t[15] !== L ? (w = {
+  let C;
+  t[15] !== L ? (C = {
     paper: {
       sx: {
         width: L
       }
     }
-  }, t[15] = L, t[16] = w) : w = t[16];
-  let x;
+  }, t[15] = L, t[16] = C) : C = t[16];
+  let v;
   if (t[17] !== r || t[18] !== i || t[19] !== n || t[20] !== u) {
     let O;
     t[22] !== r || t[23] !== n || t[24] !== u ? (O = (k) => [u && k.title ? /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", component: "li", sx: ne.sectionTitle, children: k.title }, `${k.id}-title`) : null, ...k.options.map(($) => /* @__PURE__ */ d(q, { selected: $ === k.active, sx: ne.option, onClick: () => {
       n(r, k.id, $), c(null);
-    }, children: $ }, `${k.id}-${$}`))], t[22] = r, t[23] = n, t[24] = u, t[25] = O) : O = t[25], x = i.map(O), t[17] = r, t[18] = i, t[19] = n, t[20] = u, t[21] = x;
+    }, children: $ }, `${k.id}-${$}`))], t[22] = r, t[23] = n, t[24] = u, t[25] = O) : O = t[25], v = i.map(O), t[17] = r, t[18] = i, t[19] = n, t[20] = u, t[21] = v;
   } else
-    x = t[21];
+    v = t[21];
   let I;
-  t[26] !== s || t[27] !== p || t[28] !== w || t[29] !== x ? (I = /* @__PURE__ */ d($e, { anchorEl: s, open: p, onClose: C, slotProps: w, children: x }), t[26] = s, t[27] = p, t[28] = w, t[29] = x, t[30] = I) : I = t[30];
-  let S;
-  return t[31] !== I || t[32] !== b ? (S = /* @__PURE__ */ z(he, { children: [
+  t[26] !== s || t[27] !== p || t[28] !== C || t[29] !== v ? (I = /* @__PURE__ */ d(Oe, { anchorEl: s, open: p, onClose: S, slotProps: C, children: v }), t[26] = s, t[27] = p, t[28] = C, t[29] = v, t[30] = I) : I = t[30];
+  let w;
+  return t[31] !== I || t[32] !== b ? (w = /* @__PURE__ */ M(he, { children: [
     b,
     I
-  ] }), t[31] = I, t[32] = b, t[33] = S) : S = t[33], S;
+  ] }), t[31] = I, t[32] = b, t[33] = w) : w = t[33], w;
 }
-function Po(t) {
+function Ao(t) {
   return t.setSectionValue;
 }
 const te = {
@@ -1557,8 +1665,8 @@ const te = {
     overflow: "visible",
     textOverflow: "clip"
   }
-}, _e = 12, ye = 1.5, lt = 2, zo = 1;
-function Ao(t) {
+}, Ge = 12, ye = 1.5, lt = 2, Mo = 1;
+function zo(t) {
   switch (t) {
     case "dashed":
       return {
@@ -1646,59 +1754,59 @@ function it(t) {
     fillPattern: i,
     strokeStyle: n,
     size: a
-  } = t, s = o === void 0 ? "circle" : o, c = l === void 0 ? !1 : l, p = i === void 0 ? "solid" : i, f = n === void 0 ? "solid" : n, u = a === void 0 ? _e : a, y = ht();
+  } = t, s = o === void 0 ? "circle" : o, c = l === void 0 ? !1 : l, p = i === void 0 ? "solid" : i, f = n === void 0 ? "solid" : n, u = a === void 0 ? Ge : a, y = ht();
   if (s === "line") {
     let V;
     e[0] !== f ? (V = To(f), e[0] = f, e[1] = V) : V = e[1];
     const {
-      dash: W,
+      dash: B,
       round: R
     } = V, H = `0 0 ${u} ${u}`;
-    let F;
-    e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (F = {
+    let U;
+    e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (U = {
       display: "block",
       overflow: "visible"
-    }, e[2] = F) : F = e[2];
-    const se = u / 2, Ce = u / 2, we = R ? "round" : "butt";
+    }, e[2] = U) : U = e[2];
+    const se = u / 2, Ce = u / 2, Ie = R ? "round" : "butt";
     let ae;
-    e[3] !== r || e[4] !== W || e[5] !== u || e[6] !== Ce || e[7] !== we || e[8] !== se ? (ae = /* @__PURE__ */ d("line", { x1: 0, y1: se, x2: u, y2: Ce, stroke: r, strokeWidth: lt, strokeDasharray: W, strokeLinecap: we }), e[3] = r, e[4] = W, e[5] = u, e[6] = Ce, e[7] = we, e[8] = se, e[9] = ae) : ae = e[9];
+    e[3] !== r || e[4] !== B || e[5] !== u || e[6] !== Ce || e[7] !== Ie || e[8] !== se ? (ae = /* @__PURE__ */ d("line", { x1: 0, y1: se, x2: u, y2: Ce, stroke: r, strokeWidth: lt, strokeDasharray: B, strokeLinecap: Ie }), e[3] = r, e[4] = B, e[5] = u, e[6] = Ce, e[7] = Ie, e[8] = se, e[9] = ae) : ae = e[9];
     let Le;
-    return e[10] !== u || e[11] !== ae || e[12] !== H ? (Le = /* @__PURE__ */ d("svg", { width: u, height: u, viewBox: H, "aria-hidden": !0, "data-shape": "line", style: F, children: ae }), e[10] = u, e[11] = ae, e[12] = H, e[13] = Le) : Le = e[13], Le;
+    return e[10] !== u || e[11] !== ae || e[12] !== H ? (Le = /* @__PURE__ */ d("svg", { width: u, height: u, viewBox: H, "aria-hidden": !0, "data-shape": "line", style: U, children: ae }), e[10] = u, e[11] = ae, e[12] = H, e[13] = Le) : Le = e[13], Le;
   }
   const h = c ? ye / 2 : 0, g = !c && p !== "solid";
-  let v;
-  e[14] !== r || e[15] !== p || e[16] !== g ? (v = g ? Do(p, r) : null, e[14] = r, e[15] = p, e[16] = g, e[17] = v) : v = e[17];
-  const b = v, C = c && f === "corners" && s === "square";
+  let x;
+  e[14] !== r || e[15] !== p || e[16] !== g ? (x = g ? Do(p, r) : null, e[14] = r, e[15] = p, e[16] = g, e[17] = x) : x = e[17];
+  const b = x, S = c && f === "corners" && s === "square";
   let L;
-  e[18] !== c || e[19] !== f ? (L = c ? Ao(f) : {
+  e[18] !== c || e[19] !== f ? (L = c ? zo(f) : {
     dash: void 0,
     round: !1
   }, e[18] = c, e[19] = f, e[20] = L) : L = e[20];
   const {
-    dash: w,
-    round: x
-  } = L, I = c ? ye : zo, S = c ? w : void 0, O = x ? "round" : "butt";
+    dash: C,
+    round: v
+  } = L, I = c ? ye : Mo, w = c ? C : void 0, O = v ? "round" : "butt";
   let k;
-  e[21] !== r || e[22] !== O || e[23] !== I || e[24] !== S ? (k = {
+  e[21] !== r || e[22] !== O || e[23] !== I || e[24] !== w ? (k = {
     stroke: r,
     strokeWidth: I,
-    strokeDasharray: S,
+    strokeDasharray: w,
     strokeLinecap: O
-  }, e[21] = r, e[22] = O, e[23] = I, e[24] = S, e[25] = k) : k = e[25];
+  }, e[21] = r, e[22] = O, e[23] = I, e[24] = w, e[25] = k) : k = e[25];
   const $ = k, _ = c ? "none" : g ? `url(#${y})` : r, G = `0 0 ${u} ${u}`;
   let m;
   e[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = {
     display: "block"
   }, e[26] = m) : m = e[26];
-  let M;
-  e[27] !== y || e[28] !== b ? (M = b && /* @__PURE__ */ d("defs", { children: /* @__PURE__ */ d("pattern", { id: y, patternUnits: "userSpaceOnUse", width: b.size, height: b.size, children: b.content }) }), e[27] = y, e[28] = b, e[29] = M) : M = e[29];
-  let A;
-  e[30] !== r || e[31] !== $ || e[32] !== _ || e[33] !== h || e[34] !== C || e[35] !== c || e[36] !== s || e[37] !== u || e[38] !== g ? (A = C ? /* @__PURE__ */ d(Eo, { size: u, color: r }) : s === "circle" ? /* @__PURE__ */ d("circle", { cx: u / 2, cy: u / 2, r: u / 2 - h, fill: _, ...$, stroke: c || g ? r : "none" }) : /* @__PURE__ */ d("rect", { x: h, y: h, width: u - h * 2, height: u - h * 2, fill: _, ...$, stroke: c || g ? r : "none" }), e[30] = r, e[31] = $, e[32] = _, e[33] = h, e[34] = C, e[35] = c, e[36] = s, e[37] = u, e[38] = g, e[39] = A) : A = e[39];
+  let P;
+  e[27] !== y || e[28] !== b ? (P = b && /* @__PURE__ */ d("defs", { children: /* @__PURE__ */ d("pattern", { id: y, patternUnits: "userSpaceOnUse", width: b.size, height: b.size, children: b.content }) }), e[27] = y, e[28] = b, e[29] = P) : P = e[29];
+  let z;
+  e[30] !== r || e[31] !== $ || e[32] !== _ || e[33] !== h || e[34] !== S || e[35] !== c || e[36] !== s || e[37] !== u || e[38] !== g ? (z = S ? /* @__PURE__ */ d(Eo, { size: u, color: r }) : s === "circle" ? /* @__PURE__ */ d("circle", { cx: u / 2, cy: u / 2, r: u / 2 - h, fill: _, ...$, stroke: c || g ? r : "none" }) : /* @__PURE__ */ d("rect", { x: h, y: h, width: u - h * 2, height: u - h * 2, fill: _, ...$, stroke: c || g ? r : "none" }), e[30] = r, e[31] = $, e[32] = _, e[33] = h, e[34] = S, e[35] = c, e[36] = s, e[37] = u, e[38] = g, e[39] = z) : z = e[39];
   let D;
-  return e[40] !== s || e[41] !== u || e[42] !== G || e[43] !== M || e[44] !== A ? (D = /* @__PURE__ */ z("svg", { width: u, height: u, viewBox: G, "aria-hidden": !0, "data-shape": s, style: m, children: [
-    M,
-    A
-  ] }), e[40] = s, e[41] = u, e[42] = G, e[43] = M, e[44] = A, e[45] = D) : D = e[45], D;
+  return e[40] !== s || e[41] !== u || e[42] !== G || e[43] !== P || e[44] !== z ? (D = /* @__PURE__ */ M("svg", { width: u, height: u, viewBox: G, "aria-hidden": !0, "data-shape": s, style: m, children: [
+    P,
+    z
+  ] }), e[40] = s, e[41] = u, e[42] = G, e[43] = P, e[44] = z, e[45] = D) : D = e[45], D;
 }
 function Eo(t) {
   const e = T(19), {
@@ -1721,15 +1829,15 @@ function Eo(t) {
   let h;
   e[8] !== s || e[9] !== y ? (h = /* @__PURE__ */ d("path", { d: y, ...s }), e[8] = s, e[9] = y, e[10] = h) : h = e[10];
   const g = `M${i + l} ${n} H${i} V${n - l}`;
-  let v;
-  e[11] !== s || e[12] !== g ? (v = /* @__PURE__ */ d("path", { d: g, ...s }), e[11] = s, e[12] = g, e[13] = v) : v = e[13];
+  let x;
+  e[11] !== s || e[12] !== g ? (x = /* @__PURE__ */ d("path", { d: g, ...s }), e[11] = s, e[12] = g, e[13] = x) : x = e[13];
   let b;
-  return e[14] !== p || e[15] !== u || e[16] !== h || e[17] !== v ? (b = /* @__PURE__ */ z(he, { children: [
+  return e[14] !== p || e[15] !== u || e[16] !== h || e[17] !== x ? (b = /* @__PURE__ */ M(he, { children: [
     p,
     u,
     h,
-    v
-  ] }), e[14] = p, e[15] = u, e[16] = h, e[17] = v, e[18] = b) : b = e[18], b;
+    x
+  ] }), e[14] = p, e[15] = u, e[16] = h, e[17] = x, e[18] = b) : b = e[18], b;
 }
 const Ho = 16;
 function rt(t) {
@@ -1745,36 +1853,36 @@ function rt(t) {
   } = o, c = l === void 0 ? "circle" : l, p = i === void 0 ? !1 : i, f = n === void 0 ? "solid" : n, u = a === void 0 ? "solid" : a, y = s === void 0 ? "vertical" : s, h = y === "horizontal";
   let g;
   e[0] !== r ? (g = r.reduce(Ro, 0), e[0] = r, e[1] = g) : g = e[1];
-  const b = Math.max(Ho, g), C = h ? te.listHorizontal : null;
+  const b = Math.max(Ho, g), S = h ? te.listHorizontal : null;
   let L;
-  e[2] !== C ? (L = {
+  e[2] !== S ? (L = {
     ...te.list,
-    ...C
-  }, e[2] = C, e[3] = L) : L = e[3];
-  let w;
+    ...S
+  }, e[2] = S, e[3] = L) : L = e[3];
+  let C;
   if (e[4] !== f || e[5] !== b || e[6] !== h || e[7] !== p || e[8] !== r || e[9] !== c || e[10] !== u) {
     let I;
-    e[12] !== f || e[13] !== b || e[14] !== h || e[15] !== p || e[16] !== c || e[17] !== u ? (I = (S, O) => /* @__PURE__ */ z(P, { sx: {
+    e[12] !== f || e[13] !== b || e[14] !== h || e[15] !== p || e[16] !== c || e[17] !== u ? (I = (w, O) => /* @__PURE__ */ M(A, { sx: {
       ...te.item,
       ...h ? te.itemHorizontal : null
     }, children: [
-      /* @__PURE__ */ d(P, { sx: {
+      /* @__PURE__ */ d(A, { sx: {
         ...te.gutter,
         width: h ? void 0 : b
-      }, children: /* @__PURE__ */ d(it, { shape: S.shape ?? c, color: S.color, isStrokeColor: S.isStrokeColor ?? p, fillPattern: S.fillPattern ?? f, strokeStyle: S.strokeStyle ?? u, size: S.size ?? _e }) }),
+      }, children: /* @__PURE__ */ d(it, { shape: w.shape ?? c, color: w.color, isStrokeColor: w.isStrokeColor ?? p, fillPattern: w.fillPattern ?? f, strokeStyle: w.strokeStyle ?? u, size: w.size ?? Ge }) }),
       /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", sx: {
         ...te.label,
         ...h ? te.labelHorizontal : null
-      }, children: S.label }),
-      S.value != null && /* @__PURE__ */ d(E, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: te.value, children: S.value })
-    ] }, `${S.label}-${O}`), e[12] = f, e[13] = b, e[14] = h, e[15] = p, e[16] = c, e[17] = u, e[18] = I) : I = e[18], w = r.map(I), e[4] = f, e[5] = b, e[6] = h, e[7] = p, e[8] = r, e[9] = c, e[10] = u, e[11] = w;
+      }, children: w.label }),
+      w.value != null && /* @__PURE__ */ d(E, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: te.value, children: w.value })
+    ] }, `${w.label}-${O}`), e[12] = f, e[13] = b, e[14] = h, e[15] = p, e[16] = c, e[17] = u, e[18] = I) : I = e[18], C = r.map(I), e[4] = f, e[5] = b, e[6] = h, e[7] = p, e[8] = r, e[9] = c, e[10] = u, e[11] = C;
   } else
-    w = e[11];
-  let x;
-  return e[19] !== y || e[20] !== L || e[21] !== w ? (x = /* @__PURE__ */ d(P, { "data-orientation": y, sx: L, children: w }), e[19] = y, e[20] = L, e[21] = w, e[22] = x) : x = e[22], x;
+    C = e[11];
+  let v;
+  return e[19] !== y || e[20] !== L || e[21] !== C ? (v = /* @__PURE__ */ d(A, { "data-orientation": y, sx: L, children: C }), e[19] = y, e[20] = L, e[21] = C, e[22] = v) : v = e[22], v;
 }
 function Ro(t, e) {
-  return Math.max(t, e.size ?? _e);
+  return Math.max(t, e.size ?? Ge);
 }
 const K = {
   container: {
@@ -1863,64 +1971,64 @@ function st(t) {
   const u = f, y = n[0], h = n[n.length - 1];
   let g;
   e[2] !== i ? (g = i.join(", "), e[2] = i, e[3] = g) : g = e[3];
-  const v = `linear-gradient(90deg, ${g})`, b = !a && n.length === i.length + 1, C = !a && !b;
+  const x = `linear-gradient(90deg, ${g})`, b = !a && n.length === i.length + 1, S = !a && !b;
   let L;
   e[4] !== n ? (L = (m) => `${n[m]?.label ?? ""} – ${n[m + 1]?.label ?? ""}`, e[4] = n, e[5] = L) : L = e[5];
-  const w = L;
-  let x;
-  e[6] !== s || e[7] !== l ? (x = s && /* @__PURE__ */ z(P, { sx: K.attribute, children: [
+  const C = L;
+  let v;
+  e[6] !== s || e[7] !== l ? (v = s && /* @__PURE__ */ M(A, { sx: K.attribute, children: [
     /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: l.colorBasedOn }),
     /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", children: s })
-  ] }), e[6] = s, e[7] = l, e[8] = x) : x = e[8];
-  const I = x;
-  if (C) {
+  ] }), e[6] = s, e[7] = l, e[8] = v) : v = e[8];
+  const I = v;
+  if (S) {
     let m;
-    e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ d(At, { fontSize: "small" }), e[9] = m) : m = e[9];
-    const M = `Discrete ramp needs ${i.length + 1} stops (one per color boundary) but got ${n.length}.`;
-    let A;
-    e[10] !== M ? (A = /* @__PURE__ */ z(P, { sx: K.error, children: [
+    e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ d(zt, { fontSize: "small" }), e[9] = m) : m = e[9];
+    const P = `Discrete ramp needs ${i.length + 1} stops (one per color boundary) but got ${n.length}.`;
+    let z;
+    e[10] !== P ? (z = /* @__PURE__ */ M(A, { sx: K.error, children: [
       m,
-      /* @__PURE__ */ d(E, { variant: "caption", color: "error", children: M })
-    ] }), e[10] = M, e[11] = A) : A = e[11];
+      /* @__PURE__ */ d(E, { variant: "caption", color: "error", children: P })
+    ] }), e[10] = P, e[11] = z) : z = e[11];
     let D;
-    return e[12] !== I || e[13] !== A ? (D = /* @__PURE__ */ z(P, { sx: K.container, children: [
+    return e[12] !== I || e[13] !== z ? (D = /* @__PURE__ */ M(A, { sx: K.container, children: [
       I,
-      A
-    ] }), e[12] = I, e[13] = A, e[14] = D) : D = e[14], D;
+      z
+    ] }), e[12] = I, e[13] = z, e[14] = D) : D = e[14], D;
   }
-  let S;
-  e[15] !== i || e[16] !== v || e[17] !== a || e[18] !== l || e[19] !== w ? (S = a ? /* @__PURE__ */ d(P, { role: "img", "aria-label": l.colorGradient, sx: {
+  let w;
+  e[15] !== i || e[16] !== x || e[17] !== a || e[18] !== l || e[19] !== C ? (w = a ? /* @__PURE__ */ d(A, { role: "img", "aria-label": l.colorGradient, sx: {
     width: "100%",
     height: "100%",
-    background: v
-  } }) : i.map((m, M) => /* @__PURE__ */ d(P, { role: "img", "aria-label": w(M), sx: {
+    background: x
+  } }) : i.map((m, P) => /* @__PURE__ */ d(A, { role: "img", "aria-label": C(P), sx: {
     ...K.step,
     backgroundColor: m
-  } }, M)), e[15] = i, e[16] = v, e[17] = a, e[18] = l, e[19] = w, e[20] = S) : S = e[20];
+  } }, P)), e[15] = i, e[16] = x, e[17] = a, e[18] = l, e[19] = C, e[20] = w) : w = e[20];
   let O;
-  e[21] !== S ? (O = /* @__PURE__ */ d(P, { sx: K.bar, children: S }), e[21] = S, e[22] = O) : O = e[22];
+  e[21] !== w ? (O = /* @__PURE__ */ d(A, { sx: K.bar, children: w }), e[21] = w, e[22] = O) : O = e[22];
   let k;
-  e[23] !== u || e[24] !== o.avg || e[25] !== p ? (k = u != null && o.avg != null && /* @__PURE__ */ d(ie, { title: p(o.avg), placement: "top", arrow: !0, children: /* @__PURE__ */ d(P, { sx: K.avgLine, style: {
+  e[23] !== u || e[24] !== o.avg || e[25] !== p ? (k = u != null && o.avg != null && /* @__PURE__ */ d(ie, { title: p(o.avg), placement: "top", arrow: !0, children: /* @__PURE__ */ d(A, { sx: K.avgLine, style: {
     left: `${u}%`
   } }) }), e[23] = u, e[24] = o.avg, e[25] = p, e[26] = k) : k = e[26];
   let $;
-  e[27] !== O || e[28] !== k ? ($ = /* @__PURE__ */ z(P, { sx: K.barWrap, children: [
+  e[27] !== O || e[28] !== k ? ($ = /* @__PURE__ */ M(A, { sx: K.barWrap, children: [
     O,
     k
   ] }), e[27] = O, e[28] = k, e[29] = $) : $ = e[29];
   let _;
-  e[30] !== i.length || e[31] !== y?.label || e[32] !== b || e[33] !== h?.label || e[34] !== n ? (_ = b ? /* @__PURE__ */ d(P, { sx: K.boundaryLabels, children: n.map((m, M) => {
-    const A = M === n.length - 1, D = M === 0 ? void 0 : A ? "translateX(-100%)" : "translateX(-50%)";
+  e[30] !== i.length || e[31] !== y?.label || e[32] !== b || e[33] !== h?.label || e[34] !== n ? (_ = b ? /* @__PURE__ */ d(A, { sx: K.boundaryLabels, children: n.map((m, P) => {
+    const z = P === n.length - 1, D = P === 0 ? void 0 : z ? "translateX(-100%)" : "translateX(-50%)";
     return /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", sx: K.boundaryLabel, style: {
-      left: `${M / i.length * 100}%`,
+      left: `${P / i.length * 100}%`,
       transform: D
-    }, children: m.label }, `${m.label}-${M}`);
-  }) }) : /* @__PURE__ */ z(P, { sx: K.labels, children: [
+    }, children: m.label }, `${m.label}-${P}`);
+  }) }) : /* @__PURE__ */ M(A, { sx: K.labels, children: [
     /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: y?.label }),
     /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: h?.label })
   ] }), e[30] = i.length, e[31] = y?.label, e[32] = b, e[33] = h?.label, e[34] = n, e[35] = _) : _ = e[35];
   let G;
-  return e[36] !== I || e[37] !== $ || e[38] !== _ ? (G = /* @__PURE__ */ z(P, { sx: K.container, children: [
+  return e[36] !== I || e[37] !== $ || e[38] !== _ ? (G = /* @__PURE__ */ M(A, { sx: K.container, children: [
     I,
     $,
     _
@@ -1966,24 +2074,24 @@ const ce = {
     flexDirection: "column",
     justifyContent: "space-between"
   }
-}, fe = 72, Bo = 0.3, Ae = 2, Ie = 4;
-function Wo(t) {
+}, fe = 72, Wo = 0.3, Te = 2, ke = 4;
+function Bo(t) {
   const e = (t.stops ?? []).filter((i) => Number.isFinite(i));
-  if (e.length >= Ae)
-    return e.sort((i, n) => n - i).slice(0, Ie);
+  if (e.length >= Te)
+    return e.sort((i, n) => n - i).slice(0, ke);
   const {
     min: o,
     max: r
   } = t;
   if (o === r) return [r];
-  const l = Math.min(Ie, Math.max(Ae, t.steps ?? Ie));
+  const l = Math.min(ke, Math.max(Te, t.steps ?? ke));
   return Array.from({
     length: l
   }, (i, n) => r - (r - o) * n / (l - 1));
 }
 function No(t, e) {
   if (e <= 1) return fe;
-  const o = 1 - (1 - Bo) * (t / (e - 1));
+  const o = 1 - (1 - Wo) * (t / (e - 1));
   return fe * o;
 }
 function at(t) {
@@ -1994,25 +2102,25 @@ function at(t) {
     attribute: i,
     formatValue: n
   } = o, a = n === void 0 ? String : n;
-  let s, c, p, f, u, y, h, g, v;
+  let s, c, p, f, u, y, h, g, x;
   if (e[0] !== i || e[1] !== o || e[2] !== a || e[3] !== l) {
-    const w = Wo(o), x = w.length;
+    const C = Bo(o), v = C.length;
     let I;
-    e[13] !== a || e[14] !== l || e[15] !== x ? (I = (_, G) => {
+    e[13] !== a || e[14] !== l || e[15] !== v ? (I = (_, G) => {
       const m = a(_);
-      return x <= 1 ? m : G === 0 ? /* @__PURE__ */ z(he, { children: [
+      return v <= 1 ? m : G === 0 ? /* @__PURE__ */ M(he, { children: [
         l.maxPrefix,
         m
-      ] }) : G === x - 1 ? /* @__PURE__ */ z(he, { children: [
+      ] }) : G === v - 1 ? /* @__PURE__ */ M(he, { children: [
         l.minPrefix,
         m
       ] }) : m;
-    }, e[13] = a, e[14] = l, e[15] = x, e[16] = I) : I = e[16];
-    const S = I;
-    p = P, g = ce.root, e[17] !== i || e[18] !== l ? (v = i && /* @__PURE__ */ z(P, { sx: ce.attribute, children: [
+    }, e[13] = a, e[14] = l, e[15] = v, e[16] = I) : I = e[16];
+    const w = I;
+    p = A, g = ce.root, e[17] !== i || e[18] !== l ? (x = i && /* @__PURE__ */ M(A, { sx: ce.attribute, children: [
       /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: l.radiusRangeBy }),
       /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", children: i })
-    ] }), e[17] = i, e[18] = l, e[19] = v) : v = e[19], c = P, y = ce.body;
+    ] }), e[17] = i, e[18] = l, e[19] = x) : x = e[19], c = A, y = ce.body;
     let O;
     e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (O = {
       ...ce.circles,
@@ -2020,33 +2128,33 @@ function at(t) {
       height: fe
     }, e[20] = O) : O = e[20];
     let k;
-    e[21] !== x ? (k = (_, G) => {
-      const m = No(G, x);
-      return /* @__PURE__ */ d(P, { "aria-hidden": !0, sx: {
+    e[21] !== v ? (k = (_, G) => {
+      const m = No(G, v);
+      return /* @__PURE__ */ d(A, { "aria-hidden": !0, sx: {
         ...ce.circle,
         width: m,
         height: m
       } }, G);
-    }, e[21] = x, e[22] = k) : k = e[22], h = /* @__PURE__ */ d(P, { sx: O, children: w.map(k) }), s = P, e[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = {
+    }, e[21] = v, e[22] = k) : k = e[22], h = /* @__PURE__ */ d(A, { sx: O, children: C.map(k) }), s = A, e[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = {
       ...ce.labels,
       height: fe
     }, e[23] = f) : f = e[23];
     let $;
-    e[24] !== S ? ($ = (_, G) => /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: S(_, G) }, G), e[24] = S, e[25] = $) : $ = e[25], u = w.map($), e[0] = i, e[1] = o, e[2] = a, e[3] = l, e[4] = s, e[5] = c, e[6] = p, e[7] = f, e[8] = u, e[9] = y, e[10] = h, e[11] = g, e[12] = v;
+    e[24] !== w ? ($ = (_, G) => /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: w(_, G) }, G), e[24] = w, e[25] = $) : $ = e[25], u = C.map($), e[0] = i, e[1] = o, e[2] = a, e[3] = l, e[4] = s, e[5] = c, e[6] = p, e[7] = f, e[8] = u, e[9] = y, e[10] = h, e[11] = g, e[12] = x;
   } else
-    s = e[4], c = e[5], p = e[6], f = e[7], u = e[8], y = e[9], h = e[10], g = e[11], v = e[12];
+    s = e[4], c = e[5], p = e[6], f = e[7], u = e[8], y = e[9], h = e[10], g = e[11], x = e[12];
   let b;
   e[26] !== s || e[27] !== f || e[28] !== u ? (b = /* @__PURE__ */ d(s, { sx: f, children: u }), e[26] = s, e[27] = f, e[28] = u, e[29] = b) : b = e[29];
-  let C;
-  e[30] !== c || e[31] !== y || e[32] !== h || e[33] !== b ? (C = /* @__PURE__ */ z(c, { sx: y, children: [
+  let S;
+  e[30] !== c || e[31] !== y || e[32] !== h || e[33] !== b ? (S = /* @__PURE__ */ M(c, { sx: y, children: [
     h,
     b
-  ] }), e[30] = c, e[31] = y, e[32] = h, e[33] = b, e[34] = C) : C = e[34];
+  ] }), e[30] = c, e[31] = y, e[32] = h, e[33] = b, e[34] = S) : S = e[34];
   let L;
-  return e[35] !== p || e[36] !== C || e[37] !== g || e[38] !== v ? (L = /* @__PURE__ */ z(p, { sx: g, children: [
-    v,
-    C
-  ] }), e[35] = p, e[36] = C, e[37] = g, e[38] = v, e[39] = L) : L = e[39], L;
+  return e[35] !== p || e[36] !== S || e[37] !== g || e[38] !== x ? (L = /* @__PURE__ */ M(p, { sx: g, children: [
+    x,
+    S
+  ] }), e[35] = p, e[36] = S, e[37] = g, e[38] = x, e[39] = L) : L = e[39], L;
 }
 const oe = {
   list: {
@@ -2116,11 +2224,11 @@ function ct(t) {
   let a;
   if (e[2] !== o.items || e[3] !== l) {
     let c;
-    e[5] !== l ? (c = (p, f) => /* @__PURE__ */ z(P, { sx: {
+    e[5] !== l ? (c = (p, f) => /* @__PURE__ */ M(A, { sx: {
       ...oe.item,
       ...l ? oe.itemHorizontal : null
     }, children: [
-      /* @__PURE__ */ d(P, { component: "img", src: p.icon, alt: "", sx: oe.icon }),
+      /* @__PURE__ */ d(A, { component: "img", src: p.icon, alt: "", sx: oe.icon }),
       /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", sx: {
         ...oe.label,
         ...l ? oe.labelHorizontal : null
@@ -2130,7 +2238,7 @@ function ct(t) {
   } else
     a = e[4];
   let s;
-  return e[7] !== r || e[8] !== n || e[9] !== a ? (s = /* @__PURE__ */ d(P, { "data-orientation": r, sx: n, children: a }), e[7] = r, e[8] = n, e[9] = a, e[10] = s) : s = e[10], s;
+  return e[7] !== r || e[8] !== n || e[9] !== a ? (s = /* @__PURE__ */ d(A, { "data-orientation": r, sx: n, children: a }), e[7] = r, e[8] = n, e[9] = a, e[10] = s) : s = e[10], s;
 }
 function dt(t) {
   const e = T(10), {
@@ -2173,7 +2281,7 @@ function Uo() {
   t[0] !== o ? (r = (s) => o ? s.layers[o.layerId]?.variables : void 0, t[0] = o, t[1] = r) : r = t[1];
   const l = Z(e, r), {
     labels: i
-  } = B();
+  } = W();
   if (!l || l.length === 0)
     return null;
   let n;
@@ -2183,15 +2291,15 @@ function Uo() {
   } else
     n = t[4];
   let a;
-  return t[7] !== n ? (a = /* @__PURE__ */ d(P, { sx: Fo.stack, children: n }), t[7] = n, t[8] = a) : a = t[8], a;
+  return t[7] !== n ? (a = /* @__PURE__ */ d(A, { sx: Fo.stack, children: n }), t[7] = n, t[8] = a) : a = t[8], a;
 }
 const an = {
   // Composition shell
   Provider: Nt,
   Group: jt,
   Row: Xt,
-  Actions: Qe,
-  Sortable: vo,
+  Actions: Ye,
+  Sortable: xo,
   // Store-connected actions & controls (context-driven)
   VisibilityToggle: Jt,
   RowMenu: oo,
@@ -2206,7 +2314,7 @@ const an = {
   PanelMenu: po,
   VisibleLayers: ho,
   Opacity: Go,
-  ConfigSelect: Mo,
+  ConfigSelect: Po,
   Item: Uo,
   // Pure UI
   ItemUI: dt,