From 698b489a38016bbf541595db96d057721e2e1dbb Mon Sep 17 00:00:00 2001
From: Ruben Sibon <r.sibon@amsterdam.nl>
Date: Wed, 18 Dec 2024 13:53:39 +0100
Subject: [PATCH 1/6] chore: Upgrade ESLint to v9 and overhaul configuration
 (#1786)

---
 .eslintignore                                 |  12 -
 .eslintrc.json                                |  72 --
 .eslintrc.react.json                          |   8 -
 .eslintrc.ts.json                             | 116 ---
 .lintstagedrc.json                            |   3 +-
 .markdownlint.json                            |   5 -
 .markdownlintignore                           |   6 -
 .ncurc.major.js                               |   1 +
 .ncurc.minor.js                               |   1 +
 .ncurc.patch.js                               |   1 +
 CONTRIBUTING.md                               |  13 +-
 documentation/storybook.md                    |   2 +-
 eslint.config.mjs                             | 227 +++++
 package.json                                  |  23 +-
 packages/css/README.md                        |   2 +-
 packages/react/README.md                      |   2 +-
 packages/react/babel.config.js                |   2 +-
 .../react/documentation/coding-conventions.md |   2 +-
 packages/react/package.json                   |   2 +-
 .../src/ImageSlider/ImageSliderContext.tsx    |   1 -
 packages/react/src/Pagination/Pagination.tsx  |   1 -
 packages/react/src/Tabs/TabsContext.tsx       |   1 -
 .../src/common/useKeyboardFocus.test.tsx      |   1 -
 pnpm-lock.yaml                                | 821 +++++++++---------
 proprietary/react-icons/README.md             |  11 +-
 proprietary/tokens/README.md                  |   6 +-
 .../src/components/FieldSet/FieldSet.docs.mdx |  16 +-
 .../src/components/Grid/Grid.stories.tsx      |   1 +
 storybook/src/components/Icon/Icon.docs.mdx   |   4 +-
 .../components/LinkList/LinkList.stories.tsx  |   1 +
 .../developer-guide/getting-started.docs.mdx  |  22 +-
 .../routing-libraries.docs.mdx                |   6 +-
 tsconfig.json                                 |  27 +-
 33 files changed, 721 insertions(+), 698 deletions(-)
 delete mode 100644 .eslintignore
 delete mode 100644 .eslintrc.json
 delete mode 100644 .eslintrc.react.json
 delete mode 100644 .eslintrc.ts.json
 delete mode 100644 .markdownlint.json
 delete mode 100644 .markdownlintignore
 create mode 100644 eslint.config.mjs

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 0197edddf1..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,12 +0,0 @@
-# Ignore 3rd party files
-node_modules/
-vendor/
-
-# Ignore generated files
-build/
-coverage/
-dist/
-tmp/
-
-# Ignore generated React icon files
-proprietary/react-icons
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index e5a9cdf6f6..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": false,
-    "jest": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "overrides": [
-    {
-      "extends": ["plugin:json/recommended"],
-      "files": ["*.json"]
-    },
-    {
-      "extends": [
-        "plugin:react/recommended",
-        "eslint-config-prettier",
-        "./.eslintrc.ts.json",
-        "./.eslintrc.react.json",
-        "plugin:mdx/overrides"
-      ],
-      "files": ["*.mdx"],
-      "plugins": ["import"]
-    },
-    {
-      "extends": [
-        "plugin:react/recommended",
-        "eslint-config-prettier",
-        "./.eslintrc.ts.json",
-        "./.eslintrc.react.json"
-      ],
-      "files": ["*.js", "*.jsx"],
-      "plugins": ["import"]
-    },
-    {
-      "extends": [
-        "plugin:react/recommended",
-        "eslint-config-prettier",
-        "./.eslintrc.ts.json",
-        "./.eslintrc.react.json"
-      ],
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint", "import", "jest"]
-    },
-    {
-      "extends": [
-        "plugin:react/recommended",
-        "eslint-config-prettier",
-        "./.eslintrc.ts.json",
-        "./.eslintrc.react.json"
-      ],
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser",
-      "parserOptions": {
-        "project": ["tsconfig.json", "tsconfig.node.json", "tsconfig.test.json"]
-      },
-      "plugins": ["@typescript-eslint"]
-    }
-  ]
-}
diff --git a/.eslintrc.react.json b/.eslintrc.react.json
deleted file mode 100644
index d99f452f9d..0000000000
--- a/.eslintrc.react.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "rules": {
-    "react/no-unknown-property": "off",
-    "react/prop-types": "off",
-    "react/jsx-key": "off",
-    "react/react-in-jsx-scope": "off"
-  }
-}
diff --git a/.eslintrc.ts.json b/.eslintrc.ts.json
deleted file mode 100644
index f58a5492ce..0000000000
--- a/.eslintrc.ts.json
+++ /dev/null
@@ -1,116 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
-    "array-callback-return": ["error", { "checkForEach": false }],
-    "block-scoped-var": "error",
-    "consistent-return": "error",
-    "constructor-super": "error",
-    "eqeqeq": "error",
-    "for-direction": "error",
-    "getter-return": "error",
-    "import/order": [
-      "error",
-      {
-        "alphabetize": { "order": "asc", "caseInsensitive": false },
-        "groups": [
-          ["builtin", "external"],
-          ["internal", "unknown"],
-          ["parent", "sibling", "index"]
-        ],
-        "newlines-between": "never",
-        "warnOnUnassignedImports": false
-      }
-    ],
-    "no-alert": "error",
-    "no-async-promise-executor": "error",
-    "no-caller": "error",
-    "no-case-declarations": "error",
-    "no-class-assign": "error",
-    "no-compare-neg-zero": "error",
-    "no-cond-assign": "error",
-    "no-const-assign": "error",
-    "no-constant-condition": "error",
-    "no-constructor-return": "error",
-    "no-control-regex": "error",
-    "no-debugger": "error",
-    "no-delete-var": "error",
-    "no-dupe-args": "error",
-    "no-dupe-class-members": "error",
-    "no-dupe-else-if": "error",
-    "no-dupe-keys": "error",
-    "no-duplicate-case": "error",
-    "no-empty": "error",
-    "no-empty-character-class": "error",
-    "no-empty-pattern": "error",
-    "no-eval": "error",
-    "no-ex-assign": "error",
-    "no-extra-boolean-cast": "error",
-    "no-extra-semi": "error",
-    "no-fallthrough": "error",
-    "no-func-assign": "error",
-    "no-global-assign": "error",
-    "no-implicit-globals": "error",
-    "no-implied-eval": "error",
-    "no-import-assign": "error",
-    "no-inner-declarations": "error",
-    "no-invalid-regexp": "error",
-    "no-invalid-this": "error",
-    "no-irregular-whitespace": "error",
-    "no-lone-blocks": "error",
-    "no-loop-func": "error",
-    "no-misleading-character-class": "error",
-    "no-multi-str": "error",
-    "no-new-func": "error",
-    "no-new-symbol": "error",
-    "no-new-wrappers": "error",
-    "no-obj-calls": "error",
-    "no-octal": "error",
-    "no-octal-escape": "error",
-    "no-param-reassign": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-regex-spaces": "error",
-    "no-return-assign": "error",
-    "no-return-await": "error",
-    "no-self-assign": "error",
-    "no-self-compare": "error",
-    "no-sequences": "error",
-    "no-setter-return": "error",
-    "no-shadow-restricted-names": "error",
-    "no-sparse-arrays": "error",
-    "no-this-before-super": "error",
-    "no-throw-literal": "error",
-    "no-undef": "error",
-    "no-unexpected-multiline": "error",
-    "no-unmodified-loop-condition": "error",
-    "no-unreachable": "error",
-    "no-unsafe-finally": "error",
-    "no-unsafe-negation": "error",
-    "no-unused-expressions": "error",
-    "no-unused-labels": "error",
-    "no-unused-vars": "error",
-    "no-useless-call": "error",
-    "no-useless-catch": "error",
-    "no-useless-concat": "error",
-    "no-useless-escape": "error",
-    "no-useless-return": "error",
-    "no-void": "error",
-    "no-with": "error",
-    "prefer-regex-literals": "error",
-    "radix": "error",
-    "require-yield": "error",
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": true,
-        "ignoreDeclarationSort": true,
-        "ignoreMemberSort": false,
-        "allowSeparatedGroups": false
-      }
-    ],
-    "use-isnan": "error",
-    "valid-typeof": "error",
-    "vars-on-top": "off",
-    "yoda": "error"
-  }
-}
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index c5cdda0919..c678d8e441 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,7 +1,6 @@
 {
   "composer.json": "composer validate",
   "package.json": "npmPkgJsonLint --allowEmptyTargets",
-  "*.md": ["markdownlint", "prettier --check"],
-  "*.{js,json,jsx,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
+  "*.{md,js,json,jsx,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
   "*.{css,scss}": ["stylelint --allow-empty-input", "prettier --check"]
 }
diff --git a/.markdownlint.json b/.markdownlint.json
deleted file mode 100644
index 6ab7bd17cd..0000000000
--- a/.markdownlint.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "default": true,
-  "MD013": false,
-  "MD033": false
-}
diff --git a/.markdownlintignore b/.markdownlintignore
deleted file mode 100644
index 68bfcbc1bd..0000000000
--- a/.markdownlintignore
+++ /dev/null
@@ -1,6 +0,0 @@
-# Ignore 3rd party files
-node_modules
-
-# Ignore generated files
-dist
-CHANGELOG.md
diff --git a/.ncurc.major.js b/.ncurc.major.js
index ffe0fc6584..66737db8ab 100644
--- a/.ncurc.major.js
+++ b/.ncurc.major.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 const minorConfig = require('./.ncurc.minor')
 
 module.exports = {
diff --git a/.ncurc.minor.js b/.ncurc.minor.js
index 9abb8fb1e8..a90ed37db3 100644
--- a/.ncurc.minor.js
+++ b/.ncurc.minor.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 const patchConfig = require('./.ncurc.patch')
 
 module.exports = {
diff --git a/.ncurc.patch.js b/.ncurc.patch.js
index 5484dd19a4..0d1dbbcccf 100644
--- a/.ncurc.patch.js
+++ b/.ncurc.patch.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   reject: [],
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 12383c4a8b..e650d08213 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -133,7 +133,6 @@ You can use any editor you like, but if you use [Visual Studio Code](https://cod
 
 - [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
 - [MDX](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx)
 - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
 - [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
@@ -141,16 +140,18 @@ You can use any editor you like, but if you use [Visual Studio Code](https://cod
 To enable correct validation and to fix lint/style errors on save, add this to your VSCode `settings.json`:
 
 ```json
+{
+  "eslint.useFlatConfig": true,
   "css.validate": false,
   "scss.validate": false,
   "stylelint.validate": ["css", "scss"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true,
-    "source.fixAll.markdownlint": true
+    "source.fixAll.stylelint": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": true
+}
 ```
 
 </details>
@@ -196,7 +197,7 @@ The copyright holder for all files created by people working for the City of Ams
 If you use code from other EUPL-1.2 or higher licensed files that have a copyright notice, don’t forget to add this copyright notice as well.
 So, for a file with code written by someone working for the City of Amsterdam in 2023, but also containing code from another EUPL-1.2 or higher licensed file written by John Doe in 2021, the header would look like this:
 
-```javascript
+```ts
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 John Doe
@@ -208,7 +209,7 @@ All documentation files should also start with a license header.
 We use the Creative Commons Zero (CC0) license for this.
 The license header looks like this:
 
-```md
+```html
 <!-- @license CC0-1.0 -->
 ```
 
diff --git a/documentation/storybook.md b/documentation/storybook.md
index 6894e63553..318fdbafcd 100644
--- a/documentation/storybook.md
+++ b/documentation/storybook.md
@@ -74,7 +74,7 @@ For example, when the child is a simple string (like in the default Button compo
 
 To do this, you can override the default like so:
 
-```js
+```txt
 argTypes: {
   children: {
     table: { disable: false },
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..6560409d4a
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,227 @@
+import _import from 'eslint-plugin-import'
+import { fileURLToPath } from 'node:url'
+import { fixupPluginRules } from '@eslint/compat'
+import { FlatCompat } from '@eslint/eslintrc'
+import eslint from '@eslint/js'
+import globals from 'globals'
+import jest from 'eslint-plugin-jest'
+import json from '@eslint/json'
+import markdown from '@eslint/markdown'
+import mdx from 'eslint-plugin-mdx'
+import path from 'node:path'
+import react from 'eslint-plugin-react'
+import tseslint from 'typescript-eslint'
+import tsParser from '@typescript-eslint/parser'
+import tsPlugin from '@typescript-eslint/eslint-plugin'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: eslint.configs.recommended,
+  allConfig: eslint.configs.all,
+})
+
+export default tseslint.config(
+  // Global
+  {
+    ignores: ['**/vendor/', '**/build/', '**/coverage/', '**/dist/', '**/tmp/', 'proprietary/react-icons'],
+  },
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.es6, ...globals.jest },
+    },
+  },
+  ...compat.extends('eslint-config-prettier'),
+
+  // JavaScript, TypeScript & React
+  ...compat.extends('plugin:react/recommended').map(() => ({
+    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      import: fixupPluginRules(_import),
+      jest,
+      react,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+        },
+      },
+      react: { version: 'detect' },
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      '@typescript-eslint/no-unused-vars': 'error',
+      'array-callback-return': [
+        'error',
+        {
+          checkForEach: false,
+        },
+      ],
+      'block-scoped-var': 'error',
+      'consistent-return': 'error',
+      'constructor-super': 'error',
+      eqeqeq: 'error',
+      'for-direction': 'error',
+      'getter-return': 'error',
+      'import/order': [
+        'error',
+        {
+          alphabetize: {
+            caseInsensitive: false,
+            order: 'asc',
+          },
+          groups: [
+            ['builtin', 'external'],
+            ['internal', 'unknown'],
+            ['parent', 'sibling', 'index'],
+          ],
+          'newlines-between': 'never',
+          warnOnUnassignedImports: false,
+        },
+      ],
+      'no-alert': 'error',
+      'no-async-promise-executor': 'error',
+      'no-caller': 'error',
+      'no-case-declarations': 'error',
+      'no-class-assign': 'error',
+      'no-compare-neg-zero': 'error',
+      'no-cond-assign': 'error',
+      'no-const-assign': 'error',
+      'no-constant-condition': 'error',
+      'no-constructor-return': 'error',
+      'no-control-regex': 'error',
+      'no-debugger': 'error',
+      'no-delete-var': 'error',
+      'no-dupe-args': 'error',
+      'no-dupe-class-members': 'error',
+      'no-dupe-else-if': 'error',
+      'no-dupe-keys': 'error',
+      'no-duplicate-case': 'error',
+      'no-empty': 'error',
+      'no-empty-character-class': 'error',
+      'no-empty-pattern': 'error',
+      'no-eval': 'error',
+      'no-ex-assign': 'error',
+      'no-extra-boolean-cast': 'error',
+      'no-extra-semi': 'error',
+      'no-fallthrough': 'error',
+      'no-func-assign': 'error',
+      'no-global-assign': 'error',
+      'no-implicit-globals': 'error',
+      'no-implied-eval': 'error',
+      'no-import-assign': 'error',
+      'no-inner-declarations': 'error',
+      'no-invalid-regexp': 'error',
+      'no-invalid-this': 'error',
+      'no-irregular-whitespace': 'error',
+      'no-lone-blocks': 'error',
+      'no-loop-func': 'error',
+      'no-misleading-character-class': 'error',
+      'no-multi-str': 'error',
+      'no-new-func': 'error',
+      'no-new-symbol': 'error',
+      'no-new-wrappers': 'error',
+      'no-obj-calls': 'error',
+      'no-octal': 'error',
+      'no-octal-escape': 'error',
+      'no-param-reassign': 'error',
+      'no-prototype-builtins': 'error',
+      'no-redeclare': 'error',
+      'no-regex-spaces': 'error',
+      'no-return-assign': 'error',
+      'no-return-await': 'error',
+      'no-self-assign': 'error',
+      'no-self-compare': 'error',
+      'no-sequences': 'error',
+      'no-setter-return': 'error',
+      'no-shadow-restricted-names': 'error',
+      'no-sparse-arrays': 'error',
+      'no-this-before-super': 'error',
+      'no-throw-literal': 'error',
+      'no-undef': 'error',
+      'no-unexpected-multiline': 'error',
+      'no-unmodified-loop-condition': 'error',
+      'no-unreachable': 'error',
+      'no-unsafe-finally': 'error',
+      'no-unsafe-negation': 'error',
+      'no-unused-expressions': 'error',
+      'no-unused-labels': 'error',
+      'no-useless-call': 'error',
+      'no-useless-catch': 'error',
+      'no-useless-concat': 'error',
+      'no-useless-escape': 'error',
+      'no-useless-return': 'error',
+      'no-var': 'error',
+      'no-void': 'error',
+      'no-with': 'error',
+      'prefer-regex-literals': 'error',
+      radix: 'error',
+      // Start of React rules
+      'react/jsx-key': 'off',
+      'react/no-unknown-property': 'off',
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'off',
+      // End of React rules
+      'require-yield': 'error',
+      'sort-imports': [
+        'error',
+        {
+          allowSeparatedGroups: false,
+          ignoreCase: true,
+          ignoreDeclarationSort: true,
+          ignoreMemberSort: false,
+        },
+      ],
+      'use-isnan': 'error',
+      'valid-typeof': 'error',
+      'vars-on-top': 'off',
+      yoda: 'error',
+    },
+  })),
+
+  // JSON
+  {
+    files: ['**/*.json'],
+    plugins: { json },
+    language: 'json/json',
+    ...json.configs.recommended,
+  },
+
+  // Markdown
+  {
+    files: ['**/*.md'],
+    plugins: { markdown },
+    ignores: ['CHANGELOG.md'],
+    processor: 'markdown/markdown',
+    rules: {
+      ...markdown.configs.recommended.rules,
+      'markdown/line-length': 'off',
+      'markdown/no-inline-html': 'off',
+    },
+  },
+
+  // MDX
+  {
+    ...mdx.flat,
+    files: ['**/*.mdx'],
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+)
diff --git a/package.json b/package.json
index 13843201d1..eb0dd6f67f 100644
--- a/package.json
+++ b/package.json
@@ -27,21 +27,27 @@
     "./storybook"
   ],
   "devDependencies": {
+    "@eslint/compat": "1.2.4",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.16.0",
+    "@eslint/json": "0.8.0",
+    "@eslint/markdown": "6.2.1",
     "@types/node": "22.10.1",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.18.0",
+    "@typescript-eslint/parser": "8.18.0",
     "conventional-changelog-conventionalcommits": "8.0.0",
-    "eslint": "8.57.1",
+    "eslint": "9.16.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "28.9.0",
-    "eslint-plugin-json": "3.1.0",
+    "eslint-plugin-json": "4.0.1",
+    "eslint-plugin-markdown": "5.1.0",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.37.2",
+    "globals": "15.13.0",
     "html-validate": "8.27.0",
     "husky": "9.1.7",
     "lint-staged": "15.2.10",
-    "markdownlint-cli": "0.43.0",
     "npm-check-updates": "17.1.11",
     "npm-package-json-lint": "8.0.0",
     "npm-run-all": "4.1.5",
@@ -54,6 +60,7 @@
     "stylelint-order": "6.0.4",
     "stylelint-use-logical": "2.1.2",
     "typescript": "5.7.2",
+    "typescript-eslint": "8.18.0",
     "wait-on": "8.0.1"
   },
   "scripts": {
@@ -61,14 +68,12 @@
     "clean": "pnpm -r clean",
     "lint": "npm-run-all --continue-on-error lint:** lint-workspaces",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
-    "lint:js": "eslint . --ext .js,.json,.jsx,.mdx,.ts,.tsx --report-unused-disable-directives",
-    "lint:md": "markdownlint **/*.md --ignore node_modules",
+    "lint:js": "eslint .",
     "lint:package-json": "npmPkgJsonLint **/package.json",
     "lint:package-lock": "pnpm ls --recursive",
     "lint-fix": "npm-run-all --continue-on-error lint-fix:** prettier",
     "lint-fix:css": "stylelint --fix '**/*.{css,scss}'",
-    "lint-fix:js": "eslint . --ext .js,.json,.jsx,.mdx,.ts,.tsx --fix --report-unused-disable-directives",
-    "lint-fix:md": "markdownlint --fix **/*.md",
+    "lint-fix:js": "eslint . --fix",
     "lint-workspaces": "pnpm -r --no-bail lint",
     "plop": "plop",
     "prepare": "husky",
diff --git a/packages/css/README.md b/packages/css/README.md
index 836ac8723b..02a09d94a9 100644
--- a/packages/css/README.md
+++ b/packages/css/README.md
@@ -35,7 +35,7 @@ Other communities only need to overwrite design tokens to use our components wit
 Import the main stylesheet and use the class names in your markup.
 
 <!-- prettier-ignore -->
-```ts
+```tsx
 import "@amsterdam/design-system-assets/font/index.css"
 import "@amsterdam/design-system-css/dist/index.css"
 import "@amsterdam/design-system-tokens/dist/index.css"
diff --git a/packages/react/README.md b/packages/react/README.md
index 8535fde08e..5e87a2ef7c 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -32,7 +32,7 @@ Import the stylesheets for the fonts, tokens, and components.
 Then import and use the components in your JSX.
 
 <!-- prettier-ignore -->
-```ts
+```tsx
 import "@amsterdam/design-system-assets/font/index.css"
 import "@amsterdam/design-system-css/dist/index.css"
 import "@amsterdam/design-system-tokens/dist/index.css"
diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js
index 8baca3ee36..98f433dddf 100644
--- a/packages/react/babel.config.js
+++ b/packages/react/babel.config.js
@@ -1,4 +1,4 @@
-// eslint-disable-next-line no-undef
+/* eslint-disable no-undef */
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-react'],
 }
diff --git a/packages/react/documentation/coding-conventions.md b/packages/react/documentation/coding-conventions.md
index ed38613983..583d5aebf2 100644
--- a/packages/react/documentation/coding-conventions.md
+++ b/packages/react/documentation/coding-conventions.md
@@ -10,7 +10,7 @@ Barrel files allow a consumer to do this:
 Instead of a separate import for each component, while even reaching into the `dist` directory:
 
 <!-- prettier-ignore -->
-```js
+```ts
 import Heading from "@amsterdam/design-system-react/dist/Heading/Heading"
 import Link from "@amsterdam/design-system-react/dist/Link/Link"
 import Paragraph from "@amsterdam/design-system-react/dist/Paragraph/Paragraph"
diff --git a/packages/react/package.json b/packages/react/package.json
index 02a2063220..f93b1c5c00 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -26,7 +26,7 @@
     "build": "rollup -c",
     "build:watch": "rollup -c --watch",
     "clean": "rimraf dist/",
-    "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
+    "lint": "tsc --noEmit --project ./tsconfig.json && tsc --noEmit --project ./tsconfig.test.json",
     "test": "jest --verbose --coverage",
     "watch:test": "jest --verbose --watch"
   },
diff --git a/packages/react/src/ImageSlider/ImageSliderContext.tsx b/packages/react/src/ImageSlider/ImageSliderContext.tsx
index f20148ccd6..7923b9afac 100644
--- a/packages/react/src/ImageSlider/ImageSliderContext.tsx
+++ b/packages/react/src/ImageSlider/ImageSliderContext.tsx
@@ -11,7 +11,6 @@ export type ImageSliderContextValue = {
   isAtEnd: boolean
   goToNextSlide: () => void
   goToPreviousSlide: () => void
-  // eslint-disable-next-line no-unused-vars
   goToSlideId: (id: number) => void
 }
 
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 6372884cfa..05efc51252 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -17,7 +17,6 @@ export type PaginationProps = {
   /** The accessible name for the next page-button. */
   nextVisuallyHiddenLabel?: string
   /** A function to run when the page number changes. */
-  // eslint-disable-next-line no-unused-vars
   onPageChange?: (page: number) => void
   /** The current page number. */
   page?: number
diff --git a/packages/react/src/Tabs/TabsContext.tsx b/packages/react/src/Tabs/TabsContext.tsx
index 805a53efdb..bd530a88a7 100644
--- a/packages/react/src/Tabs/TabsContext.tsx
+++ b/packages/react/src/Tabs/TabsContext.tsx
@@ -11,7 +11,6 @@ export type TabsContextValue = {
   /** The identifier of the tab set. */
   tabsId: string
   /** A function to update the active tab. */
-  // eslint-disable-next-line no-unused-vars
   updateTab: (tab: number) => void
 }
 
diff --git a/packages/react/src/common/useKeyboardFocus.test.tsx b/packages/react/src/common/useKeyboardFocus.test.tsx
index 2dc6e7c529..3e4abf890b 100644
--- a/packages/react/src/common/useKeyboardFocus.test.tsx
+++ b/packages/react/src/common/useKeyboardFocus.test.tsx
@@ -8,7 +8,6 @@ describe('use focus with arrows', () => {
   const onFocusThreeMock = jest.fn()
 
   const getComponent = (rotate: boolean | undefined = undefined) =>
-    // eslint-disable-next-line react/display-name
     function () {
       const ref = useRef<HTMLDivElement>(null)
       const { keyDown } = useKeyboardFocus(ref, {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 953ccaec20..5a4b6db845 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,39 +22,60 @@ importers:
 
   .:
     devDependencies:
+      '@eslint/compat':
+        specifier: 1.2.4
+        version: 1.2.4(eslint@9.16.0)
+      '@eslint/eslintrc':
+        specifier: 3.2.0
+        version: 3.2.0
+      '@eslint/js':
+        specifier: 9.16.0
+        version: 9.16.0
+      '@eslint/json':
+        specifier: 0.8.0
+        version: 0.8.0
+      '@eslint/markdown':
+        specifier: 6.2.1
+        version: 6.2.1
       '@types/node':
         specifier: 22.10.1
         version: 22.10.1
       '@typescript-eslint/eslint-plugin':
-        specifier: 7.18.0
-        version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(typescript@5.7.2)
+        specifier: 8.18.0
+        version: 8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(typescript@5.7.2)
       '@typescript-eslint/parser':
-        specifier: 7.18.0
-        version: 7.18.0(eslint@8.57.1)(typescript@5.7.2)
+        specifier: 8.18.0
+        version: 8.18.0(eslint@9.16.0)(typescript@5.7.2)
       conventional-changelog-conventionalcommits:
         specifier: 8.0.0
         version: 8.0.0
       eslint:
-        specifier: 8.57.1
-        version: 8.57.1
+        specifier: 9.16.0
+        version: 9.16.0
       eslint-config-prettier:
         specifier: 9.1.0
-        version: 9.1.0(eslint@8.57.1)
+        version: 9.1.0(eslint@9.16.0)
       eslint-plugin-import:
         specifier: 2.31.0
-        version: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)
+        version: 2.31.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)
       eslint-plugin-jest:
         specifier: 28.9.0
-        version: 28.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.1))(typescript@5.7.2)
+        version: 28.9.0(@typescript-eslint/eslint-plugin@8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(jest@29.7.0(@types/node@22.10.1))(typescript@5.7.2)
       eslint-plugin-json:
-        specifier: 3.1.0
-        version: 3.1.0
+        specifier: 4.0.1
+        version: 4.0.1
+      eslint-plugin-markdown:
+        specifier: 5.1.0
+        version: 5.1.0(eslint@9.16.0)
       eslint-plugin-mdx:
         specifier: 3.1.5
-        version: 3.1.5(eslint@8.57.1)
+        version: 3.1.5(eslint@9.16.0)
       eslint-plugin-react:
         specifier: 7.37.2
-        version: 7.37.2(eslint@8.57.1)
+        version: 7.37.2(eslint@9.16.0)
+      globals:
+        specifier: 15.13.0
+        version: 15.13.0
       html-validate:
         specifier: 8.27.0
         version: 8.27.0(jest-diff@29.7.0)(jest-snapshot@29.7.0)(jest@29.7.0(@types/node@22.10.1))
@@ -64,9 +85,6 @@ importers:
       lint-staged:
         specifier: 15.2.10
         version: 15.2.10
-      markdownlint-cli:
-        specifier: 0.43.0
-        version: 0.43.0
       npm-check-updates:
         specifier: 17.1.11
         version: 17.1.11
@@ -103,6 +121,9 @@ importers:
       typescript:
         specifier: 5.7.2
         version: 5.7.2
+      typescript-eslint:
+        specifier: 8.18.0
+        version: 8.18.0(eslint@9.16.0)(typescript@5.7.2)
       wait-on:
         specifier: 8.0.1
         version: 8.0.1
@@ -1266,12 +1287,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/eslint-utils@4.4.1':
     resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1282,13 +1297,50 @@ packages:
     resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/js@8.57.1':
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/compat@1.2.4':
+    resolution: {integrity: sha512-S8ZdQj/N69YAtuqFt7653jwcvuUj131+6qGLUyDqfDg1OIoBQ66OCuXC473YQfO2AaxITTutiRQiDwoo7ZLYyg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.10.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
+  '@eslint/config-array@0.19.1':
+    resolution: {integrity: sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.9.1':
+    resolution: {integrity: sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.2.0':
+    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.16.0':
+    resolution: {integrity: sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/json@0.8.0':
+    resolution: {integrity: sha512-DdWL9kT3h0XNRK1EVo4ZvxcdQus30msg1Yligb3VR7dnP+1CPM+qBH+SqVV53++XSEhiUJB702bHOttlaa5vhg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/markdown@6.2.1':
+    resolution: {integrity: sha512-cKVd110hG4ICHmWhIwZJfKmmJBvbiDWyrHODJknAtudKgZtlROGoLX9UEOA0o746zC0hCY4UV4vR+aOGW9S6JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.5':
+    resolution: {integrity: sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.4':
+    resolution: {integrity: sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@gar/promisify@1.1.3':
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
@@ -1303,18 +1355,29 @@ packages:
     resolution: {integrity: sha512-Nl8HCv0hGRSLQ+n1OD4Hk3a+Urwk9HH0vQkAzzCarT4KlA7bRl+6xEiS5PZVwOmjtC7XiH/oNe3as9Fxcr2A1w==}
     engines: {node: '>= 16'}
 
-  '@humanwhocodes/config-array@0.13.0':
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
+  '@humanwhocodes/momoa@3.3.5':
+    resolution: {integrity: sha512-NI9codbQNjw9g4SS/cOizi8JDZ93B3oGVko8M3y0XF3gITaGDSQqea35V8fswWehnRQBLxPfZY5TJnuNhNCEzA==}
+    engines: {node: '>=18'}
+
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.1':
+    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+    engines: {node: '>=18.18'}
 
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
@@ -2320,6 +2383,9 @@ packages:
   '@types/jsdom@20.0.1':
     resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
 
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
@@ -2383,9 +2449,6 @@ packages:
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
-  '@types/unist@2.0.8':
-    resolution: {integrity: sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==}
-
   '@types/unist@3.0.2':
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
 
@@ -2398,61 +2461,43 @@ packages:
   '@types/yargs@17.0.24':
     resolution: {integrity: sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==}
 
-  '@typescript-eslint/eslint-plugin@7.18.0':
-    resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/eslint-plugin@8.18.0':
+    resolution: {integrity: sha512-NR2yS7qUqCL7AIxdJUQf2MKKNDVNaig/dEB0GBLU7D+ZdHgK1NoH/3wsgO3OnPVipn51tG3MAwaODEGil70WEw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/parser@7.18.0':
-    resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/parser@8.18.0':
+    resolution: {integrity: sha512-hgUZ3kTEpVzKaK3uNibExUYm6SKKOmTU2BOxBSvOYwtJEPdVQ70kZJpPjstlnhCHcuc2WGfSbpKlb/69ttyN5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/scope-manager@7.18.0':
-    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
   '@typescript-eslint/scope-manager@8.13.0':
     resolution: {integrity: sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@7.18.0':
-    resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@typescript-eslint/scope-manager@8.18.0':
+    resolution: {integrity: sha512-PNGcHop0jkK2WVYGotk/hxj+UFLhXtGPiGtiaWgVBVP1jhMoMCHlTyJA+hEj4rszoSdLTK3fN4oOatrL0Cp+Xw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@7.18.0':
-    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/type-utils@8.18.0':
+    resolution: {integrity: sha512-er224jRepVAVLnMF2Q7MZJCq5CsdH2oqjP4dT7K6ij09Kyd+R21r7UVJrF0buMVdZS5QRhDzpvzAxHxabQadow==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
   '@typescript-eslint/types@8.13.0':
     resolution: {integrity: sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@7.18.0':
-    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@typescript-eslint/types@8.18.0':
+    resolution: {integrity: sha512-FNYxgyTCAnFwTrzpBGq+zrnoTO4x0c1CKYY5MuUTzpScqmY5fmsh2o3+57lqdI3NZucBDCzDgdEbIaNfAjAHQA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@8.13.0':
     resolution: {integrity: sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==}
@@ -2463,11 +2508,11 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/utils@7.18.0':
-    resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/typescript-estree@8.18.0':
+    resolution: {integrity: sha512-rqQgFRu6yPkauz+ms3nQpohwejS8bvgbPyIDq13cgEDbkXt4LH4OkDMT0/fN1RUtzG8e8AKJyDBoocuQh8qNeg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.56.0
+      typescript: '>=4.8.4 <5.8.0'
 
   '@typescript-eslint/utils@8.13.0':
     resolution: {integrity: sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==}
@@ -2475,14 +2520,21 @@ packages:
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  '@typescript-eslint/visitor-keys@7.18.0':
-    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/utils@8.18.0':
+    resolution: {integrity: sha512-p6GLdY383i7h5b0Qrfbix3Vc3+J2k6QWw6UMUeY5JGfm3C5LbZ4QIZzJNoNOfgyRe0uuYKjvVOsO/jD4SJO+xg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
   '@typescript-eslint/visitor-keys@8.13.0':
     resolution: {integrity: sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/visitor-keys@8.18.0':
+    resolution: {integrity: sha512-pCh/qEA8Lb1wVIqNvBke8UaRjJ6wrAWkJO5yyIbs8Yx6TNGYyfNjOo61tLv+WwLvoLPp4BQ8B7AHKijl8NGUfw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -2556,6 +2608,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -3170,14 +3227,6 @@ packages:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-
-  cross-spawn@7.0.5:
-    resolution: {integrity: sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==}
-    engines: {node: '>= 8'}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3267,15 +3316,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.5:
-    resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.3.6:
     resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
     engines: {node: '>=6.0'}
@@ -3320,10 +3360,6 @@ packages:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
-  deep-extend@0.6.0:
-    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
-    engines: {node: '>=4.0.0'}
-
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3626,9 +3662,9 @@ packages:
       jest:
         optional: true
 
-  eslint-plugin-json@3.1.0:
-    resolution: {integrity: sha512-MrlG2ynFEHe7wDGwbUuFPsaT2b1uhuEFhJ+W1f1u+1C2EkXmTYJp4B1aAdQQ8M+CC3t//N/oRKiIVw14L2HR1g==}
-    engines: {node: '>=12.0'}
+  eslint-plugin-json@4.0.1:
+    resolution: {integrity: sha512-3An5ISV5dq/kHfXdNyY5TUe2ONC3yXFSkLX2gu+W8xAhKhfvrRvkSAeKXCxZqZ0KJLX15ojBuLPyj+UikQMkOA==}
+    engines: {node: '>=18.0'}
 
   eslint-plugin-markdown@3.0.1:
     resolution: {integrity: sha512-8rqoc148DWdGdmYF6WSQFT3uQ6PO7zXYgeBpHAOAakX/zpq+NvFYbDA/H7PYzHajwtmaOzAwfxyl++x0g1/N9A==}
@@ -3636,6 +3672,12 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  eslint-plugin-markdown@5.1.0:
+    resolution: {integrity: sha512-SJeyKko1K6GwI0AN6xeCDToXDkfKZfXcexA6B+O2Wr2btUS9GrC+YgwSyVli5DJnctUHjFXcQ2cqTaAmVoLi2A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8'
+
   eslint-plugin-mdx@3.1.5:
     resolution: {integrity: sha512-lUE7tP7IrIRHU3gTtASDe5u4YM2SvQveYVJfuo82yn3MLh/B/v05FNySURCK4aIxIYF1QYo3IRemQG/lyQzpAg==}
     engines: {node: '>=18.0.0'}
@@ -3648,19 +3690,31 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-scope@8.2.0:
+    resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint@8.57.1:
-    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.16.0:
+    resolution: {integrity: sha512-whp8mSQI4C8VXd+fLgSM0lh3UlmcFtVwUQjyKCFfsp+2ItAIYhlq/hqGahGqHE6cv9unM41VlqKk2VtKYR2TaA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -3777,9 +3831,9 @@ packages:
     resolution: {integrity: sha512-ej8ksPF4x6e5wvK9yevct0UCXh8TTFlWGVLlgjZuoBH1HwjIfKE/IdL5mq89sFA7zELi1VhKpmtDnrs7zWyeyg==}
     engines: {node: '>=14'}
 
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
   file-entry-cache@9.1.0:
     resolution: {integrity: sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==}
@@ -3824,17 +3878,14 @@ packages:
     resolution: {integrity: sha512-Gq/a6YCi8zexmGHMuJwahTGzXlAZAOsbCVKduWXC6TlLCjjFRlExMJc4GC2NYPYZ0r/brw9P7CpRgQmlPVeOoA==}
     engines: {node: '>= 10.13.0'}
 
-  flat-cache@3.1.1:
-    resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
-    engines: {node: '>=12.0.0'}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
   flat-cache@5.0.0:
     resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==}
     engines: {node: '>=18'}
 
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
-
   flatted@3.3.2:
     resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
 
@@ -4002,9 +4053,13 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
-  globals@13.22.0:
-    resolution: {integrity: sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==}
-    engines: {node: '>=8'}
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.13.0:
+    resolution: {integrity: sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==}
+    engines: {node: '>=18'}
 
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
@@ -4835,10 +4890,6 @@ packages:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
     engines: {'0': node >= 0.2.0}
 
-  jsonpointer@5.0.1:
-    resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
-    engines: {node: '>=0.10.0'}
-
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -4887,9 +4938,6 @@ packages:
     resolution: {integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  linkify-it@5.0.0:
-    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
-
   lint-staged@15.2.10:
     resolution: {integrity: sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==}
     engines: {node: '>=18.12.0'}
@@ -5030,26 +5078,9 @@ packages:
   map-or-similar@1.5.0:
     resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==}
 
-  markdown-it@14.1.0:
-    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
-    hasBin: true
-
   markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
 
-  markdownlint-cli@0.43.0:
-    resolution: {integrity: sha512-6vwurKK4B21eyYzwgX6ph13cZS7hE6LZfcS8QyD722CyxVD2RtAvbZK2p7k+FZbbKORulEuwl+hJaEq1l6/hoQ==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  markdownlint-micromark@0.1.12:
-    resolution: {integrity: sha512-RlB6EwMGgc0sxcIhOQ2+aq7Zw1V2fBnzbXKGgYK/mVWdT7cz34fteKSwfYeo4rL6+L/q2tyC9QtD/PgZbkdyJQ==}
-    engines: {node: '>=18'}
-
-  markdownlint@0.36.1:
-    resolution: {integrity: sha512-s73fU2CQN7WCgjhaQUQ8wYESQNzGRNOKDd+3xgVqu8kuTEhmwepd/mxOv1LR2oV046ONrTLBFsM7IoKWNvmy5g==}
-    engines: {node: '>=18'}
-
   mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
@@ -5062,6 +5093,9 @@ packages:
   mdast-util-from-markdown@2.0.0:
     resolution: {integrity: sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==}
 
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
   mdast-util-gfm-autolink-literal@2.0.0:
     resolution: {integrity: sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==}
 
@@ -5116,9 +5150,6 @@ packages:
   mdn-data@2.13.0:
     resolution: {integrity: sha512-OmD1FDyP706JqPqtLqgev/QCK0qudBdUuKKag6InQ/elEw3Cm2AhXYktcSggdc/vWniYqIsofkcteMEOioW5vQ==}
 
-  mdurl@2.0.0:
-    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
-
   memfs@4.9.3:
     resolution: {integrity: sha512-bsYSSnirtYTWi1+OPMFb0M048evMKyUYe0EbtuGQgq6BVQM1g1W8/KIUJCCvjgI/El0j6Q4WsmMiBwLUBSw8LA==}
     engines: {node: '>= 4.0.0'}
@@ -5939,10 +5970,6 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  punycode.js@2.3.1:
-    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
-    engines: {node: '>=6'}
-
   punycode@1.4.1:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
 
@@ -6235,10 +6262,6 @@ packages:
     resolution: {integrity: sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==}
     engines: {node: '>=0.12.0'}
 
-  run-con@1.3.2:
-    resolution: {integrity: sha512-CcfE+mYiTcKEzg0IqS08+efdnH0oJ3zV0wSUFBNrMHMuxCtXvBCLzCJHatwuXDcu/RlhjTziTo/a1ruQik6/Yg==}
-    hasBin: true
-
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -6398,10 +6421,6 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
-  smol-toml@1.3.1:
-    resolution: {integrity: sha512-tEYNll18pPKHroYSmLLrksq233j021G0giwW7P3D24jC54pQ5W5BXMsQ/Mvw1OJCmEYDgY+lrzT+3nNUtoNfXQ==}
-    engines: {node: '>= 18'}
-
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
@@ -6720,9 +6739,6 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   thingies@1.21.0:
     resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==}
     engines: {node: '>=10.18'}
@@ -6789,12 +6805,6 @@ packages:
   trough@2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
 
-  ts-api-utils@1.3.0:
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-
   ts-api-utils@1.4.0:
     resolution: {integrity: sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==}
     engines: {node: '>=16'}
@@ -6893,14 +6903,18 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
+  typescript-eslint@8.18.0:
+    resolution: {integrity: sha512-Xq2rRjn6tzVpAyHr3+nmSg1/9k9aIHnJ2iZeOH7cfGOWqTkXTm3kwpQglEuLGdNrYvPF+2gtAs+/KF5rjVo+WQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
   typescript@5.7.2:
     resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  uc.micro@2.1.0:
-    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
-
   uglify-js@3.17.4:
     resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
     engines: {node: '>=0.8.0'}
@@ -8312,24 +8326,37 @@ snapshots:
   '@esbuild/win32-x64@0.24.0':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.57.1)':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.16.0)':
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.16.0
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)':
+  '@eslint-community/regexpp@4.10.0': {}
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/compat@1.2.4(eslint@9.16.0)':
+    optionalDependencies:
+      eslint: 9.16.0
+
+  '@eslint/config-array@0.19.1':
     dependencies:
-      eslint: 8.57.1
-      eslint-visitor-keys: 3.4.3
+      '@eslint/object-schema': 2.1.5
+      debug: 4.3.7
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@eslint-community/regexpp@4.10.0': {}
+  '@eslint/core@0.9.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
 
-  '@eslint/eslintrc@2.1.4':
+  '@eslint/eslintrc@3.2.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.6
-      espree: 9.6.1
-      globals: 13.22.0
+      debug: 4.3.7
+      espree: 10.3.0
+      globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.0
       js-yaml: 4.1.0
@@ -8338,7 +8365,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.57.1': {}
+  '@eslint/js@9.16.0': {}
+
+  '@eslint/json@0.8.0':
+    dependencies:
+      '@eslint/plugin-kit': 0.2.4
+      '@humanwhocodes/momoa': 3.3.5
+
+  '@eslint/markdown@6.2.1':
+    dependencies:
+      '@eslint/plugin-kit': 0.2.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm: 3.0.0
+      micromark-extension-gfm: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/object-schema@2.1.5': {}
+
+  '@eslint/plugin-kit@0.2.4':
+    dependencies:
+      levn: 0.4.1
 
   '@gar/promisify@1.1.3': {}
 
@@ -8352,17 +8399,20 @@ snapshots:
     dependencies:
       kleur: 4.1.5
 
-  '@humanwhocodes/config-array@0.13.0':
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.6
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/object-schema@2.0.3': {}
+  '@humanwhocodes/momoa@3.3.5': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.1': {}
 
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
@@ -9473,6 +9523,8 @@ snapshots:
       '@types/tough-cookie': 4.0.2
       parse5: 7.1.2
 
+  '@types/json-schema@7.0.15': {}
+
   '@types/json5@0.0.29': {}
 
   '@types/liftoff@4.0.3':
@@ -9484,7 +9536,7 @@ snapshots:
 
   '@types/mdast@3.0.12':
     dependencies:
-      '@types/unist': 2.0.8
+      '@types/unist': 2.0.11
 
   '@types/mdast@4.0.3':
     dependencies:
@@ -9534,8 +9586,6 @@ snapshots:
 
   '@types/unist@2.0.11': {}
 
-  '@types/unist@2.0.8': {}
-
   '@types/unist@3.0.2': {}
 
   '@types/uuid@9.0.8': {}
@@ -9546,77 +9596,59 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.0
 
-  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(typescript@5.7.2)':
+  '@typescript-eslint/eslint-plugin@8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(typescript@5.7.2)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.7.2)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.7.2)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.7.2)
-      '@typescript-eslint/visitor-keys': 7.18.0
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/type-utils': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.0
+      eslint: 9.16.0
       graphemer: 1.4.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.7.2)
-    optionalDependencies:
+      ts-api-utils: 1.4.0(typescript@5.7.2)
       typescript: 5.7.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2)':
+  '@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.7.2)
-      '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.3.5
-      eslint: 8.57.1
-    optionalDependencies:
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.0
+      debug: 4.3.7
+      eslint: 9.16.0
       typescript: 5.7.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@7.18.0':
-    dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
-
   '@typescript-eslint/scope-manager@8.13.0':
     dependencies:
       '@typescript-eslint/types': 8.13.0
       '@typescript-eslint/visitor-keys': 8.13.0
 
-  '@typescript-eslint/type-utils@7.18.0(eslint@8.57.1)(typescript@5.7.2)':
+  '@typescript-eslint/scope-manager@8.18.0':
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.7.2)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
+
+  '@typescript-eslint/type-utils@8.18.0(eslint@9.16.0)(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
       debug: 4.3.7
-      eslint: 8.57.1
-      ts-api-utils: 1.3.0(typescript@5.7.2)
-    optionalDependencies:
+      eslint: 9.16.0
+      ts-api-utils: 1.4.0(typescript@5.7.2)
       typescript: 5.7.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@7.18.0': {}
-
   '@typescript-eslint/types@8.13.0': {}
 
-  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.7.2)':
-    dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.3.5
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.7.2)
-    optionalDependencies:
-      typescript: 5.7.2
-    transitivePeerDependencies:
-      - supports-color
+  '@typescript-eslint/types@8.18.0': {}
 
   '@typescript-eslint/typescript-estree@8.13.0(typescript@5.7.2)':
     dependencies:
@@ -9633,38 +9665,52 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.7.2)':
+  '@typescript-eslint/typescript-estree@8.18.0(typescript@5.7.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.7.2)
-      eslint: 8.57.1
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
+      debug: 4.3.7
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.4.0(typescript@5.7.2)
+      typescript: 5.7.2
     transitivePeerDependencies:
       - supports-color
-      - typescript
 
-  '@typescript-eslint/utils@8.13.0(eslint@8.57.1)(typescript@5.7.2)':
+  '@typescript-eslint/utils@8.13.0(eslint@9.16.0)(typescript@5.7.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0)
       '@typescript-eslint/scope-manager': 8.13.0
       '@typescript-eslint/types': 8.13.0
       '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.7.2)
-      eslint: 8.57.1
+      eslint: 9.16.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/visitor-keys@7.18.0':
+  '@typescript-eslint/utils@8.18.0(eslint@9.16.0)(typescript@5.7.2)':
     dependencies:
-      '@typescript-eslint/types': 7.18.0
-      eslint-visitor-keys: 3.4.3
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      eslint: 9.16.0
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@typescript-eslint/visitor-keys@8.13.0':
     dependencies:
       '@typescript-eslint/types': 8.13.0
       eslint-visitor-keys: 3.4.3
 
+  '@typescript-eslint/visitor-keys@8.18.0':
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      eslint-visitor-keys: 4.2.0
+
   '@ungap/structured-clone@1.2.0': {}
 
   '@vitejs/plugin-react@4.3.4(vite@6.0.3(@types/node@22.10.1)(sass@1.82.0)(terser@5.17.1)(yaml@2.5.0))':
@@ -9727,7 +9773,7 @@ snapshots:
 
   acorn-globals@7.0.1:
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.14.0
       acorn-walk: 8.2.0
 
   acorn-jsx@5.3.2(acorn@8.10.0):
@@ -9738,12 +9784,18 @@ snapshots:
     dependencies:
       acorn: 8.11.3
 
+  acorn-jsx@5.3.2(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
   acorn-walk@8.2.0: {}
 
   acorn@8.10.0: {}
 
   acorn@8.11.3: {}
 
+  acorn@8.14.0: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.3.7
@@ -10493,18 +10545,6 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
-  cross-spawn@7.0.3:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
-  cross-spawn@7.0.5:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -10590,10 +10630,6 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
-  debug@4.3.5:
-    dependencies:
-      ms: 2.1.2
-
   debug@4.3.6:
     dependencies:
       ms: 2.1.2
@@ -10619,8 +10655,6 @@ snapshots:
 
   deep-eql@5.0.2: {}
 
-  deep-extend@0.6.0: {}
-
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -10971,9 +11005,9 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-prettier@9.1.0(eslint@8.57.1):
+  eslint-config-prettier@9.1.0(eslint@9.16.0):
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.16.0
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
@@ -10983,11 +11017,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-mdx@3.1.5(eslint@8.57.1):
+  eslint-mdx@3.1.5(eslint@9.16.0):
     dependencies:
       acorn: 8.11.3
       acorn-jsx: 5.3.2(acorn@8.11.3)
-      eslint: 8.57.1
+      eslint: 9.16.0
       espree: 9.6.1
       estree-util-visit: 2.0.0
       remark-mdx: 3.0.0
@@ -11003,17 +11037,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint@9.16.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.7.2)
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
+      eslint: 9.16.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -11022,9 +11056,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.57.1
+      eslint: 9.16.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint@9.16.0)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -11036,40 +11070,47 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/parser': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@28.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.1))(typescript@5.7.2):
+  eslint-plugin-jest@28.9.0(@typescript-eslint/eslint-plugin@8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(jest@29.7.0(@types/node@22.10.1))(typescript@5.7.2):
     dependencies:
-      '@typescript-eslint/utils': 8.13.0(eslint@8.57.1)(typescript@5.7.2)
-      eslint: 8.57.1
+      '@typescript-eslint/utils': 8.13.0(eslint@9.16.0)(typescript@5.7.2)
+      eslint: 9.16.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/eslint-plugin': 8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(typescript@5.7.2)
       jest: 29.7.0(@types/node@22.10.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-json@3.1.0:
+  eslint-plugin-json@4.0.1:
     dependencies:
       lodash: 4.17.21
       vscode-json-languageservice: 4.2.1
 
-  eslint-plugin-markdown@3.0.1(eslint@8.57.1):
+  eslint-plugin-markdown@3.0.1(eslint@9.16.0):
+    dependencies:
+      eslint: 9.16.0
+      mdast-util-from-markdown: 0.8.5
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-markdown@5.1.0(eslint@9.16.0):
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.16.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-mdx@3.1.5(eslint@8.57.1):
+  eslint-plugin-mdx@3.1.5(eslint@9.16.0):
     dependencies:
-      eslint: 8.57.1
-      eslint-mdx: 3.1.5(eslint@8.57.1)
-      eslint-plugin-markdown: 3.0.1(eslint@8.57.1)
+      eslint: 9.16.0
+      eslint-mdx: 3.1.5(eslint@9.16.0)
+      eslint-plugin-markdown: 3.0.1(eslint@9.16.0)
       remark-mdx: 3.0.0
       remark-parse: 11.0.0
       remark-stringify: 11.0.0
@@ -11079,7 +11120,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-react@7.37.2(eslint@8.57.1):
+  eslint-plugin-react@7.37.2(eslint@9.16.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlast: 1.2.5
@@ -11087,7 +11128,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.1.0
-      eslint: 8.57.1
+      eslint: 9.16.0
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -11101,56 +11142,60 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.2.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint@8.57.1:
+  eslint-visitor-keys@4.2.0: {}
+
+  eslint@9.16.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.10.0
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0)
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.19.1
+      '@eslint/core': 0.9.1
+      '@eslint/eslintrc': 3.2.0
+      '@eslint/js': 9.16.0
+      '@eslint/plugin-kit': 0.2.4
+      '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
+      '@humanwhocodes/retry': 0.4.1
+      '@types/estree': 1.0.6
+      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.6
-      doctrine: 3.0.0
+      cross-spawn: 7.0.6
+      debug: 4.3.7
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       esquery: 1.5.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.22.0
-      graphemer: 1.4.0
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
 
+  espree@10.3.0:
+    dependencies:
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
+
   espree@9.6.1:
     dependencies:
       acorn: 8.10.0
@@ -11204,7 +11249,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -11275,9 +11320,9 @@ snapshots:
       escape-string-regexp: 5.0.0
       is-unicode-supported: 1.3.0
 
-  file-entry-cache@6.0.1:
+  file-entry-cache@8.0.0:
     dependencies:
-      flat-cache: 3.1.1
+      flat-cache: 4.0.1
 
   file-entry-cache@9.1.0:
     dependencies:
@@ -11330,19 +11375,16 @@ snapshots:
 
   flagged-respawn@2.0.0: {}
 
-  flat-cache@3.1.1:
+  flat-cache@4.0.1:
     dependencies:
-      flatted: 3.3.1
+      flatted: 3.3.2
       keyv: 4.5.4
-      rimraf: 3.0.2
 
   flat-cache@5.0.0:
     dependencies:
       flatted: 3.3.2
       keyv: 4.5.4
 
-  flatted@3.3.1: {}
-
   flatted@3.3.2: {}
 
   follow-redirects@1.15.6: {}
@@ -11536,9 +11578,9 @@ snapshots:
 
   globals@11.12.0: {}
 
-  globals@13.22.0:
-    dependencies:
-      type-fest: 0.20.2
+  globals@14.0.0: {}
+
+  globals@15.13.0: {}
 
   globalthis@1.0.3:
     dependencies:
@@ -12531,8 +12573,6 @@ snapshots:
 
   jsonparse@1.3.1: {}
 
-  jsonpointer@5.0.1: {}
-
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.8
@@ -12580,10 +12620,6 @@ snapshots:
 
   lines-and-columns@2.0.4: {}
 
-  linkify-it@5.0.0:
-    dependencies:
-      uc.micro: 2.1.0
-
   lint-staged@15.2.10:
     dependencies:
       chalk: 5.3.0
@@ -12770,37 +12806,8 @@ snapshots:
 
   map-or-similar@1.5.0: {}
 
-  markdown-it@14.1.0:
-    dependencies:
-      argparse: 2.0.1
-      entities: 4.5.0
-      linkify-it: 5.0.0
-      mdurl: 2.0.0
-      punycode.js: 2.3.1
-      uc.micro: 2.1.0
-
   markdown-table@3.0.3: {}
 
-  markdownlint-cli@0.43.0:
-    dependencies:
-      commander: 12.1.0
-      glob: 11.0.0
-      ignore: 6.0.2
-      js-yaml: 4.1.0
-      jsonc-parser: 3.3.1
-      jsonpointer: 5.0.1
-      markdownlint: 0.36.1
-      minimatch: 10.0.1
-      run-con: 1.3.2
-      smol-toml: 1.3.1
-
-  markdownlint-micromark@0.1.12: {}
-
-  markdownlint@0.36.1:
-    dependencies:
-      markdown-it: 14.1.0
-      markdownlint-micromark: 0.1.12
-
   mathml-tag-names@2.1.3: {}
 
   mdast-util-find-and-replace@3.0.1:
@@ -12837,6 +12844,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.3
+      '@types/unist': 3.0.2
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-decode-string: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-gfm-autolink-literal@2.0.0:
     dependencies:
       '@types/mdast': 4.0.3
@@ -12849,7 +12873,7 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
       micromark-util-normalize-identifier: 2.0.0
     transitivePeerDependencies:
@@ -12858,7 +12882,7 @@ snapshots:
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.3
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -12868,7 +12892,7 @@ snapshots:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
       markdown-table: 3.0.3
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -12877,14 +12901,14 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm-autolink-literal: 2.0.0
       mdast-util-gfm-footnote: 2.0.0
       mdast-util-gfm-strikethrough: 2.0.0
@@ -12900,7 +12924,7 @@ snapshots:
       '@types/hast': 3.0.3
       '@types/mdast': 4.0.3
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -12913,7 +12937,7 @@ snapshots:
       '@types/unist': 3.0.2
       ccount: 2.0.1
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
       parse-entities: 4.0.1
       stringify-entities: 4.0.3
@@ -12925,7 +12949,7 @@ snapshots:
 
   mdast-util-mdx@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-mdx-expression: 2.0.0
       mdast-util-mdx-jsx: 3.0.0
       mdast-util-mdxjs-esm: 2.0.1
@@ -12939,7 +12963,7 @@ snapshots:
       '@types/hast': 3.0.3
       '@types/mdast': 4.0.3
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -13829,7 +13853,7 @@ snapshots:
 
   parse-entities@4.0.1:
     dependencies:
-      '@types/unist': 2.0.8
+      '@types/unist': 2.0.11
       character-entities: 2.0.2
       character-entities-legacy: 3.0.0
       character-reference-invalid: 2.0.1
@@ -13880,7 +13904,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       chalk: 4.1.2
       ci-info: 3.8.0
-      cross-spawn: 7.0.5
+      cross-spawn: 7.0.6
       find-yarn-workspace-root: 2.0.0
       fs-extra: 9.1.0
       json-stable-stringify: 1.1.1
@@ -14069,8 +14093,6 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  punycode.js@2.3.1: {}
-
   punycode@1.4.1: {}
 
   punycode@2.3.0: {}
@@ -14442,13 +14464,6 @@ snapshots:
 
   run-async@3.0.0: {}
 
-  run-con@1.3.2:
-    dependencies:
-      deep-extend: 0.6.0
-      ini: 4.1.3
-      minimist: 1.2.8
-      strip-json-comments: 3.1.1
-
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -14648,8 +14663,6 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
-  smol-toml@1.3.1: {}
-
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -15058,8 +15071,6 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.2
 
-  text-table@0.2.0: {}
-
   thingies@1.21.0(tslib@2.8.1):
     dependencies:
       tslib: 2.8.1
@@ -15110,10 +15121,6 @@ snapshots:
 
   trough@2.1.0: {}
 
-  ts-api-utils@1.3.0(typescript@5.7.2):
-    dependencies:
-      typescript: 5.7.2
-
   ts-api-utils@1.4.0(typescript@5.7.2):
     dependencies:
       typescript: 5.7.2
@@ -15225,9 +15232,17 @@ snapshots:
 
   typedarray@0.0.6: {}
 
-  typescript@5.7.2: {}
+  typescript-eslint@8.18.0(eslint@9.16.0)(typescript@5.7.2):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.16.0)(typescript@5.7.2))(eslint@9.16.0)(typescript@5.7.2)
+      '@typescript-eslint/parser': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.0(eslint@9.16.0)(typescript@5.7.2)
+      eslint: 9.16.0
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
 
-  uc.micro@2.1.0: {}
+  typescript@5.7.2: {}
 
   uglify-js@3.17.4:
     optional: true
@@ -15327,7 +15342,7 @@ snapshots:
 
   unist-util-stringify-position@2.0.3:
     dependencies:
-      '@types/unist': 2.0.8
+      '@types/unist': 2.0.11
 
   unist-util-stringify-position@4.0.0:
     dependencies:
@@ -15348,7 +15363,7 @@ snapshots:
 
   unplugin@1.7.1:
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
       chokidar: 3.5.3
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.1
diff --git a/proprietary/react-icons/README.md b/proprietary/react-icons/README.md
index 7fe4eb2d92..0ba6b47575 100644
--- a/proprietary/react-icons/README.md
+++ b/proprietary/react-icons/README.md
@@ -19,13 +19,12 @@ npm install @amsterdam/design-system-react-icons
 
 Import the component for the icon you need, as well as the generic Icon component, and use them in your JSX.
 
-```ts
-import { Icon } from '@amsterdam/design-system-react'
-import { SearchIcon } from '@amsterdam/design-system-react-icons'
+<!-- prettier-ignore -->
+```tsx
+import { Icon } from "@amsterdam/design-system-react"
+import { SearchIcon } from "@amsterdam/design-system-react-icons"
 
-export const App = () => (
-  <Icon svg={SearchIcon} />
-)
+export const App = () => <Icon svg={SearchIcon} />
 ```
 
 ## Updating
diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md
index ed4a0f2646..abab112e46 100644
--- a/proprietary/tokens/README.md
+++ b/proprietary/tokens/README.md
@@ -165,7 +165,7 @@ Here, tokens start their name with a prefix of `ams.`.
 Use ‘dot notation’ or square brackets to access the tokens.
 
 <!-- prettier-ignore -->
-```ts
+```tsx
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
 const { ams } = tokens
@@ -177,9 +177,9 @@ Import and merge the compact tokens if you need them.
 Then you can use the tokens in scripting or css-in-js libraries.
 
 <!-- prettier-ignore -->
-```ts
-import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
+```tsx
 import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json"
+import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
 
 const { ams } = { ...spaciousTokens, ...compactTokens }
 ```
diff --git a/storybook/src/components/FieldSet/FieldSet.docs.mdx b/storybook/src/components/FieldSet/FieldSet.docs.mdx
index 4bd1217f67..314b955738 100644
--- a/storybook/src/components/FieldSet/FieldSet.docs.mdx
+++ b/storybook/src/components/FieldSet/FieldSet.docs.mdx
@@ -71,12 +71,8 @@ Screen reader users will no longer be able to skip the description,
 but we think that is preferable to missing the description entirely.
 Add an `id` to the Field Set and the description, and add both to the `aria-labelledby` attribute of Field Set, like so:
 
-```jsx
-<Fieldset
-  aria-labelledby="fieldset description"
-  id="fieldset"
-  legend="Label"
->
+```tsx
+<FieldSet aria-labelledby="fieldset description" id="fieldset" legend="Label">
   <Paragraph id="description">Description</Paragraph>
   ...
 </FieldSet>
@@ -92,12 +88,8 @@ Because of [the NVDA bug mentioned earlier](https://github.com/nvaccess/nvda/iss
 we add the Error Message text to the label as well.
 Add an `id` to the Field Set and the Error Message, and add both to the `aria-labelledby` attribute of Field Set, like so:
 
-```jsx
-<Fieldset
-  aria-labelledby="fieldset error"
-  id="fieldset"
-  legend="Label"
->
+```tsx
+<FieldSet aria-labelledby="fieldset error" id="fieldset" legend="Label">
   <ErrorMessage id="error">Error message</ErrorMessage>
   ...
 </FieldSet>
diff --git a/storybook/src/components/Grid/Grid.stories.tsx b/storybook/src/components/Grid/Grid.stories.tsx
index e38db74efd..1b27aaa31a 100644
--- a/storybook/src/components/Grid/Grid.stories.tsx
+++ b/storybook/src/components/Grid/Grid.stories.tsx
@@ -54,6 +54,7 @@ const meta = {
 
 export default meta
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const cellMeta = {
   component: Grid.Cell,
   argTypes: {
diff --git a/storybook/src/components/Icon/Icon.docs.mdx b/storybook/src/components/Icon/Icon.docs.mdx
index 0d27719e53..7decdc5170 100644
--- a/storybook/src/components/Icon/Icon.docs.mdx
+++ b/storybook/src/components/Icon/Icon.docs.mdx
@@ -16,13 +16,13 @@ import { StatusBadge } from "../../docs/components/StatusBadge";
 Use the React Icon component together with a React SVG component from `@amsterdam/design-system-react-icons`.
 Import this SVG as follows:
 
-```js
+```tsx
 import { EmailIcon } from "@amsterdam/design-system-react-icons";
 ```
 
 Then, you can use it in the component like this:
 
-```jsx
+```tsx
 <Icon svg={EmailIcon} />
 ```
 
diff --git a/storybook/src/components/LinkList/LinkList.stories.tsx b/storybook/src/components/LinkList/LinkList.stories.tsx
index f7a4733c59..384667427c 100644
--- a/storybook/src/components/LinkList/LinkList.stories.tsx
+++ b/storybook/src/components/LinkList/LinkList.stories.tsx
@@ -17,6 +17,7 @@ const meta = {
 
 export default meta
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const linkMeta = {
   component: LinkList.Link,
 } satisfies Meta<typeof LinkList.Link>
diff --git a/storybook/src/docs/developer-guide/getting-started.docs.mdx b/storybook/src/docs/developer-guide/getting-started.docs.mdx
index 67e0f585d6..b0704d2449 100644
--- a/storybook/src/docs/developer-guide/getting-started.docs.mdx
+++ b/storybook/src/docs/developer-guide/getting-started.docs.mdx
@@ -16,17 +16,18 @@ npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amster
 
 Import the components and stylesheets you need, for example:
 
-```javascript
-import "@amsterdam/design-system-assets/font/index.css";
-import "@amsterdam/design-system-css/dist/index.css";
-import "@amsterdam/design-system-tokens/dist/index.css";
-import { Paragraph } from "@amsterdam/design-system-react";
+{/* prettier-ignore */}
+```tsx
+import "@amsterdam/design-system-assets/font/index.css"
+import "@amsterdam/design-system-css/dist/index.css"
+import "@amsterdam/design-system-tokens/dist/index.css"
+import { Paragraph } from "@amsterdam/design-system-react"
 
 function App() {
-  return <Paragraph>Hello, world!</Paragraph>;
+  return <Paragraph>Hello, world!</Paragraph>
 }
 
-export default App;
+export default App
 ```
 
 ## Compact Mode
@@ -35,9 +36,10 @@ For applications, the large text and ample white space of the theme can be count
 That’s why there is a compact mode.
 To use the compact mode, import the compact CSS **after** the theme CSS, like so:
 
-```javascript
-import "@amsterdam/design-system-tokens/dist/index.css";
-import "@amsterdam/design-system-tokens/dist/compact.css";
+{/* prettier-ignore */}
+```ts
+import "@amsterdam/design-system-tokens/dist/index.css"
+import "@amsterdam/design-system-tokens/dist/compact.css"
 ```
 
 ## Contributing
diff --git a/storybook/src/docs/developer-guide/routing-libraries.docs.mdx b/storybook/src/docs/developer-guide/routing-libraries.docs.mdx
index 110cf30816..f33f30dfb7 100644
--- a/storybook/src/docs/developer-guide/routing-libraries.docs.mdx
+++ b/storybook/src/docs/developer-guide/routing-libraries.docs.mdx
@@ -17,7 +17,7 @@ Some examples for common routing libraries:
 You can hook into the Next router using the `legacyBehaviour` and `passHref` props on the Next link component, like so:
 
 {/* prettier-ignore */}
-```js
+```tsx
 import { Link } from "@amsterdam/design-system-react"
 import NextLink from "next/link"
 
@@ -32,9 +32,9 @@ React Router allows you to hook into their routing functionality with [the useLi
 You can use this hook directly on a link component, or you can write a component which adds this functionality to the link component you pass to it, like so:
 
 {/* prettier-ignore */}
-```js
+```jsx
 import { Link } from "@amsterdam/design-system-react"
-import { useLinkClickHandler, useHref } from "react-router-dom"
+import { useHref, useLinkClickHandler } from "react-router-dom"
 
 const ReactRouterLink = ({ component, to, ...restProps }) => {
   const Tag = component
diff --git a/tsconfig.json b/tsconfig.json
index aebad59b73..f2aae17722 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,23 +1,24 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
-    "target": "es2020",
-    "module": "es2020",
+    "jsx": "react-jsx",
     "lib": ["es2020", "dom"],
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react-jsx"
+    "module": "es2020",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2020"
   },
-  "exclude": ["**/node_modules/*"]
+  "exclude": ["**/node_modules/*"],
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx", "next.config.mjs", "eslint.config.mjs"]
 }

From fa4221186e16bed6eb70fa9bebbd13c2411edc12 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 18 Dec 2024 15:28:51 +0100
Subject: [PATCH 2/6] chore: Add missing keys to Breakout stories (#1794)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 .../src/components/Breakout/Breakout.stories.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx
index a5fbee7d49..069f8c90c2 100644
--- a/storybook/src/components/Breakout/Breakout.stories.tsx
+++ b/storybook/src/components/Breakout/Breakout.stories.tsx
@@ -26,12 +26,13 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: [
-      <Breakout.Cell colSpan="all" has="spotlight" rowSpan={{ medium: 2, narrow: 2, wide: 1 }} rowStart={2}>
+      <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={{ medium: 2, narrow: 2, wide: 1 }} rowStart={2}>
         <Spotlight />
       </Breakout.Cell>,
       <Breakout.Cell
         colSpan={{ medium: 8, narrow: 4, wide: 6 }}
         colStart={1}
+        key={2}
         rowStart={{ medium: 3, narrow: 3, wide: 2 }}
       >
         <Paragraph inverseColor>
@@ -42,6 +43,7 @@ export const Default: Story = {
         colSpan={{ medium: 8, narrow: 4, wide: 6 }}
         colStart={{ medium: 1, narrow: 1, wide: 7 }}
         has="figure"
+        key={3}
         rowSpan={2}
         rowStart={1}
       >
@@ -54,15 +56,16 @@ export const Default: Story = {
 export const VerticalLayout: Story = {
   args: {
     children: [
-      <Breakout.Cell colSpan="all" has="figure" rowSpan={2} rowStart={1}>
-        <Image alt="" src="https://picsum.photos/1600/900" />
-      </Breakout.Cell>,
-      <Breakout.Cell colSpan="all" has="spotlight" rowSpan={2} rowStart={2}>
+      <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={2} rowStart={2}>
         <Spotlight />
       </Breakout.Cell>,
+      <Breakout.Cell colSpan="all" has="figure" key={2} rowSpan={2} rowStart={1}>
+        <Image alt="" src="https://picsum.photos/1600/900" />
+      </Breakout.Cell>,
       <Breakout.Cell
         colSpan={{ medium: 6, narrow: 4, wide: 8 }}
         colStart={{ medium: 2, narrow: 1, wide: 3 }}
+        key={3}
         rowStart={3}
       >
         <Paragraph className="ams-mb--sm" inverseColor>

From 4f4409e22b495b0d479a40e2623846613ea55bdb Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 20 Dec 2024 11:36:16 +0100
Subject: [PATCH 3/6] chore: Use Sass @use in plop template and README (#1793)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 plopfile.mjs                 |  2 +-
 proprietary/tokens/README.md | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/plopfile.mjs b/plopfile.mjs
index 7b0b6cc6ce..87e2b7f99a 100644
--- a/plopfile.mjs
+++ b/plopfile.mjs
@@ -52,7 +52,7 @@ export default function (plop) {
         type: 'append',
         path: 'packages/css/src/components/index.scss',
         pattern: `/* Append here */`,
-        template: `@import "./{{kebabCase name}}/{{kebabCase name}}";`,
+        template: `@use "./{{kebabCase name}}/{{kebabCase name}}";`,
       },
       {
         type: 'add',
diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md
index abab112e46..cec5539de2 100644
--- a/proprietary/tokens/README.md
+++ b/proprietary/tokens/README.md
@@ -146,16 +146,22 @@ Note that redefining the value of a token is a much better approach than redecla
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.
+As they are already prefixed, the namespace that Sass would assign isn’t necessary.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/index.scss"
+@use "@amsterdam/design-system-tokens/dist/index.scss" as *;
 ```
 
-Import the compact tokens if you need them.
-Sass will override spacious values automatically.
+Import the compact tokens if needed.
+Note that Sass doesn't allow importing them alongside the default set due to naming conflicts.
+Address these tokens through the `compact` namespace and do not use the spacious tokens they replace.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/compact.scss"
+@use "@amsterdam/design-system-tokens/dist/compact.scss";
+
+.class {
+  padding-block: compact.$ams-space-md;
+}
 ```
 
 ## Usage in JavaScript

From 122d15b0bcb13352dcc45d03ebaa9a6ea1ebad3a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 20 Dec 2024 11:40:57 +0100
Subject: [PATCH 4/6] chore: Sort imports and exports in index files of Sass
 and React (#1796)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 packages/css/src/components/index.scss | 86 +++++++++++------------
 packages/react/src/index.ts            | 94 +++++++++++++-------------
 2 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index f8417eaa30..0b52b1e570 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -4,67 +4,67 @@
  */
 
 /* Append here */
-@use "file-list/file-list";
-@use "action-group/action-group";
-@use "breakout/breakout";
-@use "hint/hint";
-@use "password-input/password-input";
-@use "form-error-list/form-error-list";
-@use "image-slider/image-slider";
-@use "table-of-contents/table-of-contents";
-@use "error-message/error-message";
-@use "file-input/file-input";
-@use "field/field";
-@use "select/select";
-@use "time-input/time-input";
-@use "date-input/date-input";
-@use "document/document";
-@use "avatar/avatar";
-@use "character-count/character-count";
-@use "description-list/description-list";
-@use "row/row";
-@use "radio/radio";
-@use "tabs/tabs";
-@use "text-area/text-area";
-@use "column/column";
-@use "margin/margin";
-@use "gap/gap";
-@use "field-set/field-set";
-@use "link-list/link-list";
-@use "badge/badge";
-@use "table/table";
-@use "mega-menu/mega-menu";
-@use "icon-button/icon-button";
-@use "skip-link/skip-link";
-@use "overlap/overlap";
-@use "header/header";
-@use "mark/mark";
-@use "text-input/text-input";
-@use "search-field/search-field";
-@use "logo/logo";
-@use "dialog/dialog";
-@use "image/image";
-@use "pagination/pagination";
 @use "accordion/accordion";
+@use "action-group/action-group";
 @use "alert/alert";
 @use "aspect-ratio/aspect-ratio";
+@use "avatar/avatar";
+@use "badge/badge";
 @use "blockquote/blockquote";
 @use "breadcrumb/breadcrumb";
+@use "breakout/breakout";
 @use "button/button";
 @use "card/card";
+@use "character-count/character-count";
 @use "checkbox/checkbox";
-@use "label/label";
+@use "column/column";
+@use "date-input/date-input";
+@use "description-list/description-list";
+@use "dialog/dialog";
+@use "document/document";
+@use "error-message/error-message";
+@use "field-set/field-set";
+@use "field/field";
+@use "file-input/file-input";
+@use "file-list/file-list";
+@use "form-error-list/form-error-list";
+@use "gap/gap";
 @use "grid/grid";
+@use "header/header";
 @use "heading/heading";
-@use "spotlight/spotlight";
+@use "hint/hint";
+@use "icon-button/icon-button";
 @use "icon/icon";
+@use "image-slider/image-slider";
+@use "image/image";
+@use "label/label";
+@use "link-list/link-list";
 @use "link/link";
+@use "logo/logo";
+@use "margin/margin";
+@use "mark/mark";
+@use "mega-menu/mega-menu";
 @use "ordered-list/ordered-list";
+@use "overlap/overlap";
 @use "page-heading/page-heading";
 @use "page-menu/page-menu";
+@use "pagination/pagination";
 @use "paragraph/paragraph";
+@use "password-input/password-input";
+@use "radio/radio";
+@use "row/row";
 @use "screen/screen";
+@use "search-field/search-field";
+@use "select/select";
+@use "skip-link/skip-link";
+@use "spotlight/spotlight";
 @use "switch/switch";
+@use "table-of-contents/table-of-contents";
+@use "table/table";
+@use "tabs/tabs";
+@use "text-area/text-area";
+@use "text-input/text-input";
+@use "time-input/time-input";
 @use "top-task-link/top-task-link";
 @use "unordered-list/unordered-list";
 @use "visually-hidden/visually-hidden";
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 5bb39cae01..34dc74a18b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,63 +4,63 @@
  */
 
 /* Append here */
-export * from './FileList'
+export * from './Accordion'
 export * from './ActionGroup'
-export * from './Breakout'
-export * from './Hint'
-export * from './ImageSlider'
-export * from './PasswordInput'
-export * from './FormErrorList'
-export * from './TableOfContents'
-export * from './ErrorMessage'
-export * from './FileInput'
-export * from './Field'
-export * from './Select'
-export * from './TimeInput'
-export * from './DateInput'
+export * from './Alert'
 export * from './Avatar'
+export * from './Badge'
+export * from './Blockquote'
+export * from './Breadcrumb'
+export * from './Breakout'
+export * from './Button'
+export * from './Card'
 export * from './CharacterCount'
-export * from './DescriptionList'
-export * from './Row'
-export * from './Radio'
-export * from './Tabs'
-export * from './TextArea'
+export * from './Checkbox'
 export * from './Column'
+export * from './DateInput'
+export * from './DescriptionList'
+export * from './Dialog'
+export * from './ErrorMessage'
+export * from './Field'
 export * from './FieldSet'
+export * from './FileInput'
+export * from './FileList'
+export * from './Footer'
+export * from './FormErrorList'
+export * from './Grid'
+export * from './Header'
+export * from './Heading'
+export * from './Hint'
+export * from './Icon'
+export * from './IconButton'
+export * from './Image'
+export * from './ImageSlider'
+export * from './Label'
+export * from './Link'
 export * from './LinkList'
-export * from './Badge'
-export * from './Table'
+export * from './Logo'
+export * from './Mark'
 export * from './MegaMenu'
-export * from './IconButton'
-export * from './SkipLink'
+export * from './OrderedList'
 export * from './Overlap'
-export * from './Header'
-export * from './Mark'
-export * from './TextInput'
-export * from './SearchField'
-export * from './Logo'
-export * from './Dialog'
-export * from './Image'
+export * from './PageHeading'
+export * from './PageMenu'
 export * from './Pagination'
+export * from './Paragraph'
+export * from './PasswordInput'
+export * from './Radio'
+export * from './Row'
 export * from './Screen'
-export * from './Switch'
+export * from './SearchField'
+export * from './Select'
+export * from './SkipLink'
 export * from './Spotlight'
-export * from './Card'
-export * from './Alert'
-export * from './Footer'
-export * from './PageMenu'
+export * from './Switch'
+export * from './Table'
+export * from './TableOfContents'
+export * from './Tabs'
+export * from './TextArea'
+export * from './TextInput'
+export * from './TimeInput'
 export * from './TopTaskLink'
-export * from './Blockquote'
-export * from './Checkbox'
-export * from './PageHeading'
-export * from './OrderedList'
-export * from './Heading'
-export * from './Breadcrumb'
-export * from './Link'
-export * from './Button'
-export * from './Paragraph'
-export * from './Label'
 export * from './UnorderedList'
-export * from './Icon'
-export * from './Accordion'
-export * from './Grid'

From 310f59553a9ad057f3fe80b23bfda5acf108906d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 20 Dec 2024 12:20:54 +0100
Subject: [PATCH 5/6] feat: Let Footer set its own background colour (#1797)

---
 packages/css/src/components/footer/README.md         | 12 ++++++------
 packages/css/src/components/footer/footer.scss       |  8 ++++++++
 packages/css/src/components/index.scss               |  1 +
 packages/react/src/Footer/FooterTop.tsx              |  5 ++---
 .../tokens/src/components/ams/footer.tokens.json     |  9 +++++++++
 5 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 packages/css/src/components/footer/footer.scss
 create mode 100644 proprietary/tokens/src/components/ams/footer.tokens.json

diff --git a/packages/css/src/components/footer/README.md b/packages/css/src/components/footer/README.md
index 48972e7fe1..a7d37c4325 100644
--- a/packages/css/src/components/footer/README.md
+++ b/packages/css/src/components/footer/README.md
@@ -6,17 +6,17 @@ Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](/docs/components-navigation-page-menu--docs).
-  It must be used on all websites for the City of Amsterdam.
-- For applications, only the Page Menu can be sufficient.
-- The Footer is the same on every page of the application.
+- The Footer usually consists of two sections: a full-width blue area and a [Page Menu](/docs/components-navigation-page-menu--docs) below it.
+- A Footer containing only a Page Menu can be sufficient for applications.
+- The Footer must be used on all websites for the City of Amsterdam.
+- It must be the same on every page.
 
-The Spotlight offers space for various practical links:
+The top section offers space for various practical links:
 
 - The first column focuses on contact information.
   The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
 - The second column contains links to relevant (online) sites or sources.
 - The third column refers to newsletters, social media, etc.
 
-The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc.
+The menu in the bottom section is for links to privacy policies, cookie statements, information about the website itself, etc.
 Contact details should not go here.
diff --git a/packages/css/src/components/footer/footer.scss b/packages/css/src/components/footer/footer.scss
new file mode 100644
index 0000000000..26af54fcb4
--- /dev/null
+++ b/packages/css/src/components/footer/footer.scss
@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-footer__top {
+  background-color: var(--ams-footer-top-background-color);
+}
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index 0b52b1e570..3fb749ce8c 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -27,6 +27,7 @@
 @use "field/field";
 @use "file-input/file-input";
 @use "file-list/file-list";
+@use "footer/footer";
 @use "form-error-list/form-error-list";
 @use "gap/gap";
 @use "grid/grid";
diff --git a/packages/react/src/Footer/FooterTop.tsx b/packages/react/src/Footer/FooterTop.tsx
index d7dcf052e1..4541e1c531 100644
--- a/packages/react/src/Footer/FooterTop.tsx
+++ b/packages/react/src/Footer/FooterTop.tsx
@@ -6,15 +6,14 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { Spotlight } from '../Spotlight/Spotlight'
 
 export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const FooterTop = forwardRef(
   ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('ams-footer__top', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-footer__top', className)}>
       {children}
-    </Spotlight>
+    </div>
   ),
 )
 
diff --git a/proprietary/tokens/src/components/ams/footer.tokens.json b/proprietary/tokens/src/components/ams/footer.tokens.json
new file mode 100644
index 0000000000..f65d5aa863
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/footer.tokens.json
@@ -0,0 +1,9 @@
+{
+  "ams": {
+    "footer": {
+      "top": {
+        "background-color": { "value": "{ams.brand.color.blue.60}" }
+      }
+    }
+  }
+}

From 8d1c266f3f7e90b02bcb240c41256578a80c7668 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 20 Dec 2024 12:33:51 +0100
Subject: [PATCH 6/6] feat!: Disallow blue Spotlight and make purple the
 default (#1798)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 packages/css/src/components/spotlight/README.md     |  2 ++
 .../css/src/components/spotlight/spotlight.scss     | 12 ++++--------
 packages/react/src/Spotlight/Spotlight.tsx          | 13 +++++++++----
 .../tokens/src/components/ams/spotlight.tokens.json |  7 +------
 .../src/components/Breakout/Breakout.stories.tsx    |  4 ++--
 .../src/components/Spotlight/Spotlight.docs.mdx     |  8 --------
 .../src/components/Spotlight/Spotlight.stories.tsx  | 12 ------------
 .../src/pages/amsterdam/ArticlePage/ArticleBody.tsx |  2 +-
 .../src/pages/amsterdam/HomePage/HomeSpotlight.tsx  |  2 +-
 9 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/packages/css/src/components/spotlight/README.md b/packages/css/src/components/spotlight/README.md
index a2eaf53cb0..5998ccff7c 100644
--- a/packages/css/src/components/spotlight/README.md
+++ b/packages/css/src/components/spotlight/README.md
@@ -7,6 +7,8 @@ Emphasizes a section on a page through a distinctive background colour.
 ## Guidelines
 
 - Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs).
+- Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element.
+- The default background is purple, but the colours can be chosen freely – they do not convey a meaning or theme in itself.
 - Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
 
 ## Relevant WCAG requirements
diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
index e3ce9d208b..e253c0103e 100644
--- a/packages/css/src/components/spotlight/spotlight.scss
+++ b/packages/css/src/components/spotlight/spotlight.scss
@@ -3,12 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
-.ams-spotlight--azure {
-  background-color: var(--ams-spotlight-azure-background-color);
+.ams-spotlight {
+  background-color: var(--ams-spotlight-background-color);
 }
 
-.ams-spotlight--blue {
-  background-color: var(--ams-spotlight-blue-background-color);
+.ams-spotlight--azure {
+  background-color: var(--ams-spotlight-azure-background-color);
 }
 
 .ams-spotlight--green {
@@ -27,10 +27,6 @@
   background-color: var(--ams-spotlight-orange-background-color);
 }
 
-.ams-spotlight--purple {
-  background-color: var(--ams-spotlight-purple-background-color);
-}
-
 .ams-spotlight--yellow {
   background-color: var(--ams-spotlight-yellow-background-color);
 }
diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
index cc3e9799ba..cd2777bf37 100644
--- a/packages/react/src/Spotlight/Spotlight.tsx
+++ b/packages/react/src/Spotlight/Spotlight.tsx
@@ -6,9 +6,10 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export const spotlightColors = ['azure', 'blue', 'green', 'lime', 'magenta', 'orange', 'purple', 'yellow'] as const
+const defaultColor = 'purple'
+export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const
 
-type SpotlightColor = (typeof spotlightColors)[number]
+type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor
 
 export type SpotlightProps = {
   /** The HTML element to use. */
@@ -18,8 +19,12 @@ export type SpotlightProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef(
-  ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref: any) => (
-    <Tag {...restProps} ref={ref} className={clsx('ams-spotlight', `ams-spotlight--${color}`, className)}>
+  ({ as: Tag = 'div', children, className, color = defaultColor, ...restProps }: SpotlightProps, ref: any) => (
+    <Tag
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-spotlight', color !== defaultColor && `ams-spotlight--${color}`, className)}
+    >
       {children}
     </Tag>
   ),
diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json
index e6bc2022f4..5a75db0965 100644
--- a/proprietary/tokens/src/components/ams/spotlight.tokens.json
+++ b/proprietary/tokens/src/components/ams/spotlight.tokens.json
@@ -1,12 +1,10 @@
 {
   "ams": {
     "spotlight": {
+      "background-color": { "value": "{ams.brand.color.purple.60}" },
       "azure": {
         "background-color": { "value": "{ams.brand.color.azure.60}" }
       },
-      "blue": {
-        "background-color": { "value": "{ams.brand.color.blue.60}" }
-      },
       "green": {
         "background-color": { "value": "{ams.brand.color.green.60}" }
       },
@@ -19,9 +17,6 @@
       "orange": {
         "background-color": { "value": "{ams.brand.color.orange.60}" }
       },
-      "purple": {
-        "background-color": { "value": "{ams.brand.color.purple.60}" }
-      },
       "yellow": {
         "background-color": { "value": "{ams.brand.color.yellow.60}" }
       }
diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx
index 069f8c90c2..1b747df40a 100644
--- a/storybook/src/components/Breakout/Breakout.stories.tsx
+++ b/storybook/src/components/Breakout/Breakout.stories.tsx
@@ -27,7 +27,7 @@ export const Default: Story = {
   args: {
     children: [
       <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={{ medium: 2, narrow: 2, wide: 1 }} rowStart={2}>
-        <Spotlight />
+        <Spotlight color="green" />
       </Breakout.Cell>,
       <Breakout.Cell
         colSpan={{ medium: 8, narrow: 4, wide: 6 }}
@@ -57,7 +57,7 @@ export const VerticalLayout: Story = {
   args: {
     children: [
       <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={2} rowStart={2}>
-        <Spotlight />
+        <Spotlight color="orange" />
       </Breakout.Cell>,
       <Breakout.Cell colSpan="all" has="figure" key={2} rowSpan={2} rowStart={1}>
         <Image alt="" src="https://picsum.photos/1600/900" />
diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
index 39929e1f71..08d4c29f1f 100644
--- a/storybook/src/components/Spotlight/Spotlight.docs.mdx
+++ b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -18,10 +18,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Azure} />
 
-### Blue
-
-<Canvas of={SpotlightStories.Blue} />
-
 ### Green
 
 <Canvas of={SpotlightStories.Green} />
@@ -38,10 +34,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Orange} />
 
-### Purple
-
-<Canvas of={SpotlightStories.Purple} />
-
 ### Yellow
 
 <Canvas of={SpotlightStories.Yellow} />
diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx
index 37afba8063..178cf96da1 100644
--- a/storybook/src/components/Spotlight/Spotlight.stories.tsx
+++ b/storybook/src/components/Spotlight/Spotlight.stories.tsx
@@ -36,12 +36,6 @@ export const Azure: Story = {
   },
 }
 
-export const Blue: Story = {
-  args: {
-    color: 'blue',
-  },
-}
-
 export const Green: Story = {
   args: {
     color: 'green',
@@ -66,12 +60,6 @@ export const Orange: Story = {
   },
 }
 
-export const Purple: Story = {
-  args: {
-    color: 'purple',
-  },
-}
-
 export const Yellow: Story = {
   args: {
     color: 'yellow',
diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx
index ef42cd9ad6..a8d477f18c 100644
--- a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx
+++ b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx
@@ -22,7 +22,7 @@ export const ArticleBody = ({ lead, paragraph1, spotlightHeading, spotlightLinkL
         <Paragraph>{paragraph1}</Paragraph>
       </Grid.Cell>
     </Grid>
-    <Spotlight as="section" color="purple">
+    <Spotlight as="section">
       <Grid paddingTop="medium" paddingBottom="large">
         <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
           <Column gap="small">
diff --git a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx
index 5e1d7be359..a1afef38c5 100644
--- a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx
+++ b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx
@@ -1,7 +1,7 @@
 import { Grid, Heading, Link, Paragraph, Spotlight } from '@amsterdam/design-system-react'
 
 export const HomeSpotlight = () => (
-  <Spotlight color="purple">
+  <Spotlight>
     <Grid paddingVertical="medium">
       <Grid.Cell span={{ narrow: 4, medium: 4, wide: 6 }}>
         <Heading className="ams-mb--xs" inverseColor size="level-2">