diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..2f1ecf3845
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "css.customData": [".vscode/tailwind.json"]
+}
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 0000000000..6ff156cd56
--- /dev/null
+++ b/.vscode/tailwind.json
@@ -0,0 +1,45 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}
diff --git a/components/.vitepress/config.ts b/components/.vitepress/config.ts
index ddba4a2a75..f7381cd3d9 100644
--- a/components/.vitepress/config.ts
+++ b/components/.vitepress/config.ts
@@ -1,19 +1,39 @@
 import { defineConfig } from 'vitepress'
+import fonts from 'vite-plugin-fonts'
 
 export default defineConfig({
   title      : 'Design Sistem',
   themeConfig: {
     sidebar: [
+      {
+        text       : 'Guide',
+        collapsable: true,
+        children   : [
+          {
+            text: 'Banner',
+            link: '/banner/guide'
+          }
+        ]
+      },
       {
         text       : 'Components',
         collapsable: true,
         children   : [
+          {
+            text: 'Banner',
+            link: '/banner/playground'
+          },
           {
             text: 'Button',
-            link: '/button/index'
+            link: '/button/playground'
           }
         ]
       },
     ]
+  },
+  vite: {
+    plugins: [
+      fonts({ google: { families: ['DM Sans'] } }),
+    ]
   }
 })
diff --git a/components/.vitepress/theme/custom.css b/components/.vitepress/theme/custom.css
new file mode 100644
index 0000000000..015094af60
--- /dev/null
+++ b/components/.vitepress/theme/custom.css
@@ -0,0 +1,5 @@
+:root {
+  --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+}
diff --git a/components/.vitepress/theme/index.ts b/components/.vitepress/theme/index.ts
new file mode 100644
index 0000000000..c54020a7ab
--- /dev/null
+++ b/components/.vitepress/theme/index.ts
@@ -0,0 +1,6 @@
+import './tailwind.css'
+import DefaultTheme from 'vitepress/theme'
+import 'virtual:fonts.css'
+import './custom.css'
+
+export default DefaultTheme
diff --git a/components/.vitepress/theme/tailwind.css b/components/.vitepress/theme/tailwind.css
new file mode 100644
index 0000000000..b5c61c9567
--- /dev/null
+++ b/components/.vitepress/theme/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/components/banner/Banner.spec.ts b/components/banner/Banner.spec.ts
new file mode 100644
index 0000000000..ece4cf6caa
--- /dev/null
+++ b/components/banner/Banner.spec.ts
@@ -0,0 +1,88 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+import { fireEvent, render } from "@testing-library/vue"
+import Banner from './Banner.vue'
+
+
+it('should rendered properly without any props', () => {
+  const screen = render({
+    components: { Banner },
+    template  : `
+      <Banner>
+        Hello
+      </Banner>
+    `,
+  })
+
+  const banner = screen.queryByTestId('banner')
+  const text   = screen.queryByText('Hello')
+
+  expect(banner).toBeInTheDocument()
+  expect(banner).toHaveClass('banner', 'banner--info')
+  expect(text).toBeInTheDocument()
+})
+
+it('should dismissed when close button clicked', async () => {
+  const screen = render({
+    components: { Banner },
+    template  : `
+      <Banner>
+        Hello
+      </Banner>
+    `,
+  })
+
+  const banner = screen.queryByTestId('banner')
+  const text   = screen.queryByText('Hello')
+  const close  = screen.queryByTestId('banner-close')
+
+  expect(banner).toBeInTheDocument()
+  expect(text).toBeInTheDocument()
+
+  await fireEvent.click(close)
+
+  expect(banner).not.toBeInTheDocument()
+  expect(text).not.toBeInTheDocument()
+})
+
+it('should emit event "dismissed" if close button clicked', async () => {
+  const spy    = vi.fn()
+  const screen = render({
+    components: { Banner },
+    template  : `
+      <Banner @dismissed="onDismissed">
+        Hello
+      </Banner>
+    `,
+    methods: {
+      onDismissed: spy
+    }
+  })
+
+  const banner = screen.queryByTestId('banner')
+  const text   = screen.queryByText('Hello')
+  const close  = screen.queryByTestId('banner-close')
+
+  expect(banner).toBeInTheDocument()
+  expect(text).toBeInTheDocument()
+
+  await fireEvent.click(close)
+
+  expect(spy).toBeCalled()
+})
+
+
+it('should have no close button if props "dismissable" set to false', () => {
+  const screen = render({
+    components: { Banner },
+    template  : `
+      <Banner :dismissable="false">
+        Hello
+      </Banner>
+    `,
+  })
+
+  const close = screen.queryByTestId('banner-close')
+
+  expect(close).not.toBeInTheDocument()
+})
diff --git a/components/banner/Banner.vue b/components/banner/Banner.vue
new file mode 100644
index 0000000000..af28a7a14f
--- /dev/null
+++ b/components/banner/Banner.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    v-if="show"
+    data-testid="banner"
+    :class="classNames">
+    <div class="banner__icon">
+      I
+    </div>
+    <div class="banner__body">
+      <slot />
+    </div>
+    <div
+      v-if="dismissable"
+      data-testid="banner-close"
+      class="banner__close" @click="dismiss()">
+      &times;
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, computed } from "vue-demi"
+
+export default defineComponent({
+  props: {
+    variant: {
+      type   : String as PropType<'info' | 'danger'>,
+      default: 'info',
+    },
+    dismissable: {
+      type   : Boolean,
+      default: true,
+    },
+  },
+  setup (props, { emit }) {
+    const show = ref(true)
+
+    const classNames = computed(() => {
+      const result: string[] = ['banner']
+
+      if (props.variant)
+        result.push(`banner--${props.variant}`)
+
+      return result
+    })
+
+    function dismiss (): void {
+      show.value = false
+      emit('dismissed')
+    }
+
+    return {
+      classNames,
+      show,
+      dismiss,
+    }
+  }
+})
+</script>
+
+<style lang="postcss">
+.banner {
+  @apply p-3 flex gap-2;
+}
+
+.banner--info {
+  @apply bg-background-100;
+}
+
+.banner--danger {
+  @apply bg-danger-25;
+}
+
+.banner__icon,
+.banner__close {
+  @apply flex-shrink-0 gap-2;
+}
+
+.banner__body {
+  @apply flex-grow;
+}
+</style>
diff --git a/components/banner/guide.md b/components/banner/guide.md
new file mode 100644
index 0000000000..30182ab60f
--- /dev/null
+++ b/components/banner/guide.md
@@ -0,0 +1,13 @@
+<script setup>
+  import Banner from './Banner.vue'
+</script>
+
+# Alert
+
+## Usage
+
+Banner Alert is use to convey information or actions, can be put in a card or in modal. For example, you might show a banner that inform user there is input need to filled but not required to be specific
+
+<Banner>This form will be privately saved and not be shared to any third parties, please filled in with correct information</Banner>
+
+Default banners contain lower priority information and should always be dismissible, this also use to update users about a change or give them advice. Title banner is optional
diff --git a/components/banner/playground.md b/components/banner/playground.md
new file mode 100644
index 0000000000..28bb607081
--- /dev/null
+++ b/components/banner/playground.md
@@ -0,0 +1,71 @@
+<script setup>
+  import Banner from './Banner.vue'
+</script>
+
+# Alert
+
+## Usage
+
+### Simple Banner
+
+<Banner>Your enterprise Privy Balance is running out. Please topup now.</Banner>
+
+```vue
+<template>
+  <Banner>Your enterprise Privy Balance is running out. Please topup now.</Banner>
+</template>
+```
+
+### Banner with Title
+
+<Banner>Your enterprise Privy Balance is running out. Please topup now.</Banner>
+
+```vue
+<template>
+  <Banner>Your enterprise Privy Balance is running out. Please topup now.</Banner>
+</template>
+```
+
+## Banner Variants
+
+Banner have 2 variants: `info` and `danger`, default is `info`
+
+<Banner variant="info">Your enterprise Privy Balance is running out. Please topup now.</Banner>
+<Banner variant="danger">Your enterprise Privy Balance is running out. Please topup now.</Banner>
+
+```vue
+<template>
+  <Banner variant="info">Your enterprise Privy Balance is running out. Please topup now.</Banner>
+  <Banner variant="danger">Your enterprise Privy Balance is running out. Please topup now.</Banner>
+</template>
+```
+
+## Hide close button
+
+You can hide close button with `dismissable` set to `false`
+
+<Banner :dismissable="false">Your enterprise Privy Balance is running out. Please topup now.</Banner>
+
+```vue
+<Banner :dismissable="false">Your enterprise Privy Balance is running out. Please topup now.</Banner>
+```
+
+## API
+
+### Props
+
+| Props         | Type      | Default  | Description                                     |
+|---------------|-----------|----------|-------------------------------------------------|
+| `variant`     | `String`  | `'info'` | Banner variant, valid value is `info`, `danger` |
+| `dismissable` | `Boolean` | `true`   | Show / Hide dismiss button                      |
+
+### Slots
+| Name      | Description                |
+|-----------|----------------------------|
+| `default` | Content to place in banner |
+
+### Events
+
+| Name        | Argunments | Description                     |
+|-------------|------------|---------------------------------|
+| `dismissed` |            | Event when close button clicked |
diff --git a/components/button/Button.spec.js b/components/button/Button.spec.js
deleted file mode 100644
index 422cf7aa87..0000000000
--- a/components/button/Button.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { render } from '@testing-library/vue'
-import Button from './Button.vue'
-import '@testing-library/jest-dom'
-
-it('should render properly', async () => {
-  const { getByTestId } = render(Button)
-  const button          = getByTestId('button')
-
-  expect(button).toBeInTheDocument()
-  expect(button).toHaveClass('btn', 'btn-primary')
-})
diff --git a/components/button/Button.spec.ts b/components/button/Button.spec.ts
new file mode 100644
index 0000000000..7d15ebb1b5
--- /dev/null
+++ b/components/button/Button.spec.ts
@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom'
+import { render } from '@testing-library/vue'
+import Button from './Button.vue'
+
+it('should render properly without any props', () => {
+  const screen = render({
+    components: { Button },
+    template  : `
+      <Button>
+        Hello
+      </Button>
+    `,
+  })
+
+  const button = screen.queryByTestId('btn')
+  const text   = screen.queryByText('Hello')
+
+  expect(button).toBeInTheDocument()
+  expect(button).toHaveClass('btn', 'btn-primary')
+  expect(text).toBeInTheDocument()
+})
+
+it('should has class "btn-secondary" if variant props set to "secondary"', () => {
+  const screen = render({
+    components: { Button },
+    template  : `
+      <Button variant="secondary">
+        Hello
+      </Button>
+    `,
+  })
+
+  const button = screen.queryByTestId('btn')
+
+  expect(button).toBeInTheDocument()
+  expect(button).toHaveClass('btn', 'btn-secondary')
+  expect(button).not.toHaveClass('btn-primary')
+})
+
diff --git a/components/button/Button.vue b/components/button/Button.vue
index bd47a65f55..f4de55b692 100644
--- a/components/button/Button.vue
+++ b/components/button/Button.vue
@@ -1,6 +1,6 @@
 <template>
-  <button data-testid="button" class="btn" :class="classNames">
-    <slot></slot>
+  <button data-testid="btn" :class="classNames">
+    <slot />
 
   </button>
 </template>
@@ -17,7 +17,7 @@ export default defineComponent({
   },
   setup (props) {
     const classNames = computed(() => {
-      const result = []
+      const result: string[] = ['btn']
 
       if (props.variant)
         result.push(`btn-${props.variant}`)
@@ -33,11 +33,11 @@ export default defineComponent({
 </script>
 
 <style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .btn {
-  @apply p-1 rounded bg-red-500 text-white;
+  @apply p-2;
+}
+
+.btn-primary {
+  @apply bg-primary-100 text-white;
 }
 </style>
diff --git a/components/button/guide.md b/components/button/guide.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/components/button/index.md b/components/button/playground.md
similarity index 100%
rename from components/button/index.md
rename to components/button/playground.md
diff --git a/package.json b/package.json
index 7223ce8d12..901699c2f5 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,28 @@
 {
-  "name": "design-system",
+  "name": "@privyid/design-system",
   "packageManager": "yarn@3.2.0",
+  "private": true,
   "scripts": {
     "dev": "yarn docs:dev",
     "docs:dev": "vitepress dev components",
     "docs:build": "vitepress build components",
     "docs:serve": "vitepress serve components",
-    "test": "vitest"
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.2",
     "@testing-library/jest-dom": "5.16.3",
     "@testing-library/vue": "6.5.1",
     "@types/testing-library__jest-dom": "5.14.3",
     "autoprefixer": "10.4.4",
+    "c8": "^7.11.0",
     "happy-dom": "2.50.0",
     "postcss": "8.4.12",
     "tailwindcss": "3.0.23",
     "typescript": "4.6.3",
     "vite": "2.8.6",
+    "vite-plugin-fonts": "^0.3.0",
     "vitepress": "0.22.3",
     "vitest": "0.7.12"
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index 2c70f64066..4542b65c3f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,145 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   content: [
     "./components/**/*.{vue,js,ts,jsx,tsx}",
+    "./components/.vitepress/theme/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    fontFamily: {
+      sans: ['DM Sans', ...defaultTheme.fontFamily.sans],
+    },
+    colors    : {
+      primary: {
+        5      : '#F2F7FD',
+        25     : '#BFD9F3',
+        50     : '#80B2E8',
+        75     : '#408BDD',
+        100    : '#0065D1',
+        focused: '#004C9D',
+        hovered: '#0056B2',
+      },
+      secondary: {
+        5      : '#F8F8F8',
+        25     : '#DCDCDC',
+        50     : '#B9B9B9',
+        75     : '#969696',
+        100    : '#737373',
+        focused: '#565656',
+        hovered: '#626262',
+      },
+      success: {
+        5      : '#F4FBF6',
+        25     : '#C8ECD0',
+        50     : '#91D8A0',
+        75     : '#5AC571',
+        100    : '#23B242',
+        focused: '#1A8531',
+        hovered: '#1E9738',
+      },
+      info: {
+        5      : '#F2FBFC',
+        25     : '#C0EBF1',
+        50     : '#80D7E2',
+        75     : '#41C2D4',
+        100    : '#02AEC5',
+        focused: '#018294',
+        hovered: '#0294A7',
+      },
+      warning: {
+        5      : '#FFFBF4',
+        25     : '#FDE9C8',
+        50     : '#FAD391',
+        75     : '#F8BC5A',
+        100    : '#F5A623',
+        focused: '#B87C1A',
+        hovered: '#D08D1E',
+      },
+      danger: {
+        5      : '#FEF5F4',
+        25     : '#F8CBCA',
+        50     : '#F29695',
+        75     : '#EB6261',
+        100    : '#E42E2C',
+        focused: '#AB2221',
+        hovered: '#C22725',
+      },
+      gold: {
+        5      : '#FBFAF2',
+        25     : '#EDE6BF',
+        50     : '#DBCC80',
+        75     : '#C9B340',
+        100    : '#B79A00',
+        focused: '#897400',
+        hovered: '#9C8300',
+      },
+      yellow: {
+        5  : '#FEFDF4',
+        25 : '#FBF5CA',
+        50 : '#F7EA95',
+        75 : '#F3E061',
+        100: '#EFD52C',
+      },
+      lime: {
+        5  : '#FAFEF5',
+        25 : '#E8F9CD',
+        50 : '#D1F39A',
+        75 : '#BAEC68',
+        100: '#A3E635',
+      },
+      teal: {
+        5  : '#F3FBFA',
+        25 : '#C4EDE6',
+        50 : '#88DBCE',
+        75 : '#4DCAB5',
+        100: '#12B89C',
+      },
+      purple: {
+        5  : '#F7F2FD',
+        25 : '#D7BFF3',
+        50 : '#AE80E8',
+        75 : '#8640DD',
+        100: '#5E00D1',
+      },
+      background : {
+        25 : '#FDFDFD',
+        50 : '#FAFAFA',
+        75 : '#F8F8F8',
+        100: '#F5F5F5',
+      },
+      body: {
+        25 : '#C8C8C8',
+        50 : '#919191',
+        75 : '#5A5A5A',
+        100: '#232323',
+      },
+      subtext: {
+        25 : '#E8E8E8',
+        50 : '#D1D1D1',
+        75 : '#BABABA',
+        100: '#A3A3A3',
+      },
+      black: '#000000',
+      dark : '#404040',
+      grey : '#808080',
+      light: '#BFBFBF',
+      white: '#FFFFFF',
+    },
+    borderRadius: {
+      'none'   : '0rem',
+      'tn'     : '0.25rem',
+      'xs'     : '0.375rem',
+      'sm'     : '0.438rem',
+      'DEFAULT': '0.5rem',
+      'md'     : '0.75rem',
+      'lg'     : '0.875rem',
+      'xl'     : '1rem',
+      '2xl'    : '1.25rem',
+      '3xl'    : '1.375rem',
+      'full'   : '9999px',
+    }
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }
diff --git a/vite.config.ts b/vite.config.ts
index 315212d69a..860ed4dde7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import fonts from 'vite-plugin-fonts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [
+    vue(),
+    fonts({ google: { families: ['DM Sans'] } })
+  ]
 })
diff --git a/yarn.lock b/yarn.lock
index 0b8cfb5483..44efcc7e42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -220,6 +220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bcoe/v8-coverage@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "@bcoe/v8-coverage@npm:0.2.3"
+  checksum: 850f9305536d0f2bd13e9e0881cb5f02e4f93fad1189f7b2d4bebf694e3206924eadee1068130d43c11b750efcc9405f88a8e42ef098b6d75239c0f047de1a27
+  languageName: node
+  linkType: hard
+
 "@docsearch/css@npm:3.0.0, @docsearch/css@npm:^3.0.0-alpha.41":
   version: 3.0.0
   resolution: "@docsearch/css@npm:3.0.0"
@@ -260,6 +267,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@istanbuljs/schema@npm:^0.1.2":
+  version: 0.1.3
+  resolution: "@istanbuljs/schema@npm:0.1.3"
+  checksum: 5282759d961d61350f33d9118d16bcaed914ebf8061a52f4fa474b2cb08720c9c81d165e13b82f2e5a8a212cc5af482f0c6fc1ac27b9e067e5394c9a6ed186c9
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -307,6 +321,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@privyid/design-system@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@privyid/design-system@workspace:."
+  dependencies:
+    "@tailwindcss/typography": ^0.5.2
+    "@testing-library/jest-dom": 5.16.3
+    "@testing-library/vue": 6.5.1
+    "@types/testing-library__jest-dom": 5.14.3
+    autoprefixer: 10.4.4
+    c8: ^7.11.0
+    happy-dom: 2.50.0
+    postcss: 8.4.12
+    tailwindcss: 3.0.23
+    typescript: 4.6.3
+    vite: 2.8.6
+    vite-plugin-fonts: ^0.3.0
+    vitepress: 0.22.3
+    vitest: 0.7.12
+    vue-demi: 0.12.4
+  languageName: unknown
+  linkType: soft
+
+"@tailwindcss/typography@npm:^0.5.2":
+  version: 0.5.2
+  resolution: "@tailwindcss/typography@npm:0.5.2"
+  dependencies:
+    lodash.castarray: ^4.4.0
+    lodash.isplainobject: ^4.0.6
+    lodash.merge: ^4.6.2
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: f6c27e32c9b48b0e906561d1e9dd3eec8fd5efc9792fd691269ceaa9d30d35bc715023215ec83ff8e5475c38af69e164d577672d935813b70e04b1c820b2ea8e
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^8.5.0":
   version: 8.11.4
   resolution: "@testing-library/dom@npm:8.11.4"
@@ -402,6 +451,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/istanbul-lib-coverage@npm:^2.0.1":
+  version: 2.0.4
+  resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
+  checksum: a25d7589ee65c94d31464c16b72a9dc81dfa0bea9d3e105ae03882d616e2a0712a9c101a599ec482d297c3591e16336962878cb3eb1a0a62d5b76d277a890ce7
+  languageName: node
+  linkType: hard
+
 "@types/jest@npm:*":
   version: 27.4.1
   resolution: "@types/jest@npm:27.4.1"
@@ -689,7 +745,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^4.1.0":
+"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
   version: 4.3.0
   resolution: "ansi-styles@npm:4.3.0"
   dependencies:
@@ -849,6 +905,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"c8@npm:^7.11.0":
+  version: 7.11.0
+  resolution: "c8@npm:7.11.0"
+  dependencies:
+    "@bcoe/v8-coverage": ^0.2.3
+    "@istanbuljs/schema": ^0.1.2
+    find-up: ^5.0.0
+    foreground-child: ^2.0.0
+    istanbul-lib-coverage: ^3.0.1
+    istanbul-lib-report: ^3.0.0
+    istanbul-reports: ^3.0.2
+    rimraf: ^3.0.0
+    test-exclude: ^6.0.0
+    v8-to-istanbul: ^8.0.0
+    yargs: ^16.2.0
+    yargs-parser: ^20.2.7
+  bin:
+    c8: bin/c8.js
+  checksum: 3576fd62dfbef7ef8ae0ce95349d3b297c3b10fa77902b5067896f40a6a3a4bc89637fb81a5badc6b36b4da3f883edc96172c325629d3ec3e24ff9aefab6dcca
+  languageName: node
+  linkType: hard
+
 "cacache@npm:^16.0.0":
   version: 16.0.3
   resolution: "cacache@npm:16.0.3"
@@ -999,6 +1077,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cliui@npm:^7.0.2":
+  version: 7.0.4
+  resolution: "cliui@npm:7.0.4"
+  dependencies:
+    string-width: ^4.2.0
+    strip-ansi: ^6.0.0
+    wrap-ansi: ^7.0.0
+  checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -1075,6 +1164,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^1.6.0":
+  version: 1.8.0
+  resolution: "convert-source-map@npm:1.8.0"
+  dependencies:
+    safe-buffer: ~5.1.1
+  checksum: 985d974a2d33e1a2543ada51c93e1ba2f73eaed608dc39f229afc78f71dcc4c8b7d7c684aa647e3c6a3a204027444d69e53e169ce94e8d1fa8d7dee80c9c8fed
+  languageName: node
+  linkType: hard
+
 "core-util-is@npm:~1.0.0":
   version: 1.0.3
   resolution: "core-util-is@npm:1.0.3"
@@ -1095,6 +1193,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-spawn@npm:^7.0.0":
+  version: 7.0.3
+  resolution: "cross-spawn@npm:7.0.3"
+  dependencies:
+    path-key: ^3.1.0
+    shebang-command: ^2.0.0
+    which: ^2.0.1
+  checksum: 671cc7c7288c3a8406f3c69a3ae2fc85555c04169e9d611def9a675635472614f1c0ed0ef80955d5b6d4e724f6ced67f0ad1bb006c2ea643488fcfef994d7f52
+  languageName: node
+  linkType: hard
+
 "css.escape@npm:^1.5.1":
   version: 1.5.1
   resolution: "css.escape@npm:1.5.1"
@@ -1185,25 +1294,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "design-system@workspace:."
-  dependencies:
-    "@testing-library/jest-dom": 5.16.3
-    "@testing-library/vue": 6.5.1
-    "@types/testing-library__jest-dom": 5.14.3
-    autoprefixer: 10.4.4
-    happy-dom: 2.50.0
-    postcss: 8.4.12
-    tailwindcss: 3.0.23
-    typescript: 4.6.3
-    vite: 2.8.6
-    vitepress: 0.22.3
-    vitest: 0.7.12
-    vue-demi: 0.12.4
-  languageName: unknown
-  linkType: soft
-
 "detective@npm:^5.2.0":
   version: 5.2.0
   resolution: "detective@npm:5.2.0"
@@ -1554,6 +1644,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-up@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "find-up@npm:5.0.0"
+  dependencies:
+    locate-path: ^6.0.0
+    path-exists: ^4.0.0
+  checksum: 07955e357348f34660bde7920783204ff5a26ac2cafcaa28bace494027158a97b9f56faaf2d89a6106211a8174db650dd9f503f9c0d526b1202d5554a00b9095
+  languageName: node
+  linkType: hard
+
+"foreground-child@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "foreground-child@npm:2.0.0"
+  dependencies:
+    cross-spawn: ^7.0.0
+    signal-exit: ^3.0.2
+  checksum: f77ec9aff621abd6b754cb59e690743e7639328301fbea6ff09df27d2befaf7dd5b77cec51c32323d73a81a7d91caaf9413990d305cbe3d873eec4fe58960956
+  languageName: node
+  linkType: hard
+
 "form-data@npm:^2.2.0":
   version: 2.5.1
   resolution: "form-data@npm:2.5.1"
@@ -1630,6 +1740,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-caller-file@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "get-caller-file@npm:2.0.5"
+  checksum: b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
+  languageName: node
+  linkType: hard
+
 "get-func-name@npm:^2.0.0":
   version: 2.0.0
   resolution: "get-func-name@npm:2.0.0"
@@ -1755,6 +1872,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-escaper@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "html-escaper@npm:2.0.2"
+  checksum: d2df2da3ad40ca9ee3a39c5cc6475ef67c8f83c234475f24d8e9ce0dc80a2c82df8e1d6fa78ddd1e9022a586ea1bd247a615e80a5cd9273d90111ddda7d9e974
+  languageName: node
+  linkType: hard
+
 "http-basic@npm:^8.1.1":
   version: 8.1.3
   resolution: "http-basic@npm:8.1.3"
@@ -1953,6 +2077,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.0.1":
+  version: 3.2.0
+  resolution: "istanbul-lib-coverage@npm:3.2.0"
+  checksum: a2a545033b9d56da04a8571ed05c8120bf10e9bce01cf8633a3a2b0d1d83dff4ac4fe78d6d5673c27fc29b7f21a41d75f83a36be09f82a61c367b56aa73c1ff9
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-report@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "istanbul-lib-report@npm:3.0.0"
+  dependencies:
+    istanbul-lib-coverage: ^3.0.0
+    make-dir: ^3.0.0
+    supports-color: ^7.1.0
+  checksum: 3f29eb3f53c59b987386e07fe772d24c7f58c6897f34c9d7a296f4000de7ae3de9eb95c3de3df91dc65b134c84dee35c54eee572a56243e8907c48064e34ff1b
+  languageName: node
+  linkType: hard
+
+"istanbul-reports@npm:^3.0.2":
+  version: 3.1.4
+  resolution: "istanbul-reports@npm:3.1.4"
+  dependencies:
+    html-escaper: ^2.0.0
+    istanbul-lib-report: ^3.0.0
+  checksum: 2132983355710c522f6b26808015cab9a0ee8b9f5ae0db0d3edeff40b886dd83cb670fb123cb7b32dbe59473d7c00cdde2ba6136bc0acdb20a865fccea64dfe1
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-diff@npm:27.5.1"
@@ -2019,6 +2171,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-path@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "locate-path@npm:6.0.0"
+  dependencies:
+    p-locate: ^5.0.0
+  checksum: 72eb661788a0368c099a184c59d2fee760b3831c9c1c33955e8a19ae4a21b4116e53fa736dc086cdeb9fce9f7cc508f2f92d2d3aae516f133e16a2bb59a39f5a
+  languageName: node
+  linkType: hard
+
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
+  languageName: node
+  linkType: hard
+
+"lodash.isplainobject@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "lodash.isplainobject@npm:4.0.6"
+  checksum: 29c6351f281e0d9a1d58f1a4c8f4400924b4c79f18dfc4613624d7d54784df07efaff97c1ff2659f3e085ecf4fff493300adc4837553104cef2634110b0d5337
+  languageName: node
+  linkType: hard
+
+"lodash.merge@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "lodash.merge@npm:4.6.2"
+  checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.15":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -2069,6 +2251,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"make-dir@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "make-dir@npm:3.1.0"
+  dependencies:
+    semver: ^6.0.0
+  checksum: 484200020ab5a1fdf12f393fe5f385fc8e4378824c940fba1729dcd198ae4ff24867bc7a5646331e50cead8abff5d9270c456314386e629acec6dff4b8016b78
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^10.0.3":
   version: 10.0.6
   resolution: "make-fetch-happen@npm:10.0.6"
@@ -2359,6 +2550,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-limit@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "p-limit@npm:3.1.0"
+  dependencies:
+    yocto-queue: ^0.1.0
+  checksum: 7c3690c4dbf62ef625671e20b7bdf1cbc9534e83352a2780f165b0d3ceba21907e77ad63401708145ca4e25bfc51636588d89a8c0aeb715e6c37d1c066430360
+  languageName: node
+  linkType: hard
+
+"p-locate@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "p-locate@npm:5.0.0"
+  dependencies:
+    p-limit: ^3.0.2
+  checksum: 1623088f36cf1cbca58e9b61c4e62bf0c60a07af5ae1ca99a720837356b5b6c5ba3eb1b2127e47a06865fee59dd0453cad7cc844cda9d5a62ac1a5a51b7c86d3
+  languageName: node
+  linkType: hard
+
 "p-map@npm:^4.0.0":
   version: 4.0.0
   resolution: "p-map@npm:4.0.0"
@@ -2396,6 +2605,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-exists@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-exists@npm:4.0.0"
+  checksum: 505807199dfb7c50737b057dd8d351b82c033029ab94cb10a657609e00c1bc53b951cfdbccab8de04c5584d5eff31128ce6afd3db79281874a5ef2adbba55ed1
+  languageName: node
+  linkType: hard
+
 "path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
@@ -2403,6 +2619,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-key@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "path-key@npm:3.1.1"
+  checksum: 55cd7a9dd4b343412a8386a743f9c746ef196e57c823d90ca3ab917f90ab9f13dd0ded27252ba49dbdfcab2b091d998bc446f6220cd3cea65db407502a740020
+  languageName: node
+  linkType: hard
+
 "path-parse@npm:^1.0.7":
   version: 1.0.7
   resolution: "path-parse@npm:1.0.7"
@@ -2643,6 +2866,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"require-directory@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "require-directory@npm:2.1.1"
+  checksum: fb47e70bf0001fdeabdc0429d431863e9475e7e43ea5f94ad86503d918423c1543361cc5166d713eaa7029dd7a3d34775af04764bebff99ef413111a5af18c80
+  languageName: node
+  linkType: hard
+
 "resolve-from@npm:^4.0.0":
   version: 4.0.0
   resolution: "resolve-from@npm:4.0.0"
@@ -2690,7 +2920,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^3.0.2":
+"rimraf@npm:^3.0.0, rimraf@npm:^3.0.2":
   version: 3.0.2
   resolution: "rimraf@npm:3.0.2"
   dependencies:
@@ -2745,6 +2975,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^6.0.0":
+  version: 6.3.0
+  resolution: "semver@npm:6.3.0"
+  bin:
+    semver: ./bin/semver.js
+  checksum: 1b26ecf6db9e8292dd90df4e781d91875c0dcc1b1909e70f5d12959a23c7eebb8f01ea581c00783bbee72ceeaad9505797c381756326073850dc36ed284b21b9
+  languageName: node
+  linkType: hard
+
 "semver@npm:^7.3.5":
   version: 7.3.5
   resolution: "semver@npm:7.3.5"
@@ -2763,6 +3002,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shebang-command@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "shebang-command@npm:2.0.0"
+  dependencies:
+    shebang-regex: ^3.0.0
+  checksum: 6b52fe87271c12968f6a054e60f6bde5f0f3d2db483a1e5c3e12d657c488a15474121a1d55cd958f6df026a54374ec38a4a963988c213b7570e1d51575cea7fa
+  languageName: node
+  linkType: hard
+
+"shebang-regex@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "shebang-regex@npm:3.0.0"
+  checksum: 1a2bcae50de99034fcd92ad4212d8e01eedf52c7ec7830eedcf886622804fe36884278f2be8be0ea5fde3fd1c23911643a4e0f726c8685b61871c8908af01222
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4":
   version: 1.0.4
   resolution: "side-channel@npm:1.0.4"
@@ -2774,7 +3029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"signal-exit@npm:^3.0.7":
+"signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
   checksum: a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
@@ -2833,6 +3088,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.7.3":
+  version: 0.7.3
+  resolution: "source-map@npm:0.7.3"
+  checksum: cd24efb3b8fa69b64bf28e3c1b1a500de77e84260c5b7f2b873f88284df17974157cc88d386ee9b6d081f08fdd8242f3fc05c953685a6ad81aad94c7393dedea
+  languageName: node
+  linkType: hard
+
 "sourcemap-codec@npm:^1.4.8":
   version: 1.4.8
   resolution: "sourcemap-codec@npm:1.4.8"
@@ -2849,7 +3111,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.2.3":
+"string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
   dependencies:
@@ -2878,7 +3140,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^6.0.1":
+"strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
   dependencies:
@@ -2990,6 +3252,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"test-exclude@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "test-exclude@npm:6.0.0"
+  dependencies:
+    "@istanbuljs/schema": ^0.1.2
+    glob: ^7.1.4
+    minimatch: ^3.0.4
+  checksum: 3b34a3d77165a2cb82b34014b3aba93b1c4637a5011807557dc2f3da826c59975a5ccad765721c4648b39817e3472789f9b0fa98fc854c5c1c7a1e632aacdc28
+  languageName: node
+  linkType: hard
+
 "then-request@npm:^6.0.0":
   version: 6.0.2
   resolution: "then-request@npm:6.0.2"
@@ -3105,6 +3378,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"v8-to-istanbul@npm:^8.0.0":
+  version: 8.1.1
+  resolution: "v8-to-istanbul@npm:8.1.1"
+  dependencies:
+    "@types/istanbul-lib-coverage": ^2.0.1
+    convert-source-map: ^1.6.0
+    source-map: ^0.7.3
+  checksum: 54ce92bec2727879626f623d02c8d193f0c7e919941fa373ec135189a8382265117f5316ea317a1e12a5f9c13d84d8449052a731fe3306fa4beaafbfa4cab229
+  languageName: node
+  linkType: hard
+
+"vite-plugin-fonts@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "vite-plugin-fonts@npm:0.3.0"
+  dependencies:
+    fast-glob: ^3.2.11
+  peerDependencies:
+    vite: ^2.0.0
+  checksum: 768600c3b4040d6c525c92578b6983399f931df346b104aa3bcd5c63df72df5ea62d7ef7885b352cadbb8845f2dcc2e13228b8c530b0596b58b0c3865be14245
+  languageName: node
+  linkType: hard
+
 "vite@npm:2.8.6, vite@npm:^2.8.1, vite@npm:^2.8.6":
   version: 2.8.6
   resolution: "vite@npm:2.8.6"
@@ -3250,7 +3545,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^2.0.2":
+"which@npm:^2.0.1, which@npm:^2.0.2":
   version: 2.0.2
   resolution: "which@npm:2.0.2"
   dependencies:
@@ -3270,6 +3565,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wrap-ansi@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "wrap-ansi@npm:7.0.0"
+  dependencies:
+    ansi-styles: ^4.0.0
+    string-width: ^4.1.0
+    strip-ansi: ^6.0.0
+  checksum: a790b846fd4505de962ba728a21aaeda189b8ee1c7568ca5e817d85930e06ef8d1689d49dbf0e881e8ef84436af3a88bc49115c2e2788d841ff1b8b5b51a608b
+  languageName: node
+  linkType: hard
+
 "wrappy@npm:1":
   version: 1.0.2
   resolution: "wrappy@npm:1.0.2"
@@ -3284,6 +3590,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"y18n@npm:^5.0.5":
+  version: 5.0.8
+  resolution: "y18n@npm:5.0.8"
+  checksum: 54f0fb95621ee60898a38c572c515659e51cc9d9f787fb109cef6fde4befbe1c4602dc999d30110feee37456ad0f1660fa2edcfde6a9a740f86a290999550d30
+  languageName: node
+  linkType: hard
+
 "yallist@npm:^4.0.0":
   version: 4.0.0
   resolution: "yallist@npm:4.0.0"
@@ -3297,3 +3610,32 @@ __metadata:
   checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
   languageName: node
   linkType: hard
+
+"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.7":
+  version: 20.2.9
+  resolution: "yargs-parser@npm:20.2.9"
+  checksum: 8bb69015f2b0ff9e17b2c8e6bfe224ab463dd00ca211eece72a4cd8a906224d2703fb8a326d36fdd0e68701e201b2a60ed7cf81ce0fd9b3799f9fe7745977ae3
+  languageName: node
+  linkType: hard
+
+"yargs@npm:^16.2.0":
+  version: 16.2.0
+  resolution: "yargs@npm:16.2.0"
+  dependencies:
+    cliui: ^7.0.2
+    escalade: ^3.1.1
+    get-caller-file: ^2.0.5
+    require-directory: ^2.1.1
+    string-width: ^4.2.0
+    y18n: ^5.0.5
+    yargs-parser: ^20.2.2
+  checksum: b14afbb51e3251a204d81937c86a7e9d4bdbf9a2bcee38226c900d00f522969ab675703bee2a6f99f8e20103f608382936034e64d921b74df82b63c07c5e8f59
+  languageName: node
+  linkType: hard
+
+"yocto-queue@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "yocto-queue@npm:0.1.0"
+  checksum: f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
+  languageName: node
+  linkType: hard