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

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.tokens.d.ts

@@ -0,0 +1,94 @@
+import { Theme } from '../../../context/theme.enum';
+import { CSSObject } from 'styled-components';
+import { CheckboxV2CheckedState } from './checkboxV2.types';
+import { SelectorV2Size, SelectorV2InteractionState } from '../../SelectorV2/selectorV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+export type CheckboxV2TokensType = {
+    gap: CSSObject['gap'];
+    checkbox: {
+        height: {
+            [key in SelectorV2Size]: CSSObject['height'];
+        };
+        width: {
+            [key in SelectorV2Size]: CSSObject['width'];
+        };
+        opacity: CSSObject['opacity'];
+        backgroundColor: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['backgroundColor'];
+            };
+        };
+        borderRadius: {
+            [key in SelectorV2Size]: CSSObject['borderRadius'];
+        };
+        border: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['border'];
+            };
+        };
+        outline: CSSObject['outline'];
+        outlineOffset: CSSObject['outlineOffset'];
+        boxShadow: CSSObject['boxShadow'];
+        icon: {
+            color: {
+                [key in CheckboxV2CheckedState]?: {
+                    [key in Extract<SelectorV2InteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
+                };
+            };
+            width: {
+                [key in SelectorV2Size]: CSSObject['width'];
+            };
+            height: {
+                [key in SelectorV2Size]: CSSObject['height'];
+            };
+            strokeWidth: {
+                [key in SelectorV2Size]: CSSObject['strokeWidth'];
+            };
+        };
+    };
+    content: {
+        gap: CSSObject['gap'];
+        label: {
+            gap: CSSObject['gap'];
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
+                };
+            };
+        };
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveCheckboxV2Tokens = {
+    [key in keyof BreakpointType]: CheckboxV2TokensType;
+};
+export declare const getCheckboxV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveCheckboxV2Tokens;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.types.d.ts

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { CheckboxV2TokensType } from './checkboxV2.tokens';
+import { CSSObject } from 'styled-components';
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+export declare enum CheckboxV2CheckedState {
+    CHECKED = "checked",
+    UNCHECKED = "unchecked",
+    INDETERMINATE = "indeterminate"
+}
+export type CheckboxV2Props = {
+    checked?: boolean | 'indeterminate';
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SelectorV2Size;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'slot' | 'onChange'>;
+export type CheckboxV2RootProps = {
+    tokens: CheckboxV2TokensType;
+    uniqueId: string;
+    name: string;
+    ref: React.RefObject<HTMLButtonElement>;
+    checked: boolean | 'indeterminate';
+    onCheckedChange: (checked: boolean | 'indeterminate') => void;
+    disabled: boolean;
+    required: boolean;
+    size: SelectorV2Size;
+    error: boolean;
+    shouldShake: boolean;
+    ariaAttributes: {
+        'aria-required': boolean;
+        'aria-invalid': boolean;
+        'aria-describedby': string;
+    };
+    restProps: {
+        [key: string]: unknown;
+    };
+};
+export type CheckboxV2ContentProps = {
+    uniqueId: string;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    size: SelectorV2Size;
+    label?: string;
+    subLabel?: string;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    tokens: CheckboxV2TokensType;
+    labelMaxLength?: number;
+    subLabelMaxLength?: number;
+    subLabelId?: string;
+};

package/dist/components/SelectorV2/CheckboxV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckboxV2 } from './CheckboxV2';
+export * from './checkboxV2.types';
+export * from './checkboxV2.tokens';

package/dist/components/SelectorV2/CheckboxV2/utils.d.ts

@@ -0,0 +1,67 @@
+import { KeyboardEvent } from 'react';
+import { CheckboxV2CheckedState } from './checkboxV2.types';
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+import { CheckboxV2TokensType } from './checkboxV2.tokens';
+export declare const getCheckboxDataState: (checked: boolean | "indeterminate") => string;
+/**
+ * Gets the icon color based on checkbox state
+ */
+export declare const getCheckboxIconColor: (tokens: CheckboxV2TokensType, currentChecked: boolean | "indeterminate", disabled: boolean) => string;
+/**
+ * Gets the text color based on checkbox state
+ */
+export declare const getCheckboxTextColor: (tokens: CheckboxV2TokensType, disabled: boolean, error: boolean) => string;
+/**
+ * Gets the subtext color based on checkbox state
+ */
+export declare const getCheckboxSubtextColor: (tokens: CheckboxV2TokensType, disabled: boolean, error: boolean) => string;
+/**
+ * Gets the text properties for checkbox labels
+ */
+export declare const getCheckboxTextProps: (tokens: CheckboxV2TokensType, size: SelectorV2Size, disabled: boolean, error: boolean) => {
+    fontSize: string;
+    fontWeight: string;
+    color: string;
+};
+/**
+ * Gets the subtext properties for checkbox
+ */
+export declare const getCheckboxSubtextProps: (tokens: CheckboxV2TokensType, size: SelectorV2Size, disabled: boolean, error: boolean) => {
+    fontSize: string;
+    color: string;
+};
+/**
+ * Gets label styles for checkbox components
+ */
+export declare const getCheckboxLabelStyles: (disabled: boolean) => {
+    cursor: "not-allowed" | "pointer";
+    display: "flex";
+    alignItems: "center";
+    margin: number;
+    padding: number;
+};
+/**
+ * Gets accessibility attributes for checkbox
+ */
+export declare const getAccessibilityAttributes: (uniqueId: string, isIndeterminate: boolean) => {
+    role: string;
+    'aria-checked': string | undefined;
+    'aria-labelledby': string;
+    'aria-describedby': string;
+};
+/**
+ * Generates subtext ID for aria-describedby connection
+ * WCAG 4.1.2: aria-describedby must connect to subtext/error messages
+ */
+export declare const getSubtextId: (uniqueId: string, hasSubtext: boolean) => string | undefined;
+/**
+ * Merges custom aria-describedby with subtext ID
+ * WCAG 4.1.2: Supports multiple IDs space-separated
+ */
+export declare const mergeAriaDescribedBy: (subtextId: string | undefined, customAriaDescribedBy?: string) => string | undefined;
+/**
+ * Handles keyboard interaction for checkbox root.
+ * - On Enter: toggles checked state (indeterminate -> true, otherwise toggles boolean)
+ */
+export declare const handleCheckboxKeyDown: (e: KeyboardEvent<HTMLButtonElement>, checked: boolean | "indeterminate" | undefined, disabled: boolean, onCheckedChange?: (checked: boolean | "indeterminate") => void) => void;
+export declare const getCheckboxState: (checked: boolean | "indeterminate") => CheckboxV2CheckedState;

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/SwitchV2.d.ts

@@ -1,12 +1,12 @@
-import { SwitchV2Size } from './switchV2.types';
+import { SelectorV2Size } from '../selectorV2.types';
 declare const SwitchV2: import('react').ForwardRefExoticComponent<{
     checked?: boolean;
-    onChange?: (checked: boolean) => void;
+    onCheckedChange?: (checked: boolean) => void;
     required?: boolean;
     error?: boolean;
     label?: string;
     subLabel?: string;
-    size?: SwitchV2Size;
+    size?: SelectorV2Size;
     slot?: {
         slot: import('react').ReactElement;
         maxHeight?: import('styled-components').CSSObject["maxHeight"];

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
-import { FoundationTokenType } from '../../tokens/theme.token';
+import { FoundationTokenType } from '../../../tokens/theme.token';
 import { ResponsiveSwitchV2Tokens } from './switchV2.tokens';
 export declare const getSwitchV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveSwitchV2Tokens;

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
-import { FoundationTokenType } from '../../tokens/theme.token';
+import { FoundationTokenType } from '../../../tokens/theme.token';
 import { ResponsiveSwitchV2Tokens } from './switchV2.tokens';
 export declare const getSwitchV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveSwitchV2Tokens;

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.tokens.d.ts

@@ -1,16 +1,17 @@
-import { Theme } from '../../context/theme.enum';
+import { Theme } from '../../../context/theme.enum';
 import { CSSObject } from 'styled-components';
-import { SwitchV2Size, SwitchV2State, SwitchV2Variant } from './switchV2.types';
-import { BreakpointType } from '../../breakpoints/breakPoints';
-import { FoundationTokenType } from '../../tokens/theme.token';
+import { SwitchV2State, SwitchV2Variant } from './switchV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { SelectorV2Size } from '../selectorV2.types';
 export type SwitchV2TokensType = {
     gap: CSSObject['gap'];
     switch: {
         height: {
-            [key in SwitchV2Size]: CSSObject['height'];
+            [key in SelectorV2Size]: CSSObject['height'];
         };
         width: {
-            [key in SwitchV2Size]: CSSObject['width'];
+            [key in SelectorV2Size]: CSSObject['width'];
         };
         backgroundColor: {
             [key in SwitchV2Variant]: {
@@ -21,10 +22,10 @@ export type SwitchV2TokensType = {
             backgroundColor: CSSObject['backgroundColor'];
             border: CSSObject['border'];
             width: {
-                [key in SwitchV2Size]: CSSObject['width'];
+                [key in SelectorV2Size]: CSSObject['width'];
             };
             height: {
-                [key in SwitchV2Size]: CSSObject['height'];
+                [key in SelectorV2Size]: CSSObject['height'];
             };
             outline: CSSObject['outline'];
         };
@@ -37,17 +38,17 @@ export type SwitchV2TokensType = {
                 [key in SwitchV2State]: CSSObject['color'];
             };
             fontSize: {
-                [key in SwitchV2Size]: CSSObject['fontSize'];
+                [key in SelectorV2Size]: CSSObject['fontSize'];
             };
             fontWeight: {
-                [key in SwitchV2Size]: CSSObject['fontWeight'];
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
             };
             lineHeight: {
-                [key in SwitchV2Size]: CSSObject['lineHeight'];
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
             };
             slot: {
                 maxHeight: {
-                    [key in SwitchV2Size]: CSSObject['maxHeight'];
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
                 };
             };
         };
@@ -56,13 +57,13 @@ export type SwitchV2TokensType = {
                 [key in SwitchV2State]: CSSObject['color'];
             };
             fontSize: {
-                [key in SwitchV2Size]: CSSObject['fontSize'];
+                [key in SelectorV2Size]: CSSObject['fontSize'];
             };
             fontWeight: {
-                [key in SwitchV2Size]: CSSObject['fontWeight'];
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
             };
             lineHeight: {
-                [key in SwitchV2Size]: CSSObject['lineHeight'];
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
             };
         };
         required: {

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.types.d.ts

@@ -1,17 +1,14 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react';
 import { SwitchV2TokensType } from './switchV2.tokens';
 import { CSSObject } from 'styled-components';
-export declare enum SwitchV2Size {
-    SM = "sm",
-    MD = "md"
-}
+import { SelectorV2Size } from '../selectorV2.types';
 export type SwitchV2State = 'default' | 'hover' | 'disabled' | 'error';
 export type SwitchV2Variant = 'checked' | 'unchecked';
 export type SwitchV2ButtonProps = {
     id: string;
     checked?: boolean;
     disabled: boolean;
-    size: SwitchV2Size;
+    size: SelectorV2Size;
     tokens: SwitchV2TokensType;
     onToggle: () => void;
     buttonProps?: Record<string, unknown>;
@@ -22,7 +19,7 @@ export type SwitchV2ContentProps = {
     disabled: boolean;
     error: boolean;
     required: boolean;
-    size: SwitchV2Size;
+    size: SelectorV2Size;
     label?: string;
     subLabel?: string;
     slot?: {
@@ -36,12 +33,12 @@ export type SwitchV2ContentProps = {
 };
 export type SwitchV2Props = {
     checked?: boolean;
-    onChange?: (checked: boolean) => void;
+    onCheckedChange?: (checked: boolean) => void;
     required?: boolean;
     error?: boolean;
     label?: string;
     subLabel?: string;
-    size?: SwitchV2Size;
+    size?: SelectorV2Size;
     slot?: {
         slot: ReactElement;
         maxHeight?: CSSObject['maxHeight'];

package/dist/components/SelectorV2/selectorV2.types.d.ts

@@ -0,0 +1,12 @@
+export declare enum SelectorV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum SelectorV2InteractionState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}

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

@@ -1,5 +1,6 @@
-import { SwitchV2Size, SwitchV2State } from '../SwitchV2/switchV2.types';
-export type SelectorsSize = SwitchV2Size;
+import { SwitchV2State } from '../SelectorV2/SwitchV2/switchV2.types';
+import { SelectorV2Size } from '../SelectorV2/selectorV2.types';
+export type SelectorsSize = SelectorV2Size;
 export type SelectorsLabelTokensType = {
     content: {
         label: {
@@ -33,6 +34,7 @@ export type SelectorsLabelProps = {
     label: string;
     tokens: SelectorsLabelTokensType;
     maxLength?: number;
+    elementType?: string;
 };
 export type SelectorsSubLabelProps = {
     id?: string;
@@ -42,4 +44,5 @@ export type SelectorsSubLabelProps = {
     error: boolean;
     tokens: SelectorsSubLabelTokensType;
     maxLength?: number;
+    elementType?: string;
 };

package/dist/components/SelectorsContent/SelectorsLabel.d.ts

@@ -1,3 +1,3 @@
 import { SelectorsLabelProps } from './SelectorsContent.types';
-declare const SelectorsLabel: ({ id, uniqueId, disabled, error, required, size, label, tokens, maxLength, }: SelectorsLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const SelectorsLabel: ({ id, uniqueId, disabled, error, required, size, label, tokens, maxLength, elementType, }: SelectorsLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SelectorsLabel;

package/dist/components/SelectorsContent/SelectorsSubLabel.d.ts

@@ -1,6 +1,6 @@
 import { SelectorsSubLabelProps } from './SelectorsContent.types';
 declare const SelectorsSubLabel: {
-    ({ id, subLabel, size, disabled, error, tokens, maxLength, }: SelectorsSubLabelProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ id, subLabel, size, disabled, error, tokens, maxLength, elementType, }: SelectorsSubLabelProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default SelectorsSubLabel;

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 {};