@sproutsocial/seeds-react-data-viz 0.21.2 → 0.22.0

package/dist/bubble/index.js

@@ -0,0 +1,235 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
+
+
+
+
+
+var _chunk33Y5FZTTjs = require('../chunk-33Y5FZTT.js');
+
+
+
+
+var _chunkGWP3PWIGjs = require('../chunk-GWP3PWIG.js');
+require('../chunk-2H2Z7PKZ.js');
+
+// src/charts/bubble/BubbleChart.tsx
+var _react = require('react');
+
+// src/charts/bubble/iconMarkup.ts
+var BUBBLE_ICON_MARKUP = {
+  "user-outline": `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.72756 6C7.38441 6 8.72756 4.65685 8.72756 3C8.72756 1.34315 7.38441 0 5.72756 0C4.07071 0 2.72756 1.34315 2.72756 3C2.72756 4.65685 4.07071 6 5.72756 6Z" fill="currentColor"/>
+<path d="M5.72756 12C8.50201 12 10.1833 10.1963 11.0339 8.89858C11.4669 8.23803 11.0644 7.41859 10.2861 7.28445C8.63561 7 7.15327 7 5.72756 7C4.30185 7 2.81951 7 1.16899 7.28445C0.390671 7.41859 -0.0117778 8.23803 0.421187 8.89858C1.2718 10.1963 2.95311 12 5.72756 12Z" fill="currentColor"/>
+</svg>`,
+  "location-pin-outline": `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path style="fill-rule: evenodd; clip-rule: evenodd;" d="M4.99992 12C6.33325 12 9.66659 7.244 9.66659 4.66667C9.66659 2.08934 7.57725 0 4.99992 0C2.42259 0 0.333252 2.08934 0.333252 4.66667C0.333252 7.244 3.66659 12 4.99992 12ZM4.99992 4.66667C5.36811 4.66667 5.66659 4.36819 5.66659 4C5.66659 3.63181 5.36811 3.33333 4.99992 3.33333C4.63173 3.33333 4.33325 3.63181 4.33325 4C4.33325 4.36819 4.63173 4.66667 4.99992 4.66667Z" fill="currentColor"/>
+</svg>`,
+  "cart-outline": `<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666748 1.83333H1.76749C1.93793 1.83333 2.08092 1.96192 2.09895 2.1314L2.75892 8.33515C1.9651 8.37397 1.33341 9.02988 1.33341 9.83333C1.33341 10.6618 2.00499 11.3333 2.83341 11.3333C3.66184 11.3333 4.33341 10.6618 4.33341 9.83333C4.33341 9.777 4.33031 9.72139 4.32426 9.66667H7.34257C7.33652 9.72139 7.33341 9.777 7.33341 9.83333C7.33341 10.6618 8.00499 11.3333 8.83341 11.3333C9.66184 11.3333 10.3334 10.6618 10.3334 9.83333C10.3334 9.00491 9.66184 8.33333 8.83341 8.33333H4.09959L3.92228 6.66667H9.18028C9.65696 6.66667 10.0674 6.33021 10.1609 5.86278L10.9203 2.06537C10.9616 1.85911 10.8038 1.66667 10.5935 1.66667H3.35763C3.14364 0.98448 2.50729 0.5 1.76749 0.5H0.666748V1.83333Z" fill="currentColor"/>
+</svg>`,
+  "briefcase-outline": `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path style="fill-rule: evenodd; clip-rule: evenodd;" d="M3.5 1.83333V2H1C0.447715 2 0 2.44772 0 3V10.3333C0 10.8856 0.447715 11.3333 1 11.3333H11C11.5523 11.3333 12 10.8856 12 10.3333V3C12 2.44772 11.5523 2 11 2H8.5V1.83333C8.5 0.820811 7.67919 0 6.66667 0H5.33333C4.32081 0 3.5 0.820811 3.5 1.83333ZM5.33333 1C4.8731 1 4.5 1.3731 4.5 1.83333V2H7.5V1.83333C7.5 1.3731 7.1269 1 6.66667 1H5.33333ZM6.66667 5.33333C6.66667 5.70152 6.36819 6 6 6C5.63181 6 5.33333 5.70152 5.33333 5.33333C5.33333 4.96514 5.63181 4.66667 6 4.66667C6.36819 4.66667 6.66667 4.96514 6.66667 5.33333ZM10.6667 6.88767V5.74479C9.44176 6.48334 7.81474 6.95116 6 6.95116C4.18526 6.95116 2.55823 6.48334 1.33333 5.74479V6.88767C2.64682 7.55696 4.25842 7.95116 6 7.95116C7.74158 7.95116 9.35318 7.55696 10.6667 6.88767Z" fill="currentColor"/>
+</svg>`,
+  "laptop-mobile-outline": `<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.84994 0.333313C2.29765 0.333313 1.84993 0.781028 1.84993 1.33331V7.33331H0.516602C0.516602 7.8856 0.964317 8.33331 1.5166 8.33331H6.84994V3.33331C6.84994 2.22874 7.74537 1.33331 8.84994 1.33331H11.1833C11.1833 0.781028 10.7356 0.333313 10.1833 0.333313H2.84994Z" fill="currentColor"/>
+<path style="fill-rule: evenodd; clip-rule: evenodd;" d="M7.84994 3.33331C7.84994 2.78103 8.29765 2.33331 8.84994 2.33331H11.5166C12.0689 2.33331 12.5166 2.78103 12.5166 3.33331V8.66665C12.5166 9.21893 12.0689 9.66665 11.5166 9.66665H8.84994C8.29765 9.66665 7.84994 9.21893 7.84994 8.66665V3.33331ZM10.6833 8.16665C10.6833 8.44279 10.4594 8.66665 10.1833 8.66665C9.90713 8.66665 9.68327 8.44279 9.68327 8.16665C9.68327 7.8905 9.90713 7.66665 10.1833 7.66665C10.4594 7.66665 10.6833 7.8905 10.6833 8.16665Z" fill="currentColor"/>
+</svg>`,
+  "calendar-day-outline": `<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path style="fill-rule: evenodd; clip-rule: evenodd;" d="M3.3632 1.33333H7.69653V0H8.69653V1.33333H9.8632C10.4155 1.33333 10.8632 1.78105 10.8632 2.33333V10.3333C10.8632 10.8856 10.4155 11.3333 9.8632 11.3333H1.19653C0.644248 11.3333 0.196533 10.8856 0.196533 10.3333V2.33333C0.196533 1.78105 0.644248 1.33333 1.19653 1.33333H2.3632V0H3.3632V1.33333ZM1.52987 2.66667V4H9.52987V2.66667H1.52987ZM3.8632 5.33333H1.8632V7.33333H3.8632V5.33333Z" fill="currentColor"/>
+</svg>`,
+  "chart-pie-outline": `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path style="fill-rule: evenodd; clip-rule: evenodd;" d="M10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6H6V0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456725 3.7039C0.00259971 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66557 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342ZM7.33334 4.66672L11.8513 4.66656C11.3422 2.42346 9.57645 0.657717 7.33334 0.148727V4.66672Z" fill="currentColor"/>
+</svg>`,
+  "paper-outline": `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.06836 12C0.516075 12 0.0683594 11.5523 0.0683594 11V1C0.0683594 0.447715 0.516075 0 1.06836 0H3.73503C4.28731 0 4.73503 0.447715 4.73503 1V2.83333C4.73503 4.02995 5.70508 5 6.90169 5H8.40169C8.95398 5 9.40169 5.44772 9.40169 6V11C9.40169 11.5523 8.95398 12 8.40169 12H1.06836Z" fill="currentColor"/>
+<path d="M5.73503 2.49999V0.107381C7.61938 0.518781 9.07818 2.06865 9.35443 3.99999H7.23503C6.4066 3.99999 5.73503 3.32841 5.73503 2.49999Z" fill="currentColor"/>
+</svg>`
+};
+
+// src/charts/bubble/adapter.ts
+function defaultPointDescriptionFormatter(point) {
+  return `${point.name}: ${point.value}. Press Enter or Space to activate.`;
+}
+function resolveIconName(name) {
+  return name.endsWith("-outline") || name.endsWith("-solid") ? name : `${name}-outline`;
+}
+function buildIconMarkup(icon) {
+  return BUBBLE_ICON_MARKUP[resolveIconName(icon)];
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var ICON_LABEL_TEXT_MIN_RADIUS = 40;
+var NO_ICON_LABEL_MIN_RADIUS = 25;
+function buildBubbleDataLabel(point, radius) {
+  const name = escapeHtml(point.name);
+  const iconMarkup = point.icon ? buildIconMarkup(point.icon) : void 0;
+  if (iconMarkup) {
+    const showName = radius > ICON_LABEL_TEXT_MIN_RADIUS;
+    return `<div>${iconMarkup}${showName ? ` <span>${name}</span>` : ""}</div>`;
+  }
+  if (radius < NO_ICON_LABEL_MIN_RADIUS) return "";
+  const diameter = radius * 2;
+  return `<div style="max-width: ${diameter}px; max-height: ${diameter}px; overflow: hidden; text-overflow: ellipsis; white-space: wrap;" title="${name}">${name}</div>`;
+}
+function transformBubbleDataToSeries(data) {
+  return data.map((category, index) => ({
+    type: "packedbubble",
+    name: category.name,
+    data: category.innerBubbles.map((bubble) => ({
+      name: bubble.name,
+      value: bubble.value
+    })),
+    color: category.color,
+    colorIndex: index
+  }));
+}
+function transformBubbleClickData(event) {
+  const base = {
+    name: event.point.name,
+    value: event.point.value,
+    seriesIndex: event.point.series.index,
+    pointIndex: event.point.index
+  };
+  const isClickEvent = event.type === "click";
+  if (!isClickEvent && event.target) {
+    const rect = event.target.getBoundingClientRect();
+    return { ...base, pageX: rect.x, pageY: rect.y };
+  }
+  return { ...base, pageX: _nullishCoalesce(event.pageX, () => ( 0)), pageY: _nullishCoalesce(event.pageY, () => ( 0)) };
+}
+function mapBubbleTooltipRow(data) {
+  const row = data[0];
+  if (_optionalChain([row, 'optionalAccess', _ => _.name]) == null || _optionalChain([row, 'optionalAccess', _2 => _2.seriesIndex]) == null) return null;
+  return row;
+}
+function buildBubbleChartOptions(props) {
+  const hasOnClick = Boolean(props.onClick);
+  const base = _chunkGWP3PWIGjs.buildBaseChartOptions.call(void 0, {
+    type: "packedbubble",
+    description: props.accessibility.description,
+    svgContainerLabel: props.accessibility.svgContainerLabel,
+    ...hasOnClick ? {
+      point: {
+        descriptionFormatter: _nullishCoalesce(_optionalChain([props, 'access', _3 => _3.accessibility, 'access', _4 => _4.point, 'optionalAccess', _5 => _5.descriptionFormatter]), () => ( defaultPointDescriptionFormatter))
+      }
+    } : {}
+  });
+  return {
+    ...base,
+    chart: {
+      ...base.chart,
+      type: "packedbubble",
+      height: _nullishCoalesce(props.height, () => ( _chunk33Y5FZTTjs.BUBBLE_CHART_HEIGHT))
+    },
+    plotOptions: {
+      packedbubble: {
+        minSize: "30%",
+        maxSize: _nullishCoalesce(props.maxBubbleSize, () => ( _chunk33Y5FZTTjs.BUBBLE_CHART_DEFAULT_MAX_SIZE)),
+        draggable: false,
+        states: { hover: { enabled: false } },
+        layoutAlgorithm: {
+          gravitationalConstant: 0.05,
+          seriesInteraction: true,
+          parentNodeLimit: true,
+          enableSimulation: false,
+          bubblePadding: _nullishCoalesce(props.bubblePadding, () => ( _chunk33Y5FZTTjs.BUBBLE_CHART_DEFAULT_PADDING)),
+          splitSeries: _nullishCoalesce(props.splitSeries, () => ( false))
+        },
+        dataLabels: {
+          enabled: true,
+          // See chartBase.tsx's SeedsChartPackedBubblePlotOptions.dataLabels —
+          // the label formatter returns HTML (icon + wrapped text); preserved
+          // for functional parity (known useHTML gap, mirrors bar's axis
+          // labels).
+          useHTML: true,
+          formatter() {
+            const inner = _optionalChain([props, 'access', _6 => _6.data, 'access', _7 => _7[this.point.series.index], 'optionalAccess', _8 => _8.innerBubbles, 'access', _9 => _9[this.point.index]]);
+            return buildBubbleDataLabel(
+              { name: this.point.name, icon: _optionalChain([inner, 'optionalAccess', _10 => _10.icon]) },
+              this.radius
+            );
+          }
+        },
+        accessibility: {
+          enabled: true,
+          keyboardNavigation: { enabled: true },
+          point: { valueDescriptionFormat: "{point.name}: {point.value}" }
+        },
+        point: {
+          events: {
+            click: hasOnClick ? (event) => {
+              _optionalChain([event, 'access', _11 => _11.stopPropagation, 'optionalCall', _12 => _12()]);
+              if (event.type !== "click" && !event.target) return;
+              props.onClick(transformBubbleClickData(event));
+            } : void 0,
+            mouseOver: props.onMouseEnter ? function() {
+              props.onMouseEnter({ position: this.name });
+            } : void 0,
+            mouseOut: props.onMouseLeave ? function() {
+              props.onMouseLeave({ position: this.name });
+            } : void 0
+          }
+        }
+      }
+    },
+    series: transformBubbleDataToSeries(props.data)
+  };
+}
+
+// src/charts/bubble/BubbleChart.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
+  const { colors } = _chunkGWP3PWIGjs.useSeedsChartSetup.call(void 0, {
+    series: props.data.map((d) => ({ color: d.color }))
+  });
+  const options = _react.useMemo.call(void 0, () => buildBubbleChartOptions(props), [props]);
+  const hasOnClick = Boolean(props.onClick);
+  const hasOnPlotBackgroundClick = Boolean(props.onPlotBackgroundClick);
+  const containerProps = _chunk6EIJCJCNjs.getChartContainerProps.call(void 0, {
+    familyClasses: ["seeds-chart-bubble"],
+    colors: props.data.map((d) => d.color),
+    hasOnClick,
+    className: props.className
+  });
+  const tooltip = props.tooltip ? (args) => {
+    const row = mapBubbleTooltipRow(args.data);
+    if (!row) return null;
+    return props.tooltip({ ...args, data: [row] });
+  } : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ...containerProps,
+      ...hasOnPlotBackgroundClick ? { "data-has-on-plot-background-click": "" } : {},
+      onClick: props.onPlotBackgroundClick,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGWP3PWIGjs.ChartRenderer,
+        {
+          options,
+          series: props.data.map((d, i) => ({
+            name: d.name,
+            color: _nullishCoalesce(d.color, () => ( colors[i]))
+          })),
+          colors,
+          tooltip,
+          hasOnClick,
+          tooltipClickLabel: props.tooltipClickLabel,
+          invalidNumberLabel: props.invalidNumberLabel,
+          valueFormat: props.format,
+          hideLegend: true,
+          exportTitle: props.exportTitle,
+          onReady: props.onReady
+        },
+        `Bubble-Chart-${props.splitSeries ? "SplitSeries" : ""}`
+      )
+    }
+  );
+});
+
+
+
+exports.BubbleChart = BubbleChart; exports.defaultBubbleChartWidth = _chunk33Y5FZTTjs.defaultBubbleChartWidth;
+//# sourceMappingURL=index.js.map

package/dist/bubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bubble/index.js","../../src/charts/bubble/BubbleChart.tsx","../../src/charts/bubble/iconMarkup.ts","../../src/charts/bubble/adapter.ts"],"names":[],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bubble/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport {\n  ChartRenderer,\n  useSeedsChartSetup,\n  type ChartTooltipProps,\n} from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildBubbleChartOptions, mapBubbleTooltipRow } from \"./adapter\";\nimport type { BubbleChartProps } from \"./types\";\n\n/**\n * BubbleChart renders a Highcharts packedbubble (clustered, axis-less) chart\n * from a list of categories, each with its own nested inner bubbles.\n *\n * Like DonutChart, it carries no `styled-components`: the wrapper is a plain\n * `<div>` and the Highcharts styling ships as static CSS. Consumers import\n * both `@sproutsocial/seeds-react-data-viz/chart-styles.css` and\n * `.../bubble.css` once (the component never self-imports its CSS).\n */\nexport const BubbleChart = memo(function BubbleChart(props: BubbleChartProps) {\n  const { colors } = useSeedsChartSetup({\n    series: props.data.map((d) => ({ color: d.color })),\n  });\n\n  const options = useMemo(() => buildBubbleChartOptions(props), [props]);\n  const hasOnClick = Boolean(props.onClick);\n  const hasOnPlotBackgroundClick = Boolean(props.onPlotBackgroundClick);\n\n  // RAW per-category colors only — an unset category falls through to\n  // chart-styles.css's --highcharts-color-N default, matching the bar\n  // convention (bubble's outer categories are separate series, like bar's,\n  // not donut's single-series-many-points model).\n  const containerProps = getChartContainerProps({\n    familyClasses: [\"seeds-chart-bubble\"],\n    colors: props.data.map((d) => d.color),\n    hasOnClick,\n    className: props.className,\n  });\n\n  // `ChartRenderer` expects `(ChartTooltipProps) => ReactNode`; the consumer's\n  // function expects the narrower `BubbleChartTooltipProps` (required\n  // seriesIndex/pointIndex). Wrap rather than cast the function type so the\n  // intent is explicit; `mapBubbleTooltipRow` applies the remount-desync null\n  // guard.\n  const tooltip = props.tooltip\n    ? (args: ChartTooltipProps) => {\n        const row = mapBubbleTooltipRow(args.data);\n        if (!row) return null;\n        return props.tooltip!({ ...args, data: [row] });\n      }\n    : undefined;\n\n  return (\n    <div\n      {...containerProps}\n      {...(hasOnPlotBackgroundClick\n        ? { \"data-has-on-plot-background-click\": \"\" }\n        : {})}\n      onClick={props.onPlotBackgroundClick}\n    >\n      <ChartRenderer\n        // Highcharts <12.2.0 can't re-run the packedbubble split layout when\n        // `splitSeries` toggles (highcharts/highcharts#21972, fixed by #22186\n        // in 12.2.0), so we force a full remount via `key`. REMOVE this `key`\n        // once seeds is on Highcharts >=12.2.0.\n        // Unrelated, but a watch-item for that same upgrade: the #21972 fix\n        // (#22186) introduced a still-open regression, #24134, where 2+\n        // packedbubble charts that are BOTH in split mode at the same time on\n        // one page share a global `allParentNodes` array, causing one chart's\n        // bubbles to drift outside its plot area. A single bubble chart (or\n        // several where at most one is split) is unaffected — only\n        // simultaneous multi-chart split mode triggers it. Doesn't affect this\n        // usage today (Smart Categories renders one bubble chart at a time),\n        // but if a future surface ever renders 2+ split bubble charts at\n        // once post-upgrade, apply the maintainers' workaround (reset\n        // `allParentNodes` on chart `init`) until Highcharts ships a fix.\n        key={`Bubble-Chart-${props.splitSeries ? \"SplitSeries\" : \"\"}`}\n        options={options}\n        series={props.data.map((d, i) => ({\n          name: d.name,\n          color: d.color ?? colors[i],\n        }))}\n        colors={colors}\n        tooltip={tooltip}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        invalidNumberLabel={props.invalidNumberLabel}\n        valueFormat={props.format}\n        hideLegend\n        exportTitle={props.exportTitle}\n        onReady={props.onReady}\n      />\n    </div>\n  );\n});\n","/**\n * TEMPORARY — remove when CE-202 lands (this file and its import in\n * `adapter.ts`).\n *\n * Raw inline-SVG markup for the bubble chart's data-label icons, duplicated\n * verbatim from web-app-core v1's `smartCategoryToSVGMap`\n * (`SmartCategoriesBubbleChart.tsx`), re-keyed from entity type to the Seeds\n * icon name the chart's `icon` prop actually receives (the Listening consumer\n * maps entity type -> icon name via `EntityTypeIconMap`). Copying v1's exact\n * glyphs is what guarantees pixel parity with the live chart.\n *\n * WHY inline SVG rather than the Seeds sprite `<use xlink:href=\"#seeds-svgs_...\">`:\n * Highcharts renders `useHTML` data labels outside the light-DOM tree the\n * sprite sheet is injected into, so cross-tree `<use>` resolution fails. This\n * is the same wall v1 hit, which is why it hand-copied raw path data instead\n * of referencing the sprite. The general fix — a lightweight per-icon markup\n * export from seeds-icons that avoids pulling the whole ~300KB+/category\n * sprite bundle into every `seeds-react-data-viz` consumer — is tracked by\n * CE-202; when it lands, resolve icons through that and delete this file.\n *\n * Fills are `currentColor` so each glyph inherits the data-label text color.\n * Each SVG keeps its native `width`/`height` for v1-identical inline sizing.\n * An icon outside this map degrades to the no-icon (name-only) label rather\n * than rendering nothing.\n */\nexport const BUBBLE_ICON_MARKUP: Record<string, string> = {\n  \"user-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.72756 6C7.38441 6 8.72756 4.65685 8.72756 3C8.72756 1.34315 7.38441 0 5.72756 0C4.07071 0 2.72756 1.34315 2.72756 3C2.72756 4.65685 4.07071 6 5.72756 6Z\" fill=\"currentColor\"/>\n<path d=\"M5.72756 12C8.50201 12 10.1833 10.1963 11.0339 8.89858C11.4669 8.23803 11.0644 7.41859 10.2861 7.28445C8.63561 7 7.15327 7 5.72756 7C4.30185 7 2.81951 7 1.16899 7.28445C0.390671 7.41859 -0.0117778 8.23803 0.421187 8.89858C1.2718 10.1963 2.95311 12 5.72756 12Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"location-pin-outline\": `<svg width=\"10\" height=\"12\" viewBox=\"0 0 10 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M4.99992 12C6.33325 12 9.66659 7.244 9.66659 4.66667C9.66659 2.08934 7.57725 0 4.99992 0C2.42259 0 0.333252 2.08934 0.333252 4.66667C0.333252 7.244 3.66659 12 4.99992 12ZM4.99992 4.66667C5.36811 4.66667 5.66659 4.36819 5.66659 4C5.66659 3.63181 5.36811 3.33333 4.99992 3.33333C4.63173 3.33333 4.33325 3.63181 4.33325 4C4.33325 4.36819 4.63173 4.66667 4.99992 4.66667Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"cart-outline\": `<svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0.666748 1.83333H1.76749C1.93793 1.83333 2.08092 1.96192 2.09895 2.1314L2.75892 8.33515C1.9651 8.37397 1.33341 9.02988 1.33341 9.83333C1.33341 10.6618 2.00499 11.3333 2.83341 11.3333C3.66184 11.3333 4.33341 10.6618 4.33341 9.83333C4.33341 9.777 4.33031 9.72139 4.32426 9.66667H7.34257C7.33652 9.72139 7.33341 9.777 7.33341 9.83333C7.33341 10.6618 8.00499 11.3333 8.83341 11.3333C9.66184 11.3333 10.3334 10.6618 10.3334 9.83333C10.3334 9.00491 9.66184 8.33333 8.83341 8.33333H4.09959L3.92228 6.66667H9.18028C9.65696 6.66667 10.0674 6.33021 10.1609 5.86278L10.9203 2.06537C10.9616 1.85911 10.8038 1.66667 10.5935 1.66667H3.35763C3.14364 0.98448 2.50729 0.5 1.76749 0.5H0.666748V1.83333Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"briefcase-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M3.5 1.83333V2H1C0.447715 2 0 2.44772 0 3V10.3333C0 10.8856 0.447715 11.3333 1 11.3333H11C11.5523 11.3333 12 10.8856 12 10.3333V3C12 2.44772 11.5523 2 11 2H8.5V1.83333C8.5 0.820811 7.67919 0 6.66667 0H5.33333C4.32081 0 3.5 0.820811 3.5 1.83333ZM5.33333 1C4.8731 1 4.5 1.3731 4.5 1.83333V2H7.5V1.83333C7.5 1.3731 7.1269 1 6.66667 1H5.33333ZM6.66667 5.33333C6.66667 5.70152 6.36819 6 6 6C5.63181 6 5.33333 5.70152 5.33333 5.33333C5.33333 4.96514 5.63181 4.66667 6 4.66667C6.36819 4.66667 6.66667 4.96514 6.66667 5.33333ZM10.6667 6.88767V5.74479C9.44176 6.48334 7.81474 6.95116 6 6.95116C4.18526 6.95116 2.55823 6.48334 1.33333 5.74479V6.88767C2.64682 7.55696 4.25842 7.95116 6 7.95116C7.74158 7.95116 9.35318 7.55696 10.6667 6.88767Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"laptop-mobile-outline\": `<svg width=\"13\" height=\"10\" viewBox=\"0 0 13 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.84994 0.333313C2.29765 0.333313 1.84993 0.781028 1.84993 1.33331V7.33331H0.516602C0.516602 7.8856 0.964317 8.33331 1.5166 8.33331H6.84994V3.33331C6.84994 2.22874 7.74537 1.33331 8.84994 1.33331H11.1833C11.1833 0.781028 10.7356 0.333313 10.1833 0.333313H2.84994Z\" fill=\"currentColor\"/>\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M7.84994 3.33331C7.84994 2.78103 8.29765 2.33331 8.84994 2.33331H11.5166C12.0689 2.33331 12.5166 2.78103 12.5166 3.33331V8.66665C12.5166 9.21893 12.0689 9.66665 11.5166 9.66665H8.84994C8.29765 9.66665 7.84994 9.21893 7.84994 8.66665V3.33331ZM10.6833 8.16665C10.6833 8.44279 10.4594 8.66665 10.1833 8.66665C9.90713 8.66665 9.68327 8.44279 9.68327 8.16665C9.68327 7.8905 9.90713 7.66665 10.1833 7.66665C10.4594 7.66665 10.6833 7.8905 10.6833 8.16665Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"calendar-day-outline\": `<svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M3.3632 1.33333H7.69653V0H8.69653V1.33333H9.8632C10.4155 1.33333 10.8632 1.78105 10.8632 2.33333V10.3333C10.8632 10.8856 10.4155 11.3333 9.8632 11.3333H1.19653C0.644248 11.3333 0.196533 10.8856 0.196533 10.3333V2.33333C0.196533 1.78105 0.644248 1.33333 1.19653 1.33333H2.3632V0H3.3632V1.33333ZM1.52987 2.66667V4H9.52987V2.66667H1.52987ZM3.8632 5.33333H1.8632V7.33333H3.8632V5.33333Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"chart-pie-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6H6V0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456725 3.7039C0.00259971 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66557 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342ZM7.33334 4.66672L11.8513 4.66656C11.3422 2.42346 9.57645 0.657717 7.33334 0.148727V4.66672Z\" fill=\"currentColor\"/>\n</svg>`,\n  \"paper-outline\": `<svg width=\"10\" height=\"12\" viewBox=\"0 0 10 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1.06836 12C0.516075 12 0.0683594 11.5523 0.0683594 11V1C0.0683594 0.447715 0.516075 0 1.06836 0H3.73503C4.28731 0 4.73503 0.447715 4.73503 1V2.83333C4.73503 4.02995 5.70508 5 6.90169 5H8.40169C8.95398 5 9.40169 5.44772 9.40169 6V11C9.40169 11.5523 8.95398 12 8.40169 12H1.06836Z\" fill=\"currentColor\"/>\n<path d=\"M5.73503 2.49999V0.107381C7.61938 0.518781 9.07818 2.06865 9.35443 3.99999H7.23503C6.4066 3.99999 5.73503 3.32841 5.73503 2.49999Z\" fill=\"currentColor\"/>\n</svg>`,\n};\n","import type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { BUBBLE_ICON_MARKUP } from \"./iconMarkup\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport type {\n  ChartTooltipDataRow,\n  SeedsChartBubbleClickEvent,\n  SeedsChartBubbleDataLabelFormatterContext,\n  SeedsChartOptions,\n  SeedsChartPackedBubbleSeriesOptions,\n} from \"../shared/chartBase\";\nimport {\n  BUBBLE_CHART_DEFAULT_MAX_SIZE,\n  BUBBLE_CHART_DEFAULT_PADDING,\n  BUBBLE_CHART_HEIGHT,\n} from \"../../constants/chartOptions\";\nimport type {\n  BubbleCategoryDataPoint,\n  BubbleChartClickData,\n  BubbleChartProps,\n  BubbleChartTooltipRow,\n} from \"./types\";\n\nfunction defaultPointDescriptionFormatter(point: {\n  name: string;\n  value: number;\n}): string {\n  return `${point.name}: ${point.value}. Press Enter or Space to activate.`;\n}\n\n/**\n * A bare icon name (no `-outline`/`-solid` suffix) resolves to its default\n * variant, matching `seeds-react-icon`'s own `resolveIconName` (`outline` at\n * this label's rendered size — mirrors non-mini `<Icon>` sizing, since\n * `BUBBLE_ICON_MARKUP` only stocks the outline variant).\n */\nfunction resolveIconName(name: TypeIconName): string {\n  return name.endsWith(\"-outline\") || name.endsWith(\"-solid\")\n    ? name\n    : `${name}-outline`;\n}\n\n// Icon markup lives in ./iconMarkup (a verbatim, temporary duplicate of v1's\n// raw-SVG map — see that file's header and CE-202). Kept out of this adapter so\n// the eventual general fix is a one-file deletion, not a surgical edit here.\nfunction buildIconMarkup(icon: TypeIconName): string | undefined {\n  return BUBBLE_ICON_MARKUP[resolveIconName(icon)];\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\n// v1's radius thresholds (`MINIMUM_BUBBLE_RADIUS_FOR_CATEGORY_TEXT` /\n// `MINIMUM_BUBBLE_RADIUS_FOR_DATALABEL_TEXT`), generalized per SPEC decision\n// 9a: the rule is icon-presence-driven, not view-mode-driven. v1 conflated the\n// two because overview-mode categories were the only points it ever assigned\n// an icon to — incidental, not load-bearing.\nconst ICON_LABEL_TEXT_MIN_RADIUS = 40;\nconst NO_ICON_LABEL_MIN_RADIUS = 25;\n\n/**\n * Assembles a packedbubble data label as an HTML string (`useHTML: true`,\n * required — see `charts/README.md`'s known gap, mirrored from v1). Icon\n * present → icon always renders, name conditional on radius; no icon → hidden\n * below a radius floor, else the name clipped/wrapped to the bubble's\n * diameter. Mirrors v1's `dataLabelFormatter` exactly: a plain `<div>` with the\n * inline icon to the left of the name (v1 does nothing more — it relies on the\n * browser-default inline `<svg>`; see bubble.css for the Tailwind-Preflight\n * override that keeps that default intact here). An `icon` outside\n * `BUBBLE_ICON_MARKUP`'s current coverage falls through to the no-icon branch\n * (name only) rather than rendering an empty/broken icon.\n */\nfunction buildBubbleDataLabel(\n  point: { name: string; icon?: TypeIconName },\n  radius: number\n): string {\n  const name = escapeHtml(point.name);\n  const iconMarkup = point.icon ? buildIconMarkup(point.icon) : undefined;\n  if (iconMarkup) {\n    const showName = radius > ICON_LABEL_TEXT_MIN_RADIUS;\n    return `<div>${iconMarkup}${showName ? ` <span>${name}</span>` : \"\"}</div>`;\n  }\n  if (radius < NO_ICON_LABEL_MIN_RADIUS) return \"\";\n  const diameter = radius * 2;\n  return `<div style=\"max-width: ${diameter}px; max-height: ${diameter}px; overflow: hidden; text-overflow: ellipsis; white-space: wrap;\" title=\"${name}\">${name}</div>`;\n}\n\nexport function transformBubbleDataToSeries(\n  data: Array<BubbleCategoryDataPoint>\n): Array<SeedsChartPackedBubbleSeriesOptions> {\n  return data.map((category, index) => ({\n    type: \"packedbubble\",\n    name: category.name,\n    data: category.innerBubbles.map((bubble) => ({\n      name: bubble.name,\n      value: bubble.value,\n    })),\n    color: category.color,\n    colorIndex: index,\n  }));\n}\n\n/**\n * Keyboard activation has no `stopPropagation` and its `type` isn't `\"click\"`;\n * derive `pageX`/`pageY` from the target's bounding rect for keyboard, from\n * the raw event for a mouse click. Mirrors v1's `transformBubbleChartClickData`.\n */\nexport function transformBubbleClickData(\n  event: SeedsChartBubbleClickEvent\n): BubbleChartClickData {\n  const base = {\n    name: event.point.name,\n    value: event.point.value,\n    seriesIndex: event.point.series.index,\n    pointIndex: event.point.index,\n  };\n  const isClickEvent = event.type === \"click\";\n  if (!isClickEvent && event.target) {\n    const rect = (event.target as HTMLElement).getBoundingClientRect();\n    return { ...base, pageX: rect.x, pageY: rect.y };\n  }\n  return { ...base, pageX: event.pageX ?? 0, pageY: event.pageY ?? 0 };\n}\n\n/**\n * During the split<->unsplit remount transition the tooltip context is\n * briefly missing data (name/seriesIndex undefined) — bail rather than render\n * a broken tooltip. Mirrors v1.\n */\nexport function mapBubbleTooltipRow(\n  data: ChartTooltipDataRow[]\n): BubbleChartTooltipRow | null {\n  const row = data[0] as BubbleChartTooltipRow | undefined;\n  if (row?.name == null || row?.seriesIndex == null) return null;\n  return row;\n}\n\nexport function buildBubbleChartOptions(\n  props: BubbleChartProps\n): SeedsChartOptions {\n  const hasOnClick = Boolean(props.onClick);\n  const base = buildBaseChartOptions({\n    type: \"packedbubble\",\n    description: props.accessibility.description,\n    svgContainerLabel: props.accessibility.svgContainerLabel,\n    ...(hasOnClick\n      ? {\n          point: {\n            descriptionFormatter:\n              props.accessibility.point?.descriptionFormatter ??\n              defaultPointDescriptionFormatter,\n          },\n        }\n      : {}),\n  });\n\n  return {\n    ...base,\n    chart: {\n      ...base.chart,\n      type: \"packedbubble\",\n      height: props.height ?? BUBBLE_CHART_HEIGHT,\n    },\n    plotOptions: {\n      packedbubble: {\n        minSize: \"30%\",\n        maxSize: props.maxBubbleSize ?? BUBBLE_CHART_DEFAULT_MAX_SIZE,\n        draggable: false,\n        states: { hover: { enabled: false } },\n        layoutAlgorithm: {\n          gravitationalConstant: 0.05,\n          seriesInteraction: true,\n          parentNodeLimit: true,\n          enableSimulation: false,\n          bubblePadding: props.bubblePadding ?? BUBBLE_CHART_DEFAULT_PADDING,\n          splitSeries: props.splitSeries ?? false,\n        },\n        dataLabels: {\n          enabled: true,\n          // See chartBase.tsx's SeedsChartPackedBubblePlotOptions.dataLabels —\n          // the label formatter returns HTML (icon + wrapped text); preserved\n          // for functional parity (known useHTML gap, mirrors bar's axis\n          // labels).\n          useHTML: true,\n          formatter(this: SeedsChartBubbleDataLabelFormatterContext) {\n            const inner =\n              props.data[this.point.series.index]?.innerBubbles[\n                this.point.index\n              ];\n            return buildBubbleDataLabel(\n              { name: this.point.name, icon: inner?.icon },\n              this.radius\n            );\n          },\n        },\n        accessibility: {\n          enabled: true,\n          keyboardNavigation: { enabled: true },\n          point: { valueDescriptionFormat: \"{point.name}: {point.value}\" },\n        },\n        point: {\n          events: {\n            click: hasOnClick\n              ? (event: SeedsChartBubbleClickEvent) => {\n                  event.stopPropagation?.();\n                  // Keyboard events have no `target` when not a genuine click.\n                  if (event.type !== \"click\" && !event.target) return;\n                  props.onClick!(transformBubbleClickData(event));\n                }\n              : undefined,\n            mouseOver: props.onMouseEnter\n              ? function (this: { name: string }) {\n                  props.onMouseEnter!({ position: this.name });\n                }\n              : undefined,\n            mouseOut: props.onMouseLeave\n              ? function (this: { name: string }) {\n                  props.onMouseLeave!({ position: this.name });\n                }\n              : undefined,\n          },\n        },\n      },\n    },\n    series: transformBubbleDataToSeries(props.data),\n  };\n}\n"]}

package/dist/bubble.css

@@ -0,0 +1,104 @@
+/**
+ * Seeds BubbleChart family styles.
+ *
+ * The bubble-specific layer on top of the shared `chart-styles.css`
+ * foundation. This file owns only the packedbubble-specific rules — fill
+ * opacity, the faked hover halo (darker fill + thicker stroke; styledMode has
+ * no separate halo layer for packedbubble), data-label typography, and the
+ * plot-background click affordance — scoped under `.seeds-chart-bubble`.
+ * Values are ported verbatim from v1's `bubbleChartStyles`
+ * (styled-components) for pixel-identical parity; v1 still consumes that
+ * styled-components block separately — do not remove it.
+ *
+ * Dark-mode overrides use the same `[data-theme="dark"], .dark, .lights-out`
+ * selectors the DS theme package itself emits (seeds-react-theme/dist/theme-
+ * dark.css) — this file is the first v2 chart family needing a non-color
+ * value (opacity) to differ by theme, so it can't rely solely on a CSS custom
+ * property the DS already emits per-theme the way colors do.
+ *
+ * Consumers import BOTH stylesheets once (the component never self-imports):
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
+ *   import "@sproutsocial/seeds-react-data-viz/bubble.css";
+ */
+
+/* Make the bubble fill partly transparent. */
+.seeds-chart-bubble .highcharts-series {
+  fill-opacity: 0.5;
+}
+[data-theme="dark"] .seeds-chart-bubble .highcharts-series,
+.dark .seeds-chart-bubble .highcharts-series,
+.lights-out .seeds-chart-bubble .highcharts-series {
+  fill-opacity: 0.7;
+}
+
+.seeds-chart-bubble .highcharts-parentNode {
+  fill-opacity: 0.25;
+}
+
+/* Fake the hover halo: a darker, thicker stroke (styledMode has no separate
+   halo layer for packedbubble). */
+.seeds-chart-bubble .highcharts-point {
+  stroke-width: 2;
+}
+.seeds-chart-bubble .highcharts-point:hover {
+  fill-opacity: 0.7;
+  stroke-width: 6;
+  stroke-opacity: 0.5;
+}
+[data-theme="dark"] .seeds-chart-bubble .highcharts-point:hover,
+.dark .seeds-chart-bubble .highcharts-point:hover,
+.lights-out .seeds-chart-bubble .highcharts-point:hover {
+  fill-opacity: 0.9;
+}
+
+/* Data label text — darker for contrast in light, regular body color in dark. */
+.seeds-chart-bubble .highcharts-data-label {
+  fill: var(--color-neutral-1100);
+  color: var(--color-neutral-1100);
+  stroke: none;
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family);
+  font-size: var(--font-size-200);
+  text-align: center;
+  /* Labels live in a separate part of the DOM tree from the points — without
+     this they interfere with point hover styling. */
+  pointer-events: none;
+}
+[data-theme="dark"] .seeds-chart-bubble .highcharts-data-label,
+.dark .seeds-chart-bubble .highcharts-data-label,
+.lights-out .seeds-chart-bubble .highcharts-data-label {
+  fill: var(--color-text-body);
+  color: var(--color-text-body);
+}
+
+/* Icon-present data label: v1 parity — the icon renders inline to the left of
+   the name at its native size, exactly as v1's `dataLabelFormatter` does (a
+   plain `<div>` with an inline `<svg>` before the name, relying on the browser
+   default `svg { display: inline }`). Tailwind Preflight — loaded by Storybook
+   and by any Tailwind consumer — resets `svg` to `display: block;
+   vertical-align: middle`, which turns the inline icon into a block and drops
+   the name onto the line below. v1 never hit this (its chart context has no
+   such reset). Restore the browser default so the icon and name sit on one
+   line, matching v1. Scoped to the data label so only the label icon is
+   affected, never the chart's own SVG. */
+.seeds-chart-bubble .highcharts-data-label svg {
+  display: inline;
+  vertical-align: baseline;
+}
+
+/* Clickable cursor for the data label — series/point cursor is already
+   covered by the shared .seeds-chart[data-has-on-click] rule, but labels sit
+   in a separate DOM subtree that rule doesn't reach. */
+.seeds-chart-bubble[data-has-on-click] .highcharts-data-label {
+  cursor: pointer;
+}
+
+/* Plot-background click affordance (v1's onPlotBackgroundClick). */
+.seeds-chart-bubble[data-has-on-plot-background-click] .highcharts-background {
+  cursor: pointer;
+}
+.seeds-chart-bubble[data-has-on-plot-background-click]
+  .highcharts-background:hover {
+  fill: var(--color-button-pill-bg-hover);
+}

package/dist/{chartBase-Cn_5CUJi.d.mts → chartBase-BClSc5EN.d.mts}

@@ -32,6 +32,10 @@ interface ChartTooltipDataRow {
     value: number | null;
     /** Slice percentage — populated by pie/donut tooltips; `undefined` for bar/line-area rows. */
     percent?: number;
+    /** Outer category index — populated by bubble tooltips only; `undefined` elsewhere. */
+    seriesIndex?: number;
+    /** Inner bubble index — populated by bubble tooltips only; `undefined` elsewhere. */
+    pointIndex?: number;
 }
 /** Tooltip render-prop signature for v2 charts. */
 interface ChartTooltipProps {

package/dist/{chartBase-C-l7yYGx.d.ts → chartBase-CycEw2vy.d.ts}

@@ -32,6 +32,10 @@ interface ChartTooltipDataRow {
     value: number | null;
     /** Slice percentage — populated by pie/donut tooltips; `undefined` for bar/line-area rows. */
     percent?: number;
+    /** Outer category index — populated by bubble tooltips only; `undefined` elsewhere. */
+    seriesIndex?: number;
+    /** Inner bubble index — populated by bubble tooltips only; `undefined` elsewhere. */
+    pointIndex?: number;
 }
 /** Tooltip render-prop signature for v2 charts. */
 interface ChartTooltipProps {

package/dist/chartOptions-DHzoGRdG.d.mts

@@ -0,0 +1,24 @@
+import { Options } from 'highcharts';
+
+declare const baseChartOptions: Options;
+declare const TIME_SERIES_CHART_HEIGHT = 275;
+declare const timeSeriesChartOptions: Options;
+declare const lineChartOptions: Options;
+declare const areaChartOptions: Options;
+declare const columnChartOptions: Options;
+/**
+ * The default series limit for VerticalBarChart.
+ * This limit is recommended to maintain chart readability and accessibility.
+ * @see {VerticalBarChart}
+ */
+declare const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
+declare const DONUT_CHART_HALO_SIZE = 10;
+declare const DONUT_CHART_HEIGHT: number;
+declare const DONUT_CHART_WIDTH: number;
+declare const donutChartOptions: Options;
+declare const BUBBLE_CHART_HEIGHT = 600;
+declare const defaultBubbleChartWidth = 600;
+declare const BUBBLE_CHART_DEFAULT_PADDING = 16;
+declare const BUBBLE_CHART_DEFAULT_MAX_SIZE = "100%";
+
+export { BUBBLE_CHART_DEFAULT_MAX_SIZE as B, DONUT_CHART_HALO_SIZE as D, TIME_SERIES_CHART_HEIGHT as T, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT as V, BUBBLE_CHART_DEFAULT_PADDING as a, BUBBLE_CHART_HEIGHT as b, DONUT_CHART_HEIGHT as c, DONUT_CHART_WIDTH as d, areaChartOptions as e, baseChartOptions as f, columnChartOptions as g, defaultBubbleChartWidth as h, donutChartOptions as i, lineChartOptions as l, timeSeriesChartOptions as t };

package/dist/chartOptions-DHzoGRdG.d.ts

@@ -0,0 +1,24 @@
+import { Options } from 'highcharts';
+
+declare const baseChartOptions: Options;
+declare const TIME_SERIES_CHART_HEIGHT = 275;
+declare const timeSeriesChartOptions: Options;
+declare const lineChartOptions: Options;
+declare const areaChartOptions: Options;
+declare const columnChartOptions: Options;
+/**
+ * The default series limit for VerticalBarChart.
+ * This limit is recommended to maintain chart readability and accessibility.
+ * @see {VerticalBarChart}
+ */
+declare const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
+declare const DONUT_CHART_HALO_SIZE = 10;
+declare const DONUT_CHART_HEIGHT: number;
+declare const DONUT_CHART_WIDTH: number;
+declare const donutChartOptions: Options;
+declare const BUBBLE_CHART_HEIGHT = 600;
+declare const defaultBubbleChartWidth = 600;
+declare const BUBBLE_CHART_DEFAULT_PADDING = 16;
+declare const BUBBLE_CHART_DEFAULT_MAX_SIZE = "100%";
+
+export { BUBBLE_CHART_DEFAULT_MAX_SIZE as B, DONUT_CHART_HALO_SIZE as D, TIME_SERIES_CHART_HEIGHT as T, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT as V, BUBBLE_CHART_DEFAULT_PADDING as a, BUBBLE_CHART_HEIGHT as b, DONUT_CHART_HEIGHT as c, DONUT_CHART_WIDTH as d, areaChartOptions as e, baseChartOptions as f, columnChartOptions as g, defaultBubbleChartWidth as h, donutChartOptions as i, lineChartOptions as l, timeSeriesChartOptions as t };

package/dist/charts.css

@@ -581,3 +581,108 @@
 .seeds-sparkline .highcharts-markers {
   display: none;
 }
+
+/**
+ * Seeds BubbleChart family styles.
+ *
+ * The bubble-specific layer on top of the shared `chart-styles.css`
+ * foundation. This file owns only the packedbubble-specific rules — fill
+ * opacity, the faked hover halo (darker fill + thicker stroke; styledMode has
+ * no separate halo layer for packedbubble), data-label typography, and the
+ * plot-background click affordance — scoped under `.seeds-chart-bubble`.
+ * Values are ported verbatim from v1's `bubbleChartStyles`
+ * (styled-components) for pixel-identical parity; v1 still consumes that
+ * styled-components block separately — do not remove it.
+ *
+ * Dark-mode overrides use the same `[data-theme="dark"], .dark, .lights-out`
+ * selectors the DS theme package itself emits (seeds-react-theme/dist/theme-
+ * dark.css) — this file is the first v2 chart family needing a non-color
+ * value (opacity) to differ by theme, so it can't rely solely on a CSS custom
+ * property the DS already emits per-theme the way colors do.
+ *
+ * Consumers import BOTH stylesheets once (the component never self-imports):
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
+ *   import "@sproutsocial/seeds-react-data-viz/bubble.css";
+ */
+
+/* Make the bubble fill partly transparent. */
+.seeds-chart-bubble .highcharts-series {
+  fill-opacity: 0.5;
+}
+[data-theme="dark"] .seeds-chart-bubble .highcharts-series,
+.dark .seeds-chart-bubble .highcharts-series,
+.lights-out .seeds-chart-bubble .highcharts-series {
+  fill-opacity: 0.7;
+}
+
+.seeds-chart-bubble .highcharts-parentNode {
+  fill-opacity: 0.25;
+}
+
+/* Fake the hover halo: a darker, thicker stroke (styledMode has no separate
+   halo layer for packedbubble). */
+.seeds-chart-bubble .highcharts-point {
+  stroke-width: 2;
+}
+.seeds-chart-bubble .highcharts-point:hover {
+  fill-opacity: 0.7;
+  stroke-width: 6;
+  stroke-opacity: 0.5;
+}
+[data-theme="dark"] .seeds-chart-bubble .highcharts-point:hover,
+.dark .seeds-chart-bubble .highcharts-point:hover,
+.lights-out .seeds-chart-bubble .highcharts-point:hover {
+  fill-opacity: 0.9;
+}
+
+/* Data label text — darker for contrast in light, regular body color in dark. */
+.seeds-chart-bubble .highcharts-data-label {
+  fill: var(--color-neutral-1100);
+  color: var(--color-neutral-1100);
+  stroke: none;
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family);
+  font-size: var(--font-size-200);
+  text-align: center;
+  /* Labels live in a separate part of the DOM tree from the points — without
+     this they interfere with point hover styling. */
+  pointer-events: none;
+}
+[data-theme="dark"] .seeds-chart-bubble .highcharts-data-label,
+.dark .seeds-chart-bubble .highcharts-data-label,
+.lights-out .seeds-chart-bubble .highcharts-data-label {
+  fill: var(--color-text-body);
+  color: var(--color-text-body);
+}
+
+/* Icon-present data label: v1 parity — the icon renders inline to the left of
+   the name at its native size, exactly as v1's `dataLabelFormatter` does (a
+   plain `<div>` with an inline `<svg>` before the name, relying on the browser
+   default `svg { display: inline }`). Tailwind Preflight — loaded by Storybook
+   and by any Tailwind consumer — resets `svg` to `display: block;
+   vertical-align: middle`, which turns the inline icon into a block and drops
+   the name onto the line below. v1 never hit this (its chart context has no
+   such reset). Restore the browser default so the icon and name sit on one
+   line, matching v1. Scoped to the data label so only the label icon is
+   affected, never the chart's own SVG. */
+.seeds-chart-bubble .highcharts-data-label svg {
+  display: inline;
+  vertical-align: baseline;
+}
+
+/* Clickable cursor for the data label — series/point cursor is already
+   covered by the shared .seeds-chart[data-has-on-click] rule, but labels sit
+   in a separate DOM subtree that rule doesn't reach. */
+.seeds-chart-bubble[data-has-on-click] .highcharts-data-label {
+  cursor: pointer;
+}
+
+/* Plot-background click affordance (v1's onPlotBackgroundClick). */
+.seeds-chart-bubble[data-has-on-plot-background-click] .highcharts-background {
+  cursor: pointer;
+}
+.seeds-chart-bubble[data-has-on-plot-background-click]
+  .highcharts-background:hover {
+  fill: var(--color-button-pill-bg-hover);
+}

package/dist/{chunk-46L4YBLC.js → chunk-2H2Z7PKZ.js}

@@ -5,21 +5,8 @@ var _seedsreactbox = require('@sproutsocial/seeds-react-box');
 // ../seeds-react-theme-provider/dist/index.mjs
 var _react = require('react');
 
-
-
-
 var _seedsreacttheme = require('@sproutsocial/seeds-react-theme');
 var _jsxruntime = require('react/jsx-runtime');
-var GlobalTokenStyles = _styledcomponents.createGlobalStyle`
-  :root {
-    --color-container-bg-ai-generated: radial-gradient(
-      circle at bottom left,
-      color-mix(in srgb, #205bc3, transparent 80%) 0%,
-      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,
-      color-mix(in srgb, #f282f5, transparent 80%) 100%
-    ), #f3f4f4;
-  }
-`;
 
 // src/components/ColorBox/ColorBox.tsx
 
@@ -541,4 +528,4 @@ var ChartLegendLabelContentWithIcon = _react.memo.call(void 0,
 
 
 exports.ColorBox = ColorBox; exports.ChartLegendLabel = ChartLegendLabel; exports.ChartLegend = ChartLegend; exports.ChartLegendLabelContentWithIcon = ChartLegendLabelContentWithIcon; exports.ChartTooltip = ChartTooltip; exports.ChartTooltipFooter = ChartTooltipFooter; exports.ChartTooltipHeader = ChartTooltipHeader; exports.generateChartTooltipPortalId = generateChartTooltipPortalId; exports.ChartTooltipPortal = ChartTooltipPortal; exports.ChartTable = ChartTable; exports.ChartTooltipTable = ChartTooltipTable; exports.ChartTooltipTitle = ChartTooltipTitle; exports.transformTimeSeriesTooltipData = transformTimeSeriesTooltipData; exports.GlobalChartStyleOverrides = GlobalChartStyleOverrides; exports.baseChartStyles = baseChartStyles; exports.timeSeriesChartStyles = timeSeriesChartStyles; exports.lineChartStyles = lineChartStyles; exports.areaChartStyles = areaChartStyles; exports.donutChartStyles = donutChartStyles;
-//# sourceMappingURL=chunk-46L4YBLC.js.map
+//# sourceMappingURL=chunk-2H2Z7PKZ.js.map