@para-ui/core 2.2.4 → 2.2.5-beta

package/Menu/index.js

@@ -1,14 +1,1232 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("react-transition-group"),require("@para-ui/icons/Down"),require("@para-ui/icons"),require("@paraview/lib"),require("@para-ui/icons/IndentRightFill"),require("@para-ui/icons/IndentLeftFill")):"function"==typeof define&&define.amd?define(["react","react-dom","react-transition-group","@para-ui/icons/Down","@para-ui/icons","@paraview/lib","@para-ui/icons/IndentRightFill","@para-ui/icons/IndentLeftFill"],t):"object"==typeof exports?exports.ParaUI=t(require("react"),require("react-dom"),require("react-transition-group"),require("@para-ui/icons/Down"),require("@para-ui/icons"),require("@paraview/lib"),require("@para-ui/icons/IndentRightFill"),require("@para-ui/icons/IndentLeftFill")):e.ParaUI=t(e.react,e["react-dom"],e["react-transition-group"],e["@para-ui/icons/Down"],e["@para-ui/icons"],e["@paraview/lib"],e["@para-ui/icons/IndentRightFill"],e["@para-ui/icons/IndentLeftFill"])}(self,(function(e,t,i,n,r,o,p,a){return function(){var m={7283:function(e,t,i){(t=i(3645)(!1)).push([e.id,".paraui-collapse-box{transition:height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;width:100%;overflow:hidden;height:0}.paraui-collapse-box>.paraui-collapse-box-wrapper{display:flex;width:100%}.paraui-collapse-box>.paraui-collapse-box-wrapper>.paraui-collapse-box-wrapper-inner{width:100%}.paraui-collapse-box.paraui-collapse-box-entered{overflow:visible}.paraui-collapse-box.paraui-collapse-box-hidden{visibility:hidden}",""]),e.exports=t},6949:function(e,t,i){(t=i(3645)(!1)).push([e.id,'.paraui-vertical-menu{width:100%;height:100%;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size:14px;font-weight:400}.paraui-vertical-menu>.paraui-logo{width:100%;display:inline-block;padding:24px 16px 0 16px;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size:14px;font-weight:400}.paraui-vertical-menu>.paraui-logo.logo-shrink{padding:24px 0 0}.paraui-vertical-menu>.vertical-menu-list{overflow:hidden;height:100%;padding:40px 16px;position:relative}.paraui-vertical-menu>.vertical-menu-list>.scroll-top{position:absolute;top:0;left:0;width:100%;height:40px;display:flex;justify-content:center;align-items:center}.paraui-vertical-menu>.vertical-menu-list>.scroll-top>svg{cursor:pointer;transform:rotate(180deg);font-size:18px}.paraui-vertical-menu>.vertical-menu-list>.scroll-top>svg:hover{color:#3666d6}.paraui-vertical-menu>.vertical-menu-list>.vertical-menu-list-box{height:100%;overflow:hidden}.paraui-vertical-menu>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll{transition:all .3s}.paraui-vertical-menu>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll .vertical-menu-list-item{margin-bottom:8px}.paraui-vertical-menu>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll .vertical-menu-list-item:last-child{margin-bottom:0}.paraui-vertical-menu>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll .vertical-menu-list-item>.vertical-menu-list-item-content{height:40px;line-height:40px;cursor:pointer;display:flex;border-radius:4px}.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{width:20px;margin-right:16px;display:flex;justify-content:center;align-items:center}.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{font-size:16px}.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{font-size:14px;width:100%;white-space:nowrap;font-weight:400;overflow:hidden;text-overflow:ellipsis}.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{width:16px;display:flex;justify-content:center;align-items:center}.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{font-size:16px;transition:all .3s}.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{opacity:0}.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{margin-top:8px}.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{transform:rotate(180deg)}.paraui-vertical-menu>.vertical-menu-list>.scroll-bottom{position:absolute;bottom:0;left:0;width:100%;height:40px;display:flex;justify-content:center;align-items:center}.paraui-vertical-menu>.vertical-menu-list>.scroll-bottom>svg{cursor:pointer;font-size:18px}.paraui-vertical-menu>.vertical-menu-list>.scroll-bottom>svg:hover{color:#3666d6}.paraui-vertical-menu>.paraui-footer-expansion{display:flex;align-items:center;width:100%;padding-bottom:20px;white-space:nowrap;height:40px}.paraui-vertical-menu>.paraui-footer-expansion>svg{font-size:20px;cursor:pointer;margin-left:20px}.paraui-vertical-menu>.paraui-footer-expansion>.version{margin-left:12px;font-size:14px}.paraui-vertical-menu>.paraui-footer-expansion.footer-expansion-shrink{justify-content:center}.paraui-vertical-menu>.paraui-footer-expansion.footer-expansion-shrink>svg{margin:0}.paraui-vertical-menu.vertical-menu-shrink>.vertical-menu-list{padding:44px 0px}.paraui-vertical-menu.vertical-menu-shrink>.vertical-menu-list>.vertical-menu-list-box{height:100%;overflow:hidden}.paraui-vertical-menu.vertical-menu-shrink>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;margin-bottom:8px}.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{margin-bottom:0}.paraui-vertical-menu.vertical-menu-shrink>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:after{content:"";position:absolute;width:100%;height:100%;left:0;top:0;z-index:1}.paraui-vertical-menu.vertical-menu-shrink>.vertical-menu-list>.vertical-menu-list-box>.vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink>span{width:40px;height:40px;line-height:40px;display:flex;justify-content:center;align-items:center;border-radius:4px}.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{position:relative;font-size:20px}.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{padding:0;box-shadow:none}.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{width:auto;height:32px;line-height:32px}.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{display:none}.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{display:none}.paraui-vertical-menu-item-popper .vertical-menu-item-popper,.paraui-vertical-menu-item-popper.vertical-menu-item-popper{padding-left:8px;z-index:1500}.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{box-shadow:0px 2px 8px 0px rgba(171,176,185,.4);border-radius:4px;padding:8px 0;max-height:268px;overflow-y:auto;overflow-x:hidden}.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{position:relative}.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{width:200px;height:36px;line-height:36px;padding:0px 12px;display:flex;cursor:pointer}.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{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;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>.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{width:16px;display:flex;justify-content:center;align-items:center;margin-right:12px}.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{font-size:20px;position:relative}.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{position:absolute;left:0;top:0;width:100%;height:100%;content:"";z-index:1}.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{font-size:14px;width:100%;font-weight:400;white-space:nowrap;text-align:left;overflow:hidden;text-overflow:ellipsis}.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{width:16px;display:flex;justify-content:center;align-items:center}.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{font-size:20px;transition:all .3s;position:relative;transform:rotate(270deg)}.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{position:absolute;left:0;top:0;width:100%;height:100%;content:"";z-index:1}.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{opacity:0}.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{position:absolute;transform:none !important;left:100% !important;top:-8px}.paraui-vertical-menu-deep{background-color:#1c293c}.paraui-vertical-menu-deep>.paraui-logo{color:#fff}.paraui-vertical-menu-deep>.paraui-logo svg{color:#fff}.paraui-vertical-menu-deep>.vertical-menu-list>.scroll-top>svg,.paraui-vertical-menu-deep>.vertical-menu-list>.scroll-bottom>svg{color:#fff}.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{background-color:#223e67}.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{color:#fff}.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{color:#fff}.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{color:#fff}.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{background-color:#223e67}.paraui-vertical-menu-deep>.paraui-footer-expansion>svg{color:#fff}.paraui-vertical-menu-deep>.paraui-footer-expansion>svg:hover{color:#3666d6}.paraui-vertical-menu-deep>.paraui-footer-expansion>.version{color:rgba(255,255,255,.6)}.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{background-color:#223e67}.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{color:#fff}.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{color:#fff}.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{background-color:#223e67}.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{background-color:#223e67}.paraui-vertical-menu-light{background:linear-gradient(180deg, rgb(241, 241, 244), rgb(243, 243, 243))}.paraui-vertical-menu-light>.paraui-logo{color:#3666d6}.paraui-vertical-menu-light>.paraui-logo svg{color:#3666d6}.paraui-vertical-menu-light>.vertical-menu-list>.scroll-top>svg,.paraui-vertical-menu-light>.vertical-menu-list>.scroll-bottom>svg{color:rgba(46,55,67,.7)}.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{background-color:#fff}.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{color:#1c293c}.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{color:#1c293c}.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{color:#1c293c}.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{color:rgba(46,55,67,.7)}.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{color:rgba(46,55,67,.7)}.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{color:rgba(46,55,67,.7)}.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{background-color:#fff}.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{color:rgba(54,102,214,.8)}.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{color:rgba(54,102,214,.8)}.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{color:rgba(54,102,214,.8)}.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{color:#3666d6}.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{color:#3666d6}.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{color:#3666d6}.paraui-vertical-menu-light>.paraui-footer-expansion>svg{color:rgba(46,55,67,.7)}.paraui-vertical-menu-light>.paraui-footer-expansion>svg:hover{color:#3666d6}.paraui-vertical-menu-light>.paraui-footer-expansion>.version{color:rgba(46,55,67,.4)}.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{background-color:#fff}.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{color:rgba(46,55,67,.7)}.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{color:rgba(46,55,67,.7)}.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{background-color:#fff;color:#1c293c}.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{color:#1c293c}.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{background-color:#fff;color:#1c293c}.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{color:#1c293c}.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{background-color:rgba(46,55,67,.7)}.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{background-color:rgba(0,0,0,0)}.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{color:#fff}.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{color:#fff}.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{background-color:rgba(0,0,0,0)}.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{background-color:#1c293c;color:#fff}.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{background-color:rgba(171,176,185,.12)}.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{color:#fff}.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{color:#fff}.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{color:#fff}.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{background-color:#223e67}.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{background-color:rgba(46,55,67,.7)}.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{background-color:rgba(0,0,0,0)}.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{color:#fff}.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{color:#fff}.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{background-color:rgba(0,0,0,0)}.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{background-color:#fff;color:#2e3743}.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{background-color:rgba(171,176,185,.12)}.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{color:#3666d6}.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{color:#3666d6}.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{color:#3666d6}.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{color:#2e3743}.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{color:#2e3743}.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{color:#2e3743}.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{color:#3666d6}.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{color:#3666d6}.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{color:#3666d6}',""]),e.exports=t},3645:function(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i=function(e,t){var i=e[1]||"",n=e[3];if(!n)return i;if(t&&"function"==typeof btoa){var r=(p=n,a=btoa(unescape(encodeURIComponent(JSON.stringify(p)))),m="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(m," */")),o=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[i].concat(o).concat([r]).join("\n")}var p,a,m;return[i].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(i,"}"):i})).join("")},t.i=function(e,i,n){"string"==typeof e&&(e=[[null,e,""]]);var r={};if(n)for(var o=0;o<this.length;o++){var p=this[o][0];null!=p&&(r[p]=!0)}for(var a=0;a<e.length;a++){var m=[].concat(e[a]);n&&r[m[0]]||(i&&(m[2]?m[2]="".concat(i," and ").concat(m[2]):m[2]=i),t.push(m))}},t}},7418:function(e){"use strict";
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/var t=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function r(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={},i=0;i<10;i++)t["_"+String.fromCharCode(i)]=i;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var p,a,m=r(e),l=1;l<arguments.length;l++){for(var u in p=Object(arguments[l]))i.call(p,u)&&(m[u]=p[u]);if(t){a=t(p);for(var c=0;c<a.length;c++)n.call(p,a[c])&&(m[a[c]]=p[a[c]])}}return m}},5251:function(e,t,i){"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.
- */i(7418);var n=i(8156),r=60103;if(t.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var o=Symbol.for;r=o("react.element"),t.Fragment=o("react.fragment")}var p=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a=Object.prototype.hasOwnProperty,m={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,i){var n,o={},l=null,u=null;for(n in void 0!==i&&(l=""+i),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)a.call(t,n)&&!m.hasOwnProperty(n)&&(o[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===o[n]&&(o[n]=t[n]);return{$$typeof:r,type:e,key:l,ref:u,props:o,_owner:p.current}}t.jsx=l,t.jsxs=l},5893:function(e,t,i){"use strict";e.exports=i(5251)},7262:function(e,t,i){var n=i(3379),r=i(7283);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);var o={insert:("body","body"),singleton:!1};n(r,o);e.exports=r.locals||{}},6881:function(e,t,i){var n=i(3379),r=i(6949);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);var o={insert:("body","body"),singleton:!1};n(r,o);e.exports=r.locals||{}},3379:function(e,t,i){"use strict";var n,r=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},o=function(){var e={};return function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(e){i=null}e[t]=i}return e[t]}}(),p=[];function a(e){for(var t=-1,i=0;i<p.length;i++)if(p[i].identifier===e){t=i;break}return t}function m(e,t){for(var i={},n=[],r=0;r<e.length;r++){var o=e[r],m=t.base?o[0]+t.base:o[0],l=i[m]||0,u="".concat(m," ").concat(l);i[m]=l+1;var c=a(u),s={css:o[1],media:o[2],sourceMap:o[3]};-1!==c?(p[c].references++,p[c].updater(s)):p.push({identifier:u,updater:h(s,t),references:1}),n.push(u)}return n}function l(e){var t=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var r=i.nc;r&&(n.nonce=r)}if(Object.keys(n).forEach((function(e){t.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(t);else{var p=o(e.insert||"head");if(!p)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");p.appendChild(t)}return t}var u,c=(u=[],function(e,t){return u[e]=t,u.filter(Boolean).join("\n")});function s(e,t,i,n){var r=i?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=c(t,r);else{var o=document.createTextNode(r),p=e.childNodes;p[t]&&e.removeChild(p[t]),p.length?e.insertBefore(o,p[t]):e.appendChild(o)}}function v(e,t,i){var n=i.css,r=i.media,o=i.sourceMap;if(r?e.setAttribute("media",r):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var f=null,d=0;function h(e,t){var i,n,r;if(t.singleton){var o=d++;i=f||(f=l(t)),n=s.bind(null,i,o,!1),r=s.bind(null,i,o,!0)}else i=l(t),n=v.bind(null,i,t),r=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(i)};return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else r()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=r());var i=m(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<i.length;n++){var r=a(i[n]);p[r].references--}for(var o=m(e,t),l=0;l<i.length;l++){var u=a(i[l]);0===p[u].references&&(p[u].updater(),p.splice(u,1))}i=o}}}},5563:function(e,t,i){"use strict";i.d(t,{default:function(){return l}});var n=i(5893),r=i(8156),o=i(5002);function p(e,t){var i=e.timeout,n=e.style,r=void 0===n?{}:n;return{duration:r.transitionDuration||"number"==typeof i?i:i[t.mode]||0,delay:r.transitionDelay}}function a(e){if(!e)return 0;var t=e/36;return Math.round(10*(4+15*Math.pow(t,.25)+t/5))}i(7262);var m=function(){return m=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},m.apply(this,arguments)},l=function(e){var t=e.className,i=e.style,l=e.in,u=e.collapsedHeight,c=void 0===u?"0px":u,s=e.timeout,v=void 0===s?"auto":s,f=e.unmountOnExit,d=e.children,h=(0,r.useRef)(null),g=(0,r.useRef)(null),x=(0,r.useRef)(null),b=(0,r.useRef)(null),y="number"==typeof c?"".concat(c,"px"):c;(0,r.useEffect)((function(){return function(){clearTimeout(h.current)}}),[]);var w=function(e){return function(t){e&&e(t)}},k=w((function(e){e.style.height=y})),j=w((function(e){var t=x.current?x.current.clientHeight:0,n=p({style:i,timeout:v},{mode:"enter"}).duration;if("auto"===v){var r=a(t);e.style.transitionDuration="".concat(r,"ms"),b.current=r}else e.style.transitionDuration="string"==typeof n?n:"".concat(n,"ms");e.style.height="".concat(t,"px")})),M=w((function(e){e.style.height="auto"})),O=w((function(e){var t=x.current?x.current.clientHeight:0;e.style.height="".concat(t,"px")})),N=w((function(e){var t=x.current?x.current.clientHeight:0,n=p({style:i,timeout:v},{mode:"exit"}).duration;if("auto"===v){var r=a(t);e.style.transitionDuration="".concat(r,"ms"),b.current=r}else e.style.transitionDuration="string"==typeof n?n:"".concat(n,"ms");e.style.height=y})),S=function(e){var i="paraui-collapse-box";return t&&(i+=" "+t),"entered"===e&&(i+=" paraui-collapse-box-entered"),"exited"!==e||l||"0px"!==y||(i+=" paraui-collapse-box-hidden"),i};return(0,n.jsx)(o.Transition,m({in:l,unmountOnExit:f,onEnter:k,onEntered:M,onEntering:j,onExit:O,onExiting:N,timeout:"auto"===v?void 0:v,addEndListener:function(e,t){h.current=setTimeout(t,b.current||0)}},{children:function(e,t){return(0,n.jsx)("div",m({className:S(e),style:m({minHeight:y},i),ref:g},t,{children:(0,n.jsx)("div",m({className:"paraui-collapse-box-wrapper",ref:x},{children:(0,n.jsx)("div",m({className:"paraui-collapse-box-wrapper-inner"},{children:d}))}))}))}}))}},1197:function(e){"use strict";e.exports=r},2396:function(e){"use strict";e.exports=n},5602:function(e){"use strict";e.exports=a},1919:function(e){"use strict";e.exports=p},8543:function(e){"use strict";e.exports=o},8156:function(t){"use strict";t.exports=e},7111:function(e){"use strict";e.exports=t},5002:function(e){"use strict";e.exports=i}},l={};function u(e){var t=l[e];if(void 0!==t)return t.exports;var i=l[e]={id:e,exports:{}};return m[e](i,i.exports,u),i.exports}u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,{a:t}),t},u.d=function(e,t){for(var i in t)u.o(t,i)&&!u.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.nc=void 0;var c={};return function(){"use strict";u.r(c),u.d(c,{Menu:function(){return N},default:function(){return S}});var e=u(5893),t=u(8156),i=u.n(t),n=function(){return n=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},n.apply(this,arguments)},r=function(t){var i,r=t.expansion,o=void 0===r||r,p=t.render,a=t.className;return(0,e.jsx)("div",n({className:(i="logo paraui-logo",a&&(i+=" "+a),o||(i+=" logo-shrink"),i)},{children:function(){if(p)return p}()}))},o=u(7111),p=u(5563),a=u(2396),m=u.n(a),l=u(1197),s=u(8543),v=function(){return v=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},v.apply(this,arguments)},f=function(e,t,i){if(i||2===arguments.length)for(var n,r=0,o=t.length;r<o;r++)!n&&r in t||(n||(n=Array.prototype.slice.call(t,0,r)),n[r]=t[r]);return e.concat(n||Array.prototype.slice.call(t))},d=function(i){var n=i.label,r=(i.type,i.path),o=i.icon,a=i.children,u=i.className,c=i.level,s=void 0===c?1:c,f=i.selectMenu,h=void 0===f?"":f,g=i.idMenuLast,x=i.onClickMenu,b=i.shrinkOthers,y=void 0===b||b,w=(0,t.useState)(!1),k=w[0],j=w[1];(0,t.useEffect)((function(){var e=g[h];e&&-1!==e.indexOf(r)&&e.length>1?j(!0):y&&j(!1)}),[g,h,r]);var M=function(){if(a&&a.length>0)return x&&x(!1),j(!k);x&&x(i)},O=function(){if(o){var t=l[o];return t?(0,e.jsx)("span",v({className:"menu-item-icon"},{children:t()})):(0,e.jsx)("span",v({className:"menu-item-icon"},{children:o}))}},N=(0,t.useMemo)((function(){return(0,e.jsxs)("div",v({onClick:M,className:"vertical-menu-list-item-content",style:(t={paddingRight:"12px"},t.paddingLeft=s>=0?32*(s-1)+16+"px":"16px",t)},{children:[O(),(0,e.jsx)("span",v({className:"menu-item-label"},{children:n})),(0,e.jsx)("span",v({className:"menu-item-arrow"},{children:a&&a.length>0?(0,e.jsx)(m(),{}):(0,e.jsx)(m(),{className:"opacity-pos-svg"})}))]}));var t}),[a,x,k,s,o,n]),S=(0,t.useMemo)((function(){return(0,e.jsx)(p.default,v({in:k,className:"li-collapse",timeout:"auto",unmountOnExit:!0},{children:a&&a.length>0&&a.map((function(t,i){return(0,e.jsx)(d,v({},t,{level:s+1,idMenuLast:g,selectMenu:h,onClickMenu:x,shrinkOthers:y}),i)}))}))}),[k,a,s,g,h,x,y]);return(0,e.jsxs)("div",v({className:function(){var e="vertical-menu-list-item";k&&(e+=" vertical-menu-list-item-open"),u&&(e+=" "+u);var t=g[h];if(t){var i=t.indexOf(r);-1!==i&&(e+=" vertical-menu-list-item-select",i===t.length-1&&(e+=" vertical-menu-list-item-select-last"),k||(e+=" vertical-menu-list-item-select-retract"))}return e}()},{children:[N,S]}))},h=function(i){var n=i.open,r=void 0!==n&&n,p=i.anchorEl,a=i.idMenuLast,u=i.selectMenu,c=void 0===u?"":u,s=i.onClickMenu,f=i.list,d=void 0===f?[]:f,g=i.onMouseEnter,x=i.onMouseLeave,b=i.onMouseEnterBus,y=i.onMouseLeaveBus,w=i.level,k=void 0===w?1:w,j=i.color,M=i.className,O=(0,t.useState)(!1),N=O[0],S=O[1],E=(0,t.useState)(""),_=E[0],T=E[1],C=(0,t.useState)([]),L=C[0],P=C[1],R=(0,t.useState)({}),F=R[0],q=R[1],I=(0,t.useState)({})[0],z=(0,t.useRef)(null);(0,t.useEffect)((function(){return function(){clearTimeout(I.leaveBox),clearTimeout(I.closeTimer)}}),[]),(0,t.useEffect)((function(){B()}),[r,p]);var B=function(){if(p&&r&&z.current){var e=document.querySelector("[data-menu-id=".concat(p,"]")).getBoundingClientRect(),t=e.top;1!==k&&(t-=8),H()&&(t+=4);var i=document.body.clientHeight,n=z.current.clientHeight;n+t>i&&(t=t-(n+t-i)-20),t<0&&(t=0),q({position:"absolute",left:"0",top:"0",transform:"translate3d(".concat(e.right,"px, ").concat(t,"px, 0px)")})}},H=function(){return!(1!==k||1!==d.length||!d[0]._paraui_menu_first||d[0].children&&0!==d[0].children.length)},D=function(e){var t="menu-item-popper-content-item",i=a&&a[c];return i&&-1!==i.indexOf(e.path)&&(t+=" menu-item-popper-content-item-select"),t},U=function(t){if(t){var i=l[t];return i?(0,e.jsx)("span",v({className:"menu-item-icon"},{children:i()})):(0,e.jsx)("span",v({className:"menu-item-icon"},{children:t}))}},A=function(e){return function(t){e.children&&e.children.length>0||s&&s(e)}},Y=function(){H()||(1==k?g&&g():b&&b())},J=function(){H()||(clearTimeout(I.leaveBox),I.leaveBox=setTimeout((function(){1===k?x&&x():y&&y()}),50))},W=function(e){return function(t){K(t.target),S(!1),clearTimeout(I.closeTimer),I.closeTimer=setTimeout((function(){(e.children||[]).length>0?(S(!0),T(t.target.getAttribute("data-menu-id")),P(e.children||[])):(S(!1),T(""),P([]))}))}},K=function(e){if(z){var t=z.current.querySelector(".menu-item-popper-content-item-hover");t&&t.classList.remove("menu-item-popper-content-item-hover")}e&&e.classList.add("menu-item-popper-content-item-hover")},Q=(0,t.useMemo)((function(){return(0,e.jsx)("div",v({className:"menu-item-popper-content",onMouseEnter:Y,onMouseLeave:J,ref:z},{children:d.map((function(t,i){return(0,e.jsx)("div",v({className:D(t),onMouseEnter:W(t),onMouseLeave:function(e){}},{children:(0,e.jsxs)("div",v({className:"menu-item-popper-content-item-content","data-menu-id":t._paraui_menu_id,onClick:A(t)},{children:[U(t.icon),(0,e.jsx)("span",v({className:"menu-item-label"},{children:t.label})),(0,e.jsx)("span",v({className:"menu-item-arrow"},{children:(n=t.children,n&&n.length>0?(0,e.jsx)(m(),{}):(0,e.jsx)(m(),{className:"opacity-pos-svg"}))}))]}))}),i);var n}))}))}),[d,s,a,c,s,g,x,k]),$=function(){return(0,e.jsx)("div",v({className:(t="vertical-menu-item-popper paraui-vertical-menu-item-popper",j&&(t+=" paraui-vertical-menu-item-popper-"+j),t+="deep"===j?" paraui-scrollbar-small-deep":" paraui-scrollbar-small",H()&&(t+=" paraui-vertical-menu-item-popper-tooltip"),M&&(t+=" "+M),t),style:F},{children:Q}));var t},G=(0,t.useMemo)((function(){return(0,e.jsx)(e.Fragment,{children:(0,o.createPortal)((0,e.jsx)($,{}),document.getElementsByTagName("body")[0])})}),[F,d,s,a,c,s,g,x,k,M,j]);return(0,e.jsxs)(e.Fragment,{children:[G,N&&(0,e.jsx)(h,{open:N,anchorEl:_,list:L,idMenuLast:a,selectMenu:c,onClickMenu:s,onMouseEnter:g,onMouseLeave:x,onMouseEnterBus:function(){clearTimeout(I.leaveBox)},onMouseLeaveBus:function(){S(!1),T(""),P([]),x&&x()},color:j,level:k+1})]})},g=function(e){if(!e)return 0;try{var t=e.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);return Number(t&&t[2])}catch(e){}return 0},x=function(n){var r=n.list,o=void 0===r?[]:r,p=n.expansion,a=void 0===p||p,u=n.selectMenu,c=void 0===u?"":u,x=n.onClickMenu,b=n.className,y=n.shrinkOthers,w=void 0===y||y,k=n.color,j=(0,t.useState)([]),M=j[0],O=j[1],N=(0,t.useState)(!1),S=N[0],E=N[1],_=(0,t.useState)(null),T=_[0],C=_[1],L=(0,t.useState)(""),P=L[0],R=L[1],F=(0,t.useState)([]),q=F[0],I=F[1],z=(0,t.useState)(""),B=z[0],H=z[1],D=(0,t.useState)({}),U=D[0],A=D[1],Y=(0,t.useState)({prev:!1,next:!1}),J=Y[0],W=Y[1],K=(0,t.useState)({})[0],Q=i().useRef();(0,t.useEffect)((function(){return function(){clearTimeout(K.arrowTimer),clearTimeout(K.leaveTimer),clearTimeout(K.enterTimer)}}),[]),(0,t.useEffect)((function(){for(var e=[],t=0,i=o.length;t<i;t++){var n=o[t];e.push(v({},n))}ee(e)}),[o]),(0,t.useEffect)((function(){G()}),[M]),(0,t.useEffect)((function(){c!==B&&H(c),G()}),[c]);var $,G=function(){clearTimeout(K.arrowTimer),K.arrowTimer=setTimeout((function(){var e=Z(),t=e.min,i=e.max,n=g(Q.current.style.transform);W({prev:n!==t,next:n>i})}),300)},V=function(e){return function(){var t=g(Q.current.style.transform);switch(e){case"next":t-=100;break;case"prev":t+=100}X(t)}},X=function(e){var t=Z(),i=t.min,n=t.max;e>i&&(e=i),e<n&&(e=n),W({prev:e!==i,next:e>n}),Q.current.style.transform="translate3d(0, ".concat(e,"px, 0)")},Z=function(){var e=Q.current.parentNode.getBoundingClientRect().height,t=-(Q.current.getBoundingClientRect().height-e);return e>Q.current.getBoundingClientRect().height&&(t=0),{min:0,max:t}},ee=function(e){var t={},i={},n={},r=function(e,o){for(var p=0,a=e.length;p<a;p++){var m=e[p],l=m.path;if(m._paraui_menu_id="_paraui_menu_id_"+(0,s.UUID)(),t[l]=m,o){var u=(0,s.DeepClone)(i[o.path]||[]);u.push(l),i[l]=f([],u,!0)}else i[l]=[l],m._paraui_menu_first=!0;m.children&&m.children.length>0?r(m.children,m):n[l]=i[l]}};r(e),A(n),O(e)},te=function(e,t){return function(i){E(!1),clearTimeout(K.enterTimer),K.enterTimer=setTimeout((function(){clearTimeout(K.leaveTimer);var n=[e];e.children&&e.children.length>0&&(n=e.children),C(t),R(i.target.getAttribute("data-menu-id")),I(n),E(!0)}))}},ie=function(){clearTimeout(K.leaveTimer),K.leaveTimer=setTimeout((function(){oe()}),50)},ne=function(){clearTimeout(K.leaveTimer)},re=function(){ie()},oe=function(){E(!1),R(""),I([]),C(null)},pe=function(e){var t=e.icon,i=e.label;if(t){var n=l[t];return n?n():t}return"string"==typeof i?i[0]:i},ae=function(e){return function(){if(!e.children||0===e.children.length){var t=v({},e);delete t._paraui_menu_id,x&&x(t)}}},me=function(e){if(!1===e)return G();oe();var t=v({},e);delete t._paraui_menu_id,x&&x(t)},le=function(e,t){var i="vertical-menu-list-item-shrink",n=U[B];return n&&-1!==n.indexOf(e.path)&&(i+=" vertical-menu-list-item-shrink-select"),T===t&&(i+=" vertical-menu-list-item-shrink-hover"),i},ue=(0,t.useMemo)((function(){if(a)return M.map((function(e,i){return(0,t.createElement)(d,v({},e,{key:i,level:1,idMenuLast:U,selectMenu:B,onClickMenu:me,shrinkOthers:w}))}))}),[a,M,U,B,x,w]),ce=(0,t.useMemo)((function(){return a?null:M.map((function(t,i){return(0,e.jsx)("div",v({className:le(t,i),onMouseEnter:te(t,i),onMouseLeave:function(e){ie()},"data-menu-id":t._paraui_menu_id,onClick:ae(t)},{children:(0,e.jsx)("span",{children:pe(t)})}),i)}))}),[a,M,U,B,T]),se=(0,t.useMemo)((function(){return(0,e.jsx)(e.Fragment,{children:J.prev&&(0,e.jsx)("span",v({className:"scroll-top"},{children:(0,e.jsx)(m(),{onClick:V("prev")})}))})}),[J]),ve=(0,t.useMemo)((function(){return(0,e.jsx)(e.Fragment,{children:J.next&&(0,e.jsx)("span",v({className:"scroll-bottom"},{children:(0,e.jsx)(m(),{onClick:V("next")})}))})}),[J]),fe=(0,t.useMemo)((function(){return(0,e.jsx)(e.Fragment,{children:S&&(0,e.jsx)(h,{open:S,anchorEl:P,list:q,idMenuLast:U,selectMenu:B,onClickMenu:me,onMouseEnter:ne,onMouseLeave:re,color:k,level:1})})}),[S,P,q,U,B,x,K,k]);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",v({className:($="paraui-vertical-menu-list vertical-menu-list",b&&($+=" "+b),$),onWheel:function(e){return function(e){var t=e.deltaY,i=g(Q.current.style.transform);X(i-=t)}(e)}},{children:[se,(0,e.jsx)("div",v({className:"vertical-menu-list-box"},{children:(0,e.jsxs)("div",v({className:"vertical-menu-list-box-srcoll",ref:Q},{children:[ue,ce]}))})),ve]})),fe]})},b=u(1919),y=u.n(b),w=u(5602),k=u.n(w),j=function(){return j=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},j.apply(this,arguments)},M=function(t){var i,n=t.expansion,r=void 0===n||n,o=t.expandIcon,p=t.shrinkIcon,a=t.customizeContent,m=t.clickExpansion,l=t.version,u=t.className,c=function(){m&&m(!r)};return(0,e.jsx)("div",j({className:(i="footer-expansion paraui-footer-expansion",u&&(i+=" "+u),r||(i+=" footer-expansion-shrink"),i)},{children:function(){if(a)return a;return(0,e.jsxs)(e.Fragment,{children:[r?o||(0,e.jsx)(y(),{onClick:c}):p||(0,e.jsx)(k(),{onClick:c}),r&&l&&(0,e.jsx)("span",j({className:"version"},{children:l}))]})}()}))},O=(u(6881),function(){return O=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},O.apply(this,arguments)}),N=function(i){var n=i.color,o=void 0===n?"deep":n,p=i.logoProps,a=i.menuListProps,m=i.expansion,l=void 0===m||m,u=i.onClickExpansion,c=i.selectMenu,s=i.onClickMenu,v=i.className,f=i.style,d=i.shrinkOthers,h=void 0===d||d,g=i.footerExpansionProps,b=i.showExpansion,y=void 0===b||b,w=(0,t.useState)(!0),k=w[0],j=w[1];(0,t.useEffect)((function(){l!==k&&j(l)}),[l]);var N,S=function(){u&&u(!k)},E=(0,t.useMemo)((function(){return i.logoProps&&(0,e.jsx)(r,O({},p,{expansion:k}))}),[p,k]),_=(0,t.useMemo)((function(){return i.menuListProps&&(0,e.jsx)(x,O({},a,{color:o,expansion:k,selectMenu:c,onClickMenu:s,shrinkOthers:h}))}),[a,k,c,s,o]),T=(0,t.useMemo)((function(){return y?(0,e.jsx)(M,O({clickExpansion:S},g,{expansion:k})):null}),[k,u,g,u,y]);return(0,e.jsxs)("div",O({className:(N="vertical-menu paraui-vertical-menu",v&&(N+=" "+v),o&&(N+=" paraui-vertical-menu-"+o),l||(N+=" vertical-menu-shrink"),N),style:f},{children:[E,_,T]}))},S=N}(),c}()}));
+import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useEffect, useMemo, createElement, useRef } from 'react';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-f8047a75.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 MenuMoreLine from '@para-ui/icons/IndentRightFill';
+import MenuLessLine from '@para-ui/icons/IndentLeftFill';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import 'react-transition-group';
+
+var Logo = function Logo(props) {
+  var _props$expansion = props.expansion,
+      expansion = _props$expansion === void 0 ? true : _props$expansion,
+      render = props.render,
+      className = props.className;
+  /**
+   * 处理内容
+   * @return {ReactNode}
+   */
+
+  var handContent = function handContent() {
+    if (render) return render;
+  };
+  /**
+   * 处理className
+   * @return class名
+   */
+
+
+  var handClass = function handClass() {
+    var str = 'logo paraui-logo';
+    if (className) str += ' ' + className;
+    if (!expansion) str += ' logo-shrink';
+    return str;
+  };
+
+  return jsx("div", Object.assign({
+    className: handClass()
+  }, {
+    children: handContent()
+  }));
+};
+
+var VerticalMenuListItem = function VerticalMenuListItem(props) {
+  var label = props.label;
+      props.type;
+      var path = props.path,
+      icon = props.icon,
+      children = props.children,
+      className = props.className,
+      _props$level = props.level,
+      level = _props$level === void 0 ? 1 : _props$level,
+      _props$selectMenu = props.selectMenu,
+      selectMenu = _props$selectMenu === void 0 ? '' : _props$selectMenu,
+      idMenuLast = props.idMenuLast,
+      onClickMenu = props.onClickMenu,
+      _props$shrinkOthers = props.shrinkOthers,
+      shrinkOthers = _props$shrinkOthers === void 0 ? true : _props$shrinkOthers;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      openCom = _useState2[0],
+      setOpenCom = _useState2[1];
+
+  useEffect(function () {
+    var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+
+    if (selectMenuLast && selectMenuLast.indexOf(path) !== -1 && selectMenuLast.length > 1) {
+      setOpenCom(true);
+    } else {
+      // 选中菜单,收起其他展开项
+      if (shrinkOthers) setOpenCom(false);
+    }
+  }, [idMenuLast, selectMenu, path]);
+  /** 点击菜单 */
+
+  var clickMenu = function clickMenu() {
+    if (children && children.length > 0) {
+      onClickMenu && onClickMenu(false);
+      return setOpenCom(!openCom);
+    }
+
+    onClickMenu && onClickMenu(props);
+  };
+  /**
+   * 处理图标
+   * @return {ReactNode}
+   */
+
+
+  var handIcon = function handIcon() {
+    if (icon) {
+      var iconCom = iconList[icon];
+      if (iconCom) return jsx("span", Object.assign({
+        className: "menu-item-icon"
+      }, {
+        children: iconCom()
+      }));
+      return jsx("span", Object.assign({
+        className: "menu-item-icon"
+      }, {
+        children: icon
+      }));
+    } //return <Down className="opacity-pos-svg"/>; // 占位
+
+  };
+  /**
+   * 处理箭头
+   * @return {ReactNode}
+   */
+
+
+  var handArrow = function handArrow() {
+    if (children && children.length > 0) return jsx(Down, {});
+    return jsx(Down, {
+      className: "opacity-pos-svg"
+    }); // 占位
+  };
+  /**
+   * 处理class
+   * @return class名
+   */
+
+
+  var handClass = function handClass() {
+    var str = 'vertical-menu-list-item';
+    if (openCom) str += ' vertical-menu-list-item-open';
+    if (className) str += ' ' + className;
+    var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+
+    if (selectMenuLast) {
+      var index = selectMenuLast.indexOf(path);
+
+      if (index !== -1) {
+        str += ' vertical-menu-list-item-select'; // 选中
+
+        if (index === selectMenuLast.length - 1) {
+          str += ' vertical-menu-list-item-select-last'; // 最后一项
+        }
+
+        if (!openCom) {
+          // 收起且选中
+          str += ' vertical-menu-list-item-select-retract'; // 选中收起转态
+        }
+      }
+    }
+
+    return str;
+  };
+  /**
+   * 处理样式
+   */
+
+
+  var handStyle = function handStyle() {
+    var json = {
+      paddingRight: '12px'
+    };
+
+    if (level >= 0) {
+      json.paddingLeft = (level - 1) * 32 + 16 + 'px';
+    } else {
+      json.paddingLeft = '16px';
+    }
+
+    return json;
+  }; // itemMemo
+
+
+  var ItemMemo = useMemo(function () {
+    return jsxs("div", Object.assign({
+      onClick: clickMenu,
+      className: "vertical-menu-list-item-content",
+      style: handStyle()
+    }, {
+      children: [handIcon(), jsx("span", Object.assign({
+        className: "menu-item-label"
+      }, {
+        children: label
+      })), jsx("span", Object.assign({
+        className: "menu-item-arrow"
+      }, {
+        children: handArrow()
+      }))]
+    }));
+  }, [children, onClickMenu, openCom, level, icon, label]); // Collapse
+
+  var CollapseMemo = useMemo(function () {
+    return jsx(CollapseBox, Object.assign({
+      in: openCom,
+      className: "li-collapse",
+      timeout: "auto",
+      unmountOnExit: true
+    }, {
+      children: children && children.length > 0 && children.map(function (item, index) {
+        return jsx(VerticalMenuListItem, Object.assign({}, item, {
+          level: level + 1,
+          idMenuLast: idMenuLast,
+          selectMenu: selectMenu,
+          onClickMenu: onClickMenu,
+          shrinkOthers: shrinkOthers
+        }), index);
+      })
+    }));
+  }, [openCom, children, level, idMenuLast, selectMenu, onClickMenu, shrinkOthers]);
+  return jsxs("div", Object.assign({
+    className: handClass()
+  }, {
+    children: [ItemMemo, CollapseMemo]
+  }));
+}; // 弹出菜单
+
+
+var MenuItemPopper = function MenuItemPopper(props) {
+  var _props$open = props.open,
+      open = _props$open === void 0 ? false : _props$open,
+      anchorEl = props.anchorEl,
+      idMenuLast = props.idMenuLast,
+      _props$selectMenu2 = props.selectMenu,
+      selectMenu = _props$selectMenu2 === void 0 ? '' : _props$selectMenu2,
+      onClickMenu = props.onClickMenu,
+      _props$list = props.list,
+      list = _props$list === void 0 ? [] : _props$list,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onMouseEnterBus = props.onMouseEnterBus,
+      onMouseLeaveBus = props.onMouseLeaveBus,
+      _props$level2 = props.level,
+      level = _props$level2 === void 0 ? 1 : _props$level2,
+      color = props.color,
+      className = props.className;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openChild = _useState4[0],
+      setOpenChild = _useState4[1]; // 是否渲染子级
+
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      childPos = _useState6[0],
+      setChildPos = _useState6[1]; // 子级定位元素
+
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      childList = _useState8[0],
+      setChildList = _useState8[1]; // 子级列表
+
+
+  var _useState9 = useState({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      posStyle = _useState10[0],
+      setPosStyle = _useState10[1]; // 定位元素样式
+
+
+  var _useState11 = useState({}),
+      _useState12 = _slicedToArray(_useState11, 1),
+      timerJson = _useState12[0];
+
+  var boxRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      clearTimeout(timerJson.leaveBox);
+      clearTimeout(timerJson.closeTimer);
+    };
+  }, []);
+  useEffect(function () {
+    handPosStyle();
+  }, [open, anchorEl]);
+  /**
+   * 设置定位样式
+   * */
+
+  var handPosStyle = function handPosStyle() {
+    if (anchorEl && open && boxRef.current) {
+      // 定位容器
+      var anchorElDom = document.querySelector("[data-menu-id=".concat(anchorEl, "]"));
+      var reactDom = anchorElDom.getBoundingClientRect();
+      var top = reactDom.top; // 不是第一级的弹窗向上便宜8px
+
+      if (level !== 1) {
+        top = top - 8;
+      } // 第一级,且只有一级
+
+
+      if (handTooltip()) {
+        top = top + 4;
+      }
+
+      var bodyHeight = document.body.clientHeight;
+      var selfHeight = boxRef.current.clientHeight;
+
+      if (selfHeight + top > bodyHeight) {
+        top = top - (selfHeight + top - bodyHeight) - 20; // 多减20的余量
+      }
+
+      if (top < 0) {
+        top = 0;
+      }
+
+      setPosStyle({
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        transform: "translate3d(".concat(reactDom.right, "px, ").concat(top, "px, 0px)")
+      });
+    }
+  };
+  /**
+   * 判断是否是第一级,且没有子级
+   * */
+
+
+  var handTooltip = function handTooltip() {
+    // 第一层,长度为1,且没有父级,,子级也没有
+    if (level === 1 && list.length === 1 && list[0]._paraui_menu_first && (!list[0].children || list[0].children.length === 0)) {
+      return true;
+    }
+
+    return false;
+  };
+  /**
+   * 处理MenuPopover样式类名
+   * @return {string}
+   */
+
+
+  var handPopoverClass = function handPopoverClass() {
+    var str = 'vertical-menu-item-popper paraui-vertical-menu-item-popper';
+    if (color) str += ' paraui-vertical-menu-item-popper-' + color;
+    if (color === 'deep') str += ' paraui-scrollbar-small-deep';else str += ' paraui-scrollbar-small'; // 第一级,且只有一项
+
+    if (handTooltip()) {
+      str += ' paraui-vertical-menu-item-popper-tooltip';
+    }
+
+    if (className) str += ' ' + className;
+    return str;
+  };
+  /**
+   * 处理子菜单项class
+   * @param item {MenuChildrenProps} 子菜单详情
+   * @return {string}
+   */
+
+
+  var handItemClass = function handItemClass(item) {
+    var str = 'menu-item-popper-content-item';
+    var selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+
+    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
+      str += ' menu-item-popper-content-item-select';
+    }
+
+    return str;
+  };
+  /**
+   * 处理图标
+   * @param icon 图标信息
+   * @return {ReactNode}
+   */
+
+
+  var handIcon = function handIcon(icon) {
+    if (icon) {
+      var iconCom = iconList[icon];
+      if (iconCom) return jsx("span", Object.assign({
+        className: "menu-item-icon"
+      }, {
+        children: iconCom()
+      }));
+      return jsx("span", Object.assign({
+        className: "menu-item-icon"
+      }, {
+        children: icon
+      }));
+    } //return <Down className="opacity-pos-svg"/>; // 占位
+
+  };
+  /**
+   * 处理箭头
+   * @param children 详细
+   * @return {ReactNode}
+   */
+
+
+  var handArrow = function handArrow(children) {
+    if (children && children.length > 0) return jsx(Down, {});
+    return jsx(Down, {
+      className: "opacity-pos-svg"
+    }); // 占位
+  };
+  /**
+   * 点击菜单
+   * @param item {MenuChildrenProps} 当前项参数
+   * @param e 当前元素
+   */
+
+
+  var clickMenu = function clickMenu(item) {
+    return function (e) {
+      if (item.children && item.children.length > 0) return;
+      onClickMenu && onClickMenu(item);
+    };
+  };
+  /**
+   * 鼠标移入大容器
+   * */
+
+
+  var onMouseEnterBox = function onMouseEnterBox() {
+    if (handTooltip()) return;
+
+    if (level == 1) {
+      // 关闭收缩按钮移出事件
+      onMouseEnter && onMouseEnter();
+    } else {
+      onMouseEnterBus && onMouseEnterBus();
+    }
+  };
+  /**
+   * 鼠标移出大容器
+   * */
+
+
+  var onMouseLeaveBox = function onMouseLeaveBox() {
+    if (handTooltip()) return;
+    clearTimeout(timerJson.leaveBox);
+    timerJson.leaveBox = setTimeout(function () {
+      if (level === 1) {
+        onMouseLeave && onMouseLeave();
+      } else {
+        onMouseLeaveBus && onMouseLeaveBus();
+      }
+    }, 50);
+  };
+  /**
+   * 移入事件 传递 给子级
+   * 用来通知上级
+   * */
+
+
+  var onMouseEnterBusCom = function onMouseEnterBusCom() {
+    // 移入子级的大容器里面, 需要通知上级不关闭容器, 清楚关闭定时器
+    clearTimeout(timerJson.leaveBox);
+  };
+  /**
+   * 移出事件 传递 给子级
+   * 用来通知上级
+   * */
+
+
+  var onMouseLeaveBusCom = function onMouseLeaveBusCom() {
+    setOpenChild(false);
+    setChildPos('');
+    setChildList([]);
+    onMouseLeave && onMouseLeave();
+  };
+  /**
+   * 移入子级
+   * @param item {MenuChildrenProps} 移入当前项参数
+   * @param index {number} 移入当前项下标
+   * @param e 当前元素
+   */
+
+
+  var onMouseEnterChildCom = function onMouseEnterChildCom(item) {
+    return function (e) {
+      handClassItemHover(e.target);
+      setOpenChild(false);
+      clearTimeout(timerJson.closeTimer);
+      timerJson.closeTimer = setTimeout(function () {
+        var childListHand = item.children || [];
+
+        if (childListHand.length > 0) {
+          setOpenChild(true);
+          setChildPos(e.target.getAttribute('data-menu-id'));
+          setChildList(item.children || []);
+        } else {
+          setOpenChild(false);
+          setChildPos('');
+          setChildList([]);
+        }
+      });
+    };
+  };
+  /**
+   * 移出子级
+   * @param item {MenuChildrenProps} 移入当前项参数
+   * @param index {number} 移入当前项下标
+   * @param e 当前元素
+   */
+
+
+  var onMouseLeaveChildCom = function onMouseLeaveChildCom(item) {
+    return function (e) {//console.log('移出子级')
+    };
+  };
+  /**
+   * 处理移入的class
+   * */
+
+
+  var handClassItemHover = function handClassItemHover(target) {
+    if (boxRef) {
+      var boxDom = boxRef.current;
+      var hoverDom = boxDom.querySelector('.menu-item-popper-content-item-hover');
+
+      if (hoverDom) {
+        hoverDom.classList.remove('menu-item-popper-content-item-hover');
+      }
+    }
+
+    if (target) {
+      target.classList.add('menu-item-popper-content-item-hover');
+    }
+  };
+  /** 内容 */
+
+
+  var ContentMemo = useMemo(function () {
+    return jsx("div", Object.assign({
+      className: "menu-item-popper-content",
+      onMouseEnter: onMouseEnterBox,
+      onMouseLeave: onMouseLeaveBox,
+      ref: boxRef
+    }, {
+      children: list.map(function (item, index) {
+        return jsx("div", Object.assign({
+          className: handItemClass(item),
+          onMouseEnter: onMouseEnterChildCom(item),
+          onMouseLeave: onMouseLeaveChildCom()
+        }, {
+          children: jsxs("div", Object.assign({
+            className: "menu-item-popper-content-item-content",
+            "data-menu-id": item._paraui_menu_id,
+            onClick: clickMenu(item)
+          }, {
+            children: [handIcon(item.icon), jsx("span", Object.assign({
+              className: "menu-item-label"
+            }, {
+              children: item.label
+            })), jsx("span", Object.assign({
+              className: "menu-item-arrow"
+            }, {
+              children: handArrow(item.children)
+            }))]
+          }))
+        }), index);
+      })
+    }));
+  }, [list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]); // 计算定位
+
+  var MenuPopover = function MenuPopover() {
+    return jsx("div", Object.assign({
+      className: handPopoverClass(),
+      style: posStyle
+    }, {
+      children: ContentMemo
+    }));
+  };
+
+  var MenuPortalMemo = useMemo(function () {
+    return jsx(Fragment, {
+      children: /*#__PURE__*/createPortal(jsx(MenuPopover, {}), document.getElementsByTagName('body')[0])
+    });
+  }, [posStyle, list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level, className, color]);
+  return jsxs(Fragment, {
+    children: [MenuPortalMemo, openChild && jsx(MenuItemPopper, {
+      open: openChild,
+      anchorEl: childPos,
+      list: childList,
+      idMenuLast: idMenuLast,
+      selectMenu: selectMenu,
+      onClickMenu: onClickMenu,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseEnterBus: onMouseEnterBusCom,
+      onMouseLeaveBus: onMouseLeaveBusCom,
+      color: color,
+      level: level + 1
+    })]
+  });
+};
+/**
+ * 提取坐标数字
+ * @param transform {string}
+ * @return {number}
+ */
+
+
+var getTransformY = function getTransformY(transform) {
+  if (!transform) return 0;
+
+  try {
+    var transformY = transform.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
+    return Number(transformY && transformY[2]);
+  } catch (e) {}
+
+  return 0;
+};
+
+var VerticalMenuList = function VerticalMenuList(props) {
+  var _props$list2 = props.list,
+      list = _props$list2 === void 0 ? [] : _props$list2,
+      _props$expansion = props.expansion,
+      expansion = _props$expansion === void 0 ? true : _props$expansion,
+      _props$selectMenu3 = props.selectMenu,
+      selectMenu = _props$selectMenu3 === void 0 ? '' : _props$selectMenu3,
+      onClickMenu = props.onClickMenu,
+      className = props.className,
+      _props$shrinkOthers2 = props.shrinkOthers,
+      shrinkOthers = _props$shrinkOthers2 === void 0 ? true : _props$shrinkOthers2,
+      color = props.color; // const classes: any = useStyles(props);
+
+  var _useState13 = useState([]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      listCom = _useState14[0],
+      setListCom = _useState14[1]; // 菜单数据
+
+
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      openChild = _useState16[0],
+      setOpenChild = _useState16[1]; // 侧边展开子菜单
+
+
+  var _useState17 = useState(null),
+      _useState18 = _slicedToArray(_useState17, 2),
+      openChildIndex = _useState18[0],
+      setOpenChildIndex = _useState18[1]; // 侧边菜单第几项
+
+
+  var _useState19 = useState(''),
+      _useState20 = _slicedToArray(_useState19, 2),
+      childPos = _useState20[0],
+      setChildPos = _useState20[1]; // 侧边子菜单定位
+
+
+  var _useState21 = useState([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      childList = _useState22[0],
+      setChildList = _useState22[1]; // 侧边子菜单数据
+
+
+  var _useState23 = useState(""),
+      _useState24 = _slicedToArray(_useState23, 2),
+      selectMenuCom = _useState24[0],
+      setSelectMenuCom = _useState24[1]; // 当前选中菜单id
+  //const [jsonMenu, setJsonMenu] = useState<any>({}); // 菜单map
+
+
+  var _useState25 = useState({}),
+      _useState26 = _slicedToArray(_useState25, 2),
+      idMenuLast = _useState26[0],
+      setIdMenuLast = _useState26[1]; // 最后一级菜单所有层级id
+
+
+  var _useState27 = useState({
+    prev: false,
+    next: false
+  }),
+      _useState28 = _slicedToArray(_useState27, 2),
+      flipDisable = _useState28[0],
+      setFlipDisable = _useState28[1];
+
+  var _useState29 = useState({}),
+      _useState30 = _slicedToArray(_useState29, 1),
+      timerJson = _useState30[0];
+
+  var listRef = React__default.useRef();
+  useEffect(function () {
+    return function () {
+      // 防止组件销毁设置元素报错
+      clearTimeout(timerJson.arrowTimer);
+      clearTimeout(timerJson.leaveTimer);
+      clearTimeout(timerJson.enterTimer);
+    };
+  }, []);
+  useEffect(function () {
+    // 浅拷贝一层,防止数据外部使用用了同一份数据,导致收缩的时候定位错误
+    var arr = [];
+
+    for (var i = 0, l = list.length; i < l; i++) {
+      var item = list[i];
+      arr.push(Object.assign({}, item));
+    }
+
+    handList(arr);
+  }, [list]);
+  useEffect(function () {
+    isShowArrow();
+  }, [listCom]);
+  useEffect(function () {
+    if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
+    isShowArrow();
+  }, [selectMenu]);
+  /** 初始化判断是否显示箭头 */
+
+  var isShowArrow = function isShowArrow() {
+    clearTimeout(timerJson.arrowTimer);
+    timerJson.arrowTimer = setTimeout(function () {
+      var _getLimit = getLimit(),
+          min = _getLimit.min,
+          max = _getLimit.max;
+
+      var y = getTransformY(listRef.current.style.transform);
+      setFlipDisable({
+        prev: y !== min,
+        next: y > max
+      });
+    }, 300);
+  };
+  /**
+   * 鼠标滚动应用列表
+   * @param e 元素
+   */
+
+
+  var handleScroll = function handleScroll(e) {
+    var deltaY = e.deltaY;
+    var y = getTransformY(listRef.current.style.transform);
+    y -= deltaY;
+    setTransform(y);
+  };
+  /**
+   * 翻页点击
+   * @param type {'prev' | 'next'} 点击类型
+   */
+
+
+  var flip = function flip(type) {
+    return function () {
+      var height = 100;
+      var y = getTransformY(listRef.current.style.transform);
+
+      switch (type) {
+        case "next":
+          y -= height;
+          break;
+
+        case "prev":
+          y += height;
+          break;
+      }
+
+      setTransform(y);
+    };
+  };
+  /**
+   * 设置上下平移
+   * @param y {number} 滚动距离
+   */
+
+
+  var setTransform = function setTransform(y) {
+    var _getLimit2 = getLimit(),
+        min = _getLimit2.min,
+        max = _getLimit2.max;
+
+    if (y > min) y = min;
+    if (y < max) y = max;
+    setFlipDisable({
+      prev: y !== min,
+      next: y > max
+    });
+    listRef.current.style.transform = "translate3d(0, ".concat(y, "px, 0)");
+  };
+  /**
+   * 返回滚动限制
+   * @return {object} 滚动限制
+   */
+
+
+  var getLimit = function getLimit() {
+    var parentHeight = listRef.current.parentNode.getBoundingClientRect().height;
+    var min = 0;
+    var max = -(listRef.current.getBoundingClientRect().height - parentHeight);
+
+    if (parentHeight > listRef.current.getBoundingClientRect().height) {
+      max = 0;
+    }
+
+    return {
+      min: min,
+      max: max
+    };
+  };
+  /**
+   * 处理菜单数据
+   * @param dataArr {MenuChildrenProps} 菜单数据
+   */
+
+
+  var handList = function handList(dataArr) {
+    var idMap = {}; // 所有id,层级map
+
+    var idMapLast = {}; // 最后一层菜单,层级map
+
+    var recurrenceFunc = function recurrenceFunc(daraChildArr, parent) {
+      for (var i = 0, l = daraChildArr.length; i < l; i++) {
+        var item = daraChildArr[i];
+        var path = item.path;
+        item._paraui_menu_id = '_paraui_menu_id_' + UUID(); // 设置唯一id
+
+        if (parent) {
+          var idList = DeepClone(idMap[parent.path] || []);
+          idList.push(path);
+          idMap[path] = _toConsumableArray(idList);
+        } else {
+          // 不存在parent,第一级
+          idMap[path] = [path];
+          item._paraui_menu_first = true;
+        }
+
+        if (item.children && item.children.length > 0) {
+          recurrenceFunc(item.children, item);
+        } else {
+          // 不存在children,为点击菜单选项
+          idMapLast[path] = idMap[path];
+        }
+      }
+    };
+
+    recurrenceFunc(dataArr);
+    setIdMenuLast(idMapLast);
+    setListCom(dataArr);
+  };
+  /**
+   * 鼠标移入收缩
+   * @param item {MenuChildrenProps} 移入当前项参数
+   * @param index {number} 移入当前项下标
+   * @param e 当前元素
+   */
+
+
+  var mouseEnterShrinkFunc = function mouseEnterShrinkFunc(item, index) {
+    return function (e) {
+      setOpenChild(false);
+      clearTimeout(timerJson.enterTimer);
+      timerJson.enterTimer = setTimeout(function () {
+        clearTimeout(timerJson.leaveTimer);
+        var childListHand = [item];
+
+        if (item.children && item.children.length > 0) {
+          childListHand = item.children;
+        }
+
+        setOpenChildIndex(index);
+        setChildPos(e.target.getAttribute('data-menu-id'));
+        setChildList(childListHand);
+        setOpenChild(true);
+      });
+    };
+  };
+  /**
+   * 鼠标移出收缩
+   * @param item {MenuChildrenProps} 移出当前项参数
+   * @param e 当前元素
+   */
+
+
+  var mouseLeaveShrinkFunc = function mouseLeaveShrinkFunc(item) {
+    return function (e) {
+      leaveFunc();
+    };
+  };
+  /** 移出事件 */
+
+
+  var leaveFunc = function leaveFunc() {
+    clearTimeout(timerJson.leaveTimer);
+    timerJson.leaveTimer = setTimeout(function () {
+      closeShrink();
+    }, 50);
+  };
+  /** 移入子菜单 */
+
+
+  var onMouseEnterChild = function onMouseEnterChild() {
+    clearTimeout(timerJson.leaveTimer);
+  };
+  /** 移出子菜单 */
+
+
+  var onMouseLeaveChild = function onMouseLeaveChild() {
+    leaveFunc();
+  };
+  /**
+   * 关闭收缩弹窗
+   * */
+
+
+  var closeShrink = function closeShrink() {
+    setOpenChild(false);
+    setChildPos('');
+    setChildList([]);
+    setOpenChildIndex(null);
+  };
+  /**
+   * 处理图标
+   * @param item {MenuChildrenProps} 当前项参数
+   * @return {ReactNode}
+   */
+
+
+  var handShrink = function handShrink(item) {
+    var icon = item.icon,
+        label = item.label;
+
+    if (icon) {
+      var iconCom = iconList[icon];
+      if (iconCom) return iconCom();
+      return icon;
+    }
+
+    if (typeof label === 'string') {
+      return label[0];
+    } else {
+      return label;
+    }
+  };
+  /**
+   * 点击收缩菜单时候的按钮
+   * */
+
+
+  var clickShrinkMenu = function clickShrinkMenu(item) {
+    return function () {
+      if (!item.children || item.children.length === 0) {
+        var handItem = Object.assign({}, item);
+        delete handItem._paraui_menu_id;
+        onClickMenu && onClickMenu(handItem);
+      }
+    };
+  };
+  /**
+   * 点击菜单
+   * @param item {MenuChildrenProps | false} 当前项参数
+   */
+
+
+  var clickMenu = function clickMenu(item) {
+    if (item === false) {
+      return isShowArrow();
+    }
+
+    closeShrink();
+    var handItem = Object.assign({}, item);
+    delete handItem._paraui_menu_id;
+    onClickMenu && onClickMenu(handItem);
+  };
+  /**
+   * 处理收缩菜单class
+   * @param item {MenuChildrenProps} 当前项参数
+   * @param index {number} 下标
+   * @return {string} 返回图标元素
+   */
+
+
+  var handShrinkClass = function handShrinkClass(item, index) {
+    var str = 'vertical-menu-list-item-shrink';
+    var selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
+
+    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) str += ' vertical-menu-list-item-shrink-select';
+    if (openChildIndex === index) str += ' vertical-menu-list-item-shrink-hover';
+    return str;
+  };
+  /**
+   * 处理class
+   * @return {string} class名
+   */
+
+
+  var handClass = function handClass() {
+    var str = 'paraui-vertical-menu-list vertical-menu-list';
+    if (className) str += ' ' + className;
+    return str;
+  };
+  /** 展开memo */
+
+
+  var ExpansionMemo = useMemo(function () {
+    if (expansion) {
+      return listCom.map(function (item, index) {
+        return /*#__PURE__*/createElement(VerticalMenuListItem, Object.assign({}, item, {
+          key: index,
+          level: 1,
+          idMenuLast: idMenuLast,
+          selectMenu: selectMenuCom,
+          onClickMenu: clickMenu,
+          shrinkOthers: shrinkOthers
+        }));
+      });
+    }
+  }, [expansion, listCom, idMenuLast, selectMenuCom, onClickMenu, shrinkOthers]);
+  /** 收缩memo */
+
+  var ShrinkMemo = useMemo(function () {
+    if (expansion) return null;
+    return listCom.map(function (item, index) {
+      return jsx("div", Object.assign({
+        className: handShrinkClass(item, index),
+        onMouseEnter: mouseEnterShrinkFunc(item, index),
+        onMouseLeave: mouseLeaveShrinkFunc(),
+        "data-menu-id": item._paraui_menu_id,
+        onClick: clickShrinkMenu(item)
+      }, {
+        children: jsx("span", {
+          children: handShrink(item)
+        })
+      }), index);
+    });
+  }, [expansion, listCom, idMenuLast, selectMenuCom, openChildIndex]);
+  /** 向上翻页 */
+
+  var PrevScroll = useMemo(function () {
+    return jsx(Fragment, {
+      children: flipDisable.prev && jsx("span", Object.assign({
+        className: "scroll-top"
+      }, {
+        children: jsx(Down, {
+          onClick: flip('prev')
+        })
+      }))
+    });
+  }, [flipDisable]);
+  /** 向下翻页 */
+
+  var NextScroll = useMemo(function () {
+    return jsx(Fragment, {
+      children: flipDisable.next && jsx("span", Object.assign({
+        className: "scroll-bottom"
+      }, {
+        children: jsx(Down, {
+          onClick: flip('next')
+        })
+      }))
+    });
+  }, [flipDisable]);
+  /** 收缩弹出框菜单 */
+
+  var MenuItemPopperMemo = useMemo(function () {
+    return jsx(Fragment, {
+      children: openChild && jsx(MenuItemPopper, {
+        open: openChild,
+        anchorEl: childPos,
+        list: childList,
+        idMenuLast: idMenuLast,
+        selectMenu: selectMenuCom,
+        onClickMenu: clickMenu,
+        onMouseEnter: onMouseEnterChild,
+        onMouseLeave: onMouseLeaveChild,
+        color: color,
+        level: 1
+      })
+    });
+  }, [openChild, childPos, childList, idMenuLast, selectMenuCom, onClickMenu, timerJson, color]);
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      className: handClass(),
+      onWheel: function onWheel(e) {
+        return handleScroll(e);
+      }
+    }, {
+      children: [PrevScroll, jsx("div", Object.assign({
+        className: "vertical-menu-list-box"
+      }, {
+        children: jsxs("div", Object.assign({
+          className: "vertical-menu-list-box-srcoll",
+          ref: listRef
+        }, {
+          children: [ExpansionMemo, ShrinkMemo]
+        }))
+      })), NextScroll]
+    })), MenuItemPopperMemo]
+  });
+};
+
+var FooterExpansion = function FooterExpansion(props) {
+  var _props$expansion = props.expansion,
+      expansion = _props$expansion === void 0 ? true : _props$expansion,
+      expandIcon = props.expandIcon,
+      shrinkIcon = props.shrinkIcon,
+      customizeContent = props.customizeContent,
+      clickExpansion = props.clickExpansion,
+      version = props.version,
+      className = props.className;
+  /** 点击展开/收起按钮 */
+
+  var clickExpansionCom = function clickExpansionCom() {
+    clickExpansion && clickExpansion(!expansion);
+  };
+  /**
+   * 处理内容
+   * @return {ReactNode}
+   */
+
+
+  var handContent = function handContent() {
+    if (customizeContent) return customizeContent;
+
+    var handIcon = function handIcon() {
+      if (expansion) {
+        if (expandIcon) return expandIcon;
+        return jsx(MenuMoreLine, {
+          onClick: clickExpansionCom
+        });
+      } else {
+        if (shrinkIcon) return shrinkIcon;
+        return jsx(MenuLessLine, {
+          onClick: clickExpansionCom
+        });
+      }
+    };
+
+    return jsxs(Fragment, {
+      children: [handIcon(), expansion && version && jsx("span", Object.assign({
+        className: "version"
+      }, {
+        children: version
+      }))]
+    });
+  }; // 处理className
+
+
+  var handClass = function handClass() {
+    var str = 'footer-expansion paraui-footer-expansion';
+    if (className) str += ' ' + className;
+    if (!expansion) str += ' footer-expansion-shrink';
+    return str;
+  };
+
+  return jsx("div", Object.assign({
+    className: handClass()
+  }, {
+    children: handContent()
+  }));
+};
+
+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);
+
+var Menu = function Menu(props) {
+  var _props$color = props.color,
+      color = _props$color === void 0 ? 'deep' : _props$color,
+      logoProps = props.logoProps,
+      menuListProps = props.menuListProps,
+      _props$expansion = props.expansion,
+      expansion = _props$expansion === void 0 ? true : _props$expansion,
+      onClickExpansion = props.onClickExpansion,
+      selectMenu = props.selectMenu,
+      onClickMenu = props.onClickMenu,
+      className = props.className,
+      style = props.style,
+      _props$shrinkOthers = props.shrinkOthers,
+      shrinkOthers = _props$shrinkOthers === void 0 ? true : _props$shrinkOthers,
+      footerExpansionProps = props.footerExpansionProps,
+      _props$showExpansion = props.showExpansion,
+      showExpansion = _props$showExpansion === void 0 ? true : _props$showExpansion;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      expansionCom = _useState2[0],
+      setExpansionCom = _useState2[1];
+
+  useEffect(function () {
+    if (expansion !== expansionCom) setExpansionCom(expansion);
+  }, [expansion]);
+  /**
+   * 点击展开 / 收起
+   */
+
+  var clickExpansion = function clickExpansion() {
+    onClickExpansion && onClickExpansion(!expansionCom);
+  };
+  /**
+   * 处理class
+   * @return class名
+   */
+
+
+  var handClass = function handClass() {
+    var str = 'vertical-menu paraui-vertical-menu';
+    if (className) str += ' ' + className;
+    if (color) str += ' paraui-vertical-menu-' + color;
+    if (!expansion) str += ' vertical-menu-shrink';
+    return str;
+  };
+  /** 头像memo */
+
+
+  var LogoMemo = useMemo(function () {
+    return props.logoProps && jsx(Logo, Object.assign({}, logoProps, {
+      expansion: expansionCom
+    }));
+  }, [logoProps, expansionCom]);
+  /** 菜单memo */
+
+  var MenuListMemo = useMemo(function () {
+    return props.menuListProps && jsx(VerticalMenuList, Object.assign({}, menuListProps, {
+      color: color,
+      expansion: expansionCom,
+      selectMenu: selectMenu,
+      onClickMenu: onClickMenu,
+      shrinkOthers: shrinkOthers
+    }));
+  }, [menuListProps, expansionCom, selectMenu, onClickMenu, color]);
+  /** 底部展开收起 */
+
+  var ExpansionMemo = useMemo(function () {
+    if (!showExpansion) return null;
+    return jsx(FooterExpansion, Object.assign({
+      clickExpansion: clickExpansion
+    }, footerExpansionProps, {
+      expansion: expansionCom
+    }));
+  }, [expansionCom, onClickExpansion, footerExpansionProps, onClickExpansion, showExpansion]);
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style
+  }, {
+    children: [LogoMemo, MenuListMemo, ExpansionMemo]
+  }));
+};
+
+export { Menu, Menu as default };