design-system-next 1.0.21

package/dist/main.css

@@ -0,0 +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";.lozenge[data-v-1688fd0a]{display:flex;flex-wrap:wrap;border-radius:.375rem}.lozenge .pending[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(187 104 2 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 251 197 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(187 104 2 / var(--tw-border-opacity, 1))}.lozenge .information[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(216 235 255 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(15 110 235 / var(--tw-border-opacity, 1))}.lozenge .success[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.lozenge .neutral[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1))}.lozenge .danger[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(254 226 227 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.lozenge .caution[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(204 92 2 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 244 211 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(204 92 2 / var(--tw-border-opacity, 1))}.lozenge .plain[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1));--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))}.lozenge-fill[data-v-1688fd0a]{display:flex;flex-wrap:wrap}.lozenge-fill .pending[data-v-1688fd0a]{border-style:none;--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 191 0 / var(--tw-bg-opacity, 1))}.lozenge-fill .information[data-v-1688fd0a]{border-style:none;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(22 121 250 / var(--tw-bg-opacity, 1))}.lozenge-fill .success[data-v-1688fd0a]{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(23 173 73 / var(--tw-bg-opacity, 1))}.lozenge-fill .danger[data-v-1688fd0a]{border-style:none;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(218 47 56 / var(--tw-bg-opacity, 1))}.lozenge-fill .neutral[data-v-1688fd0a]{border-style:none;--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.lozenge-fill .caution[data-v-1688fd0a]{border-style:none;--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 151 10 / var(--tw-bg-opacity, 1))}.lozenge-fill .plain[data-v-1688fd0a]{border-style:none;--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.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}.switch[data-v-ea8a1df2]{display:flex;align-items:center;width:-moz-fit-content;width:fit-content}.switch_left-text[data-v-ea8a1df2]{margin-right:8px}.switch_right-text[data-v-ea8a1df2]{margin-left:8px}.switch_wrapper[data-v-ea8a1df2]{position:relative;display:inline;height:24px}.switch_input[data-v-ea8a1df2]{position:absolute;top:0;left:0;opacity:0;z-index:1;width:48px;height:24px;margin:0}.switch_input:checked~.switch_mark[data-v-ea8a1df2]:before{left:28px}.switch_mark[data-v-ea8a1df2]{display:inline-block;position:relative;box-sizing:border-box;border-radius:40px;width:48px;height:24px;padding:4px}.switch_mark[data-v-ea8a1df2]:before,.switch_mark[data-v-ea8a1df2]:after{content:"";position:absolute}.switch_mark[data-v-ea8a1df2]:before{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));top:4px;left:4px;width:16px;height:16px;border-radius:50%}*,: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))}#sidenav-menu-wrapper,#sidenav-submenu-wrapper{max-height:500px;width:215px;overflow-y:auto;overflow-x:hidden;border-radius:12px;--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))}#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner{overflow:hidden}#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner{border-radius:0}#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner{border-style:none}#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner{background-color:transparent}#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-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)}#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{transition-duration:.3s}#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{transition-timing-function:cubic-bezier(0,0,.2,1)}#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{transition:all .8s cubic-bezier(1,.5,.8,1)}#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{--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))}#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{opacity:0}#sidenav-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-sub-submenu-wrapper{display:none}#default-tooltip .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#default-tooltip .v-popper__wrapper .v-popper__inner{opacity:1}#default-tooltip .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#default-tooltip .v-popper__wrapper .v-popper__inner{font-size:12px}#default-tooltip .v-popper__wrapper .v-popper__inner{line-height:12px}#default-tooltip .v-popper__wrapper .v-popper__inner{letter-spacing:.7px}#default-tooltip .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#default-tooltip .v-popper__wrapper .v-popper__arrow-outer{display:none}.tw-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}.tw-fixed{position:fixed}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw--bottom-1{bottom:-.25rem}.tw--bottom-2{bottom:-.5rem}.tw--bottom-3{bottom:-.75rem}.tw--right-1{right:-.25rem}.tw--right-2{right:-.5rem}.tw--top-1{top:-.25rem}.tw--top-2{top:-.5rem}.tw--top-3{top:-.75rem}.tw-bottom-0{bottom:0}.tw-left-0{left:0}.tw-right-1{right:.25rem}.tw-top-0{top:0}.tw-z-\[1\]{z-index:1}.\!tw-m-0{margin:0!important}.tw-m-0{margin:0}.tw-m-size-spacing-xs{margin:var(--size-300)}.tw-mx-auto{margin-left:auto;margin-right:auto}.\!tw-mb-0{margin-bottom:0!important}.\!tw-mt-\[12px\]{margin-top:12px!important}.\!tw-mt-\[6px\]{margin-top:6px!important}.\!tw-mt-\[8px\]{margin-top:8px!important}.tw-mb-2{margin-bottom:.5rem}.tw-mb-size-spacing-md{margin-bottom:var(--size-500)}.tw-ml-\[60px\]{margin-left:60px}.tw-mr-2{margin-right:.5rem}.tw-mt-10{margin-top:2.5rem}.tw-mt-\[16px\]{margin-top:16px}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-grid{display:grid}.tw-h-3{height:.75rem}.tw-h-4{height:1rem}.tw-h-\[1\.25em\]{height:1.25em}.tw-h-\[10px\]{height:10px}.tw-h-\[16px\]{height:16px}.tw-h-\[20px\]{height:20px}.tw-h-\[2px\]{height:2px}.tw-h-\[32px\]{height:32px}.tw-h-\[40em\]{height:40em}.tw-h-\[52px\]{height:52px}.tw-h-full{height:100%}.tw-w-3{width:.75rem}.tw-w-4{width:1rem}.tw-w-\[1\.25em\]{width:1.25em}.tw-w-\[16px\]{width:16px}.tw-w-\[2px\]{width:2px}.tw-w-\[50vw\]{width:50vw}.tw-w-\[80px\]{width:80px}.tw-w-auto{width:auto}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-min-w-\[10px\]{min-width:10px}.tw-min-w-\[16px\]{min-width:16px}.tw-min-w-\[180px\]{min-width:180px}.tw-min-w-\[18em\]{min-width:18em}.tw-min-w-\[20px\]{min-width:20px}.tw-min-w-\[56px\]{min-width:56px}.tw-max-w-\[calc\(100\%-60px\)\]{max-width:calc(100% - 60px)}.tw-max-w-lg{max-width:1320px}.tw-max-w-md{max-width:1000px}.tw-max-w-sm{max-width:640px}.tw-flex-1{flex:1 1 0%}.-tw-rotate-90{--tw-rotate: -90deg;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))}.tw-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))}.tw-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))}.tw-cursor-default{cursor:default}.tw-cursor-not-allowed{cursor:not-allowed}.tw-cursor-pointer{cursor:pointer}.tw-grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-items-end{align-items:flex-end}.tw-items-center{align-items:center}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-2{gap:.5rem}.tw-gap-4{gap:1rem}.tw-gap-\[8px\]{gap:8px}.tw-gap-size-spacing-6xs{gap:var(--size-50)}.tw-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)))}.tw-overflow-auto{overflow:auto}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-overflow-x-hidden{overflow-x:hidden}.tw-rounded-\[32px\]{border-radius:32px}.tw-rounded-\[8px\]{border-radius:8px}.tw-rounded-border-radius-2xs{border-radius:var(--size-50)}.tw-rounded-border-radius-full{border-radius:999px}.tw-rounded-border-radius-lg{border-radius:var(--size-250)}.tw-rounded-border-radius-md{border-radius:var(--size-200)}.tw-rounded-border-radius-sm{border-radius:var(--size-150)}.tw-rounded-border-radius-xl{border-radius:var(--size-300)}.tw-rounded-border-radius-xs{border-radius:var(--size-100)}.tw-rounded-full{border-radius:9999px}.tw-rounded-md{border-radius:.375rem}.tw-border{border-width:1px}.tw-border-2{border-width:2px}.tw-border-\[1\.5px\]{border-width:1.5px}.tw-border-x-0{border-left-width:0px;border-right-width:0px}.tw-border-b{border-bottom-width:1px}.tw-border-b-0{border-bottom-width:0px}.tw-border-l-0{border-left-width:0px}.tw-border-r{border-right-width:1px}.tw-border-t-0{border-top-width:0px}.tw-border-solid{border-style:solid}.tw-border-transparent{border-color:transparent}.tw-border-white-50{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.tw-bg-mushroom-100{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.tw-bg-white-50{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.tw-p-1{padding:.25rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-\[8px\]{padding:8px}.tw-p-size-spacing-5xs{padding:var(--size-100)}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-\[12px\]{padding-left:12px;padding-right:12px}.tw-px-\[4px\]{padding-left:4px;padding-right:4px}.tw-px-\[8px\]{padding-left:8px;padding-right:8px}.tw-px-size-spacing-4xs{padding-left:var(--size-150);padding-right:var(--size-150)}.tw-py-4{padding-top:1rem;padding-bottom:1rem}.tw-py-\[12px\]{padding-top:12px;padding-bottom:12px}.tw-py-\[6px\]{padding-top:6px;padding-bottom:6px}.tw-pb-\[16px\]{padding-bottom:16px}.tw-pt-\[16px\]{padding-top:16px}.tw-text-center{text-align:center}.tw-align-middle{vertical-align:middle}.tw-font-code{font-family:Roboto Mono,sans-serif}.tw-font-inbound{font-family:Roboto,sans-serif}.tw-font-main{font-family:Rubik,sans-serif}.tw-text-\[28px\]{font-size:28px}.tw-text-xs{font-size:.75rem;line-height:1rem}.tw-font-black{font-weight:900}.tw-font-bold{font-weight:700}.tw-font-extrabold{font-weight:800}.tw-font-extralight{font-weight:200}.tw-font-light{font-weight:300}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-font-semibold{font-weight:600}.tw-font-thin{font-weight:100}.tw-uppercase{text-transform:uppercase}.tw-leading-100{line-height:12px}.tw-leading-300{line-height:16px}.tw-text-mushroom-950{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.tw-decoration-solid{text-decoration-style:solid}.tw-opacity-60{opacity:.6}.tw-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)}.tw-shadow-button{--tw-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .15) 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)}.tw-shadow-button-active{--tw-shadow: 0px 0px 0px 2px #394141;--tw-shadow-colored: 0px 0px 0px 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)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-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}.tw-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}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-duration-150{transition-duration:.15s}.tw-duration-300{transition-duration:.3s}.tw-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-hidden-scrolls::-webkit-scrollbar{display:none}.tw-heading-xl{font-family:Rubik,sans-serif;font-weight:500;font-size:48px;line-height:60px;letter-spacing:-1.3px}.tw-heading-lg{font-family:Rubik,sans-serif;font-weight:500;font-size:40px;line-height:48px;letter-spacing:-1px}.tw-heading-md{font-family:Rubik,sans-serif;font-weight:500;font-size:32px;line-height:40px;letter-spacing:-1px}.tw-heading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:28px;line-height:36px;letter-spacing:-.7px}.tw-heading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:24px;line-height:32px;letter-spacing:-.7px}.tw-subheading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.7px}.tw-subheading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:16px;line-height:20px;letter-spacing:0px}.tw-body-lg{font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.tw-body-lg-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.tw-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}.tw-body-lg-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.tw-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}.tw-body-md{font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.tw-body-md-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.tw-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}.tw-body-md-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.tw-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}.tw-body-sm{font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.tw-body-sm-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.tw-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}.tw-body-sm-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.tw-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}.tw-body-xs{font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.tw-body-xs-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.tw-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}.tw-body-xs-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.tw-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}.tw-label-sm{font-family:Rubik,sans-serif;font-size:14px;line-height:14px;letter-spacing:.7px}.tw-label-sm-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:14px;line-height:14px;letter-spacing:.7px}.tw-label-sm-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:14px;line-height:14px;letter-spacing:.7px}.tw-label-xs{font-family:Rubik,sans-serif;font-size:12px;line-height:12px;letter-spacing:.7px}.tw-label-xs-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:12px;line-height:12px;letter-spacing:.7px}.tw-label-xs-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:12px;line-height:12px;letter-spacing:.7px}.tw-font-size-100{font-size:12px}.tw-font-size-200{font-size:14px}.tw-font-size-300{font-size:16px}.tw-font-size-400{font-size:20px}.tw-font-size-500{font-size:24px}.tw-font-size-600{font-size:28px}.tw-font-size-700{font-size:32px}.tw-font-size-800{font-size:40px}.tw-font-size-900{font-size:48px}.tw-font-size-1000{font-size:56px}.tw-line-height-100{line-height:12px}.tw-line-height-200{line-height:14px}.tw-line-height-300{line-height:16px}.tw-line-height-400{line-height:20px}.tw-line-height-500{line-height:24px}.tw-line-height-600{line-height:32px}.tw-line-height-700{line-height:36px}.tw-line-height-800{line-height:40px}.tw-line-height-900{line-height:48px}.tw-line-height-1000{line-height:60px}.tw-letter-spacing-densest{letter-spacing:-1.3px}.tw-letter-spacing-denser{letter-spacing:-1px}.tw-letter-spacing-dense{letter-spacing:-.7px}.tw-letter-spacing-normal{letter-spacing:0px}.tw-letter-spacing-wide{letter-spacing:.7px}.tw-letter-spacing-wider{letter-spacing:1px}.tw-letter-spacing-widest{letter-spacing:1.3px}.tw-text-color-strong{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.tw-text-color-base{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.tw-text-color-disabled{--tw-text-opacity: 1;color:rgb(186 188 192 / var(--tw-text-opacity, 1))}.tw-text-color-on-fill-disabled{--tw-text-opacity: 1;color:rgb(152 152 152 / var(--tw-text-opacity, 1))}.tw-text-color-inverted-strong{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.tw-text-color-brand-base,.tw-text-color-success-base{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.tw-text-color-information-base{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.tw-text-color-danger-base{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.tw-text-color-pending-base{--tw-text-opacity: 1;color:rgb(187 104 2 / var(--tw-text-opacity, 1))}.tw-text-color-caution-base{--tw-text-opacity: 1;color:rgb(204 92 2 / var(--tw-text-opacity, 1))}.tw-background-color{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.tw-background-color-base{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.tw-background-color-single-active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.tw-background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.tw-background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.tw-background-color-disabled{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.tw-background-color-brand-base{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.tw-background-color-brand-pressed{--tw-bg-opacity: 1;background-color:rgb(20 83 43 / var(--tw-bg-opacity, 1))}.tw-background-color-success-base{--tw-bg-opacity: 1;background-color:rgb(23 173 73 / var(--tw-bg-opacity, 1))}.tw-background-color-success-hover{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.tw-background-color-success-pressed{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.tw-background-color-success-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.tw-background-color-information-base{--tw-bg-opacity: 1;background-color:rgb(22 121 250 / var(--tw-bg-opacity, 1))}.tw-background-color-information-weak{--tw-bg-opacity: 1;background-color:rgb(216 235 255 / var(--tw-bg-opacity, 1))}.tw-background-color-pending-base{--tw-bg-opacity: 1;background-color:rgb(255 191 0 / var(--tw-bg-opacity, 1))}.tw-background-color-pending-weak{--tw-bg-opacity: 1;background-color:rgb(255 251 197 / var(--tw-bg-opacity, 1))}.tw-background-color-caution-base{--tw-bg-opacity: 1;background-color:rgb(255 151 10 / var(--tw-bg-opacity, 1))}.tw-background-color-caution-weak{--tw-bg-opacity: 1;background-color:rgb(255 244 211 / var(--tw-bg-opacity, 1))}.tw-background-color-danger-base{--tw-bg-opacity: 1;background-color:rgb(218 47 56 / var(--tw-bg-opacity, 1))}.tw-background-color-danger-hover{--tw-bg-opacity: 1;background-color:rgb(182 31 39 / var(--tw-bg-opacity, 1))}.tw-background-color-danger-pressed{--tw-bg-opacity: 1;background-color:rgb(151 29 35 / var(--tw-bg-opacity, 1))}.tw-background-color-danger-weak{--tw-bg-opacity: 1;background-color:rgb(254 226 227 / var(--tw-bg-opacity, 1))}.tw-switch-background-default{--tw-bg-opacity: 1;background-color:rgb(217 222 222 / var(--tw-bg-opacity, 1))}.tw-switch-background-hover{--tw-bg-opacity: 1;background-color:rgb(184 193 192 / var(--tw-bg-opacity, 1))}.tw-switch-background-pressed{--tw-bg-opacity: 1;background-color:rgb(145 159 157 / var(--tw-bg-opacity, 1))}.tw-border-color-supporting{--tw-border-opacity: 1;border-color:rgb(145 159 157 / var(--tw-border-opacity, 1))}.tw-border-color-base{--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1))}.tw-border-color-weak{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.tw-border-color-disabled{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.tw-border-color-brand-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.tw-border-color-information-base{--tw-border-opacity: 1;border-color:rgb(15 110 235 / var(--tw-border-opacity, 1))}.tw-border-color-danger-base{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.before\:tw-transition-all:before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:tw-duration-150:before{content:var(--tw-content);transition-duration:.15s}.after\:tw-transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:tw-duration-150:after{content:var(--tw-content);transition-duration:.15s}.last\:tw-rounded-b-\[12px\]:last-child{border-bottom-right-radius:12px;border-bottom-left-radius:12px}.hover\:-tw-rotate-90:hover{--tw-rotate: -90deg;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))}.hover\:tw-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\:tw-text-color-success-hover:hover{--tw-text-opacity: 1;color:rgb(22 101 49 / var(--tw-text-opacity, 1))}.hover\:tw-background-color-hover:hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.active\:tw-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\:tw-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\:tw-text-color-success-pressed:active{--tw-text-opacity: 1;color:rgb(20 83 43 / var(--tw-text-opacity, 1))}.active\:tw-background-color-single-active:active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.active\:tw-background-color-pressed:active{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.\[\&\>img\]\:tw-mx-auto>img{margin-left:auto;margin-right:auto}.\[\&\>img\]\:tw-h-\[24px\]>img{height:24px}.\[\&\>img\]\:tw-w-\[24px\]>img{width:24px}.\[\&\>img\]\:tw-rounded-full>img{border-radius:9999px}

package/dist/main.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+export declare const setPrefix: (prefix: string) => void;
+export declare const getPrefix: () => string;
+declare const _default: {
+    install: (app: App, options?: {
+        prefix?: string;
+    }) => void;
+};
+export default _default;

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "design-system-next",
+  "private": false,
+  "version": "1.0.21",
+  "main": "./dist/design-system-next.js",
+  "module": "./dist/design-system-next.js",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/sproutphil/Sprout%20Design%20System/_git/Sprout%20Design%20System%20Next"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/design-system-next.js",
+      "require": "./dist/design-system-next.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "types": "vue-tsc",
+    "preview": "vite preview",
+    "lint:script": "eslint \"**/*.{js,ts,vue}\"",
+    "lint:style": "stylelint \"**/*.{vue,css}\"",
+    "fix:style": "stylelint --fix \"**/*.{vue,css}\"",
+    "lint": "npm run lint:script && npm run lint:style",
+    "prepublishOnly": "npm run build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs",
+    "docs:preview": "vitepress preview docs",
+    "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
+  },
+  "dependencies": {
+    "@eslint/js": "^9.16.0",
+    "@iconify-json/ph": "^1.2.1",
+    "classnames": "^2.5.1",
+    "floating-vue": "^5.2.2",
+    "stylelint": "^16.11.0",
+    "stylelint-config-recess-order": "^5.1.1",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "typescript-eslint": "^8.17.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-sass": "^0.1.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@stylistic/stylelint-plugin": "^3.1.1",
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "rollup-plugin-gzip": "^4.0.1",
+    "sass-embedded": "^1.82.0",
+    "tailwindcss": "^3.4.16",
+    "typescript": "~5.6.3",
+    "unplugin-icons": "^0.21.0",
+    "unplugin-vue-components": "^0.27.5",
+    "vite": "^6.0.2",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.3",
+    "vitepress": "^1.5.0",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
+  }
+}

package/src/App.vue

@@ -0,0 +1,179 @@
+<template>
+  <spr-sidenav has-quick-actions has-search :active-nav="activeNav" :nav-links="navLinks" @route-push="handleRoutePush">
+    <template #logo-image>
+      <img src="https://t3-fullsync.hrtest.ph//Images/2023/Sprout-New-Logo-Black-v2.svg" alt="logo" />
+    </template>
+
+    <template #avatar-image>
+      <img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="avatar" />
+    </template>
+  </spr-sidenav>
+
+  <h1 class="tw-heading-xl">askhdjahskjdhasjkhdjkashkjdas</h1>
+  <h1 class="tw-heading-lg">askhdjahskjdhasjkhdjkashkjdas</h1>
+  <h1 class="tw-heading-md">askhdjahskjdhasjkhdjkashkjdas</h1>
+  <h1 class="tw-heading-sm">askhdjahskjdhasjkhdjkashkjdas</h1>
+  <h1 class="tw-heading-xs">askhdjahskjdhasjkhdjkashkjdas</h1>
+
+  <h1 v-for="i in 100" :key="i">Sample kingkong {{ i }}</h1>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import SprSidenav from './components/sidenav/sidenav.vue';
+
+import IconHouseSimple from '~icons/ph/house-simple';
+import IconUsersThree from '~icons/ph/users-three';
+import IconLeaf from '~icons/ph/leaf';
+import IconCurrencyRub from '~icons/ph/currency-rub';
+import IconWallet from '~icons/ph/wallet';
+
+const activeNav = ref({
+  parentNav: 'Home',
+  menu: 'Dashboard',
+  submenu: 'Home 4',
+});
+
+const navLinks = ref([
+  {
+    parentLinks: [
+      {
+        title: 'Home',
+        icon: IconHouseSimple,
+        menuLinks: [
+          {
+            title: 'Dashboard',
+            submenuLinks: [
+              {
+                title: 'Home 1',
+                redirect: {
+                  openInNewTab: false,
+                  isAbsoluteURL: true,
+                  link: 'https://www.google.com/',
+                },
+              },
+              {
+                title: 'Home 2',
+                redirect: {
+                  openInNewTab: false,
+                  isAbsoluteURL: false,
+                  link: '/',
+                },
+              },
+            ],
+          },
+          {
+            title: 'Dashboard 2',
+            redirect: {
+              openInNewTab: false,
+              isAbsoluteURL: false,
+              link: '/',
+            },
+          },
+        ],
+      },
+      {
+        title: 'Employees',
+        icon: IconUsersThree,
+        redirect: {
+          openInNewTab: false,
+          isAbsoluteURL: false,
+          link: '/',
+        },
+      },
+    ],
+  },
+  {
+    parentLinks: [
+      {
+        title: 'Payroll',
+        icon: IconLeaf,
+        menuLinks: [
+          {
+            title: 'Payroll Runs',
+            redirect: {
+              openInNewTab: false,
+              isAbsoluteURL: false,
+              link: '/',
+            },
+          },
+          {
+            title: 'Reports',
+            submenuLinks: [
+              {
+                title: 'Payroll',
+                redirect: {
+                  openInNewTab: false,
+                  isAbsoluteURL: false,
+                  link: '/',
+                },
+              },
+              {
+                title: 'SSS',
+                redirect: {
+                  openInNewTab: false,
+                  isAbsoluteURL: false,
+                  link: '/',
+                },
+              },
+              {
+                title: 'PHILHEALTH',
+                redirect: {
+                  openInNewTab: false,
+                  isAbsoluteURL: false,
+                  link: '/',
+                },
+              },
+            ],
+          },
+          {
+            title: 'Setup',
+            redirect: {
+              openInNewTab: false,
+              isAbsoluteURL: false,
+              link: '/',
+            },
+          },
+          {
+            title: 'Employees',
+            redirect: {
+              openInNewTab: false,
+              isAbsoluteURL: false,
+              link: '/',
+            },
+          },
+        ],
+      },
+      {
+        title: 'Money',
+        icon: IconCurrencyRub,
+        redirect: {
+          openInNewTab: false,
+          isAbsoluteURL: false,
+          link: '/',
+        },
+      },
+      {
+        title: 'Car',
+        icon: IconWallet,
+        redirect: {
+          openInNewTab: false,
+          isAbsoluteURL: false,
+          link: '/',
+        },
+      },
+    ],
+  },
+]);
+
+const handleRoutePush = (route) => {
+  console.log(route);
+};
+</script>
+
+<style>
+body {
+  @apply tw-m-0 tw-bg-mushroom-100 tw-font-main;
+}
+</style>

package/src/assets/scripts/borderRadius.ts

@@ -0,0 +1,15 @@
+type BorderRadius = {
+  [key: string]: string;
+};
+
+const borderRadius: BorderRadius = {
+  'border-radius-2xs': 'var(--size-50)',
+  'border-radius-xs': 'var(--size-100)',
+  'border-radius-sm': 'var(--size-150)',
+  'border-radius-md': 'var(--size-200)',
+  'border-radius-lg': 'var(--size-250)',
+  'border-radius-xl': 'var(--size-300)',
+  'border-radius-full': '999px',
+};
+
+export default borderRadius;

package/src/assets/scripts/colors.ts

@@ -0,0 +1,134 @@
+/*
+  Toge Design System v3.0 - Color Scheme
+  (https://www.figma.com/design/tlGkN8uKvxVIHB1FgYRIaF/%F0%9F%8C%B1-Toge-Styles-3.0?node-id=2281-4697&node-type=section&m=dev)
+*/
+
+type ColorShadesTypes = {
+  [key: number]: string;
+};
+
+type ColorPaletteTypes = {
+  [colorName: string]: ColorShadesTypes;
+};
+
+const colorScheme: ColorPaletteTypes = {
+  white: {
+    50: '#FFFFFF',
+    100: '#F1F2F3',
+    200: '#DBDBDD',
+    300: '#BABCC0',
+    400: '#989898',
+    500: '#7C7C7C',
+    600: '#656565',
+    700: '#525252',
+    800: '#464646',
+    900: '#3D3D3D',
+    950: '#292929',
+  },
+  mushroom: {
+    50: '#EFF1F1',
+    100: '#E6EAEA',
+    200: '#D9DEDE',
+    300: '#B8C1C0',
+    400: '#919F9D',
+    500: '#738482',
+    600: '#5D6C6B',
+    700: '#4C5857',
+    800: '#414B4B',
+    900: '#394141',
+    950: '#262B2B',
+  },
+  tomato: {
+    50: '#FEF2F3',
+    100: '#FEE2E3',
+    200: '#FDCBCE',
+    300: '#FBA6AA',
+    400: '#F6737A',
+    500: '#EC4750',
+    600: '#DA2F38',
+    700: '#B61F27',
+    800: '#971D23',
+    900: '#7D1F24',
+    950: '#440B0E',
+  },
+  carrot: {
+    50: '#FFFAEC',
+    100: '#FFF4D3',
+    200: '#FFE5A5',
+    300: '#FFD16D',
+    400: '#FFB132',
+    500: '#FF970A',
+    600: '#FF7F00',
+    700: '#CC5C02',
+    800: '#A1470B',
+    900: '#823C0C',
+    950: '#461C04',
+  },
+  mango: {
+    50: '#FFFFEA',
+    100: '#FFFBC5',
+    200: '#FFF885',
+    300: '#FFED46',
+    400: '#FFDF1B',
+    500: '#FFBF00',
+    600: '#E29300',
+    700: '#BB6802',
+    800: '#985008',
+    900: '#7C420B',
+    950: '#482200',
+  },
+  kangkong: {
+    50: '#F0FDF4',
+    100: '#DCFCE6',
+    200: '#BBF7CE',
+    300: '#86EFA8',
+    400: '#4ADE7B',
+    500: '#22C558',
+    600: '#17AD49',
+    700: '#158039',
+    800: '#166531',
+    900: '#14532B',
+    950: '#052E15',
+  },
+  wintermelon: {
+    50: '#ECFEFF',
+    100: '#CEFBFF',
+    200: '#A3F3FE',
+    300: '#64E9FC',
+    400: '#1ED5F2',
+    500: '#02AFCE',
+    600: '#0592B5',
+    700: '#0C7492',
+    800: '#135E77',
+    900: '#154E64',
+    950: '#073345',
+  },
+  blueberry: {
+    50: '#EEF7FF',
+    100: '#D8EBFF',
+    200: '#BADCFF',
+    300: '#8BBDFF',
+    400: '#549EFF',
+    500: '#2D88FF',
+    600: '#1679FA',
+    700: '#0F6EEB',
+    800: '#1356BA',
+    900: '#164B92',
+    950: '#122E59',
+  },
+  ubas: {
+    50: '#F5F3FF',
+    100: '#EEE9FE',
+    200: '#DED6FE',
+    300: '#C6B5FD',
+    400: '#AA8BFA',
+    500: '#8952F6',
+    600: '#8139EE',
+    700: '#7227DA',
+    800: '#5F21B6',
+    900: '#501D95',
+    950: '#311065',
+  },
+};
+export type { ColorShadesTypes, ColorPaletteTypes };
+export default colorScheme;

package/src/assets/scripts/maxWidth.ts

@@ -0,0 +1,11 @@
+type MaxWidthTypes = {
+  [key: string]: string;
+};
+
+const maxWidth: MaxWidthTypes = {
+  'sm': '640px',
+  'md': '1000px',
+  'lg': '1320px',
+};
+
+export default maxWidth;

package/src/assets/scripts/spacing.ts

@@ -0,0 +1,23 @@
+type spacingTypes = {
+  [key: string]: string;
+};
+
+const spacing: spacingTypes = {
+  'size-spacing-6xs': 'var(--size-50)',
+  'size-spacing-5xs': 'var(--size-100)',
+  'size-spacing-4xs': 'var(--size-150)',
+  'size-spacing-3xs': 'var(--size-200)',
+  'size-spacing-2xs': 'var(--size-250)',
+  'size-spacing-xs': 'var(--size-300)',
+  'size-spacing-sm': 'var(--size-400)',
+  'size-spacing-md': 'var(--size-500)',
+  'size-spacing-lg': 'var(--size-600)',
+  'size-spacing-xl': 'var(--size-700)',
+  'size-spacing-2xl': 'var(--size-800)',
+  'size-spacing-3xl': 'var(--size-900)',
+  'size-spacing-4xl': 'var(--size-1000)',
+  'size-spacing-5xl': 'var(--size-1100)',
+  'size-spacing-6xl': 'var(--size-1200)',
+};
+
+export default spacing;