@juspay/blend-design-system 0.0.15-beta → 0.0.16-beta

package/dist/components/Card/Card.d.ts

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

package/dist/components/Card/CardComponents.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { CardVariant, CardProps } from './types';
+import { CardTokenType } from './card.tokens';
+type CardComponentProps = {
+    props: Extract<CardProps, {
+        variant?: CardVariant.DEFAULT;
+    }>;
+    cardToken: CardTokenType;
+};
+type AlignedCardComponentProps = {
+    props: Extract<CardProps, {
+        variant: CardVariant.ALIGNED;
+    }>;
+    cardToken: CardTokenType;
+};
+type CustomCardComponentProps = {
+    props: Extract<CardProps, {
+        variant: CardVariant.CUSTOM;
+    }>;
+    cardToken: CardTokenType;
+};
+export declare const DefaultCard: React.FC<CardComponentProps>;
+export declare const AlignedCard: React.FC<AlignedCardComponentProps>;
+export declare const CustomCard: React.FC<CustomCardComponentProps>;
+export {};

package/dist/components/Card/card.tokens.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components';
+import { CardAlignment } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type CardState = 'default' | 'hover';
+export type CardTokenType = {
+    maxWidth: CSSObject['maxWidth'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    padding: CSSObject['padding'];
+    border: CSSObject['border'];
+    backgroundColor: CSSObject['backgroundColor'];
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        padding: CSSObject['padding'];
+        borderBottom: CSSObject['borderBottom'];
+        borderRadius: CSSObject['borderRadius'];
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        tag: {
+            gap: CSSObject['gap'];
+        };
+        subHeader: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        padding: CSSObject['padding'];
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        content: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+        };
+    };
+    spacing: {
+        header: {
+            subHeader: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        body: {
+            slot1: {
+                marginTop: CSSObject['marginTop'];
+            };
+            title: {
+                marginTop: CSSObject['marginTop'];
+            };
+            content: {
+                marginTop: CSSObject['marginTop'];
+            };
+            slot2: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        action: {
+            inline: {
+                marginTop: CSSObject['marginTop'];
+            };
+            regular: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        headerSlot: {
+            gap: CSSObject['gap'];
+        };
+    };
+    alignment: {
+        [key in CardAlignment]: {
+            padding: CSSObject['padding'];
+            gap: CSSObject['gap'];
+            minHeight?: CSSObject['minHeight'];
+        };
+    };
+};
+export type ResponsiveCardTokens = {
+    [key in keyof BreakpointType]: CardTokenType;
+};
+export declare const getCardTokens: (foundationToken: FoundationTokenType) => ResponsiveCardTokens;

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

@@ -0,0 +1,2 @@
+export { default as Card } from './Card';
+export * from './types';

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ButtonV2Props } from '../Button/types';
+export declare enum CardVariant {
+    DEFAULT = "default",
+    ALIGNED = "aligned",
+    CUSTOM = "custom"
+}
+export declare enum CardAlignment {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export type DefaultCardProps = {
+    variant?: CardVariant.DEFAULT;
+    headerSlot1?: ReactNode;
+    headerTitle?: string;
+    headerTag?: ReactNode;
+    headerSlot2?: ReactNode;
+    subHeader?: string;
+    bodySlot1?: ReactNode;
+    bodyTitle?: string;
+    content?: ReactNode;
+    bodySlot2?: ReactNode;
+    actionButton?: ButtonV2Props;
+};
+export type AlignedCardProps = {
+    variant: CardVariant.ALIGNED;
+    alignment: CardAlignment;
+    centerAlign?: boolean;
+    cardSlot?: ReactNode;
+    headerTitle?: string;
+    headerTag?: ReactNode;
+    headerSlot2?: ReactNode;
+    subHeader?: string;
+    bodySlot1?: ReactNode;
+    bodyTitle?: string;
+    content?: ReactNode;
+    actionButton?: ButtonV2Props;
+};
+export type CustomCardProps = {
+    variant: CardVariant.CUSTOM;
+    children: ReactNode;
+};
+export type CardProps = {
+    className?: string;
+    maxWidth?: string;
+} & (DefaultCardProps | AlignedCardProps | CustomCardProps);

package/dist/components/Charts/ChartUtils.d.ts

@@ -1,8 +1,9 @@
-import { NewNestedDataPoint, FlattenedDataPoint, AxisType } from './types';
+import { NewNestedDataPoint, FlattenedDataPoint, AxisType, XAxisConfig } from './types';
 export declare function transformNestedData(data: NewNestedDataPoint[], selectedKeys?: string[]): FlattenedDataPoint[];
 export declare function lightenHexColor(hex: string, amount?: number): string;
 export declare const formatNumber: (value: number | string) => string;
 export declare const capitaliseCamelCase: (text: string) => string;
 export declare const createSmartDateTimeFormatter: (timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
 export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
+export declare const createStableSmartFormatter: (xAxisConfig: XAxisConfig, flattenedData: FlattenedDataPoint[]) => ((value: string | number) => string) | undefined;
 export declare const getAxisFormatter: (axisType: AxisType, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);

package/dist/components/Charts/chart.tokens.d.ts

@@ -39,12 +39,7 @@ export type ChartTokensType = {
         minHeight: CSSObject['minHeight'];
     };
     content: {
-        padding: {
-            [key in ChartSize]: CSSObject['padding'];
-        };
-        paddingX: {
-            [key in ChartSize]: CSSObject['padding'];
-        };
+        padding: CSSObject['padding'];
         gap: {
             [key in ChartSize]: CSSObject['gap'];
         };

package/dist/components/Charts/renderChart.d.ts

@@ -1,2 +1,2 @@
 import { RenderChartProps } from './types';
-export declare const renderChart: ({ flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderChart: ({ flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, noData, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { TooltipProps } from 'recharts';
 import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+import { ButtonV2Props } from '../Button';
 export type DataPoint = {
     primary: {
         label: string;
@@ -9,6 +10,11 @@ export type DataPoint = {
     aux?: {
         label: string;
         val: number;
+        type?: AxisType;
+        dateOnly?: boolean;
+        smart?: boolean;
+        timeZone?: string;
+        hour12?: boolean;
     }[];
 };
 export declare enum ChartLegendPosition {
@@ -45,6 +51,12 @@ export type TickProps = {
     };
     [key: string]: unknown;
 };
+export type NoDataProps = {
+    title?: string;
+    subtitle?: string;
+    slot?: ReactNode;
+    button?: ButtonV2Props;
+};
 export type AxisConfig = {
     label?: string;
     showLabel?: boolean;
@@ -84,6 +96,7 @@ export type RenderChartProps = {
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    noData?: NoDataProps;
 };
 export type CoreChartProps = {
     chartType?: ChartType;
@@ -114,6 +127,7 @@ export type ChartsProps = {
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    noData?: NoDataProps;
 };
 export type FlattenedDataPoint = {
     name: string;

package/dist/components/Checkbox/checkbox.token.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { ThemeType } from '../../tokens';
-import { CheckboxCheckedState, CheckboxInteractionState, CheckboxSize } from './types';
+import { CheckboxSize, CheckboxInteractionState } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type CheckboxTokensType = {
     gap: CSSObject['gap'];
@@ -14,7 +14,13 @@ export type CheckboxTokensType = {
             };
         };
         background: {
-            [key in CheckboxCheckedState]?: {
+            checked?: {
+                [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
+            };
+            unchecked?: {
+                [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
+            };
+            indeterminate?: {
                 [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
             };
         };
@@ -22,7 +28,13 @@ export type CheckboxTokensType = {
             radius: CSSObject['borderRadius'];
             width: CSSObject['borderWidth'];
             color: {
-                [key in CheckboxCheckedState]?: {
+                checked?: {
+                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
+                };
+                unchecked?: {
+                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
+                };
+                indeterminate?: {
                     [key in CheckboxInteractionState]?: CSSObject['borderColor'];
                 };
             };
@@ -36,7 +48,10 @@ export type CheckboxTokensType = {
     };
     icon: {
         color: {
-            [key in Exclude<CheckboxCheckedState, 'unchecked'>]?: {
+            checked?: {
+                [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
+            };
+            indeterminate?: {
                 [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
             };
         };

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

@@ -3,8 +3,17 @@ export declare enum CheckboxSize {
     SMALL = "sm",
     MEDIUM = "md"
 }
-export type CheckboxCheckedState = 'checked' | 'unchecked' | 'indeterminate';
-export type CheckboxInteractionState = 'default' | 'hover' | 'disabled' | 'error';
+export declare enum CheckboxCheckedState {
+    CHECKED = "checked",
+    UNCHECKED = "unchecked",
+    INDETERMINATE = "indeterminate"
+}
+export declare enum CheckboxInteractionState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    DISABLED = "disabled",
+    ERROR = "error"
+}
 export type CheckboxProps = {
     id?: string;
     value?: string;

package/dist/components/DataTable/ColumnManager.d.ts

@@ -1,5 +1,5 @@
 import { ColumnManagerProps } from './types';
 export declare const ColumnManager: {
-    <T extends Record<string, unknown>>({ columns, visibleColumns, onColumnChange, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends Record<string, unknown>>({ columns, visibleColumns, onColumnChange, maxSelections, alwaysSelectedColumns, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/DataTable/TableHeader/FilterComponents.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ColumnDefinition } from '../types';
 import { TableTokenType } from '../dataTable.tokens';
-import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler } from './handlers';
+import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler, SortState } from './handlers';
 type FilterComponentsProps = {
     column: ColumnDefinition<Record<string, unknown>>;
     data?: Record<string, unknown>[];
@@ -9,6 +9,7 @@ type FilterComponentsProps = {
     sortHandlers: SortHandlers;
     filterHandlers: FilterHandlers;
     filterState: FilterState;
+    sortState: SortState;
     onColumnFilter?: ColumnFilterHandler;
     onPopoverClose?: () => void;
 };
@@ -16,6 +17,7 @@ export declare const SortOptions: React.FC<{
     fieldKey: string;
     tableToken: TableTokenType;
     sortHandlers: SortHandlers;
+    sortState: SortState;
 }>;
 export declare const DropdownSearchSection: React.FC<{
     column: ColumnDefinition<Record<string, unknown>>;

package/dist/components/DataTable/TableHeader/MobileFilterDrawer.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ColumnDefinition } from '../types';
 import { TableTokenType } from '../dataTable.tokens';
-import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler } from './handlers';
+import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler, SortState } from './handlers';
 type MobileFilterDrawerProps = {
     column: ColumnDefinition<Record<string, unknown>>;
     data?: Record<string, unknown>[];
@@ -9,6 +9,7 @@ type MobileFilterDrawerProps = {
     sortHandlers: SortHandlers;
     filterHandlers: FilterHandlers;
     filterState: FilterState;
+    sortState: SortState;
     onColumnFilter?: ColumnFilterHandler;
     onPopoverClose?: () => void;
 };

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -7,6 +7,8 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     selectAll: boolean | 'indeterminate';
     enableInlineEdit?: boolean;
     enableColumnManager?: boolean;
+    columnManagerMaxSelections?: number;
+    columnManagerAlwaysSelected?: string[];
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;

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

@@ -85,6 +85,8 @@ export type ColumnManagerProps<T extends Record<string, unknown>> = {
     columns: ColumnDefinition<T>[];
     visibleColumns: ColumnDefinition<T>[];
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+    maxSelections?: number;
+    alwaysSelectedColumns?: string[];
 };
 export type AdvancedFilterProps = {
     filters: unknown[];
@@ -219,6 +221,8 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onAdvancedFiltersChange?: (filters: unknown[]) => void;
     columnFreeze?: number;
     enableColumnManager?: boolean;
+    columnManagerMaxSelections?: number;
+    columnManagerAlwaysSelected?: (keyof T)[];
     pagination?: PaginationConfig;
     serverSidePagination?: boolean;
     onPageChange?: (page: number) => void;

package/dist/components/Inputs/SearchInput/searchInput.tokens.d.ts

@@ -35,6 +35,10 @@ export type SearchInputTokensType = {
     };
     outline: CSSObject['outline'];
     boxShadow: CSSObject['boxShadow'];
+    color: CSSObject['color'];
+    fontSize: CSSObject['fontSize'];
+    fontWeight: CSSObject['fontWeight'];
+    placeholderColor: CSSObject['color'];
 };
 declare const searchInputTokens: Readonly<SearchInputTokensType>;
 export declare const getSearchInputTokens: (foundationTokens: FoundationTokenType) => SearchInputTokensType;

package/dist/components/KeyValuePair/KeyValuePair.d.ts

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

package/dist/components/KeyValuePair/KeyValuePair.tokens.d.ts

@@ -0,0 +1,19 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { KeyValuePairSize, KeyValuePairStateType } from './types';
+export type KeyValuePairTokensType = {
+    gap: CSSObject['gap'];
+    keyColor: CSSObject['color'];
+    valueColor: CSSObject['color'];
+    keyFontSize: CSSObject['fontSize'];
+    valueFontSize: {
+        [key in KeyValuePairSize]: {
+            [key in KeyValuePairStateType]: CSSObject['fontSize'];
+        };
+    };
+};
+export type ResponsiveKeyValuePairTokens = {
+    [key in keyof BreakpointType]: KeyValuePairTokensType;
+};
+export declare const getKeyValuePairTokens: (foundationToken: FoundationTokenType) => ResponsiveKeyValuePairTokens;

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

@@ -0,0 +1,2 @@
+export { default as KeyValuePair } from './KeyValuePair';
+export * from './types';

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

@@ -0,0 +1,19 @@
+export declare enum KeyValuePairStateType {
+    vertical = 0,
+    horizontal = 1
+}
+export declare enum KeyValuePairSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export type KeyValuePairPropTypes = {
+    keyString: string;
+    size?: KeyValuePairSize;
+    value?: string;
+    keySlot?: React.ReactNode;
+    valueLeftSlot?: React.ReactNode;
+    valueRightSlot?: React.ReactNode;
+    keyValuePairState?: KeyValuePairStateType;
+    maxWidth?: string;
+};

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MenuAlignment {
     START = "start",
     CENTER = "center",
@@ -47,6 +48,15 @@ export type MenuItemV2Type = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: MenuItemV2Type[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
 };
 export type MenuV2GroupType = {
     label?: 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, customTrigger, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, }: 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, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

@@ -1,9 +1,11 @@
 import { MultiSelectMenuItemType } from './types';
 declare const MultiSelectMenuItem: {
-    ({ item, onSelect, selected, }: {
+    ({ item, onSelect, selected, maxSelections, allItems, }: {
         item: MultiSelectMenuItemType;
         onSelect: (value: string) => void;
         selected: string[];
+        maxSelections?: number;
+        allItems?: MultiSelectMenuItemType[];
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -1,9 +1,10 @@
 import { MultiSelectMenuItemType } from './types';
 declare const MultiSelectSubMenu: {
-    ({ item, onSelect, selected, }: {
+    ({ item, onSelect, selected, maxSelections, }: {
         item: MultiSelectMenuItemType;
         onSelect: (value: string) => void;
         selected: string[];
+        maxSelections?: number;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -33,6 +33,7 @@ export type MultiSelectMenuItemType = {
     slot3?: React.ReactNode;
     slot4?: React.ReactNode;
     disabled?: boolean;
+    alwaysSelected?: boolean;
     onClick?: () => void;
     subMenu?: MultiSelectMenuItemType[];
     tooltip?: string | React.ReactNode;
@@ -72,6 +73,7 @@ export type MultiSelectProps = {
     searchPlaceholder?: string;
     enableSelectAll?: boolean;
     selectAllText?: string;
+    maxSelections?: number;
     customTrigger?: React.ReactNode;
     useDrawerOnMobile?: boolean;
     minWidth?: number;
@@ -116,6 +118,7 @@ export type MultiSelectMenuProps = {
     enableSelectAll?: boolean;
     selectAllText?: string;
     onSelectAll?: (selectAll: boolean) => void;
+    maxSelections?: number;
     alignment?: MultiSelectMenuAlignment;
     side?: MultiSelectMenuSide;
     sideOffset?: number;

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

@@ -15,6 +15,7 @@ type PrimitiveInputProps = StateStyles & {
     fontSize?: CSSObject['fontSize'];
     fontWeight?: CSSObject['fontWeight'];
     lineHeight?: CSSObject['lineHeight'];
+    placeholderColor?: CSSObject['color'];
     position?: CSSObject['position'];
     inset?: CSSObject['inset'];
     top?: CSSObject['top'];

package/dist/components/Select/SelectItem/types.d.ts

@@ -34,4 +34,5 @@ export type SelectItemProps = {
     type: SelectItemType;
     showCheckmark?: boolean;
     className?: string;
+    selectedPosition?: 'first' | 'middle' | 'last' | 'only' | 'none';
 };

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DirectoryData } from '../Directory/types';
+import { MerchantInfo } from '../Topbar/types';
 export type LeftPanelItem = {
     label: string;
     icon: ReactNode;
@@ -19,4 +20,6 @@ export type SidebarProps = {
     footer?: ReactNode;
     sidebarTopSlot?: ReactNode;
     sidebarCollapseKey?: string;
+    merchantInfo?: MerchantInfo;
+    rightActions?: ReactNode;
 };

package/dist/components/Snackbar/Snackbar.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { Toaster as Snackbar } from 'sonner';
 import { AddToastOptions, CustomToastProps } from './types';
 export declare const StyledToast: React.FC<CustomToastProps>;
-export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, }: AddToastOptions) => string | number;
+export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, }: AddToastOptions) => string | number;
 export default Snackbar;

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

@@ -12,7 +12,9 @@ export type AddToastOptions = {
     actionButton?: {
         label: string;
         onClick: () => void;
+        autoDismiss?: boolean;
     };
+    duration?: number;
 };
 export type CustomToastProps = {
     header: string;
@@ -22,5 +24,7 @@ export type CustomToastProps = {
     actionButton?: {
         label: string;
         onClick: () => void;
+        autoDismiss?: boolean;
     };
+    toastId?: string | number;
 };

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

@@ -12,7 +12,7 @@ export type SwitchProps = {
     required?: boolean;
     error?: boolean;
     size?: SwitchSize;
-    label?: ReactNode;
+    label?: string;
     subtext?: ReactNode;
     slot?: ReactNode;
     name?: string;

package/dist/components/Topbar/Topbar.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Topbar } from './Topbar';
+export type { TopbarProps, MerchantInfo } from './types';