@juspay/blend-design-system 0.0.20-beta → 0.0.21-beta

package/dist/components/Tabs/tabs.token.d.ts

@@ -3,64 +3,86 @@ import { ThemeType } from '../../tokens';
 import { TabsVariant, TabsSize } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TabsState = 'default' | 'hover' | 'active' | 'disabled';
+/**
+ * Tabs Tokens following the pattern: [target].CSSProp.[size].[variant].[state]
+ *
+ * Structure:
+ * - target: container | trigger | text | underline (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
+ * - size: md | lg (only for size-dependent properties)
+ * - variant: underline | boxed | floating | pills (tabs variant)
+ * - state: default | hover | active | disabled (interaction state)
+ *
+ * Size-independent properties: backgroundColor, border, color
+ * Size-dependent properties: borderRadius, padding, fontSize, fontWeight
+ */
 export type TabsTokensType = {
-    gap: {
+    gap: CSSObject['gap'];
+    backgroundColor: {
+        [key in TabsVariant]: {
+            [key in TabsState]: CSSObject['backgroundColor'];
+        };
+    };
+    borderRadius: {
         [key in TabsSize]: {
-            [key in TabsVariant]: CSSObject['gap'];
+            [key in TabsVariant]: CSSObject['borderRadius'];
         };
     };
-    list: {
-        padding: {
-            [key in TabsVariant]: CSSObject['padding'];
+    padding: {
+        [key in TabsSize]: {
+            [key in TabsVariant]: {
+                top: CSSObject['paddingTop'];
+                right: CSSObject['paddingRight'];
+                bottom: CSSObject['paddingBottom'];
+                left: CSSObject['paddingLeft'];
+            };
         };
+    };
+    border: {
+        [key in TabsVariant]: CSSObject['border'];
+    };
+    borderBottom: {
+        [key in TabsVariant]: CSSObject['borderBottom'];
+    };
+    container: {
         backgroundColor: {
             [key in TabsVariant]: CSSObject['backgroundColor'];
         };
         borderRadius: {
-            [key in TabsVariant]: CSSObject['borderRadius'];
-        };
-        borderBottom: {
-            [key in TabsVariant]: CSSObject['borderBottom'];
-        };
-    };
-    trigger: {
-        height: {
-            [key in TabsSize]: CSSObject['height'];
+            [key in TabsSize]: {
+                [key in TabsVariant]: CSSObject['borderRadius'];
+            };
         };
         padding: {
-            [key in TabsVariant]: {
-                [key in TabsSize]: CSSObject['padding'];
+            [key in TabsSize]: {
+                [key in TabsVariant]: {
+                    top: CSSObject['paddingTop'];
+                    right: CSSObject['paddingRight'];
+                    bottom: CSSObject['paddingBottom'];
+                    left: CSSObject['paddingLeft'];
+                };
             };
         };
-        fontSize: {
-            [key in TabsSize]: CSSObject['fontSize'];
+    };
+    trigger: {
+        gap: CSSObject['gap'];
+        activeIndicator: {
+            height: CSSObject['height'];
+            color: CSSObject['color'];
         };
-        iconGap: CSSObject['gap'];
-        fontWeight: {
-            [key in TabsVariant]: {
-                [key in TabsState]?: CSSObject['fontWeight'];
+        text: {
+            color: {
+                [key in TabsVariant]: {
+                    [key in TabsState]: CSSObject['color'];
+                };
             };
-        };
-        color: {
-            [key in TabsVariant]: {
-                [key in TabsState]?: CSSObject['color'];
+            fontSize: {
+                [key in TabsSize]: CSSObject['fontSize'];
             };
-        };
-        backgroundColor: {
-            [key in TabsVariant]: {
-                [key in TabsState]?: CSSObject['backgroundColor'];
+            fontWeight: {
+                [key in TabsSize]: CSSObject['fontWeight'];
             };
         };
-        borderRadius: {
-            [key in TabsVariant]: CSSObject['borderRadius'];
-        };
-        border: {
-            [key in TabsVariant]: CSSObject['border'];
-        };
-    };
-    underline: {
-        height: CSSObject['height'];
-        color: CSSObject['color'];
     };
 };
 export type ResponsiveTabsTokens = {

package/dist/components/Tags/tag.tokens.d.ts

@@ -1,57 +1,56 @@
 import { CSSObject } from 'styled-components';
-import { ThemeType } from '../../tokens';
 import { TagColor, TagShape, TagSize, TagVariant } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+/**
+ * Tag Tokens following the pattern: [target].CSSProp.[size].[variant].[subType]
+ *
+ * Structure:
+ * - target: container | text (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
+ * - size: xs | sm | md | lg (only for size-dependent properties like padding, fontSize, height)
+ * - variant: noFill | attentive | subtle (tag variant)
+ * - subType: neutral | primary | success | error | warning | purple (tag color)
+ *
+ * Size-independent properties: backgroundColor, border, color
+ * Size-dependent properties: borderRadius, padding, fontSize, fontWeight, gap, height
+ */
 export type TagTokensType = Readonly<{
-    background: {
+    gap: CSSObject['gap'];
+    backgroundColor: {
         [key in TagVariant]: {
-            [key in TagColor]: CSSObject['color'];
-        };
-    };
-    color: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['color'];
-        };
-    };
-    borderColor: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['color'];
+            [key in TagColor]: CSSObject['backgroundColor'];
         };
     };
     borderRadius: {
-        [key in TagShape]: {
-            [key in TagSize]: CSSObject['borderRadius'];
-        };
-    };
-    borderWidth: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['borderWidth'];
-        };
-    };
-    font: {
         [key in TagSize]: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
+            [key in TagShape]: CSSObject['borderRadius'];
         };
     };
-    gap: {
-        [key in TagSize]: CSSObject['gap'];
-    };
     padding: {
         [key in TagSize]: CSSObject['padding'];
     };
-    height: {
-        [key in TagSize]: CSSObject['height'];
+    border: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['border'];
+        };
     };
-    slot: {
-        size: {
-            [key in TagSize]: CSSObject['width'];
+    text: {
+        color: {
+            [key in TagVariant]: {
+                [key in TagColor]: CSSObject['color'];
+            };
+        };
+        fontSize: {
+            [key in TagSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in TagSize]: CSSObject['fontWeight'];
         };
     };
 }>;
 export type ResponsiveTagTokens = {
     [key in keyof BreakpointType]: TagTokensType;
 };
-declare const tagTokens: TagTokensType;
-export declare const getTagTokens: (foundationToken: ThemeType) => ResponsiveTagTokens;
-export default tagTokens;
+export declare const getTagTokens: (foundationToken: FoundationTokenType) => ResponsiveTagTokens;
+export default getTagTokens;

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

@@ -2,12 +2,20 @@ import { CSSObject } from 'styled-components';
 import { TooltipSize } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
+/**
+ * Tooltip Tokens following the pattern: [target].CSSProp.[size]
+ *
+ * Structure:
+ * - target:  text (defines what element the token applies to)
+ * - CSSProp: background | borderRadius | maxWidth | padding | gap | color | fontWeight | fontSize | lineHeight
+ * - size: sm | lg (tooltip size)
+ *
+ * Notes:
+ * - Size-independent properties: background, text.color
+ * - Size-dependent properties: borderRadius, maxWidth, padding, gap, text.fontWeight, text.fontSize, text.lineHeight
+ */
 export type TooltipTokensType = {
     background: CSSObject['backgroundColor'];
-    color: CSSObject['color'];
-    fontWeight: {
-        [key in TooltipSize]: CSSObject['fontWeight'];
-    };
     borderRadius: {
         [key in TooltipSize]: CSSObject['borderRadius'];
     };
@@ -17,15 +25,21 @@ export type TooltipTokensType = {
     padding: {
         [key in TooltipSize]: CSSObject['padding'];
     };
-    fontSize: {
-        [key in TooltipSize]: CSSObject['fontSize'];
-    };
-    lineHeight: {
-        [key in TooltipSize]: CSSObject['lineHeight'];
-    };
     gap: {
         [key in TooltipSize]: CSSObject['gap'];
     };
+    text: {
+        color: CSSObject['color'];
+        fontWeight: {
+            [key in TooltipSize]: CSSObject['fontWeight'];
+        };
+        fontSize: {
+            [key in TooltipSize]: CSSObject['fontSize'];
+        };
+        lineHeight: {
+            [key in TooltipSize]: CSSObject['lineHeight'];
+        };
+    };
 };
 export type ResponsiveTooltipTokens = {
     [key in keyof BreakpointType]: TooltipTokensType;

package/dist/components/VirtualList/VirtualList.d.ts

@@ -1,4 +1,13 @@
 import { default as React } from 'react';
 import { VirtualListProps, VirtualListRef, VirtualListItem } from './types';
-declare const VirtualList: React.ForwardRefExoticComponent<VirtualListProps<VirtualListItem> & React.RefAttributes<VirtualListRef>>;
+/**
+ * A simple, performant virtual list component that only renders visible items.
+ *
+ */
+declare function VirtualListInner<T extends VirtualListItem>({ items, renderItem, height, itemHeight, overscan, onScroll, onEndReached, endReachedThreshold, isLoading, hasMore, className, style, }: VirtualListProps<T>, ref: React.Ref<VirtualListRef>): import("react/jsx-runtime").JSX.Element;
+declare const VirtualList: (<T extends VirtualListItem>(props: VirtualListProps<T> & {
+    ref?: React.Ref<VirtualListRef>;
+}) => ReturnType<typeof VirtualListInner>) & {
+    displayName?: string;
+};
 export default VirtualList;

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

@@ -1,3 +1,2 @@
 export { default as VirtualList } from './VirtualList';
-export { useVirtualList } from './utils';
-export type { VirtualListItem, VirtualListProps, VirtualListRef, VirtualListRenderParams, UseVirtualListParams, UseVirtualListReturn, } from './types';
+export type { VirtualListItem, VirtualListProps, VirtualListRef, VirtualListRenderParams, } from './types';

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

@@ -1,79 +1,27 @@
 import { default as React } from 'react';
 export type VirtualListItem = {
     id: string | number;
-    height?: number;
-    data?: Record<string, unknown>;
+    [key: string]: unknown;
 };
-export type VirtualListRenderParams<T extends VirtualListItem> = {
+export type VirtualListRenderParams<T> = {
     item: T;
     index: number;
-    style: React.CSSProperties;
 };
-export type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
-export type VisibleRange = {
-    startIndex: number;
-    endIndex: number;
-};
-export type VirtualListProps<T extends VirtualListItem> = {
+export type VirtualListProps<T> = {
     items: T[];
-    itemHeight?: number | ((item: T, index: number) => number);
-    containerHeight?: number;
+    renderItem: (params: VirtualListRenderParams<T>) => React.ReactNode;
+    height?: number | string;
+    itemHeight?: number;
     overscan?: number;
     onScroll?: (scrollTop: number) => void;
-    renderItem: (params: VirtualListRenderParams<T>) => React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    getItemHeight?: (item: T, index: number) => number;
-    dynamicHeight?: boolean;
-    estimatedItemHeight?: number;
-    ssrMode?: boolean;
-    ariaRole?: 'listbox' | 'menu' | 'table' | 'list';
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    emptyState?: React.ReactNode;
-    throttleScrollMs?: number;
     onEndReached?: () => void;
     endReachedThreshold?: number;
     isLoading?: boolean;
-    loadingComponent?: React.ReactNode;
     hasMore?: boolean;
-    onRangeChange?: (range: VisibleRange) => void;
-    initialScrollOffset?: number;
-    initialScrollIndex?: number;
-    scrollAlignment?: ScrollAlignment;
-    itemsToRender?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    maintainScrollPosition?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
 };
 export type VirtualListRef = {
-    scrollTo: (scrollTop: number, smooth?: boolean) => void;
-    scrollToIndex: (index: number, alignment?: ScrollAlignment, smooth?: boolean) => void;
-    getScrollOffset: () => number;
-    recalculateHeights: () => void;
-    getVisibleRange: () => VisibleRange;
-    measureItem: (index: number) => void;
-};
-export type UseVirtualListParams<T extends VirtualListItem> = {
-    items: T[];
-    itemHeight?: number | ((item: T, index: number) => number);
-    containerHeight: number;
-    overscan?: number;
-    getItemHeight?: (item: T, index: number) => number;
-    dynamicHeight?: boolean;
-    ssrMode?: boolean;
-    estimatedItemHeight?: number;
-    itemsToRender?: number;
-    minHeight?: number;
-    maxHeight?: number;
-};
-export type UseVirtualListReturn = {
-    scrollTop: number;
-    setScrollTop: React.Dispatch<React.SetStateAction<number>>;
-    totalHeight: number;
-    itemOffsets: number[];
-    itemHeights: number[];
-    recalculateHeights: () => void;
-    startIndex: number;
-    endIndex: number;
-    measureItem: (index: number, height: number) => void;
+    scrollTo: (offset: number) => void;
+    scrollToIndex: (index: number) => void;
 };

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

@@ -1,30 +1,39 @@
-import { VirtualListItem, UseVirtualListParams, UseVirtualListReturn, ScrollAlignment } from './types';
-export declare function throttle<T extends (...args: unknown[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void;
 export declare const isBrowser: boolean;
-export declare const findEndIndexBinarySearch: (startIndex: number, viewportBottom: number, itemOffsets: number[], itemsLength: number, overscan: number) => number;
-export declare const calculateFixedHeightRange: (scrollTop: number, containerHeight: number, itemHeight: number, itemsLength: number, overscan: number, itemsToRender?: number) => {
+/**
+ * Binary search to find the first visible node
+ */
+export declare function findStartNode(scrollTop: number, nodePositions: number[], itemCount: number): number;
+/**
+ * Find the last visible node
+ */
+export declare function findEndNode(nodePositions: number[], startNode: number, itemCount: number, viewportHeight: number): number;
+/**
+ * Calculate which items should be visible based on scroll position
+ */
+export declare function calculateVisibleRange(scrollTop: number, containerHeight: number, itemOffsets: number[], itemsLength: number, overscan: number): {
     startIndex: number;
     endIndex: number;
 };
-export declare const calculateDynamicHeightRange: (scrollTop: number, containerHeight: number, itemOffsets: number[], itemsLength: number, overscan: number, itemsToRender?: number) => {
-    startIndex: number;
-    endIndex: number;
+/**
+ * Calculate child positions for virtual list items
+ */
+export declare function calculateChildPositions(itemsLength: number, itemHeight: number | undefined, defaultHeight?: number): number[];
+/**
+ * Calculate total height based on child positions and item height
+ */
+export declare function calculateTotalHeight(childPositions: number[], itemsLength: number, itemHeight: number | undefined, defaultHeight?: number): number;
+/**
+ * Calculate visible range with overscan
+ */
+export declare function calculateVisibleNodes(firstVisibleNode: number, lastVisibleNode: number, itemsLength: number, overscan: number): {
+    startNode: number;
+    endNode: number;
+    visibleNodeCount: number;
 };
-export declare const calculateItemHeights: <T extends VirtualListItem>(items: T[], itemHeight?: number | ((item: T, index: number) => number), getItemHeight?: (item: T, index: number) => number, estimatedItemHeight?: number, minHeight?: number, maxHeight?: number, measuredHeights?: Map<number, number>) => number[];
-export declare const constrainHeight: (height: number, minHeight?: number, maxHeight?: number) => number;
-export declare const calculateItemOffsets: (itemHeights: number[]) => {
+/**
+ * Calculate total height and offsets for all items
+ */
+export declare function calculateItemPositions(itemsLength: number, itemHeight: number | undefined, measuredHeights: Map<number, number>, defaultHeight?: number): {
     totalHeight: number;
     itemOffsets: number[];
 };
-export declare function useVirtualList<T extends VirtualListItem>({ items, itemHeight, containerHeight, overscan, getItemHeight, ssrMode, estimatedItemHeight, itemsToRender, minHeight, maxHeight, }: UseVirtualListParams<T>): UseVirtualListReturn;
-export declare const handleVirtualListKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, ariaRole: string, totalHeight: number, containerRef: React.RefObject<HTMLDivElement | null>, onKeyDown?: (event: React.KeyboardEvent) => void) => void;
-export declare const calculateScrollForAlignment: (index: number, alignment: ScrollAlignment, containerHeight: number, itemOffsets: number[], itemHeights: number[], itemsLength: number) => number;
-export declare const scrollToPosition: (containerRef: React.RefObject<HTMLDivElement | null>, scrollTop: number, smooth?: boolean) => void;
-export declare const scrollToIndex: (containerRef: React.RefObject<HTMLDivElement | null>, index: number, itemOffsets: number[], itemHeights: number[], itemsLength: number, containerHeight: number, alignment?: ScrollAlignment, smooth?: boolean) => void;
-export declare const createVirtualItemStyle: (top: number, height: number, useAbsolute?: boolean) => React.CSSProperties;
-export declare const setupResizeObserver: (dynamicHeight: boolean, isMounted: boolean, containerRef: React.RefObject<HTMLDivElement | null>, measureItem: (index: number, height: number) => void) => (() => void) | undefined;
-export declare const checkEndReached: (scrollTop: number, totalHeight: number, containerHeight: number, threshold: number) => boolean;
-export declare const usePreviousRange: (startIndex: number, endIndex: number, onRangeChange?: (range: {
-    startIndex: number;
-    endIndex: number;
-}) => void) => void;

package/dist/context/ThemeContext.d.ts

@@ -1,4 +1,4 @@
-import { SearchInputTokensType } from '../components/Inputs/SearchInput/searchInput.tokens';
+import { ResponsiveSearchInputTokens } from '../components/Inputs/SearchInput/searchInput.tokens';
 import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { ResponsiveTextAreaTokens } from '../components/Inputs/TextArea/textarea.token';
 import { ResponsiveRadioTokens } from '../components/Radio/radio.token';
@@ -9,14 +9,14 @@ import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
 import { ResponsiveOTPInputTokens } from '../components/Inputs/OTPInput/otpInput.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 { ResponsiveMultiValueInputTokens } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
 import { ResponsiveDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
 import { ResponsiveCheckboxTokens } from '../components/Checkbox/checkbox.token';
 import { ResponsiveTabsTokens } from '../components/Tabs/tabs.token';
 import { ResponsiveButtonTokens } from '../components/Button/button.tokens';
-import { ModalTokensType } from '../components/Modal/modal.tokens';
+import { ResponsiveModalTokens } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
-import { PopoverTokenType } from '../components/Popover/popover.tokens';
+import { ResponsivePopoverTokens } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
@@ -24,19 +24,23 @@ 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';
-import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
-import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
+import { ResponsiveProgressBarTokens } from '../components/ProgressBar/progressbar.tokens';
+import { ResponsiveDrawerTokens } from '../components/Drawer/drawer.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
 import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
 import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
+import { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens';
+import { ResponsiveAvatarGroupTokens } from '../components/AvatarGroup/avatarGroup.tokens';
+import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
+import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
 import { ThemeType } from '../tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
-    SEARCH_INPUT?: SearchInputTokensType;
+    SEARCH_INPUT?: ResponsiveSearchInputTokens;
     TEXT_AREA?: ResponsiveTextAreaTokens;
     RADIO?: ResponsiveRadioTokens;
     SWITCH?: ResponsiveSwitchTokens;
@@ -46,14 +50,14 @@ export type ComponentTokenType = {
     OTP_INPUT?: ResponsiveOTPInputTokens;
     TOOLTIP?: ResponsiveTooltipTokens;
     UNIT_INPUT?: ResponsiveUnitInputTokens;
-    MULTI_VALUE_INPUT?: MultiValueInputTokensType;
+    MULTI_VALUE_INPUT?: ResponsiveMultiValueInputTokens;
     DROPDOWN_INPUT?: ResponsiveDropdownInputTokens;
     CHECKBOX?: ResponsiveCheckboxTokens;
     TABS?: ResponsiveTabsTokens;
     BUTTON?: ResponsiveButtonTokens;
-    MODAL?: ModalTokensType;
+    MODAL?: ResponsiveModalTokens;
     BREADCRUMB?: ResponsiveBreadcrumbTokens;
-    POPOVER?: PopoverTokenType;
+    POPOVER?: ResponsivePopoverTokens;
     MENU?: ResponsiveMenuTokensType;
     MULTI_SELECT?: ResponsiveMultiSelectTokens;
     SINGLE_SELECT?: ResponsiveSingleSelectTokens;
@@ -61,14 +65,18 @@ export type ComponentTokenType = {
     CALENDAR?: ResponsiveCalendarTokens;
     ACCORDION?: ResponsiveAccordionTokens;
     STAT_CARD?: ResponsiveStatCardTokens;
-    PROGRESS_BAR?: ProgressBarTokenType;
-    DRAWER?: DrawerTokensType;
+    PROGRESS_BAR?: ResponsiveProgressBarTokens;
+    DRAWER?: ResponsiveDrawerTokens;
     CHARTS?: ResponsiveChartTokens;
     SNACKBAR?: ResponsiveSnackbarTokens;
     KEYVALUEPAIR?: ResponsiveKeyValuePairTokens;
     CARD?: ResponsiveCardTokens;
     SKELETON?: ResponsiveSkeletonTokens;
     TOPBAR?: ResponsiveTopbarTokens;
+    AVATAR?: ResponsiveAvatarTokens;
+    AVATAR_GROUP?: ResponsiveAvatarGroupTokens;
+    SIDEBAR?: ResponsiveSidebarTokens;
+    CODE_BLOCK?: ResponsiveCodeBlockTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -1,4 +1,4 @@
-import { SearchInputTokensType } from '../components/Inputs/SearchInput/searchInput.tokens';
+import { ResponsiveSearchInputTokens } from '../components/Inputs/SearchInput/searchInput.tokens';
 import { ResponsiveTextAreaTokens } from '../components/Inputs/TextArea/textarea.token';
 import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { ResponsiveRadioTokens } from '../components/Radio/radio.token';
@@ -12,20 +12,19 @@ import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
 import { ResponsiveOTPInputTokens } from '../components/Inputs/OTPInput/otpInput.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 { ResponsiveMultiValueInputTokens } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
 import { ResponsiveDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
 import { ResponsiveButtonTokens } from '../components/Button/button.tokens';
-import { ModalTokensType } from '../components/Modal/modal.tokens';
+import { ResponsiveModalTokens } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
-import { PopoverTokenType } from '../components/Popover/popover.tokens';
+import { ResponsivePopoverTokens } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.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';
-import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
-import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
+import { ResponsiveProgressBarTokens } from '../components/ProgressBar/progressbar.tokens';
+import { ResponsiveDrawerTokens } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
@@ -33,4 +32,9 @@ import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValu
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens;
+import { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens';
+import { ResponsiveAvatarGroupTokens } from '../components/AvatarGroup/avatarGroup.tokens';
+import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
+import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
+import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveCodeBlockTokens;