diff --git a/.vscode/settings.json b/.vscode/settings.json
index fbaef8e1..a8ef4c90 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,7 +12,7 @@
     "editor.wordWrap": "on"
   },
   "[svelte]": {
-     "editor.defaultFormatter": "svelte.svelte-vscode"
-   },
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
   "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/src/app.html b/src/app.html
index 7bf73d49..61516813 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  %sveltekit.head%
-</head>
-<body>
-  %sveltekit.body%
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    %sveltekit.head%
+  </head>
+  <body>
+    %sveltekit.body%
+  </body>
+</html>
diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte
index 4fed36b9..c80e6925 100644
--- a/src/components/AdSlot/AdSlot.svelte
+++ b/src/components/AdSlot/AdSlot.svelte
@@ -55,7 +55,7 @@
   });
 </script>
 
-<div data-freestar-ad={dataFreestarAd || null} id={adId}></div>
+<div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
 
 <style>
   :global(div.freestar-adslot:has(.unfulfilled-ad)) {
diff --git a/src/components/AdSlot/InlineAd.mdx b/src/components/AdSlot/InlineAd.mdx
index 5be76a80..97e851cc 100644
--- a/src/components/AdSlot/InlineAd.mdx
+++ b/src/components/AdSlot/InlineAd.mdx
@@ -46,11 +46,11 @@ You may add **up to three** inline ads per page, but must set the `n` prop on mu
 
 ```svelte
 <!-- First inline ad on the page -->
-<InlineAd n={1} />
+<InlineAd n="{1}" />
 <!-- ... second ... -->
-<InlineAd n={2} />
+<InlineAd n="{2}" />
 <!-- ... third and final. -->
-<InlineAd n={3} />
+<InlineAd n="{3}" />
 ```
 
 <Canvas of={InlineAdStories.Demo} />
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte
index fdc4435b..0dface07 100644
--- a/src/components/AdSlot/LeaderboardAd.svelte
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@@ -46,7 +46,7 @@
   });
 </script>
 
-<svelte:window bind:innerWidth={windowWidth} />
+<svelte:window bind:innerWidth="{windowWidth}" />
 
 <div
   class="freestar-adslot leaderboard__sticky {cls}"
diff --git a/src/components/AdSlot/ResponsiveAd.svelte b/src/components/AdSlot/ResponsiveAd.svelte
index 55a9edd5..01a95685 100644
--- a/src/components/AdSlot/ResponsiveAd.svelte
+++ b/src/components/AdSlot/ResponsiveAd.svelte
@@ -69,7 +69,7 @@
   let adType = $derived(getAdType(placementName));
 </script>
 
-<svelte:window bind:innerWidth={windowWidth} />
+<svelte:window bind:innerWidth="{windowWidth}" />
 
 {#if windowWidth}
   {#key placementName}
diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx
index 9a3970e5..ad6935ce 100644
--- a/src/components/Article/Article.mdx
+++ b/src/components/Article/Article.mdx
@@ -40,13 +40,13 @@ When combined with the `Block` component, you can set custom column widths by pa
 
 ```svelte
 <Article
-  columnWidths={{
+  columnWidths="{{
     narrower: 310,
     narrow: 450,
     normal: 550,
     wide: 675,
     wider: 1400,
-  }}
+  }}"
 >
   <Block width="narrower" />
   <Block width="narrow" />
diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx
index 9cd25312..483c6b0e 100644
--- a/src/components/BodyText/BodyText.mdx
+++ b/src/components/BodyText/BodyText.mdx
@@ -30,7 +30,7 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal
 
 ## Using with ArchieML docs
 
-With the graphics kit, you'll likely get your text value from an ArchieML doc.
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
 # Archie ML doc
diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx
new file mode 100644
index 00000000..31352eb9
--- /dev/null
+++ b/src/components/Byline/Byline.mdx
@@ -0,0 +1,53 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BylineStories from './Byline.stories.svelte';
+
+<Meta of={BylineStories} />
+
+# Byline
+
+The `Byline` component adds a byline, published and updated datelines to your page.
+
+```svelte
+<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Byline
+  authors={[
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+<Canvas of={BylineStories.Demo} />
+
+## Cutomisation
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
+
+```svelte
+<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+  <!-- Optional custom byline -->
+  {#snippet byline()}
+    <strong>BY REUTERS GRAPHICS</strong>
+  {/snippet}
+
+  <!-- Optional custom published dateline -->
+  {#snippet published()}
+    PUBLISHED on some custom date and time
+  {/snippet}
+
+  <!-- Optional custom updated dateline -->
+  {#snippet updated()}
+    <em>Updated every 5 minutes</em>
+  {/snippet}
+</Byline>
+```
+
+<Canvas of={BylineStories.Customised} />
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index 5855ceef..c0cf796a 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -1,17 +1,11 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Byline from './Byline.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
-  import { withComponentDocs } from '$docs/utils/withParams.js';
-
-  import type { ComponentProps } from 'svelte';
 
   const { Story } = defineMeta({
     title: 'Components/Text elements/Byline',
     component: Byline,
-    ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       align: {
         control: 'select',
@@ -21,17 +15,12 @@
   });
 </script>
 
-{#snippet template(args: ComponentProps<Byline>)}
-  <Byline {...args} />
-{/snippet}
-
 <Story
-  name="Default"
+  name="Demo"
   args={{
     align: 'left',
     authors: [
       'Dea Bankova',
-      'Aditi Bhandari',
       'Prasanta Kumar Dutta',
       'Anurag Rao',
       'Mariano Zafra',
@@ -39,5 +28,18 @@
     publishTime: new Date('2021-09-12').toISOString(),
     updateTime: new Date('2021-09-12T13:57:00').toISOString(),
   }}
-  children={template}
 />
+
+<Story name="Customised" tags={['!autodocs', '!dev']}>
+  <Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+    {#snippet byline()}
+      <strong>BY REUTERS GRAPHICS</strong>
+    {/snippet}
+    {#snippet published()}
+      PUBLISHED on some custom date and time
+    {/snippet}
+    {#snippet updated()}
+      <em>Updated every 5 minutes</em>
+    {/snippet}
+  </Byline>
+</Story>
diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index 8f67a4e7..62b1ff5d 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -4,63 +4,91 @@
   import Block from '../Block/Block.svelte';
   import slugify from 'slugify';
   import { apdate } from 'journalize';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     * @type {string}
+     */
+    updateTime: string;
+    /**
+     * Alignment of the byline.
+     * @type {string}
+     */
+    align?: 'left' | 'center';
+    /**
+     * Add an id to to target with custom CSS.
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Add extra classes to target with custom CSS.
+     * @type {string}
+     */
+    cls?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet | null;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    // Specify that this prop should have the type of a Svelte snippet, i.e. basic html
+    published?: Snippet | null;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet | null;
+  }
+
+  let {
+    authors = [],
+    publishTime,
+    updateTime,
+    align = 'left',
+    id = '',
+    cls = '',
+    getAuthorPage = (author: string): string => {
+      const authorSlug = slugify(author.trim(), { lower: true });
+      return `https://www.reuters.com/authors/${authorSlug}/`;
+    },
+    byline = null,
+    published = null,
+    updated = null,
+  }: Props = $props();
+
+  let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
 
   /**
-   * Array of author names, which will be slugified to create links to Reuters author pages
+  /* Date validation and formatter functions
    */
-  export let authors: string[] = [];
-  /**
-   * Publish time as a datetime string.
-   * @type {string}
-   */
-  export let publishTime: string = '';
-  /**
-   * Update time as a datetime string.
-   * @type {string}
-   */
-  export let updateTime: string = '';
-  /**
-   * Alignment of the byline.
-   * @type {string}
-   */
-  export let align: 'left' | 'center' = 'left';
-  /**
-   * Add an id to to target with custom CSS.
-   * @type {string}
-   */
-  export let id: string = '';
-  /**
-   * Add extra classes to target with custom CSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Custom function that returns an author page URL.
-   * @param author
-   */
-  export let getAuthorPage = (author: string): string => {
-    const authorSlug = slugify(author.trim(), { lower: true });
-    return `https://www.reuters.com/authors/${authorSlug}/`;
-  };
-
-  $: alignmentClass = align === 'left' ? 'text-left' : 'text-center';
-
-  const isValidDate = (datetime) => {
+  const isValidDate = (datetime: string) => {
     if (!datetime) return false;
     if (!Date.parse(datetime)) return false;
     return true;
   };
 
-  const formatTime = (datetime) =>
+  const formatTime = (datetime: string) =>
     new Date(datetime).toLocaleTimeString([], {
       hour: '2-digit',
       minute: '2-digit',
       timeZoneName: 'short',
     });
 
-  const areSameDay = (first, second) =>
+  const areSameDay = (first: Date, second: Date) =>
     first.getFullYear() === second.getFullYear() &&
     first.getMonth() === second.getMonth() &&
     first.getDate() === second.getDate();
@@ -69,16 +97,16 @@
 <Block {id} class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
     <div class="byline body-caption fmb-1">
-      {#if $$slots.byline}
+      {#if byline}
         <!-- Custom byline -->
-        <slot name="byline" />
+        {@render byline()}
       {:else}
         By
         {#if authors.length > 0}
           {#each authors as author, i}
             <a
               class="no-underline whitespace-nowrap text-primary font-bold"
-              href="{getAuthorPage(author)}"
+              href={getAuthorPage(author)}
               rel="author"
             >
               {author.trim()}</a
@@ -95,15 +123,17 @@
       {/if}
     </div>
     <div class="dateline body-caption fmt-0">
-      {#if $$slots.published}
+      {#if published}
         <div class="whitespace-nowrap inline-block">
-          <!-- Custom published dateline -->
-          <slot name="published" />
+          <!-- Custom published dateline snippet -->
+          <time datetime={publishTime}>
+            {@render published()}
+          </time>
         </div>
       {:else if isValidDate(publishTime)}
         <div class="whitespace-nowrap inline-block">
           Published
-          <time datetime="{publishTime}">
+          <time datetime={publishTime}>
             {#if isValidDate(updateTime)}
               {apdate(new Date(publishTime))}
             {:else}
@@ -114,15 +144,17 @@
           </time>
         </div>
       {/if}
-      {#if $$slots.updated}
+      {#if updated}
         <div class="whitespace-nowrap inline-block">
-          <!-- Custom updated dateline -->
-          <slot name="updated" />
+          <!-- Custom updated dateline snippet -->
+          <time datetime={updateTime}>
+            {@render updated()}
+          </time>
         </div>
       {:else if isValidDate(publishTime) && isValidDate(updateTime)}
         <div class="whitespace-nowrap inline-block">
           Last updated
-          <time datetime="{updateTime}">
+          <time datetime={updateTime}>
             {#if areSameDay(new Date(publishTime), new Date(updateTime))}
               {formatTime(updateTime)}
             {:else}
diff --git a/src/components/Byline/stories/docs/component.md b/src/components/Byline/stories/docs/component.md
deleted file mode 100644
index fd9eedc0..00000000
--- a/src/components/Byline/stories/docs/component.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Byline and dateline.
-
-```svelte
-<script>
-  import { Byline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Byline
-  authors="{[
-    'Dea Bankova',
-    'Aditi Bhandari',
-    'Prasanta Kumar Dutta',
-    'Anurag Rao',
-    'Mariano Zafra',
-  ]}"
-  publishTime="2021-09-12T00:00:00.000Z"
-  updateTime="2021-09-12T12:57:00.000Z"
-/>
-```
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index 412d1adc..b1dcee23 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -17,18 +17,18 @@
 
 <Story
   name="Demo"
-  args={{
+  args="{{
     src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
     frameTitle: 'Global abortion access',
-  }}
+  }}"
 />
 
 <Story
   name="With chatter"
-  tags={['!autodocs']}
-  args={{
+  tags="{['!autodocs']}"
+  args="{{
     frameTitle: 'Global abortion access',
     ariaLabel: 'map',
     id: 'abortion-rights-map',
@@ -37,5 +37,5 @@
     description: 'A map of worldwide access to abortion.',
     notes:
       'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
-  }}
+  }}"
 />
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
new file mode 100644
index 00000000..12693e2d
--- /dev/null
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+import * as EmbedPreviewerLinkStories from './EmbedPreviewerLink.stories.svelte';
+
+<Meta of={EmbedPreviewerLinkStories} />
+
+# EmbedPreviewerLink
+
+The `EmbedPreviewerLink` component is a tool for previewing the embeds in development. It adds an icon at the bottom of the page that, when clicked, opens a previewer with the embeds.
+
+```svelte
+<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+</script>
+
+<EmbedPreviewerLink {dev} />
+```
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
index fa380bef..80f2fa4a 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@@ -1,30 +1,17 @@
 <script module lang="ts">
   import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/EmbedPreviewerLink',
     component: EmbedPreviewerLink,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <EmbedPreviewerLink {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  tags={['!autodocs', '!dev']}
+  args={{
     dev: true,
-  }}"
+  }}
 />
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
index 7420449e..21ea835e 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
   import Fa from 'svelte-fa/src/fa.svelte';
   import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
   interface Props {
@@ -12,7 +11,7 @@
 {#if dev}
   <div>
     <a rel="external" href="/embed-previewer">
-      <Fa icon="{faWindowRestore}" />
+      <Fa icon={faWindowRestore} />
     </a>
   </div>
 {/if}
diff --git a/src/components/EmbedPreviewerLink/stories/docs/component.md b/src/components/EmbedPreviewerLink/stories/docs/component.md
deleted file mode 100644
index 35b360b1..00000000
--- a/src/components/EmbedPreviewerLink/stories/docs/component.md
+++ /dev/null
@@ -1,11 +0,0 @@
-An embed tool for development in graphics kit.
-
-```svelte
-<script>
-  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
-
-  import { dev } from '$app/env';
-</script>
-
-<EmbedPreviewerLink dev="{dev}" />
-```
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
index 5917b29f..1037709f 100644
--- a/src/components/EndNotes/EndNotes.svelte
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -12,15 +12,13 @@
     text: string;
   }
 
-  
-
   import Block from '../Block/Block.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
   interface Props {
     /**
-   * An array of endnote items.
-   * @required
-   */
+     * An array of endnote items.
+     * @required
+     */
     notes?: EndNote[];
   }
 
diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte
index 3c5294ad..f93febe5 100644
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@@ -11,7 +11,11 @@
     minFrameWidth?: number;
   }
 
-  let { breakpoints = [330, 510, 660, 930, 1200], maxFrameWidth = 1200, minFrameWidth = 320 }: Props = $props();
+  let {
+    breakpoints = [330, 510, 660, 930, 1200],
+    maxFrameWidth = 1200,
+    minFrameWidth = 320,
+  }: Props = $props();
 
   let container = $state();
 
@@ -91,9 +95,9 @@
 </script>
 
 <svelte:window
-  onmousemove={move}
-  onmouseup={end}
-  onkeydown={handleKeyDown}
+  onmousemove="{move}"
+  onmouseup="{end}"
+  onkeydown="{handleKeyDown}"
   bind:innerWidth="{windowInnerWidth}"
 />
 
@@ -105,10 +109,10 @@
     <button
       class="icon left"
       disabled="{$width === minWidth}"
-      onclick={decrement}
-      onfocus={onFocus}
-      onmouseover={onFocus}
-      onmouseleave={onBlur}
+      onclick="{decrement}"
+      onfocus="{onFocus}"
+      onmouseover="{onFocus}"
+      onmouseleave="{onBlur}"
     >
       <Fa icon="{faMobileAlt}" fw />
     </button>
@@ -119,18 +123,18 @@
         tabindex="0"
         role="button"
         style="left: calc({offset * 100}% - 5px);"
-        onmousedown={start}
-        onfocus={onFocus}
-        onblur={onBlur}
+        onmousedown="{start}"
+        onfocus="{onFocus}"
+        onblur="{onBlur}"
       ></div>
     </div>
     <button
       class="icon right"
       disabled="{$width === maxWidth}"
-      onclick={increment}
-      onfocus={onFocus}
-      onmouseover={onFocus}
-      onmouseleave={onBlur}
+      onclick="{increment}"
+      onfocus="{onFocus}"
+      onmouseover="{onFocus}"
+      onmouseleave="{onBlur}"
     >
       <Fa icon="{faDesktop}" fw />
     </button>
diff --git a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
index f837d3a2..43904f42 100644
--- a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
+++ b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   // For demo purposes only, hard-wiring img paths from Vite
   // @ts-ignore img
   import chartXs from '../imgs/ai-chart-xs.png';
diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx
new file mode 100644
index 00000000..9c23d192
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.mdx
@@ -0,0 +1,122 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as InfoBoxStories from './InfoBox.stories.svelte';
+
+<Meta of={InfoBoxStories} />
+
+# InfoBox
+
+The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data and extra context.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="About this data"
+  text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+```
+
+<Canvas of={InfoBoxStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# Archie ML doc
+[blocks]
+
+type: info-box
+title: What you need to know about the war
+text: Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.
+
+Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.
+:end
+notes: [Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `InfoBox` component.
+
+```svelte
+<!-- Graphics Kit -->
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+# Graphics Kit
+{#each content.blocks as block}
+  {#if block.type === 'info-box'}
+    <InfoBox title={block.title} text={block.text} notes={block.notes} />
+    <!-- ... -->
+  {/if}
+{/each}
+```
+
+<Canvas of={InfoBoxStories.Demo} />
+
+## Lists
+
+Use markdown to add lists to `InfoBox`.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="What you need to know about the war"
+  text={"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.\n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.\n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines."}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+```
+
+<Canvas of={InfoBoxStories.Lists} />
+## Customisation
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the `InfoBox`, such as adding tables, icons and thumbnail images.
+
+```svelte
+<InfoBox title="About this data">
+  <!-- Optional custom header -->
+  {#snippet header()}
+    <h3>Global video game market</h3>
+  {/snippet}
+  <!-- Optional custom body -->
+  {#snippet body()}
+    <table>
+      <thead>
+        <tr>
+          <th>Year</th>
+          <th>Market size ($bln)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>2024</td>
+          <td>274.63</td>
+        </tr>
+        <tr>
+          <td>2023</td>
+          <td>281.77</td>
+        </tr>
+        <tr>
+          <td>2022</td>
+          <td>249.55</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+  <!-- Optional custom footer -->
+  {#snippet updated()}
+    <div class="text-xs font-note">Source: Precedence Research</div>
+  {/snippet}
+</InfoBox>
+```
+
+<Canvas of={InfoBoxStories.Customised} />
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index 6ccd3d47..f07fc990 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -1,15 +1,12 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import InfoBox from './InfoBox.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/InfoBox',
     component: InfoBox,
-    ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       theme: {
         control: 'select',
@@ -20,38 +17,82 @@
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import BodyText from '../BodyText/BodyText.svelte';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <InfoBox {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default">
+<Story name="Demo">
   <BodyText
-    text="If you haven't seen Game of Thrones, go watch it right now. If you have then you'll totally get why this Hodor themed lorem ipsum generator is just brilliant."
+    text="Bacon ipsum dolor amet turducken buffalo beef ribs bresaola pancetta ribeye pork belly doner hamburger biltong cupim porchetta chuck ham tenderloin. Turducken bresaola jerky chicken."
   />
   <InfoBox
     title="About this data"
-    text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
-    notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
+    text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+    notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
   />
   <BodyText
-    text="In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."
+    text="Ham drumstick tail ribeye pancetta, leberkas hamburger chicken spare ribs buffalo jerky sausage ground round meatball. Leberkas kevin short loin, tri-tip shank spare ribs buffalo beef pork belly corned beef chislic tongue."
   />
 </Story>
+<Story
+  name="Lists"
+  tags={['!autodocs', '!dev']}
+  args={{
+    title: 'What you need to know about the war',
+    text: "- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. ",
+  }}
+/>
+<Story name="Customised" tags={['!autodocs', '!dev']}>
+  <InfoBox>
+    {#snippet header()}
+      <h3>Global video game market</h3>
+    {/snippet}
+    {#snippet body()}
+      <table>
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th>Market size ($bln)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>2024</td>
+            <td>274.63</td>
+          </tr>
+          <tr>
+            <td>2023</td>
+            <td>281.77</td>
+          </tr>
+          <tr>
+            <td>2022</td>
+            <td>249.55</td>
+          </tr>
+        </tbody>
+      </table>
+    {/snippet}
+    {#snippet footer()}
+      <div class="text-xs font-note">Source: Precedence Research</div>
+    {/snippet}
+  </InfoBox>
+</Story>
 
-<Story name="List">
-  <InfoBox
-    title="What you need to know about the war"
-    text="{"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. "}"
-  />
-</Story>
+<style lang="scss">
+  h3 {
+    margin: 0;
+  }
+  // Style the table nicely
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  th,
+  td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: center;
+  }
+  th {
+    background-color: #f2f2f2;
+  }
+</style>
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
index 98ddbd0a..52d915a8 100644
--- a/src/components/InfoBox/InfoBox.svelte
+++ b/src/components/InfoBox/InfoBox.svelte
@@ -1,47 +1,59 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { ContainerWidth } from '../@types/global';
 
   type Theme = 'light' | 'dark';
 
-  /**
-   * Title of the box
-   */
-  export let title: string | null = null;
+  interface Props {
+    /**
+     * Title of the box
+     */
+    title?: string | null;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text?: string;
+    /**
+     * Additional footnotes
+     */
+    notes?: string | null;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Add extra classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Page theme
+     */
+    theme?: Theme;
+    /** Optional custom header snippet */
+    header?: Snippet;
+    /** Optional custom body snippet */
+    body?: Snippet;
+    /** Optional custom footer snippet */
+    footer?: Snippet;
+  }
 
-  /**
-   * Contents of the note as a markdown string
-   */
-  export let text: string = '';
-
-  /**
-   * Additional footnotes
-   */ export let notes: string | null = null;
-
-  /**
-   * Width of the component within the text well.
-   * @type {string}
-   */
-  export let width: ContainerWidth = 'normal';
-
-  /**
-   * Add extra classes to the block tag to target it with custom CSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Add an id to the block tag to target it with custom CSS.
-   * @type {string}
-   */
-  export let id: string = '';
-
-  /**
-   * Page theme
-   */
-  export let theme: Theme = 'light';
+  let {
+    title = null,
+    text,
+    notes = null,
+    width = 'normal',
+    class: cls = '',
+    id = '',
+    theme = 'light',
+    header,
+    body,
+    footer,
+  }: Props = $props();
 
   import Block from '../Block/Block.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
@@ -53,36 +65,36 @@
     {id}
     class="{cls} fmy-6 fpx-6 fpy-5 border border-solid rounded"
   >
-    {#if $$slots.header}
+    {#if header}
       <div class="header fmb-2">
-        <!-- Custom title content -->
-        <slot name="header" />
+        <!-- Custom header content -->
+        {@render header()}
       </div>
     {:else if title}
       <div class="header fmb-2">
-        <Markdown source="{title}" />
+        <Markdown source={title} />
       </div>
     {/if}
 
-    {#if $$slots.body}
+    {#if body}
       <div class="body">
-        <!-- Custom content -->
-        <slot name="body" />
+        <!-- Custom body content -->
+        {@render body()}
       </div>
     {:else}
       <div class="body">
-        <Markdown source="{text}" />
+        <Markdown source={text} />
       </div>
     {/if}
 
-    {#if $$slots.footer}
+    {#if footer}
       <div class="footer fmt-2">
         <!-- Custom footer content -->
-        <slot name="footer" />
+        {@render footer()}
       </div>
     {:else if notes}
       <div class="footer fmt-2">
-        <Markdown source="{notes}" />
+        <Markdown source={notes} />
       </div>
     {/if}
   </Block>
diff --git a/src/components/InfoBox/stories/docs/component.md b/src/components/InfoBox/stories/docs/component.md
deleted file mode 100644
index 909ae106..00000000
--- a/src/components/InfoBox/stories/docs/component.md
+++ /dev/null
@@ -1,17 +0,0 @@
-InfoBox is used to provide additional information that needs to be visually set aside from the main content flow. e.g. Methodology, Detailed notes about data, Extra context as text stories.
-
-Switch the theme prop to `dark` for a dark page infobox.
-
-Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
-
-```svelte
-<script>
-  import { InfoBox } from '@reuters-graphics/graphics-components';
-</script>
-
-<InfoBox
-  title="About this data"
-  text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
-  notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
-/>
-```
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index 38425ea9..c60f870c 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -1,7 +1,5 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
-  
-
   import { onMount } from 'svelte';
   import pym from 'pym.js';
   import { pymChildStore } from './stores.js';
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
index 6fe397dc..cb6e31bc 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
 <script lang="ts">
-  
-  
-  
   interface Props {
     /** "Kinesis" colour */
     logoColour?: string;
@@ -12,7 +9,11 @@
     width?: string;
   }
 
-  let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte
index 49a4a00f..10d4efeb 100644
--- a/src/components/ReutersLogo/ReutersLogo.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
 <script lang="ts">
-  
-  
-  
   interface Props {
     /** "Kinesis" colour */
     logoColour?: string;
@@ -12,7 +9,11 @@
     width?: string;
   }
 
-  let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index c18ae2b8..96a91a91 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -1,85 +1,72 @@
 <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
 <script lang="ts">
-  
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-
   interface GraphicAuthor {
     name: string;
     url: string;
   }
 
-  
   interface Props {
     /**
-   * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
-   * is globally available as `import.meta.env.BASE_URL`.
-   * @requiredx
-   * @type {string}
-   */
+     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
+     * is globally available as `import.meta.env.BASE_URL`.
+     * @requiredx
+     * @type {string}
+     */
     baseUrl?: string;
     /**
-   * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
-   * @required
-   * @type {URL}
-   */
+     * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
+     * @required
+     * @type {URL}
+     */
     pageUrl?: URL | null;
     /**
-   * SEO title
-   * @required
-   * @type {string}
-   */
+     * SEO title
+     * @required
+     * @type {string}
+     */
     seoTitle: string;
     /**
-   * SEO description
-   * @required
-   * @type {string}
-   */
+     * SEO description
+     * @required
+     * @type {string}
+     */
     seoDescription: string;
     /**
-   * Share title
-   * @required
-   * @type {string}
-   */
+     * Share title
+     * @required
+     * @type {string}
+     */
     shareTitle: string;
     /**
-   * Share description
-   * @required
-   * @type {string}
-   */
+     * Share description
+     * @required
+     * @type {string}
+     */
     shareDescription: string;
     /**
-   * Share image path. **Must be an absolute path.**
-   * @required
-   * @type {string}
-   */
+     * Share image path. **Must be an absolute path.**
+     * @required
+     * @type {string}
+     */
     shareImgPath: string;
     /**
-   * Share image alt text, up to 420 characters.
-   * @type {string}
-   */
+     * Share image alt text, up to 420 characters.
+     * @type {string}
+     */
     shareImgAlt?: string;
     /**
-   * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-   * @type {string}
-   */
+     * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     * @type {string}
+     */
     publishTime?: string;
     /**
-   * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-   * @type {string}
-   */
+     * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     * @type {string}
+     */
     updateTime?: string;
     /**
-   * Array of authors for the piece. Each author object must have `name` and `url` attributes.
-   */
+     * Array of authors for the piece. Each author object must have `name` and `url` attributes.
+     */
     authors?: GraphicAuthor[];
   }
 
@@ -94,7 +81,7 @@
     shareImgAlt = '',
     publishTime = '',
     updateTime = '',
-    authors = []
+    authors = [],
   }: Props = $props();
 
   const getOrigin = (baseUrl: string) => {
@@ -109,7 +96,9 @@
   };
 
   let origin = $derived(getOrigin(baseUrl));
-  let canonicalUrl = $derived((origin + pageUrl?.pathname).replace(/index\.html\/$/, ''));
+  let canonicalUrl = $derived(
+    (origin + pageUrl?.pathname).replace(/index\.html\/$/, '')
+  );
 
   const orgLdJson = {
     '@context': 'http://schema.org',
diff --git a/src/components/Scroller/Embedded/index.svelte b/src/components/Scroller/Embedded/index.svelte
index 1d95b023..6c1d0380 100644
--- a/src/components/Scroller/Embedded/index.svelte
+++ b/src/components/Scroller/Embedded/index.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
   import type { ContainerWidth, ScrollerStep } from '../../@types/global';
 
-
   type EmbeddedLayout = 'fb' | 'bf';
 
-
   import Background from './Background.svelte';
   import Foreground from './Foreground.svelte';
   interface Props {
@@ -13,7 +11,11 @@
     backgroundWidth?: ContainerWidth;
   }
 
-  let { steps = [], embeddedLayout = 'fb', backgroundWidth = 'fluid' }: Props = $props();
+  let {
+    steps = [],
+    embeddedLayout = 'fb',
+    backgroundWidth = 'fluid',
+  }: Props = $props();
 </script>
 
 {#each steps as step, index}
diff --git a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
index dbb0565d..63c91bee 100644
--- a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
+++ b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
@@ -11,7 +11,7 @@
 <p>The count is {count}</p>
 
 <button
-  onclick={() => {
+  onclick="{() => {
     count += 1;
-  }}>Click Me</button
+  }}">Click Me</button
 >
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index ad908bb3..b0761c69 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -4,12 +4,11 @@
   import MagnifyingGlass from './MagnifyingGlass.svelte';
   import X from './X.svelte';
 
-  
   interface Props {
     /**
-   * The placeholder text that appears in the search box.
-   * @type {string}
-   */
+     * The placeholder text that appears in the search box.
+     * @type {string}
+     */
     searchPlaceholder?: string;
   }
 
@@ -40,7 +39,7 @@
     class="search--input body-caption pl-8"
     type="text"
     placeholder="{searchPlaceholder}"
-    oninput={input}
+    oninput="{input}"
     bind:value
   />
   <div
@@ -48,8 +47,8 @@
     role="button"
     tabindex="0"
     class:invisible="{!active}"
-    onclick={clear}
-    onkeyup={clear}
+    onclick="{clear}"
+    onkeyup="{clear}"
   >
     <X />
   </div>
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 941411df..61ccce6c 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -9,11 +9,10 @@
   import starterData from './data.json';
   import { onMount } from 'svelte';
 
-  
   interface Props {
     /**
-   * Set to `false` to remove graphics referrals
-   */
+     * Set to `false` to remove graphics referrals
+     */
     includeReferrals?: boolean;
   }
 
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index 10441272..77a7703f 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -9,7 +9,11 @@
     releaseMobileMenu?: any;
   }
 
-  let { data = [], isMobileMenuOpen = false, releaseMobileMenu = () => {} }: Props = $props();
+  let {
+    data = [],
+    isMobileMenuOpen = false,
+    releaseMobileMenu = () => {},
+  }: Props = $props();
 </script>
 
 {#if isMobileMenuOpen}
@@ -31,7 +35,7 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" onclick={releaseMobileMenu}>
+      <button class="button close-button" onclick="{releaseMobileMenu}">
         <div class="button-container">
           <CloseIcon />
         </div>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 803ddb46..86994a4d 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -5,10 +5,11 @@
 
   let { section = {}, headingText } = $props();
 
-  let splitCount =
-    $derived(section.children && section.children.length > 7 ?
+  let splitCount = $derived(
+    section.children && section.children.length > 7 ?
       Math.ceil(section.children.length / 2)
-    : 0);
+    : 0
+  );
 </script>
 
 <NavDropdown {headingText}>
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index a5df1353..d0147a57 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -35,27 +35,27 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             class="nav-item category link"
-            onmouseenter={() => {
+            onmouseenter="{() => {
               navTimeout = setTimeout(
                 () => activeSection.set(section.id),
                 timeout
               );
-            }}
-            onfocus={() => activeSection.set(section.id)}
-            onmouseleave={() => {
+            }}"
+            onfocus="{() => activeSection.set(section.id)}"
+            onmouseleave="{() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}
-            onblur={() => {
+            }}"
+            onblur="{() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}
-            onclick={() => {
+            }}"
+            onclick="{() => {
               if ($activeSection === section.id) {
                 clearTimeout(navTimeout);
                 activeSection.set(null);
               }
-            }}
+            }}"
           >
             <div
               class="nav-button link"
@@ -88,24 +88,24 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <li
         class="nav-item"
-        onmouseenter={() => {
+        onmouseenter="{() => {
           navTimeout = setTimeout(() => activeSection.set('more'), timeout);
-        }}
-        onfocus={() => activeSection.set('more')}
-        onmouseleave={() => {
+        }}"
+        onfocus="{() => activeSection.set('more')}"
+        onmouseleave="{() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}
-        onblur={() => {
+        }}"
+        onblur="{() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}
-        onclick={() => {
+        }}"
+        onclick="{() => {
           if ($activeSection === 'more') {
             clearTimeout(navTimeout);
             activeSection.set(null);
           }
-        }}
+        }}"
       >
         <div
           class="nav-button more link"
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index e00e973f..0620975f 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -77,9 +77,9 @@
                 aria-label="Menu"
                 aria-haspopup="true"
                 aria-expanded="{isMobileMenuOpen}"
-                onclick={() => {
+                onclick="{() => {
                   isMobileMenuOpen = !isMobileMenuOpen;
-                }}
+                }}"
               >
                 <div class="button-container">
                   <MenuIcon />
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index 115e8467..1d39f33b 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -3,33 +3,26 @@
   import LeftArrow from './LeftArrow.svelte';
   import RightArrow from './RightArrow.svelte';
 
-  
-
-  
-
-  
-
-  
   interface Props {
     /**
-   * The current page number.
-   * @type {number}
-   */
+     * The current page number.
+     * @type {number}
+     */
     pageNumber?: number;
     /**
-   * The default page size.
-   * @type {number}
-   */
+     * The default page size.
+     * @type {number}
+     */
     pageSize?: number;
     /**
-   * The number of records in the current page.
-   * @type {number}
-   */
+     * The number of records in the current page.
+     * @type {number}
+     */
     pageLength?: number;
     /**
-   * The total number of records in the data set.
-   * @type {number}
-   */
+     * The total number of records in the data set.
+     * @type {number}
+     */
     n?: number;
   }
 
@@ -37,7 +30,7 @@
     pageNumber = $bindable(1),
     pageSize = 25,
     pageLength = null,
-    n = null
+    n = null,
   }: Props = $props();
 
   let minRow = $derived(pageNumber * pageSize - pageSize + 1);
@@ -58,7 +51,7 @@
 </script>
 
 <nav aria-label="pagination" class="pagination fmt-4">
-  <button onclick={goToPreviousPage} disabled="{pageNumber === 1}"
+  <button onclick="{goToPreviousPage}" disabled="{pageNumber === 1}"
     ><div class="icon-wrapper">
       <LeftArrow />
       <span class="visually-hidden">Previous page</span>
@@ -70,7 +63,7 @@
     </div>
   </div>
   <button
-    onclick={goToNextPage}
+    onclick="{goToNextPage}"
     disabled="{pageNumber === Math.ceil(n / pageSize)}"
     ><div class="icon-wrapper">
       <RightArrow />
diff --git a/src/components/Table/Select.svelte b/src/components/Table/Select.svelte
index 9415be48..c0c7d5e1 100644
--- a/src/components/Table/Select.svelte
+++ b/src/components/Table/Select.svelte
@@ -2,19 +2,16 @@
   import { createEventDispatcher } from 'svelte';
   import type { Option } from '../@types/global';
 
-  
-
-  
   interface Props {
     /**
-   * The label that appears above the select input.
-   * @type {string}
-   */
+     * The label that appears above the select input.
+     * @type {string}
+     */
     label?: string;
     /**
-   * The label that appears above the select input.
-   * @type {Array}
-   */
+     * The label that appears above the select input.
+     * @type {Array}
+     */
     options?: Option[];
   }
 
@@ -36,7 +33,7 @@
     class="select--input body-caption fpx-2"
     name="select--input"
     id="select--input"
-    oninput={input}
+    oninput="{input}"
   >
     {#each options as obj}
       <option value="{obj.value}">{obj.text}</option>
diff --git a/src/components/Table/SortArrow.svelte b/src/components/Table/SortArrow.svelte
index cd34c411..4fb751bf 100644
--- a/src/components/Table/SortArrow.svelte
+++ b/src/components/Table/SortArrow.svelte
@@ -5,13 +5,12 @@
    */
   type SortDirection = 'ascending' | 'descending';
 
-  
   interface Props {
     sortDirection?: SortDirection;
     /**
-   * Whether or not this arrow is currently sorting. It is false by default.
-   * @type {boolean}
-   */
+     * Whether or not this arrow is currently sorting. It is false by default.
+     * @type {boolean}
+     */
     active?: boolean;
   }
 
diff --git a/src/components/Video/Controls.svelte b/src/components/Video/Controls.svelte
index 6229f6ca..ce59b2a6 100644
--- a/src/components/Video/Controls.svelte
+++ b/src/components/Video/Controls.svelte
@@ -15,7 +15,7 @@
     controlsBorderOffset,
     resetCondition,
     separateReplayIcon,
-    controlsColour
+    controlsColour,
   } = $props();
 
   function forwardBtnClick() {
@@ -29,7 +29,7 @@
 </script>
 
 <button
-  onclick={forwardBtnClick}
+  onclick="{forwardBtnClick}"
   style="
     opacity: {controlsOpacity};
     top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?
