@redsift/charts 11.5.0 → 11.6.0-muiv5-alpha.0

package/index.d.ts

@@ -1,1277 +1,51 @@
-import { BrushBehavior, ScaleLinear as ScaleLinear$1, CountableTimeInterval, ScaleOrdinal, Arc as Arc$1, ScaleTime as ScaleTime$2, ScalePoint as ScalePoint$2, Line as Line$1 } from 'd3';
-import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, Theme, Comp, ContainerProps } from '@redsift/design-system';
-import { PieArcDatum } from 'd3-shape';
-import React$1, { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
-import * as d3_scale from 'd3-scale';
-import { ScaleLinear as ScaleLinear$2, ScaleLogarithmic, ScaleSymLog, ScalePoint as ScalePoint$1, ScaleBand as ScaleBand$1, ScaleTime as ScaleTime$1 } from 'd3-scale';
-import { TooltipProps } from '@redsift/popovers';
-import * as styled_components from 'styled-components';
-import * as _react_spring_web from '@react-spring/web';
-
-interface UseBrushProps {
-    brushRef: MutableRefObject<BrushBehavior<unknown> | undefined>;
-    svgRef: MutableRefObject<SVGSVGElement | SVGGElement | undefined>;
-    extent?: [[number, number], [number, number]];
-    scaleX: ScaleLinear$1<number, number>;
-    scaleY: ScaleLinear$1<number, number>;
-    isBrushable?: boolean;
-    isGridded?: boolean;
-    onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear$1<number, number>, scaleY: ScaleLinear$1<number, number>) => void;
-    onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear$1<number, number>, scaleY: ScaleLinear$1<number, number>) => void;
-}
-declare const useBrush: ({ brushRef: propsBrushRef, svgRef, extent, scaleX, scaleY, isBrushable, isGridded, onBrush, onBrushEnd, }: UseBrushProps) => void;
-
-/**
- * Component variant.
- */
-declare const AxisVariant: {
-    readonly none: "none";
-    readonly line: "line";
-    readonly lineTick: "lineTick";
-    readonly tick: "tick";
-    readonly tickValue: "tickValue";
-    readonly default: "default";
-};
-type AxisVariant = ValueOf<typeof AxisVariant>;
-declare const AxisPosition: {
-    top: string;
-    right: string;
-    bottom: string;
-    left: string;
-};
-type AxisPosition = ValueOf<typeof AxisPosition>;
-/**
- * Component props.
- */
-interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
-    /** Disable animations. */
-    disableAnimations?: boolean;
-    format?: string;
-    /** Whether to display grid or not. The length is mandatory and should usually be the length of the other axis. */
-    grid?: boolean | {
-        length?: number;
-        stroke?: string;
-        strokeWidth?: number;
-        strokeDasharray?: string;
-        opacity?: number;
-    };
-    legend?: string;
-    legendOffset?: number;
-    legendPosition?: 'start' | 'middle' | 'end';
-    legendX?: number;
-    legendY?: number;
-    legendRotation?: number;
-    legendStyle?: React.CSSProperties;
-    /** Length of the axis. */
-    length?: number;
-    /** Position of axis. top|bottom means this is an x axis, right|left means this is an y axis. */
-    position?: AxisPosition;
-    /** Scale (d3.js) used to generate the axis. */
-    scale?: AnyScale;
-    tickFormat?: ((d: NumericValue) => string) | ((d: StringValue) => string) | ((d: Date) => string) | ((d: ScaleValue) => string);
-    tickPadding?: number;
-    tickRotation?: number;
-    tickSize?: number;
-    tickValues?: TicksSpec;
-    tickRemodelling?: (tickValues: any[]) => any[];
-    /** Variant. */
-    variant?: AxisVariant;
-    /** X position. */
-    x?: number;
-    /** Y position. */
-    y?: number;
-    /** Chart width, used for horizontal grid. */
-    chartWidth?: number;
-    /** Chart height, used for horizontal grid. */
-    chartHeight?: number;
-    /** Section height, used for horizontal grid within a section. */
-    sectionHeight?: number;
-    /** Color used for tick values. */
-    textColor?: string;
-    /** Custom method to choose which tick value to color if not all. */
-    tickToColor?: (tick?: {
-        textX: number;
-        textY: number;
-        lineX: number;
-        lineY: number;
-        x: number;
-        y: number;
-        key: string;
-        value: ScaleValue;
-    }, index?: number) => boolean;
-}
-type StyledAxisProps = Omit<AxisProps, 'areXLabelsRotated' | 'size' | 'scale'> & {
-    $theme: Theme;
-    $color?: string;
-};
-
-declare const getAxisType: (position: AxisPosition) => "x" | "y";
-declare const Axis: Comp<AxisProps, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledAxis: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<AxisProps, "size" | "scale" | "areXLabelsRotated"> & {
-    $theme: Theme;
-    $color?: string | undefined;
-}, never>;
-
-type ChartAxesProps = {
-    /** String to Date. */
-    dateParser?: (value: string) => Date;
-    /** X axis variant. */
-    xAxisVariant?: AxisVariant;
-    /** X axis placement. */
-    xAxisPlacement?: 'bottom' | 'top' | 'both';
-    /** X axis tick format. */
-    xAxisTickFormat?: AxisProps['tickFormat'];
-    /** X axis tick values. */
-    xAxisTickPadding?: AxisProps['tickPadding'];
-    /** X axis tick values. */
-    xAxisTickRotation?: AxisProps['tickRotation'];
-    /** X axis tick values. */
-    xAxisTickSize?: AxisProps['tickSize'];
-    /** X axis tick values. */
-    xAxisTickValues?: AxisProps['tickValues'];
-    /** X axis min value. */
-    xAxisMinValue?: number | string;
-    /** X axis min value. */
-    xAxisMaxValue?: number | string;
-    /** Y axis tick remodelling. */
-    xAxisTickRemodelling?: (tickValues: any[]) => any[];
-    /** Y axis variant. */
-    yAxisVariant?: AxisVariant;
-    /** Y axis placement. */
-    yAxisPlacement?: 'right' | 'left' | 'both';
-    /** Y axis tick format. */
-    yAxisTickFormat?: AxisProps['tickFormat'];
-    /** Y axis tick values. */
-    yAxisTickPadding?: AxisProps['tickPadding'];
-    /** Y axis tick values. */
-    yAxisTickRotation?: AxisProps['tickRotation'];
-    /** Y axis tick values. */
-    yAxisTickSize?: AxisProps['tickSize'];
-    /** Y axis tick values. */
-    yAxisTickValues?: AxisProps['tickValues'];
-    /** Y axis min value. */
-    yAxisMinValue?: number | string;
-    /** Y axis min value. */
-    yAxisMaxValue?: number | string;
-    /** Y axis tick remodelling. */
-    yAxisTickRemodelling?: (tickValues: any[]) => any[];
-};
-
-type JSONValue = string | number | boolean | Date | {
-    [x: string]: JSONValue;
-} | Array<JSONValue> | undefined | null;
-type JSONObject = {
-    [x: string]: JSONValue;
-};
-type JSONArray = Array<JSONObject>;
-type Datum<T> = {
-    key: T;
-    value: number;
-    percent?: number;
-    cumulativeValue?: number;
-};
-type EmptyDatum<T> = {
-    key: T;
-    value?: number | null;
-    percent?: number;
-};
-type CategoryDim = string;
-type LinearDim = number | Date | string;
-type CategoricalOrLinearDim = CategoryDim | LinearDim;
-type TwoCategoryDim = [CategoricalOrLinearDim, CategoryDim | undefined | null];
-type CoordinatesCategoryDim = [number, number, CategoryDim | undefined | null];
-type CategoryDatum = Datum<CategoryDim>;
-type LinearDatum = Datum<LinearDim>;
-type TwoCategoryDatum = EmptyDatum<TwoCategoryDim>;
-type CoordinatesCategoryDatum = Datum<CoordinatesCategoryDim>;
-type CategoryData = CategoryDatum[];
-type LinearData = LinearDatum[];
-type TwoCategoryData = TwoCategoryDatum[];
-type CoordinatesCategoryData = CoordinatesCategoryDatum[];
-type ArcDatum = PieArcDatum<CategoryDatum>;
-type BarDatum = {
-    data: CategoryDatum | LinearDatum | Datum<TwoCategoryDim>;
-    height?: number;
-    width?: number;
-    category?: string | null;
-};
-type DotDatum = {
-    data: EmptyDatum<CoordinatesCategoryDim | TwoCategoryDim>;
-    x: string | number | Date;
-    y?: number | null;
-    r: number;
-    category?: string | null;
-};
-type LinePointDatum = {
-    x?: number | string | Date;
-    y?: number;
-    category?: string | null;
-};
-type Statistic = {
-    key: string;
-    value: number;
-    percent?: number;
-    min?: number;
-    max?: number;
-    values?: number[];
-    first?: number;
-    last?: number;
-    trending?: {
-        overall?: number;
-        latest?: number;
-    };
-};
-type Statistics = Statistic[];
-type LegendItemDatum = {
-    data: Statistic;
-};
-
-/** TOOLTIP */
-declare const TooltipVariant: {
-    none: string;
-    label: string;
-    value: string;
-    percent: string;
-    custom: string;
-};
-type TooltipVariant = ValueOf<typeof TooltipVariant>;
-/** LEGEND */
-declare const LegendVariant: {
-    readonly none: "none";
-    readonly label: "label";
-    readonly value: "value";
-    readonly percent: "percent";
-    readonly custom: "custom";
-};
-type LegendVariant = ValueOf<typeof LegendVariant>;
-declare const LabelVariant: {
-    readonly none: "none";
-    readonly label: "label";
-    readonly value: "value";
-    readonly percent: "percent";
-    readonly custom: "custom";
-};
-type LabelVariant = LegendVariant;
-
-type Coordinates = {
-    x: number;
-    y: number;
-};
-type NumericValue = {
-    valueOf(): number;
-};
-type StringValue = {
-    toString(): string;
-};
-type ScaleValue = NumericValue | StringValue | Date;
-interface ScaleLinear<Output> extends ScaleLinear$2<number, Output, never> {
-    type: 'linear';
-    stacked: boolean;
-}
-interface ScaleLog extends ScaleLogarithmic<number, number> {
-    type: 'log';
-}
-interface ScaleSymlog extends ScaleSymLog<number, number> {
-    type: 'symlog';
-}
-interface ScalePoint<Input extends StringValue> extends ScalePoint$1<Input> {
-    type: 'point';
-}
-interface ScaleBand<Input extends StringValue> extends ScaleBand$1<Input> {
-    type: 'band';
-}
-interface ScaleTime<Input> extends ScaleTime$1<Input, number> {
-    type: 'time';
-    useUTC: boolean;
-}
-interface ScaleTypeToScale<Input, Output> {
-    linear: Input extends NumericValue ? ScaleLinear<Output> : never;
-    log: Input extends NumericValue ? ScaleLog : never;
-    symlog: Input extends NumericValue ? ScaleSymlog : never;
-    point: Input extends StringValue ? ScalePoint<Input> : never;
-    band: Input extends StringValue ? ScaleBand<Input> : never;
-    time: Input extends StringValue | Date ? ScaleTime<Input> : never;
-}
-type Scale<Input, Output> = ScaleTypeToScale<Input, Output>[keyof ScaleTypeToScale<Input, Output>];
-type AnyScale = Scale<any, any>;
-type ScaleWithBandwidth = ScaleBand<any> | ScalePoint<any>;
-type TicksSpec = number | string | ScaleValue[] | CountableTimeInterval;
-
-type ChartDimensions = {
-    width: number;
-    height: number;
-};
-declare const ChartSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-};
-type ChartSize = ValueOf<typeof ChartSize>;
-type MarginProps = {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
-
-declare const ColorTheme: {
-    readonly default: "default";
-    readonly dark: "dark";
-    readonly darker: "darker";
-    readonly darkerer: "darkerer";
-    readonly light: "light";
-    readonly lighter: "lighter";
-    readonly lighterer: "lighterer";
-    readonly monochrome: "monochrome";
-};
-type ColorTheme = ValueOf<typeof ColorTheme>;
-type SuccessDangerColorTheme = {
-    success: string;
-    warning: string;
-    danger: string;
-    neutral?: string;
-};
-type CustomColorTheme = Record<string, string>;
-type ChartTheme = ColorTheme | SuccessDangerColorTheme | CustomColorTheme;
-
-interface UseColorProps {
-    /** Dataset to use to generate the chart. */
-    data: JSONArray;
-    /** Color palette to use. */
-    colorTheme: ChartTheme;
-    /** Name of the field that will be used to categorize the data. */
-    category: string | ((d: JSONObject) => string);
-    /** Theme */
-    theme: Theme;
-}
-declare const useColor: ({ data, colorTheme, category, theme }: UseColorProps) => ScaleOrdinal<string, string, never>;
-
-type SortingMethod = 'none' | 'asc-key' | 'desc-key' | 'asc-value' | 'desc-value' | string[] | ((a: CategoryDatum, b: CategoryDatum) => 1 | -1);
-declare const getSortingMethod: (sortingMethod: SortingMethod) => (a: CategoryDatum, b: CategoryDatum) => 1 | -1;
-declare const isValidDate: (value: string) => boolean;
-declare const mergeLegends: (arr1: Statistics, arr2: Statistics) => {
-    key: any;
-    value: any;
-}[];
-
-interface UseFormatCategoricalDataProps {
-    /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
-    data: CategoryData;
-    /** Color palette to use. */
-    colorTheme: ChartTheme;
-    /** Define how to sort categories. */
-    sortingMethod: SortingMethod;
-    /** Number of categories to use, the rest being put into a new category called "Others". */
-    caping?: number;
-    /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
-    others?: boolean | string;
-    /** Theme */
-    theme: Theme;
-}
-declare const useFormatCategoricalData: ({ data, caping, sortingMethod, others, colorTheme, theme, }: UseFormatCategoricalDataProps) => {
-    data: CategoryData;
-    colorScale: d3_scale.ScaleOrdinal<string, string, never>;
-};
-
-interface UseZoomProps {
-    svgRef: MutableRefObject<SVGSVGElement | undefined>;
-    scaleX: ScaleLinear$1<number, number>;
-    scaleY: ScaleLinear$1<number, number>;
-    defaultTransform?: {
-        k: number;
-        x: number;
-        y: number;
-    };
-    size?: any;
-    onZoom?: () => void;
-}
-declare const useZoom: ({ svgRef, scaleX, scaleY, defaultTransform, size, onZoom, }: UseZoomProps) => {
-    transform: {
-        k: number;
-        x: number;
-        y: number;
-    };
-    scaleX: ScaleLinear$1<number, number, never>;
-    scaleY: ScaleLinear$1<number, number, never>;
-};
-
-declare const monochrome = "#73C5EB";
-declare const empty = "#BFBFBF";
-declare const scheme: {
-    default: string[];
-    dark: string[];
-    darker: string[];
-    darkerer: string[];
-    light: string[];
-    lighter: string[];
-    lighterer: string[];
-    monochrome: string[];
-    empty: string[];
-};
-declare const successDangerScheme: {
-    success: string;
-    warning: string;
-    danger: string;
-    neutralLight: string;
-    neutralDark: string;
-};
-declare const getColorScale: ({ colorTheme, domain, isEmpty, theme, }: {
-    colorTheme: ChartTheme;
-    domain?: string[] | undefined;
-    isEmpty?: boolean | undefined;
-    theme: Theme;
-}) => ScaleOrdinal<string, string>;
-
-type AnchorProps = ComponentProps<'a'> & {
-    as?: any;
-};
-/**
- * Component props.
- */
-interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale'> {
-    /** Anchor props to use when the component is a navigation link. */
-    anchorProps?: AnchorProps;
-    /** Color of the DataPoint. */
-    color?: string;
-    /** Data. Also state to which the component should end the animation, if any. */
-    data: T;
-    /** Entire dataset in which the data point is a part of. */
-    dataset: any[];
-    /** Disable animations. */
-    disableAnimations?: boolean;
-    /** Group of data in which the data point is a part of. */
-    groupedData?: any[];
-    /** Id. Used for accessibility. */
-    id?: string;
-    /** Position in the list of siblings. Used for placement and selection. */
-    index?: number;
-    /** Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. */
-    isSelected?: boolean;
-    /** Method modifying the label before displaying it. */
-    labelDecorator?: (data: T, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method called when a click or keydown occurs on the component. */
-    onClick?: (data: T, dataset: any[]) => void;
-    /** State from which the component should start the animation, if any. */
-    previousData?: T;
-    /** Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. */
-    role?: 'img' | 'button' | 'link' | 'option';
-    /** Theme. */
-    theme?: Theme;
-    /** Tooltip variant. */
-    tooltipVariant?: TooltipVariant;
-    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
-    tooltipDecorator?: (data: T, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }, dataset?: any[], groupedData?: any[]) => string | ReactElement;
-    /** Default placement of the tooltip. */
-    tooltipProps?: Partial<Omit<TooltipProps, 'ref'>>;
-}
-type StyledDataPointProps = Omit<DataPointProps<any>, 'data' | 'dataset'> & {
-    $clickable: boolean;
-};
-
-declare const DataPoint: Comp<DataPointProps<any>, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledDataPoint: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
-    $clickable: boolean;
-}, never>;
-
-/**
- * Component props.
- */
-interface ArcProps extends DataPointProps<ArcDatum> {
-    /** Arc generator used to determine the width of the arc. */
-    createArc: Arc$1<any, ArcDatum>;
-    /** Whether the arc has a stroke or not. Used to create a gap between two siblings. */
-    hasStroke?: boolean;
-}
-type StyledArcProps = StyledDataPointProps & Omit<ArcProps, 'createArc'> & {
-    $hasStroke: ArcProps['hasStroke'];
-    $theme: Theme;
-};
-
-declare const Arc: Comp<ArcProps, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledArc: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
-    $clickable: boolean;
-} & Omit<ArcProps, "createArc"> & {
-    $hasStroke: boolean | undefined;
-    $theme: Theme;
-}, never>;
-
-/**
- * Component props.
- */
-interface ArcsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<ArcProps, 'id' | 'disableAnimations' | 'labelDecorator' | 'onClick' | 'role' | 'hasStroke' | 'tooltipDecorator' | 'tooltipVariant'> {
-    /** Arc props. */
-    arcs: Omit<ArcProps, 'ref'>[];
-    /** Whether arcs have internal labels or not. */
-    hasLabels?: boolean;
-    /** Native HTML props to forward to each slice. */
-    sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
-}
-type StyledArcsProps = Omit<ArcsProps, 'arcs'> & {};
-
-declare const Arcs: Comp<ArcsProps, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledArcs: styled_components.StyledComponent<"g", any, Omit<ArcsProps, "arcs">, never>;
-
-/**
- * Component variant.
- */
-declare const BarOrientation: {
-    horizontal: string;
-    vertical: string;
-};
-type BarOrientation = ValueOf<typeof BarOrientation>;
-declare const BarDirection: {
-    up: string;
-    down: string;
-};
-type BarDirection = ValueOf<typeof BarDirection>;
-/**
- * Component props.
- */
-interface BarProps extends DataPointProps<BarDatum> {
-    /** Gap between two siblings. */
-    gap?: number;
-    /** Height of the bar in horizontal orientation. */
-    height?: number;
-    /** Maximum height of the bar. */
-    maxHeight?: number;
-    /** Orientation of the bar. */
-    orientation?: BarOrientation;
-    /** Direction of the bar, works only with vertical orientation. */
-    direction?: BarOrientation;
-    /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */
-    scale: ScaleLinear$1<number, number, never>;
-    /** A scale defined over a numeric/time/ordinal domain used to determine the position of the bar. */
-    scalePosition: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
-    /** Width of the bar in vertical orientation. */
-    width?: number;
-    /** Min width of the bar in vertical orientation. */
-    minWidth?: number;
-}
-type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale' | 'scalePosition'> & {
-    $theme: Theme;
-};
-
-declare const Bar: Comp<BarProps, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
-    $clickable: boolean;
-} & Omit<BarProps, "scale" | "scalePosition"> & {
-    $theme: Theme;
-}, never>;
-
-/**
- * Component props.
- */
-interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, ContainerProps {
-    /** Native HTML props to pass to the chart. */
-    chartProps?: ComponentProps<'div'>;
-    /** Ref to the chart. */
-    chartRef?: RefObject<HTMLDivElement>;
-    /** Description. */
-    description?: string | ReactElement;
-    /** Whether the description should be placed below the title or below the chart. */
-    descriptionPosition?: 'belowTitle' | 'belowChart';
-    /** Disable animations. */
-    disableAnimations?: boolean;
-    /** Id. */
-    id?: string;
-    /** Method called when the Reset button is displayed (defines whether or not the button should be displayed). */
-    onReset?: () => void;
-    /** Title. */
-    title?: string | ReactElement;
-    /** Theme. */
-    theme?: Theme;
-    /** Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. */
-    descriptionForAssistiveTechnology?: string;
-    /** Whether the chart is static or interactive. */
-    mode?: string;
-    /** Small text explaining which kind of chart is presenting and what's its basic composition. */
-    definition?: string;
-    /** Small text explaining the basic composition of the x-axis, if any. */
-    xAxisDefinition?: string;
-    /** Small text explaining the basic composition of the y-axis, if any. */
-    yAxisDefinition?: string;
-    /** Small text explaining how the chart is interactive, if any. */
-    interactionExplanation?: string;
-    /** Table representation of the chart. */
-    dataTableRepresentation?: {
-        header: ReactElement;
-        body: ReactElement;
-    };
-}
-type StyledChartContainerProps = Omit<ChartContainerProps, 'theme'> & {
-    $theme: Theme;
-};
-
-declare const ChartContainer: Comp<ChartContainerProps, HTMLDivElement>;
-declare const ChartContainerTitle: Comp<Pick<ChartContainerProps, 'onReset'> & ComponentProps<'div'>, HTMLDivElement>;
-declare const ChartContainerDescription: Comp<ComponentProps<'div'>, HTMLDivElement>;
-
-/**
- * Component style.
- */
-declare const StyledChartContainer: styled_components.StyledComponent<"div", any, Omit<ChartContainerProps, "theme"> & {
-    $theme: Theme;
-}, never>;
-declare const StyledChartContainerTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, Omit<ChartContainerProps, "theme"> & {
-    $theme: Theme;
-}, never>;
-declare const StyledChartContainerCaption: styled_components.StyledComponent<"p", any, Omit<StyledChartContainerProps, "onReset">, never>;
-
-/**
- * Component props.
- */
-interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color' | 'data' | 'dataset' | 'id' | 'index' | 'isSelected' | 'labelDecorator' | 'onClick' | 'previousData' | 'role' | 'tooltipVariant'>, Omit<ComponentProps<'li'>, 'onClick' | 'role'> {
-    /** Method modifying what's displayed within the legend when the variant is "custom". */
-    legendDecorator?: (datum: LegendItemDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Variant. */
-    variant?: LegendVariant;
-}
-
-/**
- * Component props.
- */
-interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick' | 'children'>, ContainerProps {
-    /** Children */
-    children?: ReactElement | ReactElement[] | ((data: (Statistic & {
-        color: string;
-    })[], total?: number) => ReactElement);
-    /** Data. */
-    data?: (Statistic & {
-        color: string;
-    })[];
-    /** Method to determine whether a legend is selected or not. */
-    isLegendItemSelected?: (datum: LegendItemDatum) => void;
-    /** Method to override the data labels. */
-    labelDecorator?: (datum: LegendItemDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method modifying what's displayed within the legend when the variant is "custom". */
-    legendDecorator?: (datum: LegendItemDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method to be called on a click on a legend item. */
-    onLegendItemClick?: (datum: LegendItemDatum, data: LegendItemDatum[]) => void;
-    /** LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. */
-    legendItemRole?: LegendItemProps['role'];
-    /** Variant. */
-    variant?: LegendVariant;
-}
-type StyledLegendProps = Omit<LegendProps, 'data'> & {
-    $width?: LegendProps['width'];
-};
-
-declare const Legend: Comp<LegendProps, HTMLUListElement>;
-
-/**
- * Component style.
- */
-declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
-    $width?: string | number | undefined;
-}, never>;
-
-type FormatMessage = (key: string, variables?: {
-    [key: string]: any;
-}) => string;
-
-/**
- * Component's labels variant.
- */
-declare const BarChartLegendVariant: {
-    readonly none: "none";
-    readonly externalLabel: "externalLabel";
-    readonly externalLabelValue: "externalLabelValue";
-    readonly externalLabelPercent: "externalLabelPercent";
-    readonly custom: "custom";
-};
-type BarChartLegendVariant = ValueOf<typeof BarChartLegendVariant>;
-interface LocaleText$3 {
-    emptyChartText: string;
-}
-type BarChartDimensions = ChartDimensions & {
-    fontSize: number;
-    minWidth?: number;
-    maxWidth?: number;
-};
-type XScaleType = 'number' | 'Date' | 'dateString' | undefined;
-/**
- * Component props.
- */
-interface BarChartProps extends ChartContainerProps, ChartAxesProps {
-    /** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */
-    areXLabelsRotated?: boolean;
-    /** Native HTML props to forward to each bar. */
-    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale' | 'direction'> & {
-        minWidth?: number;
-    };
-    /** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */
-    barRole?: BarProps['role'];
-    /** Number of categories to use, the rest being put into a new category called "Others". */
-    caping?: number;
-    /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status.  */
-    colorTheme?: ChartTheme;
-    /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
-    data?: CategoryData | LinearData | TwoCategoryData;
-    /** Data type override to skip data type inferrence. */
-    dataType?: 'TwoCategoryData' | 'LinearData' | 'CategoryData';
-    /**
-     * Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down".
-     * They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop.
-     */
-    direction?: BarDirection;
-    /** Component to use if the chart is empty (replacing the default one). */
-    emptyComponent?: ReactNode;
-    /** Method used to define the anchor props to use when the bar is a navigation link. */
-    getBarAnchorProps?: (datum: BarDatum) => AnchorProps;
-    /** Method to determine whether a bar is selected or not. */
-    isBarSelected?: (datum: BarDatum) => void;
-    /** Method to override the data labels. */
-    labelDecorator?: (datum: BarDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
-    legendDecorator?: (datum: BarDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
-    legendVariant?: BarChartLegendVariant;
-    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
-        extraLegendItems?: Statistics;
-    };
-    /** Labels and texts. */
-    localeText?: LocaleText$3;
-    /** Custom margins, used to give more space for axes labels and legend for instance. */
-    margins?: MarginProps;
-    /** Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. */
-    onBarClick?: (datum: BarDatum, data: BarDatum[]) => void;
-    /** Orientation of the bar. */
-    orientation?: BarOrientation;
-    /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
-    others?: boolean | string;
-    /** BarChart size. */
-    size?: ChartSize | BarChartDimensions;
-    /** Define how to sort categories. */
-    sortingMethod?: SortingMethod;
-    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
-    tooltipDecorator?: (data: BarDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }, dataset?: ComputedBarProps[], groupedData?: ComputedBarProps[]) => string | ReactElement;
-    /** Tooltip variant. */
-    tooltipVariant?: TooltipVariant | 'grouped';
-    /** Theme. */
-    theme?: Theme;
-    /** X-scale type override to skip x-scale type inferrence. */
-    xScaleType?: XScaleType;
-    /**
-     * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
-     * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset)
-     */
-    xAxisStartDateOffset?: number;
-    /**
-     * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
-     * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset)
-     */
-    xAxisEndDateOffset?: number;
-    /** If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. */
-    yScaleLogBase?: number;
-}
-type StyledBarChartProps = BarChartProps & {};
-interface RenderedLinearBarChartProps extends Omit<BarChartProps, 'data' | 'caping' | 'orientation' | 'others'> {
-    data: LinearData | TwoCategoryData;
-}
-interface ComputedBarProps {
-    category: string;
-    key: LinearDim;
-    value: number;
-    cumulativeValue: number;
-}
-interface BarChartState extends ChartAxesProps, Required<Pick<RenderedLinearBarChartProps, 'margins'>>, Pick<RenderedLinearBarChartProps, 'barProps' | 'barRole' | 'colorTheme' | 'direction' | 'disableAnimations' | 'getBarAnchorProps' | 'id' | 'isBarSelected' | 'labelDecorator' | 'onBarClick' | 'tooltipVariant' | 'tooltipDecorator'> {
-    bars: ComputedBarProps[];
-    barWidth: number;
-    cache: React.MutableRefObject<LinearData | TwoCategoryData | undefined>;
-    categories: string[];
-    chartHeight: number;
-    chartWidth: number;
-    colorScale?: ScaleOrdinal<string, string>;
-    format: FormatMessage;
-    gap: number;
-    hasCategory: boolean;
-    scaleX: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
-    scaleY: ScaleLinear$1<number, number>;
-    sectionHeight?: number;
-    xScaleType?: XScaleType;
-}
-interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role' | 'color'> {
-    /** Starting point in percentage of the chart height. */
-    from?: number;
-    /** Ending point in percentage of the chart height. */
-    to?: number;
-    /** Color. */
-    color?: 'red' | 'green' | {
-        textColor: string;
-        backgroundColor?: string;
-    };
-    /** Section title */
-    title?: string;
-    /** Title position relative to section */
-    titlePosition?: 'left' | 'center' | 'right';
-    scaleX?: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
-    scaleY?: ScaleLinear$1<number, number, never>;
-    direction?: BarDirection;
-}
-interface StyledBarChartSectionProps {
-    $theme: Theme;
-    $textColor: string;
-}
-interface BarChartBarsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'> {
-    category?: string;
-}
-type StyledBarChartBarsProps = Omit<BarChartBarsProps, 'category'> & {};
-
-declare const BaseBarChart: Comp<BarChartProps, HTMLDivElement>;
-declare const BarChart: Comp<BarChartProps, HTMLDivElement> & {
-    Section: Comp<BarChartSectionProps, SVGGElement>;
-    Bars: Comp<BarChartBarsProps, SVGGElement>;
-    Axis: Comp<AxisProps, SVGGElement>;
-    GroupedTooltip: React$1.FC<{
-        dateFormatter: (date: Date) => string;
-        categories: string[];
-        categoryDecorator?: ((category: string) => string) | undefined;
-        categoryColor: (category: string) => string;
-        datum: BarDatum;
-        groupedData: ComputedBarProps[] | undefined;
-    }>;
-    Legend: Comp<LegendProps, HTMLUListElement>;
-    LegendItem: Comp<LegendItemProps, HTMLLIElement>;
-    Title: Comp<Pick<ChartContainerProps, "onReset"> & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    Description: Comp<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HTMLDivElement>;
-};
-
-/**
- * Component style.
- */
-declare const StyledBarChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, BarChartProps, never>;
-declare const StyledBarChartSection: styled_components.StyledComponent<"g", any, StyledBarChartSectionProps, never>;
-declare const StyledBarChartBars: styled_components.StyledComponent<"g", any, Omit<BarChartBarsProps, "category">, never>;
-declare const StyledBarChartEmptyText: styled_components.StyledComponent<"div", any, {
-    $maxWidth: number;
-    $textSize: number;
-    $theme: Theme;
-}, never>;
-
-/**
- * Component's variant.
- */
-declare const DotVariant: {
-    readonly plain: "plain";
-    readonly hollow: "hollow";
-};
-type DotVariant = ValueOf<typeof DotVariant>;
-/**
- * Component props.
- */
-interface DotProps extends DataPointProps<DotDatum> {
-    /** A scale defined over a numeric/time/ordinal domain used to determine the x position based on the coordinates. */
-    scaleX: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
-    /** A linear continuous scale defined over a numeric domain used to determine the y position based on the coordinates. */
-    scaleY: ScaleLinear$1<number, number, never>;
-    /** Variant. */
-    variant?: DotVariant;
-}
-type StyledDotProps = StyledDataPointProps & Omit<DotProps, 'scaleX' | 'scaleY'> & {
-    $variant: DotProps['variant'];
-    $theme: Theme;
-};
-
-declare const Dot: Comp<DotProps, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledDot: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
-    $clickable: boolean;
-} & Omit<DotProps, "scaleX" | "scaleY"> & {
-    $variant: DotVariant | undefined;
-    $theme: _redsift_design_system.Theme;
-}, never>;
-
-/**
- * Component props.
- */
-interface LineProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<DotProps, 'id' | 'isSelected' | 'role'> {
-    /** Line generator used to determine the path of the line. */
-    createLine: Line$1<LinePointDatum>;
-    /** Points used to compute the line path. */
-    data: LinePointDatum[];
-    /** Disable animations. */
-    disableAnimations?: boolean;
-    /** Previous data used for animation. */
-    previousData?: LinePointDatum[];
-}
-type StyledLineProps = Omit<LineProps, 'createLine' | 'data'>;
-
-declare const Line: Comp<LineProps, SVGGElement>;
-
-/**
- * Component style.
- */
-declare const StyledLine: styled_components.StyledComponent<"g", any, StyledLineProps, never>;
-
-/**
- * Component's labels variant.
- */
-declare const LineChartLegendVariant: {
-    readonly none: "none";
-    readonly externalLabel: "externalLabel";
-    readonly externalLabelValue: "externalLabelValue";
-    readonly externalLabelPercent: "externalLabelPercent";
-    readonly custom: "custom";
-};
-type LineChartLegendVariant = ValueOf<typeof LineChartLegendVariant>;
-interface LocaleText$2 {
-    emptyChartText: string;
-}
-type LineChartDimensions = ChartDimensions & {
-    fontSize: number;
-};
-/**
- * Component props.
- */
-interface LineChartProps extends ChartContainerProps, ChartAxesProps {
-    /** Dataset to use to generate the chart. */
-    data?: TwoCategoryData;
-    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
-    dotRole?: DotProps['role'];
-    /** Component to use if the chart is empty (replacing the default one). */
-    emptyComponent?: ReactNode;
-    /** Method used to define the anchor props to use when the dot is a navigation link. */
-    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
-    /** Method to determine whether a dot is selected or not. */
-    isDotSelected?: (datum: DotDatum) => boolean | undefined;
-    /** Method to override the data point labels. */
-    labelDecorator?: (datum: DotDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
-    legendDecorator?: (datum: DotDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
-    legendVariant?: LineChartLegendVariant;
-    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
-        extraLegendItems?: Statistics;
-    };
-    /** Labels and texts. */
-    localeText?: LocaleText$2;
-    /** Custom margins, used to give more space for axes labels and legend for instance. */
-    margins?: MarginProps;
-    /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
-    onDotClick?: (datum: DotDatum) => void;
-    /** LineChart size. */
-    size?: ChartSize | LineChartDimensions;
-    /** Define how to sort categories. */
-    sortingMethod?: SortingMethod;
-    /** Reference to the SVG tag. */
-    svgRef?: MutableRefObject<SVGSVGElement>;
-    /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
-    colorTheme?: ChartTheme;
-    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
-    tooltipDecorator?: (data: DotDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Tooltip variant. */
-    tooltipVariant?: TooltipVariant;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledLineChartProps = LineChartProps & {};
-
-declare const LineChart: Comp<LineChartProps, HTMLDivElement>;
-
-/**
- * Component style.
- */
-declare const StyledLineChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, LineChartProps, never>;
-declare const StyledLineChartEmptyText: styled_components.StyledComponent<"div", any, {
-    $maxWidth: number;
-    $textSize: number;
-    $theme: Theme;
-}, never>;
-
-/**
- * Component variant.
- */
-declare const PieChartVariant: {
-    readonly plain: "plain";
-    readonly spaced: "spaced";
-    readonly donut: "donut";
-    readonly spacedDonut: "spacedDonut";
-};
-type PieChartVariant = ValueOf<typeof PieChartVariant>;
-/**
- * Component's labels variant.
- */
-declare const PieChartLegendVariant: {
-    readonly none: "none";
-    readonly internal: "internal";
-    readonly externalLabel: "externalLabel";
-    readonly externalLabelValue: "externalLabelValue";
-    readonly externalLabelPercent: "externalLabelPercent";
-    readonly custom: "custom";
-};
-type PieChartLegendVariant = ValueOf<typeof PieChartLegendVariant>;
-interface LocaleText$1 {
-    emptyChartText: string;
-}
-type PieChartDimensions = ChartDimensions & {
-    smallFontSize: number;
-    fontSize: number;
-    innerRadius: number;
-};
-/**
- * Component props.
- */
-interface PieChartProps extends ChartContainerProps {
-    /** Number of categories to use, the rest being put into a new category called "Others". */
-    caping?: number;
-    /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
-    data?: CategoryData;
-    /** Component to use if the chart is empty (replacing the default one). */
-    emptyComponent?: ReactNode;
-    /** Method used to define the anchor props to use when the slice is a navigation link. */
-    getSliceAnchorProps?: (datum: ArcDatum) => AnchorProps;
-    /** Whether the pie or donut is cut in half or not. */
-    isHalf?: boolean;
-    /** Method to determine whether a slice is selected or not. */
-    isSliceSelected?: (datum: ArcDatum) => boolean | undefined;
-    /** Method to override the data labels. */
-    labelDecorator?: (datum: ArcDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
-    legendDecorator?: (datum: ArcDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
-    legendVariant?: PieChartLegendVariant;
-    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant'> & {
-        extraLegendItems?: Statistics;
-    };
-    /** Labels and texts. */
-    localeText?: LocaleText$1;
-    /** Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. */
-    onSliceClick?: (datum: ArcDatum) => void;
-    /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
-    others?: boolean | string;
-    /** PieChart size. */
-    size?: ChartSize | PieChartDimensions;
-    /** Native HTML props to forward to each slice. */
-    sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
-    /** Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. */
-    sliceRole?: ArcProps['role'];
-    /** Define how to sort categories. */
-    sortingMethod?: SortingMethod;
-    /** Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. */
-    middleText?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
-    /** Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. */
-    subtext?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
-    /** Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. */
-    text?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
-    /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status.  */
-    colorTheme?: ChartTheme;
-    /** PieChart variant. */
-    variant?: PieChartVariant;
-    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
-    tooltipDecorator?: (data: ArcDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Tooltip variant. */
-    tooltipVariant?: TooltipVariant;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledPieChartProps = PieChartProps & {};
-
-declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
-
-/**
- * Component style.
- */
-declare const StyledPieChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, PieChartProps, never>;
-declare const StyledPieChartCenterText: styled_components.StyledComponent<"div", any, {
-    $maxWidth: number;
-    $textSize: number;
-    $smallTextSize: number;
-    $theme: Theme;
-}, never>;
-declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div", any, {
-    $maxWidth: number;
-    $textSize: number;
-    $isDonut: boolean;
-    $theme: Theme;
-}, never>;
-
-/**
- * Component variant.
- */
-declare const ScatterPlotVariant: {
-    readonly default: "default";
-    readonly gridded: "gridded";
-};
-type ScatterPlotVariant = ValueOf<typeof ScatterPlotVariant>;
-/**
- * Component's labels variant.
- */
-declare const ScatterPlotLegendVariant: {
-    readonly none: "none";
-    readonly externalLabel: "externalLabel";
-    readonly externalLabelValue: "externalLabelValue";
-    readonly externalLabelPercent: "externalLabelPercent";
-    readonly custom: "custom";
-};
-type ScatterPlotLegendVariant = ValueOf<typeof ScatterPlotLegendVariant>;
-interface LocaleText {
-    emptyChartText: string;
-}
-type ScatterPlotDimensions = ChartDimensions & {
-    fontSize: number;
-};
-/**
- * Component props.
- */
-interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
-    /** Dataset to use to generate the chart. */
-    data?: CoordinatesCategoryData;
-    /** Method used to define the anchor props to use when the dot is a navigation link. */
-    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
-    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
-    dotRole?: DotProps['role'];
-    /** Component to use if the chart is empty (replacing the default one). */
-    emptyComponent?: ReactNode;
-    /** Whether the Control Keys panel is displayed or not. */
-    hideControlKeyPanel?: boolean;
-    /** Whether the scatter plot dots are selectable using brush or not. */
-    isBrushable?: boolean;
-    /** Method to determine whether a dot is selected or not. */
-    isDotSelected?: (datum: DotDatum) => boolean | undefined;
-    /** Method to override the data point labels. */
-    labelDecorator?: (datum: DotDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
-    legendDecorator?: (datum: DotDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
-    legendVariant?: ScatterPlotLegendVariant;
-    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
-        extraLegendItems?: Statistics;
-    };
-    /** Labels and texts. */
-    localeText?: LocaleText;
-    /** Custom margins, used to give more space for axes labels and legend for instance. */
-    margins?: MarginProps;
-    /** Method called on brush. */
-    onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear$1<number, number>, scaleY: ScaleLinear$1<number, number>) => void;
-    /** Method called on brush end. */
-    onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX?: ScaleLinear$1<number, number>, scaleY?: ScaleLinear$1<number, number>) => void;
-    /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
-    onDotClick?: (datum: DotDatum) => void;
-    /** ScatterPlot size. */
-    size?: ChartSize | ScatterPlotDimensions;
-    /** Define how to sort categories. */
-    sortingMethod?: SortingMethod;
-    /** Reference to the SVG tag. */
-    svgRef?: MutableRefObject<SVGSVGElement>;
-    /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
-    colorTheme?: ChartTheme;
-    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
-    tooltipDecorator?: (data: DotDatum, props?: {
-        index?: number;
-        isSelected?: boolean;
-        color?: string;
-    }) => string | ReactElement;
-    /** Tooltip variant. */
-    tooltipVariant?: TooltipVariant;
-    /** Variant. */
-    variant?: ScatterPlotVariant;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledScatterPlotProps = ScatterPlotProps & {};
-
-declare const ScatterPlot: Comp<ScatterPlotProps, HTMLDivElement>;
-
-/**
- * Component style.
- */
-declare const StyledScatterPlot: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, ScatterPlotProps, never>;
-declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div", any, {
-    $maxWidth: number;
-    $textSize: number;
-    $theme: Theme;
-}, never>;
-
-export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartBarsProps, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarChartSectionProps, BarChartState, BarDatum, BarDirection, BarOrientation, BarProps, BaseBarChart, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerDescription, ChartContainerProps, ChartContainerTitle, ChartDimensions, ChartSize, ChartTheme, ColorTheme, ComputedBarProps, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, RenderedLinearBarChartProps, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartBars, StyledBarChartBarsProps, StyledBarChartEmptyText, StyledBarChartProps, StyledBarChartSection, StyledBarChartSectionProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getAxisType, getColorScale, getSortingMethod, isValidDate, mergeLegends, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { empty, getColorScale, monochrome, scheme, successDangerScheme } from './scheme.js';
+export { SortingMethod, getSortingMethod, isValidDate, mergeLegends } from './utils/index.js';
+export { UseBrushProps, useBrush } from './hooks/useBrush.js';
+export { UseColorProps, useColor } from './hooks/useColor.js';
+export { UseFormatCategoricalDataProps, useFormatCategoricalData } from './hooks/useFormatCategoricalData.js';
+export { UseZoomProps, useZoom } from './hooks/useZoom.js';
+export { ChartAxesProps } from './types/axis.js';
+export { ArcDatum, BarDatum, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, Datum, DotDatum, EmptyDatum, JSONArray, JSONObject, JSONValue, LegendItemDatum, LinePointDatum, LinearData, LinearDatum, LinearDim, Statistic, Statistics, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim } from './types/data.js';
+export { LabelVariant, LegendVariant, TooltipVariant } from './types/legend.js';
+export { AnyScale, Coordinates, NumericValue, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, StringValue, TicksSpec } from './types/scale.js';
+export { ChartDimensions, ChartSize, MarginProps } from './types/size.js';
+export { ChartTheme, ColorTheme, CustomColorTheme, SuccessDangerColorTheme } from './types/theme.js';
+export { Arc } from './components/Arc/Arc.js';
+export { ArcProps, StyledArcProps } from './components/Arc/types.js';
+export { StyledArc } from './components/Arc/styles.js';
+export { Arcs } from './components/Arcs/Arcs.js';
+export { ArcsProps, StyledArcsProps } from './components/Arcs/types.js';
+export { StyledArcs } from './components/Arcs/styles.js';
+export { Axis, getAxisType } from './components/Axis/Axis.js';
+export { AxisPosition, AxisProps, AxisVariant, StyledAxisProps } from './components/Axis/types.js';
+export { StyledAxis } from './components/Axis/styles.js';
+export { Bar } from './components/Bar/Bar.js';
+export { BarDirection, BarOrientation, BarProps, StyledBarProps } from './components/Bar/types.js';
+export { StyledBar } from './components/Bar/styles.js';
+export { BarChart, BaseBarChart } from './components/BarChart/BarChart.js';
+export { BarChartBarsProps, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarChartSectionProps, BarChartState, ComputedBarProps, RenderedLinearBarChartProps, StyledBarChartBarsProps, StyledBarChartProps, StyledBarChartSectionProps, XScaleType } from './components/BarChart/types.js';
+export { StyledBarChart, StyledBarChartBars, StyledBarChartEmptyText, StyledBarChartSection } from './components/BarChart/styles.js';
+export { ChartContainer, ChartContainerDescription, ChartContainerTitle } from './components/ChartContainer/ChartContainer.js';
+export { ChartContainerProps, StyledChartContainerProps } from './components/ChartContainer/types.js';
+export { StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle } from './components/ChartContainer/styles.js';
+export { DataPoint } from './components/DataPoint/DataPoint.js';
+export { AnchorProps, DataPointProps, StyledDataPointProps } from './components/DataPoint/types.js';
+export { StyledDataPoint } from './components/DataPoint/styles.js';
+export { Dot } from './components/Dot/Dot.js';
+export { DotProps, DotVariant, StyledDotProps } from './components/Dot/types.js';
+export { StyledDot } from './components/Dot/styles.js';
+export { Legend } from './components/Legend/Legend.js';
+export { LegendProps, StyledLegendProps } from './components/Legend/types.js';
+export { StyledLegend } from './components/Legend/styles.js';
+export { Line } from './components/Line/Line.js';
+export { LineProps, StyledLineProps } from './components/Line/types.js';
+export { StyledLine } from './components/Line/styles.js';
+export { LineChart } from './components/LineChart/LineChart.js';
+export { LineChartDimensions, LineChartLegendVariant, LineChartProps, StyledLineChartProps } from './components/LineChart/types.js';
+export { StyledLineChart, StyledLineChartEmptyText } from './components/LineChart/styles.js';
+export { PieChart } from './components/PieChart/PieChart.js';
+export { PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, StyledPieChartProps } from './components/PieChart/types.js';
+export { StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText } from './components/PieChart/styles.js';
+export { ScatterPlot } from './components/ScatterPlot/ScatterPlot.js';
+export { ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, StyledScatterPlotProps } from './components/ScatterPlot/types.js';
+export { StyledScatterPlot, StyledScatterPlotEmptyText } from './components/ScatterPlot/styles.js';