@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/lib/components/SidebarV2/SidebarV2Panel.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Block from '../Primitives/Block/Block'
 import Directory from '../Directory/Directory'
 import { normalizeDirectoryData } from '../Directory/utils'
-import type { DirectoryData } from '../Directory/types'
+import type { DirectoryData, DirectoryProps } from '../Directory/types'
 import SidebarV2Header from './SidebarV2Header'
 import SidebarV2Footer from './SidebarV2Footer'
 import type { SidebarV2StateChangeType } from './types'
@@ -55,6 +55,14 @@ export type SidebarV2PanelProps = {
     setIsHovering?: (isHovering: boolean) => void
     sidebarState?: SidebarV2StateChangeType
     tokens: SidebarV2TokensType
+    showHierarchyLines?: DirectoryProps['showHierarchyLines']
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius']
+    expandedItems?: DirectoryProps['expandedItems']
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems']
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange']
+    onItemExpand?: DirectoryProps['onItemExpand']
+    enableVirtualization?: DirectoryProps['enableVirtualization']
+    virtualization?: DirectoryProps['virtualization']
 }
 
 const SidebarV2Panel = ({
@@ -76,6 +84,14 @@ const SidebarV2Panel = ({
     setIsHovering,
     sidebarState = 'expanded',
     tokens,
+    showHierarchyLines = false,
+    hierarchyLineBorderRadius = 0,
+    expandedItems,
+    defaultExpandedItems,
+    onExpandedItemsChange,
+    onItemExpand,
+    enableVirtualization = false,
+    virtualization,
 }: SidebarV2PanelProps) => {
     const trackHover = shouldTrackHover(setIsHovering)
     const directoryData = normalizeDirectoryData(data)
@@ -126,6 +142,14 @@ const SidebarV2Panel = ({
                     onActiveItemChange={onActiveItemChange}
                     defaultActiveItem={defaultActiveItem}
                     iconOnlyMode={iconOnlyMode}
+                    showHierarchyLines={showHierarchyLines}
+                    hierarchyLineBorderRadius={hierarchyLineBorderRadius}
+                    expandedItems={expandedItems}
+                    defaultExpandedItems={defaultExpandedItems}
+                    onExpandedItemsChange={onExpandedItemsChange}
+                    onItemExpand={onItemExpand}
+                    enableVirtualization={enableVirtualization}
+                    virtualization={virtualization}
                 />
             </DirectoryContainer>
 

package/lib/components/SidebarV2/types.ts

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
-import type { DirectoryData } from '../Directory/types'
+import type { DirectoryData, DirectoryProps } from '../Directory/types'
 import type { MerchantInfo } from '../Topbar/types'
 import type { TenantBadge } from '../Sidebar/types'
 
@@ -59,6 +59,14 @@ export type SidebarV2Props = {
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void
     defaultActiveItem?: string | null
+    showHierarchyLines?: DirectoryProps['showHierarchyLines']
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius']
+    expandedItems?: DirectoryProps['expandedItems']
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems']
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange']
+    onItemExpand?: DirectoryProps['onItemExpand']
+    enableVirtualization?: DirectoryProps['enableVirtualization']
+    virtualization?: DirectoryProps['virtualization']
 }
 
 export type {

package/lib/components/SingleSelect/SingleSelect.tsx

@@ -449,7 +449,8 @@ const SingleSelect = ({
                                                 textAlign="left"
                                                 paddingTop={
                                                     isSmallScreenWithLargeSize &&
-                                                    isItemSelected
+                                                    isItemSelected &&
+                                                    label
                                                         ? paddingY * 1.5
                                                         : 0
                                                 }

package/lib/components/SingleSelect/SingleSelectTrigger.tsx

@@ -130,7 +130,9 @@ const SingleSelectTrigger = ({
                             as="span"
                             textAlign="left"
                             paddingTop={
-                                isSmallScreenWithLargeSize && isItemSelected
+                                isSmallScreenWithLargeSize &&
+                                isItemSelected &&
+                                label
                                     ? paddingY * 1.5
                                     : 0
                             }

package/lib/components/SingleSelect/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use SingleSelectV2 instead. */
 export { default as SingleSelect } from './SingleSelect'
 export * from './singleSelect.tokens'
 export * from './types'

package/lib/components/SingleSelectV2/SingleSelectV2Trigger.tsx

@@ -197,7 +197,9 @@ const SingleSelectV2Trigger = ({
                         as="span"
                         textAlign="left"
                         paddingTop={
-                            isSmallScreenWithLargeSize && isItemSelected
+                            isSmallScreenWithLargeSize &&
+                            isItemSelected &&
+                            label
                                 ? paddingTop * 1.5
                                 : 0
                         }

package/lib/components/Skeleton/SkeletonCompound.tsx

@@ -5,6 +5,25 @@ import SkeletonCard from './SkeletonCard'
 
 import type { SkeletonProps } from './types'
 
+const SkeletonRoot = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => (
+    <Skeleton {...props} ref={ref} />
+))
+
+// Convenience aliases (no flat export — they exist only as compound statics)
+const SkeletonCircle = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'shape'>>(
+    (props, ref) => <Skeleton {...props} shape="circle" ref={ref} />
+)
+
+const SkeletonRectangle = forwardRef<
+    HTMLDivElement,
+    Omit<SkeletonProps, 'shape'>
+>((props, ref) => <Skeleton {...props} shape="rectangle" ref={ref} />)
+
+const SkeletonRounded = forwardRef<
+    HTMLDivElement,
+    Omit<SkeletonProps, 'shape'>
+>((props, ref) => <Skeleton {...props} shape="rounded" ref={ref} />)
+
 /**
  * Enhanced Skeleton with compound component pattern
  *
@@ -17,40 +36,35 @@ import type { SkeletonProps } from './types'
  * Or traditional:
  * <Skeleton.Text loading={isLoading} lines={3} />
  */
-const SkeletonCompound = Object.assign(
-    forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => (
-        <Skeleton {...props} ref={ref} />
-    )),
-    {
-        /**
-         * Avatar skeleton with circular or square shapes and multiple sizes
-         */
-        Avatar: SkeletonAvatar,
-
-        /**
-         * Card skeleton with default layout or custom children
-         */
-        Card: SkeletonCard,
+// Statics that reuse a flat export are typed as `typeof` that export so the
+// emitted declarations state the value identity instead of re-declaring props.
+const SkeletonCompound: typeof SkeletonRoot & {
+    /**
+     * Avatar skeleton with circular or square shapes and multiple sizes
+     */
+    Avatar: typeof SkeletonAvatar
 
-        /**
-         * Base skeleton component for custom shapes and layouts
-         */
-        Base: Skeleton,
+    /**
+     * Card skeleton with default layout or custom children
+     */
+    Card: typeof SkeletonCard
 
-        // Convenience aliases
-        Circle: forwardRef<HTMLDivElement, Omit<SkeletonProps, 'shape'>>(
-            (props, ref) => <Skeleton {...props} shape="circle" ref={ref} />
-        ),
+    /**
+     * Base skeleton component for custom shapes and layouts
+     */
+    Base: typeof Skeleton
 
-        Rectangle: forwardRef<HTMLDivElement, Omit<SkeletonProps, 'shape'>>(
-            (props, ref) => <Skeleton {...props} shape="rectangle" ref={ref} />
-        ),
-
-        Rounded: forwardRef<HTMLDivElement, Omit<SkeletonProps, 'shape'>>(
-            (props, ref) => <Skeleton {...props} shape="rounded" ref={ref} />
-        ),
-    }
-)
+    Circle: typeof SkeletonCircle
+    Rectangle: typeof SkeletonRectangle
+    Rounded: typeof SkeletonRounded
+} = Object.assign(SkeletonRoot, {
+    Avatar: SkeletonAvatar,
+    Card: SkeletonCard,
+    Base: Skeleton,
+    Circle: SkeletonCircle,
+    Rectangle: SkeletonRectangle,
+    Rounded: SkeletonRounded,
+})
 
 // Display names for better debugging
 SkeletonCompound.displayName = 'Skeleton'

package/lib/components/Snackbar/index.ts

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use SnackbarV2 instead. */
 export { default as Snackbar } from './Snackbar'
+/** @deprecated Will be deprecated soon. Use SnackbarV2 instead. */
 export { addSnackbar } from './Snackbar'
 export * from './snackbar.tokens'
 export * from './types'

package/lib/components/StatCard/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use StatCardV2 instead. */
 export { default as StatCard } from './StatCard'
 export * from './statcard.tokens'
 export * from './types'

package/lib/components/Stepper/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use StepperV2 instead. */
 export { default as Stepper } from './Stepper'
 export * from './stepper.tokens'
 export * from './types'

package/lib/components/Switch/index.ts

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use SwitchV2 instead. */
 export { Switch } from './Switch'
+/** @deprecated Will be deprecated soon. Use SwitchV2 instead. */
 export { default as SwitchGroup } from './SwitchGroup'
 export { SwitchSize } from './types'
 export type { SwitchProps, SwitchGroupProps } from './types'

package/lib/components/Tabs/index.ts

@@ -3,6 +3,7 @@ import TabsList from './TabsList'
 import TabsTrigger from './TabsTrigger'
 import TabsContent from './TabsContent'
 
+/** @deprecated Will be deprecated soon. Use TabsV2 instead. */
 export { Tabs, TabsList, TabsTrigger, TabsContent }
 export * from './types'
 export * from './tabs.token'

package/lib/components/Tags/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use TagV2 instead. */
 export { default as Tag } from './Tag'
 export * from './tag.tokens'
 export * from './types'

package/lib/components/Timeline/Timeline.tsx

@@ -95,7 +95,15 @@ const TimelineRoot = forwardRef<HTMLDivElement, TimelineRootProps>(
 
 TimelineRoot.displayName = 'Timeline'
 
-const Timeline = Object.assign(TimelineRoot, {
+// Statics reuse the flat exports, so they are typed as `typeof` those exports
+// to keep the emitted declarations stating the value identity.
+const Timeline: typeof TimelineRoot & {
+    Label: typeof TimelineLabel
+    Header: typeof TimelineHeader
+    Substep: typeof TimelineSubstep
+    Node: typeof TimelineNode
+    ShowMore: typeof TimelineShowMore
+} = Object.assign(TimelineRoot, {
     Label: TimelineLabel,
     Header: TimelineHeader,
     Substep: TimelineSubstep,

package/lib/components/Tooltip/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use TooltipV2 instead. */
 export { default as Tooltip } from './Tooltip'
 export * from './tooltip.tokens'
 export * from './types'

package/lib/components/Topbar/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use TopbarV2 instead. */
 export { default as Topbar } from './Topbar'
 export * from './topbar.tokens'
 export type { TopbarProps, MerchantInfo } from './types'

package/lib/components/Upload/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use UploadV2 instead. */
 export { default as Upload } from './Upload'
 export type { UploadTokenType, ResponsiveUploadTokens } from './upload.tokens'
 export { getUploadTokens } from './upload.tokens'

package/lib/context/ThemeContext.tsx

@@ -38,6 +38,10 @@ import type { ResponsiveChartTokens } from '../components/Charts/chart.tokens'
 import type { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens'
 import type { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens'
 import type { ResponsiveCardTokens } from '../components/Card/card.tokens'
+import {
+    getCardV2Tokens,
+    type ResponsiveCardV2Tokens,
+} from '../components/CardV2/cardV2.tokens'
 import {
     getTopbarTokens,
     type ResponsiveTopbarTokens,
@@ -239,6 +243,12 @@ import {
     getChatInputV2MobileTokens,
     ChatInputV2MobileTokensType,
 } from '../components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens'
+import {
+    ResponsiveUploadV2Tokens,
+    getUploadV2Tokens,
+} from '../components/InputsV2/UploadV2/UploadV2.tokens'
+import { getModalV2Tokens } from '../components/ModalV2/modalV2.tokens'
+import type { ResponsiveModalV2Tokens } from '../components/ModalV2/modalV2.tokens.types'
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens
     SEARCH_INPUT?: ResponsiveSearchInputTokens
@@ -275,6 +285,7 @@ export type ComponentTokenType = {
     STEPPER?: ResponsiveStepperTokens
     KEYVALUEPAIR?: ResponsiveKeyValuePairTokens
     CARD?: ResponsiveCardTokens
+    CARDV2?: ResponsiveCardV2Tokens
     SKELETON?: ResponsiveSkeletonTokens
     TOPBAR?: ResponsiveTopbarTokens
     TOPBARV2?: ResponsiveTopbarV2Tokens
@@ -318,6 +329,8 @@ export type ComponentTokenType = {
     SEARCH_INPUT_V2?: ResponsiveSearchInputV2Tokens
     CHAT_INPUTV2_MOBILE?: ChatInputV2MobileTokensType
     STEPPERV2?: ResponsiveStepperV2Tokens
+    UPLOADV2?: ResponsiveUploadV2Tokens
+    MODALV2?: ResponsiveModalV2Tokens
 }
 
 type ThemeContextType = {
@@ -364,6 +377,7 @@ const ThemeContext = createContext<ThemeContextType>({
         STEPPER: getStepperTokens(FOUNDATION_THEME),
         KEYVALUEPAIR: getKeyValuePairTokens(FOUNDATION_THEME),
         CARD: getCardTokens(FOUNDATION_THEME),
+        CARDV2: getCardV2Tokens(FOUNDATION_THEME, Theme.LIGHT),
         TOPBAR: getTopbarTokens(FOUNDATION_THEME),
         TOPBARV2: getTopbarV2Tokens(FOUNDATION_THEME),
         SKELETON: getSkeletonTokens(FOUNDATION_THEME),
@@ -420,6 +434,8 @@ const ThemeContext = createContext<ThemeContextType>({
             Theme.LIGHT
         ),
         STEPPERV2: getStepperV2Tokens(FOUNDATION_THEME, Theme.LIGHT),
+        UPLOADV2: getUploadV2Tokens(FOUNDATION_THEME, Theme.LIGHT),
+        MODALV2: getModalV2Tokens(FOUNDATION_THEME, Theme.LIGHT),
     },
     breakpoints: BREAKPOINTS,
     theme: 'light',

package/lib/context/initComponentTokens.ts

@@ -17,6 +17,7 @@ import { getUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tok
 import { getMultiValueInputTokens } from '../components/Inputs/MultiValueInput/multiValueInput.tokens'
 import { getDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens'
 import { getModalComponentTokens } from '../components/Modal/modal.tokens'
+import { getModalV2Tokens } from '../components/ModalV2/modalV2.tokens'
 import { getBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens'
 import { getPopoverTokens } from '../components/Popover/popover.tokens'
 import { getMenuTokens } from '../components/Menu/menu.tokens'
@@ -32,6 +33,7 @@ import { getSnackbarTokens } from '../components/Snackbar/snackbar.tokens'
 import { getStepperTokens } from '../components/Stepper/stepper.tokens'
 import { getKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens'
 import { getCardTokens } from '../components/Card/card.tokens'
+import { getCardV2Tokens } from '../components/CardV2/cardV2.tokens'
 import { getSkeletonTokens } from '../components/Skeleton/skeleton.tokens'
 import { getTopbarTokens } from '../components/Topbar/topbar.tokens'
 import { getTopbarV2Tokens } from '../components/TopbarV2/topbarV2.tokens'
@@ -80,6 +82,7 @@ import { getStepperV2Tokens } from '../components/StepperV2/stepperV2.tokens'
 
 import { getChatInputV2Tokens } from '../components/InputsV2/ChatInputV2/ChatInputV2.tokens'
 import { getChatInputV2MobileTokens } from '../components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens'
+import { getUploadV2Tokens } from '../components/InputsV2/UploadV2/UploadV2.tokens'
 const initTokens = (
     componentTokens: ComponentTokenType,
     foundationTokens: ThemeType,
@@ -120,6 +123,9 @@ const initTokens = (
             getKeyValuePairTokens(foundationTokens),
         MODAL:
             componentTokens.MODAL ?? getModalComponentTokens(foundationTokens),
+        MODALV2:
+            componentTokens.MODALV2 ??
+            getModalV2Tokens(foundationTokens, theme),
         BREADCRUMB:
             componentTokens.BREADCRUMB ?? getBreadcrumbTokens(foundationTokens),
         POPOVER: componentTokens.POPOVER ?? getPopoverTokens(foundationTokens),
@@ -150,6 +156,8 @@ const initTokens = (
             componentTokens.SNACKBAR ?? getSnackbarTokens(foundationTokens),
         STEPPER: componentTokens.STEPPER ?? getStepperTokens(foundationTokens),
         CARD: componentTokens.CARD ?? getCardTokens(foundationTokens),
+        CARDV2:
+            componentTokens.CARDV2 ?? getCardV2Tokens(foundationTokens, theme),
         SKELETON:
             componentTokens.SKELETON ?? getSkeletonTokens(foundationTokens),
         TOPBAR: componentTokens.TOPBAR ?? getTopbarTokens(foundationTokens),
@@ -265,6 +273,9 @@ const initTokens = (
         STEPPERV2:
             componentTokens.STEPPERV2 ??
             getStepperV2Tokens(foundationTokens, theme),
+        UPLOADV2:
+            componentTokens.UPLOADV2 ??
+            getUploadV2Tokens(foundationTokens, theme),
     }
 }
 

package/lib/context/useComponentToken.ts

@@ -33,6 +33,7 @@ import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens'
 import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens'
 import { ResponsiveCardTokens } from '../components/Card/card.tokens'
+import type { ResponsiveCardV2Tokens } from '../components/CardV2/cardV2.tokens'
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens'
 import type { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens'
 import type { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens'
@@ -76,6 +77,8 @@ import { ResponsiveSearchInputV2Tokens } from '../components/InputsV2/SearchInpu
 import { ResponsiveChatInputV2TokensType } from '../components/InputsV2/ChatInputV2/ChatInputV2.tokens'
 import { ChatInputV2MobileTokensType } from '../components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens'
 import type { ResponsiveStepperV2Tokens } from '../components/StepperV2/stepperV2.tokens'
+import { ResponsiveUploadV2Tokens } from '../components/InputsV2/UploadV2/UploadV2.tokens'
+import type { ResponsiveModalV2Tokens } from '../components/ModalV2/modalV2.tokens.types'
 
 export const useComponentToken = (
     component: keyof ComponentTokenType
@@ -113,6 +116,7 @@ export const useComponentToken = (
     | ResponsiveStepperTokens
     | ResponsiveKeyValuePairTokens
     | ResponsiveCardTokens
+    | ResponsiveCardV2Tokens
     | ResponsiveSkeletonTokens
     | ResponsiveTopbarTokens
     | ResponsiveAvatarTokens
@@ -157,7 +161,11 @@ export const useComponentToken = (
     | ResponsiveBadgeTokens
     | ResponsiveChatInputV2TokensType
     | ChatInputV2MobileTokensType
-    | ResponsiveStepperV2Tokens => {
+    | ResponsiveStepperV2Tokens
+    | ResponsiveStepperV2Tokens
+    | ResponsiveModalV2Tokens
+    | ResponsiveUploadV2Tokens
+    | ChatInputV2MobileTokensType => {
     const { componentTokens } = useTheme()
     switch (component) {
         case 'TOOLTIP':
@@ -230,6 +238,8 @@ export const useComponentToken = (
             return componentTokens.KEYVALUEPAIR
         case 'CARD':
             return componentTokens.CARD
+        case 'CARDV2':
+            return componentTokens.CARDV2
         case 'SKELETON':
             return componentTokens.SKELETON
         case 'TOPBAR':
@@ -316,6 +326,10 @@ export const useComponentToken = (
             return componentTokens.SEARCH_INPUT_V2
         case 'STEPPERV2':
             return componentTokens.STEPPERV2
+        case 'UPLOADV2':
+            return componentTokens.UPLOADV2
+        case 'MODALV2':
+            return componentTokens.MODALV2
         default:
             throw new Error(`Unknown component token: ${component}`)
     }

package/lib/hooks/useResponsiveTokens.ts

@@ -4,10 +4,73 @@ import { useBreakpoints } from './useBreakPoints'
 import { useComponentToken } from '../context/useComponentToken'
 import type { BreakpointType } from '../breakpoints/breakPoints'
 
+const warnedV1Components = new Set<string>()
+
+// Keep this map in sync with public v2 component exports in lib/main.ts.
+const v1TokenReplacementMap: Partial<
+    Record<keyof ComponentTokenType, { component: string; replacement: string }>
+> = {
+    ACCORDION: { component: 'Accordion', replacement: 'AccordionV2' },
+    ALERT: { component: 'Alert', replacement: 'AlertV2' },
+    AVATAR: { component: 'Avatar', replacement: 'AvatarV2' },
+    BREADCRUMB: { component: 'Breadcrumb', replacement: 'BreadcrumbV2' },
+    BUTTON: { component: 'Button', replacement: 'ButtonV2' },
+    CARD: { component: 'Card', replacement: 'CardV2' },
+    CHAT_INPUT: { component: 'ChatInput', replacement: 'ChatInputV2' },
+    CHECKBOX: { component: 'Checkbox', replacement: 'CheckboxV2' },
+    CHARTS: { component: 'Charts', replacement: 'ChartV2' },
+    DRAWER: { component: 'Drawer', replacement: 'DrawerV2' },
+    KEYVALUEPAIR: { component: 'KeyValuePair', replacement: 'KeyValuePairV2' },
+    MENU: { component: 'Menu', replacement: 'MenuV2' },
+    MODAL: { component: 'Modal', replacement: 'ModalV2' },
+    MULTI_SELECT: { component: 'MultiSelect', replacement: 'MultiSelectV2' },
+    MULTI_VALUE_INPUT: {
+        component: 'MultiValueInput',
+        replacement: 'MultiValueInputV2',
+    },
+    NUMBER_INPUT: { component: 'NumberInput', replacement: 'NumberInputV2' },
+    OTP_INPUT: { component: 'OTPInput', replacement: 'OTPInputV2' },
+    POPOVER: { component: 'Popover', replacement: 'PopoverV2' },
+    PROGRESS_BAR: { component: 'ProgressBar', replacement: 'ProgressBarV2' },
+    RADIO: { component: 'Radio', replacement: 'RadioV2' },
+    SEARCH_INPUT: { component: 'SearchInput', replacement: 'SearchInputV2' },
+    SIDEBAR: { component: 'Sidebar', replacement: 'SidebarV2' },
+    SINGLE_SELECT: { component: 'SingleSelect', replacement: 'SingleSelectV2' },
+    SNACKBAR: { component: 'Snackbar', replacement: 'SnackbarV2' },
+    STAT_CARD: { component: 'StatCard', replacement: 'StatCardV2' },
+    STEPPER: { component: 'Stepper', replacement: 'StepperV2' },
+    SWITCH: { component: 'Switch', replacement: 'SwitchV2' },
+    TABS: { component: 'Tabs', replacement: 'TabsV2' },
+    TAGS: { component: 'Tag', replacement: 'TagV2' },
+    TEXT_AREA: { component: 'TextArea', replacement: 'TextAreaV2' },
+    TEXT_INPUT: { component: 'TextInput', replacement: 'TextInputV2' },
+    TOOLTIP: { component: 'Tooltip', replacement: 'TooltipV2' },
+    TOPBAR: { component: 'Topbar', replacement: 'TopbarV2' },
+    UPLOAD: { component: 'Upload', replacement: 'UploadV2' },
+}
+
+const warnV1ComponentUsage = (component: string, replacement: string) => {
+    if (warnedV1Components.has(component)) return
+
+    warnedV1Components.add(component)
+    console.warn(
+        `[Blend] ${component} is a v1 component and will be deprecated soon. Blend v1 components will be removed soon. Please migrate to ${replacement}.`
+    )
+}
+
+const warnV1TokenUsage = (component: keyof ComponentTokenType) => {
+    const deprecation = v1TokenReplacementMap[component]
+    if (!deprecation) return
+
+    warnV1ComponentUsage(deprecation.component, deprecation.replacement)
+}
+
 export const useResponsiveTokens = <T>(component: keyof ComponentTokenType) => {
     const { breakpoints } = useContext(ThemeContext)
     const { breakPointLabel } = useBreakpoints(breakpoints)
 
+    warnV1TokenUsage(component)
+
     const componentTokens = useComponentToken(component) as Record<
         keyof BreakpointType,
         T

package/lib/main.ts

@@ -52,6 +52,7 @@ export * from './components/Switch'
 export * from './components/Tabs'
 export * from './components/Tags'
 export * from './components/Tooltip'
+export * from './components/Topbar'
 export * from './components/Upload'
 export * from './components/VirtualList'
 
@@ -69,6 +70,7 @@ export * from './components/AvatarV2'
 export * from './components/TooltipV2'
 export * from './components/ProgressBarV2'
 export * from './components/StatCardV2'
+export * from './components/CardV2'
 export * from './components/AccordionV2'
 export * from './components/InputsV2/TextInputV2'
 export * from './components/InputsV2/TextAreaV2'
@@ -78,6 +80,7 @@ export * from './components/ChartsV2'
 export * from './components/ButtonV2/ButtonGroupV2'
 export * from './components/common/TruncatedTextWithTooltipV2'
 export * from './components/PopoverV2'
+export * from './components/ModalV2'
 export * from './components/SidebarV2'
 export * from './components/StepperV2'
 export * from './components/TagGroupV2'
@@ -88,6 +91,19 @@ export * from './components/InputsV2/MultiValueInputV2'
 export * from './components/InputsV2/NumberInputV2'
 export * from './components/InputsV2/OTPInputV2'
 export * from './components/InputsV2/SearchInputV2'
+export { UploadV2 } from './components/InputsV2/UploadV2'
+export {
+    UploadState as UploadV2State,
+    UploadDragState as UploadV2DragState,
+    UploadErrorReason,
+} from './components/InputsV2/UploadV2'
+export type {
+    UploadV2Props,
+    UploadFileV2,
+    UploadErrorReasonValue,
+    UploadV2TokensType,
+    ResponsiveUploadV2Tokens,
+} from './components/InputsV2/UploadV2'
 export * from './components/SnackbarV2'
 export * from './components/CodeEditorV2'
 export * from './components/KeyValuePairV2'

package/lib/node.ts

@@ -20,6 +20,7 @@ export { getCheckboxV2Tokens } from './components/SelectorV2/CheckboxV2/checkbox
 export { getCodeEditorV2Tokens } from './components/CodeEditorV2/codeEditorV2.tokens'
 export { getKeyValuePairV2Tokens } from './components/KeyValuePairV2/keyValuePairV2.tokens'
 export { getMenuV2Tokens } from './components/MenuV2/menuV2.tokens'
+export { getModalV2Tokens } from './components/ModalV2/modalV2.tokens'
 export { getMultiSelectV2Tokens } from './components/MultiSelectV2/multiSelectV2.tokens'
 export { getPopoverV2Tokens } from './components/PopoverV2/popoverV2.token'
 export { getProgressBarV2Tokens } from './components/ProgressBarV2/progressBarV2.tokens'
@@ -31,6 +32,7 @@ export { getStatCardV2Tokens } from './components/StatCardV2/statcardV2.tokens'
 export { getTabsV2Tokens } from './components/TabsV2/tabsV2.tokens'
 export { getTagV2Tokens } from './components/TagV2/tagV2.tokens'
 export { getTextInputV2Tokens } from './components/InputsV2/TextInputV2/TextInputV2.tokens'
+export { getUploadV2Tokens } from './components/InputsV2/UploadV2/UploadV2.tokens'
 
 export { getTimelineTokens } from './components/Timeline/timeline.token'
 export { getTopbarTokens } from './components/Topbar/topbar.tokens'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.37-beta.8",
+    "version": "0.0.37",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",