@juspay/blend-design-system 0.0.13 → 0.0.14

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

@@ -1,5 +1,8 @@
-import { NewNestedDataPoint, FlattenedDataPoint } from './types';
+import { NewNestedDataPoint, FlattenedDataPoint, AxisType } 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: () => ((value: string | number) => string);
+export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean) => ((value: string | number) => string);
+export declare const getAxisFormatter: (axisType: AxisType) => ((value: string | number) => string);

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

@@ -1,2 +1,2 @@
 import { CustomTooltipProps } from './types';
-export declare const CustomTooltip: ({ active, payload, label, hoveredKey, originalData, setHoveredKey, chartType, selectedKeys, }: CustomTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CustomTooltip: ({ active, payload, label, hoveredKey, originalData, setHoveredKey, chartType, selectedKeys, xAxis, yAxis, }: CustomTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

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, xAxisLabel, yAxisLabel, data: originalData, selectedKeys, isSmallScreen, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderChart: ({ flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -24,6 +24,40 @@ export declare enum LegendsChangeType {
     INCREASE = "increase",
     DECREASE = "decrease"
 }
+export declare enum AxisIntervalType {
+    PRESERVE_START = "preserveStart",
+    PRESERVE_END = "preserveEnd",
+    PRESERVE_START_END = "preserveStartEnd"
+}
+export declare enum AxisType {
+    DATE_TIME = "dateTime",
+    CURRENCY = "currency",
+    PERCENTAGE = "percentage",
+    NUMBER = "number"
+}
+export type TickProps = {
+    x?: number;
+    y?: number;
+    payload?: {
+        value: string | number;
+        index?: number;
+        coordinate?: number;
+    };
+    [key: string]: unknown;
+};
+export type AxisConfig = {
+    label?: string;
+    showLabel?: boolean;
+    interval?: number | AxisIntervalType;
+    show?: boolean;
+    type?: AxisType;
+    tickFormatter?: (value: string | number) => string;
+    customTick?: React.ComponentType<TickProps>;
+    dateOnly?: boolean;
+    smart?: boolean;
+};
+export type XAxisConfig = AxisConfig;
+export type YAxisConfig = AxisConfig;
 export type NewNestedDataPoint = {
     name: string;
     data: {
@@ -42,18 +76,17 @@ export type RenderChartProps = {
     lineKeys: string[];
     colors: string[];
     setHoveredKey: (key: string | null) => void;
-    xAxisLabel?: string;
-    yAxisLabel?: string;
     data: NewNestedDataPoint[];
     selectedKeys: string[];
     isSmallScreen?: boolean;
+    barsize?: number;
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };
 export type ChartsProps = {
     chartType?: ChartType;
     data: NewNestedDataPoint[];
     colors?: string[];
-    xAxisLabel?: string;
-    yAxisLabel?: string;
     slot1?: ReactNode;
     slot2?: ReactNode;
     slot3?: ReactNode;
@@ -61,6 +94,9 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode;
     stackedLegends?: boolean;
     stackedLegendsData?: StackedLegendsDataPoint[];
+    barsize?: number;
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };
 export type FlattenedDataPoint = {
     name: string;
@@ -99,4 +135,6 @@ export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
     setHoveredKey: (key: string) => void;
     chartType: ChartType;
     selectedKeys: string[];
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };

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

@@ -225,6 +225,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onPageSizeChange?: (pageSize: number) => void;
     isLoading?: boolean;
     showToolbar?: boolean;
+    showSettings?: boolean;
     headerSlot1?: ReactNode;
     headerSlot2?: ReactNode;
     enableInlineEdit?: boolean;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -136,7 +136,6 @@ export type CalendarTokenType = {
             };
         };
         datePicker: {
-            marginTop: CSSObject['marginTop'];
             container: {
                 padding: CSSObject['padding'];
                 gap: CSSObject['gap'];

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

@@ -12,6 +12,8 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerConten
     handle?: React.ReactNode;
     hasSnapPoints?: boolean;
     contentDriven?: boolean;
+    width?: string | number;
+    maxWidth?: string | number;
     mobileOffset?: {
         top?: string;
         bottom?: string;

package/dist/components/Inputs/DropdownInput/DropdownInput.d.ts

@@ -1,3 +1,3 @@
 import { DropdownInputProps } from './types';
-declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxDropdownHeight, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, dropdownPosition, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxDropdownHeight, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownInput;

package/dist/components/Inputs/DropdownInput/types.d.ts

@@ -1,5 +1,6 @@
 import { TextInputSize } from '../TextInput/types';
 import { SelectMenuGroupType } from '../../Select/types';
+import { ReactNode } from 'react';
 export declare enum DropdownInputSize {
     SM = "sm",
     MD = "md",
@@ -12,6 +13,10 @@ export declare enum DropdownInputState {
     ERROR = "error",
     DISABLED = "disabled"
 }
+export declare enum DropdownPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
 export type DropdownInputProps = {
     label?: string;
     sublabel?: string;
@@ -21,7 +26,7 @@ export type DropdownInputProps = {
     hintText?: string;
     value?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    slot?: React.ReactNode;
+    slot?: ReactNode;
     size?: TextInputSize;
     dropDownValue?: string;
     onDropDownChange?: (value: string) => void;
@@ -32,4 +37,5 @@ export type DropdownInputProps = {
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     maxDropdownHeight?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;
+    dropdownPosition?: DropdownPosition;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus' | 'slot'>;

package/dist/components/Inputs/OTPInput/OTPInput.d.ts

@@ -1,3 +1,3 @@
 import { OTPProps } from './types';
-declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
+declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, length, autoFocus, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
 export default OTPInput;

package/dist/components/Inputs/OTPInput/otpInput.tokens.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum OTPInputState {
     DEFAULT = "default",
     HOVER = "hover",
@@ -29,6 +30,8 @@ export type OTPInputTokensType = {
         };
     };
 };
-declare const otpInputTokens: OTPInputTokensType;
-export declare const getOTPInputTokens: (foundationToken: FoundationTokenType) => OTPInputTokensType;
-export default otpInputTokens;
+export type ResponsiveOTPInputTokens = {
+    [key in keyof BreakpointType]: OTPInputTokensType;
+};
+export declare const getOTPInputTokens: (foundationToken: FoundationTokenType) => ResponsiveOTPInputTokens;
+export {};

package/dist/components/Inputs/OTPInput/types.d.ts

@@ -6,6 +6,8 @@ export type OTPProps = {
     errorMessage?: string;
     hintText?: string;
     value?: string;
+    length?: number;
+    autoFocus?: boolean;
     onChange?: (value: string) => void;
     form?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange'>;

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MultiSelectVariant {
     CONTAINER = "container",
     NO_CONTAINER = "no-container"
@@ -34,6 +35,16 @@ export type MultiSelectMenuItemType = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: MultiSelectMenuItemType[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
 };
 export type MultiSelectMenuGroupType = {
     groupLabel?: string;

package/dist/components/Popover/popover.tokens.d.ts

@@ -8,6 +8,11 @@ export type PopoverTokenType = {
     gap: CSSObject['gap'];
     zIndex: CSSObject['zIndex'];
     borderRadius: CSSObject['borderRadius'];
+    padding: {
+        horizontal: CSSObject['paddingLeft'];
+        top: CSSObject['paddingTop'];
+        bottom: CSSObject['paddingBottom'];
+    };
     headerContainer: {
         heading: {
             fontSize: {

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

@@ -0,0 +1,3 @@
+export { default } from './index';
+export * from './index';
+export * from './types';

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

@@ -0,0 +1,5 @@
+import { SelectItemProps } from './types';
+declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SelectItem;
+export { SelectItemType } from './types';
+export type { SelectItemProps, BaseSelectItemType } from './types';

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { TooltipSide, TooltipAlign, TooltipSize } from '../../Tooltip/types';
+export declare enum SelectItemType {
+    SINGLE = "single",
+    MULTI = "multi"
+}
+export type BaseSelectItemType = {
+    label: string;
+    value: string;
+    checked?: boolean;
+    subLabel?: string;
+    slot1?: ReactNode;
+    slot2?: ReactNode;
+    slot3?: ReactNode;
+    slot4?: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: BaseSelectItemType[];
+    tooltip?: string | ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
+};
+export type SelectItemProps = {
+    item: BaseSelectItemType;
+    onSelect: (value: string) => void;
+    selected: string | string[];
+    type: SelectItemType;
+    showCheckmark?: boolean;
+    className?: string;
+};

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

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { SelectItemType } from './types';
+export declare const checkIfTruncated: (element: HTMLElement | null) => boolean;
+export declare const useTruncationDetection: (ref: RefObject<HTMLElement>) => () => boolean;
+export declare const isItemSelected: (itemValue: string, selected: string | string[], type: SelectItemType) => boolean;
+export declare const getRightSlotConfig: (isSelected: boolean, type: SelectItemType, item: {
+    disabled?: boolean;
+}) => {
+    type: "checkbox";
+    props: {
+        disabled: boolean | undefined;
+        checked: boolean;
+        size?: undefined;
+    };
+} | {
+    type: "icon";
+    props: {
+        size: number;
+        disabled?: undefined;
+        checked?: undefined;
+    };
+} | null;

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
     START = "start",
     CENTER = "center",
@@ -51,5 +52,15 @@ export type SelectMenuItemType = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: SelectMenuItemType[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
 };
 export declare const dummyMenuItemsLong: SelectMenuGroupType[];

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

@@ -9,6 +9,7 @@ export type LeftPanelInfo = {
     items: LeftPanelItem[];
     selected: string;
     onSelect: (value: string) => void;
+    maxVisibleItems?: number;
 };
 export type SidebarProps = {
     children: ReactNode;

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

@@ -9,6 +9,7 @@ type SingleSelectMenuProps = {
     maxWidth?: number;
     maxHeight?: number;
     enableSearch?: boolean;
+    searchPlaceholder?: string;
     disabled?: boolean;
     alignment?: SelectMenuAlignment;
     side?: SelectMenuSide;
@@ -17,5 +18,5 @@ type SingleSelectMenuProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, enableSearch, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
     START = "start",
     CENTER = "center",
@@ -51,6 +52,16 @@ export type SelectMenuItemType = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: SelectMenuItemType[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
 };
 export type SingleSelectProps = {
     label?: string;

package/dist/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { SingleSelectProps } from '../SingleSelect';
+import { AxisType } from '../Charts/types';
 export declare enum StatCardVariant {
     LINE = "line",
     PROGRESS_BAR = "progress",
@@ -19,6 +20,12 @@ export type StatCardChange = {
     valueType: ChangeType;
     tooltip?: ReactNode;
 };
+export type StatCardAxisConfig = {
+    type?: AxisType;
+    tickFormatter?: (value: string | number) => string;
+    dateOnly?: boolean;
+    smart?: boolean;
+};
 export type StatCardProps = {
     title: string;
     value: string | number;
@@ -33,4 +40,7 @@ export type StatCardProps = {
     helpIconText?: string;
     dropdownProps?: SingleSelectProps;
     maxWidth?: string;
+    xAxis?: StatCardAxisConfig;
+    yAxis?: StatCardAxisConfig;
+    valueFormatter?: AxisType;
 };

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

@@ -1,5 +1,13 @@
 declare const Tabs: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     variant?: import('./types').TabsVariant;
     size?: import('./types').TabsSize;
+    items?: import('./types').TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default Tabs;

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

@@ -4,5 +4,15 @@ declare const TabsList: import('react').ForwardRefExoticComponent<Omit<import('@
     size?: TabsSize;
     expanded?: boolean;
     fitContent?: boolean;
+    items?: import('./types').TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
+    onTabChange?: (value: string) => void;
+    activeTab?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default TabsList;

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

@@ -6,5 +6,7 @@ declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<import
     leftSlot?: import('react').ReactNode;
     rightSlot?: import('react').ReactNode;
     children: string | number;
+    closable?: boolean;
+    onClose?: () => void;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export default TabsTrigger;

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

@@ -10,15 +10,40 @@ export declare enum TabsSize {
     MD = "md",
     LG = "lg"
 }
+export type TabItem = {
+    value: string;
+    label: string;
+    content: ReactNode;
+    closable?: boolean;
+    isDefault?: boolean;
+};
 export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     variant?: TabsVariant;
     size?: TabsSize;
+    items?: TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
 };
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
     size?: TabsSize;
     expanded?: boolean;
     fitContent?: boolean;
+    items?: TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
+    onTabChange?: (value: string) => void;
+    activeTab?: string;
 };
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     value: string;
@@ -27,6 +52,8 @@ export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Tri
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
     children: string | number;
+    closable?: boolean;
+    onClose?: () => void;
 };
 export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 export type TabsStyles = {

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { TabItem } from './types';
+/**
+ * Groups tabs by content and concatenates labels for tabs with identical content.
+ * Maximum 3 items can be concatenated.
+ *
+ * @param tabs - Array of tab items to process
+ * @returns Processed tabs with concatenation applied
+ */
+export declare const processTabsWithConcatenation: (tabs: TabItem[]) => TabItem[];
+/**
+ * Sorts tabs to ensure default tabs appear first
+ */
+export declare const sortTabsByDefault: (tabs: TabItem[]) => TabItem[];
+/**
+ * Filters available items that haven't been added as tabs yet
+ */
+export declare const getAvailableItems: <T extends {
+    value: string;
+}>(availableItems: T[], existingTabs: TabItem[]) => T[];
+/**
+ * Creates tab items from selected values with shared content
+ */
+export declare const createTabsFromSelection: <T extends {
+    value: string;
+    label: string;
+}>(selectedValues: string[], availableItems: T[], content: ReactNode) => TabItem[];
+/**
+ * Prepares items for SingleSelect dropdown (all tabs including scrolled-out)
+ */
+export declare const prepareDropdownItems: (tabs: TabItem[]) => {
+    items: {
+        value: string;
+        label: string;
+    }[];
+}[];
+/**
+ * Returns all tabs for display (no limiting - let horizontal scroll handle overflow)
+ */
+export declare const getDisplayTabs: (tabs: TabItem[]) => TabItem[];

package/dist/context/ThemeContext.d.ts

@@ -7,7 +7,7 @@ import { ResponsiveSwitchTokens } from '../components/Switch/switch.token';
 import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
 import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
-import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
+import { ResponsiveOTPInputTokens } from '../components/Inputs/OTPInput/otpInput.tokens';
 import { ResponsiveTooltipTokens } from '../components/Tooltip/tooltip.tokens';
 import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
@@ -39,7 +39,7 @@ export type ComponentTokenType = {
     TEXT_INPUT?: ResponsiveTextInputTokens;
     NUMBER_INPUT?: ResponsiveNumberInputTokens;
     ALERT?: ResponsiveAlertTokens;
-    OTP_INPUT?: OTPInputTokensType;
+    OTP_INPUT?: ResponsiveOTPInputTokens;
     TOOLTIP?: ResponsiveTooltipTokens;
     UNIT_INPUT?: ResponsiveUnitInputTokens;
     MULTI_VALUE_INPUT?: MultiValueInputTokensType;

package/dist/context/useComponentToken.d.ts

@@ -9,7 +9,7 @@ import { ComponentTokenType } from './ThemeContext';
 import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
 import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
-import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
+import { ResponsiveOTPInputTokens } from '../components/Inputs/OTPInput/otpInput.tokens';
 import { ResponsiveTooltipTokens } from '../components/Tooltip/tooltip.tokens';
 import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
@@ -29,4 +29,4 @@ import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;