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

package/dist/components/CodeEditorV2/codeEditorV2.tokens.types.d.ts

@@ -0,0 +1,95 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export declare enum CodeEditorV2DiffLineType {
+    ADDED = "added",
+    REMOVED = "removed",
+    UNCHANGED = "unchanged"
+}
+export type CodeEditorV2Tokens = {
+    backgroundColor: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    theme: 'light' | 'dark';
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderBottom: CSSObject['borderBottom'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        gap: CSSObject['gap'];
+        icon: {
+            width: CSSObject['width'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        backgroundColor: CSSObject['backgroundColor'];
+        gutter: {
+            width: CSSObject['width'];
+            color: CSSObject['color'];
+            backgroundColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor'];
+            };
+            borderLeft: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft'];
+            };
+            borderColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['color'];
+            };
+        };
+        code: {
+            fontFamily: CSSObject['fontFamily'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            paddingRight: CSSObject['paddingRight'];
+        };
+        highlightedLine: {
+            backgroundColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor'];
+            };
+        };
+        syntax: {
+            keyword: {
+                color: CSSObject['color'];
+            };
+            function: {
+                color: CSSObject['color'];
+            };
+            string: {
+                color: CSSObject['color'];
+            };
+            number: {
+                color: CSSObject['color'];
+            };
+            operator: {
+                color: CSSObject['color'];
+            };
+            variable: {
+                color: CSSObject['color'];
+            };
+            comment: {
+                color: CSSObject['color'];
+            };
+            text: {
+                color: CSSObject['color'];
+            };
+        };
+    };
+};
+export type ResponsiveCodeEditorV2Tokens = {
+    [key in keyof BreakpointType]: CodeEditorV2Tokens;
+};

package/dist/components/CodeEditorV2/codeEditorV2.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
-import { CodeEditorV2Tokens } from './codeEditorV2.tokens';
+import { CodeEditorV2Tokens, CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types';
 import { CSSObject } from 'styled-components';
+export { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types';
 export declare enum CodeEditorV2Variant {
     DEFAULT = "default",
     NO_GUTTER = "no-gutter",
@@ -10,11 +11,6 @@ export declare enum MonacoTheme {
     LIGHT = "light",
     DARK = "dark"
 }
-export declare enum CodeEditorV2DiffLineType {
-    ADDED = "added",
-    REMOVED = "removed",
-    UNCHANGED = "unchanged"
-}
 export type CodeEditorV2DiffLine = {
     content: string;
     type: CodeEditorV2DiffLineType;

package/dist/components/DataTable/TableBody/types.d.ts

@@ -46,6 +46,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     getColumnWidth: (column: ColumnDefinition<T>, index: number) => React.CSSProperties;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
+    dateLabel?: string;
     isLoading?: boolean;
     showSkeleton?: boolean;
     skeletonVariant?: SkeletonVariant;

package/dist/components/DataTable/TableCell/types.d.ts

@@ -14,6 +14,7 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     hasCustomBackground?: boolean;
     onFieldChange: (value: unknown) => void;
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
+    dateLabel?: string;
     'data-row-index'?: number;
     'data-col-index'?: number;
     tabIndex?: number;

package/dist/components/DataTable/columnTypes.d.ts

@@ -1,4 +1,4 @@
-import { FilterType, ColumnType } from './types';
+import { FilterType, ColumnType, DateFormat } from './types';
 export type ColumnFilterOption = {
     id: string;
     label: string;
@@ -36,12 +36,14 @@ export type MultiSelectData = {
 };
 export type DateData = {
     date: Date | string;
-    format?: string;
+    format?: DateFormat;
+    dateLabel?: string;
 };
 export type DateRangeData = {
     startDate: Date | string;
     endDate: Date | string;
-    format?: string;
+    format?: DateFormat;
+    dateLabel?: string;
 };
 export type ColumnDataTypeMap = {
     [ColumnType.TEXT]: string | number;

package/dist/components/DataTable/dataTable.tokens.d.ts

@@ -194,6 +194,10 @@ 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'];

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

@@ -73,10 +73,18 @@ export type DropdownColumnProps = {
     placeholder?: string;
     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 = {
     min: number;
@@ -204,8 +212,13 @@ export type ColumnDefinition<T> = (BaseColumnDefinition<T> & {
 }) | (BaseColumnDefinition<T> & {
     type: ColumnType.DATE;
     renderCell?: (value: DateColumnProps, 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;
     renderCell?: (value: number, row: T, index: number) => ReactNode;
@@ -365,6 +378,11 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     tableBodyHeight?: string | number;
     mobileColumnsToShow?: number;
+    /**
+     * Optional label appended after formatted dates in DATE columns,
+     * e.g. "(IST)". Can be overridden per-column or per-cell.
+     */
+    dateLabel?: string;
     enablePivotTable?: boolean;
     pivotTableConfig?: {
         triggerButton?: ReactNode;

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

@@ -1,4 +1,4 @@
-import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition, PivotAggregationType } from './types';
+import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition, PivotAggregationType, DateFormat } from './types';
 import { AvatarData, TagData, SelectData, MultiSelectData, DateData, DateRangeData } from './columnTypes';
 export declare const isDateOnlyString: (value: string) => boolean;
 /**
@@ -20,6 +20,7 @@ export declare const getDefaultColumnWidth: <T extends Record<string, unknown>>(
 };
 export declare const getColumnStyles: <T extends Record<string, unknown>>(column: ColumnDefinition<T>) => React.CSSProperties;
 export declare const formatDate: (dateString: string) => string;
+export declare const formatDateString: (date: Date, format: string) => string;
 export declare const updateColumnFilter: (currentFilters: ColumnFilter[], field: keyof Record<string, unknown>, type: FilterType, value: string | string[] | {
     min: number;
     max: number;
@@ -48,8 +49,8 @@ export declare const createSelectData: (value: string, options?: {
     disabled?: boolean;
 }) => SelectData;
 export declare const createMultiSelectData: (values: string[], labels?: string[]) => MultiSelectData;
-export declare const createDateData: (date: Date | string, format?: string) => DateData;
-export declare const createDateRangeData: (startDate: Date | string, endDate: Date | string, format?: string) => DateRangeData;
+export declare const createDateData: (date: Date | string, format?: DateFormat) => DateData;
+export declare const createDateRangeData: (startDate: Date | string, endDate: Date | string, format?: DateFormat) => DateRangeData;
 export declare const validateDataForColumnType: <T extends Record<string, unknown>>(data: T, columns: ColumnDefinition<T>[]) => {
     isValid: boolean;
     errors: string[];

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.dark.tokens.d.ts

@@ -1,4 +1,4 @@
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens';
+import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types';
 /** Dark theme: surfaces and borders aligned with TextInputV2 dark (gray[900] field, gray[700–800] chrome). */
 export declare const getChatInputV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveChatInputV2TokensType;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.light.tokens.d.ts

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

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.tokens.d.ts

@@ -1,125 +1,6 @@
-import { CSSObject } from 'styled-components';
-import { BreakpointType } from '../../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { InputStateV2 } from '../inputV2.types';
 import { Theme } from '../../../context/theme.enum';
-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;
-};
+import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types';
+export type { ChatInputV2TokensType, ResponsiveChatInputV2TokensType, } from './ChatInputV2.tokens.types';
 export declare const getChatInputV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveChatInputV2TokensType;
 export default getChatInputV2Tokens;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.tokens.types.d.ts

@@ -0,0 +1,121 @@
+import { CSSObject } from 'styled-components';
+import { 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/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.dark.tokens.d.ts

@@ -1,4 +1,4 @@
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens';
+import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types';
 /** Dark mobile shell: aligned with `getChatInputV2DarkTokens` (gray[800] chrome, gray[800] field borders, gray[100] text). */
 export declare const getChatInputV2MobileDarkTokens: (foundationToken: FoundationTokenType) => ChatInputV2MobileTokensType;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.light.tokens.d.ts

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

package/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.d.ts

@@ -1,60 +1,6 @@
-import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { InputStateV2 } from '../inputV2.types';
 import { Theme } from '../../../context/theme.enum';
-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'];
-    };
-};
+import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types';
+export type { Dimensions, ChatInputV2MobileTokensType, } from './ChatInputV2Mobile.tokens.types';
 export declare const getChatInputV2MobileTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ChatInputV2MobileTokensType;
 export default getChatInputV2MobileTokens;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.types.d.ts

@@ -0,0 +1,56 @@
+import { 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'];
+    };
+};

package/dist/components/InputsV2/ChatInputV2/MobileChatInputV2.d.ts

@@ -11,7 +11,7 @@ declare const MobileChatInputV2: import('react').ForwardRefExoticComponent<{
     onFileClick?: (file: import('./ChatInputV2.types').ChatInputV2AttachedFile) => void;
     onSecondaryActionClick?: () => void;
     id?: string;
-    webTokens: import('./ChatInputV2.tokens').ChatInputV2TokensType;
+    webTokens: import('./ChatInputV2.tokens.types').ChatInputV2TokensType;
     onEnter?: () => void;
 } & Omit<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "className" | "onFocus" | "onBlur" | "onChange" | "cols"> & import('react').RefAttributes<HTMLDivElement>>;
 export default MobileChatInputV2;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueInputV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens';
+import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types';
 export declare const getMultiValueInputV2DarkTokens: (foundationTokens: FoundationTokenType) => ResponsiveMultiValueInputV2Tokens;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueInputV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens';
+import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types';
 export declare const getMultiValueInputV2LightTokens: (foundationTokens: FoundationTokenType) => ResponsiveMultiValueInputV2Tokens;