@swr-data-lab/components 1.13.1 → 1.13.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "1.13.1",
+	"version": "1.13.3",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",
@@ -81,9 +81,7 @@
 		]
 	},
 	"files": [
-		"./dist",
-		"!./dist/**/*.test.*",
-		"!./dist/**/*.stories.*"
+		"dist/"
 	],
 	"sideEffects": [
 		"**/*.css"

package/dist/Autocomplete/Autocomplete.stories.svelte

@@ -1,61 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { userEvent, within, expect } from 'storybook/test';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import Autocomplete from './Autocomplete.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Deprecated/Autocomplete',
-		component: Autocomplete
-	});
-
-	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {
-		return {
-			value: el,
-			label: el,
-			details: {}
-		};
-	});
-</script>
-
-<Story
-	name="Basic"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const input = canvas.getByTestId('autocomplete-input');
-		await step('Select using the mouse', async () => {
-			await userEvent.click(input);
-			expect(input).toHaveFocus();
-			await userEvent.keyboard('ba');
-			const bananasOption = canvas.getByText('Bananas');
-			await userEvent.click(bananasOption);
-			expect(input).toHaveValue('Bananas');
-		});
-		await userEvent.clear(input);
-		await step('Select using the keyboard', async () => {
-			await userEvent.click(input);
-			expect(input).toHaveFocus();
-			await userEvent.keyboard('ap');
-			await userEvent.keyboard('{ArrowDown}');
-			await userEvent.keyboard('{Enter}');
-			expect(input).toHaveValue('Apples');
-		});
-		await userEvent.clear(input);
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Autocomplete label="" name="test" data={testData} query="" placeholder="Select a fruit"
-			></Autocomplete>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		background: var(--violet-dark-5);
-		padding: 5%;
-	}
-</style>

package/dist/Autocomplete/Autocomplete.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Autocomplete;
-type Autocomplete = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Autocomplete: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Autocomplete from './Autocomplete.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Button/Button.stories.svelte

@@ -1,19 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Button from './Button.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Form/Button',
-    component: Button
-});
-</script>
-
-<Story name="Basic" asChild>
-	<DesignTokens>
-		<Button label="This is a button label"></Button>
-	</DesignTokens>
-</Story>
-<Story name="Disabled" asChild>
-	<DesignTokens>
-		<Button disabled label="This button is disabled"></Button>
-	</DesignTokens>
-</Story>

package/dist/Button/Button.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Button from './Button.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;

package/dist/Caption/Caption.stories.svelte

@@ -1,24 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import Caption from './Caption.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Typography/Caption',
-		component: Caption
-	});
-</script>
-
-<Story name="Default" asChild>
-	<DesignTokens>
-		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
-	</DesignTokens>
-</Story>
-<Story name="Bold" asChild>
-	<DesignTokens>
-		<Caption weight="bold">
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
-		</Caption>
-	</DesignTokens>
-</Story>

package/dist/Caption/Caption.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Caption;
-type Caption = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Caption: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Caption from './Caption.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Card/Card.stories.svelte

@@ -1,17 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Card from './Card.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Display/Card/Base',
-    component: Card
-});
-</script>
-
-<Story name="Basic card" asChild>
-	<DesignTokens>
-		<Card>
-			<h1>Any content</h1>
-			<p>can be added to a basic <code>Card</code> component.</p>
-		</Card>
-	</DesignTokens>
-</Story>

package/dist/Card/Card.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Card from './Card.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Card: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Card = InstanceType<typeof Card>;
-export default Card;

package/dist/ChartFooter/ChartFooter.mdx

@@ -1,17 +0,0 @@
-import { Story,  Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
- 
-import * as ChartFooterStories from './ChartFooter.stories.svelte';
-
-<Meta of={ChartFooterStories}/>
-
-# Chart Footer
-
-Standard chart footer.
-
-- Nest arbitrary HTML inside component to render your notes
-- Use `one-up` layout unless your footnotes fit two lines or fewer.
-- Use `<Middot/>` to separate sentences
-
-<Controls  />
-
-<Stories/>

package/dist/ChartFooter/ChartFooter.stories.svelte

@@ -1,32 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import ChartFooter from './ChartFooter.svelte';
-	import Middot from '../Middot/Middot.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Chart/ChartFooter',
-		component: ChartFooter
-	});
-</script>
-
-<Story name="One-up" asChild>
-	<DesignTokens>
-		<ChartFooter layout="one-up">
-			Daten: <a href="#1">Zensus 2022</a>
-			(Durchschnittsmieten und Einwohnerzahlen),
-			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
-			auf bewohnte Gebiete begrenzt.
-		</ChartFooter>
-	</DesignTokens>
-</Story>
-
-<Story name="Two-up" asChild>
-	<DesignTokens>
-		<ChartFooter layout="two-up">
-			Daten: <a href="#1">Zensus 2022</a>
-			(Durchschnittsmieten und Einwohnerzahlen)
-		</ChartFooter>
-	</DesignTokens>
-</Story>

package/dist/ChartFooter/ChartFooter.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default ChartFooter;
-type ChartFooter = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ChartFooter: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ChartFooter from './ChartFooter.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/ChartHeader/ChartHeader.mdx

@@ -1,16 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
- 
-import * as ChartHeaderStories from './ChartHeader.stories.svelte';
-
-<Meta of={ChartHeaderStories}/>
-
-# Chart header
-
-Standard chart header.
-
-- The slugified `title` is set as the header element's `id` attribute (useful for linking to interactives from in-article table of contents)
-- Any nested HTML will render under the description (useful for i.e colour keys and interactives controls).
-
-<Controls  />
-
-<Stories/>

package/dist/ChartHeader/ChartHeader.stories.svelte

@@ -1,31 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { expect } from 'storybook/test';
-	import ChartHeader from './ChartHeader.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Chart/ChartHeader',
-		component: ChartHeader
-	});
-</script>
-
-<Story
-	name="Default"
-	asChild
-	play={async ({ step }) => {
-		await step('Container has ID attribute derived from title prop', async () => {
-			const containerEl = document.querySelector('#mehr-uber-60-jahrige-in-allen-berufen');
-			expect(containerEl).toBeTruthy();
-		});
-	}}
->
-	<DesignTokens>
-		<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)"
-		>
-			Arbitrary HTML content can go here
-		</ChartHeader>
-	</DesignTokens>
-</Story>

package/dist/ChartHeader/ChartHeader.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default ChartHeader;
-type ChartHeader = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ChartHeader: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ChartHeader from './ChartHeader.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/ChartList/ChartList.mdx

@@ -1,13 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-
-import * as ChartListStories from './ChartList.stories.svelte';
-
-<Meta of={ChartListStories} />
-
-# Chart List
-
-Utility component for displaying a list of charts with associated embed URLs during development (typically on the `/` route of your Svelte project).
-
-<Stories />
-
-<Controls />

package/dist/ChartList/ChartList.stories.svelte

@@ -1,48 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect } from 'storybook/test';
-
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import ChartList from './ChartList.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Meta/ChartList',
-		component: ChartList
-	});
-
-	const testCharts = [
-		{ title: 'Baden-Württemberg Loosers', slug: 'bw-loosers' },
-		{ title: 'Baden-Württemberg Winners', slug: 'bw-winners' },
-		{ title: 'Rheinland-Pfalz Loosers', slug: 'rp-loosers' },
-		{ title: 'Rheinland-Pfalz Winners', slug: 'rp-winners' }
-	];
-</script>
-
-<Story
-	name="Default"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-
-		await step('Project title renders', async () => {
-			const titleEl = canvas.getByTestId('chartlist-project-title');
-			expect(titleEl).toHaveTextContent('Grafiken für p110: Wie sieht der Wald von morgen aus?');
-		});
-
-		await step('All chart list items render', async () => {
-			testCharts.forEach((c) => {
-				const el = canvas.getByText(c.title);
-				expect(el).toBeTruthy();
-			});
-		});
-	}}
->
-	<DesignTokens>
-		<ChartList
-			baseUrl="https://static.datenhub.net/apps/p110_wald-klimawandel/main"
-			charts={testCharts}
-			project="p110: Wie sieht der Wald von morgen aus?"
-		/>
-	</DesignTokens>
-</Story>

package/dist/ChartList/ChartList.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default ChartList;
-type ChartList = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ChartList: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ChartList from './ChartList.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Copy/Copy.stories.svelte

@@ -1,32 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import Copy from './Copy.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Typography/Copy',
-		component: Copy
-	});
-</script>
-
-<Story name="Default" asChild>
-	<DesignTokens>
-		<Copy>
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
-			größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die Pollensaison
-			hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die Pollensaison wird
-			länger, die Grippesaison wird länger und dadurch überlappt sich das Ganze."
-		</Copy>
-	</DesignTokens>
-</Story>
-<Story name="Bold" asChild>
-	<DesignTokens>
-		<Copy weight="bold">
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
-			größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die Pollensaison
-			hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die Pollensaison wird
-			länger, die Grippesaison wird länger und dadurch überlappt sich das Ganze."
-		</Copy>
-	</DesignTokens>
-</Story>

package/dist/Copy/Copy.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Copy;
-type Copy = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Copy: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Copy from './Copy.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/DesignTokens/DesignTokens.mdx

@@ -1,110 +0,0 @@
-import { Title, Story, ColorPalette, ColorItem, Meta, Typeset, Canvas } from '@storybook/addon-docs/blocks';
-import { shades, scales, typography } from "./Tokens"
-
-import * as HeadlineStories from "../Headline/Headline.stories.svelte"
-import * as CopyStories from "../Copy/Copy.stories.svelte"
-import * as CaptionStories from "../Caption/Caption.stories.svelte"
-import * as NoteStories from "../Note/Note.stories.svelte"
-
-<Meta title='Design Tokens'/>
-
-# Design Tokens
-
-## Table of Contents
- 
-- [Usage](#usage)
-  - [Web](#web)
-  - [Figma](#figma) 
-- [Typography](#typography)
-  - [Sizes](#sizes)
-  - [Styles](#styles)
-- [Colours](#colours)
-	- [Shades](#shades)
-	- [Linear scales](#linear-scales)
-	- [Categorical Scales](#categorical-scales)
-	- [Divergent Scales](#divergent-scales)
-
-## Usage
-
-### Web
-
-The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables.
-
-```html
-<script>
-  import DesignTokens from "@swr-data-lab/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 `tokens` directly to use them in Javascript:
-
-```jsx
-import tokens from "@swr-data-lab/components"
-import { scaleThreshold } from 'd3-scale';
-const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
-```
-
-### Figma
-
-The tokens on this page are available as a [Figma library](https://www.figma.com/design/Wrd7uUV3GxpNXXkM5ozuHk/Datalab-Design-Tokens?node-id=0-1&t=iOqDxhuMdvEyY8VK-1). This is enabled by default for any file in the [SWR Data Lab team](https://www.figma.com/files/1125823985461580916/team/1415988138343592768). 
-
-
-## Typography
-
-Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly.
-
-### Styles
-#### H2
-<Canvas of={HeadlineStories.Default}/>
-
-#### Copy
-<Canvas of={CopyStories.Default}/>
-
-#### Caption
-<Canvas of={CaptionStories.Default}/>
-
-#### Note
-<Canvas of={NoteStories.Default}/>
-
-### Sizes
-<Typeset fontWeight={600} fontFamily='SWR-VAR-Text' sampleText='Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten' fontSizes={Object.entries(typography.wide.sizes).map(([key, size]) => {
-	return size
-}).reverse()}/>
-
-
-## Colours
-### Shades
-<ColorPalette>
-{["violet", "plum", "pink", "red", "orange", "yellow", "apple" , "forest","teal",    "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, _) => {
-	return(<ColorItem	
-			title={`${el.split("_").map(c => {return c[0].toUpperCase() + c.slice(1)}).join("/")}`}
-			subtitle={el}
-			colors={scales[el]}
-		/>) 
-})}
-</ColorPalette>