@sproutsocial/seeds-react-data-viz 0.26.1 → 0.27.0

package/dist/{axis-BWvZqdQr.d.ts → axis-DQXvjzBs.d.ts}

@@ -1,4 +1,4 @@
-import { D as DatetimeTimeFormat } from './chartBase-BM97OBBE.js';
+import { D as DatetimeTimeFormat } from './chartBase-BYipK7MZ.js';
 
 /** A datetime data point: `[msSinceEpoch, value]` tuple or `{ x, y }` object. */
 type DatetimePoint = [number, number | null] | {

package/dist/{axis-3XKa6pW7.d.mts → axis-DVx6Mn1k.d.mts}

@@ -1,4 +1,4 @@
-import { D as DatetimeTimeFormat } from './chartBase-D6WI2icR.mjs';
+import { D as DatetimeTimeFormat } from './chartBase-Cd405GIA.mjs';
 
 /** A datetime data point: `[msSinceEpoch, value]` tuple or `{ x, y }` object. */
 type DatetimePoint = [number, number | null] | {

package/dist/bar/index.d.mts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { C as ChartAnnotation } from '../annotations-CjFoRPXf.mjs';
-import { V as ValueFormat, C as ChartTooltipProps } from '../chartBase-D6WI2icR.mjs';
+import { V as ValueFormat, C as ChartTooltipProps } from '../chartBase-Cd405GIA.mjs';
 import { C as ChartColorableEntity, a as ChartIconableEntity, b as ChartClickHandler, c as ChartHoverHandler } from '../interactions-pEXA1XxF.mjs';
 export { d as ChartHoverSeries } from '../interactions-pEXA1XxF.mjs';
 import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
-import { C as ChartDataPoint, a as CategoryAxis, D as DatetimeAxis, b as DatetimePoint } from '../axis-3XKa6pW7.mjs';
+import { C as ChartDataPoint, a as CategoryAxis, D as DatetimeAxis, b as DatetimePoint } from '../axis-DVx6Mn1k.mjs';
 import '@sproutsocial/seeds-react-icon';
 import '../types-DxrhdAdn.mjs';
 import 'highcharts';

package/dist/bar/index.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { C as ChartAnnotation } from '../annotations-CjFoRPXf.js';
-import { V as ValueFormat, C as ChartTooltipProps } from '../chartBase-BM97OBBE.js';
+import { V as ValueFormat, C as ChartTooltipProps } from '../chartBase-BYipK7MZ.js';
 import { C as ChartColorableEntity, a as ChartIconableEntity, b as ChartClickHandler, c as ChartHoverHandler } from '../interactions-pEXA1XxF.js';
 export { d as ChartHoverSeries } from '../interactions-pEXA1XxF.js';
 import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
-import { C as ChartDataPoint, a as CategoryAxis, D as DatetimeAxis, b as DatetimePoint } from '../axis-BWvZqdQr.js';
+import { C as ChartDataPoint, a as CategoryAxis, D as DatetimeAxis, b as DatetimePoint } from '../axis-DQXvjzBs.js';
 import '@sproutsocial/seeds-react-icon';
 import '../types-DxrhdAdn.js';
 import 'highcharts';

package/dist/bar/index.js

@@ -2,11 +2,11 @@
 
 
 
-var _chunkPIZ4MT2Bjs = require('../chunk-PIZ4MT2B.js');
+var _chunkWMKO3RGTjs = require('../chunk-WMKO3RGT.js');
 
 
 
-var _chunkBRIU5SPJjs = require('../chunk-BRIU5SPJ.js');
+var _chunkCV45MD47js = require('../chunk-CV45MD47.js');
 
 
 var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
@@ -14,10 +14,10 @@ var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
 
 
 
-var _chunkNU2RCATKjs = require('../chunk-NU2RCATK.js');
+var _chunk5TWNMPQUjs = require('../chunk-5TWNMPQU.js');
 
 
-var _chunkLWDHU4QKjs = require('../chunk-LWDHU4QK.js');
+var _chunk34OKRQETjs = require('../chunk-34OKRQET.js');
 
 // src/charts/bar/BarChart.tsx
 var _react = require('react');
@@ -30,8 +30,8 @@ function buildBarChartOptions(props, direction, series = props.series) {
   const chartType = highchartsType(direction);
   const isDatetime = props.xAxis.type === "datetime";
   const isMultiSeries = series.length > 1;
-  const tooltipOptions = _chunkBRIU5SPJjs.resolveTooltipOptions.call(void 0, props);
-  const { annotations, lookup: annotationLookup } = _chunkPIZ4MT2Bjs.buildAnnotationConfig.call(void 0, 
+  const tooltipOptions = _chunkCV45MD47js.resolveTooltipOptions.call(void 0, props);
+  const { annotations, lookup: annotationLookup } = _chunkWMKO3RGTjs.buildAnnotationConfig.call(void 0, 
     props.annotations
   );
   const barTypeConfig = {
@@ -91,7 +91,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
       }
     }
   };
-  const base = _chunkNU2RCATKjs.buildBaseChartOptions.call(void 0, {
+  const base = _chunk5TWNMPQUjs.buildBaseChartOptions.call(void 0, {
     type: chartType,
     description: props.description,
     reserveTopMargin: Boolean(annotations),
@@ -106,13 +106,13 @@ function buildBarChartOptions(props, direction, series = props.series) {
       // Re-assert the definite `type` so spreading the optionally-typed
       // `base.chart` doesn't widen the required `type` field to optional.
       type: chartType,
-      height: _nullishCoalesce(props.height, () => ( _chunkLWDHU4QKjs.TIME_SERIES_CHART_HEIGHT)),
+      height: _nullishCoalesce(props.height, () => ( _chunk34OKRQETjs.TIME_SERIES_CHART_HEIGHT)),
       // Tight time-series spacing (from constants/chartOptions.ts) so the plot
       // area fills the 275px container; without it Highcharts' larger default
       // spacing ([10, 10, 15, 10]) shrinks the plot area.
       spacing: [5, 1, 0, 2]
     },
-    xAxis: _chunkBRIU5SPJjs.buildDimensionalAxis.call(void 0, props.xAxis, _nullishCoalesce(tooltipOptions.timezone, () => ( "UTC"))),
+    xAxis: _chunkCV45MD47js.buildDimensionalAxis.call(void 0, props.xAxis, _nullishCoalesce(tooltipOptions.timezone, () => ( "UTC"))),
     yAxis: {
       min: _optionalChain([props, 'access', _15 => _15.yAxis, 'optionalAccess', _16 => _16.min]),
       max: _optionalChain([props, 'access', _17 => _17.yAxis, 'optionalAccess', _18 => _18.max]),
@@ -126,7 +126,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
         enabled: _optionalChain([props, 'access', _23 => _23.yAxis, 'optionalAccess', _24 => _24.showLabels]) !== false,
         // A declarative `format` drives ticks through the shared valueFormatter;
         // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).
-        formatter: _optionalChain([props, 'access', _25 => _25.yAxis, 'optionalAccess', _26 => _26.format]) ? _chunkPIZ4MT2Bjs.makeValueAxisLabelFormatter.call(void 0, props.yAxis.format) : _chunkPIZ4MT2Bjs.defaultValueAxisLabelFormatter
+        formatter: _optionalChain([props, 'access', _25 => _25.yAxis, 'optionalAccess', _26 => _26.format]) ? _chunkWMKO3RGTjs.makeValueAxisLabelFormatter.call(void 0, props.yAxis.format) : _chunkWMKO3RGTjs.defaultValueAxisLabelFormatter
       }
     },
     plotOptions: {
@@ -151,7 +151,7 @@ var BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
 var _jsxruntime = require('react/jsx-runtime');
 var BarChart = _react.memo.call(void 0, function BarChart2(props) {
   const seriesLimit = _nullishCoalesce(props.seriesLimit, () => ( BAR_CHART_DEFAULT_SERIES_LIMIT));
-  const { colors, series } = _chunkNU2RCATKjs.useSeedsChartSetup.call(void 0, {
+  const { colors, series } = _chunk5TWNMPQUjs.useSeedsChartSetup.call(void 0, {
     series: props.series,
     seriesLimit,
     isSeriesLimitOverridden: props.seriesLimit !== void 0,
@@ -171,7 +171,7 @@ var BarChart = _react.memo.call(void 0, function BarChart2(props) {
     className: props.className
   });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...containerProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkNU2RCATKjs.ChartRenderer,
+    _chunk5TWNMPQUjs.ChartRenderer,
     {
       options,
       series,

package/dist/bubble/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, MouseEventHandler } from 'react';
-import { C as ChartTooltipProps, a as ChartTooltipDataRow, V as ValueFormat } from '../chartBase-D6WI2icR.mjs';
+import { C as ChartTooltipProps, a as ChartTooltipDataRow, V as ValueFormat } from '../chartBase-Cd405GIA.mjs';
 import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
 import { C as ChartColorableEntity, a as ChartIconableEntity, c as ChartHoverHandler } from '../interactions-pEXA1XxF.mjs';
 export { h as defaultBubbleChartWidth } from '../chartOptions-D6MzNjbB.mjs';

package/dist/bubble/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, MouseEventHandler } from 'react';
-import { C as ChartTooltipProps, a as ChartTooltipDataRow, V as ValueFormat } from '../chartBase-BM97OBBE.js';
+import { C as ChartTooltipProps, a as ChartTooltipDataRow, V as ValueFormat } from '../chartBase-BYipK7MZ.js';
 import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
 import { C as ChartColorableEntity, a as ChartIconableEntity, c as ChartHoverHandler } from '../interactions-pEXA1XxF.js';
 export { h as defaultBubbleChartWidth } from '../chartOptions-D6MzNjbB.js';

package/dist/bubble/index.js

@@ -5,13 +5,13 @@ var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
 
 
 
-var _chunkNU2RCATKjs = require('../chunk-NU2RCATK.js');
+var _chunk5TWNMPQUjs = require('../chunk-5TWNMPQU.js');
 
 
 
 
 
-var _chunkLWDHU4QKjs = require('../chunk-LWDHU4QK.js');
+var _chunk34OKRQETjs = require('../chunk-34OKRQET.js');
 
 // src/charts/bubble/BubbleChart.tsx
 var _react = require('react');
@@ -106,7 +106,7 @@ function mapBubbleTooltipRow(data) {
 }
 function buildBubbleChartOptions(props) {
   const hasOnClick = Boolean(props.onClick);
-  const base = _chunkNU2RCATKjs.buildBaseChartOptions.call(void 0, {
+  const base = _chunk5TWNMPQUjs.buildBaseChartOptions.call(void 0, {
     type: "packedbubble",
     description: props.accessibility.description,
     svgContainerLabel: props.accessibility.svgContainerLabel,
@@ -121,12 +121,12 @@ function buildBubbleChartOptions(props) {
     chart: {
       ...base.chart,
       type: "packedbubble",
-      height: _nullishCoalesce(props.height, () => ( _chunkLWDHU4QKjs.BUBBLE_CHART_HEIGHT))
+      height: _nullishCoalesce(props.height, () => ( _chunk34OKRQETjs.BUBBLE_CHART_HEIGHT))
     },
     plotOptions: {
       packedbubble: {
         minSize: "30%",
-        maxSize: _nullishCoalesce(props.maxBubbleSize, () => ( _chunkLWDHU4QKjs.BUBBLE_CHART_DEFAULT_MAX_SIZE)),
+        maxSize: _nullishCoalesce(props.maxBubbleSize, () => ( _chunk34OKRQETjs.BUBBLE_CHART_DEFAULT_MAX_SIZE)),
         draggable: false,
         states: { hover: { enabled: false } },
         layoutAlgorithm: {
@@ -134,7 +134,7 @@ function buildBubbleChartOptions(props) {
           seriesInteraction: true,
           parentNodeLimit: true,
           enableSimulation: false,
-          bubblePadding: _nullishCoalesce(props.bubblePadding, () => ( _chunkLWDHU4QKjs.BUBBLE_CHART_DEFAULT_PADDING)),
+          bubblePadding: _nullishCoalesce(props.bubblePadding, () => ( _chunk34OKRQETjs.BUBBLE_CHART_DEFAULT_PADDING)),
           splitSeries: _nullishCoalesce(props.splitSeries, () => ( false))
         },
         dataLabels: {
@@ -181,7 +181,7 @@ function buildBubbleChartOptions(props) {
 // src/charts/bubble/BubbleChart.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
-  const { colors } = _chunkNU2RCATKjs.useSeedsChartSetup.call(void 0, {
+  const { colors } = _chunk5TWNMPQUjs.useSeedsChartSetup.call(void 0, {
     series: props.data.map((d) => ({ color: d.color }))
   });
   const options = _react.useMemo.call(void 0, () => buildBubbleChartOptions(props), [props]);
@@ -205,7 +205,7 @@ var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
       ...hasOnPlotBackgroundClick ? { "data-has-on-plot-background-click": "" } : {},
       onClick: props.onPlotBackgroundClick,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkNU2RCATKjs.ChartRenderer,
+        _chunk5TWNMPQUjs.ChartRenderer,
         {
           options,
           series: props.data.map((d, i) => ({
@@ -230,5 +230,5 @@ var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
 
 
 
-exports.BubbleChart = BubbleChart; exports.defaultBubbleChartWidth = _chunkLWDHU4QKjs.defaultBubbleChartWidth;
+exports.BubbleChart = BubbleChart; exports.defaultBubbleChartWidth = _chunk34OKRQETjs.defaultBubbleChartWidth;
 //# sourceMappingURL=index.js.map

package/dist/chart-styles.css

@@ -248,6 +248,47 @@
   gap: var(--space-200); /* 4px */
 }
 
+/* =========================================================================
+ * ChartTooltip primitive -> .seeds-chart-tooltip{,-header,-footer}
+ *
+ * Portaled into the Highcharts tooltip container, so these are global (not
+ * scoped under .seeds-chart), matching the highcharts-tooltip overrides above.
+ * The header/footer bleed to the container edges with negative margins that
+ * cancel the .seeds-chart-tooltip padding, so their dividers span the full
+ * width. The .Icon/.logo rule stops icon/logo glyphs inheriting a stroke.
+ * ========================================================================= */
+
+.seeds-chart-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-350); /* 12px */
+  min-width: 285px;
+  padding: var(--space-400); /* 16px */
+  background-color: var(--color-container-bg-base);
+  border: 1px solid var(--color-container-border-base);
+  border-radius: var(--radius-500); /* 6px */
+  box-shadow: var(--shadow-medium);
+}
+
+.seeds-chart-tooltip .Icon,
+.seeds-chart-tooltip .logo {
+  stroke: none;
+}
+
+/* top edge: bleed left/right + up past the container padding, divider below */
+.seeds-chart-tooltip-header {
+  margin: calc(-1 * var(--space-200)) calc(-1 * var(--space-400)) 0;
+  padding: 0 var(--space-400) var(--space-350);
+  border-bottom: 1px solid var(--color-container-border-base);
+}
+
+/* bottom edge: bleed left/right + down past the container padding, divider above */
+.seeds-chart-tooltip-footer {
+  margin: 0 calc(-1 * var(--space-400)) calc(-1 * var(--space-200));
+  padding: var(--space-350) var(--space-400) 0;
+  border-top: 1px solid var(--color-container-border-base);
+}
+
 /* =========================================================================
  * shared cross-family time-series layer -> .seeds-chart-time-series
  *

package/dist/{chartBase-BM97OBBE.d.ts → chartBase-BYipK7MZ.d.ts}

@@ -48,7 +48,11 @@ interface ChartTooltipDataRow {
     value: number | null;
     /** Seeds icon or partner-logo name shown before the row name; `undefined` when the row has none. */
     icon?: TypeIconName;
-    /** Slice percentage — populated by pie/donut tooltips; `undefined` for bar/line-area rows. */
+    /**
+     * Percentage of the whole — populated by pie/donut tooltips (slice percent)
+     * and by percent-stacked multi-series bar/line-area tooltips (per-series
+     * percent-of-stack at the hovered x); `undefined` for all other rows.
+     */
     percent?: number;
     /** Outer category index — populated by bubble tooltips only; `undefined` elsewhere. */
     seriesIndex?: number;

package/dist/{chartBase-D6WI2icR.d.mts → chartBase-Cd405GIA.d.mts}

@@ -48,7 +48,11 @@ interface ChartTooltipDataRow {
     value: number | null;
     /** Seeds icon or partner-logo name shown before the row name; `undefined` when the row has none. */
     icon?: TypeIconName;
-    /** Slice percentage — populated by pie/donut tooltips; `undefined` for bar/line-area rows. */
+    /**
+     * Percentage of the whole — populated by pie/donut tooltips (slice percent)
+     * and by percent-stacked multi-series bar/line-area tooltips (per-series
+     * percent-of-stack at the hovered x); `undefined` for all other rows.
+     */
     percent?: number;
     /** Outer category index — populated by bubble tooltips only; `undefined` elsewhere. */
     seriesIndex?: number;

package/dist/charts.css

@@ -260,6 +260,47 @@
   gap: var(--space-200); /* 4px */
 }
 
+/* =========================================================================
+ * ChartTooltip primitive -> .seeds-chart-tooltip{,-header,-footer}
+ *
+ * Portaled into the Highcharts tooltip container, so these are global (not
+ * scoped under .seeds-chart), matching the highcharts-tooltip overrides above.
+ * The header/footer bleed to the container edges with negative margins that
+ * cancel the .seeds-chart-tooltip padding, so their dividers span the full
+ * width. The .Icon/.logo rule stops icon/logo glyphs inheriting a stroke.
+ * ========================================================================= */
+
+.seeds-chart-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-350); /* 12px */
+  min-width: 285px;
+  padding: var(--space-400); /* 16px */
+  background-color: var(--color-container-bg-base);
+  border: 1px solid var(--color-container-border-base);
+  border-radius: var(--radius-500); /* 6px */
+  box-shadow: var(--shadow-medium);
+}
+
+.seeds-chart-tooltip .Icon,
+.seeds-chart-tooltip .logo {
+  stroke: none;
+}
+
+/* top edge: bleed left/right + up past the container padding, divider below */
+.seeds-chart-tooltip-header {
+  margin: calc(-1 * var(--space-200)) calc(-1 * var(--space-400)) 0;
+  padding: 0 var(--space-400) var(--space-350);
+  border-bottom: 1px solid var(--color-container-border-base);
+}
+
+/* bottom edge: bleed left/right + down past the container padding, divider above */
+.seeds-chart-tooltip-footer {
+  margin: 0 calc(-1 * var(--space-400)) calc(-1 * var(--space-200));
+  padding: var(--space-350) var(--space-400) 0;
+  border-top: 1px solid var(--color-container-border-base);
+}
+
 /* =========================================================================
  * shared cross-family time-series layer -> .seeds-chart-time-series
  *

package/dist/{chunk-LWDHU4QK.js → chunk-34OKRQET.js}

@@ -100,71 +100,27 @@ var ChartLegend = _react.memo.call(void 0, function ChartLegend2({
 // src/components/ChartTooltip/ChartTooltip.tsx
 
 
-
-
-var StyledBox2 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  .Icon,
-  .logo {
-    stroke: none;
-  }
-`;
 var ChartTooltip = _react.memo.call(void 0, function ChartTooltip2({
   children
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    StyledBox2,
-    {
-      bg: "container.background.base",
-      boxShadow: "medium",
-      border: 500,
-      borderColor: "container.border.base",
-      borderRadius: 500,
-      p: 400,
-      minWidth: 285,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { display: "flex", flexDirection: "column", gap: 350, children })
-    }
-  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "seeds-chart-tooltip", children });
 });
 
 // src/components/ChartTooltip/components/ChartTooltipFooter.tsx
 
 
-
 var ChartTooltipFooter = _react.memo.call(void 0, 
   function ChartTooltipFooter2({ children }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _seedsreactbox.Box,
-      {
-        borderTop: 500,
-        borderColor: "container.border.base",
-        mx: -400,
-        mb: -200,
-        px: 400,
-        pt: 350,
-        children
-      }
-    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "seeds-chart-tooltip-footer", children });
   }
 );
 
 // src/components/ChartTooltip/components/ChartTooltipHeader.tsx
 
 
-
 var ChartTooltipHeader = _react.memo.call(void 0, 
   function ChartTooltipHeader2({ children }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _seedsreactbox.Box,
-      {
-        borderBottom: 500,
-        borderColor: "container.border.base",
-        mx: -400,
-        mt: -200,
-        px: 400,
-        pb: 350,
-        children
-      }
-    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "seeds-chart-tooltip-header", children });
   }
 );
 
@@ -254,7 +210,7 @@ var ChartTable = _react.memo.call(void 0, function ChartTable2({
       {
         $isAppendedRow: isAppendedRow,
         children: cells.map(
-          ({ content, align = "left", colSpan = 1 }, cellIndex) => {
+          ({ content, align = "left", colSpan = 1, pl, pr, style }, cellIndex) => {
             const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _seedsreacttable.Table.Cell,
@@ -264,6 +220,9 @@ var ChartTable = _react.memo.call(void 0, function ChartTable2({
                 align,
                 colSpan,
                 py: 200,
+                pl,
+                pr,
+                style,
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text.SmallBodyCopy, { as: "div", children: content })
               },
               uniqueIdentifier
@@ -687,4 +646,4 @@ var donutChartStyles = _styledcomponents.css`
 
 
 exports.ColorBox = ColorBox; exports.ChartLegendLabel = ChartLegendLabel; exports.ChartLegend = ChartLegend; 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.baseChartOptions = baseChartOptions; exports.TIME_SERIES_CHART_HEIGHT = TIME_SERIES_CHART_HEIGHT; exports.timeSeriesChartOptions = timeSeriesChartOptions; exports.lineChartOptions = lineChartOptions; exports.areaChartOptions = areaChartOptions; exports.columnChartOptions = columnChartOptions; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.DONUT_CHART_HALO_SIZE = DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = DONUT_CHART_WIDTH; exports.donutChartOptions = donutChartOptions; exports.BUBBLE_CHART_HEIGHT = BUBBLE_CHART_HEIGHT; exports.defaultBubbleChartWidth = defaultBubbleChartWidth; exports.BUBBLE_CHART_DEFAULT_PADDING = BUBBLE_CHART_DEFAULT_PADDING; exports.BUBBLE_CHART_DEFAULT_MAX_SIZE = BUBBLE_CHART_DEFAULT_MAX_SIZE; exports.WORD_CLOUD_CHART_HEIGHT = WORD_CLOUD_CHART_HEIGHT; exports.GlobalChartStyleOverrides = GlobalChartStyleOverrides; exports.baseChartStyles = baseChartStyles; exports.timeSeriesChartStyles = timeSeriesChartStyles; exports.lineChartStyles = lineChartStyles; exports.areaChartStyles = areaChartStyles; exports.donutChartStyles = donutChartStyles;
-//# sourceMappingURL=chunk-LWDHU4QK.js.map
+//# sourceMappingURL=chunk-34OKRQET.js.map

package/dist/chunk-34OKRQET.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-34OKRQET.js","../src/components/ColorBox/ColorBox.tsx","../../seeds-react-theme-provider/src/index.tsx","../src/components/ChartLegend/components/ChartLegendLabel.tsx","../src/components/ChartLegend/ChartLegend.tsx","../src/components/ChartTooltip/ChartTooltip.tsx","../src/components/ChartTooltip/components/ChartTooltipFooter.tsx","../src/components/ChartTooltip/components/ChartTooltipHeader.tsx","../src/components/ChartTooltip/components/ChartTooltipPortal.tsx","../src/components/ChartTable/ChartTable.tsx","../src/components/ChartTooltip/components/ChartTooltipTable.tsx","../src/components/ChartTooltip/components/ChartTooltipTitle.tsx","../src/helpers/transformTimeSeriesTooltipData.ts","../src/constants/chartOptions.ts","../src/styles/chartStyles.ts"],"names":["jsx","props","theme","ChartLegendLabel","memo","ChartLegend","Box"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-34OKRQET.js","sourcesContent":[null,"import { css, type CSSProp } from \"styled-components\";\nimport { Box, type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport ThemeProvider from \"@sproutsocial/seeds-react-theme-provider\";\nimport { type TypeSproutTheme } from \"@sproutsocial/seeds-react-theme\";\n\nexport type TypeColorBoxProps = TypeBoxProps;\n\n/**\n * ColorBox extends Box to apply basic styles.\n */\nexport const ColorBox = ({\n  display = \"inline-block\",\n  height = \"16px\",\n  width = \"16px\",\n  minWidth = width,\n  borderRadius = \"400\",\n  ...props\n}: TypeColorBoxProps) => {\n  return (\n    <Box\n      {...props}\n      display={display}\n      height={height}\n      width={width}\n      minWidth={minWidth}\n      borderRadius={borderRadius}\n      css={\n        css`\n          cursor: ${(\n            props: typeof ThemeProvider & {\n              onClick: ((e: React.MouseEvent<HTMLElement>) => void) | void;\n            }\n          ) => (props?.onClick ? \"pointer\" : \"default\")};\n        ` as CSSProp<TypeSproutTheme>\n      }\n    />\n  );\n};\n","import * as React from \"react\";\nimport { ThemeProvider as BaseThemeProvider } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport type {\n  TypeSproutTheme,\n  TypeTheme,\n} from \"@sproutsocial/seeds-react-theme\";\n\n// We can append additional themes types here\ntype TypeAllThemes = TypeTheme | TypeSproutTheme;\n\ntype TypeProps = {\n  readonly theme?: TypeAllThemes;\n  readonly children?: React.ReactNode;\n};\n\nconst ThemeProvider = (props: TypeProps) => (\n  <BaseThemeProvider {...props} theme={props.theme || theme}>\n    {props.children}\n  </BaseThemeProvider>\n);\n\nexport default ThemeProvider;\n","import styled from \"styled-components\";\nimport { memo } from \"react\";\nimport { Box, type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\nimport type { TypeLegendLabel } from \"../ChartLegend\";\n\nimport { ColorBox } from \"../../ColorBox\";\n\nconst StyledBox = styled(Box)<TypeBoxProps>`\n  list-style: none;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space[300]};\n`;\n\nexport type TypeChartLegendLabelProps = Readonly<{\n  children: TypeLegendLabel[\"content\"];\n  color: TypeLegendLabel[\"color\"];\n  // optional\n  containerBoxProps?: TypeBoxProps;\n}>;\n\nexport const ChartLegendLabel = memo<TypeChartLegendLabelProps>(\n  function ChartLegendLabel({\n    children,\n    color = \"#CCC\",\n    containerBoxProps = {},\n  }: TypeChartLegendLabelProps) {\n    return (\n      <StyledBox {...containerBoxProps}>\n        <ColorBox bg={color} />\n        <Text as=\"div\" fontSize={200} color=\"text.subtext\">\n          {children}\n        </Text>\n      </StyledBox>\n    );\n  }\n);\n","import { memo } from \"react\";\nimport { Box, type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport { ChartLegendLabel } from \"./components/ChartLegendLabel\";\n\nexport type TypeLegendLabel = Readonly<{\n  content: React.ReactNode;\n  color?: string;\n}>;\n\nexport type TypeChartLegendProps = Readonly<{\n  legendLabels: ReadonlyArray<TypeLegendLabel>;\n  // optional\n  containerBoxProps?: TypeBoxProps;\n  stacked?: boolean;\n}>;\n\nexport const ChartLegend = memo<TypeChartLegendProps>(function ChartLegend({\n  legendLabels,\n  containerBoxProps = {},\n  stacked = false,\n}: TypeChartLegendProps) {\n  return (\n    <Box\n      as=\"ul\"\n      aria-hidden=\"true\"\n      display=\"flex\"\n      justifyContent=\"center\"\n      flexDirection={stacked ? \"column\" : \"row\"}\n      flexWrap=\"wrap\"\n      columnGap={450}\n      rowGap={200}\n      m={0}\n      p={0}\n      {...containerBoxProps}\n    >\n      {legendLabels.map(({ color, content }, index) => (\n        <ChartLegendLabel\n          key={`chart-legend-label-${index}`}\n          color={color || theme.colors.DATAVIZ_COLORS_LIST[index]}\n          containerBoxProps={{ as: \"li\" }}\n        >\n          {content}\n        </ChartLegendLabel>\n      ))}\n    </Box>\n  );\n});\n","import { memo } from \"react\";\n\n// Chart Tooltip\ntype TypeChartTooltipProps = Readonly<{\n  children: React.ReactNode;\n}>;\n\n// Consumes the .seeds-chart-tooltip class from chart-styles.css (the shared\n// foundation every v2 chart already imports): the padded/bordered/shadowed\n// container plus the flex-column gap between rows.\nexport const ChartTooltip = memo<TypeChartTooltipProps>(function ChartTooltip({\n  children,\n}: TypeChartTooltipProps) {\n  return <div className=\"seeds-chart-tooltip\">{children}</div>;\n});\n","import { memo } from \"react\";\n\ntype TypeChartTooltipFooterProps = {\n  children: React.ReactNode;\n};\n\nexport const ChartTooltipFooter = memo<TypeChartTooltipFooterProps>(\n  function ChartTooltipFooter({ children }: TypeChartTooltipFooterProps) {\n    return <div className=\"seeds-chart-tooltip-footer\">{children}</div>;\n  }\n);\n","import { memo } from \"react\";\n\ntype TypeChartTooltipHeaderProps = {\n  children: React.ReactNode;\n};\n\nexport const ChartTooltipHeader = memo<TypeChartTooltipHeaderProps>(\n  function ChartTooltipHeader({ children }: TypeChartTooltipHeaderProps) {\n    return <div className=\"seeds-chart-tooltip-header\">{children}</div>;\n  }\n);\n","import { memo, useState, useRef, useEffect, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  Tooltip,\n  Chart,\n  TooltipFormatterContextObject,\n  TooltipFormatterCallbackFunction,\n} from \"highcharts\";\n\ninterface ExtendedHighchartsTooltip extends Tooltip {\n  label: {\n    box: { attr({ height, width }: { height: number; width: number }): void };\n    text: { element: HTMLElement };\n  };\n}\n\nexport const generateChartTooltipPortalId = (chartId: number) =>\n  `highcharts-custom-tooltip-${chartId}`;\n\ntype ChartTooltipPortalProps = Readonly<{\n  chart: Chart;\n  renderContent: (_context: TooltipFormatterContextObject) => ReactNode;\n}>;\n\nexport const ChartTooltipPortal = memo<ChartTooltipPortalProps>(\n  function ChartTooltipPortal({\n    chart,\n    renderContent,\n  }: ChartTooltipPortalProps) {\n    const isInitialized = useRef<boolean>(false);\n    const [node, setNode] = useState<HTMLElement | null>(null);\n    const [context, setContext] =\n      useState<TooltipFormatterContextObject | null>(null);\n\n    useEffect(() => {\n      const formatter: TooltipFormatterCallbackFunction = function () {\n        // Ensures that tooltip DOM container is rendered before React portal is created.\n        if (!isInitialized.current) {\n          isInitialized.current = true;\n          chart.tooltip.refresh.apply(chart.tooltip, [this.point]);\n          chart.tooltip.hide(0);\n        }\n\n        setContext(this);\n\n        return `<div id=\"${generateChartTooltipPortalId(\n          chart.index\n        )}\" role='tooltip'></div>`;\n      };\n\n      chart.update({ tooltip: { formatter } });\n    }, [chart]);\n\n    useEffect(() => {\n      // In some cases tooltip is not available on the chart yet\n      if (context?.series?.chart?.tooltip) {\n        const tooltip = context.series.chart\n          .tooltip as ExtendedHighchartsTooltip;\n        const textElement = tooltip.label.text.element;\n\n        tooltip.label.box.attr({\n          height: textElement.offsetHeight,\n          width: textElement.offsetWidth,\n        });\n\n        setNode(\n          document.getElementById(generateChartTooltipPortalId(chart.index))\n        );\n      }\n    }, [context, chart.index]);\n\n    return node && context ? createPortal(renderContent(context), node) : null;\n  }\n);\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Table as SeedsTable } from \"@sproutsocial/seeds-react-table\";\n\nconst StyledSeedsTable = styled<typeof SeedsTable>(SeedsTable)`\n  tbody tr:last-child {\n    border-bottom: none;\n  }\n  tr:last-child td,\n  tr:last-child th {\n    padding-bottom: 0;\n  }\n  tr:first-child td,\n  tr:first-child th {\n    padding-top: 0;\n  }\n  tr th {\n    padding-left: 0;\n  }\n  tr td:last-child {\n    padding-right: 0;\n  }\n`;\n\nconst StyledSeedsTableRow = styled(SeedsTable.TableRow)<{\n  $isAppendedRow?: boolean;\n}>`\n  ${({ $isAppendedRow, theme }) =>\n    $isAppendedRow\n      ? `border-top: 2px solid ${theme.colors.container.border.base}`\n      : \"\"}\n`;\n\nexport type TypeChartTableProps = Readonly<{\n  rows: ReadonlyArray<{\n    cells: ReadonlyArray<{\n      content: React.ReactNode;\n      align?: React.ComponentProps<typeof SeedsTable.Cell>[\"align\"];\n      colSpan?: React.ComponentProps<typeof SeedsTable.Cell>[\"colSpan\"];\n      pl?: React.ComponentProps<typeof SeedsTable.Cell>[\"pl\"];\n      pr?: React.ComponentProps<typeof SeedsTable.Cell>[\"pr\"];\n      style?: React.ComponentProps<typeof SeedsTable.Cell>[\"style\"];\n    }>;\n    isAppendedRow?: boolean;\n  }>;\n}>;\n\nexport const ChartTable = memo<TypeChartTableProps>(function ChartTable({\n  rows,\n}: TypeChartTableProps) {\n  if (!rows || rows.length === 0) {\n    return null;\n  }\n\n  return (\n    <StyledSeedsTable>\n      <SeedsTable.TableBody>\n        {rows.map(({ cells, isAppendedRow }, rowIndex) => {\n          if (!cells || cells.length === 0) {\n            return null;\n          }\n\n          return (\n            <StyledSeedsTableRow\n              key={`chart-tooltip-table-row-${rowIndex}`}\n              $isAppendedRow={isAppendedRow}\n            >\n              {cells.map(\n                (\n                  { content, align = \"left\", colSpan = 1, pl, pr, style },\n                  cellIndex\n                ) => {\n                  const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;\n                  return (\n                    <SeedsTable.Cell\n                      key={uniqueIdentifier}\n                      id={uniqueIdentifier}\n                      scope={cellIndex === 0 ? \"row\" : undefined}\n                      align={align}\n                      colSpan={colSpan}\n                      py={200}\n                      pl={pl}\n                      pr={pr}\n                      style={style}\n                    >\n                      <Text.SmallBodyCopy as=\"div\">\n                        {content}\n                      </Text.SmallBodyCopy>\n                    </SeedsTable.Cell>\n                  );\n                }\n              )}\n            </StyledSeedsTableRow>\n          );\n        })}\n      </SeedsTable.TableBody>\n    </StyledSeedsTable>\n  );\n});\n","import { memo } from \"react\";\n\nimport { ChartTable, type TypeChartTableProps } from \"../../ChartTable\";\n\nexport type TypeChartTooltipTableProps = {\n  rows: TypeChartTableProps[\"rows\"];\n};\n\nexport const ChartTooltipTable = memo<TypeChartTooltipTableProps>(\n  function ChartTooltipTable({ rows }: TypeChartTooltipTableProps) {\n    return <ChartTable rows={rows} />;\n  }\n);\n","import { memo } from \"react\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\ntype TypeChartTooltipTitleProps = {\n  children: React.ReactNode;\n};\n\nexport const ChartTooltipTitle = memo<TypeChartTooltipTitleProps>(\n  function ChartTooltipTitle({ children }: TypeChartTooltipTitleProps) {\n    return <Text.SmallSubHeadline as=\"p\">{children}</Text.SmallSubHeadline>;\n  }\n);\n","import type { TooltipFormatterContextObject } from \"highcharts\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeAreaChartProps } from \"../components/AreaChart\";\nimport type { TypeLineChartProps } from \"../components/LineChart\";\nimport type { TypeChartTooltipProps } from \"../types\";\n\ntype TypeTransformTimeSeriesTooltipDataProps = Readonly<{\n  context: TooltipFormatterContextObject;\n  data: TypeAreaChartProps[\"data\"] | TypeLineChartProps[\"data\"];\n}>;\ntype TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps[\"data\"];\n\nexport const transformTimeSeriesTooltipData = ({\n  context,\n  data,\n}: TypeTransformTimeSeriesTooltipDataProps): TypeTransformTimeSeriesTooltipDataReturn => {\n  // @ts-expect-error - Highcharts tooltip context series typing does not expose chart.series here\n  return (context.series.chart.series || []).map((series, index) => {\n    const pointIndex = context.point.index;\n    const y = series?.points?.[pointIndex]?.y;\n\n    return {\n      color:\n        data[index]?.styles?.color || theme.colors.DATAVIZ_COLORS_LIST[index],\n      ...(data[index]?.icon ? { icon: data[index]?.icon } : {}),\n      name: series.name,\n      value: typeof y === \"number\" ? y : null,\n    };\n  });\n};\n","import type { Options } from \"highcharts\";\nimport _ from \"lodash\";\n\n// options that should apply to all charts\n// this is being exported because it's needed for the listening bubble chart component.\n// when that components gets moved into the data-viz package, we can remove the export here\nexport const baseChartOptions: Options = {\n  chart: {\n    animation: false,\n    styledMode: true,\n  },\n  credits: {\n    enabled: false,\n  },\n  exporting: {\n    enabled: false,\n    fallbackToExportServer: false,\n  },\n  legend: {\n    enabled: false,\n  },\n  title: {\n    text: undefined,\n  },\n  tooltip: {\n    hideDelay: 0,\n    outside: true,\n    padding: 0,\n    shape: \"rect\",\n    shared: true,\n    useHTML: true,\n  },\n};\n\n// options that should apply to time series charts\nexport const TIME_SERIES_CHART_HEIGHT = 275;\nexport const timeSeriesChartOptions: Options = _.merge({}, baseChartOptions, {\n  annotations: [\n    {\n      draggable: \"\",\n      labelOptions: {\n        useHTML: true,\n        padding: 0, // removes \"left\" property padding created by highcharts so that label is centered\n      },\n    },\n  ],\n  chart: {\n    // events.click is set at the component level because of the optional onClick prop\n    height: TIME_SERIES_CHART_HEIGHT,\n    spacing: [5, 1, 0, 2],\n  },\n  plotOptions: {\n    series: {\n      animation: false,\n      clip: false,\n      marker: {\n        enabled: false,\n        states: {\n          hover: {\n            enabled: false,\n          },\n        },\n      },\n    },\n  },\n  xAxis: {\n    crosshair: {\n      zIndex: 3,\n    },\n    minPadding: 0, // must be handled dynamically instead of css\n    maxPadding: 0, // must be handled dynamically instead of css\n    type: \"datetime\",\n    labels: {\n      useHTML: true,\n      // formatter is set at the component level because of the required text locale prop\n    },\n  },\n  yAxis: {\n    labels: {\n      useHTML: true,\n      // formatter is set at the component level because of the optional yAxisLabelFormatter prop\n    },\n    softMax: 0,\n    softMin: 0,\n    title: {\n      text: undefined,\n    },\n    plotLines: [\n      /* Adds a custom plotLine at y=0 to represent the chart baseline.\n        This approach allows full control over the line's appearance (e.g., color, z-index),\n        unlike relying on the default xAxis line, which always renders at the bottom of the chart\n        even when y=0 appears elsewhere (e.g., with negative values).\n      */\n      {\n        className: \"y-axis-zero-line\",\n        value: 0,\n        zIndex: 3, // ensures the line appears over the default y=0 line, which we can't seleect as specifically\n      },\n    ],\n  },\n});\n\n// options that should apply to LineChart\nexport const lineChartOptions: Options = _.merge({}, timeSeriesChartOptions, {\n  // plotOptions.spline.events.click is set at the component level because of the optional onClick prop\n});\n\n// options that should apply to AreaChart\nexport const areaChartOptions: Options = _.merge({}, timeSeriesChartOptions, {\n  plotOptions: {\n    areaspline: {\n      // events.click is set at the component level because of the optional onClick prop\n      stacking: \"normal\",\n    },\n  },\n});\n\nexport const columnChartOptions: Options = _.merge({}, timeSeriesChartOptions, {\n  plotOptions: {\n    column: {\n      stacking: \"normal\",\n      pointPadding: 0.25,\n      groupPadding: 0.25,\n      borderRadius: 4,\n    },\n  },\n  xAxis: {\n    crosshair: false,\n  },\n  yAxis: {\n    plotLines: [\n      {\n        // For stacked column charts with visible borders (e.g., white for contrast),\n        // we raise the zIndex of the y=0 plotLine to ensure it remains visible\n        // and isn't visually covered by overlapping column borders.\n        zIndex: 5,\n      },\n    ],\n  },\n});\n\n/**\n * The default series limit for VerticalBarChart.\n * This limit is recommended to maintain chart readability and accessibility.\n * @see {VerticalBarChart}\n */\nexport const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;\n\n// options that should apply to DonutChart\nexport const DONUT_CHART_HALO_SIZE = 10; // 10 is the default from highcharts\nexport const DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;\nexport const DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;\nexport const donutChartOptions: Options = _.merge({}, baseChartOptions, {\n  chart: {\n    height: DONUT_CHART_HEIGHT,\n    spacing: [0, 0, 0, 0],\n  },\n  plotOptions: {\n    pie: {\n      animation: false,\n      borderRadius: 0, // must be handled here instead of css because of path rendering\n      dataLabels: {\n        enabled: false,\n      },\n      innerSize: \"50%\",\n    },\n  },\n});\n\n// options that should apply to BubbleChart (v2 packedbubble)\nexport const BUBBLE_CHART_HEIGHT = 600;\n// Preserved verbatim from v1 (consumed by web-app-core's `Overlays.tsx` as a\n// Box width) — re-exported from `/bubble` for the future consumer-migration\n// ticket. Not wired into the v2 chart's own options: packedbubble is\n// fluid-width like every other v2 family, matching the container's own\n// responsive sizing rather than v1's fixed `chart.width`.\nexport const defaultBubbleChartWidth = 600;\nexport const BUBBLE_CHART_DEFAULT_PADDING = 16;\nexport const BUBBLE_CHART_DEFAULT_MAX_SIZE = \"100%\";\n\n// options that should apply to WordCloud\n/** Also sets the cloud's aspect ratio — a wider/shorter box biases the silhouette wide, a narrower/taller one biases it tall. */\nexport const WORD_CLOUD_CHART_HEIGHT = 400;\n","import { css, createGlobalStyle } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport {\n  type TypeChartStyleColor,\n  type TypeChartStyleHasOnClick,\n  type TypeChartStylePattern,\n} from \"../types\";\nimport \"highcharts/css/highcharts.css\";\n\nexport const GlobalChartStyleOverrides = createGlobalStyle`\n  // USAGE NOTE:\n  // Put general styles in baseChartStyles instead when possible to avoid excessive global styling.\n  // This global component is only for styles that can't override highcharts defaults when scoped.\n\n  .highcharts-tooltip-container {\n    z-index: 7 !important;\n  }\n  .highcharts-tooltip-box {\n    fill: transparent !important;\n  }\n`;\n\n// options that should apply to all charts\nexport const baseChartStyles = css<\n  Readonly<{ $colors: ReadonlyArray<TypeChartStyleColor> }>\n>`\n  --highcharts-background-color: ${({ theme }) =>\n    theme.colors.container.background.base};\n\n  // set color variables and map to each series\n  ${({ $colors }) =>\n    $colors\n      .map((color, index) => {\n        const chartColor = color || theme.colors.DATAVIZ_COLORS_LIST[index];\n        return `\n\t\t\t\t// map colors to custom assigned colors or fallback to default data viz color rotation\n\t\t\t\t--highcharts-color-${index}: ${chartColor};\n\n\t\t\t\t// highcharts already accounts for 10 series, but if we have more, we need to add them\n\t\t\t\t.highcharts-color-${index} {\n\t\t\t\t\tcolor: var(--highcharts-color-${index});\n\t\t\t\t\tstroke: var(--highcharts-color-${index});\n\t\t\t\t\tfill: var(--highcharts-color-${index});\n\t\t\t\t}`;\n      })\n      .join(\"\\n\")}\n\n  // set overall chart background color\n  .highcharts-background {\n    fill: ${({ theme }) => theme.colors.container.background.base};\n  }\n\n  g.highcharts-annotation-label {\n    display: none;\n  }\n\n  div.highcharts-annotation-label {\n    top: 0 !important;\n    transform: translateX(-50%); // centers the label on the targeted axis point\n    pointer-events: none; // prevents tooltip hover from being interrupted by this element since it renders after on the dom\n  }\n`;\n\n// options that should apply to time series charts\nexport const timeSeriesChartStyles = css<\n  Readonly<{\n    $colors: ReadonlyArray<TypeChartStyleColor>;\n    $hasOnClick: TypeChartStyleHasOnClick;\n  }>\n>`\n  ${baseChartStyles}\n\n  // vertical crosshair styles\n\t.highcharts-crosshair {\n    stroke: ${({ theme }) => theme.colors.container.border.decorative.neutral};\n    stroke-width: 1;\n  }\n\n  // axis and gridline styles\n  .highcharts-grid-line {\n    stroke: ${({ theme }) => theme.colors.container.border.base};\n  }\n\n  .highcharts-axis-line {\n    stroke: ${({ theme }) => theme.colors.container.border.base};\n  }\n\n  .highcharts-tick {\n    stroke: none;\n  }\n  .highcharts-xaxis-labels,\n  .highcharts-yaxis-labels {\n    // v1 HTML labels (useHTML: true). v2 SVG label styles live in\n    // charts/shared/styles.ts (axisLabelV2Styles) — don't add v2 rules here.\n    > span {\n      font-family: ${({ theme }) => theme.fontFamily};\n      ${({ theme }) => theme.typography[100]};\n      font-weight: ${({ theme }) => theme.fontWeights.normal};\n      color: ${({ theme }) => theme.colors.text.subtext};\n    }\n  }\n  .highcharts-xaxis-labels {\n    // v1 HTML stacked labels (useHTML: true). v2 SVG stacked-label styles live\n    // in charts/shared/styles.ts (axisLabelV2Styles).\n    > span {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      > span:nth-of-type(2) {\n        font-weight: ${({ theme }) => theme.fontWeights.semibold};\n      }\n    }\n  }\n\n  // we don't want to drop the opacity when another item is hovered\n  .highcharts-series-inactive {\n    opacity: 1;\n  }\n\n  // apply cursor pointer when click functionality is turned on\n  ${({ $hasOnClick }) =>\n    $hasOnClick &&\n    `\n \t\t\t.highcharts-series,\n \t\t\t.highcharts-point {\n \t\t\t\tcursor: pointer;\n \t\t\t}\n \t\t\t.highcharts-plot-background,\n \t\t\t.highcharts-crosshair,\n \t\t\t.highcharts-grid-line {\n \t\t\t\tfill: transparent;\n \t\t\t\tcursor: pointer;\n \t\t}`}\n\n  path.highcharts-plot-line.y-axis-zero-line {\n    stroke: ${({ theme }) => theme.colors.container.border.decorative.neutral};\n  }\n`;\n\n// options that should apply to line charts\nexport const lineChartStyles = css<\n  Readonly<{\n    $colors: ReadonlyArray<TypeChartStyleColor>;\n    $patterns: ReadonlyArray<TypeChartStylePattern>;\n    $hasOnClick: TypeChartStyleHasOnClick;\n  }>\n>`\n  ${timeSeriesChartStyles}\n\n  // set the line stroke\n\t.highcharts-graph {\n    stroke-width: 3;\n  }\n\n  // dashed line styles\n  ${({ $patterns }) =>\n    $patterns.map((pattern, index) => {\n      return pattern === \"dashed\"\n        ? `\n \t\t\t\t\t// highcharts already accounts for 10 series, but if we have more, we need to add them\n \t\t\t\t\t.highcharts-series-${index} {\n \t\t\t\t\t\tstroke-dasharray: 2, 8;\n \t\t\t\t\t}`\n        : \"\";\n    })}\n`;\n\n// options that should apply to area charts\nexport const areaChartStyles = css`\n  ${timeSeriesChartStyles}\n\n  // don't need to show a stroke for the line part of each area\n\t.highcharts-graph {\n    stroke-width: 0;\n  }\n\n  // fill areas to full opacity\n  .highcharts-area {\n    fill-opacity: 1;\n  }\n`;\n\n// options that should apply to donut charts\nexport const donutChartStyles = css<\n  Readonly<{\n    $colors: ReadonlyArray<TypeChartStyleColor>;\n    $hasOnClick: TypeChartStyleHasOnClick;\n  }>\n>`\n  ${baseChartStyles}\n\n  // remove 250ms fade in/out when hovering over different donut chart slices\n\t.highcharts-point {\n    transition: opacity 0s;\n  }\n\n  // remove stroke on donut slices\n  .highcharts-pie-series .highcharts-point {\n    stroke: none;\n  }\n\n  // don't reduce opacity when hovering\n  .highcharts-point-hover {\n    fill-opacity: none;\n  }\n\n  // apply cursor pointer when click functionality is turned on\n  ${({ $hasOnClick }) =>\n    $hasOnClick &&\n    `\n \t\t\t.highcharts-series,\n \t\t\t.highcharts-point {\n \t\t\t\tcursor: pointer;\n \t\t\t}\n \t\t\t.highcharts-plot-background,\n \t\t\t.highcharts-crosshair,\n \t\t\t.highcharts-grid-line {\n \t\t\t\tfill: transparent;\n \t\t\t\tcursor: pointer;\n \t\t}`}\n`;\n"]}