@teammodlr/ui-kit 2.0.6 → 2.0.7
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/components/index.d.ts +1 -0
- package/lib/components/pagination/Pagination.vue.d.ts +75 -0
- package/lib/components/pagination/style/Pagination.css.d.ts +10 -0
- package/lib/components/pagination/style/index.d.ts +1 -0
- package/lib/components/table/TableHead.vue.d.ts +11 -1
- package/lib/components/tooltip/Tooltip.vue.d.ts +2 -0
- package/lib/components/tooltip/style/Tooltip.css.d.ts +4 -0
- package/lib/composables/usePopperV2.d.ts +231 -0
- package/lib/index.cjs.js +4 -4
- package/lib/index.es.js +2267 -2034
- package/lib/style.css +1 -1
- package/package.json +11 -11
- package/src/components/index.ts +1 -0
- package/src/components/pagination/Pagination.vue +230 -0
- package/src/components/pagination/examples/basic.vue +18 -0
- package/src/components/pagination/examples/index.stories.ts +15 -0
- package/src/components/pagination/examples/index.ts +1 -0
- package/src/components/pagination/style/Pagination.css.ts +88 -0
- package/src/components/pagination/style/index.ts +1 -0
- package/src/components/table/TableHead.vue +26 -2
- package/src/components/table/examples/empty.vue +1 -1
- package/src/components/tooltip/Tooltip.vue +7 -5
- package/src/components/tooltip/examples/index.stories.ts +2 -1
- package/src/components/tooltip/examples/index.ts +1 -0
- package/src/components/tooltip/examples/placement.vue +9 -0
- package/src/components/tooltip/style/Tooltip.css.ts +44 -1
- package/src/composables/usePopper.ts +1 -1
- package/src/composables/usePopperV2.ts +89 -0
- package/src/types/popper.d.ts +14 -0
- package/src/components/table/Table.css +0 -45
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._1d0g9qk4{font-size:var(--_1d0g9qk0);line-height:var(--_1d0g9qk1)}._1d0g9qk4:before{content:"";margin-bottom:var(--_1d0g9qk2);display:table}._1d0g9qk4:after{content:"";margin-top:var(--_1d0g9qk3);display:table}.l9kku40{--_1d0g9qk0: 12.8px;--_1d0g9qk1: 16.5px;--_1d0g9qk2: -.2809em;--_1d0g9qk3: -.2809em}.l9kku42{font-family:Inter,sans-serif}.l9kku43{--_1d0g9qk0: 16px;--_1d0g9qk1: 21px;--_1d0g9qk2: -.2926em;--_1d0g9qk3: -.2926em}.l9kku45{font-family:Inter,sans-serif}.l9kku46{--_1d0g9qk0: 20px;--_1d0g9qk1: 25px;--_1d0g9qk2: -.2614em;--_1d0g9qk3: -.2614em}.l9kku48{font-family:Inter,sans-serif}.l9kku49{--_1d0g9qk0: 25px;--_1d0g9qk1: 32px;--_1d0g9qk2: -.2764em;--_1d0g9qk3: -.2764em}.l9kku4b{font-family:Inter,sans-serif}.ntsf1m0{margin:0}.ntsf1m1{margin:4px}.ntsf1m2{margin:8px}.ntsf1m3{margin:12px}.ntsf1m4{margin:16px}.ntsf1m5{margin:18px}.ntsf1m6{margin:2px}.ntsf1m7{margin:6px}.ntsf1m8{margin:10px}.ntsf1m9{margin:14px}.ntsf1ma{border-radius:0}.ntsf1mb{border-radius:1px}.ntsf1mc{border-radius:2px}.ntsf1md{border-radius:4px}.ntsf1me{border-radius:6px}.ntsf1mf{border-radius:8px}.ntsf1mg{border-radius:12px}.ntsf1mh{border-radius:9999px}.ntsf1mi{font-size:14px}.ntsf1mj{font-size:10px}.ntsf1mk{font-size:12px}.ntsf1ml{font-size:16px}.ntsf1mm{font-size:18px}.ntsf1mn{font-size:20px}.ntsf1mo{box-shadow:0 3px 6px 1px #9aa1ab26}.ntsf1mp{box-shadow:0 4px 10px 1px #9aa1ab33}.ntsf1mq{box-shadow:0 7px 14px 1px #9aa1ab3b}.ntsf1mr{transition:cubic-bezier(.4,0,.2,1)}:root{--ntsf1ms: hsl(0,0%,98%);--ntsf1mt: hsl(0,0%,96.1%);--ntsf1mu: hsl(0,0%,94.9%);--ntsf1mv: hsl(0,0%,89.8%);--ntsf1mw: hsl(0,0%,83.1%);--ntsf1mx: hsl(0,0%,63.9%);--ntsf1my: hsl(0,0%,45.1%);--ntsf1mz: hsl(0,0%,32.2%);--ntsf1m10: hsl(0,0%,25.1%);--ntsf1m11: hsl(0,0%,14.9%);--ntsf1m12: hsl(0,0%,9%);--ntsf1m13: hsl(214,100%,96.9%);--ntsf1m14: hsl(214,94.6%,92.7%);--ntsf1m15: hsl(213,96.9%,87.3%);--ntsf1m16: hsl(212,96.4%,78.4%);--ntsf1m17: hsl(213,93.9%,67.8%);--ntsf1m18: hsl(217,91.2%,59.8%);--ntsf1m19: hsl(221,83.2%,53.3%);--ntsf1m1a: hsl(224,76.3%,48%);--ntsf1m1b: hsl(226,70.7%,40.2%);--ntsf1m1c: hsl(224,64.3%,32.9%);--ntsf1m1d: hsl(48,100%,96.1%);--ntsf1m1e: hsl(48,96.5%,88.8%);--ntsf1m1f: hsl(48,96.6%,76.7%);--ntsf1m1g: hsl(46,96.7%,64.5%);--ntsf1m1h: hsl(43,96.4%,56.3%);--ntsf1m1i: hsl(38,92.1%,50.2%);--ntsf1m1j: hsl(32,94.6%,43.7%);--ntsf1m1k: hsl(26,90.5%,37.1%);--ntsf1m1l: hsl(23,82.5%,31.4%);--ntsf1m1m: hsl(22,77.8%,26.5%);--ntsf1m1n: hsl(0,85.7%,97.3%);--ntsf1m1o: hsl(0,93.3%,94.1%);--ntsf1m1p: hsl(0,96.3%,89.4%);--ntsf1m1q: hsl(0,93.5%,81.8%);--ntsf1m1r: hsl(0,90.6%,70.8%);--ntsf1m1s: hsl(0,84.2%,60.2%);--ntsf1m1t: hsl(0,72.2%,50.6%);--ntsf1m1u: hsl(0,73.7%,41.8%);--ntsf1m1v: hsl(0,70%,35.3%);--ntsf1m1w: hsl(0,62.8%,30.6%);--ntsf1m1x: hsl(152,81%,95.9%);--ntsf1m1y: hsl(149,80.4%,90%);--ntsf1m1z: hsl(152,76%,80.4%);--ntsf1m20: hsl(156,71.6%,66.9%);--ntsf1m21: hsl(158,64.4%,51.6%);--ntsf1m22: hsl(160,84.1%,39.4%);--ntsf1m23: hsl(161,93.5%,30.4%);--ntsf1m24: hsl(163,93.5%,24.3%);--ntsf1m25: hsl(163,88.1%,19.8%);--ntsf1m26: hsl(164,85.7%,16.5%);--ntsf1m27: hsl(217,91.2%,59.8%);--ntsf1m28: 0px;--ntsf1m29: 4px;--ntsf1m2a: 8px;--ntsf1m2b: 12px;--ntsf1m2c: 16px;--ntsf1m2d: 18px;--ntsf1m2e: 2px;--ntsf1m2f: 6px;--ntsf1m2g: 10px;--ntsf1m2h: 14px;--ntsf1m2i: 14px;--ntsf1m2j: 10px;--ntsf1m2k: 12px;--ntsf1m2l: 16px;--ntsf1m2m: 18px;--ntsf1m2n: 20px;--ntsf1m2o: 0px 3px 6px 1px rgb(154 161 171 / 15%);--ntsf1m2p: 0px 4px 10px 1px rgb(154 161 171 / 20%);--ntsf1m2q: 0px 7px 14px 1px rgb(154 161 171 / 23%);--ntsf1m2r: cubic-bezier(.4, 0, .2, 1);--ntsf1m2s: 0px;--ntsf1m2t: 1px;--ntsf1m2u: 2px;--ntsf1m2v: 4px;--ntsf1m2w: 6px;--ntsf1m2x: 8px;--ntsf1m2y: 12px;--ntsf1m2z: 9999px}*{box-sizing:border-box}html,body{font-family:Inter}strong,h1,h2,h3,h4,h5,h6{font-weight:500}.apht5f3{--apht5f2: 4px;box-sizing:border-box;appearance:none;border:0;display:inline-flex;position:static;border-radius:var(--apht5f2);background-color:var(--apht5f1);overflow:hidden;padding:var(--ntsf1m2e) var(--ntsf1m29)}.apht5f4{color:var(--apht5f0);margin:0;padding:0;font-size:var(--ntsf1m2j);font-weight:500;letter-spacing:.5px;text-transform:uppercase;line-height:var(--ntsf1m2i);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apht5f5{--apht5f1: var(--ntsf1m18);--apht5f0: #FFFFFF}.apht5f6{--apht5f0: white;--apht5f1: var(--ntsf1my)}.apht5f7{--apht5f0: var(--ntsf1mt);--apht5f1: var(--ntsf1mx)}.apht5f8{--apht5f1: var(--ntsf1m22);--apht5f0: #FFFFFF}.apht5f9{--apht5f1: var(--ntsf1m1h);--apht5f0: var(--ntsf1m11)}.apht5fa{--apht5f1: var(--ntsf1m1s);--apht5f0: #FFFFFF}.apht5fb{--apht5f1: var(--ntsf1m14);--apht5f0: var(--ntsf1m19)}.apht5fc{--apht5f1: var(--ntsf1mt);--apht5f0: var(--ntsf1mz)}.apht5fd{--apht5f1: var(--ntsf1mt);--apht5f0: var(--ntsf1mx)}.apht5fe{--apht5f1: var(--ntsf1m1y);--apht5f0: var(--ntsf1m23)}.apht5ff{--apht5f1: var(--ntsf1m1e);--apht5f0: var(--ntsf1m1j)}.apht5fg{--apht5f1: var(--ntsf1m1o);--apht5f0: var(--ntsf1m1t)}@keyframes button-wave-grow{0%{box-shadow:0 0 .5px 0 var(--_1s6j4ps5)}to{box-shadow:0 0 .5px 4.4px var(--_1s6j4ps5)}}@keyframes button-wave-opacity{0%{opacity:.5}90%{opacity:0}to{opacity:0}}@keyframes spin-around{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1s6j4ps7{align-items:center;box-sizing:border-box;display:inline-flex;font-size:var(--ntsf1m2i);font-weight:500;max-width:100%;width:auto;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;justify-content:center;height:var(--_1s6j4ps0);line-height:var(--_1s6j4ps0);border-radius:var(--_1s6j4ps1);padding:var(--_1s6j4ps2);z-index:auto;background-color:var(--_1s6j4ps3);border:0;color:var(--_1s6j4ps6);transition:color .2s var(--ntsf1m2r),background-color .25s var(--ntsf1m2r),box-shadow .25s var(--ntsf1m2r),border-color .25s var(--ntsf1m2r);font-family:inherit}._1s6j4ps7:hover{cursor:pointer}._1s6j4ps7:focus{outline:none}._1s6j4ps8{--_1s6j4ps3: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18);--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps6: #FFFFFF}._1s6j4ps8:hover{--_1s6j4ps3: var(--ntsf1m19);--_1s6j4ps4: var(--ntsf1m19)}._1s6j4ps8:focus{--_1s6j4ps4: var(--ntsf1m18)}._1s6j4ps9{--_1s6j4ps6: var(--ntsf1mz);--_1s6j4ps3: white;--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1mv)}._1s6j4ps9:hover{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4ps9:focus{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psa{--_1s6j4ps6: var(--ntsf1mx);--_1s6j4ps3: white;--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1mv)}._1s6j4psa:hover{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psa:focus{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psb{--_1s6j4ps3: var(--ntsf1m22);--_1s6j4ps4: var(--ntsf1m22);--_1s6j4ps5: var(--ntsf1m22);--_1s6j4ps6: #FFFFFF}._1s6j4psb:hover{--_1s6j4ps3: var(--ntsf1m23);--_1s6j4ps4: var(--ntsf1m23);--_1s6j4ps6: #FFFFFF}._1s6j4psb:focus{--_1s6j4ps4: var(--ntsf1m23);--_1s6j4ps3: var(--ntsf1m23)}._1s6j4psc{--_1s6j4ps3: var(--ntsf1m1h);--_1s6j4ps4: var(--ntsf1m1h);--_1s6j4ps5: var(--ntsf1m1h);--_1s6j4ps6: var(--ntsf1m11)}._1s6j4psc:hover{--_1s6j4ps3: var(--ntsf1m1i);--_1s6j4ps4: var(--ntsf1m1i);--_1s6j4ps6: var(--ntsf1m12)}._1s6j4psc:focus{--_1s6j4ps4: var(--ntsf1m1i);--_1s6j4ps3: var(--ntsf1m1i)}._1s6j4psd{--_1s6j4ps3: var(--ntsf1m1s);--_1s6j4ps4: var(--ntsf1m1s);--_1s6j4ps5: var(--ntsf1m1s);--_1s6j4ps6: #FFFFFF}._1s6j4psd:hover{--_1s6j4ps3: var(--ntsf1m1t);--_1s6j4ps4: var(--ntsf1m1t)}._1s6j4psd:focus{--_1s6j4ps4: var(--ntsf1m1t);--_1s6j4ps3: var(--ntsf1m1t)}._1s6j4pse{--_1s6j4ps3: var(--ntsf1m14);--_1s6j4ps4: var(--ntsf1m14);--_1s6j4ps6: var(--ntsf1m18)}._1s6j4pse:hover{--_1s6j4ps3: var(--ntsf1m15);--_1s6j4ps4: var(--ntsf1m15);--_1s6j4ps6: var(--ntsf1m19)}._1s6j4pse:focus{--_1s6j4ps3: var(--ntsf1m15);--_1s6j4ps4: var(--ntsf1m15);--_1s6j4ps6: var(--ntsf1m19)}._1s6j4psf{--_1s6j4ps3: var(--ntsf1mt);--_1s6j4ps4: var(--ntsf1mt);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psf:hover{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1mz)}._1s6j4psf:focus{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1mz)}._1s6j4psg{--_1s6j4ps3: var(--ntsf1mt);--_1s6j4ps4: var(--ntsf1mt);--_1s6j4ps6: var(--ntsf1mx)}._1s6j4psg:hover{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psg:focus{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psh{--_1s6j4ps3: var(--ntsf1m1y);--_1s6j4ps4: var(--ntsf1m1y);--_1s6j4ps6: var(--ntsf1m23)}._1s6j4psh:hover{--_1s6j4ps3: var(--ntsf1m1z);--_1s6j4ps4: var(--ntsf1m1z);--_1s6j4ps6: var(--ntsf1m24)}._1s6j4psh:focus{--_1s6j4ps3: var(--ntsf1m1z);--_1s6j4ps4: var(--ntsf1m1z);--_1s6j4ps6: var(--ntsf1m24)}._1s6j4psi{--_1s6j4ps3: var(--ntsf1m1e);--_1s6j4ps4: var(--ntsf1m1e);--_1s6j4ps6: var(--ntsf1m1j)}._1s6j4psi:hover{--_1s6j4ps3: var(--ntsf1m1f);--_1s6j4ps4: var(--ntsf1m1f);--_1s6j4ps6: var(--ntsf1m1k)}._1s6j4psi:focus{--_1s6j4ps3: var(--ntsf1m1f);--_1s6j4ps4: var(--ntsf1m1f);--_1s6j4ps6: var(--ntsf1m1k)}._1s6j4psj{--_1s6j4ps3: var(--ntsf1m1o);--_1s6j4ps4: var(--ntsf1m1o);--_1s6j4ps6: var(--ntsf1m1s)}._1s6j4psj:hover{--_1s6j4ps3: var(--ntsf1m1p);--_1s6j4ps4: var(--ntsf1m1p);--_1s6j4ps6: var(--ntsf1m1t)}._1s6j4psj:focus{--_1s6j4ps3: var(--ntsf1m1p);--_1s6j4ps4: var(--ntsf1m1p);--_1s6j4ps6: var(--ntsf1m1t)}._1s6j4psk{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m18)}._1s6j4psk:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m19);text-decoration:underline}._1s6j4psl{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1my)}._1s6j4psl:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1mz);text-decoration:underline}._1s6j4psm{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1mx)}._1s6j4psm:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1my);text-decoration:underline}._1s6j4psn{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m22)}._1s6j4psn:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m23);text-decoration:underline}._1s6j4pso{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1j)}._1s6j4pso:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1k);text-decoration:underline}._1s6j4psp{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1s)}._1s6j4psp:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1t);text-decoration:underline}._1s6j4psq{--_1s6j4ps0: 22px;--_1s6j4ps1: 2px;--_1s6j4ps2: 0 var(--ntsf1m29);font-size:var(--ntsf1m2k)}._1s6j4psr{--_1s6j4ps0: 28px;--_1s6j4ps1: 3px;--_1s6j4ps2: 0 var(--ntsf1m2a);font-size:var(--ntsf1m2k)}._1s6j4pss{--_1s6j4ps0: 36px;--_1s6j4ps1: 4px;--_1s6j4ps2: 0 var(--ntsf1m2b)}._1s6j4pst{--_1s6j4ps0: 40px;--_1s6j4ps1: 6px;--_1s6j4ps2: 0 var(--ntsf1m2b);font-size:var(--ntsf1m2l)}._1s6j4psu{--_1s6j4ps0: 45px;--_1s6j4ps1: 8px;--_1s6j4ps2: 0 var(--ntsf1m2c);font-size:var(--ntsf1m2l)}._1s6j4psv{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;border-radius:inherit;transition:border-color .2s ease-in-out}._1s6j4psw{border:1px solid var(--_1s6j4ps4)}._1s6j4psx{border:1px solid transparent;z-index:1}._1s6j4ps7:hover ._1s6j4psw,._1s6j4ps7:focus ._1s6j4psw{border-color:transparent}._1s6j4ps7:hover ._1s6j4psx,._1s6j4ps7:focus ._1s6j4psx{border-color:var(--_1s6j4ps4)}._1s6j4psy{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;border-radius:inherit;animation-iteration-count:1;animation-duration:.5s;z-index:1;animation-timing-function:cubic-bezier(.4,0,.15,1),cubic-bezier(.4,0,.4,1)}._1s6j4psz{z-index:1;animation-name:button-wave-grow,button-wave-opacity}._1s6j4ps10{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none;padding:initial;height:var(--_1s6j4ps0);width:var(--_1s6j4ps0)}._1s6j4ps11{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none}._1s6j4ps11>svg{overflow:hidden;pointer-events:none;max-width:100%;max-height:100%;vertical-align:middle}._1s6j4ps12{margin-right:var(--ntsf1m2a);position:relative}._1s6j4ps13{margin-left:var(--ntsf1m2a)}._1s6j4ps14{border-radius:9999px}._1s6j4ps15{display:flex;width:100%}._1s6j4ps16{pointer-events:none;color:transparent;user-select:none;opacity:.75}._1s6j4ps16:after{content:"";transition:all .2s ease-in-out;position:absolute;animation-iteration-count:infinite;animation-duration:.75s;animation-timing-function:cubic-bezier(.8,.5,.4,0);animation-name:spin-around;border-radius:var(--ntsf1m2z);border-color:transparent transparent var(--_1s6j4ps6) var(--_1s6j4ps6);border-style:solid;border-width:2px;display:block;height:1em;width:1em}.xlqdhj0{display:inline-flex;position:relative;flex-wrap:nowrap}.xlqdhj0>._1s6j4ps7:first-child:not(:last-child){margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.xlqdhj0>._1s6j4ps7:not(:first-child):not(:last-child){margin-left:0;border-radius:0;margin-right:0}.xlqdhj0>._1s6j4ps7:not(:first-child) ._1s6j4psw{border-left-width:0}.xlqdhj0>._1s6j4ps7:last-child:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.xlqdhj0>._1s6j4ps7:not(:first-child) ._1s6j4psx{left:-1px}.xlqdhj1{flex-direction:column}.cib2cp1{--cib2cp0: var(--ntsf1m2c);display:flex;flex-direction:column;gap:var(--cib2cp0)}.sy3isg8{position:relative}.sy3isg9{--sy3isg0: 38px;--sy3isg1: 4px;--sy3isg2: var(--ntsf1m2a);--sy3isg3: var(--ntsf1m2e);--sy3isg4: var(--ntsf1mw);--sy3isg6: var(--ntsf1mz);--sy3isg5: #FFFFFF;--sy3isg7: text;height:var(--sy3isg0);min-height:var(--sy3isg0);width:100%;border-radius:var(--sy3isg1);border-width:1px;border-style:solid;border-color:var(--sy3isg4);padding:var(--sy3isg3) var(--sy3isg2);font-size:var(--ntsf1m2i);display:block;text-align:left;appearance:none;line-height:var(--sy3isg0);box-sizing:border-box;resize:none;box-shadow:none;color:var(--sy3isg6);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r)}.sy3isg9:hover{--sy3isg4: var(--ntsf1m17)}.sy3isg9:focus{--sy3isg4: var(--ntsf1m18);outline:none;box-shadow:0 0 0 2px var(--ntsf1m15)}.sy3isga{--sy3isg0: 26px;--sy3isg1: 2px;--sy3isg2: var(--ntsf1m29);font-size:var(--ntsf1m2k)}.sy3isgb{--sy3isg0: 30px;--sy3isg1: 3px;--sy3isg2: var(--ntsf1m2f);font-size:var(--ntsf1m2k)}.sy3isgc{--sy3isg0: 38px;--sy3isg1: 4px}.sy3isgd{--sy3isg0: 42px;--sy3isg1: 6px;--sy3isg2: var(--ntsf1m2g);font-size:var(--ntsf1m2l)}.sy3isge{--sy3isg0: 48px;--sy3isg1: 8px;--sy3isg2: var(--ntsf1m2b);font-size:var(--ntsf1m2l)}.sy3isgf{width:100%}.sy3isgg{--sy3isg4: var(--ntsf1mv);--sy3isg6: var(--ntsf1my);--sy3isg5: var(--ntsf1ms);--sy3isg7: not-allowed}.sy3isgg:focus{box-shadow:none}.sy3isgg:hover{cursor:not-allowed}.sy3isgh{font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer;margin-bottom:var(--ntsf1m29)}.sy3isgi{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1mz);line-height:var(--ntsf1m2l);word-break:break-word;margin-bottom:var(--ntsf1m2f)}.sy3isgj{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1m1t);word-break:break-word;margin-top:var(--ntsf1m2f)}.sy3isgk,.sy3isgk:hover{--sy3isg4: var(--ntsf1m1s)}.sy3isgk:focus{--sy3isg4: var(--ntsf1m1s);box-shadow:0 0 0 2px var(--ntsf1m1p)}.sy3isgl{pointer-events:none;position:absolute;z-index:1;left:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}.sy3isgm{padding-left:2.25rem}.sy3isgn{pointer-events:none;position:absolute;z-index:1;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}.sy3isgo{padding-right:2.25rem}.n5k6jk7{--n5k6jk0: 26px;--n5k6jk1: 4px;--n5k6jk2: var(--ntsf1m2f);--n5k6jk3: var(--ntsf1m28);--n5k6jk4: var(--ntsf1mt);--n5k6jk6: var(--ntsf1m10);--n5k6jk5: var(--ntsf1mt);height:var(--n5k6jk0);min-height:var(--n5k6jk0);line-height:var(--n5k6jk0);border-radius:var(--n5k6jk1);border-width:1px;border-style:solid;color:var(--n5k6jk6);border-color:var(--n5k6jk4);background-color:var(--n5k6jk5);padding:var(--n5k6jk3) var(--n5k6jk2);word-break:break-word;font-size:var(--ntsf1m2i);display:inline-flex;align-items:center}.n5k6jk8{margin-left:var(--ntsf1m29);appearance:none;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;padding:3px;position:relative;right:-2px;color:var(--ntsf1my);border-radius:50%}.n5k6jk8:hover{background-color:var(--ntsf1mv);color:var(--ntsf1m10)}.n5k6jk8:focus{outline:none}._1cuepoga{position:relative;outline:none}._1cuepogb{--_1cuepog0: 38px;--_1cuepog1: 4px;--_1cuepog2: var(--ntsf1m2a);--_1cuepog3: var(--ntsf1m28);--_1cuepog4: var(--ntsf1mw);--_1cuepog6: var(--ntsf1m12);--_1cuepog5: #FFFFFF;--_1cuepog7: text;height:var(--_1cuepog0);min-height:var(--_1cuepog0);width:100%;border-radius:var(--_1cuepog1);border-width:1px;border-style:solid;border-color:var(--_1cuepog4);padding:var(--_1cuepog3) var(--_1cuepog2);font-size:var(--ntsf1m2i);display:block;text-align:left;appearance:none;line-height:var(--_1cuepog0);box-sizing:border-box;resize:none;box-shadow:none;transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r)}._1cuepogb:hover{--_1cuepog4: var(--ntsf1m17)}._1cuepogb:focus{--_1cuepog4: var(--ntsf1m18);outline:none;box-shadow:0 0 0 2px var(--ntsf1m15)}._1cuepogc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ntsf1m29)}._1cuepogd{width:100%}._1cuepoge{--_1cuepog4: var(--ntsf1mv);--_1cuepog6: var(--ntsf1my);--_1cuepog5: var(--ntsf1ms);--_1cuepog7: not-allowed}._1cuepoge:focus{box-shadow:none}._1cuepoge:hover{cursor:not-allowed}._1cuepogf{font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer;margin-bottom:var(--ntsf1m29)}._1cuepogg{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1mz);line-height:var(--ntsf1m2l);word-break:break-word;margin-bottom:var(--ntsf1m2f)}._1cuepogh{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1m1t);word-break:break-word;margin-top:var(--ntsf1m2f)}._1cuepogi,._1cuepogi:hover{--_1cuepog4: var(--ntsf1m1s)}._1cuepogi:focus{--_1cuepog4: var(--ntsf1m1s);box-shadow:0 0 0 2px var(--ntsf1m1p)}._1cuepogj{--_1cuepog4: var(--ntsf1m18);box-shadow:0 0 0 2px var(--ntsf1m15)}._1cuepogk{pointer-events:none;position:absolute;z-index:1;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}._1cuepogl{padding-right:2.25rem}._1cuepogm{background-color:#fff;border-radius:4px;z-index:4000;border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p);max-height:230px;overflow-y:auto}._1cuepogn{user-select:none;color:var(--ntsf1my)}._1cuepogo{padding:var(--ntsf1m29) var(--ntsf1m29) 0;background-color:#fff;position:sticky;top:0;z-index:1}._1cuepogp{padding:var(--ntsf1m29);display:flex;flex-direction:column;gap:var(--ntsf1m2e)}._1cuepogq{--_1cuepog8: var(--ntsf1m11);--_1cuepog9: #FFFFFF;position:relative;display:flex;align-items:center;cursor:pointer;min-height:36px;font-size:var(--ntsf1m2i);padding-block:var(--ntsf1m2f);padding-inline:var(--ntsf1m2b);gap:var(--ntsf1m2a);color:var(--_1cuepog8);transition:background-color .05s ease-in-out;background-color:var(--_1cuepog9);border-radius:4px}._1cuepogq:hover,._1cuepogr,._1cuepogr:hover{--_1cuepog8: var(--ntsf1m11);--_1cuepog9: var(--ntsf1mt)}._1cuepogs{--_1cuepog8: var(--ntsf1m13);--_1cuepog9: var(--ntsf1m18)}._1cuepogs:hover{--_1cuepog8: var(--ntsf1m13);--_1cuepog9: var(--ntsf1m19)}.x8ms5j5{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:var(--ntsf1m2f)}.x8ms5j6{position:absolute;opacity:0;cursor:pointer}.x8ms5j7{position:absolute;width:calc(var(--x8ms5j0) - 2px);height:calc(var(--x8ms5j0) - 2px);top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}.x8ms5j8{--x8ms5j0: 20px;--x8ms5j1: 4px;--x8ms5j2: white;--x8ms5j3: var(--ntsf1mw);--x8ms5j4: var(--ntsf1mz);position:relative;width:var(--x8ms5j0);height:var(--x8ms5j0);border-radius:var(--x8ms5j1);background-color:var(--x8ms5j2);border:1px solid var(--x8ms5j3);color:var(--x8ms5j4);cursor:pointer;transition:all .125s var(--ntsf1m2r)}.x8ms5j9{--x8ms5j3: var(--ntsf1m18);--x8ms5j2: var(--ntsf1m18)}.x8ms5j9:after{content:""}.x8ms5ja{opacity:.5;cursor:not-allowed}.x8ms5jb{--x8ms5j3: var(--ntsf1m18);--x8ms5j2: var(--ntsf1m18)}.x8ms5jc{margin-left:var(--ntsf1m2e);font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer}.x8ms5jd{--x8ms5j0: 16px}.x8ms5je{--x8ms5j0: 18px}.x8ms5jf{--x8ms5j0: 20px}.x8ms5jg{--x8ms5j0: 22px}.x8ms5jh{--x8ms5j0: 24px}.x8ms5j5 .x8ms5j6:focus+.x8ms5j8{--x8ms5j3: var(--ntsf1m18);box-shadow:0 0 0 2px var(--ntsf1m15)}._9ebxua5{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:var(--ntsf1m2f)}._9ebxua6{position:absolute;opacity:0;cursor:pointer}._9ebxua7{position:absolute;width:calc(var(--_9ebxua0) - 2px);height:calc(var(--_9ebxua0) - 2px);top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}._9ebxua8{--_9ebxua0: 20px;--_9ebxua1: var(--ntsf1m2z);--_9ebxua2: white;--_9ebxua3: var(--ntsf1mw);--_9ebxua4: var(--ntsf1mz);position:relative;width:var(--_9ebxua0);height:var(--_9ebxua0);border-radius:var(--_9ebxua1);background-color:var(--_9ebxua2);border:1px solid var(--_9ebxua3);color:var(--_9ebxua4);cursor:pointer;transition:all .125s var(--ntsf1m2r)}._9ebxua9{--_9ebxua3: var(--ntsf1m18);--_9ebxua2: var(--ntsf1m18)}._9ebxua9:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--_9ebxua0) - 10px);height:calc(var(--_9ebxua0) - 10px);border-radius:var(--ntsf1m2z);background-color:#fff}._9ebxuaa{opacity:.5;cursor:not-allowed}._9ebxuab{--_9ebxua3: var(--ntsf1m18);--_9ebxua2: var(--ntsf1m18)}._9ebxuac{margin-left:var(--ntsf1m2e);font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer}._9ebxuad{--_9ebxua0: 16px}._9ebxuae{--_9ebxua0: 18px}._9ebxuaf{--_9ebxua0: 20px}._9ebxuag{--_9ebxua0: 22px}._9ebxuah{--_9ebxua0: 24px}._17j4o87{--_17j4o84: transparent;align-items:center;box-sizing:border-box;display:inline-flex;font-size:var(--ntsf1m2i);font-weight:500;max-width:100%;width:auto;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;justify-content:center;height:var(--_17j4o80);line-height:var(--_17j4o80);border-radius:var(--_17j4o81);padding:var(--_17j4o82);z-index:auto;background-color:var(--_17j4o83);border:1px solid var(--_17j4o84);color:var(--_17j4o86);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r);font-family:inherit}._17j4o87:hover{cursor:pointer}._17j4o87:focus{outline:none}._17j4o88{--_17j4o83: white;--_17j4o86: var(--ntsf1m18);--_17j4o85: var(--ntsf1m12);--_17j4o84: var(--ntsf1mv);box-shadow:0 .5px 0 4px #00000003}._17j4o88:hover{--_17j4o86: var(--ntsf1m19)}._17j4o88:focus{--_17j4o86: var(--ntsf1m18)}._17j4o89{--_17j4o86: var(--ntsf1mx);--_17j4o83: transparent;--_17j4o85: var(--ntsf1m18);--_17j4o84: transparent}._17j4o89:hover{--_17j4o86: var(--ntsf1m17)}._17j4o89:focus{--_17j4o86: var(--ntsf1m17)}._17j4o8a{--_17j4o80: 22px;--_17j4o81: 2px;--_17j4o82: 0 var(--ntsf1m29);font-size:var(--ntsf1m2k)}._17j4o8b{--_17j4o80: 28px;--_17j4o81: 3px;--_17j4o82: 0 var(--ntsf1m2a);font-size:var(--ntsf1m2k)}._17j4o8c{--_17j4o80: 36px;--_17j4o81: 4px;--_17j4o82: 0 var(--ntsf1m2b)}._17j4o8d{--_17j4o80: 40px;--_17j4o81: 6px;--_17j4o82: 0 var(--ntsf1m2b);font-size:var(--ntsf1m2l)}._17j4o8e{--_17j4o80: 45px;--_17j4o81: 8px;--_17j4o82: 0 var(--ntsf1m2c);font-size:var(--ntsf1m2l)}._17j4o8f{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none}._17j4o8f>svg{overflow:hidden;pointer-events:none;max-width:100%;max-height:100%;vertical-align:middle}._17j4o8g{pointer-events:none;position:absolute;border:0;left:0;right:0;top:0;bottom:0;opacity:0}.nd85wg3{--nd85wg0: var(--ntsf1m29);--nd85wg1: var(--ntsf1m2v);--nd85wg2: var(--ntsf1m29);display:inline-flex;position:relative;flex-wrap:nowrap;background-color:var(--ntsf1mt);padding:var(--nd85wg0);border-radius:var(--nd85wg1);gap:var(--nd85wg2)}.nd85wg4{flex-direction:column}.nd85wg5{display:flex;align-items:stretch}.nd85wg3.nd85wg5>._17j4o87{flex:1}._1j3winb0{display:flex;position:relative;margin:0;padding:0;list-style:none;box-sizing:border-box}._1j3winb1{display:flex;align-items:center;font-size:var(--ntsf1m2i)}._1j3winb2{padding:0 var(--ntsf1m2a);color:var(--ntsf1mz);cursor:pointer;text-decoration:none;outline:0;transition:color .2s var(--ntsf1m2r)}._1j3winb2:hover{color:var(--ntsf1m18)}._1j3winb3{padding:0 var(--ntsf1m29);display:inline-flex;color:var(--ntsf1mw);user-select:none}._1j3winb0 ._1j3winb1:last-child ._1j3winb3{display:none}._1e8logj0{overflow:auto;will-change:transform;contain:strict}._1e8logj0>div{overflow:hidden;will-change:transform}._1e8logj0>div>div{will-change:transform;backface-visibility:hidden}._1rgsfqk2{width:var(--_1rgsfqk0);height:var(--_1rgsfqk0);border-radius:var(--_1rgsfqk1);background-color:var(--ntsf1mw);box-sizing:content-box;cursor:inherit;display:flex;flex-direction:column;justify-content:center;outline:none;overflow:hidden;position:static;border:0;padding:var(--ntsf1m28);margin:var(--ntsf1m29);color:var(--ntsf1my);font-size:var(--ntsf1m2k);align-items:center}._1rgsfqk3{--_1rgsfqk0: 16px;--_1rgsfqk1: 2px}._1rgsfqk4{--_1rgsfqk0: 24px;--_1rgsfqk1: 3px}._1rgsfqk5{--_1rgsfqk0: 32px;--_1rgsfqk1: 4px}._1rgsfqk6{--_1rgsfqk0: 40px;--_1rgsfqk1: 6px}._1rgsfqk7{--_1rgsfqk0: 96px;--_1rgsfqk1: 8px}._1rgsfqk8{display:flex;width:100%;height:100%;flex:1 1 100%}._1rgsfqk9{border-radius:9999px}._1rgsfqka{box-shadow:0 0 0 2px #fff}._4zgvid0{display:flex;line-height:1;list-style:none;padding:0}._4zgvid1{margin-right:-10px}@keyframes skeleton-shine-animation{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.vvn4y44{--vvn4y41: 100%;--vvn4y40: 1em;--vvn4y42: var(--ntsf1m2a);--vvn4y43: 4px;width:var(--vvn4y41);height:var(--vvn4y40);margin-bottom:var(--vvn4y42);border-radius:var(--vvn4y43);position:relative;display:inline-block;overflow:hidden;background-color:var(--ntsf1mv)}.vvn4y45:after{content:"";position:absolute;pointer-events:none;inset:0 -150%;background-image:linear-gradient(to right,transparent 25%,var(--ntsf1mt) 37%,transparent 63%);animation:skeleton-shine-animation 2s var(--ntsf1m2r) infinite}.zjrp2q2{--zjrp2q0: var(--ntsf1m12);--zjrp2q1: var(--ntsf1mt);z-index:50;transition:opacity .3s,ease;font-size:13px;font-weight:400;color:var(--zjrp2q1);background-color:var(--zjrp2q0);border-radius:var(--ntsf1m2v);padding:var(--ntsf1m2f) var(--ntsf1m2a);pointer-events:none;width:max-content;max-width:300px;box-sizing:border-box}.zjrp2q2[data-popper-placement^=top]{margin:var(--ntsf1m29) 0 var(--ntsf1m2b) 0}.zjrp2q2[data-popper-placement^=bottom]{margin:var(--ntsf1m2b) 0 var(--ntsf1m29) 0}.zjrp2q2[data-popper-placement^=left]{margin:0 var(--ntsf1m2b) 0 var(--ntsf1m29)}.zjrp2q2[data-popper-placement^=right]{margin:0 var(--ntsf1m29) 0 var(--ntsf1m2b)}.zjrp2q3{--zjrp2q0: var(--ntsf1mt);--zjrp2q1: var(--ntsf1m12)}._7qymuu0{width:100%;overflow:auto}._7qymuu4{--_7qymuu1: 44px;--_7qymuu2: 8px 14px;--_7qymuu3: var(--ntsf1m2i);width:100%;border-collapse:collapse;font-size:var(--_7qymuu3)}._7qymuu6 tbody tr:nth-child(even){background-color:var(--ntsf1ms)}._7qymuu4 tbody:before{content:"@";display:block;line-height:5px;text-indent:-99999px}._7qymuu4 th{height:var(--_7qymuu1);padding:var(--_7qymuu2);text-align:left;background-color:var(--ntsf1mt);color:var(--ntsf1mz);font-weight:500;font-size:var(--ntsf1m2i);margin-bottom:5px}._7qymuu4 th:first-child{border-top-left-radius:var(--ntsf1m2w);border-bottom-left-radius:var(--ntsf1m2w)}._7qymuu4 th:last-child{border-top-right-radius:var(--ntsf1m2w);border-bottom-right-radius:var(--ntsf1m2w)}._7qymuu4 td:first-child{border-top-left-radius:var(--ntsf1m2w);border-bottom-left-radius:var(--ntsf1m2w)}._7qymuu4 td:last-child{border-top-right-radius:var(--ntsf1m2w);border-bottom-right-radius:var(--ntsf1m2w)}._7qymuu4 td{padding:var(--_7qymuu2);text-align:left;color:var(--ntsf1m12);font-weight:400}._7qymuu5 tr:hover td{background-color:var(--ntsf1ms)}._2y08mp0{background-color:#fff;border-radius:5px;padding:5px 0;z-index:4000;box-sizing:border-box;position:relative;min-width:200px;max-width:350px;border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p)}._2y08mp1{list-style:none;margin:0;padding:0}._2y08mp2{position:relative;display:flex;align-items:center;cursor:pointer;min-height:36px;font-size:var(--ntsf1m2i);padding-block:var(--ntsf1m2f);padding-inline:var(--ntsf1m2b);gap:var(--ntsf1m2a);color:var(--ntsf1m11);transition:background-color .05s ease-in-out}._2y08mp2:hover{background-color:var(--ntsf1mt)}._2y08mp3{flex:1;white-space:nowrap}._2y08mp4{display:flex;align-items:center}@keyframes fade-out-background-animation{0%{opacity:1}to{opacity:0}}@keyframes fade-in-background-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes fade-in-animation{0%{opacity:0;transform:scale(.5);left:var(--_1iwo5bc3);top:var(--_1iwo5bc4)}70%{opacity:1;transform:scale(1.03);left:0;top:0}to{opacity:1;transform:scale(1)}}@keyframes fade-in-animation-no-bounce{0%{opacity:0;transform:scale(.5);left:var(--_1iwo5bc3);top:var(--_1iwo5bc4)}60%{opacity:1}to{opacity:1;transform:scale(1);left:0;top:0}}._1iwo5bc5{--_1iwo5bc0: 300px}._1iwo5bc6{--_1iwo5bc0: 400px}._1iwo5bc7{--_1iwo5bc0: 640px}._1iwo5bc8{--_1iwo5bc0: 800px}._1iwo5bc9{--_1iwo5bc0: 1140px}._1iwo5bca{z-index:100;background-color:#737373b3;position:fixed;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center}._1iwo5bcb{background-color:#fff;width:100%;max-width:var(--_1iwo5bc0);border-radius:var(--ntsf1m2w);box-shadow:0 1px 2px -2px #00000014,0 3px 6px #0000000f,0 5px 12px 4px #0000000a;border:1px solid rgba(0,0,0,.45);display:flex;flex-direction:column;position:relative}._1iwo5bcc{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--ntsf1m2c) var(--ntsf1m2c) 0 var(--ntsf1m2c);flex-shrink:0}._1iwo5bcd{margin:0;font-size:var(--ntsf1m2m);font-weight:500;display:flex;align-items:center}._1iwo5bce{outline:none var(--ntsf1mw);display:inline-block;position:relative;width:1.5rem;height:1.5rem;background-color:transparent;border:none;padding:0;cursor:pointer;transition:all .2s;border-radius:var(--ntsf1m2z);margin-left:var(--ntsf1m2a)}._1iwo5bce:hover{background-color:var(--ntsf1mt)}._1iwo5bce:focus{background-color:var(--ntsf1mt)}._1iwo5bce:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:.8rem;height:2px;background-color:var(--ntsf1my);transform-origin:center;transition:all .2s}._1iwo5bce:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:.8rem;height:2px;background-color:var(--ntsf1my);transform-origin:center;transition:all .2s}._1iwo5bcf{padding:var(--ntsf1m2c);display:flex;flex-direction:column;flex-grow:1}._1iwo5bcg{display:flex;width:100%;align-items:center;padding:0 var(--ntsf1m2c) var(--ntsf1m2c) var(--ntsf1m2c)}._1iwo5bch{animation-name:fade-in-animation-no-bounce;animation-duration:.2s;animation-timing-function:ease-in-out;transition:transform .3s ease-out}._1iwo5bci{animation-name:fade-in-animation;animation-duration:.25s;animation-timing-function:ease-in-out;transition:var(--ntsf1m2r)}._1iwo5bcj{animation-name:fade-out-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._1iwo5bck{animation-name:fade-in-background-animation;animation-duration:.1s;animation-timing-function:ease-in-out}._1iwo5bcl{animation-name:fade-out-background-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._1wz91940{display:flex;flex-direction:column;width:280px;align-items:center;gap:10px;user-select:none;z-index:100;background-color:#fff;border-radius:5px;padding:var(--ntsf1m2b);border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p)}._1wz91941{transform:translate(-50%,-50%);position:absolute;width:14px;height:14px;border-radius:50%;background-color:transparent;border:2px solid white;box-shadow:var(--ntsf1m2o);cursor:crosshair}._1wz91942{background-color:transparent;outline:none;border:0;color:var(--ntsf1mz);width:32px;height:32px;border-radius:var(--ntsf1m2v);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}._1wz91942:hover{background-color:var(--ntsf1mt);color:var(--ntsf1m10)}._1wz91943{background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;overflow:hidden;min-width:32px;min-height:32px;width:32px;height:32px;border-radius:100%;border:1px solid var(--ntsf1mv)}._1wz91944{position:relative;height:160px;width:100%;cursor:crosshair}._1wz91945{background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;overflow:hidden;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:var(--ntsf1m2v);position:relative;cursor:pointer}._1wz91946{position:absolute;top:0;left:0;right:0;bottom:0}._1wz91947{display:flex;gap:var(--ntsf1m2a);width:100%;align-items:center;justify-content:space-between}._1wz91948{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#FFF,rgba(255,255,255,0))}._1wz91949{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,#000,transparent)}._16zb7bi0{user-select:none;position:relative;height:14px}._16zb7bi1{user-select:none;position:absolute;height:14px;background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0px;overflow:hidden;top:0;left:0;right:0;bottom:0;border-radius:6px}._16zb7bi2{position:absolute;top:0;left:0;right:0;bottom:0}._16zb7bi3{transform:translate(-50%);position:absolute;top:-2px;width:18px;height:18px;border-radius:50%;background-color:#ffffff80;border:2px solid white;box-shadow:0 0 3px #000;cursor:e-resize}
|
|
1
|
+
._1d0g9qk4{font-size:var(--_1d0g9qk0);line-height:var(--_1d0g9qk1)}._1d0g9qk4:before{content:"";margin-bottom:var(--_1d0g9qk2);display:table}._1d0g9qk4:after{content:"";margin-top:var(--_1d0g9qk3);display:table}.l9kku40{--_1d0g9qk0: 12.8px;--_1d0g9qk1: 16.5px;--_1d0g9qk2: -.2809em;--_1d0g9qk3: -.2809em}.l9kku42{font-family:Inter,sans-serif}.l9kku43{--_1d0g9qk0: 16px;--_1d0g9qk1: 21px;--_1d0g9qk2: -.2926em;--_1d0g9qk3: -.2926em}.l9kku45{font-family:Inter,sans-serif}.l9kku46{--_1d0g9qk0: 20px;--_1d0g9qk1: 25px;--_1d0g9qk2: -.2614em;--_1d0g9qk3: -.2614em}.l9kku48{font-family:Inter,sans-serif}.l9kku49{--_1d0g9qk0: 25px;--_1d0g9qk1: 32px;--_1d0g9qk2: -.2764em;--_1d0g9qk3: -.2764em}.l9kku4b{font-family:Inter,sans-serif}.ntsf1m0{margin:0}.ntsf1m1{margin:4px}.ntsf1m2{margin:8px}.ntsf1m3{margin:12px}.ntsf1m4{margin:16px}.ntsf1m5{margin:18px}.ntsf1m6{margin:2px}.ntsf1m7{margin:6px}.ntsf1m8{margin:10px}.ntsf1m9{margin:14px}.ntsf1ma{border-radius:0}.ntsf1mb{border-radius:1px}.ntsf1mc{border-radius:2px}.ntsf1md{border-radius:4px}.ntsf1me{border-radius:6px}.ntsf1mf{border-radius:8px}.ntsf1mg{border-radius:12px}.ntsf1mh{border-radius:9999px}.ntsf1mi{font-size:14px}.ntsf1mj{font-size:10px}.ntsf1mk{font-size:12px}.ntsf1ml{font-size:16px}.ntsf1mm{font-size:18px}.ntsf1mn{font-size:20px}.ntsf1mo{box-shadow:0 3px 6px 1px #9aa1ab26}.ntsf1mp{box-shadow:0 4px 10px 1px #9aa1ab33}.ntsf1mq{box-shadow:0 7px 14px 1px #9aa1ab3b}.ntsf1mr{transition:cubic-bezier(.4,0,.2,1)}:root{--ntsf1ms: hsl(0,0%,98%);--ntsf1mt: hsl(0,0%,96.1%);--ntsf1mu: hsl(0,0%,94.9%);--ntsf1mv: hsl(0,0%,89.8%);--ntsf1mw: hsl(0,0%,83.1%);--ntsf1mx: hsl(0,0%,63.9%);--ntsf1my: hsl(0,0%,45.1%);--ntsf1mz: hsl(0,0%,32.2%);--ntsf1m10: hsl(0,0%,25.1%);--ntsf1m11: hsl(0,0%,14.9%);--ntsf1m12: hsl(0,0%,9%);--ntsf1m13: hsl(214,100%,96.9%);--ntsf1m14: hsl(214,94.6%,92.7%);--ntsf1m15: hsl(213,96.9%,87.3%);--ntsf1m16: hsl(212,96.4%,78.4%);--ntsf1m17: hsl(213,93.9%,67.8%);--ntsf1m18: hsl(217,91.2%,59.8%);--ntsf1m19: hsl(221,83.2%,53.3%);--ntsf1m1a: hsl(224,76.3%,48%);--ntsf1m1b: hsl(226,70.7%,40.2%);--ntsf1m1c: hsl(224,64.3%,32.9%);--ntsf1m1d: hsl(48,100%,96.1%);--ntsf1m1e: hsl(48,96.5%,88.8%);--ntsf1m1f: hsl(48,96.6%,76.7%);--ntsf1m1g: hsl(46,96.7%,64.5%);--ntsf1m1h: hsl(43,96.4%,56.3%);--ntsf1m1i: hsl(38,92.1%,50.2%);--ntsf1m1j: hsl(32,94.6%,43.7%);--ntsf1m1k: hsl(26,90.5%,37.1%);--ntsf1m1l: hsl(23,82.5%,31.4%);--ntsf1m1m: hsl(22,77.8%,26.5%);--ntsf1m1n: hsl(0,85.7%,97.3%);--ntsf1m1o: hsl(0,93.3%,94.1%);--ntsf1m1p: hsl(0,96.3%,89.4%);--ntsf1m1q: hsl(0,93.5%,81.8%);--ntsf1m1r: hsl(0,90.6%,70.8%);--ntsf1m1s: hsl(0,84.2%,60.2%);--ntsf1m1t: hsl(0,72.2%,50.6%);--ntsf1m1u: hsl(0,73.7%,41.8%);--ntsf1m1v: hsl(0,70%,35.3%);--ntsf1m1w: hsl(0,62.8%,30.6%);--ntsf1m1x: hsl(152,81%,95.9%);--ntsf1m1y: hsl(149,80.4%,90%);--ntsf1m1z: hsl(152,76%,80.4%);--ntsf1m20: hsl(156,71.6%,66.9%);--ntsf1m21: hsl(158,64.4%,51.6%);--ntsf1m22: hsl(160,84.1%,39.4%);--ntsf1m23: hsl(161,93.5%,30.4%);--ntsf1m24: hsl(163,93.5%,24.3%);--ntsf1m25: hsl(163,88.1%,19.8%);--ntsf1m26: hsl(164,85.7%,16.5%);--ntsf1m27: hsl(217,91.2%,59.8%);--ntsf1m28: 0px;--ntsf1m29: 4px;--ntsf1m2a: 8px;--ntsf1m2b: 12px;--ntsf1m2c: 16px;--ntsf1m2d: 18px;--ntsf1m2e: 2px;--ntsf1m2f: 6px;--ntsf1m2g: 10px;--ntsf1m2h: 14px;--ntsf1m2i: 14px;--ntsf1m2j: 10px;--ntsf1m2k: 12px;--ntsf1m2l: 16px;--ntsf1m2m: 18px;--ntsf1m2n: 20px;--ntsf1m2o: 0px 3px 6px 1px rgb(154 161 171 / 15%);--ntsf1m2p: 0px 4px 10px 1px rgb(154 161 171 / 20%);--ntsf1m2q: 0px 7px 14px 1px rgb(154 161 171 / 23%);--ntsf1m2r: cubic-bezier(.4, 0, .2, 1);--ntsf1m2s: 0px;--ntsf1m2t: 1px;--ntsf1m2u: 2px;--ntsf1m2v: 4px;--ntsf1m2w: 6px;--ntsf1m2x: 8px;--ntsf1m2y: 12px;--ntsf1m2z: 9999px}*{box-sizing:border-box}html,body{font-family:Inter}strong,h1,h2,h3,h4,h5,h6{font-weight:500}.apht5f3{--apht5f2: 4px;box-sizing:border-box;appearance:none;border:0;display:inline-flex;position:static;border-radius:var(--apht5f2);background-color:var(--apht5f1);overflow:hidden;padding:var(--ntsf1m2e) var(--ntsf1m29)}.apht5f4{color:var(--apht5f0);margin:0;padding:0;font-size:var(--ntsf1m2j);font-weight:500;letter-spacing:.5px;text-transform:uppercase;line-height:var(--ntsf1m2i);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apht5f5{--apht5f1: var(--ntsf1m18);--apht5f0: #FFFFFF}.apht5f6{--apht5f0: white;--apht5f1: var(--ntsf1my)}.apht5f7{--apht5f0: var(--ntsf1mt);--apht5f1: var(--ntsf1mx)}.apht5f8{--apht5f1: var(--ntsf1m22);--apht5f0: #FFFFFF}.apht5f9{--apht5f1: var(--ntsf1m1h);--apht5f0: var(--ntsf1m11)}.apht5fa{--apht5f1: var(--ntsf1m1s);--apht5f0: #FFFFFF}.apht5fb{--apht5f1: var(--ntsf1m14);--apht5f0: var(--ntsf1m19)}.apht5fc{--apht5f1: var(--ntsf1mt);--apht5f0: var(--ntsf1mz)}.apht5fd{--apht5f1: var(--ntsf1mt);--apht5f0: var(--ntsf1mx)}.apht5fe{--apht5f1: var(--ntsf1m1y);--apht5f0: var(--ntsf1m23)}.apht5ff{--apht5f1: var(--ntsf1m1e);--apht5f0: var(--ntsf1m1j)}.apht5fg{--apht5f1: var(--ntsf1m1o);--apht5f0: var(--ntsf1m1t)}@keyframes button-wave-grow{0%{box-shadow:0 0 .5px 0 var(--_1s6j4ps5)}to{box-shadow:0 0 .5px 4.4px var(--_1s6j4ps5)}}@keyframes button-wave-opacity{0%{opacity:.5}90%{opacity:0}to{opacity:0}}@keyframes spin-around{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1s6j4ps7{align-items:center;box-sizing:border-box;display:inline-flex;font-size:var(--ntsf1m2i);font-weight:500;max-width:100%;width:auto;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;justify-content:center;height:var(--_1s6j4ps0);line-height:var(--_1s6j4ps0);border-radius:var(--_1s6j4ps1);padding:var(--_1s6j4ps2);z-index:auto;background-color:var(--_1s6j4ps3);border:0;color:var(--_1s6j4ps6);transition:color .2s var(--ntsf1m2r),background-color .25s var(--ntsf1m2r),box-shadow .25s var(--ntsf1m2r),border-color .25s var(--ntsf1m2r);font-family:inherit}._1s6j4ps7:hover{cursor:pointer}._1s6j4ps7:focus{outline:none}._1s6j4ps8{--_1s6j4ps3: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18);--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps6: #FFFFFF}._1s6j4ps8:hover{--_1s6j4ps3: var(--ntsf1m19);--_1s6j4ps4: var(--ntsf1m19)}._1s6j4ps8:focus{--_1s6j4ps4: var(--ntsf1m18)}._1s6j4ps9{--_1s6j4ps6: var(--ntsf1mz);--_1s6j4ps3: white;--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1mv)}._1s6j4ps9:hover{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4ps9:focus{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psa{--_1s6j4ps6: var(--ntsf1mx);--_1s6j4ps3: white;--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1mv)}._1s6j4psa:hover{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psa:focus{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psb{--_1s6j4ps3: var(--ntsf1m22);--_1s6j4ps4: var(--ntsf1m22);--_1s6j4ps5: var(--ntsf1m22);--_1s6j4ps6: #FFFFFF}._1s6j4psb:hover{--_1s6j4ps3: var(--ntsf1m23);--_1s6j4ps4: var(--ntsf1m23);--_1s6j4ps6: #FFFFFF}._1s6j4psb:focus{--_1s6j4ps4: var(--ntsf1m23);--_1s6j4ps3: var(--ntsf1m23)}._1s6j4psc{--_1s6j4ps3: var(--ntsf1m1h);--_1s6j4ps4: var(--ntsf1m1h);--_1s6j4ps5: var(--ntsf1m1h);--_1s6j4ps6: var(--ntsf1m11)}._1s6j4psc:hover{--_1s6j4ps3: var(--ntsf1m1i);--_1s6j4ps4: var(--ntsf1m1i);--_1s6j4ps6: var(--ntsf1m12)}._1s6j4psc:focus{--_1s6j4ps4: var(--ntsf1m1i);--_1s6j4ps3: var(--ntsf1m1i)}._1s6j4psd{--_1s6j4ps3: var(--ntsf1m1s);--_1s6j4ps4: var(--ntsf1m1s);--_1s6j4ps5: var(--ntsf1m1s);--_1s6j4ps6: #FFFFFF}._1s6j4psd:hover{--_1s6j4ps3: var(--ntsf1m1t);--_1s6j4ps4: var(--ntsf1m1t)}._1s6j4psd:focus{--_1s6j4ps4: var(--ntsf1m1t);--_1s6j4ps3: var(--ntsf1m1t)}._1s6j4pse{--_1s6j4ps3: var(--ntsf1m14);--_1s6j4ps4: var(--ntsf1m14);--_1s6j4ps6: var(--ntsf1m18)}._1s6j4pse:hover{--_1s6j4ps3: var(--ntsf1m15);--_1s6j4ps4: var(--ntsf1m15);--_1s6j4ps6: var(--ntsf1m19)}._1s6j4pse:focus{--_1s6j4ps3: var(--ntsf1m15);--_1s6j4ps4: var(--ntsf1m15);--_1s6j4ps6: var(--ntsf1m19)}._1s6j4psf{--_1s6j4ps3: var(--ntsf1mt);--_1s6j4ps4: var(--ntsf1mt);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psf:hover{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1mz)}._1s6j4psf:focus{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1mz)}._1s6j4psg{--_1s6j4ps3: var(--ntsf1mt);--_1s6j4ps4: var(--ntsf1mt);--_1s6j4ps6: var(--ntsf1mx)}._1s6j4psg:hover{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psg:focus{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psh{--_1s6j4ps3: var(--ntsf1m1y);--_1s6j4ps4: var(--ntsf1m1y);--_1s6j4ps6: var(--ntsf1m23)}._1s6j4psh:hover{--_1s6j4ps3: var(--ntsf1m1z);--_1s6j4ps4: var(--ntsf1m1z);--_1s6j4ps6: var(--ntsf1m24)}._1s6j4psh:focus{--_1s6j4ps3: var(--ntsf1m1z);--_1s6j4ps4: var(--ntsf1m1z);--_1s6j4ps6: var(--ntsf1m24)}._1s6j4psi{--_1s6j4ps3: var(--ntsf1m1e);--_1s6j4ps4: var(--ntsf1m1e);--_1s6j4ps6: var(--ntsf1m1j)}._1s6j4psi:hover{--_1s6j4ps3: var(--ntsf1m1f);--_1s6j4ps4: var(--ntsf1m1f);--_1s6j4ps6: var(--ntsf1m1k)}._1s6j4psi:focus{--_1s6j4ps3: var(--ntsf1m1f);--_1s6j4ps4: var(--ntsf1m1f);--_1s6j4ps6: var(--ntsf1m1k)}._1s6j4psj{--_1s6j4ps3: var(--ntsf1m1o);--_1s6j4ps4: var(--ntsf1m1o);--_1s6j4ps6: var(--ntsf1m1s)}._1s6j4psj:hover{--_1s6j4ps3: var(--ntsf1m1p);--_1s6j4ps4: var(--ntsf1m1p);--_1s6j4ps6: var(--ntsf1m1t)}._1s6j4psj:focus{--_1s6j4ps3: var(--ntsf1m1p);--_1s6j4ps4: var(--ntsf1m1p);--_1s6j4ps6: var(--ntsf1m1t)}._1s6j4psk{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m18)}._1s6j4psk:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m19);text-decoration:underline}._1s6j4psl{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1my)}._1s6j4psl:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1mz);text-decoration:underline}._1s6j4psm{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1mx)}._1s6j4psm:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1my);text-decoration:underline}._1s6j4psn{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m22)}._1s6j4psn:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m23);text-decoration:underline}._1s6j4pso{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1j)}._1s6j4pso:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1k);text-decoration:underline}._1s6j4psp{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1s)}._1s6j4psp:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1t);text-decoration:underline}._1s6j4psq{--_1s6j4ps0: 22px;--_1s6j4ps1: 2px;--_1s6j4ps2: 0 var(--ntsf1m29);font-size:var(--ntsf1m2k)}._1s6j4psr{--_1s6j4ps0: 28px;--_1s6j4ps1: 3px;--_1s6j4ps2: 0 var(--ntsf1m2a);font-size:var(--ntsf1m2k)}._1s6j4pss{--_1s6j4ps0: 36px;--_1s6j4ps1: 4px;--_1s6j4ps2: 0 var(--ntsf1m2b)}._1s6j4pst{--_1s6j4ps0: 40px;--_1s6j4ps1: 6px;--_1s6j4ps2: 0 var(--ntsf1m2b);font-size:var(--ntsf1m2l)}._1s6j4psu{--_1s6j4ps0: 45px;--_1s6j4ps1: 8px;--_1s6j4ps2: 0 var(--ntsf1m2c);font-size:var(--ntsf1m2l)}._1s6j4psv{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;border-radius:inherit;transition:border-color .2s ease-in-out}._1s6j4psw{border:1px solid var(--_1s6j4ps4)}._1s6j4psx{border:1px solid transparent;z-index:1}._1s6j4ps7:hover ._1s6j4psw,._1s6j4ps7:focus ._1s6j4psw{border-color:transparent}._1s6j4ps7:hover ._1s6j4psx,._1s6j4ps7:focus ._1s6j4psx{border-color:var(--_1s6j4ps4)}._1s6j4psy{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;border-radius:inherit;animation-iteration-count:1;animation-duration:.5s;z-index:1;animation-timing-function:cubic-bezier(.4,0,.15,1),cubic-bezier(.4,0,.4,1)}._1s6j4psz{z-index:1;animation-name:button-wave-grow,button-wave-opacity}._1s6j4ps10{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none;padding:initial;height:var(--_1s6j4ps0);width:var(--_1s6j4ps0)}._1s6j4ps11{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none}._1s6j4ps11>svg{overflow:hidden;pointer-events:none;max-width:100%;max-height:100%;vertical-align:middle}._1s6j4ps12{margin-right:var(--ntsf1m2a);position:relative}._1s6j4ps13{margin-left:var(--ntsf1m2a)}._1s6j4ps14{border-radius:9999px}._1s6j4ps15{display:flex;width:100%}._1s6j4ps16{pointer-events:none;color:transparent;user-select:none;opacity:.75}._1s6j4ps16:after{content:"";transition:all .2s ease-in-out;position:absolute;animation-iteration-count:infinite;animation-duration:.75s;animation-timing-function:cubic-bezier(.8,.5,.4,0);animation-name:spin-around;border-radius:var(--ntsf1m2z);border-color:transparent transparent var(--_1s6j4ps6) var(--_1s6j4ps6);border-style:solid;border-width:2px;display:block;height:1em;width:1em}.xlqdhj0{display:inline-flex;position:relative;flex-wrap:nowrap}.xlqdhj0>._1s6j4ps7:first-child:not(:last-child){margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.xlqdhj0>._1s6j4ps7:not(:first-child):not(:last-child){margin-left:0;border-radius:0;margin-right:0}.xlqdhj0>._1s6j4ps7:not(:first-child) ._1s6j4psw{border-left-width:0}.xlqdhj0>._1s6j4ps7:last-child:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.xlqdhj0>._1s6j4ps7:not(:first-child) ._1s6j4psx{left:-1px}.xlqdhj1{flex-direction:column}.cib2cp1{--cib2cp0: var(--ntsf1m2c);display:flex;flex-direction:column;gap:var(--cib2cp0)}.sy3isg8{position:relative}.sy3isg9{--sy3isg0: 38px;--sy3isg1: 4px;--sy3isg2: var(--ntsf1m2a);--sy3isg3: var(--ntsf1m2e);--sy3isg4: var(--ntsf1mw);--sy3isg6: var(--ntsf1mz);--sy3isg5: #FFFFFF;--sy3isg7: text;height:var(--sy3isg0);min-height:var(--sy3isg0);width:100%;border-radius:var(--sy3isg1);border-width:1px;border-style:solid;border-color:var(--sy3isg4);padding:var(--sy3isg3) var(--sy3isg2);font-size:var(--ntsf1m2i);display:block;text-align:left;appearance:none;line-height:var(--sy3isg0);box-sizing:border-box;resize:none;box-shadow:none;color:var(--sy3isg6);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r)}.sy3isg9:hover{--sy3isg4: var(--ntsf1m17)}.sy3isg9:focus{--sy3isg4: var(--ntsf1m18);outline:none;box-shadow:0 0 0 2px var(--ntsf1m15)}.sy3isga{--sy3isg0: 26px;--sy3isg1: 2px;--sy3isg2: var(--ntsf1m29);font-size:var(--ntsf1m2k)}.sy3isgb{--sy3isg0: 30px;--sy3isg1: 3px;--sy3isg2: var(--ntsf1m2f);font-size:var(--ntsf1m2k)}.sy3isgc{--sy3isg0: 38px;--sy3isg1: 4px}.sy3isgd{--sy3isg0: 42px;--sy3isg1: 6px;--sy3isg2: var(--ntsf1m2g);font-size:var(--ntsf1m2l)}.sy3isge{--sy3isg0: 48px;--sy3isg1: 8px;--sy3isg2: var(--ntsf1m2b);font-size:var(--ntsf1m2l)}.sy3isgf{width:100%}.sy3isgg{--sy3isg4: var(--ntsf1mv);--sy3isg6: var(--ntsf1my);--sy3isg5: var(--ntsf1ms);--sy3isg7: not-allowed}.sy3isgg:focus{box-shadow:none}.sy3isgg:hover{cursor:not-allowed}.sy3isgh{font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer;margin-bottom:var(--ntsf1m29)}.sy3isgi{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1mz);line-height:var(--ntsf1m2l);word-break:break-word;margin-bottom:var(--ntsf1m2f)}.sy3isgj{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1m1t);word-break:break-word;margin-top:var(--ntsf1m2f)}.sy3isgk,.sy3isgk:hover{--sy3isg4: var(--ntsf1m1s)}.sy3isgk:focus{--sy3isg4: var(--ntsf1m1s);box-shadow:0 0 0 2px var(--ntsf1m1p)}.sy3isgl{pointer-events:none;position:absolute;z-index:1;left:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}.sy3isgm{padding-left:2.25rem}.sy3isgn{pointer-events:none;position:absolute;z-index:1;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}.sy3isgo{padding-right:2.25rem}.n5k6jk7{--n5k6jk0: 26px;--n5k6jk1: 4px;--n5k6jk2: var(--ntsf1m2f);--n5k6jk3: var(--ntsf1m28);--n5k6jk4: var(--ntsf1mt);--n5k6jk6: var(--ntsf1m10);--n5k6jk5: var(--ntsf1mt);height:var(--n5k6jk0);min-height:var(--n5k6jk0);line-height:var(--n5k6jk0);border-radius:var(--n5k6jk1);border-width:1px;border-style:solid;color:var(--n5k6jk6);border-color:var(--n5k6jk4);background-color:var(--n5k6jk5);padding:var(--n5k6jk3) var(--n5k6jk2);word-break:break-word;font-size:var(--ntsf1m2i);display:inline-flex;align-items:center}.n5k6jk8{margin-left:var(--ntsf1m29);appearance:none;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;padding:3px;position:relative;right:-2px;color:var(--ntsf1my);border-radius:50%}.n5k6jk8:hover{background-color:var(--ntsf1mv);color:var(--ntsf1m10)}.n5k6jk8:focus{outline:none}._1cuepoga{position:relative;outline:none}._1cuepogb{--_1cuepog0: 38px;--_1cuepog1: 4px;--_1cuepog2: var(--ntsf1m2a);--_1cuepog3: var(--ntsf1m28);--_1cuepog4: var(--ntsf1mw);--_1cuepog6: var(--ntsf1m12);--_1cuepog5: #FFFFFF;--_1cuepog7: text;height:var(--_1cuepog0);min-height:var(--_1cuepog0);width:100%;border-radius:var(--_1cuepog1);border-width:1px;border-style:solid;border-color:var(--_1cuepog4);padding:var(--_1cuepog3) var(--_1cuepog2);font-size:var(--ntsf1m2i);display:block;text-align:left;appearance:none;line-height:var(--_1cuepog0);box-sizing:border-box;resize:none;box-shadow:none;transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r)}._1cuepogb:hover{--_1cuepog4: var(--ntsf1m17)}._1cuepogb:focus{--_1cuepog4: var(--ntsf1m18);outline:none;box-shadow:0 0 0 2px var(--ntsf1m15)}._1cuepogc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ntsf1m29)}._1cuepogd{width:100%}._1cuepoge{--_1cuepog4: var(--ntsf1mv);--_1cuepog6: var(--ntsf1my);--_1cuepog5: var(--ntsf1ms);--_1cuepog7: not-allowed}._1cuepoge:focus{box-shadow:none}._1cuepoge:hover{cursor:not-allowed}._1cuepogf{font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer;margin-bottom:var(--ntsf1m29)}._1cuepogg{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1mz);line-height:var(--ntsf1m2l);word-break:break-word;margin-bottom:var(--ntsf1m2f)}._1cuepogh{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1m1t);word-break:break-word;margin-top:var(--ntsf1m2f)}._1cuepogi,._1cuepogi:hover{--_1cuepog4: var(--ntsf1m1s)}._1cuepogi:focus{--_1cuepog4: var(--ntsf1m1s);box-shadow:0 0 0 2px var(--ntsf1m1p)}._1cuepogj{--_1cuepog4: var(--ntsf1m18);box-shadow:0 0 0 2px var(--ntsf1m15)}._1cuepogk{pointer-events:none;position:absolute;z-index:1;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}._1cuepogl{padding-right:2.25rem}._1cuepogm{background-color:#fff;border-radius:4px;z-index:4000;border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p);max-height:230px;overflow-y:auto}._1cuepogn{user-select:none;color:var(--ntsf1my)}._1cuepogo{padding:var(--ntsf1m29) var(--ntsf1m29) 0;background-color:#fff;position:sticky;top:0;z-index:1}._1cuepogp{padding:var(--ntsf1m29);display:flex;flex-direction:column;gap:var(--ntsf1m2e)}._1cuepogq{--_1cuepog8: var(--ntsf1m11);--_1cuepog9: #FFFFFF;position:relative;display:flex;align-items:center;cursor:pointer;min-height:36px;font-size:var(--ntsf1m2i);padding-block:var(--ntsf1m2f);padding-inline:var(--ntsf1m2b);gap:var(--ntsf1m2a);color:var(--_1cuepog8);transition:background-color .05s ease-in-out;background-color:var(--_1cuepog9);border-radius:4px}._1cuepogq:hover,._1cuepogr,._1cuepogr:hover{--_1cuepog8: var(--ntsf1m11);--_1cuepog9: var(--ntsf1mt)}._1cuepogs{--_1cuepog8: var(--ntsf1m13);--_1cuepog9: var(--ntsf1m18)}._1cuepogs:hover{--_1cuepog8: var(--ntsf1m13);--_1cuepog9: var(--ntsf1m19)}.x8ms5j5{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:var(--ntsf1m2f)}.x8ms5j6{position:absolute;opacity:0;cursor:pointer}.x8ms5j7{position:absolute;width:calc(var(--x8ms5j0) - 2px);height:calc(var(--x8ms5j0) - 2px);top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}.x8ms5j8{--x8ms5j0: 20px;--x8ms5j1: 4px;--x8ms5j2: white;--x8ms5j3: var(--ntsf1mw);--x8ms5j4: var(--ntsf1mz);position:relative;width:var(--x8ms5j0);height:var(--x8ms5j0);border-radius:var(--x8ms5j1);background-color:var(--x8ms5j2);border:1px solid var(--x8ms5j3);color:var(--x8ms5j4);cursor:pointer;transition:all .125s var(--ntsf1m2r)}.x8ms5j9{--x8ms5j3: var(--ntsf1m18);--x8ms5j2: var(--ntsf1m18)}.x8ms5j9:after{content:""}.x8ms5ja{opacity:.5;cursor:not-allowed}.x8ms5jb{--x8ms5j3: var(--ntsf1m18);--x8ms5j2: var(--ntsf1m18)}.x8ms5jc{margin-left:var(--ntsf1m2e);font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer}.x8ms5jd{--x8ms5j0: 16px}.x8ms5je{--x8ms5j0: 18px}.x8ms5jf{--x8ms5j0: 20px}.x8ms5jg{--x8ms5j0: 22px}.x8ms5jh{--x8ms5j0: 24px}.x8ms5j5 .x8ms5j6:focus+.x8ms5j8{--x8ms5j3: var(--ntsf1m18);box-shadow:0 0 0 2px var(--ntsf1m15)}._9ebxua5{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:var(--ntsf1m2f)}._9ebxua6{position:absolute;opacity:0;cursor:pointer}._9ebxua7{position:absolute;width:calc(var(--_9ebxua0) - 2px);height:calc(var(--_9ebxua0) - 2px);top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}._9ebxua8{--_9ebxua0: 20px;--_9ebxua1: var(--ntsf1m2z);--_9ebxua2: white;--_9ebxua3: var(--ntsf1mw);--_9ebxua4: var(--ntsf1mz);position:relative;width:var(--_9ebxua0);height:var(--_9ebxua0);border-radius:var(--_9ebxua1);background-color:var(--_9ebxua2);border:1px solid var(--_9ebxua3);color:var(--_9ebxua4);cursor:pointer;transition:all .125s var(--ntsf1m2r)}._9ebxua9{--_9ebxua3: var(--ntsf1m18);--_9ebxua2: var(--ntsf1m18)}._9ebxua9:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--_9ebxua0) - 10px);height:calc(var(--_9ebxua0) - 10px);border-radius:var(--ntsf1m2z);background-color:#fff}._9ebxuaa{opacity:.5;cursor:not-allowed}._9ebxuab{--_9ebxua3: var(--ntsf1m18);--_9ebxua2: var(--ntsf1m18)}._9ebxuac{margin-left:var(--ntsf1m2e);font-weight:500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer}._9ebxuad{--_9ebxua0: 16px}._9ebxuae{--_9ebxua0: 18px}._9ebxuaf{--_9ebxua0: 20px}._9ebxuag{--_9ebxua0: 22px}._9ebxuah{--_9ebxua0: 24px}._17j4o87{--_17j4o84: transparent;align-items:center;box-sizing:border-box;display:inline-flex;font-size:var(--ntsf1m2i);font-weight:500;max-width:100%;width:auto;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;justify-content:center;height:var(--_17j4o80);line-height:var(--_17j4o80);border-radius:var(--_17j4o81);padding:var(--_17j4o82);z-index:auto;background-color:var(--_17j4o83);border:1px solid var(--_17j4o84);color:var(--_17j4o86);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r);font-family:inherit}._17j4o87:hover{cursor:pointer}._17j4o87:focus{outline:none}._17j4o88{--_17j4o83: white;--_17j4o86: var(--ntsf1m18);--_17j4o85: var(--ntsf1m12);--_17j4o84: var(--ntsf1mv);box-shadow:0 .5px 0 4px #00000003}._17j4o88:hover{--_17j4o86: var(--ntsf1m19)}._17j4o88:focus{--_17j4o86: var(--ntsf1m18)}._17j4o89{--_17j4o86: var(--ntsf1mx);--_17j4o83: transparent;--_17j4o85: var(--ntsf1m18);--_17j4o84: transparent}._17j4o89:hover{--_17j4o86: var(--ntsf1m17)}._17j4o89:focus{--_17j4o86: var(--ntsf1m17)}._17j4o8a{--_17j4o80: 22px;--_17j4o81: 2px;--_17j4o82: 0 var(--ntsf1m29);font-size:var(--ntsf1m2k)}._17j4o8b{--_17j4o80: 28px;--_17j4o81: 3px;--_17j4o82: 0 var(--ntsf1m2a);font-size:var(--ntsf1m2k)}._17j4o8c{--_17j4o80: 36px;--_17j4o81: 4px;--_17j4o82: 0 var(--ntsf1m2b)}._17j4o8d{--_17j4o80: 40px;--_17j4o81: 6px;--_17j4o82: 0 var(--ntsf1m2b);font-size:var(--ntsf1m2l)}._17j4o8e{--_17j4o80: 45px;--_17j4o81: 8px;--_17j4o82: 0 var(--ntsf1m2c);font-size:var(--ntsf1m2l)}._17j4o8f{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none}._17j4o8f>svg{overflow:hidden;pointer-events:none;max-width:100%;max-height:100%;vertical-align:middle}._17j4o8g{pointer-events:none;position:absolute;border:0;left:0;right:0;top:0;bottom:0;opacity:0}.nd85wg3{--nd85wg0: var(--ntsf1m29);--nd85wg1: var(--ntsf1m2v);--nd85wg2: var(--ntsf1m29);display:inline-flex;position:relative;flex-wrap:nowrap;background-color:var(--ntsf1mt);padding:var(--nd85wg0);border-radius:var(--nd85wg1);gap:var(--nd85wg2)}.nd85wg4{flex-direction:column}.nd85wg5{display:flex;align-items:stretch}.nd85wg3.nd85wg5>._17j4o87{flex:1}._1j3winb0{display:flex;position:relative;margin:0;padding:0;list-style:none;box-sizing:border-box}._1j3winb1{display:flex;align-items:center;font-size:var(--ntsf1m2i)}._1j3winb2{padding:0 var(--ntsf1m2a);color:var(--ntsf1mz);cursor:pointer;text-decoration:none;outline:0;transition:color .2s var(--ntsf1m2r)}._1j3winb2:hover{color:var(--ntsf1m18)}._1j3winb3{padding:0 var(--ntsf1m29);display:inline-flex;color:var(--ntsf1mw);user-select:none}._1j3winb0 ._1j3winb1:last-child ._1j3winb3{display:none}._1e8logj0{overflow:auto;will-change:transform;contain:strict}._1e8logj0>div{overflow:hidden;will-change:transform}._1e8logj0>div>div{will-change:transform;backface-visibility:hidden}._1rgsfqk2{width:var(--_1rgsfqk0);height:var(--_1rgsfqk0);border-radius:var(--_1rgsfqk1);background-color:var(--ntsf1mw);box-sizing:content-box;cursor:inherit;display:flex;flex-direction:column;justify-content:center;outline:none;overflow:hidden;position:static;border:0;padding:var(--ntsf1m28);margin:var(--ntsf1m29);color:var(--ntsf1my);font-size:var(--ntsf1m2k);align-items:center}._1rgsfqk3{--_1rgsfqk0: 16px;--_1rgsfqk1: 2px}._1rgsfqk4{--_1rgsfqk0: 24px;--_1rgsfqk1: 3px}._1rgsfqk5{--_1rgsfqk0: 32px;--_1rgsfqk1: 4px}._1rgsfqk6{--_1rgsfqk0: 40px;--_1rgsfqk1: 6px}._1rgsfqk7{--_1rgsfqk0: 96px;--_1rgsfqk1: 8px}._1rgsfqk8{display:flex;width:100%;height:100%;flex:1 1 100%}._1rgsfqk9{border-radius:9999px}._1rgsfqka{box-shadow:0 0 0 2px #fff}._4zgvid0{display:flex;line-height:1;list-style:none;padding:0}._4zgvid1{margin-right:-10px}@keyframes skeleton-shine-animation{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.vvn4y44{--vvn4y41: 100%;--vvn4y40: 1em;--vvn4y42: var(--ntsf1m2a);--vvn4y43: 4px;width:var(--vvn4y41);height:var(--vvn4y40);margin-bottom:var(--vvn4y42);border-radius:var(--vvn4y43);position:relative;display:inline-block;overflow:hidden;background-color:var(--ntsf1mv)}.vvn4y45:after{content:"";position:absolute;pointer-events:none;inset:0 -150%;background-image:linear-gradient(to right,transparent 25%,var(--ntsf1mt) 37%,transparent 63%);animation:skeleton-shine-animation 2s var(--ntsf1m2r) infinite}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}.zjrp2q2{position:relative;display:inline-flex}.zjrp2q3{z-index:50}.zjrp2q4{--zjrp2q0: var(--ntsf1m12);--zjrp2q1: var(--ntsf1mt);z-index:50;transition:opacity .3s,ease;position:fixed;font-size:13px;font-weight:400;color:var(--zjrp2q1);background-color:var(--zjrp2q0);border-radius:var(--ntsf1m2v);padding:var(--ntsf1m2f) var(--ntsf1m2a);pointer-events:none;width:max-content;max-width:300px;box-sizing:border-box}.zjrp2q4[data-popper-placement^=top]{margin:var(--ntsf1m29) 0 var(--ntsf1m2b) 0}.zjrp2q4[data-popper-placement^=bottom]{margin:var(--ntsf1m2b) 0 var(--ntsf1m29) 0}.zjrp2q4[data-popper-placement^=left]{margin:0 var(--ntsf1m2b) 0 var(--ntsf1m29)}.zjrp2q4[data-popper-placement^=right]{margin:0 var(--ntsf1m29) 0 var(--ntsf1m2b)}.zjrp2q5{--zjrp2q0: var(--ntsf1mt);--zjrp2q1: var(--ntsf1m12)}.zjrp2q6{animation-name:fade-in-animation;animation-duration:.125s;animation-timing-function:ease-in-out;transition:var(--ntsf1m2r)}.zjrp2q7{animation-name:fade-out-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._7qymuu0{width:100%;overflow:auto}._7qymuu4{--_7qymuu1: 44px;--_7qymuu2: 8px 14px;--_7qymuu3: var(--ntsf1m2i);width:100%;border-collapse:collapse;font-size:var(--_7qymuu3)}._7qymuu6 tbody tr:nth-child(even){background-color:var(--ntsf1ms)}._7qymuu4 tbody:before{content:"@";display:block;line-height:5px;text-indent:-99999px}._7qymuu4 th{height:var(--_7qymuu1);padding:var(--_7qymuu2);text-align:left;background-color:var(--ntsf1mt);color:var(--ntsf1mz);font-weight:500;font-size:var(--ntsf1m2i);margin-bottom:5px}._7qymuu4 th:first-child{border-top-left-radius:var(--ntsf1m2w);border-bottom-left-radius:var(--ntsf1m2w)}._7qymuu4 th:last-child{border-top-right-radius:var(--ntsf1m2w);border-bottom-right-radius:var(--ntsf1m2w)}._7qymuu4 td:first-child{border-top-left-radius:var(--ntsf1m2w);border-bottom-left-radius:var(--ntsf1m2w)}._7qymuu4 td:last-child{border-top-right-radius:var(--ntsf1m2w);border-bottom-right-radius:var(--ntsf1m2w)}._7qymuu4 td{padding:var(--_7qymuu2);text-align:left;color:var(--ntsf1m12);font-weight:400}._7qymuu5 tr:hover td{background-color:var(--ntsf1ms)}._1vreayh2{display:inline-flex;align-items:center;font-size:var(--ntsf1m2k);box-sizing:border-box}._1vreayh3{display:inline-flex;align-items:center;font-size:var(--ntsf1m2k);box-sizing:border-box;gap:var(--ntsf1m2g)}._1vreayh4{display:inline-flex;align-items:center;margin:0;gap:var(--ntsf1m29)}._1vreayh5{--_1vreayh0: transparent;--_1vreayh1: var(--ntsf1m10);height:28px;width:28px;border-radius:var(--ntsf1m2v);outline:none;border:none;font-size:inherit;padding:0px var(--ntsf1m2a);display:flex;align-items:center;justify-content:center;line-height:1;color:var(--_1vreayh1);background-color:var(--_1vreayh0);cursor:pointer}._1vreayh5:hover{--_1vreayh0: var(--ntsf1mu)}._1vreayh6{--_1vreayh0: var(--ntsf1m19);--_1vreayh1: #FFF}._1vreayh6:hover{--_1vreayh0: var(--ntsf1m1a)}._1vreayh7{height:calc(1em + 2px);width:calc(1em + 2px);display:inline-block;font-size:inherit;user-select:none}._2y08mp0{background-color:#fff;border-radius:5px;padding:5px 0;z-index:4000;box-sizing:border-box;position:relative;min-width:200px;max-width:350px;border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p)}._2y08mp1{list-style:none;margin:0;padding:0}._2y08mp2{position:relative;display:flex;align-items:center;cursor:pointer;min-height:36px;font-size:var(--ntsf1m2i);padding-block:var(--ntsf1m2f);padding-inline:var(--ntsf1m2b);gap:var(--ntsf1m2a);color:var(--ntsf1m11);transition:background-color .05s ease-in-out}._2y08mp2:hover{background-color:var(--ntsf1mt)}._2y08mp3{flex:1;white-space:nowrap}._2y08mp4{display:flex;align-items:center}@keyframes fade-out-background-animation{0%{opacity:1}to{opacity:0}}@keyframes fade-in-background-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes fade-in-animation{0%{opacity:0;transform:scale(.5);left:var(--_1iwo5bc3);top:var(--_1iwo5bc4)}70%{opacity:1;transform:scale(1.03);left:0;top:0}to{opacity:1;transform:scale(1)}}@keyframes fade-in-animation-no-bounce{0%{opacity:0;transform:scale(.5);left:var(--_1iwo5bc3);top:var(--_1iwo5bc4)}60%{opacity:1}to{opacity:1;transform:scale(1);left:0;top:0}}._1iwo5bc5{--_1iwo5bc0: 300px}._1iwo5bc6{--_1iwo5bc0: 400px}._1iwo5bc7{--_1iwo5bc0: 640px}._1iwo5bc8{--_1iwo5bc0: 800px}._1iwo5bc9{--_1iwo5bc0: 1140px}._1iwo5bca{z-index:100;background-color:#737373b3;position:fixed;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center}._1iwo5bcb{background-color:#fff;width:100%;max-width:var(--_1iwo5bc0);border-radius:var(--ntsf1m2w);box-shadow:0 1px 2px -2px #00000014,0 3px 6px #0000000f,0 5px 12px 4px #0000000a;border:1px solid rgba(0,0,0,.45);display:flex;flex-direction:column;position:relative}._1iwo5bcc{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--ntsf1m2c) var(--ntsf1m2c) 0 var(--ntsf1m2c);flex-shrink:0}._1iwo5bcd{margin:0;font-size:var(--ntsf1m2m);font-weight:500;display:flex;align-items:center}._1iwo5bce{outline:none var(--ntsf1mw);display:inline-block;position:relative;width:1.5rem;height:1.5rem;background-color:transparent;border:none;padding:0;cursor:pointer;transition:all .2s;border-radius:var(--ntsf1m2z);margin-left:var(--ntsf1m2a)}._1iwo5bce:hover{background-color:var(--ntsf1mt)}._1iwo5bce:focus{background-color:var(--ntsf1mt)}._1iwo5bce:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:.8rem;height:2px;background-color:var(--ntsf1my);transform-origin:center;transition:all .2s}._1iwo5bce:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:.8rem;height:2px;background-color:var(--ntsf1my);transform-origin:center;transition:all .2s}._1iwo5bcf{padding:var(--ntsf1m2c);display:flex;flex-direction:column;flex-grow:1}._1iwo5bcg{display:flex;width:100%;align-items:center;padding:0 var(--ntsf1m2c) var(--ntsf1m2c) var(--ntsf1m2c)}._1iwo5bch{animation-name:fade-in-animation-no-bounce;animation-duration:.2s;animation-timing-function:ease-in-out;transition:transform .3s ease-out}._1iwo5bci{animation-name:fade-in-animation;animation-duration:.25s;animation-timing-function:ease-in-out;transition:var(--ntsf1m2r)}._1iwo5bcj{animation-name:fade-out-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._1iwo5bck{animation-name:fade-in-background-animation;animation-duration:.1s;animation-timing-function:ease-in-out}._1iwo5bcl{animation-name:fade-out-background-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._1wz91940{display:flex;flex-direction:column;width:280px;align-items:center;gap:10px;user-select:none;z-index:100;background-color:#fff;border-radius:5px;padding:var(--ntsf1m2b);border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p)}._1wz91941{transform:translate(-50%,-50%);position:absolute;width:14px;height:14px;border-radius:50%;background-color:transparent;border:2px solid white;box-shadow:var(--ntsf1m2o);cursor:crosshair}._1wz91942{background-color:transparent;outline:none;border:0;color:var(--ntsf1mz);width:32px;height:32px;border-radius:var(--ntsf1m2v);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}._1wz91942:hover{background-color:var(--ntsf1mt);color:var(--ntsf1m10)}._1wz91943{background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;overflow:hidden;min-width:32px;min-height:32px;width:32px;height:32px;border-radius:100%;border:1px solid var(--ntsf1mv)}._1wz91944{position:relative;height:160px;width:100%;cursor:crosshair}._1wz91945{background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;overflow:hidden;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:var(--ntsf1m2v);position:relative;cursor:pointer}._1wz91946{position:absolute;top:0;left:0;right:0;bottom:0}._1wz91947{display:flex;gap:var(--ntsf1m2a);width:100%;align-items:center;justify-content:space-between}._1wz91948{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#FFF,rgba(255,255,255,0))}._1wz91949{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,#000,transparent)}._16zb7bi0{user-select:none;position:relative;height:14px}._16zb7bi1{user-select:none;position:absolute;height:14px;background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0px;overflow:hidden;top:0;left:0;right:0;bottom:0;border-radius:6px}._16zb7bi2{position:absolute;top:0;left:0;right:0;bottom:0}._16zb7bi3{transform:translate(-50%);position:absolute;top:-2px;width:18px;height:18px;border-radius:50%;background-color:#ffffff80;border:2px solid white;box-shadow:0 0 3px #000;cursor:e-resize}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teammodlr/ui-kit",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.cjs.js",
|
|
6
6
|
"module": "lib/index.es.js",
|
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
"@capsizecss/vanilla-extract": "^1.0.0",
|
|
45
45
|
"@nuxt/kit": "^3.3.2",
|
|
46
46
|
"@nuxt/schema": "^3.3.2",
|
|
47
|
-
"@storybook/addon-actions": "^7.0.
|
|
48
|
-
"@storybook/addon-essentials": "^7.0.
|
|
49
|
-
"@storybook/addon-interactions": "^7.0.
|
|
50
|
-
"@storybook/addon-links": "^7.0.
|
|
51
|
-
"@storybook/addons": "^7.0.
|
|
52
|
-
"@storybook/testing-library": "^0.0
|
|
53
|
-
"@storybook/theming": "^7.0.
|
|
54
|
-
"@storybook/vue3": "^7.0.
|
|
55
|
-
"@storybook/vue3-vite": "^7.0.
|
|
47
|
+
"@storybook/addon-actions": "^7.0.12",
|
|
48
|
+
"@storybook/addon-essentials": "^7.0.12",
|
|
49
|
+
"@storybook/addon-interactions": "^7.0.12",
|
|
50
|
+
"@storybook/addon-links": "^7.0.12",
|
|
51
|
+
"@storybook/addons": "^7.0.12",
|
|
52
|
+
"@storybook/testing-library": "^0.1.0",
|
|
53
|
+
"@storybook/theming": "^7.0.12",
|
|
54
|
+
"@storybook/vue3": "^7.0.12",
|
|
55
|
+
"@storybook/vue3-vite": "^7.0.12",
|
|
56
56
|
"@types/jsdom": "^21.1.0",
|
|
57
57
|
"@types/node": "^18.14.1",
|
|
58
58
|
"@vanilla-extract/css": "^1.9.5",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"bumpp": "^9.1.0",
|
|
65
65
|
"react": "^18.2.0",
|
|
66
66
|
"react-dom": "^18.2.0",
|
|
67
|
-
"storybook": "^7.0.
|
|
67
|
+
"storybook": "^7.0.12",
|
|
68
68
|
"ts-node": "^10.9.1",
|
|
69
69
|
"typescript": "^4.9.5",
|
|
70
70
|
"vite": "^4.2.1",
|
package/src/components/index.ts
CHANGED
|
@@ -21,6 +21,7 @@ export { default as MTooltip } from './tooltip/Tooltip.vue';
|
|
|
21
21
|
export { default as MTabGroup } from './tab/TabGroup.vue';
|
|
22
22
|
export { default as MTab } from './tab/Tab.vue';
|
|
23
23
|
export { default as MTable } from './table/Table.vue';
|
|
24
|
+
export { default as MPagination } from './pagination/Pagination.vue';
|
|
24
25
|
export { default as MTableBody } from './table/TableBody.vue';
|
|
25
26
|
export { default as MTableCell } from './table/TableCell.vue';
|
|
26
27
|
export { default as MTableHead } from './table/TableHead.vue';
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="style.pagination">
|
|
3
|
+
<!-- <div v-if="showTotal || showPageSize">-->
|
|
4
|
+
<!-- <div v-if="showTotal">-->
|
|
5
|
+
<!-- {{ page }}-->
|
|
6
|
+
<!-- </div>-->
|
|
7
|
+
<!-- </div>-->
|
|
8
|
+
|
|
9
|
+
<div :class="style.buttons">
|
|
10
|
+
<button
|
|
11
|
+
:class="style.page"
|
|
12
|
+
:tabindex="page === 1 ? undefined : '0'"
|
|
13
|
+
:disabled="page === 1"
|
|
14
|
+
aria-label="Previous"
|
|
15
|
+
role="button"
|
|
16
|
+
@click="handlePageChange(page - 1)"
|
|
17
|
+
>
|
|
18
|
+
<svg :class="style.svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 24" width="10" height="24" focusable="false"><path stroke="currentColor" fill="currentColor" fill-rule="evenodd" d="m2.462 12 7.222-6.77-1.368-1.46-8 7.5a1 1 0 0 0 0 1.46l8 7.5 1.368-1.46L2.462 12z" clip-rule="evenodd"></path></svg>
|
|
19
|
+
</button>
|
|
20
|
+
|
|
21
|
+
<div :class="style.pages">
|
|
22
|
+
<template
|
|
23
|
+
v-for="(item, index) in pageIndicatorSeries"
|
|
24
|
+
:key="index"
|
|
25
|
+
>
|
|
26
|
+
<button
|
|
27
|
+
:class="[
|
|
28
|
+
style.page,
|
|
29
|
+
{
|
|
30
|
+
[style.active]: item.current
|
|
31
|
+
},
|
|
32
|
+
]"
|
|
33
|
+
:ref="getKey(item)"
|
|
34
|
+
tabindex="0"
|
|
35
|
+
:disabled="isEmpty"
|
|
36
|
+
role="button"
|
|
37
|
+
@click="handlePageChange(item.page)"
|
|
38
|
+
:aria-label="item.current ? `Page ${item.page}` : `Goto page ${item.page}`"
|
|
39
|
+
>
|
|
40
|
+
<template v-if="item.more">
|
|
41
|
+
...
|
|
42
|
+
</template>
|
|
43
|
+
<template v-else>
|
|
44
|
+
{{ item.text }}
|
|
45
|
+
</template>
|
|
46
|
+
</button>
|
|
47
|
+
</template>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<button
|
|
51
|
+
:tabindex="page === pageCount ? undefined : '0'"
|
|
52
|
+
:disabled="page === pageCount || pageCount === 0"
|
|
53
|
+
aria-label="Next"
|
|
54
|
+
role="button"
|
|
55
|
+
@click="handlePageChange(page + 1)"
|
|
56
|
+
:class="style.page"
|
|
57
|
+
>
|
|
58
|
+
<svg :class="style.svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 24" width="10" height="24" focusable="false"><path stroke="currentColor" fill="currentColor" fill-rule="evenodd" d="M10 12a1 1 0 0 1-.316.73l-8 7.5-1.368-1.46L7.538 12 .316 5.23l1.368-1.46 8 7.5A1 1 0 0 1 10 12z" clip-rule="evenodd"></path></svg>
|
|
59
|
+
</button>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<script lang="ts">
|
|
65
|
+
import {computed, defineComponent, watch} from "vue";
|
|
66
|
+
import * as style from "./style"
|
|
67
|
+
|
|
68
|
+
const pageIndicatorLength = 7
|
|
69
|
+
const aroundIndicatorLength = 1
|
|
70
|
+
const moreIndicatorOffsetLength = 5
|
|
71
|
+
export default defineComponent({
|
|
72
|
+
name: "Pagination",
|
|
73
|
+
props: {
|
|
74
|
+
page: {
|
|
75
|
+
type: Number,
|
|
76
|
+
default: 1
|
|
77
|
+
},
|
|
78
|
+
pageSize: {
|
|
79
|
+
type: Number,
|
|
80
|
+
default: 10
|
|
81
|
+
},
|
|
82
|
+
pageSizes: {
|
|
83
|
+
type: Array
|
|
84
|
+
},
|
|
85
|
+
total: {
|
|
86
|
+
type: Number
|
|
87
|
+
},
|
|
88
|
+
showPageSize: {
|
|
89
|
+
type: Boolean,
|
|
90
|
+
default: true
|
|
91
|
+
},
|
|
92
|
+
showTotal: {
|
|
93
|
+
type: Boolean,
|
|
94
|
+
default: true
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
emits: [
|
|
98
|
+
'update:page',
|
|
99
|
+
'update:pageSize',
|
|
100
|
+
],
|
|
101
|
+
setup(props, {emit}) {
|
|
102
|
+
const realTotal = computed(() => {
|
|
103
|
+
return props.total || 0;
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
const isEmpty = computed(() => {
|
|
107
|
+
return realTotal.value === 0;
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
const realPageSizes = computed(() => {
|
|
111
|
+
const sizes = props.pageSizes == null
|
|
112
|
+
? [10, 20, 30, 40, 50]
|
|
113
|
+
: props.pageSizes;
|
|
114
|
+
|
|
115
|
+
return sizes.map((size) => ({
|
|
116
|
+
label: size,
|
|
117
|
+
value: size
|
|
118
|
+
}));
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
const pageCount = computed(() => {
|
|
122
|
+
return Math.ceil(realTotal.value / props.pageSize);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
const pageIndicatorSeries = computed(() => {
|
|
126
|
+
let {page} = props;
|
|
127
|
+
|
|
128
|
+
if (isEmpty.value) {
|
|
129
|
+
return [getPageIndicator(1, {current: false})];
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
let continuousIndicatorLength = aroundIndicatorLength * 2 + 1
|
|
133
|
+
let boundaryIndicatorLength =
|
|
134
|
+
(pageIndicatorLength - continuousIndicatorLength - 2) / 2
|
|
135
|
+
let leftLen
|
|
136
|
+
let rightLen
|
|
137
|
+
let offsetBackward = Math.max(page - moreIndicatorOffsetLength, 1)
|
|
138
|
+
let offsetForward = Math.min(page + moreIndicatorOffsetLength, pageCount.value)
|
|
139
|
+
switch (true) {
|
|
140
|
+
case pageCount.value <= pageIndicatorLength:
|
|
141
|
+
return getPageSeries(1, pageCount.value)
|
|
142
|
+
case page <= boundaryIndicatorLength + aroundIndicatorLength + 2:
|
|
143
|
+
leftLen = pageIndicatorLength - boundaryIndicatorLength - 1
|
|
144
|
+
return getPageSeries(1, leftLen)
|
|
145
|
+
.concat(
|
|
146
|
+
getPageIndicator(offsetForward, { more: true, forward: true })
|
|
147
|
+
)
|
|
148
|
+
.concat(
|
|
149
|
+
getPageSeries(
|
|
150
|
+
pageCount.value - boundaryIndicatorLength + 1,
|
|
151
|
+
boundaryIndicatorLength
|
|
152
|
+
)
|
|
153
|
+
)
|
|
154
|
+
case page >=
|
|
155
|
+
pageCount.value - boundaryIndicatorLength - aroundIndicatorLength - 1:
|
|
156
|
+
rightLen = pageIndicatorLength - boundaryIndicatorLength - 1
|
|
157
|
+
return getPageSeries(1, boundaryIndicatorLength)
|
|
158
|
+
.concat(
|
|
159
|
+
getPageIndicator(offsetBackward, { more: true, forward: false })
|
|
160
|
+
)
|
|
161
|
+
.concat(getPageSeries(pageCount.value - rightLen + 1, rightLen))
|
|
162
|
+
default:
|
|
163
|
+
return getPageSeries(1, boundaryIndicatorLength)
|
|
164
|
+
.concat(
|
|
165
|
+
getPageIndicator(offsetBackward, { more: true, forward: false })
|
|
166
|
+
)
|
|
167
|
+
.concat(
|
|
168
|
+
getPageSeries(
|
|
169
|
+
page - aroundIndicatorLength,
|
|
170
|
+
continuousIndicatorLength
|
|
171
|
+
)
|
|
172
|
+
)
|
|
173
|
+
.concat(
|
|
174
|
+
getPageIndicator(offsetForward, { more: true, forward: true })
|
|
175
|
+
)
|
|
176
|
+
.concat(
|
|
177
|
+
getPageSeries(
|
|
178
|
+
pageCount.value - boundaryIndicatorLength + 1,
|
|
179
|
+
boundaryIndicatorLength
|
|
180
|
+
)
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
})
|
|
185
|
+
|
|
186
|
+
function getPageSeries(from: number, length: number) {
|
|
187
|
+
let series = [];
|
|
188
|
+
for (let i = 0; i < length; i++) {
|
|
189
|
+
series[i] = getPageIndicator(from + i);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
return series;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
function getPageIndicator(page: number, {more = false, forward = false, current = false} = {}) {
|
|
196
|
+
return {
|
|
197
|
+
page,
|
|
198
|
+
more,
|
|
199
|
+
forward,
|
|
200
|
+
current: !current ? page === props.page : current,
|
|
201
|
+
text: page
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
function getKey(item: any) {
|
|
206
|
+
return `page-${item.more ? (item.forward ? 'forward' : 'backward') : item.page}`
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
function handlePageChange(page: number) {
|
|
210
|
+
emit('update:page', page)
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
watch(() => props.page, (val) => {
|
|
214
|
+
emit('update:page', val)
|
|
215
|
+
}, { immediate: true })
|
|
216
|
+
|
|
217
|
+
return {
|
|
218
|
+
realTotal,
|
|
219
|
+
isEmpty,
|
|
220
|
+
realPageSizes,
|
|
221
|
+
pageCount,
|
|
222
|
+
pageIndicatorSeries,
|
|
223
|
+
getKey,
|
|
224
|
+
handlePageChange,
|
|
225
|
+
|
|
226
|
+
style
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
})
|
|
230
|
+
</script>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<MPagination
|
|
3
|
+
v-model:page="page"
|
|
4
|
+
:total="total"
|
|
5
|
+
@update:page="handlePage"
|
|
6
|
+
/>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script setup lang="ts">
|
|
10
|
+
import { ref } from "vue";
|
|
11
|
+
const page = ref(3);
|
|
12
|
+
const total = ref(1000);
|
|
13
|
+
|
|
14
|
+
const handlePage = (page: number) => {
|
|
15
|
+
console.log(page);
|
|
16
|
+
// do axios stuff
|
|
17
|
+
};
|
|
18
|
+
</script>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import MPagination from "../Pagination.vue";
|
|
2
|
+
import {
|
|
3
|
+
MPaginationBasic
|
|
4
|
+
} from "./index";
|
|
5
|
+
|
|
6
|
+
import {
|
|
7
|
+
createStory
|
|
8
|
+
} from "../../../__storybook__";
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
component: MPagination,
|
|
12
|
+
title: 'Components/Pagination'
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const Basic = createStory(MPaginationBasic)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MPaginationBasic } from './basic.vue';
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import {createVar, globalKeyframes, style, styleVariants} from "@vanilla-extract/css";
|
|
2
|
+
import {themeVars} from "../../../styles/theme.css";
|
|
3
|
+
|
|
4
|
+
const sizes = {
|
|
5
|
+
xs: '300px',
|
|
6
|
+
sm: '400px',
|
|
7
|
+
md: '640px',
|
|
8
|
+
lg: '800px',
|
|
9
|
+
xl: '1140px',
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const vars = {
|
|
13
|
+
backgroundColor: createVar(),
|
|
14
|
+
color: createVar(),
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const pagination = style({
|
|
18
|
+
display: "inline-flex",
|
|
19
|
+
alignItems: "center",
|
|
20
|
+
fontSize: themeVars.fontSize.small,
|
|
21
|
+
boxSizing: "border-box"
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export const buttons = style({
|
|
25
|
+
display: "inline-flex",
|
|
26
|
+
alignItems: "center",
|
|
27
|
+
fontSize: themeVars.fontSize.small,
|
|
28
|
+
boxSizing: "border-box",
|
|
29
|
+
gap: themeVars.space["2.5"]
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
export const pages = style({
|
|
33
|
+
display: "inline-flex",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
margin: 0,
|
|
36
|
+
gap: themeVars.space["1"]
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
export const page = style({
|
|
40
|
+
vars: {
|
|
41
|
+
[vars.backgroundColor]: "transparent",
|
|
42
|
+
[vars.color]: themeVars.color.gray["700"]
|
|
43
|
+
},
|
|
44
|
+
height: "28px",
|
|
45
|
+
width: "28px",
|
|
46
|
+
borderRadius: themeVars.rounded.default,
|
|
47
|
+
outline: "none",
|
|
48
|
+
border: "none",
|
|
49
|
+
fontSize: 'inherit',
|
|
50
|
+
padding: `0px ${themeVars.space["2"]}`,
|
|
51
|
+
display: "flex",
|
|
52
|
+
alignItems: "center",
|
|
53
|
+
justifyContent: "center",
|
|
54
|
+
lineHeight: 1,
|
|
55
|
+
color: vars.color,
|
|
56
|
+
backgroundColor: vars.backgroundColor,
|
|
57
|
+
cursor: "pointer",
|
|
58
|
+
selectors: {
|
|
59
|
+
'&:hover': {
|
|
60
|
+
vars: {
|
|
61
|
+
[vars.backgroundColor]: themeVars.color.gray["150"],
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
export const active = style({
|
|
68
|
+
vars: {
|
|
69
|
+
[vars.backgroundColor]: themeVars.color.blue["600"],
|
|
70
|
+
[vars.color]: "#FFF"
|
|
71
|
+
},
|
|
72
|
+
selectors: {
|
|
73
|
+
'&:hover': {
|
|
74
|
+
vars: {
|
|
75
|
+
[vars.backgroundColor]: themeVars.color.blue["700"],
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
export const svg = style({
|
|
82
|
+
height: "calc(1em + 2px)",
|
|
83
|
+
width: "calc(1em + 2px)",
|
|
84
|
+
display: "inline-block",
|
|
85
|
+
fontSize: "inherit",
|
|
86
|
+
userSelect: "none",
|
|
87
|
+
|
|
88
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Pagination.css';
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<th>
|
|
2
|
+
<th :style="computedStyles">
|
|
3
3
|
<slot />
|
|
4
4
|
</th>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
|
-
import { defineComponent } from "vue";
|
|
8
|
+
import { computed, defineComponent } from "vue";
|
|
9
9
|
|
|
10
10
|
export default defineComponent({
|
|
11
11
|
name: "TableHead",
|
|
@@ -16,6 +16,30 @@ export default defineComponent({
|
|
|
16
16
|
sortable: {
|
|
17
17
|
type: Boolean,
|
|
18
18
|
default: false
|
|
19
|
+
},
|
|
20
|
+
width: {
|
|
21
|
+
type: [Number, String]
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
setup(props) {
|
|
25
|
+
|
|
26
|
+
const computedWidth = computed(() => {
|
|
27
|
+
if (isNaN(Number(props.width))) {
|
|
28
|
+
return props.width;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return `${props.width}px`;
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
const computedStyles = computed(() => {
|
|
35
|
+
// if string is passed, return it
|
|
36
|
+
return {
|
|
37
|
+
width: computedWidth.value
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
computedStyles
|
|
19
43
|
}
|
|
20
44
|
}
|
|
21
45
|
});
|