@databricks/design-system 1.1.0 → 1.3.1

package/dist/cjs/index.js

@@ -8,7 +8,6 @@ exports.Alert = void 0;
 exports.AlignCenterIcon = AlignCenterIcon;
 exports.AlignLeftIcon = AlignLeftIcon;
 exports.AlignRightIcon = AlignRightIcon;
-exports.ApplyCompactDesignSystemTheme = void 0;
 exports.ArrowDownIcon = ArrowDownIcon;
 exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
@@ -209,6 +208,7 @@ exports.getPaginationEmotionStyles = getPaginationEmotionStyles;
 exports.getTabEmotionStyles = void 0;
 exports.useDesignSystemTheme = useDesignSystemTheme;
 exports.useNotification = useNotification;
+exports.useThemedStyles = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -13166,7 +13166,7 @@ var Portal = /*#__PURE__*/(0, React.forwardRef)(function (props, ref) {
   return containerRef.current ? /*#__PURE__*/ReactDOM.default.createPortal(children, containerRef.current) : null;
 });
 
-function isPointsEq$1(a1, a2, isAlignPoint) {
+function isPointsEq$2(a1, a2, isAlignPoint) {
   if (isAlignPoint) {
     return a1[0] === a2[0];
   }
@@ -13174,19 +13174,19 @@ function isPointsEq$1(a1, a2, isAlignPoint) {
   return a1[0] === a2[0] && a1[1] === a2[1];
 }
 
-function getAlignFromPlacement$1(builtinPlacements, placementStr, align) {
+function getAlignFromPlacement$2(builtinPlacements, placementStr, align) {
   var baseAlign = builtinPlacements[placementStr] || {};
   return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, baseAlign), align);
 }
 
-function getAlignPopupClassName$1(builtinPlacements, prefixCls, align, isAlignPoint) {
+function getAlignPopupClassName$2(builtinPlacements, prefixCls, align, isAlignPoint) {
   var points = align.points;
   var placements = Object.keys(builtinPlacements);
 
   for (var i = 0; i < placements.length; i += 1) {
     var placement = placements[i];
 
-    if (isPointsEq$1(builtinPlacements[placement].points, points, isAlignPoint)) {
+    if (isPointsEq$2(builtinPlacements[placement].points, points, isAlignPoint)) {
       return "".concat(prefixCls, "-placement-").concat(placement);
     }
   }
@@ -13194,7 +13194,7 @@ function getAlignPopupClassName$1(builtinPlacements, prefixCls, align, isAlignPo
   return '';
 }
 
-function getMotion$3(_ref) {
+function getMotion$4(_ref) {
   var prefixCls = _ref.prefixCls,
       motion = _ref.motion,
       animation = _ref.animation,
@@ -13219,7 +13219,7 @@ function getMotion$3(_ref) {
   return null;
 }
 
-function Mask$2(props) {
+function Mask$3(props) {
   var prefixCls = props.prefixCls,
       visible = props.visible,
       zIndex = props.zIndex,
@@ -13237,7 +13237,7 @@ function Mask$2(props) {
   if (maskMotion || maskTransitionName || maskAnimation) {
     motion = (0, _objectSpread3.default)({
       motionAppear: true
-    }, getMotion$3({
+    }, getMotion$4({
       motion: maskMotion,
       prefixCls: prefixCls,
       transitionName: maskTransitionName,
@@ -14925,9 +14925,9 @@ var Align = function Align(_ref, ref) {
 
 var RefAlign = /*#__PURE__*/React.default.forwardRef(Align);
 RefAlign.displayName = 'Align';
-var StatusQueue$1 = ['measure', 'align', null, 'motion'];
+var StatusQueue$2 = ['measure', 'align', null, 'motion'];
 
-var useVisibleStatus$1 = function (visible, doMeasure) {
+var useVisibleStatus$2 = function (visible, doMeasure) {
   var _useState = (0, React.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       status = _useState2[0],
@@ -14984,8 +14984,8 @@ var useVisibleStatus$1 = function (visible, doMeasure) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                index = StatusQueue$1.indexOf(status);
-                nextStatus = StatusQueue$1[index + 1];
+                index = StatusQueue$2.indexOf(status);
+                nextStatus = StatusQueue$2[index + 1];
 
                 if (nextStatus && index !== -1) {
                   setStatus(nextStatus);
@@ -15009,7 +15009,7 @@ var useVisibleStatus$1 = function (visible, doMeasure) {
   return [status, goNextStatus];
 };
 
-var useStretchStyle$1 = function (stretch) {
+var useStretchStyle$2 = function (stretch) {
   var _React$useState = React.useState({
     width: 0,
     height: 0
@@ -15051,7 +15051,7 @@ var useStretchStyle$1 = function (stretch) {
   return [style, measureStretch];
 };
 
-var PopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var PopupInner$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var visible = props.visible,
       prefixCls = props.prefixCls,
       className = props.className,
@@ -15079,7 +15079,7 @@ var PopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setAlignedClassName = _useState2[1]; // ======================= Measure ========================
 
 
-  var _useStretchStyle = useStretchStyle$1(stretch),
+  var _useStretchStyle = useStretchStyle$2(stretch),
       _useStretchStyle2 = (0, _slicedToArray2.default)(_useStretchStyle, 2),
       stretchStyle = _useStretchStyle2[0],
       measureStretchStyle = _useStretchStyle2[1];
@@ -15091,7 +15091,7 @@ var PopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } // ======================== Status ========================
 
 
-  var _useVisibleStatus = useVisibleStatus$1(visible, doMeasure),
+  var _useVisibleStatus = useVisibleStatus$2(visible, doMeasure),
       _useVisibleStatus2 = (0, _slicedToArray2.default)(_useVisibleStatus, 2),
       status = _useVisibleStatus2[0],
       goNextStatus = _useVisibleStatus2[1]; // ======================== Aligns ========================
@@ -15136,7 +15136,7 @@ var PopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } // ======================== Motion ========================
 
 
-  var motion = (0, _objectSpread3.default)({}, getMotion$3(props));
+  var motion = (0, _objectSpread3.default)({}, getMotion$4(props));
   ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach(function (eventName) {
     var originHandler = motion[eventName];
 
@@ -15220,8 +15220,8 @@ var PopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, childNode));
   });
 });
-PopupInner$1.displayName = 'PopupInner';
-var MobilePopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+PopupInner$2.displayName = 'PopupInner';
+var MobilePopupInner$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var prefixCls = props.prefixCls,
       visible = props.visible,
       zIndex = props.zIndex,
@@ -15275,8 +15275,8 @@ var MobilePopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, childNode);
   });
 });
-MobilePopupInner$1.displayName = 'MobilePopupInner';
-var Popup$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+MobilePopupInner$2.displayName = 'MobilePopupInner';
+var Popup$2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var visible = _ref.visible,
       mobile = _ref.mobile,
       props = (0, _objectWithoutProperties2.default)(_ref, ["visible", "mobile"]);
@@ -15303,25 +15303,25 @@ var Popup$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setInMobile(isMobile());
     }
   }, [visible, mobile]);
-  var popupNode = inMobile ? /*#__PURE__*/React.createElement(MobilePopupInner$1, (0, _extends3.default)({}, cloneProps, {
+  var popupNode = inMobile ? /*#__PURE__*/React.createElement(MobilePopupInner$2, (0, _extends3.default)({}, cloneProps, {
     mobile: mobile,
     ref: ref
-  })) : /*#__PURE__*/React.createElement(PopupInner$1, (0, _extends3.default)({}, cloneProps, {
+  })) : /*#__PURE__*/React.createElement(PopupInner$2, (0, _extends3.default)({}, cloneProps, {
     ref: ref
   })); // We can use fragment directly but this may failed some selector usage. Keep as origin logic
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Mask$2, cloneProps), popupNode);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Mask$3, cloneProps), popupNode);
 });
-Popup$1.displayName = 'Popup';
-var TriggerContext$1 = /*#__PURE__*/React.createContext(null);
+Popup$2.displayName = 'Popup';
+var TriggerContext$2 = /*#__PURE__*/React.createContext(null);
 
-function noop$3() {}
+function noop$4() {}
 
-function returnEmptyString$1() {
+function returnEmptyString$2() {
   return '';
 }
 
-function returnDocument$1(element) {
+function returnDocument$2(element) {
   if (element) {
     return element.ownerDocument;
   }
@@ -15329,12 +15329,12 @@ function returnDocument$1(element) {
   return window.document;
 }
 
-var ALL_HANDLERS$1 = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
+var ALL_HANDLERS$2 = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
 /**
  * Internal usage. Do not use in your code since this will be removed.
  */
 
-function generateTrigger$1(PortalComponent) {
+function generateTrigger$2(PortalComponent) {
   var Trigger = /*#__PURE__*/function (_React$Component) {
     (0, _inherits2.default)(Trigger, _React$Component);
 
@@ -15532,7 +15532,7 @@ function generateTrigger$1(PortalComponent) {
             getPopupClassNameFromAlign = _this$props.getPopupClassNameFromAlign;
 
         if (popupPlacement && builtinPlacements) {
-          className.push(getAlignPopupClassName$1(builtinPlacements, prefixCls, align, alignPoint));
+          className.push(getAlignPopupClassName$2(builtinPlacements, prefixCls, align, alignPoint));
         }
 
         if (getPopupClassNameFromAlign) {
@@ -15580,7 +15580,7 @@ function generateTrigger$1(PortalComponent) {
 
         mouseProps.onMouseDown = _this.onPopupMouseDown;
         mouseProps.onTouchStart = _this.onPopupMouseDown;
-        return /*#__PURE__*/React.createElement(Popup$1, (0, _extends3.default)({
+        return /*#__PURE__*/React.createElement(Popup$2, (0, _extends3.default)({
           prefixCls: prefixCls,
           destroyPopupOnHide: destroyPopupOnHide,
           visible: popupVisible,
@@ -15684,7 +15684,7 @@ function generateTrigger$1(PortalComponent) {
         prevPopupVisible: popupVisible,
         popupVisible: popupVisible
       };
-      ALL_HANDLERS$1.forEach(function (h) {
+      ALL_HANDLERS$2.forEach(function (h) {
         _this["fire".concat(h)] = function (e) {
           _this.fireEvents(h, e);
         };
@@ -15761,7 +15761,7 @@ function generateTrigger$1(PortalComponent) {
             builtinPlacements = props.builtinPlacements;
 
         if (popupPlacement && builtinPlacements) {
-          return getAlignFromPlacement$1(builtinPlacements, popupPlacement, popupAlign);
+          return getAlignFromPlacement$2(builtinPlacements, popupPlacement, popupAlign);
         }
 
         return popupAlign;
@@ -16038,7 +16038,7 @@ function generateTrigger$1(PortalComponent) {
           portal = null;
         }
 
-        return /*#__PURE__*/React.createElement(TriggerContext$1.Provider, {
+        return /*#__PURE__*/React.createElement(TriggerContext$2.Provider, {
           value: this.triggerContextValue
         }, trigger, portal);
       }
@@ -16059,14 +16059,14 @@ function generateTrigger$1(PortalComponent) {
     return Trigger;
   }(React.Component);
 
-  Trigger.contextType = TriggerContext$1;
+  Trigger.contextType = TriggerContext$2;
   Trigger.defaultProps = {
     prefixCls: 'rc-trigger-popup',
-    getPopupClassNameFromAlign: returnEmptyString$1,
-    getDocument: returnDocument$1,
-    onPopupVisibleChange: noop$3,
-    afterPopupVisibleChange: noop$3,
-    onPopupAlign: noop$3,
+    getPopupClassNameFromAlign: returnEmptyString$2,
+    getDocument: returnDocument$2,
+    onPopupVisibleChange: noop$4,
+    afterPopupVisibleChange: noop$4,
+    onPopupAlign: noop$4,
     popupClassName: '',
     mouseEnterDelay: 0,
     mouseLeaveDelay: 0.1,
@@ -16086,7 +16086,7 @@ function generateTrigger$1(PortalComponent) {
   return Trigger;
 }
 
-var Trigger$2 = generateTrigger$1(Portal);
+var Trigger$3 = generateTrigger$2(Portal);
 
 var getBuiltInPlacements = function getBuiltInPlacements(dropdownMatchSelectWidth) {
   // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
@@ -16180,7 +16180,7 @@ var SelectTrigger = function SelectTrigger(props, ref) {
     popupStyle.width = containerWidth;
   }
 
-  return /*#__PURE__*/React.createElement(Trigger$2, (0, _extends3.default)({}, restProps, {
+  return /*#__PURE__*/React.createElement(Trigger$3, (0, _extends3.default)({}, restProps, {
     showAction: onPopupVisibleChange ? ['click'] : [],
     hideAction: onPopupVisibleChange ? ['click'] : [],
     popupPlacement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
@@ -17812,191 +17812,1446 @@ var Alert$1 = function Alert(_a) {
       closed = _React$useState2[0],
       setClosed = _React$useState2[1];
 
-  var ref = React.useRef();
+  var ref = React.useRef();
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var prefixCls = getPrefixCls('alert', customizePrefixCls);
+
+  var handleClose = function handleClose(e) {
+    var _a;
+
+    setClosed(true);
+    (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  };
+
+  var getType = function getType() {
+    var type = props.type;
+
+    if (type !== undefined) {
+      return type;
+    } // banner 模式默认为警告
+
+
+    return banner ? 'warning' : 'info';
+  }; // closeable when closeText is assigned
+
+
+  var isClosable = closeText ? true : closable;
+  var type = getType();
+
+  var renderIconNode = function renderIconNode() {
+    var icon = props.icon; // use outline icon in alert with description
+
+    var iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
+
+    if (icon) {
+      return replaceElement(icon, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-icon")
+      }, icon), function () {
+        return {
+          className: (0, _classnames2.default)("".concat(prefixCls, "-icon"), (0, _defineProperty2.default)({}, icon.props.className, icon.props.className))
+        };
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(iconType, {
+      className: "".concat(prefixCls, "-icon")
+    });
+  };
+
+  var renderCloseIcon = function renderCloseIcon() {
+    return isClosable ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: handleClose,
+      className: "".concat(prefixCls, "-close-icon"),
+      tabIndex: 0
+    }, closeText ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-close-text")
+    }, closeText) : /*#__PURE__*/React.createElement(_CloseOutlined.default, null)) : null;
+  }; // banner 模式默认有 Icon
+
+
+  var isShowIcon = banner && showIcon === undefined ? true : showIcon;
+  var alertCls = (0, _classnames2.default)(prefixCls, "".concat(prefixCls, "-").concat(type), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-with-description"), !!description), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-icon"), !isShowIcon), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-banner"), !!banner), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames2), className);
+  var dataOrAriaProps = getDataOrAriaProps$1(props);
+  return /*#__PURE__*/React.createElement(CSSMotion, {
+    visible: !closed,
+    motionName: "".concat(prefixCls, "-motion"),
+    motionAppear: false,
+    motionEnter: false,
+    onLeaveStart: function onLeaveStart(node) {
+      return {
+        maxHeight: node.offsetHeight
+      };
+    },
+    onLeaveEnd: afterClose
+  }, function (_ref) {
+    var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+    return /*#__PURE__*/React.createElement("div", (0, _extends3.default)({
+      ref: ref,
+      "data-show": !closed,
+      className: (0, _classnames2.default)(alertCls, motionClassName),
+      style: (0, _extends3.default)((0, _extends3.default)({}, style), motionStyle),
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClick,
+      role: "alert"
+    }, dataOrAriaProps), isShowIcon ? renderIconNode() : null, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-message")
+    }, message), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-description")
+    }, description)), action ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-action")
+    }, action) : null, renderCloseIcon());
+  });
+};
+
+Alert$1.ErrorBoundary = ErrorBoundary;
+var AntDAlert = Alert$1;
+var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+var responsiveMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)'
+};
+var subscribers = new Map();
+var subUid = -1;
+var screens = {};
+var responsiveObserve = {
+  matchHandlers: {},
+  dispatch: function dispatch(pointMap) {
+    screens = pointMap;
+    subscribers.forEach(function (func) {
+      return func(screens);
+    });
+    return subscribers.size >= 1;
+  },
+  subscribe: function subscribe(func) {
+    if (!subscribers.size) this.register();
+    subUid += 1;
+    subscribers.set(subUid, func);
+    func(screens);
+    return subUid;
+  },
+  unsubscribe: function unsubscribe(token) {
+    subscribers["delete"](token);
+    if (!subscribers.size) this.unregister();
+  },
+  unregister: function unregister() {
+    var _this = this;
+
+    Object.keys(responsiveMap).forEach(function (screen) {
+      var matchMediaQuery = responsiveMap[screen];
+      var handler = _this.matchHandlers[matchMediaQuery];
+      handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);
+    });
+    subscribers.clear();
+  },
+  register: function register() {
+    var _this2 = this;
+
+    Object.keys(responsiveMap).forEach(function (screen) {
+      var matchMediaQuery = responsiveMap[screen];
+
+      var listener = function listener(_ref) {
+        var matches = _ref.matches;
+
+        _this2.dispatch((0, _extends3.default)((0, _extends3.default)({}, screens), (0, _defineProperty2.default)({}, screen, matches)));
+      };
+
+      var mql = window.matchMedia(matchMediaQuery);
+      mql.addListener(listener);
+      _this2.matchHandlers[matchMediaQuery] = {
+        mql: mql,
+        listener: listener
+      };
+      listener(mql);
+    });
+  }
+};
+var ResponsiveObserve = responsiveObserve;
+
+function useBreakpoint() {
+  var _useState = (0, React.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      screens = _useState2[0],
+      setScreens = _useState2[1];
+
+  (0, React.useEffect)(function () {
+    var token = ResponsiveObserve.subscribe(function (supportScreens) {
+      setScreens(supportScreens);
+    });
+    return function () {
+      return ResponsiveObserve.unsubscribe(token);
+    };
+  }, []);
+  return screens;
+}
+
+function isPointsEq$1(a1, a2, isAlignPoint) {
+  if (isAlignPoint) {
+    return a1[0] === a2[0];
+  }
+
+  return a1[0] === a2[0] && a1[1] === a2[1];
+}
+
+function getAlignFromPlacement$1(builtinPlacements, placementStr, align) {
+  var baseAlign = builtinPlacements[placementStr] || {};
+  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, baseAlign), align);
+}
+
+function getAlignPopupClassName$1(builtinPlacements, prefixCls, align, isAlignPoint) {
+  var points = align.points;
+  var placements = Object.keys(builtinPlacements);
+
+  for (var i = 0; i < placements.length; i += 1) {
+    var placement = placements[i];
+
+    if (isPointsEq$1(builtinPlacements[placement].points, points, isAlignPoint)) {
+      return "".concat(prefixCls, "-placement-").concat(placement);
+    }
+  }
+
+  return '';
+}
+
+function getMotion$3(_ref) {
+  var prefixCls = _ref.prefixCls,
+      motion = _ref.motion,
+      animation = _ref.animation,
+      transitionName = _ref.transitionName;
+
+  if (motion) {
+    return motion;
+  }
+
+  if (animation) {
+    return {
+      motionName: "".concat(prefixCls, "-").concat(animation)
+    };
+  }
+
+  if (transitionName) {
+    return {
+      motionName: transitionName
+    };
+  }
+
+  return null;
+}
+
+function Mask$2(props) {
+  var prefixCls = props.prefixCls,
+      visible = props.visible,
+      zIndex = props.zIndex,
+      mask = props.mask,
+      maskMotion = props.maskMotion,
+      maskAnimation = props.maskAnimation,
+      maskTransitionName = props.maskTransitionName;
+
+  if (!mask) {
+    return null;
+  }
+
+  var motion = {};
+
+  if (maskMotion || maskTransitionName || maskAnimation) {
+    motion = (0, _objectSpread3.default)({
+      motionAppear: true
+    }, getMotion$3({
+      motion: maskMotion,
+      prefixCls: prefixCls,
+      transitionName: maskTransitionName,
+      animation: maskAnimation
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(CSSMotion, (0, _extends3.default)({}, motion, {
+    visible: visible,
+    removeOnLeave: true
+  }), function (_ref) {
+    var className = _ref.className;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        zIndex: zIndex
+      },
+      className: (0, _classnames2.default)("".concat(prefixCls, "-mask"), className)
+    });
+  });
+}
+
+var StatusQueue$1 = ['measure', 'align', null, 'motion'];
+
+var useVisibleStatus$1 = function (visible, doMeasure) {
+  var _useState = (0, React.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      status = _useState2[0],
+      setInternalStatus = _useState2[1];
+
+  var rafRef = (0, React.useRef)();
+  var destroyRef = (0, React.useRef)(false);
+
+  function setStatus(nextStatus) {
+    if (!destroyRef.current) {
+      setInternalStatus(nextStatus);
+    }
+  }
+
+  function cancelRaf() {
+    wrapperRaf$2.cancel(rafRef.current);
+  }
+
+  function goNextStatus(callback) {
+    cancelRaf();
+    rafRef.current = wrapperRaf$2(function () {
+      // Only align should be manually trigger
+      setStatus(function (prev) {
+        switch (status) {
+          case 'align':
+            return 'motion';
+
+          case 'motion':
+            return 'stable';
+        }
+
+        return prev;
+      });
+      callback === null || callback === void 0 ? void 0 : callback();
+    });
+  } // Init status
+
+
+  (0, React.useEffect)(function () {
+    setStatus('measure');
+  }, [visible]); // Go next status
+
+  (0, React.useEffect)(function () {
+    switch (status) {
+      case 'measure':
+        doMeasure();
+        break;
+    }
+
+    if (status) {
+      rafRef.current = wrapperRaf$2( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var index, nextStatus;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                index = StatusQueue$1.indexOf(status);
+                nextStatus = StatusQueue$1[index + 1];
+
+                if (nextStatus && index !== -1) {
+                  setStatus(nextStatus);
+                }
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      })));
+    }
+  }, [status]);
+  (0, React.useEffect)(function () {
+    return function () {
+      destroyRef.current = true;
+      cancelRaf();
+    };
+  }, []);
+  return [status, goNextStatus];
+};
+
+var useStretchStyle$1 = function (stretch) {
+  var _React$useState = React.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      targetSize = _React$useState2[0],
+      setTargetSize = _React$useState2[1];
+
+  function measureStretch(element) {
+    setTargetSize({
+      width: element.offsetWidth,
+      height: element.offsetHeight
+    });
+  } // Merge stretch style
+
+
+  var style = React.useMemo(function () {
+    var sizeStyle = {};
+
+    if (stretch) {
+      var width = targetSize.width,
+          height = targetSize.height; // Stretch with target
+
+      if (stretch.indexOf('height') !== -1 && height) {
+        sizeStyle.height = height;
+      } else if (stretch.indexOf('minHeight') !== -1 && height) {
+        sizeStyle.minHeight = height;
+      }
+
+      if (stretch.indexOf('width') !== -1 && width) {
+        sizeStyle.width = width;
+      } else if (stretch.indexOf('minWidth') !== -1 && width) {
+        sizeStyle.minWidth = width;
+      }
+    }
+
+    return sizeStyle;
+  }, [stretch, targetSize]);
+  return [style, measureStretch];
+};
+
+var PopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var visible = props.visible,
+      prefixCls = props.prefixCls,
+      className = props.className,
+      style = props.style,
+      children = props.children,
+      zIndex = props.zIndex,
+      stretch = props.stretch,
+      destroyPopupOnHide = props.destroyPopupOnHide,
+      forceRender = props.forceRender,
+      align = props.align,
+      point = props.point,
+      getRootDomNode = props.getRootDomNode,
+      getClassNameFromAlign = props.getClassNameFromAlign,
+      onAlign = props.onAlign,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onMouseDown = props.onMouseDown,
+      onTouchStart = props.onTouchStart;
+  var alignRef = (0, React.useRef)();
+  var elementRef = (0, React.useRef)();
+
+  var _useState = (0, React.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      alignedClassName = _useState2[0],
+      setAlignedClassName = _useState2[1]; // ======================= Measure ========================
+
+
+  var _useStretchStyle = useStretchStyle$1(stretch),
+      _useStretchStyle2 = (0, _slicedToArray2.default)(_useStretchStyle, 2),
+      stretchStyle = _useStretchStyle2[0],
+      measureStretchStyle = _useStretchStyle2[1];
+
+  function doMeasure() {
+    if (stretch) {
+      measureStretchStyle(getRootDomNode());
+    }
+  } // ======================== Status ========================
+
+
+  var _useVisibleStatus = useVisibleStatus$1(visible, doMeasure),
+      _useVisibleStatus2 = (0, _slicedToArray2.default)(_useVisibleStatus, 2),
+      status = _useVisibleStatus2[0],
+      goNextStatus = _useVisibleStatus2[1]; // ======================== Aligns ========================
+
+
+  var prepareResolveRef = (0, React.useRef)(); // `target` on `rc-align` can accept as a function to get the bind element or a point.
+  // ref: https://www.npmjs.com/package/rc-align
+
+  function getAlignTarget() {
+    if (point) {
+      return point;
+    }
+
+    return getRootDomNode;
+  }
+
+  function forceAlign() {
+    var _alignRef$current;
+
+    (_alignRef$current = alignRef.current) === null || _alignRef$current === void 0 ? void 0 : _alignRef$current.forceAlign();
+  }
+
+  function onInternalAlign(popupDomNode, matchAlign) {
+    if (status === 'align') {
+      var nextAlignedClassName = getClassNameFromAlign(matchAlign);
+      setAlignedClassName(nextAlignedClassName); // Repeat until not more align needed
+
+      if (alignedClassName !== nextAlignedClassName) {
+        Promise.resolve().then(function () {
+          forceAlign();
+        });
+      } else {
+        goNextStatus(function () {
+          var _prepareResolveRef$cu;
+
+          (_prepareResolveRef$cu = prepareResolveRef.current) === null || _prepareResolveRef$cu === void 0 ? void 0 : _prepareResolveRef$cu.call(prepareResolveRef);
+        });
+      }
+
+      onAlign === null || onAlign === void 0 ? void 0 : onAlign(popupDomNode, matchAlign);
+    }
+  } // ======================== Motion ========================
+
+
+  var motion = (0, _objectSpread3.default)({}, getMotion$3(props));
+  ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach(function (eventName) {
+    var originHandler = motion[eventName];
+
+    motion[eventName] = function (element, event) {
+      goNextStatus();
+      return originHandler === null || originHandler === void 0 ? void 0 : originHandler(element, event);
+    };
+  });
+
+  function onShowPrepare() {
+    return new Promise(function (resolve) {
+      prepareResolveRef.current = resolve;
+    });
+  } // Go to stable directly when motion not provided
+
+
+  React.useEffect(function () {
+    if (!motion.motionName && status === 'motion') {
+      goNextStatus();
+    }
+  }, [motion.motionName, status]); // ========================= Refs =========================
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      forceAlign: forceAlign,
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  }); // ======================== Render ========================
+
+  var mergedStyle = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, stretchStyle), {}, {
+    zIndex: zIndex,
+    opacity: status === 'motion' || status === 'stable' || !visible ? undefined : 0,
+    pointerEvents: status === 'stable' ? undefined : 'none'
+  }, style); // Align status
+
+  var alignDisabled = true;
+
+  if ((align === null || align === void 0 ? void 0 : align.points) && (status === 'align' || status === 'stable')) {
+    alignDisabled = false;
+  }
+
+  var childNode = children; // Wrapper when multiple children
+
+  if (React.Children.count(children) > 1) {
+    childNode = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(CSSMotion, (0, _extends3.default)({
+    visible: visible,
+    ref: elementRef,
+    leavedClassName: "".concat(prefixCls, "-hidden")
+  }, motion, {
+    onAppearPrepare: onShowPrepare,
+    onEnterPrepare: onShowPrepare,
+    removeOnLeave: destroyPopupOnHide,
+    forceRender: forceRender
+  }), function (_ref, motionRef) {
+    var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+    var mergedClassName = (0, _classnames2.default)(prefixCls, className, alignedClassName, motionClassName);
+    return /*#__PURE__*/React.createElement(RefAlign, {
+      target: getAlignTarget(),
+      key: "popup",
+      ref: alignRef,
+      monitorWindowResize: true,
+      disabled: alignDisabled,
+      align: align,
+      onAlign: onInternalAlign
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: motionRef,
+      className: mergedClassName,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseDownCapture: onMouseDown,
+      onTouchStartCapture: onTouchStart,
+      style: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, motionStyle), mergedStyle)
+    }, childNode));
+  });
+});
+PopupInner$1.displayName = 'PopupInner';
+var MobilePopupInner$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+      visible = props.visible,
+      zIndex = props.zIndex,
+      children = props.children,
+      _props$mobile = props.mobile;
+  _props$mobile = _props$mobile === void 0 ? {} : _props$mobile;
+  var popupClassName = _props$mobile.popupClassName,
+      popupStyle = _props$mobile.popupStyle,
+      _props$mobile$popupMo = _props$mobile.popupMotion,
+      popupMotion = _props$mobile$popupMo === void 0 ? {} : _props$mobile$popupMo,
+      popupRender = _props$mobile.popupRender;
+  var elementRef = React.useRef(); // ========================= Refs =========================
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      forceAlign: function forceAlign() {},
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  }); // ======================== Render ========================
+
+  var mergedStyle = (0, _objectSpread3.default)({
+    zIndex: zIndex
+  }, popupStyle);
+  var childNode = children; // Wrapper when multiple children
+
+  if (React.Children.count(children) > 1) {
+    childNode = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, children);
+  } // Mobile support additional render
+
+
+  if (popupRender) {
+    childNode = popupRender(childNode);
+  }
+
+  return /*#__PURE__*/React.createElement(CSSMotion, (0, _extends3.default)({
+    visible: visible,
+    ref: elementRef,
+    removeOnLeave: true
+  }, popupMotion), function (_ref, motionRef) {
+    var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+    var mergedClassName = (0, _classnames2.default)(prefixCls, popupClassName, motionClassName);
+    return /*#__PURE__*/React.createElement("div", {
+      ref: motionRef,
+      className: mergedClassName,
+      style: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, motionStyle), mergedStyle)
+    }, childNode);
+  });
+});
+MobilePopupInner$1.displayName = 'MobilePopupInner';
+var Popup$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var visible = _ref.visible,
+      mobile = _ref.mobile,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["visible", "mobile"]);
+
+  var _useState = (0, React.useState)(visible),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      innerVisible = _useState2[0],
+      serInnerVisible = _useState2[1];
+
+  var _useState3 = (0, React.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inMobile = _useState4[0],
+      setInMobile = _useState4[1];
+
+  var cloneProps = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
+    visible: innerVisible
+  }); // We check mobile in visible changed here.
+  // And this also delay set `innerVisible` to avoid popup component render flash
+
+  (0, React.useEffect)(function () {
+    serInnerVisible(visible);
+
+    if (visible && mobile) {
+      setInMobile(isMobile());
+    }
+  }, [visible, mobile]);
+  var popupNode = inMobile ? /*#__PURE__*/React.createElement(MobilePopupInner$1, (0, _extends3.default)({}, cloneProps, {
+    mobile: mobile,
+    ref: ref
+  })) : /*#__PURE__*/React.createElement(PopupInner$1, (0, _extends3.default)({}, cloneProps, {
+    ref: ref
+  })); // We can use fragment directly but this may failed some selector usage. Keep as origin logic
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Mask$2, cloneProps), popupNode);
+});
+Popup$1.displayName = 'Popup';
+var TriggerContext$1 = /*#__PURE__*/React.createContext(null);
+
+function noop$3() {}
+
+function returnEmptyString$1() {
+  return '';
+}
+
+function returnDocument$1(element) {
+  if (element) {
+    return element.ownerDocument;
+  }
+
+  return window.document;
+}
+
+var ALL_HANDLERS$1 = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
+/**
+ * Internal usage. Do not use in your code since this will be removed.
+ */
+
+function generateTrigger$1(PortalComponent) {
+  var Trigger = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2.default)(Trigger, _React$Component);
+
+    var _super = (0, _createSuper2.default)(Trigger);
+
+    function Trigger(props) {
+      var _this;
+
+      (0, _classCallCheck2.default)(this, Trigger);
+      _this = _super.call(this, props);
+      _this.popupRef = /*#__PURE__*/React.createRef();
+      _this.triggerRef = /*#__PURE__*/React.createRef();
+
+      _this.onMouseEnter = function (e) {
+        var mouseEnterDelay = _this.props.mouseEnterDelay;
+
+        _this.fireEvents('onMouseEnter', e);
+
+        _this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
+      };
+
+      _this.onMouseMove = function (e) {
+        _this.fireEvents('onMouseMove', e);
+
+        _this.setPoint(e);
+      };
+
+      _this.onMouseLeave = function (e) {
+        _this.fireEvents('onMouseLeave', e);
+
+        _this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
+      };
+
+      _this.onPopupMouseEnter = function () {
+        _this.clearDelayTimer();
+      };
+
+      _this.onPopupMouseLeave = function (e) {
+        var _this$popupRef$curren; // https://github.com/react-component/trigger/pull/13
+        // react bug?
+
+
+        if (e.relatedTarget && !e.relatedTarget.setTimeout && contains$1((_this$popupRef$curren = _this.popupRef.current) === null || _this$popupRef$curren === void 0 ? void 0 : _this$popupRef$curren.getElement(), e.relatedTarget)) {
+          return;
+        }
+
+        _this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
+      };
+
+      _this.onFocus = function (e) {
+        _this.fireEvents('onFocus', e); // incase focusin and focusout
+
+
+        _this.clearDelayTimer();
+
+        if (_this.isFocusToShow()) {
+          _this.focusTime = Date.now();
+
+          _this.delaySetPopupVisible(true, _this.props.focusDelay);
+        }
+      };
+
+      _this.onMouseDown = function (e) {
+        _this.fireEvents('onMouseDown', e);
+
+        _this.preClickTime = Date.now();
+      };
+
+      _this.onTouchStart = function (e) {
+        _this.fireEvents('onTouchStart', e);
+
+        _this.preTouchTime = Date.now();
+      };
+
+      _this.onBlur = function (e) {
+        _this.fireEvents('onBlur', e);
+
+        _this.clearDelayTimer();
+
+        if (_this.isBlurToHide()) {
+          _this.delaySetPopupVisible(false, _this.props.blurDelay);
+        }
+      };
+
+      _this.onContextMenu = function (e) {
+        e.preventDefault();
+
+        _this.fireEvents('onContextMenu', e);
+
+        _this.setPopupVisible(true, e);
+      };
+
+      _this.onContextMenuClose = function () {
+        if (_this.isContextMenuToShow()) {
+          _this.close();
+        }
+      };
+
+      _this.onClick = function (event) {
+        _this.fireEvents('onClick', event); // focus will trigger click
+
+
+        if (_this.focusTime) {
+          var preTime;
+
+          if (_this.preClickTime && _this.preTouchTime) {
+            preTime = Math.min(_this.preClickTime, _this.preTouchTime);
+          } else if (_this.preClickTime) {
+            preTime = _this.preClickTime;
+          } else if (_this.preTouchTime) {
+            preTime = _this.preTouchTime;
+          }
+
+          if (Math.abs(preTime - _this.focusTime) < 20) {
+            return;
+          }
+
+          _this.focusTime = 0;
+        }
+
+        _this.preClickTime = 0;
+        _this.preTouchTime = 0; // Only prevent default when all the action is click.
+        // https://github.com/ant-design/ant-design/issues/17043
+        // https://github.com/ant-design/ant-design/issues/17291
+
+        if (_this.isClickToShow() && (_this.isClickToHide() || _this.isBlurToHide()) && event && event.preventDefault) {
+          event.preventDefault();
+        }
+
+        var nextVisible = !_this.state.popupVisible;
+
+        if (_this.isClickToHide() && !nextVisible || nextVisible && _this.isClickToShow()) {
+          _this.setPopupVisible(!_this.state.popupVisible, event);
+        }
+      };
+
+      _this.onPopupMouseDown = function () {
+        _this.hasPopupMouseDown = true;
+        clearTimeout(_this.mouseDownTimeout);
+        _this.mouseDownTimeout = window.setTimeout(function () {
+          _this.hasPopupMouseDown = false;
+        }, 0);
+
+        if (_this.context) {
+          var _this$context;
+
+          (_this$context = _this.context).onPopupMouseDown.apply(_this$context, arguments);
+        }
+      };
+
+      _this.onDocumentClick = function (event) {
+        if (_this.props.mask && !_this.props.maskClosable) {
+          return;
+        }
+
+        var target = event.target;
+
+        var root = _this.getRootDomNode();
+
+        var popupNode = _this.getPopupDomNode();
+
+        if ( // mousedown on the target should also close popup when action is contextMenu.
+        // https://github.com/ant-design/ant-design/issues/29853
+        (!contains$1(root, target) || _this.isContextMenuOnly()) && !contains$1(popupNode, target) && !_this.hasPopupMouseDown) {
+          _this.close();
+        }
+      };
+
+      _this.getRootDomNode = function () {
+        var getTriggerDOMNode = _this.props.getTriggerDOMNode;
+
+        if (getTriggerDOMNode) {
+          return getTriggerDOMNode(_this.triggerRef.current);
+        }
+
+        try {
+          var domNode = findDOMNode$2(_this.triggerRef.current);
+
+          if (domNode) {
+            return domNode;
+          }
+        } catch (err) {// Do nothing
+        }
+
+        return ReactDOM.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
+      };
+
+      _this.getPopupClassNameFromAlign = function (align) {
+        var className = [];
+        var _this$props = _this.props,
+            popupPlacement = _this$props.popupPlacement,
+            builtinPlacements = _this$props.builtinPlacements,
+            prefixCls = _this$props.prefixCls,
+            alignPoint = _this$props.alignPoint,
+            getPopupClassNameFromAlign = _this$props.getPopupClassNameFromAlign;
+
+        if (popupPlacement && builtinPlacements) {
+          className.push(getAlignPopupClassName$1(builtinPlacements, prefixCls, align, alignPoint));
+        }
+
+        if (getPopupClassNameFromAlign) {
+          className.push(getPopupClassNameFromAlign(align));
+        }
+
+        return className.join(' ');
+      };
+
+      _this.getComponent = function () {
+        var _this$props2 = _this.props,
+            prefixCls = _this$props2.prefixCls,
+            destroyPopupOnHide = _this$props2.destroyPopupOnHide,
+            popupClassName = _this$props2.popupClassName,
+            onPopupAlign = _this$props2.onPopupAlign,
+            popupMotion = _this$props2.popupMotion,
+            popupAnimation = _this$props2.popupAnimation,
+            popupTransitionName = _this$props2.popupTransitionName,
+            popupStyle = _this$props2.popupStyle,
+            mask = _this$props2.mask,
+            maskAnimation = _this$props2.maskAnimation,
+            maskTransitionName = _this$props2.maskTransitionName,
+            maskMotion = _this$props2.maskMotion,
+            zIndex = _this$props2.zIndex,
+            popup = _this$props2.popup,
+            stretch = _this$props2.stretch,
+            alignPoint = _this$props2.alignPoint,
+            mobile = _this$props2.mobile,
+            forceRender = _this$props2.forceRender;
+        var _this$state = _this.state,
+            popupVisible = _this$state.popupVisible,
+            point = _this$state.point;
+
+        var align = _this.getPopupAlign();
+
+        var mouseProps = {};
+
+        if (_this.isMouseEnterToShow()) {
+          mouseProps.onMouseEnter = _this.onPopupMouseEnter;
+        }
+
+        if (_this.isMouseLeaveToHide()) {
+          mouseProps.onMouseLeave = _this.onPopupMouseLeave;
+        }
+
+        mouseProps.onMouseDown = _this.onPopupMouseDown;
+        mouseProps.onTouchStart = _this.onPopupMouseDown;
+        return /*#__PURE__*/React.createElement(Popup$1, (0, _extends3.default)({
+          prefixCls: prefixCls,
+          destroyPopupOnHide: destroyPopupOnHide,
+          visible: popupVisible,
+          point: alignPoint && point,
+          className: popupClassName,
+          align: align,
+          onAlign: onPopupAlign,
+          animation: popupAnimation,
+          getClassNameFromAlign: _this.getPopupClassNameFromAlign
+        }, mouseProps, {
+          stretch: stretch,
+          getRootDomNode: _this.getRootDomNode,
+          style: popupStyle,
+          mask: mask,
+          zIndex: zIndex,
+          transitionName: popupTransitionName,
+          maskAnimation: maskAnimation,
+          maskTransitionName: maskTransitionName,
+          maskMotion: maskMotion,
+          ref: _this.popupRef,
+          motion: popupMotion,
+          mobile: mobile,
+          forceRender: forceRender
+        }), typeof popup === 'function' ? popup() : popup);
+      };
+
+      _this.attachParent = function (popupContainer) {
+        wrapperRaf$2.cancel(_this.attachId);
+        var _this$props3 = _this.props,
+            getPopupContainer = _this$props3.getPopupContainer,
+            getDocument = _this$props3.getDocument;
+
+        var domNode = _this.getRootDomNode();
+
+        var mountNode;
+
+        if (!getPopupContainer) {
+          mountNode = getDocument(_this.getRootDomNode()).body;
+        } else if (domNode || getPopupContainer.length === 0) {
+          // Compatible for legacy getPopupContainer with domNode argument.
+          // If no need `domNode` argument, will call directly.
+          // https://codesandbox.io/s/eloquent-mclean-ss93m?file=/src/App.js
+          mountNode = getPopupContainer(domNode);
+        }
+
+        if (mountNode) {
+          mountNode.appendChild(popupContainer);
+        } else {
+          // Retry after frame render in case parent not ready
+          _this.attachId = wrapperRaf$2(function () {
+            _this.attachParent(popupContainer);
+          });
+        }
+      };
+
+      _this.getContainer = function () {
+        var getDocument = _this.props.getDocument;
+        var popupContainer = getDocument(_this.getRootDomNode()).createElement('div'); // Make sure default popup container will never cause scrollbar appearing
+        // https://github.com/react-component/trigger/issues/41
+
+        popupContainer.style.position = 'absolute';
+        popupContainer.style.top = '0';
+        popupContainer.style.left = '0';
+        popupContainer.style.width = '100%';
+
+        _this.attachParent(popupContainer);
+
+        return popupContainer;
+      };
+
+      _this.setPoint = function (point) {
+        var alignPoint = _this.props.alignPoint;
+        if (!alignPoint || !point) return;
+
+        _this.setState({
+          point: {
+            pageX: point.pageX,
+            pageY: point.pageY
+          }
+        });
+      };
+
+      _this.handlePortalUpdate = function () {
+        if (_this.state.prevPopupVisible !== _this.state.popupVisible) {
+          _this.props.afterPopupVisibleChange(_this.state.popupVisible);
+        }
+      };
+
+      _this.triggerContextValue = {
+        onPopupMouseDown: _this.onPopupMouseDown
+      };
+      var popupVisible;
+
+      if ('popupVisible' in props) {
+        popupVisible = !!props.popupVisible;
+      } else {
+        popupVisible = !!props.defaultPopupVisible;
+      }
+
+      _this.state = {
+        prevPopupVisible: popupVisible,
+        popupVisible: popupVisible
+      };
+      ALL_HANDLERS$1.forEach(function (h) {
+        _this["fire".concat(h)] = function (e) {
+          _this.fireEvents(h, e);
+        };
+      });
+      return _this;
+    }
+
+    (0, _createClass2.default)(Trigger, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.componentDidUpdate();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate() {
+        var props = this.props;
+        var state = this.state; // We must listen to `mousedown` or `touchstart`, edge case:
+        // https://github.com/ant-design/ant-design/issues/5804
+        // https://github.com/react-component/calendar/issues/250
+        // https://github.com/react-component/trigger/issues/50
+
+        if (state.popupVisible) {
+          var currentDocument;
+
+          if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
+            currentDocument = props.getDocument(this.getRootDomNode());
+            this.clickOutsideHandler = addEventListenerWrap$1(currentDocument, 'mousedown', this.onDocumentClick);
+          } // always hide on mobile
+
+
+          if (!this.touchOutsideHandler) {
+            currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
+            this.touchOutsideHandler = addEventListenerWrap$1(currentDocument, 'touchstart', this.onDocumentClick);
+          } // close popup when trigger type contains 'onContextMenu' and document is scrolling.
+
+
+          if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
+            currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
+            this.contextMenuOutsideHandler1 = addEventListenerWrap$1(currentDocument, 'scroll', this.onContextMenuClose);
+          } // close popup when trigger type contains 'onContextMenu' and window is blur.
+
+
+          if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
+            this.contextMenuOutsideHandler2 = addEventListenerWrap$1(window, 'blur', this.onContextMenuClose);
+          }
+
+          return;
+        }
+
+        this.clearOutsideHandler();
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.clearDelayTimer();
+        this.clearOutsideHandler();
+        clearTimeout(this.mouseDownTimeout);
+        wrapperRaf$2.cancel(this.attachId);
+      }
+    }, {
+      key: "getPopupDomNode",
+      value: function getPopupDomNode() {
+        var _this$popupRef$curren2; // for test
+
+
+        return ((_this$popupRef$curren2 = this.popupRef.current) === null || _this$popupRef$curren2 === void 0 ? void 0 : _this$popupRef$curren2.getElement()) || null;
+      }
+    }, {
+      key: "getPopupAlign",
+      value: function getPopupAlign() {
+        var props = this.props;
+        var popupPlacement = props.popupPlacement,
+            popupAlign = props.popupAlign,
+            builtinPlacements = props.builtinPlacements;
+
+        if (popupPlacement && builtinPlacements) {
+          return getAlignFromPlacement$1(builtinPlacements, popupPlacement, popupAlign);
+        }
+
+        return popupAlign;
+      }
+      /**
+       * @param popupVisible    Show or not the popup element
+       * @param event           SyntheticEvent, used for `pointAlign`
+       */
+
+    }, {
+      key: "setPopupVisible",
+      value: function setPopupVisible(popupVisible, event) {
+        var alignPoint = this.props.alignPoint;
+        var prevPopupVisible = this.state.popupVisible;
+        this.clearDelayTimer();
+
+        if (prevPopupVisible !== popupVisible) {
+          if (!('popupVisible' in this.props)) {
+            this.setState({
+              popupVisible: popupVisible,
+              prevPopupVisible: prevPopupVisible
+            });
+          }
+
+          this.props.onPopupVisibleChange(popupVisible);
+        } // Always record the point position since mouseEnterDelay will delay the show
+
+
+        if (alignPoint && event && popupVisible) {
+          this.setPoint(event);
+        }
+      }
+    }, {
+      key: "delaySetPopupVisible",
+      value: function delaySetPopupVisible(visible, delayS, event) {
+        var _this2 = this;
+
+        var delay = delayS * 1000;
+        this.clearDelayTimer();
+
+        if (delay) {
+          var point = event ? {
+            pageX: event.pageX,
+            pageY: event.pageY
+          } : null;
+          this.delayTimer = window.setTimeout(function () {
+            _this2.setPopupVisible(visible, point);
+
+            _this2.clearDelayTimer();
+          }, delay);
+        } else {
+          this.setPopupVisible(visible, event);
+        }
+      }
+    }, {
+      key: "clearDelayTimer",
+      value: function clearDelayTimer() {
+        if (this.delayTimer) {
+          clearTimeout(this.delayTimer);
+          this.delayTimer = null;
+        }
+      }
+    }, {
+      key: "clearOutsideHandler",
+      value: function clearOutsideHandler() {
+        if (this.clickOutsideHandler) {
+          this.clickOutsideHandler.remove();
+          this.clickOutsideHandler = null;
+        }
+
+        if (this.contextMenuOutsideHandler1) {
+          this.contextMenuOutsideHandler1.remove();
+          this.contextMenuOutsideHandler1 = null;
+        }
+
+        if (this.contextMenuOutsideHandler2) {
+          this.contextMenuOutsideHandler2.remove();
+          this.contextMenuOutsideHandler2 = null;
+        }
+
+        if (this.touchOutsideHandler) {
+          this.touchOutsideHandler.remove();
+          this.touchOutsideHandler = null;
+        }
+      }
+    }, {
+      key: "createTwoChains",
+      value: function createTwoChains(event) {
+        var childPros = this.props.children.props;
+        var props = this.props;
+
+        if (childPros[event] && props[event]) {
+          return this["fire".concat(event)];
+        }
+
+        return childPros[event] || props[event];
+      }
+    }, {
+      key: "isClickToShow",
+      value: function isClickToShow() {
+        var _this$props4 = this.props,
+            action = _this$props4.action,
+            showAction = _this$props4.showAction;
+        return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
+      }
+    }, {
+      key: "isContextMenuOnly",
+      value: function isContextMenuOnly() {
+        var action = this.props.action;
+        return action === 'contextMenu' || action.length === 1 && action[0] === 'contextMenu';
+      }
+    }, {
+      key: "isContextMenuToShow",
+      value: function isContextMenuToShow() {
+        var _this$props5 = this.props,
+            action = _this$props5.action,
+            showAction = _this$props5.showAction;
+        return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
+      }
+    }, {
+      key: "isClickToHide",
+      value: function isClickToHide() {
+        var _this$props6 = this.props,
+            action = _this$props6.action,
+            hideAction = _this$props6.hideAction;
+        return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
+      }
+    }, {
+      key: "isMouseEnterToShow",
+      value: function isMouseEnterToShow() {
+        var _this$props7 = this.props,
+            action = _this$props7.action,
+            showAction = _this$props7.showAction;
+        return action.indexOf('hover') !== -1 || showAction.indexOf('mouseEnter') !== -1;
+      }
+    }, {
+      key: "isMouseLeaveToHide",
+      value: function isMouseLeaveToHide() {
+        var _this$props8 = this.props,
+            action = _this$props8.action,
+            hideAction = _this$props8.hideAction;
+        return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseLeave') !== -1;
+      }
+    }, {
+      key: "isFocusToShow",
+      value: function isFocusToShow() {
+        var _this$props9 = this.props,
+            action = _this$props9.action,
+            showAction = _this$props9.showAction;
+        return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
+      }
+    }, {
+      key: "isBlurToHide",
+      value: function isBlurToHide() {
+        var _this$props10 = this.props,
+            action = _this$props10.action,
+            hideAction = _this$props10.hideAction;
+        return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
+      }
+    }, {
+      key: "forcePopupAlign",
+      value: function forcePopupAlign() {
+        if (this.state.popupVisible) {
+          var _this$popupRef$curren3;
+
+          (_this$popupRef$curren3 = this.popupRef.current) === null || _this$popupRef$curren3 === void 0 ? void 0 : _this$popupRef$curren3.forceAlign();
+        }
+      }
+    }, {
+      key: "fireEvents",
+      value: function fireEvents(type, e) {
+        var childCallback = this.props.children.props[type];
 
-  var _React$useContext = React.useContext(ConfigContext),
-      getPrefixCls = _React$useContext.getPrefixCls,
-      direction = _React$useContext.direction;
+        if (childCallback) {
+          childCallback(e);
+        }
 
-  var prefixCls = getPrefixCls('alert', customizePrefixCls);
+        var callback = this.props[type];
 
-  var handleClose = function handleClose(e) {
-    var _a;
+        if (callback) {
+          callback(e);
+        }
+      }
+    }, {
+      key: "close",
+      value: function close() {
+        this.setPopupVisible(false);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var popupVisible = this.state.popupVisible;
+        var _this$props11 = this.props,
+            children = _this$props11.children,
+            forceRender = _this$props11.forceRender,
+            alignPoint = _this$props11.alignPoint,
+            className = _this$props11.className,
+            autoDestroy = _this$props11.autoDestroy;
+        var child = React.Children.only(children);
+        var newChildProps = {
+          key: 'trigger'
+        }; // ============================== Visible Handlers ==============================
+        // >>> ContextMenu
 
-    setClosed(true);
-    (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
-  };
+        if (this.isContextMenuToShow()) {
+          newChildProps.onContextMenu = this.onContextMenu;
+        } else {
+          newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
+        } // >>> Click
 
-  var getType = function getType() {
-    var type = props.type;
 
-    if (type !== undefined) {
-      return type;
-    } // banner 模式默认为警告
+        if (this.isClickToHide() || this.isClickToShow()) {
+          newChildProps.onClick = this.onClick;
+          newChildProps.onMouseDown = this.onMouseDown;
+          newChildProps.onTouchStart = this.onTouchStart;
+        } else {
+          newChildProps.onClick = this.createTwoChains('onClick');
+          newChildProps.onMouseDown = this.createTwoChains('onMouseDown');
+          newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
+        } // >>> Hover(enter)
 
 
-    return banner ? 'warning' : 'info';
-  }; // closeable when closeText is assigned
+        if (this.isMouseEnterToShow()) {
+          newChildProps.onMouseEnter = this.onMouseEnter; // Point align
 
+          if (alignPoint) {
+            newChildProps.onMouseMove = this.onMouseMove;
+          }
+        } else {
+          newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
+        } // >>> Hover(leave)
 
-  var isClosable = closeText ? true : closable;
-  var type = getType();
 
-  var renderIconNode = function renderIconNode() {
-    var icon = props.icon; // use outline icon in alert with description
+        if (this.isMouseLeaveToHide()) {
+          newChildProps.onMouseLeave = this.onMouseLeave;
+        } else {
+          newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
+        } // >>> Focus
 
-    var iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
 
-    if (icon) {
-      return replaceElement(icon, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-icon")
-      }, icon), function () {
-        return {
-          className: (0, _classnames2.default)("".concat(prefixCls, "-icon"), (0, _defineProperty2.default)({}, icon.props.className, icon.props.className))
-        };
-      });
-    }
+        if (this.isFocusToShow() || this.isBlurToHide()) {
+          newChildProps.onFocus = this.onFocus;
+          newChildProps.onBlur = this.onBlur;
+        } else {
+          newChildProps.onFocus = this.createTwoChains('onFocus');
+          newChildProps.onBlur = this.createTwoChains('onBlur');
+        } // =================================== Render ===================================
 
-    return /*#__PURE__*/React.createElement(iconType, {
-      className: "".concat(prefixCls, "-icon")
-    });
-  };
 
-  var renderCloseIcon = function renderCloseIcon() {
-    return isClosable ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: handleClose,
-      className: "".concat(prefixCls, "-close-icon"),
-      tabIndex: 0
-    }, closeText ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-close-text")
-    }, closeText) : /*#__PURE__*/React.createElement(_CloseOutlined.default, null)) : null;
-  }; // banner 模式默认有 Icon
+        var childrenClassName = (0, _classnames2.default)(child && child.props && child.props.className, className);
 
+        if (childrenClassName) {
+          newChildProps.className = childrenClassName;
+        }
 
-  var isShowIcon = banner && showIcon === undefined ? true : showIcon;
-  var alertCls = (0, _classnames2.default)(prefixCls, "".concat(prefixCls, "-").concat(type), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-with-description"), !!description), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-icon"), !isShowIcon), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-banner"), !!banner), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames2), className);
-  var dataOrAriaProps = getDataOrAriaProps$1(props);
-  return /*#__PURE__*/React.createElement(CSSMotion, {
-    visible: !closed,
-    motionName: "".concat(prefixCls, "-motion"),
-    motionAppear: false,
-    motionEnter: false,
-    onLeaveStart: function onLeaveStart(node) {
-      return {
-        maxHeight: node.offsetHeight
-      };
-    },
-    onLeaveEnd: afterClose
-  }, function (_ref) {
-    var motionClassName = _ref.className,
-        motionStyle = _ref.style;
-    return /*#__PURE__*/React.createElement("div", (0, _extends3.default)({
-      ref: ref,
-      "data-show": !closed,
-      className: (0, _classnames2.default)(alertCls, motionClassName),
-      style: (0, _extends3.default)((0, _extends3.default)({}, style), motionStyle),
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: onClick,
-      role: "alert"
-    }, dataOrAriaProps), isShowIcon ? renderIconNode() : null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-message")
-    }, message), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-description")
-    }, description)), action ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-action")
-    }, action) : null, renderCloseIcon());
-  });
-};
+        var cloneProps = (0, _objectSpread3.default)({}, newChildProps);
 
-Alert$1.ErrorBoundary = ErrorBoundary;
-var AntDAlert = Alert$1;
-var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-var responsiveMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)'
-};
-var subscribers = new Map();
-var subUid = -1;
-var screens = {};
-var responsiveObserve = {
-  matchHandlers: {},
-  dispatch: function dispatch(pointMap) {
-    screens = pointMap;
-    subscribers.forEach(function (func) {
-      return func(screens);
-    });
-    return subscribers.size >= 1;
-  },
-  subscribe: function subscribe(func) {
-    if (!subscribers.size) this.register();
-    subUid += 1;
-    subscribers.set(subUid, func);
-    func(screens);
-    return subUid;
-  },
-  unsubscribe: function unsubscribe(token) {
-    subscribers["delete"](token);
-    if (!subscribers.size) this.unregister();
-  },
-  unregister: function unregister() {
-    var _this = this;
+        if (supportRef$1(child)) {
+          cloneProps.ref = composeRef$2(this.triggerRef, child.ref);
+        }
 
-    Object.keys(responsiveMap).forEach(function (screen) {
-      var matchMediaQuery = responsiveMap[screen];
-      var handler = _this.matchHandlers[matchMediaQuery];
-      handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);
-    });
-    subscribers.clear();
-  },
-  register: function register() {
-    var _this2 = this;
+        var trigger = /*#__PURE__*/React.cloneElement(child, cloneProps);
+        var portal; // prevent unmounting after it's rendered
 
-    Object.keys(responsiveMap).forEach(function (screen) {
-      var matchMediaQuery = responsiveMap[screen];
+        if (popupVisible || this.popupRef.current || forceRender) {
+          portal = /*#__PURE__*/React.createElement(PortalComponent, {
+            key: "portal",
+            getContainer: this.getContainer,
+            didUpdate: this.handlePortalUpdate
+          }, this.getComponent());
+        }
 
-      var listener = function listener(_ref) {
-        var matches = _ref.matches;
+        if (!popupVisible && autoDestroy) {
+          portal = null;
+        }
 
-        _this2.dispatch((0, _extends3.default)((0, _extends3.default)({}, screens), (0, _defineProperty2.default)({}, screen, matches)));
-      };
+        return /*#__PURE__*/React.createElement(TriggerContext$1.Provider, {
+          value: this.triggerContextValue
+        }, trigger, portal);
+      }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(_ref, prevState) {
+        var popupVisible = _ref.popupVisible;
+        var newState = {};
 
-      var mql = window.matchMedia(matchMediaQuery);
-      mql.addListener(listener);
-      _this2.matchHandlers[matchMediaQuery] = {
-        mql: mql,
-        listener: listener
-      };
-      listener(mql);
-    });
-  }
-};
-var ResponsiveObserve = responsiveObserve;
+        if (popupVisible !== undefined && prevState.popupVisible !== popupVisible) {
+          newState.popupVisible = popupVisible;
+          newState.prevPopupVisible = prevState.popupVisible;
+        }
 
-function useBreakpoint() {
-  var _useState = (0, React.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      screens = _useState2[0],
-      setScreens = _useState2[1];
+        return newState;
+      }
+    }]);
+    return Trigger;
+  }(React.Component);
 
-  (0, React.useEffect)(function () {
-    var token = ResponsiveObserve.subscribe(function (supportScreens) {
-      setScreens(supportScreens);
-    });
-    return function () {
-      return ResponsiveObserve.unsubscribe(token);
-    };
-  }, []);
-  return screens;
+  Trigger.contextType = TriggerContext$1;
+  Trigger.defaultProps = {
+    prefixCls: 'rc-trigger-popup',
+    getPopupClassNameFromAlign: returnEmptyString$1,
+    getDocument: returnDocument$1,
+    onPopupVisibleChange: noop$3,
+    afterPopupVisibleChange: noop$3,
+    onPopupAlign: noop$3,
+    popupClassName: '',
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 0.1,
+    focusDelay: 0,
+    blurDelay: 0.15,
+    popupStyle: {},
+    destroyPopupOnHide: false,
+    popupAlign: {},
+    defaultPopupVisible: false,
+    mask: false,
+    maskClosable: true,
+    action: [],
+    showAction: [],
+    hideAction: [],
+    autoDestroy: false
+  };
+  return Trigger;
 }
 
+var Trigger$2 = generateTrigger$1(Portal);
 var autoAdjustOverflow$3 = {
   adjustX: 1,
   adjustY: 1
@@ -48341,7 +49596,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
   return t;
 };
 
-var Link = function Link(_a, ref) {
+var Link$1 = function Link(_a, ref) {
   var ellipsis = _a.ellipsis,
       rel = _a.rel,
       restProps = __rest$1(_a, ["ellipsis", "rel"]);
@@ -48366,7 +49621,7 @@ var Link = function Link(_a, ref) {
   }));
 };
 
-var Link$1 = /*#__PURE__*/React.forwardRef(Link);
+var Link$2 = /*#__PURE__*/React.forwardRef(Link$1);
 
 var __rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -48413,7 +49668,7 @@ var Paragraph$1 = function Paragraph(props) {
 var Paragraph$2 = Paragraph$1;
 var Typography$1 = OriginTypography;
 Typography$1.Text = Text$2;
-Typography$1.Link = Link$1;
+Typography$1.Link = Link$2;
 Typography$1.Title = Title$2;
 Typography$1.Paragraph = Paragraph$2;
 var AntDTypography = Typography$1;
@@ -48423,21 +49678,22 @@ const Icon = props => {
     component: Component,
     ...otherProps
   } = props;
+  const MemoizedComponent = (0, React.useMemo)(() => Component ? _ref => {
+    let {
+      fill,
+      ...iconProps
+    } = _ref;
+    return (// We don't rely on top-level fills for our colors. Fills are specified
+      // with "currentColor" on children of the top-most svg.
+      (0, _jsxRuntime.jsx)(Component, {
+        fill: "none",
+        ...iconProps
+      })
+    );
+  } : undefined, [Component]);
   return (0, _jsxRuntime.jsx)(_icons.default, {
     style: {},
-    component: !Component ? undefined : _ref => {
-      let {
-        fill,
-        ...iconProps
-      } = _ref;
-      return (// We don't rely on top-level fills for our colors. Fills are specified
-        // with "currentColor" on children of the top-most svg.
-        (0, _jsxRuntime.jsx)(Component, {
-          fill: "none",
-          ...iconProps
-        })
-      );
-    },
+    component: MemoizedComponent,
     ...otherProps
   });
 };
@@ -52380,12 +53636,12 @@ const colorPalettePrimary = {
   white: '#FFFFFF',
   grey100: '#F2F5F7',
   grey200: '#E4EBF0',
-  grey300: '#CEDBE5',
+  grey300: '#CDDAE5',
   grey400: '#BDCDDB',
   grey500: '#8297A8',
   grey600: '#5D7283',
   grey700: '#44535F',
-  grey800: '#20272E',
+  grey800: '#1F272D',
   red100: '#FFF5F7',
   red200: '#FDE2E8',
   red300: '#FBD0D8',
@@ -52461,6 +53717,7 @@ const lightColorList = {
   borderDecorative: colorPalettePrimary.grey300,
   textPrimary: colorPalettePrimary.grey800,
   textSecondary: colorPalettePrimary.grey600,
+  textPlaceholder: colorPalettePrimary.grey400,
   textValidationDanger: colorPalettePrimary.red600,
   textValidationSuccess: colorPalettePrimary.green600,
   textValidationWarning: colorPalettePrimary.yellow600,
@@ -52482,6 +53739,8 @@ const lightColorList = {
   tagPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
   tagIconHover: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.8).hex(),
   tagIconPress: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.08).hex(),
   tooltipBackgroundTooltip: colorPalettePrimary.grey800,
   ...unstableColors
 };
@@ -52519,6 +53778,7 @@ const darkColorList = {
   borderDecorative: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.24).hex(),
   textPrimary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
   textSecondary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
+  textPlaceholder: (0, _chromaJs.default)(colorPalettePrimary.grey400).alpha(0.84).hex(),
   textValidationDanger: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.84).hex(),
   textValidationSuccess: (0, _chromaJs.default)(colorPalettePrimary.green400).alpha(0.84).hex(),
   textValidationWarning: (0, _chromaJs.default)(colorPalettePrimary.yellow400).alpha(0.84).hex(),
@@ -52540,6 +53800,8 @@ const darkColorList = {
   tagPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
   tagIconHover: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.8).hex(),
   tagIconPress: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.16).hex(),
   tooltipBackgroundTooltip: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
   // Missing in list
   backgroundDanger: 'rgba(200,45,76,0.08)',
@@ -52584,10 +53846,8 @@ const deprecatedColors = {
   radioDefaultBackground: '#FFFFFF',
   radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
   // Fade of Interactive Available
-  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)',
-  // Fade of Interactive Available
-  // Typography colors
-  typographyCodeBg: 'rgba(32, 39, 46, 0.08)'
+  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
+
 };
 
 function getColors(theme) {
@@ -52660,7 +53920,7 @@ const antdGeneralVariables = {
   buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
 };
 var generalVariables = antdGeneralVariables;
-const FONT_SIZE_BASE = 14; // Less variables that are used by AntD
+const FONT_SIZE_BASE = 13; // Less variables that are used by AntD
 
 const antdTypography = {
   fontSizeSm: 12,
@@ -52741,7 +54001,45 @@ function WithDesignSystemThemeHoc(Component) {
     });
   };
 }
+/**
+ * A helper hook that allows quick creation of theme-dependent styles. 
+ * Results in more compact code than using useMemo and 
+ * useDesignSystemTheme separately.
+ * 
+ * @example 
+ * const styles = useThemedStyles((theme) => ({
+ *   overlay: {
+ *     backgroundColor: theme.colors.backgroundPrimary,
+ *     borderRadius: theme.borders.borderRadiusMd,
+ *   },
+ *   wrapper: {
+ *     display: 'flex',
+ *     gap: theme.spacing.md,
+ *   },
+ * }));
+
+ * <div css={styles.overlay}>...</div>
+ * 
+ * @param styleFactory Factory function that accepts theme object as a parameter and returns
+ *     the style object. **Note**: factory function body is being memoized internally and is intended
+ *     to be used only for simple style objects that depend solely on the theme. If you want to use
+ *     styles that change depending on external values (state, props etc.) you should use
+ *     `useDesignSystemTheme` directly with  your own reaction mechanism.
+ * @returns The constructed style object
+ */
+
 
+const useThemedStyles = styleFactory => {
+  const {
+    theme
+  } = useDesignSystemTheme(); // We can assume that the factory function won't change and we're
+  // observing theme changes only.
+
+  const styleFactoryRef = (0, React.useRef)(styleFactory);
+  return (0, React.useMemo)(() => styleFactoryRef.current(theme), [theme]);
+};
+
+exports.useThemedStyles = useThemedStyles;
 const DuboisContextDefaults = {
   enableAnimation: false,
   theme: 'default',
@@ -52777,13 +54075,12 @@ const DesignSystemProvider = _ref => {
     theme: themeName,
     enableAnimation = false,
     zIndexBase = 1000,
-    isCompact = false,
     getPopupContainer
   } = _ref;
   const theme = (0, React.useMemo)(() => getTheme(themeName || 'default', {
     enableAnimation,
     zIndexBase,
-    isCompact
+    isCompact: true
   }), // TODO: revisit this
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [themeName, zIndexBase]);
@@ -52791,9 +54088,9 @@ const DesignSystemProvider = _ref => {
     theme: themeName,
     enableAnimation,
     zIndexBase,
-    isCompact,
+    isCompact: true,
     getPopupContainer
-  }), [themeName, enableAnimation, zIndexBase, isCompact, getPopupContainer]);
+  }), [themeName, enableAnimation, zIndexBase, getPopupContainer]);
   const classNamePrefix = getClassNamePrefix(theme);
   const value = (0, React.useMemo)(() => {
     return {
@@ -52827,26 +54124,6 @@ const DesignSystemProvider = _ref => {
 
 exports.DesignSystemProvider = DesignSystemProvider;
 
-const ApplyCompactDesignSystemTheme = _ref2 => {
-  let {
-    children
-  } = _ref2;
-  const parentDesignSystemProviderProps = (0, React.useContext)(DesignSystemProviderPropsContext);
-
-  if (parentDesignSystemProviderProps === null) {
-    throw new Error("ApplyCompactDesignSystemTheme cannot be used standalone - DesignSystemProvider must exist in the React context");
-  }
-
-  const newProps = (0, React.useMemo)(() => ({ ...parentDesignSystemProviderProps,
-    isCompact: true
-  }), [parentDesignSystemProviderProps]);
-  return (0, _jsxRuntime.jsx)(DesignSystemProvider, { ...newProps,
-    children: children
-  });
-};
-
-exports.ApplyCompactDesignSystemTheme = ApplyCompactDesignSystemTheme;
-
 const Alert = _ref => {
   let {
     dangerouslySetAntdProps,
@@ -53018,7 +54295,7 @@ const Breadcrumb = _ref => {
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:styles;", process.env.NODE_ENV === "production" ? "" : ";label:styles;");
   return (0, _jsxRuntime.jsx)(Breadcrumb$2, {
-    separator: ">",
+    separator: (0, _jsxRuntime.jsx)(ChevronRightIcon, {}),
     ...props,
     ...dangerouslySetAntdProps,
     css:
@@ -53092,6 +54369,7 @@ function getDefaultStyles(theme) {
     backgroundColor: theme.colors.actionDefaultBackgroundDefault,
     borderColor: theme.colors.actionDefaultBorderDefault,
     color: theme.colors.actionDefaultTextDefault,
+    lineHeight: theme.typography.lineHeightBase,
     '&:hover': {
       backgroundColor: theme.colors.actionDefaultBackgroundHover,
       borderColor: theme.colors.actionDefaultBorderHover,
@@ -53124,7 +54402,7 @@ function getPrimaryStyles(theme) {
   };
 }
 
-function getTertiaryStyles(theme) {
+function getLinkStyles(theme) {
   return {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: theme.colors.actionTertiaryBackgroundDefault,
@@ -53213,7 +54491,8 @@ const getButtonEmotionStyles = _ref => {
     withIcon,
     onlyIcon,
     enableAnimation,
-    size
+    size,
+    type
   } = _ref;
   const clsIcon = ".".concat(theme.general.iconfontCssPrefix);
   const clsLoadingIcon = ".".concat(classNamePrefix, "-btn-loading-icon");
@@ -53230,10 +54509,7 @@ const getButtonEmotionStyles = _ref => {
         padding: theme.options.isCompact || size === 'small' ? '4px 12px' : '8px 16px',
         ...(size === 'ultrasmall' && {
           padding: '0 8px'
-        }),
-        '> span': {
-          verticalAlign: 'middle'
-        }
+        })
       }
     }),
     ...((theme.options.isCompact || size === 'small') && {
@@ -53261,14 +54537,16 @@ const getButtonEmotionStyles = _ref => {
     ...getDefaultStyles(theme),
     ["&".concat(classPrimary)]: { ...getPrimaryStyles(theme)
     },
-    ["&".concat(classLink)]: { ...getTertiaryStyles(theme),
-      padding: 'unset',
-      height: 'auto',
-      border: 'none',
-      boxShadow: 'none',
-      '&[disabled],&:hover': {
-        background: 'none'
-      }
+    ["&".concat(classLink)]: { ...getLinkStyles(theme),
+      ...(type === 'link' && {
+        padding: 'unset',
+        height: 'auto',
+        border: 'none',
+        boxShadow: 'none',
+        '&[disabled],&:hover': {
+          background: 'none'
+        }
+      })
     },
     ["&".concat(classDangerous).concat(classPrimary)]: { ...getPrimaryDangerStyles(theme)
     },
@@ -53323,7 +54601,7 @@ const getButtonEmotionStyles = _ref => {
       verticalAlign: -5,
       lineHeight: 0,
       ...(onlyIcon && {
-        verticalAlign: theme.options.isCompact || size === 'small' ? -2 : -5
+        verticalAlign: theme.options.isCompact || size === 'small' ? -3 : -5
       }),
       ...((theme.options.isCompact || size === 'small') && {
         fontSize: theme.general.buttonInnerHeight - 4,
@@ -53377,6 +54655,7 @@ _ref2, ref) {
     dangerouslySetAntdProps,
     children,
     size,
+    type,
     ...props
   } = _ref2;
   const {
@@ -53392,10 +54671,13 @@ _ref2, ref) {
       onlyIcon: Boolean(props.icon && !children),
       danger: Boolean(props.danger),
       enableAnimation: theme.options.enableAnimation,
-      size: size || 'middle'
+      size: size || 'middle',
+      type
     }),
+    href: props.disabled ? undefined : props.href,
     ...dangerouslySetAntdProps,
     ref: ref,
+    type: type === 'tertiary' ? 'link' : type,
     children: children && (0, _jsxRuntime.jsx)("span", {
       children: children
     })
@@ -53419,7 +54701,9 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
   const pressSelector = "".concat(classInput, ":active + ").concat(classInner);
   const styles = {
     // Top level styles are for the unchecked state
-    [classInner]: {},
+    [classInner]: {
+      borderColor: theme.colors.actionDefaultBorderDefault
+    },
     // Keyboard focus
     ["".concat(classInput, ":focus-visible + ").concat(classInner)]: {
       outlineWidth: '2px',
@@ -53559,16 +54843,14 @@ const DuboisCheckbox = /*#__PURE__*/(0, React.forwardRef)(function Checkbox(_ref
 });
 const CheckboxGroup = /*#__PURE__*/(0, React.forwardRef)(function CheckboxGroup(props, ref) {
   const {
-    theme
+    theme,
+    getPrefixedClassName
   } = useDesignSystemTheme();
+  const clsPrefix = getPrefixedClassName('checkbox');
   return (0, _jsxRuntime.jsx)(AntDCheckbox.Group, {
     ref: ref,
     ...props,
-    css:
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    (0, _react2.css)(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:CheckboxGroup;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
+    css: getCheckboxEmotionStyles(clsPrefix, theme)
   });
 });
 const CheckboxNamespace = Object.assign(DuboisCheckbox, {
@@ -53642,6 +54924,12 @@ function getCollapseEmotionStyles(clsPrefix, theme) {
     [classContentBox]: {
       padding: '8px 16px 16px'
     },
+    ...(theme.options.isCompact && {
+      ["& > ".concat(classItem, " > ").concat(classHeader)]: {
+        padding: '6px 44px 6px 0',
+        lineHeight: theme.typography.lineHeightBase
+      }
+    }),
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return (
@@ -53695,7 +54983,7 @@ function getEmotionStyles(clsPrefix, theme) {
   const classSeparator = ".".concat(clsPrefix, "-separator");
   const classSuffix = ".".concat(clsPrefix, "-suffix");
   const styles = {
-    height: 40,
+    height: theme.options.isCompact ? 32 : 40,
     borderRadius: theme.borders.borderRadiusMd,
     borderColor: theme.colors.border,
     color: theme.colors.textPrimary,
@@ -54286,7 +55574,7 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
 });
 exports.DropdownMenu = DropdownMenu;
 
-const getFormEmotionStyles = _ref => {
+const getFormItemEmotionStyles = _ref => {
   let {
     theme,
     clsPrefix
@@ -54304,7 +55592,8 @@ const getFormEmotionStyles = _ref => {
         lineHeight: theme.typography.lineHeightBase
       },
       [clsFormItemExplain]: {
-        fontSize: theme.typography.fontSizeSm
+        fontSize: theme.typography.fontSizeSm,
+        margin: 0
       },
       [clsFormItemInputControl]: {
         minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
@@ -54313,7 +55602,7 @@ const getFormEmotionStyles = _ref => {
         border: 'none'
       },
       ...getAnimationCss(theme.options.enableAnimation)
-    }, process.env.NODE_ENV === "production" ? "" : ";label:getFormEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getFormEmotionStyles;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:getFormItemEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getFormItemEmotionStyles;")
   );
 };
 
@@ -54322,27 +55611,29 @@ const FormDubois = /*#__PURE__*/(0, React.forwardRef)(function Form(_ref2, ref)
     dangerouslySetAntdProps,
     ...props
   } = _ref2;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
   const mergedProps = { ...props,
     layout: props.layout || 'vertical',
     requiredMark: props.requiredMark || false
   };
   return (0, _jsxRuntime.jsx)(AntDForm, { ...mergedProps,
     ref: ref,
-    css: getFormEmotionStyles({
-      theme,
-      clsPrefix: classNamePrefix
-    }),
     ...dangerouslySetAntdProps
   });
 });
 exports.FormDubois = FormDubois;
 
-const FormItem = props => (0, _jsxRuntime.jsx)(AntDForm.Item, { ...props
-});
+const FormItem = props => {
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return (0, _jsxRuntime.jsx)(AntDForm.Item, { ...props,
+    css: getFormItemEmotionStyles({
+      theme,
+      clsPrefix: classNamePrefix
+    })
+  });
+};
 
 const FormNamespace = Object.assign(FormDubois, {
   Item: FormItem,
@@ -54484,7 +55775,7 @@ function Title(userProps) {
   });
 }
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$5() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$7() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 
@@ -54504,13 +55795,13 @@ const getHeaderStyles = (clsPrefix, theme) => {
   );
 };
 
-var _ref$1 = process.env.NODE_ENV === "production" ? {
+var _ref$3 = process.env.NODE_ENV === "production" ? {
   name: "5s4ezj",
   styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px"
 } : {
   name: "gxikdi-titleAddOnsWrapper",
   styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px;label:titleAddOnsWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 
 var _ref2$2 = process.env.NODE_ENV === "production" ? {
@@ -54519,7 +55810,7 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "ozrfom-buttonContainer",
   styles: "margin-left:8px;label:buttonContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 
 var _ref3$1 = process.env.NODE_ENV === "production" ? {
@@ -54528,7 +55819,7 @@ var _ref3$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "abhq57-title",
   styles: "margin-top:0;margin-bottom:0 !important;label:title;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 
 var _ref4$2 = process.env.NODE_ENV === "production" ? {
@@ -54537,7 +55828,7 @@ var _ref4$2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "m9gz0x-titleWrapper",
   styles: "display:flex;align-items:flex-start;justify-content:space-between;label:titleWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 
 const Header$1 = props => {
@@ -54567,11 +55858,11 @@ const Header$1 = props => {
     (0, _react2.css)({
       marginTop: 6,
       ...(theme.options.isCompact && {
-        marginTop: 4
+        marginTop: 2
       })
     }, process.env.NODE_ENV === "production" ? "" : ";label:titleIfOtherElementsPresent;", process.env.NODE_ENV === "production" ? "" : ";label:titleIfOtherElementsPresent;"),
     buttonContainer: _ref2$2,
-    titleAddOnsWrapper: _ref$1
+    titleAddOnsWrapper: _ref$3
   };
   return (0, _jsxRuntime.jsxs)("div", {
     css: [getHeaderStyles(clsPrefix, theme), props.dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
@@ -54602,25 +55893,49 @@ exports.Header = Header$1;
 
 const getInputEmotionStyles = (clsPrefix, theme) => {
   const affixClass = ".".concat(clsPrefix, "-input-affix-wrapper");
-  const inputClass = ".".concat(clsPrefix, "-input");
+  const affixClassFocused = ".".concat(clsPrefix, "-input-affix-wrapper-focused");
   const styles = {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
       paddingTop: theme.options.isCompact ? 5 : 9,
       paddingBottom: theme.options.isCompact ? 5 : 9,
-      minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
+      minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
+      '&:hover': {
+        borderColor: theme.colors.actionPrimaryBackgroundHover
+      },
+      '&:focus': {
+        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineStyle: 'solid',
+        boxShadow: 'none',
+        borderColor: 'transparent'
+      },
+      '&:disabled': {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        color: theme.colors.actionDisabledText
+      }
     },
-    ["&.".concat(affixClass)]: {
+    ["&".concat(affixClass)]: {
       lineHeight: theme.typography.lineHeightBase,
       paddingTop: theme.options.isCompact ? 5 : 9,
       paddingBottom: theme.options.isCompact ? 5 : 9,
       minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
       '::before': {
         lineHeight: theme.typography.lineHeightBase
+      },
+      '&:hover': {
+        borderColor: theme.colors.actionPrimaryBackgroundHover
       }
     },
-    [inputClass]: {
-      lineHeight: theme.typography.lineHeightBase
+    ["&".concat(affixClassFocused)]: {
+      boxShadow: 'none',
+      '&&, &:focus': {
+        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineStyle: 'solid',
+        boxShadow: 'none',
+        borderColor: 'transparent'
+      }
     },
     ...getAnimationCss(theme.options.enableAnimation)
   };
@@ -54742,7 +56057,7 @@ Menu.SubMenu = function SubMenu(props) {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$6() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 
@@ -54780,7 +56095,6 @@ const getModalEmotionStyles = args => {
     /*#__PURE__*/
     (0, _react2.css)({
       [classNameHeader]: {
-        height: headerHeight,
         paddingTop: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
         paddingLeft: theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING$1,
         paddingRight: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
@@ -54791,6 +56105,7 @@ const getModalEmotionStyles = args => {
         paddingTop: theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING$1 / 2,
         paddingLeft: MODAL_PADDING$1,
         paddingRight: MODAL_PADDING$1,
+        marginTop: 'auto',
         ["".concat(classNameButton, " + ").concat(classNameButton, ":not(").concat(classNameDropdownTrigger, ")")]: {
           marginLeft: theme.spacing.sm
         }
@@ -54835,9 +56150,10 @@ const getModalEmotionStyles = args => {
         fontSize: theme.typography.fontSizeXl,
         lineHeight: theme.typography.lineHeightXl,
         fontWeight: theme.typography.typographyBoldFontWeight,
+        paddingRight: MODAL_PADDING$1,
         // Don't impact regular size
         ...(theme.options.isCompact && {
-          height: headerHeight / 2,
+          minHeight: headerHeight / 2,
           display: 'flex',
           alignItems: 'center'
         })
@@ -54846,7 +56162,9 @@ const getModalEmotionStyles = args => {
         maxHeight: modalMaxHeight,
         height: maxedOutHeight ? modalMaxHeight : '',
         overflow: 'hidden',
-        paddingBottom: contentBottomPadding
+        paddingBottom: contentBottomPadding,
+        display: 'flex',
+        flexDirection: 'column'
       },
       [classNameBody]: {
         overflowY: 'auto',
@@ -54946,7 +56264,7 @@ var _ref2$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1jkwrsj-titleComp",
   styles: "position:relative;display:inline-flex;align-items:center;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 
 var _ref3 = process.env.NODE_ENV === "production" ? {
@@ -54955,7 +56273,7 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "i303lp-titleComp",
   styles: "padding-left:6px;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 
 var _ref4$1 = process.env.NODE_ENV === "production" ? {
@@ -54964,7 +56282,7 @@ var _ref4$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "boqyz4-titleComp",
   styles: "position:relative;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 
 function DangerModal(props) {
@@ -55114,17 +56432,17 @@ const defaultProps = {
   duration: 3
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$3() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$5() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 
-var _ref = process.env.NODE_ENV === "production" ? {
+var _ref$2 = process.env.NODE_ENV === "production" ? {
   name: "1dw6hj0",
   styles: "padding-left:16px;padding-right:16px"
 } : {
   name: "xioo5t-PageWrapper",
   styles: "padding-left:16px;padding-right:16px;label:PageWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
 };
 
 const PageWrapper = _ref2 => {
@@ -55132,7 +56450,7 @@ const PageWrapper = _ref2 => {
     children
   } = _ref2;
   return (0, _jsxRuntime.jsx)("div", {
-    css: _ref,
+    css: _ref$2,
     children: children
   });
 };
@@ -55290,7 +56608,7 @@ const Popover = props => {
 
 exports.Popover = Popover;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$4() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 
@@ -55300,7 +56618,7 @@ const verticalGroupEmotionStyles = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1ydgy2-verticalGroupEmotionStyles",
   styles: "display:flex;flex-direction:column;flex-wrap:wrap;label:verticalGroupEmotionStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
 };
 
 const radioOverrideEmotionStyles = _ref => {
@@ -55578,7 +56896,7 @@ const SegmentedControlGroup = /*#__PURE__*/(0, React.forwardRef)(function Segmen
 });
 exports.SegmentedControlGroup = SegmentedControlGroup;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$1() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$3() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 
@@ -55595,6 +56913,7 @@ function getSelectEmotionStyles(_ref) {
   const classMultiple = ".".concat(clsPrefix, "-multiple");
   const classItem = ".".concat(clsPrefix, "-selection-item");
   const classItemOverflow = ".".concat(clsPrefix, "-selection-overflow-item");
+  const classItemOverflowSuffix = ".".concat(clsPrefix, "-selection-overflow-item-suffix");
   const classArrow = ".".concat(clsPrefix, "-arrow");
   const classArrowLoading = ".".concat(clsPrefix, "-arrow-loading");
   const classPlaceholder = ".".concat(clsPrefix, "-selection-placeholder");
@@ -55616,7 +56935,6 @@ function getSelectEmotionStyles(_ref) {
       // to make sure the whole select is clickable.
       paddingRight: 0,
       color: theme.colors.textPrimary,
-      borderColor: theme.colors.actionDefaultBorderDefault,
       backgroundColor: 'transparent',
       height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
       '::after': {
@@ -55643,7 +56961,8 @@ function getSelectEmotionStyles(_ref) {
       right: 24,
       left: 12,
       [classSearchInput]: {
-        color: theme.colors.actionDefaultTextDefault
+        color: theme.colors.actionDefaultTextDefault,
+        height: 24
       }
     },
     ["&".concat(classSingle)]: {
@@ -55663,7 +56982,7 @@ function getSelectEmotionStyles(_ref) {
     },
     ["&".concat(classFocused)]: {
       [classSelector]: {
-        outlineColor: theme.colors.primary,
+        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineStyle: 'solid',
         borderColor: 'transparent',
@@ -55702,6 +57021,14 @@ function getSelectEmotionStyles(_ref) {
         fontSize: 13
       }
     },
+    [classPlaceholder]: {
+      color: theme.colors.textSecondary,
+      right: 'auto',
+      left: 'auto',
+      paddingRight: 32,
+      lineHeight: theme.typography.lineHeightBase,
+      alignSelf: 'center'
+    },
     ["&".concat(classMultiple)]: {
       [classSelector]: {
         paddingTop: 3,
@@ -55749,7 +57076,19 @@ function getSelectEmotionStyles(_ref) {
       },
       ["&".concat(classAllowClear)]: {
         [classSearchClear]: {
-          top: theme.options.isCompact ? 17 : 20
+          top: theme.options.isCompact ? 16 : 20
+        }
+      },
+      [classPlaceholder]: {
+        // Compensate for the caret placeholder width
+        paddingLeft: 4,
+        color: theme.colors.textPlaceholder
+      },
+      ["&:not(".concat(classFocused, ")")]: {
+        [classItemOverflowSuffix]: {
+          // Do not keep the caret's placeholder at full height when not focused,
+          // because it introduces a new line even when not focused. Using display: none would break the caret
+          height: 0
         }
       }
     },
@@ -55770,11 +57109,6 @@ function getSelectEmotionStyles(_ref) {
         opacity: 100
       }
     },
-    [classPlaceholder]: {
-      color: theme.colors.textPrimary,
-      right: 'auto',
-      left: 'auto'
-    },
     [classCloseButton]: {
       color: theme.colors.textPrimary,
       borderTopRightRadius: theme.borders.borderRadiusMd,
@@ -55865,6 +57199,7 @@ function getLoadingIconStyles(theme) {
 }
 
 const DuboisRefForwardedSelect = /*#__PURE__*/(0, React.forwardRef)(DuboisSelect);
+const scrollbarVisibleItemsCount = 8;
 
 var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "14is9qy",
@@ -55872,7 +57207,7 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "14is9qy",
   styles: "font-size:20px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 
 function DuboisSelect(_ref2, ref) {
@@ -55881,6 +57216,7 @@ function DuboisSelect(_ref2, ref) {
     loading,
     mode,
     dangerouslySetAntdProps,
+    virtual,
     ...restProps
   } = _ref2;
   const {
@@ -55940,7 +57276,10 @@ function DuboisSelect(_ref2, ref) {
         maxTagPlaceholder: items => "+ ".concat(items.length, " more"),
         mode: mode,
         loading: loading,
-        filterOption: true,
+        filterOption: true // This is needed to avoid ghost scrollbar that generates error when clicked on exactly 8 elements
+        // Because by default AntD uses true for virtual, we want to replicate the same even if there are no children
+        ,
+        virtual: virtual || !children || Array.isArray(children) && children.length !== scrollbarVisibleItemsCount,
         optionFilterProp: 'children',
         ...restProps,
         ...dangerouslySetAntdProps,
@@ -56037,6 +57376,10 @@ const Spinner = _ref => {
 
 exports.Spinner = Spinner;
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+
 function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   const classDefault = ".".concat(classNamePrefix, "-btn");
   const classPrimary = ".".concat(classNamePrefix, "-btn-primary");
@@ -56100,6 +57443,15 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   );
 }
 
+var _ref$1 = process.env.NODE_ENV === "production" ? {
+  name: "jjj6u2",
+  styles: "display:inline-flex;position:relative"
+} : {
+  name: "4yj1tb-SplitButton",
+  styles: "display:inline-flex;position:relative;label:SplitButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+};
+
 const SplitButton = props => {
   const {
     theme,
@@ -56110,26 +57462,47 @@ const SplitButton = props => {
     icon,
     menu,
     type,
+    loading,
     dangerouslySetAntdProps,
     ...dropdownButtonProps
   } = props;
-  return (0, _jsxRuntime.jsxs)(Dropdown$2.Button, { ...dropdownButtonProps,
-    overlay: menu,
-    trigger: ['click'],
-    css: getSplitButtonEmotionStyles(classNamePrefix, theme),
-    icon: (0, _jsxRuntime.jsx)(ChevronDownIcon, {
-      css:
-      /*#__PURE__*/
+  const [width, setWidth] = (0, React.useState)(0); // Set the width to the button's width in regular state to later use when in loading state
+  // We do this to have just a loading icon in loading state at the normal width to avoid flicker and width changes in page
 
-      /*#__PURE__*/
-      (0, _react2.css)({
-        fontSize: theme.general.iconSize
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SplitButton;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
-    }),
-    placement: "bottomCenter",
-    type: type === 'default' ? undefined : type,
-    ...dangerouslySetAntdProps,
-    children: [icon, children]
+  const ref = (0, React.useCallback)(node => {
+    if (node && !loading) {
+      setWidth(node.getBoundingClientRect().width);
+    }
+  }, [loading]);
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    css: _ref$1,
+    children: loading ? (0, _jsxRuntime.jsx)(Button, {
+      type: type === 'default' ? undefined : type,
+      style: {
+        width: width
+      },
+      children: (0, _jsxRuntime.jsx)(LoadingIcon, {
+        spin: true
+      })
+    }) : (0, _jsxRuntime.jsxs)(Dropdown$2.Button, { ...dropdownButtonProps,
+      overlay: menu,
+      trigger: ['click'],
+      css: getSplitButtonEmotionStyles(classNamePrefix, theme),
+      icon: (0, _jsxRuntime.jsx)(ChevronDownIcon, {
+        css:
+        /*#__PURE__*/
+
+        /*#__PURE__*/
+        (0, _react2.css)({
+          fontSize: theme.general.iconSize
+        }, process.env.NODE_ENV === "production" ? "" : ";label:SplitButton;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
+      }),
+      placement: "bottomCenter",
+      type: type === 'default' ? undefined : type,
+      ...dangerouslySetAntdProps,
+      children: [icon, children]
+    })
   });
 };
 
@@ -56204,8 +57577,11 @@ const getScrollableInFlexibleContainerStyles = clsPrefix => {
     /*#__PURE__*/
     (0, _react2.css)(styles, process.env.NODE_ENV === "production" ? "" : ";label:getScrollableInFlexibleContainerStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getScrollableInFlexibleContainerStyles;")
   );
-}; // eslint-disable-next-line @typescript-eslint/ban-types
+};
 
+const DEFAULT_LOADING_SPIN_PROPS = {
+  indicator: (0, _jsxRuntime.jsx)(Spinner, {})
+}; // eslint-disable-next-line @typescript-eslint/ban-types
 
 const Table = props => {
   const {
@@ -56213,10 +57589,15 @@ const Table = props => {
     theme
   } = useDesignSystemTheme();
   const {
+    loading,
     scrollableInFlexibleContainer,
     ...tableProps
   } = props;
-  return (0, _jsxRuntime.jsx)(Table$1, {
+  return (0, _jsxRuntime.jsx)(Table$1 // NOTE(FEINF-1273): The default loading indicator from AntD does not animate
+  // and the design system spinner is recommended over the AntD one. Therefore,
+  // if `loading` is `true`, render the design system <Spinner/> component.
+  , {
+    loading: loading === true ? DEFAULT_LOADING_SPIN_PROPS : loading,
     scroll: scrollableInFlexibleContainer ? {
       y: 'auto'
     } : undefined,
@@ -56375,6 +57756,7 @@ const Tabs = _ref => {
     onChange,
     onEdit,
     children,
+    destroyInactiveTabPane = false,
     dangerouslySetAntdProps = {},
     dangerouslyAppendEmotionCSS = {}
   } = _ref;
@@ -56387,6 +57769,7 @@ const Tabs = _ref => {
     defaultActiveKey: defaultActiveKey,
     onChange: onChange,
     onEdit: onEdit,
+    destroyInactiveTabPane: destroyInactiveTabPane,
     type: editable ? 'editable-card' : 'card',
     addIcon: (0, _jsxRuntime.jsx)(PlusIcon, {
       css:
@@ -56609,7 +57992,7 @@ const Tooltip = _ref => {
 
 exports.Tooltip = Tooltip;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$1() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 /**
@@ -56826,7 +58209,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "wh1oly-Tree",
   styles: "font-size:24px!important;label:Tree;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 
 function Tree(_ref) {
@@ -56861,6 +58244,41 @@ function Tree(_ref) {
   });
 }
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "mgrjgu",
+  styles: "margin-left:2px"
+} : {
+  name: "7kmwq-Link",
+  styles: "margin-left:2px;label:Link;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+function Link(props) {
+  const {
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
+  const openInNewTabProps = getOpenInNewTabProps(openInNewTab);
+  return (0, _jsxRuntime.jsxs)(AntDTypography.Link, { ...restProps,
+    ...openInNewTabProps,
+    children: [children, openInNewTab ? (0, _jsxRuntime.jsx)(NewWindowIcon, {
+      css: _ref
+    }) : null]
+  });
+}
+
+function getOpenInNewTabProps(openInNewTab) {
+  return openInNewTab ? {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  } : undefined;
+}
+
 const {
   Paragraph: AntDParagraph
 } = AntDTypography;
@@ -57019,4 +58437,4 @@ function Typography(props) {
 Typography.Text = Text;
 Typography.Title = Title;
 Typography.Paragraph = Paragraph;
-Typography.Link = AntDTypography.Link;
+Typography.Link = Link;