@ioca/react 1.5.31 → 1.5.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/css/index.css +1 -1
  2. package/lib/es/components/datagrid/cell.js +1 -1
  3. package/lib/es/components/datagrid/datagrid.js +4 -2
  4. package/lib/es/components/datagrid/virtual.js +11 -46
  5. package/lib/es/components/dropdown/dropdown.js +5 -4
  6. package/lib/es/components/dropdown/item.js +4 -4
  7. package/lib/es/components/popup/content.js +3 -30
  8. package/lib/es/components/popup/popup.js +50 -25
  9. package/lib/es/components/tabs/helper.js +3 -7
  10. package/lib/index.js +77 -115
  11. package/lib/types/components/datagrid/type.d.ts +2 -1
  12. package/lib/types/components/popup/type.d.ts +1 -0
  13. package/package.json +1 -1
package/lib/css/index.css CHANGED
@@ -1 +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:14px;--font:normal 400 var(--font-size) /1.5 -apple-system,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{align-content:flex-start;align-items:center;border-radius:var(--radius);display:flex;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)}&:has(:disabled){opacity:.4}}.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)}&:has(:disabled){background:var(--background-opacity-1);border-color:transparent;cursor:not-allowed}}.i-input-borderless{background:var(--background-opacity-1);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{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}: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:#ffdf32;--yellow-0:#fff7b8;--yellow-1:#ffda10;--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:#000;--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;--color-10:#fff;--background:#fff;--background-1:#fff;--background-hover:transparent;--background-opacity:hsla(0,0%,100%,.4);--background-opacity-1:hsla(0,0%,91%,.4);--background-opacity-2:rgba(139,152,175,.15);--color:var(--color-1);--color-main:var(--color-2);--color-main-1:var(--color-0);--color-main-0:#eff0f6;--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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.bg-success-0{--background:var(--success-0);--background-hover:var(--success-1);--color-hover:var(--white)}.bg{background:var(--background)}.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)}.bg-10{--background:var(--color-10);--color:var(--color-0)}.white{--color:var(--white);--color-hover:var(--white)}.white,.white-0{color:var(--color)}.white-0{--color:var(--white-0);--color-hover:var(--white)}.black{--color:var(--black);--color-hover:var(--black)}.black,.black-0{color:var(--color)}.black-0{--color:var(--black-0);--color-hover:var(--black)}.red{--color:var(--red);--color-hover:var(--red)}.red,.red-0{color:var(--color)}.red-0{--color:var(--red-0);--color-hover:var(--red)}.blue{--color:var(--blue);--color-hover:var(--blue)}.blue,.blue-0{color:var(--color)}.blue-0{--color:var(--blue-0);--color-hover:var(--blue)}.green{--color:var(--green);--color-hover:var(--green)}.green,.green-0{color:var(--color)}.green-0{--color:var(--green-0);--color-hover:var(--green)}.yellow{--color:var(--yellow);--color-hover:var(--yellow)}.yellow,.yellow-0{color:var(--color)}.yellow-0{--color:var(--yellow-0);--color-hover:var(--yellow)}.brown{--color:var(--brown);--color-hover:var(--brown)}.brown,.brown-0{color:var(--color)}.brown-0{--color:var(--brown-0);--color-hover:var(--brown)}.grey{--color:var(--grey);--color-hover:var(--grey)}.grey,.grey-0{color:var(--color)}.grey-0{--color:var(--grey-0);--color-hover:var(--grey)}.pink{--color:var(--pink);--color-hover:var(--pink)}.pink,.pink-0{color:var(--color)}.pink-0{--color:var(--pink-0);--color-hover:var(--pink)}.purple{--color:var(--purple);--color-hover:var(--purple)}.purple,.purple-0{color:var(--color)}.purple-0{--color:var(--purple-0);--color-hover:var(--purple)}.aqua{--color:var(--aqua);--color-hover:var(--aqua)}.aqua,.aqua-0{color:var(--color)}.aqua-0{--color:var(--aqua-0);--color-hover:var(--aqua)}.orange{--color:var(--orange);--color-hover:var(--orange)}.orange,.orange-0{color:var(--color)}.orange-0{--color:var(--orange-0);--color-hover:var(--orange)}.warning{--color:var(--warning);--color-hover:var(--warning);color:var(--color)}.warning-0{--color:var(--warning-0);--color-hover:var(--warning);color:var(--color)}.error{--color:var(--error);--color-hover:var(--error)}.error,.error-0{color:var(--color)}.error-0{--color:var(--error-0);--color-hover:var(--error)}.success{--color:var(--success);--color-hover:var(--success);color:var(--color)}.success-0{--color:var(--success-0);--color-hover:var(--success);color:var(--color)}.green:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--green-0)}.yellow:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--yellow-0)}.brown:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--brown-0)}.grey:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--grey-0)}.pink:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--pink-0)}.purple:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--purple-0)}.aqua:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--aqua-0)}.orange:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--orange-0)}.warning:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--warning-0)}.error:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--error-0)}.success:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--success-0)}.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)}.color-10{--color:var(--color-10);color:var(--color-10)}}.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;--color-10:#000;--background:#2a2a2a;--background-1:#1d1d1d;--background-hover:transparent;--background-opacity:rgba(0,0,0,.4);--background-opacity-1:rgba(66,66,66,.4);--background-opacity-2:hsla(0,0%,41%,.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;--color-10:#000;--background:#2a2a2a;--background-1:#1d1d1d;--background-hover:transparent;--background-opacity:rgba(0,0,0,.4);--background-opacity-1:rgba(66,66,66,.4);--background-opacity-2:hsla(0,0%,41%,.4);--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{--background:var(--background);backdrop-filter:var(--blur)}.roundless{border-radius:0}.round{--radius:50dvw;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}.pd{padding:var(--padding)}.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.46em;justify-content:center;line-height:1;outline:none;padding:0 .628em;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.46em;&.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-checkbox{gap:1em}.i-checkbox-item{align-items:baseline;align-self:flex-start;border-radius:var(--radius);display:inline-flex;gap:.425em;&: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:1em;position:relative}.i-checkbox-options-button{gap:.5em}.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:var(--padding);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:var(--padding);padding-block:0;transition:var(--transition)}.i-collapse-active>.i-collapse-header,.i-collapse-header:hover{opacity:1}.i-collapse-active>.i-collapse-content{height:unset;padding:var(--padding)}.i-collapse-disabled{opacity:.4;pointer-events:none;>.i-collapse-content{height:0;overflow:hidden;padding-block:0}}.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(--background-opacity);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-7);&+.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}}.i-list-option{--padding:0.425em 0.825em;align-items:center;cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:not(.i-list-item-bordered){margin:0 var(--option-gap,4px)}&: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-list-option-type{border:1px solid var(--background-opacity-2);border-radius:var(--radius);padding:var(--option-gap,4px) 0}.i-list-option-type>.i-divider{margin-block:var(--option-gap,4px);padding-inline:0}.i-popup{--background:var(--background-1);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:var(--option-gap,2px);max-height:32dvh;overflow-x:hidden}.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;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{align-content:flex-start;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(--background-opacity);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{backdrop-filter:var(--blur);background:var(--background-opacity);inset:0;justify-content:center;position:absolute}.i-divider,.i-image-cover{align-items:center;display:flex}.i-divider{font-size:.81em;line-height:1;list-style:none;margin:4px 0;user-select:none}.i-divider:after,.i-divider:before{background-color:var(--divider-color,var(--background-opacity-2));content:"";flex:1;height:var(--divider-width,1px)}.i-divider-content{color:var(--divider-color,var(--color-5));margin-inline:.5em}.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:var(--padding);.i-tag{background:var(--color-main-0);line-height:1.36em;padding:0 .5em;position:relative}.i-tag-close{border-radius:2px}}.i-select-options{--gap:0.25em;border-radius:inherit;display:flex;flex-direction:column;gap:2px;max-height:32dvh;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-large{font-size:1em}&.i-tag-extreme{font-size:1.5em;height:2em}&.i-tag-small{font-size:.72em;padding:.125em .4em}.i-tag-close{background:var(--error);color:var(--white);font-size:.72em;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-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-pill-list{--background-hover:var(--color-8);align-items:center;align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.5em}.i-pill{flex-shrink:0;font-size:1em;gap:0;outline:1.5px solid transparent;white-space:nowrap}.i-pill-create{align-self:stretch;cursor:pointer;padding:.25em}.i-pill-editing{cursor:text;min-width:2.25em;outline:1.5px solid var(--background-hover);outline-offset:-2px;&:before{content:"\200b";opacity:0}}.i-popconfirm{padding:12px}.i-popconfirm-footer{margin-top:12px}.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:.825em;position:relative}.i-radio-options-button{flex:none;gap:.5em}.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-1);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;--padding:0.425em 0.825em;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-weight:500;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);display:flex;gap:1em;opacity:.4;overflow:hidden;padding:var(--padding);position:relative;user-select:none}.i-tree-item-header.i-tree-item-selected,.i-tree-item-header:hover{background:var(--background-opacity-1);opacity:1}.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)}
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:14px;--font:normal 400 var(--font-size) /1.5 -apple-system,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{align-content:flex-start;align-items:center;border-radius:var(--radius);display:flex;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)}&:has(:disabled){opacity:.4}}.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)}&:has(:disabled){background:var(--background-opacity-1);border-color:transparent;cursor:not-allowed}}.i-input-borderless{background:var(--background-opacity-1);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{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}: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:#ffdf32;--yellow-0:#fff7b8;--yellow-1:#ffda10;--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:#e8ffe2;--success-1:#8dfa72;--color-0:#000;--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;--color-10:#fff;--background:#fff;--background-1:#f8f8f8;--background-hover:transparent;--background-opacity:hsla(0,0%,100%,.4);--background-opacity-1:hsla(0,0%,91%,.4);--background-opacity-2:rgba(139,152,175,.15);--color:var(--color-1);--color-main:var(--color-2);--color-main-1:var(--color-0);--color-main-0:#eff0f6;--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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.bg-success-0{--background:var(--success-0);--background-hover:var(--success-1);--color-hover:var(--white)}.bg{background:var(--background)}.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)}.bg-10{--background:var(--color-10);--color:var(--color-0)}.white{--color:var(--white);--color-hover:var(--white)}.white,.white-0{color:var(--color)}.white-0{--color:var(--white-0);--color-hover:var(--white)}.black{--color:var(--black);--color-hover:var(--black)}.black,.black-0{color:var(--color)}.black-0{--color:var(--black-0);--color-hover:var(--black)}.red{--color:var(--red);--color-hover:var(--red)}.red,.red-0{color:var(--color)}.red-0{--color:var(--red-0);--color-hover:var(--red)}.blue{--color:var(--blue);--color-hover:var(--blue)}.blue,.blue-0{color:var(--color)}.blue-0{--color:var(--blue-0);--color-hover:var(--blue)}.green{--color:var(--green);--color-hover:var(--green)}.green,.green-0{color:var(--color)}.green-0{--color:var(--green-0);--color-hover:var(--green)}.yellow{--color:var(--yellow);--color-hover:var(--yellow)}.yellow,.yellow-0{color:var(--color)}.yellow-0{--color:var(--yellow-0);--color-hover:var(--yellow)}.brown{--color:var(--brown);--color-hover:var(--brown)}.brown,.brown-0{color:var(--color)}.brown-0{--color:var(--brown-0);--color-hover:var(--brown)}.grey{--color:var(--grey);--color-hover:var(--grey)}.grey,.grey-0{color:var(--color)}.grey-0{--color:var(--grey-0);--color-hover:var(--grey)}.pink{--color:var(--pink);--color-hover:var(--pink)}.pink,.pink-0{color:var(--color)}.pink-0{--color:var(--pink-0);--color-hover:var(--pink)}.purple{--color:var(--purple);--color-hover:var(--purple)}.purple,.purple-0{color:var(--color)}.purple-0{--color:var(--purple-0);--color-hover:var(--purple)}.aqua{--color:var(--aqua);--color-hover:var(--aqua)}.aqua,.aqua-0{color:var(--color)}.aqua-0{--color:var(--aqua-0);--color-hover:var(--aqua)}.orange{--color:var(--orange);--color-hover:var(--orange)}.orange,.orange-0{color:var(--color)}.orange-0{--color:var(--orange-0);--color-hover:var(--orange)}.warning{--color:var(--warning);--color-hover:var(--warning);color:var(--color)}.warning-0{--color:var(--warning-0);--color-hover:var(--warning);color:var(--color)}.error{--color:var(--error);--color-hover:var(--error)}.error,.error-0{color:var(--color)}.error-0{--color:var(--error-0);--color-hover:var(--error)}.success{--color:var(--success);--color-hover:var(--success);color:var(--color)}.success-0{--color:var(--success-0);--color-hover:var(--success);color:var(--color)}.green:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--green-0)}.yellow:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--yellow-0)}.brown:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--brown-0)}.grey:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--grey-0)}.pink:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--pink-0)}.purple:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--purple-0)}.aqua:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--aqua-0)}.orange:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--orange-0)}.warning:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--warning-0)}.error:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--error-0)}.success:not([class*=" bg-"]):not([class^=bg-]){--background-hover:var(--success-0)}.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)}.color-10{--color:var(--color-10);color:var(--color-10)}}.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;--color-10:#000;--background:#2a2a2a;--background-1:#1d1d1d;--background-hover:transparent;--background-opacity:rgba(0,0,0,.4);--background-opacity-1:rgba(66,66,66,.4);--background-opacity-2:hsla(0,0%,41%,.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;--color-10:#000;--background:#2a2a2a;--background-1:#1d1d1d;--background-hover:transparent;--background-opacity:rgba(0,0,0,.4);--background-opacity-1:rgba(66,66,66,.4);--background-opacity-2:hsla(0,0%,41%,.4);--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;min-height:0;min-width:0}.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{--background:var(--background);backdrop-filter:var(--blur)}.roundless{border-radius:0}.round{--radius:50dvw;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}.pd{padding:var(--padding)}.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.46em;justify-content:center;line-height:1;outline:none;padding:0 .628em;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.46em;&.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-checkbox{gap:1em}.i-checkbox-item{align-items:baseline;align-self:flex-start;border-radius:var(--radius);display:inline-flex;gap:.425em;&: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:1em;position:relative}.i-checkbox-options-button{gap:.5em}.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:var(--padding);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:var(--padding);padding-block:0;transition:var(--transition)}.i-collapse-active>.i-collapse-header,.i-collapse-header:hover{opacity:1}.i-collapse-active>.i-collapse-content{height:unset;padding:var(--padding)}.i-collapse-disabled{opacity:.4;pointer-events:none;>.i-collapse-content{height:0;overflow:hidden;padding-block:0}}.i-empty{color:var(--color-7);height:3em;margin:auto;width:3em}.i-datagrid-container{--datagrid-cell-background:var(--background);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(--background-opacity-2);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 .i-datagrid-row{display:contents}.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"],[class^=i-datagrid-cell-fixed]{z-index:2}.i-datagrid-normal.i-datagrid-striped{.i-datagrid-row{&:nth-child(odd){--datagrid-cell-background:var(--background-1)}}}.i-datagrid-cell-fixed-right{box-shadow:-2px 0 2px var(--color-9)}.i-datagrid-cell-fixed-left{box-shadow:2px 0 2px 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{--datagrid-cell-background:var(--background-1);.i-datagrid-cell{line-height:1;text-overflow:ellipsis;user-select:none;white-space:nowrap;z-index:3}[class*=" i-datagrid-cell-fixed"],[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(--background-opacity);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-7);&+.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}}.i-list-option{align-items:center;cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:not(.i-list-item-bordered){margin:0 var(--option-gap,4px)}&: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-list-option-type{--option-gap:4px;--padding:0.425em 0.825em;border-radius:var(--radius);display:flex;flex-direction:column;gap:2px;padding:var(--option-gap) 0}.i-list-option-type>.i-divider{margin-block:calc(var(--option-gap) - 2px)}.i-popup{border-radius:var(--radius);filter:drop-shadow(var(--shadow));opacity:0;transform:translateY(2px);will-change:left,top,opacity,transform;z-index:100}.i-popup,.i-popup-arrow{background:var(--background);position:absolute;transition:all .12s}.i-popup-arrow{height:10px;pointer-events:none;width:10px}.i-popup-bordered{border:1px solid var(--background-opacity-2)}.i-dropdown-content{border-radius:inherit;max-height:32dvh;overflow-x:hidden}.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;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{align-content:flex-start;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(--background-opacity);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:.5em;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{backdrop-filter:var(--blur);background:var(--background-opacity);inset:0;justify-content:center;position:absolute}.i-divider,.i-image-cover{align-items:center;display:flex}.i-divider{font-size:.81em;line-height:1;list-style:none;margin-block:1em;user-select:none}.i-divider:after,.i-divider:before{background-color:var(--divider-color,var(--background-opacity-2));content:"";flex:1;height:var(--divider-width,1px)}.i-divider-content{color:var(--divider-color,var(--color-5));margin-inline:.5em}.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:var(--padding);.i-tag{background:var(--color-main-0);line-height:1.36em;padding:0 .5em;position:relative}.i-tag-close{border-radius:2px}}.i-select-options{--gap:0.25em;border-radius:inherit;display:flex;flex-direction:column;gap:2px;max-height:32dvh;overflow-x:hidden;padding:4px 0;.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-large{font-size:1em}&.i-tag-extreme{font-size:1.5em;height:2em}&.i-tag-small{font-size:.72em;padding:.125em .4em}.i-tag-close{background:var(--error);color:var(--white);font-size:.72em;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-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-pill-list{--background-hover:var(--color-8);align-items:center;align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.5em}.i-pill{flex-shrink:0;font-size:1em;gap:0;outline:1.5px solid transparent;white-space:nowrap}.i-pill-create{align-self:stretch;cursor:pointer;padding:.25em}.i-pill-editing{cursor:text;min-width:2.25em;outline:1.5px solid var(--background-hover);outline-offset:-2px;&:before{content:"\200b";opacity:0}}.i-popconfirm{padding:12px}.i-popconfirm-footer{margin-top:12px}.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:.825em;position:relative}.i-radio-options-button{flex:none;gap:.5em}.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-1)}.i-tab-navs{gap:4px;padding: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:8px 12px;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;min-height:0;position:relative}.i-tab-content{display:none;&.i-tab-active{display:block}}.i-tabs{.i-tab-nav-close{background:var(--background);font-size:.8em;margin:0;opacity:0;padding:0;position:absolute;right:4px;&:hover{background:var(--background);color:var(--error)}}}.i-tree{--tree-gap:2px;--padding:0.425em 0.825em;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-weight:500;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);display:flex;gap:.5em;opacity:.4;overflow:hidden;padding:var(--padding);position:relative;user-select:none}.i-tree-item-header.i-tree-item-selected,.i-tree-item-header:hover{background:var(--background-opacity-1);opacity:1}.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/cell.js CHANGED
@@ -11,7 +11,7 @@ function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
11
11
  return style;
12
12
  }
13
13
  function Cell(props) {
14
- const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick, } = props;
14
+ const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick } = props;
15
15
  const { id, fixed, justify, rowSpan, render } = column;
16
16
  const style = useMemo(() => getCellStyle({ justify, col, row, rowSpan }), [col, fixed, justify, row, rowSpan]);
17
17
  const handleClick = useCallback((e) => onCellClick?.(data, column, row, col, e), [col, column, data, onCellClick, row]);
package/lib/es/components/datagrid/datagrid.js CHANGED
@@ -10,7 +10,7 @@ import Row, { Header } from './row.js';
10
10
  import VirtualDatagrid from './virtual.js';
11
11
 
12
12
  const Datagrid = (props) => {
13
- const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, rowKey, virtual, renderLoading = () => jsx(Loading, { className: "color-3", absolute: true }), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
13
+ const { data = [], columns = [], border = true, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", rowHeight, style, className, rowKey, virtual, renderLoading = () => jsx(Loading, { className: "color-3", absolute: true }), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
14
14
  const container = useRef(null);
15
15
  const wrapRef = useRef(null);
16
16
  const state = useReactive({
@@ -97,6 +97,7 @@ const Datagrid = (props) => {
97
97
  const rowHeight = virtual.rowHeight;
98
98
  return !!rowHeight && rowHeight > 0;
99
99
  }, [virtual]);
100
+ const rowAuto = !useVirtual && rowHeight != null ? rowHeight : undefined;
100
101
  useEffect(() => {
101
102
  if (!container.current)
102
103
  return;
@@ -154,9 +155,10 @@ const Datagrid = (props) => {
154
155
  }, className: classNames("i-datagrid-container", className, {
155
156
  "i-datagrid-bordered": border,
156
157
  "i-datagrid-striped": striped,
158
+ "i-datagrid-normal": !virtual,
157
159
  }), 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", {
158
160
  "i-datagrid-loading": loading,
159
- }), 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()] }));
161
+ }), style: rowAuto != null ? { gridAutoRows: rowAuto } : undefined, 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()] }));
160
162
  };
161
163
 
162
164
  export { Datagrid as default };
package/lib/es/components/datagrid/virtual.js CHANGED
@@ -7,7 +7,7 @@ import Loading from '../loading/loading.js';
7
7
  import Resize from './resize.js';
8
8
  import Sorter from './sorter.js';
9
9
 
10
- const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader, cellEllipsis, sortBy, sortType, resizable, onWidthChange, }) {
10
+ const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader, cellEllipsis, sortBy, sortType, resizable, onWidthChange }) {
11
11
  const { id, fixed, justify, colSpan, render, title, sorter, renderHeader } = column;
12
12
  const style = useMemo(() => ({
13
13
  "--datagrid-justify": justify,
@@ -26,11 +26,8 @@ const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader
26
26
  }), children: title || id })))
27
27
  : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
28
28
  "i-datagrid-cell-content-ellipsis": cellEllipsis,
29
- }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }));
29
+ }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && jsx(Resize, { index: col, onWidthChange: onWidthChange })] }));
30
30
  });
31
- // ---------------------------------------------------------------------------
32
- // VirtualRow — memoised row rendered by react-window
33
- // ---------------------------------------------------------------------------
34
31
  const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttributes, rows, columns, columnById, columnIndexById, contentWidthPx, virtualRowHeight, header, striped, cellEllipsis, loaderNode, sortBy, sortType, resizable, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, }) {
35
32
  if (index >= rows.length) {
36
33
  return (jsx("div", { ...ariaAttributes, style: {
@@ -44,7 +41,7 @@ const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttri
44
41
  }
45
42
  const rowData = rows[index];
46
43
  const rowNum = index + (header ? 1 : 0);
47
- const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
44
+ const bg = striped && index % 2 === 1 ? "var(--background-1)" : undefined;
48
45
  const handleCellClick = useCallback((e) => {
49
46
  if (!onCellClick)
50
47
  return;
@@ -80,13 +77,10 @@ const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttri
80
77
  gridTemplateColumns: "var(--grid-template-columns)",
81
78
  height: virtualRowHeight,
82
79
  "--datagrid-cell-background": bg,
83
- }, className: 'i-datagrid-row', onClick: handleRowClick, onClickCapture: handleCellClick, onDoubleClickCapture: handleCellDoubleClick, children: columns.map((c, col) => (jsx(VirtualCell, { column: c, data: rowData, row: rowNum, col: col, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))) }));
80
+ }, className: "i-datagrid-row", onClick: handleRowClick, onClickCapture: handleCellClick, onDoubleClickCapture: handleCellDoubleClick, children: columns.map((c, col) => (jsx(VirtualCell, { column: c, data: rowData, row: rowNum, col: col, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))) }));
84
81
  });
85
- // ---------------------------------------------------------------------------
86
- // VirtualDatagrid
87
- // ---------------------------------------------------------------------------
88
82
  function VirtualDatagrid(props) {
89
- const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll, } = props;
83
+ const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll } = props;
90
84
  const headerRef = useRef(null);
91
85
  const headerInnerRef = useRef(null);
92
86
  const listRef = useRef(null);
@@ -220,22 +214,12 @@ function VirtualDatagrid(props) {
220
214
  listEl?.scrollTo({ top: 0, left: 0 });
221
215
  headerRef.current?.scrollTo({ top: 0, left: 0 });
222
216
  }, [loading]);
223
- const listHeight = Math.max(0, (typeof height === "number" ? height : viewport.height || 360) -
224
- (header ? virtual.rowHeight : 0));
217
+ const listHeight = Math.max(0, (typeof height === "number" ? height : viewport.height || 360) - (header ? virtual.rowHeight : 0));
225
218
  const hasVerticalScrollbar = rows.length * virtual.rowHeight > listHeight + 1;
226
219
  const scrollbarSize = hasVerticalScrollbar ? getScrollbarSize() : 0;
227
220
  const measuredContentWidth = Math.max(contentWidth, viewport.width || 0);
228
- const contentWidthPx = measuredContentWidth
229
- ? `${measuredContentWidth}px`
230
- : "fit-content";
231
- const headerCells = useMemo(() => columns.map((c, col) => (jsx(VirtualCell, { column: c, row: 0, col: col, isHeader: true, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))), [
232
- cellEllipsis,
233
- columns,
234
- onWidthChange,
235
- resizable,
236
- sortBy,
237
- sortType,
238
- ]);
221
+ const contentWidthPx = measuredContentWidth ? `${measuredContentWidth}px` : "fit-content";
222
+ const headerCells = useMemo(() => columns.map((c, col) => jsx(VirtualCell, { column: c, row: 0, col: col, isHeader: true, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id)), [cellEllipsis, columns, onWidthChange, resizable, sortBy, sortType]);
239
223
  const headerInnerStyle = useMemo(() => ({
240
224
  display: "grid",
241
225
  gridTemplateColumns: "var(--grid-template-columns)",
@@ -254,8 +238,7 @@ function VirtualDatagrid(props) {
254
238
  boxSizing: "content-box",
255
239
  }
256
240
  : undefined, [scrollbarSize]);
257
- const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: 'my-12' }), [virtual.loader]);
258
- // Stable row-component reference so react-window can memoise rows.
241
+ const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: "my-12" }), [virtual.loader]);
259
242
  const rowProps = useMemo(() => ({
260
243
  rows,
261
244
  columns,
@@ -274,28 +257,10 @@ function VirtualDatagrid(props) {
274
257
  onRowClick,
275
258
  onCellClick,
276
259
  onCellDoubleClick,
277
- }), [
278
- rows,
279
- columns,
280
- columnById,
281
- columnIndexById,
282
- contentWidthPx,
283
- virtual.rowHeight,
284
- header,
285
- striped,
286
- cellEllipsis,
287
- loaderNode,
288
- sortBy,
289
- sortType,
290
- resizable,
291
- onWidthChange,
292
- onRowClick,
293
- onCellClick,
294
- onCellDoubleClick,
295
- ]);
260
+ }), [rows, columns, columnById, columnIndexById, contentWidthPx, virtual.rowHeight, header, striped, cellEllipsis, loaderNode, sortBy, sortType, resizable, onWidthChange, onRowClick, onCellClick, onCellDoubleClick]);
296
261
  return (jsxs("div", { ref: containerRef, className: classNames("i-datagrid", {
297
262
  "i-datagrid-loading": loading,
298
- }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: rowProps, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: VirtualRow }), rows.length < 1 && !virtual.hasMore && empty] }));
263
+ }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: "i-datagrid-virtual-header", onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: "i-datagrid-header i-datagrid-row", style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: rowProps, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: VirtualRow }), rows.length < 1 && !virtual.hasMore && empty] }));
299
264
  }
300
265
 
301
266
  export { VirtualDatagrid as default };
package/lib/es/components/dropdown/dropdown.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { createContext, useState, useCallback, useEffect } from 'react';
2
+ import { createContext, useState, useCallback, useEffect, useContext } from 'react';
3
3
  import List from '../list/list.js';
4
4
  import Popup from '../popup/popup.js';
5
5
  import Item from './item.js';
6
6
 
7
- const DropdownContext = createContext(null);
7
+ const DropdownContext = createContext({ close: () => { } });
8
+ const useDropdown = () => useContext(DropdownContext);
8
9
  const Dropdown = (props) => {
9
10
  const { visible, width, content, children, ...restProps } = props;
10
11
  const [active, setActive] = useState(visible);
@@ -19,8 +20,8 @@ const Dropdown = (props) => {
19
20
  useEffect(() => {
20
21
  setActive(visible);
21
22
  }, [visible]);
22
- return (jsx(Popup, { trigger: "click", position: "bottom", content: jsx(DropdownContext.Provider, { value: close, children: jsx(List, { type: "option", className: "i-dropdown-content", style: { minWidth: width }, role: "menu", children: typeof content === "function" ? content(close) : content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
23
+ return (jsx(Popup, { trigger: "click", position: "bottom", border: true, content: jsx(DropdownContext.Provider, { value: { close, border: props.border }, children: jsx(List, { type: "option", className: "i-dropdown-content", style: { minWidth: width }, role: "menu", children: typeof content === "function" ? content(close) : content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
23
24
  };
24
25
  Dropdown.Item = Item;
25
26
 
26
- export { DropdownContext, Dropdown as default };
27
+ export { DropdownContext, Dropdown as default, useDropdown };
package/lib/es/components/dropdown/item.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { useContext, useRef, useState, useMemo } from 'react';
2
+ import { useRef, useState, useMemo } from 'react';
3
3
  import List from '../list/list.js';
4
4
  import Popup from '../popup/popup.js';
5
- import { DropdownContext } from './dropdown.js';
5
+ import { useDropdown } from './dropdown.js';
6
6
 
7
7
  const { Item: ListItem } = List;
8
8
  const Item = (props) => {
9
9
  const { more, moreProps, onClick, ref: itemRef, type = "option", children, ...restProps } = props;
10
- const close = useContext(DropdownContext);
10
+ const { close, border = true } = useDropdown();
11
11
  const liRef = useRef(null);
12
12
  const [position, setPosition] = useState("right");
13
13
  const { position: morePosition, onVisibleChange: moreOnVisibleChange, width: moreWidth, ...restMoreProps } = moreProps ?? {};
@@ -33,7 +33,7 @@ const Item = (props) => {
33
33
  }, type: type, ...restProps, children: children })), [itemRef, liRef, more, close, onClick, type, restProps, children]);
34
34
  if (!more)
35
35
  return Li;
36
- return (jsx(Popup, { ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset: 8, hideDelay: 240, onVisibleChange: handleVisibleChange, content: jsx(List, { type: "option", padding: 4, className: "i-dropdown-content", style: { minWidth: moreWidth }, onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
36
+ return (jsx(Popup, { border: border, ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset: 8, hideDelay: 240, onVisibleChange: handleVisibleChange, content: jsx(List, { type: "option", padding: 4, className: "i-dropdown-content", style: { minWidth: moreWidth }, onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
37
37
  };
38
38
 
39
39
  export { Item as default };
package/lib/es/components/popup/content.js CHANGED
@@ -1,38 +1,11 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import classNames from 'classnames';
3
- import { forwardRef, useMemo } from 'react';
3
+ import { forwardRef } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
 
6
6
  const Content = forwardRef((props, ref) => {
7
- const { arrow, arrowProps = {}, className, children, ...restProps } = props;
8
- const arrowCSS = useMemo(() => {
9
- let { left = 0, top = 0, pos } = arrowProps;
10
- let transform = "";
11
- switch (pos) {
12
- case "left":
13
- left += 2;
14
- transform = `translate(-100%, -50%) rotate(180deg)`;
15
- break;
16
- case "right":
17
- left -= 2;
18
- transform = `translate(0, -50%)`;
19
- break;
20
- case "top":
21
- top -= 2;
22
- transform = `translate(-50%, -50%) rotate(-90deg)`;
23
- break;
24
- case "bottom":
25
- top += 2;
26
- transform = `translate(-50%, -50%) rotate(90deg)`;
27
- break;
28
- }
29
- return {
30
- left,
31
- top,
32
- transform,
33
- };
34
- }, [arrowProps]);
35
- const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', className: 'i-popup-arrow', style: arrowCSS, children: jsx("path", { d: 'M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' }) })), children] }));
7
+ const { arrow, className, children, ...restProps } = props;
8
+ const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && jsx("div", { className: 'i-popup-arrow' }), children] }));
36
9
  const container = typeof document === "undefined" ? null : document.body;
37
10
  if (!container)
38
11
  return null;
package/lib/es/components/popup/popup.js CHANGED
@@ -20,7 +20,7 @@ const canAttachRef = (el) => {
20
20
  return false;
21
21
  };
22
22
  function Popup(props) {
23
- 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;
23
+ const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, border, align = "center", fitSize, disabled, style, className, children, match, onVisibleChange, } = props;
24
24
  const triggerRef = useRef(null);
25
25
  const contentRef = useRef(null);
26
26
  const timerRef = useRef(null);
@@ -32,6 +32,7 @@ function Popup(props) {
32
32
  const latestRef = useRef({});
33
33
  latestRef.current = {
34
34
  disabled,
35
+ border,
35
36
  trigger,
36
37
  touchable,
37
38
  showDelay,
@@ -109,38 +110,62 @@ function Popup(props) {
109
110
  arrowElRef.current = arrowEl;
110
111
  if (!arrowEl)
111
112
  return;
112
- let left = arrowX ?? 0;
113
- let top = arrowY ?? 0;
114
- let transform = "";
115
- switch (arrowPos) {
116
- case "left":
117
- left += 2;
118
- transform = `translate(-100%, -50%) rotate(180deg)`;
119
- break;
120
- case "right":
121
- left -= 2;
122
- transform = `translate(0, -50%)`;
123
- break;
124
- case "top":
125
- top -= 2;
126
- transform = `translate(-50%, -50%) rotate(-90deg)`;
127
- break;
128
- case "bottom":
129
- top += 2;
130
- transform = `translate(-50%, -50%) rotate(90deg)`;
131
- break;
132
- }
113
+ const left = arrowX ?? 0;
114
+ const top = arrowY ?? 0;
115
+ const transform = "translate(-50%, -50%) rotate(45deg)";
116
+ const hasBorder = !!latestRef.current.border;
117
+ const borderRadiusMap = {
118
+ top: "border-top-left-radius",
119
+ bottom: "border-bottom-right-radius",
120
+ left: "border-bottom-left-radius",
121
+ right: "border-top-right-radius",
122
+ };
123
+ const borderRadius = `${borderRadiusMap[arrowPos] ?? ""}: 3px`;
133
124
  const prev = lastArrowRef.current;
134
125
  if (prev &&
135
126
  prev.left === left &&
136
127
  prev.top === top &&
137
- prev.transform === transform) {
128
+ prev.transform === transform &&
129
+ prev.borderRadius === borderRadius &&
130
+ prev.hasBorder === hasBorder) {
138
131
  return;
139
132
  }
140
- lastArrowRef.current = { left, top, transform };
133
+ lastArrowRef.current = { left, top, transform, borderRadius, hasBorder };
141
134
  arrowEl.style.left = `${left}px`;
142
135
  arrowEl.style.top = `${top}px`;
143
136
  arrowEl.style.transform = transform;
137
+ // Reset all border-radii first, then apply the one for this position
138
+ arrowEl.style.borderRadius = "";
139
+ const radiusKey = borderRadiusMap[arrowPos];
140
+ if (radiusKey) {
141
+ arrowEl.style[radiusKey] = "3px";
142
+ }
143
+ // Show border on 2 adjacent sides matching the protruding tip
144
+ arrowEl.style.borderTop = "";
145
+ arrowEl.style.borderRight = "";
146
+ arrowEl.style.borderBottom = "";
147
+ arrowEl.style.borderLeft = "";
148
+ if (hasBorder) {
149
+ const b = "1px solid var(--background-opacity-2)";
150
+ switch (arrowPos) {
151
+ case "top":
152
+ arrowEl.style.borderTop = b;
153
+ arrowEl.style.borderLeft = b;
154
+ break;
155
+ case "bottom":
156
+ arrowEl.style.borderBottom = b;
157
+ arrowEl.style.borderRight = b;
158
+ break;
159
+ case "left":
160
+ arrowEl.style.borderBottom = b;
161
+ arrowEl.style.borderLeft = b;
162
+ break;
163
+ case "right":
164
+ arrowEl.style.borderTop = b;
165
+ arrowEl.style.borderRight = b;
166
+ break;
167
+ }
168
+ }
144
169
  };
145
170
  const applyLeftTop = (left, top) => {
146
171
  const contentEl = contentRef.current;
@@ -501,7 +526,7 @@ function Popup(props) {
501
526
  return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
502
527
  ...style,
503
528
  position: "fixed",
504
- }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
529
+ }, className: border ? `${className || ''} i-popup-bordered`.trim() : className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
505
530
  }
506
531
 
507
532
  export { Popup as default };
package/lib/es/components/tabs/helper.js CHANGED
@@ -8,15 +8,11 @@ const emptyBarStyle = {
8
8
  height: 0,
9
9
  width: 0,
10
10
  };
11
- const defaultRenderMore = () => (jsx(Button, { flat: true, square: true, size: "small", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) }));
11
+ const defaultRenderMore = () => (jsx(Button, { flat: true, square: true, size: "small", className: "mr-4", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) }));
12
12
  const isSameTabs = (prev, next) => prev.length === next.length &&
13
13
  prev.every((tab, index) => {
14
14
  const target = next[index];
15
- return (tab.key === target.key &&
16
- tab.title === target.title &&
17
- tab.keepDOM === target.keepDOM &&
18
- tab.closable === target.closable &&
19
- tab.intersecting === target.intersecting);
15
+ return tab.key === target.key && tab.title === target.title && tab.keepDOM === target.keepDOM && tab.closable === target.closable && tab.intersecting === target.intersecting;
20
16
  });
21
17
  const getParsedTabs = (items, children) => {
22
18
  const contents = new Map();
@@ -24,7 +20,7 @@ const getParsedTabs = (items, children) => {
24
20
  const lazyLoaders = new Map();
25
21
  const tabs = Children.map(children, (node, i) => {
26
22
  const { key, props: nodeProps } = node;
27
- const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
23
+ const { title, children: tabChildren, content, keepDOM, closable } = nodeProps;
28
24
  const tabKey = String(key ?? i);
29
25
  if (typeof content === "function") {
30
26
  lazyLoaders.set(tabKey, { load: content });
package/lib/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import classNames from 'classnames';
3
3
  import { debounce, uid, crush, throttle } from 'radash';
4
- import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useContext, createContext, useImperativeHandle } from 'react';
4
+ import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, createContext, useContext, useImperativeHandle } from 'react';
5
5
  import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, AddRound, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
6
6
  import { createRoot } from 'react-dom/client';
7
7
  import { getScrollbarSize, List as List$2 } from 'react-window';
@@ -1081,7 +1081,7 @@ function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
1081
1081
  return style;
1082
1082
  }
1083
1083
  function Cell(props) {
1084
- const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick, } = props;
1084
+ const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick } = props;
1085
1085
  const { id, fixed, justify, rowSpan, render } = column;
1086
1086
  const style = useMemo(() => getCellStyle({ justify, col, row, rowSpan }), [col, fixed, justify, row, rowSpan]);
1087
1087
  const handleClick = useCallback((e) => onCellClick?.(data, column, row, col, e), [col, column, data, onCellClick, row]);
@@ -1200,7 +1200,7 @@ function Header(props) {
1200
1200
  }) }));
1201
1201
  }
1202
1202
 
1203
- const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader, cellEllipsis, sortBy, sortType, resizable, onWidthChange, }) {
1203
+ const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader, cellEllipsis, sortBy, sortType, resizable, onWidthChange }) {
1204
1204
  const { id, fixed, justify, colSpan, render, title, sorter, renderHeader } = column;
1205
1205
  const style = useMemo(() => ({
1206
1206
  "--datagrid-justify": justify,
@@ -1219,11 +1219,8 @@ const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader
1219
1219
  }), children: title || id })))
1220
1220
  : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
1221
1221
  "i-datagrid-cell-content-ellipsis": cellEllipsis,
1222
- }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }));
1222
+ }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && jsx(Resize, { index: col, onWidthChange: onWidthChange })] }));
1223
1223
  });
1224
- // ---------------------------------------------------------------------------
1225
- // VirtualRow — memoised row rendered by react-window
1226
- // ---------------------------------------------------------------------------
1227
1224
  const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttributes, rows, columns, columnById, columnIndexById, contentWidthPx, virtualRowHeight, header, striped, cellEllipsis, loaderNode, sortBy, sortType, resizable, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, }) {
1228
1225
  if (index >= rows.length) {
1229
1226
  return (jsx("div", { ...ariaAttributes, style: {
@@ -1237,7 +1234,7 @@ const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttri
1237
1234
  }
1238
1235
  const rowData = rows[index];
1239
1236
  const rowNum = index + (header ? 1 : 0);
1240
- const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
1237
+ const bg = striped && index % 2 === 1 ? "var(--background-1)" : undefined;
1241
1238
  const handleCellClick = useCallback((e) => {
1242
1239
  if (!onCellClick)
1243
1240
  return;
@@ -1273,13 +1270,10 @@ const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttri
1273
1270
  gridTemplateColumns: "var(--grid-template-columns)",
1274
1271
  height: virtualRowHeight,
1275
1272
  "--datagrid-cell-background": bg,
1276
- }, className: 'i-datagrid-row', onClick: handleRowClick, onClickCapture: handleCellClick, onDoubleClickCapture: handleCellDoubleClick, children: columns.map((c, col) => (jsx(VirtualCell, { column: c, data: rowData, row: rowNum, col: col, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))) }));
1273
+ }, className: "i-datagrid-row", onClick: handleRowClick, onClickCapture: handleCellClick, onDoubleClickCapture: handleCellDoubleClick, children: columns.map((c, col) => (jsx(VirtualCell, { column: c, data: rowData, row: rowNum, col: col, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))) }));
1277
1274
  });
1278
- // ---------------------------------------------------------------------------
1279
- // VirtualDatagrid
1280
- // ---------------------------------------------------------------------------
1281
1275
  function VirtualDatagrid(props) {
1282
- const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll, } = props;
1276
+ const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll } = props;
1283
1277
  const headerRef = useRef(null);
1284
1278
  const headerInnerRef = useRef(null);
1285
1279
  const listRef = useRef(null);
@@ -1413,22 +1407,12 @@ function VirtualDatagrid(props) {
1413
1407
  listEl?.scrollTo({ top: 0, left: 0 });
1414
1408
  headerRef.current?.scrollTo({ top: 0, left: 0 });
1415
1409
  }, [loading]);
1416
- const listHeight = Math.max(0, (typeof height === "number" ? height : viewport.height || 360) -
1417
- (header ? virtual.rowHeight : 0));
1410
+ const listHeight = Math.max(0, (typeof height === "number" ? height : viewport.height || 360) - (header ? virtual.rowHeight : 0));
1418
1411
  const hasVerticalScrollbar = rows.length * virtual.rowHeight > listHeight + 1;
1419
1412
  const scrollbarSize = hasVerticalScrollbar ? getScrollbarSize() : 0;
1420
1413
  const measuredContentWidth = Math.max(contentWidth, viewport.width || 0);
1421
- const contentWidthPx = measuredContentWidth
1422
- ? `${measuredContentWidth}px`
1423
- : "fit-content";
1424
- const headerCells = useMemo(() => columns.map((c, col) => (jsx(VirtualCell, { column: c, row: 0, col: col, isHeader: true, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))), [
1425
- cellEllipsis,
1426
- columns,
1427
- onWidthChange,
1428
- resizable,
1429
- sortBy,
1430
- sortType,
1431
- ]);
1414
+ const contentWidthPx = measuredContentWidth ? `${measuredContentWidth}px` : "fit-content";
1415
+ const headerCells = useMemo(() => columns.map((c, col) => jsx(VirtualCell, { column: c, row: 0, col: col, isHeader: true, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id)), [cellEllipsis, columns, onWidthChange, resizable, sortBy, sortType]);
1432
1416
  const headerInnerStyle = useMemo(() => ({
1433
1417
  display: "grid",
1434
1418
  gridTemplateColumns: "var(--grid-template-columns)",
@@ -1447,8 +1431,7 @@ function VirtualDatagrid(props) {
1447
1431
  boxSizing: "content-box",
1448
1432
  }
1449
1433
  : undefined, [scrollbarSize]);
1450
- const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: 'my-12' }), [virtual.loader]);
1451
- // Stable row-component reference so react-window can memoise rows.
1434
+ const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: "my-12" }), [virtual.loader]);
1452
1435
  const rowProps = useMemo(() => ({
1453
1436
  rows,
1454
1437
  columns,
@@ -1467,32 +1450,14 @@ function VirtualDatagrid(props) {
1467
1450
  onRowClick,
1468
1451
  onCellClick,
1469
1452
  onCellDoubleClick,
1470
- }), [
1471
- rows,
1472
- columns,
1473
- columnById,
1474
- columnIndexById,
1475
- contentWidthPx,
1476
- virtual.rowHeight,
1477
- header,
1478
- striped,
1479
- cellEllipsis,
1480
- loaderNode,
1481
- sortBy,
1482
- sortType,
1483
- resizable,
1484
- onWidthChange,
1485
- onRowClick,
1486
- onCellClick,
1487
- onCellDoubleClick,
1488
- ]);
1453
+ }), [rows, columns, columnById, columnIndexById, contentWidthPx, virtual.rowHeight, header, striped, cellEllipsis, loaderNode, sortBy, sortType, resizable, onWidthChange, onRowClick, onCellClick, onCellDoubleClick]);
1489
1454
  return (jsxs("div", { ref: containerRef, className: classNames("i-datagrid", {
1490
1455
  "i-datagrid-loading": loading,
1491
- }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List$2, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: rowProps, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: VirtualRow }), rows.length < 1 && !virtual.hasMore && empty] }));
1456
+ }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: "i-datagrid-virtual-header", onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: "i-datagrid-header i-datagrid-row", style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List$2, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: rowProps, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: VirtualRow }), rows.length < 1 && !virtual.hasMore && empty] }));
1492
1457
  }
1493
1458
 
1494
1459
  const Datagrid = (props) => {
1495
- const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, rowKey, virtual, renderLoading = () => jsx(Loading, { className: "color-3", absolute: true }), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
1460
+ const { data = [], columns = [], border = true, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", rowHeight, style, className, rowKey, virtual, renderLoading = () => jsx(Loading, { className: "color-3", absolute: true }), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
1496
1461
  const container = useRef(null);
1497
1462
  const wrapRef = useRef(null);
1498
1463
  const state = useReactive({
@@ -1579,6 +1544,7 @@ const Datagrid = (props) => {
1579
1544
  const rowHeight = virtual.rowHeight;
1580
1545
  return !!rowHeight && rowHeight > 0;
1581
1546
  }, [virtual]);
1547
+ const rowAuto = !useVirtual && rowHeight != null ? rowHeight : undefined;
1582
1548
  useEffect(() => {
1583
1549
  if (!container.current)
1584
1550
  return;
@@ -1636,9 +1602,10 @@ const Datagrid = (props) => {
1636
1602
  }, className: classNames("i-datagrid-container", className, {
1637
1603
  "i-datagrid-bordered": border,
1638
1604
  "i-datagrid-striped": striped,
1605
+ "i-datagrid-normal": !virtual,
1639
1606
  }), 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", {
1640
1607
  "i-datagrid-loading": loading,
1641
- }), 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()] }));
1608
+ }), style: rowAuto != null ? { gridAutoRows: rowAuto } : undefined, 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()] }));
1642
1609
  };
1643
1610
 
1644
1611
  const Description = (props) => {
@@ -1763,35 +1730,8 @@ const List$1 = forwardRef((props, ref) => {
1763
1730
  List$1.Item = Item$4;
1764
1731
 
1765
1732
  const Content$3 = forwardRef((props, ref) => {
1766
- const { arrow, arrowProps = {}, className, children, ...restProps } = props;
1767
- const arrowCSS = useMemo(() => {
1768
- let { left = 0, top = 0, pos } = arrowProps;
1769
- let transform = "";
1770
- switch (pos) {
1771
- case "left":
1772
- left += 2;
1773
- transform = `translate(-100%, -50%) rotate(180deg)`;
1774
- break;
1775
- case "right":
1776
- left -= 2;
1777
- transform = `translate(0, -50%)`;
1778
- break;
1779
- case "top":
1780
- top -= 2;
1781
- transform = `translate(-50%, -50%) rotate(-90deg)`;
1782
- break;
1783
- case "bottom":
1784
- top += 2;
1785
- transform = `translate(-50%, -50%) rotate(90deg)`;
1786
- break;
1787
- }
1788
- return {
1789
- left,
1790
- top,
1791
- transform,
1792
- };
1793
- }, [arrowProps]);
1794
- const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', className: 'i-popup-arrow', style: arrowCSS, children: jsx("path", { d: 'M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' }) })), children] }));
1733
+ const { arrow, className, children, ...restProps } = props;
1734
+ const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && jsx("div", { className: 'i-popup-arrow' }), children] }));
1795
1735
  const container = typeof document === "undefined" ? null : document.body;
1796
1736
  if (!container)
1797
1737
  return null;
@@ -1813,7 +1753,7 @@ const canAttachRef = (el) => {
1813
1753
  return false;
1814
1754
  };
1815
1755
  function Popup(props) {
1816
- 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;
1756
+ const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, border, align = "center", fitSize, disabled, style, className, children, match, onVisibleChange, } = props;
1817
1757
  const triggerRef = useRef(null);
1818
1758
  const contentRef = useRef(null);
1819
1759
  const timerRef = useRef(null);
@@ -1825,6 +1765,7 @@ function Popup(props) {
1825
1765
  const latestRef = useRef({});
1826
1766
  latestRef.current = {
1827
1767
  disabled,
1768
+ border,
1828
1769
  trigger,
1829
1770
  touchable,
1830
1771
  showDelay,
@@ -1902,38 +1843,62 @@ function Popup(props) {
1902
1843
  arrowElRef.current = arrowEl;
1903
1844
  if (!arrowEl)
1904
1845
  return;
1905
- let left = arrowX ?? 0;
1906
- let top = arrowY ?? 0;
1907
- let transform = "";
1908
- switch (arrowPos) {
1909
- case "left":
1910
- left += 2;
1911
- transform = `translate(-100%, -50%) rotate(180deg)`;
1912
- break;
1913
- case "right":
1914
- left -= 2;
1915
- transform = `translate(0, -50%)`;
1916
- break;
1917
- case "top":
1918
- top -= 2;
1919
- transform = `translate(-50%, -50%) rotate(-90deg)`;
1920
- break;
1921
- case "bottom":
1922
- top += 2;
1923
- transform = `translate(-50%, -50%) rotate(90deg)`;
1924
- break;
1925
- }
1846
+ const left = arrowX ?? 0;
1847
+ const top = arrowY ?? 0;
1848
+ const transform = "translate(-50%, -50%) rotate(45deg)";
1849
+ const hasBorder = !!latestRef.current.border;
1850
+ const borderRadiusMap = {
1851
+ top: "border-top-left-radius",
1852
+ bottom: "border-bottom-right-radius",
1853
+ left: "border-bottom-left-radius",
1854
+ right: "border-top-right-radius",
1855
+ };
1856
+ const borderRadius = `${borderRadiusMap[arrowPos] ?? ""}: 3px`;
1926
1857
  const prev = lastArrowRef.current;
1927
1858
  if (prev &&
1928
1859
  prev.left === left &&
1929
1860
  prev.top === top &&
1930
- prev.transform === transform) {
1861
+ prev.transform === transform &&
1862
+ prev.borderRadius === borderRadius &&
1863
+ prev.hasBorder === hasBorder) {
1931
1864
  return;
1932
1865
  }
1933
- lastArrowRef.current = { left, top, transform };
1866
+ lastArrowRef.current = { left, top, transform, borderRadius, hasBorder };
1934
1867
  arrowEl.style.left = `${left}px`;
1935
1868
  arrowEl.style.top = `${top}px`;
1936
1869
  arrowEl.style.transform = transform;
1870
+ // Reset all border-radii first, then apply the one for this position
1871
+ arrowEl.style.borderRadius = "";
1872
+ const radiusKey = borderRadiusMap[arrowPos];
1873
+ if (radiusKey) {
1874
+ arrowEl.style[radiusKey] = "3px";
1875
+ }
1876
+ // Show border on 2 adjacent sides matching the protruding tip
1877
+ arrowEl.style.borderTop = "";
1878
+ arrowEl.style.borderRight = "";
1879
+ arrowEl.style.borderBottom = "";
1880
+ arrowEl.style.borderLeft = "";
1881
+ if (hasBorder) {
1882
+ const b = "1px solid var(--background-opacity-2)";
1883
+ switch (arrowPos) {
1884
+ case "top":
1885
+ arrowEl.style.borderTop = b;
1886
+ arrowEl.style.borderLeft = b;
1887
+ break;
1888
+ case "bottom":
1889
+ arrowEl.style.borderBottom = b;
1890
+ arrowEl.style.borderRight = b;
1891
+ break;
1892
+ case "left":
1893
+ arrowEl.style.borderBottom = b;
1894
+ arrowEl.style.borderLeft = b;
1895
+ break;
1896
+ case "right":
1897
+ arrowEl.style.borderTop = b;
1898
+ arrowEl.style.borderRight = b;
1899
+ break;
1900
+ }
1901
+ }
1937
1902
  };
1938
1903
  const applyLeftTop = (left, top) => {
1939
1904
  const contentEl = contentRef.current;
@@ -2294,13 +2259,13 @@ function Popup(props) {
2294
2259
  return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content$3, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
2295
2260
  ...style,
2296
2261
  position: "fixed",
2297
- }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
2262
+ }, className: border ? `${className || ''} i-popup-bordered`.trim() : className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
2298
2263
  }
2299
2264
 
2300
2265
  const { Item: ListItem } = List$1;
2301
2266
  const Item$3 = (props) => {
2302
2267
  const { more, moreProps, onClick, ref: itemRef, type = "option", children, ...restProps } = props;
2303
- const close = useContext(DropdownContext);
2268
+ const { close, border = true } = useDropdown();
2304
2269
  const liRef = useRef(null);
2305
2270
  const [position, setPosition] = useState("right");
2306
2271
  const { position: morePosition, onVisibleChange: moreOnVisibleChange, width: moreWidth, ...restMoreProps } = moreProps ?? {};
@@ -2326,10 +2291,11 @@ const Item$3 = (props) => {
2326
2291
  }, type: type, ...restProps, children: children })), [itemRef, liRef, more, close, onClick, type, restProps, children]);
2327
2292
  if (!more)
2328
2293
  return Li;
2329
- return (jsx(Popup, { ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset: 8, hideDelay: 240, onVisibleChange: handleVisibleChange, content: jsx(List$1, { type: "option", padding: 4, className: "i-dropdown-content", style: { minWidth: moreWidth }, onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
2294
+ return (jsx(Popup, { border: border, ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset: 8, hideDelay: 240, onVisibleChange: handleVisibleChange, content: jsx(List$1, { type: "option", padding: 4, className: "i-dropdown-content", style: { minWidth: moreWidth }, onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
2330
2295
  };
2331
2296
 
2332
- const DropdownContext = createContext(null);
2297
+ const DropdownContext = createContext({ close: () => { } });
2298
+ const useDropdown = () => useContext(DropdownContext);
2333
2299
  const Dropdown = (props) => {
2334
2300
  const { visible, width, content, children, ...restProps } = props;
2335
2301
  const [active, setActive] = useState(visible);
@@ -2344,7 +2310,7 @@ const Dropdown = (props) => {
2344
2310
  useEffect(() => {
2345
2311
  setActive(visible);
2346
2312
  }, [visible]);
2347
- return (jsx(Popup, { trigger: "click", position: "bottom", content: jsx(DropdownContext.Provider, { value: close, children: jsx(List$1, { type: "option", className: "i-dropdown-content", style: { minWidth: width }, role: "menu", children: typeof content === "function" ? content(close) : content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
2313
+ return (jsx(Popup, { trigger: "click", position: "bottom", border: true, content: jsx(DropdownContext.Provider, { value: { close, border: props.border }, children: jsx(List$1, { type: "option", className: "i-dropdown-content", style: { minWidth: width }, role: "menu", children: typeof content === "function" ? content(close) : content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
2348
2314
  };
2349
2315
  Dropdown.Item = Item$3;
2350
2316
 
@@ -6187,15 +6153,11 @@ const emptyBarStyle = {
6187
6153
  height: 0,
6188
6154
  width: 0,
6189
6155
  };
6190
- const defaultRenderMore = () => (jsx(Button, { flat: true, square: true, size: "small", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) }));
6156
+ const defaultRenderMore = () => (jsx(Button, { flat: true, square: true, size: "small", className: "mr-4", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) }));
6191
6157
  const isSameTabs = (prev, next) => prev.length === next.length &&
6192
6158
  prev.every((tab, index) => {
6193
6159
  const target = next[index];
6194
- return (tab.key === target.key &&
6195
- tab.title === target.title &&
6196
- tab.keepDOM === target.keepDOM &&
6197
- tab.closable === target.closable &&
6198
- tab.intersecting === target.intersecting);
6160
+ return tab.key === target.key && tab.title === target.title && tab.keepDOM === target.keepDOM && tab.closable === target.closable && tab.intersecting === target.intersecting;
6199
6161
  });
6200
6162
  const getParsedTabs = (items, children) => {
6201
6163
  const contents = new Map();
@@ -6203,7 +6165,7 @@ const getParsedTabs = (items, children) => {
6203
6165
  const lazyLoaders = new Map();
6204
6166
  const tabs = Children.map(children, (node, i) => {
6205
6167
  const { key, props: nodeProps } = node;
6206
- const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
6168
+ const { title, children: tabChildren, content, keepDOM, closable } = nodeProps;
6207
6169
  const tabKey = String(key ?? i);
6208
6170
  if (typeof content === "function") {
6209
6171
  lazyLoaders.set(tabKey, { load: content });
package/lib/types/components/datagrid/type.d.ts CHANGED
@@ -8,7 +8,7 @@ interface IColumn {
8
8
  justify?: string;
9
9
  rowSpan?: number;
10
10
  colSpan?: number;
11
- width?: string;
11
+ width?: string | number;
12
12
  fixed?: "left" | "right";
13
13
  render?: (value?: any, data?: IData, row?: number, col?: number) => ReactNode;
14
14
  renderHeader?: (column?: IColumn, col?: number) => ReactNode;
@@ -26,6 +26,7 @@ interface IDatagrid {
26
26
  cellPadding?: string | number;
27
27
  cellEllipsis?: boolean;
28
28
  height?: number | string;
29
+ rowHeight?: number;
29
30
  style?: CSSProperties;
30
31
  className?: string;
31
32
  virtual?: {
package/lib/types/components/popup/type.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IPopup {
9
9
  offset?: number;
10
10
  position?: TPosition;
11
11
  arrow?: boolean;
12
+ border?: boolean;
12
13
  align?: "start" | "center" | "end";
13
14
  showDelay?: number;
14
15
  hideDelay?: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ioca/react",
3
- "version": "1.5.31",
3
+ "version": "1.5.33",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",