@ioca/react 1.5.30 → 1.5.31
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.
- package/lib/css/index.css +1 -1
- package/lib/es/components/divider/divider.js +12 -0
- package/lib/es/components/divider/index.js +5 -0
- package/lib/es/components/dropdown/dropdown.js +8 -12
- package/lib/es/components/dropdown/item.js +15 -9
- package/lib/es/components/list/item.js +5 -1
- package/lib/es/components/list/list.js +11 -4
- package/lib/es/index.js +1 -0
- package/lib/index.js +44 -23
- package/lib/types/components/divider/divider.d.ts +6 -0
- package/lib/types/components/divider/index.d.ts +5 -0
- package/lib/types/components/divider/type.d.ts +9 -0
- package/lib/types/components/dropdown/type.d.ts +3 -1
- package/lib/types/components/list/type.d.ts +1 -0
- package/lib/types/index.d.ts +1 -0
- 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-8);&+.i-list-item-bordered{margin-top:-1px}&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}&:hover{box-shadow:inset 0 0 0 1px var(--color-7);z-index:1}}.i-list-option{cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:hover{background-color:var(--background-opacity-2)}&.i-list-item-active{background-color:var(--color-main-0)}}.i-list-item-label{align-self:flex-start}.i-popup{--background:var(--background-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:2px;max-height:32dvh;overflow-x:hidden;padding:8px}.i-dropdown-content,.i-editor{display:flex;flex-direction:column}.i-editor{position:relative;&:focus-within,&:hover{>.i-editor-content,>.i-editor-controls{border-color:var(--color-8)}}}.i-editor-borderless{border-radius:var(--radius);&>.i-editor-content,&>.i-editor-controls{border:none}}.i-editor-controls{border:2px solid var(--color-9);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;display:flex;gap:2px;padding:2px;transition:var(--transition);.i-btn{--color:var(--color-5);&:hover{--color:var(--color);.i-editor-control-tip{opacity:1}}}}.i-editor-control-tip{backdrop-filter:var(--blur);border-radius:4px;left:50%;line-height:1;opacity:0;padding:4px;pointer-events:none;position:absolute;top:100%;transform:translate(-50%);transition:var(--transition);z-index:1}.i-editor-content{word-wrap:break-word;border:2px solid var(--color-9);border-radius:0 0 var(--radius) var(--radius);flex:1;outline:none;overflow:auto;padding:var(--padding);tab-size:1em;transition:var(--transition);white-space:pre-wrap;word-break:break-all;&:first-child{border-radius:var(--radius)}&:focus,&:hover{border-color:var(--color-8)}a{color:var(--blue)}img{margin:0}&:empty:before{color:var(--color-5);content:attr(data-placeholder);pointer-events:none}}.i-editor-memtion{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 0;max-width:240px;min-width:120px;overflow:auto;padding:4px;z-index:1000;.i-list-item{color:var(--color-5)}.i-list-item-active{color:var(--color-main)}}.i-memtion-tag{align-items:center;display:inline-flex;max-width:100%;user-select:none;vertical-align:baseline}.i-form{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{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);display:flex;inset:0;justify-content:center;position:absolute}.i-messages{cursor:default;display:flex;flex-direction:column;inset:0;pointer-events:none;position:fixed;z-index:10000}.i-message,.i-messages{transition:var(--transition)}.i-message{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;padding:.625em 1em;pointer-events:all;position:absolute;transform:translate(80px) scale(.86) skew(-40deg);&.i-message-active{opacity:1;transform:translate(0)}}.i-pagination{align-items:center;display:flex;gap:.2em}.i-page{--background:transparent;--color:var(--color-7);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;height:2.25em;justify-content:center;min-width:2.25em;outline:none;padding:0 .32em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}.i-loading-container{backdrop-filter:var(--blur);background:var(--background-opacity);contain:paint;inset:0;position:absolute;z-index:1}&:hover{--background:var(--background-opacity-2)}&.i-page-active{--background:var(--color-main);--color:var(--color-main-reverse);cursor:default}&.i-page-loading{--background:unset;cursor:default}}.i-select{display:flex;gap:.25em}.i-select-multiple{flex-wrap:wrap;padding: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-1);border-radius:4px;bottom:0;height:0;left:0;pointer-events:none;position:absolute;transition:var(--transition)}.i-tab-navs-vertical{>.i-tab-navs{gap:1px;>.i-tab-navs-bar{bottom:unset;left:unset;right:0;top:0;width:0}}}.i-tab-contents{flex:1;position:relative}.i-tab-content{display:none;&.i-tab-active{display:block}}.i-tabs{.i-tab-nav-close{background:var(--background);font-size:.7em;margin:0;opacity:0;padding:0;position:absolute;right:4px;&:hover{background:var(--background);color:var(--error)}}}.i-tree{--tree-gap:2px;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-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:#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)}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
|
|
4
|
+
const Divider = ({ className, children, color, width, style, ...restProps }) => {
|
|
5
|
+
return (jsx("li", { role: "separator", className: classNames("i-divider", className), style: {
|
|
6
|
+
...(color !== undefined ? { "--divider-color": color } : undefined),
|
|
7
|
+
...(width !== undefined ? { "--divider-width": typeof width === "number" ? `${width}px` : width } : undefined),
|
|
8
|
+
...style,
|
|
9
|
+
}, ...restProps, children: children && jsx("div", { className: "i-divider-content", children: children }) }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { Divider as default };
|
|
@@ -1,30 +1,26 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useState, useEffect } from 'react';
|
|
2
|
+
import { createContext, useState, useCallback, useEffect } 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
|
|
7
|
+
const DropdownContext = createContext(null);
|
|
8
8
|
const Dropdown = (props) => {
|
|
9
9
|
const { visible, width, content, children, ...restProps } = props;
|
|
10
10
|
const [active, setActive] = useState(visible);
|
|
11
11
|
if (!content) {
|
|
12
12
|
return children;
|
|
13
13
|
}
|
|
14
|
-
const close = () => setActive(false);
|
|
15
|
-
const handleVisibleChange = (v) => {
|
|
14
|
+
const close = useCallback(() => setActive(false), []);
|
|
15
|
+
const handleVisibleChange = useCallback((v) => {
|
|
16
16
|
setActive(v);
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
};
|
|
17
|
+
props.onVisibleChange?.(v);
|
|
18
|
+
}, [props.onVisibleChange]);
|
|
21
19
|
useEffect(() => {
|
|
22
20
|
setActive(visible);
|
|
23
21
|
}, [visible]);
|
|
24
|
-
return (jsx(Popup, { trigger:
|
|
25
|
-
? content(close)
|
|
26
|
-
: content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
|
|
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 }));
|
|
27
23
|
};
|
|
28
24
|
Dropdown.Item = Item;
|
|
29
25
|
|
|
30
|
-
export {
|
|
26
|
+
export { DropdownContext, Dropdown as default };
|
|
@@ -1,33 +1,39 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useContext, useRef, useState } from 'react';
|
|
2
|
+
import { useContext, useRef, useState, useMemo } from 'react';
|
|
3
3
|
import List from '../list/list.js';
|
|
4
4
|
import Popup from '../popup/popup.js';
|
|
5
|
-
import {
|
|
5
|
+
import { DropdownContext } from './dropdown.js';
|
|
6
6
|
|
|
7
7
|
const { Item: ListItem } = List;
|
|
8
8
|
const Item = (props) => {
|
|
9
|
-
const { more, moreProps, onClick, ref: itemRef, children, ...restProps } = props;
|
|
10
|
-
const close = useContext(
|
|
9
|
+
const { more, moreProps, onClick, ref: itemRef, type = "option", children, ...restProps } = props;
|
|
10
|
+
const close = useContext(DropdownContext);
|
|
11
11
|
const liRef = useRef(null);
|
|
12
12
|
const [position, setPosition] = useState("right");
|
|
13
13
|
const { position: morePosition, onVisibleChange: moreOnVisibleChange, width: moreWidth, ...restMoreProps } = moreProps ?? {};
|
|
14
14
|
const effectivePosition = morePosition ?? position;
|
|
15
|
+
const rafRef = useRef(0);
|
|
15
16
|
const handleVisibleChange = (v) => {
|
|
16
17
|
if (v && liRef.current) {
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
cancelAnimationFrame(rafRef.current);
|
|
19
|
+
rafRef.current = requestAnimationFrame(() => {
|
|
20
|
+
if (!liRef.current)
|
|
21
|
+
return;
|
|
22
|
+
const rect = liRef.current.getBoundingClientRect();
|
|
23
|
+
setPosition(rect.left > window.innerWidth / 2 ? "left" : "right");
|
|
24
|
+
});
|
|
19
25
|
}
|
|
20
26
|
moreOnVisibleChange?.(v);
|
|
21
27
|
};
|
|
22
|
-
const Li = (jsx(ListItem, { ref: itemRef ?? liRef, onClick: (e) => {
|
|
28
|
+
const Li = useMemo(() => (jsx(ListItem, { ref: itemRef ?? liRef, role: "menuitem", "aria-haspopup": more ? "menu" : undefined, onClick: (e) => {
|
|
23
29
|
e.stopPropagation();
|
|
24
30
|
if (!more)
|
|
25
31
|
close?.();
|
|
26
32
|
onClick?.(e);
|
|
27
|
-
}, ...restProps, children: children }));
|
|
33
|
+
}, type: type, ...restProps, children: children })), [itemRef, liRef, more, close, onClick, type, restProps, children]);
|
|
28
34
|
if (!more)
|
|
29
35
|
return Li;
|
|
30
|
-
return (jsx(Popup, { ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset:
|
|
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 }));
|
|
31
37
|
};
|
|
32
38
|
|
|
33
39
|
export { Item as default };
|
|
@@ -3,12 +3,16 @@ import classNames from 'classnames';
|
|
|
3
3
|
|
|
4
4
|
const Item = (props) => {
|
|
5
5
|
const { ref, active, type, align, disabled, label, style, border, className, children, ...restProps } = props;
|
|
6
|
+
const handlers = {};
|
|
7
|
+
if (disabled) {
|
|
8
|
+
handlers.onClick = (e) => { e.preventDefault(); e.stopPropagation(); };
|
|
9
|
+
}
|
|
6
10
|
return (jsxs("li", { ref: ref, className: classNames("i-list-item", className, {
|
|
7
11
|
"i-list-item-active": active,
|
|
8
12
|
"i-list-option": type === "option",
|
|
9
13
|
"i-list-item-bordered": border,
|
|
10
14
|
disabled,
|
|
11
|
-
}), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
|
|
15
|
+
}), style: { alignItems: align, ...style }, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, ...restProps, ...handlers, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
|
|
12
16
|
};
|
|
13
17
|
|
|
14
18
|
export { Item as default };
|
|
@@ -4,11 +4,18 @@ import { forwardRef, Children, cloneElement } from 'react';
|
|
|
4
4
|
import Item from './item.js';
|
|
5
5
|
|
|
6
6
|
const List = forwardRef((props, ref) => {
|
|
7
|
-
const { label, type, border, className, children, ...restProps } = props;
|
|
8
|
-
return (jsx("ul", { ref: ref, className: classNames("i-list", className
|
|
7
|
+
const { label, type, border, padding, className, style, children, ...restProps } = props;
|
|
8
|
+
return (jsx("ul", { ref: ref, className: classNames("i-list", className, {
|
|
9
|
+
"i-list-option-type": type === "option",
|
|
10
|
+
}), style: {
|
|
11
|
+
...(padding !== undefined
|
|
12
|
+
? { "--option-gap": typeof padding === "number" ? `${padding}px` : padding }
|
|
13
|
+
: undefined),
|
|
14
|
+
...style,
|
|
15
|
+
}, ...restProps, children: Children.map(children, (node, i) => {
|
|
9
16
|
const renderLabel = typeof label === "function" ? label(i) : label;
|
|
10
|
-
const { type, props: nodeProps } = node;
|
|
11
|
-
if (
|
|
17
|
+
const { type: elementType, props: nodeProps } = node;
|
|
18
|
+
if (elementType === Item) {
|
|
12
19
|
return cloneElement(node, {
|
|
13
20
|
label: renderLabel,
|
|
14
21
|
...nodeProps,
|
package/lib/es/index.js
CHANGED
|
@@ -13,6 +13,7 @@ export { default as Form } from './components/form/form.js';
|
|
|
13
13
|
export { default as Icon } from './components/icon/icon.js';
|
|
14
14
|
export { default as Image } from './components/image/image.js';
|
|
15
15
|
export { default as Input } from './components/input/input.js';
|
|
16
|
+
export { default as Divider } from './components/divider/divider.js';
|
|
16
17
|
export { default as List } from './components/list/list.js';
|
|
17
18
|
export { default as Loading } from './components/loading/loading.js';
|
|
18
19
|
export { default as Message } from './components/message/index.js';
|
package/lib/index.js
CHANGED
|
@@ -1725,20 +1725,31 @@ function Drawer(props) {
|
|
|
1725
1725
|
|
|
1726
1726
|
const Item$4 = (props) => {
|
|
1727
1727
|
const { ref, active, type, align, disabled, label, style, border, className, children, ...restProps } = props;
|
|
1728
|
+
const handlers = {};
|
|
1729
|
+
if (disabled) {
|
|
1730
|
+
handlers.onClick = (e) => { e.preventDefault(); e.stopPropagation(); };
|
|
1731
|
+
}
|
|
1728
1732
|
return (jsxs("li", { ref: ref, className: classNames("i-list-item", className, {
|
|
1729
1733
|
"i-list-item-active": active,
|
|
1730
1734
|
"i-list-option": type === "option",
|
|
1731
1735
|
"i-list-item-bordered": border,
|
|
1732
1736
|
disabled,
|
|
1733
|
-
}), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
|
|
1737
|
+
}), style: { alignItems: align, ...style }, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, ...restProps, ...handlers, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
|
|
1734
1738
|
};
|
|
1735
1739
|
|
|
1736
1740
|
const List$1 = forwardRef((props, ref) => {
|
|
1737
|
-
const { label, type, border, className, children, ...restProps } = props;
|
|
1738
|
-
return (jsx("ul", { ref: ref, className: classNames("i-list", className
|
|
1741
|
+
const { label, type, border, padding, className, style, children, ...restProps } = props;
|
|
1742
|
+
return (jsx("ul", { ref: ref, className: classNames("i-list", className, {
|
|
1743
|
+
"i-list-option-type": type === "option",
|
|
1744
|
+
}), style: {
|
|
1745
|
+
...(padding !== undefined
|
|
1746
|
+
? { "--option-gap": typeof padding === "number" ? `${padding}px` : padding }
|
|
1747
|
+
: undefined),
|
|
1748
|
+
...style,
|
|
1749
|
+
}, ...restProps, children: Children.map(children, (node, i) => {
|
|
1739
1750
|
const renderLabel = typeof label === "function" ? label(i) : label;
|
|
1740
|
-
const { type, props: nodeProps } = node;
|
|
1741
|
-
if (
|
|
1751
|
+
const { type: elementType, props: nodeProps } = node;
|
|
1752
|
+
if (elementType === Item$4) {
|
|
1742
1753
|
return cloneElement(node, {
|
|
1743
1754
|
label: renderLabel,
|
|
1744
1755
|
...nodeProps,
|
|
@@ -2288,50 +2299,52 @@ function Popup(props) {
|
|
|
2288
2299
|
|
|
2289
2300
|
const { Item: ListItem } = List$1;
|
|
2290
2301
|
const Item$3 = (props) => {
|
|
2291
|
-
const { more, moreProps, onClick, ref: itemRef, children, ...restProps } = props;
|
|
2292
|
-
const close = useContext(
|
|
2302
|
+
const { more, moreProps, onClick, ref: itemRef, type = "option", children, ...restProps } = props;
|
|
2303
|
+
const close = useContext(DropdownContext);
|
|
2293
2304
|
const liRef = useRef(null);
|
|
2294
2305
|
const [position, setPosition] = useState("right");
|
|
2295
2306
|
const { position: morePosition, onVisibleChange: moreOnVisibleChange, width: moreWidth, ...restMoreProps } = moreProps ?? {};
|
|
2296
2307
|
const effectivePosition = morePosition ?? position;
|
|
2308
|
+
const rafRef = useRef(0);
|
|
2297
2309
|
const handleVisibleChange = (v) => {
|
|
2298
2310
|
if (v && liRef.current) {
|
|
2299
|
-
|
|
2300
|
-
|
|
2311
|
+
cancelAnimationFrame(rafRef.current);
|
|
2312
|
+
rafRef.current = requestAnimationFrame(() => {
|
|
2313
|
+
if (!liRef.current)
|
|
2314
|
+
return;
|
|
2315
|
+
const rect = liRef.current.getBoundingClientRect();
|
|
2316
|
+
setPosition(rect.left > window.innerWidth / 2 ? "left" : "right");
|
|
2317
|
+
});
|
|
2301
2318
|
}
|
|
2302
2319
|
moreOnVisibleChange?.(v);
|
|
2303
2320
|
};
|
|
2304
|
-
const Li = (jsx(ListItem, { ref: itemRef ?? liRef, onClick: (e) => {
|
|
2321
|
+
const Li = useMemo(() => (jsx(ListItem, { ref: itemRef ?? liRef, role: "menuitem", "aria-haspopup": more ? "menu" : undefined, onClick: (e) => {
|
|
2305
2322
|
e.stopPropagation();
|
|
2306
2323
|
if (!more)
|
|
2307
2324
|
close?.();
|
|
2308
2325
|
onClick?.(e);
|
|
2309
|
-
}, ...restProps, children: children }));
|
|
2326
|
+
}, type: type, ...restProps, children: children })), [itemRef, liRef, more, close, onClick, type, restProps, children]);
|
|
2310
2327
|
if (!more)
|
|
2311
2328
|
return Li;
|
|
2312
|
-
return (jsx(Popup, { ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset:
|
|
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 }));
|
|
2313
2330
|
};
|
|
2314
2331
|
|
|
2315
|
-
const
|
|
2332
|
+
const DropdownContext = createContext(null);
|
|
2316
2333
|
const Dropdown = (props) => {
|
|
2317
2334
|
const { visible, width, content, children, ...restProps } = props;
|
|
2318
2335
|
const [active, setActive] = useState(visible);
|
|
2319
2336
|
if (!content) {
|
|
2320
2337
|
return children;
|
|
2321
2338
|
}
|
|
2322
|
-
const close = () => setActive(false);
|
|
2323
|
-
const handleVisibleChange = (v) => {
|
|
2339
|
+
const close = useCallback(() => setActive(false), []);
|
|
2340
|
+
const handleVisibleChange = useCallback((v) => {
|
|
2324
2341
|
setActive(v);
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
}
|
|
2328
|
-
};
|
|
2342
|
+
props.onVisibleChange?.(v);
|
|
2343
|
+
}, [props.onVisibleChange]);
|
|
2329
2344
|
useEffect(() => {
|
|
2330
2345
|
setActive(visible);
|
|
2331
2346
|
}, [visible]);
|
|
2332
|
-
return (jsx(Popup, { trigger:
|
|
2333
|
-
? content(close)
|
|
2334
|
-
: content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
|
|
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 }));
|
|
2335
2348
|
};
|
|
2336
2349
|
Dropdown.Item = Item$3;
|
|
2337
2350
|
|
|
@@ -4451,6 +4464,14 @@ Input.Textarea = Textarea;
|
|
|
4451
4464
|
Input.Number = Number$1;
|
|
4452
4465
|
Input.Range = Range;
|
|
4453
4466
|
|
|
4467
|
+
const Divider$1 = ({ className, children, color, width, style, ...restProps }) => {
|
|
4468
|
+
return (jsx("li", { role: "separator", className: classNames("i-divider", className), style: {
|
|
4469
|
+
...(color !== undefined ? { "--divider-color": color } : undefined),
|
|
4470
|
+
...(width !== undefined ? { "--divider-width": typeof width === "number" ? `${width}px` : width } : undefined),
|
|
4471
|
+
...style,
|
|
4472
|
+
}, ...restProps, children: children && jsx("div", { className: "i-divider-content", children: children }) }));
|
|
4473
|
+
};
|
|
4474
|
+
|
|
4454
4475
|
const AlignMap = {
|
|
4455
4476
|
left: "flex-start",
|
|
4456
4477
|
center: "center",
|
|
@@ -7183,4 +7204,4 @@ const useTheme = (props) => {
|
|
|
7183
7204
|
};
|
|
7184
7205
|
};
|
|
7185
7206
|
|
|
7186
|
-
export { Affix, Badge, Button, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, DateRange, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, Message, Modal, Pagination, Pill, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
|
|
7207
|
+
export { Affix, Badge, Button, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, DateRange, Description, Divider$1 as Divider, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, Message, Modal, Pagination, Pill, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
|
|
@@ -8,7 +8,9 @@ interface IDropdown extends Omit<IPopup, "content"> {
|
|
|
8
8
|
}
|
|
9
9
|
interface IDropItem extends IListItem {
|
|
10
10
|
more?: ReactNode;
|
|
11
|
-
moreProps?:
|
|
11
|
+
moreProps?: Omit<Partial<IPopup>, "content" | "children"> & {
|
|
12
|
+
width?: string | number;
|
|
13
|
+
};
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
export type { IDropItem, IDropdown };
|
|
@@ -4,6 +4,7 @@ interface IList extends HTMLAttributes<HTMLUListElement> {
|
|
|
4
4
|
label?: ReactNode | ((i: number) => ReactNode);
|
|
5
5
|
type?: "option" | "default";
|
|
6
6
|
border?: boolean;
|
|
7
|
+
padding?: number | string;
|
|
7
8
|
}
|
|
8
9
|
interface IListItem extends HTMLAttributes<HTMLLIElement>, Pick<IList, "type" | "border"> {
|
|
9
10
|
ref?: RefObject<HTMLLIElement | null>;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export { default as Form } from './components/form/form.js';
|
|
|
13
13
|
export { default as Icon } from './components/icon/icon.js';
|
|
14
14
|
export { default as Image } from './components/image/image.js';
|
|
15
15
|
export { default as Input } from './components/input/input.js';
|
|
16
|
+
export { default as Divider } from './components/divider/divider.js';
|
|
16
17
|
export { default as List } from './components/list/list.js';
|
|
17
18
|
export { default as Loading } from './components/loading/loading.js';
|
|
18
19
|
export { default as Message } from './components/message/index.js';
|