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

package/lib/components/DataTable/dataTable.tokens.ts

@@ -198,6 +198,11 @@ export type TableTokenType = BasicCSSProps & {
                     color: CSSObject['color']
                     fontSize: CSSObject['fontSize']
                     borderTop: CSSObject['borderTop']
+
+                    dateLabel: {
+                        fontSize: CSSObject['fontSize']
+                        color: CSSObject['color']
+                    }
                     expandable: {
                         padding: CSSObject['padding']
                         borderTop: CSSObject['borderTop']
@@ -467,6 +472,11 @@ export const getTableToken = (
                             fontSize:
                                 foundationToken.font.size.body.md.fontSize,
                             borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
+                            dateLabel: {
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                color: foundationToken.colors.gray[400],
+                            },
                             expandable: {
                                 padding: foundationToken.unit[16],
                                 borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
@@ -732,6 +742,11 @@ export const getTableToken = (
                             fontSize:
                                 foundationToken.font.size.body.md.fontSize,
                             borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
+                            dateLabel: {
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                color: foundationToken.colors.gray[400],
+                            },
                             expandable: {
                                 padding: foundationToken.unit[16],
                                 borderTop: `1px solid ${foundationToken.colors.gray[150]}`,

package/lib/components/DataTable/types.ts

@@ -88,10 +88,30 @@ export type DropdownColumnProps = {
     onSelect?: (value: unknown) => void
 }
 
+/**
+ * Format string for date display in DataTable DATE columns.
+ * @example 'DD MMM YYYY'           → "24 Jun 2026"
+ * @example 'DD/MM/YYYY'            → "24/06/2026"
+ * @example 'DD MMM YYYY, hh:mm A'  → "24 Jun 2026, 10:30 AM"
+ */
+
+export type DateFormat =
+    | 'DD MMM YYYY'
+    | 'DD/MM/YYYY'
+    | 'MM/DD/YYYY'
+    | 'YYYY-MM-DD'
+    | 'DD MMM YYYY, hh:mm A'
+    | 'DD MMM YYYY, HH:mm'
+    | 'MMM DD, YYYY'
+    | 'YYYY/MM/DD HH:mm'
+    | 'HH:mm:ss'
+    | (string & {})
+
 export type DateColumnProps = {
     date: Date | string
-    format?: string
+    format?: DateFormat
     showTime?: boolean
+    dateLabel?: string
 }
 
 export type SliderColumnProps = {
@@ -253,8 +273,13 @@ export type ColumnDefinition<T> =
               row: T,
               index: number
           ) => ReactNode
-          dateFormat?: string
+          dateFormat?: DateFormat
           showTime?: boolean
+          /**
+           * Optional label appended after the formatted date, e.g. "(IST)".
+           * Column-level value can be overridden per-cell via DateColumnProps.dateLabel.
+           */
+          dateLabel?: string
       })
     | (BaseColumnDefinition<T> & {
           type: ColumnType.SLIDER
@@ -457,6 +482,12 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     // Mobile configuration
     mobileColumnsToShow?: number
 
+    /**
+     * Optional label appended after formatted dates in DATE columns,
+     * e.g. "(IST)". Can be overridden per-column or per-cell.
+     */
+    dateLabel?: string
+
     // Internal pivot modal configuration
     enablePivotTable?: boolean
     pivotTableConfig?: {

package/lib/components/DataTable/utils.ts

@@ -7,6 +7,7 @@ import {
     ColumnDefinition,
     ColumnType,
     PivotAggregationType,
+    DateFormat,
 } from './types'
 import {
     validateColumnData,
@@ -904,6 +905,91 @@ export const formatDate = (dateString: string): string => {
     }).format(date)
 }
 
+/**
+ * Token map for the lightweight format-string parser. Supports the common
+ * dashboard tokens; anything else is passed through literally.
+ *
+ *   YYYY  -> 4-digit year          YY   -> 2-digit year
+ *   MM    -> 2-digit month         MMM  -> short month name (Jan)
+ *   DD    -> 2-digit day           dd   -> 2-digit day (alias)
+ *   HH    -> 24h hour (2-digit)    hh   -> 12h hour (2-digit)
+ *   mm    -> minutes (2-digit)     ss   -> seconds (2-digit)
+ *   A     -> AM/PM                 a    -> am/pm
+ */
+const FORMAT_TOKEN_PATTERN = /YYYY|YY|MMM|MM|dd|DD|HH|hh|mm|ss|A|a/g
+
+const pad2 = (n: number): string => String(n).padStart(2, '0')
+
+// Format a Date using a format string like "DD MMM YYYY, hh:mm A"
+export const formatDateString = (date: Date, format: string): string => {
+    if (isNaN(date.getTime())) return '-'
+
+    const parts = new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    }).formatToParts(date)
+
+    const lookup: Record<string, string> = {}
+    for (const p of parts) {
+        if (p.type !== 'literal') lookup[p.type] = p.value
+    }
+
+    const year = lookup.year ?? ''
+    const monthNum = lookup.month ?? ''
+    const day = lookup.day ?? ''
+    const hour24 = lookup.hour ?? ''
+    const minute = lookup.minute ?? ''
+    const second = lookup.second ?? ''
+
+    // Short month name via a separate formatter (month: 'short' gives 'Jan' etc.)
+    const shortMonth = new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+    }).format(date)
+
+    // Normalize the 24-hour value: some browsers/locales return "24" for
+    // midnight instead of "00". Convert 24 -> 0 so HH always prints 00.
+    const hourNumRaw = parseInt(hour24, 10)
+    const hourNum = hourNumRaw === 24 ? 0 : hourNumRaw
+    const hour12 = (hourNum % 12 || 12).toString()
+    const ampm = hourNum < 12 ? 'AM' : 'PM'
+
+    FORMAT_TOKEN_PATTERN.lastIndex = 0
+    return format.replace(FORMAT_TOKEN_PATTERN, (token) => {
+        switch (token) {
+            case 'YYYY':
+                return year
+            case 'YY':
+                return year.slice(-2)
+            case 'MMM':
+                return shortMonth
+            case 'MM':
+                return monthNum
+            case 'DD':
+            case 'dd':
+                return day
+            case 'HH':
+                return pad2(hourNum)
+            case 'hh':
+                return pad2(parseInt(hour12, 10))
+            case 'mm':
+                return minute
+            case 'ss':
+                return second
+            case 'A':
+                return ampm
+            case 'a':
+                return ampm.toLowerCase()
+            default:
+                return token
+        }
+    })
+}
+
 export const updateColumnFilter = (
     currentFilters: ColumnFilter[],
     field: keyof Record<string, unknown>,
@@ -994,7 +1080,7 @@ const getExportValue = <T extends Record<string, unknown>>(
             ) {
                 const dateData = value as {
                     date: Date | string
-                    format?: string
+                    format?: DateFormat
                     showTime?: boolean
                 }
                 const date = new Date(dateData.date)
@@ -1267,7 +1353,7 @@ export const createMultiSelectData = (
 
 export const createDateData = (
     date: Date | string,
-    format?: string
+    format?: DateFormat
 ): DateData => ({
     date,
     format,
@@ -1276,7 +1362,7 @@ export const createDateData = (
 export const createDateRangeData = (
     startDate: Date | string,
     endDate: Date | string,
-    format?: string
+    format?: DateFormat
 ): DateRangeData => ({
     startDate,
     endDate,
@@ -1317,9 +1403,9 @@ const getExpectedTypeDescription = (columnType: ColumnType): string => {
         case ColumnType.MULTISELECT:
             return 'MultiSelectData { values: string[], labels?: string[] } or string[]'
         case ColumnType.DATE:
-            return 'DateData { date: Date | string, format?: string } or Date or string'
+            return 'DateData { date: Date | string, format?: DateFormat } or Date or string'
         case ColumnType.DATE_RANGE:
-            return 'DateRangeData { startDate: Date | string, endDate: Date | string, format?: string }'
+            return 'DateRangeData { startDate: Date | string, endDate: Date | string, format?: DateFormat }'
         case ColumnType.TEXT:
             return 'string or number'
         case ColumnType.NUMBER:

package/lib/components/DateRangePicker/DateRangePicker.tsx

@@ -39,7 +39,8 @@ import { Popover } from '../Popover'
 import { TextInput, TextInputSize } from '../Inputs/TextInput'
 import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
-import { ButtonType, ButtonSize, Button, Tooltip } from '../../main'
+import { ButtonType, ButtonSize, Button } from '../Button'
+import { Tooltip } from '../Tooltip'
 import { useBreakpoints } from '../../hooks/useBreakPoints'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 

package/lib/components/DateRangePicker/components/ActionButtons.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Block from '../../Primitives/Block/Block'
-import { ButtonType, ButtonSize, Button, Tooltip } from '../../../main'
+import { ButtonType, ButtonSize, Button } from '../../Button'
+import { Tooltip } from '../../Tooltip'
 import type { ActionButtonsProps } from '../types'
 import { useBreakpoints } from '../../../hooks/useBreakPoints'
 import { getMobileToken } from './mobile.tokens'

package/lib/components/Directory/NavItem.tsx

@@ -368,6 +368,7 @@ const NavItem = ({
                         style={{
                             display: 'flex',
                             flexDirection: 'column',
+                            whiteSpace: 'nowrap',
                         }}
                     >
                         <TruncatedTextWithTooltipV2

package/lib/components/Directory/Section.tsx

@@ -204,6 +204,7 @@ const Section = ({
                         color={tokens.section.header.label.color}
                         fontWeight={tokens.section.header.label.fontWeight}
                         fontSize={tokens.section.header.label.fontSize}
+                        style={{ whiteSpace: 'nowrap' }}
                     >
                         {section.label.toUpperCase()}
                     </Text>

package/lib/components/InputsV2/ChatInputV2/ChatInputV2.dark.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens'
+import type { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types'
 
 const focusRing = (foundationToken: FoundationTokenType) =>
     `inset 0 0 0 3px ${foundationToken.colors.primary[500]}`

package/lib/components/InputsV2/ChatInputV2/ChatInputV2.light.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens'
+import type { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types'
 
 export const getChatInputV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/InputsV2/ChatInputV2/ChatInputV2.tokens.ts

@@ -1,124 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { type BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getChatInputV2DarkTokens } from './ChatInputV2.dark.tokens'
 import { getChatInputV2LightTokens } from './ChatInputV2.light.tokens'
+import type { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types'
 
-export type ChatInputV2TokensType = {
-    container: {
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-        borderRadius: CSSObject['borderRadius']
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        gap: CSSObject['gap']
-        paddingTop: CSSObject['paddingTop']
-        paddingRight: CSSObject['paddingRight']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        attachedFilesContainer: {
-            gap: CSSObject['gap']
-            overflowMenu: {
-                gap: CSSObject['gap']
-                backgroundColor: {
-                    [key in InputStateV2]: CSSObject['backgroundColor']
-                }
-                borderRadius: CSSObject['borderRadius']
-                padding: CSSObject['padding']
-                top: CSSObject['top']
-                right: CSSObject['right']
-                maxHeight: CSSObject['maxHeight']
-            }
-        }
-        tagContainer: {
-            gap: CSSObject['gap']
-            borderRadius: CSSObject['borderRadius']
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            border: CSSObject['border']
-            backgroundColor: CSSObject['backgroundColor']
-            text: {
-                color: CSSObject['color']
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-            }
-        }
-        inputContainer: {
-            outline: {
-                [key in InputStateV2]: CSSObject['outline']
-            }
-            boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
-            gap: CSSObject['gap']
-            borderRadius: CSSObject['borderRadius']
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            border: CSSObject['border']
-            backgroundColor: CSSObject['backgroundColor']
-            input: {
-                color: CSSObject['color']
-                placeholder: CSSObject['color']
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingLeft: CSSObject['paddingLeft']
-                minHeight: CSSObject['minHeight']
-                maxHeight: CSSObject['maxHeight']
-            }
-            actionContainer: {
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-            }
-            topQueriesContainer: {
-                marginRight: CSSObject['marginRight']
-                marginLeft: CSSObject['marginLeft']
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-                borderTop: CSSObject['borderTop']
-                header: {
-                    color: CSSObject['color']
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    textTransform: CSSObject['textTransform']
-                    paddingTop: CSSObject['paddingTop']
-                    paddingRight: CSSObject['paddingRight']
-                    paddingBottom: CSSObject['paddingBottom']
-                    paddingLeft: CSSObject['paddingLeft']
-                    backgroundColor: CSSObject['backgroundColor']
-                }
-                item: {
-                    backgroundColor: {
-                        [key in InputStateV2]: CSSObject['backgroundColor']
-                    }
-                    color: { [key in InputStateV2]: CSSObject['color'] }
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    paddingTop: CSSObject['paddingTop']
-                    paddingRight: CSSObject['paddingRight']
-                    paddingBottom: CSSObject['paddingBottom']
-                    paddingLeft: CSSObject['paddingLeft']
-                    border: CSSObject['border']
-                    transition: CSSObject['transition']
-                    cursor: CSSObject['cursor']
-                    opacity: { [key in InputStateV2]: CSSObject['opacity'] }
-                }
-            }
-        }
-    }
-}
-
-export type ResponsiveChatInputV2TokensType = {
-    [key in keyof BreakpointType]: ChatInputV2TokensType
-}
+export type {
+    ChatInputV2TokensType,
+    ResponsiveChatInputV2TokensType,
+} from './ChatInputV2.tokens.types'
 
 export const getChatInputV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/InputsV2/ChatInputV2/ChatInputV2.tokens.types.ts

@@ -0,0 +1,117 @@
+import type { CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../../breakpoints/breakPoints'
+import { InputStateV2 } from '../inputV2.types'
+
+export type ChatInputV2TokensType = {
+    container: {
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+        borderRadius: CSSObject['borderRadius']
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        attachedFilesContainer: {
+            gap: CSSObject['gap']
+            overflowMenu: {
+                gap: CSSObject['gap']
+                backgroundColor: {
+                    [key in InputStateV2]: CSSObject['backgroundColor']
+                }
+                borderRadius: CSSObject['borderRadius']
+                padding: CSSObject['padding']
+                top: CSSObject['top']
+                right: CSSObject['right']
+                maxHeight: CSSObject['maxHeight']
+            }
+        }
+        tagContainer: {
+            gap: CSSObject['gap']
+            borderRadius: CSSObject['borderRadius']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            border: CSSObject['border']
+            backgroundColor: CSSObject['backgroundColor']
+            text: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+            }
+        }
+        inputContainer: {
+            outline: {
+                [key in InputStateV2]: CSSObject['outline']
+            }
+            boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
+            gap: CSSObject['gap']
+            borderRadius: CSSObject['borderRadius']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            border: CSSObject['border']
+            backgroundColor: CSSObject['backgroundColor']
+            input: {
+                color: CSSObject['color']
+                placeholder: CSSObject['color']
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingLeft: CSSObject['paddingLeft']
+                minHeight: CSSObject['minHeight']
+                maxHeight: CSSObject['maxHeight']
+            }
+            actionContainer: {
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+            }
+            topQueriesContainer: {
+                marginRight: CSSObject['marginRight']
+                marginLeft: CSSObject['marginLeft']
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+                borderTop: CSSObject['borderTop']
+                header: {
+                    color: CSSObject['color']
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    textTransform: CSSObject['textTransform']
+                    paddingTop: CSSObject['paddingTop']
+                    paddingRight: CSSObject['paddingRight']
+                    paddingBottom: CSSObject['paddingBottom']
+                    paddingLeft: CSSObject['paddingLeft']
+                    backgroundColor: CSSObject['backgroundColor']
+                }
+                item: {
+                    backgroundColor: {
+                        [key in InputStateV2]: CSSObject['backgroundColor']
+                    }
+                    color: { [key in InputStateV2]: CSSObject['color'] }
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    paddingTop: CSSObject['paddingTop']
+                    paddingRight: CSSObject['paddingRight']
+                    paddingBottom: CSSObject['paddingBottom']
+                    paddingLeft: CSSObject['paddingLeft']
+                    border: CSSObject['border']
+                    transition: CSSObject['transition']
+                    cursor: CSSObject['cursor']
+                    opacity: { [key in InputStateV2]: CSSObject['opacity'] }
+                }
+            }
+        }
+    }
+}
+
+export type ResponsiveChatInputV2TokensType = {
+    [key in keyof BreakpointType]: ChatInputV2TokensType
+}

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.dark.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens'
+import type { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types'
 
 const focusGlow = (foundationToken: FoundationTokenType) =>
     `0 2px 8px 0 ${foundationToken.colors.primary[50]}, 0 0 0 3px ${foundationToken.colors.primary[50]}`

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.light.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens'
+import type { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types'
 export const getChatInputV2MobileLightTokens = (
     foundationToken: FoundationTokenType
 ): ChatInputV2MobileTokensType => {

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.ts

@@ -1,54 +1,13 @@
-import type { CSSObject } from 'styled-components'
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getChatInputV2MobileDarkTokens } from './ChatInputV2Mobile.dark.tokens'
 import { getChatInputV2MobileLightTokens } from './ChatInputV2Mobile.light.tokens'
+import type { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types'
 
-export type Dimensions = {
-    width: CSSObject['width']
-    height: CSSObject['height']
-    minHeight: CSSObject['minHeight']
-    maxHeight: CSSObject['maxHeight']
-    minWidth: CSSObject['minWidth']
-    maxWidth: CSSObject['maxWidth']
-}
-export type ChatInputV2MobileTokensType = {
-    gap: CSSObject['gap']
-    attachmentButtonDimensions: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        border: CSSObject['border']
-        borderRadius: CSSObject['borderRadius']
-        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
-        color: CSSObject['color']
-    }
-    inputContainer: {
-        border: { [key in InputStateV2]: CSSObject['border'] }
-        borderRadius: { [key in InputStateV2]: CSSObject['borderRadius'] }
-        boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
-        paddingLeft: CSSObject['paddingLeft']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        lineHeight: CSSObject['lineHeight']
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: CSSObject['color']
-        placeholder: {
-            color: CSSObject['color']
-        }
-        backgroundColor: CSSObject['backgroundColor']
-    } & Dimensions
-    secondaryAction: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        borderRadius: CSSObject['borderRadius']
-        right: CSSObject['right']
-        bottom: CSSObject['bottom']
-        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
-        color: CSSObject['color']
-    }
-}
+export type {
+    Dimensions,
+    ChatInputV2MobileTokensType,
+} from './ChatInputV2Mobile.tokens.types'
 
 export const getChatInputV2MobileTokens = (
     foundationToken: FoundationTokenType,

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.types.ts

@@ -0,0 +1,47 @@
+import type { CSSObject } from 'styled-components'
+import { InputStateV2 } from '../inputV2.types'
+
+export type Dimensions = {
+    width: CSSObject['width']
+    height: CSSObject['height']
+    minHeight: CSSObject['minHeight']
+    maxHeight: CSSObject['maxHeight']
+    minWidth: CSSObject['minWidth']
+    maxWidth: CSSObject['maxWidth']
+}
+export type ChatInputV2MobileTokensType = {
+    gap: CSSObject['gap']
+    attachmentButtonDimensions: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        border: CSSObject['border']
+        borderRadius: CSSObject['borderRadius']
+        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
+        color: CSSObject['color']
+    }
+    inputContainer: {
+        border: { [key in InputStateV2]: CSSObject['border'] }
+        borderRadius: { [key in InputStateV2]: CSSObject['borderRadius'] }
+        boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
+        paddingLeft: CSSObject['paddingLeft']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        lineHeight: CSSObject['lineHeight']
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+        placeholder: {
+            color: CSSObject['color']
+        }
+        backgroundColor: CSSObject['backgroundColor']
+    } & Dimensions
+    secondaryAction: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        borderRadius: CSSObject['borderRadius']
+        right: CSSObject['right']
+        bottom: CSSObject['bottom']
+        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
+        color: CSSObject['color']
+    }
+}