zebpay-ui 0.0.119 → 0.0.121

package/dist/cjs/styles/colors.d.ts

@@ -88,6 +88,8 @@ declare const colors: {
     Zeb_Effects_Top_Shadow_Light: string;
     Zeb_BG_Mask: string;
     Zeb_Effects_Shadow_Light: string;
+    /** Figma V4 - Bottom area (extraDark bottom sheet) */
+    Zeb_Effects_Shadow_Extra_Dark_Bottom: string;
     Zeb_Effects_Shadow_Input: string;
     Zeb_Effects_Shadow_List: string;
     Zeb_Secondary_Subtext: string;

package/dist/cjs/theme/ZThemeProvider.d.ts

@@ -0,0 +1,16 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import type { Theme } from "../globalTypings";
+import "./theme.css";
+import { ZColorScheme } from "./types";
+export interface ThemeContextValue {
+    theme: Theme;
+    zColorScheme: ZColorScheme;
+}
+export declare const ThemeContext: React.Context<ThemeContextValue | null>;
+export declare function useZTheme(): ThemeContextValue;
+export interface ZThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+}
+export declare function ZThemeProvider({ children, theme, }: ZThemeProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/theme/componentColors.d.ts

@@ -0,0 +1,13 @@
+import type { Theme } from "../globalTypings";
+export declare function getPanelBackground(mode: Theme): string;
+export declare function getFieldBackground(mode: Theme): string;
+export declare function getInputSurfaceBackground(mode: Theme): string;
+export declare function getHoverBackground(mode: Theme): string;
+export declare function getPrimaryTextColor(mode: Theme): string;
+export declare function getMutedTextColor(mode: Theme): string;
+export declare function getAccentTextColor(mode: Theme): string;
+export declare function getSubtleBorderColor(mode: Theme): string;
+export declare function getCardBorderColor(mode: Theme): string;
+export declare function getDividerColor(mode: Theme): string;
+export declare function getShimmerBackground(mode: Theme): string;
+export declare function getIconBoxBackground(mode: Theme): string;

package/dist/cjs/theme/index.d.ts

@@ -0,0 +1,5 @@
+export { ZThemeProvider, useZTheme, ThemeContext } from "./ZThemeProvider";
+export type { ZThemeProviderProps, ThemeContextValue } from "./ZThemeProvider";
+export { lightColorScheme, darkColorScheme, extraDarkColorScheme, getZColorSchemeForTheme, ZColors, ZGradientConst, } from "./zColorScheme";
+export { zColorTokens } from "./zColorTokens";
+export type { ZColorScheme } from "./types";

package/dist/cjs/theme/types.d.ts

@@ -0,0 +1,118 @@
+export interface TabColorScheme {
+    primaryActiveText: string;
+    primaryActiveFill: string;
+    primaryDefaultFill: string;
+    primaryDefaultText: string;
+    primaryStroke: string;
+    secondaryActiveTab: string;
+    secondaryDefaultTab: string;
+    tertiaryFill: string;
+    tertiaryText: string;
+    tertiaryStroke: string;
+    tertiaryDefaultFill: string;
+    tertiaryDefaultText: string;
+    tertiaryDefaultStroke: string;
+}
+export interface ZColorScheme {
+    primary: {
+        title: string;
+        white: string;
+    };
+    secondary: {
+        subtext: string;
+        disabled: string;
+    };
+    background: {
+        bottomSheetScrim: string;
+        bottomSheetBar: string;
+        bottomSheetBg: string;
+        bottomSheetFg: string;
+        bottomSheetStroke: string;
+        fullScreenBg: string;
+        fullScreenFg01: string;
+        fullScreenFg02: string;
+    };
+    icon: {
+        primary: string;
+        secondary: string;
+        primaryTap: string;
+        secondaryTap: string;
+        header: string;
+        disabled: string;
+        success: string;
+        error: string;
+        pending: string;
+        noChange: string;
+        illustration: string;
+        fiat: string;
+        rnr: string;
+        navGrey: string;
+    };
+    functional: {
+        green: string;
+        green02: string;
+        red: string;
+        red02: string;
+        blue: string;
+        yellow: string;
+        grey: string;
+        greenTrans: string;
+        redTrans: string;
+        blueTrans: string;
+        yellowTrans: string;
+        greyTrans: string;
+        redTag: string;
+        greenTag: string;
+        greyTag: string;
+    };
+    toast: {
+        successFill: string;
+        successStroke: string;
+        successTitle: string;
+        successSubText: string;
+        infoFill: string;
+        infoStroke: string;
+        infoTitle: string;
+        infoSubText: string;
+        errorFill: string;
+        errorStroke: string;
+        errorTitle: string;
+        errorSubText: string;
+    };
+    stroke: {
+        card: string;
+        separator: string;
+        header: string;
+        bottomSheet: string;
+        gradientCard: string;
+    };
+    tag: {
+        greenStroke: string;
+        greenFilled: string;
+        greenTagText: string;
+        greyFilled: string;
+        greyTagText: string;
+        redStroke: string;
+        redFilled: string;
+        redTagText: string;
+        yellowStroke: string;
+        yellowTagText: string;
+        yellowTagTextDark: string;
+        greyTagStroke: string;
+        blueStroke: string;
+        blueTagText: string;
+    };
+    header: {
+        header: string;
+        listing: string;
+        table: string;
+    };
+    input: {
+        default: string;
+        disabled: string;
+        defaultStroke: string;
+        defaultVariant: string;
+    };
+    overlay: string;
+    tab: TabColorScheme;
+}

package/dist/cjs/theme/zColorScheme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from "../globalTypings";
+import type { ZColorScheme } from "./types";
+import { ZColors, ZGradientConst } from "./zColors";
+/** Mobile v2 ZLightColorScheme */
+export declare const lightColorScheme: ZColorScheme;
+/** Mobile v2 ZDarkColorScheme — web blue / component `mode="dark"` */
+export declare const darkColorScheme: ZColorScheme;
+/** Mobile v2 ZDarkColorSchemeV4 — mobile dark / component `mode="extraDark"` */
+export declare const extraDarkColorScheme: ZColorScheme;
+export declare function getZColorSchemeForTheme(theme: Theme): ZColorScheme;
+export { ZColors, ZGradientConst };

package/dist/cjs/theme/zColorTokens.d.ts

@@ -0,0 +1,33 @@
+/** CSS custom property references for gradual component migration. */
+export declare const zColorTokens: {
+    readonly primary: {
+        readonly title: "var(--color-primary-title)";
+        readonly white: "var(--color-primary-white)";
+    };
+    readonly secondary: {
+        readonly subtext: "var(--color-secondary-subtext)";
+        readonly disabled: "var(--color-secondary-disabled)";
+    };
+    readonly background: {
+        readonly fullScreenBg: "var(--color-background-full-screen)";
+        readonly fullScreenFg01: "var(--color-background-foreground-01)";
+        readonly fullScreenFg02: "var(--color-background-foreground-02)";
+        readonly bottomSheetBg: "var(--color-background-bottom-sheet-bg)";
+        readonly bottomSheetFg: "var(--color-background-bottom-sheet-fg)";
+    };
+    readonly input: {
+        readonly default: "var(--color-input-default)";
+        readonly disabled: "var(--color-input-disabled)";
+    };
+    readonly functional: {
+        readonly green: "var(--color-functional-green)";
+        readonly red: "var(--color-functional-red)";
+        readonly blue: "var(--color-functional-blue)";
+        readonly yellow: "var(--color-functional-yellow)";
+    };
+    readonly stroke: {
+        readonly separator: "var(--color-stroke-separator)";
+        readonly card: "var(--color-stroke-card)";
+    };
+    readonly overlay: "var(--color-overlay)";
+};

package/dist/cjs/theme/zColors.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Primitive palette mirrored from mobile v2 design system:
+ * zebpay_multiplatform/design/v2/.../znew/color/ZColors.kt
+ *
+ * Token suffix "V4" in some names matches the Kotlin source (dark palette revision),
+ * not the design system version — the design system module is v2.
+ */
+export declare const ZColors: {
+    readonly Black: "#000000";
+    readonly White: "#FFFFFF";
+    readonly Transparent: "transparent";
+    readonly Overlay: "#660C0C24";
+    readonly Blue01: "#222245";
+    readonly Blue02: "#181837";
+    readonly Blue03: "#338FFF";
+    readonly Blue04: "#C0C0EE";
+    readonly Blue05: "#E9EFF6";
+    readonly Blue06: "#33338FFF";
+    readonly Blue07: "#EEF5FF";
+    readonly Blue08: "#33C0C0EE";
+    readonly Blue09: "#151532";
+    readonly Blue10: "#D9EAFF";
+    readonly Blue11: "#0A338FFF";
+    readonly Blue12: "#EBF4FF";
+    readonly Grey01: "#C2C2DD";
+    readonly Grey02: "#34345A";
+    readonly Grey03: "#6B6B6B";
+    readonly Grey04: "#33C0C0EE";
+    readonly Grey05: "#E1E3E6";
+    readonly Grey06: "#C2C2C8";
+    readonly Grey07: "#B5B5D3";
+    readonly Green01: "#1ECAA2";
+    readonly Green02: "#31826F";
+    readonly Green03: "#212F4C";
+    readonly Green04: "#331ECAA2";
+    readonly Green06: "#00A37D";
+    readonly Red01: "#EA6161";
+    readonly Red02: "#BF5555";
+    readonly Red03: "#302544";
+    readonly Red04: "#33EA6161";
+    readonly Red06: "#DC5454";
+    readonly Yellow01: "#F9C35C";
+    readonly Yellow02: "#FFB100";
+    readonly Yellow03: "#2A273B";
+    readonly Yellow04: "#33F9C35C";
+    readonly Yellow05: "#986405";
+    readonly PrimaryTitleV4: "#F8F8F8";
+    readonly PrimaryWhiteV4: "#F8F8F8";
+    readonly SurfaceCardV4: "#1D212B";
+    readonly BottomSheetBgBar: "#313337";
+    readonly SecondarySubtextV4: "#C0C7DC";
+    readonly SecondaryDisabledV4: "#5F6267";
+    readonly SurfaceElevatedV4: "#26293E";
+    readonly GreenV4: "#0FC985";
+    readonly GreenTransBgV4: "#0E362F";
+    readonly GreyTransBgV4: "#14161C";
+    readonly RedTagTextV4: "#FF4848";
+    readonly IconTapSelectedV4: "#6A93FF";
+    readonly IconSecondaryV4: "#8B95B0";
+    readonly IconTapableSelectedV4: "#5786FF";
+    readonly InputDefaultV4: "#14161C";
+    readonly InputDisabledStrokeV4: "#5F6267";
+    readonly FullScreenBg01: "#1D212B";
+    readonly ToastSuccessStrokeV4: "#B3038153";
+    readonly ToastInfoStrokeV4: "#B3B09600";
+    readonly ToastErrorStrokeV4: "#B3C94444";
+    readonly TagYellowStrokeV4: "#FFF15A";
+    readonly TagYellowTextV4: "#FFF15A";
+    readonly TagGreyTextV4: "#C4C4C4";
+    readonly TagGreyFilledV4: "#313337";
+    readonly HeaderSecondaryFillV4: "#14161C";
+    readonly TabAccentV4: "#4660FE";
+    readonly FunctionalGreenV4: "#038153";
+    readonly FunctionalRedV4: "#E75252";
+    readonly FunctionalRed02V4: "#C94444";
+    readonly FunctionalYellowV4: "#B09600";
+    readonly FunctionalRedTransV4: "#3C1A23";
+    readonly FunctionalYellowTransV4: "#413A21";
+    readonly FunctionalBlueTransV4: "#182943";
+    readonly SuccessIconV4: "#15B178";
+    readonly ErrorIconV4: "#B84242";
+    readonly TabSecondaryV4: "#6A93FF";
+    readonly SheetScrimColor: "#F7252525";
+};
+/** Mirrored from mobile v2 ZGradientConst */
+export declare const ZGradientConst: {
+    gradient1: readonly ["#5D7BFE", "#0974FF"];
+    gradient1V4: readonly ["#5786FF", "#3751FE"];
+    white: readonly ["#FFFFFF", "#FFFFFF"];
+};
+export declare const linearGradient: (from: string, to: string, angle?: string) => string;
+export declare const solidGradient: (color: string) => string;
+export declare const gradientFromConst: (colors: readonly [string, string]) => string;

package/dist/esm/components/Accordion/index.d.ts

@@ -2,12 +2,14 @@
 import { SerializedStyles } from "@emotion/react";
 import React, { FC, ReactNode } from "react";
 import "./../../../dist/icons/icons.css";
+import type { Theme } from "../../globalTypings";
 interface AccordionProps {
     title: React.ReactNode;
     isOpen: boolean;
     onToggle: (value: boolean) => void;
     style?: SerializedStyles;
     children?: ReactNode;
+    mode?: Theme;
 }
 declare const Accordion: FC<AccordionProps>;
 export default Accordion;

package/dist/esm/components/Accordion/style.d.ts

@@ -1,4 +1,5 @@
-export declare const accordionWrapper: (isOpen: boolean) => import("@emotion/react").SerializedStyles;
+import type { Theme } from "../../globalTypings";
+export declare const accordionWrapper: (isOpen: boolean, mode?: Theme) => import("@emotion/react").SerializedStyles;
 export declare const accordionTitle: import("@emotion/react").SerializedStyles;
 export declare const accordionIcon: import("@emotion/react").SerializedStyles;
 export declare const accordionCollapsed: import("@emotion/react").SerializedStyles;

package/dist/esm/components/AccordionV2/style.d.ts

@@ -1,7 +1,7 @@
-import { Theme } from "../../globalTypings";
-export declare const accordionWrapper: (isOpen: boolean, mode: Theme, disableBorder: boolean) => import("@emotion/react").SerializedStyles;
-export declare const accordionTitle: import("@emotion/react").SerializedStyles;
+import { Theme as ThemeType } from "../../globalTypings";
+export declare const accordionWrapper: (isOpen: boolean, mode: ThemeType, disableBorder: boolean) => import("@emotion/react").SerializedStyles;
+export declare const accordionTitle: (mode: ThemeType) => import("@emotion/react").SerializedStyles;
 export declare const accordionIcon: import("@emotion/react").SerializedStyles;
 export declare const accordionCollapsed: import("@emotion/react").SerializedStyles;
-export declare const accordionContent: (isOpen: boolean, mode: Theme) => import("@emotion/react").SerializedStyles;
+export declare const accordionContent: (isOpen: boolean, mode: ThemeType) => import("@emotion/react").SerializedStyles;
 export declare const iconStyle: (isOpen: boolean) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/Avatar/typings.d.ts

@@ -1,5 +1,6 @@
-import { Interpolation, Theme } from "@emotion/react";
+import { Interpolation, Theme as EmotionTheme } from "@emotion/react";
 import { AvatarSpacing } from "../AvatarGroup/typings";
+import type { Theme } from "../../globalTypings";
 export type AvatareSize = "small" | "medium" | "large";
 export interface AvatarProps {
     src: string;
@@ -9,9 +10,10 @@ export interface AvatarProps {
     onClick?: () => void;
     disabled?: boolean;
     loading?: boolean;
-    style?: Interpolation<Theme>;
+    style?: Interpolation<EmotionTheme>;
     spacing: AvatarSpacing;
     children?: React.ReactNode;
+    mode?: Theme;
 }
 export interface SizingProps {
     width: number;

package/dist/esm/components/CalendarPicker/styles.d.ts

@@ -1,4 +1,5 @@
+import type { Theme } from "../../globalTypings";
 export declare const alignNav: import("@emotion/react").SerializedStyles;
-export declare const monthArrow: import("@emotion/react").SerializedStyles;
-export declare const navigationLabel: import("@emotion/react").SerializedStyles;
-export declare const dateRangePicker: import("@emotion/react").SerializedStyles;
+export declare const monthArrow: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const navigationLabel: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const dateRangePicker: (mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/CalendarPicker/typings.d.ts

@@ -1,4 +1,5 @@
 import { SerializedStyles } from "@emotion/react";
+import { Theme } from "../../globalTypings";
 export interface DateRange {
     startDate: number;
     endDate: number;
@@ -15,4 +16,5 @@ export interface DateRangePickerProps {
     };
     selectedDate?: Date | [Date | null, Date | null] | null;
     onClose?: () => void;
+    mode?: Theme;
 }

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

@@ -1,8 +1,10 @@
 import React from "react";
+import type { Theme } from "../../globalTypings";
 export interface CardProps {
     title: string;
     headerNav?: React.ReactNode;
     children?: React.ReactNode;
+    mode?: Theme;
 }
 declare const Card: React.FC<CardProps>;
 export default Card;

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

@@ -1,3 +1,4 @@
-export declare const cardStyle: import("@emotion/react").SerializedStyles;
+import type { Theme } from "../../globalTypings";
+export declare const cardStyle: (mode?: Theme) => import("@emotion/react").SerializedStyles;
 export declare const cardHeader: import("@emotion/react").SerializedStyles;
-export declare const cardBody: import("@emotion/react").SerializedStyles;
+export declare const cardBody: (mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/Checkbox/styles.d.ts

@@ -1,8 +1,9 @@
+import type { Theme } from "../../globalTypings";
 export declare const checkboxContainer: import("@emotion/react").SerializedStyles;
-export declare const labelContainer: (isLight: boolean, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const labelContainer: (mode: Theme, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const disabledLabel: import("@emotion/react").SerializedStyles;
 export declare const input: import("@emotion/react").SerializedStyles;
-export declare const checkCheckmark: (isLight: boolean, indeterminate?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const checkCheckmark: (mode: Theme, indeterminate?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const checkLabel: import("@emotion/react").SerializedStyles;
 export declare const checkComponent: import("@emotion/react").SerializedStyles;
-export declare const checkmark: (isLight: boolean, indeterminate?: boolean, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const checkmark: (mode: Theme, indeterminate?: boolean, alignTop?: boolean) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/Checkbox/typings.d.ts

@@ -1,6 +1,6 @@
 import { SerializedStyles } from "@emotion/react";
 import React from "react";
-import { Mode } from "../Tags";
+import type { Theme } from "../../globalTypings";
 export interface CheckboxProps {
     value: string | number;
     checked: boolean;
@@ -12,6 +12,6 @@ export interface CheckboxProps {
     disabled?: boolean;
     style?: SerializedStyles;
     indeterminate?: boolean;
-    mode?: Mode;
+    mode?: Theme;
     alignTop?: boolean;
 }

package/dist/esm/components/Divider/index.d.ts

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import React from "react";
 import { SerializedStyles } from "@emotion/react";
+import type { Theme } from "../../globalTypings";
 export interface DividerProps {
     spacing: number;
     spacingTop?: number;
@@ -9,6 +10,7 @@ export interface DividerProps {
     height?: number;
     style?: SerializedStyles;
     type?: "solid" | "dashed";
+    mode?: Theme;
 }
 declare const Divider: React.FC<DividerProps>;
 export default Divider;

package/dist/esm/components/Divider/styles.d.ts

@@ -1,2 +1,3 @@
+import type { Theme } from "../../globalTypings";
 import { DividerProps } from ".";
-export declare const divider: (props: DividerProps) => import("@emotion/react").SerializedStyles;
+export declare const divider: (props: DividerProps, mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/IconBox/index.d.ts

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import React from "react";
 import { SerializedStyles } from "@emotion/react";
+import type { Theme } from "../../globalTypings";
 export interface IconBoxProps {
     icon: string;
     size?: number;
@@ -11,6 +12,7 @@ export interface IconBoxProps {
     boxStyle?: SerializedStyles;
     iconStyle?: SerializedStyles;
     withHover?: boolean;
+    mode?: Theme;
 }
 declare const IconBox: React.FC<IconBoxProps>;
 export default IconBox;

package/dist/esm/components/IconBox/styles.d.ts

@@ -1,3 +1,4 @@
+import type { Theme } from "../../globalTypings";
 import { IconBoxProps } from ".";
-export declare const container: (data: IconBoxProps) => import("@emotion/react").SerializedStyles;
-export declare const withHoverStyle: import("@emotion/react").SerializedStyles;
+export declare const container: (data: IconBoxProps, mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const withHoverStyle: (mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/Input/typings.d.ts

@@ -21,6 +21,7 @@ export interface InputProps {
     cta?: {
         label: string;
         onClick: () => void;
+        style?: SerializedStyles;
     };
     onFocus?: () => void;
     onBlur?: () => void;

package/dist/esm/components/InputDropDown/styles.d.ts

@@ -1,16 +1,17 @@
+import type { Theme } from "../../globalTypings";
 export declare const wrapper: import("@emotion/react").SerializedStyles;
 export declare const selectOverlay: import("@emotion/react").SerializedStyles;
-export declare const icon: (isLightMode: boolean, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const icon: (mode: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const input: import("@emotion/react").SerializedStyles;
-export declare const selectedElement: (open: boolean, isLightMode: boolean, disabled?: boolean) => import("@emotion/react").SerializedStyles;
-export declare const options: import("@emotion/react").SerializedStyles;
-export declare const optionItem: import("@emotion/react").SerializedStyles;
-export declare const optionsWrapper: import("@emotion/react").SerializedStyles;
-export declare const displayComponent: (highlight: boolean, isLightMode: boolean, disabled: boolean) => import("@emotion/react").SerializedStyles;
-export declare const main: (isOpen: boolean, isLightMode: boolean, disabled?: boolean, isError?: boolean) => import("@emotion/react").SerializedStyles;
-export declare const dropDown: (isLight: boolean) => import("@emotion/react").SerializedStyles;
+export declare const selectedElement: (open: boolean, mode: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const options: (mode: Theme) => import("@emotion/react").SerializedStyles;
+export declare const optionItem: (mode: Theme) => import("@emotion/react").SerializedStyles;
+export declare const optionsWrapper: (mode: Theme) => import("@emotion/react").SerializedStyles;
+export declare const displayComponent: (highlight: boolean, mode: Theme, disabled: boolean) => import("@emotion/react").SerializedStyles;
+export declare const main: (isOpen: boolean, mode: Theme, disabled?: boolean, isError?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const dropDown: (mode: Theme) => import("@emotion/react").SerializedStyles;
 export declare const optionsList: (isSearchable?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const inputSearch: import("@emotion/react").SerializedStyles;
 export declare const dropdown: (posX: number, posY: number) => import("@emotion/react").SerializedStyles;
-export declare const contentHeading: import("@emotion/react").SerializedStyles;
+export declare const contentHeading: (mode: Theme) => import("@emotion/react").SerializedStyles;
 export declare const pillOptions: import("@emotion/react").SerializedStyles;

package/dist/esm/components/InputDropDown/typings.d.ts

@@ -39,4 +39,6 @@ export interface InputDropDownProps<T> {
     hideDropdown?: boolean;
     mode?: Theme;
     customDropDownStyle?: SerializedStyles;
+    openDropdown?: boolean;
+    dropdownId?: string;
 }

package/dist/esm/components/MobileBottomDrawer/index.d.ts

@@ -1,14 +1,15 @@
 /** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
 import React from "react";
+import { Theme } from "../../globalTypings";
 interface MobileBottomDrawerProps {
     onClose: () => void;
     children: React.ReactNode;
     style?: SerializedStyles[];
     overlayStyle?: SerializedStyles;
     hideHandle?: boolean;
-    /** Drag threshold in pixels to trigger close (default: 100) */
     closeThreshold?: number;
+    mode?: Theme;
 }
 declare const MobileBottomDrawer: React.FC<MobileBottomDrawerProps>;
 export default MobileBottomDrawer;

package/dist/esm/components/MobileBottomDrawer/styles.d.ts

@@ -1,3 +1,4 @@
-export declare const bottomDrawer: import("@emotion/react").SerializedStyles;
+import type { Theme } from "../../globalTypings";
+export declare const bottomDrawer: (mode?: Theme) => import("@emotion/react").SerializedStyles;
 export declare const backdrop: import("@emotion/react").SerializedStyles;
-export declare const dragHandle: import("@emotion/react").SerializedStyles;
+export declare const dragHandle: (mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/MobileCalenderPicker/styles.d.ts

@@ -1,6 +1,8 @@
+import type { Theme } from "../../globalTypings";
 export declare const alignNav: import("@emotion/react").SerializedStyles;
 export declare const monthArrow: import("@emotion/react").SerializedStyles;
 export declare const navigationLabel: import("@emotion/react").SerializedStyles;
 export declare const dateRangePicker: import("@emotion/react").SerializedStyles;
-export declare const lineBreak: import("@emotion/react").SerializedStyles;
-export declare const heading: import("@emotion/react").SerializedStyles;
+export declare const lineBreak: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const heading: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const themedOverrides: (mode: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/Pagination/styles.d.ts

@@ -1,5 +1,6 @@
-export declare const smallCardWithBg: import("@emotion/react").SerializedStyles;
-export declare const arrow: import("@emotion/react").SerializedStyles;
-export declare const pageLink: import("@emotion/react").SerializedStyles;
-export declare const active: import("@emotion/react").SerializedStyles;
-export declare const pageItem: import("@emotion/react").SerializedStyles;
+import type { Theme } from "../../globalTypings";
+export declare const smallCardWithBg: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const arrow: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const pageLink: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const active: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const pageItem: (mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/Pagination/typings.d.ts

@@ -1,4 +1,5 @@
 import { SerializedStyles } from "@emotion/react";
+import type { Theme } from "../../globalTypings";
 export interface PaginationProps {
     onPageChange: (updatedPage: number) => void;
     totalCount: number;
@@ -6,4 +7,5 @@ export interface PaginationProps {
     siblingCount: number;
     currentPage: number;
     style?: SerializedStyles;
+    mode?: Theme;
 }

package/dist/esm/components/PinInput/style.d.ts

@@ -1,8 +1,9 @@
+import type { Theme } from "../../globalTypings";
 export declare const pins: import("@emotion/react").SerializedStyles;
-export declare const label: import("@emotion/react").SerializedStyles;
+export declare const label: (mode?: Theme) => import("@emotion/react").SerializedStyles;
 export declare const inputFocused: (focused: boolean, inValid: boolean) => import("@emotion/react").SerializedStyles;
 export declare const invalidPins: import("@emotion/react").SerializedStyles;
 export declare const inputContainer: import("@emotion/react").SerializedStyles;
-export declare const input: import("@emotion/react").SerializedStyles;
+export declare const input: (mode?: Theme) => import("@emotion/react").SerializedStyles;
 export declare const disabledInput: import("@emotion/react").SerializedStyles;
-export declare const maskStyle: import("@emotion/react").SerializedStyles;
+export declare const maskStyle: (mode?: Theme) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/PinInput/typing.d.ts

@@ -1,5 +1,6 @@
 import { SerializedStyles } from "@emotion/react";
 import React from "react";
+import type { Theme } from "../../globalTypings";
 export type PinInputProps = {
     label?: string;
     values: string[];
@@ -16,6 +17,7 @@ export type PinInputProps = {
     labelStyle?: SerializedStyles;
     inputContainerStyle?: SerializedStyles;
     inputFieldStyle?: SerializedStyles;
+    mode?: Theme;
 } & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "inputMode" | "onBlur" | "onFocus" | "onKeyDown" | "placeholder">;
 export type PinInputFieldProps = {
     index: number;

package/dist/esm/components/Popper/styles.d.ts

@@ -1,4 +1,5 @@
+import type { Theme } from "../../globalTypings";
 export declare const container: import("@emotion/react").SerializedStyles;
-export declare const popup: import("@emotion/react").SerializedStyles;
-export declare const closeButton: import("@emotion/react").SerializedStyles;
+export declare const popup: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const closeButton: (mode?: Theme) => import("@emotion/react").SerializedStyles;
 export declare const selectOverlay: import("@emotion/react").SerializedStyles;