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

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

@@ -0,0 +1,15 @@
+import { TabsV2Size, TabsV2Variant } from './tabsV2.types';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import * as React from 'react';
+declare const TabsV2: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default TabsV2;

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

@@ -0,0 +1,2 @@
+declare const TabsV2Content: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default TabsV2Content;

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

@@ -0,0 +1,14 @@
+import { TabsV2Variant } from './tabsV2.types';
+import * as React from 'react';
+declare const TabsV2List: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: TabsV2Variant;
+    size?: import('./tabsV2.types').TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default TabsV2List;

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { TabsV2Variant } from './tabsV2.types';
+declare const TabsV2Trigger: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    value: string;
+    variant?: TabsV2Variant;
+    size?: import('./tabsV2.types').TabsV2Size;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    children: string | number;
+    disabled?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default TabsV2Trigger;

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

@@ -0,0 +1,8 @@
+export { default as TabsV2 } from './TabsV2';
+export { default as TabsV2List } from './TabsV2List';
+export { default as TabsV2Trigger } from './TabsV2Trigger';
+export { default as TabsV2Content } from './TabsV2Content';
+export { TabsV2Provider, useTabsV2Context } from './tabsV2.context';
+export type { TabsV2ContextValue } from './tabsV2.context';
+export { getTabsV2Tokens, type TabsV2TokensType, type ResponsiveTabsV2Tokens, } from './tabsV2.tokens';
+export * from './tabsV2.types';

package/dist/components/TabsV2/tabsV2.context.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { TabsV2Variant, TabsV2Size } from './tabsV2.types';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+export type TabsV2ContextValue = {
+    variant: TabsV2Variant;
+    size: TabsV2Size;
+    expanded: boolean;
+    fitContent: boolean;
+    disabled: boolean;
+    showSkeleton: boolean;
+    skeletonVariant: SkeletonVariant;
+    stickyHeader: boolean;
+    offsetTop: number;
+    activeTab: string;
+};
+export declare const TabsV2Context: import('react').Context<TabsV2ContextValue>;
+export declare const TabsV2Provider: ({ value, children, }: {
+    value: TabsV2ContextValue;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTabsV2Context: () => TabsV2ContextValue;

package/dist/components/TabsV2/tabsV2.dark.tokens.d.ts

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

package/dist/components/TabsV2/tabsV2.light.tokens.d.ts

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

package/dist/components/TabsV2/tabsV2.tokens.d.ts

@@ -0,0 +1,97 @@
+import { CSSObject } from 'styled-components';
+import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type TabsV2TokensType = {
+    width: CSSObject['width'];
+    outline: CSSObject['outline'];
+    tabList: {
+        gap: CSSObject['gap'];
+        backgroundColor: {
+            [key in TabsV2Variant]: CSSObject['backgroundColor'];
+        };
+        borderRadius: {
+            [key in TabsV2Size]: {
+                [key in TabsV2Variant]: CSSObject['borderRadius'];
+            };
+        };
+        padding: {
+            [key in TabsV2Size]: {
+                [key in TabsV2Variant]: {
+                    top: CSSObject['paddingTop'];
+                    right: CSSObject['paddingRight'];
+                    bottom: CSSObject['paddingBottom'];
+                    left: CSSObject['paddingLeft'];
+                };
+            };
+        };
+        activeIndicator: {
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+            position: {
+                bottom: CSSObject['bottom'];
+            };
+            transition: CSSObject['transition'];
+            zIndex: CSSObject['zIndex'];
+        };
+        stickyHeader: {
+            boxShadow: CSSObject['boxShadow'];
+            zIndex: CSSObject['zIndex'];
+        };
+        trigger: {
+            gap: CSSObject['gap'];
+            icon: {
+                maxWidth: CSSObject['maxWidth'];
+            };
+            backgroundColor: {
+                [key in TabsV2Variant]: {
+                    [key in TabsV2State]: CSSObject['backgroundColor'];
+                };
+            };
+            borderRadius: {
+                [key in TabsV2Size]: {
+                    [key in TabsV2Variant]: CSSObject['borderRadius'];
+                };
+            };
+            border: {
+                [key in TabsV2Variant]: CSSObject['border'];
+            };
+            padding: {
+                [key in TabsV2Size]: {
+                    [key in TabsV2Variant]: {
+                        top: CSSObject['paddingTop'];
+                        right: CSSObject['paddingRight'];
+                        bottom: CSSObject['paddingBottom'];
+                        left: CSSObject['paddingLeft'];
+                    };
+                };
+            };
+            text: {
+                color: {
+                    [key in TabsV2Variant]: {
+                        [key in TabsV2State]: CSSObject['color'];
+                    };
+                };
+                fontSize: {
+                    [key in TabsV2Size]: CSSObject['fontSize'];
+                };
+                fontWeight: {
+                    [key in TabsV2Size]: CSSObject['fontWeight'];
+                };
+            };
+            closeButton: {
+                width: CSSObject['width'];
+                borderRadius: CSSObject['borderRadius'];
+                backgroundColor: {
+                    [key in TabsV2State]: CSSObject['backgroundColor'];
+                };
+            };
+            transition: CSSObject['transition'];
+        };
+    };
+};
+export type ResponsiveTabsV2Tokens = {
+    [key in keyof BreakpointType]: TabsV2TokensType;
+};
+export declare const getTabsV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTabsV2Tokens;

package/dist/components/TabsV2/tabsV2.types.d.ts

@@ -0,0 +1,68 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare enum TabsV2Variant {
+    BOXED = "boxed",
+    FLOATING = "floating",
+    UNDERLINE = "underline",
+    PILLS = "pills"
+}
+export declare enum TabsV2Size {
+    MD = "md",
+    LG = "lg"
+}
+export type TabsV2State = 'default' | 'hover' | 'active' | 'disabled';
+export type TabsV2TabItem = {
+    value: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    newItem?: boolean;
+};
+export type TabsV2Props = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+};
+export type TabsV2ListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+};
+export type TabsV2TriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    value: string;
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    children: string | number;
+    disabled?: boolean;
+    /**
+     * When true, renders a close (X) affordance inside the trigger.
+     * Useful for "new/temporary" tabs that can be removed.
+     */
+    closable?: boolean;
+    onClose?: () => void;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+};
+export type TabsV2ContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;

package/dist/components/TabsV2/tabsV2.utils.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import { TabsV2TabItem } from './tabsV2.types';
+export declare const processTabsWithConcatenation: (tabs: TabsV2TabItem[]) => TabsV2TabItem[];
+export declare const prepareDropdownItems: (tabs: TabsV2TabItem[], originalItems?: TabsV2TabItem[]) => {
+    items: {
+        value: string;
+        label: string;
+    }[];
+}[];
+export declare const calculateTabIndicatorPosition: (tabElement: HTMLElement, listElement: HTMLDivElement) => {
+    tabLeft: number;
+    tabWidth: number;
+};
+export declare const getActualTabValue: (processedValue: string, originalTabValues: Set<string>) => string;
+export declare const isConcatenatedTab: (tabValue: string, originalTabValues: Set<string>) => boolean;
+export declare const extractOriginalValues: (concatenatedValue: string) => string[];
+export declare const mergeItemsWithDefaultOrdering: (items: TabsV2TabItem[], defaultTabs: Set<string>, newlyAddedTabs: Set<string>) => TabsV2TabItem[];
+export declare const applyTabItemDisplayDefaults: (items: TabsV2TabItem[], disabled: boolean, showSkeleton: boolean, skeletonVariant: SkeletonVariant) => TabsV2TabItem[];

package/dist/components/common/virtualViewport.d.ts

@@ -0,0 +1,12 @@
+export declare const VIRTUAL_MIN_VIEWPORT = 120;
+export declare const VIRTUAL_DEFAULT_VIEWPORT = 340;
+/**
+ * Base viewport height for virtualized menus/lists.
+ * Ensures a reasonable minimum height even when maxHeight is small.
+ */
+export declare const getBaseVirtualViewportHeight: (maxHeight?: number) => number;
+/**
+ * Adjusted viewport height when some vertical space is reserved
+ * (e.g. search header, footer). Always enforces a minimum.
+ */
+export declare const getAdjustedVirtualViewportHeight: (maxHeight: number | undefined, reserved: number) => number;

package/dist/context/ThemeContext.d.ts

@@ -21,6 +21,7 @@ import { ResponsiveModalTokens } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
 import { ResponsivePopoverTokens } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
+import { ResponsiveMenuV2TokensType } from '../components/MenuV2/menuV2.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveTableTokens } from '../components/DataTable/dataTable.tokens';
@@ -58,9 +59,15 @@ import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
 import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
+import { ResponsiveStatCardV2Tokens } from '../components/StatCardV2/statcardV2.tokens';
 import { ResponsiveTooltipV2Tokens } from '../components/TooltipV2/tooltipV2.tokens';
 import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
 import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
+import { ResponsiveTabsV2Tokens } from '../components/TabsV2/tabsV2.tokens';
+import { ResponsiveCodeEditorV2Tokens } from '../components/CodeEditorV2/codeEditorV2.tokens';
+import { ResponsiveProgressBarV2Tokens } from '../components/ProgressBarV2/progressBarV2.tokens';
+import { ResponsiveBreadcrumbV2Tokens } from '../components/BreadcrumbV2/breadcrumbV2.tokens';
+import { ResponsiveMultiValueInputV2Tokens } from '../components/InputsV2/MultiValueInputV2/MultiValueInputV2.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -82,6 +89,7 @@ export type ComponentTokenType = {
     BREADCRUMB?: ResponsiveBreadcrumbTokens;
     POPOVER?: ResponsivePopoverTokens;
     MENU?: ResponsiveMenuTokensType;
+    MENU_V2?: ResponsiveMenuV2TokensType;
     MULTI_SELECT?: ResponsiveMultiSelectTokens;
     SINGLE_SELECT?: ResponsiveSingleSelectTokens;
     TABLE?: ResponsiveTableTokens;
@@ -119,9 +127,15 @@ export type ComponentTokenType = {
     CHARTSV2?: ResponsiveChartV2Tokens;
     CHECKBOXV2?: ResponsiveCheckboxV2Tokens;
     KEYVALUEPAIRV2?: ResponsiveKeyValuePairV2Tokens;
+    STATCARDV2?: ResponsiveStatCardV2Tokens;
     TOOLTIPV2?: ResponsiveTooltipV2Tokens;
     RADIOV2?: ResponsiveRadioV2Tokens;
     POPOVERV2?: ResponsivePopoverV2Tokens;
+    TABSV2?: ResponsiveTabsV2Tokens;
+    BREADCRUMBV2?: ResponsiveBreadcrumbV2Tokens;
+    CODEEDITORV2?: ResponsiveCodeEditorV2Tokens;
+    PROGRESS_BARV2?: ResponsiveProgressBarV2Tokens;
+    MULTI_VALUE_INPUT_V2?: ResponsiveMultiValueInputV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -20,6 +20,7 @@ import { ResponsiveModalTokens } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
 import { ResponsivePopoverTokens } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
+import { ResponsiveMenuV2TokensType } from '../components/MenuV2/menuV2.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { ResponsiveTableTokens } from '../components/DataTable/dataTable.tokens';
 import { ResponsiveCalendarTokens } from '../components/DateRangePicker/dateRangePicker.tokens';
@@ -56,6 +57,12 @@ import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
 import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
+import { ResponsiveStatCardV2Tokens } from '../components/StatCardV2/statcardV2.tokens';
 import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
 import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTextInputV2Tokens;
+import { ResponsiveTabsV2Tokens } from '../components/TabsV2/tabsV2.tokens';
+import { ResponsiveBreadcrumbV2Tokens } from '../components/BreadcrumbV2/breadcrumbV2.tokens';
+import { ResponsiveCodeEditorV2Tokens } from '../components/CodeEditorV2/codeEditorV2.tokens';
+import { ResponsiveProgressBarV2Tokens } from '../components/ProgressBarV2/progressBarV2.tokens';
+import { ResponsiveMultiValueInputV2Tokens } from '../components/InputsV2/MultiValueInputV2/MultiValueInputV2.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMenuV2TokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveStatCardV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTabsV2Tokens | ResponsiveBreadcrumbV2Tokens | ResponsiveProgressBarV2Tokens | ResponsiveMultiValueInputV2Tokens | ResponsiveCodeEditorV2Tokens;

package/dist/main.d.ts

@@ -45,3 +45,4 @@ export * from './tokens';
 export * from './components/ChartsV2';
 export * from './components/Timeline';
 export * from './components/AlertV2';
+export * from './components/PopoverV2';