design-system-next 1.2.21 → 1.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/design-system-next.js +784 -766
  2. package/dist/design-system-next.js.gz +0 -0
  3. package/dist/main.css +1 -1
  4. package/dist/main.css.gz +0 -0
  5. package/package.json +1 -1
  6. package/src/App.vue +232 -26
  7. package/src/assets/styles/tailwind.css +6 -0
  8. package/src/components/avatar/avatar.ts +14 -3
  9. package/src/components/avatar/avatar.vue +5 -5
  10. package/src/components/avatar/use-avatar.ts +18 -15
  11. package/src/components/table/table.ts +2 -2
  12. package/src/components/table/table.vue +9 -4
package/dist/design-system-next.js.gz CHANGED
Binary file
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:#000c;color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.number-input[data-v-75310421]::-webkit-outer-spin-button,.number-input[data-v-75310421]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.number-input[data-v-75310421]{-moz-appearance:textfield}.spr-modal[data-v-a666a3c3]::backdrop{background-color:#4c5857;opacity:.6}@keyframes shadowGrow-741d7d61{0%{box-shadow:inset 0 0 0 25px #fff}to{box-shadow:inset 0 0 0 2.5px #fff}}.animate-shadow-grow[data-v-741d7d61]{animation:shadowGrow-741d7d61 .3s ease-in-out forwards}.snackbar[data-v-efc88443]{width:360px;max-width:360px;min-height:56px;max-height:76px}.snackbar-enter-from[data-v-b21a374c],.snackbar-leave-to[data-v-b21a374c]{transform:translateY(100%);opacity:0}.snackbar-enter-active[data-v-b21a374c],.snackbar-leave-active[data-v-b21a374c]{transition:.25s ease all}.snackbar-wrapper[data-v-b21a374c]{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);z-index:100}.snackbar-wrapper>ul[data-v-b21a374c]{list-style-type:none}.input:checked~.switch-mark[data-v-df558f48]:before{left:1.7rem}.switch-mark[data-v-df558f48]:before,.switch-mark[data-v-df558f48]:after{position:absolute;content:""}.switch-mark[data-v-df558f48]:before{left:.25rem;top:.25rem;height:1rem;width:1rem;border-radius:50%;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:root{--size-50: 2px;--size-100: 4px;--size-150: 6px;--size-200: 8px;--size-250: 12px;--size-300: 16px;--size-400: 24px;--size-500: 32px;--size-600: 40px;--size-700: 48px;--size-800: 64px;--size-900: 72px;--size-1000: 80px;--size-1100: 96px;--size-1200: 128px}*::-webkit-scrollbar{height:8px;width:8px}*::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(219 219 221 / var(--tw-bg-opacity, 1))}*::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(186 188 192 / var(--tw-bg-opacity, 1))}#quick-action-menu-wrapper{max-height:500px;width:400px}#sidenav-menu-wrapper,#sidenav-submenu-wrapper{max-height:500px;width:215px}#user-menu-wrapper{top:-20px!important;max-height:500px;width:300px}#sidenav-sub-submenu-wrapper{display:none}#quick-action-menu-wrapper,#sidenav-menu-wrapper,#sidenav-submenu-wrapper,#user-menu-wrapper{overflow-y:auto;overflow-x:hidden;border-radius:12px;border-width:1px;border-style:solid;--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1));--tw-shadow: 0px 4px 12px 0px #262B2B29;--tw-shadow-colored: 0px 4px 12px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{overflow:hidden}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-radius:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-style:none}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{background-color:transparent}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-duration:.3s}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-timing-function:cubic-bezier(0,0,.2,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active{transition:all .8s cubic-bezier(1,.5,.8,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{--tw-translate-x: -20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{opacity:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__arrow-container,#user-menu-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-weight:400}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{line-height:16px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:0px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{text-transform:uppercase}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{line-height:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:.7px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#dropdown-wrapper{overflow:hidden}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{max-height:300px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{width:240px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{overflow-y:auto}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-width:1px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-style:solid}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{padding:.5rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-bottom-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-top-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-bottom-1{bottom:-.25rem}.-bottom-2{bottom:-.5rem}.-bottom-3{bottom:-.75rem}.-right-1{right:-.25rem}.-right-2{right:-.5rem}.-top-0\.5{top:-.125rem}.-top-1{top:-.25rem}.-top-2{top:-.5rem}.-top-3{top:-.75rem}.bottom-0{bottom:0}.bottom-\[-2px\]{bottom:-2px}.bottom-\[-3px\]{bottom:-3px}.bottom-\[-4px\]{bottom:-4px}.bottom-\[1px\]{bottom:1px}.left-0{left:0}.left-1{left:.25rem}.left-1\/2{left:50%}.left-3{left:.75rem}.left-\[1\.7rem\]{left:1.7rem}.left-\[12\%\]{left:12%}.left-\[52\%\]{left:52%}.left-\[55\%\]{left:55%}.left-\[7\%\]{left:7%}.right-0{right:0}.right-1{right:.25rem}.right-2\.5{right:.625rem}.right-3{right:.75rem}.right-4{right:1rem}.right-\[-3px\]{right:-3px}.right-\[-4px\]{right:-4px}.right-\[-5px\]{right:-5px}.right-\[-7px\]{right:-7px}.right-\[1px\]{right:1px}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-\[-4px\]{top:-4px}.top-\[-6\.3px\]{top:-6.3px}.top-\[-6px\]{top:-6px}.top-\[-7px\]{top:-7px}.top-\[-8px\]{top:-8px}.z-10{z-index:10}.z-50{z-index:50}.z-\[10\]{z-index:10}.z-\[1\]{z-index:1}.z-\[30\]{z-index:30}.z-\[5\]{z-index:5}.\!m-0{margin:0!important}.m-0{margin:0}.m-size-spacing-xs{margin:var(--size-300)}.\!mb-0{margin-bottom:0!important}.\!mt-\[12px\]{margin-top:12px!important}.\!mt-\[6px\]{margin-top:6px!important}.\!mt-\[8px\]{margin-top:8px!important}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-\[52px\]{margin-bottom:52px}.mb-size-spacing-3xs{margin-bottom:var(--size-200)}.mb-size-spacing-4xs{margin-bottom:var(--size-150)}.mb-size-spacing-md{margin-bottom:var(--size-500)}.ml-\[60px\]{margin-left:60px}.ml-size-spacing-3xs{margin-left:var(--size-200)}.mr-2{margin-right:.5rem}.mr-size-spacing-3xs{margin-right:var(--size-200)}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-3{margin-top:.75rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-9{height:2.25rem}.h-\[1\.25em\]{height:1.25em}.h-\[100vh\]{height:100vh}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[16px\]{height:16px}.h-\[1em\]{height:1em}.h-\[200px\]{height:200px}.h-\[20px\]{height:20px}.h-\[2px\]{height:2px}.h-\[36px\]{height:36px}.h-\[400px\]{height:400px}.h-\[52px\]{height:52px}.h-\[calc\(100vh_-_32px\)\]{height:calc(100vh - 32px)}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-screen{height:100vh}.max-h-9{max-height:2.25rem}.max-h-\[268px\]{max-height:268px}.max-h-\[300px\]{max-height:300px}.max-h-\[calc\(100vh-150px\)\]{max-height:calc(100vh - 150px)}.max-h-\[calc\(100vh-194px\)\]{max-height:calc(100vh - 194px)}.max-h-\[calc\(100vh-60px\)\]{max-height:calc(100vh - 60px)}.min-h-12{min-height:3rem}.min-h-\[200px\]{min-height:200px}.min-h-\[240px\]{min-height:240px}.min-h-\[360px\]{min-height:360px}.min-h-\[60px\]{min-height:60px}.\!w-full{width:100%!important}.w-12{width:3rem}.w-20{width:5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-\[1\.25em\]{width:1.25em}.w-\[1\.39em\]{width:1.39em}.w-\[110px\]{width:110px}.w-\[120px\]{width:120px}.w-\[1280px\]{width:1280px}.w-\[16px\]{width:16px}.w-\[1em\]{width:1em}.w-\[200px\]{width:200px}.w-\[20px\]{width:20px}.w-\[240px\]{width:240px}.w-\[2px\]{width:2px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[420px\]{width:420px}.w-\[480px\]{width:480px}.w-\[50vw\]{width:50vw}.w-\[720px\]{width:720px}.w-\[80px\]{width:80px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-screen{width:100vw}.\!min-w-9{min-width:2.25rem!important}.min-w-10{min-width:2.5rem}.min-w-14{min-width:3.5rem}.min-w-20{min-width:5rem}.min-w-4{min-width:1rem}.min-w-5{min-width:1.25rem}.min-w-6{min-width:1.5rem}.min-w-7{min-width:1.75rem}.min-w-9{min-width:2.25rem}.min-w-\[10px\]{min-width:10px}.min-w-\[110px\]{min-width:110px}.min-w-\[16px\]{min-width:16px}.min-w-\[180px\]{min-width:180px}.min-w-\[18em\]{min-width:18em}.min-w-\[20px\]{min-width:20px}.min-w-\[24px\]{min-width:24px}.min-w-\[360px\]{min-width:360px}.min-w-\[480px\]{min-width:480px}.max-w-\[800px\]{max-width:800px}.max-w-\[calc\(100\%-60px\)\]{max-width:calc(100% - 60px)}.max-w-lg{max-width:1320px}.max-w-md{max-width:1000px}.max-w-sm{max-width:640px}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2,.-translate-y-2\/4{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-size-spacing-2xs{gap:var(--size-250)}.gap-size-spacing-3xs{gap:var(--size-200)}.gap-size-spacing-4xs{gap:var(--size-150)}.gap-size-spacing-5xs{gap:var(--size-100)}.gap-size-spacing-6xs{gap:var(--size-50)}.gap-size-spacing-md{gap:var(--size-500)}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[2\.5px\]{border-radius:2.5px}.rounded-\[32px\]{border-radius:32px}.rounded-\[40px\]{border-radius:40px}.rounded-\[50\%\]{border-radius:50%}.rounded-border-radius-2xs{border-radius:var(--size-50)}.rounded-border-radius-full{border-radius:999px}.rounded-border-radius-lg{border-radius:var(--size-250)}.rounded-border-radius-md{border-radius:var(--size-200)}.rounded-border-radius-sm{border-radius:var(--size-150)}.rounded-border-radius-xl{border-radius:var(--size-300)}.rounded-border-radius-xs{border-radius:var(--size-100)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-border-radius-xl{border-bottom-right-radius:var(--size-300);border-bottom-left-radius:var(--size-300)}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-t-border-radius-lg{border-top-left-radius:var(--size-250);border-top-right-radius:var(--size-250)}.\!border{border-width:1px!important}.\!border-0{border-width:0px!important}.\!border-\[1\.5px\]{border-width:1.5px!important}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-\[1\.25px\]{border-width:1.25px}.border-\[1\.5px\]{border-width:1.5px}.\!border-x-\[0\.5px\]{border-left-width:.5px!important;border-right-width:.5px!important}.\!border-y{border-top-width:1px!important;border-bottom-width:1px!important}.border-x-0{border-left-width:0px;border-right-width:0px}.\!border-b{border-bottom-width:1px!important}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0px}.border-l-0{border-left-width:0px}.border-r{border-right-width:1px}.border-r-0{border-right-width:0px}.border-t{border-top-width:1px}.border-t-0{border-top-width:0px}.\!border-solid{border-style:solid!important}.border-solid{border-style:solid}.\!border-none{border-style:none!important}.border-none{border-style:none}.\!border-tomato-600{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.\!border-transparent{border-color:transparent!important}.\!border-white-100{--tw-border-opacity: 1 !important;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))!important}.\!border-white-50{--tw-border-opacity: 1 !important;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))!important}.border-kangkong-400{--tw-border-opacity: 1;border-color:rgb(74 222 123 / var(--tw-border-opacity, 1))}.border-kangkong-700{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.border-mushroom-200{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.border-ubas-400{--tw-border-opacity: 1;border-color:rgb(170 139 250 / var(--tw-border-opacity, 1))}.bg-kangkong-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-mushroom-100{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.bg-mushroom-700\/60{background-color:#4c585799}.bg-ubas-50{--tw-bg-opacity: 1;background-color:rgb(245 243 255 / var(--tw-bg-opacity, 1))}.bg-white-50{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white-500{--tw-bg-opacity: 1;background-color:rgb(124 124 124 / var(--tw-bg-opacity, 1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-size-spacing-3xs{padding:var(--size-200)}.p-size-spacing-4xs{padding:var(--size-150)}.p-size-spacing-5xs{padding:var(--size-100)}.p-size-spacing-sm{padding:var(--size-400)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-size-spacing-2xl{padding-left:var(--size-800);padding-right:var(--size-800)}.px-size-spacing-2xs{padding-left:var(--size-250);padding-right:var(--size-250)}.px-size-spacing-4xs{padding-left:var(--size-150);padding-right:var(--size-150)}.px-size-spacing-5xs{padding-left:var(--size-100);padding-right:var(--size-100)}.px-size-spacing-sm{padding-left:var(--size-400);padding-right:var(--size-400)}.px-size-spacing-xs{padding-left:var(--size-300);padding-right:var(--size-300)}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-size-spacing-2xl{padding-top:var(--size-800);padding-bottom:var(--size-800)}.py-size-spacing-2xs{padding-top:var(--size-250);padding-bottom:var(--size-250)}.py-size-spacing-3xl{padding-top:var(--size-900);padding-bottom:var(--size-900)}.py-size-spacing-3xs{padding-top:var(--size-200);padding-bottom:var(--size-200)}.py-size-spacing-4xs{padding-top:var(--size-150);padding-bottom:var(--size-150)}.py-size-spacing-6xs{padding-top:var(--size-50);padding-bottom:var(--size-50)}.py-size-spacing-md{padding-top:var(--size-500);padding-bottom:var(--size-500)}.py-size-spacing-xs{padding-top:var(--size-300);padding-bottom:var(--size-300)}.pb-4{padding-bottom:1rem}.pl-size-spacing-lg{padding-left:var(--size-600)}.pr-\[5\%\]{padding-right:5%}.pr-\[50\%\]{padding-right:50%}.pr-\[90\%\]{padding-right:90%}.pr-\[93\%\]{padding-right:93%}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-start{text-align:start}.align-middle{vertical-align:middle}.font-code{font-family:Roboto Mono,sans-serif}.font-inbound{font-family:Roboto,sans-serif}.font-main{font-family:Rubik,sans-serif}.\!text-\[10px\]{font-size:10px!important}.text-\[20px\]{font-size:20px}.text-\[28px\]{font-size:28px}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-extralight{font-weight:200}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-thin{font-weight:100}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.\!leading-\[0\]{line-height:0!important}.leading-100{line-height:12px}.leading-300{line-height:16px}.leading-none{line-height:1}.\!tracking-normal{letter-spacing:0em!important}.\!text-tomato-600{--tw-text-opacity: 1 !important;color:rgb(218 47 56 / var(--tw-text-opacity, 1))!important}.text-blueberry-500{--tw-text-opacity: 1;color:rgb(45 136 255 / var(--tw-text-opacity, 1))}.text-carrot-500{--tw-text-opacity: 1;color:rgb(255 151 10 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-kangkong-500{--tw-text-opacity: 1;color:rgb(34 197 88 / var(--tw-text-opacity, 1))}.text-kangkong-800{--tw-text-opacity: 1;color:rgb(22 101 49 / var(--tw-text-opacity, 1))}.text-mushroom-300{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.text-mushroom-950{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.text-tomato-500{--tw-text-opacity: 1;color:rgb(236 71 80 / var(--tw-text-opacity, 1))}.text-ubas-800{--tw-text-opacity: 1;color:rgb(95 33 182 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.decoration-solid{text-decoration-style:solid}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-60{opacity:.6}.\!shadow-button{--tw-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .15) inset !important;--tw-shadow-colored: inset 0px 2px 1px 0px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.\!shadow-none{--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.shadow-\[inset_0px_0px_0px_2\.5px_\#fff\]{--tw-shadow: inset 0px 0px 0px 2.5px #fff;--tw-shadow-colored: inset 0px 0px 0px 2.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-2{outline-width:2px}.outline-offset-4{outline-offset:4px}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.brightness-75{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_2px_8px_-2px_rgba\(38\,43\,43\,0\.20\)\]{--tw-drop-shadow: drop-shadow(0 2px 8px -2px rgba(38,43,43,.2));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-300,.duration-\[0\.3s\]{transition-duration:.3s}.ease-\[ease-out\]{transition-timing-function:ease-out}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.bg-overlay{background-color:#4c5857;opacity:.6}.hidden-scrolls::-webkit-scrollbar{display:none}.heading-xl{font-family:Rubik,sans-serif;font-weight:500;font-size:48px;line-height:60px;letter-spacing:-1.3px}.heading-lg{font-family:Rubik,sans-serif;font-weight:500;font-size:40px;line-height:48px;letter-spacing:-1px}.heading-md{font-family:Rubik,sans-serif;font-weight:500;font-size:32px;line-height:40px;letter-spacing:-1px}.heading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:28px;line-height:36px;letter-spacing:-.7px}.heading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:24px;line-height:32px;letter-spacing:-.7px}.subheading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.7px}.subheading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:16px;line-height:20px;letter-spacing:0px}.body-lg{font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-md{font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-sm{font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-xs{font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.label-xs{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.label-xs-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.label-xs-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.label-sm{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.label-sm-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.label-sm-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.font-size-100{font-size:12px}.font-size-200{font-size:14px}.font-size-300{font-size:16px}.font-size-400{font-size:20px}.font-size-500{font-size:24px}.font-size-600{font-size:28px}.font-size-700{font-size:32px}.font-size-800{font-size:40px}.font-size-900{font-size:48px}.font-size-1000{font-size:56px}.line-height-100{line-height:12px}.line-height-200{line-height:14px}.line-height-300{line-height:16px}.line-height-400{line-height:20px}.line-height-500{line-height:24px}.line-height-600{line-height:32px}.line-height-700{line-height:36px}.line-height-800{line-height:40px}.line-height-900{line-height:48px}.line-height-1000{line-height:60px}.letter-spacing-densest{letter-spacing:-1.3px}.letter-spacing-denser{letter-spacing:-1px}.letter-spacing-dense{letter-spacing:-.7px}.letter-spacing-normal{letter-spacing:0px}.letter-spacing-wide{letter-spacing:.7px}.letter-spacing-wider{letter-spacing:1px}.letter-spacing-widest{letter-spacing:1.3px}.text-color-strong{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.text-color-supporting{--tw-text-opacity: 1;color:rgb(145 159 157 / var(--tw-text-opacity, 1))}.text-color-base{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.text-color-weak{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.text-color-disabled{--tw-text-opacity: 1;color:rgb(186 188 192 / var(--tw-text-opacity, 1))}.text-color-on-fill-disabled{--tw-text-opacity: 1;color:rgb(152 152 152 / var(--tw-text-opacity, 1))}.text-color-inverted-strong{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-color-inverted-disabled{--tw-text-opacity: 1;color:rgb(101 101 101 / var(--tw-text-opacity, 1))}.text-color-brand-base,.text-color-success-base{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.text-color-information-base{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.text-color-danger-base{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.text-color-pending-base{--tw-text-opacity: 1;color:rgb(187 104 2 / var(--tw-text-opacity, 1))}.text-color-caution-base{--tw-text-opacity: 1;color:rgb(204 92 2 / var(--tw-text-opacity, 1))}.background-color{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.background-color-surface{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.background-color-inverted{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}.background-color-base{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.background-color-single-active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.background-color-disabled{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.background-color-brand-base{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.background-color-brand-hover{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.background-color-brand-pressed{--tw-bg-opacity: 1;background-color:rgb(20 83 43 / var(--tw-bg-opacity, 1))}.background-color-brand-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.background-color-success-base{--tw-bg-opacity: 1;background-color:rgb(23 173 73 / var(--tw-bg-opacity, 1))}.background-color-success-hover{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.background-color-success-pressed{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.background-color-success-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.background-color-information-base{--tw-bg-opacity: 1;background-color:rgb(22 121 250 / var(--tw-bg-opacity, 1))}.background-color-information-weak{--tw-bg-opacity: 1;background-color:rgb(216 235 255 / var(--tw-bg-opacity, 1))}.background-color-pending-base{--tw-bg-opacity: 1;background-color:rgb(255 191 0 / var(--tw-bg-opacity, 1))}.background-color-pending-weak{--tw-bg-opacity: 1;background-color:rgb(255 251 197 / var(--tw-bg-opacity, 1))}.background-color-caution-base{--tw-bg-opacity: 1;background-color:rgb(255 151 10 / var(--tw-bg-opacity, 1))}.background-color-caution-weak{--tw-bg-opacity: 1;background-color:rgb(255 244 211 / var(--tw-bg-opacity, 1))}.background-color-danger-base{--tw-bg-opacity: 1;background-color:rgb(218 47 56 / var(--tw-bg-opacity, 1))}.background-color-danger-hover{--tw-bg-opacity: 1;background-color:rgb(182 31 39 / var(--tw-bg-opacity, 1))}.background-color-danger-pressed{--tw-bg-opacity: 1;background-color:rgb(151 29 35 / var(--tw-bg-opacity, 1))}.background-color-danger-weak{--tw-bg-opacity: 1;background-color:rgb(254 226 227 / var(--tw-bg-opacity, 1))}.switch-background-default{--tw-bg-opacity: 1;background-color:rgb(217 222 222 / var(--tw-bg-opacity, 1))}.switch-background-hover{--tw-bg-opacity: 1;background-color:rgb(184 193 192 / var(--tw-bg-opacity, 1))}.switch-background-pressed{--tw-bg-opacity: 1;background-color:rgb(145 159 157 / var(--tw-bg-opacity, 1))}.border-color-strong{--tw-border-opacity: 1;border-color:rgb(115 132 130 / var(--tw-border-opacity, 1))}.border-color-supporting{--tw-border-opacity: 1;border-color:rgb(145 159 157 / var(--tw-border-opacity, 1))}.\!border-color-base,.border-color-base{--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1))}.border-color-weak{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.\!border-color-disabled,.border-color-disabled{--tw-border-opacity: 1;border-color:rgb(152 152 152 / var(--tw-border-opacity, 1))}.\!border-color-brand-base,.border-color-brand-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.border-color-brand-hover{--tw-border-opacity: 1;border-color:rgb(22 101 49 / var(--tw-border-opacity, 1))}.\!border-color-success-base,.border-color-success-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.\!border-color-information-base,.border-color-information-base{--tw-border-opacity: 1;border-color:rgb(15 110 235 / var(--tw-border-opacity, 1))}.\!border-color-danger-base{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.\!border-color-pending-base{--tw-border-opacity: 1;border-color:rgb(187 104 2 / var(--tw-border-opacity, 1))}.\!border-color-caution-base{--tw-border-opacity: 1;border-color:rgb(204 92 2 / var(--tw-border-opacity, 1))}.drop-shadow{--tw-shadow: 0px 2px 8px -2px #262B2B33;--tw-shadow-colored: 0px 2px 8px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.placeholder\:text-mushroom-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.placeholder\:text-mushroom-300::placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.before\:transition-all:before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:duration-150:before{content:var(--tw-content);transition-duration:.15s}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:duration-150:after{content:var(--tw-content);transition-duration:.15s}.last\:rounded-b-xl:last-child{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.hover\:shadow-button-hover:hover{--tw-shadow: 0px -2px 1px 0px rgba(0, 0, 0, .1) inset;--tw-shadow-colored: inset 0px -2px 1px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:brightness-75:hover{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:background-color-hover:hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.hover\:background-color-brand-weak:hover{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.focus\:\!border-\[1\.5px\]:focus{border-width:1.5px!important}.focus\:\!border-kangkong-700:focus{--tw-border-opacity: 1 !important;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))!important}.focus\:\!border-tomato-600:focus{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.focus\:text-color-strong:focus{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.active\:scale-90:active{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:text-color-success-pressed:active{--tw-text-opacity: 1;color:rgb(20 83 43 / var(--tw-text-opacity, 1))}.active\:background-color-single-active:active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.active\:background-color-pressed:active{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.group:active .group-active\:scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (max-width: 575.98px){.sm\:left-\[16\%\]{left:16%}.sm\:left-\[24\%\]{left:24%}.sm\:pr-\[80\%\]{padding-right:80%}.sm\:pr-\[85\%\]{padding-right:85%}}.\[\&\>img\]\:mx-auto>img{margin-left:auto;margin-right:auto}.\[\&\>img\]\:h-\[24px\]>img{height:24px}.\[\&\>img\]\:h-\[36px\]>img{height:36px}.\[\&\>img\]\:w-\[24px\]>img{width:24px}.\[\&\>img\]\:w-\[36px\]>img{width:36px}.\[\&\>img\]\:rounded-full>img{border-radius:9999px}.\[\&\>img\]\:object-cover>img{-o-object-fit:cover;object-fit:cover}
1
+ @import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:#000c;color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.number-input[data-v-75310421]::-webkit-outer-spin-button,.number-input[data-v-75310421]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.number-input[data-v-75310421]{-moz-appearance:textfield}.spr-modal[data-v-a666a3c3]::backdrop{background-color:#4c5857;opacity:.6}@keyframes shadowGrow-741d7d61{0%{box-shadow:inset 0 0 0 25px #fff}to{box-shadow:inset 0 0 0 2.5px #fff}}.animate-shadow-grow[data-v-741d7d61]{animation:shadowGrow-741d7d61 .3s ease-in-out forwards}.snackbar[data-v-efc88443]{width:360px;max-width:360px;min-height:56px;max-height:76px}.snackbar-enter-from[data-v-b21a374c],.snackbar-leave-to[data-v-b21a374c]{transform:translateY(100%);opacity:0}.snackbar-enter-active[data-v-b21a374c],.snackbar-leave-active[data-v-b21a374c]{transition:.25s ease all}.snackbar-wrapper[data-v-b21a374c]{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);z-index:100}.snackbar-wrapper>ul[data-v-b21a374c]{list-style-type:none}.input:checked~.switch-mark[data-v-df558f48]:before{left:1.7rem}.switch-mark[data-v-df558f48]:before,.switch-mark[data-v-df558f48]:after{position:absolute;content:""}.switch-mark[data-v-df558f48]:before{left:.25rem;top:.25rem;height:1rem;width:1rem;border-radius:50%;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:root{--size-50: 2px;--size-100: 4px;--size-150: 6px;--size-200: 8px;--size-250: 12px;--size-300: 16px;--size-400: 24px;--size-500: 32px;--size-600: 40px;--size-700: 48px;--size-800: 64px;--size-900: 72px;--size-1000: 80px;--size-1100: 96px;--size-1200: 128px}*::-webkit-scrollbar{height:8px;width:8px}*::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(219 219 221 / var(--tw-bg-opacity, 1))}*::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(186 188 192 / var(--tw-bg-opacity, 1))}#quick-action-menu-wrapper{max-height:500px;width:400px}#sidenav-menu-wrapper,#sidenav-submenu-wrapper{max-height:500px;width:215px}#user-menu-wrapper{top:-20px!important;max-height:500px;width:300px}#sidenav-sub-submenu-wrapper{display:none}#quick-action-menu-wrapper,#sidenav-menu-wrapper,#sidenav-submenu-wrapper,#user-menu-wrapper{overflow-y:auto;overflow-x:hidden;border-radius:12px;border-width:1px;border-style:solid;--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1));--tw-shadow: 0px 4px 12px 0px #262B2B29;--tw-shadow-colored: 0px 4px 12px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{overflow:hidden}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-radius:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-style:none}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{background-color:transparent}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-duration:.3s}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-timing-function:cubic-bezier(0,0,.2,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active{transition:all .8s cubic-bezier(1,.5,.8,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{--tw-translate-x: -20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{opacity:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__arrow-container,#user-menu-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-weight:400}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{line-height:16px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:0px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{text-transform:uppercase}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{line-height:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:.7px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#dropdown-wrapper{overflow:hidden}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{max-height:300px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{width:240px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{overflow-y:auto}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-width:1px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-style:solid}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{padding:.5rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-bottom-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-top-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}.avatar__slot img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-bottom-1{bottom:-.25rem}.-bottom-2{bottom:-.5rem}.-bottom-3{bottom:-.75rem}.-right-1{right:-.25rem}.-right-2{right:-.5rem}.-top-0\.5{top:-.125rem}.-top-1{top:-.25rem}.-top-2{top:-.5rem}.-top-3{top:-.75rem}.bottom-0{bottom:0}.bottom-\[-2px\]{bottom:-2px}.bottom-\[-3px\]{bottom:-3px}.bottom-\[-4px\]{bottom:-4px}.bottom-\[1px\]{bottom:1px}.left-0{left:0}.left-1{left:.25rem}.left-1\/2{left:50%}.left-3{left:.75rem}.left-\[1\.7rem\]{left:1.7rem}.left-\[12\%\]{left:12%}.left-\[52\%\]{left:52%}.left-\[55\%\]{left:55%}.left-\[7\%\]{left:7%}.right-0{right:0}.right-1{right:.25rem}.right-2\.5{right:.625rem}.right-3{right:.75rem}.right-4{right:1rem}.right-\[-3px\]{right:-3px}.right-\[-4px\]{right:-4px}.right-\[-5px\]{right:-5px}.right-\[-7px\]{right:-7px}.right-\[1px\]{right:1px}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-\[-4px\]{top:-4px}.top-\[-6\.3px\]{top:-6.3px}.top-\[-6px\]{top:-6px}.top-\[-7px\]{top:-7px}.top-\[-8px\]{top:-8px}.z-10{z-index:10}.z-50{z-index:50}.z-\[10\]{z-index:10}.z-\[1\]{z-index:1}.z-\[30\]{z-index:30}.z-\[5\]{z-index:5}.\!m-0{margin:0!important}.m-0{margin:0}.m-size-spacing-xs{margin:var(--size-300)}.\!mb-0{margin-bottom:0!important}.\!mt-\[12px\]{margin-top:12px!important}.\!mt-\[6px\]{margin-top:6px!important}.\!mt-\[8px\]{margin-top:8px!important}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-\[52px\]{margin-bottom:52px}.mb-size-spacing-3xs{margin-bottom:var(--size-200)}.mb-size-spacing-4xs{margin-bottom:var(--size-150)}.mb-size-spacing-md{margin-bottom:var(--size-500)}.ml-\[60px\]{margin-left:60px}.ml-size-spacing-3xs{margin-left:var(--size-200)}.mr-2{margin-right:.5rem}.mr-size-spacing-3xs{margin-right:var(--size-200)}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-3{margin-top:.75rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-9{height:2.25rem}.h-\[1\.25em\]{height:1.25em}.h-\[100vh\]{height:100vh}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[16px\]{height:16px}.h-\[1em\]{height:1em}.h-\[200px\]{height:200px}.h-\[20px\]{height:20px}.h-\[2px\]{height:2px}.h-\[36px\]{height:36px}.h-\[400px\]{height:400px}.h-\[52px\]{height:52px}.h-\[calc\(100vh_-_32px\)\]{height:calc(100vh - 32px)}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-screen{height:100vh}.max-h-9{max-height:2.25rem}.max-h-\[268px\]{max-height:268px}.max-h-\[300px\]{max-height:300px}.max-h-\[calc\(100vh-150px\)\]{max-height:calc(100vh - 150px)}.max-h-\[calc\(100vh-194px\)\]{max-height:calc(100vh - 194px)}.max-h-\[calc\(100vh-60px\)\]{max-height:calc(100vh - 60px)}.min-h-12{min-height:3rem}.min-h-\[200px\]{min-height:200px}.min-h-\[240px\]{min-height:240px}.min-h-\[360px\]{min-height:360px}.min-h-\[60px\]{min-height:60px}.\!w-full{width:100%!important}.w-12{width:3rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-\[1\.25em\]{width:1.25em}.w-\[1\.39em\]{width:1.39em}.w-\[110px\]{width:110px}.w-\[120px\]{width:120px}.w-\[1280px\]{width:1280px}.w-\[16px\]{width:16px}.w-\[1em\]{width:1em}.w-\[200px\]{width:200px}.w-\[20px\]{width:20px}.w-\[240px\]{width:240px}.w-\[2px\]{width:2px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[420px\]{width:420px}.w-\[480px\]{width:480px}.w-\[50vw\]{width:50vw}.w-\[720px\]{width:720px}.w-\[80px\]{width:80px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-screen{width:100vw}.\!min-w-9{min-width:2.25rem!important}.min-w-10{min-width:2.5rem}.min-w-14{min-width:3.5rem}.min-w-20{min-width:5rem}.min-w-4{min-width:1rem}.min-w-5{min-width:1.25rem}.min-w-6{min-width:1.5rem}.min-w-7{min-width:1.75rem}.min-w-9{min-width:2.25rem}.min-w-\[10px\]{min-width:10px}.min-w-\[110px\]{min-width:110px}.min-w-\[16px\]{min-width:16px}.min-w-\[180px\]{min-width:180px}.min-w-\[18em\]{min-width:18em}.min-w-\[20px\]{min-width:20px}.min-w-\[24px\]{min-width:24px}.min-w-\[360px\]{min-width:360px}.min-w-\[480px\]{min-width:480px}.max-w-\[800px\]{max-width:800px}.max-w-\[calc\(100\%-60px\)\]{max-width:calc(100% - 60px)}.max-w-lg{max-width:1320px}.max-w-md{max-width:1000px}.max-w-sm{max-width:640px}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2,.-translate-y-2\/4{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-size-spacing-2xs{gap:var(--size-250)}.gap-size-spacing-3xs{gap:var(--size-200)}.gap-size-spacing-4xs{gap:var(--size-150)}.gap-size-spacing-5xs{gap:var(--size-100)}.gap-size-spacing-6xs{gap:var(--size-50)}.gap-size-spacing-md{gap:var(--size-500)}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[2\.5px\]{border-radius:2.5px}.rounded-\[32px\]{border-radius:32px}.rounded-\[40px\]{border-radius:40px}.rounded-\[50\%\]{border-radius:50%}.rounded-border-radius-2xs{border-radius:var(--size-50)}.rounded-border-radius-full{border-radius:999px}.rounded-border-radius-lg{border-radius:var(--size-250)}.rounded-border-radius-md{border-radius:var(--size-200)}.rounded-border-radius-sm{border-radius:var(--size-150)}.rounded-border-radius-xl{border-radius:var(--size-300)}.rounded-border-radius-xs{border-radius:var(--size-100)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-border-radius-xl{border-bottom-right-radius:var(--size-300);border-bottom-left-radius:var(--size-300)}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-t-border-radius-lg{border-top-left-radius:var(--size-250);border-top-right-radius:var(--size-250)}.\!border{border-width:1px!important}.\!border-0{border-width:0px!important}.\!border-\[1\.5px\]{border-width:1.5px!important}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-\[1\.25px\]{border-width:1.25px}.border-\[1\.5px\]{border-width:1.5px}.\!border-x-\[0\.5px\]{border-left-width:.5px!important;border-right-width:.5px!important}.\!border-y{border-top-width:1px!important;border-bottom-width:1px!important}.border-x-0{border-left-width:0px;border-right-width:0px}.\!border-b{border-bottom-width:1px!important}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0px}.border-l-0{border-left-width:0px}.border-r{border-right-width:1px}.border-r-0{border-right-width:0px}.border-t{border-top-width:1px}.border-t-0{border-top-width:0px}.\!border-solid{border-style:solid!important}.border-solid{border-style:solid}.\!border-none{border-style:none!important}.border-none{border-style:none}.\!border-tomato-600{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.\!border-transparent{border-color:transparent!important}.\!border-white-100{--tw-border-opacity: 1 !important;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))!important}.\!border-white-50{--tw-border-opacity: 1 !important;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))!important}.border-kangkong-400{--tw-border-opacity: 1;border-color:rgb(74 222 123 / var(--tw-border-opacity, 1))}.border-kangkong-700{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.border-mushroom-200{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.border-ubas-400{--tw-border-opacity: 1;border-color:rgb(170 139 250 / var(--tw-border-opacity, 1))}.bg-kangkong-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-mushroom-100{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.bg-mushroom-700\/60{background-color:#4c585799}.bg-ubas-50{--tw-bg-opacity: 1;background-color:rgb(245 243 255 / var(--tw-bg-opacity, 1))}.bg-white-50{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white-500{--tw-bg-opacity: 1;background-color:rgb(124 124 124 / var(--tw-bg-opacity, 1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-size-spacing-3xs{padding:var(--size-200)}.p-size-spacing-4xs{padding:var(--size-150)}.p-size-spacing-5xs{padding:var(--size-100)}.p-size-spacing-sm{padding:var(--size-400)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-size-spacing-2xl{padding-left:var(--size-800);padding-right:var(--size-800)}.px-size-spacing-2xs{padding-left:var(--size-250);padding-right:var(--size-250)}.px-size-spacing-4xs{padding-left:var(--size-150);padding-right:var(--size-150)}.px-size-spacing-5xs{padding-left:var(--size-100);padding-right:var(--size-100)}.px-size-spacing-sm{padding-left:var(--size-400);padding-right:var(--size-400)}.px-size-spacing-xs{padding-left:var(--size-300);padding-right:var(--size-300)}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-size-spacing-2xl{padding-top:var(--size-800);padding-bottom:var(--size-800)}.py-size-spacing-2xs{padding-top:var(--size-250);padding-bottom:var(--size-250)}.py-size-spacing-3xl{padding-top:var(--size-900);padding-bottom:var(--size-900)}.py-size-spacing-3xs{padding-top:var(--size-200);padding-bottom:var(--size-200)}.py-size-spacing-4xs{padding-top:var(--size-150);padding-bottom:var(--size-150)}.py-size-spacing-6xs{padding-top:var(--size-50);padding-bottom:var(--size-50)}.py-size-spacing-md{padding-top:var(--size-500);padding-bottom:var(--size-500)}.py-size-spacing-xs{padding-top:var(--size-300);padding-bottom:var(--size-300)}.pb-4{padding-bottom:1rem}.pl-size-spacing-lg{padding-left:var(--size-600)}.pr-\[5\%\]{padding-right:5%}.pr-\[50\%\]{padding-right:50%}.pr-\[90\%\]{padding-right:90%}.pr-\[93\%\]{padding-right:93%}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-start{text-align:start}.align-middle{vertical-align:middle}.font-code{font-family:Roboto Mono,sans-serif}.font-inbound{font-family:Roboto,sans-serif}.font-main{font-family:Rubik,sans-serif}.\!text-\[10px\]{font-size:10px!important}.text-\[20px\]{font-size:20px}.text-\[28px\]{font-size:28px}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-extralight{font-weight:200}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-thin{font-weight:100}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.\!leading-\[0\]{line-height:0!important}.leading-100{line-height:12px}.leading-300{line-height:16px}.leading-none{line-height:1}.\!tracking-normal{letter-spacing:0em!important}.\!text-tomato-600{--tw-text-opacity: 1 !important;color:rgb(218 47 56 / var(--tw-text-opacity, 1))!important}.text-blueberry-500{--tw-text-opacity: 1;color:rgb(45 136 255 / var(--tw-text-opacity, 1))}.text-carrot-500{--tw-text-opacity: 1;color:rgb(255 151 10 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-kangkong-500{--tw-text-opacity: 1;color:rgb(34 197 88 / var(--tw-text-opacity, 1))}.text-kangkong-800{--tw-text-opacity: 1;color:rgb(22 101 49 / var(--tw-text-opacity, 1))}.text-mushroom-300{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.text-mushroom-950{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.text-tomato-500{--tw-text-opacity: 1;color:rgb(236 71 80 / var(--tw-text-opacity, 1))}.text-ubas-800{--tw-text-opacity: 1;color:rgb(95 33 182 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.decoration-solid{text-decoration-style:solid}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-60{opacity:.6}.\!shadow-button{--tw-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .15) inset !important;--tw-shadow-colored: inset 0px 2px 1px 0px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.\!shadow-none{--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.shadow-\[inset_0px_0px_0px_2\.5px_\#fff\]{--tw-shadow: inset 0px 0px 0px 2.5px #fff;--tw-shadow-colored: inset 0px 0px 0px 2.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-2{outline-width:2px}.outline-offset-4{outline-offset:4px}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.brightness-75{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_2px_8px_-2px_rgba\(38\,43\,43\,0\.20\)\]{--tw-drop-shadow: drop-shadow(0 2px 8px -2px rgba(38,43,43,.2));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-300,.duration-\[0\.3s\]{transition-duration:.3s}.ease-\[ease-out\]{transition-timing-function:ease-out}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.bg-overlay{background-color:#4c5857;opacity:.6}.hidden-scrolls::-webkit-scrollbar{display:none}.heading-xl{font-family:Rubik,sans-serif;font-weight:500;font-size:48px;line-height:60px;letter-spacing:-1.3px}.heading-lg{font-family:Rubik,sans-serif;font-weight:500;font-size:40px;line-height:48px;letter-spacing:-1px}.heading-md{font-family:Rubik,sans-serif;font-weight:500;font-size:32px;line-height:40px;letter-spacing:-1px}.heading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:28px;line-height:36px;letter-spacing:-.7px}.heading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:24px;line-height:32px;letter-spacing:-.7px}.subheading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.7px}.subheading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:16px;line-height:20px;letter-spacing:0px}.body-lg{font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-lg-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.body-md{font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-md-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.body-sm{font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-sm-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.body-xs{font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.body-xs-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.label-xs{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.label-xs-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.label-xs-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.label-sm{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.label-sm-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.label-sm-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.font-size-100{font-size:12px}.font-size-200{font-size:14px}.font-size-300{font-size:16px}.font-size-400{font-size:20px}.font-size-500{font-size:24px}.font-size-600{font-size:28px}.font-size-700{font-size:32px}.font-size-800{font-size:40px}.font-size-900{font-size:48px}.font-size-1000{font-size:56px}.line-height-100{line-height:12px}.line-height-200{line-height:14px}.line-height-300{line-height:16px}.line-height-400{line-height:20px}.line-height-500{line-height:24px}.line-height-600{line-height:32px}.line-height-700{line-height:36px}.line-height-800{line-height:40px}.line-height-900{line-height:48px}.line-height-1000{line-height:60px}.letter-spacing-densest{letter-spacing:-1.3px}.letter-spacing-denser{letter-spacing:-1px}.letter-spacing-dense{letter-spacing:-.7px}.letter-spacing-normal{letter-spacing:0px}.letter-spacing-wide{letter-spacing:.7px}.letter-spacing-wider{letter-spacing:1px}.letter-spacing-widest{letter-spacing:1.3px}.text-color-strong{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.text-color-supporting{--tw-text-opacity: 1;color:rgb(145 159 157 / var(--tw-text-opacity, 1))}.text-color-base{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.text-color-weak{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.text-color-disabled{--tw-text-opacity: 1;color:rgb(186 188 192 / var(--tw-text-opacity, 1))}.text-color-on-fill-disabled{--tw-text-opacity: 1;color:rgb(152 152 152 / var(--tw-text-opacity, 1))}.text-color-inverted-strong{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-color-inverted-disabled{--tw-text-opacity: 1;color:rgb(101 101 101 / var(--tw-text-opacity, 1))}.text-color-brand-base,.text-color-success-base{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.text-color-information-base{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.text-color-danger-base{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.text-color-pending-base{--tw-text-opacity: 1;color:rgb(187 104 2 / var(--tw-text-opacity, 1))}.text-color-caution-base{--tw-text-opacity: 1;color:rgb(204 92 2 / var(--tw-text-opacity, 1))}.background-color{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.background-color-surface{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.background-color-inverted{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}.background-color-base{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.background-color-single-active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.background-color-disabled{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.background-color-brand-base{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.background-color-brand-hover{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.background-color-brand-pressed{--tw-bg-opacity: 1;background-color:rgb(20 83 43 / var(--tw-bg-opacity, 1))}.background-color-brand-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.background-color-success-base{--tw-bg-opacity: 1;background-color:rgb(23 173 73 / var(--tw-bg-opacity, 1))}.background-color-success-hover{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.background-color-success-pressed{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.background-color-success-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.background-color-information-base{--tw-bg-opacity: 1;background-color:rgb(22 121 250 / var(--tw-bg-opacity, 1))}.background-color-information-weak{--tw-bg-opacity: 1;background-color:rgb(216 235 255 / var(--tw-bg-opacity, 1))}.background-color-pending-base{--tw-bg-opacity: 1;background-color:rgb(255 191 0 / var(--tw-bg-opacity, 1))}.background-color-pending-weak{--tw-bg-opacity: 1;background-color:rgb(255 251 197 / var(--tw-bg-opacity, 1))}.background-color-caution-base{--tw-bg-opacity: 1;background-color:rgb(255 151 10 / var(--tw-bg-opacity, 1))}.background-color-caution-weak{--tw-bg-opacity: 1;background-color:rgb(255 244 211 / var(--tw-bg-opacity, 1))}.background-color-danger-base{--tw-bg-opacity: 1;background-color:rgb(218 47 56 / var(--tw-bg-opacity, 1))}.background-color-danger-hover{--tw-bg-opacity: 1;background-color:rgb(182 31 39 / var(--tw-bg-opacity, 1))}.background-color-danger-pressed{--tw-bg-opacity: 1;background-color:rgb(151 29 35 / var(--tw-bg-opacity, 1))}.background-color-danger-weak{--tw-bg-opacity: 1;background-color:rgb(254 226 227 / var(--tw-bg-opacity, 1))}.switch-background-default{--tw-bg-opacity: 1;background-color:rgb(217 222 222 / var(--tw-bg-opacity, 1))}.switch-background-hover{--tw-bg-opacity: 1;background-color:rgb(184 193 192 / var(--tw-bg-opacity, 1))}.switch-background-pressed{--tw-bg-opacity: 1;background-color:rgb(145 159 157 / var(--tw-bg-opacity, 1))}.border-color-strong{--tw-border-opacity: 1;border-color:rgb(115 132 130 / var(--tw-border-opacity, 1))}.border-color-supporting{--tw-border-opacity: 1;border-color:rgb(145 159 157 / var(--tw-border-opacity, 1))}.\!border-color-base,.border-color-base{--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1))}.border-color-weak{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.\!border-color-disabled,.border-color-disabled{--tw-border-opacity: 1;border-color:rgb(152 152 152 / var(--tw-border-opacity, 1))}.\!border-color-brand-base,.border-color-brand-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.border-color-brand-hover{--tw-border-opacity: 1;border-color:rgb(22 101 49 / var(--tw-border-opacity, 1))}.\!border-color-success-base,.border-color-success-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.\!border-color-information-base,.border-color-information-base{--tw-border-opacity: 1;border-color:rgb(15 110 235 / var(--tw-border-opacity, 1))}.\!border-color-danger-base{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.\!border-color-pending-base{--tw-border-opacity: 1;border-color:rgb(187 104 2 / var(--tw-border-opacity, 1))}.\!border-color-caution-base{--tw-border-opacity: 1;border-color:rgb(204 92 2 / var(--tw-border-opacity, 1))}.drop-shadow{--tw-shadow: 0px 2px 8px -2px #262B2B33;--tw-shadow-colored: 0px 2px 8px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.placeholder\:text-mushroom-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.placeholder\:text-mushroom-300::placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.before\:transition-all:before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:duration-150:before{content:var(--tw-content);transition-duration:.15s}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:duration-150:after{content:var(--tw-content);transition-duration:.15s}.last\:rounded-b-xl:last-child{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.hover\:shadow-button-hover:hover{--tw-shadow: 0px -2px 1px 0px rgba(0, 0, 0, .1) inset;--tw-shadow-colored: inset 0px -2px 1px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:brightness-75:hover{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:background-color-hover:hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.hover\:background-color-brand-weak:hover{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.focus\:\!border-\[1\.5px\]:focus{border-width:1.5px!important}.focus\:\!border-kangkong-700:focus{--tw-border-opacity: 1 !important;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))!important}.focus\:\!border-tomato-600:focus{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.focus\:text-color-strong:focus{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.active\:scale-90:active{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:text-color-success-pressed:active{--tw-text-opacity: 1;color:rgb(20 83 43 / var(--tw-text-opacity, 1))}.active\:background-color-single-active:active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.active\:background-color-pressed:active{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.group:active .group-active\:scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (max-width: 575.98px){.sm\:left-\[16\%\]{left:16%}.sm\:left-\[24\%\]{left:24%}.sm\:pr-\[80\%\]{padding-right:80%}.sm\:pr-\[85\%\]{padding-right:85%}}.\[\&\>img\]\:mx-auto>img{margin-left:auto;margin-right:auto}.\[\&\>img\]\:h-\[24px\]>img{height:24px}.\[\&\>img\]\:h-\[36px\]>img{height:36px}.\[\&\>img\]\:w-\[24px\]>img{width:24px}.\[\&\>img\]\:w-\[36px\]>img{width:36px}.\[\&\>img\]\:rounded-full>img{border-radius:9999px}.\[\&\>img\]\:object-cover>img{-o-object-fit:cover;object-fit:cover}
package/dist/main.css.gz CHANGED
Binary file
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "design-system-next",
3
3
  "private": false,
4
- "version": "1.2.21",
4
+ "version": "1.2.22",
5
5
  "main": "./dist/design-system-next.js",
6
6
  "module": "./dist/design-system-next.js",
7
7
  "repository": {
package/src/App.vue CHANGED
@@ -36,16 +36,9 @@
36
36
  action-text="action"
37
37
  show-icon
38
38
  />
39
-
40
- <spr-snack
41
- class="mock-snack"
42
- text="Yehey"
43
- tone="danger"
44
- action-text="action"
45
- show-icon
46
- show-action
47
- />
48
-
39
+
40
+ <spr-snack class="mock-snack" text="Yehey" tone="danger" action-text="action" show-icon show-action />
41
+
49
42
  <spr-snack
50
43
  class="mock-snack"
51
44
  text="Two line with long action should look like this when implemented. This is more additional text for lines."
@@ -54,15 +47,8 @@
54
47
  show-icon
55
48
  show-action
56
49
  />
57
-
58
- <spr-snack
59
- class="mock-snack"
60
- text="Hello"
61
- tone="information"
62
- action-text="action"
63
- show-icon
64
- show-action
65
- />
50
+
51
+ <spr-snack class="mock-snack" text="Hello" tone="information" action-text="action" show-icon show-action />
66
52
  </div>
67
53
 
68
54
  <h1 class="heading-xl">askhdjahskjdhasjkhdjkashkjdas</h1>
@@ -72,6 +58,21 @@
72
58
  <h1 class="heading-xs">askhdjahskjdhasjkhdjkashkjdas</h1>
73
59
 
74
60
  <h1 v-for="i in 100" :key="i">Sample kingkong {{ i }}</h1>
61
+
62
+ <div class="space-y-4 bg-white-50 p-size-spacing-sm">
63
+ <spr-table action :headers="headers" :data-table="data">
64
+ <div>
65
+ <div class="text-color-strong font-size-400 font-weight-medium">Table Name</div>
66
+ <div>table description</div>
67
+ </div>
68
+ <template #action="{ row }">
69
+ <spr-lozenge :label="row.status.title" tone="success" />
70
+ </template>
71
+ <template #action-name> Status </template>
72
+ </spr-table>
73
+
74
+ <spr-table :headers="headers" :data-table="data" />
75
+ </div>
75
76
  </template>
76
77
 
77
78
  <script setup>
@@ -81,27 +82,29 @@ import SprSidenav from './components/sidenav/sidenav.vue';
81
82
  import SprButton from './components/button/button.vue';
82
83
  import SprSnack from './components/snackbar/snack/snack.vue';
83
84
  import SprSnackbar from './components/snackbar/snackbar.vue';
85
+ import SprTable from '@/components/table/table.vue';
86
+ import SprLozenge from '@/components/lozenge/lozenge.vue';
84
87
 
85
88
  const snackbar = ref(null);
86
89
  const successSnackbar = () => {
87
90
  snackbar.value.showSuccess({
88
- text: "Yehey!",
91
+ text: 'Yehey!',
89
92
  showIcon: true,
90
- actionText: "close",
93
+ actionText: 'close',
91
94
  showAction: true,
92
95
  });
93
- }
96
+ };
94
97
 
95
98
  const errorSnackbar = () => {
96
99
  snackbar.value.showCaution({
97
- text: "Error!",
98
- actionText: "action",
100
+ text: 'Error!',
101
+ actionText: 'action',
99
102
  showAction: true,
100
103
  showIcon: true,
101
104
  duration: 8000,
102
- action: () => console.log("Error action clicked"),
105
+ action: () => console.log('Error action clicked'),
103
106
  });
104
- }
107
+ };
105
108
 
106
109
  const activeNav = ref({
107
110
  parentNav: 'Home',
@@ -457,6 +460,209 @@ const userMenu = ref({
457
460
  },
458
461
  ],
459
462
  });
463
+
464
+ const headers = ref([
465
+ { field: 'name', name: 'Role Name', sort: true, size: 'md', hasAvatar: true, hasSubtext: true },
466
+ { field: 'lastUpdate', name: 'Last Update', sort: true, size: 'xl', hasAvatar: false, hasSubtext: false },
467
+ ]);
468
+
469
+ const data = ref([
470
+ {
471
+ name: {
472
+ title: 'Shift',
473
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
474
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
475
+ },
476
+ lastUpdate: {
477
+ title: 'Nov 30, 2025',
478
+ subtext: 'Lorem ipsum dolor ',
479
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
480
+ },
481
+ status: {
482
+ title: 'Success',
483
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
484
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
485
+ },
486
+ status1: {
487
+ title: 'sdsj',
488
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
489
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
490
+ },
491
+ },
492
+ {
493
+ name: {
494
+ title: 'Shift',
495
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
496
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
497
+ },
498
+ lastUpdate: {
499
+ title: 'Nov 30, 2025',
500
+ subtext: 'Lorem ipsum dolor ',
501
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
502
+ },
503
+ status: {
504
+ title: 'Success',
505
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
506
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
507
+ },
508
+ },
509
+ {
510
+ name: {
511
+ title: 'Shift',
512
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
513
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
514
+ },
515
+ lastUpdate: {
516
+ title: 'Nov 30, 2025',
517
+ subtext: 'Lorem ipsum dolor ',
518
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
519
+ },
520
+ status: {
521
+ title: 'Success',
522
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
523
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
524
+ },
525
+ status1: {
526
+ title: 'sdsj',
527
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
528
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
529
+ },
530
+ },
531
+ {
532
+ name: {
533
+ title: 'Shift',
534
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
535
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
536
+ },
537
+ lastUpdate: {
538
+ title: 'Nov 30, 2025',
539
+ subtext: 'Lorem ipsum dolor ',
540
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
541
+ },
542
+ status: {
543
+ title: 'Success',
544
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
545
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
546
+ },
547
+ },
548
+ {
549
+ name: {
550
+ title: 'Shift',
551
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
552
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
553
+ },
554
+ lastUpdate: {
555
+ title: 'Nov 30, 2025',
556
+ subtext: 'Lorem ipsum dolor ',
557
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
558
+ },
559
+ status: {
560
+ title: 'Success',
561
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
562
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
563
+ },
564
+ status1: {
565
+ title: 'sdsj',
566
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
567
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
568
+ },
569
+ },
570
+ {
571
+ name: {
572
+ title: 'Shift',
573
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
574
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
575
+ },
576
+ lastUpdate: {
577
+ title: 'Nov 30, 2025',
578
+ subtext: 'Lorem ipsum dolor ',
579
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
580
+ },
581
+ status: {
582
+ title: 'Success',
583
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
584
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
585
+ },
586
+ },
587
+ {
588
+ name: {
589
+ title: 'Shift',
590
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
591
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
592
+ },
593
+ lastUpdate: {
594
+ title: 'Nov 30, 2025',
595
+ subtext: 'Lorem ipsum dolor ',
596
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
597
+ },
598
+ status: {
599
+ title: 'Success',
600
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
601
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
602
+ },
603
+ status1: {
604
+ title: 'sdsj',
605
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
606
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
607
+ },
608
+ },
609
+ {
610
+ name: {
611
+ title: 'Shift',
612
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
613
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
614
+ },
615
+ lastUpdate: {
616
+ title: 'Nov 30, 2025',
617
+ subtext: 'Lorem ipsum dolor ',
618
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
619
+ },
620
+ status: {
621
+ title: 'Success',
622
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
623
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
624
+ },
625
+ },
626
+ {
627
+ name: {
628
+ title: 'Shift',
629
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
630
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
631
+ },
632
+ lastUpdate: {
633
+ title: 'Nov 30, 2025',
634
+ subtext: 'Lorem ipsum dolor ',
635
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
636
+ },
637
+ status: {
638
+ title: 'Success',
639
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
640
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
641
+ },
642
+ status1: {
643
+ title: 'sdsj',
644
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
645
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
646
+ },
647
+ },
648
+ {
649
+ name: {
650
+ title: 'Shift',
651
+ subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
652
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
653
+ },
654
+ lastUpdate: {
655
+ title: 'Nov 30, 2025',
656
+ subtext: 'Lorem ipsum dolor ',
657
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
658
+ },
659
+ status: {
660
+ title: 'Success',
661
+ subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
662
+ image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
663
+ },
664
+ },
665
+ ]);
460
666
  </script>
461
667
 
462
668
  <style lang="scss">
package/src/assets/styles/tailwind.css CHANGED
@@ -137,6 +137,12 @@
137
137
  }
138
138
  }
139
139
  /* #endregion - Dropdown */
140
+
141
+ /* #region - Avatar */
142
+ .avatar__slot img {
143
+ @apply h-full w-full object-cover;
144
+ }
145
+ /* #endregion - Avatar */
140
146
  }
141
147
 
142
148
  @layer utilities {
package/src/components/avatar/avatar.ts CHANGED
@@ -3,7 +3,8 @@ import type { PropType, ExtractPropTypes } from 'vue';
3
3
  export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
4
4
 
5
5
  const AVATAR_SIZE = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const;
6
-
6
+ const AVATAR_PRIMARY = ['primary', 'secondary'] as const;
7
+ const AVATAR_STATUS = ['danger', 'disabled', 'information', 'brand'] as const;
7
8
  export const avatarPropTypes = {
8
9
  src: {
9
10
  type: String,
@@ -12,11 +13,11 @@ export const avatarPropTypes = {
12
13
  type: String,
13
14
  default: 'Avatar',
14
15
  },
15
- badge: {
16
+ notification: {
16
17
  type: Boolean,
17
18
  default: false,
18
19
  },
19
- online: {
20
+ badge: {
20
21
  type: Boolean,
21
22
  default: false,
22
23
  },
@@ -33,6 +34,16 @@ export const avatarPropTypes = {
33
34
  type: String,
34
35
  default: '',
35
36
  },
37
+ color: {
38
+ type: String,
39
+ validator: (value: (typeof AVATAR_PRIMARY)[number]) => AVATAR_PRIMARY.includes(value),
40
+ default: 'primary',
41
+ },
42
+ status: {
43
+ type: String,
44
+ validator: (value: (typeof AVATAR_STATUS)[number]) => AVATAR_STATUS.includes(value),
45
+ default: 'brand',
46
+ },
36
47
  };
37
48
 
38
49
  export type AvatarPropTypes = ExtractPropTypes<typeof avatarPropTypes>;
package/src/components/avatar/avatar.vue CHANGED
@@ -1,19 +1,19 @@
1
1
  <template>
2
2
  <div :class="avatarClassses">
3
3
  <template v-if="!initial">
4
- <img v-if="!$slots.default" :src="src" :alt="alt" :class="avatarImageClassses" />
5
- <div v-else :class="avatarImageClassses">
4
+ <img v-if="!$slots.default && src" :src="src" :alt="alt" :class="avatarImageClassses" />
5
+ <div v-else :class="[avatarImageClassses, 'avatar__slot border-color-weak border border-solid']">
6
6
  <slot />
7
7
  </div>
8
8
  </template>
9
9
  <div v-else :class="initialClassses">
10
10
  {{ initial }}
11
11
  </div>
12
- <span v-if="badge" :class="avatarNotificationClassses">
12
+ <span v-if="notification" :class="avatarNotificationClassses">
13
13
  <spr-badge :text="badgeText" variant="danger" :size="getAvatarSize.notif" />
14
14
  </span>
15
- <span v-if="online" :class="onlineNotificationClassses">
16
- <spr-badge text="" variant="brand" :size="getAvatarSize.online" />
15
+ <span v-if="badge" :class="onlineNotificationClassses">
16
+ <spr-badge text="" :variant="status" :size="getAvatarSize.badge" />
17
17
  </span>
18
18
  </div>
19
19
  </template>