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

package/lib/components/SingleSelectV2/singleSelectV2.types.ts

@@ -144,6 +144,7 @@ export type SingleSelectV2MenuProps = {
     customValueLabel?: string
 
     menuId?: string
+    menuFooter?: ReactNode
 }
 export type SingleSelectV2PropsBase = {
     label?: string
@@ -194,6 +195,7 @@ export type SingleSelectV2PropsBase = {
     customValueLabel?: string
 
     singleSelectGroupPosition?: 'center' | 'left' | 'right'
+    menuFooter?: ReactNode
 }
 
 export type SingleSelectV2Props = Omit<

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/Snackbar.tsx

@@ -45,6 +45,7 @@ export const StyledToast: React.FC<CustomToastProps> = ({
     onClose,
     actionButton,
     toastId,
+    wrap = false,
     ...props
 }) => {
     const snackbarTokens = useResponsiveTokens<SnackbarTokens>('SNACKBAR')
@@ -75,14 +76,17 @@ export const StyledToast: React.FC<CustomToastProps> = ({
         >
             <Block
                 display="flex"
-                alignItems="center"
+                alignItems={wrap ? 'flex-start' : 'center'}
                 justifyContent="space-between"
                 gap={snackbarTokens.gap}
             >
                 <Block
                     display="flex"
-                    alignItems="flex-start"
+                    alignItems="center"
                     flexShrink={0}
+                    height={
+                        snackbarTokens.content.textContainer.header.lineHeight
+                    }
                     data-element="icon"
                     aria-hidden="true"
                 >
@@ -107,12 +111,16 @@ export const StyledToast: React.FC<CustomToastProps> = ({
                         }
                         data-element="header"
                         data-id={header}
-                        style={{
-                            minWidth: 0,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }}
+                        style={
+                            wrap
+                                ? { minWidth: 0 }
+                                : {
+                                      minWidth: 0,
+                                      overflow: 'hidden',
+                                      textOverflow: 'ellipsis',
+                                      whiteSpace: 'nowrap',
+                                  }
+                        }
                     >
                         {header}
                     </Text>
@@ -221,6 +229,7 @@ export const addSnackbar = ({
     actionButton,
     duration,
     position,
+    wrap = false,
 }: AddToastOptions) => {
     // Determine if position includes "center" for proper alignment
     const isCenter = position?.includes('center')
@@ -237,6 +246,7 @@ export const addSnackbar = ({
                 }}
                 actionButton={actionButton}
                 toastId={t}
+                wrap={wrap}
             />
         ),
         {

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/Snackbar/snackbar.tokens.ts

@@ -61,6 +61,8 @@ export type SnackbarTokens = Readonly<{
                 fontSize: CSSObject['fontSize']
                 // Pattern: content.textContainer.header.fontWeight
                 fontWeight: CSSObject['fontWeight']
+                // Pattern: content.textContainer.header.lineHeight
+                lineHeight: CSSObject['lineHeight']
             }
 
             // Description text styling
@@ -149,6 +151,8 @@ export const getSnackbarTokens = (
                         },
                         fontSize: foundationToken.font.size.body.md.fontSize,
                         fontWeight: foundationToken.font.weight[500],
+                        lineHeight:
+                            foundationToken.font.size.body.md.lineHeight,
                     },
 
                     description: {
@@ -222,6 +226,8 @@ export const getSnackbarTokens = (
                         },
                         fontSize: foundationToken.font.size.body.lg.fontSize,
                         fontWeight: foundationToken.font.weight[600],
+                        lineHeight:
+                            foundationToken.font.size.body.lg.lineHeight,
                     },
 
                     description: {

package/lib/components/Snackbar/types.ts

@@ -26,6 +26,7 @@ export type AddToastOptions = {
     }
     duration?: number
     position?: SnackbarPosition
+    wrap?: boolean
 }
 
 export type CustomToastProps = {
@@ -39,6 +40,7 @@ export type CustomToastProps = {
         autoDismiss?: boolean
     }
     toastId?: string | number
+    wrap?: boolean
 }
 
 export type SnackbarProps = {

package/lib/components/StatCard/StatCard.tsx

@@ -39,6 +39,7 @@ import type { StatCardTokenType } from './statcard.tokens'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { BREAKPOINTS } from '../../breakpoints/breakPoints'
 import { useBreakpoints } from '../../hooks/useBreakPoints'
+import { useResizeObserver } from '../../hooks/useResizeObserver'
 import {
     SelectMenuSize,
     SelectMenuVariant,
@@ -304,6 +305,12 @@ const StatCard = ({
     const isSmallScreen = breakPointLabel === 'sm'
     const titleIconRef = useRef<HTMLDivElement>(null)
     const titleIconWidth = titleIconRef.current?.offsetWidth || 0
+    const actionIconRef = useRef<HTMLDivElement>(null)
+    const [actionIconWidth, setActionIconWidth] = useState(0)
+
+    useResizeObserver(actionIconRef, (rect) => {
+        setActionIconWidth(rect.width)
+    })
 
     const [hoveredBarIndex, setHoveredBarIndex] = useState<number | null>(null)
 
@@ -824,6 +831,16 @@ const StatCard = ({
                                                 statCardToken.textContainer
                                                     .header.gap
                                             }
+                                            paddingRight={
+                                                actionIcon
+                                                    ? actionIconWidth +
+                                                      toPixels(
+                                                          statCardToken
+                                                              .textContainer
+                                                              .header.gap
+                                                      )
+                                                    : undefined
+                                            }
                                         >
                                             <StatCardHeaderTitleText
                                                 title={title}
@@ -843,6 +860,7 @@ const StatCard = ({
                                         direction !==
                                             StatCardDirection.HORIZONTAL && (
                                             <Block
+                                                ref={actionIconRef}
                                                 data-element="view-more"
                                                 display="flex"
                                                 alignItems="center"
@@ -1091,6 +1109,7 @@ const StatCard = ({
                             >
                                 {actionIcon && (
                                     <Block
+                                        ref={actionIconRef}
                                         data-element="action-icon"
                                         display="flex"
                                         alignItems="flex-start"
@@ -1131,6 +1150,16 @@ const StatCard = ({
                                             statCardToken.textContainer.header
                                                 .gap
                                         }
+                                        paddingRight={
+                                            actionIcon
+                                                ? actionIconWidth +
+                                                  toPixels(
+                                                      statCardToken
+                                                          .textContainer.header
+                                                          .gap
+                                                  )
+                                                : undefined
+                                        }
                                     >
                                         <StatCardHeaderTitleText
                                             title={title}

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'