@juspay/blend-design-system 0.0.12 → 0.0.13

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

@@ -51,10 +51,9 @@ export type RenderChartProps = {
 export type ChartsProps = {
     chartType?: ChartType;
     data: NewNestedDataPoint[];
+    colors?: string[];
     xAxisLabel?: string;
     yAxisLabel?: string;
-    colors?: string[];
-    metrics?: string[];
     slot1?: ReactNode;
     slot2?: ReactNode;
     slot3?: ReactNode;

package/dist/components/DataTable/MobileColumnDrawer/index.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ColumnDefinition, RowActionsConfig } from '../types';
+export interface MobileColumnDrawerProps<T extends Record<string, unknown>> {
+    isOpen: boolean;
+    onClose: () => void;
+    row: T;
+    rowIndex: number;
+    overflowColumns: ColumnDefinition<T>[];
+    getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
+    onFieldChange?: (field: keyof T, value: unknown) => void;
+    rowActions?: RowActionsConfig<T>;
+}
+declare const MobileColumnDrawer: React.FC<MobileColumnDrawerProps<Record<string, unknown>>>;
+export default MobileColumnDrawer;

package/dist/components/DataTable/MobileColumnManagerDrawer/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ColumnDefinition } from '../types';
+export interface MobileColumnManagerDrawerProps<T extends Record<string, unknown>> {
+    isOpen: boolean;
+    onClose: () => void;
+    columns: ColumnDefinition<T>[];
+    visibleColumns: ColumnDefinition<T>[];
+    onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+}
+declare const MobileColumnManagerDrawer: React.FC<MobileColumnManagerDrawerProps<Record<string, unknown>>>;
+export default MobileColumnManagerDrawer;

package/dist/components/DataTable/TableBody/types.d.ts

@@ -1,4 +1,5 @@
-import { ColumnDefinition } from '../types';
+import { ColumnDefinition, RowActionsConfig } from '../types';
+import { MobileDataTableConfig } from '../hooks/useMobileDataTable';
 export type TableBodyProps<T extends Record<string, unknown>> = {
     currentData: T[];
     visibleColumns: ColumnDefinition<T>[];
@@ -11,7 +12,11 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     enableColumnManager?: boolean;
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
+    rowActions?: RowActionsConfig<T>;
     columnFreeze?: number;
+    mobileConfig?: MobileDataTableConfig;
+    mobileOverflowColumns?: ColumnDefinition<T>[];
+    onMobileOverflowClick?: (row: T) => void;
     renderExpandedRow?: (expandedData: {
         row: T;
         index: number;

package/dist/components/DataTable/TableHeader/MobileFilterDrawer.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ColumnDefinition } from '../types';
+import { TableTokenType } from '../dataTable.tokens';
+import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler } from './handlers';
+type MobileFilterDrawerProps = {
+    column: ColumnDefinition<Record<string, unknown>>;
+    data?: Record<string, unknown>[];
+    tableToken: TableTokenType;
+    sortHandlers: SortHandlers;
+    filterHandlers: FilterHandlers;
+    filterState: FilterState;
+    onColumnFilter?: ColumnFilterHandler;
+    onPopoverClose?: () => void;
+};
+export declare const MobileFilterDrawer: React.FC<MobileFilterDrawerProps>;
+export default MobileFilterDrawer;

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -1,14 +1,20 @@
-import { ColumnDefinition, FilterType } from '../types';
+import { ColumnDefinition, FilterType, RowActionsConfig } from '../types';
+import { MobileDataTableConfig } from '../hooks/useMobileDataTable';
 export type TableHeaderProps<T extends Record<string, unknown>> = {
     visibleColumns: ColumnDefinition<T>[];
+    allVisibleColumns?: ColumnDefinition<T>[];
     initialColumns: ColumnDefinition<T>[];
     selectAll: boolean | 'indeterminate';
     enableInlineEdit?: boolean;
     enableColumnManager?: boolean;
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
+    rowActions?: RowActionsConfig<T>;
     data?: T[];
     columnFreeze?: number;
+    mobileConfig?: MobileDataTableConfig;
+    mobileOverflowColumns?: ColumnDefinition<T>[];
+    onMobileOverflowClick?: (row: T) => void;
     onSort: (field: keyof T) => void;
     onSelectAll: (checked: boolean | 'indeterminate') => void;
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;

package/dist/components/DataTable/dataTable.tokens.d.ts

@@ -1,49 +1,103 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
-export type TableTokenType = {
+import { BreakpointType } from '../../breakpoints/breakPoints';
+type BasicCSSProps = {
+    padding?: CSSObject['padding'];
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    display?: CSSObject['display'];
+    flexDirection?: CSSObject['flexDirection'];
+    position?: CSSObject['position'];
+};
+type BulkActionsType = {
+    top: CSSObject['top'];
+    left: CSSObject['left'];
+    transform: CSSObject['transform'];
+    zIndex: CSSObject['zIndex'];
+    backgroundColor: CSSObject['backgroundColor'];
+    color: CSSObject['color'];
+    borderRadius: CSSObject['borderRadius'];
     padding: CSSObject['padding'];
-    width: CSSObject['width'];
+    boxShadow: CSSObject['boxShadow'];
+    display: CSSObject['display'];
+    alignItems: CSSObject['alignItems'];
+    gap: CSSObject['gap'];
+    minWidth?: CSSObject['minWidth'];
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    border: CSSObject['border'];
+    selectText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        flex?: CSSObject['flex'];
+        color: CSSObject['color'];
+    };
     height: CSSObject['height'];
+};
+type HeaderType = {
     display: CSSObject['display'];
-    flexDirection: CSSObject['flexDirection'];
-    position: CSSObject['position'];
-    header: {
-        display: CSSObject['display'];
+    justifyContent: CSSObject['justifyContent'];
+    alignItems: CSSObject['alignItems'];
+    marginBottom: CSSObject['marginBottom'];
+    gap: CSSObject['gap'];
+    maxWidth: CSSObject['maxWidth'];
+    overflowX: CSSObject['overflowX'];
+    title: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    description: {
+        fontSize: CSSObject['fontSize'];
+        color: CSSObject['color'];
+        lineHeight: CSSObject['lineHeight'];
+        maxWidth: CSSObject['maxWidth'];
+    };
+    headerSlot1: {
+        maxHeight: CSSObject['maxHeight'];
+        flexShrink: CSSObject['flexShrink'];
+    };
+    headerSlot2: {
+        maxHeight: CSSObject['maxHeight'];
+        flexShrink: CSSObject['flexShrink'];
+    };
+    headerSlot3: {
+        maxHeight: CSSObject['maxHeight'];
+        flexShrink: CSSObject['flexShrink'];
+    };
+    titleRow: {
+        gap: CSSObject['gap'];
+        marginBottom: CSSObject['marginBottom'];
         justifyContent: CSSObject['justifyContent'];
         alignItems: CSSObject['alignItems'];
-        marginBottom: CSSObject['marginBottom'];
+    };
+    descriptionRow: {
+        marginTop: CSSObject['marginTop'];
+    };
+    actionIcons: {
         gap: CSSObject['gap'];
-        maxWidth: CSSObject['maxWidth'];
-        overflowX: CSSObject['overflowX'];
-        title: CSSObject;
-        description: CSSObject;
-        headerSlot1: CSSObject;
-        headerSlot2: CSSObject;
-        headerSlot3: CSSObject;
+        searchIcon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
+        filterIcon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
+        columnManagerIcon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
     };
+};
+export type TableTokenType = BasicCSSProps & {
+    header: HeaderType;
     dataTable: {
         borderRadius: CSSObject['borderRadius'];
         border: CSSObject['border'];
         maxHeight: CSSObject['maxHeight'];
         minHeight?: CSSObject['minHeight'];
-        bulkActions: {
-            top: CSSObject['top'];
-            left: CSSObject['left'];
-            transform: CSSObject['transform'];
-            zIndex: CSSObject['zIndex'];
-            backgroundColor: CSSObject['backgroundColor'];
-            color: CSSObject['color'];
-            borderRadius: CSSObject['borderRadius'];
-            padding: CSSObject['padding'];
-            boxShadow: CSSObject['boxShadow'];
-            display: CSSObject['display'];
-            alignItems: CSSObject['alignItems'];
-            gap: CSSObject['gap'];
-            minWidth: CSSObject['minWidth'];
-            border: CSSObject['border'];
-            selectText: CSSObject;
-            height: CSSObject['height'];
-        };
+        bulkActions: BulkActionsType;
         table: {
             width: CSSObject['width'];
             tableLayout: CSSObject['tableLayout'];
@@ -55,11 +109,19 @@ export type TableTokenType = {
                 backgroundColor: CSSObject['backgroundColor'];
                 borderBottom: CSSObject['borderBottom'];
                 height: CSSObject['height'];
-                row: CSSObject;
-                cell: CSSObject & {
+                row: {
+                    height: CSSObject['height'];
+                    '&:hover': {
+                        backgroundColor: CSSObject['backgroundColor'];
+                    };
+                };
+                cell: {
+                    padding: CSSObject['padding'];
+                    textAlign: CSSObject['textAlign'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
                     width?: CSSObject['width'];
-                    fontSize?: CSSObject['fontSize'];
-                    fontWeight?: CSSObject['fontWeight'];
                 };
                 sortable: {
                     cursor: CSSObject['cursor'];
@@ -99,13 +161,20 @@ export type TableTokenType = {
                     groupLabelPadding: CSSObject['padding'];
                     groupLabelTextTransform: CSSObject['textTransform'];
                     separatorHeight: CSSObject['height'];
-                    separatorColor: CSSObject['backgroundColor'];
+                    separatorColor: CSSObject['color'];
                 };
             };
             body: {
                 backgroundColor: CSSObject['backgroundColor'];
                 borderTop: CSSObject['borderTop'];
-                row: CSSObject;
+                row: {
+                    height: CSSObject['height'];
+                    '&:hover': {
+                        backgroundColor: CSSObject['backgroundColor'];
+                        cursor: CSSObject['cursor'];
+                    };
+                    backgroundColor: CSSObject['backgroundColor'];
+                };
                 cell: {
                     padding: CSSObject['padding'];
                     fontWeight: CSSObject['fontWeight'];
@@ -127,7 +196,10 @@ export type TableTokenType = {
                             transition: CSSObject['transition'];
                             color: CSSObject['color'];
                             border: CSSObject['border'];
-                            '&:hover': CSSObject['&:hover'];
+                            '&:hover': {
+                                backgroundColor: CSSObject['backgroundColor'];
+                                color: CSSObject['color'];
+                            };
                         };
                     };
                 };
@@ -161,7 +233,7 @@ export type TableTokenType = {
                         cursor: CSSObject['cursor'];
                         color: CSSObject['color'];
                         fontSize: CSSObject['fontSize'];
-                        hoverColor: CSSObject['backgroundColor'];
+                        hoverColor: CSSObject['color'];
                     };
                     pageNavigation: {
                         gap: CSSObject['gap'];
@@ -171,4 +243,8 @@ export type TableTokenType = {
         };
     };
 };
-export declare const getTableToken: (foundationToken: FoundationTokenType) => TableTokenType;
+export type ResponsiveTableTokens = {
+    [key in keyof BreakpointType]: TableTokenType;
+};
+export declare const getTableToken: (foundationToken: FoundationTokenType) => ResponsiveTableTokens;
+export {};

package/dist/components/DataTable/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useMobileDataTable } from './useMobileDataTable';
+export type { MobileDataTableConfig } from './useMobileDataTable';

package/dist/components/DataTable/hooks/useMobileDataTable.d.ts

@@ -0,0 +1,11 @@
+export interface MobileDataTableConfig {
+    isMobile: boolean;
+    disableColumnFreeze: boolean;
+    enableHorizontalScroll: boolean;
+    compactLayout: boolean;
+    hideColumnManager: boolean;
+    simplifiedFilters: boolean;
+    maxVisibleColumns: number;
+    enableColumnOverflow: boolean;
+}
+export declare const useMobileDataTable: (mobileColumnsToShow?: number) => MobileDataTableConfig;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
 export declare enum SortDirection {
     NONE = "none",
     ASCENDING = "asc",
@@ -175,10 +176,26 @@ export type PaginationConfig = {
 export type BulkAction = {
     id: string;
     label: string;
-    icon?: ReactNode;
-    variant?: 'primary' | 'secondary' | 'danger';
+    variant: 'primary' | 'secondary' | 'danger';
     onClick: (selectedRowIds: string[]) => void;
 };
+export type RowActionConfig<T extends Record<string, unknown>> = {
+    id: string;
+    text?: string;
+    buttonType?: ButtonType;
+    size?: ButtonSize;
+    subType?: ButtonSubType;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    disabled?: boolean | ((row: T, index: number) => boolean);
+    hidden?: boolean | ((row: T, index: number) => boolean);
+    onClick: (row: T, index: number) => void;
+};
+export type RowActionsConfig<T extends Record<string, unknown>> = {
+    showEditAction?: boolean;
+    slot1?: RowActionConfig<T>;
+    slot2?: RowActionConfig<T>;
+};
 export type DataTableProps<T extends Record<string, unknown>> = {
     data: T[];
     columns: ColumnDefinition<T>[];
@@ -226,5 +243,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onRowExpansionChange?: (rowId: unknown, isExpanded: boolean, rowData: T) => void;
     enableRowSelection?: boolean;
     bulkActions?: BulkAction[];
+    rowActions?: RowActionsConfig<T>;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
+    mobileColumnsToShow?: number;
 };

package/dist/components/Inputs/TextInput/textInput.tokens.d.ts

@@ -29,9 +29,7 @@ export type TextInputTokensType = {
         };
     };
 };
-declare const textInputTokens: Readonly<TextInputTokensType>;
 export type ResponsiveTextInputTokens = {
     [key in keyof BreakpointType]: TextInputTokensType;
 };
 export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveTextInputTokens;
-export default textInputTokens;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, customTrigger, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/components/MultiSelect/MultiSelectMenu.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -6,7 +6,9 @@ type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
 export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type MultiSelectTokensType = {
     trigger: {
-        height: CSSObject['height'];
+        height: {
+            [key in MultiSelectMenuSize]: CSSObject['height'];
+        };
         paddingX: {
             [key in MultiSelectMenuSize]: CSSObject['padding'];
         };
@@ -23,6 +25,9 @@ export type MultiSelectTokensType = {
             container: {
                 [key in TriggerStates]: CSSObject['backgroundColor'];
             };
+            'no-container': {
+                [key in TriggerStates]: CSSObject['backgroundColor'];
+            };
         };
         outline: {
             [key in MultiSelectVariant]: {
@@ -76,6 +81,21 @@ export type MultiSelectTokensType = {
             margin: CSSObject['margin'];
         };
     };
+    drawer: {
+        header: {
+            paddingX: CSSObject['padding'];
+            paddingBottom: CSSObject['padding'];
+            borderBottom: CSSObject['borderBottom'];
+        };
+        search: {
+            paddingX: CSSObject['padding'];
+            marginTop: CSSObject['margin'];
+            marginBottom: CSSObject['margin'];
+        };
+        content: {
+            gap: CSSObject['gap'];
+        };
+    };
 };
 export type ResponsiveMultiSelectTokens = {
     [key in keyof BreakpointType]: MultiSelectTokensType;

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

@@ -61,6 +61,7 @@ export type MultiSelectProps = {
     searchPlaceholder?: string;
     enableSelectAll?: boolean;
     selectAllText?: string;
+    customTrigger?: React.ReactNode;
     useDrawerOnMobile?: boolean;
     minWidth?: number;
     maxWidth?: number;
@@ -74,6 +75,21 @@ export type MultiSelectProps = {
     onFocus?: () => void;
     error?: boolean;
     errorMessage?: string;
+    showActionButtons?: boolean;
+    primaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    secondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    showItemDividers?: boolean;
+    showHeaderBorder?: boolean;
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
@@ -95,4 +111,17 @@ export type MultiSelectMenuProps = {
     alignOffset?: number;
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    showActionButtons?: boolean;
+    primaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    secondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
 };

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

@@ -17,4 +17,5 @@ export type SidebarProps = {
     topbar: ReactNode;
     footer?: ReactNode;
     sidebarTopSlot?: ReactNode;
+    sidebarCollapseKey?: string;
 };

package/dist/components/SingleSelect/MobileSingleSelect.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { SingleSelectProps } from './types';
+type MobileSingleSelectProps = SingleSelectProps;
+declare const MobileSingleSelect: React.FC<MobileSingleSelectProps>;
+export default MobileSingleSelect;

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, slot, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minWidth, maxWidth, maxHeight, onBlur, onFocus, inline, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minWidth, maxWidth, maxHeight, onBlur, onFocus, inline, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/singleSelect.tokens.d.ts

@@ -6,7 +6,9 @@ type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
 export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type SingleSelectTokensType = {
     trigger: {
-        height: CSSObject['height'];
+        height: {
+            [key in SelectMenuSize]: CSSObject['height'];
+        };
         paddingX: {
             [key in SelectMenuSize]: CSSObject['padding'];
         };
@@ -70,6 +72,13 @@ export type SingleSelectTokensType = {
             margin: CSSObject['margin'];
         };
     };
+    drawer: {
+        header: {
+            paddingX: CSSObject['padding'];
+            paddingBottom: CSSObject['padding'];
+            borderBottom: CSSObject['borderBottom'];
+        };
+    };
 };
 export type ResponsiveSingleSelectTokens = {
     [key in keyof BreakpointType]: SingleSelectTokensType;

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

@@ -65,9 +65,11 @@ export type SingleSelectProps = {
     selected: string;
     onSelect: (value: string) => void;
     enableSearch?: boolean;
+    searchPlaceholder?: string;
     slot?: React.ReactNode;
     disabled?: boolean;
     name?: string;
+    customTrigger?: React.ReactNode;
     useDrawerOnMobile?: boolean;
     alignment?: SelectMenuAlignment;
     side?: SelectMenuSide;

package/dist/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -12,16 +12,17 @@ export declare enum ChangeType {
 }
 export type ChartDataPoint = {
     value: number;
-    label: string;
-    date?: string;
+    name: string;
 };
 export type StatCardChange = {
     value: number;
     valueType: ChangeType;
+    tooltip?: ReactNode;
 };
 export type StatCardProps = {
     title: string;
     value: string | number;
+    valueTooltip?: ReactNode;
     change?: StatCardChange;
     subtitle?: string;
     variant: StatCardVariant;
@@ -31,4 +32,5 @@ export type StatCardProps = {
     actionIcon?: ReactNode;
     helpIconText?: string;
     dropdownProps?: SingleSelectProps;
+    maxWidth?: string;
 };

package/dist/components/Tooltip/tooltip.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { TooltipSize } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TooltipTokensType = {
     background: CSSObject['backgroundColor'];
     color: CSSObject['color'];
@@ -26,6 +27,7 @@ export type TooltipTokensType = {
         [key in TooltipSize]: CSSObject['gap'];
     };
 };
-declare const tooltipTokens: TooltipTokensType;
-export declare const getTooltipTokens: (foundationToken: FoundationTokenType) => TooltipTokensType;
-export default tooltipTokens;
+export type ResponsiveTooltipTokens = {
+    [key in keyof BreakpointType]: TooltipTokensType;
+};
+export declare const getTooltipTokens: (foundationToken: FoundationTokenType) => ResponsiveTooltipTokens;

package/dist/context/ThemeContext.d.ts

@@ -8,7 +8,7 @@ import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textIn
 import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
 import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
-import { TooltipTokensType } from '../components/Tooltip/tooltip.tokens';
+import { ResponsiveTooltipTokens } from '../components/Tooltip/tooltip.tokens';
 import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
 import { ResponsiveDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
@@ -20,7 +20,7 @@ import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.
 import { PopoverTokenType } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
-import { TableTokenType } from '../components/DataTable/dataTable.tokens';
+import { ResponsiveTableTokens } from '../components/DataTable/dataTable.tokens';
 import { ResponsiveCalendarTokens } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
 import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
@@ -40,7 +40,7 @@ export type ComponentTokenType = {
     NUMBER_INPUT?: ResponsiveNumberInputTokens;
     ALERT?: ResponsiveAlertTokens;
     OTP_INPUT?: OTPInputTokensType;
-    TOOLTIP?: TooltipTokensType;
+    TOOLTIP?: ResponsiveTooltipTokens;
     UNIT_INPUT?: ResponsiveUnitInputTokens;
     MULTI_VALUE_INPUT?: MultiValueInputTokensType;
     DROPDOWN_INPUT?: ResponsiveDropdownInputTokens;
@@ -53,7 +53,7 @@ export type ComponentTokenType = {
     MENU?: ResponsiveMenuTokensType;
     MULTI_SELECT?: ResponsiveMultiSelectTokens;
     SINGLE_SELECT?: ResponsiveSingleSelectTokens;
-    TABLE?: TableTokenType;
+    TABLE?: ResponsiveTableTokens;
     CALENDAR?: ResponsiveCalendarTokens;
     ACCORDION?: ResponsiveAccordionTokens;
     STAT_CARD?: ResponsiveStatCardTokens;