@para-ui/core 2.2.4 → 2.2.5-beta

package/Loading/index.js

@@ -1,15 +1,47 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@para-ui/icons/LoadingF")):"function"==typeof define&&define.amd?define(["react","@para-ui/icons/LoadingF"],t):"object"==typeof exports?exports.ParaUI=t(require("react"),require("@para-ui/icons/LoadingF")):e.ParaUI=t(e.react,e["@para-ui/icons/LoadingF"])}(self,(function(e,t){return function(){var n={5714:function(e,t,n){(t=n(3645)(!1)).push([e.id,"@keyframes rotateLoading{0%{transformOrigin:50% 50%}100%{transform:rotate(360deg)}}.paraui-loading{position:absolute;left:0;top:0;width:100%;height:100%}.paraui-loading .paraui-loading-mask{position:absolute;width:100%;height:100%;background-color:#fff;z-index:1}.paraui-loading .paraui-loading-box{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:2}.paraui-loading .paraui-loading-box>svg{transition:all .3s ease-in-out;animation:rotateLoading 1s infinite linear;font-size:20px}",""]),e.exports=t},3645:function(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(a=r,c=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(u," */")),i=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[n].concat(i).concat([o]).join("\n")}var a,c,u;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);r&&o[u[0]]||(n&&(u[2]?u[2]="".concat(n," and ").concat(u[2]):u[2]=n),t.push(u))}},t}},7418:function(e){"use strict";
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function o(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,i){for(var a,c,u=o(e),s=1;s<arguments.length;s++){for(var f in a=Object(arguments[s]))n.call(a,f)&&(u[f]=a[f]);if(t){c=t(a);for(var l=0;l<c.length;l++)r.call(a,c[l])&&(u[c[l]]=a[c[l]])}}return u}},5251:function(e,t,n){"use strict";
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-n(7418);var r=n(8156),o=60103;if(60107,"function"==typeof Symbol&&Symbol.for){var i=Symbol.for;o=i("react.element"),i("react.fragment")}var a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c=Object.prototype.hasOwnProperty,u={key:!0,ref:!0,__self:!0,__source:!0};function s(e,t,n){var r,i={},s=null,f=null;for(r in void 0!==n&&(s=""+n),void 0!==t.key&&(s=""+t.key),void 0!==t.ref&&(f=t.ref),t)c.call(t,r)&&!u.hasOwnProperty(r)&&(i[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===i[r]&&(i[r]=t[r]);return{$$typeof:o,type:e,key:s,ref:f,props:i,_owner:a.current}}t.jsx=s,t.jsxs=s},5893:function(e,t,n){"use strict";e.exports=n(5251)},3492:function(e,t,n){var r=n(3379),o=n(5714);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.id,o,""]]);var i={insert:("body","body"),singleton:!1};r(o,i);e.exports=o.locals||{}},3379:function(e,t,n){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},i=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function c(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function u(e,t){for(var n={},r=[],o=0;o<e.length;o++){var i=e[o],u=t.base?i[0]+t.base:i[0],s=n[u]||0,f="".concat(u," ").concat(s);n[u]=s+1;var l=c(f),d={css:i[1],media:i[2],sourceMap:i[3]};-1!==l?(a[l].references++,a[l].updater(d)):a.push({identifier:f,updater:b(d,t),references:1}),r.push(f)}return r}function s(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var f,l=(f=[],function(e,t){return f[e]=t,f.filter(Boolean).join("\n")});function d(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=l(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function p(e,t,n){var r=n.css,o=n.media,i=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var v=null,y=0;function b(e,t){var n,r,o;if(t.singleton){var i=y++;n=v||(v=s(t)),r=d.bind(null,n,i,!1),o=d.bind(null,n,i,!0)}else n=s(t),r=p.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=o());var n=u(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=c(n[r]);a[o].references--}for(var i=u(e,t),s=0;s<n.length;s++){var f=c(n[s]);0===a[f].references&&(a[f].updater(),a.splice(f,1))}n=i}}}},2788:function(e){"use strict";e.exports=t},8156:function(t){"use strict";t.exports=e}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={id:e,exports:{}};return n[e](i,i.exports,o),i.exports}o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nc=void 0;var i={};return function(){"use strict";o.r(i),o.d(i,{Loading:function(){return c}});var e=o(5893),t=o(8156),n=o(2788),r=o.n(n),a=(o(3492),function(){return a=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)}),c=function(n){var o=n.className,i=n.style,c=n.opacity,u=void 0===c?.7:c,s=(0,t.useRef)(null);(0,t.useEffect)((function(){s&&s.current&&s.current.parentNode&&(s.current.parentNode.style.position||(s.current.parentNode.style.position="relative"))}),[]);var f;return(0,e.jsxs)("div",a({className:(f="paraui-loading",o&&(f+=" "+o),f),style:i,ref:s},{children:[(0,e.jsx)("div",a({className:"paraui-loading-box"},{children:(0,e.jsx)(r(),{})})),(0,e.jsx)("div",{className:"paraui-loading-mask",style:{opacity:u}})]}))};i.default=c}(),i}()}));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import LoadingOutlined from '@para-ui/icons/LoadingF';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n@keyframes rotateLoading {\n  0% {\n    transformOrigin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-loading {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.paraui-loading .paraui-loading-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  z-index: 1;\n}\n.paraui-loading .paraui-loading-box {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n}\n.paraui-loading .paraui-loading-box > svg {\n  transition: all 0.3s ease-in-out;\n  animation: rotateLoading 1s infinite linear;\n  font-size: 20px;\n}";
+styleInject(css_248z);
+
+var Loading = function Loading(props) {
+  var className = props.className,
+      style = props.style,
+      _props$opacity = props.opacity,
+      opacity = _props$opacity === void 0 ? 0.7 : _props$opacity;
+  var dom = useRef(null);
+  useEffect(function () {
+    if (dom && dom.current && dom.current.parentNode) {
+      if (!dom.current.parentNode.style.position) {
+        dom.current.parentNode.style.position = 'relative';
+      }
+    }
+  }, []); // 处理class
+
+  var handClass = function handClass() {
+    var str = 'paraui-loading';
+    if (className) str += ' ' + className;
+    return str;
+  };
+
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style,
+    ref: dom
+  }, {
+    children: [jsx("div", Object.assign({
+      className: "paraui-loading-box"
+    }, {
+      children: jsx(LoadingOutlined, {})
+    })), jsx("div", {
+      className: "paraui-loading-mask",
+      style: {
+        opacity: opacity
+      }
+    })]
+  }));
+};
+
+export { Loading, Loading as default };

package/Menu/index.d.ts

@@ -1,10 +1,128 @@
+import React__default, { ReactNode, FunctionComponent } from 'react';
+import styleInject from './node_modules/style-inject/dist/style-inject.es.js';
+
+/**
+ * @author linhd
+ * @date 2021/8/10 14:24
+ * @description 菜单参数
+ */
+
+/** 菜单类型 */
+declare type MenuListTypeType = 'redirect' | 'router' | "iframe" | "snack" | "snackPage";
+/** color类型 */
+declare type ColorType = 'deep' | 'light';
+/** logo参数 */
+interface LogoProps {
+    /** 展开 / 收起 */
+    expansion?: boolean;
+    /** 自定义内容 */
+    render?: ReactNode;
+    /** 样式class */
+    className?: string;
+}
+/** 菜单列表项参数 */
+interface MenuChildrenProps {
+    /** 样式class */
+    className?: string;
+    /** 菜单名 */
+    label?: ReactNode;
+    /** 菜单类型 */
+    type?: MenuListTypeType;
+    /** 菜单路径 */
+    path?: string;
+    /** 菜单图标 */
+    icon?: ReactNode;
+    /** 菜单组件 */
+    component?: any;
+    /** 子菜单 */
+    children?: MenuChildrenProps[];
+    /** 菜单最后一层所有上下级 一条线 */
+    idMenuLast?: any;
+    /** 当前选中菜单 */
+    selectMenu?: string;
+    /** 点击菜单 */
+    onClickMenu?: (item: MenuChildrenProps | false) => void;
+    /** 选中菜单,是否收起其他展开项 */
+    shrinkOthers?: boolean;
+    /** 唯一值,内部属性,自动生成 */
+    _paraui_menu_id?: string;
+    /** 是否第一级 */
+    _paraui_menu_first?: boolean;
+    [name: string]: any;
+}
+/** 菜单列表参数 */
+interface MenuListProps {
+    /** 颜色 */
+    color?: ColorType;
+    /** 展开 / 收起 */
+    expansion?: boolean;
+    /** 菜单列表参数 */
+    list?: MenuChildrenProps[];
+    /** 当前选中菜单 */
+    selectMenu?: string;
+    /** 点击菜单 */
+    onClickMenu?: (item: MenuChildrenProps | false) => void;
+    /** 样式class */
+    className?: string;
+    /** 选中菜单,是否收起其他展开项 */
+    shrinkOthers?: boolean;
+    [name: string]: any;
+}
+/** 尾部展开 */
+interface FooterExpansionProps {
+    /** 是否展开 */
+    expansion?: boolean;
+    /** 展开图标 */
+    expandIcon?: ReactNode;
+    /** 收起图标 */
+    shrinkIcon?: ReactNode;
+    /** 自定义尾部 */
+    render?: ReactNode;
+    /** 样式class */
+    className?: string;
+    /** 展开事件 */
+    clickExpansion?: (bol: boolean) => void;
+    /** 版本号 */
+    version?: ReactNode;
+    [name: string]: any;
+}
+/** 菜单参数 */
+interface MenuProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React__default.CSSProperties;
+    /** 颜色 */
+    color?: ColorType;
+    /** 展开 / 收起 */
+    expansion?: boolean;
+    /** 当前选中菜单 */
+    selectMenu?: string;
+    /** 选中菜单,是否收起其他展开项 */
+    shrinkOthers?: boolean;
+    /** 显示收缩按钮 */
+    showExpansion?: boolean;
+    /** logo配置 */
+    logoProps?: LogoProps;
+    /** 菜单配置 */
+    menuListProps?: MenuListProps;
+    /** 尾部展开参数 */
+    footerExpansionProps?: FooterExpansionProps;
+    /** 展开事件 */
+    onClickExpansion?: (bol: boolean) => void;
+    /** 点击菜单 */
+    onClickMenu?: (item: MenuChildrenProps | false) => void;
+}
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-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-vertical-menu > .paraui-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-vertical-menu > .paraui-logo.logo-shrink {\n  padding: 24px 0 0;\n}\n.paraui-vertical-menu > .vertical-menu-list {\n  overflow: hidden;\n  height: 100%;\n  padding: 40px 16px;\n  position: relative;\n}\n.paraui-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-vertical-menu > .vertical-menu-list > .scroll-top > svg {\n  cursor: pointer;\n  transform: rotate(180deg);\n  font-size: 18px;\n}\n.paraui-vertical-menu > .vertical-menu-list > .scroll-top > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-vertical-menu > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll {\n  transition: all 0.3s;\n}\n.paraui-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-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-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}\n.paraui-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-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-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-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-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-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-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-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-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-vertical-menu > .vertical-menu-list > .scroll-bottom > svg {\n  cursor: pointer;\n  font-size: 18px;\n}\n.paraui-vertical-menu > .vertical-menu-list > .scroll-bottom > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-vertical-menu > .paraui-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-vertical-menu > .paraui-footer-expansion > svg {\n  font-size: 20px;\n  cursor: pointer;\n  margin-left: 20px;\n}\n.paraui-vertical-menu > .paraui-footer-expansion > .version {\n  margin-left: 12px;\n  font-size: 14px;\n}\n.paraui-vertical-menu > .paraui-footer-expansion.footer-expansion-shrink {\n  justify-content: center;\n}\n.paraui-vertical-menu > .paraui-footer-expansion.footer-expansion-shrink > svg {\n  margin: 0;\n}\n.paraui-vertical-menu.vertical-menu-shrink > .vertical-menu-list {\n  padding: 44px 0px;\n}\n.paraui-vertical-menu.vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-vertical-menu.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-vertical-menu.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-vertical-menu.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-vertical-menu.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-vertical-menu.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-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip .vertical-menu-item-popper > .menu-item-popper-content, .paraui-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip.vertical-menu-item-popper > .menu-item-popper-content {\n  padding: 0;\n  box-shadow: none;\n}\n.paraui-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip.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-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip.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-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-vertical-menu-item-popper.paraui-vertical-menu-item-popper-tooltip.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-vertical-menu-item-popper .vertical-menu-item-popper, .paraui-vertical-menu-item-popper.vertical-menu-item-popper {\n  padding-left: 8px;\n  z-index: 1500;\n}\n.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-vertical-menu-item-popper.vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-vertical-menu-item-popper.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}\n.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .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-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-vertical-menu-item-popper.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-vertical-menu-item-popper .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-vertical-menu-item-popper.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-vertical-menu-item-popper .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-vertical-menu-item-popper.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-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item .vertical-menu-item-popper, .paraui-vertical-menu-item-popper.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-vertical-menu-deep {\n  background-color: rgb(28, 41, 60);\n}\n.paraui-vertical-menu-deep > .paraui-logo {\n  color: white;\n}\n.paraui-vertical-menu-deep > .paraui-logo svg {\n  color: white;\n}\n.paraui-vertical-menu-deep > .vertical-menu-list > .scroll-top > svg, .paraui-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > svg {\n  color: white;\n}\n.paraui-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-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-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-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-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-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-vertical-menu-deep > .paraui-footer-expansion > svg {\n  color: white;\n}\n.paraui-vertical-menu-deep > .paraui-footer-expansion > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-vertical-menu-deep > .paraui-footer-expansion > .version {\n  color: rgba(255, 255, 255, 0.6);\n}\n.paraui-vertical-menu-deep.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-vertical-menu-deep.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-vertical-menu-deep.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-vertical-menu-deep.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-vertical-menu-deep.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-vertical-menu-light {\n  background: linear-gradient(180deg, rgb(241, 241, 244), rgb(243, 243, 243));\n}\n.paraui-vertical-menu-light > .paraui-logo {\n  color: rgb(54, 102, 214);\n}\n.paraui-vertical-menu-light > .paraui-logo svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-vertical-menu-light > .vertical-menu-list > .scroll-top > svg, .paraui-vertical-menu-light > .vertical-menu-list > .scroll-bottom > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-vertical-menu-light > .paraui-footer-expansion > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-vertical-menu-light > .paraui-footer-expansion > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-vertical-menu-light > .paraui-footer-expansion > .version {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-vertical-menu-light.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-vertical-menu-light.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-vertical-menu-light.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-vertical-menu-light.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-vertical-menu-light.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-vertical-menu-light.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-vertical-menu-light.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgba(46, 55, 67, 0.7);\n}\n.paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper.vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgb(28, 41, 60);\n  color: white;\n}\n.paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-deep.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgba(46, 55, 67, 0.7);\n}\n.paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper-tooltip.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: white;\n  color: rgb(46, 55, 67);\n}\n.paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper .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-vertical-menu-item-popper-light.paraui-vertical-menu-item-popper.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}";
+styleInject(css_248z);
+
 /**
  * @author linhd
  * @date 2021/8/10 16:58
  * @description 竖向菜单list
  */
-import { FunctionComponent } from 'react';
-import { MenuProps } from './interface';
-import './index.scss';
-export declare const Menu: FunctionComponent<MenuProps>;
-export default Menu;
+
+declare const Menu: FunctionComponent<MenuProps>;
+
+export { Menu, Menu as default };