@zealicsolutions/web-ui 0.3.9 → 0.3.11

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

@@ -1,4 +1,4 @@
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { TextButtonProps } from 'atoms/Buttons/TextButton';
 import { FC } from 'react';
 import { IconButton as IconButtonComponent } from './IconButton';
@@ -11,6 +11,6 @@ declare const _default: {
     }, never>;
 };
 export default _default;
-export declare const TouchableOpacity: ComponentStory<FC<TouchableOpacityProps>>;
-export declare const TextButton: ComponentStory<FC<TextButtonProps>>;
-export declare const IconButton: ComponentStory<typeof IconButtonComponent>;
+export declare const TouchableOpacity: StoryFn<FC<TouchableOpacityProps>>;
+export declare const TextButton: StoryFn<FC<TextButtonProps>>;
+export declare const IconButton: StoryFn<typeof IconButtonComponent>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ThemeColors } from 'theme';
 import { IconNames, TouchableOpacityProps } from 'atoms';
-import { Callback } from 'typescript';
+import type { Callback } from 'typescript';
 export declare type IconButtonProps = {
     name: IconNames;
     size?: number;

package/dist/cjs/src/containers/types/moleculeTypes.d.ts

@@ -5,31 +5,13 @@ import { CSSProperties } from 'styled-components';
 import type { AnyObject, Nullable, StrictUnion } from 'typescript';
 import { ContainerComponentProps } from './types';
 export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
-export declare type FileType = 'image' | 'video' | 'document' | 'audio';
-export declare type ContentStatus = 'in_use' | 'draft';
-export declare type FileMatrixMessageDTO = Readonly<Partial<{
-    id: string;
-    text: string;
-    label: string;
-    locationId: string;
-}>>;
-export declare type FileObjectDTO = Readonly<Partial<{
-    id: string;
-    name: string;
-    fileType: FileType;
-    description: string;
-    originalName: string;
+export declare type DownloadFile = {
     url: string;
-    size: number;
-    type: FileType;
-    updatedAt: string;
-    createdAt: string;
-    status: ContentStatus;
-    tags: FileMatrixMessageDTO[];
-}>> | null;
+    name: string;
+};
 declare type LinkAction = Omit<LinkAttributes, 'attributeType'>;
 declare type PopupDrawerAction = ContainerComponentProps;
-declare type DownloadAction = FileObjectDTO;
+declare type DownloadAction = DownloadFile;
 declare type SubmitAction = AnyObject;
 declare type CancelAction = AnyObject;
 declare type ResetAction = AnyObject;

package/dist/cjs/src/molecules/Button/Button.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { StoryFn } from '@storybook/react';
-import { Button as ButtonComponent } from 'molecules/Button/Button';
+import { Button as ButtonComponent } from 'molecules';
 declare const _default: {
     title: string;
-    component: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: import("molecules/Button/Button").ButtonProps) => JSX.Element | null;
+    component: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: import("molecules").ButtonProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Button: StoryFn<typeof ButtonComponent>;

package/dist/cjs/src/molecules/Drawer/Drawer.stories.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import React from 'react';
 import { Drawer as DrawerComponent } from './Drawer';
 declare const _default: {
@@ -6,4 +6,4 @@ declare const _default: {
     component: ({ children, closeIconColor, ...props }: React.PropsWithChildren<import("./styles").DrawerProps>) => JSX.Element;
 };
 export default _default;
-export declare const Drawer: ComponentStory<typeof DrawerComponent>;
+export declare const Drawer: StoryFn<typeof DrawerComponent>;

package/dist/cjs/src/molecules/Video/Video.stories.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { Video as VideoComponent } from './Video';
 declare const _default: {
     title: string;

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

@@ -1,7 +1,7 @@
 import { ModalProps as MUIModalProps } from '@mui/material';
-import { KeyboardEvent, PropsWithChildren } from 'react';
+import React, { KeyboardEvent, PropsWithChildren } from 'react';
 import { CSSProperties } from 'styled-components';
-import { Callback, OverrideStyles } from '../../typescript';
+import type { Callback, OverrideStyles } from 'typescript';
 export declare type ZealUIModalProps = PropsWithChildren<Pick<MUIModalProps, 'open'>> & {
     padding?: number | string;
     wrapperStyles?: CSSProperties;
@@ -9,5 +9,12 @@ export declare type ZealUIModalProps = PropsWithChildren<Pick<MUIModalProps, 'op
     modalStyles?: CSSProperties;
     onClose?: Callback;
 };
-export declare const ZealUIModal: ({ children, wrapperStyles, padding, onKeyDown, modalStyles, onClose, ...rest }: ZealUIModalProps) => JSX.Element;
+export declare const ZealUIModal: ({ children, wrapperStyles, padding, onKeyDown, modalStyles, ...rest }: ZealUIModalProps) => JSX.Element;
 export declare const ModalWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, OverrideStyles, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+}, never>;

package/dist/cjs/src/molecules/ZealUIModal/ZealUIModal.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoryFn } from '@storybook/react';
+import { ZealUIModal as ZealUIModalComponent } from './ZealUIModal';
+declare const _default: {
+    title: string;
+    component: ({ children, wrapperStyles, padding, onKeyDown, modalStyles, ...rest }: import("./ZealUIModal").ZealUIModalProps) => JSX.Element;
+};
+export default _default;
+export declare const ZealUIModal: StoryFn<typeof ZealUIModalComponent>;

package/dist/cjs/src/organisms/Consent/Consent.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { Consent as ConsentComponent } from './Consent';
 declare const _default: {
     title: string;
     component: <T extends string>({ text, consentCaptureProps, containerStyles, clearStyles, }: import("./Consent").ConsentProps<T>) => JSX.Element;
 };
 export default _default;
-export declare const Consent: ComponentStory<typeof ConsentComponent>;
+export declare const Consent: StoryFn<typeof ConsentComponent>;

package/dist/esm/index.css

@@ -1,249 +1,3 @@
-@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%;
-}
-
 .rc-tooltip.rc-tooltip-zoom-appear,
 .rc-tooltip.rc-tooltip-zoom-enter {
   opacity: 0;
@@ -501,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%;
+}