@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.6

package/lib/components/Radio/Radio.tsx

@@ -16,7 +16,7 @@ import { getTruncatedText } from '../../global-utils/GlobalUtils'
 export const Radio = ({
     id,
     checked,
-    defaultChecked = false,
+    defaultChecked,
     onChange,
     disabled = false,
     required = false,
@@ -45,12 +45,20 @@ export const Radio = ({
         subtextId && customAriaDescribedBy
             ? `${customAriaDescribedBy} ${subtextId}`
             : subtextId || customAriaDescribedBy
+    const isControlled = checked !== undefined
+    const checkedProps = isControlled
+        ? { checked }
+        : { defaultChecked: defaultChecked ?? false }
 
     return (
         <Block
             data-radio={children ?? 'radio'}
             data-status={disabled ? 'disabled' : 'enabled'}
-            data-state={checked ? 'checked' : 'unchecked'}
+            data-state={
+                (isControlled ? checked : defaultChecked)
+                    ? 'checked'
+                    : 'unchecked'
+            }
             data-id={value ?? ''}
             display="flex"
             alignItems={subtext ? 'flex-start' : 'center'}
@@ -60,14 +68,13 @@ export const Radio = ({
                 type="radio"
                 id={uniqueId}
                 name={name}
-                checked={checked}
-                defaultChecked={defaultChecked}
+                {...checkedProps}
                 disabled={disabled}
                 required={required}
+                readOnly={isControlled && !onChange ? true : undefined}
                 onChange={onChange}
                 size={size}
                 $isDisabled={disabled}
-                $isChecked={checked || false}
                 $error={error}
                 $tokens={radioTokens}
                 style={getErrorShakeStyle(shouldShake)}

package/lib/components/Radio/StyledRadio.tsx

@@ -7,7 +7,6 @@ import { radioAnimations } from './radio.animations'
 export const StyledRadioInput = styled.input<{
     size: RadioSize
     $isDisabled: boolean
-    $isChecked: boolean
     $error?: boolean
     $tokens: RadioTokensType
 }>`
@@ -22,17 +21,17 @@ export const StyledRadioInput = styled.input<{
     padding: 0;
     flex-shrink: 0;
 
-    ${({ size, $isChecked, $isDisabled, $tokens }) => {
+    ${({ size, $isDisabled, $tokens }) => {
         const state = $isDisabled ? 'disabled' : 'default'
-        const indicatorState = $isChecked ? 'active' : 'inactive'
+        const inactiveIndicator = $tokens.indicator.inactive
+        const activeIndicator = $tokens.indicator.active
 
         return css`
             ${radioAnimations}
 
-            background-color: ${$tokens.indicator[indicatorState]
-                .backgroundColor[state]};
-            border: ${$tokens.borderWidth[indicatorState][state]}px solid
-                ${$tokens.indicator[indicatorState].borderColor[state]};
+            background-color: ${inactiveIndicator.backgroundColor[state]};
+            border: ${$tokens.borderWidth.inactive[state]}px solid
+                ${inactiveIndicator.borderColor[state]};
             width: ${$tokens.height[size]};
             height: ${$tokens.height[size]};
 
@@ -41,28 +40,45 @@ export const StyledRadioInput = styled.input<{
                 width: 50%;
                 height: 50%;
                 border-radius: 50%;
-                background-color: ${$isChecked
-                    ? $tokens.activeIndicator.active.backgroundColor[state]
-                    : 'transparent'};
-                transform: ${$isChecked ? 'scale(1)' : 'scale(0)'};
+                background-color: transparent;
+                transform: scale(0);
                 transition:
                     transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
             }
+
+            &:checked {
+                background-color: ${activeIndicator.backgroundColor[state]};
+                border: ${$tokens.borderWidth.active[state]}px solid
+                    ${activeIndicator.borderColor[state]};
+
+                &::after {
+                    background-color: ${$tokens.activeIndicator.active
+                        .backgroundColor[state]};
+                    transform: scale(1);
+                }
+            }
+
             &:focus-visible {
-                outline: 2px solid
-                    ${$tokens.indicator[indicatorState].borderColor[state]};
+                outline: 2px solid ${inactiveIndicator.borderColor[state]};
                 outline-offset: 2px;
                 /* WCAG 2.4.7 Focus Visible (AA): Focus indicator must be visible
                  * WCAG 1.4.11 Non-text Contrast (AA): Focus outline must have contrast ratio ≥3:1 against adjacent colors
                  * Manual verification recommended for all states */
             }
 
+            &:checked:focus-visible {
+                outline-color: ${activeIndicator.borderColor[state]};
+            }
+
             &:not(:disabled):hover {
-                background-color: ${$tokens.indicator[indicatorState]
-                    .backgroundColor.hover};
-                border-color: ${$tokens.indicator[indicatorState].borderColor
-                    .hover};
+                background-color: ${inactiveIndicator.backgroundColor.hover};
+                border-color: ${inactiveIndicator.borderColor.hover};
+            }
+
+            &:checked:not(:disabled):hover {
+                background-color: ${activeIndicator.backgroundColor.hover};
+                border-color: ${activeIndicator.borderColor.hover};
             }
 
             cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};

package/lib/components/SelectV2/selectV2.shared.types.ts

@@ -6,7 +6,7 @@ import type {
     RefObject,
 } from 'react'
 import type { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'
-import type { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 import type { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
 
 export enum SelectV2Alignment {

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens'
+import type { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens.types'
 
 export const getCheckboxV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens'
+import type { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens.types'
 
 export const getCheckboxV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.tokens.ts

@@ -1,90 +1,14 @@
 import { Theme } from '../../../context/theme.enum'
 
-import { CSSObject } from 'styled-components'
-import { CheckboxV2CheckedState } from './checkboxV2.types'
-import {
-    SelectorV2Size,
-    SelectorV2InteractionState,
-} from '../../SelectorV2/selectorV2.types'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { getCheckboxV2LightTokens } from './checkboxV2.light.tokens'
 import { getCheckboxV2DarkTokens } from './checkboxV2.dark.tokens'
+import type { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens.types'
 
-export type CheckboxV2TokensType = {
-    gap: CSSObject['gap']
-    checkbox: {
-        height: {
-            [key in SelectorV2Size]: CSSObject['height']
-        }
-        width: {
-            [key in SelectorV2Size]: CSSObject['width']
-        }
-        opacity: CSSObject['opacity']
-        backgroundColor: {
-            [key in CheckboxV2CheckedState]?: {
-                [key in SelectorV2InteractionState]?: CSSObject['backgroundColor']
-            }
-        }
-
-        borderRadius: { [key in SelectorV2Size]: CSSObject['borderRadius'] }
-
-        border: {
-            [key in CheckboxV2CheckedState]?: {
-                [key in SelectorV2InteractionState]?: CSSObject['border']
-            }
-        }
-
-        outline: CSSObject['outline']
-        outlineOffset: CSSObject['outlineOffset']
-        boxShadow: CSSObject['boxShadow']
-        icon: {
-            color: {
-                [key in CheckboxV2CheckedState]?: {
-                    [key in Extract<
-                        SelectorV2InteractionState,
-                        'default' | 'disabled'
-                    >]?: CSSObject['color']
-                }
-            }
-            width: { [key in SelectorV2Size]: CSSObject['width'] }
-            height: { [key in SelectorV2Size]: CSSObject['height'] }
-            strokeWidth: { [key in SelectorV2Size]: CSSObject['strokeWidth'] }
-        }
-    }
-    content: {
-        gap: CSSObject['gap']
-        label: {
-            gap: CSSObject['gap']
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color']
-            }
-            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
-            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
-            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
-            slot: {
-                maxHeight: {
-                    [key in SelectorV2Size]: CSSObject['maxHeight']
-                }
-            }
-        }
-        subLabel: {
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color']
-            }
-            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
-            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
-            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
-        }
-        required: {
-            color: CSSObject['color']
-        }
-    }
-}
-
-export type ResponsiveCheckboxV2Tokens = {
-    [key in keyof BreakpointType]: CheckboxV2TokensType
-}
+export type {
+    CheckboxV2TokensType,
+    ResponsiveCheckboxV2Tokens,
+} from './checkboxV2.tokens.types'
 
 export const getCheckboxV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.tokens.types.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components'
+import {
+    SelectorV2Size,
+    SelectorV2InteractionState,
+} from '../../SelectorV2/selectorV2.types'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+export enum CheckboxV2CheckedState {
+    CHECKED = 'checked',
+    UNCHECKED = 'unchecked',
+    INDETERMINATE = 'indeterminate',
+}
+
+export type CheckboxV2TokensType = {
+    gap: CSSObject['gap']
+    checkbox: {
+        height: {
+            [key in SelectorV2Size]: CSSObject['height']
+        }
+        width: {
+            [key in SelectorV2Size]: CSSObject['width']
+        }
+        opacity: CSSObject['opacity']
+        backgroundColor: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['backgroundColor']
+            }
+        }
+
+        borderRadius: { [key in SelectorV2Size]: CSSObject['borderRadius'] }
+
+        border: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['border']
+            }
+        }
+
+        outline: CSSObject['outline']
+        outlineOffset: CSSObject['outlineOffset']
+        boxShadow: CSSObject['boxShadow']
+        icon: {
+            color: {
+                [key in CheckboxV2CheckedState]?: {
+                    [key in Extract<
+                        SelectorV2InteractionState,
+                        'default' | 'disabled'
+                    >]?: CSSObject['color']
+                }
+            }
+            width: { [key in SelectorV2Size]: CSSObject['width'] }
+            height: { [key in SelectorV2Size]: CSSObject['height'] }
+            strokeWidth: { [key in SelectorV2Size]: CSSObject['strokeWidth'] }
+        }
+    }
+    content: {
+        gap: CSSObject['gap']
+        label: {
+            gap: CSSObject['gap']
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color']
+            }
+            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
+            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
+            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight']
+                }
+            }
+        }
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color']
+            }
+            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
+            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
+            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
+        }
+        required: {
+            color: CSSObject['color']
+        }
+    }
+}
+
+export type ResponsiveCheckboxV2Tokens = {
+    [key in keyof BreakpointType]: CheckboxV2TokensType
+}

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.types.ts

@@ -1,13 +1,10 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react'
-import { CheckboxV2TokensType } from './checkboxV2.tokens'
+import type { CheckboxV2TokensType } from './checkboxV2.tokens.types'
+import { CheckboxV2CheckedState } from './checkboxV2.tokens.types'
 import { CSSObject } from 'styled-components'
 import { SelectorV2Size } from '../../SelectorV2/selectorV2.types'
 
-export enum CheckboxV2CheckedState {
-    CHECKED = 'checked',
-    UNCHECKED = 'unchecked',
-    INDETERMINATE = 'indeterminate',
-}
+export { CheckboxV2CheckedState }
 export type CheckboxV2Props = {
     checked?: boolean | 'indeterminate'
     onCheckedChange?: (checked: boolean | 'indeterminate') => void

package/lib/components/SelectorV2/RadioV2/radioV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveRadioV2Tokens } from './radioV2.tokens'
+import type { ResponsiveRadioV2Tokens } from './radioV2.tokens.types'
 
 export const getRadioV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/RadioV2/radioV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveRadioV2Tokens } from './radioV2.tokens'
+import type { ResponsiveRadioV2Tokens } from './radioV2.tokens.types'
 
 export const getRadioV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/RadioV2/radioV2.tokens.ts

@@ -1,82 +1,14 @@
 import { Theme } from '../../../context/theme.enum'
 
-import { CSSObject } from 'styled-components'
-import { RadioV2IndicatorState } from './radioV2.types'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { getRadioV2LightTokens } from './radioV2.light.tokens'
 import { getRadioV2DarkTokens } from './radioV2.dark.tokens'
-import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types'
+import type { ResponsiveRadioV2Tokens } from './radioV2.tokens.types'
 
-export type RadioV2TokensType = {
-    gap: CSSObject['gap']
-    group: {
-        gap: CSSObject['gap']
-    }
-    radio: {
-        indicator: {
-            [key in RadioV2IndicatorState]: {
-                backgroundColor: {
-                    [key in SelectorV2InteractionState]: CSSObject['backgroundColor']
-                }
-
-                borderColor: {
-                    [key in SelectorV2InteractionState]: CSSObject['borderColor']
-                }
-            }
-        }
-        activeIndicator: {
-            active: {
-                backgroundColor: {
-                    [key in Exclude<
-                        SelectorV2InteractionState,
-                        'hover' | 'error'
-                    >]: CSSObject['backgroundColor']
-                }
-            }
-        }
-        height: {
-            [key in SelectorV2Size]: CSSObject['height']
-        }
-        borderWidth: {
-            [key in RadioV2IndicatorState]: {
-                [key in SelectorV2InteractionState]: number
-            }
-        }
-    }
-    content: {
-        gap: CSSObject['gap']
-        label: {
-            gap: CSSObject['gap']
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color']
-            }
-            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
-            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
-            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
-            slot: {
-                maxHeight: {
-                    [key in SelectorV2Size]: CSSObject['maxHeight']
-                }
-            }
-        }
-        subLabel: {
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color']
-            }
-            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
-            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
-            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
-        }
-        required: {
-            color: CSSObject['color']
-        }
-    }
-}
-
-export type ResponsiveRadioV2Tokens = {
-    [key in keyof BreakpointType]: RadioV2TokensType
-}
+export type {
+    RadioV2TokensType,
+    ResponsiveRadioV2Tokens,
+} from './radioV2.tokens.types'
 
 export const getRadioV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SelectorV2/RadioV2/radioV2.tokens.types.ts

@@ -0,0 +1,78 @@
+import { type CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../../breakpoints/breakPoints'
+import {
+    type SelectorV2Size,
+    type SelectorV2InteractionState,
+} from '../selectorV2.types'
+
+export type RadioV2IndicatorState = 'active' | 'inactive'
+
+export type RadioV2TokensType = {
+    gap: CSSObject['gap']
+    group: {
+        gap: CSSObject['gap']
+    }
+    radio: {
+        indicator: {
+            [key in RadioV2IndicatorState]: {
+                backgroundColor: {
+                    [key in SelectorV2InteractionState]: CSSObject['backgroundColor']
+                }
+
+                borderColor: {
+                    [key in SelectorV2InteractionState]: CSSObject['borderColor']
+                }
+            }
+        }
+        activeIndicator: {
+            active: {
+                backgroundColor: {
+                    [key in Exclude<
+                        SelectorV2InteractionState,
+                        'hover' | 'error'
+                    >]: CSSObject['backgroundColor']
+                }
+            }
+        }
+        height: {
+            [key in SelectorV2Size]: CSSObject['height']
+        }
+        borderWidth: {
+            [key in RadioV2IndicatorState]: {
+                [key in SelectorV2InteractionState]: number
+            }
+        }
+    }
+    content: {
+        gap: CSSObject['gap']
+        label: {
+            gap: CSSObject['gap']
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color']
+            }
+            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
+            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
+            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight']
+                }
+            }
+        }
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color']
+            }
+            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
+            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
+            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
+        }
+        required: {
+            color: CSSObject['color']
+        }
+    }
+}
+
+export type ResponsiveRadioV2Tokens = {
+    [key in keyof BreakpointType]: RadioV2TokensType
+}

package/lib/components/SelectorV2/RadioV2/radioV2.types.ts

@@ -1,9 +1,9 @@
 import type { InputHTMLAttributes, ReactElement } from 'react'
-import { RadioV2TokensType } from './radioV2.tokens'
+import { RadioV2TokensType } from './radioV2.tokens.types'
 import { CSSObject } from 'styled-components'
 import { SelectorV2Size } from '../selectorV2.types'
 
-export type RadioV2IndicatorState = 'active' | 'inactive'
+export type { RadioV2IndicatorState } from './radioV2.tokens.types'
 
 export type RadioV2ContentProps = {
     uniqueId: string

package/lib/components/SelectorV2/SwitchV2/switchV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveSwitchV2Tokens } from './switchV2.tokens'
+import type { ResponsiveSwitchV2Tokens } from './switchV2.tokens.types'
 
 export const getSwitchV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/SwitchV2/switchV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveSwitchV2Tokens } from './switchV2.tokens'
+import type { ResponsiveSwitchV2Tokens } from './switchV2.tokens.types'
 
 export const getSwitchV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SelectorV2/SwitchV2/switchV2.tokens.ts

@@ -1,72 +1,14 @@
 import { Theme } from '../../../context/theme.enum'
 
-import { CSSObject } from 'styled-components'
-import { SwitchV2Variant } from './switchV2.types'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { getSwitchV2LightTokens } from './switchV2.light.tokens'
 import { getSwitchV2DarkTokens } from './switchV2.dark.tokens'
-import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types'
+import type { ResponsiveSwitchV2Tokens } from './switchV2.tokens.types'
 
-export type SwitchV2TokensType = {
-    gap: CSSObject['gap']
-    switch: {
-        height: {
-            [key in SelectorV2Size]: CSSObject['height']
-        }
-        width: {
-            [key in SelectorV2Size]: CSSObject['width']
-        }
-        backgroundColor: {
-            [key in SwitchV2Variant]: {
-                [key in SelectorV2InteractionState]: CSSObject['backgroundColor']
-            }
-        }
-        thumb: {
-            backgroundColor: CSSObject['backgroundColor']
-            border: CSSObject['border']
-            width: {
-                [key in SelectorV2Size]: CSSObject['width']
-            }
-            height: {
-                [key in SelectorV2Size]: CSSObject['height']
-            }
-            outline: CSSObject['outline']
-        }
-    }
-    content: {
-        gap: CSSObject['gap']
-        label: {
-            gap: CSSObject['gap']
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color']
-            }
-            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
-            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
-            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
-            slot: {
-                maxHeight: {
-                    [key in SelectorV2Size]: CSSObject['maxHeight']
-                }
-            }
-        }
-        subLabel: {
-            color: {
-                [key in SelectorV2InteractionState]: CSSObject['color']
-            }
-            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
-            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
-            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
-        }
-        required: {
-            color: CSSObject['color']
-        }
-    }
-}
-
-export type ResponsiveSwitchV2Tokens = {
-    [key in keyof BreakpointType]: SwitchV2TokensType
-}
+export type {
+    SwitchV2TokensType,
+    ResponsiveSwitchV2Tokens,
+} from './switchV2.tokens.types'
 
 export const getSwitchV2Tokens = (
     foundationToken: FoundationTokenType,