@juspay/blend-design-system 0.0.37-beta.0 → 0.0.37-beta.2

package/dist/components/MenuV2/menuV2.dark.tokens.d.ts

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

package/dist/components/MenuV2/menuV2.light.tokens.d.ts

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

package/dist/components/MenuV2/menuV2.tokens.d.ts

@@ -0,0 +1,92 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+import { SelectV2ItemStates } from '../SelectV2/selectV2.tokenStates';
+import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types';
+export type { SelectV2ItemStates as MenuV2ItemStates } from '../SelectV2/selectV2.tokenStates';
+type StateToken<T> = Record<SelectV2ItemStates, T>;
+type MenuV2VariantToken<T> = {
+    [MenuV2ItemVariant.DEFAULT]: T;
+    [MenuV2ItemVariant.ACTION]: {
+        [MenuV2ItemActionType.PRIMARY]: T;
+        [MenuV2ItemActionType.DANGER]: T;
+    };
+};
+export type MenuV2TokensType = {
+    backgroundColor: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    zIndex: CSSObject['zIndex'];
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingRight: CSSObject['paddingRight'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    searchIcon: {
+        width: CSSObject['width'];
+    };
+    group: {
+        label: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            marginTop: CSSObject['marginTop'];
+            marginRight: CSSObject['marginRight'];
+            marginBottom: CSSObject['marginBottom'];
+            marginLeft: CSSObject['marginLeft'];
+        };
+        item: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            marginTop: CSSObject['marginTop'];
+            marginRight: CSSObject['marginRight'];
+            marginBottom: CSSObject['marginBottom'];
+            marginLeft: CSSObject['marginLeft'];
+            gap: CSSObject['gap'];
+            borderRadius: CSSObject['borderRadius'];
+            backgroundColor: MenuV2VariantToken<StateToken<CSSObject['backgroundColor']>>;
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+                color: MenuV2VariantToken<StateToken<CSSObject['color']>>;
+                subText: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                    color: MenuV2VariantToken<StateToken<CSSObject['color']>>;
+                };
+                leftSlot: {
+                    maxWidth: CSSObject['maxWidth'];
+                    maxHeight: CSSObject['maxHeight'];
+                };
+                rightChevron: {
+                    color: CSSObject['color'];
+                    width: CSSObject['width'];
+                };
+            };
+        };
+    };
+    separator: {
+        color: CSSObject['color'];
+        height: CSSObject['height'];
+        marginTop: CSSObject['marginTop'];
+        marginRight: CSSObject['marginRight'];
+        marginBottom: CSSObject['marginBottom'];
+        marginLeft: CSSObject['marginLeft'];
+    };
+};
+export type ResponsiveMenuV2TokensType = {
+    [key in keyof BreakpointType]: MenuV2TokensType;
+};
+export declare const getMenuV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMenuV2TokensType;

package/dist/components/MenuV2/menuV2.types.d.ts

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
+import { CSSObject } from 'styled-components';
+export declare enum MenuV2Alignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum MenuV2Side {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}
+export declare enum MenuV2ItemVariant {
+    DEFAULT = "default",
+    ACTION = "action"
+}
+export declare enum MenuV2ItemActionType {
+    PRIMARY = "primary",
+    DANGER = "danger"
+}
+export type MenuV2ItemTooltipProps = {
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    size?: TooltipSize;
+    showArrow?: boolean;
+    delayDuration?: number;
+    offset?: number;
+};
+export type MenuV2ItemLabel = {
+    text: string;
+    leftSlot?: React.ReactElement;
+};
+export type MenuV2ItemType = {
+    id?: string;
+    label: MenuV2ItemLabel;
+    subLabel?: string;
+    variant?: MenuV2ItemVariant;
+    actionType?: MenuV2ItemActionType;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: MenuV2ItemType[];
+    enableSubMenuSearch?: boolean;
+    subMenuSearchPlaceholder?: string;
+    tooltip?: string | ReactNode;
+    tooltipProps?: MenuV2ItemTooltipProps;
+};
+export type MenuV2GroupType = {
+    id?: string;
+    label?: string;
+    items: MenuV2ItemType[];
+    showSeparator?: boolean;
+};
+export type MenuV2VirtualScrollingConfig = {
+    /** Estimated height per item (px). Used by useVirtualizer. */
+    itemHeight?: number;
+    /** Number of items to render outside visible area. */
+    overscan?: number;
+    /** Min number of items to enable virtual scrolling. Default 30. */
+    threshold?: number;
+};
+export type MenuV2Dimensions = {
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+};
+export type MenuV2Props = {
+    trigger: React.ReactElement;
+    items?: MenuV2GroupType[];
+    dimensions?: MenuV2Dimensions;
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    enableVirtualScrolling?: boolean;
+    virtualScrolling?: MenuV2VirtualScrollingConfig;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    asModal?: boolean;
+    alignment?: MenuV2Alignment;
+    side?: MenuV2Side;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionBoundaryRef?: HTMLElement | null | (HTMLElement | null)[];
+    triggerProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'>;
+};

package/dist/components/MenuV2/menuV2.utils.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { MenuV2GroupType, MenuV2ItemType } from './menuV2.types';
+import { MenuV2TokensType, MenuV2ItemStates } from './menuV2.tokens';
+type MenuV2ItemTokens = MenuV2TokensType['group']['item'];
+export declare const getItemSlots: (item: MenuV2ItemType) => [ReactNode?];
+export declare const filterMenuItem: (item: MenuV2ItemType, lower: string) => MenuV2ItemType | null;
+export declare const getMenuItemBackgroundColor: (state: MenuV2ItemStates, itemTokens: MenuV2ItemTokens, item: MenuV2ItemType) => string | undefined;
+export declare const getMenuItemOptionColor: (state: MenuV2ItemStates, itemTokens: MenuV2ItemTokens, item: MenuV2ItemType) => string | undefined;
+export declare const getMenuItemDescriptionColor: (state: MenuV2ItemStates, itemTokens: MenuV2ItemTokens, item: MenuV2ItemType) => string | undefined;
+export type MenuV2FlatRow = {
+    type: 'label';
+    id: string;
+    label: string;
+} | {
+    type: 'separator';
+    id: string;
+} | {
+    type: 'item';
+    id: string;
+    item: MenuV2ItemType;
+    groupId: number;
+    itemIndex: number;
+};
+export declare const flattenMenuV2Groups: (groups: MenuV2GroupType[]) => MenuV2FlatRow[];
+export declare const filterMenuGroups: (groups: MenuV2GroupType[], searchText: string) => MenuV2GroupType[];
+export {};

package/dist/components/Modal/modal.tokens.d.ts

@@ -34,6 +34,9 @@ export type ModalState = 'default';
 export type ModalTokensType = {
     boxShadow: CSSObject['boxShadow'];
     borderRadius: CSSObject['borderRadius'];
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor'];
+    };
     header: {
         padding: {
             x: CSSObject['padding'];

package/dist/components/ProgressBarV2/CircularProgressBarV2.d.ts

@@ -0,0 +1,2 @@
+import { CircularProgressBarV2Props } from './progressBarV2.types';
+export declare const CircularProgressBarV2: ({ value, size, appearance, tokens, showLabel, ariaLabel, ariaLabelledby, min, max, }: CircularProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBarV2/LinearProgressBarV2.d.ts

@@ -0,0 +1,2 @@
+import { LinearProgressBarV2Props } from './progressBarV2.types';
+export declare const LinearProgressBarV2: ({ value, size, appearance, tokens, showLabel, ariaLabel, ariaLabelledby, min, max, }: LinearProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBarV2/ProgressBarV2.d.ts

@@ -0,0 +1,11 @@
+import { ProgressBarV2Appearance, ProgressBarV2Size, ProgressBarV2Variant } from './progressBarV2.types';
+declare const ProgressBarV2: import('react').ForwardRefExoticComponent<{
+    value: number;
+    size?: ProgressBarV2Size;
+    variant?: ProgressBarV2Variant;
+    appearance?: ProgressBarV2Appearance;
+    showLabel?: boolean;
+    min?: number;
+    max?: number;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ProgressBarV2;

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

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

package/dist/components/ProgressBarV2/progressBarV2.dark.tokens.d.ts

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

package/dist/components/ProgressBarV2/progressBarV2.light.tokens.d.ts

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

package/dist/components/ProgressBarV2/progressBarV2.tokens.d.ts

@@ -0,0 +1,63 @@
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ProgressBarV2Appearance, ProgressBarV2Size } from './progressBarV2.types';
+import { CSSObject } from 'styled-components';
+export type ProgressBarV2TokenType = {
+    linear: {
+        height: {
+            [key in ProgressBarV2Size]: CSSObject['height'];
+        };
+        fill: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
+            };
+            borderRadius: {
+                [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
+            };
+        };
+        empty: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
+            };
+            backgroundImage: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage'];
+            };
+            backgroundSize: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize'];
+            };
+        };
+        borderRadius: {
+            [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
+        };
+        gap: CSSObject['gap'];
+    };
+    circular: {
+        size: {
+            [key in ProgressBarV2Size]: CSSObject['width'];
+        };
+        strokeWidth: {
+            [key in ProgressBarV2Size]: number;
+        };
+        stroke: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
+        };
+        background: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
+        };
+        dashArray: {
+            [key in ProgressBarV2Appearance]: string;
+        };
+        motion: string;
+    };
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    transition: string;
+};
+export type ResponsiveProgressBarV2Tokens = {
+    [key in keyof BreakpointType]: ProgressBarV2TokenType;
+};
+export declare const getProgressBarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveProgressBarV2Tokens;

package/dist/components/ProgressBarV2/progressBarV2.types.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+import { ProgressBarV2TokenType } from './progressBarV2.tokens';
+export declare enum ProgressBarV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+/** Bar geometry: horizontal track vs circular ring. */
+export declare enum ProgressBarV2Variant {
+    LINEAR = "linear",
+    CIRCULAR = "circular"
+}
+/**
+ * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
+ */
+export declare enum ProgressBarV2Appearance {
+    SOLID = "solid",
+    SEGMENTED = "segmented"
+}
+export type ProgressBarV2Props = {
+    value: number;
+    size?: ProgressBarV2Size;
+    variant?: ProgressBarV2Variant;
+    appearance?: ProgressBarV2Appearance;
+    showLabel?: boolean;
+    min?: number;
+    max?: number;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
+export type ProgressBarV2InternalProps = {
+    value: number;
+    min: number;
+    max: number;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    showLabel: boolean;
+    tokens: ProgressBarV2TokenType;
+};
+export type CircularProgressBarV2Props = ProgressBarV2InternalProps & {
+    size: ProgressBarV2Size;
+    appearance: ProgressBarV2Appearance;
+};
+export type LinearProgressBarV2Props = ProgressBarV2InternalProps & {
+    size: ProgressBarV2Size;
+    appearance: ProgressBarV2Appearance;
+};

package/dist/components/StatCardV2/StatCardV2.chartConfig.d.ts

@@ -0,0 +1,2 @@
+import { ChartV2Options } from '../ChartsV2';
+export declare const buildStatCardV2ChartOptions: (overrides?: ChartV2Options) => ChartV2Options;

package/dist/components/StatCardV2/StatCardV2.d.ts

@@ -0,0 +1,16 @@
+import { StatCardV2Variant } from './statcardV2.types';
+declare const StatCardV2: import('react').ForwardRefExoticComponent<{
+    title: string;
+    variant?: StatCardV2Variant;
+    titleIcon?: import('react').ReactNode;
+    actionIcon?: import('react').ReactNode;
+    value?: string;
+    progressValue?: number;
+    helpIconText?: string;
+    change?: import('./statcardV2.types').StatCardV2Change;
+    subtitle?: string;
+    options?: import('../ChartsV2').ChartV2Options;
+    skeleton?: import('./statcardV2.types').StatCardV2SkeletonProps;
+    dropdownProps?: import('../SingleSelect').SingleSelectProps;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('./statcardV2.types').StatCardV2Dimensions & import('react').RefAttributes<HTMLDivElement>>;
+export default StatCardV2;

package/dist/components/StatCardV2/StatCardV2Change.d.ts

@@ -0,0 +1,3 @@
+import { StatCardV2ChangeProps } from './statcardV2.types';
+declare const StatCardV2Change: ({ changeValueText, leftSymbol, rightSymbol, arrowDirection, changeType, tokens, id, }: StatCardV2ChangeProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatCardV2Change;

package/dist/components/StatCardV2/StatCardV2NoData.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { StatCardV2Props } from './statcardV2.types';
+import { StatCardV2TokensType } from './statcardV2.tokens';
+type StatCardV2NoDataProps = Pick<StatCardV2Props, 'title' | 'titleIcon' | 'helpIconText' | 'subtitle' | 'dropdownProps' | 'maxWidth' | 'minWidth' | 'width' | 'height'> & {
+    tokens: StatCardV2TokensType;
+    isSmallScreen: boolean;
+    filteredProps: React.ComponentProps<'div'>;
+};
+declare const StatCardV2NoData: ({ title, titleIcon, helpIconText, subtitle, dropdownProps, maxWidth, minWidth, width, height, tokens, isSmallScreen, filteredProps, }: StatCardV2NoDataProps) => import("react/jsx-runtime").JSX.Element;
+export default StatCardV2NoData;

package/dist/components/StatCardV2/StatCardV2Skeleton.d.ts

@@ -0,0 +1,7 @@
+import { StatCardV2SkeletonProps } from './statcardV2.types';
+declare const StatCardV2Skeleton: ({ skeleton, maxWidth, minWidth, }: {
+    skeleton: StatCardV2SkeletonProps;
+    maxWidth: string | number;
+    minWidth: string | number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StatCardV2Skeleton;

package/dist/components/StatCardV2/StatCardV2Subtitle.d.ts

@@ -0,0 +1,3 @@
+import { StatCardV2SubtitleProps } from './statcardV2.types';
+declare const StatCardV2Subtitle: ({ subtitle, tokens, id, }: StatCardV2SubtitleProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatCardV2Subtitle;

package/dist/components/StatCardV2/StatCardV2Title.d.ts

@@ -0,0 +1,3 @@
+import { StatCardV2TitleProps } from './statcardV2.types';
+declare const StatCardV2Title: ({ title, helpIconText, tokens, id, }: StatCardV2TitleProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatCardV2Title;

package/dist/components/StatCardV2/StatCardV2Value.d.ts

@@ -0,0 +1,11 @@
+import { StatCardV2Props, StatCardV2Variant } from './statcardV2.types';
+import { StatCardV2TokensType } from './statcardV2.tokens';
+export declare const STATCARD_FALLBACK_DISPLAY = "--";
+export declare const renderVariantFallbackValue: (tokens: StatCardV2TokensType, variant: StatCardV2Variant) => import("react/jsx-runtime").JSX.Element;
+declare const StatCardV2Value: ({ value, tokens, variant, id, }: {
+    value: StatCardV2Props["value"];
+    tokens: StatCardV2TokensType;
+    variant: StatCardV2Variant;
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StatCardV2Value;

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

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

package/dist/components/StatCardV2/statcardV2.dark.tokens.d.ts

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

package/dist/components/StatCardV2/statcardV2.light.tokens.d.ts

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

package/dist/components/StatCardV2/statcardV2.tokens.d.ts

@@ -0,0 +1,81 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+import { StatCardV2ChangeType, StatCardV2Variant } from './statcardV2.types';
+export type StatCardV2TokensType = {
+    height: CSSObject['height'];
+    width: CSSObject['width'];
+    maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    paddingRight: CSSObject['paddingRight'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    backgroundColor: CSSObject['backgroundColor'];
+    boxShadow: CSSObject['boxShadow'];
+    topContainer: {
+        gap: CSSObject['gap'];
+        dataContainer: {
+            gap: CSSObject['gap'];
+            titleContainer: {
+                gap: CSSObject['gap'];
+                title: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                helpIcon: {
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                    color: {
+                        default: CSSObject['color'];
+                        hover: CSSObject['color'];
+                    };
+                };
+            };
+            statsContainer: {
+                gap: CSSObject['gap'];
+                value: {
+                    [key in StatCardV2Variant]: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: CSSObject['color'];
+                        lineHeight: CSSObject['lineHeight'];
+                    };
+                };
+                changeContainer: {
+                    gap: CSSObject['gap'];
+                    change: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color'];
+                        };
+                        lineHeight: CSSObject['lineHeight'];
+                    };
+                    arrow: {
+                        width: CSSObject['width'];
+                        height: CSSObject['height'];
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color'];
+                        };
+                    };
+                };
+            };
+            subtitle: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+        };
+    };
+};
+export type ResponsiveStatCardV2Tokens = {
+    [key in keyof BreakpointType]: StatCardV2TokensType;
+};
+export declare const getStatCardV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveStatCardV2Tokens;

package/dist/components/StatCardV2/statcardV2.types.d.ts

@@ -0,0 +1,78 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { CSSObject } from 'styled-components';
+import { StatCardV2TokensType } from './statcardV2.tokens';
+import { ChartV2Options } from '../ChartsV2';
+import { SkeletonVariant } from '../Skeleton';
+import { SingleSelectProps } from '../SingleSelect';
+export type StatCardV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+    height?: CSSObject['height'];
+};
+export declare enum StatCardV2Variant {
+    CHART = "chart",
+    PROGRESS_BAR = "progress",
+    NUMBER = "number"
+}
+export declare enum StatCardV2ArrowDirection {
+    UP = "up",
+    DOWN = "down"
+}
+export declare enum StatCardV2ChangeType {
+    INCREASE = "increase",
+    DECREASE = "decrease"
+}
+export declare enum StatCardV2Alignment {
+    LEFT = "left",
+    CENTER = "center"
+}
+export type StatCardV2Change = {
+    value: string;
+    changeType: StatCardV2ChangeType;
+    leftSymbol?: string;
+    rightSymbol?: string;
+    arrowDirection?: StatCardV2ArrowDirection;
+    tooltip?: ReactNode;
+};
+export type StatCardV2SkeletonProps = {
+    variant: SkeletonVariant;
+    show: boolean;
+    height?: CSSObject['height'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type StatCardV2TitleProps = {
+    title: string;
+    helpIconText?: string;
+    tokens: StatCardV2TokensType;
+    id?: string;
+};
+export type StatCardV2ChangeProps = {
+    changeValueText?: string;
+    leftSymbol?: string;
+    rightSymbol?: string;
+    arrowDirection: StatCardV2ArrowDirection;
+    changeType: StatCardV2ChangeType;
+    tokens: StatCardV2TokensType;
+    id?: string;
+};
+export type StatCardV2SubtitleProps = {
+    subtitle?: string;
+    tokens: StatCardV2TokensType;
+    id?: string;
+};
+export type StatCardV2Props = {
+    title: string;
+    variant?: StatCardV2Variant;
+    titleIcon?: ReactNode;
+    actionIcon?: ReactNode;
+    value?: string;
+    progressValue?: number;
+    helpIconText?: string;
+    change?: StatCardV2Change;
+    subtitle?: string;
+    options?: ChartV2Options;
+    skeleton?: StatCardV2SkeletonProps;
+    dropdownProps?: SingleSelectProps;
+} & HTMLAttributes<HTMLDivElement> & StatCardV2Dimensions;

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

@@ -0,0 +1,7 @@
+import { StatCardV2Change } from './statcardV2.types';
+export declare const buildStatCardV2AriaLabel: (params: {
+    title?: string;
+    value?: string;
+    subtitle?: string;
+    change?: StatCardV2Change;
+}) => string;

package/dist/components/TabsV2/StyledTabsV2.d.ts

@@ -0,0 +1,26 @@
+import { TabsV2Variant, TabsV2Size } from './tabsV2.types';
+import { TabsV2TokensType } from './tabsV2.tokens';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const StyledTabsRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>, {
+    $tabsToken: TabsV2TokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, {
+    $tabsToken: TabsV2TokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, {
+    $variant: TabsV2Variant;
+    $size: TabsV2Size;
+    $expanded: boolean;
+    $fitContent: boolean;
+    $tabsToken: TabsV2TokensType;
+    $hideIndicator?: boolean;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsTrigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, {
+    $variant: TabsV2Variant;
+    $size: TabsV2Size;
+    $tabsToken: TabsV2TokensType;
+    $isOverlay?: boolean;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const TabsV2IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $tabsToken: TabsV2TokensType;
+}>> & string;