@zealicsolutions/web-ui 0.0.1

package/dist/molecules/index.d.ts

@@ -0,0 +1,281 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form/dist/types';
+import { CSSProperties } from 'styled-components';
+import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
+import { InputFieldTypes as InputFieldTypes$1 } from 'fieldsConfiguration/types';
+import { Callback } from 'typescript';
+import { SelectOption as SelectOption$1 } from 'atoms/Select/types';
+import { PropsWithChildren } from 'react';
+import { DrawerProps as DrawerProps$1 } from '@mui/material';
+import { SizesTypes as SizesTypes$1 } from 'theme/types';
+
+declare type FieldRuleLabelTypes = 'OPTIONAL' | 'REQUIRED';
+declare type FieldLabelsProps = {
+    label: string;
+    tooltipText?: string;
+    isError?: boolean;
+    ruleLabel?: FieldRuleLabelTypes;
+};
+declare const FieldLabels: ({ label, isError, ruleLabel, tooltipText }: FieldLabelsProps) => JSX.Element;
+
+declare type BaseButtonProps = {
+    onClick?: Callback;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+declare type ButtonProps = BaseButtonProps & {
+    fullWidth?: boolean;
+    text?: string;
+    loading?: boolean;
+};
+
+declare type CheckBoxProps = {
+    value: boolean;
+    onClick: (value: boolean) => void;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+};
+
+declare type SelectOption = {
+    id: string;
+    label: string;
+};
+declare type SelectProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    options: SelectOption[];
+    isError?: boolean;
+    isEditMode?: boolean;
+};
+
+declare type InputIconProps = {
+    name: IconNames$1;
+    onClick?: Callback;
+};
+declare type InputProps = {
+    value?: string;
+    leftIcon?: InputIconProps;
+    rightIcon?: InputIconProps;
+    onBlur?: Callback;
+    type?: InputFieldTypes$1;
+    placeholder?: string;
+    disabled?: boolean;
+    isEditMode?: boolean;
+    isError?: boolean;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+};
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+declare type IconProps = {
+    name: IconNames;
+    size?: number;
+    color?: ThemeColors | string;
+    pointerEvents?: 'auto' | 'none';
+};
+declare const availableIcons: {
+    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+};
+declare type IconNames = keyof typeof availableIcons;
+
+declare type ImageProps = {
+    src: string;
+    alt?: string;
+    styles?: CSSProperties;
+};
+
+declare type LinkButtonProps = PropsWithChildren<{
+    activeOpacity?: number;
+    withoutOpacityEffect?: boolean;
+    disabled?: boolean;
+    onClick?: Callback;
+}>;
+
+declare type AvatarProps = {
+    size?: SizesTypes | number;
+    withShadow?: boolean;
+    label?: string;
+    backgroundColor?: ThemeColors;
+    textConfig?: {
+        color?: ThemeColors;
+        font?: SizesTypes;
+    };
+    content: {
+        initials?: string;
+        iconName?: IconNames;
+        imageUrl?: string;
+    };
+    onPress?: Callback;
+};
+
+declare type InputFieldProps = {
+    name: string;
+    control?: Control<any>;
+    required?: boolean;
+    optional?: boolean;
+    defaultValue?: string;
+    inputProps: InputProps;
+    styles?: CSSProperties;
+    labelsProps?: FieldLabelsProps;
+};
+declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, }: InputFieldProps) => JSX.Element;
+
+declare type InputFieldTypes = 'number' | 'text' | 'email' | 'password';
+declare type UIField<T = string> = (UIInputField | UISelectField | UICheckboxField) & {
+    name: T;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    optional?: boolean;
+    tooltip?: string;
+};
+declare type UIInputField = {
+    type: 'input';
+    inputType?: InputFieldTypes;
+    maxLength?: number;
+};
+declare type UISelectField = {
+    type: 'select';
+    options: SelectOption$1[];
+};
+declare type UICheckboxField = {
+    type: 'checkbox';
+    checkboxLabel?: string;
+};
+
+declare type FieldMapperProps<T extends object> = {
+    field: UIField<keyof T>;
+    control: Control<T>;
+    spacer?: number;
+};
+declare const FieldMapper: <T extends object>({ field, spacer, control, }: FieldMapperProps<T>) => JSX.Element;
+
+declare type CheckboxFieldProps = {
+    name: string;
+    control: Control<any>;
+    defaultValue?: boolean;
+    checkboxProps: Omit<CheckBoxProps, 'error' | 'onClick' | 'value'>;
+};
+declare const CheckboxField: ({ control, name, checkboxProps, defaultValue, }: CheckboxFieldProps) => JSX.Element;
+
+declare type SelectFieldProps = {
+    selectProps: SelectProps;
+    labelsProps?: FieldLabelsProps;
+    name: string;
+    control: Control<any>;
+    required?: boolean;
+    optional?: boolean;
+    defaultValue?: string;
+    styles?: CSSProperties;
+};
+declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, }: SelectFieldProps) => JSX.Element;
+
+declare type CustomValidationRule<T = string> = {
+    text: string;
+    validate: (value?: T) => boolean;
+};
+declare type CustomValidationProps<T = string> = {
+    label?: string;
+    value: T;
+    isSubmitted?: boolean;
+    rules: CustomValidationRule<T>[];
+};
+declare const CustomValidation: <T extends string = string>({ rules, value, isSubmitted, label, }: CustomValidationProps<T>) => JSX.Element;
+
+declare type BaseSelectableProps<T> = {
+    iconName: IconNames;
+    infoText: string;
+    isActive?: boolean;
+    onClick?: (value: T) => void;
+    value: T;
+};
+
+declare type SelectableCardGroupProps<T> = {
+    cards: BaseSelectableProps<T>[];
+    handleChange?: (value: T | undefined) => void;
+    spacing?: SizesTypes;
+    initialValue?: T;
+};
+declare const SelectableCardGroup: <T extends string>({ cards, handleChange, spacing, initialValue, }: SelectableCardGroupProps<T>) => JSX.Element;
+
+declare type BannerProps = {
+    backgroundImage: ImageProps;
+    title: string;
+    description?: string;
+    button?: ButtonProps;
+};
+declare const Banner: ({ backgroundImage, button, title, description }: BannerProps) => JSX.Element;
+
+declare type Anchor = 'top' | 'left' | 'bottom' | 'right';
+declare type DrawerProps = DrawerProps$1 & {
+    anchor: Anchor;
+};
+
+declare const Drawer: ({ children, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
+
+declare type InfoBoxProps = {
+    title: string;
+    description?: string;
+    linkButton?: LinkButtonProps;
+    icon?: IconNames;
+};
+declare const InfoBox: ({ title, icon, description, linkButton }: InfoBoxProps) => JSX.Element;
+
+declare type MenuItem<T> = {
+    id: T;
+    title: string;
+    onClick?: (id: T) => void;
+};
+declare type MenuItemsProps<T> = {
+    title?: string;
+    onItemPress?: (id: T) => void;
+    options?: MenuItem<T>[];
+};
+declare const MenuItems: <T extends string | number>({ title, onItemPress, options, }: MenuItemsProps<T>) => JSX.Element;
+
+declare type AvatarDropdownProps<T> = {
+    avatarProps: AvatarProps;
+    menuConfig: MenuItemsProps<T>;
+};
+declare const AvatarDropdown: <T extends string | number>({ avatarProps, menuConfig, }: AvatarDropdownProps<T>) => JSX.Element;
+
+declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+    disabled?: boolean;
+    isActive?: boolean;
+    onClick?: (key: T) => void;
+    options?: MenuItem<K>[];
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type TabGroupProps<T = string, K = string> = {
+    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    activeTabKey: T;
+    spacing?: SizesTypes$1;
+    onTabChange?: (tabKey: T) => void;
+    onOptionClick?: (optionKey: K) => void;
+};
+declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, activeTabKey, onTabChange, }: TabGroupProps<T, K>) => JSX.Element;
+
+export { AvatarDropdown, AvatarDropdownProps, Banner, BannerProps, CheckboxField, CheckboxFieldProps, CustomValidation, CustomValidationProps, CustomValidationRule, Drawer, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, InfoBox, InfoBoxProps, InputField, InputFieldProps, MenuItem, MenuItems, MenuItemsProps, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, TabGroup, TabGroupProps };

package/dist/organisms/index.d.ts

@@ -0,0 +1,187 @@
+/// <reference types="react" />
+import { SetPasswordFields, SetPasswordRuleValidation } from 'organisms/SetPasswordForm/types';
+import { SelectOption } from 'atoms/Select/types';
+import { Callback } from 'typescript';
+import { SizesTypes as SizesTypes$1 } from 'theme/types';
+
+declare type InputFieldTypes = 'number' | 'text' | 'email' | 'password';
+declare type UIField<T = string> = (UIInputField | UISelectField | UICheckboxField) & {
+    name: T;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    optional?: boolean;
+    tooltip?: string;
+};
+declare type UIInputField = {
+    type: 'input';
+    inputType?: InputFieldTypes;
+    maxLength?: number;
+};
+declare type UISelectField = {
+    type: 'select';
+    options: SelectOption[];
+};
+declare type UICheckboxField = {
+    type: 'checkbox';
+    checkboxLabel?: string;
+};
+declare type UIFields<T extends object> = UIField<keyof T>[];
+
+declare type SetPasswordFormProps = {
+    fields: UIFields<SetPasswordFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    validations: SetPasswordRuleValidation[];
+    onSubmit: (values: SetPasswordFields) => void;
+    onBack: () => void;
+};
+declare const SetPasswordForm: ({ logoUrl, fields, validations, onBack, onSubmit, isLoading, }: SetPasswordFormProps) => JSX.Element;
+
+declare type AcquisitionFormProps<T extends object> = {
+    fields: UIFields<T>;
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit: (values: T) => void;
+    onLinkButtonClick?: Callback;
+};
+declare const AcquisitionForm: <T extends object>({ logoUrl, fields, onSubmit, onLinkButtonClick, isLoading, }: AcquisitionFormProps<T>) => JSX.Element;
+
+declare type LoginFields = {
+    email: string;
+    password: string;
+    rememberMe: boolean;
+};
+
+declare type VerificationCodeForm = {
+    code: string;
+};
+declare type AuthMethod = 'email' | 'sms';
+declare type TwoFactorAuthProps = {
+    logoUrl: string;
+    onNext?: (authMethod: AuthMethod) => Promise<void>;
+    onSubmit?: (values: VerificationCodeForm) => void;
+    onBack?: () => void;
+};
+declare const TwoFactorAuth: ({ logoUrl, onSubmit, onBack, onNext }: TwoFactorAuthProps) => JSX.Element;
+
+declare type LoginFormProps = {
+    fields: UIFields<LoginFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    twoFactorAuthConfig?: {
+        twoFactorShow: boolean;
+        twoFactorAuthProps: TwoFactorAuthProps;
+    };
+    onSubmit: (values: LoginFields) => void;
+    onSignUpButtonClick?: Callback;
+    onForgotPasswordButtonClick?: Callback;
+};
+declare const LoginForm: ({ logoUrl, fields, onSubmit, onSignUpButtonClick, isLoading, twoFactorAuthConfig, onForgotPasswordButtonClick, }: LoginFormProps) => JSX.Element;
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+declare type IconProps = {
+    name: IconNames;
+    size?: number;
+    color?: ThemeColors | string;
+    pointerEvents?: 'auto' | 'none';
+};
+declare const availableIcons: {
+    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+};
+declare type IconNames = keyof typeof availableIcons;
+
+declare type AvatarProps = {
+    size?: SizesTypes | number;
+    withShadow?: boolean;
+    label?: string;
+    backgroundColor?: ThemeColors;
+    textConfig?: {
+        color?: ThemeColors;
+        font?: SizesTypes;
+    };
+    content: {
+        initials?: string;
+        iconName?: IconNames;
+        imageUrl?: string;
+    };
+    onPress?: Callback;
+};
+
+declare type MenuItem<T> = {
+    id: T;
+    title: string;
+    onClick?: (id: T) => void;
+};
+declare type MenuItemsProps<T> = {
+    title?: string;
+    onItemPress?: (id: T) => void;
+    options?: MenuItem<T>[];
+};
+
+declare type AvatarDropdownProps<T> = {
+    avatarProps: AvatarProps;
+    menuConfig: MenuItemsProps<T>;
+};
+
+declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+    disabled?: boolean;
+    isActive?: boolean;
+    onClick?: (key: T) => void;
+    options?: MenuItem<K>[];
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type TabGroupProps<T = string, K = string> = {
+    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    activeTabKey: T;
+    spacing?: SizesTypes$1;
+    onTabChange?: (tabKey: T) => void;
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type ImportantLink = {
+    text: string;
+    href: string;
+};
+declare type HeaderProps = {
+    links?: ImportantLink[];
+    logoUrl: string;
+    tabs: TabGroupProps['tabs'];
+    withAvatar?: {
+        props: AvatarDropdownProps<string>;
+    };
+    onActionButtonClick?: Callback;
+};
+declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
+
+declare type EmailAddressFields = {
+    email: string;
+};
+declare type ForgotPasswordFormProps = {
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit?: (values: EmailAddressFields) => void;
+    onBack?: Callback;
+};
+declare const ForgotPasswordForm: ({ logoUrl, onBack, onSubmit, isLoading, }: ForgotPasswordFormProps) => JSX.Element;
+
+export { AcquisitionForm, AcquisitionFormProps, AuthMethod, ForgotPasswordForm, ForgotPasswordFormProps, Header, HeaderProps, LoginForm, LoginFormProps, SetPasswordForm, SetPasswordFormProps, TwoFactorAuth, TwoFactorAuthProps };

package/dist/pages/index.d.ts

@@ -0,0 +1,235 @@
+/// <reference types="react" />
+import { DrawerProps as DrawerProps$1 } from '@mui/material';
+import { Callback } from 'typescript';
+import { CSSProperties } from 'styled-components';
+import { SizesTypes as SizesTypes$1 } from 'theme/types';
+import { SetPasswordFields, SetPasswordRuleValidation } from 'organisms/SetPasswordForm/types';
+import { SelectOption } from 'atoms/Select/types';
+
+declare type Anchor = 'top' | 'left' | 'bottom' | 'right';
+declare type DrawerProps = DrawerProps$1 & {
+    anchor: Anchor;
+};
+
+declare type BaseButtonProps = {
+    onClick?: Callback;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+declare type ButtonProps = BaseButtonProps & {
+    fullWidth?: boolean;
+    text?: string;
+    loading?: boolean;
+};
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+declare type IconProps = {
+    name: IconNames;
+    size?: number;
+    color?: ThemeColors | string;
+    pointerEvents?: 'auto' | 'none';
+};
+declare const availableIcons: {
+    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+};
+declare type IconNames = keyof typeof availableIcons;
+
+declare type ImageProps = {
+    src: string;
+    alt?: string;
+    styles?: CSSProperties;
+};
+
+declare type AvatarProps = {
+    size?: SizesTypes | number;
+    withShadow?: boolean;
+    label?: string;
+    backgroundColor?: ThemeColors;
+    textConfig?: {
+        color?: ThemeColors;
+        font?: SizesTypes;
+    };
+    content: {
+        initials?: string;
+        iconName?: IconNames;
+        imageUrl?: string;
+    };
+    onPress?: Callback;
+};
+
+declare type InputFieldTypes = 'number' | 'text' | 'email' | 'password';
+declare type UIField<T = string> = (UIInputField | UISelectField | UICheckboxField) & {
+    name: T;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    optional?: boolean;
+    tooltip?: string;
+};
+declare type UIInputField = {
+    type: 'input';
+    inputType?: InputFieldTypes;
+    maxLength?: number;
+};
+declare type UISelectField = {
+    type: 'select';
+    options: SelectOption[];
+};
+declare type UICheckboxField = {
+    type: 'checkbox';
+    checkboxLabel?: string;
+};
+declare type UIFields<T extends object> = UIField<keyof T>[];
+
+declare type BannerProps = {
+    backgroundImage: ImageProps;
+    title: string;
+    description?: string;
+    button?: ButtonProps;
+};
+
+declare type MenuItem<T> = {
+    id: T;
+    title: string;
+    onClick?: (id: T) => void;
+};
+declare type MenuItemsProps<T> = {
+    title?: string;
+    onItemPress?: (id: T) => void;
+    options?: MenuItem<T>[];
+};
+
+declare type AvatarDropdownProps<T> = {
+    avatarProps: AvatarProps;
+    menuConfig: MenuItemsProps<T>;
+};
+
+declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+    disabled?: boolean;
+    isActive?: boolean;
+    onClick?: (key: T) => void;
+    options?: MenuItem<K>[];
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type TabGroupProps<T = string, K = string> = {
+    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    activeTabKey: T;
+    spacing?: SizesTypes$1;
+    onTabChange?: (tabKey: T) => void;
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type SetPasswordFormProps = {
+    fields: UIFields<SetPasswordFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    validations: SetPasswordRuleValidation[];
+    onSubmit: (values: SetPasswordFields) => void;
+    onBack: () => void;
+};
+
+declare type AcquisitionFormProps<T extends object> = {
+    fields: UIFields<T>;
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit: (values: T) => void;
+    onLinkButtonClick?: Callback;
+};
+
+declare type LoginFields = {
+    email: string;
+    password: string;
+    rememberMe: boolean;
+};
+
+declare type VerificationCodeForm = {
+    code: string;
+};
+declare type AuthMethod = 'email' | 'sms';
+declare type TwoFactorAuthProps = {
+    logoUrl: string;
+    onNext?: (authMethod: AuthMethod) => Promise<void>;
+    onSubmit?: (values: VerificationCodeForm) => void;
+    onBack?: () => void;
+};
+
+declare type LoginFormProps = {
+    fields: UIFields<LoginFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    twoFactorAuthConfig?: {
+        twoFactorShow: boolean;
+        twoFactorAuthProps: TwoFactorAuthProps;
+    };
+    onSubmit: (values: LoginFields) => void;
+    onSignUpButtonClick?: Callback;
+    onForgotPasswordButtonClick?: Callback;
+};
+
+declare type ImportantLink = {
+    text: string;
+    href: string;
+};
+declare type HeaderProps = {
+    links?: ImportantLink[];
+    logoUrl: string;
+    tabs: TabGroupProps['tabs'];
+    withAvatar?: {
+        props: AvatarDropdownProps<string>;
+    };
+    onActionButtonClick?: Callback;
+};
+
+declare type EmailAddressFields = {
+    email: string;
+};
+declare type ForgotPasswordFormProps = {
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit?: (values: EmailAddressFields) => void;
+    onBack?: Callback;
+};
+
+declare type DefaultTemplateProps = {
+    header: HeaderProps;
+    banner?: BannerProps;
+    renderContent: () => JSX.Element;
+};
+
+declare type AuthDrawerContentType = 'sign-up' | 'sign-in' | 'set-password' | 'forgot-password';
+declare type AuthDrawerContentProps = {
+    type: AuthDrawerContentType;
+    acquisitionFormConfig: AcquisitionFormProps<any>;
+    loginFormConfig: LoginFormProps;
+    forgotPasswordConfig: ForgotPasswordFormProps;
+    setPasswordConfig: SetPasswordFormProps;
+};
+
+declare type RegistrationPageProps = {
+    templateConfig: DefaultTemplateProps;
+    drawerConfig: Pick<DrawerProps, 'open' | 'onClose'>;
+    drawerContentConfig: AuthDrawerContentProps;
+};
+declare const AuthPage: ({ templateConfig, drawerContentConfig, drawerConfig, }: RegistrationPageProps) => JSX.Element;
+
+export { AuthPage, RegistrationPageProps };