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

package/dist/components/PopoverV2/popoverV2.tokens.types.d.ts

@@ -0,0 +1,70 @@
+import { CSSObject } from 'styled-components';
+import { PopoverV2Size } from './popoverV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type PopoverV2TokenType = {
+    background: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    shadow: FoundationTokenType['shadows'];
+    gap: {
+        [key in PopoverV2Size]: CSSObject['gap'];
+    };
+    zIndex: CSSObject['zIndex'];
+    borderRadius: {
+        [key in PopoverV2Size]: CSSObject['borderRadius'];
+    };
+    padding: {
+        left: {
+            [key in PopoverV2Size]: CSSObject['paddingLeft'];
+        };
+        right: {
+            [key in PopoverV2Size]: CSSObject['paddingRight'];
+        };
+        top: {
+            [key in PopoverV2Size]: CSSObject['paddingTop'];
+        };
+        bottom: {
+            [key in PopoverV2Size]: CSSObject['paddingBottom'];
+        };
+    };
+    TopContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap'];
+        };
+        heading: {
+            color: CSSObject['color'];
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight'];
+            };
+            IconSize: {
+                [key in PopoverV2Size]: CSSObject['size'];
+            };
+        };
+        description: {
+            color: CSSObject['color'];
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight'];
+            };
+        };
+    };
+    bottomContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap'];
+        };
+    };
+};
+export type ResponsivePopoverV2Tokens = {
+    [key in keyof BreakpointType]: PopoverV2TokenType;
+};

package/dist/components/PopoverV2/popoverV2.types.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps } from '../Button';
-import { SkeletonVariant } from '../Skeleton';
+import { ButtonProps } from '../Button/types';
+import { SkeletonVariant } from '../Skeleton/types';
 export type PopoverV2ActionType = Omit<ButtonProps, 'buttonGroupPosition' | 'subType'>;
 export declare enum PopoverV2Size {
     SM = "sm",

package/dist/components/ProgressBarV2/progressBarV2.dark.tokens.d.ts

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

package/dist/components/ProgressBarV2/progressBarV2.light.tokens.d.ts

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

package/dist/components/ProgressBarV2/progressBarV2.tokens.d.ts

@@ -1,63 +1,5 @@
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { Theme } from '../../context/theme.enum';
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ProgressBarV2Appearance, ProgressBarV2Size } from './progressBarV2.types';
-import { CSSObject } from 'styled-components';
-export type ProgressBarV2TokenType = {
-    linear: {
-        height: {
-            [key in ProgressBarV2Size]: CSSObject['height'];
-        };
-        fill: {
-            backgroundColor: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
-            };
-            borderRadius: {
-                [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
-            };
-        };
-        empty: {
-            backgroundColor: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
-            };
-            backgroundImage: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage'];
-            };
-            backgroundSize: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize'];
-            };
-        };
-        borderRadius: {
-            [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
-        };
-        gap: CSSObject['gap'];
-    };
-    circular: {
-        size: {
-            [key in ProgressBarV2Size]: CSSObject['width'];
-        };
-        strokeWidth: {
-            [key in ProgressBarV2Size]: number;
-        };
-        stroke: {
-            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
-        };
-        background: {
-            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
-        };
-        dashArray: {
-            [key in ProgressBarV2Appearance]: string;
-        };
-        motion: string;
-    };
-    label: {
-        fontSize: CSSObject['fontSize'];
-        fontWeight: CSSObject['fontWeight'];
-        color: CSSObject['color'];
-    };
-    transition: string;
-};
-export type ResponsiveProgressBarV2Tokens = {
-    [key in keyof BreakpointType]: ProgressBarV2TokenType;
-};
+import { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens.types';
+export type { ProgressBarV2TokenType, ResponsiveProgressBarV2Tokens, } from './progressBarV2.tokens.types';
 export declare const getProgressBarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveProgressBarV2Tokens;

package/dist/components/ProgressBarV2/progressBarV2.tokens.types.d.ts

@@ -0,0 +1,76 @@
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { CSSObject } from 'styled-components';
+export declare enum ProgressBarV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+/** Bar geometry: horizontal track vs circular ring. */
+export declare enum ProgressBarV2Variant {
+    LINEAR = "linear",
+    CIRCULAR = "circular"
+}
+/**
+ * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
+ */
+export declare enum ProgressBarV2Appearance {
+    SOLID = "solid",
+    SEGMENTED = "segmented"
+}
+export type ProgressBarV2TokenType = {
+    linear: {
+        height: {
+            [key in ProgressBarV2Size]: CSSObject['height'];
+        };
+        fill: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
+            };
+            borderRadius: {
+                [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
+            };
+        };
+        empty: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
+            };
+            backgroundImage: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage'];
+            };
+            backgroundSize: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize'];
+            };
+        };
+        borderRadius: {
+            [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
+        };
+        gap: CSSObject['gap'];
+    };
+    circular: {
+        size: {
+            [key in ProgressBarV2Size]: CSSObject['width'];
+        };
+        strokeWidth: {
+            [key in ProgressBarV2Size]: number;
+        };
+        stroke: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
+        };
+        background: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
+        };
+        dashArray: {
+            [key in ProgressBarV2Appearance]: string;
+        };
+        motion: string;
+    };
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    transition: string;
+};
+export type ResponsiveProgressBarV2Tokens = {
+    [key in keyof BreakpointType]: ProgressBarV2TokenType;
+};

package/dist/components/ProgressBarV2/progressBarV2.types.d.ts

@@ -1,22 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { ProgressBarV2TokenType } from './progressBarV2.tokens';
-export declare enum ProgressBarV2Size {
-    SM = "sm",
-    MD = "md",
-    LG = "lg"
-}
-/** Bar geometry: horizontal track vs circular ring. */
-export declare enum ProgressBarV2Variant {
-    LINEAR = "linear",
-    CIRCULAR = "circular"
-}
-/**
- * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
- */
-export declare enum ProgressBarV2Appearance {
-    SOLID = "solid",
-    SEGMENTED = "segmented"
-}
+import { ProgressBarV2Size, ProgressBarV2Variant, ProgressBarV2Appearance, ProgressBarV2TokenType } from './progressBarV2.tokens.types';
+export { ProgressBarV2Size, ProgressBarV2Variant, ProgressBarV2Appearance, } from './progressBarV2.tokens.types';
 export type ProgressBarV2Props = {
     value: number;
     size?: ProgressBarV2Size;

package/dist/components/SelectV2/selectV2.shared.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, ReactElement, CSSProperties, KeyboardEvent, RefObject } from 'react';
 import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
-import { SkeletonVariant } from '../Skeleton';
+import { SkeletonVariant } from '../Skeleton/types';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectV2Alignment {
     START = "start",

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.dark.tokens.d.ts

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

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.light.tokens.d.ts

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

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.tokens.d.ts

@@ -1,94 +1,5 @@
 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';
-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;
-};
+import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens.types';
+export type { CheckboxV2TokensType, ResponsiveCheckboxV2Tokens, } from './checkboxV2.tokens.types';
 export declare const getCheckboxV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveCheckboxV2Tokens;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.tokens.types.d.ts

@@ -0,0 +1,95 @@
+import { CSSObject } from 'styled-components';
+import { SelectorV2Size, SelectorV2InteractionState } from '../../SelectorV2/selectorV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+export declare 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/dist/components/SelectorV2/CheckboxV2/checkboxV2.types.d.ts

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

package/dist/components/SelectorV2/RadioV2/radioV2.dark.tokens.d.ts

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

package/dist/components/SelectorV2/RadioV2/radioV2.light.tokens.d.ts

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

package/dist/components/SelectorV2/RadioV2/radioV2.tokens.d.ts

@@ -1,83 +1,5 @@
 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 { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.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;
-};
+import { ResponsiveRadioV2Tokens } from './radioV2.tokens.types';
+export type { RadioV2TokensType, ResponsiveRadioV2Tokens, } from './radioV2.tokens.types';
 export declare const getRadioV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveRadioV2Tokens;

package/dist/components/SelectorV2/RadioV2/radioV2.tokens.types.d.ts

@@ -0,0 +1,80 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { SelectorV2Size, 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;
+};