@carto/ps-react-ui 4.17.2 → 4.18.0

package/dist/legend.js

@@ -1,18 +1,18 @@
 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 Pe, j as xe, l as Ee } from "./legend-store-registry-Bo8U_qWM.js";
-import { Box as A, IconButton as ve, Typography as E, Collapse as He, createSvgIcon as wt, Menu as $e, CircularProgress as Re, 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 Ve, 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 We, verticalListSortingStrategy as Ne } from "@dnd-kit/sortable";
-import { S as Fe } from "./smart-tooltip-DFV6GD8R.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 Ae, 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), {
@@ -73,47 +73,47 @@ function Nt(t) {
   }, 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;
+  }, e[16] = g, e[17] = x) : x = e[17];
+  const b = x;
   let S;
-  e[18] !== a || e[19] !== b ? (S = /* @__PURE__ */ d(Ue.Provider, { value: b, children: a }), e[18] = a, e[19] = b, e[20] = S) : S = e[20];
+  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] !== 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(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,11 +140,11 @@ 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 we = (t, e) => `${t}:${e}`;
+const Se = (t, e) => `${t}:${e}`;
 function de(t) {
   const e = t.indexOf(":");
   if (e === -1) return null;
@@ -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 = we(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}`, 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 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: C }), 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 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: v,
-      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;
-}
-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,14 +215,21 @@ const ot = 48, Y = {
         opacity: 1
       }
     },
-    "&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *": {
-      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,
@@ -309,6 +241,14 @@ const ot = 48, Y = {
         pointerEvents: "none"
       }
     },
+    "&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *": {
+      opacity: 1,
+      width: "auto",
+      minWidth: 0,
+      padding: "2px",
+      overflow: "visible",
+      pointerEvents: "auto"
+    },
     "&:hover .PsLegend-groupActions, &:focus-within .PsLegend-groupActions": {
       width: "auto",
       minWidth: 0,
@@ -335,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: {
@@ -382,8 +295,11 @@ 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: {
-    flex: 1,
     minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -418,61 +334,175 @@ 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 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 = (x) => /* @__PURE__ */ d(Ke.Provider, { value: o, children: /* @__PURE__ */ M(A, { ref: x?.rootRef, style: x?.rootStyle, sx: [Y.group, x?.dragging === !0 && Y.groupDragging], children: [
+  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: [
-      x?.handle,
-      /* @__PURE__ */ M(A, { sx: Y.titleArea, role: "button", tabIndex: 0, "aria-expanded": !n.collapsed, onClick: b, onKeyDown: je(b), 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(Fe, { title: n.label, dependencies: [n.label], children: (I) => {
+        /* @__PURE__ */ d(Ue, { title: n.label, dependencies: [n.label], children: (I) => {
           const {
             ref: w
           } = I;
           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(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 })
+    /* @__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(tt, { kind: "group", id: o, render: L }) : L(), e[23] = o, e[24] = L, e[25] = p, e[26] = C) : C = e[26], 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 we("layer", t.id);
+  return Se("layer", t.id);
 }
 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: {
@@ -487,15 +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 actions slot itself also
-    // collapses to zero width while faded (see `PsLegend-rowActions` below)
-    // so the title can grow to the trailing edge. 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
       }),
@@ -506,14 +538,21 @@ const j = {
         opacity: 1
       }
     },
-    "&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *": {
-      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,
@@ -525,6 +564,14 @@ const j = {
         pointerEvents: "none"
       }
     },
+    "&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *": {
+      opacity: 1,
+      width: "auto",
+      minWidth: 0,
+      padding: "2px",
+      overflow: "visible",
+      pointerEvents: "auto"
+    },
     "&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions": {
       width: "auto",
       minWidth: 0,
@@ -565,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",
@@ -580,6 +629,9 @@ const j = {
     zIndex: 2,
     backgroundColor: "background.paper"
   },
+  headerGrouped: {
+    paddingLeft: 4.5
+  },
   titleBox: {
     flex: 1,
     minWidth: 0,
@@ -606,8 +658,11 @@ 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: {
-    flex: 1,
     minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -657,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();
@@ -677,62 +738,59 @@ 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 S;
-  e[7] !== r ? (S = Ye(r), e[7] = r, e[8] = S) : S = e[8];
+  e[7] !== r ? (S = Je(r), e[7] = r, e[8] = S) : S = e[8];
   const {
     actions: L,
     body: C
-  } = S, x = !n.visible || n.collapsed, I = p ? ot : 0, w = n.visible && 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] !== C || e[15] !== w || 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__ */ M(A, { ref: m?.rootRef, style: m?.rootStyle, sx: [j.row, m?.dragging === !0 && j.rowDragging], children: [
-    /* @__PURE__ */ M(A, { 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__ */ M(A, { sx: [j.titleBox, w && j.titleBoxInteractive], ...w && {
+      /* @__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__ */ M(A, { sx: j.titleLine, children: [
-          /* @__PURE__ */ d(Fe, { title: n.name, dependencies: [n.name], children: (P) => {
+        /* @__PURE__ */ M(A, { sx: F.titleLine, children: [
+          /* @__PURE__ */ d(Ue, { title: n.name, dependencies: [n.name], children: (P) => {
             const {
               ref: z
             } = P;
-            return /* @__PURE__ */ d(E, { ref: z, variant: "button", color: n.visible ? "text.primary" : "text.disabled", sx: j.title, children: n.name });
+            return /* @__PURE__ */ d(E, { ref: z, variant: "button", color: n.visible ? "text.primary" : "text.disabled", sx: F.title, children: n.name });
           } }),
-          w && /* @__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(A, { className: "PsLegend-rowActions", sx: j.actions, children: L })
+      /* @__PURE__ */ d(A, { className: "PsLegend-rowActions", sx: F.actions, children: L })
     ] }),
-    /* @__PURE__ */ M(He, { in: !x, children: [
-      /* @__PURE__ */ d(A, { sx: n.visible ? j.content : {
-        ...j.content,
-        ...j.dimmed
-      }, children: C }),
-      n.helperText && /* @__PURE__ */ d(A, { 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] = C, e[15] = w, 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;
@@ -752,17 +810,17 @@ 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);
+  }, 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) {
     S = o;
@@ -784,13 +842,13 @@ function Jt(t) {
   } else
     return null;
   const {
-    hideLayer: x,
+    hideLayer: v,
     showLayer: I
-  } = C ?? s, w = Yt[S], O = S === "hidden" ? I : x, k = S === "visible" ? void 0 : "active";
+  } = C ?? s, w = Yt[S], O = S === "hidden" ? I : v, k = S === "visible" ? void 0 : "active";
   let $;
   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;
 }
@@ -800,18 +858,18 @@ 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);
@@ -820,17 +878,17 @@ function Oe(t) {
   let L;
   e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (L = () => u.current, e[2] = L) : L = e[2];
   const C = 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 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: C,
     setBusy: S,
-    close: v
+    close: x
   }, e[4] = p, e[5] = w) : w = e[5];
   const O = w;
   if (!n || !o)
@@ -843,13 +901,13 @@ 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];
+  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($e, { 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];
+  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] !== P || e[21] !== z ? (D = /* @__PURE__ */ M(Xe.Provider, { value: O, children: [
+  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;
@@ -859,9 +917,9 @@ function oo(t) {
     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()) {
@@ -876,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;
@@ -891,7 +949,7 @@ 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;
@@ -904,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;
@@ -921,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;
@@ -942,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);
@@ -965,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);
@@ -983,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, Pe), {
+  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 = Pe(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;
@@ -1001,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;
@@ -1016,7 +1074,7 @@ 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;
@@ -1031,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
@@ -1095,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;
@@ -1111,23 +1169,23 @@ function ho() {
   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(Pt, { 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(A, { 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];
+  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 S = $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 C, x;
+  let C, v;
   t[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = {
     disablePadding: !0
-  }, x = {
+  }, v = {
     paper: {
       sx: ee.paper
     }
-  }, t[13] = C, t[14] = x) : (C = t[13], x = t[14]);
+  }, t[13] = C, t[14] = v) : (C = t[13], v = t[14]);
   const I = `${n.enabledLayers} (${a})`;
   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];
@@ -1138,10 +1196,10 @@ function ho() {
   ] }, P.id))], t[17] = n.hideLayer, t[18] = i, t[19] = O) : O = t[19];
   const k = l.flatMap(O);
   let $;
-  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] !== x ? ($ = /* @__PURE__ */ M(S, { anchorEl: o, open: s, onClose: u, TransitionProps: L, MenuListProps: C, slotProps: x, children: [
+  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] = S, t[21] = o, t[22] = u, t[23] = s, t[24] = w, t[25] = k, t[26] = L, t[27] = C, 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__ */ M(he, { children: [
     b,
@@ -1155,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($);
@@ -1190,13 +1248,13 @@ function vo(t) {
     if (!G || !m || k.code !== "ArrowDown" && k.code !== "ArrowUp")
       return;
     k.preventDefault();
-    const D = k.code === "ArrowDown", W = z.getEnabled().filter((R) => R.id !== G.id && c(String(G.id), String(R.id))).flatMap((R) => {
+    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;
@@ -1204,24 +1262,24 @@ function vo(t) {
   e[4] !== f ? (u = {
     coordinateGetter: f
   }, e[4] = f, e[5] = u) : u = e[5];
-  const y = Et(Ae(Ht), Ae(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;
+  }, e[8] = r, e[9] = x) : x = e[9];
+  const b = x;
   let S;
   e[10] !== r ? (S = (k) => {
     i(null);
@@ -1236,39 +1294,39 @@ function vo(t) {
       return;
     const P = X(r).getState();
     if (G.kind === "group") {
-      const R = xe(P).findIndex((H) => H.id === m.id);
+      const R = ve(P).findIndex((H) => H.id === m.id);
       R !== -1 && P.moveGroup(G.id, R);
       return;
     }
     const z = P.layers[G.id], D = P.layers[m.id];
     if (!z || !D || z.groupId !== D.groupId)
       return;
-    const W = re(P, z.groupId).findIndex((R) => R.id === m.id);
-    W !== -1 && P.moveLayer(G.id, W);
+    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 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];
+  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(Co, { activeId: l }), e[16] = l, e[17] = I) : I = e[17];
   let w;
-  e[18] !== I ? (w = /* @__PURE__ */ d(Wt, { children: I }), e[18] = I, e[19] = w) : w = e[19];
+  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] !== w || e[25] !== x ? (O = /* @__PURE__ */ d(Je.Provider, { value: !0, children: /* @__PURE__ */ M(Vt, { sensors: y, collisionDetection: g, onDragStart: b, onDragEnd: L, onDragCancel: C, children: [
-    x,
+  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] = x, e[26] = O) : O = e[26], O;
+  ] }) }), 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(So), ...re(t, void 0).map(wo)];
+  return [...ve(t).map(So), ...re(t, void 0).map(wo)];
 }
 function wo(t) {
-  return we("layer", t.id);
+  return Se("layer", t.id);
 }
 function So(t) {
-  return we("group", t.id);
+  return Se("group", t.id);
 }
 function Co(t) {
   const e = T(15), {
@@ -1279,10 +1337,10 @@ function Co(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;
@@ -1326,14 +1384,14 @@ const pe = {
       textAlign: "right"
     }
   }
-}, Me = (t) => Math.min(100, Math.max(0, Math.round(t)));
+}, ze = (t) => Math.min(100, Math.max(0, Math.round(t)));
 function Io() {
   const t = T(10), e = N(), o = Q();
   let r;
   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;
@@ -1352,31 +1410,31 @@ 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;
-  t[2] !== s || t[3] !== i ? (u = s ?? Me(i * 100), t[2] = s, t[3] = i, t[4] = u) : u = t[4];
+  t[2] !== s || t[3] !== i ? (u = s ?? ze(i * 100), t[2] = s, t[3] = i, t[4] = u) : u = t[4];
   const y = u;
   let h;
   t[5] !== r || t[6] !== n ? (h = (H) => {
-    const F = Me(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;
+    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);
@@ -1384,10 +1442,10 @@ function $o() {
   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 x;
-  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ d(At, { fontSize: "small" }), t[14] = x) : x = t[14];
+  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];
+  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;
@@ -1396,12 +1454,12 @@ function $o() {
     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(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];
@@ -1419,16 +1477,16 @@ function $o() {
   }, 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: 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 W;
-  t[41] !== _ || t[42] !== V ? (W = /* @__PURE__ */ M(A, { sx: pe.inlineControls, children: [
+  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__ */ M(A, { 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();
@@ -1497,7 +1555,7 @@ function Po() {
   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, 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;
@@ -1510,13 +1568,13 @@ function Po() {
     ...ne.chevron,
     ...ne.chevronOpen
   } : ne.chevron, t[5] = p, t[6] = g) : g = t[6];
-  let v;
-  t[7] !== g ? (v = /* @__PURE__ */ d(Mt, { 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__ */ M($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];
+    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;
@@ -1528,16 +1586,16 @@ function Po() {
       }
     }
   }, t[15] = L, t[16] = C) : C = t[16];
-  let x;
+  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] !== C || t[29] !== x ? (I = /* @__PURE__ */ d($e, { anchorEl: s, open: p, onClose: S, slotProps: C, children: x }), t[26] = s, t[27] = p, t[28] = C, t[29] = x, t[30] = I) : I = t[30];
+  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,
@@ -1607,7 +1665,7 @@ const te = {
     overflow: "visible",
     textOverflow: "clip"
   }
-}, _e = 12, ye = 1.5, lt = 2, Mo = 1;
+}, Ge = 12, ye = 1.5, lt = 2, Mo = 1;
 function zo(t) {
   switch (t) {
     case "dashed":
@@ -1696,29 +1754,29 @@ 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, Se = u / 2, Ce = 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] !== Se || e[7] !== Ce || e[8] !== se ? (ae = /* @__PURE__ */ d("line", { x1: 0, y1: se, x2: u, y2: Se, stroke: r, strokeWidth: lt, strokeDasharray: W, strokeLinecap: Ce }), e[3] = r, e[4] = W, e[5] = u, e[6] = Se, e[7] = Ce, 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, S = 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 ? zo(f) : {
     dash: void 0,
@@ -1726,8 +1784,8 @@ function it(t) {
   }, e[18] = c, e[19] = f, e[20] = L) : L = e[20];
   const {
     dash: C,
-    round: x
-  } = L, I = c ? ye : Mo, w = c ? C : void 0, O = x ? "round" : "butt";
+    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] !== w ? (k = {
     stroke: r,
@@ -1771,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__ */ M(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) {
@@ -1811,7 +1869,7 @@ function rt(t) {
       /* @__PURE__ */ d(A, { sx: {
         ...te.gutter,
         width: h ? void 0 : b
-      }, 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 ?? _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
@@ -1820,11 +1878,11 @@ function rt(t) {
     ] }, `${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
     C = e[11];
-  let x;
-  return e[19] !== y || e[20] !== L || e[21] !== C ? (x = /* @__PURE__ */ d(A, { "data-orientation": y, sx: L, children: C }), e[19] = y, e[20] = L, e[21] = C, e[22] = x) : x = e[22], x;
+  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: {
@@ -1913,16 +1971,16 @@ 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, S = !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 C = L;
-  let x;
-  e[6] !== s || e[7] !== l ? (x = s && /* @__PURE__ */ M(A, { sx: K.attribute, children: [
+  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;
+  ] }), 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(zt, { fontSize: "small" }), e[9] = m) : m = e[9];
@@ -1939,14 +1997,14 @@ function st(t) {
     ] }), e[12] = I, e[13] = z, e[14] = D) : D = e[14], D;
   }
   let w;
-  e[15] !== i || e[16] !== v || e[17] !== a || e[18] !== l || e[19] !== C ? (w = a ? /* @__PURE__ */ d(A, { role: "img", "aria-label": l.colorGradient, sx: {
+  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
+    background: x
   } }) : i.map((m, P) => /* @__PURE__ */ d(A, { role: "img", "aria-label": C(P), sx: {
     ...K.step,
     backgroundColor: m
-  } }, P)), e[15] = i, e[16] = v, e[17] = a, e[18] = l, e[19] = C, e[20] = w) : w = 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] !== w ? (O = /* @__PURE__ */ d(A, { sx: K.bar, children: w }), e[21] = w, e[22] = O) : O = e[22];
   let k;
@@ -2016,24 +2074,24 @@ const ce = {
     flexDirection: "column",
     justifyContent: "space-between"
   }
-}, fe = 72, Bo = 0.3, ze = 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 >= ze)
-    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(ze, 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) {
@@ -2044,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 C = Wo(o), x = C.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__ */ M(he, { children: [
+      return v <= 1 ? m : G === 0 ? /* @__PURE__ */ M(he, { children: [
         l.maxPrefix,
         m
-      ] }) : G === x - 1 ? /* @__PURE__ */ M(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];
+    }, 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 ? (v = i && /* @__PURE__ */ M(A, { sx: ce.attribute, children: [
+    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 = A, 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,
@@ -2070,21 +2128,21 @@ function at(t) {
       height: fe
     }, e[20] = O) : O = e[20];
     let k;
-    e[21] !== x ? (k = (_, G) => {
-      const m = No(G, x);
+    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(A, { sx: O, children: C.map(k) }), s = A, 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] !== 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] = 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 S;
@@ -2093,10 +2151,10 @@ function at(t) {
     b
   ] }), 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] !== S || e[37] !== g || e[38] !== v ? (L = /* @__PURE__ */ M(p, { sx: g, children: [
-    v,
+  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] = v, e[39] = L) : L = e[39], L;
+  ] }), e[35] = p, e[36] = S, e[37] = g, e[38] = x, e[39] = L) : L = e[39], L;
 }
 const oe = {
   list: {
@@ -2223,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;
@@ -2240,8 +2298,8 @@ const an = {
   Provider: Nt,
   Group: jt,
   Row: Xt,
-  Actions: Qe,
-  Sortable: vo,
+  Actions: Ye,
+  Sortable: xo,
   // Store-connected actions & controls (context-driven)
   VisibilityToggle: Jt,
   RowMenu: oo,