@codecavepro/brand 1.1.0 → 1.3.0

package/README.md

@@ -1,8 +1,8 @@
 # @codecavepro/brand
 
-The CODECAVE design system as **CSS custom properties** and as a **typed module** —
-colour, typography and layout tokens, with no runtime, no provider and no component
-bundle.
+The CODECAVE design system as **CSS custom properties**, as a **typed module**, and as
+the **Vue components codecave.pro actually renders** — no runtime, no provider, no
+wrapper layer.
 
 Link one stylesheet and the whole system is live on `:root`.
 
@@ -140,6 +140,68 @@ Two things to know about it:
 - **The CSS is the source of truth.** This module is a faithful mirror of it. If the
   two ever disagree, the CSS wins and the module is the bug.
 
+## The components
+
+15 components and 13 icons — the buttons, form controls, menu, footer and cards
+codecave.pro renders — ship as **source**, byte-for-byte the files the site builds
+from. Not a reimplementation of them, and not a bundle compiled from a snapshot:
+the same files, kept identical by a check that runs on every push.
+
+```vue
+<script setup lang="ts">
+import Button from '@codecavepro/brand/components/common/Button.vue';
+import TextField from '@codecavepro/brand/components/common/TextField.vue';
+import CloudIcon from '@codecavepro/brand/assets/icons/cloud-icon.vue';
+</script>
+
+<template>
+  <TextField v-model="email" label="Email" type="email" />
+  <Button title="Send" variant="primary" />
+  <CloudIcon />
+</template>
+```
+
+Because they are `.vue` files rather than compiled JS, your build needs a Vue SFC
+plugin — `@vitejs/plugin-vue`, `@astrojs/vue`, `vue-loader`. In exchange their scoped
+styles go through your own pipeline and you can read the source of anything that
+surprises you.
+
+`vue` is a peer dependency. `gsap` is an optional one, wanted only by `GlowButton`,
+`TypingEffect` and `ContactUsForm`; leave it out and the rest are unaffected.
+
+### Import the theme, not just the tokens
+
+Every colour, radius and control height in these components is a token — but they reach
+most of them through **Tailwind utility classes** (`bg-surface-primary`,
+`text-heading-md`, `rounded-custom`), and a utility class exists only if Tailwind knows
+the name. `tokens.css` gives you the *values*; `theme.css` gives Tailwind the names, so
+you need both:
+
+```css
+@import "tailwindcss";
+@import "@codecavepro/brand/tokens.css";
+@import "@codecavepro/brand/theme.css";
+```
+
+**That order is load-bearing, and `tokens.css` must stay unlayered.** Several entries in
+`theme.css` are deliberate self-references (`--color-glow-25: var(--color-glow-25)`):
+the declaration is what makes Tailwind emit the utility, while the value comes from
+`tokens.css`, whose unlayered `:root` outranks `@layer theme`. Wrap `tokens.css` in a
+cascade layer — or leave it out — and those names resolve to nothing.
+
+Import only `tokens.css` and the components mount and behave correctly and render
+nearly unstyled.
+
+### What is not here, and why
+
+Four components stay out: `ArticlePreview`, `Review`, `pain-points-item` and
+`technologies`. They are CMS-shaped rather than brand-shaped — their props are types
+generated from the Strapi schema, and they build image URLs through a helper that reads
+a hardcoded CMS host and token. Shipping them would put the site's content layer inside
+a brand package. Inverting that dependency site-side is
+[CCWEB2-332](https://codecave.atlassian.net/browse/CCWEB2-332); they arrive when it
+lands.
+
 ## Controls are 48px, and it is a floor
 
 `spacing.controlHeight` / `--control-height` is `3rem` — 48px, what codecave.pro
@@ -166,8 +228,11 @@ the rules, the reasoning, the anti-patterns — is documented separately:
 
 It authors nothing. Every byte is copied, extracted or compiled out of `docs/` in the
 repository above: `css` and `fonts.css` are copied verbatim, `tokens.css` is extracted
-from the same file `css` is copied from, and the typed module is compiled from
-`docs/tokens/*.ts`. `docs/` stays the single origin, and CI asserts on every push that
+from the same file `css` is copied from, `theme.css` is extracted from the capture of
+codecave.pro's `global.css`, and the typed module is compiled from `docs/tokens/*.ts`.
+A name that `theme.css` and `tokens.css` both give a literal value must agree, and the
+build fails if it does not — otherwise one of the two would be dead and nobody would
+see it. `docs/` stays the single origin, and CI asserts on every push that
 the copies are byte-identical and the extraction still reproduces what shipped.
 
 Two editable copies of a palette is the exact failure this package exists to end, so it

package/dist/src/assets/icons/asterisk-icon.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.00008 13.8337V8.50033M8.00008 8.50033V3.16699M8.00008 8.50033H13.3334M8.00008 8.50033H2.66675"
+          stroke="var(--color-primary-500)" stroke-linecap="round" />
+    <path opacity="0.5"
+          d="M11.7714 4.72852L8.00024 8.49965M8.00024 8.49965L4.2289 12.271M8.00024 8.49965L4.22876 4.72863M8.00024 8.49965L11.7712 12.2711"
+          stroke="var(--color-primary-500)" stroke-linecap="round" />
+  </svg>
+</template>

package/dist/src/assets/icons/back-icon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24.75 16.5L19.25 22L24.75 27.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+          stroke-linejoin="round" />
+    <path opacity="0.5"
+          d="M3.66699 22C3.66699 13.3576 3.66699 9.0364 6.35185 6.35154C9.0367 3.66669 13.3579 3.66669 22.0003 3.66669C30.6427 3.66669 34.964 3.66669 37.6488 6.35154C40.3337 9.0364 40.3337 13.3576 40.3337 22C40.3337 30.6424 40.3337 34.9636 37.6488 37.6485C34.964 40.3334 30.6427 40.3334 22.0003 40.3334C13.3579 40.3334 9.0367 40.3334 6.35185 37.6485C3.66699 34.9636 3.66699 30.6424 3.66699 22Z"
+          stroke="currentColor" stroke-width="1.5" />
+  </svg>
+</template>

package/dist/src/assets/icons/cart-icon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.5"
+          d="M6.25 15C6.94036 15 7.5 15.5596 7.5 16.25C7.5 16.9404 6.94036 17.5 6.25 17.5C5.55964 17.5 5 16.9404 5 16.25C5 15.5596 5.55964 15 6.25 15Z"
+          stroke="currentColor" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M13.75 15.0001C14.4404 15.0001 15 15.5597 15 16.2501C15 16.9404 14.4404 17.5001 13.75 17.5001C13.0596 17.5001 12.5 16.9404 12.5 16.2501C12.5 15.5597 13.0596 15.0001 13.75 15.0001Z"
+          stroke="currentColor" stroke-width="1.5" />
+    <path
+        d="M1.88467 2.57653L2.13342 1.86899L2.13342 1.86899L1.88467 2.57653ZM1.91575 1.79246C1.52498 1.65507 1.09683 1.86048 0.959448 2.25124C0.822062 2.64201 1.02747 3.07016 1.41823 3.20754L1.66699 2.5L1.91575 1.79246ZM3.82186 3.60248L4.44109 3.17933L4.44109 3.17933L3.82186 3.60248ZM4.90676 12.1551L4.36249 12.6712H4.36249L4.90676 12.1551ZM17.2151 8.23563L17.9497 8.38703L17.9506 8.38243L17.2151 8.23563ZM16.7987 10.2562L17.5332 10.4076V10.4076L16.7987 10.2562ZM17.2791 5.5809L16.6846 6.03821H16.6846L17.2791 5.5809ZM15.945 12.542L15.4712 11.9606V11.9606L15.945 12.542ZM4.13206 8.13333H4.88206V5.8653H4.13206H3.38206V8.13333H4.13206ZM1.88467 2.57653L2.13342 1.86899L1.91575 1.79246L1.66699 2.5L1.41823 3.20754L1.63591 3.28407L1.88467 2.57653ZM9.11489 12.9167V13.6667H13.534V12.9167V12.1667H9.11489V12.9167ZM4.13206 5.8653H4.88206C4.88206 5.27873 4.88308 4.77907 4.83893 4.37119C4.79295 3.94645 4.69205 3.54658 4.44109 3.17933L3.82186 3.60248L3.20263 4.02564C3.26187 4.11233 3.31606 4.2409 3.34764 4.53261C3.38104 4.84117 3.38206 5.24595 3.38206 5.8653H4.13206ZM1.88467 2.57653L1.63591 3.28407C2.19505 3.48066 2.55246 3.60761 2.81331 3.7356C3.05455 3.85397 3.14559 3.94217 3.20263 4.02564L3.82186 3.60248L4.44109 3.17933C4.18792 2.80886 3.8527 2.57476 3.47406 2.38897C3.11503 2.21281 2.65894 2.05375 2.13342 1.86899L1.88467 2.57653ZM4.13206 8.13333H3.38206C3.38206 9.34073 3.39305 10.2251 3.50942 10.9045C3.63506 11.6381 3.88846 12.1712 4.36249 12.6712L4.90676 12.1551L5.45102 11.6391C5.20306 11.3776 5.0691 11.1254 4.98789 10.6513C4.89742 10.123 4.88206 9.37724 4.88206 8.13333H4.13206ZM9.11489 12.9167V12.1667C7.93052 12.1667 7.12176 12.1649 6.51534 12.0789C5.93478 11.9966 5.65136 11.8504 5.45102 11.6391L4.90676 12.1551L4.36249 12.6712C4.88415 13.2214 5.54275 13.456 6.30474 13.564C7.04087 13.6684 7.97517 13.6667 9.11489 13.6667V12.9167ZM4.13206 5.1V5.85H14.241V5.1V4.35H4.13206V5.1ZM17.2151 8.23563L16.4806 8.08423L16.0641 10.1048L16.7987 10.2562L17.5332 10.4076L17.9497 8.38703L17.2151 8.23563ZM14.241 5.1V5.85C14.957 5.85 15.5773 5.851 16.0645 5.90547C16.3063 5.9325 16.4802 5.96938 16.5971 6.01047C16.7201 6.05366 16.7161 6.07913 16.6846 6.03821L17.2791 5.5809L17.8735 5.1236C17.6571 4.84222 17.3564 4.68735 17.0944 4.59529C16.8264 4.50112 16.5272 4.44784 16.2312 4.41476C15.6429 4.349 14.9292 4.35 14.241 4.35V5.1ZM17.2151 8.23563L17.9506 8.38243C18.0909 7.67946 18.2129 7.07673 18.2429 6.59135C18.2739 6.08963 18.2184 5.5719 17.8735 5.1236L17.2791 5.5809L16.6846 6.03821C16.7097 6.07081 16.7669 6.15583 16.7457 6.49894C16.7235 6.8584 16.6286 7.34258 16.4796 8.08882L17.2151 8.23563ZM13.534 12.9167V13.6667C14.1656 13.6667 14.7072 13.668 15.146 13.6143C15.6052 13.5581 16.0383 13.4335 16.4188 13.1234L15.945 12.542L15.4712 11.9606C15.392 12.0252 15.2699 12.0879 14.9638 12.1254C14.6372 12.1654 14.2032 12.1667 13.534 12.1667V12.9167ZM16.7987 10.2562L16.0641 10.1048C15.929 10.7603 15.8401 11.1851 15.735 11.4969C15.6365 11.7892 15.5505 11.896 15.4712 11.9606L15.945 12.542L16.4188 13.1234C16.7993 12.8133 17.0088 12.4143 17.1565 11.9759C17.2977 11.557 17.4057 11.0263 17.5332 10.4076L16.7987 10.2562Z"
+        fill="currentColor" />
+  </svg>
+</template>

package/dist/src/assets/icons/close-icon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M27.7078 4.29183C27.801 4.38473 27.8748 4.49508 27.9253 4.61657C27.9757 4.73806 28.0016 4.8683 28.0016 4.99983C28.0016 5.13137 27.9757 5.26161 27.9253 5.3831C27.8748 5.50459 27.801 5.61494 27.7078 5.70783L5.70783 27.7078C5.52006 27.8956 5.26539 28.0011 4.99983 28.0011C4.73428 28.0011 4.47961 27.8956 4.29183 27.7078C4.10406 27.5201 3.99857 27.2654 3.99857 26.9998C3.99857 26.7343 4.10406 26.4796 4.29183 26.2918L26.2918 4.29183C26.3847 4.19871 26.4951 4.12482 26.6166 4.07441C26.7381 4.024 26.8683 3.99805 26.9998 3.99805C27.1314 3.99805 27.2616 4.024 27.3831 4.07441C27.5046 4.12482 27.6149 4.19871 27.7078 4.29183Z"
+          fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M4.29183 4.29183C4.19871 4.38473 4.12482 4.49508 4.07441 4.61657C4.024 4.73806 3.99805 4.8683 3.99805 4.99983C3.99805 5.13137 4.024 5.26161 4.07441 5.3831C4.12482 5.50459 4.19871 5.61494 4.29183 5.70783L26.2918 27.7078C26.4796 27.8956 26.7343 28.0011 26.9998 28.0011C27.2654 28.0011 27.5201 27.8956 27.7078 27.7078C27.8956 27.5201 28.0011 27.2654 28.0011 26.9998C28.0011 26.7343 27.8956 26.4796 27.7078 26.2918L5.70783 4.29183C5.61494 4.19871 5.50459 4.12482 5.3831 4.07441C5.26161 4.024 5.13137 3.99805 4.99983 3.99805C4.8683 3.99805 4.73806 4.024 4.61657 4.07441C4.49508 4.12482 4.38473 4.19871 4.29183 4.29183Z"
+          fill="currentColor" />
+  </svg>
+</template>

package/dist/src/assets/icons/cloud-icon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11.9845 7.52266C12.4809 7.34924 13.0152 7.25488 13.5718 7.25488C14.1173 7.25488 14.6414 7.34555 15.1296 7.51246C16.9945 8.15018 18.3337 9.90092 18.3337 11.9608C18.3337 14.5598 16.2017 16.6666 13.5718 16.6666H5.23842C3.26597 16.6666 1.66699 15.0865 1.66699 13.1372C1.66699 11.188 3.26597 9.60782 5.23842 9.60782C5.47519 9.60782 5.70657 9.63059 5.93046 9.67404C6.40081 9.7653 6.83806 9.94782 7.22255 10.2022"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    <path opacity="0.5"
+          d="M5.92998 9.67422C5.73906 9.16499 5.63477 8.61422 5.63477 8.03938C5.63477 5.44039 7.76674 3.3335 10.3967 3.3335C12.8464 3.3335 14.8641 5.16159 15.1291 7.51264"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+  </svg>
+</template>

package/dist/src/assets/icons/database-icon.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.33337 15V5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    <path d="M16.6666 5V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    <path
+        d="M10 8.33329C13.6819 8.33329 16.6667 6.84091 16.6667 4.99996C16.6667 3.15901 13.6819 1.66663 10 1.66663C6.31814 1.66663 3.33337 3.15901 3.33337 4.99996C3.33337 6.84091 6.31814 8.33329 10 8.33329Z"
+        stroke="currentColor" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M16.6667 10C16.6667 11.8409 13.6819 13.3333 10 13.3333C6.31814 13.3333 3.33337 11.8409 3.33337 10"
+          stroke="currentColor" stroke-width="1.5" />
+    <path d="M16.6667 15C16.6667 16.8409 13.6819 18.3333 10 18.3333C6.31814 18.3333 3.33337 16.8409 3.33337 15"
+          stroke="currentColor" stroke-width="1.5" />
+  </svg>
+</template>

package/dist/src/assets/icons/lightning-icon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11.605 8.08781C11.2896 7.77818 11.2896 7.28455 11.2896 6.29731V6.03922C11.2896 3.30204 11.2896 1.93344 10.5201 1.69764C9.75063 1.46183 8.9259 2.57769 7.27643 4.8094L4.72465 8.26193C3.65404 9.71044 3.11874 10.4347 3.4137 11.0042C3.41859 11.0136 3.42361 11.0229 3.42879 11.0322C3.74125 11.593 4.66578 11.593 6.51484 11.593C7.54236 11.593 8.05613 11.593 8.37838 11.8961"
+        stroke="currentColor" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M11.6049 8.08801L11.6216 8.10405C11.9439 8.40714 12.4576 8.40714 13.4851 8.40714C15.3342 8.40714 16.2587 8.40714 16.5712 8.96792C16.5764 8.97721 16.5814 8.98657 16.5863 8.996C16.8813 9.56547 16.3459 10.2897 15.2753 11.7382L12.7235 15.1907C11.074 17.4224 10.2493 18.5383 9.47982 18.3025C8.71035 18.0667 8.71037 16.6981 8.71041 13.9608L8.71041 13.7029C8.71043 12.7156 8.71044 12.222 8.39499 11.9124L8.3783 11.8963"
+          stroke="currentColor" stroke-width="1.5" />
+  </svg>
+</template>

package/dist/src/assets/icons/linkedin-icon.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_7001_2229)">
+      <path
+          d="M19.0195 0.5H1.97656C1.16016 0.5 0.5 1.14453 0.5 1.94141V19.0547C0.5 19.8516 1.16016 20.5 1.97656 20.5H19.0195C19.8359 20.5 20.5 19.8516 20.5 19.0586V1.94141C20.5 1.14453 19.8359 0.5 19.0195 0.5ZM6.43359 17.543H3.46484V7.99609H6.43359V17.543ZM4.94922 6.69531C3.99609 6.69531 3.22656 5.92578 3.22656 4.97656C3.22656 4.02734 3.99609 3.25781 4.94922 3.25781C5.89844 3.25781 6.66797 4.02734 6.66797 4.97656C6.66797 5.92188 5.89844 6.69531 4.94922 6.69531ZM17.543 17.543H14.5781V12.9023C14.5781 11.7969 14.5586 10.3711 13.0352 10.3711C11.4922 10.3711 11.2578 11.5781 11.2578 12.8242V17.543H8.29688V7.99609H11.1406V9.30078H11.1797C11.5742 8.55078 12.543 7.75781 13.9844 7.75781C16.9883 7.75781 17.543 9.73438 17.543 12.3047V17.543Z"
+          fill="currentColor" />
+    </g>
+    <defs>
+      <clipPath id="clip0_7001_2229">
+        <rect width="20" height="20" fill="white" transform="translate(0.5 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

package/dist/src/assets/icons/panorama-icon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M18.3333 4.8832C18.3333 4.22107 17.6745 3.61162 16.5691 3.12749C15.5902 2.69878 14.5833 3.51652 14.5833 4.58516V7.26638M18.3333 4.8832V15.4803C18.3333 17.056 14.6023 18.3333 9.99996 18.3333C5.39759 18.3333 1.66663 17.056 1.66663 15.4803V4.8832M18.3333 4.8832C18.3333 5.87922 16.8426 6.75604 14.5833 7.26638M1.66663 4.8832C1.66663 4.22107 2.32542 3.61162 3.43083 3.12749C4.4097 2.69878 5.41663 3.51652 5.41663 4.58516V7.26638M1.66663 4.8832C1.66663 5.87922 3.15737 6.75604 5.41663 7.26638M5.41663 7.26638C6.73154 7.56341 8.30678 7.73629 9.99996 7.73629C11.6931 7.73629 13.2684 7.56341 14.5833 7.26638"
+        stroke="currentColor" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M16.25 10.8334C16.25 11.5237 15.6904 12.0834 15 12.0834C14.3096 12.0834 13.75 11.5237 13.75 10.8334C13.75 10.143 14.3096 9.58337 15 9.58337C15.6904 9.58337 16.25 10.143 16.25 10.8334Z"
+          stroke="currentColor" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M17.5 16.6666L15.4203 14.8762C14.7497 14.2988 13.7509 14.2413 13.0127 14.7375L12.8203 14.8669C12.3073 15.2118 11.6094 15.1539 11.166 14.7298L8.39842 12.0824C7.84603 11.554 6.95995 11.5257 6.37203 12.0178L5.24198 12.9637L2.08337 15.9196"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+  </svg>
+</template>

package/dist/src/assets/icons/shevron.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+</template>

package/dist/src/assets/icons/success-icon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M7.3553 28.8968L10.4527 19.6045C11.8571 15.3914 12.5592 13.2849 14.2207 12.8927C15.8822 12.5005 17.4523 14.0706 20.5926 17.2108L26.7874 23.4057C29.9276 26.5459 31.4977 28.116 31.1055 29.7775C30.7133 31.439 28.6068 32.1411 24.3937 33.5455L15.1014 36.6429C10.0315 38.3329 7.49656 39.1779 6.15845 37.8398C4.82033 36.5016 5.66532 33.9667 7.3553 28.8968Z"
+        fill="#111111" stroke="#5F20FE" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M22.4312 33.6348C22.4312 33.6348 21.0412 29.4527 21.0412 26.6848C21.0412 23.917 22.4312 19.7349 22.4312 19.7349M14.7862 35.7198C14.7862 35.7198 13.6123 30.6746 13.3962 27.3798C13.0393 21.9362 14.7862 13.48 14.7862 13.48"
+          stroke="#5F20FE" stroke-width="1.5" stroke-linecap="round" />
+    <path
+        d="M26.6006 18.3443L26.8646 17.0244C27.1311 15.6918 28.0913 14.6041 29.3806 14.1744C30.6699 13.7446 31.63 12.6569 31.8966 11.3243L32.1605 10.0044"
+        stroke="#5F20FE" stroke-width="1.5" stroke-linecap="round" />
+    <path
+        d="M32.2104 24.2979L32.6007 24.5232C33.8054 25.2188 35.32 25.0654 36.3608 24.1424C37.3033 23.3067 38.6456 23.0947 39.7998 23.5994L40.3342 23.833"
+        stroke="#5F20FE" stroke-width="1.5" stroke-linecap="round" />
+    <path
+        d="M17.9579 5.09513C17.3391 6.10724 17.4942 7.41144 18.333 8.25024L18.5125 8.42969C19.2332 9.15048 19.499 10.2094 19.2041 11.1851"
+        stroke="#5F20FE" stroke-width="1.5" stroke-linecap="round" />
+    <g opacity="0.5">
+      <path
+          d="M12.7006 7.22454C13.0846 6.84052 13.7073 6.84052 14.0913 7.22454C14.4753 7.60857 14.4753 8.2312 14.0913 8.61522C13.7073 8.99925 13.0846 8.99925 12.7006 8.61522C12.3166 8.2312 12.3166 7.60857 12.7006 7.22454Z"
+          fill="#5F20FE" />
+    </g>
+    <g opacity="0.5">
+      <path
+          d="M22.288 13.1215C22.672 12.7375 23.2947 12.7375 23.6787 13.1215C24.0627 13.5055 24.0627 14.1282 23.6787 14.5122C23.2947 14.8962 22.672 14.8962 22.288 14.5122C21.904 14.1282 21.904 13.5055 22.288 13.1215Z"
+          fill="#5F20FE" />
+    </g>
+    <g opacity="0.5">
+      <path
+          d="M31.4545 18.6215C31.8386 18.2375 32.4612 18.2375 32.8452 18.6215C33.2292 19.0055 33.2292 19.6282 32.8452 20.0122C32.4612 20.3962 31.8386 20.3962 31.4545 20.0122C31.0705 19.6282 31.0705 19.0055 31.4545 18.6215Z"
+          fill="#5F20FE" />
+    </g>
+    <path opacity="0.5"
+          d="M34.9399 28.0746C35.3239 27.6906 35.9465 27.6906 36.3306 28.0746C36.7146 28.4587 36.7146 29.0813 36.3306 29.4653C35.9465 29.8493 35.3239 29.8493 34.9399 29.4653C34.5558 29.0813 34.5558 28.4587 34.9399 28.0746Z"
+          fill="#5F20FE" />
+    <path
+        d="M35.1493 18.9344L34.6639 19.0546L34.7364 19.3473L35.0292 19.4198L35.1493 18.9344ZM38.5007 15.5831L38.0007 15.5818C38.0003 15.7148 38.053 15.8425 38.1471 15.9366C38.2412 16.0307 38.3689 16.0834 38.502 16.0831L38.5007 15.5831ZM35.1493 18.9344C35.6347 18.8143 35.6347 18.8144 35.6347 18.8145C35.6347 18.8145 35.6347 18.8145 35.6347 18.8145C35.6347 18.8146 35.6347 18.8145 35.6347 18.8144C35.6346 18.8143 35.6345 18.8139 35.6344 18.8133C35.6341 18.8121 35.6336 18.8101 35.6329 18.8072C35.6316 18.8015 35.6294 18.7926 35.6266 18.7805C35.621 18.7564 35.6127 18.72 35.6024 18.6727C35.5818 18.578 35.5534 18.44 35.5228 18.2701C35.4616 17.9293 35.3928 17.4652 35.361 16.9675C35.3289 16.4667 35.3355 15.95 35.416 15.4974C35.4978 15.0374 35.646 14.7002 35.8499 14.4963L35.4963 14.1428L35.1428 13.7892C34.7322 14.1997 34.5299 14.7687 34.4314 15.3223C34.3316 15.8834 34.3282 16.4878 34.363 17.0313C34.398 17.5779 34.4729 18.0814 34.5386 18.447C34.5715 18.6303 34.6024 18.7803 34.6252 18.8852C34.6366 18.9377 34.6461 18.979 34.6528 19.0077C34.6561 19.0221 34.6588 19.0333 34.6607 19.0411C34.6616 19.0451 34.6624 19.0482 34.6629 19.0504C34.6632 19.0515 34.6634 19.0525 34.6636 19.0531C34.6637 19.0535 34.6637 19.0538 34.6638 19.054C34.6638 19.0541 34.6639 19.0543 34.6639 19.0543C34.6639 19.0545 34.6639 19.0546 35.1493 18.9344ZM35.4963 14.1428L35.8499 14.4963C36.3884 13.9578 36.9224 13.9121 37.2789 14.0768C37.643 14.245 38.003 14.7162 38.0007 15.5818L38.5007 15.5831L39.0006 15.5844C39.0037 14.4446 38.5122 13.5449 37.6982 13.1689C36.8765 12.7894 35.9057 13.0263 35.1428 13.7892L35.4963 14.1428ZM35.1493 18.9344C35.0292 19.4198 35.0293 19.4198 35.0294 19.4199C35.0295 19.4199 35.0296 19.4199 35.0297 19.4199C35.03 19.42 35.0302 19.4201 35.0306 19.4202C35.0313 19.4203 35.0322 19.4205 35.0333 19.4208C35.0356 19.4214 35.0387 19.4221 35.0426 19.4231C35.0505 19.425 35.0616 19.4276 35.076 19.431C35.1047 19.4377 35.146 19.4471 35.1985 19.4585C35.3035 19.4813 35.4534 19.5122 35.6368 19.5451C36.0023 19.6108 36.5058 19.6857 37.0524 19.7207C37.596 19.7555 38.2003 19.7521 38.7614 19.6523C39.3151 19.5539 39.884 19.3515 40.2945 18.941L39.941 18.5874L39.5874 18.2339C39.3835 18.4378 39.0463 18.586 38.5863 18.6678C38.1338 18.7483 37.617 18.7548 37.1163 18.7228C36.6185 18.6909 36.1545 18.6222 35.8136 18.5609C35.6437 18.5304 35.5057 18.502 35.4111 18.4814C35.3637 18.4711 35.3273 18.4628 35.3032 18.4571C35.2912 18.4543 35.2822 18.4522 35.2765 18.4508C35.2737 18.4501 35.2716 18.4496 35.2705 18.4493C35.2699 18.4492 35.2695 18.4491 35.2693 18.4491C35.2692 18.449 35.2692 18.449 35.2692 18.449C35.2692 18.449 35.2693 18.4491 35.2693 18.4491C35.2693 18.4491 35.2694 18.4491 35.1493 18.9344ZM39.941 18.5874L40.2945 18.941C41.0575 18.1781 41.2943 17.2072 40.9148 16.3855C40.5388 15.5715 39.6391 15.08 38.4993 15.0831L38.5007 15.5831L38.502 16.0831C39.3676 16.0808 39.8388 16.4407 40.007 16.8049C40.1716 17.1613 40.126 17.6953 39.5874 18.2339L39.941 18.5874Z"
+        fill="#5F20FE" />
+    <path opacity="0.5"
+          d="M27.8451 6.26539L27.7945 6.44342C27.739 6.63898 27.7112 6.73675 27.7243 6.83274C27.7375 6.92873 27.79 7.01206 27.8952 7.17873L27.991 7.33047C28.361 7.91699 28.5461 8.21024 28.42 8.4501C28.2939 8.68997 27.9402 8.71758 27.2329 8.7728L27.0499 8.78709C26.8489 8.80279 26.7484 8.81063 26.6605 8.85681C26.5726 8.90299 26.5073 8.98228 26.3768 9.14086L26.2579 9.28522C25.7985 9.84325 25.5688 10.1223 25.3067 10.0864C25.0447 10.0505 24.9239 9.7235 24.6823 9.06948L24.6197 8.90027C24.5511 8.71442 24.5167 8.62149 24.4493 8.55405C24.3819 8.4866 24.2889 8.45227 24.1031 8.3836L23.9339 8.32109C23.2798 8.07946 22.9528 7.95864 22.917 7.6966C22.8811 7.43457 23.1601 7.20485 23.7181 6.74542L23.8625 6.62656C24.0211 6.496 24.1004 6.43072 24.1465 6.34285C24.1927 6.25499 24.2006 6.15448 24.2163 5.95347L24.2305 5.77047C24.2858 5.0631 24.3134 4.70942 24.5532 4.58335C24.7931 4.45728 25.0864 4.64232 25.6729 5.01239L25.8246 5.10814C25.9913 5.2133 26.0746 5.26588 26.1706 5.27903C26.2666 5.29217 26.3644 5.26439 26.5599 5.20882L26.738 5.15823C27.4261 4.96269 27.7702 4.86491 27.9543 5.04904C28.1384 5.23316 28.0407 5.57723 27.8451 6.26539Z"
+          stroke="#5F20FE" />
+  </svg>
+</template>

package/dist/src/assets/icons/verified-icon.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M6.89485 2.13319C6.7325 2.27154 6.65132 2.34073 6.56463 2.39883C6.36589 2.53204 6.1427 2.62448 5.90799 2.67082C5.80559 2.69104 5.69927 2.69952 5.48664 2.71649C4.95238 2.75913 4.68525 2.78044 4.46239 2.85916C3.94692 3.04123 3.54147 3.44668 3.3594 3.96215C3.28069 4.18501 3.25937 4.45214 3.21674 4.98639C3.19977 5.19903 3.19128 5.30535 3.17107 5.40774C3.12473 5.64246 3.03228 5.86565 2.89908 6.06438C2.84097 6.15108 2.77179 6.23226 2.63343 6.39461C2.28581 6.80253 2.11199 7.0065 2.01006 7.21975C1.77432 7.71298 1.77432 8.28637 2.01006 8.7796C2.11199 8.99285 2.2858 9.19682 2.63343 9.60474C2.77178 9.76708 2.84097 9.84827 2.89908 9.93497C3.03228 10.1337 3.12473 10.3569 3.17107 10.5916C3.19128 10.694 3.19977 10.8003 3.21674 11.013C3.25937 11.5472 3.28069 11.8143 3.3594 12.0372C3.54147 12.5527 3.94692 12.9581 4.46239 13.1402C4.68525 13.2189 4.95238 13.2402 5.48664 13.2829C5.69927 13.2998 5.80559 13.3083 5.90799 13.3285C6.1427 13.3749 6.36589 13.4673 6.56463 13.6005C6.65132 13.6586 6.7325 13.7278 6.89485 13.8662C7.30278 14.2138 7.50674 14.3876 7.71999 14.4895C8.21322 14.7253 8.78662 14.7253 9.27985 14.4895C9.4931 14.3876 9.69706 14.2138 10.105 13.8662C10.2673 13.7278 10.3485 13.6586 10.4352 13.6005C10.6339 13.4673 10.8571 13.3749 11.0919 13.3285C11.1942 13.3083 11.3006 13.2998 11.5132 13.2829C12.0475 13.2402 12.3146 13.2189 12.5374 13.1402C13.0529 12.9581 13.4584 12.5527 13.6404 12.0372C13.7192 11.8143 13.7405 11.5472 13.7831 11.013C13.8001 10.8003 13.8086 10.694 13.8288 10.5916C13.8751 10.3569 13.9676 10.1337 14.1008 9.93497C14.1589 9.84827 14.228 9.76709 14.3664 9.60474C14.714 9.19682 14.8878 8.99285 14.9898 8.7796C15.2255 8.28637 15.2255 7.71298 14.9898 7.21975C14.8878 7.0065 14.714 6.80253 14.3664 6.39461C14.228 6.23226 14.1589 6.15108 14.1008 6.06438C13.9676 5.86565 13.8751 5.64246 13.8288 5.40774C13.8086 5.30535 13.8001 5.19903 13.7831 4.98639C13.7405 4.45214 13.7192 4.18501 13.6404 3.96215C13.4584 3.44668 13.0529 3.04123 12.5374 2.85916C12.3146 2.78044 12.0475 2.75913 11.5132 2.71649C11.3006 2.69952 11.1942 2.69104 11.0919 2.67082C10.8571 2.62448 10.6339 2.53204 10.4352 2.39883C10.3485 2.34073 10.2673 2.27155 10.105 2.13319C9.69706 1.78556 9.4931 1.61174 9.27985 1.50982C8.78662 1.27407 8.21322 1.27407 7.71999 1.50982C7.50674 1.61174 7.30277 1.78556 6.89485 2.13319ZM11.4156 6.5751C11.6275 6.36321 11.6275 6.01967 11.4156 5.80778C11.2037 5.5959 10.8602 5.5959 10.6483 5.80778L7.41476 9.04128L6.35156 7.97808C6.13967 7.76619 5.79613 7.76619 5.58424 7.97808C5.37236 8.18997 5.37236 8.5335 5.58424 8.74539L7.03111 10.1923C7.24299 10.4041 7.58653 10.4041 7.79842 10.1923L11.4156 6.5751Z"
+          fill="currentColor" />
+  </svg>
+</template>

package/dist/src/assets/icons/widget-icon.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.0834 5.41663H14.5834M14.5834 5.41663H17.0834M14.5834 5.41663V7.91663M14.5834 5.41663V2.91663"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    <path
+        d="M2.08337 5.41671C2.08337 3.84536 2.08337 3.05968 2.57153 2.57153C3.05968 2.08337 3.84536 2.08337 5.41671 2.08337C6.98806 2.08337 7.77373 2.08337 8.26189 2.57153C8.75004 3.05968 8.75004 3.84536 8.75004 5.41671C8.75004 6.98806 8.75004 7.77373 8.26189 8.26189C7.77373 8.75004 6.98806 8.75004 5.41671 8.75004C3.84536 8.75004 3.05968 8.75004 2.57153 8.26189C2.08337 7.77373 2.08337 6.98806 2.08337 5.41671Z"
+        stroke="currentColor" stroke-width="1.5" />
+    <path
+        d="M11.25 14.5833C11.25 13.012 11.25 12.2263 11.7382 11.7382C12.2263 11.25 13.012 11.25 14.5833 11.25C16.1547 11.25 16.9404 11.25 17.4285 11.7382C17.9167 12.2263 17.9167 13.012 17.9167 14.5833C17.9167 16.1547 17.9167 16.9404 17.4285 17.4285C16.9404 17.9167 16.1547 17.9167 14.5833 17.9167C13.012 17.9167 12.2263 17.9167 11.7382 17.4285C11.25 16.9404 11.25 16.1547 11.25 14.5833Z"
+        stroke="currentColor" stroke-width="1.5" />
+    <path opacity="0.5"
+          d="M2.08337 14.5833C2.08337 13.012 2.08337 12.2263 2.57153 11.7382C3.05968 11.25 3.84536 11.25 5.41671 11.25C6.98806 11.25 7.77373 11.25 8.26189 11.7382C8.75004 12.2263 8.75004 13.012 8.75004 14.5833C8.75004 16.1547 8.75004 16.9404 8.26189 17.4285C7.77373 17.9167 6.98806 17.9167 5.41671 17.9167C3.84536 17.9167 3.05968 17.9167 2.57153 17.4285C2.08337 16.9404 2.08337 16.1547 2.08337 14.5833Z"
+          stroke="currentColor" stroke-width="1.5" />
+  </svg>
+</template>

package/dist/src/assets/images/logo.svg

@@ -0,0 +1,13 @@
+<svg width="71" height="20" viewBox="0 0 71 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.1002 19.9983H27.6803V15.0798C27.6803 15.0798 20.4048 5.28256 16.3243 0.000355625C13.9775 -0.000451478 10.7646 0.000367635 10.7646 0.000367635L10.7394 5.51094L22.1002 19.9983Z" fill="#5F20FE"/>
+<path d="M4.8979 19.9995H0V15.4323L6.72261 7.76791H11.6205V12.3351L4.8979 19.9995Z" fill="#5F20FE"/>
+<path d="M18.7376 17.4507L16.7006 20H10.8021L8.55237 17.2913L10.8021 14.7422H16.6578L18.7376 17.4507Z" fill="#5F20FE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.7984 19.9858C45.0048 19.9858 44.279 19.788 43.6209 19.3923C42.9628 18.9872 42.4354 18.4502 42.0386 17.7813C41.6515 17.103 41.4579 16.3587 41.4579 15.5485C41.4579 14.7383 41.6515 13.9987 42.0386 13.3298C42.4354 12.6515 42.9628 12.1145 43.6209 11.7188C44.279 11.3137 45.0048 11.1111 45.7984 11.1111C46.3694 11.1111 46.8968 11.21 47.3807 11.4079C47.8646 11.6057 48.2759 11.8836 48.6147 12.2416V11.3014H50.8067V19.9858L48.6147 20V18.8553C48.2759 19.2039 47.8646 19.4818 47.3807 19.6891C46.8968 19.8869 46.3694 19.9858 45.7984 19.9858ZM47.3227 17.6824C46.9549 17.9085 46.5388 18.0215 46.0742 18.0215C45.6194 18.0215 45.2032 17.9085 44.8258 17.6824C44.458 17.4563 44.1629 17.1595 43.9403 16.7921C43.7177 16.4152 43.6064 16.0007 43.6064 15.5485C43.6064 15.0963 43.7177 14.6864 43.9403 14.319C44.1629 13.9422 44.458 13.6407 44.8258 13.4146C45.2032 13.1885 45.6242 13.0754 46.0887 13.0754C46.5436 13.0754 46.9549 13.1885 47.3227 13.4146C47.7001 13.6407 48.0001 13.9422 48.2227 14.319C48.4453 14.6864 48.5566 15.0963 48.5566 15.5485C48.5566 16.0007 48.4453 16.4152 48.2227 16.7921C48.0001 17.1595 47.7001 17.4563 47.3227 17.6824Z" fill="white"/>
+<path d="M56.1725 20H57.4073L61.4643 11.3117L59.2206 11.3118C59.2206 11.3118 56.9641 16.2216 56.848 16.5076C56.7318 16.2216 54.5462 11.3117 54.5462 11.3117H52.1155L56.1725 20Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.9034 20C65.9481 20 65.0988 19.8043 64.3557 19.413C63.6223 19.0216 63.0481 18.4859 62.6332 17.8057C62.2279 17.1162 62.0252 16.3382 62.0252 15.4717C62.0252 14.6424 62.223 13.9017 62.6187 13.2495C63.024 12.5879 63.5692 12.0661 64.2544 11.6841C64.9396 11.3021 65.6971 11.1111 66.5271 11.1111C67.3763 11.1111 68.1339 11.3021 68.7997 11.6841C69.4752 12.0568 70.0108 12.5646 70.4065 13.2075C70.8022 13.8504 71 14.5819 71 15.4018V16.0892H65.6006H64.8232H64.1915C64.3073 16.6948 64.6163 17.1628 65.1085 17.5541C65.6006 17.9455 66.2183 18.1411 66.9613 18.1411C67.5114 18.1411 68.0084 18.0293 68.4523 17.8057C68.8962 17.5821 69.2629 17.3026 69.5525 16.9671L70.0736 19.0216C69.6393 19.3478 69.152 19.59 68.6115 19.7484C68.0711 19.9161 67.5018 20 66.9034 20ZM65.5772 14.703H64.1404C64.2948 14.1626 64.5825 13.7247 65.0071 13.3892C65.4318 13.0538 65.9336 12.8861 66.5126 12.8861C67.1013 12.8861 67.6031 13.0491 68.018 13.3752C68.4427 13.7014 68.7324 14.1626 68.8771 14.703H68.2254H67.4445H65.5772Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.9034 8.88888C65.9481 8.88888 65.0988 8.69321 64.3557 8.30188C63.6223 7.91054 63.0481 7.37479 62.6332 6.69461C62.2279 6.00512 62.0252 5.22711 62.0252 4.36058C62.0252 3.53133 62.223 2.79059 62.6187 2.13836C63.024 1.47682 63.5692 0.955042 64.2544 0.573025C64.9396 0.191008 65.6971 0 66.5271 0C67.3763 0 68.1339 0.191008 68.7997 0.573025C69.4752 0.945725 70.0108 1.45353 70.4065 2.09643C70.8022 2.73934 71 3.47076 71 4.2907V4.97808H65.6006H64.8232H64.1915C64.3073 5.58371 64.6163 6.05171 65.1085 6.44304C65.6006 6.83438 66.2183 7.03004 66.9613 7.03004C67.5114 7.03004 68.0084 6.91823 68.4523 6.69461C68.8962 6.47099 69.2629 6.19147 69.5525 5.85604L70.0736 7.91054C69.6393 8.23666 69.152 8.47891 68.6115 8.63731C68.0711 8.80502 67.5018 8.88888 66.9034 8.88888ZM65.5772 3.59189H64.1404C64.2948 3.05148 64.5825 2.61355 65.0071 2.27812C65.4318 1.9427 65.9336 1.77498 66.5126 1.77498C67.1013 1.77498 67.6031 1.93804 68.018 2.26415C68.4427 2.59026 68.7324 3.05148 68.8771 3.59189H68.2254H67.4445H65.5772Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.3025 8.88888V0H55.4891C56.2389 0 56.9193 0.11068 57.5302 0.332041C58.1481 0.553402 58.6792 0.860145 59.1235 1.25227C59.5748 1.63807 59.9219 2.09028 60.1649 2.6089C60.4079 3.12751 60.5294 3.91326 60.5294 4.50145C60.5294 5.08963 60.4079 5.64304 60.1649 6.16165C59.9219 6.68027 59.5748 7.23127 59.1235 7.6234C58.6792 8.0092 58.1481 8.33548 57.5302 8.55684C56.9193 8.7782 56.2389 8.88888 55.4891 8.88888H52.3025ZM56.778 7.01353C56.3753 7.15267 54.7743 7.12887 54.2466 7.12887V1.62167C54.7743 1.62167 56.3753 1.69047 56.778 1.82962C57.1807 1.96876 57.4573 2.08079 57.7281 2.33378C58.0058 2.58043 58.2141 2.87137 58.3529 3.20657C58.4987 3.53545 58.5682 4.06496 58.5682 4.44444C58.5682 4.82392 58.4987 5.2351 58.3529 5.56398C58.2141 5.89286 58.0058 6.18379 57.7281 6.43677C57.4573 6.68343 57.1807 6.86806 56.778 7.01353Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0388 8.88888C45.1947 8.88888 44.4217 8.68855 43.7199 8.2879C43.0276 7.88725 42.4775 7.3515 42.0697 6.68064C41.6618 6.00978 41.4579 5.26438 41.4579 4.44444C41.4579 3.6245 41.6618 2.8791 42.0697 2.20824C42.4775 1.53738 43.0276 1.00163 43.7199 0.600978C44.4217 0.200326 45.19 0 46.0246 0C46.8782 0 47.6511 0.200326 48.3435 0.600978C49.0358 1.00163 49.5859 1.53738 49.9937 2.20824C50.411 2.86979 50.6197 3.61518 50.6197 4.44444C50.6197 5.25506 50.411 6.00046 49.9937 6.68064C49.5859 7.3515 49.0358 7.88725 48.3435 8.2879C47.6511 8.68855 46.8829 8.88888 46.0388 8.88888ZM47.2765 6.56883C46.9066 6.79245 46.4893 6.90426 46.0246 6.90426C45.5693 6.90426 45.1568 6.79245 44.7869 6.56883C44.417 6.34521 44.123 6.04705 43.9049 5.67435C43.6867 5.30165 43.5776 4.89168 43.5776 4.44444C43.5776 3.98788 43.6867 3.57791 43.9049 3.21453C44.123 2.84183 44.417 2.54367 44.7869 2.32005C45.1568 2.09643 45.5693 1.98462 46.0246 1.98462C46.4893 1.98462 46.9066 2.09643 47.2765 2.32005C47.6464 2.54367 47.9404 2.84183 48.1585 3.21453C48.3767 3.57791 48.4857 3.98788 48.4857 4.44444C48.4857 4.89168 48.3767 5.30165 48.1585 5.67435C47.9404 6.04705 47.6464 6.34521 47.2765 6.56883Z" fill="white"/>
+<path d="M36.7918 20C35.929 20 35.1389 19.7997 34.4214 19.399C33.7137 18.9984 33.1514 18.4626 32.7345 17.7917C32.3176 17.1116 32.1092 16.3662 32.1092 15.5555C32.1092 14.7356 32.3176 13.9902 32.7345 13.3193C33.1514 12.6485 33.7137 12.1127 34.4214 11.7121C35.1389 11.3114 35.929 11.1111 36.7918 11.1111C37.4026 11.1111 37.9795 11.2089 38.5224 11.4046C39.0653 11.6003 39.5452 11.8845 39.9621 12.2572L39.3513 14.5772C39.109 14.1766 38.7745 13.8318 38.3479 13.543C37.9213 13.2448 37.4269 13.0957 36.8646 13.0957C36.3798 13.0957 35.9435 13.2075 35.5557 13.4312C35.1776 13.6548 34.8771 13.9529 34.6541 14.3256C34.4311 14.689 34.3196 15.099 34.3196 15.5555C34.3196 16.0028 34.4311 16.4128 34.6541 16.7854C34.8771 17.1581 35.1776 17.4563 35.5557 17.6799C35.9435 17.9035 36.3798 18.0154 36.8646 18.0154C37.4269 18.0154 37.9213 17.8709 38.3479 17.5821C38.7745 17.2839 39.109 16.9345 39.3513 16.5339L39.9621 18.8539C39.5452 19.2266 39.0653 19.5108 38.5224 19.7065C37.9795 19.9021 37.4026 20 36.7918 20Z" fill="white"/>
+<path d="M36.7918 8.88888C35.929 8.88888 35.1389 8.68856 34.4214 8.2879C33.7137 7.88725 33.1514 7.3515 32.7345 6.68064C32.3176 6.00046 32.1092 5.25507 32.1092 4.44445C32.1092 3.62451 32.3176 2.8791 32.7345 2.20824C33.1514 1.53738 33.7137 1.00163 34.4214 0.600978C35.1389 0.200325 35.929 0 36.7918 0C37.4026 0 37.9795 0.0978308 38.5224 0.293498C39.0653 0.489166 39.5452 0.773352 39.9621 1.14605L39.3513 3.4661C39.109 3.06545 38.7745 2.72071 38.3479 2.43186C37.9213 2.1337 37.4269 1.98462 36.8646 1.98462C36.3798 1.98462 35.9435 2.09643 35.5557 2.32005C35.1776 2.54367 34.8771 2.84184 34.6541 3.21453C34.4311 3.57792 34.3196 3.98789 34.3196 4.44445C34.3196 4.89169 34.4311 5.30165 34.6541 5.67435C34.8771 6.04705 35.1776 6.34521 35.5557 6.56883C35.9435 6.79245 36.3798 6.90426 36.8646 6.90426C37.4269 6.90426 37.9213 6.75984 38.3479 6.471C38.7745 6.17284 39.109 5.82343 39.3513 5.42278L39.9621 7.74283C39.5452 8.11553 39.0653 8.39971 38.5224 8.59538C37.9795 8.79105 37.4026 8.88888 36.7918 8.88888Z" fill="white"/>
+</svg>

package/dist/src/components/common/Button.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  isDisabled?: boolean
+  title?: string
+  as?: 'link'
+  href?: string
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text' | 'link' | 'icon'
+  type?: 'submit'
+  class?: string
+}>()
+const buttonBaseClass = `flex items-center justify-center
+${props.isDisabled ? 'cursor-not-allowed opacity-20' : 'cursor-pointer'}
+w-fit max-w-full min-w-12 min-h-12 rounded-full text-body-primary font-bold transition-colors`
+const linkBaseClass = 'flex transition-colors'
+const variantClass = computed(() => {
+  switch (props.variant) {
+    case 'secondary':
+      return `${buttonBaseClass} px-6 py-1 bg-primary-900 hover:bg-surface-tertiary`
+    case 'tertiary':
+      return `${buttonBaseClass} px-6 py-1 border border-primary-500 hover:border-primary-700`
+    case 'icon':
+      return `${buttonBaseClass} p-5 border border-primary-500 hover:border-primary-700`
+    case 'ghost':
+      return `${linkBaseClass} text-body-primary hover:text-primary-200 active:text-primary-200 font-bold px-6 py-2`
+    case 'text':
+      return `${linkBaseClass} text-body-secondary-lighter hover:text-primary-200 active:text-primary-200`
+    case 'link':
+      return `${linkBaseClass} text-hovered underline`
+    default:
+      return `${buttonBaseClass} bg-primary-500 hover:bg-primary-700 active:bg-primary-900`
+  }
+})
+</script>
+
+<template>
+  <a v-if="props.as === 'link'" :href="props.href" :class="[variantClass, props.class ?? '']">
+    <span>{{ title }}</span>
+    <slot />
+  </a>
+  <button v-else :class="[variantClass, props.class ?? '']">
+    {{ title }}
+    <slot />
+  </button>
+</template>

package/dist/src/components/common/Checkbox.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import AsteriskIcon from "../../assets/icons/asterisk-icon.vue";
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    label: string
+    isRequired?: boolean
+    isError?: boolean
+    variant?: 'primary' | 'secondary'
+    size?: 'small' | 'medium'
+    modelValue?: boolean
+  }>(),
+  {
+    isRequired: false,
+    isError: false,
+    variant: 'primary',
+    size: 'medium'
+  }
+)
+
+const checkboxSize = computed(() => {
+  switch (props.size) {
+    case 'small':
+      return 'w-4 h-4 before:w-[0.5em] before:h-[0.5em]'
+    default:
+      return 'w-6 h-6 before:w-[0.75em] before:h-[0.75em]'
+  }
+})
+const labelSize = computed(() => {
+  switch (props.size) {
+    case 'small':
+      return 'text-xs'
+    default:
+      return 'text-sm'
+  }
+})
+const labelBaseClass = 'flex items-center w-fit text-body-primary cursor-pointer'
+const labelVariantClass = computed(() => {
+  switch (props.variant) {
+    case 'secondary':
+      return `${labelBaseClass} ${labelSize.value} gap-2 py-2 px-3 bg-surface-secondary rounded-lg`
+    default:
+      return `${labelBaseClass} ${labelSize.value} gap-3`
+  }
+})
+const inputBaseClass = 'cursor-pointer transition-colors'
+const borderClass = computed(() => {
+  return props.isError ? 'border-error checkbox-error' : 'border-outline-primary-hover hover:border-action'
+});
+
+const inputVariantClass = computed(() => {
+  switch (props.variant) {
+    case 'secondary':
+      return `${inputBaseClass} ${checkboxSize.value} outline-2 outline-surface-quaternary checked:bg-action checked:outline-none hover:outline-action`
+    default:
+       return `${inputBaseClass} ${checkboxSize.value} border-2 ${borderClass.value}`
+  }
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <label :for="id" :class="labelVariantClass">
+    <input 
+      :id="id" 
+      type="checkbox" 
+      :autocomplete="id" 
+      :class="inputVariantClass"
+      :data-size="size"
+      :checked="modelValue"
+      @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"/>
+    <span class="flex items-center">
+      {{ label }}
+      <AsteriskIcon v-if="isRequired" class="mx-1"/>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+input {
+  appearance: none;
+  -webkit-appearance: none;
+  display: grid;
+  place-content: center;
+  border-radius: var(--radius-control);
+}
+
+/* The corner cannot be size-independent. The small box is 16px, and 8px on a
+   16px box is exactly half its side -- a circle, which reads as a radio button
+   for what is a pick-any control. Keyed off data-size rather than a utility
+   class so it holds without a Tailwind build, same reason both custom
+   properties are declared in :root. */
+input[data-size="small"] {
+  border-radius: var(--radius-control-sm);
+}
+
+input::before {
+  content: '';
+  transform: scale(0);
+  transition: var(--duration-control) transform ease-in-out;
+  background-image: url("../../assets/images/checked-icon.svg");
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+input:checked::before {
+  transform: scale(1);
+  transform-origin: center center;
+}
+
+.checkbox-error {
+  box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+    0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
+}
+</style>