@juspay/blend-design-system 0.0.35 → 0.0.36-beta.0

package/dist/components/Charts/chart.tokens.d.ts

@@ -1,7 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-export type ChartState = 'default' | 'hover' | 'active';
+export type ChartState = 'default' | 'hover' | 'active' | 'total';
 export type ChartHeight = 'default' | 'fullscreen' | 'small';
 export type ChartTokensType = {
     border: CSSObject['border'];

package/dist/components/Charts/renderChart.d.ts

@@ -1,2 +1,2 @@
 import { RenderChartProps } from './types';
-export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, tooltip, noData, height, CustomizedDot, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, tooltip, noData, height, CustomizedDot, lineSeriesKeys, onKeyClick, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/types.d.ts

@@ -32,6 +32,7 @@ export declare enum ChartLegendPosition {
 export declare enum ChartType {
     LINE = "line",
     BAR = "bar",
+    LINE_BAR = "lineBar",
     PIE = "pie",
     SCATTER = "scatter",
     AREA = "area",
@@ -138,6 +139,8 @@ export type RenderChartProps = {
     noData?: NoDataProps;
     height?: number | string;
     CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>;
+    lineSeriesKeys?: string[];
+    onKeyClick?: (key: string) => void;
 };
 export type CoreChartProps = {
     chartType?: ChartType;
@@ -156,6 +159,7 @@ export type CoreChartProps = {
     hoveredKey?: string | null;
     onHoveredKeyChange?: (key: string | null) => void;
     selectedKeys?: string[];
+    lineSeriesKeys?: string[];
     enableHover?: boolean;
 };
 export type ChartsSkeletonProps = {
@@ -193,6 +197,7 @@ export type ChartsProps = {
         total?: string;
     }[];
     CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>;
+    lineSeriesKeys?: string[];
 };
 export type FlattenedDataPoint = {
     name: string;

package/dist/components/ChartsV2/ChartContainerV2.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2ContainerProps } from './chartV2.types';
+declare const ChartContainerV2: {
+    ({ children }: ChartV2ContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartContainerV2;

package/dist/components/ChartsV2/ChartHeaderV2.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2HeaderProps } from './chartV2.types';
+declare const ChartHeaderV2: {
+    ({ children }: ChartV2HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartHeaderV2;

package/dist/components/ChartsV2/ChartV2.d.ts

@@ -0,0 +1,3 @@
+import { ChartV2Props } from './chartV2.types';
+declare const ChartV2: import('react').ForwardRefExoticComponent<Omit<ChartV2Props, "ref"> & import('react').RefAttributes<import('highcharts-react-official').HighchartsReactRefObject>>;
+export default ChartV2;

package/dist/components/ChartsV2/ChartV2Fullscreen.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type ChartV2FullscreenControls = {
+    isFullscreen: boolean;
+    enterFullscreen: () => void;
+    exitFullscreen: () => void;
+};
+export interface ChartV2FullscreenProps {
+    children: (controls: ChartV2FullscreenControls) => ReactNode;
+}
+declare const ChartV2Fullscreen: {
+    ({ children }: ChartV2FullscreenProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartV2Fullscreen;

package/dist/components/ChartsV2/ChartV2Legend.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2LegendProps } from './chartV2.types';
+declare const ChartV2Legend: {
+    ({ chartRef, chartRefs, customLegendItems, renderItem, layout, }: ChartV2LegendProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default ChartV2Legend;

package/dist/components/ChartsV2/ChartV2NoData.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2NoDataProps } from './chartV2.types';
+declare const ChartV2NoData: {
+    ({ title, subtitle, slot, button, }: ChartV2NoDataProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartV2NoData;

package/dist/components/ChartsV2/ChartV2Skeleton.d.ts

@@ -0,0 +1,10 @@
+import { SkeletonVariant } from '../Skeleton';
+declare const ChartV2Skeleton: {
+    ({ skeletonVariant, height, isExpanded, }: {
+        skeletonVariant?: SkeletonVariant;
+        height?: number;
+        isExpanded?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartV2Skeleton;

package/dist/components/ChartsV2/chartV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveChartV2Tokens } from './chartV2.tokens';
+export declare const getChartV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveChartV2Tokens;

package/dist/components/ChartsV2/chartV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveChartV2Tokens } from './chartV2.tokens';
+export declare const getChartV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveChartV2Tokens;

package/dist/components/ChartsV2/chartV2.sankey.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ChartsV2/chartV2.tokens.d.ts

@@ -0,0 +1,102 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type ChartV2TokensType = {
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    backgroundColor: CSSObject['backgroundColor'];
+    header: {
+        padding: {
+            top: CSSObject['padding'];
+            right: CSSObject['padding'];
+            bottom: CSSObject['padding'];
+            left: CSSObject['padding'];
+        };
+        backgroundColor: CSSObject['backgroundColor'];
+        borderBottom: CSSObject['borderBottom'];
+    };
+    legends: {
+        gap: CSSObject['gap'];
+        legendItem: {
+            gap: CSSObject['gap'];
+            shape: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                borderRadius: CSSObject['borderRadius'];
+            };
+            text: {
+                gap: CSSObject['gap'];
+                name: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                    color: CSSObject['color'];
+                };
+                value: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                    color: CSSObject['color'];
+                };
+                separator: {
+                    color: CSSObject['color'];
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                };
+            };
+        };
+    };
+    chart: {
+        backgroundColor: CSSObject['backgroundColor'];
+        xAxis: {
+            title: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            labels: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            line: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+            gridLine: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+        };
+        yAxis: {
+            title: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            labels: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            line: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+            gridLine: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+        };
+    };
+};
+export type ResponsiveChartV2Tokens = {
+    [key in keyof BreakpointType]: ChartV2TokensType;
+};
+export declare const getChartV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveChartV2Tokens;

package/dist/components/ChartsV2/chartV2.types.d.ts

@@ -0,0 +1,72 @@
+import { RefObject, ReactNode } from 'react';
+import { HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';
+import { default as Highcharts } from 'highcharts';
+import { ButtonProps } from '../Button';
+import { SkeletonVariant } from '../Skeleton';
+export declare const ChartV2BaseInstance: typeof Highcharts;
+export type ChartV2Type = typeof Highcharts;
+export type ChartV2ReactProps = HighchartsReactProps;
+export type ChartV2SkeletonProps = {
+    show: boolean;
+    variant?: SkeletonVariant;
+    height?: number;
+};
+export type ChartV2NoDataProps = {
+    title?: string;
+    subtitle?: string;
+    slot?: ReactNode;
+    button?: ButtonProps;
+};
+export type ChartV2Props = Omit<ChartV2ReactProps, 'className' | 'style'> & {
+    highcharts?: ChartV2Type;
+    skeleton?: ChartV2SkeletonProps;
+    noData?: ChartV2NoDataProps;
+};
+export type ChartV2Options = Highcharts.Options;
+export type ChartV2SeriesOptionsType = Highcharts.SeriesOptionsType;
+export type ChartV2SeriesLineOptions = Highcharts.SeriesLineOptions;
+export type ChartV2SeriesColumnOptions = Highcharts.SeriesColumnOptions;
+export type ChartV2SeriesBarOptions = Highcharts.SeriesBarOptions;
+export type ChartV2SeriesPieOptions = Highcharts.SeriesPieOptions;
+export type ChartV2SeriesScatterOptions = Highcharts.SeriesScatterOptions;
+export type ChartV2SeriesSankeyOptions = Highcharts.SeriesSankeyOptions;
+export type ChartV2SeriesAreaOptions = Highcharts.SeriesAreaOptions;
+export type ChartV2SeriesXrangeOptions = Highcharts.SeriesXrangeOptions;
+export type ChartV2Point = Highcharts.Point;
+export type ChartV2PointMarkerOptionsObject = Highcharts.PointMarkerOptionsObject;
+export type ChartV2XAxisOptions = Highcharts.XAxisOptions;
+export type ChartV2YAxisOptions = Highcharts.YAxisOptions;
+export type ChartV2 = Highcharts.Chart;
+export type ChartV2Axis = Highcharts.Axis;
+export type ChartV2Series = Highcharts.Series;
+export type ChartV2SeriesZonesOptionsObject = Highcharts.SeriesZonesOptionsObject;
+export type ChartV2ReactRefObject = HighchartsReactRefObject;
+export interface ChartV2ContainerProps {
+    children: ReactNode;
+}
+export interface ChartV2HeaderProps {
+    children: ReactNode;
+}
+export type ChartV2LegendItem = Highcharts.Series | Highcharts.Point;
+export interface ChartV2CustomLegendItem {
+    key: string;
+    name: string;
+    color?: string;
+    value?: string | number;
+}
+export interface ChartV2LegendProps {
+    /** Single chart ref (use when legend controls one chart). */
+    chartRef?: RefObject<ChartV2ReactRefObject | null>;
+    /** Multiple chart refs (use for shared legend; visibility and hover sync across all). */
+    chartRefs?: ReadonlyArray<RefObject<ChartV2ReactRefObject | null>>;
+    customLegendItems?: ChartV2CustomLegendItem[];
+    renderItem?: (params: {
+        item: ChartV2LegendItem;
+        name: string;
+        visible: boolean;
+        color: string;
+        value?: string | number;
+        onClick: () => void;
+    }) => ReactNode;
+    layout?: 'horizontal' | 'vertical';
+}

package/dist/components/ChartsV2/index.d.ts

@@ -0,0 +1,9 @@
+export { default as ChartV2 } from './ChartV2';
+export { default as ChartV2Legend } from './ChartV2Legend';
+export { default as ChartContainerV2 } from './ChartContainerV2';
+export { default as ChartHeaderV2 } from './ChartHeaderV2';
+export { default as ChartV2Fullscreen } from './ChartV2Fullscreen';
+export { default as ChartV2Skeleton } from './ChartV2Skeleton';
+export { default as ChartV2NoData } from './ChartV2NoData';
+export * from './chartV2.tokens';
+export * from './chartV2.types';

package/dist/components/ChartsV2/useChartLegend.d.ts

@@ -0,0 +1,9 @@
+import { ChartV2LegendProps } from './chartV2.types';
+export declare function useChartLegend(chartRef: ChartV2LegendProps['chartRef'], chartRefs: ChartV2LegendProps['chartRefs']): {
+    hoveredItem: import('./chartV2.types').ChartV2LegendItem | null;
+    setHoveredItem: import('react').Dispatch<import('react').SetStateAction<import('./chartV2.types').ChartV2LegendItem | null>>;
+    allItems: import('./chartV2.types').ChartV2LegendItem[];
+    handleClick: (item: import('./chartV2.types').ChartV2LegendItem, itemIndex: number) => void;
+    chart: import('highcharts').Chart;
+    charts: import('highcharts').Chart[];
+};

package/dist/components/ChartsV2/useChartLegendHover.d.ts

@@ -0,0 +1,7 @@
+import { ChartV2, ChartV2LegendItem } from './chartV2.types';
+export declare const useChartLegendHover: (chart: ChartV2 | null, charts: ChartV2[]) => {
+    hoveredItem: ChartV2LegendItem | null;
+    setHoveredItem: import('react').Dispatch<import('react').SetStateAction<ChartV2LegendItem | null>>;
+    allItems: ChartV2LegendItem[];
+    handleClick: (item: ChartV2LegendItem, itemIndex: number) => void;
+};

package/dist/components/ChartsV2/useChartRefs.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+import { ChartV2 } from './chartV2.types';
+declare const useChartRefs: (refs: ReadonlyArray<RefObject<{
+    chart?: ChartV2;
+} | null>>) => ChartV2[];
+export default useChartRefs;

package/dist/components/ChartsV2/utils.d.ts

@@ -0,0 +1,3 @@
+import { ChartV2, ChartV2LegendItem } from './chartV2.types';
+export declare const getLegendItems: (chart: ChartV2 | null) => ChartV2LegendItem[];
+export declare const applyHoverState: (items: ChartV2LegendItem[], hovered: ChartV2LegendItem | null) => void;

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,41 @@
+declare const Timeline: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "children"> & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<import('./types').TimelineLabelProps & import('react').RefAttributes<HTMLDivElement>>;
+    Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+        title: string;
+        status?: import('./types').TimelineNodeStatus;
+        timestamp?: string;
+        children?: import('react').ReactNode;
+        leftSlot?: import('react').ReactNode;
+        rightSlot?: import('react').ReactNode;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Substep: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+        title: string;
+        isNestedUnderHeader?: boolean;
+        showIndicator?: boolean;
+        description?: string;
+        timestamp?: string;
+        rightSlot?: import('react').ReactNode;
+        datetimeLeftSlot?: import('react').ReactNode;
+        datetimeRightSlot?: import('react').ReactNode;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Node: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+        title?: string;
+        leftSlot?: import('react').ReactNode;
+        headerRightSlot?: import('react').ReactNode;
+        datetime?: string;
+        datetimeLeftSlot?: import('react').ReactNode;
+        datetimeRightSlot?: import('react').ReactNode;
+        text?: string;
+        maxLines?: number;
+        user?: import('./types').TimelineUser;
+        avatarProps?: Partial<Omit<import('../AvatarV2').AvatarV2Props, "src" | "fallbackText">>;
+        time?: string;
+        status?: import('./types').TimelineNodeStatus;
+        children?: import('react').ReactNode;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    ShowMore: import('react').ForwardRefExoticComponent<import('./types').TimelineShowMoreProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default Timeline;

package/dist/components/Timeline/TimelineHeader.d.ts

@@ -0,0 +1,10 @@
+import { TimelineNodeStatus } from './types';
+declare const TimelineHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    status?: TimelineNodeStatus;
+    timestamp?: string;
+    children?: import('react').ReactNode;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default TimelineHeader;

package/dist/components/Timeline/TimelineLabel.d.ts

@@ -0,0 +1,3 @@
+import { TimelineLabelProps } from './types';
+declare const TimelineLabel: import('react').ForwardRefExoticComponent<TimelineLabelProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TimelineLabel;

package/dist/components/Timeline/TimelineNode.d.ts

@@ -0,0 +1,17 @@
+import { TimelineNodeStatus } from './types';
+declare const TimelineNode: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    leftSlot?: import('react').ReactNode;
+    headerRightSlot?: import('react').ReactNode;
+    datetime?: string;
+    datetimeLeftSlot?: import('react').ReactNode;
+    datetimeRightSlot?: import('react').ReactNode;
+    text?: string;
+    maxLines?: number;
+    user?: import('./types').TimelineUser;
+    avatarProps?: Partial<Omit<import('../AvatarV2').AvatarV2Props, "src" | "fallbackText">>;
+    time?: string;
+    status?: TimelineNodeStatus;
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default TimelineNode;

package/dist/components/Timeline/TimelineShowMore.d.ts

@@ -0,0 +1,3 @@
+import { TimelineShowMoreProps } from './types';
+declare const TimelineShowMore: import('react').ForwardRefExoticComponent<TimelineShowMoreProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TimelineShowMore;

package/dist/components/Timeline/TimelineSubstep.d.ts

@@ -0,0 +1,11 @@
+declare const TimelineSubstep: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    isNestedUnderHeader?: boolean;
+    showIndicator?: boolean;
+    description?: string;
+    timestamp?: string;
+    rightSlot?: import('react').ReactNode;
+    datetimeLeftSlot?: import('react').ReactNode;
+    datetimeRightSlot?: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default TimelineSubstep;

package/dist/components/Timeline/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Timeline } from './Timeline';
+export { default as TimelineLabel } from './TimelineLabel';
+export { default as TimelineHeader } from './TimelineHeader';
+export { default as TimelineSubstep } from './TimelineSubstep';
+export { default as TimelineNode } from './TimelineNode';
+export { default as TimelineShowMore } from './TimelineShowMore';
+export * from './types';
+export * from './timeline.token';

package/dist/components/Timeline/timeline.dark.token.d.ts

@@ -0,0 +1,8 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { TimelineTokensType } from './timeline.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType;
+};
+export declare const getTimelineDarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTimelineTokens;
+export {};

package/dist/components/Timeline/timeline.light.token.d.ts

@@ -0,0 +1,8 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { TimelineTokensType } from './timeline.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType;
+};
+export declare const getTimelineLightTokens: (foundationToken: FoundationTokenType) => ResponsiveTimelineTokens;
+export {};

package/dist/components/Timeline/timeline.token.d.ts

@@ -0,0 +1,132 @@
+import { CSSObject } from 'styled-components';
+import { TimelineNodeStatus } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type TimelineStatusColors = {
+    [key in TimelineNodeStatus]: CSSObject['backgroundColor'];
+};
+export type TimelineTokensType = {
+    track: {
+        width: CSSObject['width'];
+        backgroundColor: CSSObject['backgroundColor'];
+        left: CSSObject['left'];
+    };
+    indicator: {
+        left: CSSObject['left'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+    };
+    statusColors: TimelineStatusColors;
+    label: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginBottom: CSSObject['marginBottom'];
+        circle: {
+            left: CSSObject['left'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+        };
+        mask: {
+            backgroundColor: CSSObject['backgroundColor'];
+            height: CSSObject['height'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    header: {
+        row: {
+            paddingLeft: CSSObject['paddingLeft'];
+            marginBottom: CSSObject['marginBottom'];
+            gap: CSSObject['gap'];
+        };
+        section: {
+            marginBottom: CSSObject['marginBottom'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        timestamp: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+    };
+    subsection: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginTop: CSSObject['marginTop'];
+        marginBottom: CSSObject['marginBottom'];
+        marginLeft: CSSObject['marginLeft'];
+        rootIndicator: {
+            top: CSSObject['top'];
+        };
+        headerRow: {
+            gap: CSSObject['gap'];
+        };
+        titleRow: {
+            gap: CSSObject['gap'];
+        };
+        datetimeGroup: {
+            gap: CSSObject['gap'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+        description: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            marginTop: CSSObject['marginTop'];
+            marginBottom: CSSObject['marginBottom'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        datetime: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+        connector: {
+            left: CSSObject['left'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+        };
+        avatar: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            marginTop: CSSObject['marginTop'];
+        };
+        user: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            marginLeft: CSSObject['marginLeft'];
+        };
+        time: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+        };
+        separator: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+            marginLeft: CSSObject['marginLeft'];
+            marginRight: CSSObject['marginRight'];
+        };
+    };
+    showMore: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginTop: CSSObject['marginTop'];
+    };
+};
+export type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType;
+};
+export declare const getTimelineTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTimelineTokens;