@juspay/blend-design-system 0.0.33 → 0.0.34

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

@@ -0,0 +1,45 @@
+import { SwitchV2Size, SwitchV2State } from '../SwitchV2/switchV2.types';
+export type SelectorsSize = SwitchV2Size;
+export type SelectorsLabelTokensType = {
+    content: {
+        label: {
+            fontSize: Record<SelectorsSize, string | number>;
+            fontWeight: Record<SelectorsSize, string | number>;
+            lineHeight: Record<SelectorsSize, string | number>;
+            color: Record<SwitchV2State, string>;
+        };
+        required: {
+            color: string;
+        };
+    };
+};
+export type SelectorsSubLabelTokensType = {
+    content: {
+        subLabel: {
+            fontSize: Record<SelectorsSize, string | number>;
+            fontWeight: Record<SelectorsSize, string | number>;
+            lineHeight: Record<SelectorsSize, string | number>;
+            color: Record<SwitchV2State, string>;
+        };
+    };
+};
+export type SelectorsLabelProps = {
+    id?: string;
+    uniqueId: string;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    size: SelectorsSize;
+    label: string;
+    tokens: SelectorsLabelTokensType;
+    maxLength?: number;
+};
+export type SelectorsSubLabelProps = {
+    id?: string;
+    subLabel: string;
+    size: SelectorsSize;
+    disabled: boolean;
+    error: boolean;
+    tokens: SelectorsSubLabelTokensType;
+    maxLength?: number;
+};

package/dist/components/SelectorsContent/SelectorsLabel.d.ts

@@ -0,0 +1,3 @@
+import { SelectorsLabelProps } from './SelectorsContent.types';
+declare const SelectorsLabel: ({ id, uniqueId, disabled, error, required, size, label, tokens, maxLength, }: SelectorsLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SelectorsLabel;

package/dist/components/SelectorsContent/SelectorsSubLabel.d.ts

@@ -0,0 +1,6 @@
+import { SelectorsSubLabelProps } from './SelectorsContent.types';
+declare const SelectorsSubLabel: {
+    ({ id, subLabel, size, disabled, error, tokens, maxLength, }: SelectorsSubLabelProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default SelectorsSubLabel;

package/dist/components/SelectorsContent/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SelectorsContent.types';
+export * from './SelectorsLabel';
+export * from './SelectorsSubLabel';

package/dist/components/Sidebar/SidebarContent.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { DirectoryData } from '../Directory/types';
+import { SidebarMerchantInfo } from './types';
+export type SidebarContentProps = {
+    sidebarTopSlot?: React.ReactNode;
+    merchantInfo?: SidebarMerchantInfo;
+    isExpanded: boolean;
+    isScrolled: boolean;
+    sidebarCollapseKey: string;
+    onToggle: () => void;
+    sidebarNavId?: string;
+    showTopBlur: boolean;
+    showBottomBlur: boolean;
+    data: DirectoryData[];
+    idPrefix: string;
+    activeItem?: string | null;
+    onActiveItemChange?: (item: string | null) => void;
+    defaultActiveItem?: string | null;
+    iconOnlyMode?: boolean;
+    footer?: React.ReactNode;
+    setIsHovering?: (isHovering: boolean) => void;
+};
+declare const SidebarContent: React.FC<SidebarContentProps>;
+export default SidebarContent;

package/dist/components/Sidebar/SidebarFooter.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 type SidebarFooterProps = {
     footer?: React.ReactNode;
+    isExpanded: boolean;
 };
 declare const SidebarFooter: React.FC<SidebarFooterProps>;
 export default SidebarFooter;

package/dist/components/Sidebar/SidebarHeader.d.ts

@@ -9,6 +9,7 @@ type SidebarHeaderProps = {
     onToggle: () => void;
     sidebarNavId?: string;
     hideToggleButton?: boolean;
+    iconOnlyMode?: boolean;
 };
 declare const SidebarHeader: React.FC<SidebarHeaderProps>;
 export default SidebarHeader;

package/dist/components/Sidebar/TenantPanel.d.ts

@@ -8,7 +8,7 @@ type TenantPanelProps = {
     tenantSlot2?: React.ReactNode;
     tenantFooter?: React.ReactNode;
 };
-declare const TenantPanel: React.FC<TenantPanelProps>;
+declare const TenantPanel: React.ForwardRefExoticComponent<TenantPanelProps & React.RefAttributes<HTMLDivElement>>;
 declare const TenantItem: React.FC<{
     tenant: TenantItem;
     isSelected: boolean;

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

@@ -5,10 +5,6 @@ export type LeftPanelItem = {
     label: string;
     icon: ReactNode;
     value?: string;
-    /**
-     * When true, item appears in main panel. When false or undefined, item appears in overflow menu (3-dots)
-     * Defaults to false (hidden in overflow)
-     */
     showInPanel?: boolean;
 };
 export type LeftPanelInfo = {
@@ -23,10 +19,6 @@ export type TenantItem = {
     label: string;
     value?: string;
     icon: ReactNode;
-    /**
-     * When true, item appears in main panel. When false or undefined, item appears in overflow menu (3-dots)
-     * Defaults to false (hidden in overflow)
-     */
     showInPanel?: boolean;
 };
 export type SidebarMerchantInfo = {
@@ -39,6 +31,7 @@ export type SidebarMerchantInfo = {
     onSelect: (value: string) => void;
 };
 export type SidebarProps = {
+    showLeftPanel?: boolean;
     children: ReactNode;
     data: DirectoryData[];
     leftPanel?: LeftPanelInfo;
@@ -49,81 +42,17 @@ export type SidebarProps = {
     merchantInfo?: MerchantInfo;
     rightActions?: ReactNode;
     enableTopbarAutoHide?: boolean;
-    /**
-     * Controlled state: Show/hide topbar
-     * When provided, topbar operates in controlled mode - parent must handle visibility updates
-     */
     isTopbarVisible?: boolean;
-    /**
-     * Callback fired when topbar visibility should change
-     * In controlled mode: Parent should update isTopbarVisible prop based on this callback
-     * In uncontrolled mode: Optional callback for visibility change notifications
-     */
     onTopbarVisibilityChange?: (isVisible: boolean) => void;
-    /**
-     * Uncontrolled mode: Initial topbar visibility (defaults to true)
-     * Only used when isTopbarVisible is not provided
-     */
     defaultIsTopbarVisible?: boolean;
-    /**
-     * Controlled state: Current expanded state of the sidebar
-     * When provided, sidebar operates in controlled mode - parent must handle state updates
-     */
     isExpanded?: boolean;
-    /**
-     * Callback fired when sidebar expand/collapse state should change
-     * In controlled mode: Parent should update isExpanded prop based on this callback
-     * In uncontrolled mode: Optional callback for state change notifications
-     */
     onExpandedChange?: (isExpanded: boolean) => void;
-    /**
-     * Uncontrolled mode: Initial expanded state (defaults to true)
-     * Only used when isExpanded is not provided
-     */
     defaultIsExpanded?: boolean;
-    /**
-     * When true, shows only the left panel without any sidebar content
-     * In this mode:
-     * - Only left panel is visible (no directory, header, footer, toggle)
-     * - Left panel is always shown (no intermediate/hover states)
-     * - Sidebar cannot be expanded
-     * Only applies when leftPanel is provided
-     */
     panelOnlyMode?: boolean;
-    /**
-     * When true, disables the intermediate state that appears on hover
-     * When false or undefined, hovering over the collapsed sidebar will temporarily show it in an intermediate/expanded state
-     * The intermediate state allows users to see the sidebar content without fully expanding it
-     * Defaults to false (intermediate state enabled)
-     */
     disableIntermediateState?: boolean;
-    /**
-     * When true, shows only icons (52px width) with tooltips on hover
-     * In this mode:
-     * - Directory items show only their icons
-     * - Tooltips appear on hover showing the item label
-     * - Sections render as horizontal dividers
-     * - Merchant switcher moves to topbar
-     * - Intermediate/hover state expansion is disabled
-     * - Toggle button appears at the top of the icon-only panel
-     * Defaults to false
-     */
     iconOnlyMode?: boolean;
-    /**
-     * When true, clicking the toggle button in icon-only mode will completely hide the sidebar.
-     * When false, clicking the toggle button will expand to full sidebar view.
-     * Only applies when iconOnlyMode is true
-     * @default false
-     */
     hideOnIconOnlyToggle?: boolean;
-    /**
-     * Show primary action button in mobile navigation
-     */
     showPrimaryActionButton?: boolean;
-    /**
-     * Props for the primary action button in mobile navigation
-     * Extends HTML button attributes
-     */
     primaryActionButtonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
     activeItem?: string | null;
     onActiveItemChange?: (item: string | null) => void;

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

@@ -8,13 +8,7 @@ export declare const arrangeTenants: (tenants: TenantItem[], selectedLabel: stri
 };
 export declare const getSidebarWidth: (isExpanded: boolean, isHovering: boolean, hasLeftPanel: boolean, tokens: SidebarTokenType, iconOnlyMode?: boolean) => string;
 export declare const getSidebarBorder: (isExpanded: boolean, isHovering: boolean, tokens: SidebarTokenType) => string;
-export declare const getTopbarStyles: (enableAutoHide: boolean, showTopbar: boolean) => {
-    transform?: undefined;
-    transition?: undefined;
-} | {
-    transform: string;
-    transition: string;
-};
+export declare const getTopbarStyles: (enableAutoHide: boolean, showTopbar: boolean) => {};
 export declare const getDefaultMerchantInfo: () => {
     items: {
         label: string;

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, ...rest }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, singleSelectGroupPosition, ...rest }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectMenu.d.ts

@@ -16,6 +16,7 @@ type SingleSelectMenuProps = {
     side?: SelectMenuSide;
     sideOffset?: number;
     alignOffset?: number;
+    collisionBoundary?: Element | null | Array<Element | null>;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     size?: SelectMenuSize;
@@ -32,5 +33,5 @@ type SingleSelectMenuProps = {
     customValueLabel?: string;
     menuId?: string;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, allowCustomValue, customValueLabel, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, collisionBoundary, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, allowCustomValue, customValueLabel, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -113,4 +113,5 @@ export type SingleSelectProps = {
     minTriggerWidth?: number;
     allowCustomValue?: boolean;
     customValueLabel?: string;
+    singleSelectGroupPosition?: 'center' | 'left' | 'right';
 };

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

@@ -1,7 +1,5 @@
-/**
- * Utility functions for SingleSelect component accessibility
- * WCAG 4.1.2 (Name, Role, Value), 3.3.2 (Labels or Instructions), 4.1.3 (Status Messages)
- */
+import { SingleSelectTokensType } from './singleSelect.tokens';
+import { SelectMenuSize, SelectMenuVariant } from './types';
 export type AriaAttributes = {
     'aria-describedby'?: string;
     'aria-label'?: string;
@@ -15,6 +13,10 @@ export type ExtractedAriaProps = {
     'aria-labelledby'?: string;
     restProps: Record<string, unknown>;
 };
+export declare function getBorderRadius(size: SelectMenuSize, varient: SelectMenuVariant, singleSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: SingleSelectTokensType): {
+    borderRadius: string;
+    borderRight?: string;
+};
 export type AccessibilitySetupOptions = {
     name?: string;
     generatedId: string;

package/dist/components/SingleSelectGroup/SingleSelectGroup.d.ts

@@ -0,0 +1,3 @@
+import { SingleSelectGroupProps } from './SingleSelectGroupProps.types';
+declare const SingleSelectGroup: import('react').ForwardRefExoticComponent<SingleSelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SingleSelectGroup;

package/dist/components/SingleSelectGroup/SingleSelectGroupProps.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { SingleSelectProps } from '../SingleSelect/types';
+export type SingleSelectGroupProps = {
+    stacked?: boolean;
+    gap?: string | number;
+    children: ReactElement<SingleSelectProps> | ReactElement<SingleSelectProps>[];
+};

package/dist/components/SingleSelectGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as SingleSelectGroup } from './SingleSelectGroup';
+export { SingleSelectGroup };
+export type * from './SingleSelectGroupProps.types';

package/dist/components/SnackbarV2/SnackbarV2.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { SnackbarV2ToastOptions, SnackbarV2ToastProps, SnackbarV2Props } from './snackbarV2.types';
+export declare const StyledToast: React.FC<SnackbarV2ToastProps>;
+export declare const addSnackbarV2: ({ header, description, variant, slot, onClose, actionButton, duration, position, width, maxWidth, minWidth, }: SnackbarV2ToastOptions) => string | number;
+declare const SnackbarV2: React.ForwardRefExoticComponent<SnackbarV2Props & React.RefAttributes<HTMLDivElement>>;
+export default SnackbarV2;

package/dist/components/SnackbarV2/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SnackbarV2 } from './SnackbarV2';
+export { addSnackbarV2, StyledToast } from './SnackbarV2';
+export * from './snackbarV2.tokens';
+export * from './snackbarV2.types';

package/dist/components/SnackbarV2/snackbarV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveSnackbarV2Tokens } from './snackbarV2.tokens';
+export declare const getSnackbarV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveSnackbarV2Tokens;

package/dist/components/SnackbarV2/snackbarV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveSnackbarV2Tokens } from './snackbarV2.tokens';
+export declare const getSnackbarV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveSnackbarV2Tokens;

package/dist/components/SnackbarV2/snackbarV2.tokens.d.ts

@@ -0,0 +1,73 @@
+import { CSSObject } from 'styled-components';
+import { SnackbarV2Variant } from './snackbarV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export declare enum SnackbarV2PaddingDirection {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type SnackbarV2TokensType = {
+    width: CSSObject['width'];
+    maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
+    backgroundColor: CSSObject['backgroundColor'];
+    borderRadius: CSSObject['borderRadius'];
+    padding: CSSObject['padding'];
+    boxShadow: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    slot: {
+        height: CSSObject['height'];
+        width: CSSObject['width'];
+        color: {
+            [key in SnackbarV2Variant]: CSSObject['color'];
+        };
+    };
+    mainContainer: {
+        gap: CSSObject['gap'];
+        content: {
+            gap: CSSObject['gap'];
+            textContainer: {
+                gap: CSSObject['gap'];
+                header: {
+                    color: {
+                        [key in SnackbarV2Variant]: CSSObject['color'];
+                    };
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                description: {
+                    color: {
+                        [key in SnackbarV2Variant]: CSSObject['color'];
+                    };
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+            };
+            actionContainer: {
+                primaryAction: {
+                    color: {
+                        [key in SnackbarV2Variant]: CSSObject['color'];
+                    };
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+            };
+        };
+        closeButton: {
+            height: CSSObject['height'];
+            color: {
+                [key in SnackbarV2Variant]: CSSObject['color'];
+            };
+        };
+    };
+};
+export type ResponsiveSnackbarV2Tokens = {
+    [key in keyof BreakpointType]: SnackbarV2TokensType;
+};
+export declare const getSnackbarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveSnackbarV2Tokens;

package/dist/components/SnackbarV2/snackbarV2.types.d.ts

@@ -0,0 +1,56 @@
+import { default as React, ReactElement } from 'react';
+import { CSSObject } from 'styled-components';
+export declare enum SnackbarV2Variant {
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+export declare enum SnackbarV2Position {
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    TOP_CENTER = "top-center",
+    BOTTOM_CENTER = "bottom-center"
+}
+export type SnackbarV2Action = {
+    label: string;
+    onClick: () => void;
+    autoDismiss?: boolean;
+};
+export type SnackbarV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type SnackbarV2ToastOptions = {
+    header: string;
+    description?: string;
+    variant?: SnackbarV2Variant;
+    slot?: ReactElement;
+    onClose?: () => void;
+    actionButton?: SnackbarV2Action;
+    duration?: number;
+    position?: SnackbarV2Position;
+    maxWidth?: string | number;
+    width?: string | number;
+    minWidth?: string | number;
+};
+export type SnackbarV2Props = {
+    position?: SnackbarV2Position;
+    dismissOnClickAway?: boolean;
+    maxWidth?: string | number;
+};
+export type SnackbarV2ToastProps = {
+    header: string;
+    description?: string;
+    variant: SnackbarV2Variant;
+    slot?: ReactElement;
+    onClose?: () => void;
+    actionButton?: SnackbarV2Action;
+    toastId?: string | number;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'slot' | 'className' | 'style'> & SnackbarV2Dimensions;
+export type SnackbarV2IconProps = {
+    variant: SnackbarV2Variant;
+};

package/dist/components/Switch/switch.token.d.ts

@@ -31,7 +31,6 @@ export type SwitchTokensType = {
             };
         };
         thumb: {
-            marginTop: CSSObject['marginTop'];
             backgroundColor: CSSObject['backgroundColor'];
             border: {
                 color: CSSObject['borderColor'];

package/dist/components/SwitchV2/SwitchV2.d.ts

@@ -0,0 +1,19 @@
+import { SwitchV2Size } from './switchV2.types';
+declare const SwitchV2: import('react').ForwardRefExoticComponent<{
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SwitchV2Size;
+    slot?: {
+        slot: import('react').ReactElement;
+        maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className" | "slot" | "onChange"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default SwitchV2;

package/dist/components/SwitchV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SwitchV2 } from './SwitchV2';
+export * from './switchV2.types';
+export * from './switchV2.tokens';

package/dist/components/SwitchV2/switchV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveSwitchV2Tokens } from './switchV2.tokens';
+export declare const getSwitchV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveSwitchV2Tokens;

package/dist/components/SwitchV2/switchV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveSwitchV2Tokens } from './switchV2.tokens';
+export declare const getSwitchV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveSwitchV2Tokens;

package/dist/components/SwitchV2/switchV2.tokens.d.ts

@@ -0,0 +1,76 @@
+import { Theme } from '../../context/theme.enum';
+import { CSSObject } from 'styled-components';
+import { SwitchV2Size, SwitchV2State, SwitchV2Variant } from './switchV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type SwitchV2TokensType = {
+    gap: CSSObject['gap'];
+    switch: {
+        height: {
+            [key in SwitchV2Size]: CSSObject['height'];
+        };
+        width: {
+            [key in SwitchV2Size]: CSSObject['width'];
+        };
+        backgroundColor: {
+            [key in SwitchV2Variant]: {
+                [key in SwitchV2State]: CSSObject['backgroundColor'];
+            };
+        };
+        thumb: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            width: {
+                [key in SwitchV2Size]: CSSObject['width'];
+            };
+            height: {
+                [key in SwitchV2Size]: CSSObject['height'];
+            };
+            outline: CSSObject['outline'];
+        };
+    };
+    content: {
+        gap: CSSObject['gap'];
+        label: {
+            gap: CSSObject['gap'];
+            color: {
+                [key in SwitchV2State]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SwitchV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SwitchV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SwitchV2Size]: CSSObject['lineHeight'];
+            };
+            slot: {
+                maxHeight: {
+                    [key in SwitchV2Size]: CSSObject['maxHeight'];
+                };
+            };
+        };
+        subLabel: {
+            color: {
+                [key in SwitchV2State]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SwitchV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SwitchV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SwitchV2Size]: CSSObject['lineHeight'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveSwitchV2Tokens = {
+    [key in keyof BreakpointType]: SwitchV2TokensType;
+};
+export declare const getSwitchV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveSwitchV2Tokens;

package/dist/components/SwitchV2/switchV2.types.d.ts

@@ -0,0 +1,53 @@
+import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { SwitchV2TokensType } from './switchV2.tokens';
+import { CSSObject } from 'styled-components';
+export declare enum SwitchV2Size {
+    SM = "sm",
+    MD = "md"
+}
+export type SwitchV2State = 'default' | 'hover' | 'disabled' | 'error';
+export type SwitchV2Variant = 'checked' | 'unchecked';
+export type SwitchV2ButtonProps = {
+    id: string;
+    checked?: boolean;
+    disabled: boolean;
+    size: SwitchV2Size;
+    tokens: SwitchV2TokensType;
+    onToggle: () => void;
+    buttonProps?: Record<string, unknown>;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+export type SwitchV2ContentProps = {
+    uniqueId: string;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    size: SwitchV2Size;
+    label?: string;
+    subLabel?: string;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    tokens: SwitchV2TokensType;
+    labelMaxLength?: number;
+    subLabelMaxLength?: number;
+    subLabelId?: string;
+};
+export type SwitchV2Props = {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SwitchV2Size;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'slot' | 'onChange'>;

package/dist/components/Tabs/Tabs.d.ts

@@ -15,5 +15,6 @@ declare const Tabs: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react
     showSkeleton?: boolean;
     skeletonVariant?: import('../Skeleton').SkeletonVariant;
     stickyHeader?: boolean;
+    offsetTop?: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;