Merge pull request #170 from reuters-graphics/yaks

Yaks
2024-08-28 09:05:07 +01:00 · 2024-08-28 09:05:07 +01:00 · e424dd1817
commit e424dd1817
parent 203b102b55 cfb8f17a57
225 changed files with 20120 additions and 25698 deletions
--- a/.changeset/README.md
+++ b/.changeset/README.md
@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
--- a/.changeset/config.json
+++ b/.changeset/config.json
@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": true,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
--- a/.changeset/tidy-news-mix.md
+++ b/.changeset/tidy-news-mix.md
@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': minor
+---
+
+Updates Storybook and makes Svelte 4 minimum.
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -1,5 +0,0 @@
-{
-    "name": "Node.js",
-    "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
-    "postCreateCommand": "yarn install"
-}
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -1,52 +0,0 @@
-module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  ignorePatterns: ['node_modules', 'docs/**', '.eslintrc.cjs'],
-  extends: ['standard', 'plugin:svelte/recommended'],
-  plugins: ['@typescript-eslint'],
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
-    extraFileExtensions: ['.svelte'],
-  },
-  env: {
-    browser: true,
-    es2022: true,
-  },
-  rules: {
-    indent: ['error', 2, { SwitchCase: 1 }],
-    semi: ['error', 'always'],
-    'comma-dangle': [
-      'error',
-      {
-        arrays: 'always-multiline',
-        objects: 'always-multiline',
-        imports: 'always-multiline',
-        exports: 'never',
-        functions: 'never',
-      },
-    ],
-    'operator-linebreak': ['error', 'after'],
-    'space-before-function-paren': ['error', 'never'],
-  },
-  overrides: [
-    {
-      files: ['*.svelte'],
-      parser: 'svelte-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-      },
-      rules: {
-        'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2 }],
-        'import/first': 'off',
-        'import/no-duplicates': 'off',
-        'import/no-mutable-exports': 'off',
-        'import/no-unresolved': 'off',
-        'svelte/no-at-html-tags': 'off',
-        indent: ['error', 2],
-      },
-    },
-  ],
-};
--- a/.github/COMMIT_ERROR_ISSUE_TEMPLATE.md
+++ b/.github/COMMIT_ERROR_ISSUE_TEMPLATE.md
@ -1,7 +0,0 @@
---
-title: Build error on commit
-assignees: hobbes7878
-labels: bug
---
-
-A commit caused docs to fail to build: {{ sha }}
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,17 +1,9 @@
 ### What's in this pull request

- [ ] Bug fix
- [ ] New component/feature
- [ ] Documentation update
- [ ] Other
-
-### Description
-
 Tell us what this PR does or link to any related issues that describe the goal here.

-### Before submitting, please check that you've
+### Before submitting, please check that you've ...

- [ ] Read our [contributing guide](https://github.com/reuters-graphics/graphics-components/blob/master/CONTRIBUTING.md) at some point
- [ ] Formatted you code correctly (i.e., prettier cleaned it up)
+- [x] Read our [contributing guide](https://github.com/reuters-graphics/graphics-components/blob/master/CONTRIBUTING.md)
 - [ ] Documented any new components or features
- [ ] Tagged an editor to review
+- [ ] Tagged an editor to review this PR
--- a/.github/docs.yaml
+++ b/.github/docs.yaml
@ -1,41 +0,0 @@
-name: Build docs site
-permissions:
-  contents: write
-  issues: write
-on:
-  push:
-    branches:
-      - master
-jobs:
-  build-app:
-    name: Build site
-    runs-on: ubuntu-latest
-    env:
-      TESTING: true
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.7.0'
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install
-      - name: Config git
-        run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-      - name: Build docs
-        run: yarn build:docs
-      - name: Create issue on fail
-        uses: JasonEtco/create-an-issue@v2
-        if: ${{ failure() }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          filename: .github/COMMIT_ERROR_ISSUE_TEMPLATE.md
-      - name: Commit docs
-        if: ${{ success() }}
-        run: |
-          git add .
-          git commit -m "build docs"
-          git push origin
--- a/.github/workflows/chromatic.yaml
+++ b/.github/workflows/chromatic.yaml
@ -1,6 +1,9 @@
 name: Chromatic

-on: push
+on:
+  pull_request:
+    branches:
+      - main

 jobs:
  chromatic-deployment:
@ -9,11 +12,16 @@ jobs:
      NODE_OPTIONS: '--max_old_space_size=4096'
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
      - name: Install dependencies
-        run: yarn
+        run: npm ci
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@ -0,0 +1,46 @@
+name: Lint
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  checks: write
+  contents: write
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - id: setup-node
+        name: Setup Node.JS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - id: install-deps
+        name: Install dependencies
+        run: npm ci
+
+      - id: lint
+        name: Lint code
+        run: npm run lint:check
+
+      - id: format
+        name: Format code
+        run: npm run format:check
+
+      - id: check-deps
+        name: Check for unused scripts and dependencies
+        run: npm run knip
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@ -2,100 +2,71 @@ name: Release

 on:
  push:
-  pull_request:
-  workflow_dispatch:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+  pull-requests: write

 jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@v3
-
-      - id: setup-node
-        name: Setup Node.JS
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'yarn'
-
-      - id: cache
-        name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: yarn-deps-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            yarn-deps-${{ hashFiles('yarn.lock') }}
-
-      - id: install-deps
-        name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - id: lint
-        name: Lint code
-        run: yarn run eslint --fix --ext .ts,.js,.svelte src/components
-
  release:
    name: Release
    runs-on: ubuntu-latest
-    permissions:
-      contents: write
    env:
      NODE_OPTIONS: '--max_old_space_size=4096'
-    # Restricts release to:
-    #   1) pushes of release tags
-    #   2) the default branch
-    #   3) the base repository
-    if: |
-      github.event_name == 'push' && startsWith(github.ref, 'refs/tags') &&
-      endsWith(github.event.base_ref, github.event.repository.default_branch) &&
-      github.repository == 'reuters-graphics/graphics-components'
+    if: github.repository == 'reuters-graphics/graphics-components'
    steps:
      - id: checkout
        name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0
-          ref: ${{ github.event.repository.default_branch }}

      - id: setup-node
        name: Setup Node.JS
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org
-          scope: '@reuters-graphics'
+          node-version: 20
+          cache: npm

      - id: install-deps
        name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci

-      - id: build-docs
-        name: Build docs
-        run: npm run build:docs
+      - id: lint
+        name: Lint code
+        run: npm run lint:check

      - id: build-package
        name: Build package
        run: npm run build:package

-      - id: version
-        name: Version
-        run: npm version ${{ github.ref_name }} --no-git-tag-version
-
-      - id: publish
-        name: Publish
-        run: npm publish --access public
+      - id: changesets
+        name: Create Release Pull Request or Publish to npm
+        uses: changesets/action@v1
+        with:
+          version: npm run changeset:version
+          publish: npm run changeset:publish
        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

-      - id: commit
-        name: Commit
+      - id: build-docs
+        name: Build docs
+        if: steps.changesets.outputs.published == 'true'
+        run: npm run build:docs
+
+      - id: commit_and_push
+        name: Commit and push docs
+        if: steps.changesets.outputs.published == 'true'
        run: |
-          git config --global user.name github-actions
-          git config --global user.email github-actions@github.com
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git add .
-          git commit -m "published ${{ github.ref_name }}"
+          git commit -m "docs"
          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.markdownlint.jsonc
+++ b/.markdownlint.jsonc
@ -1,5 +0,0 @@
-{
-  "MD013": false,
-  "MD033": false,
-  "MD041": false
-}
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,4 @@
+docs
+dist
+node_modules
+!src/docs/
--- a/.prettierrc
+++ b/.prettierrc
@ -1,15 +0,0 @@
-{
-  "svelteStrictMode": true,
-  "arrowParens": "always",
-  "bracketSpacing": true,
-  "embeddedLanguageFormatting": "auto",
-  "endOfLine": "lf",
-  "htmlWhitespaceSensitivity": "css",
-  "printWidth": 80,
-  "proseWrap": "preserve",
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false
-}
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,10 @@
+import { svelte as svelteConfig } from '@reuters-graphics/yaks-prettier';
+
+/**
+ * @type {import("prettier").Config}
+ */
+const config = {
+  ...svelteConfig,
+};
+
+export default config;
--- a/.storybook/Theme.ts
+++ b/.storybook/Theme.ts
@ -4,6 +4,7 @@ export default create({
  base: 'light',
  brandTitle: 'Reuters Graphics components',
  brandUrl: 'https://reuters-graphics.github.io/graphics-components/',
-  brandImage: 'https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg',
+  brandImage:
+    'https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg',
  brandTarget: '_self',
 });
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@ -4,14 +4,13 @@ import remarkGfm from 'remark-gfm';
 const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
+    '@storybook/addon-svelte-csf',
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
-        csfPluginOptions: null,
-        jsxOptions: {},
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [remarkGfm],
@ -25,12 +24,12 @@ const config: StorybookConfig = {
    '@storybook/addon-measure',
    '@storybook/addon-outline',
    '@storybook/addon-interactions',
-    '@storybook/addon-svelte-csf',
+    '@chromatic-com/storybook',
  ],
  framework: '@storybook/svelte-vite',
-  core: { disableTelemetry: true },
-  docs: {
-    autodocs: true,
+  core: {
+    disableTelemetry: true,
  },
+  docs: {},
 };
 export default config;
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@ -1,7 +1,13 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter+Tight:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+/>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter+Tight:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap"
+  rel="stylesheet"
+/>
 <script>
  window.global = window;
 </script>
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@ -12,7 +12,7 @@ SyntaxHighlighter.registerLanguage('svelte', svelte);
 SyntaxHighlighter.registerLanguage('markdown', markdown);

 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
  viewMode: 'docs',
  previewTabs: { 'storybook/docs/panel': { index: -1 } },
  controls: {
@ -53,23 +53,19 @@ export const parameters = {
        'Styles',
        [
          'Intro',
-          'Colours', [
-            'Intro',
-            'Primary',
-            'Thematic',
-            '*',
-          ],
-          'Tokens', [
-            'Intro',
-            'Typography',
-            '*',
-          ],
+          'Colours',
+          ['Intro', 'Primary', 'Thematic', '*'],
+          'Tokens',
+          ['Intro', 'Typography', '*'],
        ],
        'Actions',
        ['Intro', '*'],
        'Contributing',
        [
-          'Quickstart', 'Component Basics', '*', 'Writing Stories',
+          'Quickstart',
+          'Component Basics',
+          '*',
+          'Writing Stories',
          'Recipes: Basic story',
          'Recipes: Story with custom docs',
          'Recipes: Story with custom controls',
@ -79,7 +75,8 @@ export const parameters = {
        ],
      ],
    },
-  }
+  },
 };

 export const decorators = [() => Wrapper];
+export const tags = ['autodocs'];
--- a/.storybook/svelte-highlighting.d.ts
+++ b/.storybook/svelte-highlighting.d.ts
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 declare function svelte(Prism: any): void;
 declare namespace svelte {
  let displayName: string;
--- a/.storybook/svelte-highlighting.js
+++ b/.storybook/svelte-highlighting.js
@ -1,5 +1,5 @@
-svelte.displayName = 'svelte'
-svelte.aliases = []
+svelte.displayName = 'svelte';
+svelte.aliases = [];

 export default function svelte(Prism) {
  const blocks = '(if|else if|await|then|catch|each|html|debug)';
@ -48,7 +48,8 @@ export default function svelte(Prism) {
      },
    },
    tag: {
-      pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?:"[^"]*"|'[^']*'|{[\s\S]+?}(?=[\s/>])))|(?=[\s/>])))+)?\s*\/?>/i,
+      pattern:
+        /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?:"[^"]*"|'[^']*'|{[\s\S]+?}(?=[\s/>])))|(?=[\s/>])))+)?\s*\/?>/i,
      greedy: true,
      inside: {
        tag: {
@ -59,7 +60,8 @@ export default function svelte(Prism) {
          },
        },
        'language-javascript': {
-          pattern: /\{(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/,
+          pattern:
+            /\{(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/,
          inside: Prism.languages['javascript'],
        },
        'attr-value': {
@ -97,7 +99,7 @@ export default function svelte(Prism) {
  Prism.languages.svelte['tag'].inside['attr-value'].inside['entity'] =
    Prism.languages.svelte['entity'];

-  Prism.hooks.add('wrap', env => {
+  Prism.hooks.add('wrap', (env) => {
    if (env.type === 'entity') {
      env.attributes['title'] = env.content.replace(/&amp;/, '&');
    }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "unifiedjs.vscode-mdx",
-    "somewhatstationery.some-sass"
-  ]
+  "recommendations": ["unifiedjs.vscode-mdx", "somewhatstationery.some-sass"]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,15 +1,10 @@
 {
-  "i18n-ally.localesPaths": ["locales"],
-  "i18n-ally.keystyle": "nested",
-  "eslint.validate": ["javascript", "svelte", "jsx"],
+  "eslint.validate": ["javascript", "javascriptreact", "svelte", "jsx"],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
-  "emmet.excludeLanguages": [
-    "markdown",
-    "scss"
-  ],
+  "emmet.excludeLanguages": ["markdown", "scss"],
  "files.associations": {
    "*.svx": "mdx"
  },
--- a/.vscode/svelte.styles.code-snippets
+++ b/.vscode/svelte.styles.code-snippets
@ -2,11 +2,7 @@
  "Svelte SCSS style": {
    "scope": "svelte",
    "prefix": "scss",
-		"body": [
-			"<style lang=\"scss\">",
-			"$1",
-			"</style>"
-		],
-		"description": "Add a Svelte SCSS style tag"
-	}
+    "body": ["<style lang=\"scss\">", "$1", "</style>"],
+    "description": "Add a Svelte SCSS style tag",
+  },
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -47,4 +47,4 @@ An editor will approve your PR after addressing any issues they see. Once an edi

 ### ✉️ Publishing to the team

-For now, only editors should publish new versions of the library to npm. We'll follow [semantic versioning](https://semver.org/) conventions. Most MINOR and all MAJOR version changes should be identified ahead of time during PR review.
+Publishing is handled via [changesets](https://github.com/changesets/changesets) and should follow [semantic versioning](https://semver.org/) conventions. Most MINOR and all MAJOR version changes should be identified ahead of time during PR review.
--- a/bin/buildPackage/index.js
+++ b/bin/buildPackage/index.js
@ -1,94 +0,0 @@
-import { DIST, LIB, PACKAGE, TYPES } from './locations.js';
-
-import { createRequire } from 'module';
-import { emitDts } from 'svelte2tsx';
-import fs from 'fs-extra';
-import glob from 'tiny-glob';
-import path from 'path';
-import picomatch from 'picomatch';
-import processOther from './process/other.js';
-import processSvelte from './process/svelte.js';
-import processTypescript from './process/typescript.js';
-import { rimraf } from 'rimraf';
-
-const require = createRequire(import.meta.url);
-
-const excludePatterns = [
-  '**/stories/**/*',
-  '**/docs/**/*',
-  '**/statics/**/*',
-  '**/*.exclude.*',
-  '**/*.stories.svelte',
-  '**/*.stories.svelte.d.ts',
-];
-
-const excludedTypeDefs = [
-  '**/stories/**/*',
-  '**/docs/**/*',
-  '**/*.stories.svelte.d.ts',
-];
-
-
-const prettifyImport = (filename) => {
-  return filename
-    // strip index.js
-    .replace(/\/index\.js$|(\/[^/]+)\.js$/, '$1')
-    // normalize SCSS partials
-    .replace(/\/_?([^/]+)\.scss$/, '/$1');
-};
-
-/**
- * This is a basic port of sveltekit's own packaging method:
- * https://github.com/sveltejs/kit/tree/master/packages/kit/src/packaging
- */
-const build = async () => {
-  console.log('📦 Building your package');
-  if (fs.existsSync(DIST)) rimraf.sync(DIST);
-
-  // Extract types
-  await emitDts({
-		libRoot: LIB,
-		svelteShimsPath: require.resolve('svelte2tsx/svelte-shims.d.ts'),
-		declarationDir: TYPES,
-	});
-
-  // Cleanup unwanted types
-  fs.rmSync(path.join(TYPES, 'docs'), { recursive: true, force: true });
-  const types = await glob('**/*', { cwd: TYPES, filesOnly: true });
-  for (const t of types) {
-    if(picomatch.isMatch(t, excludedTypeDefs)) fs.unlinkSync(path.join(TYPES, t));
-  }
-
-  const pkgExports = {
-    './package.json': './package.json'
-  };
-
-  const files = await glob('**/*.{js,json,ts,svelte,css,scss}', { cwd: LIB, filesOnly: true });
-  for (const file of files) {
-    if(picomatch.isMatch(file, excludePatterns)) continue;
-    if (file.endsWith('.svelte')) {
-      await processSvelte(file);
-    } else if(file.endsWith('.ts') && !file.endsWith('.d.ts')) {
-      await processTypescript(file);
-    } else {
-      await processOther(file);
-    }
-    if (file === 'index.js') continue; // Always add root index last to exports...
-    pkgExports[`./${prettifyImport(file)}`] = `./dist/${file}`;
-  }
-  pkgExports['.'] = {
-    types: './dist/@types/index.d.ts',
-    svelte: './dist/index.js',
-    default: './dist/index.js',
-  };
-  const pkg = fs.readJSONSync(PACKAGE);
-  pkg.type = 'module';
-  pkg.types = './dist/@types/index.d.ts',
-  pkg.files = ['dist'];
-  pkg.private = false;
-  pkg.exports = pkgExports;
-  pkg.svelte = './dist/index.js';
-  fs.writeFileSync(PACKAGE, JSON.stringify(pkg, null, 2));
-}
-
-build();
--- a/bin/buildPackage/locations.js
+++ b/bin/buildPackage/locations.js
@ -1,8 +0,0 @@
-import path from 'path';
-
-const __dirname = new URL('.', import.meta.url).pathname;
-export const ROOT = path.resolve(__dirname, '../../');
-export const PACKAGE = path.join(ROOT, 'package.json');
-export const LIB = path.join(ROOT, 'src');
-export const DIST = path.join(ROOT, 'dist');
-export const TYPES = path.join(DIST, '@types');
--- a/bin/buildPackage/process/other.js
+++ b/bin/buildPackage/process/other.js
@ -1,11 +0,0 @@
-import { DIST, LIB } from './../locations.js';
-
-import fs from 'fs-extra';
-import path from 'path';
-
-export default async (file) => {
-  const filename = path.join(LIB, file);
-  const writePath = path.join(DIST, file);
-  fs.ensureDirSync(path.dirname(writePath));
-  fs.copyFileSync(filename, writePath);
-}
--- a/bin/buildPackage/process/svelte.js
+++ b/bin/buildPackage/process/svelte.js
@ -1,20 +0,0 @@
-import { DIST, LIB } from './../locations.js';
-
-import fs from 'fs-extra';
-import path from 'path';
-import { preprocess as svelte } from 'svelte/compiler';
-import { sveltePreprocess } from '../../preprocess/index.js';
-
-const stripLangTags = (source) => 
-  source
-    .replace(/(<!--[^]*?-->)|(<script[^>]*?)\s(?:type|lang)=(["']).*?\3/g, '$1$2')
-    .replace(/(<!--[^]*?-->)|(<style[^>]*?)\s(?:type|lang)=(["']).*?\3/g, '$1$2');
-
-export default async (file) => {
-  const filename = path.join(LIB, file);
-  let source = fs.readFileSync(filename, 'utf8');
-  source = (await svelte(source, sveltePreprocess, { filename })).code
-  const writePath = path.join(DIST, file);
-  fs.ensureDirSync(path.dirname(writePath));
-  fs.writeFileSync(writePath, stripLangTags(source));
-}
--- a/bin/buildPackage/process/typescript.js
+++ b/bin/buildPackage/process/typescript.js
@ -1,22 +0,0 @@
-import { DIST, LIB, ROOT } from './../locations.js';
-
-import fs from 'fs-extra';
-import path from 'path';
-import ts from 'typescript';
-
-async function transpileTypeScript(filename, source) {
-  const { compilerOptions } = fs.readJSONSync(path.join(ROOT, 'tsconfig.json'));
-	return ts.transpileModule(source, {
-		compilerOptions,
-		fileName: filename
-	}).outputText;
-}
-
-export default async (file) => {
-  const filename = path.join(LIB, file);
-  let source = fs.readFileSync(filename, 'utf8');
-  source = await transpileTypeScript(filename, source);
-  const writePath = path.join(DIST, file).replace(/\.ts$/, '.js');
-  fs.ensureDirSync(path.dirname(writePath));
-  fs.writeFileSync(writePath, source);
-}
--- a/bin/css-to-js/index.js
+++ b/bin/css-to-js/index.js
@ -58,7 +58,11 @@ function _objectSpread2(target) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        Object.defineProperty(
+          target,
+          key,
+          Object.getOwnPropertyDescriptor(source, key)
+        );
      });
    }
  }
@ -67,7 +71,9 @@ function _objectSpread2(target) {
 }

 function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+  return (
+    _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest()
+  );
 }

 function _arrayWithHoles(arr) {
@ -75,7 +81,12 @@ function _arrayWithHoles(arr) {
 }

 function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === '[object Arguments]')) {
+  if (
+    !(
+      Symbol.iterator in Object(arr) ||
+      Object.prototype.toString.call(arr) === '[object Arguments]'
+    )
+  ) {
    return;
  }

@ -85,7 +96,11 @@ function _iterableToArrayLimit(arr, i) {
  let _e;

  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (
+      var _i = arr[Symbol.iterator](), _s;
+      !(_n = (_s = _i.next()).done);
+      _n = true
+    ) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
@ -185,7 +200,11 @@ const keyframes = function keyframes(rule) {
  const keyFrameObj = {};
  rule.keyframes.forEach(function (keyframe) {
    keyframe.declarations.forEach(function (decl) {
-      keyFrameObj[keyframe.values[0]] = _objectSpread2({}, keyFrameObj[keyframe.values[0]], _defineProperty({}, decl.property, decl.value));
+      keyFrameObj[keyframe.values[0]] = _objectSpread2(
+        {},
+        keyFrameObj[keyframe.values[0]],
+        _defineProperty({}, decl.property, decl.value)
+      );
    });
  });
  let name = camelize('keyframes-'.concat(rule.name));
@ -210,11 +229,18 @@ const standard = function standard(rule, result) {
    if (pseudoSelectorIndex !== -1) {
      // Find end of pseudo selector
      let endPseudoSelectorIndex = selector.indexOf(' ', pseudoSelectorIndex);
-      if (endPseudoSelectorIndex === -1) endPseudoSelectorIndex = selector.length; // Split selector
+      if (endPseudoSelectorIndex === -1)
+        endPseudoSelectorIndex = selector.length; // Split selector

      const primarySelector = selector.slice(0, pseudoSelectorIndex);
-      const pseudoSelector = selector.slice(pseudoSelectorIndex, endPseudoSelectorIndex);
-      const secondarySelector = selector.slice(endPseudoSelectorIndex, selector.length);
+      const pseudoSelector = selector.slice(
+        pseudoSelectorIndex,
+        endPseudoSelectorIndex
+      );
+      const secondarySelector = selector.slice(
+        endPseudoSelectorIndex,
+        selector.length
+      );
      const pseudoObj = {};
      pseudoObj['&'.concat(pseudoSelector).concat(secondarySelector)] = obj;
      name = sanitize(primarySelector.trim());
@ -228,7 +254,8 @@ const standard = function standard(rule, result) {
 };

 const convertRules = function convertRules(rules) {
-  const res = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const res =
+    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let result = res;
  rules.forEach(function (rule) {
    if (rule.type === 'media') {
@ -275,7 +302,8 @@ const reverseMediaQueries = function reverseMediaQueries(inputData) {
  const exportObject = {};

  const moveMediaInsideClass = function moveMediaInsideClass(object) {
-    const media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const media =
+      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    Object.entries(object).forEach(function (_ref) {
      const _ref2 = _slicedToArray(_ref, 2);
      const key = _ref2[0];
@ -288,7 +316,12 @@ const reverseMediaQueries = function reverseMediaQueries(inputData) {
        tempObj[media] = value;

        if (exportObject[key]) {
-          exportObject[key] = _objectSpread2({}, exportObject[key], {}, tempObj);
+          exportObject[key] = _objectSpread2(
+            {},
+            exportObject[key],
+            {},
+            tempObj
+          );
        } else {
          exportObject[key] = tempObj;
        }
@ -317,7 +350,8 @@ const convertStringToJson = function convertStringToJson(input, mediaReverse) {
 };

 const convert = function convert(input) {
-  const config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const config =
+    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const outputType = config.outputType;
  const outputPath = config.outputPath;
  let mediaReverse = config.mediaReverse;
--- a/bin/newComponent/index.cjs
+++ b/bin/newComponent/index.cjs
@ -33,12 +33,17 @@ const makeNewComponent = async() => {
  for (const file of files) {
    const content = fs.readFileSync(path.join(TEMPLATE, file), 'utf8');
    const writeContent = content.replace(/YourComponent/g, componentName);
-    const writePath = path.join(LIB, file.replace(/YourComponent/g, componentName));
+    const writePath = path.join(
+      LIB,
+      file.replace(/YourComponent/g, componentName)
+    );
    fs.ensureDirSync(path.dirname(writePath));
    fs.writeFileSync(writePath, writeContent);
  }

-  console.log(`${green('✔')} ${bold('Your component is ready at:')}\n📁 ${cyan(`src/component/${bold(componentName)}/${componentName}.svelte`)}`);
+  console.log(
+    `${green('✔')} ${bold('Your component is ready at:')}\n📁 ${cyan(`src/components/${bold(componentName)}/${componentName}.svelte`)}`
+  );
 };

 makeNewComponent();
--- a/bin/newComponent/template/YourComponent/YourComponent.stories.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.stories.svelte
@ -2,7 +2,7 @@
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import YourComponent from './YourComponent.svelte';
@ -10,7 +10,7 @@
  import { withComponentDocs } from '$docs/utils/withParams.js';

  // 🖼️ You can import images you need in stories directly in code!
-  // @ts-ignore
+  // @ts-ignore img
  import SharkImg from './stories/shark.jpg';

  const metaProps = {
@ -26,8 +26,8 @@
 </script>

 <Meta
-  title='Components/YourComponent'
-  component={YourComponent}
+  title="Components/YourComponent"
+  component="{YourComponent}"
  {...metaProps}
 />

@ -40,6 +40,6 @@
  args="{{
    width: 'normal',
    src: SharkImg,
-    altText: 'Duh dum! It\'s a shark!!',
+    altText: "Duh dum! It's a shark!!",
  }}"
 />
--- a/bin/newComponent/template/YourComponent/YourComponent.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.svelte
@ -34,9 +34,9 @@

 <Block {width} {id} cls="photo {cls}">
  <div
-    style:background-image={`url(${src})`}
-    style:height={`${height}px`}
-  />
+    style:background-image="{`url(${src})`}"
+    style:height="{`${height}px`}"
+  ></div>
  <p class="visually-hidden">{altText}</p>
 </Block>

--- a/bin/preprocess/index.js
+++ b/bin/preprocess/index.js
@ -1,24 +0,0 @@
-import autoprefixer from 'autoprefixer';
-import preprocess from 'svelte-preprocess';
-
-export const scss = {
-  includePaths: ['src/', 'node_modules/bootstrap/scss/'],
-  importer: [
-    (url) => {
-      if (/^\$lib/.test(url)) { return { file: `src/${url.replace('$lib', '')}` }; }
-      // Redirect tilde-prefixed imports to node_modules
-      if (/^~/.test(url)) { return { file: `node_modules/${url.replace('~', '')}` }; }
-      return null;
-    },
-  ],
-  quietDeps: true,
-};
-
-export const sveltePreprocess = preprocess({
-  preserve: ['ld+json'],
-  typescript: true,
-  scss,
-  postcss: {
-    plugins: [autoprefixer],
-  },
-});
--- a/docs/assets/chunk-S4VUQJ4A-e77a1bf8.js
+++ b/docs/assets/chunk-S4VUQJ4A-e77a1bf8.js
@ -3,7 +3,7 @@ import{_ as Gt}from"./iframe-3532bc3f.js";import{g as to,R as l,r as E,m as En,n

 `)!==-1||h&&g;g=b;const x=s._,C=s.o;let w;s.o=!0,b?(s._=!1,w=v.replace(Nr,`

-`)):(s._=!0,w=v.replace(Nr,""));const _=c(w,s);return s._=x,s.o=C,_}),m:r,g:u}},h:(i,c,s)=>e(i.m?"ol":"ul",{key:s.k,start:i.g},i.p.map(function(u,p){return e("li",{key:p},c(u,s))}))}}const zd=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,Gd=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,ua=[qn,Yn,Jn,Zn,Xn,Qn,ea,la,ca,ia,da],Wd=[...ua,/^[^\n]+(?:  \n|\n{2,})/,Nt,Bt];function Vd(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function Kd(e){return Td.test(e)?"right":$d.test(e)?"center":Od.test(e)?"left":null}function Fr(e,t,r){const n=r.v;r.v=!0;const a=t(e.trim(),r);r.v=n;let o=[[]];return a.forEach(function(i,c){i.type==="tableSeparator"?c!==0&&c!==a.length-1&&o.push([]):(i.type!=="text"||a[c+1]!=null&&a[c+1].type!=="tableSeparator"||(i.$=i.$.replace(Ad,"")),o[o.length-1].push(i))}),o}function qd(e,t,r){r._=!0;const n=Fr(e[1],t,r),a=e[2].replace(kd,"").split("|").map(Kd),o=function(i,c,s){return i.trim().split(`
+`)):(s._=!0,w=v.replace(Nr,""));const _=c(w,s);return s._=x,s.o=C,_}),m:r,g:u}},h:(i,c,s)=>e(i.m?"ol":"ul",{key:s.k,start:i.g},i.p.map(function(u,p){return e("li",{key:p},c(u,s))}))}}const zd=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,Gd=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,ua=[qn,Yn,Jn,Zn,Xn,Qn,ea,la,ca,ia,da],Wd=[...ua,/^[^\n]+(?: {2}\n|\n{2,})/,Nt,Bt];function Vd(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function Kd(e){return Td.test(e)?"right":$d.test(e)?"center":Od.test(e)?"left":null}function Fr(e,t,r){const n=r.v;r.v=!0;const a=t(e.trim(),r);r.v=n;let o=[[]];return a.forEach(function(i,c){i.type==="tableSeparator"?c!==0&&c!==a.length-1&&o.push([]):(i.type!=="text"||a[c+1]!=null&&a[c+1].type!=="tableSeparator"||(i.$=i.$.replace(Ad,"")),o[o.length-1].push(i))}),o}function qd(e,t,r){r._=!0;const n=Fr(e[1],t,r),a=e[2].replace(kd,"").split("|").map(Kd),o=function(i,c,s){return i.trim().split(`
 `).map(function(u){return Fr(u,c,s)})}(e[3],t,r);return r._=!1,{S:a,A:o,L:n,type:"table"}}function Dr(e,t){return e.S[t]==null?{}:{textAlign:e.S[t]}}function le(e){return function(t,r){return r._?e.exec(t):null}}function ie(e){return function(t,r){return r._||r.u?e.exec(t):null}}function ae(e){return function(t,r){return r._||r.u?null:e.exec(t)}}function Se(e){return function(t){return e.exec(t)}}function Yd(e,t,r){if(t._||t.u||r&&!r.endsWith(`
 `))return null;let n="";e.split(`
 `).every(o=>!ua.some(i=>i.test(o))&&(n+=o+`
--- a/docs/assets/flowchart-elk-definition-6f4e6aa0-bf10c999.js
+++ b/docs/assets/flowchart-elk-definition-6f4e6aa0-bf10c999.js
--- a/docs/assets/iframe-3532bc3f.js
+++ b/docs/assets/iframe-3532bc3f.js
--- a/docs/assets/mindmap-definition-0ab67801-d22aa296.js
+++ b/docs/assets/mindmap-definition-0ab67801-d22aa296.js
--- a/docs/sb-addons/controls-3/manager-bundle.js
+++ b/docs/sb-addons/controls-3/manager-bundle.js
@ -9,7 +9,7 @@ var jy=Object.create;var ya=Object.defineProperty;var qy=Object.getOwnPropertyDe

 `)!==-1||F&&b;b=B;let I=s._,L=s.o,w;s.o=!0,B?(s._=!1,w=x.replace(Zd,`

-`)):(s._=!0,w=x.replace(Zd,""));let k=u(w,s);return s._=I,s.o=L,k}),m:r,g:p}},h:(i,u,s)=>e(i.m?"ol":"ul",{key:s.k,start:i.g},i.p.map(function(p,y){return e("li",{key:y},u(p,s))}))}}var lS=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,cS=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,vp=[ap,op,ip,up,sp,lp,cp,gp,bp,yp,Ap],dS=[...vp,/^[^\n]+(?:  \n|\n{2,})/,Ho,zo];function pS(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function fS(e){return XF.test(e)?"right":KF.test(e)?"center":YF.test(e)?"left":null}function tp(e,t,r){let n=r.v;r.v=!0;let a=t(e.trim(),r);r.v=n;let o=[[]];return a.forEach(function(i,u){i.type==="tableSeparator"?u!==0&&u!==a.length-1&&o.push([]):(i.type!=="text"||a[u+1]!=null&&a[u+1].type!=="tableSeparator"||(i.$=i.$.replace(VF,"")),o[o.length-1].push(i))}),o}function hS(e,t,r){r._=!0;let n=tp(e[1],t,r),a=e[2].replace(GF,"").split("|").map(fS),o=function(i,u,s){return i.trim().split(`
+`)):(s._=!0,w=x.replace(Zd,""));let k=u(w,s);return s._=I,s.o=L,k}),m:r,g:p}},h:(i,u,s)=>e(i.m?"ol":"ul",{key:s.k,start:i.g},i.p.map(function(p,y){return e("li",{key:y},u(p,s))}))}}var lS=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,cS=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,vp=[ap,op,ip,up,sp,lp,cp,gp,bp,yp,Ap],dS=[...vp,/^[^\n]+(?: {2}\n|\n{2,})/,Ho,zo];function pS(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function fS(e){return XF.test(e)?"right":KF.test(e)?"center":YF.test(e)?"left":null}function tp(e,t,r){let n=r.v;r.v=!0;let a=t(e.trim(),r);r.v=n;let o=[[]];return a.forEach(function(i,u){i.type==="tableSeparator"?u!==0&&u!==a.length-1&&o.push([]):(i.type!=="text"||a[u+1]!=null&&a[u+1].type!=="tableSeparator"||(i.$=i.$.replace(VF,"")),o[o.length-1].push(i))}),o}function hS(e,t,r){r._=!0;let n=tp(e[1],t,r),a=e[2].replace(GF,"").split("|").map(fS),o=function(i,u,s){return i.trim().split(`
 `).map(function(p){return tp(p,u,s)})}(e[3],t,r);return r._=!1,{S:a,A:o,L:n,type:"table"}}function rp(e,t){return e.S[t]==null?{}:{textAlign:e.S[t]}}function ct(e){return function(t,r){return r._?e.exec(t):null}}function dt(e){return function(t,r){return r._||r.u?e.exec(t):null}}function nt(e){return function(t,r){return r._||r.u?null:e.exec(t)}}function _r(e){return function(t){return e.exec(t)}}function mS(e,t,r){if(t._||t.u||r&&!r.endsWith(`
 `))return null;let n="";e.split(`
 `).every(o=>!vp.some(i=>i.test(o))&&(n+=o+`
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,50 @@
+import { svelte } from '@reuters-graphics/yaks-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import * as mdx from 'eslint-plugin-mdx';
+
+/**
+ * @type {import("eslint").Linter.Config[]}
+ */
+export default [
+  {
+    files: ['src/**/*.{js,ts,svelte,jsx,tsx,mdx}', '.storybook/**/*'],
+  },
+  {
+    ignores: [
+      'node_modules/',
+      'docs/',
+      'dist/',
+      '.storybook/svelte-highlighting.js',
+      'bin/css-to-js/',
+      'bin/newComponent/',
+      '.svelte-kit/',
+    ],
+  },
+  ...svelte,
+  reactPlugin.configs.flat.recommended,
+  {
+    settings: { react: { version: '18.2' } },
+    rules: {
+      'react/prop-types': [
+        'error',
+        {
+          skipUndeclared: true,
+        },
+      ],
+    },
+  },
+  {
+    ...mdx.flat,
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      'no-undef': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+];
--- a/knip.config.ts
+++ b/knip.config.ts
@ -0,0 +1,20 @@
+import type { KnipConfig } from 'knip';
+
+const config: KnipConfig = {
+  entry: ['src/index.js', 'src/**/*.stories.{svelte,mdx}', 'src/docs/**'],
+  project: [
+    'src/**/*.{mdx,js,jsx,ts,svelte}',
+    'bin/**/*.{js,cjs}',
+    '.storybook/**/*.{js,ts,svelte}',
+  ],
+  ignore: ['**/*.d.ts'],
+  ignoreDependencies: [
+    /@types\/.*/,
+    /@storybook\/.*/,
+    'chromatic',
+    'prop-types',
+    'postcss',
+  ],
+};
+
+export default config;
--- a/lefthook.yml
+++ b/lefthook.yml
@ -1,8 +0,0 @@
-pre-commit:
-  commands:
-    eslint:
-      glob: 'src/**/*.{js,svelte}'
-      run: npx eslint --cache --fix {staged_files} && git add .
-    prettier:
-      glob: 'src/**/*.{js,scss,md,svelte}'
-      run: npx prettier --write {staged_files} && git add .
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -15,367 +15,123 @@
  "scripts": {
    "start": "storybook dev -p 3000",
    "new": "node ./bin/newComponent/index.cjs",
-    "lint": "npx eslint --fix --ext .ts,.js,.svelte src",
-    "build:package": "node ./bin/buildPackage/index.js",
+    "lint": "eslint --fix",
+    "lint:check": "eslint",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "build:package": "rimraf ./dist && svelte-package -i ./src && publint",
    "build:chromatic": "storybook build -o docs",
    "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
    "build": "npm-run-all build:package build:docs",
-    "postversion": "git push origin && git push origin --tags"
+    "changeset:version": "changeset version",
+    "changeset:publish": "git add --all && changeset publish",
+    "knip": "knip"
  },
  "license": "MIT",
-  "types": "./dist/@types/index.d.ts",
  "files": [
    "dist"
  ],
  "engines": {
-    "node": ">=16.19"
+    "node": ">=18.20"
+  },
+  "peerDependencies": {
+    "svelte": ">=4"
  },
  "devDependencies": {
-    "@americanexpress/css-to-js": "^1.0.1",
-    "@babel/core": "^7.21.4",
-    "@babel/eslint-parser": "^7.21.3",
-    "@babel/eslint-plugin": "^7.19.1",
-    "@babel/preset-env": "^7.21.4",
-    "@evilmartians/lefthook": "^1.3.10",
-    "@reuters-graphics/eslint-config": "^0.0.2",
-    "@storybook/addon-actions": "^7.4.2",
-    "@storybook/addon-docs": "^7.4.2",
-    "@storybook/addon-essentials": "^7.4.2",
-    "@storybook/addon-interactions": "^7.4.2",
-    "@storybook/addon-links": "^7.4.2",
-    "@storybook/addon-mdx-gfm": "^7.4.2",
-    "@storybook/addon-svelte-csf": "^4.0.7",
-    "@storybook/blocks": "^7.4.2",
-    "@storybook/builder-vite": "^7.4.2",
-    "@storybook/manager-api": "^7.4.2",
+    "@changesets/cli": "^2.27.7",
+    "@chromatic-com/storybook": "^1.7.0",
+    "@reuters-graphics/yaks-eslint": "^0.0.6",
+    "@reuters-graphics/yaks-prettier": "^0.0.4",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-docs": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/addon-svelte-csf": "^4.1.5",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/builder-vite": "^8.2.9",
+    "@storybook/components": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
    "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/svelte": "^7.4.2",
-    "@storybook/svelte-vite": "^7.4.2",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.4.2",
-    "@sveltejs/vite-plugin-svelte": "^2.4.1",
-    "@tsconfig/svelte": "^4.0.1",
+    "@storybook/svelte": "^8.2.9",
+    "@storybook/svelte-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
+    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@types/css": "^0.0.37",
+    "@types/eslint": "^9.6.0",
+    "@types/fs-extra": "^11.0.4",
    "@types/google-publisher-tag": "^1.20240219.0",
    "@types/gtag.js": "^0.0.12",
+    "@types/lodash-es": "^4.17.12",
    "@types/mdx": "^2.0.5",
+    "@types/node": "^22.4.2",
+    "@types/prompts": "^2.4.9",
    "@types/proper-url-join": "^2.1.1",
+    "@types/pym.js": "^1.3.2",
    "@types/react-syntax-highlighter": "^15.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "auto": "^11.0.0",
-    "autoprefixer": "^10.4.14",
-    "babel-loader": "^9.1.2",
    "change-case": "^4.1.2",
    "chromatic": "^7.1.0",
-    "colord": "^2.9.3",
+    "css": "^3.0.0",
    "css-color-converter": "^2.0.0",
    "deep-object-diff": "^1.1.9",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-jsx": "^11.0.0",
-    "eslint-config-standard-react": "^13.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.35.0",
    "fs-extra": "^11.1.1",
    "kleur": "^4.1.5",
-    "mermaid": "^10.3.0",
+    "knip": "^5.27.2",
+    "mermaid": "^10.9.1",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.24",
-    "postcss-load-config": "^4.0.1",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
    "prompts": "^2.4.2",
    "prop-types": "^15.8.1",
+    "publint": "^0.2.10",
    "react": "^18.2.0",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.2.0",
    "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
    "rimraf": "^5.0.0",
-    "sass": "^1.65.1",
-    "storybook": "^7.4.2",
-    "svelte": "^4.2.8",
-    "svelte-loader": "^3.1.9",
-    "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.6.27",
+    "sass": "^1.77.8",
+    "storybook": "^8.2.9",
+    "svelte": "^4.2.18",
+    "svelte-loader": "^3.2.3",
    "tiny-glob": "^0.2.9",
-    "typescript": "^5.3.3",
-    "vite": "^4.4.9"
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2"
  },
  "dependencies": {
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@splidejs/svelte-splide": "^0.2.9",
    "@sveltejs/svelte-scroller": "^2.0.7",
-    "classnames": "^2.3.1",
    "dayjs": "^1.11.3",
-    "journalize": "^2.5.1",
+    "journalize": "^2.6.0",
    "lodash-es": "^4.17.21",
-    "lottie-web": "^5.7.13",
    "marked": "^4.0.8",
-    "normalize.css": "^8.0.1",
    "proper-url-join": "^2.1.1",
    "pym.js": "^1.3.2",
-    "slugify": "^1.6.5",
-    "standard": "^17.1.0",
+    "slugify": "^1.6.6",
    "svelte-fa": "^2.4.0",
    "svelte-intersection-observer": "^0.10.0",
-    "svelte-search": "^2.0.1",
-    "ua-parser-js": "^0.7.27"
+    "svelte-search": "^2.0.1"
  },
  "exports": {
-    "./package.json": "./package.json",
-    "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
-    "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
-    "./components/@types/global.ts": "./dist/components/@types/global.ts",
-    "./components/AdSlot/@types/ads.ts": "./dist/components/AdSlot/@types/ads.ts",
-    "./components/AdSlot/AdScripts.svelte": "./dist/components/AdSlot/AdScripts.svelte",
-    "./components/AdSlot/AdSlot.svelte": "./dist/components/AdSlot/AdSlot.svelte",
-    "./components/AdSlot/InlineAd.svelte": "./dist/components/AdSlot/InlineAd.svelte",
-    "./components/AdSlot/LeaderboardAd.svelte": "./dist/components/AdSlot/LeaderboardAd.svelte",
-    "./components/AdSlot/OneTrust.svelte": "./dist/components/AdSlot/OneTrust.svelte",
-    "./components/AdSlot/ResponsiveAd.svelte": "./dist/components/AdSlot/ResponsiveAd.svelte",
-    "./components/AdSlot/SponsorshipAd.svelte": "./dist/components/AdSlot/SponsorshipAd.svelte",
-    "./components/AdSlot/adScripts/bootstrap.ts": "./dist/components/AdSlot/adScripts/bootstrap.ts",
-    "./components/AdSlot/adScripts/getParameterByName.ts": "./dist/components/AdSlot/adScripts/getParameterByName.ts",
-    "./components/AdSlot/adScripts/ias.ts": "./dist/components/AdSlot/adScripts/ias.ts",
-    "./components/AdSlot/adScripts/loadScript.ts": "./dist/components/AdSlot/adScripts/loadScript.ts",
-    "./components/AdSlot/utils.ts": "./dist/components/AdSlot/utils.ts",
-    "./components/Analytics/Analytics.svelte": "./dist/components/Analytics/Analytics.svelte",
-    "./components/Analytics/providers/chartbeat.ts": "./dist/components/Analytics/providers/chartbeat.ts",
-    "./components/Analytics/providers/ga.ts": "./dist/components/Analytics/providers/ga.ts",
-    "./components/Analytics/providers/index.ts": "./dist/components/Analytics/providers/index.ts",
-    "./components/Article/Article.svelte": "./dist/components/Article/Article.svelte",
-    "./components/BeforeAfter/BeforeAfter.svelte": "./dist/components/BeforeAfter/BeforeAfter.svelte",
-    "./components/Block/Block.svelte": "./dist/components/Block/Block.svelte",
-    "./components/BodyText/BodyText.svelte": "./dist/components/BodyText/BodyText.svelte",
-    "./components/Byline/Byline.svelte": "./dist/components/Byline/Byline.svelte",
-    "./components/DatawrapperChart/DatawrapperChart.svelte": "./dist/components/DatawrapperChart/DatawrapperChart.svelte",
-    "./components/DocumentCloud/DocumentCloud.svelte": "./dist/components/DocumentCloud/DocumentCloud.svelte",
-    "./components/EmbedPreviewerLink/EmbedPreviewerLink.svelte": "./dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte",
-    "./components/EndNotes/EndNotes.svelte": "./dist/components/EndNotes/EndNotes.svelte",
-    "./components/EndNotes/docProps.ts": "./dist/components/EndNotes/docProps.ts",
-    "./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
-    "./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
-    "./components/Framer/Resizer/index.svelte": "./dist/components/Framer/Resizer/index.svelte",
-    "./components/Framer/Typeahead/fuzzy": "./dist/components/Framer/Typeahead/fuzzy.js",
-    "./components/Framer/Typeahead/index.svelte": "./dist/components/Framer/Typeahead/index.svelte",
-    "./components/Framer/stores": "./dist/components/Framer/stores.js",
-    "./components/Framer/uniqNames": "./dist/components/Framer/uniqNames.js",
-    "./components/GraphicBlock/AriaHidden.svelte": "./dist/components/GraphicBlock/AriaHidden.svelte",
-    "./components/GraphicBlock/GraphicBlock.svelte": "./dist/components/GraphicBlock/GraphicBlock.svelte",
-    "./components/GraphicBlock/TextBlock.svelte": "./dist/components/GraphicBlock/TextBlock.svelte",
-    "./components/Headline/Headline.svelte": "./dist/components/Headline/Headline.svelte",
-    "./components/HeroHeadline/Hero.svelte": "./dist/components/HeroHeadline/Hero.svelte",
-    "./components/InfoBox/InfoBox.svelte": "./dist/components/InfoBox/InfoBox.svelte",
-    "./components/Markdown/Markdown.svelte": "./dist/components/Markdown/Markdown.svelte",
-    "./components/Markdown/stores.ts": "./dist/components/Markdown/stores.ts",
-    "./components/PaddingReset/PaddingReset.svelte": "./dist/components/PaddingReset/PaddingReset.svelte",
-    "./components/PhotoCarousel/PhotoCarousel.svelte": "./dist/components/PhotoCarousel/PhotoCarousel.svelte",
-    "./components/PhotoPack/PhotoPack.svelte": "./dist/components/PhotoPack/PhotoPack.svelte",
-    "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
-    "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
-    "./components/PymChild/stores": "./dist/components/PymChild/stores.js",
-    "./components/ReferralBlock/ReferralBlock.svelte": "./dist/components/ReferralBlock/ReferralBlock.svelte",
-    "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte": "./dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte",
-    "./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
-    "./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
-    "./components/Scroller/Background.svelte": "./dist/components/Scroller/Background.svelte",
-    "./components/Scroller/Embedded/Background.svelte": "./dist/components/Scroller/Embedded/Background.svelte",
-    "./components/Scroller/Embedded/Foreground.svelte": "./dist/components/Scroller/Embedded/Foreground.svelte",
-    "./components/Scroller/Embedded/index.svelte": "./dist/components/Scroller/Embedded/index.svelte",
-    "./components/Scroller/Foreground.svelte": "./dist/components/Scroller/Foreground.svelte",
-    "./components/Scroller/Scroller.svelte": "./dist/components/Scroller/Scroller.svelte",
-    "./components/Scroller/docProps.ts": "./dist/components/Scroller/docProps.ts",
-    "./components/SearchInput/MagnifyingGlass.svelte": "./dist/components/SearchInput/MagnifyingGlass.svelte",
-    "./components/SearchInput/SearchInput.svelte": "./dist/components/SearchInput/SearchInput.svelte",
-    "./components/SearchInput/X.svelte": "./dist/components/SearchInput/X.svelte",
-    "./components/SimpleTimeline/SimpleTimeline.svelte": "./dist/components/SimpleTimeline/SimpleTimeline.svelte",
-    "./components/SiteFooter/CompanyLinks.svelte": "./dist/components/SiteFooter/CompanyLinks.svelte",
-    "./components/SiteFooter/LegalLinks.svelte": "./dist/components/SiteFooter/LegalLinks.svelte",
-    "./components/SiteFooter/QuickLinks.svelte": "./dist/components/SiteFooter/QuickLinks.svelte",
-    "./components/SiteFooter/Referrals/IntersectionObserver.svelte": "./dist/components/SiteFooter/Referrals/IntersectionObserver.svelte",
-    "./components/SiteFooter/Referrals/Link.svelte": "./dist/components/SiteFooter/Referrals/Link.svelte",
-    "./components/SiteFooter/Referrals/Referrals.svelte": "./dist/components/SiteFooter/Referrals/Referrals.svelte",
-    "./components/SiteFooter/Referrals/index.svelte": "./dist/components/SiteFooter/Referrals/index.svelte",
-    "./components/SiteFooter/SiteFooter.svelte": "./dist/components/SiteFooter/SiteFooter.svelte",
-    "./components/SiteFooter/data.json": "./dist/components/SiteFooter/data.json",
-    "./components/SiteFooter/svgs/Facebook.svelte": "./dist/components/SiteFooter/svgs/Facebook.svelte",
-    "./components/SiteFooter/svgs/Graphics.svelte": "./dist/components/SiteFooter/svgs/Graphics.svelte",
-    "./components/SiteFooter/svgs/Instagram.svelte": "./dist/components/SiteFooter/svgs/Instagram.svelte",
-    "./components/SiteFooter/svgs/LinkedIn.svelte": "./dist/components/SiteFooter/svgs/LinkedIn.svelte",
-    "./components/SiteFooter/svgs/Pictures.svelte": "./dist/components/SiteFooter/svgs/Pictures.svelte",
-    "./components/SiteFooter/svgs/Twitter.svelte": "./dist/components/SiteFooter/svgs/Twitter.svelte",
-    "./components/SiteFooter/svgs/Videos.svelte": "./dist/components/SiteFooter/svgs/Videos.svelte",
-    "./components/SiteFooter/svgs/YouTube.svelte": "./dist/components/SiteFooter/svgs/YouTube.svelte",
-    "./components/SiteHeader/MobileMenu/index.svelte": "./dist/components/SiteHeader/MobileMenu/index.svelte",
-    "./components/SiteHeader/NavBar/DownArrow.svelte": "./dist/components/SiteHeader/NavBar/DownArrow.svelte",
-    "./components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte",
-    "./components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte",
-    "./components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte",
-    "./components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte",
-    "./components/SiteHeader/NavBar/NavDropdown/StoryCard/time": "./dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.js",
-    "./components/SiteHeader/NavBar/NavDropdown/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/index.svelte",
-    "./components/SiteHeader/NavBar/index.svelte": "./dist/components/SiteHeader/NavBar/index.svelte",
-    "./components/SiteHeader/NavBar/utils": "./dist/components/SiteHeader/NavBar/utils/index.js",
-    "./components/SiteHeader/SiteHeader.svelte": "./dist/components/SiteHeader/SiteHeader.svelte",
-    "./components/SiteHeader/data.json": "./dist/components/SiteHeader/data.json",
-    "./components/SiteHeader/scss/breakpoints": "./dist/components/SiteHeader/scss/_breakpoints.scss",
-    "./components/SiteHeader/scss/colors": "./dist/components/SiteHeader/scss/_colors.scss",
-    "./components/SiteHeader/scss/eases": "./dist/components/SiteHeader/scss/_eases.scss",
-    "./components/SiteHeader/scss/grids": "./dist/components/SiteHeader/scss/_grids.scss",
-    "./components/SiteHeader/scss/z-indexes": "./dist/components/SiteHeader/scss/_z-indexes.scss",
-    "./components/SiteHeader/svgs/Close.svelte": "./dist/components/SiteHeader/svgs/Close.svelte",
-    "./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
-    "./components/SiteHeadline/SiteHeadline.svelte": "./dist/components/SiteHeadline/SiteHeadline.svelte",
-    "./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
-    "./components/Table/LeftArrow.svelte": "./dist/components/Table/LeftArrow.svelte",
-    "./components/Table/Pagination.svelte": "./dist/components/Table/Pagination.svelte",
-    "./components/Table/RightArrow.svelte": "./dist/components/Table/RightArrow.svelte",
-    "./components/Table/Select.svelte": "./dist/components/Table/Select.svelte",
-    "./components/Table/SortArrow.svelte": "./dist/components/Table/SortArrow.svelte",
-    "./components/Table/Table.svelte": "./dist/components/Table/Table.svelte",
-    "./components/Table/utils": "./dist/components/Table/utils.js",
-    "./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.ts",
-    "./components/Theme/Theme.svelte": "./dist/components/Theme/Theme.svelte",
-    "./components/Theme/themes/common": "./dist/components/Theme/themes/common.js",
-    "./components/Theme/themes/dark": "./dist/components/Theme/themes/dark.js",
-    "./components/Theme/themes/light": "./dist/components/Theme/themes/light.js",
-    "./components/Theme/utils/flatten": "./dist/components/Theme/utils/flatten.js",
-    "./components/Theme/utils/merge": "./dist/components/Theme/utils/merge.js",
-    "./components/ToolsHeader/ToolsHeader.svelte": "./dist/components/ToolsHeader/ToolsHeader.svelte",
-    "./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
-    "./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
-    "./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
-    "./globals.d.ts": "./dist/globals.d.ts",
-    "./scss/mixins": "./dist/scss/_mixins.scss",
-    "./scss/colours/main": "./dist/scss/colours/_main.scss",
-    "./scss/colours/primary/amber": "./dist/scss/colours/primary/_amber.scss",
-    "./scss/colours/primary/blue": "./dist/scss/colours/primary/_blue.scss",
-    "./scss/colours/primary/cyan": "./dist/scss/colours/primary/_cyan.scss",
-    "./scss/colours/primary/emerald": "./dist/scss/colours/primary/_emerald.scss",
-    "./scss/colours/primary/fuchsia": "./dist/scss/colours/primary/_fuchsia.scss",
-    "./scss/colours/primary/green": "./dist/scss/colours/primary/_green.scss",
-    "./scss/colours/primary/grey": "./dist/scss/colours/primary/_grey.scss",
-    "./scss/colours/primary/indigo": "./dist/scss/colours/primary/_indigo.scss",
-    "./scss/colours/primary/lime": "./dist/scss/colours/primary/_lime.scss",
-    "./scss/colours/primary/neutral": "./dist/scss/colours/primary/_neutral.scss",
-    "./scss/colours/primary/orange": "./dist/scss/colours/primary/_orange.scss",
-    "./scss/colours/primary/pink": "./dist/scss/colours/primary/_pink.scss",
-    "./scss/colours/primary/purple": "./dist/scss/colours/primary/_purple.scss",
-    "./scss/colours/primary/red": "./dist/scss/colours/primary/_red.scss",
-    "./scss/colours/primary/rose": "./dist/scss/colours/primary/_rose.scss",
-    "./scss/colours/primary/sky": "./dist/scss/colours/primary/_sky.scss",
-    "./scss/colours/primary/slate": "./dist/scss/colours/primary/_slate.scss",
-    "./scss/colours/primary/stone": "./dist/scss/colours/primary/_stone.scss",
-    "./scss/colours/primary/teal": "./dist/scss/colours/primary/_teal.scss",
-    "./scss/colours/primary/violet": "./dist/scss/colours/primary/_violet.scss",
-    "./scss/colours/primary/yellow": "./dist/scss/colours/primary/_yellow.scss",
-    "./scss/colours/primary/zinc": "./dist/scss/colours/primary/_zinc.scss",
-    "./scss/colours/thematic/nord": "./dist/scss/colours/thematic/_nord.scss",
-    "./scss/colours/thematic/tr": "./dist/scss/colours/thematic/_tr.scss",
-    "./scss/fonts/font-faces": "./dist/scss/fonts/_font-faces.scss",
-    "./scss/main": "./dist/scss/main.scss",
-    "./scss/mixins/block": "./dist/scss/mixins/_block.scss",
-    "./scss/mixins/main": "./dist/scss/mixins/_main.scss",
-    "./scss/reset/main": "./dist/scss/reset/_main.scss",
-    "./scss/reset/normalize": "./dist/scss/reset/_normalize.scss",
-    "./scss/reset/typography": "./dist/scss/reset/_typography.scss",
-    "./scss/token-classes": "./dist/scss/token-classes.scss",
-    "./scss/tokens/accessibility/main": "./dist/scss/tokens/accessibility/_main.scss",
-    "./scss/tokens/accessibility/visibility": "./dist/scss/tokens/accessibility/_visibility.scss",
-    "./scss/tokens/accessibility/mixins/main": "./dist/scss/tokens/accessibility/mixins/_main.scss",
-    "./scss/tokens/accessibility/mixins/visibility": "./dist/scss/tokens/accessibility/mixins/_visibility.scss",
-    "./scss/tokens/backgrounds/background-color": "./dist/scss/tokens/backgrounds/_background-color.scss",
-    "./scss/tokens/backgrounds/main": "./dist/scss/tokens/backgrounds/_main.scss",
-    "./scss/tokens/backgrounds/mixins/background-color": "./dist/scss/tokens/backgrounds/mixins/_background-color.scss",
-    "./scss/tokens/backgrounds/mixins/main": "./dist/scss/tokens/backgrounds/mixins/_main.scss",
-    "./scss/tokens/borders/border-color": "./dist/scss/tokens/borders/_border-color.scss",
-    "./scss/tokens/borders/border-radius": "./dist/scss/tokens/borders/_border-radius.scss",
-    "./scss/tokens/borders/border-style": "./dist/scss/tokens/borders/_border-style.scss",
-    "./scss/tokens/borders/border-width": "./dist/scss/tokens/borders/_border-width.scss",
-    "./scss/tokens/borders/main": "./dist/scss/tokens/borders/_main.scss",
-    "./scss/tokens/interactivity/cursor": "./dist/scss/tokens/interactivity/_cursor.scss",
-    "./scss/tokens/interactivity/main": "./dist/scss/tokens/interactivity/_main.scss",
-    "./scss/tokens/interactivity/pointer-events": "./dist/scss/tokens/interactivity/_pointer-events.scss",
-    "./scss/tokens/layout/box-sizing": "./dist/scss/tokens/layout/_box-sizing.scss",
-    "./scss/tokens/layout/display": "./dist/scss/tokens/layout/_display.scss",
-    "./scss/tokens/layout/floats": "./dist/scss/tokens/layout/_floats.scss",
-    "./scss/tokens/layout/main": "./dist/scss/tokens/layout/_main.scss",
-    "./scss/tokens/layout/object-fit": "./dist/scss/tokens/layout/_object-fit.scss",
-    "./scss/tokens/layout/object-position": "./dist/scss/tokens/layout/_object-position.scss",
-    "./scss/tokens/layout/overflow": "./dist/scss/tokens/layout/_overflow.scss",
-    "./scss/tokens/layout/position": "./dist/scss/tokens/layout/_position.scss",
-    "./scss/tokens/layout/flex/align-content": "./dist/scss/tokens/layout/flex/_align-content.scss",
-    "./scss/tokens/layout/flex/align-items": "./dist/scss/tokens/layout/flex/_align-items.scss",
-    "./scss/tokens/layout/flex/align-self": "./dist/scss/tokens/layout/flex/_align-self.scss",
-    "./scss/tokens/layout/flex/flex-direction": "./dist/scss/tokens/layout/flex/_flex-direction.scss",
-    "./scss/tokens/layout/flex/flex-grow": "./dist/scss/tokens/layout/flex/_flex-grow.scss",
-    "./scss/tokens/layout/flex/flex-shrink": "./dist/scss/tokens/layout/flex/_flex-shrink.scss",
-    "./scss/tokens/layout/flex/flex-wrap": "./dist/scss/tokens/layout/flex/_flex-wrap.scss",
-    "./scss/tokens/layout/flex/flex": "./dist/scss/tokens/layout/flex/_flex.scss",
-    "./scss/tokens/layout/flex/justify-content": "./dist/scss/tokens/layout/flex/_justify-content.scss",
-    "./scss/tokens/layout/flex/justify-items": "./dist/scss/tokens/layout/flex/_justify-items.scss",
-    "./scss/tokens/layout/flex/justify-self": "./dist/scss/tokens/layout/flex/_justify-self.scss",
-    "./scss/tokens/layout/flex/main": "./dist/scss/tokens/layout/flex/_main.scss",
-    "./scss/tokens/sizing/height": "./dist/scss/tokens/sizing/_height.scss",
-    "./scss/tokens/sizing/main": "./dist/scss/tokens/sizing/_main.scss",
-    "./scss/tokens/sizing/max-height": "./dist/scss/tokens/sizing/_max-height.scss",
-    "./scss/tokens/sizing/max-width": "./dist/scss/tokens/sizing/_max-width.scss",
-    "./scss/tokens/sizing/min-height": "./dist/scss/tokens/sizing/_min-height.scss",
-    "./scss/tokens/sizing/min-width": "./dist/scss/tokens/sizing/_min-width.scss",
-    "./scss/tokens/sizing/width": "./dist/scss/tokens/sizing/_width.scss",
-    "./scss/tokens/spacers/fluid-margin": "./dist/scss/tokens/spacers/_fluid-margin.scss",
-    "./scss/tokens/spacers/fluid-padding": "./dist/scss/tokens/spacers/_fluid-padding.scss",
-    "./scss/tokens/spacers/main": "./dist/scss/tokens/spacers/_main.scss",
-    "./scss/tokens/spacers/margin": "./dist/scss/tokens/spacers/_margin.scss",
-    "./scss/tokens/spacers/padding": "./dist/scss/tokens/spacers/_padding.scss",
-    "./scss/tokens/spacers/mixins/fluid-margin": "./dist/scss/tokens/spacers/mixins/_fluid-margin.scss",
-    "./scss/tokens/spacers/mixins/fluid-padding": "./dist/scss/tokens/spacers/mixins/_fluid-padding.scss",
-    "./scss/tokens/spacers/mixins/main": "./dist/scss/tokens/spacers/mixins/_main.scss",
-    "./scss/tokens/text/color": "./dist/scss/tokens/text/_color.scss",
-    "./scss/tokens/text/font-family": "./dist/scss/tokens/text/_font-family.scss",
-    "./scss/tokens/text/font-size": "./dist/scss/tokens/text/_font-size.scss",
-    "./scss/tokens/text/font-style": "./dist/scss/tokens/text/_font-style.scss",
-    "./scss/tokens/text/font-weight": "./dist/scss/tokens/text/_font-weight.scss",
-    "./scss/tokens/text/letter-spacing": "./dist/scss/tokens/text/_letter-spacing.scss",
-    "./scss/tokens/text/line-height": "./dist/scss/tokens/text/_line-height.scss",
-    "./scss/tokens/text/main": "./dist/scss/tokens/text/_main.scss",
-    "./scss/tokens/text/text-align": "./dist/scss/tokens/text/_text-align.scss",
-    "./scss/tokens/text/text-decoration": "./dist/scss/tokens/text/_text-decoration.scss",
-    "./scss/tokens/text/text-role": "./dist/scss/tokens/text/_text-role.scss",
-    "./scss/tokens/text/text-stroke": "./dist/scss/tokens/text/_text-stroke.scss",
-    "./scss/tokens/text/text-transform": "./dist/scss/tokens/text/_text-transform.scss",
-    "./scss/tokens/text/vertical-align": "./dist/scss/tokens/text/_vertical-align.scss",
-    "./scss/tokens/text/white-space": "./dist/scss/tokens/text/_white-space.scss",
-    "./scss/tokens/text/word-break": "./dist/scss/tokens/text/_word-break.scss",
-    "./scss/tokens/text/mixins/color": "./dist/scss/tokens/text/mixins/_color.scss",
-    "./scss/tokens/text/mixins/font-family": "./dist/scss/tokens/text/mixins/_font-family.scss",
-    "./scss/tokens/text/mixins/font-size": "./dist/scss/tokens/text/mixins/_font-size.scss",
-    "./scss/tokens/text/mixins/font-weight": "./dist/scss/tokens/text/mixins/_font-weight.scss",
-    "./scss/tokens/text/mixins/letter-spacing": "./dist/scss/tokens/text/mixins/_letter-spacing.scss",
-    "./scss/tokens/text/mixins/line-height": "./dist/scss/tokens/text/mixins/_line-height.scss",
-    "./scss/tokens/text/mixins/main": "./dist/scss/tokens/text/mixins/_main.scss",
-    "./scss/tokens/text/mixins/text-role": "./dist/scss/tokens/text/mixins/_text-role.scss",
-    "./scss/tokens/text/mixins/text-stroke": "./dist/scss/tokens/text/mixins/_text-stroke.scss",
-    "./scss/tokens/variables/block": "./dist/scss/tokens/variables/_block.scss",
-    "./scss/tokens/variables/main": "./dist/scss/tokens/variables/_main.scss",
-    "./scss/tokens/variables/theme": "./dist/scss/tokens/variables/_theme.scss",
    ".": {
-      "types": "./dist/@types/index.d.ts",
+      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js",
      "default": "./dist/index.js"
-    }
+    },
+    "./scss/*": "./dist/scss/*"
  },
  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
  "bugs": {
    "url": "https://github.com/reuters-graphics/graphics-components/issues"
-  },
-  "readme": "ERROR: No README data found!"
+  }
 }
--- a/src/actions/cssVariables/cssVariables.stories.mdx
+++ b/src/actions/cssVariables/cssVariables.stories.mdx
@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../docs/utils/docsPage.js';

 <Meta title="Actions/cssVariables" parameters={{ ...parameters }} />

--- a/src/actions/resizeObserver/resizeObserver.stories.mdx
+++ b/src/actions/resizeObserver/resizeObserver.stories.mdx
@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../docs/utils/docsPage.js';

 <Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />

--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@ -11,7 +11,14 @@ export type Option = {
 /**
 * Used for any props that restrict width of a container to one of pre-fab widths.
 */
-export type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+export type ContainerWidth =
+  | 'narrower'
+  | 'narrow'
+  | 'normal'
+  | 'wide'
+  | 'wider'
+  | 'widest'
+  | 'fluid';

 /**
 * Used to set headline class fluid size from text-2xl to text-6xl
@ -30,7 +37,7 @@ export interface ScrollerStep {
  /**
   * Optional props for background component
   */
-  backgroundProps?: Object;
+  backgroundProps?: object;
  /**
   * Foreground can either be a component or markdown-formatted string.
   * @required
@ -39,5 +46,5 @@ export interface ScrollerStep {
  /**
   * Optional props for foreground component
   */
-  foregroundProps?: Object;
+  foregroundProps?: object;
 }
--- a/src/components/AdSlot/@types/ads.ts
+++ b/src/components/AdSlot/@types/ads.ts
@ -23,30 +23,36 @@ export type SponsorshipAd = {
 export type InlineAd = {
  mobile: {
    adType: 'mpu' | 'native' | 'mpu2';
-    placementName: 'reuters_mobile_mpu_1' | 'reuters_mobile_mpu_2' | 'reuters_mobile_mpu_3';
+    placementName:
+      | 'reuters_mobile_mpu_1'
+      | 'reuters_mobile_mpu_2'
+      | 'reuters_mobile_mpu_3';
  };
  desktop: {
    adType: 'native' | 'canvas' | 'flex';
-    placementName: 'reuters_desktop_native_1' | 'reuters_desktop_native_2' | 'reuters_desktop_native_3';
+    placementName:
+      | 'reuters_desktop_native_1'
+      | 'reuters_desktop_native_2'
+      | 'reuters_desktop_native_3';
  };
 };

-export type DesktopPlacementName = |
-  LeaderboardAd['desktop']['placementName'] |
-  SponsorshipAd['desktop']['placementName'] |
-  InlineAd['desktop']['placementName'];
+export type DesktopPlacementName =
+  | LeaderboardAd['desktop']['placementName']
+  | SponsorshipAd['desktop']['placementName']
+  | InlineAd['desktop']['placementName'];

-export type MobilePlacementName = |
-  LeaderboardAd['mobile']['placementName'] |
-  SponsorshipAd['mobile']['placementName'] |
-  InlineAd['mobile']['placementName'];
+export type MobilePlacementName =
+  | LeaderboardAd['mobile']['placementName']
+  | SponsorshipAd['mobile']['placementName']
+  | InlineAd['mobile']['placementName'];

-export type DesktopAdType = |
-  LeaderboardAd['desktop']['adType'] |
-  SponsorshipAd['desktop']['adType'] |
-  InlineAd['desktop']['adType'];
+export type DesktopAdType =
+  | LeaderboardAd['desktop']['adType']
+  | SponsorshipAd['desktop']['adType']
+  | InlineAd['desktop']['adType'];

-export type MobileAdType = |
-  LeaderboardAd['mobile']['adType'] |
-  SponsorshipAd['mobile']['adType'] |
-  InlineAd['mobile']['adType'];
+export type MobileAdType =
+  | LeaderboardAd['mobile']['adType']
+  | SponsorshipAd['mobile']['adType']
+  | InlineAd['mobile']['adType'];
--- a/src/components/AdSlot/AdScripts.svelte
+++ b/src/components/AdSlot/AdScripts.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import { onMount } from 'svelte';
  import { loadBootstrap } from './adScripts/bootstrap';
  import { loadScript } from './adScripts/loadScript';
--- a/src/components/AdSlot/AdSlot.svelte
+++ b/src/components/AdSlot/AdSlot.svelte
@ -27,7 +27,7 @@
        type: adType,
      },
    };
-    // @ts-ignore
+    // @ts-ignore window global
    const freestar = window?.freestar;
    // Add adSlot to freestar queue directly if already initialised
    if (freestar) {
@ -41,7 +41,7 @@
    }

    return () => {
-      // @ts-ignore
+      // @ts-ignore window global
      const freestar = window?.freestar;
      if (freestar) {
        freestar.queue.push(function () {
@ -57,7 +57,7 @@
 <style lang="scss">
  div {
    :global(iframe) {
-      width: auto;
+      width: 100%;
    }
  }
 </style>
--- a/src/components/AdSlot/InlineAd.stories.svelte
+++ b/src/components/AdSlot/InlineAd.stories.svelte
@ -1,24 +1,22 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+  import { Template, Story, Meta } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @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.js';
+  import { withComponentDocs } from './../../docs/utils/withParams';

  const meta = {
-    title: 'Components/InlineAd',
-    component: InlineAd,
    ...withComponentDocs(adDocs),
  };
 </script>

-<Meta title="Components/InlineAd" {...meta} />
+<Meta title="Components/InlineAd" component="{InlineAd}" {...meta} />

-<Template let:args>
+<Template>
  <div>
    <AdScripts />
    <InlineAd />
--- a/src/components/AdSlot/InlineAd.svelte
+++ b/src/components/AdSlot/InlineAd.svelte
@ -1,7 +1,7 @@
 <!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
 <script lang="ts">
  import Block from '../Block/Block.svelte';
-  import { InlineAd } from './@types/ads';
+  import type { InlineAd } from './@types/ads';
  import ResponsiveAd from './ResponsiveAd.svelte';

  /** Add an ID to target with SCSS. */
@ -17,13 +17,13 @@
  const desktopPlacementName: InlineAd['desktop']['placementName'] = `reuters_desktop_native_${n}`;
 </script>

-<Block id="{id}" class="freestar-adslot {cls}">
+<Block {id} class="freestar-adslot {cls}">
  <div class="ad-block">
    <div class="ad-label">Advertisement · Scroll to continue</div>
    <div class="ad-container">
      <div class="ad-slot__inner">
        <div>
-          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+          <ResponsiveAd {desktopPlacementName} />
        </div>
      </div>
    </div>
--- a/src/components/AdSlot/LeaderboardAd.stories.svelte
+++ b/src/components/AdSlot/LeaderboardAd.stories.svelte
@ -1,24 +1,22 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @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.js';
+  import { withComponentDocs } from './../../docs/utils/withParams';

  const meta = {
-    title: 'Components/LeaderboardAd',
-    component: LeaderboardAd,
    ...withComponentDocs(adDocs),
  };
 </script>

-<Meta title="Components/LeaderboardAd" {...meta} />
+<Meta title="Components/LeaderboardAd" component="{LeaderboardAd}" {...meta} />

-<Template let:args>
+<Template>
  <div>
    <AdScripts />
    <LeaderboardAd />
--- a/src/components/AdSlot/LeaderboardAd.svelte
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@ -1,6 +1,6 @@
 <!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
 <script lang="ts">
-  import { LeaderboardAd } from './@types/ads';
+  import type { LeaderboardAd } from './@types/ads';
  import ResponsiveAd from './ResponsiveAd.svelte';
  import { onMount } from 'svelte';

@ -48,16 +48,16 @@

 <div
  class="leaderboard__sticky {cls}"
-  class:sticky="{sticky}"
-  class:unstick="{unstick}"
-  id="{id}"
+  class:sticky
+  class:unstick
+  {id}
  style="--height: {adSize}px;"
 >
  <div class="ad-block">
    <div class="ad-slot__container">
      <div class="ad-slot__inner">
        <div>
-          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+          <ResponsiveAd {desktopPlacementName} />
        </div>
      </div>
    </div>
--- a/src/components/AdSlot/OneTrust.svelte
+++ b/src/components/AdSlot/OneTrust.svelte
@ -1,12 +1,12 @@
 <!-- This component manages the OneTrust prefs button, so it's not permanently fixed on page... -->
-<script>
+<script lang="ts">
  import { onMount } from 'svelte';
-  import { throttle } from 'lodash-es';
+  import throttle from 'lodash-es/throttle';

  let lastScroll = 0;
  let showManagePreferences = true;

-  const togglePrefs = (on = true) => {
+  const togglePrefs = (on: boolean = true) => {
    const btn = document.getElementById('ot-sdk-btn-floating');
    if (!btn) return;
    if (on) {
@ -32,8 +32,13 @@
  };

  onMount(() => {
-    window.addEventListener('scroll', throttle(handleScroll, 250), {
+    if (typeof window === 'undefined') return;
+    const throttledHandle = throttle(handleScroll, 250);
+    window.addEventListener('scroll', throttledHandle, {
      passive: true,
    });
+    return () => {
+      window.removeEventListener('scroll', throttledHandle);
+    };
  });
 </script>
--- a/src/components/AdSlot/ResponsiveAd.svelte
+++ b/src/components/AdSlot/ResponsiveAd.svelte
@ -58,8 +58,8 @@
  };

  $: placementName =
-    windowWidth && windowWidth < mobileBreakpoint
-      ? getMobilePlacementName(desktopPlacementName)
+    windowWidth && windowWidth < mobileBreakpoint ?
+      getMobilePlacementName(desktopPlacementName)
    : desktopPlacementName;
  $: adType = getAdType(placementName);
 </script>
@ -68,6 +68,6 @@

 {#if windowWidth}
  {#key placementName}
-    <AdSlot placementName="{placementName}" adType="{adType}" />
+    <AdSlot {placementName} {adType} />
  {/key}
 {/if}
--- a/src/components/AdSlot/SponsorshipAd.stories.svelte
+++ b/src/components/AdSlot/SponsorshipAd.stories.svelte
@ -1,24 +1,22 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @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.js';
+  import { withComponentDocs } from './../../docs/utils/withParams';

  const meta = {
-    title: 'Components/SponsorshipAd',
-    component: SponsorshipAd,
    ...withComponentDocs(adDocs),
  };
 </script>

-<Meta title="Components/SponsorshipAd" {...meta} />
+<Meta title="Components/SponsorshipAd" component="{SponsorshipAd}" {...meta} />

-<Template let:args>
+<Template>
  <div>
    <AdScripts />
    <SponsorshipAd />
--- a/src/components/AdSlot/SponsorshipAd.svelte
+++ b/src/components/AdSlot/SponsorshipAd.svelte
@ -1,7 +1,7 @@
 <!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
 <script lang="ts">
  import Block from '../Block/Block.svelte';
-  import { SponsorshipAd } from './@types/ads';
+  import type { SponsorshipAd } from './@types/ads';
  import ResponsiveAd from './ResponsiveAd.svelte';

  /** Add an ID to target with SCSS. */
@ -20,7 +20,7 @@
    'reuters_sponsorlogo';
 </script>

-<Block id="{id}" class="freestar-adslot {cls}">
+<Block {id} class="freestar-adslot {cls}">
  <div class="ad-block">
    {#if adLabel}
      <div class="ad-label">
@ -30,7 +30,7 @@
    <div class="ad-container">
      <div class="ad-slot__inner">
        <div>
-          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+          <ResponsiveAd {desktopPlacementName} />
        </div>
      </div>
    </div>
--- a/src/components/AdSlot/adScripts/bootstrap.ts
+++ b/src/components/AdSlot/adScripts/bootstrap.ts
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import getParameterByName from './getParameterByName';
 import Ias from './ias';

@ -13,9 +14,11 @@ export const loadBootstrap = () => {
  freestar.config = freestar.config || {};
  freestar.config.enabled_slots = [];
  freestar.initCallback = function () {
-    freestar.config.enabled_slots.length === 0 ?
-      (freestar.initCallbackCalled = false) :
+    if (freestar.config.enabled_slots.length === 0) {
+      freestar.initCallbackCalled = false;
+    } else {
      freestar.newAdSlots(freestar.config.enabled_slots);
+    }
  };

  freestar.config.channel = '/4735792/reuters.com/graphics';
@ -27,7 +30,7 @@ export const loadBootstrap = () => {
        getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default',
      onetrust_script_id: ONETRUST_SCRIPT_ID,
    },
-    (onetrustResponse) => {
+    (onetrustResponse: any) => {
      const iasPromise = Ias();
      return Promise.all([iasPromise]).then((responses) => {
        const [iasResponse] = responses;
@ -40,7 +43,7 @@ export const loadBootstrap = () => {
    }
  );

-  (<any>window).bootstrap.getResults((result) => {
+  (<any>window).bootstrap.getResults(() => {
    // Set GAM
    window.googletag = (<any>window).googletag || { cmd: [] };
    window.googletag.cmd.push(() => {
@ -48,7 +51,7 @@ export const loadBootstrap = () => {
      /**
       * @TODO Property 'enableAsyncRendering' does not exist on type 'PubAdsService'.
       */
-      // @ts-ignore
+      // @ts-ignore window global
      window.googletag.pubads().enableAsyncRendering();
      window.googletag.pubads().collapseEmptyDivs(true);
    });
@ -57,15 +60,20 @@ export const loadBootstrap = () => {
    // cf: https://help.freestar.com/help/using-key-values
    freestar.queue.push(function () {
      // Global Ads test targeting
-      const adstest = new URL(document.location.href).searchParams.get('adstest');
+      const adstest = new URL(document.location.href).searchParams.get(
+        'adstest'
+      );
      if (adstest) {
        window.googletag.pubads().setTargeting('adstest', adstest);
      }

      // Use the URL path to create a unique ID for the page.
-      const graphicId = window.location.pathname.split('/')
+      const graphicId =
+        window.location.pathname
+          .split('/')
          // Get the first lowercase slug in the pathname, which is the graphic UID.
-        .filter(d => d.match(/[a-z0-9]+/) && d !== 'graphics')[0] || 'unknown-graphic';
+          .filter((d) => d.match(/[a-z0-9]+/) && d !== 'graphics')[0] ||
+        'unknown-graphic';
      window.googletag.pubads().setTargeting('template', 'graphics');
      window.googletag.pubads().setTargeting('graphicId', graphicId);
    });
@ -75,7 +83,10 @@ export const loadBootstrap = () => {
    }

    freestar.queue.push(function () {
-      freestar.newAdSlots((<any>window).graphicsAdQueue || [], freestar.config.channel);
+      freestar.newAdSlots(
+        (<any>window).graphicsAdQueue || [],
+        freestar.config.channel
+      );
    });
  });
 };
--- a/src/components/AdSlot/adScripts/ias.ts
+++ b/src/components/AdSlot/adScripts/ias.ts
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const IAS_REQUEST_TIMEOUT = 600;

 export default () => {
--- a/src/components/AdSlot/adScripts/loadScript.ts
+++ b/src/components/AdSlot/adScripts/loadScript.ts
@ -1,6 +1,6 @@
 interface attributesInterface {
-  onload?: () => void,
-  async?: boolean
+  onload?: () => void;
+  async?: boolean;
 }

 export const loadScript = (src: string, attributes?: attributesInterface) => {
@ -10,7 +10,7 @@ export const loadScript = (src: string, attributes?: attributesInterface) => {
  if (existingScript) return;

  const script = document.createElement('script');
-  script.addEventListener('load', onload);
+  if (onload) script.addEventListener('load', onload);
  script.async = async;
  script.src = src;
  document.head.append(script);
--- a/src/components/Analytics/Analytics.stories.svelte
+++ b/src/components/Analytics/Analytics.stories.svelte
@ -1,12 +1,11 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import environmentsDocs from './stories/docs/environments.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import multipageDocs from './stories/docs/multipage.md?raw';

  import Analytics from './Analytics.svelte';
--- a/src/components/Analytics/providers/chartbeat.ts
+++ b/src/components/Analytics/providers/chartbeat.ts
@ -29,7 +29,9 @@ export default (authors: { name: string }[]) => {

  try {
    attachScript();
-  } catch (e) { console.warn(`Error initialising Chartbeat Analytics: ${e}`); }
+  } catch (e) {
+    console.warn(`Error initialising Chartbeat Analytics: ${e}`);
+  }
 };

 export const registerPageview = () => {
--- a/src/components/Analytics/providers/ga.ts
+++ b/src/components/Analytics/providers/ga.ts
@ -22,6 +22,7 @@ export default () => {
      attachScript();
      /** @type {Gtag.Gtag} */
      window.gtag = function () {
+        // eslint-disable-next-line prefer-rest-params
        window.dataLayer.push(arguments);
      };
      window.gtag('js', new Date());
@ -31,7 +32,9 @@ export default () => {
      });
      registerPageview();
    }
-  } catch (e) { console.warn(`Error initialising Google Analytics: ${e}`); }
+  } catch (e) {
+    console.warn(`Error initialising Google Analytics: ${e}`);
+  }
 };

 export const registerPageview = () => {
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@ -1,10 +1,9 @@
 <script lang="ts">
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';

  import Article from './Article.svelte';
@ -75,32 +74,28 @@
  </Article>
 </Story>

-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  :global(html) {
-    #article-story-basic,
-    #article-column-widths-demo {
+  :global(#article-story-basic, #article-column-widths-demo) {
    width: calc(100% + 30px);
    margin-left: -15px;
  }
-    #article-column-widths-demo {
+  :global(#article-column-widths-demo) {
    background-color: #ddd;
    position: relative;
    margin-bottom: 10px;
-
-      .article-boundaries {
+  }
+  :global(#article-column-widths-demo .article-boundaries) {
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #bbb;
-        &.custom {
-          div.article-block {
+  }
+  :global(
+      #article-column-widths-demo .article-boundaries.custom div.article-block
+    ) {
    background: rgb(211, 132, 123);
  }
-        }
-      }
-
-      div.article-block {
+  :global(#article-column-widths-demo div.article-block) {
    height: 300px;
    background: #81a1c1;
    margin-bottom: 2px;
@ -109,8 +104,6 @@
    color: white;
    font-size: 12px;
  }
-    }
-  }

  div.demo-container {
    height: 300px;
--- a/src/components/Article/Article.svelte
+++ b/src/components/Article/Article.svelte
@ -43,12 +43,7 @@
 </script>

 <main>
-  <article
-    id="{id}"
-    class:embedded
-    role="{role}"
-    use:cssVariables="{columnWidthVars}"
-  >
+  <article {id} class:embedded {role} use:cssVariables="{columnWidthVars}">
    <!-- Article content -->
    <slot />
  </article>
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@ -1,18 +1,18 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import withOverlaysDocs from './stories/docs/withOverlays.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import ariaDescriptionsDocs from './stories/docs/ariaDescriptions.md?raw';

  import BeforeAfter from './BeforeAfter.svelte';

-  // @ts-ignore
+  // @ts-ignore raw
  import beforeImg from './stories/myrne-before.jpg';
-  // @ts-ignore
+  // @ts-ignore raw
  import afterImg from './stories/myrne-after.jpg';

  import {
@ -90,13 +90,13 @@
    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
  >
    <div let:description="{id}" slot="beforeOverlay" class="overlay p-3">
-      <p class="body-caption" id="{id}">
+      <p class="body-caption" {id}>
        On July 7, 2020, the base contained only a few transport vehicles.
      </p>
    </div>
    <div let:description="{id}" slot="afterOverlay" class="overlay p-3">
      <!-- 👇 id can also be used on an element containing multiple text elements -->
-      <div id="{id}">
+      <div {id}>
        <p class="body-caption">
          But by October, tanks and artillery could be seen.
        </p>
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@ -68,13 +68,13 @@
   */
  export let id: string = 'before-after-' + random4() + random4();

-  let img;
-  let imgOffset = null;
+  let img: HTMLImageElement;
+  let imgOffset: DOMRect | null = null;
  let sliding = false;
-  let figure;
+  let figure: HTMLElement;
  let beforeOverlayWidth = 0;
  let isFocused = false;
-  let containerWidth;
+  let containerWidth: number;

  $: containerHeight =
    containerWidth && heightRatio ? containerWidth * heightRatio : height;
@ -88,7 +88,7 @@

  const onFocus = () => (isFocused = true);
  const onBlur = () => (isFocused = false);
-  const handleKeyDown = (e) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
    if (!isFocused) return;
    const { keyCode } = e;
    const margin = handleMargin / w;
@ -107,29 +107,29 @@
    measureImage();
  };

-  const measureLoadedImage = (e) => {
+  const measureLoadedImage = (e: Event) => {
    if (e.type === 'load') {
-      imgOffset = e.target.getBoundingClientRect();
+      imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
    }
  };

-  const move = (e) => {
+  const move = (e: MouseEvent | TouchEvent) => {
    if (sliding && imgOffset) {
-      const el = e.touches ? e.touches[0] : e;
-      const figureOffset = figure
-        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
+      const el =
+        e instanceof TouchEvent && e.touches ? e.touches[0] : (e as MouseEvent);
+      const figureOffset =
+        figure ?
+          parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
        : 0;
      let x = el.pageX - figureOffset - imgOffset.left;
      x =
-        x < handleMargin
-          ? handleMargin
-          : x > w - handleMargin
-          ? w - handleMargin
+        x < handleMargin ? handleMargin
+        : x > w - handleMargin ? w - handleMargin
        : x;
      offset = x / w;
    }
  };
-  const start = (e) => {
+  const start = (e: MouseEvent | TouchEvent) => {
    sliding = true;
    move(e);
  };
@ -160,7 +160,7 @@
 />

 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
-  <Block width="{width}" id="{id}" class="photo before-after fmy-6 {cls}">
+  <Block {width} {id} class="photo before-after fmy-6 {cls}">
    <div
      style="height: {containerHeight}px;"
      bind:clientWidth="{containerWidth}"
@ -172,7 +172,7 @@
        on:touchstart="{start}"
        on:mousedown="{start}"
        bind:this="{figure}"
-        aria-labelledby="{$$slots.caption && `${id}-caption`}"
+        aria-labelledby="{($$slots.caption && `${id}-caption`) || undefined}"
      >
        <img
          bind:this="{img}"
@ -182,7 +182,8 @@
          on:mousedown|preventDefault
          style="{imgStyle}"
          class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby="{$$slots.beforeOverlay && `${id}-before`}"
+          aria-describedby="{($$slots.beforeOverlay && `${id}-before`) ||
+            undefined}"
        />

        <img
@ -191,7 +192,8 @@
          on:mousedown|preventDefault
          style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
          class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby="{$$slots.afterOverlay && `${id}-after`}"
+          aria-describedby="{($$slots.afterOverlay && `${id}-after`) ||
+            undefined}"
        />
        {#if $$slots.beforeOverlay}
          <div
@ -262,14 +264,12 @@
    }
    .overlay-container {
      position: absolute;
-      :global {
-        &:first-child {
+      :global(:first-child) {
        margin-top: 0;
      }
-        &:last-child {
+      :global(:last-child) {
        margin-bottom: 0;
      }
-      }
      &.before {
        left: 0;
        z-index: 23;
@ -337,10 +337,8 @@
  }

  aside.before-after-caption {
-    :global {
-      p {
+    :global(p) {
      @include body-caption;
    }
  }
-  }
 </style>
--- a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md
+++ b/src/components/BeforeAfter/stories/docs/ariaDescriptions.md
@ -32,5 +32,4 @@ Use text elements in your overlays as [ARIA descriptions](https://developer.mozi
      }
    }
  </style>
-</BeforeAfter>
 ```
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@ -1,17 +1,20 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import customLayoutsDocs from './stories/docs/customLayouts.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  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 = {
    ...withComponentDocs(componentDocs),
@ -115,41 +118,38 @@
  </Article>
 </Story>

-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  :global(html) {
-    #block-demo-article {
+  :global(#block-demo-article) {
    background-color: #ddd;
    position: relative;
    width: calc(100% + 30px);
    margin-left: -15px;
-
-      .article-boundaries {
+  }
+  :global(#block-demo-article .article-boundaries) {
    padding: 0 0 18px;
    width: 100%;
    height: 100%;
    background-color: #bbb;
  }
-
-      div.article-block {
+  :global(#block-demo-article div.article-block) {
    height: 100px;
    background: #81a1c1;
-        &.block-snap-widths-demo {
+  }
+  :global(#block-demo-article div.article-block.block-snap-widths-demo) {
    margin-bottom: 2px;
    height: 40px;
    font-size: 11px;
-          &.even {
+  }
+  :global(#block-demo-article div.article-block.block-snap-widths-demo.even) {
    background: rgb(211, 132, 123);
  }
-        }
-      }
-      .label,
-      div.article-block.block-snap-widths-demo {
+  :global(
+      #block-demo-article .label,
+      #block-demo-article div.article-block.block-snap-widths-demo
+    ) {
    padding-left: 3px;
    color: white;
  }
-    }
-  }

  div#block-flex-example {
    padding: 25px 0;
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@ -23,10 +23,10 @@
 </script>

 <div
-  id="{id}"
+  {id}
  class="article-block fmx-auto {width} {cls}"
  class:snap="{snap && width !== 'fluid' && width !== 'widest'}"
-  role="{role}"
+  {role}
  aria-label="{ariaLabel}"
 >
  <!-- block content -->
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@ -1,7 +1,7 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import BodyText from './BodyText.svelte';
@ -120,6 +120,7 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
      &:before {
        content: 'H2';
        @include heading-tag;
+        & {
          font-size: 22px;
        }
      }
@ -128,44 +129,55 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
        &:before {
          content: 'H3';
          @include heading-tag;
+          & {
            font-size: 19px;
          }
        }
+      }
      h4 {
        position: relative;
        &:before {
          content: 'H4';
          @include heading-tag;
+          & {
            font-size: 16px;
          }
        }
+      }
      h5 {
        position: relative;
        &:before {
          content: 'H5';
          @include heading-tag;
+          & {
            font-size: 15px;
          }
        }
+      }
      h6 {
        position: relative;
        &:before {
          content: 'H6';
          @include heading-tag;
+          & {
            font-size: 12px;
          }
        }
+      }
      blockquote {
        position: relative;
        &:before {
          @include heading-tag;
+          & {
            content: '“';
            font-size: 3rem;
            line-height: 3rem;
          }
+        }
        blockquote:before {
          display: none;
        }
      }
    }
+  }
 </style>
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@ -18,6 +18,6 @@
  import Block from '../Block/Block.svelte';
 </script>

-<Block id="{id}" class="fmy-6 {cls}">
+<Block {id} class="fmy-6 {cls}">
  <Markdown source="{text}" />
 </Block>
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@ -1,7 +1,7 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import Byline from './Byline.svelte';
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@ -64,7 +64,7 @@
    first.getDate() === second.getDate();
 </script>

-<Block id="{id}" class="byline-container {alignmentClass} {cls}" width="normal">
+<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}
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@ -1,9 +1,9 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import withChatterDocs from './stories/docs/withChatter.md?raw';

  import DatawrapperChart from './DatawrapperChart.svelte';
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@ -56,7 +56,6 @@
  let frameElement;

  $: frameFiller = (e) => {
-    /* eslint-disable */
    if (void 0 !== e.data['datawrapper-height']) {
      const t = [frameElement];
      for (const a in e.data['datawrapper-height']) {
@ -67,7 +66,6 @@
        }
      }
    }
-    /* eslint-enable */
  };

  onMount(() => {
@ -82,13 +80,7 @@
  });
 </script>

-<GraphicBlock
-  width="{width}"
-  textWidth="{textWidth}"
-  title="{title}"
-  description="{description}"
-  notes="{notes}"
->
+<GraphicBlock {width} {textWidth} {title} {description} {notes}>
  {#if $$slots.title}
    <!-- Custom headline and chatter slot -->
    <slot name="title" />
@ -99,12 +91,13 @@
      bind:this="{frameElement}"
      title="{frameTitle}"
      aria-label="{ariaLabel}"
-      id="{id}"
-      src="{src}"
-      scrolling="{scrolling}"
+      {id}
+      {src}
+      {scrolling}
      frameborder="0"
      data-chromatic="ignore"
-      style="width: 0; min-width: 100% !important; border: none;"></iframe>
+      style="width: 0; min-width: 100% !important; border: none;"
+    ></iframe>
  </div>

  {#if $$slots.notes}
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@ -1,8 +1,7 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import DocumentCloud from './DocumentCloud.svelte';
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@ -30,7 +30,7 @@
  import Block from '../Block/Block.svelte';
 </script>

-<Block width="{width}" id="{id}" class="photo fmy-6 {cls}">
+<Block {width} {id} class="photo fmy-6 {cls}">
  <iframe
    class="h-screen"
    src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@ -1,7 +1,7 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
--- a/src/components/EndNotes/EndNotes.stories.svelte
+++ b/src/components/EndNotes/EndNotes.stories.svelte
@ -1,7 +1,7 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import EndNotes from './EndNotes.svelte';
--- a/src/components/EndNotes/docProps.ts
+++ b/src/components/EndNotes/docProps.ts
@ -1,6 +1,6 @@
 interface EndNote {
-  Title: String;
-  Text: String;
+  Title: string;
+  Text: string;
 }

 type EndNotes = EndNote[];
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@ -1,16 +1,16 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';

  import FeaturePhoto from './FeaturePhoto.svelte';

-  // @ts-ignore
+  // @ts-ignore jpg
  import sharkSrc from './stories/shark.jpg';

  import {
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@ -90,14 +90,14 @@
  });
 </script>

-<Block width="{width}" class="photo fmy-6 {cls}" id="{id}">
+<Block {width} class="photo fmy-6 {cls}" {id}>
  <figure
    bind:this="{container}"
    aria-label="media"
    class="w-full flex flex-col relative"
  >
    {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" src="{src}" alt="{altText}" />
+      <img class="w-full my-0" {src} alt="{altText}" />
    {:else}
      <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
    {/if}
--- a/src/components/Framer/Framer.stories.svelte
+++ b/src/components/Framer/Framer.stories.svelte
@ -1,7 +1,7 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';

  import Framer from './Framer.svelte';
--- a/src/components/Framer/Framer.svelte
+++ b/src/components/Framer/Framer.svelte
@ -27,21 +27,18 @@

  $: embedTitles = getUniqNames(embeds);

-  // @ts-ignore
-  let pymParent; // eslint-disable-line no-unused-vars
-
  const reframe = (embed) => {
    // Bit of hack for handling adding query strings dynamically to embeds.
    // cf. also the value prop on the Typeahead component...
    const activeEmbed =
-      embeds.indexOf(embed) > -1
-        ? embed
+      embeds.indexOf(embed) > -1 ?
+        embed
      : embeds[activeEmbedIndex] || embeds[0];
-    pymParent = new pym.Parent(
+    new pym.Parent(
      'frame-parent',
-      /^http/.test(activeEmbed)
-        ? activeEmbed
-        : urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
+      /^http/.test(activeEmbed) ? activeEmbed : (
+        urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
+      )
    );
  };

@ -107,11 +104,7 @@
  </a>
 </div>

-<Resizer
-  breakpoints="{breakpoints}"
-  minFrameWidth="{minFrameWidth}"
-  maxFrameWidth="{maxFrameWidth}"
-/>
+<Resizer {breakpoints} {minFrameWidth} {maxFrameWidth} />

 <style lang="scss">
  header {
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@ -220,7 +220,9 @@
    border-radius: 4px;
    border: 1px solid grey;
    top: calc(50% - 10px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow:
+      0 10px 20px rgba(0, 0, 0, 0.19),
+      0 6px 6px rgba(0, 0, 0, 0.23);
    &:active,
    &:focus {
      outline: none;
--- a/src/components/Framer/Typeahead/fuzzy.js
+++ b/src/components/Framer/Typeahead/fuzzy.js
@ -102,7 +102,7 @@ fuzzy.filter = function (pattern, arr, opts) {
  opts = opts || {};
  return (
    arr
-      .reduce(function (prev, element, idx, arr) {
+      .reduce(function (prev, element, idx, _arr) {
        let str = element;
        if (opts.extract) {
          str = opts.extract(element);
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@ -15,10 +15,10 @@
  export let extract = (item) => item;

  /** @type {(item: TItem) => boolean} */
-  export let disable = (item) => false;
+  export let disable = (_item) => false;

  /** @type {(item: TItem) => boolean} */
-  export let filter = (item) => false;
+  export let filter = (_item) => false;

  /** Set to `false` to prevent the first result from being selected */
  export let autoselect = true;
@ -59,8 +59,8 @@

  $: options = { pre: '<mark>', post: '</mark>', extract };
  $: results =
-    value !== ''
-      ? fuzzy
+    value !== '' ?
+      fuzzy
        .filter(value, data, options)
        .filter(({ score }) => score > 0)
        .slice(0, limit)
@ -132,8 +132,8 @@
  /** @type {(direction: -1 | 1) => void} */
  function change(direction) {
    let index =
-      direction === 1 && selectedIndex === results.length - 1
-        ? 0
+      direction === 1 && selectedIndex === results.length - 1 ?
+        0
      : selectedIndex + direction;
    if (index < 0) index = results.length - 1;

@ -177,19 +177,19 @@
  id="{id}-typeahead"
 >
  <Search
-    id="{id}"
+    {id}
    removeFormAriaAttributes="{true}"
    {...$$restProps}
    bind:ref="{searchRef}"
    aria-autocomplete="list"
    aria-controls="{id}-listbox"
    aria-labelledby="{id}-label"
-    aria-activedescendant="{selectedIndex >= 0 &&
-    !hideDropdown &&
-    results.length > 0
-      ? `${id}-result-${selectedIndex}`
+    aria-activedescendant="{(
+      selectedIndex >= 0 && !hideDropdown && results.length > 0
+    ) ?
+      `${id}-result-${selectedIndex}`
    : null}"
-    bind:value="{value}"
+    bind:value
    on:type
    on:input
    on:change
@ -259,7 +259,7 @@
            selectedIndex = index;
          }}"
        >
-          <slot result="{result}" index="{index}" value="{value}">
+          <slot {result} {index} {value}>
            {@html result.string}
          </slot>
        </li>
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@ -1,15 +1,15 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import customTextDocs from './stories/docs/customText.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import ariaDocs from './stories/docs/aria.md?raw';

  import GraphicBlock from './GraphicBlock.svelte';
@ -18,7 +18,7 @@

  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';

-  // @ts-ignore
+  // @ts-ignore img
  import PlaceholderImg from './stories/placeholder.png';

  const metaProps = {
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@ -73,14 +73,7 @@
  import Markdown from '../Markdown/Markdown.svelte';
 </script>

-<Block
-  id="{id}"
-  snap="{snap}"
-  role="{role}"
-  width="{width}"
-  ariaLabel="{ariaLabel}"
-  class="graphic fmy-6 {cls}"
->
+<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
  {#if $$slots.title}
    <PaddingReset containerIsFluid="{width === 'fluid'}">
      <TextBlock width="{textWidth}">
--- a/src/components/GraphicBlock/TextBlock.svelte
+++ b/src/components/GraphicBlock/TextBlock.svelte
@ -7,7 +7,7 @@
 </script>

 {#if width}
-  <Block width="{width}" class="notes fmy-0">
+  <Block {width} class="notes fmy-0">
    <slot />
  </Block>
 {:else}
--- a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
+++ b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
@ -2,11 +2,11 @@
  // svelte-ignore unused-export-let
  export let basePath = './';
  // For demo purposes only, hard-wiring img paths from Vite
-  // @ts-ignore
+  // @ts-ignore img
  import chartXs from '../imgs/ai-chart-xs.png';
-  // @ts-ignore
+  // @ts-ignore img
  import chartSm from '../imgs/ai-chart-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
  import chartMd from '../imgs/ai-chart-md.png';
  let width = null;
 </script>
@ -414,6 +414,7 @@
    </div>
  {/if}
 </div>
+
 <!-- End ai2html - 2021-09-29 12:37 -->

 <!-- ai file: _ai-chart.ai -->
@ -445,8 +446,16 @@
    overflow: hidden;
  }
  #g-_ai-chart-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 400;
    line-height: 14px;
    height: auto;
@ -495,8 +504,16 @@
    overflow: hidden;
  }
  #g-_ai-chart-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 400;
    line-height: 17px;
    height: auto;
@ -552,8 +569,16 @@
    overflow: hidden;
  }
  #g-_ai-chart-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 400;
    line-height: 17px;
    height: auto;
--- a/src/components/GraphicBlock/stories/ai2svelte/data-table.svelte
+++ b/src/components/GraphicBlock/stories/ai2svelte/data-table.svelte
@ -1,24 +0,0 @@
-<table class="linechart-data">
-  <thead
-    ><tr>
-      <th data-column="Date" data-row="-1">Date </th><th
-        data-column="S&amp;P 500"
-        data-row="-1"
-        >S&amp;P 500
-      </th><th data-column="Dow" data-row="-1">Dow </th><th
-        data-column="Nasdaq"
-        data-row="-1"
-        >Nasdaq
-      </th>
-    </tr></thead
-  >
-  <tbody
-    ><tr> <td>December 31, 2021</td><td>0%</td><td>0</td><td>0%</td></tr><tr>
-      <td>January 3, 2022</td><td>1%</td><td>1</td><td>1%</td></tr
-    ><tr> <td>January 4, 2022</td><td>1%</td><td>1</td><td>−0%</td></tr><tr>
-      <td>January 5, 2022</td><td>−1%</td><td>0</td><td>−3%</td></tr
-    ><tr> <td>January 6, 2022</td><td>−1%</td><td>−0</td><td>−4%</td></tr><tr>
-      <td>January 7, 2022</td><td>−2%</td><td>−0</td><td>−5%</td></tr
-    ><tr> <td>January 10, 2022</td><td>−2%</td><td>−1</td><td>−4%</td></tr>
-  </tbody>
-</table>
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@ -1,20 +1,20 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import withBylineDocs from './stories/docs/withByline.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import withDekDocs from './stories/docs/withDek.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import customHedDocs from './stories/docs/customHed.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';

-  // @ts-ignore
+  // @ts-ignore img
  import crownImgSrc from './stories/crown.png';
  import Map from './stories/graphic.svelte';

--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@ -1,6 +1,6 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script lang="ts">
-  import { HeadlineSize } from '../@types/global';
+  import type { HeadlineSize } from './../@types/global';

  /**
   * Headline, parsed as an _inline_ markdown string in an `h1` element.
@ -52,7 +52,7 @@
  import Byline from '../Byline/Byline.svelte';
  import Markdown from '../Markdown/Markdown.svelte';

-  let hedClass;
+  let hedClass: string;
  $: {
    switch (hedSize) {
      case 'biggest':
@ -74,7 +74,7 @@
 </script>

 <div class="headline-wrapper" style="display:contents;">
-  <Block width="{width}" class="headline text-center fmt-7 fmb-6 {cls}">
+  <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
    <header class="relative">
      {#if $$slots.crown}
        <div class="crown-container">
@ -115,9 +115,9 @@
      {:else if authors.length > 0 || publishTime}
        <Byline
          class="fmy-4"
-          authors="{authors}"
-          publishTime="{publishTime}"
-          updateTime="{updateTime}"
+          {authors}
+          {publishTime}
+          {updateTime}
          align="center"
        />
      {/if}
--- a/src/components/Headline/stories/graphic.svelte
+++ b/src/components/Headline/stories/graphic.svelte
@ -1,13 +1,13 @@
 <script>
-  // @ts-ignore
+  // @ts-ignore img
  import chartXs from './graphic-xs.png';
-  // @ts-ignore
+  // @ts-ignore img
  import chartSm from './graphic-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
  import chartMd from './graphic-md.png';
-  // @ts-ignore
+  // @ts-ignore img
  import chartLg from './graphic-lg.png';
-  // @ts-ignore
+  // @ts-ignore img
  import chartXl from './graphic-xl.png';

  // export let assetsPath = './';
@ -681,8 +681,16 @@
    overflow: hidden;
  }
  #g-graphic-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 300;
    line-height: 16px;
    opacity: 1;
@ -735,8 +743,16 @@
    overflow: hidden;
  }
  #g-graphic-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 200;
    line-height: 16px;
    height: auto;
@ -782,8 +798,16 @@
    overflow: hidden;
  }
  #g-graphic-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 300;
    line-height: 16px;
    opacity: 1;
@ -836,8 +860,16 @@
    overflow: hidden;
  }
  #g-graphic-lg p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 200;
    line-height: 18px;
    height: auto;
@ -885,8 +917,16 @@
    overflow: hidden;
  }
  #g-graphic-xl p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
    font-weight: 200;
    line-height: 18px;
    height: auto;
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@ -1,24 +1,24 @@
 <script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

-  // @ts-ignore
+  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import videoDocs from './stories/docs/backgroundVideo.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
  import customHedDocs from './stories/docs/customHed.md?raw';

-  // @ts-ignore
+  // @ts-ignore img
  import polarImgSrc from './stories/polar.jpg';
-  // @ts-ignore
+  // @ts-ignore img
  import eurovisImgSrc from './stories/eurovis.jpeg';

  import Block from '../Block/Block.svelte';
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@ -1,6 +1,6 @@
 <!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
 <script lang="ts">
-  import { HeadlineSize } from '../@types/global';
+  import type { HeadlineSize } from '../@types/global';

  /** Set to true for embeddables. */
  export let embedded: boolean = false;
@ -88,7 +88,7 @@
 </script>

 <div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
-  <div class="hero-wrapper fmb-6" class:embedded="{embedded}">
+  <div class="hero-wrapper fmb-6" class:embedded>
    <!-- Background media hero-->
    {#if $$slots.background || img}
      <Block width="fluid" class="hero-headline background-hero fmt-0">
@ -96,10 +96,10 @@
          <Headline
            class="{cls} !text-{hedAlign}"
            width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
          >
            <!-- Headline named slot -->
            <div slot="hed">
@ -110,10 +110,10 @@
          <Headline
            class="{cls} !text-{hedAlign}"
            width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
          />
        {/if}

@ -123,12 +123,12 @@
            <slot name="background" />
          {:else}
            <GraphicBlock
-              width="{width}"
+              {width}
              role="img"
              class="my-0"
              textWidth="normal"
-              notes="{notes}"
-              ariaDescription="{ariaDescription}"
+              {notes}
+              {ariaDescription}
            >
              <div
                class="background-image"
@ -148,10 +148,10 @@
            <Headline
              class="{cls} !text-{hedAlign}"
              width="{hedWidth}"
-              section="{section}"
-              hedSize="{hedSize}"
-              hed="{hed}"
-              dek="{dek}"
+              {section}
+              {hedSize}
+              {hed}
+              {dek}
            >
              <!-- Headline named slot -->
              <div slot="hed">
@ -162,10 +162,10 @@
            <Headline
              class="{cls} !text-{hedAlign}"
              width="{hedWidth}"
-              section="{section}"
-              hedSize="{hedSize}"
-              hed="{hed}"
-              dek="{dek}"
+              {section}
+              {hedSize}
+              {hed}
+              {dek}
            />
          {/if}
        </PaddingReset>
@ -182,12 +182,7 @@
      <!-- Custom byline/dateline -->
      <slot name="byline" />
    {:else if authors.length > 0 || publishTime}
-      <Byline
-        authors="{authors}"
-        publishTime="{publishTime}"
-        updateTime="{updateTime}"
-        align="left"
-      />
+      <Byline {authors} {publishTime} {updateTime} align="left" />
    {/if}
  </div>
 </div>
--- a/Show more
+++ b/Show more