From ea4193e6482da4bbc697071ded91f4bf3959d529 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Mon, 26 Sep 2022 23:27:03 +0100
Subject: [PATCH 01/16] feat: add basic nav [wip], add hero [wip]

---
 .eslintrc                                     |   1 +
 playground/app.vue                            | 263 +-----
 playground/assets/img/logo.svg                |  18 +
 playground/assets/img/mountains.svg           | 764 ++++++++++++++++++
 playground/components/Hero.vue                |  58 ++
 playground/components/Navigation.vue          | 136 ++++
 playground/composables/useDarkmode.ts         |  32 +
 .../composables/useWindowScrollFixed.ts       |  16 +
 playground/nuxt.config.ts                     |   9 +
 playground/pages/api.vue                      |   3 +
 playground/pages/index.vue                    | 269 ++++++
 11 files changed, 1312 insertions(+), 257 deletions(-)
 create mode 100644 playground/assets/img/logo.svg
 create mode 100644 playground/assets/img/mountains.svg
 create mode 100644 playground/components/Hero.vue
 create mode 100644 playground/components/Navigation.vue
 create mode 100644 playground/composables/useDarkmode.ts
 create mode 100644 playground/composables/useWindowScrollFixed.ts
 create mode 100644 playground/pages/api.vue
 create mode 100644 playground/pages/index.vue

diff --git a/.eslintrc b/.eslintrc
index adaea51..0facac4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -20,6 +20,7 @@
       "error",
       { "whitelist": ["^ninja-(.*)$"] }
     ],
+    "tailwindcss/classnames-order": "off",
     "prettier-vue/prettier": [
       "error",
       {
diff --git a/playground/app.vue b/playground/app.vue
index 3c207aa..0a7dc7f 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,264 +1,13 @@
-<script setup>
-import { h } from 'vue'
-import CustomToast from './components/CustomToast.vue'
-import AdvancedToast from './components/AdvancedToast.vue'
-import { useNuxtApp } from '#app'
-
-const { $nt } = useNuxtApp()
-let i = 0
-
-function showBasicToast() {
-  i++
-  $nt.show(`Hello, ${i} world!`)
-}
-
-function showCustomToast() {
-  i++
-  $nt.show({
-    content: () =>
-      h(CustomToast, {
-        message: `Hello ${i} from Nuxt module playground!`
-      }),
-    transition: {
-      name: 'fadeOut'
-    },
-    theme: {
-      containerId: 'nt-container-bottom-right',
-      containerClass: [
-        'absolute',
-        'inset-0',
-        'pointer-events-none',
-        'p-4',
-        'flex',
-        'flex-col-reverse',
-        'items-start',
-        'gap-2'
-      ].join(' '),
-      wrapperClass: 'pointer-events-auto cursor-pointer'
-    }
-  })
-}
-
-async function showAdvancedToast() {
-  i++
-  const toast = await $nt.show({
-    content: () =>
-      h(AdvancedToast, {
-        message: `Hello ${i} from Nuxt module playground!`
-      }),
-    dismissible: false,
-    maxToasts: 1,
-    theme: {
-      containerId: 'nt-container-top-left',
-      containerClass: [
-        'absolute',
-        'inset-0',
-        'pointer-events-none',
-        'p-4',
-        'flex',
-        'flex-col',
-        'items-end',
-        'gap-2'
-      ].join(' '),
-      wrapperClass: [
-        'pointer-events-auto',
-        'rounded',
-        'outline-slate-300',
-        'outline-offset-2',
-        'focus:outline',
-        'focus:outline-2',
-        'focus-within:outline',
-        'focus-within:outline-2'
-      ].join(' ')
-    },
-    transition: {
-      enterActiveClass: 'transition duration-300 ease-out',
-      enterFromClass: 'transform translate-x-full opacity-0',
-      enterToClass: 'transform translate-x-0 opacity-100',
-      leaveActiveClass: 'transition duration-300 ease-in',
-      leaveFromClass: 'transform translate-x-0 opacity-100',
-      leaveToClass: 'transform translate-x-full opacity-0'
-    }
-  })
-
-  toast.el.focus()
-}
-function clearAllToast() {
-  $nt.clearAll()
-}
-function clearTopLeftToast() {
-  $nt.clear('nt-container-top-left')
-}
-</script>
-
 <template>
   <div>
-    <p>Nuxt module playground!</p>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="showBasicToast"
-    >
-      show basic toast
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="showCustomToast"
-    >
-      show custom toast
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="showAdvancedToast"
-    >
-      show advanced toast
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="clearTopLeftToast"
-    >
-      clear advanced toasts
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="clearAllToast"
-    >
-      clear all toast
-    </button>
+    <Navigation />
+    <NuxtPage />
   </div>
 </template>
 
 <style>
-// Animations are taken from animate.css
-// https://daneden.github.io/animate.css
-.fadeOut {
-  animation-name: fadeOut;
-}
-.fadeInDown {
-  animation-name: fadeInDown;
-}
-.fadeInUp {
-  animation-name: fadeInUp;
-}
-.fade-enter-active {
-  transition: opacity 300ms ease-in;
-}
-.fade-leave-active {
-  transition: opacity 150ms ease-out;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-@-moz-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-o-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-moz-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-o-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-moz-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-o-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
+html,
+body {
+  font-family: 'Inter', sans-serif;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/playground/assets/img/logo.svg b/playground/assets/img/logo.svg
new file mode 100644
index 0000000..a95788d
--- /dev/null
+++ b/playground/assets/img/logo.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6E8EE6;}
+	.st1{fill:#5277CC;}
+	.st2{fill:#B8C6F2;}
+</style>
+<g>
+	<path class="st0" d="M17.6,164.7c0.1,36.4,17.4,70,46.6,97l0.3,213.4c0,12.3,10,22.3,22.3,22.3l327.2-0.5c12.3,0,22.3-10,22.3-22.3
+		L436,261.2c29.1-27.1,46.4-60.7,46.3-97.1C482.2,74.8,378.1,2.5,249.7,2.7c-2.3,0-4.6,0-6.8,0.1C117.7,5.5,17.5,77,17.6,164.7z"/>
+	<path class="st1" d="M423.1,474.6l-0.3-223.1l7.3-6.6c26.3-23.9,40.2-51.8,40.2-80.7C470.1,87.2,373.5,24.8,254.9,25
+		c-118.6,0.2-215.1,62.8-215,139.7c0,28.9,14,56.8,40.4,80.6l7.3,6.6l0.3,223.1L423.1,474.6z"/>
+	<path class="st2" d="M414,474.6l-0.3-223.1l7.1-6.6c25.7-23.9,39.3-51.8,39.2-80.7C459.9,87.2,365.6,24.8,249.8,25
+		c-115.8,0.2-210,62.8-209.9,139.7c0,28.9,13.7,56.8,39.4,80.6l7.2,6.6l0.3,223.1L414,474.6z"/>
+</g>
+</svg>
diff --git a/playground/assets/img/mountains.svg b/playground/assets/img/mountains.svg
new file mode 100644
index 0000000..66b7caf
--- /dev/null
+++ b/playground/assets/img/mountains.svg
@@ -0,0 +1,764 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 739 240.9" style="enable-background:new 0 0 739 240.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B8C6F2;}
+	.st1{fill:#6E8EE6;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M259.7,56.7c-1.3,1.1-2.9,1.7-4.2,2.8c-1.9,1.5-2.6,3.7-4,5.5c-1.1,1.4-2.5,3.1-4.2,3.8
+			c-1.8,0.7-3.6,0.3-5.2,1.7c-1.2,1-1.5,2.4-2.5,3.5c-0.7,0.8-1.8,1.3-2.7,1.9c-1.9,1.4-2.9,3.1-4.6,4.6c-2.3,2.1-8.6,1.1-8.7,5.5
+			c-3.3,0.2-6.4,3.1-7.5,6c-0.8-0.4-1.7-0.5-2.6-0.8c-2.1-0.7-3.5-1.8-5.4-2.8c-2.1-1.2-4.5-3-6.8-3.6c-1.1-0.3-5.3-1.1-6.2-0.3
+			c-0.6,0.5-0.1,2.2-1.2,2.7c-0.9,0.5-1.1-0.3-2-0.4c-2.3-0.4-1.6,0.1-3.9,1.5c-1.9,1.1-3,1.3-4.2,3.1c-1.4,2-3.7,10.2-6.7,9.8
+			c-0.7,1.9-1.8,3.6-1.4,6.2c-1.4,0.1-3.8-0.6-5,0.4c-0.6,0.5-0.9,2.1-1.6,3.4c-0.8,1.5-2.1,2.7-2.5,3.5c-0.8,1.7,0.2,3.2-1.3,4.6
+			c-1.9,1.6-4.1,2.2-6.3,3.4c-2.6,1.5-5,3-7.4,5c-2.1,1.7-4.5,2.6-5.6,5.1c-0.5,1.3-0.7,2.8-1.3,4.1c-0.4,0.8-1.4,1.6-1.4,2.5
+			c-0.1,0.8,0.5,1.5,0.9,2.2c-0.5,1.4-1.3,1.3-2.2,2.4c-0.6,0.7-0.4,1.4-0.7,2.2c-0.4,1-1,1.7-1.2,2.7c-0.3,1-0.2,2.1-0.6,3.2
+			c-1.9,5.1-6.3,7.8-9.3,12.1c-0.9-0.7-1.6-1.9-2.6-2.5c-3.2,3.4-6.7,5.9-10.8,8c-9.5,5-16.5,13.5-25.4,19.4
+			c-4,2.6-7.9,5.7-11.9,8.4c-1.5,1-3.4,2.5-5.4,3.6c0.2-0.1,0.4-0.2,0.6-0.2c1.8-0.7,3.1-1.9,4.7-2.9c1.9-1,4-1.3,5.9-2.3
+			c5.8-2.7,10.9-6.7,16.7-9.3c2.2-1,4.6-2.4,7-3c1.4-0.3,3-0.4,4.4-0.7c-0.6,3.1,4-1.8,4.7-2.4c2.1-1.9,5.1-4.2,5.7-7
+			c0.6,0.2,1.6,0,2.2,0.3c1,0.4,1.5,1.6,2.2,2.2c1.5-3.1,4.2-5.9,6-8.9c0.6-1,1.1-2.6,1.8-3.5c0.7-0.8,1.9-1.1,2.7-1.7
+			c1.7-1.4,2.8-1.9,4-3.9c1-1.7,1.7-3.3,3.3-3.8c2.6,2.4,5.5,5.2,5.8,8.8c0.2,2.8-0.1,3.9,2.2,5.8c1.2,1,1.5,2,2.3,3.1
+			c0.9-0.1,2.2,0.8,3.2,1.8c-1-1.6-1.4-4-2-5.8c-1.2-3.3-2.4-6.4-3.5-9.7c1,2,1.8,4.2,2.5,6.2c2.2,6.9,7.5,12.4,9.2,19.5
+			c-1.2-4.2-1.5-8.7-2.2-13c-0.7-4.6-1.4-9.6-1.6-14.3c-0.1-3-0.1-7.1,0.8-10c0.6-2,2-3.7,2.6-5.7c0.4-1.4,0.4-2.9,1-4.2
+			c0.5-1.1,1.6-1.8,2.1-2.7c0.7-1.3,0.6-3.5,2.2-4.1c2.1,2.5,2.4,5.1,3,8.1c0.3,1.8,1.4,3.5,1.8,5.3c0.6,2.6,1.4,5.1,2,7.7
+			c0.7,3.1,0.9,5.9,2.2,8.8c1.4,3.2,3.7,5.3,5.8,8.1c-1.5-2.6-1.6-5.7-1.9-8.7c-0.5-7.3,0.9-15.6,4.9-21.8c1.5-2.4,3.3-2.5,3.8-5.5
+			c0.3-1.8,0.3-3.3,1.2-5c0.6-1.1,1.6-1.3,2.1-2c2.1-2.6,0.8-7.2,3.8-9.6c2.4-1.9,3.3,0.2,4.8,2c2,2.4,4,4.5,5.6,7.2
+			c1.4,2.3,3.6,4,4.7,6.5c0.7,1.6,1.1,3.5,1.7,5.2c0.8,2.4,1.5,4.7,2.5,7c0.2,0.6,0.3,1.1,0.6,1.6c0.6,1.2,2,2.1,2.5,2.9
+			c0.8,1.2,0.7,3.2,0.9,4.6c0.3,2.1,1.1,4,1.5,6.1c0.9,4.5,1.3,9.6,1.5,14.2c1.8-3.9,2.4-8,4.5-11.7c3.6-6.5,2.4-11.7,1-19
+			c-0.9-4.5-1.4-7.3-4.4-10.7c-3.1-3.6-4.9-8.1-8.1-11.8c-3.2-3.8-6.1-8.2-9-12.3c-1.4-2-1.9-4.4-3.3-6.5c-1.2-1.9-2.5-3.5-3.4-5.6
+			c5.1,2.1,10.4,4.1,14.7,7.7c1.8,1.5,3.2,3.2,4.9,4.8c2.2,2.1,5.1,2.7,7.1,5.2c2.4,3,2.6,6.1,3.9,9.6c0.8,2.2,2.8,3.3,4,5.2
+			c1.3,2,1.7,4.1,3.2,5.9c2.6,3.3,5.1,6.7,8,9.8c-3.3-5.7-4.9-12.3-6.6-18.6c-0.9-3.4-1.1-7-2.4-10.3c-1.4-3.5-4.1-6.7-5.2-10.3
+			c3,2,4.1,5.4,6.3,8.1c2.5,3.1,4.1,8.1,7.7,10.1c-0.7-4.5-3.4-8.3-3.4-13c0-2.1-0.5-3.7-0.8-5.6c-0.4-2.6-0.1-5.8-0.2-8.5
+			c0.8,0.7,2.9,1.1,3.9,1.4c1.3,0.3,3.6,1,4.8,1c0.1-2.6-0.1-5.2,0-7.9c0.1-2.1,0.8-3.4,1.3-5.3c0.3-1.3,0.1-2.5,0.3-3.8
+			c0.2-1.5,0.8-2.6,0.7-4.2c-0.1-1.4-0.7-2.8-0.6-4.1c0.1-1.6,1.3-2.8,1.7-4.3c0.6-2.1-0.7-4.3,0.3-6.2c0.9-1.7,3.3-2.7,3.2-5
+			C259.4,56.2,259.7,56.4,259.7,56.7z"/>
+		<path class="st0" d="M333.5,112.8c3.8,5.8,5.6,14.7,16.5,18.7c-2.8-4.9-0.9-17.4-3.5-25.4c-2.4-7,0.7-14.5-6.3-18.9
+			c0.5-0.2-2.9-3.5-2.4-3.7c-2-6.2,2.8-7.2,4.7-12.1c0.6-1.6,4.3-2,4.9-4.2c0.7-2.5,2.3-6.1,2-8.7c-0.4-3.7,3-6.2,3.8-10.8
+			c0.4-2.4-0.1-4.9,0.5-7.1c0.7-2.5,3.1-3.4,2.7-6.8c-4.9,5.4-12.3,9.4-17,15c-4.4,5.2-3.7,14.7-10.2,19.6
+			c-1.9-0.9-6.3,6.4-11.2,11.7c-3.5,3.8-9.7,7.4-10.6,9.1c-3,5.5-8.3,14.4-11.2,14.9c-1.9,0.3-4.4-1.7-7-4.1
+			c-0.3,3.5,2.8,5.1,3.2,8.8c0.1,1.1,5.4,6.7,7.1,9.1c4.8,7,6.2,8.7,6.7,16c0.3,1.9,2.9,5.7,3.7,5.6c-1.7-5.4-2-16-5.2-20.3
+			c2.7-1.5,4.9-3.1,7-5.6c1.8-2.2,3.4-8.3,5.7-10.1c5.1-4,8.1-6.7,8.1-6.7s4,1,4.9,6.2C330.7,105.9,330.9,108.8,333.5,112.8z"/>
+		<path class="st0" d="M74.3,201.3c-1.6,0.6-3.5,1.2-5.1,1.4C70.9,202.8,72.6,202.2,74.3,201.3z"/>
+		<path class="st0" d="M135.9,93.5c0.1,0,0.1-0.1,0.2-0.1C135.8,93.2,135.5,93.1,135.9,93.5z"/>
+		<path class="st0" d="M136.1,126.5c0,0.7,0,1.3,0,2C136.1,128.1,136.2,127.2,136.1,126.5z"/>
+		<path class="st0" d="M101.6,128.7c1.4,1.9,0.9,4,3,5.5c1,0.7,2.3,0.7,3.3,1.3c0.6,0.4,1,1,1.6,1.4c0.9,0.6,1.7,1,2.6,1.7
+			c2.7,2.2,5.6,4.4,8,6.8c2.7,2.7,5.2,6.1,7.6,9.1c1.8,2.2,3,4.9,4.9,7.1c-0.3-1.4-0.3-2.6-1.4-3.7c-3.1-3.1-2.3-6.1-3.3-9
+			c-0.8-2.3-3.1-3.5-4.4-5.7c-1.1-2-3.6-4.7-4-6.9c-0.6-3,3.2-1.9,3.2-3.5c0-0.6-1.8-2-2-2.9c-0.3-1.1-0.1-1.9,0.4-2.8
+			c1.8-2.9,5.9-6.5,9.4-4.8c1.6,0.8,2.1,2.7,3.7,3.3c0.6,0.3,0.5-1,1.4,0.1c0.1,0.2,0.2,0.5,0.2,0.9c0.1-3.1,0.3-6.1,0.1-9.2
+			c-0.2-4.4,0.2-8.6-0.3-13c-0.2-2.1-0.2-3.7,0.1-5.7c0.2-1.4-1.1-4.2,0.1-5c-0.1-0.1-0.1-0.1-0.2-0.2c-1.5,1.1-3.7,3.5-5.5,3.7
+			c-0.5,0.1-1.1-0.6-1.8-0.5c-1.2,0.2-2.4,1.6-3.2,2.2c-1.3,0.9-3.2,1.4-4.3,2.4c-0.7,0.6-0.9,1.6-1.5,2.3c-1.1,1.3-3.8,3.2-5.5,3.5
+			c-0.6,0.1-1.2-0.3-1.9-0.1c-0.8,0.3-1.6,1.5-2.3,2c-1.5,1.3-1.4,1.5-1.8,3.2c-0.7,3-3.9,5.7-6.4,7.4c-2.2,1.5-3.5,3.8-5.5,5.6
+			C97.9,126.6,100.3,127,101.6,128.7z"/>
+		<path class="st0" d="M68.5,164.3c-0.3-2.7,0.4-5.5,1.9-7.7c1.8-2.7,2.4-3.9,2.1-6.9c-0.2-2,0.7-3.8,1.7-5.6c1.6-3,2.7-6.2,4.2-9.2
+			c1.1-2.1,2.9-4.6,2.3-7.2c-0.6-2.6-2.7-5.8-2.5-8.5c-1.3,0.2-1.1,0.1-0.9,0c-2,0.8-3.9,1.7-5.7,3c-2.7,2-5.2,3.2-8.4,4.4
+			c-2.9,1.1-5.8,1.9-8.2,4c-2,1.8-3.7,3.9-5.8,5.7c-2.4,2-2.8,2.1-5.5,1.8c-3.2-0.4-5.5,0.4-7.9,2.3c-2.7,2.2-5.2,4-7.6,6.5
+			c-0.8,0.8-1.6,1.8-2.5,2.8c0.1-0.6,0-1.3-0.4-2.2c-0.5-1.3-1.9-3-2-4c-0.2-1.7,1.7-3.4,2.4-4.8c0.4-0.7,0.5-1.6,0.8-2.3
+			c0.4-0.7,1.4-1.3,1.6-2.1c0.1-0.5-0.4-1.5-0.3-2.1c0.1-0.8,0.6-1.6,0.8-2.4c-1,2.2-6.1,4.3-8.1,5.6c-2.2,1.4-3.6,4.2-5.1,6.4
+			c-1.8,2.5-3.7,4.4-6.5,6.3c-0.9,0.6-5.2,4.6-3.4,5.4c-0.3,0.5-0.4,1.1-0.3,1.7c0.4-0.1,0.8,0.1,1.2,0c0.1,1.3-1.1,2.4-2.2,3.1
+			c-0.3,0.1-0.6,0.2-0.9,0.2c0.2,0,0.4,0,0.5,0c-0.1,0.1-0.2,0.1-0.3,0.2c0.6-0.1,1.2-0.2,1.9-0.2c0.3,0.1,0.5,0.2,0.8,0.5
+			c0.8,0.9,0.1,1.3,0,2.5c2.3-0.2,6.2-4.2,8.2-1.4c1.6,2.3-1.3,5.8,0.7,8c0.7,0.8,1.4,0.5,2.1,0.9c1,0.6,1,0.6,1.5,1.9
+			c1.5-0.9,2.1-3.3,3.2-4.6c0.7,2.1-0.9,4.2-1.4,6.2c-0.7,2.5,0.2,5,0.7,7.4c0.6,2.5,0.4,4.8,0.5,7.3c0,2.8,1.4,2.9,2.8,4.9
+			c2.8-1.9,4.6-5,8-6.1c4.2-1.4,4.3,2.1,6.2,4.3c1.2-0.3,1.2-1.7,1.6-2.7c0.5-1.3,0.8-1.3,1.6-2c2-1.8,4.8-2.1,7.4-2.8
+			c2.8-0.8,3.6,1.3,3.7,4c0.2,3.7-0.2,7.4,0,11.1c1.8-2.3,2.3-5.6,3.8-8.2c0.9-1.5,1.5-2.9,2.3-4.4c1.5-3,4.7-6,7.9-7.1
+			c0.3-2.9,3.8-4.8,3.9-8.1C71,167.8,68.8,166.6,68.5,164.3z"/>
+		<path class="st0" d="M395.5,72.1c-0.2,1.6-0.3,2.7-0.3,3.9C395.4,74.8,395.6,73.5,395.5,72.1z"/>
+		<path class="st0" d="M407.9,84.5c-2,2.3-2.6,4.5-4.1,7c-3.5,5.8-12.2,12.4-18.2,15.5c4.2-5.2,3.3-12.1,5.7-18.8
+			c1-2.7,2.4-5.1,3.1-7.7c0.5-1.8,0.6-3.1,0.7-4.6c-0.8,2.9-2.5,5.3-3.2,7.3c-1.6,4.4-3.2,8.2-5.2,12.4c-1.8,3.9-3.7,6.4-6.9,9.6
+			c-2.5,2.5-5.1,7.4-7.9,8.7c1.1,4.1-2.7,5.5-4.3,8.4c-2.9,5.2-4.3,11.4-8.6,16.3c-0.8-1.2-2.3-1.7-3.3-2.5
+			c-3.4,7.1-7.5,14.8-14.2,18.6c-3.3,1.9-3.1,0.5-5.2,5.3c-1.8,4.3-4.6,7.8-6.7,11.8c3.1-0.6,5-2.2,7-4.5c1.5-1.7,3.9-6.1,3.9-6.1
+			s2.6,1.2,4.4-0.1c2.2-1.6,4.9-8.1,6.4-10.4c0.3,0.8,1.3,1.5,1.6,2.3c3.3-2.9,7.1-4.2,10.3-7.6c4.2-4.5,3.8-4.9,6.7-9.7
+			c0.5-0.8,1.7-1.5,2.8-3.1c0.5-0.7,0.3-3.8,0.3-3.8s3.2,1.1,3.5,0c0.9-3.2,2.8-4.1,3.9-5.2c3.3-3.4,14.4-3.6,12.3-9.9
+			c2.9-0.9,5.3-5,7.2-7.3c2.2-2.8,4.4-4.1,6.6-6.3c2.4-2.4,2.3-6,5.4-11.1c0.1-0.2-0.6-1.8,0.2-3.5c1.3-2.8,1.1-5.3,0.8-6.4
+			C412.2,80.7,409.6,82.6,407.9,84.5z"/>
+		<path class="st0" d="M476.5,119.1c0.1-4.5-0.2-8.4,1.6-12.8c1.4-3.5,4.5-6.5,4.4-10.5c-0.1-4-2.3-7.5-3.8-11
+			c-0.7-1.8-3.3-5.3,0-6.3c0.9,1.3,2.8,1.3,4,2.7c1.1,1.3,1.8,2.6,3.2,3.6c1.9,1.3,3.2,2,4.7,3.9c1.4,1.8,2.6,3.9,4.1,5.6
+			c-0.1-3.5,0.8-7.2,0.5-10.7c-0.2-2.3-0.7-5.4-1.8-7.5c-1-1.9-2.9-2.9-3.9-4.8c-1.2-2.4-0.3-4-2.9-5.3c-1.9-1-4-0.9-3.6-3.8
+			c-2.8,1-5.4,2.7-7.5,3.9c-3.8,2.2-2.1-1.7-3.2-4.1c-3,3.1-8,6.4-11.7,8.6c0-1,0-2,0-3c-1.8,2.1-3,3.8-4.1,6.4
+			c-0.9,2-3.2,5.9-2.3,7.9c2.3-4.2,6.2-6,9.2-9.8c0.1,3.6-1.6,7.4-1.2,10.9c1.1-0.5,1.6-1.9,2.7-2.5c0.4-0.2,1.6-0.4,1.8-0.5
+			c0.7-0.5,2.2-1.4,3.1-2.5c1.2,2.9-1.6,8.9-3.3,11.2c-1.4-0.1-1.9-1.5-2.2-2.8c-1,1.5,0,3.7-0.2,5.4c-0.2,1.5-0.7,2.7-1.3,4.2
+			c-0.7,1.8-1.4,2.8-0.9,4.8c0.3,1.3,1.3,1.8,0.7,3.1c-1.4-0.8-3-0.5-4.5-1.4c-1.3-0.7-1.7-1.8-3.5-1.4c1.2,2.5-1.3,4.3,1.9,5.4
+			c2.7,0.9,3.8-0.1,6.4,1.7C467.1,110.4,470.9,118,476.5,119.1z"/>
+		<path class="st0" d="M577.1,115.5c-0.3-1.2,0.1-2.3,1.4-2.2c0.2-1.3-0.8-2.2-1.1-3.3c1.6-0.2,2.7-1.6,4.4-1.5
+			c-1.4-0.3-3-0.4-4.5-0.5c-1.5-0.1-3.2-0.7-4.4-0.7c-1.7,0-6.4,2.6-7.3,4.3C568.9,112.8,574.1,116.7,577.1,115.5z"/>
+		<path class="st0" d="M667.4,143.3c-1.6,0.6-3.1,1-4.7,1.3c-2.9,0.6-5.4-0.7-8.4-0.8c-0.2,0.8,0.2,1.5,1,2
+			c-1.9,0.6-4.4,1.5-6.4,1.7c-1.7,0.2-2.9-0.6-4.5,0.4c0.3,0.4,0.4,1.4,0.8,1.9c-3.8,2-8.7,1.8-12.8,2.3c-8.6,1.2-20.1,4.8-28.1,0.1
+			c-3.2-1.9-5.6-4.7-9-6.5c-2.8-1.4-4.9-2.9-7.2-5c-1.3-1.1-2.9-2.8-5.4-1.7c5.4,5.3,6.1,15.1,4.8,22.2c-0.7,3.8-1.6,7.8-3.2,11.3
+			c-1.6,3.6-3.6,4.5-7.2,6c-3.2,1.3-5.4,2.3-8.6,1.1c-3.9-1.5-7.1-3.6-11.4-4c1,0.7,2.1,1.7,2.8,2.6c-2.7,1.8-5.1,3.9-8.2,4.8
+			c-4.3,1.3-11.2,4-15.6,2.9c1.4,0.2,2.6,0.9,4,1.3c-1.4,1.5-1.9,3-4.1,3.7c-2,0.7-4.5,0.9-6.7,1c-6.5,0.3-10.8-1-16.2-4.2
+			c-3.2-1.9-7.8-3.2-11.5-2c2.3,0.7,4.7,2.4,6.6,3.7c2.1,1.4,1.9,2.3,1.9,4.6c-4.9,0.1-10,1.6-15.4,2.5c-2.9,0.5-5.8,1.9-5.8,1.9
+			s5.5,4.4,6.7,5.9c-3,0-5.2,2.1-8.5,2c-2-0.1-9.2,0-6.8,4.2c-2.6,0.4-4.7,1.8-7.2,2.4c-1.8,0.4-3.8,0.2-5.5,1.2
+			c-1.3,0.8-2.1,2.1-2.7,3.5c4.3-3.8,7.4-3.5,12.8-2.3c0.7,0.1,1.9,0.7,2.6,0.7c1.9-0.2,0.9-0.5,2.4-1.6c2-1.4,3.5-1,5.8-1.2
+			c4-0.5,7.8-2.3,11.7-3.3c4.8-1.2,9.8-1.1,14.5-2.6c1.7-0.6,3.4-1.2,5.1-2c-1.2,2-4.5,2.7-6.3,3.6c-1.1,0.5-8.8,3.6-8.6,4.8
+			c0.3,2,2.8-0.4,3.2-0.5c1.5-0.5,3.5-0.1,4.8,0.9c3.1,2.4-0.4,4.8,0.2,8.1c1.8,0.2,3.9-0.8,5.6,0.1c1.2,0.6,1.5,1.5,2.7,2.1
+			c1.5,0.8,1.4-0.4,2.6,1.1c1,1.2,0.8,3,1.2,4.4c1.4-2.9,3-5.5,2-8.5c-0.7-2.2-2.2-2.4-3.7-4c-1.5-1.6-1.3-3.7-2.6-5.2
+			c-1.2-1.4-3.5-1.2-4.9-2c1.8-1.3,4.9-2.1,4-4.9c3.2-1.4,6.3-3,9.3-4.7c5.4-2.9,11.6-3.5,17.1-6.3c5.7-2.9,12.4-2.4,18.6-3.7
+			c5.6-1.2,10.6-4,16-5.6c7.6-2.3,14.7-6.2,21.7-9.9c5.8-3.1,11.1-6,17.2-8.5c5.9-2.4,11.4-6,17.1-9c1.4-0.7,2.8-1.3,4.3-1.9
+			c-0.6,1.1-2,1.6-2.5,2.6c-0.2,0.4,0.2,1.2,0,1.7c-0.3,0.7-0.9,1.1-1.3,1.8c-0.9,1.5-1.3,1.5-0.4,2.7c0.5,0.6,2.4,1.2,3,0.7
+			c1.7,1.7,1.7,4.2,1.8,6.4c0.3-0.2,0.4-0.1,0.7-0.4c-0.1,3.5-0.2,8.7-1.9,12.2c2.8-4.8,7.9-10.4,7.6-16.1c-0.1-2.1-0.8-4.6-1.7-6.5
+			c-0.6-1.4-4-4.1-4.1-5.7c3.6-1.3,7.4-2.4,10.9-4.1C658,148.9,664.9,147.5,667.4,143.3z"/>
+		<path class="st0" d="M705.2,153.8c-0.8-2.6-2.5-4.7-2.9-7.3c-0.4-2.3-0.8-4.5-1.4-6.7c-1-4-4.7-9.4-2.9-13.5
+			c-2,3.4-9.2,7.4-13.1,8.5c0.4,0.9,0.9,2.9,0.1,3.8c-1.2,1.5-0.6,0-1.7,0.4c-1.2,0.4-3.8,1.8-5.4,1.7c-0.8,3.3-1.6,8.2-5.1,8.7
+			c-0.5,0.1-1-0.3-1.7-0.2c-1.1,0.2-2.2,1.1-3.2,1.5c-2,0.8-3.5,0.9-5.4-0.1c-0.4,3.5,1.6,6.6,0.4,10.2c-1,3-3.5,5.2-4.1,8.4
+			c-0.1,0.6,0.4,1.3,0.3,1.8c-0.2,1.1-1.1,1.8-1.4,2.8c-0.4,1.3-0.5,2.8,0,4.1c0.4,1,1.1,1.6,1.4,2.7c0.3,0.9,0.9,2.6,1,3.5
+			c0.5,4.9-2.9,10.4-3.4,15.3c1.6-3.1,4.3-5.3,6-8c2.1-3.3,4.4-9.7,4.8-13.8c0.3-3.3-2.6-8-1.8-10.7c0.6-2,3.7-3.5,5.6-3.3
+			c0,1.3,0.3,2.7,1.4,3.3c2.4-2.8,1.5-7.1,2.7-10.4c2.1-5.7,7.3-9.4,12.2-12.3c1.8,1.7,1.3,9.7,3.3,9.6c0,1,0.1,2,0.3,3
+			c0.9-1.8,2.7-6.3,4.5-7.2c1.6-0.7,2.9,0.7,3.9,1.5c3.3,2.4,5.6,5.7,7.4,9.5C706.4,158.4,706,156.2,705.2,153.8z"/>
+		<path class="st0" d="M641,183.3c-0.2,0.3-0.4,0.7-0.6,1C640.6,184,640.8,183.6,641,183.3z"/>
+		<path class="st0" d="M621.8,166.5c-3,1.5-10.1,5-9.8,9c1.4,0,2.4-1.2,3.5-2.1c0.8,1,0.7,2.7,1.2,3.9c0.9,2.5,2.7,4.4,3.9,6.7
+			c1-2.6-1.6-6-0.7-9C620.8,171.9,621.8,170,621.8,166.5z"/>
+		<path class="st0" d="M600.8,183.9c-2.5-0.4-5,0.4-7.5-0.1c-1.4-0.3-2.5-0.6-4.4-0.2c-2.8,0.6-6.1,1-7.9,1.7
+			c-3.6,1.7-7.2,3-10.7,4.6c1.1,1,3.8,0.6,5.3,1.6c-1.4,1.9-3.1,3-4.2,5.2c3.1-0.3,6-1.7,9.2-2.1c2-0.2,5.5-1.4,7,0
+			c2.2,2,2.3,7.3,1.7,10c-0.7,3-2.2,6.5-4.1,8.9c3.2-2.6,5.9-5.5,9.4-7.6c-0.1,1-0.7,2-1.1,3c5-4.9,12.5-9.7,12.1-17.7
+			C605.4,187.8,604.6,184.5,600.8,183.9z"/>
+		<path class="st0" d="M559.5,214.5c-0.2-1.4,0.8-2.7,0.7-3.8c-0.1-0.9-0.9-2-1.6-2.9c-1.3-1.5-2.8-3-4.4-4.2c-1.8-1.3-4-2-5.6-3.5
+			c-2.5-2.3-0.2-2.9-0.8-5.7c-1.6,1.5-5.1,2.2-6.4,3.9c-0.5,0.7-2.2,5.1-2,5.6c0.5,1.2,3.6,1.9,4.6,2.5c1.4,0.8,2.9,1.7,4,2.9
+			c2.6,2.7,2.7,5,2.6,8.3c3.3,0.2,6.8-0.1,10,0.3c3.2,0.3,5.2,2.9,7.4,4.9c-0.8-2.1-0.4-5.3-2-7C564.8,214.6,561,213.3,559.5,214.5z
+			"/>
+		<path class="st0" d="M481.5,215.7c-0.9,1.1-2.5,1.1-3.7,0.7c-0.7,3.6-2.8,5-5.9,6.9c-2.3,1.4-3.9,1.1-1.9,3.2c2,2,1.8,1.1,0.1,3.7
+			c2.2,0.1,4.3,1.1,5.7,2.9c1.5,1.9,0.9,4.7,2.1,6.7c0.5-3.1,1.9-6.7,3.3-9.6c0.9-1.9,1.5-3.4,1.3-5.6c-0.2-1.7-0.7-3.2,0-5
+			C482.6,218.3,481.7,217.1,481.5,215.7z"/>
+	</g>
+	<g>
+		<g>
+			<path class="st1" d="M362.5,81.6c-0.1,0.9-0.3,1.7-0.4,2.5C362.3,83.2,362.5,82.4,362.5,81.6z"/>
+			<path class="st1" d="M362.5,81.6c0.2-1.6,0.5-3.2,1-4.5c0.5-1.4,1.7-1.8,1.6-3.5c-0.2-1.4-1.5-2.3-1.9-3.7
+				c-0.4-1.6-0.4-3.6-0.6-5.2c-0.3-2.6-0.2-4.2,0.4-6.6c0.5-1.9,0.7-3.8-0.1-5.8c-0.8-2.1-2.4-5.6-2.7-5.9c-3,0.2-0.5,5.7-0.5,7.4
+				c0.1,3.4,0.1,5.7-1.6,8.6c-0.8,1.4-1.8,4-1.1,5.7c1,2.4,3.5,3.7,4.4,6.5C362.3,77.1,362.7,79.2,362.5,81.6z"/>
+			<path class="st1" d="M374,75.4c0,0.1,0,0.2,0,0.3C374,75.7,374,75.6,374,75.4z"/>
+			<path class="st1" d="M372.7,95.1c-0.4-1.5-1.3-2.1-0.9-3.9c0.3-1.3,1.4-2.4,1.9-3.7c0.7-1.8,1.2-4,1.2-6c0.1-2-1-3.9-0.9-5.9
+				c-0.2,0-0.8-1.5-1.1-2.7c0,3.1-0.4,7-1.5,9.9c-0.9,2.7-2.8,5.2-3.4,8.1c-0.7,3.8,2.9,6.2,1.6,10.1c-1.2,3.7-3,7.7-4.9,10.9
+				c-0.9,1.6-0.8,2.7-0.9,4.4c-0.1,2.6-1.9,4.9-2,7.3c0.9-1.6,1.1-3.8,1.8-5.7c0.9-2.4,2.6-4.4,3.9-6.5c2-3.4,3.4-5.3,4.1-9.1
+				C372.2,100.1,373.3,97.5,372.7,95.1z"/>
+			<path class="st1" d="M387.7,97.1c0.1-1.6-0.7-1.4,0.3-2.7c0.6-0.8,1.6-1.2,2.2-2.1c1.3-1.9,2.5-4.7,3.2-6.8c1.5,2,4.1,3.4,4,6.3
+				c0.2-1.9,0.5-3.2,0.5-4.9c-0.1-1.6,0.2-3.5,0-5.3c-0.3-2.8-2-5.9-2.1-8.5c-1.2,2.4-1.2,4.9-3.3,7.2c-2.5,2.8-2.6,3.7-3.5,7.2
+				c-0.7,2.6-2.5,4.4-3,7.1c-0.4,2.4-0.8,4.9-2.3,6.9c-1.3,1.6-2.9,2.6-4.2,4.2c-0.9,1.1-1.7,2.3-2.6,3.4
+				C380.6,107.7,387.3,101.4,387.7,97.1z"/>
+			<path class="st1" d="M346.1,50.8c1.5-2.1,2.6-3.9,2.2-6.7c-1.6,1.6-2.8,3.9-4.8,5.2v-0.5c-0.5,2.6,0.4,5.5-1.1,8.4
+				C344.4,56.8,345,52.4,346.1,50.8z"/>
+			<path class="st1" d="M319.9,91c0.5,1,0.7,2.8,0.3,3.8c0.7-2.9,2.6-4.2,2.7-7c0.1-2.8,1.8-5.3,1.8-7.9c-1.9,1.4-2.5,4-2.5,2.4
+				c-1,1.3-4.9,4.8-4.4,6.6C318.1,89.4,319.5,90.2,319.9,91z"/>
+			<path class="st1" d="M417.2,100.8c0.5,2.1,2.6,4.3,3.4,6.4c1.2,2.8,2.8,5.3,4.5,7.9c2.6,4,4,6.9,4.5,11.8c1-2.2-1-5.8-1.5-8.1
+				c-0.7-3,0.1-5.5-1.2-8.5c-1.1-2.5-1.7-5.3-2.8-7.6c-0.9-2-4.8-6.4-1.6-8.3c-2.1-1.3-2.2-3.3-3.8-5.2c-1.1-1.4-2.6-4.5-4.2-5.2
+				c0.3,3,2.3,6.1,3.2,8.8C418.7,95.7,416.5,97.9,417.2,100.8z"/>
+			<path class="st1" d="M413.8,111.8c2.1,6.1,3,12.7,3.5,19c0.3-1,1-2.3,2.2-2.8c-3.1-1.1-0.6-11.4-1.5-13.9
+				c-0.3,0.4-0.9,0.6-1.2,1.1c-1.1-3.3-2.5-6-3-9.3c-0.5-3.1-0.7-6.6-1.6-9.5c0,0.3,0,0.6,0,1.1c0.2,2.5-1.2,4.3-1.1,6.6
+				C411.1,106.5,413,109.5,413.8,111.8z"/>
+			<path class="st1" d="M409,121.7c1.9,2.9,3.1,6.3,4.6,9.2c0.1-5.4-3-8.1-5.2-12.6c-0.9-1.8-1.2-3.5-1.9-5.2
+				c-0.6-1.5-1.8-2.2-2-2.3c2.8,5.7,4.5,11.9,5.3,18.2C409.7,126.7,409.4,124.1,409,121.7z"/>
+			<path class="st1" d="M399.4,115.7c0.7,2,0.9,4,1.4,6c0.4,1.4,1.9,2.7,1.8,4c3.2-1.7,9.3,19.7,11.6,21.9c-1.4-2.8-2.1-5.8-3.4-8.7
+				c-0.9-2-2.1-3.8-3-5.9c-1.3-3-2.6-5.7-3.5-8.8c-0.4-1.3-1.3-2.5-1.5-3.8c-0.2-0.9,0.3-1.9,0-2.7c-0.5-1.7-2.6-3.2-3.6-4.6
+				C399.1,114.3,399.6,115.4,399.4,115.7z"/>
+			<path class="st1" d="M387.3,128.1c1.2,3.3,5.4,6.6,7.5,9.5c1.6,2.2,3.4,4.7,4.6,7c1.5,2.7,2.7,7.2,5.2,9.1
+				c0.1-2.4-2.9-5.1-3.8-7.4c-1.6-4-3.3-8.6-4.4-12.8c-0.8-3-2-3.6-3.9-5.8c-1.2-1.4-2.2-4.2-2.7-5.4c0.3,0.7-0.5,4.7-1.2,5.9
+				C388.2,128.1,387.7,128.2,387.3,128.1z"/>
+			<path class="st1" d="M383.8,145.2c1.1,0.9,2.9,1.8,3.8,3c1,1.3,1,3.2,2.1,4.3c-0.1-0.7-0.1-1.5-0.1-2.2c4.2,0.5,6.9,4.9,10.6,6.6
+				c-1.5-2.4-2.4-5.2-4.3-7.4c-1.9-2.2-4.6-2.9-6.4-5.2c-3-3.8-4.9-9.2-7.3-13.4c0,1.6,0.7,3.2,0.5,4.6c-0.2,1-1.3,1-0.6,2.3
+				c-1.5-1-2.9-2.7-4.8-2.9c-0.1-0.4,0.1-0.5-1.4,0C378.9,138,380.6,142.5,383.8,145.2z"/>
+			<path class="st1" d="M441,137.3c-0.5-2.9-2.7-4.8-3.9-7.2c0.3,1.7,0.6,5.3,0.7,6.6c0.1,2.6,1.3,6.5,0.5,9c-1-0.2-2-0.8-2.9-1.3
+				c0.6,1.7,2.2,2.8,3.1,4.4c0.6,1.2,0.8,2.6,1.5,3.6c1.4,1.9,4,3,5.7,4.7c1.1,1.2,2,2.6,3.2,3.7c-1.8-5.4-4-11.2-6.7-16.1
+				C440.7,142.2,441.4,139.9,441,137.3z"/>
+			<path class="st1" d="M436.7,129.2c0.1,0.3,0.3,0.6,0.4,0.9C436.9,129.4,436.8,129,436.7,129.2z"/>
+			<path class="st1" d="M428.3,176.6c-5.4-2.9-8.6-7.3-12.9-11.7c-2.2-2.3-4.1-3.3-7.2-4.1c-3-0.7-4-3.1-6.6-4.1
+				c1.7,2.7,2.9,4.3,5.7,6.1c3.1,1.9,4.7,5.5,7.7,7.8c1.9,1.5,3.5,3.4,5.4,4.9c2.1,1.7,3.9,2.4,5.6,4.7c2.8,3.9,5,8.4,8,12.2
+				c-0.7-4.2-4.9-7.4-5.9-11.4c1.6,0.6,2.8,2.1,4,3.3c-0.7-0.8-0.6-0.9-0.1-1.7c-2.6-2.4-5.1-4.9-7.7-7.3c1.8,1.3,3.9,1.7,6,2.5
+				C429.7,177.3,429,176.9,428.3,176.6z"/>
+			<path class="st1" d="M437.8,182.1c-0.4-0.1-0.7-0.3-1-0.4c1.7,1.1,3.4,2,4.9,2C440.6,183.1,439.1,182.6,437.8,182.1z"/>
+			<path class="st1" d="M431.9,178.4c-0.5-0.3-1-0.5-1.5-0.7c2.1,1.3,4.1,2.8,6.4,3.9C435,180.5,433.3,179.1,431.9,178.4z"/>
+			<path class="st1" d="M446.5,132.3c1.8-3.8,0.1-8.1-0.6-11.9c-0.5-2.8-0.4-5.8-1-8.5c-0.3,3.7-2.3,2.8-4.8,2
+				c-0.4,0.5,3.1,8.5,3.8,10.1C445,126.5,447.5,129.5,446.5,132.3z"/>
+			<path class="st1" d="M467.1,124.2c0,1.6-1.8,4.9-3.4,5.6c-2.5,1-2.7-4.2-3.7-6.5c-1.3-2.9-3.1-5.8-4.4-8.7
+				c-0.6,1.6,0.4,4.3,0.8,5.9c0.7,3,0.9,5.7,0.9,8.8c0,3.2,2.1,5.6,4,8.3c2.1,3,3.9,5.3,5.3,8.8c1.4,3.5,1.9,7.5,3.4,10.9
+				C465.8,146.1,467,135.6,467.1,124.2z"/>
+			<path class="st1" d="M454.7,112.7c0.2,0.6,0.5,1.3,0.8,1.9c0-0.1,0.1-0.2,0.1-0.3C454.8,113.4,454.8,112.2,454.7,112.7z"/>
+			<path class="st1" d="M314.8,124.6c-0.2-3.3-2.4-5-1.9-8.2c-1,3.7-2.8,6.3-1.7,10.3c0.7,2.7,1.7,5.3,2.3,8.1
+				c0.5,2.1,1.8,4.3,1.7,6.4c0-4.1,0.2-8.2,0.5-12.3c0.2-2.7,1.2-4.1,2-6.6C316.8,123.2,315.9,124.4,314.8,124.6z"/>
+			<path class="st1" d="M260,57.8c-0.2,0.4-0.5,0.9-1,1.5C259.6,58.7,260,58.2,260,57.8z"/>
+			<path class="st1" d="M249.9,71.7c0.2,1.3,1.9,2.1,2.7,3.3c1,1.7,0.8,3.5,0.6,5.2c-0.2,2.3,0.4,3.8,0.8,6.1
+				c-0.3-3.4,2.1-5.8,2-9.2c-0.1-2.5-0.1-4.7,0.3-7.2c0.2-1.1,0.8-2.5,0.8-3.6c-0.1-1.1-0.9-1.6-0.6-3.1c0.3-1.4,1.6-2.9,2.6-4.1
+				c-1.4,1.3-4,3-4.6,4.3c-1.3,2.5-0.4,5.7-2,7.8c-0.8-0.6-1.4-1.8-1.7-2.9C250.8,69.9,249.7,70.7,249.9,71.7z"/>
+			<path class="st1" d="M250.6,67.8c0,0.2,0.1,0.4,0.1,0.7C250.7,68.3,250.7,68,250.6,67.8z"/>
+			<path class="st1" d="M266,61.1c0,0,0.1,0.1,0.1,0.1C266.1,61.1,266.1,61,266,61.1z"/>
+			<path class="st1" d="M265.5,65c1.2-0.4,2.3-2.5,0.6-3.8c0,0.3-0.4,0.9-0.6,1.5c-0.3,1-0.7,1.7-0.8,2.8c-0.3,1.8-0.2,4.4,0.3,6.1
+				C264.8,69.7,264.8,66.6,265.5,65z"/>
+			<path class="st1" d="M267,106.4c1-2.7,1.2-5.7,2.1-8.5c0.4-1.4,1.1-6.2,1.7-6.8c0,0.3,0,0.6,0,0.9c1.5-1.9,2.2-3,4.1-4.5
+				c1.1-0.9,2.1-1.7,2.8-2.7c1.7-2.6,2.9-6.4,3.7-9.3c-3,2.6-4.6,6-8.1,7.9c-0.4-0.4-2-0.6-2.1-0.8c-1-1.5,0.9-3.9,1.5-5.3
+				c1.1-2.5,2.9-4.4,2.6-7.4c-0.4,0.6-1.2,0.9-1.6,1.5c-0.6-2,1.6-4.4,1.5-6.6c-1.3-0.1-2,1.1-3.3,1.2c0-1.1,0.1-2.1,0.2-3.2
+				c-0.3,0.3-2.3,1.6-2.5,3.2c-0.1,0.9,0.5,1.6,0.2,2.7c-0.3,0.9-1,1.6-1.3,2.7c-1.1,4.1,0.3,8.5-2.1,12.3c-0.2-0.3-0.9-1-1-1
+				c-0.3,1.6,0.5,2,0.8,3.4c0.6,2.4,0,1.7-0.3,3.7c-0.5,3.3,0.4,5.1-1.4,8.3c0.9-0.4,1.9-1.5,2.9-2
+				C267.9,99.4,266.5,102.9,267,106.4z"/>
+			<path class="st1" d="M272.2,62.7C272.2,62.7,272.2,62.7,272.2,62.7C272.2,62.7,272.2,62.7,272.2,62.7z"/>
+			<path class="st1" d="M223.8,92.1c0.2,0.4,2,0.5,2.4,0.8c1.2,0.7,1.7,1.9,2.7,2.8c1.3,1.1,2.5,0.6,3.6,1.3c1.7,1,4.2,4.4,5.7,6.2
+				c2.2,2.5,3.9,6,5.4,9c1.6,3.2,2.9,9.5,5.6,11.7c-1-3.7-2.9-6.9-4.1-10.4c-1-2.7-1.3-6.1-2.6-8.5c-1-1.7-2.7-2.7-4.1-4
+				c-1-1-1.6-2.3-2.5-3.4c-2-2.2-4.7-3.9-6.3-6.2c-1.4-2-1.5-5.3-3.7-6.6c-3.8,2.7-1.7,3.2-1.4,4.6
+				C224.5,90.1,223.4,91.5,223.8,92.1z"/>
+			<path class="st1" d="M222.3,100c3.2,2.9,6.8,5.3,9.5,8.8c1.1,1.4,1.3,2.4,1.9,4c0.7,2,1.7,3.5,2.9,5.4c2.2,3.6,4.1,7.2,5.8,11
+				c1,2.3,1.9,4.9,2.9,7.2c1.2,2.7,3.3,4.8,4.7,7.5c-2.5-4.2-5.1-9.6-5.8-14.4c-0.6-3.7-2.6-7.1-4.3-10.9c-1.6-3.8-2.7-8.2-5.4-11.2
+				c-3-3.2-5.8-7.3-9.3-10c-1.8-1.3-3.6-2.5-5.1-4.2c-1.7-1.8-0.6-2.7-1.6-4.5c-0.6,0.3-1.2,0.8-1.5,2
+				C216.4,93.4,220.5,98.3,222.3,100z"/>
+			<path class="st1" d="M291.8,85.8c-0.4-1.2,0.9-4.2,1-5.7c-1.1,0.1-2.1,1-3.1,1.3c0.1-1.9-1.8-1.7-2.2-3.4c-0.2-0.1-0.5,0-0.5-0.2
+				c0,1,0.4,2.7,0,3.6c-0.5,1.2-1.7,0.8-2,2.1c0.5,0,1.1,0.4,1.7,0.4c0.4,2.7,1,6.7-0.5,9c-1.7,2.8-5,2.7-7.6,4
+				c1.3-1.9,2.6-5.2,2.9-7.5c0.2-1.6,0.9-4.3,0.6-6c-1.1,1.4-2.7,3.1-4.5,2.6c-0.9,2.1-0.8,4.7-1.3,6.9c-0.7,3.1-2.9,4.6-4.1,7.2
+				c-1.4,3-0.5,6.6-2.2,9.6c-1.1,2.1-2.8,3.8-3.5,6.2c2.6-1.1,6.7-6.3,8.9-8.2c1.3,2.4,2.1,2.3,3.3,1.3c1.8-1.4,3.5-4.3,5.4-5.7
+				c1.8-1.4,4.9-5.3,6.4-3.7c2.3-2.6,1.8-5.4,3.6-8.2c1.3-2.1,1.4-5,3.1-6.8C295.6,84.7,292.8,88.6,291.8,85.8z"/>
+			<path class="st1" d="M286.9,77.8c0-0.1,0-0.2,0-0.3C286.9,77.6,286.9,77.7,286.9,77.8z"/>
+			<path class="st1" d="M199.2,96.4c1.5,2.2,2.2,1.5,4.1,2.8c1.4,0.9,2.7,2.8,4,4c-0.6-1.6-1.7-2.9-2.4-4.5
+				c-0.8-1.8-0.3-2.7-1.1-4.4c-1.5-3-5.7-6.7-7.5-8.9c-2.1,4.1-1.9,6.1-1,7.2C196.6,94.1,198,94.6,199.2,96.4z"/>
+			<path class="st1" d="M233.4,145c-0.5-1.1-0.2-2.6-0.5-3.8c-0.3-1.1-1.1-2.5-1.6-3.7c-0.9-2.2-1-4.4-1.8-6.5
+				c-0.7-2-1.8-1.6-2.9-2.8c-1.5-1.5-2.6-4-3.9-5.8c-1.4-2-2.9-2.6-4.6-4.2c-2.5-2.3-3.8-5.3-6.5-7.6c1,1.6,1,3.8,2,5.5
+				c0.3,0.5,1.1,0.7,1.6,1.7c0.4,0.9-0.1,1.6,0.4,2.6c1.6,3.3,5.7,4.7,6.8,8.4c0.7,2.4,0.9,3.9,2,6.2c1.1,2.3,0.2,5,1.1,7.1
+				c1,2.3,2.7,3.2,2.8,6.1c0,2.4-0.3,4.3,0.1,6.7c0.2,1.4,0.7,2.1,0.1,3.4c-0.4,1.1-1.2,0.9-1.5,2.4c-0.1,0.7,0.3,1.2,0.3,1.8
+				c0.1,1.8-0.3,2.5-0.8,4.3c-0.4,1.5-0.2,3.4-1,4.7c0.3,0.1,0.8,0,1.1-0.1c0.2-3.6,2.4-7.2,4.2-10.3c1.4-2.3,4.2-4.3,5-6.8
+				c-2.7-1.9,0.2-2.5,0.7-3.7c0.6-1.4,0.3-1.9-0.7-3.1C235.3,146.9,233.9,146,233.4,145z"/>
+			<path class="st1" d="M204.7,115.2c-1.7-2.8-4-6.4-6.6-8.8c-1.3-1.1-2.9-2.2-3.9-3.6c-1.2-1.7-1.9-3.7-3.1-5.4
+				c-1-1.5-5.6-6.1-5.2-7.2c-1.4,1.6-5.5,3.7-4.3,7.2c0.6-1,1.2-2,2.1-2.5c1,1.4,2.2,4,4.1,3.9c0.4,1.8-0.7,3.3-2,4.5
+				c-0.2-1.9-1.4-0.2-2.2-1.2c-0.5-0.8-0.6-3.2-0.7-4.1c-0.9,2.6-3.1,4-4.3,6.6c0.8-0.8,1.7-1.5,2.8-1.5c0.1,1.5,1.3,2.3,2.3,3
+				c0.8-0.5,1.7-0.7,2.5-0.7c-0.1,1.6-1.4,3.1-2.3,4.5c0-0.1,0-0.3-0.1-0.4c-1.4,1.2-1.6,3.6-1.1,5.2c0.3,1,2.4,5.5,2.8,5.8
+				c1.4-1.8,2.4-3.7,3.9-5.4c-0.8,1.8-2.9,6.6-1.3,8.4c1.2-3.1,1.9-7.2,5.3-7.1c-0.6-1.9,2.9-2.7,3.9-4c-0.9,2.1-3,2.9-2.5,5.1
+				c0.4,1.8,2.1,3.4,3.1,4.9c0-2.2,1.6-4.9,3.6-4.3c1.3,0.4,2,2.2,2.7,3.1c1.1,1.3,2.5,2.3,3.7,3.5c1.9,2,3,4.9,4.5,7.2
+				c1.3,2.2,2.9,4,4.3,6.1c1.1,1.6,3.4,4.4,3.7,6.1c-0.4-6.2-4.3-12-7.7-16.8C210.1,123.3,207.3,119.4,204.7,115.2z"/>
+			<path class="st1" d="M185.9,90.2c0.1-0.1,0.1-0.1,0.2-0.2C186,90.1,185.9,90.1,185.9,90.2z"/>
+			<path class="st1" d="M265.2,151.8c-1,0.8-1.9,0.8-2.9,1.9c-1.6,2.1-3.1,6.3-3.8,8.8c-1-1.2-1.6-3.8-3.5-5.4
+				c0.7,3.6,0.9,5.6-0.4,9c-1.2,2.8-1.6,6-2.6,8.9c-1.9,5.5-5.4,7.1-9.5,10.3c2.5,1.3,7.1-3.7,8.7-5.2c1.4-1.4,3.2-2.6,4.4-4.2
+				c1.4-1.8,1.5-3.8,2.6-5.9c1-1.9,2.2-3.6,3.1-5.5c1-2.3,1-5,2.1-7.3c1.6-3.5,4.7-7,4.9-11.1C267.9,148.3,267,150.4,265.2,151.8z"
+				/>
+			<path class="st1" d="M327.4,135.9c-0.9-1.6-0.9-3.6-1.8-5.1c-0.7-1.2-1.9-1.5-2.5-2.8c0.7-0.7,1-1.6,1.6-2.2
+				c1.2-1.2,1.7-0.8,2.9-1.7c0.9-0.7,1.2-0.8,1.3-2c0.1-1.4-1.1-0.9-1.2-1.8c-0.3-1.9,1.3-2.9,1.5-4.8c0.3-2.5-1.6-4.1-1.6-6.5
+				c-2.8,0.5-5.5,0.8-8.3,1.5c1.6-1.7,1.6-3.7,3.2-5.5c1-1,1.8-1.5,2.1-3c0.2-1.2-0.5-2.5-0.3-3.3c0,0.9-3.6,6.3-5.9,6.7
+				c-0.2,2.6-2.3,5-2.5,7.6c0.2-0.2,0.7-0.4,0.9-0.5c1,1.5,0.8,3,0.8,4.8c2.3-2.3,4.7-3.9,7.8-5.1c0.9,1,1.6,4,1.2,5.3
+				c-0.4,1.3-3,5.1-4.2,5.4c-0.7,2.9-3.8,5.8-2.4,9.2c0.3-0.3,1.2-0.5,1.5-0.9c1.2,2,1.1,4.1,1.8,6.3c3.8-1.1,3.8,9.8,4.3,12.5
+				c0.6-0.6,1.1-1.1,1.4-2c0.4,0.8,0.7,2,0.7,3.2c-1.1,5-1.4,10.7-3,15.5c0.9-1.7,2.9-3,3.6-4.8c0.5-1.2,0.6-3.1,1-4.4
+				c0.8-3.4,0.9-7.9,0.4-11.5C331.2,142.6,329.1,138.8,327.4,135.9z M329.7,151.4c0,0.2,0,0.4,0,0.5
+				C329.7,151.8,329.7,151.6,329.7,151.4z"/>
+			<path class="st1" d="M322.3,123C322.3,123,322.4,123,322.3,123c0.2-0.4,0.2-0.8,0.2-1.2C322.5,122.2,322.4,122.6,322.3,123z"/>
+			<path class="st1" d="M341.3,89.7c1,1.3,2.2,3.2,2.5,4.8c0.8,4.2,0.3,8.8,1.7,13c0.3,0.8,1,1.4,1.3,2.2c0.5,1.7,0.2,3.5,0.3,5.2
+				c0.1,3.7,1.2,8.2,4.3,10.6l2,1.3c0.3,0.1,0.4,0.4,0.5,0.1c-4-3.7-5.3-11.8-5-16.9c0.1-2,1.1-3.9,1.2-5.8c0.1-1.4,0-3.7-0.1-5.4
+				c0-3,0.4-8.4-1.6-10.6c-2.1,1.4-2.1-0.7-2.5-2.2c-0.7-2.3-0.6-1.4-2.1-2.8c-1.7-1.6-3.5-2.8-3-5.4c0.5-3.1,3-4.8,5.1-6.9
+				c1.2-1.2,2.1-4,4.1-4.1c0.3-1.5,0.9-2.3,1.1-3.9c0.1-1.4-0.9-4.2-0.1-5.4c0.9-1.3,2-0.6,2.8-1.8c0.3-0.5,0.5-2.7,0.6-3.3
+				c0.4-3.2-1.3-9.7,0.3-13.4l-0.2,0c-1.7,1.7-0.7,6.5-1.9,8.9c-1.3,2.7-4.3,5.3-4.2,8.5c0,1.5,0.6,2.6,0.2,4.2
+				c-0.4,1.5-1.5,3.2-2.4,4.5c-2.1,2.9-4.8,5.1-6.5,8.2c-1.5,2.7-3.3,4.4-5.2,6.8c2,1.7,1.7,5.2,3.4,7
+				C338.9,88.4,340,88.1,341.3,89.7z"/>
+			<path class="st1" d="M355.8,198.8c-1.8-2.6-1-6.7,0.1-9.4c0.8,0.6,1.5,1.4,1.5,2.5c0-6.6-3.6-12-4.4-18.3
+				c-1.3,1.5-1.7-0.1-2.9-0.3c-1.2-0.1-2.6,0.9-3.3-0.7c-2.9,0.7-1.4,1-3.3-0.8c-1-1-2.5-1.6-2.1-3.3c-1,3.8-0.8,3.8-0.5,3.9
+				c-0.1,1.6,0.9,6.9,1.8,7.9c1,1.1,2.5,0.6,3.7,1.5c1.3,0.9,2.5,5.2,4.2,2.9c0.5,4,1.2,7.9,0.2,11.7c-0.4,1.5-0.5,3.7-2.2,3.4
+				c-2.3-0.5-2-4.3-2.7-5.9c-2.2,0.6-4.2-1.2-6.2,0.2c-0.4-1-0.5-2.1-1-3.1c-1.9,1-0.1,3.9,0.3,5.5c0.3,1.3,0.3,5.9,1.8,6.6
+				c1.4,0.6,1.2-0.6,2.3-1c1.3-0.5,0.4-0.8,1.8-0.7c0.8,0.1,2.5,1.9,3.3,2.1c3,1,3.3-0.6,4.4,3.6c0.1-0.2,0.1-0.4,0.2-0.7
+				c0.5,0.7,0.9,1.8,1.5,2.3c0.1-0.2,0-0.5,0-0.7c1.2,2.2,1.8,5.4,3.8,6.8c1.1-5.5-0.5-11.4-0.8-16.9
+				C357,198.2,356.1,198.5,355.8,198.8z"/>
+			<path class="st1" d="M179.9,158.9c0.5,1.1,1,2,1.5,2.6C181.2,160.4,180.6,159.7,179.9,158.9z"/>
+			<path class="st1" d="M182.4,132.3c-0.3,1.3-1.6,2.4-3,1.5c-0.6-0.4-0.2-3-0.9-3.8c-0.7-0.9-2.2,0.2-2.9-0.4
+				c-2.9-2.5-3.5-7.6-4.9-10.7c-0.3,0-0.7,0.2-1,0.3c-0.1-1.6,0-3.2-0.3-4.7c-0.8,1.8-0.6,5.9-2,5.9c1.8,2.2,0.3,6.5,1.4,9.3
+				c1.7,4.4,3.6,7,3.8,12c0.1,4.5,0.5,5.6,2.7,9.2c1.2,2,1.5,4.3,2.9,6.2c0.5,0.7,1.2,1.3,1.8,1.9c-1.7-3.9-2.5-10-1.7-13.1
+				C179.3,141.3,181.6,136.9,182.4,132.3z"/>
+			<path class="st1" d="M161.5,171.7c-1-2.4-0.5-4.9-1.8-7.1c-1.5-2.5-2.1-2.1-2.3-5.3c-0.4-4.9,0.6-9.2,1.5-13.8
+				c-3,3.2-5.9,5-9.2,0.6c-1.5-2-1.3-5-1.1-7.5c0.3-3.1,2.3-4.2,2.7-6.7c-2.4,1.8-8.3,9.7-8.3,9.7s3.8,7.2,4.9,9.9
+				c1.9,5.1,3.6,9.7,6.1,14.6c1,2,1.4,4.7,2.7,6.6c1,1.4,2.4,1.9,3.5,3.1c2.3,2.7,3.7,7.1,4.9,10.3c0.5-5.3-1.2-11.3-1.6-16.6
+				C163.2,170.1,161.9,171,161.5,171.7z"/>
+			<path class="st1" d="M475.1,66.5c-1.3-0.4-2.2-3.3-2.9-4.6c-0.4,0.3-1,1.2-1,1.7c0.2,4.8-2.8,8-2,12.7c0.7-1.8,1.6-3.1,2.8-4.8
+				C473,70.2,473.8,67.5,475.1,66.5z"/>
+			<path class="st1" d="M495.2,70.8c-2.5-2.3-4-4.7-6.1-7.1c-1.3,1-1.7,2-3.4,1.3c-0.9-0.3-2.6-1.6-3-2.3c-0.2,2.2,2.1,4.5,4.2,4.3
+				c0,2.3-1.1,4.6,0.8,6.5c1.5,1.6,3.5,1,4.7,3.6c1.2,2.7-0.2,5,0.3,7.8c0.4,2.6,2.2,4.6,2.1,7.4c-0.2-4,0.9-7.3,1.8-10.9
+				c1.1-4.6,2.8-3.7,5.2-5.5C500,74,497.1,72.5,495.2,70.8z"/>
+			<path class="st1" d="M516.9,86.1c0.6,1.8,1.6,3.3,1.5,5.2c1.7-1.2,1.5-2.8,3.8-2.8c1.5,0,2.4,1,3.3,2c1.6,2,2.7,7.2,1.7,9.6
+				c1.1-0.1,2-1.1,2.7-2c1.4,2.8,2.7-1.4,4.7-1.1c1.4,0.2,4.4,4.7,5.7,5.7c3.4,2.6,6.5,4.9,9.3,8.5c-0.2-2.8-2.1-5.3-3-7.9
+				c-0.6-1.9-0.7-3.6-1.8-5.5c-0.8,1-4.1-3.1-5.2-4c-4-3.1-8.2-5.9-12.2-8.9c-3.4-2.5-7.1-3.6-10-6.7c-0.6,1.5-0.8,3.7-2.3,4.6
+				c-1-1-1.4-2.5-2.6-3.1c0.8,2.6,2.3,4.1,2.2,7C515.2,86.4,516.5,86.3,516.9,86.1z"/>
+			<path class="st1" d="M495,113.5c0.7-2.8,4.3-4.3,4.1-7.3c-0.2-2.4-3.1-3.9-3.5-6.2c-2,1.4-6.4,1.5-6.1-1.9
+				c-3.2-0.6-3.4,1.3-4.6-1.8c-0.8-2.1,0.1-4.5-1-6.6c-1.2-2.2-2.3-1.7-3.9-3.9c-0.5-0.7-1.1-2-1.4-2.9c-0.3-1.1-1.2-1.7-0.7-1.2
+				c-2.5,3,2.2,6.3,2.1,9.6c-0.1,2.3-1.2,7.5-2.1,9.7c-0.8,1.9-2.6,2.2-3.6,3.9c-1,1.8,0.3,2.5,0.2,3.7c-0.1,1.2-1.7,2.6-1.6,4.3
+				c0,0.8,2.5,4.4,2.5,4.6c0.8,3.5,6.4,3.8,9,3.7c2-0.1,4.3-0.5,6,0.2c1.5,0.6,2.6,2,4.1,2.7c1.1,0.5,2.2,0.5,3.3,0.9
+				c1,0.4,1.3,1.2,2.5,1.3c0.1-0.3,0.7,0.7,0.6,0.4c0.1,0.1,0.7,0.9,0.5,0.4C499.3,122.4,493.6,119.5,495,113.5z"/>
+			<path class="st1" d="M539.7,164c-0.3-0.8-0.2-1.8-0.4-2.6c-0.8-3.1-4.1-6.9-3.5-10c0.6,0.2,1.8-0.1,2.5,0.2c-1.3-3.4-4-5-6.3-7.7
+				c3.9-2.9-5.3-12-6.8-15.1c-1.7-3.5-6.3-5.2-7.1-9.4c-0.8-3.9,2.4-5.2,2.2-9.1c0.4-0.2,0.9-0.2,1.3-0.2c-0.4-0.4-0.5-1-0.9-1.4
+				c4.8-1.6,9.7,4.2,14.8,3.5c-0.8-2.1,0.8-4.4-1.6-5.9c-1.9-1.2-4.6,0.6-6.2,0c-1.2-0.4-3-2.6-4-3.5c-2-1.7-4-3.4-6.2-4.7
+				c-0.6,3.1-12.8-4.1-14.2-7.1c-0.4,3.9,3.4,6.5,5.2,9.6c1.5,2.6,3.6,5.8,3.6,8.8c-0.6,0.1-1.1,0.4-1.7,0.5
+				c0.1,0.7-0.3,1.7-0.1,2.4c-0.4,0-0.9,0.1-1.3,0.1c-2.1,3.9,4.9,11.4,6.5,15.1c-1.6,0.2-3-0.8-4.1-2c-0.2,0.2,0.1,0.7,0.2,0.9
+				c-0.4,0-1.2,0-1.6,0.1c3.3,3.5,4.2,7.1,6.5,11.1c0.6,1.1,1.8,1.8,2.3,2.9c0.4,0.7,0.4,1.4,0.6,2.1c0.2,0.8,0.6,1.2,1.2,1.8
+				c1.1,1.1,1.8,2.4,2.5,3.7c0.8,1.6,1.7,3.1,2.8,4.6c2.5,3.4,6.2,5.7,9.2,8.6c0.9,0.9,1.8,1.9,2.8,2.8c1.4,1.3,2.9,2.7,3.3,4.6
+				c0-0.8,0-1.8-0.3-2.6C540.5,165.3,539.9,164.7,539.7,164z"/>
+			<path class="st1" d="M74.5,169.2c1.8,0,3.7-1.8,2.7-3.7c-2.7-2.7-3.7-6.4-1.8-9.2c1.5-3,4.9-4.9,7.4-7.4c0-1.4,0.4-2.1,1.1-3.3
+				c1.3-2.3-0.1-1.9-0.9-4c-0.2-0.5-0.6-2.2-0.5-2.6c0.5-1.8,2.2-2.5,2.5-4.6c0.1-0.9,0.1-2.4,0-4.4c-0.1,0.1-0.2,0.2-0.3,0.3
+				c0.2-0.6,0-1.3-0.7-2.1c-1-1.1-2-2.3-3.1-3.4c-0.7-0.7-1.4-1.4-1.8-2.4c-0.3-0.6-0.4-2.2-0.8-2c-0.8,1.3-0.7,1.8-0.3,3.2
+				c0.2,0.6,0.3,1.3,0.6,1.9c0.1,0.4,0.9,1.4,0.8,1.8c-0.2,1.4-3.4,1.8-3.9,3.5c-1,3.4-2.7,6.8-5.2,9.5c-1.1,1.1-1.9,2.4-3.3,3
+				c-1.1,0.5-2.9,0.9-3.5,2.1c1.6-0.1,3.3-1.6,4.9-2c1-0.2,1.7,0.7,2.5,0.8c-0.1,0.1-0.2,0.2-0.3,0.3c-2,1.7-4.3,5.9-6.9,6.7
+				c-1.3,0.4-2.2-0.6-3.5,0.4c-1.3,1-2,2.8-3.5,3.9c-1.3,0.9-2.7,1.5-3.9,2.5c-1.4,1.1-2.3,2.4-3.5,3.7c-2.2,2.2-4,4.7-6.1,6.9
+				c2.5-2.3,5.4-4.1,7.7-6.6c1.5-1.6,2.9-2.5,4.8-3.7c0.9-0.5,3.3-3.9,4.2-3.8c2.8,0.2-0.4,3.8-1.1,4.4c-1.1,0.9-2.6,1.2-3.7,2.1
+				c-2,1.6-3.1,4.6-4.4,6.8c1.8-1.6,3.2-3.7,5.3-5c1.1-0.7,1.8-0.9,2.6-2c2,0.3,1.3,3.5,1.2,5c-0.1,3.2,1,6.9,1.9,10.1
+				c1.1,3.9-1.2,5-3.6,8c-1.2,1.5-2.2,3.7-1.9,5.6c2.2-0.3,3.3-3.8,5.2-5c1.1-0.7,3.8-1.7,5-1.3c2.7,0.8,4.8,6.8,8.2,4.9
+				c0.1-0.8,0-1.6-0.1-2.4c1.9-0.4,3.8,1.9,4.9,3.2c1.4,1.8,1.6,2.1,3.7,2.8c1.3,0.5,1.7,0.8,2.7,0.6c-3.1-3.6-6.3-7.1-8.4-10.7
+				C75.4,178.4,77.3,174.7,74.5,169.2z"/>
+			<path class="st1" d="M132.6,161.5c0,0,0-0.1,0-0.1l-0.2-0.6C132.5,161.1,132.6,161.6,132.6,161.5z"/>
+			<path class="st1" d="M141.1,125.5c0.8-1.1,3.8-0.6,5-1c-0.7-1.7-2-3.1-2.7-5c-0.5-1.6-2.6-3.9-1.8-5.7c0.7,0.3,1.5,0.4,2.1,0.7
+				c-0.2-0.8-0.9-1.3-1.2-1.9c-0.3-0.7-0.5-1.4-0.8-2.1c-1.2-2.4-1.8-4.3-2-7c0.4,0.3,0.9,0.7,1.3,1.1c0.6-1.3,1.3-1.9,0.2-3
+				c-0.6-0.6-1.7-1-2.3-1.6c-0.7-0.7-1.6-1.7-2.1-2.6c-0.4-0.8-0.3-2.7-1.4-2.6c0.1,1.6,1.1,1.7,0.1,3c-0.4,0.6-0.7,0.4-0.8,1.1
+				c0,0.4,0.4,1.5,0.5,2c0.3,1.5,0.4,2.9,0.7,4.4c0.2,1.1,0.8,2.5,0.2,3.6c-0.5-1.2-1.2-2.5-2.6-2.8c1.2,3.1-5.5-0.6-6.3-1.5
+				c0.9,1.6,3,3.4,4.3,4.7c0.8,0.9,1.7,1.8,2.5,2.7c-2,3.1,0.2,6.5,0.4,9.7c0.1,2,0,4.6-0.5,6.5c-0.3,1.3-0.8,2.3-1.3,3.4
+				c-0.6,1.3,0,1.5,0,2.8c0,1.7-1,2.3-2.6,2.3c0,1-0.6,1.5-1.1,2.2c-1.1,1.8-0.7,2.6,0.4,4.3c0.6,0.9,1.2,2.1,1.6,3.1
+				c0.6,1.4,0,2.7,0.2,4.2c0.2,1.1,0.6,0.4,1.1,1.4c0.6,1.1-1,2.7-0.8,4c0.2,1.4,1.1,2.4,1.1,3.9c0,0.5,0,1.1,0,1.6l0.3,0.7
+				c-0.3-0.7,0.8-1.7,0.9-2.6c0.7-3,0.9-6.3,1.5-9.3c0.5-2.8-0.9-4.9-1.1-7.6c-0.1-1.8,2-6.1,3.9-3.2c0-1.3,0.7-2.2,1.3-3.3
+				c0.6-1.3,0.9-2.8,1.7-4.1c0.8-1.3,1.8-1.5,1.4-3.1C142.1,127.8,140.3,126.5,141.1,125.5z"/>
+			<path class="st1" d="M132.3,160.6l0.1,0.2C132.3,160.6,132.3,160.4,132.3,160.6z"/>
+			<path class="st1" d="M116.8,107.6c-1-0.2-0.9,0-2-0.3c-0.6-0.1-1.8,0.6-2.1,0.3c0.2,1.1,0.2,0.8-0.3,1.6c-0.5,0.7-0.9,1.1-1.2,2
+				c-0.5,1.5-0.6,5,0,6.2c0-1.2,0.4-3.6,1.8-3.9c0.5-0.1,1,0.3,1.6,0.5c0.8,0.2,1.6,0.3,2.3,0.6
+				C116.2,112.3,113.9,109.6,116.8,107.6z"/>
+			<path class="st1" d="M580.2,116.9c0.7,0.6,1.4,0.9,2.3,1.1C582.2,117.2,580.8,117.1,580.2,116.9z"/>
+			<path class="st1" d="M580.2,116.9c-0.1-0.1-0.1-0.1-0.2-0.2C580,116.8,580,116.8,580.2,116.9z"/>
+			<path class="st1" d="M707.4,169.2c1.9-1.4,4-2.8,5.5-4.6c-2.4-3.3-3.6-8.5-3.1-12.5c2.6,0.8,6.6,1.1,9.3,1.2
+				c-0.2-1.7,0.6-3.4,1.9-4.4c-3-4.9-9-7.1-13.3-10.6c-3.4-2.8-5.2-10.8-9.6-11.8c-0.7,0.6-0.9,1.2-1.5,3.4
+				c-0.2-0.7-0.2,0.9,0.2,1.9c2.3,2.9,2,3.6,2.5,7.2c0.6,4.6,1.2,6.4,3.2,10.4c1.3,2.5,2.8,6,3.5,8.8
+				C706.9,161.6,705.5,166.7,707.4,169.2z"/>
+			<path class="st1" d="M622.5,167.8l-0.4-0.4c-2.2,1.7-2.2,4.6-4.4,6.9c0.7,2.5,2.1,8.8,3.9,10.5c0.5-1.6,0.4-3.6,1-5
+				c0.4-0.9,2.2-2.9,2.3-3.6C625.1,173.2,620.5,169.8,622.5,167.8z"/>
+			<path class="st1" d="M633.7,163.3c0,0.2,0.1,0.4,0.3,0.7C634.2,163.7,634.2,163.4,633.7,163.3z"/>
+			<path class="st1" d="M630.1,171c0.2,2,2.4,2.9,2.8,4.5c0.7,2.4-0.4,6.1-1.4,8.4c3.5-3.8,3.8-9.6,7.2-13.8c-0.8-1.9-3.7-4.5-4.7-6
+				C633.4,165.4,629.8,168.5,630.1,171z"/>
+			<path class="st1" d="M653.1,151.6l-9.4,2.2c-4.7,2.7,0.9,6.2,1.8,8.3c1.2,2.6,0.9,9-0.1,11.8c2.1-2,3.6-4,4.1-6.8
+				c0.6-3.4-1.1-3.7-1.9-6C645.3,155.4,649.7,155.2,653.1,151.6z"/>
+			<path class="st1" d="M662.1,147.1l0.1,0.2c-3.6,0.4,0.4,6.4,0.3,9.1c-0.1,2.4-1.1,6.8-2.5,8.7c1.5-1.1,4.3-2.6,5.4-4.3
+				c1-1.7,0.1-4.6,1.2-6.4c1.7-2.8,3.5-1.5,5.4-3.2c2-1.7,1.4-2.6,2.2-5.3c-1.8-0.1-5.4-1.2-6.5-1.2
+				C665.6,144.8,664,146.1,662.1,147.1z"/>
+			<path class="st1" d="M578.8,188.9c0,0,6.5-1.3,7.9-1.7c6.5-1.8,10.5-0.4,17.3-0.4c2.3,5.8,0,11.7-3.5,16.1
+				c4.7-2.8,8.5-6.9,7.6-12.8c-0.7-4.9-0.7-8.2-5.8-8.8c1.2-4.2,7.3-4.9,8-9.8l-24.8,12.5C584.6,183.8,578.8,188.9,578.8,188.9z"/>
+			<path class="st1" d="M482.6,217.7h-0.9c-2,2.7-4.8,4.8-8.5,5.5c1.6,1.1,4.1,0.8,6.2,0.9c0.1,3.2-0.8,5.8-0.9,8.8
+				c2.3-2.3,4.7-4.3,7-6.6c3.9-3.8,2.4-3.4,2-8.5C486,218.3,484,218.3,482.6,217.7z"/>
+			<path class="st1" d="M520.3,206.8c-2.2,0.8-4.2,2.7-6.1,3.7c1.3,1.1,2.9,1.7,4.6,1.6c0.8,2.1,1.5,6.5,3,7.9
+				c2.3,2.1,6.1-0.7,5.1,5.2c1.7-6.2,1.8-5.9-1.2-11C524,211.2,524.5,207.5,520.3,206.8z"/>
+			<path class="st1" d="M564,212.6c-2-3-0.6-1.7-1.3-4.9c-0.9-4-2.5-6.6-7.4-6.1c-0.4-4-4.4-3.2-8.1-4.2c-1.5,0.4-2.8,1.4-3.3,2.8
+				c6.4,1.1,14.5,6.5,14.2,13.7c5.4,0.3,5.3,1,8.8,4.3C567.6,215.1,565.3,214.7,564,212.6z"/>
+			<path class="st1" d="M664.9,182.5c-0.5-4.1-7.1-8.9-6.6-9.2c-4.9,2.4,0.1,10.2-0.9,14.4c-0.8,3.3-3.2,6.7-4.1,10.2
+				c-1,4-2,7.9-3.5,11.7c2.4-2.8,5.7-3.6,8.6-5.6c2-1.4,3.7-3.5,5.6-5c-1.5,0.1-3.1-0.3-4.6-0.2C659.7,192.9,665.7,189,664.9,182.5z
+				"/>
+			<path class="st1" d="M727.6,187c-2-0.7-4.8,0.2-6.5-0.7c-0.1,0-3.5-4.5-3.8-4.9c-2.4-3.4-2.5-7.2-1.6-11
+				c-2.4,1.6-4.6,3.2-7.3,3.9c0,0.6-0.2,1.2-0.2,1.7c-0.8,1-0.2-0.5-0.4-0.4c-1,2.2-3.4,6.5-3.3,8.7c0.2,4.1,4.3,5.3,6.7,8.3
+				c2.1,2.6,3.3,5.5,3.7,9c0.3,2.8-0.9,6.1,0.1,8.5c3.7-2.5,6.1-7,9.2-10.3c-1.6,0.6-3.5,1.8-5.5,1.8c-0.3-2.4,1.5-4.6,0.9-7.1
+				c-0.4-1.6-3.1-2.2-2.9-4.2C717.3,186.8,724.8,186.8,727.6,187z"/>
+			<path class="st1" d="M610.2,118.1c0,0,0.1,0.1,0.1,0.1C610.4,118.1,610.3,118.1,610.2,118.1z"/>
+			<path class="st1" d="M609.6,123.6c-0.1,0.4,0.2,1.2,0.3,1.6c0.4,1.1,1.3,2.1,1.7,3.2c0.5,1.4,0.3,3.1,1,4.3
+				c0.2-3.1,1.8-6.9,1.1-10c-0.3-1.4-1-1.1-1.9-2.1c-0.6-0.7-0.9-1.7-1.6-2.4c-0.1,0.1-0.2,0.2-0.4,0.5c-0.1,1.2,0.9,2.3,0.6,3.4
+				C610.4,122.7,609.7,122.9,609.6,123.6z"/>
+			<path class="st1" d="M642.5,151.9c-0.4-1.3,0.1-2.3-0.5-3.6c-0.9-2-3.1-2.1-5.2-2c-0.9,0.1-4.3,1.1-4.2-1.1c0-1,2-1.4,2.2-2.5
+				c0.1-0.4-0.5-1.2-0.5-1.6c-0.2-1.4,1.3-3.4,2.6-4.1c1.4-0.7,4.8,0,6,0.9c-0.6-1.1-1.3-1.9-2.1-2.8c-0.6-0.6-0.9-1.5-1.4-2
+				c-0.6-0.7-1.6-1-2.4-1.2c-1.7-0.4-1.8-0.5-2.9-1.9c-0.9-1.1-2.1-1.5-2.3-1.2c0.7,0.6,1.3,1.4,1.5,2.3c-2,1.2-4.7,1.9-4.1,4.6
+				c0.3,1.6,1.2,3.3,1.4,4.8c0.4,2.8-2.1,2.5-4.2,2.6c-3,0.2-6.7,2.6-9.5,1.7c-1.1-0.4-1.8-0.9-3-0.9c-0.9,0-1.2,0-1.8-0.3
+				c-2-0.7-3.3-2.6-4.8-3.8c0.4,1.2,0.8,3.3-0.4,4.1c-0.5-0.5-1.1-0.8-1.8-1c-1.6-1.7-3.1-3.5-4.4-5.3c-1.5-2.2-2.8-4.6-4.2-6.9
+				c0.1-0.2,0.2-0.4,0.3-0.7c0.5-1.6,0.8-3.3,0.9-4.9c0-1.9,0.1-3.4,0.5-5.2c0.3-1.3,0.6-2.4,0.3-3.7c0.2,0.1,0.7,0,0.9,0.1
+				c-0.6-2.8-4.9-3.1-5.7-5.5c-0.5,1.3,2.2,3.1,2.6,4.7c0.4,1.7,0.1,2.9-1.5,3.6c0.9,2.8,1.3,4-2.2,3.7c-0.7-0.1-1.4-0.2-2-0.4
+				c-3.6-3.8-6-4-7.8-4.5c0.1,0.2,0,0.5-0.2,0.9c-0.3,0,1.2,1.2,0.9,1.3l1.1,0.9c2.2,3.7-0.6,4.1-3.5,5c1.6,4.7-1.7,6.9-1.8,11.5
+				c4.6,1.1,7.7,8.6,9.6,12.4c3.1,6.3,0.3,14,2.6,20.4c0.6-4.2,5.9-6.9,5.4-11.1c4.4,0,10,4.2,12.5,7.5c-1.3-9.4,14.3-1.3,15.7-5.1
+				c0.8,0.3,1.6,0.6,2.1,0.5c1.7-0.3,3.4-2.7,4.7-3.7c2.1-1.7,5.1-2,7.6-2.9c1-0.3,1.9-0.7,2.8-1.3
+				C643.5,153.2,643,153.5,642.5,151.9z"/>
+			<path class="st1" d="M273.5,142.6h-0.9c5.8-0.1,6.7,14.1,7.5,19.6c2.1-7.7,1.5-18.6,7.8-24.2c3,0.5,5.7,1.9,8.1,4.3
+				c-0.7-6.5-7.3-11.2-7.6-17.5C284,126.5,275.4,137.5,273.5,142.6z"/>
+			<path class="st1" d="M386,171c-4.9-1.9-5.6-7.9-7.6-11c-3.4-5.5-5.9-12-9.3-17.4c-1.2,5.9,2.9,10.1,2.6,11.3
+				c0.8,3.7-1.4,11.2-0.8,13.4c1.1,4.1,4.1,4.7,6.5,8.2c5.1,7.6,6.1,16.6,7.4,25.3c2.1-6-0.9-11.3,0.4-17.6c3-0.1,4.4,0,6.5,3.3
+				c3.7-6.1,12,0.7,14.2,5.7c-3.4-7.3-5.8-13.9-8.8-21.3C393.2,170.8,389.6,172.5,386,171z"/>
+			<path class="st1" d="M51.3,134c-1.3,1-2.7,0.3-3.8,2.5c-6.8-8-13.2,6.6-18.1,0.5c-1.1,1.3-2.4,2.3-2.9,4.5
+				c-0.4,0.1-0.6-0.1-0.7-0.5c-3.7,6.2,2.3,6.2-2,11.5c1.5-0.6,0.1-0.2,3-2.7c1.1-1,2.2-1.5,3-2.4c1.7-1.9,2.1-1.7,3.9-2.2
+				c4.6-1.1,3.1-3.4,5.5-5.1C44.3,136.5,44,142.4,51.3,134z"/>
+		</g>
+		<g>
+			<path class="st1" d="M465.6,111.7c0.9,1,1.8,2,2.7,3c1,1,2,1.8,3.1,2.6c2.2,1.6,4.7,2.8,7.2,3.7c1.3,0.4,2.6,0.8,4,0.9
+				c0.7,0.1,1.3,0.2,2.1,0.1c0.7,0,1.4-0.1,2-0.2c1.3-0.1,2.6-0.3,3.8-0.1c0.6,0.1,1,0.3,1.3,0.8c0.4,0.5,0.7,1.1,1.3,1.6
+				c1.1,0.9,2.5,1.4,3.8,1.7c1.3,0.4,2.5,0.8,3.4,1.6c1.9,1.6,3.2,4,4.9,6.1c0.8,1.1,1.7,2.1,2.8,3c1,0.9,2.2,1.6,3.4,2.2
+				c2.3,1.3,4.8,2.3,6.9,3.9c1,0.8,1.8,1.8,2.5,2.9c0.7,1.1,1.4,2.2,2.1,3.3c1.4,2.3,2.9,4.5,4.8,6.4c3.7,3.8,8.3,6.6,11.9,10.6
+				c-3.4-4.1-8-7-11.6-10.9c-1.8-1.9-3.2-4.1-4.6-6.4c-0.7-1.1-1.3-2.3-2.1-3.4c-0.7-1.1-1.5-2.2-2.6-3.1c-2.1-1.7-4.6-2.8-6.9-4.1
+				c-1.2-0.6-2.2-1.3-3.2-2.2c-1-0.8-1.8-1.8-2.6-2.9c-1.6-2.1-2.8-4.5-5-6.3c-2.3-1.9-5.3-1.8-7.1-3.4c-0.4-0.4-0.7-0.9-1.2-1.5
+				c-0.2-0.3-0.5-0.6-0.9-0.8c-0.3-0.2-0.7-0.4-1.1-0.4c-1.5-0.3-2.8-0.1-4.1,0c-0.7,0.1-1.3,0.1-1.9,0.2c-0.6,0-1.2-0.1-1.9-0.1
+				c-1.3-0.2-2.5-0.5-3.7-0.9c-2.4-0.8-4.8-2.1-6.9-3.6c-1-0.7-2-1.6-2.9-2.5c-0.9-0.9-1.7-1.9-2.6-2.9c-0.9-1-1.8-2-2.9-2.9
+				c-0.3-0.2-0.6-0.5-0.8-0.6c-0.3-0.2-0.6-0.4-1-0.6c-0.7-0.3-1.4-0.5-2.1-0.7c-1.4-0.3-2.7-0.3-3.9-0.6c-0.1,0-0.2-0.1-0.4-0.1
+				c-0.2-0.1-0.3-0.1-0.4-0.2c-0.2-0.1-0.2-0.1-0.2-0.3c0-0.1,0-0.2-0.1-0.5c0-0.2-0.2-0.6-0.6-0.8c-0.3-0.2-0.6-0.3-0.8-0.3
+				c-0.1,0-0.2,0-0.3,0l-0.1,0l-0.1,0l-0.1,0l-0.2,0c-0.5,0.1-0.9,0.3-1.3,0.5c-0.3,0.2-0.6,0.4-0.9,0.7c-0.5,0.5-1,0.9-1.5,1.3
+				c-0.1,0.1-0.2,0.2-0.3,0.2l-0.2,0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0.1l0,0l0,0c-0.1,0-0.1,0-0.2,0c-0.4-0.1-0.8-0.6-1.7-0.9
+				c-0.1,0-0.2-0.1-0.4-0.1c-0.2,0-0.4,0-0.4,0c-0.3,0-0.4,0.1-0.7,0.1c-0.4,0.1-0.8,0.3-1.1,0.5c-0.6,0.4-1.2,0.9-1.7,1.3
+				c-0.8,0.7-1.5,1.4-2.3,1.8c-1.6-2.9-3.6-5.3-5.2-8c-0.4-0.7-0.8-1.4-1.1-2.2c-0.3-0.8-0.7-1.5-1-2.3c-0.3-0.8-0.6-1.6-1.1-2.4
+				c-0.3-0.6-0.7-1.2-1.2-1.7c0.3,0.1,0.7,0.1,1,0.1c0.9-0.1,1.7-0.4,2.5-0.7c1.6-0.7,3-1.7,4.4-2.6c1.4-1,2.8-2,4.1-3.1l2-1.6
+				c0.7-0.5,1.3-0.9,2.1-1.4c1.4-0.9,2.9-1.7,4.4-2.7c0.7-0.5,1.4-1,2.1-1.5c0.7-0.5,1.4-1.1,2-1.7c0.3-0.3,0.6-0.6,0.9-1
+				c0.3-0.3,0.6-0.7,0.8-1c0.5-0.7,1-1.4,1.5-2.1c0.6-0.9,1.2-1.7,1.8-2.6l0,1.5l1.3-0.7c2-1.1,4-2.1,6-3.3c1.7-1.1,3.3-2.3,4.8-3.7
+				c0,0.1,0.1,0.1,0.1,0.2c0.2,0.3,0.3,0.7,0.5,1.1c0.3,0.8,0.6,1.9,1.2,2.8l0.6,0.9l0.7-0.8c1-1.1,2.3-2.1,3.6-3
+				c1.2-0.8,2.4-1.5,3.6-2.1c0.3,0.4,0.6,0.7,0.9,1c0.5,0.5,1,1,1.6,1.3c0.1,0.1,0.3,0.2,0.5,0.3c0.2,0.1,0.4,0.1,0.5,0.2
+				c0.4,0.1,0.8,0.2,1.2,0.1c0.2-0.1,0.4-0.1,0.6-0.2c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.1-0.1,0.2-0.2l0.1,0.2l0.6,0.9
+				c0.4,0.6,0.9,1.1,1.4,1.7c0.2,0.3,0.5,0.5,0.8,0.8c0.3,0.3,0.5,0.5,0.8,0.7c0.5,0.5,1.1,0.9,1.7,1.3c1.1,0.9,2.3,1.7,3.5,2.4
+				c1.2,0.8,2.4,1.5,3.6,2.2c-0.3,0.3-0.7,0.4-1.1,0.5c-0.5,0.1-1,0.1-1.6,0.4c-0.1,0.1-0.3,0.2-0.4,0.2c-0.1,0.1-0.2,0.1-0.3,0.3
+				c-0.2,0.2-0.3,0.4-0.5,0.7c-0.5,0.9-0.7,1.9-1,2.9c-0.2,1-0.4,2-0.9,2.9c0.6-0.8,0.8-1.9,1.1-2.8c0.3-1,0.6-1.9,1.1-2.7
+				c0.1-0.2,0.3-0.4,0.4-0.5c0-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.1c0.4-0.2,0.9-0.2,1.4-0.2c0.5,0,1.1-0.2,1.6-0.6
+				c0.2-0.2,0.4-0.4,0.6-0.6c0,0,0.1-0.1,0.1-0.1l0.3,0.3c0.2,0.2,0.5,0.4,0.8,0.7c0.5,0.4,1.1,0.8,1.7,1.1c1.2,0.7,2.4,1.2,3.5,1.7
+				c0.6,0.2,1.2,0.5,1.7,0.8c0.6,0.3,1.1,0.6,1.6,0.9l0.7,0.5l0.6,0.6l0.5,0.7l0.5,0.7l0.4,0.6l0.6-0.3c0.3-0.1,0.5-0.3,0.8-0.4
+				c0.2-0.2,0.5-0.4,0.7-0.6c0.4-0.5,0.6-1,0.8-1.5c0.1-0.5,0.3-0.9,0.4-1.3c0,0,0,0,0,0c0.4,0.3,0.7,0.6,1.1,0.9
+				c0.7,0.6,1.5,1.1,2.2,1.6l2.2,1.5c0.4,0.3,0.7,0.5,1.1,0.8c0.2,0.1,0.3,0.3,0.5,0.4c0.1,0.1,0.1,0.1,0.2,0.2c0,0,0,0,0,0
+				c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2l0.3,0.6c1.6,1.3,3.4,2.2,5.1,3.1c1.7,0.9,3.5,1.7,5,2.7l0.6,0.4c0.2,0.1,0.4,0.3,0.6,0.4
+				c0.3,0.3,0.7,0.6,1,0.9c0.7,0.6,1.3,1.3,2,2c1.3,1.4,2.6,2.9,4.2,4.2l1,0.8l0.3-1.3c0-0.1,0.2-0.5,0.5-0.8
+				c0.1-0.1,0.1-0.2,0.2-0.3c0.2,0.2,0.4,0.3,0.7,0.4c0.5,0.3,1.1,0.6,1.6,0.8c1.1,0.5,2.2,0.8,3.3,1.1c2.2,0.5,4.3,0.7,6.6,0.6
+				c0.1,0.2,0.2,0.4,0.3,0.5c0.2,0.3,0.4,0.5,0.6,0.8c0.4,0.5,0.8,1,1.2,1.5c0.9,0.9,1.8,1.8,2.8,2.5c0.5,0.4,1,0.8,1.5,1.1
+				c0.5,0.3,1.1,0.7,1.6,0.9c0.3,0.1,0.6,0.3,0.9,0.4c0.3,0.1,0.6,0.2,0.9,0.3c0.3,0.1,0.6,0.1,0.9,0.2c0.2,0,0.3,0,0.5,0
+				c-0.3,0.3-0.7,0.5-1,0.8c-0.6,0.5-1.2,1.1-1.8,1.6c-0.3-0.1-0.7-0.2-1-0.2l-0.6-0.1l-0.3,0.6c-0.6,1.4-1.4,2.8-2.3,4.1
+				c-0.5,0.6-0.9,1.3-1.5,1.8c-0.5,0.6-1.1,1.1-1.6,1.7c-0.6,0.5-1.2,1-1.8,1.5c-0.6,0.5-1.3,0.9-2,1.3c-0.7,0.4-1.3,0.7-2.1,1
+				c-0.7,0.3-1.6,0.7-2.3,1.1c-0.7,0.5-1.4,1-2.1,1.5c-0.6,0.5-1.3,1.1-1.9,1.7c-1.2,1.1-2.3,2.4-3.4,3.6c-2.1,2.5-4.1,5.1-5.9,7.9
+				c2.2-2.4,4.4-4.8,6.7-7.1c0.6-0.6,1.2-1.1,1.7-1.7c0.6-0.5,1.2-1.1,1.8-1.6c0.6-0.5,1.2-1,1.9-1.5c0.6-0.5,1.3-0.9,1.9-1.3
+				c0.7-0.4,1.3-0.6,2.1-0.9c0.8-0.3,1.6-0.7,2.3-1.1c0.7-0.4,1.5-0.9,2.2-1.4c0.7-0.5,1.4-1,2-1.6c0.6-0.6,1.2-1.2,1.8-1.8
+				c0.6-0.6,1.1-1.3,1.6-2c0.5-0.7,0.9-1.4,1.3-2.2c0.3-0.5,0.5-1.1,0.8-1.7c0.5,0.1,1.1,0.3,1.6,0.5c0.8,0.3,1.5,0.6,2.3,0.9
+				c1.6,0.6,3.1,1.3,4.8,1.8c0.4,0.1,0.8,0.2,1.3,0.3c0.2,0,0.5,0.1,0.7,0.1l0.3,0c0.1,0,0.2,0,0.3,0c0.3,0,0.7,0.1,1.1,0.2
+				c0.4,0.1,0.8,0.3,1.2,0.4c0.8,0.3,1.6,0.6,2.4,0.9c0.8,0.3,1.7,0.5,2.5,0.4c-0.8,0-1.6-0.3-2.4-0.7c-0.7-0.4-1.5-0.8-2.2-1.2
+				c-0.4-0.2-0.8-0.4-1.2-0.5c-0.4-0.2-0.8-0.3-1.3-0.4c-0.1,0-0.2,0-0.3,0l-0.2,0l-0.1,0c-0.2,0-0.3,0-0.5-0.1
+				c-0.4-0.1-0.7-0.2-1.1-0.4c-1.5-0.6-3-1.3-4.5-2.1c-0.8-0.4-1.5-0.7-2.3-1.1c-0.4-0.2-0.9-0.3-1.4-0.5c0.6-0.5,1.2-0.9,1.8-1.4
+				c0.7-0.5,1.5-1.1,2.2-1.5c0.4-0.2,0.8-0.5,1.1-0.5c0.4-0.1,0.8-0.1,1.2,0c1.7,0.2,3.4,0.8,5.3,1.1c1.9,0.2,3.7,0.2,5.5,0.1
+				c1.8,0,3.6-0.1,5.3,0.2c1.7,0.3,3.2,1,4.4,2.2c0.6,0.6,1.1,1.3,1.7,2c0.6,0.7,1.3,1.5,2.4,1.9c1.1,0.4,2.1,0.3,3,0.3
+				c0.9,0,1.8,0,2.7,0c0.9,0,1.8,0,2.5,0.2c0.8,0.1,1.4,0.4,2,1c0.6,0.5,1.3,1.2,1.8,1.8c0.1,0.2,0.3,0.6,0.5,1
+				c0.2,0.4,0.3,0.9,0.6,1.4c0.3,0.5,0.6,0.9,1.1,1.3l0.2,0.1l0.3,0.1c0.2,0.1,0.3,0.1,0.4,0.2c0.3,0.1,0.5,0.1,0.8,0.2
+				c0.9,0.2,1.8,0.3,2.3,0.6c0.6,0.4,1.1,0.9,1.6,1.6c0.5,0.7,1,1.5,1.9,2.3c0.8,0.7,1.8,1.2,2.9,1.3c0.4,0.1,1,0.1,1.5,0.1
+				c0.5,0,1,0,1.5-0.1c1.9-0.2,3.6-0.6,5.2-0.3c0.4,0.1,0.8,0.2,1.1,0.3l0.3,0.1c0,0,0.2,0.1,0.3,0.1c0.2,0.1,0.3,0.2,0.4,0.3
+				c0.6,0.5,1,1.2,1.8,2c0.4,0.4,0.8,0.7,1.3,1c0.7,0.3,1.2,0.3,1.7,0.3c0.9,0,1.5,0.1,2,0.6l0.5,0.4l0.6-0.5
+				c0.1-0.1,0.3-0.2,0.5-0.2c0.3,0,0.6,0,0.9,0.2c0.3,0.1,0.7,0.2,1,0.4c0.3,0.2,0.7,0.3,1,0.5c0.7,0.4,1.3,0.8,2.1,1.2
+				c0.2,0.1,0.4,0.2,0.6,0.3l0.6,0.2l1.1,0.4c1.5,0.6,3,1.2,4.6,1.4c0.4,0.1,0.8,0.1,1.2,0.1c0.4,0,0.8-0.1,1.3-0.2
+				c0.2,0,0.4-0.1,0.6-0.2c0.2-0.1,0.4-0.2,0.6-0.3c0.3-0.1,0.5-0.3,0.8-0.6c1.3,0.9,2.7,1.9,4,2.9c1.4,1.1,2.7,2.2,4,3.4l0,0l0,0
+				c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1-0.1c0,0,0-0.1,0-0.1c-0.1-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.3-0.1c-2.2-2.5-4.9-4.5-7.5-6.6
+				l-0.2-0.2l-0.3,0.2c-0.3,0.2-0.6,0.4-0.9,0.6c-0.2,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.3,0.1-0.5,0.1c-0.3,0.1-0.7,0.1-1.1,0.1
+				c-0.4,0-0.7,0-1.1-0.1c-1.5-0.2-2.9-0.9-4.3-1.5l-1.1-0.5c-0.2-0.1-0.4-0.1-0.5-0.2c-0.1-0.1-0.3-0.1-0.5-0.2
+				c-0.6-0.4-1.3-0.8-2-1.2c-0.3-0.2-0.7-0.4-1.1-0.6c-0.4-0.2-0.7-0.4-1.2-0.5c-0.4-0.2-0.9-0.3-1.4-0.3c-0.3,0-0.7,0.1-1,0.2
+				c-0.3-0.2-0.7-0.4-1-0.5c-0.5-0.2-1.1-0.2-1.5-0.2c-0.4,0-0.8-0.1-1-0.2c-0.3-0.1-0.6-0.4-0.9-0.7c-0.5-0.5-1-1.4-1.8-2.1
+				c-0.2-0.2-0.4-0.4-0.7-0.5c-0.1-0.1-0.2-0.1-0.3-0.2l-0.4-0.2c-0.5-0.2-1-0.4-1.5-0.5c-2-0.4-3.9,0-5.7,0.2
+				c-0.4,0-0.9,0.1-1.3,0.1c-0.4,0-0.7,0-1.2-0.1c-0.7-0.1-1.4-0.5-2-0.9c-1.1-0.9-1.8-2.9-3.8-4.1c-1.1-0.6-2.1-0.6-2.9-0.8
+				c-0.4-0.1-0.8-0.2-0.9-0.3c-0.2-0.1-0.4-0.4-0.6-0.7c-0.2-0.3-0.3-0.7-0.5-1.1c-0.2-0.4-0.3-0.9-0.7-1.5
+				c-0.7-0.8-1.3-1.4-2.1-2.1c-0.8-0.6-1.8-1.1-2.8-1.3c-1-0.2-2-0.2-2.9-0.2c-0.9,0-1.8,0.1-2.7,0.1c-0.9,0-1.8,0.1-2.3-0.2
+				c-0.6-0.2-1.2-0.8-1.8-1.5c-0.6-0.6-1.1-1.4-1.9-2.1c-1.4-1.4-3.4-2.2-5.3-2.5c-1.9-0.3-3.8-0.1-5.6,0c-1.8,0.1-3.6,0.3-5.3,0.1
+				c-1.7-0.2-3.5-0.8-5.4-0.9c-0.5,0-1,0-1.5,0.1c-0.5,0.2-0.9,0.4-1.3,0.7c-0.4,0.3-0.8,0.5-1.1,0.8c-0.2,0-0.4,0-0.5-0.1
+				c-0.3-0.1-0.6-0.1-0.9-0.3c-0.3-0.1-0.6-0.2-0.8-0.4c-0.3-0.1-0.5-0.3-0.8-0.4c-0.5-0.3-1-0.7-1.5-1c-0.5-0.4-1-0.8-1.4-1.2
+				c-0.9-0.8-1.8-1.7-2.5-2.6c-0.4-0.5-0.7-1-1.1-1.5c-0.2-0.2-0.3-0.5-0.5-0.8c-0.2-0.3-0.3-0.5-0.4-0.8l-0.2-0.3l-0.3,0
+				c-1.1,0-2.2-0.1-3.3-0.2c-1.1-0.1-2.2-0.3-3.2-0.6c-1.1-0.3-2.1-0.6-3.1-1.1c-0.5-0.2-0.9-0.5-1.4-0.8c-0.4-0.3-0.8-0.6-1.2-0.9
+				l-1-0.9l-0.3,1.3c0,0.1-0.2,0.5-0.5,0.8c0,0.1-0.1,0.1-0.1,0.2c-1.1-1-2.1-2.2-3.2-3.4c-0.6-0.7-1.3-1.5-2.1-2.1
+				c-0.4-0.3-0.7-0.7-1.2-1c-0.2-0.2-0.4-0.3-0.6-0.4l-0.6-0.4c-1.7-1.1-3.5-2-5.2-2.8c-1.6-0.8-3.3-1.7-4.6-2.8c0,0,0,0,0,0
+				c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.3c-0.2-0.2-0.4-0.3-0.6-0.5c-0.4-0.3-0.8-0.6-1.1-0.8l-2.3-1.5
+				c-0.7-0.5-1.5-1-2.2-1.5c-0.3-0.3-0.7-0.5-1-0.8c-0.3-0.3-0.6-0.6-0.7-0.8l-0.8-1.2l-0.7,1.2c-0.6,1-0.7,2.1-1,2.9
+				c-0.1,0.4-0.3,0.8-0.5,1c-0.1,0.1-0.2,0.2-0.3,0.3l-0.1-0.2l-0.7-0.8l-0.8-0.7c-0.3-0.2-0.6-0.4-0.9-0.6
+				c-0.6-0.4-1.2-0.7-1.8-0.9c-0.6-0.3-1.2-0.5-1.8-0.7c-1.2-0.5-2.4-0.9-3.5-1.4c-0.5-0.3-1.1-0.6-1.6-0.9l-0.7-0.6l-0.6-0.6
+				l-0.5-0.5l-0.3,0.6c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.4-0.4,0.5c0,0,0,0,0,0c-2.2-1.7-4.6-3.3-6.7-5.2
+				c-0.5-0.5-1-0.9-1.5-1.4c-0.2-0.2-0.5-0.5-0.7-0.7c-0.2-0.3-0.5-0.5-0.7-0.8c-0.5-0.5-0.9-1.1-1.3-1.6l-0.5-0.9l-0.5-0.9
+				l-0.4-0.8l-0.6,0.7l-0.3,0.3c-0.1,0.1-0.2,0.2-0.3,0.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0-0.3,0.1c-0.2,0-0.4,0-0.7-0.1
+				c-0.1-0.1-0.2-0.1-0.4-0.2c-0.1-0.1-0.2-0.1-0.3-0.2c-0.5-0.3-0.9-0.7-1.3-1.2c-0.4-0.4-0.8-0.9-1.1-1.4l-0.4-0.5l-0.6,0.3
+				c-1.5,0.7-3,1.5-4.4,2.4c-1.1,0.7-2.1,1.4-3.1,2.3c-0.2-0.4-0.3-0.9-0.4-1.4c-0.1-0.5-0.3-0.9-0.6-1.4c-0.1-0.2-0.3-0.5-0.5-0.7
+				c-0.2-0.2-0.4-0.4-0.7-0.6l-0.6-0.5l-0.6,0.6c-1.5,1.5-3.3,2.8-5.2,4c-1.6,0.9-3.2,1.8-4.8,2.7c-0.1-0.2-0.1-0.4-0.1-0.6l0.1-2.4
+				l-1.7,1.8c-1.2,1.3-2.2,2.8-3.1,4.3c-0.5,0.7-0.9,1.4-1.4,2.1c-0.2,0.3-0.5,0.7-0.8,1c-0.3,0.3-0.5,0.6-0.8,0.9
+				c-0.6,0.6-1.2,1.1-1.8,1.6c-0.6,0.5-1.3,1-2,1.5c-1.4,1-2.8,1.9-4.3,2.8c-0.7,0.4-1.5,1-2.1,1.5l-1.9,1.7
+				c-1.3,1.1-2.6,2.2-3.9,3.3c-1.3,1.1-2.7,2.1-4.1,2.9c-0.7,0.4-1.5,0.7-2.3,0.9c-0.4,0.1-0.8,0.1-1.1,0c-0.1-0.1-0.2-0.3-0.4-0.4
+				c-0.7-0.7-1.4-1.2-2-1.7c-0.6-0.5-1.3-1.1-1.9-1.7c-0.6-0.6-1.3-1.2-2-1.7c-0.8-0.6-1.6-1-2.4-1.3c-0.8-0.3-1.6-0.7-2.3-1
+				c-0.7-0.4-1.3-0.9-1.9-1.4c-0.6-0.5-1.2-1.1-1.7-1.7c-0.5-0.6-0.9-1.3-1.1-1.9l-0.4-1.5l-1.1,1.1c-0.8,0.8-1.4,1.6-2.2,2.3
+				c-0.7,0.7-1.5,1.4-2.3,2c-0.4,0.3-0.8,0.5-1.1,0.6c0,0,0,0-0.1,0l-0.1,0c0,0-0.2-0.1-0.3-0.3c-0.3-0.3-0.6-0.8-0.9-1.2
+				c-0.3-0.4-0.6-0.9-0.9-1.3c-0.1-0.1-0.2-0.2-0.3-0.4l-0.2-0.2l-0.2-0.2c-0.2-0.2-0.4-0.4-0.7-0.5l-1.3-1c-0.4-0.3-0.7-0.6-1-1
+				c-0.2-0.2-0.3-0.4-0.4-0.6l-0.4-0.6c-1.3-1.8-2.8-3.3-3.4-5l-0.3-0.8l-0.8,0.2c-1,0.2-1.9,0.8-2.5,1.3c-0.6,0.6-1.1,1.1-1.7,1.5
+				c-0.3,0.2-0.5,0.3-0.7,0.4c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.2,0-0.3,0l-0.1,0l0,0l0,0l0,0c-0.5-0.1-0.9-0.3-1.3-0.9
+				c-0.4-0.5-0.9-1.3-1.7-1.9c-0.8-0.5-1.5-0.9-2.3-1.2c-0.8-0.3-1.4-0.6-1.9-0.9c-0.5-0.4-0.9-0.9-1.3-1.5c-0.8-1.3-1.6-2.6-2.3-4
+				c-0.7-1.4-1.5-2.8-2.1-4.1c-1.4-2.8-2.7-5.6-4-8.5l-0.1-0.2l-0.1-0.1l-2.6-2.2l-1.3-1.1l-0.6-0.6c-0.2-0.2-0.5-0.4-0.6-0.5
+				c-0.7-0.7-1.4-1.6-2-2.5c-0.6-0.9-1.1-1.9-1.6-2.9l0-0.1l-0.1-0.1c-1.2-1.5-2.3-2.9-3.6-4.2c-1.2-1.4-2.5-2.7-3.9-4l-0.6-0.6
+				l-0.6,0.7c-1.2,1.4-2.7,2.7-4.2,4c-0.7,0.6-1.5,1.3-2.2,2c-0.7,0.7-1.4,1.4-2.1,2.2c-0.7,0.9-1.1,1.9-1.5,2.7
+				c-0.2,0.4-0.4,0.8-0.7,1.1c-0.2,0.2-0.5,0.4-0.9,0.5c-0.8,0.3-1.9,0.5-2.9,1.2c-0.7,0.5-1.6,1-2.5,1.6c-0.4,0.3-0.9,0.7-1.2,1.1
+				c-0.2,0.2-0.4,0.4-0.5,0.7c-0.1,0.1-0.1,0.2-0.2,0.4l-0.1,0.2l-0.1,0.2c-0.4,1-0.7,1.9-1,2.9c-0.1,0.5-0.3,0.9-0.4,1.5
+				c-0.1,0.5-0.2,0.8-0.4,1.2c-0.2,0.4-0.5,0.8-0.8,1.3c-0.3,0.5-0.4,1.1-0.5,1.6c-0.2,1-0.3,2-0.4,2.9c-0.2,0.9-0.4,1.8-0.8,2.5
+				c-0.5,0.7-1.2,1.4-1.9,2.1c-0.6,0.6-1.1,1.2-1.6,2c-0.1,0-0.1,0-0.2-0.1c-0.3,0-0.6-0.1-0.9,0c-0.6,0-1.2,0.4-1.6,0.7
+				c-0.8,0.7-1.4,1.6-1.8,2.4c-0.5,0.8-0.9,1.7-1.4,2.4c-0.4,0.7-1.1,1.4-1.7,2l-3.8,4.1c-0.6,0.7-1.3,1.4-1.9,2.1
+				c-0.6,0.7-1.2,1.5-1.8,2.1c-1.2,1.2-3,1.9-4.6,3c-0.8,0.6-1.5,1.3-2,2.1c-0.5,0.8-0.9,1.7-1.3,2.5c-0.4,0.8-0.8,1.7-1.2,2.5
+				c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1-0.5-0.4-0.9-0.7-1.3c-0.5-0.6-1-1.1-1.4-1.7c-0.8-1.2-1.4-2.6-2.1-3.9c-1.4-2.6-3-5.2-5.3-7.2
+				l-0.2-0.2l-0.2,0.1c-0.1,0-0.4-0.1-0.7-0.3c-0.3-0.2-0.5-0.5-0.8-0.7c-0.5-0.5-1.1-1-1.6-1.5c-0.6-0.5-1.2-1-2-1.3
+				c-0.4-0.1-0.9-0.2-1.4-0.1c-0.2,0-0.3,0.1-0.4,0.2c-0.1-0.5-0.4-0.9-0.6-1.3c-0.4-0.7-0.8-1.3-1.3-1.8l-0.5-0.7l-0.4,0.8
+				c-0.2,0.4-0.6,0.6-1,1c-0.3-0.4-0.7-0.8-1.2-1.1c-0.7-0.4-1.3-0.7-2-0.9c-0.6-0.3-1.2-0.5-1.6-0.9c-0.4-0.4-0.7-0.9-1-1.4
+				c-0.2-0.5-0.2-1.2-0.3-1.9c-0.1-0.7-0.1-1.4-0.5-2.2c-0.2-0.4-0.5-0.8-0.8-1c-0.3-0.3-0.6-0.5-0.8-0.7c-0.3-0.2-0.5-0.4-0.8-0.6
+				c-0.1-0.1-0.2-0.1-0.2-0.2c0-0.1-0.1-0.2-0.1-0.3c-0.1-0.3-0.2-0.8-0.6-1.2c-0.1-0.1-0.1-0.1-0.2-0.2l-0.1-0.1
+				c-0.1-0.1-0.3-0.2-0.4-0.2c-0.2-0.1-0.4-0.2-0.6-0.2c-0.7-0.2-1.5-0.3-2-0.5l0,0c0,0,0,0,0,0c0-0.1-0.1-0.2-0.3-0.4
+				c-0.1-0.2-0.3-0.4-0.6-0.6c-0.2-0.1-0.3-0.1-0.5-0.2c0,0-0.3-0.1-0.5,0c-0.6,0-0.9,0.2-1.2,0.3c-0.1,0-0.2,0.1-0.3,0.1
+				c-0.1,0-0.1,0-0.3-0.1c-0.2,0-0.3-0.1-0.4-0.1c-0.1,0-0.3-0.1-0.4-0.2c-0.3-0.1-0.5-0.3-0.8-0.4c-0.5-0.3-1-0.8-1.6-1.2
+				c-1.1-0.9-2.2-1.8-3.5-2.4l-0.6-0.3l-0.4,0.5c-0.6,0.7-1.3,1.4-2.1,2c-0.8,0.6-1.6,1.2-2.4,1.8c-0.8,0.6-1.8,1.4-2.3,2.4
+				c-0.5,1-0.9,1.9-1.4,2.5c-0.6,0.7-1.4,1.4-2.1,2c-0.4,0.3-0.7,0.6-1.1,0.9c-0.2,0.1-0.4,0.3-0.5,0.4c0,0-0.2,0.1-0.3,0.2
+				l-0.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.3c-0.5,0.1-1.1,0.2-1.7,0.5c-1.1,0.5-2,1.4-2.7,2.1c-0.7,0.8-1.3,1.6-1.9,2.3
+				c-0.3,0.3-0.7,0.7-1,0.9c-0.4,0.3-0.8,0.5-1.2,0.8c-0.9,0.5-1.8,1.1-2.6,1.9c-0.9,1-1.2,1.9-1.7,2.7c-0.2,0.4-0.5,0.8-0.7,0.9
+				c-0.3,0.2-0.7,0.3-1.1,0.5c-0.9,0.2-1.9,0.3-3,0.7c-0.5,0.2-1.1,0.4-1.6,0.7c-0.5,0.3-0.9,0.6-1.3,0.9c-0.4,0.3-0.9,0.7-1.3,1.3
+				c-0.2,0.3-0.4,0.7-0.5,1.1c-0.2,0-0.4,0-0.6,0.1c-0.4,0.1-0.9,0.2-1.3,0.3c-0.9,0.3-1.7,0.7-2.4,1.2c-1.3,0.9-2.3,2.1-3.1,3.4
+				c-0.7-0.2-1.4-0.3-2.1-0.5c-0.4-0.1-0.9-0.2-1.3-0.3c-0.4-0.1-0.8-0.2-1.2-0.4c-0.8-0.3-1.6-0.6-2.4-1.1
+				c-0.4-0.2-0.7-0.4-1.1-0.7c-0.4-0.3-0.7-0.5-1.1-0.8c-0.2-0.1-0.4-0.3-0.6-0.4c-0.2-0.1-0.5-0.3-0.7-0.4
+				c-0.4-0.2-0.9-0.4-1.4-0.6c-0.9-0.3-1.9-0.5-2.8-0.6c-0.9-0.1-1.8-0.2-2.7-0.4c-0.4-0.1-0.9-0.2-1.3-0.3
+				c-0.4-0.1-0.8-0.3-1.2-0.4l-0.5-0.2l-0.3,0.5c-0.7,1.3-1.2,2.7-1.7,4c-0.2,0-0.3,0-0.5-0.1c-0.3-0.1-0.5-0.2-0.8-0.4
+				c-0.6-0.3-1.1-0.8-1.8-1.1L190,86l-0.2,0.5c-0.3,0.7-0.8,1.3-1.6,1.7c-0.7,0.4-1.5,0.7-2.4,1c-0.4,0.2-0.8,0.4-1.2,0.5
+				c-0.4,0.2-0.8,0.3-1.2,0.6c-0.5,0.3-0.8,0.8-1,1.2c-0.2,0.4-0.3,0.8-0.5,1.3c-0.1,0.4-0.3,0.9-0.4,1.3l-0.3,1.3
+				c-0.2,0.9-0.4,1.7-0.7,2.5c-0.1,0.4-0.3,0.8-0.5,1.2c-0.2,0.4-0.4,0.8-0.7,1.1c-0.3,0.3-0.6,0.6-0.9,0.8
+				c-0.2,0.1-0.4,0.1-0.6,0.2c-0.2,0-0.4,0-0.6,0l-0.1,0l0,0.1c-0.6,1.1-1,2.3-1.2,3.6c-0.1,0.6-0.1,1.3-0.1,1.9
+				c0,0.3,0.1,0.6,0.2,0.9c0,0,0,0.1,0,0.1c-1-0.1-2.1-0.3-3.1-0.3c-0.5,0-1.1,0-1.7,0.3c-0.5,0.3-0.9,0.7-1.1,1.3
+				c-0.2,0.5-0.4,1.1-0.6,1.5c-0.2,0.5-0.5,0.9-0.8,1.3c-0.5,0.7-1.2,1.3-1.7,2.1c-1-1.1-2.2-2-3.5-2.8c-1.4-0.9-2.8-1.6-4.3-2.3
+				c-1.5-0.7-2.9-1.4-4.4-2c-1.5-0.6-3-1.2-4.5-1.8c-1.5-0.6-2.9-1.2-4.3-2c-0.7-0.4-1.3-0.8-1.9-1.3c-0.6-0.5-1.2-1-1.7-1.5
+				c-0.3-0.3-0.5-0.6-0.7-0.9c-0.2-0.3-0.4-0.6-0.6-1c-0.4-0.7-0.8-1.4-1.3-2.1c-0.4-0.7-0.9-1.4-1.5-2.1c-0.6-0.6-1.2-1.4-2.4-1.7
+				l-0.7-0.2l-0.4,0.7c-0.2,0.5-0.5,0.9-0.8,1.2c-0.3,0.3-0.7,0.6-1.2,0.9c-0.6,0.4-1,0.8-1.4,1.1c-0.2,0.2-0.4,0.3-0.6,0.4
+				c0,0-0.1,0-0.1,0l0,0l0,0l0,0c0,0,0,0,0,0c-0.1-0.1-0.1-0.2-0.3-0.3c-0.2-0.2-0.4-0.3-0.6-0.3c-0.1,0-0.2,0-0.2,0l-0.1,0l-0.1,0
+				l-0.1,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.4,0.1c-0.8,0.2-1.4,0.7-1.8,1.1c-0.5,0.4-0.9,0.8-1.3,1.2c-0.2,0.2-0.4,0.4-0.6,0.5
+				c-0.2,0.2-0.4,0.3-0.7,0.4c-0.9,0.6-1.9,1-3,1.6c-0.5,0.3-1,0.4-1.7,1c-0.6,0.5-1,1-1.3,1.6c-0.3,0.5-0.6,1-0.9,1.3
+				c-0.1,0.1-0.2,0.2-0.2,0.3c0,0-0.1,0.1-0.1,0.1l-0.2,0.1c-0.2,0.1-0.3,0.3-0.6,0.4c-0.9,0.5-1.9,0.8-3,0.9l-0.2,0
+				c-0.1-0.1-0.3-0.3-0.6-0.4c-0.2-0.1-0.4,0-0.6,0l-0.1,0l0,0l-0.1,0l0,0l-0.1,0c-0.1,0.1-0.2,0.1-0.3,0.2l-0.2,0.2
+				c-0.1,0.1-0.3,0.2-0.4,0.3c-0.2,0.2-0.4,0.4-0.6,0.7l-1.2,1.3c-0.2,0.2-0.4,0.4-0.5,0.6c-0.2,0.2-0.4,0.4-0.7,0.6
+				c-0.2,0.2-0.5,0.5-0.6,0.9c-0.2,0.4-0.2,0.8-0.2,1.1c0.1,0.7,0.1,1.1,0,1.6c-0.1,0.5-0.3,0.9-0.6,1.4c-0.3,0.4-0.6,0.8-1,1.2
+				c-0.8,0.8-1.7,1.4-2.6,2.1c-0.9,0.7-1.9,1.4-2.7,2.3c-0.8,0.9-1.4,1.9-2,2.9c-0.5,0.7-1,1.4-1.7,2.1c-0.1-0.1-0.2-0.2-0.4-0.3
+				c-0.2-0.2-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.3-0.7-0.4c-0.4-0.2-0.9-0.4-1.2-0.6c-0.4-0.2-0.7-0.4-1.1-0.7
+				c-0.3-0.3-0.8-0.6-1.2-0.8c-1.7-1-3.4-1.6-4.8-2.6l-0.5-0.4l-0.6,0.3c-0.2,0.2-0.5,0.3-0.7,0.4c-0.2,0.1-0.5,0.2-0.7,0.3
+				c-0.2,0.1-0.5,0.1-0.7,0.1c-0.2,0-0.5,0-0.7-0.1c-0.5-0.1-1-0.4-1.6-0.7l-1.7-1l-0.5-0.3l-0.5,0.3c-0.8,0.6-2,0.7-3.4,1
+				c-0.3,0.1-0.7,0.2-1.1,0.4c-0.1,0-0.2,0.1-0.3,0.1l-0.2,0.1l-0.5,0.3c-0.6,0.4-1.1,0.8-1.6,1.3c-1,0.9-1.8,1.7-2.9,2.3
+				c-1,0.6-2.1,1-3.3,1.4c-1.2,0.4-2.5,0.6-3.7,1.1c-1.3,0.4-2.5,1-3.6,1.8c-1.6,1-2.9,2.2-4.2,3.4c-1-0.3-1.9-0.9-2.8-1.4
+				c-0.9-0.6-1.8-1.3-2.7-2l-0.3-0.2l-0.3,0.4c-0.3,0.4-0.7,0.8-1.1,1c-0.4,0.2-0.9,0.4-1.4,0.5c-1,0.2-2.1,0.1-3.2,0
+				c-0.6,0-1.1-0.1-1.7,0c-0.3,0-0.6,0-0.9,0.1c-0.3,0-0.6,0.1-0.9,0.2c-1.2,0.3-2.2,0.7-3.2,0.8c-0.5,0.1-1,0.1-1.4,0l-0.3-0.1
+				l-0.4-0.1c-0.2-0.1-0.5-0.2-0.7-0.3c-0.5-0.2-1-0.4-1.4-0.7l-0.3-0.2l-0.3-0.2l-0.4-0.3c-0.1-0.1-0.3-0.2-0.7-0.3
+				c-0.4-0.1-0.7,0-0.9,0.1c-0.2,0.1-0.4,0.2-0.5,0.2c-0.2,0.1-0.2,0.1-0.4,0.2l-0.4,0.2c-0.6,0.4-1,0.8-1.4,1.2
+				c-0.8,0.9-1.5,1.7-2.3,2.2c-0.7,0.5-1.9,0.7-3,1.3c-1.2,0.6-2.1,1.6-2.7,2.5c-1.4,2-2.2,4.1-3.5,5.7c-0.7,0.9-1.4,1.7-2.2,2.5
+				c-0.8,0.8-1.6,1.5-2.4,2.3c-1.7,1.5-3.4,2.9-5.1,4.4c1.9-1.2,3.8-2.4,5.7-3.7c0.9-0.7,1.8-1.4,2.7-2.1c0.9-0.7,1.7-1.5,2.5-2.4
+				c1.7-1.8,2.6-3.9,3.8-5.6c0.7-0.9,1.4-1.6,2.2-2c0.4-0.2,0.9-0.4,1.5-0.6c0.5-0.2,1.2-0.4,1.7-0.8c1.1-0.7,1.9-1.7,2.6-2.4
+				c0.4-0.4,0.8-0.7,1.1-1l0.3-0.2l0.3-0.2c0.1,0,0.1-0.1,0.2-0.1c0.1,0.1,0.2,0.1,0.3,0.2l0.4,0.3l0.4,0.2c0.5,0.3,1.1,0.5,1.6,0.8
+				c0.3,0.1,0.6,0.2,0.9,0.3l0.4,0.1c0.2,0,0.3,0.1,0.5,0.1c0.7,0.1,1.3,0,1.9-0.1c1.2-0.3,2.3-0.7,3.3-1c0.2-0.1,0.5-0.1,0.8-0.2
+				c0.2,0,0.5-0.1,0.7-0.1c0.5-0.1,1.1-0.1,1.6-0.1c1.1,0,2.3,0,3.5-0.3c0.6-0.1,1.2-0.4,1.7-0.8c0.4-0.3,0.7-0.7,1-1
+				c0.8,0.5,1.7,1,2.6,1.5c0.9,0.5,1.9,0.8,3,1c-0.6,0.5-1.2,1.1-1.7,1.6c-0.9,0.9-1.9,1.7-2.8,2.5c-1,0.8-2,1.6-3,2.1
+				c-1,0.5-2.2,0.3-3.6,0.4c-0.7,0-1.4,0.1-2.1,0.4c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.1-0.3,0.2-0.4,0.3c-0.3,0.2-0.5,0.4-0.8,0.7
+				c-1,1-1.6,2.1-2.4,3.1c-0.4,0.5-0.8,0.9-1.3,1.3c-0.1,0.1-0.2,0.2-0.4,0.3c-0.1,0.1-0.2,0.1-0.4,0.2c-0.3,0.1-0.6,0.1-0.9,0.2
+				c-0.3,0-0.7,0.1-1,0.1c-0.3,0.1-0.6,0.3-0.9,0.5c-0.5,0.4-0.9,1-1.3,1.4c-0.8,1-2.1,1.5-2.9,2.5c0.9-1,2.1-1.4,3.1-2.3
+				c0.5-0.5,0.9-1,1.4-1.3c0.5-0.4,1.1-0.4,1.7-0.4c0.3,0,0.7,0,1-0.1c0.2,0,0.3-0.1,0.5-0.2c0.1-0.1,0.3-0.2,0.4-0.3
+				c0.6-0.4,1-0.9,1.5-1.3c0.9-1,1.6-2.1,2.5-2.9c0.2-0.2,0.5-0.4,0.7-0.5c0.1-0.1,0.3-0.2,0.4-0.2c0.1-0.1,0.3-0.1,0.4-0.2
+				c0.5-0.2,1.1-0.3,1.7-0.3c1.2,0,2.6,0.3,4-0.3c1.3-0.6,2.3-1.3,3.4-2.1c1-0.8,2-1.7,3-2.5c1-0.9,1.9-1.7,2.9-2.5
+				c1-0.8,2-1.6,3-2.2c1.1-0.7,2.1-1.2,3.3-1.5c1.2-0.4,2.4-0.6,3.7-1c1.3-0.4,2.5-0.8,3.8-1.5c0.3-0.2,0.5-0.3,0.9-0.5
+				c0.3-0.2,0.6-0.4,0.8-0.6c0.5-0.4,1-0.9,1.5-1.3c1-0.8,1.9-1.6,2.9-1.8c0.9-0.2,2.2-0.3,3.3-0.9c0,0.2,0.1,0.5,0.1,0.7
+				c0.1,0.4,0.3,0.8,0.4,1.3c0.2,0.4,0.4,0.8,0.6,1.2c0.2,0.4,0.4,0.8,0.7,1.2c0.3,0.4,0.7,0.7,1,1c0.3,0.3,0.6,0.6,0.8,0.9
+				c0.3,0.4,0.5,0.7,0.8,1.1l0.8,1c0.3,0.4,0.5,0.7,0.8,1c0.2,0.3,0.5,0.7,0.7,1.1l0.7,1.1c0.2,0.4,0.5,0.8,0.8,1.1
+				c0.2,0.3,0.5,0.7,0.8,1.1c0.3,0.4,0.6,0.7,1.1,1.1c0.1,0,0.1,0.1,0.3,0.2c0.1,0,0.2,0,0.2,0.1l0.1,0l0,0l0.1,0l0,0l0.1,0
+				c0.1,0,0.1,0,0.2,0c0.1,0,0.2-0.1,0.3-0.1c0.3-0.2,0.5-0.4,0.6-0.6c0.2,0.5,0.4,1,0.7,1.5c0.4,1,0.9,1.9,1.7,2.8
+				c0.7,0.9,1.6,1.5,2.4,2.1c0.4,0.3,0.7,0.6,1.1,0.9l1,1.1c0.7,0.7,1.1,1.4,1.4,2.2c0.1,0.2,0.1,0.4,0.2,0.6c0,0.2,0.1,0.4,0.1,0.7
+				c0,0.2,0,0.1,0,0.2l0,0.3c0,0.3-0.1,0.5-0.1,0.8c0,0.2,0,0.3,0,0.5c0,0,0,0.1,0,0.2l0,0.1c0,0.1,0,0.1,0.1,0.2
+				c0.1,0.2,0.1,0.2,0.1,0.2l0,0c0.2,0.2,0.1,0.1,0.1,0.1l0,0l0.1,0.1c0.2,0.2,0.4,0.4,0.8,0.4c0.4,0.1,0.7,0,0.8-0.1
+				c0.1,0,0.1,0,0.1,0c0.1,0,0.3,0.1,0.5,0.1c0,0.1,0.1,0.1,0.1,0.1c0.1,0.1,0.1,0.3,0.1,0.5c0,0.4,0,0.9,0.1,1.5
+				c0,0.3,0.1,0.6,0.2,0.9c0,0.1,0.2,0.4,0.2,0.5l0.1,0.2c0.1,0.2,0.1,0.2,0.2,0.3c0.2,0.3,0.5,0.5,0.8,0.6c0.2,0.1,0.4,0.2,0.4,0.3
+				c0.1,0.1,0.2,0.4,0.1,0.9c0,0.4-0.1,0.8-0.2,1.3c-0.1,0.2-0.2,0.5-0.2,0.9c0,0.4,0.1,0.8,0.2,1.1c0.1,0.3,0.3,0.5,0.5,0.8
+				l0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.3c0.7,0.8,1.5,1.4,2,2.1c0.1,0.2,0.3,0.4,0.3,0.6c0,0.1,0.1,0.2,0.1,0.3l0.1,0.2l0,0c0,0,0,0,0,0
+				l0,0.1c0.1,0.4,0,0.8-0.1,1.3c-0.1,0.5-0.1,1.1,0.1,1.7c0.3,0.7,0.7,1,1.1,1.3c0.4,0.3,0.8,0.6,1.2,0.9c0.4,0.3,0.7,0.7,1,1.1
+				c0.5,0.7,1.1,1.4,1.8,2c-0.4,0.2-0.7,0.4-1.1,0.6c-0.7,0.4-1.5,0.8-2.2,1.3c-0.7,0.5-1.4,1-2,1.5c-1.3,1-2.6,2.1-3.8,3.2
+				c-2.5,2.2-4.8,4.5-7.3,6.6c-1.2,1-2.6,2-3.9,3l-3.9,3c-2.6,2-5.3,3.9-8,5.7c-2.7,1.8-5.6,3.3-8.6,4.6c-3,1.3-6.2,2.3-9.4,2.8
+				c3.3-0.3,6.5-1.2,9.6-2.4c3.1-1.2,6.1-2.6,8.9-4.3c1.4-0.8,2.8-1.8,4.2-2.7c1.4-0.9,2.7-1.9,4.1-2.8l4-2.9c1.3-1,2.7-1.9,4-2.9
+				c2.6-2.1,5-4.3,7.5-6.5c1.2-1.1,2.5-2.1,3.7-3.1c0.6-0.5,1.3-0.9,2-1.4c0.6-0.4,1.3-0.8,2-1.2c1.4-0.8,2.9-1.4,4.4-2.1
+				c1.5-0.7,3-1.5,4.4-2.5c1.4-1,2.7-2.1,3.9-3.2c1.1-0.9,2.1-1.9,3.2-2.8c0.3,0.2,0.5,0.3,0.8,0.5c0.4,0.3,0.8,0.6,1.1,1l0.8,0.8
+				l0.7-0.9c1.7-2.1,3.5-4.2,5.2-6.5c0.4-0.6,0.8-1.2,1.2-1.7c0.4-0.6,0.7-1.2,1.1-1.8c0.3-0.6,0.6-1.3,0.9-2l0.4-1l0.3-1.1l0-0.1
+				l0-0.1c0.1-1,0.1-2,0.3-3c0.2-0.8,0.4-1.6,0.8-2.5c0,0,0.1,0,0.1-0.1c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.4-0.4,0.5-0.7
+				c0.3-0.5,0.6-0.9,0.6-1.7l0,0.1c0.2-1.1,0.3-2.1,0.8-2.9c0.4-0.9,1.2-1.6,1.8-2.7c0.6-1,1-2.1,1.4-3.1c0.2-0.5,0.4-1,0.6-1.4
+				c0.1-0.2,0.2-0.4,0.4-0.6c0.2-0.2,0.3-0.4,0.4-0.6c0.7-0.7,1.5-1.4,2.4-2l2.7-1.8c0.9-0.6,1.8-1.3,2.6-2.1
+				c0.8-0.7,1.6-1.4,2.5-2.1c0.8-0.6,1.8-1.2,2.7-1.7c0.9-0.5,2-0.8,3-1.3c1-0.5,2-1.4,2.2-2.7c0.2-1.1,0.1-2.2,0.5-3.2
+				c0.4-0.9,1.2-1.7,1.8-2.6c0.3-0.5,0.6-0.9,0.8-1.5c0.2-0.5,0.3-1.1,0.5-1.5c0.2-0.5,0.5-0.9,1-1.2c0.4-0.2,1-0.3,1.5-0.3
+				c1,0,2.1,0.1,3.1,0.1c0.1,0.3,0.2,0.5,0.3,0.7c-0.1-0.2-0.2-0.5-0.3-0.7c0,0,0.1,0,0.1,0c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1
+				c-0.1-0.3-0.1-0.6-0.1-0.9c0-0.6,0-1.2,0.2-1.8c0.3-1.2,0.7-2.3,1.3-3.3c0.2,0,0.4,0,0.6,0c0.2-0.1,0.5-0.1,0.7-0.2
+				c0.4-0.2,0.8-0.5,1.1-0.8c0.3-0.3,0.6-0.7,0.8-1.1c0.2-0.4,0.4-0.8,0.6-1.2c0.3-0.8,0.6-1.7,0.8-2.6l0.3-1.3
+				c0.1-0.4,0.2-0.8,0.4-1.2c0.1-0.4,0.3-0.8,0.5-1.2c0.2-0.4,0.4-0.6,0.7-0.8c0.3-0.2,0.7-0.3,1.2-0.5c0.4-0.2,0.8-0.3,1.2-0.5
+				c0.8-0.3,1.7-0.5,2.5-1c0.7-0.3,1.3-0.9,1.8-1.6c0.4,0.3,0.8,0.6,1.3,0.9c0.3,0.2,0.7,0.4,1.1,0.5c0.4,0.1,0.9,0.2,1.3,0.1l0.3,0
+				l0.1-0.3c0.5-1.3,1-2.5,1.6-3.6c0.3,0.1,0.5,0.2,0.8,0.3c0.5,0.1,0.9,0.3,1.4,0.3c0.9,0.2,1.8,0.3,2.7,0.5
+				c0.9,0.2,1.7,0.3,2.5,0.6c0.4,0.1,0.8,0.3,1.1,0.5l0.5,0.3c0.2,0.1,0.4,0.3,0.5,0.4c0.3,0.2,0.7,0.6,1.1,0.9
+				c0.4,0.3,0.8,0.6,1.2,0.8c0.8,0.5,1.7,0.9,2.6,1.2c0.4,0.2,0.9,0.3,1.4,0.5c0.5,0.1,0.9,0.2,1.4,0.3c0.9,0.2,1.8,0.4,2.6,0.6
+				l0.7,0.2l0.3-0.6c0.6-1.3,1.6-2.5,2.9-3.3c0.6-0.4,1.3-0.8,2-1c0.3-0.1,0.7-0.2,1-0.3c0.4-0.1,0.7-0.1,1.1-0.1l0.9,0l0-0.9
+				c0-0.6,0.5-1.2,1.2-1.8c0.4-0.3,0.8-0.6,1.2-0.8c0.4-0.2,0.8-0.4,1.2-0.5c0.9-0.3,1.9-0.3,3-0.6c0.5-0.1,1.1-0.4,1.7-0.7
+				c0.4-0.3,0.6-0.5,0.7-0.8c0.2-0.2,0.3-0.5,0.5-0.7c0.5-0.9,1-1.9,1.5-2.4c0.6-0.6,1.4-1.1,2.3-1.6c0.4-0.3,0.9-0.6,1.3-0.9
+				c0.5-0.4,0.9-0.7,1.3-1.1c0.8-0.8,1.4-1.6,2-2.4c0.6-0.7,1.3-1.3,2-1.7c0.4-0.2,0.7-0.2,1.2-0.3c0.5-0.1,1.1-0.2,1.7-0.4
+				c0.1-0.1,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.1,0.4-0.2c0.3-0.2,0.5-0.3,0.7-0.5c0.4-0.3,0.8-0.7,1.2-1c0.8-0.7,1.5-1.4,2.3-2.2
+				c0.8-0.9,1.1-2,1.6-2.8c0.4-0.7,1.1-1.3,1.9-1.9c0.8-0.6,1.6-1.2,2.5-1.9c0.6-0.5,1.2-1.1,1.8-1.7c0.9,0.5,1.8,1.2,2.7,1.9
+				c0.5,0.4,1.1,0.9,1.7,1.3c0.3,0.2,0.6,0.4,1,0.5c0.3,0.1,0.8,0.3,1.1,0.4c0.1,0,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.7-0.1
+				c0.4-0.1,0.7-0.3,0.8-0.2c0,0-0.1,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0.1,0.1c0.1,0.1,0.2,0.2,0.3,0.5c0.1,0.1,0.2,0.2,0.4,0.3l0.2,0.1
+				l0.1,0l0.1,0l0.1,0c0.8,0.2,1.4,0.3,2,0.5c0.7,0.3,0.6,0.1,0.8,0.9c0.1,0.2,0.1,0.4,0.2,0.6c0.1,0.3,0.4,0.5,0.5,0.6
+				c0.3,0.2,0.6,0.4,0.8,0.7c0.3,0.2,0.5,0.4,0.7,0.6c0.2,0.2,0.4,0.4,0.5,0.6c0.2,0.5,0.3,1.1,0.4,1.8c0.1,0.7,0.2,1.4,0.4,2.2
+				c0.3,0.7,0.7,1.4,1.4,1.9c0.6,0.5,1.3,0.8,2,1.1c0.7,0.3,1.3,0.5,1.8,0.8c0.5,0.3,0.9,0.7,1.2,1.2l0.4,0.8l0.5-0.7
+				c0.3-0.3,0.7-0.7,1.1-1.1c0.3,0.4,0.5,0.7,0.8,1.1c0.3,0.6,0.6,1.2,0.7,1.8l0.1,1.2l0.8-0.9c0.2-0.2,0.4-0.4,0.6-0.5
+				c0.2-0.1,0.5,0,0.8,0c0.6,0.2,1.2,0.6,1.7,1.1c0.6,0.5,1.1,1,1.7,1.5c0.3,0.2,0.6,0.5,0.9,0.7c0.2,0.1,0.3,0.2,0.6,0.3
+				c0.2,0.1,0.3,0.1,0.6,0.1c2.2,1.8,3.8,4.3,5.3,6.7c0.7,1.3,1.4,2.6,2.3,3.8c0.5,0.6,1,1.1,1.5,1.6c0.3,0.4,0.6,0.8,0.7,1.3
+				c-0.4,0.6-0.8,1.1-1.2,1.6l-3.7,4.2c-0.6,0.7-1.2,1.5-1.7,2.2c-0.6,0.7-1.2,1.4-1.9,1.5c-0.4,0.1-0.8,0-1.2-0.2
+				c-0.4-0.1-0.8-0.4-1.2-0.6c-0.7-0.4-1.3-1.2-1.9-1.9c-0.3-0.4-0.6-0.7-1-1c-0.2-0.2-0.4-0.3-0.6-0.5c-0.1-0.1-0.2-0.1-0.4-0.2
+				c-0.1-0.1-0.2-0.1-0.4-0.1c-0.6-0.1-1.1,0.1-1.5,0.3c-0.4,0.3-0.8,0.6-1.1,0.9c-1.3,1.4-2.3,3-3.5,4.4c-0.6,0.8-1.1,1.6-1.4,2.4
+				c-0.4,0.9-0.7,1.7-1,2.6c-0.4,0.8-0.8,1.6-1.4,2.3c-0.6,0.7-1.3,1.2-2.1,1.8c-1.4,1.2-2.8,2.5-3.9,4c-1.1,1.5-2,3.1-2.8,4.8
+				c0.9-1.7,1.8-3.3,2.9-4.7c1.1-1.5,2.5-2.8,3.9-3.9c0.7-0.6,1.5-1.1,2.1-1.8c0.6-0.7,1.1-1.5,1.5-2.4c0.4-0.9,0.7-1.7,1.1-2.6
+				c0.4-0.8,0.9-1.6,1.4-2.3c1.2-1.4,2.3-3,3.6-4.2c0.3-0.3,0.7-0.6,1-0.8c0.4-0.2,0.8-0.3,1.1-0.2c-0.1,0.2-0.2,0.5-0.3,0.8
+				c-0.2,0.6-0.3,1.6,0,2.6c0,0.1,0.1,0.2,0.1,0.4c0.1,0.2,0.1,0.2,0.2,0.4c0.2,0.3,0.4,0.5,0.6,0.6c0.4,0.3,0.6,0.4,0.8,0.5
+				c0.2,0.2,0.4,0.4,0.5,0.6l0,2.3c0,0.5-0.5,1.2-1,1.8c-0.6,0.6-1.2,1.2-1.9,1.7l-1.1,0.8c-0.4,0.3-0.7,0.6-1.1,0.8
+				c-0.7,0.6-1.4,1.1-2.1,1.6c-1.4,1.1-2.9,2.2-4.3,3.4c-0.7,0.6-1.3,1.2-1.9,1.9c-0.3,0.3-0.6,0.7-0.8,1.1
+				c-0.3,0.4-0.5,0.8-0.7,1.2c0.3-0.4,0.5-0.7,0.8-1.1c0.3-0.3,0.6-0.6,0.9-1c0.6-0.6,1.3-1.2,2.1-1.7c1.4-1.1,3-2,4.5-2.9
+				c0.8-0.5,1.5-1,2.3-1.5l2.2-1.5c0.7-0.5,1.5-1.1,2.2-1.8c0.3-0.3,0.6-0.7,0.9-1.1c0.3,0.4,0.5,0.8,0.8,1.2
+				c0.6,0.8,1.1,1.6,1.9,2.4c0.4,0.5,1,0.8,1.5,1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.2,0.5,0.4c0.2,0.1,0.4,0.3,0.5,0.4
+				c0,0.1,0,0,0.1,0.2c0.1,0.4,0.1,0.9,0.2,1.4c0.1,0.3,0.1,0.5,0.2,0.8c0.1,0.3,0.2,0.6,0.3,0.8c0.2,0.5,0.4,1,0.7,1.5
+				c0.6,0.9,1.2,1.7,1.9,2.5c0.7,0.7,1.3,1.5,1.9,2.2c0.1,0.2,0.3,0.4,0.4,0.6c0.1,0.1,0.2,0.2,0.2,0.2l0.2,0.3l0.2,0.3l0.1,0.3
+				c0.1,0.2,0.2,0.4,0.2,0.6c0.6,1.7,0.7,3.6,0.9,5.6c0.1,1,0.3,2,0.6,3c0.3,1,0.9,2,1.6,2.7c0.7,0.8,1.5,1.3,2.1,2
+				c0.6,0.7,1,1.5,1.4,2.4c0.6,1.8,0.8,3.7,1.4,5.5c-0.1-0.1-0.2-0.2-0.3-0.4c0,0.2,0.2,0.4,0.4,0.5l0.1,0.1l0-0.1
+				c-0.4-1.9-0.4-3.9-0.9-5.9c-0.3-1-0.6-2-1.3-2.8c-0.6-0.8-1.4-1.5-2-2.2c-0.6-0.7-1-1.5-1.2-2.4c-0.2-0.9-0.4-1.8-0.4-2.8
+				c-0.1-1.9-0.1-4-0.8-6c-0.1-0.3-0.2-0.5-0.3-0.8l-0.2-0.4l-0.2-0.3l-0.2-0.3c-0.1-0.2-0.2-0.2-0.2-0.4c-0.1-0.2-0.3-0.4-0.4-0.6
+				c-0.6-0.8-1.3-1.6-1.9-2.3c-0.6-0.7-1.2-1.5-1.7-2.2c-0.2-0.4-0.4-0.8-0.6-1.2c-0.1-0.2-0.1-0.4-0.2-0.6
+				c-0.1-0.2-0.1-0.5-0.1-0.7c-0.1-0.5-0.1-0.9-0.2-1.5c0-0.3-0.3-0.8-0.6-1.1c-0.3-0.3-0.5-0.4-0.7-0.5c-0.2-0.1-0.4-0.3-0.7-0.5
+				c-0.3-0.1-0.5-0.3-0.7-0.3c-0.4-0.2-0.7-0.4-1-0.6c-0.6-0.6-1.2-1.4-1.8-2.2c-0.6-0.8-1.1-1.6-1.6-2.4l-1.2-1.9
+				c0,0,0-0.1,0.1-0.1c0.1-0.2,0.2-0.5,0.1-1c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.2-0.3-0.2-0.4
+				c0,0-0.1-0.2-0.1-0.2c0-0.1-0.1-0.2-0.1-0.2c-0.2-0.6-0.4-1.5-0.7-2.1c-0.1-0.2-0.2-0.3-0.2-0.4c0.5,0.3,1,0.9,1.4,1.4
+				c0.6,0.7,1.1,1.5,2,2.1c0.4,0.2,0.8,0.5,1.3,0.7c0.5,0.2,1,0.3,1.6,0.2c0.6-0.1,1-0.4,1.4-0.7c0.4-0.3,0.7-0.7,1-1.1
+				c0.6-0.7,1.2-1.5,1.8-2.1l3.8-4.1c0.6-0.7,1.3-1.5,1.7-2.3c0.5-0.8,0.9-1.7,1.3-2.5c0.8-1.7,1.6-3.3,3.1-4.2
+				c1.4-1,3.2-1.7,4.7-3.1c0.7-0.7,1.3-1.4,1.9-2.1c0.6-0.7,1.2-1.4,1.9-2l3.8-4c0.6-0.7,1.3-1.3,1.9-2.2c0.5-0.8,1-1.6,1.4-2.4
+				c0.5-0.8,1-1.5,1.6-2c0.6-0.5,1.2-0.5,1.9-0.2l0.6,0.3l0.3-0.6c0.4-0.8,0.9-1.5,1.6-2.1c0.7-0.7,1.5-1.3,2.1-2.2
+				c0.3-0.5,0.6-0.9,0.7-1.5c0.2-0.5,0.3-1,0.4-1.5c0.2-1,0.3-2,0.4-2.9c0.1-0.4,0.2-0.9,0.4-1.2c0.2-0.4,0.5-0.7,0.7-1.2
+				c0.3-0.5,0.5-1.1,0.6-1.6c0.1-0.4,0.2-0.9,0.4-1.4c0.3-0.9,0.6-1.8,0.9-2.7l0.1-0.1c0,0,0-0.1,0.1-0.1c0.1-0.1,0.1-0.2,0.2-0.3
+				c0.1-0.1,0.2-0.3,0.3-0.5c0.3-0.3,0.6-0.6,1-0.8c0.7-0.5,1.6-1,2.5-1.6c0.6-0.5,1.5-0.6,2.5-1c0.5-0.2,1.1-0.4,1.6-1
+				c0.4-0.4,0.7-1,0.9-1.4c0.5-0.9,0.8-1.8,1.3-2.4c0.6-0.7,1.3-1.4,2-2c0.7-0.6,1.4-1.3,2.2-1.9c1.3-1.1,2.6-2.2,3.7-3.5
+				c1.1,1,2.2,2.1,3.2,3.3c1.2,1.3,2.4,2.7,3.5,4.1c0.5,1,1.1,2,1.7,3c0.3,0.5,0.7,1,1,1.5c0.4,0.5,0.8,1,1.2,1.4
+				c0.2,0.2,0.4,0.4,0.7,0.6l0.6,0.6l1.3,1.1l2.4,2.1c1.3,2.8,2.6,5.6,3.9,8.4c0.7,1.4,1.4,2.8,2.2,4.2c0.7,1.4,1.5,2.8,2.4,4.1
+				c0.4,0.7,1,1.4,1.7,2c0.7,0.6,1.6,0.9,2.3,1.2c0.7,0.3,1.4,0.6,1.9,1c0.5,0.3,0.8,0.9,1.4,1.6c0.3,0.3,0.6,0.7,1,1
+				c0.4,0.3,1,0.5,1.5,0.6l0,0l0,0l0,0l0.1,0l0.1,0l0.1,0c0.1,0,0.2,0,0.3,0c0.3,0,0.6,0,0.8-0.1c0.5-0.1,1-0.4,1.4-0.6
+				c0.8-0.6,1.3-1.2,1.8-1.6c0.3-0.3,0.6-0.5,0.9-0.6c0.4,0.8,0.9,1.5,1.4,2.1c0.7,0.9,1.4,1.7,1.9,2.5l0.5,0.7
+				c0.2,0.2,0.4,0.5,0.6,0.7c0.4,0.4,0.8,0.9,1.3,1.2l1.3,1c0.2,0.2,0.4,0.3,0.6,0.5c0,0,0.1,0.1,0.1,0.1l0.1,0.1l0.2,0.3
+				c0.3,0.4,0.6,0.8,0.9,1.3c0.3,0.4,0.6,0.9,1,1.4c0.2,0.2,0.4,0.5,0.9,0.7l0.1,0l0.1,0l0,0c-0.1,0,0.2,0,0.1,0l0,0l0.1,0l0.2,0
+				c0.1,0,0.5,0,0.7-0.1c0.8-0.2,1.2-0.5,1.7-0.9c0.9-0.7,1.7-1.4,2.5-2.2c0.3-0.3,0.7-0.7,1-1.1c0,0.4-0.1,0.8-0.2,1.2
+				c-0.2,0.7-0.5,1.3-0.8,2c-0.3,0.7-0.5,1.4-0.5,2.2c-0.1,0.8,0.1,1.6,0,2.1c0,0.3-0.2,0.6-0.3,0.9c-0.1,0.1-0.2,0.3-0.3,0.5
+				c-0.1,0.1-0.2,0.3-0.3,0.4c-0.4,0.6-0.9,1.1-1.4,1.7c-0.5,0.6-0.9,1.5-1,2.2c-0.2,0.7-0.4,1.4-0.6,2c-0.5,1.3-1,2.6-1.9,3.6
+				c-0.4,0.5-0.9,0.9-1.4,1.3c-0.6,0.4-1.2,0.6-1.9,1.1c-1.5,1-2.1,2.7-2.7,3.9c-0.3,0.6-0.6,1.2-1,1.7c-0.4,0.6-0.8,1.1-1.3,1.5
+				c-0.9,0.9-2.1,1.7-3.3,2.6l-0.2,0.2c-0.1,0,0,0,0,0l-0.1,0l-0.5,0.2l-0.5,0.2c-0.2,0.1-0.4,0.2-0.7,0.4c-0.1,0.1-0.1,0.1-0.2,0.2
+				l-0.1,0.1l0,0c-0.1,0.2,0,0.1-0.1,0.1l0,0.1c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.3,0,0.6,0,0.8c0.1,0.3,0.2,0.4,0.3,0.6l-0.1,0.3
+				c-0.3,0.7-0.6,1.2-1,1.6c-0.4,0.4-1,0.8-1.5,1.2c-1.1,0.8-2.4,1.5-3.6,1.9c-0.6,0.2-1.2,0.3-2,0.4c-0.4,0.1-0.8,0.1-1.2,0.3
+				c-0.2,0.1-0.4,0.1-0.6,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0.1-0.2,0.1-0.3,0.2c-1.4,1-2.1,2.3-3.2,2.8c-0.2,0.1-0.4,0.2-0.6,0.4
+				c-0.2,0.2-0.3,0.4-0.4,0.6c-0.1,0.2-0.2,0.3-0.3,0.6c-0.1,0.2-0.1,0.5-0.2,0.7c0,0.4,0,0.8,0,1.1c0,0.3,0,0.7-0.1,0.8
+				c-0.1,0.3-0.8,0.5-1.5,0.5c-0.7,0-1.4-0.1-1.9-0.3l-0.4-0.2l-0.1,0.3c-0.3,0.7-0.3,1.4-0.2,2c0.1,0.6,0.1,1.2,0.1,1.8
+				c0,0.1,0,0.3-0.1,0.4c-0.1,0.2-0.1,0.3-0.2,0.4c-0.1,0.2-0.4,0.5-0.6,0.6c-0.2,0.2-0.5,0.4-0.7,0.6c0,0-0.1,0.1-0.1,0.1l-0.1-0.1
+				l-0.9,0.6c-0.6,0.4-1.1,1-1.4,1.6c-0.3,0.6-0.4,1.2-0.5,1.7c-0.1,0.3-0.1,0.5-0.2,0.7c0,0.1-0.1,0.2-0.1,0.3l-0.1,0.2
+				c0,0-0.1,0.1-0.1,0.1c-0.3,0.4-0.6,0.9-0.9,1.3c-0.6,0.9-1.4,1.7-2.1,2.5l-1.1,1.3c-0.3,0.4-0.7,0.8-1.1,1.1
+				c-1.6,1.4-3.5,2.5-5.4,3.8c-0.5,0.3-0.9,0.7-1.3,1.1c-0.4,0.3-0.8,0.6-1.2,0.8c-0.3,0.1-0.4,0.1-0.7-0.2
+				c-0.3-0.3-0.6-0.7-0.9-1.1l-0.5-0.8l-0.7,0.7c-0.3,0.3-0.5,0.7-0.8,1c-0.2,0.3-0.4,0.6-0.6,1l-1.1,1.9c-0.7,1.3-1.5,2.5-2.3,3.7
+				c-0.8,1.2-1.7,2.3-2.8,3.1c-0.3,0.2-0.5,0.4-0.8,0.5c-0.3,0.1-0.6,0.2-0.8,0.2c-0.3,0-0.6,0-0.8-0.1c-0.1-0.1-0.3-0.1-0.4-0.2
+				l-0.4-0.3l-0.5-0.3l-0.3,0.4c-0.9,1.1-1.3,2.3-1.8,3.4c-0.2,0.6-0.5,1.1-0.8,1.6c-0.2,0.3-0.3,0.5-0.5,0.7
+				c-0.2,0.2-0.4,0.5-0.6,0.7c-1.6,1.8-3.6,3.2-5.7,4.5l-0.3,0.2l0.1,0.3c0.4,1,1.1,1.8,1.7,2.6c0.6,0.8,1.2,1.5,1.7,2.3
+				c0.3,0.4,0.5,0.8,0.7,1.2c0.2,0.4,0.4,0.9,0.4,1.3c0.1,0.2,0,0.4,0,0.6c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.4-0.5,0.7-0.8,1.1
+				c-0.7,0.7-1.5,1.2-2.2,1.9c-0.4,0.3-0.7,0.7-1.1,1l-1,1l-4.2,4.1l4.4-3.9l1.1-1c0.4-0.3,0.7-0.7,1.1-1c0.8-0.6,1.6-1.2,2.3-1.8
+				c0.4-0.3,0.7-0.7,1-1.2c0.1-0.3,0.1-0.5,0.2-0.8c0-0.3,0-0.6,0-0.8c-0.1-0.5-0.2-1-0.4-1.5c-0.2-0.5-0.5-0.9-0.7-1.3
+				c-0.5-0.8-1.1-1.6-1.7-2.4c-0.5-0.7-1-1.4-1.3-2.1c2-1.2,4-2.6,5.7-4.3c0.2-0.2,0.4-0.5,0.6-0.7c0.2-0.2,0.4-0.5,0.6-0.8
+				c0.3-0.6,0.6-1.1,0.9-1.7c0.4-0.9,0.9-1.9,1.4-2.6l0,0c0.2,0.1,0.4,0.2,0.6,0.3c0.4,0.1,0.9,0.2,1.3,0.2c0.5,0,0.9-0.1,1.3-0.3
+				c0.4-0.2,0.8-0.4,1.1-0.6c1.3-0.9,2.3-2.1,3.1-3.3c0.9-1.2,1.6-2.5,2.4-3.7l1.1-1.9c0.2-0.3,0.4-0.6,0.6-0.9
+				c0.2,0.2,0.3,0.4,0.6,0.6c0.3,0.2,0.6,0.5,1.1,0.6c0.5,0.1,0.9,0,1.3-0.1c0.7-0.3,1.2-0.7,1.6-1c0.4-0.4,0.9-0.7,1.3-1
+				c1.7-1.3,3.7-2.4,5.5-3.9c0.4-0.4,0.9-0.8,1.3-1.2l1.1-1.3c0.7-0.8,1.5-1.7,2.2-2.6c0.4-0.5,0.7-0.9,1-1.5c0-0.1,0.1-0.1,0.1-0.2
+				l0.1-0.2c0.1-0.1,0.1-0.3,0.2-0.5c0.1-0.3,0.2-0.6,0.3-0.9c0.1-0.5,0.2-0.9,0.4-1.3c0.2,0.8,0.5,1.6,0.7,2.4
+				c0.4,1.3,0.9,2.7,1.7,4c0.2,0.3,0.5,0.6,0.7,0.9c0.2,0.1,0.3,0.3,0.5,0.4l0.2,0.2l0.3,0.2c0.7,0.4,1.4,0.7,2,1
+				c0.6,0.3,1.2,0.5,1.7,0.8c0.1,0.1,0.3,0.1,0.4,0.2c0,0,0.1,0.1,0.2,0.1c0.1,0.1,0.1,0.1,0.2,0.2c0.2,0.2,0.4,0.4,0.6,0.6
+				c0.4,0.5,0.9,1,1.5,1.5c0.3,0.3,0.6,0.5,1.1,0.7l0.2,0.1l0.1,0l0,0l0.1,0c0.1,0,0.4,0.1,0.5,0.1c0.2,0,0.5,0,0.7,0
+				c0.3,0,0.7-0.1,0.9-0.1c0.1,0,0.1,0.1,0.2,0.1c0.1,0.1,0.2,0.1,0.3,0.2c0.5,0.3,0.9,0.7,1.4,1.2c0.5,0.5,0.9,1,1.4,1.5
+				c0.5,0.5,1,1,1.6,1.5c0.3,0.2,0.7,0.5,1.1,0.6c0.4,0.2,1,0.3,1.6,0.1c0.6-0.2,1-0.6,1.3-0.9c0-0.1,0.1-0.1,0.1-0.2
+				c0.1,0.1,0.2,0.1,0.3,0.2c0.3,0.2,0.7,0.5,1,0.8c0.6,0.6,1.2,1.2,1.8,1.9c1.2,1.4,2.2,2.9,3.4,4.3c0.3,0.4,0.6,0.7,1.1,1.1
+				c0.4,0.3,0.8,0.6,1.2,0.9c0.8,0.5,1.6,1,2.2,1.5l0.1,0.1c0,0,0.1,0.1,0,0l0.1,0.1c0.1,0.1,0.2,0.2,0.2,0.2
+				c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.3,0.4,0.7,0.6,1.1c0.4,0.8,0.7,1.7,1.2,2.6l0.3,0.5l0.9-0.4c0.1,0,0.1-0.1,0.2-0.1
+				c0.1,0,0.1-0.1,0.2,0c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0.1c0.4,0.2,0.9,0.6,1.3,1c0.9,0.8,1.7,1.8,2.6,2.8
+				c0.5,0.5,1,0.9,1.5,1.3l1.5,1.3l2.9,2.6l2.9,2.6c1,0.8,1.9,1.7,2.9,2.6c0.9,0.9,1.8,1.8,2.5,2.8c0.8,1,1.6,2,2.3,3.1
+				c0.3,0.5,0.6,1.1,0.9,1.6c0.1,0.3,0.2,0.5,0.2,0.8c0,0.2,0,0.3,0,0.4c0,0.1,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0.1,0,0.1-0.1,0.1
+				c-0.1,0-0.2,0-0.4,0.1c-0.3,0-0.7,0-1.1,0.1c-0.4,0.1-0.8,0.4-1,0.8l0,0.1l0,0c0,0,0,0,0,0.1l0,0l0,0.1c0,0.1-0.1,0.1-0.1,0.2
+				c0,0.2-0.1,0.5,0,0.7c0.1,0.8,0.4,1.4,0.8,2c0.4,0.6,0.8,1.1,1.2,1.6c0.4,0.5,0.9,0.9,1.4,1.4c0.5,0.4,1.1,0.8,1.6,1.1
+				c1.1,0.7,2.3,1.2,3.4,1.8c1.1,0.6,2.1,1.4,2.8,2.5c0.7,1.1,1.4,2.1,2.1,3.2c0.6,1.1,1.3,2.3,1.6,3.5c-0.3-1.3-0.8-2.5-1.4-3.6
+				c-0.6-1.1-1.3-2.3-2-3.4c-0.7-1.1-1.8-2-2.9-2.7c-1.1-0.7-2.3-1.2-3.4-1.9c-1.1-0.7-2-1.5-2.8-2.5c-0.4-0.5-0.8-1-1.1-1.5
+				c-0.3-0.5-0.6-1.1-0.6-1.6c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.1,0.1-0.2l0-0.1l0,0l0,0c0.1-0.2,0.3-0.3,0.5-0.4
+				c0.2-0.1,0.5-0.1,0.9-0.1c0.2,0,0.4,0,0.6-0.1c0.2-0.1,0.5-0.2,0.6-0.5c0.3-0.4,0.3-1,0.2-1.2c0-0.4-0.1-0.8-0.2-1.1
+				c-0.2-0.7-0.6-1.3-0.9-1.8c-0.7-1.1-1.5-2.2-2.2-3.2c-0.8-1.1-1.7-2.1-2.6-3c-0.9-0.9-1.9-1.8-2.9-2.7l-2.9-2.6l-2.8-2.6
+				l-1.4-1.3c-0.5-0.4-1-0.9-1.4-1.3c-0.8-0.9-1.6-1.9-2.6-2.9c-0.5-0.5-1-0.9-1.8-1.3c-0.2-0.1-0.4-0.2-0.6-0.2
+				c-0.2-0.1-0.5-0.1-0.7-0.1c-0.2,0-0.3,0-0.5,0.1c-0.3-0.5-0.5-1.1-0.8-1.7c-0.2-0.4-0.4-0.9-0.7-1.3c-0.1-0.2-0.3-0.4-0.5-0.7
+				c-0.1-0.1-0.2-0.2-0.3-0.3l-0.1-0.1l-0.1-0.1l-0.1-0.1c-0.8-0.7-1.6-1.2-2.4-1.7c-0.4-0.2-0.7-0.5-1-0.8
+				c-0.3-0.2-0.6-0.6-0.9-0.9c-1.2-1.4-2.2-2.9-3.4-4.3c-0.6-0.7-1.2-1.5-2-2.1c-0.4-0.3-0.7-0.6-1.2-0.9c-0.4-0.3-0.8-0.6-1.3-0.8
+				l-0.8-0.4l-0.4,0.9l-0.2,0.4c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.3-0.3,0.3c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.2-0.7-0.4
+				c-0.5-0.4-0.9-0.8-1.4-1.3c-0.4-0.5-0.9-1-1.4-1.5c-0.5-0.5-1-1-1.7-1.5c-0.2-0.1-0.3-0.2-0.5-0.3c-0.1-0.1-0.2-0.1-0.2-0.1
+				l-0.1,0l-0.1,0l-0.1,0c-0.1,0-0.2,0-0.2,0c0,0-0.1,0-0.1,0c-0.5,0-0.8,0.1-1.1,0.1c-0.1,0-0.3,0-0.4,0c-0.1,0,0,0,0,0l-0.1,0l0,0
+				l-0.1,0c-0.2-0.1-0.4-0.2-0.6-0.4c-0.4-0.4-0.9-0.9-1.3-1.4c-0.2-0.3-0.5-0.5-0.8-0.8l-0.2-0.2c-0.1-0.1-0.2-0.1-0.3-0.2
+				c-0.2-0.1-0.3-0.2-0.5-0.3c-0.7-0.4-1.3-0.6-2-0.9c-0.6-0.2-1.2-0.5-1.7-0.8l-0.1-0.1l-0.2-0.2l-0.3-0.3
+				c-0.2-0.2-0.4-0.4-0.5-0.7c-0.7-1-1.1-2.2-1.5-3.5c-0.4-1.3-0.7-2.6-1.3-4l-0.3-0.7c0-0.1,0.1-0.1,0.2-0.1
+				c0.2-0.2,0.5-0.3,0.8-0.5c0.3-0.2,0.5-0.4,0.7-0.6c0.1-0.1,0.2-0.3,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.5c0.1-0.6,0.1-1.3,0.1-1.9
+				c0-0.5,0-0.9,0.2-1.3c0.6,0.3,1.2,0.4,1.9,0.4c0.4,0,0.8,0,1.2-0.1c0.4-0.1,0.9-0.3,1.2-0.8c0.3-0.5,0.2-0.9,0.3-1.3
+				c0-0.4,0-0.7,0.1-1c0.1-0.3,0.1-0.4,0.3-0.7c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.1-0.1,0.3-0.2c1.6-0.7,2.5-2.1,3.5-2.7
+				c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.2-0.1,0.2-0.1c0.1,0,0.3-0.1,0.4-0.1c0.3-0.1,0.6-0.1,0.9-0.2c0.7-0.1,1.5-0.1,2.3-0.4
+				c1.5-0.5,2.8-1.2,4.1-2c0.3-0.2,0.6-0.4,0.9-0.6c0.3-0.2,0.6-0.5,0.9-0.8c0.6-0.6,1-1.4,1.3-2.1l0.2-0.5l0-0.1l0,0l0,0l0.1-0.2
+				l0,0l0,0l0-0.1c0-0.2,0-0.4,0-0.4c-0.1-0.3-0.1-0.4-0.2-0.5l0.4-0.2l0.5-0.2l0.2-0.1c0,0,0.2-0.1,0.2-0.1l0.2-0.2
+				c1.2-0.8,2.4-1.7,3.6-2.8c0.5-0.6,1-1.2,1.5-1.8c0.4-0.6,0.9-1.4,1.2-2c0.3-0.7,0.6-1.3,0.9-1.9c0.3-0.6,0.7-1,1.1-1.4
+				c0.5-0.3,1.2-0.7,1.8-1.1c0.6-0.4,1.3-1,1.8-1.6c1-1.3,1.6-2.7,2-4.2c0.2-0.7,0.4-1.4,0.6-2.1c0.2-0.7,0.3-1.2,0.7-1.8
+				c0.4-0.6,0.9-1.1,1.3-1.8c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.2-0.5c0.2-0.4,0.3-0.8,0.3-1.2c0-0.4-0.1-0.8-0.1-1.2
+				c-0.1-0.3-0.1-0.7-0.1-1c0-0.7,0.1-1.4,0.3-2c0.2-0.7,0.5-1.4,0.6-2.1c0.1-0.5,0.1-1,0-1.5c0,0,0.1-0.1,0.1-0.1
+				c0.3,0.4,0.5,0.8,0.8,1.2c0.6,0.7,1.2,1.3,1.9,1.9c0.7,0.6,1.4,1.1,2.2,1.6c0.8,0.5,1.7,0.8,2.4,1.1c0.8,0.3,1.5,0.7,2.1,1.1
+				c0.7,0.5,1.3,1,1.9,1.6c0.6,0.6,1.3,1.2,1.9,1.7c0.7,0.6,1.4,1.1,1.9,1.6c0.6,0.6,1,1.2,1.4,1.8c0.4,0.7,0.7,1.5,1,2.2
+				c0.3,0.8,0.6,1.6,1,2.4c0.4,0.8,0.8,1.6,1.2,2.4c1.8,3,4,5.6,5.5,8.6l0.3,0.7l0.7-0.3c1.5-0.6,2.5-1.6,3.5-2.5
+				c0.5-0.4,1-0.8,1.4-1.1c0.4-0.3,1.1-0.5,1.2-0.4c0.4,0.1,0.9,0.6,1.8,0.9c0.2,0.1,0.5,0.1,0.7,0.1l0.2,0c0,0,0.2,0,0.1,0l0,0
+				l0.1,0c0.1,0,0.1,0,0.3-0.1c0.1,0,0.3-0.1,0.4-0.2l0.3-0.2c0.2-0.1,0.3-0.2,0.5-0.3c0.6-0.5,1.1-0.9,1.5-1.3
+				c0.5-0.4,1-0.8,1.2-0.8l0,0l0,0c-0.1,0,0,0,0,0l0.1,0c0.1,0,0.2,0,0.2,0c0,0,0,0,0.1,0c0,0.1,0.1,0.3,0.1,0.5
+				c0.1,0.2,0.2,0.5,0.4,0.7c0.2,0.2,0.4,0.4,0.6,0.5c0.2,0.1,0.4,0.2,0.5,0.2c0.1,0.1,0.4,0.1,0.5,0.2c1.4,0.4,2.8,0.4,4,0.6
+				c1.2,0.2,2.2,0.7,3.2,1.5C463.9,109.8,464.8,110.7,465.6,111.7z M665.2,142.5c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0c0,0-0.1,0-0.1,0
+				c-0.1-0.1-0.2-0.2-0.3-0.3C665,142.4,665.1,142.4,665.2,142.5z M101.2,150.1C101.2,150.1,101.2,150.1,101.2,150.1
+				C101.2,150.1,101.2,150.1,101.2,150.1z M130.8,163.3c-0.2-0.2-0.4-0.3-0.6-0.5c-0.5-0.4-1-0.7-1.5-1l-0.6-0.4l-0.5,0.5
+				c-1.2,1.1-2.4,2.2-3.6,3.3c-1.2,1.1-2.5,2.2-3.7,3.1c-2.2,1.6-4.9,2.7-7.5,4c-0.6-0.6-1-1.4-1.5-2.2c-0.3-0.4-0.6-0.9-1-1.2
+				c-0.4-0.4-0.8-0.7-1.1-1c-0.3-0.3-0.7-0.7-0.7-1c-0.1-0.4,0-0.8,0.1-1.3c0.1-0.5,0.2-1,0.2-1.7l0-0.1c0,0,0,0,0-0.1l0,0l0-0.2
+				c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.3-0.3-0.5-0.4-0.8c-0.6-0.9-1.4-1.6-2-2.4c-0.1-0.1-0.2-0.2-0.2-0.3l-0.2-0.3
+				c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.2-0.1-0.3-0.1-0.4c0-0.1,0.1-0.3,0.2-0.6c0.2-0.5,0.3-1.1,0.3-1.7c0-0.5,0.1-1.3-0.5-2
+				c-0.3-0.3-0.6-0.5-0.8-0.6c-0.2-0.1-0.3-0.2-0.4-0.3c0,0-0.1-0.1,0,0l-0.1-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1-0.1-0.3-0.1-0.5
+				c0-0.4,0-0.9,0-1.5c0-0.3-0.1-0.7-0.2-1c-0.2-0.4-0.3-0.5-0.5-0.9c0,0-0.1-0.1-0.2-0.2c-0.1-0.1-0.2-0.2-0.5-0.2
+				c-0.1,0-0.3,0-0.4,0c0,0,0,0-0.1,0l-0.1,0c0,0,0,0-0.1,0c-0.2-0.1-0.4-0.1-0.6,0c-0.1,0-0.1,0-0.2,0c0-0.2,0-0.4,0.1-0.6l0-0.4
+				c0-0.1,0-0.1,0-0.3l0-0.2c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.3-0.1-0.6-0.2-0.8c-0.3-1.1-1.1-2.1-1.8-2.9l-1.1-1.1
+				c-0.4-0.4-0.8-0.7-1.2-1.1c-0.8-0.6-1.6-1.2-2.1-1.8c-0.6-0.7-1.1-1.5-1.5-2.4c-0.4-0.9-0.8-1.8-1.2-2.7l-0.4-1l-0.8,0.6
+				c-0.3,0.3-0.5,0.5-0.6,0.7l-0.3,0.5c-0.1,0.1-0.1,0.1-0.1,0.2c-0.2-0.1-0.4-0.4-0.7-0.7c-0.3-0.3-0.5-0.6-0.8-1
+				c-0.3-0.3-0.5-0.7-0.8-1l-0.7-1.1c-0.2-0.4-0.5-0.7-0.8-1.1c-0.3-0.4-0.6-0.7-0.9-1l-0.9-1c-0.3-0.3-0.6-0.6-0.9-1
+				c-0.3-0.4-0.7-0.7-1-1c-0.4-0.3-0.7-0.5-1-0.8c-0.3-0.3-0.5-0.6-0.8-1c-0.2-0.4-0.5-0.7-0.7-1.1c-0.2-0.4-0.4-0.8-0.6-1.2
+				c-0.1-0.2-0.2-0.5-0.2-0.7c0,0,0,0,0,0l1.2,0.7c0.6,0.3,1.2,0.7,2,0.9c0.4,0.1,0.8,0.2,1.2,0.2c0.4,0,0.8-0.1,1.2-0.2
+				c0.4-0.1,0.7-0.3,1.1-0.4c0.1-0.1,0.3-0.2,0.4-0.2c1.5,0.9,3.1,1.5,4.4,2.3c0.4,0.2,0.7,0.4,1.1,0.7c0.4,0.3,0.8,0.6,1.3,0.8
+				c0.5,0.2,0.9,0.4,1.3,0.6c0.5,0.2,0.6,0.3,0.9,0.6c0.2,0.2,0.4,0.3,0.7,0.5c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0.1,0.4,0.1,0.6,0.2
+				c0.7,0.1,1,0,1.2,0.1c0.2,0.1,0.6,0.4,1,0.6c0.3,0.3,0.7,0.5,1,0.8c0.7,0.6,1.1,1.1,1.5,1.9c0.3,0.8,0.8,1.9,1.7,2.6
+				c0.8,0.7,1.7,1.1,2.6,1.5c0.9,0.4,1.7,0.7,2.4,1.1c0.7,0.4,1.3,1,1.9,1.7c0.6,0.7,1.2,1.4,1.9,2.1c0.8,0.7,1.6,1.2,2.3,1.7
+				l2.3,1.5c0.8,0.5,1.5,1,2.3,1.6c0.8,0.5,1.6,0.9,2.4,1.2c0.2,0.4,0.4,0.6,0.6,1l0.7,1.1l1.5,2.1l3,4.1l3,4.1l1.5,2l0.7,1
+				c0.1,0.1,0.2,0.2,0.2,0.4C131.7,162.2,131.2,162.7,130.8,163.3z M166.7,114.5c-0.5,1.1-0.4,2.3-0.7,3.3c-0.2,1-1,1.6-1.9,2
+				c-0.9,0.4-2,0.8-3,1.3c-1,0.5-1.9,1.1-2.9,1.7c-0.9,0.6-1.8,1.3-2.6,2.1c-0.8,0.7-1.6,1.3-2.5,1.9l-2.8,1.7
+				c-0.9,0.6-1.9,1.3-2.7,2.1c-0.2,0.2-0.4,0.5-0.6,0.7c-0.2,0.3-0.3,0.5-0.5,0.8c-0.3,0.5-0.5,1-0.7,1.5c-0.4,1-0.8,2-1.3,2.9
+				c-0.5,0.8-1.3,1.6-1.9,2.7c-0.6,1.1-0.8,2.3-1,3.4l0,0l0,0c0,0.2-0.2,0.5-0.4,0.8c-0.1,0.1-0.2,0.3-0.3,0.4
+				c-0.1,0.1-0.1,0.1-0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0l-0.8,0.5c-0.4,1-0.8,2-1,3.1c-0.2,1.1-0.3,2.1-0.3,3.1l-0.2,0.9l-0.3,0.9
+				c-0.2,0.6-0.5,1.2-0.8,1.8c-0.3,0.6-0.7,1.1-1,1.7c-0.4,0.6-0.7,1.1-1.1,1.6c-1,1.3-2.1,2.6-3.1,3.9c-0.1-0.1-0.1-0.2-0.2-0.4
+				l-0.7-1.1l-1.4-2.1l-2.8-4.2l-2.8-4.2l-1.4-2.1l-0.7-1.1c-0.2-0.3-0.5-0.8-0.5-1l-0.1-0.2l-0.2-0.1c-0.8-0.4-1.6-0.8-2.3-1.3
+				c-0.7-0.5-1.5-1.1-2.2-1.7l-2.3-1.6c-0.7-0.5-1.5-1-2.1-1.6c-0.6-0.6-1.2-1.3-1.8-2.1c-0.6-0.7-1.3-1.4-2.2-2
+				c-1.7-1.1-3.6-1.5-4.8-2.5c-0.6-0.5-0.8-1.1-1.2-2c-0.2-0.5-0.5-0.9-0.8-1.4c-0.3-0.4-0.7-0.8-1-1.1c-0.4-0.3-0.7-0.7-1.1-1
+				c-0.4-0.3-0.8-0.6-1.4-0.9c-0.7-0.3-1.4-0.2-1.6-0.2c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.1-0.1c0.7-0.6,1.3-1.2,1.8-1.9
+				c0.7-0.9,1.4-1.9,2.2-2.7c1.6-1.6,3.8-2.5,5.6-4.1c0.5-0.4,0.9-0.8,1.3-1.4c0.3-0.5,0.7-1.1,0.8-1.7c0.2-0.7,0.1-1.4,0.1-1.9
+				c0-0.2,0-0.4,0.1-0.5c0.1-0.2,0.2-0.3,0.4-0.5c0.1-0.1,0.4-0.4,0.6-0.5c0.3-0.2,0.5-0.4,0.7-0.7l1.2-1.2c0.2-0.2,0.4-0.4,0.6-0.6
+				c0.1-0.1,0.2-0.2,0.3-0.2l0.1-0.1c0.1,0.1,0.1,0.1,0.3,0.2c0.1,0.1,0.2,0.1,0.4,0.2c0.3,0,0,0,0.3,0l0.5-0.1
+				c1.2-0.2,2.4-0.4,3.6-1.1c0.3-0.1,0.6-0.3,0.9-0.6l0.2-0.1c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.2-0.2,0.3-0.4
+				c0.4-0.5,0.8-1.1,1.1-1.5c0.3-0.5,0.6-0.8,0.9-1.1c0.2-0.2,0.9-0.5,1.3-0.7c1-0.5,2.1-1,3.2-1.6c0.3-0.2,0.5-0.3,0.8-0.5
+				c0.3-0.2,0.5-0.4,0.7-0.6c0.5-0.4,0.9-0.8,1.3-1.1c0.4-0.3,0.8-0.6,1.1-0.7c0,0,0,0,0,0c0,0,0,0,0,0.1c0.1,0.2,0.3,0.4,0.5,0.4
+				c0.2,0.1,0.4,0.1,0.5,0.1c0.3,0,0.6,0,0.7,0l0.1,0l0.1,0l0,0l0.2-0.1c0.1,0,0.2-0.1,0.3-0.1c0.4-0.2,0.6-0.4,0.9-0.6
+				c0.5-0.4,1-0.8,1.3-1c0.5-0.3,1-0.6,1.5-1.2c0.3-0.3,0.5-0.6,0.7-0.9c0.3,0.2,0.6,0.5,0.8,0.8c0.5,0.6,0.9,1.2,1.4,1.8
+				c0.4,0.7,0.9,1.3,1.3,2c0.4,0.7,1,1.4,1.6,2.1c0.6,0.6,1.3,1.2,1.9,1.7c0.7,0.5,1.4,0.9,2.2,1.3c1.5,0.8,3,1.4,4.5,1.9
+				c1.5,0.5,3.1,1,4.6,1.6l4.5,1.7c2.9,1.1,5.7,2.4,8,4.4C166.9,114.1,166.8,114.3,166.7,114.5z M270.8,60.7
+				C270.8,60.7,270.8,60.7,270.8,60.7L270.8,60.7C270.8,60.6,270.8,60.7,270.8,60.7z"/>
+			<path class="st1" d="M140.9,144L140.9,144C140.8,144,140.9,144,140.9,144z"/>
+			<path class="st1" d="M737.1,162.1c-0.4-0.5-0.9-0.8-1.5-1.1c-0.5-0.3-1-0.6-1.4-1.1c-0.8-0.9-1.2-2.1-2-3L730,154
+				c-0.8-0.9-1.6-1.8-2.3-2.8c-0.4-0.5-0.7-1-1-1.5c-0.3-0.5-0.6-1-0.9-1.6c-0.3-0.5-0.6-1.1-1-1.6c-0.2-0.2-0.4-0.5-0.7-0.7
+				c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.3,0.1-0.4,0.1c-0.6,0.1-1,0-1.4-0.4c-0.4-0.4-0.6-0.9-1-1.5
+				c-0.7-1-1.7-1.9-2.7-2.6c-1-0.7-2.1-1.3-3.1-2l-3.2-1.8c-1-0.6-2.1-1.2-3.1-1.9c-1-0.7-1.9-1.4-2.5-2.3c-0.2-0.2-0.3-0.5-0.5-0.7
+				c-0.2-0.3-0.3-0.6-0.5-0.8c-0.4-0.5-0.8-1-1.2-1.4c-1.7-1.8-3.5-3.4-5.4-5l-0.4-0.3l-0.4,0.3l-3,2.5c-1,0.8-2,1.7-3.1,2.4
+				c-0.5,0.3-1,0.6-1.6,0.9c-0.6,0.3-1.2,0.5-1.8,0.8c-1.2,0.5-2.4,0.9-3.6,1.3c-1.2,0.4-2.5,0.6-3.8,0.7c-1.3,0.1-2.7,0.2-4,0.7
+				c-0.7,0.2-1.3,0.5-1.9,0.8c-0.3,0.2-0.6,0.3-0.9,0.5c-0.3,0.2-0.6,0.4-0.9,0.5c-1.2,0.7-2.2,1.6-3.2,2.5c-2,1.8-3.7,3.8-5.7,5.3
+				c-0.5,0.4-1,0.7-1.5,1c-0.3,0.1-0.6,0.3-0.9,0.4l-0.9,0.4c-1.2,0.6-2.4,1.3-3.5,1.9c-1.1,0.7-2.3,1.3-3.4,2
+				c-1.1,0.6-2.3,1.2-3.5,1.6c-1.2,0.4-2.4,0.8-3.6,0.9c-1.2,0.1-2.4-0.1-3.5-0.5l-0.6-0.2l-0.4,0.5c-0.9,1.3-2.4,2.2-4.1,2.8
+				c-1.7,0.7-3.4,1.1-5.2,2c-3.5,1.8-6,4.7-8.9,6.7c-1.5,1-3,1.7-4.7,2c-1.7,0.4-3.6,0.5-5.5,1.2c-1.9,0.7-3.4,1.9-4.9,3
+				c-1.5,1.1-2.9,2.2-4.5,3c-3.2,1.7-6.6,3.3-9.9,4.9c-3.3,1.6-6.6,3.2-10,4.7c-3.4,1.5-6.8,2.9-10.2,4.1c-3.4,1.3-6.9,2.4-10.5,3.3
+				l-2.7,0.6c-0.8,0.2-1.7,0.3-2.6,0.3c-1.8,0.1-3.6-0.1-5.6,0c-0.9,0.1-1.9,0.2-2.9,0.4c-1,0.2-1.9,0.7-2.7,1.2
+				c-1.6,1-3.1,2-4.7,2.7c-3.3,1.4-7,1.3-10.7,2.4c-3.7,1.1-6.8,3.3-9.9,5.2c-1.5,1-3.1,1.9-4.7,2.7c-1.7,0.7-3.4,1.3-5.2,1.7
+				c-3.5,0.8-7.2,1.2-10.9,1.7c-3.8,0.5-7.1,2.4-10.6,3.2c-1.7,0.4-3.6,0.4-5.5,0.8c-0.9,0.2-1.8,0.5-2.7,0.9
+				c-0.8,0.4-1.5,1.1-2,1.8c-1.5-0.2-3-0.7-4.5-1.1c-0.8-0.2-1.6-0.4-2.4-0.6c-0.8-0.2-1.6-0.3-2.4-0.2c-1.7,0.1-3.1,0.9-4.5,1.7
+				c-1.4,0.8-2.7,1.8-4.2,2.4c1.5-0.6,2.9-1.5,4.2-2.3c1.4-0.8,2.9-1.5,4.5-1.6c1.6,0,3.1,0.5,4.7,0.9c1.5,0.4,3.1,1,4.7,1.2l0.2,0
+				l0.1-0.1c1-1.5,2.7-2.3,4.5-2.6c1.8-0.3,3.6-0.3,5.5-0.7c3.7-0.7,7-2.6,10.6-3c3.6-0.4,7.3-0.8,11-1.6c1.8-0.4,3.6-1,5.4-1.7
+				c1.8-0.8,3.4-1.7,4.9-2.7c3.1-1.9,6.2-4,9.6-4.9c3.4-1,7.2-0.9,10.9-2.3c1.8-0.7,3.4-1.8,4.9-2.7c0.8-0.5,1.5-0.8,2.3-1
+				c0.8-0.2,1.7-0.3,2.6-0.4c1.7-0.1,3.6,0.1,5.5,0c1,0,1.9-0.1,2.9-0.3l2.7-0.6c3.6-0.9,7.2-2,10.7-3.3c3.5-1.3,6.9-2.7,10.3-4.1
+				c3.4-1.5,6.7-3,10.1-4.6c3.3-1.6,6.6-3.2,9.9-4.9c1.7-0.9,3.2-2.1,4.7-3.2c0.7-0.5,1.5-1.1,2.2-1.5c0.7-0.5,1.5-0.9,2.3-1.2
+				c1.6-0.6,3.4-0.7,5.3-1.1c0.9-0.2,1.9-0.5,2.8-0.9c0.5-0.2,0.9-0.4,1.3-0.7c0.4-0.2,0.8-0.5,1.2-0.8c3.1-2.2,5.5-5.1,8.7-6.6
+				c1.5-0.7,3.3-1.3,5.1-2c1.6-0.6,3.2-1.5,4.5-2.9c1.2,0.3,2.4,0.5,3.6,0.4c1.4-0.1,2.8-0.5,4.1-1c1.3-0.5,2.5-1.1,3.7-1.8
+				c1.2-0.6,2.3-1.3,3.4-2c1.1-0.7,2.2-1.3,3.4-1.9l0.9-0.4c0.3-0.1,0.6-0.3,0.9-0.4c0.6-0.4,1.2-0.7,1.8-1.1
+				c2.2-1.7,3.9-3.7,5.8-5.5c0.9-0.9,1.9-1.7,3-2.4c0.3-0.2,0.5-0.3,0.8-0.5c0.3-0.2,0.6-0.3,0.8-0.5c0.5-0.3,1.1-0.5,1.7-0.7
+				c1.1-0.4,2.4-0.5,3.7-0.7c1.3-0.2,2.7-0.4,4-0.8c1.3-0.4,2.5-0.9,3.8-1.4c0.6-0.3,1.2-0.5,1.8-0.8c0.6-0.3,1.2-0.6,1.8-1
+				c1.1-0.8,2.1-1.7,3.1-2.5l2.6-2.2c1.7,1.4,3.5,2.9,5,4.5c0.4,0.4,0.8,0.9,1.2,1.3c0.2,0.2,0.3,0.5,0.5,0.7
+				c0.2,0.3,0.3,0.5,0.5,0.8c0.8,1.1,1.8,1.9,2.8,2.6c1,0.7,2.1,1.3,3.2,1.9l3.2,1.7c1.1,0.6,2.1,1.2,3.1,1.9c1,0.7,1.9,1.4,2.6,2.4
+				c0.3,0.5,0.6,1,1.1,1.5c0.2,0.2,0.6,0.5,0.9,0.6c0.4,0.1,0.7,0.1,1,0c0.3,0,0.8-0.3,0.7-0.2c0.2,0.1,0.4,0.4,0.6,0.6
+				c0.4,0.4,0.7,1,1,1.5c0.3,0.5,0.6,1.1,0.9,1.6c0.3,0.5,0.7,1,1.1,1.5c0.8,0.9,1.6,1.8,2.4,2.7l2.3,2.8c0.8,0.9,1.3,2,2.1,3
+				C734.9,161.1,736.3,161.1,737.1,162.1c0.6,1,1.1,2.2,1.9,3.1C738.2,164.2,737.8,163.1,737.1,162.1z"/>
+			<path class="st1" d="M326.6,99.5c0.5,0.3,0.9,0.6,1.2,1c0.3,0.3,0.6,0.8,0.8,1.4l0.7,1.7c0.3,0.6,0.6,1.1,0.8,1.6
+				c0.2,0.5,0.4,1,0.5,1.6c0.3,1.1,0.5,2.3,0.7,3.5c0.1,0.6,0.3,1.3,0.7,1.9c0.3,0.6,0.8,1.1,1.3,1.6c0.5,0.4,0.9,0.8,1.3,1.2
+				c0.2,0.2,0.4,0.4,0.6,0.6c0.1,0.1,0.2,0.2,0.3,0.4c0.1,0.1,0.2,0.2,0.2,0.4c0.6,1,1.1,2.1,1.5,3.2c0.4,1.1,0.8,2.3,1.2,3.4
+				c-0.5-2.4-0.8-4.8-1.9-7.1c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.1-0.3-0.2-0.4c-0.2-0.3-0.4-0.5-0.6-0.8
+				c-0.4-0.5-0.9-0.9-1.3-1.3c-0.4-0.4-0.7-0.9-0.9-1.3c-0.2-0.5-0.3-0.9-0.4-1.6c-0.2-1.2-0.3-2.4-0.5-3.6
+				c-0.1-0.6-0.3-1.3-0.6-1.9c-0.2-0.6-0.6-1.2-0.7-1.7c-0.2-0.5-0.4-1.1-0.7-1.7c-0.3-0.6-0.6-1.2-1-1.8c-0.4-0.5-1-1-1.5-1.4
+				c-0.2-0.1-0.4-0.3-0.6-0.4l0.2-0.3l-0.3-0.6c-0.1-0.2-0.2-0.4-0.4-0.4c-0.1-0.1-0.2-0.1-0.3-0.2c-0.2-0.1-0.3-0.1-0.4-0.1
+				c-0.2,0-0.4,0-0.5,0l-0.4,0l-0.1,0c0,0,0,0,0,0c0,0,0,0,0.1,0l-1.1,0.3c-0.8,1-1.4,2.1-2.1,3c-0.3,0.4-0.7,0.8-1.1,1.2
+				c-0.4,0.4-0.8,0.6-1.4,0.9l-1.6,0.9c-0.5,0.3-1.1,0.7-1.6,1.2c-0.5,0.5-0.9,1.1-1.2,1.7c-0.3,0.6-0.5,1.2-0.7,1.7
+				c-0.4,1.1-0.9,2.2-1.3,3.3c-0.2,0.5-0.5,1.1-0.8,1.6c-0.3,0.5-0.5,1-0.9,1.5c-0.3,0.5-0.6,1-1,1.4c-0.4,0.5-0.8,0.9-1.2,1.3
+				c-0.4,0.4-0.9,0.8-1.4,1.1l-0.8,0.4l-0.8,0.3c-0.2-0.1-0.3-0.3-0.2-0.5c0,0.1-0.1,0.2,0,0.3c0,0.1,0.1,0.2,0.2,0.2l0,0l0,0
+				l0.9-0.2c0.3-0.1,0.6-0.2,0.9-0.3c0.6-0.3,1.1-0.6,1.6-1c0.5-0.4,1-0.8,1.4-1.2c0.4-0.4,0.8-0.9,1.2-1.4c1.5-2,2.6-4.2,3.5-6.4
+				c0.2-0.6,0.5-1.1,0.7-1.6c0.3-0.5,0.5-0.9,0.9-1.2c0.7-0.7,1.8-1.2,2.9-1.8c0.5-0.3,1.1-0.7,1.6-1.1c0.5-0.4,1-0.9,1.4-1.4
+				c0.6-0.8,1.1-1.6,1.6-2.3l0.2,0.2C325.5,98.8,326.1,99.2,326.6,99.5z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
new file mode 100644
index 0000000..69335c7
--- /dev/null
+++ b/playground/components/Hero.vue
@@ -0,0 +1,58 @@
+<template>
+  <section
+    class="min-h-screen w-full overflow-hidden bg-stone-100 dark:bg-stone-900"
+  >
+    <div
+      class="mx-auto flex min-h-screen w-full max-w-7xl flex-col justify-between px-4 pt-24"
+    >
+      <div class="w-full flex items-center justify-center grow">
+        <div class="w-full text-center">
+          <div class="mb-4">
+            <p class="uppercase font-semibold text-xs text-emerald-500 mb-4">
+              <span class="py-2 px-3 border-2 border-emerald-500 rounded-lg"
+                >Nuxt 3 Ready</span
+              >
+            </p>
+            <h1 class="font-extrabold text-5xl text-stone-800 mb-2">
+              Nuxt Toaster
+            </h1>
+            <p class="text-lg text-stone-500">Headless Nuxt 3 toaster module</p>
+          </div>
+          <!-- Copy input -->
+          <div class="relative w-full max-w-md mx-auto">
+            <input
+              type="text"
+              class="w-full h-12 pl-12 pr-4 py-2 rounded-lg font-mono text-stone-600 bg-white border border-stone-200"
+              value="npm i -D @cssninja/nuxt-toaster"
+            />
+            <!-- Terminal icon -->
+            <div
+              class="absolute top-0 left-0 w-12 h-12 flex items-center justify-center"
+            >
+              <svg class="w-6 h-6 text-stone-400" viewBox="0 0 256 256">
+                <path
+                  fill="currentColor"
+                  d="m117.3 134l-72 64a8.1 8.1 0 0 1-5.3 2a8 8 0 0 1-5.3-14l65.3-58l-65.3-58a8 8 0 1 1 10.6-12l72 64a8 8 0 0 1 0 12Zm98.7 50h-96a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16Z"
+                />
+              </svg>
+            </div>
+            <!-- Copy button -->
+            <button
+              type="button"
+              class="absolute top-1 right-1 h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500"
+            >
+              Copy
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="flex-1 flex flex-col">
+        <img
+          class="mt-auto"
+          src="/assets/img/mountains.svg"
+          alt="Illustration"
+        />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/playground/components/Navigation.vue b/playground/components/Navigation.vue
new file mode 100644
index 0000000..84582a0
--- /dev/null
+++ b/playground/components/Navigation.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+const { toggleDark } = useDarkmode()
+const { y } = useWindowScrollFixed()
+
+const mobileOpen = ref(false)
+
+const isScrolled = computed(() => {
+  return y.value > 60
+})
+
+const isChecked = ref(false)
+</script>
+
+<template>
+  <div
+    class="fixed top-0 left-0 w-full transition-all duration-300"
+    :class="[isScrolled && 'bg-white dark:bg-slate-800']"
+  >
+    <div class="mx-auto w-full max-w-7xl p-4">
+      <div class="flex items-center justify-between gap-x-2">
+        <div class="flex items-center gap-x-2">
+          <img class="w-8 h-8" src="/assets/img/logo.svg" alt="Logo" />
+          <h2 class="font-medium text-xl text-stone-800">Nuxt Toaster</h2>
+        </div>
+        <div class="flex items-center justify-end divide-x divide-stone-300">
+          <div class="flex items-center justify-end gap-x-5 pr-4">
+            <NuxtLink to="/">Examples</NuxtLink>
+            <NuxtLink to="/api">API docs</NuxtLink>
+          </div>
+          <div class="flex items-center justify-end gap-x-1 pl-4">
+            <NuxtLink
+              to="/"
+              class="w-10 h-10 flex items-center justify-center rounded-full"
+            >
+              <svg class="w-5 h-5" viewBox="0 0 1536 1504">
+                <path
+                  fill="currentColor"
+                  d="M768 0q209 0 385.5 103T1433 382.5T1536 768q0 251-146.5 451.5T1011 1497q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142q57-6 102.5-18t94-39t81-66.5t53-105T1258 728q0-119-79-206q37-91-8-204q-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27T450 331.5T365 318q-45 113-8 204q-79 87-79 206q0 85 20.5 150T351 983t80.5 67t94 39t102.5 18q-39 36-49 103q-21 10-45 15t-57 5t-65.5-21.5T356 1146q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5t9 14t13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30t69.5 7t55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5T0 768q0-209 103-385.5T382.5 103T768 0zM291 1103q3-7-7-12q-10-3-13 2q-3 7 7 12q9 6 13-2zm31 34q7-5-2-16q-10-9-16-3q-7 5 2 16q10 10 16 3zm30 45q9-7 0-19q-8-13-17-6q-9 5 0 18t17 7zm42 42q8-8-4-19q-12-12-20-3q-9 8 4 19q12 12 20 3zm57 25q3-11-13-16q-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11q-16 0-16 11q0 13 17 11q16 0 16-11zm58-10q-2-11-18-9q-16 3-14 15t18 8t14-14z"
+                />
+              </svg>
+            </NuxtLink>
+            <NuxtLink
+              to="/"
+              class="w-10 h-10 flex items-center justify-center rounded-full"
+            >
+              <svg class="w-5 h-5" viewBox="0 0 1600 1280">
+                <path
+                  fill="currentColor"
+                  d="M1588 152q-67 98-162 167q1 14 1 42q0 130-38 259.5T1273.5 869T1089 1079.5t-258 146t-323 54.5q-271 0-496-145q35 4 78 4q225 0 401-138q-105-2-188-64.5T189 777q33 5 61 5q43 0 85-11q-112-23-185.5-111.5T76 454v-4q68 38 146 41q-66-44-105-115T78 222q0-88 44-163q121 149 294.5 238.5T788 397q-8-38-8-74q0-134 94.5-228.5T1103 0q140 0 236 102q109-21 205-78q-37 115-142 178q93-10 186-50z"
+                />
+              </svg>
+            </NuxtLink>
+            <!-- Theme -->
+            <label
+              class="block w-9 h-9 overflow-hidden relative mx-auto mb-4 lg:m-0"
+            >
+              <input
+                v-model="isChecked"
+                type="checkbox"
+                class="absolute top-0 left-0 z-[2] w-full h-full opacity-0 cursor-pointer"
+                @change="() => toggleDark()"
+              />
+              <span
+                class="block relative w-9 h-9 bg-white dark:bg-slate-800 rounded-full border border-slate-300 dark:border-slate-700"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  aria-hidden="true"
+                  role="img"
+                  class="block absolute top-1/2 left-1/2 w-5 h-5 text-yellow-400 transition-all duration-300 pointer-events-none"
+                  :class="[
+                    !isChecked
+                      ? 'opacity-100 -translate-x-[45%] -translate-y-1/2'
+                      : 'opacity-0  -translate-x-[45%] -translate-y-[150%]'
+                  ]"
+                  width="32"
+                  height="32"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="5" class="fill-current" />
+                    <path class="fill-current" d="M12 1v2" />
+                    <path class="fill-current" d="M12 21v2" />
+                    <path class="fill-current" d="M4.22 4.22l1.42 1.42" />
+                    <path class="fill-current" d="M18.36 18.36l1.42 1.42" />
+                    <path class="fill-current" d="M1 12h2" />
+                    <path class="fill-current" d="M21 12h2" />
+                    <path class="fill-current" d="M4.22 19.78l1.42-1.42" />
+                    <path class="fill-current" d="M18.36 5.64l1.42-1.42" />
+                  </g>
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  aria-hidden="true"
+                  role="img"
+                  class="block absolute top-1/2 left-1/2 w-5 h-5 text-yellow-400 transition-all duration-300 pointer-events-none"
+                  :class="[
+                    !isChecked
+                      ? 'opacity-0 -translate-x-[45%] -translate-y-[150%]'
+                      : 'opacity-100 -translate-x-[45%] -translate-y-1/2'
+                  ]"
+                  width="32"
+                  height="32"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      class="fill-current"
+                      d="M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79z"
+                    />
+                  </g>
+                </svg>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/playground/composables/useDarkmode.ts b/playground/composables/useDarkmode.ts
new file mode 100644
index 0000000..1068e1e
--- /dev/null
+++ b/playground/composables/useDarkmode.ts
@@ -0,0 +1,32 @@
+import {
+  createSharedComposable,
+  usePreferredDark,
+  useToggle
+} from '@vueuse/core'
+
+const sharedDarkmode = createSharedComposable(() => {
+  const preferredDark = usePreferredDark()
+  const colorSchema = useCookie<'light' | 'dark' | undefined>('color-schema', {
+    default: () => undefined
+  })
+
+  const isDark = computed({
+    get() {
+      return colorSchema.value
+        ? colorSchema.value === 'dark'
+        : preferredDark.value
+    },
+    set(v: boolean) {
+      colorSchema.value = v ? 'dark' : 'light'
+    }
+  })
+
+  const toggleDark = useToggle(isDark)
+
+  return {
+    isDark,
+    toggleDark
+  }
+})
+
+export const useDarkmode = () => sharedDarkmode()
diff --git a/playground/composables/useWindowScrollFixed.ts b/playground/composables/useWindowScrollFixed.ts
new file mode 100644
index 0000000..fe4e019
--- /dev/null
+++ b/playground/composables/useWindowScrollFixed.ts
@@ -0,0 +1,16 @@
+import { useWindowScroll } from '@vueuse/core'
+
+export function useWindowScrollFixed() {
+  const { x, y } = useWindowScroll()
+
+  onMounted(() => {
+    x.value = 0
+    y.value = 0
+    nextTick(() => {
+      x.value = window.pageXOffset
+      y.value = window.pageYOffset
+    })
+  })
+
+  return { x, y }
+}
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 338f593..a03d0db 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -6,6 +6,15 @@ export default defineNuxtConfig({
   toaster: {},
   app: {
     head: {
+      link: [
+        // <link rel="stylesheet" href="https://myawesome-lib.css">
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900?family=Elsie+Swash+Caps:wght@400;900&display=swap'
+        }
+      ],
       script: [
         {
           src: 'https://cdn.tailwindcss.com'
diff --git a/playground/pages/api.vue b/playground/pages/api.vue
new file mode 100644
index 0000000..2e3d649
--- /dev/null
+++ b/playground/pages/api.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>API page</h1>
+</template>
\ No newline at end of file
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
new file mode 100644
index 0000000..cddaa7d
--- /dev/null
+++ b/playground/pages/index.vue
@@ -0,0 +1,269 @@
+<script setup>
+import { h } from 'vue'
+import CustomToast from '@/components/CustomToast.vue'
+import AdvancedToast from '@/components/AdvancedToast.vue'
+import { useNuxtApp } from '#app'
+
+const { $nt } = useNuxtApp()
+let i = 0
+
+function showBasicToast() {
+  i++
+  $nt.show(`Hello, ${i} world!`)
+}
+
+function showCustomToast() {
+  i++
+  $nt.show({
+    content: () =>
+      h(CustomToast, {
+        message: `Hello ${i} from Nuxt module playground!`
+      }),
+    transition: {
+      name: 'fadeOut'
+    },
+    maxToasts: 5,
+    theme: {
+      containerId: 'nt-container-bottom-right',
+      containerClass: [
+        'absolute',
+        'inset-0',
+        'pointer-events-none',
+        'p-4',
+        'flex',
+        'flex-col-reverse',
+        'items-start',
+        'gap-2'
+      ].join(' '),
+      wrapperClass: 'pointer-events-auto cursor-pointer'
+    }
+  })
+}
+
+async function showAdvancedToast() {
+  i++
+  const toast = await $nt.show({
+    content: () =>
+      h(AdvancedToast, {
+        message: `Hello ${i} from Nuxt module playground!`
+      }),
+    dismissible: false,
+    maxToasts: 1,
+    theme: {
+      containerId: 'nt-container-top-left',
+      containerClass: [
+        'absolute',
+        'inset-0',
+        'pointer-events-none',
+        'p-4',
+        'flex',
+        'flex-col',
+        'items-end',
+        'gap-2'
+      ].join(' '),
+      wrapperClass: [
+        'pointer-events-auto',
+        'rounded',
+        'outline-slate-300',
+        'outline-offset-2',
+        'focus:outline',
+        'focus:outline-2',
+        'focus-within:outline',
+        'focus-within:outline-2'
+      ].join(' ')
+    },
+    transition: {
+      enterActiveClass: 'transition duration-300 ease-out',
+      enterFromClass: 'transform translate-x-full opacity-0',
+      enterToClass: 'transform translate-x-0 opacity-100',
+      leaveActiveClass: 'transition duration-300 ease-in',
+      leaveFromClass: 'transform translate-x-0 opacity-100',
+      leaveToClass: 'transform translate-x-full opacity-0'
+    }
+  })
+
+  toast.el.focus()
+}
+function clearAllToast() {
+  $nt.clearAll()
+}
+function clearTopLeftToast() {
+  $nt.clear('nt-container-top-left')
+}
+</script>
+
+<template>
+  <div>
+    <Hero />
+    <div class="mx-auto w-full max-w-7xl">
+      <p>Nuxt module playground!</p>
+      <button
+        class="m-1 rounded border border-slate-200 px-2 py-1"
+        @click="showBasicToast"
+      >
+        show basic toast
+      </button>
+      <button
+        class="m-1 rounded border border-slate-200 px-2 py-1"
+        @click="showCustomToast"
+      >
+        show custom toast
+      </button>
+      <button
+        class="m-1 rounded border border-slate-200 px-2 py-1"
+        @click="showAdvancedToast"
+      >
+        show advanced toast
+      </button>
+      <button
+        class="m-1 rounded border border-slate-200 px-2 py-1"
+        @click="clearTopLeftToast"
+      >
+        clear advanced toasts
+      </button>
+      <button
+        class="m-1 rounded border border-slate-200 px-2 py-1"
+        @click="clearAllToast"
+      >
+        clear all toast
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+/*Animations are taken from animate.css*/
+/* https://daneden.github.io/animate.css*/
+
+.fadeOut {
+  animation-name: fadeOut;
+}
+.fadeInDown {
+  animation-name: fadeInDown;
+}
+.fadeInUp {
+  animation-name: fadeInUp;
+}
+.fade-enter-active {
+  transition: opacity 300ms ease-in;
+}
+.fade-leave-active {
+  transition: opacity 150ms ease-out;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+@-moz-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-o-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeInDown {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-o-keyframes fadeInDown {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-moz-keyframes fadeInUp {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-o-keyframes fadeInUp {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0.5;
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>

From ac27b6875577141122a2f1e74107133303249ed5 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Tue, 27 Sep 2022 11:06:13 +0100
Subject: [PATCH 02/16] feat: polish navigation, add toast UI examples for hero

---
 .npmrc                                        |   2 +
 package.json                                  |   2 +-
 playground/app.vue                            |   6 +-
 playground/assets/img/logo-text.svg           |  12 +
 playground/assets/img/logo.svg                |  15 +-
 playground/components/Hero.vue                |  41 +++-
 playground/components/Navigation.vue          |   6 +-
 playground/components/toast/ActionButtons.vue |  18 ++
 .../components/toast/IconSoloDanger.vue       |  40 ++++
 playground/components/toast/IconSuccess.vue   |  17 ++
 playground/components/toast/LabelInfo.vue     |  19 ++
 playground/components/toast/LabelSuccess.vue  |  23 ++
 .../components/toast/UserReplyClose.vue       |  34 +++
 pnpm-lock.yaml                                | 216 +++++++++---------
 14 files changed, 326 insertions(+), 125 deletions(-)
 create mode 100644 .npmrc
 create mode 100644 playground/assets/img/logo-text.svg
 create mode 100644 playground/components/toast/ActionButtons.vue
 create mode 100644 playground/components/toast/IconSoloDanger.vue
 create mode 100644 playground/components/toast/IconSuccess.vue
 create mode 100644 playground/components/toast/LabelInfo.vue
 create mode 100644 playground/components/toast/LabelSuccess.vue
 create mode 100644 playground/components/toast/UserReplyClose.vue

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..cfe5d6d
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+shamefully-hoist=true
\ No newline at end of file
diff --git a/package.json b/package.json
index 2604753..5eb4e9c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@antfu/eslint-config": "^0.27.0",
     "@nuxt/module-builder": "latest",
     "@nuxt/schema": "^3.0.0-rc.11",
-    "eslint": "8.23.1",
+    "eslint": "8.24.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier-vue": "4.2.0",
     "eslint-plugin-tailwindcss": "3.6.1",
diff --git a/playground/app.vue b/playground/app.vue
index 0a7dc7f..e10d7b3 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const { isDark } = useDarkmode()
+</script>
+
 <template>
-  <div>
+  <div :class="isDark ? 'dark' : ''">
     <Navigation />
     <NuxtPage />
   </div>
diff --git a/playground/assets/img/logo-text.svg b/playground/assets/img/logo-text.svg
new file mode 100644
index 0000000..269b4d7
--- /dev/null
+++ b/playground/assets/img/logo-text.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 190.2 117.4" style="enable-background:new 0 0 190.2 117.4;" xml:space="preserve">
+<g>
+	<path d="M33.5,69.5v46.1H0V1.4h33.9l30.3,46.1c4.5,6.8,8,12.6,10.4,17.2h0.6V45.5V1.4h33.3v114.2H74.3L43.3,67.5l-9-13.6h-0.6
+		L33.5,69.5z"/>
+	<path d="M168.9,77.7c0,2.4,0.1,4.9,0.2,7.5c0.1,2.6,0.5,4.2,1.2,4.9c0.9,0.9,4.2,1.4,9.8,1.4l6.8-0.2c1.2,6.4,1.8,13.8,1.8,22.2
+		c-2.5,0.9-6.2,1.8-11.1,2.6c-4.9,0.8-9.5,1.2-13.9,1.2c-9.2,0-16.3-2-21.3-6.1c-5-4.1-7.5-10.4-7.5-18.9V43.1h-15V24.8l15-1.4l9-22
+		l25-1.4v23.4h21.2v19.6h-21.2V77.7z"/>
+</g>
+</svg>
diff --git a/playground/assets/img/logo.svg b/playground/assets/img/logo.svg
index a95788d..dab18ad 100644
--- a/playground/assets/img/logo.svg
+++ b/playground/assets/img/logo.svg
@@ -6,13 +6,20 @@
 	.st0{fill:#6E8EE6;}
 	.st1{fill:#5277CC;}
 	.st2{fill:#B8C6F2;}
+	.st3{fill:#EBF1FF;}
 </style>
 <g>
 	<path class="st0" d="M17.6,164.7c0.1,36.4,17.4,70,46.6,97l0.3,213.4c0,12.3,10,22.3,22.3,22.3l327.2-0.5c12.3,0,22.3-10,22.3-22.3
 		L436,261.2c29.1-27.1,46.4-60.7,46.3-97.1C482.2,74.8,378.1,2.5,249.7,2.7c-2.3,0-4.6,0-6.8,0.1C117.7,5.5,17.5,77,17.6,164.7z"/>
-	<path class="st1" d="M423.1,474.6l-0.3-223.1l7.3-6.6c26.3-23.9,40.2-51.8,40.2-80.7C470.1,87.2,373.5,24.8,254.9,25
-		c-118.6,0.2-215.1,62.8-215,139.7c0,28.9,14,56.8,40.4,80.6l7.3,6.6l0.3,223.1L423.1,474.6z"/>
-	<path class="st2" d="M414,474.6l-0.3-223.1l7.1-6.6c25.7-23.9,39.3-51.8,39.2-80.7C459.9,87.2,365.6,24.8,249.8,25
-		c-115.8,0.2-210,62.8-209.9,139.7c0,28.9,13.7,56.8,39.4,80.6l7.2,6.6l0.3,223.1L414,474.6z"/>
+	<path class="st1" d="M423.1,474.6l-0.3-223.1l7.3-6.6c26.3-23.9,40.2-51.8,40.2-80.7c-0.2-77-96.8-139.4-215.4-139.2
+		S39.8,87.8,39.9,164.7c0,28.9,14,56.8,40.4,80.6l7.3,6.6L87.9,475L423.1,474.6z"/>
+	<path class="st2" d="M414,474.6l-0.3-223.1l7.1-6.6c25.7-23.9,39.3-51.8,39.2-80.7c-0.1-77-94.4-139.4-210.2-139.2
+		S39.8,87.8,39.9,164.7c0,28.9,13.7,56.8,39.4,80.6l7.2,6.6L86.8,475L414,474.6z"/>
+</g>
+<g>
+	<path class="st3" d="M238.1,189.5c-5.7-9.8-19.9-9.8-25.6,0L150.6,296c-5.7,9.8,1.4,22,12.8,22h48.4c-4.9-4.2-6.7-11.6-3-17.9
+		l46.9-80.4L238.1,189.5z"/>
+	<path class="st0" d="M277.3,212.8c4.7-8,16.5-8,21.2,0l51.3,87.1c4.7,8-1.2,18-10.6,18H236.7c-9.4,0-15.3-10-10.6-18
+		C226.1,300,277.3,212.8,277.3,212.8z"/>
 </g>
 </svg>
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
index 69335c7..ff95453 100644
--- a/playground/components/Hero.vue
+++ b/playground/components/Hero.vue
@@ -3,11 +3,33 @@
     class="min-h-screen w-full overflow-hidden bg-stone-100 dark:bg-stone-900"
   >
     <div
-      class="mx-auto flex min-h-screen w-full max-w-7xl flex-col justify-between px-4 pt-24"
+      class="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col justify-between px-4 pt-24"
     >
+      <!-- Toasts -->
+      <div class="absolute top-40 left-20 z-10">
+        <ToastIconSuccess />
+      </div>
+      <div class="absolute top-64 left-6 z-10">
+        <ToastLabelInfo />
+      </div>
+      <div class="absolute top-[350px] left-24 z-10">
+        <ToastIconSoloDanger />
+      </div>
+
+      <div class="absolute top-40 right-20 z-10">
+        <ToastUserReplyClose />
+      </div>
+      <div class="absolute top-64 right-6 z-10">
+        <ToastLabelSuccess />
+      </div>
+      <div class="absolute top-[350px] right-24 z-10">
+        <ToastActionButtons />
+      </div>
+
+      <!-- Content -->
       <div class="w-full flex items-center justify-center grow">
         <div class="w-full text-center">
-          <div class="mb-4">
+          <div class="w-full max-w-md mx-auto mb-4">
             <p class="uppercase font-semibold text-xs text-emerald-500 mb-4">
               <span class="py-2 px-3 border-2 border-emerald-500 rounded-lg"
                 >Nuxt 3 Ready</span
@@ -16,18 +38,21 @@
             <h1 class="font-extrabold text-5xl text-stone-800 mb-2">
               Nuxt Toaster
             </h1>
-            <p class="text-lg text-stone-500">Headless Nuxt 3 toaster module</p>
+            <p class="text-lg text-stone-500 pb-3 border-b border-stone-200">
+              <span class="mr-2">🔔</span> A simple toaster (notifier) handler
+              for Nuxt.js
+            </p>
           </div>
           <!-- Copy input -->
-          <div class="relative w-full max-w-md mx-auto">
+          <div class="group relative w-full max-w-md mx-auto mt-4">
             <input
               type="text"
-              class="w-full h-12 pl-12 pr-4 py-2 rounded-lg font-mono text-stone-600 bg-white border border-stone-200"
+              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-stone-600 bg-white border border-stone-200 group-hover:shadow-xl group-hover:shadow-stone-400/10 dark:group-hover:shadow-stone-800/10 transition-all duration-300"
               value="npm i -D @cssninja/nuxt-toaster"
             />
             <!-- Terminal icon -->
             <div
-              class="absolute top-0 left-0 w-12 h-12 flex items-center justify-center"
+              class="absolute top-0 left-0 w-14 h-14 flex items-center justify-center"
             >
               <svg class="w-6 h-6 text-stone-400" viewBox="0 0 256 256">
                 <path
@@ -39,7 +64,7 @@
             <!-- Copy button -->
             <button
               type="button"
-              class="absolute top-1 right-1 h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500"
+              class="absolute top-2 right-2 h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500"
             >
               Copy
             </button>
@@ -48,7 +73,7 @@
       </div>
       <div class="flex-1 flex flex-col">
         <img
-          class="mt-auto"
+          class="w-full max-w-5xl mx-auto mt-auto"
           src="/assets/img/mountains.svg"
           alt="Illustration"
         />
diff --git a/playground/components/Navigation.vue b/playground/components/Navigation.vue
index 84582a0..6154c7a 100644
--- a/playground/components/Navigation.vue
+++ b/playground/components/Navigation.vue
@@ -13,14 +13,14 @@ const isChecked = ref(false)
 
 <template>
   <div
-    class="fixed top-0 left-0 w-full transition-all duration-300"
+    class="fixed top-0 left-0 w-full z-50 transition-all duration-300"
     :class="[isScrolled && 'bg-white dark:bg-slate-800']"
   >
     <div class="mx-auto w-full max-w-7xl p-4">
       <div class="flex items-center justify-between gap-x-2">
         <div class="flex items-center gap-x-2">
-          <img class="w-8 h-8" src="/assets/img/logo.svg" alt="Logo" />
-          <h2 class="font-medium text-xl text-stone-800">Nuxt Toaster</h2>
+          <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
+          <img class="h-5" src="/assets/img/logo-text.svg" alt="Logo text" />
         </div>
         <div class="flex items-center justify-end divide-x divide-stone-300">
           <div class="flex items-center justify-end gap-x-5 pr-4">
diff --git a/playground/components/toast/ActionButtons.vue b/playground/components/toast/ActionButtons.vue
new file mode 100644
index 0000000..2e6676d
--- /dev/null
+++ b/playground/components/toast/ActionButtons.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="w-full flex items-center gap-2 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <button
+      type="button"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-stone-500 bg-stone-100 hover:text-stone-600 hover:bg-stone-50 transition-colors duration-300"
+    >
+      Dismiss
+    </button>
+    <button
+      type="button"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 bg-sky-100 hover:text-sky-600 hover:bg-sky-50 transition-colors duration-300"
+    >
+      Accept
+    </button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/IconSoloDanger.vue b/playground/components/toast/IconSoloDanger.vue
new file mode 100644
index 0000000..20690f2
--- /dev/null
+++ b/playground/components/toast/IconSoloDanger.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="w-full flex items-center gap-1 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <div
+      class="h-11 w-11 flex items-center justify-center rounded-full text-rose-500"
+    >
+      <svg class="w-7 h-7" viewBox="0 0 256 256">
+        <path
+          fill="currentColor"
+          d="M212 140a84 84 0 0 1-168 0c0-24.8 12.6-51.4 28-74.6L112 92l34.8-73.1C176 48 212 88 212 140Z"
+          opacity=".2"
+        />
+        <path
+          fill="currentColor"
+          d="M187.3 149.2a59.6 59.6 0 0 1-50.1 50.1H136a8 8 0 0 1-1.2-15.9a44.4 44.4 0 0 0 36.7-36.7a8 8 0 1 1 15.8 2.4ZM220 140a92 92 0 0 1-184 0c0-23.1 9.9-49.7 29.4-79.1a8 8 0 0 1 5.1-3.4a8.1 8.1 0 0 1 6 1.2l32.2 21.5l30.9-64.8a7.9 7.9 0 0 1 5.9-4.4a8 8 0 0 1 7 2.2c14.7 14.7 31.6 32.6 44.6 53.4C212.5 91.1 220 115.1 220 140Zm-16 0c0-42.6-25.4-76.8-54.9-107.4l-29.9 62.8a7.8 7.8 0 0 1-5.1 4.3a8.2 8.2 0 0 1-6.5-1L74.4 76.5C59.5 100.5 52 121.8 52 140a76 76 0 0 0 152 0Z"
+        />
+      </svg>
+    </div>
+    <div class="mr-6">
+      <span class="block font-semibold text-sm text-stone-800">Fire alert</span>
+      <span class="block text-xs text-stone-400">Get out of here fast!</span>
+    </div>
+    <button
+      type="button"
+      class="h-11 w-11 flex items-center justify-center ml-auto"
+    >
+      <svg class="w-4 h-4" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/IconSuccess.vue b/playground/components/toast/IconSuccess.vue
new file mode 100644
index 0000000..f5deda5
--- /dev/null
+++ b/playground/components/toast/IconSuccess.vue
@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="w-full flex items-center gap-3 py-3 pl-3 pr-6 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <div
+      class="h-11 w-11 flex items-center justify-center rounded-full text-emerald-500 bg-emerald-100"
+    >
+      <svg class="w-5 h-5" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="m9 20.42l-6.21-6.21l2.83-2.83L9 14.77l9.88-9.89l2.83 2.83L9 20.42Z"
+        />
+      </svg>
+    </div>
+    <span class="text-sm text-stone-600">Your changes were saved!</span>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/LabelInfo.vue b/playground/components/toast/LabelInfo.vue
new file mode 100644
index 0000000..dc8ebaf
--- /dev/null
+++ b/playground/components/toast/LabelInfo.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <div
+      class="h-16 w-16 flex items-center justify-center text-sky-500 bg-sky-100"
+    >
+      <svg class="w-5 h-5" viewBox="0 0 512 512">
+        <path
+          fill="currentColor"
+          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42s-42-18.804-42-42s18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+        />
+      </svg>
+    </div>
+    <div class="pr-6 pl-4">
+      <span class="text-sm text-stone-600">Your changes were saved!</span>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/LabelSuccess.vue b/playground/components/toast/LabelSuccess.vue
new file mode 100644
index 0000000..7737f5c
--- /dev/null
+++ b/playground/components/toast/LabelSuccess.vue
@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <div
+      class="h-16 w-16 flex items-center justify-center text-emerald-500 bg-emerald-100"
+    >
+      <svg class="w-6 h-6" viewBox="0 0 256 172">
+        <path
+          fill="#80EEC0"
+          d="M112.973 9.25c-7.172-12.333-25.104-12.333-32.277 0L2.524 143.66c-7.172 12.333 1.794 27.749 16.14 27.749h61.024c-6.13-5.357-8.4-14.625-3.76-22.576L135.13 47.348L112.973 9.25Z"
+        />
+        <path
+          fill="#00DC82"
+          d="M162.505 38.733c5.936-10.09 20.776-10.09 26.712 0l64.694 109.971c5.936 10.091-1.484 22.705-13.357 22.705H111.167c-11.872 0-19.292-12.614-13.356-22.705l64.694-109.971Z"
+        />
+      </svg>
+    </div>
+    <div class="pr-6 pl-4">
+      <span class="text-sm text-stone-600">Nuxt has been installed!</span>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/UserReplyClose.vue b/playground/components/toast/UserReplyClose.vue
new file mode 100644
index 0000000..ea83536
--- /dev/null
+++ b/playground/components/toast/UserReplyClose.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="w-full flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <div
+      class="inline-flex justify-center items-center relative w-10 h-10 rounded-full"
+    >
+      <img
+        src="https://media.cssninja.io/shuriken/avatars/3.svg"
+        class="object-cover max-w-full rounded-full dark:border-transparent shadow-sm"
+        alt="Avatar image"
+      />
+    </div>
+    <div class="mr-6">
+      <span class="block font-semibold text-sm text-stone-800">Clark E.</span>
+      <span class="block text-xs text-stone-400">Replied to your post</span>
+    </div>
+    <button
+      type="button"
+      class="h-11 w-11 flex items-center justify-center ml-auto"
+    >
+      <svg class="w-4 h-4" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9d2553..b605b73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ specifiers:
   '@nuxt/schema': ^3.0.0-rc.11
   '@vueuse/core': ^9.2.0
   defu: ^6.1.0
-  eslint: 8.23.1
+  eslint: 8.24.0
   eslint-config-prettier: 8.5.0
   eslint-plugin-prettier-vue: 4.2.0
   eslint-plugin-tailwindcss: 3.6.1
@@ -21,15 +21,15 @@ dependencies:
   defu: 6.1.0
 
 devDependencies:
-  '@antfu/eslint-config': 0.27.0_eslint@8.23.1
+  '@antfu/eslint-config': 0.27.0_eslint@8.24.0
   '@nuxt/module-builder': 0.1.7
   '@nuxt/schema': 3.0.0-rc.11
-  eslint: 8.23.1
-  eslint-config-prettier: 8.5.0_eslint@8.23.1
+  eslint: 8.24.0
+  eslint-config-prettier: 8.5.0_eslint@8.24.0
   eslint-plugin-prettier-vue: 4.2.0
   eslint-plugin-tailwindcss: 3.6.1
-  eslint-plugin-vuejs-accessibility: 1.2.0_eslint@8.23.1
-  nuxt: 3.0.0-rc.11_eslint@8.23.1
+  eslint-plugin-vuejs-accessibility: 1.2.0_eslint@8.24.0
+  nuxt: 3.0.0-rc.11_eslint@8.24.0
   standard-version: 9.5.0
 
 packages:
@@ -41,22 +41,22 @@ packages:
       '@jridgewell/gen-mapping': 0.1.1
       '@jridgewell/trace-mapping': 0.3.15
 
-  /@antfu/eslint-config-basic/0.27.0_cxqatnnjiq7ozd2bkspxnuicdq:
+  /@antfu/eslint-config-basic/0.27.0_2azyxy5wfmd73v3pbt5rvmgcsm:
     resolution: {integrity: sha512-QgQVCiNiV9ZF7h09uBqTHctHDfVqJGIIpe0ZHCicLvUv233nAYeu4adAr53buhKrxDeoalozSs2ePiDiCyceTg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      eslint: 8.23.1
-      eslint-plugin-antfu: 0.27.0_eslint@8.23.1
-      eslint-plugin-eslint-comments: 3.2.0_eslint@8.23.1
+      eslint: 8.24.0
+      eslint-plugin-antfu: 0.27.0_eslint@8.24.0
+      eslint-plugin-eslint-comments: 3.2.0_eslint@8.24.0
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: 2.26.0_cxqatnnjiq7ozd2bkspxnuicdq
-      eslint-plugin-jsonc: 2.4.0_eslint@8.23.1
-      eslint-plugin-markdown: 3.0.0_eslint@8.23.1
-      eslint-plugin-n: 15.3.0_eslint@8.23.1
-      eslint-plugin-promise: 6.0.1_eslint@8.23.1
-      eslint-plugin-unicorn: 43.0.2_eslint@8.23.1
-      eslint-plugin-yml: 1.2.0_eslint@8.23.1
+      eslint-plugin-import: 2.26.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      eslint-plugin-jsonc: 2.4.0_eslint@8.24.0
+      eslint-plugin-markdown: 3.0.0_eslint@8.24.0
+      eslint-plugin-n: 15.3.0_eslint@8.24.0
+      eslint-plugin-promise: 6.0.1_eslint@8.24.0
+      eslint-plugin-unicorn: 43.0.2_eslint@8.24.0
+      eslint-plugin-yml: 1.2.0_eslint@8.24.0
       jsonc-eslint-parser: 2.1.0
       yaml-eslint-parser: 1.1.0
     transitivePeerDependencies:
@@ -67,30 +67,30 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts/0.27.0_eslint@8.23.1:
+  /@antfu/eslint-config-ts/0.27.0_eslint@8.24.0:
     resolution: {integrity: sha512-h/ai9xe65lXtsUiSBRAvfcN47fqn5uGHcCA5c0LoBRX6fVFHk06BbPWMlSJRtqmc3uBTmv3gU8SrnWwrycnKag==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.27.0_cxqatnnjiq7ozd2bkspxnuicdq
-      '@typescript-eslint/eslint-plugin': 5.38.0_cxqatnnjiq7ozd2bkspxnuicdq
-      '@typescript-eslint/parser': 5.38.0_eslint@8.23.1
-      eslint: 8.23.1
+      '@antfu/eslint-config-basic': 0.27.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      '@typescript-eslint/eslint-plugin': 5.38.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.24.0
+      eslint: 8.24.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue/0.27.0_eslint@8.23.1:
+  /@antfu/eslint-config-vue/0.27.0_eslint@8.24.0:
     resolution: {integrity: sha512-Iw4GY4rXK1dPxzIl35bOwPE1vn6E5Wm8uljqdpQYQpTX1j6el7Yo30bpanCogWRcdPSMWKcS7GVlHjV47QB59w==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-ts': 0.27.0_eslint@8.23.1
-      eslint: 8.23.1
-      eslint-plugin-vue: 9.5.1_eslint@8.23.1
+      '@antfu/eslint-config-ts': 0.27.0_eslint@8.24.0
+      eslint: 8.24.0
+      eslint-plugin-vue: 9.5.1_eslint@8.24.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -98,24 +98,24 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config/0.27.0_eslint@8.23.1:
+  /@antfu/eslint-config/0.27.0_eslint@8.24.0:
     resolution: {integrity: sha512-xM1In6/ueNyKxxWO86jd7a9IdKby66lZVT/fE8k2RlP+X0xe5/DTTQfwLbVvnRpn77jCPIhEjNKVWxDO/DUEIg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-vue': 0.27.0_eslint@8.23.1
-      '@typescript-eslint/eslint-plugin': 5.38.0_cxqatnnjiq7ozd2bkspxnuicdq
-      '@typescript-eslint/parser': 5.38.0_eslint@8.23.1
-      eslint: 8.23.1
-      eslint-plugin-eslint-comments: 3.2.0_eslint@8.23.1
+      '@antfu/eslint-config-vue': 0.27.0_eslint@8.24.0
+      '@typescript-eslint/eslint-plugin': 5.38.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.24.0
+      eslint: 8.24.0
+      eslint-plugin-eslint-comments: 3.2.0_eslint@8.24.0
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: 2.26.0_cxqatnnjiq7ozd2bkspxnuicdq
-      eslint-plugin-jsonc: 2.4.0_eslint@8.23.1
-      eslint-plugin-n: 15.3.0_eslint@8.23.1
-      eslint-plugin-promise: 6.0.1_eslint@8.23.1
-      eslint-plugin-unicorn: 43.0.2_eslint@8.23.1
-      eslint-plugin-vue: 9.5.1_eslint@8.23.1
-      eslint-plugin-yml: 1.2.0_eslint@8.23.1
+      eslint-plugin-import: 2.26.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      eslint-plugin-jsonc: 2.4.0_eslint@8.24.0
+      eslint-plugin-n: 15.3.0_eslint@8.24.0
+      eslint-plugin-promise: 6.0.1_eslint@8.24.0
+      eslint-plugin-unicorn: 43.0.2_eslint@8.24.0
+      eslint-plugin-vue: 9.5.1_eslint@8.24.0
+      eslint-plugin-yml: 1.2.0_eslint@8.24.0
       jsonc-eslint-parser: 2.1.0
       yaml-eslint-parser: 1.1.0
     transitivePeerDependencies:
@@ -453,8 +453,8 @@ packages:
       - supports-color
     dev: true
 
-  /@humanwhocodes/config-array/0.10.4:
-    resolution: {integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==}
+  /@humanwhocodes/config-array/0.10.5:
+    resolution: {integrity: sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==}
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
@@ -723,7 +723,7 @@ packages:
     resolution: {integrity: sha512-oFjUfn9r9U4vNljd5uU08+6M3mF6OSxZfCrfqJQaN5TtqVTcZmZFzOZ4H866Lq+Eaugv/Vte225kuaZCB3FR/g==}
     dev: true
 
-  /@nuxt/vite-builder/3.0.0-rc.11_eslint@8.23.1+vue@3.2.39:
+  /@nuxt/vite-builder/3.0.0-rc.11_eslint@8.24.0+vue@3.2.39:
     resolution: {integrity: sha512-WkQ+/cfdIf5XVZea8xD+ciLXpmQkNu8d5p16WJSp10hEhj3Vt/cQ8OkXDVHGGRML+NsDL0bQXDeg3PcM/bw94w==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     peerDependencies:
@@ -760,7 +760,7 @@ packages:
       unplugin: 0.9.5_yrghuvd3zkjqr2aqvquijs2oqu
       vite: 3.1.3
       vite-node: 0.23.4
-      vite-plugin-checker: 0.5.1_eslint@8.23.1+vite@3.1.3
+      vite-plugin-checker: 0.5.1_eslint@8.24.0+vite@3.1.3
       vue: 3.2.39
       vue-bundle-renderer: 0.4.3
     transitivePeerDependencies:
@@ -969,7 +969,7 @@ packages:
     resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
     dev: false
 
-  /@typescript-eslint/eslint-plugin/5.38.0_cxqatnnjiq7ozd2bkspxnuicdq:
+  /@typescript-eslint/eslint-plugin/5.38.0_2azyxy5wfmd73v3pbt5rvmgcsm:
     resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -980,12 +980,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.23.1
+      '@typescript-eslint/parser': 5.38.0_eslint@8.24.0
       '@typescript-eslint/scope-manager': 5.38.0
-      '@typescript-eslint/type-utils': 5.38.0_eslint@8.23.1
-      '@typescript-eslint/utils': 5.38.0_eslint@8.23.1
+      '@typescript-eslint/type-utils': 5.38.0_eslint@8.24.0
+      '@typescript-eslint/utils': 5.38.0_eslint@8.24.0
       debug: 4.3.4
-      eslint: 8.23.1
+      eslint: 8.24.0
       ignore: 5.2.0
       regexpp: 3.2.0
       semver: 7.3.7
@@ -994,7 +994,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.38.0_eslint@8.23.1:
+  /@typescript-eslint/parser/5.38.0_eslint@8.24.0:
     resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1008,7 +1008,7 @@ packages:
       '@typescript-eslint/types': 5.38.0
       '@typescript-eslint/typescript-estree': 5.38.0
       debug: 4.3.4
-      eslint: 8.23.1
+      eslint: 8.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1021,7 +1021,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.38.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.38.0_eslint@8.23.1:
+  /@typescript-eslint/type-utils/5.38.0_eslint@8.24.0:
     resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1032,9 +1032,9 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.38.0
-      '@typescript-eslint/utils': 5.38.0_eslint@8.23.1
+      '@typescript-eslint/utils': 5.38.0_eslint@8.24.0
       debug: 4.3.4
-      eslint: 8.23.1
+      eslint: 8.24.0
       tsutils: 3.21.0
     transitivePeerDependencies:
       - supports-color
@@ -1065,7 +1065,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.38.0_eslint@8.23.1:
+  /@typescript-eslint/utils/5.38.0_eslint@8.24.0:
     resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1075,9 +1075,9 @@ packages:
       '@typescript-eslint/scope-manager': 5.38.0
       '@typescript-eslint/types': 5.38.0
       '@typescript-eslint/typescript-estree': 5.38.0
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint-utils: 3.0.0_eslint@8.24.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -1882,7 +1882,7 @@ packages:
     dev: true
 
   /concat-map/0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
   /concat-stream/2.0.0:
@@ -2476,7 +2476,7 @@ packages:
     dev: true
 
   /ee-first/1.1.1:
-    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
 
   /electron-to-chromium/1.4.256:
@@ -3041,13 +3041,13 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  /eslint-config-prettier/8.5.0_eslint@8.23.1:
+  /eslint-config-prettier/8.5.0_eslint@8.24.0:
     resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.23.1
+      eslint: 8.24.0
     dev: true
 
   /eslint-import-resolver-node/0.3.6:
@@ -3059,7 +3059,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.4_p4kveujfv4nmzmj4mix5hvnxlm:
+  /eslint-module-utils/2.7.4_p4qznrk3s64lneh234w7tfu7j4:
     resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -3080,43 +3080,43 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.23.1
+      '@typescript-eslint/parser': 5.38.0_eslint@8.24.0
       debug: 3.2.7
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-import-resolver-node: 0.3.6
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-antfu/0.27.0_eslint@8.23.1:
+  /eslint-plugin-antfu/0.27.0_eslint@8.24.0:
     resolution: {integrity: sha512-xjNfATHonE3Do2igOlhwjfL2tlaGnm1EgbsLLkHgdk30oIvJU4bLNxF6wXIuaCdjqmwWIqF6smJbX2YhtaEC4w==}
     dependencies:
-      '@typescript-eslint/utils': 5.38.0_eslint@8.23.1
+      '@typescript-eslint/utils': 5.38.0_eslint@8.24.0
     transitivePeerDependencies:
       - eslint
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-es/4.1.0_eslint@8.23.1:
+  /eslint-plugin-es/4.1.0_eslint@8.24.0:
     resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-utils: 2.1.0
       regexpp: 3.2.0
     dev: true
 
-  /eslint-plugin-eslint-comments/3.2.0_eslint@8.23.1:
+  /eslint-plugin-eslint-comments/3.2.0_eslint@8.24.0:
     resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
     engines: {node: '>=6.5.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 8.23.1
+      eslint: 8.24.0
       ignore: 5.2.0
     dev: true
 
@@ -3126,7 +3126,7 @@ packages:
       htmlparser2: 8.0.1
     dev: true
 
-  /eslint-plugin-import/2.26.0_cxqatnnjiq7ozd2bkspxnuicdq:
+  /eslint-plugin-import/2.26.0_2azyxy5wfmd73v3pbt5rvmgcsm:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -3136,14 +3136,14 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.23.1
+      '@typescript-eslint/parser': 5.38.0_eslint@8.24.0
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
       doctrine: 2.1.0
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.4_p4kveujfv4nmzmj4mix5hvnxlm
+      eslint-module-utils: 2.7.4_p4qznrk3s64lneh234w7tfu7j4
       has: 1.0.3
       is-core-module: 2.10.0
       is-glob: 4.0.3
@@ -3157,40 +3157,40 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jsonc/2.4.0_eslint@8.23.1:
+  /eslint-plugin-jsonc/2.4.0_eslint@8.24.0:
     resolution: {integrity: sha512-YXy5PjyUL9gFYal6pYijd8P6EmpeWskv7PVhB9Py/AwKPn+hwnQHcIzQILiLfxztfhtWiRIUSzoLe/JThZgSUw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      eslint: 8.23.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint: 8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
       jsonc-eslint-parser: 2.1.0
       natural-compare: 1.4.0
     dev: true
 
-  /eslint-plugin-markdown/3.0.0_eslint@8.23.1:
+  /eslint-plugin-markdown/3.0.0_eslint@8.24.0:
     resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.23.1
+      eslint: 8.24.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-n/15.3.0_eslint@8.23.1:
+  /eslint-plugin-n/15.3.0_eslint@8.24.0:
     resolution: {integrity: sha512-IyzPnEWHypCWasDpxeJnim60jhlumbmq0pubL6IOcnk8u2y53s5QfT8JnXy7skjHJ44yWHRb11PLtDHuu1kg/Q==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
       builtins: 5.0.1
-      eslint: 8.23.1
-      eslint-plugin-es: 4.1.0_eslint@8.23.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint: 8.24.0
+      eslint-plugin-es: 4.1.0_eslint@8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
       ignore: 5.2.0
       is-core-module: 2.10.0
       minimatch: 3.1.2
@@ -3208,13 +3208,13 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
-  /eslint-plugin-promise/6.0.1_eslint@8.23.1:
+  /eslint-plugin-promise/6.0.1_eslint@8.24.0:
     resolution: {integrity: sha512-uM4Tgo5u3UWQiroOyDEsYcVMOo7re3zmno0IZmB5auxoaQNIceAbXEkSt8RNrKtaYehARHG06pYK6K1JhtP0Zw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.23.1
+      eslint: 8.24.0
     dev: true
 
   /eslint-plugin-tailwindcss/3.6.1:
@@ -3228,7 +3228,7 @@ packages:
       - ts-node
     dev: true
 
-  /eslint-plugin-unicorn/43.0.2_eslint@8.23.1:
+  /eslint-plugin-unicorn/43.0.2_eslint@8.24.0:
     resolution: {integrity: sha512-DtqZ5mf/GMlfWoz1abIjq5jZfaFuHzGBZYIeuJfEoKKGWRHr2JiJR+ea+BF7Wx2N1PPRoT/2fwgiK1NnmNE3Hg==}
     engines: {node: '>=14.18'}
     peerDependencies:
@@ -3237,8 +3237,8 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       ci-info: 3.4.0
       clean-regexp: 1.0.0
-      eslint: 8.23.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint: 8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
       esquery: 1.4.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.0
@@ -3251,45 +3251,45 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
-  /eslint-plugin-vue/9.5.1_eslint@8.23.1:
+  /eslint-plugin-vue/9.5.1_eslint@8.24.0:
     resolution: {integrity: sha512-Y0sL2RY7Xc9S8kNih9lbwHIDmewUg9bfas6WSzsOWRgDXhIHKxRBZYNAnVcXBFfE+bMWHUA5GLChl7TcTYUI8w==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.23.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint: 8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.10
       semver: 7.3.7
-      vue-eslint-parser: 9.1.0_eslint@8.23.1
+      vue-eslint-parser: 9.1.0_eslint@8.24.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-vuejs-accessibility/1.2.0_eslint@8.23.1:
+  /eslint-plugin-vuejs-accessibility/1.2.0_eslint@8.24.0:
     resolution: {integrity: sha512-wF7kT22lS2VOmIpDeI65bnFFKFgESEEpI+CWKr43mdfDRywA4sCk7cKhtZsvfbPOtKO0GDlnpFxZbOIGsFn7IQ==}
     peerDependencies:
       eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       aria-query: 5.0.2
       emoji-regex: 10.1.0
-      eslint: 8.23.1
-      vue-eslint-parser: 9.1.0_eslint@8.23.1
+      eslint: 8.24.0
+      vue-eslint-parser: 9.1.0_eslint@8.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-yml/1.2.0_eslint@8.23.1:
+  /eslint-plugin-yml/1.2.0_eslint@8.24.0:
     resolution: {integrity: sha512-v0jAU/F5SJg28zkpxwGpY04eGZMWFP6os8u2qaEAIRjSH2GqrNl0yBR5+sMHLU/026kAduxVbvLSqmT3Mu3O0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.23.1
+      eslint: 8.24.0
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.1.0
@@ -3320,13 +3320,13 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.23.1:
+  /eslint-utils/3.0.0_eslint@8.24.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -3345,13 +3345,13 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.23.1:
-    resolution: {integrity: sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==}
+  /eslint/8.24.0:
+    resolution: {integrity: sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
       '@eslint/eslintrc': 1.3.2
-      '@humanwhocodes/config-array': 0.10.4
+      '@humanwhocodes/config-array': 0.10.5
       '@humanwhocodes/gitignore-to-minimatch': 1.0.2
       '@humanwhocodes/module-importer': 1.0.1
       ajv: 6.12.6
@@ -3361,7 +3361,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint-utils: 3.0.0_eslint@8.24.0
       eslint-visitor-keys: 3.3.0
       espree: 9.4.0
       esquery: 1.4.0
@@ -5081,7 +5081,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /nuxt/3.0.0-rc.11_eslint@8.23.1:
+  /nuxt/3.0.0-rc.11_eslint@8.24.0:
     resolution: {integrity: sha512-I0wyxPHnUoJBWoROKUx91PLKaAFZ/TsxSpcm3/jn/Ysq2RGU5Q3o9AzqT0YcXW4rgH35QPFvGpqopU9X0vS7Qw==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     hasBin: true
@@ -5091,7 +5091,7 @@ packages:
       '@nuxt/schema': 3.0.0-rc.11
       '@nuxt/telemetry': 2.1.5
       '@nuxt/ui-templates': 0.4.0
-      '@nuxt/vite-builder': 3.0.0-rc.11_eslint@8.23.1+vue@3.2.39
+      '@nuxt/vite-builder': 3.0.0-rc.11_eslint@8.24.0+vue@3.2.39
       '@vue/reactivity': 3.2.39
       '@vue/shared': 3.2.39
       '@vueuse/head': 0.7.12_vue@3.2.39
@@ -7092,7 +7092,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker/0.5.1_eslint@8.23.1+vite@3.1.3:
+  /vite-plugin-checker/0.5.1_eslint@8.24.0+vite@3.1.3:
     resolution: {integrity: sha512-NFiO1PyK9yGuaeSnJ7Whw9fnxLc1AlELnZoyFURnauBYhbIkx9n+PmIXxSFUuC9iFyACtbJQUAEuQi6yHs2Adg==}
     engines: {node: '>=14.16'}
     peerDependencies:
@@ -7116,7 +7116,7 @@ packages:
       chalk: 4.1.2
       chokidar: 3.5.3
       commander: 8.3.0
-      eslint: 8.23.1
+      eslint: 8.24.0
       fast-glob: 3.2.12
       lodash.debounce: 4.0.8
       lodash.pick: 4.4.0
@@ -7235,14 +7235,14 @@ packages:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
     dev: true
 
-  /vue-eslint-parser/9.1.0_eslint@8.23.1:
+  /vue-eslint-parser/9.1.0_eslint@8.24.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-scope: 7.1.1
       eslint-visitor-keys: 3.3.0
       espree: 9.4.0

From c02578b45b9ed3bfab86b08085d896337870751e Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Tue, 27 Sep 2022 14:07:39 +0100
Subject: [PATCH 03/16] feat: add tailwind module to playground, fix layout
 colors and styles

---
 .eslintrc                                     |   8 +-
 package.json                                  |   1 +
 playground/assets/css/main.css                |   3 +
 playground/components/Hero.vue                |  44 +-
 playground/components/Navigation.vue          |  75 ++-
 playground/components/toast/ActionButtons.vue |   6 +-
 .../components/toast/IconSoloDanger.vue       |  11 +-
 playground/components/toast/IconSuccess.vue   |   8 +-
 playground/components/toast/LabelInfo.vue     |   8 +-
 playground/components/toast/LabelSuccess.vue  |   6 +-
 .../components/toast/UserReplyClose.vue       |  11 +-
 playground/nuxt.config.ts                     |  15 +-
 playground/tailwind.config.ts                 | 111 ++++
 pnpm-lock.yaml                                | 562 ++++++++++++++++++
 14 files changed, 805 insertions(+), 64 deletions(-)
 create mode 100644 playground/assets/css/main.css
 create mode 100644 playground/tailwind.config.ts

diff --git a/.eslintrc b/.eslintrc
index 0facac4..3504587 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -13,13 +13,11 @@
   "rules": {
     "no-console": "off",
     "no-debugger": "off",
+    "prefer-arrow-callback": "off",
     "vue/script-setup-uses-vars": "error",
     "vue/multi-word-component-names": "off",
     "vue/define-macros-order": "off",
-    "tailwindcss/no-custom-classname": [
-      "error",
-      { "whitelist": ["^ninja-(.*)$"] }
-    ],
+    "tailwindcss/no-custom-classname": "off",
     "tailwindcss/classnames-order": "off",
     "prettier-vue/prettier": [
       "error",
@@ -27,7 +25,7 @@
         "printWidth": 80,
         "singleQuote": true,
         "semi": false,
-        "trailingComma": "none"
+        // "trailingComma": "none"
       }
     ]
   }
diff --git a/package.json b/package.json
index 5eb4e9c..5744edc 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@antfu/eslint-config": "^0.27.0",
     "@nuxt/module-builder": "latest",
     "@nuxt/schema": "^3.0.0-rc.11",
+    "@nuxtjs/tailwindcss": "^5.3.3",
     "eslint": "8.24.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier-vue": "4.2.0",
diff --git a/playground/assets/css/main.css b/playground/assets/css/main.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/playground/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
index ff95453..52e2d5a 100644
--- a/playground/components/Hero.vue
+++ b/playground/components/Hero.vue
@@ -1,28 +1,40 @@
 <template>
   <section
-    class="min-h-screen w-full overflow-hidden bg-stone-100 dark:bg-stone-900"
+    class="min-h-screen w-full overflow-hidden bg-muted-100 dark:bg-muted-900 ltablet:bg-red"
   >
     <div
       class="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col justify-between px-4 pt-24"
     >
       <!-- Toasts -->
-      <div class="absolute top-40 left-20 z-10">
+      <div
+        class="hidden md:block absolute top-40 left-20 ptablet:translate-y-96 ltablet:left-1 lg:left-20 z-10"
+      >
         <ToastIconSuccess />
       </div>
-      <div class="absolute top-64 left-6 z-10">
+      <div
+        class="hidden md:block absolute top-64 left-6 ptablet:translate-y-96 ltablet:-left-7 lg:left-6 z-10"
+      >
         <ToastLabelInfo />
       </div>
-      <div class="absolute top-[350px] left-24 z-10">
+      <div
+        class="hidden md:block absolute top-[350px] left-24 ptablet:translate-y-96 ltablet:left-5 lg:left-24 z-10"
+      >
         <ToastIconSoloDanger />
       </div>
 
-      <div class="absolute top-40 right-20 z-10">
+      <div
+        class="absolute bottom-64 md:top-40 right-20 ptablet:translate-y-96 ltablet:right-1 lg:right-20 z-10"
+      >
         <ToastUserReplyClose />
       </div>
-      <div class="absolute top-64 right-6 z-10">
+      <div
+        class="absolute bottom-44 md:top-64 right-6 ptablet:translate-y-96 ltablet:-right-7 lg:right-6 z-10"
+      >
         <ToastLabelSuccess />
       </div>
-      <div class="absolute top-[350px] right-24 z-10">
+      <div
+        class="absolute bottom-[95px] md:top-[350px] ptablet:translate-y-96 right-24 ltablet:right-5 lg:right-24 z-10"
+      >
         <ToastActionButtons />
       </div>
 
@@ -35,26 +47,32 @@
                 >Nuxt 3 Ready</span
               >
             </p>
-            <h1 class="font-extrabold text-5xl text-stone-800 mb-2">
+            <h1
+              class="font-extrabold text-5xl text-muted-800 dark:text-white mb-2"
+            >
               Nuxt Toaster
             </h1>
-            <p class="text-lg text-stone-500 pb-3 border-b border-stone-200">
+            <p
+              class="text-lg text-muted-500 pb-3 border-b border-muted-200 dark:border-muted-800"
+            >
               <span class="mr-2">🔔</span> A simple toaster (notifier) handler
               for Nuxt.js
             </p>
           </div>
           <!-- Copy input -->
-          <div class="group relative w-full max-w-md mx-auto mt-4">
+          <div
+            class="group relative w-full flex flex-col gap-3 ptablet:max-w-md ltablet:max-w-sm lg:max-w-md mx-auto mt-4"
+          >
             <input
               type="text"
-              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-stone-600 bg-white border border-stone-200 group-hover:shadow-xl group-hover:shadow-stone-400/10 dark:group-hover:shadow-stone-800/10 transition-all duration-300"
+              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-muted-600 dark:text-muted-400 bg-white dark:bg-muted-1000 border border-muted-200 dark:border-muted-800 group-hover:shadow-xl group-hover:shadow-muted-400/10 dark:group-hover:shadow-muted-800/10 transition-all duration-300"
               value="npm i -D @cssninja/nuxt-toaster"
             />
             <!-- Terminal icon -->
             <div
               class="absolute top-0 left-0 w-14 h-14 flex items-center justify-center"
             >
-              <svg class="w-6 h-6 text-stone-400" viewBox="0 0 256 256">
+              <svg class="w-6 h-6 text-muted-400" viewBox="0 0 256 256">
                 <path
                   fill="currentColor"
                   d="m117.3 134l-72 64a8.1 8.1 0 0 1-5.3 2a8 8 0 0 1-5.3-14l65.3-58l-65.3-58a8 8 0 1 1 10.6-12l72 64a8 8 0 0 1 0 12Zm98.7 50h-96a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16Z"
@@ -64,7 +82,7 @@
             <!-- Copy button -->
             <button
               type="button"
-              class="absolute top-2 right-2 h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500"
+              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300"
             >
               Copy
             </button>
diff --git a/playground/components/Navigation.vue b/playground/components/Navigation.vue
index 6154c7a..0df3174 100644
--- a/playground/components/Navigation.vue
+++ b/playground/components/Navigation.vue
@@ -14,23 +14,66 @@ const isChecked = ref(false)
 <template>
   <div
     class="fixed top-0 left-0 w-full z-50 transition-all duration-300"
-    :class="[isScrolled && 'bg-white dark:bg-slate-800']"
+    :class="[
+      isScrolled && 'bg-white dark:bg-muted-1000',
+      mobileOpen ? 'bg-white dark:bg-muted-1000' : '',
+    ]"
   >
     <div class="mx-auto w-full max-w-7xl p-4">
-      <div class="flex items-center justify-between gap-x-2">
-        <div class="flex items-center gap-x-2">
+      <div class="w-full flex items-center justify-between gap-x-2">
+        <div class="w-full lg:w-auto flex items-center gap-x-2">
           <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
-          <img class="h-5" src="/assets/img/logo-text.svg" alt="Logo text" />
+          <img
+            class="h-5 dark:invert"
+            src="/assets/img/logo-text.svg"
+            alt="Logo text"
+          />
+
+          <!-- Hamburger -->
+          <button
+            class="flex relative justify-center items-center ml-auto w-10 h-10 focus:outline-none lg:hidden"
+            @click="mobileOpen = !mobileOpen"
+          >
+            <div
+              class="block top-1/2 left-6 w-4 -translate-x-1/2 -translate-y-1/2"
+            >
+              <span
+                class="block absolute w-7 h-0.5 text-indigo-500 bg-current transition duration-500 ease-in-out"
+                :class="mobileOpen ? 'rotate-45' : '-translate-y-2'"
+              />
+              <span
+                class="block absolute w-5 h-0.5 text-indigo-500 bg-current transition duration-500 ease-in-out"
+                :class="mobileOpen ? 'opacity-0' : ''"
+              />
+              <span
+                class="block absolute w-7 h-0.5 text-indigo-500 bg-current transition duration-500 ease-in-out"
+                :class="mobileOpen ? '-rotate-45' : 'translate-y-2'"
+              />
+            </div>
+          </button>
         </div>
-        <div class="flex items-center justify-end divide-x divide-stone-300">
-          <div class="flex items-center justify-end gap-x-5 pr-4">
-            <NuxtLink to="/">Examples</NuxtLink>
-            <NuxtLink to="/api">API docs</NuxtLink>
+        <div
+          class="lg:flex flex-col lg:flex-row items-center justify-end p-6 lg:p-0 space-y-3 lg:space-y-0 lg:divide-x divide-muted-300 dark:divide-muted-700 bg-white dark:bg-muted-900 lg:bg-transparent dark:lg:bg-transparent"
+          :class="mobileOpen ? 'fixed top-[72px] left-0 w-full flex' : 'hidden'"
+        >
+          <div
+            class="flex flex-col lg:flex-row items-center justify-end gap-x-5 lg:pr-4 space-y-3 lg:space-y-0"
+          >
+            <NuxtLink
+              to="/"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              >Examples</NuxtLink
+            >
+            <NuxtLink
+              to="/api"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              >API docs</NuxtLink
+            >
           </div>
-          <div class="flex items-center justify-end gap-x-1 pl-4">
+          <div class="flex items-center justify-end gap-x-1 lg:pl-4">
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
             >
               <svg class="w-5 h-5" viewBox="0 0 1536 1504">
                 <path
@@ -41,7 +84,7 @@ const isChecked = ref(false)
             </NuxtLink>
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
             >
               <svg class="w-5 h-5" viewBox="0 0 1600 1280">
                 <path
@@ -51,9 +94,7 @@ const isChecked = ref(false)
               </svg>
             </NuxtLink>
             <!-- Theme -->
-            <label
-              class="block w-9 h-9 overflow-hidden relative mx-auto mb-4 lg:m-0"
-            >
+            <label class="block w-9 h-9 overflow-hidden relative mx-auto">
               <input
                 v-model="isChecked"
                 type="checkbox"
@@ -61,7 +102,7 @@ const isChecked = ref(false)
                 @change="() => toggleDark()"
               />
               <span
-                class="block relative w-9 h-9 bg-white dark:bg-slate-800 rounded-full border border-slate-300 dark:border-slate-700"
+                class="block relative w-9 h-9 bg-white dark:bg-muted-800 rounded-full border border-muted-300 dark:border-muted-700"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -72,7 +113,7 @@ const isChecked = ref(false)
                   :class="[
                     !isChecked
                       ? 'opacity-100 -translate-x-[45%] -translate-y-1/2'
-                      : 'opacity-0  -translate-x-[45%] -translate-y-[150%]'
+                      : 'opacity-0  -translate-x-[45%] -translate-y-[150%]',
                   ]"
                   width="32"
                   height="32"
@@ -106,7 +147,7 @@ const isChecked = ref(false)
                   :class="[
                     !isChecked
                       ? 'opacity-0 -translate-x-[45%] -translate-y-[150%]'
-                      : 'opacity-100 -translate-x-[45%] -translate-y-1/2'
+                      : 'opacity-100 -translate-x-[45%] -translate-y-1/2',
                   ]"
                   width="32"
                   height="32"
diff --git a/playground/components/toast/ActionButtons.vue b/playground/components/toast/ActionButtons.vue
index 2e6676d..553217a 100644
--- a/playground/components/toast/ActionButtons.vue
+++ b/playground/components/toast/ActionButtons.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="w-full flex items-center gap-2 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-2 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-stone-500 bg-stone-100 hover:text-stone-600 hover:bg-stone-50 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300"
     >
       Dismiss
     </button>
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 bg-sky-100 hover:text-sky-600 hover:bg-sky-50 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300"
     >
       Accept
     </button>
diff --git a/playground/components/toast/IconSoloDanger.vue b/playground/components/toast/IconSoloDanger.vue
index 20690f2..d35fcc8 100644
--- a/playground/components/toast/IconSoloDanger.vue
+++ b/playground/components/toast/IconSoloDanger.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full flex items-center gap-1 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-1 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
       class="h-11 w-11 flex items-center justify-center rounded-full text-rose-500"
@@ -18,12 +18,15 @@
       </svg>
     </div>
     <div class="mr-6">
-      <span class="block font-semibold text-sm text-stone-800">Fire alert</span>
-      <span class="block text-xs text-stone-400">Get out of here fast!</span>
+      <span
+        class="block font-semibold text-sm text-muted-800 dark:text-muted-100"
+        >Fire alert</span
+      >
+      <span class="block text-xs text-muted-400">Get out of here fast!</span>
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto"
+      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-700 dark:text-muted-400"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path
diff --git a/playground/components/toast/IconSuccess.vue b/playground/components/toast/IconSuccess.vue
index f5deda5..c7b620b 100644
--- a/playground/components/toast/IconSuccess.vue
+++ b/playground/components/toast/IconSuccess.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="w-full flex items-center gap-3 py-3 pl-3 pr-6 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-3 py-3 pl-3 pr-6 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
-      class="h-11 w-11 flex items-center justify-center rounded-full text-emerald-500 bg-emerald-100"
+      class="h-11 w-11 flex items-center justify-center rounded-full text-emerald-500 bg-emerald-100 dark:text-white dark:bg-emerald-500"
     >
       <svg class="w-5 h-5" viewBox="0 0 24 24">
         <path
@@ -12,6 +12,8 @@
         />
       </svg>
     </div>
-    <span class="text-sm text-stone-600">Your changes were saved!</span>
+    <span class="text-sm text-muted-600 dark:text-muted-400"
+      >Your changes were saved!</span
+    >
   </div>
 </template>
\ No newline at end of file
diff --git a/playground/components/toast/LabelInfo.vue b/playground/components/toast/LabelInfo.vue
index dc8ebaf..b4d21d6 100644
--- a/playground/components/toast/LabelInfo.vue
+++ b/playground/components/toast/LabelInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
-      class="h-16 w-16 flex items-center justify-center text-sky-500 bg-sky-100"
+      class="h-16 w-16 flex items-center justify-center text-sky-500 bg-sky-100 dark:text-white dark:bg-sky-500"
     >
       <svg class="w-5 h-5" viewBox="0 0 512 512">
         <path
@@ -13,7 +13,9 @@
       </svg>
     </div>
     <div class="pr-6 pl-4">
-      <span class="text-sm text-stone-600">Your changes were saved!</span>
+      <span class="text-sm text-muted-600 dark:text-muted-400"
+        >Your changes were saved!</span
+      >
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/playground/components/toast/LabelSuccess.vue b/playground/components/toast/LabelSuccess.vue
index 7737f5c..dbe516d 100644
--- a/playground/components/toast/LabelSuccess.vue
+++ b/playground/components/toast/LabelSuccess.vue
@@ -3,7 +3,7 @@
     class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
   >
     <div
-      class="h-16 w-16 flex items-center justify-center text-emerald-500 bg-emerald-100"
+      class="h-16 w-16 flex items-center justify-center text-emerald-500 bg-emerald-100 dark:bg-emerald-500"
     >
       <svg class="w-6 h-6" viewBox="0 0 256 172">
         <path
@@ -17,7 +17,9 @@
       </svg>
     </div>
     <div class="pr-6 pl-4">
-      <span class="text-sm text-stone-600">Nuxt has been installed!</span>
+      <span class="text-sm text-stone-600 dark:text-muted-400"
+        >Nuxt has been installed!</span
+      >
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/playground/components/toast/UserReplyClose.vue b/playground/components/toast/UserReplyClose.vue
index ea83536..82082c1 100644
--- a/playground/components/toast/UserReplyClose.vue
+++ b/playground/components/toast/UserReplyClose.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
       class="inline-flex justify-center items-center relative w-10 h-10 rounded-full"
@@ -12,12 +12,15 @@
       />
     </div>
     <div class="mr-6">
-      <span class="block font-semibold text-sm text-stone-800">Clark E.</span>
-      <span class="block text-xs text-stone-400">Replied to your post</span>
+      <span
+        class="block font-semibold text-sm text-muted-800 dark:text-muted-100"
+        >Clark E.</span
+      >
+      <span class="block text-xs text-muted-400">Replied to your post</span>
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto"
+      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-400"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 7db40d4..7dae986 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -2,7 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 import NinjaNuxtToaster from '..'
 
 export default defineNuxtConfig({
-  modules: [NinjaNuxtToaster],
+  modules: ['@nuxtjs/tailwindcss', NinjaNuxtToaster],
   app: {
     head: {
       link: [
@@ -11,14 +11,9 @@ export default defineNuxtConfig({
         { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
         {
           rel: 'stylesheet',
-          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900?family=Elsie+Swash+Caps:wght@400;900&display=swap'
-        }
+          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap',
+        },
       ],
-      script: [
-        {
-          src: 'https://cdn.tailwindcss.com'
-        }
-      ]
-    }
-  }
+    },
+  },
 })
diff --git a/playground/tailwind.config.ts b/playground/tailwind.config.ts
new file mode 100644
index 0000000..1e9f0dc
--- /dev/null
+++ b/playground/tailwind.config.ts
@@ -0,0 +1,111 @@
+import colors from 'tailwindcss/colors'
+import plugin from 'tailwindcss/plugin'
+
+module.exports = {
+  darkMode: 'class',
+  content: ['./pages/**/*.{vue,ts}', './components/**/*.{vue,ts}'],
+  // css: ['@/assets/css/main.css'],
+  theme: {
+    extend: {
+      screens: {
+        xs: { max: '639px' },
+        sm: '640px',
+        md: '768px',
+        lg: '1025px',
+        xl: '1280px',
+        xxl: '1536px',
+        ptablet: {
+          raw: '(min-width: 768px) and (max-width: 1024px) and (orientation: portrait)',
+        },
+        ltablet: {
+          raw: '(min-width: 768px) and (max-width: 1024px) and (orientation: landscape)',
+        },
+      },
+      colors: {
+        slate: {
+          1000: '#0a101f',
+        },
+        gray: {
+          1000: '#080c14',
+        },
+        zinc: {
+          1000: '#101012',
+        },
+        neutral: {
+          1000: '#080808',
+        },
+        stone: {
+          1000: '#0f0d0c',
+        },
+        muted: colors.stone,
+        primary: colors.indigo,
+        info: colors.sky,
+        success: colors.teal,
+        warning: colors.amber,
+        danger: colors.rose,
+      },
+      fontFamily: {
+        sans: ['Roboto Flex', 'sans-serif'],
+        heading: ['Inter', 'sans-serif'],
+      },
+      keyframes: {
+        indeterminate: {
+          '0%': { 'margin-left': '-10%' },
+          '100%': { 'margin-left': '100%' },
+        },
+        placeload: {
+          '0%': { 'background-position': '-468px 0' },
+          '100%': { 'background-position': '468px 0' },
+        },
+      },
+      animation: {
+        indeterminate: 'indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite',
+        placeload: 'placeload 1s linear infinite forwards',
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        '.slimscroll::-webkit-scrollbar': {
+          width: '6px',
+        },
+        '.slimscroll::-webkit-scrollbar-thumb': {
+          borderRadius: '.75rem',
+          background: 'rgba(0, 0, 0, 0.1)',
+        },
+        '.slimscroll-opaque::-webkit-scrollbar-thumb': {
+          background: 'rgba(0, 0, 0, 0) !important',
+        },
+        '.mask': {
+          'mask-size': 'contain',
+          'mask-repeat': 'no-repeat',
+          'mask-position': 'center',
+        },
+        '.mask-hex': {
+          'mask-image':
+            "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')",
+        },
+        '.mask-hexed': {
+          'mask-image':
+            "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')",
+        },
+        '.mask-deca': {
+          'mask-image':
+            "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')",
+        },
+        '.mask-blob': {
+          'mask-image':
+            "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')",
+        },
+        '.mask-diamond': {
+          'mask-image':
+            "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')",
+        },
+      })
+    }),
+  ],
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b605b73..404ea6d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,7 @@ specifiers:
   '@nuxt/kit': ^3.0.0-rc.11
   '@nuxt/module-builder': latest
   '@nuxt/schema': ^3.0.0-rc.11
+  '@nuxtjs/tailwindcss': ^5.3.3
   '@vueuse/core': ^9.2.0
   defu: ^6.1.0
   eslint: 8.24.0
@@ -24,6 +25,7 @@ devDependencies:
   '@antfu/eslint-config': 0.27.0_eslint@8.24.0
   '@nuxt/module-builder': 0.1.7
   '@nuxt/schema': 3.0.0-rc.11
+  '@nuxtjs/tailwindcss': 5.3.3
   eslint: 8.24.0
   eslint-config-prettier: 8.5.0_eslint@8.24.0
   eslint-plugin-prettier-vue: 4.2.0
@@ -407,6 +409,17 @@ packages:
       mime: 3.0.0
     dev: true
 
+  /@csstools/selector-specificity/2.0.2_pnx64jze6bptzcedy5bidi3zdi:
+    resolution: {integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.2
+      postcss-selector-parser: ^6.0.10
+    dependencies:
+      postcss: 8.4.16
+      postcss-selector-parser: 6.0.10
+    dev: true
+
   /@esbuild/android-arm/0.15.8:
     resolution: {integrity: sha512-CyEWALmn+no/lbgbAJsbuuhT8s2J19EJGHkeyAwjbFJMrj80KJ9zuYsoAvidPTU7BgBf87r/sgae8Tw0dbOc4Q==}
     engines: {node: '>=12'}
@@ -525,6 +538,19 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@koa/router/9.4.0:
+    resolution: {integrity: sha512-dOOXgzqaDoHu5qqMEPLKEgLz5CeIA7q8+1W62mCvFVCOqeC71UoTGJ4u1xUSOpIl2J1x2pqrNULkFteUeZW3/A==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      debug: 4.3.4
+      http-errors: 1.8.1
+      koa-compose: 4.1.0
+      methods: 1.1.2
+      path-to-regexp: 6.2.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@mapbox/node-pre-gyp/1.0.10:
     resolution: {integrity: sha512-4ySo4CjzStuprMwk35H5pPbkymjv1SF3jGLj6rAHp/xT/RF7TL7bd9CTm1xDY49K2qF7jmR/g7k+SkLETP6opA==}
     hasBin: true
@@ -644,6 +670,21 @@ packages:
       - supports-color
     dev: true
 
+  /@nuxt/postcss8/1.1.3:
+    resolution: {integrity: sha512-CdHtErhvQwueNZPBOmlAAKrNCK7aIpZDYhtS7TzXlSgPHHox1g3cSlf+Ke9oB/8t4mNNjdB+prclme2ibuCOEA==}
+    dependencies:
+      autoprefixer: 10.4.11_postcss@8.4.16
+      css-loader: 5.2.7
+      defu: 3.2.2
+      postcss: 8.4.16
+      postcss-import: 13.0.0_postcss@8.4.16
+      postcss-loader: 4.3.0_postcss@8.4.16
+      postcss-url: 10.1.3_postcss@8.4.16
+      semver: 7.3.7
+    transitivePeerDependencies:
+      - webpack
+    dev: true
+
   /@nuxt/schema/3.0.0-rc.11:
     resolution: {integrity: sha512-EIBYQeBxJ+JZ8RjPRGaXM9+vtWMHQ4HsqZIw5a+p6hqRLGf53fHANT4vjMQZA4fAYBnJZJI7dB/OXkfyb/kikA==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
@@ -776,6 +817,31 @@ packages:
       - webpack
     dev: true
 
+  /@nuxtjs/tailwindcss/5.3.3:
+    resolution: {integrity: sha512-1YyDcOJuZue3PtTX7c58FEIieAy0utpRa6s9nJ4BVE/UloRG2mDw4ch7s9O4afdsHiib5e7uxNfY1ZZGKupqaw==}
+    dependencies:
+      '@nuxt/kit': 3.0.0-rc.11
+      '@nuxt/postcss8': 1.1.3
+      autoprefixer: 10.4.11_postcss@8.4.16
+      chalk: 5.0.1
+      clear-module: 4.1.2
+      consola: 2.15.3
+      defu: 6.1.0
+      postcss: 8.4.16
+      postcss-custom-properties: 12.1.9_postcss@8.4.16
+      postcss-nesting: 10.2.0_postcss@8.4.16
+      tailwind-config-viewer: 1.7.2_tailwindcss@3.1.8
+      tailwindcss: 3.1.8
+      ufo: 0.8.5
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - ts-node
+      - vite
+      - webpack
+    dev: true
+
   /@rollup/plugin-alias/3.1.9_rollup@2.79.0:
     resolution: {integrity: sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==}
     engines: {node: '>=8.0.0'}
@@ -955,6 +1021,10 @@ packages:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
+  /@types/parse-json/4.0.0:
+    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: true
+
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
@@ -1320,6 +1390,14 @@ packages:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
 
+  /accepts/1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+    dev: true
+
   /acorn-jsx/5.3.2_acorn@8.8.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1365,6 +1443,14 @@ packages:
       - supports-color
     dev: true
 
+  /ajv-keywords/3.5.2_ajv@6.12.6:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: ^6.9.1
+    dependencies:
+      ajv: 6.12.6
+    dev: true
+
   /ajv/6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -1520,10 +1606,21 @@ packages:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
     dev: true
 
+  /async/2.6.4:
+    resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
   /async/3.2.4:
     resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
     dev: true
 
+  /at-least-node/1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /autoprefixer/10.4.11_postcss@8.4.16:
     resolution: {integrity: sha512-5lHp6DgRodxlBLSkzHOTcufWFflH1ewfy2hvFQyjrblBFlP/0Yh4O/Wrg4ow8WRlN3AAUFFLAQwX8hTptzqVHg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1548,6 +1645,10 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
 
+  /big.js/5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+    dev: true
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -1652,6 +1753,14 @@ packages:
       pkg-types: 0.3.5
       rc9: 1.2.2
 
+  /cache-content-type/1.0.1:
+    resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      mime-types: 2.1.35
+      ylru: 1.3.2
+    dev: true
+
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -1770,6 +1879,14 @@ packages:
       escape-string-regexp: 1.0.5
     dev: true
 
+  /clear-module/4.1.2:
+    resolution: {integrity: sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==}
+    engines: {node: '>=8'}
+    dependencies:
+      parent-module: 2.0.0
+      resolve-from: 5.0.0
+    dev: true
+
   /cli-cursor/4.0.0:
     resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1814,6 +1931,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /co/4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+    dev: true
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1850,6 +1972,11 @@ packages:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
+  /commander/6.2.1:
+    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /commander/7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -1902,6 +2029,18 @@ packages:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
     dev: true
 
+  /content-disposition/0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /content-type/1.0.4:
+    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /conventional-changelog-angular/5.0.13:
     resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
     engines: {node: '>=10'}
@@ -2076,9 +2215,28 @@ packages:
     resolution: {integrity: sha512-RyZrFi6PNpBFbIaQjXDlFIhFVqV42QeKSZX1yQIl6ihImq6vcHNGMtqQ/QzY3RMPuYSkvsRwtnt5M9NeYxKt0g==}
     dev: true
 
+  /cookies/0.8.0:
+    resolution: {integrity: sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      keygrip: 1.1.0
+    dev: true
+
   /core-util-is/1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  /cosmiconfig/7.0.1:
+    resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: true
+
   /crc-32/1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -2114,6 +2272,24 @@ packages:
       postcss: 8.4.16
     dev: true
 
+  /css-loader/5.2.7:
+    resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.27.0 || ^5.0.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.16
+      loader-utils: 2.0.2
+      postcss: 8.4.16
+      postcss-modules-extract-imports: 3.0.0_postcss@8.4.16
+      postcss-modules-local-by-default: 4.0.0_postcss@8.4.16
+      postcss-modules-scope: 3.0.0_postcss@8.4.16
+      postcss-modules-values: 4.0.0_postcss@8.4.16
+      postcss-value-parser: 4.2.0
+      schema-utils: 3.1.1
+      semver: 7.3.7
+    dev: true
+
   /css-select/4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
     dependencies:
@@ -2277,6 +2453,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /deep-equal/1.0.1:
+    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
+    dev: true
+
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -2309,6 +2489,10 @@ packages:
     resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
     dev: true
 
+  /defu/3.2.2:
+    resolution: {integrity: sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==}
+    dev: true
+
   /defu/5.0.1:
     resolution: {integrity: sha512-EPS1carKg+dkEVy3qNTqIdp2qV7mUP08nIsupfwQpz++slCVRw7qbQyWvSTig+kFPwz2XXp5/kIIkH+CwrJKkQ==}
     dev: true
@@ -2325,6 +2509,11 @@ packages:
     engines: {node: '>=0.10'}
     dev: true
 
+  /depd/1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /depd/2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -2494,6 +2683,11 @@ packages:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
+  /emojis-list/3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /encodeurl/1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -3643,6 +3837,16 @@ packages:
       universalify: 2.0.0
     dev: true
 
+  /fs-extra/9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs-memo/1.2.0:
     resolution: {integrity: sha512-YEexkCpL4j03jn5SxaMHqcO6IuWuqm8JFUYhyCep7Ao89JIYmB8xoKhK7zXXJ9cCaNXpyNH5L3QtAmoxjoHW2w==}
     dev: true
@@ -3982,6 +4186,35 @@ packages:
       entities: 4.4.0
     dev: true
 
+  /http-assert/1.5.0:
+    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      deep-equal: 1.0.1
+      http-errors: 1.8.1
+    dev: true
+
+  /http-errors/1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+    dev: true
+
+  /http-errors/1.8.1:
+    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 1.5.0
+      toidentifier: 1.0.1
+    dev: true
+
   /http-errors/2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -4031,6 +4264,15 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
+  /icss-utils/5.1.0_postcss@8.4.16:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.16
+    dev: true
+
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -4064,6 +4306,10 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /inherits/2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+    dev: true
+
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -4208,6 +4454,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-generator-function/1.0.10:
+    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
   /is-glob/4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -4434,6 +4687,13 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
+  /keygrip/1.1.0:
+    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      tsscmp: 1.0.6
+    dev: true
+
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -4447,6 +4707,70 @@ packages:
   /knitwork/0.1.2:
     resolution: {integrity: sha512-2ekmY2S/VB3YGVhrIFadyJQpkjMFSf48tsXCnA+kjs4FEQIT+5FLyOF0No/X58z/2E/VaMyeJfukRoVT4gMsfQ==}
 
+  /koa-compose/4.1.0:
+    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
+    dev: true
+
+  /koa-convert/2.0.0:
+    resolution: {integrity: sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      co: 4.6.0
+      koa-compose: 4.1.0
+    dev: true
+
+  /koa-send/5.0.1:
+    resolution: {integrity: sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==}
+    engines: {node: '>= 8'}
+    dependencies:
+      debug: 4.3.4
+      http-errors: 1.8.1
+      resolve-path: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /koa-static/5.0.0:
+    resolution: {integrity: sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==}
+    engines: {node: '>= 7.6.0'}
+    dependencies:
+      debug: 3.2.7
+      koa-send: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /koa/2.13.4:
+    resolution: {integrity: sha512-43zkIKubNbnrULWlHdN5h1g3SEKXOEzoAlRsHOTFpnlDu8JlAOZSMJBLULusuXRequboiwJcj5vtYXKB3k7+2g==}
+    engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
+    dependencies:
+      accepts: 1.3.8
+      cache-content-type: 1.0.1
+      content-disposition: 0.5.4
+      content-type: 1.0.4
+      cookies: 0.8.0
+      debug: 4.3.4
+      delegates: 1.0.0
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      fresh: 0.5.2
+      http-assert: 1.5.0
+      http-errors: 1.8.1
+      is-generator-function: 1.0.10
+      koa-compose: 4.1.0
+      koa-convert: 2.0.0
+      on-finished: 2.4.1
+      only: 0.0.2
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      type-is: 1.6.18
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /lazystream/1.0.1:
     resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
     engines: {node: '>= 0.6.3'}
@@ -4506,6 +4830,15 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /loader-utils/2.0.2:
+    resolution: {integrity: sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==}
+    engines: {node: '>=8.9.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.1
+    dev: true
+
   /local-pkg/0.4.2:
     resolution: {integrity: sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==}
     engines: {node: '>=14'}
@@ -4669,6 +5002,11 @@ packages:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: true
 
+  /media-typer/0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /memory-fs/0.5.0:
     resolution: {integrity: sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==}
     engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
@@ -4701,6 +5039,11 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  /methods/1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /micromark/2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies:
@@ -4717,6 +5060,18 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
   /mime/1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -4890,6 +5245,11 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /negotiator/0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /neo-async/2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
@@ -5218,6 +5578,18 @@ packages:
       mimic-fn: 2.1.0
     dev: true
 
+  /only/0.0.2:
+    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
+    dev: true
+
+  /open/7.4.2:
+    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
   /open/8.4.0:
     resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
     engines: {node: '>=12'}
@@ -5325,6 +5697,13 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parent-module/2.0.0:
+    resolution: {integrity: sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==}
+    engines: {node: '>=8'}
+    dependencies:
+      callsites: 3.1.0
+    dev: true
+
   /parse-entities/2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -5403,6 +5782,10 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /path-to-regexp/6.2.1:
+    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
+    dev: true
+
   /path-type/3.0.0:
     resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
     engines: {node: '>=4'}
@@ -5454,6 +5837,17 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /portfinder/1.0.32:
+    resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
+    engines: {node: '>= 0.12.0'}
+    dependencies:
+      async: 2.6.4
+      debug: 3.2.7
+      mkdirp: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /postcss-calc/8.2.4_postcss@8.4.16:
     resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
     peerDependencies:
@@ -5488,6 +5882,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-custom-properties/12.1.9_postcss@8.4.16:
+    resolution: {integrity: sha512-/E7PRvK8DAVljBbeWrcEQJPG72jaImxF3vvCNFwv9cC8CzigVoNIpeyfnJzphnN3Fd8/auBf5wvkw6W9MfmTyg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.2
+    dependencies:
+      postcss: 8.4.16
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /postcss-discard-comments/5.1.2_postcss@8.4.16:
     resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -5529,6 +5933,18 @@ packages:
     dependencies:
       enhanced-resolve: 4.5.0
 
+  /postcss-import/13.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-LPUbm3ytpYopwQQjqgUH4S3EM/Gb9QsaSPP/5vnoi+oKVy3/mIk2sc0Paqw7RL57GpScm9MdIMUypw2znWiBpg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.16
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.1
+    dev: true
+
   /postcss-import/14.1.0_postcss@8.4.16:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -5580,6 +5996,21 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /postcss-loader/4.3.0_postcss@8.4.16:
+    resolution: {integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      cosmiconfig: 7.0.1
+      klona: 2.0.5
+      loader-utils: 2.0.2
+      postcss: 8.4.16
+      schema-utils: 3.1.1
+      semver: 7.3.7
+    dev: true
+
   /postcss-merge-longhand/5.1.6_postcss@8.4.16:
     resolution: {integrity: sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -5648,6 +6079,47 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: true
 
+  /postcss-modules-extract-imports/3.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.16
+    dev: true
+
+  /postcss-modules-local-by-default/4.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.16
+      postcss: 8.4.16
+      postcss-selector-parser: 6.0.10
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-modules-scope/3.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.16
+      postcss-selector-parser: 6.0.10
+    dev: true
+
+  /postcss-modules-values/4.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.16
+      postcss: 8.4.16
+    dev: true
+
   /postcss-nested/5.0.6_postcss@8.4.16:
     resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
     engines: {node: '>=12.0'}
@@ -5658,6 +6130,17 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: true
 
+  /postcss-nesting/10.2.0_postcss@8.4.16:
+    resolution: {integrity: sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.2
+    dependencies:
+      '@csstools/selector-specificity': 2.0.2_pnx64jze6bptzcedy5bidi3zdi
+      postcss: 8.4.16
+      postcss-selector-parser: 6.0.10
+    dev: true
+
   /postcss-normalize-charset/5.1.0_postcss@8.4.16:
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -6032,6 +6515,16 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /replace-in-file/6.3.5:
+    resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      chalk: 4.1.2
+      glob: 7.2.3
+      yargs: 17.5.1
+    dev: true
+
   /require-directory/2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -6051,6 +6544,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /resolve-path/1.4.0:
+    resolution: {integrity: sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      http-errors: 1.6.3
+      path-is-absolute: 1.0.1
+    dev: true
+
   /resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
@@ -6202,6 +6703,15 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /schema-utils/3.1.1:
+    resolution: {integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
   /scule/0.2.1:
     resolution: {integrity: sha512-M9gnWtn3J0W+UhJOHmBxBTwv8mZCan5i1Himp60t6vvZcor0wr+IM0URKmIglsWJ7bRujNAVVN77fp+uZaWoKg==}
     dev: true
@@ -6281,6 +6791,10 @@ packages:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
     dev: true
 
+  /setprototypeof/1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+    dev: true
+
   /setprototypeof/1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
     dev: true
@@ -6407,6 +6921,11 @@ packages:
       yargs: 16.2.0
     dev: true
 
+  /statuses/1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /statuses/2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -6552,6 +7071,26 @@ packages:
       stable: 0.1.8
     dev: true
 
+  /tailwind-config-viewer/1.7.2_tailwindcss@3.1.8:
+    resolution: {integrity: sha512-3JJCeAAlvG+i/EBj+tQb0x4weo30QjdSAo4hlcnVbtD+CkpzHi/UwU9InbPMcYH+ESActoa2kCyjpLEyjEkn0Q==}
+    engines: {node: '>=8'}
+    hasBin: true
+    peerDependencies:
+      tailwindcss: 1 || 2 || 2.0.1-compat || 3
+    dependencies:
+      '@koa/router': 9.4.0
+      commander: 6.2.1
+      fs-extra: 9.1.0
+      koa: 2.13.4
+      koa-static: 5.0.0
+      open: 7.4.2
+      portfinder: 1.0.32
+      replace-in-file: 6.3.5
+      tailwindcss: 3.1.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /tailwindcss/3.1.8:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
@@ -6716,6 +7255,11 @@ packages:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
+  /tsscmp/1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+    dev: true
+
   /tsutils/3.21.0:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -6767,6 +7311,14 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
+  /type-is/1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+    dev: true
+
   /typedarray/0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: true
@@ -7075,6 +7627,11 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vary/1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /vite-node/0.23.4:
     resolution: {integrity: sha512-8VuDGwTWIvwPYcbw8ZycMlwAwqCmqZfLdFrDK75+o+6bWYpede58k6AAXN9ioU+icW82V4u1MzkxLVhhIoQ9xA==}
     engines: {node: '>=v14.16.0'}
@@ -7451,6 +8008,11 @@ packages:
       yargs-parser: 21.1.1
     dev: true
 
+  /ylru/1.3.2:
+    resolution: {integrity: sha512-RXRJzMiK6U2ye0BlGGZnmpwJDPgakn6aNQ0A7gHRbD4I0uvK4TW6UqkK1V0pp9jskjJBAXd3dRrbzWkqJ+6cxA==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /yocto-queue/0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}

From dc9f536cb0727b99ccb73acf5c83da27e9ee493b Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Tue, 27 Sep 2022 15:56:40 +0100
Subject: [PATCH 04/16] fix: fix clickables accessibility

---
 playground/app.config.ts                      |  4 +--
 playground/assets/css/main.css                |  2 ++
 .../assets/css/modules/accessibility.css      |  9 ++++++
 playground/components/Hero.vue                |  6 ++--
 playground/components/Navigation.vue          | 28 +++++++++++--------
 playground/components/toast/ActionButtons.vue |  4 +--
 .../components/toast/IconSoloDanger.vue       |  2 +-
 .../components/toast/UserReplyClose.vue       |  2 +-
 playground/nuxt.config.ts                     |  1 +
 9 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 playground/assets/css/modules/accessibility.css

diff --git a/playground/app.config.ts b/playground/app.config.ts
index e4a5047..f67c448 100644
--- a/playground/app.config.ts
+++ b/playground/app.config.ts
@@ -1,5 +1,5 @@
 export default defineAppConfig({
   toaster: {
-    maxToasts: 10
-  }
+    maxToasts: 10,
+  },
 })
diff --git a/playground/assets/css/main.css b/playground/assets/css/main.css
index bd6213e..deaa318 100644
--- a/playground/assets/css/main.css
+++ b/playground/assets/css/main.css
@@ -1,3 +1,5 @@
+@import './modules/accessibility.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file
diff --git a/playground/assets/css/modules/accessibility.css b/playground/assets/css/modules/accessibility.css
new file mode 100644
index 0000000..b1a0666
--- /dev/null
+++ b/playground/assets/css/modules/accessibility.css
@@ -0,0 +1,9 @@
+@layer utilities {
+  .tw-accessibility {
+    @apply outline-none focus-visible:outline-none focus-visible:outline-dashed focus-visible:outline-muted-300 dark:focus-visible:outline-muted-600 focus-visible:outline-offset-2;
+  }
+
+  .tw-accessibility-static {
+    @apply outline-dashed outline-muted-300 dark:outline-muted-600 outline-offset-2;
+  }
+}
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
index 52e2d5a..d1d2a2c 100644
--- a/playground/components/Hero.vue
+++ b/playground/components/Hero.vue
@@ -65,7 +65,7 @@
           >
             <input
               type="text"
-              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-muted-600 dark:text-muted-400 bg-white dark:bg-muted-1000 border border-muted-200 dark:border-muted-800 group-hover:shadow-xl group-hover:shadow-muted-400/10 dark:group-hover:shadow-muted-800/10 transition-all duration-300"
+              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-muted-600 dark:text-muted-400 bg-white dark:bg-muted-1000 border border-muted-200 dark:border-muted-800 group-hover:shadow-xl group-hover:shadow-muted-400/10 dark:group-hover:shadow-muted-800/10 transition-all duration-300 tw-accessibility"
               value="npm i -D @cssninja/nuxt-toaster"
             />
             <!-- Terminal icon -->
@@ -82,9 +82,9 @@
             <!-- Copy button -->
             <button
               type="button"
-              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300"
+              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300 tw-accessibility"
             >
-              Copy
+              Try Me
             </button>
           </div>
         </div>
diff --git a/playground/components/Navigation.vue b/playground/components/Navigation.vue
index 0df3174..52a3cfa 100644
--- a/playground/components/Navigation.vue
+++ b/playground/components/Navigation.vue
@@ -22,16 +22,18 @@ const isChecked = ref(false)
     <div class="mx-auto w-full max-w-7xl p-4">
       <div class="w-full flex items-center justify-between gap-x-2">
         <div class="w-full lg:w-auto flex items-center gap-x-2">
-          <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
-          <img
-            class="h-5 dark:invert"
-            src="/assets/img/logo-text.svg"
-            alt="Logo text"
-          />
+          <NuxtLink to="/" class="flex items-center gap-2 tw-accessibility">
+            <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
+            <img
+              class="h-5 dark:invert"
+              src="/assets/img/logo-text.svg"
+              alt="Logo text"
+            />
+          </NuxtLink>
 
           <!-- Hamburger -->
           <button
-            class="flex relative justify-center items-center ml-auto w-10 h-10 focus:outline-none lg:hidden"
+            class="flex relative justify-center items-center ml-auto w-10 h-10 lg:hidden tw-accessibility"
             @click="mobileOpen = !mobileOpen"
           >
             <div
@@ -61,19 +63,19 @@ const isChecked = ref(false)
           >
             <NuxtLink
               to="/"
-              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
               >Examples</NuxtLink
             >
             <NuxtLink
               to="/api"
-              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
               >API docs</NuxtLink
             >
           </div>
           <div class="flex items-center justify-end gap-x-1 lg:pl-4">
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
             >
               <svg class="w-5 h-5" viewBox="0 0 1536 1504">
                 <path
@@ -84,7 +86,7 @@ const isChecked = ref(false)
             </NuxtLink>
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
             >
               <svg class="w-5 h-5" viewBox="0 0 1600 1280">
                 <path
@@ -94,7 +96,9 @@ const isChecked = ref(false)
               </svg>
             </NuxtLink>
             <!-- Theme -->
-            <label class="block w-9 h-9 overflow-hidden relative mx-auto">
+            <label
+              class="block w-9 h-9 rounded-full overflow-hidden relative mx-auto focus-within:tw-accessibility-static"
+            >
               <input
                 v-model="isChecked"
                 type="checkbox"
diff --git a/playground/components/toast/ActionButtons.vue b/playground/components/toast/ActionButtons.vue
index 553217a..7e8be7e 100644
--- a/playground/components/toast/ActionButtons.vue
+++ b/playground/components/toast/ActionButtons.vue
@@ -4,13 +4,13 @@
   >
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300 tw-accessibility"
     >
       Dismiss
     </button>
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300 tw-accessibility"
     >
       Accept
     </button>
diff --git a/playground/components/toast/IconSoloDanger.vue b/playground/components/toast/IconSoloDanger.vue
index d35fcc8..cc15a44 100644
--- a/playground/components/toast/IconSoloDanger.vue
+++ b/playground/components/toast/IconSoloDanger.vue
@@ -26,7 +26,7 @@
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-700 dark:text-muted-400"
+      class="h-9 w-9 flex items-center justify-center rounded-full ml-auto text-muted-700 dark:text-muted-400 hover:bg-muted-100 dark:hover:bg-muted-700 transition-colors duration-300 tw-accessibility"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path
diff --git a/playground/components/toast/UserReplyClose.vue b/playground/components/toast/UserReplyClose.vue
index 82082c1..3a3b17d 100644
--- a/playground/components/toast/UserReplyClose.vue
+++ b/playground/components/toast/UserReplyClose.vue
@@ -20,7 +20,7 @@
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-400"
+      class="h-9 w-9 flex items-center justify-center rounded-full ml-auto text-muted-700 dark:text-muted-400 hover:bg-muted-100 dark:hover:bg-muted-700 transition-colors duration-300 tw-accessibility"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 7dae986..dbfb8a7 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -3,6 +3,7 @@ import NinjaNuxtToaster from '..'
 
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss', NinjaNuxtToaster],
+  css: ['@/assets/css/main.css'],
   app: {
     head: {
       link: [

From 12945fa8c6df30751e07d703327f40d65fee2abd Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Tue, 27 Sep 2022 22:13:19 +0100
Subject: [PATCH 05/16] feat: add installation instructions

---
 package.json                                 |   4 +
 playground/components/Section.vue            |   9 ++
 playground/components/content/BasicUsage.vue |  41 +++++++
 playground/components/content/GetStarted.vue | 114 ++++++++++++++++++
 playground/components/content/Setup.vue      |  37 ++++++
 playground/components/doc/Code.vue           | 100 ++++++++++++++++
 playground/components/shims.d.ts             |   1 +
 playground/pages/index.vue                   | 116 ++++++++++++-------
 pnpm-lock.yaml                               |  25 ++++
 9 files changed, 403 insertions(+), 44 deletions(-)
 create mode 100644 playground/components/Section.vue
 create mode 100644 playground/components/content/BasicUsage.vue
 create mode 100644 playground/components/content/GetStarted.vue
 create mode 100644 playground/components/content/Setup.vue
 create mode 100644 playground/components/doc/Code.vue
 create mode 100644 playground/components/shims.d.ts

diff --git a/package.json b/package.json
index 5744edc..63cb2ff 100644
--- a/package.json
+++ b/package.json
@@ -33,12 +33,16 @@
     "@nuxt/module-builder": "latest",
     "@nuxt/schema": "^3.0.0-rc.11",
     "@nuxtjs/tailwindcss": "^5.3.3",
+    "@types/prismjs": "^1.26.0",
     "eslint": "8.24.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier-vue": "4.2.0",
     "eslint-plugin-tailwindcss": "3.6.1",
     "eslint-plugin-vuejs-accessibility": "1.2.0",
     "nuxt": "^3.0.0-rc.11",
+    "prism-theme-vars": "0.2.3",
+    "prismjs": "1.28.0",
+    "vue-prism-component": "2.0.0",
     "standard-version": "^9.5.0"
   }
 }
diff --git a/playground/components/Section.vue b/playground/components/Section.vue
new file mode 100644
index 0000000..59106cb
--- /dev/null
+++ b/playground/components/Section.vue
@@ -0,0 +1,9 @@
+<template>
+  <section
+    class="w-full py-16 px-4 bg-muted-100 dark:bg-muted-900 overflow-hidden"
+  >
+    <div class="w-full max-w-7xl mx-auto">
+      <slot></slot>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/BasicUsage.vue b/playground/components/content/BasicUsage.vue
new file mode 100644
index 0000000..d80f520
--- /dev/null
+++ b/playground/components/content/BasicUsage.vue
@@ -0,0 +1,41 @@
+<script setup>
+const demoCode3 = `
+// get the ninjaToaster instance
+const { $nt } = useNuxtApp()
+
+// show a toast with a string as content
+$nt.show('Hello world')
+  `
+</script>
+
+<template>
+  <Section>
+    <div class="grid grid-cols-12 gap-8">
+      <div class="col-span-full md:col-span-5 md:col-start-2">
+        <div class="flex flex-col justify-center h-full w-full max-w-md">
+          <h2
+            class="font-extrabold text-4xl text-muted-800 dark:text-white mb-2"
+          >
+            Show a Toast
+          </h2>
+          <p
+            class="text-base text-muted-500 pb-4 border-b border-muted-200 dark:border-muted-800"
+          >
+            Once you've added <code>@cssninja/nuxt-toaster</code> to your
+            project, you can immediately start showing toasts. Please note that
+            toasts will be unstyled. Jump to the
+            <NuxtLink to="/" class="font-medium text-primary-500"
+              >theming section</NuxtLink
+            >
+            for more details.
+          </p>
+        </div>
+      </div>
+      <div class="col-span-full md:col-span-5">
+        <div class="p-6 rounded-xl bg-muted-200 dark:bg-muted-1000">
+          <DocCode :code="demoCode3" />
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/GetStarted.vue b/playground/components/content/GetStarted.vue
new file mode 100644
index 0000000..9ba69dc
--- /dev/null
+++ b/playground/components/content/GetStarted.vue
@@ -0,0 +1,114 @@
+<script setup>
+const demoCode = `
+# Using pnpm
+pnpm add -D @cssninja/nuxt-toaster
+
+# Using yarn
+pnpm add -D @cssninja/nuxt-toaster
+
+# Using npm
+npm install --save-dev @cssninja/nuxt-toaster
+`
+</script>
+
+<template>
+  <Section>
+    <div class="grid grid-cols-12 gap-8">
+      <div class="col-span-full md:col-span-5 md:col-start-2">
+        <div class="flex flex-col justify-center h-full w-full max-w-md">
+          <h2
+            class="font-extrabold text-4xl text-muted-800 dark:text-white mb-2"
+          >
+            Get Started
+          </h2>
+          <p
+            class="text-base text-muted-500 pb-4 border-b border-muted-200 dark:border-muted-800"
+          >
+            Nuxt Toaster is a simple toaster (notifier) handler for Nuxt.js,
+            served as a nuxt module.Start by adding
+            <code>@cssninja/nuxt-toaster</code> as a dependency of your project.
+          </p>
+          <ul class="mt-4 space-y-2">
+            <li>
+              <div class="flex items-center gap-3">
+                <svg class="w-8 h-8 text-emerald-500" viewBox="0 0 256 256">
+                  <circle
+                    cx="128"
+                    cy="128"
+                    r="96"
+                    fill="currentColor"
+                    opacity=".2"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"
+                  />
+                </svg>
+                <span class="text-sm text-muted-500 dark:text-muted-400"
+                  >Unstyled by default</span
+                >
+              </div>
+            </li>
+            <li>
+              <div class="flex items-center gap-3">
+                <svg class="w-8 h-8 text-emerald-500" viewBox="0 0 256 256">
+                  <circle
+                    cx="128"
+                    cy="128"
+                    r="96"
+                    fill="currentColor"
+                    opacity=".2"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"
+                  />
+                </svg>
+                <span class="text-sm text-muted-500 dark:text-muted-400"
+                  >Render any component as a toast</span
+                >
+              </div>
+            </li>
+            <li>
+              <div class="flex items-center gap-3">
+                <svg class="w-8 h-8 text-emerald-500" viewBox="0 0 256 256">
+                  <circle
+                    cx="128"
+                    cy="128"
+                    r="96"
+                    fill="currentColor"
+                    opacity=".2"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"
+                  />
+                </svg>
+                <span class="text-sm text-muted-500 dark:text-muted-400"
+                  >Fully customizable</span
+                >
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="col-span-full md:col-span-5">
+        <div class="p-6 rounded-xl bg-muted-200 dark:bg-muted-1000">
+          <DocCode :code="demoCode" />
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/Setup.vue b/playground/components/content/Setup.vue
new file mode 100644
index 0000000..544a18c
--- /dev/null
+++ b/playground/components/content/Setup.vue
@@ -0,0 +1,37 @@
+<script setup>
+const demoCode2 = `
+export default defineNuxtConfig({
+  modules: [
+    '@cssninja/nuxt-toaster'
+  ]
+})
+`
+</script>
+
+<template>
+  <Section>
+    <div class="grid grid-cols-12 gap-8">
+      <div class="col-span-full md:col-start-2 md:col-end-7">
+        <div class="p-6 rounded-xl bg-muted-200 dark:bg-muted-1000">
+          <DocCode :code="demoCode2" file="nuxt.config.ts" />
+        </div>
+      </div>
+      <div class="col-span-full md:col-span-5">
+        <div class="flex flex-col justify-center h-full w-full max-w-md">
+          <h2
+            class="font-extrabold text-4xl text-muted-800 dark:text-white mb-2"
+          >
+            Setup module
+          </h2>
+          <p
+            class="text-base text-muted-500 pb-3 border-b border-muted-200 dark:border-muted-800"
+          >
+            To setup the module in your Nuxt project, add
+            <code>@cssninja/nuxt-toaster</code> to the modules section of your
+            <code>nuxt.config.js</code> or <code>nuxt.config.ts</code> file.
+          </p>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/doc/Code.vue b/playground/components/doc/Code.vue
new file mode 100644
index 0000000..9c2871f
--- /dev/null
+++ b/playground/components/doc/Code.vue
@@ -0,0 +1,100 @@
+<script lang="ts">
+import 'prismjs'
+import 'prism-theme-vars/base.css'
+</script>
+  
+  <script setup lang="ts">
+import Prism from 'vue-prism-component'
+
+export interface DocCodeProps {
+  code: string
+  language?: string
+  file?: string
+}
+
+const props = withDefaults(defineProps<DocCodeProps>(), {
+  language: 'javascript',
+  file: undefined,
+})
+</script>
+  
+  <template>
+  <div
+    class="w-full rounded-xl border border-muted-200 bg-white transition-colors ease-linear dark:border-muted-700 dark:bg-muted-800"
+  >
+    <div
+      class="flex h-14 w-full items-center justify-between rounded-t-lg px-6"
+    >
+      <div class="flex items-center gap-2">
+        <span
+          class="h-3 w-3 rounded-full border-2 border-transparent bg-red-400 dark:border-red-400 dark:bg-transparent"
+        ></span>
+        <span
+          class="h-3 w-3 rounded-full border-2 border-transparent bg-yellow-400 dark:border-yellow-400 dark:bg-transparent"
+        ></span>
+        <span
+          class="h-3 w-3 rounded-full border-2 border-transparent bg-green-400 dark:border-green-400 dark:bg-transparent"
+        ></span>
+      </div>
+      <span v-if="props.file" class="block ml-auto text-sm text-muted-400">{{
+        props.file
+      }}</span>
+    </div>
+    <div class="-mt-6 w-full rounded-b-lg border-t-0 px-4 pb-4">
+      <Prism :language="props.language">{{ props.code }}</Prism>
+    </div>
+  </div>
+</template>
+  
+  <style>
+:root {
+  --prism-foreground: #393a34;
+  --prism-background: #f8f8f8;
+  --prism-comment: #758575;
+  --prism-namespace: #444;
+  --prism-string: #bc8671;
+  --prism-punctuation: #80817d;
+  --prism-literal: #36acaa;
+  --prism-keyword: #248459;
+  --prism-function: #849145;
+  --prism-deleted: #9a050f;
+  --prism-class: #2b91af;
+  --prism-builtin: #8b5cf6;
+  --prism-property: #d1368b;
+  --prism-regex: #ad502b;
+  --prism-selector: #4e2196;
+}
+
+.dark {
+  --prism-foreground: #d4d4d4;
+  --prism-background: #090f17;
+  --prism-namespace: #aaa;
+  --prism-comment: #758575;
+  --prism-string: #ce9178;
+  --prism-punctuation: #8f9fbf;
+  --prism-literal: #36acaa;
+  --prism-keyword: #38a776;
+  --prism-function: #dcdcaa;
+  --prism-deleted: #9a050f;
+  --prism-class: #4ec9b0;
+  --prism-builtin: #8b5cf6;
+  --prism-property: #d1368b;
+  --prism-regex: #ad502b;
+  --prism-selector: #3a96a1;
+}
+</style>
+  
+  <style scoped>
+:deep(pre[class*='language-']) {
+  background: none !important;
+}
+
+:deep(code[class*='language-']) {
+  background: none !important;
+}
+
+:deep(pre.language-javascript) {
+  color: #7eb6f6 !important;
+}
+</style>
+  
\ No newline at end of file
diff --git a/playground/components/shims.d.ts b/playground/components/shims.d.ts
new file mode 100644
index 0000000..572d476
--- /dev/null
+++ b/playground/components/shims.d.ts
@@ -0,0 +1 @@
+declare module 'vue-prism-component'
\ No newline at end of file
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index cddaa7d..ec5d91b 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -17,10 +17,10 @@ function showCustomToast() {
   $nt.show({
     content: () =>
       h(CustomToast, {
-        message: `Hello ${i} from Nuxt module playground!`
+        message: `Hello ${i} from Nuxt module playground!`,
       }),
     transition: {
-      name: 'fadeOut'
+      name: 'fadeOut',
     },
     maxToasts: 5,
     theme: {
@@ -33,10 +33,10 @@ function showCustomToast() {
         'flex',
         'flex-col-reverse',
         'items-start',
-        'gap-2'
+        'gap-2',
       ].join(' '),
-      wrapperClass: 'pointer-events-auto cursor-pointer'
-    }
+      wrapperClass: 'pointer-events-auto cursor-pointer',
+    },
   })
 }
 
@@ -45,7 +45,7 @@ async function showAdvancedToast() {
   const toast = await $nt.show({
     content: () =>
       h(AdvancedToast, {
-        message: `Hello ${i} from Nuxt module playground!`
+        message: `Hello ${i} from Nuxt module playground!`,
       }),
     dismissible: false,
     maxToasts: 1,
@@ -59,7 +59,7 @@ async function showAdvancedToast() {
         'flex',
         'flex-col',
         'items-end',
-        'gap-2'
+        'gap-2',
       ].join(' '),
       wrapperClass: [
         'pointer-events-auto',
@@ -69,8 +69,8 @@ async function showAdvancedToast() {
         'focus:outline',
         'focus:outline-2',
         'focus-within:outline',
-        'focus-within:outline-2'
-      ].join(' ')
+        'focus-within:outline-2',
+      ].join(' '),
     },
     transition: {
       enterActiveClass: 'transition duration-300 ease-out',
@@ -78,8 +78,8 @@ async function showAdvancedToast() {
       enterToClass: 'transform translate-x-0 opacity-100',
       leaveActiveClass: 'transition duration-300 ease-in',
       leaveFromClass: 'transform translate-x-0 opacity-100',
-      leaveToClass: 'transform translate-x-full opacity-0'
-    }
+      leaveToClass: 'transform translate-x-full opacity-0',
+    },
   })
 
   toast.el.focus()
@@ -90,44 +90,72 @@ function clearAllToast() {
 function clearTopLeftToast() {
   $nt.clear('nt-container-top-left')
 }
+
+const demoCode = `
+# Using pnpm
+pnpm add -D @cssninja/nuxt-toaster
+
+# Using yarn
+pnpm add -D @cssninja/nuxt-toaster
+
+# Using npm
+npm install --save-dev @cssninja/nuxt-toaster
+`
+
+const demoCode2 = `
+export default defineNuxtConfig({
+  modules: [
+    '@cssninja/nuxt-toaster'
+  ]
+})
+`
 </script>
 
 <template>
   <div>
     <Hero />
-    <div class="mx-auto w-full max-w-7xl">
-      <p>Nuxt module playground!</p>
-      <button
-        class="m-1 rounded border border-slate-200 px-2 py-1"
-        @click="showBasicToast"
-      >
-        show basic toast
-      </button>
-      <button
-        class="m-1 rounded border border-slate-200 px-2 py-1"
-        @click="showCustomToast"
-      >
-        show custom toast
-      </button>
-      <button
-        class="m-1 rounded border border-slate-200 px-2 py-1"
-        @click="showAdvancedToast"
-      >
-        show advanced toast
-      </button>
-      <button
-        class="m-1 rounded border border-slate-200 px-2 py-1"
-        @click="clearTopLeftToast"
-      >
-        clear advanced toasts
-      </button>
-      <button
-        class="m-1 rounded border border-slate-200 px-2 py-1"
-        @click="clearAllToast"
-      >
-        clear all toast
-      </button>
-    </div>
+
+    <ContentGetStarted />
+
+    <ContentSetup />
+
+    <ContentBasicUsage />
+
+    <Section>
+      <div class="mx-auto w-full max-w-7xl">
+        <p>Nuxt module playground!</p>
+        <button
+          class="m-1 rounded border border-slate-200 px-2 py-1"
+          @click="showBasicToast"
+        >
+          show basic toast
+        </button>
+        <button
+          class="m-1 rounded border border-slate-200 px-2 py-1"
+          @click="showCustomToast"
+        >
+          show custom toast
+        </button>
+        <button
+          class="m-1 rounded border border-slate-200 px-2 py-1"
+          @click="showAdvancedToast"
+        >
+          show advanced toast
+        </button>
+        <button
+          class="m-1 rounded border border-slate-200 px-2 py-1"
+          @click="clearTopLeftToast"
+        >
+          clear advanced toasts
+        </button>
+        <button
+          class="m-1 rounded border border-slate-200 px-2 py-1"
+          @click="clearAllToast"
+        >
+          clear all toast
+        </button>
+      </div>
+    </Section>
   </div>
 </template>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 404ea6d..b48b6b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ specifiers:
   '@nuxt/module-builder': latest
   '@nuxt/schema': ^3.0.0-rc.11
   '@nuxtjs/tailwindcss': ^5.3.3
+  '@types/prismjs': ^1.26.0
   '@vueuse/core': ^9.2.0
   defu: ^6.1.0
   eslint: 8.24.0
@@ -14,7 +15,10 @@ specifiers:
   eslint-plugin-tailwindcss: 3.6.1
   eslint-plugin-vuejs-accessibility: 1.2.0
   nuxt: ^3.0.0-rc.11
+  prism-theme-vars: 0.2.3
+  prismjs: 1.28.0
   standard-version: ^9.5.0
+  vue-prism-component: 2.0.0
 
 dependencies:
   '@nuxt/kit': 3.0.0-rc.11
@@ -26,13 +30,17 @@ devDependencies:
   '@nuxt/module-builder': 0.1.7
   '@nuxt/schema': 3.0.0-rc.11
   '@nuxtjs/tailwindcss': 5.3.3
+  '@types/prismjs': 1.26.0
   eslint: 8.24.0
   eslint-config-prettier: 8.5.0_eslint@8.24.0
   eslint-plugin-prettier-vue: 4.2.0
   eslint-plugin-tailwindcss: 3.6.1
   eslint-plugin-vuejs-accessibility: 1.2.0_eslint@8.24.0
   nuxt: 3.0.0-rc.11_eslint@8.24.0
+  prism-theme-vars: 0.2.3
+  prismjs: 1.28.0
   standard-version: 9.5.0
+  vue-prism-component: 2.0.0
 
 packages:
 
@@ -1025,6 +1033,10 @@ packages:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true
 
+  /@types/prismjs/1.26.0:
+    resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
+    dev: true
+
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
@@ -6347,6 +6359,15 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: true
 
+  /prism-theme-vars/0.2.3:
+    resolution: {integrity: sha512-lpRg8GWfxu38m4rZwjrvOxeHlmL4tERhe9sTjrC47HMu6uCEch3bLUQVNlISoEq9Z24g5Xm+B7AKdyiKSevktg==}
+    dev: true
+
+  /prismjs/1.28.0:
+    resolution: {integrity: sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -7810,6 +7831,10 @@ packages:
       - supports-color
     dev: true
 
+  /vue-prism-component/2.0.0:
+    resolution: {integrity: sha512-1ofrL+GCZOv4HqtX5W3EgkhSAgadSeuD8FDTXbwhLy8kS+28RCR8t2S5VTeM9U/peAaXLBpSgRt3J25ao8KTeg==}
+    dev: true
+
   /vue-router/4.1.5_vue@3.2.39:
     resolution: {integrity: sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==}
     peerDependencies:

From 641dda3cd740c36f868e4cb45cf269a78138a111 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 28 Sep 2022 13:01:49 +0100
Subject: [PATCH 06/16] feat: add CSS example, add philosophy

---
 playground/assets/css/main.css                |   1 +
 playground/assets/css/modules/nt.css          | 193 +++++++++
 playground/assets/examples/index.ts           |  33 ++
 playground/components/Hero.vue                |   5 +-
 playground/components/Section.vue             |   2 +-
 playground/components/content/Anatomy.vue     | 131 ++++++
 .../components/content/ExamplePlain.vue       | 373 ++++++++++++++++++
 playground/components/content/GetStarted.vue  |   2 +-
 playground/components/doc/Code.vue            |   2 +-
 playground/components/mockup/Basic.vue        |  98 +++++
 playground/pages/index.vue                    |   4 +
 11 files changed, 839 insertions(+), 5 deletions(-)
 create mode 100644 playground/assets/css/modules/nt.css
 create mode 100644 playground/assets/examples/index.ts
 create mode 100644 playground/components/content/Anatomy.vue
 create mode 100644 playground/components/content/ExamplePlain.vue
 create mode 100644 playground/components/mockup/Basic.vue

diff --git a/playground/assets/css/main.css b/playground/assets/css/main.css
index deaa318..95e9847 100644
--- a/playground/assets/css/main.css
+++ b/playground/assets/css/main.css
@@ -1,4 +1,5 @@
 @import './modules/accessibility.css';
+@import './modules/nt.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/playground/assets/css/modules/nt.css b/playground/assets/css/modules/nt.css
new file mode 100644
index 0000000..949870b
--- /dev/null
+++ b/playground/assets/css/modules/nt.css
@@ -0,0 +1,193 @@
+/* ==========================================================================
+Variables
+========================================================================== */
+
+:root {
+  --nt-bg: #fff;
+  --nt-color: #1f2630;
+  --nt-bg-success: #18c78a;
+  --nt-color-success: #fff;
+  --nt-bg-info: #1f94ed;
+  --nt-color-info: #fff;
+  --nt-bg-warning: #edac1f;
+  --nt-color-warning: #fff;
+  --nt-bg-danger: #ed1f4c;
+  --nt-color-danger: #fff;
+  --nt-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+}
+
+/* ==========================================================================
+Base
+========================================================================== */
+
+#nt-container {
+  /* make container fit the screen */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  z-index: 100;
+  pointer-events: none;
+
+  /* position the toasts using flexbox */
+  display: flex;
+
+  /**
+   * position all toasts in bottom of the screen 
+   * - use "flex-direction: column;" to position in top screen
+   */
+  flex-direction: column-reverse;
+
+  /**
+   * align all toasts to the center
+   * - use "align-items: start" to aling to the left
+   * - use "align-items: end" to aling to the right
+   */
+  align-items: center;
+
+  /* add some space between toasts and screen */
+  padding: 2rem;
+  gap: 1rem;
+}
+
+#nt-container [role='alert'] {
+  /* allow toasts to be interactive */
+  pointer-events: auto;
+
+  /* add styles to toasts */
+  font-size: 0.9rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--nt-bg);
+  box-shadow: var(--nt-shadow);
+  cursor: pointer;
+}
+
+/* ==========================================================================
+Colors
+========================================================================== */
+
+#nt-container .nt-success {
+  background-color: var(--nt-bg-success);
+  color: var(--nt-color-success);
+}
+
+#nt-container .nt-info {
+  background-color: var(--nt-bg-info);
+  color: var(--nt-color-info);
+}
+
+#nt-container .nt-warning {
+  background-color: var(--nt-bg-warning);
+  color: var(--nt-color-warning);
+}
+
+#nt-container .nt-danger {
+  background-color: var(--nt-bg-danger);
+  color: var(--nt-color-danger);
+}
+
+/* ==========================================================================
+Position
+========================================================================== */
+
+/* Top right position */
+#nt-container.nt-top-right {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+/* Top center position */
+#nt-container.nt-top-center {
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Top left position */
+#nt-container.nt-top-left {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* Bottom right position */
+#nt-container.nt-bottom-right {
+  align-items: flex-end;
+}
+
+/* Bottom center position */
+#nt-container.nt-bottom-center {
+  align-items: center;
+}
+
+/* Bottom left position */
+#nt-container.nt-bottom-left {
+  align-items: flex-start;
+}
+
+/* ==========================================================================
+Transitions
+========================================================================== */
+
+.nt-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+#nt-container.nt-bottom-right .nt-enter-from,
+#nt-container.nt-bottom-left .nt-enter-from,
+#nt-container.nt-bottom-center .nt-enter-from {
+  transform: translateY(0.5rem);
+  opacity: 0;
+}
+
+#nt-container.nt-top-right .nt-enter-from,
+#nt-container.nt-top-left .nt-enter-from,
+#nt-container.nt-top-center .nt-enter-from {
+  transform: translateY(-0.5rem);
+  opacity: 0;
+}
+
+.nt-enter-to {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.nt-leave-active {
+  transition: all 0.3s ease-in;
+}
+
+.nt-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+#nt-container.nt-bottom-right .nt-leave-to,
+#nt-container.nt-bottom-left .nt-leave-to,
+#nt-container.nt-bottom-center .nt-enter-to {
+  transform: translateY(0.5rem);
+  opacity: 0;
+}
+
+#nt-container.nt-top-right .nt-leave-to,
+#nt-container.nt-top-left .nt-leave-to,
+#nt-container.nt-top-center .nt-enter-to {
+  transform: translateY(-0.5rem);
+  opacity: 0;
+}
+
+/* ==========================================================================
+Responsive
+========================================================================== */
+
+@media (max-width: 767px) {
+  #nt-container {
+    /* fit toasts to screen on mobile */
+    padding: 0;
+  }
+
+  #nt-container [role='alert'] {
+    width: 100%;
+    border-radius: 0;
+  }
+}
diff --git a/playground/assets/examples/index.ts b/playground/assets/examples/index.ts
new file mode 100644
index 0000000..e598aa5
--- /dev/null
+++ b/playground/assets/examples/index.ts
@@ -0,0 +1,33 @@
+export const plainExample = `
+<script setup>
+@import '@/assets/modules/nt.css'
+</script>
+
+<script setup>
+  import { useNuxtApp } from '#app'
+
+  const { $nt } = useNuxtApp()
+  let i = 0
+
+  function showBasicToast() {
+    i++
+    $nt.show({
+      content: 'Clarke was successfully invited!',
+      duration: 2500,
+      theme: {
+        containerId: 'nt-container',
+        containerClass: ['nt-top-right'].join(' '),
+        wrapperClass: 'nt-warning',
+      },
+      transition: {
+        enterActiveClass: 'nt-enter-active',
+        enterFromClass: 'nt-enter-from',
+        enterToClass: 'nt-enter-to',
+        leaveActiveClass: 'nt-leave-active',
+        leaveFromClass: 'nt-leave-from',
+        leaveToClass: 'nt-leave-to',
+      },
+    })
+  }
+</script>
+`
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
index d1d2a2c..3955a07 100644
--- a/playground/components/Hero.vue
+++ b/playground/components/Hero.vue
@@ -42,8 +42,9 @@
       <div class="w-full flex items-center justify-center grow">
         <div class="w-full text-center">
           <div class="w-full max-w-md mx-auto mb-4">
-            <p class="uppercase font-semibold text-xs text-emerald-500 mb-4">
-              <span class="py-2 px-3 border-2 border-emerald-500 rounded-lg"
+            <p class="uppercase font-semibold text-xs text-primary-500 mb-2">
+              <span
+                class="inline-block py-2 px-3 border-2 border-primary-500 rounded-lg scale-90"
                 >Nuxt 3 Ready</span
               >
             </p>
diff --git a/playground/components/Section.vue b/playground/components/Section.vue
index 59106cb..73cd210 100644
--- a/playground/components/Section.vue
+++ b/playground/components/Section.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="w-full py-16 px-4 bg-muted-100 dark:bg-muted-900 overflow-hidden"
+    class="w-full py-16 px-4 lg:px-8 bg-muted-100 dark:bg-muted-900 overflow-hidden"
   >
     <div class="w-full max-w-7xl mx-auto">
       <slot></slot>
diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
new file mode 100644
index 0000000..db4cac0
--- /dev/null
+++ b/playground/components/content/Anatomy.vue
@@ -0,0 +1,131 @@
+<template>
+  <Section>
+    <hr class="mb-10 pt-10 border-t border-muted-200 dark:border-muted-800" />
+    <div class="w-full max-w-md mx-auto text-center mb-10">
+      <p class="uppercase font-semibold text-xs text-primary-500 mb-2">
+        <span
+          class="inline-block py-2 px-3 border-2 border-primary-500 rounded-lg scale-90"
+          >Philosophy</span
+        >
+      </p>
+      <h2 class="font-extrabold text-5xl text-muted-800 dark:text-white">
+        Headless Toasts
+      </h2>
+    </div>
+
+    <div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto mb-6">
+      <div>
+        <p class="text-muted-500 pb-3">
+          With the rising of abstracted UI libraries like
+          <a href="#" class="font-medium text-primary-500">Tailwind CSS</a>, a
+          lot of developers realised they don't want to be forced in some UI
+          choices anymore. Nuxt Toaster does exactly that, it ships unstyled and
+          without a UI.
+        </p>
+      </div>
+      <div>
+        <p class="text-muted-500 pb-3">
+          This behavior allows any developer to create his own set of toasts
+          without having to look the same from a project to another. Nuxt
+          Toaster provides
+          <a href="#" class="font-medium text-primary-500">Theming options</a>
+          as well as Tailwind and plain CSS based
+          <a href="#" class="font-medium text-primary-500">examples</a>.
+        </p>
+      </div>
+    </div>
+
+    <div class="relative w-full max-w-3xl mx-auto">
+      <div
+        class="group cursor-pointer relative w-full h-[380px] xs:h-[300px] flex items-center justify-center mx-auto"
+      >
+        <div
+          class="absolute top-1/2 inset-x-0 -translate-y-1/2 w-[380px] h-[380px] xs:w-[300px] xs:h-[300px] mx-auto grid grid-cols-12 scale-90"
+        >
+          <div
+            v-for="index in 144"
+            :key="index"
+            class="border border-muted-200 dark:border-muted-800"
+            :class="[
+              //index <= 12 && 'border-t-0',
+              //index >= 133 && 'border-b-0',
+              //index === 0 && '!border-l-0',
+            ]"
+          ></div>
+        </div>
+
+        <!-- Toast -->
+        <div
+          class="relative w-full max-w-md flex items-center shadow-2xl shadow-muted-400/10 dark:shadow-muted-800/10 z-10 xs:scale-90"
+        >
+          <!-- Toast icon -->
+          <div
+            class="relative h-24 xs:h-20 w-24 flex items-center justify-center rounded-l-xl text-emerald-500 bg-emerald-100 dark:text-white dark:bg-emerald-500 group-hover:-translate-x-4 transition-transform duration-300"
+          >
+            <svg class="w-8 h-8" viewBox="0 0 256 172">
+              <path
+                fill="#80EEC0"
+                d="M112.973 9.25c-7.172-12.333-25.104-12.333-32.277 0L2.524 143.66c-7.172 12.333 1.794 27.749 16.14 27.749h61.024c-6.13-5.357-8.4-14.625-3.76-22.576L135.13 47.348L112.973 9.25Z"
+              />
+              <path
+                fill="#00DC82"
+                d="M162.505 38.733c5.936-10.09 20.776-10.09 26.712 0l64.694 109.971c5.936 10.091-1.484 22.705-13.357 22.705H111.167c-11.872 0-19.292-12.614-13.356-22.705l64.694-109.971Z"
+              />
+            </svg>
+            <!-- Legend -->
+            <div class="absolute -top-24 inset-x-0 mx-auto text-center">
+              <span
+                class="text-muted-500 dark:text-muted-400 opacity-0 group-hover:opacity-100 after:content-[''] after:absolute after:top-8 after:inset-x-0 after:mx-auto after:h-0 group-hover:after:h-12 after:w-px after:pr-1 after:border-l-2 after:border-muted-300 dark:after:border-muted-700 transition-all duration-300"
+                >Toast icon</span
+              >
+            </div>
+          </div>
+          <!-- Toast content -->
+          <div
+            class="relative h-24 xs:h-20 flex items-center px-6 bg-white dark:bg-muted-800"
+          >
+            <span class="text-lg xs:text-sm text-muted-600 dark:text-muted-400"
+              >Nuxt has been installed!</span
+            >
+            <!-- Legend -->
+            <div class="absolute -top-24 inset-x-0 mx-auto text-center">
+              <span
+                class="text-muted-500 dark:text-muted-400 opacity-0 group-hover:opacity-100 after:content-[''] after:absolute after:top-8 after:inset-x-0 after:mx-auto after:h-0 group-hover:after:h-12 after:w-px after:pr-1 after:border-l-2 after:border-muted-300 dark:after:border-muted-700 transition-all duration-300"
+                >Toast content</span
+              >
+            </div>
+          </div>
+          <!-- Toast close -->
+          <div
+            class="relative h-24 xs:h-20 flex items-center justify-center rounded-r-xl bg-slate-200 dark:bg-muted-700 group-hover:translate-x-4 transition-transform duration-300"
+          >
+            <button
+              type="button"
+              class="h-12 w-12 flex items-center justify-center rounded-full mx-4 text-muted-700 dark:text-muted-400 hover:bg-slate-100 dark:hover:bg-muted-800 transition-colors duration-300 tw-accessibility"
+            >
+              <svg class="w-6 h-6" viewBox="0 0 24 24">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M18 6L6 18M6 6l12 12"
+                />
+              </svg>
+              <!-- Legend -->
+              <span
+                class="block absolute -top-24 inset-x-0 mx-auto text-center"
+              >
+                <span
+                  class="text-muted-500 dark:text-muted-400 opacity-0 group-hover:opacity-100 after:content-[''] after:absolute after:top-8 after:inset-x-0 after:mx-auto after:h-0 group-hover:after:h-12 after:w-px after:pr-1 after:border-l-2 after:border-muted-300 dark:after:border-muted-700 transition-all duration-300"
+                  >Close</span
+                >
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/ExamplePlain.vue b/playground/components/content/ExamplePlain.vue
new file mode 100644
index 0000000..8ab46b5
--- /dev/null
+++ b/playground/components/content/ExamplePlain.vue
@@ -0,0 +1,373 @@
+<script setup>
+import { plainExample } from '@/assets/examples'
+
+const activeTab = ref('tab-1')
+
+const positionY = ref('top')
+const positionX = ref('right')
+const color = ref('default')
+const message = ref('You invited Clarke!')
+const duration = 3000
+</script>
+  
+  <template>
+  <Section>
+    <div>
+      <hr class="mb-10 border-t border-muted-200 dark:border-muted-800" />
+      <div class="w-full max-w-xl mb-10 ptablet:text-center ptablet:mx-auto">
+        <!-- Icon -->
+        <div
+          class="w-20 h-20 flex items-center justify-center rounded-full mb-4 ptablet:mx-auto bg-white dark:bg-muted-1000 shadow-xl shadow-muted-400/10 dark:shadow-muted-800/10"
+        >
+          <div
+            class="w-16 h-16 flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500"
+          >
+            <svg class="w-6 h-6" viewBox="0 0 15 15">
+              <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                d="M.132.162A.5.5 0 0 1 .5 0h14a.5.5 0 0 1 .498.542l-1 11.916a.5.5 0 0 1-.34.432l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1-.34-.432L.002.542a.5.5 0 0 1 .13-.38ZM11 3H4v1h6v2H6v1h4v2.14l-2.5.833L5 9.14V8H4v1.86l3.5 1.167L11 9.86V3Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+        <!-- Title -->
+        <h2 class="font-extrabold text-5xl text-muted-800 dark:text-white mb-2">
+          Plain CSS example
+        </h2>
+        <p class="text-lg text-muted-500 pb-3">
+          Nuxt Toaster provides a basic CSS stylesheet that you can import in
+          your project if you need prebuilt styles. Hit the invite button below
+          to start popping toasts.
+        </p>
+      </div>
+      <div class="grid ltablet:grid-cols-12 lg:grid-cols-12 gap-8">
+        <div class="ltablet:col-span-6 lg:col-span-6">
+          <div class="flex flex-col justify-center items-center h-full w-full">
+            <MockupBasic
+              :position-y="positionY"
+              :position-x="positionX"
+              :color="color"
+              :message="message"
+              :duration="duration"
+            />
+          </div>
+        </div>
+        <div class="ltablet:col-span-6 lg:col-span-6">
+          <div
+            class="flex flex-col justify-center ptablet:items-center h-full w-full"
+          >
+            <div>
+              <!-- Tabs -->
+              <div
+                class="flex items-center justify-between overflow-hidden mb-6"
+              >
+                <div
+                  class="flex gap-x-6 grow font-sans border-b border-muted-200 dark:border-muted-800 xs:overflow-x-auto"
+                >
+                  <button
+                    type="button"
+                    class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+                    :class="
+                      activeTab === 'tab-1'
+                        ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                        : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+                    "
+                    @click="activeTab = 'tab-1'"
+                  >
+                    Customize
+                  </button>
+                  <button
+                    type="button"
+                    class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+                    :class="
+                      activeTab === 'tab-2'
+                        ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                        : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+                    "
+                    @click="activeTab = 'tab-2'"
+                  >
+                    Code sample
+                  </button>
+                </div>
+              </div>
+
+              <!-- Tab content 1 -->
+              <div v-if="activeTab === 'tab-1'">
+                <!-- Customize -->
+                <div class="w-full max-w-sm">
+                  <p class="text-sm text-muted-400 dark:text-muted-400 mb-4">
+                    Play with the available options to customize content,
+                    positionning, duration and toast colors.
+                  </p>
+                  <!-- Grid -->
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- Y Position -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Y Position
+                      </p>
+                      <div class="flex gap-2">
+                        <div class="relative">
+                          <input
+                            v-model="positionY"
+                            type="radio"
+                            name="y_position"
+                            value="top"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              positionY === 'top'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Top
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="positionY"
+                            type="radio"
+                            name="y_position"
+                            value="bottom"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              positionY === 'bottom'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Bottom
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- X Position -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <div class="space-y-2">
+                        <p class="text-sm text-muted-500 dark:text-muted-400">
+                          X Position
+                        </p>
+                        <div class="flex gap-2">
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="right"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'right'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 bg-white border-muted-200'
+                              "
+                            >
+                              Right
+                            </div>
+                          </div>
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="center"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'center'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 bg-white border-muted-200'
+                              "
+                            >
+                              Center
+                            </div>
+                          </div>
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="left"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'left'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 bg-white border-muted-200'
+                              "
+                            >
+                              Left
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- Colors -->
+                    <div class="col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Colors
+                      </p>
+                      <div class="flex gap-2">
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="default"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'default'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Default
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="success"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'success'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Success
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="info"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'info'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Info
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="warning"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'warning'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Warning
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="danger"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'danger'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 bg-white border-muted-200'
+                            "
+                          >
+                            Danger
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- Message -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Message
+                      </p>
+
+                      <div class="group relative">
+                        <input
+                          v-model="message"
+                          type="text"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-slate-600 border border-slate-300 focus:border-slate-300 focus:shadow-lg focus:shadow-gray-300/50 dark:focus:shadow-gray-800/50 placeholder:text-slate-300 dark:placeholder:text-slate-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:focus:border-slate-600 focus:ring-0 outline-transparent focus:outline-dashed focus:outline-gray-300 dark:focus:outline-gray-600 focus:outline-offset-2 transition-all duration-300"
+                          placeholder="ex: Hello World!"
+                        />
+                      </div>
+                    </div>
+                    <!-- Duration -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Duration (ms)
+                      </p>
+
+                      <div class="group relative">
+                        <input
+                          v-model="duration"
+                          type="number"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-slate-600 border border-slate-300 focus:border-slate-300 focus:shadow-lg focus:shadow-gray-300/50 dark:focus:shadow-gray-800/50 placeholder:text-slate-300 dark:placeholder:text-slate-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:focus:border-slate-600 focus:ring-0 outline-transparent focus:outline-dashed focus:outline-gray-300 dark:focus:outline-gray-600 focus:outline-offset-2 transition-all duration-300"
+                          placeholder="ex: 5000"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <p class="text-xs text-muted-400 dark:text-muted-400 mt-4">
+                    There are more options to customize, take look at the
+                    <a href="#" class="font-medium text-primary-500"
+                      >API docs</a
+                    >
+                    section.
+                  </p>
+                </div>
+              </div>
+
+              <!-- Tab content 2 -->
+              <div v-else-if="activeTab === 'tab-2'">
+                <DocCode :code="plainExample" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/GetStarted.vue b/playground/components/content/GetStarted.vue
index 9ba69dc..f6a6e12 100644
--- a/playground/components/content/GetStarted.vue
+++ b/playground/components/content/GetStarted.vue
@@ -13,7 +13,7 @@ npm install --save-dev @cssninja/nuxt-toaster
 
 <template>
   <Section>
-    <div class="grid grid-cols-12 gap-8">
+    <div class="grid grid-cols-12 gap-8 pt-10">
       <div class="col-span-full md:col-span-5 md:col-start-2">
         <div class="flex flex-col justify-center h-full w-full max-w-md">
           <h2
diff --git a/playground/components/doc/Code.vue b/playground/components/doc/Code.vue
index 9c2871f..eb5b388 100644
--- a/playground/components/doc/Code.vue
+++ b/playground/components/doc/Code.vue
@@ -3,7 +3,7 @@ import 'prismjs'
 import 'prism-theme-vars/base.css'
 </script>
   
-  <script setup lang="ts">
+<script setup lang="ts">
 import Prism from 'vue-prism-component'
 
 export interface DocCodeProps {
diff --git a/playground/components/mockup/Basic.vue b/playground/components/mockup/Basic.vue
new file mode 100644
index 0000000..e198584
--- /dev/null
+++ b/playground/components/mockup/Basic.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useNuxtApp } from '#app'
+
+export interface PlainProps {
+  positionY?: string
+  positionX?: string
+  color?: string
+  message?: string
+  duration?: number
+}
+
+const props = withDefaults(defineProps<PlainProps>(), {
+  positionY: 'top',
+  positionX: 'right',
+  color: 'default',
+  message: '',
+  duration: 5000,
+})
+
+const { $nt } = useNuxtApp()
+let i = 0
+
+function showBasicToast() {
+  i++
+  $nt.show({
+    content: `${props.message} (${i})`,
+    duration: props.duration,
+    theme: {
+      containerId: 'nt-container',
+      containerClass: [`nt-${props.positionY}-${props.positionX}`].join(' '),
+      wrapperClass: `nt-${props.color}`,
+    },
+    transition: {
+      enterActiveClass: 'nt-enter-active',
+      enterFromClass: 'nt-enter-from',
+      enterToClass: 'nt-enter-to',
+      leaveActiveClass: 'nt-leave-active',
+      leaveFromClass: 'nt-leave-from',
+      leaveToClass: 'nt-leave-to',
+    },
+  })
+}
+</script>
+
+<template>
+  <div
+    class="flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
+  >
+    <div
+      class="h-2/3 w-9/12 rounded-tl-lg border-t-2 border-l-2 border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-xl shadow-muted-400/10"
+    >
+      <div
+        class="flex h-12 w-full items-center gap-2 border-b-2 border-muted-200 dark:border-muted-800 p-4"
+      >
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+      </div>
+      <div>
+        <div
+          class="flex items-center gap-4 bg-muted-50 dark:bg-muted-800 px-6 py-10"
+        >
+          <div
+            class="relative inline-flex h-12 w-12 items-center justify-center rounded-full xs:hidden"
+          >
+            <img
+              src="https://media.cssninja.io/shuriken/avatars/3.svg"
+              class="max-w-full rounded-full object-cover shadow-sm dark:border-transparent"
+              alt="Avatar image"
+            />
+          </div>
+          <div>
+            <h4 class="font-medium text-muted-800 dark:text-muted-100">
+              Clarke D.
+            </h4>
+            <p class="text-sm xs:text-[0.7rem] text-muted-400">
+              Software Engineer
+            </p>
+          </div>
+          <div class="ml-auto">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center h-10 py-2 px-4 text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors duration-300"
+              @click="showBasicToast()"
+            >
+              Invite
+            </button>
+          </div>
+        </div>
+        <div class="py-8 pl-6 space-y-3">
+          <div class="h-3 w-10/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+          <div class="h-3 w-8/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+          <div class="h-3 w-9/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index ec5d91b..842d92e 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -121,6 +121,10 @@ export default defineNuxtConfig({
 
     <ContentBasicUsage />
 
+    <ContentAnatomy />
+
+    <ContentExamplePlain />
+
     <Section>
       <div class="mx-auto w-full max-w-7xl">
         <p>Nuxt module playground!</p>

From d636cd1f5a42138549818ebdcca5e304cd073664 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 28 Sep 2022 13:10:05 +0100
Subject: [PATCH 07/16] fix: dark mode colors

---
 .../components/content/ExamplePlain.vue       | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/playground/components/content/ExamplePlain.vue b/playground/components/content/ExamplePlain.vue
index 8ab46b5..1af329c 100644
--- a/playground/components/content/ExamplePlain.vue
+++ b/playground/components/content/ExamplePlain.vue
@@ -17,10 +17,10 @@ const duration = 3000
       <div class="w-full max-w-xl mb-10 ptablet:text-center ptablet:mx-auto">
         <!-- Icon -->
         <div
-          class="w-20 h-20 flex items-center justify-center rounded-full mb-4 ptablet:mx-auto bg-white dark:bg-muted-1000 shadow-xl shadow-muted-400/10 dark:shadow-muted-800/10"
+          class="w-20 h-20 flex items-center justify-center rounded-full mb-4 ptablet:mx-auto bg-white dark:bg-muted-800 shadow-xl shadow-muted-400/10 dark:shadow-muted-800/10"
         >
           <div
-            class="w-16 h-16 flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500"
+            class="w-16 h-16 flex items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-500 text-indigo-500 dark:text-white"
           >
             <svg class="w-6 h-6" viewBox="0 0 15 15">
               <path
@@ -36,7 +36,7 @@ const duration = 3000
         <h2 class="font-extrabold text-5xl text-muted-800 dark:text-white mb-2">
           Plain CSS example
         </h2>
-        <p class="text-lg text-muted-500 pb-3">
+        <p class="text-lg text-muted-500 dark:text-muted-400 pb-3">
           Nuxt Toaster provides a basic CSS stylesheet that you can import in
           your project if you need prebuilt styles. Hit the invite button below
           to start popping toasts.
@@ -122,7 +122,7 @@ const duration = 3000
                             :class="
                               positionY === 'top'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Top
@@ -141,7 +141,7 @@ const duration = 3000
                             :class="
                               positionY === 'bottom'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Bottom
@@ -169,7 +169,7 @@ const duration = 3000
                               :class="
                                 positionX === 'right'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                  : 'text-muted-500 bg-white border-muted-200'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
                               Right
@@ -188,7 +188,7 @@ const duration = 3000
                               :class="
                                 positionX === 'center'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                  : 'text-muted-500 bg-white border-muted-200'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
                               Center
@@ -207,7 +207,7 @@ const duration = 3000
                               :class="
                                 positionX === 'left'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                  : 'text-muted-500 bg-white border-muted-200'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
                               Left
@@ -235,7 +235,7 @@ const duration = 3000
                             :class="
                               color === 'default'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Default
@@ -254,7 +254,7 @@ const duration = 3000
                             :class="
                               color === 'success'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Success
@@ -273,7 +273,7 @@ const duration = 3000
                             :class="
                               color === 'info'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Info
@@ -292,7 +292,7 @@ const duration = 3000
                             :class="
                               color === 'warning'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Warning
@@ -311,7 +311,7 @@ const duration = 3000
                             :class="
                               color === 'danger'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
-                                : 'text-muted-500 bg-white border-muted-200'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                             "
                           >
                             Danger
@@ -329,7 +329,7 @@ const duration = 3000
                         <input
                           v-model="message"
                           type="text"
-                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-slate-600 border border-slate-300 focus:border-slate-300 focus:shadow-lg focus:shadow-gray-300/50 dark:focus:shadow-gray-800/50 placeholder:text-slate-300 dark:placeholder:text-slate-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:focus:border-slate-600 focus:ring-0 outline-transparent focus:outline-dashed focus:outline-gray-300 dark:focus:outline-gray-600 focus:outline-offset-2 transition-all duration-300"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-muted-600 border border-muted-300 focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50 dark:focus:shadow-muted-800/50 placeholder:text-muted-300 dark:placeholder:text-muted-500 dark:bg-muted-800 dark:text-muted-200 dark:border-muted-700 dark:focus:border-muted-700 transition-all duration-300 tw-accessibility"
                           placeholder="ex: Hello World!"
                         />
                       </div>
@@ -344,7 +344,7 @@ const duration = 3000
                         <input
                           v-model="duration"
                           type="number"
-                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-slate-600 border border-slate-300 focus:border-slate-300 focus:shadow-lg focus:shadow-gray-300/50 dark:focus:shadow-gray-800/50 placeholder:text-slate-300 dark:placeholder:text-slate-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:focus:border-slate-600 focus:ring-0 outline-transparent focus:outline-dashed focus:outline-gray-300 dark:focus:outline-gray-600 focus:outline-offset-2 transition-all duration-300"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-muted-600 border border-muted-300 focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50 dark:focus:shadow-muted-800/50 placeholder:text-muted-300 dark:placeholder:text-muted-500 dark:bg-muted-800 dark:text-muted-200 dark:border-muted-700 dark:focus:border-muted-700 transition-all duration-300 tw-accessibility"
                           placeholder="ex: 5000"
                         />
                       </div>

From e0f429a4548de0f82f573faf30eed0a2eed28cd3 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 28 Sep 2022 15:52:00 +0100
Subject: [PATCH 08/16] feat: add custom example

---
 playground/assets/examples/index.ts           |  49 ++++
 playground/components/content/Anatomy.vue     |   8 +-
 .../components/content/ExampleCustom.vue      | 269 ++++++++++++++++++
 .../components/content/ExamplePlain.vue       |   6 +-
 playground/components/doc/Code.vue            |  11 +-
 playground/components/mockup/Custom.vue       | 116 ++++++++
 playground/components/toast/Custom.vue        |  50 ++++
 playground/pages/index.vue                    |   2 +
 8 files changed, 506 insertions(+), 5 deletions(-)
 create mode 100644 playground/components/content/ExampleCustom.vue
 create mode 100644 playground/components/mockup/Custom.vue
 create mode 100644 playground/components/toast/Custom.vue

diff --git a/playground/assets/examples/index.ts b/playground/assets/examples/index.ts
index e598aa5..0b2953c 100644
--- a/playground/assets/examples/index.ts
+++ b/playground/assets/examples/index.ts
@@ -31,3 +31,52 @@ export const plainExample = `
   }
 </script>
 `
+
+export const customExample = `
+<script setup>
+  import { h } from 'vue'
+  import { useNuxtApp } from '#app'
+
+  const { $nt } = useNuxtApp()
+  let i = 0
+
+  function showCustomToast() {
+    i++
+    $nt.show({
+      content: () =>
+        h(ToastCustom, {
+          title: 'Hi there',
+          message: 'You just poked Anna!',
+        }),
+      duration: props.duration,
+      maxToasts: 5,
+      theme: {
+        containerId: 'nt-container-custom',
+        containerClass: [
+          'fixed',
+          'top-0',
+          'inset-0',
+          'h-full',
+          'w-full',
+          'pointer-events-none',
+          'p-4',
+          'flex',
+          'z-[100]',
+          'flex-col-reverse',
+          'items-end',
+          'gap-2',
+        ].join(' '),
+        wrapperClass: 'w-full md:auto pointer-events-auto cursor-pointer',
+      },
+      transition: {
+        enterActiveClass: 'transition-all duration-300 ease-out',
+        enterFromClass: 'transform translate-y-1 opacity-0',
+        enterToClass: 'transform translate-y-0 opacity-100',
+        leaveActiveClass: 'transition duration-300 ease-in',
+        leaveFromClass: 'transform translate-y-0 opacity-100',
+        leaveToClass: 'transform translate-y-1 opacity-0',
+      },
+    })
+  }
+</script>
+`
diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
index db4cac0..caf04ba 100644
--- a/playground/components/content/Anatomy.vue
+++ b/playground/components/content/Anatomy.vue
@@ -40,7 +40,7 @@
         class="group cursor-pointer relative w-full h-[380px] xs:h-[300px] flex items-center justify-center mx-auto"
       >
         <div
-          class="absolute top-1/2 inset-x-0 -translate-y-1/2 w-[380px] h-[380px] xs:w-[300px] xs:h-[300px] mx-auto grid grid-cols-12 scale-90"
+          class="absolute top-1/2 inset-x-0 -translate-y-1/2 w-[380px] h-[380px] xs:w-[300px] xs:h-[300px] mx-auto grid grid-cols-12 scale-90 z-10"
         >
           <div
             v-for="index in 144"
@@ -54,9 +54,13 @@
           ></div>
         </div>
 
+        <div
+          class="absolute top-1/2 inset-x-0 -translate-y-1/2 w-[380px] h-[380px] xs:w-[300px] xs:h-[300px] mx-auto border-2 border-muted-100 dark:border-muted-900 scale-90 z-20"
+        ></div>
+
         <!-- Toast -->
         <div
-          class="relative w-full max-w-md flex items-center shadow-2xl shadow-muted-400/10 dark:shadow-muted-800/10 z-10 xs:scale-90"
+          class="relative w-full max-w-md flex items-center shadow-2xl shadow-muted-400/10 dark:shadow-muted-800/10 z-30 xs:scale-90"
         >
           <!-- Toast icon -->
           <div
diff --git a/playground/components/content/ExampleCustom.vue b/playground/components/content/ExampleCustom.vue
new file mode 100644
index 0000000..073ee94
--- /dev/null
+++ b/playground/components/content/ExampleCustom.vue
@@ -0,0 +1,269 @@
+<script setup>
+import { customExample } from '@/assets/examples'
+
+const activeTab = ref('tab-1')
+
+const positionY = ref('top')
+const positionX = ref('right')
+const message = ref('You just poked Anna!')
+const duration = 3000
+</script>
+
+<template>
+  <Section>
+    <div>
+      <hr class="mb-10 border-t border-muted-200 dark:border-muted-800" />
+      <div
+        class="w-full max-w-xl mb-10 ptablet:text-center ptablet:mx-auto lg:pl-20"
+      >
+        <!-- Icon -->
+        <div
+          class="w-20 h-20 flex items-center justify-center rounded-full mb-4 ptablet:mx-auto bg-white dark:bg-muted-800 shadow-xl shadow-muted-400/10 dark:shadow-muted-800/10"
+        >
+          <div
+            class="w-16 h-16 flex items-center justify-center rounded-full bg-teal-100 dark:bg-teal-500 text-teal-500 dark:text-white"
+          >
+            <svg class="w-8 h-8" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M12 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.31.74 1.91 1.35c.98 1 2.09 2.15 4.59 2.15c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C15.61 7.15 14.5 6 12 6m-5 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.3.74 1.91 1.35C8.39 16.85 9.5 18 12 18c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C10.61 13.15 9.5 12 7 12Z"
+              />
+            </svg>
+          </div>
+        </div>
+        <!-- Title -->
+        <h2 class="font-extrabold text-5xl text-muted-800 dark:text-white mb-2">
+          Custom example
+        </h2>
+        <p class="text-lg text-muted-500 dark:text-muted-400 pb-3">
+          Nuxt Toaster can render other vue components as toasts. Create a
+          component, style it like you want and you're ready to pass it to Nuxt
+          toaster. The following example uses
+          <a href="#" class="font-medium text-primary-500">Tailwind CSS</a>.
+        </p>
+      </div>
+      <div class="grid ltablet:grid-cols-12 lg:grid-cols-12 gap-8">
+        <div class="ltablet:col-span-6 lg:col-span-6">
+          <div class="flex flex-col justify-center items-center h-full w-full">
+            <MockupCustom
+              :position-y="positionY"
+              :position-x="positionX"
+              :message="message"
+              :duration="duration"
+            />
+          </div>
+        </div>
+        <div class="ltablet:col-span-6 lg:col-span-6">
+          <div
+            class="flex flex-col justify-center ptablet:items-center h-full w-full"
+          >
+            <div>
+              <!-- Tabs -->
+              <div
+                class="flex items-center justify-between overflow-hidden mb-6"
+              >
+                <div
+                  class="flex gap-x-6 grow font-sans border-b border-muted-200 dark:border-muted-800 xs:overflow-x-auto"
+                >
+                  <button
+                    type="button"
+                    class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+                    :class="
+                      activeTab === 'tab-1'
+                        ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                        : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+                    "
+                    @click="activeTab = 'tab-1'"
+                  >
+                    Customize
+                  </button>
+                  <button
+                    type="button"
+                    class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+                    :class="
+                      activeTab === 'tab-2'
+                        ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                        : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+                    "
+                    @click="activeTab = 'tab-2'"
+                  >
+                    Code sample
+                  </button>
+                </div>
+              </div>
+
+              <!-- Tab content 1 -->
+              <div v-if="activeTab === 'tab-1'">
+                <!-- Customize -->
+                <div class="w-full max-w-sm">
+                  <p class="text-sm text-muted-400 dark:text-muted-400 mb-4">
+                    Play with the available options to customize content,
+                    positionning, duration and toast colors.
+                  </p>
+                  <!-- Grid -->
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- Y Position -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Y Position
+                      </p>
+                      <div class="flex gap-2">
+                        <div class="relative">
+                          <input
+                            v-model="positionY"
+                            type="radio"
+                            name="y_position"
+                            value="top"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              positionY === 'top'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Top
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="positionY"
+                            type="radio"
+                            name="y_position"
+                            value="bottom"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              positionY === 'bottom'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Bottom
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- X Position -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <div class="space-y-2">
+                        <p class="text-sm text-muted-500 dark:text-muted-400">
+                          X Position
+                        </p>
+                        <div class="flex gap-2">
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="right"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'right'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                              "
+                            >
+                              Right
+                            </div>
+                          </div>
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="center"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'center'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                              "
+                            >
+                              Center
+                            </div>
+                          </div>
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="left"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'left'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                              "
+                            >
+                              Left
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- Message -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Message
+                      </p>
+
+                      <div class="group relative">
+                        <input
+                          v-model="message"
+                          type="text"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-muted-600 border border-muted-300 focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50 dark:focus:shadow-muted-800/50 placeholder:text-muted-300 dark:placeholder:text-muted-500 dark:bg-muted-800 dark:text-muted-200 dark:border-muted-700 dark:focus:border-muted-700 transition-all duration-300 tw-accessibility"
+                          placeholder="ex: Hello World!"
+                        />
+                      </div>
+                    </div>
+                    <!-- Duration -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Duration (ms)
+                      </p>
+
+                      <div class="group relative">
+                        <input
+                          v-model="duration"
+                          type="number"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-muted-600 border border-muted-300 focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50 dark:focus:shadow-muted-800/50 placeholder:text-muted-300 dark:placeholder:text-muted-500 dark:bg-muted-800 dark:text-muted-200 dark:border-muted-700 dark:focus:border-muted-700 transition-all duration-300 tw-accessibility"
+                          placeholder="ex: 5000"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <p class="text-xs text-muted-400 dark:text-muted-400 mt-4">
+                    There are more options to customize, take look at the
+                    <a href="#" class="font-medium text-primary-500"
+                      >API docs</a
+                    >
+                    section.
+                  </p>
+                </div>
+              </div>
+
+              <!-- Tab content 2 -->
+              <div v-else-if="activeTab === 'tab-2'">
+                <DocCode :code="customExample" scrollable />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/ExamplePlain.vue b/playground/components/content/ExamplePlain.vue
index 1af329c..5350e22 100644
--- a/playground/components/content/ExamplePlain.vue
+++ b/playground/components/content/ExamplePlain.vue
@@ -14,7 +14,9 @@ const duration = 3000
   <Section>
     <div>
       <hr class="mb-10 border-t border-muted-200 dark:border-muted-800" />
-      <div class="w-full max-w-xl mb-10 ptablet:text-center ptablet:mx-auto">
+      <div
+        class="w-full max-w-xl mb-10 ptablet:text-center ptablet:mx-auto lg:pl-20"
+      >
         <!-- Icon -->
         <div
           class="w-20 h-20 flex items-center justify-center rounded-full mb-4 ptablet:mx-auto bg-white dark:bg-muted-800 shadow-xl shadow-muted-400/10 dark:shadow-muted-800/10"
@@ -362,7 +364,7 @@ const duration = 3000
 
               <!-- Tab content 2 -->
               <div v-else-if="activeTab === 'tab-2'">
-                <DocCode :code="plainExample" />
+                <DocCode :code="plainExample" scrollable />
               </div>
             </div>
           </div>
diff --git a/playground/components/doc/Code.vue b/playground/components/doc/Code.vue
index eb5b388..aaa843e 100644
--- a/playground/components/doc/Code.vue
+++ b/playground/components/doc/Code.vue
@@ -10,6 +10,7 @@ export interface DocCodeProps {
   code: string
   language?: string
   file?: string
+  scrollable?: boolean
 }
 
 const props = withDefaults(defineProps<DocCodeProps>(), {
@@ -40,7 +41,10 @@ const props = withDefaults(defineProps<DocCodeProps>(), {
         props.file
       }}</span>
     </div>
-    <div class="-mt-6 w-full rounded-b-lg border-t-0 px-4 pb-4">
+    <div
+      class="-mt-6 w-full rounded-b-lg border-t-0 px-4 pb-4"
+      :class="props.scrollable && 'scrollable'"
+    >
       <Prism :language="props.language">{{ props.code }}</Prism>
     </div>
   </div>
@@ -96,5 +100,10 @@ const props = withDefaults(defineProps<DocCodeProps>(), {
 :deep(pre.language-javascript) {
   color: #7eb6f6 !important;
 }
+
+:deep(.scrollable pre[class*='language-']) {
+  max-height: 280px;
+  overflow-y: auto;
+}
 </style>
   
\ No newline at end of file
diff --git a/playground/components/mockup/Custom.vue b/playground/components/mockup/Custom.vue
new file mode 100644
index 0000000..c189ba5
--- /dev/null
+++ b/playground/components/mockup/Custom.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import ToastCustom from '@/components/toast/Custom.vue'
+import { useNuxtApp } from '#app'
+
+export interface CustomProps {
+  positionY?: string
+  positionX?: string
+  message?: string
+  duration?: number
+}
+
+const props = withDefaults(defineProps<CustomProps>(), {
+  positionY: 'top',
+  positionX: 'right',
+  message: '',
+  duration: 5000,
+})
+
+const { $nt } = useNuxtApp()
+let i = 0
+
+function showCustomToast() {
+  i++
+  $nt.show({
+    content: () =>
+      h(ToastCustom, {
+        title: 'Hi there',
+        message: `You just poked Anna!`,
+      }),
+    duration: props.duration,
+    maxToasts: 5,
+    theme: {
+      containerId: 'nt-container-custom',
+      containerClass: [
+        'fixed',
+        'top-0',
+        'inset-0',
+        'h-full',
+        'w-full',
+        'pointer-events-none',
+        'md:p-4',
+        'flex',
+        'z-[100]',
+        props.positionY === 'top' ? 'flex-col' : 'flex-col-reverse',
+        props.positionX === 'left' ? 'items-start' : '',
+        props.positionX === 'center' ? 'items-center' : '',
+        props.positionX === 'right' ? 'items-end' : '',
+        'gap-2',
+      ].join(' '),
+      wrapperClass: 'w-full md:max-w-xs pointer-events-auto cursor-pointer',
+    },
+    transition: {
+      enterActiveClass: 'transition-all duration-300 ease-out',
+      enterFromClass: 'transform translate-y-1 opacity-0',
+      enterToClass: 'transform translate-y-0 opacity-100',
+      leaveActiveClass: 'transition duration-300 ease-in',
+      leaveFromClass: 'transform translate-y-0 opacity-100',
+      leaveToClass: 'transform translate-y-1 opacity-0',
+    },
+  })
+}
+</script>
+  
+  <template>
+  <div
+    class="flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
+  >
+    <div
+      class="h-2/3 w-9/12 rounded-tl-lg border-t-2 border-l-2 border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-xl shadow-muted-400/10"
+    >
+      <div
+        class="flex h-12 w-full items-center gap-2 border-b-2 border-muted-200 dark:border-muted-800 p-4"
+      >
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+      </div>
+      <div>
+        <div
+          class="flex items-center gap-4 bg-muted-50 dark:bg-muted-800 px-6 py-10"
+        >
+          <div
+            class="relative inline-flex h-12 w-12 items-center justify-center rounded-full xs:hidden"
+          >
+            <img
+              src="https://media.cssninja.io/shuriken/avatars/12.svg"
+              class="max-w-full rounded-full object-cover shadow-sm dark:border-transparent"
+              alt="Avatar image"
+            />
+          </div>
+          <div>
+            <h4 class="font-medium text-muted-800 dark:text-muted-100">
+              Anna L.
+            </h4>
+            <p class="text-sm xs:text-[0.7rem] text-muted-400">Sales Manager</p>
+          </div>
+          <div class="ml-auto">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center h-10 py-2 px-4 text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors duration-300"
+              @click="showCustomToast()"
+            >
+              Poke
+            </button>
+          </div>
+        </div>
+        <div class="py-8 pl-6 space-y-3">
+          <div class="h-3 w-10/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+          <div class="h-3 w-8/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+          <div class="h-3 w-9/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/Custom.vue b/playground/components/toast/Custom.vue
new file mode 100644
index 0000000..ffe4a3e
--- /dev/null
+++ b/playground/components/toast/Custom.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title?: string
+  message?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="w-full flex items-center gap-1 p-3 md:rounded-xl md:max-w-xs border-2 border-teal-500 bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
+  >
+    <div
+      class="h-11 w-11 flex items-center justify-center rounded-full text-teal-500"
+    >
+      <svg class="w-7 h-7" viewBox="0 0 256 256">
+        <path
+          fill="currentColor"
+          d="M184 217.3A80 80 0 0 1 74.7 188l-42-72.8a20 20 0 0 1 34.7-20l-16-27.7a20 20 0 0 1 34.6-20l8 13.9a20 20 0 0 1 34.6-20l30 51.9a20 20 0 0 1 34.7-20l20 34.7A80 80 0 0 1 184 217.3Z"
+          opacity=".2"
+        />
+        <path
+          fill="currentColor"
+          d="m220.2 104l-20-34.7a28.1 28.1 0 0 0-47.3-1.9l-17.3-30a28.1 28.1 0 0 0-38.3-10.3a29.4 29.4 0 0 0-9.9 9.6a27.9 27.9 0 0 0-11.5-6.2a27.1 27.1 0 0 0-21.2 2.8a27.9 27.9 0 0 0-10.3 38.2l3.4 5.8A28.5 28.5 0 0 0 36 81a28.1 28.1 0 0 0-10.2 38.2l42 72.8a88 88 0 1 0 152.4-88Zm-6.7 62.6a71.2 71.2 0 0 1-33.5 43.7A72.1 72.1 0 0 1 81.6 184l-42-72.8a12 12 0 0 1 20.8-12l22 38.1l.6.9v.2l.5.5l.2.2l.7.6h.1l.7.5h.3l.6.3h.2l.9.3h.1l.8.2h2.2l.9-.2h.3l.6-.2h.3l.9-.4a8.1 8.1 0 0 0 2.9-11l-22-38.1l-16-27.7a12 12 0 0 1-1.2-9.1a11.8 11.8 0 0 1 5.6-7.3a12 12 0 0 1 9.1-1.2a12.5 12.5 0 0 1 7.3 5.6l8 14h.1l26 45a6 6 0 0 0 .9 1.3a8 8 0 0 0 12.9-9.3l-26-45a12 12 0 1 1 20.8-12l30 51.9l6.3 11a48.1 48.1 0 0 0-10.9 61a8 8 0 0 0 13.8-8a32 32 0 0 1 11.7-43.7l.7-.4l.5-.4h.1l.6-.6l.5-.5l.4-.5l.3-.6h.1l.2-.5v-.2a1.9 1.9 0 0 0 .2-.7h.1c0-.2.1-.4.1-.6s0-.2.1-.2v-2.1a6.4 6.4 0 0 0-.2-.7a1.9 1.9 0 0 0-.2-.7v-.2c0-.2-.1-.3-.2-.5l-.3-.7l-10-17.4a12 12 0 0 1 13.5-17.5a11.8 11.8 0 0 1 7.2 5.5l20 34.7a70.9 70.9 0 0 1 7.2 53.8Zm-125.8 78a8.2 8.2 0 0 1-6.6 3.4a8.6 8.6 0 0 1-4.6-1.4A117.9 117.9 0 0 1 41.1 208a8 8 0 1 1 13.8-8a102.6 102.6 0 0 0 30.8 33.4a8.1 8.1 0 0 1 2 11.2ZM168 31a8 8 0 0 1 8-8a60.2 60.2 0 0 1 52 30a7.9 7.9 0 0 1-3 10.9a7.1 7.1 0 0 1-4 1.1a8 8 0 0 1-6.9-4A44 44 0 0 0 176 39a8 8 0 0 1-8-8Z"
+        />
+      </svg>
+    </div>
+    <div class="mr-6">
+      <span
+        class="block font-semibold text-sm text-muted-800 dark:text-muted-100"
+        >{{ props.title }}</span
+      >
+      <span class="block text-xs text-muted-400">{{ props.message }}</span>
+    </div>
+    <button
+      type="button"
+      class="h-9 w-9 flex items-center justify-center rounded-full ml-auto text-muted-700 dark:text-muted-400 hover:bg-muted-100 dark:hover:bg-muted-700 transition-colors duration-300 tw-accessibility"
+    >
+      <svg class="w-4 h-4" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 842d92e..06f5fcf 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -125,6 +125,8 @@ export default defineNuxtConfig({
 
     <ContentExamplePlain />
 
+    <ContentExampleCustom />
+
     <Section>
       <div class="mx-auto w-full max-w-7xl">
         <p>Nuxt module playground!</p>

From 1ec4bf6bca2b9e1a11b5027cfec8c38d37bf988d Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 28 Sep 2022 15:55:42 +0100
Subject: [PATCH 09/16] fix: custom example positionning

---
 playground/components/mockup/Custom.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/playground/components/mockup/Custom.vue b/playground/components/mockup/Custom.vue
index c189ba5..394ee26 100644
--- a/playground/components/mockup/Custom.vue
+++ b/playground/components/mockup/Custom.vue
@@ -52,11 +52,17 @@ function showCustomToast() {
     },
     transition: {
       enterActiveClass: 'transition-all duration-300 ease-out',
-      enterFromClass: 'transform translate-y-1 opacity-0',
+      enterFromClass:
+        props.positionY === 'top'
+          ? 'transform -translate-y-1 opacity-0'
+          : 'transform translate-y-1 opacity-0',
       enterToClass: 'transform translate-y-0 opacity-100',
       leaveActiveClass: 'transition duration-300 ease-in',
       leaveFromClass: 'transform translate-y-0 opacity-100',
-      leaveToClass: 'transform translate-y-1 opacity-0',
+      leaveToClass:
+        props.positionY === 'top'
+          ? 'transform -translate-y-1 opacity-0'
+          : 'transform translate-y-1 opacity-0',
     },
   })
 }

From 9a630a786910267f49e38403f2c10ee99300c47e Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 28 Sep 2022 22:02:56 +0100
Subject: [PATCH 10/16] feat: add advanced example, add footer

---
 playground/app.vue                            |   1 +
 playground/assets/examples/index.ts           |  58 +++
 playground/assets/img/cssninja.svg            |  68 ++++
 playground/components/AdvancedToast.vue       |   2 +-
 playground/components/Footer.vue              |  61 +++
 playground/components/content/Design.vue      |  49 +++
 .../components/content/ExampleAdvanced.vue    | 360 ++++++++++++++++++
 .../components/content/ExampleCustom.vue      |  86 +++++
 playground/components/mockup/Advanced.vue     | 187 +++++++++
 playground/components/mockup/Custom.vue       |   6 +
 playground/components/toast/ActionButtons.vue |   4 +-
 playground/components/toast/Advanced.vue      | 123 ++++++
 playground/components/toast/Custom.vue        |   4 +-
 playground/components/toast/LabelInfo.vue     |   2 +-
 playground/nuxt.config.ts                     |   7 +
 playground/pages/index.vue                    | 285 +-------------
 16 files changed, 1015 insertions(+), 288 deletions(-)
 create mode 100644 playground/assets/img/cssninja.svg
 create mode 100644 playground/components/Footer.vue
 create mode 100644 playground/components/content/Design.vue
 create mode 100644 playground/components/content/ExampleAdvanced.vue
 create mode 100644 playground/components/mockup/Advanced.vue
 create mode 100644 playground/components/toast/Advanced.vue

diff --git a/playground/app.vue b/playground/app.vue
index e10d7b3..3ea7619 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -6,6 +6,7 @@ const { isDark } = useDarkmode()
   <div :class="isDark ? 'dark' : ''">
     <Navigation />
     <NuxtPage />
+    <Footer />
   </div>
 </template>
 
diff --git a/playground/assets/examples/index.ts b/playground/assets/examples/index.ts
index 0b2953c..794a190 100644
--- a/playground/assets/examples/index.ts
+++ b/playground/assets/examples/index.ts
@@ -80,3 +80,61 @@ export const customExample = `
   }
 </script>
 `
+
+export const advancedExample = `
+<script setup>
+  import { h } from 'vue'
+  import { useNuxtApp } from '#app'
+
+  const { $nt } = useNuxtApp()
+  let i = 0
+
+  async function showAdvancedToast() {
+    i++
+    const toast = await $nt.show({
+      content: () =>
+        h(ToastAdvanced, {
+          message: 'Some nice message in here',
+        }),
+      dismissible: false,
+      maxToasts: 1,
+      theme: {
+        containerId: 'nt-advanced',
+        containerClass: [
+          'fixed',
+          'top-0',
+          'inset-0',
+          'h-full',
+          'w-full',
+          'pointer-events-none',
+          'md:p-4',
+          'flex',
+          'z-[100]',
+          'flex-col',
+          'items-end',
+          'text-sky-500',
+          'gap-2',
+        ].join(' '),
+        wrapperClass: [
+          'w-full',
+          'md:max-w-xs',
+          'pointer-events-auto',
+          'rounded',
+          'focus:tw-accessibility-static',
+          '!outline-offset-4',
+        ].join(' '),
+      },
+      transition: {
+        enterActiveClass: 'transition-all duration-300 ease-out',
+        enterFromClass: 'transform translate-y-1 opacity-0',
+        enterToClass: 'transform translate-y-0 opacity-100',
+        leaveActiveClass: 'transition duration-300 ease-in',
+        leaveFromClass: 'transform translate-y-0 opacity-100',
+        leaveToClass: 'transform translate-y-1 opacity-0',
+      },
+    })
+  
+    toast.el.focus()
+  }
+</script>
+`
diff --git a/playground/assets/img/cssninja.svg b/playground/assets/img/cssninja.svg
new file mode 100644
index 0000000..ede37ab
--- /dev/null
+++ b/playground/assets/img/cssninja.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="309 247 979 300" style="enable-background:new 309 247 979 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:#010202;}
+</style>
+<g id="XMLID_1_" class="st0">
+	<path id="XMLID_25_" class="st1" d="M690.4,395.3c-2.2,0-4.2,1-6,3.1c-9.8,12.2-18.4,19.7-25.6,22.5c0.3-2.6,0.5-4.7,0.5-6.2
+		c0-5.2-1.3-10-3.7-14.4c-2.4-4.4-6.1-9.6-10.8-16c-3.2-4-5.7-7.3-7.2-10c-1.6-2.6-2.3-5.2-2.3-7.3c0-3.7,1.4-8.3,4-13.5
+		c1-2,1.8-3.9,2.4-5.7c0.6-2,0.9-3.3,0.9-4.2c0-1.6-0.8-2.9-2.4-3.6c-1.6-0.7-4.5-1.1-8.7-1.1c-9,0-14.8,3.2-17.6,9.8
+		c-3.2,7.7-6.7,15.2-10,22.4c-3.4,7.2-6.4,13-9,17.2c-3.8,6-9.2,13.3-16.3,22.2c-5.5,5.3-10.4,8.8-14.9,10.6
+		c0.3-2.6,0.5-4.7,0.5-6.2c0-5.2-1.3-10-3.7-14.4c-2.4-4.4-6.1-9.6-10.8-16c-3.2-4-5.7-7.3-7.2-10c-1.6-2.6-2.3-5.2-2.3-7.3
+		c0-3.7,1.4-8.3,4-13.5c1-2,1.8-3.9,2.4-5.7c0.6-2,0.9-3.3,0.9-4.2c0-1.6-0.8-2.9-2.4-3.6c-1.6-0.7-4.5-1.1-8.7-1.1
+		c-9,0-14.8,3.2-17.6,9.8c-3.2,7.7-6.7,15.2-10,22.4c-3.4,7.2-6.4,13-9,17.2c-3,4.6-6.9,10.1-11.8,16.5
+		c-11.7,4.9-22.5,8.6-32.1,10.9c-9.9,2.4-19.6,3.7-29.3,3.7c-19.5,0-34.2-4.8-44.1-14.6c-10-9.8-14.9-23.5-14.9-41.3
+		c0-17.1,2.8-31.8,8.3-44.2c5.1-12.4,12.3-21.8,21.1-28.2c9-6.4,18.3-9.5,28.1-9.5c14.5,0,21.6,6.8,21.6,20.3
+		c0,2.6-0.5,6.2-1.4,10.7c-0.6,3.6-0.9,6-0.9,7.3c0,3.7,1.1,6.5,3.6,8.5c2.4,2,5.6,2.9,9.8,2.9c6,0,10.6-2.8,13.7-8.3
+		c3.2-5.5,4.8-12.7,4.8-21.8c0-13.5-4.1-24.5-12.5-32.6c-8.4-8.3-20.6-12.4-36.5-12.4c-17.2,0-32.9,4.6-47.1,13.9
+		s-25.3,22.4-33.5,39.4c-8.3,17-12.4,36.3-12.4,58.2c0,15.7,3.4,29.6,10.4,41.4c7,11.9,17,21,30.1,27.6c13.1,6.4,28.5,9.6,46.2,9.6
+		c10.2,0,21-1,32.4-3.2c10.4-2,20.6-5.1,30.3-9.1c2.5-0.2,4.9-1.4,7.2-3.6c3.6-2.2,6.1-4.9,7.8-8c2.6-2.9,5.2-5.9,7.5-9
+		c4.5-5.7,9.1-13.1,13.7-21.8c2.1,2.4,4.4,5.2,6.7,8.4c2.4,3.2,4.4,6.5,5.9,9.9c1.6,3.4,2.4,7,2.5,10.9c-1.4-0.1-3.3-0.5-5.9-0.8
+		c-2.6-0.3-4.8-0.6-6.8-0.6c-5.5,0-9.6,1.4-12.5,4.2s-4.2,6.2-4.2,10c0,4.5,2.1,8.5,6.1,12.1c4.1,3.6,10,5.4,17.7,5.4
+		c8.2,0,15.3-2.5,21.1-7.6c10-0.3,18.3-2.1,25-5.5c6.8-3.3,13.9-9.6,21.2-18.8c0.6-0.7,1-1.5,1.5-2.3c0.9-1.1,1.8-2.3,2.8-3.4
+		c4.5-5.7,9.1-13.1,13.7-21.8c2.1,2.4,4.4,5.2,6.7,8.4c2.4,3.2,4.4,6.5,5.9,9.9c1.6,3.4,2.4,7,2.5,10.9c-1.4-0.1-3.3-0.5-5.9-0.8
+		c-2.6-0.3-4.8-0.6-6.8-0.6c-5.5,0-9.6,1.4-12.5,4.2s-4.2,6.2-4.2,10c0,4.5,2.1,8.5,6.1,12.1c4.1,3.6,10,5.4,17.7,5.4
+		c8.2,0,15.3-2.5,21.1-7.6c10-0.3,18.3-2.1,25-5.5c6.8-3.3,13.9-9.6,21.2-18.8c2.9-3.6,4.2-8.2,4.2-13.8c0-3.1-0.6-5.6-1.7-7.3
+		C693.9,396.1,692.4,395.3,690.4,395.3z"/>
+	<path id="XMLID_26_" class="st1" d="M877.4,326.4c6.4,0,11.5-1.7,15.4-5.3c3.9-3.4,5.7-8.2,5.7-14.1c0-4.9-1.7-8.7-5.2-11.4
+		c-3.4-2.6-7.9-4-13.3-4c-6.1,0-11.1,1.7-15.3,5.3c-4.1,3.4-6.1,7.8-6.1,13.1c0,5.2,1.6,9.3,4.7,12.2
+		C866.5,324.9,871.1,326.4,877.4,326.4z"/>
+	<path id="XMLID_27_" class="st1" d="M1037.5,326.4c6.4,0,11.5-1.7,15.4-5.3c3.9-3.4,5.7-8.2,5.7-14.1c0-4.9-1.7-8.7-5.2-11.4
+		s-7.9-4-13.3-4c-6.1,0-11.1,1.7-15.3,5.3c-4.1,3.4-6.1,7.8-6.1,13.1c0,5.2,1.6,9.3,4.7,12.2
+		C1026.6,324.9,1031.2,326.4,1037.5,326.4z"/>
+	<path id="XMLID_30_" class="st1" d="M1184.6,395.3c-2.2,0-4.2,1-6,3.1c-6.9,8.2-12.3,14.1-16.3,17.7c-4,3.7-7.5,5.5-10.2,5.5
+		c-1.8,0-3.2-0.7-4.4-2s-1.7-3.1-1.7-5.4c0-6.7,1.7-18.6,5.2-35.7c2.2-11.7,3.3-19.2,3.3-22.3c0-5.2-3.7-7.8-10.9-7.8
+		c-3.4,0-6.7,0.3-9.8,0.9c-0.7-3.2-1.7-5.5-2.8-6.8c-1.1-1.3-3.3-2-6.5-2c-10.2,0-20,3.2-29,9.6c-9.2,6.4-16.4,15-21.9,25.6
+		c-4.4,8.4-6.9,17.1-7.8,26.2c-7.9,5.5-16.4,11.6-25.6,18.5l2.2-15.4c4.9-30.9,7.3-49.8,7.3-56.6c0-2.4-0.7-4.2-2.1-5.6
+		s-4.4-2-8.8-2c-5.5,0-9.5,1-12.3,3c-2.8,2-4.4,5.2-4.9,9.5c-2,16-3.3,27.9-4.2,35.9c-0.3,4.4-0.8,8.6-1.3,13
+		c-5.2,6.1-9.5,10.6-12.9,13.7c-4.1,3.7-7.6,5.5-10.6,5.5c-4.4,0-6.4-3-6.4-9c0-4.1,1.4-12.7,4.2-25.6c3.2-15.2,4.9-25.6,4.9-31.5
+		c0-9.6-4.8-14.5-14.5-14.5c-4.9,0-10.3,1.7-16.2,5.2c-5.9,3.4-11.8,9.2-17.9,17.1c-6.1,8-11.6,18.4-16.5,31.2
+		c0.6-6.5,1.4-12.1,2.2-16.5c0.9-4.5,2.1-9.6,3.6-15.6c2.2-8.3,3.3-13.7,3.3-16.1c0-2.1-0.6-3.4-1.8-4.2c-1.1-0.7-3.2-1.1-6.2-1.1
+		c-5.5,0-9.8,1-12.9,3c-3.1,2-5.3,5.2-6.5,9.5c-5.2,16.2-7.8,33.2-8.2,51c-4.2,4.9-7.9,8.7-10.8,11.4c-4,3.7-7.3,5.6-10,5.6
+		c-2.9,0-4.8-1.1-6-3.6c-1.1-2.4-1.8-5.7-1.8-10.2c0-5.7,1.8-16.9,5.4-33.2c2.9-13.5,4.2-22.2,4.2-25.8c0-5.1-3.8-7.6-11.4-7.6
+		c-4.9,0-8.5,0.9-10.7,2.6c-2.2,1.7-4,5.1-5.4,9.8c-2.6,9.1-4.8,18.8-6.5,29.3c-1.5,8.8-2.3,16.3-2.5,22.4
+		c-4.1,4.7-7.6,8.3-10.4,10.8c-4.1,3.7-7.6,5.5-10.6,5.5c-4.4,0-6.4-3-6.4-9c0-4.1,1.4-12.7,4.2-25.6c3.2-15.2,4.9-25.6,4.9-31.5
+		c0-9.6-4.8-14.5-14.5-14.5c-4.9,0-10.3,1.7-16.2,5.2c-5.9,3.4-11.8,9.2-17.9,17.1c-6.1,8-11.6,18.4-16.5,31.2
+		c0.6-6.5,1.4-12.1,2.2-16.5c0.9-4.5,2.1-9.6,3.6-15.6c2.2-8.3,3.3-13.7,3.3-16.1c0-2.1-0.6-3.4-1.8-4.2c-1.1-0.7-3.2-1.1-6.2-1.1
+		c-5.5,0-9.8,1-12.9,3c-3.1,2-5.3,5.2-6.5,9.5c-5.5,17.3-8.3,35.7-8.3,55.1c0,13.1,1.1,22.6,3.4,28.5c2.3,6,6.3,9,11.9,9
+		c4.6,0,8-1.3,10.1-3.7c2.2-2.4,4-7.1,5.7-14.1c2.2-9.1,5.2-17.7,8.8-25.8c3.7-8.2,7.2-14.7,10.7-19.7c3.4-4.9,6.2-7.5,8.2-7.5
+		c1.6,0,2.4,1.1,2.4,3.6c0,3.6-0.9,10-2.9,19.4c-2.1,10.7-3.1,18.1-3.1,22.3c0,8.3,2,14.7,5.7,19.1c3.9,4.4,9.5,6.5,17.1,6.5
+		c9.4,0,17.7-2.5,25-7.6c3.6-2.4,7-5.2,10.2-8.3c0.8,2,1.8,3.9,2.9,5.6c4.4,6.9,11.4,10.2,21,10.2c9.4,0,19.3-4.8,29.7-14.6
+		c0.5,2.2,1,4,1.6,5.6c2.3,6,6.3,9,11.9,9c4.6,0,8-1.3,10.1-3.7c2.2-2.4,4-7.1,5.7-14.1c2.2-9.1,5.2-17.7,8.8-25.8
+		c3.7-8.2,7.2-14.7,10.7-19.7c3.4-4.9,6.2-7.5,8.2-7.5c1.6,0,2.4,1.1,2.4,3.6c0,3.6-0.9,10-2.9,19.4c-2.1,10.7-3.1,18.1-3.1,22.3
+		c0,8.3,2,14.7,5.7,19.1c3.9,4.4,9.5,6.5,17.1,6.5c9.4,0,17.7-2.5,25-7.6c1.7-1.1,3.3-2.4,5.1-3.8l-1.1,8.2
+		c-22.6,17.6-38,32.3-46.2,44.2s-12.3,23.2-12.3,33.8c0,7.6,2.3,13.7,7,18.4c4.7,4.7,10.9,7,18.6,7c14.2,0,25.9-8.8,35.2-26.5
+		c9.2-17.7,16.8-42,22.5-72.9c12.4-8.6,23-15.8,31.8-21.7c1.4,4,3.3,7.7,5.9,10.8c5.5,6.7,12.9,10,22,10c11.7,0,21.5-6.2,29.2-18.7
+		c2.1,5.7,5.2,10.3,9.3,13.7c4.1,3.3,8.6,5.1,13.4,5.1c6.4,0,13-2.6,19.9-7.8c6.9-5.2,13.3-11.6,19.4-19.2c2.9-3.2,4.2-7.9,4.2-13.8
+		c0-3.1-0.6-5.6-1.7-7.3C1188,396.1,1186.5,395.3,1184.6,395.3z M993.1,511.6c-4.6,8.7-8.8,13.2-12.7,13.2c-4.1,0-6.2-2.9-6.2-8.7
+		c0-6,2.5-12.9,7.5-20.7c4.9-7.8,13.1-16.5,24.5-26.2C1002,488.7,997.6,502.8,993.1,511.6z M1119.2,402.4
+		c-1.4,6.4-3.4,11.5-6.4,15.4c-3,3.9-6.1,5.7-9.4,5.7c-3.2,0-5.9-1.1-7.7-3.3c-1.8-2.2-2.8-5.6-2.8-10.2c0-8.3,1.6-16.2,4.7-23.7
+		c3.1-7.5,7.3-13.4,12.6-17.9c5.3-4.5,11-6.9,17.2-7L1119.2,402.4z"/>
+	<path id="XMLID_32_" class="st1" d="M1235.9,409.4c-3.3-3.2-8.3-4.8-14.8-4.8c-6.9,0-12.2,2-16,6c-3.8,4-5.7,9.4-5.7,16.1
+		c0,5.7,1.7,10.4,5.1,14c3.3,3.6,8.3,5.4,14.8,5.4c6.7,0,11.9-2.1,15.8-6.1c3.9-4.1,5.7-9.5,5.7-16.4
+		C1240.9,417.3,1239.3,412.6,1235.9,409.4z"/>
+</g>
+</svg>
diff --git a/playground/components/AdvancedToast.vue b/playground/components/AdvancedToast.vue
index 92eb32a..6cc825f 100644
--- a/playground/components/AdvancedToast.vue
+++ b/playground/components/AdvancedToast.vue
@@ -15,7 +15,7 @@ const { percent, closeIn, endAt } = useNinjaToasterProgress()
       <div
         class="h-4 rounded-b bg-slate-600"
         :style="{
-          width: `${percent * 100}%`
+          width: `${percent * 100}%`,
         }"
       ></div>
     </div>
diff --git a/playground/components/Footer.vue b/playground/components/Footer.vue
new file mode 100644
index 0000000..6840c1b
--- /dev/null
+++ b/playground/components/Footer.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="w-full py-8 px-4 lg:px-6 bg-white dark:bg-muted-1000">
+    <div class="w-full max-w-7xl mx-auto">
+      <div
+        class="flex flex-col xs:gap-y-4 md:flex-row items-center justify-between"
+      >
+        <div class="w-full flex flex-col md:flex-row items-center gap-2">
+          <span
+            class="flex items-center gap-1 text-sm text-muted-500 dark:text-muted-400"
+          >
+            <span>Made with</span>
+            <svg class="w-5 h-5 text-rose-500" viewBox="0 0 256 256">
+              <path
+                fill="currentColor"
+                d="M128 216S28 160 28 92a52 52 0 0 1 100-20a52 52 0 0 1 100 20c0 68-100 124-100 124Z"
+                opacity=".2"
+              />
+              <path
+                fill="currentColor"
+                d="M128 224a7.8 7.8 0 0 1-3.9-1C119.8 220.6 20 163.9 20 92a60 60 0 0 1 108-36a60 60 0 0 1 108 36c0 30.6-17.7 62-52.6 93.4a314.3 314.3 0 0 1-51.5 37.6a7.8 7.8 0 0 1-3.9 1Zm-3.9-15ZM80 48a44 44 0 0 0-44 44c0 55.2 74 103.7 92 114.7c18-11 92-59.5 92-114.7a44 44 0 0 0-84.6-17a8 8 0 0 1-14.8 0A43.8 43.8 0 0 0 80 48Z"
+              />
+            </svg>
+            <span>by</span>
+          </span>
+          <a href="#" class="flex w-28">
+            <img
+              src="@/assets/img/cssninja.svg"
+              class="w-full"
+              alt="Css Ninja logo"
+            />
+          </a>
+        </div>
+        <div class="flex items-center gap-2">
+          <!-- Place this tag where you want the button to render. -->
+          <!-- Place this tag where you want the button to render. -->
+          <a
+            class="github-button"
+            href="https://github.com/cssninjaStudio/nuxt-toaster"
+            data-color-scheme="no-preference: light; light: light; dark: dark;"
+            data-icon="octicon-star"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star cssninjaStudio/nuxt-toaster on GitHub"
+            >Star</a
+          >
+          <!-- Place this tag where you want the button to render. -->
+          <!-- Place this tag where you want the button to render. -->
+          <a
+            class="github-button"
+            href="https://github.com/sponsors/cssninjaStudio"
+            data-color-scheme="no-preference: light; light: light; dark: dark;"
+            data-icon="octicon-heart"
+            data-size="large"
+            aria-label="Sponsor @cssninjaStudio on GitHub"
+            >Sponsor</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/Design.vue b/playground/components/content/Design.vue
new file mode 100644
index 0000000..ff9718f
--- /dev/null
+++ b/playground/components/content/Design.vue
@@ -0,0 +1,49 @@
+<template>
+  <Section>
+    <hr class="mb-10 pt-10 border-t border-muted-200 dark:border-muted-800" />
+    <div class="w-full max-w-xl mx-auto text-center mb-16">
+      <p class="uppercase font-semibold text-xs text-primary-500 mb-2">
+        <span
+          class="inline-block py-2 px-3 border-2 border-primary-500 rounded-lg scale-90"
+          >Custom Experience</span
+        >
+      </p>
+      <h2 class="font-extrabold text-5xl text-muted-800 dark:text-white">
+        You set the rules
+      </h2>
+    </div>
+
+    <!-- Toast grid -->
+    <div class="flex flex-col gap-6 w-full mx-auto pb-16">
+      <!-- Row -->
+      <div class="flex flex-col md:flex-row justify-center gap-6">
+        <div class="w-full md:max-w-[280px]">
+          <ToastIconSuccess />
+        </div>
+      </div>
+      <!-- Row -->
+      <div
+        class="flex flex-col md:flex-row justify-center gap-6 w-full max-w-5xl mx-auto"
+      >
+        <div>
+          <ToastActionButtons />
+        </div>
+        <div>
+          <ToastIconSoloDanger />
+        </div>
+        <div>
+          <ToastLabelInfo />
+        </div>
+      </div>
+      <!-- Row -->
+      <div class="flex flex-col md:flex-row justify-center gap-6 w-full">
+        <div>
+          <ToastUserReplyClose />
+        </div>
+        <div>
+          <ToastLabelSuccess />
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/ExampleAdvanced.vue b/playground/components/content/ExampleAdvanced.vue
new file mode 100644
index 0000000..2d70eeb
--- /dev/null
+++ b/playground/components/content/ExampleAdvanced.vue
@@ -0,0 +1,360 @@
+<script setup>
+import { advancedExample } from '@/assets/examples'
+
+const activeTab = ref('tab-1')
+
+const positionY = ref('top')
+const positionX = ref('right')
+const color = ref('success')
+const message = ref('Iam an advanced toast!')
+const duration = 3000
+</script>
+  
+  <template>
+  <Section>
+    <div>
+      <hr class="mb-10 border-t border-muted-200 dark:border-muted-800" />
+      <div
+        class="w-full max-w-xl mb-10 ptablet:text-center ptablet:mx-auto lg:pl-20"
+      >
+        <!-- Icon -->
+        <div
+          class="w-20 h-20 flex items-center justify-center rounded-full mb-4 ptablet:mx-auto bg-white dark:bg-muted-800 shadow-xl shadow-muted-400/10 dark:shadow-muted-800/10"
+        >
+          <div
+            class="w-16 h-16 flex items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-400 text-yellow-500 dark:text-white"
+          >
+            <svg class="w-8 h-8" viewBox="0 0 256 256">
+              <path
+                fill="currentColor"
+                d="m195.6 151.5l-52.1 19.2a8.1 8.1 0 0 0-4.8 4.8l-19.2 52.1a8 8 0 0 1-15 0l-19.2-52.1a8.1 8.1 0 0 0-4.8-4.8l-52.1-19.2a8 8 0 0 1 0-15l52.1-19.2a8.1 8.1 0 0 0 4.8-4.8l19.2-52.1a8 8 0 0 1 15 0l19.2 52.1a8.1 8.1 0 0 0 4.8 4.8l52.1 19.2a8 8 0 0 1 0 15Z"
+                opacity=".2"
+              />
+              <path
+                fill="currentColor"
+                d="m198.4 129l-52.2-19.2L127 57.6a16 16 0 0 0-30 0l-19.2 52.2L25.6 129a16 16 0 0 0 0 30l52.2 19.2L97 230.4a16 16 0 0 0 30 0l19.2-52.2l52.2-19.2a16 16 0 0 0 0-30Zm-57.7 34.2a15.9 15.9 0 0 0-9.5 9.5L112 224.9l-19.2-52.2a15.9 15.9 0 0 0-9.5-9.5L31.1 144l52.2-19.2a15.9 15.9 0 0 0 9.5-9.5L112 63.1l19.2 52.2a15.9 15.9 0 0 0 9.5 9.5l52.2 19.2ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8Zm104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8Z"
+              />
+            </svg>
+          </div>
+        </div>
+        <!-- Title -->
+        <h2 class="font-extrabold text-5xl text-muted-800 dark:text-white mb-2">
+          Advanced example
+        </h2>
+        <p class="text-lg text-muted-500 dark:text-muted-400 pb-3">
+          Nuxt Toaster can render completely custom UI elements. It extends the
+          Toast's role and lets it act like a popup or a dialog. The following
+          example uses
+          <a href="#" class="font-medium text-primary-500">Tailwind CSS</a>.
+        </p>
+      </div>
+      <div class="grid ltablet:grid-cols-12 lg:grid-cols-12 gap-8">
+        <div class="ltablet:col-span-6 lg:col-span-6">
+          <div class="flex flex-col justify-center items-center h-full w-full">
+            <MockupAdvanced
+              :position-y="positionY"
+              :position-x="positionX"
+              :color="color"
+              :message="message"
+              :duration="duration"
+            />
+          </div>
+        </div>
+        <div class="ltablet:col-span-6 lg:col-span-6">
+          <div
+            class="flex flex-col justify-center ptablet:items-center h-full w-full"
+          >
+            <div>
+              <!-- Tabs -->
+              <div
+                class="flex items-center justify-between overflow-hidden mb-6"
+              >
+                <div
+                  class="flex gap-x-6 grow font-sans border-b border-muted-200 dark:border-muted-800 xs:overflow-x-auto"
+                >
+                  <button
+                    type="button"
+                    class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+                    :class="
+                      activeTab === 'tab-1'
+                        ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                        : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+                    "
+                    @click="activeTab = 'tab-1'"
+                  >
+                    Customize
+                  </button>
+                  <button
+                    type="button"
+                    class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+                    :class="
+                      activeTab === 'tab-2'
+                        ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                        : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+                    "
+                    @click="activeTab = 'tab-2'"
+                  >
+                    Code sample
+                  </button>
+                </div>
+              </div>
+
+              <!-- Tab content 1 -->
+              <div v-if="activeTab === 'tab-1'">
+                <!-- Customize -->
+                <div class="w-full max-w-sm">
+                  <p class="text-sm text-muted-400 dark:text-muted-400 mb-4">
+                    Play with the available options to customize content,
+                    positionning, duration and toast colors.
+                  </p>
+                  <!-- Grid -->
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- Y Position -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Y Position
+                      </p>
+                      <div class="flex gap-2">
+                        <div class="relative">
+                          <input
+                            v-model="positionY"
+                            type="radio"
+                            name="y_position"
+                            value="top"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              positionY === 'top'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Top
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="positionY"
+                            type="radio"
+                            name="y_position"
+                            value="bottom"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              positionY === 'bottom'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Bottom
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- X Position -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <div class="space-y-2">
+                        <p class="text-sm text-muted-500 dark:text-muted-400">
+                          X Position
+                        </p>
+                        <div class="flex gap-2">
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="right"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'right'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                              "
+                            >
+                              Right
+                            </div>
+                          </div>
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="center"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'center'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                              "
+                            >
+                              Center
+                            </div>
+                          </div>
+                          <div class="relative">
+                            <input
+                              v-model="positionX"
+                              type="radio"
+                              name="x_position"
+                              value="left"
+                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            />
+                            <div
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              :class="
+                                positionX === 'left'
+                                  ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                  : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                              "
+                            >
+                              Left
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- Colors -->
+                    <div class="col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Colors
+                      </p>
+                      <div class="flex gap-2">
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="success"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'success'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Success
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="info"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'info'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Info
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="warning"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'warning'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Warning
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="danger"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'danger'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Danger
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- Message -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Message
+                      </p>
+
+                      <div class="group relative">
+                        <input
+                          v-model="message"
+                          type="text"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-muted-600 border border-muted-300 focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50 dark:focus:shadow-muted-800/50 placeholder:text-muted-300 dark:placeholder:text-muted-500 dark:bg-muted-800 dark:text-muted-200 dark:border-muted-700 dark:focus:border-muted-700 transition-all duration-300 tw-accessibility"
+                          placeholder="ex: Hello World!"
+                        />
+                      </div>
+                    </div>
+                    <!-- Duration -->
+                    <div class="xs:col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Duration (ms)
+                      </p>
+
+                      <div class="group relative">
+                        <input
+                          v-model="duration"
+                          type="number"
+                          class="px-3 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-muted-600 border border-muted-300 focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50 dark:focus:shadow-muted-800/50 placeholder:text-muted-300 dark:placeholder:text-muted-500 dark:bg-muted-800 dark:text-muted-200 dark:border-muted-700 dark:focus:border-muted-700 transition-all duration-300 tw-accessibility"
+                          placeholder="ex: 5000"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <p class="text-xs text-muted-400 dark:text-muted-400 mt-4">
+                    There are more options to customize, take look at the
+                    <a href="#" class="font-medium text-primary-500"
+                      >API docs</a
+                    >
+                    section.
+                  </p>
+                </div>
+              </div>
+
+              <!-- Tab content 2 -->
+              <div v-else-if="activeTab === 'tab-2'">
+                <DocCode :code="advancedExample" scrollable />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
\ No newline at end of file
diff --git a/playground/components/content/ExampleCustom.vue b/playground/components/content/ExampleCustom.vue
index 073ee94..5ecd035 100644
--- a/playground/components/content/ExampleCustom.vue
+++ b/playground/components/content/ExampleCustom.vue
@@ -5,6 +5,7 @@ const activeTab = ref('tab-1')
 
 const positionY = ref('top')
 const positionX = ref('right')
+const color = ref('info')
 const message = ref('You just poked Anna!')
 const duration = 3000
 </script>
@@ -48,6 +49,7 @@ const duration = 3000
             <MockupCustom
               :position-y="positionY"
               :position-x="positionX"
+              :color="color"
               :message="message"
               :duration="duration"
             />
@@ -215,6 +217,90 @@ const duration = 3000
                         </div>
                       </div>
                     </div>
+                    <!-- Colors -->
+                    <div class="col-span-2 space-y-2">
+                      <p class="text-sm text-muted-500 dark:text-muted-400">
+                        Colors
+                      </p>
+                      <div class="flex gap-2">
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="success"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'success'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Success
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="info"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'info'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Info
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="warning"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'warning'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Warning
+                          </div>
+                        </div>
+                        <div class="relative">
+                          <input
+                            v-model="color"
+                            type="radio"
+                            name="t_color"
+                            value="danger"
+                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                          />
+                          <div
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            :class="
+                              color === 'danger'
+                                ? 'border-primary-500 bg-primary-500/10 text-primary-500'
+                                : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
+                            "
+                          >
+                            Danger
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                     <!-- Message -->
                     <div class="xs:col-span-2 space-y-2">
                       <p class="text-sm text-muted-500 dark:text-muted-400">
diff --git a/playground/components/mockup/Advanced.vue b/playground/components/mockup/Advanced.vue
new file mode 100644
index 0000000..2ea76e4
--- /dev/null
+++ b/playground/components/mockup/Advanced.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import ToastAdvanced from '@/components/toast/Advanced.vue'
+import { useNuxtApp } from '#app'
+
+export interface CustomProps {
+  positionY?: string
+  positionX?: string
+  message?: string
+  duration?: number
+  color?: string
+}
+
+const props = withDefaults(defineProps<CustomProps>(), {
+  positionY: 'top',
+  positionX: 'right',
+  message: '',
+  duration: 5000,
+  color: 'info',
+})
+
+const { $nt } = useNuxtApp()
+let i = 0
+
+/* function showCustomToast() {
+  i++
+  $nt.show({
+    content: () =>
+      h(ToastCustom, {
+        title: 'Hi there',
+        message: `You just poked Anna!`,
+      }),
+    duration: props.duration,
+    maxToasts: 5,
+    theme: {
+      containerId: 'nt-container-custom',
+      containerClass: [
+        'fixed',
+        'top-0',
+        'inset-0',
+        'h-full',
+        'w-full',
+        'pointer-events-none',
+        'md:p-4',
+        'flex',
+        'z-[100]',
+        props.positionY === 'top' ? 'flex-col' : 'flex-col-reverse',
+        props.positionX === 'left' ? 'items-start' : '',
+        props.positionX === 'center' ? 'items-center' : '',
+        props.positionX === 'right' ? 'items-end' : '',
+        props.color === 'info' ? 'text-sky-500' : '',
+        props.color === 'success' ? 'text-teal-500' : '',
+        props.color === 'warning' ? 'text-yellow-500' : '',
+        props.color === 'danger' ? 'text-rose-500' : '',
+        'gap-2',
+      ].join(' '),
+      wrapperClass: 'w-full md:max-w-xs pointer-events-auto cursor-pointer',
+    },
+    transition: {
+      enterActiveClass: 'transition-all duration-300 ease-out',
+      enterFromClass:
+        props.positionY === 'top'
+          ? 'transform -translate-y-1 opacity-0'
+          : 'transform translate-y-1 opacity-0',
+      enterToClass: 'transform translate-y-0 opacity-100',
+      leaveActiveClass: 'transition duration-300 ease-in',
+      leaveFromClass: 'transform translate-y-0 opacity-100',
+      leaveToClass:
+        props.positionY === 'top'
+          ? 'transform -translate-y-1 opacity-0'
+          : 'transform translate-y-1 opacity-0',
+    },
+  })
+} */
+
+async function showAdvancedToast() {
+  i++
+  const toast = await $nt.show({
+    content: () =>
+      h(ToastAdvanced, {
+        message: `${props.message} (${i})`,
+      }),
+    dismissible: false,
+    maxToasts: 1,
+    theme: {
+      containerId: 'nt-advanced',
+      containerClass: [
+        'fixed',
+        'top-0',
+        'inset-0',
+        'h-full',
+        'w-full',
+        'pointer-events-none',
+        'md:p-4',
+        'flex',
+        'z-[100]',
+        props.positionY === 'top' ? 'flex-col' : 'flex-col-reverse',
+        props.positionX === 'left' ? 'items-start' : '',
+        props.positionX === 'center' ? 'items-center' : '',
+        props.positionX === 'right' ? 'items-end' : '',
+        props.color === 'info' ? 'text-sky-500' : '',
+        props.color === 'success' ? 'text-teal-500' : '',
+        props.color === 'warning' ? 'text-yellow-500' : '',
+        props.color === 'danger' ? 'text-rose-500' : '',
+        'gap-2',
+      ].join(' '),
+      wrapperClass: [
+        'w-full',
+        'md:max-w-xs',
+        'pointer-events-auto',
+        'rounded',
+        'focus:tw-accessibility-static',
+        '!outline-offset-4',
+      ].join(' '),
+    },
+    transition: {
+      enterActiveClass: 'transition-all duration-300 ease-out',
+      enterFromClass:
+        props.positionY === 'top'
+          ? 'transform -translate-y-1 opacity-0'
+          : 'transform translate-y-1 opacity-0',
+      enterToClass: 'transform translate-y-0 opacity-100',
+      leaveActiveClass: 'transition duration-300 ease-in',
+      leaveFromClass: 'transform translate-y-0 opacity-100',
+      leaveToClass:
+        props.positionY === 'top'
+          ? 'transform -translate-y-1 opacity-0'
+          : 'transform translate-y-1 opacity-0',
+    },
+  })
+
+  toast.el.focus()
+}
+</script>
+    
+    <template>
+  <div
+    class="flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
+  >
+    <div
+      class="h-2/3 w-9/12 rounded-tl-lg border-t-2 border-l-2 border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-xl shadow-muted-400/10"
+    >
+      <div
+        class="flex h-12 w-full items-center gap-2 border-b-2 border-muted-200 dark:border-muted-800 p-4"
+      >
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+        <div class="h-2 w-2 rounded-full bg-muted-200 dark:bg-muted-700"></div>
+      </div>
+      <div>
+        <div
+          class="flex items-center gap-4 bg-muted-50 dark:bg-muted-800 px-6 py-10"
+        >
+          <div
+            class="relative inline-flex h-12 w-12 items-center justify-center rounded-full xs:hidden"
+          >
+            <img
+              src="https://media.cssninja.io/shuriken/avatars/16.svg"
+              class="max-w-full rounded-full object-cover shadow-sm dark:border-transparent"
+              alt="Avatar image"
+            />
+          </div>
+          <div>
+            <h4 class="font-medium text-muted-800 dark:text-muted-100">
+              Jerry K.
+            </h4>
+            <p class="text-sm xs:text-[0.7rem] text-muted-400">Scrum Master</p>
+          </div>
+          <div class="ml-auto">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center h-10 py-2 px-4 text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors duration-300"
+              @click="showAdvancedToast()"
+            >
+              Hire
+            </button>
+          </div>
+        </div>
+        <div class="py-8 pl-6 space-y-3">
+          <div class="h-3 w-10/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+          <div class="h-3 w-8/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+          <div class="h-3 w-9/12 rounded bg-muted-100 dark:bg-muted-800"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/mockup/Custom.vue b/playground/components/mockup/Custom.vue
index 394ee26..18f9b7f 100644
--- a/playground/components/mockup/Custom.vue
+++ b/playground/components/mockup/Custom.vue
@@ -8,6 +8,7 @@ export interface CustomProps {
   positionX?: string
   message?: string
   duration?: number
+  color?: string
 }
 
 const props = withDefaults(defineProps<CustomProps>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<CustomProps>(), {
   positionX: 'right',
   message: '',
   duration: 5000,
+  color: 'info',
 })
 
 const { $nt } = useNuxtApp()
@@ -46,6 +48,10 @@ function showCustomToast() {
         props.positionX === 'left' ? 'items-start' : '',
         props.positionX === 'center' ? 'items-center' : '',
         props.positionX === 'right' ? 'items-end' : '',
+        props.color === 'info' ? 'text-sky-500' : '',
+        props.color === 'success' ? 'text-teal-500' : '',
+        props.color === 'warning' ? 'text-yellow-500' : '',
+        props.color === 'danger' ? 'text-rose-500' : '',
         'gap-2',
       ].join(' '),
       wrapperClass: 'w-full md:max-w-xs pointer-events-auto cursor-pointer',
diff --git a/playground/components/toast/ActionButtons.vue b/playground/components/toast/ActionButtons.vue
index 7e8be7e..896a88c 100644
--- a/playground/components/toast/ActionButtons.vue
+++ b/playground/components/toast/ActionButtons.vue
@@ -4,13 +4,13 @@
   >
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300 tw-accessibility"
+      class="h-10 w-full py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300 tw-accessibility"
     >
       Dismiss
     </button>
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300 tw-accessibility"
+      class="h-10 w-full py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300 tw-accessibility"
     >
       Accept
     </button>
diff --git a/playground/components/toast/Advanced.vue b/playground/components/toast/Advanced.vue
new file mode 100644
index 0000000..6b23e35
--- /dev/null
+++ b/playground/components/toast/Advanced.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { useNinjaToasterProgress, useNinjaToasterState } from '#imports'
+
+const props = defineProps<{
+  message?: string
+}>()
+
+const state = useNinjaToasterState()
+const { percent, closeIn, endAt } = useNinjaToasterProgress()
+const toggled = ref(false)
+</script>
+  
+  <template>
+  <div
+    class="relative rounded-xl bg-white dark:bg-muted-800 p-6 shadow-2xl shadow-muted-500/10 dark:shadow-muted-800/10"
+  >
+    <div v-if="!toggled" class="text-center">
+      <div
+        class="relative flex h-20 w-20 items-center justify-center mx-auto rounded-full"
+      >
+        <img
+          src="https://media.cssninja.io/shuriken/avatars/16.svg"
+          class="max-w-full rounded-full object-cover shadow-sm dark:border-transparent"
+          alt="Avatar image"
+        />
+      </div>
+      <div>
+        <h4 class="font-medium text-muted-800 dark:text-muted-100">Jerry K.</h4>
+        <p class="text-sm text-muted-400">Scrum Master</p>
+      </div>
+      <div class="py-4">
+        <p class="text-sm text-muted-500 dark:text-muted-400">
+          Jerry is a talented Scrum Master looking for new opportunities.
+        </p>
+      </div>
+      <div class="flex items-center justify-between gap-2 mb-6">
+        <button
+          type="button"
+          class="w-full flex items-center justify-center h-10 py-2 px-4 text-sm text-muted-600 dark:text-muted-400 bg-muted-100 dark:bg-muted-700 rounded-lg hover:bg-muted-50 dark:hover:bg-muted-600 transition-colors duration-300"
+        >
+          View Profile
+        </button>
+        <button
+          type="button"
+          class="w-full flex items-center justify-center h-10 py-2 px-4 text-sm bg-current rounded-lg transition-colors duration-300"
+        >
+          <span class="text-white">Hire Now</span>
+        </button>
+      </div>
+      <div
+        class="relative h-1 w-full bg-muted-200 dark:bg-muted-800 overflow-hidden rounded mb-4"
+      >
+        <div
+          class="absolute top-0 left-0 h-full rounded transition duration-300 bg-current w-full"
+          :style="{
+            width: `${percent * 100}%`,
+          }"
+        ></div>
+      </div>
+      <!-- Toggle -->
+      <div class="w-full">
+        <button
+          type="button"
+          class="w-full inline-flex justify-center text-xs font-medium underline-offset-2 hover:underline text-current cursor-pointer"
+          @click="toggled = !toggled"
+        >
+          See some code behind it
+        </button>
+      </div>
+    </div>
+    <!-- Code -->
+    <div v-else>
+      <div class="flex items-center justify-between">
+        <div class="w-3 h-3 rounded-full bg-current"></div>
+        <button
+          type="button"
+          class="inline-flex justify-center text-xs font-medium underline-offset-2 hover:underline text-current cursor-pointer"
+          @click="state.close"
+        >
+          This closes the toast
+        </button>
+      </div>
+      <!-- Message -->
+      <div class="py-4">
+        <p class="text-sm text-muted-600 dark:text-muted-200">
+          {{ props.message }}
+        </p>
+      </div>
+      <!-- State -->
+      <div class="space-y-4 mb-2">
+        <div class="relative">
+          <span class="absolute top-3 right-3 text-xs text-muted-400"
+            >State</span
+          >
+          <pre
+            class="p-6 font-mono text-xs text-muted-500 dark:text-muted-400 rounded-xl bg-muted-100 dark:bg-muted-800"
+            >{{ state }}</pre
+          >
+        </div>
+        <div class="relative">
+          <span class="absolute top-3 right-3 text-xs text-muted-400"
+            >Duration</span
+          >
+          <pre
+            class="p-6 font-mono text-xs text-muted-500 dark:text-muted-400 rounded-xl bg-muted-100 dark:bg-muted-800"
+            >{{ { percent, closeIn, endAt } }}</pre
+          >
+        </div>
+      </div>
+      <!-- Toggle -->
+      <div class="w-full">
+        <button
+          type="button"
+          class="w-full inline-flex justify-center text-xs font-medium underline-offset-2 hover:underline text-current cursor-pointer"
+          @click="toggled = !toggled"
+        >
+          Back to toast content
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+  
\ No newline at end of file
diff --git a/playground/components/toast/Custom.vue b/playground/components/toast/Custom.vue
index ffe4a3e..69d5ce5 100644
--- a/playground/components/toast/Custom.vue
+++ b/playground/components/toast/Custom.vue
@@ -7,10 +7,10 @@ const props = defineProps<{
 
 <template>
   <div
-    class="w-full flex items-center gap-1 p-3 md:rounded-xl md:max-w-xs border-2 border-teal-500 bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
+    class="w-full flex items-center gap-1 p-3 md:rounded-xl md:max-w-xs border-2 border-current bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
-      class="h-11 w-11 flex items-center justify-center rounded-full text-teal-500"
+      class="h-11 w-11 flex items-center justify-center rounded-full text-current"
     >
       <svg class="w-7 h-7" viewBox="0 0 256 256">
         <path
diff --git a/playground/components/toast/LabelInfo.vue b/playground/components/toast/LabelInfo.vue
index b4d21d6..83bc682 100644
--- a/playground/components/toast/LabelInfo.vue
+++ b/playground/components/toast/LabelInfo.vue
@@ -3,7 +3,7 @@
     class="w-full flex items-center rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
-      class="h-16 w-16 flex items-center justify-center text-sky-500 bg-sky-100 dark:text-white dark:bg-sky-500"
+      class="h-16 w-16 min-w-[4rem] flex items-center justify-center text-sky-500 bg-sky-100 dark:text-white dark:bg-sky-500"
     >
       <svg class="w-5 h-5" viewBox="0 0 512 512">
         <path
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index dbfb8a7..d11dcbb 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -15,6 +15,13 @@ export default defineNuxtConfig({
           href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap',
         },
       ],
+      script: [
+        {
+          async: true,
+          defer: true,
+          src: 'https://buttons.github.io/buttons.js',
+        },
+      ],
     },
   },
 })
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 06f5fcf..0cd9762 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,114 +1,4 @@
 <script setup>
-import { h } from 'vue'
-import CustomToast from '@/components/CustomToast.vue'
-import AdvancedToast from '@/components/AdvancedToast.vue'
-import { useNuxtApp } from '#app'
-
-const { $nt } = useNuxtApp()
-let i = 0
-
-function showBasicToast() {
-  i++
-  $nt.show(`Hello, ${i} world!`)
-}
-
-function showCustomToast() {
-  i++
-  $nt.show({
-    content: () =>
-      h(CustomToast, {
-        message: `Hello ${i} from Nuxt module playground!`,
-      }),
-    transition: {
-      name: 'fadeOut',
-    },
-    maxToasts: 5,
-    theme: {
-      containerId: 'nt-container-bottom-right',
-      containerClass: [
-        'absolute',
-        'inset-0',
-        'pointer-events-none',
-        'p-4',
-        'flex',
-        'flex-col-reverse',
-        'items-start',
-        'gap-2',
-      ].join(' '),
-      wrapperClass: 'pointer-events-auto cursor-pointer',
-    },
-  })
-}
-
-async function showAdvancedToast() {
-  i++
-  const toast = await $nt.show({
-    content: () =>
-      h(AdvancedToast, {
-        message: `Hello ${i} from Nuxt module playground!`,
-      }),
-    dismissible: false,
-    maxToasts: 1,
-    theme: {
-      containerId: 'nt-container-top-left',
-      containerClass: [
-        'absolute',
-        'inset-0',
-        'pointer-events-none',
-        'p-4',
-        'flex',
-        'flex-col',
-        'items-end',
-        'gap-2',
-      ].join(' '),
-      wrapperClass: [
-        'pointer-events-auto',
-        'rounded',
-        'outline-slate-300',
-        'outline-offset-2',
-        'focus:outline',
-        'focus:outline-2',
-        'focus-within:outline',
-        'focus-within:outline-2',
-      ].join(' '),
-    },
-    transition: {
-      enterActiveClass: 'transition duration-300 ease-out',
-      enterFromClass: 'transform translate-x-full opacity-0',
-      enterToClass: 'transform translate-x-0 opacity-100',
-      leaveActiveClass: 'transition duration-300 ease-in',
-      leaveFromClass: 'transform translate-x-0 opacity-100',
-      leaveToClass: 'transform translate-x-full opacity-0',
-    },
-  })
-
-  toast.el.focus()
-}
-function clearAllToast() {
-  $nt.clearAll()
-}
-function clearTopLeftToast() {
-  $nt.clear('nt-container-top-left')
-}
-
-const demoCode = `
-# Using pnpm
-pnpm add -D @cssninja/nuxt-toaster
-
-# Using yarn
-pnpm add -D @cssninja/nuxt-toaster
-
-# Using npm
-npm install --save-dev @cssninja/nuxt-toaster
-`
-
-const demoCode2 = `
-export default defineNuxtConfig({
-  modules: [
-    '@cssninja/nuxt-toaster'
-  ]
-})
-`
 </script>
 
 <template>
@@ -127,177 +17,8 @@ export default defineNuxtConfig({
 
     <ContentExampleCustom />
 
-    <Section>
-      <div class="mx-auto w-full max-w-7xl">
-        <p>Nuxt module playground!</p>
-        <button
-          class="m-1 rounded border border-slate-200 px-2 py-1"
-          @click="showBasicToast"
-        >
-          show basic toast
-        </button>
-        <button
-          class="m-1 rounded border border-slate-200 px-2 py-1"
-          @click="showCustomToast"
-        >
-          show custom toast
-        </button>
-        <button
-          class="m-1 rounded border border-slate-200 px-2 py-1"
-          @click="showAdvancedToast"
-        >
-          show advanced toast
-        </button>
-        <button
-          class="m-1 rounded border border-slate-200 px-2 py-1"
-          @click="clearTopLeftToast"
-        >
-          clear advanced toasts
-        </button>
-        <button
-          class="m-1 rounded border border-slate-200 px-2 py-1"
-          @click="clearAllToast"
-        >
-          clear all toast
-        </button>
-      </div>
-    </Section>
+    <ContentExampleAdvanced />
+
+    <ContentDesign />
   </div>
 </template>
-
-<style>
-/*Animations are taken from animate.css*/
-/* https://daneden.github.io/animate.css*/
-
-.fadeOut {
-  animation-name: fadeOut;
-}
-.fadeInDown {
-  animation-name: fadeInDown;
-}
-.fadeInUp {
-  animation-name: fadeInUp;
-}
-.fade-enter-active {
-  transition: opacity 300ms ease-in;
-}
-.fade-leave-active {
-  transition: opacity 150ms ease-out;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-@-moz-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-o-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-moz-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-o-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-moz-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-o-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-</style>

From 973bf192e8ca075dcdeb32544a639d5121f2e9e6 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 28 Sep 2022 22:51:04 +0100
Subject: [PATCH 11/16] feat: add end section

---
 package.json                                  |  1 +
 playground/components/Navigation.vue          | 10 +++--
 playground/components/content/Anatomy.vue     | 16 +++++---
 playground/components/content/Design.vue      | 28 +++++++++++++-
 playground/components/toast/IconDanger.vue    | 29 +++++++++++++++
 playground/components/toast/LabelWarning.vue  | 26 +++++++++++++
 playground/components/toast/UserLikeClose.vue | 37 +++++++++++++++++++
 playground/pages/index.vue                    |  2 +-
 pnpm-lock.yaml                                | 12 ++++++
 9 files changed, 148 insertions(+), 13 deletions(-)
 create mode 100644 playground/components/toast/IconDanger.vue
 create mode 100644 playground/components/toast/LabelWarning.vue
 create mode 100644 playground/components/toast/UserLikeClose.vue

diff --git a/package.json b/package.json
index 63cb2ff..c9cd497 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "prism-theme-vars": "0.2.3",
     "prismjs": "1.28.0",
     "vue-prism-component": "2.0.0",
+    "vue-scrollto": "^2.20.0",
     "standard-version": "^9.5.0"
   }
 }
diff --git a/playground/components/Navigation.vue b/playground/components/Navigation.vue
index 52a3cfa..820f3ff 100644
--- a/playground/components/Navigation.vue
+++ b/playground/components/Navigation.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VueScrollTo from 'vue-scrollto'
 const { toggleDark } = useDarkmode()
 const { y } = useWindowScrollFixed()
 
@@ -9,6 +10,7 @@ const isScrolled = computed(() => {
 })
 
 const isChecked = ref(false)
+const scrollTo = VueScrollTo.scrollTo
 </script>
 
 <template>
@@ -61,10 +63,10 @@ const isChecked = ref(false)
           <div
             class="flex flex-col lg:flex-row items-center justify-end gap-x-5 lg:pr-4 space-y-3 lg:space-y-0"
           >
-            <NuxtLink
-              to="/"
-              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
-              >Examples</NuxtLink
+            <a
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 cursor-pointer tw-accessibility"
+              @click.prevent="scrollTo(`#demo-examples`, 800, { offset: 5 })"
+              >Examples</a
             >
             <NuxtLink
               to="/api"
diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
index caf04ba..71da63a 100644
--- a/playground/components/content/Anatomy.vue
+++ b/playground/components/content/Anatomy.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+import VueScrollTo from 'vue-scrollto'
+const scrollTo = VueScrollTo.scrollTo
+</script>
+
 <template>
   <Section>
     <hr class="mb-10 pt-10 border-t border-muted-200 dark:border-muted-800" />
@@ -30,7 +35,11 @@
           Toaster provides
           <a href="#" class="font-medium text-primary-500">Theming options</a>
           as well as Tailwind and plain CSS based
-          <a href="#" class="font-medium text-primary-500">examples</a>.
+          <a
+            class="font-medium text-primary-500 cursor-pointer"
+            @click.prevent="scrollTo(`#demo-examples`, 800, { offset: 5 })"
+            >examples</a
+          >.
         </p>
       </div>
     </div>
@@ -46,11 +55,6 @@
             v-for="index in 144"
             :key="index"
             class="border border-muted-200 dark:border-muted-800"
-            :class="[
-              //index <= 12 && 'border-t-0',
-              //index >= 133 && 'border-b-0',
-              //index === 0 && '!border-l-0',
-            ]"
           ></div>
         </div>
 
diff --git a/playground/components/content/Design.vue b/playground/components/content/Design.vue
index ff9718f..2aa1c50 100644
--- a/playground/components/content/Design.vue
+++ b/playground/components/content/Design.vue
@@ -14,14 +14,23 @@
     </div>
 
     <!-- Toast grid -->
-    <div class="flex flex-col gap-6 w-full mx-auto pb-16">
+    <div class="flex flex-col gap-6 w-full mx-auto pb-12">
       <!-- Row -->
       <div class="flex flex-col md:flex-row justify-center gap-6">
-        <div class="w-full md:max-w-[280px]">
+        <div class="w-full md:max-w-[270px]">
           <ToastIconSuccess />
         </div>
       </div>
       <!-- Row -->
+      <div class="flex flex-col md:flex-row justify-center gap-6 w-full">
+        <div>
+          <ToastUserLikeClose />
+        </div>
+        <div>
+          <ToastLabelWarning />
+        </div>
+      </div>
+      <!-- Row -->
       <div
         class="flex flex-col md:flex-row justify-center gap-6 w-full max-w-5xl mx-auto"
       >
@@ -44,6 +53,21 @@
           <ToastLabelSuccess />
         </div>
       </div>
+      <!-- Row -->
+      <div class="flex flex-col md:flex-row justify-center gap-6">
+        <div class="w-full md:max-w-[250px]">
+          <ToastIconDanger />
+        </div>
+      </div>
+    </div>
+    <!-- Toggle -->
+    <div class="w-full pb-16">
+      <NuxtLink
+        to="/api"
+        class="w-full inline-flex justify-center text-sm font-medium underline-offset-2 hover:underline text-primary-500 cursor-pointer"
+      >
+        Get started with the docs
+      </NuxtLink>
     </div>
   </Section>
 </template>
\ No newline at end of file
diff --git a/playground/components/toast/IconDanger.vue b/playground/components/toast/IconDanger.vue
new file mode 100644
index 0000000..42c7647
--- /dev/null
+++ b/playground/components/toast/IconDanger.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="w-full flex items-center gap-3 py-3 pl-3 pr-6 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
+  >
+    <div
+      class="h-11 w-11 flex items-center justify-center rounded-full text-rose-500 bg-rose-100 dark:text-white dark:bg-rose-500"
+    >
+      <svg class="w-5 h-5" viewBox="0 0 256 256">
+        <path
+          fill="currentColor"
+          d="M40 114.7V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8v58.7c0 84-71.3 111.8-85.5 116.5a7.2 7.2 0 0 1-5 0C111.3 226.5 40 198.7 40 114.7Z"
+          opacity=".2"
+        />
+        <path
+          fill="currentColor"
+          d="M208 40H48a16 16 0 0 0-16 16v58.7c0 89.4 75.8 119.1 91 124.1a14.3 14.3 0 0 0 10 0c15.2-5 91-34.7 91-124.1V56a16 16 0 0 0-16-16Zm0 74.7c0 78.2-66.4 104.4-80 108.9c-13.5-4.5-80-30.6-80-108.9V56h160Z"
+        />
+        <path
+          fill="currentColor"
+          d="M128 144a8 8 0 0 0 8-8V96a8 8 0 0 0-16 0v40a8 8 0 0 0 8 8Z"
+        />
+        <circle cx="128" cy="172" r="12" fill="currentColor" />
+      </svg>
+    </div>
+    <span class="text-sm text-muted-600 dark:text-muted-400"
+      >Something went wrong!</span
+    >
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/LabelWarning.vue b/playground/components/toast/LabelWarning.vue
new file mode 100644
index 0000000..1406608
--- /dev/null
+++ b/playground/components/toast/LabelWarning.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+  >
+    <div
+      class="h-16 w-16 flex items-center justify-center text-amber-500 bg-amber-100 dark:bg-amber-500"
+    >
+      <svg class="w-6 h-6" viewBox="0 0 256 256">
+        <path
+          fill="currentColor"
+          d="m96 240l16-80l-64-24L160 16l-16 80l64 24L96 240z"
+          opacity=".2"
+        />
+        <path
+          fill="currentColor"
+          d="M96 248a8.4 8.4 0 0 1-3.7-.9a8.1 8.1 0 0 1-4.1-8.7l14.6-73.3l-57.6-21.6a8.2 8.2 0 0 1-5-5.7a7.9 7.9 0 0 1 2-7.3l112-120a8 8 0 0 1 13.6 7l-14.6 73.4l57.6 21.6a7.9 7.9 0 0 1 3 12.9l-112 120A7.7 7.7 0 0 1 96 248ZM62 132.7l52.8 19.8a7.9 7.9 0 0 1 5 9l-10.4 52.4l84.6-90.6l-52.8-19.8a7.9 7.9 0 0 1-5-9.1L146.6 42Z"
+        />
+      </svg>
+    </div>
+    <div class="pr-6 pl-4">
+      <span class="text-sm text-stone-600 dark:text-muted-400"
+        >Power level is critical!</span
+      >
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/components/toast/UserLikeClose.vue b/playground/components/toast/UserLikeClose.vue
new file mode 100644
index 0000000..133486c
--- /dev/null
+++ b/playground/components/toast/UserLikeClose.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="w-full flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
+  >
+    <div
+      class="inline-flex justify-center items-center relative w-10 h-10 rounded-full"
+    >
+      <img
+        src="https://media.cssninja.io/shuriken/avatars/15.svg"
+        class="object-cover max-w-full rounded-full dark:border-transparent shadow-sm"
+        alt="Avatar image"
+      />
+    </div>
+    <div class="mr-6">
+      <span
+        class="block font-semibold text-sm text-muted-800 dark:text-muted-100"
+        >Aaron S.</span
+      >
+      <span class="block text-xs text-muted-400">Liked your reply</span>
+    </div>
+    <button
+      type="button"
+      class="h-9 w-9 flex items-center justify-center rounded-full ml-auto text-muted-700 dark:text-muted-400 hover:bg-muted-100 dark:hover:bg-muted-700 transition-colors duration-300 tw-accessibility"
+    >
+      <svg class="w-4 h-4" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 0cd9762..718875d 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -13,7 +13,7 @@
 
     <ContentAnatomy />
 
-    <ContentExamplePlain />
+    <ContentExamplePlain id="demo-examples" />
 
     <ContentExampleCustom />
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b48b6b5..3041585 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,7 @@ specifiers:
   prismjs: 1.28.0
   standard-version: ^9.5.0
   vue-prism-component: 2.0.0
+  vue-scrollto: ^2.20.0
 
 dependencies:
   '@nuxt/kit': 3.0.0-rc.11
@@ -41,6 +42,7 @@ devDependencies:
   prismjs: 1.28.0
   standard-version: 9.5.0
   vue-prism-component: 2.0.0
+  vue-scrollto: 2.20.0
 
 packages:
 
@@ -1657,6 +1659,10 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
 
+  /bezier-easing/2.1.0:
+    resolution: {integrity: sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==}
+    dev: true
+
   /big.js/5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
     dev: true
@@ -7844,6 +7850,12 @@ packages:
       vue: 3.2.39
     dev: true
 
+  /vue-scrollto/2.20.0:
+    resolution: {integrity: sha512-7i+AGKJTThZnMEkhIPgrZjyAX+fXV7/rGdg+CV283uZZwCxwiMXaBLTmIc5RTA4uwGnT+E6eJle3mXQfM2OD3A==}
+    dependencies:
+      bezier-easing: 2.1.0
+    dev: true
+
   /vue/3.2.39:
     resolution: {integrity: sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==}
     dependencies:

From 9b5d35477f997722e8164343538d418380f2312b Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 29 Sep 2022 02:21:08 +0100
Subject: [PATCH 12/16] feat: add hero random toasts

---
 playground/assets/css/main.css                |  1 +
 playground/assets/css/modules/nt.css          |  2 +
 playground/assets/css/modules/utilities.css   |  5 ++
 playground/components/Hero.vue                | 58 ++++++++++++++++++-
 .../components/content/ExamplePlain.vue       | 14 ++---
 5 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 playground/assets/css/modules/utilities.css

diff --git a/playground/assets/css/main.css b/playground/assets/css/main.css
index 95e9847..d56011e 100644
--- a/playground/assets/css/main.css
+++ b/playground/assets/css/main.css
@@ -1,3 +1,4 @@
+@import './modules/utilities.css';
 @import './modules/accessibility.css';
 @import './modules/nt.css';
 
diff --git a/playground/assets/css/modules/nt.css b/playground/assets/css/modules/nt.css
index 949870b..4296f83 100644
--- a/playground/assets/css/modules/nt.css
+++ b/playground/assets/css/modules/nt.css
@@ -27,6 +27,8 @@ Base
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   z-index: 100;
   pointer-events: none;
diff --git a/playground/assets/css/modules/utilities.css b/playground/assets/css/modules/utilities.css
new file mode 100644
index 0000000..4a3f593
--- /dev/null
+++ b/playground/assets/css/modules/utilities.css
@@ -0,0 +1,5 @@
+@layer utilities {
+  .button-loading {
+    @apply relative !text-transparent after:absolute after:h-5 after:w-5 after:rounded-full after:border-[0.20rem] after:border-slate-300 after:border-t-gray-100 after:opacity-90 after:animate-spin;
+  }
+}
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
index 3955a07..4afcef8 100644
--- a/playground/components/Hero.vue
+++ b/playground/components/Hero.vue
@@ -1,3 +1,53 @@
+<script setup>
+import { useNuxtApp } from '#app'
+const positionXList = ref(['left', 'center', 'right'])
+const positionYList = ref(['top', 'bottom'])
+const colorList = ref(['info', 'success', 'warning', 'danger'])
+
+const { $nt } = useNuxtApp()
+let i = 0
+const isLoading = ref(false)
+
+function showRandomToast() {
+  isLoading.value = true
+  i++
+  $nt.show({
+    content: `Hello, Iam a Nuxt toast`,
+    duration: 1000,
+    maxToasts: 1,
+    theme: {
+      containerId: 'nt-container',
+      containerClass: [
+        `nt-${
+          positionYList.value[
+            Math.floor(Math.random() * positionYList.value.length)
+          ]
+        }-${
+          positionXList.value[
+            Math.floor(Math.random() * positionXList.value.length)
+          ]
+        }`,
+      ].join(' '),
+      wrapperClass: `nt-${
+        colorList.value[Math.floor(Math.random() * colorList.value.length)]
+      }`,
+    },
+    transition: {
+      enterActiveClass: 'nt-enter-active',
+      enterFromClass: 'nt-enter-from',
+      enterToClass: 'nt-enter-to',
+      leaveActiveClass: 'nt-leave-active',
+      leaveFromClass: 'nt-leave-from',
+      leaveToClass: 'nt-leave-to',
+    },
+  })
+  const timeout = setTimeout(() => {
+    isLoading.value = false
+    clearTimeout(timeout)
+  }, 1000)
+}
+</script>
+
 <template>
   <section
     class="min-h-screen w-full overflow-hidden bg-muted-100 dark:bg-muted-900 ltablet:bg-red"
@@ -83,7 +133,13 @@
             <!-- Copy button -->
             <button
               type="button"
-              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300 tw-accessibility"
+              class="relative w-full lg:w-auto flex lg:inline-flex items-center justify-center lg:absolute lg:top-2 lg:right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300 tw-accessibility"
+              :class="
+                isLoading
+                  ? 'button-loading pointer-events-none opacity-80'
+                  : 'animate-pulse'
+              "
+              @click="showRandomToast()"
             >
               Try Me
             </button>
diff --git a/playground/components/content/ExamplePlain.vue b/playground/components/content/ExamplePlain.vue
index 5350e22..c444b6a 100644
--- a/playground/components/content/ExamplePlain.vue
+++ b/playground/components/content/ExamplePlain.vue
@@ -3,7 +3,7 @@ import { plainExample } from '@/assets/examples'
 
 const activeTab = ref('tab-1')
 
-const positionY = ref('top')
+const positionY = ref('bottom')
 const positionX = ref('right')
 const color = ref('default')
 const message = ref('You invited Clarke!')
@@ -163,18 +163,18 @@ const duration = 3000
                               v-model="positionX"
                               type="radio"
                               name="x_position"
-                              value="right"
+                              value="left"
                               class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
                               class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
                               :class="
-                                positionX === 'right'
+                                positionX === 'left'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
                                   : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
-                              Right
+                              Left
                             </div>
                           </div>
                           <div class="relative">
@@ -201,18 +201,18 @@ const duration = 3000
                               v-model="positionX"
                               type="radio"
                               name="x_position"
-                              value="left"
+                              value="right"
                               class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
                               class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
                               :class="
-                                positionX === 'left'
+                                positionX === 'right'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
                                   : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
-                              Left
+                              Right
                             </div>
                           </div>
                         </div>

From 743aa67371a18835ded503ebaab2392e2943bda3 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 29 Sep 2022 09:48:57 +0100
Subject: [PATCH 13/16] fix: example buttons

---
 .../components/content/ExampleAdvanced.vue    | 48 +++++++++----------
 .../components/content/ExampleCustom.vue      | 48 +++++++++----------
 .../components/content/ExamplePlain.vue       | 40 ++++++++--------
 3 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/playground/components/content/ExampleAdvanced.vue b/playground/components/content/ExampleAdvanced.vue
index 2d70eeb..6361d6c 100644
--- a/playground/components/content/ExampleAdvanced.vue
+++ b/playground/components/content/ExampleAdvanced.vue
@@ -121,10 +121,10 @@ const duration = 3000
                             type="radio"
                             name="y_position"
                             value="top"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               positionY === 'top'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -140,10 +140,10 @@ const duration = 3000
                             type="radio"
                             name="y_position"
                             value="bottom"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               positionY === 'bottom'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -167,18 +167,18 @@ const duration = 3000
                               v-model="positionX"
                               type="radio"
                               name="x_position"
-                              value="right"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              value="left"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
-                                positionX === 'right'
+                                positionX === 'left'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
                                   : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
-                              Right
+                              Left
                             </div>
                           </div>
                           <div class="relative">
@@ -187,10 +187,10 @@ const duration = 3000
                               type="radio"
                               name="x_position"
                               value="center"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
                                 positionX === 'center'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -205,18 +205,18 @@ const duration = 3000
                               v-model="positionX"
                               type="radio"
                               name="x_position"
-                              value="left"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              value="right"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
-                                positionX === 'left'
+                                positionX === 'right'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
                                   : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
-                              Left
+                              Right
                             </div>
                           </div>
                         </div>
@@ -234,10 +234,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="success"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'success'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -253,10 +253,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="info"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'info'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -272,10 +272,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="warning"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'warning'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -291,10 +291,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="danger"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'danger'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
diff --git a/playground/components/content/ExampleCustom.vue b/playground/components/content/ExampleCustom.vue
index 5ecd035..a231408 100644
--- a/playground/components/content/ExampleCustom.vue
+++ b/playground/components/content/ExampleCustom.vue
@@ -116,10 +116,10 @@ const duration = 3000
                             type="radio"
                             name="y_position"
                             value="top"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               positionY === 'top'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -135,10 +135,10 @@ const duration = 3000
                             type="radio"
                             name="y_position"
                             value="bottom"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               positionY === 'bottom'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -162,18 +162,18 @@ const duration = 3000
                               v-model="positionX"
                               type="radio"
                               name="x_position"
-                              value="right"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              value="left"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
-                                positionX === 'right'
+                                positionX === 'left'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
                                   : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
-                              Right
+                              Left
                             </div>
                           </div>
                           <div class="relative">
@@ -182,10 +182,10 @@ const duration = 3000
                               type="radio"
                               name="x_position"
                               value="center"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
                                 positionX === 'center'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -200,18 +200,18 @@ const duration = 3000
                               v-model="positionX"
                               type="radio"
                               name="x_position"
-                              value="left"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              value="right"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
-                                positionX === 'left'
+                                positionX === 'right'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
                                   : 'text-muted-500 dark:text-muted-400 bg-white dark:bg-muted-800 border-muted-200 dark:border-muted-700'
                               "
                             >
-                              Left
+                              Right
                             </div>
                           </div>
                         </div>
@@ -229,10 +229,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="success"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'success'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -248,10 +248,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="info"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'info'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -267,10 +267,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="warning"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'warning'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -286,10 +286,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="danger"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'danger'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
diff --git a/playground/components/content/ExamplePlain.vue b/playground/components/content/ExamplePlain.vue
index c444b6a..aae0a39 100644
--- a/playground/components/content/ExamplePlain.vue
+++ b/playground/components/content/ExamplePlain.vue
@@ -117,10 +117,10 @@ const duration = 3000
                             type="radio"
                             name="y_position"
                             value="top"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               positionY === 'top'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -136,10 +136,10 @@ const duration = 3000
                             type="radio"
                             name="y_position"
                             value="bottom"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               positionY === 'bottom'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -164,10 +164,10 @@ const duration = 3000
                               type="radio"
                               name="x_position"
                               value="left"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
                                 positionX === 'left'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -183,10 +183,10 @@ const duration = 3000
                               type="radio"
                               name="x_position"
                               value="center"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
                                 positionX === 'center'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -202,10 +202,10 @@ const duration = 3000
                               type="radio"
                               name="x_position"
                               value="right"
-                              class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                              class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                             />
                             <div
-                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                              class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                               :class="
                                 positionX === 'right'
                                   ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -230,10 +230,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="default"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'default'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -249,10 +249,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="success"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'success'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -268,10 +268,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="info"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'info'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -287,10 +287,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="warning"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'warning'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'
@@ -306,10 +306,10 @@ const duration = 3000
                             type="radio"
                             name="t_color"
                             value="danger"
-                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
+                            class="peer absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
                           />
                           <div
-                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg"
+                            class="inline-flex items-center justify-center w-16 h-8 py-2 px-4 font-semibold text-xs border-2 rounded-lg peer-focus-visible:tw-accessibility-static"
                             :class="
                               color === 'danger'
                                 ? 'border-primary-500 bg-primary-500/10 text-primary-500'

From 0c1f8cb6a3d53d3dbd9fbe5aeef0eef45fea51f6 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 29 Sep 2022 14:06:04 +0100
Subject: [PATCH 14/16] feat: enhance anatomy section

---
 package.json                              |   3 +-
 playground/components/content/Anatomy.vue | 154 +++++++++++++++++++++-
 playground/components/mockup/Advanced.vue |  69 +++-------
 playground/components/mockup/Basic.vue    |  18 ++-
 playground/components/mockup/Custom.vue   |  18 ++-
 playground/pages/api.vue                  |   9 +-
 pnpm-lock.yaml                            | 116 ++++++++++++++++
 7 files changed, 327 insertions(+), 60 deletions(-)

diff --git a/package.json b/package.json
index c9cd497..01b7dab 100644
--- a/package.json
+++ b/package.json
@@ -42,8 +42,9 @@
     "nuxt": "^3.0.0-rc.11",
     "prism-theme-vars": "0.2.3",
     "prismjs": "1.28.0",
+    "standard-version": "^9.5.0",
     "vue-prism-component": "2.0.0",
     "vue-scrollto": "^2.20.0",
-    "standard-version": "^9.5.0"
+    "vue3-markdown-it": "^1.0.10"
   }
 }
diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
index 71da63a..8e5ae22 100644
--- a/playground/components/content/Anatomy.vue
+++ b/playground/components/content/Anatomy.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import VueScrollTo from 'vue-scrollto'
 const scrollTo = VueScrollTo.scrollTo
+
+const activeTab = ref('custom')
 </script>
 
 <template>
@@ -44,6 +46,77 @@ const scrollTo = VueScrollTo.scrollTo
       </div>
     </div>
 
+    <div class="w-full max-w-xl mx-auto flex flex-col gap-2">
+      <!-- Tabs -->
+      <div class="flex items-center justify-center overflow-hidden mb-4">
+        <div
+          class="flex justify-center gap-x-6 grow font-sans border-b border-muted-200 dark:border-muted-800 xs:overflow-x-auto"
+        >
+          <button
+            type="button"
+            class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+            :class="
+              activeTab === 'unstyled'
+                ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+            "
+            @click="activeTab = 'unstyled'"
+          >
+            Unstyled
+          </button>
+          <button
+            type="button"
+            class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+            :class="
+              activeTab === 'styled'
+                ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+            "
+            @click="activeTab = 'styled'"
+          >
+            CSS Styled
+          </button>
+          <button
+            type="button"
+            class="pb-2 select-none border-b-2 cursor-pointer transition-colors duration-300"
+            :class="
+              activeTab === 'custom'
+                ? 'text-muted-700 dark:text-muted-100 border-primary-500'
+                : 'text-muted-300 hover:text-muted-400 dark:text-muted-500 dark:hover:text-muted-400 border-transparent'
+            "
+            @click="activeTab = 'custom'"
+          >
+            Custom UI
+          </button>
+        </div>
+      </div>
+      <div class="text-center mb-4">
+        <p
+          v-if="activeTab === 'unstyled'"
+          class="text-sm text-muted-500 dark:text-muted-400"
+        >
+          Nuxt Toaster is a toast engine, meaning that it primarily delivers
+          <strong>unstyled</strong> toast elements. Styling is done separatly
+          via CSS and / or theming options.
+        </p>
+        <p
+          v-else-if="activeTab === 'styled'"
+          class="text-sm text-muted-500 dark:text-muted-400"
+        >
+          If you need basic styles Nuxt Toaster provides prebuilt
+          <strong>CSS presets</strong> that you can import into your project to
+          enable a basic set of styles.
+        </p>
+        <p
+          v-else-if="activeTab === 'custom'"
+          class="text-sm text-muted-500 dark:text-muted-400"
+        >
+          As a rendering engine Nuxt Toaster can render external components that
+          can also receive data and properties from the toast container itself.
+        </p>
+      </div>
+    </div>
+
     <div class="relative w-full max-w-3xl mx-auto">
       <div
         class="group cursor-pointer relative w-full h-[380px] xs:h-[300px] flex items-center justify-center mx-auto"
@@ -62,8 +135,53 @@ const scrollTo = VueScrollTo.scrollTo
           class="absolute top-1/2 inset-x-0 -translate-y-1/2 w-[380px] h-[380px] xs:w-[300px] xs:h-[300px] mx-auto border-2 border-muted-100 dark:border-muted-900 scale-90 z-20"
         ></div>
 
-        <!-- Toast -->
+        <!-- Toast Unstyled -->
         <div
+          v-if="activeTab === 'unstyled'"
+          class="relative w-full max-w-sm flex items-center rounded-xl border-2 border-dashed border-muted-300 dark:border-muted-500 z-30 xs:scale-90"
+        >
+          <!-- Toast content -->
+          <div
+            class="relative w-full h-24 xs:h-20 flex items-center justify-center px-8"
+          >
+            <span class="text-lg xs:text-sm text-muted-600 dark:text-muted-400"
+              >Nuxt has been installed!</span
+            >
+            <!-- Legend -->
+            <div class="absolute -top-24 inset-x-0 mx-auto text-center">
+              <span
+                class="text-muted-500 dark:text-muted-400 opacity-0 group-hover:opacity-100 after:content-[''] after:absolute after:top-8 after:inset-x-0 after:mx-auto after:h-0 group-hover:after:h-12 after:w-px after:pr-1 after:border-l-2 after:border-muted-300 dark:after:border-muted-700 transition-all duration-300"
+                >Unstyled content</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <!-- Toast Styled -->
+        <div
+          v-else-if="activeTab === 'styled'"
+          class="relative w-full max-w-sm flex items-center shadow-2xl shadow-muted-400/10 dark:shadow-muted-800/10 z-30 xs:scale-90"
+        >
+          <!-- Toast content -->
+          <div
+            class="relative w-full h-24 xs:h-20 flex items-center px-8 rounded-xl bg-white dark:bg-muted-800"
+          >
+            <span class="text-lg xs:text-sm text-muted-600 dark:text-muted-400"
+              >Nuxt has been installed!</span
+            >
+            <!-- Legend -->
+            <div class="absolute -top-24 inset-x-0 mx-auto text-center">
+              <span
+                class="text-muted-500 dark:text-muted-400 opacity-0 group-hover:opacity-100 after:content-[''] after:absolute after:top-8 after:inset-x-0 after:mx-auto after:h-0 group-hover:after:h-12 after:w-px after:pr-1 after:border-l-2 after:border-muted-300 dark:after:border-muted-700 transition-all duration-300"
+                >Styled content</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <!-- Toast Custom -->
+        <div
+          v-else-if="activeTab === 'custom'"
           class="relative w-full max-w-md flex items-center shadow-2xl shadow-muted-400/10 dark:shadow-muted-800/10 z-30 xs:scale-90"
         >
           <!-- Toast icon -->
@@ -135,5 +253,39 @@ const scrollTo = VueScrollTo.scrollTo
         </div>
       </div>
     </div>
+
+    <div class="relative w-full max-w-lg mx-auto mt-10">
+      <div
+        class="w-full flex gap-6 p-6 rounded-xl border-2 border-primary-500 bg-primary-100 dark:bg-primary-500/10"
+      >
+        <svg
+          class="w-8 h-8 min-w-[2rem] text-primary-500"
+          viewBox="0 0 256 256"
+        >
+          <path fill="currentColor" d="M216 160h-56v56l56-56z" opacity=".2" />
+          <path
+            fill="currentColor"
+            d="M96 104h64a8 8 0 0 0 0-16H96a8 8 0 0 0 0 16Zm0 32h64a8 8 0 0 0 0-16H96a8 8 0 0 0 0 16Zm32 16H96a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16Z"
+          />
+          <path
+            fill="currentColor"
+            d="M224 156.7V48a16 16 0 0 0-16-16H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h108.7a15.9 15.9 0 0 0 11.3-4.7l51.3-51.3a16.3 16.3 0 0 0 3.3-4.9h.1a17.4 17.4 0 0 0 1.3-6.4ZM48 48h160v104h-48a8 8 0 0 0-8 8v48H48Zm148.7 120L168 196.7V168Z"
+          />
+        </svg>
+        <div>
+          <h4
+            class="font-medium text-lg text-primary-700 dark:text-primary-500 mb-1"
+          >
+            Important note
+          </h4>
+          <p class="text-sm text-primary-600 dark:text-primary-300">
+            Please keep in mind that Nuxt Toaster is a
+            <strong>toast rendering engine</strong> and not a classic toasting
+            library that ships with prebuilt styles. Styles presets and custom
+            examples are provided for inspiration, so you can build you own.
+          </p>
+        </div>
+      </div>
+    </div>
   </Section>
 </template>
\ No newline at end of file
diff --git a/playground/components/mockup/Advanced.vue b/playground/components/mockup/Advanced.vue
index 2ea76e4..3a92889 100644
--- a/playground/components/mockup/Advanced.vue
+++ b/playground/components/mockup/Advanced.vue
@@ -22,57 +22,6 @@ const props = withDefaults(defineProps<CustomProps>(), {
 const { $nt } = useNuxtApp()
 let i = 0
 
-/* function showCustomToast() {
-  i++
-  $nt.show({
-    content: () =>
-      h(ToastCustom, {
-        title: 'Hi there',
-        message: `You just poked Anna!`,
-      }),
-    duration: props.duration,
-    maxToasts: 5,
-    theme: {
-      containerId: 'nt-container-custom',
-      containerClass: [
-        'fixed',
-        'top-0',
-        'inset-0',
-        'h-full',
-        'w-full',
-        'pointer-events-none',
-        'md:p-4',
-        'flex',
-        'z-[100]',
-        props.positionY === 'top' ? 'flex-col' : 'flex-col-reverse',
-        props.positionX === 'left' ? 'items-start' : '',
-        props.positionX === 'center' ? 'items-center' : '',
-        props.positionX === 'right' ? 'items-end' : '',
-        props.color === 'info' ? 'text-sky-500' : '',
-        props.color === 'success' ? 'text-teal-500' : '',
-        props.color === 'warning' ? 'text-yellow-500' : '',
-        props.color === 'danger' ? 'text-rose-500' : '',
-        'gap-2',
-      ].join(' '),
-      wrapperClass: 'w-full md:max-w-xs pointer-events-auto cursor-pointer',
-    },
-    transition: {
-      enterActiveClass: 'transition-all duration-300 ease-out',
-      enterFromClass:
-        props.positionY === 'top'
-          ? 'transform -translate-y-1 opacity-0'
-          : 'transform translate-y-1 opacity-0',
-      enterToClass: 'transform translate-y-0 opacity-100',
-      leaveActiveClass: 'transition duration-300 ease-in',
-      leaveFromClass: 'transform translate-y-0 opacity-100',
-      leaveToClass:
-        props.positionY === 'top'
-          ? 'transform -translate-y-1 opacity-0'
-          : 'transform translate-y-1 opacity-0',
-    },
-  })
-} */
-
 async function showAdvancedToast() {
   i++
   const toast = await $nt.show({
@@ -135,7 +84,7 @@ async function showAdvancedToast() {
     
     <template>
   <div
-    class="flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
+    class="group flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
   >
     <div
       class="h-2/3 w-9/12 rounded-tl-lg border-t-2 border-l-2 border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-xl shadow-muted-400/10"
@@ -166,7 +115,7 @@ async function showAdvancedToast() {
             </h4>
             <p class="text-sm xs:text-[0.7rem] text-muted-400">Scrum Master</p>
           </div>
-          <div class="ml-auto">
+          <div class="relative ml-auto">
             <button
               type="button"
               class="inline-flex items-center justify-center h-10 py-2 px-4 text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors duration-300"
@@ -174,6 +123,20 @@ async function showAdvancedToast() {
             >
               Hire
             </button>
+            <!-- Bouncing arrow -->
+            <div
+              class="absolute -top-8 inset-x-0 flex items-center justify-center group-hover:opacity-0 pointer-events-none transition-all duration-300"
+            >
+              <svg
+                class="w-7 h-7 text-primary-400 dark:text-white animate-bounce"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 4a1 1 0 0 1 1 1v11.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.586V5a1 1 0 0 1 1-1z"
+                />
+              </svg>
+            </div>
           </div>
         </div>
         <div class="py-8 pl-6 space-y-3">
diff --git a/playground/components/mockup/Basic.vue b/playground/components/mockup/Basic.vue
index e198584..14b1e8d 100644
--- a/playground/components/mockup/Basic.vue
+++ b/playground/components/mockup/Basic.vue
@@ -44,7 +44,7 @@ function showBasicToast() {
 
 <template>
   <div
-    class="flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
+    class="group flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
   >
     <div
       class="h-2/3 w-9/12 rounded-tl-lg border-t-2 border-l-2 border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-xl shadow-muted-400/10"
@@ -77,7 +77,7 @@ function showBasicToast() {
               Software Engineer
             </p>
           </div>
-          <div class="ml-auto">
+          <div class="relative ml-auto">
             <button
               type="button"
               class="inline-flex items-center justify-center h-10 py-2 px-4 text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors duration-300"
@@ -85,6 +85,20 @@ function showBasicToast() {
             >
               Invite
             </button>
+            <!-- Bouncing arrow -->
+            <div
+              class="absolute -top-8 inset-x-0 flex items-center justify-center group-hover:opacity-0 pointer-events-none transition-all duration-300"
+            >
+              <svg
+                class="w-7 h-7 text-primary-400 dark:text-white animate-bounce"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 4a1 1 0 0 1 1 1v11.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.586V5a1 1 0 0 1 1-1z"
+                />
+              </svg>
+            </div>
           </div>
         </div>
         <div class="py-8 pl-6 space-y-3">
diff --git a/playground/components/mockup/Custom.vue b/playground/components/mockup/Custom.vue
index 18f9b7f..7e40052 100644
--- a/playground/components/mockup/Custom.vue
+++ b/playground/components/mockup/Custom.vue
@@ -76,7 +76,7 @@ function showCustomToast() {
   
   <template>
   <div
-    class="flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
+    class="group flex h-[460px] w-[460px] xs:h-[320px] xs:w-[320px] rounded-full items-end justify-end overflow-hidden border-2 border-muted-200 dark:border-muted-800 bg-muted-50 dark:bg-muted-1000"
   >
     <div
       class="h-2/3 w-9/12 rounded-tl-lg border-t-2 border-l-2 border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-xl shadow-muted-400/10"
@@ -107,7 +107,7 @@ function showCustomToast() {
             </h4>
             <p class="text-sm xs:text-[0.7rem] text-muted-400">Sales Manager</p>
           </div>
-          <div class="ml-auto">
+          <div class="relative ml-auto">
             <button
               type="button"
               class="inline-flex items-center justify-center h-10 py-2 px-4 text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors duration-300"
@@ -115,6 +115,20 @@ function showCustomToast() {
             >
               Poke
             </button>
+            <!-- Bouncing arrow -->
+            <div
+              class="absolute -top-8 inset-x-0 flex items-center justify-center group-hover:opacity-0 pointer-events-none transition-all duration-300"
+            >
+              <svg
+                class="w-7 h-7 text-primary-400 dark:text-white animate-bounce"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 4a1 1 0 0 1 1 1v11.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.586V5a1 1 0 0 1 1-1z"
+                />
+              </svg>
+            </div>
           </div>
         </div>
         <div class="py-8 pl-6 space-y-3">
diff --git a/playground/pages/api.vue b/playground/pages/api.vue
index 2e3d649..9d5d0b1 100644
--- a/playground/pages/api.vue
+++ b/playground/pages/api.vue
@@ -1,3 +1,10 @@
+<script setup>
+</script>
+
 <template>
-  <h1>API page</h1>
+  <Section>
+    <div class="py-20">
+      <h2>Markdown</h2>
+    </div>
+  </Section>
 </template>
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3041585..1bf4fbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ specifiers:
   standard-version: ^9.5.0
   vue-prism-component: 2.0.0
   vue-scrollto: ^2.20.0
+  vue3-markdown-it: ^1.0.10
 
 dependencies:
   '@nuxt/kit': 3.0.0-rc.11
@@ -43,6 +44,7 @@ devDependencies:
   standard-version: 9.5.0
   vue-prism-component: 2.0.0
   vue-scrollto: 2.20.0
+  vue3-markdown-it: 1.0.10
 
 packages:
 
@@ -2733,6 +2735,10 @@ packages:
       tapable: 2.2.1
     dev: true
 
+  /entities/2.1.0:
+    resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
+    dev: true
+
   /entities/2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
     dev: true
@@ -4175,6 +4181,11 @@ packages:
   /hash-sum/2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
 
+  /highlight.js/11.6.0:
+    resolution: {integrity: sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
   /hookable/5.3.0:
     resolution: {integrity: sha512-4gTA2q08HT8G32uIW7Jpro3rSXgT2ZTM8R6+r7H7joq90eZlqFPPTvHD6w8WZUohIrbXbDperL96ilb6dkNxNw==}
     dev: true
@@ -4813,6 +4824,12 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
 
+  /linkify-it/3.0.3:
+    resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+
   /listhen/0.2.15:
     resolution: {integrity: sha512-F/IWj/aJLeokHAIVY+l3JoWRUnbRaf2F0cr+Ybc1YyozMA/yP0C2nf3c0Oi7vAbFvtfiwfWWfP7bIrQc/u5L1A==}
     dependencies:
@@ -4910,6 +4927,10 @@ packages:
     resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
     dev: true
 
+  /lodash.flow/3.5.0:
+    resolution: {integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==}
+    dev: true
+
   /lodash.isarguments/3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
     dev: true
@@ -5000,6 +5021,73 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /markdown-it-abbr/1.0.4:
+    resolution: {integrity: sha512-ZeA4Z4SaBbYysZap5iZcxKmlPL6bYA8grqhzJIHB1ikn7njnzaP8uwbtuXc4YXD5LicI4/2Xmc0VwmSiFV04gg==}
+    dev: true
+
+  /markdown-it-anchor/8.6.5_markdown-it@12.3.2:
+    resolution: {integrity: sha512-PI1qEHHkTNWT+X6Ip9w+paonfIQ+QZP9sCeMYi47oqhH+EsW8CrJ8J7CzV19QVOj6il8ATGbK2nTECj22ZHGvQ==}
+    peerDependencies:
+      '@types/markdown-it': '*'
+      markdown-it: '*'
+    dependencies:
+      markdown-it: 12.3.2
+    dev: true
+
+  /markdown-it-deflist/2.1.0:
+    resolution: {integrity: sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==}
+    dev: true
+
+  /markdown-it-emoji/2.0.2:
+    resolution: {integrity: sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==}
+    dev: true
+
+  /markdown-it-footnote/3.0.3:
+    resolution: {integrity: sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==}
+    dev: true
+
+  /markdown-it-highlightjs/3.6.0:
+    resolution: {integrity: sha512-ex+Lq3cVkprh0GpGwFyc53A/rqY6GGzopPCG1xMsf8Ya3XtGC8Uw9tChN1rWbpyDae7tBBhVHVcMM29h4Btamw==}
+    dependencies:
+      highlight.js: 11.6.0
+      lodash.flow: 3.5.0
+    dev: true
+
+  /markdown-it-ins/3.0.1:
+    resolution: {integrity: sha512-32SSfZqSzqyAmmQ4SHvhxbFqSzPDqsZgMHDwxqPzp+v+t8RsmqsBZRG+RfRQskJko9PfKC2/oxyOs4Yg/CfiRw==}
+    dev: true
+
+  /markdown-it-mark/3.0.1:
+    resolution: {integrity: sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A==}
+    dev: true
+
+  /markdown-it-sub/1.0.0:
+    resolution: {integrity: sha512-z2Rm/LzEE1wzwTSDrI+FlPEveAAbgdAdPhdWarq/ZGJrGW/uCQbKAnhoCsE4hAbc3SEym26+W2z/VQB0cQiA9Q==}
+    dev: true
+
+  /markdown-it-sup/1.0.0:
+    resolution: {integrity: sha512-E32m0nV9iyhRR7CrhnzL5msqic7rL1juWre6TQNxsnApg7Uf+F97JOKxUijg5YwXz86lZ0mqfOnutoryyNdntQ==}
+    dev: true
+
+  /markdown-it-task-lists/2.1.1:
+    resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
+    dev: true
+
+  /markdown-it-toc-done-right/4.2.0:
+    resolution: {integrity: sha512-UB/IbzjWazwTlNAX0pvWNlJS8NKsOQ4syrXZQ/C72j+jirrsjVRT627lCaylrKJFBQWfRsPmIVQie8x38DEhAQ==}
+    dev: true
+
+  /markdown-it/12.3.2:
+    resolution: {integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 2.1.0
+      linkify-it: 3.0.3
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+
   /mdast-util-from-markdown/0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:
@@ -5020,6 +5108,10 @@ packages:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: true
 
+  /mdurl/1.0.1:
+    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
+    dev: true
+
   /media-typer/0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -7356,6 +7448,10 @@ packages:
     hasBin: true
     dev: true
 
+  /uc.micro/1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: true
+
   /ufo/0.8.5:
     resolution: {integrity: sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==}
 
@@ -7866,6 +7962,26 @@ packages:
       '@vue/shared': 3.2.39
     dev: true
 
+  /vue3-markdown-it/1.0.10:
+    resolution: {integrity: sha512-mTvHu0zl7jrh7ojgaZ+tTpCLiS4CVg4bTgTu4KGhw/cRRY5YgIG8QgFAPu6kCzSW6Znc9a52Beb6hFvF4hSMkQ==}
+    dependencies:
+      markdown-it: 12.3.2
+      markdown-it-abbr: 1.0.4
+      markdown-it-anchor: 8.6.5_markdown-it@12.3.2
+      markdown-it-deflist: 2.1.0
+      markdown-it-emoji: 2.0.2
+      markdown-it-footnote: 3.0.3
+      markdown-it-highlightjs: 3.6.0
+      markdown-it-ins: 3.0.1
+      markdown-it-mark: 3.0.1
+      markdown-it-sub: 1.0.0
+      markdown-it-sup: 1.0.0
+      markdown-it-task-lists: 2.1.1
+      markdown-it-toc-done-right: 4.2.0
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+    dev: true
+
   /wcwidth/1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
     dependencies:

From 3a72849f1039787299d885ac29142b493fe730df Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 29 Sep 2022 14:12:20 +0100
Subject: [PATCH 15/16] fix: fix default unstyled toast not showing

---
 playground/components/content/Anatomy.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
index 8e5ae22..603633c 100644
--- a/playground/components/content/Anatomy.vue
+++ b/playground/components/content/Anatomy.vue
@@ -2,7 +2,7 @@
 import VueScrollTo from 'vue-scrollto'
 const scrollTo = VueScrollTo.scrollTo
 
-const activeTab = ref('custom')
+const activeTab = ref('unstyled')
 </script>
 
 <template>
@@ -103,7 +103,7 @@ const activeTab = ref('custom')
           v-else-if="activeTab === 'styled'"
           class="text-sm text-muted-500 dark:text-muted-400"
         >
-          If you need basic styles Nuxt Toaster provides prebuilt
+          If you need basic styling, Nuxt Toaster provides prebuilt
           <strong>CSS presets</strong> that you can import into your project to
           enable a basic set of styles.
         </p>
@@ -256,7 +256,7 @@ const activeTab = ref('custom')
 
     <div class="relative w-full max-w-lg mx-auto mt-10">
       <div
-        class="w-full flex gap-6 p-6 rounded-xl border-2 border-primary-500 bg-primary-100 dark:bg-primary-500/10"
+        class="w-full flex flex-col md:flex-row gap-6 p-6 rounded-xl border-2 border-primary-500 bg-primary-100 dark:bg-primary-500/10"
       >
         <svg
           class="w-8 h-8 min-w-[2rem] text-primary-500"

From 550d1819dd7a5e3b42404565bf473e89a71d9114 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 29 Sep 2022 14:17:45 +0100
Subject: [PATCH 16/16] fix: typos

---
 playground/components/content/Anatomy.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
index 603633c..18126e7 100644
--- a/playground/components/content/Anatomy.vue
+++ b/playground/components/content/Anatomy.vue
@@ -96,7 +96,7 @@ const activeTab = ref('unstyled')
           class="text-sm text-muted-500 dark:text-muted-400"
         >
           Nuxt Toaster is a toast engine, meaning that it primarily delivers
-          <strong>unstyled</strong> toast elements. Styling is done separatly
+          <strong>unstyled</strong> toast elements. Styling is done separately
           via CSS and / or theming options.
         </p>
         <p
@@ -282,7 +282,7 @@ const activeTab = ref('unstyled')
             Please keep in mind that Nuxt Toaster is a
             <strong>toast rendering engine</strong> and not a classic toasting
             library that ships with prebuilt styles. Styles presets and custom
-            examples are provided for inspiration, so you can build you own.
+            examples are provided for inspiration, so you can build your own.
           </p>
         </div>
       </div>