enwawa-ui 1.1.0 → 1.2.0

package/lib/index.d.ts

@@ -0,0 +1,3702 @@
+import React, { CSSProperties, ReactNode, ChangeEvent, JSXElementConstructor, ReactElement } from "react";
+import { ButtonShape, ButtonSize, ButtonType } from "antd/es/button";
+import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, InputNumberProps, SelectProps, BreadcrumbProps, DropdownProps, MenuProps, ColProps, PaginationProps, RadioChangeEvent as _RadioChangeEvent1, TooltipProps, AlertProps, RowProps, LayoutProps, SiderProps, FormProps, ModalFuncProps, ModalProps, StepsProps, SpaceProps, TableProps } 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 { BlockProps, EllipsisConfig, BaseType } from "antd/es/typography/Base";
+import { CardTabListType } from "antd/es/card";
+import { CardType } from "antd/es/card/Card";
+import { TabsProps } from "antd/es/tabs";
+import { DotPosition } from "antd/es/carousel";
+import { CheckboxGroupProps } from "antd/es/checkbox/Group";
+import { NamePath, Store, StoreValue } from "antd/es/form/interface";
+import { Rule } from "antd/es/form";
+import { LabelTooltipType } from "antd/es/form/FormItemLabel";
+import { Gutter } from "antd/es/grid/row";
+import { DrawerProps } from "antd/es/drawer";
+import { CheckboxChangeEvent } from "antd/es/checkbox";
+import { AnyObject } from "antd/es/_util/type";
+export interface AtAvatarProps {
+    /**
+     * This attribute defines the alternative text describing the image
+     */
+    alt?: string;
+    /**
+     * Letter type unit distance between left and right sides
+     */
+    gap?: number;
+    /**
+     * Custom icon type for an icon avatar
+     */
+    icon?: React.ReactNode;
+    /**
+     * The shape of avatar
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * The size of the avatar
+     */
+    size?: 'large' | 'small' | 'default' | number;
+    /**
+     * The address of the image for an image avatar or image element
+     */
+    src?: string;
+    /**
+     * Whether the picture is allowed to be dragged
+     */
+    draggable?: boolean;
+    /**
+     * CORS settings attributes
+     */
+    crossOrigin?: 'anonymous' | 'use-credentials';
+}
+export const AtAvatar: React.FC<AtAvatarProps>;
+export interface AtButtonProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * The button content value
+     */
+    value?: string;
+    /**
+     * Hide button borders
+     */
+    borderless?: boolean;
+    /**
+     *Option to fit button width to its parent width
+     */
+    block?: boolean;
+    /**
+     *Set the danger status of button
+     */
+    danger?: boolean;
+    /**
+     * Disabled state of button
+     */
+    disabled?: boolean;
+    /**
+     * Set the original html type of button, see: MDN
+     */
+    htmlType?: string;
+    /**
+     * Set the icon component of button
+     */
+    icon?: React.ReactNode;
+    /**
+     * Set the loading status of button
+     */
+    loading?: boolean;
+    /**
+     * Can be set button
+     */
+    shape?: ButtonShape;
+    /**
+     * Set the size of button
+     */
+    size?: ButtonSize;
+    /**
+     * Can be set to primary ghost dashed link text
+     */
+    type?: ButtonType;
+    /**
+     * Set the handler to handle click
+     */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement> & React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Expand button full container width
+     */
+    $fullWidth?: boolean;
+    /**
+     * set button in ghost mode
+     */
+    ghost?: boolean;
+    /**
+     * Set the button width
+     */
+    $width?: string | number;
+}
+export const AtButton: React.FC<AtButtonProps>;
+export interface AtCheckboxProps extends CheckboxProps {
+    /**
+     * Specifies whether the checkbox is selected
+     */
+    checked?: boolean;
+    /**
+     * Specifies the initial state: whether or not the checkbox is selected
+     */
+    defaultChecked?: boolean;
+    /**
+     * If disable checkbox
+     */
+    disabled?: boolean;
+    /**
+     * The indeterminate checked state of checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * The callback function that is triggered when the state changes
+     */
+    onChange?: CheckboxProps['onChange'];
+    /**
+     * children of checkbox
+     */
+    children?: React.ReactNode;
+}
+export const AtCheckbox: React.FC<AtCheckboxProps>;
+interface Props {
+    children: React.ReactNode;
+}
+export const violet: string[];
+export const gray: string[];
+export const WaWaThemeProvider: React.FC<Props>;
+export interface AtCountdownProps {
+    /**
+     * Format as dayjs	string
+     */
+    format?: string;
+    /**
+     * The prefix node of value
+     */
+    prefix?: React.ReactNode;
+    /**
+     * The suffix node of value
+     */
+    suffix?: React.ReactNode;
+    /**
+     * The suffix node of value
+     */
+    title?: React.ReactNode;
+    /**
+     * Set target countdown time	number
+     */
+    value?: CountdownProps['value'];
+    /**
+     * Set value section style	CSSProperties
+     */
+    valueStyle?: React.CSSProperties;
+    /**
+     * Trigger when time's up
+     */
+    onFinish?: () => void;
+    /**
+     * Trigger when time's changing
+     */
+    onChange?: (value: CountdownProps['value']) => void;
+    /**
+     * Font color
+     */
+    $color?: 'normal' | 'primary';
+    /**
+     * Font size
+     */
+    $fontSize?: number;
+}
+export const AtCountdown: React.FC<AtCountdownProps>;
+export interface AtDatePickerPros {
+    /**
+     * If true, the date picker will be disabled
+     */
+    disabled?: boolean;
+    /**
+     *  Whether to show clear button
+     */
+    allowClear?: boolean;
+    /**
+     * If get focus when component mounted
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether has border style
+     */
+    bordered?: boolean;
+    /**
+     * Trigger change when blur. e.g. datetime picker no need click confirm button
+     */
+    changeOnBlur?: boolean;
+    /**
+     * Specify the date that cannot be selected
+     */
+    disabledDate?: (currentDate: Dayjs) => boolean;
+    /**
+     * To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to dayjs#format. for example: Custom Format
+     */
+    format?: string | string[];
+    /**
+     * Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)
+     */
+    inputReadOnly?: boolean;
+    /**
+     * Localization configuration
+     */
+    locale?: DatePickerProps['locale'];
+    /**
+     * The picker panel mode（ Cannot select year or month anymore? )
+     */
+    mode?: 'time' | 'date' | 'month' | 'year' | 'decade';
+    /**
+     * The open state of picker
+     */
+    open?: boolean;
+    /**
+     * Set picker type
+     */
+    picker?: DatePickerProps['picker'];
+    /**
+     * Placeholder of the input
+     */
+    placeholder?: string;
+    /**
+     * The position where the selection box pops up
+     */
+    placement?: DatePickerProps['placement'];
+    /**
+     * The preset ranges for quick selection
+     */
+    presents?: DatePickerProps['presets'];
+    /**
+     * Show time on date
+     */
+    showTime?: boolean;
+    /**
+     * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px
+     */
+    size?: DatePickerProps['size'];
+    /**
+     * Set validation status
+     */
+    status?: DatePickerProps['status'];
+    /**
+     * Callback function, can be executed whether the popup calendar is popped up or closed
+     */
+    onOpenChange?: (status: boolean) => void;
+    /**
+     * Callback when picker panel mode is changed
+     */
+    onPanelChange?: (value: Dayjs | null, mode: DatePickerProps['mode']) => void;
+    /**
+     * set format on 12h
+     */
+    use12Hours?: boolean;
+    /**
+     * The computed style of the svg element
+     */
+    style?: CSSProperties;
+    /**
+     * width of the input box
+     */
+    $width?: string;
+}
+export const AtDatePicker: React.FC<AtDatePickerPros>;
+export interface AtDividerProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * The wrapped title
+     */
+    children?: ReactNode;
+    /**
+     * Whether line is dashed
+     */
+    dashed?: boolean;
+    /**
+     * The position of title inside divider
+     */
+    orientation?: 'left' | 'right' | 'center';
+    /**
+     * The margin-left/right between the title and its closest border, while the orientation must be left or right, If a numeric value of type string is provided without a unit, it is assumed to be in pixels (px) by default.
+     */
+    orientationMargin?: string | number;
+    /**
+     * Divider text show as plain style
+     */
+    plain?: boolean;
+    /**
+     * The direction type of divider
+     */
+    type?: 'horizontal' | 'vertical';
+    /**
+     * margin of the divider
+     */
+    $margin?: number;
+}
+export const AtDivider: React.FC<AtDividerProps>;
+export interface AtIconProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Name of the icon
+     */
+    name?: keyof typeof Icons;
+    /**
+     * Define the color used to paint the svg element
+     */
+    fill?: string;
+    /**
+     * The computed style of the svg element
+     */
+    style?: CSSProperties;
+    /**
+     * The height of the svg element
+     */
+    height?: string | number;
+    /**
+     * The width of the svg element
+     */
+    width?: string | number;
+    /**
+     * Define extra properties to the component
+     */
+    extraCommonProps?: {
+        [key: string]: any;
+    };
+    /**
+     * The URL generated by iconfont.cn project. Support string[] after @ant-design/icons@4.1.0
+     */
+    scriptUrl?: string | string[];
+    /**
+     * The component used for the root node
+     */
+    component?: IconComponentProps['component'];
+    /**
+     * Rotate degrees (not working in IE9)
+     */
+    rotate?: number;
+    /**
+     * Rotate icon with animation
+     */
+    spin?: boolean;
+    /**
+     * Color of the icon
+     */
+    twoToneColor?: string;
+}
+export const AtIcon: React.FC<AtIconProps>;
+export interface AtImageProps {
+    /**
+     * Image description
+     */
+    alt?: string;
+    /**
+     * Load failure fault-tolerant src
+     */
+    fallback?: string;
+    /**
+     * Image height
+     */
+    height?: string | number;
+    /**
+     * Image path
+     */
+    src?: string;
+    /**
+     * Image width
+     */
+    width?: string | number;
+    /**
+     * Load failed callback
+     */
+    onError?: ImageProps['onError'];
+    /**
+     * Load placeholder, use default placeholder when set true
+     */
+    placeholder?: ImageProps['placeholder'];
+    /**
+     * preview config, disabled when false
+     */
+    preview?: ImageProps['preview'];
+}
+export const AtImage: React.FC<AtImageProps>;
+export interface AtLogoProps {
+    width?: number;
+    height?: number;
+    color?: 'violet' | 'gold' | 'white';
+    type?: 'logo' | 'isotype';
+}
+export const AtLogo: React.FC<AtLogoProps>;
+export interface AtNumberInputProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * The label text displayed after (on the right side of) the input field
+     */
+    addonAfter?: ReactNode;
+    /**
+     * The label text displayed before (on the left side of) the input field
+     */
+    addonBefore?: ReactNode;
+    /**
+     * If get focus when component mounted
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether has border style
+     */
+    bordered?: boolean;
+    /**
+     * Whether to show +- controls, or set custom arrows icon
+     */
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
+    /**
+     * Decimal separator
+     */
+    decimalSeparator?: string;
+    /**
+     * The initial value
+     */
+    defaultValue?: number;
+    /**
+     * If disable the input
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the format of the value presented
+     */
+    formatter?: (value: number | undefined, info: {
+        userTyping: boolean;
+        input: string;
+    }) => string;
+    /**
+     * If enable keyboard behavior
+     */
+    keyboard?: boolean;
+    /**
+     * The max value
+     */
+    max?: number;
+    /**
+     * The min value
+     */
+    min?: number;
+    /**
+     * Specifies the value extracted from formatter
+     */
+    parser?: (displayValue: string | undefined) => number;
+    /**
+     * The precision of input value. Will use formatter when config of formatter
+     */
+    precision?: number;
+    /**
+     * If readonly the input
+     */
+    readOnly?: boolean;
+    /**
+     * Set validation status
+     */
+    status?: 'error' | 'warning';
+    /**
+     * The prefix icon for the Input
+     */
+    prefix?: ReactNode;
+    /**
+     * The height of input box
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * The number to which the current value is increased or decreased. It can be an integer or decimal
+     */
+    step?: number | string;
+    /**
+     * Set value as string to support high precision decimals. Will return string value by onChange
+     */
+    stringMode?: boolean;
+    /**
+     * The current value
+     */
+    value?: number;
+    /**
+     * The callback triggered when the value is changed
+     */
+    onChange?: (value: number | string | null) => void;
+    /**
+     * The callback function that is triggered when Enter key is pressed
+     */
+    onPressEnter?: (e: ChangeEvent<EventTarget>) => void;
+    /**
+     * The callback function that is triggered when click up or down buttons
+     */
+    onStep?: (value: number, info: {
+        offset: ValueType;
+        type: 'up' | 'down';
+    }) => void;
+    /**
+     * Element width
+     */
+    $width?: string;
+    /**
+     * Element height
+     */
+    $height?: string;
+    /**
+     * Text align
+     */
+    $textAlign?: 'left' | 'center' | 'right';
+    /**
+     * Font size
+     */
+    $fontSize?: string;
+    /**
+     * on Input
+     */
+    onInput?: InputNumberProps['onInput'];
+    /**
+     * max length
+     */
+    maxLength?: number;
+    /**
+     * key down
+     */
+    onKeyDown?: InputNumberProps['onKeyDown'];
+    /**
+     * On focus
+     */
+    onFocus?: InputNumberProps['onFocus'];
+    /**
+     * placeholder
+     */
+    placeholder?: string;
+}
+/**
+ * Primary input UI component for user interaction
+ */
+export const AtNumberInput: React.FC<AtNumberInputProps>;
+export interface AtTextInputProps {
+    /**
+     * The label text displayed after (on the right side of) the input field
+     */
+    addonAfter?: ReactNode;
+    /**
+     * The label text displayed before (on the left side of) the input field
+     */
+    addonBefore?: ReactNode;
+    /**
+     * If allow to remove input content with clear icon
+     */
+    allowClear?: boolean | {
+        clearIcon?: ReactNode;
+    };
+    /**
+     * Whether has border style
+     */
+    bordered?: boolean;
+    /**
+     * The initial input content
+     */
+    defaultValue?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * The maximum number of characters in Input
+     */
+    maxLength?: number;
+    /**
+     * Set validation status
+     */
+    status?: 'error' | 'warning' | undefined;
+    /**
+     * Whether to show character count
+     */
+    showCount?: boolean;
+    /**
+     * Placeholder text to display into the input
+     */
+    placeholder?: string;
+    /**
+     * The prefix icon for the Input
+     */
+    prefix?: ReactNode;
+    /**
+     * The size of the input box. Note: in the context of a form, the middle size is used
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * The suffix icon for the Input
+     */
+    suffix?: ReactNode;
+    /**
+     * The input content value
+     */
+    value?: string;
+    /**
+     * Callback when user input
+     */
+    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 {
+    /**
+     * 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: RadioChangeEvent) => 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 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;
+    /**
+     * Config popup height
+     */
+    listHeight?: number;
+    /**
+     * Indicate loading state
+     */
+    loading?: boolean;
+    /**
+     * Select height
+     */
+    $height?: string;
+    /**
+     * Max tag count to show. responsive will cost render performance
+     */
+    maxTagCount?: number | 'responsive';
+    /**
+     * The custom menuItemSelected icon with multiple options
+     */
+    menuItemSelectedIcon?: ReactNode;
+    /**
+     * Set mode of Select
+     */
+    mode?: 'multiple' | 'tags';
+    /**
+     * Specify content to show when no result matches
+     */
+    notFoundContent?: ReactNode;
+    /**
+     * Controlled open state of dropdown
+     */
+    open?: boolean;
+    /**
+     * Which prop value of option will be used for filter if filterOption is true. If options is
+                set, it should be set to label
+     */
+    optionFilterProp?: string;
+    /**
+     * Which prop value of option will render as content of select. Example
+     */
+    optionLabelProp?: string;
+    /**
+     * Select options. Will get better perf than jsx definition
+     */
+    options?: SelectProps['options'];
+    /**
+     * Placeholder of select
+     */
+    placeholder?: ReactNode;
+    /**
+     * The current input "search" text
+     */
+    searchValue?: string;
+    /**
+     * Whether select is searchable
+     */
+    showSearch?: boolean;
+    /**
+     * Size of Select input
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * Set validation status
+     */
+    status?: 'error' | 'warning';
+    /**
+     * Styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Current selected option (considered as a immutable array)
+     */
+    value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * Called when blur
+     */
+    onBlur?: () => any;
+    /**
+     * Called when select an option or input value change
+     */
+    onChange?: (value: any, option: DefaultOptionType | Array<DefaultOptionType>) => any;
+    /**
+     * Called when clear
+     */
+    onClear?: () => any;
+    /**
+     * 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
+     */
+    onDeselect?: (value: string | number | LabeledValue) => any;
+    /**
+     * Called when dropdown open
+     */
+    onDropdownVisibleChange?: (open: boolean) => any;
+    /**
+     * Called when focus
+     */
+    onFocus?: () => any;
+    /**
+     * Callback function that is fired when input changed
+     */
+    onSearch?: (value: string) => any;
+    /**
+     * Called when an option is selected, the params are option's value (or key) and option instance
+     */
+    onSelect?: (value: string | number | LabeledValue, option: DefaultOptionType) => any;
+    /**
+     * Select width
+     */
+    $width?: string;
+    /**
+     * Children
+     */
+    children?: ReactNode;
+    /**
+     * background color
+     */
+    backgroundColor?: string;
+}
+export const AtSelect: React.FC<AtSelectProps>;
+export interface AtTextProps {
+    /**
+     * Content type
+     */
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * 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?: 'violet' | 'gold' | 'white' | 'lightGray';
+    /**
+     * Element width
+     */
+    $width?: number;
+    /**
+     * font size
+     */
+    $fontSize?: number;
+}
+export const AtText: React.FC<AtTextProps>;
+export interface AtTitleProps {
+    /**
+     * Code style
+     */
+    code?: boolean;
+    /**
+     * Whether to be copyable, customize it via setting an object
+     */
+    copyable?: boolean | BlockProps['copyable'];
+    /**
+     * Deleted line style
+     */
+    delete?: boolean;
+    /**
+     * Disabled content
+     */
+    disabled?: boolean;
+    /**
+     * If editable. Can control edit state when is object
+     */
+    editable?: boolean | BlockProps['editable'];
+    /**
+     * Display ellipsis when text overflows, can configure rows and expandable by using object
+     */
+    ellipsis?: boolean | EllipsisConfig;
+    /**
+     * Set content importance. Match with h1, h2, h3, h4, h5
+     */
+    level?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * Whether the text is mark or not
+     */
+    mark?: boolean;
+    /**
+     * Set the handler to handle click event
+     */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Whether the text is italic or not
+     */
+    italic?: boolean;
+    /**
+     * Content type
+     */
+    type?: BaseType;
+    /**
+     * Whether the text is underline or not
+     */
+    underline?: boolean;
+    /**
+     * Additional content to include
+     */
+    children?: ReactNode;
+    /**
+     * Color of the title
+     */
+    color?: 'violet' | 'gold' | 'white';
+    /**
+     * No margin on titles
+     */
+    $noMargin?: boolean;
+}
+export const AtTitle: React.FC<AtTitleProps>;
+export interface MlBreadcrumbProps {
+    /**
+     * Custom item renderer
+     */
+    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 MlCardProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * The action list, shows at the bottom of the Card
+     */
+    actions?: Array<ReactNode>;
+    /**
+     * Current TabPane's key
+     */
+    activeTabKey?: string;
+    /**
+     * Inline style to apply to the card content	CSSProperties
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Toggles rendering of the border around the card
+     */
+    bordered?: boolean;
+    /**
+     * Card cover
+     */
+    cover?: ReactNode;
+    /**
+     * Initial active TabPane's key, if activeTabKey is not set
+     */
+    defaultActiveTabKey?: string;
+    /**
+     * Content to render in the top-right corner of the card
+     */
+    extra?: ReactNode;
+    /**
+     * Lift up when hovering card
+     */
+    hoverable?: boolean;
+    /**
+     * Shows a loading indicator while the contents of the card are being fetched
+     */
+    loading?: boolean;
+    /**
+     * Mark item as selected
+     */
+    selected?: boolean;
+    /**
+     * Size of card
+     */
+    size?: 'default' | 'small';
+    /**
+     * Extra content in tab bar
+     */
+    tabBarExtraContent?: ReactNode;
+    /**
+     * List of TabPane's head
+     */
+    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 MlCard: React.FC<MlCardProps>;
+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;
+    /**
+     * The default validate field info
+     */
+    messageVariables?: Record<string, string>;
+    /**
+     * Field name, support array
+     */
+    name?: NamePath;
+    /**
+     * No style for true, used as a pure field control
+     */
+    noStyle?: boolean;
+    /**
+     * Normalize value from component value before passing to Form instance. Do not support async
+     */
+    normalize?: (value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue;
+    /**
+     * Display required style. It will be generated by the validation rule
+     */
+    required?: boolean;
+    /**
+     * Rules for field validation. Click [here](https://ant.design/components/form#components-form-demo-basic) to see an example
+     */
+    rules?: Rule[];
+    /**
+     * Config tooltip info
+     */
+    tooltip?: LabelTooltipType;
+    /**
+     * The validation status. If not provided, it will be generated by validation rule. options: success warning error validating
+     */
+    validateStatus?: 'success' | 'warning' | 'error' | 'validating' | undefined;
+    /**
+     * When to validate the value of children node
+     */
+    validateTrigger?: string | string[] | false;
+    /**
+     * The layout for input controls, same as labelCol. You can set wrapperCol on Form which will not affect nest Item. If both exists, use Item first
+     */
+    wrapperCol?: ColProps;
+    /**
+     * Children component
+     */
+    children?: React.ReactNode;
+    /**
+     * Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of getValueProps, which will be invalid after customizing getValueProps
+     */
+    valuePropName?: string;
+    /**
+     * margin of component
+     */
+    $margin?: string;
+}
+export const MlFormItem: React.FC<MlFromItemProps>;
+export interface MlLoadingProps {
+    /**
+     * zIndex of the loading
+     */
+    $zIndex?: number;
+}
+export const MlLoading: React.FC<MlLoadingProps>;
+export interface MlPaginationProps {
+    /**
+     * Current page number. (Controlled)
+     */
+    current?: number;
+    /**
+     * Default initial page number when the component is uncontrolled.
+     */
+    defaultCurrent?: number;
+    /**
+     * Default number of data items per page when the component is uncontrolled.
+     */
+    defaultPageSize?: number;
+    /**
+     * Disable pagination interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to hide the pager when there is only one page of data.
+     */
+    hideOnSinglePage?: boolean;
+    /**
+     * To customize the HTML content of the pagination item.
+     * @param page The current page number.
+     * @param type Type of the pagination item: 'page', 'prev', or 'next'.
+     * @param originalElement The original React element.
+     */
+    itemRender?: PaginationProps['itemRender'];
+    /**
+     * Number of data items per page.
+     */
+    pageSize?: number;
+    /**
+     * Specify the size changer options for the pageSize select.
+     */
+    pageSizeOptions?: string[] | number[];
+    /**
+     * If true and size is not specified, the pagination will resize according to the window width.
+     */
+    responsive?: boolean;
+    /**
+     * Show fewer page items.
+     */
+    showLessItems?: boolean;
+    /**
+     * Determine whether to show the quick jumper input to directly jump to pages.
+     * Can also be an object with the 'goButton' prop to customize the go button.
+     */
+    showQuickJumper?: boolean | {
+        goButton: React.ReactNode;
+    };
+    /**
+     * Determine whether to show the pageSize select.
+     * It will be true when the total number of items is greater than 50.
+     */
+    showSizeChanger?: boolean;
+    /**
+     * Show title for the page item.
+     */
+    showTitle?: boolean;
+    /**
+     * Custom function to display the total number of data items and the current range displayed.
+     * @param total Total number of data items.
+     * @param range Range of data items currently displayed, represented as [start, end].
+     */
+    showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+    /**
+     * Whether to use simple mode for the pagination.
+     */
+    simple?: boolean;
+    /**
+     * Specify the size of the pagination component.
+     * Can be set to 'default' or 'small'.
+     */
+    size?: 'default' | 'small';
+    /**
+     * Total number of data items.
+     */
+    total?: PaginationProps['total'];
+    /**
+     * Called when the page number or pageSize is changed.
+     * @param page The resulting page number.
+     * @param pageSize The resulting number of data items per page.
+     */
+    onChange?: (page: number, pageSize: number) => void;
+    /**
+     * Called when the pageSize is changed.
+     * @param current The current page number.
+     * @param size The new number of data items per page.
+     */
+    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
+     */
+    id?: string;
+    /**
+     * The style type of radio button
+     */
+    buttonStyle?: 'outline' | 'solid';
+    /**
+     * Default selected value
+     */
+    defaultValue?: any;
+    /**
+     * Disable all radio buttons
+     */
+    disabled?: boolean;
+    /**
+     * The name property of all input[type="radio"] children
+     */
+    name?: string;
+    /**
+     * Set children optional
+     */
+    options?: string[] | number[] | Array<{
+        label: ReactNode;
+        value: string;
+        disabled?: boolean;
+    }>;
+    /**
+     * Set Radio optionType
+     */
+    optionType?: 'default' | 'button';
+    /**
+     * The size of radio button style
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * Used for setting the currently selected value
+     */
+    value?: any;
+    /**
+     * The callback function that is triggered when the state changes
+     */
+    onChange?: (e: _RadioChangeEvent1) => void;
+    /**
+     * border box
+     */
+    bordered?: boolean;
+    /**
+     * padding
+     */
+    padding?: string;
+}
+export const MlRadioGroup: React.FC<MlRadioGroupProps>;
+export interface MlSearchBoxProps extends AtTextInputProps {
+    /**
+     * Prefix on search Input
+     */
+    inputPrefixCls?: string;
+    /**
+     * On search function
+     */
+    onSearch?: (value: string, event?: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Input loading on search
+     */
+    loading?: boolean;
+    /**
+     * Element for enter button
+     */
+    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 {
+    /**
+     * Children component
+     */
+    children?: React.ReactNode;
+    /**
+     * Tooltip text
+     */
+    title?: string;
+    /**
+     * Tooltip trigger mode. Could be multiple by passing an array
+     */
+    trigger?: TooltipProps['trigger'];
+    /**
+     * 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
+     */
+    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 {
+    /**
+     * The action of Alert
+     */
+    action?: AlertProps['action'];
+    /**
+     * Called when close animation is finished
+     */
+    afterClose?: AlertProps['afterClose'];
+    /**
+     * Whether to show as banner
+     */
+    banner?: boolean;
+    /**
+     * Custom close icon, >=5.7.0: close button will be hidden when setting to null or false
+     */
+    closeIcon?: boolean | React.ReactNode;
+    /**
+     * Closable text to show
+     */
+    closable?: AlertProps['closable'];
+    /**
+     * Additional content of Alert
+     */
+    description?: AlertProps['description'];
+    /**
+     * Custom icon, effective when showIcon is true
+     */
+    icon?: AlertProps['icon'];
+    /**
+     * Content of Alert
+     */
+    message?: AlertProps['message'];
+    /**
+     * Whether to show icon
+     */
+    showIcon?: boolean;
+    /**
+     * Type of Alert styles, options: success, info, warning, error
+     */
+    type?: AlertProps['type'];
+    /**
+     * Callback when Alert is closed
+     */
+    onClose?: AlertProps['onClose'];
+    /**
+     * Children of Alert
+     */
+    children?: React.ReactNode;
+}
+export const OrAlert: React.FC<OrAlertProps>;
+export interface OrTabsProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Current TabPane's key
+     */
+    activeKey?: string;
+    /**
+     * Customize add icon
+     */
+    addIcon?: React.ReactNode;
+    /**
+     * Whether to change tabs with animation. Only works while tabPosition="top"
+     */
+    animated?: boolean | {
+        inkBar: boolean;
+        tabPane: boolean;
+    };
+    /**
+     * Centers tabs
+     */
+    centered?: boolean;
+    /**
+     * Initial active TabPane's key, if activeKey is not set
+     */
+    defaultActiveKey?: string;
+    /**
+     * Hide plus icon or not. Only works while type="editable-card"
+     */
+    hideAdd?: boolean;
+    /**
+     * Configure tab content
+     */
+    items?: TabsProps['items'];
+    /**
+     * The custom icon of ellipsis
+     */
+    moreIcon?: React.ReactNode;
+    /**
+     * className for more dropdown.
+     */
+    popupClassName?: string;
+    /**
+     * Preset tab bar size
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * Extra content in tab bar
+     */
+    tabBarExtraContent?: React.ReactNode | {
+        left?: React.ReactNode;
+        right?: React.ReactNode;
+    };
+    /**
+     * The gap between tabs
+     */
+    tabBarGutter?: number;
+    /**
+     * Position of tabs
+     */
+    tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Whether destroy inactive TabPane when change tab
+     */
+    destroyInactiveTabPane?: boolean;
+    /**
+     * Basic style of tabs
+     */
+    type?: 'line' | 'card' | 'editable-card';
+    /**
+     * Callback executed when active tab is changed
+     */
+    onChange?: (activeKey: string) => void;
+    /**
+     * Callback executed when tab is added or removed. Only works while type="editable-card"
+     */
+    onEdit?: ((e: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: 'add' | 'remove') => void) | undefined;
+    /**
+     * Callback executed when tab is clicked
+     */
+    onTabClick?: ((activeKey: string, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    /**
+     * Trigger when tab scroll
+     */
+    onTabScroll?: (info: {
+        direction: 'left' | 'right' | 'top' | 'bottom';
+    }) => void;
+    /**
+     * Children of the tabs
+     */
+    children?: React.ReactElement | React.ReactElement[];
+    /**
+     * hide extra content in tab bar
+     */
+    hideExtra?: boolean;
+}
+export const OrTabs: React.FC<OrTabsProps>;
+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 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;
+}
+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;
+    /**
+     * gap between buttons
+     */
+    gap?: number;
+    /**
+     * justify buttons
+     */
+    justify?: RowProps['justify'];
+}
+export const OrTwoButtons: React.FC<OrTwoButtons>;
+export interface OrAssignBalanceProps {
+    /**
+     * Tickets page title
+     */
+    ticketTitle: string;
+    /**
+     * Width of the Drawer dialog
+     */
+    width?: string | number;
+    /**
+     * The z-index of the Drawer
+     */
+    zIndex?: number;
+    /**
+     * tab1 title
+     */
+    firstTabTitle: ReactNode;
+    /**
+     * tab2 title
+     */
+    secondTabTitle: ReactNode;
+    /**
+     * Active subscriptions
+     */
+    activeSubscriptions?: Array<{
+        title: string;
+        description: string;
+    }>;
+    /**
+     * Active Tickets
+     */
+    activeTickets?: Array<{
+        title: string;
+        description: string;
+    }>;
+    /**
+     * Coins available
+     */
+    coinsAvailable: Array<OrTicketCardProps>;
+    /**
+     * Cancel button title
+     */
+    cancelTitle: string;
+    /**
+     * Confirm button title
+     */
+    confirmTitle: string;
+    /**
+     * Plans and Subscriptions
+     */
+    subscriptions: Array<MlSubscriptionCardProps>;
+    /**
+     * Cancel onClick Event
+     */
+    cancelClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Confirm onClick Event
+     */
+    confirmClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * subscriptions onChange event
+     */
+    subscriptionOnChange?: ((e: _RadioChangeEvent1) => void);
+    /**
+     * coins onClick | onChange event
+     */
+    coinsOnChange?: OrTicketCardProps['onChange'];
+    /**
+     * item selected
+     */
+    coinSelected?: number;
+}
+export const OrAssignBalance: React.FC<OrAssignBalanceProps>;
+export interface OrColProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Flex layout style
+     */
+    flex?: string | number;
+    /**
+     * The number of cells to offset Col from the left
+     */
+    offset?: number;
+    /**
+     * Raster order
+     */
+    order?: number;
+    /**
+     * The number of cells that raster is moved to the left
+     */
+    pull?: number;
+    /**
+     * The number of cells that raster is moved to the right
+     */
+    push?: number;
+    /**
+     * Raster number of cells to occupy, 0 corresponds to display: none
+     */
+    span?: number;
+    /**
+     * screen < 576px and also default setting, could be a span value or an object containing above props
+     */
+    xs?: number | object;
+    /**
+     * screen ≥ 576px, could be a span value or an object containing above props
+     */
+    sm?: number | object;
+    /**
+     * screen ≥ 768px, could be a span value or an object containing above props
+     */
+    md?: number | object;
+    /**
+     * screen ≥ 1200px, could be a span value or an object containing above props
+     */
+    xl?: number | object;
+    /**
+     * screen ≥ 1600px, could be a span value or an object containing above props
+     */
+    xxl?: number | object;
+    /**
+     * Children of Columns
+     */
+    children?: React.ReactNode;
+    /**
+     * Container background source
+     */
+    $backgroundSrc?: string;
+    /**
+     * Justify content
+     */
+    $justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+    /**
+     * 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 between columns
+     */
+    $gap?: number;
+}
+export const OrCol: React.FC<OrColProps>;
+export interface OrContentProps extends LayoutProps {
+    /**
+     * Is main content
+     */
+    $main?: boolean;
+}
+export const OrContent: React.FC<OrContentProps>;
+export interface OrCountryCardProps {
+    /**
+     * The ID for card
+     */
+    id?: string;
+    /**
+     * Country name
+     **/
+    name: string;
+    /**
+     * Country flag url
+     **/
+    flagSrc: string;
+    /**
+     * Mark item as selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when card is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export const OrCountryCard: React.FC<OrCountryCardProps>;
+export interface OrCvcInputProps {
+    /**
+     * Disabled input
+     */
+    disabled?: boolean;
+    /**
+     * Rules for validation
+     * @default []
+    */
+    rules?: MlFromItemProps['rules'];
+    /**
+     * inputs label
+     */
+    label?: string | string[];
+}
+export const OrCvcInput: React.FC<OrCvcInputProps>;
+export interface OrLayoutProps {
+    /**
+     * Children component
+     */
+    children?: React.ReactNode;
+    /**
+     * Indicate if layout fill the height
+     */
+    $fullHeight?: boolean;
+    /**
+     * Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
+     */
+    hasSider?: boolean;
+}
+export const OrLayout: React.FC<OrLayoutProps>;
+export interface OrSiderProps {
+    /**
+     * Breakpoints of the responsive layout
+     */
+    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Styled box shadow
+     */
+    $boxShadow?: string;
+    /**
+     * Children component
+     */
+    children?: React.ReactNode;
+    /**
+     * To set the current status	boolean
+     */
+    collapsed?: boolean;
+    /**
+     * Width of the collapsed sidebar, by setting to 0 a special trigger will appear
+     */
+    collapsedWidth?: number;
+    /**
+     * To set the initial status
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Width of the sidebar
+     */
+    width?: number | string;
+    /**
+     * The callback function, executed when breakpoints changed
+     */
+    onBreakpoint?: (broken: boolean) => void;
+    /**
+     * The callback function, executed by clicking the trigger or activating the responsive layout
+     */
+    onCollapse?: SiderProps['onCollapse'];
+}
+export const OrSider: React.FC<OrSiderProps>;
+export interface OrMenuProps {
+    /**
+     * Array with the keys of default opened sub menus
+     */
+    defaultOpenKeys?: string[];
+    /**
+     * Array with the keys of default selected menu items
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * custom expand icon of submenu
+     */
+    expandIcon?: MenuProps['expandIcon'];
+    /**
+     * 	Menu item content
+     */
+    items?: MenuProps['items'];
+    /**
+     * Type of menu
+     */
+    mode?: 'vertical' | 'horizontal' | 'inline';
+    /**
+     * Allows selection of multiple items
+     */
+    multiple?: boolean;
+    /**
+     * Called when a menu item is clicked
+     */
+    onClick?: MenuProps['onClick'];
+    /**
+     * Called when a menu item is selected
+     */
+    onSelect?: MenuProps['onSelect'];
+}
+export const OrMenu: React.FC<OrMenuProps>;
+export interface OrSiderMenuProps {
+    /**
+     * Indicate if the menu is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * 	Menu item content
+     */
+    items?: OrMenuProps['items'];
+    /**
+     * 	Botton menu item content
+     */
+    bottomItems?: OrMenuProps['items'];
+    /**
+     * On click collapsed button
+     */
+    onClickCollapsed?: () => void;
+    /**
+     * Called when a menu item is clicked
+     */
+    onClick?: OrMenuProps['onClick'];
+    /**
+     * Called when a bottom menu item is clicked
+     */
+    onClickBottomItems?: OrMenuProps['onClick'];
+    /**
+     * Called when a menu item is selected
+     */
+    onSelect?: OrMenuProps['onSelect'];
+    children?: React.ReactNode;
+}
+export const OrSiderMenu: React.FC<OrSiderMenuProps>;
+export interface OrHeaderProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * option for select
+     */
+    countrySelectOptions?: {
+        value: string;
+        label: string;
+        icon?: JSX.Element;
+    }[];
+    /**
+     * Default Value for select
+     */
+    selectValue?: string;
+    /**
+     * Placeholder for select
+     */
+    selectPlaceholder?: string;
+    /**
+     * Called when an option is selected, the params are option's value (or key) and option instance
+     */
+    onSelect?: AtSelectProps['onChange'];
+    /**
+     * buttons options
+     */
+    navItems?: {
+        value?: string;
+        label?: string;
+        icon: JSX.Element;
+        onclick?: React.MouseEventHandler<HTMLAnchorElement> & React.MouseEventHandler<HTMLButtonElement>;
+    }[];
+    /**
+     * Avatar image
+     */
+    avatar?: string;
+    /**
+     * Avatar name
+     */
+    avatarName?: string;
+    /**
+     * Avatar click
+     */
+    onClickAvatar?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    /**
+     * Children component
+     */
+    children?: React.ReactNode;
+}
+export const OrHeader: React.FC<OrHeaderProps>;
+export interface OrDashboardLayoutProps {
+    /**
+     * Indicate if the menu is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * Children components
+     */
+    children?: React.ReactNode;
+    /**
+     * Menu items to show in sider menu
+     */
+    menuItems?: OrSiderMenuProps['items'];
+    /**
+     * On click collapsed button
+     */
+    onClickCollapsed?: () => void;
+    /**
+     * Called when a menu item is clicked
+     */
+    onClick?: OrSiderMenuProps['onClick'];
+    /**
+     * Called when a bottom menu item is clicked
+     */
+    onClickBottomItems?: OrSiderMenuProps['onClick'];
+    /**
+     * Called when a menu item is selected
+     */
+    onSelect?: OrSiderMenuProps['onSelect'];
+    /**
+     * Called when a region item is selected
+     */
+    onSelectCountry?: OrHeaderProps['onSelect'];
+    /**
+     * Header select options
+     */
+    countrySelectOptions?: OrHeaderProps['countrySelectOptions'];
+    /**
+     * Header nav items
+     */
+    navItems?: OrHeaderProps['navItems'];
+    /**
+     * Header avatar
+     */
+    avatar?: OrHeaderProps['avatar'];
+    /**
+     * Header avatar name
+     */
+    avatarName?: OrHeaderProps['avatarName'];
+    /**
+     * Default selected country
+     */
+    selectValue?: OrHeaderProps['selectValue'];
+    /**
+     * Nav item at the end of the sider
+     */
+    bottomItems?: OrSiderMenuProps['bottomItems'];
+}
+export const OrDashboardLayout: React.FC<OrDashboardLayoutProps>;
+export interface OrDrawerProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Whether Drawer should get focused after open
+     */
+    autoFocus?: boolean;
+    /**
+     * Callback after the animation ends when switching drawers
+     */
+    afterOpenChange?: (open: boolean) => void;
+    /**
+     * Style of the drawer content part
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Config Drawer Panel className. Use rootClassName if want to config top dom style
+     */
+    className?: string;
+    /**
+     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     */
+    closeIcon?: boolean | ReactNode;
+    /**
+     * Style of the drawer wrapper of content part
+     */
+    contentWrapperStyle?: CSSProperties;
+    /**
+     * Whether to unmount child components on closing drawer or not
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Extra actions area at corner
+     */
+    extra?: ReactNode;
+    /**
+     * The footer for Drawer
+     */
+    footer?: ReactNode;
+    /**
+     * Style of the drawer footer part
+     */
+    footerStyle?: CSSProperties;
+    /**
+     * Pre-render Drawer component forcibly
+     */
+    forceRender?: boolean;
+    /**
+     * mounted node and display window for Drawer
+     */
+    getContainer?: DrawerProps['getContainer'];
+    /**
+     * Style of the drawer header part
+     */
+    headerStyle?: CSSProperties;
+    /**
+     * Placement is top or bottom, height of the Drawer dialog
+     */
+    height?: string | number;
+    /**
+     * Whether support press esc to close
+     */
+    keyboard?: boolean;
+    /**
+     * Whether to show mask or not
+     */
+    mask?: boolean;
+    /**
+     * Clicking on the mask (area outside the Drawer) to close the Drawer or not
+     */
+    maskClosable?: boolean;
+    /**
+     * Style for Drawer's mask element
+     */
+    maskStyle?: CSSProperties;
+    /**
+     * The placement of the Drawer
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Nested drawers push behavior
+     */
+    push?: boolean | {
+        distance: string | number;
+    };
+    /**
+     * The class name of the container of the Drawer dialog
+     */
+    rootClassName?: string;
+    /**
+     * Style of wrapper element which contains mask compare to style
+     */
+    rootStyle?: CSSProperties;
+    /**
+     * Style of Drawer panel. Use bodyStyle if want to config body only
+     */
+    style?: CSSProperties;
+    /**
+     * preset size of drawer, default 378px and large 736px
+     */
+    size?: 'default' | 'large';
+    /**
+     * The title for Drawer
+     */
+    title?: ReactNode;
+    /**
+     * Whether the Drawer dialog is visible or not
+     */
+    open?: boolean;
+    /**
+     * Width of the Drawer dialog
+     */
+    width?: string | number;
+    /**
+     * The z-index of the Drawer
+     */
+    zIndex?: number;
+    /**
+     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
+     */
+    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Children of the drawer
+     */
+    children?: React.ReactNode;
+}
+export const OrDrawer: React.FC<OrDrawerProps>;
+export interface OrFlagGridProps {
+    /**
+     * The ID for cards
+     */
+    id?: string;
+    /**
+     * Country data to show elements into the grid
+     */
+    data?: OrCountryCardProps[];
+    /**
+     * Number of items that can contain a row
+     */
+    itemsPerRow?: number;
+    /**
+     * Index selected Item
+     */
+    selectedItem?: number;
+    /**
+     * Callback when card is clicked
+     */
+    onSelectCard?: (index: number) => void;
+}
+export const OrFlagGrid: React.FC<OrFlagGridProps>;
+export interface OrFormProps extends FormProps {
+    children: React.ReactNode;
+}
+export const OrForm: React.FC<OrFormProps>;
+export interface AtSpaceCompactProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Option to fit width to its parent's width
+     */
+    block?: boolean;
+    /**
+     * Set direction of layout
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Set child component size
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * Children of the OrSpace
+     */
+    children?: React.ReactNode;
+}
+export const OrSpaceCompact: React.FC<AtSpaceCompactProps>;
+export interface OrPhoneInputProps {
+    /**
+     * Dial codes options
+     */
+    options: AtSelectProps['options'];
+    /**
+     * Disabled input
+     */
+    disabled?: boolean;
+    /**
+     * Rules for validation
+     * @default []
+    */
+    rules?: MlFromItemProps['rules'];
+}
+export const OrPhoneInput: React.FC<OrPhoneInputProps>;
+export interface OrNameInputProps {
+    /**
+     * Rules for validation
+     * @default []
+    */
+    rules?: MlFromItemProps['rules'];
+    /**
+     * inputs label
+     */
+    label?: string | string[];
+}
+export const OrNameInput: React.FC<OrNameInputProps>;
+export interface OrFormInLineItem {
+    /**
+     * Type of components available for the form
+     */
+    component: 'radio' | 'number-input' | 'checkbox' | 'select' | 'select-multiple' | 'text' | 'phone' | 'date-picker' | 'cvc' | 'name';
+    /**
+     * Label of the field
+     */
+    label?: string | string[];
+    /**
+     * Key identifier
+     */
+    key?: string;
+    /**
+     * Field name (develop purpose)
+     */
+    fieldName: string;
+    /**
+     * Place holder (only for inputs)
+     */
+    placeHolder?: string;
+    /**
+     * Children of the FormItems (Recursive Form)
+     */
+    children?: OrFormItemsInlineProps | React.ReactElement | string;
+    /**
+     * Specifies options for fields that allows options
+     */
+    options?: MlRadioGroupProps['options'] | MlCheckboxGroup['options'] | AtSelectProps['options'];
+    /**
+     * Rules for field validation. Click [here](https://ant.design/components/form#components-form-demo-basic) to see an example
+     */
+    rules?: MlFromItemProps['rules'];
+    hidden?: boolean;
+    disabled?: boolean;
+    styles?: CSSProperties;
+    addonAfter?: ReactNode;
+    onSearch?: (value: string) => any;
+    showSearch?: boolean;
+    onChange?: (value: any, option: DefaultOptionType | Array<DefaultOptionType>) => any;
+    /**
+     * Format of the date
+     */
+    format?: string;
+}
+export interface OrFormItemsInlineProps {
+    inputs?: OrFormInLineItem[];
+}
+export const OrFormItemsInline: React.FC<OrFormItemsInlineProps>;
+export interface OrTableModuleLayoutProps {
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * page subtitle
+     */
+    subtitle?: string;
+    /**
+     * subtitle Content
+     */
+    subtitleContent?: string;
+    /**
+     * Children component
+     */
+    children?: React.ReactNode;
+}
+export const OrTableModuleLayout: React.FC<OrTableModuleLayoutProps>;
+export interface OrHeaderBalanceProps {
+    /**
+     * The title of the drawer
+     */
+    title?: string;
+    /**
+     * The subtitle of the drawer
+     */
+    subtitle?: string;
+    /**
+     * The balance of the drawer
+     */
+    balance?: string;
+}
+export const OrHeaderBalance: React.FC<OrHeaderBalanceProps>;
+export interface OrLoginLayoutProps {
+    /**
+     * Carousel image background source
+     */
+    $carouselBackgroundSrc?: string;
+    /**
+     * Images to show into carousel
+     */
+    carouselImages: string[];
+    /**
+     * Content to render into layout
+     */
+    children?: React.ReactNode;
+}
+export const OrLoginLayout: React.FC<OrLoginLayoutProps>;
+type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps);
+export type instanceModal = {
+    destroy: () => void;
+    update: (configUpdate: ConfigUpdate) => void;
+} | null;
+interface OrModalProps {
+    /**
+     * Specify a function that will be called when modal is closed completely
+     */
+    afterClose?: () => void;
+    /**
+     * Body style for modal body element. Such as height, padding etc
+     */
+    bodyStyle?: React.CSSProperties;
+    /**
+     * The cancel button props
+     */
+    cancelButtonProps?: ModalProps['cancelButtonProps'];
+    /**
+     * Text of the Cancel button
+     */
+    cancelText?: React.ReactNode;
+    /**
+     * Centered Modal
+     */
+    centered?: boolean;
+    /**
+     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * Whether to apply loading visual effect for OK button or not
+     */
+    confirmLoading?: boolean;
+    /**
+     * Whether to unmount child components on onClose
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Footer content, set as footer={null} when you don't need default buttons
+     */
+    footer?: React.ReactNode;
+    /**
+     * Force render Modal
+     */
+    forceRender?: boolean;
+    /**
+     * The mounted node for Modal but still display at fullscreen
+     */
+    getContainer?: ModalProps['getContainer'];
+    /**
+     * Whether support press esc to close
+     */
+    keyboard?: boolean;
+    /**
+     * Whether show mask or not
+     */
+    mask?: boolean;
+    /**
+     * Whether to close the modal dialog when the mask (area outside the modal) is clicked
+     */
+    maskClosable?: boolean;
+    /**
+     * Style for modal's mask element
+     */
+    maskStyle?: React.CSSProperties;
+    /**
+     * Custom modal content render
+     */
+    modalRender?: (node: React.ReactNode) => React.ReactNode;
+    /**
+     * The ok button props
+     */
+    okButtonProps?: ModalProps['okButtonProps'];
+    /**
+     * Text of the OK button
+     */
+    okText?: React.ReactNode;
+    /**
+     * Button type of the OK button
+     */
+    okType?: ModalProps['okType'];
+    /**
+     * The modal dialog's title
+     */
+    title?: ModalProps['title'];
+    /**
+     * Whether the modal dialog is visible or not
+     */
+    visible?: boolean;
+    /**
+     * Open Modal with async logic
+     */
+    open?: boolean;
+    /**
+     * Width of the modal dialog
+     */
+    width?: string | number;
+    /**
+     * The class name of the container of the modal dialog
+     */
+    wrapClassName?: string;
+    /**
+     * The z-index of the Modal
+     */
+    zIndex?: number;
+    /**
+     * Specify a function that will be called when a user clicks mask, close button on top right or Cancel button
+     */
+    onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Specify a function that will be called when a user clicks the OK button
+     */
+    onOk?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Callback when the animation ends when Modal is turned on and off
+     */
+    afterOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * children of Modal
+     */
+    children?: React.ReactNode;
+    /**
+     * Content of the confirm dialog
+     */
+    content?: string | React.ReactNode;
+}
+export const OrModal: React.FC<OrModalProps>;
+export interface OrModuleTableHeaderProps {
+    /**
+     * Title of the module table header
+     */
+    title?: string;
+    /**
+     * Search box placeholder
+     */
+    searchBoxPlaceholder?: string;
+    /**
+     * Search box value
+     */
+    searchBoxValue?: string;
+    /**
+     * Search box onChange
+     */
+    searchBoxOnChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * Search box onSearch
+     */
+    searchBoxOnSearch?: ((value: string, event?: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Search box onPressEnter
+     */
+    searchBoxOnPressEnter?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * Button value
+     */
+    buttonValue?: string;
+    /**
+     * Button onClick
+     */
+    buttonOnClick?: (React.MouseEventHandler<HTMLAnchorElement> & React.MouseEventHandler<HTMLButtonElement>) | undefined;
+    /**
+     * Custom component to render at left side
+     */
+    customLeftElements?: React.ReactNode;
+}
+export const OrModuleTableHeader: React.FC<OrModuleTableHeaderProps>;
+export interface OrStepProp {
+    /**
+     * To set the current step, counting from 0. You can overwrite this state by using status of Step
+     */
+    current?: number;
+    /**
+     * To specify the direction of the step bar, horizontal or vertical
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     *
+     */
+    initial?: number;
+    /**
+     *  Place title and description with horizontal or vertical direction
+     * */
+    labelPlacement?: 'horizontal' | 'vertical';
+    /**
+     * Progress circle percentage of current step in process status (only works on basic Steps)
+     */
+    percent?: number;
+    /**
+     * Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
+     */
+    progressDot?: StepsProps['progressDot'];
+    /**
+     * Change to vertical direction when screen width smaller than 532px
+     */
+    responsive?: boolean;
+    /**
+     * To specify the size of the step bar, default and small are currently supported
+     */
+    size?: 'default' | 'small';
+    /**
+     * To specify the status of current step, can be set to one of the following values: wait process finish error
+     */
+    status?: 'wait' | 'process' | 'finish' | 'error';
+    /**
+     * Type of steps, can be set to one of the following values: default navigation inline
+     */
+    type?: 'default' | 'navigation' | 'inline';
+    /**
+     * Trigger when Step is changed
+     */
+    onChange?: (current: number) => void;
+    /**
+     * StepItem content
+     */
+    items?: StepsProps['items'];
+    /**
+     * Element margin
+     */
+    $margin?: string;
+}
+export const OrStep: React.FC<OrStepProp>;
+interface _IFormData1 {
+    businessName?: string;
+    name?: string;
+    rif?: string;
+    phone: {
+        dialCode: string;
+        phone: string;
+    };
+    city?: string;
+}
+export interface IFormStep {
+    title: string;
+    inputs?: OrFormItemsInlineProps['inputs'];
+    submitButtonText?: string;
+    image?: string;
+    cancelButtonText?: string;
+    onCancelClick?: () => void;
+    formInitialItems?: _IFormData1;
+    form?: OrFormProps['form'];
+    onFinish?: (e: any) => void;
+    cancelBtnIcon?: ReactNode;
+}
+export interface TmCrudPageProps {
+    /**
+     * Columns of table
+     */
+    columns: OrTableProps['columns'];
+    /**
+     * Data record array to be displayed
+     */
+    data: OrTableProps['dataSource'];
+    /**
+     * Loading status of table
+     */
+    loadingTable?: OrTableProps['loading'];
+    /**
+     * Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false
+     */
+    pagination?: OrTableProps['pagination'];
+    /**
+     * Row's unique key, could be a string or function that returns a string
+     */
+    rowKey?: OrTableProps['rowKey'];
+    /**
+     * On change form content
+     */
+    onValuesChange?: OrFormProps['onValuesChange'];
+    /**
+     * On press cancel and close button function
+     */
+    handleCloseCallback?: () => void;
+    /**
+     * State of the drawer
+     */
+    open?: boolean;
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * Page subtitle
+     */
+    subtitle?: string;
+    /**
+     * Page subtitle content
+     */
+    subContent?: string;
+    /**
+     * Page table title
+     */
+    tableTitle?: string;
+    /**
+     * Button value text
+     */
+    buttonAddText?: string;
+    /**
+     * Callback when add button is pressed
+     */
+    addButtonOnClick?: OrModuleTableHeaderProps['buttonOnClick'];
+    /**
+     * Callback when pagination changes
+     */
+    onChangePagination?: MlPaginationProps['onChange'];
+    /**
+     * Total table elements
+     */
+    total?: MlPaginationProps['total'];
+    /**
+     * Way to display total pagination table
+     */
+    showTotal?: MlPaginationProps['showTotal'];
+    /**
+     * Table page size
+     */
+    pageSize?: MlPaginationProps['pageSize'];
+    /**
+     * Current page table
+     */
+    currentPage?: number;
+    /**
+     * Disable buttons drawer
+     */
+    disabledButtons?: boolean;
+    /**
+     * Form Steps info
+     */
+    formSteps: IFormStep[];
+    /**
+     * current step
+     */
+    currentFormStep?: number;
+    /**
+     * Search table elements
+     */
+    searchBoxOnSearch?: OrModuleTableHeaderProps['searchBoxOnSearch'];
+    /**
+     * title of drawer
+     */
+    titleLeftDrawer?: ReactNode;
+    /**
+     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
+     */
+    onCloseLeftDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * whether left drawer is open or close
+     */
+    openLeftDrawer?: boolean;
+    /**
+     * Children for Left Drawer
+     */
+    leftDrawerContent?: React.ReactNode;
+    /**
+     * Custom component to render at left side of table header
+     */
+    tableHeaderCustomLeftElements?: React.ReactNode;
+    /**
+     * Drawer Width
+     */
+    leftDrawerWidth?: number;
+    /**
+     * searchBox placeHolder
+     */
+    searchBoxPlaceholder?: string;
+}
+export const TmCrudPage: React.FC<TmCrudPageProps>;
+export interface OrSimpleBannerProps {
+    /**
+     * Id of the OrSimpleBannerProps
+     */
+    id?: string;
+    /**
+     * Background image for banner
+     */
+    $backgroundSrc?: string;
+}
+export const OrSimpleBanner: React.FC<OrSimpleBannerProps>;
+export interface TmLoginCountryProps {
+    data?: OrCountryCardProps[];
+    title?: string;
+    itemsPerRow?: number;
+    $backgroundSrc?: string;
+    /**
+     * Index selected Item
+     */
+    selectedItem?: number;
+    /**
+     * Callback when card is clicked
+     */
+    onSelectCard?: (index: number) => void;
+}
+export const TmLoginCountry: React.FC<TmLoginCountryProps>;
+export interface IRegion {
+    id: string;
+    countryName: string;
+    region: string;
+    city: string;
+}
+export interface IFormData {
+    phone: {
+        dialCode: string;
+        phone: string;
+    };
+}
+export interface TmLoginPhoneProps {
+    countrySelectOptions?: IRegion[];
+    /**
+     * Welcome title
+     */
+    title?: string;
+    /**
+     * Highlighted text into title
+     */
+    highlightedTitle?: string;
+    /**
+     * Submit button text
+     */
+    buttonText: string;
+    /**
+     * Form init values
+     */
+    initialValues?: IFormData;
+    /**
+     * Dial codes available
+     */
+    dialCodes: string[];
+    /**
+     * Phone regex validation
+     */
+    phoneRegex?: RegExp;
+    /**
+     * Phone validation message
+     */
+    phoneValidationMessage?: string;
+    /**
+     * Phone validation input message
+     */
+    ruleMessage?: string;
+    /**
+     * On submit function
+     */
+    onFinish?: FormProps['onFinish'];
+    /**
+     * Form ref
+     */
+    form?: FormProps['form'];
+    /**
+     * Show country select
+     */
+    showCountrySelect?: boolean;
+}
+export const TmLoginPhone: React.FC<TmLoginPhoneProps>;
+export interface TmLoginPhoneCodeProps {
+    /**
+     * Page title
+     */
+    title: string;
+    /**
+     * Page title highlighted
+     */
+    highlightedTitle: string;
+    /**
+     * Page description
+     */
+    description: string;
+    /**
+     * Button text
+     */
+    buttonText: string;
+    /**
+     * On submit function
+     */
+    onFinish?: FormProps['onFinish'];
+    /**
+     * Form ref
+     */
+    form?: FormProps['form'];
+    /**
+     * Countdown description
+     */
+    countdownDescription?: string;
+    /**
+     * Countdown value
+     */
+    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 TmRechargePageProps {
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    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
+     */
+    radioGroupItems?: MlRadioGroupProps['options'];
+    /**
+     * Radio group default value
+     */
+    radioDefaultValue?: string;
+    /**
+     * Amount to pay text
+     */
+    amountToPayText?: string;
+    /**
+     * Amount to pay
+     */
+    amountToPay?: string;
+    /**
+     * Coupon text
+     */
+    couponText?: string;
+    /**
+     * Discount
+     */
+    discount?: string;
+    /**
+     * Total text
+     */
+    totalText?: string;
+    /**
+     * Total
+     */
+    total?: string;
+    /**
+     *  Tax text
+     */
+    taxText?: string;
+    /**
+     * Tax
+     */
+    tax?: string;
+    /**
+     * Pay button text
+     */
+    payBtn?: string;
+    /**
+     * Apply coupon click
+     */
+    applyCouponClick?: () => void;
+    /**
+     * Pay click
+     */
+    payClick?: () => 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;
+    /**
+     * on value change function
+     */
+    onValuesChange?: (changedValues: any, allValues: any) => void;
+    /**
+     * Disable continue button drawer
+     */
+    disabledButton?: boolean;
+    /**
+     * Show payment methods
+     */
+    showPaymentMethods?: boolean;
+    /**
+     * terms and conditions disclaimer
+     */
+    temsDisclaimer?: string;
+    /**
+     * terms and conditions change
+     */
+    termsChange?: ((e: CheckboxChangeEvent) => void) | undefined;
+    /**
+     * onCloseDrawer function
+     */
+    onCloseDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export const TmRechargePage: React.FC<TmRechargePageProps>;
+export interface OrPaymentCardProps {
+    /**
+     * The title of the card
+     */
+    cardTitle: string;
+    /**
+     * 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
+     */
+    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
+     */
+    radioGroupItems?: MlRadioGroupProps['options'];
+    /**
+     * Radio group default value
+     */
+    radioDefaultValue?: string;
+    /**
+     * Amount to pay text
+     */
+    amountToPayText?: string;
+    /**
+     * Amount to pay
+     */
+    amountToPay?: string;
+    /**
+     * Coupon text
+     */
+    couponText?: string;
+    /**
+     * Discount
+     */
+    discount?: string;
+    /**
+     * Total text
+     */
+    totalText?: string;
+    /**
+     * Total
+     */
+    total?: string;
+    /**
+     *  Tax text
+     */
+    taxText?: string;
+    /**
+     * Tax
+     */
+    tax?: string;
+    /**
+     * Pay button text
+     */
+    payBtn?: string;
+    /**
+     * Apply coupon click
+     */
+    applyCouponClick?: () => void;
+    /**
+     * Pay click
+     */
+    payClick?: () => void;
+    /**
+     * onChange radio group
+     */
+    onChangeRadio?: MlRadioGroupProps['onChange'];
+}
+export const OrPaymentCard: React.FC<OrPaymentCardProps>;
+export interface PaymentMethod {
+    value: string;
+    icon?: React.ReactNode;
+    onClick: (value: string) => void;
+}
+export interface OrPaymentMethodsProps {
+    /**
+     * 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;
+    /**
+     * on value change function
+     */
+    onValuesChange?: (changedValues: any, allValues: any) => void;
+    /**
+     * Disable continue button drawer
+     */
+    disabledButton?: boolean;
+    /**
+     * Show payment methods
+     */
+    showPaymentMethods?: boolean;
+    /**
+     * terms and conditions disclaimer
+     */
+    temsDisclaimer?: string;
+    /**
+     * terms and conditions change
+     */
+    termsChange?: ((e: CheckboxChangeEvent) => void) | undefined;
+    /**
+     * onCloseDrawer function
+     */
+    onCloseDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export const OrPaymentMethods: React.FC<OrPaymentMethodsProps>;
+export interface OrRechargeProps {
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    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
+     */
+    radioGroupItems?: MlRadioGroupProps['options'];
+    /**
+     * Radio group default value
+     */
+    radioDefaultValue?: string;
+    /**
+     * Amount to pay text
+     */
+    amountToPayText?: string;
+    /**
+     * Amount to pay
+     */
+    amountToPay?: string;
+    /**
+     * Coupon text
+     */
+    couponText?: string;
+    /**
+     * Discount
+     */
+    discount?: string;
+    /**
+     * Total text
+     */
+    totalText?: string;
+    /**
+     * Total
+     */
+    total?: string;
+    /**
+     *  Tax text
+     */
+    taxText?: string;
+    /**
+     * Tax
+     */
+    tax?: string;
+    /**
+     * Pay button text
+     */
+    payBtn?: string;
+    /**
+     * Apply coupon click
+     */
+    applyCouponClick?: () => void;
+    /**
+     * Pay click
+     */
+    payClick?: () => void;
+    /**
+     * onChange radio group
+     */
+    onChangeRadio?: MlRadioGroupProps['onChange'];
+}
+export const OrRecharge: React.FC<OrRechargeProps>;
+export interface AtSpaceProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Align items
+     */
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    /**
+     * The space direction
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * The space size
+     */
+    size?: SpaceProps['size'];
+    /**
+     * Set split
+     */
+    split?: ReactNode;
+    /**
+     * Auto wrap line, when horizontal effective
+     */
+    wrap?: boolean;
+    /**
+     * Children of the OrSpace
+     */
+    children?: React.ReactNode;
+}
+export const OrSpace: React.FC<AtSpaceProps>;
+export interface OrTableProps {
+    /**
+     * Whether to show all table borders
+     */
+    bordered?: boolean;
+    /**
+     * Columns of table
+     */
+    columns: TableProps<AnyObject>['columns'];
+    /**
+     * Data record array to be displayed
+     */
+    dataSource: TableProps<AnyObject>['dataSource'];
+    /**
+     * Loading status of table
+     */
+    loading?: TableProps<AnyObject>['loading'];
+    /**
+     * Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false
+     */
+    pagination?: TableProps<AnyObject>['pagination'];
+    /**
+     * Row's unique key, could be a string or function that returns a string
+     */
+    rowKey?: TableProps<AnyObject>['rowKey'];
+    /**
+     * 	Size of table
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * Set sticky header and scroll bar
+     */
+    sticky?: boolean;
+    /**
+     * Table title renderer
+     */
+    title?: TableProps<AnyObject>['title'];
+    /**
+     * Callback executed when pagination, filters or sorter is changed
+     */
+    onChange?: TableProps<AnyObject>['onChange'];
+}
+export const OrTable: React.FC<OrTableProps>;
+export const useMessage: () => readonly [import("antd/es/message/interface").MessageInstance, import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>];
+export const useModal: () => readonly [instance: import("antd/es/modal/useModal").HookAPI, contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>];
+export const useForm: <T = any>() => [import("antd").FormInstance<T>];
+
+//# sourceMappingURL=index.d.ts.map