diff --git a/components/.storybook/darkModeDecorator.ts b/components/.storybook/darkModeDecorator.ts
new file mode 100644
index 00000000..f75c8ae7
--- /dev/null
+++ b/components/.storybook/darkModeDecorator.ts
@@ -0,0 +1,26 @@
+import React from 'react';
+import { themes, ThemeProvider } from 'storybook/theming';
+
+// Add a global decorator that will render a dark background when the
+// "Color Scheme" knob is set to dark
+const darkModeDecorator = (storyFn) => {
+	// A knob for color scheme added to every story
+	const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');
+
+	// Hook your theme provider with some knobs
+	return React.createElement(ThemeProvider, {
+		// A knob for theme added to every story
+		theme: select('Theme', Object.keys(themes), 'default'),
+		colorScheme,
+		children: [
+			React.createElement('style', {
+				dangerouslySetInnerHTML: {
+					__html: `html { ${colorScheme === 'dark' ? 'background-color: rgb(35,35,35);' : ''} }`
+				}
+			}),
+			storyFn()
+		]
+	});
+};
+
+export default darkModeDecorator;
diff --git a/components/.storybook/main.ts b/components/.storybook/main.ts
index 7ea0a58e..cbf0c8cb 100644
--- a/components/.storybook/main.ts
+++ b/components/.storybook/main.ts
@@ -20,7 +20,8 @@ const config: StorybookConfig = {
 		},
 		getAbsolutePath('@storybook/addon-links'),
 		getAbsolutePath('@storybook/addon-vitest'),
-		getAbsolutePath('@storybook/addon-docs')
+		getAbsolutePath('@storybook/addon-docs'),
+		getAbsolutePath('@vueless/storybook-dark-mode')
 	],
 	framework: {
 		name: getAbsolutePath('@storybook/sveltekit'),
diff --git a/components/.storybook/preview.ts b/components/.storybook/preview.ts
index 8570e1a1..46a7ca60 100644
--- a/components/.storybook/preview.ts
+++ b/components/.storybook/preview.ts
@@ -1,7 +1,17 @@
 import type { Preview } from '@storybook/sveltekit';
+import { themes } from 'storybook/theming';
 
 const preview: Preview = {
 	parameters: {
+		backgrounds: {
+			options: [
+				{ name: 'dark', value: '#0C0C0C' }, // tokens.pageFill.dark
+				{ name: 'light', value: '#fff' } // tokens.pageFill.light
+			]
+		},
+		initialGlobals: {
+			backgrounds: { value: 'dark' }
+		},
 		options: {
 			storySort: {
 				order: [
@@ -40,8 +50,15 @@ const preview: Preview = {
 				color: /(background|color)$/i,
 				date: /Date$/i
 			}
+		},
+		darkMode: {
+			dark: { ...themes.dark },
+			light: { ...themes.normal },
+			stylePreview: true
 		}
 	},
+
+	decorators: [],
 	tags: ['autodocs']
 };
 
diff --git a/components/package.json b/components/package.json
index 289e4299..07256c09 100644
--- a/components/package.json
+++ b/components/package.json
@@ -53,6 +53,7 @@
 		"@versatiles/style": "^5.7.0",
 		"@vitest/browser": "^3.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
+		"@vueless/storybook-dark-mode": "^9.0.8",
 		"concurrently": "^9.2.1",
 		"http-server": "^14.1.1",
 		"mdx-mermaid": "^2.0.3",
diff --git a/components/src/Caption/Caption.stories.svelte b/components/src/Caption/Caption.stories.svelte
index d4a08faf..a1d61a33 100644
--- a/components/src/Caption/Caption.stories.svelte
+++ b/components/src/Caption/Caption.stories.svelte
@@ -12,13 +12,24 @@
 
 <Story name="Default" asChild>
 	<DesignTokens>
-		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
+		<div class="container">
+			<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
+		</div>
 	</DesignTokens>
 </Story>
+
 <Story name="Bold" asChild>
 	<DesignTokens>
-		<Caption weight="bold">
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
-		</Caption>
+		<div class="container">
+			<Caption weight="bold">
+				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
+			</Caption>
+		</div>
 	</DesignTokens>
 </Story>
+
+<style>
+	.container {
+		color: var(--colour-copyPrimary);
+	}
+</style>
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index cfa34633..77e81d64 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -27,7 +27,7 @@
 
 <style>
 	.container {
-		color: var(--gray-dark-5);
+		color: var(--colour-copyPrimary);
 		font-family: var(--swr-sans);
 		display: flex;
 		flex-flow: column;
diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte
index db5cab0f..9ec6ded0 100644
--- a/components/src/Copy/Copy.svelte
+++ b/components/src/Copy/Copy.svelte
@@ -20,6 +20,7 @@
 		font-size: var(--fs-base);
 		letter-spacing: 0.005em;
 		line-height: 1.475;
+		color: var(--colour-copyPrimary);
 	}
 
 	.bold {
diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte
index c7ad7fac..e9564564 100644
--- a/components/src/DesignTokens/DesignTokens.svelte
+++ b/components/src/DesignTokens/DesignTokens.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { shades } from './Tokens';
+	import { shades, semantics } from './Tokens';
 
 	interface DesignTokensProps {
 		children?: Snippet;
 	}
 	let { children }: DesignTokensProps = $props();
 
+	const colours = { ...shades, ...semantics };
 	const rules = [
-		...Object.keys(shades).map((key) => {
-			return Object.entries(shades[key])
+		...Object.keys(colours).map((key) => {
+			return Object.entries(colours[key])
 				.map(([shade, value]) => {
 					const [ldb, index] = shade.split(/(\d+)/);
 					return ldb === 'base'
 						? `--${key}-${ldb}: ${value}`
-						: `--${key}-${ldb}-${index}: ${value}`;
+						: `--${key}-${ldb}${index ? `-${index}` : ''}: ${value}`;
 				})
 				.join(';');
 		})
@@ -43,11 +44,24 @@
 		--br-large: 8px;
 		--br-small: 4px;
 		--input-height: 2.5rem;
+
+		--colour-copyPrimary: var(--copyPrimary-light);
+		--colour-copySecondary: var(--copySecondary-light);
+		--colour-copySecondaryHover: var(--copySecondaryHover-light);
+		--colour-logoFill: var(--logoFill-light);
+		--colour-surfaceFill: var(--surfaceFill-light);
+		@media (prefers-color-scheme: dark) {
+			--colour-logoFill: var(--logoFill-dark);
+			--colour-surfaceFill: var(--surfaceFill-dark);
+			--colour-copyPrimary: var(--copyPrimary-dark);
+			--colour-copySecondary: var(--copySecondary-dark);
+			--colour-copySecondaryHover: var(--copySecondaryHover-dark);
+		}
+
 		--swr-text: 'SWR-VAR-Text', sans-serif;
 		--swr-sans: 'SWR-VAR-Sans', sans-serif;
 
 		// Type scale copied 1:1 from swr.de
-
 		--fs-small-3: 0.75rem;
 		--fs-small-2: 0.875rem;
 		--fs-small-1: 1rem;
diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index cc2fef79..9059808e 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -156,6 +156,33 @@ const shades: ColourMap = {
 	}
 };
 
+const semantics: ColourMap = {
+	copyPrimary: {
+		light: '#0c0c0c',
+		dark: '#f8f7f5'
+	},
+	copySecondary: {
+		light: shades.gray.base,
+		dark: '#a3a3a3'
+	},
+	copySecondaryHover: {
+		light: shades.gray.dark1,
+		dark: '#b4b4b4'
+	},
+	logoFill: {
+		light: shades.gray.light3,
+		dark: shades.gray.base
+	},
+	surfaceFill: {
+		dark: '#222325',
+		light: '#f1eeeb'
+	},
+	pageFill: {
+		dark: '#0C0C0C',
+		light: '#fff'
+	}
+};
+
 const scales: ColourMap = {
 	red_blue: [...Object.values(shades.red).reverse(), ...Object.values(shades.blue)],
 	red_violet: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
@@ -187,4 +214,4 @@ const typography = {
 	}
 };
 
-export { shades, scales, typography };
+export { shades, scales, typography, semantics };
diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte
index 48fc8ffa..5923aebd 100644
--- a/components/src/Headline/Headline.stories.svelte
+++ b/components/src/Headline/Headline.stories.svelte
@@ -12,6 +12,14 @@
 
 <Story name="Default" asChild>
 	<DesignTokens>
-		<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
+		<div class="container">
+			<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
+		</div>
 	</DesignTokens>
 </Story>
+
+<style>
+	.container {
+		color: var(--colour-copyPrimary);
+	}
+</style>
diff --git a/components/src/Headline/Headline.svelte b/components/src/Headline/Headline.svelte
index c4e62c6b..91de28be 100644
--- a/components/src/Headline/Headline.svelte
+++ b/components/src/Headline/Headline.svelte
@@ -15,9 +15,9 @@
 
 <style>
 	.container {
-		font-family: var(--swr-text);
+		font-family: var(--swr-sans);
 		font-size: var(--fs-large-1);
-		font-weight: 680;
+		font-weight: 700;
 		letter-spacing: 0.005em;
 		line-height: 1.35;
 	}
diff --git a/components/src/Logotype/Logotype.svelte b/components/src/Logotype/Logotype.svelte
index a1dd0246..e4a981e2 100644
--- a/components/src/Logotype/Logotype.svelte
+++ b/components/src/Logotype/Logotype.svelte
@@ -42,6 +42,6 @@
 		height: calc(var(--fs-small-2) * 0.8);
 	}
 	path {
-		fill: var(--gray-light-1);
+		fill: var(--colour-logoFill);
 	}
 </style>
diff --git a/components/src/Middot/Middot.svelte b/components/src/Middot/Middot.svelte
index 8a6b703f..15a44907 100644
--- a/components/src/Middot/Middot.svelte
+++ b/components/src/Middot/Middot.svelte
@@ -2,9 +2,9 @@
 
 <style>
 	.middot {
-		background: currentColor;
-		width: 0.65em;
-		height: 0.65em;
+		background: var(--colour-copySecondary);
+		width: 0.6em;
+		height: 0.6em;
 		display: inline-block;
 		border-radius: 1000px;
 		opacity: 0.65;
diff --git a/components/src/Note/Note.svelte b/components/src/Note/Note.svelte
index b79a7538..79d95163 100644
--- a/components/src/Note/Note.svelte
+++ b/components/src/Note/Note.svelte
@@ -16,10 +16,10 @@
 <style lang="scss">
 	.container {
 		font-family: var(--swr-sans);
-		font-size: var(--fs-small-2);
+		font-size: calc(var(--fs-small-2) * 0.9);
 		line-height: 1.4;
-		letter-spacing: 0.001em;
-		color: var(--gray-base);
+		letter-spacing: 0.0015em;
+		color: var(--colour-copySecondary);
 
 		:global(*) {
 			color: inherit;
@@ -32,7 +32,7 @@
 			text-underline-offset: 0.15em;
 			&:hover,
 			&:focus-visible {
-				color: var(--gray-dark-3);
+				color: var(--colour-copySecondaryHover);
 			}
 		}
 	}
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 7e64b94c..753c6345 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -76,8 +76,9 @@
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
-		border: 1px solid currentColor;
-		background: white;
+		border: 1px solid var(--colour-copySecondary);
+		color: var(--colour-copyPrimary);
+		background: var(--colour-surfaceFill);
 		border-radius: var(--br-small);
 
 		@media (min-width: base.$bp-s) {
@@ -118,14 +119,12 @@
 		position: relative;
 		transition: var(--fast);
 		text-underline-offset: 0.2em;
-		border-bottom: 1px solid currentColor;
 		height: 2.25em;
 		@media (min-width: base.$bp-s) {
 			justify-content: center;
 			padding: 0 1em;
 			flex-basis: 0;
 			flex-grow: 1;
-			border-right: 1px solid currentColor;
 			border-bottom: 0;
 		}
 		@media (min-width: base.$bp-s) {
@@ -136,12 +135,8 @@
 			text-decoration: underline;
 		}
 		.is-selected & {
-			background: rgb(247, 247, 247);
-			font-weight: 600;
-			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
-			@media (min-width: base.$bp-s) {
-				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
-			}
+			background: var(--colour-copySecondary);
+			font-weight: 700;
 		}
 	}
 </style>
diff --git a/package-lock.json b/package-lock.json
index 5774951b..865f85ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
 				"@versatiles/style": "^5.7.0",
 				"@vitest/browser": "^3.2.4",
 				"@vitest/coverage-v8": "^3.2.4",
+				"@vueless/storybook-dark-mode": "^9.0.8",
 				"concurrently": "^9.2.1",
 				"http-server": "^14.1.1",
 				"mdx-mermaid": "^2.0.3",
@@ -51,6 +52,7 @@
 				"sass-embedded": "^1.89.2",
 				"semantic-release": "^24.2.7",
 				"storybook": "^9.1.4",
+				"storybook-dark-mode": "^4.0.2",
 				"svelte": "^5.23.0",
 				"svelte-check": "^4.0.0",
 				"svelte-preprocess": "^6.0.3",
@@ -4397,6 +4399,67 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@storybook/components": {
+			"version": "8.6.14",
+			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.6.14.tgz",
+			"integrity": "sha512-HNR2mC5I4Z5ek8kTrVZlIY/B8gJGs5b3XdZPBPBopTIN6U/YHXiDyOjY3JlaS4fSG1fVhp/Qp1TpMn1w/9m1pw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+			}
+		},
+		"node_modules/@storybook/core": {
+			"version": "8.6.14",
+			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.14.tgz",
+			"integrity": "sha512-1P/w4FSNRqP8j3JQBOi3yGt8PVOgSRbP66Ok520T78eJBeqx9ukCfl912PQZ7SPbW3TIunBwLXMZOjZwBB/JmA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@storybook/theming": "8.6.14",
+				"better-opn": "^3.0.2",
+				"browser-assert": "^1.2.1",
+				"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
+				"esbuild-register": "^3.5.0",
+				"jsdoc-type-pratt-parser": "^4.0.0",
+				"process": "^0.11.10",
+				"recast": "^0.23.5",
+				"semver": "^7.6.2",
+				"util": "^0.12.5",
+				"ws": "^8.2.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"prettier": "^2 || ^3"
+			},
+			"peerDependenciesMeta": {
+				"prettier": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/core-events": {
+			"version": "8.6.14",
+			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.6.14.tgz",
+			"integrity": "sha512-RrJ95u3HuIE4Nk8VmZP0tc/u0vYoE2v9fYlMw6K2GUSExzKDITs3voy6WMIY7Q3qbQun8XUXVlmqkuFzTEy/pA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+			}
+		},
 		"node_modules/@storybook/csf": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
@@ -4428,6 +4491,34 @@
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
 			}
 		},
+		"node_modules/@storybook/manager-api": {
+			"version": "8.6.14",
+			"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.6.14.tgz",
+			"integrity": "sha512-ez0Zihuy17udLbfHZQXkGqwtep0mSGgHcNzGN7iZrMP1m+VmNo+7aGCJJdvXi7+iU3yq8weXSQFWg5DqWgLS7g==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+			}
+		},
+		"node_modules/@storybook/theming": {
+			"version": "8.6.14",
+			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.14.tgz",
+			"integrity": "sha512-r4y+LsiB37V5hzpQo+BM10PaCsp7YlZ0YcZzQP1OCkPlYXmUAFy2VvDKaFRpD8IeNPKug2u4iFm/laDEbs03dg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+			}
+		},
 		"node_modules/@sveltejs/acorn-typescript": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
@@ -5820,6 +5911,21 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/@vueless/storybook-dark-mode": {
+			"version": "9.0.8",
+			"resolved": "https://registry.npmjs.org/@vueless/storybook-dark-mode/-/storybook-dark-mode-9.0.8.tgz",
+			"integrity": "sha512-VwYn0PnuZ4SIVZigU20FuUDadX++imsGP0w11CXchCjF6fqdrlEm4VrMCTF9tkh4U0ea2znl1ZYXAajUKyOJxw==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/global": "^5.0.0",
+				"@storybook/icons": "^1.4.0",
+				"fast-deep-equal": "^3.1.3",
+				"memoizerific": "^1.11.3"
+			},
+			"engines": {
+				"node": ">=20"
+			}
+		},
 		"node_modules/a-sync-waterfall": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -6136,6 +6242,23 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/available-typed-arrays": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+			"integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"possible-typed-array-names": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/axios": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
@@ -6542,6 +6665,13 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/browser-assert": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+			"integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+			"dev": true,
+			"peer": true
+		},
 		"node_modules/browserslist": {
 			"version": "4.25.0",
 			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.0.tgz",
@@ -6700,6 +6830,26 @@
 				"typedarray-to-buffer": "^3.1.5"
 			}
 		},
+		"node_modules/call-bind": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+			"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.0",
+				"es-define-property": "^1.0.0",
+				"get-intrinsic": "^1.2.4",
+				"set-function-length": "^1.2.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/call-bind-apply-helpers": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -8243,6 +8393,25 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/define-data-property": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"es-define-property": "^1.0.0",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/define-lazy-prop": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -9870,6 +10039,23 @@
 				}
 			}
 		},
+		"node_modules/for-each": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+			"integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"is-callable": "^1.2.7"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/foreground-child": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
@@ -10435,6 +10621,20 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/has-property-descriptors": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"es-define-property": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/has-symbols": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -11076,6 +11276,24 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/is-arguments": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+			"integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -11120,6 +11338,20 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/is-callable": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+			"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-core-module": {
 			"version": "2.16.1",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@@ -11200,6 +11432,26 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/is-generator-function": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+			"integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"get-proto": "^1.0.0",
+				"has-tostringtag": "^1.0.2",
+				"safe-regex-test": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-glob": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -11271,6 +11523,26 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/is-regex": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+			"integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"gopd": "^1.2.0",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-stream": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -11284,6 +11556,23 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/is-typed-array": {
+			"version": "1.1.15",
+			"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+			"integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"which-typed-array": "^1.1.16"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-typedarray": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -12649,6 +12938,17 @@
 			"license": "MIT",
 			"optional": true
 		},
+		"node_modules/jsdoc-type-pratt-parser": {
+			"version": "4.8.0",
+			"resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.8.0.tgz",
+			"integrity": "sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/jsesc": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -13220,6 +13520,13 @@
 				"tmpl": "1.0.5"
 			}
 		},
+		"node_modules/map-or-similar": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+			"integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/maplibre-gl": {
 			"version": "5.7.0",
 			"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.7.0.tgz",
@@ -13578,6 +13885,16 @@
 				"unist-util-visit": "^4.1.0"
 			}
 		},
+		"node_modules/memoizerific": {
+			"version": "1.11.3",
+			"resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+			"integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"map-or-similar": "^1.5.0"
+			}
+		},
 		"node_modules/meow": {
 			"version": "13.2.0",
 			"resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
@@ -18517,6 +18834,17 @@
 				"node": ">= 10.12"
 			}
 		},
+		"node_modules/possible-typed-array-names": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+			"integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.5.4",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.4.tgz",
@@ -18885,6 +19213,17 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/process": {
+			"version": "0.11.10",
+			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
 		"node_modules/process-nextick-args": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -19692,6 +20031,25 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/safe-regex-test": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+			"integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"is-regex": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -20498,6 +20856,25 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/set-function-length": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+			"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"define-data-property": "^1.1.4",
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"get-intrinsic": "^1.2.4",
+				"gopd": "^1.0.1",
+				"has-property-descriptors": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/setprototypeof": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -21066,6 +21443,51 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/storybook": {
+			"version": "8.6.14",
+			"resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.14.tgz",
+			"integrity": "sha512-sVKbCj/OTx67jhmauhxc2dcr1P+yOgz/x3h0krwjyMgdc5Oubvxyg4NYDZmzAw+ym36g/lzH8N0Ccp4dwtdfxw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@storybook/core": "8.6.14"
+			},
+			"bin": {
+				"getstorybook": "bin/index.cjs",
+				"sb": "bin/index.cjs",
+				"storybook": "bin/index.cjs"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"prettier": "^2 || ^3"
+			},
+			"peerDependenciesMeta": {
+				"prettier": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/storybook-dark-mode": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-4.0.2.tgz",
+			"integrity": "sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@storybook/components": "^8.0.0",
+				"@storybook/core-events": "^8.0.0",
+				"@storybook/global": "^5.0.0",
+				"@storybook/icons": "^1.2.5",
+				"@storybook/manager-api": "^8.0.0",
+				"@storybook/theming": "^8.0.0",
+				"fast-deep-equal": "^3.1.3",
+				"memoizerific": "^1.11.3"
+			}
+		},
 		"node_modules/stream-combiner2": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz",
@@ -22775,6 +23197,21 @@
 			"integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
 			"license": "MIT"
 		},
+		"node_modules/util": {
+			"version": "0.12.5",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+			"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"is-arguments": "^1.0.4",
+				"is-generator-function": "^1.0.7",
+				"is-typed-array": "^1.1.3",
+				"which-typed-array": "^1.1.2"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -23380,6 +23817,29 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/which-typed-array": {
+			"version": "1.1.19",
+			"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+			"integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"available-typed-arrays": "^1.0.7",
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.4",
+				"for-each": "^0.3.5",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/why-is-node-running": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",