@code-coaching/vuetiful 0.0.0

package/README.md

@@ -0,0 +1,143 @@
+[![Netlify Status](https://api.netlify.com/api/v1/badges/b1b84831-789e-4629-a9e3-55a36e136653/deploy-status)](https://app.netlify.com/sites/sharp-babbage-154f0a/deploys)
+
+# Vue Component Library Starter
+
+> Create your own [Vue 3](https://v3.vuejs.org/) component library with TypeScript, [Vite](https://vitejs.dev) and [VitePress](https://vitepress.vuejs.org/).
+
+Sooner or later, you will find that creating a component library is much better than having all components inside your app project. A component library force to you remove app specific logic from your components, making it easier to test and reuse them in other apps.
+
+Once the components are in a library, documentation becomes critical. This starter project includes a documentation app powered by VitePress. It not only documents the usage of the component, but also provides a testing bed during the development of components. See the generated documentation app [here](https://sharp-babbage-154f0a.netlify.com/).
+
+## Setup
+
+> When running `docs:dev` for the first time, you may encounter error like `vitepress data not properly injected in app` in your browser. Restart the server and reload the browser. Please refer to [issue #30](https://github.com/wuruoyun/vue-component-lib-starter/issues/30) for more details.
+
+```bash
+# install dependencies
+npm install
+
+# start the doc app with hot reload, great for testing components
+npm run docs:dev
+
+# build the library, available under dist
+npm run build
+
+# build the doc app, available under docs/.vitepress/dist
+npm run docs:build
+
+# preview the doc app locally from docs/.vitepress/dist
+npm run docs:serve
+```
+
+You may use [Netlify](https://www.netlify.com/) to auto build and deloy the doc app like this project does.
+
+## Develop and test locally
+
+The best way to develop and test your component is by creating demos in `docs/components/demo` folder, as shown by the example components.
+
+If you want to test the library in your Vue3 app locally:
+
+- In the root folder of this library, run `npm link`. This will create a symbolic link to the library.
+- In the root folder of your client app, run `npm link vuetiful`. This will add the symbolic link to the `node_modules` folder in your client app.
+- You can now import `vuetiful` in your client app.
+
+There is no need to add `vuetiful` to your client app's dependency in this case.
+
+If you made changes to the library, you will need to rebuild the library. Your Vue3 app shall hot reload when the building of library is completed.
+
+## How it works
+
+### Components
+
+The library is a [Vue plugin](https://v3.vuejs.org/guide/plugins.html). The `install` function in [index.ts](src/index.ts) registers all components under [components](src/components) to Vue globably.
+
+The components are also exported by [index.ts](src/index.ts) so that the client app can import them individually and register them locally, instead of using the library as a plugin. This may be a better option if the client app only use a small set of components in your library.
+
+### Utilities and constants
+
+The library includes example utilities and constants. They are also exported in [index.ts](src/index.ts). The client app may use them as below:
+
+```js
+<script lang="ts">
+import { MyConstants, MyUtil } from 'vuetiful'
+
+export default {
+  data () {
+    return {
+      magicNum: MyConstants.MAGIC_NUM
+    }
+  },
+  methods: {
+    add (a:number, b:number) {
+      return MyUtil.add(a, b)
+    }
+  }
+}
+</script>
+```
+
+### Styling
+
+Individual compopnent may have styles defined in its `.vue` file. They will be processed, combined and minified into `dist/style.css`, which is included in the `exports` list in [package.json](package.json).
+
+If you have library level styles shared by all components in the library, you may add them to [src/assets/main.css](src/assets/main.css). This file is imported in [index.ts](src/index.ts), therefore the processed styles are also included into `dist/style.css`. To avoid conflicting with other global styles, consider pre-fixing the class names or wrapping them into a namespace class.
+
+If you have your own special set of SVG icons, you may create a font file (`.woff` format) using tools like [Icomoon](https://icomoon.io/) or [Fontello](https://fontello.com/). This starter includes an example font file [src/assets/fonts/myfont.woff](src/assets/fonts/myfont.woff) and references it in [src/assets/main.css](src/assets/main.css), with utility icon CSS classes. An icon from the font file is used in Component A. Vite will include the font file into the build, see [https://vitejs.dev/guide/assets.html](https://vitejs.dev/guide/assets.html).
+
+The client app shall import `style.css`, usually in the entry file:
+
+```js
+import "vuetiful/dist/style.css";
+```
+
+### Third-party dependencies
+
+Third-party libraries used by you library may bloat up the size of your library, if you simply add them to the `dependencies` in [package.json](package.json).
+
+The following are some strategies to reduce the size of your library:
+
+### Type generation
+
+In [tsconfig.json](tsconfig.json), the following options instructs `tsc` to emit declaration (`.d.ts` files) only, as `vite build` handles the `.js` file generation. The generated `.d.ts` files are sent to `dist/types` folder.
+
+```json
+"compilerOptions": {
+  "declaration": true,
+  "emitDeclarationOnly": true,
+  "declarationDir": "./dist/types"
+}
+```
+
+In [package.json](package.json), the line below locates the generated types for library client.
+
+```json
+"types": "./dist/types/index.d.ts",
+```
+
+> In [vite.config.ts](vite.config.ts), `build.emptyOutDir` is set to `false` and `rimraf` is used instead to remove the `dist` folder before the build. This is to avoid the `dist/types` folder generated by `tsc` being deleted when running `vite build`.
+
+### Configuration
+
+#### TypeScript
+
+In [tsconfig.json](tsconfig.js), set the following as recommended by Vite (since esbuild is used). However, enableing this option leads to https://github.com/vitejs/vite/issues/5814. The workaround is to also enable `compilerOptions.skipLibCheck`.
+
+```json
+"compilerOptions": {
+  "isolatedModules": true
+}
+```
+
+In [tsconfig.json](tsconfig.js), set the following to address [Issue #32](https://github.com/wuruoyun/vue-component-lib-starter/issues/32). The solution is from https://github.com/johnsoncodehk/volar/discussions/592.
+
+```json
+"compilerOptions": {
+  "types": [
+    "vite/client"
+  ]
+}
+```
+
+#### Dependencies
+
+In [package.json](package.json), Vue and PrimeVue are declared in both `peerDependencies` and `devDependencies`. The former requires the client app to add these dependencies, and the later makes it easier to setup this library by simply running `npm install`.

package/dist/style.css

@@ -0,0 +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}