@swr-data-lab/components 1.13.1 → 1.13.2

package/dist/HighlightCard/HighlightCard.stories.svelte

@@ -1,55 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import HighlightCard from './HighlightCard.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Display/Card/HighlightCard',
-    component: HighlightCard
-});
-</script>
-
-<Story name="Basic HighlightCard" asChild>
-	<DesignTokens>
-		<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."
-		/>
-	</DesignTokens>
-</Story>
-
-<Story name="Multiple HighlightCards" asChild>
-	<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>
-	.highlight-cards {
-		@media (min-width: 900px) {
-			margin: 0 -1rem;
-			display: flex;
-		}
-	}
-
-	:global(.highlight-cards > *) {
-		margin: 1rem 0;
-		@media (min-width: 900px) {
-			margin: 2rem 1rem;
-			flex: 1;
-		}
-	}
-</style>

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

@@ -1,19 +0,0 @@
-import HighlightCard from './HighlightCard.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 HighlightCard: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type HighlightCard = InstanceType<typeof HighlightCard>;
-export default HighlightCard;

package/dist/Logotype/Logotype.stories.svelte

@@ -1,14 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Logotype from './Logotype.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Chart/Logotype',
-    component: Logotype
-});
-</script>
-
-<Story name="Basic" asChild>
-	<DesignTokens>
-		<Logotype></Logotype>
-	</DesignTokens>
-</Story>

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

@@ -1,19 +0,0 @@
-import Logotype from './Logotype.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 Logotype: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Logotype = InstanceType<typeof Logotype>;
-export default Logotype;

package/dist/Middot/Middot.stories.svelte

@@ -1,14 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Middot from './Middot.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Chart/Middot',
-    component: Middot
-});
-</script>
-
-<Story name="Basic" asChild>
-	<DesignTokens>
-		<Middot></Middot>
-	</DesignTokens>
-</Story>

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

@@ -1,19 +0,0 @@
-import Middot from './Middot.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 Middot: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Middot = InstanceType<typeof Middot>;
-export default Middot;

package/dist/Note/Note.stories.svelte

@@ -1,23 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import Middot from '../Middot/Middot.svelte';
-
-	import Note from './Note.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Typography/Note',
-		component: Note
-	});
-</script>
-
-<Story name="Default" asChild>
-	<DesignTokens>
-		<Note>
-			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.
-		</Note>
-	</DesignTokens>
-</Story>

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

@@ -1,27 +0,0 @@
-export default Note;
-type Note = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Note: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Note from './Note.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/Select/Select.stories.svelte

@@ -1,202 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Select from './Select.svelte';
-import FormLabel from '../FormLabel/FormLabel.svelte';
-import StoryTemplate from './SelectStoriesTemplate.svelte';
-import jobsData from './mock_data/jobs.json';
-const { Story } = defineMeta({
-    title: 'Form/Select',
-    component: Select
-});
-</script>
-
-<script lang="ts">import { userEvent, within, expect } from 'storybook/test';
-import {} from './Select.types';
-let selectedItem = undefined;
-</script>
-
-<Story
-	name="Simple"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Select');
-
-		await step('Clicking an option selects that item', async () => {
-			await userEvent.click(select);
-			await userEvent.click(canvas.getByText('Cake'));
-			expect(selectedItem).toEqual({ value: 'cake', label: 'Cake' });
-		});
-
-		await step('Entering a complete label selects that item', async () => {
-			await userEvent.type(select, 'Chocolate{enter}');
-			expect(selectedItem).toEqual({ value: 'chocolate', label: 'Chocolate' });
-		});
-
-		await step('Entering a unique part of a label selects the matching item', async () => {
-			await userEvent.type(select, 'Ice{enter}');
-			expect(selectedItem).toEqual({ value: 'ice-cream', label: 'Ice Cream' });
-		});
-
-		await step('Tapping the clear button clears the input', async () => {
-			const clearButton = document.querySelector('.clear-select');
-			await userEvent.click(clearButton);
-			expect(selectedItem).toEqual(undefined);
-		});
-	}}
->
-	<StoryTemplate
-		bind:selectedItem
-		args={{
-			inputId: 'select',
-			clearable: true,
-			items: [
-				{ value: 'chocolate', label: 'Chocolate' },
-				{ value: 'cake', label: 'Cake' },
-				{ value: 'ice-cream', label: 'Ice Cream' }
-			]
-		}}
-	/>
-</Story>
-
-<Story name="Grouped" asChild>
-	<StoryTemplate
-		bind:selectedItem
-		args={{
-			items: [
-				{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
-				{ value: 'pizza', label: 'Pizza', group: 'Savory' },
-				{ value: 'cake', label: 'Cake', group: 'Sweet' },
-				{ value: 'chips', label: 'Chips', group: 'Savory' },
-				{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
-			]
-		}}
-	/>
-</Story>
-
-<Story
-	name="Grouped (group header selectable)"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Select');
-
-		await step('Clicking an option header selects that header item', async () => {
-			await userEvent.click(select);
-			await userEvent.click(canvas.getByText('Savory'));
-			expect(selectedItem).toEqual({
-				groupHeader: true,
-				id: 'Savory',
-				label: 'Savory',
-				selectable: true,
-				value: 'Savory'
-			});
-		});
-
-		await step('Entering a label text selects its group header', async () => {
-			await userEvent.type(select, 'Chocolate{enter}');
-			expect(selectedItem).toEqual({
-				groupHeader: true,
-				id: 'Sweet',
-				label: 'Sweet',
-				selectable: true,
-				value: 'Sweet'
-			});
-		});
-	}}
->
-	<StoryTemplate
-		bind:selectedItem
-		args={{
-			inputId: 'job-select',
-			placeholder: 'Ihr Beruf',
-			groupHeaderSelectable: true,
-			items: [
-				{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
-				{ value: 'pizza', label: 'Pizza', group: 'Savory' },
-				{ value: 'cake', label: 'Cake', group: 'Sweet' },
-				{ value: 'chips', label: 'Chips', group: 'Savory' },
-				{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
-			]
-		}}
-	/>
-</Story>
-
-<Story
-	name="Custom items"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Berufe');
-
-		await step('Render custom list item with the supplied data', async () => {
-			await userEvent.type(select, 'Journalismus');
-			expect(canvas.getByTestId('custom-item-title').innerText).toEqual('Journalismus');
-			expect(canvas.getByTestId('custom-item-addon').innerText).toContain('Redakteur/in');
-			await userEvent.type(select, '{enter}');
-			expect(selectedItem?.details.title).toEqual('Journalismus');
-		});
-
-		await step('Entering an item\'s "title" selects that item', async () => {
-			await userEvent.type(select, 'Tierpflege{enter}');
-			expect(selectedItem?.details.title).toEqual('Tierpflege');
-		});
-
-		await step('Entering an item\'s "addon" selects that item', async () => {
-			await userEvent.type(select, 'Zirkuskünstler{enter}');
-			expect(selectedItem?.details.title).toEqual('Schauspiel und Tanz');
-		});
-	}}
->
-	<StoryTemplate>
-		{#snippet demoComponent()}
-			<FormLabel htmlFor="job-select">Berufe</FormLabel>
-			<Select
-				bind:value={selectedItem}
-				inputId="job-select"
-				placeholder="z.B. Taxifahrer/in"
-				items={jobsData
-					.sort((a, b) => a.label.localeCompare(b.label))
-					.map((item) => ({
-						value: item.value,
-						label: `${item.label}: ${item.add_on}`, // used for filtering
-						details: {
-							title: item.label, // used for display
-							addon: item.add_on // used for display
-						}
-					}))}
-				groupHeaderSelectable={false}
-			>
-				<div slot="item" let:item class="custom-item">
-					<h4 class="custom-item-title" data-testid="custom-item-title">
-						{item.details.title}
-					</h4>
-					<p class="custom-item-addon" data-testid="custom-item-addon">{item.details.addon}</p>
-				</div>
-				<div slot="selection" let:selection class="selection">
-					{selection.details.title}
-				</div>
-			</Select>
-		{/snippet}
-	</StoryTemplate>
-</Story>
-
-<style>
-	.custom-item {
-		font-size: 0.9rem;
-		margin-top: 0.2rem;
-	}
-
-	.custom-item-title {
-		margin: 0 0 0 -0.8rem;
-		padding: 0;
-		line-height: 1.4;
-	}
-
-	.custom-item-addon {
-		margin: 0 0 0 -0.8rem;
-		padding: 0;
-		line-height: 1;
-		opacity: 0.6;
-		font-size: 0.8rem;
-	}
-</style>

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

@@ -1,19 +0,0 @@
-import Select from './Select.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 Select: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Select = InstanceType<typeof Select>;
-export default Select;

package/dist/Select/SelectStoriesTemplate.svelte

@@ -1,31 +0,0 @@
-<script>
-	import Select from './Select.svelte';
-	import FormLabel from '../FormLabel/FormLabel.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
-</script>
-
-<DesignTokens>
-	{#if demoComponent}
-		{@render demoComponent()}
-	{:else}
-		<FormLabel htmlFor={args.inputId}>Select</FormLabel>
-		<Select {...args} bind:value={selectedItem} />
-	{/if}
-</DesignTokens>
-
-{#if selectedItem}
-	<pre class="output">
-value = {JSON.stringify(selectedItem, null, ' ')}</pre>
-{/if}
-
-<style>
-	.output {
-		display: block;
-		margin-top: 1rem;
-		padding: 1rem;
-		background: #fcfaff;
-		color: rgb(18, 69, 139);
-	}
-</style>

package/dist/Select/SelectStoriesTemplate.svelte.d.ts

@@ -1,15 +0,0 @@
-export default SelectStoriesTemplate;
-type SelectStoriesTemplate = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const SelectStoriesTemplate: import("svelte").Component<{
-    args?: any;
-    selectedItem?: any;
-    demoComponent?: any;
-}, {}, "selectedItem">;
-type $$ComponentProps = {
-    args?: any;
-    selectedItem?: any;
-    demoComponent?: any;
-};

package/dist/Switcher/Switcher.stories.svelte

@@ -1,44 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Switcher from './Switcher.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { userEvent, within, expect } from 'storybook/test';
-
-	const { Story } = defineMeta({
-		title: 'Form/Switcher',
-		component: Switcher
-	});
-</script>
-
-<Story name="Two Options" asChild>
-	<DesignTokens>
-		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
-	</DesignTokens>
-</Story>
-
-<Story
-	name="Four Options"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		await step('Clicking selects the expected option', async () => {
-			const optionA = canvas.getByLabelText('Apples');
-			const optionB = canvas.getByLabelText('Bananas');
-			await userEvent.click(optionA);
-			expect(optionA).toBeChecked();
-			expect(optionB).not.toBeChecked();
-			await userEvent.click(optionB);
-			expect(optionB).toBeChecked();
-			expect(optionA).not.toBeChecked();
-		});
-	}}
->
-	<DesignTokens>
-		<Switcher
-			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
-			value="Oranges"
-			label="Label"
-			size="small"
-		/>
-	</DesignTokens>
-</Story>

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

@@ -1,27 +0,0 @@
-export default Switcher;
-type Switcher = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Switcher: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Switcher from './Switcher.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/maplibre/AttributionControl/AttributionControl.stories.svelte

@@ -1,27 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import AttributionControl from './AttributionControl.svelte';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import Map from '../Map/Map.svelte';
-import { SWRDataLabLight } from '../MapStyle';
-const { Story } = defineMeta({
-    title: 'Maplibre/Control/AttributionControl',
-    component: AttributionControl
-});
-</script>
-
-<Story asChild name="Default">
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 300px;
-	}
-</style>

package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import AttributionControl from './AttributionControl.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 AttributionControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AttributionControl = InstanceType<typeof AttributionControl>;
-export default AttributionControl;

package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte

@@ -1,74 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { within, expect } from 'storybook/test';
-import GeocoderControl from './GeocoderControl.svelte';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import Map from '../Map/Map.svelte';
-import { SWRDataLabLight } from '../MapStyle';
-const { Story } = defineMeta({
-    title: 'Maplibre/Control/GeocoderControl',
-    component: GeocoderControl
-});
-</script>
-
-<Story
-	asChild
-	name="Default"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-
-		await step('Geocoder control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
-			expect(el).toBeTruthy();
-		});
-		await step('Localised placeholder text renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder input');
-			expect(el).toHaveAttribute('placeholder', 'Suche');
-		});
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-<Story
-	asChild
-	name="Custom placeholder text"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-
-		await step('Geocoder control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
-			expect(el).toBeTruthy();
-		});
-		await step('Custom placeholder text renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder input');
-			expect(el).toHaveAttribute('placeholder', 'My placeholder text');
-		});
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<GeocoderControl
-					placeholder="My placeholder text"
-					languages="de"
-					service="maptiler"
-					key="V32kPHZjMa0Mkn6YvSzA"
-				/>
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 300px;
-	}
-</style>