zebpay-ui 0.0.124 → 0.0.126

package/dist/cjs/theme/v3/categories/ZNoteColors.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Mirrored from mobile v3 ZNoteColors.kt
+ */
+export declare const ZNoteColors: {
+    readonly light: {
+        readonly textRed: "#C72A2A";
+        readonly textYellow: "#E1A203";
+        readonly textGreen: "#107D63";
+        readonly borderDefault: "#D9E5FD";
+        readonly backgroundDefault: "#FAFDFF";
+    };
+    readonly dark: {
+        readonly textRed: "#F75C5C";
+        readonly textYellow: "#FBB127";
+        readonly textGreen: "#0FC985";
+        readonly borderDefault: "#1F2651";
+        readonly backgroundDefault: "#131C40";
+    };
+    readonly extraDark: {
+        readonly textRed: "#E75252";
+        readonly textYellow: "#FFF15A";
+        readonly textGreen: "#0FC985";
+        readonly borderDefault: "#1D212B";
+        readonly backgroundDefault: "#1D212B";
+    };
+};

package/dist/cjs/theme/v3/categories/ZPillsColors.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Mirrored from mobile v3 ZPillsColors.kt
+ */
+export declare const ZPillsColors: {
+    readonly light: {
+        readonly textDefault: "#484865";
+        readonly textActive: "#FFFFFF";
+        readonly textDisabled: "#B5B5B5";
+        readonly fillDefault: "#F4F7FF";
+        readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+        readonly fillDisabled: "#F4F7FF";
+        readonly borderDefault: "#D9E5FD";
+        readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+        readonly boarderDisabled: "#B5B5B5";
+    };
+    readonly dark: {
+        readonly textDefault: "#ACB8F8";
+        readonly textActive: "#FFFFFF";
+        readonly textDisabled: "#828282";
+        readonly fillDefault: "#101535";
+        readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+        readonly fillDisabled: "#101535";
+        readonly borderDefault: "#43496D";
+        readonly borderActive: "linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%)";
+        readonly boarderDisabled: "#828282";
+    };
+    readonly extraDark: {
+        readonly textDefault: "#C0C7DC";
+        readonly textActive: "#F8F8F8";
+        readonly textDisabled: "#5F6267";
+        readonly fillDefault: "#14161C";
+        readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+        readonly fillDisabled: "#5F6267";
+        readonly borderDefault: "#26293E";
+        readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+        readonly boarderDisabled: "#5F6267";
+    };
+};

package/dist/cjs/theme/v3/categories/ZScrollBarColors.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Mirrored from mobile v3 ZScrollBarColors.kt
+ */
+export declare const ZScrollBarColors: {
+    readonly light: {
+        readonly default: "#D9E5FD";
+    };
+    readonly dark: {
+        readonly default: "#2F2D5B";
+    };
+    readonly extraDark: {
+        readonly default: "#1D212B";
+    };
+};

package/dist/cjs/theme/v3/categories/ZSeparatorColors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Mirrored from mobile v3 ZSeparatorColors.kt
+ */
+export declare const ZSeparatorColors: {
+    readonly light: {
+        readonly solidDefault: "#D9E5FD";
+        readonly solidOnGradient: "#D9E5FD";
+        readonly gradientDefault: "linear-gradient(90deg, #DBE2FB00 0%, #D5E9FF 30%, #DBE9FB 70%, #DBE6FB00 100%)";
+    };
+    readonly dark: {
+        readonly solidDefault: "#202543";
+        readonly solidOnGradient: "#F3F5FF80";
+        readonly gradientDefault: "linear-gradient(90deg, #2F355400 0%, #393F61 30%, #393F61 70%, #2F355400 100%)";
+    };
+    readonly extraDark: {
+        readonly solidDefault: "#26293E";
+        readonly solidOnGradient: "#F6F9FF0D";
+        readonly gradientDefault: "linear-gradient(90deg, #1A1C27 0%, #1A1C27 100%)";
+    };
+};

package/dist/cjs/theme/v3/categories/ZShimmerColors.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Mirrored from mobile v3 ZShimmerColors.kt
+ */
+export declare const ZShimmerColors: {
+    readonly light: {
+        readonly shimmer01: "#F4F7FF";
+        readonly shimmer02: "#F6F9FF";
+    };
+    readonly dark: {
+        readonly shimmer01: "#131C40";
+        readonly shimmer02: "#101535";
+    };
+    readonly extraDark: {
+        readonly shimmer01: "#252A34";
+        readonly shimmer02: "#101535";
+    };
+};

package/dist/cjs/theme/v3/categories/ZStatusTagColors.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Mirrored from mobile v3 ZStatusTagColors.kt
+ */
+export declare const ZStatusTagColors: {
+    readonly light: {
+        readonly text: "#FFFFFF";
+        readonly red: "#D94646";
+        readonly green: "#107D63";
+        readonly yellow: "#FBB127";
+        readonly blue: "#3563FD";
+        readonly blue02: "#8595BC";
+        readonly grey: "#828282";
+    };
+    readonly dark: {
+        readonly text: "#FFFFFF";
+        readonly red: "#D94646";
+        readonly green: "#107D63";
+        readonly yellow: "#FBB127";
+        readonly blue: "#3563FD";
+        readonly blue02: "#8595BC";
+        readonly grey: "#B5B5B5";
+    };
+    readonly extraDark: {
+        readonly text: "#F8F8F8";
+        readonly red: "#E75252";
+        readonly green: "#038153";
+        readonly yellow: "#B09600";
+        readonly blue: "#6A93FF";
+        readonly blue02: "#647096";
+        readonly grey: "#2B2B30";
+    };
+};

package/dist/cjs/theme/v3/categories/ZTabColors.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Mirrored from mobile v3 ZTabColors.kt
+ */
+export declare const ZTabColors: {
+    readonly light: {
+        readonly primary: {
+            readonly textActive: "#FFFFFF";
+            readonly textDefault: "#484865";
+            readonly textDisable: "#B5B5B5";
+            readonly fillDefault: "#FAFDFF";
+            readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly fillDisable: "#F3F5FF80";
+            readonly borderDefault: "#D9E5FD";
+            readonly borderDisable: "#B5B5B5";
+        };
+        readonly secondary: {
+            readonly textDefault: "#484865";
+            readonly textActive: "#FFFFFF";
+            readonly textDisable: "#B5B5B5";
+            readonly fillDefault: "#F4F7FF";
+            readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly fillDisable: "#F4F7FF";
+            readonly borderDefault: "#D9E5FD";
+            readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly borderDisable: "#B5B5B5";
+        };
+        readonly tertiary: {
+            readonly textDefault: "#484865";
+            readonly textActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly textDisable: "#B5B5B5";
+        };
+    };
+    readonly dark: {
+        readonly primary: {
+            readonly textActive: "#FFFFFF";
+            readonly textDefault: "#ACB8F8";
+            readonly textDisable: "#828282";
+            readonly fillDefault: "#131C40";
+            readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly fillDisable: "#131C40";
+            readonly borderDefault: "#43496D";
+            readonly borderDisable: "#828282";
+        };
+        readonly secondary: {
+            readonly textDefault: "#ACB8F8";
+            readonly textActive: "#FFFFFF";
+            readonly textDisable: "#828282";
+            readonly fillDefault: "#101535";
+            readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly fillDisable: "#101535";
+            readonly borderDefault: "#43496D";
+            readonly borderActive: "linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%)";
+            readonly borderDisable: "#828282";
+        };
+        readonly tertiary: {
+            readonly textDefault: "#ACB8F8";
+            readonly textActive: "linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%)";
+            readonly textDisable: "#828282";
+        };
+    };
+    readonly extraDark: {
+        readonly primary: {
+            readonly textActive: "#F8F8F8";
+            readonly textDefault: "#C0C7DC";
+            readonly textDisable: "#5F6267";
+            readonly fillDefault: "#14161C";
+            readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly fillDisable: "#5F6267";
+            readonly borderDefault: "#1A1C27";
+            readonly borderDisable: "#5F6267";
+        };
+        readonly secondary: {
+            readonly textDefault: "#C0C7DC";
+            readonly textActive: "#F8F8F8";
+            readonly textDisable: "#5F6267";
+            readonly fillDefault: "#14161C";
+            readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly fillDisable: "#5F6267";
+            readonly borderDefault: "#1A1C27";
+            readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
+            readonly borderDisable: "#5F6267";
+        };
+        readonly tertiary: {
+            readonly textDefault: "#C0C7DC";
+            readonly textActive: "linear-gradient(90deg, #F8F8F8 0%, #F8F8F8 100%)";
+            readonly textDisable: "#5F6267";
+        };
+    };
+};

package/dist/cjs/theme/v3/categories/ZTextColors.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Mirrored from mobile v3 ZTextColors.kt
+ */
+export declare const ZTextColors: {
+    readonly light: {
+        readonly primary: "#34345A";
+        readonly secondary: "#484865";
+        readonly white: "#FFFFFF";
+        readonly disabled: "#B5B5B5";
+        readonly red: "#C72A2A";
+        readonly blue: "#3563FD";
+        readonly green: "#107D63";
+        readonly greenOnGradient: "#0FC985";
+        readonly yellow: "#E1A203";
+        readonly grey: "#828282";
+    };
+    readonly dark: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#ACB8F8";
+        readonly white: "#FFFFFF";
+        readonly disabled: "#828282";
+        readonly red: "#F75C5C";
+        readonly blue: "#3563FD";
+        readonly green: "#0FC985";
+        readonly greenOnGradient: "#0FC985";
+        readonly yellow: "#FBB127";
+        readonly grey: "#B5B5B5";
+    };
+    readonly extraDark: {
+        readonly primary: "#F8F8F8";
+        readonly secondary: "#C0C7DC";
+        readonly white: "#F8F8F8";
+        readonly disabled: "#5F6267";
+        readonly red: "#E75252";
+        readonly blue: "#6A93FF";
+        readonly green: "#0FC985";
+        readonly greenOnGradient: "#0FC985";
+        readonly yellow: "#FBB127";
+        readonly grey: "#B5B5B5";
+    };
+};

package/dist/cjs/theme/v3/categories/ZToastColors.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Mirrored from mobile v3 ZToastColors.kt
+ */
+export declare const ZToastColors: {
+    readonly light: {
+        readonly iconRed: "#C72A2A";
+        readonly iconYellow: "#EE9435";
+        readonly iconGreen: "#107D63";
+        readonly borderRed: "#C72A2A";
+        readonly borderYellow: "#EE9435";
+        readonly borderGreen: "#107D63";
+        readonly defaultBackgroundRed: "#FFDEE0";
+        readonly defaultBackgroundYellow: "#FFF6DB";
+        readonly defaultBackgroundGreen: "#DEFCF0";
+        readonly backgroundRed: "#E63946";
+        readonly backgroundYellow: "#EDA42D";
+        readonly backgroundGreen: "#06BD6E";
+    };
+    readonly dark: {
+        readonly iconRed: "#F75C5C";
+        readonly iconYellow: "#FBB127";
+        readonly iconGreen: "#0FC985";
+        readonly borderRed: "#F75C5C";
+        readonly borderYellow: "#FBB127";
+        readonly borderGreen: "#0FC985";
+        readonly defaultBackgroundRed: "#421F3B";
+        readonly defaultBackgroundYellow: "#3B2B0A";
+        readonly defaultBackgroundGreen: "#193D4E";
+        readonly backgroundRed: "#EA4E51";
+        readonly backgroundYellow: "#E3A43F";
+        readonly backgroundGreen: "#09B372";
+    };
+    readonly extraDark: {
+        readonly backgroundRed: "#E75252";
+        readonly backgroundYellow: "#B09600";
+        readonly backgroundGreen: "#038153";
+        readonly iconRed: "#F75C5C";
+        readonly iconYellow: "#FBB127";
+        readonly iconGreen: "#0FC985";
+        readonly borderRed: "#F75C5C";
+        readonly borderYellow: "#FBB127";
+        readonly borderGreen: "#0FC985";
+        readonly defaultBackgroundRed: "#421F3B";
+        readonly defaultBackgroundYellow: "#3B2B0A";
+        readonly defaultBackgroundGreen: "#193D4E";
+    };
+};

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

@@ -0,0 +1,8 @@
+export { ZThemeProviderV3, useZThemeV3, ThemeContextV3, } from "./ZThemeProvider";
+export type { ZThemeProviderPropsV3, ThemeContextValueV3, } from "./ZThemeProvider";
+export { ZColorsV3 } from "./ZColors";
+export type { ZColorNameV3 } from "./ZColors";
+export { ZGradientColorsV3 } from "./ZGradientColors";
+export type { ZGradientColorNameV3 } from "./ZGradientColors";
+export { lightColorSchemeV3, darkColorSchemeV3, extraDarkColorSchemeV3, getZColorSchemeForThemeV3, } from "./ZColorScheme";
+export type { ZColorSchemeV3 } from "./types";

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

@@ -0,0 +1,220 @@
+/**
+ * Types for mobile v3 ZColorScheme
+ */
+export type ZColorSchemeV3 = {
+    background: {
+        default: string;
+    };
+    banner: {
+        default: string;
+        purple: string;
+    };
+    blurHighlight: {
+        green: string;
+        red: string;
+        yellow: string;
+    };
+    bottomSheet: {
+        scrim: string;
+        default: string;
+        green: string;
+        red: string;
+    };
+    buttons: {
+        primary: {
+            textActive: string;
+            textDisable: string;
+            fillActive: string;
+            fillRed: string;
+            fillGreen: string;
+            fillDisable: string;
+        };
+        secondary: {
+            textActive: string;
+            textWhite: string;
+            textDisable: string;
+            fillActive: string;
+            fillDisable: string;
+            borderActive: string;
+            borderDisable: string;
+            borderGreen: string;
+            borderRed: string;
+        };
+        tertiary: {
+            textActive: string;
+            textDisable: string;
+            textBlack: string;
+            textWhite: string;
+            tabActive: string;
+            cyclicActive: string;
+        };
+    };
+    card: {
+        default: string;
+        default02: string;
+        fill: string;
+        selected: string;
+        border: string;
+        borderYellow: string;
+        borderRed: string;
+        borderGreen: string;
+        borderBlue: string;
+    };
+    graph: {
+        green: string;
+        red: string;
+    };
+    graphics: {
+        rrMeterPrimary: string;
+        rrMeterSecondary: string;
+        pieChartGreen: string;
+        pieChartBlue: string;
+        pieChartPurple: string;
+        glowGreen: string;
+        glowRed: string;
+        graphGreen: string;
+        graphRed: string;
+        badgeActive: string;
+        badgeDefault: string;
+    };
+    icon: {
+        singleTonePrimary: string;
+        singleToneSecondary: string;
+        singleToneActive: string;
+        singleToneDisable: string;
+        singleToneWhite: string;
+        singleToneRed: string;
+        singleToneGreen: string;
+        singleToneYellow: string;
+        singleToneBlue: string;
+        singleToneGrey: string;
+        dualToneSolid: string;
+        dualToneGradient: string;
+        illustrationGreen: string;
+        illustrationRed: string;
+    };
+    inputField: {
+        borderDefault: string;
+        borderActive: string;
+        borderFilled: string;
+        borderError: string;
+        borderDisabled: string;
+        backgroundDefault: string;
+        backgroundDisabled: string;
+    };
+    misc: {
+        askGreen: string;
+        bidRed: string;
+        purple: string;
+    };
+    navigation: {
+        top: {
+            onSolidText: string;
+            onSolidIcon: string;
+            onSolidIconBg: string;
+            onSolidIconBorder: string;
+            onGradientText: string;
+            onGradientIcon: string;
+            onGradientIconBg: string;
+            onGradientIconBorder: string;
+        };
+        bottom: {
+            background: string;
+            active: string;
+            default: string;
+        };
+    };
+    note: {
+        textRed: string;
+        textYellow: string;
+        textGreen: string;
+        borderDefault: string;
+        backgroundDefault: string;
+    };
+    pills: {
+        textDefault: string;
+        textActive: string;
+        textDisabled: string;
+        fillDefault: string;
+        fillActive: string;
+        fillDisabled: string;
+        borderDefault: string;
+        borderActive: string;
+        boarderDisabled: string;
+    };
+    scrollBar: {
+        default: string;
+    };
+    separator: {
+        solidDefault: string;
+        solidOnGradient: string;
+        gradientDefault: string;
+    };
+    shimmer: {
+        shimmer01: string;
+        shimmer02: string;
+    };
+    status: {
+        text: string;
+        red: string;
+        green: string;
+        yellow: string;
+        blue: string;
+        blue02: string;
+        grey: string;
+    };
+    tab: {
+        primary: {
+            textActive: string;
+            textDefault: string;
+            textDisable: string;
+            fillDefault: string;
+            fillActive: string;
+            fillDisable: string;
+            borderDefault: string;
+            borderDisable: string;
+        };
+        secondary: {
+            textDefault: string;
+            textActive: string;
+            textDisable: string;
+            fillDefault: string;
+            fillActive: string;
+            fillDisable: string;
+            borderDefault: string;
+            borderActive: string;
+            borderDisable: string;
+        };
+        tertiary: {
+            textDefault: string;
+            textActive: string;
+            textDisable: string;
+        };
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        white: string;
+        disabled: string;
+        red: string;
+        blue: string;
+        green: string;
+        greenOnGradient: string;
+        yellow: string;
+        grey: string;
+    };
+    toast: {
+        iconRed: string;
+        iconYellow: string;
+        iconGreen: string;
+        borderRed: string;
+        borderYellow: string;
+        borderGreen: string;
+        defaultBackgroundRed: string;
+        defaultBackgroundYellow: string;
+        defaultBackgroundGreen: string;
+        backgroundRed: string;
+        backgroundYellow: string;
+        backgroundGreen: string;
+    };
+};

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

@@ -1,5 +1,5 @@
 import type { Theme } from "../../globalTypings";
-export declare const DEFAULT_SIZE = 20;
+export declare const DEFAULT_SIZE = 18;
 export declare const checkboxContainer: (size?: number) => import("@emotion/react").SerializedStyles;
 export declare const labelContainer: (mode: Theme, size?: number, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const disabledLabel: import("@emotion/react").SerializedStyles;

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

@@ -35,5 +35,5 @@ export interface InputProps {
     patternType?: string;
     disabled?: boolean;
     invalid?: boolean;
-    inputGroupStyles?: SerializedStyles;
+    inputGroupStyles?: SerializedStyles | SerializedStyles[];
 }

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

@@ -1,8 +1,7 @@
 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;
 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/QuantityInput/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { QuantityInputProps } from "./typings";
+declare const QuantityInput: React.FC<QuantityInputProps>;
+export default QuantityInput;

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

@@ -0,0 +1,29 @@
+import { Theme } from "../../globalTypings";
+export declare const invalidShell: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const formLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const activeFormLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const errorFormLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const shell: (theme: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const inputGroup: (theme: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const inputRow: (disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const infoStrip: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const infoStripLeft: import("@emotion/react").SerializedStyles;
+export declare const infoStripRight: import("@emotion/react").SerializedStyles;
+export declare const focusedShell: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const formControl: (theme: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const infoCta: import("@emotion/react").SerializedStyles;
+export declare const infoText: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const errorText: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const bottomMeta: import("@emotion/react").SerializedStyles;
+export declare const unitTrigger: (theme: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const unitArrow: import("@emotion/react").SerializedStyles;
+export declare const unitWrap: import("@emotion/react").SerializedStyles;
+export declare const unitMenu: (theme: Theme, position?: {
+    top: number;
+    left: number;
+    minWidth: number;
+}) => import("@emotion/react").SerializedStyles;
+export declare const unitOverlay: import("@emotion/react").SerializedStyles;
+export declare const unitOption: (theme: Theme, selected?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const unitDivider: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const unitFooter: (theme: Theme) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,48 @@
+import { SerializedStyles } from "@emotion/react";
+import React, { KeyboardEvent, WheelEvent } from "react";
+import { Theme } from "../../globalTypings";
+import { InputTargetProps } from "../Input/typings";
+export interface QuantityInputOption {
+    label: string | React.JSX.Element;
+    value: string;
+    showInfoStrip?: boolean;
+}
+export interface QuantityInputInfoStrip {
+    left?: string | React.JSX.Element;
+    right?: string | React.JSX.Element;
+}
+export interface QuantityInputProps {
+    label?: string;
+    placeholder: string;
+    value: string | number;
+    onChange: (target: InputTargetProps) => void;
+    name?: string;
+    infoText?: string;
+    errorText?: string;
+    type?: "text" | "number" | "password" | "email";
+    style?: SerializedStyles;
+    cta?: {
+        label: string;
+        onClick: () => void;
+        style?: SerializedStyles;
+    };
+    onFocus?: () => void;
+    onBlur?: () => void;
+    autoComplete?: "on" | "off";
+    autoFocus?: boolean;
+    theme?: Theme;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onWheel?: (event: WheelEvent<HTMLInputElement>) => void;
+    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+    patternType?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    inputGroupStyles?: SerializedStyles;
+    options: QuantityInputOption[];
+    selectedUnit: string;
+    onUnitChange: (value: string) => void;
+    infoStrip?: QuantityInputInfoStrip;
+}
+export type { InputTargetProps };