@automattic/charts 3.1.1 → 3.2.0

package/dist/index.css

@@ -1,11 +1,17 @@
 :where(.a8c-charts-scope) {
+  --a8c-charts-color-series-1: var(--a8c-charts-color-series-1-theme, var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9))));
+  --a8c-charts-color-series-2: var(--a8c-charts-color-series-2-theme);
+  --a8c-charts-color-series-3: var(--a8c-charts-color-series-3-theme);
+  --a8c-charts-color-series-4: var(--a8c-charts-color-series-4-theme);
+  --a8c-charts-color-series-5: var(--a8c-charts-color-series-5-theme);
   --a8c-charts-color-grid: var(--a8c-charts-color-grid-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
   --a8c-charts-color-axis: var(--a8c-charts-color-axis-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
   --a8c-charts-color-tick: var(--a8c-charts-color-tick-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
   --a8c-charts-color-label: var(--wpds-color-foreground-content-neutral, #1e1e1e);
   --a8c-charts-color-label-secondary: var(--wpds-color-foreground-content-neutral-weak, #707070);
   --a8c-charts-color-label-inverse: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
-  --a8c-charts-color-label-on-fill: #fff;
+  --a8c-charts-color-label-on-fill: var(--a8c-charts-color-label-on-fill-theme, #fff);
+  --a8c-charts-color-label-background: var(--a8c-charts-color-label-background-theme, transparent);
   --a8c-charts-color-label-axis: var(--a8c-charts-color-label-axis-theme, var(--a8c-charts-color-label));
   --a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral, #1e1e1e);
   --a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak, #008030);

package/dist/index.d.cts

@@ -7,7 +7,6 @@ import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphPr
 import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
 import { TooltipProps as TooltipProps$1, UseTooltipPortalOptions } from "@visx/tooltip";
 import { PieProvidedProps } from "@visx/shape";
-
 //#region src/types.d.ts
 type ValueOf<T> = T[keyof T];
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
@@ -60,15 +59,28 @@ type GoogleDataTableCell = {
 type GoogleDataTableRow = GoogleDataTableCell[];
 type ChartType = 'area' | 'bar' | 'conversion-funnel' | 'leaderboard' | 'line' | 'pie' | 'pie-semi-circle';
 type OrientationType = ValueOf<typeof Orientation>;
+/**
+ * Annotation styling.
+ *
+ * Each color member is deprecated on its own rather than the field it sits in: `radius`, `stroke` widths and the label geometry alongside them have no catalog role behind them and still apply.
+ */
 type AnnotationStyles = {
-  circleSubject?: Omit<CircleSubjectProps, 'x' | 'y'> & {
+  circleSubject?: Omit<CircleSubjectProps, 'x' | 'y' | 'fill'> & {
+    /** @deprecated Set the `--a8c-charts-color-annotation` custom property inside the provider tree instead. See `TOKENS.md`. */
     fill?: string;
   };
   lineSubject?: Omit<LineSubjectProps, 'x' | 'y'>;
-  connector?: Omit<ConnectorProps, 'x' | 'y' | 'dx' | 'dy'>;
-  label?: Omit<LabelProps, 'title' | 'subtitle' | 'x' | 'y'> & {
+  connector?: Omit<ConnectorProps, 'x' | 'y' | 'dx' | 'dy' | 'stroke'> & {
+    /** @deprecated Set the `--a8c-charts-color-annotation` custom property inside the provider tree instead. See `TOKENS.md`. */
+    stroke?: ConnectorProps['stroke'];
+  };
+  label?: Omit<LabelProps, 'title' | 'subtitle' | 'x' | 'y' | 'anchorLineStroke' | 'backgroundFill'> & {
     x?: number | 'start' | 'end';
     y?: number | 'start' | 'end';
+    /** @deprecated Set the `--a8c-charts-color-annotation` custom property inside the provider tree instead. See `TOKENS.md`. */
+    anchorLineStroke?: LabelProps['anchorLineStroke'];
+    /** @deprecated Set the `--a8c-charts-color-surface` custom property inside the provider tree instead. See `TOKENS.md`. */
+    backgroundFill?: LabelProps['backgroundFill'];
   };
 };
 type DataPoint = {
@@ -240,7 +252,7 @@ type DataPointPercentage = {
    */
   valueDisplay?: string;
   /**
-   * Color code for the segment, by default colours are taken from the theme but this property can overrides it
+   * Color code for the segment, by default colors are taken from the theme but this property can overrides it
    */
   color?: string;
   /**
@@ -262,41 +274,160 @@ type DataPointPercentageCalculated = DataPointPercentage & {
  * Base theme configuration for chart components with optional properties
  */
 type ChartTheme = {
-  /** Background color for chart components */backgroundColor: string; /** Background color for labels */
-  labelBackgroundColor?: string; /** Text color for labels */
-  labelTextColor?: string; /** Array of colors used for data visualization */
-  colors: string[]; /** Optional CSS styles for grid lines */
-  gridStyles?: GridStyles$1; /** Length of axis ticks in pixels */
-  tickLength: number; /** Color of the grid lines */
-  gridColor: string; /** Color of the grid lines in dark mode */
-  gridColorDark: string; /** Styles for x-axis tick lines */
-  xTickLineStyles?: LineStyles$1; /** Styles for x-axis line */
-  xAxisLineStyles?: LineStyles$1; /** Styles for series lines */
-  seriesLineStyles?: LineStyles$1[]; /** Array of render functions for glyphs */
-  glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>; /** Legend specific settings */
+  /**
+   * Background color for chart components.
+   *
+   * Still resolved in JS — gradient stops, the glyph stroke and `GeoChart`'s Google Charts config each need a concrete string — but that is about where the value is *consumed*, not where it is *set*. `withCatalogPointers` parks a consumer's value in the catalog role and restores the pointer, so the field is only ever a carrier for `--a8c-charts-color-background`, and setting the role directly does the same job.
+   *
+   * Optional so the deprecation is actionable: a consumer writing a full theme literal can now stop setting it. `CompleteChartTheme` is `Required< ChartTheme >`, so `defaultTheme` must still carry one.
+   *
+   * @deprecated Set the `--a8c-charts-color-background` custom property inside the provider tree instead. See `TOKENS.md`.
+   */
+  backgroundColor?: string;
+  /**
+   * Background color for labels.
+   *
+   * @deprecated Set the `--a8c-charts-color-label-background` custom property inside the provider tree instead. See `TOKENS.md`.
+   */
+  labelBackgroundColor?: string;
+  /**
+   * Text color for labels.
+   *
+   * @deprecated Set the `--a8c-charts-color-label-on-fill` custom property inside the provider tree instead. See `TOKENS.md`.
+   */
+  labelTextColor?: string;
+  /**
+   * Series palette seeds. Entry N publishes `--a8c-charts-color-series-{N+1}`; entries past the fifth are ignored.
+   *
+   * Optional so the deprecation is actionable: a consumer writing a full theme literal can now stop setting it. `CompleteChartTheme` is `Required< ChartTheme >`, so `defaultTheme` must still carry one.
+   *
+   * @deprecated Set the `--a8c-charts-color-series-1` … `-5` custom properties inside the provider tree instead, or `options.stroke` on a series for a single one. See `TOKENS.md`.
+   */
+  colors?: string[];
+  /**
+   * Optional CSS styles for grid lines.
+   *
+   * `stroke` is deprecated on its own, not the whole field: `strokeWidth` has no CSS role behind it and still applies. The same shape is used for the other fields whose color moved to CSS — annotating the field itself would strike through the half that stays.
+   */
+  gridStyles?: Omit<GridStyles$1, 'stroke'> & {
+    /** @deprecated Set the `--a8c-charts-color-grid` custom property inside the provider tree instead. See `TOKENS.md`. */
+    stroke?: GridStyles$1['stroke'];
+  };
+  /** Length of axis ticks in pixels */
+  tickLength: number;
+  /**
+   * Set `--a8c-charts-color-grid` for the gridlines.
+   *
+   * @deprecated Do not drop this field without replacing it. Nothing in this package consults it, but `buildChartTheme` seeds `y.left/right.axisLine.stroke` and `y.*.tickLine.stroke` from it, and `defaultTheme`'s empty string is the only thing leaving the y axis unpainted — deleting the field hands those a black `#222` instead. CHARTS-263 replaces it with visx's own `yAxisLineStyles`/`yTickLineStyles` and a pair of catalog roles.
+   */
+  gridColor?: string;
+  /**
+   * @deprecated Paints nothing, and unlike `gridColor` is safe to delete: `buildChartTheme` seeds `x.*.axisLine.stroke` from it, but spreads `xAxisLineStyles` over the top and `defaultTheme` always carries that stroke. Charts follow the host's theme through the catalog rather than a dark-mode field of their own.
+   */
+  gridColorDark?: string;
+  /** Styles for x-axis tick lines */
+  xTickLineStyles?: Omit<LineStyles$1, 'stroke'> & {
+    /** @deprecated Set the `--a8c-charts-color-tick` custom property inside the provider tree instead. See `TOKENS.md`. */
+    stroke?: LineStyles$1['stroke'];
+  };
+  /** Styles for x-axis line */
+  xAxisLineStyles?: Omit<LineStyles$1, 'stroke'> & {
+    /** @deprecated Set the `--a8c-charts-color-axis` custom property inside the provider tree instead. See `TOKENS.md`. */
+    stroke?: LineStyles$1['stroke'];
+  };
+  /** Styles for series lines */
+  seriesLineStyles?: LineStyles$1[];
+  /** Array of render functions for glyphs */
+  glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
+  /** Legend specific settings */
   legend?: {
-    /** Styles for legend shapes */shapeStyles?: Record<string, unknown>[]; /** Styles for legend labels */
-    labelStyles?: CSSProperties; /** Styles for legend container */
+    /** Styles for legend shapes */
+    shapeStyles?: Record<string, unknown>[];
+    /**
+     * Styles for legend labels.
+     *
+     * `color` is deprecated on its own, not the whole field: everything else a consumer sets here — font size, weight, spacing — has no catalog role behind it and still applies.
+     */
+    labelStyles?: Omit<CSSProperties, 'color'> & {
+      /** @deprecated Set the `--a8c-charts-color-label` custom property inside the provider tree instead. See `TOKENS.md`. */
+      color?: CSSProperties['color'];
+    };
+    /** Styles for legend container */
     containerStyles?: CSSProperties;
-  }; /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
-  svgLabelSmall?: TextProps; /** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
+  };
+  /**
+   * Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme.
+   *
+   * `fontFamily: 'inherit'` is load-bearing here — it overrides the font stack `buildChartTheme` injects inline on SVG `<text>` — so only `fill` is deprecated.
+   */
+  svgLabelSmall?: Omit<TextProps, 'fill'> & {
+    /** @deprecated Set the `--a8c-charts-color-label-axis` custom property inside the provider tree instead, or `--a8c-charts-color-label` to move every label at once. See `TOKENS.md`. */
+    fill?: TextProps['fill'];
+  };
+  /** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
   svgLabelBig?: TextProps;
-  annotationStyles?: AnnotationStyles; /** GeoChart specific settings */
+  annotationStyles?: AnnotationStyles;
+  /** GeoChart specific settings */
   geoChart?: {
-    /** Default fill color for a geo chart feature (e.g. country) with no data */featureFillColor?: string;
-  }; /** LeaderboardChart specific settings */
+    /**
+     * Default fill color for a geo chart feature (e.g. country) with no data.
+     *
+     * @deprecated Set the `--a8c-charts-color-surface-secondary` custom property inside the provider tree instead. Google Charts still takes a resolved hex, but the value is read from the role. See `TOKENS.md`.
+     */
+    featureFillColor?: string;
+  };
+  /** LeaderboardChart specific settings */
   leaderboardChart?: {
-    /** Gap between rows in the leaderboard grid */rowGap?: number; /** Gap between columns in the leaderboard grid */
-    columnGap?: number; /** Spacing between label and progress bars */
-    labelSpacing?: GapSize; /** Primary color for current period bars */
-    primaryColor?: string; /** Secondary color for comparison period bars */
-    secondaryColor?: string; /** Delta colors: [negative, neutral, positive] */
+    /** Gap between rows in the leaderboard grid */
+    rowGap?: number;
+    /** Gap between columns in the leaderboard grid */
+    columnGap?: number;
+    /** Spacing between label and progress bars */
+    labelSpacing?: GapSize;
+    /**
+     * Primary color for current period bars.
+     *
+     * @deprecated Use the `primaryColor` prop on `LeaderboardChart` for one chart, or set `--a8c-charts-color-series-1` to move the palette this falls back to. See `TOKENS.md`.
+     */
+    primaryColor?: string;
+    /**
+     * Secondary color for comparison period bars.
+     *
+     * @deprecated Use the `secondaryColor` prop on `LeaderboardChart` for one chart, or set `--a8c-charts-color-series-2` to move the palette this falls back to. See `TOKENS.md`.
+     */
+    secondaryColor?: string;
+    /**
+     * Delta colors: [negative, neutral, positive].
+     *
+     * @deprecated Set the `--a8c-charts-color-trend-down`, `-trend-neutral` and `-trend-up` custom properties inside the provider tree instead. See `TOKENS.md`.
+     */
     deltaColors?: [string, string, string];
-  }; /** ConversionFunnelChart specific settings */
+  };
+  /** ConversionFunnelChart specific settings */
   conversionFunnelChart?: {
-    /** Primary color for funnel bars */primaryColor?: string; /** Background color for chart container */
-    backgroundColor?: string; /** Color for positive change indicators */
-    positiveChangeColor?: string; /** Color for negative change indicators */
+    /**
+     * Primary color for funnel bars.
+     *
+     * @deprecated Set `--a8c-charts-color-series-1` to move the palette this falls back to. See `TOKENS.md`.
+     */
+    primaryColor?: string;
+    /**
+     * Background color for chart container.
+     *
+     * @deprecated Set the `--a8c-charts-color-surface-secondary` custom property inside the provider tree instead. See `TOKENS.md`.
+     */
+    backgroundColor?: string;
+    /**
+     * Color for positive change indicators.
+     *
+     * @deprecated Set the `--a8c-charts-color-trend-up` custom property inside the provider tree instead. See `TOKENS.md`.
+     */
+    positiveChangeColor?: string;
+    /**
+     * Color for negative change indicators.
+     *
+     * @deprecated Set the `--a8c-charts-color-trend-down` custom property inside the provider tree instead. See `TOKENS.md`.
+     */
     negativeChangeColor?: string;
   };
   lineChart?: {
@@ -304,14 +435,17 @@ type ChartTheme = {
   };
   barChart?: {
     barStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, BarStyles>>;
-  }; /** Sparkline specific settings */
+  };
+  /** Sparkline specific settings */
   sparkline?: {
-    /** Margin around the sparkline chart */margin?: {
+    /** Margin around the sparkline chart */
+    margin?: {
       top?: number;
       right?: number;
       bottom?: number;
       left?: number;
-    }; /** Stroke width for the sparkline line */
+    };
+    /** Stroke width for the sparkline line */
     strokeWidth?: number;
   };
   /**
@@ -322,9 +456,13 @@ type ChartTheme = {
     /**
      * Color the cell scale interpolates toward at the highest value (prop > this >
      * palette `colors[0]`), fed to CSS `color-mix`. Omit to use the palette color.
+     *
+     * @deprecated Use the `primaryColor` prop on `HeatmapChart` for one chart, or set `--a8c-charts-color-series-1` to move the palette this falls back to. See `TOKENS.md`.
      */
-    primaryColor?: string; /** Gap in px between cells in compact mode */
-    compactCellGap?: number; /** Fixed square cell size in px for compact mode */
+    primaryColor?: string;
+    /** Gap in px between cells in compact mode */
+    compactCellGap?: number;
+    /** Fixed square cell size in px for compact mode */
     compactCellSize?: number;
   };
 };
@@ -426,7 +564,9 @@ type ScaleOptions = {
   paddingOuter?: number;
 };
 type LegendItemStyles = {
-  /** Margin around each legend item. */margin?: CSSProperties['margin']; /** Flex direction for items within each legend entry. */
+  /** Margin around each legend item. */
+  margin?: CSSProperties['margin'];
+  /** Flex direction for items within each legend entry. */
   flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
 };
 type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
@@ -443,8 +583,11 @@ type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin
   textOverflow?: 'ellipsis' | 'wrap';
 };
 type LegendShapeStyles = {
-  /** Width of the legend shape in pixels. */width?: number; /** Height of the legend shape in pixels. */
-  height?: number; /** Margin around the legend shape. */
+  /** Width of the legend shape in pixels. */
+  width?: number;
+  /** Height of the legend shape in pixels. */
+  height?: number;
+  /** Margin around the legend shape. */
   margin?: CSSProperties['margin'];
 };
 /** Position of the legend relative to chart content. */
@@ -498,7 +641,7 @@ type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
 /**
  * Legend config for charts built from `SeriesData` (line, bar, area). Adds `collapseGroups` on top
  * of the shared config. It is intentionally absent from the base `ChartLegendConfig` so point-based
- * charts (pie, semi-circle pie) — whose data points carry `group` only to coordinate colours — can't
+ * charts (pie, semi-circle pie) — whose data points carry `group` only to coordinate colors — can't
  * set it.
  */
 type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
@@ -576,6 +719,16 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
    * Callback function for pointer out event
    */
   onPointerOut?: (event: PointerEvent<Element>) => void;
+  /**
+   * Callback for Enter or Space on the point keyboard navigation has selected:
+   * the keyboard counterpart of a click. `index` is the point's position in its
+   * series and `key` the series label.
+   */
+  onDatumActivate?: (params: {
+    datum: DataPoint | DataPointDate;
+    index: number;
+    key: string;
+  }) => void;
   /**
    * Whether to show tooltips on hover. False by default.
    */
@@ -622,11 +775,16 @@ type BaseLegendProps = VisxLegendProps & {
   items: BaseLegendItem[];
   orientation?: 'horizontal' | 'vertical';
   position?: LegendPosition;
-  alignment?: 'start' | 'center' | 'end'; /** Additional CSS class name for legend items. */
-  itemClassName?: string; /** CSS styles for each legend item (margin, flexDirection). */
-  itemStyles?: LegendItemStyles; /** Additional CSS class name for legend labels. */
-  labelClassName?: string; /** CSS styles for legend labels (justifyContent, flex, margin). */
-  labelStyles?: LegendLabelStyles; /** Styles for legend shapes (width, height, margin). */
+  alignment?: 'start' | 'center' | 'end';
+  /** Additional CSS class name for legend items. */
+  itemClassName?: string;
+  /** CSS styles for each legend item (margin, flexDirection). */
+  itemStyles?: LegendItemStyles;
+  /** Additional CSS class name for legend labels. */
+  labelClassName?: string;
+  /** CSS styles for legend labels (justifyContent, flex, margin). */
+  labelStyles?: LegendLabelStyles;
+  /** Styles for legend shapes (width, height, margin). */
   shapeStyles?: LegendShapeStyles;
   /**
    * Function for rendering a custom legend layout.
@@ -983,19 +1141,11 @@ interface RenderValueProps {
   formatter: (value: number) => string;
 }
 declare const BarListChart: FC<BarListChartProps>;
-declare const BarListChartResponsive: ({
-  resizeDebounceTime,
-  maxWidth,
-  aspectRatio,
-  size,
-  width,
-  height,
-  ...chartProps
-}: Omit<BarListChartProps, "height" | "size" | "width"> & {
+declare const BarListChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<BarListChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
-} & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
+} & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
 //#region src/charts/conversion-funnel-chart/types.d.ts
 /**
@@ -1137,24 +1287,17 @@ interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | '
 //#endregion
 //#region src/charts/geo-chart/geo-chart.d.ts
 declare const GeoChartWithProvider: FC<GeoChartProps>;
-declare const GeoChartResponsive: ({
-  resizeDebounceTime,
-  maxWidth,
-  aspectRatio,
-  size,
-  width,
-  height,
-  ...chartProps
-}: Omit<GeoChartProps, "height" | "size" | "width"> & {
+declare const GeoChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<GeoChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
-} & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
+} & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
 //#region src/charts/heatmap-chart/types.d.ts
 /** A single heatmap cell. `value: null` marks an empty cell. */
 type HeatmapCell = {
-  /** Per-cell label used in the tooltip / accessible name. */label?: string;
+  /** Per-cell label used in the tooltip / accessible name. */
+  label?: string;
   value: number | null;
   /**
    * Leave the cell's grid slot empty: nothing is painted and the cell is
@@ -1174,7 +1317,8 @@ type HeatmapCell = {
 };
 /** A heatmap column (rendered left→right); its cells render top→bottom. */
 type HeatmapColumn = {
-  /** x-axis label for this column. Empty/omitted renders blank. */label?: string;
+  /** x-axis label for this column. Empty/omitted renders blank. */
+  label?: string;
   data: HeatmapCell[];
 };
 type HeatmapTooltipData = {
@@ -1338,19 +1482,11 @@ declare const LeaderboardChart: FC<LeaderboardChartProps> & {
     chartId?: string;
   } & import("react").RefAttributes<HTMLDivElement>>;
 };
-declare const LeaderboardChartResponsive: (({
-  resizeDebounceTime,
-  maxWidth,
-  aspectRatio,
-  size,
-  width,
-  height,
-  ...chartProps
-}: Omit<LeaderboardChartProps, "height" | "size" | "width"> & {
+declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<LeaderboardChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
-} & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element) & {
+} & ResponsiveConfig) => import("react").JSX.Element) & {
   Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
     items?: BaseLegendItem[];
     chartId?: string;
@@ -1438,11 +1574,7 @@ type FormatMetricValueOptions = {
  * @param options.signDisplay    - Controls when to display the sign (auto, always, never, exceptZero)
  * @return Formatted string
  */
-declare const formatMetricValue: (value: string | number, type?: MetricValueType, {
-  decimals,
-  useMultipliers,
-  signDisplay
-}?: FormatMetricValueOptions) => string;
+declare const formatMetricValue: (value: string | number, type?: MetricValueType, { decimals, useMultipliers, signDisplay }?: FormatMetricValueOptions) => string;
 //#endregion
 //#region src/utils/format-percentage.d.ts
 /**
@@ -1588,14 +1720,7 @@ declare const resolveCssVariable: (value: string, element?: HTMLElement | null)
  * @param root0.legendLabels.comparison - Label for comparison period data
  * @return Array of legend items for the leaderboard chart
  */
-declare function useLeaderboardLegendItems({
-  data,
-  primaryColor,
-  secondaryColor,
-  withComparison,
-  withOverlayLabel,
-  legendLabels
-}: {
+declare function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withComparison, withOverlayLabel, legendLabels }: {
   data: LeaderboardEntry[];
   primaryColor?: string;
   secondaryColor?: string;
@@ -1826,7 +1951,7 @@ interface SparklineProps {
   size?: number;
   /**
    * Color for the line stroke (hex or CSS color)
-   * @default Theme color (first color in theme.colors array)
+   * @default The first series palette color (`--a8c-charts-color-series-1`)
    */
   color?: string;
   /**
@@ -1886,19 +2011,11 @@ declare const SparklineUnresponsive: import("react").ForwardRefExoticComponent<S
 /**
  * Responsive Sparkline chart component
  */
-declare const Sparkline: ({
-  resizeDebounceTime,
-  maxWidth,
-  aspectRatio,
-  size,
-  width,
-  height,
-  ...chartProps
-}: Omit<SparklineProps, "height" | "size" | "width"> & {
+declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<SparklineProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
-} & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
+} & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
 //#region src/components/tooltip/base-tooltip.d.ts
 type TooltipData = {
@@ -1933,16 +2050,7 @@ type CustomTooltip = {
   component?: never;
 };
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({
-  data,
-  top,
-  left,
-  component: Component,
-  children,
-  className,
-  style,
-  renderContainer
-}: BaseTooltipProps) => string | number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode>;
+declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
 //#endregion
 //#region src/components/tooltip/accessible-tooltip.d.ts
 type FlattenedTooltipData = {
@@ -2022,13 +2130,7 @@ type TrendIndicatorProps = {
  * @param {TrendIndicatorProps} props - Component props
  * @return {JSX.Element} The rendered trend indicator
  */
-declare function TrendIndicator({
-  direction,
-  value,
-  className,
-  style,
-  showIcon
-}: TrendIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): import("react").JSX.Element;
 //#endregion
 //#region src/providers/chart-context/types.d.ts
 interface ChartRegistration {
@@ -2080,13 +2182,7 @@ declare const GlobalChartsProvider: FC<GlobalChartsProviderProps>;
 declare const useGlobalChartsContext: () => GlobalChartsContextValue;
 //#endregion
 //#region src/providers/chart-context/hooks/use-chart-registration.d.ts
-declare const useChartRegistration: ({
-  chartId,
-  legendItems,
-  chartType,
-  isDataValid,
-  metadata
-}: {
+declare const useChartRegistration: ({ chartId, legendItems, chartType, isDataValid, metadata }: {
   chartId: string;
   legendItems: BaseLegendItem[];
   chartType: ChartType;