@juspay/blend-design-system 0.0.37-beta.5 → 0.0.37-beta.7

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.tokens.ts

@@ -1,90 +1,14 @@
 import { Theme } from '../../../context/theme.enum'
 
-import { CSSObject } from 'styled-components'
-import { CheckboxV2CheckedState } from './checkboxV2.types'
-import {
-    SelectorV2Size,
-    SelectorV2InteractionState,
-} from '../../SelectorV2/selectorV2.types'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { getCheckboxV2LightTokens } from './checkboxV2.light.tokens'
 import { getCheckboxV2DarkTokens } from './checkboxV2.dark.tokens'
+import type { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens.types'
 
-export type CheckboxV2TokensType = {
-    gap: CSSObject['gap']
-    checkbox: {
-        height: {
-            [key in SelectorV2Size]: CSSObject['height']
-        }
-        width: {
-            [key in SelectorV2Size]: CSSObject['width']
-        }
-        opacity: CSSObject['opacity']
-        backgroundColor: {
-            [key in CheckboxV2CheckedState]?: {
-                [key in SelectorV2InteractionState]?: CSSObject['backgroundColor']
-            }
-        }
-
-        borderRadius: { [key in SelectorV2Size]: CSSObject['borderRadius'] }
-
-        border: {
-            [key in CheckboxV2CheckedState]?: {
-                [key in SelectorV2InteractionState]?: CSSObject['border']
-            }
-        }
-
-        outline: CSSObject['outline']
-        outlineOffset: CSSObject['outlineOffset']
-        boxShadow: CSSObject['boxShadow']
-        icon: {
-            color: {
-                [key in CheckboxV2CheckedState]?: {
-                    [key in Extract<
-                        SelectorV2InteractionState,
-                        'default' | 'disabled'
-                    >]?: CSSObject['color']
-                }
-            }
-            width: { [key in SelectorV2Size]: CSSObject['width'] }
-            height: { [key in SelectorV2Size]: CSSObject['height'] }
-            strokeWidth: { [key in SelectorV2Size]: CSSObject['strokeWidth'] }
-        }
-    }
-    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 ResponsiveCheckboxV2Tokens = {
-    [key in keyof BreakpointType]: CheckboxV2TokensType
-}
+export type {
+    CheckboxV2TokensType,
+    ResponsiveCheckboxV2Tokens,
+} from './checkboxV2.tokens.types'
 
 export const getCheckboxV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.tokens.types.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components'
+import {
+    SelectorV2Size,
+    SelectorV2InteractionState,
+} from '../../SelectorV2/selectorV2.types'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+export enum CheckboxV2CheckedState {
+    CHECKED = 'checked',
+    UNCHECKED = 'unchecked',
+    INDETERMINATE = 'indeterminate',
+}
+
+export type CheckboxV2TokensType = {
+    gap: CSSObject['gap']
+    checkbox: {
+        height: {
+            [key in SelectorV2Size]: CSSObject['height']
+        }
+        width: {
+            [key in SelectorV2Size]: CSSObject['width']
+        }
+        opacity: CSSObject['opacity']
+        backgroundColor: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['backgroundColor']
+            }
+        }
+
+        borderRadius: { [key in SelectorV2Size]: CSSObject['borderRadius'] }
+
+        border: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['border']
+            }
+        }
+
+        outline: CSSObject['outline']
+        outlineOffset: CSSObject['outlineOffset']
+        boxShadow: CSSObject['boxShadow']
+        icon: {
+            color: {
+                [key in CheckboxV2CheckedState]?: {
+                    [key in Extract<
+                        SelectorV2InteractionState,
+                        'default' | 'disabled'
+                    >]?: CSSObject['color']
+                }
+            }
+            width: { [key in SelectorV2Size]: CSSObject['width'] }
+            height: { [key in SelectorV2Size]: CSSObject['height'] }
+            strokeWidth: { [key in SelectorV2Size]: CSSObject['strokeWidth'] }
+        }
+    }
+    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 ResponsiveCheckboxV2Tokens = {
+    [key in keyof BreakpointType]: CheckboxV2TokensType
+}

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.types.ts

@@ -1,13 +1,10 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react'
-import { CheckboxV2TokensType } from './checkboxV2.tokens'
+import type { CheckboxV2TokensType } from './checkboxV2.tokens.types'
+import { CheckboxV2CheckedState } from './checkboxV2.tokens.types'
 import { CSSObject } from 'styled-components'
 import { SelectorV2Size } from '../../SelectorV2/selectorV2.types'
 
-export enum CheckboxV2CheckedState {
-    CHECKED = 'checked',
-    UNCHECKED = 'unchecked',
-    INDETERMINATE = 'indeterminate',
-}
+export { CheckboxV2CheckedState }
 export type CheckboxV2Props = {
     checked?: boolean | 'indeterminate'
     onCheckedChange?: (checked: boolean | 'indeterminate') => void

package/lib/components/SelectorV2/RadioV2/radioV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveRadioV2Tokens } from './radioV2.tokens'
+import type { ResponsiveRadioV2Tokens } from './radioV2.tokens.types'
 
 export const getRadioV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/RadioV2/radioV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveRadioV2Tokens } from './radioV2.tokens'
+import type { ResponsiveRadioV2Tokens } from './radioV2.tokens.types'
 
 export const getRadioV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/RadioV2/radioV2.tokens.ts

@@ -1,82 +1,14 @@
 import { Theme } from '../../../context/theme.enum'
 
-import { CSSObject } from 'styled-components'
-import { RadioV2IndicatorState } from './radioV2.types'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { getRadioV2LightTokens } from './radioV2.light.tokens'
 import { getRadioV2DarkTokens } from './radioV2.dark.tokens'
-import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types'
+import type { ResponsiveRadioV2Tokens } from './radioV2.tokens.types'
 
-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
-}
+export type {
+    RadioV2TokensType,
+    ResponsiveRadioV2Tokens,
+} from './radioV2.tokens.types'
 
 export const getRadioV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SelectorV2/RadioV2/radioV2.tokens.types.ts

@@ -0,0 +1,78 @@
+import { type CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../../breakpoints/breakPoints'
+import {
+    type SelectorV2Size,
+    type 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/lib/components/SelectorV2/RadioV2/radioV2.types.ts

@@ -1,9 +1,9 @@
 import type { 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

package/lib/components/SelectorV2/SwitchV2/switchV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveSwitchV2Tokens } from './switchV2.tokens'
+import type { ResponsiveSwitchV2Tokens } from './switchV2.tokens.types'
 
 export const getSwitchV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/SwitchV2/switchV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveSwitchV2Tokens } from './switchV2.tokens'
+import type { ResponsiveSwitchV2Tokens } from './switchV2.tokens.types'
 
 export const getSwitchV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/SwitchV2/switchV2.tokens.ts

@@ -1,72 +1,14 @@
 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 { getSwitchV2LightTokens } from './switchV2.light.tokens'
 import { getSwitchV2DarkTokens } from './switchV2.dark.tokens'
-import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types'
+import type { ResponsiveSwitchV2Tokens } from './switchV2.tokens.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
-}
+export type {
+    SwitchV2TokensType,
+    ResponsiveSwitchV2Tokens,
+} from './switchV2.tokens.types'
 
 export const getSwitchV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SelectorV2/SwitchV2/switchV2.tokens.types.ts

@@ -0,0 +1,68 @@
+import { type CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../../breakpoints/breakPoints'
+import {
+    type SelectorV2Size,
+    type 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/lib/components/SelectorV2/SwitchV2/switchV2.types.ts

@@ -1,9 +1,12 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react'
-import { SwitchV2TokensType } from './switchV2.tokens'
+import {
+    type SwitchV2TokensType,
+    type 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

package/lib/components/Sidebar/Sidebar.tsx

@@ -489,7 +489,7 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                                             defaultActiveItem={
                                                 defaultActiveItem
                                             }
-                                            iconOnlyMode={!isHovering}
+                                            iconOnlyMode={false}
                                             footer={footer}
                                         />
                                     </Block>

package/lib/components/Sidebar/SidebarContent.tsx

@@ -84,6 +84,7 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
             style={{
                 willChange: 'width',
                 transform: 'translateZ(0)',
+                contain: 'layout paint',
             }}
         >
             <SidebarHeader

package/lib/components/Sidebar/SidebarHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { PanelsTopLeft, UserIcon } from 'lucide-react'
 import Block from '../Primitives/Block/Block'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
@@ -57,16 +57,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({
 
     const merchantData = merchantInfo || defaultMerchantInfo
 
-    const [selectVisible, setSelectVisible] = useState(!iconOnlyMode)
-    useEffect(() => {
-        if (iconOnlyMode) {
-            setSelectVisible(false)
-        } else {
-            const t = setTimeout(() => setSelectVisible(true), 180)
-            return () => clearTimeout(t)
-        }
-    }, [iconOnlyMode])
-
     const headerSlot = sidebarTopSlot ? (
         iconOnlyMode ? null : (
             sidebarTopSlot
@@ -123,7 +113,7 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({
                 width={iconOnlyMode ? 0 : '100%'}
                 minWidth={0}
                 overflow="hidden"
-                opacity={iconOnlyMode ? 0 : selectVisible ? 1 : 0}
+                opacity={iconOnlyMode ? 0 : 1}
                 pointerEvents={iconOnlyMode ? 'none' : 'auto'}
                 transition="opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), flex-grow 0.35s cubic-bezier(0.4, 0, 0.2, 1)"
                 style={{

package/lib/components/Sidebar/types.ts

@@ -1,31 +1,18 @@
 import { type ReactNode } from 'react'
-import type { BadgeColor, BadgePosition, BadgeSize } from '../Badge/Badge.types'
 import type { DirectoryData, NavbarItem } from '../Directory/types'
-import type { MerchantInfo } from '../Topbar/types'
+import type {
+    MerchantInfo,
+    LeftPanelInfo,
+    TenantBadge,
+} from '../shared/layoutTypes'
 
-export type TenantBadge = {
-    text: string
-    size?: BadgeSize
-    color?: BadgeColor
-    position?: BadgePosition
-}
-
-export type LeftPanelItem = {
-    label: string
-    icon: ReactNode
-    value?: string
-    showInPanel?: boolean
-    badge?: TenantBadge
-}
-
-export type LeftPanelInfo = {
-    items: LeftPanelItem[]
-    selected: string
-    onSelect: (value: string) => void
-    tenantSlot1?: ReactNode
-    tenantSlot2?: ReactNode
-    tenantFooter?: ReactNode
-}
+// Re-exported for backward compatibility: these types were previously declared
+// here and are part of the public API via `Sidebar/index.ts` (`export * from './types'`).
+export type {
+    LeftPanelInfo,
+    LeftPanelItem,
+    TenantBadge,
+} from '../shared/layoutTypes'
 
 export type TenantItem = {
     label: string