@synerise/ds-alert 0.6.1 → 0.7.2

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.7.1...@synerise/ds-alert@0.7.2) (2022-07-28)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [0.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.7.0...@synerise/ds-alert@0.7.1) (2022-04-05)
+
+
+### Bug Fixes
+
+* **alert:** Notification's notice border-radius ([1017519](https://github.com/Synerise/synerise-design/commit/1017519504de355667618737075adaf5b5bcb426))
+
+
+
+
+
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.1...@synerise/ds-alert@0.7.0) (2022-04-01)
+
+
+### Bug Fixes
+
+* **alert:** linter Promise, async function returns Promise<void> ([5c1e54d](https://github.com/Synerise/synerise-design/commit/5c1e54d52a0897345cd88609adcbdcdcf5fd85bf))
+
+
+### Features
+
+* **alert:** notificationOpen to use Promise interface ([531b813](https://github.com/Synerise/synerise-design/commit/531b81318370f97d29c13d14510e602b861e20f4))
+
+
+
+
+
 ## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.0...@synerise/ds-alert@0.6.1) (2022-03-31)
 
 

package/README.md

@@ -28,22 +28,31 @@ import Alert from '@synerise/ds-alert'
 
 ```
 
-### notifications api usage
+### Notifications
 
-#### Simple (`ant`-based)
+Notifications API offer three things:
+
+  * `<Notification/>` component for styled content,
+  * `notificationApi.useNotification()` for building a tunnel for the the right ContextApi (notifications use both `React.createPortal` plus they are mounted in container mounted in `document.body` for making it possible to position them correctly),
+    * *Pro-users*: change `getContainer` for sending notifications in other scrollable sections (`@synerise/ds-modal`, `@synerise/ds-section`).
+  * and `notificationOpen` for scheduling showing notificaitons.
+
+#### The simplest notification call
 
 ```jsx
-import notification from '@ant/notification'
+import notificationApi from '@synerise/ds-alert'
 
-notification.open({message: 'Message content', duration 4.5})
+notification.open({message: 'Message content'});
 ```
 
-#### A `synerise-design`-styled notification
+#### Styled notification
 ```jsx
-import Notification from '@ds-alert/Notification'
-import notification from '@ant/notification'
+import { Notification, notificationApi} from '@synerise/ds-alert'
 
-notification.open({message: <Notification>'Message content'</Notification>, duration: 4.5})
+notificationApi.open({
+  duration: 4.5,
+  message: <Notification>Message content</Notification>
+});
 ```
 
 #### Differently positioned notification
@@ -52,14 +61,21 @@ notification.open({message: <Notification>'Message content'</Notification>, dura
 `getContainer` has to be a `styled-components`-scoped element, this is done in `mountInstance`, see source code for more.
 
 ```jsx
-import open from '@ds-alert/Notification'
-
-const [api, contextHolder] = notification.useNotification();
-open({message: Message content, duration: 4.5}, api, contextHolder))
+import { Notification, notificationApi, notificationOpen } from '@synerise/ds-alert';
 
-console.log('@synerise/ds-alert notifications get mounted in this container', document.querySelector('.popup-container'))
+const [api, contextHolder] = notificationApi.useNotification();
+notificationOpen({
+  message: <Notification>You have new message.</Notification>,
+  placement: 'topLeft'
+}, api, contextHolder);
 ```
 
+### Usage recommendations
+
+It is recommended to call `notificationOpen` from `React.useEffect`.
+Of course you can mount styled `<Notification/>` component by yourself,
+but then you need to manage its rendering lifecycle.
+
 ## Demo
 
 <iframe src="/storybook-static/iframe.html?id=components-alert--default"></iframe>

package/dist/Notification/Notification.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { NotificationInstance } from 'antd/lib/notification';
 import type { ArgsProps, NotificationApi } from 'antd/es/notification';
 import 'antd/lib/notification/style/index.less';
+/**
+ * Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
+ */
 export declare type NotificationProps = {
     /** content of the notification */
     children?: JSX.Element | React.ReactNode | React.ReactNode[];
@@ -14,11 +17,15 @@ export declare type NotificationProps = {
     /** close icon class */
     closeIconClassName?: string;
     /** where to position notification, `"{top,bottom}{Left,Right}" | "bottom"` */
-    placement: ArgsProps['placement'] | 'bottom';
+    placement?: ArgsProps['placement'] | 'bottom';
 } & Partial<Omit<ArgsProps, 'placement'>>;
 declare type NotificationApiHook = ReturnType<NotificationApi['useNotification']>;
 declare type ApiHook = NotificationApiHook[0];
 declare type ContextHolder = NotificationApiHook[1];
+/**
+ * Component with the content of the notification.
+ * Note that in order to show notification you need to use `notificationOpen`
+ */
 export declare function Notification({ buttonText, children, onButtonClick, onClose, icon, closeIconClassName, }: NotificationProps): JSX.Element;
 /**
  * creates a div, mounts it in getContainer and returns reference to it.
@@ -31,6 +38,28 @@ export declare function Notification({ buttonText, children, onButtonClick, onCl
 export declare function mountInstance(contextHolder?: ContextHolder, { getContainer, className }?: {
     getContainer?: (() => HTMLElement) | undefined;
     className?: string | undefined;
-}): [HTMLElement | null, Function];
-export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): void;
+}): [Promise<HTMLElement>, HTMLElement, () => void];
+/**
+ * Function for showing new notifications.
+ * It requires proper context to be injected (see `notificationApi.useNotification`)
+ * and `message` prop in its first argument.
+ * Below you will find an example usage.
+ * Please remember that it is on you to provide contextHolder in the right place.
+ * ```
+ *   import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
+ *   const [api, contextHolder] = notificationApi.useNotification();
+ *
+ *   function App() {
+ *     return (<div id="app">
+ *       {contextHolder}
+ *       <button onClick={() => notificationOpen({
+ *         message: <Notification>You have been notified.</Notification>
+ *       })}>
+ *         Show notification
+ *       </button>);
+ *
+ *    ReactDOM.render(<App/>, document.querySelector('#app'));
+ * ```
+ */
+export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): Promise<void>;
 export default Notification;

package/dist/Notification/Notification.js

@@ -8,6 +8,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { notification } from 'antd';
@@ -15,6 +19,14 @@ import "antd/lib/notification/style/index.css";
 import Button from '@synerise/ds-button';
 import Icon, { UserAddM, CloseM } from '@synerise/ds-icon';
 import * as S from './Notification.styles';
+/**
+ * Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
+ */
+
+/**
+ * Component with the content of the notification.
+ * Note that in order to show notification you need to use `notificationOpen`
+ */
 export function Notification(_ref) {
   var buttonText = _ref.buttonText,
       _ref$children = _ref.children,
@@ -62,73 +74,112 @@ export function mountInstance(contextHolder, _temp) {
   var cont = getContainer();
   cont.appendChild(element);
   var jsxEl = /*#__PURE__*/React.createElement(S.NotificationsWrapper, null, contextHolder);
-  ReactDOM.render(jsxEl, element);
+  var renderPromsie = new Promise(function (resolve) {
+    ReactDOM.render(jsxEl, element, function () {
+      return resolve(element);
+    });
+  });
 
   var cleanUpFunction = function cleanUpFunction() {
     cont.removeChild(element);
   };
 
-  return [element, cleanUpFunction];
+  return [renderPromsie, element, cleanUpFunction];
 }
-export function notificationOpen(_ref3, notificationApi, contextHolder) {
-  var _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? 'info' : _ref3$type,
-      _ref3$className = _ref3.className,
-      className = _ref3$className === void 0 ? 'popup-container' : _ref3$className,
-      message = _ref3.message,
-      icon = _ref3.icon,
-      onClick = _ref3.onClick,
-      onClose = _ref3.onClose,
-      _ref3$closeIconClassN = _ref3.closeIconClassName,
-      closeIconClassName = _ref3$closeIconClassN === void 0 ? 'ds-close-icon' : _ref3$closeIconClassN,
-      _ref3$placement = _ref3.placement,
-      placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded);
-
-  var api = notificationApi || notification; // TODO: check if context is actually available
-
-  var el = document.body.querySelector("." + className);
-
-  if (!el) {
-    var _mountInstance = mountInstance(contextHolder, {
-      className: className
-    });
-
-    el = _mountInstance[0];
-  }
-
-  var getContainer = function getContainer() {
-    var _el;
-
-    return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
-  };
-  /** a workaround for handling close clicks,
-   * since there's no way for injecting other element triggering onClose listener.
-   * It is set as a listener for all the clicks
-   * and fires onClose when close-icon was clicked */
-
-
-  var maybeCloseClick = function maybeCloseClick(ev) {
-    var _ev$currentTarget;
-
-    var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
-    var isThisCloseIcon = ev == null ? void 0 : (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
-
-    if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
-      return onClose && onClose();
-    }
+/**
+ * Function for showing new notifications.
+ * It requires proper context to be injected (see `notificationApi.useNotification`)
+ * and `message` prop in its first argument.
+ * Below you will find an example usage.
+ * Please remember that it is on you to provide contextHolder in the right place.
+ * ```
+ *   import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
+ *   const [api, contextHolder] = notificationApi.useNotification();
+ *
+ *   function App() {
+ *     return (<div id="app">
+ *       {contextHolder}
+ *       <button onClick={() => notificationOpen({
+ *         message: <Notification>You have been notified.</Notification>
+ *       })}>
+ *         Show notification
+ *       </button>);
+ *
+ *    ReactDOM.render(<App/>, document.querySelector('#app'));
+ * ```
+ */
 
-    return onClick && onClick();
-  };
+export function notificationOpen(_x, _x2, _x3) {
+  return _notificationOpen.apply(this, arguments);
+}
 
-  return api.open(_objectSpread({
-    message: message,
-    type: type,
-    placement: placement,
-    getContainer: getContainer,
-    icon: icon,
-    onClick: maybeCloseClick,
-    bottom: 16
-  }, props));
+function _notificationOpen() {
+  _notificationOpen = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3, notificationApi, contextHolder) {
+    var _ref3$type, type, _ref3$className, className, message, icon, onClick, onClose, _ref3$closeIconClassN, closeIconClassName, _ref3$placement, placement, props, api, el, containerPromise, _mountInstance, getContainer, maybeCloseClick;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _ref3$type = _ref3.type, type = _ref3$type === void 0 ? 'info' : _ref3$type, _ref3$className = _ref3.className, className = _ref3$className === void 0 ? 'popup-container' : _ref3$className, message = _ref3.message, icon = _ref3.icon, onClick = _ref3.onClick, onClose = _ref3.onClose, _ref3$closeIconClassN = _ref3.closeIconClassName, closeIconClassName = _ref3$closeIconClassN === void 0 ? 'ds-close-icon' : _ref3$closeIconClassN, _ref3$placement = _ref3.placement, placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement, props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+            api = notificationApi || notification; // TODO: check if context is actually available
+
+            el = document.body.querySelector("." + className);
+
+            if (!el) {
+              _mountInstance = mountInstance(contextHolder, {
+                className: className
+              });
+              containerPromise = _mountInstance[0];
+              el = _mountInstance[1];
+            }
+
+            _context.next = 6;
+            return containerPromise;
+
+          case 6:
+            getContainer = function getContainer() {
+              var _el;
+
+              return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
+            };
+            /** a workaround for handling close clicks,
+             * since there's no way for injecting other element triggering onClose listener.
+             * It is set as a listener for all the clicks
+             * and fires onClose when close-icon was clicked */
+
+
+            maybeCloseClick = function maybeCloseClick(ev) {
+              var _ev$currentTarget;
+
+              var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
+              var isThisCloseIcon = ev == null ? void 0 : (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
+
+              if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
+                return onClose && onClose();
+              }
+
+              return onClick && onClick();
+            };
+
+            return _context.abrupt("return", api.open(_objectSpread({
+              message: message,
+              type: type,
+              placement: placement,
+              getContainer: getContainer,
+              icon: icon,
+              onClick: maybeCloseClick,
+              bottom: 16
+            }, props)));
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _notificationOpen.apply(this, arguments);
 }
+
 export default Notification;

package/dist/Notification/Notification.styles.js

@@ -19,7 +19,7 @@ export var TextLabel = styled.div.withConfig({
 export var NotificationsWrapper = styled.div.withConfig({
   displayName: "Notificationstyles__NotificationsWrapper",
   componentId: "sc-1ke52b0-3"
-})(["& .ant-notification-bottom .ant-notification-hook-holder{margin:0;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0;left:0;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0;background-color:transparent;margin:unset;}& .ant-notification-notice{background-color:transparent;width:588px;border-radius:3px;box-shadow:0 16px 32px 0 ", "1a,0 8px 16px 0 ", "1a;}.ant-notification-notice-icon{display:none;}.ant-notification-notice-with-icon{background-color:transparent;}.ant-notification-notice-close{display:none;}& .ant-notification-notice-message,& .ant-notification-notice-closable .ant-notification-notice-message{padding-right:0;}& .ant-notification-notice-message,& .ant-notification-notice-with-icon .ant-notification-notice-message{margin-left:0;margin-bottom:0;}}"], function (props) {
+})(["& .ant-notification-bottom .ant-notification-hook-holder{margin:0;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0;left:0;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0;background-color:transparent;margin:unset;}& .ant-notification-notice{background-color:transparent;width:588px;border-radius:6px;box-shadow:0 16px 32px 0 ", "1a,0 8px 16px 0 ", "1a;}.ant-notification-notice-icon{display:none;}.ant-notification-notice-with-icon{background-color:transparent;}.ant-notification-notice-close{display:none;}& .ant-notification-notice-message,& .ant-notification-notice-closable .ant-notification-notice-message{padding-right:0;}& .ant-notification-notice-message,& .ant-notification-notice-with-icon .ant-notification-notice-message{margin-left:0;margin-bottom:0;}}"], function (props) {
   var _palette2;
 
   return (_palette2 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette2['grey-900'];

package/dist/Notification/__spec__/Notification.spec.js

@@ -24,4 +24,6 @@ describe('notification', function () {
   it.todo('sending notification with another placement handles it correctly');
   it.todo('getContainer should always point at NotificationsWrapper element');
   it.todo('.ant-notification-bottom should be properly styled even if e.g. .ant-notification-topLeft was added first (`.ant-notification{, }.ant-notification-bottom`)');
+  it.todo('notificationOpen works with useEffect');
+  it.todo('if running from useEffect handle it so works, do not force used to rely on useLayoutEffect');
 });

package/dist/index.d.ts

@@ -1,5 +1,10 @@
 export { default } from './Alert';
 export * as S from './Notification/Notification.styles';
-export { default as Notification } from './Notification/Notification';
+/**
+ * notificationApi is required for properly handling injecting ContextApi for styling and locales.
+ * It's a proxy to `antd`'s `notification` module.
+ */
+export declare const notificationsApi: import("antd/lib/notification").NotificationApi;
 export type { NotificationProps } from './Notification/Notification';
+export { default as Notification } from './Notification/Notification';
 export { notificationOpen } from './Notification/Notification';

package/dist/index.js

@@ -1,5 +1,12 @@
+import { notification } from 'antd';
 export { default } from './Alert';
 import * as _S from './Notification/Notification.styles';
 export { _S as S };
+/**
+ * notificationApi is required for properly handling injecting ContextApi for styling and locales.
+ * It's a proxy to `antd`'s `notification` module.
+ */
+
+export var notificationsApi = notification;
 export { default as Notification } from './Notification/Notification';
 export { notificationOpen } from './Notification/Notification';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.6.1",
+  "version": "0.7.2",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
     "@synerise/ds-button": "^0.17.2",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-typography": "^0.12.2",
-    "@synerise/ds-unordered-list": "^0.2.10",
+    "@synerise/ds-unordered-list": "^0.2.11",
     "animate.css": "^4.1.1",
     "react-animate-height": "^2.0.23",
     "react-mount-animation": "0.0.9"
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "510d01309981d010c794496292be958796c0b6b6"
+  "gitHead": "bf12565ec1e6a4124b0c54cdb61e22eae4401d93"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-image-preview,.ant-modal{pointer-events:none}.ant-image-preview.zoom-appear,.ant-image-preview.zoom-enter,.ant-modal.zoom-appear,.ant-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.ant-image-preview-mask,.ant-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:991000;height:100%;background-color:rgba(0,0,0,.2);filter:alpha(opacity=50)}.ant-image-preview-mask-hidden,.ant-modal-mask-hidden{display:none}.ant-image-preview-wrap,.ant-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.ant-alert{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;padding:8px 15px 8px 37px;word-wrap:break-word;border-radius:3px}.ant-alert.ant-alert-no-icon{padding:8px 15px}.ant-alert.ant-alert-no-icon .ant-alert-close-icon{top:10.47px}.ant-alert.ant-alert-closable{padding-right:30px}.ant-alert-icon{position:absolute;top:10.47px;left:16px}.ant-alert-description{display:none;font-size:13px;line-height:21px}.ant-alert-success{background-color:#f4ffe6;border:1px solid #b7f280}.ant-alert-success .ant-alert-icon{color:#54cb0b}.ant-alert-info{background-color:#e6f4ff;border:1px solid #85c0ff}.ant-alert-info .ant-alert-icon{color:#0b68ff}.ant-alert-warning{background-color:#fffce6;border:1px solid #ffe97a}.ant-alert-warning .ant-alert-icon{color:#fab700}.ant-alert-error{background-color:#fff3f0;border:1px solid #ffab9e}.ant-alert-error .ant-alert-icon{color:#f52922}.ant-alert-error .ant-alert-description>pre{margin:0;padding:0}.ant-alert-close-icon{position:absolute;top:10.47px;right:16px;padding:0;overflow:hidden;font-size:11px;line-height:11px;background-color:transparent;border:none;outline:0;cursor:pointer}.ant-alert-close-icon .anticon-close{color:#232936;transition:color .3s}.ant-alert-close-icon .anticon-close:hover{color:rgba(0,0,0,.75)}.ant-alert-close-text{color:#232936;transition:color .3s}.ant-alert-close-text:hover{color:rgba(0,0,0,.75)}.ant-alert-with-description{position:relative;padding:15px 15px 15px 63px;color:#6a7580;line-height:1.38;border-radius:3px}.ant-alert-with-description.ant-alert-no-icon{padding:15px 15px}.ant-alert-with-description .ant-alert-icon{position:absolute;top:15px;left:24px;font-size:24px}.ant-alert-with-description .ant-alert-close-icon{position:absolute;top:16px;right:16px;font-size:13px;cursor:pointer}.ant-alert-with-description .ant-alert-message{display:block;margin-bottom:4px;color:#384350;font-size:13px}.ant-alert-message{color:#384350}.ant-alert-with-description .ant-alert-description{display:block}.ant-alert.ant-alert-motion-leave{overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86),padding-top .3s cubic-bezier(.78,.14,.15,.86),padding-bottom .3s cubic-bezier(.78,.14,.15,.86),margin-bottom .3s cubic-bezier(.78,.14,.15,.86)}.ant-alert.ant-alert-motion-leave-active{max-height:0;margin-bottom:0!important;padding-top:0;padding-bottom:0;opacity:0}.ant-alert-banner{margin-bottom:0;border:0;border-radius:0}.ant-alert.ant-alert-rtl{padding:8px 37px 8px 15px;direction:rtl}.ant-alert-rtl.ant-alert.ant-alert-no-icon{padding:8px 15px}.ant-alert.ant-alert-rtl.ant-alert.ant-alert-closable{padding-right:37px;padding-left:30px}.ant-alert.ant-alert-rtl.ant-alert.ant-alert-no-icon.ant-alert-closable{padding-right:15px;padding-left:30px}.ant-alert-rtl .ant-alert-icon{right:16px;left:auto}.ant-alert-rtl .ant-alert-close-icon{right:auto;left:16px}.ant-alert.ant-alert-rtl.ant-alert-with-description,.ant-alert.ant-alert-rtl.ant-alert-with-description.ant-alert-closable{padding:15px 63px 15px 15px}.ant-alert.ant-alert-rtl.ant-alert-with-description.ant-alert-no-icon{padding:15px}.ant-alert-rtl.ant-alert-with-description .ant-alert-icon{right:24px;left:auto}.ant-alert-rtl.ant-alert-with-description .ant-alert-close-icon{right:auto;left:16px}.ant-alert{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;padding:13px 24px;word-wrap:break-word;border-radius:3px;max-width:792px;width:100%;display:flex;flex-display:row;align-items:flex-start;justify-content:flex-start;border:0}.ant-alert.ant-alert-no-icon{padding:13px 24px}.ant-alert-icon{position:relative;margin-right:12px;top:0;left:0}.ant-alert-description{display:none;font-size:13px;line-height:22px}.ant-alert-success{background-color:#f9ffed;box-shadow:0 0 0 1px #54cb0b;color:#399903}.ant-alert-success .ant-alert-icon svg{color:#399903;fill:#399903}.ant-alert-info{background-color:#f9fafb;box-shadow:0 0 0 1px #6a7580;color:#6a7580}.ant-alert-info .ant-alert-icon svg{color:#6a7580;fill:#6a7580}.ant-alert-warning{background-color:#fffcf0;box-shadow:0 0 0 1px #fab700;color:#eda600}.ant-alert-warning .ant-alert-icon svg{color:#eda600;fill:#eda600}.ant-alert-error{background-color:#fff6f4;box-shadow:0 0 0 1px #f52922;color:#f52922}.ant-alert-error .ant-alert-icon svg{color:#f52922;fill:#f52922}.ant-alert-error .ant-alert-description>pre{margin:0;padding:0}.ant-alert-close-icon{position:absolute;top:8px;right:16px;padding:0;overflow:hidden;font-size:11px;line-height:22px;background-color:transparent;border:none;outline:0;cursor:pointer}.ant-alert-close-icon .anticon-close{color:#232936;transition:color .3s}.ant-alert-close-icon .anticon-close:hover{color:rgba(0,0,0,.75)}.ant-alert-close-text{color:#232936;transition:color .3s}.ant-alert-close-text:hover{color:rgba(0,0,0,.75)}.ant-alert-message{color:inherit}.ant-alert-with-description .ant-alert-description{display:block}.ant-alert.ant-alert-closing{height:0!important;margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s cubic-bezier(.78,.14,.15,.86)}.ant-alert-slide-up-leave{animation:antAlertSlideUpOut .3s cubic-bezier(.78,.14,.15,.86);animation-fill-mode:both}.ant-alert-banner{margin-bottom:0;border:0;border-radius:0}@keyframes antAlertSlideUpIn{0%{transform:scaleY(0);transform-origin:0 0;opacity:0}100%{transform:scaleY(1);transform-origin:0 0;opacity:1}}@keyframes antAlertSlideUpOut{0%{transform:scaleY(1);transform-origin:0 0;opacity:1}100%{transform:scaleY(0);transform-origin:0 0;opacity:0}}