@carto/ps-react-ui 4.12.2 → 4.13.0

package/dist/legend.js

@@ -0,0 +1,1536 @@
+import { jsx as s, jsxs as E, Fragment as se } from "react/jsx-runtime";
+import { c as R } from "react/compiler-runtime";
+import { createContext as he, useContext as me, useState as oe, useLayoutEffect as ye, Children as Ae, isValidElement as Be, useEffect as We, useId as Fe } from "react";
+import { L as Ne, h as Ue, g as je, a as Ze, i as Xe, r as Ke, u as qe, j as ee, k as Y, l as X, s as Je } from "./selectors-DwHj6mE2.js";
+import { Box as P, Typography as V, IconButton as de, Collapse as ve, createSvgIcon as Qe, Menu as Le, MenuItem as Ce, ListItemIcon as Ye, Slider as et, Popover as tt, Tooltip as we, InputAdornment as lt, OutlinedInput as ot, ButtonBase as nt } from "@mui/material";
+import { ExpandMore as Se, ExpandLess as Ie, LayersOutlined as it, VisibilityOffOutlined as rt, VisibilityOutlined as st, MoreVert as at, CenterFocusStrong as ct, ArrowDropDown as dt, ErrorOutline as pt } from "@mui/icons-material";
+import { S as $e } from "./smart-tooltip-D4vwQpFf.js";
+import "zustand";
+import "zustand/vanilla";
+import "zustand/middleware";
+import "zustand/react/shallow";
+import { Opacity as ft } from "@carto/meridian-ds/custom-icons";
+const ae = {
+  expandLayer: "Expand layer",
+  collapseLayer: "Collapse layer",
+  hideLayer: "Hide layer",
+  showLayer: "Show layer",
+  layerOptions: "Layer options",
+  zoomTo: "Zoom to",
+  hideGroup: "Hide group",
+  showGroup: "Show group",
+  expandGroup: "Expand group",
+  collapseGroup: "Collapse group",
+  opacity: "Opacity",
+  attribute: "Attribute",
+  radiusRangeBy: "Radius range by",
+  colorBasedOn: "Color based on",
+  colorGradient: "Color gradient",
+  maxPrefix: "MAX: ",
+  minPrefix: "MIN: "
+}, ke = he({
+  labels: ae
+});
+function K() {
+  return me(ke);
+}
+function ut(t) {
+  const e = R(24), {
+    id: o,
+    layers: n,
+    groups: i,
+    labels: r,
+    keepAlive: l,
+    children: p
+  } = t, a = l === void 0 ? !0 : l;
+  let d;
+  e[0] !== i || e[1] !== o || e[2] !== n ? (d = () => {
+    if (Ue(o))
+      return je(o);
+    const L = Ze(o, {
+      layers: n,
+      groups: i
+    });
+    return Xe(o, L), L;
+  }, e[0] = i, e[1] = o, e[2] = n, e[3] = d) : d = e[3];
+  const [f] = oe(d);
+  let m, c;
+  e[4] !== o || e[5] !== a || e[6] !== f ? (m = () => (Ke(o, f), () => {
+    qe(o, {
+      keepAlive: a
+    });
+  }), c = [o, f, a], e[4] = o, e[5] = a, e[6] = f, e[7] = m, e[8] = c) : (m = e[7], c = e[8]), ye(m, c);
+  let g, u;
+  e[9] !== i || e[10] !== n || e[11] !== f ? (g = () => {
+    f.getState()._sync(n, i ?? []);
+  }, u = [f, n, i], e[9] = i, e[10] = n, e[11] = f, e[12] = g, e[13] = u) : (g = e[12], u = e[13]), ye(g, u);
+  let h;
+  e[14] !== r ? (h = r ? {
+    ...ae,
+    ...r
+  } : ae, e[14] = r, e[15] = h) : h = e[15];
+  let y;
+  e[16] !== h ? (y = {
+    labels: h
+  }, e[16] = h, e[17] = y) : y = e[17];
+  const x = y;
+  let b;
+  e[18] !== p || e[19] !== x ? (b = /* @__PURE__ */ s(ke.Provider, { value: x, children: p }), e[18] = p, e[19] = x, e[20] = b) : b = e[20];
+  let v;
+  return e[21] !== o || e[22] !== b ? (v = /* @__PURE__ */ s(Ne.Provider, { value: o, children: b }), e[21] = o, e[22] = b, e[23] = v) : v = e[23], v;
+}
+const ze = he(null);
+function te() {
+  return me(ze);
+}
+const _e = he(null);
+function ht() {
+  return me(_e);
+}
+const mt = {
+  fadeGroup: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0.25
+  }
+};
+function Pe(t) {
+  const e = R(3), {
+    children: o
+  } = t, i = te() !== null ? "PsLegend-rowFade" : "PsLegend-groupFade";
+  let r;
+  return e[0] !== o || e[1] !== i ? (r = /* @__PURE__ */ s(P, { className: i, sx: mt.fadeGroup, children: o }), e[0] = o, e[1] = i, e[2] = r) : r = e[2], r;
+}
+function Me(t) {
+  const e = [], o = [];
+  for (const n of Ae.toArray(t))
+    gt(n, Pe) ? e.push(n) : o.push(n);
+  return {
+    actions: e,
+    body: o
+  };
+}
+function gt(t, e) {
+  return Be(t) && t.type === e;
+}
+const Oe = 48, ie = {
+  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.
+    "& .PsLegend-groupFade > *": {
+      opacity: 1,
+      transition: ({
+        transitions: t
+      }) => t.create("opacity", {
+        duration: t.duration.standard,
+        easing: t.easing.easeInOut
+      }),
+      "@media (hover: hover)": {
+        opacity: 0
+      },
+      "&.active": {
+        opacity: 1
+      }
+    },
+    "&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *": {
+      opacity: 1
+    }
+  },
+  // 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: Oe,
+    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,
+    backgroundColor: "background.paper"
+  },
+  groupIcon: {
+    display: "flex",
+    color: "text.secondary"
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  // Icon buttons match the row header's 24×24 (2px padding + 20px icon).
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0.25,
+    flexShrink: 0,
+    "& .MuiIconButton-root": {
+      padding: "2px"
+    }
+  }
+};
+function yt(t) {
+  const e = R(37), {
+    groupId: o,
+    children: n
+  } = t, i = ee();
+  let r;
+  e[0] !== o ? (r = ($) => $.groups[o], e[0] = o, e[1] = r) : r = e[1];
+  const l = Y(i, r), p = Y(i, xt), {
+    labels: a
+  } = K();
+  if (!l)
+    return null;
+  let d;
+  e[2] !== n ? (d = Me(n), e[2] = n, e[3] = d) : d = e[3];
+  const {
+    actions: f,
+    body: m
+  } = d;
+  let c;
+  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ s(P, { sx: ie.groupIcon, children: /* @__PURE__ */ s(it, { fontSize: "small" }) }), e[4] = c) : c = e[4];
+  let g, u;
+  e[5] !== l.label ? (g = [l.label], u = ($) => {
+    const {
+      ref: M
+    } = $;
+    return /* @__PURE__ */ s(V, { ref: M, variant: "button", color: "text.primary", sx: ie.label, children: l.label });
+  }, e[5] = l.label, e[6] = g, e[7] = u) : (g = e[6], u = e[7]);
+  let h;
+  e[8] !== l.label || e[9] !== g || e[10] !== u ? (h = /* @__PURE__ */ s($e, { title: l.label, dependencies: g, children: u }), e[8] = l.label, e[9] = g, e[10] = u, e[11] = h) : h = e[11];
+  let y;
+  e[12] !== l.collapsed || e[13] !== o || e[14] !== p ? (y = () => p(o, !l.collapsed), e[12] = l.collapsed, e[13] = o, e[14] = p, e[15] = y) : y = e[15];
+  const x = l.collapsed ? a.expandGroup : a.collapseGroup;
+  let b;
+  e[16] !== l.collapsed ? (b = l.collapsed ? /* @__PURE__ */ s(Se, { fontSize: "small" }) : /* @__PURE__ */ s(Ie, { fontSize: "small" }), e[16] = l.collapsed, e[17] = b) : b = e[17];
+  let v;
+  e[18] !== y || e[19] !== x || e[20] !== b ? (v = /* @__PURE__ */ s(de, { size: "small", onClick: y, "aria-label": x, children: b }), e[18] = y, e[19] = x, e[20] = b, e[21] = v) : v = e[21];
+  let L;
+  e[22] !== f || e[23] !== v ? (L = /* @__PURE__ */ E(P, { sx: ie.actions, children: [
+    f,
+    v
+  ] }), e[22] = f, e[23] = v, e[24] = L) : L = e[24];
+  let w;
+  e[25] !== L || e[26] !== h ? (w = /* @__PURE__ */ E(P, { sx: ie.header, children: [
+    c,
+    h,
+    L
+  ] }), e[25] = L, e[26] = h, e[27] = w) : w = e[27];
+  const k = !l.collapsed;
+  let C;
+  e[28] !== m || e[29] !== k ? (C = /* @__PURE__ */ s(ve, { in: k, children: m }), e[28] = m, e[29] = k, e[30] = C) : C = e[30];
+  let S;
+  e[31] !== w || e[32] !== C ? (S = /* @__PURE__ */ E(P, { sx: ie.group, children: [
+    w,
+    C
+  ] }), e[31] = w, e[32] = C, e[33] = S) : S = e[33];
+  let z;
+  return e[34] !== o || e[35] !== S ? (z = /* @__PURE__ */ s(_e.Provider, { value: o, children: S }), e[34] = o, e[35] = S, e[36] = z) : z = e[36], z;
+}
+function xt(t) {
+  return t.setGroupCollapsed;
+}
+const Z = {
+  // Padding lives on header/content/footer (not the root) so the sticky
+  // header is opaque and full-bleed while pinned.
+  row: {
+    display: "flex",
+    flexDirection: "column",
+    "& + &": {
+      borderTop: "1px solid",
+      borderColor: "divider"
+    },
+    // Hover-fade actions (widgets-v2 Wrapper parity). Direct children of
+    // `.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.
+    "& .PsLegend-rowFade > *": {
+      opacity: 1,
+      transition: ({
+        transitions: t
+      }) => t.create("opacity", {
+        duration: t.duration.standard,
+        easing: t.easing.easeInOut
+      }),
+      "@media (hover: hover)": {
+        opacity: 0
+      },
+      "&.active": {
+        opacity: 1
+      }
+    },
+    "&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *": {
+      opacity: 1
+    },
+    // Hovering anywhere in the row also reveals the category/icon values
+    // (the renderers keep their own list-scoped rule for standalone usage).
+    "&:hover .PsLegend-value, &:focus-within .PsLegend-value": {
+      opacity: 1
+    }
+  },
+  // Figma `_Legend header`: 16px top/left inset (title glyphs start at
+  // y≈17, x=16 in the 68px-tall header), actions share the title's vertical
+  // 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).
+  header: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 0.5,
+    minHeight: 32,
+    padding: ({
+      spacing: t
+    }) => t(1.5, 2, 1.5, 2),
+    position: "sticky",
+    // Above MUI's z-index-1 form internals (e.g. InputLabel) in row content,
+    // below the group header (3).
+    zIndex: 2,
+    backgroundColor: "background.paper"
+  },
+  titleBox: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column"
+  },
+  // The title line and the actions box share the same 24px band, centered,
+  // so the title and the action icons stay aligned under the header's
+  // `flex-start` — no padding magic. The subtitle flows below.
+  titleLine: {
+    minHeight: 24,
+    display: "flex",
+    alignItems: "center"
+  },
+  title: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  // Same 24px band as the title line, so both sides of the header stay
+  // aligned even when the composed actions are shorter (or fade out).
+  // Icon buttons (actions + collapse chevron) are squeezed to 24×24:
+  // 2px padding around the 20px small icon.
+  actions: {
+    minHeight: 24,
+    display: "flex",
+    alignItems: "center",
+    gap: 0.25,
+    flexShrink: 0,
+    "& .MuiIconButton-root": {
+      padding: "2px"
+    }
+  },
+  // Figma rhythm: ~16px from the subtitle to the select (8px header bottom
+  // padding + 4px here + line leading), 8px between body blocks, 8px bottom
+  // inset before the next row's divider.
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 1,
+    padding: ({
+      spacing: t
+    }) => t(0.5, 2, 1, 2)
+  },
+  // ~16px above the note (content's 8px bottom inset + 8px here), per design.
+  footer: {
+    padding: ({
+      spacing: t
+    }) => t(1, 2, 1, 2)
+  },
+  dimmed: {
+    opacity: 0.5
+  }
+};
+function bt(t) {
+  const e = R(57), {
+    layerId: o,
+    children: n
+  } = t, i = ee();
+  let r;
+  e[0] !== o ? (r = (j) => j.layers[o], e[0] = o, e[1] = r) : r = e[1];
+  const l = Y(i, r), p = Y(i, vt), {
+    labels: a
+  } = K(), [d, f] = oe(null), [m, c] = oe(!1);
+  let g;
+  e[2] !== d || e[3] !== o || e[4] !== m ? (g = {
+    layerId: o,
+    headerEl: d,
+    opacityOpen: m,
+    setOpacityOpen: c
+  }, e[2] = d, e[3] = o, e[4] = m, e[5] = g) : g = e[5];
+  const u = g;
+  if (!l)
+    return null;
+  let h;
+  e[6] !== n ? (h = Me(n), e[6] = n, e[7] = h) : h = e[7];
+  const {
+    actions: y,
+    body: x
+  } = h, b = !l.visible || l.collapsed, v = l.groupId ? Oe : 0;
+  let L;
+  e[8] !== v ? (L = {
+    top: v
+  }, e[8] = v, e[9] = L) : L = e[9];
+  let w, k;
+  e[10] !== l.name ? (w = [l.name], k = (j) => {
+    const {
+      ref: q
+    } = j;
+    return /* @__PURE__ */ s(V, { ref: q, variant: "button", color: "text.primary", sx: Z.title, children: l.name });
+  }, e[10] = l.name, e[11] = w, e[12] = k) : (w = e[11], k = e[12]);
+  let C;
+  e[13] !== l.name || e[14] !== w || e[15] !== k ? (C = /* @__PURE__ */ s(P, { sx: Z.titleLine, children: /* @__PURE__ */ s($e, { title: l.name, dependencies: w, children: k }) }), e[13] = l.name, e[14] = w, e[15] = k, e[16] = C) : C = e[16];
+  let S;
+  e[17] !== l.subtitle ? (S = l.subtitle && /* @__PURE__ */ s(V, { variant: "caption", color: "text.secondary", children: l.subtitle }), e[17] = l.subtitle, e[18] = S) : S = e[18];
+  let z;
+  e[19] !== C || e[20] !== S ? (z = /* @__PURE__ */ E(P, { sx: Z.titleBox, children: [
+    C,
+    S
+  ] }), e[19] = C, e[20] = S, e[21] = z) : z = e[21];
+  let $;
+  e[22] !== l.collapsed || e[23] !== o || e[24] !== p ? ($ = () => p(o, !l.collapsed), e[22] = l.collapsed, e[23] = o, e[24] = p, e[25] = $) : $ = e[25];
+  const M = !l.visible, I = b ? a.expandLayer : a.collapseLayer;
+  let _;
+  e[26] !== b ? (_ = b ? /* @__PURE__ */ s(Se, { fontSize: "small" }) : /* @__PURE__ */ s(Ie, { fontSize: "small" }), e[26] = b, e[27] = _) : _ = e[27];
+  let O;
+  e[28] !== $ || e[29] !== M || e[30] !== I || e[31] !== _ ? (O = /* @__PURE__ */ s(de, { size: "small", onClick: $, disabled: M, "aria-label": I, children: _ }), e[28] = $, e[29] = M, e[30] = I, e[31] = _, e[32] = O) : O = e[32];
+  let T;
+  e[33] !== y || e[34] !== O ? (T = /* @__PURE__ */ E(P, { sx: Z.actions, children: [
+    y,
+    O
+  ] }), e[33] = y, e[34] = O, e[35] = T) : T = e[35];
+  let D;
+  e[36] !== T || e[37] !== L || e[38] !== z ? (D = /* @__PURE__ */ E(P, { ref: f, sx: Z.header, style: L, children: [
+    z,
+    T
+  ] }), e[36] = T, e[37] = L, e[38] = z, e[39] = D) : D = e[39];
+  const N = !b;
+  let A;
+  e[40] !== l.visible ? (A = l.visible ? Z.content : {
+    ...Z.content,
+    ...Z.dimmed
+  }, e[40] = l.visible, e[41] = A) : A = e[41];
+  let F;
+  e[42] !== x || e[43] !== A ? (F = /* @__PURE__ */ s(P, { sx: A, children: x }), e[42] = x, e[43] = A, e[44] = F) : F = e[44];
+  let B;
+  e[45] !== l.helperText ? (B = l.helperText && /* @__PURE__ */ s(P, { sx: Z.footer, children: typeof l.helperText == "string" ? /* @__PURE__ */ s(V, { variant: "caption", color: "text.secondary", children: l.helperText }) : l.helperText }), e[45] = l.helperText, e[46] = B) : B = e[46];
+  let W;
+  e[47] !== N || e[48] !== F || e[49] !== B ? (W = /* @__PURE__ */ E(ve, { in: N, children: [
+    F,
+    B
+  ] }), e[47] = N, e[48] = F, e[49] = B, e[50] = W) : W = e[50];
+  let H;
+  e[51] !== D || e[52] !== W ? (H = /* @__PURE__ */ E(P, { sx: Z.row, children: [
+    D,
+    W
+  ] }), e[51] = D, e[52] = W, e[53] = H) : H = e[53];
+  let G;
+  return e[54] !== u || e[55] !== H ? (G = /* @__PURE__ */ s(ze.Provider, { value: u, children: H }), e[54] = u, e[55] = H, e[56] = G) : G = e[56], G;
+}
+function vt(t) {
+  return t.setCollapsed;
+}
+const Lt = Qe(/* @__PURE__ */ E("g", { transform: "translate(12 12) scale(1.33333) translate(-184 -24)", children: [
+  /* @__PURE__ */ s("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__ */ s("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"), Ct = {
+  visible: st,
+  hidden: rt,
+  mixed: Lt
+};
+function wt(t) {
+  const e = R(33), {
+    visibility: o,
+    onToggle: n,
+    labels: i
+  } = t, r = ee(), l = te(), p = ht(), {
+    labels: a
+  } = K(), d = o !== void 0 && n !== void 0;
+  let f;
+  e[0] !== d || e[1] !== l ? (f = (I) => !d && l ? I.layers[l.layerId]?.visible ?? !0 : !0, e[0] = d, e[1] = l, e[2] = f) : f = e[2];
+  const m = X(r, f);
+  let c;
+  e[3] !== d || e[4] !== p || e[5] !== l ? (c = (I) => !d && !l && p ? Je(I, p) : "visible", e[3] = d, e[4] = p, e[5] = l, e[6] = c) : c = e[6];
+  const g = Y(r, c), u = X(r, It), h = X(r, St);
+  let y, x;
+  e[7] !== d || e[8] !== p || e[9] !== l ? (y = () => {
+    !d && !l && !p && console.warn("Legend.VisibilityToggle needs `visibility`/`onToggle` props or a Legend.Row / Legend.Group context.");
+  }, x = [d, l, p], e[7] = d, e[8] = p, e[9] = l, e[10] = y, e[11] = x) : (y = e[10], x = e[11]), We(y, x);
+  let b, v, L = i;
+  if (d) {
+    b = o;
+    let I;
+    e[12] !== n || e[13] !== o ? (I = () => n(o === "hidden"), e[12] = n, e[13] = o, e[14] = I) : I = e[14], v = I;
+  } else if (l) {
+    b = m ? "visible" : "hidden";
+    let I;
+    e[15] !== m || e[16] !== l || e[17] !== u ? (I = () => u(l.layerId, !m), e[15] = m, e[16] = l, e[17] = u, e[18] = I) : I = e[18], v = I;
+  } else if (p) {
+    b = g;
+    let I;
+    e[19] !== p || e[20] !== g || e[21] !== h ? (I = () => h(p, g === "hidden"), e[19] = p, e[20] = g, e[21] = h, e[22] = I) : I = e[22], v = I;
+    let _;
+    e[23] !== a || e[24] !== i ? (_ = i ?? {
+      hideLayer: a.hideGroup,
+      showLayer: a.showGroup
+    }, e[23] = a, e[24] = i, e[25] = _) : _ = e[25], L = _;
+  } else
+    return null;
+  const {
+    hideLayer: w,
+    showLayer: k
+  } = L ?? a, C = Ct[b], S = b === "visible" ? void 0 : "active", z = b === "hidden" ? k : w;
+  let $;
+  e[26] !== C ? ($ = /* @__PURE__ */ s(C, { fontSize: "small" }), e[26] = C, e[27] = $) : $ = e[27];
+  let M;
+  return e[28] !== v || e[29] !== S || e[30] !== z || e[31] !== $ ? (M = /* @__PURE__ */ s(de, { size: "small", className: S, onClick: v, "aria-label": z, children: $ }), e[28] = v, e[29] = S, e[30] = z, e[31] = $, e[32] = M) : M = e[32], M;
+}
+function St(t) {
+  return t.setGroupVisibility;
+}
+function It(t) {
+  return t.setVisibility;
+}
+function $t(t) {
+  const e = R(17), {
+    children: o
+  } = t, n = ee(), [i, r] = oe(null), l = !!i, p = te();
+  let a;
+  e[0] !== p ? (a = (w) => p ? w.layers[p.layerId]?.visible ?? !0 : !0, e[0] = p, e[1] = a) : a = e[1];
+  const d = X(n, a), {
+    labels: f
+  } = K();
+  if (!p || !o || !d)
+    return null;
+  let m;
+  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = (w) => {
+    w.stopPropagation(), r(w.currentTarget);
+  }, e[2] = m) : m = e[2];
+  const c = m;
+  let g;
+  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = () => r(null), e[3] = g) : g = e[3];
+  const u = g, h = l ? "active" : void 0, y = !d;
+  let x;
+  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ s(at, { fontSize: "small" }), e[4] = x) : x = e[4];
+  let b;
+  e[5] !== f.layerOptions || e[6] !== l || e[7] !== h || e[8] !== y ? (b = /* @__PURE__ */ s(de, { size: "small", className: h, disabled: y, onClick: c, "aria-label": f.layerOptions, "aria-haspopup": "menu", "aria-expanded": l, children: x }), e[5] = f.layerOptions, e[6] = l, e[7] = h, e[8] = y, e[9] = b) : b = e[9];
+  let v;
+  e[10] !== i || e[11] !== o || e[12] !== l ? (v = /* @__PURE__ */ s(Le, { anchorEl: i, open: l, onClose: u, onClick: u, children: o }), e[10] = i, e[11] = o, e[12] = l, e[13] = v) : v = e[13];
+  let L;
+  return e[14] !== b || e[15] !== v ? (L = /* @__PURE__ */ E(se, { children: [
+    b,
+    v
+  ] }), e[14] = b, e[15] = v, e[16] = L) : L = e[16], L;
+}
+function kt(t) {
+  const e = R(7), {
+    onZoomTo: o
+  } = t, n = te(), {
+    labels: i
+  } = K();
+  if (!n)
+    return null;
+  let r;
+  e[0] !== o || e[1] !== n.layerId ? (r = () => o(n.layerId), e[0] = o, e[1] = n.layerId, e[2] = r) : r = e[2];
+  let l;
+  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ s(Ye, { children: /* @__PURE__ */ s(ct, { fontSize: "small" }) }), e[3] = l) : l = e[3];
+  let p;
+  return e[4] !== i.zoomTo || e[5] !== r ? (p = /* @__PURE__ */ E(Ce, { onClick: r, children: [
+    l,
+    i.zoomTo
+  ] }), e[4] = i.zoomTo, e[5] = r, e[6] = p) : p = e[6], p;
+}
+const fe = {
+  // Tooltip wrapper around the (possibly disabled) trigger button. A plain
+  // inline span would be sized by the line box (baseline + descender) and
+  // end up ~1px taller than the 24px button inside.
+  triggerWrap: {
+    display: "inline-flex"
+  },
+  popover: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1.5,
+    padding: ({
+      spacing: t
+    }) => t(1, 1.5),
+    width: 280
+  },
+  slider: {
+    flex: 1
+  },
+  // Wide enough for "100 %" — the value must never ellipsize.
+  input: {
+    width: 76,
+    flexShrink: 0,
+    "& input": {
+      textAlign: "right"
+    }
+  }
+}, xe = (t) => Math.min(100, Math.max(0, Math.round(t)));
+function zt() {
+  const t = R(16), e = ee(), o = te(), n = o?.layerId;
+  let i;
+  t[0] !== n ? (i = (y) => n ? y.layers[n]?.opacity ?? 1 : 1, t[0] = n, t[1] = i) : i = t[1];
+  const r = X(e, i);
+  let l;
+  t[2] !== n ? (l = (y) => n ? y.layers[n]?.visible ?? !0 : !0, t[2] = n, t[3] = l) : l = t[3];
+  const p = X(e, l), {
+    labels: a
+  } = K();
+  if (!o || !p)
+    return null;
+  const f = r !== 1 || o.opacityOpen ? "active" : void 0;
+  let m;
+  t[4] !== o ? (m = () => o.setOpacityOpen(!0), t[4] = o, t[5] = m) : m = t[5];
+  let c;
+  t[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ s(ft, { fontSize: "small" }), t[6] = c) : c = t[6];
+  let g;
+  t[7] !== a.opacity || t[8] !== m ? (g = /* @__PURE__ */ s(de, { size: "small", onClick: m, "aria-label": a.opacity, children: c }), t[7] = a.opacity, t[8] = m, t[9] = g) : g = t[9];
+  let u;
+  t[10] !== f || t[11] !== g ? (u = /* @__PURE__ */ s(P, { component: "span", className: f, sx: fe.triggerWrap, children: g }), t[10] = f, t[11] = g, t[12] = u) : u = t[12];
+  let h;
+  return t[13] !== a.opacity || t[14] !== u ? (h = /* @__PURE__ */ s(we, { title: a.opacity, children: u }), t[13] = a.opacity, t[14] = u, t[15] = h) : h = t[15], h;
+}
+function _t() {
+  const t = R(44), e = ee(), o = te(), n = o?.layerId;
+  let i;
+  t[0] !== n ? (i = (H) => n ? H.layers[n]?.opacity ?? 1 : 1, t[0] = n, t[1] = i) : i = t[1];
+  const r = X(e, i);
+  let l;
+  t[2] !== n ? (l = (H) => n ? H.layers[n]?.visible ?? !0 : !0, t[2] = n, t[3] = l) : l = t[3];
+  const p = X(e, l), a = X(e, Mt), {
+    labels: d
+  } = K(), [f, m] = oe(null), [c, g] = oe(null);
+  if (!o || !n || !p)
+    return null;
+  let u;
+  t[4] !== f || t[5] !== r ? (u = f ?? xe(r * 100), t[4] = f, t[5] = r, t[6] = u) : u = t[6];
+  const h = u;
+  let y;
+  t[7] !== n || t[8] !== a ? (y = (H) => {
+    const G = xe(H);
+    return a(n, G / 100), G;
+  }, t[7] = n, t[8] = a, t[9] = y) : y = t[9];
+  const x = y;
+  let b;
+  t[10] !== x ? (b = (H) => {
+    if (g(H), H.trim() === "")
+      return;
+    const G = Number(H);
+    if (!Number.isFinite(G))
+      return;
+    const j = x(G);
+    j !== G && g(String(j));
+  }, t[10] = x, t[11] = b) : b = t[11];
+  const v = b;
+  let L;
+  t[12] !== o ? (L = () => {
+    o.setOpacityOpen(!1), g(null), m(null);
+  }, t[12] = o, t[13] = L) : L = t[13];
+  const w = L, k = o.opacityOpen && !!o.headerEl;
+  let C, S;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = {
+    vertical: "bottom",
+    horizontal: "left"
+  }, S = {
+    vertical: "top",
+    horizontal: "left"
+  }, t[14] = C, t[15] = S) : (C = t[14], S = t[15]);
+  const z = o.headerEl?.clientWidth;
+  let $;
+  t[16] !== z ? ($ = {
+    paper: {
+      sx: {
+        width: z
+      }
+    }
+  }, t[16] = z, t[17] = $) : $ = t[17];
+  let M;
+  t[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = (H, G) => {
+    m(G), g(null);
+  }, t[18] = M) : M = t[18];
+  let I;
+  t[19] !== x ? (I = (H, G) => {
+    x(G), m(null);
+  }, t[19] = x, t[20] = I) : I = t[20];
+  let _;
+  t[21] !== d.opacity || t[22] !== h || t[23] !== I ? (_ = /* @__PURE__ */ s(et, { size: "small", min: 0, max: 100, step: 1, value: h, onChange: M, onChangeCommitted: I, "aria-label": d.opacity, sx: fe.slider }), t[21] = d.opacity, t[22] = h, t[23] = I, t[24] = _) : _ = t[24];
+  const O = c ?? String(h);
+  let T;
+  t[25] !== v ? (T = (H) => v(H.target.value), t[25] = v, t[26] = T) : T = t[26];
+  let D;
+  t[27] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (D = () => g(null), t[27] = D) : D = t[27];
+  let N;
+  t[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ s(lt, { position: "end", children: "%" }), t[28] = N) : N = t[28];
+  let A;
+  t[29] !== d.opacity ? (A = {
+    inputMode: "numeric",
+    "aria-label": d.opacity
+  }, t[29] = d.opacity, t[30] = A) : A = t[30];
+  let F;
+  t[31] !== O || t[32] !== T || t[33] !== A ? (F = /* @__PURE__ */ s(ot, { size: "small", value: O, onChange: T, onBlur: D, onKeyDown: Pt, endAdornment: N, inputProps: A, sx: fe.input }), t[31] = O, t[32] = T, t[33] = A, t[34] = F) : F = t[34];
+  let B;
+  t[35] !== _ || t[36] !== F ? (B = /* @__PURE__ */ E(P, { sx: fe.popover, children: [
+    _,
+    F
+  ] }), t[35] = _, t[36] = F, t[37] = B) : B = t[37];
+  let W;
+  return t[38] !== w || t[39] !== o.headerEl || t[40] !== $ || t[41] !== B || t[42] !== k ? (W = /* @__PURE__ */ s(tt, { open: k, anchorEl: o.headerEl, onClose: w, anchorOrigin: C, transformOrigin: S, slotProps: $, children: B }), t[38] = w, t[39] = o.headerEl, t[40] = $, t[41] = B, t[42] = k, t[43] = W) : W = t[43], W;
+}
+function Pt(t) {
+  t.key === "Enter" && t.target.blur();
+}
+function Mt(t) {
+  return t.setOpacity;
+}
+const Ot = {
+  Trigger: zt,
+  Popover: _t
+}, le = {
+  // Outlined-input look-alike trigger (the design's select has no floating
+  // label — just the value + chevron in a 32px bordered field).
+  trigger: {
+    width: "100%",
+    minHeight: 32,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 1,
+    padding: ({
+      spacing: t
+    }) => t(0, 1.5),
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: 1,
+    backgroundColor: "background.paper",
+    color: "text.primary",
+    "&:hover": {
+      borderColor: "text.primary"
+    }
+  },
+  value: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  chevron: {
+    flexShrink: 0,
+    color: "action.active",
+    transition: ({
+      transitions: t
+    }) => t.create("transform")
+  },
+  chevronOpen: {
+    transform: "rotate(180deg)"
+  },
+  sectionTitle: {
+    padding: ({
+      spacing: t
+    }) => t(1, 2, 0.5, 2),
+    lineHeight: 1.5
+  },
+  // Figma: the active option reads as primary-colored text, no background.
+  option: {
+    "&.Mui-selected, &.Mui-selected:hover": {
+      backgroundColor: "transparent",
+      color: "primary.main"
+    }
+  }
+};
+function Tt() {
+  const t = R(34), e = ee(), n = te()?.layerId;
+  let i;
+  t[0] !== n ? (i = (S) => n ? S.layers[n]?.sections : void 0, t[0] = n, t[1] = i) : i = t[1];
+  const r = Y(e, i), l = Y(e, Et), {
+    labels: p
+  } = K(), [a, d] = oe(null), f = !!a;
+  if (!n || !r || r.length === 0)
+    return null;
+  const m = r[0].active, c = r.length > 1;
+  let g;
+  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = (S) => d(S.currentTarget), t[2] = g) : g = t[2];
+  let u;
+  t[3] !== m ? (u = /* @__PURE__ */ s(V, { variant: "body2", sx: le.value, children: m }), t[3] = m, t[4] = u) : u = t[4];
+  let h;
+  t[5] !== f ? (h = f ? {
+    ...le.chevron,
+    ...le.chevronOpen
+  } : le.chevron, t[5] = f, t[6] = h) : h = t[6];
+  let y;
+  t[7] !== h ? (y = /* @__PURE__ */ s(dt, { fontSize: "small", sx: h }), t[7] = h, t[8] = y) : y = t[8];
+  let x;
+  t[9] !== p.attribute || t[10] !== f || t[11] !== u || t[12] !== y ? (x = /* @__PURE__ */ E(nt, { sx: le.trigger, onClick: g, "aria-label": p.attribute, "aria-haspopup": "listbox", "aria-expanded": f, children: [
+    u,
+    y
+  ] }), t[9] = p.attribute, t[10] = f, t[11] = u, t[12] = y, t[13] = x) : x = t[13];
+  let b;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = () => d(null), t[14] = b) : b = t[14];
+  const v = a?.clientWidth;
+  let L;
+  t[15] !== v ? (L = {
+    paper: {
+      sx: {
+        width: v
+      }
+    }
+  }, t[15] = v, t[16] = L) : L = t[16];
+  let w;
+  if (t[17] !== n || t[18] !== r || t[19] !== l || t[20] !== c) {
+    let S;
+    t[22] !== n || t[23] !== l || t[24] !== c ? (S = (z) => [c && z.title ? /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", component: "li", sx: le.sectionTitle, children: z.title }, `${z.id}-title`) : null, ...z.options.map(($) => /* @__PURE__ */ s(Ce, { selected: $ === z.active, sx: le.option, onClick: () => {
+      l(n, z.id, $), d(null);
+    }, children: $ }, `${z.id}-${$}`))], t[22] = n, t[23] = l, t[24] = c, t[25] = S) : S = t[25], w = r.map(S), t[17] = n, t[18] = r, t[19] = l, t[20] = c, t[21] = w;
+  } else
+    w = t[21];
+  let k;
+  t[26] !== a || t[27] !== f || t[28] !== L || t[29] !== w ? (k = /* @__PURE__ */ s(Le, { anchorEl: a, open: f, onClose: b, slotProps: L, children: w }), t[26] = a, t[27] = f, t[28] = L, t[29] = w, t[30] = k) : k = t[30];
+  let C;
+  return t[31] !== k || t[32] !== x ? (C = /* @__PURE__ */ E(se, { children: [
+    x,
+    k
+  ] }), t[31] = k, t[32] = x, t[33] = C) : C = t[33], C;
+}
+function Et(t) {
+  return t.setSectionValue;
+}
+const J = {
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+    // Values are hidden until the legend content is hovered (or keyboard-
+    // focused). On hover-incapable (touch) devices they're always visible —
+    // tap-:hover is unreliable on non-interactive elements.
+    "&:hover .PsLegend-value, &:focus-within .PsLegend-value": {
+      opacity: 1
+    },
+    "@media (hover: none)": {
+      "& .PsLegend-value": {
+        opacity: 1
+      }
+    }
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1
+  },
+  // Fixed-width gutter so labels stay column-aligned regardless of swatch
+  // shape or per-item size; the swatch is centered within it.
+  gutter: {
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  value: {
+    flexShrink: 0,
+    opacity: 0,
+    transition: "opacity 120ms"
+  },
+  // ─── Horizontal orientation modifiers (spread over the vertical base) ───
+  // Items flow left-to-right and wrap; each is a compact swatch+label pair.
+  listHorizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: 2,
+    rowGap: 0.5
+  },
+  // No fixed gutter — the swatch sits at its natural size next to the label.
+  itemHorizontal: {
+    gap: 0.5
+  },
+  // Each chip sizes to its content (no flex-grow / ellipsis).
+  labelHorizontal: {
+    flex: "0 0 auto",
+    overflow: "visible",
+    textOverflow: "clip"
+  }
+}, ge = 12, ce = 1.5, Te = 2, Ht = 1;
+function Dt(t) {
+  switch (t) {
+    case "dashed":
+      return {
+        dash: "3 2"
+      };
+    case "dotted":
+      return {
+        dash: `0.1 ${ce * 2}`,
+        round: !0
+      };
+    // `dash-dot` is line-only and `corners` is handled separately: both
+    // degrade to a solid border here.
+    default:
+      return {};
+  }
+}
+function Gt(t) {
+  switch (t) {
+    case "dashed":
+      return {
+        dash: "4 3"
+      };
+    case "dotted":
+      return {
+        dash: `0.1 ${Te * 2}`,
+        round: !0
+      };
+    case "dash-dot":
+      return {
+        dash: "5 2 0.1 2",
+        round: !0
+      };
+    // `corners` is square-only → solid line.
+    default:
+      return {};
+  }
+}
+function Vt(t, e) {
+  const o = (n) => /* @__PURE__ */ s("path", { d: n, stroke: e, strokeWidth: 1.2, fill: "none" });
+  switch (t) {
+    case "horizontal":
+      return {
+        size: 4,
+        content: o("M0 2 H4")
+      };
+    case "vertical":
+      return {
+        size: 4,
+        content: o("M2 0 V4")
+      };
+    case "diagonal":
+      return {
+        size: 4,
+        content: o("M0 4 L4 0 M-1 1 L1 -1 M3 5 L5 3")
+      };
+    case "diagonal-alt":
+      return {
+        size: 4,
+        content: o("M0 0 L4 4 M-1 3 L1 5 M3 -1 L5 1")
+      };
+    case "cross":
+      return {
+        size: 4,
+        content: o("M0 4 L4 0 M-1 1 L1 -1 M3 5 L5 3 M0 0 L4 4 M-1 3 L1 5 M3 -1 L5 1")
+      };
+    case "dots":
+      return {
+        size: 4,
+        content: /* @__PURE__ */ s("circle", { cx: 2, cy: 2, r: 0.9, fill: e })
+      };
+    case "grid":
+      return {
+        size: 3,
+        content: /* @__PURE__ */ s("circle", { cx: 1.5, cy: 1.5, r: 0.7, fill: e })
+      };
+    default:
+      return null;
+  }
+}
+function Ee(t) {
+  const e = R(46), {
+    shape: o,
+    color: n,
+    isStrokeColor: i,
+    fillPattern: r,
+    strokeStyle: l,
+    size: p
+  } = t, a = o === void 0 ? "circle" : o, d = i === void 0 ? !1 : i, f = r === void 0 ? "solid" : r, m = l === void 0 ? "solid" : l, c = p === void 0 ? ge : p, g = Fe();
+  if (a === "line") {
+    let N;
+    e[0] !== m ? (N = Gt(m), e[0] = m, e[1] = N) : N = e[1];
+    const {
+      dash: A,
+      round: F
+    } = N, B = `0 0 ${c} ${c}`;
+    let W;
+    e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (W = {
+      display: "block",
+      overflow: "visible"
+    }, e[2] = W) : W = e[2];
+    const H = c / 2, G = c / 2, j = F ? "round" : "butt";
+    let q;
+    e[3] !== n || e[4] !== A || e[5] !== c || e[6] !== G || e[7] !== j || e[8] !== H ? (q = /* @__PURE__ */ s("line", { x1: 0, y1: H, x2: c, y2: G, stroke: n, strokeWidth: Te, strokeDasharray: A, strokeLinecap: j }), e[3] = n, e[4] = A, e[5] = c, e[6] = G, e[7] = j, e[8] = H, e[9] = q) : q = e[9];
+    let pe;
+    return e[10] !== c || e[11] !== q || e[12] !== B ? (pe = /* @__PURE__ */ s("svg", { width: c, height: c, viewBox: B, "aria-hidden": !0, "data-shape": "line", style: W, children: q }), e[10] = c, e[11] = q, e[12] = B, e[13] = pe) : pe = e[13], pe;
+  }
+  const u = d ? ce / 2 : 0, h = !d && f !== "solid";
+  let y;
+  e[14] !== n || e[15] !== f || e[16] !== h ? (y = h ? Vt(f, n) : null, e[14] = n, e[15] = f, e[16] = h, e[17] = y) : y = e[17];
+  const x = y, b = d && m === "corners" && a === "square";
+  let v;
+  e[18] !== d || e[19] !== m ? (v = d ? Dt(m) : {
+    dash: void 0,
+    round: !1
+  }, e[18] = d, e[19] = m, e[20] = v) : v = e[20];
+  const {
+    dash: L,
+    round: w
+  } = v, k = d ? ce : Ht, C = d ? L : void 0, S = w ? "round" : "butt";
+  let z;
+  e[21] !== n || e[22] !== S || e[23] !== k || e[24] !== C ? (z = {
+    stroke: n,
+    strokeWidth: k,
+    strokeDasharray: C,
+    strokeLinecap: S
+  }, e[21] = n, e[22] = S, e[23] = k, e[24] = C, e[25] = z) : z = e[25];
+  const $ = z, M = d ? "none" : h ? `url(#${g})` : n, I = `0 0 ${c} ${c}`;
+  let _;
+  e[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = {
+    display: "block"
+  }, e[26] = _) : _ = e[26];
+  let O;
+  e[27] !== g || e[28] !== x ? (O = x && /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ s("pattern", { id: g, patternUnits: "userSpaceOnUse", width: x.size, height: x.size, children: x.content }) }), e[27] = g, e[28] = x, e[29] = O) : O = e[29];
+  let T;
+  e[30] !== n || e[31] !== $ || e[32] !== M || e[33] !== u || e[34] !== b || e[35] !== d || e[36] !== a || e[37] !== c || e[38] !== h ? (T = b ? /* @__PURE__ */ s(Rt, { size: c, color: n }) : a === "circle" ? /* @__PURE__ */ s("circle", { cx: c / 2, cy: c / 2, r: c / 2 - u, fill: M, ...$, stroke: d || h ? n : "none" }) : /* @__PURE__ */ s("rect", { x: u, y: u, width: c - u * 2, height: c - u * 2, fill: M, ...$, stroke: d || h ? n : "none" }), e[30] = n, e[31] = $, e[32] = M, e[33] = u, e[34] = b, e[35] = d, e[36] = a, e[37] = c, e[38] = h, e[39] = T) : T = e[39];
+  let D;
+  return e[40] !== a || e[41] !== c || e[42] !== I || e[43] !== O || e[44] !== T ? (D = /* @__PURE__ */ E("svg", { width: c, height: c, viewBox: I, "aria-hidden": !0, "data-shape": a, style: _, children: [
+    O,
+    T
+  ] }), e[40] = a, e[41] = c, e[42] = I, e[43] = O, e[44] = T, e[45] = D) : D = e[45], D;
+}
+function Rt(t) {
+  const e = R(19), {
+    size: o,
+    color: n
+  } = t, i = Math.max(2, o * 0.3), r = ce / 2, l = o - r;
+  let p;
+  e[0] !== n ? (p = {
+    stroke: n,
+    strokeWidth: ce,
+    fill: "none"
+  }, e[0] = n, e[1] = p) : p = e[1];
+  const a = p, d = `M${r} ${r + i} V${r} H${r + i}`;
+  let f;
+  e[2] !== a || e[3] !== d ? (f = /* @__PURE__ */ s("path", { d, ...a }), e[2] = a, e[3] = d, e[4] = f) : f = e[4];
+  const m = `M${l - i} ${r} H${l} V${r + i}`;
+  let c;
+  e[5] !== a || e[6] !== m ? (c = /* @__PURE__ */ s("path", { d: m, ...a }), e[5] = a, e[6] = m, e[7] = c) : c = e[7];
+  const g = `M${l} ${l - i} V${l} H${l - i}`;
+  let u;
+  e[8] !== a || e[9] !== g ? (u = /* @__PURE__ */ s("path", { d: g, ...a }), e[8] = a, e[9] = g, e[10] = u) : u = e[10];
+  const h = `M${r + i} ${l} H${r} V${l - i}`;
+  let y;
+  e[11] !== a || e[12] !== h ? (y = /* @__PURE__ */ s("path", { d: h, ...a }), e[11] = a, e[12] = h, e[13] = y) : y = e[13];
+  let x;
+  return e[14] !== f || e[15] !== c || e[16] !== u || e[17] !== y ? (x = /* @__PURE__ */ E(se, { children: [
+    f,
+    c,
+    u,
+    y
+  ] }), e[14] = f, e[15] = c, e[16] = u, e[17] = y, e[18] = x) : x = e[18], x;
+}
+const At = 16;
+function He(t) {
+  const e = R(23), {
+    data: o
+  } = t, {
+    items: n,
+    shape: i,
+    isStrokeColor: r,
+    fillPattern: l,
+    strokeStyle: p,
+    orientation: a
+  } = o, d = i === void 0 ? "circle" : i, f = r === void 0 ? !1 : r, m = l === void 0 ? "solid" : l, c = p === void 0 ? "solid" : p, g = a === void 0 ? "vertical" : a, u = g === "horizontal";
+  let h;
+  e[0] !== n ? (h = n.reduce(Bt, 0), e[0] = n, e[1] = h) : h = e[1];
+  const x = Math.max(At, h), b = u ? J.listHorizontal : null;
+  let v;
+  e[2] !== b ? (v = {
+    ...J.list,
+    ...b
+  }, e[2] = b, e[3] = v) : v = e[3];
+  let L;
+  if (e[4] !== m || e[5] !== x || e[6] !== u || e[7] !== f || e[8] !== n || e[9] !== d || e[10] !== c) {
+    let k;
+    e[12] !== m || e[13] !== x || e[14] !== u || e[15] !== f || e[16] !== d || e[17] !== c ? (k = (C, S) => /* @__PURE__ */ E(P, { sx: {
+      ...J.item,
+      ...u ? J.itemHorizontal : null
+    }, children: [
+      /* @__PURE__ */ s(P, { sx: {
+        ...J.gutter,
+        width: u ? void 0 : x
+      }, children: /* @__PURE__ */ s(Ee, { shape: C.shape ?? d, color: C.color, isStrokeColor: C.isStrokeColor ?? f, fillPattern: C.fillPattern ?? m, strokeStyle: C.strokeStyle ?? c, size: C.size ?? ge }) }),
+      /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", sx: {
+        ...J.label,
+        ...u ? J.labelHorizontal : null
+      }, children: C.label }),
+      C.value != null && /* @__PURE__ */ s(V, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: J.value, children: C.value })
+    ] }, `${C.label}-${S}`), e[12] = m, e[13] = x, e[14] = u, e[15] = f, e[16] = d, e[17] = c, e[18] = k) : k = e[18], L = n.map(k), e[4] = m, e[5] = x, e[6] = u, e[7] = f, e[8] = n, e[9] = d, e[10] = c, e[11] = L;
+  } else
+    L = e[11];
+  let w;
+  return e[19] !== g || e[20] !== v || e[21] !== L ? (w = /* @__PURE__ */ s(P, { "data-orientation": g, sx: v, children: L }), e[19] = g, e[20] = v, e[21] = L, e[22] = w) : w = e[22], w;
+}
+function Bt(t, e) {
+  return Math.max(t, e.size ?? ge);
+}
+const U = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5
+  },
+  attribute: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  // Inline error shown when a discrete ramp's stop count is incoherent.
+  error: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0.5,
+    color: "error.main"
+  },
+  // Positioning context for the avg marker; the inner bar keeps its rounded
+  // clip while the line is free to overflow vertically.
+  barWrap: {
+    position: "relative"
+  },
+  bar: {
+    height: 8,
+    borderRadius: "2px",
+    overflow: "hidden",
+    display: "flex"
+  },
+  avgLine: {
+    position: "absolute",
+    top: -2,
+    bottom: -2,
+    width: 0,
+    borderLeft: "1.5px dashed",
+    borderColor: "text.primary",
+    transform: "translateX(-50%)"
+  },
+  step: {
+    flex: 1,
+    height: "100%"
+  },
+  labels: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: 1
+  },
+  // Boundary mode: labels absolutely positioned so each centers on the line
+  // between adjacent color steps. The outer two clamp inside the bar's width
+  // (first left-aligned, last right-aligned) so nothing overflows the row.
+  // `left`/`transform` are applied inline per label in the renderer.
+  boundaryLabels: {
+    position: "relative",
+    height: 16
+  },
+  boundaryLabel: {
+    position: "absolute",
+    top: 0,
+    whiteSpace: "nowrap"
+  }
+};
+function Wt(t) {
+  const {
+    avg: e,
+    stops: o
+  } = t;
+  if (e == null || o.length < 2) return null;
+  const n = o[0].value, i = o[o.length - 1].value;
+  if (n === i) return null;
+  const r = (e - n) / (i - n) * 100;
+  return Math.min(100, Math.max(0, r));
+}
+function De(t) {
+  const e = R(40), {
+    data: o,
+    labels: n
+  } = t, i = n === void 0 ? ae : n, {
+    colors: r,
+    stops: l,
+    isContinuous: p,
+    attribute: a,
+    formatValue: d
+  } = o, f = d === void 0 ? String : d;
+  let m;
+  e[0] !== o ? (m = Wt(o), e[0] = o, e[1] = m) : m = e[1];
+  const c = m, g = l[0], u = l[l.length - 1];
+  let h;
+  e[2] !== r ? (h = r.join(", "), e[2] = r, e[3] = h) : h = e[3];
+  const y = `linear-gradient(90deg, ${h})`, x = !p && l.length === r.length + 1, b = !p && !x;
+  let v;
+  e[4] !== l ? (v = (_) => `${l[_]?.label ?? ""} – ${l[_ + 1]?.label ?? ""}`, e[4] = l, e[5] = v) : v = e[5];
+  const L = v;
+  let w;
+  e[6] !== a || e[7] !== i ? (w = a && /* @__PURE__ */ E(P, { sx: U.attribute, children: [
+    /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: i.colorBasedOn }),
+    /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", children: a })
+  ] }), e[6] = a, e[7] = i, e[8] = w) : w = e[8];
+  const k = w;
+  if (b) {
+    let _;
+    e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = /* @__PURE__ */ s(pt, { fontSize: "small" }), e[9] = _) : _ = e[9];
+    const O = `Discrete ramp needs ${r.length + 1} stops (one per color boundary) but got ${l.length}.`;
+    let T;
+    e[10] !== O ? (T = /* @__PURE__ */ E(P, { sx: U.error, children: [
+      _,
+      /* @__PURE__ */ s(V, { variant: "caption", color: "error", children: O })
+    ] }), e[10] = O, e[11] = T) : T = e[11];
+    let D;
+    return e[12] !== k || e[13] !== T ? (D = /* @__PURE__ */ E(P, { sx: U.container, children: [
+      k,
+      T
+    ] }), e[12] = k, e[13] = T, e[14] = D) : D = e[14], D;
+  }
+  let C;
+  e[15] !== r || e[16] !== y || e[17] !== p || e[18] !== i || e[19] !== L ? (C = p ? /* @__PURE__ */ s(P, { role: "img", "aria-label": i.colorGradient, sx: {
+    width: "100%",
+    height: "100%",
+    background: y
+  } }) : r.map((_, O) => /* @__PURE__ */ s(P, { role: "img", "aria-label": L(O), sx: {
+    ...U.step,
+    backgroundColor: _
+  } }, O)), e[15] = r, e[16] = y, e[17] = p, e[18] = i, e[19] = L, e[20] = C) : C = e[20];
+  let S;
+  e[21] !== C ? (S = /* @__PURE__ */ s(P, { sx: U.bar, children: C }), e[21] = C, e[22] = S) : S = e[22];
+  let z;
+  e[23] !== c || e[24] !== o.avg || e[25] !== f ? (z = c != null && o.avg != null && /* @__PURE__ */ s(we, { title: f(o.avg), placement: "top", arrow: !0, children: /* @__PURE__ */ s(P, { sx: U.avgLine, style: {
+    left: `${c}%`
+  } }) }), e[23] = c, e[24] = o.avg, e[25] = f, e[26] = z) : z = e[26];
+  let $;
+  e[27] !== S || e[28] !== z ? ($ = /* @__PURE__ */ E(P, { sx: U.barWrap, children: [
+    S,
+    z
+  ] }), e[27] = S, e[28] = z, e[29] = $) : $ = e[29];
+  let M;
+  e[30] !== r.length || e[31] !== g?.label || e[32] !== x || e[33] !== u?.label || e[34] !== l ? (M = x ? /* @__PURE__ */ s(P, { sx: U.boundaryLabels, children: l.map((_, O) => {
+    const T = O === l.length - 1, D = O === 0 ? void 0 : T ? "translateX(-100%)" : "translateX(-50%)";
+    return /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", sx: U.boundaryLabel, style: {
+      left: `${O / r.length * 100}%`,
+      transform: D
+    }, children: _.label }, `${_.label}-${O}`);
+  }) }) : /* @__PURE__ */ E(P, { sx: U.labels, children: [
+    /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: g?.label }),
+    /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: u?.label })
+  ] }), e[30] = r.length, e[31] = g?.label, e[32] = x, e[33] = u?.label, e[34] = l, e[35] = M) : M = e[35];
+  let I;
+  return e[36] !== k || e[37] !== $ || e[38] !== M ? (I = /* @__PURE__ */ E(P, { sx: U.container, children: [
+    k,
+    $,
+    M
+  ] }), e[36] = k, e[37] = $, e[38] = M, e[39] = I) : I = e[39], I;
+}
+const ne = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 1
+  },
+  attribute: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  body: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: 2,
+    paddingTop: 0.5
+  },
+  circles: {
+    position: "relative",
+    flexShrink: 0
+  },
+  // All circles share the bottom and right edges (anchored bottom-right), so
+  // they nest along the diagonal — largest fanning up-left, smallest in the
+  // bottom-right. Every circle has the SAME opaque fill, so overlaps don't
+  // compound (uniform colour) while the borders still read as nested rings.
+  circle: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    borderRadius: "50%",
+    backgroundColor: "grey.50",
+    border: "1px solid",
+    borderColor: "grey.100",
+    boxSizing: "border-box"
+  },
+  labels: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
+  }
+}, re = 72, Ft = 0.3, be = 2, ue = 4;
+function Nt(t) {
+  const e = (t.stops ?? []).filter((r) => Number.isFinite(r));
+  if (e.length >= be)
+    return e.sort((r, l) => l - r).slice(0, ue);
+  const {
+    min: o,
+    max: n
+  } = t;
+  if (o === n) return [n];
+  const i = Math.min(ue, Math.max(be, t.steps ?? ue));
+  return Array.from({
+    length: i
+  }, (r, l) => n - (n - o) * l / (i - 1));
+}
+function Ut(t, e) {
+  if (e <= 1) return re;
+  const o = 1 - (1 - Ft) * (t / (e - 1));
+  return re * o;
+}
+function Ge(t) {
+  const e = R(40), {
+    data: o,
+    labels: n
+  } = t, i = n === void 0 ? ae : n, {
+    attribute: r,
+    formatValue: l
+  } = o, p = l === void 0 ? String : l;
+  let a, d, f, m, c, g, u, h, y;
+  if (e[0] !== r || e[1] !== o || e[2] !== p || e[3] !== i) {
+    const L = Nt(o), w = L.length;
+    let k;
+    e[13] !== p || e[14] !== i || e[15] !== w ? (k = (M, I) => {
+      const _ = p(M);
+      return w <= 1 ? _ : I === 0 ? /* @__PURE__ */ E(se, { children: [
+        i.maxPrefix,
+        _
+      ] }) : I === w - 1 ? /* @__PURE__ */ E(se, { children: [
+        i.minPrefix,
+        _
+      ] }) : _;
+    }, e[13] = p, e[14] = i, e[15] = w, e[16] = k) : k = e[16];
+    const C = k;
+    f = P, h = ne.root, e[17] !== r || e[18] !== i ? (y = r && /* @__PURE__ */ E(P, { sx: ne.attribute, children: [
+      /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: i.radiusRangeBy }),
+      /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", children: r })
+    ] }), e[17] = r, e[18] = i, e[19] = y) : y = e[19], d = P, g = ne.body;
+    let S;
+    e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (S = {
+      ...ne.circles,
+      width: re,
+      height: re
+    }, e[20] = S) : S = e[20];
+    let z;
+    e[21] !== w ? (z = (M, I) => {
+      const _ = Ut(I, w);
+      return /* @__PURE__ */ s(P, { "aria-hidden": !0, sx: {
+        ...ne.circle,
+        width: _,
+        height: _
+      } }, I);
+    }, e[21] = w, e[22] = z) : z = e[22], u = /* @__PURE__ */ s(P, { sx: S, children: L.map(z) }), a = P, e[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = {
+      ...ne.labels,
+      height: re
+    }, e[23] = m) : m = e[23];
+    let $;
+    e[24] !== C ? ($ = (M, I) => /* @__PURE__ */ s(V, { variant: "caption", color: "text.secondary", children: C(M, I) }, I), e[24] = C, e[25] = $) : $ = e[25], c = L.map($), e[0] = r, e[1] = o, e[2] = p, e[3] = i, e[4] = a, e[5] = d, e[6] = f, e[7] = m, e[8] = c, e[9] = g, e[10] = u, e[11] = h, e[12] = y;
+  } else
+    a = e[4], d = e[5], f = e[6], m = e[7], c = e[8], g = e[9], u = e[10], h = e[11], y = e[12];
+  let x;
+  e[26] !== a || e[27] !== m || e[28] !== c ? (x = /* @__PURE__ */ s(a, { sx: m, children: c }), e[26] = a, e[27] = m, e[28] = c, e[29] = x) : x = e[29];
+  let b;
+  e[30] !== d || e[31] !== g || e[32] !== u || e[33] !== x ? (b = /* @__PURE__ */ E(d, { sx: g, children: [
+    u,
+    x
+  ] }), e[30] = d, e[31] = g, e[32] = u, e[33] = x, e[34] = b) : b = e[34];
+  let v;
+  return e[35] !== f || e[36] !== b || e[37] !== h || e[38] !== y ? (v = /* @__PURE__ */ E(f, { sx: h, children: [
+    y,
+    b
+  ] }), e[35] = f, e[36] = b, e[37] = h, e[38] = y, e[39] = v) : v = e[39], v;
+}
+const Q = {
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+    // Values are hidden until the legend content is hovered (or keyboard-
+    // focused). On hover-incapable (touch) devices they're always visible —
+    // tap-:hover is unreliable on non-interactive elements.
+    "&:hover .PsLegend-value, &:focus-within .PsLegend-value": {
+      opacity: 1
+    },
+    "@media (hover: none)": {
+      "& .PsLegend-value": {
+        opacity: 1
+      }
+    }
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1
+  },
+  icon: {
+    flexShrink: 0,
+    width: 16,
+    height: 16,
+    objectFit: "contain"
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  value: {
+    flexShrink: 0,
+    opacity: 0,
+    transition: "opacity 120ms"
+  },
+  // ─── Horizontal orientation modifiers (spread over the vertical base) ───
+  listHorizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: 2,
+    rowGap: 0.5
+  },
+  itemHorizontal: {
+    gap: 0.5
+  },
+  labelHorizontal: {
+    flex: "0 0 auto",
+    overflow: "visible",
+    textOverflow: "clip"
+  }
+};
+function Ve(t) {
+  const e = R(11), {
+    data: o
+  } = t, n = o.orientation ?? "vertical", i = n === "horizontal", r = i ? Q.listHorizontal : null;
+  let l;
+  e[0] !== r ? (l = {
+    ...Q.list,
+    ...r
+  }, e[0] = r, e[1] = l) : l = e[1];
+  let p;
+  if (e[2] !== o.items || e[3] !== i) {
+    let d;
+    e[5] !== i ? (d = (f, m) => /* @__PURE__ */ E(P, { sx: {
+      ...Q.item,
+      ...i ? Q.itemHorizontal : null
+    }, children: [
+      /* @__PURE__ */ s(P, { component: "img", src: f.icon, alt: "", sx: Q.icon }),
+      /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", sx: {
+        ...Q.label,
+        ...i ? Q.labelHorizontal : null
+      }, children: f.label }),
+      f.value != null && /* @__PURE__ */ s(V, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: Q.value, children: f.value })
+    ] }, `${f.label}-${m}`), e[5] = i, e[6] = d) : d = e[6], p = o.items.map(d), e[2] = o.items, e[3] = i, e[4] = p;
+  } else
+    p = e[4];
+  let a;
+  return e[7] !== n || e[8] !== l || e[9] !== p ? (a = /* @__PURE__ */ s(P, { "data-orientation": n, sx: l, children: p }), e[7] = n, e[8] = l, e[9] = p, e[10] = a) : a = e[10], a;
+}
+function Re(t) {
+  const e = R(10), {
+    data: o,
+    labels: n
+  } = t;
+  switch (o.type) {
+    case "category": {
+      let i;
+      return e[0] !== o ? (i = /* @__PURE__ */ s(He, { data: o }), e[0] = o, e[1] = i) : i = e[1], i;
+    }
+    case "ramp": {
+      let i;
+      return e[2] !== o || e[3] !== n ? (i = /* @__PURE__ */ s(De, { data: o, labels: n }), e[2] = o, e[3] = n, e[4] = i) : i = e[4], i;
+    }
+    case "proportion": {
+      let i;
+      return e[5] !== o || e[6] !== n ? (i = /* @__PURE__ */ s(Ge, { data: o, labels: n }), e[5] = o, e[6] = n, e[7] = i) : i = e[7], i;
+    }
+    case "icon": {
+      let i;
+      return e[8] !== o ? (i = /* @__PURE__ */ s(Ve, { data: o }), e[8] = o, e[9] = i) : i = e[9], i;
+    }
+    default:
+      return o;
+  }
+}
+const jt = {
+  // Figma: stacked variable sections sit ~16px apart (wider than the row
+  // content's 8px block gap).
+  stack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  }
+};
+function Zt() {
+  const t = R(9), e = ee(), o = te();
+  let n;
+  t[0] !== o ? (n = (a) => o ? a.layers[o.layerId]?.variables : void 0, t[0] = o, t[1] = n) : n = t[1];
+  const i = Y(e, n), {
+    labels: r
+  } = K();
+  if (!i || i.length === 0)
+    return null;
+  let l;
+  if (t[2] !== r || t[3] !== i) {
+    let a;
+    t[5] !== r ? (a = (d, f) => /* @__PURE__ */ s(Re, { data: d, labels: r }, f), t[5] = r, t[6] = a) : a = t[6], l = i.map(a), t[2] = r, t[3] = i, t[4] = l;
+  } else
+    l = t[4];
+  let p;
+  return t[7] !== l ? (p = /* @__PURE__ */ s(P, { sx: jt.stack, children: l }), t[7] = l, t[8] = p) : p = t[8], p;
+}
+const rl = {
+  // Composition shell
+  Provider: ut,
+  Group: yt,
+  Row: bt,
+  Actions: Pe,
+  // Store-connected actions & controls (context-driven)
+  VisibilityToggle: wt,
+  RowMenu: $t,
+  ZoomTo: kt,
+  Opacity: Ot,
+  ConfigSelect: Tt,
+  Item: Zt,
+  // Pure UI
+  ItemUI: Re,
+  Swatch: Ee,
+  CategoryUI: He,
+  RampUI: De,
+  ProportionUI: Ge,
+  IconUI: Ve
+};
+export {
+  ae as DEFAULT_LEGEND_LABELS,
+  rl as Legend
+};
+//# sourceMappingURL=legend.js.map