enwawa-ui 1.11.2 → 1.13.0

package/lib/index.d.ts

@@ -1,30 +1,30 @@
 import React, { CSSProperties, ReactNode, ChangeEvent, JSXElementConstructor, ReactElement } from "react";
 import { ButtonShape, ButtonSize, ButtonType } from "antd/es/button";
-import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, InputNumberProps, SelectProps, TagProps, BreadcrumbProps, DropdownProps, MenuProps, ColProps, PaginationProps, RadioChangeEvent as _RadioChangeEvent1, TooltipProps, AlertProps, RowProps, LayoutProps, SiderProps, SpaceProps, FormProps, UploadProps, TableProps, ModalFuncProps, ModalProps as _ModalProps1, StepsProps, FormInstance } from "antd";
+import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, AlertProps, BreadcrumbProps, InputNumberProps, DropdownProps, MenuProps, ColProps, PaginationProps, RadioChangeEvent, TooltipProps, RowProps, LayoutProps, SiderProps, SpaceProps, FormProps, UploadProps, TableProps, ModalFuncProps, ModalProps as _ModalProps1, StepsProps, FormInstance, SelectProps, TagProps } from "antd";
 import { Dayjs } from "dayjs";
 import { IconComponentProps } from "@ant-design/icons/lib/components/Icon";
 import * as Icons from "@ant-design/icons";
-import { ValueType } from "@rc-component/mini-decimal";
-import { RadioChangeEvent } from "antd/es/radio";
-import { DefaultOptionType, LabeledValue } from "antd/es/select";
-import { SwitchProps } from "antd/lib";
-import { BlockProps, EllipsisConfig, BaseType } from "antd/es/typography/Base";
+import { TabsProps } from "antd/es/tabs";
+import { CardTabListType } from "antd/es/card";
+import { CardType } from "antd/es/card/Card";
 import { DotPosition } from "antd/es/carousel";
 import { CheckboxGroupProps } from "antd/es/checkbox/Group";
+import { ValueType } from "@rc-component/mini-decimal";
 import { NamePath, Store, StoreValue } from "antd/es/form/interface";
 import { Rule } from "antd/es/form";
 import { LabelTooltipType } from "antd/es/form/FormItemLabel";
-import { TabsProps } from "antd/es/tabs";
-import { CardTabListType } from "antd/es/card";
-import { CardType } from "antd/es/card/Card";
 import { Gutter } from "antd/es/grid/row";
+import { BlockProps, EllipsisConfig, BaseType } from "antd/es/typography/Base";
 import { DrawerProps } from "antd/es/drawer";
+import { DefaultOptionType, LabeledValue } from "antd/es/select";
 import { AnyObject } from "antd/es/_util/type";
 import { ColumnsType } from "antd/es/table";
 import { TableRowSelection } from "antd/es/table/interface";
 import { GoogleMap, GoogleMapProps } from "@react-google-maps/api";
 import { WatchOptions } from "rc-field-form/es/interface";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
+import { RadioChangeEvent as _RadioChangeEvent1 } from "antd/es/radio";
+import { SwitchProps } from "antd/lib";
 export interface AtAvatarProps {
     /**
      * This attribute defines the alternative text describing the image
@@ -516,885 +516,694 @@ export interface AtImageProps {
     preview?: ImageProps['preview'];
 }
 export const AtImage: React.FC<AtImageProps>;
-export interface AtLogoProps {
-    width?: number;
-    height?: number;
-    color?: 'violet' | 'gold' | 'white';
-    type?: 'logo' | 'isotype';
+export interface MlPlanCardProps {
+    title: string;
+    description: string;
+    $color?: 'violet' | 'gold' | 'white';
+    $type?: "secondary" | "success" | "warning" | "danger" | undefined;
+    $fontSize?: number;
 }
-export const AtLogo: React.FC<AtLogoProps>;
-export interface AtNumberInputProps {
+export const MlPlanCard: React.FC<MlPlanCardProps>;
+export interface OrActiveCardsProps {
+    items: Array<{
+        title: string;
+        description: string;
+    }> | undefined;
+    type?: MlPlanCardProps['$type'];
+    fontSize?: number;
+}
+export const OrActiveCards: React.FC<OrActiveCardsProps>;
+export interface OrAlertProps {
     /**
-     * The ID for input
+     * The action of Alert
      */
-    id?: string;
+    action?: AlertProps['action'];
     /**
-     * The label text displayed after (on the right side of) the input field
+     * Called when close animation is finished
      */
-    addonAfter?: ReactNode;
+    afterClose?: AlertProps['afterClose'];
     /**
-     * The label text displayed before (on the left side of) the input field
+     * Whether to show as banner
      */
-    addonBefore?: ReactNode;
+    banner?: boolean;
     /**
-     * If get focus when component mounted
+     * Custom close icon, >=5.7.0: close button will be hidden when setting to null or false
      */
-    autoFocus?: boolean;
+    closeIcon?: boolean | React.ReactNode;
     /**
-     * Whether has border style
+     * Closable text to show
      */
-    bordered?: boolean;
+    closable?: AlertProps['closable'];
     /**
-     * Whether to show +- controls, or set custom arrows icon
+     * Additional content of Alert
      */
-    controls?: boolean | {
-        upIcon?: React.ReactNode;
-        downIcon?: React.ReactNode;
-    };
+    description?: AlertProps['description'];
     /**
-     * Decimal separator
+     * Custom icon, effective when showIcon is true
      */
-    decimalSeparator?: string;
+    icon?: AlertProps['icon'];
     /**
-     * The initial value
+     * Content of Alert
      */
-    defaultValue?: number;
+    message?: AlertProps['message'];
     /**
-     * If disable the input
+     * Whether to show icon
      */
-    disabled?: boolean;
+    showIcon?: boolean;
     /**
-     * Specifies the format of the value presented
+     * Type of Alert styles, options: success, info, warning, error
      */
-    formatter?: InputNumberProps['formatter'];
+    type?: AlertProps['type'];
     /**
-     * If enable keyboard behavior
+     * Callback when Alert is closed
      */
-    keyboard?: boolean;
+    onClose?: AlertProps['onClose'];
     /**
-     * The max value
+     * Children of Alert
      */
-    max?: number;
+    children?: React.ReactNode;
+}
+export const OrAlert: React.FC<OrAlertProps>;
+export interface OrTabsProps {
     /**
-     * The min value
+     * The ID for input
      */
-    min?: number;
+    id?: string;
     /**
-     * Specifies the value extracted from formatter
+     * Current TabPane's key
      */
-    parser?: InputNumberProps['parser'];
+    activeKey?: string;
     /**
-     * The precision of input value. Will use formatter when config of formatter
+     * Customize add icon
      */
-    precision?: number;
+    addIcon?: React.ReactNode;
     /**
-     * If readonly the input
+     * Whether to change tabs with animation. Only works while tabPosition="top"
      */
-    readOnly?: boolean;
+    animated?: boolean | {
+        inkBar: boolean;
+        tabPane: boolean;
+    };
     /**
-     * Set validation status
+     * Centers tabs
      */
-    status?: 'error' | 'warning';
+    centered?: boolean;
     /**
-     * The prefix icon for the Input
+     * Initial active TabPane's key, if activeKey is not set
      */
-    prefix?: ReactNode;
+    defaultActiveKey?: string;
     /**
-     * The height of input box
+     * Hide plus icon or not. Only works while type="editable-card"
      */
-    size?: 'large' | 'middle' | 'small';
+    hideAdd?: boolean;
     /**
-     * The number to which the current value is increased or decreased. It can be an integer or decimal
+     * Configure tab content
      */
-    step?: number | string;
+    items?: TabsProps['items'];
     /**
-     * Set value as string to support high precision decimals. Will return string value by onChange
+     * The custom icon of ellipsis
      */
-    stringMode?: boolean;
+    moreIcon?: React.ReactNode;
     /**
-     * The current value
+     * className for more dropdown.
      */
-    value?: number;
+    popupClassName?: string;
     /**
-     * The callback triggered when the value is changed
+     * Preset tab bar size
      */
-    onChange?: (value: number | string | null) => void;
+    size?: 'large' | 'middle' | 'small';
     /**
-     * The callback function that is triggered when Enter key is pressed
+     * Extra content in tab bar
      */
-    onPressEnter?: (e: ChangeEvent<EventTarget>) => void;
+    tabBarExtraContent?: React.ReactNode | {
+        left?: React.ReactNode;
+        right?: React.ReactNode;
+    };
     /**
-     * The callback function that is triggered when click up or down buttons
+     * The gap between tabs
      */
-    onStep?: (value: number, info: {
-        offset: ValueType;
-        type: 'up' | 'down';
-    }) => void;
+    tabBarGutter?: number;
     /**
-     * Element width
+     * Position of tabs
      */
-    $width?: string;
+    tabPosition?: 'top' | 'right' | 'bottom' | 'left';
     /**
-     * Element height
+     * Whether destroy inactive TabPane when change tab
      */
-    $height?: string;
+    destroyInactiveTabPane?: boolean;
     /**
-     * Text align
+     * Basic style of tabs
      */
-    $textAlign?: 'left' | 'center' | 'right';
+    type?: 'line' | 'card' | 'editable-card';
     /**
-     * Font size
+     * Callback executed when active tab is changed
      */
-    $fontSize?: string;
+    onChange?: (activeKey: string) => void;
     /**
-     * on Input
+     * Callback executed when tab is added or removed. Only works while type="editable-card"
      */
-    onInput?: InputNumberProps['onInput'];
+    onEdit?: ((e: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: 'add' | 'remove') => void) | undefined;
     /**
-     * max length
+     * Callback executed when tab is clicked
      */
-    maxLength?: number;
+    onTabClick?: ((activeKey: string, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
     /**
-     * key down
+     * Trigger when tab scroll
      */
-    onKeyDown?: InputNumberProps['onKeyDown'];
+    onTabScroll?: (info: {
+        direction: 'left' | 'right' | 'top' | 'bottom';
+    }) => void;
     /**
-     * On focus
+     * Children of the tabs
      */
-    onFocus?: InputNumberProps['onFocus'];
+    children?: React.ReactElement | React.ReactElement[];
     /**
-     * placeholder
+     * hide extra content in tab bar
      */
-    placeholder?: string;
+    hideExtra?: boolean;
 }
-/**
- * Primary input UI component for user interaction
- */
-export const AtNumberInput: React.FC<AtNumberInputProps>;
-export interface AtTextInputProps {
+export const OrTabs: React.FC<OrTabsProps>;
+declare const colorMap: {
+    violet: string;
+    gold: string;
+    white: string;
+    gray: string;
+    lightGray: string;
+    black: string;
+};
+export interface MlCardProps {
     /**
-     * The label text displayed after (on the right side of) the input field
+     * The ID for input
      */
-    addonAfter?: ReactNode;
+    id?: string;
     /**
-     * The label text displayed before (on the left side of) the input field
+     * The action list, shows at the bottom of the Card
      */
-    addonBefore?: ReactNode;
+    actions?: Array<ReactNode>;
     /**
-     * If allow to remove input content with clear icon
+     * Current TabPane's key
      */
-    allowClear?: boolean | {
-        clearIcon?: ReactNode;
-    };
+    activeTabKey?: string;
     /**
-     * Whether has border style
+     * Inline style to apply to the card content	CSSProperties
      */
-    bordered?: boolean;
+    bodyStyle?: CSSProperties;
     /**
-     * The initial input content
+     * Toggles rendering of the border around the card
      */
-    defaultValue?: string;
+    bordered?: boolean;
     /**
-     * Whether the input is disabled
+     * Card cover
      */
-    disabled?: boolean;
+    cover?: ReactNode;
     /**
-     * The ID for input
+     * Initial active TabPane's key, if activeTabKey is not set
      */
-    id?: string;
+    defaultActiveTabKey?: string;
     /**
-     * The maximum number of characters in Input
+     * Content to render in the top-right corner of the card
      */
-    maxLength?: number;
+    extra?: ReactNode;
     /**
-     * Set validation status
+     * Lift up when hovering card
      */
-    status?: 'error' | 'warning' | undefined;
+    hoverable?: boolean;
     /**
-     * Whether to show character count
+     * Shows a loading indicator while the contents of the card are being fetched
      */
-    showCount?: boolean;
+    loading?: boolean;
     /**
-     * Placeholder text to display into the input
+     * Mark item as selected
      */
-    placeholder?: string;
+    selected?: boolean;
     /**
-     * The prefix icon for the Input
+     * Size of card
      */
-    prefix?: ReactNode;
+    size?: 'default' | 'small';
     /**
-     * The size of the input box. Note: in the context of a form, the middle size is used
+     * Extra content in tab bar
      */
-    size?: 'large' | 'middle' | 'small';
+    tabBarExtraContent?: ReactNode;
     /**
-     * The suffix icon for the Input
+     * List of TabPane's head
      */
-    suffix?: ReactNode;
+    tabList?: CardTabListType[];
     /**
-     * The input content value
+     * Tabs
      */
-    value?: string;
+    tabProps?: TabsProps;
     /**
-     * Callback when user input
+     * Card title
      */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-}
-/**
- * Primary input UI component for user interaction
- */
-export const AtTextInput: React.FC<AtTextInputProps>;
-type AtPasswordInputProp = AtTextInputProps & {
-    iconRender?: (visible: boolean) => React.ReactNode;
-};
-export const AtPasswordInput: React.FC<AtPasswordInputProp>;
-export interface AtRadioProps {
+    title?: ReactNode;
     /**
-     * The ID for input
+     * Card style type, can be set to inner or not set
      */
-    id?: string;
+    type?: CardType;
     /**
-     * Specifies whether the radio is selected
-     */
-    checked?: boolean;
     /**
-     * Specifies the initial state: whether or not the radio is selected
+     * Callback when card is clicked
      */
-    defaultChecked?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
-     * Disable radio
+     * Callback when tab is switched
      */
-    disabled?: boolean;
+    onTabChange?: (key: string) => void;
+    children?: React.ReactNode;
     /**
-     * According to value for comparison, to determine whether the selected
+     * Card width
      */
-    value?: any;
+    $width?: number;
     /**
-     * Children of the AtRadio
+     * border color for the card
      */
-    children?: React.ReactNode;
+    $borderColor?: 'violet' | 'gold' | 'white' | 'gray';
     /**
-     * On select option callback
+     * margin bottom for the card
      */
-    onChange?: ((e: RadioChangeEvent) => void) | undefined;
-}
-export const AtRadio: React.FC<AtRadioProps>;
-export interface AtRadioButtonsProps {
+    $marginBottom?: number;
     /**
-     * The title of the button
+     * padding for the card
      */
-    title: string;
+    $padding?: number;
     /**
-     * The value of the button
+     * background color for the card
      */
-    value: string;
+    $backgroundColor?: string;
 }
-export const AtRadioButtons: React.FC<AtRadioButtonsProps>;
-export interface AtResultProps {
+/**
+ * Primary input UI component for user interaction
+ */
+export const OrCard: React.FC<MlCardProps>;
+export interface OrTicketCardProps {
     /**
-     * Icon to show in result
+     * Image source
      */
-    icon?: React.ReactNode;
+    src?: string;
     /**
-     * Title to show in result
+     * Title children
      */
     title?: React.ReactNode;
     /**
-     * Extra content to show in result
+     * Text children
      */
-    extra?: React.ReactNode;
-}
-export const AtResult: React.FC<AtResultProps>;
-export interface AtSelectProps {
+    description?: React.ReactNode;
     /**
-     * The ID for input
+     * input value
      */
-    id?: string;
+    value?: number;
     /**
-     * Show clear button
+     * Button Value
      */
-    allowClear?: boolean;
+    buttonText?: string;
     /**
-     * Whether the current search will be cleared on selecting an item. Only applies when mode is set to multiple or tags
+     * display input
      */
-    autoClearSearchValue?: boolean;
+    type?: 'custom' | 'static';
     /**
-     * Get focus by default
+     * border color for the card
      */
-    autoFocus?: boolean;
+    $borderColor?: 'violet' | 'gold' | 'white' | 'gray';
     /**
-     * Whether has border style
+     * On change callback
      */
-    bordered?: boolean;
+    onChange?: (e: string | React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | number | null) => void;
+}
+export const OrTicketCard: React.FC<OrTicketCardProps>;
+export interface MlSubscriptionCardProps {
+    title: string;
+    description: string;
+    price: number;
+    value: string;
+    disabled?: boolean;
+}
+export const MlSubscriptionCard: React.FC<MlSubscriptionCardProps>;
+export interface MlBreadcrumbProps {
     /**
-     * The custom clear icon
+     * Custom item renderer
      */
-    clearIcon?: ReactNode;
+    itemRender?: BreadcrumbProps['itemRender'];
     /**
-     * Whether active first option by default
+     * Routing parameters
      */
-    defaultActiveFirstOption?: boolean;
+    params?: Record<string, string>;
     /**
-     * Initial selected option
+     * The routing stack information of router
      */
-    defaultValue?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    items: BreadcrumbProps['items'];
     /**
-     * Whether disabled select
+     * Separator character
      */
-    disabled?: boolean;
+    separator?: BreadcrumbProps['separator'];
+}
+export const MlBreadcrumb: React.FC<MlBreadcrumbProps>;
+export interface MlCarouselProps {
     /**
-     * Determine whether the popup menu and the select input are the same width. Default set
-     *           min-width same as input. Will ignore when value less than select width. false
-     *           will disable virtual scroll
+     * The ID for input
      */
-    popupMatchSelectWidth?: boolean | number;
+    id?: string;
     /**
-     * Customize dropdown content
+     * Whether to scroll automatically
      */
-    dropdownRender?: (originNode: ReactNode) => ReactElement<any, string | JSXElementConstructor<any>>;
+    autoplay?: boolean;
     /**
-     * The style of dropdown menu
+     * Delay between each auto scroll (in milliseconds)
      */
-    dropdownStyle?: CSSProperties;
+    autoplaySpeed?: number;
     /**
-     * Customize node label, value, options，groupLabel field name
+     * Center elements into carousel
      */
-    fieldNames?: object;
+    centerMode?: boolean;
     /**
-     * If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded
+     * The position of the dots, which can be one of top bottom left right
      */
-    filterOption?: SelectProps['filterOption'];
+    dotPosition?: DotPosition;
     /**
-     * Sort function for search options sorting, see Array.sort's
-     * compareFunction
+     * Whether to show the dots at the bottom of the gallery, object for dotsClass and any others
      */
-    filterSort?: (optionA: DefaultOptionType, optionB: DefaultOptionType) => number;
+    dots?: boolean;
     /**
-     * Whether to embed label in value, turn the format of value from string to { value: string,
-     *           label: ReactNode }
+     * Whether to wait for the animation when switching
      */
-    labelInValue?: boolean;
+    waitForAnimate?: boolean;
     /**
-     * Config popup height
+     * Transition interpolation function name
      */
-    listHeight?: number;
+    easing?: string;
     /**
-     * Indicate loading state
+     * Transition effect
      */
-    loading?: boolean;
+    effect?: 'scrollx' | 'fade';
     /**
-     * Select height
+     * Callback function called after the current index changes
      */
-    $height?: string;
+    afterChange?: (current: number) => void;
     /**
-     * Max tag count to show. responsive will cost render performance
+     * Callback function called before the current index changes
      */
-    maxTagCount?: number | 'responsive';
+    beforeChange?: (current: number, next: number) => void;
+    children?: React.ReactNode;
+}
+export const MlCarousel: React.FC<MlCarouselProps>;
+export interface MlCheckboxGroup {
     /**
-     * The custom menuItemSelected icon with multiple options
-     */
-    menuItemSelectedIcon?: ReactNode;
+     * Default selected value
+     * */
+    defaultValue?: (string | number)[];
     /**
-     * Set mode of Select
+     * If disable all checkboxes
      */
-    mode?: 'multiple' | 'tags';
+    disabled?: boolean;
     /**
-     * Specify content to show when no result matches
+     * The name property of all input[type="checkbox"] children
      */
-    notFoundContent?: ReactNode;
+    name?: string;
     /**
-     * Controlled open state of dropdown
+     * Specifies options
      */
-    open?: boolean;
+    options?: CheckboxGroupProps['options'];
     /**
-     * Which prop value of option will be used for filter if filterOption is true. If options is
-                set, it should be set to label
+     * Used for setting the currently selected value
      */
-    optionFilterProp?: string;
+    value?: (string | number | boolean)[];
     /**
-     * Which prop value of option will render as content of select. Example
+     * The callback function that is triggered when the state changes
      */
-    optionLabelProp?: string;
+    onChange?: CheckboxGroupProps['onChange'];
+}
+export const MlCheckboxGroup: React.FC<MlCheckboxGroup>;
+export interface AtNumberInputProps {
     /**
-     * Select options. Will get better perf than jsx definition
+     * The ID for input
      */
-    options?: SelectProps['options'];
+    id?: string;
     /**
-     * Placeholder of select
+     * The label text displayed after (on the right side of) the input field
      */
-    placeholder?: ReactNode;
+    addonAfter?: ReactNode;
     /**
-     * The current input "search" text
+     * The label text displayed before (on the left side of) the input field
      */
-    searchValue?: string;
+    addonBefore?: ReactNode;
     /**
-     * Whether select is searchable
+     * If get focus when component mounted
      */
-    showSearch?: boolean;
+    autoFocus?: boolean;
     /**
-     * Size of Select input
+     * Whether has border style
      */
-    size?: 'large' | 'middle' | 'small';
+    bordered?: boolean;
     /**
-     * Set validation status
+     * Whether to show +- controls, or set custom arrows icon
      */
-    status?: 'error' | 'warning';
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
     /**
-     * Styles
+     * Decimal separator
      */
-    style?: React.CSSProperties;
+    decimalSeparator?: string;
     /**
-     * Current selected option (considered as a immutable array)
+     * The initial value
      */
-    value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    defaultValue?: number;
     /**
-     * Called when blur
+     * If disable the input
      */
-    onBlur?: () => any;
+    disabled?: boolean;
     /**
-     * Called when select an option or input value change
+     * Specifies the format of the value presented
      */
-    onChange?: (value: any, option: DefaultOptionType | Array<DefaultOptionType>) => any;
+    formatter?: InputNumberProps['formatter'];
     /**
-     * Called when clear
+     * If enable keyboard behavior
      */
-    onClear?: () => any;
+    keyboard?: boolean;
     /**
-     * Called when an option is deselected, param is the selected option's value. Only called for
-     *           multiple or tags, effective in multiple or tags mode only
+     * The max value
      */
-    onDeselect?: (value: string | number | LabeledValue) => any;
+    max?: number;
     /**
-     * Called when dropdown open
+     * The min value
      */
-    onDropdownVisibleChange?: (open: boolean) => any;
+    min?: number;
     /**
-     * Called when focus
+     * Specifies the value extracted from formatter
      */
-    onFocus?: () => any;
+    parser?: InputNumberProps['parser'];
     /**
-     * Callback function that is fired when input changed
+     * The precision of input value. Will use formatter when config of formatter
      */
-    onSearch?: (value: string) => any;
+    precision?: number;
     /**
-     * Called when an option is selected, the params are option's value (or key) and option instance
+     * If readonly the input
      */
-    onSelect?: (value: string | number | LabeledValue, option: DefaultOptionType) => any;
+    readOnly?: boolean;
     /**
-     * Select width
+     * Set validation status
      */
-    $width?: string;
+    status?: 'error' | 'warning';
     /**
-     * Children
+     * The prefix icon for the Input
      */
-    children?: ReactNode;
+    prefix?: ReactNode;
     /**
-     * background color
+     * The height of input box
      */
-    backgroundColor?: 'violet' | 'white';
+    size?: 'large' | 'middle' | 'small';
     /**
-     * text color
+     * The number to which the current value is increased or decreased. It can be an integer or decimal
      */
-    $textColor?: 'white' | 'violet';
-}
-export const AtSelect: React.FC<AtSelectProps>;
-export interface AtSwitchProps extends SwitchProps {
+    step?: number | string;
     /**
-     * Whether get focus when component mounted
+     * Set value as string to support high precision decimals. Will return string value by onChange
      */
-    autoFocus?: boolean;
+    stringMode?: boolean;
     /**
-     * Determine whether the Switch is checked
+     * The current value
      */
-    checked?: boolean;
+    value?: number;
     /**
-     * Determine whether the Switch is checked
+     * The callback triggered when the value is changed
      */
-    disabled?: boolean;
+    onChange?: (value: number | string | null) => void;
     /**
-     * Trigger when the checked state is changing
+     * The callback function that is triggered when Enter key is pressed
      */
-    onChange?: SwitchProps['onChange'];
-}
-export const AtSwitch: React.FC<AtSwitchProps>;
-export interface AtTagProps {
+    onPressEnter?: (e: ChangeEvent<EventTarget>) => void;
     /**
-     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     * The callback function that is triggered when click up or down buttons
      */
-    closeIcon?: React.ReactNode;
+    onStep?: (value: number, info: {
+        offset: ValueType;
+        type: 'up' | 'down';
+    }) => void;
     /**
-     * Tag color
+     * Element width
      */
-    color?: TagProps['color'];
+    $width?: string;
     /**
-     * Set the icon of tag
+     * Element height
      */
-    icon?: React.ReactNode;
+    $height?: string;
     /**
-     * Whether has border style
+     * Text align
      */
-    bordered?: boolean;
+    $textAlign?: 'left' | 'center' | 'right';
     /**
-     * Callback executed when tag is closed
+     * Font size
      */
-    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    $fontSize?: string;
     /**
-     * Tag text
+     * on Input
      */
-    children?: React.ReactNode;
-}
-export const AtTag: React.FC<AtTagProps>;
-declare const colorMap: {
-    violet: string;
-    gold: string;
-    white: string;
-    gray: string;
-    lightGray: string;
-    black: string;
-};
-export interface AtTextProps {
+    onInput?: InputNumberProps['onInput'];
     /**
-     * Content type
+     * max length
      */
-    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    maxLength?: number;
     /**
-     * Whether the text is strong or not
+     * key down
      */
-    strong?: boolean;
+    onKeyDown?: InputNumberProps['onKeyDown'];
     /**
-     * Whether the text is italic or not
+     * On focus
      */
-    italic?: boolean;
+    onFocus?: InputNumberProps['onFocus'];
     /**
-     * Whether the text is underline or not
+     * placeholder
      */
-    underline?: boolean;
+    placeholder?: string;
+}
+/**
+ * Primary input UI component for user interaction
+ */
+export const AtNumberInput: React.FC<AtNumberInputProps>;
+interface UseInputOTPProps {
+    onChange?: (value: Array<string | undefined>) => void;
+}
+export const useCodeInput: ({ onChange, }: UseInputOTPProps) => {
+    handleChange: (index: number) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, index: number) => void;
+    otpValue: (string | undefined)[];
+};
+export interface CodeInputProps {
     /**
-     * Whether the text is mark or not
+     * number of digits (input) to show
      */
-    mark?: boolean;
+    digits?: number;
     /**
-     * If editable. Can control edit state when is object
+     * The input content value
      */
-    editable?: boolean | BlockProps['editable'];
+    value?: number;
     /**
-     * Whether to be copyable, customize it via setting an object
+     * Callback when user input
      */
-    copyable?: boolean | BlockProps['copyable'];
+    onChange?: (value: Array<string | undefined>) => void;
     /**
-     * Keyboard style
+     * font size of the input
      */
-    keyboard?: boolean;
+    fontSize?: string;
     /**
-     * Code style
+     * height of the input
      */
-    code?: boolean;
+    height?: string;
+}
+export const MlCodeInput: React.FC<CodeInputProps>;
+export interface AtDropdownProps extends DropdownProps {
     /**
-     * children
+     * If true, an arrow will be shown
      */
-    children?: React.ReactNode;
+    arrow?: boolean;
     /**
-     * Color of the text
+     * Whether to adjust popup placement automatically in case of overflow
      */
-    color?: keyof typeof colorMap;
+    autoAdjustOverflow?: boolean;
     /**
-     * Element width
+     * If true, the dropdown will be disabled
      */
-    $width?: number | string;
+    disabled?: boolean;
     /**
-     * font size
+     * A function used to render the dropdown menu
      */
-    $fontSize?: number;
+    dropdownRender?: (menu: ReactNode) => ReactNode;
     /**
-     * textAlign
+     * Style of the dropdown menu
      */
-    $textAlign?: "center" | "left" | "right" | "justify" | "initial" | "inherit" | "unset";
-}
-export const AtText: React.FC<AtTextProps>;
-export interface AtTitleProps {
+    overlayStyle?: React.CSSProperties;
     /**
-     * Code style
+     * Placement of the dropdown menu. Possible values: 'topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'
      */
-    code?: boolean;
+    placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
     /**
-     * Whether to be copyable, customize it via setting an object
+     * Triggers for showing the overlay. Possible values: 'click', 'hover', 'contextMenu'
      */
-    copyable?: boolean | BlockProps['copyable'];
+    trigger?: ('click' | 'hover' | 'contextMenu')[];
     /**
-     * Deleted line style
+     * If true, the dropdown is opened
      */
-    delete?: boolean;
+    open?: boolean;
     /**
-     * Disabled content
+     * A function to be called when visible changes
      */
-    disabled?: boolean;
+    onOpenChange?: (visible: boolean) => void;
     /**
-     * If editable. Can control edit state when is object
+     * Child elements of the Dropdown component
      */
-    editable?: boolean | BlockProps['editable'];
+    children?: ReactNode;
     /**
-     * Display ellipsis when text overflows, can configure rows and expandable by using object
+     * Menu items
      */
-    ellipsis?: boolean | EllipsisConfig;
+    menu?: MenuProps;
     /**
-     * Set content importance. Match with h1, h2, h3, h4, h5
+     * If true, the loading icon will be shown
      */
-    level?: 1 | 2 | 3 | 4 | 5;
+    loading?: boolean;
     /**
-     * Whether the text is mark or not
+     * If true, the dropdown will be shown as a button
      */
-    mark?: boolean;
+    button?: boolean;
     /**
-     * Set the handler to handle click event
+     * when button is true, the onClick function will be called
      */
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    onClick?: () => void;
+}
+export const MIDropdown: React.FC<AtDropdownProps>;
+export interface MlFromItemProps {
     /**
-     * Whether the text is italic or not
+     * Set the dependencies field by names
      */
-    italic?: boolean;
+    dependencies?: string[];
     /**
-     * Content type
+     * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time
      */
-    type?: BaseType;
+    extra?: string;
     /**
-     * Whether the text is underline or not
+     * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input
      */
-    underline?: boolean;
+    hasFeedback?: boolean;
     /**
-     * Additional content to include
+     * The prompt message. If not provided, the prompt message will be generated by the validation rule.
      */
-    children?: ReactNode;
+    help?: string;
     /**
-     * Color of the title
+     * Whether to hide Form.Item (still collect and validate value)
      */
-    color?: 'violet' | 'gold' | 'white';
+    hidden?: boolean;
     /**
-     * Margin
+     * Config sub default value. Form initialValues get higher priority when conflict
      */
-    $margin?: string;
+    initialValue?: string;
     /**
-     * Text Align
+     * Label text
      */
-    $textAlign?: string;
-}
-export const AtTitle: React.FC<AtTitleProps>;
-export interface MlBreadcrumbProps {
+    label?: string;
     /**
-     * Custom item renderer
+     * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>. You can set labelCol on Form which will not affect nest Item. If both exists, use Item first
      */
-    itemRender?: BreadcrumbProps['itemRender'];
-    /**
-     * Routing parameters
-     */
-    params?: Record<string, string>;
-    /**
-     * The routing stack information of router
-     */
-    items: BreadcrumbProps['items'];
-    /**
-     * Separator character
-     */
-    separator?: BreadcrumbProps['separator'];
-}
-export const MlBreadcrumb: React.FC<MlBreadcrumbProps>;
-export interface MlCarouselProps {
-    /**
-     * The ID for input
-     */
-    id?: string;
-    /**
-     * Whether to scroll automatically
-     */
-    autoplay?: boolean;
-    /**
-     * Delay between each auto scroll (in milliseconds)
-     */
-    autoplaySpeed?: number;
-    /**
-     * Center elements into carousel
-     */
-    centerMode?: boolean;
-    /**
-     * The position of the dots, which can be one of top bottom left right
-     */
-    dotPosition?: DotPosition;
-    /**
-     * Whether to show the dots at the bottom of the gallery, object for dotsClass and any others
-     */
-    dots?: boolean;
-    /**
-     * Whether to wait for the animation when switching
-     */
-    waitForAnimate?: boolean;
-    /**
-     * Transition interpolation function name
-     */
-    easing?: string;
-    /**
-     * Transition effect
-     */
-    effect?: 'scrollx' | 'fade';
-    /**
-     * Callback function called after the current index changes
-     */
-    afterChange?: (current: number) => void;
-    /**
-     * Callback function called before the current index changes
-     */
-    beforeChange?: (current: number, next: number) => void;
-    children?: React.ReactNode;
-}
-export const MlCarousel: React.FC<MlCarouselProps>;
-export interface MlCheckboxGroup {
-    /**
-     * Default selected value
-     * */
-    defaultValue?: (string | number)[];
-    /**
-     * If disable all checkboxes
-     */
-    disabled?: boolean;
-    /**
-     * The name property of all input[type="checkbox"] children
-     */
-    name?: string;
-    /**
-     * Specifies options
-     */
-    options?: CheckboxGroupProps['options'];
-    /**
-     * Used for setting the currently selected value
-     */
-    value?: (string | number | boolean)[];
-    /**
-     * The callback function that is triggered when the state changes
-     */
-    onChange?: CheckboxGroupProps['onChange'];
-}
-export const MlCheckboxGroup: React.FC<MlCheckboxGroup>;
-interface UseInputOTPProps {
-    onChange?: (value: Array<string | undefined>) => void;
-}
-export const useCodeInput: ({ onChange, }: UseInputOTPProps) => {
-    handleChange: (index: number) => void;
-    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
-    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, index: number) => void;
-    otpValue: (string | undefined)[];
-};
-export interface CodeInputProps {
-    /**
-     * number of digits (input) to show
-     */
-    digits?: number;
-    /**
-     * The input content value
-     */
-    value?: number;
-    /**
-     * Callback when user input
-     */
-    onChange?: (value: Array<string | undefined>) => void;
-    /**
-     * font size of the input
-     */
-    fontSize?: string;
-    /**
-     * height of the input
-     */
-    height?: string;
-}
-export const MlCodeInput: React.FC<CodeInputProps>;
-export interface AtDropdownProps extends DropdownProps {
-    /**
-     * If true, an arrow will be shown
-     */
-    arrow?: boolean;
-    /**
-     * Whether to adjust popup placement automatically in case of overflow
-     */
-    autoAdjustOverflow?: boolean;
-    /**
-     * If true, the dropdown will be disabled
-     */
-    disabled?: boolean;
-    /**
-     * A function used to render the dropdown menu
-     */
-    dropdownRender?: (menu: ReactNode) => ReactNode;
-    /**
-     * Style of the dropdown menu
-     */
-    overlayStyle?: React.CSSProperties;
-    /**
-     * Placement of the dropdown menu. Possible values: 'topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'
-     */
-    placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
-    /**
-     * Triggers for showing the overlay. Possible values: 'click', 'hover', 'contextMenu'
-     */
-    trigger?: ('click' | 'hover' | 'contextMenu')[];
-    /**
-     * If true, the dropdown is opened
-     */
-    open?: boolean;
-    /**
-     * A function to be called when visible changes
-     */
-    onOpenChange?: (visible: boolean) => void;
-    /**
-     * Child elements of the Dropdown component
-     */
-    children?: ReactNode;
-    /**
-     * Menu items
-     */
-    menu?: MenuProps;
-    /**
-     * If true, the loading icon will be shown
-     */
-    loading?: boolean;
-    /**
-     * If true, the dropdown will be shown as a button
-     */
-    button?: boolean;
-    /**
-     * when button is true, the onClick function will be called
-     */
-    onClick?: () => void;
-}
-export const MIDropdown: React.FC<AtDropdownProps>;
-export interface MlFromItemProps {
-    /**
-     * Set the dependencies field by names
-     */
-    dependencies?: string[];
-    /**
-     * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time
-     */
-    extra?: string;
-    /**
-     * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input
-     */
-    hasFeedback?: boolean;
-    /**
-     * The prompt message. If not provided, the prompt message will be generated by the validation rule.
-     */
-    help?: string;
-    /**
-     * Whether to hide Form.Item (still collect and validate value)
-     */
-    hidden?: boolean;
-    /**
-     * Config sub default value. Form initialValues get higher priority when conflict
-     */
-    initialValue?: string;
-    /**
-     * Label text
-     */
-    label?: string;
-    /**
-     * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>. You can set labelCol on Form which will not affect nest Item. If both exists, use Item first
-     */
-    labelCol?: ColProps;
+    labelCol?: ColProps;
     /**
      * The default validate field info
      */
@@ -1557,14 +1366,6 @@ export interface MlPaginationProps {
     onShowSizeChange?: (current: number, size: number) => void;
 }
 export const MlPagination: React.FC<MlPaginationProps>;
-export interface MlPlanCardProps {
-    title: string;
-    description: string;
-    $color?: 'violet' | 'gold' | 'white';
-    $type?: "secondary" | "success" | "warning" | "danger" | undefined;
-    $fontSize?: number;
-}
-export const MlPlanCard: React.FC<MlPlanCardProps>;
 export interface MlRadioGroupProps {
     /**
      * The ID for input
@@ -1609,7 +1410,7 @@ export interface MlRadioGroupProps {
     /**
      * The callback function that is triggered when the state changes
      */
-    onChange?: (e: _RadioChangeEvent1) => void;
+    onChange?: (e: RadioChangeEvent) => void;
     /**
      * border box
      */
@@ -1620,497 +1421,263 @@ export interface MlRadioGroupProps {
     padding?: string;
 }
 export const MlRadioGroup: React.FC<MlRadioGroupProps>;
-export interface MlSearchBoxProps extends AtTextInputProps {
+export interface AtTextInputProps {
     /**
-     * Prefix on search Input
+     * The label text displayed after (on the right side of) the input field
      */
-    inputPrefixCls?: string;
+    addonAfter?: ReactNode;
     /**
-     * On search function
+     * The label text displayed before (on the left side of) the input field
      */
-    onSearch?: (value: string, event?: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    addonBefore?: ReactNode;
     /**
-     * Input loading on search
+     * If allow to remove input content with clear icon
      */
-    loading?: boolean;
+    allowClear?: boolean | {
+        clearIcon?: ReactNode;
+    };
     /**
-     * Element for enter button
+     * Whether has border style
      */
-    enterButton?: React.ReactNode;
-}
-export const MlSearchBox: React.FC<MlSearchBoxProps>;
-export interface MlSubscriptionCardProps {
-    title: string;
-    description: string;
-    price: number;
-    value: string;
-    disabled?: boolean;
-}
-export const MlSubscriptionCard: React.FC<MlSubscriptionCardProps>;
-export interface MlTooltipProps {
+    bordered?: boolean;
     /**
-     * Children component
+     * The initial input content
      */
-    children?: React.ReactNode;
+    defaultValue?: string;
     /**
-     * Tooltip text
+     * Whether the input is disabled
      */
-    title?: string;
+    disabled?: boolean;
     /**
-     * Tooltip trigger mode. Could be multiple by passing an array
+     * The ID for input
      */
-    trigger?: TooltipProps['trigger'];
+    id?: string;
     /**
-     * The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
+     * The maximum number of characters in Input
      */
-    placement?: TooltipProps['placement'];
-}
-export const MlTooltip: React.FC<MlTooltipProps>;
-export interface OrActiveCardsProps {
-    items: Array<{
-        title: string;
-        description: string;
-    }> | undefined;
-    type?: MlPlanCardProps['$type'];
-    fontSize?: number;
-}
-export const OrActiveCards: React.FC<OrActiveCardsProps>;
-export interface OrAlertProps {
+    maxLength?: number;
     /**
-     * The action of Alert
+     * Set validation status
      */
-    action?: AlertProps['action'];
+    status?: 'error' | 'warning' | undefined;
     /**
-     * Called when close animation is finished
+     * Whether to show character count
      */
-    afterClose?: AlertProps['afterClose'];
+    showCount?: boolean;
     /**
-     * Whether to show as banner
+     * Placeholder text to display into the input
      */
-    banner?: boolean;
+    placeholder?: string;
     /**
-     * Custom close icon, >=5.7.0: close button will be hidden when setting to null or false
+     * The prefix icon for the Input
      */
-    closeIcon?: boolean | React.ReactNode;
+    prefix?: ReactNode;
     /**
-     * Closable text to show
+     * The size of the input box. Note: in the context of a form, the middle size is used
      */
-    closable?: AlertProps['closable'];
+    size?: 'large' | 'middle' | 'small';
     /**
-     * Additional content of Alert
+     * The suffix icon for the Input
      */
-    description?: AlertProps['description'];
+    suffix?: ReactNode;
     /**
-     * Custom icon, effective when showIcon is true
+     * The input content value
      */
-    icon?: AlertProps['icon'];
+    value?: string;
     /**
-     * Content of Alert
+     * Callback when user input
      */
-    message?: AlertProps['message'];
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * Primary input UI component for user interaction
+ */
+export const AtTextInput: React.FC<AtTextInputProps>;
+export interface MlSearchBoxProps extends AtTextInputProps {
     /**
-     * Whether to show icon
+     * Prefix on search Input
      */
-    showIcon?: boolean;
+    inputPrefixCls?: string;
     /**
-     * Type of Alert styles, options: success, info, warning, error
+     * On search function
      */
-    type?: AlertProps['type'];
+    onSearch?: (value: string, event?: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * Callback when Alert is closed
+     * Input loading on search
      */
-    onClose?: AlertProps['onClose'];
+    loading?: boolean;
     /**
-     * Children of Alert
+     * Element for enter button
      */
-    children?: React.ReactNode;
+    enterButton?: React.ReactNode;
 }
-export const OrAlert: React.FC<OrAlertProps>;
-export interface OrTabsProps {
+export const MlSearchBox: React.FC<MlSearchBoxProps>;
+export interface MlTooltipProps {
     /**
-     * The ID for input
+     * Children component
      */
-    id?: string;
+    children?: React.ReactNode;
     /**
-     * Current TabPane's key
+     * Tooltip text
      */
-    activeKey?: string;
+    title?: string;
     /**
-     * Customize add icon
+     * Tooltip trigger mode. Could be multiple by passing an array
      */
-    addIcon?: React.ReactNode;
+    trigger?: TooltipProps['trigger'];
     /**
-     * Whether to change tabs with animation. Only works while tabPosition="top"
+     * The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
      */
-    animated?: boolean | {
-        inkBar: boolean;
-        tabPane: boolean;
-    };
+    placement?: TooltipProps['placement'];
+}
+export const MlTooltip: React.FC<MlTooltipProps>;
+export interface OrPlanCardsProps {
     /**
-     * Centers tabs
+     * Active subscriptions
      */
-    centered?: boolean;
+    activeSubscriptions?: Array<{
+        title: string;
+        description: string;
+    }>;
     /**
-     * Initial active TabPane's key, if activeKey is not set
+     * subscriptions onChange event
      */
-    defaultActiveKey?: string;
+    subscriptionOnChange?: (e: RadioChangeEvent) => void;
     /**
-     * Hide plus icon or not. Only works while type="editable-card"
+     * Plans and Subscriptions
      */
-    hideAdd?: boolean;
+    subscriptions: Array<MlSubscriptionCardProps>;
+}
+export const OrPlanCards: React.FC<OrPlanCardsProps>;
+export interface OrCoinTableProps {
     /**
-     * Configure tab content
+     * List of coins available
      */
-    items?: TabsProps['items'];
+    coinsAvailable: Array<OrTicketCardProps>;
     /**
-     * The custom icon of ellipsis
+     * coins onClick | onChange event
      */
-    moreIcon?: React.ReactNode;
+    coinsOnChange?: OrTicketCardProps['onChange'];
     /**
-     * className for more dropdown.
+     * item selected
      */
-    popupClassName?: string;
+    itemSelected?: number;
+}
+export const OrCoinTable: React.FC<OrCoinTableProps>;
+export interface OrTicketsProps {
     /**
-     * Preset tab bar size
+     * Tickets Title
      */
-    size?: 'large' | 'middle' | 'small';
+    title?: string;
     /**
-     * Extra content in tab bar
+     * Active Tickets
      */
-    tabBarExtraContent?: React.ReactNode | {
-        left?: React.ReactNode;
-        right?: React.ReactNode;
-    };
+    activeTickets?: Array<{
+        title: string;
+        description: string;
+    }>;
     /**
-     * The gap between tabs
+     * Coins available
      */
-    tabBarGutter?: number;
+    coinsAvailable: Array<OrTicketCardProps>;
     /**
-     * Position of tabs
+     * coins onClick | onChange event
      */
-    tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+    onChange?: OrTicketCardProps['onChange'];
     /**
-     * Whether destroy inactive TabPane when change tab
+     * item selected
      */
-    destroyInactiveTabPane?: boolean;
+    itemSelected?: number;
+}
+export const OrTickets: React.FC<OrTicketsProps>;
+export interface OrRowProps {
     /**
-     * Basic style of tabs
+     * The ID for input
      */
-    type?: 'line' | 'card' | 'editable-card';
+    id?: string;
     /**
-     * Callback executed when active tab is changed
+     * Vertical alignment
      */
-    onChange?: (activeKey: string) => void;
+    align?: RowProps['align'];
     /**
-     * Callback executed when tab is added or removed. Only works while type="editable-card"
+     * Container background source
      */
-    onEdit?: ((e: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: 'add' | 'remove') => void) | undefined;
+    $backgroundSrc?: string;
     /**
-     * Callback executed when tab is clicked
+     * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]
      */
-    onTabClick?: ((activeKey: string, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    gutter?: Gutter | object | [Gutter, Gutter];
     /**
-     * Trigger when tab scroll
+     * Horizontal arrangement
      */
-    onTabScroll?: (info: {
-        direction: 'left' | 'right' | 'top' | 'bottom';
-    }) => void;
+    justify?: RowProps['justify'];
     /**
-     * Children of the tabs
+     * Auto wrap line
      */
-    children?: React.ReactElement | React.ReactElement[];
+    wrap?: boolean;
     /**
-     * hide extra content in tab bar
+     * Children of OrRow
      */
-    hideExtra?: boolean;
-}
-export const OrTabs: React.FC<OrTabsProps>;
-export interface MlCardProps {
+    children?: React.ReactNode;
     /**
-     * The ID for input
+     * Container padding top in px
      */
-    id?: string;
+    $paddingTop?: number;
     /**
-     * The action list, shows at the bottom of the Card
+     * Container padding Bottom in px
      */
-    actions?: Array<ReactNode>;
+    $paddingBottom?: number;
     /**
-     * Current TabPane's key
+     * Container padding Right in px
      */
-    activeTabKey?: string;
+    $paddingRight?: number;
     /**
-     * Inline style to apply to the card content	CSSProperties
+     * Container padding Left in px
      */
-    bodyStyle?: CSSProperties;
+    $paddingLeft?: number;
     /**
-     * Toggles rendering of the border around the card
+     * Container padding Vertical in px
      */
-    bordered?: boolean;
+    $paddingVertical?: number;
     /**
-     * Card cover
+     * Container padding Horizontal in px
      */
-    cover?: ReactNode;
+    $paddingHorizontal?: number;
     /**
-     * Initial active TabPane's key, if activeTabKey is not set
+     * gap
      */
-    defaultActiveTabKey?: string;
+    $gap?: number;
     /**
-     * Content to render in the top-right corner of the card
+     * Custom styles properties
      */
-    extra?: ReactNode;
+    style?: React.CSSProperties;
     /**
-     * Lift up when hovering card
+     * On click event
      */
-    hoverable?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
-     * Shows a loading indicator while the contents of the card are being fetched
+     * Background color
      */
-    loading?: boolean;
+    $backgroundColor?: string;
+}
+export const OrRow: React.FC<OrRowProps>;
+export interface OrTwoButtons {
     /**
-     * Mark item as selected
+     * Cancel button title
      */
-    selected?: boolean;
+    leftButtonTitle: string;
     /**
-     * Size of card
+     * Confirm button title
      */
-    size?: 'default' | 'small';
+    rightButtonTitle: string;
     /**
-     * Extra content in tab bar
+     * Cancel onClick Event
      */
-    tabBarExtraContent?: ReactNode;
+    leftButtonOnClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     /**
-     * List of TabPane's head
+     * Confirm onClick Event
      */
-    tabList?: CardTabListType[];
-    /**
-     * Tabs
-     */
-    tabProps?: TabsProps;
-    /**
-     * Card title
-     */
-    title?: ReactNode;
-    /**
-     * Card style type, can be set to inner or not set
-     */
-    type?: CardType;
-    /**
-    /**
-     * Callback when card is clicked
-     */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /**
-     * Callback when tab is switched
-     */
-    onTabChange?: (key: string) => void;
-    children?: React.ReactNode;
-    /**
-     * Card width
-     */
-    $width?: number;
-    /**
-     * border color for the card
-     */
-    $borderColor?: 'violet' | 'gold' | 'white' | 'gray';
-    /**
-     * margin bottom for the card
-     */
-    $marginBottom?: number;
-    /**
-     * padding for the card
-     */
-    $padding?: number;
-    /**
-     * background color for the card
-     */
-    $backgroundColor?: string;
-}
-/**
- * Primary input UI component for user interaction
- */
-export const OrCard: React.FC<MlCardProps>;
-export interface OrTicketCardProps {
-    /**
-     * Image source
-     */
-    src?: string;
-    /**
-     * Title children
-     */
-    title?: React.ReactNode;
-    /**
-     * Text children
-     */
-    description?: React.ReactNode;
-    /**
-     * input value
-     */
-    value?: number;
-    /**
-     * Button Value
-     */
-    buttonText?: string;
-    /**
-     * display input
-     */
-    type?: 'custom' | 'static';
-    /**
-     * border color for the card
-     */
-    $borderColor?: 'violet' | 'gold' | 'white' | 'gray';
-    /**
-     * On change callback
-     */
-    onChange?: (e: string | React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | number | null) => void;
-}
-export const OrTicketCard: React.FC<OrTicketCardProps>;
-export interface OrPlanCardsProps {
-    /**
-     * Active subscriptions
-     */
-    activeSubscriptions?: Array<{
-        title: string;
-        description: string;
-    }>;
-    /**
-     * subscriptions onChange event
-     */
-    subscriptionOnChange?: (e: _RadioChangeEvent1) => void;
-    /**
-     * Plans and Subscriptions
-     */
-    subscriptions: Array<MlSubscriptionCardProps>;
-}
-export const OrPlanCards: React.FC<OrPlanCardsProps>;
-export interface OrCoinTableProps {
-    /**
-     * List of coins available
-     */
-    coinsAvailable: Array<OrTicketCardProps>;
-    /**
-     * coins onClick | onChange event
-     */
-    coinsOnChange?: OrTicketCardProps['onChange'];
-    /**
-     * item selected
-     */
-    itemSelected?: number;
-}
-export const OrCoinTable: React.FC<OrCoinTableProps>;
-export interface OrTicketsProps {
-    /**
-     * Tickets Title
-     */
-    title?: string;
-    /**
-     * Active Tickets
-     */
-    activeTickets?: Array<{
-        title: string;
-        description: string;
-    }>;
-    /**
-     * Coins available
-     */
-    coinsAvailable: Array<OrTicketCardProps>;
-    /**
-     * coins onClick | onChange event
-     */
-    onChange?: OrTicketCardProps['onChange'];
-    /**
-     * item selected
-     */
-    itemSelected?: number;
-}
-export const OrTickets: React.FC<OrTicketsProps>;
-export interface OrRowProps {
-    /**
-     * The ID for input
-     */
-    id?: string;
-    /**
-     * Vertical alignment
-     */
-    align?: RowProps['align'];
-    /**
-     * Container background source
-     */
-    $backgroundSrc?: string;
-    /**
-     * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]
-     */
-    gutter?: Gutter | object | [Gutter, Gutter];
-    /**
-     * Horizontal arrangement
-     */
-    justify?: RowProps['justify'];
-    /**
-     * Auto wrap line
-     */
-    wrap?: boolean;
-    /**
-     * Children of OrRow
-     */
-    children?: React.ReactNode;
-    /**
-     * Container padding top in px
-     */
-    $paddingTop?: number;
-    /**
-     * Container padding Bottom in px
-     */
-    $paddingBottom?: number;
-    /**
-     * Container padding Right in px
-     */
-    $paddingRight?: number;
-    /**
-     * Container padding Left in px
-     */
-    $paddingLeft?: number;
-    /**
-     * Container padding Vertical in px
-     */
-    $paddingVertical?: number;
-    /**
-     * Container padding Horizontal in px
-     */
-    $paddingHorizontal?: number;
-    /**
-     * gap
-     */
-    $gap?: number;
-    /**
-     * Custom styles properties
-     */
-    style?: React.CSSProperties;
-    /**
-     * On click event
-     */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /**
-     * Background color
-     */
-    $backgroundColor?: string;
-}
-export const OrRow: React.FC<OrRowProps>;
-export interface OrTwoButtons {
-    /**
-     * Cancel button title
-     */
-    leftButtonTitle: string;
-    /**
-     * Confirm button title
-     */
-    rightButtonTitle: string;
-    /**
-     * Cancel onClick Event
-     */
-    leftButtonOnClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    /**
-     * Confirm onClick Event
-     */
-    rightButtonOnClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    rightButtonOnClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     /**
      * gap between buttons
      */
@@ -2183,7 +1750,7 @@ export interface OrAssignBalanceProps {
     /**
      * subscriptions onChange event
      */
-    subscriptionOnChange?: ((e: _RadioChangeEvent1) => void);
+    subscriptionOnChange?: ((e: RadioChangeEvent) => void);
     /**
      * coins onClick | onChange event
      */
@@ -2308,31 +1875,90 @@ export interface OrContentProps extends LayoutProps {
     $main?: boolean;
 }
 export const OrContent: React.FC<OrContentProps>;
-export type Size = 'large' | 'middle' | 'small';
-declare const sizes: {
-    [key in Size]: {
-        fontSize: number;
-        height: number;
-    };
-};
-export interface OrCopyInfoProps {
-    text?: string;
-    copyable?: boolean;
-    size?: keyof typeof sizes;
-    id?: string;
-    onCopy?: () => {};
-    textProps?: AtTextProps;
-}
-export const OrCopyInfo: React.FC<OrCopyInfoProps>;
-export interface OrCountryCardProps {
+export interface AtTextProps {
     /**
-     * The ID for card
+     * Content type
      */
-    id?: string;
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
     /**
-     * Country name
-     **/
-    name: string;
+     * Whether the text is strong or not
+     */
+    strong?: boolean;
+    /**
+     * Whether the text is italic or not
+     */
+    italic?: boolean;
+    /**
+     * Whether the text is underline or not
+     */
+    underline?: boolean;
+    /**
+     * Whether the text is mark or not
+     */
+    mark?: boolean;
+    /**
+     * If editable. Can control edit state when is object
+     */
+    editable?: boolean | BlockProps['editable'];
+    /**
+     * Whether to be copyable, customize it via setting an object
+     */
+    copyable?: boolean | BlockProps['copyable'];
+    /**
+     * Keyboard style
+     */
+    keyboard?: boolean;
+    /**
+     * Code style
+     */
+    code?: boolean;
+    /**
+     * children
+     */
+    children?: React.ReactNode;
+    /**
+     * Color of the text
+     */
+    color?: keyof typeof colorMap;
+    /**
+     * Element width
+     */
+    $width?: number | string;
+    /**
+     * font size
+     */
+    $fontSize?: number;
+    /**
+     * textAlign
+     */
+    $textAlign?: "center" | "left" | "right" | "justify" | "initial" | "inherit" | "unset";
+}
+export const AtText: React.FC<AtTextProps>;
+export type Size = 'large' | 'middle' | 'small';
+declare const sizes: {
+    [key in Size]: {
+        fontSize: number;
+        height: number;
+    };
+};
+export interface OrCopyInfoProps {
+    text?: string;
+    copyable?: boolean;
+    size?: keyof typeof sizes;
+    id?: string;
+    onCopy?: () => {};
+    textProps?: AtTextProps;
+}
+export const OrCopyInfo: React.FC<OrCopyInfoProps>;
+export interface OrCountryCardProps {
+    /**
+     * The ID for card
+     */
+    id?: string;
+    /**
+     * Country name
+     **/
+    name: string;
     /**
      * Country flag url
      **/
@@ -2846,7 +2472,7 @@ export interface OrFormInLineItem {
     /**
      * Type of components available for the form
      */
-    component: 'radio' | 'number-input' | 'checkbox' | 'select' | 'select-multiple' | 'text' | 'phone' | 'date-picker' | 'date-range-picker' | 'cvc' | 'name' | 'select-input' | 'info' | 'copy-info' | 'file-input';
+    component: 'radio' | 'number-input' | 'checkbox' | 'select' | 'select-multiple' | 'text' | 'phone' | 'date-picker' | 'date-range-picker' | 'cvc' | 'name' | 'select-input' | 'info' | 'status-info' | 'file-input' | 'copy-info';
     /**
      * Label of the field
      */
@@ -2912,6 +2538,7 @@ export interface OrFormInLineItem {
      * Whether the button is full width or not
      */
     fullWidth?: boolean;
+    type?: 'success' | 'warning' | 'danger' | 'info';
 }
 export interface OrFormItemsInlineProps {
     inputs?: Array<OrFormInLineItem | OrFormInLineItem[]>;
@@ -3669,69 +3296,310 @@ export interface TmLoginPhoneCodeProps {
     /**
      * Countdown value
      */
-    countdownValue?: number;
+    countdownValue?: number;
+    /**
+     * Countdown format
+     */
+    countdownFormat?: string;
+    /**
+     * Indicate if the count down ended
+     */
+    countdownEnded?: boolean;
+    /**
+     * Callback triggered when countdown ends
+     */
+    onFinishCountdown?: () => void;
+    /**
+     * Countdown text part
+     */
+    countdownText?: [string, string];
+    /**
+     * Send again text
+     */
+    sendAgainText?: string;
+    /**
+     * Function to call when resend is press it
+     */
+    onResendPress?: () => void;
+}
+export const TmLoginPhoneCode: React.FC<TmLoginPhoneCodeProps>;
+export interface MarkersGroup {
+    color?: OrMarkProps['color'];
+    backgroundColor?: string;
+    size?: OrMarkProps['size'];
+    marks: OrMarkProps[];
+    polyLine: boolean;
+}
+export interface TmMapPageProps {
+    rightDrawer?: OrDrawerProps;
+    topLeftSelect: AtSelectProps;
+    topLeftButton?: AtButtonProps;
+    map: GoogleMapProps & {
+        GOOGLE_MAPS_API_KEY: string;
+        ref?: React.RefObject<GoogleMap>;
+    };
+    staticMarkers?: MarkersGroup[];
+    realtimeMarkers?: MarkersGroup[];
+}
+export const TmMapPage: React.FC<TmMapPageProps>;
+export const useMessage: () => readonly [import("antd/es/message/interface").MessageInstance, import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>];
+export interface ModalProps extends ModalFuncProps {
+    variant: 'confirm' | 'warning' | 'info' | 'error';
+}
+export const useModal: () => {
+    show: (config: ModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)) => void;
+    } & {
+        then<T>(resolve: (confirmed: boolean) => T, reject: VoidFunction): Promise<T>;
+    };
+    setVariant: import("react").Dispatch<import("react").SetStateAction<"warning" | "error" | "info" | "confirm">>;
+    contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};
+export const useForm: <T = any>() => [import("antd").FormInstance<T>];
+export const useFormWatch: <T = any>(name: string, form?: FormInstance | WatchOptions<FormInstance>) => T;
+export interface TmRechargePageProps<FormType = any> {
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * page subtitle
+     */
+    subtitle?: string;
+    /**
+     * page subtitle content
+     */
+    balance?: string;
+    /**
+     * The title of the card
+     */
+    cardTitle: string;
+    /**
+     * number of digits (input) to show
+     */
+    digits?: number;
+    /**
+     * The input content value
+     */
+    value?: number;
+    /**
+     * font size of the input
+     */
+    fontSize?: string;
+    /**
+     * height of the input
+     */
+    height?: string;
+    /**
+     * rule for the amount input
+     */
+    ruleAmount?: MlFromItemProps['rules'];
+    /**
+     * rule for the coupon input
+     */
+    ruleCoupon?: MlFromItemProps['rules'];
+    /**
+     * Form ref
+     */
+    form?: FormProps['form'];
+    /**
+     * Form init values
+     */
+    initialValues?: IFormData;
+    /**
+     * On submit function
+     */
+    onFinish?: FormProps['onFinish'];
+    /**
+     * Coupon button text
+     */
+    couponBtn?: string;
+    /**
+     * Amount placeholder
+     */
+    amountPlaceholder?: string;
+    /**
+     * Coupon placeholder
+     */
+    couponPlaceholder?: string;
+    /**
+     * Radio group items
+     */
+    currenciesOptions?: Array<{
+        label: ReactNode;
+        value: string;
+        disabled?: boolean;
+        symbol?: string;
+    }>;
+    /**
+     * Radio group default value
+     */
+    defaultCurrency?: number;
+    /**
+     * Amount to pay text
+     */
+    amountToPayText?: string;
+    /**
+     * Amount to pay
+     */
+    amountToPay?: number;
+    /**
+     * Coupon text
+     */
+    couponText?: string;
+    /**
+     * Discount
+     */
+    discount?: number;
+    /**
+     * Total text
+     */
+    totalText?: string;
+    /**
+     * Total
+     */
+    total?: number;
+    /**
+     *  Tax text
+     */
+    taxText?: string;
+    /**
+     * Tax
+     */
+    tax?: number;
+    /**
+     * Pay button text
+     */
+    payBtn?: string;
+    /**
+     * Apply coupon click
+     */
+    applyCouponClick?: () => void;
+    /**
+     * The title of the drawer
+     */
+    drawerTitle?: string;
+    /**
+     * Whether the Drawer dialog is visible or not
+     */
+    open?: boolean;
+    /**
+     * payment Methods
+     */
+    paymentMethods: PaymentMethod[];
+    /**
+     * Form Steps info
+     */
+    currentPaymentSelectedFields: IFormStep<FormType>;
+    /**
+     * Disable continue button drawer
+     */
+    disabledButton?: boolean;
+    /**
+     * Show payment methods
+     */
+    showPaymentMethods?: boolean;
+    /**
+     * terms and conditions disclaimer
+     */
+    termsDisclaimer?: string;
+    /**
+     * terms and conditions change
+     */
+    termsChange?: ((e: CheckboxChangeEvent) => void) | undefined;
+    /**
+     * onCloseDrawer function
+     */
+    onCloseDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * whether to show left arrow
+     */
+    showLeftArrow?: boolean;
+    /**
+     * left arrow click event
+     */
+    onClickLeftArrow?: () => void;
+    editable?: boolean;
+    rate?: number;
+}
+export const TmRechargePage: <FormType extends Store>({ title, subtitle, balance, cardTitle, fontSize, height, ruleAmount, form, initialValues, onFinish, amountPlaceholder, currenciesOptions, defaultCurrency, amountToPayText, amountToPay, couponText, discount, totalText, taxText, tax, payBtn, drawerTitle, open, paymentMethods, currentPaymentSelectedFields, disabledButton, showPaymentMethods, termsDisclaimer, onCloseDrawer, showLeftArrow, onClickLeftArrow, editable, rate, }: TmRechargePageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
+export interface PaymentMethod {
+    value: string;
+    icon?: React.ReactNode;
+    onClick: (value: string) => void;
+}
+export interface OrPaymentMethodsProps<FormType = any> {
+    /**
+     * The title of the drawer
+     */
+    drawerTitle?: string;
+    /**
+     * Whether the Drawer dialog is visible or not
+     */
+    open?: boolean;
+    /**
+     * payment Methods
+     */
+    paymentMethods: PaymentMethod[];
+    /**
+     * Form Steps info
+     */
+    currentPaymentSelectedFields?: IFormStep<FormType>;
+    /**
+     * Disable continue button drawer
+     */
+    disabledButton?: boolean;
+    /**
+     * Show payment methods
+     */
+    showPaymentMethods?: boolean;
+    /**
+     * terms and conditions disclaimer
+     */
+    termsDisclaimer?: string;
+    /**
+   * onCloseDrawer function
+   */
+    onCloseDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export const OrPaymentMethods: <FormType extends Store>({ drawerTitle, open, paymentMethods, currentPaymentSelectedFields, showPaymentMethods, termsDisclaimer, onCloseDrawer, disabledButton, }: OrPaymentMethodsProps<FormType>) => import("react/jsx-runtime").JSX.Element;
+export interface OrTableModuleLayoutProps {
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * page subtitle
+     */
+    subtitle?: string;
     /**
-     * Countdown format
+     * subtitle Content
      */
-    countdownFormat?: string;
+    subtitleContent?: string;
     /**
-     * Indicate if the count down ended
+     * Children component
      */
-    countdownEnded?: boolean;
+    children?: React.ReactNode;
     /**
-     * Callback triggered when countdown ends
+     * margin
      */
-    onFinishCountdown?: () => void;
+    $margin?: string;
     /**
-     * Countdown text part
+     * padding
      */
-    countdownText?: [string, string];
+    padding?: string;
     /**
-     * Send again text
+     * whether to show left arrow
      */
-    sendAgainText?: string;
+    leftArrow?: boolean;
     /**
-     * Function to call when resend is press it
+     * left arrow click event
      */
-    onResendPress?: () => void;
-}
-export const TmLoginPhoneCode: React.FC<TmLoginPhoneCodeProps>;
-export interface MarkersGroup {
-    color?: OrMarkProps['color'];
-    backgroundColor?: string;
-    size?: OrMarkProps['size'];
-    marks: OrMarkProps[];
-    polyLine: boolean;
-}
-export interface TmMapPageProps {
-    rightDrawer?: OrDrawerProps;
-    topLeftSelect: AtSelectProps;
-    topLeftButton?: AtButtonProps;
-    map: GoogleMapProps & {
-        GOOGLE_MAPS_API_KEY: string;
-        ref?: React.RefObject<GoogleMap>;
-    };
-    staticMarkers?: MarkersGroup[];
-    realtimeMarkers?: MarkersGroup[];
-}
-export const TmMapPage: React.FC<TmMapPageProps>;
-export const useMessage: () => readonly [import("antd/es/message/interface").MessageInstance, import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>];
-export interface ModalProps extends ModalFuncProps {
-    variant: 'confirm' | 'warning' | 'info' | 'error';
+    onClickLeftArrow?: () => void;
 }
-export const useModal: () => {
-    show: (config: ModalFuncProps) => {
-        destroy: () => void;
-        update: (configUpdate: ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)) => void;
-    } & {
-        then<T>(resolve: (confirmed: boolean) => T, reject: VoidFunction): Promise<T>;
-    };
-    setVariant: import("react").Dispatch<import("react").SetStateAction<"warning" | "error" | "info" | "confirm">>;
-    contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-};
-export const useForm: <T = any>() => [import("antd").FormInstance<T>];
-export const useFormWatch: <T = any>(name: string, form?: FormInstance | WatchOptions<FormInstance>) => T;
-export interface TmRechargePageProps<FormType = any> {
+export const OrTableModuleLayout: React.FC<OrTableModuleLayoutProps>;
+export interface OrRechargeProps {
     /**
      * Page title
      */
@@ -3756,6 +3624,14 @@ export interface TmRechargePageProps<FormType = any> {
      * The input content value
      */
     value?: number;
+    /**
+     * Callback when user input amount
+     */
+    onChangeAmount?: ((value: string | number | null) => void) | undefined;
+    /**
+     * Callback when user input coupon
+     */
+    couponOnChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
     /**
      * font size of the input
      */
@@ -3799,16 +3675,11 @@ export interface TmRechargePageProps<FormType = any> {
     /**
      * Radio group items
      */
-    currenciesOptions?: Array<{
-        label: ReactNode;
-        value: string;
-        disabled?: boolean;
-        symbol?: string;
-    }>;
+    radioGroupItems?: MlRadioGroupProps['options'];
     /**
      * Radio group default value
      */
-    defaultCurrency?: number;
+    radioDefaultValue?: string;
     /**
      * Amount to pay text
      */
@@ -3816,7 +3687,7 @@ export interface TmRechargePageProps<FormType = any> {
     /**
      * Amount to pay
      */
-    amountToPay?: number;
+    amountToPay?: string;
     /**
      * Coupon text
      */
@@ -3824,7 +3695,7 @@ export interface TmRechargePageProps<FormType = any> {
     /**
      * Discount
      */
-    discount?: number;
+    discount?: string;
     /**
      * Total text
      */
@@ -3832,7 +3703,7 @@ export interface TmRechargePageProps<FormType = any> {
     /**
      * Total
      */
-    total?: number;
+    total?: string;
     /**
      *  Tax text
      */
@@ -3840,7 +3711,7 @@ export interface TmRechargePageProps<FormType = any> {
     /**
      * Tax
      */
-    tax?: number;
+    tax?: string;
     /**
      * Pay button text
      */
@@ -3850,258 +3721,412 @@ export interface TmRechargePageProps<FormType = any> {
      */
     applyCouponClick?: () => void;
     /**
-     * The title of the drawer
+     * Pay click
      */
-    drawerTitle?: string;
+    payClick?: () => void;
     /**
-     * Whether the Drawer dialog is visible or not
+     * onChange radio group
      */
-    open?: boolean;
+    onChangeRadio?: MlRadioGroupProps['onChange'];
+}
+export const OrRecharge: React.FC<OrRechargeProps>;
+export interface AtInputStatusProps {
     /**
-     * payment Methods
+     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
      */
-    paymentMethods: PaymentMethod[];
+    closeIcon?: React.ReactNode;
+    /**
+     * Set the icon of tag
+     */
+    icon?: React.ReactNode;
+    /**
+     * Callback executed when tag is closed
+     */
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Tag text
+     */
+    children?: React.ReactNode;
+    /**
+     * Status type
+     */
+    type?: 'success' | 'warning' | 'danger' | 'info';
+    visible?: boolean;
+}
+export const AtInputStatus: React.FC<AtInputStatusProps>;
+export interface AtLogoProps {
+    width?: number;
+    height?: number;
+    color?: 'violet' | 'gold' | 'white';
+    type?: 'logo' | 'isotype';
+}
+export const AtLogo: React.FC<AtLogoProps>;
+type AtPasswordInputProp = AtTextInputProps & {
+    iconRender?: (visible: boolean) => React.ReactNode;
+};
+export const AtPasswordInput: React.FC<AtPasswordInputProp>;
+export interface AtRadioProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Specifies whether the radio is selected
+     */
+    checked?: boolean;
+    /**
+     * Specifies the initial state: whether or not the radio is selected
+     */
+    defaultChecked?: boolean;
+    /**
+     * Disable radio
+     */
+    disabled?: boolean;
+    /**
+     * According to value for comparison, to determine whether the selected
+     */
+    value?: any;
+    /**
+     * Children of the AtRadio
+     */
+    children?: React.ReactNode;
+    /**
+     * On select option callback
+     */
+    onChange?: ((e: _RadioChangeEvent1) => void) | undefined;
+}
+export const AtRadio: React.FC<AtRadioProps>;
+export interface AtRadioButtonsProps {
+    /**
+     * The title of the button
+     */
+    title: string;
+    /**
+     * The value of the button
+     */
+    value: string;
+}
+export const AtRadioButtons: React.FC<AtRadioButtonsProps>;
+export interface AtResultProps {
+    /**
+     * Icon to show in result
+     */
+    icon?: React.ReactNode;
+    /**
+     * Title to show in result
+     */
+    title?: React.ReactNode;
+    /**
+     * Extra content to show in result
+     */
+    extra?: React.ReactNode;
+}
+export const AtResult: React.FC<AtResultProps>;
+export interface AtSelectProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Show clear button
+     */
+    allowClear?: boolean;
+    /**
+     * Whether the current search will be cleared on selecting an item. Only applies when mode is set to multiple or tags
+     */
+    autoClearSearchValue?: boolean;
+    /**
+     * Get focus by default
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether has border style
+     */
+    bordered?: boolean;
+    /**
+     * The custom clear icon
+     */
+    clearIcon?: ReactNode;
+    /**
+     * Whether active first option by default
+     */
+    defaultActiveFirstOption?: boolean;
+    /**
+     * Initial selected option
+     */
+    defaultValue?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * Whether disabled select
+     */
+    disabled?: boolean;
+    /**
+     * Determine whether the popup menu and the select input are the same width. Default set
+     *           min-width same as input. Will ignore when value less than select width. false
+     *           will disable virtual scroll
+     */
+    popupMatchSelectWidth?: boolean | number;
+    /**
+     * Customize dropdown content
+     */
+    dropdownRender?: (originNode: ReactNode) => ReactElement<any, string | JSXElementConstructor<any>>;
+    /**
+     * The style of dropdown menu
+     */
+    dropdownStyle?: CSSProperties;
+    /**
+     * Customize node label, value, options，groupLabel field name
+     */
+    fieldNames?: object;
+    /**
+     * If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded
+     */
+    filterOption?: SelectProps['filterOption'];
+    /**
+     * Sort function for search options sorting, see Array.sort's
+     * compareFunction
+     */
+    filterSort?: (optionA: DefaultOptionType, optionB: DefaultOptionType) => number;
+    /**
+     * Whether to embed label in value, turn the format of value from string to { value: string,
+     *           label: ReactNode }
+     */
+    labelInValue?: boolean;
     /**
-     * Form Steps info
+     * Config popup height
      */
-    currentPaymentSelectedFields: IFormStep<FormType>;
+    listHeight?: number;
     /**
-     * Disable continue button drawer
+     * Indicate loading state
      */
-    disabledButton?: boolean;
+    loading?: boolean;
     /**
-     * Show payment methods
+     * Select height
      */
-    showPaymentMethods?: boolean;
+    $height?: string;
     /**
-     * terms and conditions disclaimer
+     * Max tag count to show. responsive will cost render performance
      */
-    termsDisclaimer?: string;
+    maxTagCount?: number | 'responsive';
     /**
-     * terms and conditions change
+     * The custom menuItemSelected icon with multiple options
      */
-    termsChange?: ((e: CheckboxChangeEvent) => void) | undefined;
+    menuItemSelectedIcon?: ReactNode;
     /**
-     * onCloseDrawer function
+     * Set mode of Select
      */
-    onCloseDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    mode?: 'multiple' | 'tags';
     /**
-     * whether to show left arrow
+     * Specify content to show when no result matches
      */
-    showLeftArrow?: boolean;
+    notFoundContent?: ReactNode;
     /**
-     * left arrow click event
+     * Controlled open state of dropdown
      */
-    onClickLeftArrow?: () => void;
-    editable?: boolean;
-    rate?: number;
-}
-export const TmRechargePage: <FormType extends Store>({ title, subtitle, balance, cardTitle, fontSize, height, ruleAmount, form, initialValues, onFinish, amountPlaceholder, currenciesOptions, defaultCurrency, amountToPayText, amountToPay, couponText, discount, totalText, taxText, tax, payBtn, drawerTitle, open, paymentMethods, currentPaymentSelectedFields, disabledButton, showPaymentMethods, termsDisclaimer, onCloseDrawer, showLeftArrow, onClickLeftArrow, editable, rate, }: TmRechargePageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
-export interface PaymentMethod {
-    value: string;
-    icon?: React.ReactNode;
-    onClick: (value: string) => void;
-}
-export interface OrPaymentMethodsProps<FormType = any> {
+    open?: boolean;
     /**
-     * The title of the drawer
+     * Which prop value of option will be used for filter if filterOption is true. If options is
+                set, it should be set to label
      */
-    drawerTitle?: string;
+    optionFilterProp?: string;
     /**
-     * Whether the Drawer dialog is visible or not
+     * Which prop value of option will render as content of select. Example
      */
-    open?: boolean;
+    optionLabelProp?: string;
     /**
-     * payment Methods
+     * Select options. Will get better perf than jsx definition
      */
-    paymentMethods: PaymentMethod[];
+    options?: SelectProps['options'];
     /**
-     * Form Steps info
+     * Placeholder of select
      */
-    currentPaymentSelectedFields?: IFormStep<FormType>;
+    placeholder?: ReactNode;
     /**
-     * Disable continue button drawer
+     * The current input "search" text
      */
-    disabledButton?: boolean;
+    searchValue?: string;
     /**
-     * Show payment methods
+     * Whether select is searchable
      */
-    showPaymentMethods?: boolean;
+    showSearch?: boolean;
     /**
-     * terms and conditions disclaimer
+     * Size of Select input
      */
-    termsDisclaimer?: string;
+    size?: 'large' | 'middle' | 'small';
     /**
-   * onCloseDrawer function
-   */
-    onCloseDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-}
-export const OrPaymentMethods: <FormType extends Store>({ drawerTitle, open, paymentMethods, currentPaymentSelectedFields, showPaymentMethods, termsDisclaimer, onCloseDrawer, disabledButton, }: OrPaymentMethodsProps<FormType>) => import("react/jsx-runtime").JSX.Element;
-export interface OrTableModuleLayoutProps {
+     * Set validation status
+     */
+    status?: 'error' | 'warning';
     /**
-     * Page title
+     * Styles
      */
-    title?: string;
+    style?: React.CSSProperties;
     /**
-     * page subtitle
+     * Current selected option (considered as a immutable array)
      */
-    subtitle?: string;
+    value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
     /**
-     * subtitle Content
+     * Called when blur
      */
-    subtitleContent?: string;
+    onBlur?: () => any;
     /**
-     * Children component
+     * Called when select an option or input value change
      */
-    children?: React.ReactNode;
+    onChange?: (value: any, option: DefaultOptionType | Array<DefaultOptionType>) => any;
     /**
-     * margin
+     * Called when clear
      */
-    $margin?: string;
+    onClear?: () => any;
     /**
-     * padding
+     * Called when an option is deselected, param is the selected option's value. Only called for
+     *           multiple or tags, effective in multiple or tags mode only
      */
-    padding?: string;
+    onDeselect?: (value: string | number | LabeledValue) => any;
     /**
-     * whether to show left arrow
+     * Called when dropdown open
      */
-    leftArrow?: boolean;
+    onDropdownVisibleChange?: (open: boolean) => any;
     /**
-     * left arrow click event
+     * Called when focus
      */
-    onClickLeftArrow?: () => void;
-}
-export const OrTableModuleLayout: React.FC<OrTableModuleLayoutProps>;
-export interface OrRechargeProps {
+    onFocus?: () => any;
     /**
-     * Page title
+     * Callback function that is fired when input changed
      */
-    title?: string;
+    onSearch?: (value: string) => any;
     /**
-     * page subtitle
+     * Called when an option is selected, the params are option's value (or key) and option instance
      */
-    subtitle?: string;
+    onSelect?: (value: string | number | LabeledValue, option: DefaultOptionType) => any;
     /**
-     * page subtitle content
+     * Select width
      */
-    balance?: string;
+    $width?: string;
     /**
-     * The title of the card
+     * Children
      */
-    cardTitle: string;
+    children?: ReactNode;
     /**
-     * number of digits (input) to show
+     * background color
      */
-    digits?: number;
+    backgroundColor?: 'violet' | 'white';
     /**
-     * The input content value
+     * text color
      */
-    value?: number;
+    $textColor?: 'white' | 'violet';
+}
+export const AtSelect: React.FC<AtSelectProps>;
+export interface AtSwitchProps extends SwitchProps {
     /**
-     * Callback when user input amount
+     * Whether get focus when component mounted
      */
-    onChangeAmount?: ((value: string | number | null) => void) | undefined;
+    autoFocus?: boolean;
     /**
-     * Callback when user input coupon
+     * Determine whether the Switch is checked
      */
-    couponOnChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    checked?: boolean;
     /**
-     * font size of the input
+     * Determine whether the Switch is checked
      */
-    fontSize?: string;
+    disabled?: boolean;
     /**
-     * height of the input
+     * Trigger when the checked state is changing
      */
-    height?: string;
+    onChange?: SwitchProps['onChange'];
+}
+export const AtSwitch: React.FC<AtSwitchProps>;
+export interface AtTagProps {
     /**
-     * rule for the amount input
+     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
      */
-    ruleAmount?: MlFromItemProps['rules'];
+    closeIcon?: React.ReactNode;
     /**
-     * rule for the coupon input
+     * Tag color
      */
-    ruleCoupon?: MlFromItemProps['rules'];
+    color?: TagProps['color'];
     /**
-     * Form ref
+     * Set the icon of tag
      */
-    form?: FormProps['form'];
+    icon?: React.ReactNode;
     /**
-     * Form init values
+     * Whether has border style
      */
-    initialValues?: IFormData;
+    bordered?: boolean;
     /**
-     * On submit function
+     * Callback executed when tag is closed
      */
-    onFinish?: FormProps['onFinish'];
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Coupon button text
+     * Tag text
      */
-    couponBtn?: string;
+    children?: React.ReactNode;
+}
+export const AtTag: React.FC<AtTagProps>;
+export interface AtTitleProps {
     /**
-     * Amount placeholder
+     * Code style
      */
-    amountPlaceholder?: string;
+    code?: boolean;
     /**
-     * Coupon placeholder
+     * Whether to be copyable, customize it via setting an object
      */
-    couponPlaceholder?: string;
+    copyable?: boolean | BlockProps['copyable'];
     /**
-     * Radio group items
+     * Deleted line style
      */
-    radioGroupItems?: MlRadioGroupProps['options'];
+    delete?: boolean;
     /**
-     * Radio group default value
+     * Disabled content
      */
-    radioDefaultValue?: string;
+    disabled?: boolean;
     /**
-     * Amount to pay text
+     * If editable. Can control edit state when is object
      */
-    amountToPayText?: string;
+    editable?: boolean | BlockProps['editable'];
     /**
-     * Amount to pay
+     * Display ellipsis when text overflows, can configure rows and expandable by using object
      */
-    amountToPay?: string;
+    ellipsis?: boolean | EllipsisConfig;
     /**
-     * Coupon text
+     * Set content importance. Match with h1, h2, h3, h4, h5
      */
-    couponText?: string;
+    level?: 1 | 2 | 3 | 4 | 5;
     /**
-     * Discount
+     * Whether the text is mark or not
      */
-    discount?: string;
+    mark?: boolean;
     /**
-     * Total text
+     * Set the handler to handle click event
      */
-    totalText?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
     /**
-     * Total
+     * Whether the text is italic or not
      */
-    total?: string;
+    italic?: boolean;
     /**
-     *  Tax text
+     * Content type
      */
-    taxText?: string;
+    type?: BaseType;
     /**
-     * Tax
+     * Whether the text is underline or not
      */
-    tax?: string;
+    underline?: boolean;
     /**
-     * Pay button text
+     * Additional content to include
      */
-    payBtn?: string;
+    children?: ReactNode;
     /**
-     * Apply coupon click
+     * Color of the title
      */
-    applyCouponClick?: () => void;
+    color?: 'violet' | 'gold' | 'white';
     /**
-     * Pay click
+     * Margin
      */
-    payClick?: () => void;
+    $margin?: string;
     /**
-     * onChange radio group
+     * Text Align
      */
-    onChangeRadio?: MlRadioGroupProps['onChange'];
+    $textAlign?: string;
 }
-export const OrRecharge: React.FC<OrRechargeProps>;
+export const AtTitle: React.FC<AtTitleProps>;
 
 //# sourceMappingURL=index.d.ts.map