@para-ui/core 3.0.86 → 4.0.0-beta

package/Menu/index.js

@@ -1,13 +1,13 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useMemo, createElement, useRef } from 'react';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
 import { createPortal } from 'react-dom';
 import CollapseBox from '../CollapseBox/index.js';
 import Down from '@para-ui/icons/Down';
 import * as iconList from '@para-ui/icons';
 import { UUID, DeepClone } from '@paraview/lib';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import MenuMoreLine from '@para-ui/icons/IndentRightFill';
 import MenuLessLine from '@para-ui/icons/IndentLeftFill';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
@@ -82,6 +82,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
     className = props.className,
     _props$level = props.level,
     level = _props$level === void 0 ? 1 : _props$level,
+    badge = props.badge,
     _props$selectMenu = props.selectMenu,
     selectMenu = _props$selectMenu === void 0 ? '' : _props$selectMenu,
     idMenuLast = props.idMenuLast,
@@ -140,6 +141,20 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
       className: "opacity-pos-svg"
     }); // 占位
   };
+  /**
+   * 处理数量
+   * */
+  var handBadge = function handBadge() {
+    if (badge !== undefined) {
+      return jsx("div", Object.assign({
+        className: 'menu-item-badge'
+      }, {
+        children: jsx("span", {
+          children: badge
+        })
+      }));
+    }
+  };
   /**
    * 处理class
    * @return class名
@@ -171,12 +186,11 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
    */
   var handStyle = function handStyle() {
     var json = {
-      paddingRight: '12px'
+      paddingRight: '12px',
+      paddingLeft: '0px'
     };
     if (level >= 0) {
-      json.paddingLeft = (level - 1) * 32 + 16 + 'px';
-    } else {
-      json.paddingLeft = '16px';
+      json.paddingLeft = (level - 1) * 26 + 12 + 'px';
     }
     return json;
   };
@@ -188,10 +202,14 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
       className: "vertical-menu-list-item-content",
       style: handStyle()
     }, handHref(children, path, href), {
-      children: [handIcon(), jsx("span", Object.assign({
-        className: "menu-item-label"
+      children: [handIcon(), jsxs("div", Object.assign({
+        className: "menu-item-content"
       }, {
-        children: label
+        children: [jsx("span", Object.assign({
+          className: 'menu-item-label'
+        }, {
+          children: label
+        })), handBadge()]
       })), jsx("span", Object.assign({
         className: "menu-item-arrow"
       }, {
@@ -226,7 +244,9 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
 };
 // 弹出菜单
 var MenuItemPopper = function MenuItemPopper(props) {
-  var _props$open = props.open,
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    _props$open = props.open,
     open = _props$open === void 0 ? false : _props$open,
     anchorEl = props.anchorEl,
     idMenuLast = props.idMenuLast,
@@ -284,13 +304,13 @@ var MenuItemPopper = function MenuItemPopper(props) {
         var anchorElDom = document.querySelector("[data-menu-id=".concat(anchorEl, "]"));
         var reactDom = anchorElDom.getBoundingClientRect();
         var top = reactDom.top;
-        // 不是第一级的弹窗向上便宜8px
+        // 不是第一级的弹窗向上偏移
         if (level !== 1) {
-          top = top - 8;
+          top = top - 4;
         }
         // 第一级,且只有一级
         if (handTooltip()) {
-          top = top + 4;
+          top = top + (props.size === 'small' ? 2 : 4);
         }
         var bodyHeight = document.body.clientHeight;
         var selfHeight = boxRef.current.clientHeight;
@@ -327,6 +347,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
   var handPopoverClass = function handPopoverClass() {
     var str = $prefixCls + '-vertical-menu-item-popper';
     if (color) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(color);
+    if (size) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(size);
     if (color === 'deep') str += " ".concat($prefixCls, "-scrollbar-small-deep");else str += " ".concat($prefixCls, "-scrollbar-small");
     // 第一级,且只有一项
     if (handTooltip()) {
@@ -380,6 +401,20 @@ var MenuItemPopper = function MenuItemPopper(props) {
       className: "opacity-pos-svg"
     }); // 占位
   };
+  /**
+   * 处理数量
+   * */
+  var handBadge = function handBadge(item) {
+    if (item.badge !== undefined && !handTooltip()) {
+      return jsx("div", Object.assign({
+        className: 'menu-item-badge'
+      }, {
+        children: jsx("span", {
+          children: item.badge
+        })
+      }));
+    }
+  };
   /**
    * 点击菜单
    * @param item {MenuChildrenProps} 当前项参数
@@ -507,10 +542,14 @@ var MenuItemPopper = function MenuItemPopper(props) {
             "data-menu-id": item._paraui_menu_id,
             onClick: clickMenu(item)
           }, handHref(item.children, item.path, item.href), {
-            children: [handIcon(item.icon), jsx("span", Object.assign({
-              className: "menu-item-label"
+            children: [handIcon(item.icon), jsxs("div", Object.assign({
+              className: "menu-item-content"
             }, {
-              children: item.label
+              children: [jsx("span", Object.assign({
+                className: 'menu-item-label'
+              }, {
+                children: item.label
+              })), handBadge(item)]
             })), jsx("span", Object.assign({
               className: "menu-item-arrow"
             }, {
@@ -534,9 +573,10 @@ var MenuItemPopper = function MenuItemPopper(props) {
     return jsx(Fragment, {
       children: /*#__PURE__*/createPortal(jsx(MenuPopover, {}), document.getElementsByTagName('body')[0])
     });
-  }, [posStyle, list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level, className, color]);
+  }, [posStyle, list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level, className, color, size]);
   return jsxs(Fragment, {
     children: [MenuPortalMemo, openChild && jsx(MenuItemPopper, {
+      size: size,
       open: openChild,
       anchorEl: childPos,
       list: childList,
@@ -575,6 +615,8 @@ var VerticalMenuList = function VerticalMenuList(props) {
     className = props.className,
     _props$shrinkOthers2 = props.shrinkOthers,
     shrinkOthers = _props$shrinkOthers2 === void 0 ? true : _props$shrinkOthers2,
+    _props$size2 = props.size,
+    size = _props$size2 === void 0 ? 'large' : _props$size2,
     color = props.color;
   // const classes: any = useStyles(props);
   var _useState13 = useState([]),
@@ -826,6 +868,20 @@ var VerticalMenuList = function VerticalMenuList(props) {
       return label;
     }
   };
+  /**
+   * 处理数量
+   * */
+  var handBadge = function handBadge(item) {
+    if (item.badge !== undefined) {
+      return jsx("div", Object.assign({
+        className: 'menu-item-shrink-badge'
+      }, {
+        children: jsx("span", {
+          children: item.badge
+        })
+      }));
+    }
+  };
   /**
    * 点击收缩菜单时候的按钮
    * */
@@ -901,33 +957,39 @@ var VerticalMenuList = function VerticalMenuList(props) {
         "data-menu-id": item._paraui_menu_id,
         onClick: clickShrinkMenu(item)
       }, handHref(item.children, item.path, item.href), {
-        children: jsx("span", {
-          children: handShrink(item)
-        })
+        children: jsxs("span", Object.assign({
+          className: 'vertical-menu-list-item-shrink-content'
+        }, {
+          children: [handShrink(item), handBadge(item)]
+        }))
       }), index);
     });
   }, [expansion, listCom, idMenuLast, selectMenuCom, openChildIndex]);
   /** 向上翻页 */
   var PrevScroll = useMemo(function () {
     return jsx(Fragment, {
-      children: flipDisable.prev && jsx("span", Object.assign({
+      children: flipDisable.prev && jsx("div", Object.assign({
         className: "scroll-top"
       }, {
-        children: jsx(Down, {
+        children: jsx("span", Object.assign({
           onClick: flip('prev')
-        })
+        }, {
+          children: jsx(Down, {})
+        }))
       }))
     });
   }, [flipDisable]);
   /** 向下翻页 */
   var NextScroll = useMemo(function () {
     return jsx(Fragment, {
-      children: flipDisable.next && jsx("span", Object.assign({
+      children: flipDisable.next && jsx("div", Object.assign({
         className: "scroll-bottom"
       }, {
-        children: jsx(Down, {
+        children: jsx("span", Object.assign({
           onClick: flip('next')
-        })
+        }, {
+          children: jsx(Down, {})
+        }))
       }))
     });
   }, [flipDisable]);
@@ -944,10 +1006,11 @@ var VerticalMenuList = function VerticalMenuList(props) {
         onMouseEnter: onMouseEnterChild,
         onMouseLeave: onMouseLeaveChild,
         color: color,
-        level: 1
+        level: 1,
+        size: size
       })
     });
-  }, [openChild, childPos, childList, idMenuLast, selectMenuCom, onClickMenu, timerJson, color]);
+  }, [openChild, childPos, childList, idMenuLast, selectMenuCom, onClickMenu, timerJson, color, size]);
   return jsxs(Fragment, {
     children: [jsxs("div", Object.assign({
       className: handClass(),
@@ -993,14 +1056,22 @@ var FooterExpansion = function FooterExpansion(props) {
     var handIcon = function handIcon() {
       if (expansion) {
         if (expandIcon) return expandIcon;
-        return jsx(MenuMoreLine, {
-          onClick: clickExpansionCom
-        });
+        return jsx("span", Object.assign({
+          className: 'icon'
+        }, {
+          children: jsx(MenuMoreLine, {
+            onClick: clickExpansionCom
+          })
+        }));
       } else {
         if (shrinkIcon) return shrinkIcon;
-        return jsx(MenuLessLine, {
-          onClick: clickExpansionCom
-        });
+        return jsx("span", Object.assign({
+          className: 'icon'
+        }, {
+          children: jsx(MenuLessLine, {
+            onClick: clickExpansionCom
+          })
+        }));
       }
     };
     return jsxs(Fragment, {
@@ -1025,12 +1096,14 @@ var FooterExpansion = function FooterExpansion(props) {
   }));
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-vertical-menu {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-vertical-menu > .menu-logo {\n  width: 100%;\n  display: inline-block;\n  padding: 24px 16px 0 16px;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-vertical-menu > .menu-logo.menu-logo-shrink {\n  padding: 24px 0 0;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list {\n  overflow: hidden;\n  height: 100%;\n  padding: 40px 16px;\n  position: relative;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-top > svg {\n  cursor: pointer;\n  transform: rotate(180deg);\n  font-size: 18px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-top > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll {\n  transition: all 0.3s;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 8px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item:last-child {\n  margin-bottom: 0;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 40px;\n  line-height: 40px;\n  cursor: pointer;\n  display: flex;\n  border-radius: 4px;\n  text-decoration: none;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon {\n  width: 20px;\n  margin-right: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  font-size: 16px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-label {\n  font-size: 14px;\n  width: 100%;\n  white-space: nowrap;\n  font-weight: 400;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 8px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-open > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  transform: rotate(180deg);\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-bottom > svg {\n  cursor: pointer;\n  font-size: 18px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-bottom > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu > .footer-expansion {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 20px;\n  white-space: nowrap;\n  height: 40px;\n}\n.paraui-v3-vertical-menu > .footer-expansion > svg {\n  font-size: 20px;\n  cursor: pointer;\n  margin-left: 20px;\n}\n.paraui-v3-vertical-menu > .footer-expansion > .version {\n  margin-left: 12px;\n  font-size: 14px;\n}\n.paraui-v3-vertical-menu > .footer-expansion.footer-expansion-shrink {\n  justify-content: center;\n}\n.paraui-v3-vertical-menu > .footer-expansion.footer-expansion-shrink > svg {\n  margin: 0;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list {\n  padding: 44px 0px;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 8px;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:last-child {\n  margin-bottom: 0;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span > svg {\n  position: relative;\n  font-size: 20px;\n}\n\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  padding: 0;\n  box-shadow: none;\n}\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: auto;\n  height: 32px;\n  line-height: 32px;\n}\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  display: none;\n}\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper {\n  padding-left: 8px;\n  z-index: 1500;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  padding: 8px 0;\n  max-height: 268px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 200px;\n  height: 36px;\n  line-height: 36px;\n  padding: 0px 12px;\n  display: flex;\n  cursor: pointer;\n  text-decoration: none;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  content: \"\";\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 12px;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  font-size: 20px;\n  position: relative;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  font-size: 14px;\n  width: 100%;\n  font-weight: 400;\n  white-space: nowrap;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  font-size: 20px;\n  transition: all 0.3s;\n  position: relative;\n  transform: rotate(270deg);\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item .vertical-menu-item-popper, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item .vertical-menu-item-popper {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: -8px;\n}\n\n.paraui-v3-vertical-menu-deep {\n  background-color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-deep > .menu-logo {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .menu-logo svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .scroll-top > svg, .paraui-v3-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep > .footer-expansion > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .footer-expansion > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-deep > .footer-expansion > .version {\n  color: rgba(255, 255, 255, 0.6);\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > span {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > span {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > span {\n  background-color: rgb(34, 62, 103);\n}\n\n.paraui-v3-vertical-menu-light {\n  background: linear-gradient(180deg, rgb(241, 241, 244), rgb(243, 243, 243));\n}\n.paraui-v3-vertical-menu-light > .menu-logo {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .menu-logo svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .scroll-top > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .scroll-bottom > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: white;\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover > .menu-item-icon > svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover > .menu-item-label {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover > .menu-item-arrow > svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-label {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: white;\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content:hover > .menu-item-icon > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content:hover > .menu-item-icon > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content:hover > .menu-item-label {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content:hover > .menu-item-arrow > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content:hover > .menu-item-arrow > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content > .menu-item-label, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .footer-expansion > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .footer-expansion > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .footer-expansion > .version {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > span {\n  background-color: white;\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > span {\n  background-color: white;\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > span > svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > span {\n  background-color: white;\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > span > svg {\n  color: rgb(28, 41, 60);\n}\n\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgb(28, 41, 60);\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: white;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-vertical-menu {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v4-vertical-menu > .menu-logo {\n  width: 100%;\n  display: inline-block;\n  padding: 20px 16px 0 16px;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v4-vertical-menu > .menu-logo.menu-logo-shrink {\n  padding: 20px 0 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list {\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top > span {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top > span > svg {\n  transform: rotate(180deg);\n  font-size: 18px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll {\n  transition: all 0.3s;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item:last-child {\n  margin-bottom: 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  cursor: pointer;\n  display: flex;\n  border-radius: 4px;\n  text-decoration: none;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon {\n  width: 20px;\n  margin-right: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  font-size: 16px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  font-size: 14px;\n  width: 100%;\n  white-space: nowrap;\n  font-weight: 400;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-badge {\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 4px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-open > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  transform: rotate(180deg);\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom > span {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom > span > svg {\n  font-size: 18px;\n}\n.paraui-v4-vertical-menu > .footer-expansion {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 20px;\n  white-space: nowrap;\n  height: 40px;\n  padding-left: 16px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 4px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .icon svg {\n  font-size: 24px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .version {\n  font-size: 14px;\n  width: calc(100% - 32px);\n  text-align: right;\n  padding-right: 20px;\n  padding-left: 12px;\n}\n.paraui-v4-vertical-menu > .footer-expansion.footer-expansion-shrink {\n  justify-content: center;\n  padding-left: 0;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:last-child {\n  margin-bottom: 0;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  position: relative;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  position: relative;\n  font-size: 20px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  position: absolute;\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 1px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list {\n  padding: 24px 16px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 40px;\n  line-height: 40px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list {\n  padding: 24px 0px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  left: 20px;\n  top: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list {\n  padding: 24px 12px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 36px;\n  line-height: 36px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list {\n  padding: 24px 0px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  left: 18px;\n  top: 1px;\n}\n\n.paraui-v4-vertical-menu-item-popper {\n  padding-left: 8px;\n  z-index: 1500;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n  border-radius: 4px;\n  padding: 4px 0;\n  max-height: 320px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 200px;\n  padding: 0px 10px;\n  display: flex;\n  cursor: pointer;\n  text-decoration: none;\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  content: \"\";\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  width: 16px;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  margin-right: 12px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  font-size: 20px;\n  position: relative;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  font-size: 14px;\n  width: 100%;\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content > .menu-item-badge {\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 4px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content > .menu-item-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n  position: relative;\n  transform: rotate(270deg);\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-vertical-menu-deep {\n  background-color: rgb(28, 41, 60);\n}\n.paraui-v4-vertical-menu-deep > .menu-logo {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .menu-logo svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-top > span > svg, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > span > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-top > span:hover > svg, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon {\n  background: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .version {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n\n.paraui-v4-vertical-menu-light {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-vertical-menu-light > .menu-logo {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .menu-logo svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-top > span > svg, .paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-bottom > span > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-top > span:hover > svg, .paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-bottom > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon {\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .version {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content {\n  background-color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  padding: 2px 12px;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content {\n  background-color: rgb(28, 41, 60);\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content {\n  background-color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  padding: 2px 12px;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content {\n  background-color: rgb(255, 255, 255);\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(234, 236, 241);\n}";
 styleInject(css_248z);
 
 var Menu = function Menu(props) {
   var _props$color = props.color,
     color = _props$color === void 0 ? 'deep' : _props$color,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
     logoProps = props.logoProps,
     menuListProps = props.menuListProps,
     _props$expansion = props.expansion,
@@ -1065,6 +1138,7 @@ var Menu = function Menu(props) {
   var handClass = function handClass() {
     var str = $prefixCls + '-vertical-menu';
     if (className) str += ' ' + className;
+    if (size) str += " ".concat($prefixCls, "-vertical-menu-").concat(size);
     if (color) str += " ".concat($prefixCls, "-vertical-menu-").concat(color);
     if (!expansion) str += " ".concat($prefixCls, "-vertical-menu-shrink");
     return str;
@@ -1082,9 +1156,10 @@ var Menu = function Menu(props) {
       expansion: expansionCom,
       selectMenu: selectMenu,
       onClickMenu: onClickMenu,
-      shrinkOthers: shrinkOthers
+      shrinkOthers: shrinkOthers,
+      size: size
     }));
-  }, [menuListProps, expansionCom, selectMenu, onClickMenu, color]);
+  }, [menuListProps, expansionCom, selectMenu, onClickMenu, color, size]);
   /** 底部展开收起 */
   var ExpansionMemo = useMemo(function () {
     if (!showExpansion) return null;

package/Menu/interface.d.ts

@@ -31,6 +31,8 @@ export interface MenuChildrenProps {
     href?: string;
     /** 菜单图标 */
     icon?: ReactNode;
+    /** 标记 */
+    badge?: ReactNode;
     /** 菜单组件 */
     component?: any;
     /** 子菜单 */
@@ -51,6 +53,8 @@ export interface MenuChildrenProps {
 }
 /** 菜单列表参数 */
 export interface MenuListProps {
+    /** 尺寸 */
+    size?: 'small' | 'large';
     /** 颜色 */
     color?: ColorType;
     /** 展开 / 收起 */
@@ -69,6 +73,8 @@ export interface MenuListProps {
 }
 /** 弹出菜单 */
 export interface MenuItemPopoverProps {
+    /** 尺寸 */
+    size?: 'small' | 'large';
     /** 打开 */
     open?: boolean;
     /** 定位元素, 自定义属性 paraui-menu-id */
@@ -118,6 +124,8 @@ export interface MenuProps {
     className?: string;
     /** style */
     style?: React.CSSProperties;
+    /** 尺寸 */
+    size?: 'small' | 'large';
     /** 颜色 */
     color?: ColorType;
     /** 展开 / 收起 */

package/Message/index.d.ts

@@ -44,10 +44,6 @@ export declare const MessageBar: React.FC<InternalMsgConfig>;
 declare const _default: () => JSX.Element;
 export default _default;
 export type MsgTypeProps = {
-    /**是否启用html渲染内容*/
-    html?: boolean;
-    /**是否强制显示关闭按钮，默认自动当延迟关闭事件为0或null时自动显示*/
-    close?: boolean;
     /**
      * 消息文本
      */
@@ -76,6 +72,10 @@ export type MsgTypeProps = {
      * style
      */
     style?: React.CSSProperties;
+    /**是否启用html渲染内容*/
+    html?: boolean;
+    /**是否强制显示关闭按钮，默认自动当延迟关闭事件为0或null时自动显示*/
+    close?: boolean;
 };
 interface MsgPorps {
     (config: string | MsgTypeProps, duration?: number): void;

package/Message/index.js

@@ -1,24 +1,24 @@
-import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
+import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import WarningCircleF from '@para-ui/icons/WarningCircleF';
 import CompleteIcon from '@para-ui/icons/CheckCircleF';
 import CloseIcon from '@para-ui/icons/Close';
-import CloseCircleFilled from '@para-ui/icons/CloseCircleF';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import CloseCircleF from '@para-ui/icons/CloseCircleF';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/1 下午5:48\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-message-box {\n  /*从上到下进入*/\n  /*从上到下*/\n}\n.paraui-v3-message-box--message-float {\n  position: fixed;\n  top: 3%;\n  left: 0;\n  z-index: 9999;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\n.paraui-v3-message-box .msg-item .msg-wrapper {\n  position: relative;\n  display: inline-block;\n  margin: 10px auto;\n  min-height: 44px;\n  padding: 12px 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  text-align: left;\n}\n.paraui-v3-message-box .msg-item .msg-icon {\n  position: absolute;\n  top: 15px;\n  left: 16px;\n  line-height: 0;\n}\n.paraui-v3-message-box .msg-item .msg-icon svg {\n  font-size: 14px;\n  color: currentColor;\n}\n.paraui-v3-message-box .msg-item .msg-text {\n  display: inline-block;\n  max-width: 60vw;\n  word-wrap: break-word;\n  margin-right: 32px;\n  margin-left: 22px;\n  line-height: 20px;\n  word-break: break-all;\n}\n.paraui-v3-message-box .msg-item .msg-text--title {\n  font-weight: 700;\n}\n.paraui-v3-message-box .msg-item .msg-text--noicon {\n  margin-left: 0;\n}\n.paraui-v3-message-box .msg-item .msg-text .msg-desc {\n  display: block;\n  margin-top: 8px;\n  font-weight: 400;\n  word-wrap: break-word;\n}\n.paraui-v3-message-box .msg-item .msg-close {\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  cursor: pointer;\n  line-height: 0;\n  pointer-events: auto;\n}\n.paraui-v3-message-box .msg-item .msg-close svg {\n  font-size: 14px;\n  color: currentColor;\n}\n.paraui-v3-message-box .msg-item-fill .msg-wrapper {\n  width: 100%;\n}\n.paraui-v3-message-box .msg-info {\n  background-color: rgb(243, 246, 252);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-message-box .msg-info .msg-close {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-message-box .msg-warn {\n  background-color: rgb(254, 249, 245);\n  color: rgb(255, 161, 80);\n}\n.paraui-v3-message-box .msg-warn .msg-close {\n  color: rgb(255, 161, 80);\n}\n.paraui-v3-message-box .msg-error {\n  background-color: rgb(253, 246, 245);\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-message-box .msg-error .msg-close {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-message-box .msg-success {\n  background-color: rgb(245, 251, 242);\n  color: rgb(83, 195, 27);\n}\n.paraui-v3-message-box .msg-success .msg-close {\n  color: rgb(83, 195, 27);\n}\n.paraui-v3-message-box .message-fadeInDown {\n  animation-duration: 0.5s;\n  animation-name: messageFadeInDown;\n}\n@keyframes messageFadeInDown {\n  from {\n    opacity: 0;\n    transform: translate(0, -50px); /* 标准语法 */\n  }\n  to {\n    opacity: 1;\n    transform: translate(0, 0); /* 标准语法 */\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/1 下午5:48\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-message-box {\n  /*从上到下进入*/\n  /*从上到下*/\n}\n.paraui-v4-message-box--message-float {\n  position: fixed;\n  top: 3%;\n  left: 0;\n  z-index: 9999;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\n.paraui-v4-message-box .msg-icon {\n  position: absolute;\n  top: 13px;\n  left: 16px;\n  line-height: 0;\n}\n.paraui-v4-message-box .msg-icon svg {\n  font-size: 14px;\n  color: currentColor;\n}\n.paraui-v4-message-box .msg-text {\n  display: inline-block;\n  max-width: 354px;\n  word-wrap: break-word;\n  margin-right: 32px;\n  margin-left: 22px;\n  line-height: 20px;\n  word-break: break-all;\n}\n.paraui-v4-message-box .msg-text--title {\n  font-weight: 700;\n}\n.paraui-v4-message-box .msg-text--noicon {\n  margin-left: 0;\n}\n.paraui-v4-message-box .msg-text .msg-desc {\n  display: block;\n  margin-top: 5px;\n  font-weight: 400;\n  word-wrap: break-word;\n}\n.paraui-v4-message-box .msg-close {\n  width: 16px;\n  height: 16px;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 16px;\n  top: 13px;\n  cursor: pointer;\n  line-height: 0;\n  pointer-events: auto;\n}\n.paraui-v4-message-box .msg-close svg {\n  font-size: 14px;\n  color: currentColor;\n}\n.paraui-v4-message-box .msg-item-fill .msg-wrapper {\n  width: 100%;\n}\n.paraui-v4-message-box .msg-wrapper {\n  position: relative;\n  display: inline-block;\n  margin: 10px auto;\n  min-height: 40px;\n  padding: 10px 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  text-align: left;\n}\n.paraui-v4-message-box .msg-wrapper.msg-wrapper-title {\n  padding: 13px 16px;\n}\n.paraui-v4-message-box .msg-wrapper.msg-wrapper-title .msg-icon {\n  top: 16px;\n}\n.paraui-v4-message-box .msg-wrapper.msg-wrapper-title .msg-close {\n  top: 16px;\n}\n.paraui-v4-message-box .msg-info {\n  background-color: rgb(240, 245, 255);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-message-box .msg-info .msg-close {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-message-box .msg-info .msg-close:hover {\n  background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-message-box .msg-warn {\n  background-color: rgb(255, 246, 235);\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-message-box .msg-warn .msg-close {\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-message-box .msg-warn .msg-close:hover {\n  background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-message-box .msg-error {\n  background-color: rgb(255, 235, 235);\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-message-box .msg-error .msg-close {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-message-box .msg-error .msg-close:hover {\n  background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-message-box .msg-success {\n  background-color: rgb(232, 252, 239);\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-message-box .msg-success .msg-close {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-message-box .msg-success .msg-close:hover {\n  background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-message-box .message-fadeInDown {\n  animation-duration: 0.5s;\n  animation-name: messageFadeInDown;\n}\n@keyframes messageFadeInDown {\n  from {\n    opacity: 0;\n    transform: translate(0, -50px); /* 标准语法 */\n  }\n  to {\n    opacity: 1;\n    transform: translate(0, 0); /* 标准语法 */\n  }\n}";
 styleInject(css_248z);
 
 //图标map
 var iconMapping = {
   'info': jsx(WarningCircleF, {}),
   'warn': jsx(WarningCircleF, {}),
-  'error': jsx(CloseCircleFilled, {}),
+  'error': jsx(CloseCircleF, {}),
   'success': jsx(CompleteIcon, {})
 };
 //获取window
@@ -39,8 +39,9 @@ var template = function template(_ref) {
   item.className = "msg-item";
   item.id = id || "";
   item.innerHTML = "<div class=\"msg-wrapper message-fadeInDown msg-".concat(type, "\">\n                ").concat(icon ? "<div class=\"msg-icon\"></div>" : '', "\n                <div class=\"msg-text\"></div>\n                ").concat(close ? "<div class=\"msg-close\"></div>" : '', "\n                </div>\n    ");
+  var msgWrapper = item.querySelector('.msg-wrapper');
   var msgBox = item.querySelector('.msg-text');
-  if (!msgBox) return item;
+  if (!msgBox || !msgWrapper) return item;
   if (html) msgBox.innerHTML = text;else msgBox.textContent = text;
   //描述
   if (desc) {
@@ -48,6 +49,7 @@ var template = function template(_ref) {
     span.className = 'msg-desc';
     span.textContent = desc || '';
     msgBox.classList.add('msg-text--title');
+    msgWrapper.classList.add('msg-wrapper-title');
     msgBox.appendChild(span);
   }
   if (hideIcon) {
@@ -217,19 +219,19 @@ var msgConfig = function msgConfig() {
 //message
 var Message = {
   info: function info(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2000;
+    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'info', parentId);
   },
   warn: function warn(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2000;
+    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'warn', parentId);
   },
   error: function error(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2000;
+    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'error', parentId);
   },
   success: function success(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2000;
+    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'success', parentId);
   },
   clear: function clear() {