@ioca/react 1.5.26 → 1.5.28

package/lib/css/index.css

@@ -1 +1 @@
-.rc-color-picker{display:block;min-width:258px;position:absolute;visibility:visible;width:max-content;z-index:1}.rc-color-picker-hidden{display:none}.rc-color-picker-panel{background-color:#fff;border-radius:8px;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);display:flex;flex-direction:column;padding:12px;width:258px}.rc-color-picker-panel-disabled{cursor:not-allowed}.rc-color-picker-select{margin-bottom:12px}.rc-color-picker-select .rc-color-picker-palette{border-radius:4px;min-height:160px;overflow:hidden}.rc-color-picker-select .rc-color-picker-palette>.rc-color-picker-gradient{border-top-left-radius:5px}.rc-color-picker-saturation{border-radius:inherit;inset:0;position:absolute}.rc-color-picker-handler{border:2px solid #fff;border-radius:50%;box-shadow:0 0 1px 1px rgba(0,0,0,.06);box-sizing:border-box;height:16px;width:16px}.rc-color-picker-handler-sm{height:12px;width:12px}.rc-color-picker-slider{margin-bottom:12px;width:100%}.rc-color-picker-slider .rc-color-picker-palette{height:8px}.rc-color-picker-slider .rc-color-picker-gradient{border-radius:4px}.rc-color-picker-slider-alpha{background:url(alpha.svg)}.rc-color-picker-color-block{background-image:url(alpha.svg);border-radius:4px;height:28px;margin-left:8px;overflow:hidden;position:relative;width:28px}.rc-color-picker-color-block-inner{border:1px solid rgba(0,0,0,.06);border-radius:4px;box-sizing:border-box;height:100%;width:100%}.rc-color-picker-slider-container{display:flex}.rc-color-picker-slider-container .rc-color-picker-slider-group{flex:1}.rc-color-picker-slider-container .rc-color-picker-slider-group-disabled-alpha{align-items:center;display:flex}.rc-color-picker-slider-container .rc-color-picker-slider-group-disabled-alpha .rc-color-picker-slider{margin-bottom:0}:root{--font-size:15px;--font:normal 400 var(--font-size) /1.5 -apple-system,"Helvetica Neue",sans-serif;--transition:all 0.24s ease;--padding:0.32em 0.628em;--radius:4px;--shadow:0px 2px 8px var(--dim);--blur:blur(4px);--label-width:auto;--label-align:left}article,aside,dialog,figure,footer,header,menu,nav,section{display:block}*{border:0;box-sizing:border-box;margin:0;padding:0}article,body,h1,h2,h3,h4,h5,h6,p,section{line-height:1.2}a{color:inherit;cursor:pointer;text-decoration:none;transition:var(--transition)}b,strong{font-weight:700}html{color:var(--color);font:var(--font);min-height:100vh;overflow-x:hidden;position:relative;scroll-behavior:smooth}button,input,select,textarea{font:inherit}input:-webkit-autofill{box-shadow:inherit;transition:none}ol,ul{list-style:none}audio,iframe,img,video{display:block;margin:auto;max-height:100%;max-width:100%;transition:var(--transition)}h1{font-size:2.4rem}h1,h2{line-height:1.2}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.2rem}h5,h6{font-size:1rem}label{cursor:pointer}code,pre{font-family:inherit}::selection{background-color:#ffd832;color:#212121}html.os-windows ::-webkit-scrollbar{background-color:transparent;height:8px;width:8px}html.os-windows ::-webkit-scrollbar-corner,html.os-windows ::-webkit-scrollbar-track{background-color:transparent!important;box-shadow:none!important}html.os-windows ::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--color-7);border-radius:2px}html.os-windows ::-webkit-scrollbar-button{display:none}.i-input-label{&:has(.i-input-success){--color:var(--green)}&:has(.i-input-warning){--color:var(--yellow)}&:has(.i-input-error){--color:var(--error)}}.i-input-inline{.i-input-item,.i-radio-options,.i-upload-inner{flex:1 1 auto}.i-input-message{backdrop-filter:var(--blur);background:var(--background-opacity);padding:.2em .5em;position:absolute;right:12%;top:-.8em}}.i-input-item{.i-btn{align-self:stretch}&.i-input-focus,&:focus-within,&:hover{background-color:transparent;border-color:var(--color-8)}&.i-input-success{border-color:var(--green-0)}&.i-input-warning{border-color:var(--yellow-0)}&.i-input-error{border-color:var(--error-0)}}.i-input{&[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}&[readonly]{caret-color:transparent}&:disabled{background:var(--background-opacity-1);cursor:not-allowed}}.i-input-append,.i-input-prepend{.i-btn{border-radius:inherit;height:unset}}.i-options-block{&>.i-checkbox-item,&>.i-radio-item{flex:1 1 100%}}:root{--white:#fff;--white-0:#fff;--white-1:#fafafa;--black:#000;--black-0:#dbdbdb;--black-1:#1a1a1a;--red:#dc143c;--red-0:#fcdfe4;--red-1:#ec002f;--blue:#1e90ff;--blue-0:#d6ebff;--blue-1:#007cf4;--green:#3cb371;--green-0:#e7fff2;--green-1:#37a467;--yellow:#ffc549;--yellow-0:#fff5c9;--yellow-1:#ffb820;--brown:#95410c;--brown-0:#fbece2;--brown-1:#8b3a07;--grey:#d7d7d7;--grey-0:#f6f6f6;--grey-1:#b1b1b1;--pink:#ff69b4;--pink-0:#ffe3f1;--pink-1:#f5a;--purple:#8a2be2;--purple-0:#eddefb;--purple-1:#751bc9;--aqua:aqua;--aqua-0:#e8ffff;--aqua-1:#1efdfd;--orange:#fb812a;--orange-0:#fff1e8;--orange-1:#eb7521;--warning:#ffb01f;--warning-0:#fff0bf;--warning-1:#f0a313;--error:#ff4545;--error-0:#ffdbdb;--error-1:#f13636;--success:#a3ff8c;--success-0:#acf899;--success-1:#8dfa72;--color-0:#020202;--color-1:#1b1b1b;--color-2:#363636;--color-3:#505050;--color-4:#6b6b6b;--color-5:#868686;--color-6:#a1a1a1;--color-7:#bbb;--color-8:#d6d6d6;--color-9:#f1f1f1;--background:#fff;--background-1:#f1f1f1;--background-hover:transparent;--background-opacity:hsla(0,0%,100%,.4);--background-opacity-1:hsla(0,0%,83%,.4);--background-opacity-2:hsla(0,0%,74%,.15);--color-backdrop:hsla(0,0%,100%,.4);--color:var(--color-2);--color-main:var(--color-2);--color-main-1:var(--color-0);--color-main-0:var(--color-9);--color-main-reverse:var(--white);--shadow:0 0 8px rgba(0,0,0,.15);[class*=" bg-"],[class^=bg-]{background-color:var(--background);color:var(--color)}.white{--color:var(--white);color:var(--color);&.i-btn,&.i-tag{--color:var(--white)}}.white-0{--color:var(--white-0);--color-hover:var(--white)}.black,.white-0{color:var(--color)}.black{--color:var(--black);&.i-btn,&.i-tag{--color:var(--black)}}.black-0{--color:var(--black-0);--color-hover:var(--black)}.black-0,.red{color:var(--color)}.red{--color:var(--red);&.i-btn,&.i-tag{--color:var(--red)}}.red-0{--color:var(--red-0);--color-hover:var(--red)}.blue,.red-0{color:var(--color)}.blue{--color:var(--blue);&.i-btn,&.i-tag{--color:var(--blue)}}.blue-0{--color:var(--blue-0);--color-hover:var(--blue)}.blue-0,.green{color:var(--color)}.green{--color:var(--green);&.i-btn,&.i-tag{--background-hover:var(--green-0);--color:var(--green)}}.green-0{--color:var(--green-0);--color-hover:var(--green)}.green-0,.yellow{color:var(--color)}.yellow{--color:var(--yellow);&.i-btn,&.i-tag{--background-hover:var(--yellow-0);--color:var(--yellow)}}.yellow-0{--color:var(--yellow-0);--color-hover:var(--yellow)}.brown,.yellow-0{color:var(--color)}.brown{--color:var(--brown);&.i-btn,&.i-tag{--background-hover:var(--brown-0);--color:var(--brown)}}.brown-0{--color:var(--brown-0);--color-hover:var(--brown)}.brown-0,.grey{color:var(--color)}.grey{--color:var(--grey);&.i-btn,&.i-tag{--background-hover:var(--grey-0);--color:var(--grey)}}.grey-0{--color:var(--grey-0);--color-hover:var(--grey)}.grey-0,.pink{color:var(--color)}.pink{--color:var(--pink);&.i-btn,&.i-tag{--background-hover:var(--pink-0);--color:var(--pink)}}.pink-0{--color:var(--pink-0);--color-hover:var(--pink)}.pink-0,.purple{color:var(--color)}.purple{--color:var(--purple);&.i-btn,&.i-tag{--background-hover:var(--purple-0);--color:var(--purple)}}.purple-0{--color:var(--purple-0);--color-hover:var(--purple)}.aqua,.purple-0{color:var(--color)}.aqua{--color:var(--aqua);&.i-btn,&.i-tag{--background-hover:var(--aqua-0);--color:var(--aqua)}}.aqua-0{--color:var(--aqua-0);--color-hover:var(--aqua)}.aqua-0,.orange{color:var(--color)}.orange{--color:var(--orange);&.i-btn,&.i-tag{--background-hover:var(--orange-0);--color:var(--orange)}}.orange-0{--color:var(--orange-0);--color-hover:var(--orange);color:var(--color)}.warning{--color:var(--warning);color:var(--color);&.i-btn,&.i-tag{--background-hover:var(--warning-0);--color:var(--warning)}}.warning-0{--color:var(--warning-0);--color-hover:var(--warning)}.error,.warning-0{color:var(--color)}.error{--color:var(--error);&.i-btn,&.i-tag{--background-hover:var(--error-0);--color:var(--error)}}.error-0{--color:var(--error-0);--color-hover:var(--error)}.error-0,.success{color:var(--color)}.success{--color:var(--success);&.i-btn,&.i-tag{--background-hover:var(--success-0);--color:var(--success)}}.success-0{--color:var(--success-0);--color-hover:var(--success);color:var(--color)}.color-0{--color:var(--color-0);color:var(--color-0)}.color-1{--color:var(--color-1);color:var(--color-1)}.color-2{--color:var(--color-2);color:var(--color-2)}.color-3{--color:var(--color-3);color:var(--color-3)}.color-4{--color:var(--color-4);color:var(--color-4)}.color-5{--color:var(--color-5);color:var(--color-5)}.color-6{--color:var(--color-6);color:var(--color-6)}.color-7{--color:var(--color-7);color:var(--color-7)}.color-8{--color:var(--color-8);color:var(--color-8)}.color-9{--color:var(--color-9);color:var(--color-9)}.bg-white{--background:var(--white);--color:var(--black)}.bg-white-0{--background:var(--white-0);--background-hover:var(--white-1);--color:var(--black);--color-hover:var(--black)}.bg-black{--background:var(--black);--background-hover:var(--black-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--black-1)}}.bg-black-0{--background:var(--black-0);--background-hover:var(--black-1);--color:var(--black);--color-hover:var(--white)}.bg-red{--background:var(--red);--background-hover:var(--red-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--red-1)}}.bg-red-0{--background:var(--red-0);--background-hover:var(--red-1);--color-hover:var(--white)}.bg-blue{--background:var(--blue);--background-hover:var(--blue-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--blue-1)}}.bg-blue-0{--background:var(--blue-0);--background-hover:var(--blue-1);--color-hover:var(--white)}.bg-green{--background:var(--green);--background-hover:var(--green-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--green-1)}}.bg-green-0{--background:var(--green-0);--background-hover:var(--green-1);--color-hover:var(--white)}.bg-yellow{--background:var(--yellow);--background-hover:var(--yellow-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--yellow-1)}}.bg-yellow-0{--background:var(--yellow-0);--background-hover:var(--yellow-1);--color-hover:var(--black)}.bg-brown{--background:var(--brown);--background-hover:var(--brown-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--brown-1)}}.bg-brown-0{--background:var(--brown-0);--background-hover:var(--brown-1);--color-hover:var(--white)}.bg-grey{--background:var(--grey);--background-hover:var(--grey-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--grey-1)}}.bg-grey-0{--background:var(--grey-0);--background-hover:var(--grey-1);--color-hover:var(--black)}.bg-pink{--background:var(--pink);--background-hover:var(--pink-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--pink-1)}}.bg-pink-0{--background:var(--pink-0);--background-hover:var(--pink-1);--color-hover:var(--white)}.bg-purple{--background:var(--purple);--background-hover:var(--purple-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--purple-1)}}.bg-purple-0{--background:var(--purple-0);--background-hover:var(--purple-1);--color-hover:var(--white)}.bg-aqua{--background:var(--aqua);--background-hover:var(--aqua-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--aqua-1)}}.bg-aqua-0{--background:var(--aqua-0);--background-hover:var(--aqua-1);--color-hover:var(--black)}.bg-orange{--background:var(--orange);--background-hover:var(--orange-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--orange-1)}}.bg-orange-0{--background:var(--orange-0);--background-hover:var(--orange-1);--color-hover:var(--black)}.bg-warning{--background:var(--warning);--background-hover:var(--warning-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--warning-1)}}.bg-warning-0{--background:var(--warning-0);--background-hover:var(--warning-1);--color-hover:var(--black)}.bg-error{--background:var(--error);--background-hover:var(--error-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--error-1)}}.bg-error-0{--background:var(--error-0);--background-hover:var(--error-1);--color-hover:var(--white)}.bg-success{--background:var(--success);--background-hover:var(--success-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--success-1)}}.bg-success-0{--background:var(--success-0);--background-hover:var(--success-1);--color-hover:var(--white)}.bg-0{--background:var(--color-0);--color:var(--color-9)}.bg-1{--background:var(--color-1);--color:var(--color-9)}.bg-2{--background:var(--color-2);--color:var(--color-9)}.bg-3{--background:var(--color-3);--color:var(--color-9)}.bg-4{--background:var(--color-4);--color:var(--color-9)}.bg-5{--background:var(--color-5);--color:var(--color-0)}.bg-6{--background:var(--color-6);--color:var(--color-0)}.bg-7{--background:var(--color-7);--color:var(--color-0)}.bg-8{--background:var(--color-8);--color:var(--color-0)}.bg-9{--background:var(--color-9);--color:var(--color-0)}}.theme-dark{--color-0:#fff;--color-1:#e6e6e6;--color-2:#cecece;--color-3:#b5b5b5;--color-4:#9c9c9c;--color-5:#848484;--color-6:#6b6b6b;--color-7:#525252;--color-8:#3a3a3a;--color-9:#212121;--background:#1a1a1a;--background-1:#2a2a2a;--background-hover:transparent;--background-opacity:#1a1a1a66;--background-opacity-1:rgba(0,0,0,.4);--background-opacity-2:rgba(66,66,66,.4);--color-backdrop:rgba(0,0,0,.4);--color:var(--color-0);--color-main:#fff;--color-main-1:#fafafa;--color-main-0:#f1f1f133;--color-main-reverse:var(--black);--black-0:#00000040;--white-0:#ffffff40;--red-0:#ed130040;--blue-0:#0060ff40;--green-0:#00ff4832;--yellow-0:#ffca0032;--orange-0:#ff920054;--purple-0:#b800d740;--aqua-0:#00d1d140;--pink-0:#b5005a60;--grey-0:#ffffff17;--brown-0:#9d3d0040;--warning-0:#ffd74040;--error-0:#ff525240;--success-0:#69f0ae40;background:var(--background)}@media (prefers-color-scheme:dark){.theme-auto{--color-0:#fff;--color-1:#e6e6e6;--color-2:#cecece;--color-3:#b5b5b5;--color-4:#9c9c9c;--color-5:#848484;--color-6:#6b6b6b;--color-7:#525252;--color-8:#3a3a3a;--color-9:#212121;--background:#1a1a1a;--background-1:#2a2a2a;--background-hover:transparent;--background-opacity:#1a1a1a66;--background-opacity-1:rgba(0,0,0,.4);--background-opacity-2:rgba(66,66,66,.4);--color-backdrop:rgba(0,0,0,.6);--color:var(--color-0);--color-main:#fff;--color-main-1:#fafafa;--color-main-0:#f1f1f133;--color-main-reverse:var(--black);--shadow:0 0 12px rgba(0,0,0,.4);--black-0:#00000040;--white-0:#ffffff40;--red-0:#ed130040;--blue-0:#0060ff40;--green-0:#00ff4832;--yellow-0:#ffca0032;--orange-0:#ff920054;--purple-0:#b800d740;--aqua-0:#00d1d140;--pink-0:#b5005a60;--grey-0:#ffffff17;--brown-0:#9d3d0040;--warning-0:#ffd74040;--error-0:#ff525240;--success-0:#69f0ae40;background:var(--background)}}.code,.kbd{align-items:center;border-radius:4px;display:inline-flex;font-family:inherit;font-size:.86em;line-height:1.5;margin:0 .2em;padding:0 .4em;white-space:nowrap}.code{background:var(--color-9);border:1px solid var(--color-8);color:var(--color-0);font-family:unset}.kbd{background-color:var(--white);border-bottom:3px solid var(--grey-1);border-right:2px solid var(--grey-1);box-shadow:-1px -1px 1px var(--color-9);color:var(--black)}.chip{align-items:center;background:var(--color-main);border-radius:var(--radius);color:var(--color-main-reverse);display:inline-flex;font-size:.94em;padding:.05em .72em;transition:var(--transition);&:hover{--background-hover:var(--color-main-1);background:var(--background-hover)}}.link{color:var(--blue);display:inline-flex;position:relative;white-space:nowrap}:root{scrollbar-gutter:auto;.absolute{position:absolute}.relative{position:relative}.fixed{position:fixed}.inset-0{inset:0}.flex{display:flex;gap:inherit}.grid{display:grid}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink{flex-shrink:0}.sticky-top{position:sticky;top:0;z-index:10}.sticky-bottom{bottom:0;position:sticky;z-index:10}.sticky-left{left:0;position:sticky;z-index:10}.sticky-right{position:sticky;right:0;z-index:10}.text-center{text-align:center}.text-right{text-align:right}.bordered{border:1px solid var(--color-7)}.ellipsis{text-overflow:ellipsis;white-space:nowrap}.ellipsis,.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.justify-center{justify-content:center}.justify-evenly{justify-content:space-evenly}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.self-center{align-self:center}.h-100vh{height:100vh}.bg-blur{backdrop-filter:var(--blur);background:var(--background-opacity)}.roundless{border-radius:0}.round{border-radius:50vw}.round-0{border-radius:var(--radius)}.disabled{cursor:not-allowed;opacity:.4}.hidden{display:none!important}.shadow{box-shadow:var(--shadow)}.hover-shadow{transition:var(--transition);&:hover{box-shadow:var(--shadow)}}.hover-text-shadow{transition:var(--transition);&:hover{text-shadow:var(--shadow)}}.no-transition{transition:none!important}.hover-opacity{opacity:0;transition:var(--transition);&:hover{opacity:1}}.hover-children{opacity:0;transform:var(--transition)}.hover-parent{&:hover{.hover-children{opacity:1}}}.bg-transparent{background:transparent}.font-italic{font-style:italic}.font-bold{font-weight:600}.font-sm{font-size:.8em}.font-lg{font-size:1.2em}.mg-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.mg-0{margin:0}.mx-0{margin-inline:0}.my-0{margin-block:0}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.pd-0{padding:0}.px-0{padding-inline:0}.py-0{padding-block:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.pb-0{padding-bottom:0}.gap-0{gap:0}.mg-1{margin:1px}.mx-1{margin-inline:1px}.my-1{margin-block:1px}.mt-1{margin-top:1px}.mb-1{margin-bottom:1px}.ml-1{margin-left:1px}.mr-1{margin-right:1px}.pd-1{padding:1px}.px-1{padding-inline:1px}.py-1{padding-block:1px}.pl-1{padding-left:1px}.pr-1{padding-right:1px}.pt-1{padding-top:1px}.pb-1{padding-bottom:1px}.gap-1{gap:1px}.mg-2{margin:2px}.mx-2{margin-inline:2px}.my-2{margin-block:2px}.mt-2{margin-top:2px}.mb-2{margin-bottom:2px}.ml-2{margin-left:2px}.mr-2{margin-right:2px}.pd-2{padding:2px}.px-2{padding-inline:2px}.py-2{padding-block:2px}.pl-2{padding-left:2px}.pr-2{padding-right:2px}.pt-2{padding-top:2px}.pb-2{padding-bottom:2px}.gap-2{gap:2px}.mg-4{margin:4px}.mx-4{margin-inline:4px}.my-4{margin-block:4px}.mt-4{margin-top:4px}.mb-4{margin-bottom:4px}.ml-4{margin-left:4px}.mr-4{margin-right:4px}.pd-4{padding:4px}.px-4{padding-inline:4px}.py-4{padding-block:4px}.pl-4{padding-left:4px}.pr-4{padding-right:4px}.pt-4{padding-top:4px}.pb-4{padding-bottom:4px}.gap-4{gap:4px}.mg-6{margin:6px}.mx-6{margin-inline:6px}.my-6{margin-block:6px}.mt-6{margin-top:6px}.mb-6{margin-bottom:6px}.ml-6{margin-left:6px}.mr-6{margin-right:6px}.pd-6{padding:6px}.px-6{padding-inline:6px}.py-6{padding-block:6px}.pl-6{padding-left:6px}.pr-6{padding-right:6px}.pt-6{padding-top:6px}.pb-6{padding-bottom:6px}.gap-6{gap:6px}.mg-8{margin:8px}.mx-8{margin-inline:8px}.my-8{margin-block:8px}.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}.ml-8{margin-left:8px}.mr-8{margin-right:8px}.pd-8{padding:8px}.px-8{padding-inline:8px}.py-8{padding-block:8px}.pl-8{padding-left:8px}.pr-8{padding-right:8px}.pt-8{padding-top:8px}.pb-8{padding-bottom:8px}.gap-8{gap:8px}.mg-10{margin:10px}.mx-10{margin-inline:10px}.my-10{margin-block:10px}.mt-10{margin-top:10px}.mb-10{margin-bottom:10px}.ml-10{margin-left:10px}.mr-10{margin-right:10px}.pd-10{padding:10px}.px-10{padding-inline:10px}.py-10{padding-block:10px}.pl-10{padding-left:10px}.pr-10{padding-right:10px}.pt-10{padding-top:10px}.pb-10{padding-bottom:10px}.gap-10{gap:10px}.mg-12{margin:12px}.mx-12{margin-inline:12px}.my-12{margin-block:12px}.mt-12{margin-top:12px}.mb-12{margin-bottom:12px}.ml-12{margin-left:12px}.mr-12{margin-right:12px}.pd-12{padding:12px}.px-12{padding-inline:12px}.py-12{padding-block:12px}.pl-12{padding-left:12px}.pr-12{padding-right:12px}.pt-12{padding-top:12px}.pb-12{padding-bottom:12px}.gap-12{gap:12px}.mg-16{margin:16px}.mx-16{margin-inline:16px}.my-16{margin-block:16px}.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}.ml-16{margin-left:16px}.mr-16{margin-right:16px}.pd-16{padding:16px}.px-16{padding-inline:16px}.py-16{padding-block:16px}.pl-16{padding-left:16px}.pr-16{padding-right:16px}.pt-16{padding-top:16px}.pb-16{padding-bottom:16px}.gap-16{gap:16px}.mg-20{margin:20px}.mx-20{margin-inline:20px}.my-20{margin-block:20px}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.ml-20{margin-left:20px}.mr-20{margin-right:20px}.pd-20{padding:20px}.px-20{padding-inline:20px}.py-20{padding-block:20px}.pl-20{padding-left:20px}.pr-20{padding-right:20px}.pt-20{padding-top:20px}.pb-20{padding-bottom:20px}.gap-20{gap:20px}.mg-24{margin:24px}.mx-24{margin-inline:24px}.my-24{margin-block:24px}.mt-24{margin-top:24px}.mb-24{margin-bottom:24px}.ml-24{margin-left:24px}.mr-24{margin-right:24px}.pd-24{padding:24px}.px-24{padding-inline:24px}.py-24{padding-block:24px}.pl-24{padding-left:24px}.pr-24{padding-right:24px}.pt-24{padding-top:24px}.pb-24{padding-bottom:24px}.gap-24{gap:24px}.mg-28{margin:28px}.mx-28{margin-inline:28px}.my-28{margin-block:28px}.mt-28{margin-top:28px}.mb-28{margin-bottom:28px}.ml-28{margin-left:28px}.mr-28{margin-right:28px}.pd-28{padding:28px}.px-28{padding-inline:28px}.py-28{padding-block:28px}.pl-28{padding-left:28px}.pr-28{padding-right:28px}.pt-28{padding-top:28px}.pb-28{padding-bottom:28px}.gap-28{gap:28px}.mg-32{margin:32px}.mx-32{margin-inline:32px}.my-32{margin-block:32px}.mt-32{margin-top:32px}.mb-32{margin-bottom:32px}.ml-32{margin-left:32px}.mr-32{margin-right:32px}.pd-32{padding:32px}.px-32{padding-inline:32px}.py-32{padding-block:32px}.pl-32{padding-left:32px}.pr-32{padding-right:32px}.pt-32{padding-top:32px}.pb-32{padding-bottom:32px}.gap-32{gap:32px}.mg-36{margin:36px}.mx-36{margin-inline:36px}.my-36{margin-block:36px}.mt-36{margin-top:36px}.mb-36{margin-bottom:36px}.ml-36{margin-left:36px}.mr-36{margin-right:36px}.pd-36{padding:36px}.px-36{padding-inline:36px}.py-36{padding-block:36px}.pl-36{padding-left:36px}.pr-36{padding-right:36px}.pt-36{padding-top:36px}.pb-36{padding-bottom:36px}.gap-36{gap:36px}.mg-40{margin:40px}.mx-40{margin-inline:40px}.my-40{margin-block:40px}.mt-40{margin-top:40px}.mb-40{margin-bottom:40px}.ml-40{margin-left:40px}.mr-40{margin-right:40px}.pd-40{padding:40px}.px-40{padding-inline:40px}.py-40{padding-block:40px}.pl-40{padding-left:40px}.pr-40{padding-right:40px}.pt-40{padding-top:40px}.pb-40{padding-bottom:40px}.gap-40{gap:40px}.mg-48{margin:48px}.mx-48{margin-inline:48px}.my-48{margin-block:48px}.mt-48{margin-top:48px}.mb-48{margin-bottom:48px}.ml-48{margin-left:48px}.mr-48{margin-right:48px}.pd-48{padding:48px}.px-48{padding-inline:48px}.py-48{padding-block:48px}.pl-48{padding-left:48px}.pr-48{padding-right:48px}.pt-48{padding-top:48px}.pb-48{padding-bottom:48px}.gap-48{gap:48px}.mg-56{margin:56px}.mx-56{margin-inline:56px}.my-56{margin-block:56px}.mt-56{margin-top:56px}.mb-56{margin-bottom:56px}.ml-56{margin-left:56px}.mr-56{margin-right:56px}.pd-56{padding:56px}.px-56{padding-inline:56px}.py-56{padding-block:56px}.pl-56{padding-left:56px}.pr-56{padding-right:56px}.pt-56{padding-top:56px}.pb-56{padding-bottom:56px}.gap-56{gap:56px}.mg-60{margin:60px}.mx-60{margin-inline:60px}.my-60{margin-block:60px}.mt-60{margin-top:60px}.mb-60{margin-bottom:60px}.ml-60{margin-left:60px}.mr-60{margin-right:60px}.pd-60{padding:60px}.px-60{padding-inline:60px}.py-60{padding-block:60px}.pl-60{padding-left:60px}.pr-60{padding-right:60px}.pt-60{padding-top:60px}.pb-60{padding-bottom:60px}.gap-60{gap:60px}.mg-72{margin:72px}.mx-72{margin-inline:72px}.my-72{margin-block:72px}.mt-72{margin-top:72px}.mb-72{margin-bottom:72px}.ml-72{margin-left:72px}.mr-72{margin-right:72px}.pd-72{padding:72px}.px-72{padding-inline:72px}.py-72{padding-block:72px}.pl-72{padding-left:72px}.pr-72{padding-right:72px}.pt-72{padding-top:72px}.pb-72{padding-bottom:72px}.gap-72{gap:72px}.mg-80{margin:80px}.mx-80{margin-inline:80px}.my-80{margin-block:80px}.mt-80{margin-top:80px}.mb-80{margin-bottom:80px}.ml-80{margin-left:80px}.mr-80{margin-right:80px}.pd-80{padding:80px}.px-80{padding-inline:80px}.py-80{padding-block:80px}.pl-80{padding-left:80px}.pr-80{padding-right:80px}.pt-80{padding-top:80px}.pb-80{padding-bottom:80px}.gap-80{gap:80px}.mg-96{margin:96px}.mx-96{margin-inline:96px}.my-96{margin-block:96px}.mt-96{margin-top:96px}.mb-96{margin-bottom:96px}.ml-96{margin-left:96px}.mr-96{margin-right:96px}.pd-96{padding:96px}.px-96{padding-inline:96px}.py-96{padding-block:96px}.pl-96{padding-left:96px}.pr-96{padding-right:96px}.pt-96{padding-top:96px}.pb-96{padding-bottom:96px}.gap-96{gap:96px}.mg-100{margin:100px}.mx-100{margin-inline:100px}.my-100{margin-block:100px}.mt-100{margin-top:100px}.mb-100{margin-bottom:100px}.ml-100{margin-left:100px}.mr-100{margin-right:100px}.pd-100{padding:100px}.px-100{padding-inline:100px}.py-100{padding-block:100px}.pl-100{padding-left:100px}.pr-100{padding-right:100px}.pt-100{padding-top:100px}.pb-100{padding-bottom:100px}.gap-100{gap:100px}.mg-120{margin:120px}.mx-120{margin-inline:120px}.my-120{margin-block:120px}.mt-120{margin-top:120px}.mb-120{margin-bottom:120px}.ml-120{margin-left:120px}.mr-120{margin-right:120px}.pd-120{padding:120px}.px-120{padding-inline:120px}.py-120{padding-block:120px}.pl-120{padding-left:120px}.pr-120{padding-right:120px}.pt-120{padding-top:120px}.pb-120{padding-bottom:120px}.gap-120{gap:120px}.mg-160{margin:160px}.mx-160{margin-inline:160px}.my-160{margin-block:160px}.mt-160{margin-top:160px}.mb-160{margin-bottom:160px}.ml-160{margin-left:160px}.mr-160{margin-right:160px}.pd-160{padding:160px}.px-160{padding-inline:160px}.py-160{padding-block:160px}.pl-160{padding-left:160px}.pr-160{padding-right:160px}.pt-160{padding-top:160px}.pb-160{padding-bottom:160px}.gap-160{gap:160px}.mg-200{margin:200px}.mx-200{margin-inline:200px}.my-200{margin-block:200px}.mt-200{margin-top:200px}.mb-200{margin-bottom:200px}.ml-200{margin-left:200px}.mr-200{margin-right:200px}.pd-200{padding:200px}.px-200{padding-inline:200px}.py-200{padding-block:200px}.pl-200{padding-left:200px}.pr-200{padding-right:200px}.pt-200{padding-top:200px}.pb-200{padding-bottom:200px}.gap-200{gap:200px}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.h-10{height:10%}.h-20{height:20%}.h-25{height:25%}.h-30{height:30%}.h-40{height:40%}.h-50{height:50%}.h-60{height:60%}.h-70{height:70%}.h-75{height:75%}.h-80{height:80%}.h-90{height:90%}.h-100{height:100%}.colspan-2{grid-column:span 2}.colspan-3{grid-column:span 3}.colspan-4{grid-column:span 4}.colspan-5{grid-column:span 5}.rowspan-2{grid-row:span 2}.rowspan-3{grid-row:span 3}.rowspan-4{grid-row:span 4}.rowspan-5{grid-row:span 5}.colspan-full{grid-column:1/-1}.rowspan-full{grid-row:1/-1}}@media (min-width:880px){.screen-sm{display:none!important}}@media (max-width:880px){.screen-lg{display:none!important}}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes bounce{20%{transform:translate(12px)}50%{transform:translate(-8px)}80%{transform:translate(6px)}}.i-affix{display:flex;flex-direction:column;gap:.5em;position:fixed;transition:var(--transition);z-index:50}.i-affix:not(.i-affix-visible)>.i-affix-target{opacity:0;pointer-events:none}.i-ripple-container{border-radius:inherit;contain:strict;inset:0;overflow:hidden;pointer-events:none;position:absolute;.i-ripple{background:var(--color);border-radius:50%;opacity:.15;position:absolute;transform:translate(-50%,-50%) scale(.25);transform-origin:50%}.i-ripple-active{opacity:0;transform:translate(-50%,-50%) scale(1)}}.i-loading-container{backdrop-filter:blur(2px);border-radius:inherit;contain:paint;flex-direction:column;font-size:inherit;gap:.5em;transform:translateZ(0)}.i-loading-container,.i-loading-icon{align-items:center;display:flex;justify-content:center}.i-loading-icon{pointer-events:none;transition:var(--transition);z-index:1}.i-loading-icon:after,.i-loading-icon:before{border-radius:1em;content:"\20";flex-shrink:0;height:1em;margin:auto -.25em;transform:scale(0);width:1em}.i-loading-icon:before{animation:ioca-loading 1s linear infinite;background-color:var(--color);margin-left:auto;opacity:.6}.i-loading-icon:after{animation:ioca-loading 1s linear .15s infinite;background-color:var(--color);margin-right:auto}@keyframes ioca-loading{50%{transform:scale(1)}}.i-btn{--gap:0.25em;--background:var(--color-main);--background-hover:var(--color-main-1);--color:var(--color-main-reverse);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;flex-shrink:0;font-size:.94em;font-weight:500;gap:var(--gap);height:2.25em;justify-content:center;line-height:1;outline:none;padding:0 .6em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}}.i-btn-toggle{overflow:hidden}.i-btn-toggle-content{align-items:center;display:inline-flex;gap:var(--gap);transform:scale(.4);&.i-btn-toggle-active{transform:none;transition:var(--transition)}}.i-btn-block{width:100%}.i-btn-large{font-size:1.25em}.i-btn-extreme{font-size:2em;height:2em}.i-btn-small{font-size:.86em;height:2em;line-height:2;padding:0 .4em}.i-btn-mini{font-size:.8em;height:1.4em;line-height:1;padding:0 .2em}.i-btn-square{padding:0;width:2.25em;&.i-btn-extreme,&.i-btn-small{width:2em}}.i-btn:hover{--background:var(--background-hover);--color:var(--color-hover,var(--color-main-reverse))}.i-btn-secondary{--background-hover:var(--color-main-0);--background:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-flat{--background-hover:var(--color-main-0);--background:transparent;--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-outline{--background-hover:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1);&.i-btn{--background:transparent;border-color:var(--color)}}.i-btn.i-btn-flat:hover,.i-btn.i-btn-outline:hover,.i-btn.i-btn-secondary:hover{--background:var(--background-hover)}.i-btn-content{display:contents}.i-btn-loading{cursor:default;opacity:.628}.i-btn-group-horizonal{display:flex;.i-btn{&:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}&:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}}}.i-btn-group-vertical{display:flex;flex-direction:column;.i-btn{&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}}}.icon{vertical-align:middle}.i-badge{align-self:center;border-radius:var(--radius);display:inline-flex;flex-shrink:0;position:relative}.i-badge-content{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:inherit;box-shadow:var(--shadow);font-size:.86em;inset:0 0 auto auto;padding:.2em .5em;pointer-events:none;position:absolute;transform:translate(50%,-50%) scale(1);transition:all .16s;z-index:1;&.i-badge-dot{border-radius:1em;color:transparent;height:1em;overflow:hidden;padding:0;width:1em}&.i-badge-hidden,&:empty{transform:translate(50%,-50%) scale(0)}}.i-card{--card-padding:8px 12px;backdrop-filter:var(--blur);background:var(--background-opacity-2);border-radius:var(--radius);display:flex;flex-direction:column;overflow:auto}.i-card-bordered{border:1px solid var(--color-8)}.i-card-header{align-items:center;display:flex;gap:.25em;padding:var(--card-padding)}.i-card-content{flex:1}.i-card-footer{gap:.25em;margin-top:auto;padding:var(--card-padding)}.i-card-footer,.i-input-label{align-items:center;display:flex}.i-input-label{align-content:flex-start;border-radius:var(--radius);flex-wrap:wrap;gap:.5em;max-width:100%;position:relative;width:100%;&:has(.i-input-success){--color:var(--green)}&:has(.i-input-warning){--color:var(--yellow)}&:has(.i-input-error){--color:var(--error)}}.i-textarea-label{align-items:baseline}.i-input-inline{flex-wrap:nowrap;.i-input-item,.i-radio-options,.i-upload-inner{flex:1 1 auto}.i-input-message{backdrop-filter:var(--blur);background:var(--background-opacity);padding:.2em .5em;position:absolute;right:12%;top:-.8em}}.i-input-label-text{border-radius:inherit;flex:0 0 var(--label-width);font-weight:500;text-align:var(--label-align);transition:all .12s}.i-input-item{--input-border-width:2px;--invert-input-border-width:calc(var(--input-border-width)*-1);align-items:baseline;border:var(--input-border-width) solid var(--background-opacity-2);border-radius:inherit;display:flex;flex:1 1 100%;max-width:100%;transition:var(--transition);.i-btn{align-self:stretch}&.i-input-focus,&:focus-within,&:hover{background-color:transparent;border-color:var(--color-8)}&.i-input-success{border-color:var(--green-0)}&.i-input-warning{border-color:var(--yellow-0)}&.i-input-error{border-color:var(--error-0)}}.i-input-borderless{background:var(--background-opacity-2);border-color:transparent}.i-input-underline{background:transparent;border-color:var(--background-opacity-2);border-radius:0;border-width:0 0 var(--input-border-width) 0}.i-input{background:transparent;border-radius:inherit;color:inherit;flex:1;outline:none;padding:var(--padding);text-align:inherit;transition:var(--transition);width:100%;&[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}&[readonly]{caret-color:transparent}&:disabled{background:var(--background-opacity-1);cursor:not-allowed}}.i-input-message{--color:var(--color-5);align-self:center;border-radius:var(--radius);color:var(--color);flex:1 1 auto;font-size:.8em;pointer-events:none;z-index:1}.i-input-success{--color:var(--green)}.i-input-warning{--color:var(--yellow)}.i-input-error{--color:var(--error)}.i-textarea{display:block;max-width:100%;min-height:2.14em;transition:var(--transition),width 0s,height 0s}.i-input-append,.i-input-prepend{align-self:stretch;display:flex;margin:var(--invert-input-border-width);place-items:center;.i-btn{border-radius:inherit;height:unset}}.i-input-prepend{border-bottom-left-radius:inherit;border-top-left-radius:inherit;margin-right:0}.i-input-append{border-bottom-right-radius:inherit;border-top-right-radius:inherit;margin-left:0}.i-helpericon.i-helpericon-clear,.i-input-clearable:hover .i-input-append{display:none}.i-input-item:hover .i-helpericon-clear{display:flex}.i-options-block{&>.i-checkbox-item,&>.i-radio-item{flex:1 1 100%}}.i-input-number{padding:var(--padding);padding-inline:0;text-align:center}.i-checkbox{gap:1em}.i-checkbox-item{align-items:baseline;align-self:flex-start;border-radius:var(--radius);display:inline-flex;gap:.5em;&:hover{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--color-5)}.i-checkbox-switch{box-shadow:inset 0 0 0 2px var(--color-8)}.i-checkbox-partof{box-shadow:none}}.i-checkbox-input{&:checked{box-shadow:none}}}.i-checkbox-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-checkbox-text{border-radius:inherit;color:var(--color-3);display:inline-flex;transition:var(--transition);user-select:none;&:empty{display:none}}.i-checkbox-input{align-self:center;appearance:none;border-radius:inherit;cursor:inherit;display:flex;height:1.125em;outline:0;overflow:hidden;position:relative;transition:var(--transition);width:1.125em}.i-checkbox-custom{height:0;width:0}.i-checkbox-switch{background:var(--color-9);border-radius:2.4em;box-shadow:inset 0 0 0 2px var(--color-9);height:1.125em;overflow:unset;width:2.2em;&:hover{&:after{background-color:var(--background);box-shadow:0 0 0 2px var(--color-7)}}}.i-checkbox-default{border-radius:2px;box-shadow:inset 0 0 0 2px var(--color-7)}.i-checkbox-button{display:none}.i-checkbox-default:after,.i-checkbox-partof:after,.i-checkbox-switch:after,.i-checkbox-switch:before{content:"\20";position:absolute;transition:var(--transition)}.i-checkbox-default:after{border-bottom:2px solid var(--color-main-reverse);border-radius:1px;border-right:2px solid var(--color-main-reverse);height:50%;left:34%;top:16%;transform:rotate(90deg) scale(0);width:20%}.i-checkbox-switch{&:after{background-color:var(--background);border-radius:1em;box-shadow:0 0 0 2px var(--color-8);height:1em;left:0;top:50%;transform:translateY(-50%);transition:var(--transition);width:1em}&:active{&:after{width:1.5em}&:checked:after{left:-.5em}}}.i-checkbox-input:checked{&.i-checkbox-default{background-color:var(--color-main);&:after{transform:rotate(45deg)}}&.i-checkbox-switch{background-color:var(--color-main);&:after{background-color:var(--background);box-shadow:0 0 0 2px var(--color-main);transform:translate(1.2em,-50%)}}&+.i-checkbox-text{color:var(--color-main)}}.i-checkbox-button{&+.i-checkbox-text{align-items:center;border:1.5px solid var(--color-9);border-radius:2em;display:flex;font-size:.9em;line-height:1.8;padding:0 1em;white-space:nowrap}&:hover+.i-checkbox-text{background-color:var(--color-9);border-color:var(--color-8)}&:checked+.i-checkbox-text{background-color:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-checkbox-partof{background-color:var(--color-main);border-radius:2px;&:after{background-color:var(--color-main-reverse);border-radius:var(--radius);height:2px;left:50%;top:50%;transform:translate(-50%,-50%);width:.5em}}.i-checkbox-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-checkbox-success{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--success-0);&:checked{background-color:var(--success-0)}}.i-checkbox-message{color:var(--success)}}.i-checkbox-warning{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--warning-0);&:checked{background-color:var(--warning-0)}}.i-checkbox-message{color:var(--warning)}}.i-checkbox-error{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--error-0);&:checked{background-color:var(--error-0)}}.i-checkbox-message{color:var(--error)}}.i-helpericon{align-items:center;align-self:center;border-radius:var(--radius);color:var(--color-7);display:flex;font-size:.8em;justify-content:center;margin:.25em;min-height:1.675em;min-width:1.675em;padding:.125em;position:relative;transition:var(--transition);&:hover{background:var(--background-opacity-1);color:var(--color-3)}}.i-collapse{border-radius:var(--radius)}.i-collapse-bordered{border:1px solid var(--color-8);.i-collapse-item+.i-collapse-item{border-top:1px solid var(--color-8)}}.i-collapse-header,.i-collapse-item{border-radius:var(--radius)}.i-collapse-header{align-items:center;display:flex;font-weight:500;justify-content:space-between;padding:.5em;transition:var(--transition);&:hover{background-color:var(--background-opacity-2)}}.i-collapse-toggle{display:flex;margin:0;user-select:none}.i-collapse-content{border-radius:var(--radius);height:0;overflow:hidden;padding:0 .5em;transition:var(--transition)}.i-collapse-active>.i-collapse-header,.i-collapse-header:hover{opacity:1}.i-collapse-active>.i-collapse-content{height:unset;padding:.5em}.i-collapse-disabled{opacity:.4;pointer-events:none;>.i-collapse-content{height:0;overflow:hidden;padding:0 .5em}}.i-empty{color:var(--color-7);height:3em;margin:auto;width:3em}.i-datagrid-container{border-radius:var(--radius);overflow:auto;&:has(.i-datagrid-loading){overflow:hidden!important;position:relative}}.i-datagrid-loading{overflow:hidden!important;user-select:none;.i-datagrid{max-height:100%;max-width:100%}.i-loading-container{backdrop-filter:blur(2px);background:var(--background-opacity);inset:0;position:absolute;z-index:10}}.i-datagrid{contain:content;content-visibility:auto;display:grid;grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);min-width:100%;width:fit-content;.i-empty{grid-column:1/-1;margin:1em auto}}.i-datagrid-bordered{--datagrid-border-color:var(--color-9);outline:1px solid var(--datagrid-border-color);.i-datagrid-virtual-header{padding-bottom:1px}.i-datagrid-cell{outline:1px solid var(--datagrid-border-color)}}.i-datagrid-striped{.i-datagrid-row{--datagrid-border-color:var(--color-8);&:nth-child(odd){--datagrid-cell-background:var(--background-1)}}}.i-datagrid .i-datagrid-row{--datagrid-cell-background:var(--background);display:contents;&:hover{--datagrid-cell-background:var(--background);.i-datagrid-cell{z-index:1}[class*=" i-datagrid-cell-fixed"]{z-index:3}}}.i-datagrid-cell{align-items:center;background:var(--datagrid-cell-background);display:flex;gap:4px;justify-content:var(--datagrid-justify);overflow:hidden;padding:var(--cell-padding);position:sticky;transition:background-color .12s}[class*=" i-datagrid-cell-fixed"]{z-index:2}.i-datagrid-cell-fixed-right{box-shadow:-2px 0 4px var(--color-9)}.i-datagrid-cell-fixed-left{box-shadow:2px 0 4px var(--color-9)}.i-datagrid-cell-content{display:inherit;flex:1 1 auto;gap:inherit;justify-content:inherit;min-width:0;overflow:hidden;white-space:nowrap}.i-datagrid-cell-content-ellipsis{display:block;text-align:var(--datagrid-justify);text-overflow:ellipsis}.i-datagrid-header{.i-datagrid-cell{--datagrid-cell-background:var(--background);line-height:1;text-overflow:ellipsis;user-select:none;white-space:nowrap;z-index:3}[class*=" i-datagrid-cell-fixed"]{z-index:4}}.i-datagrid-resizor{cursor:ew-resize;inset:0 0 0 auto;position:absolute;transition:.12s;width:4px;&:hover{background-color:var(--color-5)}}.i-datagrid-has-sorter{cursor:pointer;&:hover{--datagrid-cell-background:var(--color-9)}}.i-datagrid-sorter{color:var(--color-7);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;width:.8em}.i-datagrid-sorter-caret{&:first-child{margin-bottom:-.4em;transform:rotate(-90deg)}&:last-child{transform:rotate(90deg)}}.i-datagrid-sorter-asc{.i-datagrid-sorter-caret:first-child{color:var(--color-main)}}.i-datagrid-sorter-desc{.i-datagrid-sorter-caret:last-child{color:var(--color-main)}}.i-datagrid-virtual-header{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.i-description{display:grid}.i-description-item{display:flex;gap:.5em}.i-description-item-vertical{flex-direction:column}.i-description-label{color:var(--color-5);flex-shrink:0;width:var(--description-label-width)}.i-description-value{flex:1}.i-backdrop-drawer{backdrop-filter:var(--blur);background:var(--color-backdrop);contain:paint;display:flex;inset:0;opacity:0;pointer-events:none;position:fixed;transition:var(--transition);z-index:100;&.i-active{opacity:1;pointer-events:unset}}.i-drawer{backdrop-filter:var(--blur);background:var(--background);box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:100%;max-width:100%;overflow:auto;position:absolute;transition:var(--transition)}.i-drawer-left{inset:0 auto 0 0;transform:translate3d(-100%,0,0)}.i-drawer-top{inset:0 0 auto;transform:translate3d(0,-100%,0)}.i-drawer-right{inset:0 0 0 auto;transform:translate3d(100%,0,0)}.i-drawer-bottom{inset:auto 0 0;transform:translate3d(0,100%,0)}.i-active>.i-drawer{opacity:1;pointer-events:unset;transform:none}.i-drawer-footer,.i-drawer-header{align-items:center;display:flex;padding:12px;&:empty{display:none}}.i-drawer-content{flex:1;overflow-x:hidden}.i-drawer-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}.i-list{--gap:0.5em;overflow:auto}.i-list-item{border-radius:var(--radius);display:flex;gap:var(--gap);padding:var(--padding);transition:var(--transition)}.i-list-item-bordered{box-shadow:inset 0 0 0 1px var(--color-8);&+.i-list-item-bordered{margin-top:-1px}&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}&:hover{box-shadow:inset 0 0 0 1px var(--color-7);z-index:1}}.i-list-option{cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:hover{background-color:var(--background-opacity-2)}&.i-list-item-active{background-color:var(--color-main-0)}}.i-list-item-label{align-self:flex-start}.i-popup{background:var(--background);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transform:translateY(2px);will-change:left,top,opacity,transform;z-index:100}.i-popup,.i-popup-arrow{position:absolute;transition:all .12s}.i-popup-arrow{color:unset;height:24px;pointer-events:none;width:8px;path{fill:var(--background)}}.i-dropdown-content{border-radius:inherit;gap:2px;max-height:40vh;overflow-x:hidden;padding:8px}.i-dropdown-content,.i-editor{display:flex;flex-direction:column}.i-editor{position:relative;&:focus-within,&:hover{>.i-editor-content,>.i-editor-controls{border-color:var(--color-8)}}}.i-editor-borderless{border-radius:var(--radius);&>.i-editor-content,&>.i-editor-controls{border:none}}.i-editor-controls{border:2px solid var(--color-9);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;display:flex;gap:2px;padding:2px;transition:var(--transition);.i-btn{--color:var(--color-5);&:hover{--color:var(--color);.i-editor-control-tip{opacity:1}}}}.i-editor-control-tip{backdrop-filter:var(--blur);border-radius:4px;left:50%;line-height:1;opacity:0;padding:4px;pointer-events:none;position:absolute;top:100%;transform:translate(-50%);transition:var(--transition);z-index:1}.i-editor-content{word-wrap:break-word;border:2px solid var(--color-9);border-radius:0 0 var(--radius) var(--radius);flex:1;outline:none;overflow:auto;padding:var(--padding);tab-size:1em;transition:var(--transition);white-space:pre-wrap;word-break:break-all;&:first-child{border-radius:var(--radius)}&:focus,&:hover{border-color:var(--color-8)}a{color:var(--blue)}img{margin:0}&:empty:before{color:var(--color-5);content:attr(data-placeholder);pointer-events:none}}.i-editor-memtion{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 0;max-width:240px;min-width:120px;overflow:auto;padding:4px;z-index:1000;.i-list-item{color:var(--color-5)}.i-list-item-active{color:var(--color-main)}}.i-memtion-tag{align-items:center;display:inline-flex;max-width:100%;user-select:none;vertical-align:baseline}.i-form{display:grid;max-width:100%}.i-form-inline{--label-inline:nowrap;.i-input-label{flex-wrap:nowrap}}.i-modal-container{position:fixed}.i-modal-backdrop,.i-modal-container{inset:0;pointer-events:none;z-index:100}.i-modal-backdrop{backdrop-filter:blur(4px);background:var(--color-backdrop);contain:paint;opacity:0;position:absolute;transition:var(--transition)}.i-modal-backdrop.i-modal-backdrop-active{opacity:1}.i-modal-layer{display:flex;inset:0;overflow:hidden;overscroll-behavior:contain;padding:12px;pointer-events:none;position:absolute;z-index:101}.i-modal-layer.i-modal-active{pointer-events:auto}.i-modal,.i-modal-layer.i-modal-hide-backdrop{pointer-events:none}.i-modal{background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;line-height:normal;margin:auto;max-height:100%;max-width:100%;opacity:0;overflow-x:hidden;position:relative;transform:translateY(12px);transition:var(--transition)}.i-modal-layer.i-modal-active .i-modal{opacity:1;pointer-events:all;transform:none}.i-modal.bounced{animation:bounce .4s ease-in-out 0s}.i-modal-customized{overflow:unset}.i-modal-footer,.i-modal-header{align-items:center;display:flex;gap:12px;padding:12px;position:relative;&:empty{display:none}}.i-modal-header>b{display:contents}.i-modal-footer{justify-content:center}.i-modal-content{flex:1;line-height:1.5;max-height:100%;overflow-x:hidden}.i-modal{.i-modal-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}}.i-text-gradient{-webkit-text-fill-color:transparent}.i-text-gradient-wave{animation:text-wave 1.2s linear 0s infinite;background-position:0 0;background-size:200% 100%}@keyframes text-wave{to{background-position:-100% 0}}.i-progress{background:var(--background-1);border-radius:var(--radius);cursor:pointer;display:flex;flex:1 1 100%;position:relative}.i-progress-vertical{height:100%;&>.i-progress-bar{align-self:flex-end;height:100%}}.i-progress-bar{background:var(--color-main);border-radius:var(--radius);position:relative;transform-origin:left;transition:var(--transition);width:100%}.i-progress-cursor{border-radius:inherit;box-shadow:var(--shadow);display:flex;min-height:120%;min-width:1em;overflow:hidden;position:absolute;right:0;top:50%;transform:translate(50%,-50%) scale(0);transition:var(--transition);user-select:none}.i-progress:hover .i-progress-cursor,.no-transition>.i-progress-cursor{transform:translate(50%,-50%) scale(1)}.i-progress-circle{position:relative}.i-progress-circle-path{border-radius:50px;transition:var(--transition)}.i-progress-circle-value{align-items:flex-end;display:flex;font-size:1.5em;gap:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.i-video{background:#000;border-radius:var(--radius);overflow:hidden;position:relative;video{height:100%;width:100%}}.i-video-controls{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);bottom:-1px;display:flex;font-size:.9em;gap:4px;left:0;padding:4px;position:absolute;right:0;transition:var(--transition);user-select:none;white-space:nowrap;.i-btn{flex-shrink:0}.i-icon{font-size:1.2em}&:hover{opacity:1;pointer-events:unset}}.i-video-controls-hidden{opacity:0;pointer-events:none}.i-video-control,.i-video-times{align-items:center;display:flex}.i-video-times{gap:4px;margin-inline:8px}.i-video-volume{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);bottom:100%;left:50%;opacity:0;padding:8px;pointer-events:none;position:absolute;transform:translate(-50%,4px);transition:var(--transition);z-index:1}.i-video-control-volume{position:relative;&:hover{& .i-video-volume{opacity:1;pointer-events:unset}}}.i-preview{padding:0;.i-modal{background:transparent;height:100%;overflow:unset;pointer-events:none!important;position:static;transform:none;width:100%}.i-preview-container{height:100%;position:relative;width:100%}.i-preview-content{align-items:center;display:flex;height:100%;justify-content:center;pointer-events:none;transition:var(--transition);width:100%;will-change:transform;*{pointer-events:all}}.i-preview-controls{align-items:center;background:var(--background-opacity);border-radius:var(--radius);display:flex;font-size:.9em;gap:1px;padding:4px;pointer-events:all;position:fixed;right:.5em;top:.5em;transition:all .24s ease-out;z-index:10;&:hover{opacity:1}}.i-preview-controls-hidden{opacity:0}.i-preview-unknown{align-items:center;background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;padding:.5em 1em}}.i-image{align-items:center;align-self:center;backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);display:inline-flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative;vertical-align:middle;.i-loading-container{backdrop-filter:var(--blur);z-index:1}&>img{border-radius:inherit;height:100%;object-fit:cover;width:100%}}.i-image-cover{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);display:flex;inset:0;justify-content:center;position:absolute}.i-messages{cursor:default;display:flex;flex-direction:column;inset:0;pointer-events:none;position:fixed;z-index:10000}.i-message,.i-messages{transition:var(--transition)}.i-message{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;padding:.625em 1em;pointer-events:all;position:absolute;transform:translate(80px) scale(.86) skew(-40deg);&.i-message-active{opacity:1;transform:translate(0)}}.i-pagination{align-items:center;display:flex;gap:.2em}.i-page{--background:transparent;--color:var(--color-7);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;height:2.25em;justify-content:center;min-width:2.25em;outline:none;padding:0 .32em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}.i-loading-container{backdrop-filter:var(--blur);background:var(--background-opacity);contain:paint;inset:0;position:absolute;z-index:1}&:hover{--background:var(--background-opacity-2)}&.i-page-active{--background:var(--color-main);--color:var(--color-main-reverse);cursor:default}&.i-page-loading{--background:unset;cursor:default}}.i-select{display:flex;gap:.25em}.i-select-multiple{flex-wrap:wrap;padding:.225em .628em;.i-tag{background:var(--background-opacity-1);line-height:1.425em;padding:0 .5em;position:relative}}.i-select-options{--gap:0.25em;border-radius:inherit;display:flex;flex-direction:column;gap:2px;max-height:40vh;overflow-x:hidden;padding:4px;.i-list-item{align-items:center;color:var(--color-5);justify-content:unset;&.i-list-item-active{background:var(--color-main-0);color:var(--color-main);.i-select-option-check{opacity:1}}&.disabled{pointer-events:none}}}.i-select-options-multiple{.i-list-item{&.i-list-item-active{background:transparent}}}.i-select-option-check{opacity:0}.i-select-filter{backdrop-filter:var(--blur);background:var(--background-opacity);border-bottom:1px solid var(--background-opacity-1);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:1;&:empty{display:none}}.i-tag{--background:var(--color-9);--color:var(--color-1);align-items:center;align-self:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);display:inline-flex;font-size:.81em;gap:.5em;justify-content:center;line-height:1;padding:.25em .5em;position:relative;transition:var(--transition);.i-tag-close{background:var(--error);color:var(--white);font-size:.81em;margin:0;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .16s;z-index:1;&:hover{background:var(--error-1);color:var(--white)}}&:hover{.i-tag-hover-close{opacity:1;transform:translate(50%,-50%) scale(1)}}}.i-tag-large{font-size:1em}.i-tag-extreme{font-size:1.5em;height:2em}.i-tag-small{font-size:.72em;padding:.125em .4em}.i-tag-dot{background-color:var(--color);border-radius:50%;box-shadow:0 -1px 1px 0 rgba(var(--color),.3);content:"\20";flex-shrink:0;height:.385em;transition:inherit;width:.385em}.i-tag-outline{--background:transparent;border-color:var(--color)}.i-tag-hover-close{opacity:0;transform:translate(50%,-50%) scale(0)}.i-tag-clickable{cursor:pointer;&:hover{background:var(--background-hover);color:var(--color-hover,var(--color))}}.i-colorpicker{display:inline-flex;width:fit-content}.i-colorpicker-handle{align-items:center;align-self:center;display:inline-flex;font-size:.8em;gap:.25em;position:relative}.i-colorpicker-square{border:2px solid var(--color-9);border-radius:var(--radius);cursor:pointer;display:inline-block;height:1.8em;transition:var(--transition);width:1.8em;&:hover{border-color:var(--color-8)}}.i-colorpicker-footer{display:flex;font-size:.8em;gap:4px}.i-colorpicker-text{background:var(--color-9);border-radius:var(--radius);cursor:pointer;padding:.25em .5em;transition:var(--transition);&:hover{background:var(--color-8)}}.rc-color-picker-panel{background:inherit;box-shadow:none}.i-datepicker-label{position:unset}.i-datepicker{padding:8px;user-select:none;.i-datepicker-item{cursor:pointer}}.i-datepicker-dates,.i-datepicker-weeks{display:grid;gap:2px;grid-template-columns:repeat(7,1fr)}.i-datepicker-item,.i-datepicker-week{display:flex;justify-content:center;padding:.32em .5em}.i-datepicker-week{color:var(--color-5)}.i-datepicker-item{--background:transparent;background:var(--background);border-radius:var(--radius);color:var(--color);opacity:.4;transition:all .12s;&:hover{--background:var(--color-main-0);opacity:1}&.i-datepicker-same-month{opacity:.8}&.i-datepicker-today{--background:var(--color-main-0)}&.i-datepicker-active{--background:var(--color-main);--color:var(--color-main-reverse);opacity:1}&.i-datepicker-disabled{cursor:not-allowed;opacity:.2}}.i-datepicker-units{align-items:center;color:var(--color-6);display:flex;font-size:.9em;gap:.125em;margin-bottom:.5em}.i-datepicker-action{align-items:baseline;border-radius:var(--radius);display:flex;gap:.25em;padding:.125em .5em;position:relative;user-select:none;>span{color:var(--color);font-size:1.15em}&:hover{background:var(--color-main-0)}}.i-datepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-datepicker-ym{backdrop-filter:var(--blur);background:var(--background);display:flex;gap:.5em;inset:0;opacity:0;padding:8px;pointer-events:none;position:absolute;transition:var(--transition);z-index:1;&.i-datepicker-active{opacity:1;pointer-events:unset}}.i-datepicker-years{display:flex;flex-direction:column;gap:.25em;max-height:100%;overflow-x:hidden;width:5em}.i-datepicker-months{display:grid;flex:1;gap:.25em;grid-template-columns:repeat(3,1fr);margin-top:1.5em}.i-datepicker-year{flex:1}.i-datepicker-month,.i-datepicker-year{align-items:center;border-radius:var(--radius);display:flex;justify-content:center;padding:2px;user-select:none;&:hover{background-color:var(--background-opacity-2)}&.i-datepicker-active{background:var(--color-main);color:var(--color-main-reverse);opacity:1}}.i-datepicker-close{position:absolute;right:0;top:0}.i-timepicker-label{position:unset}.i-timepicker{display:flex}.i-timepicker-list{display:flex;flex-direction:column;gap:2px;max-height:12.2em;min-width:3em;overflow:auto;padding:4px;scrollbar-width:none;text-align:center;&::-webkit-scrollbar{display:none}&:not(:last-child){border-right:1px solid var(--color-9)}}.i-timepicker-item{border-radius:var(--radius);display:block;opacity:.5;padding:.32em .5em;&:hover{background-color:var(--color-9);opacity:1}&.i-timepicker-item-active{background:var(--color-main);bottom:0;color:var(--color-main-reverse);opacity:1;position:sticky;top:0;z-index:1}}.i-timepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-daterange-grids{display:flex;.i-datepicker-ym{justify-content:center}.i-datepicker-months{margin-top:0;max-width:160px}}.i-daterange-col{flex:1;min-width:0}.i-daterange-between{--background:var(--background-opacity-1);opacity:1}.i-popconfirm{padding:1rem}.i-popconfirm-footer{margin-top:1rem}.i-radio{display:inline-flex;flex-wrap:wrap;gap:1em;position:relative}.i-radio-label{font-weight:500;text-align:var(--label-align);width:var(--label-width)}.i-radio-item{align-items:baseline;border-radius:var(--radius);display:inline-flex;&:hover{.i-radio-input{background-color:var(--color-main-0);box-shadow:inset 0 0 0 3px var(--color-7)}}}.i-radio-item-custom{>.i-radio-input{height:0;width:0}}.i-input-success .i-radio-input{box-shadow:inset 0 0 0 3px var(--green-0)}.i-input-warning .i-radio-input{box-shadow:inset 0 0 0 3px var(--yellow-0)}.i-input-error .i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-radio-options-button{flex:none}.i-radio-text{border-radius:inherit;color:var(--color-3);display:inline-flex;margin-left:.4em;transition:var(--transition);user-select:none}.i-radio-input{align-self:center;appearance:none;border-radius:50%;box-shadow:inset 0 0 0 3px var(--color-8);cursor:inherit;display:flex;flex-shrink:0;height:1.125em;outline:0;overflow:hidden;position:relative;transition:all .15s;width:1.125em}.i-radio-default{border:0 solid transparent}.i-radio-input:checked{&.i-radio-default{background:var(--color-main-reverse);border-color:var(--color-main);border-width:.4em;box-shadow:none;&+.i-radio-text{color:var(--color-main)}}}.i-radio-default:active{transform:scale(1.1)}.i-radio-button{display:none;&+.i-radio-text{border:1.5px solid var(--color-9);font-size:.94em;line-height:1.8;margin-left:0;padding:0 .628em;white-space:nowrap;&:hover{background-color:var(--color-main-0);border-color:var(--color-8)}}&:checked+.i-radio-text{background:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-radio-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-radio-success{.i-radio-input{box-shadow:inset 0 0 0 3px var(--success-0)}.i-radio-message{color:var(--success)}}.i-radio-warning{.i-radio-input{box-shadow:inset 0 0 0 3px var(--warning-0)}.i-radio-message{color:var(--warning)}}.i-radio-error{.i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-message{color:var(--error)}}.i-resizable{display:flex;overflow:hidden}.i-resizable-vertical{flex-direction:column;&>.i-resizable-line{cursor:ns-resize;height:2px;width:100%}}.i-resizable-a{overflow:auto}.i-resizable-b{flex:1;overflow:auto}.i-resizable-line{align-items:center;background:var(--color-9);cursor:ew-resize;display:flex;height:100%;justify-content:center;outline:1px solid transparent;position:relative;touch-action:none;transition:var(--transition);user-select:none;width:2px;&.i-resizable-resizing,&:hover{outline-color:var(--color-8);&>.i-resizable-line-node{opacity:1}}}.i-resizable-line-node{background:inherit;border-radius:var(--radius);display:flex;font-size:.8em;opacity:0;pointer-events:none;position:relative;transition:var(--transition);z-index:1}.i-river{overflow:hidden}.i-river-track{display:inline-flex;will-change:transform}.i-river-item{flex-shrink:0}.i-scroll{-webkit-overflow-scrolling:touch;overflow:hidden;user-select:none}.i-step{display:flex;flex-wrap:wrap;gap:.5em;overflow:hidden}.i-step-vertical{flex-direction:column;.i-step-item{flex-direction:row;&:not(:last-child){.i-step-item-right{padding-bottom:1em}}}}.i-step-item{display:flex;flex:1 1 auto;flex-direction:column;gap:.5em;transition:var(--transition);&:last-child{flex:none;.i-step-divider{display:none}}&.i-step-item-finished{opacity:.4;.i-step-divider{border-style:solid}}&.i-step-item-pending{opacity:.4}&:hover{opacity:1}}.i-step-item-index{align-items:center;background:var(--color-4);border-radius:1.5em;color:var(--background);display:flex;flex-shrink:0;justify-content:center;line-height:1.5em;width:1.5em}.i-step-divider{align-self:center;border:1px dashed var(--color-7);flex:1}.i-step-item-title{white-space:nowrap}.i-step-item-left,.i-step-item-title{align-items:center;display:flex;gap:.5em}.i-step-item-left,.i-step-item-right{flex-direction:column}.i-step-item-right{display:flex;gap:.5em}.i-swiper{max-width:100%;position:relative;user-select:none;&:hover{.i-swiper-arrow{opacity:.72}}.i-swiper-arrow:hover{opacity:1}}.i-swiper-track{overflow:hidden;position:relative;touch-action:pan-x}.i-swiper-list{display:flex;will-change:transform}.i-swiper-fade{>.i-swiper-item{opacity:0}>.i-swiper-active{opacity:1}}.i-swiper-vertical{.i-swiper-track{height:100%;touch-action:pan-y}.i-swiper-list{flex-direction:column}.i-swiper-item{width:100%}.i-swiper-arrow{left:unset;right:.5em}.i-swiper-prev{bottom:50%;top:unset;transform:translateY(-6px)}.i-swiper-next{transform:translateY(6px)}}.i-swiper-item{display:flex;flex:1;flex-shrink:0;overflow:hidden}.i-swiper-arrow,.i-swiper-item{align-items:center;justify-content:center;transition:var(--transition)}.i-swiper-arrow{border-radius:var(--radius);display:inline-flex;opacity:0;position:absolute;top:50%;transform:translateY(-50%)}.i-swiper-prev{left:.5em}.i-swiper-next{right:.5em}.i-swiper-indicators{display:flex;gap:.5em;justify-content:center;margin:.5em 0}.i-swiper-indicators-fixed{bottom:0;left:50%;position:absolute;transform:translate(-50%)}.i-swiper-indicator{background:var(--color);border-radius:50%;flex-shrink:0;height:8px;opacity:.25;width:8px;&:hover{opacity:.8}&.i-indicator-active{opacity:1}}.i-tabs{gap:.5em;max-width:100%}.i-tab-navs-container{align-items:center;border-radius:var(--radius);display:flex;gap:4px;scroll-behavior:smooth}.i-tab-navs-vertical{align-items:flex-end;flex-direction:column}.i-tab-navs{display:flex;flex:1;flex-direction:inherit;gap:1px;overflow:auto;position:relative;scroll-behavior:unset;scrollbar-width:none;user-select:none}.i-tab-navs::-webkit-scrollbar{display:none}.i-tabs-pane{.i-tab-navs-container{background:var(--background-opacity-2);padding:4px}.i-tab-navs{gap:4px;.i-tab-nav{border-radius:var(--radius);&:hover{background:var(--background)}}.i-tab-active{background:var(--background);box-shadow:0 1px 3px 0 rgba(38,38,38,.1);z-index:2}}.i-tab-navs-vertical{&:before{border-right:1px solid var(--color-8);border-top:none;height:100%;left:unset;top:0;width:unset}.i-tab-navs{.i-tab-nav{border:1px solid transparent;border-radius:var(--radius) 0 0 var(--radius);&:hover{border-color:var(--color-8);border-right-color:var(--background)}}.i-tab-active{border-color:var(--color-7);border-right:1px solid var(--background);&:hover{background-color:transparent}}}}}.i-tab-nav{--color:var(--color-7);align-items:center;border-radius:var(--radius);color:var(--color);display:flex;flex-shrink:0;gap:.25em;justify-content:center;padding:.4em .625em;position:relative;user-select:none;z-index:1;&:hover{--color:var(--color-3)}&.i-tab-active{--color:var(--color-main)}}.i-tabs-morelist{.i-tab-nav{white-space:nowrap}.i-tab-active{background:var(--color-main-0)}}.i-tab-closable{.i-tab-nav{padding-right:0;&.i-tab-active{background-color:var(--background);box-shadow:2px 0 8px #0000000d}}}.i-tab-nav:hover{.i-tab-nav-close{opacity:1}}.i-tab-navs-bar{background:var(--background-opacity-2);border-radius:4px;bottom:0;height:0;left:0;pointer-events:none;position:absolute;transition:var(--transition)}.i-tab-navs-vertical{>.i-tab-navs{gap:1px;>.i-tab-navs-bar{bottom:unset;left:unset;right:0;top:0;width:0}}}.i-tab-contents{flex:1;position:relative}.i-tab-content{display:none;&.i-tab-active{display:block}}.i-tabs{.i-tab-nav-close{background:var(--background);font-size:.7em;margin:0;opacity:0;padding:0;position:absolute;right:4px;&:hover{background:var(--background);color:var(--error)}}}.i-tree{--tree-gap:2px;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-size:.9em;font-style:italic;font-weight:300;position:relative;&:after{align-self:center;background:var(--color-8);content:"\20";flex:1;height:1px;margin-left:.5em}}.i-tree-item-header{align-items:center;border-radius:var(--radius);color:var(--color-6);display:flex;gap:.25em;overflow:hidden;padding:.4em;position:relative;user-select:none}.i-tree-item-header.i-tree-item-selected,.i-tree-item-header:hover{background:var(--color-main-0);color:var(--color-main)}.i-tree-round{--radius:100px}.i-tree-item-header.i-tree-round{border-radius:var(--radius)}.i-tree-item-icon{display:flex}.i-tree-checkbox{align-self:center}.i-tree-toggle{border-radius:inherit;color:var(--color-6);margin-left:auto;transition:var(--transition)}.i-tree-toggle:hover{background:var(--background-opacity);color:var(--color-3)}.i-tree-expand>.i-tree-item-header{color:var(--color-main);opacity:1}.i-tree-expand>.i-tree-item-header>.i-tree-toggle,.i-tree-toggle.i-tree-expand{transform:rotateX(180deg)}.i-input-label-file{display:flex;width:unset;&:has(.i-upload-list:empty){align-items:center}}.i-input-file-hidden{display:none}.i-upload-inner{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.5em}.i-upload-card{&:has(.i-upload-list:not(:empty)){align-self:flex-start}.i-upload-list{display:contents}}.i-upload-list{display:flex;flex-wrap:wrap;gap:inherit;user-select:none;width:100%;&:empty{display:none}}.i-upload-delete{box-shadow:var(--shadow);margin:0;opacity:0;right:-.825em;top:-.825em;z-index:1}.i-upload-btn{align-self:center}.i-upload-card-btn{background:var(--background-opacity);border-style:dashed;font-size:1em;height:var(--upload-card-size);opacity:.6;width:var(--upload-card-size);&:hover{opacity:1}}.i-upload-item{align-items:center;background:var(--background-opacity);border:2px solid var(--background-opacity-1);border-radius:var(--radius);display:inline-flex;font-size:.8em;gap:.25em;padding:.25em .4em;position:relative;transition:var(--transition);.i-upload-delete{background-color:var(--error);color:#fff;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{background-color:var(--background-opacity-1);.i-upload-delete{opacity:1}}}.i-upload-item-card{align-items:center;background:var(--background-opacity);border-radius:var(--radius);cursor:pointer;display:flex;gap:.25em;height:var(--upload-card-size);justify-content:center;position:relative;.i-image,video{height:100%;object-fit:cover;width:100%}.i-upload-file-name{font-size:.8em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-upload-delete{background-color:var(--error);color:#fff;font-size:.72em;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{.i-upload-delete,.i-upload-tip{opacity:1}}}.i-upload-size{color:var(--color-6);font-size:.8em}.i-upload-item-dragged{z-index:1000}.i-upload-tip{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);font-size:.86em;left:50%;opacity:0;pointer-events:none;position:absolute;top:100%;transform:translate(-50%,.5em);transition:opacity .12s;white-space:pre;z-index:1}.i-upload-dropbox{align-items:center;border:2px dashed var(--color-5);border-radius:var(--radius);color:var(--color-5);cursor:pointer;display:flex;gap:.5em;justify-content:center;padding:1em;transition:var(--transition);width:100%;&:hover{border-color:var(--color-main);color:var(--color-main)}}.i-upload-dropbox-active{background:var(--background-opacity-1);border-color:var(--color-main);color:var(--color-main)}
+.rc-color-picker{display:block;min-width:258px;position:absolute;visibility:visible;width:max-content;z-index:1}.rc-color-picker-hidden{display:none}.rc-color-picker-panel{background-color:#fff;border-radius:8px;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);display:flex;flex-direction:column;padding:12px;width:258px}.rc-color-picker-panel-disabled{cursor:not-allowed}.rc-color-picker-select{margin-bottom:12px}.rc-color-picker-select .rc-color-picker-palette{border-radius:4px;min-height:160px;overflow:hidden}.rc-color-picker-select .rc-color-picker-palette>.rc-color-picker-gradient{border-top-left-radius:5px}.rc-color-picker-saturation{border-radius:inherit;inset:0;position:absolute}.rc-color-picker-handler{border:2px solid #fff;border-radius:50%;box-shadow:0 0 1px 1px rgba(0,0,0,.06);box-sizing:border-box;height:16px;width:16px}.rc-color-picker-handler-sm{height:12px;width:12px}.rc-color-picker-slider{margin-bottom:12px;width:100%}.rc-color-picker-slider .rc-color-picker-palette{height:8px}.rc-color-picker-slider .rc-color-picker-gradient{border-radius:4px}.rc-color-picker-slider-alpha{background:url(alpha.svg)}.rc-color-picker-color-block{background-image:url(alpha.svg);border-radius:4px;height:28px;margin-left:8px;overflow:hidden;position:relative;width:28px}.rc-color-picker-color-block-inner{border:1px solid rgba(0,0,0,.06);border-radius:4px;box-sizing:border-box;height:100%;width:100%}.rc-color-picker-slider-container{display:flex}.rc-color-picker-slider-container .rc-color-picker-slider-group{flex:1}.rc-color-picker-slider-container .rc-color-picker-slider-group-disabled-alpha{align-items:center;display:flex}.rc-color-picker-slider-container .rc-color-picker-slider-group-disabled-alpha .rc-color-picker-slider{margin-bottom:0}:root{--font-size:15px;--font:normal 400 var(--font-size) /1.5 -apple-system,"Helvetica Neue",sans-serif;--transition:all 0.24s ease;--padding:0.32em 0.628em;--radius:4px;--shadow:0px 2px 8px var(--dim);--blur:blur(4px);--label-width:auto;--label-align:left}article,aside,dialog,figure,footer,header,menu,nav,section{display:block}*{border:0;box-sizing:border-box;margin:0;padding:0}article,body,h1,h2,h3,h4,h5,h6,p,section{line-height:1.2}a{color:inherit;cursor:pointer;text-decoration:none;transition:var(--transition)}b,strong{font-weight:700}html{color:var(--color);font:var(--font);min-height:100vh;overflow-x:hidden;position:relative;scroll-behavior:smooth}button,input,select,textarea{font:inherit}input:-webkit-autofill{box-shadow:inherit;transition:none}ol,ul{list-style:none}audio,iframe,img,video{display:block;margin:auto;max-height:100%;max-width:100%;transition:var(--transition)}h1{font-size:2.4rem}h1,h2{line-height:1.2}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.2rem}h5,h6{font-size:1rem}label{cursor:pointer}code,pre{font-family:inherit}::selection{background-color:#ffd832;color:#212121}html.os-windows ::-webkit-scrollbar{background-color:transparent;height:8px;width:8px}html.os-windows ::-webkit-scrollbar-corner,html.os-windows ::-webkit-scrollbar-track{background-color:transparent!important;box-shadow:none!important}html.os-windows ::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--color-7);border-radius:2px}html.os-windows ::-webkit-scrollbar-button{display:none}.i-input-label{&:has(.i-input-success){--color:var(--green)}&:has(.i-input-warning){--color:var(--yellow)}&:has(.i-input-error){--color:var(--error)}}.i-input-inline{.i-input-item,.i-radio-options,.i-upload-inner{flex:1 1 auto}.i-input-message{backdrop-filter:var(--blur);background:var(--background-opacity);padding:.2em .5em;position:absolute;right:12%;top:-.8em}}.i-input-item{.i-btn{align-self:stretch}&.i-input-focus,&:focus-within,&:hover{background-color:transparent;border-color:var(--color-8)}&.i-input-success{border-color:var(--green-0)}&.i-input-warning{border-color:var(--yellow-0)}&.i-input-error{border-color:var(--error-0)}}.i-input{&[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}&[readonly]{caret-color:transparent}&:disabled{background:var(--background-opacity-1);cursor:not-allowed}}.i-input-append,.i-input-prepend{.i-btn{border-radius:inherit;height:unset}}.i-options-block{&>.i-checkbox-item,&>.i-radio-item{flex:1 1 100%}}:root{--white:#fff;--white-0:#fff;--white-1:#fafafa;--black:#000;--black-0:#dbdbdb;--black-1:#1a1a1a;--red:#dc143c;--red-0:#fcdfe4;--red-1:#ec002f;--blue:#1e90ff;--blue-0:#d6ebff;--blue-1:#007cf4;--green:#3cb371;--green-0:#e7fff2;--green-1:#37a467;--yellow:#ffc549;--yellow-0:#fff5c9;--yellow-1:#ffb820;--brown:#95410c;--brown-0:#fbece2;--brown-1:#8b3a07;--grey:#d7d7d7;--grey-0:#f6f6f6;--grey-1:#b1b1b1;--pink:#ff69b4;--pink-0:#ffe3f1;--pink-1:#f5a;--purple:#8a2be2;--purple-0:#eddefb;--purple-1:#751bc9;--aqua:aqua;--aqua-0:#e8ffff;--aqua-1:#1efdfd;--orange:#fb812a;--orange-0:#fff1e8;--orange-1:#eb7521;--warning:#ffb01f;--warning-0:#fff0bf;--warning-1:#f0a313;--error:#ff4545;--error-0:#ffdbdb;--error-1:#f13636;--success:#a3ff8c;--success-0:#acf899;--success-1:#8dfa72;--color-0:#020202;--color-1:#1b1b1b;--color-2:#363636;--color-3:#505050;--color-4:#6b6b6b;--color-5:#868686;--color-6:#a1a1a1;--color-7:#bbb;--color-8:#d6d6d6;--color-9:#f1f1f1;--background:#fff;--background-1:#f1f1f1;--background-hover:transparent;--background-opacity:hsla(0,0%,100%,.4);--background-opacity-1:hsla(0,0%,83%,.4);--background-opacity-2:hsla(0,0%,74%,.15);--color-backdrop:hsla(0,0%,100%,.4);--color:var(--color-2);--color-main:var(--color-2);--color-main-1:var(--color-0);--color-main-0:var(--color-9);--color-main-reverse:var(--white);--shadow:0 0 8px rgba(0,0,0,.15);[class*=" bg-"],[class^=bg-]{background-color:var(--background);color:var(--color)}.white{--color:var(--white);color:var(--color);&.i-btn,&.i-tag{--color:var(--white)}}.white-0{--color:var(--white-0);--color-hover:var(--white)}.black,.white-0{color:var(--color)}.black{--color:var(--black);&.i-btn,&.i-tag{--color:var(--black)}}.black-0{--color:var(--black-0);--color-hover:var(--black)}.black-0,.red{color:var(--color)}.red{--color:var(--red);&.i-btn,&.i-tag{--color:var(--red)}}.red-0{--color:var(--red-0);--color-hover:var(--red)}.blue,.red-0{color:var(--color)}.blue{--color:var(--blue);&.i-btn,&.i-tag{--color:var(--blue)}}.blue-0{--color:var(--blue-0);--color-hover:var(--blue)}.blue-0,.green{color:var(--color)}.green{--color:var(--green);&.i-btn,&.i-tag{--background-hover:var(--green-0);--color:var(--green)}}.green-0{--color:var(--green-0);--color-hover:var(--green)}.green-0,.yellow{color:var(--color)}.yellow{--color:var(--yellow);&.i-btn,&.i-tag{--background-hover:var(--yellow-0);--color:var(--yellow)}}.yellow-0{--color:var(--yellow-0);--color-hover:var(--yellow)}.brown,.yellow-0{color:var(--color)}.brown{--color:var(--brown);&.i-btn,&.i-tag{--background-hover:var(--brown-0);--color:var(--brown)}}.brown-0{--color:var(--brown-0);--color-hover:var(--brown)}.brown-0,.grey{color:var(--color)}.grey{--color:var(--grey);&.i-btn,&.i-tag{--background-hover:var(--grey-0);--color:var(--grey)}}.grey-0{--color:var(--grey-0);--color-hover:var(--grey)}.grey-0,.pink{color:var(--color)}.pink{--color:var(--pink);&.i-btn,&.i-tag{--background-hover:var(--pink-0);--color:var(--pink)}}.pink-0{--color:var(--pink-0);--color-hover:var(--pink)}.pink-0,.purple{color:var(--color)}.purple{--color:var(--purple);&.i-btn,&.i-tag{--background-hover:var(--purple-0);--color:var(--purple)}}.purple-0{--color:var(--purple-0);--color-hover:var(--purple)}.aqua,.purple-0{color:var(--color)}.aqua{--color:var(--aqua);&.i-btn,&.i-tag{--background-hover:var(--aqua-0);--color:var(--aqua)}}.aqua-0{--color:var(--aqua-0);--color-hover:var(--aqua)}.aqua-0,.orange{color:var(--color)}.orange{--color:var(--orange);&.i-btn,&.i-tag{--background-hover:var(--orange-0);--color:var(--orange)}}.orange-0{--color:var(--orange-0);--color-hover:var(--orange);color:var(--color)}.warning{--color:var(--warning);color:var(--color);&.i-btn,&.i-tag{--background-hover:var(--warning-0);--color:var(--warning)}}.warning-0{--color:var(--warning-0);--color-hover:var(--warning)}.error,.warning-0{color:var(--color)}.error{--color:var(--error);&.i-btn,&.i-tag{--background-hover:var(--error-0);--color:var(--error)}}.error-0{--color:var(--error-0);--color-hover:var(--error)}.error-0,.success{color:var(--color)}.success{--color:var(--success);&.i-btn,&.i-tag{--background-hover:var(--success-0);--color:var(--success)}}.success-0{--color:var(--success-0);--color-hover:var(--success);color:var(--color)}.color-0{--color:var(--color-0);color:var(--color-0)}.color-1{--color:var(--color-1);color:var(--color-1)}.color-2{--color:var(--color-2);color:var(--color-2)}.color-3{--color:var(--color-3);color:var(--color-3)}.color-4{--color:var(--color-4);color:var(--color-4)}.color-5{--color:var(--color-5);color:var(--color-5)}.color-6{--color:var(--color-6);color:var(--color-6)}.color-7{--color:var(--color-7);color:var(--color-7)}.color-8{--color:var(--color-8);color:var(--color-8)}.color-9{--color:var(--color-9);color:var(--color-9)}.bg-white{--background:var(--white);--color:var(--black)}.bg-white-0{--background:var(--white-0);--background-hover:var(--white-1);--color:var(--black);--color-hover:var(--black)}.bg-black{--background:var(--black);--background-hover:var(--black-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--black-1)}}.bg-black-0{--background:var(--black-0);--background-hover:var(--black-1);--color:var(--black);--color-hover:var(--white)}.bg-red{--background:var(--red);--background-hover:var(--red-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--red-1)}}.bg-red-0{--background:var(--red-0);--background-hover:var(--red-1);--color-hover:var(--white)}.bg-blue{--background:var(--blue);--background-hover:var(--blue-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--blue-1)}}.bg-blue-0{--background:var(--blue-0);--background-hover:var(--blue-1);--color-hover:var(--white)}.bg-green{--background:var(--green);--background-hover:var(--green-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--green-1)}}.bg-green-0{--background:var(--green-0);--background-hover:var(--green-1);--color-hover:var(--white)}.bg-yellow{--background:var(--yellow);--background-hover:var(--yellow-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--yellow-1)}}.bg-yellow-0{--background:var(--yellow-0);--background-hover:var(--yellow-1);--color-hover:var(--black)}.bg-brown{--background:var(--brown);--background-hover:var(--brown-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--brown-1)}}.bg-brown-0{--background:var(--brown-0);--background-hover:var(--brown-1);--color-hover:var(--white)}.bg-grey{--background:var(--grey);--background-hover:var(--grey-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--grey-1)}}.bg-grey-0{--background:var(--grey-0);--background-hover:var(--grey-1);--color-hover:var(--black)}.bg-pink{--background:var(--pink);--background-hover:var(--pink-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--pink-1)}}.bg-pink-0{--background:var(--pink-0);--background-hover:var(--pink-1);--color-hover:var(--white)}.bg-purple{--background:var(--purple);--background-hover:var(--purple-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--purple-1)}}.bg-purple-0{--background:var(--purple-0);--background-hover:var(--purple-1);--color-hover:var(--white)}.bg-aqua{--background:var(--aqua);--background-hover:var(--aqua-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--aqua-1)}}.bg-aqua-0{--background:var(--aqua-0);--background-hover:var(--aqua-1);--color-hover:var(--black)}.bg-orange{--background:var(--orange);--background-hover:var(--orange-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--orange-1)}}.bg-orange-0{--background:var(--orange-0);--background-hover:var(--orange-1);--color-hover:var(--black)}.bg-warning{--background:var(--warning);--background-hover:var(--warning-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--warning-1)}}.bg-warning-0{--background:var(--warning-0);--background-hover:var(--warning-1);--color-hover:var(--black)}.bg-error{--background:var(--error);--background-hover:var(--error-1);--color:var(--white);--color-hover:var(--white);&.i-btn,&.i-tag{--background-hover:var(--error-1)}}.bg-error-0{--background:var(--error-0);--background-hover:var(--error-1);--color-hover:var(--white)}.bg-success{--background:var(--success);--background-hover:var(--success-1);--color:var(--black);--color-hover:var(--black);&.i-btn,&.i-tag{--background-hover:var(--success-1)}}.bg-success-0{--background:var(--success-0);--background-hover:var(--success-1);--color-hover:var(--white)}.bg-0{--background:var(--color-0);--color:var(--color-9)}.bg-1{--background:var(--color-1);--color:var(--color-9)}.bg-2{--background:var(--color-2);--color:var(--color-9)}.bg-3{--background:var(--color-3);--color:var(--color-9)}.bg-4{--background:var(--color-4);--color:var(--color-9)}.bg-5{--background:var(--color-5);--color:var(--color-0)}.bg-6{--background:var(--color-6);--color:var(--color-0)}.bg-7{--background:var(--color-7);--color:var(--color-0)}.bg-8{--background:var(--color-8);--color:var(--color-0)}.bg-9{--background:var(--color-9);--color:var(--color-0)}}.theme-dark{--color-0:#fff;--color-1:#e6e6e6;--color-2:#cecece;--color-3:#b5b5b5;--color-4:#9c9c9c;--color-5:#848484;--color-6:#6b6b6b;--color-7:#525252;--color-8:#3a3a3a;--color-9:#212121;--background:#1a1a1a;--background-1:#2a2a2a;--background-hover:transparent;--background-opacity:#1a1a1a66;--background-opacity-1:rgba(0,0,0,.4);--background-opacity-2:rgba(66,66,66,.4);--color-backdrop:rgba(0,0,0,.4);--color:var(--color-0);--color-main:#fff;--color-main-1:#fafafa;--color-main-0:#f1f1f133;--color-main-reverse:var(--black);--black-0:#00000040;--white-0:#ffffff40;--red-0:#ed130040;--blue-0:#0060ff40;--green-0:#00ff4832;--yellow-0:#ffca0032;--orange-0:#ff920054;--purple-0:#b800d740;--aqua-0:#00d1d140;--pink-0:#b5005a60;--grey-0:#ffffff17;--brown-0:#9d3d0040;--warning-0:#ffd74040;--error-0:#ff525240;--success-0:#69f0ae40;background:var(--background)}@media (prefers-color-scheme:dark){.theme-auto{--color-0:#fff;--color-1:#e6e6e6;--color-2:#cecece;--color-3:#b5b5b5;--color-4:#9c9c9c;--color-5:#848484;--color-6:#6b6b6b;--color-7:#525252;--color-8:#3a3a3a;--color-9:#212121;--background:#1a1a1a;--background-1:#2a2a2a;--background-hover:transparent;--background-opacity:#1a1a1a66;--background-opacity-1:rgba(0,0,0,.4);--background-opacity-2:rgba(66,66,66,.4);--color-backdrop:rgba(0,0,0,.6);--color:var(--color-0);--color-main:#fff;--color-main-1:#fafafa;--color-main-0:#f1f1f133;--color-main-reverse:var(--black);--shadow:0 0 12px rgba(0,0,0,.4);--black-0:#00000040;--white-0:#ffffff40;--red-0:#ed130040;--blue-0:#0060ff40;--green-0:#00ff4832;--yellow-0:#ffca0032;--orange-0:#ff920054;--purple-0:#b800d740;--aqua-0:#00d1d140;--pink-0:#b5005a60;--grey-0:#ffffff17;--brown-0:#9d3d0040;--warning-0:#ffd74040;--error-0:#ff525240;--success-0:#69f0ae40;background:var(--background)}}.code,.kbd{align-items:center;border-radius:4px;display:inline-flex;font-family:inherit;font-size:.86em;line-height:1.5;margin:0 .2em;padding:0 .4em;white-space:nowrap}.code{background:var(--color-9);border:1px solid var(--color-8);color:var(--color-0);font-family:unset}.kbd{background-color:var(--white);border-bottom:3px solid var(--grey-1);border-right:2px solid var(--grey-1);box-shadow:-1px -1px 1px var(--color-9);color:var(--black)}.chip{align-items:center;background:var(--color-main);border-radius:var(--radius);color:var(--color-main-reverse);display:inline-flex;font-size:.94em;padding:.05em .72em;transition:var(--transition);&:hover{--background-hover:var(--color-main-1);background:var(--background-hover)}}.link{color:var(--blue);display:inline-flex;position:relative;white-space:nowrap}:root{scrollbar-gutter:auto;.absolute{position:absolute}.relative{position:relative}.fixed{position:fixed}.inset-0{inset:0}.flex{display:flex;gap:inherit}.grid{display:grid}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink{flex-shrink:0}.sticky-top{position:sticky;top:0;z-index:10}.sticky-bottom{bottom:0;position:sticky;z-index:10}.sticky-left{left:0;position:sticky;z-index:10}.sticky-right{position:sticky;right:0;z-index:10}.text-center{text-align:center}.text-right{text-align:right}.bordered{border:1px solid var(--color-7)}.ellipsis{text-overflow:ellipsis;white-space:nowrap}.ellipsis,.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.justify-center{justify-content:center}.justify-evenly{justify-content:space-evenly}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.self-center{align-self:center}.h-100vh{height:100dvh}.bg-blur{backdrop-filter:var(--blur);background:var(--background-opacity)}.roundless{border-radius:0}.round{border-radius:50dvw}.round-0{border-radius:var(--radius)}.disabled{cursor:not-allowed;opacity:.4}.hidden{display:none!important}.shadow{box-shadow:var(--shadow)}.hover-shadow{transition:var(--transition);&:hover{box-shadow:var(--shadow)}}.hover-text-shadow{transition:var(--transition);&:hover{text-shadow:var(--shadow)}}.no-transition{transition:none!important}.hover-opacity{opacity:0;transition:var(--transition);&:hover{opacity:1}}.hover-children{opacity:0;transform:var(--transition)}.hover-parent{&:hover{.hover-children{opacity:1}}}.bg-transparent{background:transparent}.font-italic{font-style:italic}.font-bold{font-weight:600}.font-sm{font-size:.8em}.font-lg{font-size:1.2em}.mg-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.mg-0{margin:0}.mx-0{margin-inline:0}.my-0{margin-block:0}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.pd-0{padding:0}.px-0{padding-inline:0}.py-0{padding-block:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.pb-0{padding-bottom:0}.gap-0{gap:0}.mg-1{margin:1px}.mx-1{margin-inline:1px}.my-1{margin-block:1px}.mt-1{margin-top:1px}.mb-1{margin-bottom:1px}.ml-1{margin-left:1px}.mr-1{margin-right:1px}.pd-1{padding:1px}.px-1{padding-inline:1px}.py-1{padding-block:1px}.pl-1{padding-left:1px}.pr-1{padding-right:1px}.pt-1{padding-top:1px}.pb-1{padding-bottom:1px}.gap-1{gap:1px}.mg-2{margin:2px}.mx-2{margin-inline:2px}.my-2{margin-block:2px}.mt-2{margin-top:2px}.mb-2{margin-bottom:2px}.ml-2{margin-left:2px}.mr-2{margin-right:2px}.pd-2{padding:2px}.px-2{padding-inline:2px}.py-2{padding-block:2px}.pl-2{padding-left:2px}.pr-2{padding-right:2px}.pt-2{padding-top:2px}.pb-2{padding-bottom:2px}.gap-2{gap:2px}.mg-4{margin:4px}.mx-4{margin-inline:4px}.my-4{margin-block:4px}.mt-4{margin-top:4px}.mb-4{margin-bottom:4px}.ml-4{margin-left:4px}.mr-4{margin-right:4px}.pd-4{padding:4px}.px-4{padding-inline:4px}.py-4{padding-block:4px}.pl-4{padding-left:4px}.pr-4{padding-right:4px}.pt-4{padding-top:4px}.pb-4{padding-bottom:4px}.gap-4{gap:4px}.mg-6{margin:6px}.mx-6{margin-inline:6px}.my-6{margin-block:6px}.mt-6{margin-top:6px}.mb-6{margin-bottom:6px}.ml-6{margin-left:6px}.mr-6{margin-right:6px}.pd-6{padding:6px}.px-6{padding-inline:6px}.py-6{padding-block:6px}.pl-6{padding-left:6px}.pr-6{padding-right:6px}.pt-6{padding-top:6px}.pb-6{padding-bottom:6px}.gap-6{gap:6px}.mg-8{margin:8px}.mx-8{margin-inline:8px}.my-8{margin-block:8px}.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}.ml-8{margin-left:8px}.mr-8{margin-right:8px}.pd-8{padding:8px}.px-8{padding-inline:8px}.py-8{padding-block:8px}.pl-8{padding-left:8px}.pr-8{padding-right:8px}.pt-8{padding-top:8px}.pb-8{padding-bottom:8px}.gap-8{gap:8px}.mg-10{margin:10px}.mx-10{margin-inline:10px}.my-10{margin-block:10px}.mt-10{margin-top:10px}.mb-10{margin-bottom:10px}.ml-10{margin-left:10px}.mr-10{margin-right:10px}.pd-10{padding:10px}.px-10{padding-inline:10px}.py-10{padding-block:10px}.pl-10{padding-left:10px}.pr-10{padding-right:10px}.pt-10{padding-top:10px}.pb-10{padding-bottom:10px}.gap-10{gap:10px}.mg-12{margin:12px}.mx-12{margin-inline:12px}.my-12{margin-block:12px}.mt-12{margin-top:12px}.mb-12{margin-bottom:12px}.ml-12{margin-left:12px}.mr-12{margin-right:12px}.pd-12{padding:12px}.px-12{padding-inline:12px}.py-12{padding-block:12px}.pl-12{padding-left:12px}.pr-12{padding-right:12px}.pt-12{padding-top:12px}.pb-12{padding-bottom:12px}.gap-12{gap:12px}.mg-16{margin:16px}.mx-16{margin-inline:16px}.my-16{margin-block:16px}.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}.ml-16{margin-left:16px}.mr-16{margin-right:16px}.pd-16{padding:16px}.px-16{padding-inline:16px}.py-16{padding-block:16px}.pl-16{padding-left:16px}.pr-16{padding-right:16px}.pt-16{padding-top:16px}.pb-16{padding-bottom:16px}.gap-16{gap:16px}.mg-20{margin:20px}.mx-20{margin-inline:20px}.my-20{margin-block:20px}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.ml-20{margin-left:20px}.mr-20{margin-right:20px}.pd-20{padding:20px}.px-20{padding-inline:20px}.py-20{padding-block:20px}.pl-20{padding-left:20px}.pr-20{padding-right:20px}.pt-20{padding-top:20px}.pb-20{padding-bottom:20px}.gap-20{gap:20px}.mg-24{margin:24px}.mx-24{margin-inline:24px}.my-24{margin-block:24px}.mt-24{margin-top:24px}.mb-24{margin-bottom:24px}.ml-24{margin-left:24px}.mr-24{margin-right:24px}.pd-24{padding:24px}.px-24{padding-inline:24px}.py-24{padding-block:24px}.pl-24{padding-left:24px}.pr-24{padding-right:24px}.pt-24{padding-top:24px}.pb-24{padding-bottom:24px}.gap-24{gap:24px}.mg-28{margin:28px}.mx-28{margin-inline:28px}.my-28{margin-block:28px}.mt-28{margin-top:28px}.mb-28{margin-bottom:28px}.ml-28{margin-left:28px}.mr-28{margin-right:28px}.pd-28{padding:28px}.px-28{padding-inline:28px}.py-28{padding-block:28px}.pl-28{padding-left:28px}.pr-28{padding-right:28px}.pt-28{padding-top:28px}.pb-28{padding-bottom:28px}.gap-28{gap:28px}.mg-32{margin:32px}.mx-32{margin-inline:32px}.my-32{margin-block:32px}.mt-32{margin-top:32px}.mb-32{margin-bottom:32px}.ml-32{margin-left:32px}.mr-32{margin-right:32px}.pd-32{padding:32px}.px-32{padding-inline:32px}.py-32{padding-block:32px}.pl-32{padding-left:32px}.pr-32{padding-right:32px}.pt-32{padding-top:32px}.pb-32{padding-bottom:32px}.gap-32{gap:32px}.mg-36{margin:36px}.mx-36{margin-inline:36px}.my-36{margin-block:36px}.mt-36{margin-top:36px}.mb-36{margin-bottom:36px}.ml-36{margin-left:36px}.mr-36{margin-right:36px}.pd-36{padding:36px}.px-36{padding-inline:36px}.py-36{padding-block:36px}.pl-36{padding-left:36px}.pr-36{padding-right:36px}.pt-36{padding-top:36px}.pb-36{padding-bottom:36px}.gap-36{gap:36px}.mg-40{margin:40px}.mx-40{margin-inline:40px}.my-40{margin-block:40px}.mt-40{margin-top:40px}.mb-40{margin-bottom:40px}.ml-40{margin-left:40px}.mr-40{margin-right:40px}.pd-40{padding:40px}.px-40{padding-inline:40px}.py-40{padding-block:40px}.pl-40{padding-left:40px}.pr-40{padding-right:40px}.pt-40{padding-top:40px}.pb-40{padding-bottom:40px}.gap-40{gap:40px}.mg-48{margin:48px}.mx-48{margin-inline:48px}.my-48{margin-block:48px}.mt-48{margin-top:48px}.mb-48{margin-bottom:48px}.ml-48{margin-left:48px}.mr-48{margin-right:48px}.pd-48{padding:48px}.px-48{padding-inline:48px}.py-48{padding-block:48px}.pl-48{padding-left:48px}.pr-48{padding-right:48px}.pt-48{padding-top:48px}.pb-48{padding-bottom:48px}.gap-48{gap:48px}.mg-56{margin:56px}.mx-56{margin-inline:56px}.my-56{margin-block:56px}.mt-56{margin-top:56px}.mb-56{margin-bottom:56px}.ml-56{margin-left:56px}.mr-56{margin-right:56px}.pd-56{padding:56px}.px-56{padding-inline:56px}.py-56{padding-block:56px}.pl-56{padding-left:56px}.pr-56{padding-right:56px}.pt-56{padding-top:56px}.pb-56{padding-bottom:56px}.gap-56{gap:56px}.mg-60{margin:60px}.mx-60{margin-inline:60px}.my-60{margin-block:60px}.mt-60{margin-top:60px}.mb-60{margin-bottom:60px}.ml-60{margin-left:60px}.mr-60{margin-right:60px}.pd-60{padding:60px}.px-60{padding-inline:60px}.py-60{padding-block:60px}.pl-60{padding-left:60px}.pr-60{padding-right:60px}.pt-60{padding-top:60px}.pb-60{padding-bottom:60px}.gap-60{gap:60px}.mg-72{margin:72px}.mx-72{margin-inline:72px}.my-72{margin-block:72px}.mt-72{margin-top:72px}.mb-72{margin-bottom:72px}.ml-72{margin-left:72px}.mr-72{margin-right:72px}.pd-72{padding:72px}.px-72{padding-inline:72px}.py-72{padding-block:72px}.pl-72{padding-left:72px}.pr-72{padding-right:72px}.pt-72{padding-top:72px}.pb-72{padding-bottom:72px}.gap-72{gap:72px}.mg-80{margin:80px}.mx-80{margin-inline:80px}.my-80{margin-block:80px}.mt-80{margin-top:80px}.mb-80{margin-bottom:80px}.ml-80{margin-left:80px}.mr-80{margin-right:80px}.pd-80{padding:80px}.px-80{padding-inline:80px}.py-80{padding-block:80px}.pl-80{padding-left:80px}.pr-80{padding-right:80px}.pt-80{padding-top:80px}.pb-80{padding-bottom:80px}.gap-80{gap:80px}.mg-96{margin:96px}.mx-96{margin-inline:96px}.my-96{margin-block:96px}.mt-96{margin-top:96px}.mb-96{margin-bottom:96px}.ml-96{margin-left:96px}.mr-96{margin-right:96px}.pd-96{padding:96px}.px-96{padding-inline:96px}.py-96{padding-block:96px}.pl-96{padding-left:96px}.pr-96{padding-right:96px}.pt-96{padding-top:96px}.pb-96{padding-bottom:96px}.gap-96{gap:96px}.mg-100{margin:100px}.mx-100{margin-inline:100px}.my-100{margin-block:100px}.mt-100{margin-top:100px}.mb-100{margin-bottom:100px}.ml-100{margin-left:100px}.mr-100{margin-right:100px}.pd-100{padding:100px}.px-100{padding-inline:100px}.py-100{padding-block:100px}.pl-100{padding-left:100px}.pr-100{padding-right:100px}.pt-100{padding-top:100px}.pb-100{padding-bottom:100px}.gap-100{gap:100px}.mg-120{margin:120px}.mx-120{margin-inline:120px}.my-120{margin-block:120px}.mt-120{margin-top:120px}.mb-120{margin-bottom:120px}.ml-120{margin-left:120px}.mr-120{margin-right:120px}.pd-120{padding:120px}.px-120{padding-inline:120px}.py-120{padding-block:120px}.pl-120{padding-left:120px}.pr-120{padding-right:120px}.pt-120{padding-top:120px}.pb-120{padding-bottom:120px}.gap-120{gap:120px}.mg-160{margin:160px}.mx-160{margin-inline:160px}.my-160{margin-block:160px}.mt-160{margin-top:160px}.mb-160{margin-bottom:160px}.ml-160{margin-left:160px}.mr-160{margin-right:160px}.pd-160{padding:160px}.px-160{padding-inline:160px}.py-160{padding-block:160px}.pl-160{padding-left:160px}.pr-160{padding-right:160px}.pt-160{padding-top:160px}.pb-160{padding-bottom:160px}.gap-160{gap:160px}.mg-200{margin:200px}.mx-200{margin-inline:200px}.my-200{margin-block:200px}.mt-200{margin-top:200px}.mb-200{margin-bottom:200px}.ml-200{margin-left:200px}.mr-200{margin-right:200px}.pd-200{padding:200px}.px-200{padding-inline:200px}.py-200{padding-block:200px}.pl-200{padding-left:200px}.pr-200{padding-right:200px}.pt-200{padding-top:200px}.pb-200{padding-bottom:200px}.gap-200{gap:200px}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.h-10{height:10%}.h-20{height:20%}.h-25{height:25%}.h-30{height:30%}.h-40{height:40%}.h-50{height:50%}.h-60{height:60%}.h-70{height:70%}.h-75{height:75%}.h-80{height:80%}.h-90{height:90%}.h-100{height:100%}.colspan-2{grid-column:span 2}.colspan-3{grid-column:span 3}.colspan-4{grid-column:span 4}.colspan-5{grid-column:span 5}.rowspan-2{grid-row:span 2}.rowspan-3{grid-row:span 3}.rowspan-4{grid-row:span 4}.rowspan-5{grid-row:span 5}.colspan-full{grid-column:1/-1}.rowspan-full{grid-row:1/-1}}@media (min-width:880px){.screen-sm{display:none!important}}@media (max-width:880px){.screen-lg{display:none!important}}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes bounce{20%{transform:translate(12px)}50%{transform:translate(-8px)}80%{transform:translate(6px)}}.i-affix{display:flex;flex-direction:column;gap:.5em;position:fixed;transition:var(--transition);z-index:50}.i-affix:not(.i-affix-visible)>.i-affix-target{opacity:0;pointer-events:none}.i-ripple-container{border-radius:inherit;contain:strict;inset:0;overflow:hidden;pointer-events:none;position:absolute;.i-ripple{background:var(--color);border-radius:50%;opacity:.15;position:absolute;transform:translate(-50%,-50%) scale(.25);transform-origin:50%}.i-ripple-active{opacity:0;transform:translate(-50%,-50%) scale(1)}}.i-loading-container{backdrop-filter:blur(2px);border-radius:inherit;contain:paint;flex-direction:column;font-size:inherit;gap:.5em;transform:translateZ(0)}.i-loading-container,.i-loading-icon{align-items:center;display:flex;justify-content:center}.i-loading-icon{pointer-events:none;transition:var(--transition);z-index:1}.i-loading-icon:after,.i-loading-icon:before{border-radius:1em;content:"\20";flex-shrink:0;height:1em;margin:auto -.25em;transform:scale(0);width:1em}.i-loading-icon:before{animation:ioca-loading 1s linear infinite;background-color:var(--color);margin-left:auto;opacity:.6}.i-loading-icon:after{animation:ioca-loading 1s linear .15s infinite;background-color:var(--color);margin-right:auto}@keyframes ioca-loading{50%{transform:scale(1)}}.i-btn{--gap:0.25em;--background:var(--color-main);--background-hover:var(--color-main-1);--color:var(--color-main-reverse);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;flex-shrink:0;font-size:.94em;font-weight:500;gap:var(--gap);height:2.25em;justify-content:center;line-height:1;outline:none;padding:0 .6em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}}.i-btn-toggle{overflow:hidden}.i-btn-toggle-content{align-items:center;display:inline-flex;gap:var(--gap);transform:scale(.4);&.i-btn-toggle-active{transform:none;transition:var(--transition)}}.i-btn-block{width:100%}.i-btn-large{font-size:1.25em}.i-btn-extreme{font-size:2em;height:2em}.i-btn-small{font-size:.86em;height:2em;line-height:2;padding:0 .4em}.i-btn-mini{font-size:.8em;height:1.4em;line-height:1;padding:0 .2em}.i-btn-square{padding:0;width:2.25em;&.i-btn-extreme,&.i-btn-small{width:2em}}.i-btn:hover{--background:var(--background-hover);--color:var(--color-hover,var(--color-main-reverse))}.i-btn-secondary{--background-hover:var(--color-main-0);--background:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-flat{--background-hover:var(--color-main-0);--background:transparent;--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-outline{--background-hover:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1);&.i-btn{--background:transparent;border-color:var(--color)}}.i-btn.i-btn-flat:hover,.i-btn.i-btn-outline:hover,.i-btn.i-btn-secondary:hover{--background:var(--background-hover)}.i-btn-content{display:contents}.i-btn-loading{cursor:default;opacity:.628}.i-btn-group-horizonal{display:flex;.i-btn{&:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}&:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}}}.i-btn-group-vertical{display:flex;flex-direction:column;.i-btn{&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}}}.icon{vertical-align:middle}.i-badge{align-self:center;border-radius:var(--radius);display:inline-flex;flex-shrink:0;position:relative}.i-badge-content{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:inherit;box-shadow:var(--shadow);font-size:.86em;inset:0 0 auto auto;padding:.2em .5em;pointer-events:none;position:absolute;transform:translate(50%,-50%) scale(1);transition:all .16s;z-index:1;&.i-badge-dot{border-radius:1em;color:transparent;height:1em;overflow:hidden;padding:0;width:1em}&.i-badge-hidden,&:empty{transform:translate(50%,-50%) scale(0)}}.i-card{--card-padding:8px 12px;backdrop-filter:var(--blur);background:var(--background-opacity-2);border-radius:var(--radius);display:flex;flex-direction:column;overflow:auto}.i-card-bordered{border:1px solid var(--color-8)}.i-card-header{align-items:center;display:flex;gap:.25em;padding:var(--card-padding)}.i-card-content{flex:1}.i-card-footer{gap:.25em;margin-top:auto;padding:var(--card-padding)}.i-card-footer,.i-input-label{align-items:center;display:flex}.i-input-label{align-content:flex-start;border-radius:var(--radius);flex-wrap:wrap;gap:.5em;max-width:100%;position:relative;width:100%;&:has(.i-input-success){--color:var(--green)}&:has(.i-input-warning){--color:var(--yellow)}&:has(.i-input-error){--color:var(--error)}}.i-textarea-label{align-items:baseline}.i-input-inline{flex-wrap:nowrap;.i-input-item,.i-radio-options,.i-upload-inner{flex:1 1 auto}.i-input-message{backdrop-filter:var(--blur);background:var(--background-opacity);padding:.2em .5em;position:absolute;right:12%;top:-.8em}}.i-input-label-text{border-radius:inherit;flex:0 0 var(--label-width);font-weight:500;text-align:var(--label-align);transition:all .12s}.i-input-item{--input-border-width:2px;--invert-input-border-width:calc(var(--input-border-width)*-1);align-items:baseline;border:var(--input-border-width) solid var(--background-opacity-2);border-radius:inherit;display:flex;flex:1 1 100%;max-width:100%;transition:var(--transition);.i-btn{align-self:stretch}&.i-input-focus,&:focus-within,&:hover{background-color:transparent;border-color:var(--color-8)}&.i-input-success{border-color:var(--green-0)}&.i-input-warning{border-color:var(--yellow-0)}&.i-input-error{border-color:var(--error-0)}}.i-input-borderless{background:var(--background-opacity-2);border-color:transparent}.i-input-underline{background:transparent;border-color:var(--background-opacity-2);border-radius:0;border-width:0 0 var(--input-border-width) 0}.i-input{background:transparent;border-radius:inherit;color:inherit;flex:1;outline:none;padding:var(--padding);text-align:inherit;transition:var(--transition);width:100%;&[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}&[readonly]{caret-color:transparent}&:disabled{background:var(--background-opacity-1);cursor:not-allowed}}.i-input-message{--color:var(--color-5);align-self:center;border-radius:var(--radius);color:var(--color);flex:1 1 auto;font-size:.8em;pointer-events:none;z-index:1}.i-input-success{--color:var(--green)}.i-input-warning{--color:var(--yellow)}.i-input-error{--color:var(--error)}.i-textarea{display:block;max-width:100%;min-height:2.14em;transition:var(--transition),width 0s,height 0s}.i-input-append,.i-input-prepend{align-self:stretch;display:flex;margin:var(--invert-input-border-width);place-items:center;.i-btn{border-radius:inherit;height:unset}}.i-input-prepend{border-bottom-left-radius:inherit;border-top-left-radius:inherit;margin-right:0}.i-input-append{border-bottom-right-radius:inherit;border-top-right-radius:inherit;margin-left:0}.i-helpericon.i-helpericon-clear,.i-input-clearable:hover .i-input-append{display:none}.i-input-item:hover .i-helpericon-clear{display:flex}.i-options-block{&>.i-checkbox-item,&>.i-radio-item{flex:1 1 100%}}.i-input-number{padding:var(--padding);padding-inline:0;text-align:center}.i-checkbox{gap:1em}.i-checkbox-item{align-items:baseline;align-self:flex-start;border-radius:var(--radius);display:inline-flex;gap:.5em;&:hover{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--color-5)}.i-checkbox-switch{box-shadow:inset 0 0 0 2px var(--color-8)}.i-checkbox-partof{box-shadow:none}}.i-checkbox-input{&:checked{box-shadow:none}}}.i-checkbox-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-checkbox-text{border-radius:inherit;color:var(--color-3);display:inline-flex;transition:var(--transition);user-select:none;&:empty{display:none}}.i-checkbox-input{align-self:center;appearance:none;border-radius:inherit;cursor:inherit;display:flex;height:1.125em;outline:0;overflow:hidden;position:relative;transition:var(--transition);width:1.125em}.i-checkbox-custom{height:0;width:0}.i-checkbox-switch{background:var(--color-9);border-radius:2.4em;box-shadow:inset 0 0 0 2px var(--color-9);height:1.125em;overflow:unset;width:2.2em;&:hover{&:after{background-color:var(--background);box-shadow:0 0 0 2px var(--color-7)}}}.i-checkbox-default{border-radius:2px;box-shadow:inset 0 0 0 2px var(--color-7)}.i-checkbox-button{display:none}.i-checkbox-default:after,.i-checkbox-partof:after,.i-checkbox-switch:after,.i-checkbox-switch:before{content:"\20";position:absolute;transition:var(--transition)}.i-checkbox-default:after{border-bottom:2px solid var(--color-main-reverse);border-radius:1px;border-right:2px solid var(--color-main-reverse);height:50%;left:34%;top:16%;transform:rotate(90deg) scale(0);width:20%}.i-checkbox-switch{&:after{background-color:var(--background);border-radius:1em;box-shadow:0 0 0 2px var(--color-8);height:1em;left:0;top:50%;transform:translateY(-50%);transition:var(--transition);width:1em}&:active{&:after{width:1.5em}&:checked:after{left:-.5em}}}.i-checkbox-input:checked{&.i-checkbox-default{background-color:var(--color-main);&:after{transform:rotate(45deg)}}&.i-checkbox-switch{background-color:var(--color-main);&:after{background-color:var(--background);box-shadow:0 0 0 2px var(--color-main);transform:translate(1.2em,-50%)}}&+.i-checkbox-text{color:var(--color-main)}}.i-checkbox-button{&+.i-checkbox-text{align-items:center;border:1.5px solid var(--color-9);border-radius:2em;display:flex;font-size:.9em;line-height:1.8;padding:0 1em;white-space:nowrap}&:hover+.i-checkbox-text{background-color:var(--color-9);border-color:var(--color-8)}&:checked+.i-checkbox-text{background-color:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-checkbox-partof{background-color:var(--color-main);border-radius:2px;&:after{background-color:var(--color-main-reverse);border-radius:var(--radius);height:2px;left:50%;top:50%;transform:translate(-50%,-50%);width:.5em}}.i-checkbox-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-checkbox-success{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--success-0);&:checked{background-color:var(--success-0)}}.i-checkbox-message{color:var(--success)}}.i-checkbox-warning{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--warning-0);&:checked{background-color:var(--warning-0)}}.i-checkbox-message{color:var(--warning)}}.i-checkbox-error{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--error-0);&:checked{background-color:var(--error-0)}}.i-checkbox-message{color:var(--error)}}.i-helpericon{align-items:center;align-self:center;border-radius:var(--radius);color:var(--color-7);display:flex;font-size:.8em;justify-content:center;margin:.25em;min-height:1.675em;min-width:1.675em;padding:.125em;position:relative;transition:var(--transition);&:hover{background:var(--background-opacity-1);color:var(--color-3)}}.i-collapse{border-radius:var(--radius)}.i-collapse-bordered{border:1px solid var(--color-8);.i-collapse-item+.i-collapse-item{border-top:1px solid var(--color-8)}}.i-collapse-header,.i-collapse-item{border-radius:var(--radius)}.i-collapse-header{align-items:center;display:flex;font-weight:500;justify-content:space-between;padding:.5em;transition:var(--transition);&:hover{background-color:var(--background-opacity-2)}}.i-collapse-toggle{display:flex;margin:0;user-select:none}.i-collapse-content{border-radius:var(--radius);height:0;overflow:hidden;padding:0 .5em;transition:var(--transition)}.i-collapse-active>.i-collapse-header,.i-collapse-header:hover{opacity:1}.i-collapse-active>.i-collapse-content{height:unset;padding:.5em}.i-collapse-disabled{opacity:.4;pointer-events:none;>.i-collapse-content{height:0;overflow:hidden;padding:0 .5em}}.i-empty{color:var(--color-7);height:3em;margin:auto;width:3em}.i-datagrid-container{border-radius:var(--radius);overflow:auto;&:has(.i-datagrid-loading){overflow:hidden!important;position:relative}}.i-datagrid-loading{overflow:hidden!important;user-select:none;.i-datagrid{max-height:100%;max-width:100%}.i-loading-container{backdrop-filter:blur(2px);background:var(--background-opacity);inset:0;position:absolute;z-index:10}}.i-datagrid{display:grid;grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);min-width:100%;width:fit-content;.i-empty{grid-column:1/-1;margin:1em auto}}.i-datagrid-bordered{--datagrid-border-color:var(--color-9);outline:1px solid var(--datagrid-border-color);.i-datagrid-virtual-header{padding-bottom:1px}.i-datagrid-cell{outline:1px solid var(--datagrid-border-color)}}.i-datagrid-striped{.i-datagrid-row{--datagrid-border-color:var(--color-8);&:nth-child(odd){--datagrid-cell-background:var(--background-1)}}}.i-datagrid .i-datagrid-row{--datagrid-cell-background:var(--background);display:contents;&:hover{--datagrid-cell-background:var(--background);.i-datagrid-cell{z-index:1}[class*=" i-datagrid-cell-fixed"]{z-index:3}}}.i-datagrid-cell{align-items:center;background:var(--datagrid-cell-background);display:flex;gap:4px;justify-content:var(--datagrid-justify);overflow:hidden;padding:var(--cell-padding);position:sticky;transition:background-color .12s}[class*=" i-datagrid-cell-fixed"]{z-index:2}.i-datagrid-cell-fixed-right{box-shadow:-2px 0 4px var(--color-9)}.i-datagrid-cell-fixed-left{box-shadow:2px 0 4px var(--color-9)}.i-datagrid-cell-content{display:inherit;flex:1 1 auto;gap:inherit;justify-content:inherit;min-width:0;overflow:hidden;white-space:nowrap}.i-datagrid-cell-content-ellipsis{display:block;text-align:var(--datagrid-justify);text-overflow:ellipsis}.i-datagrid-header{.i-datagrid-cell{--datagrid-cell-background:var(--background);line-height:1;text-overflow:ellipsis;user-select:none;white-space:nowrap;z-index:3}[class*=" i-datagrid-cell-fixed"]{z-index:4}}.i-datagrid-resizor{cursor:ew-resize;inset:0 0 0 auto;position:absolute;transition:.12s;width:4px;&:hover{background-color:var(--color-5)}}.i-datagrid-has-sorter{cursor:pointer;&:hover{--datagrid-cell-background:var(--color-9)}}.i-datagrid-sorter{color:var(--color-7);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;width:.8em}.i-datagrid-sorter-caret{&:first-child{margin-bottom:-.4em;transform:rotate(-90deg)}&:last-child{transform:rotate(90deg)}}.i-datagrid-sorter-asc{.i-datagrid-sorter-caret:first-child{color:var(--color-main)}}.i-datagrid-sorter-desc{.i-datagrid-sorter-caret:last-child{color:var(--color-main)}}.i-datagrid-virtual-header{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.i-description{display:grid}.i-description-item{display:flex;gap:.5em}.i-description-item-vertical{flex-direction:column}.i-description-label{color:var(--color-5);flex-shrink:0;width:var(--description-label-width)}.i-description-value{flex:1}.i-backdrop-drawer{backdrop-filter:var(--blur);background:var(--color-backdrop);contain:paint;display:flex;inset:0;opacity:0;pointer-events:none;position:fixed;transition:var(--transition);z-index:100;&.i-active{opacity:1;pointer-events:unset}}.i-drawer{backdrop-filter:var(--blur);background:var(--background);box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:100%;max-width:100%;overflow:auto;position:absolute;transition:var(--transition)}.i-drawer-left{inset:0 auto 0 0;transform:translate3d(-100%,0,0)}.i-drawer-top{inset:0 0 auto;transform:translate3d(0,-100%,0)}.i-drawer-right{inset:0 0 0 auto;transform:translate3d(100%,0,0)}.i-drawer-bottom{inset:auto 0 0;transform:translate3d(0,100%,0)}.i-active>.i-drawer{opacity:1;pointer-events:unset;transform:none}.i-drawer-footer,.i-drawer-header{align-items:center;display:flex;padding:12px;&:empty{display:none}}.i-drawer-content{flex:1;overflow-x:hidden}.i-drawer-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}.i-list{--gap:0.5em;overflow:auto}.i-list-item{border-radius:var(--radius);display:flex;gap:var(--gap);padding:var(--padding);transition:var(--transition)}.i-list-item-bordered{box-shadow:inset 0 0 0 1px var(--color-8);&+.i-list-item-bordered{margin-top:-1px}&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}&:hover{box-shadow:inset 0 0 0 1px var(--color-7);z-index:1}}.i-list-option{cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:hover{background-color:var(--background-opacity-2)}&.i-list-item-active{background-color:var(--color-main-0)}}.i-list-item-label{align-self:flex-start}.i-popup{background:var(--background);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transform:translateY(2px);will-change:left,top,opacity,transform;z-index:100}.i-popup,.i-popup-arrow{position:absolute;transition:all .12s}.i-popup-arrow{color:unset;height:24px;pointer-events:none;width:8px;path{fill:var(--background)}}.i-dropdown-content{border-radius:inherit;gap:2px;max-height:40vh;overflow-x:hidden;padding:8px}.i-dropdown-content,.i-editor{display:flex;flex-direction:column}.i-editor{position:relative;&:focus-within,&:hover{>.i-editor-content,>.i-editor-controls{border-color:var(--color-8)}}}.i-editor-borderless{border-radius:var(--radius);&>.i-editor-content,&>.i-editor-controls{border:none}}.i-editor-controls{border:2px solid var(--color-9);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;display:flex;gap:2px;padding:2px;transition:var(--transition);.i-btn{--color:var(--color-5);&:hover{--color:var(--color);.i-editor-control-tip{opacity:1}}}}.i-editor-control-tip{backdrop-filter:var(--blur);border-radius:4px;left:50%;line-height:1;opacity:0;padding:4px;pointer-events:none;position:absolute;top:100%;transform:translate(-50%);transition:var(--transition);z-index:1}.i-editor-content{word-wrap:break-word;border:2px solid var(--color-9);border-radius:0 0 var(--radius) var(--radius);flex:1;outline:none;overflow:auto;padding:var(--padding);tab-size:1em;transition:var(--transition);white-space:pre-wrap;word-break:break-all;&:first-child{border-radius:var(--radius)}&:focus,&:hover{border-color:var(--color-8)}a{color:var(--blue)}img{margin:0}&:empty:before{color:var(--color-5);content:attr(data-placeholder);pointer-events:none}}.i-editor-memtion{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 0;max-width:240px;min-width:120px;overflow:auto;padding:4px;z-index:1000;.i-list-item{color:var(--color-5)}.i-list-item-active{color:var(--color-main)}}.i-memtion-tag{align-items:center;display:inline-flex;max-width:100%;user-select:none;vertical-align:baseline}.i-form{display:grid;max-width:100%}.i-form-inline{--label-inline:nowrap;.i-input-label{flex-wrap:nowrap}}.i-modal-container{position:fixed}.i-modal-backdrop,.i-modal-container{inset:0;pointer-events:none;z-index:100}.i-modal-backdrop{backdrop-filter:blur(4px);background:var(--color-backdrop);contain:paint;opacity:0;position:absolute;transition:var(--transition)}.i-modal-backdrop.i-modal-backdrop-active{opacity:1}.i-modal-layer{display:flex;inset:0;overflow:hidden;overscroll-behavior:contain;padding:12px;pointer-events:none;position:absolute;z-index:101}.i-modal-layer.i-modal-active{pointer-events:auto}.i-modal,.i-modal-layer.i-modal-hide-backdrop{pointer-events:none}.i-modal{background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;line-height:normal;margin:auto;max-height:100%;max-width:100%;opacity:0;overflow-x:hidden;position:relative;transform:translateY(12px);transition:var(--transition)}.i-modal-layer.i-modal-active .i-modal{opacity:1;pointer-events:all;transform:none}.i-modal.bounced{animation:bounce .4s ease-in-out 0s}.i-modal-customized{overflow:unset}.i-modal-footer,.i-modal-header{align-items:center;display:flex;gap:12px;padding:12px;position:relative;&:empty{display:none}}.i-modal-header>b{display:contents}.i-modal-footer{justify-content:center}.i-modal-content{flex:1;line-height:1.5;max-height:100%;overflow-x:hidden}.i-modal{.i-modal-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}}.i-text-gradient{-webkit-text-fill-color:transparent}.i-text-gradient-wave{animation:text-wave 1.2s linear 0s infinite;background-position:0 0;background-size:200% 100%}@keyframes text-wave{to{background-position:-100% 0}}.i-progress{background:var(--background-1);border-radius:var(--radius);cursor:pointer;display:flex;flex:1 1 100%;position:relative}.i-progress-vertical{height:100%;&>.i-progress-bar{align-self:flex-end;height:100%}}.i-progress-bar{background:var(--color-main);border-radius:var(--radius);position:relative;transform-origin:left;transition:var(--transition);width:100%}.i-progress-cursor{border-radius:inherit;box-shadow:var(--shadow);display:flex;min-height:120%;min-width:1em;overflow:hidden;position:absolute;right:0;top:50%;transform:translate(50%,-50%) scale(0);transition:var(--transition);user-select:none}.i-progress:hover .i-progress-cursor,.no-transition>.i-progress-cursor{transform:translate(50%,-50%) scale(1)}.i-progress-circle{position:relative}.i-progress-circle-path{border-radius:50px;transition:var(--transition)}.i-progress-circle-value{align-items:flex-end;display:flex;font-size:1.5em;gap:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.i-video{background:#000;border-radius:var(--radius);overflow:hidden;position:relative;video{height:100%;width:100%}}.i-video-controls{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);bottom:-1px;display:flex;font-size:.9em;gap:4px;left:0;padding:4px;position:absolute;right:0;transition:var(--transition);user-select:none;white-space:nowrap;.i-btn{flex-shrink:0}.i-icon{font-size:1.2em}&:hover{opacity:1;pointer-events:unset}}.i-video-controls-hidden{opacity:0;pointer-events:none}.i-video-control,.i-video-times{align-items:center;display:flex}.i-video-times{gap:4px;margin-inline:8px}.i-video-volume{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);bottom:100%;left:50%;opacity:0;padding:8px;pointer-events:none;position:absolute;transform:translate(-50%,4px);transition:var(--transition);z-index:1}.i-video-control-volume{position:relative;&:hover{& .i-video-volume{opacity:1;pointer-events:unset}}}.i-preview{padding:0;.i-modal{background:transparent;height:100%;overflow:unset;pointer-events:none!important;position:static;transform:none;width:100%}.i-preview-container{height:100%;position:relative;width:100%}.i-preview-content{align-items:center;display:flex;height:100%;justify-content:center;pointer-events:none;transition:var(--transition);width:100%;will-change:transform;*{pointer-events:all}}.i-preview-controls{align-items:center;background:var(--background-opacity);border-radius:var(--radius);display:flex;font-size:.9em;gap:1px;padding:4px;pointer-events:all;position:fixed;right:.5em;top:.5em;transition:all .24s ease-out;z-index:10;&:hover{opacity:1}}.i-preview-controls-hidden{opacity:0}.i-preview-unknown{align-items:center;background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;padding:.5em 1em}}.i-image{align-items:center;align-self:center;backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);display:inline-flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative;vertical-align:middle;.i-loading-container{backdrop-filter:var(--blur);z-index:1}&>img{border-radius:inherit;height:100%;object-fit:cover;width:100%}}.i-image-cover{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);display:flex;inset:0;justify-content:center;position:absolute}.i-messages{cursor:default;display:flex;flex-direction:column;inset:0;pointer-events:none;position:fixed;z-index:10000}.i-message,.i-messages{transition:var(--transition)}.i-message{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;padding:.625em 1em;pointer-events:all;position:absolute;transform:translate(80px) scale(.86) skew(-40deg);&.i-message-active{opacity:1;transform:translate(0)}}.i-pagination{align-items:center;display:flex;gap:.2em}.i-page{--background:transparent;--color:var(--color-7);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;height:2.25em;justify-content:center;min-width:2.25em;outline:none;padding:0 .32em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}.i-loading-container{backdrop-filter:var(--blur);background:var(--background-opacity);contain:paint;inset:0;position:absolute;z-index:1}&:hover{--background:var(--background-opacity-2)}&.i-page-active{--background:var(--color-main);--color:var(--color-main-reverse);cursor:default}&.i-page-loading{--background:unset;cursor:default}}.i-select{display:flex;gap:.25em}.i-select-multiple{flex-wrap:wrap;padding:.225em .628em;.i-tag{background:var(--background-opacity-1);line-height:1.425em;padding:0 .5em;position:relative}}.i-select-options{--gap:0.25em;border-radius:inherit;display:flex;flex-direction:column;gap:2px;max-height:40vh;overflow-x:hidden;padding:4px;.i-list-item{align-items:center;color:var(--color-5);justify-content:unset;&.i-list-item-active{background:var(--color-main-0);color:var(--color-main);.i-select-option-check{opacity:1}}&.disabled{pointer-events:none}}}.i-select-options-multiple{.i-list-item{&.i-list-item-active{background:transparent}}}.i-select-option-check{opacity:0}.i-select-filter{backdrop-filter:var(--blur);background:var(--background-opacity);border-bottom:1px solid var(--background-opacity-1);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:1;&:empty{display:none}}.i-tag{--background:var(--color-9);--color:var(--color-1);align-items:center;align-self:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);display:inline-flex;font-size:.81em;gap:.5em;justify-content:center;line-height:1;padding:.25em .5em;position:relative;transition:var(--transition);.i-tag-close{background:var(--error);color:var(--white);font-size:.81em;margin:0;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .16s;z-index:1;&:hover{background:var(--error-1);color:var(--white)}}&:hover{.i-tag-hover-close{opacity:1;transform:translate(50%,-50%) scale(1)}}}.i-tag-large{font-size:1em}.i-tag-extreme{font-size:1.5em;height:2em}.i-tag-small{font-size:.72em;padding:.125em .4em}.i-tag-dot{background-color:var(--color);border-radius:50%;box-shadow:0 -1px 1px 0 rgba(var(--color),.3);content:"\20";flex-shrink:0;height:.385em;transition:inherit;width:.385em}.i-tag-outline{--background:transparent;border-color:var(--color)}.i-tag-hover-close{opacity:0;transform:translate(50%,-50%) scale(0)}.i-tag-clickable{cursor:pointer;&:hover{background:var(--background-hover);color:var(--color-hover,var(--color))}}.i-colorpicker{display:inline-flex;width:fit-content}.i-colorpicker-handle{align-items:center;align-self:center;display:inline-flex;font-size:.8em;gap:.25em;position:relative}.i-colorpicker-square{border:2px solid var(--color-9);border-radius:var(--radius);cursor:pointer;display:inline-block;height:1.8em;transition:var(--transition);width:1.8em;&:hover{border-color:var(--color-8)}}.i-colorpicker-footer{display:flex;font-size:.8em;gap:4px}.i-colorpicker-text{background:var(--color-9);border-radius:var(--radius);cursor:pointer;padding:.25em .5em;transition:var(--transition);&:hover{background:var(--color-8)}}.rc-color-picker-panel{background:inherit;box-shadow:none}.i-datepicker-label{position:unset}.i-datepicker{padding:8px;user-select:none;.i-datepicker-item{cursor:pointer}}.i-datepicker-dates,.i-datepicker-weeks{display:grid;gap:2px;grid-template-columns:repeat(7,1fr)}.i-datepicker-item,.i-datepicker-week{display:flex;justify-content:center;padding:.32em .5em}.i-datepicker-week{color:var(--color-5)}.i-datepicker-item{--background:transparent;background:var(--background);border-radius:var(--radius);color:var(--color);opacity:.4;transition:all .12s;&:hover{--background:var(--color-main-0);opacity:1}&.i-datepicker-same-month{opacity:.8}&.i-datepicker-today{--background:var(--color-main-0)}&.i-datepicker-active{--background:var(--color-main);--color:var(--color-main-reverse);opacity:1}&.i-datepicker-disabled{cursor:not-allowed;opacity:.2}}.i-datepicker-units{align-items:center;color:var(--color-6);display:flex;font-size:.9em;gap:.125em;margin-bottom:.5em}.i-datepicker-action{align-items:baseline;border-radius:var(--radius);display:flex;gap:.25em;padding:.125em .5em;position:relative;user-select:none;>span{color:var(--color);font-size:1.15em}&:hover{background:var(--color-main-0)}}.i-datepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-datepicker-ym{backdrop-filter:var(--blur);background:var(--background);display:flex;gap:.5em;inset:0;opacity:0;padding:8px;pointer-events:none;position:absolute;transition:var(--transition);z-index:1;&.i-datepicker-active{opacity:1;pointer-events:unset}}.i-datepicker-years{display:flex;flex-direction:column;gap:.25em;max-height:100%;overflow-x:hidden;width:5em}.i-datepicker-months{display:grid;flex:1;gap:.25em;grid-template-columns:repeat(3,1fr);margin-top:1.5em}.i-datepicker-year{flex:1}.i-datepicker-month,.i-datepicker-year{align-items:center;border-radius:var(--radius);display:flex;justify-content:center;padding:2px;user-select:none;&:hover{background-color:var(--background-opacity-2)}&.i-datepicker-active{background:var(--color-main);color:var(--color-main-reverse);opacity:1}}.i-datepicker-close{position:absolute;right:0;top:0}.i-timepicker-label{position:unset}.i-timepicker{display:flex}.i-timepicker-list{display:flex;flex-direction:column;gap:2px;max-height:12.2em;min-width:3em;overflow:auto;padding:4px;scrollbar-width:none;text-align:center;&::-webkit-scrollbar{display:none}&:not(:last-child){border-right:1px solid var(--color-9)}}.i-timepicker-item{border-radius:var(--radius);display:block;opacity:.5;padding:.32em .5em;&:hover{background-color:var(--color-9);opacity:1}&.i-timepicker-item-active{background:var(--color-main);bottom:0;color:var(--color-main-reverse);opacity:1;position:sticky;top:0;z-index:1}}.i-timepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-daterange-grids{display:flex;.i-datepicker-ym{justify-content:center}.i-datepicker-months{margin-top:0;max-width:160px}}.i-daterange-col{flex:1;min-width:0}.i-daterange-between{--background:var(--background-opacity-1);opacity:1}.i-popconfirm{padding:1rem}.i-popconfirm-footer{margin-top:1rem}.i-radio{display:inline-flex;flex-wrap:wrap;gap:1em;position:relative}.i-radio-label{font-weight:500;text-align:var(--label-align);width:var(--label-width)}.i-radio-item{align-items:baseline;border-radius:var(--radius);display:inline-flex;&:hover{.i-radio-input{background-color:var(--color-main-0);box-shadow:inset 0 0 0 3px var(--color-7)}}}.i-radio-item-custom{>.i-radio-input{height:0;width:0}}.i-input-success .i-radio-input{box-shadow:inset 0 0 0 3px var(--green-0)}.i-input-warning .i-radio-input{box-shadow:inset 0 0 0 3px var(--yellow-0)}.i-input-error .i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-radio-options-button{flex:none}.i-radio-text{border-radius:inherit;color:var(--color-3);display:inline-flex;margin-left:.4em;transition:var(--transition);user-select:none}.i-radio-input{align-self:center;appearance:none;border-radius:50%;box-shadow:inset 0 0 0 3px var(--color-8);cursor:inherit;display:flex;flex-shrink:0;height:1.125em;outline:0;overflow:hidden;position:relative;transition:all .15s;width:1.125em}.i-radio-default{border:0 solid transparent}.i-radio-input:checked{&.i-radio-default{background:var(--color-main-reverse);border-color:var(--color-main);border-width:.4em;box-shadow:none;&+.i-radio-text{color:var(--color-main)}}}.i-radio-default:active{transform:scale(1.1)}.i-radio-button{display:none;&+.i-radio-text{border:1.5px solid var(--color-9);font-size:.94em;line-height:1.8;margin-left:0;padding:0 .628em;white-space:nowrap;&:hover{background-color:var(--color-main-0);border-color:var(--color-8)}}&:checked+.i-radio-text{background:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-radio-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-radio-success{.i-radio-input{box-shadow:inset 0 0 0 3px var(--success-0)}.i-radio-message{color:var(--success)}}.i-radio-warning{.i-radio-input{box-shadow:inset 0 0 0 3px var(--warning-0)}.i-radio-message{color:var(--warning)}}.i-radio-error{.i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-message{color:var(--error)}}.i-resizable{display:flex;overflow:hidden}.i-resizable-vertical{flex-direction:column;&>.i-resizable-line{cursor:ns-resize;height:2px;width:100%}}.i-resizable-a{overflow:auto}.i-resizable-b{flex:1;overflow:auto}.i-resizable-line{align-items:center;background:var(--background-opacity-2);cursor:ew-resize;display:flex;height:100%;justify-content:center;outline:1px solid transparent;position:relative;touch-action:none;transition:var(--transition);user-select:none;width:2px;&.i-resizable-resizing,&:hover{outline-color:var(--background-opacity-2);&>.i-resizable-line-node{opacity:1}}}.i-resizable-line-node{background:inherit;border-radius:var(--radius);display:flex;font-size:.8em;opacity:0;pointer-events:none;position:relative;transition:var(--transition);z-index:1}.i-river{overflow:hidden}.i-river-track{display:inline-flex;will-change:transform}.i-river-item{flex-shrink:0}.i-scroll{-webkit-overflow-scrolling:touch;overflow:hidden;user-select:none}.i-step{display:flex;flex-wrap:wrap;gap:.5em;overflow:hidden}.i-step-vertical{flex-direction:column;.i-step-item{flex-direction:row;&:not(:last-child){.i-step-item-right{padding-bottom:1em}}}}.i-step-item{display:flex;flex:1 1 auto;flex-direction:column;gap:.5em;transition:var(--transition);&:last-child{flex:none;.i-step-divider{display:none}}&.i-step-item-finished{opacity:.4;.i-step-divider{border-style:solid}}&.i-step-item-pending{opacity:.4}&:hover{opacity:1}}.i-step-item-index{align-items:center;background:var(--color-4);border-radius:1.5em;color:var(--background);display:flex;flex-shrink:0;justify-content:center;line-height:1.5em;width:1.5em}.i-step-divider{align-self:center;border:1px dashed var(--color-7);flex:1}.i-step-item-title{white-space:nowrap}.i-step-item-left,.i-step-item-title{align-items:center;display:flex;gap:.5em}.i-step-item-left,.i-step-item-right{flex-direction:column}.i-step-item-right{display:flex;gap:.5em}.i-swiper{max-width:100%;position:relative;user-select:none;&:hover{.i-swiper-arrow{opacity:.72}}.i-swiper-arrow:hover{opacity:1}}.i-swiper-track{overflow:hidden;position:relative;touch-action:pan-x}.i-swiper-list{display:flex;will-change:transform}.i-swiper-fade{>.i-swiper-item{opacity:0}>.i-swiper-active{opacity:1}}.i-swiper-vertical{.i-swiper-track{height:100%;touch-action:pan-y}.i-swiper-list{flex-direction:column}.i-swiper-item{width:100%}.i-swiper-arrow{left:unset;right:.5em}.i-swiper-prev{bottom:50%;top:unset;transform:translateY(-6px)}.i-swiper-next{transform:translateY(6px)}}.i-swiper-item{display:flex;flex:1;flex-shrink:0;overflow:hidden}.i-swiper-arrow,.i-swiper-item{align-items:center;justify-content:center;transition:var(--transition)}.i-swiper-arrow{border-radius:var(--radius);display:inline-flex;opacity:0;position:absolute;top:50%;transform:translateY(-50%)}.i-swiper-prev{left:.5em}.i-swiper-next{right:.5em}.i-swiper-indicators{display:flex;gap:.5em;justify-content:center;margin:.5em 0}.i-swiper-indicators-fixed{bottom:0;left:50%;position:absolute;transform:translate(-50%)}.i-swiper-indicator{background:var(--color);border-radius:50%;flex-shrink:0;height:8px;opacity:.25;width:8px;&:hover{opacity:.8}&.i-indicator-active{opacity:1}}.i-tabs{gap:.5em;max-width:100%}.i-tab-navs-container{align-items:center;border-radius:var(--radius);display:flex;gap:4px;scroll-behavior:smooth}.i-tab-navs-vertical{align-items:flex-end;flex-direction:column}.i-tab-navs{display:flex;flex:1;flex-direction:inherit;gap:1px;overflow:auto;position:relative;scroll-behavior:unset;scrollbar-width:none;user-select:none}.i-tab-navs::-webkit-scrollbar{display:none}.i-tabs-pane{.i-tab-navs-container{background:var(--background-opacity-2);padding:4px}.i-tab-navs{gap:4px;.i-tab-nav{border-radius:var(--radius);&:hover{background:var(--background)}}.i-tab-active{background:var(--background);box-shadow:0 1px 3px 0 rgba(38,38,38,.1);z-index:2}}.i-tab-navs-vertical{&:before{border-right:1px solid var(--color-8);border-top:none;height:100%;left:unset;top:0;width:unset}.i-tab-navs{.i-tab-nav{border:1px solid transparent;border-radius:var(--radius) 0 0 var(--radius);&:hover{border-color:var(--color-8);border-right-color:var(--background)}}.i-tab-active{border-color:var(--color-7);border-right:1px solid var(--background);&:hover{background-color:transparent}}}}}.i-tab-nav{--color:var(--color-7);align-items:center;border-radius:var(--radius);color:var(--color);display:flex;flex-shrink:0;gap:.25em;justify-content:center;padding:.4em .625em;position:relative;user-select:none;z-index:1;&:hover{--color:var(--color-3)}&.i-tab-active{--color:var(--color-main)}}.i-tabs-morelist{.i-tab-nav{white-space:nowrap}.i-tab-active{background:var(--color-main-0)}}.i-tab-closable{.i-tab-nav{padding-right:0;&.i-tab-active{background-color:var(--background);box-shadow:2px 0 8px #0000000d}}}.i-tab-nav:hover{.i-tab-nav-close{opacity:1}}.i-tab-navs-bar{background:var(--background-opacity-2);border-radius:4px;bottom:0;height:0;left:0;pointer-events:none;position:absolute;transition:var(--transition)}.i-tab-navs-vertical{>.i-tab-navs{gap:1px;>.i-tab-navs-bar{bottom:unset;left:unset;right:0;top:0;width:0}}}.i-tab-contents{flex:1;position:relative}.i-tab-content{display:none;&.i-tab-active{display:block}}.i-tabs{.i-tab-nav-close{background:var(--background);font-size:.7em;margin:0;opacity:0;padding:0;position:absolute;right:4px;&:hover{background:var(--background);color:var(--error)}}}.i-tree{--tree-gap:2px;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-size:.9em;font-style:italic;font-weight:300;position:relative;&:after{align-self:center;background:var(--color-8);content:"\20";flex:1;height:1px;margin-left:.5em}}.i-tree-item-header{align-items:center;border-radius:var(--radius);color:var(--color-6);display:flex;gap:.25em;overflow:hidden;padding:.4em;position:relative;user-select:none}.i-tree-item-header.i-tree-item-selected,.i-tree-item-header:hover{background:var(--color-main-0);color:var(--color-main)}.i-tree-round{--radius:100px}.i-tree-item-header.i-tree-round{border-radius:var(--radius)}.i-tree-item-icon{display:flex}.i-tree-checkbox{align-self:center}.i-tree-toggle{border-radius:inherit;color:var(--color-6);margin-left:auto;transition:var(--transition)}.i-tree-toggle:hover{background:var(--background-opacity);color:var(--color-3)}.i-tree-expand>.i-tree-item-header{color:var(--color-main);opacity:1}.i-tree-expand>.i-tree-item-header>.i-tree-toggle,.i-tree-toggle.i-tree-expand{transform:rotateX(180deg)}.i-input-label-file{display:flex;width:unset;&:has(.i-upload-list:empty){align-items:center}}.i-input-file-hidden{display:none}.i-upload-inner{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.5em}.i-upload-card{&:has(.i-upload-list:not(:empty)){align-self:flex-start}.i-upload-list{display:contents}}.i-upload-list{display:flex;flex-wrap:wrap;gap:inherit;user-select:none;width:100%;&:empty{display:none}}.i-upload-delete{box-shadow:var(--shadow);margin:0;opacity:0;right:-.825em;top:-.825em;z-index:1}.i-upload-btn{align-self:center}.i-upload-card-btn{background:var(--background-opacity);border-style:dashed;font-size:1em;height:var(--upload-card-size);opacity:.6;width:var(--upload-card-size);&:hover{opacity:1}}.i-upload-item{align-items:center;background:var(--background-opacity);border:2px solid var(--background-opacity-1);border-radius:var(--radius);display:inline-flex;font-size:.8em;gap:.25em;padding:.25em .4em;position:relative;transition:var(--transition);.i-upload-delete{background-color:var(--error);color:#fff;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{background-color:var(--background-opacity-1);.i-upload-delete{opacity:1}}}.i-upload-item-card{align-items:center;background:var(--background-opacity);border-radius:var(--radius);cursor:pointer;display:flex;gap:.25em;height:var(--upload-card-size);justify-content:center;position:relative;.i-image,video{height:100%;object-fit:cover;width:100%}.i-upload-file-name{font-size:.8em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-upload-delete{background-color:var(--error);color:#fff;font-size:.72em;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{.i-upload-delete,.i-upload-tip{opacity:1}}}.i-upload-size{color:var(--color-6);font-size:.8em}.i-upload-item-dragged{z-index:1000}.i-upload-tip{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);font-size:.86em;left:50%;opacity:0;pointer-events:none;position:absolute;top:100%;transform:translate(-50%,.5em);transition:opacity .12s;white-space:pre;z-index:1}.i-upload-dropbox{align-items:center;border:2px dashed var(--color-5);border-radius:var(--radius);color:var(--color-5);cursor:pointer;display:flex;gap:.5em;justify-content:center;padding:1em;transition:var(--transition);width:100%;&:hover{border-color:var(--color-main);color:var(--color-main)}}.i-upload-dropbox-active{background:var(--background-opacity-1);border-color:var(--color-main);color:var(--color-main)}

package/lib/es/components/datagrid/datagrid.js

@@ -5,7 +5,7 @@ import { useReactive } from '../../js/hooks.js';
 import { getNextSorter } from '../../js/utils.js';
 import Loading from '../loading/loading.js';
 import Empty from '../utils/empty/index.js';
-import { buildGridTemplateColumns, buildCssWidths, applyFixedInsets } from './helper.js';
+import { hasArrayChanged, buildGridTemplateColumns, buildCssWidths, applyFixedInsets } from './helper.js';
 import Row, { Header } from './row.js';
 import VirtualDatagrid from './virtual.js';
 
@@ -21,21 +21,8 @@ const Datagrid = (props) => {
     });
     const previewRef = useRef({ index: -1, width: -1, template: "" });
     useEffect(() => {
-        const next = columns.map((col, i) => {
-            if (col.width != null)
-                return col.width;
-            return state.widths[i] ?? "min-content";
-        });
-        let changed = next.length !== state.widths.length;
-        if (!changed) {
-            for (let i = 0; i < next.length; i++) {
-                if (next[i] !== state.widths[i]) {
-                    changed = true;
-                    break;
-                }
-            }
-        }
-        if (changed)
+        const next = columns.map((col, i) => (col.width != null ? col.width : (state.widths[i] ?? "min-content")));
+        if (hasArrayChanged(next, state.widths))
             state.widths = next;
     }, [columns, state]);
     const styles = useMemo(() => {
@@ -59,8 +46,7 @@ const Datagrid = (props) => {
             const el = wrapRef.current;
             if (!el)
                 return;
-            if (previewRef.current.index === i &&
-                previewRef.current.width === w) {
+            if (previewRef.current.index === i && previewRef.current.width === w) {
                 return;
             }
             const template = buildGridTemplateColumns(state.widths, i, w);
@@ -99,9 +85,7 @@ const Datagrid = (props) => {
         const { sortBy, sortType } = state;
         if (sortBy && !onSort) {
             const sorter = columns.find((col) => col.id === sortBy)?.sorter;
-            const sortFn = typeof sorter === "function"
-                ? sorter
-                : (a, b) => b[sortBy] - a[sortBy];
+            const sortFn = typeof sorter === "function" ? sorter : (a, b) => b[sortBy] - a[sortBy];
             const sorted = [...data].sort(sortFn);
             return sortType === "desc" ? sorted : sorted.reverse();
         }
@@ -114,66 +98,36 @@ const Datagrid = (props) => {
         return !!rowHeight && rowHeight > 0;
     }, [virtual]);
     useEffect(() => {
-        if (!resizable)
-            return;
         if (!container.current)
             return;
-        if (!columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number")) {
+        const hasUnmeasured = columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number");
+        if (!hasUnmeasured)
             return;
-        }
-        let rafId = null;
-        let tries = 0;
-        const run = () => {
-            rafId = null;
-            const div = container.current;
-            if (!div)
-                return;
+        const div = container.current;
+        const rafId = requestAnimationFrame(() => {
             const headerRow = div.querySelector(".i-datagrid-header.i-datagrid-row");
             const bodyRow = div.querySelector(".i-datagrid-row:not(.i-datagrid-header)");
             const headerCells = headerRow ? Array.from(headerRow.children) : [];
             const bodyCells = bodyRow ? Array.from(bodyRow.children) : [];
             const cellCount = Math.max(headerCells.length, bodyCells.length);
-            if (cellCount < 1) {
-                tries++;
-                if (tries < 10)
-                    rafId = requestAnimationFrame(run);
+            if (cellCount < 1)
                 return;
-            }
-            const measured = new Array(cellCount).fill(null);
-            for (let i = 0; i < cellCount; i++) {
-                const hw = headerCells[i]
-                    ?.offsetWidth;
-                const bw = bodyCells[i]
-                    ?.offsetWidth;
-                const w = Math.max(hw ?? 0, bw ?? 0);
-                measured[i] = w > 0 ? w : null;
-            }
             const next = columns.map((col, i) => {
                 if (col.width != null)
                     return col.width;
-                const cur = state.widths[i];
-                if (typeof cur === "number")
-                    return cur;
-                return measured[i] ?? cur ?? "min-content";
+                const prev = state.widths[i];
+                if (typeof prev === "number")
+                    return prev;
+                const hw = headerCells[i]?.offsetWidth ?? 0;
+                const bw = bodyCells[i]?.offsetWidth ?? 0;
+                const w = Math.max(hw, bw);
+                return w > 0 ? w : "min-content";
             });
-            let changed = next.length !== state.widths.length;
-            if (!changed) {
-                for (let i = 0; i < next.length; i++) {
-                    if (next[i] !== state.widths[i]) {
-                        changed = true;
-                        break;
-                    }
-                }
-            }
-            if (changed)
+            if (hasArrayChanged(next, state.widths))
                 state.widths = next;
-        };
-        rafId = requestAnimationFrame(run);
-        return () => {
-            if (rafId != null)
-                cancelAnimationFrame(rafId);
-        };
-    }, [columns, resizable, state, useVirtual]);
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [columns, state]);
     useEffect(() => {
         if (!loading)
             return;
@@ -195,16 +149,14 @@ const Datagrid = (props) => {
     }, [rowKey]);
     return (jsxs("div", { ref: wrapRef, style: {
             maxHeight: height,
-            ...(useVirtual
-                ? { overflowX: "visible", overflowY: "hidden" }
-                : null),
+            ...(useVirtual ? { overflowX: "visible", overflowY: "hidden" } : null),
             ...mergedStyle,
         }, className: classNames("i-datagrid-container", className, {
             "i-datagrid-bordered": border,
             "i-datagrid-striped": striped,
         }), children: [useVirtual && virtual ? (jsx(VirtualDatagrid, { virtual: virtual, columns: columns, rows: rows, header: header, sortBy: state.sortBy, sortType: state.sortType, height: height, loading: loading, resizable: resizable, striped: striped, cellEllipsis: cellEllipsis, empty: empty, wrapRef: wrapRef, containerRef: container, getRowKey: getRowKey, onHeaderClick: handleHeaderClick, onWidthChange: handleWidthChange, onRowClick: onRowClick, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick, onScroll: onScroll })) : (jsxs("div", { ref: container, className: classNames("i-datagrid", {
                     "i-datagrid-loading": loading,
-                }), onWheel: onScroll, children: [header && (jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
+                }), onWheel: onScroll, children: [header && jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick }), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
 };
 
 export { Datagrid as default };

package/lib/es/components/datagrid/helper.js

@@ -24,16 +24,8 @@ const sumLengths = (parts) => {
     return `calc(${out.join(" + ")})`;
 };
 const toCssWidth = (w) => typeof w === "number" ? `${w}px` : w;
-const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => {
-    let out = "";
-    for (let i = 0; i < widths.length; i++) {
-        const w = i === overrideIndex && overrideWidth != null
-            ? overrideWidth
-            : widths[i];
-        out += (i ? " " : "") + toCssWidth(w);
-    }
-    return out;
-};
+const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => buildCssWidths(widths, overrideIndex, overrideWidth).join(" ");
+const hasArrayChanged = (a, b) => a.length !== b.length || a.some((v, i) => v !== b[i]);
 const buildCssWidths = (widths, overrideIndex, overrideWidth) => {
     const out = new Array(widths.length);
     for (let i = 0; i < widths.length; i++) {
@@ -75,4 +67,4 @@ const applyFixedInsets = (setVar, columns, cssWidths) => {
     }
 };
 
-export { applyFixedInsets, buildCssWidths, buildGridTemplateColumns };
+export { applyFixedInsets, buildCssWidths, buildGridTemplateColumns, hasArrayChanged };

package/lib/es/components/popup/popup.js

@@ -20,7 +20,7 @@ const canAttachRef = (el) => {
     return false;
 };
 function Popup(props) {
-    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange, } = props;
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, match, onVisibleChange, } = props;
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
@@ -41,6 +41,7 @@ function Popup(props) {
         offset,
         align,
         fitSize,
+        match,
         onVisibleChange,
     };
     const phaseRef = useRef("");
@@ -294,10 +295,16 @@ function Popup(props) {
             if (el)
                 triggerRef.current = el;
         };
+        const checkMatch = (e) => {
+            const fn = latestRef.current.match;
+            return fn ? fn(e) : true;
+        };
         switch (trigger) {
             case "click":
                 return {
                     onClick: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         setTriggerEl(e);
                         doToggle(true);
                     },
@@ -305,6 +312,8 @@ function Popup(props) {
             case "hover":
                 return {
                     onMouseEnter: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         setTriggerEl(e);
                         doToggle(true);
                     },
@@ -316,6 +325,8 @@ function Popup(props) {
             case "focus":
                 return {
                     onFocus: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         setTriggerEl(e);
                         doToggle(true);
                     },
@@ -327,6 +338,8 @@ function Popup(props) {
             case "contextmenu":
                 return {
                     onContextMenu: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         e.preventDefault();
                         e.stopPropagation();
                         setTriggerEl(e);

package/lib/es/components/select/select.js

@@ -13,14 +13,20 @@ const Select = (props) => {
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
-    const formattedOptions = useMemo(() => formatOption(options), [options]);
+    const formattedOptions = useMemo(() => {
+        return formatOption(options).map((opt) => {
+            const label = typeof opt.label === "string" ? opt.label : String(opt.value ?? "");
+            return { ...opt, _label: label.toLowerCase(), _value: String(opt.value ?? "").toLowerCase() };
+        });
+    }, [options]);
     const filterOptions = useMemo(() => {
         const fv = filterValue;
         if (!fv || !filter)
             return formattedOptions;
+        const lowerFv = fv.toLowerCase();
         const filterFn = typeof filter === "function"
             ? filter
-            : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
+            : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
         return formattedOptions.filter(filterFn);
     }, [formattedOptions, filter, filterValue]);
     const changeValue = (v) => {

package/lib/es/components/tree/item.js

@@ -6,21 +6,21 @@ import Icon from '../icon/icon.js';
 import Loading from '../loading/loading.js';
 
 const TreeItemHeader = (props) => {
-    const { as: Tag = "a", href, selected, children, ...restProps } = props;
+    const { as: Tag = "a", href, selected, children, attrs, ...restProps } = props;
     const className = classNames("i-tree-item-header", {
         "i-tree-item-selected": selected,
     });
     if (typeof Tag === "string") {
-        return (jsx(Tag, { href: href, className: className, ...restProps, children: children }));
+        return (jsx(Tag, { href: href, className: className, ...attrs, ...restProps, children: children }));
     }
-    return (jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
+    return (jsx(Tag, { to: href || "", className: className, ...attrs, ...restProps, children: children }));
 };
 function TreeRow(props) {
     const { flatNode, wrapperStyle, virtualMode, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, onExpand, onItemClick, onItemSelect, onItemCheck, } = props;
     const { node, depth, isExpanded } = flatNode;
-    const { key = "", as, href, icon, title, disabled, type } = node;
+    const { key = "", as, href, icon, title, disabled, type, attrs } = node;
     const children = node[nodeProps.children];
-    const hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);
+    const hasChildren = children instanceof Promise || typeof children === "function" || (Array.isArray(children) && children.length > 0);
     const loading = loadingKeys?.includes(key);
     if (type === "title") {
         return jsx("div", { style: wrapperStyle, className: "i-tree-group-title", children: title });
@@ -28,7 +28,7 @@ function TreeRow(props) {
     if (type && type !== "item") {
         return jsx("div", { style: wrapperStyle, className: `i-tree-type-${type}`, children: title });
     }
-    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
+    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, attrs: attrs, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
                 if (disabled) {
                     e.preventDefault();
                     e.stopPropagation();

package/lib/es/components/tree/tree.js

@@ -27,7 +27,7 @@ function flattenTree(nodes, expandedMap, nodeProps, depth = 0, parentItem, async
     return result;
 }
 const Tree = (props) => {
-    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, useVirtual, onItemSelect, onItemCheck, ...restProps } = props;
+    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, virtual, onItemSelect, onItemCheck, ...restProps } = props;
     const [selectedKey, setSelectedKey] = useState(selected);
     const [checkedKeys, setCheckedKeys] = useState(checked);
     const [partofs, setPartofs] = useState({});
@@ -59,14 +59,16 @@ const Tree = (props) => {
         if (!item)
             return;
         const rawChildren = item[oNodeProps.children];
-        const isAsync = rawChildren instanceof Promise;
+        const isLazy = typeof rawChildren === "function";
+        const isAsync = rawChildren instanceof Promise || isLazy;
         const isExpanded = !!expandedMap[key];
         if (isAsync && !isExpanded) {
             flushSync(() => {
                 setLoadingMap((prev) => ({ ...prev, [key]: true }));
                 setExpandedMap((prev) => ({ ...prev, [key]: true }));
             });
-            rawChildren
+            const promise = isLazy ? rawChildren() : rawChildren;
+            promise
                 .then((resolved) => {
                 item[oNodeProps.children] = resolved;
                 setAsyncChildrenMap((prev) => ({ ...prev, [key]: resolved }));
@@ -223,8 +225,8 @@ const Tree = (props) => {
             },
         };
     });
-    if (useVirtual) {
-        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, useVirtual: useVirtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    if (virtual) {
+        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, virtual: virtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
     }
     return (jsx(TreeList, { flatNodes: flatNodes, onExpand: handleExpand, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };

package/lib/es/components/tree/virtual.js

@@ -6,7 +6,7 @@ import { useResizeObserver } from '../../js/hooks.js';
 import { TreeRow } from './item.js';
 
 function VirtualTree(props) {
-    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, useVirtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, virtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
     const listRef = useRef(null);
     const wrapRef = useRef(null);
     const ro = useResizeObserver();
@@ -33,7 +33,7 @@ function VirtualTree(props) {
             return null;
         return (jsx(TreeRow, { flatNode: flatNode, wrapperStyle: style, virtualMode: true, selected: p.selected, checkedSet: p.checkedSet, partofs: p.partofs, checkable: p.checkable, nodeProps: p.nodeProps, renderExtra: p.renderExtra, loadingKeys: p.loadingKeys, onExpand: p.onExpand, onItemClick: p.onItemClick, onItemSelect: p.onItemSelect, onItemCheck: p.onItemCheck }));
     }, []);
-    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List, { listRef: listRef, rowCount: flatNodes.length, rowHeight: useVirtual.rowHeight, overscanCount: Math.max(3, useVirtual.threshold ?? 8), rowProps: {}, style: {
+    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List, { listRef: listRef, rowCount: flatNodes.length, rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: {
                 width: "100%",
                 height: listHeight,
                 overflow: "auto",

package/lib/index.js

@@ -1037,16 +1037,8 @@ const sumLengths = (parts) => {
     return `calc(${out.join(" + ")})`;
 };
 const toCssWidth = (w) => typeof w === "number" ? `${w}px` : w;
-const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => {
-    let out = "";
-    for (let i = 0; i < widths.length; i++) {
-        const w = i === overrideIndex && overrideWidth != null
-            ? overrideWidth
-            : widths[i];
-        out += (i ? " " : "") + toCssWidth(w);
-    }
-    return out;
-};
+const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => buildCssWidths(widths, overrideIndex, overrideWidth).join(" ");
+const hasArrayChanged = (a, b) => a.length !== b.length || a.some((v, i) => v !== b[i]);
 const buildCssWidths = (widths, overrideIndex, overrideWidth) => {
     const out = new Array(widths.length);
     for (let i = 0; i < widths.length; i++) {
@@ -1519,21 +1511,8 @@ const Datagrid = (props) => {
     });
     const previewRef = useRef({ index: -1, width: -1, template: "" });
     useEffect(() => {
-        const next = columns.map((col, i) => {
-            if (col.width != null)
-                return col.width;
-            return state.widths[i] ?? "min-content";
-        });
-        let changed = next.length !== state.widths.length;
-        if (!changed) {
-            for (let i = 0; i < next.length; i++) {
-                if (next[i] !== state.widths[i]) {
-                    changed = true;
-                    break;
-                }
-            }
-        }
-        if (changed)
+        const next = columns.map((col, i) => (col.width != null ? col.width : (state.widths[i] ?? "min-content")));
+        if (hasArrayChanged(next, state.widths))
             state.widths = next;
     }, [columns, state]);
     const styles = useMemo(() => {
@@ -1557,8 +1536,7 @@ const Datagrid = (props) => {
             const el = wrapRef.current;
             if (!el)
                 return;
-            if (previewRef.current.index === i &&
-                previewRef.current.width === w) {
+            if (previewRef.current.index === i && previewRef.current.width === w) {
                 return;
             }
             const template = buildGridTemplateColumns(state.widths, i, w);
@@ -1597,9 +1575,7 @@ const Datagrid = (props) => {
         const { sortBy, sortType } = state;
         if (sortBy && !onSort) {
             const sorter = columns.find((col) => col.id === sortBy)?.sorter;
-            const sortFn = typeof sorter === "function"
-                ? sorter
-                : (a, b) => b[sortBy] - a[sortBy];
+            const sortFn = typeof sorter === "function" ? sorter : (a, b) => b[sortBy] - a[sortBy];
             const sorted = [...data].sort(sortFn);
             return sortType === "desc" ? sorted : sorted.reverse();
         }
@@ -1612,66 +1588,36 @@ const Datagrid = (props) => {
         return !!rowHeight && rowHeight > 0;
     }, [virtual]);
     useEffect(() => {
-        if (!resizable)
-            return;
         if (!container.current)
             return;
-        if (!columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number")) {
+        const hasUnmeasured = columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number");
+        if (!hasUnmeasured)
             return;
-        }
-        let rafId = null;
-        let tries = 0;
-        const run = () => {
-            rafId = null;
-            const div = container.current;
-            if (!div)
-                return;
+        const div = container.current;
+        const rafId = requestAnimationFrame(() => {
             const headerRow = div.querySelector(".i-datagrid-header.i-datagrid-row");
             const bodyRow = div.querySelector(".i-datagrid-row:not(.i-datagrid-header)");
             const headerCells = headerRow ? Array.from(headerRow.children) : [];
             const bodyCells = bodyRow ? Array.from(bodyRow.children) : [];
             const cellCount = Math.max(headerCells.length, bodyCells.length);
-            if (cellCount < 1) {
-                tries++;
-                if (tries < 10)
-                    rafId = requestAnimationFrame(run);
+            if (cellCount < 1)
                 return;
-            }
-            const measured = new Array(cellCount).fill(null);
-            for (let i = 0; i < cellCount; i++) {
-                const hw = headerCells[i]
-                    ?.offsetWidth;
-                const bw = bodyCells[i]
-                    ?.offsetWidth;
-                const w = Math.max(hw ?? 0, bw ?? 0);
-                measured[i] = w > 0 ? w : null;
-            }
             const next = columns.map((col, i) => {
                 if (col.width != null)
                     return col.width;
-                const cur = state.widths[i];
-                if (typeof cur === "number")
-                    return cur;
-                return measured[i] ?? cur ?? "min-content";
+                const prev = state.widths[i];
+                if (typeof prev === "number")
+                    return prev;
+                const hw = headerCells[i]?.offsetWidth ?? 0;
+                const bw = bodyCells[i]?.offsetWidth ?? 0;
+                const w = Math.max(hw, bw);
+                return w > 0 ? w : "min-content";
             });
-            let changed = next.length !== state.widths.length;
-            if (!changed) {
-                for (let i = 0; i < next.length; i++) {
-                    if (next[i] !== state.widths[i]) {
-                        changed = true;
-                        break;
-                    }
-                }
-            }
-            if (changed)
+            if (hasArrayChanged(next, state.widths))
                 state.widths = next;
-        };
-        rafId = requestAnimationFrame(run);
-        return () => {
-            if (rafId != null)
-                cancelAnimationFrame(rafId);
-        };
-    }, [columns, resizable, state, useVirtual]);
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [columns, state]);
     useEffect(() => {
         if (!loading)
             return;
@@ -1693,16 +1639,14 @@ const Datagrid = (props) => {
     }, [rowKey]);
     return (jsxs("div", { ref: wrapRef, style: {
             maxHeight: height,
-            ...(useVirtual
-                ? { overflowX: "visible", overflowY: "hidden" }
-                : null),
+            ...(useVirtual ? { overflowX: "visible", overflowY: "hidden" } : null),
             ...mergedStyle,
         }, className: classNames("i-datagrid-container", className, {
             "i-datagrid-bordered": border,
             "i-datagrid-striped": striped,
         }), children: [useVirtual && virtual ? (jsx(VirtualDatagrid, { virtual: virtual, columns: columns, rows: rows, header: header, sortBy: state.sortBy, sortType: state.sortType, height: height, loading: loading, resizable: resizable, striped: striped, cellEllipsis: cellEllipsis, empty: empty, wrapRef: wrapRef, containerRef: container, getRowKey: getRowKey, onHeaderClick: handleHeaderClick, onWidthChange: handleWidthChange, onRowClick: onRowClick, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick, onScroll: onScroll })) : (jsxs("div", { ref: container, className: classNames("i-datagrid", {
                     "i-datagrid-loading": loading,
-                }), onWheel: onScroll, children: [header && (jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
+                }), onWheel: onScroll, children: [header && jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick }), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
 };
 
 const Description = (props) => {
@@ -1866,7 +1810,7 @@ const canAttachRef = (el) => {
     return false;
 };
 function Popup(props) {
-    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange, } = props;
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, match, onVisibleChange, } = props;
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
@@ -1887,6 +1831,7 @@ function Popup(props) {
         offset,
         align,
         fitSize,
+        match,
         onVisibleChange,
     };
     const phaseRef = useRef("");
@@ -2140,10 +2085,16 @@ function Popup(props) {
             if (el)
                 triggerRef.current = el;
         };
+        const checkMatch = (e) => {
+            const fn = latestRef.current.match;
+            return fn ? fn(e) : true;
+        };
         switch (trigger) {
             case "click":
                 return {
                     onClick: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         setTriggerEl(e);
                         doToggle(true);
                     },
@@ -2151,6 +2102,8 @@ function Popup(props) {
             case "hover":
                 return {
                     onMouseEnter: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         setTriggerEl(e);
                         doToggle(true);
                     },
@@ -2162,6 +2115,8 @@ function Popup(props) {
             case "focus":
                 return {
                     onFocus: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         setTriggerEl(e);
                         doToggle(true);
                     },
@@ -2173,6 +2128,8 @@ function Popup(props) {
             case "contextmenu":
                 return {
                     onContextMenu: (e) => {
+                        if (!checkMatch(e))
+                            return;
                         e.preventDefault();
                         e.stopPropagation();
                         setTriggerEl(e);
@@ -4817,14 +4774,20 @@ const Select = (props) => {
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
-    const formattedOptions = useMemo(() => formatOption(options), [options]);
+    const formattedOptions = useMemo(() => {
+        return formatOption(options).map((opt) => {
+            const label = typeof opt.label === "string" ? opt.label : String(opt.value ?? "");
+            return { ...opt, _label: label.toLowerCase(), _value: String(opt.value ?? "").toLowerCase() };
+        });
+    }, [options]);
     const filterOptions = useMemo(() => {
         const fv = filterValue;
         if (!fv || !filter)
             return formattedOptions;
+        const lowerFv = fv.toLowerCase();
         const filterFn = typeof filter === "function"
             ? filter
-            : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
+            : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
         return formattedOptions.filter(filterFn);
     }, [formattedOptions, filter, filterValue]);
     const changeValue = (v) => {
@@ -6333,21 +6296,21 @@ const Tabs = ((props) => {
 Tabs.Item = Item;
 
 const TreeItemHeader = (props) => {
-    const { as: Tag = "a", href, selected, children, ...restProps } = props;
+    const { as: Tag = "a", href, selected, children, attrs, ...restProps } = props;
     const className = classNames("i-tree-item-header", {
         "i-tree-item-selected": selected,
     });
     if (typeof Tag === "string") {
-        return (jsx(Tag, { href: href, className: className, ...restProps, children: children }));
+        return (jsx(Tag, { href: href, className: className, ...attrs, ...restProps, children: children }));
     }
-    return (jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
+    return (jsx(Tag, { to: href || "", className: className, ...attrs, ...restProps, children: children }));
 };
 function TreeRow(props) {
     const { flatNode, wrapperStyle, virtualMode, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, onExpand, onItemClick, onItemSelect, onItemCheck, } = props;
     const { node, depth, isExpanded } = flatNode;
-    const { key = "", as, href, icon, title, disabled, type } = node;
+    const { key = "", as, href, icon, title, disabled, type, attrs } = node;
     const children = node[nodeProps.children];
-    const hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);
+    const hasChildren = children instanceof Promise || typeof children === "function" || (Array.isArray(children) && children.length > 0);
     const loading = loadingKeys?.includes(key);
     if (type === "title") {
         return jsx("div", { style: wrapperStyle, className: "i-tree-group-title", children: title });
@@ -6355,7 +6318,7 @@ function TreeRow(props) {
     if (type && type !== "item") {
         return jsx("div", { style: wrapperStyle, className: `i-tree-type-${type}`, children: title });
     }
-    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
+    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, attrs: attrs, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
                 if (disabled) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -6384,7 +6347,7 @@ function TreeList(props) {
 }
 
 function VirtualTree(props) {
-    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, useVirtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, virtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
     const listRef = useRef(null);
     const wrapRef = useRef(null);
     const ro = useResizeObserver();
@@ -6411,7 +6374,7 @@ function VirtualTree(props) {
             return null;
         return (jsx(TreeRow, { flatNode: flatNode, wrapperStyle: style, virtualMode: true, selected: p.selected, checkedSet: p.checkedSet, partofs: p.partofs, checkable: p.checkable, nodeProps: p.nodeProps, renderExtra: p.renderExtra, loadingKeys: p.loadingKeys, onExpand: p.onExpand, onItemClick: p.onItemClick, onItemSelect: p.onItemSelect, onItemCheck: p.onItemCheck }));
     }, []);
-    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List$2, { listRef: listRef, rowCount: flatNodes.length, rowHeight: useVirtual.rowHeight, overscanCount: Math.max(3, useVirtual.threshold ?? 8), rowProps: {}, style: {
+    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List$2, { listRef: listRef, rowCount: flatNodes.length, rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: {
                 width: "100%",
                 height: listHeight,
                 overflow: "auto",
@@ -6441,7 +6404,7 @@ function flattenTree(nodes, expandedMap, nodeProps, depth = 0, parentItem, async
     return result;
 }
 const Tree = (props) => {
-    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, useVirtual, onItemSelect, onItemCheck, ...restProps } = props;
+    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, virtual, onItemSelect, onItemCheck, ...restProps } = props;
     const [selectedKey, setSelectedKey] = useState(selected);
     const [checkedKeys, setCheckedKeys] = useState(checked);
     const [partofs, setPartofs] = useState({});
@@ -6473,14 +6436,16 @@ const Tree = (props) => {
         if (!item)
             return;
         const rawChildren = item[oNodeProps.children];
-        const isAsync = rawChildren instanceof Promise;
+        const isLazy = typeof rawChildren === "function";
+        const isAsync = rawChildren instanceof Promise || isLazy;
         const isExpanded = !!expandedMap[key];
         if (isAsync && !isExpanded) {
             flushSync(() => {
                 setLoadingMap((prev) => ({ ...prev, [key]: true }));
                 setExpandedMap((prev) => ({ ...prev, [key]: true }));
             });
-            rawChildren
+            const promise = isLazy ? rawChildren() : rawChildren;
+            promise
                 .then((resolved) => {
                 item[oNodeProps.children] = resolved;
                 setAsyncChildrenMap((prev) => ({ ...prev, [key]: resolved }));
@@ -6637,8 +6602,8 @@ const Tree = (props) => {
             },
         };
     });
-    if (useVirtual) {
-        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, useVirtual: useVirtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    if (virtual) {
+        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, virtual: virtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
     }
     return (jsx(TreeList, { flatNodes: flatNodes, onExpand: handleExpand, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };

package/lib/types/components/popup/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, MouseEvent, CSSProperties } from 'react';
 import { TPosition } from '../../type/index.js';
 
 interface IPopup {
@@ -15,6 +15,7 @@ interface IPopup {
     touchable?: boolean;
     fitSize?: boolean;
     disabled?: boolean;
+    match?: (e: MouseEvent) => boolean;
     style?: CSSProperties;
     children?: ReactNode;
     className?: string;

package/lib/types/components/tree/type.d.ts

@@ -8,10 +8,11 @@ interface ITreeItem {
     title: string | ReactNode;
     icon?: ReactNode;
     href?: string;
-    children?: ITreeItem[] | Promise<ITreeItem[]>;
+    children?: ITreeItem[] | Promise<ITreeItem[]> | (() => Promise<ITreeItem[]>);
     expanded?: boolean;
     disabled?: boolean;
     checked?: boolean;
+    attrs?: Record<string, any>;
     parent?: ITreeItem;
     [key: string]: any;
 }
@@ -34,7 +35,7 @@ interface ITree {
     disabledRelated?: boolean;
     round?: boolean;
     height?: number | string;
-    useVirtual?: TVirtual;
+    virtual?: TVirtual;
     style?: CSSProperties;
     className?: string;
     renderExtra?: (item: ITreeItem) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ioca/react",
-    "version": "1.5.26",
+    "version": "1.5.28",
     "type": "module",
     "scripts": {
         "dev": "vite",