Latest updates from IceHrmPro

web/node_modules/antd/es/notification/hooks/useNotification.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { NotificationInstance as RCNotificationInstance, NoticeContent as RCNoticeContent } from 'rc-notification/lib/Notification';
+import { NotificationInstance, ArgsProps } from '..';
+export default function createUseNotification(getNotificationInstance: (args: ArgsProps, callback: (info: {
+    prefixCls: string;
+    instance: RCNotificationInstance;
+}) => void) => void, getRCNoticeProps: (args: ArgsProps, prefixCls: string) => RCNoticeContent): () => [NotificationInstance, React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>];

web/node_modules/antd/es/notification/hooks/useNotification.js

@@ -0,0 +1,68 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import * as React from 'react';
+import useRCNotification from "rc-notification/es/useNotification";
+import { ConfigConsumer } from '../../config-provider';
+export default function createUseNotification(getNotificationInstance, getRCNoticeProps) {
+  var useNotification = function useNotification() {
+    // We can only get content by render
+    var getPrefixCls; // We create a proxy to handle delay created instance
+
+    var innerInstance = null;
+    var proxy = {
+      add: function add(noticeProps, holderCallback) {
+        innerInstance === null || innerInstance === void 0 ? void 0 : innerInstance.component.add(noticeProps, holderCallback);
+      }
+    };
+
+    var _useRCNotification = useRCNotification(proxy),
+        _useRCNotification2 = _slicedToArray(_useRCNotification, 2),
+        hookNotify = _useRCNotification2[0],
+        holder = _useRCNotification2[1];
+
+    function notify(args) {
+      var customizePrefixCls = args.prefixCls;
+      var mergedPrefixCls = getPrefixCls('notification', customizePrefixCls);
+      getNotificationInstance(_extends(_extends({}, args), {
+        prefixCls: mergedPrefixCls
+      }), function (_ref) {
+        var prefixCls = _ref.prefixCls,
+            instance = _ref.instance;
+        innerInstance = instance;
+        hookNotify(getRCNoticeProps(args, prefixCls));
+      });
+    } // Fill functions
+
+
+    var hookAPI = {
+      open: notify
+    };
+    ['success', 'info', 'warning', 'error'].forEach(function (type) {
+      hookAPI[type] = function (args) {
+        return hookAPI.open(_extends(_extends({}, args), {
+          type: type
+        }));
+      };
+    });
+    return [hookAPI, /*#__PURE__*/React.createElement(ConfigConsumer, {
+      key: "holder"
+    }, function (context) {
+      getPrefixCls = context.getPrefixCls;
+      return holder;
+    })];
+  };
+
+  return useNotification;
+}

web/node_modules/antd/es/notification/index.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type IconType = 'success' | 'info' | 'error' | 'warning';
+export interface ConfigProps {
+    top?: number;
+    bottom?: number;
+    duration?: number;
+    placement?: NotificationPlacement;
+    getContainer?: () => HTMLElement;
+    closeIcon?: React.ReactNode;
+}
+export interface ArgsProps {
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    btn?: React.ReactNode;
+    key?: string;
+    onClose?: () => void;
+    duration?: number | null;
+    icon?: React.ReactNode;
+    placement?: NotificationPlacement;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    className?: string;
+    readonly type?: IconType;
+    onClick?: () => void;
+    top?: number;
+    bottom?: number;
+    getContainer?: () => HTMLElement;
+    closeIcon?: React.ReactNode;
+}
+export interface NotificationInstance {
+    success(args: ArgsProps): void;
+    error(args: ArgsProps): void;
+    info(args: ArgsProps): void;
+    warning(args: ArgsProps): void;
+    open(args: ArgsProps): void;
+}
+export interface NotificationApi extends NotificationInstance {
+    warn(args: ArgsProps): void;
+    close(key: string): void;
+    config(options: ConfigProps): void;
+    destroy(): void;
+    useNotification: () => [NotificationInstance, React.ReactElement];
+}
+declare const _default: NotificationApi;
+export default _default;

web/node_modules/antd/es/notification/index.js

@@ -0,0 +1,218 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import Notification from 'rc-notification';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
+import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
+import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
+import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
+import createUseNotification from './hooks/useNotification';
+var notificationInstance = {};
+var defaultDuration = 4.5;
+var defaultTop = 24;
+var defaultBottom = 24;
+var defaultPlacement = 'topRight';
+var defaultGetContainer;
+var defaultCloseIcon;
+
+function setNotificationConfig(options) {
+  var duration = options.duration,
+      placement = options.placement,
+      bottom = options.bottom,
+      top = options.top,
+      getContainer = options.getContainer,
+      closeIcon = options.closeIcon;
+
+  if (duration !== undefined) {
+    defaultDuration = duration;
+  }
+
+  if (placement !== undefined) {
+    defaultPlacement = placement;
+  }
+
+  if (bottom !== undefined) {
+    defaultBottom = bottom;
+  }
+
+  if (top !== undefined) {
+    defaultTop = top;
+  }
+
+  if (getContainer !== undefined) {
+    defaultGetContainer = getContainer;
+  }
+
+  if (closeIcon !== undefined) {
+    defaultCloseIcon = closeIcon;
+  }
+}
+
+function getPlacementStyle(placement) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTop;
+  var bottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultBottom;
+  var style;
+
+  switch (placement) {
+    case 'topLeft':
+      style = {
+        left: 0,
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+
+    case 'topRight':
+      style = {
+        right: 0,
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+
+    case 'bottomLeft':
+      style = {
+        left: 0,
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+
+    default:
+      style = {
+        right: 0,
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+  }
+
+  return style;
+}
+
+function getNotificationInstance(args, callback) {
+  var _args$placement = args.placement,
+      placement = _args$placement === void 0 ? defaultPlacement : _args$placement,
+      top = args.top,
+      bottom = args.bottom,
+      _args$getContainer = args.getContainer,
+      getContainer = _args$getContainer === void 0 ? defaultGetContainer : _args$getContainer,
+      _args$closeIcon = args.closeIcon,
+      closeIcon = _args$closeIcon === void 0 ? defaultCloseIcon : _args$closeIcon;
+  var outerPrefixCls = args.prefixCls || 'ant-notification';
+  var prefixCls = "".concat(outerPrefixCls, "-notice");
+  var cacheKey = "".concat(outerPrefixCls, "-").concat(placement);
+  var cacheInstance = notificationInstance[cacheKey];
+
+  if (cacheInstance) {
+    Promise.resolve(cacheInstance).then(function (instance) {
+      callback({
+        prefixCls: prefixCls,
+        instance: instance
+      });
+    });
+    return;
+  }
+
+  var closeIconToRender = /*#__PURE__*/React.createElement("span", {
+    className: "".concat(outerPrefixCls, "-close-x")
+  }, closeIcon || /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: "".concat(outerPrefixCls, "-close-icon")
+  }));
+  notificationInstance[cacheKey] = new Promise(function (resolve) {
+    Notification.newInstance({
+      prefixCls: outerPrefixCls,
+      className: "".concat(outerPrefixCls, "-").concat(placement),
+      style: getPlacementStyle(placement, top, bottom),
+      getContainer: getContainer,
+      closeIcon: closeIconToRender
+    }, function (notification) {
+      resolve(notification);
+      callback({
+        prefixCls: prefixCls,
+        instance: notification
+      });
+    });
+  });
+}
+
+var typeToIcon = {
+  success: CheckCircleOutlined,
+  info: InfoCircleOutlined,
+  error: CloseCircleOutlined,
+  warning: ExclamationCircleOutlined
+};
+
+function getRCNoticeProps(args, prefixCls) {
+  var duration = args.duration === undefined ? defaultDuration : args.duration;
+  var iconNode = null;
+
+  if (args.icon) {
+    iconNode = /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-icon")
+    }, args.icon);
+  } else if (args.type) {
+    iconNode = React.createElement(typeToIcon[args.type] || null, {
+      className: "".concat(prefixCls, "-icon ").concat(prefixCls, "-icon-").concat(args.type)
+    });
+  }
+
+  var autoMarginTag = !args.description && iconNode ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-message-single-line-auto-margin")
+  }) : null;
+  return {
+    content: /*#__PURE__*/React.createElement("div", {
+      className: iconNode ? "".concat(prefixCls, "-with-icon") : ''
+    }, iconNode, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-message")
+    }, autoMarginTag, args.message), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-description")
+    }, args.description), args.btn ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-btn")
+    }, args.btn) : null),
+    duration: duration,
+    closable: true,
+    onClose: args.onClose,
+    onClick: args.onClick,
+    key: args.key,
+    style: args.style || {},
+    className: args.className
+  };
+}
+
+var api = {
+  open: function open(args) {
+    getNotificationInstance(args, function (_ref) {
+      var prefixCls = _ref.prefixCls,
+          instance = _ref.instance;
+      instance.notice(getRCNoticeProps(args, prefixCls));
+    });
+  },
+  close: function close(key) {
+    Object.keys(notificationInstance).forEach(function (cacheKey) {
+      return Promise.resolve(notificationInstance[cacheKey]).then(function (instance) {
+        instance.removeNotice(key);
+      });
+    });
+  },
+  config: setNotificationConfig,
+  destroy: function destroy() {
+    Object.keys(notificationInstance).forEach(function (cacheKey) {
+      Promise.resolve(notificationInstance[cacheKey]).then(function (instance) {
+        instance.destroy();
+      });
+      delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
+    });
+  }
+};
+['success', 'info', 'warning', 'error'].forEach(function (type) {
+  api[type] = function (args) {
+    return api.open(_extends(_extends({}, args), {
+      type: type
+    }));
+  };
+});
+api.warn = api.warning;
+api.useNotification = createUseNotification(getNotificationInstance, getRCNoticeProps);
+export default api;

web/node_modules/antd/es/notification/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';

web/node_modules/antd/es/notification/style/customize.less

@@ -0,0 +1,3 @@
+@import './index.less';
+
+.popover-customize-bg(@notification-prefix-cls, @popover-background);

web/node_modules/antd/es/notification/style/index.css

@@ -0,0 +1,239 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-notification {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  position: fixed;
+  z-index: 1010;
+  width: 384px;
+  max-width: calc(100vw - 32px);
+  margin-right: 24px;
+}
+.ant-notification-topLeft,
+.ant-notification-bottomLeft {
+  margin-right: 0;
+  margin-left: 24px;
+}
+.ant-notification-topLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-bottomLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-topLeft .ant-notification-fade-appear.ant-notification-fade-appear-active,
+.ant-notification-bottomLeft .ant-notification-fade-appear.ant-notification-fade-appear-active {
+  -webkit-animation-name: NotificationLeftFadeIn;
+          animation-name: NotificationLeftFadeIn;
+}
+.ant-notification-close-icon {
+  font-size: 14px;
+  cursor: pointer;
+}
+.ant-notification-hook-holder,
+.ant-notification-notice {
+  position: relative;
+  margin-bottom: 16px;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.ant-notification-hook-holder > .ant-notification-notice {
+  margin-bottom: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.ant-notification-notice {
+  padding: 16px 24px;
+  line-height: 1.5715;
+}
+.ant-notification-notice-message {
+  display: inline-block;
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
+  line-height: 24px;
+}
+.ant-notification-notice-message-single-line-auto-margin {
+  display: block;
+  width: calc(384px - 24px * 2 - 24px - 48px - 100%);
+  max-width: 4px;
+  background-color: transparent;
+  pointer-events: none;
+}
+.ant-notification-notice-message-single-line-auto-margin::before {
+  display: block;
+  content: '';
+}
+.ant-notification-notice-description {
+  font-size: 14px;
+}
+.ant-notification-notice-closable .ant-notification-notice-message {
+  padding-right: 24px;
+}
+.ant-notification-notice-with-icon .ant-notification-notice-message {
+  margin-bottom: 4px;
+  margin-left: 48px;
+  font-size: 16px;
+}
+.ant-notification-notice-with-icon .ant-notification-notice-description {
+  margin-left: 48px;
+  font-size: 14px;
+}
+.ant-notification-notice-icon {
+  position: absolute;
+  margin-left: 4px;
+  font-size: 24px;
+  line-height: 24px;
+}
+.anticon.ant-notification-notice-icon-success {
+  color: #52c41a;
+}
+.anticon.ant-notification-notice-icon-info {
+  color: #1890ff;
+}
+.anticon.ant-notification-notice-icon-warning {
+  color: #faad14;
+}
+.anticon.ant-notification-notice-icon-error {
+  color: #ff4d4f;
+}
+.ant-notification-notice-close {
+  position: absolute;
+  top: 16px;
+  right: 22px;
+  color: rgba(0, 0, 0, 0.45);
+  outline: none;
+}
+.ant-notification-notice-close:hover {
+  color: rgba(0, 0, 0, 0.67);
+}
+.ant-notification-notice-btn {
+  float: right;
+  margin-top: 16px;
+}
+.ant-notification .notification-fade-effect {
+  -webkit-animation-duration: 0.24s;
+          animation-duration: 0.24s;
+  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+.ant-notification-fade-enter,
+.ant-notification-fade-appear {
+  opacity: 0;
+  -webkit-animation-duration: 0.24s;
+          animation-duration: 0.24s;
+  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.ant-notification-fade-leave {
+  -webkit-animation-duration: 0.24s;
+          animation-duration: 0.24s;
+  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-duration: 0.2s;
+          animation-duration: 0.2s;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-fade-appear.ant-notification-fade-appear-active {
+  -webkit-animation-name: NotificationFadeIn;
+          animation-name: NotificationFadeIn;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+.ant-notification-fade-leave.ant-notification-fade-leave-active {
+  -webkit-animation-name: NotificationFadeOut;
+          animation-name: NotificationFadeOut;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+@-webkit-keyframes NotificationFadeIn {
+  0% {
+    left: 384px;
+    opacity: 0;
+  }
+  100% {
+    left: 0;
+    opacity: 1;
+  }
+}
+@keyframes NotificationFadeIn {
+  0% {
+    left: 384px;
+    opacity: 0;
+  }
+  100% {
+    left: 0;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes NotificationLeftFadeIn {
+  0% {
+    right: 384px;
+    opacity: 0;
+  }
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}
+@keyframes NotificationLeftFadeIn {
+  0% {
+    right: 384px;
+    opacity: 0;
+  }
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes NotificationFadeOut {
+  0% {
+    max-height: 150px;
+    margin-bottom: 16px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+  }
+}
+@keyframes NotificationFadeOut {
+  0% {
+    max-height: 150px;
+    margin-bottom: 16px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+  }
+}

web/node_modules/antd/es/notification/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

web/node_modules/antd/es/notification/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

web/node_modules/antd/es/notification/style/index.less

@@ -0,0 +1,214 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './customize.less';
+
+@notification-prefix-cls: ~'@{ant-prefix}-notification';
+@notification-width: 384px;
+@notification-padding-vertical: 16px;
+@notification-padding-horizontal: 24px;
+@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
+@notification-margin-bottom: 16px;
+
+.@{notification-prefix-cls} {
+  .reset-component;
+
+  position: fixed;
+  z-index: @zindex-notification;
+  width: @notification-width;
+  max-width: ~'calc(100vw - 32px)';
+  margin-right: 24px;
+
+  &-topLeft,
+  &-bottomLeft {
+    margin-right: 0;
+    margin-left: 24px;
+
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationLeftFadeIn;
+    }
+  }
+
+  &-close-icon {
+    font-size: @font-size-base;
+    cursor: pointer;
+  }
+
+  &-hook-holder,
+  &-notice {
+    position: relative;
+    margin-bottom: @notification-margin-bottom;
+    overflow: hidden;
+    background: @notification-bg;
+    border-radius: @border-radius-base;
+    box-shadow: @shadow-2;
+  }
+
+  &-hook-holder > &-notice {
+    margin-bottom: 0;
+    box-shadow: none;
+  }
+
+  &-notice {
+    padding: @notification-padding;
+    line-height: @line-height-base;
+
+    &-message {
+      display: inline-block;
+      margin-bottom: 8px;
+      color: @heading-color;
+      font-size: @font-size-lg;
+      line-height: 24px;
+
+      // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
+      &-single-line-auto-margin {
+        display: block;
+        width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
+        max-width: 4px;
+        background-color: transparent;
+        pointer-events: none;
+        &::before {
+          display: block;
+          content: '';
+        }
+      }
+    }
+
+    &-description {
+      font-size: @font-size-base;
+    }
+
+    &-closable &-message {
+      padding-right: 24px;
+    }
+
+    &-with-icon &-message {
+      margin-bottom: 4px;
+      margin-left: 48px;
+      font-size: @font-size-lg;
+    }
+
+    &-with-icon &-description {
+      margin-left: 48px;
+      font-size: @font-size-base;
+    }
+
+    // Icon & color style in different selector level
+    // https://github.com/ant-design/ant-design/issues/16503
+    // https://github.com/ant-design/ant-design/issues/15512
+    &-icon {
+      position: absolute;
+      margin-left: 4px;
+      font-size: 24px;
+      line-height: 24px;
+    }
+
+    .@{iconfont-css-prefix}&-icon {
+      &-success {
+        color: @success-color;
+      }
+      &-info {
+        color: @info-color;
+      }
+      &-warning {
+        color: @warning-color;
+      }
+      &-error {
+        color: @error-color;
+      }
+    }
+
+    &-close {
+      position: absolute;
+      top: 16px;
+      right: 22px;
+      color: @text-color-secondary;
+      outline: none;
+
+      &:hover {
+        & when (@theme = dark) {
+          color: fade(@white, 85%);
+        }
+        & when not (@theme = dark) {
+          color: shade(@text-color-secondary, 40%);
+        }
+      }
+    }
+
+    &-btn {
+      float: right;
+      margin-top: 16px;
+    }
+  }
+
+  .notification-fade-effect {
+    animation-duration: 0.24s;
+    animation-timing-function: @ease-in-out;
+    animation-fill-mode: both;
+  }
+
+  &-fade-enter,
+  &-fade-appear {
+    opacity: 0;
+    .notification-fade-effect();
+
+    animation-play-state: paused;
+  }
+
+  &-fade-leave {
+    .notification-fade-effect();
+
+    animation-duration: 0.2s;
+    animation-play-state: paused;
+  }
+
+  &-fade-enter&-fade-enter-active,
+  &-fade-appear&-fade-appear-active {
+    animation-name: NotificationFadeIn;
+    animation-play-state: running;
+  }
+
+  &-fade-leave&-fade-leave-active {
+    animation-name: NotificationFadeOut;
+    animation-play-state: running;
+  }
+}
+
+@keyframes NotificationFadeIn {
+  0% {
+    left: @notification-width;
+    opacity: 0;
+  }
+  100% {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes NotificationLeftFadeIn {
+  0% {
+    right: @notification-width;
+    opacity: 0;
+  }
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes NotificationFadeOut {
+  0% {
+    max-height: 150px;
+    margin-bottom: @notification-margin-bottom;
+    padding-top: @notification-padding-vertical;
+    padding-bottom: @notification-padding-vertical;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+  }
+}