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

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens'
+import type { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types'
 
 export const getMultiValueInputV2DarkTokens = (
     foundationTokens: FoundationTokenType

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens'
+import type { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types'
 
 export const getMultiValueInputV2LightTokens = (
     foundationTokens: FoundationTokenType

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

@@ -1,75 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
-import type { BreakpointType } from '../../../breakpoints/breakPoints'
 import { Theme } from '../../../context/theme.enum'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
 import { getMultiValueInputV2DarkTokens } from './MultiValueInputV2.dark.tokens'
 import { getMultiValueInputV2LightTokens } from './MultiValueInputV2.light.tokens'
-import type {
-    InputFooterV2Tokens,
-    InputLabelsV2Tokens,
-} from '../inputV2.tokens'
+import type { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types'
 
-export type MultiValueInputV2TokensType = {
-    gap: CSSObject['gap']
-    borderRadius: CSSObject['borderRadius']
-    topContainer: InputLabelsV2Tokens
-    inputContainer: {
-        offSet: number
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight']
-        }
-        gap: CSSObject['gap']
-        borderRadius?: CSSObject['borderRadius']
-        boxShadow: {
-            [key in InputStateV2]: CSSObject['boxShadow']
-        }
-        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
-        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
-        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
-        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        placeholderColor: {
-            default: CSSObject['color']
-            focus: CSSObject['color']
-            hover: CSSObject['color']
-            error: CSSObject['color']
-            disabled: CSSObject['color']
-        }
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-        closeButton: {
-            width: CSSObject['width']
-        }
-        leftSlot: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-        }
-        rightSlot: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-        }
-        /** Vertical alignment for slot row vs tags (`top` / `marginTop` in layout) */
-        slotAlignTop: {
-            withTags: CSSObject['top']
-            withoutTags: CSSObject['top']
-        }
-    }
-    bottomContainer: InputFooterV2Tokens
-}
-
-export type ResponsiveMultiValueInputV2Tokens = {
-    [key in keyof BreakpointType]: MultiValueInputV2TokensType
-}
+export type {
+    MultiValueInputV2TokensType,
+    ResponsiveMultiValueInputV2Tokens,
+} from './MultiValueInputV2.tokens.types'
 
 export const getMultiValueInputV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,68 @@
+import type { CSSObject } from 'styled-components'
+import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
+import type { BreakpointType } from '../../../breakpoints/breakPoints'
+import type {
+    InputFooterV2Tokens,
+    InputLabelsV2Tokens,
+} from '../inputV2.tokens'
+
+export type MultiValueInputV2TokensType = {
+    gap: CSSObject['gap']
+    borderRadius: CSSObject['borderRadius']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        offSet: number
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight']
+        }
+        gap: CSSObject['gap']
+        borderRadius?: CSSObject['borderRadius']
+        boxShadow: {
+            [key in InputStateV2]: CSSObject['boxShadow']
+        }
+        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
+        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
+        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
+        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        placeholderColor: {
+            default: CSSObject['color']
+            focus: CSSObject['color']
+            hover: CSSObject['color']
+            error: CSSObject['color']
+            disabled: CSSObject['color']
+        }
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+        closeButton: {
+            width: CSSObject['width']
+        }
+        leftSlot: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+        }
+        rightSlot: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+        }
+        /** Vertical alignment for slot row vs tags (`top` / `marginTop` in layout) */
+        slotAlignTop: {
+            withTags: CSSObject['top']
+            withoutTags: CSSObject['top']
+        }
+    }
+    bottomContainer: InputFooterV2Tokens
+}
+
+export type ResponsiveMultiValueInputV2Tokens = {
+    [key in keyof BreakpointType]: MultiValueInputV2TokensType
+}

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens'
+import type { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens.types'
 
 /** Dark theme: aligned with TextInputV2 dark — light foreground on gray[900] field, slate-like borders */
 const labelTopContainer = (foundationToken: FoundationTokenType) => ({

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens'
+import type { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens.types'
 
 const labelTopContainer = (foundationToken: FoundationTokenType) => ({
     label: {

package/lib/components/InputsV2/NumberInputV2/NumberInputV2.tsx

@@ -49,7 +49,7 @@ import { filterBlockedProps } from '../../../utils/prop-helpers'
 import { generateAccessibilityIds, setExternalRef } from '../utils/utils'
 import NumberInputV2Stepper from './NumberInputV2Stepper'
 import NumberInputV2Unit from './NumberInputV2Unit'
-import { NumberInputV2Direction } from '.'
+import { NumberInputV2Direction } from './numberInputV2.types'
 
 const NumberInputV2 = forwardRef<HTMLInputElement, NumberInputV2Props>(
     (

package/lib/components/InputsV2/NumberInputV2/numberInputV2.tokens.ts

@@ -1,126 +1,15 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
-import { InputSizeV2, InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getNumberInputV2LightTokens } from './NumberInputV2.light.tokens'
 import { getNumberInputV2DarkTokens } from './NumberInputV2.dark.tokens'
-import type {
-    InputFooterV2Tokens,
-    InputLabelsV2Tokens,
-    FloatingLabelsV2Tokens,
-} from '../inputV2.tokens'
-export type NumberInputV2TokensType = {
-    gap: CSSObject['gap']
-    topContainer: InputLabelsV2Tokens
-    inputContainer: {
-        placeholder: {
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-        }
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight']
-        }
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        borderRadius: {
-            [key in InputSizeV2]: CSSObject['borderRadius']
-        }
-        boxShadow: CSSObject['boxShadow']
-        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
-        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
-        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
-        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        lineHeight: {
-            [key in InputSizeV2]: CSSObject['lineHeight']
-        }
+import type { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens.types'
 
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-        stepperButton: {
-            width: {
-                [key in InputSizeV2]: CSSObject['width']
-            }
-            backgroundColor: {
-                [key in InputStateV2]: CSSObject['backgroundColor']
-            }
-            icon: {
-                color: {
-                    [key in InputStateV2]: CSSObject['color']
-                }
-                width: {
-                    [key in InputSizeV2]: CSSObject['width']
-                }
-            }
-        }
-        slot: {
-            left: {
-                width: {
-                    [key in InputSizeV2]: CSSObject['width']
-                }
-                height: {
-                    [key in InputSizeV2]: CSSObject['height']
-                }
-                margin: {
-                    [key in InputSizeV2]: CSSObject['margin']
-                }
-            }
-            right: {
-                width: {
-                    [key in InputSizeV2]: CSSObject['width']
-                }
-                height: {
-                    [key in InputSizeV2]: CSSObject['height']
-                }
-                margin: {
-                    [key in InputSizeV2]: CSSObject['margin']
-                }
-            }
-        }
-    }
-    unit: {
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight']
-        }
-        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
-        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
-        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
-        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
-        borderRadius: { [key in InputSizeV2]: CSSObject['borderRadius'] }
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-    }
-    floatingLabels: FloatingLabelsV2Tokens
-    bottomContainer: InputFooterV2Tokens
-}
-export type ResponsiveNumberInputV2Tokens = {
-    [key in keyof BreakpointType]: NumberInputV2TokensType
-}
+// Re-exported for backward compatibility: these token-shape types now live in
+// the leaf module to break the tokens <-> dark/light cycle (see issue #1473).
+export type {
+    NumberInputV2TokensType,
+    ResponsiveNumberInputV2Tokens,
+} from './numberInputV2.tokens.types'
 
 export const getNumberInputV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/InputsV2/NumberInputV2/numberInputV2.tokens.types.ts

@@ -0,0 +1,120 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+import { InputSizeV2, InputStateV2 } from '../inputV2.types'
+import type {
+    InputFooterV2Tokens,
+    InputLabelsV2Tokens,
+    FloatingLabelsV2Tokens,
+} from '../inputV2.tokens'
+
+export type NumberInputV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        placeholder: {
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+        }
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        borderRadius: {
+            [key in InputSizeV2]: CSSObject['borderRadius']
+        }
+        boxShadow: CSSObject['boxShadow']
+        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
+        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
+        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
+        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        lineHeight: {
+            [key in InputSizeV2]: CSSObject['lineHeight']
+        }
+
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+        stepperButton: {
+            width: {
+                [key in InputSizeV2]: CSSObject['width']
+            }
+            backgroundColor: {
+                [key in InputStateV2]: CSSObject['backgroundColor']
+            }
+            icon: {
+                color: {
+                    [key in InputStateV2]: CSSObject['color']
+                }
+                width: {
+                    [key in InputSizeV2]: CSSObject['width']
+                }
+            }
+        }
+        slot: {
+            left: {
+                width: {
+                    [key in InputSizeV2]: CSSObject['width']
+                }
+                height: {
+                    [key in InputSizeV2]: CSSObject['height']
+                }
+                margin: {
+                    [key in InputSizeV2]: CSSObject['margin']
+                }
+            }
+            right: {
+                width: {
+                    [key in InputSizeV2]: CSSObject['width']
+                }
+                height: {
+                    [key in InputSizeV2]: CSSObject['height']
+                }
+                margin: {
+                    [key in InputSizeV2]: CSSObject['margin']
+                }
+            }
+        }
+    }
+    unit: {
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight']
+        }
+        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
+        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
+        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
+        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
+        borderRadius: { [key in InputSizeV2]: CSSObject['borderRadius'] }
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+    }
+    floatingLabels: FloatingLabelsV2Tokens
+    bottomContainer: InputFooterV2Tokens
+}
+export type ResponsiveNumberInputV2Tokens = {
+    [key in keyof BreakpointType]: NumberInputV2TokensType
+}

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

@@ -1,5 +1,5 @@
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens'
+import type { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens.types'
 
 export const getOTPInputV2DarkTokens = (
     foundationTokens: FoundationTokenType

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

@@ -1,5 +1,5 @@
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens'
+import type { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens.types'
 
 export const getOTPInputV2LightTokens = (
     foundationTokens: FoundationTokenType

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

@@ -1,40 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import type { BreakpointType } from '../../../breakpoints/breakPoints'
-import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens'
-import type { InputStateV2 } from '../inputV2.types'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
 import { Theme } from '../../../context/theme.enum'
 import { getOTPInputV2DarkTokens } from './OTPInputV2.dark.tokens'
 import { getOTPInputV2LightTokens } from './OTPInputV2.light.tokens'
+import type { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens.types'
 
-export type OTPInputV2TokensType = {
-    gap: CSSObject['gap']
-    topContainer: InputLabelsV2Tokens
-    inputContainer: {
-        gap: CSSObject['gap']
-        input: {
-            height: CSSObject['height']
-            width: CSSObject['width']
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-            borderRadius: CSSObject['borderRadius']
-            border: {
-                [key in InputStateV2]: CSSObject['border']
-            }
-            backgroundColor: {
-                [key in InputStateV2]: CSSObject['backgroundColor']
-            }
-        }
-    }
-    bottomContainer: InputFooterV2Tokens
-}
-
-export type ResponsiveOTPInputV2Tokens = {
-    [key in keyof BreakpointType]: OTPInputV2TokensType
-}
+export type {
+    OTPInputV2TokensType,
+    ResponsiveOTPInputV2Tokens,
+} from './OTPInputV2.tokens.types'
 
 export const getOTPInputV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,36 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../../breakpoints/breakPoints'
+import type {
+    InputFooterV2Tokens,
+    InputLabelsV2Tokens,
+} from '../inputV2.tokens'
+import type { InputStateV2 } from '../inputV2.types'
+
+export type OTPInputV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        gap: CSSObject['gap']
+        input: {
+            height: CSSObject['height']
+            width: CSSObject['width']
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+            borderRadius: CSSObject['borderRadius']
+            border: {
+                [key in InputStateV2]: CSSObject['border']
+            }
+            backgroundColor: {
+                [key in InputStateV2]: CSSObject['backgroundColor']
+            }
+        }
+    }
+    bottomContainer: InputFooterV2Tokens
+}
+
+export type ResponsiveOTPInputV2Tokens = {
+    [key in keyof BreakpointType]: OTPInputV2TokensType
+}

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

@@ -1,5 +1,5 @@
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import type { ResponsiveSearchInputV2Tokens } from './SearchInputV2.tokens'
+import type { ResponsiveSearchInputV2Tokens } from './SearchInputV2.tokens.types'
 
 export const getSearchInputV2DarkTokens = (
     foundationTokens: FoundationTokenType

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

@@ -1,5 +1,5 @@
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import type { ResponsiveSearchInputV2Tokens } from './SearchInputV2.tokens'
+import type { ResponsiveSearchInputV2Tokens } from './SearchInputV2.tokens.types'
 
 export const getSearchInputV2LightTokens = (
     foundationTokens: FoundationTokenType

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

@@ -1,99 +1,14 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 
-import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getSearchInputV2DarkTokens } from './SearchInputV2.dark.tokens'
 import { getSearchInputV2LightTokens } from './SearchInputV2.light.tokens'
+import type { ResponsiveSearchInputV2Tokens } from './SearchInputV2.tokens.types'
 
-export type SearchInputV2TokensType = {
-    gap: CSSObject['gap']
-    label: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-    }
-    subLabel: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-    }
-    hintText: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-    }
-    errorMessage: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: CSSObject['color']
-    }
-    required: {
-        color: CSSObject['color']
-    }
-    inputContainer: {
-        paddingTop: {
-            [key in InputSizeV2]: CSSObject['paddingTop']
-        }
-        paddingRight: {
-            [key in InputSizeV2]: CSSObject['paddingRight']
-        }
-        paddingBottom: {
-            [key in InputSizeV2]: CSSObject['paddingBottom']
-        }
-        paddingLeft: {
-            [key in InputSizeV2]: CSSObject['paddingLeft']
-        }
-        borderRadius: CSSObject['borderRadius']
-        borderBottom: {
-            [key in InputStateV2]: CSSObject['borderBottom']
-        }
-        outline: CSSObject['outline']
-        boxShadow: CSSObject['boxShadow']
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        placeholderColor: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        slot: {
-            left: {
-                top: CSSObject['top']
-                left: CSSObject['left']
-                bottom: CSSObject['bottom']
-            }
-            right: {
-                top: CSSObject['top']
-                right: CSSObject['right']
-                bottom: CSSObject['bottom']
-            }
-            transition: CSSObject['transition']
-            transform: CSSObject['transform']
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-        }
-    }
-    icon: {
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        width: CSSObject['width']
-    }
-}
-
-export type ResponsiveSearchInputV2Tokens = {
-    [key in keyof BreakpointType]: SearchInputV2TokensType
-}
+export type {
+    SearchInputV2TokensType,
+    ResponsiveSearchInputV2Tokens,
+} from './SearchInputV2.tokens.types'
 
 export const getSearchInputV2Tokens = (
     foundationTokens: FoundationTokenType,