@sproutsocial/seeds-react-data-viz 0.18.0 → 0.20.0

package/dist/chunk-46L4YBLC.js

@@ -0,0 +1,544 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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; }// src/components/ColorBox/ColorBox.tsx
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+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
+
+
+var ColorBox = ({
+  display = "inline-block",
+  height = "16px",
+  width = "16px",
+  minWidth = width,
+  borderRadius = "400",
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _seedsreactbox.Box,
+    {
+      ...props,
+      display,
+      height,
+      width,
+      minWidth,
+      borderRadius,
+      css: _styledcomponents.css`
+          cursor: ${(props2) => _optionalChain([props2, 'optionalAccess', _ => _.onClick]) ? "pointer" : "default"};
+        `
+    }
+  );
+};
+
+// src/components/ChartLegend/components/ChartLegendLabel.tsx
+
+
+
+var _seedsreacttext = require('@sproutsocial/seeds-react-text');
+
+var StyledBox = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme5 }) => theme5.space[300]};
+`;
+var ChartLegendLabel = _react.memo.call(void 0, 
+  function ChartLegendLabel2({
+    children,
+    color = "#CCC",
+    containerBoxProps = {}
+  }) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledBox, { ...containerBoxProps, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorBox, { bg: color }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { as: "div", fontSize: 200, color: "text.subtext", children })
+    ] });
+  }
+);
+
+// src/components/ChartLegend/ChartLegend.tsx
+
+
+
+
+var ChartLegend = _react.memo.call(void 0, function ChartLegend2({
+  legendLabels,
+  containerBoxProps = {},
+  stacked = false
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _seedsreactbox.Box,
+    {
+      as: "ul",
+      "aria-hidden": "true",
+      display: "flex",
+      justifyContent: "center",
+      flexDirection: stacked ? "column" : "row",
+      flexWrap: "wrap",
+      columnGap: 450,
+      rowGap: 200,
+      m: 0,
+      p: 0,
+      ...containerBoxProps,
+      children: legendLabels.map(({ color, content }, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ChartLegendLabel,
+        {
+          color: color || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index],
+          containerBoxProps: { as: "li" },
+          children: content
+        },
+        `chart-legend-label-${index}`
+      ))
+    }
+  );
+});
+
+// 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 })
+    }
+  );
+});
+
+// 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
+      }
+    );
+  }
+);
+
+// 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
+      }
+    );
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipPortal.tsx
+
+var _reactdom = require('react-dom');
+var generateChartTooltipPortalId = (chartId) => `highcharts-custom-tooltip-${chartId}`;
+var ChartTooltipPortal = _react.memo.call(void 0, 
+  function ChartTooltipPortal2({
+    chart,
+    renderContent
+  }) {
+    const isInitialized = _react.useRef.call(void 0, false);
+    const [node, setNode] = _react.useState.call(void 0, null);
+    const [context, setContext] = _react.useState.call(void 0, null);
+    _react.useEffect.call(void 0, () => {
+      const formatter = function() {
+        if (!isInitialized.current) {
+          isInitialized.current = true;
+          chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
+          chart.tooltip.hide(0);
+        }
+        setContext(this);
+        return `<div id="${generateChartTooltipPortalId(
+          chart.index
+        )}" role='tooltip'></div>`;
+      };
+      chart.update({ tooltip: { formatter } });
+    }, [chart]);
+    _react.useEffect.call(void 0, () => {
+      if (_optionalChain([context, 'optionalAccess', _2 => _2.series, 'optionalAccess', _3 => _3.chart, 'optionalAccess', _4 => _4.tooltip])) {
+        const tooltip = context.series.chart.tooltip;
+        const textElement = tooltip.label.text.element;
+        tooltip.label.box.attr({
+          height: textElement.offsetHeight,
+          width: textElement.offsetWidth
+        });
+        setNode(
+          document.getElementById(generateChartTooltipPortalId(chart.index))
+        );
+      }
+    }, [context, chart.index]);
+    return node && context ? _reactdom.createPortal.call(void 0, renderContent(context), node) : null;
+  }
+);
+
+// src/components/ChartTable/ChartTable.tsx
+
+
+
+var _seedsreacttable = require('@sproutsocial/seeds-react-table');
+
+var StyledSeedsTable = _styledcomponents2.default.call(void 0, _seedsreacttable.Table)`
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+  tr:last-child td,
+  tr:last-child th {
+    padding-bottom: 0;
+  }
+  tr:first-child td,
+  tr:first-child th {
+    padding-top: 0;
+  }
+  tr th {
+    padding-left: 0;
+  }
+  tr td:last-child {
+    padding-right: 0;
+  }
+`;
+var StyledSeedsTableRow = _styledcomponents2.default.call(void 0, _seedsreacttable.Table.TableRow)`
+  ${({ $isAppendedRow, theme: theme5 }) => $isAppendedRow ? `border-top: 2px solid ${theme5.colors.container.border.base}` : ""}
+`;
+var ChartTable = _react.memo.call(void 0, function ChartTable2({
+  rows
+}) {
+  if (!rows || rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledSeedsTable, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttable.Table.TableBody, { children: rows.map(({ cells, isAppendedRow }, rowIndex) => {
+    if (!cells || cells.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledSeedsTableRow,
+      {
+        $isAppendedRow: isAppendedRow,
+        children: cells.map(
+          ({ content, align = "left", colSpan = 1 }, cellIndex) => {
+            const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _seedsreacttable.Table.Cell,
+              {
+                id: uniqueIdentifier,
+                scope: cellIndex === 0 ? "row" : void 0,
+                align,
+                colSpan,
+                py: 200,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text.SmallBodyCopy, { as: "div", children: content })
+              },
+              uniqueIdentifier
+            );
+          }
+        )
+      },
+      `chart-tooltip-table-row-${rowIndex}`
+    );
+  }) }) });
+});
+
+// src/components/ChartTooltip/components/ChartTooltipTable.tsx
+
+
+var ChartTooltipTable = _react.memo.call(void 0, 
+  function ChartTooltipTable2({ rows }) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartTable, { rows });
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipTitle.tsx
+
+
+
+var ChartTooltipTitle = _react.memo.call(void 0, 
+  function ChartTooltipTitle2({ children }) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text.SmallSubHeadline, { as: "p", children });
+  }
+);
+
+// src/helpers/transformTimeSeriesTooltipData.ts
+
+var transformTimeSeriesTooltipData = ({
+  context,
+  data
+}) => {
+  return (context.series.chart.series || []).map((series, index) => {
+    const pointIndex = context.point.index;
+    const y = _optionalChain([series, 'optionalAccess', _5 => _5.points, 'optionalAccess', _6 => _6[pointIndex], 'optionalAccess', _7 => _7.y]);
+    return {
+      color: _optionalChain([data, 'access', _8 => _8[index], 'optionalAccess', _9 => _9.styles, 'optionalAccess', _10 => _10.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index],
+      ..._optionalChain([data, 'access', _11 => _11[index], 'optionalAccess', _12 => _12.icon]) ? { icon: _optionalChain([data, 'access', _13 => _13[index], 'optionalAccess', _14 => _14.icon]) } : {},
+      name: series.name,
+      value: typeof y === "number" ? y : null
+    };
+  });
+};
+
+// src/styles/chartStyles.ts
+
+
+require('highcharts/css/highcharts.css');
+var GlobalChartStyleOverrides = _styledcomponents.createGlobalStyle`
+  // USAGE NOTE:
+  // Put general styles in baseChartStyles instead when possible to avoid excessive global styling.
+  // This global component is only for styles that can't override highcharts defaults when scoped.
+
+  .highcharts-tooltip-container {
+    z-index: 7 !important;
+  }
+  .highcharts-tooltip-box {
+    fill: transparent !important;
+  }
+`;
+var baseChartStyles = _styledcomponents.css`
+  --highcharts-background-color: ${({ theme: theme5 }) => theme5.colors.container.background.base};
+
+  // set color variables and map to each series
+  ${({ $colors }) => $colors.map((color, index) => {
+  const chartColor = color || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index];
+  return `
+				// map colors to custom assigned colors or fallback to default data viz color rotation
+				--highcharts-color-${index}: ${chartColor};
+
+				// highcharts already accounts for 10 series, but if we have more, we need to add them
+				.highcharts-color-${index} {
+					color: var(--highcharts-color-${index});
+					stroke: var(--highcharts-color-${index});
+					fill: var(--highcharts-color-${index});
+				}`;
+}).join("\n")}
+
+  // set overall chart background color
+  .highcharts-background {
+    fill: ${({ theme: theme5 }) => theme5.colors.container.background.base};
+  }
+
+  g.highcharts-annotation-label {
+    display: none;
+  }
+
+  div.highcharts-annotation-label {
+    top: 0 !important;
+    transform: translateX(-50%); // centers the label on the targeted axis point
+    pointer-events: none; // prevents tooltip hover from being interrupted by this element since it renders after on the dom
+  }
+`;
+var timeSeriesChartStyles = _styledcomponents.css`
+  ${baseChartStyles}
+
+  // vertical crosshair styles
+	.highcharts-crosshair {
+    stroke: ${({ theme: theme5 }) => theme5.colors.container.border.decorative.neutral};
+    stroke-width: 1;
+  }
+
+  // axis and gridline styles
+  .highcharts-grid-line {
+    stroke: ${({ theme: theme5 }) => theme5.colors.container.border.base};
+  }
+
+  .highcharts-axis-line {
+    stroke: ${({ theme: theme5 }) => theme5.colors.container.border.base};
+  }
+
+  .highcharts-tick {
+    stroke: none;
+  }
+  .highcharts-xaxis-labels,
+  .highcharts-yaxis-labels {
+    // v1 HTML labels (useHTML: true). v2 SVG label styles live in
+    // charts/shared/styles.ts (axisLabelV2Styles) — don't add v2 rules here.
+    > span {
+      font-family: ${({ theme: theme5 }) => theme5.fontFamily};
+      ${({ theme: theme5 }) => theme5.typography[100]};
+      font-weight: ${({ theme: theme5 }) => theme5.fontWeights.normal};
+      color: ${({ theme: theme5 }) => theme5.colors.text.subtext};
+    }
+  }
+  .highcharts-xaxis-labels {
+    // v1 HTML stacked labels (useHTML: true). v2 SVG stacked-label styles live
+    // in charts/shared/styles.ts (axisLabelV2Styles).
+    > span {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      > span:nth-of-type(2) {
+        font-weight: ${({ theme: theme5 }) => theme5.fontWeights.semibold};
+      }
+    }
+  }
+
+  // we don't want to drop the opacity when another item is hovered
+  .highcharts-series-inactive {
+    opacity: 1;
+  }
+
+  // apply cursor pointer when click functionality is turned on
+  ${({ $hasOnClick }) => $hasOnClick && `
+ 			.highcharts-series,
+ 			.highcharts-point {
+ 				cursor: pointer;
+ 			}
+ 			.highcharts-plot-background,
+ 			.highcharts-crosshair,
+ 			.highcharts-grid-line {
+ 				fill: transparent;
+ 				cursor: pointer;
+ 		}`}
+
+  path.highcharts-plot-line.y-axis-zero-line {
+    stroke: ${({ theme: theme5 }) => theme5.colors.container.border.decorative.neutral};
+  }
+`;
+var lineChartStyles = _styledcomponents.css`
+  ${timeSeriesChartStyles}
+
+  // set the line stroke
+	.highcharts-graph {
+    stroke-width: 3;
+  }
+
+  // dashed line styles
+  ${({ $patterns }) => $patterns.map((pattern, index) => {
+  return pattern === "dashed" ? `
+ 					// highcharts already accounts for 10 series, but if we have more, we need to add them
+ 					.highcharts-series-${index} {
+ 						stroke-dasharray: 2, 8;
+ 					}` : "";
+})}
+`;
+var areaChartStyles = _styledcomponents.css`
+  ${timeSeriesChartStyles}
+
+  // don't need to show a stroke for the line part of each area
+	.highcharts-graph {
+    stroke-width: 0;
+  }
+
+  // fill areas to full opacity
+  .highcharts-area {
+    fill-opacity: 1;
+  }
+`;
+var donutChartStyles = _styledcomponents.css`
+  ${baseChartStyles}
+
+  // remove 250ms fade in/out when hovering over different donut chart slices
+	.highcharts-point {
+    transition: opacity 0s;
+  }
+
+  // remove stroke on donut slices
+  .highcharts-pie-series .highcharts-point {
+    stroke: none;
+  }
+
+  // don't reduce opacity when hovering
+  .highcharts-point-hover {
+    fill-opacity: none;
+  }
+
+  // apply cursor pointer when click functionality is turned on
+  ${({ $hasOnClick }) => $hasOnClick && `
+ 			.highcharts-series,
+ 			.highcharts-point {
+ 				cursor: pointer;
+ 			}
+ 			.highcharts-plot-background,
+ 			.highcharts-crosshair,
+ 			.highcharts-grid-line {
+ 				fill: transparent;
+ 				cursor: pointer;
+ 		}`}
+`;
+
+// src/components/ChartLegend/components/ChartLegendLabelContentWithIcon.tsx
+
+
+
+var ChartLegendLabelContentWithIcon = _react.memo.call(void 0, 
+  function ChartLegendLabelContentWithIcon2({
+    children,
+    icon
+  }) {
+    return icon ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 200, children: [
+      icon,
+      children
+    ] }) : children;
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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

package/dist/chunk-46L4YBLC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-46L4YBLC.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/styles/chartStyles.ts","../src/components/ChartLegend/components/ChartLegendLabelContentWithIcon.tsx"],"names":["jsx","props","theme","ChartLegendLabel","jsxs","memo","ChartLegend","Box"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-46L4YBLC.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 {\n  ThemeProvider as BaseThemeProvider,\n  createGlobalStyle,\n} 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\n// CSS custom properties for token values that cannot be represented in SCSS maps\n// (e.g. radial-gradient + color-mix). These are injected here so styled-components\n// consumers get the values without needing to load the compiled SCSS theme CSS.\nconst GlobalTokenStyles = createGlobalStyle`\n  :root {\n    --color-container-bg-ai-generated: radial-gradient(\n      circle at bottom left,\n      color-mix(in srgb, #205bc3, transparent 80%) 0%,\n      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,\n      color-mix(in srgb, #f282f5, transparent 80%) 100%\n    ), #f3f4f4;\n  }\n`;\n\nconst ThemeProvider = (props: TypeProps) => (\n  <BaseThemeProvider {...props} theme={props.theme || theme}>\n    <GlobalTokenStyles />\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\";\nimport styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\n// styled components\nconst StyledBox = styled(Box)`\n  .Icon,\n  .logo {\n    stroke: none;\n  }\n`;\n\n// Chart Tooltip\ntype TypeChartTooltipProps = Readonly<{\n  children: React.ReactNode;\n}>;\n\nexport const ChartTooltip = memo<TypeChartTooltipProps>(function ChartTooltip({\n  children,\n}: TypeChartTooltipProps) {\n  return (\n    <StyledBox\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      borderRadius={500}\n      p={400}\n      minWidth={285}\n    >\n      <Box display=\"flex\" flexDirection=\"column\" gap={350}>\n        {children}\n      </Box>\n    </StyledBox>\n  );\n});\n","import { memo } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\ntype TypeChartTooltipFooterProps = {\n  children: React.ReactNode;\n};\n\nexport const ChartTooltipFooter = memo<TypeChartTooltipFooterProps>(\n  function ChartTooltipFooter({ children }: TypeChartTooltipFooterProps) {\n    return (\n      <Box\n        borderTop={500}\n        borderColor=\"container.border.base\"\n        mx={-400}\n        mb={-200}\n        px={400}\n        pt={350}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n","import { memo } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\ntype TypeChartTooltipHeaderProps = {\n  children: React.ReactNode;\n};\n\nexport const ChartTooltipHeader = memo<TypeChartTooltipHeaderProps>(\n  function ChartTooltipHeader({ children }: TypeChartTooltipHeaderProps) {\n    return (\n      <Box\n        borderBottom={500}\n        borderColor=\"container.border.base\"\n        mx={-400}\n        mt={-200}\n        px={400}\n        pb={350}\n      >\n        {children}\n      </Box>\n    );\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    }>;\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                ({ content, align = \"left\", colSpan = 1 }, cellIndex) => {\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                    >\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 { 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","import { memo } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeChartLegendLabelContentWithIconProps = Readonly<{\n  children: React.ReactNode;\n  // optional\n  icon?: React.ReactNode;\n}>;\n\nexport const ChartLegendLabelContentWithIcon =\n  memo<TypeChartLegendLabelContentWithIconProps>(\n    function ChartLegendLabelContentWithIcon({\n      children,\n      icon,\n    }: TypeChartLegendLabelContentWithIconProps) {\n      return icon ? (\n        <Box display=\"flex\" alignItems=\"center\" gap={200}>\n          {icon}\n          {children}\n        </Box>\n      ) : (\n        children\n      );\n    }\n  );\n"]}

package/dist/chunk-6EIJCJCN.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/charts/shared/chartContainer.ts
+function getChartContainerProps(args) {
+  const { familyClasses, colors, patterns = [], hasOnClick, className } = args;
+  const style = {};
+  colors.forEach((color, index) => {
+    if (color) {
+      style[`--highcharts-color-${index}`] = color;
+    }
+  });
+  const dashedSeries = patterns.map((pattern, index) => pattern === "dashed" ? index : -1).filter((index) => index >= 0).join(" ");
+  return {
+    className: ["seeds-chart", ...familyClasses, className].filter(Boolean).join(" "),
+    style,
+    ...hasOnClick ? { "data-has-on-click": "" } : {},
+    ...dashedSeries ? { "data-dashed-series": dashedSeries } : {}
+  };
+}
+
+
+
+exports.getChartContainerProps = getChartContainerProps;
+//# sourceMappingURL=chunk-6EIJCJCN.js.map

package/dist/chunk-6EIJCJCN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-6EIJCJCN.js","../src/charts/shared/chartContainer.ts"],"names":[],"mappings":"AAAA;ACsDO,SAAS,sBAAA,CACd,IAAA,EAQqB;AACrB,EAAA,MAAM,EAAE,aAAA,EAAe,MAAA,EAAQ,SAAA,EAAW,CAAC,CAAA,EAAG,UAAA,EAAY,UAAU,EAAA,EAAI,IAAA;AAOxE,EAAA,MAAM,MAAA,EAAgC,CAAC,CAAA;AACvC,EAAA,MAAA,CAAO,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAA,EAAA,GAAU;AAC/B,IAAA,GAAA,CAAI,KAAA,EAAO;AACT,MAAA,KAAA,CAAM,CAAA,mBAAA,EAAsB,KAAK,CAAA,CAAA;AACnC,IAAA;AACD,EAAA;AAIO,EAAA;AAID,EAAA;AACyB,IAAA;AAG9B,IAAA;AACmB,IAAA;AACE,IAAA;AACvB,EAAA;AACF;AD3EwC;AACA;AACA;AACA","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-6EIJCJCN.js","sourcesContent":[null,"import type { CSSProperties } from \"react\";\nimport type { TypeChartStyleColor, TypeChartStylePattern } from \"../../types\";\n\n/**\n * The container contract for v2 charts using the static chart-styles.css.\n *\n * This is the analog of Sparkline's inline --seeds-sparkline-color: it turns the\n * dynamic pieces the styled-components blocks in src/styles/chartStyles.ts used\n * to interpolate at runtime ($hasOnClick, $patterns, per-series color overrides)\n * into the class names, CSS custom properties, and data-attributes that\n * chart-styles.css reads. The three per-chart subtasks (CE-170 bar,\n * CE-165 line-area, CE-166 donut) derive their container props from this one\n * source so the class/variable/attribute names stay in sync with the stylesheet.\n *\n * Theme tokens are NOT resolved here: chart-styles.css references the DS's\n * already-emitted global CSS variables (var(--color-*), var(--font-*)) directly,\n * so light/dark follows the theme stylesheet with zero inline JS. Likewise the\n * default data-viz palette falls through to var(--color-dataviz-list-N) in the\n * stylesheet — only an explicit consumer-provided per-series color is inlined\n * here as --highcharts-color-N. Callers therefore pass the RAW per-series colors\n * (series.map(s => s.color), undefined when unset), not the palette-resolved\n * array from useSeedsChartSetup.\n *\n * This function owns only the genuinely-shared container mechanism. It does NOT\n * know about individual chart families: each family (CE-170 bar, CE-165\n * line-area, CE-166 donut) passes its own `familyClasses` chain, so a new family\n * never has to edit this file. Those chains mix a shared cross-family layer that\n * lives in chart-styles.css (e.g. .seeds-chart-time-series, used by both bar and\n * line-area) with truly per-family selectors each family ships in its own .css\n * (e.g. .seeds-chart-bar hover-dimming).\n */\nexport type ChartContainerProps = Readonly<{\n  className: string;\n  style: CSSProperties;\n  \"data-has-on-click\"?: string;\n  \"data-dashed-series\"?: string;\n}>;\n\n/**\n * Build the props for a v2 chart container consuming chart-styles.css.\n *\n * @param familyClasses the family class chain the caller owns, prepended by the\n * shared `seeds-chart` base — e.g. `[\"seeds-chart-time-series\", \"seeds-chart-line\"]`.\n * The shared function does not know families in advance; each family supplies\n * its own chain. Selectors for a shared cross-family class live in\n * chart-styles.css (e.g. seeds-chart-time-series); truly per-family selectors\n * live in that family's own .css (e.g. seeds-chart-bar).\n * @param colors the RAW per-series colors (series.map(s => s.color)); undefined\n * entries are left to fall through to the CSS var default and only explicit\n * overrides are inlined as --highcharts-color-N.\n * @returns the className chain, the inline CSS custom properties (explicit\n * per-series color overrides only), and the data-attributes gating the\n * $hasOnClick and $patterns rules.\n */\nexport function getChartContainerProps(\n  args: Readonly<{\n    familyClasses: ReadonlyArray<string>;\n    colors: ReadonlyArray<TypeChartStyleColor | undefined>;\n    patterns?: ReadonlyArray<TypeChartStylePattern>;\n    hasOnClick?: boolean;\n    /** Consumer Tailwind passthrough, appended to the class chain. */\n    className?: string;\n  }>\n): ChartContainerProps {\n  const { familyClasses, colors, patterns = [], hasOnClick, className } = args;\n\n  // Per-series colors: inline --highcharts-color-N ONLY for an explicit\n  // consumer-provided override. A default (undefined) series falls through to\n  // var(--highcharts-color-N, var(--color-dataviz-list-N)) in chart-styles.css,\n  // so the default data-viz rotation is resolved by the DS theme stylesheet\n  // (light/dark aware) rather than baked into an inline literal here.\n  const style: Record<string, string> = {};\n  colors.forEach((color, index) => {\n    if (color) {\n      style[`--highcharts-color-${index}`] = color;\n    }\n  });\n\n  // $patterns -> space-separated dashed indices, matched by [data-dashed-series~=\"N\"].\n  const dashedSeries = patterns\n    .map((pattern, index) => (pattern === \"dashed\" ? index : -1))\n    .filter((index) => index >= 0)\n    .join(\" \");\n\n  return {\n    className: [\"seeds-chart\", ...familyClasses, className]\n      .filter(Boolean)\n      .join(\" \"),\n    style: style as CSSProperties,\n    ...(hasOnClick ? { \"data-has-on-click\": \"\" } : {}),\n    ...(dashedSeries ? { \"data-dashed-series\": dashedSeries } : {}),\n  };\n}\n"]}

package/dist/{chunk-GVAMWFB7.js → chunk-XYE6O77Z.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkXP7HNV23js = require('./chunk-XP7HNV23.js');
+var _chunk27M4FDNKjs = require('./chunk-27M4FDNK.js');
 
 // src/charts/shared/annotations.ts
 function buildAnnotationConfig(annotations) {
@@ -56,7 +56,7 @@ function makeValueAxisLabelFormatter(format) {
   return function() {
     const numberValue = Number(this.value);
     const abbreviate = format.abbreviate === false ? false : deriveAbbreviateFromTicks(this);
-    return _chunkXP7HNV23js.valueFormatter.call(void 0, { ...format, value: numberValue, abbreviate });
+    return _chunk27M4FDNKjs.valueFormatter.call(void 0, { ...format, value: numberValue, abbreviate });
   };
 }
 
@@ -65,4 +65,4 @@ function makeValueAxisLabelFormatter(format) {
 
 
 exports.buildAnnotationConfig = buildAnnotationConfig; exports.defaultValueAxisLabelFormatter = defaultValueAxisLabelFormatter; exports.makeValueAxisLabelFormatter = makeValueAxisLabelFormatter;
-//# sourceMappingURL=chunk-GVAMWFB7.js.map
+//# sourceMappingURL=chunk-XYE6O77Z.js.map