@zealicsolutions/web-ui 0.0.1

package/dist/cjs/src/molecules/SelectableInfoCard/SelectableCardGroup.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SizesTypes } from '../../theme';
+import { BaseSelectableProps } from './BaseSelectable';
+export declare type SelectableCardGroupProps<T> = {
+    cards: BaseSelectableProps<T>[];
+    handleChange?: (value: T | undefined) => void;
+    spacing?: SizesTypes;
+    initialValue?: T;
+};
+export declare const SelectableCardGroup: <T extends string>({ cards, handleChange, spacing, initialValue, }: SelectableCardGroupProps<T>) => JSX.Element;

package/dist/cjs/src/molecules/SelectableInfoCard/styles.d.ts

@@ -0,0 +1,10 @@
+import { SizesTypes } from '../../theme';
+export declare const InfoText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms").TextWrapperProps & {
+    variant: string;
+}, "variant">;
+export declare const SelectableInfoCardStyled: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isActive?: boolean | undefined;
+}, never>;
+export declare const GroupWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    spacing: SizesTypes;
+}, never>;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MenuItem } from '..';
+export declare type TabOption<T = string> = {
+    menuText: string;
+    menuKey: T;
+    onMenuClick?: (key: T) => void;
+    isSelected?: boolean;
+};
+declare type TabElement = HTMLDivElement | null;
+export 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 const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, onOptionClick, ...tabProps }: TabProps<T, K>, 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/Tab/styles.d.ts

@@ -0,0 +1,8 @@
+import { TabProps } from './Tab';
+declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled'>;
+export declare const TabText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms/TextWrapper/TextWrapper").TextWrapperProps & {
+    variant: string;
+}, "variant">;
+export declare const TabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabContainerProps, never>;
+export declare const CaretIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabContainerProps, never>;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+import { SizesTypes } from 'theme/types';
+export declare const TabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    spacing: SizesTypes;
+}, never>;
+export declare const TabGroupContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare type TabSliderProps = {
+    width: number;
+    left: number;
+};
+export declare const TabSlider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabSliderProps, never>;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useTabAnimation: (activeTab: string) => {
+    setActiveTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    tabUnderlineLeft: number;
+    tabUnderlineWidth: number;
+    tabsRef: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+};

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

@@ -0,0 +1,13 @@
+export * from './FieldLabels/FieldLabels';
+export * from './InputField/InputField';
+export * from './FieldMapper/FieldMapper';
+export * from './CheckboxField/CheckboxField';
+export * from './SelectField/SelectField';
+export * from './CustomValidation/CustomValidation';
+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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+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?: 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

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

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

@@ -0,0 +1,4 @@
+export declare const mockTabs: {
+    tabKey: string;
+    text: string;
+}[];

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

@@ -0,0 +1,7 @@
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ImportantLinkText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms").TextWrapperProps & {
+    variant: string;
+}, "variant">;
+export declare const ImportantLinksWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RightSideHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+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?: Callback;
+    onForgotPasswordButtonClick?: Callback;
+};
+export declare const LoginForm: ({ logoUrl, fields, onSubmit, onSignUpButtonClick, isLoading, twoFactorAuthConfig, onForgotPasswordButtonClick, }: LoginFormProps) => JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare type LoginFields = {
+    email: string;
+    password: string;
+    rememberMe: boolean;
+};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SetPasswordFields, SetPasswordRuleValidation } from 'organisms/SetPasswordForm/types';
+import { UIFields } from '../../fieldsConfiguration';
+export declare type SetPasswordFormProps = {
+    fields: UIFields<SetPasswordFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    validations: SetPasswordRuleValidation[];
+    onSubmit: (values: SetPasswordFields) => void;
+    onBack: () => void;
+};
+export declare const SetPasswordForm: ({ logoUrl, fields, validations, onBack, onSubmit, isLoading, }: SetPasswordFormProps) => JSX.Element;

package/dist/cjs/src/organisms/SetPasswordForm/types.d.ts

@@ -0,0 +1,17 @@
+export declare type SetPasswordFields = {
+    password: string;
+    confirmPassword: string;
+};
+export declare type CountValidationTypes = 'COUNT' | 'CAPITAL_COUNT' | 'NUMBER_COUNT' | 'SPECIAL_CHARACTERS_COUNT';
+export declare type MaxRuleValidation = {
+    MAX: number;
+    type: CountValidationTypes;
+};
+export declare type MinRuleValidation = {
+    MIN: number;
+    type: CountValidationTypes;
+};
+export declare type SetPasswordRuleValidation = {
+    label: string;
+    rule: MaxRuleValidation | MinRuleValidation;
+};

package/dist/cjs/src/organisms/SetPasswordForm/utils.d.ts

@@ -0,0 +1,3 @@
+import { SetPasswordRuleValidation } from 'organisms/SetPasswordForm/types';
+import { CustomValidationRule } from '../../molecules';
+export declare const passwordValidationMapper: (validation: SetPasswordRuleValidation) => CustomValidationRule;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type VerificationCodeForm = {
+    code: string;
+};
+export declare type AuthMethod = 'email' | 'sms';
+export declare type TwoFactorAuthProps = {
+    logoUrl: string;
+    onNext?: (authMethod: AuthMethod) => Promise<void>;
+    onSubmit?: (values: VerificationCodeForm) => void;
+    onBack?: () => void;
+};
+export declare const TwoFactorAuth: ({ logoUrl, onSubmit, onBack, onNext }: TwoFactorAuthProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import { UIField } from 'fieldsConfiguration';
+import { BaseSelectableProps } from 'molecules/SelectableInfoCard/BaseSelectable';
+import { AuthMethod } from './TwoFactorAuth';
+export declare const cards: BaseSelectableProps<AuthMethod>[];
+export declare const steps: {
+    title: string;
+    description: string;
+}[];
+export declare const codeVerificationInput: UIField<'code'>;

package/dist/cjs/src/organisms/TwoFactorAuth/styles.d.ts

@@ -0,0 +1 @@
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,6 @@
+export * from './SetPasswordForm/SetPasswordForm';
+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

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

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

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

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

@@ -0,0 +1 @@
+export declare const template = "template";

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

@@ -0,0 +1 @@
+export * from './DefaultTemplate/DefaultTemplate';

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

@@ -0,0 +1,4 @@
+export * from './theme';
+export * from './provider';
+export * from './types';
+export * from './toastStyles';

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

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const ZealThemeProvider: (props: PropsWithChildren<{}>) => JSX.Element;

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

@@ -0,0 +1,2 @@
+import { DefaultTheme } from 'styled-components';
+export declare const defaultTheme: DefaultTheme;

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

@@ -0,0 +1 @@
+export declare const toastStyles: import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1,9 @@
+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, {
+    'font-weight': string;
+    'font-size': number;
+    'line-height': number;
+}>;
+export declare type ThemeSizesType = Record<SizesTypes, number>;

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

@@ -0,0 +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

@@ -0,0 +1,257 @@
+.rc-tooltip.rc-tooltip-zoom-appear,
+.rc-tooltip.rc-tooltip-zoom-enter {
+  opacity: 0;
+}
+.rc-tooltip.rc-tooltip-zoom-enter,
+.rc-tooltip.rc-tooltip-zoom-leave {
+  display: block;
+}
+.rc-tooltip-zoom-enter,
+.rc-tooltip-zoom-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-play-state: paused;
+}
+.rc-tooltip-zoom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-play-state: paused;
+}
+.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
+.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
+  animation-name: rcToolTipZoomIn;
+  animation-play-state: running;
+}
+.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
+  animation-name: rcToolTipZoomOut;
+  animation-play-state: running;
+}
+@keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+@keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+.rc-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.9;
+}
+.rc-tooltip-hidden {
+  display: none;
+}
+.rc-tooltip-placement-top,
+.rc-tooltip-placement-topLeft,
+.rc-tooltip-placement-topRight {
+  padding: 5px 0 9px 0;
+}
+.rc-tooltip-placement-right,
+.rc-tooltip-placement-rightTop,
+.rc-tooltip-placement-rightBottom {
+  padding: 0 5px 0 9px;
+}
+.rc-tooltip-placement-bottom,
+.rc-tooltip-placement-bottomLeft,
+.rc-tooltip-placement-bottomRight {
+  padding: 9px 0 5px 0;
+}
+.rc-tooltip-placement-left,
+.rc-tooltip-placement-leftTop,
+.rc-tooltip-placement-leftBottom {
+  padding: 0 9px 0 5px;
+}
+.rc-tooltip-inner {
+  padding: 8px 10px;
+  color: #fff;
+  text-align: left;
+  text-decoration: none;
+  background-color: #373737;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  min-height: 34px;
+}
+.rc-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #373737;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  right: 15%;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  left: 4px;
+  margin-top: -5px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: #373737;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  right: 4px;
+  margin-top: -5px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #373737;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  top: 4px;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #373737;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  right: 15%;
+}
+
+.rc-notification {
+  position: fixed;
+  z-index: 1000;
+}
+.rc-notification-notice {
+  padding: 7px 20px 7px 10px;
+  border-radius: 3px 3px;
+  border: 1px solid #999;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  border: 0px solid rgba(0, 0, 0, 0);
+  background: #fff;
+  display: block;
+  width: auto;
+  line-height: 1.5;
+  position: relative;
+  margin: 10px 0;
+}
+.rc-notification-notice-closable {
+  padding-right: 20px;
+}
+.rc-notification-notice-close {
+  position: absolute;
+  right: 5px;
+  top: 3px;
+  color: #000;
+  cursor: pointer;
+  outline: none;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: 0 1px 0 #fff;
+  filter: alpha(opacity=20);
+  opacity: 0.2;
+  text-decoration: none;
+}
+.rc-notification-notice-close-x:after {
+  content: '×';
+}
+.rc-notification-notice-close:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+  text-decoration: none;
+}
+.rc-notification-fade-appear,
+.rc-notification-fade-enter {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+.rc-notification-fade-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+.rc-notification-fade-appear.rc-notification-fade-appear-active,
+.rc-notification-fade-enter.rc-notification-fade-enter-active {
+  animation-name: rcNotificationFadeIn;
+  animation-play-state: running;
+}
+.rc-notification-fade-leave.rc-notification-fade-leave-active {
+  animation-name: rcDialogFadeOut;
+  animation-play-state: running;
+}
+@keyframes rcNotificationFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes rcDialogFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}