@zealicsolutions/web-ui 1.0.0 → 1.0.1

package/dist/cjs/src/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Callback } from 'typescript';
+import { IconNames } from '..';
+import { SizesTypes, ThemeColors } from '../../theme';
+export 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;
+};
+export declare const Avatar: ({ size, withShadow, label, backgroundColor, onPress, content: { initials, iconName, imageUrl }, textConfig: { color, font }, }: AvatarProps) => JSX.Element;

package/dist/cjs/src/atoms/Buttons/Button.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Noop } from 'react-hook-form';
+import type { Callback } from 'typescript';
 export declare type BaseButtonProps = {
-    onClick?: Noop;
+    onClick?: Callback;
     variant?: 'primary' | 'secondary';
     disabled?: boolean;
     fullWidth?: boolean;

package/dist/cjs/src/atoms/Buttons/LinkButton.d.ts

@@ -1,10 +1,10 @@
 import { PropsWithChildren } from 'react';
-import { Noop } from 'react-hook-form';
+import type { Callback } from 'typescript';
 export declare type LinkButtonProps = PropsWithChildren<{
     activeOpacity?: number;
     withoutOpacityEffect?: boolean;
     disabled?: boolean;
-    onClick?: Noop;
+    onClick?: Callback;
 }>;
 export declare const LinkButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     activeOpacity?: number | undefined;
@@ -16,5 +16,5 @@ export declare const LinkButton: import("styled-components").StyledComponent<"di
     activeOpacity?: number | undefined;
     withoutOpacityEffect?: boolean | undefined;
     disabled?: boolean | undefined;
-    onClick?: Noop | undefined;
+    onClick?: Callback | undefined;
 }, never>;

package/dist/cjs/src/atoms/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import { SizesTypes, ThemeColors } from 'theme';
+export declare type DividerProps = {
+    type?: 'horizontal' | 'vertical';
+    color?: ThemeColors | string;
+    marginVertical?: SizesTypes | number;
+    marginHorizontal?: SizesTypes | number;
+    weight?: number;
+};
+export declare const Divider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DividerProps, never>;

package/dist/cjs/src/atoms/Icon/Icon.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
+import { ThemeColors } from '../../theme';
 export declare type IconProps = {
     name: IconNames;
     size?: number;
-    color?: string;
+    color?: ThemeColors | string;
     pointerEvents?: 'auto' | 'none';
 };
 declare const availableIcons: {
-    CaretDown: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    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;
@@ -22,5 +23,5 @@ declare const availableIcons: {
     Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
 };
 export declare type IconNames = keyof typeof availableIcons;
-export declare const Icon: ({ name, ...props }: IconProps) => JSX.Element;
+export declare const Icon: ({ name, color, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/cjs/src/atoms/Input/Input.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
 import type { IconNames } from 'atoms/Icon/Icon';
 import { InputFieldTypes } from 'fieldsConfiguration/types';
-import { Noop } from 'react-hook-form';
+import type { Callback } from 'typescript';
 export declare type InputIconProps = {
     name: IconNames;
-    onClick?: Noop;
+    onClick?: Callback;
 };
 export declare type InputProps = {
     value?: string;
     leftIcon?: InputIconProps;
     rightIcon?: InputIconProps;
-    onBlur?: Noop;
+    onBlur?: Callback;
     type?: InputFieldTypes;
     placeholder?: string;
     disabled?: boolean;

package/dist/cjs/src/atoms/Paddings/Paddings.d.ts

@@ -0,0 +1,6 @@
+import { SizesTypes } from 'theme';
+export declare type HorizontalPaddingProps = {
+    padding: SizesTypes | number;
+};
+export declare const HorizontalPadding: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HorizontalPaddingProps, never>;
+export declare const VerticalPadding: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HorizontalPaddingProps, never>;

package/dist/cjs/src/atoms/TextWrapper/TextWrapper.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SizesTypes } from 'theme/types';
+import { SizesTypes, ThemeColors } from 'theme/types';
 import { StylesType } from 'typescript';
 export declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
 export declare type TextWrapperProps = {
@@ -8,6 +8,6 @@ export declare type TextWrapperProps = {
     layout?: 'div' | 'span';
     type?: TextTypes;
     styles?: StylesType;
-    color?: string;
+    color?: ThemeColors | string;
 };
 export declare const TextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TextWrapperProps, never>;

package/dist/cjs/src/atoms/index.d.ts

@@ -12,3 +12,6 @@ export * from './Buttons/LinkButton';
 export * from './ValidationTag/ValidationTag';
 export * from './Tooltip/Tooltip';
 export * from './Toast/toast';
+export * from './Avatar/Avatar';
+export * from './Paddings/Paddings';
+export * from './Divider/Divider';

package/dist/cjs/src/icons/CaretDown.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { IconProps } from 'atoms/Icon/Icon';
-export declare const CaretDown: ({ color, ...props }: Omit<IconProps, 'name'>) => JSX.Element;
+export declare const CaretDown: ({ color, size }: Omit<IconProps, 'name'>) => JSX.Element;

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

@@ -1,2 +1,7 @@
-import { Button } from 'atoms';
-export { Button };
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';
+export * from './pages';
+export * from './hooks';
+export * from './theme';

package/dist/cjs/src/molecules/AvatarDropdown/AvatarDropdown.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MenuItemsProps } from '../MenuItems/MenuItems';
+import { AvatarProps } from '../../atoms';
+import 'rc-dropdown/assets/index.css';
+export declare type AvatarDropdownProps<T> = {
+    avatarProps: AvatarProps;
+    menuConfig: MenuItemsProps<T>;
+};
+export declare const AvatarDropdown: <T extends string | number>({ avatarProps, menuConfig, }: AvatarDropdownProps<T>) => JSX.Element;

package/dist/cjs/src/molecules/MenuItems/MenuItems.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type MenuItem<T> = {
+    id: T;
+    title: string;
+    onClick?: (id: T) => void;
+};
+export declare type MenuItemsProps<T> = {
+    title?: string;
+    onItemPress?: (id: T) => void;
+    options: MenuItem<T>[];
+};
+export declare const MenuItems: <T extends string | number>({ title, onItemPress, options, }: MenuItemsProps<T>) => JSX.Element;

package/dist/cjs/src/molecules/Tab/Tab.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MenuItemsProps } from '..';
 export declare type TabOption<T = string> = {
     menuText: string;
     menuKey: T;
@@ -6,16 +7,17 @@ export declare type TabOption<T = string> = {
     isSelected?: boolean;
 };
 declare type TabElement = HTMLDivElement | null;
-export declare type TabProps<T = string> = {
+export declare type TabProps<T = string, K = string> = {
     tabKey: T;
     text: string;
     disabled?: boolean;
     isActive?: boolean;
     onClick?: (key: T) => void;
-    options?: TabOption<T>[];
+    options?: MenuItemsProps<T>[];
+    onOptionClick?: (optionKey: K) => void;
 };
-declare const ZealTab: <T extends string>({ options, onClick, text, tabKey, ...tabProps }: TabProps<T>, ref: React.ForwardedRef<TabElement>) => JSX.Element;
-export declare const Tab: <T>(props: TabProps<T> & {
+declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, onOptionClick, ...tabProps }: TabProps<T, string>, ref: React.ForwardedRef<TabElement>) => JSX.Element;
+export declare const Tab: <T, K>(props: TabProps<T, K> & {
     ref?: React.ForwardedRef<TabElement> | undefined;
 }) => ReturnType<typeof ZealTab>;
 export {};

package/dist/cjs/src/molecules/TabGroup/TabGroup.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { SizesTypes } from 'theme/types';
 import { TabProps } from '../Tab/Tab';
-export declare type TabGroupProps<T = string> = {
+export declare type TabGroupProps<T = string, K = string> = {
     tabs: Pick<TabProps<T>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
     activeTabKey: T;
     spacing?: SizesTypes;
     onTabChange?: (tabKey: T) => void;
+    onOptionClick?: (optionKey: K) => void;
 };
-export declare const TabGroup: <T extends string>({ tabs, spacing, activeTabKey, onTabChange, }: TabGroupProps<T>) => JSX.Element;
+export declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, activeTabKey, onTabChange, }: TabGroupProps<T, K>) => JSX.Element;

package/dist/cjs/src/molecules/index.d.ts

@@ -8,3 +8,6 @@ export * from './SelectableInfoCard/SelectableCardGroup';
 export * from './Banner/Banner';
 export * from './Drawer/Drawer';
 export * from './InfoBox/InfoBox';
+export * from './MenuItems/MenuItems';
+export * from './AvatarDropdown/AvatarDropdown';
+export * from './TabGroup/TabGroup';

package/dist/cjs/src/organisms/AcquisitionForm/AcquisitionForm.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { Noop } from 'react-hook-form';
+import type { Callback } from 'typescript';
 import { UIFields } from '../../fieldsConfiguration';
 export declare type AcquisitionFormProps<T extends object> = {
     fields: UIFields<T>;
     logoUrl: string;
     isLoading?: boolean;
     onSubmit: (values: T) => void;
-    onLinkButtonClick?: Noop;
+    onLinkButtonClick?: Callback;
 };
 export declare const AcquisitionForm: <T extends object>({ logoUrl, fields, onSubmit, onLinkButtonClick, isLoading, }: AcquisitionFormProps<T>) => JSX.Element;

package/dist/cjs/src/organisms/ForgotPasswordForm/ForgotPasswordForm.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Callback } from 'typescript';
+declare type EmailAddressFields = {
+    email: string;
+};
+export declare type ForgotPasswordFormProps = {
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit?: (values: EmailAddressFields) => void;
+    onBack?: Callback;
+};
+export declare const ForgotPasswordForm: ({ logoUrl, onBack, onSubmit, isLoading, }: ForgotPasswordFormProps) => JSX.Element;
+export {};

package/dist/cjs/src/organisms/ForgotPasswordForm/constants.d.ts

@@ -0,0 +1,2 @@
+import { UIField } from 'fieldsConfiguration';
+export declare const emailAddressInput: UIField<'email'>;

package/dist/cjs/src/organisms/Header/Header.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { TabGroupProps } from '../../molecules/TabGroup/TabGroup';
+import type { Callback } from 'typescript';
+import { AvatarDropdownProps, TabGroupProps } from '../../molecules';
 declare type ImportantLink = {
     text: string;
     href: string;
@@ -8,6 +9,10 @@ export declare type HeaderProps = {
     links?: ImportantLink[];
     logoUrl: string;
     tabs: TabGroupProps['tabs'];
+    withAvatar?: {
+        props: AvatarDropdownProps<string>;
+    };
+    onActionButtonClick?: Callback;
 };
-export declare const Header: ({ logoUrl, links, tabs }: HeaderProps) => JSX.Element;
+export declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
 export {};

package/dist/cjs/src/organisms/LoginForm/LoginForm.d.ts

@@ -1,13 +1,18 @@
 /// <reference types="react" />
-import { LoginFields } from 'organisms/LoginForm/types';
-import { Noop } from 'react-hook-form';
+import type { Callback } from 'typescript';
 import { UIFields } from '../../fieldsConfiguration';
+import { LoginFields } from './types';
+import { TwoFactorAuthProps } from '../TwoFactorAuth/TwoFactorAuth';
 export declare type LoginFormProps = {
     fields: UIFields<LoginFields>;
     logoUrl: string;
     isLoading?: boolean;
+    twoFactorAuthConfig?: {
+        twoFactorShow: boolean;
+        twoFactorAuthProps: TwoFactorAuthProps;
+    };
     onSubmit: (values: LoginFields) => void;
-    onSignUpButtonClick?: Noop;
-    onForgotPasswordButtonClick?: Noop;
+    onSignUpButtonClick?: Callback;
+    onForgotPasswordButtonClick?: Callback;
 };
-export declare const LoginForm: ({ logoUrl, fields, onSubmit, onSignUpButtonClick, isLoading, onForgotPasswordButtonClick, }: LoginFormProps) => JSX.Element;
+export declare const LoginForm: ({ logoUrl, fields, onSubmit, onSignUpButtonClick, isLoading, twoFactorAuthConfig, onForgotPasswordButtonClick, }: LoginFormProps) => JSX.Element;

package/dist/cjs/src/organisms/index.d.ts

@@ -3,3 +3,4 @@ export * from './AcquisitionForm/AcquisitionForm';
 export * from './LoginForm/LoginForm';
 export * from './TwoFactorAuth/TwoFactorAuth';
 export * from './Header/Header';
+export * from './ForgotPasswordForm/ForgotPasswordForm';

package/dist/cjs/src/pages/AuthPage/AuthDrawerContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AcquisitionFormProps, ForgotPasswordFormProps, LoginFormProps, SetPasswordFormProps } from '../../organisms';
+export declare type AuthDrawerContentType = 'sign-up' | 'sign-in' | 'set-password' | 'forgot-password';
+export declare type AuthDrawerContentProps = {
+    type: AuthDrawerContentType;
+    acquisitionFormConfig: AcquisitionFormProps<any>;
+    loginFormConfig: LoginFormProps;
+    forgotPasswordConfig: ForgotPasswordFormProps;
+    setPasswordConfig: SetPasswordFormProps;
+};
+export declare const AuthDrawerContent: ({ type, loginFormConfig, acquisitionFormConfig, forgotPasswordConfig, setPasswordConfig, }: AuthDrawerContentProps) => JSX.Element;

package/dist/cjs/src/pages/AuthPage/AuthPage.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DrawerProps } from '../../molecules/Drawer/styles';
+import { DefaultTemplateProps } from '../../templates';
+import { AuthDrawerContentProps } from './AuthDrawerContent';
+export declare type RegistrationPageProps = {
+    templateConfig: DefaultTemplateProps;
+    drawerConfig: Pick<DrawerProps, 'open' | 'onClose'>;
+    drawerContentConfig: AuthDrawerContentProps;
+};
+export declare const AuthPage: ({ templateConfig, drawerContentConfig, drawerConfig, }: RegistrationPageProps) => JSX.Element;

package/dist/cjs/src/pages/index.d.ts

@@ -1 +1 @@
-export * from './RegistrationPage/RegistrationPage';
+export * from './AuthPage/AuthPage';

package/dist/cjs/src/templates/DefaultTemplate/DefaultTemplate.d.ts

@@ -1,8 +1,9 @@
-import { PropsWithChildren } from 'react';
+/// <reference types="react" />
 import { BannerProps } from '../../molecules';
 import { HeaderProps } from '../../organisms';
-export declare type DefaultTemplateProps = PropsWithChildren<{
+export declare type DefaultTemplateProps = {
     header: HeaderProps;
     banner?: BannerProps;
-}>;
-export declare const DefaultTemplate: ({ banner, header, children }: DefaultTemplateProps) => JSX.Element;
+    renderContent: () => JSX.Element;
+};
+export declare const DefaultTemplate: ({ banner, header, renderContent }: DefaultTemplateProps) => JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'success' | 'error' | 'warning';
+export declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
 export declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
 export declare type ThemeColorsType = Record<ThemeColors, string>;
 export declare type ThemeTextType = Record<SizesTypes, {

package/dist/cjs/src/typescript.d.ts

@@ -1,2 +1,3 @@
 import { DefaultTheme, ThemedCssFunction } from 'styled-components';
 export declare type StylesType = ReturnType<ThemedCssFunction<DefaultTheme>>;
+export declare type Callback = () => void;

package/dist/esm/index.css

@@ -255,3 +255,249 @@
     opacity: 0;
   }
 }
+
+@font-face {
+  font-family: 'anticon';
+  src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');
+  /* IE9*/
+  src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg');
+  /* iOS 4.1- */
+}
+.rc-dropdown {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: 1070;
+  display: block;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.5;
+}
+.rc-dropdown-hidden {
+  display: none;
+}
+.rc-dropdown .rc-menu {
+  outline: none;
+  position: relative;
+  list-style-type: none;
+  padding: 0;
+  margin: 2px 0 2px;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 5px #ccc;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+}
+.rc-dropdown .rc-menu > li {
+  margin: 0;
+  padding: 0;
+}
+.rc-dropdown .rc-menu:before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: #ffffff;
+  background: rgba(255, 255, 255, 0.01);
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item {
+  position: relative;
+  display: block;
+  padding: 7px 10px;
+  clear: both;
+  font-size: 12px;
+  font-weight: normal;
+  color: #666666;
+  white-space: nowrap;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item:hover,
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-active,
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-selected {
+  background-color: #ebfaff;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-selected {
+  position: relative;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-selected:after {
+  content: '\e613';
+  font-family: 'anticon';
+  font-weight: bold;
+  position: absolute;
+  top: 6px;
+  right: 16px;
+  color: #3CB8F0;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-disabled {
+  color: #ccc;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-disabled:hover {
+  color: #ccc;
+  background-color: #fff;
+  cursor: not-allowed;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-divider {
+  height: 1px;
+  margin: 1px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  line-height: 0;
+}
+.rc-dropdown-slide-up-enter,
+.rc-dropdown-slide-up-appear {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  display: block !important;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-play-state: paused;
+}
+.rc-dropdown-slide-up-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  display: block !important;
+  opacity: 1;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  animation-play-state: paused;
+}
+.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomLeft,
+.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomLeft,
+.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomCenter,
+.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomCenter,
+.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomRight,
+.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomRight {
+  animation-name: rcDropdownSlideUpIn;
+  animation-play-state: running;
+}
+.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topLeft,
+.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topLeft,
+.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topCenter,
+.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topCenter,
+.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topRight,
+.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topRight {
+  animation-name: rcDropdownSlideDownIn;
+  animation-play-state: running;
+}
+.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomLeft,
+.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomCenter,
+.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomRight {
+  animation-name: rcDropdownSlideUpOut;
+  animation-play-state: running;
+}
+.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topLeft,
+.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topCenter,
+.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topRight {
+  animation-name: rcDropdownSlideDownOut;
+  animation-play-state: running;
+}
+@keyframes rcDropdownSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+@keyframes rcDropdownSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
+@keyframes rcDropdownSlideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 100%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+  }
+}
+@keyframes rcDropdownSlideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 100%;
+    transform: scaleY(0);
+  }
+}
+.rc-dropdown-arrow {
+  position: absolute;
+  border-width: 4px;
+  border-color: transparent;
+  box-shadow: 0 1px 5px #ccc;
+  border-style: solid;
+  transform: rotate(45deg);
+}
+.rc-dropdown-show-arrow.rc-dropdown-placement-top,
+.rc-dropdown-show-arrow.rc-dropdown-placement-topLeft,
+.rc-dropdown-show-arrow.rc-dropdown-placement-topRight {
+  padding-bottom: 6px;
+}
+.rc-dropdown-show-arrow.rc-dropdown-placement-bottom,
+.rc-dropdown-show-arrow.rc-dropdown-placement-bottomLeft,
+.rc-dropdown-show-arrow.rc-dropdown-placement-bottomRight {
+  padding-top: 6px;
+}
+.rc-dropdown-placement-top .rc-dropdown-arrow,
+.rc-dropdown-placement-topLeft .rc-dropdown-arrow,
+.rc-dropdown-placement-topRight .rc-dropdown-arrow {
+  bottom: 4px;
+  border-top-color: white;
+}
+.rc-dropdown-placement-top .rc-dropdown-arrow {
+  left: 50%;
+}
+.rc-dropdown-placement-topLeft .rc-dropdown-arrow {
+  left: 15%;
+}
+.rc-dropdown-placement-topRight .rc-dropdown-arrow {
+  right: 15%;
+}
+.rc-dropdown-placement-bottom .rc-dropdown-arrow,
+.rc-dropdown-placement-bottomLeft .rc-dropdown-arrow,
+.rc-dropdown-placement-bottomRight .rc-dropdown-arrow {
+  top: 4px;
+  border-bottom-color: white;
+}
+.rc-dropdown-placement-bottom .rc-dropdown-arrow {
+  left: 50%;
+}
+.rc-dropdown-placement-bottomLeft .rc-dropdown-arrow {
+  left: 15%;
+}
+.rc-dropdown-placement-bottomRight .rc-dropdown-arrow {
+  right: 15%;
+}