From 8767c175eaa62604aa7cff7f6beedc5232d24a6a Mon Sep 17 00:00:00 2001
From: hobbes7878 <jon.r.mcclure@gmail.com>
Date: Tue, 19 Nov 2024 18:48:51 +0000
Subject: [PATCH] updates meta exports for all component stories

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                |  2 +-
 src/components/AdSlot/InlineAd.stories.svelte | 18 +++---
 .../AdSlot/LeaderboardAd.stories.svelte       | 18 +++---
 .../AdSlot/SponsorshipAd.stories.svelte       | 19 +++---
 .../Analytics/Analytics.stories.svelte        | 21 +++----
 src/components/Article/Article.stories.svelte | 26 ++++----
 .../BeforeAfter/BeforeAfter.stories.svelte    | 30 +++++-----
 src/components/Block/Block.stories.svelte     | 19 +++---
 .../BodyText/BodyText.stories.svelte          | 21 +++----
 src/components/Byline/Byline.stories.svelte   | 18 +++---
 .../DatawrapperChart.stories.svelte           | 19 +++---
 .../DocumentCloud.stories.svelte              | 21 +++----
 .../EmbedPreviewerLink.stories.svelte         | 21 +++----
 .../EndNotes/EndNotes.stories.svelte          | 24 ++++----
 .../FeaturePhoto/FeaturePhoto.stories.svelte  | 22 ++++---
 src/components/Framer/Framer.stories.svelte   | 18 +++---
 .../GraphicBlock/GraphicBlock.stories.svelte  | 26 ++++----
 .../Headline/Headline.stories.svelte          | 21 +++----
 .../HeroHeadline/Hero.stories.svelte          | 44 +++++++-------
 src/components/InfoBox/InfoBox.stories.svelte | 16 +++--
 .../Markdown/Markdown.stories.svelte          | 18 +++---
 .../PaddingReset/PaddingReset.stories.svelte  | 20 ++++---
 .../PhotoCarousel.stories.svelte              | 24 ++++----
 .../PhotoPack/PhotoPack.stories.svelte        | 17 +++---
 .../PymChild/PymChild.stories.svelte          | 18 +++---
 .../ReferralBlock.stories.svelte              | 16 +++--
 .../ReutersGraphicsLogo.stories.svelte        | 20 ++++---
 .../ReutersLogo/ReutersLogo.stories.svelte    | 12 ++--
 src/components/SEO/SEO.stories.svelte         | 18 +++---
 .../Scroller/Scroller.stories.svelte          | 60 ++++++++++---------
 .../SearchInput/SearchInput.stories.svelte    | 20 ++++---
 .../SimpleTimeline.stories.svelte             | 20 +++----
 .../SiteFooter/SiteFooter.stories.svelte      | 21 ++++---
 .../SiteHeader/SiteHeader.stories.svelte      | 15 +++--
 src/components/Spinner/Spinner.stories.svelte | 12 ++--
 src/components/Table/Table.stories.svelte     | 21 +++----
 src/components/Theme/Theme.stories.svelte     | 22 +++----
 .../ToolsHeader/ToolsHeader.stories.svelte    | 20 ++++---
 src/components/Video/Video.stories.svelte     | 28 +++++----
 src/components/Visible/Visible.stories.svelte | 18 +++---
 41 files changed, 436 insertions(+), 410 deletions(-)

diff --git a/package.json b/package.json
index 5b0bcc5e..2bff3519 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@storybook/addon-mdx-gfm": "^8.2.9",
     "@storybook/addon-measure": "^8.4.4",
     "@storybook/addon-outline": "^8.4.4",
-    "@storybook/addon-svelte-csf": "^4.1.5",
+    "@storybook/addon-svelte-csf": "^4.1.7",
     "@storybook/addon-toolbars": "^8.4.4",
     "@storybook/addon-viewport": "^8.4.4",
     "@storybook/blocks": "^8.2.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b85a6db2..6d7c0f19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,7 +94,7 @@ importers:
         specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/addon-svelte-csf':
-        specifier: ^4.1.5
+        specifier: ^4.1.7
         version: 4.1.7(@storybook/svelte@8.4.4(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19))(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(storybook@8.4.4(prettier@3.3.3))(svelte-loader@3.2.4(svelte@4.2.19))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
       '@storybook/addon-toolbars':
         specifier: ^8.4.4
diff --git a/src/components/AdSlot/InlineAd.stories.svelte b/src/components/AdSlot/InlineAd.stories.svelte
index 84c8edf4..fd354d3e 100644
--- a/src/components/AdSlot/InlineAd.stories.svelte
+++ b/src/components/AdSlot/InlineAd.stories.svelte
@@ -1,20 +1,20 @@
-<script lang="ts">
-  import { Template, Story, Meta } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import InlineAd from './InlineAd.svelte';
   // @ts-ignore raw
   import adDocs from './stories/docs/inline.md?raw';
-
-  import AdScripts from './AdScripts.svelte';
-  import InlineAd from './InlineAd.svelte';
-
   import { withComponentDocs } from './../../docs/utils/withParams';
 
-  const meta = {
+  export const meta = {
+    title: 'Components/InlineAd',
+    component: InlineAd,
     ...withComponentDocs(adDocs),
   };
 </script>
 
-<Meta title="Components/InlineAd" component="{InlineAd}" {...meta} />
+<script lang="ts">
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import AdScripts from './AdScripts.svelte';
+</script>
 
 <Template>
   <div>
diff --git a/src/components/AdSlot/LeaderboardAd.stories.svelte b/src/components/AdSlot/LeaderboardAd.stories.svelte
index f76fac3d..8c364468 100644
--- a/src/components/AdSlot/LeaderboardAd.stories.svelte
+++ b/src/components/AdSlot/LeaderboardAd.stories.svelte
@@ -1,20 +1,20 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import LeaderboardAd from './LeaderboardAd.svelte';
   // @ts-ignore raw
   import adDocs from './stories/docs/leaderboard.md?raw';
-
-  import AdScripts from './AdScripts.svelte';
-  import LeaderboardAd from './LeaderboardAd.svelte';
-
   import { withComponentDocs } from './../../docs/utils/withParams';
 
-  const meta = {
+  export const meta = {
+    title: 'Components/LeaderboardAd',
+    component: LeaderboardAd,
     ...withComponentDocs(adDocs),
   };
 </script>
 
-<Meta title="Components/LeaderboardAd" component="{LeaderboardAd}" {...meta} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import AdScripts from './AdScripts.svelte';
+</script>
 
 <Template>
   <div>
diff --git a/src/components/AdSlot/SponsorshipAd.stories.svelte b/src/components/AdSlot/SponsorshipAd.stories.svelte
index b0e68c4f..b910fe01 100644
--- a/src/components/AdSlot/SponsorshipAd.stories.svelte
+++ b/src/components/AdSlot/SponsorshipAd.stories.svelte
@@ -1,20 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import SponsorshipAd from './SponsorshipAd.svelte';
   // @ts-ignore raw
   import adDocs from './stories/docs/sponsorship.md?raw';
-
-  import AdScripts from './AdScripts.svelte';
-  import SponsorshipAd from './SponsorshipAd.svelte';
-
   import { withComponentDocs } from './../../docs/utils/withParams';
 
-  const meta = {
+  export const meta = {
+    title: 'Components/SponsorshipAd',
+    component: SponsorshipAd,
     ...withComponentDocs(adDocs),
   };
 </script>
 
-<Meta title="Components/SponsorshipAd" component="{SponsorshipAd}" {...meta} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import AdScripts from './AdScripts.svelte';
+</script>
 
 <Template>
   <div>
diff --git a/src/components/Analytics/Analytics.stories.svelte b/src/components/Analytics/Analytics.stories.svelte
index 56af608c..01e48e86 100644
--- a/src/components/Analytics/Analytics.stories.svelte
+++ b/src/components/Analytics/Analytics.stories.svelte
@@ -1,6 +1,5 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import Analytics from './Analytics.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -8,16 +7,18 @@
   // @ts-ignore raw
   import multipageDocs from './stories/docs/multipage.md?raw';
 
-  import Analytics from './Analytics.svelte';
-
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/Analytics',
+    component: Analytics,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/Analytics"
-  component="{Analytics}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Analytics {...args} />
diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index 2e94caca..d4e450e4 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -1,25 +1,23 @@
-<script lang="ts">
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import Article from './Article.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
   import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';
 
-  import Article from './Article.svelte';
-  import Block from '../Block/Block.svelte';
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../docs/utils/withParams.js';
+  export const meta = {
+    title: 'Components/Article',
+    component: Article,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Layout/Article"
-  component="{Article}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script lang="ts">
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import Block from '../Block/Block.svelte';
+</script>
 
 <Template let:args>
   <Article {...args} />
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 151d9dc7..f46bd57c 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -1,6 +1,5 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import BeforeAfter from './BeforeAfter.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -8,19 +7,11 @@
   // @ts-ignore raw
   import ariaDescriptionsDocs from './stories/docs/ariaDescriptions.md?raw';
 
-  import BeforeAfter from './BeforeAfter.svelte';
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  // @ts-ignore raw
-  import beforeImg from './stories/myrne-before.jpg';
-  // @ts-ignore raw
-  import afterImg from './stories/myrne-after.jpg';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/BeforeAfter',
+    component: BeforeAfter,
     ...withComponentDocs(componentDocs),
     argTypes: {
       handleColour: { control: 'color' },
@@ -32,7 +23,14 @@
   };
 </script>
 
-<Meta title="Components/BeforeAfter" component="{BeforeAfter}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import beforeImg from './stories/myrne-before.jpg';
+  // @ts-ignore raw
+  import afterImg from './stories/myrne-after.jpg';
+</script>
 
 <Template let:args>
   <BeforeAfter {...args} />
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index 831ffb68..6eb19817 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -9,14 +7,12 @@
   import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
 
   import Block from './Block.svelte';
-  import Article from '../Article/Article.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../docs/utils/withParams.js';
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Block',
+    component: Block,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -35,7 +31,10 @@
   };
 </script>
 
-<Meta title="Layout/Block" component="{Block}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import Article from '../Article/Article.svelte';
+</script>
 
 <Template let:args>
   <Article id="block-demo-article">
diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 95fdbe2f..7e804a80 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -1,19 +1,20 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import BodyText from './BodyText.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
-  import BodyText from './BodyText.svelte';
+  import { withComponentDocs } from '$docs/utils/withParams.js';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+  export const meta = {
+    title: 'Components/BodyText',
+    component: BodyText,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/BodyText"
-  component="{BodyText}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <BodyText {...args} />
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index e8d3e556..572c816b 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -1,16 +1,14 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import Byline from './Byline.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
-  import Byline from './Byline.svelte';
+  import { withComponentDocs } from '$docs/utils/withParams.js';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Byline',
+    component: Byline,
     ...withComponentDocs(componentDocs),
-    // https://storybook.js.org/docs/svelte/essentials/controls
     argTypes: {
       align: {
         control: 'select',
@@ -20,7 +18,9 @@
   };
 </script>
 
-<Meta title="Components/Byline" component="{Byline}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Byline {...args} />
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index 9b282d05..6c706591 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -1,19 +1,18 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import DatawrapperChart from './DatawrapperChart.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
   import withChatterDocs from './stories/docs/withChatter.md?raw';
 
-  import DatawrapperChart from './DatawrapperChart.svelte';
-
   import {
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/DatawrapperChart',
+    component: DatawrapperChart,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -24,11 +23,9 @@
   };
 </script>
 
-<Meta
-  title="Components/DatawrapperChart"
-  component="{DatawrapperChart}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <DatawrapperChart {...args} />
diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 02290d2a..99a8bc62 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -1,14 +1,13 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import DocumentCloud from './DocumentCloud.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
-  import DocumentCloud from './DocumentCloud.svelte';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/DocumentCloud',
+    component: DocumentCloud,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -19,11 +18,9 @@
   };
 </script>
 
-<Meta
-  title="Components/DocumentCloud"
-  component="{DocumentCloud}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <DocumentCloud {...args} />
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
index 01a50112..5451b667 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@@ -1,19 +1,20 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
-  import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
-
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/EmbedPreviewerLink',
+    component: EmbedPreviewerLink,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/EmbedPreviewerLink"
-  component="{EmbedPreviewerLink}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <EmbedPreviewerLink {...args} />
diff --git a/src/components/EndNotes/EndNotes.stories.svelte b/src/components/EndNotes/EndNotes.stories.svelte
index f0f70c51..d732cd0e 100644
--- a/src/components/EndNotes/EndNotes.stories.svelte
+++ b/src/components/EndNotes/EndNotes.stories.svelte
@@ -1,13 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import EndNotes from './EndNotes.svelte';
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
-  import EndNotes from './EndNotes.svelte';
-  import { getEndNotesPropsFromDoc } from './docProps';
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
+  export const meta = {
+    title: 'Components/EndNotes',
+    component: EndNotes,
+    ...withComponentDocs(componentDocs),
+  };
+</script>
+
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import { getEndNotesPropsFromDoc } from './docProps';
+
   const notes = [
     {
       Title: 'Note',
@@ -24,12 +32,6 @@
   ];
 </script>
 
-<Meta
-  title="Components/EndNotes"
-  component="{EndNotes}"
-  {...withComponentDocs(componentDocs)}
-/>
-
 <Template let:args>
   <EndNotes {...args} />
 </Template>
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
index 0a1075d1..4631213b 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -10,15 +8,14 @@
 
   import FeaturePhoto from './FeaturePhoto.svelte';
 
-  // @ts-ignore jpg
-  import sharkSrc from './stories/shark.jpg';
-
   import {
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/FeaturePhoto',
+    component: FeaturePhoto,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -33,11 +30,12 @@
   };
 </script>
 
-<Meta
-  title="Components/FeaturePhoto"
-  component="{FeaturePhoto}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore jpg
+  import sharkSrc from './stories/shark.jpg';
+</script>
 
 <Template let:args>
   <FeaturePhoto {...args} />
diff --git a/src/components/Framer/Framer.stories.svelte b/src/components/Framer/Framer.stories.svelte
index 1b1a8f4d..c5ffa81d 100644
--- a/src/components/Framer/Framer.stories.svelte
+++ b/src/components/Framer/Framer.stories.svelte
@@ -1,19 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import Framer from './Framer.svelte';
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/Framer',
+    component: Framer,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/Framer"
-  component="{Framer}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Framer {...args} />
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index cb9581dc..8a0c9ee0 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -14,14 +12,11 @@
 
   import GraphicBlock from './GraphicBlock.svelte';
 
-  import AiMap from './stories/ai2svelte/ai-chart.svelte';
-
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  // @ts-ignore img
-  import PlaceholderImg from './stories/placeholder.png';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/GraphicBlock',
+    component: GraphicBlock,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -36,11 +31,14 @@
   };
 </script>
 
-<Meta
-  title="Components/GraphicBlock"
-  component="{GraphicBlock}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import AiMap from './stories/ai2svelte/ai-chart.svelte';
+
+  // @ts-ignore img
+  import PlaceholderImg from './stories/placeholder.png';
+</script>
 
 <Template let:args>
   <GraphicBlock {...args}>
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 221b5db8..9deea37c 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -14,10 +12,6 @@
   // @ts-ignore raw
   import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
 
-  // @ts-ignore img
-  import crownImgSrc from './stories/crown.png';
-  import Map from './stories/graphic.svelte';
-
   import Headline from './Headline.svelte';
 
   import {
@@ -25,9 +19,10 @@
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Headline',
+    component: Headline,
     ...withComponentDocs(componentDocs),
-    // https://storybook.js.org/docs/svelte/essentials/controls
     argTypes: {
       hedSize: {
         control: 'select',
@@ -41,7 +36,13 @@
   };
 </script>
 
-<Meta title="Components/Headline" component="{Headline}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore img
+  import crownImgSrc from './stories/crown.png';
+  import Map from './stories/graphic.svelte';
+</script>
 
 <Template let:args>
   <Headline {...args} />
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
index 7076dbcd..44a0c31f 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -16,29 +14,17 @@
   // @ts-ignore raw
   import customHedDocs from './stories/docs/customHed.md?raw';
 
-  // @ts-ignore img
-  import polarImgSrc from './stories/polar.jpg';
-  // @ts-ignore img
-  import eurovisImgSrc from './stories/eurovis.jpeg';
-
-  import Block from '../Block/Block.svelte';
-  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
   import HeroHeadline from './Hero.svelte';
-  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
-  import Video from '../Video/Video.svelte';
-
-  import CrashMap from './stories/graphics/crash.svelte';
-  import QuakeMap from './stories/graphics/quakemap.svelte';
 
   import {
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/HeroHeadline',
+    component: HeroHeadline,
     ...withComponentDocs(componentDocs),
-    // https://storybook.js.org/docs/svelte/essentials/controls
     argTypes: {
       hedSize: {
         control: 'select',
@@ -60,11 +46,23 @@
   };
 </script>
 
-<Meta
-  title="Components/HeroHeadline"
-  component="{HeroHeadline}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore img
+  import polarImgSrc from './stories/polar.jpg';
+  // @ts-ignore img
+  import eurovisImgSrc from './stories/eurovis.jpeg';
+
+  import Block from '../Block/Block.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
+  import Video from '../Video/Video.svelte';
+
+  import CrashMap from './stories/graphics/crash.svelte';
+  import QuakeMap from './stories/graphics/quakemap.svelte';
+</script>
 
 <Template let:args>
   <Block width="fluid" class="chromatic-ignore">
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index 1e263990..0c31a1b3 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import InfoBox from './InfoBox.svelte';
-  import BodyText from '../BodyText/BodyText.svelte';
+
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/InfoBox',
+    component: InfoBox,
     ...withComponentDocs(componentDocs),
     argTypes: {
       theme: {
@@ -23,7 +23,11 @@
   };
 </script>
 
-<Meta title="Components/InfoBox" component="{InfoBox}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import BodyText from '../BodyText/BodyText.svelte';
+</script>
 
 <Template let:args>
   <InfoBox {...args} />
diff --git a/src/components/Markdown/Markdown.stories.svelte b/src/components/Markdown/Markdown.stories.svelte
index 0fc36ec4..9e122a15 100644
--- a/src/components/Markdown/Markdown.stories.svelte
+++ b/src/components/Markdown/Markdown.stories.svelte
@@ -1,21 +1,23 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import Markdown from './Markdown.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
-  import Block from '../Block/Block.svelte';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Markdown',
+    component: Markdown,
     ...withComponentDocs(componentDocs),
   };
 </script>
 
-<Meta title="Components/Markdown" component="{Markdown}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import Block from '../Block/Block.svelte';
+</script>
 
 <Template let:args>
   <Block>
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index a6e0ea4d..7dab9c1a 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -1,20 +1,22 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import PaddingReset from './PaddingReset.svelte';
-  import Block from '../Block/Block.svelte';
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/PaddingReset',
+    component: PaddingReset,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/PaddingReset"
-  component="{PaddingReset}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import Block from '../Block/Block.svelte';
+</script>
 
 <Template let:args>
   <Block width="fluid">
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index aa43c40c..d562220a 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -10,11 +8,9 @@
 
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  import photosJson from './stories/photos.json';
-
-  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/PhotoCarousel',
+    component: PhotoCarousel,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -25,11 +21,13 @@
   };
 </script>
 
-<Meta
-  title="Components/PhotoCarousel"
-  component="{PhotoCarousel}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import photosJson from './stories/photos.json';
+
+  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
+</script>
 
 <Template let:args>
   <PhotoCarousel {...args} />
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 59a35c9b..a2fe0ead 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -9,11 +7,12 @@
   import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
 
   import PhotoPack from './PhotoPack.svelte';
-  import { getPhotoPackPropsFromDoc } from './docProps';
 
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/PhotoPack',
+    component: PhotoPack,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -26,6 +25,12 @@
       },
     },
   };
+</script>
+
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import { getPhotoPackPropsFromDoc } from './docProps';
 
   const defaultImages = [
     {
@@ -119,8 +124,6 @@
   const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
 </script>
 
-<Meta title="Components/PhotoPack" component="{PhotoPack}" {...metaProps} />
-
 <Template let:args>
   <PhotoPack {...args} />
 </Template>
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
index 1d36b78d..b6559e00 100644
--- a/src/components/PymChild/PymChild.stories.svelte
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -1,19 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import PymChild from './PymChild.svelte';
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/PymChild',
+    component: PymChild,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/PymChild"
-  component="{PymChild}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <PymChild {...args} />
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
index 52134767..7cb743a8 100644
--- a/src/components/ReferralBlock/ReferralBlock.stories.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -10,7 +8,9 @@
 
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/ReferralBlock',
+    component: ReferralBlock,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -37,11 +37,9 @@
   };
 </script>
 
-<Meta
-  title="Components/ReferralBlock"
-  component="{ReferralBlock}"
-  {...metaProps}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <ReferralBlock {...args} />
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
index 73b033de..a7bac605 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
@@ -1,19 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/ReutersGraphicsLogo',
+    component: ReutersGraphicsLogo,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/ReutersGraphicsLogo"
-  component="{ReutersGraphicsLogo}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <ReutersGraphicsLogo {...args} />
diff --git a/src/components/ReutersLogo/ReutersLogo.stories.svelte b/src/components/ReutersLogo/ReutersLogo.stories.svelte
index bee1c8aa..368a5af3 100644
--- a/src/components/ReutersLogo/ReutersLogo.stories.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
@@ -8,7 +6,9 @@
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/ReutersLogo',
+    component: ReutersLogo,
     ...withComponentDocs(componentDocs),
     argTypes: {
       logoColour: { control: 'color' },
@@ -17,7 +17,9 @@
   };
 </script>
 
-<Meta title="Components/ReutersLogo" component="{ReutersLogo}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <ReutersLogo {...args} />
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index 7fa6ed2f..23008b5e 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -12,13 +10,17 @@
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/SEO',
+    component: SEO,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/SEO"
-  component="{SEO}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <SEO {...args} />
diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index 21677a67..90f0cd3c 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -12,17 +10,42 @@
 
   import Scroller from './Scroller.svelte';
 
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/Scroller',
+    component: Scroller,
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      steps: { control: false },
+      backgroundWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      foregroundPosition: {
+        control: 'select',
+        options: ['middle', 'left', 'right', 'left opposite', 'right opposite'],
+      },
+      embeddedLayout: {
+        control: 'select',
+        options: ['fb', 'bf'],
+      },
+    },
+  };
+</script>
+
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
   import BasicStep from './stories/components/basic/Step.svelte';
   import InteractiveForeground from './stories/components/basic/InteractiveForeground.svelte';
   import AiMap1 from './stories/components/ai2svelte/ai-scroller-1.svelte';
   import AiMap2 from './stories/components/ai2svelte/ai-scroller-2.svelte';
   import AiMap3 from './stories/components/ai2svelte/ai-scroller-3.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
   import { getScrollerPropsFromDoc } from './docProps';
 
   const aiCharts = {
@@ -56,29 +79,8 @@
       },
     ],
   };
-
-  const metaProps = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      steps: { control: false },
-      backgroundWidth: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-      foregroundPosition: {
-        control: 'select',
-        options: ['middle', 'left', 'right', 'left opposite', 'right opposite'],
-      },
-      embeddedLayout: {
-        control: 'select',
-        options: ['fb', 'bf'],
-      },
-    },
-  };
 </script>
 
-<Meta title="Components/Scroller" component="{Scroller}" {...metaProps} />
-
 <Template let:args>
   <Scroller {...args} />
 </Template>
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
index fe8460c0..945e37f5 100644
--- a/src/components/SearchInput/SearchInput.stories.svelte
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -1,19 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import SearchInput from './SearchInput.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/SearchInput',
+    component: SearchInput,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/SearchInput"
-  component="{SearchInput}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <SearchInput {...args} />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
index c3773a73..037e7463 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -1,20 +1,24 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import SimpleTimeline from './SimpleTimeline.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/SimpleTimeline',
+    component: SimpleTimeline,
     ...withComponentDocs(componentDocs),
     argTypes: {
       symbolColour: { control: 'color' },
       dateColour: { control: 'color' },
     },
   };
+</script>
+
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   const dates = [
     {
@@ -92,12 +96,6 @@
   ];
 </script>
 
-<Meta
-  title="Components/SimpleTimeline"
-  component="{SimpleTimeline}"
-  {...metaProps}
-/>
-
 <Template let:args>
   <SimpleTimeline {...args} />
 </Template>
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
index ed8a513b..a6b46453 100644
--- a/src/components/SiteFooter/SiteFooter.stories.svelte
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -9,19 +7,24 @@
   import removeReferralsDocs from './stories/docs/removeReferrals.md?raw';
 
   import SiteFooter from './SiteFooter.svelte';
-  import Theme from '../Theme/Theme.svelte';
 
   import {
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/SiteFooter',
+    component: SiteFooter,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/SiteFooter"
-  component="{SiteFooter}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import Theme from '../Theme/Theme.svelte';
+</script>
 
 <Template let:args>
   <div>
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index 1bf23bc2..97af4522 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -1,20 +1,19 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
   import darkThemeDocs from './stories/docs/darkTheme.md?raw';
 
   import SiteHeader from './SiteHeader.svelte';
-  import Theme from '../Theme/Theme.svelte';
 
   import {
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/SiteHeader',
+    component: SiteHeader,
     ...withComponentDocs(componentDocs),
     argsTypes: {
       themes: { control: { disable: true } },
@@ -22,7 +21,11 @@
   };
 </script>
 
-<Meta title="Components/SiteHeader" component="{SiteHeader}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import Theme from '../Theme/Theme.svelte';
+</script>
 
 <Template let:args>
   <div>
diff --git a/src/components/Spinner/Spinner.stories.svelte b/src/components/Spinner/Spinner.stories.svelte
index c9bf337a..cf526ce4 100644
--- a/src/components/Spinner/Spinner.stories.svelte
+++ b/src/components/Spinner/Spinner.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
@@ -8,7 +6,9 @@
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Spinner',
+    component: Spinner,
     ...withComponentDocs(componentDocs),
     argTypes: {
       colour: { control: 'color' },
@@ -22,7 +22,9 @@
   };
 </script>
 
-<Meta title="Components/Spinner" component="{Spinner}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Spinner {...args} />
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index bc349e21..7f67e2b4 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -26,11 +24,9 @@
 
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  import pressFreedom from './stories/pressFreedom.json';
-  import homeRuns from './stories/homeRuns.json';
-  import richestWomen from './stories/richestWomen.json';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Table',
+    component: Table,
     ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
@@ -41,7 +37,13 @@
   };
 </script>
 
-<Meta title="Components/Table" component="{Table}" {...metaProps} />
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import pressFreedom from './stories/pressFreedom.json';
+  import homeRuns from './stories/homeRuns.json';
+  import richestWomen from './stories/richestWomen.json';
+</script>
 
 <Template let:args>
   <Table {...args} />
@@ -165,5 +167,4 @@
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
   }}"
-  ,
 />
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index aba7d73f..228a1c13 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -1,6 +1,4 @@
-<script lang="ts">
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -12,19 +10,16 @@
   // @ts-ignore raw
   import inheritanceDocs from './stories/docs/inheritance.md?raw';
 
-  import ThemedPage from './stories/ThemedPage.svelte';
-  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
-
   import Theme, { themes } from './Theme.svelte';
 
-  import Headline from './../Headline/Headline.svelte';
-
   import {
     withComponentDocs,
     withStoryDocs,
   } from '../../docs/utils/withParams.js';
 
-  const metaProps = {
+  export const meta = {
+    title: 'Components/Theme',
+    component: Theme,
     ...withComponentDocs(componentDocs),
     argTypes: {
       base: {
@@ -36,7 +31,14 @@
   };
 </script>
 
-<Meta title="Theming/Theme" component="{Theme}" {...metaProps} />
+<script lang="ts">
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  import ThemedPage from './stories/ThemedPage.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+
+  import Headline from './../Headline/Headline.svelte';
+</script>
 
 <Template let:args>
   <div class="reset-article">
diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte
index a386f59f..f1c4bc9d 100644
--- a/src/components/ToolsHeader/ToolsHeader.stories.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte
@@ -1,19 +1,21 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import ToolsHeader from './ToolsHeader.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/ToolsHeader',
+    component: ToolsHeader,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/ToolsHeader"
-  component="{ToolsHeader}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <div>
diff --git a/src/components/Video/Video.stories.svelte b/src/components/Video/Video.stories.svelte
index c03feb65..eecc1eff 100644
--- a/src/components/Video/Video.stories.svelte
+++ b/src/components/Video/Video.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -10,24 +8,28 @@
   // @ts-ignore raw
   // import withSoundDocs from './stories/docs/withSound.md?raw';
 
-  // @ts-ignore raw
-  import SilentVideo from './stories/videos/silent-video.mp4';
-  // @ts-ignore raw
-  import SoundVideo from './stories/videos/sound-video.mp4';
-
   import Video from './Video.svelte';
 
   import {
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/Video',
+    component: Video,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/Video"
-  component="{Video}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import SilentVideo from './stories/videos/silent-video.mp4';
+  // @ts-ignore raw
+  import SoundVideo from './stories/videos/sound-video.mp4';
+</script>
 
 <Template let:args>
   <Video {...args} />
diff --git a/src/components/Visible/Visible.stories.svelte b/src/components/Visible/Visible.stories.svelte
index 190b3eeb..141f04e5 100644
--- a/src/components/Visible/Visible.stories.svelte
+++ b/src/components/Visible/Visible.stories.svelte
@@ -1,6 +1,4 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -9,13 +7,17 @@
   import Visible from './Visible.svelte';
 
   import { withSource, withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/Visible',
+    component: Visible,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
-  title="Components/Visible"
-  component="{Visible}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Visible {...args} let:visible>