gdx-ui 2.2.4 → 2.4.0

package/base.css

@@ -1 +1 @@
-body{background:var(--body-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;font-size:14px;font-weight:300;line-height:1.5em}body,html{box-sizing:border-box;height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px 0;padding:0}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px;font-weight:500}small{font-size:12px}b,strong{font-weight:500}a,button.anchor{color:#1d9efc;text-decoration:none;background:0 0;border:none;cursor:pointer;padding:0}a:hover,button.anchor:hover{transition:color .2s ease;color:#0390f7}button{font-size:14px}p{margin:0 0 15px}code,pre{font-family:monospace;font-size:14px;color:#777}pre{background:var(--body-bg);border-radius:15px;border:solid 1px var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}hr{border:none;border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.66666667px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--border-radius:15px;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF;--primary-color:#1D9EFC;--success-color:#38c153;--alert-color:#ea0835;--warning-color:#ffd500;--active-color:#64FA00;--color-gray:#777}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:relative;margin-bottom:15px}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#777;background:#fff;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-footer .row,.box .box-toolbar .row{margin-bottom:0}.box .box-toolbar .form-element{margin-bottom:0}.box .box-top-btn{position:absolute;right:10px;top:10px}.box .box{box-shadow:none;border:solid 1px var(--border-color)}button:focus-visible{outline:1px auto #1D9EFC}.btn-circle:active,.btn:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:focus-visible,.btn:focus-visible{outline:2px solid #038df2;outline-offset:2px}.btn{border:none;border-radius:7.5px;box-sizing:border-box;display:inline-block;font-size:14px;margin:0;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;padding:12px 20px;transition:background .2s cubic-bezier(.4, 0, .2, 1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:solid 1px transparent;background:0 0;color:#1d9efc;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-outline-default{border:solid 1px #919191;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ecedef}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1d9efc;border:solid 1px #1d9efc;color:#fff}.btn-outline-primary{border:solid 1px #1d9efc;color:#1d9efc}.btn-link-primary{color:#1d9efc}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#fff;background:#038aed}.btn-normal-alert{background:#ea0835;border:solid 1px #ea0835;color:#fff}.btn-outline-alert{border:solid 1px #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#fcc5c5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#fff;background:#c3072c}.btn-normal-success{background:#38c153;border:solid 1px #38c153;color:#fff}.btn-outline-success{border:solid 1px #38c153;color:#38c153}.btn-link-success{color:#38c153}.btn-link-success:hover{background:#ddffd4}.btn-normal-success:hover,.btn-outline-success:hover{color:#fff;background:#2fa145}.btn-normal-warning{background:#ffd500;border:solid 1px #ffd500}.btn-outline-warning{border:solid 1px #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:35px;width:35px;min-height:35px;min-width:35px;max-height:35px;max-width:35px;aspect-ratio:1/1;margin:0;padding:0;overflow:hidden;background:rgba(0,0,0,.05)}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:hover{background:rgba(0,0,0,.1)}.btn-circle:active{background:rgba(0,0,0,.3)}.btn-circle-size-default{font-size:1em}.btn-circle-size-small{height:25px;width:25px;min-height:25px;min-width:25px;max-height:25px;max-width:25px;font-size:12px}.btn-circle-size-large{height:48px;width:48px;min-height:48px;min-width:48px;max-height:48px;max-width:48px;font-size:20px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:3px solid rgba(234,8,53,.7)!important}.btn-alert:focus-visible{outline:2px solid #c7072d;outline-offset:2px}.btn-success:active{outline:3px solid rgba(56,193,83,.7)!important}.btn-success:focus-visible{outline:2px solid #30a547;outline-offset:2px}.btn-warning:active{outline:3px solid rgba(255,213,0,.7)!important}.btn-warning:focus-visible{outline:2px solid #dbb700;outline-offset:2px}.carousel{width:100%;position:relative;overflow:hidden;background:var(--el-bg);border-radius:15px;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img-wrapper{min-width:100%;height:100%;position:relative;overflow:hidden}.carousel-img{width:100%;height:100%;object-fit:cover;display:block}.carousel-title{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;padding:15px;font-size:20px;border-radius:0 0 15px 15px}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:9}.carousel-btn-left{left:15px}.carousel-btn-right{right:15px}.carousel-dots{position:absolute;left:0;right:0;bottom:15px;display:flex;justify-content:center;gap:15px;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.dialog{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-width:320px;max-width:90vw;max-height:calc(100vh - 32px);width:auto;margin:0;z-index:10001;display:flex;flex-direction:column;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.dialog-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{border-bottom:solid 1px var(--border-color);padding:15px;border-radius:15px 15px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:2px solid #038df2;outline-offset:2px}.dialog .box{box-shadow:none;border:solid 1px var(--border-color)!important}.dialog:focus{outline:0}.dialog-overlay{pointer-events:auto;z-index:10000}.dropdown{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;position:absolute;z-index:99;min-width:400px;max-width:600px;left:0;cursor:pointer;margin:0}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1d9efc!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex{display:flex;gap:15px}.flex-justify-start{justify-content:flex-start}.flex-justify-center{justify-content:center}.flex-justify-end{justify-content:flex-end}.flex-justify-between{justify-content:space-between}.flex-align-start{align-items:flex-start}.flex-align-center{align-items:center}.flex-align-end{align-items:flex-end}.flex-align-stretch{align-items:stretch}.flex-align-baseline{align-items:baseline}.flex[data-cols]{container-type:inline-size;flex-wrap:wrap;align-items:stretch}.flex[data-cols]>.flex-item{flex:0 0 calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));max-width:calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));box-sizing:border-box}@container (max-width:500px){.flex-item{flex:0 0 calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important;max-width:calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important}}@container (min-width:501px) and (max-width:900px){.flex-item{flex:0 0 calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important;max-width:calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important}}input:focus,select:focus,textarea:focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.input-inside,input,select,textarea{display:inline-block;padding:10px;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;margin-bottom:0!important}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px 6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.editable{display:inline-block;width:100%;min-height:1.4em;padding:2px 0;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0;margin-bottom:0!important}.editable:focus{background:var(--input-bg);outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#777;pointer-events:none}.editable:focus::before{content:''}.inline-elements .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.input-alert:focus{outline:3px solid rgba(234,8,53,.7)!important}.input-wrapper{position:relative}.input-reset-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.input-inside{padding:0 4px 0 0;height:auto;position:relative}.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-inside :first-child{border-radius:7.5px 0 0 7.5px}.input-inside :last-child{border-radius:0 7.5px 7.5px 0}.input-inside:focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside{position:relative}.input-inside .btn-circle{height:24px;width:24px}.input-focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-btns{position:absolute;right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#777;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside{height:auto}.input-inside:after,.input-inside:before{display:table;content:"";line-height:0}.input-inside:after{clear:both}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside input:focus,.input-inside select:focus{outline:0!important;border-color:transparent}.input-inside select{border:none;box-shadow:none;margin:0;padding:10px;color:#777;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.input-inside select:focus{background:#e2f1fb}input.disabled,input[disabled]{background-color:var(--el-bg-color);border:none;box-shadow:none;padding:4px 0!important}input:-moz-read-only,input:read-only{color:brown;border:none!important}input[type=checkbox],input[type=radio]{box-shadow:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}select{margin-top:0;color:var(--color)}textarea{resize:none;height:auto}label{display:block}label input,label select,label textarea{margin-bottom:0}fieldset{border:solid 1px var(--border-color);margin-bottom:15px;border-radius:7.5px}legend{color:#777;padding:0 5px}fieldset label{margin-bottom:15px}td label{margin-bottom:0}.form-inline:after,.form-inline:before{display:table;content:"";line-height:0}.form-inline:after{clear:both}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;content:"";line-height:0}.toolbar-group:after{clear:both}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #fff;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius:7.5px 0 0 7.5px}.toolbar-group button:last-child,.toolbar-group input:last-child,.toolbar-group label:last-child,.toolbar-group select:last-child,.toolbar-group textarea:last-child{border-radius:0 7.5px 7.5px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#777;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.swith-label{margin-left:5px}.slider{box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;cursor:pointer;left:0;position:absolute;right:1px;top:1px;transition:background-color .1s}.slider:before{border-radius:50%;left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;content:"";height:15px;position:absolute;transition:.1s}input:checked+.slider{background-color:#38c153}input:focus+.slider{box-shadow:0 0 1px #38c153}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#777}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;height:15px;width:15px;background-color:var(--border-color);box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;border-radius:50%}.cust-radio input:checked~.checkmark{background-color:#1d9efc}.checkmark:after{content:"";position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.code-editor{color:#777;font-family:monospace;font-size:12px;border:0;padding:0;width:100%}.code-editor:focus{outline:0!important}.information{border-radius:15px;padding:15px;margin-bottom:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1d9efc}.information-primary hr{border-bottom:solid 1px #1d9efc}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#ddffd4;color:#31a949}.information-success hr{border-bottom:solid 1px #38c153}.information-alert{background:#fcc5c5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge{cursor:default;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge-content{width:100%;display:flex;align-items:center;justify-content:center}.badge:empty{display:none}.badge .btn-circle{margin-left:5px}.badge-default{background-color:var(--btn-bg);color:#777}.badge.badge-primary{background-color:#1d9efc}.badge.badge-warning{color:var(--color);background-color:#ffd500}.badge.badge-success{background-color:#38c153}.badge.badge-alert{background-color:#ea0835}.badge{border-radius:30px;box-shadow:inset 0 1px 4px rgba(0,0,0,.1)}.badge-content{width:100%;display:flex;align-items:center;justify-content:center;padding:7px 18px}.badge-closable .badge-content{padding-right:0!important}.badge-small .badge-content{padding:2px 10px;font-size:12px;min-height:20px}.clear-list ul{margin:0;padding:0}.clear-list ul li{padding:0;list-style:none;line-height:1.5em}.clear-list.none li{margin:0}.clear-list.compact li{margin:0 0 7.5px 0}.clear-list.default li{margin:0 0 15px 0}.clear-list.plenty li{margin:0 0 22.5px 0}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;list-style:none}.loader-squares{display:flex;gap:8px;justify-content:center;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:15px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:first-child{animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}100%{transform:scale(1);background-color:#1895ff}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.navbar-header{background:#000;border-bottom:solid 3px #1d9efc;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;position:absolute;left:0;top:100%;min-width:160px;z-index:999;color:#fff!important;padding:7.5px 0 15px 0;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0 0 15px 15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:#fff;padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:rgba(255,255,255,.12);color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-menu-item.active,.navbar-submenu-item.active{background:rgba(255,255,255,.1)}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-wrapper{position:relative}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-icons .navbar-icon-btn.active{color:#1d9efc;opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.navbar-icon-area{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:99;width:1100px;max-width:calc(100vw - (15px * 2));box-sizing:border-box;background:rgba(0,0,0,.8);border-radius:0 0 15px 15px;padding:15px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-icon-area.open{display:block}.navbar-icon-area-content{display:flex;justify-content:center;width:100%}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;text-align:center;border-radius:15px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px;margin-bottom:15px}.row-item{box-sizing:border-box}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#ccc;top:50%;transform:translateY(-50%)}.list-scroller-btn-left{left:-15px}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#aaa 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;border-radius:15px;padding:15px;margin-bottom:15px;position:relative;overflow:hidden}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#fff;border-radius:15px;margin:auto;margin-bottom:15px;box-sizing:border-box;position:relative;min-width:500px;box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate;background:var(--el-bg)}.table thead td,.table thead th{background-color:var(--el-bg);border-bottom:solid 1px var(--border-color);color:#777;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#777!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#5e5e5e}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 15px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table td .btn,.table td .row,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table .underlined td,.table .underlined th{border-bottom:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#fcc5c5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#ddffd4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table textarea{margin-bottom:0}.tabs{display:flex;border-bottom:solid 1px var(--border-color)}.tabs .tab{padding:15px;margin:0;border:none;cursor:pointer;border:solid 1px transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:solid 1px var(--border-color);border-bottom:solid 1px #fff;color:#1d9efc;position:relative;z-index:9;background:#fff;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#919191;pointer-events:none}.tab-content{padding:15px;border:solid 1px var(--border-color);border-top:solid 1px transparent;border-radius:0 0 15px 15px;position:relative;z-index:1;background:#fff}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#fff!important;border-radius:15px;box-sizing:border-box;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}.thumb.thumb-bordered{border:solid 1px var(--border-color)}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{overflow:hidden;position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);border-radius:15px;color:#fff;padding:5px 15px;font-size:12px;z-index:9;left:50%;transform:translateX(-50%);display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;border-radius:15px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px 0}ul.tree ul.tree{margin-left:-23px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:3px 10px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 45px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;height:1.6em;width:15px;color:#fff;border-bottom:1px solid #646464;content:"";display:inline-block;left:0}ul.tree li:after{position:relative;top:-.3em;height:1.6em;width:15px;color:#fff;content:"";display:inline-block;left:-7px}.text-content{line-height:1.5}.text-size-small{font-size:12px}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.margin-both{margin:15px 0}.collapesed{margin:0}.separated{margin:15px 0}.color-default{color:var(--color)!important}.color-primary{color:#1d9efc!important}.color-success{color:#38c153!important}.color-alert{color:#ea0835!important}.color-warning{color:#ffd500!important}.color-active{color:#64fa00!important}.color-gray{color:#777!important}.bg-primary{background-color:#1d9efc!important;color:#fff}.bg-success{background-color:#38c153!important;color:#fff}.bg-alert{background-color:#ea0835!important;color:#fff}.bg-warning{background-color:#ffd500!important;color:#272729}.bg-default,.bg-gray{background-color:#777!important;color:#fff}.bg-active{background-color:#64fa00!important}.bg-alert .btn-circle svg,.bg-default .btn-circle svg,.bg-primary .btn-circle svg,.bg-success .btn-circle svg{color:#fff!important}.inline{display:inline-block;vertical-align:middle}.note{color:#777;font-size:12px;font-weight:400}.note a{color:#777;text-decoration:underline}.note a:hover{color:#1d9efc}.relative{position:relative}.absolute{position:absolute}.corner-btn{position:absolute;right:15px;top:15px}.center{text-align:center}.right{text-align:right}.left{text-align:left}.content{padding:15px}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.rounded{border-radius:15px}.bordered{border:solid 1px var(--border-color);border-radius:15px}.bordered-primary{border-color:#1d9efc}.border-top{border-top:solid 1px var(--border-color)}.border-bottom{border-bottom:solid 1px var(--border-color)}.overlay{background:var(--overlay-color);height:100%;left:0;position:fixed;top:0;transition:.2s;width:100%;z-index:99}.component-locker{background:var(--overlay-color);border-radius:15px;height:100%;left:0;position:absolute;top:0;transition:.2s;width:100%;z-index:9}.outline-primary{outline:1px dashed #1D9EFC}.outline-success{outline:1px dashed #38c153}.spacing-none{margin-bottom:0}.spacing-compact{margin-bottom:7.5px}.spacing-default,.spacing-normal{margin-bottom:15px}.spacing-plenty{margin-bottom:22.5px}.container-align-left .container-item{display:flex;justify-content:flex-start}.container-align-center .container-item{display:flex;justify-content:center}.container-align-right .container-item{display:flex;justify-content:flex-end}.container .container-item .container-align-left{display:flex;justify-content:flex-start}.container .container-item .container-align-center{display:flex;justify-content:center}.container .container-item .container-align-right{display:flex;justify-content:flex-end}.container-none .container-item{margin-bottom:0}.container-compact .container-item{margin-bottom:7.5px}.container-default .container-item,.container-normal .container-item{margin-bottom:15px}.container-plenty .container-item{margin-bottom:22.5px}.widget{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}.widget-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.wrapper{position:relative;margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside{width:820px}.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.66666667px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:500px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn{width:100%}.snackbar{width:100%}.expanded-phone{width:100%}.dialog{width:95%!important}.hide-phone{display:none!important}.show-phone{display:block!important}}@media (min-width:501px) and (max-width:900px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:900px){.navbar-menu{flex-direction:column;display:none;background:rgba(0,0,0,.88);position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.24);color:#fff}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-menu-item>a{color:#fff;padding:16px 20px}.navbar-menu-item:hover>.navbar-submenu{display:none}.navbar-menu-item.open>.navbar-submenu{display:block}.navbar-submenu{position:static!important;min-width:100%!important;border:none!important;border-radius:0!important}.navbar-submenu a{color:#fff!important;padding:12px 20px 12px 38px!important}.navbar-submenu-item{color:#fff}.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-icons{margin-left:auto}}
+body{background:var(--body-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;font-size:14px;font-weight:300;line-height:1.5em}body,html{box-sizing:border-box;height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px 0;padding:0}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px;font-weight:500}small{font-size:12px}b,strong{font-weight:500}a,button.anchor{color:#1d9efc;text-decoration:none;background:0 0;border:none;cursor:pointer;padding:0}a:hover,button.anchor:hover{transition:color .2s ease;color:#0390f7}button{font-size:14px}p{margin:0 0 15px}code,pre{font-family:monospace;font-size:14px;color:#777}pre{background:var(--body-bg);border-radius:15px;border:solid 1px var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}hr{border:none;border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.66666667px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--border-radius:15px;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF;--primary-color:#1D9EFC;--success-color:#38c153;--alert-color:#ea0835;--warning-color:#ffd500;--active-color:#64FA00;--color-gray:#777}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:relative;margin-bottom:15px}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#777;background:#fff;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-footer .row,.box .box-toolbar .row{margin-bottom:0}.box .box-toolbar .form-element{margin-bottom:0}.box .box-top-btn{position:absolute;right:10px;top:10px}.box .box{box-shadow:none;border:solid 1px var(--border-color)}button:focus-visible{outline:1px auto #1D9EFC}.btn-circle:active,.btn:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:focus-visible,.btn:focus-visible{outline:2px solid #038df2;outline-offset:2px}.btn{border:none;border-radius:7.5px;box-sizing:border-box;display:inline-block;font-size:14px;margin:0;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;padding:12px 20px;transition:background .2s cubic-bezier(.4, 0, .2, 1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn.active{box-shadow:inset 0 3px 5px rgba(0,0,0,.125);background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:solid 1px transparent;background:0 0;color:#1d9efc;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-outline-default{border:solid 1px #919191;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ecedef}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1d9efc;border:solid 1px #1d9efc;color:#fff}.btn-outline-primary{border:solid 1px #1d9efc;color:#1d9efc}.btn-link-primary{color:#1d9efc}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#fff;background:#038aed}.btn-normal-alert{background:#ea0835;border:solid 1px #ea0835;color:#fff}.btn-outline-alert{border:solid 1px #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#fcc5c5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#fff;background:#c3072c}.btn-normal-success{background:#38c153;border:solid 1px #38c153;color:#fff}.btn-outline-success{border:solid 1px #38c153;color:#38c153}.btn-link-success{color:#38c153}.btn-link-success:hover{background:#ddffd4}.btn-normal-success:hover,.btn-outline-success:hover{color:#fff;background:#2fa145}.btn-normal-warning{background:#ffd500;border:solid 1px #ffd500}.btn-outline-warning{border:solid 1px #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:35px;width:35px;min-height:35px;min-width:35px;max-height:35px;max-width:35px;aspect-ratio:1/1;margin:0;padding:0;overflow:hidden;background:rgba(0,0,0,.05)}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:hover{background:rgba(0,0,0,.1)}.btn-circle:active{background:rgba(0,0,0,.3)}.btn-circle-size-default{font-size:1em}.btn-circle-size-small{height:25px;width:25px;min-height:25px;min-width:25px;max-height:25px;max-width:25px;font-size:12px}.btn-circle-size-large{height:48px;width:48px;min-height:48px;min-width:48px;max-height:48px;max-width:48px;font-size:20px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:3px solid rgba(234,8,53,.7)!important}.btn-alert:focus-visible{outline:2px solid #c7072d;outline-offset:2px}.btn-success:active{outline:3px solid rgba(56,193,83,.7)!important}.btn-success:focus-visible{outline:2px solid #30a547;outline-offset:2px}.btn-warning:active{outline:3px solid rgba(255,213,0,.7)!important}.btn-warning:focus-visible{outline:2px solid #dbb700;outline-offset:2px}.carousel{width:100%;position:relative;overflow:hidden;background:var(--el-bg);border-radius:15px;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img-wrapper{min-width:100%;height:100%;position:relative;overflow:hidden}.carousel-img{width:100%;height:100%;object-fit:cover;display:block}.carousel-title{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;padding:15px;font-size:20px;border-radius:0 0 15px 15px}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:9}.carousel-btn-left{left:15px}.carousel-btn-right{right:15px}.carousel-dots{position:absolute;left:0;right:0;bottom:15px;display:flex;justify-content:center;gap:15px;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.drawer{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:fixed;z-index:10001;display:flex;flex-direction:column;box-shadow:0 5px 30px rgba(0,0,0,.35);max-width:100vw;max-height:100vh}.drawer-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.drawer-content{flex:1;overflow-y:auto;padding:15px}.drawer-close{position:absolute;top:10px;right:15px;z-index:2}.drawer-right{right:0;top:0;width:min(420px,92vw);height:100vh;border-radius:0;animation:drawer-slide-in-right .2s ease-out}.drawer-left{left:0;top:0;width:min(420px,92vw);height:100vh;border-radius:0;animation:drawer-slide-in-left .2s ease-out}.drawer-top{left:0;top:0;width:100vw;height:min(360px,92vh);border-radius:0 0 15px 15px;animation:drawer-slide-in-top .2s ease-out}.drawer-bottom{left:0;bottom:0;width:100vw;height:min(360px,92vh);border-radius:15px 15px 0 0;animation:drawer-slide-in-bottom .2s ease-out}.drawer-overlay{pointer-events:auto;z-index:10000}@keyframes drawer-slide-in-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-slide-in-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}.dialog{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-width:320px;max-width:90vw;max-height:calc(100vh - 32px);width:auto;margin:0;z-index:10001;display:flex;flex-direction:column;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.dialog-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{border-bottom:solid 1px var(--border-color);padding:15px;border-radius:15px 15px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:2px solid #038df2;outline-offset:2px}.dialog .box{box-shadow:none;border:solid 1px var(--border-color)!important}.dialog:focus{outline:0}.dialog-overlay{pointer-events:auto;z-index:10000}.dropdown{background:var(--el-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;position:absolute;z-index:99;min-width:400px;max-width:600px;left:0;cursor:pointer;margin:0}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1d9efc!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex{display:flex;gap:15px}.flex-justify-start{justify-content:flex-start}.flex-justify-center{justify-content:center}.flex-justify-end{justify-content:flex-end}.flex-justify-between{justify-content:space-between}.flex-align-start{align-items:flex-start}.flex-align-center{align-items:center}.flex-align-end{align-items:flex-end}.flex-align-stretch{align-items:stretch}.flex-align-baseline{align-items:baseline}.flex[data-cols]{container-type:inline-size;flex-wrap:wrap;align-items:stretch}.flex[data-cols]>.flex-item{flex:0 0 calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));max-width:calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));box-sizing:border-box}@container (max-width:500px){.flex-item{flex:0 0 calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important;max-width:calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important}}@container (min-width:501px) and (max-width:900px){.flex-item{flex:0 0 calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important;max-width:calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important}}input:focus,select:focus,textarea:focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.input-inside,input,select,textarea{display:inline-block;padding:10px;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;margin-bottom:0!important}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px 6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.editable{display:inline-block;width:100%;min-height:1.4em;padding:2px 0;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0;margin-bottom:0!important}.editable:focus{background:var(--input-bg);outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#777;pointer-events:none}.editable:focus::before{content:''}.inline-elements .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.input-alert:focus{outline:3px solid rgba(234,8,53,.7)!important}.input-wrapper{position:relative}.input-reset-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.input-inside{padding:0 4px 0 0;height:auto;position:relative}.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-inside :first-child{border-radius:7.5px 0 0 7.5px}.input-inside :last-child{border-radius:0 7.5px 7.5px 0}.input-inside:focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside{position:relative}.input-inside .btn-circle{height:24px;width:24px}.input-focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-btns{position:absolute;right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#777;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside{height:auto}.input-inside:after,.input-inside:before{display:table;content:"";line-height:0}.input-inside:after{clear:both}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside input:focus,.input-inside select:focus{outline:0!important;border-color:transparent}.input-inside select{border:none;box-shadow:none;margin:0;padding:10px;color:#777;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.input-inside select:focus{background:#e2f1fb}input.disabled,input[disabled]{background-color:var(--el-bg-color);border:none;box-shadow:none;padding:4px 0!important}input:-moz-read-only,input:read-only{color:brown;border:none!important}input[type=checkbox],input[type=radio]{box-shadow:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}select{margin-top:0;color:var(--color)}textarea{resize:none;height:auto}label{display:block}label input,label select,label textarea{margin-bottom:0}fieldset{border:solid 1px var(--border-color);margin-bottom:15px;border-radius:7.5px}legend{color:#777;padding:0 5px}fieldset label{margin-bottom:15px}td label{margin-bottom:0}.form-inline:after,.form-inline:before{display:table;content:"";line-height:0}.form-inline:after{clear:both}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;content:"";line-height:0}.toolbar-group:after{clear:both}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #fff;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius:7.5px 0 0 7.5px}.toolbar-group button:last-child,.toolbar-group input:last-child,.toolbar-group label:last-child,.toolbar-group select:last-child,.toolbar-group textarea:last-child{border-radius:0 7.5px 7.5px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#777;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.swith-label{margin-left:5px}.slider{box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;cursor:pointer;left:0;position:absolute;right:1px;top:1px;transition:background-color .1s}.slider:before{border-radius:50%;left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;content:"";height:15px;position:absolute;transition:.1s}input:checked+.slider{background-color:#38c153}input:focus+.slider{box-shadow:0 0 1px #38c153}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#777}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;height:15px;width:15px;background-color:var(--border-color);box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;border-radius:50%}.cust-radio input:checked~.checkmark{background-color:#1d9efc}.checkmark:after{content:"";position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.code-editor{color:#777;font-family:monospace;font-size:12px;border:0;padding:0;width:100%}.code-editor:focus{outline:0!important}.information{border-radius:15px;padding:15px;margin-bottom:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1d9efc}.information-primary hr{border-bottom:solid 1px #1d9efc}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#ddffd4;color:#31a949}.information-success hr{border-bottom:solid 1px #38c153}.information-alert{background:#fcc5c5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge{cursor:default;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge-content{width:100%;display:flex;align-items:center;justify-content:center}.badge:empty{display:none}.badge .btn-circle{margin-left:5px}.badge-default{background-color:var(--btn-bg);color:#777}.badge.badge-primary{background-color:#1d9efc}.badge.badge-warning{color:var(--color);background-color:#ffd500}.badge.badge-success{background-color:#38c153}.badge.badge-alert{background-color:#ea0835}.badge{border-radius:30px;box-shadow:inset 0 1px 4px rgba(0,0,0,.1)}.badge-content{width:100%;display:flex;align-items:center;justify-content:center;padding:7px 18px}.badge-closable .badge-content{padding-right:0!important}.badge-small .badge-content{padding:2px 10px;font-size:12px;min-height:20px}.clear-list ul{margin:0;padding:0}.clear-list ul li{padding:0;list-style:none;line-height:1.5em}.clear-list.none li{margin:0}.clear-list.compact li{margin:0 0 7.5px 0}.clear-list.default li{margin:0 0 15px 0}.clear-list.plenty li{margin:0 0 22.5px 0}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;list-style:none}.loader-squares{display:flex;gap:8px;justify-content:center;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:15px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:first-child{animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}100%{transform:scale(1);background-color:#1895ff}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.navbar-header{background:#000;border-bottom:solid 3px #1d9efc;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;position:absolute;left:0;top:100%;min-width:160px;z-index:999;color:#fff!important;padding:7.5px 0 15px 0;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0 0 15px 15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:#fff;padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:rgba(255,255,255,.12);color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-menu-item.active,.navbar-submenu-item.active{background:rgba(255,255,255,.1)}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-wrapper{position:relative}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-icons .navbar-icon-btn.active{color:#1d9efc;opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.navbar-icon-area{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:99;width:1100px;max-width:calc(100vw - (15px * 2));box-sizing:border-box;background:rgba(0,0,0,.8);border-radius:0 0 15px 15px;padding:15px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-icon-area.open{display:block}.navbar-icon-area-content{display:flex;justify-content:center;width:100%}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;text-align:center;border-radius:15px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px;margin-bottom:15px}.row-item{box-sizing:border-box}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#ccc;top:50%;transform:translateY(-50%)}.list-scroller-btn-left{left:-15px}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#aaa 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;border-radius:15px;padding:15px;margin-bottom:15px;position:relative;overflow:hidden}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#fff;border-radius:15px;margin:auto;margin-bottom:15px;box-sizing:border-box;position:relative;min-width:500px;box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate;background:var(--el-bg)}.table thead td,.table thead th{background-color:var(--el-bg);border-bottom:solid 1px var(--border-color);color:#777;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#777!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#5e5e5e}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 15px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table td .btn,.table td .row,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table .underlined td,.table .underlined th{border-bottom:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#fcc5c5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#ddffd4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table textarea{margin-bottom:0}.html-editor .table{table-layout:fixed;width:100%;border-collapse:collapse;border:1px dashed rgba(119,119,119,.4)}.html-editor .table td,.html-editor .table th{border:1px dashed rgba(119,119,119,.4);min-width:40px}.tabs{display:flex;border-bottom:solid 1px var(--border-color)}.tabs .tab{padding:15px;margin:0;border:none;cursor:pointer;border:solid 1px transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:solid 1px var(--border-color);border-bottom:solid 1px #fff;color:#1d9efc;position:relative;z-index:9;background:#fff;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#919191;pointer-events:none}.tab-content{padding:15px;border:solid 1px var(--border-color);border-top:solid 1px transparent;border-radius:0 0 15px 15px;position:relative;z-index:1;background:#fff}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#fff!important;border-radius:15px;box-sizing:border-box;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}.thumb.thumb-bordered{border:solid 1px var(--border-color)}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{overflow:hidden;position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);border-radius:15px;color:#fff;padding:5px 15px;font-size:12px;z-index:9;left:50%;transform:translateX(-50%);display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;border-radius:15px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px 0}ul.tree ul.tree{margin-left:-23px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:3px 10px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 45px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;height:1.6em;width:15px;color:#fff;border-bottom:1px solid #646464;content:"";display:inline-block;left:0}ul.tree li:after{position:relative;top:-.3em;height:1.6em;width:15px;color:#fff;content:"";display:inline-block;left:-7px}.text-content{line-height:1.5}.text-size-small{font-size:12px}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.margin-both{margin:15px 0}.collapesed{margin:0}.separated{margin:15px 0}.color-default{color:var(--color)!important}.color-primary{color:#1d9efc!important}.color-success{color:#38c153!important}.color-alert{color:#ea0835!important}.color-warning{color:#ffd500!important}.color-active{color:#64fa00!important}.color-gray{color:#777!important}.bg-primary{background-color:#1d9efc!important;color:#fff}.bg-success{background-color:#38c153!important;color:#fff}.bg-alert{background-color:#ea0835!important;color:#fff}.bg-warning{background-color:#ffd500!important;color:#272729}.bg-default,.bg-gray{background-color:#777!important;color:#fff}.bg-active{background-color:#64fa00!important}.bg-alert .btn-circle svg,.bg-default .btn-circle svg,.bg-primary .btn-circle svg,.bg-success .btn-circle svg{color:#fff!important}.inline{display:inline-block;vertical-align:middle}.note{color:#777;font-size:12px;font-weight:400}.note a{color:#777;text-decoration:underline}.note a:hover{color:#1d9efc}.relative{position:relative}.absolute{position:absolute}.corner-btn{position:absolute;right:15px;top:15px}.center{text-align:center}.right{text-align:right}.left{text-align:left}.content{padding:15px}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.rounded{border-radius:15px}.bordered{border:solid 1px var(--border-color);border-radius:15px}.bordered-primary{border-color:#1d9efc}.border-top{border-top:solid 1px var(--border-color)}.border-bottom{border-bottom:solid 1px var(--border-color)}.overlay{background:var(--overlay-color);height:100%;left:0;position:fixed;top:0;transition:.2s;width:100%;z-index:99}.component-locker{background:var(--overlay-color);border-radius:15px;height:100%;left:0;position:absolute;top:0;transition:.2s;width:100%;z-index:9}.outline-primary{outline:1px dashed #1D9EFC}.outline-success{outline:1px dashed #38c153}.spacing-none{margin-bottom:0}.spacing-compact{margin-bottom:7.5px}.spacing-default,.spacing-normal{margin-bottom:15px}.spacing-plenty{margin-bottom:22.5px}.container-align-left .container-item{display:flex;justify-content:flex-start}.container-align-center .container-item{display:flex;justify-content:center}.container-align-right .container-item{display:flex;justify-content:flex-end}.container .container-item .container-align-left{display:flex;justify-content:flex-start}.container .container-item .container-align-center{display:flex;justify-content:center}.container .container-item .container-align-right{display:flex;justify-content:flex-end}.container-none .container-item{margin-bottom:0}.container-compact .container-item{margin-bottom:7.5px}.container-default .container-item,.container-normal .container-item{margin-bottom:15px}.container-plenty .container-item{margin-bottom:22.5px}.widget{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#fff;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}.widget-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.wrapper{position:relative;margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside{width:820px}.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.66666667px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:500px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn{width:100%}.snackbar{width:100%}.expanded-phone{width:100%}.dialog{width:95%!important}.hide-phone{display:none!important}.show-phone{display:block!important}}@media (min-width:501px) and (max-width:900px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:900px){.navbar-menu{flex-direction:column;display:none;background:rgba(0,0,0,.88);position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.24);color:#fff}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-menu-item>a{color:#fff;padding:16px 20px}.navbar-menu-item:hover>.navbar-submenu{display:none}.navbar-menu-item.open>.navbar-submenu{display:block}.navbar-submenu{position:static!important;min-width:100%!important;border:none!important;border-radius:0!important}.navbar-submenu a{color:#fff!important;padding:12px 20px 12px 38px!important}.navbar-submenu-item{color:#fff}.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-icons{margin-left:auto}}

package/components/dialog/ConfirmationDialog.js

@@ -13,6 +13,8 @@ var _flex = require("../flex");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var ConfirmationDialog = exports.ConfirmationDialog = function ConfirmationDialog(_ref) {
   var children = _ref.children,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? true : _ref$open,
     title = _ref.title,
     icon = _ref.icon,
     color = _ref.color,
@@ -25,6 +27,7 @@ var ConfirmationDialog = exports.ConfirmationDialog = function ConfirmationDialo
     _ref$textCancel = _ref.textCancel,
     textCancel = _ref$textCancel === void 0 ? 'Cancelar' : _ref$textCancel;
   return /*#__PURE__*/_react["default"].createElement(_Dialog.Dialog, {
+    open: open,
     width: width,
     height: height,
     color: color,

package/components/dialog/Dialog.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _util = require("../util");
 var _button = require("../button");
+var _useOverlayLayer = require("../../hooks/useOverlayLayer");
 var _excluded = ["children", "className", "spacing"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -37,6 +38,7 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
     _ref$closeOnEscape = _ref.closeOnEscape,
     closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape;
   var dialogRef = (0, _react.useRef)(null);
+  var zIndex = (0, _useOverlayLayer.useOverlayLayer)(open);
   (0, _react.useEffect)(function () {
     if (!open || !closeOnEscape) return undefined;
     var handleKeyDown = function handleKeyDown(event) {
@@ -82,14 +84,18 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
       isLoading: isLoading
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "overlay dialog-overlay"
+    className: "overlay dialog-overlay",
+    style: {
+      zIndex: zIndex
+    }
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "dialog",
     tabIndex: -1,
     ref: dialogRef,
     style: {
       width: width,
-      height: height
+      height: height,
+      zIndex: zIndex + 1
     },
     role: "dialog",
     "aria-modal": "true"

package/components/drawer/Drawer.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Drawer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _button = require("../button");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _useOutsideClick2 = require("../../hooks/useOutsideClick");
+var _useOverlayLayer = require("../../hooks/useOverlayLayer");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Drawer = exports.Drawer = function Drawer(_ref) {
+  var children = _ref.children,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'right' : _ref$position,
+    onClose = _ref.onClose,
+    width = _ref.width,
+    height = _ref.height,
+    className = _ref.className,
+    _ref$closeOnEscape = _ref.closeOnEscape,
+    closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape;
+  var zIndex = (0, _useOverlayLayer.useOverlayLayer)(open);
+  var onClickOutside = (0, _react.useCallback)(function () {
+    if (!open) return;
+    onClose && onClose();
+  }, [open, onClose]);
+  var _useOutsideClick = (0, _useOutsideClick2.useOutsideClick)({
+      onClickOutside: onClickOutside
+    }),
+    wrapperRef = _useOutsideClick.wrapperRef;
+  (0, _react.useEffect)(function () {
+    if (!open || !closeOnEscape) {
+      return undefined;
+    }
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        onClose && onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, closeOnEscape, onClose]);
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlay drawer-overlay",
+    style: {
+      zIndex: zIndex
+    }
+  }), /*#__PURE__*/_react["default"].createElement("aside", {
+    ref: wrapperRef,
+    className: "drawer drawer-".concat(position, " ").concat(className ? className : ''),
+    style: {
+      width: width,
+      height: height,
+      zIndex: zIndex + 1
+    },
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "drawer-close"
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    icon: _freeSolidSvgIcons.faTimes,
+    onClick: onClose,
+    "aria-expanded": open,
+    "aria-label": open ? 'Close drawer' : 'Open drawer'
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "drawer-content"
+  }, children)));
+};
+Drawer.propTypes = {
+  children: _propTypes["default"].any,
+  open: _propTypes["default"].bool,
+  position: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  className: _propTypes["default"].string,
+  closeOnEscape: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func
+};
+var _default = exports["default"] = Drawer;

package/components/drawer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Drawer = require("./Drawer");
+Object.keys(_Drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Drawer[key];
+    }
+  });
+});

package/components/editor/HTMLEditor.js

@@ -11,8 +11,14 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _flex = require("../flex");
 var _button = require("../button");
+var _dialog = require("../dialog");
+var _forms = require("../forms");
+var _excluded = ["icon", "title", "onClick", "active"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -27,6 +33,8 @@ var HTMLEditor = function HTMLEditor(_ref) {
     height = _ref$height === void 0 ? 200 : _ref$height,
     onChange = _ref.onChange;
   var editorRef = (0, _react.useRef)(null);
+  var selectionRef = (0, _react.useRef)(null);
+  var currentLinkRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocuded = _useState2[0],
@@ -39,7 +47,50 @@ var HTMLEditor = function HTMLEditor(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     showCode = _useState6[0],
     setShowCode = _useState6[1]; // Nuevo estado
-
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showLinkDialog = _useState8[0],
+    setShowLinkDialog = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    showTableDialog = _useState0[0],
+    setShowTableDialog = _useState0[1];
+  var _useState1 = (0, _react.useState)(''),
+    _useState10 = _slicedToArray(_useState1, 2),
+    linkUrl = _useState10[0],
+    setLinkUrl = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    linkText = _useState12[0],
+    setLinkText = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    openInNewWindow = _useState14[0],
+    setOpenInNewWindow = _useState14[1];
+  var _useState15 = (0, _react.useState)(2),
+    _useState16 = _slicedToArray(_useState15, 2),
+    tableRows = _useState16[0],
+    setTableRows = _useState16[1];
+  var _useState17 = (0, _react.useState)(2),
+    _useState18 = _slicedToArray(_useState17, 2),
+    tableCols = _useState18[0],
+    setTableCols = _useState18[1];
+  var _useState19 = (0, _react.useState)({
+      bold: false,
+      italic: false,
+      h1: false,
+      h2: false,
+      h3: false,
+      orderedList: false,
+      unorderedList: false,
+      link: false
+    }),
+    _useState20 = _slicedToArray(_useState19, 2),
+    toolbarState = _useState20[0],
+    setToolbarState = _useState20[1];
+  var stopToolbarMouseDown = function stopToolbarMouseDown(event) {
+    event.preventDefault();
+  };
   (0, _react.useEffect)(function () {
     if (!showCode && editorRef.current) {
       editorRef.current.innerHTML = html;
@@ -50,23 +101,400 @@ var HTMLEditor = function HTMLEditor(_ref) {
     var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     document.execCommand(command, false, value);
     setHtml(editorRef.current.innerHTML);
+    updateToolbarState();
+  };
+  var normalizeBlockTags = function normalizeBlockTags() {
+    if (!editorRef.current) {
+      return;
+    }
+    var blocks = editorRef.current.querySelectorAll(':scope > div');
+    blocks.forEach(function (block) {
+      var paragraph = document.createElement('p');
+      paragraph.innerHTML = block.innerHTML || '<br>';
+      block.replaceWith(paragraph);
+    });
+  };
+  var buildTableHtml = function buildTableHtml(rows, cols) {
+    var width = "".concat(100 / cols, "%");
+    var columns = Array.from({
+      length: cols
+    }, function () {
+      return "<col style=\"width: ".concat(width, ";\">");
+    }).join('');
+    var bodyRows = Array.from({
+      length: rows
+    }, function () {
+      var cells = Array.from({
+        length: cols
+      }, function () {
+        return '<td><br></td>';
+      }).join('');
+      return "<tr>".concat(cells, "</tr>");
+    }).join('');
+    return "<table class=\"table expanded\"><colgroup>".concat(columns, "</colgroup><tbody>").concat(bodyRows, "</tbody></table>");
+  };
+  var _stripBoldFromNode = function stripBoldFromNode(node) {
+    var _element$style;
+    if (!node || node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+      return;
+    }
+    var children = Array.from(node.childNodes);
+    children.forEach(_stripBoldFromNode);
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    var element = node;
+    var tagName = element.tagName;
+    if (tagName === 'B' || tagName === 'STRONG') {
+      var parent = element.parentNode;
+      if (!parent) {
+        return;
+      }
+      while (element.firstChild) {
+        parent.insertBefore(element.firstChild, element);
+      }
+      parent.removeChild(element);
+      return;
+    }
+    var weight = ((_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.fontWeight) || '';
+    var numericWeight = Number.parseInt(weight, 10);
+    if (weight === 'bold' || weight === 'bolder' || !Number.isNaN(numericWeight) && numericWeight >= 600) {
+      var _element$getAttribute;
+      element.style.fontWeight = '';
+      if (!((_element$getAttribute = element.getAttribute('style')) !== null && _element$getAttribute !== void 0 && _element$getAttribute.trim())) {
+        element.removeAttribute('style');
+      }
+    }
+  };
+  var getSelectionRange = function getSelectionRange() {
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return null;
+    }
+    var range = selection.getRangeAt(0);
+    if (!editorRef.current || !editorRef.current.contains(range.commonAncestorContainer)) {
+      return null;
+    }
+    return range;
+  };
+  var syncHtml = function syncHtml() {
+    if (!editorRef.current) return;
+    normalizeBlockTags();
+    var value = editorRef.current.innerHTML;
+    setHtml(value);
+    if (onChange) onChange(value);
+  };
+  var getBlockElementFromNode = (0, _react.useCallback)(function (node) {
+    var currentNode = node;
+    while (currentNode && currentNode !== editorRef.current) {
+      if (currentNode.nodeType === Node.ELEMENT_NODE) {
+        var tagName = currentNode.tagName;
+        if (['H1', 'H2', 'H3', 'LI', 'P', 'DIV'].includes(tagName)) {
+          return currentNode;
+        }
+      }
+      currentNode = currentNode.parentNode;
+    }
+    return null;
+  }, []);
+  var getAnchorElement = (0, _react.useCallback)(function (node) {
+    var currentNode = node;
+    while (currentNode && currentNode !== editorRef.current) {
+      if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.tagName === 'A') {
+        return currentNode;
+      }
+      currentNode = currentNode.parentNode;
+    }
+    return null;
+  }, []);
+  var hasFormattingInNodeTree = (0, _react.useCallback)(function (node, _ref2) {
+    var _ref2$tags = _ref2.tags,
+      tags = _ref2$tags === void 0 ? [] : _ref2$tags,
+      styleCheck = _ref2.styleCheck;
+    var currentNode = node;
+    while (currentNode && currentNode !== editorRef.current) {
+      if (currentNode.nodeType === Node.ELEMENT_NODE) {
+        var tagName = currentNode.tagName;
+        if (tags.includes(tagName)) {
+          return true;
+        }
+        if (styleCheck && styleCheck(currentNode)) {
+          return true;
+        }
+      }
+      currentNode = currentNode.parentNode;
+    }
+    return false;
+  }, []);
+  var getInlineFormatState = (0, _react.useCallback)(function (range, selection) {
+    var nodesToCheck = [selection === null || selection === void 0 ? void 0 : selection.anchorNode, range.startContainer, range.endContainer, range.commonAncestorContainer].filter(Boolean);
+    var hasBold = nodesToCheck.some(function (node) {
+      return hasFormattingInNodeTree(node, {
+        tags: ['B', 'STRONG'],
+        styleCheck: function styleCheck(element) {
+          var _element$style2;
+          var weight = ((_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.fontWeight) || '';
+          if (weight === 'bold' || weight === 'bolder') {
+            return true;
+          }
+          var numericWeight = Number.parseInt(weight, 10);
+          return !Number.isNaN(numericWeight) && numericWeight >= 600;
+        }
+      });
+    });
+    var hasItalic = nodesToCheck.some(function (node) {
+      return hasFormattingInNodeTree(node, {
+        tags: ['I', 'EM'],
+        styleCheck: function styleCheck(element) {
+          var _element$style3;
+          return ((_element$style3 = element.style) === null || _element$style3 === void 0 ? void 0 : _element$style3.fontStyle) === 'italic';
+        }
+      });
+    });
+    return {
+      bold: hasBold,
+      italic: hasItalic
+    };
+  }, [hasFormattingInNodeTree]);
+  var getToolbarState = (0, _react.useCallback)(function () {
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return {
+        bold: false,
+        italic: false,
+        h1: false,
+        h2: false,
+        h3: false,
+        orderedList: false,
+        unorderedList: false,
+        link: false
+      };
+    }
+    var range = selection.getRangeAt(0);
+    if (!editorRef.current || !editorRef.current.contains(range.commonAncestorContainer)) {
+      return {
+        bold: false,
+        italic: false,
+        h1: false,
+        h2: false,
+        h3: false,
+        orderedList: false,
+        unorderedList: false,
+        link: false
+      };
+    }
+    var anchorNode = selection.anchorNode || range.startContainer;
+    var blockElement = getBlockElementFromNode(anchorNode);
+    var anchorElement = getAnchorElement(anchorNode) || getAnchorElement(range.commonAncestorContainer);
+    var listElement = (blockElement === null || blockElement === void 0 ? void 0 : blockElement.tagName) === 'LI' ? blockElement.parentElement : null;
+    var inlineFormatState = getInlineFormatState(range, selection);
+    return {
+      bold: document.queryCommandState('bold') || inlineFormatState.bold,
+      italic: document.queryCommandState('italic') || inlineFormatState.italic,
+      h1: (blockElement === null || blockElement === void 0 ? void 0 : blockElement.tagName) === 'H1',
+      h2: (blockElement === null || blockElement === void 0 ? void 0 : blockElement.tagName) === 'H2',
+      h3: (blockElement === null || blockElement === void 0 ? void 0 : blockElement.tagName) === 'H3',
+      orderedList: (listElement === null || listElement === void 0 ? void 0 : listElement.tagName) === 'OL' || document.queryCommandState('insertOrderedList'),
+      unorderedList: (listElement === null || listElement === void 0 ? void 0 : listElement.tagName) === 'UL' || document.queryCommandState('insertUnorderedList'),
+      link: Boolean(anchorElement)
+    };
+  }, [getAnchorElement, getBlockElementFromNode, getInlineFormatState]);
+  var updateToolbarState = (0, _react.useCallback)(function () {
+    setToolbarState(getToolbarState());
+  }, [getToolbarState]);
+  var restoreSelection = function restoreSelection() {
+    var selection = window.getSelection();
+    var savedRange = selectionRef.current;
+    if (!selection || !savedRange) {
+      return null;
+    }
+    selection.removeAllRanges();
+    selection.addRange(savedRange);
+    return savedRange;
   };
   var handleCreateLink = function handleCreateLink() {
-    var url = window.prompt('Ingrese la URL del enlace:');
-    if (url) {
-      execCommand('createLink', url);
+    var range = getSelectionRange();
+    if (!range) {
+      return;
+    }
+    var selection = window.getSelection();
+    var selectedText = (selection === null || selection === void 0 ? void 0 : selection.toString().trim()) || '';
+    var anchor = getAnchorElement(range.startContainer) || getAnchorElement(range.endContainer);
+    selectionRef.current = range.cloneRange();
+    currentLinkRef.current = anchor;
+    setLinkUrl((anchor === null || anchor === void 0 ? void 0 : anchor.getAttribute('href')) || '');
+    setLinkText((anchor === null || anchor === void 0 ? void 0 : anchor.textContent) || selectedText);
+    setOpenInNewWindow((anchor === null || anchor === void 0 ? void 0 : anchor.target) === '_blank');
+    setShowLinkDialog(true);
+  };
+  var handleCreateTable = function handleCreateTable() {
+    var range = getSelectionRange();
+    if (!range) {
+      return;
+    }
+    selectionRef.current = range.cloneRange();
+    setTableRows(2);
+    setTableCols(2);
+    setShowTableDialog(true);
+  };
+  var toggleHeading = function toggleHeading(tagName) {
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+    var range = selection.getRangeAt(0);
+    if (!editorRef.current || !editorRef.current.contains(range.commonAncestorContainer)) {
+      return;
+    }
+    var currentBlock = getBlockElementFromNode(selection.anchorNode || range.startContainer);
+    var nextBlock = (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.tagName) === tagName.toUpperCase() ? 'p' : tagName;
+    document.execCommand('formatBlock', false, "<".concat(nextBlock, ">"));
+    setHtml(editorRef.current.innerHTML);
+    updateToolbarState();
+  };
+  var toggleBold = function toggleBold() {
+    var range = getSelectionRange();
+    if (!range) {
+      return;
+    }
+
+    // If bold is not currently active (or caret only), keep native behavior.
+    if (!toolbarState.bold || range.collapsed) {
+      execCommand('bold');
+      return;
+    }
+
+    // Fallback: remove only bold markup from selected fragment.
+    var fragment = range.extractContents();
+    var insertedNodes = Array.from(fragment.childNodes);
+    _stripBoldFromNode(fragment);
+    range.insertNode(fragment);
+    if (insertedNodes.length > 0) {
+      var selection = window.getSelection();
+      var newRange = document.createRange();
+      newRange.setStartBefore(insertedNodes[0]);
+      newRange.setEndAfter(insertedNodes[insertedNodes.length - 1]);
+      selection === null || selection === void 0 || selection.removeAllRanges();
+      selection === null || selection === void 0 || selection.addRange(newRange);
+    }
+    syncHtml();
+    updateToolbarState();
+  };
+  var closeLinkDialog = function closeLinkDialog() {
+    setShowLinkDialog(false);
+    selectionRef.current = null;
+    currentLinkRef.current = null;
+  };
+  var closeTableDialog = function closeTableDialog() {
+    setShowTableDialog(false);
+    selectionRef.current = null;
+  };
+  var applyLink = function applyLink() {
+    var url = linkUrl.trim();
+    var text = linkText.trim();
+    if (!url) {
+      return;
+    }
+    var savedRange = restoreSelection();
+    if (!savedRange || !editorRef.current) {
+      closeLinkDialog();
+      return;
+    }
+    var selection = window.getSelection();
+    var selectedText = (selection === null || selection === void 0 ? void 0 : selection.toString().trim()) || '';
+    var resolvedText = text || selectedText || url;
+    var existingLink = currentLinkRef.current && editorRef.current.contains(currentLinkRef.current) ? currentLinkRef.current : null;
+    if (existingLink) {
+      existingLink.setAttribute('href', url);
+      if (openInNewWindow) {
+        existingLink.setAttribute('target', '_blank');
+        existingLink.setAttribute('rel', 'noopener noreferrer');
+      } else {
+        existingLink.removeAttribute('target');
+        existingLink.removeAttribute('rel');
+      }
+      existingLink.textContent = resolvedText;
+    } else {
+      var link = document.createElement('a');
+      link.setAttribute('href', url);
+      if (openInNewWindow) {
+        link.setAttribute('target', '_blank');
+        link.setAttribute('rel', 'noopener noreferrer');
+      }
+      link.textContent = resolvedText;
+      if (!savedRange.collapsed) {
+        savedRange.deleteContents();
+      }
+      savedRange.insertNode(link);
+      savedRange.setStartAfter(link);
+      savedRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(savedRange);
     }
+    syncHtml();
+    closeLinkDialog();
+    updateToolbarState();
+  };
+  var applyTable = function applyTable() {
+    var rows = Math.max(1, Number(tableRows) || 1);
+    var cols = Math.max(1, Number(tableCols) || 1);
+    var savedRange = restoreSelection();
+    if (!savedRange || !editorRef.current) {
+      closeTableDialog();
+      return;
+    }
+    var tableHtml = buildTableHtml(rows, cols);
+    document.execCommand('insertHTML', false, tableHtml);
+    normalizeBlockTags();
+    syncHtml();
+    closeTableDialog();
+    updateToolbarState();
   };
   var handleInput = function handleInput() {
+    normalizeBlockTags();
     var value = editorRef.current.innerHTML;
     setHtml(value);
     if (onChange) onChange(value);
+    updateToolbarState();
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key !== 'Enter') {
+      return;
+    }
+    event.preventDefault();
+    document.execCommand('insertHTML', false, '<p><br></p>');
+    normalizeBlockTags();
+    if (editorRef.current) {
+      setHtml(editorRef.current.innerHTML);
+      if (onChange) onChange(editorRef.current.innerHTML);
+    }
+    updateToolbarState();
   };
   var handleHtmlChange = function handleHtmlChange(e) {
     setHtml(e.target.value);
     editorRef.current.innerHTML = e.target.value;
     if (onChange) onChange(e.target.value);
   };
+  (0, _react.useEffect)(function () {
+    var editorElement = editorRef.current;
+    var handleSelectionChange = function handleSelectionChange() {
+      updateToolbarState();
+    };
+    var handleEditorMouseUp = function handleEditorMouseUp() {
+      updateToolbarState();
+    };
+    var handleEditorKeyUp = function handleEditorKeyUp() {
+      updateToolbarState();
+    };
+    document.addEventListener('selectionchange', handleSelectionChange);
+    editorElement === null || editorElement === void 0 || editorElement.addEventListener('mouseup', handleEditorMouseUp);
+    editorElement === null || editorElement === void 0 || editorElement.addEventListener('keyup', handleEditorKeyUp);
+    return function () {
+      document.removeEventListener('selectionchange', handleSelectionChange);
+      editorElement === null || editorElement === void 0 || editorElement.removeEventListener('mouseup', handleEditorMouseUp);
+      editorElement === null || editorElement === void 0 || editorElement.removeEventListener('keyup', handleEditorKeyUp);
+    };
+  }, [updateToolbarState]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "bordered rounded \n        ".concat(isFocuded ? 'input-focus' : '', "\n        ").concat(error ? 'input-alert' : '', "\n        "),
     style: {
@@ -79,60 +507,82 @@ var HTMLEditor = function HTMLEditor(_ref) {
     gap: 5
   }, /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faBold,
-    onClick: function onClick() {
-      return execCommand('bold');
-    }
+    active: toolbarState.bold,
+    onClick: toggleBold,
+    onMouseDown: stopToolbarMouseDown
   }), /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faItalic,
+    active: toolbarState.italic,
     onClick: function onClick() {
       return execCommand('italic');
-    }
+    },
+    onMouseDown: stopToolbarMouseDown
   }), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
     size: "small",
     decoration: "link",
+    className: toolbarState.h1 ? 'active' : '',
+    onMouseDown: stopToolbarMouseDown,
     onClick: function onClick() {
-      return execCommand('formatBlock', '<h1>');
+      return toggleHeading('h1');
     }
   }, "H1")), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
     size: "small",
     decoration: "link",
+    className: toolbarState.h2 ? 'active' : '',
+    onMouseDown: stopToolbarMouseDown,
     onClick: function onClick() {
-      return execCommand('formatBlock', '<h2>');
+      return toggleHeading('h2');
     }
   }, "H2")), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
     size: "small",
     decoration: "link",
+    className: toolbarState.h3 ? 'active' : '',
+    onMouseDown: stopToolbarMouseDown,
     onClick: function onClick() {
-      return execCommand('formatBlock', '<h3>');
+      return toggleHeading('h3');
     }
   }, "H3")), /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faListOl,
+    active: toolbarState.orderedList,
     onClick: function onClick() {
       return execCommand('insertOrderedList');
     },
+    onMouseDown: stopToolbarMouseDown,
     title: "Lista ordenada"
   }), /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faListUl,
+    active: toolbarState.unorderedList,
     onClick: function onClick() {
       return execCommand('insertUnorderedList');
     },
+    onMouseDown: stopToolbarMouseDown,
     title: "Lista desordenada"
   }), /*#__PURE__*/_react["default"].createElement(CommandSeparator, null), /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faLink,
+    active: toolbarState.link,
     onClick: handleCreateLink,
+    onMouseDown: stopToolbarMouseDown,
     title: "Agregar enlace"
   }), /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faUnlink,
     onClick: function onClick() {
       return execCommand('unlink');
     },
+    onMouseDown: stopToolbarMouseDown,
     title: "Quitar enlace"
+  }), /*#__PURE__*/_react["default"].createElement(CommandSeparator, null), /*#__PURE__*/_react["default"].createElement(CommandButton, {
+    icon: _freeSolidSvgIcons.faTable,
+    onClick: handleCreateTable,
+    onMouseDown: stopToolbarMouseDown,
+    title: "Insertar tabla"
   }), /*#__PURE__*/_react["default"].createElement(CommandSeparator, null), /*#__PURE__*/_react["default"].createElement(CommandButton, {
     icon: _freeSolidSvgIcons.faTextSlash,
     onClick: function onClick() {
       return execCommand('removeFormat');
-    }
+    },
+    onMouseDown: stopToolbarMouseDown
   }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "html-editor",
     ref: editorRef,
     contentEditable: true,
     style: {
@@ -141,6 +591,7 @@ var HTMLEditor = function HTMLEditor(_ref) {
       outline: 'none'
     },
     onInput: handleInput,
+    onKeyDown: handleKeyDown,
     onFocus: function onFocus() {
       return setIsFocused(true);
     },
@@ -177,7 +628,59 @@ var HTMLEditor = function HTMLEditor(_ref) {
     title: showCode ? 'Mostrar editor visual' : 'Mostrar código HTML'
   }))), error && /*#__PURE__*/_react["default"].createElement("div", {
     className: "input-label-alert"
-  }, error));
+  }, error), /*#__PURE__*/_react["default"].createElement(_dialog.ConfirmationDialog, {
+    open: showLinkDialog,
+    title: currentLinkRef.current ? 'Editar enlace' : 'Agregar enlace',
+    icon: _freeSolidSvgIcons.faLink,
+    color: "primary",
+    textConfirm: "Guardar",
+    textCancel: "Cancelar",
+    onClose: closeLinkDialog,
+    onConfirm: applyLink
+  }, /*#__PURE__*/_react["default"].createElement(_forms.Input, {
+    label: "URL",
+    value: linkUrl,
+    onChange: function onChange(event) {
+      return setLinkUrl(event.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_forms.Input, {
+    label: "Texto",
+    value: linkText,
+    onChange: function onChange(event) {
+      return setLinkText(event.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_forms.Switch, {
+    label: "Abrir en nueva ventana",
+    checked: openInNewWindow,
+    onChange: function onChange(event) {
+      return setOpenInNewWindow(event.target.checked);
+    }
+  })), /*#__PURE__*/_react["default"].createElement(_dialog.ConfirmationDialog, {
+    open: showTableDialog,
+    title: "Insertar tabla",
+    icon: _freeSolidSvgIcons.faTable,
+    color: "primary",
+    textConfirm: "Insertar",
+    textCancel: "Cancelar",
+    onClose: closeTableDialog,
+    onConfirm: applyTable
+  }, /*#__PURE__*/_react["default"].createElement(_forms.Input, {
+    type: "number",
+    label: "Filas",
+    min: 1,
+    value: tableRows,
+    onChange: function onChange(event) {
+      return setTableRows(event.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_forms.Input, {
+    type: "number",
+    label: "Columnas",
+    min: 1,
+    value: tableCols,
+    onChange: function onChange(event) {
+      return setTableCols(event.target.value);
+    }
+  })));
 };
 var CommandSeparator = function CommandSeparator() {
   return /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement("span", {
@@ -187,16 +690,20 @@ var CommandSeparator = function CommandSeparator() {
     className: "light-gray"
   }, "|"));
 };
-var CommandButton = function CommandButton(_ref2) {
-  var icon = _ref2.icon,
-    title = _ref2.title,
-    onClick = _ref2.onClick;
-  return /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
+var CommandButton = function CommandButton(_ref3) {
+  var icon = _ref3.icon,
+    title = _ref3.title,
+    onClick = _ref3.onClick,
+    _ref3$active = _ref3.active,
+    active = _ref3$active === void 0 ? false : _ref3$active,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, _extends({
     size: "small",
     decoration: "link",
+    className: active ? 'active' : '',
     onClick: onClick,
     title: title
-  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+  }, props), /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: icon
   })));
 };

package/components/index.js

@@ -58,6 +58,17 @@ Object.keys(_dialog).forEach(function (key) {
     }
   });
 });
+var _drawer = require("./drawer");
+Object.keys(_drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _drawer[key];
+    }
+  });
+});
 var _editable = require("./editable");
 Object.keys(_editable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/components/util/Skeleton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Skeleton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["width", "height"];
+var _excluded = ["width", "height", "spacing"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -14,9 +14,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var Skeleton = exports.Skeleton = function Skeleton(_ref) {
   var width = _ref.width,
     height = _ref.height,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "skeleton blink-soft",
+    className: "skeleton blink-soft spacing-".concat(spacing),
     style: {
       width: width,
       height: height
@@ -25,5 +27,6 @@ var Skeleton = exports.Skeleton = function Skeleton(_ref) {
 };
 Skeleton.propTypes = {
   width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
+  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  spacing: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
 };

package/hooks/useOverlayLayer.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlayLayer = void 0;
+var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var BASE_Z_INDEX = 10000;
+var nextZIndex = BASE_Z_INDEX;
+var useOverlayLayer = exports.useOverlayLayer = function useOverlayLayer(open) {
+  var _useState = (0, _react.useState)(BASE_Z_INDEX),
+    _useState2 = _slicedToArray(_useState, 2),
+    zIndex = _useState2[0],
+    setZIndex = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (!open) return;
+    setZIndex(nextZIndex);
+    nextZIndex += 2;
+  }, [open]);
+  return zIndex;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gdx-ui",
-  "version": "2.2.4",
+  "version": "2.4.0",
   "description": "UI gdx",
   "main": "index.js",
   "module": "index.js",

package/stories/drawer/Drawer.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NestedOverlays = exports.DrawerDefault = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("../../components");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var _default = exports["default"] = {
+  title: 'Drawer/Drawer',
+  component: _components.Drawer,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+var DrawerDefault = exports.DrawerDefault = {
+  args: {
+    open: true,
+    position: 'right'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_components.Drawer, args, "Hola mundo");
+  }
+};
+var NestedOverlays = exports.NestedOverlays = {
+  render: function render() {
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      drawerOpen = _useState2[0],
+      setDrawerOpen = _useState2[1];
+    var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      dialogOpen = _useState4[0],
+      setDialogOpen = _useState4[1];
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
+      onClick: function onClick() {
+        return setDialogOpen(true);
+      }
+    }, "Open dialog"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
+      onClick: function onClick() {
+        return setDrawerOpen(true);
+      }
+    }, "Open drawer"), /*#__PURE__*/_react["default"].createElement(_components.Dialog, {
+      open: dialogOpen,
+      onClose: function onClose() {
+        return setDialogOpen(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_components.DialogTitle, null, "Dialog"), /*#__PURE__*/_react["default"].createElement(_components.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
+      onClick: function onClick() {
+        return setDrawerOpen(true);
+      }
+    }, "Open drawer"))), /*#__PURE__*/_react["default"].createElement(_components.Drawer, {
+      open: drawerOpen,
+      onClose: function onClose() {
+        return setDrawerOpen(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_components.Button, {
+      onClick: function onClick() {
+        return setDialogOpen(true);
+      }
+    }, "Open dialog")));
+  }
+};

package/stories/editable/Editor.stories.js

@@ -19,7 +19,7 @@ var _default = exports["default"] = {
 };
 var BoxDefault = exports.BoxDefault = {
   args: {
-    content: 'Click to edit',
+    content: '<p>Click to edit</p>',
     error: undefined,
     height: 200
   },

package/stories/utils/Element.js

@@ -3,13 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Element = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _excluded = ["className", "main", "rounded"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var Element = function Element(props) {
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var Element = exports.Element = function Element(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$main = _ref.main,
+    main = _ref$main === void 0 ? true : _ref$main,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "bg-default content rounded margin-bottom ".concat(props.className || '')
+    className: "".concat(className, " content\n      ").concat(rounded ? ' rounded' : ''),
+    style: {
+      backgroundColor: main ? '#c2f0ff' : '#DDD'
+    }
   }, props), "Any Element");
-};
-var _default = exports["default"] = Element;
+};

package/stories/utils/TokensBorders.stories.js

@@ -10,6 +10,7 @@ var _Expandable = require("../../components/expandable/Expandable");
 var _Separator = require("../../components/util/Separator");
 var _components = require("../../components");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _Element = require("./Element");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var _default = exports["default"] = {
   title: 'Tokens/Borders',
@@ -30,12 +31,9 @@ var Borders = exports.Borders = {
   },
   render: function render(_ref) {
     var border = _ref.border;
-    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Element.Element, {
       className: "".concat(border, " margin-bottom"),
-      style: {
-        padding: '15px',
-        backgroundColor: '#ccffc1'
-      }
+      rounded: false
     }, "Some content here"), /*#__PURE__*/_react["default"].createElement("div", null, "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".", border), " to apply this border."));
   }
 };

package/stories/utils/TokensMargins.stories.js

@@ -10,7 +10,19 @@ var _Expandable = require("../../components/expandable/Expandable");
 var _Separator = require("../../components/util/Separator");
 var _components = require("../../components");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _Element = require("./Element");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// const Element = ({ className = '', ...props }) => {
+//   return (
+//     <div 
+//       className={`${className} content rounded`}
+//       style={{ backgroundColor: '#DDD' }}
+//       {...props}
+//     >
+//       Any Element
+//     </div>
+//   );
+// };
 var _default = exports["default"] = {
   title: 'Tokens/Margins',
   // component: Tokens,
@@ -30,22 +42,12 @@ var Margins = exports.Margins = {
   },
   render: function render(_ref) {
     var margin = _ref.margin;
-    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        padding: '15px',
-        backgroundColor: '#F5F5F5'
-      }
-    }, "Some content here"), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(margin),
-      style: {
-        padding: '15px',
-        backgroundColor: '#ccffc1'
-      }
-    }, "This element will change its margin based on the selected option. ", /*#__PURE__*/_react["default"].createElement("br", null), "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".", margin), " to apply this margin."), /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        padding: '15px',
-        backgroundColor: '#F5F5F5'
-      }
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Element.Element, {
+      main: false
+    }, "Some content here"), /*#__PURE__*/_react["default"].createElement(_Element.Element, {
+      className: "".concat(margin)
+    }, "This element will change its margin based on the selected option. ", /*#__PURE__*/_react["default"].createElement("br", null), "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".", margin), " to apply this margin."), /*#__PURE__*/_react["default"].createElement(_Element.Element, {
+      main: false
     }, "Some content here"));
   }
 };