@automattic/charts 4.5.0 → 4.7.0

package/dist/index.css

@@ -1,4 +1,4 @@
-:where(.a8c-charts-scope) {
+:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
   --a8c-charts-color-series-1: var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)));
   --a8c-charts-color-grid: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   --a8c-charts-color-axis-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -18,7 +18,7 @@
   --a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
   --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
   --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
-  --a8c-charts-color-tooltip-surface: #000000d9;
+  --a8c-charts-color-tooltip-surface: #1e1e1e;
   --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
   --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   --a8c-charts-elevation-xs: 0 1px 1px 0 #00000008,
@@ -39,7 +39,7 @@
 }
 
 @media (forced-colors: active) {
-  :where(.a8c-charts-scope) {
+  :where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
     --a8c-charts-color-label-axis: CanvasText;
     --a8c-charts-color-grid: GrayText;
     --a8c-charts-color-axis-x: GrayText;
@@ -105,13 +105,21 @@
   flex-shrink: 0;
 }
 .a8ccharts--zY0xG-surface, .a8ccharts--zY0xG-tooltip {
-  padding: var(--wpds-dimension-padding-sm, 8px);
-  background-color: var(--a8c-charts-color-tooltip-surface, #000000d9);
-  color: #fff;
+  padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
+  background-color: var(--a8c-charts-color-surface);
+  color: var(--a8c-charts-color-label);
   border-radius: var(--wpds-border-radius-md, 4px);
-  font-size: var(--wpds-typography-font-size-md, 13px);
+  font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-typography-font-size-sm, 12px);
   box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
   pointer-events: none;
+  line-height: 1.4;
+}
+
+@media (forced-colors: active) {
+  .a8ccharts--zY0xG-surface, .a8ccharts--zY0xG-tooltip {
+    border: var(--wpds-border-width-xs, 1px) solid CanvasText;
+  }
 }
 
 .a8ccharts--zY0xG-tooltip {
@@ -191,7 +199,7 @@
   overflow: visible;
 }
 
-.a8ccharts-inuQka-line-chart__tooltip, .a8ccharts-inuQka-line-chart__annotation-label-popover {
+.a8ccharts-inuQka-line-chart__annotation-label-popover {
   background: var(--a8c-charts-color-surface);
   color: var(--a8c-charts-color-label);
   padding: var(--wpds-dimension-padding-sm, 8px);
@@ -202,10 +210,6 @@
   padding-bottom: var(--wpds-dimension-padding-md, 12px);
 }
 
-.a8ccharts-inuQka-line-chart__tooltip-row {
-  padding: var(--wpds-dimension-padding-xs, 4px) 0;
-}
-
 .a8ccharts-inuQka-line-chart__tooltip-label {
   font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   padding-right: var(--wpds-dimension-padding-lg, 16px);
@@ -445,13 +449,6 @@
   }
 }
 
-.a8ccharts-mGEVca-tooltip-wrapper {
-  background: var(--a8c-charts-color-surface);
-  border-radius: var(--wpds-border-radius-md, 4px) !important;
-  padding: var(--wpds-dimension-padding-md, 12px) !important;
-  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
-}
-
 .a8ccharts-mGEVca-tooltip-title {
   color: var(--a8c-charts-color-label);
   font-size: var(--wpds-typography-font-size-sm, 12px);
@@ -618,10 +615,18 @@
   font-size: var(--wpds-typography-font-size-md, 13px);
 }
 
-.a8ccharts-O3YMOW-heatmap-chart__cell--strong .a8ccharts-O3YMOW-heatmap-chart__cell-value {
+.a8ccharts-O3YMOW-heatmap-chart__cell-value--inverse {
   color: var(--a8c-charts-color-label-inverse);
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__cell-value--black {
+  color: #000;
+}
+
+.a8ccharts-O3YMOW-heatmap-chart__cell-value--white {
+  color: #fff;
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__legend-label {
   color: var(--a8c-charts-color-label);
 }
@@ -854,6 +859,14 @@
 .a8ccharts-gnszbG-pie-chart__label-text--on-light {
   fill: var(--a8c-charts-color-label, #1e1e1e);
 }
+
+.a8ccharts-gnszbG-pie-chart__label-text--black {
+  fill: #000;
+}
+
+.a8ccharts-gnszbG-pie-chart__label-text--white {
+  fill: #fff;
+}
 .a8ccharts-YtTOxW-pie-semi-circle-chart__plot {
   position: relative;
 }

package/dist/index.d.cts

@@ -4,7 +4,7 @@ import { AxisRendererProps, AxisScale, Orientation, TickFormatter } from "@visx/
 import { PickD3Scale, ScaleInput, ScaleType } from "@visx/scale";
 import { TextProps } from "@visx/text";
 import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1, TooltipContextType } from "@visx/xychart";
-import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, JSX, 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
@@ -829,7 +829,7 @@ type XyChartTooltipProps<Datum extends object> = {
   tooltipPlacement?: TooltipPlacement;
   /** Override the tooltip top anchor in SVG coordinates, including negative offsets. */
   tooltipAnchorTop?: number;
-  /** Merge overrides with the default box styles; use `unstyled` to strip the box styling. */
+  /** Inline overrides on the tooltip surface; `unstyled` drops both. */
   style?: TooltipProps$1['style'];
   snapTooltipToDatumX?: boolean;
   snapTooltipToDatumY?: boolean;
@@ -1209,6 +1209,7 @@ interface TooltipRenderProps {
   index: number;
   top: number;
   left: number;
+  /** @deprecated The tooltip box draws the package surface; this is no longer set. */
   className?: string;
 }
 /**
@@ -1235,6 +1236,8 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
   renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
   /** Custom render function for tooltip content */
   renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
+  /** Inline styles merged over the tooltip box defaults. */
+  tooltipStyle?: React.CSSProperties;
 }
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.d.ts
@@ -1260,6 +1263,12 @@ type GeoRegion = 'world' | (string & {});
  * - 'metros': Metropolitan areas (US only)
  */
 type GeoResolution = 'countries' | 'provinces' | 'metros';
+/**
+ * How the map plots its rows.
+ * - 'regions': Shades each area the rows name
+ * - 'markers': Draws a sized, colored circle per row; a row can name a place or give `[ latitude, longitude ]` as its first two columns
+ */
+type GeoDisplayMode = 'regions' | 'markers';
 interface GeoChartError {
   id?: string;
   message?: string;
@@ -1289,6 +1298,11 @@ interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | '
    * @default 'countries'
    */
   resolution?: GeoResolution;
+  /**
+   * How the map plots its rows: shaded areas, or one marker per row.
+   * @default 'regions'
+   */
+  displayMode?: GeoDisplayMode;
   /**
    * ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders
    * (e.g., 'IN' draws Kashmir as India shows it). Google's default borders apply when omitted.
@@ -1413,13 +1427,9 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
    */
   primaryColor?: string;
   renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
-  /**
-   * The tooltip box: `light` is the plain white box, `dark` the package's
-   * tooltip surface, themed through `--a8c-charts-color-tooltip-surface`.
-   * Default `light`.
-   */
+  /** @deprecated Every tooltip draws on the package tooltip surface; this prop has no effect. */
   tooltipVariant?: 'light' | 'dark';
-  /** Inline styles merged onto the tooltip box, over the variant's own. */
+  /** Inline styles merged onto the tooltip box, over the surface's own. */
   tooltipStyle?: CSSProperties;
   children?: ReactNode;
 }
@@ -1777,7 +1787,8 @@ declare const relativeLuminance: (hex: string) => number;
  * Whether light text reads better than dark text on the given background, using the W3C
  * luminance threshold (0.179) that maximizes contrast against black vs white.
  *
- * @param backgroundHex - Hex background color
+ * @deprecated Assumes black and white text, so it ignores label role overrides and cannot guarantee AA; charts no longer use it, and it will be removed in a future major version.
+ * @param      backgroundHex - Hex background color
  * @return true if light text should be used; false (dark text) for malformed colors
  */
 declare const prefersLightText: (backgroundHex: string) => boolean;
@@ -2221,7 +2232,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.Element;
+declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
 //#endregion
 //#region src/providers/chart-context/types.d.ts
 interface ChartRegistration {
@@ -2330,5 +2341,5 @@ declare const defaultTheme: CompleteChartTheme;
  */
 declare const useChartScopeElement: () => HTMLElement | null;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1, TooltipContextType } from "@visx/xychart";
-import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
 import { TextProps } from "@visx/text";
 import { TooltipProps as TooltipProps$1, UseTooltipPortalOptions } from "@visx/tooltip";
 import { PickD3Scale, ScaleInput, ScaleType } from "@visx/scale";
@@ -829,7 +829,7 @@ type XyChartTooltipProps<Datum extends object> = {
   tooltipPlacement?: TooltipPlacement;
   /** Override the tooltip top anchor in SVG coordinates, including negative offsets. */
   tooltipAnchorTop?: number;
-  /** Merge overrides with the default box styles; use `unstyled` to strip the box styling. */
+  /** Inline overrides on the tooltip surface; `unstyled` drops both. */
   style?: TooltipProps$1['style'];
   snapTooltipToDatumX?: boolean;
   snapTooltipToDatumY?: boolean;
@@ -1209,6 +1209,7 @@ interface TooltipRenderProps {
   index: number;
   top: number;
   left: number;
+  /** @deprecated The tooltip box draws the package surface; this is no longer set. */
   className?: string;
 }
 /**
@@ -1235,6 +1236,8 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
   renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
   /** Custom render function for tooltip content */
   renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
+  /** Inline styles merged over the tooltip box defaults. */
+  tooltipStyle?: React.CSSProperties;
 }
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.d.ts
@@ -1260,6 +1263,12 @@ type GeoRegion = 'world' | (string & {});
  * - 'metros': Metropolitan areas (US only)
  */
 type GeoResolution = 'countries' | 'provinces' | 'metros';
+/**
+ * How the map plots its rows.
+ * - 'regions': Shades each area the rows name
+ * - 'markers': Draws a sized, colored circle per row; a row can name a place or give `[ latitude, longitude ]` as its first two columns
+ */
+type GeoDisplayMode = 'regions' | 'markers';
 interface GeoChartError {
   id?: string;
   message?: string;
@@ -1289,6 +1298,11 @@ interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | '
    * @default 'countries'
    */
   resolution?: GeoResolution;
+  /**
+   * How the map plots its rows: shaded areas, or one marker per row.
+   * @default 'regions'
+   */
+  displayMode?: GeoDisplayMode;
   /**
    * ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders
    * (e.g., 'IN' draws Kashmir as India shows it). Google's default borders apply when omitted.
@@ -1413,13 +1427,9 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
    */
   primaryColor?: string;
   renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
-  /**
-   * The tooltip box: `light` is the plain white box, `dark` the package's
-   * tooltip surface, themed through `--a8c-charts-color-tooltip-surface`.
-   * Default `light`.
-   */
+  /** @deprecated Every tooltip draws on the package tooltip surface; this prop has no effect. */
   tooltipVariant?: 'light' | 'dark';
-  /** Inline styles merged onto the tooltip box, over the variant's own. */
+  /** Inline styles merged onto the tooltip box, over the surface's own. */
   tooltipStyle?: CSSProperties;
   children?: ReactNode;
 }
@@ -1777,7 +1787,8 @@ declare const relativeLuminance: (hex: string) => number;
  * Whether light text reads better than dark text on the given background, using the W3C
  * luminance threshold (0.179) that maximizes contrast against black vs white.
  *
- * @param backgroundHex - Hex background color
+ * @deprecated Assumes black and white text, so it ignores label role overrides and cannot guarantee AA; charts no longer use it, and it will be removed in a future major version.
+ * @param      backgroundHex - Hex background color
  * @return true if light text should be used; false (dark text) for malformed colors
  */
 declare const prefersLightText: (backgroundHex: string) => boolean;
@@ -2221,7 +2232,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.Element;
+declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
 //#endregion
 //#region src/providers/chart-context/types.d.ts
 interface ChartRegistration {
@@ -2330,5 +2341,5 @@ declare const defaultTheme: CompleteChartTheme;
  */
 declare const useChartScopeElement: () => HTMLElement | null;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 //# sourceMappingURL=index.d.ts.map