@automattic/charts 0.57.0 → 0.59.0

package/src/index.ts

@@ -28,8 +28,32 @@ export {
 	defaultTheme,
 } from './providers';
 
-// Types
-export type * from './types';
+// Types - explicit exports (excludes internal types like DataPointPercentageCalculated)
+export type {
+	Optional,
+	OrientationType,
+	AnnotationStyles,
+	DataPoint,
+	GeoData,
+	DataPointDate,
+	LeaderboardEntry,
+	GradientStop,
+	SeriesDataOptions,
+	SeriesData,
+	MultipleDataPointsDate,
+	DataPointPercentage,
+	ChartTheme,
+	CompleteChartTheme,
+	AxisOptions,
+	ScaleOptions,
+	LegendItemStyles,
+	LegendLabelStyles,
+	LegendShapeStyles,
+	LegendPosition,
+	ChartLegendConfig,
+	BaseChartProps,
+	GridProps,
+} from './types';
 export type * from './visx/types';
 export type { PieChartProps, PieChartRenderTooltipParams } from './charts/pie-chart';
 export type {
@@ -37,13 +61,7 @@ export type {
 	PieSemiCircleChartRenderTooltipParams,
 } from './charts/pie-semi-circle-chart';
 export type { GeoChartProps, GeoRegion, GeoResolution } from './charts/geo-chart';
-export type {
-	LegendValueDisplay,
-	BaseLegendItem,
-	LegendItemStyles,
-	LegendLabelStyles,
-	LegendShapeStyles,
-} from './components/legend';
+export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';
 export type {
@@ -51,3 +69,42 @@ export type {
 	GoogleDataTableRow,
 	GoogleDataTableColumnRoleType,
 } from 'react-google-charts';
+
+// Re-exports from removed individual entry points
+export { useLeaderboardLegendItems } from './charts/leaderboard-chart/hooks';
+
+// Previously available via '@automattic/charts/tooltip', '@automattic/charts/legend'
+export { AccessibleTooltip } from './components/tooltip';
+export type { BaseTooltipProps, TooltipData, TooltipProps } from './components/tooltip';
+export type { LegendProps, BaseLegendProps, ChartLegendOptions } from './components/legend';
+
+// Previously available via '@automattic/charts/bar-chart', '@automattic/charts/line-chart', etc.
+export type { BarChartProps } from './charts/bar-chart';
+export type {
+	BarListChartProps,
+	RenderLabelProps,
+	RenderValueProps,
+} from './charts/bar-list-chart';
+export type {
+	ConversionFunnelChartProps,
+	FunnelStep,
+	StepLabelRenderProps,
+	StepRateRenderProps,
+	MainMetricRenderProps,
+	TooltipRenderProps,
+} from './charts/conversion-funnel-chart';
+export type { LeaderboardChartProps } from './charts/leaderboard-chart';
+export type {
+	LineChartProps,
+	LineChartAnnotationProps,
+	RenderLineGlyphProps,
+	TooltipDatum,
+	CurveType,
+} from './charts/line-chart';
+export type { ArcData } from './charts/pie-semi-circle-chart';
+export type { SparklineProps, GradientConfig, SparklineDataPoint } from './charts/sparkline';
+
+// Utilities
+export { parseAsLocalDate, formatMetricValue, formatPercentage, mergeThemes } from './utils';
+export * from './utils/color-utils';
+export type { MetricValueType } from './utils';

package/src/providers/chart-context/global-charts-provider.tsx

@@ -200,7 +200,13 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 	const getElementStyles = useCallback< GlobalChartsContextValue[ 'getElementStyles' ] >(
 		( { data, index, overrideColor, legendShape } ) => {
 			const isSeriesData = data && typeof data === 'object' && 'data' in data && 'options' in data;
-			const isPointPercentageData = data && typeof data === 'object' && 'percentage' in data;
+			// DataPointPercentage has a numeric 'value' directly, unlike SeriesData which has 'data' array
+			const isPointPercentageData =
+				data &&
+				typeof data === 'object' &&
+				'value' in data &&
+				typeof data.value === 'number' &&
+				! ( 'data' in data );
 
 			return {
 				color: resolveColor( {

package/src/providers/chart-context/hooks/use-chart-registration.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { useDeepMemo } from '../../../hooks';
 import { useGlobalChartsContext } from './use-global-charts-context';
 import type { BaseLegendItem } from '../../../components/legend';
+import type { ChartType } from '../../../types';
 
 export const useChartRegistration = ( {
 	chartId,
@@ -12,7 +13,7 @@ export const useChartRegistration = ( {
 }: {
 	chartId: string;
 	legendItems: BaseLegendItem[];
-	chartType: string;
+	chartType: ChartType;
 	isDataValid: boolean;
 	metadata?: Record< string, unknown >;
 } ): void => {

package/src/providers/chart-context/types.ts

@@ -1,12 +1,12 @@
 import { CSSProperties, ReactNode } from 'react';
 import type { BaseLegendItem } from '../../components/legend';
-import type { CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
+import type { ChartType, CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
 import type { LegendShape } from '@visx/legend/lib/types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 
 export interface ChartRegistration {
 	legendItems: BaseLegendItem[];
-	chartType: string;
+	chartType: ChartType;
 	metadata?: Record< string, unknown >;
 }
 

package/src/types.ts

@@ -15,6 +15,14 @@ type ValueOf< T > = T[ keyof T ];
 
 export type Optional< T, K extends keyof T > = Pick< Partial< T >, K > & Omit< T, K >;
 
+export type ChartType =
+	| 'bar'
+	| 'conversion-funnel'
+	| 'leaderboard'
+	| 'line'
+	| 'pie'
+	| 'pie-semi-circle';
+
 export type OrientationType = ValueOf< typeof Orientation >;
 
 export type AnnotationStyles = {
@@ -157,23 +165,24 @@ export type MultipleDataPointsDate = {
 	data: DataPointDate[];
 };
 
+/**
+ * Input data point for percentage-based charts (pie, donut, semi-circle).
+ * Provide values; percentages will be calculated automatically.
+ */
 export type DataPointPercentage = {
 	/**
 	 * Label for the data point
 	 */
 	label: string;
 	/**
-	 * Numerical value
+	 * Numerical value used for slice sizing.
+	 * Percentages are calculated automatically from values.
 	 */
 	value: number;
 	/**
-	 * Formatted value for display
+	 * Formatted value for display (e.g., "30K" instead of 30000)
 	 */
 	valueDisplay?: string;
-	/**
-	 * Percentage value
-	 */
-	percentage: number;
 	/**
 	 * Color code for the segment, by default colours are taken from the theme but this property can overrides it
 	 */
@@ -184,6 +193,17 @@ export type DataPointPercentage = {
 	group?: string;
 };
 
+/**
+ * Internal type with calculated percentage.
+ * Used internally after percentage calculation from values.
+ */
+export type DataPointPercentageCalculated = DataPointPercentage & {
+	/**
+	 * Calculated percentage (0-100) based on value relative to total
+	 */
+	percentage: number;
+};
+
 /**
  * Base theme configuration for chart components with optional properties
  */
@@ -296,7 +316,7 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 	};
 };
 
-declare type AxisOptions = {
+export type AxisOptions = {
 	orientation?: OrientationType;
 	numTicks?: number;
 	axisClassName?: string;
@@ -352,6 +372,86 @@ export type ScaleOptions = {
 	paddingOuter?: number;
 };
 
+export type LegendItemStyles = {
+	/** Margin around each legend item. */
+	margin?: CSSProperties[ 'margin' ];
+	/** Flex direction for items within each legend entry. */
+	flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+
+export type LegendLabelStyles = Pick< CSSProperties, 'justifyContent' | 'flex' | 'margin' > & {
+	/**
+	 * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+	 * When set, text overflow behavior is controlled by textOverflow.
+	 */
+	maxWidth?: string;
+	/**
+	 * Controls how text behaves when it exceeds maxWidth.
+	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+	 */
+	textOverflow?: 'ellipsis' | 'wrap';
+};
+
+export 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. */
+	margin?: CSSProperties[ 'margin' ];
+};
+
+/** Position of the legend relative to chart content. */
+export type LegendPosition = 'top' | 'bottom';
+
+/**
+ * Configuration object for chart legend appearance and behavior.
+ * Consolidates all legend styling and layout props into a single structured object.
+ */
+export type ChartLegendConfig< T = DataPoint | DataPointDate | LeaderboardEntry > = {
+	/**
+	 * Layout direction of legend items.
+	 */
+	orientation?: 'horizontal' | 'vertical';
+	/**
+	 * Position of the legend relative to the chart.
+	 * TODO: Add 'left' | 'right' positioning support in future implementation
+	 */
+	position?: LegendPosition;
+	/**
+	 * Alignment of the legend within its position.
+	 */
+	alignment?: 'start' | 'center' | 'end';
+	/**
+	 * Shape of the legend marker icon.
+	 */
+	shape?: LegendShape< T, number >;
+	/**
+	 * Enable interactive legend items that can toggle series visibility.
+	 * Supported for all chart types that render series.
+	 * Requires chartId and GlobalChartsProvider.
+	 * For pie charts, percentages are recalculated so visible segments total 100%.
+	 */
+	interactive?: boolean;
+	/**
+	 * Additional CSS class name for individual legend items.
+	 */
+	itemClassName?: string;
+	/**
+	 * CSS styles for each legend item (margin, flexDirection).
+	 */
+	itemStyles?: LegendItemStyles;
+	/**
+	 * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
+	 */
+	labelStyles?: LegendLabelStyles;
+	/**
+	 * Styles for legend shapes (width, height, margin).
+	 */
+	shapeStyles?: LegendShapeStyles;
+};
+
 /**
  * Base properties shared across all chart components
  */
@@ -416,45 +516,10 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	 */
 	showLegend?: boolean;
 	/**
-	 * Legend orientation
-	 */
-	legendOrientation?: 'horizontal' | 'vertical';
-	/**
-	 * Legend shape
-	 */
-	legendShape?: LegendShape< T, number >;
-	/**
-	 * Legend position (where the legend appears)
-	 * TODO: Add 'left' | 'right' positioning support in future implementation
-	 */
-	legendPosition?: 'top' | 'bottom';
-	/**
-	 * Legend alignment within its position
-	 */
-	legendAlignment?: 'start' | 'center' | 'end';
-	/**
-	 * Maximum width for legend items. When set, text overflow behavior is controlled by legendTextOverflow.
-	 * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-	 */
-	legendMaxWidth?: string;
-	/**
-	 * Controls how text behaves when it exceeds legendMaxWidth.
-	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-	 */
-	legendTextOverflow?: 'ellipsis' | 'wrap';
-	/**
-	 * Additional CSS class name for legend items.
-	 * This allows consumers to customize individual legend item styling.
-	 */
-	legendItemClassName?: string;
-	/**
-	 * Enable interactive legend items that can toggle series visibility.
-	 * Supported for all chart types that render series.
-	 * Requires chartId and GlobalChartsProvider.
-	 * For pie charts, percentages are recalculated so visible segments total 100%.
+	 * Legend configuration object for controlling legend appearance and behavior.
+	 * Includes orientation, position, alignment, shape, styling, and interactivity options.
 	 */
-	legendInteractive?: boolean;
+	legend?: ChartLegendConfig< T >;
 	/**
 	 * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
 	 */

package/src/utils/date-parsing.ts

@@ -44,7 +44,16 @@ import { parse, parseISO, isValid } from 'date-fns';
  * @return {boolean} True if the date string contains timezone information, false otherwise
  */
 const hasTimezone = ( dateString: string ): boolean => {
-	return /T.*[Z]$|T.*[+-]\d{2}:?\d{2}$/.test( dateString );
+	const tIndex = dateString.indexOf( 'T' );
+	if ( tIndex === -1 ) {
+		return false;
+	}
+
+	if ( dateString.endsWith( 'Z' ) ) {
+		return true;
+	}
+
+	return /[+-]\d{2}:?\d{2}$/.test( dateString.slice( tIndex + 1 ) );
 };
 
 /**

package/src/utils/test/date-parsing.test.ts

@@ -268,6 +268,18 @@ describe( 'parseAsLocalDate', () => {
 		} );
 	} );
 
+	describe( 'ReDoS resilience', () => {
+		test( 'should handle adversarial input without catastrophic backtracking', () => {
+			const malicious = 'T' + 'a'.repeat( 8000000 ) + 'X';
+			const start = performance.now();
+			const result = parseAsLocalDate( malicious );
+			const elapsed = performance.now() - start;
+
+			expect( isNaN( result.getTime() ) ).toBe( true );
+			expect( elapsed ).toBeLessThan( 50 );
+		} );
+	} );
+
 	describe( 'Performance and consistency', () => {
 		test( 'should consistently parse the same input', () => {
 			const dateString = '2025-01-15T14:30:45Z';

package/src/utils/test/resolve-css-var.test.ts

@@ -414,7 +414,8 @@ describe( 'resolveCssVariable', () => {
 				if ( element === themedElement ) {
 					return {
 						getPropertyValue: ( prop: string ) => {
-							if ( prop === '--wpds-color-bg-interactive-brand' ) {
+							// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
+							if ( prop === '--wpds-color-bg-interactive-brand-weak' ) {
 								return '#c029dc'; // User's custom accent color
 							}
 							return '';
@@ -427,7 +428,8 @@ describe( 'resolveCssVariable', () => {
 			} );
 			window.getComputedStyle = mockGetComputedStyle as unknown as typeof window.getComputedStyle;
 
-			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand', themedElement );
+			// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
+			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand-weak', themedElement );
 			expect( result ).toBe( '#c029dc' );
 		} );
 	} );

package/tsup.config.ts

@@ -16,7 +16,7 @@ export default defineConfig( {
 	dts: true,
 	format: [ 'esm', 'cjs' ],
 	outDir: 'dist',
-	noExternal: [ '@wordpress/ui' ],
+	noExternal: [ '@wordpress/ui', 'fast-deep-equal' ],
 	loader: {
 		'.jpg': 'file',
 		'.gif': 'file',

package/dist/base-tooltip-DOq93wjU.d.cts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ComponentType, ReactNode } from 'react';
-
-type TooltipData = {
-    label: string;
-    value: number;
-    valueDisplay?: string;
-};
-type TooltipComponentProps = {
-    data: TooltipData;
-    className?: string;
-};
-type TooltipCommonProps = {
-    top: number;
-    left: number;
-    style?: CSSProperties;
-    className?: string;
-    /**
-     * Whether to render the tooltip container div. When false, only renders the content.
-     * Useful when the tooltip is rendered inside a portal or custom container.
-     * @default true
-     */
-    renderContainer?: boolean;
-};
-type DefaultDataTooltip = {
-    data: TooltipData;
-    component?: ComponentType<TooltipComponentProps>;
-    children?: never;
-};
-type CustomTooltip = {
-    children: ReactNode;
-    data?: never;
-    component?: never;
-};
-type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
-
-export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/base-tooltip-DOq93wjU.d.ts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ComponentType, ReactNode } from 'react';
-
-type TooltipData = {
-    label: string;
-    value: number;
-    valueDisplay?: string;
-};
-type TooltipComponentProps = {
-    data: TooltipData;
-    className?: string;
-};
-type TooltipCommonProps = {
-    top: number;
-    left: number;
-    style?: CSSProperties;
-    className?: string;
-    /**
-     * Whether to render the tooltip container div. When false, only renders the content.
-     * Useful when the tooltip is rendered inside a portal or custom container.
-     * @default true
-     */
-    renderContainer?: boolean;
-};
-type DefaultDataTooltip = {
-    data: TooltipData;
-    component?: ComponentType<TooltipComponentProps>;
-    children?: never;
-};
-type CustomTooltip = {
-    children: ReactNode;
-    data?: never;
-    component?: never;
-};
-type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
-
-export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/charts/bar-chart/index.cjs

@@ -1,15 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-var _chunkVJM5XCB4cjs = require('../../chunk-VJM5XCB4.cjs');
-require('../../chunk-Y3NNQMAX.cjs');
-require('../../chunk-I35UYJJR.cjs');
-require('../../chunk-ASLARV7L.cjs');
-require('../../chunk-RHHVEJHJ.cjs');
-require('../../chunk-VTS3PNMS.cjs');
-require('../../chunk-EMMSS5I5.cjs');
-
-
-
-exports.BarChart = _chunkVJM5XCB4cjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkVJM5XCB4cjs.BarChart;
-//# sourceMappingURL=index.cjs.map

package/dist/charts/bar-chart/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/charts/bar-chart/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,4DAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC;AACE;AACA;AACF,mHAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/charts/bar-chart/index.cjs"}

package/dist/charts/bar-chart/index.css

@@ -1,153 +0,0 @@
-/* esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss */
-.a8ccharts-jCw5dQ {
-  position: fixed;
-  inset: 0;
-  overflow: visible;
-  z-index: 1;
-  pointer-events: none;
-}
-
-/* esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss */
-.a8ccharts-AELBvX {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.a8ccharts-fX8uQe {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.a8ccharts-fX8uQe.a8ccharts-DEe0wg {
-  align-items: flex-start;
-}
-.a8ccharts-fX8uQe.a8ccharts-WBKF9I {
-  align-items: center;
-}
-.a8ccharts-fX8uQe.a8ccharts-JfwMng {
-  align-items: flex-end;
-}
-.a8ccharts-8Y73Kh {
-  position: relative;
-}
-.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {
-  justify-content: flex-start;
-}
-.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {
-  justify-content: center;
-}
-.a8ccharts-8Y73Kh.a8ccharts-JfwMng {
-  justify-content: flex-end;
-}
-.a8ccharts-TVM-IY {
-  position: relative;
-}
-.a8ccharts-TVM-IY.a8ccharts-DEe0wg {
-  justify-content: flex-start;
-}
-.a8ccharts-TVM-IY.a8ccharts-WBKF9I {
-  justify-content: center;
-}
-.a8ccharts-TVM-IY.a8ccharts-JfwMng {
-  justify-content: flex-end;
-}
-.a8ccharts-Vflwq8 {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-}
-.a8ccharts-qGsavM {
-  cursor: pointer;
-  user-select: none;
-  transition: opacity 0.2s ease;
-}
-.a8ccharts-qGsavM:hover {
-  opacity: 0.8;
-}
-.a8ccharts-qGsavM:focus {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-.a8ccharts-qGsavM:focus:not(:focus-visible) {
-  outline: none;
-}
-.a8ccharts-ZtDY-Q {
-  opacity: 0.4;
-}
-.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {
-  text-decoration: line-through;
-}
-.a8ccharts-2H65Kr {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.a8ccharts-faSDBI {
-  overflow-wrap: break-word;
-  white-space: normal;
-  hyphens: auto;
-}
-.a8ccharts-FISUIO {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
-  min-width: 0;
-}
-.a8ccharts-DTZlT- {
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-/* esbuild-sass-plugin:css-chunk:src/components/tooltip/base-tooltip.module.scss */
-.a8ccharts-OfX6nd {
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.85);
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  position: absolute;
-  pointer-events: none;
-  transform: translate(-50%, -100%);
-}
-
-/* esbuild-sass-plugin:css-chunk:src/charts/private/with-responsive/with-responsive.module.scss */
-.a8ccharts-GSKfBD {
-  min-width: 0;
-  min-height: 0;
-}
-
-/* esbuild-sass-plugin:css-chunk:src/charts/bar-chart/bar-chart.module.scss */
-.a8ccharts-9CsqC0 {
-  flex: 1;
-  min-height: 0;
-}
-.a8ccharts-3gflnB svg {
-  overflow: visible;
-}
-.a8ccharts-98W-yu rect {
-  transform-origin: bottom;
-  transform-box: fill-box;
-  transform: scaleY(0);
-  animation: a8ccharts-z6AsiQ 1s ease-out forwards;
-}
-@keyframes a8ccharts-z6AsiQ {
-  to {
-    transform: scaleY(1);
-  }
-}
-.a8ccharts-HFA3FF rect {
-  transform-origin: left;
-  transform-box: fill-box;
-  transform: scaleX(0);
-  animation: a8ccharts-DQp37O 1s ease-out forwards;
-}
-@keyframes a8ccharts-DQp37O {
-  to {
-    transform: scaleX(1);
-  }
-}
-/*# sourceMappingURL=index.css.map */

package/dist/charts/bar-chart/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss","esbuild-sass-plugin:css-chunk:src/components/tooltip/base-tooltip.module.scss","esbuild-sass-plugin:css-chunk:src/charts/private/with-responsive/with-responsive.module.scss","esbuild-sass-plugin:css-chunk:src/charts/bar-chart/bar-chart.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  inset: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}",".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}",".a8ccharts-OfX6nd {\n  padding: 0.5rem;\n  background-color: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  border-radius: 4px;\n  font-size: 14px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  position: absolute;\n  pointer-events: none;\n  transform: translate(-50%, -100%);\n}",".a8ccharts-GSKfBD {\n  min-width: 0;\n  min-height: 0;\n}",".a8ccharts-9CsqC0 {\n  flex: 1;\n  min-height: 0;\n}\n.a8ccharts-3gflnB svg {\n  overflow: visible;\n}\n.a8ccharts-98W-yu rect {\n  transform-origin: bottom;\n  transform-box: fill-box;\n  transform: scaleY(0);\n  animation: a8ccharts-z6AsiQ 1s ease-out forwards;\n}\n@keyframes a8ccharts-z6AsiQ {\n  to {\n    transform: scaleY(1);\n  }\n}\n.a8ccharts-HFA3FF rect {\n  transform-origin: left;\n  transform-box: fill-box;\n  transform: scaleX(0);\n  animation: a8ccharts-DQp37O 1s ease-out forwards;\n}\n@keyframes a8ccharts-DQp37O {\n  to {\n    transform: scaleX(1);\n  }\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,SAAO;AACP,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;;;ACNA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;;;AChGA,CAAC;AACC,WAAS;AACT,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAChC,SAAO;AACP,iBAAe;AACf,aAAW;AACX,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,YAAU;AACV,kBAAgB;AAChB,aAAW,UAAU,IAAI,EAAE;AAC7B;;;ACVA,CAAC;AACC,aAAW;AACX,cAAY;AACd;;;ACHA,CAAC;AACC,QAAM;AACN,cAAY;AACd;AACA,CAAC,iBAAiB;AAChB,YAAU;AACZ;AACA,CAAC,iBAAiB;AAChB,oBAAkB;AAClB,iBAAe;AACf,aAAW,OAAO;AAClB,aAAW,iBAAiB,GAAG,SAAS;AAC1C;AACA,WAFa;AAGX;AACE,eAAW,OAAO;AACpB;AACF;AACA,CAAC,iBAAiB;AAChB,oBAAkB;AAClB,iBAAe;AACf,aAAW,OAAO;AAClB,aAAW,iBAAiB,GAAG,SAAS;AAC1C;AACA,WAFa;AAGX;AACE,eAAW,OAAO;AACpB;AACF;","names":[]}