@code-coaching/vuetiful 0.0.0 → 0.0.2

package/dist/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";@font-face{font-family:myfont;src:url(data:font/woff;base64,d09GRgABAAAAAATMAAsAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIGBGNtYXAAAAFoAAAAVAAAAFQWfNQ7Z2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAMQAAADE9iu5ZGhlYWQAAAKIAAAANgAAADYfdnyraGhlYQAAAsAAAAAkAAAAJAfCA8ZobXR4AAAC5AAAABQAAAAUCgAAAGxvY2EAAAL4AAAADAAAAAwAKAB2bWF4cAAAAwQAAAAgAAAAIAAHACxuYW1lAAADJAAAAYYAAAGGmUoJ+3Bvc3QAAASsAAAAIAAAACAAAwAAAAMDAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6doDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOna//3//wAAAAAAIOna//3//wAB/+MWKgADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAA/8wEAAOAACkAAAEiBw4BBwYHJicuAScmIyIHDgEHBhUUFx4BFxYXNjc+ATc2NTQnLgEnJgLzKCUlPxkZEBAZGT8lJSg4MTFJFRUzM5lZWk5KWVmbNTQVFUkxMQOADw8yICEiIiEgMg8PFRVJMTE4cU5Pjk5NcG9PT5BOT204MTFJFRUAAAEAAAAAAABxV9/FXw889QALBAAAAAAA3iwcMQAAAADeLBwxAAD/zAQAA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAAAAAAAAACgAUAB4AYgABAAAABQAqAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)}[class^=icon-],[class*=" icon-"]{font-family:myfont!important}.icon-heart:before{content:"\e9da"}.global-example{color:red}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,: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-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: }::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-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: }.absolute{position:absolute}.-m-4{margin:-1rem}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.h-6{height:1.5rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-64{max-height:16rem}.w-12{width:3rem}.w-24{width:6rem}.w-60{width:15rem}.w-\[70\%\]{width:70%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.translate-x-\[100\%\]{--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))}.scale-\[0\.8\]{--tw-scale-x: .8;--tw-scale-y: .8;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-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.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-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.bg-primary-50{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-50) / var(--tw-bg-opacity))}.bg-primary-900{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-900) / var(--tw-bg-opacity))}.bg-surface-200{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-200) / var(--tw-bg-opacity))}.bg-surface-50{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-50) / var(--tw-bg-opacity))}.bg-surface-900{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-900) / var(--tw-bg-opacity))}.p-2{padding:.5rem}.p-4{padding:1rem}.text-center{text-align:center}.capitalize{text-transform:capitalize}.text-primary-50{--tw-text-opacity: 1;color:rgb(var(--color-primary-50) / var(--tw-text-opacity))}.text-primary-900{--tw-text-opacity: 1;color:rgb(var(--color-primary-900) / var(--tw-text-opacity))}.text-surface-50{--tw-text-opacity: 1;color:rgb(var(--color-surface-50) / var(--tw-text-opacity))}.text-surface-900{--tw-text-opacity: 1;color:rgb(var(--color-surface-900) / var(--tw-text-opacity))}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring{--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(3px + 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)}.ring-\[1px\]{--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(1px + 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)}.ring-primary-500\/30{--tw-ring-color: rgb(var(--color-primary-500) / .3)}.ring-surface-500\/30{--tw-ring-color: rgb(var(--color-surface-500) / .3)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-\[200ms\]{transition-duration:.2s}.dark .bg-primary-backdrop-token{background-color:rgb(var(--color-primary-900) / .7)}.dark .bg-primary-50-900-token{background-color:rgb(var(--color-primary-900))}.dark .bg-primary-100-800-token{background-color:rgb(var(--color-primary-800))}.dark .bg-primary-200-700-token{background-color:rgb(var(--color-primary-700))}.dark .bg-primary-300-600-token{background-color:rgb(var(--color-primary-600))}.dark .bg-primary-400-500-token{background-color:rgb(var(--color-primary-500))}.dark .bg-primary-900-50-token{background-color:rgb(var(--color-primary-50))}.dark .bg-primary-800-100-token{background-color:rgb(var(--color-primary-100))}.dark .bg-primary-700-200-token{background-color:rgb(var(--color-primary-200))}.dark .bg-primary-600-300-token{background-color:rgb(var(--color-primary-300))}.dark .bg-primary-500-400-token{background-color:rgb(var(--color-primary-400))}.dark .bg-secondary-backdrop-token{background-color:rgb(var(--color-secondary-900) / .7)}.dark .bg-secondary-50-900-token{background-color:rgb(var(--color-secondary-900))}.dark .bg-secondary-100-800-token{background-color:rgb(var(--color-secondary-800))}.dark .bg-secondary-200-700-token{background-color:rgb(var(--color-secondary-700))}.dark .bg-secondary-300-600-token{background-color:rgb(var(--color-secondary-600))}.dark .bg-secondary-400-500-token{background-color:rgb(var(--color-secondary-500))}.dark .bg-secondary-900-50-token{background-color:rgb(var(--color-secondary-50))}.dark .bg-secondary-800-100-token{background-color:rgb(var(--color-secondary-100))}.dark .bg-secondary-700-200-token{background-color:rgb(var(--color-secondary-200))}.dark .bg-secondary-600-300-token{background-color:rgb(var(--color-secondary-300))}.dark .bg-secondary-500-400-token{background-color:rgb(var(--color-secondary-400))}.dark .bg-tertiary-backdrop-token{background-color:rgb(var(--color-tertiary-900) / .7)}.dark .bg-tertiary-50-900-token{background-color:rgb(var(--color-tertiary-900))}.dark .bg-tertiary-100-800-token{background-color:rgb(var(--color-tertiary-800))}.dark .bg-tertiary-200-700-token{background-color:rgb(var(--color-tertiary-700))}.dark .bg-tertiary-300-600-token{background-color:rgb(var(--color-tertiary-600))}.dark .bg-tertiary-400-500-token{background-color:rgb(var(--color-tertiary-500))}.dark .bg-tertiary-900-50-token{background-color:rgb(var(--color-tertiary-50))}.dark .bg-tertiary-800-100-token{background-color:rgb(var(--color-tertiary-100))}.dark .bg-tertiary-700-200-token{background-color:rgb(var(--color-tertiary-200))}.dark .bg-tertiary-600-300-token{background-color:rgb(var(--color-tertiary-300))}.dark .bg-tertiary-500-400-token{background-color:rgb(var(--color-tertiary-400))}.dark .bg-success-backdrop-token{background-color:rgb(var(--color-success-900) / .7)}.dark .bg-success-50-900-token{background-color:rgb(var(--color-success-900))}.dark .bg-success-100-800-token{background-color:rgb(var(--color-success-800))}.dark .bg-success-200-700-token{background-color:rgb(var(--color-success-700))}.dark .bg-success-300-600-token{background-color:rgb(var(--color-success-600))}.dark .bg-success-400-500-token{background-color:rgb(var(--color-success-500))}.dark .bg-success-900-50-token{background-color:rgb(var(--color-success-50))}.dark .bg-success-800-100-token{background-color:rgb(var(--color-success-100))}.dark .bg-success-700-200-token{background-color:rgb(var(--color-success-200))}.dark .bg-success-600-300-token{background-color:rgb(var(--color-success-300))}.dark .bg-success-500-400-token{background-color:rgb(var(--color-success-400))}.dark .bg-warning-backdrop-token{background-color:rgb(var(--color-warning-900) / .7)}.dark .bg-warning-50-900-token{background-color:rgb(var(--color-warning-900))}.dark .bg-warning-100-800-token{background-color:rgb(var(--color-warning-800))}.dark .bg-warning-200-700-token{background-color:rgb(var(--color-warning-700))}.dark .bg-warning-300-600-token{background-color:rgb(var(--color-warning-600))}.dark .bg-warning-400-500-token{background-color:rgb(var(--color-warning-500))}.dark .bg-warning-900-50-token{background-color:rgb(var(--color-warning-50))}.dark .bg-warning-800-100-token{background-color:rgb(var(--color-warning-100))}.dark .bg-warning-700-200-token{background-color:rgb(var(--color-warning-200))}.dark .bg-warning-600-300-token{background-color:rgb(var(--color-warning-300))}.dark .bg-warning-500-400-token{background-color:rgb(var(--color-warning-400))}.dark .bg-error-backdrop-token{background-color:rgb(var(--color-error-900) / .7)}.dark .bg-error-50-900-token{background-color:rgb(var(--color-error-900))}.dark .bg-error-100-800-token{background-color:rgb(var(--color-error-800))}.dark .bg-error-200-700-token{background-color:rgb(var(--color-error-700))}.dark .bg-error-300-600-token{background-color:rgb(var(--color-error-600))}.dark .bg-error-400-500-token{background-color:rgb(var(--color-error-500))}.dark .bg-error-900-50-token{background-color:rgb(var(--color-error-50))}.dark .bg-error-800-100-token{background-color:rgb(var(--color-error-100))}.dark .bg-error-700-200-token{background-color:rgb(var(--color-error-200))}.dark .bg-error-600-300-token{background-color:rgb(var(--color-error-300))}.dark .bg-error-500-400-token{background-color:rgb(var(--color-error-400))}.dark .bg-surface-backdrop-token{background-color:rgb(var(--color-surface-900) / .7)}.dark .bg-surface-50-900-token{background-color:rgb(var(--color-surface-900))}.dark .bg-surface-100-800-token{background-color:rgb(var(--color-surface-800))}.dark .bg-surface-200-700-token{background-color:rgb(var(--color-surface-700))}.dark .bg-surface-300-600-token{background-color:rgb(var(--color-surface-600))}.dark .bg-surface-400-500-token{background-color:rgb(var(--color-surface-500))}.dark .bg-surface-900-50-token{background-color:rgb(var(--color-surface-50))}.dark .bg-surface-800-100-token{background-color:rgb(var(--color-surface-100))}.dark .bg-surface-700-200-token{background-color:rgb(var(--color-surface-200))}.dark .bg-surface-600-300-token{background-color:rgb(var(--color-surface-300))}.dark .bg-surface-500-400-token{background-color:rgb(var(--color-surface-400))}.dark .border-primary-50-900-token{border-color:rgb(var(--color-primary-900))}.dark .border-primary-100-800-token{border-color:rgb(var(--color-primary-800))}.dark .border-primary-200-700-token{border-color:rgb(var(--color-primary-700))}.dark .border-primary-300-600-token{border-color:rgb(var(--color-primary-600))}.dark .border-primary-400-500-token{border-color:rgb(var(--color-primary-500))}.dark .border-primary-900-50-token{border-color:rgb(var(--color-primary-50))}.dark .border-primary-800-100-token{border-color:rgb(var(--color-primary-100))}.dark .border-primary-700-200-token{border-color:rgb(var(--color-primary-200))}.dark .border-primary-600-300-token{border-color:rgb(var(--color-primary-300))}.dark .border-primary-500-400-token{border-color:rgb(var(--color-primary-400))}.dark .border-secondary-50-900-token{border-color:rgb(var(--color-secondary-900))}.dark .border-secondary-100-800-token{border-color:rgb(var(--color-secondary-800))}.dark .border-secondary-200-700-token{border-color:rgb(var(--color-secondary-700))}.dark .border-secondary-300-600-token{border-color:rgb(var(--color-secondary-600))}.dark .border-secondary-400-500-token{border-color:rgb(var(--color-secondary-500))}.dark .border-secondary-900-50-token{border-color:rgb(var(--color-secondary-50))}.dark .border-secondary-800-100-token{border-color:rgb(var(--color-secondary-100))}.dark .border-secondary-700-200-token{border-color:rgb(var(--color-secondary-200))}.dark .border-secondary-600-300-token{border-color:rgb(var(--color-secondary-300))}.dark .border-secondary-500-400-token{border-color:rgb(var(--color-secondary-400))}.dark .border-tertiary-50-900-token{border-color:rgb(var(--color-tertiary-900))}.dark .border-tertiary-100-800-token{border-color:rgb(var(--color-tertiary-800))}.dark .border-tertiary-200-700-token{border-color:rgb(var(--color-tertiary-700))}.dark .border-tertiary-300-600-token{border-color:rgb(var(--color-tertiary-600))}.dark .border-tertiary-400-500-token{border-color:rgb(var(--color-tertiary-500))}.dark .border-tertiary-900-50-token{border-color:rgb(var(--color-tertiary-50))}.dark .border-tertiary-800-100-token{border-color:rgb(var(--color-tertiary-100))}.dark .border-tertiary-700-200-token{border-color:rgb(var(--color-tertiary-200))}.dark .border-tertiary-600-300-token{border-color:rgb(var(--color-tertiary-300))}.dark .border-tertiary-500-400-token{border-color:rgb(var(--color-tertiary-400))}.dark .border-success-50-900-token{border-color:rgb(var(--color-success-900))}.dark .border-success-100-800-token{border-color:rgb(var(--color-success-800))}.dark .border-success-200-700-token{border-color:rgb(var(--color-success-700))}.dark .border-success-300-600-token{border-color:rgb(var(--color-success-600))}.dark .border-success-400-500-token{border-color:rgb(var(--color-success-500))}.dark .border-success-900-50-token{border-color:rgb(var(--color-success-50))}.dark .border-success-800-100-token{border-color:rgb(var(--color-success-100))}.dark .border-success-700-200-token{border-color:rgb(var(--color-success-200))}.dark .border-success-600-300-token{border-color:rgb(var(--color-success-300))}.dark .border-success-500-400-token{border-color:rgb(var(--color-success-400))}.dark .border-warning-50-900-token{border-color:rgb(var(--color-warning-900))}.dark .border-warning-100-800-token{border-color:rgb(var(--color-warning-800))}.dark .border-warning-200-700-token{border-color:rgb(var(--color-warning-700))}.dark .border-warning-300-600-token{border-color:rgb(var(--color-warning-600))}.dark .border-warning-400-500-token{border-color:rgb(var(--color-warning-500))}.dark .border-warning-900-50-token{border-color:rgb(var(--color-warning-50))}.dark .border-warning-800-100-token{border-color:rgb(var(--color-warning-100))}.dark .border-warning-700-200-token{border-color:rgb(var(--color-warning-200))}.dark .border-warning-600-300-token{border-color:rgb(var(--color-warning-300))}.dark .border-warning-500-400-token{border-color:rgb(var(--color-warning-400))}.dark .border-error-50-900-token{border-color:rgb(var(--color-error-900))}.dark .border-error-100-800-token{border-color:rgb(var(--color-error-800))}.dark .border-error-200-700-token{border-color:rgb(var(--color-error-700))}.dark .border-error-300-600-token{border-color:rgb(var(--color-error-600))}.dark .border-error-400-500-token{border-color:rgb(var(--color-error-500))}.dark .border-error-900-50-token{border-color:rgb(var(--color-error-50))}.dark .border-error-800-100-token{border-color:rgb(var(--color-error-100))}.dark .border-error-700-200-token{border-color:rgb(var(--color-error-200))}.dark .border-error-600-300-token{border-color:rgb(var(--color-error-300))}.dark .border-error-500-400-token{border-color:rgb(var(--color-error-400))}.dark .border-surface-50-900-token{border-color:rgb(var(--color-surface-900))}.dark .border-surface-100-800-token{border-color:rgb(var(--color-surface-800))}.dark .border-surface-200-700-token{border-color:rgb(var(--color-surface-700))}.dark .border-surface-300-600-token{border-color:rgb(var(--color-surface-600))}.dark .border-surface-400-500-token{border-color:rgb(var(--color-surface-500))}.dark .border-surface-900-50-token{border-color:rgb(var(--color-surface-50))}.dark .border-surface-800-100-token{border-color:rgb(var(--color-surface-100))}.dark .border-surface-700-200-token{border-color:rgb(var(--color-surface-200))}.dark .border-surface-600-300-token{border-color:rgb(var(--color-surface-300))}.dark .border-surface-500-400-token{border-color:rgb(var(--color-surface-400))}.rounded-token{border-radius:var(--theme-rounded-base)}.rounded-container-token{border-radius:var(--theme-rounded-container)}.dark .fill-token{fill:rgba(var(--theme-font-color-dark))}.dark .text-token{color:rgba(var(--theme-font-color-dark))}.dark .text-primary-50-900-token{color:rgb(var(--color-primary-900))}.dark .text-primary-100-800-token{color:rgb(var(--color-primary-800))}.dark .text-primary-200-700-token{color:rgb(var(--color-primary-700))}.dark .text-primary-300-600-token{color:rgb(var(--color-primary-600))}.dark .text-primary-400-500-token{color:rgb(var(--color-primary-500))}.dark .text-primary-900-50-token{color:rgb(var(--color-primary-50))}.dark .text-primary-800-100-token{color:rgb(var(--color-primary-100))}.dark .text-primary-700-200-token{color:rgb(var(--color-primary-200))}.dark .text-primary-600-300-token{color:rgb(var(--color-primary-300))}.dark .text-primary-500-400-token{color:rgb(var(--color-primary-400))}.dark .text-secondary-50-900-token{color:rgb(var(--color-secondary-900))}.dark .text-secondary-100-800-token{color:rgb(var(--color-secondary-800))}.dark .text-secondary-200-700-token{color:rgb(var(--color-secondary-700))}.dark .text-secondary-300-600-token{color:rgb(var(--color-secondary-600))}.dark .text-secondary-400-500-token{color:rgb(var(--color-secondary-500))}.dark .text-secondary-900-50-token{color:rgb(var(--color-secondary-50))}.dark .text-secondary-800-100-token{color:rgb(var(--color-secondary-100))}.dark .text-secondary-700-200-token{color:rgb(var(--color-secondary-200))}.dark .text-secondary-600-300-token{color:rgb(var(--color-secondary-300))}.dark .text-secondary-500-400-token{color:rgb(var(--color-secondary-400))}.dark .text-tertiary-50-900-token{color:rgb(var(--color-tertiary-900))}.dark .text-tertiary-100-800-token{color:rgb(var(--color-tertiary-800))}.dark .text-tertiary-200-700-token{color:rgb(var(--color-tertiary-700))}.dark .text-tertiary-300-600-token{color:rgb(var(--color-tertiary-600))}.dark .text-tertiary-400-500-token{color:rgb(var(--color-tertiary-500))}.dark .text-tertiary-900-50-token{color:rgb(var(--color-tertiary-50))}.dark .text-tertiary-800-100-token{color:rgb(var(--color-tertiary-100))}.dark .text-tertiary-700-200-token{color:rgb(var(--color-tertiary-200))}.dark .text-tertiary-600-300-token{color:rgb(var(--color-tertiary-300))}.dark .text-tertiary-500-400-token{color:rgb(var(--color-tertiary-400))}.dark .text-success-50-900-token{color:rgb(var(--color-success-900))}.dark .text-success-100-800-token{color:rgb(var(--color-success-800))}.dark .text-success-200-700-token{color:rgb(var(--color-success-700))}.dark .text-success-300-600-token{color:rgb(var(--color-success-600))}.dark .text-success-400-500-token{color:rgb(var(--color-success-500))}.dark .text-success-900-50-token{color:rgb(var(--color-success-50))}.dark .text-success-800-100-token{color:rgb(var(--color-success-100))}.dark .text-success-700-200-token{color:rgb(var(--color-success-200))}.dark .text-success-600-300-token{color:rgb(var(--color-success-300))}.dark .text-success-500-400-token{color:rgb(var(--color-success-400))}.dark .text-warning-50-900-token{color:rgb(var(--color-warning-900))}.dark .text-warning-100-800-token{color:rgb(var(--color-warning-800))}.dark .text-warning-200-700-token{color:rgb(var(--color-warning-700))}.dark .text-warning-300-600-token{color:rgb(var(--color-warning-600))}.dark .text-warning-400-500-token{color:rgb(var(--color-warning-500))}.dark .text-warning-900-50-token{color:rgb(var(--color-warning-50))}.dark .text-warning-800-100-token{color:rgb(var(--color-warning-100))}.dark .text-warning-700-200-token{color:rgb(var(--color-warning-200))}.dark .text-warning-600-300-token{color:rgb(var(--color-warning-300))}.dark .text-warning-500-400-token{color:rgb(var(--color-warning-400))}.dark .text-error-50-900-token{color:rgb(var(--color-error-900))}.dark .text-error-100-800-token{color:rgb(var(--color-error-800))}.dark .text-error-200-700-token{color:rgb(var(--color-error-700))}.dark .text-error-300-600-token{color:rgb(var(--color-error-600))}.dark .text-error-400-500-token{color:rgb(var(--color-error-500))}.dark .text-error-900-50-token{color:rgb(var(--color-error-50))}.dark .text-error-800-100-token{color:rgb(var(--color-error-100))}.dark .text-error-700-200-token{color:rgb(var(--color-error-200))}.dark .text-error-600-300-token{color:rgb(var(--color-error-300))}.dark .text-error-500-400-token{color:rgb(var(--color-error-400))}.dark .text-surface-50-900-token{color:rgb(var(--color-surface-900))}.dark .text-surface-100-800-token{color:rgb(var(--color-surface-800))}.dark .text-surface-200-700-token{color:rgb(var(--color-surface-700))}.dark .text-surface-300-600-token{color:rgb(var(--color-surface-600))}.dark .text-surface-400-500-token{color:rgb(var(--color-surface-500))}.dark .text-surface-900-50-token{color:rgb(var(--color-surface-50))}.dark .text-surface-800-100-token{color:rgb(var(--color-surface-100))}.dark .text-surface-700-200-token{color:rgb(var(--color-surface-200))}.dark .text-surface-600-300-token{color:rgb(var(--color-surface-300))}.dark .text-surface-500-400-token{color:rgb(var(--color-surface-400))}.dark .ring-outline-token{--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(1px + 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);--tw-ring-inset: inset;--tw-ring-color: rgb(250 250 250 / .05)}.dark .ring-primary-50-900-token{--tw-ring-color: rgb(var(--color-primary-900) / 1)}.dark .ring-primary-100-800-token{--tw-ring-color: rgb(var(--color-primary-800) / 1)}.dark .ring-primary-200-700-token{--tw-ring-color: rgb(var(--color-primary-700) / 1)}.dark .ring-primary-300-600-token{--tw-ring-color: rgb(var(--color-primary-600) / 1)}.dark .ring-primary-400-500-token{--tw-ring-color: rgb(var(--color-primary-500) / 1)}.dark .ring-primary-900-50-token{--tw-ring-color: rgb(var(--color-primary-50) / 1)}.dark .ring-primary-800-100-token{--tw-ring-color: rgb(var(--color-primary-100) / 1)}.dark .ring-primary-700-200-token{--tw-ring-color: rgb(var(--color-primary-200) / 1)}.dark .ring-primary-600-300-token{--tw-ring-color: rgb(var(--color-primary-300) / 1)}.dark .ring-primary-500-400-token{--tw-ring-color: rgb(var(--color-primary-400) / 1)}.dark .ring-secondary-50-900-token{--tw-ring-color: rgb(var(--color-secondary-900) / 1)}.dark .ring-secondary-100-800-token{--tw-ring-color: rgb(var(--color-secondary-800) / 1)}.dark .ring-secondary-200-700-token{--tw-ring-color: rgb(var(--color-secondary-700) / 1)}.dark .ring-secondary-300-600-token{--tw-ring-color: rgb(var(--color-secondary-600) / 1)}.dark .ring-secondary-400-500-token{--tw-ring-color: rgb(var(--color-secondary-500) / 1)}.dark .ring-secondary-900-50-token{--tw-ring-color: rgb(var(--color-secondary-50) / 1)}.dark .ring-secondary-800-100-token{--tw-ring-color: rgb(var(--color-secondary-100) / 1)}.dark .ring-secondary-700-200-token{--tw-ring-color: rgb(var(--color-secondary-200) / 1)}.dark .ring-secondary-600-300-token{--tw-ring-color: rgb(var(--color-secondary-300) / 1)}.dark .ring-secondary-500-400-token{--tw-ring-color: rgb(var(--color-secondary-400) / 1)}.dark .ring-tertiary-50-900-token{--tw-ring-color: rgb(var(--color-tertiary-900) / 1)}.dark .ring-tertiary-100-800-token{--tw-ring-color: rgb(var(--color-tertiary-800) / 1)}.dark .ring-tertiary-200-700-token{--tw-ring-color: rgb(var(--color-tertiary-700) / 1)}.dark .ring-tertiary-300-600-token{--tw-ring-color: rgb(var(--color-tertiary-600) / 1)}.dark .ring-tertiary-400-500-token{--tw-ring-color: rgb(var(--color-tertiary-500) / 1)}.dark .ring-tertiary-900-50-token{--tw-ring-color: rgb(var(--color-tertiary-50) / 1)}.dark .ring-tertiary-800-100-token{--tw-ring-color: rgb(var(--color-tertiary-100) / 1)}.dark .ring-tertiary-700-200-token{--tw-ring-color: rgb(var(--color-tertiary-200) / 1)}.dark .ring-tertiary-600-300-token{--tw-ring-color: rgb(var(--color-tertiary-300) / 1)}.dark .ring-tertiary-500-400-token{--tw-ring-color: rgb(var(--color-tertiary-400) / 1)}.dark .ring-success-50-900-token{--tw-ring-color: rgb(var(--color-success-900) / 1)}.dark .ring-success-100-800-token{--tw-ring-color: rgb(var(--color-success-800) / 1)}.dark .ring-success-200-700-token{--tw-ring-color: rgb(var(--color-success-700) / 1)}.dark .ring-success-300-600-token{--tw-ring-color: rgb(var(--color-success-600) / 1)}.dark .ring-success-400-500-token{--tw-ring-color: rgb(var(--color-success-500) / 1)}.dark .ring-success-900-50-token{--tw-ring-color: rgb(var(--color-success-50) / 1)}.dark .ring-success-800-100-token{--tw-ring-color: rgb(var(--color-success-100) / 1)}.dark .ring-success-700-200-token{--tw-ring-color: rgb(var(--color-success-200) / 1)}.dark .ring-success-600-300-token{--tw-ring-color: rgb(var(--color-success-300) / 1)}.dark .ring-success-500-400-token{--tw-ring-color: rgb(var(--color-success-400) / 1)}.dark .ring-warning-50-900-token{--tw-ring-color: rgb(var(--color-warning-900) / 1)}.dark .ring-warning-100-800-token{--tw-ring-color: rgb(var(--color-warning-800) / 1)}.dark .ring-warning-200-700-token{--tw-ring-color: rgb(var(--color-warning-700) / 1)}.dark .ring-warning-300-600-token{--tw-ring-color: rgb(var(--color-warning-600) / 1)}.dark .ring-warning-400-500-token{--tw-ring-color: rgb(var(--color-warning-500) / 1)}.dark .ring-warning-900-50-token{--tw-ring-color: rgb(var(--color-warning-50) / 1)}.dark .ring-warning-800-100-token{--tw-ring-color: rgb(var(--color-warning-100) / 1)}.dark .ring-warning-700-200-token{--tw-ring-color: rgb(var(--color-warning-200) / 1)}.dark .ring-warning-600-300-token{--tw-ring-color: rgb(var(--color-warning-300) / 1)}.dark .ring-warning-500-400-token{--tw-ring-color: rgb(var(--color-warning-400) / 1)}.dark .ring-error-50-900-token{--tw-ring-color: rgb(var(--color-error-900) / 1)}.dark .ring-error-100-800-token{--tw-ring-color: rgb(var(--color-error-800) / 1)}.dark .ring-error-200-700-token{--tw-ring-color: rgb(var(--color-error-700) / 1)}.dark .ring-error-300-600-token{--tw-ring-color: rgb(var(--color-error-600) / 1)}.dark .ring-error-400-500-token{--tw-ring-color: rgb(var(--color-error-500) / 1)}.dark .ring-error-900-50-token{--tw-ring-color: rgb(var(--color-error-50) / 1)}.dark .ring-error-800-100-token{--tw-ring-color: rgb(var(--color-error-100) / 1)}.dark .ring-error-700-200-token{--tw-ring-color: rgb(var(--color-error-200) / 1)}.dark .ring-error-600-300-token{--tw-ring-color: rgb(var(--color-error-300) / 1)}.dark .ring-error-500-400-token{--tw-ring-color: rgb(var(--color-error-400) / 1)}.dark .ring-surface-50-900-token{--tw-ring-color: rgb(var(--color-surface-900) / 1)}.dark .ring-surface-100-800-token{--tw-ring-color: rgb(var(--color-surface-800) / 1)}.dark .ring-surface-200-700-token{--tw-ring-color: rgb(var(--color-surface-700) / 1)}.dark .ring-surface-300-600-token{--tw-ring-color: rgb(var(--color-surface-600) / 1)}.dark .ring-surface-400-500-token{--tw-ring-color: rgb(var(--color-surface-500) / 1)}.dark .ring-surface-900-50-token{--tw-ring-color: rgb(var(--color-surface-50) / 1)}.dark .ring-surface-800-100-token{--tw-ring-color: rgb(var(--color-surface-100) / 1)}.dark .ring-surface-700-200-token{--tw-ring-color: rgb(var(--color-surface-200) / 1)}.dark .ring-surface-600-300-token{--tw-ring-color: rgb(var(--color-surface-300) / 1)}.dark .ring-surface-500-400-token{--tw-ring-color: rgb(var(--color-surface-400) / 1)}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-primary-100:hover{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-100) / var(--tw-bg-opacity))}.hover\:text-primary-900:hover{--tw-text-opacity: 1;color:rgb(var(--color-primary-900) / var(--tw-text-opacity))}@media (min-width: 1024px){.lg\:max-h-\[500px\]{max-height:500px}}:root{--theme-font-family-base: system-ui;--theme-font-family-heading: system-ui;--theme-font-color-base: 0 0 0;--theme-font-color-dark: 255 255 255;--theme-rounded-base: 9999px;--theme-rounded-container: 8px;--theme-border-base: 1px;--on-primary: 0 0 0;--on-secondary: 255 255 255;--on-tertiary: 0 0 0;--on-success: 0 0 0;--on-warning: 0 0 0;--on-error: 255 255 255;--on-surface: 255 255 255;--color-primary-50: 219 245 236;--color-primary-100: 207 241 230;--color-primary-200: 195 238 224;--color-primary-300: 159 227 205;--color-primary-400: 87 207 167;--color-primary-500: 15 186 129;--color-primary-600: 14 167 116;--color-primary-700: 11 140 97;--color-primary-800: 9 112 77;--color-primary-900: 7 91 63;--color-secondary-50: 229 227 251;--color-secondary-100: 220 218 250;--color-secondary-200: 211 209 249;--color-secondary-300: 185 181 245;--color-secondary-400: 132 126 237;--color-secondary-500: 79 70 229;--color-secondary-600: 71 63 206;--color-secondary-700: 59 53 172;--color-secondary-800: 47 42 137;--color-secondary-900: 39 34 112;--color-tertiary-50: 219 242 252;--color-tertiary-100: 207 237 251;--color-tertiary-200: 195 233 250;--color-tertiary-300: 159 219 246;--color-tertiary-400: 86 192 240;--color-tertiary-500: 14 165 233;--color-tertiary-600: 13 149 210;--color-tertiary-700: 11 124 175;--color-tertiary-800: 8 99 140;--color-tertiary-900: 7 81 114;--color-success-50: 237 247 220;--color-success-100: 230 245 208;--color-success-200: 224 242 197;--color-success-300: 206 235 162;--color-success-400: 169 219 92;--color-success-500: 132 204 22;--color-success-600: 119 184 20;--color-success-700: 99 153 17;--color-success-800: 79 122 13;--color-success-900: 65 100 11;--color-warning-50: 252 244 218;--color-warning-100: 251 240 206;--color-warning-200: 250 236 193;--color-warning-300: 247 225 156;--color-warning-400: 240 202 82;--color-warning-500: 234 179 8;--color-warning-600: 211 161 7;--color-warning-700: 176 134 6;--color-warning-800: 140 107 5;--color-warning-900: 115 88 4;--color-error-50: 249 221 234;--color-error-100: 246 209 228;--color-error-200: 244 198 221;--color-error-300: 238 163 200;--color-error-400: 225 94 159;--color-error-500: 212 25 118;--color-error-600: 191 23 106;--color-error-700: 159 19 89;--color-error-800: 127 15 71;--color-error-900: 104 12 58;--color-surface-50: 228 230 238;--color-surface-100: 219 222 233;--color-surface-200: 210 214 227;--color-surface-300: 182 189 210;--color-surface-400: 128 140 177;--color-surface-500: 73 90 143;--color-surface-600: 66 81 129;--color-surface-700: 55 68 107;--color-surface-800: 44 54 86;--color-surface-900: 36 44 70}[data-theme=vuetiful] h1,[data-theme=vuetiful] h2,[data-theme=vuetiful] h3,[data-theme=vuetiful] h4,[data-theme=vuetiful] h5,[data-theme=vuetiful] h6{font-weight:700}[data-theme=vuetiful]{background-image:radial-gradient(at 0% 0%,rgba(var(--color-secondary-500) / .33) 0px,transparent 50%),radial-gradient(at 98% 1%,rgba(var(--color-error-500) / .33) 0px,transparent 50%)}.cc-theme-switcher__popup[data-v-74718370]{position:absolute;z-index:1;margin-top:.25rem}
+@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap";@font-face{font-family:myfont;src:url(data:font/woff;base64,d09GRgABAAAAAATMAAsAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIGBGNtYXAAAAFoAAAAVAAAAFQWfNQ7Z2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAMQAAADE9iu5ZGhlYWQAAAKIAAAANgAAADYfdnyraGhlYQAAAsAAAAAkAAAAJAfCA8ZobXR4AAAC5AAAABQAAAAUCgAAAGxvY2EAAAL4AAAADAAAAAwAKAB2bWF4cAAAAwQAAAAgAAAAIAAHACxuYW1lAAADJAAAAYYAAAGGmUoJ+3Bvc3QAAASsAAAAIAAAACAAAwAAAAMDAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6doDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOna//3//wAAAAAAIOna//3//wAB/+MWKgADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAA/8wEAAOAACkAAAEiBw4BBwYHJicuAScmIyIHDgEHBhUUFx4BFxYXNjc+ATc2NTQnLgEnJgLzKCUlPxkZEBAZGT8lJSg4MTFJFRUzM5lZWk5KWVmbNTQVFUkxMQOADw8yICEiIiEgMg8PFRVJMTE4cU5Pjk5NcG9PT5BOT204MTFJFRUAAAEAAAAAAABxV9/FXw889QALBAAAAAAA3iwcMQAAAADeLBwxAAD/zAQAA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAAAAAAAAACgAUAB4AYgABAAAABQAqAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)}[class^=icon-],[class*=" icon-"]{font-family:myfont!important}.icon-heart:before{content:"\e9da"}.global-example{color:red}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,: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-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: }::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-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: }.absolute{position:absolute}.-m-4{margin:-1rem}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.h-6{height:1.5rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-64{max-height:16rem}.w-12{width:3rem}.w-24{width:6rem}.w-60{width:15rem}.w-\[70\%\]{width:70%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.translate-x-\[100\%\]{--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))}.scale-\[0\.8\]{--tw-scale-x: .8;--tw-scale-y: .8;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-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.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-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.bg-primary-50{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-50) / var(--tw-bg-opacity))}.bg-primary-900{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-900) / var(--tw-bg-opacity))}.bg-surface-200{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-200) / var(--tw-bg-opacity))}.bg-surface-50{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-50) / var(--tw-bg-opacity))}.bg-surface-900{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-900) / var(--tw-bg-opacity))}.p-2{padding:.5rem}.p-4{padding:1rem}.text-center{text-align:center}.capitalize{text-transform:capitalize}.text-primary-50{--tw-text-opacity: 1;color:rgb(var(--color-primary-50) / var(--tw-text-opacity))}.text-primary-900{--tw-text-opacity: 1;color:rgb(var(--color-primary-900) / var(--tw-text-opacity))}.text-surface-50{--tw-text-opacity: 1;color:rgb(var(--color-surface-50) / var(--tw-text-opacity))}.text-surface-900{--tw-text-opacity: 1;color:rgb(var(--color-surface-900) / var(--tw-text-opacity))}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring{--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(3px + 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)}.ring-\[1px\]{--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(1px + 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)}.ring-primary-500\/30{--tw-ring-color: rgb(var(--color-primary-500) / .3)}.ring-surface-500\/30{--tw-ring-color: rgb(var(--color-surface-500) / .3)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-\[200ms\]{transition-duration:.2s}.dark .bg-primary-backdrop-token{background-color:rgb(var(--color-primary-900) / .7)}.dark .bg-primary-50-900-token{background-color:rgb(var(--color-primary-900))}.dark .bg-primary-100-800-token{background-color:rgb(var(--color-primary-800))}.dark .bg-primary-200-700-token{background-color:rgb(var(--color-primary-700))}.dark .bg-primary-300-600-token{background-color:rgb(var(--color-primary-600))}.dark .bg-primary-400-500-token{background-color:rgb(var(--color-primary-500))}.dark .bg-primary-900-50-token{background-color:rgb(var(--color-primary-50))}.dark .bg-primary-800-100-token{background-color:rgb(var(--color-primary-100))}.dark .bg-primary-700-200-token{background-color:rgb(var(--color-primary-200))}.dark .bg-primary-600-300-token{background-color:rgb(var(--color-primary-300))}.dark .bg-primary-500-400-token{background-color:rgb(var(--color-primary-400))}.dark .bg-secondary-backdrop-token{background-color:rgb(var(--color-secondary-900) / .7)}.dark .bg-secondary-50-900-token{background-color:rgb(var(--color-secondary-900))}.dark .bg-secondary-100-800-token{background-color:rgb(var(--color-secondary-800))}.dark .bg-secondary-200-700-token{background-color:rgb(var(--color-secondary-700))}.dark .bg-secondary-300-600-token{background-color:rgb(var(--color-secondary-600))}.dark .bg-secondary-400-500-token{background-color:rgb(var(--color-secondary-500))}.dark .bg-secondary-900-50-token{background-color:rgb(var(--color-secondary-50))}.dark .bg-secondary-800-100-token{background-color:rgb(var(--color-secondary-100))}.dark .bg-secondary-700-200-token{background-color:rgb(var(--color-secondary-200))}.dark .bg-secondary-600-300-token{background-color:rgb(var(--color-secondary-300))}.dark .bg-secondary-500-400-token{background-color:rgb(var(--color-secondary-400))}.dark .bg-tertiary-backdrop-token{background-color:rgb(var(--color-tertiary-900) / .7)}.dark .bg-tertiary-50-900-token{background-color:rgb(var(--color-tertiary-900))}.dark .bg-tertiary-100-800-token{background-color:rgb(var(--color-tertiary-800))}.dark .bg-tertiary-200-700-token{background-color:rgb(var(--color-tertiary-700))}.dark .bg-tertiary-300-600-token{background-color:rgb(var(--color-tertiary-600))}.dark .bg-tertiary-400-500-token{background-color:rgb(var(--color-tertiary-500))}.dark .bg-tertiary-900-50-token{background-color:rgb(var(--color-tertiary-50))}.dark .bg-tertiary-800-100-token{background-color:rgb(var(--color-tertiary-100))}.dark .bg-tertiary-700-200-token{background-color:rgb(var(--color-tertiary-200))}.dark .bg-tertiary-600-300-token{background-color:rgb(var(--color-tertiary-300))}.dark .bg-tertiary-500-400-token{background-color:rgb(var(--color-tertiary-400))}.dark .bg-success-backdrop-token{background-color:rgb(var(--color-success-900) / .7)}.dark .bg-success-50-900-token{background-color:rgb(var(--color-success-900))}.dark .bg-success-100-800-token{background-color:rgb(var(--color-success-800))}.dark .bg-success-200-700-token{background-color:rgb(var(--color-success-700))}.dark .bg-success-300-600-token{background-color:rgb(var(--color-success-600))}.dark .bg-success-400-500-token{background-color:rgb(var(--color-success-500))}.dark .bg-success-900-50-token{background-color:rgb(var(--color-success-50))}.dark .bg-success-800-100-token{background-color:rgb(var(--color-success-100))}.dark .bg-success-700-200-token{background-color:rgb(var(--color-success-200))}.dark .bg-success-600-300-token{background-color:rgb(var(--color-success-300))}.dark .bg-success-500-400-token{background-color:rgb(var(--color-success-400))}.dark .bg-warning-backdrop-token{background-color:rgb(var(--color-warning-900) / .7)}.dark .bg-warning-50-900-token{background-color:rgb(var(--color-warning-900))}.dark .bg-warning-100-800-token{background-color:rgb(var(--color-warning-800))}.dark .bg-warning-200-700-token{background-color:rgb(var(--color-warning-700))}.dark .bg-warning-300-600-token{background-color:rgb(var(--color-warning-600))}.dark .bg-warning-400-500-token{background-color:rgb(var(--color-warning-500))}.dark .bg-warning-900-50-token{background-color:rgb(var(--color-warning-50))}.dark .bg-warning-800-100-token{background-color:rgb(var(--color-warning-100))}.dark .bg-warning-700-200-token{background-color:rgb(var(--color-warning-200))}.dark .bg-warning-600-300-token{background-color:rgb(var(--color-warning-300))}.dark .bg-warning-500-400-token{background-color:rgb(var(--color-warning-400))}.dark .bg-error-backdrop-token{background-color:rgb(var(--color-error-900) / .7)}.dark .bg-error-50-900-token{background-color:rgb(var(--color-error-900))}.dark .bg-error-100-800-token{background-color:rgb(var(--color-error-800))}.dark .bg-error-200-700-token{background-color:rgb(var(--color-error-700))}.dark .bg-error-300-600-token{background-color:rgb(var(--color-error-600))}.dark .bg-error-400-500-token{background-color:rgb(var(--color-error-500))}.dark .bg-error-900-50-token{background-color:rgb(var(--color-error-50))}.dark .bg-error-800-100-token{background-color:rgb(var(--color-error-100))}.dark .bg-error-700-200-token{background-color:rgb(var(--color-error-200))}.dark .bg-error-600-300-token{background-color:rgb(var(--color-error-300))}.dark .bg-error-500-400-token{background-color:rgb(var(--color-error-400))}.dark .bg-surface-backdrop-token{background-color:rgb(var(--color-surface-900) / .7)}.dark .bg-surface-50-900-token{background-color:rgb(var(--color-surface-900))}.dark .bg-surface-100-800-token{background-color:rgb(var(--color-surface-800))}.dark .bg-surface-200-700-token{background-color:rgb(var(--color-surface-700))}.dark .bg-surface-300-600-token{background-color:rgb(var(--color-surface-600))}.dark .bg-surface-400-500-token{background-color:rgb(var(--color-surface-500))}.dark .bg-surface-900-50-token{background-color:rgb(var(--color-surface-50))}.dark .bg-surface-800-100-token{background-color:rgb(var(--color-surface-100))}.dark .bg-surface-700-200-token{background-color:rgb(var(--color-surface-200))}.dark .bg-surface-600-300-token{background-color:rgb(var(--color-surface-300))}.dark .bg-surface-500-400-token{background-color:rgb(var(--color-surface-400))}.dark .border-primary-50-900-token{border-color:rgb(var(--color-primary-900))}.dark .border-primary-100-800-token{border-color:rgb(var(--color-primary-800))}.dark .border-primary-200-700-token{border-color:rgb(var(--color-primary-700))}.dark .border-primary-300-600-token{border-color:rgb(var(--color-primary-600))}.dark .border-primary-400-500-token{border-color:rgb(var(--color-primary-500))}.dark .border-primary-900-50-token{border-color:rgb(var(--color-primary-50))}.dark .border-primary-800-100-token{border-color:rgb(var(--color-primary-100))}.dark .border-primary-700-200-token{border-color:rgb(var(--color-primary-200))}.dark .border-primary-600-300-token{border-color:rgb(var(--color-primary-300))}.dark .border-primary-500-400-token{border-color:rgb(var(--color-primary-400))}.dark .border-secondary-50-900-token{border-color:rgb(var(--color-secondary-900))}.dark .border-secondary-100-800-token{border-color:rgb(var(--color-secondary-800))}.dark .border-secondary-200-700-token{border-color:rgb(var(--color-secondary-700))}.dark .border-secondary-300-600-token{border-color:rgb(var(--color-secondary-600))}.dark .border-secondary-400-500-token{border-color:rgb(var(--color-secondary-500))}.dark .border-secondary-900-50-token{border-color:rgb(var(--color-secondary-50))}.dark .border-secondary-800-100-token{border-color:rgb(var(--color-secondary-100))}.dark .border-secondary-700-200-token{border-color:rgb(var(--color-secondary-200))}.dark .border-secondary-600-300-token{border-color:rgb(var(--color-secondary-300))}.dark .border-secondary-500-400-token{border-color:rgb(var(--color-secondary-400))}.dark .border-tertiary-50-900-token{border-color:rgb(var(--color-tertiary-900))}.dark .border-tertiary-100-800-token{border-color:rgb(var(--color-tertiary-800))}.dark .border-tertiary-200-700-token{border-color:rgb(var(--color-tertiary-700))}.dark .border-tertiary-300-600-token{border-color:rgb(var(--color-tertiary-600))}.dark .border-tertiary-400-500-token{border-color:rgb(var(--color-tertiary-500))}.dark .border-tertiary-900-50-token{border-color:rgb(var(--color-tertiary-50))}.dark .border-tertiary-800-100-token{border-color:rgb(var(--color-tertiary-100))}.dark .border-tertiary-700-200-token{border-color:rgb(var(--color-tertiary-200))}.dark .border-tertiary-600-300-token{border-color:rgb(var(--color-tertiary-300))}.dark .border-tertiary-500-400-token{border-color:rgb(var(--color-tertiary-400))}.dark .border-success-50-900-token{border-color:rgb(var(--color-success-900))}.dark .border-success-100-800-token{border-color:rgb(var(--color-success-800))}.dark .border-success-200-700-token{border-color:rgb(var(--color-success-700))}.dark .border-success-300-600-token{border-color:rgb(var(--color-success-600))}.dark .border-success-400-500-token{border-color:rgb(var(--color-success-500))}.dark .border-success-900-50-token{border-color:rgb(var(--color-success-50))}.dark .border-success-800-100-token{border-color:rgb(var(--color-success-100))}.dark .border-success-700-200-token{border-color:rgb(var(--color-success-200))}.dark .border-success-600-300-token{border-color:rgb(var(--color-success-300))}.dark .border-success-500-400-token{border-color:rgb(var(--color-success-400))}.dark .border-warning-50-900-token{border-color:rgb(var(--color-warning-900))}.dark .border-warning-100-800-token{border-color:rgb(var(--color-warning-800))}.dark .border-warning-200-700-token{border-color:rgb(var(--color-warning-700))}.dark .border-warning-300-600-token{border-color:rgb(var(--color-warning-600))}.dark .border-warning-400-500-token{border-color:rgb(var(--color-warning-500))}.dark .border-warning-900-50-token{border-color:rgb(var(--color-warning-50))}.dark .border-warning-800-100-token{border-color:rgb(var(--color-warning-100))}.dark .border-warning-700-200-token{border-color:rgb(var(--color-warning-200))}.dark .border-warning-600-300-token{border-color:rgb(var(--color-warning-300))}.dark .border-warning-500-400-token{border-color:rgb(var(--color-warning-400))}.dark .border-error-50-900-token{border-color:rgb(var(--color-error-900))}.dark .border-error-100-800-token{border-color:rgb(var(--color-error-800))}.dark .border-error-200-700-token{border-color:rgb(var(--color-error-700))}.dark .border-error-300-600-token{border-color:rgb(var(--color-error-600))}.dark .border-error-400-500-token{border-color:rgb(var(--color-error-500))}.dark .border-error-900-50-token{border-color:rgb(var(--color-error-50))}.dark .border-error-800-100-token{border-color:rgb(var(--color-error-100))}.dark .border-error-700-200-token{border-color:rgb(var(--color-error-200))}.dark .border-error-600-300-token{border-color:rgb(var(--color-error-300))}.dark .border-error-500-400-token{border-color:rgb(var(--color-error-400))}.dark .border-surface-50-900-token{border-color:rgb(var(--color-surface-900))}.dark .border-surface-100-800-token{border-color:rgb(var(--color-surface-800))}.dark .border-surface-200-700-token{border-color:rgb(var(--color-surface-700))}.dark .border-surface-300-600-token{border-color:rgb(var(--color-surface-600))}.dark .border-surface-400-500-token{border-color:rgb(var(--color-surface-500))}.dark .border-surface-900-50-token{border-color:rgb(var(--color-surface-50))}.dark .border-surface-800-100-token{border-color:rgb(var(--color-surface-100))}.dark .border-surface-700-200-token{border-color:rgb(var(--color-surface-200))}.dark .border-surface-600-300-token{border-color:rgb(var(--color-surface-300))}.dark .border-surface-500-400-token{border-color:rgb(var(--color-surface-400))}.rounded-token{border-radius:var(--theme-rounded-base)}.rounded-container-token{border-radius:var(--theme-rounded-container)}.dark .fill-token{fill:rgba(var(--theme-font-color-dark))}.dark .text-token{color:rgba(var(--theme-font-color-dark))}.dark .text-primary-50-900-token{color:rgb(var(--color-primary-900))}.dark .text-primary-100-800-token{color:rgb(var(--color-primary-800))}.dark .text-primary-200-700-token{color:rgb(var(--color-primary-700))}.dark .text-primary-300-600-token{color:rgb(var(--color-primary-600))}.dark .text-primary-400-500-token{color:rgb(var(--color-primary-500))}.dark .text-primary-900-50-token{color:rgb(var(--color-primary-50))}.dark .text-primary-800-100-token{color:rgb(var(--color-primary-100))}.dark .text-primary-700-200-token{color:rgb(var(--color-primary-200))}.dark .text-primary-600-300-token{color:rgb(var(--color-primary-300))}.dark .text-primary-500-400-token{color:rgb(var(--color-primary-400))}.dark .text-secondary-50-900-token{color:rgb(var(--color-secondary-900))}.dark .text-secondary-100-800-token{color:rgb(var(--color-secondary-800))}.dark .text-secondary-200-700-token{color:rgb(var(--color-secondary-700))}.dark .text-secondary-300-600-token{color:rgb(var(--color-secondary-600))}.dark .text-secondary-400-500-token{color:rgb(var(--color-secondary-500))}.dark .text-secondary-900-50-token{color:rgb(var(--color-secondary-50))}.dark .text-secondary-800-100-token{color:rgb(var(--color-secondary-100))}.dark .text-secondary-700-200-token{color:rgb(var(--color-secondary-200))}.dark .text-secondary-600-300-token{color:rgb(var(--color-secondary-300))}.dark .text-secondary-500-400-token{color:rgb(var(--color-secondary-400))}.dark .text-tertiary-50-900-token{color:rgb(var(--color-tertiary-900))}.dark .text-tertiary-100-800-token{color:rgb(var(--color-tertiary-800))}.dark .text-tertiary-200-700-token{color:rgb(var(--color-tertiary-700))}.dark .text-tertiary-300-600-token{color:rgb(var(--color-tertiary-600))}.dark .text-tertiary-400-500-token{color:rgb(var(--color-tertiary-500))}.dark .text-tertiary-900-50-token{color:rgb(var(--color-tertiary-50))}.dark .text-tertiary-800-100-token{color:rgb(var(--color-tertiary-100))}.dark .text-tertiary-700-200-token{color:rgb(var(--color-tertiary-200))}.dark .text-tertiary-600-300-token{color:rgb(var(--color-tertiary-300))}.dark .text-tertiary-500-400-token{color:rgb(var(--color-tertiary-400))}.dark .text-success-50-900-token{color:rgb(var(--color-success-900))}.dark .text-success-100-800-token{color:rgb(var(--color-success-800))}.dark .text-success-200-700-token{color:rgb(var(--color-success-700))}.dark .text-success-300-600-token{color:rgb(var(--color-success-600))}.dark .text-success-400-500-token{color:rgb(var(--color-success-500))}.dark .text-success-900-50-token{color:rgb(var(--color-success-50))}.dark .text-success-800-100-token{color:rgb(var(--color-success-100))}.dark .text-success-700-200-token{color:rgb(var(--color-success-200))}.dark .text-success-600-300-token{color:rgb(var(--color-success-300))}.dark .text-success-500-400-token{color:rgb(var(--color-success-400))}.dark .text-warning-50-900-token{color:rgb(var(--color-warning-900))}.dark .text-warning-100-800-token{color:rgb(var(--color-warning-800))}.dark .text-warning-200-700-token{color:rgb(var(--color-warning-700))}.dark .text-warning-300-600-token{color:rgb(var(--color-warning-600))}.dark .text-warning-400-500-token{color:rgb(var(--color-warning-500))}.dark .text-warning-900-50-token{color:rgb(var(--color-warning-50))}.dark .text-warning-800-100-token{color:rgb(var(--color-warning-100))}.dark .text-warning-700-200-token{color:rgb(var(--color-warning-200))}.dark .text-warning-600-300-token{color:rgb(var(--color-warning-300))}.dark .text-warning-500-400-token{color:rgb(var(--color-warning-400))}.dark .text-error-50-900-token{color:rgb(var(--color-error-900))}.dark .text-error-100-800-token{color:rgb(var(--color-error-800))}.dark .text-error-200-700-token{color:rgb(var(--color-error-700))}.dark .text-error-300-600-token{color:rgb(var(--color-error-600))}.dark .text-error-400-500-token{color:rgb(var(--color-error-500))}.dark .text-error-900-50-token{color:rgb(var(--color-error-50))}.dark .text-error-800-100-token{color:rgb(var(--color-error-100))}.dark .text-error-700-200-token{color:rgb(var(--color-error-200))}.dark .text-error-600-300-token{color:rgb(var(--color-error-300))}.dark .text-error-500-400-token{color:rgb(var(--color-error-400))}.dark .text-surface-50-900-token{color:rgb(var(--color-surface-900))}.dark .text-surface-100-800-token{color:rgb(var(--color-surface-800))}.dark .text-surface-200-700-token{color:rgb(var(--color-surface-700))}.dark .text-surface-300-600-token{color:rgb(var(--color-surface-600))}.dark .text-surface-400-500-token{color:rgb(var(--color-surface-500))}.dark .text-surface-900-50-token{color:rgb(var(--color-surface-50))}.dark .text-surface-800-100-token{color:rgb(var(--color-surface-100))}.dark .text-surface-700-200-token{color:rgb(var(--color-surface-200))}.dark .text-surface-600-300-token{color:rgb(var(--color-surface-300))}.dark .text-surface-500-400-token{color:rgb(var(--color-surface-400))}.dark .ring-outline-token{--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(1px + 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);--tw-ring-inset: inset;--tw-ring-color: rgb(250 250 250 / .05)}.dark .ring-primary-50-900-token{--tw-ring-color: rgb(var(--color-primary-900) / 1)}.dark .ring-primary-100-800-token{--tw-ring-color: rgb(var(--color-primary-800) / 1)}.dark .ring-primary-200-700-token{--tw-ring-color: rgb(var(--color-primary-700) / 1)}.dark .ring-primary-300-600-token{--tw-ring-color: rgb(var(--color-primary-600) / 1)}.dark .ring-primary-400-500-token{--tw-ring-color: rgb(var(--color-primary-500) / 1)}.dark .ring-primary-900-50-token{--tw-ring-color: rgb(var(--color-primary-50) / 1)}.dark .ring-primary-800-100-token{--tw-ring-color: rgb(var(--color-primary-100) / 1)}.dark .ring-primary-700-200-token{--tw-ring-color: rgb(var(--color-primary-200) / 1)}.dark .ring-primary-600-300-token{--tw-ring-color: rgb(var(--color-primary-300) / 1)}.dark .ring-primary-500-400-token{--tw-ring-color: rgb(var(--color-primary-400) / 1)}.dark .ring-secondary-50-900-token{--tw-ring-color: rgb(var(--color-secondary-900) / 1)}.dark .ring-secondary-100-800-token{--tw-ring-color: rgb(var(--color-secondary-800) / 1)}.dark .ring-secondary-200-700-token{--tw-ring-color: rgb(var(--color-secondary-700) / 1)}.dark .ring-secondary-300-600-token{--tw-ring-color: rgb(var(--color-secondary-600) / 1)}.dark .ring-secondary-400-500-token{--tw-ring-color: rgb(var(--color-secondary-500) / 1)}.dark .ring-secondary-900-50-token{--tw-ring-color: rgb(var(--color-secondary-50) / 1)}.dark .ring-secondary-800-100-token{--tw-ring-color: rgb(var(--color-secondary-100) / 1)}.dark .ring-secondary-700-200-token{--tw-ring-color: rgb(var(--color-secondary-200) / 1)}.dark .ring-secondary-600-300-token{--tw-ring-color: rgb(var(--color-secondary-300) / 1)}.dark .ring-secondary-500-400-token{--tw-ring-color: rgb(var(--color-secondary-400) / 1)}.dark .ring-tertiary-50-900-token{--tw-ring-color: rgb(var(--color-tertiary-900) / 1)}.dark .ring-tertiary-100-800-token{--tw-ring-color: rgb(var(--color-tertiary-800) / 1)}.dark .ring-tertiary-200-700-token{--tw-ring-color: rgb(var(--color-tertiary-700) / 1)}.dark .ring-tertiary-300-600-token{--tw-ring-color: rgb(var(--color-tertiary-600) / 1)}.dark .ring-tertiary-400-500-token{--tw-ring-color: rgb(var(--color-tertiary-500) / 1)}.dark .ring-tertiary-900-50-token{--tw-ring-color: rgb(var(--color-tertiary-50) / 1)}.dark .ring-tertiary-800-100-token{--tw-ring-color: rgb(var(--color-tertiary-100) / 1)}.dark .ring-tertiary-700-200-token{--tw-ring-color: rgb(var(--color-tertiary-200) / 1)}.dark .ring-tertiary-600-300-token{--tw-ring-color: rgb(var(--color-tertiary-300) / 1)}.dark .ring-tertiary-500-400-token{--tw-ring-color: rgb(var(--color-tertiary-400) / 1)}.dark .ring-success-50-900-token{--tw-ring-color: rgb(var(--color-success-900) / 1)}.dark .ring-success-100-800-token{--tw-ring-color: rgb(var(--color-success-800) / 1)}.dark .ring-success-200-700-token{--tw-ring-color: rgb(var(--color-success-700) / 1)}.dark .ring-success-300-600-token{--tw-ring-color: rgb(var(--color-success-600) / 1)}.dark .ring-success-400-500-token{--tw-ring-color: rgb(var(--color-success-500) / 1)}.dark .ring-success-900-50-token{--tw-ring-color: rgb(var(--color-success-50) / 1)}.dark .ring-success-800-100-token{--tw-ring-color: rgb(var(--color-success-100) / 1)}.dark .ring-success-700-200-token{--tw-ring-color: rgb(var(--color-success-200) / 1)}.dark .ring-success-600-300-token{--tw-ring-color: rgb(var(--color-success-300) / 1)}.dark .ring-success-500-400-token{--tw-ring-color: rgb(var(--color-success-400) / 1)}.dark .ring-warning-50-900-token{--tw-ring-color: rgb(var(--color-warning-900) / 1)}.dark .ring-warning-100-800-token{--tw-ring-color: rgb(var(--color-warning-800) / 1)}.dark .ring-warning-200-700-token{--tw-ring-color: rgb(var(--color-warning-700) / 1)}.dark .ring-warning-300-600-token{--tw-ring-color: rgb(var(--color-warning-600) / 1)}.dark .ring-warning-400-500-token{--tw-ring-color: rgb(var(--color-warning-500) / 1)}.dark .ring-warning-900-50-token{--tw-ring-color: rgb(var(--color-warning-50) / 1)}.dark .ring-warning-800-100-token{--tw-ring-color: rgb(var(--color-warning-100) / 1)}.dark .ring-warning-700-200-token{--tw-ring-color: rgb(var(--color-warning-200) / 1)}.dark .ring-warning-600-300-token{--tw-ring-color: rgb(var(--color-warning-300) / 1)}.dark .ring-warning-500-400-token{--tw-ring-color: rgb(var(--color-warning-400) / 1)}.dark .ring-error-50-900-token{--tw-ring-color: rgb(var(--color-error-900) / 1)}.dark .ring-error-100-800-token{--tw-ring-color: rgb(var(--color-error-800) / 1)}.dark .ring-error-200-700-token{--tw-ring-color: rgb(var(--color-error-700) / 1)}.dark .ring-error-300-600-token{--tw-ring-color: rgb(var(--color-error-600) / 1)}.dark .ring-error-400-500-token{--tw-ring-color: rgb(var(--color-error-500) / 1)}.dark .ring-error-900-50-token{--tw-ring-color: rgb(var(--color-error-50) / 1)}.dark .ring-error-800-100-token{--tw-ring-color: rgb(var(--color-error-100) / 1)}.dark .ring-error-700-200-token{--tw-ring-color: rgb(var(--color-error-200) / 1)}.dark .ring-error-600-300-token{--tw-ring-color: rgb(var(--color-error-300) / 1)}.dark .ring-error-500-400-token{--tw-ring-color: rgb(var(--color-error-400) / 1)}.dark .ring-surface-50-900-token{--tw-ring-color: rgb(var(--color-surface-900) / 1)}.dark .ring-surface-100-800-token{--tw-ring-color: rgb(var(--color-surface-800) / 1)}.dark .ring-surface-200-700-token{--tw-ring-color: rgb(var(--color-surface-700) / 1)}.dark .ring-surface-300-600-token{--tw-ring-color: rgb(var(--color-surface-600) / 1)}.dark .ring-surface-400-500-token{--tw-ring-color: rgb(var(--color-surface-500) / 1)}.dark .ring-surface-900-50-token{--tw-ring-color: rgb(var(--color-surface-50) / 1)}.dark .ring-surface-800-100-token{--tw-ring-color: rgb(var(--color-surface-100) / 1)}.dark .ring-surface-700-200-token{--tw-ring-color: rgb(var(--color-surface-200) / 1)}.dark .ring-surface-600-300-token{--tw-ring-color: rgb(var(--color-surface-300) / 1)}.dark .ring-surface-500-400-token{--tw-ring-color: rgb(var(--color-surface-400) / 1)}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-primary-100:hover{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-100) / var(--tw-bg-opacity))}.hover\:text-primary-900:hover{--tw-text-opacity: 1;color:rgb(var(--color-primary-900) / var(--tw-text-opacity))}@media (min-width: 1024px){.lg\:max-h-\[500px\]{max-height:500px}}:root{--theme-font-family-base: "Quicksand", sans-serif;--theme-font-family-heading: "Quicksand", sans-serif;--theme-font-color-base: var(--color-surface-900);--theme-font-color-dark: var(--color-tertiary-50);--theme-rounded-base: 9999px;--theme-rounded-container: 24px;--theme-border-base: 3px;--on-primary: 0 0 0;--on-secondary: 0 0 0;--on-tertiary: 0 0 0;--on-success: 0 0 0;--on-warning: 0 0 0;--on-error: 255 255 255;--on-surface: 255 255 255;--color-primary-50: 252 228 240;--color-primary-100: 251 218 235;--color-primary-200: 250 209 230;--color-primary-300: 247 182 214;--color-primary-400: 242 127 184;--color-primary-500: 236 72 153;--color-primary-600: 212 65 138;--color-primary-700: 177 54 115;--color-primary-800: 142 43 92;--color-primary-900: 116 35 75;--color-secondary-50: 218 244 249;--color-secondary-100: 205 240 246;--color-secondary-200: 193 237 244;--color-secondary-300: 155 226 238;--color-secondary-400: 81 204 225;--color-secondary-500: 6 182 212;--color-secondary-600: 5 164 191;--color-secondary-700: 5 137 159;--color-secondary-800: 4 109 127;--color-secondary-900: 3 89 104;--color-tertiary-50: 220 244 242;--color-tertiary-100: 208 241 237;--color-tertiary-200: 196 237 233;--color-tertiary-300: 161 227 219;--color-tertiary-400: 91 205 193;--color-tertiary-500: 20 184 166;--color-tertiary-600: 18 166 149;--color-tertiary-700: 15 138 125;--color-tertiary-800: 12 110 100;--color-tertiary-900: 10 90 81;--color-success-50: 237 247 220;--color-success-100: 230 245 208;--color-success-200: 224 242 197;--color-success-300: 206 235 162;--color-success-400: 169 219 92;--color-success-500: 132 204 22;--color-success-600: 119 184 20;--color-success-700: 99 153 17;--color-success-800: 79 122 13;--color-success-900: 65 100 11;--color-warning-50: 252 244 218;--color-warning-100: 251 240 206;--color-warning-200: 250 236 193;--color-warning-300: 247 225 156;--color-warning-400: 240 202 82;--color-warning-500: 234 179 8;--color-warning-600: 211 161 7;--color-warning-700: 176 134 6;--color-warning-800: 140 107 5;--color-warning-900: 115 88 4;--color-error-50: 253 227 227;--color-error-100: 252 218 218;--color-error-200: 251 208 208;--color-error-300: 249 180 180;--color-error-400: 244 124 124;--color-error-500: 239 68 68;--color-error-600: 215 61 61;--color-error-700: 179 51 51;--color-error-800: 143 41 41;--color-error-900: 117 33 33;--color-surface-50: 232 232 253;--color-surface-100: 224 224 252;--color-surface-200: 216 217 252;--color-surface-300: 193 194 249;--color-surface-400: 146 148 245;--color-surface-500: 99 102 241;--color-surface-600: 89 92 217;--color-surface-700: 74 77 181;--color-surface-800: 59 61 145;--color-surface-900: 49 50 118}[data-theme=vuetiful] h1,[data-theme=vuetiful] h2,[data-theme=vuetiful] h3,[data-theme=vuetiful] h4,[data-theme=vuetiful] h5,[data-theme=vuetiful] h6,[data-theme=vuetiful] a,[data-theme=vuetiful] button{font-weight:700}[data-theme=vuetiful]{background-image:radial-gradient(at 76% 0%,hsla(189,100%,56%,.36) 0px,transparent 50%),radial-gradient(at 1% 0%,hsla(340,100%,76%,.26) 0px,transparent 50%),radial-gradient(at 20% 100%,hsla(241,100%,70%,.47) 0px,transparent 50%)}.dark [data-theme=vuetiful]{background-image:radial-gradient(at 76% 0%,hsla(189,100%,56%,.2) 0px,transparent 50%),radial-gradient(at 1% 0%,hsla(340,100%,76%,.15) 0px,transparent 50%),radial-gradient(at 20% 100%,hsla(241,100%,70%,.3) 0px,transparent 50%)}.cc-theme-switcher__popup[data-v-3283243a]{position:absolute;z-index:1;margin-top:.25rem}

package/dist/styles/all.css

@@ -1,4 +1,4 @@
-@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";
+@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap";
 
 /* Stylesheet: all.css */
 
@@ -4544,50 +4544,50 @@ img,video{
 }
 
 :root{
-  --theme-font-family-base: system-ui;
-  --theme-font-family-heading: system-ui;
-  --theme-font-color-base: 0 0 0;
-  --theme-font-color-dark: 255 255 255;
+  --theme-font-family-base: "Quicksand", sans-serif;
+  --theme-font-family-heading: "Quicksand", sans-serif;
+  --theme-font-color-base: var(--color-surface-900);
+  --theme-font-color-dark: var(--color-tertiary-50);
   --theme-rounded-base: 9999px;
-  --theme-rounded-container: 8px;
-  --theme-border-base: 1px;
+  --theme-rounded-container: 24px;
+  --theme-border-base: 3px;
   --on-primary: 0 0 0;
-  --on-secondary: 255 255 255;
+  --on-secondary: 0 0 0;
   --on-tertiary: 0 0 0;
   --on-success: 0 0 0;
   --on-warning: 0 0 0;
   --on-error: 255 255 255;
   --on-surface: 255 255 255;
-  --color-primary-50: 219 245 236;
-  --color-primary-100: 207 241 230;
-  --color-primary-200: 195 238 224;
-  --color-primary-300: 159 227 205;
-  --color-primary-400: 87 207 167;
-  --color-primary-500: 15 186 129;
-  --color-primary-600: 14 167 116;
-  --color-primary-700: 11 140 97;
-  --color-primary-800: 9 112 77;
-  --color-primary-900: 7 91 63;
-  --color-secondary-50: 229 227 251;
-  --color-secondary-100: 220 218 250;
-  --color-secondary-200: 211 209 249;
-  --color-secondary-300: 185 181 245;
-  --color-secondary-400: 132 126 237;
-  --color-secondary-500: 79 70 229;
-  --color-secondary-600: 71 63 206;
-  --color-secondary-700: 59 53 172;
-  --color-secondary-800: 47 42 137;
-  --color-secondary-900: 39 34 112;
-  --color-tertiary-50: 219 242 252;
-  --color-tertiary-100: 207 237 251;
-  --color-tertiary-200: 195 233 250;
-  --color-tertiary-300: 159 219 246;
-  --color-tertiary-400: 86 192 240;
-  --color-tertiary-500: 14 165 233;
-  --color-tertiary-600: 13 149 210;
-  --color-tertiary-700: 11 124 175;
-  --color-tertiary-800: 8 99 140;
-  --color-tertiary-900: 7 81 114;
+  --color-primary-50: 252 228 240;
+  --color-primary-100: 251 218 235;
+  --color-primary-200: 250 209 230;
+  --color-primary-300: 247 182 214;
+  --color-primary-400: 242 127 184;
+  --color-primary-500: 236 72 153;
+  --color-primary-600: 212 65 138;
+  --color-primary-700: 177 54 115;
+  --color-primary-800: 142 43 92;
+  --color-primary-900: 116 35 75;
+  --color-secondary-50: 218 244 249;
+  --color-secondary-100: 205 240 246;
+  --color-secondary-200: 193 237 244;
+  --color-secondary-300: 155 226 238;
+  --color-secondary-400: 81 204 225;
+  --color-secondary-500: 6 182 212;
+  --color-secondary-600: 5 164 191;
+  --color-secondary-700: 5 137 159;
+  --color-secondary-800: 4 109 127;
+  --color-secondary-900: 3 89 104;
+  --color-tertiary-50: 220 244 242;
+  --color-tertiary-100: 208 241 237;
+  --color-tertiary-200: 196 237 233;
+  --color-tertiary-300: 161 227 219;
+  --color-tertiary-400: 91 205 193;
+  --color-tertiary-500: 20 184 166;
+  --color-tertiary-600: 18 166 149;
+  --color-tertiary-700: 15 138 125;
+  --color-tertiary-800: 12 110 100;
+  --color-tertiary-900: 10 90 81;
   --color-success-50: 237 247 220;
   --color-success-100: 230 245 208;
   --color-success-200: 224 242 197;
@@ -4608,37 +4608,41 @@ img,video{
   --color-warning-700: 176 134 6;
   --color-warning-800: 140 107 5;
   --color-warning-900: 115 88 4;
-  --color-error-50: 249 221 234;
-  --color-error-100: 246 209 228;
-  --color-error-200: 244 198 221;
-  --color-error-300: 238 163 200;
-  --color-error-400: 225 94 159;
-  --color-error-500: 212 25 118;
-  --color-error-600: 191 23 106;
-  --color-error-700: 159 19 89;
-  --color-error-800: 127 15 71;
-  --color-error-900: 104 12 58;
-  --color-surface-50: 228 230 238;
-  --color-surface-100: 219 222 233;
-  --color-surface-200: 210 214 227;
-  --color-surface-300: 182 189 210;
-  --color-surface-400: 128 140 177;
-  --color-surface-500: 73 90 143;
-  --color-surface-600: 66 81 129;
-  --color-surface-700: 55 68 107;
-  --color-surface-800: 44 54 86;
-  --color-surface-900: 36 44 70
-}
-
-[data-theme=vuetiful] h1,[data-theme=vuetiful] h2,[data-theme=vuetiful] h3,[data-theme=vuetiful] h4,[data-theme=vuetiful] h5,[data-theme=vuetiful] h6{
+  --color-error-50: 253 227 227;
+  --color-error-100: 252 218 218;
+  --color-error-200: 251 208 208;
+  --color-error-300: 249 180 180;
+  --color-error-400: 244 124 124;
+  --color-error-500: 239 68 68;
+  --color-error-600: 215 61 61;
+  --color-error-700: 179 51 51;
+  --color-error-800: 143 41 41;
+  --color-error-900: 117 33 33;
+  --color-surface-50: 232 232 253;
+  --color-surface-100: 224 224 252;
+  --color-surface-200: 216 217 252;
+  --color-surface-300: 193 194 249;
+  --color-surface-400: 146 148 245;
+  --color-surface-500: 99 102 241;
+  --color-surface-600: 89 92 217;
+  --color-surface-700: 74 77 181;
+  --color-surface-800: 59 61 145;
+  --color-surface-900: 49 50 118
+}
+
+[data-theme=vuetiful] h1,[data-theme=vuetiful] h2,[data-theme=vuetiful] h3,[data-theme=vuetiful] h4,[data-theme=vuetiful] h5,[data-theme=vuetiful] h6,[data-theme=vuetiful] a,[data-theme=vuetiful] button{
   font-weight:700
 }
 
 [data-theme=vuetiful]{
-  background-image:radial-gradient(at 0% 0%,rgba(var(--color-secondary-500) / .33) 0px,transparent 50%),radial-gradient(at 98% 1%,rgba(var(--color-error-500) / .33) 0px,transparent 50%)
+  background-image:radial-gradient(at 76% 0%,hsla(189,100%,56%,.36) 0px,transparent 50%),radial-gradient(at 1% 0%,hsla(340,100%,76%,.26) 0px,transparent 50%),radial-gradient(at 20% 100%,hsla(241,100%,70%,.47) 0px,transparent 50%)
 }
 
-.cc-theme-switcher__popup[data-v-74718370]{
+.dark [data-theme=vuetiful]{
+  background-image:radial-gradient(at 76% 0%,hsla(189,100%,56%,.2) 0px,transparent 50%),radial-gradient(at 1% 0%,hsla(340,100%,76%,.15) 0px,transparent 50%),radial-gradient(at 20% 100%,hsla(241,100%,70%,.3) 0px,transparent 50%)
+}
+
+.cc-theme-switcher__popup[data-v-3283243a]{
   position:absolute;
   z-index:1;
   margin-top:.25rem

package/dist/types/utils/theme/theme-switcher.vue.d.ts

@@ -42,11 +42,14 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     onKeyDown: (event: KeyboardEvent) => void;
-    loadTheme: (theme: string, callback?: Function | undefined) => void;
+    loadTheme: (themeName: string, callback?: Function | undefined) => void;
     currentMode: Readonly<import("vue").Ref<boolean>>;
     classes: import("vue").ComputedRef<string>;
     chosenTheme: Readonly<import("vue").Ref<string>>;
-    themes: readonly string[];
+    themes: Readonly<import("vue").Ref<readonly {
+        readonly name: string;
+        readonly url?: string | undefined;
+    }[]>>;
     showPopup: import("vue").Ref<boolean>;
     listClasses: import("vue").ComputedRef<string>;
     listItemClasses: import("vue").ComputedRef<string>;

package/dist/types/utils/theme/theme.d.ts

@@ -1,9 +1,27 @@
+import { Ref } from "vue";
+interface Theme {
+    name: string;
+    url?: string;
+}
 declare const useTheme: () => {
-    theme: Readonly<import("vue").Ref<string>>;
-    themes: readonly string[];
-    chosenTheme: Readonly<import("vue").Ref<string>>;
-    setTheme: (name: string) => void;
+    themes: Readonly<Ref<readonly {
+        readonly name: string;
+        readonly url?: string | undefined;
+    }[]>>;
+    chosenTheme: Readonly<Ref<string>>;
     initializeTheme: (callback?: Function | undefined) => void;
-    loadTheme: (theme: string, callback?: Function | undefined) => void;
+    loadTheme: (themeName: string, callback?: Function | undefined) => void;
+    THEMES: {
+        VUETIFUL: string;
+        ROCKET: string;
+        SAHARA: string;
+        SEAFOAM: string;
+        SEASONAL: string;
+        SKELETON: string;
+        VINTAGE: string;
+    };
+    overwriteThemes: (newThemes: Array<Theme>) => void;
+    registerAllBuiltInThemes: () => Array<Theme>;
+    registerTheme: (name: string, url?: string | undefined) => Theme;
 };
 export { useTheme };

package/dist/vuetiful.es.mjs

@@ -156,6 +156,7 @@ const useDarkMode = () => {
       const elemHtmlClasses = document.documentElement.classList;
       const classDark = `dark`;
       value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+      setModeCurrent(value);
     };
     setMode(mql.matches);
     mql.onchange = () => {
@@ -306,32 +307,57 @@ var MyUtil = {
   add
 };
 const { isBrowser } = usePlatform();
-const chosenTheme = ref("vuetiful");
+const THEMES = {
+  VUETIFUL: "vuetiful",
+  ROCKET: "rocket",
+  SAHARA: "sahara",
+  SEAFOAM: "seafoam",
+  SEASONAL: "seasonal",
+  SKELETON: "skeleton",
+  VINTAGE: "vintage"
+};
+const builtInThemes = [
+  { name: THEMES.VUETIFUL },
+  { name: THEMES.ROCKET },
+  { name: THEMES.SAHARA },
+  { name: THEMES.SEAFOAM },
+  { name: THEMES.SEASONAL },
+  { name: THEMES.SKELETON },
+  { name: THEMES.VINTAGE }
+];
+const themes = ref([...builtInThemes]);
+const defaultTheme = THEMES.VUETIFUL;
+const chosenTheme = ref(defaultTheme);
 const useTheme = () => {
-  const themes = ["vuetiful", "modern", "rocket", "sahara", "seafoam", "seasonal", "vintage"];
-  const theme = ref("vuetiful");
   const setTheme = (name) => {
-    theme.value = name;
+    const theme = themes.value.find((t) => t.name === name);
+    if (!theme)
+      return;
     if (isBrowser) {
-      localStorage.setItem("vuetiful-theme", name);
-      applyTheme(name);
+      localStorage.setItem("vuetiful-theme", theme.name);
+      document.body.setAttribute("data-theme", theme.name);
     }
   };
-  const applyTheme = (name) => {
-    document.body.setAttribute("data-theme", name);
-  };
   const initializeTheme = (callback) => {
-    var _a;
     if (isBrowser) {
-      const themeName = (_a = localStorage.getItem("vuetiful-theme")) != null ? _a : "vuetiful";
-      if (themeName)
-        loadTheme(themeName, callback);
+      const storedTheme = localStorage.getItem("vuetiful-theme");
+      if (storedTheme)
+        loadTheme(storedTheme, callback);
+      else
+        loadTheme(defaultTheme, callback);
     }
   };
-  const loadTheme = (theme2, callback) => {
-    chosenTheme.value = theme2;
+  const loadTheme = (themeName, callback) => {
+    let themeToLoad = themes.value.find((t) => t.name === themeName);
+    if (!themeToLoad)
+      themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
+    const theme = themeToLoad;
+    chosenTheme.value = theme.name;
     const existingStyle = document.getElementById("theme");
-    const themeUrl = `https://code-coaching.dev/vuetiful-themes/theme-${theme2}.css`;
+    let themeUrl = theme.url;
+    if (!themeUrl) {
+      themeUrl = `https://code-coaching.dev/vuetiful-themes/theme-${theme.name}.css`;
+    }
     const link = document.createElement("link");
     link.id = "theme";
     link.href = themeUrl;
@@ -340,23 +366,35 @@ const useTheme = () => {
     link.onload = () => {
       if (existingStyle)
         existingStyle.remove();
-      setTheme(theme2);
+      setTheme(theme.name);
       if (callback) {
         callback();
-        console.log("callback");
       }
     };
     const head = document.querySelector("head");
     if (head)
       head.appendChild(link);
   };
+  const registerAllBuiltInThemes = () => {
+    return [...builtInThemes];
+  };
+  const registerTheme = (name, url) => {
+    if (url)
+      return { url, name };
+    return { name };
+  };
+  const overwriteThemes = (newThemes) => {
+    themes.value = [...newThemes];
+  };
   return {
-    theme: readonly(theme),
     themes: readonly(themes),
     chosenTheme: readonly(chosenTheme),
-    setTheme,
     initializeTheme,
-    loadTheme
+    loadTheme,
+    THEMES,
+    overwriteThemes,
+    registerAllBuiltInThemes,
+    registerTheme
   };
 };
 var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -408,7 +446,7 @@ const _sfc_main = defineComponent({
     }
   },
   setup(props, { attrs }) {
-    const { initializeTheme, loadTheme, themes, chosenTheme: chosenTheme2 } = useTheme();
+    const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
     const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
     const showPopup = ref(false);
     onMounted(() => {
@@ -452,14 +490,14 @@ const _sfc_main = defineComponent({
       currentMode: currentMode2,
       classes,
       chosenTheme: chosenTheme2,
-      themes,
+      themes: themes2,
       showPopup,
       listClasses,
       listItemClasses
     };
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-74718370"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-3283243a"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "cc-theme-switcher" };
 const _hoisted_2 = { class: "space-y-4" };
 const _hoisted_3 = { class: "flex items-center justify-between" };
@@ -494,10 +532,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("ul", _hoisted_5, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.themes, (theme, index2) => {
               return openBlock(), createElementBlock("li", {
-                class: normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900", `${_ctx.listItemClasses} ${_ctx.chosenTheme === theme ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
+                class: normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900", `${_ctx.listItemClasses} ${_ctx.chosenTheme === theme.name ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
                 key: index2,
-                onClick: ($event) => _ctx.loadTheme(theme)
-              }, toDisplayString(theme), 11, _hoisted_6);
+                onClick: ($event) => _ctx.loadTheme(theme.name)
+              }, toDisplayString(theme.name), 11, _hoisted_6);
             }), 128))
           ])
         ], 2)
@@ -505,7 +543,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)) : createCommentVNode("", true)
   ]);
 }
-var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-74718370"]]);
+var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3283243a"]]);
 function install(app) {
   for (const key in components) {
     app.component(key, components[key]);

package/dist/vuetiful.umd.js

@@ -1,17 +1,17 @@
-(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d["@code-coaching/vuetiful"]={},d.Vue))})(this,function(d,e){"use strict";var S=(t,s)=>{const c=t.__vccOpts||t;for(const[u,m]of s)c[u]=m;return c};const O=e.defineComponent({props:{bgLight:{type:String,default:"bg-primary-50"},bgDark:{type:String,default:"bg-primary-900"},textOnLight:{type:String,default:"text-primary-900"},textOnDark:{type:String,default:"text-primary-50"},width:{type:String,default:"w-fit"},height:{type:String,default:"h-fit"},ring:{type:String,default:"ring-[1px] ring-primary-500/30"},rounded:{type:String,default:"rounded-token"},msg:{type:String}},setup(t,{attrs:s}){const{currentMode:c,MODE:u}=$(),m="transition-all duration-[200ms]",r=e.computed(()=>c.value===u.LIGHT?t.bgLight:t.bgDark),o=e.computed(()=>c.value===u.LIGHT?t.textOnLight:t.textOnDark);return{classes:e.computed(()=>{var n;return`${m} 
-      ${r.value} 
+(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i["@code-coaching/vuetiful"]={},i.Vue))})(this,function(i,e){"use strict";var b=(t,s)=>{const c=t.__vccOpts||t;for(const[d,m]of s)c[d]=m;return c};const H=e.defineComponent({props:{bgLight:{type:String,default:"bg-primary-50"},bgDark:{type:String,default:"bg-primary-900"},textOnLight:{type:String,default:"text-primary-900"},textOnDark:{type:String,default:"text-primary-50"},width:{type:String,default:"w-fit"},height:{type:String,default:"h-fit"},ring:{type:String,default:"ring-[1px] ring-primary-500/30"},rounded:{type:String,default:"rounded-token"},msg:{type:String}},setup(t,{attrs:s}){const{currentMode:c,MODE:d}=M(),m="transition-all duration-[200ms]",l=e.computed(()=>c.value===d.LIGHT?t.bgLight:t.bgDark),o=e.computed(()=>c.value===d.LIGHT?t.textOnLight:t.textOnDark);return{classes:e.computed(()=>{var n;return`${m} 
+      ${l.value} 
       ${o.value} 
       ${t.width} 
       ${t.height} 
       ${t.ring} 
       ${t.rounded} 
-      ${(n=s.class)!=null?n:""}`})}}});function z(t,s,c,u,m,r){return e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(`cc-button btn ${t.classes}`)},[t.msg?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.msg),1)],64)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default")],2)}var w=S(O,[["render",z]]),L=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",VButton:w}),ce="",ae="",le="";const x=100;var H=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",MAGIC_NUM:x});const _=()=>({isBrowser:typeof window!="undefined"}),{isBrowser:M}=_(),y={LIGHT:!0,DARK:!1},D=e.ref(y.DARK),B=e.ref(y.DARK),k=e.ref(void 0),$=()=>{const t=()=>{const n=window.matchMedia("(prefers-color-scheme: light)").matches;return u(n),n},s=()=>{if(M){const n=localStorage.getItem("modeUserPrefers");n!==null&&(k.value=n==="true")}return k.value},c=()=>{const n=t(),a=s();return a!==void 0?a:n},u=n=>{D.value=n,M&&localStorage.setItem("modeOsPrefers",n.toString())},m=n=>{k.value=n,M&&localStorage.setItem("modeUserPrefers",n.toString())},r=n=>{const a=document.documentElement.classList,l="dark";n===y.LIGHT?a.remove(l):a.add(l),B.value=n},o=()=>{const n=c();r(n)},i=()=>{const n=window.matchMedia("(prefers-color-scheme: light)"),a=l=>{const g=document.documentElement.classList,p="dark";l===y.LIGHT?g.remove(p):g.add(p)};a(n.matches),n.onchange=()=>{a(n.matches)}};return{modeOsPrefers:e.readonly(D),modeUserPrefers:e.readonly(k),currentMode:e.readonly(B),getModeOsPrefers:t,getModeUserPrefers:s,getModeAutoPrefers:c,setModeUserPrefers:m,setModeCurrent:r,autoModeWatcher:i,initializeMode:o,MODE:y}},N=e.defineComponent({props:{bgLight:{type:String,default:"bg-surface-50"},bgDark:{type:String,default:"bg-surface-900"},textLight:{type:String,default:"text-surface-50"},textDark:{type:String,default:"text-surface-900"},width:{type:String,default:"w-12"},height:{type:String,default:"h-6"},ring:{type:String,default:"ring-[1px] ring-surface-500/30"},rounded:{type:String,default:"rounded-token"}},setup(t,{attrs:s}){const{initializeMode:c,setModeCurrent:u,setModeUserPrefers:m,currentMode:r,MODE:o}=$();e.onMounted(()=>{c()});const i="transition-all duration-[200ms]",n="cursor-pointer",a="aspect-square scale-[0.8] flex justify-center items-center",l="w-[70%] aspect-square",g={sun:"M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",moon:"M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"},p=()=>{const h=!r.value;m(h),u(h)},b=h=>{["Enter","Space"].includes(h.code)&&(h.preventDefault(),h.currentTarget.click())},T=e.computed(()=>r.value===o.LIGHT?t.bgLight:t.bgDark),C=e.computed(()=>r.value===o.LIGHT?t.bgDark:t.bgLight),f=e.computed(()=>r.value===o.LIGHT?"translate-x-[100%]":""),ne=e.computed(()=>r.value===o.LIGHT?t.textLight:t.textDark),oe=e.computed(()=>{var h;return`${n} ${i} ${t.width} ${t.height} ${t.ring} ${t.rounded} ${T.value} ${(h=s.class)!=null?h:""}`}),se=e.computed(()=>`${a} ${i} ${t.height} ${t.rounded} ${C.value} ${f.value}`),re=e.computed(()=>`${l}`);return{classesTrack:oe,classesThumb:se,classesIcon:re,svgPath:g,onToggleHandler:p,onKeyDown:b,currentMode:r,iconFill:ne}}}),G=["aria-checked","title"],U=["d"];function K(t,s,c,u,m,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`lightswitch-track ${t.classesTrack}`),onClick:s[0]||(s[0]=(...o)=>t.onToggleHandler&&t.onToggleHandler(...o)),onKeydown:s[1]||(s[1]=(...o)=>t.onKeyDown&&t.onKeyDown(...o)),"on:keyup":"","on:keypress":"",role:"switch","aria-label":"Light Switch","aria-checked":t.currentMode,title:`Toggle ${t.currentMode===!1?"Dark":"Light"} Mode`,tabindex:"0"},[e.createElementVNode("div",{class:e.normalizeClass(`lightswitch-thumb ${t.classesThumb}`)},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(`lightswitch-icon ${t.classesIcon} ${t.iconFill}`),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},[e.createElementVNode("path",{fill:"currentColor",d:t.currentMode?t.svgPath.sun:t.svgPath.moon},null,8,U)],2))],2)],42,G)}var I=S(N,[["render",K]]);function A(t,s){return t+s}var j={add:A};const{isBrowser:E}=_(),P=e.ref("vuetiful"),V=()=>{const t=["vuetiful","modern","rocket","sahara","seafoam","seasonal","vintage"],s=e.ref("vuetiful"),c=o=>{s.value=o,E&&(localStorage.setItem("vuetiful-theme",o),u(o))},u=o=>{document.body.setAttribute("data-theme",o)},m=o=>{var i;if(E){const n=(i=localStorage.getItem("vuetiful-theme"))!=null?i:"vuetiful";n&&r(n,o)}},r=(o,i)=>{P.value=o;const n=document.getElementById("theme"),a=`https://code-coaching.dev/vuetiful-themes/theme-${o}.css`,l=document.createElement("link");l.id="theme",l.href=a,l.type="text/css",l.rel="stylesheet",l.onload=()=>{n&&n.remove(),c(o),i&&(i(),console.log("callback"))};const g=document.querySelector("head");g&&g.appendChild(l)};return{theme:e.readonly(s),themes:e.readonly(t),chosenTheme:e.readonly(P),setTheme:c,initializeTheme:m,loadTheme:r}};var ie="";const q=e.defineComponent({components:{DarkModeSwitch:I,VButton:w},props:{bgLight:{type:String,default:"bg-surface-50"},bgDark:{type:String,default:"bg-surface-900"},textOnLight:{type:String,default:"text-surface-900"},textOnDark:{type:String,default:"text-surface-50"},width:{type:String,default:"w-60"},height:{type:String,default:"max-h-64 lg:max-h-[500px]"},ring:{type:String,default:"ring-[1px] ring-surface-500/30"},rounded:{type:String,default:"rounded-token"},roundedContainer:{type:String,default:"rounded-container-token"},buttonClasses:{type:String,default:"w-24"}},setup(t,{attrs:s}){const{initializeTheme:c,loadTheme:u,themes:m,chosenTheme:r}=V(),{currentMode:o,MODE:i}=$(),n=e.ref(!1);e.onMounted(()=>{c()});const a="transition-all duration-[200ms]";function l(f){["Enter","Space"].includes(f.code)&&(f.preventDefault(),f.currentTarget.click())}const g=e.computed(()=>o.value===i.LIGHT?t.bgLight:t.bgDark),p=e.computed(()=>o.value===i.LIGHT?t.textOnLight:t.textOnDark),b=e.computed(()=>{var f;return`${a} 
+      ${(n=s.class)!=null?n:""}`})}}});function U(t,s,c,d,m,l){return e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(`cc-button btn ${t.classes}`)},[t.msg?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.msg),1)],64)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default")],2)}var L=b(H,[["render",U]]),D=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",VButton:L}),de="",me="",ue="";const x=100;var G=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",MAGIC_NUM:x});const I=()=>({isBrowser:typeof window!="undefined"}),{isBrowser:E}=I(),T={LIGHT:!0,DARK:!1},B=e.ref(T.DARK),O=e.ref(T.DARK),w=e.ref(void 0),M=()=>{const t=()=>{const n=window.matchMedia("(prefers-color-scheme: light)").matches;return d(n),n},s=()=>{if(E){const n=localStorage.getItem("modeUserPrefers");n!==null&&(w.value=n==="true")}return w.value},c=()=>{const n=t(),a=s();return a!==void 0?a:n},d=n=>{B.value=n,E&&localStorage.setItem("modeOsPrefers",n.toString())},m=n=>{w.value=n,E&&localStorage.setItem("modeUserPrefers",n.toString())},l=n=>{const a=document.documentElement.classList,u="dark";n===T.LIGHT?a.remove(u):a.add(u),O.value=n},o=()=>{const n=c();l(n)},r=()=>{const n=window.matchMedia("(prefers-color-scheme: light)"),a=u=>{const g=document.documentElement.classList,h="dark";u===T.LIGHT?g.remove(h):g.add(h),l(u)};a(n.matches),n.onchange=()=>{a(n.matches)}};return{modeOsPrefers:e.readonly(B),modeUserPrefers:e.readonly(w),currentMode:e.readonly(O),getModeOsPrefers:t,getModeUserPrefers:s,getModeAutoPrefers:c,setModeUserPrefers:m,setModeCurrent:l,autoModeWatcher:r,initializeMode:o,MODE:T}},K=e.defineComponent({props:{bgLight:{type:String,default:"bg-surface-50"},bgDark:{type:String,default:"bg-surface-900"},textLight:{type:String,default:"text-surface-50"},textDark:{type:String,default:"text-surface-900"},width:{type:String,default:"w-12"},height:{type:String,default:"h-6"},ring:{type:String,default:"ring-[1px] ring-surface-500/30"},rounded:{type:String,default:"rounded-token"}},setup(t,{attrs:s}){const{initializeMode:c,setModeCurrent:d,setModeUserPrefers:m,currentMode:l,MODE:o}=M();e.onMounted(()=>{c()});const r="transition-all duration-[200ms]",n="cursor-pointer",a="aspect-square scale-[0.8] flex justify-center items-center",u="w-[70%] aspect-square",g={sun:"M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",moon:"M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"},h=()=>{const p=!l.value;m(p),d(p)},$=p=>{["Enter","Space"].includes(p.code)&&(p.preventDefault(),p.currentTarget.click())},S=e.computed(()=>l.value===o.LIGHT?t.bgLight:t.bgDark),_=e.computed(()=>l.value===o.LIGHT?t.bgDark:t.bgLight),y=e.computed(()=>l.value===o.LIGHT?"translate-x-[100%]":""),ae=e.computed(()=>l.value===o.LIGHT?t.textLight:t.textDark),ce=e.computed(()=>{var p;return`${n} ${r} ${t.width} ${t.height} ${t.ring} ${t.rounded} ${S.value} ${(p=s.class)!=null?p:""}`}),le=e.computed(()=>`${a} ${r} ${t.height} ${t.rounded} ${_.value} ${y.value}`),ie=e.computed(()=>`${u}`);return{classesTrack:ce,classesThumb:le,classesIcon:ie,svgPath:g,onToggleHandler:h,onKeyDown:$,currentMode:l,iconFill:ae}}}),F=["aria-checked","title"],R=["d"];function j(t,s,c,d,m,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`lightswitch-track ${t.classesTrack}`),onClick:s[0]||(s[0]=(...o)=>t.onToggleHandler&&t.onToggleHandler(...o)),onKeydown:s[1]||(s[1]=(...o)=>t.onKeyDown&&t.onKeyDown(...o)),"on:keyup":"","on:keypress":"",role:"switch","aria-label":"Light Switch","aria-checked":t.currentMode,title:`Toggle ${t.currentMode===!1?"Dark":"Light"} Mode`,tabindex:"0"},[e.createElementVNode("div",{class:e.normalizeClass(`lightswitch-thumb ${t.classesThumb}`)},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(`lightswitch-icon ${t.classesIcon} ${t.iconFill}`),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},[e.createElementVNode("path",{fill:"currentColor",d:t.currentMode?t.svgPath.sun:t.svgPath.moon},null,8,R)],2))],2)],42,F)}var V=b(K,[["render",j]]);function q(t,s){return t+s}var W={add:q};const{isBrowser:A}=I(),f={VUETIFUL:"vuetiful",ROCKET:"rocket",SAHARA:"sahara",SEAFOAM:"seafoam",SEASONAL:"seasonal",SKELETON:"skeleton",VINTAGE:"vintage"},P=[{name:f.VUETIFUL},{name:f.ROCKET},{name:f.SAHARA},{name:f.SEAFOAM},{name:f.SEASONAL},{name:f.SKELETON},{name:f.VINTAGE}],k=e.ref([...P]),C=f.VUETIFUL,N=e.ref(C),z=()=>{const t=o=>{const r=k.value.find(n=>n.name===o);!r||A&&(localStorage.setItem("vuetiful-theme",r.name),document.body.setAttribute("data-theme",r.name))},s=o=>{if(A){const r=localStorage.getItem("vuetiful-theme");c(r||C,o)}},c=(o,r)=>{let n=k.value.find(S=>S.name===o);n||(n=k.value.find(S=>S.name===C)||k.value[0]);const a=n;N.value=a.name;const u=document.getElementById("theme");let g=a.url;g||(g=`https://code-coaching.dev/vuetiful-themes/theme-${a.name}.css`);const h=document.createElement("link");h.id="theme",h.href=g,h.type="text/css",h.rel="stylesheet",h.onload=()=>{u&&u.remove(),t(a.name),r&&r()};const $=document.querySelector("head");$&&$.appendChild(h)},d=()=>[...P],m=(o,r)=>r?{url:r,name:o}:{name:o},l=o=>{k.value=[...o]};return{themes:e.readonly(k),chosenTheme:e.readonly(N),initializeTheme:s,loadTheme:c,THEMES:f,overwriteThemes:l,registerAllBuiltInThemes:d,registerTheme:m}};var he="";const J=e.defineComponent({components:{DarkModeSwitch:V,VButton:L},props:{bgLight:{type:String,default:"bg-surface-50"},bgDark:{type:String,default:"bg-surface-900"},textOnLight:{type:String,default:"text-surface-900"},textOnDark:{type:String,default:"text-surface-50"},width:{type:String,default:"w-60"},height:{type:String,default:"max-h-64 lg:max-h-[500px]"},ring:{type:String,default:"ring-[1px] ring-surface-500/30"},rounded:{type:String,default:"rounded-token"},roundedContainer:{type:String,default:"rounded-container-token"},buttonClasses:{type:String,default:"w-24"}},setup(t,{attrs:s}){const{initializeTheme:c,loadTheme:d,themes:m,chosenTheme:l}=z(),{currentMode:o,MODE:r}=M(),n=e.ref(!1);e.onMounted(()=>{c()});const a="transition-all duration-[200ms]";function u(y){["Enter","Space"].includes(y.code)&&(y.preventDefault(),y.currentTarget.click())}const g=e.computed(()=>o.value===r.LIGHT?t.bgLight:t.bgDark),h=e.computed(()=>o.value===r.LIGHT?t.textOnLight:t.textOnDark),$=e.computed(()=>{var y;return`${a} 
       ${g.value} 
-      ${p.value} 
+      ${h.value} 
       ${t.width} 
       ${t.ring}
       ${t.roundedContainer}
-      ${(f=s.class)!=null?f:""}`}),T=e.computed(()=>`${a} 
-      ${t.height}`),C=e.computed(()=>`${a} 
+      ${(y=s.class)!=null?y:""}`}),S=e.computed(()=>`${a} 
+      ${t.height}`),_=e.computed(()=>`${a} 
       ${t.ring} 
-      ${t.rounded}`);return{onKeyDown:l,loadTheme:u,currentMode:o,classes:b,chosenTheme:r,themes:m,showPopup:n,listClasses:T,listItemClasses:C}}}),F=t=>(e.pushScopeId("data-v-74718370"),t=t(),e.popScopeId(),t),R={class:"cc-theme-switcher"},W={class:"space-y-4"},J={class:"flex items-center justify-between"},Q=F(()=>e.createElementVNode("h6",null,"Mode",-1)),X={class:"flex flex-col gap-4"},Y=["onClick"];function Z(t,s,c,u,m,r){const o=e.resolveComponent("VButton"),i=e.resolveComponent("DarkModeSwitch");return e.openBlock(),e.createElementBlock("div",R,[e.createVNode(o,{class:e.normalizeClass(`cc-theme-switcher__button ${t.buttonClasses}`),onClick:s[0]||(s[0]=n=>t.showPopup=!t.showPopup)},{default:e.withCtx(()=>[e.createTextVNode(" Theme ")]),_:1},8,["class"]),t.showPopup?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["cc-theme-switcher__popup p-4 shadow-xl",t.classes])},[e.createElementVNode("div",W,[e.createElementVNode("section",J,[Q,e.createVNode(i)]),e.createElementVNode("nav",{class:e.normalizeClass(["list-nav -m-4 overflow-y-auto p-4",t.listClasses])},[e.createElementVNode("ul",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.themes,(n,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900",`${t.listItemClasses} ${t.chosenTheme===n?"bg-primary-50 text-primary-900":"bg-surface-200 text-surface-900"}`]),key:a,onClick:l=>t.loadTheme(n)},e.toDisplayString(n),11,Y))),128))])],2)])],2)):e.createCommentVNode("",!0)])}var v=S(q,[["render",Z],["__scopeId","data-v-74718370"]]);function ee(t){for(const s in L)t.component(s,L[s])}var te={install:ee};d.DarkModeSwitch=I,d.MyConstants=H,d.MyUtil=j,d.ThemeSwitcher=v,d.VButton=w,d.default=te,d.useDarkMode=$,d.useTheme=V,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+      ${t.rounded}`);return{onKeyDown:u,loadTheme:d,currentMode:o,classes:$,chosenTheme:l,themes:m,showPopup:n,listClasses:S,listItemClasses:_}}}),Q=t=>(e.pushScopeId("data-v-3283243a"),t=t(),e.popScopeId(),t),X={class:"cc-theme-switcher"},Y={class:"space-y-4"},Z={class:"flex items-center justify-between"},v=Q(()=>e.createElementVNode("h6",null,"Mode",-1)),ee={class:"flex flex-col gap-4"},te=["onClick"];function ne(t,s,c,d,m,l){const o=e.resolveComponent("VButton"),r=e.resolveComponent("DarkModeSwitch");return e.openBlock(),e.createElementBlock("div",X,[e.createVNode(o,{class:e.normalizeClass(`cc-theme-switcher__button ${t.buttonClasses}`),onClick:s[0]||(s[0]=n=>t.showPopup=!t.showPopup)},{default:e.withCtx(()=>[e.createTextVNode(" Theme ")]),_:1},8,["class"]),t.showPopup?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["cc-theme-switcher__popup p-4 shadow-xl",t.classes])},[e.createElementVNode("div",Y,[e.createElementVNode("section",Z,[v,e.createVNode(r)]),e.createElementVNode("nav",{class:e.normalizeClass(["list-nav -m-4 overflow-y-auto p-4",t.listClasses])},[e.createElementVNode("ul",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.themes,(n,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900",`${t.listItemClasses} ${t.chosenTheme===n.name?"bg-primary-50 text-primary-900":"bg-surface-200 text-surface-900"}`]),key:a,onClick:u=>t.loadTheme(n.name)},e.toDisplayString(n.name),11,te))),128))])],2)])],2)):e.createCommentVNode("",!0)])}var oe=b(J,[["render",ne],["__scopeId","data-v-3283243a"]]);function se(t){for(const s in D)t.component(s,D[s])}var re={install:se};i.DarkModeSwitch=V,i.MyConstants=G,i.MyUtil=W,i.ThemeSwitcher=oe,i.VButton=L,i.default=re,i.useDarkMode=M,i.useTheme=z,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",

package/src/themes/{theme-vuetiful.css → theme-skeleton.css}

@@ -99,19 +99,19 @@
 }
 
 /* Headings */
-[data-theme='vuetiful'] h1,
-[data-theme='vuetiful'] h2,
-[data-theme='vuetiful'] h3,
-[data-theme='vuetiful'] h4,
-[data-theme='vuetiful'] h5,
-[data-theme='vuetiful'] h6 {
+[data-theme='skeleton'] h1,
+[data-theme='skeleton'] h2,
+[data-theme='skeleton'] h3,
+[data-theme='skeleton'] h4,
+[data-theme='skeleton'] h5,
+[data-theme='skeleton'] h6 {
 	font-weight: bold;
 }
 
-/* Applied to body with `<body data-theme="vuetiful">` */
+/* Applied to body with `<body data-theme="skeleton">` */
 /* Created with: https://csshero.org/mesher/ */
 /* prettier-ignore */
-[data-theme='vuetiful'] {
+[data-theme='skeleton'] {
 	background-image:
 			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
 			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);

package/src/themes/{theme-modern.css → theme-vuetiful-0.0.1.css}

@@ -7,9 +7,9 @@
 	--theme-font-family-heading: 'Quicksand', sans-serif;
 	--theme-font-color-base: var(--color-surface-900);
 	--theme-font-color-dark: var(--color-tertiary-50);
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 24px;
-	--theme-border-base: 3px;
+	--theme-rounded-base: 12px;
+	--theme-rounded-container: 12px;
+	--theme-border-base: 0px;
 	/* =~= Theme On-X Colors =~= */
 	--on-primary: 0 0 0;
 	--on-secondary: 0 0 0;
@@ -98,27 +98,27 @@
 	--color-surface-900: 49 50 118; /* ⬅ #313276 */
 }
 
-[data-theme='modern'] h1,
-[data-theme='modern'] h2,
-[data-theme='modern'] h3,
-[data-theme='modern'] h4,
-[data-theme='modern'] h5,
-[data-theme='modern'] h6,
-[data-theme='modern'] a,
-[data-theme='modern'] button {
+[data-theme='vuetiful'] h1,
+[data-theme='vuetiful'] h2,
+[data-theme='vuetiful'] h3,
+[data-theme='vuetiful'] h4,
+[data-theme='vuetiful'] h5,
+[data-theme='vuetiful'] h6,
+[data-theme='vuetiful'] a,
+[data-theme='vuetiful'] button {
 	font-weight: bold;
 }
 
-/* Applied to body with `<body data-theme="modern">` */
+/* Applied to body with `<body data-theme="vuetiful">` */
 /* Created with: https://csshero.org/mesher/ */
-[data-theme='modern'] {
+[data-theme='vuetiful'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
 		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
 		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
 }
-.dark [data-theme='modern'] {
+.dark [data-theme='vuetiful'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),

package/src/utils/dark-mode/dark-mode.ts

@@ -65,6 +65,7 @@ const useDarkMode = () => {
       const elemHtmlClasses = document.documentElement.classList;
       const classDark = `dark`;
       value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+      setModeCurrent(value);
     };
     setMode(mql.matches);
     mql.onchange = () => {

package/src/utils/theme/theme-switcher.vue

@@ -15,15 +15,15 @@
             <li
               class="h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900"
               :class="`${listItemClasses} ${
-                chosenTheme === theme
+                chosenTheme === theme.name
                   ? 'bg-primary-50 text-primary-900'
                   : 'bg-surface-200 text-surface-900'
               }`"
               v-for="(theme, index) in themes"
               :key="index"
-              @click="loadTheme(theme)"
+              @click="loadTheme(theme.name)"
             >
-              {{ theme }}
+              {{ theme.name }}
             </li>
           </ul>
         </nav>

package/src/utils/theme/theme.ts

@@ -1,37 +1,71 @@
-import { readonly, ref } from "vue";
+import { readonly, Ref, ref } from "vue";
 import { usePlatform } from "../platform/platform";
 
 const { isBrowser } = usePlatform();
-const chosenTheme = ref("vuetiful");
 
-const useTheme = () => {
-  const themes = ["vuetiful", "modern", "rocket", "sahara", "seafoam", "seasonal", "vintage"];
-  const theme = ref("vuetiful");
+interface Theme {
+  name: string;
+  url: string;
+}
+
+const THEMES = {
+  VUETIFUL: "vuetiful",
+  ROCKET: "rocket",
+  SAHARA: "sahara",
+  SEAFOAM: "seafoam",
+  SEASONAL: "seasonal",
+  SKELETON: "skeleton",
+  VINTAGE: "vintage",
+};
+
+const builtInUrl = (name: string): string => {
+  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
+};
+
+const builtInThemes: Array<Theme> = [
+  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
+  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
+  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
+  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
+  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
+  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
+  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) },
+];
 
+const themes: Ref<Array<Theme>> = ref([...builtInThemes]);
+
+const defaultTheme = THEMES.VUETIFUL;
+const chosenTheme = ref(defaultTheme);
+
+const useTheme = () => {
   const setTheme = (name: string): void => {
-    theme.value = name;
+    const theme = themes.value.find((t) => t.name === name);
+    if (!theme) return;
+
     if (isBrowser) {
-      localStorage.setItem("vuetiful-theme", name);
-      applyTheme(name);
+      localStorage.setItem("vuetiful-theme", theme.name);
+      document.body.setAttribute("data-theme", theme.name);
     }
   };
 
-  const applyTheme = (name: string): void => {
-    document.body.setAttribute("data-theme", name);
-  };
-
   const initializeTheme = (callback?: Function): void => {
     if (isBrowser) {
-      const themeName = localStorage.getItem("vuetiful-theme") ?? "vuetiful";
-      if (themeName) loadTheme(themeName, callback);
+      const storedTheme = localStorage.getItem("vuetiful-theme");
+      if (storedTheme) loadTheme(storedTheme, callback);
+      else loadTheme(defaultTheme, callback);
     }
   };
 
-  const loadTheme = (theme: string, callback?: Function) => {
-    chosenTheme.value = theme;
-    const existingStyle = document.getElementById("theme");
+  const loadTheme = (themeName: string, callback?: Function) => {
+    let themeToLoad = themes.value.find((t) => t.name === themeName);
+    if (!themeToLoad)
+      themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
+
+    const theme: Theme = themeToLoad;
+    chosenTheme.value = theme.name;
 
-    const themeUrl = `https://code-coaching.dev/vuetiful-themes/theme-${theme}.css`;
+    const existingStyle = document.getElementById("theme");
+    let themeUrl = theme.url;
 
     const link = document.createElement("link");
     link.id = "theme";
@@ -40,10 +74,9 @@ const useTheme = () => {
     link.rel = "stylesheet";
     link.onload = () => {
       if (existingStyle) existingStyle.remove();
-      setTheme(theme);
+      setTheme(theme.name);
       if (callback) {
         callback();
-        console.log("callback")
       }
     };
 
@@ -51,14 +84,29 @@ const useTheme = () => {
     if (head) head.appendChild(link);
   };
 
+  const registerAllBuiltInThemes = (): Array<Theme> => {
+    return [...builtInThemes];
+  };
+
+  const registerTheme = (name: string, url: string): Theme => {
+    return { url, name };
+  };
+
+  const overwriteThemes = (newThemes: Array<Theme>): void => {
+    themes.value = [...newThemes];
+  };
+
   return {
-    theme: readonly(theme),
     themes: readonly(themes),
     chosenTheme: readonly(chosenTheme),
 
-    setTheme,
     initializeTheme,
     loadTheme,
+
+    THEMES,
+    overwriteThemes,
+    registerAllBuiltInThemes,
+    registerTheme,
   };
 };