@carto/ps-react-ui 4.9.0 → 4.11.0

package/dist/category-Dnd2_j0x.js

@@ -0,0 +1,719 @@
+import { jsx as w, jsxs as E } from "react/jsx-runtime";
+import { c as j } from "react/compiler-runtime";
+import { useRef as xe, useState as ye } from "react";
+import { u as ve } from "./widget-context-DTGO0Yta.js";
+import { u as we } from "./widget-store-registry-_W4Z4xp-.js";
+import "zustand";
+import { Box as $, Typography as K, useTheme as ke } from "@mui/material";
+import "./lasso-tool-CDFj4zKY.js";
+import "./cjs-D4KH3azB.js";
+import { T as Ce } from "./tooltip-BDnrRKrp.js";
+import "@mui/icons-material";
+import "@carto/ps-utils";
+const Se = {
+  small: {
+    position: "relative",
+    height: 4,
+    bgcolor: "action.hover",
+    borderRadius: 1,
+    overflow: "hidden",
+    transition: "background-color 150ms ease"
+  },
+  medium: {
+    position: "relative",
+    height: 12,
+    bgcolor: "action.hover",
+    borderRadius: 0.25,
+    overflow: "hidden",
+    transition: "background-color 150ms ease"
+  }
+}, Le = {
+  small: {
+    position: "absolute",
+    inset: "0 auto 0 0",
+    borderRadius: 1,
+    transition: "width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease"
+  },
+  medium: {
+    position: "absolute",
+    inset: "0 auto 0 0",
+    borderRadius: 0.25,
+    transition: "width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease"
+  }
+}, $e = {
+  small: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    transition: "left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease"
+  },
+  medium: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    transition: "left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease"
+  }
+}, x = {
+  // ── Top-level container ────────────────────────────────────────────
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    width: "100%"
+  },
+  // Flat list of category rows. Holds both single + multi rows.
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 1,
+    py: 0.5
+  },
+  // Layered on `list` only in scroll mode (`maxItems === 0`): right padding
+  // so the bars + right-aligned values clear the scrollbar. Right side only
+  // — the left edge stays at 0 so content stays aligned with the capped
+  // view. `overflowY` + the dynamic `maxHeight` remain on the inline style.
+  listScroll: {
+    pr: 1
+  },
+  // ── Single-series row ─────────────────────────────────────────────
+  // v1 layout: label + value share a top flex row (justify-between); the
+  // bar fills the row width below. Mirrors `rowMulti` for visual
+  // consistency.
+  rowSingle: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+    // py: 0.5,
+    // px: 0.5,
+    cursor: "pointer",
+    userSelect: "none",
+    transition: "background-color 80ms ease",
+    // Hovering anywhere in the row also brightens the bar fill, matching
+    // what the bar got from `bar:hover` before. `data-bar-fill` is set
+    // on `barFill` by <CategoryBar>; descendant selector reaches it
+    // through `bar` in single rows and through `multiBarRow > bar` in
+    // multi rows.
+    '&:hover [data-bar-fill="true"]': {
+      filter: "brightness(1.2)"
+    },
+    "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "primary.main",
+      outlineOffset: -2
+    }
+  },
+  // Top row of `rowSingle`: label on the left, value on the right.
+  rowHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 1
+  },
+  // ── Multi-series row ──────────────────────────────────────────────
+  // Flex column: label fills the top row; bar+value pairs stack below.
+  // Bars get full track width — better legibility for N>=2 series than a
+  // shared grid would give.
+  rowMulti: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+    // py: 0.5,
+    // px: 0.5,
+    cursor: "pointer",
+    userSelect: "none",
+    transition: "background-color 80ms ease",
+    // Row-hover brightens every bar fill inside the multi-row.
+    '&:hover [data-bar-fill="true"]': {
+      filter: "brightness(1.2)"
+    },
+    "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "primary.main",
+      outlineOffset: -2
+    }
+  },
+  // ── Row labels / values ───────────────────────────────────────────
+  // Matches v1: name uses medium-weight body2 in primary text color,
+  // value uses regular body2 in secondary text color. Same font size,
+  // visual hierarchy via weight + color.
+  name: {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    color: "text.primary",
+    fontWeight: "medium"
+  },
+  multiName: {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    color: "text.primary",
+    fontWeight: "medium"
+  },
+  value: {
+    color: "text.secondary",
+    fontVariantNumeric: "tabular-nums",
+    // Right-align + minWidth keeps `rowMulti`'s per-bar value column
+    // tidy (where the bar grows on the left and the number sits at a
+    // fixed right edge). `rowSingle` uses `rowHeader`'s flex
+    // justify-between to push the value to the trailing edge, so the
+    // minWidth here is also harmless in that context.
+    minWidth: 48,
+    textAlign: "right"
+  },
+  // ── Bar (track + fill) ────────────────────────────────────────────
+  // Size-keyed maps live above the `styles` object; `<CategoryBar>` picks
+  // the variant via its `size` prop. Hover brightening still fires from
+  // the parent row (`&:hover [data-bar-fill]`), so it works regardless
+  // of which size variant the bar uses.
+  bar: Se,
+  barFill: Le,
+  stackedSegment: $e,
+  // ── Multi-series internals ────────────────────────────────────────
+  // One [bar | value] flex row per series, inside `rowMulti`'s column.
+  multiBarRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1
+  },
+  multiBarContainer: {
+    flex: 1
+  },
+  // ── Stacked-mode row ──────────────────────────────────────────────
+  // Mirror `rowMulti`'s outer shape (click target + hover brightening +
+  // focus ring) but stack three children vertically: header line, bar,
+  // breakdown line.
+  rowStacked: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+    cursor: "pointer",
+    userSelect: "none",
+    transition: "background-color 80ms ease",
+    '&:hover [data-bar-fill="true"]': {
+      filter: "brightness(1.2)"
+    },
+    "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "primary.main",
+      outlineOffset: -2
+    }
+  },
+  stackedHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 1
+  },
+  // Right-aligned total in the header. Tabular-nums keeps totals lined
+  // up vertically across rows; minWidth reuses the per-series-value
+  // column width so the right edge sits at the same spot as `rowMulti`'s
+  // value column when both modes co-exist in the same widget card.
+  stackedTotal: {
+    color: "text.primary",
+    fontWeight: "medium",
+    fontVariantNumeric: "tabular-nums",
+    minWidth: 48,
+    textAlign: "right"
+  },
+  // Flex row of "{seriesName}: {value}" pairs. Wraps gracefully when
+  // series names are long or there are many series.
+  stackedBreakdown: {
+    display: "flex",
+    flexWrap: "wrap",
+    columnGap: 2,
+    rowGap: 0.25
+  },
+  stackedBreakdownItem: {
+    color: "text.secondary",
+    fontVariantNumeric: "tabular-nums"
+  },
+  // ── Legend (sticky bottom) ────────────────────────────────────────
+  legend: {
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    flexWrap: "wrap",
+    pt: 2,
+    mt: 2,
+    position: "sticky",
+    bottom: 0,
+    bgcolor: "background.paper",
+    borderTop: (f) => `1px solid ${f.palette.divider}`
+  },
+  legendItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1
+  },
+  legendDot: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%"
+  },
+  legendLabel: {
+    color: "text.secondary",
+    textTransform: "uppercase",
+    fontWeight: "medium"
+  },
+  // ── "Other" overflow row ──────────────────────────────────────────
+  // Left-aligned `Others <count>` — the label sits next to a muted count
+  // (no parentheses). Only the label is the click target when interactive;
+  // the count is always static text beside it.
+  otherRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    py: 0.5,
+    px: 0.5
+  },
+  // Interactive affordances layered onto the "Others" label only (cursor,
+  // hover tint, focus ring). A negative LEFT margin + matching padding keep
+  // the hover pill breathing without shifting the label's text edge (it
+  // stays aligned with the category rows above). No right margin, so the
+  // row `gap` is preserved between the pill and the count.
+  otherLabelButton: {
+    cursor: "pointer",
+    userSelect: "none",
+    borderRadius: 1,
+    px: 0.5,
+    ml: -0.5,
+    transition: "background-color 80ms ease",
+    "&:hover": {
+      bgcolor: "action.hover"
+    },
+    "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "primary.main",
+      outlineOffset: 2
+    }
+  },
+  otherLabel: {
+    color: "text.primary",
+    fontWeight: "medium"
+  },
+  otherCount: {
+    color: "text.secondary",
+    fontVariantNumeric: "tabular-nums"
+  }
+  // `bar` / `barFill` are size-keyed (`Record<CategorySize, SxProps>`);
+  // every other entry is a single `SxProps<Theme>`. The mixed shape means
+  // we can't apply the file-wide `satisfies Record<string, SxProps<Theme>>`
+  // constraint that the other widget style files use — consumers of
+  // individual tokens still get full type-checking at the call site via
+  // the typed `Box`/`Typography` `sx` prop.
+};
+function he(f) {
+  const e = j(10), {
+    value: o,
+    maxValue: s,
+    color: l,
+    size: c
+  } = f, r = c === void 0 ? "small" : c, t = s > 0 ? o / s * 100 : 0, v = x.bar[r], n = x.barFill[r], h = `${t}%`;
+  let u;
+  e[0] !== l || e[1] !== h ? (u = {
+    width: h,
+    backgroundColor: l
+  }, e[0] = l, e[1] = h, e[2] = u) : u = e[2];
+  let i;
+  e[3] !== n || e[4] !== u ? (i = /* @__PURE__ */ w($, { sx: n, style: u, "data-bar-fill": "true" }), e[3] = n, e[4] = u, e[5] = i) : i = e[5];
+  let a;
+  return e[6] !== r || e[7] !== v || e[8] !== i ? (a = /* @__PURE__ */ w($, { sx: v, "data-size": r, children: i }), e[6] = r, e[7] = v, e[8] = i, e[9] = a) : a = e[9], a;
+}
+function Re(f) {
+  const e = j(27), {
+    name: o,
+    displayName: s,
+    value: l,
+    maxValue: c,
+    color: r,
+    formatter: t,
+    selected: v,
+    onToggle: n,
+    size: h
+  } = f;
+  let u;
+  e[0] !== o || e[1] !== n ? (u = (S) => {
+    (S.key === "Enter" || S.key === " ") && (S.preventDefault(), n(o));
+  }, e[0] = o, e[1] = n, e[2] = u) : u = e[2];
+  const i = u;
+  let a;
+  e[3] !== o || e[4] !== n ? (a = () => n(o), e[3] = o, e[4] = n, e[5] = a) : a = e[5];
+  const g = s ?? o;
+  let d;
+  e[6] !== g ? (d = /* @__PURE__ */ w(K, { variant: "body2", sx: x.name, children: g }), e[6] = g, e[7] = d) : d = e[7];
+  let b;
+  e[8] !== t || e[9] !== l ? (b = t(l), e[8] = t, e[9] = l, e[10] = b) : b = e[10];
+  let p;
+  e[11] !== b ? (p = /* @__PURE__ */ w(K, { variant: "body2", sx: x.value, children: b }), e[11] = b, e[12] = p) : p = e[12];
+  let m;
+  e[13] !== d || e[14] !== p ? (m = /* @__PURE__ */ E($, { sx: x.rowHeader, children: [
+    d,
+    p
+  ] }), e[13] = d, e[14] = p, e[15] = m) : m = e[15];
+  let k;
+  e[16] !== r || e[17] !== c || e[18] !== h || e[19] !== l ? (k = /* @__PURE__ */ w(he, { value: l, maxValue: c, color: r, size: h }), e[16] = r, e[17] = c, e[18] = h, e[19] = l, e[20] = k) : k = e[20];
+  let y;
+  return e[21] !== i || e[22] !== v || e[23] !== a || e[24] !== m || e[25] !== k ? (y = /* @__PURE__ */ E($, { role: "button", "aria-pressed": v, tabIndex: 0, onClick: a, onKeyDown: i, sx: x.rowSingle, children: [
+    m,
+    k
+  ] }), e[21] = i, e[22] = v, e[23] = a, e[24] = m, e[25] = k, e[26] = y) : y = e[26], y;
+}
+function Te(f) {
+  const e = j(27), {
+    name: o,
+    displayName: s,
+    values: l,
+    colors: c,
+    maxValue: r,
+    formatter: t,
+    selected: v,
+    onToggle: n,
+    size: h
+  } = f;
+  let u;
+  e[0] !== o || e[1] !== n ? (u = (m) => {
+    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), n(o));
+  }, e[0] = o, e[1] = n, e[2] = u) : u = e[2];
+  const i = u;
+  let a;
+  e[3] !== o || e[4] !== n ? (a = () => n(o), e[3] = o, e[4] = n, e[5] = a) : a = e[5];
+  const g = s ?? o;
+  let d;
+  e[6] !== g ? (d = /* @__PURE__ */ w(K, { variant: "body2", sx: x.multiName, children: g }), e[6] = g, e[7] = d) : d = e[7];
+  let b;
+  if (e[8] !== c || e[9] !== t || e[10] !== r || e[11] !== o || e[12] !== h || e[13] !== l) {
+    let m;
+    e[15] !== c || e[16] !== t || e[17] !== r || e[18] !== o || e[19] !== h ? (m = (k, y) => /* @__PURE__ */ E($, { sx: x.multiBarRow, children: [
+      /* @__PURE__ */ w($, { sx: x.multiBarContainer, children: /* @__PURE__ */ w(he, { value: k, maxValue: r, color: c[y] ?? "", size: h }) }),
+      /* @__PURE__ */ w(K, { variant: "body2", sx: x.value, children: t(k) })
+    ] }, `${o}-series-${y}`), e[15] = c, e[16] = t, e[17] = r, e[18] = o, e[19] = h, e[20] = m) : m = e[20], b = l.map(m), e[8] = c, e[9] = t, e[10] = r, e[11] = o, e[12] = h, e[13] = l, e[14] = b;
+  } else
+    b = e[14];
+  let p;
+  return e[21] !== i || e[22] !== v || e[23] !== a || e[24] !== d || e[25] !== b ? (p = /* @__PURE__ */ E($, { role: "button", "aria-pressed": v, tabIndex: 0, onClick: a, onKeyDown: i, sx: x.rowMulti, children: [
+    d,
+    b
+  ] }), e[21] = i, e[22] = v, e[23] = a, e[24] = d, e[25] = b, e[26] = p) : p = e[26], p;
+}
+function De(f) {
+  const e = j(17), {
+    values: o,
+    colors: s,
+    maxValue: l,
+    size: c
+  } = f, r = c === void 0 ? "small" : c;
+  let t;
+  if (e[0] !== o) {
+    t = [];
+    let u = 0;
+    for (const i of o)
+      t.push(u), u = u + i;
+    e[0] = o, e[1] = t;
+  } else
+    t = e[1];
+  const v = x.bar[r];
+  let n;
+  if (e[2] !== s || e[3] !== l || e[4] !== t || e[5] !== r || e[6] !== o) {
+    let u;
+    e[8] !== s || e[9] !== l || e[10] !== t || e[11] !== r ? (u = (i, a) => {
+      if (i <= 0)
+        return null;
+      const g = l > 0 ? t[a] / l * 100 : 0, d = l > 0 ? i / l * 100 : 0;
+      return /* @__PURE__ */ w($, { sx: x.stackedSegment[r], style: {
+        left: `${g}%`,
+        width: `${d}%`,
+        backgroundColor: s[a] ?? ""
+      }, "data-bar-fill": "true" }, `seg-${s[a] ?? "none"}-${a}`);
+    }, e[8] = s, e[9] = l, e[10] = t, e[11] = r, e[12] = u) : u = e[12], n = o.map(u), e[2] = s, e[3] = l, e[4] = t, e[5] = r, e[6] = o, e[7] = n;
+  } else
+    n = e[7];
+  let h;
+  return e[13] !== r || e[14] !== v || e[15] !== n ? (h = /* @__PURE__ */ w($, { sx: v, "data-size": r, children: n }), e[13] = r, e[14] = v, e[15] = n, e[16] = h) : h = e[16], h;
+}
+function Ie(f) {
+  const e = j(65), {
+    name: o,
+    displayName: s,
+    values: l,
+    colors: c,
+    seriesNames: r,
+    formatter: t,
+    selected: v,
+    onToggle: n,
+    size: h
+  } = f;
+  let u;
+  e[0] !== o || e[1] !== n ? (u = (R) => {
+    (R.key === "Enter" || R.key === " ") && (R.preventDefault(), n(o));
+  }, e[0] = o, e[1] = n, e[2] = u) : u = e[2];
+  const i = u;
+  let a, g, d, b, p, m, k, y, S, O, I, D, G, A, N;
+  if (e[3] !== s || e[4] !== t || e[5] !== i || e[6] !== o || e[7] !== n || e[8] !== v || e[9] !== l) {
+    N = l.reduce(Ae, 0), d = $, D = "button", G = v, A = 0, e[25] !== o || e[26] !== n ? (b = () => n(o), e[25] = o, e[26] = n, e[27] = b) : b = e[27], p = i, m = x.rowStacked, g = $, O = x.stackedHeader;
+    const R = s ?? o;
+    e[28] !== R ? (I = /* @__PURE__ */ w(K, { variant: "body2", sx: x.multiName, children: R }), e[28] = R, e[29] = I) : I = e[29], a = K, k = "body2", y = x.stackedTotal, S = t(N), e[3] = s, e[4] = t, e[5] = i, e[6] = o, e[7] = n, e[8] = v, e[9] = l, e[10] = a, e[11] = g, e[12] = d, e[13] = b, e[14] = p, e[15] = m, e[16] = k, e[17] = y, e[18] = S, e[19] = O, e[20] = I, e[21] = D, e[22] = G, e[23] = A, e[24] = N;
+  } else
+    a = e[10], g = e[11], d = e[12], b = e[13], p = e[14], m = e[15], k = e[16], y = e[17], S = e[18], O = e[19], I = e[20], D = e[21], G = e[22], A = e[23], N = e[24];
+  let M;
+  e[30] !== a || e[31] !== k || e[32] !== y || e[33] !== S ? (M = /* @__PURE__ */ w(a, { variant: k, sx: y, children: S }), e[30] = a, e[31] = k, e[32] = y, e[33] = S, e[34] = M) : M = e[34];
+  let H;
+  e[35] !== g || e[36] !== M || e[37] !== O || e[38] !== I ? (H = /* @__PURE__ */ E(g, { sx: O, children: [
+    I,
+    M
+  ] }), e[35] = g, e[36] = M, e[37] = O, e[38] = I, e[39] = H) : H = e[39];
+  let T;
+  e[40] !== c || e[41] !== h || e[42] !== N || e[43] !== l ? (T = /* @__PURE__ */ w(De, { values: l, colors: c, maxValue: N, size: h }), e[40] = c, e[41] = h, e[42] = N, e[43] = l, e[44] = T) : T = e[44];
+  let B;
+  if (e[45] !== t || e[46] !== r || e[47] !== l) {
+    let R;
+    e[49] !== t || e[50] !== r ? (R = (P, F) => /* @__PURE__ */ w(K, { variant: "body2", sx: x.stackedBreakdownItem, children: `${r[F] ?? `Series ${F + 1}`}: ${t(P)}` }, `breakdown-${r[F] ?? `series-${F}`}`), e[49] = t, e[50] = r, e[51] = R) : R = e[51], B = l.map(R), e[45] = t, e[46] = r, e[47] = l, e[48] = B;
+  } else
+    B = e[48];
+  let V;
+  e[52] !== B ? (V = /* @__PURE__ */ w($, { sx: x.stackedBreakdown, children: B }), e[52] = B, e[53] = V) : V = e[53];
+  let W;
+  return e[54] !== d || e[55] !== b || e[56] !== p || e[57] !== m || e[58] !== H || e[59] !== T || e[60] !== V || e[61] !== D || e[62] !== G || e[63] !== A ? (W = /* @__PURE__ */ E(d, { role: D, "aria-pressed": G, tabIndex: A, onClick: b, onKeyDown: p, sx: m, children: [
+    H,
+    T,
+    V
+  ] }), e[54] = d, e[55] = b, e[56] = p, e[57] = m, e[58] = H, e[59] = T, e[60] = V, e[61] = D, e[62] = G, e[63] = A, e[64] = W) : W = e[64], W;
+}
+function Ae(f, e) {
+  return f + e;
+}
+function Oe(f) {
+  const e = j(23), {
+    hiddenCount: o,
+    otherLabel: s,
+    otherCountLabel: l,
+    onShowAll: c,
+    showAllLabel: r
+  } = f, t = s === void 0 ? "Others" : s, v = l === void 0 ? "{count}" : l, n = r === void 0 ? "Show all" : r;
+  let h;
+  e[0] !== o || e[1] !== v ? (h = v.replace("{count}", String(o)), e[0] = o, e[1] = v, e[2] = h) : h = e[2];
+  const u = h;
+  let i;
+  e[3] !== u ? (i = /* @__PURE__ */ w(K, { variant: "body2", sx: x.otherCount, children: u }), e[3] = u, e[4] = i) : i = e[4];
+  const a = i;
+  if (!c) {
+    let y;
+    e[5] !== t ? (y = /* @__PURE__ */ w(K, { variant: "body2", sx: x.otherLabel, children: t }), e[5] = t, e[6] = y) : y = e[6];
+    let S;
+    return e[7] !== a || e[8] !== y ? (S = /* @__PURE__ */ E($, { sx: x.otherRow, children: [
+      y,
+      a
+    ] }), e[7] = a, e[8] = y, e[9] = S) : S = e[9], S;
+  }
+  let g;
+  e[10] !== c ? (g = (y) => {
+    (y.key === "Enter" || y.key === " ") && (y.preventDefault(), c());
+  }, e[10] = c, e[11] = g) : g = e[11];
+  const d = g;
+  let b;
+  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = {
+    ...x.otherLabel,
+    ...x.otherLabelButton
+  }, e[12] = b) : b = e[12];
+  let p;
+  e[13] !== d || e[14] !== c || e[15] !== t ? (p = /* @__PURE__ */ w(K, { variant: "body2", component: "span", role: "button", tabIndex: 0, onClick: c, onKeyDown: d, sx: b, children: t }), e[13] = d, e[14] = c, e[15] = t, e[16] = p) : p = e[16];
+  let m;
+  e[17] !== n || e[18] !== p ? (m = /* @__PURE__ */ w(Ce, { title: n, children: p }), e[17] = n, e[18] = p, e[19] = m) : m = e[19];
+  let k;
+  return e[20] !== a || e[21] !== m ? (k = /* @__PURE__ */ E($, { sx: x.otherRow, children: [
+    m,
+    a
+  ] }), e[20] = a, e[21] = m, e[22] = k) : k = e[22], k;
+}
+function Ne(f) {
+  const e = j(7), {
+    series: o,
+    colorAt: s
+  } = f;
+  if (o.length === 0)
+    return null;
+  let l;
+  if (e[0] !== s || e[1] !== o) {
+    let r;
+    e[3] !== s ? (r = (t, v) => /* @__PURE__ */ E($, { sx: x.legendItem, children: [
+      /* @__PURE__ */ w($, { sx: x.legendDot, style: {
+        backgroundColor: t.color ?? s(v)
+      } }),
+      /* @__PURE__ */ w(K, { variant: "caption", sx: x.legendLabel, children: t.name })
+    ] }, t.name), e[3] = s, e[4] = r) : r = e[4], l = o.map(r), e[0] = s, e[1] = o, e[2] = l;
+  } else
+    l = e[2];
+  let c;
+  return e[5] !== l ? (c = /* @__PURE__ */ w($, { sx: x.legend, children: l }), e[5] = l, e[6] = c) : c = e[6], c;
+}
+const Be = 20, We = {
+  small: 36,
+  medium: 44
+}, Fe = 8;
+function ze(f) {
+  if (!f || f.length === 0) return [];
+  const e = Math.max(f.length, 1), o = /* @__PURE__ */ new Map(), s = [];
+  for (let l = 0; l < f.length; l++) {
+    const c = f[l] ?? [];
+    for (const r of c) {
+      let t = o.get(r.name);
+      t || (t = {
+        name: r.name,
+        values: new Array(e).fill(0),
+        rowColors: new Array(e).fill(void 0)
+      }, o.set(r.name, t), s.push(r.name)), t.values[l] = r.value, t.rowColors[l] = r.color;
+    }
+  }
+  return s.map((l) => o.get(l));
+}
+function Me(f) {
+  const e = j(76), {
+    data: o,
+    selection: s,
+    onSelectionChange: l,
+    formatter: c,
+    labelFormatter: r,
+    series: t,
+    maxItems: v,
+    labels: n,
+    onShowAll: h,
+    maxOverride: u,
+    size: i,
+    stacked: a
+  } = f, g = v === void 0 ? Be : v, d = i === void 0 ? "small" : i, b = a === void 0 ? !1 : a, p = ke(), m = c ?? Ve, k = !!s && s.length > 0;
+  let y;
+  e[0] !== s ? (y = s ?? [], e[0] = s, e[1] = y) : y = e[1];
+  let S;
+  e[2] !== y ? (S = new Set(y), e[2] = y, e[3] = S) : S = e[3];
+  const O = S;
+  let I;
+  e[4] !== l || e[5] !== s ? (I = (L) => {
+    if (!l)
+      return;
+    const C = s ?? [], z = C.includes(L) ? C.filter((ue) => ue !== L) : [...C, L];
+    l(z);
+  }, e[4] = l, e[5] = s, e[6] = I) : I = e[6];
+  const D = I, G = p.palette.secondary.main;
+  let A;
+  e[7] !== p.palette ? (A = Object.values(p.palette.qualitative?.bold ?? {}), e[7] = p.palette, e[8] = A) : A = e[8];
+  let N;
+  e[9] !== A || e[10] !== p.palette.secondary.main ? (N = [G, ...A], e[9] = A, e[10] = p.palette.secondary.main, e[11] = N) : N = e[11];
+  const M = N;
+  let H;
+  e[12] !== M || e[13] !== t || e[14] !== p.palette.secondary.main ? (H = (L, C) => {
+    if (C)
+      return C;
+    const z = t?.[L]?.color;
+    return z || (M[L % M.length] ?? p.palette.secondary.main);
+  }, e[12] = M, e[13] = t, e[14] = p.palette.secondary.main, e[15] = H) : H = e[15];
+  const T = H, B = p.palette.action.disabled;
+  let V;
+  e[16] !== o ? (V = ze(o), e[16] = o, e[17] = V) : V = e[17];
+  const W = V;
+  let R;
+  e: {
+    if (typeof u == "number" && u > 0) {
+      R = u;
+      break e;
+    }
+    let L = 0;
+    for (const C of W)
+      for (const z of C.values)
+        z > L && (L = z);
+    R = L;
+  }
+  const P = R, F = g === 0, pe = xe(!1), [ge, be] = ye(null);
+  let Z;
+  e[18] !== F ? (Z = (L) => {
+    if (!L || pe.current || F)
+      return;
+    const C = L.clientHeight;
+    C > 0 && (pe.current = !0, be(C));
+  }, e[18] = F, e[19] = Z) : Z = e[19];
+  const ie = Z;
+  if (W.length === 0)
+    return null;
+  let ee;
+  e[20] !== g ? (ee = typeof g == "number" && Number.isFinite(g) && g > 0, e[20] = g, e[21] = ee) : ee = e[21];
+  const te = ee;
+  let oe;
+  e[22] !== W || e[23] !== te || e[24] !== g ? (oe = te ? W.slice(0, g) : W, e[22] = W, e[23] = te, e[24] = g, e[25] = oe) : oe = e[25];
+  const le = oe, re = te ? W.length - le.length : 0, U = o.length > 1, ce = U && !!t && t.length > 0, ne = F ? ge ?? We[d] * Fe : void 0;
+  let X;
+  e[26] !== F ? (X = F ? {
+    ...x.list,
+    ...x.listScroll
+  } : x.list, e[26] = F, e[27] = X) : X = e[27];
+  let q;
+  e[28] !== ne ? (q = ne !== void 0 ? {
+    maxHeight: ne,
+    overflowY: "auto"
+  } : void 0, e[28] = ne, e[29] = q) : q = e[29];
+  let Y;
+  if (e[30] !== T || e[31] !== B || e[32] !== m || e[33] !== k || e[34] !== U || e[35] !== r || e[36] !== P || e[37] !== O || e[38] !== t || e[39] !== d || e[40] !== b || e[41] !== D || e[42] !== le) {
+    let L;
+    e[44] !== T || e[45] !== B || e[46] !== m || e[47] !== k || e[48] !== U || e[49] !== r || e[50] !== P || e[51] !== O || e[52] !== t || e[53] !== d || e[54] !== b || e[55] !== D ? (L = (C) => {
+      const z = O.has(C.name), ue = k && !z, de = r ? r(C.name) : void 0, fe = (ae) => ue ? B : T(ae, C.rowColors[ae]);
+      return U ? b ? /* @__PURE__ */ w(Ie, { name: C.name, displayName: de, values: C.values, colors: C.values.map((ae, me) => fe(me)), seriesNames: t?.map(He) ?? [], formatter: m, selected: z, onToggle: D, size: d }, String(C.name)) : /* @__PURE__ */ w(Te, { name: C.name, displayName: de, values: C.values, colors: C.values.map((ae, me) => fe(me)), maxValue: P, formatter: m, selected: z, onToggle: D, size: d }, String(C.name)) : /* @__PURE__ */ w(Re, { name: C.name, displayName: de, value: C.values[0] ?? 0, maxValue: P, color: fe(0), formatter: m, selected: z, onToggle: D, size: d }, String(C.name));
+    }, e[44] = T, e[45] = B, e[46] = m, e[47] = k, e[48] = U, e[49] = r, e[50] = P, e[51] = O, e[52] = t, e[53] = d, e[54] = b, e[55] = D, e[56] = L) : L = e[56], Y = le.map(L), e[30] = T, e[31] = B, e[32] = m, e[33] = k, e[34] = U, e[35] = r, e[36] = P, e[37] = O, e[38] = t, e[39] = d, e[40] = b, e[41] = D, e[42] = le, e[43] = Y;
+  } else
+    Y = e[43];
+  let _;
+  e[57] !== re || e[58] !== n?.other || e[59] !== n?.otherCount || e[60] !== n?.showAll || e[61] !== h ? (_ = re > 0 && /* @__PURE__ */ w(Oe, { hiddenCount: re, otherLabel: n?.other, otherCountLabel: n?.otherCount, showAllLabel: n?.showAll, onShowAll: h }), e[57] = re, e[58] = n?.other, e[59] = n?.otherCount, e[60] = n?.showAll, e[61] = h, e[62] = _) : _ = e[62];
+  let J;
+  e[63] !== ie || e[64] !== X || e[65] !== q || e[66] !== Y || e[67] !== _ ? (J = /* @__PURE__ */ E($, { ref: ie, sx: X, style: q, children: [
+    Y,
+    _
+  ] }), e[63] = ie, e[64] = X, e[65] = q, e[66] = Y, e[67] = _, e[68] = J) : J = e[68];
+  let Q;
+  e[69] !== T || e[70] !== ce || e[71] !== t ? (Q = ce && t && /* @__PURE__ */ w(Ne, { series: t, colorAt: (L) => T(L) }), e[69] = T, e[70] = ce, e[71] = t, e[72] = Q) : Q = e[72];
+  let se;
+  return e[73] !== J || e[74] !== Q ? (se = /* @__PURE__ */ E($, { sx: x.root, children: [
+    J,
+    Q
+  ] }), e[73] = J, e[74] = Q, e[75] = se) : se = e[75], se;
+}
+function He(f) {
+  return f.name;
+}
+function Ve(f) {
+  return String(f);
+}
+const Ke = (f) => ({
+  data: f.data ?? [],
+  rawData: f.rawData ?? void 0,
+  formatter: f.formatter,
+  labelFormatter: f.labelFormatter
+});
+function Ee(f) {
+  if (!f) return 0;
+  let e = 0;
+  for (const o of f)
+    for (const s of o) s.value > e && (e = s.value);
+  return e;
+}
+function tt(f) {
+  const e = j(13), {
+    selection: o,
+    onSelectionChange: s,
+    series: l,
+    maxItems: c,
+    labels: r,
+    onShowAll: t,
+    maxOverride: v,
+    size: n,
+    stacked: h
+  } = f, u = ve(), i = we(u, Ke), a = Ee(i.rawData), g = v ?? (a > 0 ? a : void 0);
+  let d;
+  return e[0] !== g || e[1] !== r || e[2] !== c || e[3] !== s || e[4] !== t || e[5] !== o || e[6] !== l || e[7] !== n || e[8] !== i.data || e[9] !== i.formatter || e[10] !== i.labelFormatter || e[11] !== h ? (d = /* @__PURE__ */ w(Me, { data: i.data, formatter: i.formatter, labelFormatter: i.labelFormatter, selection: o, onSelectionChange: s, series: l, maxItems: c, labels: r, onShowAll: t, maxOverride: g, size: n, stacked: h }), e[0] = g, e[1] = r, e[2] = c, e[3] = s, e[4] = t, e[5] = o, e[6] = l, e[7] = n, e[8] = i.data, e[9] = i.formatter, e[10] = i.labelFormatter, e[11] = h, e[12] = d) : d = e[12], d;
+}
+export {
+  tt as C,
+  he as a,
+  Ne as b,
+  Te as c,
+  Oe as d,
+  Re as e,
+  Me as f
+};
+//# sourceMappingURL=category-Dnd2_j0x.js.map