@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.6

package/dist/components/SelectorV2/RadioV2/radioV2.tokens.types.d.ts

@@ -0,0 +1,80 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types';
+export type RadioV2IndicatorState = 'active' | 'inactive';
+export type RadioV2TokensType = {
+    gap: CSSObject['gap'];
+    group: {
+        gap: CSSObject['gap'];
+    };
+    radio: {
+        indicator: {
+            [key in RadioV2IndicatorState]: {
+                backgroundColor: {
+                    [key in SelectorV2InteractionState]: CSSObject['backgroundColor'];
+                };
+                borderColor: {
+                    [key in SelectorV2InteractionState]: CSSObject['borderColor'];
+                };
+            };
+        };
+        activeIndicator: {
+            active: {
+                backgroundColor: {
+                    [key in Exclude<SelectorV2InteractionState, 'hover' | 'error'>]: CSSObject['backgroundColor'];
+                };
+            };
+        };
+        height: {
+            [key in SelectorV2Size]: CSSObject['height'];
+        };
+        borderWidth: {
+            [key in RadioV2IndicatorState]: {
+                [key in SelectorV2InteractionState]: number;
+            };
+        };
+    };
+    content: {
+        gap: CSSObject['gap'];
+        label: {
+            gap: CSSObject['gap'];
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
+                };
+            };
+        };
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveRadioV2Tokens = {
+    [key in keyof BreakpointType]: RadioV2TokensType;
+};

package/dist/components/SelectorV2/RadioV2/radioV2.types.d.ts

@@ -1,8 +1,8 @@
 import { InputHTMLAttributes, ReactElement } from 'react';
-import { RadioV2TokensType } from './radioV2.tokens';
+import { RadioV2TokensType } from './radioV2.tokens.types';
 import { CSSObject } from 'styled-components';
 import { SelectorV2Size } from '../selectorV2.types';
-export type RadioV2IndicatorState = 'active' | 'inactive';
+export type { RadioV2IndicatorState } from './radioV2.tokens.types';
 export type RadioV2ContentProps = {
     uniqueId: string;
     disabled: boolean;

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

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

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

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

package/dist/components/SelectorV2/SwitchV2/switchV2.tokens.d.ts

@@ -1,77 +1,5 @@
 import { Theme } from '../../../context/theme.enum';
-import { CSSObject } from 'styled-components';
-import { SwitchV2Variant } from './switchV2.types';
-import { BreakpointType } from '../../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types';
-export type SwitchV2TokensType = {
-    gap: CSSObject['gap'];
-    switch: {
-        height: {
-            [key in SelectorV2Size]: CSSObject['height'];
-        };
-        width: {
-            [key in SelectorV2Size]: CSSObject['width'];
-        };
-        backgroundColor: {
-            [key in SwitchV2Variant]: {
-                [key in SelectorV2InteractionState]: CSSObject['backgroundColor'];
-            };
-        };
-        thumb: {
-            backgroundColor: CSSObject['backgroundColor'];
-            border: CSSObject['border'];
-            width: {
-                [key in SelectorV2Size]: CSSObject['width'];
-            };
-            height: {
-                [key in SelectorV2Size]: CSSObject['height'];
-            };
-            outline: CSSObject['outline'];
-        };
-    };
-    content: {
-        gap: CSSObject['gap'];
-        label: {
-            gap: CSSObject['gap'];
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color'];
-            };
-            fontSize: {
-                [key in SelectorV2Size]: CSSObject['fontSize'];
-            };
-            fontWeight: {
-                [key in SelectorV2Size]: CSSObject['fontWeight'];
-            };
-            lineHeight: {
-                [key in SelectorV2Size]: CSSObject['lineHeight'];
-            };
-            slot: {
-                maxHeight: {
-                    [key in SelectorV2Size]: CSSObject['maxHeight'];
-                };
-            };
-        };
-        subLabel: {
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color'];
-            };
-            fontSize: {
-                [key in SelectorV2Size]: CSSObject['fontSize'];
-            };
-            fontWeight: {
-                [key in SelectorV2Size]: CSSObject['fontWeight'];
-            };
-            lineHeight: {
-                [key in SelectorV2Size]: CSSObject['lineHeight'];
-            };
-        };
-        required: {
-            color: CSSObject['color'];
-        };
-    };
-};
-export type ResponsiveSwitchV2Tokens = {
-    [key in keyof BreakpointType]: SwitchV2TokensType;
-};
+import { ResponsiveSwitchV2Tokens } from './switchV2.tokens.types';
+export type { SwitchV2TokensType, ResponsiveSwitchV2Tokens, } from './switchV2.tokens.types';
 export declare const getSwitchV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveSwitchV2Tokens;

package/dist/components/SelectorV2/SwitchV2/switchV2.tokens.types.d.ts

@@ -0,0 +1,74 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types';
+export type SwitchV2Variant = 'checked' | 'unchecked';
+export type SwitchV2TokensType = {
+    gap: CSSObject['gap'];
+    switch: {
+        height: {
+            [key in SelectorV2Size]: CSSObject['height'];
+        };
+        width: {
+            [key in SelectorV2Size]: CSSObject['width'];
+        };
+        backgroundColor: {
+            [key in SwitchV2Variant]: {
+                [key in SelectorV2InteractionState]: CSSObject['backgroundColor'];
+            };
+        };
+        thumb: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            width: {
+                [key in SelectorV2Size]: CSSObject['width'];
+            };
+            height: {
+                [key in SelectorV2Size]: CSSObject['height'];
+            };
+            outline: CSSObject['outline'];
+        };
+    };
+    content: {
+        gap: CSSObject['gap'];
+        label: {
+            gap: CSSObject['gap'];
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
+                };
+            };
+        };
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveSwitchV2Tokens = {
+    [key in keyof BreakpointType]: SwitchV2TokensType;
+};

package/dist/components/SelectorV2/SwitchV2/switchV2.types.d.ts

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react';
-import { SwitchV2TokensType } from './switchV2.tokens';
+import { SwitchV2TokensType, SwitchV2Variant } from './switchV2.tokens.types';
 import { CSSObject } from 'styled-components';
 import { SelectorV2Size } from '../selectorV2.types';
-export type SwitchV2Variant = 'checked' | 'unchecked';
+export type { SwitchV2Variant };
 export type SwitchV2ButtonProps = {
     id: string;
     checked?: boolean;

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

@@ -11,7 +11,7 @@ export type SidebarContentProps = {
     sidebarNavId?: string;
     showTopBlur: boolean;
     showBottomBlur: boolean;
-    data: DirectoryData[];
+    data: DirectoryData[] | null;
     idPrefix: string;
     activeItem?: string | null;
     onActiveItemChange?: (item: string | null) => void;

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

@@ -1,25 +1,13 @@
 import { ReactNode } from 'react';
 import { DirectoryData, NavbarItem } from '../Directory/types';
-import { MerchantInfo } from '../Topbar/types';
-export type LeftPanelItem = {
-    label: string;
-    icon: ReactNode;
-    value?: string;
-    showInPanel?: boolean;
-};
-export type LeftPanelInfo = {
-    items: LeftPanelItem[];
-    selected: string;
-    onSelect: (value: string) => void;
-    tenantSlot1?: ReactNode;
-    tenantSlot2?: ReactNode;
-    tenantFooter?: ReactNode;
-};
+import { MerchantInfo, LeftPanelInfo, TenantBadge } from '../shared/layoutTypes';
+export type { LeftPanelInfo, LeftPanelItem, TenantBadge, } from '../shared/layoutTypes';
 export type TenantItem = {
     label: string;
     value?: string;
     icon: ReactNode;
     showInPanel?: boolean;
+    badge?: TenantBadge;
 };
 export type SidebarMerchantInfo = {
     items: Array<{
@@ -34,7 +22,7 @@ export type SidebarStateChangeType = 'collapsed' | 'expanded' | 'intermediate';
 export type SidebarProps = {
     showLeftPanel?: boolean;
     children: ReactNode;
-    data: DirectoryData[];
+    data: DirectoryData[] | null;
     leftPanel?: LeftPanelInfo;
     topbar: ReactNode;
     footer?: ReactNode;

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

@@ -20,7 +20,7 @@ export declare const getDefaultMerchantInfo: () => {
 };
 export declare const useTopbarAutoHide: (enableTopbarAutoHide: boolean) => boolean;
 export declare const isControlledSidebar: (isExpanded: boolean | undefined) => boolean;
-export declare const getMobileNavigationItems: (directory: DirectoryData[]) => MobileNavigationItem[];
+export declare const getMobileNavigationItems: (directory?: DirectoryData[] | null) => MobileNavigationItem[];
 /**
  * Parse CSS unit values to numbers (e.g., "16px" -> 16)
  * Returns 0 for invalid values

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens';
+import { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens.types';
 export declare const getMobileNavigationV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveMobileNavigationV2Tokens;

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens';
+import { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens.types';
 export declare const getMobileNavigationV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveMobileNavigationV2Tokens;

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.d.ts

@@ -1,87 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { BreakpointType } from '../../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { Theme } from '../../../context/theme.enum';
-export type MobileNavigationV2State = 'default' | 'active';
-export type MobileNavigationV2TokenType = {
-    /**
-     * MobileNavigationV2 anatomy
-     * - container: floating dock surface
-     * - layout: padding/gaps/safe-area offsets used for height calculations
-     * - row: a horizontal strip of items (primary and optional secondary rows)
-     * - item: each navigation button
-     * - primaryAction: optional center primary action button
-     */
-    container: {
-        zIndex: CSSObject['zIndex'];
-        /** Base/fallback dock fill; use a color that already includes alpha (e.g. `#RRGGBBAA`). */
-        backgroundColor: CSSObject['backgroundColor'];
-        /** Optional fill when `backdrop-filter` is supported (typically slightly lower alpha). */
-        background?: CSSObject['background'];
-        border: CSSObject['border'];
-        borderWidth: CSSObject['borderWidth'];
-        borderRadius: CSSObject['borderRadius'];
-        backdropFilter: CSSObject['backdropFilter'];
-        transition: CSSObject['transition'];
-    };
-    layout: {
-        safeAreaOffset: CSSObject['padding'];
-        floatingPadding: CSSObject['padding'];
-        primaryActionMarginX: CSSObject['margin'];
-        itemLabelMarginTop: CSSObject['margin'];
-        itemLabelLineHeight: CSSObject['lineHeight'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
-        paddingRight: CSSObject['paddingRight'];
-        gap: CSSObject['gap'];
-        rowPaddingTop: CSSObject['paddingTop'];
-        rowPaddingBottom: CSSObject['paddingBottom'];
-        rowPaddingLeft: CSSObject['paddingLeft'];
-        rowPaddingRight: CSSObject['paddingRight'];
-        rowGap: CSSObject['gap'];
-    };
-    item: {
-        width: CSSObject['width'];
-        height: CSSObject['height'];
-        borderRadius: CSSObject['borderRadius'];
-        gap: CSSObject['gap'];
-        backgroundColor: {
-            [key in MobileNavigationV2State]: CSSObject['backgroundColor'];
-        };
-        color: {
-            [key in MobileNavigationV2State]: CSSObject['color'];
-        };
-        fontWeight: CSSObject['fontWeight'];
-        icon: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            borderRadius: CSSObject['borderRadius'];
-            transition: CSSObject['transition'];
-            /** SVG stroke width for Lucide-style icons. */
-            strokeWidth: number;
-        };
-        text: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            textAlign: CSSObject['textAlign'];
-        };
-    };
-    primaryAction: {
-        width: CSSObject['width'];
-        height: CSSObject['height'];
-        borderRadius: CSSObject['borderRadius'];
-        background: CSSObject['background'];
-        boxShadow: CSSObject['boxShadow'];
-        color: CSSObject['color'];
-        icon: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            strokeWidth: number;
-        };
-    };
-};
-export type ResponsiveMobileNavigationV2Tokens = {
-    [key in keyof BreakpointType]: MobileNavigationV2TokenType;
-};
+import { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens.types';
+export type { MobileNavigationV2State, MobileNavigationV2TokenType, ResponsiveMobileNavigationV2Tokens, } from './mobile.tokens.types';
 export declare const getMobileNavigationV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMobileNavigationV2Tokens;

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.types.d.ts

@@ -0,0 +1,84 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+export type MobileNavigationV2State = 'default' | 'active';
+export type MobileNavigationV2TokenType = {
+    /**
+     * MobileNavigationV2 anatomy
+     * - container: floating dock surface
+     * - layout: padding/gaps/safe-area offsets used for height calculations
+     * - row: a horizontal strip of items (primary and optional secondary rows)
+     * - item: each navigation button
+     * - primaryAction: optional center primary action button
+     */
+    container: {
+        zIndex: CSSObject['zIndex'];
+        /** Base/fallback dock fill; use a color that already includes alpha (e.g. `#RRGGBBAA`). */
+        backgroundColor: CSSObject['backgroundColor'];
+        /** Optional fill when `backdrop-filter` is supported (typically slightly lower alpha). */
+        background?: CSSObject['background'];
+        border: CSSObject['border'];
+        borderWidth: CSSObject['borderWidth'];
+        borderRadius: CSSObject['borderRadius'];
+        backdropFilter: CSSObject['backdropFilter'];
+        transition: CSSObject['transition'];
+    };
+    layout: {
+        safeAreaOffset: CSSObject['padding'];
+        floatingPadding: CSSObject['padding'];
+        primaryActionMarginX: CSSObject['margin'];
+        itemLabelMarginTop: CSSObject['margin'];
+        itemLabelLineHeight: CSSObject['lineHeight'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        gap: CSSObject['gap'];
+        rowPaddingTop: CSSObject['paddingTop'];
+        rowPaddingBottom: CSSObject['paddingBottom'];
+        rowPaddingLeft: CSSObject['paddingLeft'];
+        rowPaddingRight: CSSObject['paddingRight'];
+        rowGap: CSSObject['gap'];
+    };
+    item: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        borderRadius: CSSObject['borderRadius'];
+        gap: CSSObject['gap'];
+        backgroundColor: {
+            [key in MobileNavigationV2State]: CSSObject['backgroundColor'];
+        };
+        color: {
+            [key in MobileNavigationV2State]: CSSObject['color'];
+        };
+        fontWeight: CSSObject['fontWeight'];
+        icon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+            transition: CSSObject['transition'];
+            /** SVG stroke width for Lucide-style icons. */
+            strokeWidth: number;
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            textAlign: CSSObject['textAlign'];
+        };
+    };
+    primaryAction: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        borderRadius: CSSObject['borderRadius'];
+        background: CSSObject['background'];
+        boxShadow: CSSObject['boxShadow'];
+        color: CSSObject['color'];
+        icon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            strokeWidth: number;
+        };
+    };
+};
+export type ResponsiveMobileNavigationV2Tokens = {
+    [key in keyof BreakpointType]: MobileNavigationV2TokenType;
+};

package/dist/components/SidebarV2/SidebarV2MobileNavigation/types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import { NavbarItem } from '../../Directory/types';
-import { MobileNavigationV2TokenType } from './mobile.tokens';
+import { MobileNavigationV2TokenType } from './mobile.tokens.types';
 export type SidebarV2MobileNavigationItem = NavbarItem & {
     sectionLabel?: string;
 };

package/dist/components/SidebarV2/SidebarV2Panel.d.ts

@@ -18,7 +18,7 @@ export type SidebarV2PanelProps = {
     sidebarCollapseKey: string;
     onToggle: () => void;
     sidebarNavId?: string;
-    data: DirectoryData[];
+    data: DirectoryData[] | null;
     idPrefix: string;
     activeItem?: string | null;
     onActiveItemChange?: (item: string | null) => void;

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

@@ -3,7 +3,7 @@ export { default as SidebarV2Panel } from './SidebarV2Panel';
 export { default as SidebarV2Header } from './SidebarV2Header';
 export { default as SidebarV2Footer } from './SidebarV2Footer';
 export { SecondarySidebar } from './SecondarySidebar';
-export type { SecondarySidebarInfo, SecondarySidebarItem, SidebarV2Props, SidebarV2StateChangeType, } from './types';
+export type { SecondarySidebarInfo, SecondarySidebarItem, SidebarV2Props, SidebarV2StateChangeType, TenantBadge, } from './types';
 export { SidebarV2StateChange } from './types';
 export type { SidebarV2PanelProps } from './SidebarV2Panel';
 export * from './sidebarV2.tokens';

package/dist/components/SidebarV2/sidebarV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens';
+import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens.types';
 export declare const getSidebarV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveSidebarV2Tokens;

package/dist/components/SidebarV2/sidebarV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens';
+import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens.types';
 export declare const getSidebarV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveSidebarV2Tokens;

package/dist/components/SidebarV2/sidebarV2.tokens.d.ts

@@ -1,106 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
-export type SidebarV2ItemInteractionStates = 'default' | 'hover' | 'active';
-export type SidebarV2TokensType = {
-    container: {
-        zIndex: CSSObject['zIndex'];
-        backgroundColor: CSSObject['backgroundColor'];
-        borderRight: CSSObject['borderRight'];
-        hoverPreview: {
-            boxShadow: CSSObject['boxShadow'];
-        };
-        maxWidth: {
-            withLeftPanel: CSSObject['maxWidth'];
-            withoutLeftPanel: CSSObject['maxWidth'];
-            iconOnly: CSSObject['maxWidth'];
-        };
-    };
-    leftPanel: {
-        width: CSSObject['width'];
-        backgroundColor: CSSObject['backgroundColor'];
-        borderRight: CSSObject['borderRight'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
-        paddingRight: CSSObject['paddingRight'];
-        gap: CSSObject['gap'];
-        item: {
-            width: CSSObject['width'];
-            borderRadius: CSSObject['borderRadius'];
-            border: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['border'];
-            };
-            backgroundColor: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor'];
-            };
-        };
-    };
-    header: {
-        zIndex: CSSObject['zIndex'];
-        backgroundColor: CSSObject['backgroundColor'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
-        paddingRight: CSSObject['paddingRight'];
-        gap: CSSObject['gap'];
-        borderBottom: CSSObject['borderBottom'];
-        borderBottomWidth: CSSObject['borderWidth'];
-        scrolledBorderColor: CSSObject['color'];
-        toggleButton: {
-            borderRadius: CSSObject['borderRadius'];
-            padding: CSSObject['padding'];
-            backgroundColor: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor'];
-            };
-            width: CSSObject['width'];
-            iconColor: CSSObject['color'];
-        };
-    };
-    directory: {
-        gap: CSSObject['gap'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
-        paddingRight: CSSObject['paddingRight'];
-    };
-    footer: {
-        zIndex: CSSObject['zIndex'];
-        backgroundColor: CSSObject['backgroundColor'];
-        gap: CSSObject['gap'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
-        paddingRight: CSSObject['paddingRight'];
-        borderTop: CSSObject['borderTop'];
-    };
-    primarySidebar: {
-        width: CSSObject['width'];
-    };
-    secondarySidebar: {
-        width: CSSObject['width'];
-        borderRight: CSSObject['borderRight'];
-        backgroundColor: CSSObject['backgroundColor'];
-        gap: CSSObject['gap'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
-        paddingRight: CSSObject['paddingRight'];
-        item: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            borderRadius: CSSObject['borderRadius'];
-            border: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['border'];
-            };
-            backgroundColor: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor'];
-            };
-        };
-    };
-};
-export type ResponsiveSidebarV2Tokens = {
-    [key in keyof BreakpointType]: SidebarV2TokensType;
-};
+import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens.types';
+export type { SidebarV2ItemInteractionStates, SidebarV2TokensType, ResponsiveSidebarV2Tokens, } from './sidebarV2.tokens.types';
 export declare const getSidebarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveSidebarV2Tokens;