@swr-data-lab/components 1.4.2 → 1.5.1

package/.storybook/main.ts

@@ -1,20 +1,37 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/sveltekit";
 
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
+  stories: [
+    "../src/**/*.stories.@(js|ts|svelte)",
+    "../src/**/*.mdx",
+  ],
+
   addons: [
-    "@storybook/addon-svelte-csf",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-svelte-csf',
+      options: {
+        legacyTemplate: true
+      }
+    },
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-mdx-gfm")
   ],
   framework: {
-    name: "@storybook/sveltekit",
+    name: getAbsolutePath("@storybook/sveltekit"),
     options: {},
   },
-  core: {
-    builder: '@storybook/builder-vite'
+
+  docs: {
+    autodocs: true
   }
 };
-export default config;
+
+export default config;

package/package.json

@@ -26,28 +26,29 @@
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/npm": "^12.0.1",
-		"@storybook/addon-essentials": "^8.4.5",
-		"@storybook/addon-interactions": "^8.4.5",
-		"@storybook/addon-links": "^8.4.5",
-		"@storybook/addon-svelte-csf": "^4.1.7",
-		"@storybook/blocks": "^8.4.5",
-		"@storybook/builder-vite": "^8.4.5",
-		"@storybook/svelte": "^8.4.5",
-		"@storybook/sveltekit": "^8.4.5",
-		"@storybook/test": "^8.4.5",
+		"@storybook/addon-essentials": "^8.6.4",
+		"@storybook/addon-interactions": "^8.6.4",
+		"@storybook/addon-links": "^8.6.4",
+		"@storybook/addon-mdx-gfm": "^8.6.4",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.27",
+		"@storybook/blocks": "^8.6.4",
+		"@storybook/docs-tools": "^8.6.4",
+		"@storybook/svelte": "^8.6.4",
+		"@storybook/sveltekit": "^8.6.4",
+		"@storybook/test": "^8.6.4",
 		"@storybook/test-runner": "^0.19.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"concurrently": "^9.0.1",
 		"http-server": "^14.1.1",
 		"sass-embedded": "^1.78.0",
 		"semantic-release": "^24.1.2",
-		"storybook": "^8.4.5",
-		"svelte": "^4.2.7",
+		"storybook": "^8.6.4",
+		"svelte": "^5.23.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
+		"vite": "^6.0.0",
 		"wait-on": "^8.0.1"
 	},
 	"type": "module",
@@ -63,5 +64,5 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.4.2"
+	"version": "1.5.1"
 }

package/src/Autocomplete/Autocomplete.stories.js

@@ -1,5 +1,5 @@
 import { userEvent, within, expect, fn } from "@storybook/test"
-import AutoComplete from "."
+import AutoComplete from "./index.js"
 
 export default {
   title: "Example/Autocomplete",
@@ -23,10 +23,6 @@ export const Basic = {
   },
 }
 
-const onSelect = fn((e) => {
-  return e.detail
-})
-
 export const Test = {
   parameters: {
     docs: {
@@ -39,9 +35,8 @@ export const Test = {
     data: testData,
     query: "",
     placeholder: "Select a fruit",
-    event_select: onSelect,
   },
-  play: async ({ args, canvasElement, step }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
     const input = canvas.getByTestId("autocomplete-input")
     await step("Select using the mouse", async () => {
@@ -51,7 +46,6 @@ export const Test = {
       const bananasOption = canvas.getByText("Bananas")
       await userEvent.click(bananasOption)
       expect(input).toHaveValue("Bananas")
-      expect(onSelect).toHaveReturnedWith({ item: { label: "Bananas", value: "Bananas", details: {} } })
     })
     await userEvent.clear(input)
     await step("Select using the keyboard", async () => {
@@ -61,7 +55,6 @@ export const Test = {
       await userEvent.keyboard("{ArrowDown}")
       await userEvent.keyboard("{Enter}")
       expect(input).toHaveValue("Apples")
-      expect(onSelect).toHaveReturnedWith({ item: { label: "Apples", value: "Apples", details: {} } })
     })
     await userEvent.clear(input)
   },

package/src/Card/Card.stories.svelte

@@ -1,5 +1,6 @@
 <script context="module">
 	import Card from './Card.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	export const meta = {
 		title: 'Input Components/Card',
@@ -24,8 +25,10 @@
 </script>
 
 <Story name="Basic card">
-	<Card>
-		<h1>Any content</h1>
-		<p>can be added to a basic <code>Card</code> component.</p>
-	</Card>
+	<DesignTokens>
+		<Card>
+			<h1>Any content</h1>
+			<p>can be added to a basic <code>Card</code> component.</p>
+		</Card>
+	</DesignTokens>
 </Story>

package/src/Card/Card.svelte

@@ -6,11 +6,11 @@
 	@import '../styles/base.scss';
 	.card {
 		@extend %copy;
+		color: white;
 		width: auto;
 		max-width: $app-max-width;
-		color: white;
-		background: $color-violetblue;
-		border-radius: $border-radius-container;
+		background: var(--violet-dark-5);
+		border-radius: var(--br-large);
 		padding: 1.5rem;
 		@include bp($break-tablet) {
 			padding: 2.5rem;

package/src/ChartFooter/ChartFooter.stories.svelte

@@ -0,0 +1,40 @@
+<script context="module">
+	import ChartFooter from './ChartFooter.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import Middot from '../Middot/Middot.svelte';
+
+	export const meta = {
+		title: 'Chart/ChartFooter',
+		component: ChartFooter
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="One-up">
+	<DesignTokens>
+		<ChartFooter layout="one-up">
+			Daten: <a href="https://www.zensus2022.de/DE/Aktuelles/Hinweis_Zensusatlas.html#_ck0gbia65"
+				>Zensus 2022</a
+			>
+			(Durchschnittsmieten und Einwohnerzahlen),
+			<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (Kartenmaterial) <Middot
+			/> In unserer Darstellung wurde das Zensusgitter auf bewohnte Gebiete begrenzt.</ChartFooter
+		>
+	</DesignTokens>
+</Story>
+
+<Story name="Two-up">
+	<DesignTokens>
+		<ChartFooter layout="two-up">
+			Daten: <a href="https://www.zensus2022.de/DE/Aktuelles/Hinweis_Zensusatlas.html#_ck0gbia65"
+				>Zensus 2022</a
+			>
+			(Durchschnittsmieten und Einwohnerzahlen),
+			<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (Kartenmaterial) <Middot
+			/> In unserer Darstellung wurde das Zensusgitter auf bewohnte Gebiete begrenzt.
+		</ChartFooter>
+	</DesignTokens>
+</Story>

package/src/ChartFooter/ChartFooter.svelte

@@ -0,0 +1,51 @@
+<script>
+	import Logotype from '../Logotype/Logotype.svelte';
+	export let layout = 'one-up';
+</script>
+
+<footer class={`container ${layout}`}>
+	<div class="notes">
+		<slot />
+	</div>
+	<Logotype />
+</footer>
+
+<style lang="scss">
+	@use '../styles/vars.scss';
+
+	.container {
+		gap: 0.5rem;
+		font-size: var(--fs-small-1);
+		font-family: var(--swr-sans);
+		line-height: 1.4;
+	}
+	.notes {
+		width: 100%;
+	}
+	footer :global(*) {
+		margin-bottom: 0;
+		color: var(--gray-base);
+	}
+	footer :global(a),
+	footer :global(summary) {
+		&:hover,
+		&:focus-visible {
+			color: rgb(50, 50, 50);
+		}
+	}
+
+	.one-up {
+		display: flex;
+		flex-flow: column;
+		align-items: flex-start;
+	}
+	.two-up {
+		display: grid;
+		grid-template-columns: 1fr;
+		@include vars.bp(vars.$break-phone) {
+			grid-template-columns: 2.5fr 1fr;
+			align-items: last baseline;
+			justify-items: flex-end;
+		}
+	}
+</style>

package/src/ChartFooter/index.js

@@ -0,0 +1,2 @@
+import ChartFooter from './ChartFooter.svelte';
+export default ChartFooter;

package/src/ChartHeader/ChartHeader.stories.svelte

@@ -0,0 +1,19 @@
+<script context="module">
+	import ChartHeader from './ChartHeader.svelte';
+
+	export const meta = {
+		title: 'Chart/ChartHeader',
+		component: ChartHeader
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="Basic ChartHeader">
+	<ChartHeader
+		title="Mehr über-60-Jährige in allen Berufen"
+		subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
+	/>
+</Story>

package/src/ChartHeader/ChartHeader.svelte

@@ -0,0 +1,38 @@
+<script>
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	export let title = '';
+	export let subtitle = '';
+</script>
+
+<DesignTokens>
+	<header class="container">
+		<h2 class="title">{title}</h2>
+		<p class="subtitle">{subtitle}</p>
+		<slot />
+	</header>
+</DesignTokens>
+
+<style lang="scss">
+	@use '../styles/vars.scss';
+
+	.container {
+		color: var(--violet-blue);
+		font-family: var(--swr-sans);
+	}
+	.title {
+		font-size: var(--fs-large-3);
+		line-height: 1.05;
+		text-wrap: balance;
+		font-weight: 700;
+		margin-bottom: 0.2em;
+	}
+	.subtitle {
+		text-wrap: balance;
+		margin-bottom: 0.25em;
+		font-size: var(--fs-large-1);
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+</style>

package/src/ChartHeader/index.js

@@ -0,0 +1,2 @@
+import ChartHeader from './ChartHeader.svelte';
+export default ChartHeader;

package/src/DesignTokens/DesignTokens.mdx

@@ -0,0 +1,68 @@
+import { Title, Story, ColorPalette, ColorItem, Meta, Typeset } from '@storybook/blocks';
+import {shades, scales} from "./Tokens"
+
+<Meta title='Design Tokens'/>
+
+# Design Tokens
+
+## Usage
+
+The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables.
+
+```jsx
+<script>
+  import DesignTokens from "components"
+</script>
+
+<DesignTokens>
+  <p>I'm a sample paragraph</p>
+</DesignTokens>
+
+<style>
+  p {
+    color: var(--violet-dark-1) // this works
+  }
+</style>
+```
+
+You can also import from `Tokens` directly to use colours in maps and charts:
+
+```js
+import { scales } from 'Tokens'
+import { scaleThreshold } from 'd3-scale';
+const sampleScale = scaleThreshold([0, 10], scales.red_blue);
+```
+
+## Available Tokens
+
+### Typography
+
+### Colours
+
+<ColorPalette>
+{["violet", "red", "teal", "yellow", "forest", "pink", "orange", "plum", "apple", "blue", "gray"].map((el, i) => {
+	return(
+		<ColorItem
+		title={`${el.split("")[0].toUpperCase()}${el.slice(1)}`}
+		colors={shades[el]}
+	/>
+			) 
+})}
+</ColorPalette>
+
+### Linear Scales
+### Categorical Scales
+### Divergent Scales
+
+<ColorPalette>
+{["red_blue", "red_violet",  "red_forest", "red_apple", "red_teal", "violet_teal","violet_orange", "blue_pink", "teal_pink","forest_plum","apple_plum",  "orange_blue", "orange_teal"].map((el, i) => {
+	return(
+		<ColorItem
+		
+		title={`${el.split("_").join("/")}`}
+		subtitle={el}
+		colors={scales[el]}
+	/>
+			) 
+})}
+</ColorPalette>

package/src/DesignTokens/DesignTokens.svelte

@@ -0,0 +1,43 @@
+<script>
+	import { shades } from './Tokens';
+
+	const rules = [
+		...Object.keys(shades).map((key) => {
+			return Object.entries(shades[key])
+				.map(([shade, value]) => {
+					const [ldb, index] = shade.split(/(\d+)/);
+					return ldb === 'base'
+						? `--${key}-${ldb}: ${value}`
+						: `--${key}-${ldb}-${index}: ${value}`;
+				})
+				.join(';');
+		}),
+		,
+		'display: contents',
+		'--fast: 150ms',
+		'--slow: 300ms',
+		'--br-large: 8px',
+		'--br-small: 4px',
+		'--ratio: 1.15',
+		'--swr-sans: "SWR-VAR-Sans", sans-serif',
+		'--swr-text: "SWR-VAR-Text", sans-serif',
+		'--fs-small-3: calc(var(--fs-small-2) / var(--ratio))',
+		'--fs-small-2: calc(var(--fs-small-1) / var(--ratio))',
+		'--fs-small-1: calc(var(--fs-base) / var(--ratio))',
+		'--fs-base: clamp(1rem, calc(1.5vw + 0.25rem), 1.125rem)',
+		'--fs-large-1: calc(var(--fs-base) * var(--ratio))',
+		'--fs-large-2: calc(var(--fs-large-1) * var(--ratio))',
+		'--fs-large-3: calc(var(--fs-large-2) * var(--ratio))'
+	];
+</script>
+
+<div class="container" style={rules.join(';')}>
+	<slot />
+</div>
+
+<style>
+	:global(*) {
+		margin: 0;
+		padding: 0;
+	}
+</style>

package/src/DesignTokens/Tokens.js

@@ -0,0 +1,168 @@
+const shades = {
+	violet: {
+		light5: '#f3eefa',
+		light4: '#e5dbf5',
+		light3: '#d4c5ee',
+		light2: '#bba4e5',
+		light1: '#9670db',
+		base: '#8257D1',
+		dark1: '#7f4cdf',
+		dark2: '#6830cf',
+		dark3: '#441993',
+		dark4: '#301268',
+		dark5: '#1D0B40'
+	},
+	red: {
+		light5: '#ffcfcc',
+		light4: '#FFB9A8',
+		light3: '#FF9B82',
+		light2: '#FF7957',
+		light1: '#FF4D20',
+		base: '#E92F02',
+		dark1: '#C52A04',
+		dark2: '#A22406',
+		dark3: '#801F09',
+		dark4: '#5F1A0B',
+		dark5: '#3F150D'
+	},
+	teal: {
+		light5: '#E5FBFF',
+		light4: '#B9EDF6',
+		light3: '#8CDEEC',
+		light2: '#5BCFE1',
+		light1: '#26BED6',
+		base: '#07ABC5',
+		dark1: '#0698B0',
+		dark2: '#04859C',
+		dark3: '#037389',
+		dark4: '#016275',
+		dark5: '#005163'
+	},
+	yellow: {
+		light1: '#FFFDB2',
+		light2: '#FEF67C',
+		light3: '#FDEF3E',
+		light4: '#FAE617',
+		light5: '#F5DF13',
+		base: '#EFD710',
+		dark1: '#E3CA0D',
+		dark2: '#DCC10A',
+		dark3: '#D1B406',
+		dark4: '#C9AC03',
+		dark5: '#C2A300'
+	},
+	forest: {
+		light5: '#EFFBE9',
+		light4: '#CEE9D1',
+		light3: '#ADD6BA',
+		light2: '#8CC4A3',
+		light1: '#6BB28B',
+		base: '#499F73',
+		dark1: '#278D5B',
+		dark2: '#137848',
+		dark3: '#0C643A',
+		dark4: '#06502D',
+		dark5: '#003D20'
+	},
+	pink: {
+		light5: '#FFCCF5',
+		light4: '#FFADE7',
+		light3: '#FF8CD7',
+		light2: '#FF66C6',
+		light1: '#FF30AC',
+		base: '#E9028D',
+		dark1: '#C7047F',
+		dark2: '#A50771',
+		dark3: '#830963',
+		dark4: '#620B55',
+		dark5: '#400E47'
+	},
+
+	orange: {
+		light5: '#FFEECC',
+		light4: '#FFD584',
+		light3: '#FFBA35',
+		light2: '#F4A101',
+		light1: '#DA8F03',
+		base: '#C17D05',
+		dark1: '#A86C07',
+		dark2: '#905B09',
+		dark3: '#794B0B',
+		dark4: '#623B0D',
+		dark5: '#4C2C0F'
+	},
+
+	plum: {
+		light5: '#F1CCFF',
+		light4: '#E9AEFF',
+		light3: '#E08EFF',
+		light2: '#D76CFF',
+		light1: '#CB42FF',
+		base: '#B600FB',
+		dark1: '#9903D4',
+		dark2: '#7C05AE',
+		dark3: '#610889',
+		dark4: '#450A65',
+		dark5: '#400E47'
+	},
+	apple: {
+		light5: '#EFFBEA',
+		light4: '#C5F0B1',
+		light3: '#98E472',
+		light2: '#65D62B',
+		light1: '#5BC128',
+		base: '#53AD26',
+		dark1: '#4A9825',
+		dark2: '#438523',
+		dark3: '#3B7122',
+		dark4: '#335E20',
+		dark5: '#2C4C1F'
+	},
+	blue: {
+		light5: '#CCDCFF',
+		light4: '#B1C5F9',
+		light3: '#97AEF2',
+		light2: '#7D97EC',
+		light1: '#6280E5',
+		base: '#4768DF',
+		dark1: '#2F51D2',
+		dark2: '#2A3FAC',
+		dark3: '#262D87',
+		dark4: '#211C64',
+		dark5: '#1D0B40'
+	},
+	gray: {
+		light3: 'hsl(225, 2%, 77%)',
+		base: 'hsl(227, 2%, 50%)',
+		dark3: 'hsl(236, 2%, 34%)'
+	}
+};
+
+const scales = {
+	violets: [
+		shades.violet.dark3,
+		shades.violet.dark2,
+		shades.violet.dark1,
+		shades.violet.base,
+		shades.violet.light1,
+		shades.violet.light2,
+		shades.violet.light3
+	],
+	red_blue: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.blue)],
+	red_violet: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)],
+	violet_teal: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.teal)],
+	orange_teal: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.teal)],
+	red_forest: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.forest)],
+	red_apple: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.apple)],
+	red_teal: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)],
+	violet_orange: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.orange)],
+	orange_blue: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.blue)],
+	teal_pink: [...Object.entries(shades.teal).reverse(), ...Object.entries(shades.pink)],
+	blue_pink: [...Object.entries(shades.blue).reverse(), ...Object.entries(shades.pink)],
+	apple_plum: [...Object.entries(shades.apple).reverse(), ...Object.entries(shades.plum)],
+	forest_plum: [...Object.entries(shades.forest).reverse(), ...Object.entries(shades.plum)]
+};
+
+const typography = {};
+
+export { shades, scales };

package/src/DesignTokens/index.js

@@ -0,0 +1,2 @@
+import DesignTokens from './DesignTokens.svelte';
+export default DesignTokens;

package/src/HighlightCard/HighlightCard.stories.svelte

@@ -1,5 +1,6 @@
 <script context="module">
 	import HighlightCard from './HighlightCard.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	export const meta = {
 		title: 'Input Components/HighlightCard',
@@ -23,29 +24,33 @@
 </script>
 
 <Story name="Basic HighlightCard">
-	<HighlightCard
-		topline="Die letzte Großspende liegt bei"
-		value="375.000"
-		unit="Euro"
-		subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
-	/>
-</Story>
-
-<Story name="Basic HighlightCard">
-	<div class="highlight-cards">
-		<HighlightCard
-			topline="Im aktuellen Jahr wurden bisher"
-			value="375.000"
-			unit="€"
-			subline="an Parteien gespendet."
-		/>
+	<DesignTokens>
 		<HighlightCard
 			topline="Die letzte Großspende liegt bei"
-			value="37.500"
-			unit="€"
+			value="375.000"
+			unit="Euro"
 			subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
 		/>
-	</div>
+	</DesignTokens>
+</Story>
+
+<Story name="Multiple HighlightCards">
+	<DesignTokens>
+		<div class="highlight-cards">
+			<HighlightCard
+				topline="Im aktuellen Jahr wurden bisher"
+				value="375.000"
+				unit="€"
+				subline="an Parteien gespendet."
+			/>
+			<HighlightCard
+				topline="Die letzte Großspende liegt bei"
+				value="37.500"
+				unit="€"
+				subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
+			/>
+		</div>
+	</DesignTokens>
 </Story>
 
 <style>

package/src/HighlightCard/HighlightCard.svelte

@@ -57,6 +57,6 @@
 
 	.underline {
 		width: fit-content;
-		background: linear-gradient(to bottom, transparent 90%, $color-activeorange 90%);
+		background: linear-gradient(to bottom, transparent 90%, var(--red-base) 90%);
 	}
 </style>

package/src/Logotype/Logotype.svelte

@@ -0,0 +1,46 @@
+<svg viewBox="0 0 127 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M29.4839 5.0001L24.5249 10V6.74702L26.2718 5.0001L24.5249 3.25317V0L29.4839 5.0001ZM13.56 0.542902L12.653 6.11541L11.7462 0.542902H11.2706H10.1269H9.65133L8.74431 6.11541L7.83729 0.542902H5.74167L7.33219 9.54466H8.06062H9.428H9.67987L10.6988 3.76695L11.7174 9.54466H11.9695H13.3367H14.0653L15.6558 0.542902H13.56ZM21.0941 6.65368C20.8671 6.3208 20.6405 5.98773 20.4004 5.64155C21.601 5.3484 22.3475 4.36269 22.3475 3.15057C22.3475 1.24183 21.1074 0.479258 18.9808 0.479258C17.8969 0.479258 16.9233 0.492758 16.1631 0.546373V9.54466H18.2436V6.02766H18.3241L20.4671 9.54466H22.9963L21.0941 6.65368ZM20.2135 3.32375C20.2135 4.08305 19.6508 4.54919 18.7663 4.54919C18.5653 4.54919 18.3509 4.53588 18.2436 4.52257V2.21828C18.3644 2.20497 18.6054 2.19147 18.8199 2.19147C19.7981 2.19147 20.2135 2.61789 20.2135 3.32375ZM2.13113 9.67619C4.42887 9.67619 5.82691 8.37939 5.82691 6.63112C5.82691 3.81748 2.22428 4.35093 2.22428 2.95076C2.22428 2.44412 2.63951 2.07055 3.50969 2.07055C4.04276 2.07055 4.71758 2.20478 5.22345 2.35135L5.22769 0.514937C4.66859 0.408478 4.06957 0.355249 3.59012 0.355249C1.3323 0.355249 -0.0377786 1.47268 0.000793485 3.16407C0.0688732 6.1507 3.60362 5.39102 3.60362 6.92446C3.60362 7.56456 3.05454 7.88471 2.2912 7.88471C1.63856 7.88471 0.875801 7.69088 0.369928 7.50419L0.277741 9.4758C0.85015 9.60946 1.50549 9.67619 2.13113 9.67619ZM28.9806 0V3.25317L30.7277 5.0001L28.9806 6.74702V10L33.9396 5.0001L28.9806 0Z"
+	/>
+	<path
+		d="M53.4917 9.784C52.7797 9.784 52.1197 9.636 51.5117 9.34C50.9117 9.036 50.4117 8.556 50.0117 7.9L51.4757 6.952C51.6997 7.328 51.9797 7.624 52.3157 7.84C52.6597 8.048 53.0397 8.152 53.4557 8.152C53.8637 8.152 54.1757 8.072 54.3917 7.912C54.6157 7.752 54.7277 7.528 54.7277 7.24C54.7277 7.016 54.6517 6.828 54.4997 6.676C54.3557 6.516 54.1677 6.388 53.9357 6.292C53.7117 6.188 53.4037 6.072 53.0117 5.944C52.4677 5.768 52.0237 5.596 51.6797 5.428C51.3357 5.252 51.0397 5.004 50.7917 4.684C50.5517 4.364 50.4317 3.948 50.4317 3.436C50.4317 2.956 50.5637 2.532 50.8277 2.164C51.0997 1.788 51.4677 1.5 51.9317 1.3C52.3957 1.1 52.9117 1 53.4797 1C54.2397 1 54.8837 1.148 55.4117 1.444C55.9397 1.74 56.3837 2.188 56.7437 2.788L55.1717 3.568C54.9877 3.256 54.7677 3.02 54.5117 2.86C54.2637 2.7 53.9357 2.62 53.5277 2.62C53.2077 2.62 52.9557 2.688 52.7717 2.824C52.5877 2.952 52.4957 3.132 52.4957 3.364C52.4957 3.612 52.6157 3.808 52.8557 3.952C53.0957 4.088 53.4837 4.244 54.0197 4.42C54.5957 4.62 55.0677 4.812 55.4357 4.996C55.8037 5.18 56.1237 5.448 56.3957 5.8C56.6677 6.152 56.8037 6.608 56.8037 7.168C56.8037 7.728 56.6557 8.204 56.3597 8.596C56.0637 8.988 55.6637 9.284 55.1597 9.484C54.6637 9.684 54.1077 9.784 53.4917 9.784Z"
+	/>
+	<path
+		d="M65.5138 9.592H63.3658L62.0818 4.072L60.8098 9.592H58.6138L57.0058 1.192H59.0818L59.8738 7.072L61.2298 1.192H62.9578L64.3018 7.012L65.1298 1.192H67.1098L65.5138 9.592Z"
+	/>
+	<path
+		d="M70.624 1.192C71.416 1.192 72.084 1.308 72.628 1.54C73.172 1.772 73.58 2.096 73.852 2.512C74.124 2.92 74.26 3.392 74.26 3.928C74.26 4.456 74.12 4.924 73.84 5.332C73.56 5.732 73.164 6.052 72.652 6.292L74.836 9.592H72.544L70.72 6.688H69.832V9.592H67.816V1.192H70.624ZM70.768 5.224C71.192 5.224 71.532 5.116 71.788 4.9C72.052 4.684 72.184 4.376 72.184 3.976C72.184 3.624 72.056 3.344 71.8 3.136C71.544 2.928 71.216 2.824 70.816 2.824H69.832V5.224H70.768Z"
+	/>
+	<path
+		d="M81.3567 1.192C82.1167 1.192 82.8407 1.336 83.5287 1.624C84.2247 1.904 84.7927 2.356 85.2327 2.98C85.6807 3.604 85.9047 4.388 85.9047 5.332C85.9047 6.332 85.6807 7.152 85.2327 7.792C84.7927 8.432 84.2327 8.892 83.5527 9.172C82.8727 9.452 82.1647 9.592 81.4287 9.592H78.6207V1.192H81.3567ZM81.4287 7.972C82.0927 7.972 82.6567 7.772 83.1207 7.372C83.5927 6.972 83.8287 6.292 83.8287 5.332C83.8287 4.548 83.6167 3.932 83.1927 3.484C82.7767 3.036 82.1847 2.812 81.4167 2.812H80.6367V7.972H81.4287Z"
+	/>
+	<path
+		d="M88.3338 9.784C87.9258 9.784 87.5698 9.708 87.2658 9.556C86.9618 9.404 86.7258 9.2 86.5578 8.944C86.3978 8.68 86.3178 8.392 86.3178 8.08C86.3178 7.656 86.4338 7.296 86.6658 7C86.9058 6.696 87.3138 6.44 87.8898 6.232C88.4658 6.024 89.2538 5.864 90.2538 5.752V5.524C90.2538 5.268 90.1738 5.072 90.0138 4.936C89.8538 4.792 89.6338 4.72 89.3538 4.72C88.8178 4.72 88.4338 4.992 88.2018 5.536L86.5698 4.96C86.8258 4.376 87.2018 3.944 87.6978 3.664C88.2018 3.376 88.7898 3.232 89.4618 3.232C90.2618 3.232 90.9138 3.452 91.4178 3.892C91.9218 4.324 92.1738 4.944 92.1738 5.752V9.592H90.3978V8.716C90.1898 9.084 89.8938 9.356 89.5098 9.532C89.1258 9.7 88.7338 9.784 88.3338 9.784ZM88.2618 7.78C88.2618 7.94 88.3178 8.072 88.4298 8.176C88.5498 8.272 88.7218 8.32 88.9458 8.32C89.3058 8.32 89.6138 8.212 89.8698 7.996C90.1258 7.772 90.2538 7.484 90.2538 7.132V6.82C89.5018 6.924 88.9818 7.052 88.6938 7.204C88.4058 7.348 88.2618 7.54 88.2618 7.78Z"
+	/>
+	<path
+		d="M95.524 9.784C94.876 9.784 94.384 9.592 94.048 9.208C93.712 8.824 93.544 8.32 93.544 7.696V4.768H92.8V3.424H93.544V2.548L95.464 1.612V3.424H96.616V4.768H95.464V7.648C95.464 8.04 95.624 8.236 95.944 8.236C96.112 8.236 96.268 8.192 96.412 8.104L96.952 9.376C96.544 9.648 96.068 9.784 95.524 9.784Z"
+	/>
+	<path
+		d="M99.0682 9.784C98.6602 9.784 98.3042 9.708 98.0002 9.556C97.6962 9.404 97.4602 9.2 97.2922 8.944C97.1322 8.68 97.0522 8.392 97.0522 8.08C97.0522 7.656 97.1682 7.296 97.4002 7C97.6402 6.696 98.0482 6.44 98.6242 6.232C99.2002 6.024 99.9882 5.864 100.988 5.752V5.524C100.988 5.268 100.908 5.072 100.748 4.936C100.588 4.792 100.368 4.72 100.088 4.72C99.5522 4.72 99.1682 4.992 98.9362 5.536L97.3042 4.96C97.5602 4.376 97.9362 3.944 98.4322 3.664C98.9362 3.376 99.5242 3.232 100.196 3.232C100.996 3.232 101.648 3.452 102.152 3.892C102.656 4.324 102.908 4.944 102.908 5.752V9.592H101.132V8.716C100.924 9.084 100.628 9.356 100.244 9.532C99.8602 9.7 99.4682 9.784 99.0682 9.784ZM98.9962 7.78C98.9962 7.94 99.0522 8.072 99.1642 8.176C99.2842 8.272 99.4562 8.32 99.6802 8.32C100.04 8.32 100.348 8.212 100.604 7.996C100.86 7.772 100.988 7.484 100.988 7.132V6.82C100.236 6.924 99.7162 7.052 99.4282 7.204C99.1402 7.348 98.9962 7.54 98.9962 7.78Z"
+	/>
+	<path d="M109.066 7.876H112.546V9.592H107.05V1.192H109.066V7.876Z" />
+	<path
+		d="M114.959 9.784C114.551 9.784 114.195 9.708 113.891 9.556C113.587 9.404 113.351 9.2 113.183 8.944C113.023 8.68 112.943 8.392 112.943 8.08C112.943 7.656 113.059 7.296 113.291 7C113.531 6.696 113.939 6.44 114.515 6.232C115.091 6.024 115.879 5.864 116.879 5.752V5.524C116.879 5.268 116.799 5.072 116.639 4.936C116.479 4.792 116.259 4.72 115.979 4.72C115.443 4.72 115.059 4.992 114.827 5.536L113.195 4.96C113.451 4.376 113.827 3.944 114.323 3.664C114.827 3.376 115.415 3.232 116.087 3.232C116.887 3.232 117.539 3.452 118.043 3.892C118.547 4.324 118.799 4.944 118.799 5.752V9.592H117.023V8.716C116.815 9.084 116.519 9.356 116.135 9.532C115.751 9.7 115.359 9.784 114.959 9.784ZM114.887 7.78C114.887 7.94 114.943 8.072 115.055 8.176C115.175 8.272 115.347 8.32 115.571 8.32C115.931 8.32 116.239 8.212 116.495 7.996C116.751 7.772 116.879 7.484 116.879 7.132V6.82C116.127 6.924 115.607 7.052 115.319 7.204C115.031 7.348 114.887 7.54 114.887 7.78Z"
+	/>
+	<path
+		d="M123.55 9.784C123.174 9.784 122.822 9.708 122.494 9.556C122.166 9.396 121.926 9.172 121.774 8.884V9.592H119.95V1.192H121.87V4.108C122.062 3.812 122.318 3.592 122.638 3.448C122.966 3.304 123.31 3.232 123.67 3.232C124.206 3.232 124.678 3.372 125.086 3.652C125.502 3.932 125.822 4.32 126.046 4.816C126.27 5.312 126.382 5.876 126.382 6.508C126.382 7.156 126.258 7.728 126.01 8.224C125.77 8.72 125.434 9.104 125.002 9.376C124.578 9.648 124.094 9.784 123.55 9.784ZM121.846 6.508C121.846 7.076 121.966 7.516 122.206 7.828C122.454 8.132 122.762 8.284 123.13 8.284C123.522 8.284 123.83 8.132 124.054 7.828C124.286 7.516 124.402 7.076 124.402 6.508C124.402 5.94 124.286 5.504 124.054 5.2C123.83 4.896 123.522 4.744 123.13 4.744C122.754 4.744 122.446 4.896 122.206 5.2C121.966 5.504 121.846 5.94 121.846 6.508Z"
+	/>
+</svg>
+
+<style>
+	svg {
+		display: block;
+		width: auto;
+		height: calc(var(--fs-small-2) * 0.9);
+	}
+	path {
+		fill: var(--violet-dark-5);
+	}
+</style>

package/src/Middot/Middot.svelte

@@ -0,0 +1,16 @@
+<i class="middot"></i>
+
+<style>
+	.middot {
+		background: currentColor;
+		width: 0.65em;
+		height: 0.65em;
+		display: inline-block;
+		border-radius: 1000px;
+		opacity: 0.65;
+		margin: 0 0.1em;
+		position: relative;
+		top: -0.05em;
+		opacity: 0.65;
+	}
+</style>

package/src/Middot/index.js

@@ -0,0 +1,2 @@
+import Middot from './Middot.svelte';
+export default Middot;

package/src/Select/index.js

@@ -1,2 +1,2 @@
-import Select from "./Select.svelte"
-export default Select
+import Select from './Select.svelte';
+export default Select;

package/src/index.js

@@ -4,4 +4,6 @@ export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
 export { default as Switcher } from './Switcher/Switcher.svelte';
 export { default as Input } from './Input/Input.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as Select } from './Select/Select.svelte'
+export { default as Select } from './Select/Select.svelte';
+export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
+export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';