diff --git a/.changeset/moody-lamps-cough.md b/.changeset/moody-lamps-cough.md
new file mode 100644
index 00000000000..b20a1e1db9c
--- /dev/null
+++ b/.changeset/moody-lamps-cough.md
@@ -0,0 +1,15 @@
+---
+'@talend/scripts-config-storybook-lib': minor
+'@talend/react-faceted-search': minor
+'@talend/storybook-docs': minor
+'@talend/design-system': minor
+'@talend/design-tokens': minor
+'@talend/ui-storybook-one': minor
+'@talend/design-docs': minor
+'@talend/react-components': minor
+'@talend/react-containers': minor
+'@talend/react-stepper': minor
+'@talend/react-forms': minor
+---
+
+feat: add @qlik-light theme
diff --git a/fork/dynamic-cdn-webpack-plugin/test/fixtures/app/node_modules/.DS_Store b/fork/dynamic-cdn-webpack-plugin/test/fixtures/app/node_modules/.DS_Store
deleted file mode 100644
index 5f0e6a4f3ff..00000000000
Binary files a/fork/dynamic-cdn-webpack-plugin/test/fixtures/app/node_modules/.DS_Store and /dev/null differ
diff --git a/packages/components/package.json b/packages/components/package.json
index 875e49bdc65..a74a483bf26 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -71,7 +71,7 @@
     "warning": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.2",
+    "@storybook/addon-actions": "^7.6.4",
     "@talend/bootstrap-theme": "^8.3.1",
     "@talend/design-system": "^8.7.0",
     "@talend/eslint-config": "^13.0.2",
diff --git a/packages/components/src/ActionList/ActionList.component.js b/packages/components/src/ActionList/ActionList.component.js
index 273339c775d..30c909cb7a3 100644
--- a/packages/components/src/ActionList/ActionList.component.js
+++ b/packages/components/src/ActionList/ActionList.component.js
@@ -1,13 +1,15 @@
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 import { TagBeta } from '@talend/design-system';
 
 import { Action } from '../Actions';
+import I18N_DOMAIN_COMPONENTS from '../constants';
 import Inject from '../Inject';
+
 import theme from './ActionList.module.scss';
-import I18N_DOMAIN_COMPONENTS from '../constants';
 
 /**
  * return the formatted action id
diff --git a/packages/components/src/ActionList/ActionList.module.scss b/packages/components/src/ActionList/ActionList.module.scss
index 076ae9f06f3..630db5200bf 100644
--- a/packages/components/src/ActionList/ActionList.module.scss
+++ b/packages/components/src/ActionList/ActionList.module.scss
@@ -11,9 +11,12 @@ $tc-action-list-item-width: 20rem !default;
 $tc-action-list-item-icons-size: tokens.$coral-sizing-xxxs !default;
 $tc-action-list-item-border-size: 0.2rem !default;
 
+$action-list-background-color: tokens.$coral-color-branding-background;
+
 .tc-action-list {
 	display: inline-block;
 	min-width: $tc-action-list-item-width;
+	background-color: $action-list-background-color;
 
 	.tc-action-list-item {
 		:global {
@@ -28,7 +31,7 @@ $tc-action-list-item-border-size: 0.2rem !default;
 				text-overflow: inherit;
 				text-transform: none;
 
-				>span {
+				> span {
 					margin-left: $padding-normal;
 					vertical-align: middle;
 					transition: 0.1s opacity ease-out;
diff --git a/packages/components/src/HeaderBar/HeaderBar.component.js b/packages/components/src/HeaderBar/HeaderBar.component.js
index f36abcdc3ad..823ad076d0f 100644
--- a/packages/components/src/HeaderBar/HeaderBar.component.js
+++ b/packages/components/src/HeaderBar/HeaderBar.component.js
@@ -1,22 +1,22 @@
-import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import { useTranslation } from 'react-i18next';
 
-import Inject from '../Inject';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+
+import AppSwitcher from '../AppSwitcher';
 import I18N_DOMAIN_COMPONENTS from '../constants';
+import Inject from '../Inject';
 import { getTheme } from '../theme';
-import AppSwitcher from '../AppSwitcher';
-
-import { Logo } from './primitives/Logo.component';
-import { Environment } from './primitives/Environment.component';
+import { AppNotification } from './primitives/AppNotification.component';
 import { CallToAction } from './primitives/CallToAction.component';
+import { Environment } from './primitives/Environment.component';
 import { GenericAction } from './primitives/GenericAction.component';
-import { Search } from './primitives/Search.component';
-import { User } from './primitives/User.component';
-import { Information } from './primitives/Information.component';
 import { Help } from './primitives/Help.component';
-import { AppNotification } from './primitives/AppNotification.component';
+import { Information } from './primitives/Information.component';
 import { Intercom } from './primitives/Intercom.component';
+import { Logo } from './primitives/Logo.component';
+import { Search } from './primitives/Search.component';
+import { User } from './primitives/User.component';
 
 import headerBarCssModule from './HeaderBar.module.scss';
 
diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss
index 914045f80c5..3ec95978982 100644
--- a/packages/components/src/HeaderBar/HeaderBar.module.scss
+++ b/packages/components/src/HeaderBar/HeaderBar.module.scss
@@ -15,7 +15,8 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 }
 
 .tc-header-bar {
-	background: tokens.$coral-color-branding-navigation;
+	background: tokens.$coral-color-brand-background;
+	color: tokens.$coral-color-brand-text;
 	display: flex;
 	position: fixed;
 	top: 0;
@@ -34,6 +35,18 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 		list-style: none;
 	}
 
+	:global {
+		.tc-dropdown-button,
+		.btn-link {
+			color: tokens.$coral-color-brand-text;
+			&:hover,
+			&:focus {
+				color: tokens.$coral-color-brand-text;
+				background: tokens.$coral-color-brand-background-weak-hover;
+			}
+		}
+	}
+
 	.tc-header-bar-actions {
 		align-items: center;
 		display: flex;
@@ -56,7 +69,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 				display: block;
 				width: 1px;
 				height: $font-size-large;
-				background-color: tokens.$coral-color-neutral-background;
+				background-color: tokens.$coral-color-brand-text;
 			}
 
 			:global {
@@ -70,6 +83,11 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 		.tc-header-bar-logo {
 			padding: 0;
 			width: $tc-headerbar-logo-width;
+			background-image: tokens.$coral-branding-logo;
+			background-size: 2.8rem;
+			background-repeat: no-repeat;
+			background-position-x: center;
+			background-position-y: center;
 
 			:global(.tc-svg-icon) {
 				padding: 0;
@@ -79,6 +97,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 
 			&.full {
 				width: auto;
+				background-image: none;
 
 				:global(.tc-svg-icon) {
 					padding: 0 $padding-normal;
@@ -162,7 +181,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 
 	.tc-header-bar-intercom-default-component {
 		border-radius: 50%;
-		background: tokens.$coral-color-accent-text;
+		color: tokens.$coral-color-brand-text;
 		min-height: auto;
 		height: 3.2rem;
 		width: 3.2rem;
diff --git a/packages/components/src/HeaderBar/HeaderBar.stories.js b/packages/components/src/HeaderBar/HeaderBar.stories.js
index b7e2e8b1011..457155da357 100644
--- a/packages/components/src/HeaderBar/HeaderBar.stories.js
+++ b/packages/components/src/HeaderBar/HeaderBar.stories.js
@@ -1,12 +1,13 @@
 import { action } from '@storybook/addon-actions';
-import { makeDecorator } from '@storybook/addons';
+import Immutable from 'immutable';
 
-import Immutable from 'immutable'; // eslint-disable-line import/no-extraneous-dependencies
+import assetsApi from '@talend/assets-api';
+import tokens from '@talend/design-tokens';
 
+import AppSwitcher from '../AppSwitcher';
+// eslint-disable-line import/no-extraneous-dependencies
 import Icon from '../Icon';
 import HeaderBar from './HeaderBar.component';
-import AppSwitcher from '../AppSwitcher';
-import assetsApi from '@talend/assets-api';
 
 const props = {
 	brand: {
@@ -40,17 +41,17 @@ const props = {
 	products: {
 		items: [
 			{
-				icon: 'talend-tdp-colored',
+				icon: 'talend-tdp-negative',
 				key: 'tdp',
 				label: 'Data Preparation',
 			},
 			{
-				icon: 'talend-tic-colored',
+				icon: 'talend-tic-negative',
 				key: 'tic',
 				label: 'Integration Cloud',
 			},
 			{
-				icon: 'talend-tmc-colored',
+				icon: 'talend-tmc-negative',
 				key: 'tmc',
 				label: 'Management Console',
 			},
@@ -96,6 +97,11 @@ function IntercomComponent() {
 
 export default {
 	title: 'Components/Navigation/HeaderBar',
+	decorators: Story => (
+		<div style={{ background: tokens.coralColorBrandBackgroundInvertedActive, height: '100vh' }}>
+			<Story />
+		</div>
+	),
 };
 
 export const Default = () => {
@@ -138,7 +144,7 @@ export const WithBrandIcon = () => {
 		...props,
 		brand: {
 			...props.brand,
-			icon: 'talend-tmc-positive',
+			icon: 'talend-tmc-negative',
 		},
 	}).toJS();
 	return <HeaderBar {...headerProps} />;
diff --git a/packages/components/src/HeaderBar/primitives/Intercom.component.js b/packages/components/src/HeaderBar/primitives/Intercom.component.js
index be8bd1fa1d6..e87ed3cdff9 100644
--- a/packages/components/src/HeaderBar/primitives/Intercom.component.js
+++ b/packages/components/src/HeaderBar/primitives/Intercom.component.js
@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 
+import PropTypes from 'prop-types';
+
 import ActionIntercom from '../../ActionIntercom';
 import { getTheme } from '../../theme';
 
diff --git a/packages/components/src/HeaderBar/primitives/Logo.component.js b/packages/components/src/HeaderBar/primitives/Logo.component.js
index ef2e9961c5a..f2f6ea279fe 100644
--- a/packages/components/src/HeaderBar/primitives/Logo.component.js
+++ b/packages/components/src/HeaderBar/primitives/Logo.component.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
-import Inject from '../../Inject';
 import Action from '../../Actions/Action';
+import Inject from '../../Inject';
 import { getTheme } from '../../theme';
 
 import headerBarCssModule from '../HeaderBar.module.scss';
@@ -9,7 +9,7 @@ import headerBarCssModule from '../HeaderBar.module.scss';
 const theme = getTheme(headerBarCssModule);
 
 export function Logo({ isFull, getComponent, t, ...props }) {
-	const icon = isFull ? 'talend-logo' : 'talend-logo-square';
+	const icon = isFull ? 'talend-logo' : undefined;
 	const itemClassName = theme('tc-header-bar-action', 'separated');
 	const actionClassName = theme('tc-header-bar-logo', {
 		full: isFull,
diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js
index d6cf6b12704..94b91acaf4c 100644
--- a/packages/components/src/SidePanel/SidePanel.component.js
+++ b/packages/components/src/SidePanel/SidePanel.component.js
@@ -1,16 +1,19 @@
-import PropTypes from 'prop-types';
-import { createRef, useState, useLayoutEffect, useEffect } from 'react';
-import classNames from 'classnames';
+import { createRef, useEffect, useLayoutEffect, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import 'simplebar';
 import 'simplebar/dist/simplebar.css';
 
-import I18N_DOMAIN_COMPONENTS from '../constants';
-import '../translate';
-import Action from '../Actions/Action';
+import tokens from '@talend/design-tokens';
+
 import ActionList from '../ActionList';
+import Action from '../Actions/Action';
+import I18N_DOMAIN_COMPONENTS from '../constants';
 import Inject from '../Inject';
+import '../translate';
+
 import theme from './SidePanel.module.scss';
 
 const DOCKED_MIN_WIDTH = '6rem';
@@ -108,14 +111,7 @@ function SidePanel({
 	const toggleButtonTitle = docked ? expandLabel : collapseTitle;
 	const Components = Inject.getAll(getComponent, { Action, ActionList });
 	return (
-		<nav
-			id={id}
-			className={navCSS}
-			role="navigation"
-			ref={ref}
-			style={{ width }}
-			data-theme="light"
-		>
+		<nav id={id} className={navCSS} role="navigation" ref={ref} style={{ width }}>
 			{backgroundIcon && (
 				<style>
 					{`#${id}::before {
@@ -126,7 +122,8 @@ function SidePanel({
 						height: 31rem;
 						width: 31rem;
 						background-repeat: no-repeat;
-						background-color: rgba(255, 255, 255, 0.1);
+						opacity: 0.1;
+						background-color: ${tokens.coralColorBrandIcon};
 						mask-image: url('${backgroundIcon}');
 						-webkit-mask-image: url('${backgroundIcon}');
 				}`}
diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss
index c316cd382c9..89df2064f9a 100644
--- a/packages/components/src/SidePanel/SidePanel.module.scss
+++ b/packages/components/src/SidePanel/SidePanel.module.scss
@@ -22,7 +22,7 @@ $large-docked-width: 7rem;
 	display: flex;
 	flex-direction: column;
 	font-weight: 500;
-	background: tokens.$coral-color-branding-navigation;
+	background: tokens.$coral-color-branding-background;
 	overflow: hidden;
 	position: relative;
 
@@ -52,6 +52,7 @@ $large-docked-width: 7rem;
 				display: flex;
 				align-items: center;
 				justify-content: flex-start;
+				color: tokens.$coral-color-brand-text;
 				font-size: 1.6rem;
 				height: $list-item-height;
 				margin: $padding-smaller $padding-small;
@@ -61,6 +62,16 @@ $large-docked-width: 7rem;
 				> span {
 					margin-left: $padding-small;
 				}
+
+				&:hover {
+					background: tokens.$coral-color-brand-background-weak-hover;
+					color: tokens.$coral-color-brand-text-hover;
+				}
+			}
+
+			&.active .btn.btn-link {
+				background: tokens.$coral-color-brand-background-selected;
+				color: tokens.$coral-color-brand-text-selected;
 			}
 
 			.tc-svg-icon {
@@ -85,7 +96,7 @@ $large-docked-width: 7rem;
 
 		:global {
 			.btn.btn-link {
-				color: tokens.$coral-color-neutral-text-inverted;
+				color: tokens.$coral-color-brand-text;
 				line-height: 1;
 				height: $toggle-height;
 				padding: 0 $padding-small;
@@ -191,20 +202,38 @@ $large-docked-width: 7rem;
 	}
 
 	&.reverse[role='navigation'] {
-		background: tokens.$coral-color-neutral-background-medium !important;
-		color: tokens.$coral-color-neutral-text !important;
+		background: tokens.$coral-color-neutral-background-medium;
 
 		&::before {
 			content: none;
 		}
 
+		:global .tc-action-list-item {
+			.btn.btn-link {
+				&:hover {
+					background: tokens.$coral-color-brand-background-selected;
+					color: tokens.$coral-color-brand-text-selected;
+				}
+			}
+		}
+
+		:global {
+			.btn.btn-link,
+			.tc-svg-icon {
+				color: tokens.$coral-color-brand-text-inverted;
+				&:hover {
+					color: tokens.$coral-color-brand-text-inverted-hover;
+				}
+			}
+		}
+
 		.toggle-btn {
 			background-color: transparent;
 
 			:global {
 				.btn.btn-link,
 				.tc-svg-icon {
-					color: tokens.$coral-color-neutral-text-weak;
+					color: tokens.$coral-color-brand-icon-inverted;
 				}
 			}
 		}
diff --git a/packages/components/src/SidePanel/SidePanel.stories.js b/packages/components/src/SidePanel/SidePanel.stories.js
index 03ccc65781d..0b6ea6415e6 100644
--- a/packages/components/src/SidePanel/SidePanel.stories.js
+++ b/packages/components/src/SidePanel/SidePanel.stories.js
@@ -1,7 +1,11 @@
 /* eslint-disable react/no-multi-comp */
 import { Component } from 'react';
+
 import { action } from '@storybook/addon-actions';
+
 import assetsApi from '@talend/assets-api';
+import tokens from '@talend/design-tokens';
+
 import Layout from '../Layout';
 import SidePanel from './SidePanel.component';
 
@@ -101,6 +105,11 @@ const other = [
 
 export default {
 	title: 'Components/Navigation/SidePanel',
+	decorators: Story => (
+		<div style={{ background: tokens.coralColorBrandBackgroundInvertedActive }}>
+			<Story />
+		</div>
+	),
 };
 
 export const Uncontrolled = () => (
@@ -122,9 +131,10 @@ export const Controlled = () => (
 	/>
 );
 
-export const WithBackGroundIcon = () => (
+export const WithBackgroundIcon = (_, context) => (
 	<Layout
 		mode="TwoColumns"
+		theme={context.globals.theme}
 		one={
 			<SidePanel
 				id="context"
@@ -192,7 +202,7 @@ export const ReverseLargeDocked = () => (
 	/>
 );
 
-export const _WithLayout = () => {
+export const _WithLayout = (_, context) => {
 	class WithLayout extends Component {
 		constructor() {
 			super();
@@ -209,7 +219,7 @@ export const _WithLayout = () => {
 				/>
 			);
 			return (
-				<Layout mode="TwoColumns" one={panel}>
+				<Layout mode="TwoColumns" one={panel} theme={context.globals.theme}>
 					<ol>
 						{new Array(100).fill('This is some random content').map((item, num) => (
 							<li key={num}>{item}</li>
@@ -223,7 +233,7 @@ export const _WithLayout = () => {
 	return <WithLayout />;
 };
 
-export const ReverseWithLayout = () => {
+export const ReverseWithLayout = (_, context) => {
 	const panelItems = items.concat([
 		{
 			key: 'longname',
@@ -240,7 +250,7 @@ export const ReverseWithLayout = () => {
 		/>
 	);
 	return (
-		<Layout mode="TwoColumns" one={panel}>
+		<Layout mode="TwoColumns" one={panel} theme={context.globals.theme}>
 			<ol>
 				{new Array(100).fill('This is some random content').map((item, num) => (
 					<li key={num}>{item}</li>
diff --git a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
index fbaa1ac1037..a8839965cc8 100644
--- a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
+++ b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -3,7 +3,6 @@
 exports[`SidePanel should render 1`] = `
 <nav
   class="theme-tc-side-panel tc-side-panel"
-  data-theme="light"
   id="sp"
   role="navigation"
   style="width: 0px;"
diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.component.js b/packages/components/src/SubHeaderBar/SubHeaderBar.component.js
index 8867d49b76e..4a5a85aac17 100644
--- a/packages/components/src/SubHeaderBar/SubHeaderBar.component.js
+++ b/packages/components/src/SubHeaderBar/SubHeaderBar.component.js
@@ -1,15 +1,19 @@
+import { useTranslation } from 'react-i18next';
+
+import classNames from 'classnames';
 import has from 'lodash/has';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
+
 import { ButtonIcon } from '@talend/design-system';
-import I18N_DOMAIN_COMPONENTS from '../constants';
-import getDefaultT from '../translate';
-import { Action } from '../Actions';
+
 import ActionBar from '../ActionBar';
-import TitleSubHeader from './TitleSubHeader';
+import { Action } from '../Actions';
+import I18N_DOMAIN_COMPONENTS from '../constants';
 import Inject from '../Inject';
 import Skeleton from '../Skeleton';
+import getDefaultT from '../translate';
+import TitleSubHeader from './TitleSubHeader';
+
 import theme from './SubHeaderBar.module.scss';
 
 function SubHeaderBarActions({ children, tag, left, right, center, hasRight }) {
diff --git a/packages/containers/.storybook/preview.js b/packages/containers/.storybook/preview.js
index 19cfc28c515..ceee7dab7bb 100644
--- a/packages/containers/.storybook/preview.js
+++ b/packages/containers/.storybook/preview.js
@@ -1,10 +1,10 @@
+import { ThemeProvider } from '@talend/design-system';
+import { namespaces as dsNamespaces } from '@talend/locales-design-system/namespaces';
 import { namespaces as componentsNamespaces } from '@talend/locales-tui-components/namespaces';
-import { namespaces as formsNamespaces } from '@talend/locales-tui-forms/namespaces';
 import { namespaces as containersNamespaces } from '@talend/locales-tui-containers/namespaces';
-import { namespaces as dsNamespaces } from '@talend/locales-design-system/namespaces';
+import { namespaces as formsNamespaces } from '@talend/locales-tui-forms/namespaces';
 
 import cmfModule, { settings } from './cmfModule';
-import { ThemeProvider } from '@talend/design-system';
 
 export const i18n = {
 	namespaces: [
diff --git a/packages/containers/package.json b/packages/containers/package.json
index a328da12116..1f36003d7b6 100644
--- a/packages/containers/package.json
+++ b/packages/containers/package.json
@@ -48,7 +48,7 @@
     "reselect": "^2.5.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.2",
+    "@storybook/addon-actions": "^7.6.4",
     "@talend/bootstrap-theme": "^8.3.1",
     "@talend/icons": "^7.3.1",
     "@talend/locales-tui-components": "^11.4.5",
diff --git a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
index b15484d4c1d..b250fd3a27a 100644
--- a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
+++ b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -3,7 +3,6 @@
 exports[`SidePanel should render 1`] = `
 <nav
   class="theme-tc-side-panel tc-side-panel"
-  data-theme="light"
   role="navigation"
   style="width: 0px;"
 >
diff --git a/packages/design-docs/package.json b/packages/design-docs/package.json
index 22c469a7cd8..691a9b688f6 100644
--- a/packages/design-docs/package.json
+++ b/packages/design-docs/package.json
@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@algolia/autocomplete-js": "^1.12.1",
-    "@storybook/blocks": "^7.6.2",
-    "@storybook/react": "^7.6.2",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
     "@talend/design-system": "^8.6.1",
     "@talend/design-tokens": "^2.10.1",
     "@talend/storybook-docs": "^2.2.1",
@@ -38,17 +38,17 @@
     "use-overflow": "^1.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.2",
-    "@storybook/addon-actions": "^7.6.2",
-    "@storybook/addon-essentials": "^7.6.2",
-    "@storybook/addon-interactions": "^7.6.2",
-    "@storybook/addon-links": "^7.6.2",
-    "@storybook/addons": "^7.6.2",
-    "@storybook/core-events": "^7.6.2",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/core-events": "^7.6.4",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
-    "@storybook/theming": "^7.6.2",
+    "@storybook/theming": "^7.6.4",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",
     "@talend/locales-design-system": "^7.15.1",
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index e66c4d5e218..d711675297f 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -48,18 +48,18 @@
     "@cypress/react": "^7.0.3",
     "@cypress/webpack-dev-server": "^3.7.1",
     "@jest/globals": "^29.7.0",
-    "@storybook/addon-a11y": "^7.6.2",
-    "@storybook/addon-actions": "^7.6.2",
-    "@storybook/addon-essentials": "^7.6.2",
-    "@storybook/addon-interactions": "^7.6.2",
-    "@storybook/addon-links": "^7.6.2",
-    "@storybook/addons": "^7.6.2",
-    "@storybook/blocks": "^7.6.2",
-    "@storybook/core-events": "^7.6.2",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/core-events": "^7.6.4",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.2",
+    "@storybook/react": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.2",
+    "@storybook/theming": "^7.6.4",
     "@svgr/webpack": "^5.5.0",
     "@talend/bootstrap-theme": "^8.3.1",
     "@talend/eslint-config": "^13.0.2",
diff --git a/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx b/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx
index aacb78ef963..4a1c09d7fe4 100644
--- a/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx
@@ -26,7 +26,7 @@ export const ThemeProvider = ({
 	const context = useContext(ThemeContext);
 
 	useEffect(() => {
-		document.body.dataset.theme = selectedTheme === 'light' ? 'light' : 'dark';
+		document.body.dataset.theme = selectedTheme;
 	}, [selectedTheme]);
 
 	useEffect(() => {
diff --git a/packages/design-system/src/components/ThemeProvider/ThemeSwitcher/ThemeSwitcher.tsx b/packages/design-system/src/components/ThemeProvider/ThemeSwitcher/ThemeSwitcher.tsx
index 5b1198ba767..b1c1bfddbc4 100644
--- a/packages/design-system/src/components/ThemeProvider/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/packages/design-system/src/components/ThemeProvider/ThemeSwitcher/ThemeSwitcher.tsx
@@ -1,11 +1,10 @@
-import { useEffect, useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonIconToggle } from '../../ButtonIcon';
-import ThemeContext from '../ThemeContext';
-
 import { dark, light } from '../../../themes';
+import { ButtonIconToggle } from '../../ButtonIcon';
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants';
+import ThemeContext from '../ThemeContext';
 
 const ThemeSwitcher = () => {
 	const { switchTheme, theme } = useContext(ThemeContext);
diff --git a/packages/design-system/src/stories/clickable/About.mdx b/packages/design-system/src/stories/clickable/About.mdx
index 0c1a35e1939..17b48191703 100644
--- a/packages/design-system/src/stories/clickable/About.mdx
+++ b/packages/design-system/src/stories/clickable/About.mdx
@@ -1,5 +1,5 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
-import { FigmaImage, Use } from '@talend/storybook-docs';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { Variations as ButtonVariations } from './Button.stories';
 import { Variations as ButtonAsLinkVariations } from './ButtonAsLink.stories';
 import { Variations as ButtonIconVariations } from './ButtonIcon.stories';
@@ -16,9 +16,7 @@ Clickables are just the things that look like buttons. It's a UI pattern that ha
 
 Use `Button` when you need highly readable CTAs that trigger an action on the page.
 
-<Canvas withSource="closed">
-	<Story of={ButtonVariations} />
-</Canvas>
+<Canvas sourceState="hidden" of={ButtonVariations} />
 
 ## ButtonAsLinks
 
@@ -26,9 +24,7 @@ Use `Button` when you need highly readable CTAs that trigger an action on the pa
 
 Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
 
-<Canvas withSource="closed">
-	<Story of={ButtonAsLinkVariations} />
-</Canvas>
+<Canvas sourceState="hidden" of={ButtonAsLinkVariations} />
 
 ## ButtonIcon
 
@@ -36,6 +32,4 @@ Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
 
 Use `ButtonIcon` when you need to click on a standalone icon. This should never be a hyperlink.
 
-<Canvas withSource="closed">
-	<Story of={ButtonIconVariations} />
-</Canvas>
+<Canvas sourceState="hidden" of={ButtonIconVariations} />
diff --git a/packages/design-system/src/stories/clickable/Button.mdx b/packages/design-system/src/stories/clickable/Button.mdx
index 0d716d5ac8a..7037f35c65e 100644
--- a/packages/design-system/src/stories/clickable/Button.mdx
+++ b/packages/design-system/src/stories/clickable/Button.mdx
@@ -1,5 +1,7 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import * as Stories from './Button.stories';
 import { Status } from '../Status.block';
 
@@ -32,56 +34,34 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 	alt="Buttons in all their variations"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.Variations} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.Variations} />
 
 #### Primary
 
-<Canvas withSource="closed">
-	<Story of={Stories.PrimaryVariations} />
-</Canvas>
-
-<Canvas>
-	<Story of={Stories.Primary} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.PrimaryVariations} />
 
+<Canvas of={Stories.Primary} />
 <Controls of={Stories.Primary} />
 
 #### Destructive
 
-<Canvas withSource="closed">
-	<Story of={Stories.DestructiveVariations} />
-</Canvas>
-
-<Canvas>
-	<Story of={Stories.Destructive} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.DestructiveVariations} />
 
+<Canvas of={Stories.Destructive} />
 <Controls of={Stories.Destructive} />
 
 #### Secondary
 
-<Canvas withSource="closed">
-	<Story of={Stories.SecondaryVariations} />
-</Canvas>
-
-<Canvas>
-	<Story of={Stories.Secondary} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.SecondaryVariations} />
 
+<Canvas of={Stories.Secondary} />
 <Controls of={Stories.Secondary} />
 
 #### Tertiary
 
-<Canvas withSource="closed">
-	<Story of={Stories.TertiaryVariations} />
-</Canvas>
-
-<Canvas>
-	<Story of={Stories.Tertiary} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.TertiaryVariations} />
 
+<Canvas of={Stories.Tertiary} />
 <Controls of={Stories.Tertiary} />
 
 ## Interactions
@@ -92,9 +72,7 @@ All buttons have interactive states for "hover", "active" and "disabled". A focu
 
 Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder for a button.
 
-<Canvas>
-	<Story of={Stories.SkeletonButton} />
-</Canvas>
+<Canvas of={Stories.SkeletonButton} />
 
 [The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
 
@@ -102,9 +80,7 @@ Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder f
 
 Buttons can have a tooltip on hover displaying additional description.
 
-<Canvas>
-	<Story of={Stories.TooltipButton} />
-</Canvas>
+<Canvas of={Stories.TooltipButton} />
 
 ### Async buttons
 
@@ -112,18 +88,14 @@ When the user clicks on the button, and the action is asynchronous, a spinner wi
 If the button has an icon, the spinner will temporarily replace this icon as long as it's loading.
 No action will be possible until it's done.
 
-<Canvas>
-	<Story of={Stories.Loading} />
-</Canvas>
+<Canvas of={Stories.Loading} />
 
 ## Usage
 
 As you've seen, each variant has its own component. But you may want to switch from a variant to another using props.
 You can, using the `<Button>` generic component.
 
-<Canvas>
-	<Story of={Stories.VariantComponent} />
-</Canvas>
+<Canvas of={Stories.VariantComponent} />
 
 Each variant has the same usage rules as their standalone component counterparts seen above.
 
diff --git a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
index d95175212b7..910925dbfc7 100644
--- a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
+++ b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
@@ -1,7 +1,9 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import * as Stories from './ButtonAsLink.stories';
+
 import * as ButtonStories from './Button.stories';
+import * as Stories from './ButtonAsLink.stories';
 import { Status } from '../Status.block';
 
 <Meta title="Clickable/ButtonAsLink" />
@@ -37,40 +39,26 @@ They are otherwise available in the same sizes and with the same iconset.
 	alt="variations for buttons as links"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.Variations} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.Variations} />
 
 #### ButtonPrimaryAsLink
 
-<Canvas>
-	<Story of={Stories.PrimaryAsLink} />
-</Canvas>
-
+<Canvas of={Stories.PrimaryAsLink} />
 <Controls of={Stories.PrimaryAsLink} />
 
 #### ButtonDestructiveAsLink
 
-<Canvas>
-	<Story of={Stories.DestructiveAsLink} />
-</Canvas>
-
+<Canvas of={Stories.DestructiveAsLink} />
 <Controls of={Stories.DestructiveAsLink} />
 
 #### ButtonSecondaryAsLink
 
-<Canvas>
-	<Story of={Stories.SecondaryAsLink} />
-</Canvas>
-
+<Canvas of={Stories.SecondaryAsLink} />
 <Controls of={Stories.SecondaryAsLink} />
 
 #### ButtonTertiaryAsLink
 
-<Canvas>
-	<Story of={Stories.TertiaryAsLink} />
-</Canvas>
-
+<Canvas of={Stories.TertiaryAsLink} />
 <Controls of={Stories.TertiaryAsLink} />
 
 #### ButtonAsLink
@@ -79,9 +67,7 @@ If you need to switch from one variant to another, using a prop can be easier th
 
 `ButtonAsLink` is a standalone component made just for that.
 
-<Canvas>
-	<Story of={Stories.VariantComponent} />
-</Canvas>
+<Canvas of={Stories.VariantComponent} />
 
 ## States
 
@@ -97,9 +83,7 @@ The loading state has been removed as well.
 
 Use the same Skeletons as `Button`.
 
-<Canvas>
-	<Story of={ButtonStories.SkeletonButton} />
-</Canvas>
+<Canvas of={ButtonStories.SkeletonButton} />
 
 [The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
 
@@ -107,9 +91,7 @@ Use the same Skeletons as `Button`.
 
 ButtonsAsLinks can also have a tooltip on hover displaying additional description.
 
-<Canvas>
-	<Story of={Stories.TooltipButton} />
-</Canvas>
+<Canvas of={Stories.TooltipButton} />
 
 ## Content
 
@@ -121,15 +103,11 @@ Links in React SPAs are often handled through React Router and similar packages.
 
 Each `ButtonAsLink` is therefore able to shape itself around them, here React Router's `<Link />` for instance:
 
-<Canvas>
-	<Story of={Stories.ButtonAsRouterLink} />
-</Canvas>
+<Canvas of={Stories.ButtonAsRouterLink} />
 
 The usual `ButtonAsLink` collection component also enables the same behaviour, if you prefer props to standalone variants.
 
-<Canvas>
-	<Story of={Stories.ButtonAsRouterLinkVariant} />
-</Canvas>
+<Canvas of={Stories.ButtonAsRouterLinkVariant} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.mdx b/packages/design-system/src/stories/clickable/ButtonIcon.mdx
index 1bdb60a0159..ef258261556 100644
--- a/packages/design-system/src/stories/clickable/ButtonIcon.mdx
+++ b/packages/design-system/src/stories/clickable/ButtonIcon.mdx
@@ -1,5 +1,7 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
-import { FigmaImage, FigmaLink, Links } from '@talend/storybook-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { FigmaImage } from '@talend/storybook-docs';
+
 import * as Stories from './ButtonIcon.stories';
 import { Status } from '../Status.block';
 
@@ -35,17 +37,13 @@ It handles the two largest usecases we have for clickable icons: actions and tog
 	alt="variations image for ButtonIcon"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.Variations} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.Variations} />
 
 #### Default
 
 This is the go-to ButtonIcon for most generic actions.
 
-<Canvas>
-	<Story of={Stories.DefaultButtonIcon} />
-</Canvas>
+<Canvas of={Stories.DefaultButtonIcon} />
 
 #### Toggle
 
@@ -53,9 +51,7 @@ If the button needs to hold an active / inactive state, then it is a Toggle.
 
 Don’t use Toggles in series, opt for badge dropdowns instead.
 
-<Canvas>
-	<Story of={Stories.DefaultButtonIconToggle} />
-</Canvas>
+<Canvas of={Stories.DefaultButtonIconToggle} />
 
 #### Floating
 
@@ -63,9 +59,7 @@ This variant is only used when the button floats on top of content.
 
 It could be it's sitting on top of a line connecting two nodes, or sticky on top of a draggable scene for instance.
 
-<Canvas>
-	<Story of={Stories.DefaultButtonIconFloating} />
-</Canvas>
+<Canvas of={Stories.DefaultButtonIconFloating} />
 
 ## States
 
@@ -75,9 +69,7 @@ ButtonIcons can display a "loading" state for asynchronous actions.
 
 Only use when necessary to avoid multiple clicks when the action is not instant.
 
-<Canvas>
-	<Story of={Stories.Loading} />
-</Canvas>
+<Canvas of={Stories.Loading} />
 
 ### Skeleton
 
@@ -87,9 +79,7 @@ The Loading state is for asynchronous tasks where the Button (and the button onl
 
 Skeleton needs are handled by the Skeleton component. Use `SkeletonButtonIcon` or the right `variant` prop on `Skeleton`.
 
-<Canvas>
-	<Story of={Stories.ButtonIconSkeletons} />
-</Canvas>
+<Canvas of={Stories.ButtonIconSkeletons} />
 
 [The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
 
@@ -107,35 +97,24 @@ You have access to three components with curated props for each.
 
 ### ButtonIcon
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
-
+<Canvas of={Stories.Default} />
 <Controls of={Stories.Default} />
 
 ### ButtonIconToggle
 
-<Canvas>
-	<Story of={Stories.Toggle} />
-</Canvas>
-
+<Canvas of={Stories.Toggle} />
 <Controls of={Stories.Toggle} />
 
 ### ButtonIconFloating
 
-<Canvas>
-	<Story of={Stories.Floating} />
-</Canvas>
-
+<Canvas of={Stories.Floating} />
 <Controls of={Stories.Floating} />
 
 ### Button props
 
 Of course all buttons can also use natural `<button>` attributes (but not `classNames` nor `style`).
 
-<Canvas>
-	<Story of={Stories.NaturalButtonProps} />
-</Canvas>
+<Canvas of={Stories.NaturalButtonProps} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/clickable/Dropdown.mdx b/packages/design-system/src/stories/clickable/Dropdown.mdx
index 560093c5485..8273c8b62ef 100644
--- a/packages/design-system/src/stories/clickable/Dropdown.mdx
+++ b/packages/design-system/src/stories/clickable/Dropdown.mdx
@@ -1,4 +1,5 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
 
 import { Dropdown } from '../../';
@@ -27,40 +28,30 @@ A dropdown menu displays a list of available actions.
 	alt="Basic dropdown styles"
 />
 
-<Canvas withSource="closed">
-	<Story height="35rem" story={Stories.Basic} />
-</Canvas>
+<Canvas sourceState="hidden" height="35rem" of={Stories.Basic} />
 
 ### Variations
 
 **With icons**
 
-<Canvas>
-	<Story height="25rem" story={Stories.WithIcons} />
-</Canvas>
+<Canvas height="25rem" of={Stories.WithIcons} />
 
 **With dividers**
 
-<Canvas>
-	<Story height="25rem" story={Stories.WithDividers} />
-</Canvas>
+<Canvas height="25rem" of={Stories.WithDividers} />
 
 **With titles**
 
 Use titles in combination with dividers to group menu contents together under headings that make sense.
 
-<Canvas>
-	<Story height="25rem" story={Stories.WithTitle} />
-</Canvas>
+<Canvas height="25rem" of={Stories.WithTitle} />
 
 **Max height**
 
 The max-height of a dropdown is 32rem (320px). A scroll-bar has to be added after exceeding 32rem longer items.
 This rule is not applicable for the header-bar dropdowns.
 
-<Canvas withSource="closed">
-	<Story height="36rem" story={Stories.WithManyItems} />
-</Canvas>
+<Canvas sourceState="hidden" height="36rem" of={Stories.WithManyItems} />
 
 ## States
 
@@ -82,9 +73,7 @@ This rule is not applicable for the header-bar dropdowns.
 	</Use.Do>
 </Use>
 
-<Canvas withSource="closed">
-	<Story height="25rem" story={Stories.WithLongText} />
-</Canvas>
+<Canvas sourceState="hidden" height="25rem" of={Stories.WithLongText} />
 
 ## Interactions
 
@@ -164,6 +153,4 @@ The `items` prop of `Dropdown` accepts 4 types: links, buttons, titles and divid
 
 When it comes to links, you can override the default `<a>` element and use a React-Router `Link` instead:
 
-<Canvas>
-	<Story height="25rem" story={Stories.WithRouterLinks} />
-</Canvas>
+<Canvas height="25rem" of={Stories.WithRouterLinks} />
diff --git a/packages/design-system/src/stories/clickable/Link.mdx b/packages/design-system/src/stories/clickable/Link.mdx
index c2459611741..0fafd894e80 100644
--- a/packages/design-system/src/stories/clickable/Link.mdx
+++ b/packages/design-system/src/stories/clickable/Link.mdx
@@ -1,8 +1,10 @@
-import { Controls, Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
-import { Link, IconsProvider } from '../../';
+
 import * as Stories from './Link.stories';
 import * as StoriesButton from './LinkAsButton.stories';
+import { IconsProvider, Link } from '../../';
 import { Status } from '../Status.block';
 
 <Meta title="Clickable/Link" component={Link} />
@@ -27,43 +29,31 @@ Still need to be convinced? Please, take the time to read [this article written
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ### With icon
 
-<Canvas>
-	<Story of={Stories.WithIcon} />
-</Canvas>
+<Canvas of={Stories.WithIcon} />
 
 ### Multi lines
 
-<Canvas>
-	<Story of={Stories.MultiLines} />
-</Canvas>
+<Canvas of={Stories.MultiLines} />
 
 ### Disabled
 
 When the link is disabled the whole component is displayed with $opacity.disabled.
 
-<Canvas>
-	<Story of={Stories.Disabled} />
-</Canvas>
+<Canvas of={Stories.Disabled} />
 
 ### External
 
 When the link targets a new domain, we add an external-link icon right after.
 
-<Canvas>
-	<Story of={Stories.External} />
-</Canvas>
+<Canvas of={Stories.External} />
 
 Even if it's the same domain, when the link opens in a new window or tab, the title `open in a new tab` is added or appended to an existing title.
 
-<Canvas>
-	<Story of={Stories.TargetBlank} />
-</Canvas>
+<Canvas of={Stories.TargetBlank} />
 
 The attribute `rel="noopener noreferrer"` is added if its target is `_blank`.
 
@@ -71,19 +61,14 @@ The attribute `rel="noopener noreferrer"` is added if its target is `_blank`.
 
 In React SPAs, most links are handled by libraries such as React Router. `Link` takes that into account.
 
-<Canvas>
-	<Story of={Stories.RouterLinkStory} />
-</Canvas>
+<Canvas of={Stories.RouterLinkStory} />
 
 ### As a button
 
 In extreme cases we do not condone, you may need the style of a link but the behavior of a button.
 If your action open a new tab, you can use the `openInNewTab` props to trigger the display of the `external-link` icon, and add `open in a new tab` in the link title.
 
-<Canvas>
-	<Story of={StoriesButton.LinkAsButtonStory} />
-</Canvas>
-
+<Canvas of={StoriesButton.LinkAsButtonStory} />
 <Controls of={StoriesButton.LinkAsButtonStory} />
 
 ## Content
@@ -130,8 +115,5 @@ Press <kbd>ENTER</kbd> to open a link
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas of={Stories.Usage} />
 <Controls of={Stories.Usage} />
diff --git a/packages/design-system/src/stories/feedback/EmptyState.mdx b/packages/design-system/src/stories/feedback/EmptyState.mdx
index e9a4bcd576c..9114261ef59 100644
--- a/packages/design-system/src/stories/feedback/EmptyState.mdx
+++ b/packages/design-system/src/stories/feedback/EmptyState.mdx
@@ -1,7 +1,9 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
-import { Status } from '../Status.block';
+
 import * as Stories from './EmptyState.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="emptyState" />
@@ -23,9 +25,7 @@ Use empty states to communicate about the current state of the system or to tell
 	alt="Three different styles of empty states"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.Demo} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.Demo} />
 
 ### Purposes
 
@@ -42,9 +42,7 @@ Empty states come in different sizes to accommodate to empty state types and pag
 
 #### EmptyStateLarge (with Spot illustration)
 
-<Canvas>
-	<Story of={Stories.Large} />
-</Canvas>
+<Canvas of={Stories.Large} />
 
 **Content guidelines**
 
@@ -60,10 +58,7 @@ Use large empty states when the empty content area on screen takes up at least 5
 
 #### EmptyStateMedium (with Icon illustration)
 
-<Canvas>
-	<Story of={Stories.MediumWithAction} />
-</Canvas>
-
+<Canvas of={Stories.MediumWithAction} />
 <Controls of={Stories.MediumWithAction} />
 
 **Content guidelines**
@@ -80,9 +75,7 @@ Use medium empty states when the empty content area on screen takes up less than
 
 #### EmptyStateSmall (with no Icon illustration)
 
-<Canvas>
-	<Story of={Stories.Small} />
-</Canvas>
+<Canvas of={Stories.Small} />
 
 **Content guidelines**
 
@@ -158,10 +151,7 @@ N/A
 
 ### Components props
 
-<Canvas withSource="closed">
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas sourceState="hidden" of={Stories.Usage} />
 <Controls of={Stories.Usage} />
 
 ### Button as Link
@@ -170,6 +160,4 @@ You may need your CTA to redirect to a page. The `action` props is tailored to m
 
 You can therefore easily set-up a button that's actually a link:
 
-<Canvas>
-	<Story of={Stories.LargeWithLinkButton} />
-</Canvas>
+<Canvas of={Stories.LargeWithLinkButton} />
diff --git a/packages/design-system/src/stories/feedback/ErrorState.mdx b/packages/design-system/src/stories/feedback/ErrorState.mdx
index a20d9603d8a..30114dd509a 100644
--- a/packages/design-system/src/stories/feedback/ErrorState.mdx
+++ b/packages/design-system/src/stories/feedback/ErrorState.mdx
@@ -1,5 +1,7 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
-import { FigmaImage, Use } from '@talend/storybook-docs';
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../Status.block';
 
 import * as Stories from './ErrorState.stories';
@@ -52,33 +54,23 @@ Error state visually varies depending on what features are provided through the
 
 #### Default (with a title and a description)
 
-<Canvas>
-	<Story of={Stories.DefaultStory} />
-</Canvas>
+<Canvas of={Stories.DefaultStory} />
 
 #### With a link (default features, plus a link)
 
-<Canvas>
-	<Story of={Stories.WithLink} />
-</Canvas>
+<Canvas of={Stories.WithLink} />
 
 #### With a link built from `<Link />` props
 
-<Canvas>
-	<Story of={Stories.WithLinkProps} />
-</Canvas>
+<Canvas of={Stories.WithLinkProps} />
 
 #### With an action (default features, plus an action)
 
-<Canvas>
-	<Story of={Stories.WithAction} />
-</Canvas>
+<Canvas of={Stories.WithAction} />
 
 #### With an action and a link (default features, plus an action and a link)
 
-<Canvas>
-	<Story of={Stories.WithActionAndLink} />
-</Canvas>
+<Canvas of={Stories.WithActionAndLink} />
 
 ## States
 
diff --git a/packages/design-system/src/stories/feedback/Loading.mdx b/packages/design-system/src/stories/feedback/Loading.mdx
index 8a3c923277d..fe81842e3c6 100644
--- a/packages/design-system/src/stories/feedback/Loading.mdx
+++ b/packages/design-system/src/stories/feedback/Loading.mdx
@@ -1,4 +1,5 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import * as Stories from './Loading.stories';
 import { Status } from '../Status.block';
 
@@ -11,9 +12,7 @@ import { Status } from '../Status.block';
 
 ## Style
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ## States
 
diff --git a/packages/design-system/src/stories/feedback/Skeleton.mdx b/packages/design-system/src/stories/feedback/Skeleton.mdx
index 3bb4de07074..ad1f7ed82b2 100644
--- a/packages/design-system/src/stories/feedback/Skeleton.mdx
+++ b/packages/design-system/src/stories/feedback/Skeleton.mdx
@@ -1,16 +1,7 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { FigmaImage } from '@talend/storybook-docs';
 
-import {
-	Skeleton,
-	SkeletonButton,
-	SkeletonHeading,
-	SkeletonInput,
-	SkeletonParagraph,
-	StackHorizontal,
-	StackVertical,
-} from '../../';
 import { Status } from '../Status.block';
 
 import * as Stories from './Skeleton.stories';
@@ -32,20 +23,14 @@ Skeleton is used as placeholder to fill the space while the real content is load
 
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A188" />
 
-<Canvas>
-	<Story of={Stories.SkeletonButtonStory} />
-</Canvas>
-
+<Canvas of={Stories.SkeletonButtonStory} />
 <Controls of={Stories.SkeletonButtonStory} />
 
 ### ButtonIcon
 
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A189" />
 
-<Canvas>
-	<Story of={Stories.SkeletonButtonIconStory} />
-</Canvas>
-
+<Canvas of={Stories.SkeletonButtonIconStory} />
 <Controls of={Stories.SkeletonButtonIconStory} />
 
 ### Text
@@ -56,10 +41,7 @@ It illustrates any heading element.
 
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A187" />
 
-<Canvas>
-	<Story of={Stories.SkeletonHeadingStory} />
-</Canvas>
-
+<Canvas of={Stories.SkeletonHeadingStory} />
 <Controls of={Stories.SkeletonHeadingStory} />
 
 #### Paragraph
@@ -68,10 +50,7 @@ It illustrates any paragraph or small copy element.
 
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A182" />
 
-<Canvas>
-	<Story of={Stories.SkeletonParagraphStory} />
-</Canvas>
-
+<Canvas of={Stories.SkeletonParagraphStory} />
 <Controls of={Stories.SkeletonParagraphStory} />
 
 #### Input
@@ -80,26 +59,20 @@ It illustrates any input element.
 
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3705%3A92" />
 
-<Canvas>
-	<Story of={Stories.SkeletonInputStory} />
-</Canvas>
+<Canvas of={Stories.SkeletonInputStory} />
 
 #### Sized
 
 It can be the size needed
 
-<Canvas>
-	<Story of={Stories.SkeletonSizedStory} />
-</Canvas>
+<Canvas of={Stories.SkeletonSizedStory} />
 <Controls of={Stories.SkeletonSizedStory} />
 
 #### Composition example
 
 Combine all of them to mock content!
 
-<Canvas>
-	<Story of={Stories.CompositionExample} />
-</Canvas>
+<Canvas of={Stories.CompositionExample} />
 
 ## States
 
@@ -126,6 +99,4 @@ As you've seen above, `Skeleton` can be used by importing the single variant you
 
 You can also use `Skeleton` and specify the variant you need to use: its props will then match the variant's own.
 
-<Canvas>
-	<Story of={Stories.ButtonVariants} />
-</Canvas>
+<Canvas of={Stories.ButtonVariants} />
diff --git a/packages/design-system/src/stories/feedback/Status.mdx b/packages/design-system/src/stories/feedback/Status.mdx
index ddbdee6d0b5..94a19e91f01 100644
--- a/packages/design-system/src/stories/feedback/Status.mdx
+++ b/packages/design-system/src/stories/feedback/Status.mdx
@@ -1,5 +1,7 @@
-import { Controls, Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import * as Stories from './Status.stories';
 import { Status } from '../Status.block';
 
@@ -28,23 +30,19 @@ The status component displays state information using semantic colors and icons.
 
 #### With text
 
-<Canvas>
-	<Story of={Stories.InProgress} />
-	<Story of={Stories.Successful} />
-	<Story of={Stories.Failed} />
-	<Story of={Stories.Warning} />
-	<Story of={Stories.Canceled} />
-</Canvas>
+<Canvas of={Stories.InProgress} />
+<Canvas of={Stories.Successful} />
+<Canvas of={Stories.Failed} />
+<Canvas of={Stories.Warning} />
+<Canvas of={Stories.Canceled} />
 
 #### Without text
 
-<Canvas>
-	<Story of={Stories.InProgressIcon} />
-	<Story of={Stories.SuccessfulIcon} />
-	<Story of={Stories.FailedIcon} />
-	<Story of={Stories.WarningIcon} />
-	<Story of={Stories.CanceledIcon} />
-</Canvas>
+<Canvas of={Stories.InProgressIcon} />
+<Canvas of={Stories.SuccessfulIcon} />
+<Canvas of={Stories.FailedIcon} />
+<Canvas of={Stories.WarningIcon} />
+<Canvas of={Stories.CanceledIcon} />
 
 ## States
 
@@ -73,10 +71,8 @@ By default, each Status variants has a label:
 
 Depending on the use case, it is possible to have another label instead but keeping the same meaning.
 
-<Canvas>
-	<Story of={Stories.CustomSuccessful} />
-	<Story of={Stories.CustomInProgressIcon} />
-</Canvas>
+<Canvas of={Stories.CustomSuccessful} />
+<Canvas of={Stories.CustomInProgressIcon} />
 
 ## Usage
 
@@ -84,10 +80,7 @@ You can directly use the presets `StatusInProgress` etc... but in some cases you
 
 You can.
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas of={Stories.Usage} />
 <Controls of={Stories.Usage} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/About.mdx b/packages/design-system/src/stories/form/About.mdx
index 18eb8b64acc..eacae051cd1 100644
--- a/packages/design-system/src/stories/form/About.mdx
+++ b/packages/design-system/src/stories/form/About.mdx
@@ -1,4 +1,5 @@
 import { Canvas, Meta, Story } from '@storybook/blocks';
+
 import { AboutRowsDefault, AboutRowsStretch } from './Form.stories';
 
 <Meta title="Form/About" />
@@ -39,15 +40,11 @@ Used to wrap fields that must stand next to one another.
 
 By default, the fields will only take the space that they need to:
 
-<Canvas withSource="closed">
-	<Story of={AboutRowsDefault} />
-</Canvas>
+<Canvas sourceState="hidden" of={AboutRowsDefault} />
 
 If necessary, `Row` can stretch to fill the form's width:
 
-<Canvas withSource="closed">
-	<Story of={AboutRowsStretch} />
-</Canvas>
+<Canvas sourceState="hidden" of={AboutRowsStretch} />
 
 In both cases, a gap of `spacing-l` is enforced between the fields.
 
diff --git a/packages/design-system/src/stories/form/Affix/Affixes.mdx b/packages/design-system/src/stories/form/Affix/Affixes.mdx
index 58867fc7cea..fb8b7d7832c 100644
--- a/packages/design-system/src/stories/form/Affix/Affixes.mdx
+++ b/packages/design-system/src/stories/form/Affix/Affixes.mdx
@@ -1,6 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { ButtonPrimary, Form, InlineMessageInformation } from '../../../';
+
 import * as Stories from './Affix.stories';
 import { Status } from '../../Status.block';
 
@@ -30,9 +31,7 @@ Fill in their `prefix` or `suffix` prop and the deed is done.
 
 Affixes are either `prefix` or `suffix`. They are one of the following types:
 
-<Canvas>
-	<Story of={Stories.QuickStart} />
-</Canvas>
+<Canvas of={Stories.QuickStart} />
 
 Both `prefix` and `affix` accept the same 3 kinds of objects.
 
@@ -43,9 +42,7 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 	alt="Select affixes"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.AffixSelect} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.AffixSelect} />
 
 ##### Button affixes
 
@@ -54,9 +51,7 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 	alt="Button affixes"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.AffixButton} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.AffixButton} />
 
 ##### Text affixes
 
@@ -65,17 +60,13 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 	alt="Text affixes"
 />
 
-<Canvas withSource="closed">
-	<Story of={Stories.AffixText} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.AffixText} />
 
 #### Datalist and multiple select
 
 `Form.Datalist` and multiple selects also works with the same ruleset.
 
-<Canvas>
-	<Story of={Stories.DatalistAffix} />
-</Canvas>
+<Canvas of={Stories.DatalistAffix} />
 
 #### Mix and match
 
@@ -86,9 +77,7 @@ An input can mix multiple types of affixes indiscriminately.
 	alt="An input group demo"
 />
 
-<Canvas>
-	<Story of={Stories.Mix} />
-</Canvas>
+<Canvas of={Stories.Mix} />
 
 ## States
 
@@ -114,9 +103,7 @@ Use lower case on prefix and suffix except if it's an interactive element.
 
 Here's an example using a `select` type affix with React Hooks Form
 
-<Canvas>
-	<Story of={Stories.ReactHookForm} />
-</Canvas>
+<Canvas of={Stories.ReactHookForm} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
index 1700db7cc8d..0530226f36a 100644
--- a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
+++ b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import * as Stories from './FormButtons.stories';
 import { Status } from '../../Status.block';
 
@@ -30,9 +32,7 @@ A Form always displays buttons in order to be cancelled or validated.
 	alt="Button zone with skeletons"
 />
 
-<Canvas>
-	<Story of={Stories.FormButtonsSkeleton} />
-</Canvas>
+<Canvas of={Stories.FormButtonsSkeleton} />
 
 ### Default
 
@@ -41,9 +41,7 @@ A Form always displays buttons in order to be cancelled or validated.
 	alt="Default button zone"
 />
 
-<Canvas>
-	<Story of={Stories.FormButtonsDefault} />
-</Canvas>
+<Canvas of={Stories.FormButtonsDefault} />
 
 ### Loading
 
@@ -52,9 +50,7 @@ A Form always displays buttons in order to be cancelled or validated.
 	alt="Button zone with loading buttons"
 />
 
-<Canvas>
-	<Story of={Stories.FormButtonsLoading} />
-</Canvas>
+<Canvas of={Stories.FormButtonsLoading} />
 
 ## Content
 
@@ -73,15 +69,11 @@ Sort the buttons from the least to the most important.
 	alt="Button zone order demonstration"
 />
 
-<Canvas>
-	<Story of={Stories.FormButtonsOrder} />
-</Canvas>
+<Canvas of={Stories.FormButtonsOrder} />
 
 If there is only one button accompanying the form, then it should stick to the right.
 
-<Canvas withSource="closed">
-	<Story of={Stories.FormButtonsSingle} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.FormButtonsSingle} />
 
 ### Buttons with icons
 
diff --git a/packages/design-system/src/stories/form/Enumeration/Enumeration.mdx b/packages/design-system/src/stories/form/Enumeration/Enumeration.mdx
index 52cce77e2cd..32261c24095 100644
--- a/packages/design-system/src/stories/form/Enumeration/Enumeration.mdx
+++ b/packages/design-system/src/stories/form/Enumeration/Enumeration.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import * as Stories from './Enumeration.stories';
 import { Status } from '../../Status.block';
@@ -12,13 +12,9 @@ Lazy loading list that allows to create, edit and remove items from it.
 
 ## Variations
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
-<Canvas>
-	<Story of={Stories.Empty} />
-</Canvas>
+<Canvas of={Stories.Empty} />
 
 ## Usage
 
diff --git a/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx b/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx
index 8b3022e6f06..43ca84b2f2f 100644
--- a/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx
+++ b/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Datalist.stories';
@@ -22,9 +24,7 @@ import * as Stories from './Input.Datalist.stories';
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Datalist} />
-</Canvas>
+<Canvas of={Stories.Datalist} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Field/FormField.mdx b/packages/design-system/src/stories/form/Field/FormField.mdx
index 9570bef0a8c..760b4ca3712 100644
--- a/packages/design-system/src/stories/form/Field/FormField.mdx
+++ b/packages/design-system/src/stories/form/Field/FormField.mdx
@@ -1,7 +1,9 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../../Status.block';
+
 import * as Stories from './FormField.stories';
+import { Status } from '../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formField" />
@@ -30,9 +32,7 @@ The user must correct the error within the field. Once the error is corrected, t
 	alt="Form Field mockup in error"
 />
 
-<Canvas>
-	<Story of={Stories.FormFieldError} />
-</Canvas>
+<Canvas of={Stories.FormFieldError} />
 
 ## Content
 
@@ -45,9 +45,7 @@ The default behavior is to highlight the mandatory fields by using the asterisk
 	alt="Form Field mockup"
 />
 
-<Canvas>
-	<Story of={Stories.FormFieldRequired} />
-</Canvas>
+<Canvas of={Stories.FormFieldRequired} />
 
 ### Information
 
@@ -58,9 +56,7 @@ A message can be displayed below the input to help the user by recommending appr
 	alt="Form Field mockup with inline message"
 />
 
-<Canvas>
-	<Story of={Stories.FormFieldInformation} />
-</Canvas>
+<Canvas of={Stories.FormFieldInformation} />
 
 ### Link
 
@@ -73,16 +69,11 @@ If a description or an error is applied to the field, it must be displayed betwe
 	alt="Form Password Field mockup with a link"
 />
 
-<Canvas>
-	<Story of={Stories.FormFieldPassword} />
-</Canvas>
+<Canvas of={Stories.FormFieldPassword} />
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas of={Stories.Usage} />
 <Controls of={Stories.Usage} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
index 2138af9a6aa..8828ddc793a 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
@@ -1,5 +1,7 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import * as Stories from './Input.Checkbox.stories';
 import { Status } from '../../../Status.block';
 
@@ -32,33 +34,23 @@ Note on [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Elemen
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.CheckboxFillStates} />
-</Canvas>
+<Canvas of={Stories.CheckboxFillStates} />
 
 ### Disabled
 
-<Canvas>
-	<Story of={Stories.CheckboxFillStatesDisabled} />
-</Canvas>
+<Canvas of={Stories.CheckboxFillStatesDisabled} />
 
 ### Read only
 
-<Canvas>
-	<Story of={Stories.CheckboxFillStatesReadonly} />
-</Canvas>
+<Canvas of={Stories.CheckboxFillStatesReadonly} />
 
 ### Multiple checkboxes
 
-<Canvas>
-	<Story of={Stories.CheckboxReactHooksForm} />
-</Canvas>
+<Canvas of={Stories.CheckboxReactHooksForm} />
 
 ### Controlled checkbox
 
-<Canvas>
-	<Story of={Stories.CheckboxControlled} />
-</Canvas>
+<Canvas of={Stories.CheckboxControlled} />
 
 ## Content
 
@@ -94,10 +86,7 @@ Aim for parallelism but not at the expense of comprehension.
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Basic} />
-</Canvas>
-
+<Canvas of={Stories.Basic} />
 <Controls of={Stories.Basic} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx
index da7e3c0b542..3e09b10f27f 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Color.stories';
@@ -24,9 +26,7 @@ Only simple colors (without alpha channel) are allowed though CSS colors has mor
 
 ## States
 
-<Canvas>
-	<Story of={Stories.ColorStates} />
-</Canvas>
+<Canvas of={Stories.ColorStates} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
index 913099ab930..603ae9899c5 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Copy.stories';
@@ -24,23 +26,17 @@ A shortcut to a read-only `Form.Text` field with prefix and a state, it's used t
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.CopyStates} />
-</Canvas>
+<Canvas of={Stories.CopyStates} />
 
 ### Filled
 
-<Canvas>
-	<Story of={Stories.CopyStatesWithContents} />
-</Canvas>
+<Canvas of={Stories.CopyStatesWithContents} />
 
 ### Prefix
 
 `Form.Copy` uses `Form.Text` internally and is therefore able to display a prefix as well.
 
-<Canvas>
-	<Story of={Stories.CopyWithPrefix} />
-</Canvas>
+<Canvas of={Stories.CopyWithPrefix} />
 
 Read the [Affixes documentation here](/docs/form-affic-affixes) for more details.
 
@@ -50,9 +46,7 @@ Read the [Affixes documentation here](/docs/form-affic-affixes) for more details
 
 When using Rhf, if you want the confirmation message to disappear in case of input change, you must use `watch` on the value or defaultValue.
 
-<Canvas>
-	<Story of={Stories.ReactHookForm} />
-</Canvas>
+<Canvas of={Stories.ReactHookForm} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx
index 6d34be6033d..dc78a08cdd1 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx
@@ -1,7 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../../../Status.block';
+
 import * as Stories from './Input.Date.stories';
+import { Status } from '../../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formFieldInputDate" />
@@ -21,9 +23,7 @@ It creates input fields that let the user enter a date, either with a textbox th
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Date} />
-</Canvas>
+<Canvas of={Stories.Date} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx b/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx
index 6c467b3295c..293bf26db95 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.DatetimeLocal.stories';
@@ -24,9 +26,7 @@ Browser behaviour with the field varies and they don't all display the same plac
 
 ## States
 
-<Canvas>
-	<Story of={Stories.DatetimeLocal} />
-</Canvas>
+<Canvas of={Stories.DatetimeLocal} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx
index 5bb9d228318..9b1aac40ee5 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Email.stories';
@@ -22,9 +24,7 @@ import * as Stories from './Input.Email.stories';
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Email} />
-</Canvas>
+<Canvas of={Stories.Email} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.File.mdx b/packages/design-system/src/stories/form/Field/Input/Input.File.mdx
index 6ff57cb0afb..7b98b28efa6 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.File.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.File.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.File.stories';
@@ -31,21 +33,15 @@ The `Form.File` inputs allows users to select a file through drag and drop or by
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.File} />
-</Canvas>
+<Canvas of={Stories.File} />
 
 ### Multiple
 
-<Canvas>
-	<Story of={Stories.FileMultiple} />
-</Canvas>
+<Canvas of={Stories.FileMultiple} />
 
 ### Error
 
-<Canvas>
-	<Story of={Stories.FileError} />
-</Canvas>
+<Canvas of={Stories.FileError} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx
index 8025b538269..a460e00dc26 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Month.stories';
@@ -22,9 +24,7 @@ import * as Stories from './Input.Month.stories';
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Month} />
-</Canvas>
+<Canvas of={Stories.Month} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx
index 79d3773e1ad..26d2b617191 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Number.stories';
@@ -24,9 +26,7 @@ The browser may opt to provide stepper arrows to let the user increase and decre
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Number} />
-</Canvas>
+<Canvas of={Stories.Number} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx
index 7b43f8d17ea..e00ea2160f9 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx
@@ -1,5 +1,7 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Radio.stories';
@@ -33,27 +35,19 @@ Otherwise, consider using [checkboxes](components-form-form-fields-checkbox--che
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.RadioFillStates} />
-</Canvas>
+<Canvas of={Stories.RadioFillStates} />
 
 ### Disabled
 
-<Canvas>
-	<Story of={Stories.RadioFillStatesDisabled} />
-</Canvas>
+<Canvas of={Stories.RadioFillStatesDisabled} />
 
 ### Read only
 
-<Canvas>
-	<Story of={Stories.RadioFillStatesReadonly} />
-</Canvas>
+<Canvas of={Stories.RadioFillStatesReadonly} />
 
 ### Multiple radios
 
-<Canvas>
-	<Story of={Stories.RadioReactHooksForm} />
-</Canvas>
+<Canvas of={Stories.RadioReactHooksForm} />
 
 ## Content
 
@@ -86,10 +80,7 @@ Radio buttons appear as a list of two or more options where users can select onl
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Basic} />
-</Canvas>
-
+<Canvas of={Stories.Basic} />
 <Controls of={Stories.Basic} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx
index b832f50d3e5..027649d4771 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx
@@ -1,7 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
-import { Status } from '../../../Status.block';
+
 import * as Stories from './Input.Search.stories';
+import { Status } from '../../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formFieldInputSearch" />
@@ -26,9 +28,7 @@ import * as Stories from './Input.Search.stories';
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Search} />
-</Canvas>
+<Canvas of={Stories.Search} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx
index b4cad8155ba..9ea3d5d2458 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx
@@ -1,7 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../../../Status.block';
+
 import * as Stories from './Input.Tel.stories';
+import { Status } from '../../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formFieldInputTel" />
@@ -23,9 +25,7 @@ import * as Stories from './Input.Tel.stories';
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.Tel} />
-</Canvas>
+<Canvas of={Stories.Tel} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx
index 4002281d7a3..1e499997f78 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx
@@ -1,7 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../../../Status.block';
+
 import * as Stories from './Input.Text.stories';
+import { Status } from '../../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formFieldInputText" />
@@ -26,9 +28,7 @@ import * as Stories from './Input.Text.stories';
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Text} />
-</Canvas>
+<Canvas of={Stories.Text} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx
index 3c1bd0e0770..93cc9c348e2 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Time.stories';
@@ -24,9 +26,7 @@ It is a semantic field where the validation and display may be browser-specific.
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Time} />
-</Canvas>
+<Canvas of={Stories.Time} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx
index 95aae0a6d09..fb0a5a20f68 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Url.stories';
@@ -24,9 +26,7 @@ N/C
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Url} />
-</Canvas>
+<Canvas of={Stories.Url} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx
index bbb3f29b579..f760c45cfc1 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Week.stories';
@@ -26,9 +28,7 @@ N/C
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Week} />
-</Canvas>
+<Canvas of={Stories.Week} />
 
 ## Interactions
 
diff --git a/packages/design-system/src/stories/form/Field/Input/Password.mdx b/packages/design-system/src/stories/form/Field/Input/Password.mdx
index 22baaac3e8f..b7a9edd053a 100644
--- a/packages/design-system/src/stories/form/Field/Input/Password.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Password.mdx
@@ -1,7 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../../../Status.block';
+
 import * as Stories from './Password.stories';
+import { Status } from '../../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formFieldInputPassword" />
@@ -29,9 +31,7 @@ It will vary depending on the user agent and OS.
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Password} />
-</Canvas>
+<Canvas of={Stories.Password} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx b/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx
index 3e3799d756c..09281acca63 100644
--- a/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx
+++ b/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Select.stories';
@@ -29,27 +31,19 @@ import * as Stories from './Input.Select.stories';
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.Select} />
-</Canvas>
+<Canvas of={Stories.Select} />
 
 ### Filled
 
-<Canvas>
-	<Story of={Stories.SelectWithValue} />
-</Canvas>
+<Canvas of={Stories.SelectWithValue} />
 
 ### Multiple
 
-<Canvas>
-	<Story of={Stories.SelectMultiple} />
-</Canvas>
+<Canvas of={Stories.SelectMultiple} />
 
 ### With option groups
 
-<Canvas>
-	<Story of={Stories.SelectOptionGroups} />
-</Canvas>
+<Canvas of={Stories.SelectOptionGroups} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx b/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx
index 16eeee97380..40f5600657b 100644
--- a/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx
+++ b/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../../Status.block';
 
 import * as Stories from './Input.Textarea.stories';
@@ -27,17 +29,13 @@ import * as Stories from './Input.Textarea.stories';
 
 ## States
 
-<Canvas>
-	<Story of={Stories.Textarea} />
-</Canvas>
+<Canvas of={Stories.Textarea} />
 
 ## Interactions
 
 A vertical scrollbar appears when the content exceeds the available space.
 
-<Canvas>
-	<Story of={Stories.TextareaMaxedOut} />
-</Canvas>
+<Canvas of={Stories.TextareaMaxedOut} />
 
 Textarea fields can be resized vertically, up to a max-height described by the token `sizing-xxxl`.
 
diff --git a/packages/design-system/src/stories/form/FieldCombobox.mdx b/packages/design-system/src/stories/form/FieldCombobox.mdx
index f359aba28fc..edb400c9aa6 100644
--- a/packages/design-system/src/stories/form/FieldCombobox.mdx
+++ b/packages/design-system/src/stories/form/FieldCombobox.mdx
@@ -1,6 +1,8 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Combobox, StackVertical, InlineMessageWarning } from '../../';
+
+import { Combobox, InlineMessageWarning, StackVertical } from '../../';
 import { Status } from '../Status.block';
 
 import * as Stories from './Combobox.stories';
@@ -45,10 +47,7 @@ Custom values are still possible like a datalist.
 	alt="combobox for multiselection"
 />
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
-
+<Canvas of={Stories.Default} />
 <Controls of={Stories.Default} />
 
 ## States
diff --git a/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx b/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx
index b845defc790..16e630ce846 100644
--- a/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx
+++ b/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../Status.block';
 
 import * as Stories from './Fieldset.stories';
@@ -31,9 +33,7 @@ If the fields are even more closely related, display them on the same line using
 	alt="Fieldset mockup"
 />
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ## States
 
@@ -46,9 +46,7 @@ A fieldset usually does not carry error state. Its individual fields do.
 	alt="Fieldset mockup with state"
 />
 
-<Canvas>
-	<Story of={Stories.Error} />
-</Canvas>
+<Canvas of={Stories.Error} />
 
 In case of more than one error or a horizontal fieldset, display the errors under each affected field.
 
@@ -57,9 +55,7 @@ In case of more than one error or a horizontal fieldset, display the errors unde
 	alt="Fieldset mockup with errors in two fields"
 />
 
-<Canvas>
-	<Story of={Stories.Errors} />
-</Canvas>
+<Canvas of={Stories.Errors} />
 
 ## Content
 
@@ -96,9 +92,7 @@ The trigger can be any "on / off" interactions available in a form:
 
 Use sparingly as it makes a form harder to predict and understand at a glance.
 
-<Canvas>
-	<Story of={Stories.ConditionalFieldset} />
-</Canvas>
+<Canvas of={Stories.ConditionalFieldset} />
 
 ## Usage
 
diff --git a/packages/design-system/src/stories/form/Fieldset/FormFieldset.mdx b/packages/design-system/src/stories/form/Fieldset/FormFieldset.mdx
index b845defc790..16e630ce846 100644
--- a/packages/design-system/src/stories/form/Fieldset/FormFieldset.mdx
+++ b/packages/design-system/src/stories/form/Fieldset/FormFieldset.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../../Status.block';
 
 import * as Stories from './Fieldset.stories';
@@ -31,9 +33,7 @@ If the fields are even more closely related, display them on the same line using
 	alt="Fieldset mockup"
 />
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ## States
 
@@ -46,9 +46,7 @@ A fieldset usually does not carry error state. Its individual fields do.
 	alt="Fieldset mockup with state"
 />
 
-<Canvas>
-	<Story of={Stories.Error} />
-</Canvas>
+<Canvas of={Stories.Error} />
 
 In case of more than one error or a horizontal fieldset, display the errors under each affected field.
 
@@ -57,9 +55,7 @@ In case of more than one error or a horizontal fieldset, display the errors unde
 	alt="Fieldset mockup with errors in two fields"
 />
 
-<Canvas>
-	<Story of={Stories.Errors} />
-</Canvas>
+<Canvas of={Stories.Errors} />
 
 ## Content
 
@@ -96,9 +92,7 @@ The trigger can be any "on / off" interactions available in a form:
 
 Use sparingly as it makes a form harder to predict and understand at a glance.
 
-<Canvas>
-	<Story of={Stories.ConditionalFieldset} />
-</Canvas>
+<Canvas of={Stories.ConditionalFieldset} />
 
 ## Usage
 
diff --git a/packages/design-system/src/stories/form/Form.mdx b/packages/design-system/src/stories/form/Form.mdx
index 8f3af348de1..0f9b4e84de9 100644
--- a/packages/design-system/src/stories/form/Form.mdx
+++ b/packages/design-system/src/stories/form/Form.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Tabs } from '../../';
 import { Status } from '../Status.block';
 
@@ -35,9 +37,7 @@ The `Form` component is a slightly opinionated `<form>` tag with a flex layout a
 	alt="Form mockup"
 />
 
-<Canvas>
-	<Story of={Stories.FormSkeleton} />
-</Canvas>
+<Canvas of={Stories.FormSkeleton} />
 
 ### Field states
 
@@ -73,9 +73,7 @@ The `Form` component is a slightly opinionated `<form>` tag with a flex layout a
 	]}
 />
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ### Error
 
@@ -86,9 +84,7 @@ When an error occurs at a level that is not specific to one field, use `InlineMe
 	alt="Form mockup"
 />
 
-<Canvas>
-	<Story of={Stories.Error} />
-</Canvas>
+<Canvas of={Stories.Error} />
 
 [The InlineMessage docs can be found here.](/docs/messaging-inlinemessage--docs)
 
@@ -103,9 +99,7 @@ Consider using an [Inline message](/?path=/docs/messaging-inlinemessage--docs) w
 	alt="Form mockup"
 />
 
-<Canvas>
-	<Story of={Stories.InlineHelp} />
-</Canvas>
+<Canvas of={Stories.InlineHelp} />
 
 ## Interactions
 
@@ -116,9 +110,7 @@ Consider using an [Inline message](/?path=/docs/messaging-inlinemessage--docs) w
 	alt="Form mockup"
 />
 
-<Canvas>
-	<Story of={Stories.Loading} />
-</Canvas>
+<Canvas of={Stories.Loading} />
 
 ### Data loss message
 
diff --git a/packages/design-system/src/stories/form/InlineEditing.mdx b/packages/design-system/src/stories/form/InlineEditing.mdx
index c17553c1130..94c0fa08d97 100644
--- a/packages/design-system/src/stories/form/InlineEditing.mdx
+++ b/packages/design-system/src/stories/form/InlineEditing.mdx
@@ -1,8 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { InlineEditing } from '../../';
-import { Status } from '../Status.block';
+
 import * as Stories from './InlineEditing.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="inlineEditing" />
@@ -29,9 +30,7 @@ User can perform inline editing by using inline form.
 	alt="Single line InlineEditing with content"
 />
 
-<Canvas>
-	<Story of={Stories.Text} />
-</Canvas>
+<Canvas of={Stories.Text} />
 
 **Empty single line with a placeholder**
 
@@ -40,9 +39,7 @@ User can perform inline editing by using inline form.
 	alt="Single line InlineEditing without initial content"
 />
 
-<Canvas>
-	<Story of={Stories.EmptyTextWithPlaceholder} />
-</Canvas>
+<Canvas of={Stories.EmptyTextWithPlaceholder} />
 
 **Controlled component**
 
@@ -51,9 +48,7 @@ User can perform inline editing by using inline form.
 	alt="Single line InlineEditing with content"
 />
 
-<Canvas>
-	<Story of={Stories.ControlledComponent} />
-</Canvas>
+<Canvas of={Stories.ControlledComponent} />
 
 **Multi lines**
 
@@ -62,9 +57,7 @@ User can perform inline editing by using inline form.
 	alt="Multi lines InlineEditing with initial content"
 />
 
-<Canvas>
-	<Story of={Stories.Textarea} />
-</Canvas>
+<Canvas of={Stories.Textarea} />
 
 ## States
 
@@ -75,9 +68,7 @@ User can perform inline editing by using inline form.
 	alt="Pending state for InlineEditing"
 />
 
-<Canvas>
-	<Story of={Stories.LoadingMode} />
-</Canvas>
+<Canvas of={Stories.LoadingMode} />
 
 ### Error
 
@@ -88,9 +79,7 @@ User can perform inline editing by using inline form.
 
 In this example, async submit will always end up with an error.
 
-<Canvas>
-	<Story of={Stories.InUse} />
-</Canvas>
+<Canvas of={Stories.InUse} />
 
 ## Interactions
 
@@ -129,13 +118,11 @@ Non-regression testing can be performed using:
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Default} />
-	<Story of={Stories.WithEllipsis} />
-	<Story of={Stories.WithTextarea} />
-	<Story of={Stories.LongTextInTextarea} />
-	<Story of={Stories.AsHeading} />
-</Canvas>
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.WithEllipsis} />
+<Canvas of={Stories.WithTextarea} />
+<Canvas of={Stories.LongTextInTextarea} />
+<Canvas of={Stories.AsHeading} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/form/RichRadioButton.mdx b/packages/design-system/src/stories/form/RichRadioButton.mdx
index a088c3633e8..f256fbff9e0 100644
--- a/packages/design-system/src/stories/form/RichRadioButton.mdx
+++ b/packages/design-system/src/stories/form/RichRadioButton.mdx
@@ -1,6 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import { Status } from '../Status.block';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import * as Stories from './RichRadioButton.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="richRadioButton" />
@@ -15,83 +16,57 @@ Selectable card with the same behavior as a radio button with multiple parameter
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.DefaultStory} />
-</Canvas>
+<Canvas of={Stories.DefaultStory} />
 
 ### Rich Radio Button with text and tags
 
-<Canvas>
-	<Story of={Stories.RichRadioButtonWithTags} />
-</Canvas>
+<Canvas of={Stories.RichRadioButtonWithTags} />
 
 ### Rich Radio Button with text, tags and icon
 
-<Canvas>
-	<Story of={Stories.RichRadioButtonWithTagsAndIcon} />
-</Canvas>
+<Canvas of={Stories.RichRadioButtonWithTagsAndIcon} />
 
 ### Rich Radio Button with an illustration
 
-<Canvas>
-	<Story of={Stories.RichRadioButtonWithTagsAndIllustration} />
-</Canvas>
+<Canvas of={Stories.RichRadioButtonWithTagsAndIllustration} />
 
 ### Rich Radio Button disabled
 
-<Canvas>
-	<Story of={Stories.RichRadioButtonDisabled} />
-</Canvas>
+<Canvas of={Stories.RichRadioButtonDisabled} />
 
 ### Rich Radio Button readonly
 
-<Canvas>
-	<Story of={Stories.RichRadioButtonReadOnly} />
-</Canvas>
+<Canvas of={Stories.RichRadioButtonReadOnly} />
 
 ## States
 
 ### Checked
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButton} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButton} />
 
 ### Checked Rich Radio Button with text and tags
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButtonWithTags} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButtonWithTags} />
 
 ### Checked Rich Radio Button with text, tags and icon
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButtonWithTagsAndIcon} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButtonWithTagsAndIcon} />
 
 ### Checked Rich Radio Button with an illustration
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButtonWithTagsAndIllustration} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButtonWithTagsAndIllustration} />
 
 ### Checked Rich Radio Button with an Logo
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButtonWithTagsAndLogo} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButtonWithTagsAndLogo} />
 
 ### Checked Rich Radio Button disabled
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButtonDisabled} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButtonDisabled} />
 
 ### Checked Rich Radio Button readonly
 
-<Canvas>
-	<Story of={Stories.CheckedRichRadioButtonReadOnly} />
-</Canvas>
+<Canvas of={Stories.CheckedRichRadioButtonReadOnly} />
 
 ## Content
 
diff --git a/packages/design-system/src/stories/form/Switch.mdx b/packages/design-system/src/stories/form/Switch.mdx
index c259ef0ec86..695fd98f01b 100644
--- a/packages/design-system/src/stories/form/Switch.mdx
+++ b/packages/design-system/src/stories/form/Switch.mdx
@@ -1,8 +1,9 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import { Status } from '../Status.block';
 
-import { Switch } from '../../';
 import * as Stories from './Switch.stories';
 
 <Meta
@@ -26,9 +27,7 @@ Switches are a quick way to make a selection between two states (or three someti
 
 ## Style
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ## States
 
@@ -61,6 +60,4 @@ Labels for switches should give users a strong indication of what they are selec
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Uncontrolled} />
-</Canvas>
+<Canvas of={Stories.Uncontrolled} />
diff --git a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx
index 8c9e2cbaa4e..1e8c3b1e645 100644
--- a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx
+++ b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx
@@ -1,9 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
 
 import { FigmaImage, Use } from '@talend/storybook-docs';
 
-import { Form, ToggleSwitch } from '../../../';
-
 import * as Stories from './ToggleSwitch.stories';
 
 <Meta of={Stories} />
@@ -28,21 +26,15 @@ ToggleSwitches are a quick way to view and switch between two states or on-off s
 
 ## States
 
-<Canvas>
-	<Story story={Stories.ToggleSwitchStates} />
-</Canvas>
+<Canvas of={Stories.ToggleSwitchStates} />
 
 ### Inline
 
-<Canvas>
-	<Story story={Stories.ToggleSwitchInline} />
-</Canvas>
+<Canvas of={Stories.ToggleSwitchInline} />
 
 ### Long content
 
-<Canvas>
-	<Story story={Stories.ToggleSwitchWithLongLabel} />
-</Canvas>
+<Canvas of={Stories.ToggleSwitchWithLongLabel} />
 
 ## Content
 
@@ -74,15 +66,11 @@ Labels for switches should give users a strong indication of what they are selec
 
 ### Controlled switch
 
-<Canvas>
-	<Story story={Stories.ToggleSwitchControlled} />
-</Canvas>
+<Canvas of={Stories.ToggleSwitchControlled} />
 
 ## Usage
 
-<Canvas>
-	<Story story={Stories.ToggleSwitchReactHooksForm} />
-</Canvas>
+<Canvas of={Stories.ToggleSwitchReactHooksForm} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/icons/About.mdx b/packages/design-system/src/stories/icons/About.mdx
index 62406828338..47b8063dd17 100644
--- a/packages/design-system/src/stories/icons/About.mdx
+++ b/packages/design-system/src/stories/icons/About.mdx
@@ -1,7 +1,7 @@
-import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
-import { StackHorizontal, SizedIcon, Icon } from '../../';
-import * as SizedStories from './SizedIcon.stories';
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
 import * as Stories from './Icon.stories';
+import * as SizedStories from './SizedIcon.stories';
 
 <Meta title="Icons/About" />
 
@@ -25,10 +25,7 @@ Icons are now strictly defined by size.
 
 [Checkout the SizedIcon docs here.](/docs/icons-sizedicon--docs)
 
-<Canvas>
-	<Story of={SizedStories.Example} />
-</Canvas>
-
+<Canvas of={SizedStories.Example} />
 <ArgTypes of={SizedStories.IconXS} />
 
 Calling `<SizedIcon size="XS" name="note-pencil" />` would not compile in TS because `note-pencil` does not exist at this size.
@@ -41,8 +38,6 @@ This is more generic component which is not considered as Icon but more as image
 
 [Checkout the Icon docs here.](/docs/icons-icon--docs)
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
+<Canvas of={Stories.Usage} />
 
 These icons are lawless. Some even have their own colorset. They are impossible to homogenize as part of a design language.
diff --git a/packages/design-system/src/stories/icons/Icon.mdx b/packages/design-system/src/stories/icons/Icon.mdx
index f7ef9a1a78f..8b47f25e6a0 100644
--- a/packages/design-system/src/stories/icons/Icon.mdx
+++ b/packages/design-system/src/stories/icons/Icon.mdx
@@ -1,7 +1,8 @@
-import { ArgTypes, IconItem, Canvas, Meta, Story } from '@storybook/blocks';
-import { IconsProvider, InlineMessageWarning, Icon } from '../../';
-import { Status } from '../Status.block';
+import { Canvas, IconItem, Meta } from '@storybook/blocks';
+
 import * as Stories from './Icon.stories';
+import { Icon } from '../../';
+import { Status } from '../Status.block';
 import { AllIconsDocs } from './Icons';
 
 <Meta of={Stories} />
@@ -11,9 +12,7 @@ import { AllIconsDocs } from './Icons';
 
 This component is generic and can be seens as a Primitive to display SVG, img, remote or not.
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
+<Canvas of={Stories.Usage} />
 
 ## Remote icon
 
diff --git a/packages/design-system/src/stories/icons/SizedIcon.mdx b/packages/design-system/src/stories/icons/SizedIcon.mdx
index 64e8450f0ee..d82a6ddd303 100644
--- a/packages/design-system/src/stories/icons/SizedIcon.mdx
+++ b/packages/design-system/src/stories/icons/SizedIcon.mdx
@@ -1,7 +1,7 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
-import { SizedIcon } from '../../';
-import { Status } from '../Status.block';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import * as Stories from './SizedIcon.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="sizedIcon" />
@@ -24,34 +24,22 @@ You may need to wrap your icon with a `span` node to target it specifically.
 
 #### Size XS
 
-<Canvas>
-	<Story of={Stories.IconXS} />
-</Canvas>
-
+<Canvas of={Stories.IconXS} />
 <Controls of={Stories.IconXS} />
 
 #### Size S
 
-<Canvas>
-	<Story of={Stories.IconS} />
-</Canvas>
-
+<Canvas of={Stories.IconS} />
 <Controls of={Stories.IconS} />
 
 #### Size M
 
-<Canvas>
-	<Story of={Stories.IconM} />
-</Canvas>
-
+<Canvas of={Stories.IconM} />
 <Controls of={Stories.IconM} />
 
 #### Size L
 
-<Canvas>
-	<Story of={Stories.IconL} />
-</Canvas>
-
+<Canvas of={Stories.IconL} />
 <Controls of={Stories.IconL} />
 
 ## States
diff --git a/packages/design-system/src/stories/layout/Card.mdx b/packages/design-system/src/stories/layout/Card.mdx
index 94c27a75a37..3bef2afd8ba 100644
--- a/packages/design-system/src/stories/layout/Card.mdx
+++ b/packages/design-system/src/stories/layout/Card.mdx
@@ -1,9 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import { FigmaImage, FigmaLink, Use } from '@talend/storybook-docs';
+import { Canvas, Meta } from '@storybook/blocks';
 
-import { Card, StackVertical, InlineMessageWarning } from '../../';
-import { Status } from '../Status.block';
 import * as Stories from './Card.stories';
+import { Status } from '../Status.block';
 
 <Meta title="Layout/Card" />
 <Status id="card" />
@@ -26,9 +24,7 @@ WIP
 
 **Default card**
 
-<Canvas>
-	<Story of={Stories.DefaultCard} />
-</Canvas>
+<Canvas of={Stories.DefaultCard} />
 
 ## States
 
diff --git a/packages/design-system/src/stories/layout/Modal.mdx b/packages/design-system/src/stories/layout/Modal.mdx
index 25640dc0c0a..5186746ac94 100644
--- a/packages/design-system/src/stories/layout/Modal.mdx
+++ b/packages/design-system/src/stories/layout/Modal.mdx
@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
-import { FigmaImage, FigmaLink, Use } from '@talend/storybook-docs';
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { FigmaImage } from '@talend/storybook-docs';
 
-import { Modal } from '../../';
 import { Status } from '../Status.block';
 
 import * as Stories from './Modal.stories';
@@ -58,69 +58,47 @@ Transparent layer behind every modal. Clicking it closes the modal by default, b
 
 **No disclosure (controlled state)**
 
-<Canvas>
-	<Story height="5rem" story={Stories.NoDisclosure} />
-</Canvas>
+<Canvas height="5rem" of={Stories.NoDisclosure} />
 
 ## **With disclosure**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithDisclosure} />-
-</Canvas>
+<Canvas height="5rem" of={Stories.WithDisclosure} />-
 
 **With icon**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithIcon} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithIcon} />
 
 **With custom icon**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithCustomIcon} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithCustomIcon} />
 
 **With description**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithDescription} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithDescription} />
 
 **With actions**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithActions} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithActions} />
 
 **With destructive primary action**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithDestructivePrimaryAction} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithDestructivePrimaryAction} />
 
 **With non closing backdrop**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithNonClosingBackdrop} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithNonClosingBackdrop} />
 
 **With overflowing header**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithOverflowingHeader} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithOverflowingHeader} />
 
 **With overflowing content**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithOverflowingContent} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithOverflowingContent} />
 
 **With everything**
 
-<Canvas>
-	<Story height="5rem" story={Stories.WithEverything} />
-</Canvas>
+<Canvas height="5rem" of={Stories.WithEverything} />
 
 ## States
 
diff --git a/packages/design-system/src/stories/layout/Stack.mdx b/packages/design-system/src/stories/layout/Stack.mdx
index 3c0828ecc43..df2f12f76e0 100644
--- a/packages/design-system/src/stories/layout/Stack.mdx
+++ b/packages/design-system/src/stories/layout/Stack.mdx
@@ -1,7 +1,9 @@
-import { Controls, Meta, Story, Canvas } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../Status.block';
+
 import * as Stories from './Stack.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} title="Layout/Stack" />
 <Status id="stack" />
@@ -53,7 +55,7 @@ If you need to override the positional behavior of a child element, use the `Sta
 Simply import the appropriate Stack and start composing your layout.
 
 ```tsx
-import { StackHorizontal, Button } from '../../';
+import { Button, StackHorizontal } from '../../';
 
 function myComponent() {
 	return (
@@ -71,44 +73,30 @@ function myComponent() {
 
 ### Simple StackHorizontal
 
-<Canvas>
-	<Story of={Stories.TestHorizontal} />
-</Canvas>
-
+<Canvas of={Stories.TestHorizontal} />
 <Controls of={Stories.TestHorizontal} />
 
 ### Simple StackHorizontal with complex spacing
 
 Spacing can also be set as an object `{ x: SizeToken, y: SizeToken }` or `{top: SizeToken, left: SizeToken, right: SizeToken, bottom: SizeToken}` like this:
 
-<Canvas>
-	<Story of={Stories.TestHorizontalWithExplicitSpacing} />
-</Canvas>
-
+<Canvas of={Stories.TestHorizontalWithExplicitSpacing} />
 <Controls of={Stories.TestHorizontalWithExplicitSpacing} />
 
 You do need to set all the values for each of these objects when using them.
 
 ### Simple StackVertical
 
-<Canvas>
-	<Story of={Stories.TestVertical} />
-</Canvas>
-
+<Canvas of={Stories.TestVertical} />
 <Controls of={Stories.TestVertical} />
 
 ### Nesting Stacks to compose a layout
 
-<Canvas>
-	<Story of={Stories.StackNesting} />
-</Canvas>
+<Canvas of={Stories.StackNesting} />
 
 ### Using StackItem
 
-<Canvas>
-	<Story of={Stories.StackWithStackItem} />
-</Canvas>
-
+<Canvas of={Stories.StackWithStackItem} />
 <Controls of={Stories.StackWithStackItem} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/messaging/Badge.mdx b/packages/design-system/src/stories/messaging/Badge.mdx
index 2098f0802a8..59c26d27ae1 100644
--- a/packages/design-system/src/stories/messaging/Badge.mdx
+++ b/packages/design-system/src/stories/messaging/Badge.mdx
@@ -1,7 +1,9 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
-import { Status } from '../Status.block';
+
 import * as Stories from './Badge.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="badge" />
@@ -28,27 +30,19 @@ A wonderful Badge
 
 #### Badge
 
-<Canvas isColumn>
-	<Story of={Stories.StoryBadgeValue} />
-</Canvas>
+<Canvas isColumn of={Stories.StoryBadgeValue} />
 
 #### BadgeTag
 
-<Canvas isColumn>
-	<Story of={Stories.StoryBadgeTag} />
-</Canvas>
+<Canvas isColumn of={Stories.StoryBadgeTag} />
 
 #### BadgeDropdown
 
-<Canvas isColumn>
-	<Story of={Stories.StoryBadgeDropdown} />
-</Canvas>
+<Canvas isColumn of={Stories.StoryBadgeDropdown} />
 
 #### BadgePopover
 
-<Canvas isColumn>
-	<Story of={Stories.StoryBadgePopover} />
-</Canvas>
+<Canvas isColumn of={Stories.StoryBadgePopover} />
 
 ## States
 
diff --git a/packages/design-system/src/stories/messaging/InlineMessage.mdx b/packages/design-system/src/stories/messaging/InlineMessage.mdx
index 3341486f933..bc69767d15e 100644
--- a/packages/design-system/src/stories/messaging/InlineMessage.mdx
+++ b/packages/design-system/src/stories/messaging/InlineMessage.mdx
@@ -1,8 +1,10 @@
-import { Controls, Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
+import * as Stories from './InlineMessage.stories';
 import { InlineMessage } from '../../';
 import { Status } from '../Status.block';
-import * as Stories from './InlineMessage.stories';
 
 <Meta of={Stories} />
 <Status id="inlineMessage" />
@@ -30,15 +32,11 @@ The text should adapt to the surrounding layout. Depending on the context, if th
 
 **Default**
 
-<Canvas>
-	<Story of={Stories.DefaultDemo} />
-</Canvas>
+<Canvas of={Stories.DefaultDemo} />
 
 **With background**
 
-<Canvas>
-	<Story of={Stories.BackgroundDemo} />
-</Canvas>
+<Canvas of={Stories.BackgroundDemo} />
 
 ## Interactions
 
@@ -107,9 +105,7 @@ If you need a message to change from one semantic type to another, a prop may be
 
 `<InlineMessage />` is here just for that purpose.
 
-<Canvas>
-	<Story of={Stories.Variant} />
-</Canvas>
+<Canvas of={Stories.Variant} />
 
 It behaves like the standalone components but with a `variant` prop.
 
@@ -119,9 +115,7 @@ It behaves like the standalone components but with a `variant` prop.
 
 If the link you need is not external, chances are you're using a routing library.
 
-<Canvas>
-	<Story of={Stories.WithRouterLink} />
-</Canvas>
+<Canvas of={Stories.WithRouterLink} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/messaging/Message.mdx b/packages/design-system/src/stories/messaging/Message.mdx
index bdcfa17b20a..5a784a2f999 100644
--- a/packages/design-system/src/stories/messaging/Message.mdx
+++ b/packages/design-system/src/stories/messaging/Message.mdx
@@ -1,7 +1,9 @@
-import { Controls, Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
-import { Status } from '../Status.block';
+
 import * as Stories from './Message.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="message" />
@@ -30,15 +32,11 @@ It's still advise to keep the text short and concise.
 
 **Default**
 
-<Canvas>
-	<Story of={Stories.DefaultMessageDemo} />
-</Canvas>
+<Canvas of={Stories.DefaultMessageDemo} />
 
 **With optional props**
 
-<Canvas>
-	<Story of={Stories.WithPropVariation} />
-</Canvas>
+<Canvas of={Stories.WithPropVariation} />
 
 ## Interactions
 
@@ -99,10 +97,7 @@ Main action :
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.MessageInformationTemplateStory} />
-</Canvas>
-
+<Canvas of={Stories.MessageInformationTemplateStory} />
 <Controls of={Stories.MessageInformationTemplateStory} />
 
 # Message Collection
@@ -113,15 +108,11 @@ MessageCollection is used for multiple messages about the same purpose
 
 **Default**
 
-<Canvas>
-	<Story of={Stories.DefaultMessageCollectionDemo} />
-</Canvas>
+<Canvas of={Stories.DefaultMessageCollectionDemo} />
 
 **With optional props**
 
-<Canvas>
-	<Story of={Stories.MessageCollectionWithPropVariation} />
-</Canvas>
+<Canvas of={Stories.MessageCollectionWithPropVariation} />
 
 ## Interactions
 
@@ -181,10 +172,7 @@ Action :
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.MessageCollectionInformationTemplateStory} />
-</Canvas>
-
+<Canvas of={Stories.MessageCollectionInformationTemplateStory} />
 <Controls of={Stories.MessageCollectionInformationTemplateStory} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/messaging/Popover.mdx b/packages/design-system/src/stories/messaging/Popover.mdx
index 0aacb12511c..85f7dd1fb7b 100644
--- a/packages/design-system/src/stories/messaging/Popover.mdx
+++ b/packages/design-system/src/stories/messaging/Popover.mdx
@@ -1,6 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import * as Stories from './Popover.stories';
-import { StackVertical, InlineMessageWarning } from '../../';
+import { InlineMessageWarning, StackVertical } from '../../';
 import { Status } from '../Status.block';
 
 <Meta of={Stories} />
@@ -16,31 +17,21 @@ Popover displays floating informative and actionable content in relation to its
 
 ### Default
 
-<Canvas>
-	<Story height="12rem" story={Stories.DefaultStory} />
-</Canvas>
+<Canvas height="12rem" of={Stories.DefaultStory} />
 
 ### Disable padding in popover contents
 
-<Canvas>
-	<Story height="12rem" story={Stories.WithoutPaddingStory} />
-</Canvas>
+<Canvas height="12rem" of={Stories.WithoutPaddingStory} />
 
 ### Disclosure
 
 You can use any of the design system's "Clickable" or "Form" component as a disclosure.
 
-<Canvas>
-	<Story height="12rem" story={Stories.DisclosureStory} />
-</Canvas>
+<Canvas height="12rem" of={Stories.DisclosureStory} />
 
-<Canvas>
-	<Story height="12rem" story={Stories.InInteractiveComponentStory} />
-</Canvas>
+<Canvas height="12rem" of={Stories.InInteractiveComponentStory} />
 
-<Canvas>
-	<Story height="15rem" story={Stories.FormDisclosureStory} />
-</Canvas>
+<Canvas height="15rem" of={Stories.FormDisclosureStory} />
 
 ## States
 
@@ -62,8 +53,6 @@ Such would be the case when submitting a setting or simply clicking on a "close"
 
 You can do just so by using the "function as children" pattern:
 
-<Canvas>
-	<Story height="12rem" story={Stories.WithFunctionAsChildren} />
-</Canvas>
+<Canvas height="12rem" of={Stories.WithFunctionAsChildren} />
 
 As you can see, the button inside that popover consumes the popover's state and its methods.
diff --git a/packages/design-system/src/stories/messaging/Tag.mdx b/packages/design-system/src/stories/messaging/Tag.mdx
index a732e1930ae..bcc91b4090b 100644
--- a/packages/design-system/src/stories/messaging/Tag.mdx
+++ b/packages/design-system/src/stories/messaging/Tag.mdx
@@ -1,7 +1,7 @@
-import { Controls, Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
 
-import { Tag } from '../../';
 import { Status } from '../Status.block';
 
 import * as Stories from './Tag.stories';
@@ -26,33 +26,27 @@ The Tag component is useful to emphasize information to the user, works best wit
 
 ### Variations
 
-<Canvas>
-	<Story of={Stories.Default} />
-	<Story of={Stories.Information} />
-	<Story of={Stories.Success} />
-	<Story of={Stories.Warning} />
-	<Story of={Stories.Destructive} />
-	<Story of={Stories.Beta} />
-</Canvas>
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.Information} />
+<Canvas of={Stories.Success} />
+<Canvas of={Stories.Warning} />
+<Canvas of={Stories.Destructive} />
+<Canvas of={Stories.Beta} />
 
 Or you can use variant props as well
 
-<Canvas>
-	<Story of={Stories.VariantDefault} />
-	<Story of={Stories.VariantInformation} />
-	<Story of={Stories.VariantSuccess} />
-	<Story of={Stories.VariantWarning} />
-	<Story of={Stories.VariantDestructive} />
-	<Story of={Stories.VariantBeta} />
-</Canvas>
+<Canvas of={Stories.VariantDefault} />
+<Canvas of={Stories.VariantInformation} />
+<Canvas of={Stories.VariantSuccess} />
+<Canvas of={Stories.VariantWarning} />
+<Canvas of={Stories.VariantDestructive} />
+<Canvas of={Stories.VariantBeta} />
 
 ## States
 
 ### Default
 
-<Canvas>
-	<Story of={Stories.Ellipsis} />
-</Canvas>
+<Canvas of={Stories.Ellipsis} />
 
 ## Content
 
@@ -85,8 +79,5 @@ N/A
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas of={Stories.Usage} />
 <Controls of={Stories.Usage} />
diff --git a/packages/design-system/src/stories/messaging/Tooltip.mdx b/packages/design-system/src/stories/messaging/Tooltip.mdx
index 5103942c696..f15d2c1e2af 100644
--- a/packages/design-system/src/stories/messaging/Tooltip.mdx
+++ b/packages/design-system/src/stories/messaging/Tooltip.mdx
@@ -1,4 +1,5 @@
-import { Controls, Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
 
 import { Tooltip } from '../../';
@@ -21,12 +22,10 @@ Tooltips provide helpful, additional content for their paired elements on hover.
 
 <FigmaImage src="https://www.figma.com/file/93AaDV2pC1tK9J1O6IbHho/Tooltips?node-id=895%3A5" />
 
-<Canvas>
-	<Story of={Stories.Top} />
-	<Story of={Stories.Left} />
-	<Story of={Stories.Bottom} />
-	<Story of={Stories.Right} />
-</Canvas>
+<Canvas of={Stories.Top} />
+<Canvas of={Stories.Left} />
+<Canvas of={Stories.Bottom} />
+<Canvas of={Stories.Right} />
 
 ## Content
 
@@ -66,10 +65,7 @@ Otherwise, you’ll just add information pollution to your UI and waste the time
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas of={Stories.Usage} />
 <Controls of={Stories.Usage} />
 
 For more info about Tooltip props, refer to [documentation](https://reakit.io/docs/tooltip/) of Reakit.
diff --git a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx
index 8f878b94341..4647539c22d 100644
--- a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx
+++ b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx
@@ -1,7 +1,9 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
-import { FigmaImage, FigmaLink, Use } from '@talend/storybook-docs';
-import { Status } from '../Status.block';
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { FigmaImage } from '@talend/storybook-docs';
+
 import * as Stories from './Breadcrumbs.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="breadcrumbs" />
@@ -25,17 +27,13 @@ It helps them locate the current page within a larger workflow.
 	src="https://www.figma.com/file/8ifUyNjdZkWBmKKrgfB675/Breadcrumbs?node-id=53%3A435"
 	alt="Breadcrumb in various states"
 />
-<Canvas>
-	<Story of={Stories.Basic} />
-</Canvas>
+<Canvas of={Stories.Basic} />
 
 ### Variations
 
 Breadcrumbs cannot display more than 4 items without collapsing the "crumbs" somewhat. Here's how it behaves above 4 links.
 
-<Canvas>
-	<Story height="15rem" story={Stories.Advanced} />
-</Canvas>
+<Canvas height="15rem" story={Stories.Advanced} />
 
 ## States
 
@@ -45,9 +43,7 @@ The individual items of a `Breadcrumbs` component have a max-width of 320px.
 
 If they do not have enough space to spread that wide, the text-overflow sets in as needed:
 
-<Canvas>
-	<Story of={Stories.FullWidth} />
-</Canvas>
+<Canvas of={Stories.FullWidth} />
 
 ## Interactions
 
@@ -61,9 +57,7 @@ If they do not have enough space to spread that wide, the text-overflow sets in
 
 This enables third-party router links to be used in a breadcrumb.
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
+<Canvas of={Stories.Usage} />
 
 ## Accessibility
 
diff --git a/packages/design-system/src/stories/navigation/Divider.mdx b/packages/design-system/src/stories/navigation/Divider.mdx
index 70a65f8ccbe..244b9da3ef2 100644
--- a/packages/design-system/src/stories/navigation/Divider.mdx
+++ b/packages/design-system/src/stories/navigation/Divider.mdx
@@ -1,5 +1,7 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../Status.block';
 
 import * as Stories from './Divider.stories';
@@ -25,21 +27,15 @@ A divider that separates and distinguishes sections of content or groups of menu
 	alt="Divider style"
 />
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 It can be vertically oriented
 
-<Canvas>
-	<Story of={Stories.Horizontal} />
-</Canvas>
+<Canvas of={Stories.Horizontal} />
 
 or horizontally oriented by default
 
-<Canvas>
-	<Story of={Stories.Vertical} />
-</Canvas>
+<Canvas of={Stories.Vertical} />
 
 ## States
 
diff --git a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx
index 41961bb314d..e3aef347616 100644
--- a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx
+++ b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx
@@ -1,7 +1,7 @@
-import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks';
-import { FigmaImage, FigmaIframe } from '@talend/storybook-docs';
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { FigmaIframe, FigmaImage } from '@talend/storybook-docs';
 
-import { FloatingDrawer, StackVertical, InlineMessageWarning } from '../../';
 import { Status } from '../Status.block';
 
 import * as Stories from './FloatingDrawer.stories';
@@ -31,17 +31,11 @@ It aims to display extra information while keeping the navigation enabled on the
 
 ### Variations
 
-<Canvas withSource="none">
-	<Story of={Stories.Simple} />
-</Canvas>
+<Canvas sourceState="none" of={Stories.Simple} />
 
-<Canvas withSource="none">
-	<Story of={Stories.WithDisclosure} />
-</Canvas>
+<Canvas sourceState="none" of={Stories.WithDisclosure} />
 
-<Canvas withSource="none">
-	<Story of={Stories.WithControlledVisibility} />
-</Canvas>
+<Canvas sourceState="none" of={Stories.WithControlledVisibility} />
 
 ## States
 
@@ -69,6 +63,4 @@ Also `aria-label` is required for screen readers.
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
+<Canvas of={Stories.Usage} />
diff --git a/packages/design-system/src/stories/navigation/Stepper.Step.mdx b/packages/design-system/src/stories/navigation/Stepper.Step.mdx
index 92476356d3a..84b1af98c14 100644
--- a/packages/design-system/src/stories/navigation/Stepper.Step.mdx
+++ b/packages/design-system/src/stories/navigation/Stepper.Step.mdx
@@ -1,5 +1,7 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import { Status } from '../Status.block';
 
 import * as Stories from './Stepper.Step.stories';
@@ -27,17 +29,13 @@ Steps are the main elements for the stepper.
 	alt="states image for the steps"
 />
 
-<Canvas>
-	<Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ### Sizes
 
 The max-width for a step is 20rem, if the label is longer we display an ellipsis.
 
-<Canvas>
-	<Story of={Stories.Overflow} />
-</Canvas>
+<Canvas of={Stories.Overflow} />
 
 ## States
 
@@ -49,10 +47,7 @@ N/C
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage} />
-</Canvas>
-
+<Canvas of={Stories.Usage} />
 <Controls of={Stories.Usage} />
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/navigation/Stepper.mdx b/packages/design-system/src/stories/navigation/Stepper.mdx
index 723614d6662..c0990b2d8db 100644
--- a/packages/design-system/src/stories/navigation/Stepper.mdx
+++ b/packages/design-system/src/stories/navigation/Stepper.mdx
@@ -1,5 +1,7 @@
-import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
+
 import { Stepper } from '../../';
 import { Status } from '../Status.block';
 
@@ -38,9 +40,7 @@ Consider using a vertical stepper when there are workflows greater than 3 steps.
 	alt="Mockup of a vertical stepper"
 />
 
-<Canvas>
-	<Story of={Stories.Vertical} />
-</Canvas>
+<Canvas of={Stories.Vertical} />
 
 **Horizontal**
 
@@ -53,9 +53,7 @@ A horizontal stepper should not have more than 3 steps.
 	alt="Mockup of a horizontal stepper"
 />
 
-<Canvas>
-	<Story of={Stories.Horizontal} />
-</Canvas>
+<Canvas of={Stories.Horizontal} />
 
 ## States
 
@@ -63,9 +61,7 @@ A horizontal stepper should not have more than 3 steps.
 
 The space dedicated to step is limited. No reflow strategy has been put in place, so text overflow is truncated with an ellipsis.
 
-<Canvas>
-	<Story of={Stories.Overflows} />
-</Canvas>
+<Canvas of={Stories.Overflows} />
 
 ## Content
 
@@ -122,9 +118,7 @@ In case of an error in the current step, please inform the user by using an inli
 
 ## Usage
 
-<Canvas>
-	<Story of={Stories.Usage}></Story>
-</Canvas>
+<Canvas of={Stories.Usage} />
 
 <Controls of={Stories.Usage} exclude={['loading']} />
 
diff --git a/packages/design-system/src/stories/navigation/Tabs.mdx b/packages/design-system/src/stories/navigation/Tabs.mdx
index 68cc858ce18..9c15110c706 100644
--- a/packages/design-system/src/stories/navigation/Tabs.mdx
+++ b/packages/design-system/src/stories/navigation/Tabs.mdx
@@ -1,8 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
+
 import { FigmaImage, Use } from '@talend/storybook-docs';
-import { Tabs, InlineMessageWarning, StackVertical } from '../../';
-import { Status } from '../Status.block';
+
 import * as Stories from './Tabs.stories';
+import { Status } from '../Status.block';
 
 <Meta of={Stories} />
 <Status id="tabs" />
@@ -25,9 +26,7 @@ Tabs are used for switching between different views, functional aspects or categ
 	alt="image for tabs"
 />
 
-<Canvas>
-	<Story of={Stories.Styles} />
-</Canvas>
+<Canvas of={Stories.Styles} />
 
 ### Variations
 
@@ -51,9 +50,7 @@ Only use the large size when tabs act as a second level of navigation on page-wi
 
 Icons can be used with tabs to help users differentiate among them. Tabs with icons has the same behaviours.
 
-<Canvas>
-	<Story of={Stories.TabsWithIcon} />
-</Canvas>
+<Canvas of={Stories.TabsWithIcon} />
 
 #### Tabs with tags
 
@@ -68,9 +65,7 @@ The default max value of an item is 999. When the value to display is greater th
 
 Mouse over the label will display the exact number item.
 
-<Canvas>
-	<Story of={Stories.TabsWithTag} />
-</Canvas>
+<Canvas of={Stories.TabsWithTag} />
 
 ## States
 
@@ -80,9 +75,7 @@ Please display a tooltip on hover that contains the full name.
 
 Max width item: 22rem (token: $coral-sizing-xxl).
 
-<Canvas>
-	<Story of={Stories.TabsWithLongTitles} />
-</Canvas>
+<Canvas of={Stories.TabsWithLongTitles} />
 
 ## Content
 
@@ -117,6 +110,4 @@ NA
 
 You may need to set a default opened tab from the outside. You can achive it like this:
 
-<Canvas>
-	<Story of={Stories.TabStandaloneControlled} />
-</Canvas>
+<Canvas of={Stories.TabStandaloneControlled} />
diff --git a/packages/design-tokens/src/index.scss b/packages/design-tokens/src/index.scss
index ff2ce612a0e..171acf2b806 100644
--- a/packages/design-tokens/src/index.scss
+++ b/packages/design-tokens/src/index.scss
@@ -1,2 +1,3 @@
 @use './light/index' as light;
 @use './dark/index' as dark;
+@use './qlik-light/index' as qlikLight;
diff --git a/packages/design-tokens/src/index.umd.ts b/packages/design-tokens/src/index.umd.ts
index 06b839201a7..f83095ae663 100644
--- a/packages/design-tokens/src/index.umd.ts
+++ b/packages/design-tokens/src/index.umd.ts
@@ -1,4 +1,5 @@
-import './index.scss';
 import tokens from '.';
 
+import './index.scss';
+
 export default tokens;
diff --git a/packages/design-tokens/src/qlik-light/_index.scss b/packages/design-tokens/src/qlik-light/_index.scss
new file mode 100644
index 00000000000..588c8f9abbb
--- /dev/null
+++ b/packages/design-tokens/src/qlik-light/_index.scss
@@ -0,0 +1,356 @@
+// stylelint-disable scss/operator-no-unspaced
+[data-theme='qlik-light'] {
+	--coral-color-neutral-text: hsla(0, 0%, 25%, 1);
+	--coral-color-neutral-text-weak: hsla(0, 0%, 0%, 0.55);
+	--coral-color-neutral-text-disabled: hsla(0, 0%, 0%, 0.3);
+	--coral-color-neutral-text-inverted: hsla(0, 0%, 100%, 1);
+	--coral-color-neutral-background: hsla(0, 0%, 100%, 1);
+	--coral-color-neutral-background-medium: hsla(0, 0%, 98%, 1);
+	--coral-color-neutral-background-strong: hsla(0, 0%, 95%, 1);
+	--coral-color-neutral-background-disabled: hsla(0, 0%, 65%, 1);
+	--coral-color-neutral-border: hsla(0, 0%, 55%, 1);
+	--coral-color-neutral-border-weak: hsla(0, 0%, 85%, 1);
+	--coral-color-neutral-border-hover: hsla(0, 0%, 35%, 1);
+	--coral-color-accent-text-weak: white;
+	--coral-color-accent-text-weak-hover: hsla(138, 56%, 92%, 1);
+	--coral-color-accent-text-weak-active: hsla(135, 48%, 84%, 1);
+	--coral-color-accent-text: hsla(147, 100%, 26%, 1);
+	--coral-color-accent-text-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-accent-text-active: hsla(144, 78%, 16%, 1);
+	--coral-color-accent-background: hsla(138, 56%, 92%, 1);
+	--coral-color-accent-background-hover: hsla(135, 48%, 84%, 1);
+	--coral-color-accent-background-active: hsla(136, 47%, 74%, 1);
+	--coral-color-accent-background-weak: white;
+	--coral-color-accent-background-weak-hover: hsla(138, 56%, 92%, 1);
+	--coral-color-accent-background-weak-active: hsla(135, 48%, 84%, 1);
+	--coral-color-accent-background-strong: hsla(147, 100%, 26%, 1);
+	--coral-color-accent-background-strong-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-accent-background-strong-active: hsla(144, 78%, 16%, 1);
+	--coral-color-accent-border-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-accent-border-active: hsla(144, 78%, 16%, 1);
+	--coral-color-danger-text-weak: white;
+	--coral-color-danger-text-weak-hover: hsla(346, 85%, 92%, 1);
+	--coral-color-danger-text-weak-active: hsla(345, 87%, 85%, 1);
+	--coral-color-danger-text: hsla(336, 100%, 34%, 1);
+	--coral-color-danger-text-hover: hsla(332, 100%, 27%, 1);
+	--coral-color-danger-text-active: hsla(332, 100%, 18%, 1);
+	--coral-color-danger-background: hsla(346, 85%, 92%, 1);
+	--coral-color-danger-background-hover: hsla(345, 87%, 85%, 1);
+	--coral-color-danger-background-active: hsla(346, 86%, 75%, 1);
+	--coral-color-danger-background-weak: white;
+	--coral-color-danger-background-weak-hover: hsla(346, 85%, 92%, 1);
+	--coral-color-danger-background-weak-active: hsla(345, 87%, 85%, 1);
+	--coral-color-success-text-weak: white;
+	--coral-color-success-text-weak-hover: hsla(138, 56%, 92%, 1);
+	--coral-color-success-text-weak-active: hsla(135, 48%, 84%, 1);
+	--coral-color-success-text: hsla(147, 100%, 26%, 1);
+	--coral-color-success-text-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-success-text-active: hsla(144, 78%, 16%, 1);
+	--coral-color-success-background: hsla(138, 56%, 92%, 1);
+	--coral-color-danger-background-strong: hsla(336, 100%, 34%, 1);
+	--coral-color-danger-background-strong-hover: hsla(332, 100%, 27%, 1);
+	--coral-color-danger-background-strong-active: hsla(332, 100%, 18%, 1);
+	--coral-color-danger-border: hsla(332, 100%, 27%, 1);
+	--coral-color-success-background-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-danger-border-hover: hsla(332, 100%, 27%, 1);
+	--coral-color-success-background-active: hsla(136, 47%, 74%, 1);
+	--coral-color-danger-border-active: hsla(332, 100%, 18%, 1);
+	--coral-color-success-background-weak: white;
+	--coral-color-success-background-weak-hover: hsla(138, 56%, 92%, 1);
+	--coral-color-success-background-weak-active: hsla(135, 48%, 84%, 1);
+	--coral-color-success-background-strong: hsla(147, 100%, 26%, 1);
+	--coral-color-success-background-strong-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-success-background-strong-active: hsla(144, 78%, 16%, 1);
+	--coral-color-warning-text-weak: white;
+	--coral-color-warning-text-weak-hover: hsla(35, 100%, 88%, 1);
+	--coral-color-warning-text-weak-active: hsla(36, 100%, 75%, 1);
+	--coral-color-success-border: hsla(144, 78%, 23%, 1);
+	--coral-color-warning-text: hsla(18, 100%, 37%, 1);
+	--coral-color-warning-text-hover: hsla(14, 100%, 28%, 1);
+	--coral-color-warning-text-active: hsla(11, 100%, 19%, 1);
+	--coral-color-warning-background: hsla(35, 100%, 88%, 1);
+	--coral-color-success-border-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-warning-background-hover: hsla(36, 100%, 75%, 1);
+	--coral-color-success-border-active: hsla(144, 78%, 16%, 1);
+	--coral-color-warning-background-active: hsla(36, 100%, 65%, 1);
+	--coral-color-warning-background-weak: white;
+	--coral-color-assistive-text: white;
+	--coral-color-warning-background-weak-hover: hsla(35, 100%, 88%, 1);
+	--coral-color-warning-background-weak-active: hsla(36, 100%, 75%, 1);
+	--coral-color-assistive-background: hsla(210, 62%, 5%, 1);
+	--coral-color-warning-background-strong: hsla(21, 100%, 45%, 1);
+	--coral-color-warning-background-strong-hover: hsla(14, 100%, 28%, 1);
+	--coral-color-warning-background-strong-active: hsla(11, 100%, 19%, 1);
+	--coral-color-warning-border: hsla(14, 100%, 28%, 1);
+	--coral-color-assistive-border: hsla(0, 0%, 47%, 1);
+	--coral-color-warning-border-hover: hsla(14, 100%, 28%, 1);
+	--coral-color-warning-border-active: hsla(11, 100%, 19%, 1);
+	--coral-color-branding-brand: hsla(144, 78%, 37%, 1);
+	--coral-color-neutral-border-disabled: hsla(0, 0%, 65%, 1);
+	--coral-color-neutral-border-weak-hover: hsla(0, 0%, 70%, 1);
+	--coral-color-assistive-border-focus: hsla(208, 98%, 43%, 1);
+	--coral-color-accent-text-strong: hsla(144, 78%, 16%, 1);
+	--coral-color-accent-text-strong-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-accent-text-strong-active: hsla(144, 78%, 16%, 1);
+	--coral-color-danger-text-strong: hsla(332, 100%, 18%, 1);
+	--coral-color-danger-text-strong-hover: hsla(332, 100%, 27%, 1);
+	--coral-color-danger-text-strong-active: hsla(332, 100%, 18%, 1);
+	--coral-color-success-text-strong: hsla(144, 78%, 16%, 1);
+	--coral-color-success-text-strong-hover: hsla(144, 78%, 23%, 1);
+	--coral-color-success-text-strong-active: hsla(144, 78%, 16%, 1);
+	--coral-color-warning-text-strong: hsla(11, 100%, 19%, 1);
+	--coral-color-warning-text-strong-hover: hsla(14, 100%, 28%, 1);
+	--coral-color-warning-text-strong-active: hsla(11, 100%, 19%, 1);
+	--coral-color-beta-text: hsla(280, 57%, 49%, 1);
+	--coral-color-beta-text-hover: hsla(281, 58%, 39%, 1);
+	--coral-color-beta-text-active: hsla(281, 58%, 29%, 1);
+	--coral-color-beta-icon: hsla(280, 80%, 54%, 1);
+	--coral-color-beta-icon-hover: hsla(280, 80%, 44%, 1);
+	--coral-color-beta-icon-active: hsla(280, 80%, 34%, 1);
+	--coral-color-beta-text-weak: white;
+	--coral-color-beta-text-weak-hover: hsla(280, 56%, 83%, 1);
+	--coral-color-beta-text-weak-active: hsla(280, 57%, 73%, 1);
+	--coral-color-beta-text-strong: hsla(281, 58%, 29%, 1);
+	--coral-color-beta-text-strong-hover: hsla(282, 58%, 19%, 1);
+	--coral-color-beta-text-strong-active: hsla(282, 57%, 9%, 1);
+	--coral-color-beta-background: hsla(279, 57%, 90%, 1);
+	--coral-color-beta-background-hover: hsla(279, 57%, 81%, 1);
+	--coral-color-beta-background-active: hsla(279, 57%, 71%, 1);
+	--coral-color-beta-background-weak: white;
+	--coral-color-beta-background-weak-hover: hsla(279, 57%, 90%, 1);
+	--coral-color-beta-background-weak-active: hsla(279, 57%, 80%, 1);
+	--coral-color-beta-background-strong: hsla(281, 58%, 29%, 1);
+	--coral-color-beta-background-strong-hover: hsla(282, 58%, 19%, 1);
+	--coral-color-beta-background-strong-active: hsla(282, 57%, 9%, 1);
+	--coral-color-beta-border: hsla(281, 58%, 29%, 1);
+	--coral-color-beta-border-hover: hsla(282, 58%, 19%, 1);
+	--coral-color-beta-border-active: hsla(282, 57%, 9%, 1);
+	--coral-color-neutral-border-strong: hsla(0, 0%, 25%, 1);
+	--coral-color-neutral-border-strong-hover: hsla(0, 0%, 15%, 1);
+	--coral-color-neutral-icon-inverted: white;
+	--coral-color-neutral-icon: hsla(0, 0%, 25%, 1);
+	--coral-color-neutral-icon-weak: hsla(0, 0%, 55%, 1);
+	--coral-color-accent-icon: hsla(144, 78%, 37%, 1);
+	--coral-color-accent-icon-hover: hsla(147, 100%, 26%, 1);
+	--coral-color-accent-icon-active: hsla(144, 78%, 16%, 1);
+	--coral-color-danger-icon: hsla(339, 100%, 42%, 1);
+	--coral-color-danger-icon-hover: hsla(336, 100%, 34%, 1);
+	--coral-color-danger-icon-active: hsla(332, 100%, 18%, 1);
+	--coral-color-success-icon: hsla(144, 78%, 37%, 1);
+	--coral-color-success-icon-hover: hsla(147, 100%, 26%, 1);
+	--coral-color-success-icon-active: hsla(144, 78%, 16%, 1);
+	--coral-color-warning-icon: hsla(27, 100%, 47%, 1);
+	--coral-color-warning-icon-hover: hsla(18, 100%, 37%, 1);
+	--coral-color-warning-icon-active: hsla(11, 100%, 19%, 1);
+	--coral-color-charts-neutral: hsla(0, 0%, 22%, 1);
+	--coral-color-charts-neutral-weak: hsla(0, 0%, 83%, 1);
+	--coral-color-charts-neutral-strong: hsla(0, 0%, 12%, 1);
+	--coral-color-charts-neutral-hover: hsla(0, 0%, 12%, 1);
+	--coral-color-charts-success: hsla(148, 87%, 40%, 1);
+	--coral-color-charts-success-weak: hsla(130, 52%, 91%, 1);
+	--coral-color-charts-success-strong: hsla(139, 50%, 22%, 1);
+	--coral-color-charts-success-hover: hsla(139, 50%, 22%, 1);
+	--coral-color-charts-danger: hsla(4, 89%, 49%, 1);
+	--coral-color-charts-danger-weak: hsla(359, 69%, 73%, 1);
+	--coral-color-charts-danger-strong: hsla(359, 62%, 43%, 1);
+	--coral-color-charts-danger-hover: hsla(359, 62%, 43%, 1);
+	--coral-color-charts-warning: hsla(32, 100%, 56%, 1);
+	--coral-color-charts-warning-weak: hsla(22, 88%, 84%, 1);
+	--coral-color-charts-warning-strong: hsla(22, 75%, 42%, 1);
+	--coral-color-charts-warning-hover: hsla(22, 75%, 42%, 1);
+	--coral-color-charts-default: hsla(216, 82%, 48%, 1);
+	--coral-color-charts-default-weak: hsla(204, 59%, 73%, 1);
+	--coral-color-charts-default-strong: hsla(204, 92%, 29%, 1);
+	--coral-color-charts-default-hover: hsla(204, 92%, 29%, 1);
+	--coral-color-charts-color-00: hsla(48, 100%, 50%, 1);
+	--coral-color-charts-color-00-weak: hsla(51, 91%, 82%, 1);
+	--coral-color-charts-color-00-strong: hsla(48, 82%, 45%, 1);
+	--coral-color-charts-color-00-hover: hsla(48, 82%, 45%, 1);
+	--coral-color-charts-color-01: hsla(216, 82%, 48%, 1);
+	--coral-color-charts-color-01-weak: hsla(204, 59%, 73%, 1);
+	--coral-color-charts-color-01-strong: hsla(204, 92%, 29%, 1);
+	--coral-color-charts-color-01-hover: hsla(204, 92%, 29%, 1);
+	--coral-color-charts-color-02: hsla(194, 92%, 50%, 1);
+	--coral-color-charts-color-02-weak: hsla(194, 91%, 91%, 1);
+	--coral-color-charts-color-02-strong: hsla(194, 93%, 32%, 1);
+	--coral-color-charts-color-02-hover: hsla(194, 93%, 32%, 1);
+	--coral-color-charts-color-03: hsla(140, 39%, 79%, 1);
+	--coral-color-charts-color-03-weak: hsla(138, 40%, 92%, 1);
+	--coral-color-charts-color-03-strong: hsla(139, 11%, 35%, 1);
+	--coral-color-charts-color-03-hover: hsla(139, 11%, 35%, 1);
+	--coral-color-charts-color-04: hsla(148, 87%, 40%, 1);
+	--coral-color-charts-color-04-weak: hsla(130, 52%, 91%, 1);
+	--coral-color-charts-color-04-strong: hsla(139, 50%, 22%, 1);
+	--coral-color-charts-color-04-hover: hsla(139, 50%, 22%, 1);
+	--coral-color-charts-color-05: hsla(324, 68%, 71%, 1);
+	--coral-color-charts-color-05-weak: hsla(323, 69%, 95%, 1);
+	--coral-color-charts-color-05-strong: hsla(324, 28%, 49%, 1);
+	--coral-color-charts-color-05-hover: hsla(324, 28%, 49%, 1);
+	--coral-color-charts-color-06: hsla(280, 75%, 58%, 1);
+	--coral-color-charts-color-06-weak: hsla(279, 77%, 88%, 1);
+	--coral-color-charts-color-06-strong: hsla(280, 54%, 36%, 1);
+	--coral-color-charts-color-06-hover: hsla(280, 54%, 36%, 1);
+	--coral-color-charts-color-07: hsla(4, 89%, 49%, 1);
+	--coral-color-charts-color-07-weak: hsla(359, 69%, 73%, 1);
+	--coral-color-charts-color-07-strong: hsla(359, 62%, 43%, 1);
+	--coral-color-charts-color-07-hover: hsla(359, 62%, 43%, 1);
+	--coral-color-charts-color-08: hsla(22, 88%, 54%, 1);
+	--coral-color-charts-color-08-weak: hsla(22, 88%, 84%, 1);
+	--coral-color-charts-color-08-strong: hsla(22, 75%, 42%, 1);
+	--coral-color-charts-color-08-hover: hsla(22, 75%, 42%, 1);
+	--coral-color-charts-color-09: hsla(34, 34%, 45%, 1);
+	--coral-color-charts-color-09-weak: hsla(35, 28%, 82%, 1);
+	--coral-color-charts-color-09-strong: hsla(35, 34%, 27%, 1);
+	--coral-color-charts-color-09-hover: hsla(35, 34%, 27%, 1);
+	--coral-color-accent-border: hsla(144, 78%, 23%, 1);
+	--coral-color-charts-default-text: hsla(205, 87%, 94%, 1);
+	--coral-color-charts-default-text-strong: hsla(205, 93%, 22%, 1);
+	--coral-color-charts-default-text-weak: hsla(207, 93%, 94%, 1);
+	--coral-color-charts-color-09-text: hsla(36, 36%, 5%, 1);
+	--coral-color-charts-color-09-text-strong: hsla(36, 36%, 5%, 1);
+	--coral-color-charts-color-09-text-weak: hsla(35, 28%, 82%, 1);
+	--coral-color-neutral-background-heavy: hsla(0, 0%, 78%, 1);
+	--coral-color-illustration-color-01: hsla(211, 62%, 26%, 1);
+	--coral-color-illustration-color-02: hsla(211, 43%, 47%, 1);
+	--coral-color-illustration-color-03: hsla(201, 31%, 85%, 1);
+	--coral-color-illustration-color-05: hsla(359, 82%, 81%, 1);
+	--coral-color-illustration-color-04: hsla(359, 100%, 72%, 1);
+	--coral-color-illustration-color-06: hsla(358, 100%, 93%, 1);
+	--coral-color-illustration-skintone-01: hsla(20, 91%, 83%, 1);
+	--coral-color-illustration-skintone-02: hsla(21, 34%, 55%, 1);
+	--coral-color-illustration-skintone-03: hsla(17, 33%, 28%, 1);
+	--coral-color-illustration-shadow: hsla(0, 0%, 0%, 0.1);
+	--coral-color-illustration-color-07: hsla(192, 33%, 97%, 1);
+	--coral-color-illustration-color-08: hsla(211, 23%, 74%, 1);
+	--coral-color-illustration-color-09: hsla(245, 10%, 23%, 1);
+	--coral-color-accent-background-selected: hsla(138, 56%, 92%, 1);
+	--coral-color-info-text: hsla(215, 100%, 34%, 1);
+	--coral-color-info-text-hover: hsla(216, 100%, 28%, 1);
+	--coral-color-info-text-active: hsla(215, 100%, 21%, 1);
+	--coral-color-info-text-weak: white;
+	--coral-color-info-text-weak-hover: hsla(205, 80%, 92%, 1);
+	--coral-color-info-text-weak-active: hsla(208, 84%, 85%, 1);
+	--coral-color-info-text-strong: hsla(215, 100%, 21%, 1);
+	--coral-color-info-text-strong-hover: hsla(216, 100%, 28%, 1);
+	--coral-color-info-text-strong-active: hsla(215, 100%, 21%, 1);
+	--coral-color-info-background-hover: hsla(208, 84%, 85%, 1);
+	--coral-color-info-background-active: hsla(207, 84%, 75%, 1);
+	--coral-color-info-background-weak: white;
+	--coral-color-info-background-weak-hover: hsla(205, 80%, 92%, 1);
+	--coral-color-info-background-weak-active: hsla(208, 84%, 85%, 1);
+	--coral-color-info-background-strong: hsla(210, 100%, 36%, 1);
+	--coral-color-info-background-strong-hover: hsla(216, 100%, 28%, 1);
+	--coral-color-info-background-strong-active: hsla(215, 100%, 21%, 1);
+	--coral-color-info-border: hsla(216, 100%, 28%, 1);
+	--coral-color-info-border-hover: hsla(216, 100%, 28%, 1);
+	--coral-color-info-border-active: hsla(215, 100%, 21%, 1);
+	--coral-color-info-icon: hsla(208, 98%, 43%, 1);
+	--coral-color-info-icon-hover: hsla(215, 100%, 34%, 1);
+	--coral-color-info-icon-active: hsla(215, 100%, 21%, 1);
+	--coral-color-brand-text: hsla(0, 0%, 25%, 1);
+	--coral-color-brand-text-hover: hsla(0, 0%, 17%, 1);
+	--coral-color-brand-text-active: hsla(0, 0%, 9%, 1);
+	--coral-color-brand-text-inverted: hsla(0, 0%, 25%, 1);
+	--coral-color-brand-text-inverted-hover: hsla(0, 0%, 17%, 1);
+	--coral-color-brand-text-inverted-active: hsla(0, 0%, 9%, 1);
+	--coral-color-brand-text-selected: hsla(0, 0%, 13%, 1);
+	--coral-color-brand-background-weak: hsla(0, 0%, 100%, 1);
+	--coral-color-brand-background-weak-hover: hsla(0, 0%, 97%, 1);
+	--coral-color-brand-background-weak-active: hsla(0, 0%, 97%, 1);
+	--coral-color-brand-background-selected: hsla(0, 0%, 95%, 1);
+	--coral-color-brand-background-inverted: hsla(0, 0%, 98%, 1);
+	--coral-color-brand-background-inverted-hover: hsla(0, 0%, 86%, 1);
+	--coral-color-brand-background-inverted-active: hsla(0, 0%, 86%, 1);
+	--coral-color-brand-border: hsla(0, 0%, 25%, 1);
+	--coral-color-brand-border-hover: hsla(0, 0%, 25%, 1);
+	--coral-color-brand-border-active: hsla(0, 0%, 25%, 1);
+	--coral-color-info-background: hsla(205, 80%, 92%, 1);
+	--coral-color-brand-icon: hsla(0, 0%, 25%, 1);
+	--coral-color-brand-icon-hover: hsla(0, 0%, 17%, 1);
+	--coral-color-brand-icon-active: hsla(0, 0%, 9%, 1);
+	--coral-color-brand-icon-inverted: hsla(0, 0%, 25%, 1);
+	--coral-color-brand-icon-inverted-hover: hsla(0, 0%, 17%, 1);
+	--coral-color-brand-icon-inverted-active: hsla(0, 0%, 9%, 1);
+	--coral-color-brand-icon-selected: hsla(0, 0%, 13%, 1);
+	--coral-color-branding-background: hsla(0, 0%, 100%, 1);
+	--coral-color-branding-navigation: hsla(0, 0%, 90%, 1);
+	--coral-color-brand-background: hsla(0, 0%, 100%, 1);
+	--coral-spacing-xxs: 0.4rem;
+	--coral-spacing-xs: 0.8rem;
+	--coral-spacing-s: 1.2rem;
+	--coral-spacing-m: 1.6rem;
+	--coral-spacing-l: 2.8rem;
+	--coral-spacing-xl: 3.6rem;
+	--coral-sizing-minimal: 1.2rem;
+	--coral-sizing-xxxs: 1.6rem;
+	--coral-sizing-xxs: 2rem;
+	--coral-sizing-xs: 2.4rem;
+	--coral-sizing-s: 2.8rem;
+	--coral-sizing-m: 3.6rem;
+	--coral-sizing-l: 4rem;
+	--coral-sizing-xxxl: 22rem;
+	--coral-sizing-maximal: 32rem;
+	--coral-elevation-shadow-neutral-m: 0 0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.15);
+	--coral-elevation-shadow-accent: 0 0.1rem 0.1rem 0 hsla(147, 100%, 26%, 0.25);
+	--coral-elevation-shadow-success: 0 0.1rem 0.1rem 0 hsla(147, 100%, 26%, 0.25);
+	--coral-elevation-shadow-danger: 0 0.1rem 0.1rem 0 hsla(336, 100%, 34%, 0.25);
+	--coral-elevation-shadow-warning: 0 0.1rem 0.1rem 0 hsla(21, 100%, 45%, 0.25);
+	--coral-elevation-shadow-beta: 0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.25);
+	--coral-elevation-shadow-neutral-inverted-m: 0 -0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.15);
+	--coral-elevation-shadow-neutral-inverted-l: 0 -0.4rem 1rem 0 hsla(0, 0%, 0%, 0.15);
+	--coral-elevation-shadow-neutral-l: 0 0.4rem 1rem 0 hsla(0, 0%, 0%, 0.15);
+	--coral-elevation-shadow-neutral-s: 0 0.1rem 0.1rem 0 hsla(0, 0%, 0%, 0.15);
+	--coral-elevation-shadow-neutral-inverted-s: 0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.15);
+	--coral-elevation-shadow-info: 0 0.1rem 0.1rem 0 hsla(210, 100%, 36%, 0.25);
+	--coral-heading-l: 600 1.8rem/140% 'Source Sans Pro';
+	--coral-paragraph-m: 400 1.4rem/140% 'Source Sans Pro';
+	--coral-paragraph-m-bold: 600 1.4rem/140% 'Source Sans Pro';
+	--coral-paragraph-s: 400 1.2rem/140% 'Source Sans Pro';
+	--coral-paragraph-s-bold: 600 1.2rem/140% 'Source Sans Pro';
+	--coral-heading-m: 600 1.6rem/140% 'Source Sans Pro';
+	--coral-heading-s: 600 1.4rem/140% 'Source Sans Pro';
+	--coral-data-m: 400 1.4rem/140% 'Inconsolata';
+	--coral-data-m-bold: 700 1.4rem/140% 'Inconsolata';
+	--coral-link-m-underlined: 600 1.4rem/140% 'Source Sans Pro';
+	--coral-link-m: 600 1.4rem/140% 'Source Sans Pro';
+	--coral-data-xl: 400 2.4rem/140% 'Inconsolata';
+	--coral-link-s: 600 1.2rem/140% 'Source Sans Pro';
+	--coral-link-s-underlined: 600 1.2rem/140% 'Source Sans Pro';
+	--coral-radius-m: 0.8rem;
+	--coral-radius-l: 1.6rem;
+	--coral-radius-round: 9999.9rem;
+	--coral-radius-s: 0.4rem;
+	--coral-border-s-solid: 1px solid;
+	--coral-border-m-solid: 2px solid;
+	--coral-border-s-dashed: 1px dashed;
+	--coral-border-m-dashed: 2px dashed;
+	--coral-opacity-l: 0.2;
+	--coral-opacity-m: 0.4;
+	--coral-opacity-s: 0.6;
+	--coral-breakpoint-s: 40em;
+	--coral-breakpoint-m: 48em;
+	--coral-breakpoint-l: 64em;
+	--coral-breakpoint-xl: 80em;
+	--coral-branding-logo: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPGc+CiAgICA8cGF0aCBjbGFzcz0idGktYmFja2dyb3VuZCIgIGZpbGw9IiMxNUFBNTEiIGQ9Ik0xNiw4IEMxNiwxMi40MTg4NzM3IDEyLjQxODI2NDgsMTYuMDAwNjA4OCA4LDE2LjAwMDYwODggQzMuNTgxNzM1MTYsMTYuMDAwNjA4OCAwLDEyLjQxODg3MzcgMCw4IEMwLDMuNTgxNzM1MTYgMy41ODE3MzUxNiw1LjM0OTk2ODgzZS0xNCA4LDUuMzQ5OTY4ODNlLTE0IEMxMi40MTgyNjQ4LDUuMzQ5OTY4ODNlLTE0IDE2LDMuNTgxNzM1MTYgMTYsOCIvPgogICAgPHBhdGggY2xhc3M9InRpLWZvcmVncm91bmQiIGZpbGw9IiNGRkYiIGQ9Ik0xMC4xNzgwMTY4LDExLjQzMTYwMzQgQzEwLjE1MTM5NSwxMS4zNTQxNTggMTAuMTEzODgyNCwxMS4yODIxNTggMTAuMDY0ODczOSwxMS4yMTYyMDg0IEMxMC4wMTY0NzA2LDExLjE0OTY1MzggOS45Nzg5NTc5OCwxMS4xMjMwMzE5IDkuOTUyMzM2MTMsMTEuMTM2MzQyOSBDOS43ODQxMzQ0NSwxMS4yMTk4Mzg3IDkuNjAwMjAxNjgsMTEuMjkxMjMzNiA5LjQwMTE0Mjg2LDExLjM0ODcxMjYgQzkuMjAyMDg0MDMsMTEuNDA2MTkxNiA5LjAyOTA0MjAyLDExLjQzNTIzMzYgOC44ODMyMjY4OSwxMS40MzUyMzM2IEM4LjcxOTI2MDUsMTEuNDM1MjMzNiA4LjU5NDAxNjgxLDExLjM5NzcyMSA4LjUwODEwMDg0LDExLjMyNTcyMSBDOC40MjE1Nzk4MywxMS4yNTI1MTA5IDguMzU5ODY1NTUsMTEuMTE2OTgxNSA4LjMyMjM1Mjk0LDEwLjkyMDM0MjkgQzguMjg0MjM1MjksMTAuNzIzNzA0MiA4LjI2NTQ3ODk5LDEwLjQzNjMwOTIgOC4yNjU0Nzg5OSwxMC4wNTk5NzMxIEw4LjI2NTQ3ODk5LDYuMjQyNzYzMDMgTDkuNjkzMzc4MTUsNi4yNDI3NjMwMyBDOS43NDE3ODE1MSw2LjI0Mjc2MzAzIDkuNzg3MTU5NjYsNi4xOTYxNzQ3OSA5LjgyOTUxMjYxLDYuMTAyMzkzMjggQzkuODcxMjYwNSw2LjAxMDQyNjg5IDkuODkyNDM2OTcsNS44OTU0Njg5MSA5Ljg5MjQzNjk3LDUuNzU4MTI0MzcgQzkuODkyNDM2OTcsNS43MDAwNDAzNCA5Ljg3NzkxNTk3LDUuNjQ4NjExNzYgOS44NDg4NzM5NSw1LjYwNTA0ODc0IEM5LjgyMDQzNjk3LDUuNTYwODgwNjcgOS43ODE3MTQyOSw1LjUzNjY3ODk5IDkuNzMzMzEwOTIsNS41MzI0NDM3IEw4LjI2NTQ3ODk5LDUuNTMyNDQzNyBMOC4yNjU0Nzg5OSwzLjY3OTIgQzguMjY1NDc4OTksMy42MDIzNTk2NiA4LjIxNDY1NTQ2LDMuNTQ3OTA1ODggOC4xMjQ1MDQyLDMuNTEwOTk4MzIgQzcuOTU4MTE3NjUsMy40NTg5NjQ3MSA3Ljg2MDcwNTg4LDMuNjM5ODcyMjcgNy44NjA3MDU4OCwzLjYzOTg3MjI3IEM3LjQxNDE4NDg3LDQuNjcyMDczOTUgNi41Mzc0Nzg5OSw1LjQ2ODkxNDI5IDUuNDUzMjQzNyw1LjgwODM0Mjg2IEM1LjQ1MzI0MzcsNS44MDgzNDI4NiA1LjIzMTc5ODMyLDUuODYwOTgxNTEgNS4yODg2NzIyNyw2LjA5MjcxMjYxIEM1LjI5NTMyNzczLDYuMTEyNjc4OTkgNS4zMDEzNzgxNSw2LjEzMjY0NTM4IDUuMzExMDU4ODIsNi4xNTI2MTE3NiBDNS4zNDE5MTU5Nyw2LjIxNzM1MTI2IDUuMzc5NDI4NTcsNi4yNTA2Mjg1NyA1LjQyMzU5NjY0LDYuMjU2MDczOTUgTDYuMTMzOTE1OTcsNi4yNTYwNzM5NSBMNi4xMzM5MTU5NywxMC42NTE3MDQyIEM2LjEzMzkxNTk3LDExLjI3NTUwMjUgNi4zMjMyOTQxMiwxMS43MTE3Mzc4IDYuNzAyMDUwNDIsMTEuOTU5ODA1IEM3LjA4MDIwMTY4LDEyLjIwNzI2NzIgNy41ODg0MzY5NywxMi4zMzA2OTU4IDguMjI1NTQ2MjIsMTIuMzMwNjk1OCBDOC40MjUyMTAwOCwxMi4zMzA2OTU4IDguNjU2MzM2MTMsMTIuMjkzNzg4MiA4LjkxOTUyOTQxLDEyLjIxODc2MyBDOS4xODI3MjI2OSwxMi4xNDMxMzI4IDkuNDMwNzg5OTIsMTIuMDQ2OTMxMSA5LjY2MzEyNjA1LDExLjkyOTU1MjkgQzkuODk2MDY3MjMsMTEuODEyNzc5OCAxMC4wNjcyOTQxLDExLjY5NDE5MTYgMTAuMTc4MDE2OCwxMS41NzM3ODgyIEMxMC4yMDQ2Mzg3LDExLjU1Njg0NzEgMTAuMjA0NjM4NywxMS41MDkwNDg3IDEwLjE3ODAxNjgsMTEuNDMxNjAzNCIvPgogIDwvZz4KPC9zdmc+Cg==);
+	--coral-transition-instant: 100ms ease-out;
+	--coral-transition-fast: 250ms ease-in-out;
+	--coral-transition-normal: 300ms ease-in-out;
+	--coral-transition-slow: 400ms ease-in;
+	--coral-elevation-layer-flat: 2000;
+	--coral-elevation-layer-standard-front: 2004;
+	--coral-elevation-layer-interactive-front: 2008;
+	--coral-elevation-layer-overlay: 2016;
+	--coral-animation-heartbeat: coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite;
+	color-scheme: light;
+}
+
+@keyframes coral-light-keyframes-blink {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+}
diff --git a/packages/design-tokens/src/qlik-light/dictionary.ts b/packages/design-tokens/src/qlik-light/dictionary.ts
new file mode 100644
index 00000000000..13dfc1cec7c
--- /dev/null
+++ b/packages/design-tokens/src/qlik-light/dictionary.ts
@@ -0,0 +1,3123 @@
+const dictionary = [
+	{
+		name: 'coralColorNeutralText',
+		type: 'color',
+		description: `Default text color. if you don't know which color to pick for text, then this is the safest bet.`,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:10c999cb93ee06de292f4d9709f22283fe62af43,',
+	},
+	{
+		name: 'coralColorNeutralTextWeak',
+		type: 'color',
+		description: `Weak text color. 
+Best used when there is regular neutral-text next to it.`,
+		hsla: 'hsla(0, 0%, 0%, 0.55)',
+		hex: '#0000008C',
+		value: 'hsla(0, 0%, 0%, 0.55)',
+		id: 'S:d0d891a26f776586e59edbc79fc8b5044c4c1d67,',
+	},
+	{
+		name: 'coralColorNeutralTextDisabled',
+		type: 'color',
+		description: `Disabled text color. 
+Only use for interactive elements in their disabled state.
+`,
+		hsla: 'hsla(0, 0%, 0%, 0.3)',
+		hex: '#0000004D',
+		value: 'hsla(0, 0%, 0%, 0.3)',
+		id: 'S:ea3a5293bbd8868883f2210e9463b273d587ddd6,',
+	},
+	{
+		name: 'coralColorNeutralTextInverted',
+		type: 'color',
+		description: `Inverted text color. 
+Only use on dark backgrounds.
+`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#FFFFFF',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:94a7c158b80c973456d5cc992e5ddce6d240a006,',
+	},
+	{
+		name: 'coralColorNeutralBackground',
+		type: 'color',
+		description: `Default background color. If there's no reason for a semantic background, then that is the one to use.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#FFFFFF',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:c1a0034c50a38e51ca164bfd5e3d6b880bed6da7,',
+	},
+	{
+		name: 'coralColorNeutralBackgroundMedium',
+		type: 'color',
+		description: `Medium contrasting background color. Ex: SubHeader`,
+		hsla: 'hsla(0, 0%, 98%, 1)',
+		hex: '#FAFAFA',
+		value: 'hsla(0, 0%, 98%, 1)',
+		id: 'S:67c8eb054cae339d5e6968f69f30900b6e096e5d,',
+	},
+	{
+		name: 'coralColorNeutralBackgroundStrong',
+		type: 'color',
+		description: `Strongly contrasting background color. Use sparingly. Ex: SubHeader back button.`,
+		hsla: 'hsla(0, 0%, 95%, 1)',
+		hex: '#F2F2F2',
+		value: 'hsla(0, 0%, 95%, 1)',
+		id: 'S:e860bbcf429d1a19f1528c7bddf304ec2a9b3b9a,',
+	},
+	{
+		name: 'coralColorNeutralBackgroundDisabled',
+		type: 'color',
+		description: `Background color for disabled interactive elements only. Ex: Buttons`,
+		hsla: 'hsla(0, 0%, 65%, 1)',
+		hex: '#A6A6A6',
+		value: 'hsla(0, 0%, 65%, 1)',
+		id: 'S:200fc7c7a285466db40c8c5b5c308f9a0c22150e,',
+	},
+	{
+		name: 'coralColorNeutralBorder',
+		type: 'color',
+		description: `Default border color. Ex: Inputs`,
+		hsla: 'hsla(0, 0%, 55%, 1)',
+		hex: '#8c8c8c',
+		value: 'hsla(0, 0%, 55%, 1)',
+		id: 'S:4f74b76b2783c3621c34c2c99bc6a59ba7420755,',
+	},
+	{
+		name: 'coralColorNeutralBorderWeak',
+		type: 'color',
+		description: `Weaker border color, for discreet separators Ex: Dividers`,
+		hsla: 'hsla(0, 0%, 85%, 1)',
+		hex: '#D9D9D9',
+		value: 'hsla(0, 0%, 85%, 1)',
+		id: 'S:8e2cbe7a09479ac7528c901ca941659681239da3,',
+	},
+	{
+		name: 'coralColorNeutralBorderHover',
+		type: 'color',
+		description: `Default border color, on mouseover. Ex: Inputs`,
+		hsla: 'hsla(0, 0%, 35%, 1)',
+		hex: '#595959',
+		value: 'hsla(0, 0%, 35%, 1)',
+		id: 'S:3aba03f6504578f37ae1623a909f59cba423d6f6,',
+	},
+	{
+		name: 'coralColorAccentTextWeak',
+		type: 'color',
+		description: `Accent text color on accent-background-strong. Ex: ButtonPrimary`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#FFFFFF',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:b161248608415cdb43f2b1effbf88c1c54e16247,',
+	},
+	{
+		name: 'coralColorAccentTextWeakHover',
+		type: 'color',
+		description: `Accent text color on accent-background-strong, on mouseover. Ex: ButtonPrimary`,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:3b1aeb6600fd22b67debbf33ae3192c684ef564f,',
+	},
+	{
+		name: 'coralColorAccentTextWeakActive',
+		type: 'color',
+		description: `Accent text color on accent-background-strong, while pressing. 
+Ex: ButtonPrimary`,
+		hsla: 'hsla(135, 48%, 84%, 1)',
+		hex: '#C3EACD',
+		value: 'hsla(135, 48%, 84%, 1)',
+		id: 'S:74ac7e3ea8a4211e464a52cc801c95aa98b88538,',
+	},
+	{
+		name: 'coralColorAccentText',
+		type: 'color',
+		description: `Accent text color. Use for interactive text content without background. Ex: Links`,
+		hsla: 'hsla(147, 100%, 26%, 1)',
+		hex: '#00873D',
+		value: 'hsla(147, 100%, 26%, 1)',
+		id: 'S:4718b804e881a63c4d941b7c3e8a596f90e42364,',
+	},
+	{
+		name: 'coralColorAccentTextHover',
+		type: 'color',
+		description: `Accent text color on mouseover. Ex: Links`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:a6c8553b1ca97e0d2434639f226b3a3d6fa578bd,',
+	},
+	{
+		name: 'coralColorAccentTextActive',
+		type: 'color',
+		description: `Accent text color while pressed. Ex: Links`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:fc5e1ef075ba0395d985f5872660aee140c9db57,',
+	},
+	{
+		name: 'coralColorAccentBackground',
+		type: 'color',
+		description: `Accent background color by default. Use with text-strong. Ex: InlineMessage`,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:5a77c353aa9249ef687e53f4e30bba7a1b5bcf30,',
+	},
+	{
+		name: 'coralColorAccentBackgroundHover',
+		type: 'color',
+		description: `Accent background color by default, on mouseover.`,
+		hsla: 'hsla(135, 48%, 84%, 1)',
+		hex: '#C3EACD',
+		value: 'hsla(135, 48%, 84%, 1)',
+		id: 'S:f4591b46991fec51fa06fe0cdd8a283ced81f2e5,',
+	},
+	{
+		name: 'coralColorAccentBackgroundActive',
+		type: 'color',
+		description: `Accent background color by default, while pressing. `,
+		hsla: 'hsla(136, 47%, 74%, 1)',
+		hex: '#9DDCAE',
+		value: 'hsla(136, 47%, 74%, 1)',
+		id: 'S:5b24749cb2dfdc31bedb6b0863660dfbeb30957b,',
+	},
+	{
+		name: 'coralColorAccentBackgroundWeak',
+		type: 'color',
+		description: `Weakest accent background color. Same color as neutral-background but with accent-tinted hover and active. Use as placeholder to indicate that you want accent-tinted interactive states. Ex: ButtonTertiary`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:4ab71633a34bb81f90ab2a240d920a3a596d7aa1,',
+	},
+	{
+		name: 'coralColorAccentBackgroundWeakHover',
+		type: 'color',
+		description: `Weakest accent background color on mouseover. Ex: ButtonTertiary`,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:da9c12d0c5f2671f98fa54cff3e5526386839759,',
+	},
+	{
+		name: 'coralColorAccentBackgroundWeakActive',
+		type: 'color',
+		description: `Weakest accent background color on press. Ex: ButtonTertiary`,
+		hsla: 'hsla(135, 48%, 84%, 1)',
+		hex: '#C3EACD',
+		value: 'hsla(135, 48%, 84%, 1)',
+		id: 'S:e5ee6ad30225946448c18cd3d1b1674c0ded4b3c,',
+	},
+	{
+		name: 'coralColorAccentBackgroundStrong',
+		type: 'color',
+		description: `Strongest accent background color. Use for primary interactive items. Use with text-weak. Ex: ButtonPrimary`,
+		hsla: 'hsla(147, 100%, 26%, 1)',
+		hex: '#00873D',
+		value: 'hsla(147, 100%, 26%, 1)',
+		id: 'S:61f362d892cc32bebc531aee4ef65aa01fa92844,',
+	},
+	{
+		name: 'coralColorAccentBackgroundStrongHover',
+		type: 'color',
+		description: `Strongest accent background color on mouseover Ex: ButtonPrimary`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:4c25100f44e0ed2470e2b94876cd890269b6438f,',
+	},
+	{
+		name: 'coralColorAccentBackgroundStrongActive',
+		type: 'color',
+		description: `Strongest accent background color on press. Ex: ButtonPrimary`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:6d0c3f163cac914d4e6d4b106f6ea9c8105a4c3f,',
+	},
+	{
+		name: 'coralColorAccentBorderHover',
+		type: 'color',
+		description: `Border with accent color on mouseover. Ex: ButtonSecondary`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:f1a7e54acba6696923d222eb71f2558121e59af4,',
+	},
+	{
+		name: 'coralColorAccentBorderActive',
+		type: 'color',
+		description: `Border with accent color while pressing. Ex: ButtonSecondary`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:bf65f82ea1ee9f963e885936067a5ad8ee5cb512,',
+	},
+	{
+		name: 'coralColorDangerTextWeak',
+		type: 'color',
+		description: `Danger text color on danger-background-strong. Ex: ButtonDestructive`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:699bc0d4356f52927fc72f3ba9df43c2a9354d0b,',
+	},
+	{
+		name: 'coralColorDangerTextWeakHover',
+		type: 'color',
+		description: `Danger text color on mouseover. Ex: ButtonDestructive`,
+		hsla: 'hsla(346, 85%, 92%, 1)',
+		hex: '#FCD9E1',
+		value: 'hsla(346, 85%, 92%, 1)',
+		id: 'S:fb762bea2ac42ac749119d549e114110e583f251,',
+	},
+	{
+		name: 'coralColorDangerTextWeakActive',
+		type: 'color',
+		description: `Danger text color while pressing. Ex: ButtonDestructive`,
+		hsla: 'hsla(345, 87%, 85%, 1)',
+		hex: '#FAB8C8',
+		value: 'hsla(345, 87%, 85%, 1)',
+		id: 'S:67f0688f82f99baff4f7421e390a717e97f0afdf,',
+	},
+	{
+		name: 'coralColorDangerText',
+		type: 'color',
+		description: `Danger text color. 
+Use for text content without background that must carry a negative semantic value on its own. `,
+		hsla: 'hsla(336, 100%, 34%, 1)',
+		hex: '#AE0046',
+		value: 'hsla(336, 100%, 34%, 1)',
+		id: 'S:c820445413c284b94cd3dca8c2978a97b8ebff2c,',
+	},
+	{
+		name: 'coralColorDangerTextHover',
+		type: 'color',
+		description: `Danger text color on mouseover, if interactive.`,
+		hsla: 'hsla(332, 100%, 27%, 1)',
+		hex: '#8B0041',
+		value: 'hsla(332, 100%, 27%, 1)',
+		id: 'S:cd4d1dcbba3ab13b836fb099611ff04fe0f63273,',
+	},
+	{
+		name: 'coralColorDangerTextActive',
+		type: 'color',
+		description: `Danger text color while pressing, if interactive.`,
+		hsla: 'hsla(332, 100%, 18%, 1)',
+		hex: '#5C002B',
+		value: 'hsla(332, 100%, 18%, 1)',
+		id: 'S:32990ab88145c7d9e59b3f7adf70301c13015d39,',
+	},
+	{
+		name: 'coralColorDangerBackground',
+		type: 'color',
+		description: `Danger background color by default. Use with text-strong. Ex: InlineMessage`,
+		hsla: 'hsla(346, 85%, 92%, 1)',
+		hex: '#FCD9E1',
+		value: 'hsla(346, 85%, 92%, 1)',
+		id: 'S:dff3ff5e6251f3c293f017442816109091f44798,',
+	},
+	{
+		name: 'coralColorDangerBackgroundHover',
+		type: 'color',
+		description: `Danger background on mouseover.`,
+		hsla: 'hsla(345, 87%, 85%, 1)',
+		hex: '#FAB8C8',
+		value: 'hsla(345, 87%, 85%, 1)',
+		id: 'S:88db13990c405e9d3f53532c6faf0f06c43f27ae,',
+	},
+	{
+		name: 'coralColorDangerBackgroundActive',
+		type: 'color',
+		description: `Danger background while pressing.`,
+		hsla: 'hsla(346, 86%, 75%, 1)',
+		hex: '#F68AA4',
+		value: 'hsla(346, 86%, 75%, 1)',
+		id: 'S:e6fa6b9051912500cd95000470dfd6b149823e0e,',
+	},
+	{
+		name: 'coralColorDangerBackgroundWeak',
+		type: 'color',
+		description: `Weakest danger background color. Same color as neutral-background but with danger-tinted hover and active.
+
+Use as placeholder to indicate that you want danger-tinted interactive states.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:3ddd20e98abac1a33a90eb12b9ff53edf0be431f,',
+	},
+	{
+		name: 'coralColorDangerBackgroundWeakHover',
+		type: 'color',
+		description: `Weakest danger background color on mouseover.`,
+		hsla: 'hsla(346, 85%, 92%, 1)',
+		hex: '#FCD9E1',
+		value: 'hsla(346, 85%, 92%, 1)',
+		id: 'S:982e6680ebf84ece47e2221f5ef20d5e01284e9b,',
+	},
+	{
+		name: 'coralColorDangerBackgroundWeakActive',
+		type: 'color',
+		description: `Weakest danger background color while pressed.`,
+		hsla: 'hsla(345, 87%, 85%, 1)',
+		hex: '#FAB8C8',
+		value: 'hsla(345, 87%, 85%, 1)',
+		id: 'S:5627ea1b6c645efc5068f2c3fc978b10791afd89,',
+	},
+	{
+		name: 'coralColorSuccessTextWeak',
+		type: 'color',
+		description: `Success text color on success-background-strong. `,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:b418e852c5d1b8a6fe42acbed221985cb3f127f2,',
+	},
+	{
+		name: 'coralColorSuccessTextWeakHover',
+		type: 'color',
+		description: `Success text color on mouseover. `,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:96b23b9fb65d55713eb4e3ceae9a927546b0e690,',
+	},
+	{
+		name: 'coralColorSuccessTextWeakActive',
+		type: 'color',
+		description: `Success text color while pressed. `,
+		hsla: 'hsla(135, 48%, 84%, 1)',
+		hex: '#C3EACD',
+		value: 'hsla(135, 48%, 84%, 1)',
+		id: 'S:e94294b66324c3f46fe667d78ff4c3f8fa96c99a,',
+	},
+	{
+		name: 'coralColorSuccessText',
+		type: 'color',
+		description: `Success text color. Use for text content without background that must carry a positive semantic value on its own. Ex: StatusSuccessful`,
+		hsla: 'hsla(147, 100%, 26%, 1)',
+		hex: '#00873D',
+		value: 'hsla(147, 100%, 26%, 1)',
+		id: 'S:ffbfadc3dddedcc0961f945fcaa519892b76fe76,',
+	},
+	{
+		name: 'coralColorSuccessTextHover',
+		type: 'color',
+		description: `Success text color on mouseover.`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:9ca8fcfbd8bbabe88daa5ad242511536f1a01aa1,',
+	},
+	{
+		name: 'coralColorSuccessTextActive',
+		type: 'color',
+		description: `Success text color while pressed.`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:c9960ec8e0fbb72b3176fe3dac962ef632cd97f1,',
+	},
+	{
+		name: 'coralColorSuccessBackground',
+		type: 'color',
+		description: `Success background color by default. Use with text-strong. Ex: InlineMessage `,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:95830782a3ee2a02fb9be61ad9eca89b03d5f2e1,',
+	},
+	{
+		name: 'coralColorDangerBackgroundStrong',
+		type: 'color',
+		description: `Strongest danger background color. Use on strong interactive elements with a negative semantic attached. Use with text-weak. Ex: ButtonDestructive`,
+		hsla: 'hsla(336, 100%, 34%, 1)',
+		hex: '#AE0046',
+		value: 'hsla(336, 100%, 34%, 1)',
+		id: 'S:b67b75c7937d3e89670b0b2e706cbe597a294709,',
+	},
+	{
+		name: 'coralColorDangerBackgroundStrongHover',
+		type: 'color',
+		description: `Strongest danger background color on mouseover. Ex: ButtonDestructive`,
+		hsla: 'hsla(332, 100%, 27%, 1)',
+		hex: '#8B0041',
+		value: 'hsla(332, 100%, 27%, 1)',
+		id: 'S:cf0d1e51df9ed2ac0a3b80db051c2d9e1562ead0,',
+	},
+	{
+		name: 'coralColorDangerBackgroundStrongActive',
+		type: 'color',
+		description: `Strongest danger background color while pressed. Ex: ButtonDestructive`,
+		hsla: 'hsla(332, 100%, 18%, 1)',
+		hex: '#5C002B',
+		value: 'hsla(332, 100%, 18%, 1)',
+		id: 'S:8dee3c9010fcd0e28be2b28cd915bd29fa2e2514,',
+	},
+	{
+		name: 'coralColorDangerBorder',
+		type: 'color',
+		description: `Border color with danger semantic.Ex: Input in error state`,
+		hsla: 'hsla(332, 100%, 27%, 1)',
+		hex: '#8B0041',
+		value: 'hsla(332, 100%, 27%, 1)',
+		id: 'S:c87e7f1d145d085db0a232155acde5157e3fb3be,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundHover',
+		type: 'color',
+		description: `Success background color on mouseover. `,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:a5648f39d5fd8c269fe9719eb0492879d051d3f4,',
+	},
+	{
+		name: 'coralColorDangerBorderHover',
+		type: 'color',
+		description: `Border color with danger semantic on mouseover. Ex: Input in error state`,
+		hsla: 'hsla(332, 100%, 27%, 1)',
+		hex: '#8B0041',
+		value: 'hsla(332, 100%, 27%, 1)',
+		id: 'S:bb30957d53cb31c1c8141f1d572b99c3673db665,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundActive',
+		type: 'color',
+		description: `Success background color while pressed. `,
+		hsla: 'hsla(136, 47%, 74%, 1)',
+		hex: '#9DDCAE',
+		value: 'hsla(136, 47%, 74%, 1)',
+		id: 'S:33f82dbd9c654c29d0338f4de5007e483d475869,',
+	},
+	{
+		name: 'coralColorDangerBorderActive',
+		type: 'color',
+		description: `Border color with danger semantic while pressing. Ex: Input in error state`,
+		hsla: 'hsla(332, 100%, 18%, 1)',
+		hex: '#5C002B',
+		value: 'hsla(332, 100%, 18%, 1)',
+		id: 'S:28931ad27aebb4371a9503277f095449aecb9bcb,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundWeak',
+		type: 'color',
+		description: `Weakest success background color. Same color as neutral-background but with success-tinted hover and active. Use as placeholder to indicate that you want success-tinted interactive states.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:1d01add3e1aeec82426acb8d5b1246bdc29374d9,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundWeakHover',
+		type: 'color',
+		description: `Weakest success background color on mouseover.`,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:0b3d3ce6caa17154f21666351cd3c513ce65227b,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundWeakActive',
+		type: 'color',
+		description: `Weakest success background color while pressed.`,
+		hsla: 'hsla(135, 48%, 84%, 1)',
+		hex: '#C3EACD',
+		value: 'hsla(135, 48%, 84%, 1)',
+		id: 'S:0bede902379e0c55643d9f69a3c65a474d3ced38,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundStrong',
+		type: 'color',
+		description: `Strongest success background color. Use on strong interactive elements with a positive semantic attached. Use with text-weak.`,
+		hsla: 'hsla(147, 100%, 26%, 1)',
+		hex: '#00873D',
+		value: 'hsla(147, 100%, 26%, 1)',
+		id: 'S:b9943215670849a4f73933c228f323731d8ee407,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundStrongHover',
+		type: 'color',
+		description: `Strongest success background color on mouseover.`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:21c0dc76d97d31b7c5b98e3b19dcaf53ea1c818b,',
+	},
+	{
+		name: 'coralColorSuccessBackgroundStrongActive',
+		type: 'color',
+		description: `Strongest success background color while pressed.`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:e8adfa814ca367a2f65295d34477c37c10f818bb,',
+	},
+	{
+		name: 'coralColorWarningTextWeak',
+		type: 'color',
+		description: `Warning text color on warning-background-strong. `,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:6dce8ae9ef0c12b7c6bca860dddca142d7f2c7c5,',
+	},
+	{
+		name: 'coralColorWarningTextWeakHover',
+		type: 'color',
+		description: `Warning weak text color, on mouseover. `,
+		hsla: 'hsla(35, 100%, 88%, 1)',
+		hex: '#FFE6C2',
+		value: 'hsla(35, 100%, 88%, 1)',
+		id: 'S:52d6dba6cfb3636d31269644277ca9b5a31963b4,',
+	},
+	{
+		name: 'coralColorWarningTextWeakActive',
+		type: 'color',
+		description: `Warning weak text color, while pressed. `,
+		hsla: 'hsla(36, 100%, 75%, 1)',
+		hex: '#FFCD80',
+		value: 'hsla(36, 100%, 75%, 1)',
+		id: 'S:ab9ff7e264b328e73d5b4c8e4ae4788d51c8a584,',
+	},
+	{
+		name: 'coralColorSuccessBorder',
+		type: 'color',
+		description: `Border color with success semantic.`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:f78ebf0292cb1ad038d65aad96eebec270474f2a,',
+	},
+	{
+		name: 'coralColorWarningText',
+		type: 'color',
+		description: `Warning text color. Use for text content without background that must carry a warning semantic value on its own. Ex: StatusWarning`,
+		hsla: 'hsla(18, 100%, 37%, 1)',
+		hex: '#BF3900',
+		value: 'hsla(18, 100%, 37%, 1)',
+		id: 'S:205803f0d35b940890c48c6565e1877dfc6db950,',
+	},
+	{
+		name: 'coralColorWarningTextHover',
+		type: 'color',
+		description: `Waring text color, on mouseover.`,
+		hsla: 'hsla(14, 100%, 28%, 1)',
+		hex: '#8E2200',
+		value: 'hsla(14, 100%, 28%, 1)',
+		id: 'S:8ea61eed299497beb4c9134308f544c16b11b191,',
+	},
+	{
+		name: 'coralColorWarningTextActive',
+		type: 'color',
+		description: `Warning text color, while pressed.`,
+		hsla: 'hsla(11, 100%, 19%, 1)',
+		hex: '#611100',
+		value: 'hsla(11, 100%, 19%, 1)',
+		id: 'S:9b770e1c4b8e97ea0db856067c4d377fbbca6676,',
+	},
+	{
+		name: 'coralColorWarningBackground',
+		type: 'color',
+		description: `Warning background color by default. Use with text-strong.Ex: InlineMessage`,
+		hsla: 'hsla(35, 100%, 88%, 1)',
+		hex: '#FFE6C2',
+		value: 'hsla(35, 100%, 88%, 1)',
+		id: 'S:1dc621d9136e162ff9ea67764bf7b8f82b280a3c,',
+	},
+	{
+		name: 'coralColorSuccessBorderHover',
+		type: 'color',
+		description: `Border color with success semantic, on mouseover.`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:7e93b8436eae345924a36ab81f809a0200f103a0,',
+	},
+	{
+		name: 'coralColorWarningBackgroundHover',
+		type: 'color',
+		description: `Warning background color, on mouseover.`,
+		hsla: 'hsla(36, 100%, 75%, 1)',
+		hex: '#FFCD80',
+		value: 'hsla(36, 100%, 75%, 1)',
+		id: 'S:ca0b064fde13f49c3efae291c3ffa8a3ea76d640,',
+	},
+	{
+		name: 'coralColorSuccessBorderActive',
+		type: 'color',
+		description: `Border color with success semantic, while pressed.`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:a0612979717038bd19818c9628055ef6778d0b41,',
+	},
+	{
+		name: 'coralColorWarningBackgroundActive',
+		type: 'color',
+		description: `Warning background color, while pressed.`,
+		hsla: 'hsla(36, 100%, 65%, 1)',
+		hex: '#FFB84D',
+		value: 'hsla(36, 100%, 65%, 1)',
+		id: 'S:83e3662f59e3b023111f946a9772ac4652ebdd46,',
+	},
+	{
+		name: 'coralColorWarningBackgroundWeak',
+		type: 'color',
+		description: `Weakest warning background color. Same color as neutral-background but with warning-tinted hover and active. Use as placeholder to indicate that you want warning-tinted interactive states.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:a8fae482d49c8aebd35d856b0904f199dca4be7d,',
+	},
+	{
+		name: 'coralColorAssistiveText',
+		type: 'color',
+		description: `Text for assistive elements. Use with assistive-background. Ex: Tooltip`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:0e7226809b08a34855c21052d9eba6ab6653fef0,',
+	},
+	{
+		name: 'coralColorWarningBackgroundWeakHover',
+		type: 'color',
+		description: `Weakest warning background color, on mouseover.`,
+		hsla: 'hsla(35, 100%, 88%, 1)',
+		hex: '#FFE6C2',
+		value: 'hsla(35, 100%, 88%, 1)',
+		id: 'S:115c644edd2868ad52b23d576e20ab8d1faa08d8,',
+	},
+	{
+		name: 'coralColorWarningBackgroundWeakActive',
+		type: 'color',
+		description: `Weakest warning background color, while pressed.`,
+		hsla: 'hsla(36, 100%, 75%, 1)',
+		hex: '#FFCD80',
+		value: 'hsla(36, 100%, 75%, 1)',
+		id: 'S:a0ee19e8777403147f0c81dfa683044f0b5cb2db,',
+	},
+	{
+		name: 'coralColorAssistiveBackground',
+		type: 'color',
+		description: `Background for assistive elements. Use with assistive-text. Ex: Tooltip`,
+		hsla: 'hsla(210, 62%, 5%, 1)',
+		hex: '#050D15',
+		value: 'hsla(210, 62%, 5%, 1)',
+		id: 'S:f4a6fcb9f0533a453c37d323c82b6d52f4ec6bbc,',
+	},
+	{
+		name: 'coralColorWarningBackgroundStrong',
+		type: 'color',
+		description: `Strongest warning background color. Use on strong interactive elements with a warning semantic attached. Use with text-weak.`,
+		hsla: 'hsla(21, 100%, 45%, 1)',
+		hex: '#E65200',
+		value: 'hsla(21, 100%, 45%, 1)',
+		id: 'S:51ccf9fa318e01e4c14968f239d096fad3260814,',
+	},
+	{
+		name: 'coralColorWarningBackgroundStrongHover',
+		type: 'color',
+		description: `Strongest warning background color, on mouseover.`,
+		hsla: 'hsla(14, 100%, 28%, 1)',
+		hex: '#8E2200',
+		value: 'hsla(14, 100%, 28%, 1)',
+		id: 'S:4eb56341e158a49f5b0d838089c8a8c18325ef55,',
+	},
+	{
+		name: 'coralColorWarningBackgroundStrongActive',
+		type: 'color',
+		description: `Strongest warning background color, while pressed.`,
+		hsla: 'hsla(11, 100%, 19%, 1)',
+		hex: '#611100',
+		value: 'hsla(11, 100%, 19%, 1)',
+		id: 'S:88f29da5ec9704b5877e8ff58b2b018df64fe32c,',
+	},
+	{
+		name: 'coralColorWarningBorder',
+		type: 'color',
+		description: `Border color with warning semantic.`,
+		hsla: 'hsla(14, 100%, 28%, 1)',
+		hex: '#8E2200',
+		value: 'hsla(14, 100%, 28%, 1)',
+		id: 'S:bc12ace2f349e8b65c07bfb3b0647abbfbdc4f53,',
+	},
+	{
+		name: 'coralColorAssistiveBorder',
+		type: 'color',
+		description: `Border for assistive elements. `,
+		hsla: 'hsla(0, 0%, 47%, 1)',
+		hex: '#797979',
+		value: 'hsla(0, 0%, 47%, 1)',
+		id: 'S:edc8f94e951e1a0fff555b30785298f191557a30,',
+	},
+	{
+		name: 'coralColorWarningBorderHover',
+		type: 'color',
+		description: `Border color with warning semantic, on mouseover.`,
+		hsla: 'hsla(14, 100%, 28%, 1)',
+		hex: '#8E2200',
+		value: 'hsla(14, 100%, 28%, 1)',
+		id: 'S:b6180ebd12bb4c6eaeb01bfadca62bed1d41ad00,',
+	},
+	{
+		name: 'coralColorWarningBorderActive',
+		type: 'color',
+		description: `Border color with warning semantic, while pressed.`,
+		hsla: 'hsla(11, 100%, 19%, 1)',
+		hex: '#611100',
+		value: 'hsla(11, 100%, 19%, 1)',
+		id: 'S:0761e87f4a918be02b5867c09a06313aa004dec4,',
+	},
+	{
+		name: 'coralColorBrandingBrand',
+		type: 'color',
+		description: `Main brand color. Used for logo.`,
+		hsla: 'hsla(144, 78%, 37%, 1)',
+		hex: '#15AA51',
+		value: 'hsla(144, 78%, 37%, 1)',
+		id: 'S:6ec49ff780aa1ffdc439a65b477d377404ee0cba,',
+	},
+	{
+		name: 'coralColorNeutralBorderDisabled',
+		type: 'color',
+		description: `Disabled border color for interactive elements Ex: Inputs`,
+		hsla: 'hsla(0, 0%, 65%, 1)',
+		hex: '#A6A6A6',
+		value: 'hsla(0, 0%, 65%, 1)',
+		id: 'S:9e515084692abf10acca4375ef1fee10b6b802ae,',
+	},
+	{
+		name: 'coralColorNeutralBorderWeakHover',
+		type: 'color',
+		description: `Weaker border color on mouseover.`,
+		hsla: 'hsla(0, 0%, 70%, 1)',
+		hex: '#B3B3B3',
+		value: 'hsla(0, 0%, 70%, 1)',
+		id: 'S:a9d69c47fb18d002925ef03ce29d04c9a1912a2d,',
+	},
+	{
+		name: 'coralColorAssistiveBorderFocus',
+		type: 'color',
+		description: `Focus color for focus rings across the products. Ex: Buttons on focus`,
+		hsla: 'hsla(208, 98%, 43%, 1)',
+		hex: '#0275D9',
+		value: 'hsla(208, 98%, 43%, 1)',
+		id: 'S:291a7efc9bc12a252e0c41ec95c0edf270728ba4,',
+	},
+	{
+		name: 'coralColorAccentTextStrong',
+		type: 'color',
+		description: `Accent text color on accent-background.`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:f80bab3d3a5c4169db07daaa142cba7a8c319bbf,',
+	},
+	{
+		name: 'coralColorAccentTextStrongHover',
+		type: 'color',
+		description: `Accent text color on mouseover.`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:09d4f5976437b18847136f6e78ddef914d6b1c4c,',
+	},
+	{
+		name: 'coralColorAccentTextStrongActive',
+		type: 'color',
+		description: `Accent text color while pressed.`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:1f612fe19d4a6f7b40f07ab6b359950695c372b3,',
+	},
+	{
+		name: 'coralColorDangerTextStrong',
+		type: 'color',
+		description: `Danger text color on danger-background.`,
+		hsla: 'hsla(332, 100%, 18%, 1)',
+		hex: '#5C002B',
+		value: 'hsla(332, 100%, 18%, 1)',
+		id: 'S:0daf7e338da469d7273cc3387f64769e5561bba6,',
+	},
+	{
+		name: 'coralColorDangerTextStrongHover',
+		type: 'color',
+		description: `Danger text color on mouseover.`,
+		hsla: 'hsla(332, 100%, 27%, 1)',
+		hex: '#8B0041',
+		value: 'hsla(332, 100%, 27%, 1)',
+		id: 'S:130f15e66ec11629b190e8a054d7ae2f3067aa89,',
+	},
+	{
+		name: 'coralColorDangerTextStrongActive',
+		type: 'color',
+		description: `Danger text color while pressing.`,
+		hsla: 'hsla(332, 100%, 18%, 1)',
+		hex: '#5C002B',
+		value: 'hsla(332, 100%, 18%, 1)',
+		id: 'S:e114ebc6d803ac76389920edfdb0263d8ebfac0b,',
+	},
+	{
+		name: 'coralColorSuccessTextStrong',
+		type: 'color',
+		description: `Success text color on success-background. `,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:f70b76be155a581e83a2653e3e42262698233ad0,',
+	},
+	{
+		name: 'coralColorSuccessTextStrongHover',
+		type: 'color',
+		description: `Success text color on mouseover. `,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:98750920b619bb58f2925e3f7cba6223b58e6449,',
+	},
+	{
+		name: 'coralColorSuccessTextStrongActive',
+		type: 'color',
+		description: `Success text color while pressed. `,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:f33802276e544153ba2839a331b0854974edcb00,',
+	},
+	{
+		name: 'coralColorWarningTextStrong',
+		type: 'color',
+		description: `Warning text color on warning-background.`,
+		hsla: 'hsla(11, 100%, 19%, 1)',
+		hex: '#611100',
+		value: 'hsla(11, 100%, 19%, 1)',
+		id: 'S:3fc8b5aff756feefa5ffd273245d54ac12d4292d,',
+	},
+	{
+		name: 'coralColorWarningTextStrongHover',
+		type: 'color',
+		description: `Warning strong text color, on mouseover. `,
+		hsla: 'hsla(14, 100%, 28%, 1)',
+		hex: '#8E2200',
+		value: 'hsla(14, 100%, 28%, 1)',
+		id: 'S:cbe0b9dbb86da3cd74ddb50b5aea7e3900e307b8,',
+	},
+	{
+		name: 'coralColorWarningTextStrongActive',
+		type: 'color',
+		description: `Warning strong text color, while pressed.`,
+		hsla: 'hsla(11, 100%, 19%, 1)',
+		hex: '#611100',
+		value: 'hsla(11, 100%, 19%, 1)',
+		id: 'S:e39493d2ad527926e2080d02fd12225fe8543bcc,',
+	},
+	{
+		name: 'coralColorBetaText',
+		type: 'color',
+		description: `Beta text color, for things that are new or temporary.
+Use for text content without background that must carry a beta semantic value on its own. `,
+		hsla: 'hsla(280, 57%, 49%, 1)',
+		hex: '#9435c3',
+		value: 'hsla(280, 57%, 49%, 1)',
+		id: 'S:227ff46cc42d2ad216c72fa2494d8794dfdb604b,',
+	},
+	{
+		name: 'coralColorBetaTextHover',
+		type: 'color',
+		description: `Beta text color, on mouseover.`,
+		hsla: 'hsla(281, 58%, 39%, 1)',
+		hex: '#772a9c',
+		value: 'hsla(281, 58%, 39%, 1)',
+		id: 'S:1860f4ec7fc795c6494c68844e682141ed03a626,',
+	},
+	{
+		name: 'coralColorBetaTextActive',
+		type: 'color',
+		description: `Beta text color, while pressed.`,
+		hsla: 'hsla(281, 58%, 29%, 1)',
+		hex: '#591f74',
+		value: 'hsla(281, 58%, 29%, 1)',
+		id: 'S:cd9326dc6997b00ac83a24f221e1e3890489be14,',
+	},
+	{
+		name: 'coralColorBetaIcon',
+		type: 'color',
+		description: `Icon with beta color.
+
+Ex: InlineMessage`,
+		hsla: 'hsla(280, 80%, 54%, 1)',
+		hex: '#aa2de8',
+		value: 'hsla(280, 80%, 54%, 1)',
+		id: 'S:db56e1eff68394f2df0a24020f98004dee0b6fe4,',
+	},
+	{
+		name: 'coralColorBetaIconHover',
+		type: 'color',
+		description: `Icon with beta color, on mouseover.`,
+		hsla: 'hsla(280, 80%, 44%, 1)',
+		hex: '#8e16ca',
+		value: 'hsla(280, 80%, 44%, 1)',
+		id: 'S:0cd332fba92a693d38790f24ec3c3c77a5627d2c,',
+	},
+	{
+		name: 'coralColorBetaIconActive',
+		type: 'color',
+		description: `Icon with beta color, while pressed.`,
+		hsla: 'hsla(280, 80%, 34%, 1)',
+		hex: '#6e119c',
+		value: 'hsla(280, 80%, 34%, 1)',
+		id: 'S:211e8a73a29e403dc16e7fd6c780060a81e2fffd,',
+	},
+	{
+		name: 'coralColorBetaTextWeak',
+		type: 'color',
+		description: `Beta text color on beta-background-strong. `,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:3f576fd0d0c74680649087517d2449c5c57c72c0,',
+	},
+	{
+		name: 'coralColorBetaTextWeakHover',
+		type: 'color',
+		description: `Beta weak text color, on mouseover.`,
+		hsla: 'hsla(280, 56%, 83%, 1)',
+		hex: '#dcbbec',
+		value: 'hsla(280, 56%, 83%, 1)',
+		id: 'S:20a77c0154975086869873e522e9a9e80348c26b,',
+	},
+	{
+		name: 'coralColorBetaTextWeakActive',
+		type: 'color',
+		description: `Beta weak text color, while pressed.`,
+		hsla: 'hsla(280, 57%, 73%, 1)',
+		hex: '#c793e1',
+		value: 'hsla(280, 57%, 73%, 1)',
+		id: 'S:3485af3105644545dd9f11b518c3fd5cf6566299,',
+	},
+	{
+		name: 'coralColorBetaTextStrong',
+		type: 'color',
+		description: `Beta text color on beta-background.`,
+		hsla: 'hsla(281, 58%, 29%, 1)',
+		hex: '#591f74',
+		value: 'hsla(281, 58%, 29%, 1)',
+		id: 'S:a6e7bfcd281bcc4752a1c9c25ff3c60a733fd578,',
+	},
+	{
+		name: 'coralColorBetaTextStrongHover',
+		type: 'color',
+		description: `Beta strong text color, on mouseover. `,
+		hsla: 'hsla(282, 58%, 19%, 1)',
+		hex: '#3b144c',
+		value: 'hsla(282, 58%, 19%, 1)',
+		id: 'S:2e5cc532ac4389ce61fe097c688cf8bb569ee0c8,',
+	},
+	{
+		name: 'coralColorBetaTextStrongActive',
+		type: 'color',
+		description: `Beta strong text color, while pressed. `,
+		hsla: 'hsla(282, 57%, 9%, 1)',
+		hex: '#1c0a24',
+		value: 'hsla(282, 57%, 9%, 1)',
+		id: 'S:fe383ab935ac26dd5db4dbe7793e6ee1f80c812f,',
+	},
+	{
+		name: 'coralColorBetaBackground',
+		type: 'color',
+		description: `Beta background color by default. Use with text-strong.
+
+Ex: InlineMessage`,
+		hsla: 'hsla(279, 57%, 90%, 1)',
+		hex: '#ead7f4',
+		value: 'hsla(279, 57%, 90%, 1)',
+		id: 'S:1ec184206ed55d016a3f514a77eee1900a8ed873,',
+	},
+	{
+		name: 'coralColorBetaBackgroundHover',
+		type: 'color',
+		description: `Beta background color, on mouseover.`,
+		hsla: 'hsla(279, 57%, 81%, 1)',
+		hex: '#d7b3ea',
+		value: 'hsla(279, 57%, 81%, 1)',
+		id: 'S:4876d5505ea073060ad802c1a066185940aeca5e,',
+	},
+	{
+		name: 'coralColorBetaBackgroundActive',
+		type: 'color',
+		description: `Beta background color, while pressed.`,
+		hsla: 'hsla(279, 57%, 71%, 1)',
+		hex: '#c28bdf',
+		value: 'hsla(279, 57%, 71%, 1)',
+		id: 'S:067a9d2c3e499ecbf1a79ef6364ee32821b0eefe,',
+	},
+	{
+		name: 'coralColorBetaBackgroundWeak',
+		type: 'color',
+		description: `Weakest beta background color. Same color as neutral-background but with beta-tinted hover and active.
+
+Use as placeholder to indicate that you want beta-tinted interactive states.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:d1f61dd2c3cad1846e4f57e79fcde1f58634cc06,',
+	},
+	{
+		name: 'coralColorBetaBackgroundWeakHover',
+		type: 'color',
+		description: `Weakest beta background color, on mouseover.`,
+		hsla: 'hsla(279, 57%, 90%, 1)',
+		hex: '#ead7f4',
+		value: 'hsla(279, 57%, 90%, 1)',
+		id: 'S:240afbe15e900b300118e38db2ee01f4d48fe034,',
+	},
+	{
+		name: 'coralColorBetaBackgroundWeakActive',
+		type: 'color',
+		description: `Weakest beta background color, while pressed.`,
+		hsla: 'hsla(279, 57%, 80%, 1)',
+		hex: '#d5afe9',
+		value: 'hsla(279, 57%, 80%, 1)',
+		id: 'S:f2cce1ec920b37548ed3fdde169a89ec229f5e34,',
+	},
+	{
+		name: 'coralColorBetaBackgroundStrong',
+		type: 'color',
+		description: `Strongest beta background color. Use on strong interactive elements with a beta semantic attached. Use with text-weak.`,
+		hsla: 'hsla(281, 58%, 29%, 1)',
+		hex: '#591f74',
+		value: 'hsla(281, 58%, 29%, 1)',
+		id: 'S:86b2e9b8edcaf46e38b62483a44c25615ce7aab1,',
+	},
+	{
+		name: 'coralColorBetaBackgroundStrongHover',
+		type: 'color',
+		description: `Strongest beta background color, on mouseover.`,
+		hsla: 'hsla(282, 58%, 19%, 1)',
+		hex: '#3b144c',
+		value: 'hsla(282, 58%, 19%, 1)',
+		id: 'S:f5aedf911101596e26aaaab0e5858f60aebaf8b6,',
+	},
+	{
+		name: 'coralColorBetaBackgroundStrongActive',
+		type: 'color',
+		description: `Strongest beta background color, while pressed.`,
+		hsla: 'hsla(282, 57%, 9%, 1)',
+		hex: '#1c0a24',
+		value: 'hsla(282, 57%, 9%, 1)',
+		id: 'S:bd666021047c26d8a7af952f7a2ba3ca1997ba10,',
+	},
+	{
+		name: 'coralColorBetaBorder',
+		type: 'color',
+		description: `Border color with beta semantic.`,
+		hsla: 'hsla(281, 58%, 29%, 1)',
+		hex: '#591f74',
+		value: 'hsla(281, 58%, 29%, 1)',
+		id: 'S:7eee30677af86804bf5963bfd0e139ee793fb003,',
+	},
+	{
+		name: 'coralColorBetaBorderHover',
+		type: 'color',
+		description: `Border color with beta semantic, on mouseover.`,
+		hsla: 'hsla(282, 58%, 19%, 1)',
+		hex: '#3b144c',
+		value: 'hsla(282, 58%, 19%, 1)',
+		id: 'S:da4c4bc68c80bc856b7e5e7b25966fe21631e5cf,',
+	},
+	{
+		name: 'coralColorBetaBorderActive',
+		type: 'color',
+		description: `Border color with beta semantic, while pressed.`,
+		hsla: 'hsla(282, 57%, 9%, 1)',
+		hex: '#1c0a24',
+		value: 'hsla(282, 57%, 9%, 1)',
+		id: 'S:f802feaadec404388ce6b63f6a389106de317b25,',
+	},
+	{
+		name: 'coralColorNeutralBorderStrong',
+		type: 'color',
+		description: `Strongest border color. Use on strong backgrounds (neutral-background-medium, -strong or -heavy).`,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:6d67f79c3f09a6c80192085883e78fe0c551a570,',
+	},
+	{
+		name: 'coralColorNeutralBorderStrongHover',
+		type: 'color',
+		description: `Strongest border color on mouseover.`,
+		hsla: 'hsla(0, 0%, 15%, 1)',
+		hex: '#262626',
+		value: 'hsla(0, 0%, 15%, 1)',
+		id: 'S:7dab05073b0b6865ef824c49b6324eaba3ed4f1a,',
+	},
+	{
+		name: 'coralColorNeutralIconInverted',
+		type: 'color',
+		description: `Neutral icon color on dark backgrounds.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:1475bba2bab6ad7cc2e50c844ee79e9423b0fec6,',
+	},
+	{
+		name: 'coralColorNeutralIcon',
+		type: 'color',
+		description: `Default icon color. Best used when the icon doesn't expect interactivity. `,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:b20caee1566e1478fe5cada2ef7fb319dde974b1,',
+	},
+	{
+		name: 'coralColorNeutralIconWeak',
+		type: 'color',
+		description: `Weakly contrasting icon color.Best used when there is regular neutral-text or neutral-icon colors nearby for efficient hierarchy.`,
+		hsla: 'hsla(0, 0%, 55%, 1)',
+		hex: '#8C8C8C',
+		value: 'hsla(0, 0%, 55%, 1)',
+		id: 'S:18981cf4fdba64a29264f759d65ce2a1c0e475c7,',
+	},
+	{
+		name: 'coralColorAccentIcon',
+		type: 'color',
+		description: `Icon with accent color. Ex: ButtonIcon`,
+		hsla: 'hsla(144, 78%, 37%, 1)',
+		hex: '#15AA51',
+		value: 'hsla(144, 78%, 37%, 1)',
+		id: 'S:b949f744154da7eadf2b84b481546390c6cfd276,',
+	},
+	{
+		name: 'coralColorAccentIconHover',
+		type: 'color',
+		description: `Icon with accent color on mouseover.Ex: ButtonIcon`,
+		hsla: 'hsla(147, 100%, 26%, 1)',
+		hex: '#00873D',
+		value: 'hsla(147, 100%, 26%, 1)',
+		id: 'S:360013e4e6ea521bceba7d4d104abb9dce876688,',
+	},
+	{
+		name: 'coralColorAccentIconActive',
+		type: 'color',
+		description: `Icon with accent color while pressing. Ex: ButtonIcon`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:243e03c059ebd2b791db15d88463272ace4ab8c2,',
+	},
+	{
+		name: 'coralColorDangerIcon',
+		type: 'color',
+		description: `Icon with danger color. Ex: Status`,
+		hsla: 'hsla(339, 100%, 42%, 1)',
+		hex: '#D7004B',
+		value: 'hsla(339, 100%, 42%, 1)',
+		id: 'S:d8da6f95b630b6e5acddafafba8baf666115f8f7,',
+	},
+	{
+		name: 'coralColorDangerIconHover',
+		type: 'color',
+		description: `Icon with danger color on mouseover.`,
+		hsla: 'hsla(336, 100%, 34%, 1)',
+		hex: '#AE0046',
+		value: 'hsla(336, 100%, 34%, 1)',
+		id: 'S:d180d32a8e90a5865b56db7c104066b033dc493a,',
+	},
+	{
+		name: 'coralColorDangerIconActive',
+		type: 'color',
+		description: `Icon with danger color while pressed.`,
+		hsla: 'hsla(332, 100%, 18%, 1)',
+		hex: '#5C002B',
+		value: 'hsla(332, 100%, 18%, 1)',
+		id: 'S:400548167d29a3f203b837d7eb75cbedf0387938,',
+	},
+	{
+		name: 'coralColorSuccessIcon',
+		type: 'color',
+		description: `Icon with success color. Ex: StatusSuccessful`,
+		hsla: 'hsla(144, 78%, 37%, 1)',
+		hex: '#15AA51',
+		value: 'hsla(144, 78%, 37%, 1)',
+		id: 'S:422500a652ca311e96539523813e80ec52f1d560,',
+	},
+	{
+		name: 'coralColorSuccessIconHover',
+		type: 'color',
+		description: `Icon with success color, on mouseover.`,
+		hsla: 'hsla(147, 100%, 26%, 1)',
+		hex: '#00873D',
+		value: 'hsla(147, 100%, 26%, 1)',
+		id: 'S:03176e2626a76ecde06c048a3ea82b099bc294a0,',
+	},
+	{
+		name: 'coralColorSuccessIconActive',
+		type: 'color',
+		description: `Icon with success color, while pressed.`,
+		hsla: 'hsla(144, 78%, 16%, 1)',
+		hex: '#094923',
+		value: 'hsla(144, 78%, 16%, 1)',
+		id: 'S:5bb84b4b5ef68dc153685366aef659cb2f56dbb0,',
+	},
+	{
+		name: 'coralColorWarningIcon',
+		type: 'color',
+		description: `Icon with warning color. Ex: StatusWarning`,
+		hsla: 'hsla(27, 100%, 47%, 1)',
+		hex: '#EF6D00',
+		value: 'hsla(27, 100%, 47%, 1)',
+		id: 'S:b281fb7af34bebfa8e71f5d5b3565a3c0e5b82fc,',
+	},
+	{
+		name: 'coralColorWarningIconHover',
+		type: 'color',
+		description: `Icon with warning color, on mouseover.`,
+		hsla: 'hsla(18, 100%, 37%, 1)',
+		hex: '#BF3900',
+		value: 'hsla(18, 100%, 37%, 1)',
+		id: 'S:8c34d03b898d022052f45ca687fb59433dce7b5d,',
+	},
+	{
+		name: 'coralColorWarningIconActive',
+		type: 'color',
+		description: `Icon with warning color, while pressed.`,
+		hsla: 'hsla(11, 100%, 19%, 1)',
+		hex: '#611100',
+		value: 'hsla(11, 100%, 19%, 1)',
+		id: 'S:0215678f15ac5deae83c0f1c58e700b8baee4f3a,',
+	},
+	{
+		name: 'coralColorChartsNeutral',
+		type: 'color',
+		description: `Chart color: Neutral. 
+Use for neutral / empty semantic values. 
+
+Ex: QualityBar`,
+		hsla: 'hsla(0, 0%, 22%, 1)',
+		hex: '#383838',
+		value: 'hsla(0, 0%, 22%, 1)',
+		id: 'S:a3d498a33ebeff2f580391259314ab9246358c4f,',
+	},
+	{
+		name: 'coralColorChartsNeutralWeak',
+		type: 'color',
+		description: `Chart color: Neutral-weak. 
+Weak contrast for neutral / empty semantic values.`,
+		hsla: 'hsla(0, 0%, 83%, 1)',
+		hex: '#d4d4d4',
+		value: 'hsla(0, 0%, 83%, 1)',
+		id: 'S:95d1f769d53a6d21d966229e5213e8cc38bf9677,',
+	},
+	{
+		name: 'coralColorChartsNeutralStrong',
+		type: 'color',
+		description: `Chart color: Neutral-strong. 
+Strong contrast for neutral / empty semantic values.`,
+		hsla: 'hsla(0, 0%, 12%, 1)',
+		hex: '#1f1f1f',
+		value: 'hsla(0, 0%, 12%, 1)',
+		id: 'S:e0a7b477ff9221f3efbcc06a30879f78d6d722f2,',
+	},
+	{
+		name: 'coralColorChartsNeutralHover',
+		type: 'color',
+		description: `Chart color: Neutral on mouseover for interactive charts.`,
+		hsla: 'hsla(0, 0%, 12%, 1)',
+		hex: '#1f1f1f',
+		value: 'hsla(0, 0%, 12%, 1)',
+		id: 'S:dd28a6a4590f44fca8a6f21e5cc25641f662c426,',
+	},
+	{
+		name: 'coralColorChartsSuccess',
+		type: 'color',
+		description: `Chart color: Success. 
+Use for success / positive semantic values. 
+
+Ex: QualityBar`,
+		hsla: 'hsla(148, 87%, 40%, 1)',
+		hex: '#0dbd5e',
+		value: 'hsla(148, 87%, 40%, 1)',
+		id: 'S:33025d53ef61e6b730f35a93b6f7206094ef9385,',
+	},
+	{
+		name: 'coralColorChartsSuccessWeak',
+		type: 'color',
+		description: `Chart color: Success-weak. 
+Weak contrast for positive / success semantic values.`,
+		hsla: 'hsla(130, 52%, 91%, 1)',
+		hex: '#dcf4e0',
+		value: 'hsla(130, 52%, 91%, 1)',
+		id: 'S:5ef8fc9a63f09034cbe7326b3c064772a27dc9fc,',
+	},
+	{
+		name: 'coralColorChartsSuccessStrong',
+		type: 'color',
+		description: `Chart color: Success-strong. 
+Strong contrast for positive / success semantic values.`,
+		hsla: 'hsla(139, 50%, 22%, 1)',
+		hex: '#1c552e',
+		value: 'hsla(139, 50%, 22%, 1)',
+		id: 'S:8f8789e4b3e00968e8d720c29d8361fc314d5298,',
+	},
+	{
+		name: 'coralColorChartsSuccessHover',
+		type: 'color',
+		description: `Chart color: Success on mouseover for interactive charts.`,
+		hsla: 'hsla(139, 50%, 22%, 1)',
+		hex: '#1c552e',
+		value: 'hsla(139, 50%, 22%, 1)',
+		id: 'S:cbf8d1b32e257667381b0602f227ddbba010c349,',
+	},
+	{
+		name: 'coralColorChartsDanger',
+		type: 'color',
+		description: `Chart color: Danger. 
+Use for danger / negative semantic values. 
+
+Ex: QualityBar`,
+		hsla: 'hsla(4, 89%, 49%, 1)',
+		hex: '#ea1b0e',
+		value: 'hsla(4, 89%, 49%, 1)',
+		id: 'S:c09c28e8f588fa65453e69c7c60435ac96c2b90c,',
+	},
+	{
+		name: 'coralColorChartsDangerWeak',
+		type: 'color',
+		description: `Chart color: Danger-weak. 
+Weak contrast for negative / danger semantic values.`,
+		hsla: 'hsla(359, 69%, 73%, 1)',
+		hex: '#e9898a',
+		value: 'hsla(359, 69%, 73%, 1)',
+		id: 'S:9d2762507c6cfcd4c38cbdaa2b22353b183cdb6c,',
+	},
+	{
+		name: 'coralColorChartsDangerStrong',
+		type: 'color',
+		description: `Chart color: Danger-strong. 
+Strong contrast for negative / danger semantic values.`,
+		hsla: 'hsla(359, 62%, 43%, 1)',
+		hex: '#b32a2c',
+		value: 'hsla(359, 62%, 43%, 1)',
+		id: 'S:a92bc8f79e8062726ea5c2a8e885ca92c01200d5,',
+	},
+	{
+		name: 'coralColorChartsDangerHover',
+		type: 'color',
+		description: `Chart color: Danger on mouseover for interactive charts.`,
+		hsla: 'hsla(359, 62%, 43%, 1)',
+		hex: '#b32a2c',
+		value: 'hsla(359, 62%, 43%, 1)',
+		id: 'S:c1ce6adfead2561c6db73e0e3deba74cd961c53d,',
+	},
+	{
+		name: 'coralColorChartsWarning',
+		type: 'color',
+		description: `Chart color: Warning. 
+Use for warning semantic values.`,
+		hsla: 'hsla(32, 100%, 56%, 1)',
+		hex: '#ff9820',
+		value: 'hsla(32, 100%, 56%, 1)',
+		id: 'S:25b2f6f66ea8a91c5c39eee7f51b5608693a4193,',
+	},
+	{
+		name: 'coralColorChartsWarningWeak',
+		type: 'color',
+		description: `Chart color: Warning-weak. 
+Weak contrast for warning semantic values.`,
+		hsla: 'hsla(22, 88%, 84%, 1)',
+		hex: '#facbb0',
+		value: 'hsla(22, 88%, 84%, 1)',
+		id: 'S:169501744af03fdec2df5369469fdfabaa29d76f,',
+	},
+	{
+		name: 'coralColorChartsWarningStrong',
+		type: 'color',
+		description: `Chart color: Warning-strong. 
+Strong contrast for warning semantic values.`,
+		hsla: 'hsla(22, 75%, 42%, 1)',
+		hex: '#b9541b',
+		value: 'hsla(22, 75%, 42%, 1)',
+		id: 'S:817044da616057f5e3106cde6fe45658c35e72b0,',
+	},
+	{
+		name: 'coralColorChartsWarningHover',
+		type: 'color',
+		description: `Chart color: Warning on mouseover for interactive charts.`,
+		hsla: 'hsla(22, 75%, 42%, 1)',
+		hex: '#b9541b',
+		value: 'hsla(22, 75%, 42%, 1)',
+		id: 'S:d3ba5833d0e04af5ac82b406b0f60576962f6d53,',
+	},
+	{
+		name: 'coralColorChartsDefault',
+		type: 'color',
+		description: `Chart color by default. 
+If the chart only has one set of value, and not a semantic (danger / warning / success) then use this colorset.`,
+		hsla: 'hsla(216, 82%, 48%, 1)',
+		hex: '#1667df',
+		value: 'hsla(216, 82%, 48%, 1)',
+		id: 'S:f916a19d4c11fc0a456321af7491e482ec9c982a,',
+	},
+	{
+		name: 'coralColorChartsDefaultWeak',
+		type: 'color',
+		description: `Chart color: default-weak. 
+Weak contrast for basic chart values.`,
+		hsla: 'hsla(204, 59%, 73%, 1)',
+		hex: '#91c2e3',
+		value: 'hsla(204, 59%, 73%, 1)',
+		id: 'S:2b7a826d26354a36c8d2445d8a95b5e73f41e57d,',
+	},
+	{
+		name: 'coralColorChartsDefaultStrong',
+		type: 'color',
+		description: `Chart color: default-strong. 
+Strong contrast for basic chart values. `,
+		hsla: 'hsla(204, 92%, 29%, 1)',
+		hex: '#06568d',
+		value: 'hsla(204, 92%, 29%, 1)',
+		id: 'S:6dab7b28417521c28a18b973701dc041c71f7a9b,',
+	},
+	{
+		name: 'coralColorChartsDefaultHover',
+		type: 'color',
+		description: `Chart color: default on mouseover for interactive charts.
+
+if there is text on top if this, use default-text-weak.`,
+		hsla: 'hsla(204, 92%, 29%, 1)',
+		hex: '#06568d',
+		value: 'hsla(204, 92%, 29%, 1)',
+		id: 'S:52999beffff9eacf26bfed083486644be6b75d29,',
+	},
+	{
+		name: 'coralColorChartsColor00',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(48, 100%, 50%, 1)',
+		hex: '#ffcc00',
+		value: 'hsla(48, 100%, 50%, 1)',
+		id: 'S:9505c4d1a23e896b95e637f2ef3666e55b02843c,',
+	},
+	{
+		name: 'coralColorChartsColor00Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(51, 91%, 82%, 1)',
+		hex: '#fbefa9',
+		value: 'hsla(51, 91%, 82%, 1)',
+		id: 'S:6ddd5f3350267fc82b40ac74c11496ca58792644,',
+	},
+	{
+		name: 'coralColorChartsColor00Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(48, 82%, 45%, 1)',
+		hex: '#d2ad15',
+		value: 'hsla(48, 82%, 45%, 1)',
+		id: 'S:e9d116f4a613f1a63cbd8d0184dc7317a699976c,',
+	},
+	{
+		name: 'coralColorChartsColor00Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(48, 82%, 45%, 1)',
+		hex: '#d2ad15',
+		value: 'hsla(48, 82%, 45%, 1)',
+		id: 'S:fe75e8b14455819f62530cac887c281db3cf5ecd,',
+	},
+	{
+		name: 'coralColorChartsColor01',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(216, 82%, 48%, 1)',
+		hex: '#1667df',
+		value: 'hsla(216, 82%, 48%, 1)',
+		id: 'S:a720129992c4db38acc63651e44288d9dbe51dcd,',
+	},
+	{
+		name: 'coralColorChartsColor01Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(204, 59%, 73%, 1)',
+		hex: '#91c2e3',
+		value: 'hsla(204, 59%, 73%, 1)',
+		id: 'S:8d7bb5282649e7a36537bc19a112e6c4ff832dab,',
+	},
+	{
+		name: 'coralColorChartsColor01Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(204, 92%, 29%, 1)',
+		hex: '#06568d',
+		value: 'hsla(204, 92%, 29%, 1)',
+		id: 'S:6d5d6816f5e9af2400c4b36d7a1b0b2c89b5272b,',
+	},
+	{
+		name: 'coralColorChartsColor01Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(204, 92%, 29%, 1)',
+		hex: '#06568d',
+		value: 'hsla(204, 92%, 29%, 1)',
+		id: 'S:6a5ff3408046cc1276db9d4361741f502906d96f,',
+	},
+	{
+		name: 'coralColorChartsColor02',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(194, 92%, 50%, 1)',
+		hex: '#0abef5',
+		value: 'hsla(194, 92%, 50%, 1)',
+		id: 'S:d0045a8ff307816f958b16732e55b0f5a823cd0d,',
+	},
+	{
+		name: 'coralColorChartsColor02Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(194, 91%, 91%, 1)',
+		hex: '#d2f3fd',
+		value: 'hsla(194, 91%, 91%, 1)',
+		id: 'S:1d99aef8c9cf2e2c44d9d652f8e1e791b68801d6,',
+	},
+	{
+		name: 'coralColorChartsColor02Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(194, 93%, 32%, 1)',
+		hex: '#067b9f',
+		value: 'hsla(194, 93%, 32%, 1)',
+		id: 'S:ef3900e5ddc1f8e7c72e0688f376f6cd46530124,',
+	},
+	{
+		name: 'coralColorChartsColor02Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(194, 93%, 32%, 1)',
+		hex: '#067b9f',
+		value: 'hsla(194, 93%, 32%, 1)',
+		id: 'S:fb8ac038db8ff8aaa626f292f8143e4ad5c106ba,',
+	},
+	{
+		name: 'coralColorChartsColor03',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(140, 39%, 79%, 1)',
+		hex: '#b3dec1',
+		value: 'hsla(140, 39%, 79%, 1)',
+		id: 'S:d64422d228b90d9fa28c5227dc2effc6991f8b5e,',
+	},
+	{
+		name: 'coralColorChartsColor03Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(138, 40%, 92%, 1)',
+		hex: '#e1f2e6',
+		value: 'hsla(138, 40%, 92%, 1)',
+		id: 'S:3bcdcc34660e6fa4139952f2347bc8e14ee80a2d,',
+	},
+	{
+		name: 'coralColorChartsColor03Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(139, 11%, 35%, 1)',
+		hex: '#506356',
+		value: 'hsla(139, 11%, 35%, 1)',
+		id: 'S:3b8fc5892438a939aea3ceae27a42db6279f5c9d,',
+	},
+	{
+		name: 'coralColorChartsColor03Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(139, 11%, 35%, 1)',
+		hex: '#506356',
+		value: 'hsla(139, 11%, 35%, 1)',
+		id: 'S:4378d021b834eb01b63ab96dfdfe758d18c46d78,',
+	},
+	{
+		name: 'coralColorChartsColor04',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(148, 87%, 40%, 1)',
+		hex: '#0dbd5e',
+		value: 'hsla(148, 87%, 40%, 1)',
+		id: 'S:449b70e4010307677623f7fa4ca30851c86f37c5,',
+	},
+	{
+		name: 'coralColorChartsColor04Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(130, 52%, 91%, 1)',
+		hex: '#dcf4e0',
+		value: 'hsla(130, 52%, 91%, 1)',
+		id: 'S:f8ca9fb1cd5602615e6c904437343600b1a92877,',
+	},
+	{
+		name: 'coralColorChartsColor04Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(139, 50%, 22%, 1)',
+		hex: '#1c552e',
+		value: 'hsla(139, 50%, 22%, 1)',
+		id: 'S:662a45487ae84c81c9ce13bac5aa32a2dd45e3d4,',
+	},
+	{
+		name: 'coralColorChartsColor04Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(139, 50%, 22%, 1)',
+		hex: '#1c552e',
+		value: 'hsla(139, 50%, 22%, 1)',
+		id: 'S:0da97488b7d438b02f2b872a18f7849d87f45e18,',
+	},
+	{
+		name: 'coralColorChartsColor05',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(324, 68%, 71%, 1)',
+		hex: '#e884c0',
+		value: 'hsla(324, 68%, 71%, 1)',
+		id: 'S:b507bc0b849c50c9e60f4cb1c6b6e1d2a8ab6b66,',
+	},
+	{
+		name: 'coralColorChartsColor05Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(323, 69%, 95%, 1)',
+		hex: '#fbe9f4',
+		value: 'hsla(323, 69%, 95%, 1)',
+		id: 'S:84add423fc3c8a7f4fe5c3a774837bce3592d8d4,',
+	},
+	{
+		name: 'coralColorChartsColor05Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(324, 28%, 49%, 1)',
+		hex: '#a15b85',
+		value: 'hsla(324, 28%, 49%, 1)',
+		id: 'S:4214d17cb1ac1f2dea182c0e280d9c4cbe422229,',
+	},
+	{
+		name: 'coralColorChartsColor05Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(324, 28%, 49%, 1)',
+		hex: '#a15b85',
+		value: 'hsla(324, 28%, 49%, 1)',
+		id: 'S:00b56df15db6fedad4d91f4580aa73c3ab286422,',
+	},
+	{
+		name: 'coralColorChartsColor06',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(280, 75%, 58%, 1)',
+		hex: '#b045e5',
+		value: 'hsla(280, 75%, 58%, 1)',
+		id: 'S:772945b3afc20071f0ae1e950f79358e5b3ad299,',
+	},
+	{
+		name: 'coralColorChartsColor06Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(279, 77%, 88%, 1)',
+		hex: '#e8caf8',
+		value: 'hsla(279, 77%, 88%, 1)',
+		id: 'S:998de68b1713f2c044aa5832c6cc327e58c5c444,',
+	},
+	{
+		name: 'coralColorChartsColor06Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(280, 54%, 36%, 1)',
+		hex: '#6e2b8f',
+		value: 'hsla(280, 54%, 36%, 1)',
+		id: 'S:0cab8edb4e986bdaca01029ef186a669ba9f8fd9,',
+	},
+	{
+		name: 'coralColorChartsColor06Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(280, 54%, 36%, 1)',
+		hex: '#6e2b8f',
+		value: 'hsla(280, 54%, 36%, 1)',
+		id: 'S:d37dfa3b2b250227d761d2e7c09b7703e396ce07,',
+	},
+	{
+		name: 'coralColorChartsColor07',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(4, 89%, 49%, 1)',
+		hex: '#ea1b0e',
+		value: 'hsla(4, 89%, 49%, 1)',
+		id: 'S:c87f3de2572d12b7e9b00abecd2ecbb637e25d61,',
+	},
+	{
+		name: 'coralColorChartsColor07Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(359, 69%, 73%, 1)',
+		hex: '#e9898a',
+		value: 'hsla(359, 69%, 73%, 1)',
+		id: 'S:12f0499ea53fd49d90fbca59b38aa0cb4d759afa,',
+	},
+	{
+		name: 'coralColorChartsColor07Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(359, 62%, 43%, 1)',
+		hex: '#b32a2c',
+		value: 'hsla(359, 62%, 43%, 1)',
+		id: 'S:3972a1f74060849362fb18e23512a5c2279f3d88,',
+	},
+	{
+		name: 'coralColorChartsColor07Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(359, 62%, 43%, 1)',
+		hex: '#b32a2c',
+		value: 'hsla(359, 62%, 43%, 1)',
+		id: 'S:e22df6931d25e17ab33f853a637361ea04c2d6ef,',
+	},
+	{
+		name: 'coralColorChartsColor08',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(22, 88%, 54%, 1)',
+		hex: '#f16e23',
+		value: 'hsla(22, 88%, 54%, 1)',
+		id: 'S:1f2255d330755c5c0791f2dbefba6708e6572c96,',
+	},
+	{
+		name: 'coralColorChartsColor08Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(22, 88%, 84%, 1)',
+		hex: '#facbb0',
+		value: 'hsla(22, 88%, 84%, 1)',
+		id: 'S:d579c1dabfd78618df9d1f2331ce493aecda0fcd,',
+	},
+	{
+		name: 'coralColorChartsColor08Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(22, 75%, 42%, 1)',
+		hex: '#b9541b',
+		value: 'hsla(22, 75%, 42%, 1)',
+		id: 'S:98aba11850cb841b7b47d27d4f4f58635e6cf3f4,',
+	},
+	{
+		name: 'coralColorChartsColor08Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(22, 75%, 42%, 1)',
+		hex: '#b9541b',
+		value: 'hsla(22, 75%, 42%, 1)',
+		id: 'S:fbd775d6781100ab78f34e1739b17eadefc93d12,',
+	},
+	{
+		name: 'coralColorChartsColor09',
+		type: 'color',
+		description: `Chart color used in combinations with the other numerical chart colors. 
+
+Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`,
+		hsla: 'hsla(34, 34%, 45%, 1)',
+		hex: '#99784c',
+		value: 'hsla(34, 34%, 45%, 1)',
+		id: 'S:c36693434b12e24c60496af7e5069a405ac6c7e3,',
+	},
+	{
+		name: 'coralColorChartsColor09Weak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(35, 28%, 82%, 1)',
+		hex: '#ded3c4',
+		value: 'hsla(35, 28%, 82%, 1)',
+		id: 'S:f4224d0f302d3c637cf25f6c877926357b09f5fd,',
+	},
+	{
+		name: 'coralColorChartsColor09Strong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(35, 34%, 27%, 1)',
+		hex: '#5b482d',
+		value: 'hsla(35, 34%, 27%, 1)',
+		id: 'S:7ad3e194bd337aa2cdd3e0f14519b7dbeeb997db,',
+	},
+	{
+		name: 'coralColorChartsColor09Hover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(35, 34%, 27%, 1)',
+		hex: '#5b482d',
+		value: 'hsla(35, 34%, 27%, 1)',
+		id: 'S:72d13f5101e61b0cbc51cb43d69f6130f3401cc6,',
+	},
+	{
+		name: 'coralColorAccentBorder',
+		type: 'color',
+		description: `Border with accent color. Use for interactive items. Ex: ButtonSecondary`,
+		hsla: 'hsla(144, 78%, 23%, 1)',
+		hex: '#0D6932',
+		value: 'hsla(144, 78%, 23%, 1)',
+		id: 'S:42634bfd0b5232c9141eeca48dcb3e68f4fa539c,',
+	},
+	{
+		name: 'coralColorChartsDefaultText',
+		type: 'color',
+		description: `Text color for chart-default. 
+
+Text on a chart is discouraged, but if you must, then use this with chart-default.`,
+		hsla: 'hsla(205, 87%, 94%, 1)',
+		hex: '#e3f2fd',
+		value: 'hsla(205, 87%, 94%, 1)',
+		id: 'S:4053126865c4a29f156c4510e949fe1dc7acb1cb,',
+	},
+	{
+		name: 'coralColorChartsDefaultTextStrong',
+		type: 'color',
+		description: `Strong text color for chart-default-weak. 
+
+Text on a chart is discouraged, but if you must, then use this with chart-default-weak.`,
+		hsla: 'hsla(205, 93%, 22%, 1)',
+		hex: '#04426d',
+		value: 'hsla(205, 93%, 22%, 1)',
+		id: 'S:32f8872c35f7aef21e55d005702eee76f6900f79,',
+	},
+	{
+		name: 'coralColorChartsDefaultTextWeak',
+		type: 'color',
+		description: `Weak text color for chart-default-strong. 
+
+Text on a chart is discouraged, but if you must, then use this with chart-default-strong.`,
+		hsla: 'hsla(207, 93%, 94%, 1)',
+		hex: '#e3f2fe',
+		value: 'hsla(207, 93%, 94%, 1)',
+		id: 'S:26c5c4563fd31c901e561c0c5ea588dfdfad27af,',
+	},
+	{
+		name: 'coralColorChartsColor09Text',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(36, 36%, 5%, 1)',
+		hex: '#130f09',
+		value: 'hsla(36, 36%, 5%, 1)',
+		id: 'S:25b5c8aaf3d73df7f9c85c67f7e0b1ae80e36d96,',
+	},
+	{
+		name: 'coralColorChartsColor09TextStrong',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(36, 36%, 5%, 1)',
+		hex: '#130f09',
+		value: 'hsla(36, 36%, 5%, 1)',
+		id: 'S:64fe115052f5128efc8808e4604fb4916f95aa2b,',
+	},
+	{
+		name: 'coralColorChartsColor09TextWeak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(35, 28%, 82%, 1)',
+		hex: '#ded3c4',
+		value: 'hsla(35, 28%, 82%, 1)',
+		id: 'S:06b63dfa38fd3587b0d9ac36e39aa42ee105af9f,',
+	},
+	{
+		name: 'coralColorNeutralBackgroundHeavy',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 78%, 1)',
+		hex: '#c7c7c7',
+		value: 'hsla(0, 0%, 78%, 1)',
+		id: 'S:68962413973388b6bbd8a7289c8a6663b0a0f181,',
+	},
+	{
+		name: 'coralColorIllustrationColor01',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(211, 62%, 26%, 1)',
+		hex: '#19416c',
+		value: 'hsla(211, 62%, 26%, 1)',
+		id: 'S:762d0c0efa6779e5cdc76d66f776e14ee71a025b,',
+	},
+	{
+		name: 'coralColorIllustrationColor02',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(211, 43%, 47%, 1)',
+		hex: '#4577ac',
+		value: 'hsla(211, 43%, 47%, 1)',
+		id: 'S:837b9aebd89eab69c43d006ede8092ef135bf95b,',
+	},
+	{
+		name: 'coralColorIllustrationColor03',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(201, 31%, 85%, 1)',
+		hex: '#cedde5',
+		value: 'hsla(201, 31%, 85%, 1)',
+		id: 'S:9e47f29eb4617ca185e105e34389f738cf219851,',
+	},
+	{
+		name: 'coralColorIllustrationColor05',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(359, 82%, 81%, 1)',
+		hex: '#f6a5a6',
+		value: 'hsla(359, 82%, 81%, 1)',
+		id: 'S:daf383f79d6e42fd6a76b0c742d1ca53479fa80f,',
+	},
+	{
+		name: 'coralColorIllustrationColor04',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(359, 100%, 72%, 1)',
+		hex: '#ff6e70',
+		value: 'hsla(359, 100%, 72%, 1)',
+		id: 'S:149abb7212b5f90ed8fd51b42d0c1b0c041c41ce,',
+	},
+	{
+		name: 'coralColorIllustrationColor06',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(358, 100%, 93%, 1)',
+		hex: '#ffdadb',
+		value: 'hsla(358, 100%, 93%, 1)',
+		id: 'S:ab2775175f55f85408df3dd7d669ac917ce9eadb,',
+	},
+	{
+		name: 'coralColorIllustrationSkintone01',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(20, 91%, 83%, 1)',
+		hex: '#fbc6ab',
+		value: 'hsla(20, 91%, 83%, 1)',
+		id: 'S:f7567796748717162af5198cb896f4ed96ee4742,',
+	},
+	{
+		name: 'coralColorIllustrationSkintone02',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(21, 34%, 55%, 1)',
+		hex: '#b27f64',
+		value: 'hsla(21, 34%, 55%, 1)',
+		id: 'S:0b0d80721bce8ed6c2f64ebdb7c3090a42424c9e,',
+	},
+	{
+		name: 'coralColorIllustrationSkintone03',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(17, 33%, 28%, 1)',
+		hex: '#5f3d30',
+		value: 'hsla(17, 33%, 28%, 1)',
+		id: 'S:c35a128779db152d6cf8e6bff417efeac92e6a06,',
+	},
+	{
+		name: 'coralColorIllustrationShadow',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 0%, 0.1)',
+		hex: '#0000001a',
+		value: 'hsla(0, 0%, 0%, 0.1)',
+		id: 'S:172b785f68dba8621e1a503f9d7ae87479f49167,',
+	},
+	{
+		name: 'coralColorIllustrationColor07',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(192, 33%, 97%, 1)',
+		hex: '#f5f9fa',
+		value: 'hsla(192, 33%, 97%, 1)',
+		id: 'S:a057cff7a96776950911855a2cfdc6908bea927e,',
+	},
+	{
+		name: 'coralColorIllustrationColor08',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(211, 23%, 74%, 1)',
+		hex: '#adbccc',
+		value: 'hsla(211, 23%, 74%, 1)',
+		id: 'S:939faa25bd307250cd34b2b27dea01b5798ec269,',
+	},
+	{
+		name: 'coralColorIllustrationColor09',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(245, 10%, 23%, 1)',
+		hex: '#35343f',
+		value: 'hsla(245, 10%, 23%, 1)',
+		id: 'S:603e1e228ae66fa1496162cb8cdbec5a70580da9,',
+	},
+	{
+		name: 'coralColorAccentBackgroundSelected',
+		type: 'color',
+		description: `Accent background for currently selected elements:  Ex: Selected column or line in a datagrid.`,
+		hsla: 'hsla(138, 56%, 92%, 1)',
+		hex: '#DFF6E6',
+		value: 'hsla(138, 56%, 92%, 1)',
+		id: 'S:8e41c9f17635925c89f424569bb6ac93eb5c008e,',
+	},
+	{
+		name: 'coralColorInfoText',
+		type: 'color',
+		description: `Information text color.  Use for text content without background that must carry a information semantic value on its own.  Ex: StatusInfo`,
+		hsla: 'hsla(215, 100%, 34%, 1)',
+		hex: '#0047AD',
+		value: 'hsla(215, 100%, 34%, 1)',
+		id: 'S:b2deed4800e24fca6ad29d1edb555f2b66874b47,',
+	},
+	{
+		name: 'coralColorInfoTextHover',
+		type: 'color',
+		description: `Info text color on mouseover, if interactive.`,
+		hsla: 'hsla(216, 100%, 28%, 1)',
+		hex: '#003A8F',
+		value: 'hsla(216, 100%, 28%, 1)',
+		id: 'S:1312ba264139ae787d57ffe659b91c732fe1dfc5,',
+	},
+	{
+		name: 'coralColorInfoTextActive',
+		type: 'color',
+		description: `Info text color while pressing, if interactive.`,
+		hsla: 'hsla(215, 100%, 21%, 1)',
+		hex: '#002D6D',
+		value: 'hsla(215, 100%, 21%, 1)',
+		id: 'S:987f732a250f767a4cad2e168eb626ab47b986bf,',
+	},
+	{
+		name: 'coralColorInfoTextWeak',
+		type: 'color',
+		description: `Info text color on infor-background-strong. `,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:5dcdc37bb6cec31f97c5d4b31f222c625b7b2c16,',
+	},
+	{
+		name: 'coralColorInfoTextWeakHover',
+		type: 'color',
+		description: `Info text color on mouseover. `,
+		hsla: 'hsla(205, 80%, 92%, 1)',
+		hex: '#DAEDFB',
+		value: 'hsla(205, 80%, 92%, 1)',
+		id: 'S:7c28ac736af6a8c18b4c48d0a67fe2fc1ac4789d,',
+	},
+	{
+		name: 'coralColorInfoTextWeakActive',
+		type: 'color',
+		description: `Info text color while pressing.`,
+		hsla: 'hsla(208, 84%, 85%, 1)',
+		hex: '#B8DBF9',
+		value: 'hsla(208, 84%, 85%, 1)',
+		id: 'S:e4b2ba1853d230f03d2753da85e902d8befed989,',
+	},
+	{
+		name: 'coralColorInfoTextStrong',
+		type: 'color',
+		description: `Infor text color on info-background.`,
+		hsla: 'hsla(215, 100%, 21%, 1)',
+		hex: '#002D6D',
+		value: 'hsla(215, 100%, 21%, 1)',
+		id: 'S:92d7f8304451a4270a28b05924fcecb25f5da398,',
+	},
+	{
+		name: 'coralColorInfoTextStrongHover',
+		type: 'color',
+		description: `Info text color on mouseover.`,
+		hsla: 'hsla(216, 100%, 28%, 1)',
+		hex: '#003A8F',
+		value: 'hsla(216, 100%, 28%, 1)',
+		id: 'S:fcebcc7ffb00f0701b1038f855b846c461d55fd5,',
+	},
+	{
+		name: 'coralColorInfoTextStrongActive',
+		type: 'color',
+		description: `Info text color while pressing.`,
+		hsla: 'hsla(215, 100%, 21%, 1)',
+		hex: '#002D6D',
+		value: 'hsla(215, 100%, 21%, 1)',
+		id: 'S:be89a1c086681b7883654f5c6c12de293b62ef87,',
+	},
+	{
+		name: 'coralColorInfoBackgroundHover',
+		type: 'color',
+		description: `Accent background color by default, on mouseover.`,
+		hsla: 'hsla(208, 84%, 85%, 1)',
+		hex: '#B8DBF9',
+		value: 'hsla(208, 84%, 85%, 1)',
+		id: 'S:76dd12ff860c032d39c29b31877c087cf2df12a9,',
+	},
+	{
+		name: 'coralColorInfoBackgroundActive',
+		type: 'color',
+		description: `Info background while pressing.`,
+		hsla: 'hsla(207, 84%, 75%, 1)',
+		hex: '#8BC5F5',
+		value: 'hsla(207, 84%, 75%, 1)',
+		id: 'S:3029ecf251020fd474796f0c4991fc2d2375c8d0,',
+	},
+	{
+		name: 'coralColorInfoBackgroundWeak',
+		type: 'color',
+		description: `Weakest info background color. Same color as neutral-background but with info-tinted hover and active. Use as placeholder to indicate that you want info-tinted interactive states.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#ffffff',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:c394fd25f49d3093fe0d900d6a27b274ead01cd4,',
+	},
+	{
+		name: 'coralColorInfoBackgroundWeakHover',
+		type: 'color',
+		description: `Weakest info background color on mouseover.`,
+		hsla: 'hsla(205, 80%, 92%, 1)',
+		hex: '#DAEDFB',
+		value: 'hsla(205, 80%, 92%, 1)',
+		id: 'S:a8068fbc1d0bee44cf3e9b6bdb8578d66dc7bb8a,',
+	},
+	{
+		name: 'coralColorInfoBackgroundWeakActive',
+		type: 'color',
+		description: `Weakest info background color while pressed.`,
+		hsla: 'hsla(208, 84%, 85%, 1)',
+		hex: '#B8DBF9',
+		value: 'hsla(208, 84%, 85%, 1)',
+		id: 'S:5d9a6c09ecad18c5b633f4d849c9600df0701bf7,',
+	},
+	{
+		name: 'coralColorInfoBackgroundStrong',
+		type: 'color',
+		description: `Strongest info background color. Use on strong interactive elements with a informative semantic attached. Use with text-weak.`,
+		hsla: 'hsla(210, 100%, 36%, 1)',
+		hex: '#005DB9',
+		value: 'hsla(210, 100%, 36%, 1)',
+		id: 'S:f99a4555800d50aeb484d7073fce6d241075cc1d,',
+	},
+	{
+		name: 'coralColorInfoBackgroundStrongHover',
+		type: 'color',
+		description: `Strongest info background color on mouseover.`,
+		hsla: 'hsla(216, 100%, 28%, 1)',
+		hex: '#003A8F',
+		value: 'hsla(216, 100%, 28%, 1)',
+		id: 'S:2bcd08c5570401e31e78d51532fc19f96b986612,',
+	},
+	{
+		name: 'coralColorInfoBackgroundStrongActive',
+		type: 'color',
+		description: `Strongest info background color while pressed.`,
+		hsla: 'hsla(215, 100%, 21%, 1)',
+		hex: '#002D6D',
+		value: 'hsla(215, 100%, 21%, 1)',
+		id: 'S:4c34e648ed8bf1a55a6ac17bf2f5f9a886ae4a94,',
+	},
+	{
+		name: 'coralColorInfoBorder',
+		type: 'color',
+		description: `Border color with info semantic.`,
+		hsla: 'hsla(216, 100%, 28%, 1)',
+		hex: '#003A8F',
+		value: 'hsla(216, 100%, 28%, 1)',
+		id: 'S:01e0a0965fe6476498642d0603889a131018fb36,',
+	},
+	{
+		name: 'coralColorInfoBorderHover',
+		type: 'color',
+		description: `Border color with info semantic on mouseover.`,
+		hsla: 'hsla(216, 100%, 28%, 1)',
+		hex: '#003A8F',
+		value: 'hsla(216, 100%, 28%, 1)',
+		id: 'S:d5a7dfbf532630af47dbbbd9a427d66155ecad57,',
+	},
+	{
+		name: 'coralColorInfoBorderActive',
+		type: 'color',
+		description: `Border color with info semantic while pressing.`,
+		hsla: 'hsla(215, 100%, 21%, 1)',
+		hex: '#002D6D',
+		value: 'hsla(215, 100%, 21%, 1)',
+		id: 'S:6e7f204ea4f482d1c67d4a5e1e6c9459ae4e2d05,',
+	},
+	{
+		name: 'coralColorInfoIcon',
+		type: 'color',
+		description: `Icon with info color.Ex: StatusInprogress`,
+		hsla: 'hsla(208, 98%, 43%, 1)',
+		hex: '#0275D9',
+		value: 'hsla(208, 98%, 43%, 1)',
+		id: 'S:467a79e6f77a857d9bc7c32c5650b47e74097460,',
+	},
+	{
+		name: 'coralColorInfoIconHover',
+		type: 'color',
+		description: `Icon with info color, on mouseover.`,
+		hsla: 'hsla(215, 100%, 34%, 1)',
+		hex: '#0047AD',
+		value: 'hsla(215, 100%, 34%, 1)',
+		id: 'S:3ff5b003395fa4cd87faa69f7f5f943e0845be49,',
+	},
+	{
+		name: 'coralColorInfoIconActive',
+		type: 'color',
+		description: `Icon with info color, while pressed.`,
+		hsla: 'hsla(215, 100%, 21%, 1)',
+		hex: '#002D6D',
+		value: 'hsla(215, 100%, 21%, 1)',
+		id: 'S:d0a6491ad3b0f809155269842dd86a21437edf22,',
+	},
+	{
+		name: 'coralColorBrandText',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:6d9fa075aa9c22bbcc20b40c57df885385390edd,',
+	},
+	{
+		name: 'coralColorBrandTextHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 17%, 1)',
+		hex: '#2C2C2C',
+		value: 'hsla(0, 0%, 17%, 1)',
+		id: 'S:7d436fb42c27efda21ee7536005d6e3b04eb4785,',
+	},
+	{
+		name: 'coralColorBrandTextActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 9%, 1)',
+		hex: '#181818',
+		value: 'hsla(0, 0%, 9%, 1)',
+		id: 'S:5c176377aead0caca8154ef2e1ede4f43cd9fee1,',
+	},
+	{
+		name: 'coralColorBrandTextInverted',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:ae3cfc09978e97b8633571201dddb836a19c2967,',
+	},
+	{
+		name: 'coralColorBrandTextInvertedHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 17%, 1)',
+		hex: '#2C2C2C',
+		value: 'hsla(0, 0%, 17%, 1)',
+		id: 'S:19f4e2da901af5156394f8f9a449324d054653a4,',
+	},
+	{
+		name: 'coralColorBrandTextInvertedActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 9%, 1)',
+		hex: '#181818',
+		value: 'hsla(0, 0%, 9%, 1)',
+		id: 'S:2d031bb5dc1a6b2be354fa54490bc60396d4a99f,',
+	},
+	{
+		name: 'coralColorBrandTextSelected',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 13%, 1)',
+		hex: '#202020',
+		value: 'hsla(0, 0%, 13%, 1)',
+		id: 'S:63362b1e8a368acaec1ca43ad2854ccc6a294478,',
+	},
+	{
+		name: 'coralColorBrandBackgroundWeak',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#FFFFFF',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:2a8e319abe82b350fa7c7e3895d8e5435dd54288,',
+	},
+	{
+		name: 'coralColorBrandBackgroundWeakHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 97%, 1)',
+		hex: '#F7F7F7',
+		value: 'hsla(0, 0%, 97%, 1)',
+		id: 'S:1ffe230baf83e7d843d64e76f52a00ef330066e0,',
+	},
+	{
+		name: 'coralColorBrandBackgroundWeakActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 97%, 1)',
+		hex: '#F7F7F7',
+		value: 'hsla(0, 0%, 97%, 1)',
+		id: 'S:46182537a6afcca61653e328ee22cb5e120f04b9,',
+	},
+	{
+		name: 'coralColorBrandBackgroundSelected',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 95%, 1)',
+		hex: '#F2F2F2',
+		value: 'hsla(0, 0%, 95%, 1)',
+		id: 'S:c370ea7d697d90a829088818fc429f756cbe15d9,',
+	},
+	{
+		name: 'coralColorBrandBackgroundInverted',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 98%, 1)',
+		hex: '#FAFAFA',
+		value: 'hsla(0, 0%, 98%, 1)',
+		id: 'S:97574a65cb605798a9efe63f4cfb914a3e186326,',
+	},
+	{
+		name: 'coralColorBrandBackgroundInvertedHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 86%, 1)',
+		hex: '#DCDCDC',
+		value: 'hsla(0, 0%, 86%, 1)',
+		id: 'S:e6c7b7cfeac0f2eaea1a4646ab8fa46ed67a77bf,',
+	},
+	{
+		name: 'coralColorBrandBackgroundInvertedActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 86%, 1)',
+		hex: '#DCDCDC',
+		value: 'hsla(0, 0%, 86%, 1)',
+		id: 'S:08b06b83beb4951a1546b253f10e06f2a72149fe,',
+	},
+	{
+		name: 'coralColorBrandBorder',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:d7590ff56f5769e88f26503e22ce1660599513ae,',
+	},
+	{
+		name: 'coralColorBrandBorderHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:1c1fbad3ca7e87defa986b7b87fc98849bca965a,',
+	},
+	{
+		name: 'coralColorBrandBorderActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:b8ed097f35fb2ece933fa1335e1083a1893cedbf,',
+	},
+	{
+		name: 'coralColorInfoBackground',
+		type: 'color',
+		description: `Info background color by default. Use with text-strong.Ex: InlineMessage`,
+		hsla: 'hsla(205, 80%, 92%, 1)',
+		hex: '#DAEDFB',
+		value: 'hsla(205, 80%, 92%, 1)',
+		id: 'S:b64f52d5aa8e883f55d824a82ab8d279a53c53a7,',
+	},
+	{
+		name: 'coralColorBrandIcon',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:029c4aa63f689fb7abee6a26e818ac8318429f82,',
+	},
+	{
+		name: 'coralColorBrandIconHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 17%, 1)',
+		hex: '#2C2C2C',
+		value: 'hsla(0, 0%, 17%, 1)',
+		id: 'S:55f38783aebb3574786c8f95d09aed86797e0db3,',
+	},
+	{
+		name: 'coralColorBrandIconActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 9%, 1)',
+		hex: '#181818',
+		value: 'hsla(0, 0%, 9%, 1)',
+		id: 'S:29c8c7280f33a19009c3c68debf4210525c118ef,',
+	},
+	{
+		name: 'coralColorBrandIconInverted',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 25%, 1)',
+		hex: '#404040',
+		value: 'hsla(0, 0%, 25%, 1)',
+		id: 'S:6569f93308869ec1cd44cfbfdf47e09e8a4d8d66,',
+	},
+	{
+		name: 'coralColorBrandIconInvertedHover',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 17%, 1)',
+		hex: '#2C2C2C',
+		value: 'hsla(0, 0%, 17%, 1)',
+		id: 'S:9576289e1e05d18ecd11f2d71dc117371705c07c,',
+	},
+	{
+		name: 'coralColorBrandIconInvertedActive',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 9%, 1)',
+		hex: '#181818',
+		value: 'hsla(0, 0%, 9%, 1)',
+		id: 'S:d53391b85e4493ad39a05255192884673f72d87f,',
+	},
+	{
+		name: 'coralColorBrandIconSelected',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 13%, 1)',
+		hex: '#202020',
+		value: 'hsla(0, 0%, 13%, 1)',
+		id: 'S:1471f76ec8a42951247f6ecb12a56c6975806991,',
+	},
+	{
+		name: 'coralColorBrandingBackground',
+		type: 'color',
+		description: `Main brand background. Used for heroes.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#FFFFFF',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:48da8b40c9b41977ec986642cfb91febb77cc536,',
+	},
+	{
+		name: 'coralColorBrandingNavigation',
+		type: 'color',
+		description: `Main navigation background. Used for TopBar and branded Sidebar.`,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#E6E6E6',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:901ebd713b6444217424da171789495f7e32c8d2,',
+	},
+	{
+		name: 'coralColorBrandBackground',
+		type: 'color',
+		description: ``,
+		hsla: 'hsla(0, 0%, 100%, 1)',
+		hex: '#FFFFFF',
+		value: 'hsla(0, 0%, 100%, 1)',
+		id: 'S:f25b5ea68800b1905f1842313f1c767700a92380,',
+	},
+	{
+		name: 'coralSpacingXxs',
+		type: 'measure',
+		description: `Use for paddings or margins`,
+		value: '0.4rem',
+		id: '16bfe560-b4c3-11ec-8521-cbbf4c303d59',
+	},
+	{
+		name: 'coralSpacingXs',
+		type: 'measure',
+		description: `Use for paddings or margins`,
+		value: '0.8rem',
+		id: '1ca7bca0-b4c3-11ec-b522-2f15f0dfcaeb',
+	},
+	{
+		name: 'coralSpacingS',
+		type: 'measure',
+		description: `Use for paddings or margins`,
+		value: '1.2rem',
+		id: '2c35d2b0-b4c3-11ec-96ab-01d033d945fb',
+	},
+	{
+		name: 'coralSpacingM',
+		type: 'measure',
+		description: `Use for paddings or margins`,
+		value: '1.6rem',
+		id: '35c79f20-b4c3-11ec-84df-e5bfacc479f2',
+	},
+	{
+		name: 'coralSpacingL',
+		type: 'measure',
+		description: `Use for margins, paddings of really necessary`,
+		value: '2.8rem',
+		id: '3b3dc8d0-b4c3-11ec-b3c9-73d93683841a',
+	},
+	{
+		name: 'coralSpacingXl',
+		type: 'measure',
+		description: `Use for margins, paddings of really necessary`,
+		value: '3.6rem',
+		id: '4247b1e0-b4c3-11ec-8804-23bba7614e8e',
+	},
+	{
+		name: 'coralSizingMinimal',
+		type: 'measure',
+		description: `Use for fixed-size elements`,
+		value: '1.2rem',
+		id: 'c3717da0-b4c3-11ec-8909-db885780505b',
+	},
+	{
+		name: 'coralSizingXxxs',
+		type: 'measure',
+		description: `For fixed-size elements. Minimal size for interactive elements.`,
+		value: '1.6rem',
+		id: 'ed784f70-b4c3-11ec-b3b5-d3127ac3649e',
+	},
+	{
+		name: 'coralSizingXxs',
+		type: 'measure',
+		description: `Use for fixed-size elements`,
+		value: '2rem',
+		id: '08dc2e80-b4c4-11ec-8350-c9f2819e7422',
+	},
+	{
+		name: 'coralSizingXs',
+		type: 'measure',
+		description: `Use for fixed-size elements`,
+		value: '2.4rem',
+		id: '0e48e250-b4c4-11ec-b383-adf02fe16153',
+	},
+	{
+		name: 'coralSizingS',
+		type: 'measure',
+		description: `Use for fixed-size elements. 
+
+Ex: Small Buttons`,
+		value: '2.8rem',
+		id: '12bf4f40-b4c4-11ec-ae8c-a93a8912678c',
+	},
+	{
+		name: 'coralSizingM',
+		type: 'measure',
+		description: `Use for fixed-size elements.
+
+Ex: Buttons`,
+		value: '3.6rem',
+		id: '1c14d600-b4c4-11ec-9b40-6fc6b8a4ad7a',
+	},
+	{
+		name: 'coralSizingL',
+		type: 'measure',
+		description: `Use for fixed-size elements.
+
+Ex: Icon illustration`,
+		value: '4rem',
+		id: '21129b60-b4c4-11ec-a702-27e439bbf696',
+	},
+	{
+		name: 'coralSizingXxxl',
+		type: 'measure',
+		description: `Use for fixed-size elements.
+
+Ex: Spot illustration height`,
+		value: '22rem',
+		id: '292e1b80-b4c4-11ec-800e-5bc0e3562a54',
+	},
+	{
+		name: 'coralSizingMaximal',
+		type: 'measure',
+		description: `Use for fixed-size elements.
+
+Ex: Spot illustration width`,
+		value: '32rem',
+		id: '2e751ee0-b4c4-11ec-9f9f-75ac4ca4ac00',
+	},
+	{
+		name: 'coralElevationShadowNeutralM',
+		type: 'shadow',
+		description: `Default shadow. Use on "first layer" of elevation. `,
+		value: '0 0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.15)',
+		id: 'S:34a756f910ffc665554a228b44d5eec1e9c463cb,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowAccent',
+		type: 'shadow',
+		description: `Shadow with an accent tint. Use for subtle highlights. Ex: InlineMessage`,
+		value: '0 0.1rem 0.1rem 0 hsla(147, 100%, 26%, 0.25)',
+		id: 'S:6361d40b509d112c733483b262d9b4929ad0e1a9,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowSuccess',
+		type: 'shadow',
+		description: `Shadow with a success tint.Use for subtle highlights. Ex: InlineMessage`,
+		value: '0 0.1rem 0.1rem 0 hsla(147, 100%, 26%, 0.25)',
+		id: 'S:1ccb355087e7a77695f62496bf7eb5c597e51b63,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowDanger',
+		type: 'shadow',
+		description: `Shadow with a danger tint. Use for subtle highlights. Ex: InlineMessage`,
+		value: '0 0.1rem 0.1rem 0 hsla(336, 100%, 34%, 0.25)',
+		id: 'S:127a019202b5a99380f18aeda574499aa518d902,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowWarning',
+		type: 'shadow',
+		description: `Shadow with a warning tint. Use for subtle highlights. Ex: InlineMessage`,
+		value: '0 0.1rem 0.1rem 0 hsla(21, 100%, 45%, 0.25)',
+		id: 'S:b336004b0f814ea5dea03c146da768f78dbe6495,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowBeta',
+		type: 'shadow',
+		description: `Shadow with a beta tint. 
+
+Use for subtle highlights. 
+
+Ex: InlineMessage`,
+		value: '0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.25)',
+		id: 'S:8b514aff6b0d1ad3862f3d1f04d9f0a7d9ee6f3e,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowNeutralInvertedM',
+		type: 'shadow',
+		description: `Default shadow. 
+
+Use on "first layer" of elevation. Reserve it for elements sticking to the bottom of the viewport.`,
+		value: '0 -0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.15)',
+		id: 'S:1402e349bd668e8e2765a70a5b3c9d4aa261f6ac,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowNeutralInvertedL',
+		type: 'shadow',
+		description: `Large shadow. 
+
+Use on "second layer" of elevation - something that need to be "above" anything else.
+Reserve it for elements sticking to the bottom of the viewport.`,
+		value: '0 0.4rem 1rem 0 hsla(0, 0%, 0%, 0.15)',
+		id: 'S:2442aa4ab53dacae61024bae62200ad42e042707,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowNeutralL',
+		type: 'shadow',
+		description: `Large shadow. 
+
+Use on "second layer" of elevation - something that need to be "above" anything else.`,
+		value: '0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3)',
+		id: 'S:a2f6e4c6b17f0f6fcf8525d14fbd34f992350375,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowNeutralS',
+		type: 'shadow',
+		description: `Small shadow.
+
+Use for small elements such as accordion.`,
+		value: '0 0.1rem 0.1rem 0 hsla(0, 0%, 0%, 0.15)',
+		id: 'S:c1c3ef7a3bd771214c8c2dbaa2991e62a9f42f60,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowNeutralInvertedS',
+		type: 'shadow',
+		description: ``,
+		value: '0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.15)',
+		id: 'S:42035c14a5e1e8cc9bf3ce9173099f5df7f59780,:shadow:0',
+	},
+	{
+		name: 'coralElevationShadowInfo',
+		type: 'shadow',
+		description: ``,
+		value: '0 0.1rem 0.1rem 0 hsla(210, 100%, 36%, 0.25)',
+		id: 'S:438e8db6ed4fd2dd2a98b57092688b9951159a9a,:shadow:0',
+	},
+	{
+		name: 'coralHeadingL',
+		type: 'typography',
+		description: `Heading text - Use for highest level headings.`,
+		value: `600 1.8rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.8rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:6bb115f27ce676bc5491994efd88dc26e42f8278,',
+	},
+	{
+		name: 'coralParagraphM',
+		type: 'typography',
+		description: `Paragraph text - Standard size.`,
+		value: `400 1.4rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:5f86329d644f421531e3b10ecd2c2ddc9aab7534,',
+	},
+	{
+		name: 'coralParagraphMBold',
+		type: 'typography',
+		description: `Paragraph text - Standard size, bold.`,
+		value: `600 1.4rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:d0051bcd9176315ca785dcd5f4f38cae78fc3365,',
+	},
+	{
+		name: 'coralParagraphS',
+		type: 'typography',
+		description: `Paragraph text - Small size.`,
+		value: `400 1.2rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontSize: '1.2rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:b65ed5e12e3bdbcd4e4d5c671e5e0c4e9c036508,',
+	},
+	{
+		name: 'coralParagraphSBold',
+		type: 'typography',
+		description: `Paragraph text - Standard size bold.`,
+		value: `600 1.2rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.2rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:d1431673fbf2f45ad943eadb6059a7772f5e6135,',
+	},
+	{
+		name: 'coralHeadingM',
+		type: 'typography',
+		description: `Heading text - Use for medium level headings, most current ones.`,
+		value: `600 1.6rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.6rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:66b449607e413393608bc764de806198cd9c823c,',
+	},
+	{
+		name: 'coralHeadingS',
+		type: 'typography',
+		description: `Heading text - Use for small level headings. Use with caution, this can clash with bold paragraphs.`,
+		value: `600 1.4rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:3dd149175fbc721e3fb89a0b02bcfd5d52ac651e,',
+	},
+	{
+		name: 'coralDataM',
+		type: 'typography',
+		description: ``,
+		value: `400 1.4rem/140% 'Inconsolata'`,
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Inconsolata',
+		id: 'S:1237da4bc0c13b10a30023cb0076edbfc83f79e8,',
+	},
+	{
+		name: 'coralDataMBold',
+		type: 'typography',
+		description: ``,
+		value: `700 1.4rem/140% 'Inconsolata'`,
+		fontStyle: 'normal',
+		fontWeight: '700',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Inconsolata',
+		id: 'S:4d7b8461e5b594b28d6d64272b468b810ff31e92,',
+	},
+	{
+		name: 'coralLinkMUnderlined',
+		type: 'typography',
+		description: `Use only with accent/text-hover
+
+Developers: use Link component instead, you do not need to recreate styles.`,
+		value: `600 1.4rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:3a35dcf2dc13003c2de78b3720430ace5a5dcd77,',
+	},
+	{
+		name: 'coralLinkM',
+		type: 'typography',
+		description: `Use only with accent/text.
+
+Developers: use Link component instead, you do not need to recreate styles.`,
+		value: `600 1.4rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:14231707ce62ba7e59d9fa51c7398fc916879560,',
+	},
+	{
+		name: 'coralDataXl',
+		type: 'typography',
+		description: `Data text style - use for large display of metrics.`,
+		value: `400 2.4rem/140% 'Inconsolata'`,
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontSize: '2.4rem',
+		lineHeight: '140%',
+		fontFamily: 'Inconsolata',
+		id: 'S:6136688c80e14f3c6a44576a2d5b943c6ce76121,',
+	},
+	{
+		name: 'coralLinkS',
+		type: 'typography',
+		description: `For links included in paragraphs using paragraph/S or for small breadcrumbs`,
+		value: `600 1.2rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.2rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:6fe023511d622ae1addba3ad36962df23dcdf736,',
+	},
+	{
+		name: 'coralLinkSUnderlined',
+		type: 'typography',
+		description: `For links included in paragraphs using paragraph/S or for small breadcrumbs`,
+		value: `600 1.2rem/140% 'Source Sans Pro'`,
+		fontStyle: 'normal',
+		fontWeight: '600',
+		fontSize: '1.2rem',
+		lineHeight: '140%',
+		fontFamily: 'Source Sans Pro',
+		id: 'S:92f8c230bf3768ccc26f706abcfd5db498c78984,',
+	},
+	{
+		name: 'coralRadiusM',
+		type: 'radius',
+		description: `Radius for molecules (Accordion, Fieldset, Popover, etc.)`,
+		value: '0.8rem',
+		id: '73293f90-3e58-11ec-94da-6d5db9104cfa',
+	},
+	{
+		name: 'coralRadiusL',
+		type: 'radius',
+		description: `Radius for layout components (Card, Modal, etc.)`,
+		value: '1.6rem',
+		id: '7ba9c311-3e58-11ec-94da-6d5db9104cfa',
+	},
+	{
+		name: 'coralRadiusRound',
+		type: 'radius',
+		description: `Radius for immediate actions (badges, switch, etc.)`,
+		value: '9999.9rem',
+		id: '887c1481-3e58-11ec-94da-6d5db9104cfa',
+	},
+	{
+		name: 'coralRadiusS',
+		type: 'radius',
+		description: `Radius for atomic components (button, tag, tooltip, etc.) `,
+		value: '0.4rem',
+		id: '52824640-4783-11ec-a826-6db8532cd4e8',
+	},
+	{
+		name: 'coralBorderSSolid',
+		type: 'border',
+		description: `Solid border to visually separate elements`,
+		value: `1px solid`,
+		id: '2856c970-40b4-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralBorderMSolid',
+		type: 'border',
+		description: `Solid border to visually identify a selection`,
+		value: `2px solid`,
+		id: '3105aff1-40b4-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralBorderSDashed',
+		type: 'border',
+		description: `Dashed border to visually identify potentially interactive components.
+
+Ex: Droppable zone`,
+		value: `1px dashed`,
+		id: '37916851-40b4-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralBorderMDashed',
+		type: 'border',
+		description: `Dashed border to visually identify a possible selection.
+
+Ex: Ongoing mapper link`,
+		value: `2px dashed`,
+		id: '43602c71-40b4-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralOpacityL',
+		type: 'opacity',
+		description: `Very transparent.
+
+Opacity for components that are not currently enabled.`,
+		value: `0.2`,
+		id: 'ddfa9d50-40b5-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralOpacityM',
+		type: 'opacity',
+		description: `Transparent.
+
+Opacity for components that are only temporarily disabled.`,
+		value: `0.4`,
+		id: 'e9be8c01-40b5-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralOpacityS',
+		type: 'opacity',
+		description: `Barely transparent.`,
+		value: `0.6`,
+		id: 'f65d4a51-40b5-11ec-a696-dbb292a77d6e',
+	},
+	{
+		name: 'coralBreakpointS',
+		type: 'breakpoint',
+		description: `Small screen (Portrait)`,
+		value: `40em`,
+		id: 'e8d1aad0-4140-11ec-8de5-f7dcd20b9ace',
+	},
+	{
+		name: 'coralBreakpointM',
+		type: 'breakpoint',
+		description: `Small screen (Landscape)`,
+		value: `48em`,
+		id: 'f70c8cf1-4140-11ec-8de5-f7dcd20b9ace',
+	},
+	{
+		name: 'coralBreakpointL',
+		type: 'breakpoint',
+		description: `Wide screen (Portrait)`,
+		value: `64em`,
+		id: '034adbc1-4141-11ec-8de5-f7dcd20b9ace',
+	},
+	{
+		name: 'coralBreakpointXl',
+		type: 'breakpoint',
+		description: `Wide screen (Landscape)`,
+		value: `80em`,
+		id: '12525cb1-4141-11ec-8de5-f7dcd20b9ace',
+	},
+	{
+		name: 'coralBrandingLogo',
+		type: 'branding',
+		description: `Brand logo in App heading`,
+		value: `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPGc+CiAgICA8cGF0aCBjbGFzcz0idGktYmFja2dyb3VuZCIgIGZpbGw9IiMxNUFBNTEiIGQ9Ik0xNiw4IEMxNiwxMi40MTg4NzM3IDEyLjQxODI2NDgsMTYuMDAwNjA4OCA4LDE2LjAwMDYwODggQzMuNTgxNzM1MTYsMTYuMDAwNjA4OCAwLDEyLjQxODg3MzcgMCw4IEMwLDMuNTgxNzM1MTYgMy41ODE3MzUxNiw1LjM0OTk2ODgzZS0xNCA4LDUuMzQ5OTY4ODNlLTE0IEMxMi40MTgyNjQ4LDUuMzQ5OTY4ODNlLTE0IDE2LDMuNTgxNzM1MTYgMTYsOCIvPgogICAgPHBhdGggY2xhc3M9InRpLWZvcmVncm91bmQiIGZpbGw9IiNGRkYiIGQ9Ik0xMC4xNzgwMTY4LDExLjQzMTYwMzQgQzEwLjE1MTM5NSwxMS4zNTQxNTggMTAuMTEzODgyNCwxMS4yODIxNTggMTAuMDY0ODczOSwxMS4yMTYyMDg0IEMxMC4wMTY0NzA2LDExLjE0OTY1MzggOS45Nzg5NTc5OCwxMS4xMjMwMzE5IDkuOTUyMzM2MTMsMTEuMTM2MzQyOSBDOS43ODQxMzQ0NSwxMS4yMTk4Mzg3IDkuNjAwMjAxNjgsMTEuMjkxMjMzNiA5LjQwMTE0Mjg2LDExLjM0ODcxMjYgQzkuMjAyMDg0MDMsMTEuNDA2MTkxNiA5LjAyOTA0MjAyLDExLjQzNTIzMzYgOC44ODMyMjY4OSwxMS40MzUyMzM2IEM4LjcxOTI2MDUsMTEuNDM1MjMzNiA4LjU5NDAxNjgxLDExLjM5NzcyMSA4LjUwODEwMDg0LDExLjMyNTcyMSBDOC40MjE1Nzk4MywxMS4yNTI1MTA5IDguMzU5ODY1NTUsMTEuMTE2OTgxNSA4LjMyMjM1Mjk0LDEwLjkyMDM0MjkgQzguMjg0MjM1MjksMTAuNzIzNzA0MiA4LjI2NTQ3ODk5LDEwLjQzNjMwOTIgOC4yNjU0Nzg5OSwxMC4wNTk5NzMxIEw4LjI2NTQ3ODk5LDYuMjQyNzYzMDMgTDkuNjkzMzc4MTUsNi4yNDI3NjMwMyBDOS43NDE3ODE1MSw2LjI0Mjc2MzAzIDkuNzg3MTU5NjYsNi4xOTYxNzQ3OSA5LjgyOTUxMjYxLDYuMTAyMzkzMjggQzkuODcxMjYwNSw2LjAxMDQyNjg5IDkuODkyNDM2OTcsNS44OTU0Njg5MSA5Ljg5MjQzNjk3LDUuNzU4MTI0MzcgQzkuODkyNDM2OTcsNS43MDAwNDAzNCA5Ljg3NzkxNTk3LDUuNjQ4NjExNzYgOS44NDg4NzM5NSw1LjYwNTA0ODc0IEM5LjgyMDQzNjk3LDUuNTYwODgwNjcgOS43ODE3MTQyOSw1LjUzNjY3ODk5IDkuNzMzMzEwOTIsNS41MzI0NDM3IEw4LjI2NTQ3ODk5LDUuNTMyNDQzNyBMOC4yNjU0Nzg5OSwzLjY3OTIgQzguMjY1NDc4OTksMy42MDIzNTk2NiA4LjIxNDY1NTQ2LDMuNTQ3OTA1ODggOC4xMjQ1MDQyLDMuNTEwOTk4MzIgQzcuOTU4MTE3NjUsMy40NTg5NjQ3MSA3Ljg2MDcwNTg4LDMuNjM5ODcyMjcgNy44NjA3MDU4OCwzLjYzOTg3MjI3IEM3LjQxNDE4NDg3LDQuNjcyMDczOTUgNi41Mzc0Nzg5OSw1LjQ2ODkxNDI5IDUuNDUzMjQzNyw1LjgwODM0Mjg2IEM1LjQ1MzI0MzcsNS44MDgzNDI4NiA1LjIzMTc5ODMyLDUuODYwOTgxNTEgNS4yODg2NzIyNyw2LjA5MjcxMjYxIEM1LjI5NTMyNzczLDYuMTEyNjc4OTkgNS4zMDEzNzgxNSw2LjEzMjY0NTM4IDUuMzExMDU4ODIsNi4xNTI2MTE3NiBDNS4zNDE5MTU5Nyw2LjIxNzM1MTI2IDUuMzc5NDI4NTcsNi4yNTA2Mjg1NyA1LjQyMzU5NjY0LDYuMjU2MDczOTUgTDYuMTMzOTE1OTcsNi4yNTYwNzM5NSBMNi4xMzM5MTU5NywxMC42NTE3MDQyIEM2LjEzMzkxNTk3LDExLjI3NTUwMjUgNi4zMjMyOTQxMiwxMS43MTE3Mzc4IDYuNzAyMDUwNDIsMTEuOTU5ODA1IEM3LjA4MDIwMTY4LDEyLjIwNzI2NzIgNy41ODg0MzY5NywxMi4zMzA2OTU4IDguMjI1NTQ2MjIsMTIuMzMwNjk1OCBDOC40MjUyMTAwOCwxMi4zMzA2OTU4IDguNjU2MzM2MTMsMTIuMjkzNzg4MiA4LjkxOTUyOTQxLDEyLjIxODc2MyBDOS4xODI3MjI2OSwxMi4xNDMxMzI4IDkuNDMwNzg5OTIsMTIuMDQ2OTMxMSA5LjY2MzEyNjA1LDExLjkyOTU1MjkgQzkuODk2MDY3MjMsMTEuODEyNzc5OCAxMC4wNjcyOTQxLDExLjY5NDE5MTYgMTAuMTc4MDE2OCwxMS41NzM3ODgyIEMxMC4yMDQ2Mzg3LDExLjU1Njg0NzEgMTAuMjA0NjM4NywxMS41MDkwNDg3IDEwLjE3ODAxNjgsMTEuNDMxNjAzNCIvPgogIDwvZz4KPC9zdmc+Cg==)`,
+		id: 'ee8df300-4787-11ec-a826-6db8532cd4e8',
+	},
+	{
+		name: 'coralTransitionInstant',
+		type: 'transition',
+		description: `Instant transition for hovering effects (opacity, color...)`,
+		value: `100ms ease-out`,
+		id: 'fde4cb70-5d8b-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralTransitionFast',
+		type: 'transition',
+		description: `Fast transition for "out" effects (closing menu, hide modal...)`,
+		value: `250ms ease-in-out`,
+		id: '087f7c61-5d8c-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralTransitionNormal',
+		type: 'transition',
+		description: `Normal transition for "in" effects (opening menu, show modal...)`,
+		value: `300ms ease-in-out`,
+		id: '1f78fc71-5d8c-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralTransitionSlow',
+		type: 'transition',
+		description: `Slow transition for background illustrations with movement.`,
+		value: `400ms ease-in`,
+		id: '31b8ec11-5d8c-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralElevationLayerFlat',
+		type: 'elevation',
+		description: `Default content elevation`,
+		value: `2000`,
+		id: '26c8aba1-5d8d-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralElevationLayerStandardFront',
+		type: 'elevation',
+		description: `First elevation layer.
+
+Just above the default content (Drawer, Modal, Fixed layout...)`,
+		value: `2004`,
+		id: '2d995c41-5d8d-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralElevationLayerInteractiveFront',
+		type: 'elevation',
+		description: `Second elevation layer. 
+
+For elements above any layout (Dropdown, Popover).`,
+		value: `2008`,
+		id: '334e63b1-5d8d-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralElevationLayerOverlay',
+		type: 'elevation',
+		description: `Topmost layer.
+
+For items that stand on top of anything (Alert, Confirm, Tooltip, etc.)`,
+		value: `2016`,
+		id: '3853ca31-5d8d-11ec-9f08-61882f73ab2c',
+	},
+	{
+		name: 'coralAnimationHeartbeat',
+		type: 'animation',
+		description: `Heartbeat animation. 
+
+Ex: Skeletons 
+
+Usage: 
+
+animate: tokens.$animation-heartbeat;`,
+		value: `coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite`,
+		id: '4c3ea510-93cf-11ec-969d-2dcd5665e329',
+	},
+];
+
+export default dictionary;
diff --git a/packages/design-tokens/src/qlik-light/index.ts b/packages/design-tokens/src/qlik-light/index.ts
new file mode 100644
index 00000000000..0c57bbf4be5
--- /dev/null
+++ b/packages/design-tokens/src/qlik-light/index.ts
@@ -0,0 +1,345 @@
+const tokens = {
+	coralColorNeutralText: `var(--coral-color-neutral-text, hsla(0, 0%, 25%, 1))`,
+	coralColorNeutralTextWeak: `var(--coral-color-neutral-text-weak, hsla(0, 0%, 0%, 0.55))`,
+	coralColorNeutralTextDisabled: `var(--coral-color-neutral-text-disabled, hsla(0, 0%, 0%, 0.3))`,
+	coralColorNeutralTextInverted: `var(--coral-color-neutral-text-inverted, hsla(0, 0%, 100%, 1))`,
+	coralColorNeutralBackground: `var(--coral-color-neutral-background, hsla(0, 0%, 100%, 1))`,
+	coralColorNeutralBackgroundMedium: `var(--coral-color-neutral-background-medium, hsla(0, 0%, 98%, 1))`,
+	coralColorNeutralBackgroundStrong: `var(--coral-color-neutral-background-strong, hsla(0, 0%, 95%, 1))`,
+	coralColorNeutralBackgroundDisabled: `var(--coral-color-neutral-background-disabled, hsla(0, 0%, 65%, 1))`,
+	coralColorNeutralBorder: `var(--coral-color-neutral-border, hsla(0, 0%, 55%, 1))`,
+	coralColorNeutralBorderWeak: `var(--coral-color-neutral-border-weak, hsla(0, 0%, 85%, 1))`,
+	coralColorNeutralBorderHover: `var(--coral-color-neutral-border-hover, hsla(0, 0%, 35%, 1))`,
+	coralColorAccentTextWeak: `var(--coral-color-accent-text-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorAccentTextWeakHover: `var(--coral-color-accent-text-weak-hover, hsla(138, 56%, 92%, 1))`,
+	coralColorAccentTextWeakActive: `var(--coral-color-accent-text-weak-active, hsla(135, 48%, 84%, 1))`,
+	coralColorAccentText: `var(--coral-color-accent-text, hsla(147, 100%, 26%, 1))`,
+	coralColorAccentTextHover: `var(--coral-color-accent-text-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorAccentTextActive: `var(--coral-color-accent-text-active, hsla(144, 78%, 16%, 1))`,
+	coralColorAccentBackground: `var(--coral-color-accent-background, hsla(138, 56%, 92%, 1))`,
+	coralColorAccentBackgroundHover: `var(--coral-color-accent-background-hover, hsla(135, 48%, 84%, 1))`,
+	coralColorAccentBackgroundActive: `var(--coral-color-accent-background-active, hsla(136, 47%, 74%, 1))`,
+	coralColorAccentBackgroundWeak: `var(--coral-color-accent-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorAccentBackgroundWeakHover: `var(--coral-color-accent-background-weak-hover, hsla(138, 56%, 92%, 1))`,
+	coralColorAccentBackgroundWeakActive: `var(--coral-color-accent-background-weak-active, hsla(135, 48%, 84%, 1))`,
+	coralColorAccentBackgroundStrong: `var(--coral-color-accent-background-strong, hsla(147, 100%, 26%, 1))`,
+	coralColorAccentBackgroundStrongHover: `var(--coral-color-accent-background-strong-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorAccentBackgroundStrongActive: `var(--coral-color-accent-background-strong-active, hsla(144, 78%, 16%, 1))`,
+	coralColorAccentBorderHover: `var(--coral-color-accent-border-hover, hsla(144, 78%, 16%, 1))`,
+	coralColorAccentBorderActive: `var(--coral-color-accent-border-active, hsla(144, 78%, 16%, 1))`,
+	coralColorDangerTextWeak: `var(--coral-color-danger-text-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorDangerTextWeakHover: `var(--coral-color-danger-text-weak-hover, hsla(346, 85%, 92%, 1))`,
+	coralColorDangerTextWeakActive: `var(--coral-color-danger-text-weak-active, hsla(345, 87%, 85%, 1))`,
+	coralColorDangerText: `var(--coral-color-danger-text, hsla(336, 100%, 34%, 1))`,
+	coralColorDangerTextHover: `var(--coral-color-danger-text-hover, hsla(332, 100%, 27%, 1))`,
+	coralColorDangerTextActive: `var(--coral-color-danger-text-active, hsla(332, 100%, 18%, 1))`,
+	coralColorDangerBackground: `var(--coral-color-danger-background, hsla(346, 85%, 92%, 1))`,
+	coralColorDangerBackgroundHover: `var(--coral-color-danger-background-hover, hsla(345, 87%, 85%, 1))`,
+	coralColorDangerBackgroundActive: `var(--coral-color-danger-background-active, hsla(346, 86%, 75%, 1))`,
+	coralColorDangerBackgroundWeak: `var(--coral-color-danger-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorDangerBackgroundWeakHover: `var(--coral-color-danger-background-weak-hover, hsla(346, 85%, 92%, 1))`,
+	coralColorDangerBackgroundWeakActive: `var(--coral-color-danger-background-weak-active, hsla(345, 87%, 85%, 1))`,
+	coralColorSuccessTextWeak: `var(--coral-color-success-text-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorSuccessTextWeakHover: `var(--coral-color-success-text-weak-hover, hsla(138, 56%, 92%, 1))`,
+	coralColorSuccessTextWeakActive: `var(--coral-color-success-text-weak-active, hsla(135, 48%, 84%, 1))`,
+	coralColorSuccessText: `var(--coral-color-success-text, hsla(147, 100%, 26%, 1))`,
+	coralColorSuccessTextHover: `var(--coral-color-success-text-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorSuccessTextActive: `var(--coral-color-success-text-active, hsla(144, 78%, 16%, 1))`,
+	coralColorSuccessBackground: `var(--coral-color-success-background, hsla(138, 56%, 92%, 1))`,
+	coralColorDangerBackgroundStrong: `var(--coral-color-danger-background-strong, hsla(336, 100%, 34%, 1))`,
+	coralColorDangerBackgroundStrongHover: `var(--coral-color-danger-background-strong-hover, hsla(332, 100%, 27%, 1))`,
+	coralColorDangerBackgroundStrongActive: `var(--coral-color-danger-background-strong-active, hsla(332, 100%, 18%, 1))`,
+	coralColorDangerBorder: `var(--coral-color-danger-border, hsla(332, 100%, 27%, 1))`,
+	coralColorSuccessBackgroundHover: `var(--coral-color-success-background-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorDangerBorderHover: `var(--coral-color-danger-border-hover, hsla(332, 100%, 27%, 1))`,
+	coralColorSuccessBackgroundActive: `var(--coral-color-success-background-active, hsla(136, 47%, 74%, 1))`,
+	coralColorDangerBorderActive: `var(--coral-color-danger-border-active, hsla(332, 100%, 18%, 1))`,
+	coralColorSuccessBackgroundWeak: `var(--coral-color-success-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorSuccessBackgroundWeakHover: `var(--coral-color-success-background-weak-hover, hsla(138, 56%, 92%, 1))`,
+	coralColorSuccessBackgroundWeakActive: `var(--coral-color-success-background-weak-active, hsla(135, 48%, 84%, 1))`,
+	coralColorSuccessBackgroundStrong: `var(--coral-color-success-background-strong, hsla(147, 100%, 26%, 1))`,
+	coralColorSuccessBackgroundStrongHover: `var(--coral-color-success-background-strong-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorSuccessBackgroundStrongActive: `var(--coral-color-success-background-strong-active, hsla(144, 78%, 16%, 1))`,
+	coralColorWarningTextWeak: `var(--coral-color-warning-text-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorWarningTextWeakHover: `var(--coral-color-warning-text-weak-hover, hsla(35, 100%, 88%, 1))`,
+	coralColorWarningTextWeakActive: `var(--coral-color-warning-text-weak-active, hsla(36, 100%, 75%, 1))`,
+	coralColorSuccessBorder: `var(--coral-color-success-border, hsla(144, 78%, 23%, 1))`,
+	coralColorWarningText: `var(--coral-color-warning-text, hsla(18, 100%, 37%, 1))`,
+	coralColorWarningTextHover: `var(--coral-color-warning-text-hover, hsla(14, 100%, 28%, 1))`,
+	coralColorWarningTextActive: `var(--coral-color-warning-text-active, hsla(11, 100%, 19%, 1))`,
+	coralColorWarningBackground: `var(--coral-color-warning-background, hsla(35, 100%, 88%, 1))`,
+	coralColorSuccessBorderHover: `var(--coral-color-success-border-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorWarningBackgroundHover: `var(--coral-color-warning-background-hover, hsla(36, 100%, 75%, 1))`,
+	coralColorSuccessBorderActive: `var(--coral-color-success-border-active, hsla(144, 78%, 16%, 1))`,
+	coralColorWarningBackgroundActive: `var(--coral-color-warning-background-active, hsla(36, 100%, 65%, 1))`,
+	coralColorWarningBackgroundWeak: `var(--coral-color-warning-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorAssistiveText: `var(--coral-color-assistive-text, hsla(0, 0%, 100%, 1))`,
+	coralColorWarningBackgroundWeakHover: `var(--coral-color-warning-background-weak-hover, hsla(35, 100%, 88%, 1))`,
+	coralColorWarningBackgroundWeakActive: `var(--coral-color-warning-background-weak-active, hsla(36, 100%, 75%, 1))`,
+	coralColorAssistiveBackground: `var(--coral-color-assistive-background, hsla(210, 62%, 5%, 1))`,
+	coralColorWarningBackgroundStrong: `var(--coral-color-warning-background-strong, hsla(21, 100%, 45%, 1))`,
+	coralColorWarningBackgroundStrongHover: `var(--coral-color-warning-background-strong-hover, hsla(14, 100%, 28%, 1))`,
+	coralColorWarningBackgroundStrongActive: `var(--coral-color-warning-background-strong-active, hsla(11, 100%, 19%, 1))`,
+	coralColorWarningBorder: `var(--coral-color-warning-border, hsla(14, 100%, 28%, 1))`,
+	coralColorAssistiveBorder: `var(--coral-color-assistive-border, hsla(0, 0%, 47%, 1))`,
+	coralColorWarningBorderHover: `var(--coral-color-warning-border-hover, hsla(14, 100%, 28%, 1))`,
+	coralColorWarningBorderActive: `var(--coral-color-warning-border-active, hsla(11, 100%, 19%, 1))`,
+	coralColorBrandingBrand: `var(--coral-color-branding-brand, hsla(144, 78%, 37%, 1))`,
+	coralColorNeutralBorderDisabled: `var(--coral-color-neutral-border-disabled, hsla(0, 0%, 65%, 1))`,
+	coralColorNeutralBorderWeakHover: `var(--coral-color-neutral-border-weak-hover, hsla(0, 0%, 70%, 1))`,
+	coralColorAssistiveBorderFocus: `var(--coral-color-assistive-border-focus, hsla(208, 98%, 43%, 1))`,
+	coralColorAccentTextStrong: `var(--coral-color-accent-text-strong, hsla(144, 78%, 16%, 1))`,
+	coralColorAccentTextStrongHover: `var(--coral-color-accent-text-strong-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorAccentTextStrongActive: `var(--coral-color-accent-text-strong-active, hsla(144, 78%, 16%, 1))`,
+	coralColorDangerTextStrong: `var(--coral-color-danger-text-strong, hsla(332, 100%, 18%, 1))`,
+	coralColorDangerTextStrongHover: `var(--coral-color-danger-text-strong-hover, hsla(332, 100%, 27%, 1))`,
+	coralColorDangerTextStrongActive: `var(--coral-color-danger-text-strong-active, hsla(332, 100%, 18%, 1))`,
+	coralColorSuccessTextStrong: `var(--coral-color-success-text-strong, hsla(144, 78%, 16%, 1))`,
+	coralColorSuccessTextStrongHover: `var(--coral-color-success-text-strong-hover, hsla(144, 78%, 23%, 1))`,
+	coralColorSuccessTextStrongActive: `var(--coral-color-success-text-strong-active, hsla(144, 78%, 16%, 1))`,
+	coralColorWarningTextStrong: `var(--coral-color-warning-text-strong, hsla(11, 100%, 19%, 1))`,
+	coralColorWarningTextStrongHover: `var(--coral-color-warning-text-strong-hover, hsla(14, 100%, 28%, 1))`,
+	coralColorWarningTextStrongActive: `var(--coral-color-warning-text-strong-active, hsla(11, 100%, 19%, 1))`,
+	coralColorBetaText: `var(--coral-color-beta-text, hsla(280, 57%, 49%, 1))`,
+	coralColorBetaTextHover: `var(--coral-color-beta-text-hover, hsla(281, 58%, 39%, 1))`,
+	coralColorBetaTextActive: `var(--coral-color-beta-text-active, hsla(281, 58%, 29%, 1))`,
+	coralColorBetaIcon: `var(--coral-color-beta-icon, hsla(280, 80%, 54%, 1))`,
+	coralColorBetaIconHover: `var(--coral-color-beta-icon-hover, hsla(280, 80%, 44%, 1))`,
+	coralColorBetaIconActive: `var(--coral-color-beta-icon-active, hsla(280, 80%, 34%, 1))`,
+	coralColorBetaTextWeak: `var(--coral-color-beta-text-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorBetaTextWeakHover: `var(--coral-color-beta-text-weak-hover, hsla(280, 56%, 83%, 1))`,
+	coralColorBetaTextWeakActive: `var(--coral-color-beta-text-weak-active, hsla(280, 57%, 73%, 1))`,
+	coralColorBetaTextStrong: `var(--coral-color-beta-text-strong, hsla(281, 58%, 29%, 1))`,
+	coralColorBetaTextStrongHover: `var(--coral-color-beta-text-strong-hover, hsla(282, 58%, 19%, 1))`,
+	coralColorBetaTextStrongActive: `var(--coral-color-beta-text-strong-active, hsla(282, 57%, 9%, 1))`,
+	coralColorBetaBackground: `var(--coral-color-beta-background, hsla(279, 57%, 90%, 1))`,
+	coralColorBetaBackgroundHover: `var(--coral-color-beta-background-hover, hsla(279, 57%, 81%, 1))`,
+	coralColorBetaBackgroundActive: `var(--coral-color-beta-background-active, hsla(279, 57%, 71%, 1))`,
+	coralColorBetaBackgroundWeak: `var(--coral-color-beta-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorBetaBackgroundWeakHover: `var(--coral-color-beta-background-weak-hover, hsla(279, 57%, 90%, 1))`,
+	coralColorBetaBackgroundWeakActive: `var(--coral-color-beta-background-weak-active, hsla(279, 57%, 80%, 1))`,
+	coralColorBetaBackgroundStrong: `var(--coral-color-beta-background-strong, hsla(281, 58%, 29%, 1))`,
+	coralColorBetaBackgroundStrongHover: `var(--coral-color-beta-background-strong-hover, hsla(282, 58%, 19%, 1))`,
+	coralColorBetaBackgroundStrongActive: `var(--coral-color-beta-background-strong-active, hsla(282, 57%, 9%, 1))`,
+	coralColorBetaBorder: `var(--coral-color-beta-border, hsla(281, 58%, 29%, 1))`,
+	coralColorBetaBorderHover: `var(--coral-color-beta-border-hover, hsla(282, 58%, 19%, 1))`,
+	coralColorBetaBorderActive: `var(--coral-color-beta-border-active, hsla(282, 57%, 9%, 1))`,
+	coralColorNeutralBorderStrong: `var(--coral-color-neutral-border-strong, hsla(0, 0%, 25%, 1))`,
+	coralColorNeutralBorderStrongHover: `var(--coral-color-neutral-border-strong-hover, hsla(0, 0%, 15%, 1))`,
+	coralColorNeutralIconInverted: `var(--coral-color-neutral-icon-inverted, hsla(0, 0%, 100%, 1))`,
+	coralColorNeutralIcon: `var(--coral-color-neutral-icon, hsla(0, 0%, 25%, 1))`,
+	coralColorNeutralIconWeak: `var(--coral-color-neutral-icon-weak, hsla(0, 0%, 55%, 1))`,
+	coralColorAccentIcon: `var(--coral-color-accent-icon, hsla(144, 78%, 37%, 1))`,
+	coralColorAccentIconHover: `var(--coral-color-accent-icon-hover, hsla(147, 100%, 26%, 1))`,
+	coralColorAccentIconActive: `var(--coral-color-accent-icon-active, hsla(144, 78%, 16%, 1))`,
+	coralColorDangerIcon: `var(--coral-color-danger-icon, hsla(339, 100%, 42%, 1))`,
+	coralColorDangerIconHover: `var(--coral-color-danger-icon-hover, hsla(336, 100%, 34%, 1))`,
+	coralColorDangerIconActive: `var(--coral-color-danger-icon-active, hsla(332, 100%, 18%, 1))`,
+	coralColorSuccessIcon: `var(--coral-color-success-icon, hsla(144, 78%, 37%, 1))`,
+	coralColorSuccessIconHover: `var(--coral-color-success-icon-hover, hsla(147, 100%, 26%, 1))`,
+	coralColorSuccessIconActive: `var(--coral-color-success-icon-active, hsla(144, 78%, 16%, 1))`,
+	coralColorWarningIcon: `var(--coral-color-warning-icon, hsla(27, 100%, 47%, 1))`,
+	coralColorWarningIconHover: `var(--coral-color-warning-icon-hover, hsla(18, 100%, 37%, 1))`,
+	coralColorWarningIconActive: `var(--coral-color-warning-icon-active, hsla(11, 100%, 19%, 1))`,
+	coralColorChartsNeutral: `var(--coral-color-charts-neutral, hsla(0, 0%, 22%, 1))`,
+	coralColorChartsNeutralWeak: `var(--coral-color-charts-neutral-weak, hsla(0, 0%, 83%, 1))`,
+	coralColorChartsNeutralStrong: `var(--coral-color-charts-neutral-strong, hsla(0, 0%, 12%, 1))`,
+	coralColorChartsNeutralHover: `var(--coral-color-charts-neutral-hover, hsla(0, 0%, 12%, 1))`,
+	coralColorChartsSuccess: `var(--coral-color-charts-success, hsla(148, 87%, 40%, 1))`,
+	coralColorChartsSuccessWeak: `var(--coral-color-charts-success-weak, hsla(130, 52%, 91%, 1))`,
+	coralColorChartsSuccessStrong: `var(--coral-color-charts-success-strong, hsla(139, 50%, 22%, 1))`,
+	coralColorChartsSuccessHover: `var(--coral-color-charts-success-hover, hsla(139, 50%, 22%, 1))`,
+	coralColorChartsDanger: `var(--coral-color-charts-danger, hsla(4, 89%, 49%, 1))`,
+	coralColorChartsDangerWeak: `var(--coral-color-charts-danger-weak, hsla(359, 69%, 73%, 1))`,
+	coralColorChartsDangerStrong: `var(--coral-color-charts-danger-strong, hsla(359, 62%, 43%, 1))`,
+	coralColorChartsDangerHover: `var(--coral-color-charts-danger-hover, hsla(359, 62%, 43%, 1))`,
+	coralColorChartsWarning: `var(--coral-color-charts-warning, hsla(32, 100%, 56%, 1))`,
+	coralColorChartsWarningWeak: `var(--coral-color-charts-warning-weak, hsla(22, 88%, 84%, 1))`,
+	coralColorChartsWarningStrong: `var(--coral-color-charts-warning-strong, hsla(22, 75%, 42%, 1))`,
+	coralColorChartsWarningHover: `var(--coral-color-charts-warning-hover, hsla(22, 75%, 42%, 1))`,
+	coralColorChartsDefault: `var(--coral-color-charts-default, hsla(216, 82%, 48%, 1))`,
+	coralColorChartsDefaultWeak: `var(--coral-color-charts-default-weak, hsla(204, 59%, 73%, 1))`,
+	coralColorChartsDefaultStrong: `var(--coral-color-charts-default-strong, hsla(204, 92%, 29%, 1))`,
+	coralColorChartsDefaultHover: `var(--coral-color-charts-default-hover, hsla(204, 92%, 29%, 1))`,
+	coralColorChartsColor00: `var(--coral-color-charts-color-00, hsla(48, 100%, 50%, 1))`,
+	coralColorChartsColor00Weak: `var(--coral-color-charts-color-00-weak, hsla(51, 91%, 82%, 1))`,
+	coralColorChartsColor00Strong: `var(--coral-color-charts-color-00-strong, hsla(48, 82%, 45%, 1))`,
+	coralColorChartsColor00Hover: `var(--coral-color-charts-color-00-hover, hsla(48, 82%, 45%, 1))`,
+	coralColorChartsColor01: `var(--coral-color-charts-color-01, hsla(216, 82%, 48%, 1))`,
+	coralColorChartsColor01Weak: `var(--coral-color-charts-color-01-weak, hsla(204, 59%, 73%, 1))`,
+	coralColorChartsColor01Strong: `var(--coral-color-charts-color-01-strong, hsla(204, 92%, 29%, 1))`,
+	coralColorChartsColor01Hover: `var(--coral-color-charts-color-01-hover, hsla(204, 92%, 29%, 1))`,
+	coralColorChartsColor02: `var(--coral-color-charts-color-02, hsla(194, 92%, 50%, 1))`,
+	coralColorChartsColor02Weak: `var(--coral-color-charts-color-02-weak, hsla(194, 91%, 91%, 1))`,
+	coralColorChartsColor02Strong: `var(--coral-color-charts-color-02-strong, hsla(194, 93%, 32%, 1))`,
+	coralColorChartsColor02Hover: `var(--coral-color-charts-color-02-hover, hsla(194, 93%, 32%, 1))`,
+	coralColorChartsColor03: `var(--coral-color-charts-color-03, hsla(140, 39%, 79%, 1))`,
+	coralColorChartsColor03Weak: `var(--coral-color-charts-color-03-weak, hsla(138, 40%, 92%, 1))`,
+	coralColorChartsColor03Strong: `var(--coral-color-charts-color-03-strong, hsla(139, 11%, 35%, 1))`,
+	coralColorChartsColor03Hover: `var(--coral-color-charts-color-03-hover, hsla(139, 11%, 35%, 1))`,
+	coralColorChartsColor04: `var(--coral-color-charts-color-04, hsla(148, 87%, 40%, 1))`,
+	coralColorChartsColor04Weak: `var(--coral-color-charts-color-04-weak, hsla(130, 52%, 91%, 1))`,
+	coralColorChartsColor04Strong: `var(--coral-color-charts-color-04-strong, hsla(139, 50%, 22%, 1))`,
+	coralColorChartsColor04Hover: `var(--coral-color-charts-color-04-hover, hsla(139, 50%, 22%, 1))`,
+	coralColorChartsColor05: `var(--coral-color-charts-color-05, hsla(324, 68%, 71%, 1))`,
+	coralColorChartsColor05Weak: `var(--coral-color-charts-color-05-weak, hsla(323, 69%, 95%, 1))`,
+	coralColorChartsColor05Strong: `var(--coral-color-charts-color-05-strong, hsla(324, 28%, 49%, 1))`,
+	coralColorChartsColor05Hover: `var(--coral-color-charts-color-05-hover, hsla(324, 28%, 49%, 1))`,
+	coralColorChartsColor06: `var(--coral-color-charts-color-06, hsla(280, 75%, 58%, 1))`,
+	coralColorChartsColor06Weak: `var(--coral-color-charts-color-06-weak, hsla(279, 77%, 88%, 1))`,
+	coralColorChartsColor06Strong: `var(--coral-color-charts-color-06-strong, hsla(280, 54%, 36%, 1))`,
+	coralColorChartsColor06Hover: `var(--coral-color-charts-color-06-hover, hsla(280, 54%, 36%, 1))`,
+	coralColorChartsColor07: `var(--coral-color-charts-color-07, hsla(4, 89%, 49%, 1))`,
+	coralColorChartsColor07Weak: `var(--coral-color-charts-color-07-weak, hsla(359, 69%, 73%, 1))`,
+	coralColorChartsColor07Strong: `var(--coral-color-charts-color-07-strong, hsla(359, 62%, 43%, 1))`,
+	coralColorChartsColor07Hover: `var(--coral-color-charts-color-07-hover, hsla(359, 62%, 43%, 1))`,
+	coralColorChartsColor08: `var(--coral-color-charts-color-08, hsla(22, 88%, 54%, 1))`,
+	coralColorChartsColor08Weak: `var(--coral-color-charts-color-08-weak, hsla(22, 88%, 84%, 1))`,
+	coralColorChartsColor08Strong: `var(--coral-color-charts-color-08-strong, hsla(22, 75%, 42%, 1))`,
+	coralColorChartsColor08Hover: `var(--coral-color-charts-color-08-hover, hsla(22, 75%, 42%, 1))`,
+	coralColorChartsColor09: `var(--coral-color-charts-color-09, hsla(34, 34%, 45%, 1))`,
+	coralColorChartsColor09Weak: `var(--coral-color-charts-color-09-weak, hsla(35, 28%, 82%, 1))`,
+	coralColorChartsColor09Strong: `var(--coral-color-charts-color-09-strong, hsla(35, 34%, 27%, 1))`,
+	coralColorChartsColor09Hover: `var(--coral-color-charts-color-09-hover, hsla(35, 34%, 27%, 1))`,
+	coralColorAccentBorder: `var(--coral-color-accent-border, hsla(144, 78%, 23%, 1))`,
+	coralColorChartsDefaultText: `var(--coral-color-charts-default-text, hsla(205, 87%, 94%, 1))`,
+	coralColorChartsDefaultTextStrong: `var(--coral-color-charts-default-text-strong, hsla(205, 93%, 22%, 1))`,
+	coralColorChartsDefaultTextWeak: `var(--coral-color-charts-default-text-weak, hsla(207, 93%, 94%, 1))`,
+	coralColorChartsColor09Text: `var(--coral-color-charts-color-09-text, hsla(36, 36%, 5%, 1))`,
+	coralColorChartsColor09TextStrong: `var(--coral-color-charts-color-09-text-strong, hsla(36, 36%, 5%, 1))`,
+	coralColorChartsColor09TextWeak: `var(--coral-color-charts-color-09-text-weak, hsla(35, 28%, 82%, 1))`,
+	coralColorNeutralBackgroundHeavy: `var(--coral-color-neutral-background-heavy, hsla(0, 0%, 78%, 1))`,
+	coralColorIllustrationColor01: `var(--coral-color-illustration-color-01, hsla(211, 62%, 26%, 1))`,
+	coralColorIllustrationColor02: `var(--coral-color-illustration-color-02, hsla(211, 43%, 47%, 1))`,
+	coralColorIllustrationColor03: `var(--coral-color-illustration-color-03, hsla(201, 31%, 85%, 1))`,
+	coralColorIllustrationColor05: `var(--coral-color-illustration-color-05, hsla(359, 82%, 81%, 1))`,
+	coralColorIllustrationColor04: `var(--coral-color-illustration-color-04, hsla(359, 100%, 72%, 1))`,
+	coralColorIllustrationColor06: `var(--coral-color-illustration-color-06, hsla(358, 100%, 93%, 1))`,
+	coralColorIllustrationSkintone01: `var(--coral-color-illustration-skintone-01, hsla(20, 91%, 83%, 1))`,
+	coralColorIllustrationSkintone02: `var(--coral-color-illustration-skintone-02, hsla(21, 34%, 55%, 1))`,
+	coralColorIllustrationSkintone03: `var(--coral-color-illustration-skintone-03, hsla(17, 33%, 28%, 1))`,
+	coralColorIllustrationShadow: `var(--coral-color-illustration-shadow, hsla(0, 0%, 0%, 0.1))`,
+	coralColorIllustrationColor07: `var(--coral-color-illustration-color-07, hsla(192, 33%, 97%, 1))`,
+	coralColorIllustrationColor08: `var(--coral-color-illustration-color-08, hsla(211, 23%, 74%, 1))`,
+	coralColorIllustrationColor09: `var(--coral-color-illustration-color-09, hsla(245, 10%, 23%, 1))`,
+	coralColorAccentBackgroundSelected: `var(--coral-color-accent-background-selected, hsla(138, 56%, 92%, 1))`,
+	coralColorInfoText: `var(--coral-color-info-text, hsla(215, 100%, 34%, 1))`,
+	coralColorInfoTextHover: `var(--coral-color-info-text-hover, hsla(216, 100%, 28%, 1))`,
+	coralColorInfoTextActive: `var(--coral-color-info-text-active, hsla(215, 100%, 21%, 1))`,
+	coralColorInfoTextWeak: `var(--coral-color-info-text-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorInfoTextWeakHover: `var(--coral-color-info-text-weak-hover, hsla(205, 80%, 92%, 1))`,
+	coralColorInfoTextWeakActive: `var(--coral-color-info-text-weak-active, hsla(208, 84%, 85%, 1))`,
+	coralColorInfoTextStrong: `var(--coral-color-info-text-strong, hsla(215, 100%, 21%, 1))`,
+	coralColorInfoTextStrongHover: `var(--coral-color-info-text-strong-hover, hsla(216, 100%, 28%, 1))`,
+	coralColorInfoTextStrongActive: `var(--coral-color-info-text-strong-active, hsla(215, 100%, 21%, 1))`,
+	coralColorInfoBackgroundHover: `var(--coral-color-info-background-hover, hsla(208, 84%, 85%, 1))`,
+	coralColorInfoBackgroundActive: `var(--coral-color-info-background-active, hsla(207, 84%, 75%, 1))`,
+	coralColorInfoBackgroundWeak: `var(--coral-color-info-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorInfoBackgroundWeakHover: `var(--coral-color-info-background-weak-hover, hsla(205, 80%, 92%, 1))`,
+	coralColorInfoBackgroundWeakActive: `var(--coral-color-info-background-weak-active, hsla(208, 84%, 85%, 1))`,
+	coralColorInfoBackgroundStrong: `var(--coral-color-info-background-strong, hsla(210, 100%, 36%, 1))`,
+	coralColorInfoBackgroundStrongHover: `var(--coral-color-info-background-strong-hover, hsla(216, 100%, 28%, 1))`,
+	coralColorInfoBackgroundStrongActive: `var(--coral-color-info-background-strong-active, hsla(215, 100%, 21%, 1))`,
+	coralColorInfoBorder: `var(--coral-color-info-border, hsla(216, 100%, 28%, 1))`,
+	coralColorInfoBorderHover: `var(--coral-color-info-border-hover, hsla(216, 100%, 28%, 1))`,
+	coralColorInfoBorderActive: `var(--coral-color-info-border-active, hsla(215, 100%, 21%, 1))`,
+	coralColorInfoIcon: `var(--coral-color-info-icon, hsla(208, 98%, 43%, 1))`,
+	coralColorInfoIconHover: `var(--coral-color-info-icon-hover, hsla(215, 100%, 34%, 1))`,
+	coralColorInfoIconActive: `var(--coral-color-info-icon-active, hsla(215, 100%, 21%, 1))`,
+	coralColorBrandText: `var(--coral-color-brand-text, hsla(0, 0%, 25%, 1))`,
+	coralColorBrandTextHover: `var(--coral-color-brand-text-hover, hsla(0, 0%, 17%, 1))`,
+	coralColorBrandTextActive: `var(--coral-color-brand-text-active, hsla(0, 0%, 9%, 1))`,
+	coralColorBrandTextInverted: `var(--coral-color-brand-text-inverted, hsla(0, 0%, 25%, 1))`,
+	coralColorBrandTextInvertedHover: `var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 17%, 1))`,
+	coralColorBrandTextInvertedActive: `var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 9%, 1))`,
+	coralColorBrandTextSelected: `var(--coral-color-brand-text-selected, hsla(0, 0%, 13%, 1))`,
+	coralColorBrandBackgroundWeak: `var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 1))`,
+	coralColorBrandBackgroundWeakHover: `var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 97%, 1))`,
+	coralColorBrandBackgroundWeakActive: `var(--coral-color-brand-background-weak-active, hsla(0, 0%, 97%, 1))`,
+	coralColorBrandBackgroundSelected: `var(--coral-color-brand-background-selected, hsla(0, 0%, 95%, 1))`,
+	coralColorBrandBackgroundInverted: `var(--coral-color-brand-background-inverted, hsla(0, 0%, 98%, 1))`,
+	coralColorBrandBackgroundInvertedHover: `var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 86%, 1))`,
+	coralColorBrandBackgroundInvertedActive: `var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 86%, 1))`,
+	coralColorBrandBorder: `var(--coral-color-brand-border, hsla(0, 0%, 25%, 1))`,
+	coralColorBrandBorderHover: `var(--coral-color-brand-border-hover, hsla(0, 0%, 25%, 1))`,
+	coralColorBrandBorderActive: `var(--coral-color-brand-border-active, hsla(0, 0%, 25%, 1))`,
+	coralColorInfoBackground: `var(--coral-color-info-background, hsla(205, 80%, 92%, 1))`,
+	coralColorBrandIcon: `var(--coral-color-brand-icon, hsla(0, 0%, 25%, 1))`,
+	coralColorBrandIconHover: `var(--coral-color-brand-icon-hover, hsla(0, 0%, 17%, 1))`,
+	coralColorBrandIconActive: `var(--coral-color-brand-icon-active, hsla(0, 0%, 9%, 1))`,
+	coralColorBrandIconInverted: `var(--coral-color-brand-icon-inverted, hsla(0, 0%, 25%, 1))`,
+	coralColorBrandIconInvertedHover: `var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 17%, 1))`,
+	coralColorBrandIconInvertedActive: `var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 9%, 1))`,
+	coralColorBrandIconSelected: `var(--coral-color-brand-icon-selected, hsla(0, 0%, 13%, 1))`,
+	coralColorBrandingBackground: `var(--coral-color-branding-background, hsla(0, 0%, 100%, 1))`,
+	coralColorBrandingNavigation: `var(--coral-color-branding-navigation, hsla(0, 0%, 90%, 1))`,
+	coralColorBrandBackground: `var(--coral-color-brand-background, hsla(0, 0%, 100%, 1))`,
+	coralSpacingXxs: `var(--coral-spacing-xxs, 0.4rem)`,
+	coralSpacingXs: `var(--coral-spacing-xs, 0.8rem)`,
+	coralSpacingS: `var(--coral-spacing-s, 1.2rem)`,
+	coralSpacingM: `var(--coral-spacing-m, 1.6rem)`,
+	coralSpacingL: `var(--coral-spacing-l, 2.8rem)`,
+	coralSpacingXl: `var(--coral-spacing-xl, 3.6rem)`,
+	coralSizingMinimal: `var(--coral-sizing-minimal, 1.2rem)`,
+	coralSizingXxxs: `var(--coral-sizing-xxxs, 1.6rem)`,
+	coralSizingXxs: `var(--coral-sizing-xxs, 2rem)`,
+	coralSizingXs: `var(--coral-sizing-xs, 2.4rem)`,
+	coralSizingS: `var(--coral-sizing-s, 2.8rem)`,
+	coralSizingM: `var(--coral-sizing-m, 3.6rem)`,
+	coralSizingL: `var(--coral-sizing-l, 4rem)`,
+	coralSizingXxxl: `var(--coral-sizing-xxxl, 22rem)`,
+	coralSizingMaximal: `var(--coral-sizing-maximal, 32rem)`,
+	coralElevationShadowNeutralM: `var(--coral-elevation-shadow-neutral-m, 0 0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.15))`,
+	coralElevationShadowAccent: `var(--coral-elevation-shadow-accent, 0 0.1rem 0.1rem 0 hsla(147, 100%, 26%, 0.25))`,
+	coralElevationShadowSuccess: `var(--coral-elevation-shadow-success, 0 0.1rem 0.1rem 0 hsla(147, 100%, 26%, 0.25))`,
+	coralElevationShadowDanger: `var(--coral-elevation-shadow-danger, 0 0.1rem 0.1rem 0 hsla(336, 100%, 34%, 0.25))`,
+	coralElevationShadowWarning: `var(--coral-elevation-shadow-warning, 0 0.1rem 0.1rem 0 hsla(21, 100%, 45%, 0.25))`,
+	coralElevationShadowBeta: `var(--coral-elevation-shadow-beta, 0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.25))`,
+	coralElevationShadowNeutralInvertedM: `var(--coral-elevation-shadow-neutral-inverted-m, 0 -0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.15))`,
+	coralElevationShadowNeutralInvertedL: `var(--coral-elevation-shadow-neutral-inverted-l, 0 -0.4rem 1rem 0 hsla(0, 0%, 0%, 0.15))`,
+	coralElevationShadowNeutralL: `var(--coral-elevation-shadow-neutral-l, 0 0.4rem 1rem 0 hsla(0, 0%, 0%, 0.15))`,
+	coralElevationShadowNeutralS: `var(--coral-elevation-shadow-neutral-s,0 0.1rem 0.1rem 0 hsla(0, 0%, 0%, 0.15))`,
+	coralElevationShadowNeutralInvertedS: `var(--coral-elevation-shadow-neutral-inverted-s,0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.15))`,
+	coralElevationShadowInfo: `var(--coral-elevation-shadow-info, 0 0.1rem 0.1rem 0 hsla(210, 100%, 36%, 0.25))`,
+	coralHeadingL: `var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')`,
+	coralParagraphM: `var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')`,
+	coralParagraphMBold: `var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')`,
+	coralParagraphS: `var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')`,
+	coralParagraphSBold: `var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')`,
+	coralHeadingM: `var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')`,
+	coralHeadingS: `var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')`,
+	coralDataM: `var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')`,
+	coralDataMBold: `var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')`,
+	coralLinkMUnderlined: `var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')`,
+	coralLinkM: `var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')`,
+	coralDataXl: `var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')`,
+	coralLinkS: `var(--coral-link-s, 600 1.2rem/140% 'Source Sans Pro')`,
+	coralLinkSUnderlined: `var(--coral-link-s-underlined, 600 1.2rem/140% 'Source Sans Pro')`,
+	coralRadiusM: `var(--coral-radius-m, 0.8rem)`,
+	coralRadiusL: `var(--coral-radius-l, 1.6rem)`,
+	coralRadiusRound: `var(--coral-radius-round, 9999.9rem)`,
+	coralRadiusS: `var(--coral-radius-s, 0.4rem)`,
+	coralBorderSSolid: `var(--coral-border-s-solid, 1px solid)`,
+	coralBorderMSolid: `var(--coral-border-m-solid, 2px solid)`,
+	coralBorderSDashed: `var(--coral-border-s-dashed, 1px dashed)`,
+	coralBorderMDashed: `var(--coral-border-m-dashed, 2px dashed)`,
+	coralOpacityL: `var(--coral-opacity-l, 0.2)`,
+	coralOpacityM: `var(--coral-opacity-m, 0.4)`,
+	coralOpacityS: `var(--coral-opacity-s, 0.6)`,
+	coralBreakpointS: `var(--coral-breakpoint-s, 40em)`,
+	coralBreakpointM: `var(--coral-breakpoint-m, 48em)`,
+	coralBreakpointL: `var(--coral-breakpoint-l, 64em)`,
+	coralBreakpointXl: `var(--coral-breakpoint-xl, 80em)`,
+	coralBrandingLogo: `var(--coral-branding-logo, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPGc+CiAgICA8cGF0aCBjbGFzcz0idGktYmFja2dyb3VuZCIgIGZpbGw9IiMxNUFBNTEiIGQ9Ik0xNiw4IEMxNiwxMi40MTg4NzM3IDEyLjQxODI2NDgsMTYuMDAwNjA4OCA4LDE2LjAwMDYwODggQzMuNTgxNzM1MTYsMTYuMDAwNjA4OCAwLDEyLjQxODg3MzcgMCw4IEMwLDMuNTgxNzM1MTYgMy41ODE3MzUxNiw1LjM0OTk2ODgzZS0xNCA4LDUuMzQ5OTY4ODNlLTE0IEMxMi40MTgyNjQ4LDUuMzQ5OTY4ODNlLTE0IDE2LDMuNTgxNzM1MTYgMTYsOCIvPgogICAgPHBhdGggY2xhc3M9InRpLWZvcmVncm91bmQiIGZpbGw9IiNGRkYiIGQ9Ik0xMC4xNzgwMTY4LDExLjQzMTYwMzQgQzEwLjE1MTM5NSwxMS4zNTQxNTggMTAuMTEzODgyNCwxMS4yODIxNTggMTAuMDY0ODczOSwxMS4yMTYyMDg0IEMxMC4wMTY0NzA2LDExLjE0OTY1MzggOS45Nzg5NTc5OCwxMS4xMjMwMzE5IDkuOTUyMzM2MTMsMTEuMTM2MzQyOSBDOS43ODQxMzQ0NSwxMS4yMTk4Mzg3IDkuNjAwMjAxNjgsMTEuMjkxMjMzNiA5LjQwMTE0Mjg2LDExLjM0ODcxMjYgQzkuMjAyMDg0MDMsMTEuNDA2MTkxNiA5LjAyOTA0MjAyLDExLjQzNTIzMzYgOC44ODMyMjY4OSwxMS40MzUyMzM2IEM4LjcxOTI2MDUsMTEuNDM1MjMzNiA4LjU5NDAxNjgxLDExLjM5NzcyMSA4LjUwODEwMDg0LDExLjMyNTcyMSBDOC40MjE1Nzk4MywxMS4yNTI1MTA5IDguMzU5ODY1NTUsMTEuMTE2OTgxNSA4LjMyMjM1Mjk0LDEwLjkyMDM0MjkgQzguMjg0MjM1MjksMTAuNzIzNzA0MiA4LjI2NTQ3ODk5LDEwLjQzNjMwOTIgOC4yNjU0Nzg5OSwxMC4wNTk5NzMxIEw4LjI2NTQ3ODk5LDYuMjQyNzYzMDMgTDkuNjkzMzc4MTUsNi4yNDI3NjMwMyBDOS43NDE3ODE1MSw2LjI0Mjc2MzAzIDkuNzg3MTU5NjYsNi4xOTYxNzQ3OSA5LjgyOTUxMjYxLDYuMTAyMzkzMjggQzkuODcxMjYwNSw2LjAxMDQyNjg5IDkuODkyNDM2OTcsNS44OTU0Njg5MSA5Ljg5MjQzNjk3LDUuNzU4MTI0MzcgQzkuODkyNDM2OTcsNS43MDAwNDAzNCA5Ljg3NzkxNTk3LDUuNjQ4NjExNzYgOS44NDg4NzM5NSw1LjYwNTA0ODc0IEM5LjgyMDQzNjk3LDUuNTYwODgwNjcgOS43ODE3MTQyOSw1LjUzNjY3ODk5IDkuNzMzMzEwOTIsNS41MzI0NDM3IEw4LjI2NTQ3ODk5LDUuNTMyNDQzNyBMOC4yNjU0Nzg5OSwzLjY3OTIgQzguMjY1NDc4OTksMy42MDIzNTk2NiA4LjIxNDY1NTQ2LDMuNTQ3OTA1ODggOC4xMjQ1MDQyLDMuNTEwOTk4MzIgQzcuOTU4MTE3NjUsMy40NTg5NjQ3MSA3Ljg2MDcwNTg4LDMuNjM5ODcyMjcgNy44NjA3MDU4OCwzLjYzOTg3MjI3IEM3LjQxNDE4NDg3LDQuNjcyMDczOTUgNi41Mzc0Nzg5OSw1LjQ2ODkxNDI5IDUuNDUzMjQzNyw1LjgwODM0Mjg2IEM1LjQ1MzI0MzcsNS44MDgzNDI4NiA1LjIzMTc5ODMyLDUuODYwOTgxNTEgNS4yODg2NzIyNyw2LjA5MjcxMjYxIEM1LjI5NTMyNzczLDYuMTEyNjc4OTkgNS4zMDEzNzgxNSw2LjEzMjY0NTM4IDUuMzExMDU4ODIsNi4xNTI2MTE3NiBDNS4zNDE5MTU5Nyw2LjIxNzM1MTI2IDUuMzc5NDI4NTcsNi4yNTA2Mjg1NyA1LjQyMzU5NjY0LDYuMjU2MDczOTUgTDYuMTMzOTE1OTcsNi4yNTYwNzM5NSBMNi4xMzM5MTU5NywxMC42NTE3MDQyIEM2LjEzMzkxNTk3LDExLjI3NTUwMjUgNi4zMjMyOTQxMiwxMS43MTE3Mzc4IDYuNzAyMDUwNDIsMTEuOTU5ODA1IEM3LjA4MDIwMTY4LDEyLjIwNzI2NzIgNy41ODg0MzY5NywxMi4zMzA2OTU4IDguMjI1NTQ2MjIsMTIuMzMwNjk1OCBDOC40MjUyMTAwOCwxMi4zMzA2OTU4IDguNjU2MzM2MTMsMTIuMjkzNzg4MiA4LjkxOTUyOTQxLDEyLjIxODc2MyBDOS4xODI3MjI2OSwxMi4xNDMxMzI4IDkuNDMwNzg5OTIsMTIuMDQ2OTMxMSA5LjY2MzEyNjA1LDExLjkyOTU1MjkgQzkuODk2MDY3MjMsMTEuODEyNzc5OCAxMC4wNjcyOTQxLDExLjY5NDE5MTYgMTAuMTc4MDE2OCwxMS41NzM3ODgyIEMxMC4yMDQ2Mzg3LDExLjU1Njg0NzEgMTAuMjA0NjM4NywxMS41MDkwNDg3IDEwLjE3ODAxNjgsMTEuNDMxNjAzNCIvPgogIDwvZz4KPC9zdmc+Cg==))`,
+	coralTransitionInstant: `var(--coral-transition-instant, 100ms ease-out)`,
+	coralTransitionFast: `var(--coral-transition-fast, 250ms ease-in-out)`,
+	coralTransitionNormal: `var(--coral-transition-normal, 300ms ease-in-out)`,
+	coralTransitionSlow: `var(--coral-transition-slow, 400ms ease-in)`,
+	coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 2000)`,
+	coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 2004)`,
+	coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 2008)`,
+	coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 2016)`,
+	coralAnimationHeartbeat: `var(--coral-animation-heartbeat, coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite)`,
+};
+
+export default tokens;
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 256e9f79eac..2ca08e81a3d 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -43,7 +43,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.2",
+    "@storybook/addon-actions": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
     "@talend/bootstrap-theme": "^8.3.1",
     "@talend/design-system": "^8.7.0",
diff --git a/packages/forms/package.json b/packages/forms/package.json
index fd7df93120e..b48de710a7a 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -55,8 +55,8 @@
     "tv4": "^1.3.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.2",
-    "@storybook/addon-controls": "^7.6.2",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-controls": "^7.6.4",
     "@talend/bootstrap-theme": "^8.3.1",
     "@talend/locales-tui-forms": "^10.2.4",
     "@talend/react-components": "^13.0.0",
diff --git a/packages/stepper/src/stories/Stepper.mdx b/packages/stepper/src/stories/Stepper.mdx
index 3a72e26182f..2ece57359a4 100644
--- a/packages/stepper/src/stories/Stepper.mdx
+++ b/packages/stepper/src/stories/Stepper.mdx
@@ -1,10 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
+
 import * as Stories from './Stepper.stories';
 
 # Stepper
 
 <Meta title="Stepper" />
 
-<Canvas>
-	<Story story={Stories.DefaultStory} />
-</Canvas>
+<Canvas of={Stories.DefaultStory} />
diff --git a/packages/storybook-docs/package.json b/packages/storybook-docs/package.json
index 1191d634f37..50f18980db6 100644
--- a/packages/storybook-docs/package.json
+++ b/packages/storybook-docs/package.json
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@algolia/autocomplete-js": "^1.12.1",
-    "@storybook/blocks": "^7.6.2",
-    "@storybook/react": "^7.6.2",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
     "@talend/design-tokens": "^2.10.1",
     "algoliasearch": "^4.20.0",
     "classnames": "^2.3.2",
diff --git a/packages/storybook-docs/src/components/Trial/Trials.mdx b/packages/storybook-docs/src/components/Trial/Trials.mdx
index dd235eada4a..a17831c13fd 100644
--- a/packages/storybook-docs/src/components/Trial/Trials.mdx
+++ b/packages/storybook-docs/src/components/Trial/Trials.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, Canvas } from '@storybook/addon-docs';
 import * as Stories from './Trial.stories';
 import Trial from './Trial';
 
@@ -50,6 +50,4 @@ Etiam vitae sollicitudin massa. Nulla facilisi. Duis sit amet vestibulum erat, u
 
 Duis sit amet vestibulum erat, ut rutrum eros.
 
-<Canvas withSource="closed">
-	<Story story={Stories.Story} />
-</Canvas>
+<Canvas sourceState="hidden" of={Stories.Story} />
diff --git a/packages/storybook-one/package.json b/packages/storybook-one/package.json
index 89692cc81e0..f16513bcaad 100644
--- a/packages/storybook-one/package.json
+++ b/packages/storybook-one/package.json
@@ -36,17 +36,17 @@
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/addon-a11y": "^7.6.2",
-    "@storybook/addon-actions": "^7.6.2",
-    "@storybook/addon-essentials": "^7.6.2",
-    "@storybook/addon-interactions": "^7.6.2",
-    "@storybook/addon-links": "^7.6.2",
-    "@storybook/addons": "^7.6.2",
-    "@storybook/core-events": "^7.6.2",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/core-events": "^7.6.4",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
-    "@storybook/theming": "^7.6.2",
+    "@storybook/theming": "^7.6.4",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",
     "@talend/locales-design-system": "^7.15.1",
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
index d16f55c3ff2..bb15f2d1954 100644
--- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
+++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -58,6 +58,7 @@ const defaultPreview = {
 				items: [
 					{ value: 'light', left: '⚪', title: 'Light mode' },
 					{ value: 'dark', left: '🌑', title: 'Dark mode' },
+					{ value: 'qlik-light', left:"🟢", title: 'Qlik light mode' },
 				],
 				dynamicTitle: true,
 			},
diff --git a/tools/scripts-config-storybook-lib/package.json b/tools/scripts-config-storybook-lib/package.json
index 8e9d2138b6b..4ec1cc147c0 100644
--- a/tools/scripts-config-storybook-lib/package.json
+++ b/tools/scripts-config-storybook-lib/package.json
@@ -19,16 +19,16 @@
     "test": "echo \"Nothing to test\""
   },
   "dependencies": {
-    "@storybook/addon-a11y": "^7.6.2",
-    "@storybook/addon-essentials": "^7.6.2",
-    "@storybook/addon-interactions": "^7.6.2",
-    "@storybook/addon-links": "^7.6.2",
-    "@storybook/addon-storysource": "^7.6.2",
-    "@storybook/source-loader": "^7.6.2",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-storysource": "^7.6.4",
+    "@storybook/source-loader": "^7.6.4",
     "@storybook/jest": "^0.2.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.2",
-    "@storybook/react-webpack5": "^7.6.2",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
     "@talend/scripts-config-react-webpack": "^16.3.3",
     "@talend/dynamic-cdn-webpack-plugin": "^13.1.0",
diff --git a/yarn.lock b/yarn.lock
index 079d862dce6..38898ce2f29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3039,177 +3039,178 @@
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
   integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 
-"@storybook/addon-a11y@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.6.2.tgz#f5a24698f62168818e2053904e18a91ed89d0feb"
-  integrity sha512-fZlm7nlA/u2cgOglkVmUq0YIdd/azR6L/5hIXh/NMGH06D7sWeSIJEr3Hsq/V5AHEiOhy26xl3SB7X9CkjSAVw==
+"@storybook/addon-a11y@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.6.4.tgz#bee12968995a5c0a196906aaaf100369876c5534"
+  integrity sha512-NwROJMes3D1WVPSmASVnHtDCIFQCF3DoPJEpzpnUYFxCR2IQzqPSlf9jptRkot6XjL5XwVX5mV2KxC2lKA1cfg==
   dependencies:
-    "@storybook/addon-highlight" "7.6.2"
+    "@storybook/addon-highlight" "7.6.4"
     axe-core "^4.2.0"
 
-"@storybook/addon-actions@7.6.2", "@storybook/addon-actions@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.6.2.tgz#05bc161ed8db35272c4f995eee459978c0edb6ca"
-  integrity sha512-fcwizWFzfTAHCFI6booF9Tvpv2DZ8f5bE81K2NAMy1ZtIjFgiCUw39ZuXomma73ZaWZqf4tyD1Zci/xXvjgsRg==
+"@storybook/addon-actions@7.6.4", "@storybook/addon-actions@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.6.4.tgz#b2d2941baa926718f0c53581c8cc8b19c2e0393b"
+  integrity sha512-91UD5KPDik74VKVioPMcbwwvDXN/non8p1wArYAHCHCmd/Pts5MJRiFueSdfomSpNjUtjtn6eSXtwpIL3XVOfQ==
   dependencies:
-    "@storybook/core-events" "7.6.2"
+    "@storybook/core-events" "7.6.4"
     "@storybook/global" "^5.0.0"
     "@types/uuid" "^9.0.1"
     dequal "^2.0.2"
     polished "^4.2.2"
     uuid "^9.0.0"
 
-"@storybook/addon-backgrounds@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.2.tgz#76b5477759e7af74ab8b2f51b902cebf6bce44b3"
-  integrity sha512-BEhzlEcW2JJO81jzLMV0xQpVs5bqgnt1TU16m/T4bhL3L4kohJQV0QnEyO0kBnE+7fjW0vyCENtZe1sSO84MuQ==
+"@storybook/addon-backgrounds@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.4.tgz#8ba49f4ad88327f606edb1f08fb0aef4e8eb3f05"
+  integrity sha512-gNy3kIkHSr+Lg/jVDHwbZjIe1po5SDGZNVe39vrJwnqGz8T1clWes9WHCL6zk/uaCDA3yUna2Nt/KlOFAWDSoQ==
   dependencies:
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-controls@7.6.2", "@storybook/addon-controls@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.6.2.tgz#22d8fc98d4ef17941c3499013f67b26fbbc9ab13"
-  integrity sha512-F+rqr9kUn/dD3JxvnwS9alOGQo5gFGhF7LEyvnXhjkjSXwHXDX3iCW4N77O+iepZN7tA+jcRKy548UMPbZ//Iw==
+"@storybook/addon-controls@7.6.4", "@storybook/addon-controls@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.6.4.tgz#8f8651a1e929f5f8506d025bcc5c3e454444b1c3"
+  integrity sha512-k4AtZfazmD/nL3JAtLGAB7raPhkhUo0jWnaZWrahd9h1Fm13mBU/RW+JzTRhCw3Mp2HPERD7NI5Qcd2fUP6WDA==
   dependencies:
-    "@storybook/blocks" "7.6.2"
+    "@storybook/blocks" "7.6.4"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.6.2.tgz#843cac410b059a814c1b90f2d67af2050c6639d0"
-  integrity sha512-2lRXam4PkDC6iU9ugJ2aOlGGgxXS7NjSUe9KgboBTK9mbmNZMD/Yo5KxHEyFBdYcGwumEZd6fWrT8SCipQjT8w==
+"@storybook/addon-docs@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.6.4.tgz#e15ab003482d5c43da43edae8557ac6e0988017e"
+  integrity sha512-PbFMbvC9sK3sGdMhwmagXs9TqopTp9FySji+L8O7W9SHRC6wSmdwoWWPWybkOYxr/z/wXi7EM0azSAX7yQxLbw==
   dependencies:
     "@jest/transform" "^29.3.1"
     "@mdx-js/react" "^2.1.5"
-    "@storybook/blocks" "7.6.2"
-    "@storybook/client-logger" "7.6.2"
-    "@storybook/components" "7.6.2"
-    "@storybook/csf-plugin" "7.6.2"
-    "@storybook/csf-tools" "7.6.2"
+    "@storybook/blocks" "7.6.4"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/components" "7.6.4"
+    "@storybook/csf-plugin" "7.6.4"
+    "@storybook/csf-tools" "7.6.4"
     "@storybook/global" "^5.0.0"
     "@storybook/mdx2-csf" "^1.0.0"
-    "@storybook/node-logger" "7.6.2"
-    "@storybook/postinstall" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
-    "@storybook/react-dom-shim" "7.6.2"
-    "@storybook/theming" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/node-logger" "7.6.4"
+    "@storybook/postinstall" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
+    "@storybook/react-dom-shim" "7.6.4"
+    "@storybook/theming" "7.6.4"
+    "@storybook/types" "7.6.4"
     fs-extra "^11.1.0"
     remark-external-links "^8.0.0"
     remark-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-essentials@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.6.2.tgz#cbf70cef3c2909919771573f298634a6e046da62"
-  integrity sha512-+WQSpluJVYTH54UimYpurGcn5syMlOD1X554F58ElGXucpLacAeeMNfbqPLnpXOZag5w//o1FWjJXhM9plzEdQ==
-  dependencies:
-    "@storybook/addon-actions" "7.6.2"
-    "@storybook/addon-backgrounds" "7.6.2"
-    "@storybook/addon-controls" "7.6.2"
-    "@storybook/addon-docs" "7.6.2"
-    "@storybook/addon-highlight" "7.6.2"
-    "@storybook/addon-measure" "7.6.2"
-    "@storybook/addon-outline" "7.6.2"
-    "@storybook/addon-toolbars" "7.6.2"
-    "@storybook/addon-viewport" "7.6.2"
-    "@storybook/core-common" "7.6.2"
-    "@storybook/manager-api" "7.6.2"
-    "@storybook/node-logger" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
+"@storybook/addon-essentials@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.6.4.tgz#9ae4fa2836a603cccaf6065ae0ca81d7fb5f7139"
+  integrity sha512-J+zPmP4pbuuFxQ3pjLRYQRnxEtp7jF3xRXGFO8brVnEqtqoxwJ6j3euUrRLe0rpGAU3AD7dYfaaFjd3xkENgTw==
+  dependencies:
+    "@storybook/addon-actions" "7.6.4"
+    "@storybook/addon-backgrounds" "7.6.4"
+    "@storybook/addon-controls" "7.6.4"
+    "@storybook/addon-docs" "7.6.4"
+    "@storybook/addon-highlight" "7.6.4"
+    "@storybook/addon-measure" "7.6.4"
+    "@storybook/addon-outline" "7.6.4"
+    "@storybook/addon-toolbars" "7.6.4"
+    "@storybook/addon-viewport" "7.6.4"
+    "@storybook/core-common" "7.6.4"
+    "@storybook/manager-api" "7.6.4"
+    "@storybook/node-logger" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-highlight@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.6.2.tgz#d37862c2e39799fe98a9de2c702ac2aa0a7e753a"
-  integrity sha512-HjV/DPUaBtH4HWc2zeZE3Oo8qQ7IWscpsYSa2NvflaMSHw3qaskfBLq60QVvodCvxlxaoQe3GfXx+eNg4mvaBw==
+"@storybook/addon-highlight@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.6.4.tgz#0d71de9b081fd7d2fa0d7003a19b47002be1e4f3"
+  integrity sha512-0kvjDzquoPwWWU61QYmEtcSGWXufnV7Z/bfBTYh132uxvV/X9YzDFcXXrxGL7sBJkK32gNUUBDuiTOxs5NxyOQ==
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/addon-interactions@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-7.6.2.tgz#ad5b5b95817d6fccb5977c2e9820230779225e70"
-  integrity sha512-dKl3QLx/s+DUiB4eJ2ActxS+thykmFSJI2pVxWd7BJixMDsFnBsOytsZMEJYwaQMd6NbrVcC+xQaNzKSSMFLHA==
+"@storybook/addon-interactions@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-7.6.4.tgz#e46a68f715b48b8d630fdc6a98c94ad3c7553f73"
+  integrity sha512-LjK9uhkgnbGyDwwa7pQhLptDEHeTIFmy+KurfJs9T08DpvRFfuuzyW4mj/hA63R1W5yjFSAhRiZj26+D7kBIyw==
   dependencies:
     "@storybook/global" "^5.0.0"
-    "@storybook/types" "7.6.2"
+    "@storybook/types" "7.6.4"
     jest-mock "^27.0.6"
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
-"@storybook/addon-links@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.6.2.tgz#b323eb76725551c01770a7ece7438178ac7a48ae"
-  integrity sha512-NPhzm5VZlLBnN7qpKi4YkWG/j9GQUTIQo2KvjDVDrVuY0AzYOypiXjvW2fSlsr71eAL0mam9mK1+pqIeUOg1Sg==
+"@storybook/addon-links@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.6.4.tgz#e484cd67d26c4877e3dd77b2211fc3d02875e3c1"
+  integrity sha512-TEhxYdMhJO28gD84ej1FCwLv9oLuCPt77bRXip9ndaNPRTdHYdWv6IP94dhbuDi8eHux7Z4A/mllciFuDFrnCw==
   dependencies:
     "@storybook/csf" "^0.1.2"
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.6.2.tgz#02ab1178758ada0dd64c182d028e186852f58134"
-  integrity sha512-kGX+sE2hXPjES8DSCrf14GcUrk+YKmRwW2cQ2U3nLD0vkCge/mTIsHeuoGFEKJxGeY31s5YqpxRjznF3xV6jYw==
+"@storybook/addon-measure@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.6.4.tgz#0597ae04a27ff596bc8f2015f7c746b33eef78a3"
+  integrity sha512-73wsJ8PALsgWniR3MA/cmxcFuU6cRruWdIyYzOMgM8ife2Jm3xSkV7cTTXAqXt2H9Uuki4PGnuMHWWFLpPeyVA==
   dependencies:
     "@storybook/global" "^5.0.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/addon-outline@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-7.6.2.tgz#22da0c0d89c21af9d1cb5fdb4dac1c3c321480c9"
-  integrity sha512-Cw05aW4l+BxkT1Yo/+SgKIHQy//9GqhdFmdoMDmMSQlexhNkDXvLNQJ6O/YAUg7xs/1F0egss1XUwfJ52y2NAA==
+"@storybook/addon-outline@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-7.6.4.tgz#1c62a4c5e97f277ded888e3157d5948618ec98fb"
+  integrity sha512-CFxGASRse/qeFocetDKFNeWZ3Aa2wapVtRciDNa4Zx7k1wCnTjEsPIm54waOuCaNVcrvO+nJUAZG5WyiorQvcg==
   dependencies:
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-storysource@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-7.6.2.tgz#7a978c5e61c08c3c58a24cc73063230b839e3044"
-  integrity sha512-alsOiSRUl/RAhmGzFbzRep07c6d/D2YJO+opXEiPJ4tzLYWHy3FeHVc+fZAjEVK1ioOGgJiuW3ZesBqde0pAqg==
+"@storybook/addon-storysource@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-7.6.4.tgz#a94c1127af66ed90c149b89a2648e1fdc8739326"
+  integrity sha512-D63IB8bkqn5ZDq4yjvkcLVfGz3OcAQUohlxSFR1e7COo8jMSTiQWjN7xaVPNOnVJRCj6GrlRlto/hqGl+F+WiQ==
   dependencies:
+    "@storybook/source-loader" "7.6.4"
     estraverse "^5.2.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/addon-toolbars@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-7.6.2.tgz#340bebb140556155f1c10cee4898fad8a082567f"
-  integrity sha512-+5rERGzie5SNSF8xyzr/mGhbob1jSE+kZE6CKSRFvpcdM6DzVLna5oqvF8vkrHE56/4vVbp6xO/pWaENpF9wPA==
+"@storybook/addon-toolbars@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-7.6.4.tgz#de76577d20db8a0e63c567d9cbfad7de15ca0f56"
+  integrity sha512-ENMQJgU4sRCLLDVXYfa+P3cQVV9PC0ZxwVAKeM3NPYPNH/ODoryGNtq+Q68LwHlM4ObCE2oc9MzaQqPxloFcCw==
 
-"@storybook/addon-viewport@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.6.2.tgz#57831200ed6242dadc8ae95cd2d075b459596e85"
-  integrity sha512-ilwxVxWFuznBz9FRmyuvysxNV4dqwl0k68h5MFCq/VOlC5TzYcR6kWpEA0PwPLHvXTE5v61UYcjRcrIA8eI30g==
+"@storybook/addon-viewport@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.6.4.tgz#f39601082f48a903c47cae71a84b05428ea20331"
+  integrity sha512-SoTcHIoqybhYD28v7QExF1EZnl7FfxuP74VDhtze5LyMd2CbqmVnUfwewLCz/3IvCNce0GqdNyg1m6QJ7Eq1uw==
   dependencies:
     memoizerific "^1.11.3"
 
-"@storybook/addons@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.6.2.tgz#fb0c42380cef3aec009cc0aafdccf73aca248cdc"
-  integrity sha512-RNYvtTnaUjW30wfc/QHXcVm+NgfRdr6luf5dAsdKu85OQd/aVL1hcMAyokEmWkgOo54iikfz5ZJ1ZlPg+2pf1Q==
+"@storybook/addons@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.6.4.tgz#35d1cf97e8dc1477fc154bfec798d4b829889519"
+  integrity sha512-YnmLyR/ciALtzoi9HEu+Y+NJWeOVEBo9PRgQaG7zGiNDvOrLY69uU3Ej0+TZlrTqBqce42bRCrDINJfnk0Mfsg==
   dependencies:
-    "@storybook/manager-api" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/manager-api" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
+    "@storybook/types" "7.6.4"
 
-"@storybook/blocks@7.6.2", "@storybook/blocks@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.6.2.tgz#6fa89d2efa38d793799c838aa9d7d5dc981d05f8"
-  integrity sha512-7cQT/zHOQckr77kGazWpBpL8xEwyu2lb6ujUJeuFMmSTeTbqCBEZy4VIvu3jgX9Z7gyKTHIV2rruGMb8UKdcjA==
+"@storybook/blocks@7.6.4", "@storybook/blocks@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.6.4.tgz#f5d0de020b886e0fd17021608df5b73e5e39ae69"
+  integrity sha512-iXinXXhTUBtReREP1Jifpu35DnGg7FidehjvCM8sM4E4aymfb8czdg9DdvG46T2UFUPUct36nnjIdMLWOya8Bw==
   dependencies:
-    "@storybook/channels" "7.6.2"
-    "@storybook/client-logger" "7.6.2"
-    "@storybook/components" "7.6.2"
-    "@storybook/core-events" "7.6.2"
+    "@storybook/channels" "7.6.4"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/components" "7.6.4"
+    "@storybook/core-events" "7.6.4"
     "@storybook/csf" "^0.1.2"
-    "@storybook/docs-tools" "7.6.2"
+    "@storybook/docs-tools" "7.6.4"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
-    "@storybook/theming" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/manager-api" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
+    "@storybook/theming" "7.6.4"
+    "@storybook/types" "7.6.4"
     "@types/lodash" "^4.14.167"
     color-convert "^2.0.1"
     dequal "^2.0.2"
@@ -3245,20 +3246,20 @@
     process "^0.11.10"
     util "^0.12.4"
 
-"@storybook/builder-webpack5@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-7.6.2.tgz#07fcf11aec8a0eb897a18c6783d2c4f9245ff2c7"
-  integrity sha512-XRQh80Vwabpcprfmy7FM3GLupSaFRUN0GRhOfI4+hp7zLSVG0h70CUT7wCX89+2XaMR6eOVcy/BYK2lDOsoPeQ==
+"@storybook/builder-webpack5@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-7.6.4.tgz#9ad8cd4811fe1b82d2244d705acf61f613d53206"
+  integrity sha512-J5wzPn/rsowlur5A7W9pAfN3a5fMapOoHaZsDKUklGRud/JUeabAIVdL1P/eX+yE3xaJk9auYivEWbglSx2Kpg==
   dependencies:
     "@babel/core" "^7.23.2"
-    "@storybook/channels" "7.6.2"
-    "@storybook/client-logger" "7.6.2"
-    "@storybook/core-common" "7.6.2"
-    "@storybook/core-events" "7.6.2"
-    "@storybook/core-webpack" "7.6.2"
-    "@storybook/node-logger" "7.6.2"
-    "@storybook/preview" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
+    "@storybook/channels" "7.6.4"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/core-common" "7.6.4"
+    "@storybook/core-events" "7.6.4"
+    "@storybook/core-webpack" "7.6.4"
+    "@storybook/node-logger" "7.6.4"
+    "@storybook/preview" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
     "@swc/core" "^1.3.82"
     "@types/node" "^18.0.0"
     "@types/semver" "^7.3.4"
@@ -3300,6 +3301,18 @@
     telejson "^7.2.0"
     tiny-invariant "^1.3.1"
 
+"@storybook/channels@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.4.tgz#d0af47f1f049c3ad77bcdefec54253f56b3b0a47"
+  integrity sha512-Z4PY09/Czl70ap4ObmZ4bgin+EQhPaA3HdrEDNwpnH7A9ttfEO5u5KThytIjMq6kApCCihmEPDaYltoVrfYJJA==
+  dependencies:
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/core-events" "7.6.4"
+    "@storybook/global" "^5.0.0"
+    qs "^6.10.0"
+    telejson "^7.2.0"
+    tiny-invariant "^1.3.1"
+
 "@storybook/cli@7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.6.2.tgz#8194cf5e52392e541becce6e209622ad4081c798"
@@ -3354,6 +3367,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/client-logger@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.4.tgz#7533f5194903f554c297b0d327efee04c5accfbb"
+  integrity sha512-vJwMShC98tcoFruRVQ4FphmFqvAZX1FqZqjFyk6IxtFumPKTVSnXJjlU1SnUIkSK2x97rgdUMqkdI+wAv/tugQ==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/codemod@7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.6.2.tgz#48fe9ab2b3027a46d217af300ac93e58d429095b"
@@ -3374,29 +3394,29 @@
     prettier "^2.8.0"
     recast "^0.23.1"
 
-"@storybook/components@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.6.2.tgz#7ea0d16cba801e100d5c1e3bf79a40c208c46a28"
-  integrity sha512-j44xPJlg3w0r3ESw7Iq4Iiiqm5cDyM8tkCxkyYzTdHwf5sQ1xAzSXq/XFRD548hY54VPJq7GW3ov0YRUPWzthg==
+"@storybook/components@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.6.4.tgz#44cf5fa1b52af540157b4dee7d23a46817329ab1"
+  integrity sha512-K5RvEObJAnX+SbGJbkM1qrZEk+VR2cUhRCSrFnlfMwsn8/60T3qoH7U8bCXf8krDgbquhMwqev5WzDB+T1VV8g==
   dependencies:
     "@radix-ui/react-select" "^1.2.2"
     "@radix-ui/react-toolbar" "^1.0.4"
-    "@storybook/client-logger" "7.6.2"
+    "@storybook/client-logger" "7.6.4"
     "@storybook/csf" "^0.1.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/theming" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/theming" "7.6.4"
+    "@storybook/types" "7.6.4"
     memoizerific "^1.11.3"
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.6.2.tgz#0325e53d4e09533ce47aced3f7f1bf37b50126c5"
-  integrity sha512-hYSLZM6F2K2WxNoXsI+V+8Ya7mymNrdZpqKhCfQrr8Oi3HPaBRdNWyBD5k96lLp4dHR5ctEUWd8LcdNc+dwGsg==
+"@storybook/core-client@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.6.4.tgz#d38ddb80bbc6119017a8ba15b88c030cf03d27e0"
+  integrity sha512-0msqdGd+VYD1dRgAJ2StTu4d543Wveb7LVVujX3PwD/QCxmCaVUHuAoZrekM/H7jZLw546ZIbLZo0xWrADAUMw==
   dependencies:
-    "@storybook/client-logger" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
 
 "@storybook/core-common@7.6.2":
   version "7.6.2"
@@ -3427,13 +3447,49 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/core-events@7.6.2", "@storybook/core-events@^7.6.2":
+"@storybook/core-common@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.6.4.tgz#8ee282058ea4dd8fc0a053c30759f4bf65dab86b"
+  integrity sha512-qes4+mXqINu0kCgSMFjk++GZokmYjb71esId0zyJsk0pcIPkAiEjnhbSEQkMhbUfcvO1lztoaQTBW2P7Rd1tag==
+  dependencies:
+    "@storybook/core-events" "7.6.4"
+    "@storybook/node-logger" "7.6.4"
+    "@storybook/types" "7.6.4"
+    "@types/find-cache-dir" "^3.2.1"
+    "@types/node" "^18.0.0"
+    "@types/node-fetch" "^2.6.4"
+    "@types/pretty-hrtime" "^1.0.0"
+    chalk "^4.1.0"
+    esbuild "^0.18.0"
+    esbuild-register "^3.5.0"
+    file-system-cache "2.3.0"
+    find-cache-dir "^3.0.0"
+    find-up "^5.0.0"
+    fs-extra "^11.1.0"
+    glob "^10.0.0"
+    handlebars "^4.7.7"
+    lazy-universal-dotenv "^4.0.0"
+    node-fetch "^2.0.0"
+    picomatch "^2.3.0"
+    pkg-dir "^5.0.0"
+    pretty-hrtime "^1.0.3"
+    resolve-from "^5.0.0"
+    ts-dedent "^2.0.0"
+
+"@storybook/core-events@7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.2.tgz#13198c8020601fd74ec4eb53852f20e7f0bd68b5"
   integrity sha512-JciGNDclg3hx+WkXsAzcCBYWk0xsyIbyCAwqN7XVHUpGndR/dl97Qum5MkO9kPb8r5toKpeBOQo5Kxo2GiE0dg==
   dependencies:
     ts-dedent "^2.0.0"
 
+"@storybook/core-events@7.6.4", "@storybook/core-events@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.4.tgz#55405545dbc9ae5715654d2198ee1f1a3cc34ef7"
+  integrity sha512-i3xzcJ19ILSy4oJL5Dz9y0IlyApynn5RsGhAMIsW+mcfri+hGfeakq1stNCo0o7jW4Y3A7oluFTtIoK8DOxQdQ==
+  dependencies:
+    ts-dedent "^2.0.0"
+
 "@storybook/core-server@7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.6.2.tgz#1473fd7f6fa08fd9808a7bf3f06bf35112b09087"
@@ -3481,23 +3537,23 @@
     watchpack "^2.2.0"
     ws "^8.2.3"
 
-"@storybook/core-webpack@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-7.6.2.tgz#9326400332957e369923b489ee7df5600739b0d6"
-  integrity sha512-XgeCWJXaT9mGx4BLgmGCgSnsEwXkEk2tPfujFH6v9/GeS29w9QA8mT6O09XdutOsQbZROq+Y3j1Pm9m5ieQT0A==
+"@storybook/core-webpack@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-7.6.4.tgz#fd9ff9eb54cfd57c6f1a3642b0605e9c80999044"
+  integrity sha512-+C2YddhOhO0Lp9KngzX9XYJZKzCzo4vjXA3IMXxSA7Vo7gFhaa8uQTAXnUx7xCrvFXM/iiHUY1SN+VppB0eBdA==
   dependencies:
-    "@storybook/core-common" "7.6.2"
-    "@storybook/node-logger" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/core-common" "7.6.4"
+    "@storybook/node-logger" "7.6.4"
+    "@storybook/types" "7.6.4"
     "@types/node" "^18.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/csf-plugin@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.6.2.tgz#98c8ff4611b5da45e21578fb6fd4be62fa84c68d"
-  integrity sha512-6aVZG6vsqHXQ6lBU9SiZRFWTGwuauDcFMRbJEEMMgifWIn7gddUXqYZZ48yjGTdmflsAWZ3K82B90u7whZ1aew==
+"@storybook/csf-plugin@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.6.4.tgz#5d18cffc1c92dfd12d8571b2ba9d1456de58d8b2"
+  integrity sha512-7g9p8s2ITX+Z9iThK5CehPhJOcusVN7JcUEEW+gVF5PlYT+uk/x+66gmQno+scQuNkV9+8UJD6RLFjP+zg2uCA==
   dependencies:
-    "@storybook/csf-tools" "7.6.2"
+    "@storybook/csf-tools" "7.6.4"
     unplugin "^1.3.1"
 
 "@storybook/csf-tools@7.6.2":
@@ -3515,6 +3571,21 @@
     recast "^0.23.1"
     ts-dedent "^2.0.0"
 
+"@storybook/csf-tools@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.6.4.tgz#4c1ef7a79ecd6f96d7fc1cb092cf2ed942cd65e2"
+  integrity sha512-6sLayuhgReIK3/QauNj5BW4o4ZfEMJmKf+EWANPEM/xEOXXqrog6Un8sjtBuJS9N1DwyhHY6xfkEiPAwdttwqw==
+  dependencies:
+    "@babel/generator" "^7.23.0"
+    "@babel/parser" "^7.23.0"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    "@storybook/csf" "^0.1.2"
+    "@storybook/types" "7.6.4"
+    fs-extra "^11.1.0"
+    recast "^0.23.1"
+    ts-dedent "^2.0.0"
+
 "@storybook/csf@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -3534,14 +3605,14 @@
   resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz#33ba0e39d1461caf048b57db354b2cc410705316"
   integrity sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==
 
-"@storybook/docs-tools@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.6.2.tgz#69a747bcc3a544c7f2d9472a585cecca8fcdaf9d"
-  integrity sha512-mmTW7K36ghNfUouRKu0x1cTCdwircsIXg7+LOen6GHRUdy/6G6Xa176A4zoCp9vAO4UKgAS2N+FJfD/p3sR9Ow==
+"@storybook/docs-tools@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.6.4.tgz#504b8654f348a109b69cc77cdab556f0bf9c2304"
+  integrity sha512-2eGam43aD7O3cocA72Z63kRi7t/ziMSpst0qB218QwBWAeZjT4EYDh8V6j/Xhv6zVQL3msW7AglrQP5kCKPvPA==
   dependencies:
-    "@storybook/core-common" "7.6.2"
-    "@storybook/preview-api" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/core-common" "7.6.4"
+    "@storybook/preview-api" "7.6.4"
+    "@storybook/types" "7.6.4"
     "@types/doctrine" "^0.0.3"
     assert "^2.1.0"
     doctrine "^3.0.0"
@@ -3569,19 +3640,19 @@
     "@types/jest" "28.1.3"
     jest-mock "^27.3.0"
 
-"@storybook/manager-api@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.2.tgz#83dc358616b29ec5627bb8b8d5a19eda41c1d8fc"
-  integrity sha512-g3V0J8Vsik+7EwcMutZ5wjHnwLr4TfhoC+p59vRU13MdLvq0vSGxutkxortjdBrdDM8DJCpTjzA0/ikjf6HAoA==
+"@storybook/manager-api@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.4.tgz#edf5d553a78987ad8602700b7200391776010f48"
+  integrity sha512-RFb/iaBJfXygSgXkINPRq8dXu7AxBicTGX7MxqKXbz5FU7ANwV7abH6ONBYURkSDOH9//TQhRlVkF5u8zWg3bw==
   dependencies:
-    "@storybook/channels" "7.6.2"
-    "@storybook/client-logger" "7.6.2"
-    "@storybook/core-events" "7.6.2"
+    "@storybook/channels" "7.6.4"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/core-events" "7.6.4"
     "@storybook/csf" "^0.1.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/router" "7.6.2"
-    "@storybook/theming" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/router" "7.6.4"
+    "@storybook/theming" "7.6.4"
+    "@storybook/types" "7.6.4"
     dequal "^2.0.2"
     lodash "^4.17.21"
     memoizerific "^1.11.3"
@@ -3605,23 +3676,28 @@
   resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.6.2.tgz#a8ceb9a0fa594fa5b0aad1940dcd7c3138e9725f"
   integrity sha512-BiHADIHeKDSIJFWXPlNGb7UlR48jlTLcGXmWm68ucFWxkngwG81Tih/lJ1WW2GxTFl2LSrhvO9uKIFBBeVltzA==
 
-"@storybook/postinstall@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.6.2.tgz#cbfb0491ca02070753718bd38f7703401bc648df"
-  integrity sha512-UdhdoohivwzljzXFY/KmUtS9UyMNHGQ6YRZsArdkH8qf0TV5F19WXb+yIrkpQVzOCxmD1fvYyiEy/RS4LPvtbA==
+"@storybook/node-logger@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.6.4.tgz#e471ee117bbd329522113dd98e5a42e83e259f9c"
+  integrity sha512-GDkEnnDj4Op+PExs8ZY/P6ox3wg453CdEIaR8PR9TxF/H/T2fBL6puzma3hN2CMam6yzfAL8U+VeIIDLQ5BZdQ==
 
-"@storybook/preset-react-webpack@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.2.tgz#df7804be1417ac5ea5d38bda82d39470df3e1860"
-  integrity sha512-2saZwIqaintAJ1vyylBFtMXV0JiA0PYCy+7klq/h/X9Eznwkb5ZvlqVouDq0ASB3EuMc9QtLCz/vQ9+SbDyXgw==
+"@storybook/postinstall@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.6.4.tgz#baefcec351ac79ee711ad27b65bf1ec28e545da6"
+  integrity sha512-7uoB82hSzlFSdDMS3hKQD+AaeSvPit/fAMvXCBxn0/D0UGJUZcq4M9JcKBwEHkZJcbuDROgOTJ6TUeXi/FWO0w==
+
+"@storybook/preset-react-webpack@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.4.tgz#ea1efab0a5e973136ddcb196cbdba85afe411233"
+  integrity sha512-rQ3hqehGUvmbwUosNdh1jnXevaHQ9ezqc4v8YlX5TELp1oz+qhRe0gnQOdsQ98SsdjA24EHfgc331dp9F3up6Q==
   dependencies:
     "@babel/preset-flow" "^7.22.15"
     "@babel/preset-react" "^7.22.15"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.11"
-    "@storybook/core-webpack" "7.6.2"
-    "@storybook/docs-tools" "7.6.2"
-    "@storybook/node-logger" "7.6.2"
-    "@storybook/react" "7.6.2"
+    "@storybook/core-webpack" "7.6.4"
+    "@storybook/docs-tools" "7.6.4"
+    "@storybook/node-logger" "7.6.4"
+    "@storybook/react" "7.6.4"
     "@storybook/react-docgen-typescript-plugin" "1.0.6--canary.9.0c3f3b7.0"
     "@types/node" "^18.0.0"
     "@types/semver" "^7.3.4"
@@ -3658,10 +3734,30 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/preview@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.6.2.tgz#da7d8a73da3a73c1bf271230e4c35d991d5ea010"
-  integrity sha512-VVrtYe55ZU3+2BOaCT96Gwd1D72w8UbPPlnJrMqOF3OI26dRs6U++jtPFg2EdOgmAf67Oxh4M/kwBAi+uIghxA==
+"@storybook/preview-api@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.6.4.tgz#df103fbdfada5ceee540f6ea68001c0d2c718113"
+  integrity sha512-KhisNdQX5NdfAln+spLU4B82d804GJQp/CnI5M1mm/taTnjvMgs/wTH9AmR89OPoq+tFZVW0vhy2zgPS3ar71A==
+  dependencies:
+    "@storybook/channels" "7.6.4"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/core-events" "7.6.4"
+    "@storybook/csf" "^0.1.2"
+    "@storybook/global" "^5.0.0"
+    "@storybook/types" "7.6.4"
+    "@types/qs" "^6.9.5"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
+"@storybook/preview@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.6.4.tgz#36cca1d10fd3729f1a68789d95bfc400e33aa616"
+  integrity sha512-p9xIvNkgXgTpSRphOMV9KpIiNdkymH61jBg3B0XyoF6IfM1S2/mQGvC89lCVz1dMGk2SrH4g87/WcOapkU5ArA==
 
 "@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0":
   version "1.0.6--canary.9.0c3f3b7.0"
@@ -3676,33 +3772,33 @@
     react-docgen-typescript "^2.2.2"
     tslib "^2.0.0"
 
-"@storybook/react-dom-shim@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.6.2.tgz#35f8df44af8addc10a81bcf1cfa5d5b1f8041a2a"
-  integrity sha512-YyZUzQ56ivh2WIkWnzb57ihIuyk4iMcr4fw7Lpq/Qj7XIJu+SkX/xFhDhvBXj7IFZPfOwMmhl5A7IfcGc43gbQ==
+"@storybook/react-dom-shim@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.6.4.tgz#d1f5440c8f1ccd95abcc01117872ce46d0ab9dc3"
+  integrity sha512-wGJfomlDEBnowNmhmumWDu/AcUInxSoPqUUJPgk2f5oL0EW17fR9fDP/juG3XOEdieMDM0jDX48GML7lyvL2fg==
 
-"@storybook/react-webpack5@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-7.6.2.tgz#e50a548cbff1b4e453024e2cdc4195d371dd8ef1"
-  integrity sha512-v6K2HMW7JBvhflR0MvbFCbtY6v/IOcNZoVAdV7HqnxkNORtxu8+U7gnVzBOUNPuL9BRdX3Ht4+XQO3nH7XlUlQ==
+"@storybook/react-webpack5@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-7.6.4.tgz#528b72172f3046bdcfa9934b5cfe22edf0b784f7"
+  integrity sha512-uUucaHG67Yu2WrHigJzMbbYg6vbehHDUC6HsORcfwdC9y/VhR47ORU6UkVQNZ/K4WLNe4HbyGGKGRUght5UtbQ==
   dependencies:
-    "@storybook/builder-webpack5" "7.6.2"
-    "@storybook/preset-react-webpack" "7.6.2"
-    "@storybook/react" "7.6.2"
+    "@storybook/builder-webpack5" "7.6.4"
+    "@storybook/preset-react-webpack" "7.6.4"
+    "@storybook/react" "7.6.4"
     "@types/node" "^18.0.0"
 
-"@storybook/react@7.6.2", "@storybook/react@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.6.2.tgz#8658b30edcc0e0d64b202c2583308818abb542f2"
-  integrity sha512-yS73wAdl/5ibuGN4q1uNUlmVQw3xJd48smRaYqVgBedhKlqTWCX6tKIzT4qQDAl5eAqVo//Baq+e0d2/UvzHmQ==
+"@storybook/react@7.6.4", "@storybook/react@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.6.4.tgz#b17c451eb1240399d75c45ccb90a145ab1de44ac"
+  integrity sha512-XYRP+eylH3JqkCuziwtQGY5vOCeDreOibRYJmj5na6k4QbURjGVB44WCIW04gWVlmBXM9SqLAmserUi3HP890Q==
   dependencies:
-    "@storybook/client-logger" "7.6.2"
-    "@storybook/core-client" "7.6.2"
-    "@storybook/docs-tools" "7.6.2"
+    "@storybook/client-logger" "7.6.4"
+    "@storybook/core-client" "7.6.4"
+    "@storybook/docs-tools" "7.6.4"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "7.6.2"
-    "@storybook/react-dom-shim" "7.6.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/preview-api" "7.6.4"
+    "@storybook/react-dom-shim" "7.6.4"
+    "@storybook/types" "7.6.4"
     "@types/escodegen" "^0.0.6"
     "@types/estree" "^0.0.51"
     "@types/node" "^18.0.0"
@@ -3718,22 +3814,22 @@
     type-fest "~2.19"
     util-deprecate "^1.0.2"
 
-"@storybook/router@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.6.2.tgz#574035d4c58dac3e9c6bed0c7034f50fcbb484a2"
-  integrity sha512-Wf28XTwZwF1CbCKI0/+OtELadaMAqXA2NSU47MBn0S0i4gs4PaI3KQ+0EBx16uYUgcr40A4k9F1UC9y49B1zLA==
+"@storybook/router@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.6.4.tgz#13112bd9d6709bebe4072d923e4921b660f8f00c"
+  integrity sha512-5MQ7Z4D7XNPN2yhFgjey7hXOYd6s8CggUqeAwhzGTex90SMCkKHSz1hfkcXn1ZqBPaall2b53uK553OvPLp9KQ==
   dependencies:
-    "@storybook/client-logger" "7.6.2"
+    "@storybook/client-logger" "7.6.4"
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
-"@storybook/source-loader@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-7.6.2.tgz#3c154943214c91567290944aa5474675141784fd"
-  integrity sha512-aWQe93chrfOLdMkIUI2u7e6t9urPYx1EMpaTcm/4MKiMqJOnRQY+ZmUX3h+uNZ5tkh3+OpvPTIY4jU1NLVoz5Q==
+"@storybook/source-loader@7.6.4", "@storybook/source-loader@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-7.6.4.tgz#ef930e2dd947f45cbfaf845fa21035d82ac25c8d"
+  integrity sha512-1wb/3bVpJZ/3r3qUrLK8jb0kLuvwjNi5T1kci5huREdc1TrIxZXoPw9EiyjcMCZzCURkoj7euNLrLHGyzdBTLg==
   dependencies:
     "@storybook/csf" "^0.1.2"
-    "@storybook/types" "7.6.2"
+    "@storybook/types" "7.6.4"
     estraverse "^5.2.0"
     lodash "^4.17.21"
     prettier "^2.8.0"
@@ -3768,13 +3864,13 @@
   dependencies:
     "@storybook/csf" "^0.1.0"
 
-"@storybook/theming@7.6.2", "@storybook/theming@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.6.2.tgz#30f6f050f587be4cd99800ad4992984fb2c4af23"
-  integrity sha512-Q76SCBRjYQ6Yg8CQEIW2eavM9Bd/zq+ScurIcW3FJLfVrrdsdC+zueoz4d9mS6F6IECczR+O9PxmpbXfaDPHjw==
+"@storybook/theming@7.6.4", "@storybook/theming@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.6.4.tgz#cc81d0aee5fc80fe383cb6790e3a0e2ad80d2185"
+  integrity sha512-Z/dcC5EpkIXelYCkt9ojnX6D7qGOng8YHxV/OWlVE9TrEGYVGPOEfwQryR0RhmGpDha1TYESLYrsDb4A8nJ1EA==
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@storybook/client-logger" "7.6.2"
+    "@storybook/client-logger" "7.6.4"
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
@@ -3788,6 +3884,16 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@storybook/types@7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.6.4.tgz#3bb50b46286cc83484848c3c450c32cc2071eb21"
+  integrity sha512-qyiiXPCvol5uVgfubcIMzJBA0awAyFPU+TyUP1mkPYyiTHnsHYel/mKlSdPjc8a97N3SlJXHOCx41Hde4IyJgg==
+  dependencies:
+    "@storybook/channels" "7.6.4"
+    "@types/babel__core" "^7.0.0"
+    "@types/express" "^4.7.0"
+    file-system-cache "2.3.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"