@juspay/blend-design-system 0.0.33 → 0.0.34-beta

package/dist/components/AlertV2/AlertV2.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ReactElement } from 'react';
+import { AlertV2Type, AlertV2SubType, AlertV2Actions } from './alertV2.types';
+import { CSSObject } from 'styled-components';
+declare const AlertV2: React.ForwardRefExoticComponent<{
+    type?: AlertV2Type;
+    subType?: AlertV2SubType;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject["maxHeight"];
+    };
+    heading?: string;
+    description?: string;
+    actions?: AlertV2Actions;
+    closeButton?: {
+        show?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className" | "slot"> & import('./alertV2.types').AlertV2Dimensions & React.RefAttributes<HTMLDivElement>>;
+export default AlertV2;

package/dist/components/AlertV2/alertV2.dark.tokens.d.ts

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

package/dist/components/AlertV2/alertV2.light.tokens.d.ts

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

package/dist/components/AlertV2/alertV2.tokens.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components';
+import { AlertV2Type, AlertV2SubType, AlertV2ActionPosition, AlertV2PaddingDirection } from './alertV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type AlertV2TokensType = {
+    width: CSSObject['width'];
+    maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
+    border: {
+        [key in AlertV2Type]: {
+            [key in AlertV2SubType]: CSSObject['color'];
+        };
+    };
+    borderRadius: CSSObject['borderRadius'];
+    backgroundColor: {
+        [key in AlertV2Type]: {
+            [key in AlertV2SubType]: CSSObject['color'];
+        };
+    };
+    padding: {
+        [key in AlertV2PaddingDirection]: CSSObject['padding'];
+    };
+    gap: {
+        [key in AlertV2ActionPosition]: CSSObject['gap'];
+    };
+    slot: {
+        maxHeight: CSSObject['maxHeight'];
+    };
+    mainContainer: {
+        gap: CSSObject['gap'];
+        content: {
+            gap: {
+                [key in AlertV2ActionPosition]: CSSObject['gap'];
+            };
+            textContainer: {
+                gap: CSSObject['gap'];
+                heading: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                description: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+            };
+            actionContainer: {
+                gap: CSSObject['gap'];
+                primaryAction: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                secondaryAction: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+            };
+        };
+        closeButton: {
+            color: {
+                [key in AlertV2Type]: CSSObject['color'];
+            };
+            height: CSSObject['height'];
+            width: CSSObject['width'];
+        };
+    };
+};
+export type ResponsiveAlertV2Tokens = {
+    [key in keyof BreakpointType]: AlertV2TokensType;
+};
+export declare const getAlertV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveAlertV2Tokens;

package/dist/components/AlertV2/alertV2.types.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { CSSObject } from 'styled-components';
+export declare enum AlertV2PaddingDirection {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum AlertV2Type {
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    PURPLE = "purple",
+    ORANGE = "orange",
+    NEUTRAL = "neutral"
+}
+export declare enum AlertV2SubType {
+    SUBTLE = "subtle",
+    NO_FILL = "noFill"
+}
+export declare enum AlertV2ActionPosition {
+    BOTTOM = "bottom",
+    RIGHT = "right"
+}
+export type AlertV2Action = {
+    text: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export type AlertV2Actions = {
+    position?: AlertV2ActionPosition;
+    primaryAction?: AlertV2Action;
+    secondaryAction?: AlertV2Action;
+};
+export type AlertV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type AlertV2Props = {
+    type?: AlertV2Type;
+    subType?: AlertV2SubType;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    heading?: string;
+    description?: string;
+    actions?: AlertV2Actions;
+    closeButton?: {
+        show?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'slot' | 'className' | 'style'> & AlertV2Dimensions;

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

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

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

@@ -0,0 +1,46 @@
+import { MouseEvent } from 'react';
+import { ButtonV2Size, ButtonV2State, ButtonV2SubType, ButtonV2Type } from './buttonV2.types';
+import { ButtonV2TokensType } from './buttonV2.tokens';
+export declare function getBorderRadius(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, buttonGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: ButtonV2TokensType): string;
+export declare function createButtonClickHandler(onClick?: (event?: MouseEvent<HTMLButtonElement>) => void, isSkeleton?: boolean, isDisabled?: boolean, isLoading?: boolean): (event: MouseEvent<HTMLButtonElement>) => void;
+export declare function getButtonHeight(subType: ButtonV2SubType): string | undefined;
+export declare function getIconMaxHeight(subType: ButtonV2SubType, leftSlotMaxHeight: string | number | undefined, rightSlotMaxHeight: string | number | undefined, size: ButtonV2Size): string;
+export declare function getButtonStatus(isLoading: boolean | undefined, isDisabled: boolean | undefined): 'loading' | 'disabled' | 'enabled';
+export declare function getButtonTabIndex(isDisabled: boolean, providedTabIndex?: number): number;
+export declare function getSkeletonBorderRadius(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, buttonGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: ButtonV2TokensType): string;
+export declare function getSkeletonWidth(width?: string | number): string;
+export declare function getButtonBorderStyles(buttonGroupPosition: 'center' | 'left' | 'right' | undefined, defaultBorder: string | undefined): {
+    border?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+};
+/** Return type for getButtonStyles (explicit to avoid csstype reference in .d.ts) */
+export type ButtonStylesReturn = {
+    background?: string;
+    color?: string;
+    border?: string;
+    borderTop?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRight?: string;
+    cursor?: string;
+    _active?: Record<string, string | number | undefined>;
+    _hover?: Record<string, string | number | undefined>;
+    _focusVisible?: Record<string, string | number | undefined>;
+    _disabled?: Record<string, string | number | undefined>;
+};
+/**
+ * Get all button styles in one call for better performance
+ */
+export declare function getButtonStyles(isSkeleton: boolean, isDisabled: boolean, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType, buttonGroupPosition?: 'center' | 'left' | 'right'): ButtonStylesReturn;
+export declare function getIconColor(isSkeleton: boolean, disabled: boolean | undefined, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType): string;
+export declare function getTextColor(isSkeleton: boolean, disabled: boolean | undefined, state: ButtonV2State, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType): string;
+export declare function getButtonPadding(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType): {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+};
+export declare function getButtonLineHeight(size: ButtonV2Size, tokens: ButtonV2TokensType): string;

package/dist/components/Drawer/components/DrawerBase.d.ts

@@ -16,6 +16,7 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerConten
     contentDriven?: boolean;
     width?: string | number;
     maxWidth?: string | number;
+    offSet?: string | number;
     mobileOffset?: {
         top?: string;
         bottom?: string;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, multiSelectGroupPosition, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -126,6 +126,7 @@ export type MultiSelectProps = {
     customValueLabel?: string;
     showClearButton?: boolean;
     onClearAllClick?: () => void;
+    multiSelectGroupPosition?: 'center' | 'left' | 'right';
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];

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

@@ -1,8 +1,14 @@
-import { MultiSelectMenuGroupType, MultiSelectMenuItemType } from './types';
+import { MultiSelectTokensType } from './multiSelect.tokens';
+import { MultiSelectMenuSize, MultiSelectVariant, MultiSelectMenuGroupType, MultiSelectMenuItemType } from './types';
 export declare const getSelectAllState: (selected: string[], availableValues: string[]) => {
     allSelected: boolean;
     someSelected: boolean;
 };
+export declare function getMultiSelectBorderRadius(size: MultiSelectMenuSize, varient: MultiSelectVariant, multiSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: MultiSelectTokensType, shouldShowClearButton: boolean): string;
+export declare function getMultiSelectCrossBorderRadius(size: MultiSelectMenuSize, varient: MultiSelectVariant, multiSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: MultiSelectTokensType): {
+    borderRadius: string;
+    borderRight?: string;
+};
 export declare const map: (groups: MultiSelectMenuGroupType[]) => Record<string, string>;
 export declare const getAllValues: (groups: MultiSelectMenuGroupType[]) => string[];
 export declare const handleSelectAll: (selectAll: boolean, items: MultiSelectMenuGroupType[], selectedValues: string[], onChange: (value: string) => void) => void;

package/dist/components/MultiSelectGroup/MultiSelectGroup.d.ts

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

package/dist/components/MultiSelectGroup/MultiselectGroupProps.types.d.ts

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

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

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

package/dist/components/Primitives/Block/Block.d.ts

@@ -78,7 +78,6 @@ type StyledBlockProps = StateStyles & {
     overflowX?: CSSObject['overflowX'];
     overflowY?: CSSObject['overflowY'];
     whiteSpace?: CSSObject['whiteSpace'];
-    transition?: CSSObject['transition'];
     contentCentered?: boolean;
     cursor?: CSSObject['cursor'];
     fontSize?: CSSObject['fontSize'];
@@ -89,8 +88,16 @@ type StyledBlockProps = StateStyles & {
     textTransform?: CSSObject['textTransform'];
     textOverflow?: CSSObject['textOverflow'];
     userSelect?: CSSObject['userSelect'];
+    transform?: CSSObject['transform'];
+    willChange?: CSSObject['willChange'];
+    transformOrigin?: CSSObject['transformOrigin'];
+    backfaceVisibility?: CSSObject['backfaceVisibility'];
+    transition?: CSSObject['transition'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
 };
-type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr'>;
+type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr' | 'label'>;
 export type BlockProps = StyledBlockProps & Omit<React.HTMLAttributes<HTMLElement>, 'as' | 'color'> & {
     children?: React.ReactNode;
     as?: SemanticTagType;
@@ -173,7 +180,6 @@ declare const Block: React.ForwardRefExoticComponent<StateStyles & {
     overflowX?: CSSObject["overflowX"];
     overflowY?: CSSObject["overflowY"];
     whiteSpace?: CSSObject["whiteSpace"];
-    transition?: CSSObject["transition"];
     contentCentered?: boolean;
     cursor?: CSSObject["cursor"];
     fontSize?: CSSObject["fontSize"];
@@ -184,6 +190,14 @@ declare const Block: React.ForwardRefExoticComponent<StateStyles & {
     textTransform?: CSSObject["textTransform"];
     textOverflow?: CSSObject["textOverflow"];
     userSelect?: CSSObject["userSelect"];
+    transform?: CSSObject["transform"];
+    willChange?: CSSObject["willChange"];
+    transformOrigin?: CSSObject["transformOrigin"];
+    backfaceVisibility?: CSSObject["backfaceVisibility"];
+    transition?: CSSObject["transition"];
+    transitionDuration?: CSSObject["transitionDuration"];
+    transitionTimingFunction?: CSSObject["transitionTimingFunction"];
+    transitionDelay?: CSSObject["transitionDelay"];
 } & Omit<React.HTMLAttributes<HTMLElement>, "color" | "as"> & {
     children?: React.ReactNode;
     as?: SemanticTagType;

package/dist/components/Primitives/PrimitiveButton/PrimitiveButton.d.ts

@@ -32,6 +32,7 @@ type PrimitiveButtonProps = StateStyles & {
     maxWidth?: CSSObject['maxWidth'];
     minHeight?: CSSObject['minHeight'];
     maxHeight?: CSSObject['maxHeight'];
+    opacity?: CSSObject['opacity'];
     flexGrow?: CSSObject['flexGrow'];
     flexShrink?: CSSObject['flexShrink'];
     flexBasis?: CSSObject['flexBasis'];
@@ -62,15 +63,22 @@ type PrimitiveButtonProps = StateStyles & {
     outlineStyle?: CSSObject['outlineStyle'];
     outlineWidth?: CSSObject['outlineWidth'];
     outlineColor?: CSSObject['outlineColor'];
-    transform?: CSSObject['transform'];
-    transition?: CSSObject['transition'];
     disabled?: boolean;
     fontWeight?: CSSObject['fontWeight'];
+    lineHeight?: CSSObject['lineHeight'];
     fontSize?: CSSObject['fontSize'];
     fontFamily?: CSSObject['fontFamily'];
     textDecoration?: CSSObject['textDecoration'];
     textUnderlineOffset?: CSSObject['textUnderlineOffset'];
     textTransform?: CSSObject['textTransform'];
+    willChange?: CSSObject['willChange'];
+    transformOrigin?: CSSObject['transformOrigin'];
+    backfaceVisibility?: CSSObject['backfaceVisibility'];
+    transform?: CSSObject['transform'];
+    transition?: CSSObject['transition'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
 };
 export type ButtonProps = PrimitiveButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
     children?: React.ReactNode;
@@ -98,6 +106,7 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     maxWidth?: CSSObject["maxWidth"];
     minHeight?: CSSObject["minHeight"];
     maxHeight?: CSSObject["maxHeight"];
+    opacity?: CSSObject["opacity"];
     flexGrow?: CSSObject["flexGrow"];
     flexShrink?: CSSObject["flexShrink"];
     flexBasis?: CSSObject["flexBasis"];
@@ -128,15 +137,22 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     outlineStyle?: CSSObject["outlineStyle"];
     outlineWidth?: CSSObject["outlineWidth"];
     outlineColor?: CSSObject["outlineColor"];
-    transform?: CSSObject["transform"];
-    transition?: CSSObject["transition"];
     disabled?: boolean;
     fontWeight?: CSSObject["fontWeight"];
+    lineHeight?: CSSObject["lineHeight"];
     fontSize?: CSSObject["fontSize"];
     fontFamily?: CSSObject["fontFamily"];
     textDecoration?: CSSObject["textDecoration"];
     textUnderlineOffset?: CSSObject["textUnderlineOffset"];
     textTransform?: CSSObject["textTransform"];
+    willChange?: CSSObject["willChange"];
+    transformOrigin?: CSSObject["transformOrigin"];
+    backfaceVisibility?: CSSObject["backfaceVisibility"];
+    transform?: CSSObject["transform"];
+    transition?: CSSObject["transition"];
+    transitionDuration?: CSSObject["transitionDuration"];
+    transitionTimingFunction?: CSSObject["transitionTimingFunction"];
+    transitionDelay?: CSSObject["transitionDelay"];
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;

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;