npm - @vonage/vivid - Versions diffs - 3.44.0 → 3.46.0 - Mend

@vonage/vivid 3.44.0 → 3.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/README.md +399 -165
package/appearance-ui/index.js +1 -1
package/custom-elements.json +133 -248
package/fab/index.js +0 -1
package/index.js +2 -1
package/lib/alert/alert.d.ts +2 -0
package/lib/data-grid/data-grid-cell.d.ts +1 -0
package/lib/data-grid/data-grid.d.ts +2 -0
package/lib/enums.d.ts +3 -0
package/lib/menu/menu.d.ts +5 -5
package/lib/popup/popup.d.ts +2 -2
package/lib/select/select.d.ts +0 -3
package/lib/tabs/tabs.d.ts +3 -1
package/lib/text-area/text-area.d.ts +2 -2
package/lib/toggletip/toggletip.d.ts +4 -4
package/lib/tooltip/tooltip.d.ts +4 -5
package/listbox/index.js +1 -1
package/menu/index.js +1 -0
package/menu-item/index.js +1 -0
package/package.json +1 -1
package/shared/anchored.js +76 -0
package/shared/definition.js +1 -1
package/shared/definition11.js +1 -1
package/shared/definition12.js +1 -1
package/shared/definition13.js +1 -1
package/shared/definition14.js +1 -1
package/shared/definition15.js +1 -1
package/shared/definition16.js +1 -1
package/shared/definition17.js +112 -49
package/shared/definition2.js +1 -1
package/shared/definition20.js +2 -2
package/shared/definition21.js +1 -1
package/shared/definition22.js +1 -1
package/shared/definition23.js +1 -4
package/shared/definition24.js +1 -1
package/shared/definition25.js +1 -1
package/shared/definition28.js +37 -46
package/shared/definition29.js +2 -2
package/shared/definition3.js +1 -1
package/shared/definition30.js +1 -1
package/shared/definition31.js +1 -1
package/shared/definition33.js +1 -1
package/shared/definition34.js +1 -1
package/shared/definition35.js +1 -1
package/shared/definition36.js +1 -1
package/shared/definition37.js +1 -1
package/shared/definition38.js +1 -1
package/shared/definition39.js +1 -1
package/shared/definition4.js +10 -6
package/shared/definition40.js +1 -1
package/shared/definition41.js +6 -4
package/shared/definition42.js +1 -1
package/shared/definition43.js +1 -1
package/shared/definition44.js +1 -1
package/shared/definition45.js +20 -9
package/shared/definition46.js +1 -1
package/shared/definition48.js +1 -1
package/shared/definition49.js +8 -3
package/shared/definition5.js +1 -1
package/shared/definition51.js +1 -1
package/shared/definition52.js +1 -1
package/shared/definition54.js +37 -45
package/shared/definition55.js +42 -58
package/shared/definition56.js +1 -1
package/shared/definition58.js +1 -1
package/shared/definition6.js +1 -1
package/shared/definition60.js +108 -12
package/shared/definition7.js +1 -1
package/shared/definition8.js +2 -3
package/shared/definition9.js +1 -1
package/shared/enums.js +5 -1
package/shared/form-associated.js +1 -0
package/shared/index2.js +1 -1
package/shared/patterns/anchored.d.ts +22 -0
package/shared/presentationDate.js +1 -1
package/shared/text-field.js +1 -1
package/style.css +162 -135
package/styles/core/all.css +1 -1
package/styles/core/theme.css +1 -1
package/styles/core/typography.css +1 -1
package/styles/tokens/theme-dark.css +4 -4
package/styles/tokens/theme-light.css +4 -4
package/styles/tokens/vivid-2-compat.css +1 -1
package/toggletip/index.js +1 -0
package/tooltip/index.js +1 -0
package/vivid.api.json +38 -0

package/README.md CHANGED Viewed

@@ -1,171 +1,405 @@
-# Vivid UI
-Essential UI **web components** for building modern web applications, bound to provide a **safe**, **simple** and **intuitive** interface.
-![image](https://user-images.githubusercontent.com/10883919/189522882-968358df-ee7c-4256-b61b-550cf369a087.png)
----
-## Installation
-To integrate Vivid components into your project, run:
-```bash
-npm install @vonage/vivid
-```
-### Usage
-Import components in your project via [side effect imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only):
-```js
-import '@vonage/vivid/button';
-```
-And include in HTML:
-```html
-<vwc-button label="Click me"></vwc-button>
-```
-For a full list of components and API, explore the [components docs](https://vivid.deno.dev) 📚.
----
-## Prerequisite
-### Tokens
-To **include the tokens**, you must load theme css:
-<vwc-note connotation="warning" icon="warning-solid" headline="Only one theme is required to be loaded."></vwc-note>
-```js
-'node_modules/@vonage/vivid/styles/tokens/theme-light.css';
-```
-**Or**
-```js
-'node_modules/@vonage/vivid/styles/tokens/theme-dark.css';
-```
-#### About tokens
-The Vivid components library rely on a set of **design tokens** (in the form of css custom properties).
-Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to look as intended.
-As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
-### Setting Vivid class
-The Vivid tokens require a `vvd-root` class selector to be present on a wrapping element (advisably the `:root`) for it to apply its css custom properties to.
-💡 The [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) CSS pseudo-class matches the root element of a tree representing the document
-```html
-<html class="vvd-root">...</html>
-```
-You can also add it to any wrapping element if you would like to scope the styles to only a certain part of your application.
-### Fonts (Prerequisite)
-Vivid uses **Montserrat** and **Roboto Mono** Google fonts.
-Learn how to load fonts into your application with [google-fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service#loading-web-fonts)
-Unless explicitly stated otherwise, **Vonage** products should use the brand specified font families by **Spezia**. Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).
-💡 For more information check out [vonage fonts](/getting-started/fonts-and-tokens)
----
-## Advanced Usage
-💡 For more information on **core application styles** & **scoped elements** check out [advanced usage](/getting-started/advanced)
----
-## CDN - Quickstart
-Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
-Such practice is often used when working on POCs or reproduction environments.
-Tools like [UNPKG](https://unpkg.com), [jsDeliver](https://www.jsdelivr.com), [Skypack](https://www.skypack.dev) etc' are bound to deliver any content registered in the npm registry.
-The following snippet fully renders a Vivid button component
-```html
-<!-- import Montserrat & Roboto-Mono fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
-<!-- import light theme style tokens -->
-<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@3.x/styles/tokens/theme-light.css">
-<!-- import Vivid button component -->
-<script type="module" src="https://unpkg.com/@vonage/vivid@3.x/button/index.js"></script>
-<!-- Part of the app (or a whole app) that contains vivid components -->
-<div class="vvd-root">
-  <vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
+<div class="welcome">
+  <h1>Welcome to VIVID@3</h1>
+  <h2 class="font-base-extended-bold">Vonage's design system platform targeted to provide incorporated, battery-charged web components.</h2>
+  <div class="buttons-wrapper">
+    <vwc-button id="quickStart" label='Quick Start' appearance='outlined' icon='rocket-line'></vwc-button>
+    <vwc-button id="advanced" label='Advanced' appearance='outlined' icon='code-line'></vwc-button>
+  </div>
 </div>
-```
----
-## Support Matrix
-This library is supported on 2 recent versions of major browsers (Chrome, Firefox, Safari, Edge).
----
-## Support
-This library is open source, developed and maintained by the [Vonage Vivid teams](https://github.com/orgs/Vonage/teams/vivid/teams).
-For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/issues/new?assignees=yonatankra%2C+rachelbt%2C+rinaok%2C+yinonov&labels=bug&template=bug_report.yml&title=%5BYOUR+TITLE%5D%3A+Brief+description) or [feature request](https://github.com/Vonage/vivid-3/issues/new?assignees=yonatankra%2C+rachelbt%2C+rinaok%2C+yinonov&labels=Feature+request&template=feature_request.yml&title=%5BYOUR+TITLE%5D%3A+Brief+description).
----
-## Roadmap
-- View [components status](https://github.com/orgs/Vonage/projects/6)
-- [What's on our plate](https://github.com/orgs/Vonage/projects/3/views/7)
+<vwc-layout gutters="large-block">
+  <vwc-empty-state headline="Scaling design with system thinking">
+  <svg slot="graphic" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M44.0415 2.09184C40.0489 0.390192 35.6964 -0.294862 31.374 0.0979938C27.0515 0.49085 22.894 1.94936 19.2734 4.34298C15.6528 6.73656 12.6823 9.99055 10.6276 13.8137C8.5731 17.6366 7.4985 21.91 7.5 26.25V27.5566L0.314915 38.3341C0.0165929 38.7819 -0.0752156 39.3358 0.0628222 39.8555C0.20086 40.3753 0.555453 40.811 1.03648 41.0514L7.5 44.2831V52.4994C7.5 54.4884 8.29019 56.396 9.69671 57.8026C11.1032 59.2093 13.0109 59.9994 15 59.9994H28.125C31.606 59.9994 34.9444 58.6164 37.4058 56.1549C39.8674 53.6938 41.25 50.3551 41.25 46.8744V33.5619C45.5291 32.6932 48.75 28.9099 48.75 24.3744C48.75 19.1967 44.5526 14.9994 39.375 14.9994C34.1973 14.9994 30 19.1967 30 24.3744C30 28.9099 33.2208 32.6932 37.5 33.5619V46.8744C37.5 49.3606 36.5123 51.7453 34.7541 53.5033C32.996 55.2616 30.6114 56.2494 28.125 56.2494H15C14.0055 56.2494 13.0516 55.8541 12.3484 55.151C11.6451 54.4475 11.25 53.4939 11.25 52.4994V43.1244C11.25 42.4141 10.8487 41.765 10.2135 41.4474L4.61325 38.6473L10.9351 29.1644C11.1404 28.8564 11.25 28.4945 11.25 28.1243V26.2486C11.2486 22.5284 12.1697 18.8659 13.9308 15.5889C15.692 12.312 18.2382 9.52281 21.3415 7.47115C24.4448 5.41949 28.0085 4.16935 31.7134 3.8326C35.4184 3.49587 39.1489 4.08306 42.5715 5.54163C45.9937 7.00015 49.0012 9.28458 51.324 12.1903C53.6471 15.0961 55.2135 18.5325 55.8828 22.192C56.5522 25.8516 56.3036 29.6199 55.1595 33.1599C54.0153 36.6998 52.0113 39.9009 49.3267 42.4764C48.9585 42.83 48.75 43.3186 48.75 43.8294V58.1244C48.75 59.1598 49.5896 59.9994 50.625 59.9994C51.6603 59.9994 52.5 59.1598 52.5 58.1244V44.6113C55.3428 41.7099 57.4762 38.1853 58.728 34.3131C60.0626 30.1832 60.3525 25.7868 59.5717 21.5173C58.7906 17.2479 56.9632 13.2387 54.2531 9.84869C51.543 6.45861 48.0345 3.79349 44.0415 2.09184ZM39.3915 29.9994C39.3859 29.9993 39.3806 29.9993 39.375 29.9993C39.3694 29.9993 39.3641 29.9993 39.3585 29.9994C36.2596 29.9906 33.75 27.4755 33.75 24.3744C33.75 21.2678 36.2684 18.7494 39.375 18.7494C42.4815 18.7494 45 21.2678 45 24.3744C45 27.4755 42.4905 29.9905 39.3915 29.9994Z" fill="url(#paint0_linear_1977_37003)"/>
+  <defs>
+  <linearGradient id="paint0_linear_1977_37003" x1="2.21401e-07" y1="53.8108" x2="64.1533" y2="47.9301" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#60DEFE"/>
+  <stop offset="0.366691" stop-color="#A663FF"/>
+  <stop offset="0.631086" stop-color="#FD3FE4"/>
+  <stop offset="1" stop-color="#FF9C9D"/>
+  </linearGradient>
+  </defs>
+</svg>
+</vwc-empty-state>
+<vwc-empty-state headline="Maintaining design in a heartbeat">
+<svg slot="graphic" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.604 35.6041C47.4095 34.7986 48.7154 34.7986 49.5208 35.6041L56.6458 42.7291C56.9338 43.017 57.13 43.3837 57.2099 43.783L59.9599 57.533C60.0951 58.2092 59.8834 58.9082 59.3958 59.3959C58.9082 59.8835 58.2091 60.0952 57.5329 59.9599L43.783 57.2099C43.3837 57.1301 43.017 56.9338 42.729 56.6459L35.604 49.5209C34.7986 48.7154 34.7986 47.4095 35.604 46.6041C36.4095 45.7986 37.7154 45.7986 38.5209 46.6041L45.2043 53.2875L55.3082 55.3083L53.2875 45.2043L46.604 38.5209C45.7986 37.7154 45.7986 36.4095 46.604 35.6041Z" fill="url(#paint0_linear_1977_37007)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6041 0.604092C12.4095 -0.201364 13.7155 -0.201364 14.5209 0.604092L24.3959 10.4791C25.2014 11.2845 25.2014 12.5905 24.3959 13.3959C23.5905 14.2014 22.2845 14.2014 21.4791 13.3959L13.0625 4.97932L4.97932 13.0625L13.3959 21.4791C14.2014 22.2845 14.2014 23.5905 13.3959 24.3959C12.5905 25.2014 11.2845 25.2014 10.4791 24.3959L0.604092 14.5209C-0.201364 13.7155 -0.201364 12.4095 0.604092 11.6041L11.6041 0.604092Z" fill="url(#paint1_linear_1977_37007)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.613098 45.434C-0.204286 44.6166 -0.204286 43.2913 0.613098 42.474L42.4735 0.613517C43.2909 -0.203866 44.6162 -0.203866 45.4335 0.613517L59.387 14.567C60.2044 15.3844 60.2044 16.7096 59.387 17.527L17.5266 59.3874C16.7092 60.2048 15.384 60.2048 14.5666 59.3874L0.613098 45.434ZM5.05311 43.954L16.0466 54.9474L54.947 16.047L43.9535 5.05353L38.543 10.4641L42.6454 14.5664C43.4628 15.3838 43.4628 16.7091 42.6454 17.5265C41.828 18.3439 40.5027 18.3439 39.6853 17.5265L35.583 13.4241L30.1707 18.8363L34.2731 22.9387C35.0905 23.7561 35.0905 25.0813 34.2731 25.8987C33.4557 26.7161 32.1305 26.7161 31.3131 25.8987L27.2107 21.7964L21.7985 27.2086L25.9009 31.3109C26.7183 32.1283 26.7183 33.4536 25.9009 34.271C25.0835 35.0884 23.7582 35.0884 22.9408 34.271L18.8385 30.1686L13.4263 35.5808L17.5286 39.6832C18.346 40.5006 18.346 41.8258 17.5286 42.6432C16.7112 43.4606 15.386 43.4606 14.5686 42.6432L10.4662 38.5409L5.05311 43.954Z" fill="url(#paint2_linear_1977_37007)"/>
+<defs>
+<linearGradient id="paint0_linear_1977_37007" x1="2.21401e-07" y1="53.8128" x2="64.1532" y2="47.9312" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1977_37007" x1="2.21401e-07" y1="53.8128" x2="64.1532" y2="47.9312" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1977_37007" x1="2.21401e-07" y1="53.8128" x2="64.1532" y2="47.9312" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+</defs>
+</svg>
+</vwc-empty-state>
+<vwc-empty-state headline="One consistent experience for all">
+<svg slot="graphic" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.75 30C35.8211 30 37.5 28.3211 37.5 26.25C37.5 24.1789 35.8211 22.5 33.75 22.5C31.6789 22.5 30 24.1789 30 26.25C30 28.3211 31.6789 30 33.75 30Z" fill="url(#paint0_linear_1977_37011)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.6255 0.375C60.0005 0.75 60.0005 1.5 60.0005 1.875C59.2505 12.75 56.2505 21.375 52.5005 28.5C55.5005 36.75 53.6255 46.125 47.2505 52.5C45.7505 54 44.2505 55.125 42.7505 55.875C42.0005 56.25 41.2505 56.25 40.5005 55.5L32.6255 47.625C32.2505 48 31.8755 48.375 31.5005 48.375L27.7505 50.25C27.563 50.25 27.3755 50.3438 27.188 50.4375C27.0005 50.5313 26.813 50.625 26.6255 50.625H26.2505C25.8755 51 24.7505 50.625 24.3755 50.25L9.75047 35.625C9.37547 35.25 9.00047 34.5 9.37547 33.75V33.375C9.56297 33.1875 9.65672 33 9.75047 32.8125C9.84422 32.625 9.93797 32.4375 10.1255 32.25C10.2308 32.0394 10.3361 31.7697 10.4579 31.4575C10.7702 30.6577 11.1913 29.5788 12.0005 28.5L12.7505 27.75L4.87547 19.875C4.12547 19.5 4.12547 18.375 4.50047 17.625C5.25047 16.125 6.37547 14.625 7.87547 13.125C14.2505 6.75 23.6255 5.25 31.8755 8.25C38.6255 3.75 47.2505 0.375 58.1255 0C58.5005 0 59.2505 0 59.6255 0.375ZM52.5005 18.75C54.3755 14.25 55.8755 9.375 56.2505 3.75C50.6255 4.5 45.3755 5.625 41.2505 7.5L52.5005 18.75ZM9.38948 17.3843C9.14759 17.7416 8.91434 18.0861 8.62547 18.375L14.6255 24.375C14.9796 23.9324 15.3546 23.448 15.7505 22.9365C17.0316 21.2815 18.5316 19.3438 20.2505 17.625C22.5005 15.375 24.7505 13.125 28.1255 10.875C22.1255 9.375 15.3755 11.25 10.8755 15.75C10.1838 16.2111 9.77561 16.814 9.38948 17.3843ZM44.2504 49.5001C48.7504 44.6251 50.6255 38.25 49.1255 32.625C46.8755 35.625 44.6255 37.875 42.3755 40.125C40.1255 42.375 37.8755 44.25 35.6255 45.75L41.6255 51.75C42.7504 51 43.5004 50.25 44.2504 49.5001ZM31.5005 43.5C34.1255 42 36.7505 39.75 39.7505 37.125C43.8755 33.375 47.6255 28.5 50.6255 22.5L37.5005 9.375C31.5005 12.375 26.6255 16.5 22.8755 20.25C19.1255 24 16.5005 27.75 15.0005 30.75C14.6255 31.3125 14.3442 31.875 14.063 32.4375C13.7817 33 13.5005 33.5625 13.1255 34.125L25.8755 46.875C26.1861 46.7197 26.5611 46.5 27.0005 46.2426C27.6218 45.8787 28.3718 45.4393 29.2505 45C29.6255 44.8125 30.0005 44.5313 30.3755 44.25C30.7505 43.9688 31.1255 43.6875 31.5005 43.5Z" fill="url(#paint1_linear_1977_37011)"/>
+<path d="M4.125 45.375C1.125 48.375 0 60 0 60C0 60 11.625 58.875 14.625 55.875C17.625 52.875 17.625 48.375 14.625 45.375C11.625 42.375 7.125 42.375 4.125 45.375Z" fill="url(#paint2_linear_1977_37011)"/>
+<defs>
+<linearGradient id="paint0_linear_1977_37011" x1="2.21403e-07" y1="53.8124" x2="64.1537" y2="47.9307" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1977_37011" x1="2.21403e-07" y1="53.8124" x2="64.1537" y2="47.9307" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1977_37011" x1="2.21403e-07" y1="53.8124" x2="64.1537" y2="47.9307" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+</defs>
+</svg>
+</vwc-empty-state>
+<vwc-empty-state headline="Build accessible designs by default">
+<svg slot="graphic" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30C0 13.4315 13.4315 0 30 0ZM36.647 10.9888C38.5058 15.3262 39.7595 21.2857 39.9689 28H20.0311C20.2405 21.2857 21.4942 15.3262 23.353 10.9888C24.3753 8.60356 25.5412 6.80103 26.7339 5.62387C27.9181 4.4552 29.0195 4 30 4C30.9805 4 32.0819 4.4552 33.2661 5.62387C34.4588 6.80103 35.6247 8.60356 36.647 10.9888ZM38.1279 5.29569C38.9441 6.516 39.6767 7.9038 40.3236 9.41317C42.4305 14.3292 43.7607 20.8452 43.9707 28H55.9242C55.1148 17.3594 47.9005 8.50905 38.1279 5.29569ZM21.8721 5.2957C21.0559 6.51601 20.3233 7.90381 19.6764 9.41317C17.5695 14.3292 16.2393 20.8452 16.0293 28H4.07578C4.88523 17.3594 12.0995 8.50906 21.8721 5.2957ZM4.07578 32H16.0293C16.2393 39.1548 17.5695 45.6708 19.6764 50.5868C20.3233 52.0962 21.0559 53.484 21.8721 54.7043C12.0995 51.4909 4.88523 42.6406 4.07578 32ZM30 56C29.0195 56 27.9181 55.5448 26.7339 54.3761C25.5412 53.199 24.3753 51.3964 23.353 49.0112C21.4942 44.6738 20.2405 38.7143 20.0311 32H39.9689C39.7595 38.7143 38.5058 44.6738 36.647 49.0112C35.6247 51.3964 34.4588 53.199 33.2661 54.3761C32.0819 55.5448 30.9805 56 30 56ZM38.1279 54.7043C38.9441 53.484 39.6767 52.0962 40.3236 50.5868C42.4305 45.6708 43.7607 39.1548 43.9707 32H55.9242C55.1148 42.6406 47.9005 51.4909 38.1279 54.7043Z" fill="url(#paint0_linear_1977_37015)"/>
+<defs>
+<linearGradient id="paint0_linear_1977_37015" x1="60" y1="53.8124" x2="-4.15318" y2="47.9308" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60DEFE"/>
+<stop offset="0.366691" stop-color="#A663FF"/>
+<stop offset="0.631086" stop-color="#FD3FE4"/>
+<stop offset="1" stop-color="#FF9C9D"/>
+</linearGradient>
+</defs>
+</svg>
+</vwc-empty-state>
+</vwc-layout>
+### Popular
-- See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
 ---
-## Contributing
-Please read [CONTRIBUTING.md](https://github.com/Vonage/vivid-3/blob/main/.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
----
-## Versioning
-We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [npm page](https://www.npmjs.com/package/@vonage/vivid).
----
-## Authors
-See also the list of [contributors](https://github.com/Vonage/vivid-3/graphs/contributors) who participated in this project.
----
-## License
-This project is licensed under the Apache 2.0 License - see the [LICENSE.md](https://github.com/Vonage/vivid-3/blob/main/LICENSE.md) file for details
-<!-- ## Acknowledgments
-- Hat tip to anyone whose code was used
-- Inspiration
-- etc -->
----
-## Built With ♡ And
-- [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
-- [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
-- [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency
-- [Floating UI](https://floating-ui.com) - for positioning floating elements
-- [Dropzone](https://dropzone.dev) - for handling dropped files
----
-## Have questions?
-Still looking for answers, ask us in [#ask-vivid](https://vonage.slack.com/archives/C013F0YKH99) slack channel.
+<vwc-layout column-basis="small" gutters="large">
+ <vwc-card headline="Design guidelines" subtitle="Vivid Design foundations, principles, styles and best practices.">
+<svg class="welcome-media" slot="media" viewBox="0 0 940 788" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="940" height="788" fill="white"/>
+<path d="M541.08 553.046H377.751C359.846 553.046 339.941 538.517 333.301 520.6L265.167 338.445C258.528 320.529 267.655 306 285.566 306H448.885C466.789 306 486.694 320.529 493.334 338.445L561.468 520.6C568.115 538.517 558.987 553.046 541.076 553.046H541.08Z" fill="url(#paint0_linear_72_228)"/>
+<path d="M617.465 354.204H449.899C433.166 354.204 414.562 367.779 408.354 384.523L357.121 522.721C350.913 539.465 359.444 553.04 376.184 553.04H543.749C560.482 553.04 579.086 539.465 585.294 522.721L636.527 384.523C642.735 367.779 634.198 354.204 617.465 354.204Z" fill="url(#paint1_linear_72_228)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M376.73 553.035H541.328C542.332 553.014 543.307 552.947 544.252 552.836C544.31 552.841 544.369 552.844 544.431 552.844C554.023 552.844 564.117 547.702 568.755 543.931C575.502 538.446 579.503 534.529 583.83 526.446C576.076 540.014 568.048 539.328 562.246 523.361C561.993 522.664 561.712 522.083 561.41 521.611C561.295 521.274 561.174 520.936 561.049 520.596L500.715 357.848C500.258 356.615 499.739 355.399 499.16 354.201H449.9C433.167 354.201 414.564 367.777 408.355 384.521L357.122 522.718C356.876 523.38 356.655 524.036 356.455 524.688C350.603 539.226 343.606 539.402 335.909 526.073C340.376 534.331 344.507 538.332 351.472 543.937C356.26 547.789 366.681 553.043 376.585 553.043C376.634 553.043 376.684 553.041 376.731 553.038L376.73 553.035Z" fill="url(#paint2_linear_72_228)"/>
+<g style="mix-blend-mode:hard-light" opacity="0.4">
+<path style="mix-blend-mode:hard-light" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M377.765 553.046H541.095C542.056 553.046 542.992 553.004 543.902 552.922C544.023 552.952 544.155 552.967 544.294 552.967C553.887 552.967 563.981 547.825 568.62 544.053C575.366 538.567 579.366 534.651 583.694 526.569C576.326 539.461 568.71 539.484 562.991 525.751C562.637 524.074 562.137 522.353 561.487 520.6L493.353 338.445C486.713 320.529 466.807 306 448.904 306H285.585C267.674 306 258.546 320.529 265.186 338.445L333.32 520.6C339.959 538.517 359.865 553.046 377.77 553.046H377.765Z" fill="url(#paint3_linear_72_228)"/>
+</g>
+<g style="mix-blend-mode:hard-light" opacity="0.15">
+<path style="mix-blend-mode:hard-light" opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M450.105 354.409H617.67C634.403 354.409 642.941 367.985 636.733 384.729L585.5 522.926C579.291 539.67 560.688 553.246 543.955 553.246H376.927C376.88 553.25 376.83 553.252 376.781 553.252C376.585 553.252 376.389 553.25 376.193 553.246C373.956 553.232 371.868 552.975 369.944 552.5C362.384 550.91 355.356 547.113 351.668 544.144C344.703 538.541 340.572 534.539 336.105 526.281C343.802 539.61 350.799 539.434 356.65 524.896C356.85 524.245 357.073 523.588 357.318 522.926L408.551 384.729C414.76 367.985 433.363 354.409 450.096 354.409H450.105Z" fill="url(#paint4_linear_72_228)"/>
+</g>
+<path d="M617.843 354.409H450.277C433.544 354.409 414.941 367.985 408.733 384.729L357.499 522.926C351.291 539.67 359.822 553.246 376.562 553.246H544.127C560.86 553.246 579.464 539.67 585.671 522.926L636.905 384.729C643.113 367.985 634.575 354.409 617.843 354.409Z" fill="url(#paint5_linear_72_228)" fill-opacity="0.2"/>
+<path d="M773.868 410.845C773.336 407.974 768.444 382.451 778.441 368.838L787.055 375.113C780.993 383.514 783.014 402.231 784.396 408.825L773.868 410.845Z" fill="#D6219C"/>
+<path d="M50.8522 422.28C50.4268 419.408 47.0237 393.672 57.6584 380.485L65.9535 387.185C59.36 395.268 60.4234 414.091 61.4869 420.685L50.8522 422.28Z" fill="#D6219C"/>
+<path d="M394.912 270.969C379.59 263.02 375.752 246.089 375.584 245.396L385.962 243.186L380.807 244.332L385.962 243.186C385.949 243.336 388.947 255.969 399.789 261.574L394.912 270.969Z" fill="#6405D1"/>
+<path d="M659.146 563.867C662.734 546.983 678.035 538.781 678.659 538.435L683.548 547.851L681.074 543.187L683.548 547.851C683.4 547.879 672.019 554.128 669.5 566.07L659.146 563.867Z" fill="#6405D1"/>
+<path d="M134.761 366.056L124.552 363.185L129.656 364.674L124.552 363.291C124.552 363.185 127.849 350.636 120.83 340.639L129.55 334.577C139.44 348.615 134.974 365.312 134.761 366.056Z" fill="#65BAFF"/>
+<path d="M694.001 364.584L686.344 357.246L690.173 360.969L686.344 357.246C686.451 357.14 695.277 347.675 693.895 335.445L704.423 334.275C706.338 351.504 694.533 364.053 694.001 364.584Z" fill="#65BAFF"/>
+<path d="M246.071 516.927L241.815 507.213L243.923 512.119L241.815 507.213C241.954 507.156 253.737 501.802 257.152 489.977L267.324 492.936C262.482 509.581 246.766 516.64 246.071 516.927Z" fill="#65BAFF"/>
+<path d="M822.575 266L814.918 258.662L818.747 262.385L814.918 258.662C815.025 258.556 823.851 249.091 822.469 236.861L832.997 235.691C834.911 252.92 823.107 265.469 822.575 266Z" fill="#D34204"/>
+<path d="M643.72 201.213L633.617 197.809L638.615 199.511L633.617 197.809C633.617 197.703 637.552 185.367 631.064 174.945L640.104 169.308C649.356 184.091 644.039 200.468 643.72 201.213Z" fill="#D6219C"/>
+<path d="M509.655 704.904L499.552 701.501L504.551 703.203L499.552 701.501C499.552 701.395 503.487 689.058 497 678.636L506.04 673C515.292 687.782 509.974 704.16 509.655 704.904Z" fill="#C492D6"/>
+<path d="M713.038 234.415L713.463 235.479C715.059 239.626 718.462 243.029 722.609 244.624L723.673 245.05C724.842 245.475 724.842 247.177 723.673 247.602L722.609 248.028C718.462 249.623 715.059 253.026 713.463 257.173L713.038 258.237C712.613 259.407 710.911 259.407 710.486 258.237L710.06 257.173C708.465 253.026 705.062 249.623 700.914 248.028L699.851 247.602C698.681 247.177 698.681 245.475 699.851 245.05L700.914 244.624C705.062 243.029 708.465 239.626 710.06 235.479L710.486 234.415C710.911 233.352 712.506 233.352 713.038 234.415Z" fill="#FB8FD8"/>
+<path d="M566.064 629.798L566.49 630.861C568.085 635.009 571.488 638.412 575.636 640.007L576.699 640.432C577.869 640.858 577.869 642.559 576.699 642.985L575.636 643.41C571.488 645.005 568.085 648.408 566.49 652.556L566.064 653.619C565.639 654.789 563.937 654.789 563.512 653.619L563.087 652.556C561.491 648.408 558.088 645.005 553.941 643.41L552.877 642.985C551.708 642.559 551.708 640.858 552.877 640.432L553.941 640.007C558.088 638.412 561.491 635.009 563.087 630.861L563.512 629.798C563.937 628.734 565.533 628.734 566.064 629.798Z" fill="#FB8FD8"/>
+<path d="M369.064 137.877L369.49 138.941C371.085 143.088 374.488 146.492 378.636 148.087L379.699 148.512C380.869 148.937 380.869 150.639 379.699 151.064L378.636 151.49C374.488 153.085 371.085 156.488 369.49 160.636L369.064 161.699C368.639 162.869 366.937 162.869 366.512 161.699L366.087 160.636C364.491 156.488 361.088 153.085 356.941 151.49L355.877 151.064C354.708 150.639 354.708 148.937 355.877 148.512L356.941 148.087C361.088 146.492 364.491 143.088 366.087 138.941L366.512 137.877C367.044 136.708 368.639 136.708 369.064 137.877Z" fill="#F89B85"/>
+<path d="M533.064 293.877L533.49 294.941C535.085 299.088 538.488 302.492 542.636 304.087L543.699 304.512C544.869 304.937 544.869 306.639 543.699 307.064L542.636 307.49C538.488 309.085 535.085 312.488 533.49 316.636L533.064 317.699C532.639 318.869 530.937 318.869 530.512 317.699L530.087 316.636C528.491 312.488 525.088 309.085 520.941 307.49L519.877 307.064C518.708 306.639 518.708 304.937 519.877 304.512L520.941 304.087C525.088 302.492 528.491 299.088 530.087 294.941L530.512 293.877C531.044 292.708 532.639 292.708 533.064 293.877Z" fill="#F89B85"/>
+<path d="M147.608 425.119L148.034 426.183C149.629 430.33 153.032 433.733 157.18 435.328L158.243 435.754C159.413 436.179 159.413 437.881 158.243 438.306L157.18 438.732C153.032 440.327 149.629 443.73 148.034 447.877L147.608 448.941C147.183 450.111 145.481 450.111 145.056 448.941L144.631 447.877C143.035 443.73 139.632 440.327 135.485 438.732L134.421 438.306C133.251 437.881 133.251 436.179 134.421 435.754L135.485 435.328C139.632 433.733 143.035 430.33 144.631 426.183L145.056 425.119C145.481 423.949 147.183 423.949 147.608 425.119Z" fill="#F89B85"/>
+<path d="M417.064 586.877L417.49 587.941C419.085 592.088 422.488 595.491 426.636 597.087L427.699 597.512C428.869 597.937 428.869 599.639 427.699 600.064L426.636 600.49C422.488 602.085 419.085 605.488 417.49 609.636L417.064 610.699C416.639 611.869 414.937 611.869 414.512 610.699L414.087 609.636C412.491 605.488 409.088 602.085 404.941 600.49L403.877 600.064C402.708 599.639 402.708 597.937 403.877 597.512L404.941 597.087C409.088 595.491 412.491 592.088 414.087 587.941L414.512 586.877C414.937 585.708 416.639 585.708 417.064 586.877Z" fill="#6405D1"/>
+<path d="M223.064 236.877L223.49 237.941C225.085 242.088 228.488 245.491 232.636 247.087L233.699 247.512C234.869 247.937 234.869 249.639 233.699 250.064L232.636 250.49C228.488 252.085 225.085 255.488 223.49 259.636L223.064 260.699C222.639 261.869 220.937 261.869 220.512 260.699L220.087 259.636C218.491 255.488 215.088 252.085 210.941 250.49L209.877 250.064C208.708 249.639 208.708 247.937 209.877 247.512L210.941 247.087C215.088 245.491 218.491 242.088 220.087 237.941L220.512 236.877C220.937 235.708 222.639 235.708 223.064 236.877Z" fill="#6405D1"/>
+<path d="M188.223 306.911C183.748 289.419 163.639 263.616 142.341 236.233C118.557 205.797 91.744 171.251 81.043 140.863L91.1022 137.332C101.144 166.027 127.522 199.834 150.661 229.746C173.581 259.236 193.365 284.617 198.506 304.228L188.223 306.911Z" fill="#FDE0D8"/>
+<path d="M770.678 540.483L760.787 536.654C769.827 512.833 788.757 498.263 808.75 482.843C828.318 467.741 848.524 452.108 859.265 426.798L869.049 430.945C857.244 458.808 835.869 475.292 815.237 491.244C796.414 505.814 778.654 519.426 770.678 540.483Z" fill="#FDE0D8"/>
+<path d="M755.512 151.021L751.347 157.255C737.161 147.233 730.712 131.837 723.88 115.57C717.187 99.6476 710.25 83.1999 695.366 71.7661L699.724 65.6565C716.111 78.2296 723.414 95.6209 730.491 112.413C736.958 127.736 742.971 142.173 755.512 151.021Z" fill="#FDE0D8"/>
+<path d="M189.549 471.516C191.697 469.538 210.928 452.057 211.1 435.17L200.444 435.019C200.251 445.377 187.402 459.136 182.34 463.581L189.549 471.516Z" fill="#D6219C"/>
+<path d="M848.171 591.796C848.592 588.924 851.952 563.182 841.295 550.013L833.011 556.727C839.618 564.798 838.586 583.623 837.534 590.219L848.171 591.796Z" fill="#D6219C"/>
+<path d="M537.902 171.039C553.157 162.963 556.855 146 557.016 145.305L546.621 143.183L551.785 144.285L546.621 143.183C546.635 143.332 543.743 155.99 532.947 161.685L537.902 171.039Z" fill="#6405D1"/>
+<path d="M268.616 592.892C264.999 576.014 249.685 567.838 249.06 567.493L244.187 576.917L246.654 572.249L244.187 576.917C244.335 576.945 255.727 583.175 258.266 595.113L268.616 592.892Z" fill="#6405D1"/>
+<path d="M825.242 378.502L835.446 375.614L830.344 377.111L835.446 375.72C835.446 375.614 832.128 363.07 839.13 353.062L830.4 347.015C820.533 361.069 825.028 377.758 825.242 378.502Z" fill="#65BAFF"/>
+<path d="M233.425 393.668L241.07 386.318L237.248 390.046L241.07 386.318C240.963 386.211 232.121 376.761 233.483 364.529L222.952 363.377C221.067 380.608 232.893 393.138 233.425 393.668Z" fill="#65BAFF"/>
+<path d="M298.48 226.748L306.813 233.309L302.594 230.036L306.813 233.309C306.903 233.189 315.047 223.13 327.35 222.796L327.043 212.208C309.716 212.711 298.933 226.147 298.48 226.748Z" fill="#65BAFF"/>
+<path d="M753.487 629.92L757.727 620.198L755.627 625.108L757.727 620.198C757.587 620.141 745.796 614.807 742.36 602.988L732.194 605.964C737.064 622.601 752.792 629.634 753.487 629.92Z" fill="#65BAFF"/>
+<path d="M80.3442 273.624L90.9393 274.092L85.6033 273.895L90.9393 274.092C90.9427 273.941 91.6893 261.021 101.487 253.573L95.0606 245.152C81.281 255.668 80.3614 272.872 80.3442 273.624Z" fill="#D34204"/>
+<path d="M243.747 173.288L254.386 172.611L249.118 172.963L254.386 172.611C254.413 172.508 253.801 159.574 262.761 151.183L255.485 143.402C242.727 155.291 243.631 172.486 243.747 173.288Z" fill="#D6219C"/>
+<path d="M397.6 658.275L400.944 648.153L399.304 653.171L400.944 648.153C400.859 648.089 388.631 643.829 384.191 632.384L374.257 636.229C380.523 652.503 396.813 658.083 397.6 658.275Z" fill="#C492D6"/>
+<path d="M458.513 209.821L458.09 210.885C456.502 215.036 453.104 218.445 448.959 220.047L447.897 220.474C446.728 220.901 446.73 222.603 447.901 223.026L448.965 223.45C453.115 225.038 456.524 228.435 458.126 232.58L458.554 233.643C458.981 234.812 460.682 234.809 461.106 233.639L461.529 232.575C463.118 228.424 466.515 225.015 470.66 223.413L471.723 222.986C472.892 222.559 472.889 220.857 471.718 220.434L470.654 220.01C466.504 218.422 463.095 215.025 461.493 210.88L461.066 209.817C460.639 208.754 459.043 208.757 458.513 209.821Z" fill="#FB8FD8"/>
+<path d="M311.513 663.821L311.09 664.886C309.502 669.036 306.104 672.445 301.959 674.047L300.897 674.474C299.728 674.901 299.73 676.603 300.901 677.026L301.965 677.45C306.115 679.038 309.524 682.436 311.126 686.58L311.554 687.643C311.981 688.812 313.682 688.809 314.106 687.639L314.529 686.575C316.118 682.424 319.515 679.016 323.66 677.413L324.723 676.986C325.892 676.559 325.889 674.857 324.718 674.434L323.654 674.01C319.504 672.422 316.095 669.025 314.493 664.88L314.066 663.817C313.639 662.754 312.043 662.757 311.513 663.821Z" fill="#FB8FD8"/>
+<path d="M125.514 637.901L125.09 638.965C123.502 643.115 120.104 646.524 115.959 648.126L114.897 648.554C113.728 648.981 113.731 650.683 114.901 651.106L115.965 651.53C120.115 653.118 123.524 656.515 125.126 660.66L125.554 661.723C125.981 662.892 127.683 662.889 128.106 661.719L128.53 660.654C130.118 656.504 133.515 653.095 137.66 651.493L138.723 651.066C139.892 650.639 139.889 648.937 138.718 648.514L137.654 648.09C133.504 646.502 130.095 643.104 128.493 638.96L128.066 637.897C127.532 636.728 125.937 636.731 125.514 637.901Z" fill="#F89B85"/>
+<path d="M197.514 105.901L197.09 106.965C195.502 111.115 192.104 114.524 187.959 116.126L186.897 116.554C185.728 116.981 185.731 118.683 186.901 119.106L187.965 119.53C192.115 121.118 195.524 124.515 197.126 128.66L197.554 129.723C197.981 130.892 199.683 130.889 200.106 129.719L200.53 128.654C202.118 124.504 205.515 121.095 209.66 119.493L210.723 119.066C211.892 118.639 211.889 116.937 210.718 116.514L209.654 116.09C205.504 114.502 202.095 111.104 200.493 106.96L200.066 105.897C199.532 104.728 197.937 104.731 197.514 105.901Z" fill="#F89B85"/>
+<path d="M690.514 460.901L690.09 461.965C688.502 466.115 685.105 469.524 680.96 471.126L679.897 471.554C678.728 471.981 678.731 473.683 679.901 474.106L680.965 474.53C685.116 476.118 688.524 479.515 690.127 483.66L690.554 484.723C690.981 485.892 692.683 485.889 693.106 484.718L693.53 483.654C695.118 479.504 698.515 476.095 702.66 474.493L703.723 474.066C704.892 473.639 704.889 471.937 703.719 471.514L702.654 471.09C698.504 469.502 695.095 466.104 693.493 461.96L693.066 460.897C692.639 459.728 690.937 459.731 690.514 460.901Z" fill="#F89B85"/>
+<path d="M674.514 644.901L674.09 645.965C672.502 650.115 669.105 653.524 664.96 655.126L663.897 655.554C662.728 655.981 662.731 657.683 663.901 658.106L664.965 658.53C669.116 660.118 672.524 663.515 674.127 667.66L674.554 668.723C674.981 669.892 676.683 669.889 677.106 668.718L677.53 667.654C679.118 663.504 682.515 660.095 686.66 658.493L687.723 658.066C688.892 657.638 688.889 655.937 687.719 655.514L686.654 655.09C682.504 653.502 679.095 650.104 677.493 645.959L677.066 644.897C676.639 643.728 674.937 643.731 674.514 644.901Z" fill="#6405D1"/>
+<path d="M631.514 272.901L631.09 273.965C629.502 278.115 626.105 281.524 621.96 283.126L620.897 283.554C619.728 283.981 619.731 285.683 620.901 286.106L621.965 286.53C626.116 288.118 629.524 291.515 631.127 295.66L631.554 296.723C631.981 297.892 633.683 297.889 634.106 296.718L634.53 295.654C636.118 291.504 639.515 288.095 643.66 286.493L644.723 286.066C645.892 285.638 645.889 283.937 644.719 283.514L643.654 283.09C639.504 281.502 636.095 278.104 634.493 273.959L634.066 272.897C633.639 271.728 631.937 271.731 631.514 272.901Z" fill="#6405D1"/>
+<path d="M213.562 649.702L223.446 645.857C214.367 622.05 195.412 607.512 175.393 592.126C155.8 577.057 135.567 561.458 124.784 536.166L115.007 540.33C126.858 568.173 148.262 584.621 168.92 600.538C187.768 615.076 205.551 628.659 213.562 649.702Z" fill="#FDE0D8"/>
+<defs>
+<linearGradient id="paint0_linear_72_228" x1="457.599" y1="305.998" x2="262.993" y2="262.482" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A662FF"/>
+<stop offset="1" stop-color="#57EDFD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_72_228" x1="514.04" y1="519.007" x2="649.068" y2="359.337" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FC27F6"/>
+<stop offset="1" stop-color="#FFA694"/>
+</linearGradient>
+<linearGradient id="paint2_linear_72_228" x1="415.133" y1="354.409" x2="583.386" y2="354.409" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7600FF"/>
+<stop offset="1" stop-color="#FB2FFB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_72_228" x1="486.093" y1="310.839" x2="446.844" y2="326.958" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_72_228" x1="418.895" y1="367.319" x2="441.325" y2="375.55" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_72_228" x1="615.101" y1="457.686" x2="587.144" y2="448.015" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
+<vwc-button id="design" slot="footer" icon="arrow-bold-right-line" shape="pill" label="Continue" appearance="outlined"></vwc-button>
+</vwc-card>
+<vwc-card headline="Vivid 2 migration" subtitle="Migration guidlines for a smoth and easy adoption.">
+<svg class="welcome-media" slot="media" viewBox="0 0 940 788" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="940" height="788" fill="white"/>
+<path d="M352.312 488.213C351.178 433.263 336.183 376.874 310.09 329.435C283.626 281.322 246.92 244.78 206.731 226.538C197.392 222.298 187.886 219.042 178.478 216.861L178.562 215.614C187.995 217.8 197.526 221.065 206.891 225.316C247.196 243.612 284.013 280.269 310.562 328.537C336.78 376.204 351.847 432.894 352.988 488.167L352.312 488.213Z" fill="url(#paint0_linear_1_3)"/>
+<path d="M111 140.41L111.203 223.603L144.502 242.829L155.904 249.26L168.382 256.615L207.152 279L206.93 195.795L111 140.41Z" fill="#D3E9FC"/>
+<path d="M191.369 213.813L119.422 172.274L119.409 167.923L191.356 209.462L191.369 213.813Z" fill="#80C7F5"/>
+<path d="M191.369 227.739L119.422 186.202L119.409 181.849L191.356 223.389L191.369 227.739Z" fill="#80C7F5"/>
+<path d="M191.369 241.516L119.422 199.978L119.409 195.628L191.356 237.165L191.369 241.516Z" fill="#80C7F5"/>
+<path d="M155.389 234.587L119.422 213.839L119.409 209.489L155.374 230.236L155.389 234.587Z" fill="#80C7F5"/>
+<path d="M111 140.409L127.114 131.147C132.113 128.275 138.263 128.285 143.251 131.174L218.869 174.974C226.326 179.292 230.925 187.248 230.948 195.863L231.112 255.804C231.128 261.589 228.049 266.94 223.038 269.831L207.152 278.999L206.93 195.792L111 140.409ZM175.611 260.879L168.382 256.615L170.788 258.034L175.611 260.879Z" fill="url(#paint1_linear_1_3)"/>
+<path d="M70 417.889L70.1757 489.99L99.0356 506.653L109 512.591L119.729 518.6L153.331 538L153.138 465.889L70 417.889Z" fill="#80C7F5"/>
+<path d="M153.138 465.889L153.331 538L167.101 530.054C171.443 527.548 174.113 522.911 174.099 517.897L173.958 465.949C173.937 458.482 169.951 451.587 163.489 447.844L97.9522 409.884C93.6288 407.38 88.2978 407.371 83.9657 409.862L70 417.889L153.138 465.889ZM122.337 520.114L119.729 518.6L125.42 521.905L122.337 520.114Z" fill="url(#paint2_linear_1_3)"/>
+<path d="M121.729 473.067C125.834 469.367 125.583 462.4 121.171 457.505C116.758 452.61 109.853 451.641 105.749 455.341C101.645 459.042 101.895 466.009 106.308 470.904C110.721 475.799 117.625 476.767 121.729 473.067Z" fill="white"/>
+<path d="M93.2285 492.204L118.098 505.648C121.485 507.479 125.245 506.326 126.452 503.085L126.557 502.802C128.702 497.047 125.039 486.072 113.342 478.855L112.334 478.31C103.46 473.67 92.2324 475.026 89.2672 482.983C88.0579 486.224 89.8414 490.374 93.2285 492.204Z" fill="white"/>
+<path d="M632.943 599.205L632.297 598.903C655.781 481.298 716.687 383.677 803.793 324.024L804.121 324.862C717.173 384.407 656.381 481.837 632.943 599.205Z" fill="url(#paint3_linear_1_3)"/>
+<path d="M758 282.651L758.19 360.298L789.269 378.242L800.576 384.826L811.555 391.107L847.741 412L847.533 334.342L758 282.651Z" fill="#80C7F5"/>
+<path d="M821.489 350.92C821.489 343.991 817.276 335.939 812.079 332.937C808.182 330.688 804.84 331.914 803.408 335.588C801.979 330.262 798.635 325.174 794.74 322.926C789.542 319.924 785.328 323.109 785.328 330.041C785.328 333.544 786.41 337.328 788.144 340.607L803.408 371.502L819.035 357.952L819.026 357.941C820.55 356.593 821.489 354.179 821.489 350.92Z" fill="white"/>
+<path d="M847.532 334.342L847.739 411.997L862.566 403.44C867.243 400.74 870.117 395.746 870.103 390.347L869.951 334.404C869.929 326.363 865.637 318.938 858.678 314.907L788.103 274.029C783.446 271.332 777.707 271.323 773.042 274.005L758.003 282.649L847.532 334.342ZM814.618 392.886L811.554 391.107L817.681 394.665L814.618 392.886Z" fill="url(#paint4_linear_1_3)"/>
+<path d="M441.322 48.4123L441.118 131.605L407.82 150.831L395.705 157.885L383.941 164.615L345.17 187L345.393 103.795L441.322 48.4123Z" fill="#80C7F5"/>
+<path d="M373.298 121.558C373.298 114.133 377.811 105.506 383.38 102.29C387.555 99.8801 391.136 101.194 392.67 105.13C394.201 99.4233 397.785 93.9726 401.957 91.5632C407.526 88.3467 412.042 91.7597 412.042 99.1867C412.042 102.94 410.882 106.995 409.024 110.507L392.67 143.609L375.927 129.091L375.937 129.079C374.304 127.636 373.298 125.049 373.298 121.558Z" fill="white"/>
+<path d="M345.395 103.795L345.172 186.997L329.286 177.828C324.276 174.936 321.197 169.585 321.211 163.8L321.374 103.861C321.398 95.246 325.997 87.2912 333.452 82.9718L409.069 39.1742C414.058 36.2844 420.207 36.2749 425.206 39.1482L441.319 48.4094L345.395 103.795ZM380.66 166.521L383.943 164.614L377.377 168.427L380.66 166.521Z" fill="url(#paint5_linear_1_3)"/>
+<path d="M452.614 396L452 395.636C486.962 280.919 557.194 189.777 649.756 139L650 139.866C557.606 190.55 487.507 281.514 452.614 396Z" fill="url(#paint6_linear_1_3)"/>
+<path d="M614.312 76.4106L614.515 159.604L647.814 178.829L661.357 186.781L671.692 192.616L710.462 215L710.239 131.796L614.312 76.4106Z" fill="#E6E6E6"/>
+<path d="M675.544 159.782C673.592 155.194 674.113 150.578 676.709 149.473C679.305 148.369 682.993 151.193 684.946 155.781C686.898 160.37 686.377 164.985 683.781 166.09C681.184 167.195 677.497 164.371 675.544 159.782Z" fill="#80C7F5"/>
+<path d="M654.046 147.286C652.094 142.698 652.615 138.083 655.211 136.978C657.808 135.873 661.495 138.697 663.448 143.286C665.4 147.874 664.879 152.489 662.283 153.594C659.687 154.699 655.999 151.875 654.046 147.286Z" fill="#80C7F5"/>
+<path d="M632.549 134.876C630.597 130.288 631.118 125.672 633.715 124.567C636.311 123.463 639.998 126.287 641.951 130.875C643.904 135.464 643.382 140.079 640.786 141.184C638.19 142.289 634.502 139.465 632.549 134.876Z" fill="#80C7F5"/>
+<path d="M614.312 76.4102L630.425 67.1476C635.424 64.2743 641.575 64.2852 646.564 67.174L722.183 110.973C729.639 115.292 734.238 123.247 734.261 131.862L734.425 191.803C734.441 197.588 731.362 202.938 726.351 205.83L710.463 214.998L710.24 131.794L614.312 76.4102ZM678.227 196.464L671.691 192.616L674.959 194.54L678.227 196.464Z" fill="#80C7F5"/>
+<path d="M587.135 697.74H375.612C352.424 697.74 326.645 678.935 318.046 655.747L229.807 419.992C221.208 396.804 233.028 378 256.225 378H467.739C490.927 378 516.707 396.804 525.306 419.992L613.544 655.747C622.153 678.935 610.332 697.74 587.135 697.74Z" fill="url(#paint7_linear_1_3)"/>
+<path d="M686.052 440.391H469.034C447.364 440.391 423.271 457.962 415.231 479.632L348.879 658.49C340.839 680.16 351.887 697.731 373.567 697.731H590.583C612.253 697.731 636.348 680.16 644.388 658.49L710.737 479.632C718.777 457.962 707.721 440.391 686.052 440.391Z" fill="url(#paint8_linear_1_3)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M374.232 697.734H587.41C588.723 697.707 589.996 697.619 591.23 697.474C591.303 697.483 591.382 697.486 591.46 697.486C603.883 697.486 616.956 690.831 622.964 685.949C631.699 678.85 636.881 673.781 642.486 663.32C632.443 680.88 622.047 679.994 614.53 659.327C614.204 658.424 613.841 657.673 613.448 657.063C613.299 656.626 613.145 656.188 612.982 655.748L534.845 445.113C534.252 443.517 533.581 441.942 532.831 440.392H469.034C447.364 440.392 423.271 457.963 415.23 479.634L348.879 658.491C348.563 659.343 348.276 660.188 348.019 661.026C340.439 679.851 331.377 680.084 321.406 662.83C327.192 673.518 332.541 678.697 341.561 685.949C347.763 690.937 361.258 697.737 374.084 697.737C374.134 697.737 374.184 697.734 374.232 697.734Z" fill="url(#paint9_linear_1_3)"/>
+<g style="mix-blend-mode:hard-light" opacity="0.4">
+<path style="mix-blend-mode:hard-light" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M375.612 697.74H587.135C588.378 697.74 589.591 697.685 590.768 697.58C590.925 697.619 591.097 697.637 591.279 697.637C603.702 697.637 616.775 690.983 622.782 686.101C631.521 679.002 636.699 673.933 642.304 663.473C632.764 680.16 622.9 680.187 615.492 662.415C615.033 660.244 614.388 658.016 613.544 655.747L525.306 419.992C516.707 396.804 490.927 378 467.739 378H256.225C233.028 378 221.208 396.804 229.807 419.992L318.046 655.747C326.645 678.935 352.424 697.74 375.612 697.74Z" fill="url(#paint10_linear_1_3)"/>
+</g>
+<g style="mix-blend-mode:hard-light" opacity="0.15">
+<path style="mix-blend-mode:hard-light" opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M469.308 440.655H686.324C707.996 440.655 719.052 458.226 711.012 479.896L644.66 658.754C636.62 680.426 612.528 697.994 590.858 697.994H374.532C374.475 698 374.417 698 374.358 698C374.13 698 373.903 698 373.675 697.994C370.739 697.982 368 697.646 365.478 697.023C355.697 694.963 346.607 690.051 341.835 686.215C332.814 678.961 327.466 673.782 321.68 663.094C331.65 680.35 340.712 680.117 348.292 661.292C348.55 660.453 348.837 659.606 349.153 658.754L415.504 479.896C423.544 458.226 447.638 440.655 469.308 440.655Z" fill="url(#paint11_linear_1_3)"/>
+</g>
+<path d="M686.539 440.655H469.523C447.852 440.655 423.759 458.226 415.719 479.896L349.367 658.754C341.327 680.426 352.376 697.994 374.055 697.994H591.07C612.743 697.994 636.835 680.426 644.875 658.754L711.227 479.896C719.267 458.226 708.208 440.655 686.539 440.655Z" fill="url(#paint12_linear_1_3)" fill-opacity="0.2"/>
+<defs>
+<linearGradient id="paint0_linear_1_3" x1="166.764" y1="305.547" x2="373.408" y2="332.667" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#643BB6"/>
+<stop offset="1" stop-color="#86BCE8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_3" x1="114.081" y1="149.04" x2="231.453" y2="266.412" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#871FFF"/>
+<stop offset="1" stop-color="#80C7F5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1_3" x1="51.5741" y1="404.272" x2="182.544" y2="535.242" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#871FFF"/>
+<stop offset="1" stop-color="#80C7F5"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1_3" x1="651.877" y1="439.995" x2="787.883" y2="456.744" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#643BB6"/>
+<stop offset="1" stop-color="#86BCE8"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1_3" x1="738.156" y1="267.989" x2="879.197" y2="409.029" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#871FFF"/>
+<stop offset="1" stop-color="#80C7F5"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1_3" x1="462.583" y1="32.702" x2="311.468" y2="183.817" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#871FFF"/>
+<stop offset="1" stop-color="#80C7F5"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1_3" x1="487.149" y1="239.432" x2="620.842" y2="269.505" gradientUnits="userSpaceOnUse">
+<stop offset="0.00080112" stop-color="#643BB6"/>
+<stop offset="1" stop-color="#86BCE8"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1_3" x1="479.015" y1="378" x2="227" y2="321.61" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A662FF"/>
+<stop offset="1" stop-color="#57EDFD"/>
+</linearGradient>
+<linearGradient id="paint8_linear_1_3" x1="552.114" y1="653.685" x2="726.853" y2="446.922" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FC27F6"/>
+<stop offset="1" stop-color="#FFA694"/>
+</linearGradient>
+<linearGradient id="paint9_linear_1_3" x1="424.017" y1="440.657" x2="641.92" y2="440.657" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7600FF"/>
+<stop offset="1" stop-color="#FB2FFB"/>
+</linearGradient>
+<linearGradient id="paint10_linear_1_3" x1="515.913" y1="384.266" x2="465.092" y2="405.151" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_1_3" x1="428.891" y1="457.363" x2="457.936" y2="468.021" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_1_3" x1="682.994" y1="574.32" x2="646.793" y2="561.789" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
+<vwc-button id="migration" slot="footer" icon="arrow-bold-right-line" shape="pill" label="Continue" appearance="outlined"></vwc-button>
+</vwc-card>
+<vwc-card headline="Icons gallery" subtitle="Vivid's Icons Gallery contains a wide range of high-quality icons.">
+<svg class="welcome-media" slot="media" viewBox="0 0 940 788" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_768_335)">
+<rect width="940" height="788" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M563.867 472.812L460.995 468.41L493.634 552.933L538.287 540.387L540.69 700.001L540.69 700.99H593.833C599.431 700.99 603.97 696.492 603.97 690.943C603.97 685.394 599.432 680.896 593.833 680.896H586.841C587.783 665.353 597.458 505.597 597.357 504.282C596.826 486.314 581.835 472.28 563.867 472.812Z" fill="#6405D1"/>
+<path d="M103.237 376.659C103.237 358.904 128.86 356.246 132.581 373.575C137.79 398.241 144.382 426.84 177.234 438.004C214.126 450.549 204.77 497.116 272.707 515.722C340.644 534.327 279.618 682.321 397.204 707.943H103.237V376.659Z" fill="url(#paint0_linear_768_335)"/>
+<path d="M756.237 460.437H178.403V470.856H756.237V460.437Z" fill="#131415"/>
+<path d="M755.918 470.962H740.502V706.561H755.918V470.962Z" fill="#D6219C"/>
+<path d="M674.373 470.962H658.957V706.561H674.373V470.962Z" fill="#D6219C"/>
+<path d="M194.245 470.962H178.829V706.561H194.245V470.962Z" fill="#D6219C"/>
+<path d="M275.79 470.962H260.374V706.561H275.79V470.962Z" fill="#D6219C"/>
+<path d="M642.372 215.695H292.375V425.246H642.372V215.695Z" fill="#2B2B2B"/>
+<path d="M645.455 428.329H289.292V212.611H645.455V428.329ZM295.459 422.163H639.289V218.778H295.459V422.163Z" fill="#2B2B2B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M191.764 170H136.236C121.246 170 109.106 184.568 109 202.402V217.598C109 235.432 121.14 250 136.236 250H191.764C203.201 250 213.041 241.592 217.063 229.63C226.108 237.179 236.33 246.07 244.426 254.075C237.303 258.221 233.901 262.687 232.413 266.089C229.755 271.936 230.712 278.315 235.283 283.738C238.792 287.99 243.47 290.329 248.467 290.329C249.423 290.329 250.38 290.223 251.337 290.01C257.291 288.947 262.075 284.907 264.095 279.272C265.477 275.232 266.54 267.046 257.929 257.158C257.876 257.105 257.796 256.999 257.716 256.892C257.636 256.786 257.557 256.68 257.503 256.627C268.879 252.587 283.976 250.248 302.688 249.503L302.369 241.849C278.342 242.805 262.288 246.208 251.762 250.567C242.198 240.894 229.374 229.864 218.837 221.169C218.945 219.997 219 218.805 219 217.598V202.402C219 184.568 206.86 170 191.764 170ZM239.536 269.172C241.024 265.77 244.639 262.58 250.061 259.816C250.806 260.667 251.55 261.411 252.188 262.049C256.759 267.152 258.354 272.362 256.866 276.508C255.802 279.485 253.251 281.717 250.061 282.249C248.148 282.674 244.533 282.674 241.343 278.741C238.685 275.657 238.047 272.362 239.536 269.172ZM700.536 368.543L636.3 381.307L637.792 388.815L702.027 376.051L700.536 368.543ZM243.834 362L308.936 369.134L308.102 376.743L243 369.609L243.834 362Z" fill="#FDE0D8"/>
+<path d="M476.304 241.848H316.722V249.503H476.304V241.848Z" fill="#5E41F4"/>
+<path d="M618.025 241.848H510.857V249.503H618.025V241.848Z" fill="#FFA300"/>
+<path d="M399.331 263.962H316.722V271.617H399.331V263.962Z" fill="#FF288C"/>
+<path d="M618.025 263.962H433.884V271.617H618.025V263.962Z" fill="#3ACDFF"/>
+<path d="M433.778 286.183H316.722V293.838H433.778V286.183Z" fill="#5E41F4"/>
+<path d="M617.919 286.183H496.398V293.838H617.919V286.183Z" fill="#FF75C2"/>
+<path d="M417.83 308.403H316.722V316.058H417.83V308.403Z" fill="#FFA300"/>
+<path d="M618.025 308.403H510.857V316.058H618.025V308.403Z" fill="#FF288C"/>
+<path d="M427.398 330.517H316.722V338.172H427.398V330.517Z" fill="#FF288C"/>
+<path d="M618.025 330.517H505.541V338.172H618.025V330.517Z" fill="#5E41F4"/>
+<path d="M375.303 352.631H316.722V360.286H375.303V352.631Z" fill="#3ACDFF"/>
+<path d="M617.919 352.631H409.643V360.286H617.919V352.631Z" fill="#5E41F4"/>
+<path d="M438.881 374.851H316.722V382.506H438.881V374.851Z" fill="#5E41F4"/>
+<path d="M617.919 374.851H473.327V382.506H617.919V374.851Z" fill="#FFA300"/>
+<path d="M476.304 397.072H316.722V404.726H476.304V397.072Z" fill="#3ACDFF"/>
+<path d="M618.025 397.072H510.857V404.726H618.025V397.072Z" fill="#FF288C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M365.841 464.902L476.623 468.41L432.927 556.016L399.331 540.387L396.333 672.612V700.99H339.868C333.92 700.99 329.098 696.242 329.098 690.384C329.098 684.528 333.919 679.779 339.868 679.779H350.615C348.463 658.443 332.252 497.662 332.351 496.372C332.883 478.404 347.873 464.37 365.841 464.902Z" fill="#6405D1"/>
+<path d="M337.56 440.343C339.899 455.121 353.614 465.221 368.499 462.988C369.137 462.882 369.668 462.776 370.2 462.669L373.283 461.925C387.742 458.736 396.779 444.489 393.696 430.03C390.932 417.484 379.662 408.66 366.798 408.979L363.608 409.085C348.724 409.511 336.816 421.95 337.241 436.834C337.241 438.11 337.454 439.173 337.56 440.343Z" fill="#F89B85"/>
+<path d="M614.091 431.306C611.752 446.084 598.037 456.184 583.259 453.951C582.621 453.845 582.09 453.739 581.452 453.632L578.369 452.888C564.016 449.592 554.873 435.24 558.168 420.887C561.039 408.554 572.202 399.73 584.854 400.049L588.044 400.155C602.928 400.58 614.835 413.019 614.41 427.904C614.41 429.073 614.198 430.243 614.091 431.306Z" fill="#F89B85"/>
+<path d="M600.589 447.572L597.293 489.674L552.534 486.803L558.275 421.099H576.136C589.745 421.099 600.802 432.05 600.802 445.765C600.589 446.297 600.589 446.934 600.589 447.572Z" fill="white"/>
+<path d="M404.434 488.823C394.015 517.316 407.836 556.76 440.156 555.91C465.035 555.272 466.842 556.229 477.261 556.016C510.538 555.165 532.546 520.825 522.233 489.142L404.434 488.823Z" fill="url(#paint1_linear_768_335)"/>
+<path d="M581.771 456.078L597.187 489.568C603.778 503.92 597.399 520.719 583.153 527.31C582.94 527.417 582.728 527.417 582.515 527.523C570.82 532.52 557.212 529.118 549.238 519.23L505.01 464.37L514.153 375.277L535.098 393.457C554.873 410.787 570.82 432.156 581.771 456.078Z" fill="white"/>
+<path d="M348.086 456.078L332.67 489.568C326.078 503.92 332.457 520.719 346.704 527.31C346.916 527.417 347.129 527.417 347.342 527.523C359.036 532.52 372.645 529.118 380.619 519.23L424.847 464.37L415.703 375.277L394.865 393.563C374.984 410.787 359.036 432.156 348.086 456.078Z" fill="white"/>
+<path d="M481.195 389.948L508.944 372.3C508.944 372.3 497.674 364.964 478.431 365.176L481.195 389.948Z" fill="#2B2B2B"/>
+<path d="M522.34 489.142C520.532 483.72 519.575 478.192 519.575 472.557C519.575 462.988 542.54 448.423 541.902 419.504C541.37 397.284 517.236 364.539 478.537 365.283L447.28 366.771C413.258 367.409 386.466 397.284 385.084 420.887H384.978C384.978 421.631 385.084 422.162 385.084 422.907C385.084 423.119 385.084 423.332 385.084 423.545C387.21 462.882 414.747 460.968 404.54 488.93L522.34 489.142Z" fill="white"/>
+<path d="M521.595 486.272C521.277 486.272 520.851 486.166 520.639 485.847L509.263 471.813C508.837 471.387 508.944 470.537 509.369 470.218C509.794 469.793 510.645 469.899 510.964 470.324L522.34 484.358C522.765 484.783 522.659 485.634 522.233 485.953C522.127 486.166 521.914 486.272 521.595 486.272Z" fill="#2B2B2B"/>
+<path d="M408.541 624.116L400.52 705.375L415.862 706.89L423.883 625.63L408.541 624.116Z" fill="#131415"/>
+<path d="M526.276 624.058L510.934 625.573L518.959 706.832L534.301 705.317L526.276 624.058Z" fill="#131415"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M411.557 628.949H523.19C542.646 628.949 558.806 613.852 560.188 594.503L561.617 573.493C570.69 573.852 578.6 566.951 579.326 557.823L580.07 548.786C580.811 539.465 573.85 531.2 564.546 530.402L566.036 508.492C566.142 507.641 566.142 506.791 566.142 505.94C566.142 485.421 549.45 468.836 529.038 468.836H405.71C404.859 468.836 404.009 468.836 403.158 468.942C382.745 470.324 367.329 487.973 368.711 508.386L370.215 530.502C360.797 530.764 353.509 538.823 353.933 548.148L354.359 557.185C354.571 566.648 362.651 573.983 372.007 573.558H372.113C372.458 573.543 372.799 573.517 373.137 573.483L374.559 594.396C375.941 613.852 392.101 628.949 411.557 628.949Z" fill="url(#paint2_linear_768_335)"/>
+<path d="M710.03 699.757H166.243C164.034 699.757 162.243 701.548 162.243 703.757V704.262C162.243 706.471 164.034 708.262 166.243 708.262H710.03C712.239 708.262 714.03 706.471 714.03 704.262V703.757C714.03 701.548 712.239 699.757 710.03 699.757Z" fill="#B3B3B3"/>
+<path d="M665.655 708.049C711.372 708.049 707.651 648.086 762.51 654.147C781.328 656.273 792.598 632.564 798.552 622.251C808.652 605.241 835.231 612.045 835.231 631.82V707.943H665.655V708.049Z" fill="url(#paint3_linear_768_335)"/>
+<ellipse cx="465.247" cy="314.888" rx="28.7057" ry="28.7056" fill="#FEC73A"/>
+<path d="M354.48 135.496L347.472 138.577L385.045 224.03L392.053 220.949L354.48 135.496Z" fill="#FDE0D8"/>
+<path d="M321.236 86H376.764C391.86 86 404 100.568 404 118.402V133.598C404 151.557 391.754 166 376.764 166H321.236C306.14 166 294 151.432 294 133.598V118.402C294.106 100.568 306.246 86 321.236 86Z" fill="#FDE0D8"/>
+<path d="M177.236 321H232.764C247.86 321 260 335.568 260 353.402V368.598C260 386.557 247.754 401 232.764 401H177.236C162.14 401 150 386.432 150 368.598V353.402C150.106 335.568 162.246 321 177.236 321Z" fill="#FDE0D8"/>
+<path d="M570.61 137.746L539.105 227.079L546.324 229.625L577.829 140.291L570.61 137.746Z" fill="#FDE0D8"/>
+<path d="M560.236 74H615.764C630.86 74 643 88.5683 643 106.402V121.598C643 139.557 630.754 154 615.764 154H560.236C545.14 154 533 139.432 533 121.598V106.402C533.106 88.5683 545.246 74 560.236 74Z" fill="#FDE0D8"/>
+<path d="M690.427 284.329C689.471 284.329 688.514 284.223 687.557 284.117C681.709 283.16 676.819 279.013 674.799 273.379C673.417 269.338 672.247 261.258 680.965 251.265C681.072 251.158 681.284 250.839 681.39 250.733C670.121 246.693 654.811 244.354 636.206 243.61L636.525 235.955C660.552 236.912 676.606 240.314 687.132 244.673C706.056 225.429 737.739 201.083 739.227 199.913L743.905 205.973C743.48 206.292 713.286 229.576 694.467 248.181C701.591 252.328 704.887 256.793 706.481 260.195C709.139 266.149 708.076 272.422 703.611 277.844C700.209 281.99 695.424 284.329 690.427 284.329ZM688.939 253.816C688.195 254.667 687.451 255.411 686.813 256.155C682.347 261.258 680.646 266.468 682.135 270.614C683.198 273.591 685.856 275.717 688.939 276.355C690.853 276.674 694.574 276.674 697.657 272.847C700.315 269.657 700.846 266.468 699.464 263.278C697.976 259.876 694.361 256.687 688.939 253.816Z" fill="#FDE0D8"/>
+<path d="M750.236 140H805.764C820.86 140 833 154.568 833 172.402V187.598C833 205.557 820.754 220 805.764 220H750.236C735.14 220 723 205.432 723 187.598V172.402C723.106 154.568 735.246 140 750.236 140Z" fill="#FDE0D8"/>
+<path d="M720.236 326H775.764C790.86 326 803 340.568 803 358.402V373.598C803 391.557 790.754 406 775.764 406H720.236C705.14 406 693 391.432 693 373.598V358.402C693.106 340.568 705.246 326 720.236 326Z" fill="#FDE0D8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M563 92.542H572.875L582.331 113.342L577.646 124.268C577.542 124.512 577.194 124.514 577.087 124.271L563 92.542ZM585.789 130.074C587.817 126.905 602.951 92.542 602.951 92.542H613C613 92.542 598.122 126.361 596.342 129.617C594.777 132.481 591.952 135.724 588.034 135.724H578.991C578.96 135.724 578.936 135.699 578.936 135.669C578.936 135.642 578.955 135.619 578.982 135.615C581.872 135.164 583.433 133.758 585.789 130.074Z" fill="#6405D1"/>
+<g clip-path="url(#clip1_768_335)">
+<path d="M365.562 117.25L369 110.688L364.625 106.312L358.062 109.75C357.125 109.125 355.875 108.813 354.625 108.5L352.125 101H345.875L343.375 108.188C342.438 108.5 341.188 108.812 340.25 109.438L333.688 106L329 110.688L332.438 117.25C331.812 118.188 331.5 119.438 331.188 120.375L324 122.875V129.125L331.188 131.625C331.5 132.875 332.125 133.812 332.438 135.062L329 141.625L333.375 146L339.938 142.562C340.875 143.188 342.125 143.5 343.375 143.812L345.875 151H352.125L354.625 143.812C355.875 143.5 356.812 142.875 358.062 142.562L364.625 146L369 141.625L365.562 135.062C366.188 134.125 366.5 132.875 366.812 131.625L374 129.125V122.875L366.812 120.375C366.5 119.438 366.188 118.188 365.562 117.25ZM349 135.375C343.688 135.375 339.625 131.312 339.625 126C339.625 120.688 343.688 116.625 349 116.625C354.312 116.625 358.375 120.688 358.375 126C358.375 131.312 354.312 135.375 349 135.375Z" fill="#FFBA41"/>
+</g>
+<g clip-path="url(#clip2_768_335)">
+<path d="M781.125 155C775.5 155 770.188 157.187 766.125 160.938C762.062 165 759.562 170.312 759.25 175.938L753.625 184.375C753.312 185 753 185.312 753 185.625C753 185.938 753 186.562 753 186.875C753 187.188 753.312 187.812 753.625 188.125C753.938 188.438 754.25 188.75 754.562 189.062L759.25 191.25V197.188C759.25 199.375 760.188 201.25 761.438 202.812C763 204.062 764.875 205 767.062 205H774.875C777.375 205 779.875 204.062 781.438 202.188C783.313 200.625 784.25 198.125 784.25 195.625V182.188C783 181.562 782.062 180.312 781.75 179.062C781.125 177.812 781.125 176.562 781.438 175.312C781.75 173.75 782.375 172.812 783.625 171.875C784.562 170.938 786.125 170.625 787.375 170.625C788.625 170.625 790.188 170.938 791.125 171.875C792.062 172.812 793 173.75 793.312 175.312C793.625 176.562 793.625 177.812 793 179.375C792.375 180.625 791.438 181.562 790.5 182.5V195.625C790.5 199.062 789.25 202.188 787.375 205H793.625C794.562 205 795.188 204.688 795.812 204.062C796.438 203.438 796.75 202.812 796.75 201.875V192.188C799.875 189.062 801.75 185.312 802.688 180.938C803.625 176.562 803 172.188 801.438 168.438C799.562 164.375 796.75 160.938 793.312 158.75C789.562 156.25 785.5 155 781.125 155Z" fill="#65BAFF"/>
+</g>
+<g clip-path="url(#clip3_768_335)">
+<path d="M763.5 353.5C759.75 353.5 756.625 355.063 754.438 357.562L747.562 354.125C747.875 353.5 747.875 352.562 747.875 351.938C747.875 346 742.875 341 736.938 341C731 341 726 346 726 351.938C726 356.312 728.5 360.062 732.25 361.625V370.062C728.5 371.938 726 375.688 726 379.75C726 386 731 391 736.938 391C742.875 391 747.875 386 747.875 380.062C747.875 379.438 747.875 378.5 747.562 377.875L754.125 374.438C756.625 376.938 759.75 378.5 763.5 378.5C770.375 378.5 776 372.875 776 366C776 359.125 770.375 353.5 763.5 353.5ZM736.938 347.25C739.438 347.25 741.625 349.438 741.625 351.938C741.625 354.438 739.438 356.625 736.938 356.625C734.438 356.625 732.25 354.438 732.25 351.938C732.25 349.438 734.438 347.25 736.938 347.25ZM736.938 384.75C734.438 384.75 732.25 382.562 732.25 380.062C732.25 377.562 734.438 375.375 736.938 375.375C739.438 375.375 741.625 377.562 741.625 380.062C741.625 382.562 739.438 384.75 736.938 384.75ZM744.75 372.25C743.188 370.688 741 369.438 738.5 369.125V362.562C741 362.25 743.188 361 744.75 359.438L751.313 362.875C751 365.062 751 366.937 751.313 368.812L744.75 372.25ZM763.5 372.25C760.062 372.25 757.25 369.438 757.25 366C757.25 362.562 760.062 359.75 763.5 359.75C766.938 359.75 769.75 362.562 769.75 366C769.75 369.438 766.938 372.25 763.5 372.25Z" fill="#F47251"/>
+</g>
+<g clip-path="url(#clip4_768_335)">
+<path d="M205 336C191.216 336 180 347.216 180 361V376.625C180 381.794 184.206 386 189.375 386H192.5C194.228 386 195.625 384.6 195.625 382.875V367.25C195.625 365.525 194.228 364.125 192.5 364.125H186.25V361C186.25 350.659 194.659 342.25 205 342.25C215.341 342.25 223.75 350.659 223.75 361V364.125H217.5C215.772 364.125 214.375 365.525 214.375 367.25V382.875C214.375 384.6 215.772 386 217.5 386H220.625C225.794 386 230 381.794 230 376.625V361C230 347.216 218.784 336 205 336Z" fill="#6405D1"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M182.249 211.597H188.898C188.898 196.969 176.93 185 162.301 185V191.649C173.272 191.649 182.249 200.626 182.249 211.597ZM168.951 211.597H175.6C175.6 204.283 169.615 198.298 162.301 198.298V204.948C165.958 204.948 168.951 207.94 168.951 211.597ZM177.595 219.907C179.922 221.57 181.585 222.567 182.25 222.899C182.416 223.066 182.582 223.211 182.748 223.357C183.247 223.793 183.746 224.229 184.244 225.227C184.577 225.892 184.909 226.889 184.577 227.554L183.579 229.881C182.915 231.876 181.252 233.206 179.258 234.203C177.263 235.2 174.936 235.2 172.608 234.536C170.281 234.203 167.954 233.206 165.294 231.876C162.635 230.546 160.307 228.884 157.98 227.221L157.98 227.221C155.653 225.559 153.658 223.897 151.996 222.235C150.334 220.572 148.671 218.577 147.009 216.25C145.371 214.339 144.182 212.204 143.072 210.213C142.83 209.78 142.592 209.353 142.355 208.936C141.025 206.277 140.027 203.949 139.362 201.622C138.698 199.295 139.03 196.968 139.695 194.973C140.692 192.978 142.355 191.316 144.349 190.651L146.677 189.654C147.341 189.654 148.339 189.654 149.004 189.986C149.743 190.233 150.117 190.662 150.533 191.139C150.677 191.305 150.827 191.477 150.998 191.648C151.331 192.313 152.328 193.976 153.991 196.303L155.985 200.292C156.318 201.622 156.318 202.952 155.985 203.949C155.653 205.279 154.988 206.941 153.658 207.606V208.271C153.658 209.269 154.323 210.266 155.653 211.928C156.983 213.591 157.98 214.588 158.978 215.253C159.642 215.918 160.64 216.915 162.302 218.245C163.964 219.575 164.962 219.907 165.959 220.24H166.624C167.289 219.242 168.619 218.245 170.281 217.913C172.276 217.248 174.936 218.245 177.595 219.907Z" fill="#D6219C"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_768_335" x1="250.221" y1="361.873" x2="250.221" y2="707.943" gradientUnits="userSpaceOnUse">
+<stop stop-color="#80C8F6"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear_768_335" x1="463.234" y1="490.519" x2="455.352" y2="946.644" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9774AC"/>
+<stop offset="0.4" stop-color="#47A6D3"/>
+<stop offset="0.5" stop-color="#A7A7AE"/>
+<stop offset="0.59" stop-color="#E89AC0"/>
+<stop offset="1" stop-color="#BFE7D1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_768_335" x1="467.374" y1="469.048" x2="467.374" y2="628.524" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5279B"/>
+<stop offset="1" stop-color="#FEA18C"/>
+</linearGradient>
+<linearGradient id="paint3_linear_768_335" x1="779.415" y1="612.576" x2="806.601" y2="690.091" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFA68D"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_768_335">
+<rect width="940" height="788" fill="white"/>
+</clipPath>
+<clipPath id="clip1_768_335">
+<rect width="50" height="50" fill="white" transform="translate(324 101)"/>
+</clipPath>
+<clipPath id="clip2_768_335">
+<rect width="50" height="50" fill="white" transform="translate(753 155)"/>
+</clipPath>
+<clipPath id="clip3_768_335">
+<rect width="50" height="50" fill="white" transform="translate(726 341)"/>
+</clipPath>
+<clipPath id="clip4_768_335">
+<rect width="50" height="50" fill="white" transform="translate(180 336)"/>
+</clipPath>
+</defs>
+</svg>
+<vwc-button id="iconsGallery" slot="footer" icon="arrow-bold-right-line" shape="pill" label="Continue" appearance="outlined"></vwc-button>
+</vwc-card>
+</vwc-layout>
+<script>
+  quickStart.onclick = () => {
+    window.location.href = '/getting-started/quick-start';
+  }
+  advanced.onclick = () => {
+    window.location.href = '/getting-started/advanced/';
+  }
+  design.onclick = () => {
+    window.location.href = '/designs/guidelines/';
+  }
+  migration.onclick = () => {
+    window.location.href = '/getting-started/vivid-2-migration/';
+  }
+  iconsGallery.onclick = () => {
+    window.location.href = '/icons/icons-gallery/';
+  }
+</script>