diff --git a/.eslintignore b/.eslintignore
index 72d9c75bfa..a9cb8b55ab 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,3 +4,4 @@ dist/
 coverage/
 storybook-static/
 packages/tokens/brand/**/*
+tsc-build/
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index 523a70d632..df530407dc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,6 +47,8 @@ module.exports = {
     'react/display-name': 'off',
     'import/no-unresolved': 'error',
     'import/namespace': ['error', { allowComputed: true }],
+    'import/no-named-as-default': 'off',
+    '@next/next/no-html-link-for-pages': ['error', '/storefront/pages/'],
     'import/order': [
       'warn',
       {
diff --git a/.github/workflows/check-storefront.yml b/.github/workflows/check-storefront.yml
new file mode 100644
index 0000000000..49934183ee
--- /dev/null
+++ b/.github/workflows/check-storefront.yml
@@ -0,0 +1,38 @@
+# Runs conventional commit check on PR
+name: Checks storefront
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'storefront/**'
+  push:
+    branches:
+      - main
+    paths:
+      - 'storefront/**'
+jobs:
+  checks:
+    name: Builds, lints and tests code
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Use node 20 and yarn cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build packages
+        run: yarn build
+      - name: Build storefront
+        run: yarn build:storefront
+      - name: Lint Code
+        run: yarn lint ./storefront
+      - name: Lint CSS
+        run: yarn lint-style ./storefront/**/*.css
+      - name: Test
+        run: yarn test
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks-packages.yml
similarity index 84%
rename from .github/workflows/checks.yml
rename to .github/workflows/checks-packages.yml
index a1a2c6f6c9..93ec225255 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks-packages.yml
@@ -1,16 +1,20 @@
 # Runs conventional commit check on PR
-name: Checks
+name: Checks packages
 on:
   workflow_dispatch:
   pull_request:
     branches:
       - main
+    paths:
+      - 'packages/**'
   push:
     branches:
       - main
+    paths:
+      - 'packages/**'
 jobs:
   checks:
-    name: Checks, builds and tests code
+    name: Builds, lints and tests code
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/storybook-deploy-vercel.yml b/.github/workflows/storybook-deploy-vercel.yml
new file mode 100644
index 0000000000..b71b6ca962
--- /dev/null
+++ b/.github/workflows/storybook-deploy-vercel.yml
@@ -0,0 +1,41 @@
+name: Deploy Storybook Production
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STORYBOOK }}
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Build & deploy to Vercel
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use node 20 and yarn cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Install Vercel CLI
+        run: yarn add vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - id: deploy
+        name: Deploy Project Artifacts to Vercel
+        run: echo "url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
diff --git a/.gitignore b/.gitignore
index e1404f8fbc..932d8cb7b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # Built files
 dist
 ignore
+tsc-build
 
 # Yarn stuff; we're not using PnP/Zero installs
 .pnp.*
diff --git a/CODEOWNERS b/CODEOWNERS
index 84ab6ec8ae..7601f078e5 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -1 +1 @@
-* @mimarz @Thuneer @TomasEng @framitdavid @Magnusrm
+* @mimarz @Thuneer @Barsnes @Magnusrm
diff --git a/README.md b/README.md
index 925375e4a4..21b80af1b4 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,11 @@
 
 ---
 
+## Quick links
+
+- [Storefront](https://designsystemet.no)
+- [Storybook](https://digdir.github.io/designsystem/)
+
 ## About the design system 📖
 
 The Common Designsystem is a collection of important design elements and building blocks that can be used when creating different services. It's like a toolbox that everyone can use to work together and create the best foundation for public services across the country. By using this Designsystem, we aim to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.
diff --git a/assets/img/component-guidelines/alert/alert-ex1-do.png b/assets/img/component-guidelines/alert/alert-ex1-do.png
new file mode 100644
index 0000000000..381d8c8c3a
Binary files /dev/null and b/assets/img/component-guidelines/alert/alert-ex1-do.png differ
diff --git a/assets/img/component-guidelines/alert/alert-ex1-dont.png b/assets/img/component-guidelines/alert/alert-ex1-dont.png
new file mode 100644
index 0000000000..32baa8c1a2
Binary files /dev/null and b/assets/img/component-guidelines/alert/alert-ex1-dont.png differ
diff --git a/assets/img/component-placeholders/accordion.png b/assets/img/component-placeholders/accordion.png
deleted file mode 100644
index 3eedcbf520..0000000000
Binary files a/assets/img/component-placeholders/accordion.png and /dev/null differ
diff --git a/assets/img/component-placeholders/alert.png b/assets/img/component-placeholders/alert.png
deleted file mode 100644
index e341ee06c7..0000000000
Binary files a/assets/img/component-placeholders/alert.png and /dev/null differ
diff --git a/assets/img/component-placeholders/button.png b/assets/img/component-placeholders/button.png
deleted file mode 100644
index f092f07665..0000000000
Binary files a/assets/img/component-placeholders/button.png and /dev/null differ
diff --git a/assets/img/component-placeholders/checkbox-group.png b/assets/img/component-placeholders/checkbox-group.png
deleted file mode 100644
index 51c37ec626..0000000000
Binary files a/assets/img/component-placeholders/checkbox-group.png and /dev/null differ
diff --git a/assets/img/component-placeholders/checkbox.png b/assets/img/component-placeholders/checkbox.png
deleted file mode 100644
index 8d9a80cfca..0000000000
Binary files a/assets/img/component-placeholders/checkbox.png and /dev/null differ
diff --git a/assets/img/component-placeholders/fieldset.png b/assets/img/component-placeholders/fieldset.png
deleted file mode 100644
index 340bb1a971..0000000000
Binary files a/assets/img/component-placeholders/fieldset.png and /dev/null differ
diff --git a/assets/img/component-placeholders/help-text.png b/assets/img/component-placeholders/help-text.png
deleted file mode 100644
index 19921675d8..0000000000
Binary files a/assets/img/component-placeholders/help-text.png and /dev/null differ
diff --git a/assets/img/component-placeholders/list.png b/assets/img/component-placeholders/list.png
deleted file mode 100644
index 4cd0624fcb..0000000000
Binary files a/assets/img/component-placeholders/list.png and /dev/null differ
diff --git a/assets/img/component-placeholders/popover.png b/assets/img/component-placeholders/popover.png
deleted file mode 100644
index 184544c1ec..0000000000
Binary files a/assets/img/component-placeholders/popover.png and /dev/null differ
diff --git a/assets/img/component-placeholders/radio-button-group.png b/assets/img/component-placeholders/radio-button-group.png
deleted file mode 100644
index e1e72fcc8c..0000000000
Binary files a/assets/img/component-placeholders/radio-button-group.png and /dev/null differ
diff --git a/assets/img/component-placeholders/radio-button.png b/assets/img/component-placeholders/radio-button.png
deleted file mode 100644
index 69ec3cd1d2..0000000000
Binary files a/assets/img/component-placeholders/radio-button.png and /dev/null differ
diff --git a/assets/img/component-placeholders/select.png b/assets/img/component-placeholders/select.png
deleted file mode 100644
index e1bda823dd..0000000000
Binary files a/assets/img/component-placeholders/select.png and /dev/null differ
diff --git a/assets/img/component-placeholders/spinner.png b/assets/img/component-placeholders/spinner.png
deleted file mode 100644
index e4b76b7ac1..0000000000
Binary files a/assets/img/component-placeholders/spinner.png and /dev/null differ
diff --git a/assets/img/component-placeholders/table.png b/assets/img/component-placeholders/table.png
deleted file mode 100644
index c0110618fa..0000000000
Binary files a/assets/img/component-placeholders/table.png and /dev/null differ
diff --git a/assets/img/component-placeholders/tabs.png b/assets/img/component-placeholders/tabs.png
deleted file mode 100644
index ff98e1c71c..0000000000
Binary files a/assets/img/component-placeholders/tabs.png and /dev/null differ
diff --git a/assets/img/component-placeholders/text-field.png b/assets/img/component-placeholders/text-field.png
deleted file mode 100644
index 07ee416b48..0000000000
Binary files a/assets/img/component-placeholders/text-field.png and /dev/null differ
diff --git a/assets/img/component-placeholders/textarea.png b/assets/img/component-placeholders/textarea.png
deleted file mode 100644
index 648e7b9c95..0000000000
Binary files a/assets/img/component-placeholders/textarea.png and /dev/null differ
diff --git a/assets/img/component-placeholders/toggle-button.png b/assets/img/component-placeholders/toggle-button.png
deleted file mode 100644
index 3ea6a56e94..0000000000
Binary files a/assets/img/component-placeholders/toggle-button.png and /dev/null differ
diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json
index 90d3874a87..6a648f34eb 100644
--- a/design-tokens/$themes.json
+++ b/design-tokens/$themes.json
@@ -7,159 +7,143 @@
       "Base/Core": "source",
       "Base/Semantic": "enabled"
     },
-    "$figmaCollectionId": "VariableCollectionId:6687:22402",
-    "$figmaModeId": "6687:0",
+    "$figmaCollectionId": "VariableCollectionId:7721:2966",
+    "$figmaModeId": "7721:0",
     "$figmaVariableReferences": {
-      "semantic.background.default": "547be4a6f725dce5581aeff848cd126091f827b9",
-      "semantic.background.subtle": "22993e7f76281a8c733b70584ad8b110e90b34a9",
-      "semantic.surface.neutral.default": "2b7bb92eac0d3d9ed03d39b07f36e5eb5c41ebc4",
-      "semantic.surface.neutral.selected": "1fcf6120801f9449350924fdc7b76cb3310e8d71",
-      "semantic.surface.neutral.subtle": "4010e3431ac0a937e9ce19d089e2e0286b43e821",
-      "semantic.surface.neutral.subtle-hover": "d7111ac00f2ad3173551d48a1b8eb18aa6ce8780",
-      "semantic.surface.neutral.dark": "fa53069089a04f73f521c40a1c46f4ad9d8e5ab6",
-      "semantic.surface.neutral.inverted": "194a96b25d763571fce361d0b3f6549c1064ccf8",
-      "semantic.surface.action.primary.subtle": "a09e93c6839419cda7d3934a3cef122cf457f1e7",
-      "semantic.surface.action.primary.subtle-hover": "c79e750cbc6c3f09335358177c7f443ace28a890",
-      "semantic.surface.action.primary.default": "d870fbe1c740ff4762e48cffb41a4be0414b3d80",
-      "semantic.surface.action.primary.hover": "88c75aa37513dd6c8add70d06831b6b34a0eb7b5",
-      "semantic.surface.action.primary.active": "0025645316743a1fdeb40ab883d30e19393a34e7",
-      "semantic.surface.action.primary.no_fill": "9382f99a1bfdfbc7b3a7a28c010ddd3235927982",
-      "semantic.surface.action.primary.no_fill-hover": "545895419363e59ed758f28a48d0acfa1ea4a5d3",
-      "semantic.surface.action.primary.no_fill-active": "8649d43ea3ab0d01b33630244e3436880a4df189",
-      "semantic.surface.action.secondary.subtle": "107ce81a4d4e120b22bf90ebdac3cc25976cbc66",
-      "semantic.surface.action.secondary.subtle-hover": "b8c826b61db7addab887a4a98d33a3c312bcc207",
-      "semantic.surface.action.secondary.default": "eecfdbba6e6b011e4eefe1446cc5a25f6c5bbf05",
-      "semantic.surface.action.secondary.hover": "97b3da2bde709a21bd9428dab0344bc13073f7bd",
-      "semantic.surface.action.secondary.active": "755034f2b11a445343eef3bf73d93b94c53d9a44",
-      "semantic.surface.action.secondary.no_fill": "014aaa70b825b2055fa807287ca40d9a64af5991",
-      "semantic.surface.action.secondary.no_fill-hover": "8e81c0f99073b6e1a0902fbca898a42d7d186540",
-      "semantic.surface.action.secondary.no_fill-active": "3ad6e419293b45f5cfa131e030e6767d1dca28ab",
-      "semantic.surface.action.checked": "4f6f01bc5c4d227bc26781bcdb28307ca237456d",
-      "semantic.surface.success.subtle": "2a04aa79726fa40203dbf87b97dba8a52d86c23c",
-      "semantic.surface.success.subtle-hover": "442b3a51129177a638a96414f033fb73fe16cb06",
-      "semantic.surface.success.default": "835c7eb76b04fafe1ee1cc41f1ff229516008897",
-      "semantic.surface.success.hover": "70046e630d528d719d2da035b2a51f98132ba553",
-      "semantic.surface.success.active": "69c24d7453778cbfeb36ea36557ed7a1f7154459",
-      "semantic.surface.success.no_fill": "1e4ab306ff4119daa53fb664f82b2b2737c4474f",
-      "semantic.surface.success.no_fill-hover": "88c6155d1495b3ff7b91f00d015bffe2c836932c",
-      "semantic.surface.success.no_fill-active": "71173889289762979b7b91225fa07dc1294c5a46",
-      "semantic.surface.warning.subtle": "7afb734633f3f07bce6e98309b7d95ec7432f452",
-      "semantic.surface.warning.subtle-hover": "a13327d1d0720a7ceadd1ff1838ef301fc31d4f4",
-      "semantic.surface.warning.default": "2d43f9d9da78cd8ee96a7f65224a8c58d0be0682",
-      "semantic.surface.danger.subtle": "3d66a5bded55a5c6e2f9d295a36c739d96033c35",
-      "semantic.surface.danger.subtle-hover": "067b039f16fd58979bc13dbba682a5cbe070983e",
-      "semantic.surface.danger.default": "89e670463e494c3f56b0f5985c027c9a8f2da10f",
-      "semantic.surface.danger.hover": "2b72de1ad03b5025bbc0fa4b036832f5578b1afa",
-      "semantic.surface.danger.active": "98316e9a1662a2f013e3c1dc0c01be28aafd7a30",
-      "semantic.surface.danger.no_fill": "98781d722a2e9bfe576602e2f0f9d2e50b17c518",
-      "semantic.surface.danger.no_fill-hover": "8e80d1990e2f23b1aca3ee3aaa4c28ed949c6846",
-      "semantic.surface.danger.no_fill-active": "05d2aa80128fe5415071d83574d44e0326236e17",
-      "semantic.surface.info.subtle": "fcf5f1f73d7544b7bc6059db636b9dd6d9a890c4",
-      "semantic.surface.info.subtle-hover": "3b0ec42d5cf3cf51ba3c43fa48b60bda8dabf6b8",
-      "semantic.surface.on_inverted.default": "437831ac5d1fca3b0984f4e5b8da198649d07d01",
-      "semantic.surface.on_inverted.hover": "b2647990a16fe105bd4019d93eb913ecd882f52e",
-      "semantic.surface.on_inverted.active": "0ba2cf58b3ca9876c0beff959eac1cb82ff5afbf",
-      "semantic.surface.on_inverted.no_fill": "a2c4e6f36207446e31eb5b5869b479e0eb0e2eaf",
-      "semantic.surface.on_inverted.no_fill-hover": "b39380a9022ebe04ab836f33092502e21d89ee91",
-      "semantic.surface.on_inverted.no_fill-active": "ed6c0f14f56e45772685fe61303c9b0a61ca5db3",
-      "semantic.border.info.default": "48683ce661a0380eee289c93676417e0efbb392f",
-      "semantic.border.action.primary.subtle": "94fd6d1d32ca444122590350dbaf5d3890db21be",
-      "semantic.border.action.primary.subtle-hover": "cb78753790660fea147c282d8d149d1c4d4f95be",
-      "semantic.border.action.primary.default": "114aac0b0786b198a5588ad10e5913645513158b",
-      "semantic.border.action.primary.hover": "934ba4af4f1460486e0e8eae4b89033c829032c7",
-      "semantic.border.action.primary.active": "857157ae2f6c35ff9524cc0af9d3a4b0609b1c63",
-      "semantic.border.action.secondary.subtle": "29179e71847e1a1a375cf94b7ca7b8441c84c93d",
-      "semantic.border.action.secondary.subtle-hover": "602f06c869c86ce50cf5a80410f672b155bbcbb8",
-      "semantic.border.action.secondary.default": "20948acfebc16b98ebdec218156eb3d4156c0867",
-      "semantic.border.action.secondary.hover": "59b9c4d246e503f867dc67a58ea049bdff778761",
-      "semantic.border.action.secondary.active": "c44fc2b5b1167ed0a9721fffb500fbd953106d6a",
-      "semantic.border.action.hover": "a2f8f4e4e251e043760e84a07d2e45168db134c2",
-      "semantic.border.neutral.default": "6eef00f8c90207cd1a7887bfcd6def2021ab3bcd",
-      "semantic.border.neutral.subtle": "d7b34602ebe292a4b03305d26722b93960e93fc7",
-      "semantic.border.neutral.strong": "d83f0b3fbe1abeb0ae421abf1ebf2f861eec5b5d",
-      "semantic.border.neutral.divider": "1337bec4c9653819086501c3dd834106070075f8",
-      "semantic.border.success.default": "c17e24c57dfcf38afa3fd635149f5bf502fc85c6",
-      "semantic.border.success.hover": "af41a9a87003e106d894c92129bb7fd4ee5f9d49",
-      "semantic.border.success.active": "ba5934cd6304ab362abc073f7094473f45a094ca",
-      "semantic.border.warning.default": "b71fecd66d000a8438a4df1f8f865c487e798686",
-      "semantic.border.warning.hover": "3ff992de6c8ab280955895886fcf6dd04f2b3642",
-      "semantic.border.warning.active": "3afd9c0e921e1536ed1d06cc4b9c0090aa3f9420",
-      "semantic.border.danger.default": "c4628be9b604ed1bc0e894ca3a632a13410db647",
-      "semantic.border.danger.hover": "1ee4ff5071c03b2c28fd3939b6fd35a44f4fef37",
-      "semantic.border.danger.active": "934bcf8a7e0bcfdd722d0f4e24535065b434ca6e",
-      "semantic.border.focus.outline": "4188244d608672ede2da22a845c44e834a67b3b9",
-      "semantic.border.focus.boxshadow": "9c58800167b803070ddc4632c994dc9a7e0d899c",
-      "semantic.border.on_inverted.default": "46b934406ad4eeb0f65b78709d9edd838b677542",
-      "semantic.border.input.default": "a8b4d59734f6a241aff40e18ee986424766d4f50",
-      "semantic.border.input.hover": "ac38dbab5a26d82b72b15e77d41b191b38adcf9d",
-      "semantic.text.success.default": "7666e28949b5de4dc845332bfd2402e5900fc59e",
-      "semantic.text.success.hover": "f0a7e1bdf9b137f8b0eb3a073e4d785e56db36c2",
-      "semantic.text.success.active": "cab1dbce312318542006fad5148f9cb309a3b277",
-      "semantic.text.success.on_success": "83f0a2deed3b4892a851e225a5f0165ee89e7653",
-      "semantic.text.success.on_success_subtle": "d793befcff6ee788629a72e0e65bffd02340e0e8",
-      "semantic.text.neutral.default": "999292c3b8292787084d9c3859309b304186d367",
-      "semantic.text.neutral.subtle": "ed85f1e3cafad594a78f25d38ac2745531a32876",
-      "semantic.text.neutral.on_inverted": "2012fe721a4389ed69bf5049c4dd86cbd2937401",
-      "semantic.text.action.primary.default": "0eae0cdd52bc4e385a40e3bbebadf26c075b1132",
-      "semantic.text.action.primary.hover": "d33c8adcfcedafca4f5cdbc87bc5fc131d0df188",
-      "semantic.text.action.primary.active": "6f2a875799488a430e4c0eafe5f5aafb38fe12f6",
-      "semantic.text.action.primary.on_action": "45a43b2a6e3abbdab98bdd3b5584b42bb3494ad1",
-      "semantic.text.action.secondary.default": "471c26da804f5091f52774b29b06a03340e90b84",
-      "semantic.text.action.secondary.hover": "14e85a5f7a8a85f898eb4eef788d998b580a5b47",
-      "semantic.text.action.secondary.active": "1c6daf9472e2b256bc2ea4dc790e3dcc15a311b6",
-      "semantic.text.action.secondary.on_action": "1b750099a3b53cd4739f2f0e16d10c5930692ce1",
-      "semantic.text.warning.default": "40c0dba6acc5131bcb51edb9a158ca53431baff8",
-      "semantic.text.warning.icon_warning": "bbbc0e6fc49a33aad7f9f6a32fe6dde77885261b",
-      "semantic.text.warning.on_warning": "9dcedf3470a2b3f08e409ab4a9dcd12dc33a842c",
-      "semantic.text.danger.default": "1b822e5dd7badc7a5337ad35e9d8dad2dfe62867",
-      "semantic.text.danger.hover": "84a1c9357b7cf3dff89893996dc4b3900e9cdcf1",
-      "semantic.text.danger.active": "058584c92a6d4917ddeb46043dae3dcdbbd38b99",
-      "semantic.text.danger.on_danger": "e9270218dc1557427059c878aa6f72371c5e98ee",
-      "semantic.text.danger.on_danger_subtle": "de6b1a783f5f364a5e1a28fe77a49cf69c5e7837",
-      "semantic.text.visited.default": "e8f1115e02a17c368275c1ded94eba3bcfc4539a",
-      "border_radius.interactive": "719e02a9b6926f6a32e8b3efb1162b2c354aa343",
-      "border_radius.small": "7a9ee10b747f5db27d3aa404076fb51a97a25ded",
-      "border_radius.medium": "c61e65d00a27d695467785071a5dc9ec65959df0",
-      "border_radius.large": "9959b737e14ff9c6e0f13236b98062470905c878",
-      "border_radius.xlarge": "694b1d5abfe6fb5597de36a3b9c011f96692fb2e",
-      "border_radius.full": "eec47d123f630371be2d0ad88e0641897b672e74",
-      "spacing.0": "90a4e4bfdec6e38c371179fc3a19b8293a07b881",
-      "spacing.1": "c02bac25f99d2ad30acbf6a669c86a2512baca49",
-      "spacing.2": "4d12b6e18ef507baa52ab920d3d325d58ddbe0e0",
-      "spacing.3": "271c0cd1b08fd1461ce16c323f6927a572d2e351",
-      "spacing.4": "7417c8797a90c999cd57d5d453b5e3481111591b",
-      "spacing.5": "b9eb9d553157c9ffabe0e3a1d020e256e4e39d58",
-      "spacing.6": "896dd777c052d0eb5f130ec8b2020cfc80b63740",
-      "spacing.7": "54a918c200628c5d54c25c02e1ffff6030fdabd2",
-      "spacing.8": "0853ef6087fda36b6bc93e57c6fa5c109a3a7e8f",
-      "spacing.10": "43f28352ae3c76c334b2e2f240f4ebdfbb3dfd66",
-      "spacing.12": "a0eef940bbc84c6c16fd914f0a56dd335617e3fc",
-      "spacing.14": "903f63a96856c7e9903327346b328ac4ee63614a",
-      "spacing.18": "acf29c89f89c71a1ae03ed7a5a3353155ed3da91",
-      "spacing.22": "7350ea6fd858d5bc7e608b654473fcee981cc0c7",
-      "spacing.26": "9cc7ea33b0cf11cf9e6075b5999d84230d2af32c",
-      "spacing.30": "8d32043a0a49ea22a7ba9482f4a9fa17a77d7827",
-      "base_spacing": "5f19e70b885dbbe446add43f6b67ca2433669e84",
-      "sizing.1": "04546316bbf5e62d16b01db649e727afa33a0de4",
-      "sizing.2": "a36843841c36d32200d556a309cd80d28f419532",
-      "sizing.3": "72fb690afedf47dc2828a30a103502532b59f09f",
-      "sizing.4": "58594de6f8672d640f4dd6ea89d45479074266c4",
-      "sizing.5": "2c8d2dc1716d6f84da431228a829fe4417c3a3e0",
-      "sizing.6": "37faee348dbb66066cd283baae9d663c42994fb7",
-      "sizing.7": "f1c417a149739a5368fe785ca4d39232e875c797",
-      "sizing.8": "3f3c7b081669cd037a88c934d94c8c5b43520fad",
-      "sizing.10": "c398873434964ecf4aac52a609495e11866784e1",
-      "sizing.12": "09a658edb12e3ba57483e9418f23a3e713d24651",
-      "sizing.14": "97f68b49d6c57914e3b5f24552bc8fbf29af3b08",
-      "sizing.18": "d8dcf3513325da7530e7eee356d5d1927353fd80",
-      "sizing.22": "6894d0c64773fa24383a6b0dba3535fbc02f96f7",
-      "sizing.26": "5080816b83dcae5df4da562dcee9d9ec4abae3d4",
-      "sizing.30": "a76454842a6359bdaa36d1d98876a8442b83ca94",
-      "base_sizing": "8b2e38e747d963c47774762963f63383916e47ab",
-      "border_width.default": "9d16c8e36225953fb4962f8740c4c61564d5a301",
-      "border_width.active": "5a6e53c5e40ed0bba4925a247a6ecc099b7c4fa1",
-      "border_width.tab_focus": "064b5dac51141b65dfc44d3c255a04644cca3547",
-      "semantic.border.action.dark": "e447feeef19c9d45be5c1aaa78b0c83b0470ba62"
+      "semantic.background.default": "e7e91cad7d4d8c4993e5fa54b169c100fca291da",
+      "semantic.background.subtle": "5cd9c639c1c4123f1369dd902da15533fd7e73f4",
+      "semantic.surface.neutral.default": "cfb9180a64c4c113d2c003d7a02c7084f3d29864",
+      "semantic.surface.neutral.selected": "5defd32eedc3f2c7e64c6509ffe26b1917f5f6c4",
+      "semantic.surface.neutral.subtle": "0b7681e25e163a5b1416a93cd4471225a752da14",
+      "semantic.surface.neutral.subtle-hover": "de2da22043a941d4f30621b86eafeb8893554e47",
+      "semantic.surface.neutral.dark": "f428dd6eeada38db8c8fbbcf3b9938ae87f36c2d",
+      "semantic.surface.neutral.dark-hover": "f6dde872cd9452e3a77568bee36f1499e839155d",
+      "semantic.surface.neutral.inverted": "6dd7ba50b8e91439deb142bb1ae635cb26e73dc5",
+      "semantic.surface.action.common.subtle": "f5bdc3419e11920c78bb76100545676e5382c830",
+      "semantic.surface.action.common.subtle-hover": "3c840fec1e2d98aa3eb9053207288803766053de",
+      "semantic.surface.action.common.default": "3dd8dcd00bb776a5970100af5c254ad0e620dae8",
+      "semantic.surface.action.common.hover": "a1256baa3ccd5c889873c57f9e45ddb6a13bba28",
+      "semantic.surface.action.common.active": "9cc512f6733959dd82abaca405d250cbb2ff0020",
+      "semantic.surface.action.common.no_fill": "2c067af61787af725faf0c33cf0d26f3103bd0fc",
+      "semantic.surface.action.common.no_fill-hover": "ca65d9369ee8775d61a45d24f5afcef34e39aacb",
+      "semantic.surface.action.common.no_fill-active": "6a414595ef7e1f4d3b9ab7f1ec2d9d002d3fe5dc",
+      "semantic.surface.action.common.checked": "6724ab1ed3530681ff2c7d425068f21fc8bd2958",
+      "semantic.surface.success.subtle": "7bd203f8e3c9edb168e3677998afa2e029e10f99",
+      "semantic.surface.success.subtle-hover": "bd93a522d36ea99b1dbedc28023d38240f899191",
+      "semantic.surface.success.default": "15c28264e226ca1e133c8dab7864ee2cc6ca3f99",
+      "semantic.surface.success.hover": "f855dcd954d1aeec6b0da97cd22fb1ca496ad20c",
+      "semantic.surface.success.active": "bdf7fc358a82be4ee1a1e705a59e7c2137f5dbaa",
+      "semantic.surface.success.no_fill": "c8c1cae4212f00fbed29ac23f21249338697d31c",
+      "semantic.surface.success.no_fill-hover": "1149e2299393c578f51ca50e9aa3809c9a840524",
+      "semantic.surface.success.no_fill-active": "5c768f766d56a607cce1020d7e2bf667cb980916",
+      "semantic.surface.warning.subtle": "651349b9038aed7689a50916621cc13fe8c95063",
+      "semantic.surface.warning.subtle-hover": "692bf8fcc4e3b0936d32c24fb55df20b8d26de9c",
+      "semantic.surface.warning.default": "5fde026442b8b80687d10f7e7067c4e56b79e5bb",
+      "semantic.surface.danger.subtle": "ace186f60eefae7919c5276174827472fce3f8a6",
+      "semantic.surface.danger.subtle-hover": "9ad01ec7eeed5c1a0c93a8bae3c4a91bff8e8e2a",
+      "semantic.surface.danger.default": "1f8ac1fd0aa61cce0dcb0887b35f8a7fe83febc6",
+      "semantic.surface.danger.hover": "59f368ea54a9dee162f21f5ee1fa7f4e212b27c4",
+      "semantic.surface.danger.active": "618ed8b416a97826abb04bb61eab4c775b0973ef",
+      "semantic.surface.danger.no_fill": "3cecee7eaf626753ef94a1c9183507ffd056aff4",
+      "semantic.surface.danger.no_fill-hover": "14bfabb910e31fbcfa8d817e490605c9a37eda77",
+      "semantic.surface.danger.no_fill-active": "210eb634a846a53248941f6b7107c6cec2b19d90",
+      "semantic.surface.info.subtle": "ebee93032aefe05d6862e0e5a5a255be658d90f9",
+      "semantic.surface.info.subtle-hover": "020a1f38a918d49cbe7e851621e59ed039849e93",
+      "semantic.surface.on_inverted.default": "2f2cf0334763f0be0013d86951d43ed6d2fb2568",
+      "semantic.surface.on_inverted.hover": "c92521ba29b62e55f4802ec35662c9ec622b0ada",
+      "semantic.surface.on_inverted.active": "85127e4efdef259d8ca846ce633b6b67b3263a49",
+      "semantic.surface.on_inverted.no_fill": "0d6f8ac81d672291a204fa3ea76ac5b910f11605",
+      "semantic.surface.on_inverted.no_fill-hover": "8acf74d27a990d127050269c90aa05d0029e6813",
+      "semantic.surface.on_inverted.no_fill-active": "b6a4f3d89a860b7072491eb7fdad28bc4131bb72",
+      "semantic.border.info.default": "21cca19fc1c3a14f7f27d6ad3622935bbc0617db",
+      "semantic.border.action.common.subtle": "8669800fb2d0f12a24e302bae5f38393b1c29ace",
+      "semantic.border.action.common.subtle-hover": "f8fe5ef83802de793f223793dfac25103001ebf6",
+      "semantic.border.action.common.default": "9eb4143712134c7fc7b3791cc8be73f64ec5af1b",
+      "semantic.border.action.common.hover": "fa818d547035d15535034234f9118bf19863945c",
+      "semantic.border.action.common.active": "6c3d3ec528de1cdec5adecbc07cf86c4cd1918f2",
+      "semantic.border.action.common.dark": "43b7fdf5ee7eec5a99a5d4b460eb79d0fdfece38",
+      "semantic.border.action.common.dark-hover": "86d84d471e58e05971dbc3308da4d07ee6f1f6fc",
+      "semantic.border.neutral.default": "dc2a2d770f8d9be91f770503320fcb0c55153f9b",
+      "semantic.border.neutral.subtle": "99692cc14a56e45ca439e9c3c608ac73161fe000",
+      "semantic.border.neutral.strong": "defaa2623c44046838342f1da6b56efd9ac38f12",
+      "semantic.border.neutral.divider": "a322abf8d224aa60e30f620ec4474bf6b25905b4",
+      "semantic.border.success.default": "661504b28de00dc73f336ffb1dc5f9ee1e824e00",
+      "semantic.border.success.hover": "1e8ae8f06aee321425fe575836321339b295dd83",
+      "semantic.border.success.active": "1e070adae5bfd459b90e86a0bcad8080a312ffa7",
+      "semantic.border.warning.default": "126679ab7b9b35925c357b1800f272a4836d10c9",
+      "semantic.border.warning.hover": "18b999b0f6b0fea8242cf8899fff398e3dd4ed68",
+      "semantic.border.warning.active": "930d54cb39eeaee1aef5436f2c443e4b1a4ef932",
+      "semantic.border.danger.default": "0ca5a22ef2fd9d10418f3d82b2fd982d715930ca",
+      "semantic.border.danger.hover": "4ffb1917389cdc8fa294cf6bed58c65e6e4dca4e",
+      "semantic.border.danger.active": "4458a0f864870046a75b9d92e8767ea50592dc08",
+      "semantic.border.focus.outline": "0d71ebb82d592374ce6672872fd404732ea6f383",
+      "semantic.border.focus.boxshadow": "71a7f0dc43577c00e6965ff3f38c7bcf708435e6",
+      "semantic.border.on_inverted.default": "ee11fdcc0ab03b8e22e623e6029fd5f0788fb525",
+      "semantic.border.input.default": "0e4fd12d67159ceb871a820dbaebf001d8c3884e",
+      "semantic.border.input.hover": "0bf7867e90272b1f5d858f2210efa8613e2c4dfc",
+      "semantic.text.success.default": "5902ad2d2e08380ea63897c4a2c0abe765973061",
+      "semantic.text.success.hover": "cffbc33d33e4f64dfe3ce79eb85099537ddb9c33",
+      "semantic.text.success.active": "b44e0696de9b4bb7c4269a565b759cbd0283f8e5",
+      "semantic.text.success.on_success": "fe1c5375ddb6d36921246ac522ed90edbe71dc39",
+      "semantic.text.success.on_success_subtle": "6b724f6b2b401d8bb4d75865b15bd32f5e276c10",
+      "semantic.text.neutral.default": "0903f7873307965435a1afd3e4026ae3be2d204e",
+      "semantic.text.neutral.subtle": "7779664fb70a118bcbe00e01d02f95b9687a5704",
+      "semantic.text.neutral.on_inverted": "d1ef2831833f5c69dd6bac90ae86dbf7cfe6fca3",
+      "semantic.text.action.common.default": "0b5947e68051c95071ec9d3ace02ea523e091f59",
+      "semantic.text.action.common.hover": "263ac432a1890bd2c2420af71aef553862730e80",
+      "semantic.text.action.common.active": "7caf2d99efc73753ad7794ec80a3a74b2c2a1235",
+      "semantic.text.action.common.on_action": "26d0fa2b02900870d102e974df033c033ae4ecb5",
+      "semantic.text.warning.default": "f8435bfae64ab932a54eb3366bc51f83590ef5b0",
+      "semantic.text.warning.icon_warning": "4e8ee733bd86cabfaad29f59fe15bf1e5eed5923",
+      "semantic.text.warning.on_warning": "8c93a9a75795f981e8340d71497d36fc59da414a",
+      "semantic.text.danger.default": "f35f33ef5c272847b32f3a458cba364bd621b0c0",
+      "semantic.text.danger.hover": "0d97758d5e72c92e7740490dd64fdb3735e7f0b1",
+      "semantic.text.danger.active": "f9201468bdffefdc81c25707a946ac987644ff89",
+      "semantic.text.danger.on_danger": "c4690ebc5df479b729563ab67a58187c3bd3179d",
+      "semantic.text.danger.on_danger_subtle": "a73ccb113189004f0b850c0fb525717dde0850d1",
+      "semantic.text.visited.default": "23cf9f9bf3a5154a92fa4c2db72705239d379830",
+      "border_radius.interactive": "d0197f67031abf0002e4af4157192b013f3c2968",
+      "border_radius.small": "147fa48d1111e172c686060bd89d793dc080501d",
+      "border_radius.medium": "100abf46647f0e29906bbc471c150750c5112ef5",
+      "border_radius.large": "346e26e76f97b4b478975436856c1fa19e6e755c",
+      "border_radius.xlarge": "0a235a595afeb4a784a13a2d365b7e3dac32e0af",
+      "border_radius.full": "e167c834356039e5be68596ee4b18d0e2c5ffb26",
+      "spacing.0": "c0a452ad9e2555e8885ad03e22bf6726de279b5b",
+      "spacing.1": "3a751e741c52f35df45bea76ca1f1d4bbcc8189c",
+      "spacing.2": "f6670477b357047f45759484aeffbe22c83c76aa",
+      "spacing.3": "07f8edc3822d9b5a363565815ba0bf23d8524411",
+      "spacing.4": "dcd0829950ddca2ff3c608edf71d6de12d7b56e4",
+      "spacing.5": "bf8bac25dec2bdaa3b95b97737570d7d4ee1625e",
+      "spacing.6": "b4117d9fe6c1b2104e8d1938f5885fc7cca95a4b",
+      "spacing.7": "e8fc3b4d4b34131805d4b60b6a19695d80406290",
+      "spacing.8": "13e912de0f2b3877ac719b9b6437bd1f83b74cd6",
+      "spacing.10": "98e72ae88d022522172713315071618da5774f8e",
+      "spacing.12": "b39b157e89ffe318b5613ebe8e92cc6b65aa0934",
+      "spacing.14": "88893e9d6ecf9d5147767e34498c57b345e52096",
+      "spacing.18": "11bdcdac5048ceadc12e41bf26f06f4f3c035a8a",
+      "spacing.22": "fa0c08958dcd6ee93195a5e5dd5bbb2894bf26b4",
+      "spacing.26": "50aca80d886266dbb5578ea44746175e88ba6b95",
+      "spacing.30": "412b8378c14840ab8865cc86232289244c1c8cb9",
+      "base_spacing": "729c72b4ea11009164ebd3395633cf2f6aef8249",
+      "sizing.1": "d44cfeccce68eab89d09591518fc32e108890484",
+      "sizing.2": "1d69ff6bd36a1a69a4701397389b46539e9efeeb",
+      "sizing.3": "b645a8c79e0078c54d579cd3d6fe61c0390118ee",
+      "sizing.4": "70ed621a94a4a9a3e4e7000d1d2a2b3bbfb1fa0e",
+      "sizing.5": "c0e63cac333a2514826c29256634190dfe007ae0",
+      "sizing.6": "31512b569fdc9057e89ee714f6c314dbb0aed467",
+      "sizing.7": "220e99598eeb57469c5f1a51afd11374f961f423",
+      "sizing.8": "d3c0b7132bd3cf7f4e97bfe034ced4afdc1b0627",
+      "sizing.10": "62b37fc4067d2762653ff6872d44ac529c2873e7",
+      "sizing.12": "d9e53776f2795121838722d82eeae090cd94864b",
+      "sizing.14": "711fee0840389f17e18700dedd77979ae32f0335",
+      "sizing.18": "f88be992519e1f8bfe3d8115217d2acf6a4cf677",
+      "sizing.22": "7f509409e3625e2fb0449df7d2d42cd441f3e82a",
+      "sizing.26": "eb188af80483d28495f216ab18dba1cf5634f691",
+      "sizing.30": "dac41f8e7618e2e2c8cbb9c73187e7798260583f",
+      "base_sizing": "7efead99136e81bed601b9c01e27e28e7e8a2e1b",
+      "border_width.default": "dfcd0568ecfbf3837e887626b694fe16b0335d86",
+      "border_width.active": "a597eedd5138fb532a105011b85d756b6862ff52",
+      "border_width.tab_focus": "d8d78247b3135f9a462ba968b4f8fe552c8b0b17"
     },
     "group": "Core"
   },
@@ -169,7 +153,8 @@
     "selectedTokenSets": {
       "Brand/Digdir": "enabled",
       "Base/Semantic": "enabled",
-      "Base/Core": "source"
+      "Base/Core": "source",
+      "Density/Default": "enabled"
     },
     "$figmaStyleReferences": {
       "heading.heading-xlarge": "S:3c153973cb7a9a9c750db73e13e99baee56692e7,",
@@ -295,7 +280,6 @@
       "semantic.background.default": "S:aa05601b5bcf03508012ba6b87a2293984b31e3f,",
       "semantic.background.subtle": "S:69bc5795ca06ab12402fab8778139626f3de589f,",
       "semantic.surface.neutral.inverted": "S:342e6a24beb1d93152914f61f3a1a11a2f8188e2,",
-      "semantic.surface.action.subtle": "S:f159c7f63f4e095cb75bf770cf0625366a56d8b6,",
       "semantic.surface.action.subtle-hover": "S:71d1e125704adf63c5b0ffd42421d808bd322531,",
       "semantic.surface.action.default": "S:eb4951e1f7cfd99d167e4ab67d3edc2c3e412a60,",
       "semantic.surface.action.hover": "S:4e4bb9c41d91a71b50bc5d84fcd0e22630628ba4,",
@@ -328,7 +312,6 @@
       "semantic.surface.tertiary.tertiary-hover": "S:80e9253afce445a3c6f2a6bd98c372501933ee6b,",
       "semantic.surface.tertiary.tertiary-active": "S:b689fae8c6cc5fd27dae42b560d971d5e7dbb9ae,",
       "semantic.border.info.default": "S:19df2fc03ec24346fa30c0b37d50b64cb0c85614,",
-      "semantic.border.action.subtle": "S:04ad95c402fd76ed849b1031835632c8d3c06236,",
       "semantic.border.action.hover": "S:bc8730939b4c02ed642ca9a8e5397ecaad9ec020,",
       "semantic.border.action.active": "S:019654324698b19d71ba02e616e183dfb30f15b9,",
       "semantic.border.neutral.default": "S:86de0ad5e55f2e4ac7cb2a0ad8f48105e6e9a626,",
@@ -352,8 +335,6 @@
       "semantic.text.neutral.default": "S:ff25f9c6a756a42bc0124e07113dcf88a850b704,",
       "semantic.text.neutral.subtle": "S:b9232f360e337f73b13c80760edd2348d3869247,",
       "semantic.text.neutral.on_inverted": "S:eb14dc1096bbccf930da18005deb357bafa6bc21,",
-      "semantic.text.action.default": "S:e7ff72a6683853f5403350ace19fdef1cf265a06,",
-      "semantic.text.action.on_action": "S:a8b81cc349e852d00861be87404778bc6aab598c,",
       "semantic.text.warning.default": "S:fe3805478223d98b0a890f4aa9c9f748402ad858,",
       "semantic.text.warning.icon_warning": "S:d839a0ba929a7eb4596f88a46c2d78ef19c8bb4a,",
       "semantic.text.warning.on_warning": "S:37cbee9d1eb7e246fab472e635705bee4ba871cc,",
@@ -416,38 +397,51 @@
       "semantic.surface.primary.light": "S:5d186a6b3411853833badfc76abd94a6fdfbc63a,",
       "brand.secondary.900": "S:23925b130515fb61d12fb3414165f61e094a6262,",
       "semantic.surface.danger.no_fill-active": "S:edd236f2e24d2f9f83699730b5ef792aa03d96a5,",
-      "semantic.border.action.dark": "S:38130df3c467c65fd93968897876556bc5bf60e7,"
+      "semantic.border.action.dark": "S:38130df3c467c65fd93968897876556bc5bf60e7,",
+      "semantic.surface.action.common.subtle": "S:f159c7f63f4e095cb75bf770cf0625366a56d8b6,",
+      "semantic.border.action.common.subtle": "S:04ad95c402fd76ed849b1031835632c8d3c06236,",
+      "semantic.text.action.common.default": "S:e7ff72a6683853f5403350ace19fdef1cf265a06,",
+      "semantic.text.action.common.on_action": "S:a8b81cc349e852d00861be87404778bc6aab598c,"
     },
     "$figmaCollectionId": "VariableCollectionId:6324:1609",
     "$figmaModeId": "6324:1",
     "$figmaVariableReferences": {
-      "brand.primary.100": "63e5e5b3492f8c2eb6a3bf28c4cdaf30fec110dd",
-      "brand.primary.200": "057a0b83108d7485acbacebb29af2ee8f628c8e4",
-      "brand.primary.300": "c1a6210a67e3c9290e972b3127fe73233ad4905d",
-      "brand.primary.400": "38ccc2cc05db7ea9e99eda35fd354707495a0cfe",
-      "brand.primary.500": "d479b864ee86e8411de049e55dbd908afe4ae7f1",
-      "brand.primary.600": "3995e5d4157b1aeaa9701cb5714ddeb461503f83",
-      "brand.primary.700": "eec213633fbb0c6d63a98a59d12acf71c624152a",
-      "brand.primary.800": "d310bdd0df53387a640db959beacfc5d157307a7",
-      "brand.primary.900": "4a937700819d82f1e1f082e5f230b2812d9cd6f9",
-      "brand.secondary.100": "a32a0344383475cbd2023cf273aff956643242d1",
-      "brand.secondary.200": "6ac42a7e62972ab39041eea68710bd9ba25c622e",
-      "brand.secondary.300": "e5015df164b88ce0f1d922c963d29756f0373fec",
-      "brand.secondary.400": "898c7ca507941ba9a90135b9f9df79bfb006ab24",
-      "brand.secondary.500": "64cf58b12d5aeb65bc36c2b5c3f611e4a9cb10c4",
-      "brand.secondary.600": "9d412892cf80820fc6e7fdb7234580a8551e1112",
-      "brand.secondary.700": "12c7276781ef624da47484329dd12d30bccf4994",
-      "brand.secondary.800": "c9888b116e2fa883a51fe9a187952dbfc857c14f",
-      "brand.secondary.900": "9763647eec7e34fd400ac567e724b69ef8ed161c",
-      "brand.tertiary.100": "fe3d859f5b7bc074d478fb8a1b8de6454ec4aa78",
-      "brand.tertiary.200": "3d38368d37ae7ceb1dd81cc3ce7d01db46d080c7",
-      "brand.tertiary.300": "79cc7aad64074e9d97fb244288e7ac376819b1c4",
-      "brand.tertiary.400": "8330876aad27733ba10126b766f818e29ece6085",
-      "brand.tertiary.500": "8c53ad76c588803c2c3ddb5439e1d9c854b392d7",
-      "brand.tertiary.600": "571575ca17cee47233e899ef40c02b68348707f5",
-      "brand.tertiary.700": "1572d330e5501e5a1f2ee2010f5c53117ad5ab68",
-      "brand.tertiary.800": "e651cae9105e716e7d884361f3bf896a50e2d628",
-      "brand.tertiary.900": "14e1a6aae891ced8841151216cec25d63bedda1f",
+      "component-mode-height.small": "0b2f3753457a44472f9ab086f5cc2fa154ffa26e",
+      "component-mode-height.medium": "7a23d75bf57b3f6f038c5bd7b2d50ffe3e19ea24",
+      "component-mode-height.large": "ee9bf703bf09f764bfe535e5ec0f02f956ab1380",
+      "component-mode-spacing.small": "faf2a0357d659b2a6c42082be56d7e463ff3d92f",
+      "component-mode-spacing.medium": "975e5f00e008bd6f1a5330f496bc489b71a5d6fc",
+      "component-mode-spacing.large": "598bafec3dcda87030f698042875bf07e7812110",
+      "component-mode-gap.small": "d67d4cc3a0577f04850073ab08bf641d940e2c05",
+      "component-mode-gap.medium": "c7d623fb1de89532a2ab4b4bfeb3e15e9f70107b",
+      "component-mode-gap.large": "5f29fbde252e39a188bcfa6d35775216efe0f1e5",
+      "brand.alt1.100": "4aad3c2d1e9705bdfd285550a9e08950d7ce7c17",
+      "brand.alt1.200": "b29c57317b25742516666bd260e5bfe5c751164f",
+      "brand.alt1.300": "88b9cb771cfc628a54a546c7b924528dd0cde449",
+      "brand.alt1.400": "f9bc97ac5c9470f249fc22c2106ae9cc0e79c96a",
+      "brand.alt1.500": "e4a075d5ad1ac4c1a91fc3064b9abab52e543b87",
+      "brand.alt1.600": "e0e5a45e03ef29ed89b590e5c14438191a25a2c4",
+      "brand.alt1.700": "89ce4f02f32c61f6e48842e7cee289650b27f290",
+      "brand.alt1.800": "44fd7844e26551a870ffb7a9d50f554d648391bd",
+      "brand.alt1.900": "a316c90203c239c2727aedccb255e53abb2d2c89",
+      "brand.alt2.100": "52a17010b7a9ea59231d205c9165ef271894e96d",
+      "brand.alt2.200": "b80ed7f8c02c73bd0c951e4aa92cf9521aac0e52",
+      "brand.alt2.300": "2f18fe7a8a2697237825a4b78fb062a00d36e2ba",
+      "brand.alt2.400": "602f7440f7e436d816f0a69297d81a795f123335",
+      "brand.alt2.500": "8da24db700818fa2345724afba0e708c10bb0344",
+      "brand.alt2.600": "3cb486e824b5cd0ddd5cd945e0234bdb2c46ba35",
+      "brand.alt2.700": "02ee1a451119cf90d88bedb933ffce6cee41913e",
+      "brand.alt2.800": "afa77811a6432c0ef38fffbeaba36a15862cef20",
+      "brand.alt2.900": "3ffc5b092459e773b9c551876f7e7655b37f4bbf",
+      "brand.alt3.100": "86ae2e670ba5b48721b7c545405af49103769e96",
+      "brand.alt3.200": "4407368e2ce6e3f9351b5f63339b24a0f4cb75d7",
+      "brand.alt3.300": "dda69b2d21b3622c773c0dcdb9ac69c79ca68530",
+      "brand.alt3.400": "5c6e30f4339fbeff0a7d3b3a59ccf9f7d9a12163",
+      "brand.alt3.500": "cca87ae300b4afe35de08b67ba37151550449136",
+      "brand.alt3.600": "07d10df79bc3bdc1f90feb12853451b8ef2a1012",
+      "brand.alt3.700": "89e7c552d409c7149d1567bca1b715c70b5b9c03",
+      "brand.alt3.800": "6043cf9d056f718d8566ffd7f4f8ba4ca4558612",
+      "brand.alt3.900": "9c008ccc7703add21d2ca7e7ead0e897bc6cfd86",
       "semantic.surface.primary.light": "3dff5fed1bb86b9a135dc2559c45e9c21f5ddd94",
       "semantic.surface.primary.light-hover": "0ce4ac0cfd64af0e59fa30c432ad2253ad1d225d",
       "semantic.surface.primary.light-active": "12d48db064c5a1da3d54a4617714849a886a11b3",
@@ -460,6 +454,22 @@
       "semantic.surface.tertiary.light-hover": "19f169a88a9ce24aab9e8b17b500413c87e87dbb",
       "semantic.surface.tertiary.light-active": "ca101124ae0d2aadf85fd8047f08d376128bc17d",
       "semantic.surface.tertiary.dark": "abfb1593ceec73e5c7c04efceeb4aa849f34acf5",
+      "semantic.surface.action.brand_alt1.subtle": "569217923b570193583d9f7a71286621a266cdc6",
+      "semantic.surface.action.brand_alt1.subtle-hover": "d5bd3cc2bda5445411e7ff9c7ea5d37ef06e6717",
+      "semantic.surface.action.brand_alt1.default": "1ffb00ab4071d58dc3a7ccfb45ed532e1cd1fbde",
+      "semantic.surface.action.brand_alt1.hover": "9785a59f3686e9ef0b6deeeeaaa5937315c31839",
+      "semantic.surface.action.brand_alt1.active": "6156619f94df8bc8e14467bb43dadb98f766c59f",
+      "semantic.surface.action.brand_alt1.no_fill": "65dd4c9cc9c2953c34c1f1db462f80494bc266aa",
+      "semantic.surface.action.brand_alt1.no_fill-hover": "35985cfb7798c765bd92e687c6c49acbcc9d5a82",
+      "semantic.surface.action.brand_alt1.no_fill-active": "d6bc35e339798596f743693ccc010f9e7dbb6d1e",
+      "semantic.surface.action.brand_alt2.subtle": "cb33e0302edc44c5debaf9a974b65527f924abea",
+      "semantic.surface.action.brand_alt2.subtle-hover": "5d36eac128e74a297e330470d5f4999213227ce2",
+      "semantic.surface.action.brand_alt2.default": "2ede466ea9f650c1b0811f12fcf7794684cd295a",
+      "semantic.surface.action.brand_alt2.hover": "5fa19605b405a358ab518fcf76e1b742fe284ec2",
+      "semantic.surface.action.brand_alt2.active": "652b31b9f7810ef55981ef9dc2f17f37b4a55aa4",
+      "semantic.surface.action.brand_alt2.no_fill": "8b7de4272c93eca66b67bea465e588a9076b173b",
+      "semantic.surface.action.brand_alt2.no_fill-hover": "abd75269b771ca8f4b566639647ffb236012c411",
+      "semantic.surface.action.brand_alt2.no_fill-active": "19fdc12d684d66c4b62ac1730fec93577cb19180",
       "semantic.border.primary.default": "26d7d78349bdbfff162fea599c03aa6b6dd6b1c4",
       "semantic.border.primary.hover": "ec54d7ad0f9c8bfe0a02c77af471b3a5c73d2e36",
       "semantic.border.primary.active": "87442a8b64934289de42a249b154156fbf384284",
@@ -469,6 +479,24 @@
       "semantic.border.tertiary.default": "09b9bf835501e0713abb2be09a7142195aa911b8",
       "semantic.border.tertiary.hover": "1e231d7a9fdbb38a9a76df1c75bc29b0c9ba333b",
       "semantic.border.tertiary.active": "d2e5800d58e5796542422879a28194f1c708ff6f",
+      "semantic.border.action.brand_alt1.subtle": "ce219465c87404c91dd11d5ec48aa8e26a4b6cda",
+      "semantic.border.action.brand_alt1.subtle-hover": "8b2ddd14ba0fbe510114535ce53aedc75c8d4f4a",
+      "semantic.border.action.brand_alt1.default": "240490a7c68f61f179d2f609473656bb6d4d3825",
+      "semantic.border.action.brand_alt1.hover": "9ff3015a2acad304a869dcff5562f38fd9069ea7",
+      "semantic.border.action.brand_alt1.active": "0f60f77b98525932bf7c8dbdcc5708b832bfc32e",
+      "semantic.border.action.brand_alt2.subtle": "48d3ea849f38d906f6e8529ef3eefe82f24a8aaa",
+      "semantic.border.action.brand_alt2.subtle-hover": "77351e76cdf3461b0e0c951a95b26b6e4418f80f",
+      "semantic.border.action.brand_alt2.default": "4460485af2d68e6889e24bdccf3af17ed63a4a03",
+      "semantic.border.action.brand_alt2.hover": "56f6fb7218e555648f7df4d782bbce1b7835f5b8",
+      "semantic.border.action.brand_alt2.active": "e5af7480690111bbec35b957aecb7670c62d2700",
+      "semantic.text.action.brand_alt1.default": "d06698428455e574641d941f6bf470503aff6571",
+      "semantic.text.action.brand_alt1.hover": "1717155c5696e84b5ed991dd27ce70af2c47fdf4",
+      "semantic.text.action.brand_alt1.active": "7b703d65b372e6af59e2e257b60b7b26fe180764",
+      "semantic.text.action.brand_alt1.on_action": "8bda1f00f4c40e3315b44bf0d08b63875b985256",
+      "semantic.text.action.brand_alt2.default": "1d4ec6c36a0e1121fda05c0ce4f95c5d1553e6b7",
+      "semantic.text.action.brand_alt2.hover": "de47a42e752d8aedcd10b908ed0090a3e0e9ca88",
+      "semantic.text.action.brand_alt2.active": "c7569ec1056825c1a52b9549611c48637d8c2fea",
+      "semantic.text.action.brand_alt2.on_action": "663bfa559afd3875a77cb82e602644b6290d72d6",
       "semantic.background.default": "25860544ea24bfc677bf722b5e20ea3fc631afd8",
       "semantic.background.subtle": "5055f730eae40b1d8f36c27f4ae6d48fe85add82",
       "semantic.surface.neutral.default": "94fc7e07e074a3a933e7dbcd45fb6578bb727c8b",
@@ -476,24 +504,17 @@
       "semantic.surface.neutral.subtle": "072113acf733592a7331b0a60e6a4eeaba3f51f6",
       "semantic.surface.neutral.subtle-hover": "19eb9af0393a16ae01a48972e77a16efb16eeb21",
       "semantic.surface.neutral.dark": "18e3ba1f54c2b363135f1498775fb4e96e9074da",
+      "semantic.surface.neutral.dark-hover": "efcf3d7a4016df005cd2d858ef733ceb8b2d6bca",
       "semantic.surface.neutral.inverted": "829ca533c51e3313229bc965096af00de00887f3",
-      "semantic.surface.action.primary.subtle": "4b4fcdea8db61ae0dbc8cfe92e43a14b0bbbd419",
-      "semantic.surface.action.primary.subtle-hover": "d222e50958a1a181215b0e7c08fab68e531dc72f",
-      "semantic.surface.action.primary.default": "3224793ea7d4779be7145901373bd958d74449c7",
-      "semantic.surface.action.primary.hover": "67d3e0a6fe5bffa2b601cf549d677e9dffe91e06",
-      "semantic.surface.action.primary.active": "45019ba69f93a6704efdf7ad33c9bdf5f5cf17a5",
-      "semantic.surface.action.primary.no_fill": "f71c5104b0a17c2dbc0b8696f775ce56453e306c",
-      "semantic.surface.action.primary.no_fill-hover": "c882e6f21b1bd5671cf67931694ecca0e545510c",
-      "semantic.surface.action.primary.no_fill-active": "49546fbca10893ed632a44065e31464a182fd3e0",
-      "semantic.surface.action.secondary.subtle": "a8189f9429cf9d9573261606c932d038351dd194",
-      "semantic.surface.action.secondary.subtle-hover": "849d739cdbcbce5bee9babcdb9a30b7c29f08d0c",
-      "semantic.surface.action.secondary.default": "289db1f10554ebef6eff1698b18cbf1fdadfb9f9",
-      "semantic.surface.action.secondary.hover": "270134da72038e940c6259cbf5ae45760ff5ba2b",
-      "semantic.surface.action.secondary.active": "5b980d8e424956fb9164fe9ba04bb6627c6d4a4b",
-      "semantic.surface.action.secondary.no_fill": "93001593b13c2f9e232066ed5e218576754f69e9",
-      "semantic.surface.action.secondary.no_fill-hover": "d33e63d8f3c212ee6a6c98039b49c712cb551f17",
-      "semantic.surface.action.secondary.no_fill-active": "3d188a0071be6874c09cc10a36b3127da959ac40",
-      "semantic.surface.action.checked": "a012df3f7f2ce68950a401de91633c3e70a7f6e7",
+      "semantic.surface.action.common.subtle": "75cc22bd5c6c94a5e5fb23cd164aaec5506a6c4a",
+      "semantic.surface.action.common.subtle-hover": "f5375de1115faecf98170313fcdaf570e53cd4b6",
+      "semantic.surface.action.common.default": "cf6d54f74547d2b4abde13a874084446a16c5c96",
+      "semantic.surface.action.common.hover": "981d112837bf874490151a3666939a023862dccc",
+      "semantic.surface.action.common.active": "cb0e487a0079d8bf60b587b16f66e2844915a38d",
+      "semantic.surface.action.common.no_fill": "b2112d2d9f8fd4cb46c992d396f383a2e2867c88",
+      "semantic.surface.action.common.no_fill-hover": "07e581146cfef97f7992a37fe2c795587484c2d0",
+      "semantic.surface.action.common.no_fill-active": "4b4db73b559b8b03285458d6fafb6956da4768a3",
+      "semantic.surface.action.common.checked": "f546d1adf80894cb56e7565edce63d847d909642",
       "semantic.surface.success.subtle": "4d65f5a3b0724e554432b0f3b4a6f9d8eb32532c",
       "semantic.surface.success.subtle-hover": "92f493b4e256f985653ddd390827c9bbfbaababc",
       "semantic.surface.success.default": "af25ae7d2fb04081fc80b7dbf4832443bb4f7d54",
@@ -522,17 +543,13 @@
       "semantic.surface.on_inverted.no_fill-hover": "95c81a1c06bc82cb1afd51300a27d65e4ff52269",
       "semantic.surface.on_inverted.no_fill-active": "d3d2ee87d81af7bd2f06ca6bc46c54481f349eea",
       "semantic.border.info.default": "706d2ddf232b2159e8082ed895ba160ddb3ea807",
-      "semantic.border.action.primary.subtle": "6bc771b3969e960825b8fedf929a033fbbfc93fa",
-      "semantic.border.action.primary.subtle-hover": "aa6e077bea51bce391c4657318afede1d0a8ddb4",
-      "semantic.border.action.primary.default": "2b8f878780a4bb5cbb51fb4616e58cabdbc4d120",
-      "semantic.border.action.primary.hover": "ac58b4805ceec71060f771b43e856e6d3254710a",
-      "semantic.border.action.primary.active": "96bcd30fcc6e6109007b33b51614e419509d9b53",
-      "semantic.border.action.secondary.subtle": "7fb6049ba38729ab4de9b861013950dd05fb1620",
-      "semantic.border.action.secondary.subtle-hover": "3db6a49ebefd58167a7aa2f6df6a9933eb63b22e",
-      "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
-      "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
-      "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
+      "semantic.border.action.common.subtle": "2dee87d7622b0260c4b890fb48b45c1282131722",
+      "semantic.border.action.common.subtle-hover": "409f719b2a8a97d966c328ecacbe29655d02bcad",
+      "semantic.border.action.common.default": "d8960a64a391a0ff4dba9607c9f02b95ad66ae88",
+      "semantic.border.action.common.hover": "883575c9a42e0f8960fea191c54531e5cbd02dc0",
+      "semantic.border.action.common.active": "7440d4fdd3c9c2f2ce66aad11679adb12c4cc4ec",
+      "semantic.border.action.common.dark": "a35bbd3ec28cf1359467bfbbbc71cf5742119c7f",
+      "semantic.border.action.common.dark-hover": "7276d1390533d130ee3a9b9757fe7f6e9f696391",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
       "semantic.border.neutral.strong": "5832f6ab88c2f25a74ff6f18d74d8981513ed59f",
@@ -559,14 +576,10 @@
       "semantic.text.neutral.default": "e084264f5b933e90fcc6a152cc5fffa7244e30d6",
       "semantic.text.neutral.subtle": "cf105793fbd54f73824598418634362ca60c8e4e",
       "semantic.text.neutral.on_inverted": "f0ce02d3118b486bc9fb3f61cf841923f89699b4",
-      "semantic.text.action.primary.default": "2f6d8e179b0fcbdbf61fc138ff9b0c0677fdeaf1",
-      "semantic.text.action.primary.hover": "c7e534c241ae5410dbe4b9d7b1017a996b0cbe41",
-      "semantic.text.action.primary.active": "ad4cd4e443a3a69634d59294cacd75e5c5f160c7",
-      "semantic.text.action.primary.on_action": "72310ee8ad1ba5a19ec023832d9add405e4ab2b5",
-      "semantic.text.action.secondary.default": "88899d057d7c8584c2b58fbee927af49ce1116d8",
-      "semantic.text.action.secondary.hover": "e169afc172cc4338acca8783e2885d292e31d885",
-      "semantic.text.action.secondary.active": "68ec1bce96ec8e116ff96d764587f0c90d48878f",
-      "semantic.text.action.secondary.on_action": "9a713327fb5fe555ff10a035d4b3431a9bf517a1",
+      "semantic.text.action.common.default": "495ee8a45ae8e334edf3c1d81656d3ddd0820254",
+      "semantic.text.action.common.hover": "d7a603cd6efb370dfd7093aa7964676bf0c481ce",
+      "semantic.text.action.common.active": "648c8be35aea3a3d994767fa225c284fecfe6f9f",
+      "semantic.text.action.common.on_action": "d3f684d7c3abf080e66c440a70946ee2db7a9177",
       "semantic.text.warning.default": "372f89db084bb2d76a43a1caa625b89eed667600",
       "semantic.text.warning.icon_warning": "4d57242be884beb77ede81db3649de6e7158c8c8",
       "semantic.text.warning.on_warning": "80ace6af38f4f1bde0014e9d3987eae17b3c20b3",
@@ -617,8 +630,7 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
-      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
     },
     "group": "Brand"
   },
@@ -629,38 +641,39 @@
     "selectedTokenSets": {
       "Brand/Altinn": "enabled",
       "Base/Core": "source",
-      "Base/Semantic": "enabled"
+      "Base/Semantic": "enabled",
+      "Density/Default": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:6324:1609",
     "$figmaModeId": "6324:2",
     "$figmaVariableReferences": {
-      "brand.primary.100": "63e5e5b3492f8c2eb6a3bf28c4cdaf30fec110dd",
-      "brand.primary.200": "057a0b83108d7485acbacebb29af2ee8f628c8e4",
-      "brand.primary.300": "c1a6210a67e3c9290e972b3127fe73233ad4905d",
-      "brand.primary.400": "38ccc2cc05db7ea9e99eda35fd354707495a0cfe",
-      "brand.primary.500": "d479b864ee86e8411de049e55dbd908afe4ae7f1",
-      "brand.primary.600": "3995e5d4157b1aeaa9701cb5714ddeb461503f83",
-      "brand.primary.700": "eec213633fbb0c6d63a98a59d12acf71c624152a",
-      "brand.primary.800": "d310bdd0df53387a640db959beacfc5d157307a7",
-      "brand.primary.900": "4a937700819d82f1e1f082e5f230b2812d9cd6f9",
-      "brand.secondary.100": "a32a0344383475cbd2023cf273aff956643242d1",
-      "brand.secondary.200": "6ac42a7e62972ab39041eea68710bd9ba25c622e",
-      "brand.secondary.300": "e5015df164b88ce0f1d922c963d29756f0373fec",
-      "brand.secondary.400": "898c7ca507941ba9a90135b9f9df79bfb006ab24",
-      "brand.secondary.500": "64cf58b12d5aeb65bc36c2b5c3f611e4a9cb10c4",
-      "brand.secondary.600": "9d412892cf80820fc6e7fdb7234580a8551e1112",
-      "brand.secondary.700": "12c7276781ef624da47484329dd12d30bccf4994",
-      "brand.secondary.800": "c9888b116e2fa883a51fe9a187952dbfc857c14f",
-      "brand.secondary.900": "9763647eec7e34fd400ac567e724b69ef8ed161c",
-      "brand.tertiary.100": "fe3d859f5b7bc074d478fb8a1b8de6454ec4aa78",
-      "brand.tertiary.200": "3d38368d37ae7ceb1dd81cc3ce7d01db46d080c7",
-      "brand.tertiary.300": "79cc7aad64074e9d97fb244288e7ac376819b1c4",
-      "brand.tertiary.400": "8330876aad27733ba10126b766f818e29ece6085",
-      "brand.tertiary.500": "8c53ad76c588803c2c3ddb5439e1d9c854b392d7",
-      "brand.tertiary.600": "571575ca17cee47233e899ef40c02b68348707f5",
-      "brand.tertiary.700": "1572d330e5501e5a1f2ee2010f5c53117ad5ab68",
-      "brand.tertiary.800": "e651cae9105e716e7d884361f3bf896a50e2d628",
-      "brand.tertiary.900": "14e1a6aae891ced8841151216cec25d63bedda1f",
+      "brand.alt1.100": "4aad3c2d1e9705bdfd285550a9e08950d7ce7c17",
+      "brand.alt1.200": "b29c57317b25742516666bd260e5bfe5c751164f",
+      "brand.alt1.300": "88b9cb771cfc628a54a546c7b924528dd0cde449",
+      "brand.alt1.400": "f9bc97ac5c9470f249fc22c2106ae9cc0e79c96a",
+      "brand.alt1.500": "e4a075d5ad1ac4c1a91fc3064b9abab52e543b87",
+      "brand.alt1.600": "e0e5a45e03ef29ed89b590e5c14438191a25a2c4",
+      "brand.alt1.700": "89ce4f02f32c61f6e48842e7cee289650b27f290",
+      "brand.alt1.800": "44fd7844e26551a870ffb7a9d50f554d648391bd",
+      "brand.alt1.900": "a316c90203c239c2727aedccb255e53abb2d2c89",
+      "brand.alt2.100": "52a17010b7a9ea59231d205c9165ef271894e96d",
+      "brand.alt2.200": "b80ed7f8c02c73bd0c951e4aa92cf9521aac0e52",
+      "brand.alt2.300": "2f18fe7a8a2697237825a4b78fb062a00d36e2ba",
+      "brand.alt2.400": "602f7440f7e436d816f0a69297d81a795f123335",
+      "brand.alt2.500": "8da24db700818fa2345724afba0e708c10bb0344",
+      "brand.alt2.600": "3cb486e824b5cd0ddd5cd945e0234bdb2c46ba35",
+      "brand.alt2.700": "02ee1a451119cf90d88bedb933ffce6cee41913e",
+      "brand.alt2.800": "afa77811a6432c0ef38fffbeaba36a15862cef20",
+      "brand.alt2.900": "3ffc5b092459e773b9c551876f7e7655b37f4bbf",
+      "brand.alt3.100": "86ae2e670ba5b48721b7c545405af49103769e96",
+      "brand.alt3.200": "4407368e2ce6e3f9351b5f63339b24a0f4cb75d7",
+      "brand.alt3.300": "dda69b2d21b3622c773c0dcdb9ac69c79ca68530",
+      "brand.alt3.400": "5c6e30f4339fbeff0a7d3b3a59ccf9f7d9a12163",
+      "brand.alt3.500": "cca87ae300b4afe35de08b67ba37151550449136",
+      "brand.alt3.600": "07d10df79bc3bdc1f90feb12853451b8ef2a1012",
+      "brand.alt3.700": "89e7c552d409c7149d1567bca1b715c70b5b9c03",
+      "brand.alt3.800": "6043cf9d056f718d8566ffd7f4f8ba4ca4558612",
+      "brand.alt3.900": "9c008ccc7703add21d2ca7e7ead0e897bc6cfd86",
       "semantic.surface.primary.light": "3dff5fed1bb86b9a135dc2559c45e9c21f5ddd94",
       "semantic.surface.primary.light-hover": "0ce4ac0cfd64af0e59fa30c432ad2253ad1d225d",
       "semantic.surface.primary.light-active": "12d48db064c5a1da3d54a4617714849a886a11b3",
@@ -673,6 +686,22 @@
       "semantic.surface.tertiary.light-hover": "19f169a88a9ce24aab9e8b17b500413c87e87dbb",
       "semantic.surface.tertiary.light-active": "ca101124ae0d2aadf85fd8047f08d376128bc17d",
       "semantic.surface.tertiary.dark": "abfb1593ceec73e5c7c04efceeb4aa849f34acf5",
+      "semantic.surface.action.brand_alt1.subtle": "569217923b570193583d9f7a71286621a266cdc6",
+      "semantic.surface.action.brand_alt1.subtle-hover": "d5bd3cc2bda5445411e7ff9c7ea5d37ef06e6717",
+      "semantic.surface.action.brand_alt1.default": "1ffb00ab4071d58dc3a7ccfb45ed532e1cd1fbde",
+      "semantic.surface.action.brand_alt1.hover": "9785a59f3686e9ef0b6deeeeaaa5937315c31839",
+      "semantic.surface.action.brand_alt1.active": "6156619f94df8bc8e14467bb43dadb98f766c59f",
+      "semantic.surface.action.brand_alt1.no_fill": "65dd4c9cc9c2953c34c1f1db462f80494bc266aa",
+      "semantic.surface.action.brand_alt1.no_fill-hover": "35985cfb7798c765bd92e687c6c49acbcc9d5a82",
+      "semantic.surface.action.brand_alt1.no_fill-active": "d6bc35e339798596f743693ccc010f9e7dbb6d1e",
+      "semantic.surface.action.brand_alt2.subtle": "cb33e0302edc44c5debaf9a974b65527f924abea",
+      "semantic.surface.action.brand_alt2.subtle-hover": "5d36eac128e74a297e330470d5f4999213227ce2",
+      "semantic.surface.action.brand_alt2.default": "2ede466ea9f650c1b0811f12fcf7794684cd295a",
+      "semantic.surface.action.brand_alt2.hover": "5fa19605b405a358ab518fcf76e1b742fe284ec2",
+      "semantic.surface.action.brand_alt2.active": "652b31b9f7810ef55981ef9dc2f17f37b4a55aa4",
+      "semantic.surface.action.brand_alt2.no_fill": "8b7de4272c93eca66b67bea465e588a9076b173b",
+      "semantic.surface.action.brand_alt2.no_fill-hover": "abd75269b771ca8f4b566639647ffb236012c411",
+      "semantic.surface.action.brand_alt2.no_fill-active": "19fdc12d684d66c4b62ac1730fec93577cb19180",
       "semantic.border.primary.default": "26d7d78349bdbfff162fea599c03aa6b6dd6b1c4",
       "semantic.border.primary.hover": "ec54d7ad0f9c8bfe0a02c77af471b3a5c73d2e36",
       "semantic.border.primary.active": "87442a8b64934289de42a249b154156fbf384284",
@@ -682,6 +711,24 @@
       "semantic.border.tertiary.default": "09b9bf835501e0713abb2be09a7142195aa911b8",
       "semantic.border.tertiary.hover": "1e231d7a9fdbb38a9a76df1c75bc29b0c9ba333b",
       "semantic.border.tertiary.active": "d2e5800d58e5796542422879a28194f1c708ff6f",
+      "semantic.border.action.brand_alt1.subtle": "ce219465c87404c91dd11d5ec48aa8e26a4b6cda",
+      "semantic.border.action.brand_alt1.subtle-hover": "8b2ddd14ba0fbe510114535ce53aedc75c8d4f4a",
+      "semantic.border.action.brand_alt1.default": "240490a7c68f61f179d2f609473656bb6d4d3825",
+      "semantic.border.action.brand_alt1.hover": "9ff3015a2acad304a869dcff5562f38fd9069ea7",
+      "semantic.border.action.brand_alt1.active": "0f60f77b98525932bf7c8dbdcc5708b832bfc32e",
+      "semantic.text.action.brand_alt1.default": "d06698428455e574641d941f6bf470503aff6571",
+      "semantic.text.action.brand_alt1.hover": "1717155c5696e84b5ed991dd27ce70af2c47fdf4",
+      "semantic.text.action.brand_alt1.active": "7b703d65b372e6af59e2e257b60b7b26fe180764",
+      "semantic.text.action.brand_alt1.on_action": "8bda1f00f4c40e3315b44bf0d08b63875b985256",
+      "semantic.text.action.brand_alt2.default": "1d4ec6c36a0e1121fda05c0ce4f95c5d1553e6b7",
+      "semantic.text.action.brand_alt2.hover": "de47a42e752d8aedcd10b908ed0090a3e0e9ca88",
+      "semantic.text.action.brand_alt2.active": "c7569ec1056825c1a52b9549611c48637d8c2fea",
+      "semantic.text.action.brand_alt2.on_action": "663bfa559afd3875a77cb82e602644b6290d72d6",
+      "semantic.border.action.brand_alt2.subtle": "48d3ea849f38d906f6e8529ef3eefe82f24a8aaa",
+      "semantic.border.action.brand_alt2.subtle-hover": "77351e76cdf3461b0e0c951a95b26b6e4418f80f",
+      "semantic.border.action.brand_alt2.default": "4460485af2d68e6889e24bdccf3af17ed63a4a03",
+      "semantic.border.action.brand_alt2.hover": "56f6fb7218e555648f7df4d782bbce1b7835f5b8",
+      "semantic.border.action.brand_alt2.active": "e5af7480690111bbec35b957aecb7670c62d2700",
       "semantic.background.default": "25860544ea24bfc677bf722b5e20ea3fc631afd8",
       "semantic.background.subtle": "5055f730eae40b1d8f36c27f4ae6d48fe85add82",
       "semantic.surface.neutral.default": "94fc7e07e074a3a933e7dbcd45fb6578bb727c8b",
@@ -689,24 +736,17 @@
       "semantic.surface.neutral.subtle": "072113acf733592a7331b0a60e6a4eeaba3f51f6",
       "semantic.surface.neutral.subtle-hover": "19eb9af0393a16ae01a48972e77a16efb16eeb21",
       "semantic.surface.neutral.dark": "18e3ba1f54c2b363135f1498775fb4e96e9074da",
+      "semantic.surface.neutral.dark-hover": "efcf3d7a4016df005cd2d858ef733ceb8b2d6bca",
       "semantic.surface.neutral.inverted": "829ca533c51e3313229bc965096af00de00887f3",
-      "semantic.surface.action.primary.subtle": "4b4fcdea8db61ae0dbc8cfe92e43a14b0bbbd419",
-      "semantic.surface.action.primary.subtle-hover": "d222e50958a1a181215b0e7c08fab68e531dc72f",
-      "semantic.surface.action.primary.default": "3224793ea7d4779be7145901373bd958d74449c7",
-      "semantic.surface.action.primary.hover": "67d3e0a6fe5bffa2b601cf549d677e9dffe91e06",
-      "semantic.surface.action.primary.active": "45019ba69f93a6704efdf7ad33c9bdf5f5cf17a5",
-      "semantic.surface.action.primary.no_fill": "f71c5104b0a17c2dbc0b8696f775ce56453e306c",
-      "semantic.surface.action.primary.no_fill-hover": "c882e6f21b1bd5671cf67931694ecca0e545510c",
-      "semantic.surface.action.primary.no_fill-active": "49546fbca10893ed632a44065e31464a182fd3e0",
-      "semantic.surface.action.secondary.subtle": "a8189f9429cf9d9573261606c932d038351dd194",
-      "semantic.surface.action.secondary.subtle-hover": "849d739cdbcbce5bee9babcdb9a30b7c29f08d0c",
-      "semantic.surface.action.secondary.default": "289db1f10554ebef6eff1698b18cbf1fdadfb9f9",
-      "semantic.surface.action.secondary.hover": "270134da72038e940c6259cbf5ae45760ff5ba2b",
-      "semantic.surface.action.secondary.active": "5b980d8e424956fb9164fe9ba04bb6627c6d4a4b",
-      "semantic.surface.action.secondary.no_fill": "93001593b13c2f9e232066ed5e218576754f69e9",
-      "semantic.surface.action.secondary.no_fill-hover": "d33e63d8f3c212ee6a6c98039b49c712cb551f17",
-      "semantic.surface.action.secondary.no_fill-active": "3d188a0071be6874c09cc10a36b3127da959ac40",
-      "semantic.surface.action.checked": "a012df3f7f2ce68950a401de91633c3e70a7f6e7",
+      "semantic.surface.action.common.subtle": "75cc22bd5c6c94a5e5fb23cd164aaec5506a6c4a",
+      "semantic.surface.action.common.subtle-hover": "f5375de1115faecf98170313fcdaf570e53cd4b6",
+      "semantic.surface.action.common.default": "cf6d54f74547d2b4abde13a874084446a16c5c96",
+      "semantic.surface.action.common.hover": "981d112837bf874490151a3666939a023862dccc",
+      "semantic.surface.action.common.active": "cb0e487a0079d8bf60b587b16f66e2844915a38d",
+      "semantic.surface.action.common.no_fill": "b2112d2d9f8fd4cb46c992d396f383a2e2867c88",
+      "semantic.surface.action.common.no_fill-hover": "07e581146cfef97f7992a37fe2c795587484c2d0",
+      "semantic.surface.action.common.no_fill-active": "4b4db73b559b8b03285458d6fafb6956da4768a3",
+      "semantic.surface.action.common.checked": "f546d1adf80894cb56e7565edce63d847d909642",
       "semantic.surface.success.subtle": "4d65f5a3b0724e554432b0f3b4a6f9d8eb32532c",
       "semantic.surface.success.subtle-hover": "92f493b4e256f985653ddd390827c9bbfbaababc",
       "semantic.surface.success.default": "af25ae7d2fb04081fc80b7dbf4832443bb4f7d54",
@@ -735,17 +775,13 @@
       "semantic.surface.on_inverted.no_fill-hover": "95c81a1c06bc82cb1afd51300a27d65e4ff52269",
       "semantic.surface.on_inverted.no_fill-active": "d3d2ee87d81af7bd2f06ca6bc46c54481f349eea",
       "semantic.border.info.default": "706d2ddf232b2159e8082ed895ba160ddb3ea807",
-      "semantic.border.action.primary.subtle": "6bc771b3969e960825b8fedf929a033fbbfc93fa",
-      "semantic.border.action.primary.subtle-hover": "aa6e077bea51bce391c4657318afede1d0a8ddb4",
-      "semantic.border.action.primary.default": "2b8f878780a4bb5cbb51fb4616e58cabdbc4d120",
-      "semantic.border.action.primary.hover": "ac58b4805ceec71060f771b43e856e6d3254710a",
-      "semantic.border.action.primary.active": "96bcd30fcc6e6109007b33b51614e419509d9b53",
-      "semantic.border.action.secondary.subtle": "7fb6049ba38729ab4de9b861013950dd05fb1620",
-      "semantic.border.action.secondary.subtle-hover": "3db6a49ebefd58167a7aa2f6df6a9933eb63b22e",
-      "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
-      "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
-      "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
+      "semantic.border.action.common.subtle": "2dee87d7622b0260c4b890fb48b45c1282131722",
+      "semantic.border.action.common.subtle-hover": "409f719b2a8a97d966c328ecacbe29655d02bcad",
+      "semantic.border.action.common.default": "d8960a64a391a0ff4dba9607c9f02b95ad66ae88",
+      "semantic.border.action.common.hover": "883575c9a42e0f8960fea191c54531e5cbd02dc0",
+      "semantic.border.action.common.active": "7440d4fdd3c9c2f2ce66aad11679adb12c4cc4ec",
+      "semantic.border.action.common.dark": "a35bbd3ec28cf1359467bfbbbc71cf5742119c7f",
+      "semantic.border.action.common.dark-hover": "7276d1390533d130ee3a9b9757fe7f6e9f696391",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
       "semantic.border.neutral.strong": "5832f6ab88c2f25a74ff6f18d74d8981513ed59f",
@@ -772,14 +808,10 @@
       "semantic.text.neutral.default": "e084264f5b933e90fcc6a152cc5fffa7244e30d6",
       "semantic.text.neutral.subtle": "cf105793fbd54f73824598418634362ca60c8e4e",
       "semantic.text.neutral.on_inverted": "f0ce02d3118b486bc9fb3f61cf841923f89699b4",
-      "semantic.text.action.primary.default": "2f6d8e179b0fcbdbf61fc138ff9b0c0677fdeaf1",
-      "semantic.text.action.primary.hover": "c7e534c241ae5410dbe4b9d7b1017a996b0cbe41",
-      "semantic.text.action.primary.active": "ad4cd4e443a3a69634d59294cacd75e5c5f160c7",
-      "semantic.text.action.primary.on_action": "72310ee8ad1ba5a19ec023832d9add405e4ab2b5",
-      "semantic.text.action.secondary.default": "88899d057d7c8584c2b58fbee927af49ce1116d8",
-      "semantic.text.action.secondary.hover": "e169afc172cc4338acca8783e2885d292e31d885",
-      "semantic.text.action.secondary.active": "68ec1bce96ec8e116ff96d764587f0c90d48878f",
-      "semantic.text.action.secondary.on_action": "9a713327fb5fe555ff10a035d4b3431a9bf517a1",
+      "semantic.text.action.common.default": "495ee8a45ae8e334edf3c1d81656d3ddd0820254",
+      "semantic.text.action.common.hover": "d7a603cd6efb370dfd7093aa7964676bf0c481ce",
+      "semantic.text.action.common.active": "648c8be35aea3a3d994767fa225c284fecfe6f9f",
+      "semantic.text.action.common.on_action": "d3f684d7c3abf080e66c440a70946ee2db7a9177",
       "semantic.text.warning.default": "372f89db084bb2d76a43a1caa625b89eed667600",
       "semantic.text.warning.icon_warning": "4d57242be884beb77ede81db3649de6e7158c8c8",
       "semantic.text.warning.on_warning": "80ace6af38f4f1bde0014e9d3987eae17b3c20b3",
@@ -830,8 +862,7 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
-      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
     },
     "group": "Brand"
   },
@@ -841,45 +872,40 @@
     "selectedTokenSets": {
       "Brand/Tilsynet": "enabled",
       "Base/Core": "source",
-      "Base/Semantic": "enabled"
+      "Base/Semantic": "enabled",
+      "Density/Default": "enabled"
     },
     "$figmaStyleReferences": {},
     "$figmaCollectionId": "VariableCollectionId:6324:1609",
     "$figmaModeId": "6324:3",
     "$figmaVariableReferences": {
-      "brand.primary.100": "63e5e5b3492f8c2eb6a3bf28c4cdaf30fec110dd",
-      "brand.primary.200": "057a0b83108d7485acbacebb29af2ee8f628c8e4",
-      "brand.primary.300": "c1a6210a67e3c9290e972b3127fe73233ad4905d",
-      "brand.primary.400": "38ccc2cc05db7ea9e99eda35fd354707495a0cfe",
-      "brand.primary.500": "d479b864ee86e8411de049e55dbd908afe4ae7f1",
-      "brand.primary.600": "3995e5d4157b1aeaa9701cb5714ddeb461503f83",
-      "brand.primary.700": "eec213633fbb0c6d63a98a59d12acf71c624152a",
-      "brand.primary.800": "d310bdd0df53387a640db959beacfc5d157307a7",
-      "brand.primary.900": "4a937700819d82f1e1f082e5f230b2812d9cd6f9",
-      "brand.secondary.100": "a32a0344383475cbd2023cf273aff956643242d1",
-      "brand.secondary.200": "6ac42a7e62972ab39041eea68710bd9ba25c622e",
-      "brand.secondary.300": "e5015df164b88ce0f1d922c963d29756f0373fec",
-      "brand.secondary.400": "898c7ca507941ba9a90135b9f9df79bfb006ab24",
-      "brand.secondary.500": "64cf58b12d5aeb65bc36c2b5c3f611e4a9cb10c4",
-      "brand.secondary.600": "9d412892cf80820fc6e7fdb7234580a8551e1112",
-      "brand.secondary.700": "12c7276781ef624da47484329dd12d30bccf4994",
-      "brand.secondary.800": "c9888b116e2fa883a51fe9a187952dbfc857c14f",
-      "brand.secondary.900": "9763647eec7e34fd400ac567e724b69ef8ed161c",
-      "brand.tertiary.100": "fe3d859f5b7bc074d478fb8a1b8de6454ec4aa78",
-      "brand.tertiary.200": "3d38368d37ae7ceb1dd81cc3ce7d01db46d080c7",
-      "brand.tertiary.300": "79cc7aad64074e9d97fb244288e7ac376819b1c4",
-      "brand.tertiary.400": "8330876aad27733ba10126b766f818e29ece6085",
-      "brand.tertiary.500": "8c53ad76c588803c2c3ddb5439e1d9c854b392d7",
-      "brand.tertiary.600": "571575ca17cee47233e899ef40c02b68348707f5",
-      "brand.tertiary.700": "1572d330e5501e5a1f2ee2010f5c53117ad5ab68",
-      "brand.tertiary.800": "e651cae9105e716e7d884361f3bf896a50e2d628",
-      "brand.tertiary.900": "14e1a6aae891ced8841151216cec25d63bedda1f",
-      "semantic.surface.action.primary.default": "3224793ea7d4779be7145901373bd958d74449c7",
-      "semantic.surface.action.primary.hover": "67d3e0a6fe5bffa2b601cf549d677e9dffe91e06",
-      "semantic.surface.action.primary.active": "45019ba69f93a6704efdf7ad33c9bdf5f5cf17a5",
-      "semantic.surface.action.secondary.default": "289db1f10554ebef6eff1698b18cbf1fdadfb9f9",
-      "semantic.surface.action.secondary.hover": "270134da72038e940c6259cbf5ae45760ff5ba2b",
-      "semantic.surface.action.secondary.active": "5b980d8e424956fb9164fe9ba04bb6627c6d4a4b",
+      "brand.alt1.100": "4aad3c2d1e9705bdfd285550a9e08950d7ce7c17",
+      "brand.alt1.200": "b29c57317b25742516666bd260e5bfe5c751164f",
+      "brand.alt1.300": "88b9cb771cfc628a54a546c7b924528dd0cde449",
+      "brand.alt1.400": "f9bc97ac5c9470f249fc22c2106ae9cc0e79c96a",
+      "brand.alt1.500": "e4a075d5ad1ac4c1a91fc3064b9abab52e543b87",
+      "brand.alt1.600": "e0e5a45e03ef29ed89b590e5c14438191a25a2c4",
+      "brand.alt1.700": "89ce4f02f32c61f6e48842e7cee289650b27f290",
+      "brand.alt1.800": "44fd7844e26551a870ffb7a9d50f554d648391bd",
+      "brand.alt1.900": "a316c90203c239c2727aedccb255e53abb2d2c89",
+      "brand.alt2.100": "52a17010b7a9ea59231d205c9165ef271894e96d",
+      "brand.alt2.200": "b80ed7f8c02c73bd0c951e4aa92cf9521aac0e52",
+      "brand.alt2.300": "2f18fe7a8a2697237825a4b78fb062a00d36e2ba",
+      "brand.alt2.400": "602f7440f7e436d816f0a69297d81a795f123335",
+      "brand.alt2.500": "8da24db700818fa2345724afba0e708c10bb0344",
+      "brand.alt2.600": "3cb486e824b5cd0ddd5cd945e0234bdb2c46ba35",
+      "brand.alt2.700": "02ee1a451119cf90d88bedb933ffce6cee41913e",
+      "brand.alt2.800": "afa77811a6432c0ef38fffbeaba36a15862cef20",
+      "brand.alt2.900": "3ffc5b092459e773b9c551876f7e7655b37f4bbf",
+      "brand.alt3.100": "86ae2e670ba5b48721b7c545405af49103769e96",
+      "brand.alt3.200": "4407368e2ce6e3f9351b5f63339b24a0f4cb75d7",
+      "brand.alt3.300": "dda69b2d21b3622c773c0dcdb9ac69c79ca68530",
+      "brand.alt3.400": "5c6e30f4339fbeff0a7d3b3a59ccf9f7d9a12163",
+      "brand.alt3.500": "cca87ae300b4afe35de08b67ba37151550449136",
+      "brand.alt3.600": "07d10df79bc3bdc1f90feb12853451b8ef2a1012",
+      "brand.alt3.700": "89e7c552d409c7149d1567bca1b715c70b5b9c03",
+      "brand.alt3.800": "6043cf9d056f718d8566ffd7f4f8ba4ca4558612",
+      "brand.alt3.900": "9c008ccc7703add21d2ca7e7ead0e897bc6cfd86",
       "semantic.surface.primary.light": "3dff5fed1bb86b9a135dc2559c45e9c21f5ddd94",
       "semantic.surface.primary.light-hover": "0ce4ac0cfd64af0e59fa30c432ad2253ad1d225d",
       "semantic.surface.primary.light-active": "12d48db064c5a1da3d54a4617714849a886a11b3",
@@ -892,6 +918,22 @@
       "semantic.surface.tertiary.light-hover": "19f169a88a9ce24aab9e8b17b500413c87e87dbb",
       "semantic.surface.tertiary.light-active": "ca101124ae0d2aadf85fd8047f08d376128bc17d",
       "semantic.surface.tertiary.dark": "abfb1593ceec73e5c7c04efceeb4aa849f34acf5",
+      "semantic.surface.action.brand_alt1.subtle": "569217923b570193583d9f7a71286621a266cdc6",
+      "semantic.surface.action.brand_alt1.subtle-hover": "d5bd3cc2bda5445411e7ff9c7ea5d37ef06e6717",
+      "semantic.surface.action.brand_alt1.default": "1ffb00ab4071d58dc3a7ccfb45ed532e1cd1fbde",
+      "semantic.surface.action.brand_alt1.hover": "9785a59f3686e9ef0b6deeeeaaa5937315c31839",
+      "semantic.surface.action.brand_alt1.active": "6156619f94df8bc8e14467bb43dadb98f766c59f",
+      "semantic.surface.action.brand_alt1.no_fill": "65dd4c9cc9c2953c34c1f1db462f80494bc266aa",
+      "semantic.surface.action.brand_alt1.no_fill-hover": "35985cfb7798c765bd92e687c6c49acbcc9d5a82",
+      "semantic.surface.action.brand_alt1.no_fill-active": "d6bc35e339798596f743693ccc010f9e7dbb6d1e",
+      "semantic.surface.action.brand_alt2.subtle": "cb33e0302edc44c5debaf9a974b65527f924abea",
+      "semantic.surface.action.brand_alt2.subtle-hover": "5d36eac128e74a297e330470d5f4999213227ce2",
+      "semantic.surface.action.brand_alt2.default": "2ede466ea9f650c1b0811f12fcf7794684cd295a",
+      "semantic.surface.action.brand_alt2.hover": "5fa19605b405a358ab518fcf76e1b742fe284ec2",
+      "semantic.surface.action.brand_alt2.active": "652b31b9f7810ef55981ef9dc2f17f37b4a55aa4",
+      "semantic.surface.action.brand_alt2.no_fill": "8b7de4272c93eca66b67bea465e588a9076b173b",
+      "semantic.surface.action.brand_alt2.no_fill-hover": "abd75269b771ca8f4b566639647ffb236012c411",
+      "semantic.surface.action.brand_alt2.no_fill-active": "19fdc12d684d66c4b62ac1730fec93577cb19180",
       "semantic.border.primary.default": "26d7d78349bdbfff162fea599c03aa6b6dd6b1c4",
       "semantic.border.primary.hover": "ec54d7ad0f9c8bfe0a02c77af471b3a5c73d2e36",
       "semantic.border.primary.active": "87442a8b64934289de42a249b154156fbf384284",
@@ -901,6 +943,24 @@
       "semantic.border.tertiary.default": "09b9bf835501e0713abb2be09a7142195aa911b8",
       "semantic.border.tertiary.hover": "1e231d7a9fdbb38a9a76df1c75bc29b0c9ba333b",
       "semantic.border.tertiary.active": "d2e5800d58e5796542422879a28194f1c708ff6f",
+      "semantic.border.action.brand_alt1.subtle": "ce219465c87404c91dd11d5ec48aa8e26a4b6cda",
+      "semantic.border.action.brand_alt1.subtle-hover": "8b2ddd14ba0fbe510114535ce53aedc75c8d4f4a",
+      "semantic.border.action.brand_alt1.default": "240490a7c68f61f179d2f609473656bb6d4d3825",
+      "semantic.border.action.brand_alt1.hover": "9ff3015a2acad304a869dcff5562f38fd9069ea7",
+      "semantic.border.action.brand_alt1.active": "0f60f77b98525932bf7c8dbdcc5708b832bfc32e",
+      "semantic.border.action.brand_alt2.subtle": "48d3ea849f38d906f6e8529ef3eefe82f24a8aaa",
+      "semantic.border.action.brand_alt2.subtle-hover": "77351e76cdf3461b0e0c951a95b26b6e4418f80f",
+      "semantic.border.action.brand_alt2.default": "4460485af2d68e6889e24bdccf3af17ed63a4a03",
+      "semantic.border.action.brand_alt2.hover": "56f6fb7218e555648f7df4d782bbce1b7835f5b8",
+      "semantic.border.action.brand_alt2.active": "e5af7480690111bbec35b957aecb7670c62d2700",
+      "semantic.text.action.brand_alt1.default": "d06698428455e574641d941f6bf470503aff6571",
+      "semantic.text.action.brand_alt1.hover": "1717155c5696e84b5ed991dd27ce70af2c47fdf4",
+      "semantic.text.action.brand_alt1.active": "7b703d65b372e6af59e2e257b60b7b26fe180764",
+      "semantic.text.action.brand_alt1.on_action": "8bda1f00f4c40e3315b44bf0d08b63875b985256",
+      "semantic.text.action.brand_alt2.default": "1d4ec6c36a0e1121fda05c0ce4f95c5d1553e6b7",
+      "semantic.text.action.brand_alt2.hover": "de47a42e752d8aedcd10b908ed0090a3e0e9ca88",
+      "semantic.text.action.brand_alt2.active": "c7569ec1056825c1a52b9549611c48637d8c2fea",
+      "semantic.text.action.brand_alt2.on_action": "663bfa559afd3875a77cb82e602644b6290d72d6",
       "semantic.background.default": "25860544ea24bfc677bf722b5e20ea3fc631afd8",
       "semantic.background.subtle": "5055f730eae40b1d8f36c27f4ae6d48fe85add82",
       "semantic.surface.neutral.default": "94fc7e07e074a3a933e7dbcd45fb6578bb727c8b",
@@ -908,18 +968,17 @@
       "semantic.surface.neutral.subtle": "072113acf733592a7331b0a60e6a4eeaba3f51f6",
       "semantic.surface.neutral.subtle-hover": "19eb9af0393a16ae01a48972e77a16efb16eeb21",
       "semantic.surface.neutral.dark": "18e3ba1f54c2b363135f1498775fb4e96e9074da",
+      "semantic.surface.neutral.dark-hover": "efcf3d7a4016df005cd2d858ef733ceb8b2d6bca",
       "semantic.surface.neutral.inverted": "829ca533c51e3313229bc965096af00de00887f3",
-      "semantic.surface.action.primary.subtle": "4b4fcdea8db61ae0dbc8cfe92e43a14b0bbbd419",
-      "semantic.surface.action.primary.subtle-hover": "d222e50958a1a181215b0e7c08fab68e531dc72f",
-      "semantic.surface.action.primary.no_fill": "f71c5104b0a17c2dbc0b8696f775ce56453e306c",
-      "semantic.surface.action.primary.no_fill-hover": "c882e6f21b1bd5671cf67931694ecca0e545510c",
-      "semantic.surface.action.primary.no_fill-active": "49546fbca10893ed632a44065e31464a182fd3e0",
-      "semantic.surface.action.secondary.subtle": "a8189f9429cf9d9573261606c932d038351dd194",
-      "semantic.surface.action.secondary.subtle-hover": "849d739cdbcbce5bee9babcdb9a30b7c29f08d0c",
-      "semantic.surface.action.secondary.no_fill": "93001593b13c2f9e232066ed5e218576754f69e9",
-      "semantic.surface.action.secondary.no_fill-hover": "d33e63d8f3c212ee6a6c98039b49c712cb551f17",
-      "semantic.surface.action.secondary.no_fill-active": "3d188a0071be6874c09cc10a36b3127da959ac40",
-      "semantic.surface.action.checked": "a012df3f7f2ce68950a401de91633c3e70a7f6e7",
+      "semantic.surface.action.common.subtle": "75cc22bd5c6c94a5e5fb23cd164aaec5506a6c4a",
+      "semantic.surface.action.common.subtle-hover": "f5375de1115faecf98170313fcdaf570e53cd4b6",
+      "semantic.surface.action.common.default": "cf6d54f74547d2b4abde13a874084446a16c5c96",
+      "semantic.surface.action.common.hover": "981d112837bf874490151a3666939a023862dccc",
+      "semantic.surface.action.common.active": "cb0e487a0079d8bf60b587b16f66e2844915a38d",
+      "semantic.surface.action.common.no_fill": "b2112d2d9f8fd4cb46c992d396f383a2e2867c88",
+      "semantic.surface.action.common.no_fill-hover": "07e581146cfef97f7992a37fe2c795587484c2d0",
+      "semantic.surface.action.common.no_fill-active": "4b4db73b559b8b03285458d6fafb6956da4768a3",
+      "semantic.surface.action.common.checked": "f546d1adf80894cb56e7565edce63d847d909642",
       "semantic.surface.success.subtle": "4d65f5a3b0724e554432b0f3b4a6f9d8eb32532c",
       "semantic.surface.success.subtle-hover": "92f493b4e256f985653ddd390827c9bbfbaababc",
       "semantic.surface.success.default": "af25ae7d2fb04081fc80b7dbf4832443bb4f7d54",
@@ -948,17 +1007,13 @@
       "semantic.surface.on_inverted.no_fill-hover": "95c81a1c06bc82cb1afd51300a27d65e4ff52269",
       "semantic.surface.on_inverted.no_fill-active": "d3d2ee87d81af7bd2f06ca6bc46c54481f349eea",
       "semantic.border.info.default": "706d2ddf232b2159e8082ed895ba160ddb3ea807",
-      "semantic.border.action.primary.subtle": "6bc771b3969e960825b8fedf929a033fbbfc93fa",
-      "semantic.border.action.primary.subtle-hover": "aa6e077bea51bce391c4657318afede1d0a8ddb4",
-      "semantic.border.action.primary.default": "2b8f878780a4bb5cbb51fb4616e58cabdbc4d120",
-      "semantic.border.action.primary.hover": "ac58b4805ceec71060f771b43e856e6d3254710a",
-      "semantic.border.action.primary.active": "96bcd30fcc6e6109007b33b51614e419509d9b53",
-      "semantic.border.action.secondary.subtle": "7fb6049ba38729ab4de9b861013950dd05fb1620",
-      "semantic.border.action.secondary.subtle-hover": "3db6a49ebefd58167a7aa2f6df6a9933eb63b22e",
-      "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
-      "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
-      "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
+      "semantic.border.action.common.subtle": "2dee87d7622b0260c4b890fb48b45c1282131722",
+      "semantic.border.action.common.subtle-hover": "409f719b2a8a97d966c328ecacbe29655d02bcad",
+      "semantic.border.action.common.default": "d8960a64a391a0ff4dba9607c9f02b95ad66ae88",
+      "semantic.border.action.common.hover": "883575c9a42e0f8960fea191c54531e5cbd02dc0",
+      "semantic.border.action.common.active": "7440d4fdd3c9c2f2ce66aad11679adb12c4cc4ec",
+      "semantic.border.action.common.dark": "a35bbd3ec28cf1359467bfbbbc71cf5742119c7f",
+      "semantic.border.action.common.dark-hover": "7276d1390533d130ee3a9b9757fe7f6e9f696391",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
       "semantic.border.neutral.strong": "5832f6ab88c2f25a74ff6f18d74d8981513ed59f",
@@ -985,14 +1040,10 @@
       "semantic.text.neutral.default": "e084264f5b933e90fcc6a152cc5fffa7244e30d6",
       "semantic.text.neutral.subtle": "cf105793fbd54f73824598418634362ca60c8e4e",
       "semantic.text.neutral.on_inverted": "f0ce02d3118b486bc9fb3f61cf841923f89699b4",
-      "semantic.text.action.primary.default": "2f6d8e179b0fcbdbf61fc138ff9b0c0677fdeaf1",
-      "semantic.text.action.primary.hover": "c7e534c241ae5410dbe4b9d7b1017a996b0cbe41",
-      "semantic.text.action.primary.active": "ad4cd4e443a3a69634d59294cacd75e5c5f160c7",
-      "semantic.text.action.primary.on_action": "72310ee8ad1ba5a19ec023832d9add405e4ab2b5",
-      "semantic.text.action.secondary.default": "88899d057d7c8584c2b58fbee927af49ce1116d8",
-      "semantic.text.action.secondary.hover": "e169afc172cc4338acca8783e2885d292e31d885",
-      "semantic.text.action.secondary.active": "68ec1bce96ec8e116ff96d764587f0c90d48878f",
-      "semantic.text.action.secondary.on_action": "9a713327fb5fe555ff10a035d4b3431a9bf517a1",
+      "semantic.text.action.common.default": "495ee8a45ae8e334edf3c1d81656d3ddd0820254",
+      "semantic.text.action.common.hover": "d7a603cd6efb370dfd7093aa7964676bf0c481ce",
+      "semantic.text.action.common.active": "648c8be35aea3a3d994767fa225c284fecfe6f9f",
+      "semantic.text.action.common.on_action": "d3f684d7c3abf080e66c440a70946ee2db7a9177",
       "semantic.text.warning.default": "372f89db084bb2d76a43a1caa625b89eed667600",
       "semantic.text.warning.icon_warning": "4d57242be884beb77ede81db3649de6e7158c8c8",
       "semantic.text.warning.on_warning": "80ace6af38f4f1bde0014e9d3987eae17b3c20b3",
@@ -1043,8 +1094,7 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
-      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
     },
     "group": "Brand"
   },
@@ -1055,48 +1105,43 @@
     "selectedTokenSets": {
       "Base/Core": "source",
       "Base/Semantic": "enabled",
-      "Brand/Brreg": "enabled"
+      "Brand/Brreg": "enabled",
+      "Density/Default": "enabled"
     },
     "$figmaVariableReferences": {
-      "brand.primary.50": "72bafb1938ce6a7d83de306738973c07ae1c81d7",
-      "brand.primary.100": "63e5e5b3492f8c2eb6a3bf28c4cdaf30fec110dd",
-      "brand.primary.200": "057a0b83108d7485acbacebb29af2ee8f628c8e4",
-      "brand.primary.300": "c1a6210a67e3c9290e972b3127fe73233ad4905d",
-      "brand.primary.400": "38ccc2cc05db7ea9e99eda35fd354707495a0cfe",
-      "brand.primary.500": "d479b864ee86e8411de049e55dbd908afe4ae7f1",
-      "brand.primary.600": "3995e5d4157b1aeaa9701cb5714ddeb461503f83",
-      "brand.primary.700": "eec213633fbb0c6d63a98a59d12acf71c624152a",
-      "brand.primary.800": "d310bdd0df53387a640db959beacfc5d157307a7",
-      "brand.primary.900": "4a937700819d82f1e1f082e5f230b2812d9cd6f9",
-      "brand.primary.950": "23d1fa52226e3ecdc8482d710fa4c58f6cd418a7",
-      "brand.secondary.50": "d0fa1cc832afb8b4177dacb59555d71c78796eba",
-      "brand.secondary.100": "a32a0344383475cbd2023cf273aff956643242d1",
-      "brand.secondary.200": "6ac42a7e62972ab39041eea68710bd9ba25c622e",
-      "brand.secondary.300": "e5015df164b88ce0f1d922c963d29756f0373fec",
-      "brand.secondary.400": "898c7ca507941ba9a90135b9f9df79bfb006ab24",
-      "brand.secondary.500": "64cf58b12d5aeb65bc36c2b5c3f611e4a9cb10c4",
-      "brand.secondary.600": "9d412892cf80820fc6e7fdb7234580a8551e1112",
-      "brand.secondary.700": "12c7276781ef624da47484329dd12d30bccf4994",
-      "brand.secondary.800": "c9888b116e2fa883a51fe9a187952dbfc857c14f",
-      "brand.secondary.900": "9763647eec7e34fd400ac567e724b69ef8ed161c",
-      "brand.secondary.950": "02be760503cd75ca4c343e3a54c02739d31011f7",
-      "brand.tertiary.50": "3e238772d930435dd9185bb4579b64007df866d9",
-      "brand.tertiary.100": "fe3d859f5b7bc074d478fb8a1b8de6454ec4aa78",
-      "brand.tertiary.200": "3d38368d37ae7ceb1dd81cc3ce7d01db46d080c7",
-      "brand.tertiary.300": "79cc7aad64074e9d97fb244288e7ac376819b1c4",
-      "brand.tertiary.400": "8330876aad27733ba10126b766f818e29ece6085",
-      "brand.tertiary.500": "8c53ad76c588803c2c3ddb5439e1d9c854b392d7",
-      "brand.tertiary.600": "571575ca17cee47233e899ef40c02b68348707f5",
-      "brand.tertiary.700": "1572d330e5501e5a1f2ee2010f5c53117ad5ab68",
-      "brand.tertiary.800": "e651cae9105e716e7d884361f3bf896a50e2d628",
-      "brand.tertiary.900": "14e1a6aae891ced8841151216cec25d63bedda1f",
-      "brand.tertiary.950": "9615bb570870e8fe3d9149bd87f59d22dbeb52ca",
-      "semantic.surface.action.primary.default": "3224793ea7d4779be7145901373bd958d74449c7",
-      "semantic.surface.action.primary.hover": "67d3e0a6fe5bffa2b601cf549d677e9dffe91e06",
-      "semantic.surface.action.primary.active": "45019ba69f93a6704efdf7ad33c9bdf5f5cf17a5",
-      "semantic.surface.action.secondary.default": "289db1f10554ebef6eff1698b18cbf1fdadfb9f9",
-      "semantic.surface.action.secondary.hover": "270134da72038e940c6259cbf5ae45760ff5ba2b",
-      "semantic.surface.action.secondary.active": "5b980d8e424956fb9164fe9ba04bb6627c6d4a4b",
+      "brand.alt1.50": "741f3f885aa3f266feda96defb70e59752495075",
+      "brand.alt1.100": "4aad3c2d1e9705bdfd285550a9e08950d7ce7c17",
+      "brand.alt1.200": "b29c57317b25742516666bd260e5bfe5c751164f",
+      "brand.alt1.300": "88b9cb771cfc628a54a546c7b924528dd0cde449",
+      "brand.alt1.400": "f9bc97ac5c9470f249fc22c2106ae9cc0e79c96a",
+      "brand.alt1.500": "e4a075d5ad1ac4c1a91fc3064b9abab52e543b87",
+      "brand.alt1.600": "e0e5a45e03ef29ed89b590e5c14438191a25a2c4",
+      "brand.alt1.700": "89ce4f02f32c61f6e48842e7cee289650b27f290",
+      "brand.alt1.800": "44fd7844e26551a870ffb7a9d50f554d648391bd",
+      "brand.alt1.900": "a316c90203c239c2727aedccb255e53abb2d2c89",
+      "brand.alt1.950": "5a21346d98b9551420c6d77d799907443471f148",
+      "brand.alt2.50": "a569ff243a8905ea0d7112238902e664ada0ceb9",
+      "brand.alt2.100": "52a17010b7a9ea59231d205c9165ef271894e96d",
+      "brand.alt2.200": "b80ed7f8c02c73bd0c951e4aa92cf9521aac0e52",
+      "brand.alt2.300": "2f18fe7a8a2697237825a4b78fb062a00d36e2ba",
+      "brand.alt2.400": "602f7440f7e436d816f0a69297d81a795f123335",
+      "brand.alt2.500": "8da24db700818fa2345724afba0e708c10bb0344",
+      "brand.alt2.600": "3cb486e824b5cd0ddd5cd945e0234bdb2c46ba35",
+      "brand.alt2.700": "02ee1a451119cf90d88bedb933ffce6cee41913e",
+      "brand.alt2.800": "afa77811a6432c0ef38fffbeaba36a15862cef20",
+      "brand.alt2.900": "3ffc5b092459e773b9c551876f7e7655b37f4bbf",
+      "brand.alt2.950": "8f867a646531f2e46fd77b36ae09abd5b3d13e65",
+      "brand.alt3.50": "330386bdb47ed063b0ecd51e81405b460f902eca",
+      "brand.alt3.100": "86ae2e670ba5b48721b7c545405af49103769e96",
+      "brand.alt3.200": "4407368e2ce6e3f9351b5f63339b24a0f4cb75d7",
+      "brand.alt3.300": "dda69b2d21b3622c773c0dcdb9ac69c79ca68530",
+      "brand.alt3.400": "5c6e30f4339fbeff0a7d3b3a59ccf9f7d9a12163",
+      "brand.alt3.500": "cca87ae300b4afe35de08b67ba37151550449136",
+      "brand.alt3.600": "07d10df79bc3bdc1f90feb12853451b8ef2a1012",
+      "brand.alt3.700": "89e7c552d409c7149d1567bca1b715c70b5b9c03",
+      "brand.alt3.800": "6043cf9d056f718d8566ffd7f4f8ba4ca4558612",
+      "brand.alt3.900": "9c008ccc7703add21d2ca7e7ead0e897bc6cfd86",
+      "brand.alt3.950": "6d5135e5d69f592ea56413a28bf129cc2121b63b",
       "semantic.surface.primary.light": "3dff5fed1bb86b9a135dc2559c45e9c21f5ddd94",
       "semantic.surface.primary.light-hover": "0ce4ac0cfd64af0e59fa30c432ad2253ad1d225d",
       "semantic.surface.primary.light-active": "12d48db064c5a1da3d54a4617714849a886a11b3",
@@ -1109,6 +1154,22 @@
       "semantic.surface.tertiary.light-hover": "19f169a88a9ce24aab9e8b17b500413c87e87dbb",
       "semantic.surface.tertiary.light-active": "ca101124ae0d2aadf85fd8047f08d376128bc17d",
       "semantic.surface.tertiary.dark": "abfb1593ceec73e5c7c04efceeb4aa849f34acf5",
+      "semantic.surface.action.brand_alt1.subtle": "569217923b570193583d9f7a71286621a266cdc6",
+      "semantic.surface.action.brand_alt1.subtle-hover": "d5bd3cc2bda5445411e7ff9c7ea5d37ef06e6717",
+      "semantic.surface.action.brand_alt1.default": "1ffb00ab4071d58dc3a7ccfb45ed532e1cd1fbde",
+      "semantic.surface.action.brand_alt1.hover": "9785a59f3686e9ef0b6deeeeaaa5937315c31839",
+      "semantic.surface.action.brand_alt1.active": "6156619f94df8bc8e14467bb43dadb98f766c59f",
+      "semantic.surface.action.brand_alt1.no_fill": "65dd4c9cc9c2953c34c1f1db462f80494bc266aa",
+      "semantic.surface.action.brand_alt1.no_fill-hover": "35985cfb7798c765bd92e687c6c49acbcc9d5a82",
+      "semantic.surface.action.brand_alt1.no_fill-active": "d6bc35e339798596f743693ccc010f9e7dbb6d1e",
+      "semantic.surface.action.brand_alt2.subtle": "cb33e0302edc44c5debaf9a974b65527f924abea",
+      "semantic.surface.action.brand_alt2.subtle-hover": "5d36eac128e74a297e330470d5f4999213227ce2",
+      "semantic.surface.action.brand_alt2.default": "2ede466ea9f650c1b0811f12fcf7794684cd295a",
+      "semantic.surface.action.brand_alt2.hover": "5fa19605b405a358ab518fcf76e1b742fe284ec2",
+      "semantic.surface.action.brand_alt2.active": "652b31b9f7810ef55981ef9dc2f17f37b4a55aa4",
+      "semantic.surface.action.brand_alt2.no_fill": "8b7de4272c93eca66b67bea465e588a9076b173b",
+      "semantic.surface.action.brand_alt2.no_fill-hover": "abd75269b771ca8f4b566639647ffb236012c411",
+      "semantic.surface.action.brand_alt2.no_fill-active": "19fdc12d684d66c4b62ac1730fec93577cb19180",
       "semantic.border.primary.default": "26d7d78349bdbfff162fea599c03aa6b6dd6b1c4",
       "semantic.border.primary.hover": "ec54d7ad0f9c8bfe0a02c77af471b3a5c73d2e36",
       "semantic.border.primary.active": "87442a8b64934289de42a249b154156fbf384284",
@@ -1118,14 +1179,24 @@
       "semantic.border.tertiary.default": "09b9bf835501e0713abb2be09a7142195aa911b8",
       "semantic.border.tertiary.hover": "1e231d7a9fdbb38a9a76df1c75bc29b0c9ba333b",
       "semantic.border.tertiary.active": "d2e5800d58e5796542422879a28194f1c708ff6f",
-      "semantic.text.action.primary.default": "2f6d8e179b0fcbdbf61fc138ff9b0c0677fdeaf1",
-      "semantic.text.action.primary.hover": "c7e534c241ae5410dbe4b9d7b1017a996b0cbe41",
-      "semantic.text.action.primary.active": "ad4cd4e443a3a69634d59294cacd75e5c5f160c7",
-      "semantic.text.action.primary.on_action": "72310ee8ad1ba5a19ec023832d9add405e4ab2b5",
-      "semantic.text.action.secondary.default": "88899d057d7c8584c2b58fbee927af49ce1116d8",
-      "semantic.text.action.secondary.hover": "e169afc172cc4338acca8783e2885d292e31d885",
-      "semantic.text.action.secondary.active": "68ec1bce96ec8e116ff96d764587f0c90d48878f",
-      "semantic.text.action.secondary.on_action": "9a713327fb5fe555ff10a035d4b3431a9bf517a1",
+      "semantic.border.action.brand_alt1.subtle": "ce219465c87404c91dd11d5ec48aa8e26a4b6cda",
+      "semantic.border.action.brand_alt1.subtle-hover": "8b2ddd14ba0fbe510114535ce53aedc75c8d4f4a",
+      "semantic.border.action.brand_alt1.default": "240490a7c68f61f179d2f609473656bb6d4d3825",
+      "semantic.border.action.brand_alt1.hover": "9ff3015a2acad304a869dcff5562f38fd9069ea7",
+      "semantic.border.action.brand_alt1.active": "0f60f77b98525932bf7c8dbdcc5708b832bfc32e",
+      "semantic.text.action.brand_alt1.default": "d06698428455e574641d941f6bf470503aff6571",
+      "semantic.text.action.brand_alt1.hover": "1717155c5696e84b5ed991dd27ce70af2c47fdf4",
+      "semantic.text.action.brand_alt1.active": "7b703d65b372e6af59e2e257b60b7b26fe180764",
+      "semantic.text.action.brand_alt1.on_action": "8bda1f00f4c40e3315b44bf0d08b63875b985256",
+      "semantic.border.action.brand_alt2.subtle": "48d3ea849f38d906f6e8529ef3eefe82f24a8aaa",
+      "semantic.border.action.brand_alt2.subtle-hover": "77351e76cdf3461b0e0c951a95b26b6e4418f80f",
+      "semantic.border.action.brand_alt2.default": "4460485af2d68e6889e24bdccf3af17ed63a4a03",
+      "semantic.border.action.brand_alt2.hover": "56f6fb7218e555648f7df4d782bbce1b7835f5b8",
+      "semantic.border.action.brand_alt2.active": "e5af7480690111bbec35b957aecb7670c62d2700",
+      "semantic.text.action.brand_alt2.default": "1d4ec6c36a0e1121fda05c0ce4f95c5d1553e6b7",
+      "semantic.text.action.brand_alt2.hover": "de47a42e752d8aedcd10b908ed0090a3e0e9ca88",
+      "semantic.text.action.brand_alt2.active": "c7569ec1056825c1a52b9549611c48637d8c2fea",
+      "semantic.text.action.brand_alt2.on_action": "663bfa559afd3875a77cb82e602644b6290d72d6",
       "semantic.background.default": "25860544ea24bfc677bf722b5e20ea3fc631afd8",
       "semantic.background.subtle": "5055f730eae40b1d8f36c27f4ae6d48fe85add82",
       "semantic.surface.neutral.default": "94fc7e07e074a3a933e7dbcd45fb6578bb727c8b",
@@ -1133,18 +1204,17 @@
       "semantic.surface.neutral.subtle": "072113acf733592a7331b0a60e6a4eeaba3f51f6",
       "semantic.surface.neutral.subtle-hover": "19eb9af0393a16ae01a48972e77a16efb16eeb21",
       "semantic.surface.neutral.dark": "18e3ba1f54c2b363135f1498775fb4e96e9074da",
+      "semantic.surface.neutral.dark-hover": "efcf3d7a4016df005cd2d858ef733ceb8b2d6bca",
       "semantic.surface.neutral.inverted": "829ca533c51e3313229bc965096af00de00887f3",
-      "semantic.surface.action.primary.subtle": "4b4fcdea8db61ae0dbc8cfe92e43a14b0bbbd419",
-      "semantic.surface.action.primary.subtle-hover": "d222e50958a1a181215b0e7c08fab68e531dc72f",
-      "semantic.surface.action.primary.no_fill": "f71c5104b0a17c2dbc0b8696f775ce56453e306c",
-      "semantic.surface.action.primary.no_fill-hover": "c882e6f21b1bd5671cf67931694ecca0e545510c",
-      "semantic.surface.action.primary.no_fill-active": "49546fbca10893ed632a44065e31464a182fd3e0",
-      "semantic.surface.action.secondary.subtle": "a8189f9429cf9d9573261606c932d038351dd194",
-      "semantic.surface.action.secondary.subtle-hover": "849d739cdbcbce5bee9babcdb9a30b7c29f08d0c",
-      "semantic.surface.action.secondary.no_fill": "93001593b13c2f9e232066ed5e218576754f69e9",
-      "semantic.surface.action.secondary.no_fill-hover": "d33e63d8f3c212ee6a6c98039b49c712cb551f17",
-      "semantic.surface.action.secondary.no_fill-active": "3d188a0071be6874c09cc10a36b3127da959ac40",
-      "semantic.surface.action.checked": "a012df3f7f2ce68950a401de91633c3e70a7f6e7",
+      "semantic.surface.action.common.subtle": "75cc22bd5c6c94a5e5fb23cd164aaec5506a6c4a",
+      "semantic.surface.action.common.subtle-hover": "f5375de1115faecf98170313fcdaf570e53cd4b6",
+      "semantic.surface.action.common.default": "cf6d54f74547d2b4abde13a874084446a16c5c96",
+      "semantic.surface.action.common.hover": "981d112837bf874490151a3666939a023862dccc",
+      "semantic.surface.action.common.active": "cb0e487a0079d8bf60b587b16f66e2844915a38d",
+      "semantic.surface.action.common.no_fill": "b2112d2d9f8fd4cb46c992d396f383a2e2867c88",
+      "semantic.surface.action.common.no_fill-hover": "07e581146cfef97f7992a37fe2c795587484c2d0",
+      "semantic.surface.action.common.no_fill-active": "4b4db73b559b8b03285458d6fafb6956da4768a3",
+      "semantic.surface.action.common.checked": "f546d1adf80894cb56e7565edce63d847d909642",
       "semantic.surface.success.subtle": "4d65f5a3b0724e554432b0f3b4a6f9d8eb32532c",
       "semantic.surface.success.subtle-hover": "92f493b4e256f985653ddd390827c9bbfbaababc",
       "semantic.surface.success.default": "af25ae7d2fb04081fc80b7dbf4832443bb4f7d54",
@@ -1173,17 +1243,13 @@
       "semantic.surface.on_inverted.no_fill-hover": "95c81a1c06bc82cb1afd51300a27d65e4ff52269",
       "semantic.surface.on_inverted.no_fill-active": "d3d2ee87d81af7bd2f06ca6bc46c54481f349eea",
       "semantic.border.info.default": "706d2ddf232b2159e8082ed895ba160ddb3ea807",
-      "semantic.border.action.primary.subtle": "6bc771b3969e960825b8fedf929a033fbbfc93fa",
-      "semantic.border.action.primary.subtle-hover": "aa6e077bea51bce391c4657318afede1d0a8ddb4",
-      "semantic.border.action.primary.default": "2b8f878780a4bb5cbb51fb4616e58cabdbc4d120",
-      "semantic.border.action.primary.hover": "ac58b4805ceec71060f771b43e856e6d3254710a",
-      "semantic.border.action.primary.active": "96bcd30fcc6e6109007b33b51614e419509d9b53",
-      "semantic.border.action.secondary.subtle": "7fb6049ba38729ab4de9b861013950dd05fb1620",
-      "semantic.border.action.secondary.subtle-hover": "3db6a49ebefd58167a7aa2f6df6a9933eb63b22e",
-      "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
-      "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
-      "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
+      "semantic.border.action.common.subtle": "2dee87d7622b0260c4b890fb48b45c1282131722",
+      "semantic.border.action.common.subtle-hover": "409f719b2a8a97d966c328ecacbe29655d02bcad",
+      "semantic.border.action.common.default": "d8960a64a391a0ff4dba9607c9f02b95ad66ae88",
+      "semantic.border.action.common.hover": "883575c9a42e0f8960fea191c54531e5cbd02dc0",
+      "semantic.border.action.common.active": "7440d4fdd3c9c2f2ce66aad11679adb12c4cc4ec",
+      "semantic.border.action.common.dark": "a35bbd3ec28cf1359467bfbbbc71cf5742119c7f",
+      "semantic.border.action.common.dark-hover": "7276d1390533d130ee3a9b9757fe7f6e9f696391",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
       "semantic.border.neutral.strong": "5832f6ab88c2f25a74ff6f18d74d8981513ed59f",
@@ -1210,6 +1276,10 @@
       "semantic.text.neutral.default": "e084264f5b933e90fcc6a152cc5fffa7244e30d6",
       "semantic.text.neutral.subtle": "cf105793fbd54f73824598418634362ca60c8e4e",
       "semantic.text.neutral.on_inverted": "f0ce02d3118b486bc9fb3f61cf841923f89699b4",
+      "semantic.text.action.common.default": "495ee8a45ae8e334edf3c1d81656d3ddd0820254",
+      "semantic.text.action.common.hover": "d7a603cd6efb370dfd7093aa7964676bf0c481ce",
+      "semantic.text.action.common.active": "648c8be35aea3a3d994767fa225c284fecfe6f9f",
+      "semantic.text.action.common.on_action": "d3f684d7c3abf080e66c440a70946ee2db7a9177",
       "semantic.text.warning.default": "372f89db084bb2d76a43a1caa625b89eed667600",
       "semantic.text.warning.icon_warning": "4d57242be884beb77ede81db3649de6e7158c8c8",
       "semantic.text.warning.on_warning": "80ace6af38f4f1bde0014e9d3987eae17b3c20b3",
@@ -1260,12 +1330,11 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
-      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
     },
-    "group": "Brand",
     "$figmaCollectionId": "VariableCollectionId:6324:1609",
-    "$figmaModeId": "6324:4"
+    "$figmaModeId": "6324:4",
+    "group": "Brand"
   },
   {
     "id": "33e1200e221c81b1bd3439e6f7413a9ac3af9aa4",
diff --git a/design-tokens/Base/Semantic.json b/design-tokens/Base/Semantic.json
index d4980785bd..e0a3e8a202 100644
--- a/design-tokens/Base/Semantic.json
+++ b/design-tokens/Base/Semantic.json
@@ -78,76 +78,6 @@
         "checked": {
           "value": "{colors.blue.700}",
           "type": "color"
-        },
-        "primary": {
-          "subtle": {
-            "value": "{colors.blue.100}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.blue.200}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.800}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          },
-          "no_fill": {
-            "value": "{colors.white}",
-            "type": "color"
-          },
-          "no_fill-hover": {
-            "value": "{colors.blue.100}",
-            "type": "color"
-          },
-          "no_fill-active": {
-            "value": "{colors.blue.200}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "subtle": {
-            "value": "{colors.grey.100}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.grey.200}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "rgba({colors.blue.900}, 0.9)",
-            "type": "color"
-          },
-          "active": {
-            "value": "rgba({colors.blue.900}, 0.8)",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          },
-          "no_fill": {
-            "value": "{colors.white}",
-            "type": "color"
-          },
-          "no_fill-hover": {
-            "value": "rgba({colors.blue.900}, 0.1)",
-            "type": "color"
-          },
-          "no_fill-active": {
-            "value": "rgba({colors.blue.900}, 0.2)",
-            "type": "color"
-          }
         }
       },
       "success": {
@@ -304,50 +234,6 @@
         "dark-hover": {
           "value": "{colors.blue.700}",
           "type": "color"
-        },
-        "primary": {
-          "subtle": {
-            "value": "{colors.blue.200}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.blue.400}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.800}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "subtle": {
-            "value": "{colors.grey.200}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.grey.300}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          }
         }
       },
       "neutral": {
@@ -490,42 +376,6 @@
         "on_action": {
           "value": "{colors.white}",
           "type": "color"
-        },
-        "primary": {
-          "default": {
-            "value": "{colors.blue.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "#004e95",
-            "type": "color"
-          },
-          "active": {
-            "value": "#00315d",
-            "type": "color"
-          },
-          "on_action": {
-            "value": "{colors.white}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "default": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "on_action": {
-            "value": "{colors.white}",
-            "type": "color"
-          }
         }
       },
       "warning": {
@@ -856,6 +706,20 @@
       }
     },
     "error_message": {
+      "large": {
+        "value": {
+          "fontFamily": "{fontFamilies.inter}",
+          "fontWeight": "{fontWeights.regular}",
+          "lineHeight": "{lineHeights.300}",
+          "fontSize": "{font-size.f1}",
+          "letterSpacing": "{letterSpacing.1}",
+          "paragraphSpacing": "{paragraphSpacing.0}",
+          "paragraphIndent": "{paragraphIndent.0}",
+          "textCase": "{textCase.none}",
+          "textDecoration": "{textDecoration.none}"
+        },
+        "type": "typography"
+      },
       "medium": {
         "value": {
           "fontFamily": "{fontFamilies.inter}",
diff --git a/design-tokens/Brand/Altinn.json b/design-tokens/Brand/Altinn.json
index ab9646c51f..2c53aa8389 100644
--- a/design-tokens/Brand/Altinn.json
+++ b/design-tokens/Brand/Altinn.json
@@ -1,6 +1,6 @@
 {
   "brand": {
-    "primary": {
+    "alt1": {
       "100": {
         "value": "#E6EFF8",
         "type": "color",
@@ -47,7 +47,7 @@
         "description": "AA 4.7 on white"
       }
     },
-    "secondary": {
+    "alt2": {
       "100": {
         "value": "#DCD6EA",
         "type": "color",
@@ -94,7 +94,7 @@
         "description": "AA18 4.4 on grey 800\nAA18 3.2 on white"
       }
     },
-    "tertiary": {
+    "alt3": {
       "100": {
         "value": "#F9D5DB",
         "type": "color",
@@ -144,103 +144,261 @@
   },
   "semantic": {
     "surface": {
-      "primary": {
+      "first": {
         "light": {
-          "value": "{brand.primary.200}",
+          "value": "{brand.alt1.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.primary.300}",
+          "value": "{brand.alt1.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.primary.400}",
+          "value": "{brand.alt1.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "light": {
-          "value": "{brand.secondary.200}",
+          "value": "{brand.alt2.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.secondary.300}",
+          "value": "{brand.alt2.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.secondary.400}",
+          "value": "{brand.alt2.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.secondary.900}",
+          "value": "{brand.alt2.900}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "light": {
-          "value": "{brand.tertiary.200}",
+          "value": "{brand.alt3.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.tertiary.300}",
+          "value": "{brand.alt3.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.tertiary.400}",
+          "value": "{brand.alt3.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.tertiary.800}",
+          "value": "{brand.alt3.800}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.blue.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.800}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "{colors.blue.100}",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "rgba({colors.blue.900}, 0.9)",
+            "type": "color"
+          },
+          "active": {
+            "value": "rgba({colors.blue.900}, 0.8)",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "rgba({colors.blue.900}, 0.1)",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "rgba({colors.blue.900}, 0.2)",
+            "type": "color"
+          }
+        }
       }
     },
     "border": {
-      "primary": {
+      "first": {
         "default": {
-          "value": "{brand.primary.600}",
+          "value": "{brand.alt1.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.primary.700}",
+          "value": "{brand.alt1.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "default": {
-          "value": "{brand.secondary.600}",
+          "value": "{brand.alt2.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.secondary.700}",
+          "value": "{brand.alt2.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.secondary.800}",
+          "value": "{brand.alt2.800}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "default": {
-          "value": "{brand.tertiary.600}",
+          "value": "{brand.alt3.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.tertiary.700}",
+          "value": "{brand.alt3.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.tertiary.800}",
+          "value": "{brand.alt3.800}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "text": {
+      "action": {
+        "first": {
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "#004e95",
+            "type": "color"
+          },
+          "active": {
+            "value": "#00315d",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        }
       }
     }
   }
diff --git a/design-tokens/Brand/Brreg.json b/design-tokens/Brand/Brreg.json
index f3c6fef972..175598f739 100644
--- a/design-tokens/Brand/Brreg.json
+++ b/design-tokens/Brand/Brreg.json
@@ -1,6 +1,6 @@
 {
   "brand": {
-    "primary": {
+    "alt1": {
       "50": {
         "value": "#FFFFFF",
         "type": "color"
@@ -46,7 +46,7 @@
         "type": "color"
       }
     },
-    "secondary": {
+    "alt2": {
       "50": {
         "value": "#FFFFFF",
         "type": "color"
@@ -92,7 +92,7 @@
         "type": "color"
       }
     },
-    "tertiary": {
+    "alt3": {
       "50": {
         "value": "#EBF2F3",
         "type": "color"
@@ -141,103 +141,261 @@
   },
   "semantic": {
     "surface": {
-      "primary": {
+      "first": {
         "light": {
-          "value": "{brand.primary.100}",
+          "value": "{brand.alt1.100}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.primary.300}",
+          "value": "{brand.alt1.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.primary.400}",
+          "value": "{brand.alt1.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.primary.700}",
+          "value": "{brand.alt1.700}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "light": {
-          "value": "{brand.secondary.200}",
+          "value": "{brand.alt2.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.secondary.300}",
+          "value": "{brand.alt2.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.secondary.400}",
+          "value": "{brand.alt2.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.secondary.700}",
+          "value": "{brand.alt2.700}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "light": {
-          "value": "{brand.tertiary.100}",
+          "value": "{brand.alt3.100}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.tertiary.200}",
+          "value": "{brand.alt3.200}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.tertiary.300}",
+          "value": "{brand.alt3.300}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.tertiary.700}",
+          "value": "{brand.alt3.700}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.blue.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.800}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "{colors.blue.100}",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "rgba({colors.blue.900}, 0.9)",
+            "type": "color"
+          },
+          "active": {
+            "value": "rgba({colors.blue.900}, 0.8)",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "rgba({colors.blue.900}, 0.1)",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "rgba({colors.blue.900}, 0.2)",
+            "type": "color"
+          }
+        }
       }
     },
     "border": {
-      "primary": {
+      "first": {
         "default": {
-          "value": "{brand.primary.600}",
+          "value": "{brand.alt1.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.primary.700}",
+          "value": "{brand.alt1.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "default": {
-          "value": "{brand.secondary.600}",
+          "value": "{brand.alt2.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.secondary.700}",
+          "value": "{brand.alt2.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.secondary.800}",
+          "value": "{brand.alt2.800}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "default": {
-          "value": "{brand.tertiary.400}",
+          "value": "{brand.alt3.400}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.tertiary.500}",
+          "value": "{brand.alt3.500}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.tertiary.600}",
+          "value": "{brand.alt3.600}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "text": {
+      "action": {
+        "first": {
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        }
       }
     }
   }
diff --git a/design-tokens/Brand/Digdir.json b/design-tokens/Brand/Digdir.json
index b607d80e28..1e885de52d 100644
--- a/design-tokens/Brand/Digdir.json
+++ b/design-tokens/Brand/Digdir.json
@@ -1,6 +1,6 @@
 {
   "brand": {
-    "primary": {
+    "alt1": {
       "100": {
         "value": "#feefef",
         "type": "color",
@@ -46,7 +46,7 @@
         "type": "color"
       }
     },
-    "secondary": {
+    "alt2": {
       "100": {
         "value": "#fcf7e9",
         "type": "color",
@@ -92,7 +92,7 @@
         "type": "color"
       }
     },
-    "tertiary": {
+    "alt3": {
       "100": {
         "value": "#e9f5ff",
         "type": "color",
@@ -141,103 +141,261 @@
   },
   "semantic": {
     "surface": {
-      "primary": {
+      "first": {
         "light": {
-          "value": "{brand.primary.200}",
+          "value": "{brand.alt1.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.primary.300}",
+          "value": "{brand.alt1.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.primary.400}",
+          "value": "{brand.alt1.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "light": {
-          "value": "{brand.secondary.200}",
+          "value": "{brand.alt2.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.secondary.300}",
+          "value": "{brand.alt2.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.secondary.400}",
+          "value": "{brand.alt2.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.secondary.900}",
+          "value": "{brand.alt2.900}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "light": {
-          "value": "{brand.tertiary.200}",
+          "value": "{brand.alt3.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.tertiary.300}",
+          "value": "{brand.alt3.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.tertiary.400}",
+          "value": "{brand.alt3.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.tertiary.800}",
+          "value": "{brand.alt3.800}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.blue.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.800}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "{colors.blue.100}",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "rgba({colors.blue.900}, 0.9)",
+            "type": "color"
+          },
+          "active": {
+            "value": "rgba({colors.blue.900}, 0.8)",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "rgba({colors.blue.900}, 0.1)",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "rgba({colors.blue.900}, 0.2)",
+            "type": "color"
+          }
+        }
       }
     },
     "border": {
-      "primary": {
+      "first": {
         "default": {
-          "value": "{brand.primary.600}",
+          "value": "{brand.alt1.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.primary.700}",
+          "value": "{brand.alt1.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "default": {
-          "value": "{brand.secondary.600}",
+          "value": "{brand.alt2.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.secondary.700}",
+          "value": "{brand.alt2.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.secondary.800}",
+          "value": "{brand.alt2.800}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "default": {
-          "value": "{brand.tertiary.600}",
+          "value": "{brand.alt3.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.tertiary.700}",
+          "value": "{brand.alt3.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.tertiary.800}",
+          "value": "{brand.alt3.800}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.blue.400}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.800}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "text": {
+      "action": {
+        "first": {
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "#004e95",
+            "type": "color"
+          },
+          "active": {
+            "value": "#00315d",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        }
       }
     }
   }
diff --git a/design-tokens/Brand/Tilsynet.json b/design-tokens/Brand/Tilsynet.json
index b3a6a4ebe7..5df38a7904 100644
--- a/design-tokens/Brand/Tilsynet.json
+++ b/design-tokens/Brand/Tilsynet.json
@@ -1,6 +1,6 @@
 {
   "brand": {
-    "primary": {
+    "alt1": {
       "100": {
         "value": "#efeffb",
         "type": "color"
@@ -38,7 +38,7 @@
         "type": "color"
       }
     },
-    "secondary": {
+    "alt2": {
       "100": {
         "value": "#ffeee1",
         "type": "color"
@@ -76,7 +76,7 @@
         "type": "color"
       }
     },
-    "tertiary": {
+    "alt3": {
       "100": {
         "value": "#eff6f4",
         "type": "color"
@@ -117,135 +117,261 @@
   },
   "semantic": {
     "surface": {
-      "action": {
-        "primary": {
-          "default": {
-            "value": "{brand.primary.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{brand.primary.800}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{brand.primary.900}",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          }
-        },
-        "secondary": {
-          "default": {
-            "value": "{brand.tertiary.800}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{brand.tertiary.900}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{brand.tertiary.900}",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          }
-        }
-      },
-      "primary": {
+      "first": {
         "light": {
-          "value": "{brand.primary.200}",
+          "value": "{brand.alt1.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.primary.300}",
+          "value": "{brand.alt1.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.primary.400}",
+          "value": "{brand.alt1.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "light": {
-          "value": "{brand.secondary.200}",
+          "value": "{brand.alt2.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.secondary.300}",
+          "value": "{brand.alt2.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.secondary.400}",
+          "value": "{brand.alt2.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.secondary.900}",
+          "value": "{brand.alt2.900}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "light": {
-          "value": "{brand.tertiary.200}",
+          "value": "{brand.alt3.200}",
           "type": "color"
         },
         "light-hover": {
-          "value": "{brand.tertiary.300}",
+          "value": "{brand.alt3.300}",
           "type": "color"
         },
         "light-active": {
-          "value": "{brand.tertiary.400}",
+          "value": "{brand.alt3.400}",
           "type": "color"
         },
         "dark": {
-          "value": "{brand.tertiary.800}",
+          "value": "{brand.alt3.800}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.grey.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "rgba({colors.blue.900}, 0.9)",
+            "type": "color"
+          },
+          "active": {
+            "value": "rgba({colors.blue.900}, 0.8)",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "rgba({colors.blue.900}, 0.1)",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "rgba({colors.blue.900}, 0.2)",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.100}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "rgba({colors.blue.900}, 0.9)",
+            "type": "color"
+          },
+          "active": {
+            "value": "rgba({colors.blue.900}, 0.8)",
+            "type": "color",
+            "description": "Standard farge for handlinger"
+          },
+          "no_fill": {
+            "value": "{colors.white}",
+            "type": "color"
+          },
+          "no_fill-hover": {
+            "value": "rgba({colors.blue.900}, 0.1)",
+            "type": "color"
+          },
+          "no_fill-active": {
+            "value": "rgba({colors.blue.900}, 0.2)",
+            "type": "color"
+          }
+        }
       }
     },
     "border": {
-      "primary": {
+      "first": {
         "default": {
-          "value": "{brand.primary.600}",
+          "value": "{brand.alt1.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.primary.700}",
+          "value": "{brand.alt1.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.primary.800}",
+          "value": "{brand.alt1.800}",
           "type": "color"
         }
       },
-      "secondary": {
+      "second": {
         "default": {
-          "value": "{brand.secondary.600}",
+          "value": "{brand.alt2.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.secondary.700}",
+          "value": "{brand.alt2.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.secondary.800}",
+          "value": "{brand.alt2.800}",
           "type": "color"
         }
       },
-      "tertiary": {
+      "third": {
         "default": {
-          "value": "{brand.tertiary.600}",
+          "value": "{brand.alt3.600}",
           "type": "color"
         },
         "hover": {
-          "value": "{brand.tertiary.700}",
+          "value": "{brand.alt3.700}",
           "type": "color"
         },
         "active": {
-          "value": "{brand.tertiary.800}",
+          "value": "{brand.alt3.800}",
           "type": "color"
         }
+      },
+      "action": {
+        "first": {
+          "subtle": {
+            "value": "{colors.blue.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.blue.400}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.800}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "subtle": {
+            "value": "{colors.grey.200}",
+            "type": "color"
+          },
+          "subtle-hover": {
+            "value": "{colors.grey.300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "text": {
+      "action": {
+        "first": {
+          "default": {
+            "value": "{colors.blue.700}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "#004e95",
+            "type": "color"
+          },
+          "active": {
+            "value": "#00315d",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        },
+        "second": {
+          "default": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{colors.blue.900}",
+            "type": "color"
+          },
+          "on_action": {
+            "value": "{colors.white}",
+            "type": "color"
+          }
+        }
       }
     }
   }
diff --git a/design-tokens/README.md b/design-tokens/README.md
index 2adbb016b0..30051035ec 100644
--- a/design-tokens/README.md
+++ b/design-tokens/README.md
@@ -12,6 +12,6 @@ You should use Figma to edit the tokens. You'll need the [Tokens Studio for Figm
    - Personal Access Token: _your PAT_
    - Repository: `digdir/designsystem`
    - Default Branch: `main`
-   - File Path: `design-tokens/tokens.json`
+   - File Path: `design-tokens`
 
 You can now "pull from GitHub" (button on top right) to fetch the tokens. When done editing tokens, you should "push to GitHub" (second button on top right).
diff --git a/docs-components/DoAndDont/DoAndDont.module.css b/docs-components/DoAndDont/DoAndDont.module.css
new file mode 100644
index 0000000000..c44c857648
--- /dev/null
+++ b/docs-components/DoAndDont/DoAndDont.module.css
@@ -0,0 +1,63 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--fds-semantic-background-subtle);
+  padding: 24px;
+  width: calc(50% - (var(--fds-spacing-4) / 2));
+  height: 100%;
+  border-bottom: 10px solid var(--color);
+  border-radius: var(--fds-spacing-1);
+  box-shadow: var(--fds-shadow-medium);
+  margin: 0;
+}
+
+@media (max-width: 600px) {
+  .wrapper {
+    width: 100%;
+  }
+}
+
+.wrapper.landscape {
+  width: 100%;
+  max-width: 100%;
+}
+
+.dont {
+  --color: var(--semantic-surface-danger-default);
+}
+
+.do {
+  --color: var(--semantic-surface-success-default);
+}
+
+.header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background-color: var(--color);
+  display: grid;
+  place-items: center;
+  color: white;
+}
+
+.icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.description {
+  color: var(--semantic-text-neutral-default);
+}
+
+.imageWrapper {
+  margin-top: auto;
+  display: grid;
+  place-items: center;
+}
diff --git a/docs-components/DoAndDont/DoAndDont.tsx b/docs-components/DoAndDont/DoAndDont.tsx
new file mode 100644
index 0000000000..54b3bfeb19
--- /dev/null
+++ b/docs-components/DoAndDont/DoAndDont.tsx
@@ -0,0 +1,93 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { Heading, Paragraph } from '@digdir/design-system-react';
+import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons';
+
+import styles from './DoAndDont.module.css';
+
+const Wrapper = ({ variant, description, image, alt }: WrapperProps) => {
+  const icon = variant === 'do' ? <CheckmarkIcon /> : <XMarkIcon />;
+  const heading = variant === 'do' ? 'Gjør' : 'Unngå';
+
+  const aspectRatio = useMemo(() => {
+    return getAspectRatio(image);
+  }, [image]);
+
+  return (
+    <figure
+      className={cn(
+        styles.wrapper,
+        styles[variant],
+        aspectRatio > 2 && styles.landscape,
+      )}
+    >
+      <div className={styles.header}>
+        <div className={styles.icon}>{icon}</div>
+        <Heading
+          level={2}
+          size='small'
+          spacing={false}
+          style={{
+            margin: 0,
+            border: 'none',
+          }}
+        >
+          {heading}
+        </Heading>
+      </div>
+      <figcaption>
+        <Paragraph className={styles.description}>{description}</Paragraph>
+      </figcaption>
+
+      <div className={styles.imageWrapper}>
+        <img
+          src={image}
+          alt={alt ? alt : `${heading}: ${description}`}
+          draggable={false}
+        />
+      </div>
+    </figure>
+  );
+};
+
+export const Do = ({ description, image, alt }: DoAndDontProps) => {
+  return (
+    <Wrapper
+      variant='do'
+      description={description}
+      image={image}
+      alt={alt}
+    />
+  );
+};
+
+export const Dont = ({ description, image, alt }: DoAndDontProps) => {
+  return (
+    <Wrapper
+      variant='dont'
+      description={description}
+      image={image}
+      alt={alt}
+    />
+  );
+};
+
+const getAspectRatio = (image: string): number => {
+  const img = new Image();
+  img.src = image;
+
+  const w = img.naturalWidth;
+  const h = img.naturalHeight;
+
+  return w / h;
+};
+
+type DoAndDontProps = {
+  description: string;
+  image: string;
+  alt?: string;
+};
+
+type WrapperProps = DoAndDontProps & {
+  variant: 'do' | 'dont';
+};
diff --git a/docs-components/Stack/Stack.module.css b/docs-components/Stack/Stack.module.css
index d6512d185c..ee1e71c7e4 100644
--- a/docs-components/Stack/Stack.module.css
+++ b/docs-components/Stack/Stack.module.css
@@ -3,7 +3,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 1.5rem;
   flex-wrap: wrap;
   margin: 24px;
 }
diff --git a/docs-components/Stack/Stack.tsx b/docs-components/Stack/Stack.tsx
index 306b6b3ef0..105c48f082 100644
--- a/docs-components/Stack/Stack.tsx
+++ b/docs-components/Stack/Stack.tsx
@@ -3,9 +3,29 @@ import React from 'react';
 
 import classes from './Stack.module.css';
 
-export const Stack = (props: HTMLAttributes<HTMLDivElement>) => (
+export const Stack = ({
+  style,
+  gap = 'var(--fds-spacing-4)',
+  direction = 'row',
+  wrap = 'wrap',
+  ...rest
+}: FlexContainerProps & HTMLAttributes<HTMLDivElement>) => (
   <div
     className={classes.stack}
-    {...props}
+    style={{
+      ...style,
+      gap,
+      flexDirection: direction,
+      flexWrap: wrap,
+    }}
+    {...rest}
   ></div>
 );
+
+type FlexContainerProps = {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  gap?: string;
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+};
diff --git a/docs-components/Table/TokenTable/TokensTable.tsx b/docs-components/Table/TokenTable/TokensTable.tsx
index 91ba854fb6..2d17add130 100644
--- a/docs-components/Table/TokenTable/TokensTable.tsx
+++ b/docs-components/Table/TokenTable/TokensTable.tsx
@@ -44,6 +44,7 @@ const TokensTable = (tokenTable: TokenTableProps) => {
       '$' + tokenTable.componentName + '-',
     );
 
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     const rows: { row: (string | JSX.Element | unknown)[] }[] = [];
 
     Object.entries(row).map(([key, value]) => {
diff --git a/docs-components/index.ts b/docs-components/index.ts
index 98b139586b..c0b364ee3e 100644
--- a/docs-components/index.ts
+++ b/docs-components/index.ts
@@ -7,4 +7,5 @@ export {
 } from './Table/TableCells/TableCells';
 export { Changelog } from './Changelog/Changelog';
 export { Stack } from './Stack/Stack';
+export { Do, Dont } from './DoAndDont/DoAndDont';
 export * from './Information/Information';
diff --git a/package.json b/package.json
index c98f4a6448..dec0002925 100644
--- a/package.json
+++ b/package.json
@@ -43,11 +43,10 @@
     "@digdir/design-system-tokens": "*",
     "@etchteam/storybook-addon-css-variables-theme": "^1.5.1",
     "@next/eslint-plugin-next": "^13.2.4",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^5.0.2",
-    "@rollup/plugin-node-resolve": "^14.0.0",
-    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@storybook/addon-a11y": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
@@ -59,24 +58,25 @@
     "@storybook/theming": "^7.4.0",
     "@svgr/cli": "^6.5.1",
     "@svgr/core": "^6.5.1",
-    "@svgr/rollup": "^6.5.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.11.11",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/rimraf": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "5.36.1",
-    "@typescript-eslint/parser": "5.36.1",
+    "@typescript-eslint/eslint-plugin": "6.7.3",
+    "@typescript-eslint/parser": "6.7.3",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "classnames": "^2.3.1",
-    "eslint": "8.22.0",
+    "copyfiles": "^2.4.1",
+    "eslint": "8.50.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-import-resolver-typescript": "3.5.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-prettier": "4.2.1",
@@ -94,11 +94,9 @@
     "react-markdown": "^8.0.5",
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
-    "rollup": "^2.79.0",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup": "^3.29.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
     "storybook": "^7.4.0",
     "storybook-css-modules": "^1.0.8",
     "stylelint": "^15.3.0",
@@ -106,11 +104,10 @@
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^31.0.0",
     "stylelint-prettier": "^3.0.0",
-    "terser": "^5.16.0",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.2",
     "typescript-plugin-css-modules": "^5.0.0"
   }
 }
diff --git a/packages/Overview.mdx b/packages/Overview.mdx
index 03257946e0..8ca21c3b60 100644
--- a/packages/Overview.mdx
+++ b/packages/Overview.mdx
@@ -38,11 +38,11 @@ V1 er klar når følgende komponenter er markert som "✅ Felles":
 | Search                                              | 🚸 Ikke påbegynt | Figma - Search                                                                                                                                                | [Github - Search](https://github.com/digdir/designsystem/issues/88)         |
 | [Switch](/docs/felles-switch--docs)                 | ✅ Felles        | [Figma - Switch](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=17755-6024&mode=design&t=ztPUyfbDSQjlpEzv-0)        | [Github - Switch](https://github.com/digdir/designsystem/issues/89)         |
 | [Table](/docs/altinn-table--docs)                   | 🔵 Altinn        | Figma - Table                                                                                                                                                 | [Github - Table](https://github.com/digdir/designsystem/issues/90)          |
-| [Tabs](/docs/altinn-tabs--docs)                     | 🔵 Altinn        | [Figma - Tabs](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=9551%3A54208&t=Rlfq5UyNZBL69dFr-1)                    | [Github - Tabs](https://github.com/digdir/designsystem/issues/91)           |
+| [Tabs](/docs/felles-tabs--docs)                     | ✅ Felles        | [Figma - Tabs](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=9551%3A54208&t=Rlfq5UyNZBL69dFr-1)                    | [Github - Tabs](https://github.com/digdir/designsystem/issues/91)           |
 | [Tag](/docs/felles-tag--docs)                       | ✅ Felles        | [Figma - Tag](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=10185%3A59053&t=7Q2N4sUdQGhFZrPh-1)                                | [Github - Tag](https://github.com/digdir/designsystem/issues/322)           |
-| [Textarea](/docs/altinn-textarea--docs)             | 🔵 Altinn        | [Figma - Text area](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21873&t=7Q2N4sUdQGhFZrPh-1)                           | [Github - Textarea](https://github.com/digdir/designsystem/issues/323)      |
-| [Textfield](/docs/altinn-textfield--docs)           | 🔵 Altinn        | [Figma - Text Field](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A22228&t=7Q2N4sUdQGhFZrPh-1)                          | [Github - Textfield](https://github.com/digdir/designsystem/issues/92)      |
-| [ToggleGroup](/docs/altinn-togglebuttongroup--docs) | 🔵 Altinn        | Figma - Toggle Group                                                                                                                                          | [Github - ToggleGroup](https://github.com/digdir/designsystem/issues/304)   |
+| [Textarea](/docs/felles-textarea--docs)             | ✅ Felles        | [Figma - Text area](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21873&t=7Q2N4sUdQGhFZrPh-1)                           | [Github - Textarea](https://github.com/digdir/designsystem/issues/323)      |
+| [Textfield](/docs/felles-textfield--docs)           | ✅ Felles        | [Figma - Text Field](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A22228&t=7Q2N4sUdQGhFZrPh-1)                          | [Github - Textfield](https://github.com/digdir/designsystem/issues/92)      |
+| [ToggleGroup](/docs/felles-togglegroup--docs)       | ✅ Felles        | Figma - Toggle Group                                                                                                                                          | [Github - ToggleGroup](https://github.com/digdir/designsystem/issues/304)   |
 | Tooltip                                             | 🚸 Ikke påbegynt | Figma - Tooltip                                                                                                                                               | [Github - Tooltip](https://github.com/digdir/designsystem/issues/93)        |
 | [Typography](/docs/felles-typography--docs)         | ✅ Felles        | [Figma - Typography](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=9219%3A49405&t=7Q2N4sUdQGhFZrPh-1)                          | [Github - Typography](https://github.com/digdir/designsystem/issues/324)    |
 
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 3fe4b08d8f..ba801752ea 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.28.0](https://github.com/digdir/designsystem/compare/@digdir/design-system-react@0.27.0...@digdir/design-system-react@0.28.0) (2023-10-05)
+
+### Features
+
+- Add basic SSR support and peerDependecies to `react 18.2.0` ([#864](https://github.com/digdir/designsystem/issues/864)) ([d512ee2](https://github.com/digdir/designsystem/commit/d512ee26e6f50e61588538961dd185b92e3e6654))
+- Change `color` names `primary`, `secondary`, `tertiary` to `first`, `second`, `third` ([#887](https://github.com/digdir/designsystem/issues/887)) ([50f4eee](https://github.com/digdir/designsystem/commit/50f4eee4bf2ce813001ad1e28fa12648149fe677))
+- **DosAndDonts:** Add Do and Dont component ([#857](https://github.com/digdir/designsystem/issues/857)) ([8116d00](https://github.com/digdir/designsystem/commit/8116d00eb8afbb606bd325a7a1695c31bbc3fcbe))
+- **Tabs:** :sparkles: New `Tabs` Component ([#876](https://github.com/digdir/designsystem/issues/876)) ([6ae19e7](https://github.com/digdir/designsystem/commit/6ae19e75e7f874dc7d1acbfe9587c8ffbb29e641))
+- **Tabs:** :wastebasket: Change to Legacy ([#875](https://github.com/digdir/designsystem/issues/875)) ([1863383](https://github.com/digdir/designsystem/commit/186338375861af241c565be4bf86ab9c05d1867b))
+- **ToggleGroup:** Add accessible title for items with only icon ([#897](https://github.com/digdir/designsystem/issues/897)) ([9482315](https://github.com/digdir/designsystem/commit/94823150b5585ba9612fbbfbb70c32818812fcaa))
+
+# [0.27.0](https://github.com/digdir/designsystem/compare/@digdir/design-system-react@0.26.0...@digdir/design-system-react@0.27.0) (2023-09-28)
+
+### Features
+
+- **Button, Chip, Accordion:** :recycle: Change components to use the same class for focus behaviour ([#868](https://github.com/digdir/designsystem/issues/868)) ([b3fa591](https://github.com/digdir/designsystem/commit/b3fa591d86bbf2b497a618464e3f3af10b852ad6))
+- **ToggleButtonGroup:** :wastebasket: Change to Legacy ([#870](https://github.com/digdir/designsystem/issues/870)) ([3298aba](https://github.com/digdir/designsystem/commit/3298aba96e343af73bcf8b12cfcb64f9cf0a61a0))
+- **ToggleGroup:** ✨ New `ToggleGroup` component ([#813](https://github.com/digdir/designsystem/issues/813)) ([bc45c2e](https://github.com/digdir/designsystem/commit/bc45c2e50a941fdd49028607fa3d94c4876e4cc0))
+
+# [0.26.0](https://github.com/digdir/designsystem/compare/@digdir/design-system-react@0.25.1...@digdir/design-system-react@0.26.0) (2023-09-22)
+
+### Bug Fixes
+
+- **Textfield:** :lipstick: Style adjustments after feedback ([#852](https://github.com/digdir/designsystem/issues/852)) ([4544f1e](https://github.com/digdir/designsystem/commit/4544f1e96fb90c00360377b2a18998e9bce36f16))
+
+### Features
+
+- **Textarea:** :sparkles: New `Textarea` component ([#851](https://github.com/digdir/designsystem/issues/851)) ([9d9c3ab](https://github.com/digdir/designsystem/commit/9d9c3ab390cea40bd3137845fd2b7fb251c84b7a))
+- **TextArea:** :wastebasket: Change to Legacy ([#853](https://github.com/digdir/designsystem/issues/853)) ([9da973f](https://github.com/digdir/designsystem/commit/9da973f9db34576ad89f5d31f07ccfc933f84ee7))
+
+## [0.25.1](https://github.com/digdir/designsystem/compare/@digdir/design-system-react@0.25.0...@digdir/design-system-react@0.25.1) (2023-09-22)
+
+### Bug Fixes
+
+- **Textfield:** Prop typo ([#848](https://github.com/digdir/designsystem/issues/848)) ([0c59b86](https://github.com/digdir/designsystem/commit/0c59b86f661222e0021311cd5eba6c7aa429ea8c))
+
+# [0.25.0](https://github.com/digdir/designsystem/compare/@digdir/design-system-react@0.24.2...@digdir/design-system-react@0.25.0) (2023-09-21)
+
+### Features
+
+- **ErrorMessage:** :sparkles: Add new option to toggle error color ([#836](https://github.com/digdir/designsystem/issues/836)) ([8b177f3](https://github.com/digdir/designsystem/commit/8b177f3f25b3c2075d38f8f5e8a438d8727b5c98))
+- **ErrorMessage:** ✨ Add `large` size ([#840](https://github.com/digdir/designsystem/issues/840)) ([9742abf](https://github.com/digdir/designsystem/commit/9742abf1d002967fdfdb6b3caa8f33bb11a85019))
+- **Fieldset, Switch, Radio, Checkbox:** :sparkles: Add `large` size ([#841](https://github.com/digdir/designsystem/issues/841)) ([4e8052f](https://github.com/digdir/designsystem/commit/4e8052fc6a886b68676ca5de0a47d80eadb93656))
+- **Textfield:** :sparkles: New `Textfield` component ([#816](https://github.com/digdir/designsystem/issues/816)) ([0c14cfa](https://github.com/digdir/designsystem/commit/0c14cfa3c6add379ada2f5e11dd2b6a0de05aa56))
+- **TextField:** 🗑️ Change to Legacy ([#838](https://github.com/digdir/designsystem/issues/838)) ([c3d6d2d](https://github.com/digdir/designsystem/commit/c3d6d2d684ff764fe96a92e1852ddf115cf1ec62))
+
 ## [0.24.2](https://github.com/digdir/designsystem/compare/@digdir/design-system-react@0.24.1...@digdir/design-system-react@0.24.2) (2023-09-19)
 
 ### Bug Fixes
diff --git a/packages/react/package.json b/packages/react/package.json
index 0702c3156d..5250a27ee5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@digdir/design-system-react",
-  "version": "0.24.2",
+  "version": "0.28.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "author": "Digdir Designsystem Team",
@@ -11,21 +11,25 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "yarn run clean && tsc -p tsconfig.build.json && rollup -c",
-    "clean": "rimraf dist"
+    "build": "yarn run clean && tsc -p tsconfig.build.json && yarn run copy-files && rollup -c --bundleConfigAsCjs",
+    "clean": "rimraf dist && rimraf tsc-build",
+    "copy-files": "copyfiles -u 1 ./src/**/*.css ./tsc-build/"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@altinn/figma-design-tokens": "^6.0.1",
-    "@digdir/design-system-tokens": "^0.6.1",
+    "@digdir/design-system-tokens": "^0.8.0",
     "@floating-ui/react": "0.25.2",
     "@navikt/aksel-icons": "^3.2.4",
     "react-number-format": "5.2.2"
+  },
+  "devDependencies": {
+    "copyfiles": "^2.4.1"
   }
 }
diff --git a/packages/react/rollup-terser.mjs b/packages/react/rollup-terser.mjs
deleted file mode 100644
index a30a1ecf88..0000000000
--- a/packages/react/rollup-terser.mjs
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
-The popular `rollup-terser-plugin` does not work well with Yarn PnP; its
-reliance on `jest-worker` makes the build hang — probably related to
-https://github.com/facebook/jest/issues/12060. This file provides a
-simpler plugin that invokes Terser without Jest workers.
-*/
-
-import { minify } from 'terser';
-
-function terser(terserOptions = {}) {
-    return {
-        name: 'terser',
-
-        async renderChunk(code, _chunk, outputOptions) {
-            const defaultOptions = {
-                sourceMap: !!outputOptions.sourcemap,
-            };
-
-            // eslint-disable-next-line default-case
-            switch (outputOptions.format) {
-                case 'es':
-                case 'esm':
-                    defaultOptions.module = true;
-                    break;
-                case 'cjs':
-                    defaultOptions.toplevel = true;
-                    break;
-            }
-
-            const effectiveTerserOptions = { ...defaultOptions, ...terserOptions };
-            return await minify(code, effectiveTerserOptions);
-        },
-    };
-}
-
-export default terser;
\ No newline at end of file
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 3880a91e9d..11d27a698b 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -1,34 +1,36 @@
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
 import image from '@rollup/plugin-image';
-import dts from 'rollup-plugin-dts';
 import postcss from 'rollup-plugin-postcss';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import svgr from '@svgr/rollup';
 
-import terser from './rollup-terser.mjs';
-import packageJson from './package.json';
-
-// css files needs to be bundled
-const altinnFigmaTokensExceptCss = /@altinn\/figma-design-tokens.*(?<!css)$/;
+const input = './tsc-build/index.js';
 
 export default [
   {
-    input: 'src/index.ts',
+    input,
     output: [
       {
-        file: packageJson.main,
+        input,
+        dir: './dist/cjs',
         format: 'cjs',
+        banner: "'use client';",
+        preserveModules: true,
+        preserveModulesRoot: 'tsc-build',
       },
       {
-        file: packageJson.module,
-        format: 'esm',
+        input,
+        dir: './dist/esm',
+        format: 'es',
+        banner: "'use client';",
+        preserveModules: true,
+        preserveModulesRoot: 'tsc-build',
       },
     ],
     external: [
-      altinnFigmaTokensExceptCss,
+      /@altinn\/figma-design-tokens.*(?<!css)$/,
       /@react-hookz\/web/,
       /@radix-ui\/react-popover$/,
       /react-number-format/,
@@ -41,17 +43,9 @@ export default [
       resolve(),
       commonjs(),
       json(),
-      typescript({ tsconfig: './tsconfig.build.json' }),
       svgr({ exportType: 'named' }),
       postcss(),
-      terser(),
       image(),
     ],
   },
-  {
-    input: 'dist/types/index.d.ts',
-    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
-    plugins: [dts()],
-    external: [/@altinn\/figma-design-tokens/, /\.css$/],
-  },
 ];
diff --git a/packages/react/src/components/Accordion/Accordion.mdx b/packages/react/src/components/Accordion/Accordion.mdx
index 05ac664636..2483fe5e1a 100644
--- a/packages/react/src/components/Accordion/Accordion.mdx
+++ b/packages/react/src/components/Accordion/Accordion.mdx
@@ -14,26 +14,17 @@ import { Accordion } from '.';
 
 # Accordion
 
-Accordion er en vertikalt stablet gruppe interaktive overskrifter som hver inneholder en tittel, en kort tekst eller et miniatyrbilde som representerer
-en seksjon av innholdet. Overskriftene fungerer som kontroller som lar brukere vise eller skjule de tilknyttede seksjonene med innhold.
-Accordion brukes ofte for å redusere behovet for å skrolle ned når man presenterer flere seksjoner med innhold på en enkelt side.
+Med `Accordion` kan du presentere mye innhold på liten plass i en eller flere rader. Hele raden er klikkbar og lar brukere åpne eller lukke visningen av innholdet under.
 
-## Props
+**Vær oppmerksom på:**
 
-<Primary />
-<Controls />
-
-### Accordion.Item
-
-<ArgTypes of={Accordion.Item} />
-
-### Accordion.Header
-
-<ArgTypes of={Accordion.Header} />
+- Ved å legge innhold i `Accordion` risikerer du at det ikke blir sett av brukerne. Innhold som er viktig bør _ikke_ skjules.
+- Ikke legg en `Accordion` inni en annen.
 
-### Accordion.Content
+<br />
 
-<ArgTypes of={Accordion.Content} />
+<Primary />
+<Controls />
 
 ## Bruk
 
@@ -55,8 +46,87 @@ import { Accordion } from '@digdir/design-system-react';
 </Accordion>;
 ```
 
-## Varianter
+## Eksempler
 
-### Kontrollert
+<br />
+### Med ramme
+
+`Accordion` kan vises med ramme. Dette kan passe i tilfeller der accordions ikke fyller hele siden, eller når det kun er en rad.
+
+<Canvas of={AccordionStories.AccordionBorder} />
+
+### Med farger
+
+`Accordion` kan vises i farger fra ditt brand.
+
+<Canvas of={AccordionStories.AccordionColor} />
+
+#### Kontrollert
+
+`Accordion` holder selv orden på når den er lukket/åpen, men kan kontrolleres utenfra.
 
 <Canvas of={AccordionStories.Controlled} />
+
+<br />
+
+## Retningslinjer
+
+Tester viser at brukerne sjeldnere ser på skjult innhold, enn det som er synlig direkte på siden. Ikke bruk `Accordion` til å skjule innhold for å gjøre siden "ryddigere". Finn ut om du faktisk må skjule innhold og vær klar over hvorfor du gjør det. Tenk over om det er lurt å vise det viktigste innholdet i åpen status når brukeren kommer inn på siden.
+
+Hvis innholdet er for langt eller komplisert, bør du heller omformulere teksten og/eller eventuelt fordele den på flere sider.
+
+### Egnet til
+
+- samle innhold som er litt lengre
+- gjøre det frivillig å se innhold som er litt mindre viktig enn alltid synlig innhold
+- vise ofte stilte spørsmål
+- vise tilleggsinformasjon som kan være til hjelp for brukerne
+
+### Ikke egnet til
+
+- vise små mengder innhold
+- vise informasjon hvis det bare er ett element
+- vise viktig innhold som alle bør se når de kommer til siden (for eksempel feilmeldinger)
+- gi mer informasjon om et spørsmål i et skjema – det innholdet bør brukeren se med en gang
+- velge mellom ulike alternativer
+- skjule innhold fra søkeresultater eller oversikter/tabeller
+- dele opp en logisk flyt eller en rekke med handlinger, da bør du heller bruke en trinnvis liste
+
+### Unngå
+
+- Ikke legg en `Accordion` inni en annen, det vi kaller nøstede lister.
+
+<br />
+
+## Tekst i komponenten
+
+Accordion skal brukes til maksimalt to avsnitt innenfor hvert nedtrekk. Sørg for at overskriften gir en god beskrivelse av hva innholdet i accordion er. En tydelig og beskrivende overskrift skal gjøre brukerne nysgjerrige på innholdet. Overskriftene til accordion kan ha stor betydning for om brukerne finner det de trenger, om innholdet blir lest og om det kan regnes som tilgjengelig for alle brukere. «Vis mer» eller «Les mer her» er ikke gode nok titler. Har du en accordion med mange nedtrekk, kan du ha en hovedoverskrift eller temaoverskrift over hele listen.
+
+<br />
+
+## Tilgjengelighet
+
+[`Chevron`](https://aksel.nav.no/ikoner/ChevronDown)-ikonet er bevisst plassert til venstre for teksten, av hensyn til brukeren med nedsatt synsfelt. Der er det lettere for brukeren å se det (fordi vi leser fra venstre). Mange brukere tror at de må peke på og velge ikonet for å åpne.
+
+Ikke plasser andre interaktive elementer inn i `Accordion`-header, da hele raden skal være klikkbar. Ikonet og teksten skal _ikke_ lenke til ulike handlinger (for eksempel at teksten går videre til en side, mens ikonet åpner listen). Brukerne forventer ikke at ikon og tekst skal gi ulikt resultat når de velger dem.
+
+`Tab` : Flytter fokus til neste element som kan ha fokus \
+`Shift` + `Tab` : Flytter fokus til forrige element som kan ha fokus \
+`Space` : Aktiverer knapp \
+`Enter` : Aktiverer knapp
+
+<br />
+
+## Andre props
+
+### Accordion.Item
+
+<ArgTypes of={Accordion.Item} />
+
+### Accordion.Header
+
+<ArgTypes of={Accordion.Header} />
+
+### Accordion.Content
+
+<ArgTypes of={Accordion.Content} />
diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css
index fcd18e92b1..c4077529d8 100644
--- a/packages/react/src/components/Accordion/Accordion.module.css
+++ b/packages/react/src/components/Accordion/Accordion.module.css
@@ -6,21 +6,23 @@
   --fdsc-accordion-header-padding-bottom: var(--fds-spacing-4);
   --fdsc-accordion-header-padding-left: var(--fds-spacing-5);
   --fdsc-accordion-header-bg-neutral: var(--fds-semantic-surface-neutral-default);
-  --fdsc-accordion-header-bg-neutral-active: var(--fds-semantic-surface-action-primary-no_fill-hover);
+  --fdsc-accordion-header-bg-neutral-active: var(--fds-semantic-surface-action-first-no_fill-hover);
   --fdsc-accordion-header-bg-subtle: var(--fds-semantic-surface-neutral-subtle);
   --fdsc-accordion-header-bg-subtle-hover: var(--fds-semantic-surface-neutral-subtle-hover);
-  --fdsc-accordion-header-bg-primary: var(--fds-semantic-surface-primary-light);
-  --fdsc-accordion-header-bg-primary-hover: var(--fds-semantic-surface-primary-light-hover);
-  --fdsc-accordion-header-bg-secondary: var(--fds-semantic-surface-secondary-light);
-  --fdsc-accordion-header-bg-secondary-hover: var(--fds-semantic-surface-secondary-light-hover);
-  --fdsc-accordion-header-bg-tertiary: var(--fds-semantic-surface-tertiary-light);
-  --fdsc-accordion-header-bg-tertiary-hover: var(--fds-semantic-surface-tertiary-light-hover);
+  --fdsc-accordion-header-bg-primary: var(--fds-semantic-surface-first-light);
+  --fdsc-accordion-header-bg-primary-hover: var(--fds-semantic-surface-first-light-hover);
+  --fdsc-accordion-header-bg-secondary: var(--fds-semantic-surface-second-light);
+  --fdsc-accordion-header-bg-secondary-hover: var(--fds-semantic-surface-second-light-hover);
+  --fdsc-accordion-header-bg-tertiary: var(--fds-semantic-surface-third-light);
+  --fdsc-accordion-header-bg-tertiary-hover: var(--fds-semantic-surface-third-light-hover);
   --fdsc-accordion-header-border: var(--fds-semantic-border-neutral-subtle);
   --fdsc-accordion-header-border-inverted: var(--fds-semantic-border-on_inverted-default);
   --fdsc-accordion-header-shadow-focus: 2px 2px 3px var(--fds-semantic-border-neutral-subtle);
-  --fdsc-accordion-header-color-hover: var(--fds-semantic-text-action-primary-default);
+  --fdsc-accordion-header-color-hover: var(--fds-semantic-text-action-first-default);
   --fdsc-accordion-content-border: var(--fds-semantic-border-neutral-subtle);
   --fdsc-accordion-content-border-open: var(--fds-semantic-border-neutral-strong);
+
+  border-bottom: 1px solid var(--fdsc-accordion-content-border);
 }
 
 .border {
@@ -41,10 +43,6 @@
   text-overflow: ellipsis;
 }
 
-.item:last-child .contentWrapper {
-  border-bottom: 1px solid var(--fdsc-accordion-content-border);
-}
-
 .header {
   margin: 0;
 }
@@ -67,20 +65,6 @@
   padding-left: var(--fdsc-accordion-header-padding-left);
 }
 
-.header > button:focus-visible,
-.header > button:focus {
-  --fdsc-focus-border-width: 3px;
-
-  outline: var(--fdsc-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fdsc-focus-border-width);
-  box-shadow: 0 0 0 var(--fdsc-focus-border-width) var(--fds-semantic-border-neutral-strong);
-  border-radius: var(--fds-border_radius-interactive);
-}
-
-.header > .button:focus:not(:focus-visible) {
-  outline: none;
-}
-
 @media (hover: hover) and (pointer: fine) {
   .header > button:hover {
     color: var(--fdsc-accordion-header-color-hover);
@@ -101,18 +85,18 @@
   background: var(--fdsc-accordion-header-bg-subtle);
 }
 
-.accordion.primary,
-.accordion.primary > .item > .header > button {
+.accordion.first,
+.accordion.first > .item > .header > button {
   background: var(--fdsc-accordion-header-bg-primary);
 }
 
-.accordion.secondary,
-.accordion.secondary > .item > .header > button {
+.accordion.second,
+.accordion.second > .item > .header > button {
   background: var(--fdsc-accordion-header-bg-secondary);
 }
 
-.accordion.tertiary,
-.accordion.tertiary > .item > .header > button {
+.accordion.third,
+.accordion.third > .item > .header > button {
   background: var(--fdsc-accordion-header-bg-tertiary);
 }
 
@@ -120,9 +104,9 @@
   border-top: 0;
 }
 
-.accordion.primary > .item:not(:first-child) > .header > button,
-.accordion.secondary > .item:not(:first-child) > .header > button,
-.accordion.tertiary > .item:not(:first-child) > .header > button {
+.accordion.first > .item:not(:first-child) > .header > button,
+.accordion.second > .item:not(:first-child) > .header > button,
+.accordion.third > .item:not(:first-child) > .header > button {
   border-top: 1px solid var(--fdsc-accordion-header-border-inverted);
 }
 
@@ -131,15 +115,15 @@
     background: var(--fdsc-accordion-header-bg-subtle-hover);
   }
 
-  .accordion.primary > .item > .header > button:hover {
+  .accordion.first > .item > .header > button:hover {
     background: var(--fdsc-accordion-header-bg-primary-hover);
   }
 
-  .accordion.secondary > .item > .header > button:hover {
+  .accordion.second > .item > .header > button:hover {
     background: var(--fdsc-accordion-header-bg-secondary-hover);
   }
 
-  .accordion.tertiary > .item > .header > button:hover {
+  .accordion.third > .item > .header > button:hover {
     background: var(--fdsc-accordion-header-bg-tertiary-hover);
   }
 }
@@ -149,9 +133,9 @@
   background-color: var(--fdsc-accordion-header-bg-neutral-active);
 }
 
-.accordion.primary > .item.open > .header > button,
-.accordion.secondary > .item.open > .header > button,
-.accordion.tertiary > .item.open > .header > button {
+.accordion.first > .item.open > .header > button,
+.accordion.second > .item.open > .header > button,
+.accordion.third > .item.open > .header > button {
   background-color: rgba(0 0 0 / 0.03);
 }
 
diff --git a/packages/react/src/components/Accordion/Accordion.stories.tsx b/packages/react/src/components/Accordion/Accordion.stories.tsx
index 2b643d0219..a4e69c91fb 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.tsx
+++ b/packages/react/src/components/Accordion/Accordion.stories.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 
+import { Button, Link } from '../';
+
 import { Accordion } from '.';
 
 export default {
@@ -14,20 +16,62 @@ export default {
 export const Preview: StoryFn<typeof Accordion> = (args) => (
   <Accordion {...args}>
     <Accordion.Item>
-      <Accordion.Header level={3}>Hva er Lorem Ipsum?</Accordion.Header>
+      <Accordion.Header level={3}>
+        Hvem kan registrere seg i Frivillighetsregisteret?
+      </Accordion.Header>
+      <Accordion.Content>
+        For å kunne bli registrert i Frivillighetsregisteret, må organisasjonen
+        drive frivillig virksomhet. Det er bare foreninger, stiftelser og
+        aksjeselskap som kan registreres. Virksomheten kan ikke dele ut midler
+        til fysiske personer. Virksomheten må ha et styre.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header level={3}>
+        Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
+      </Accordion.Header>
+      <Accordion.Content>
+        Virksomheten må være registrert i Enhetsregisteret før den kan bli
+        registrert i Frivillighetsregisteret. Du kan registrere i begge
+        registrene samtidig i Samordnet registermelding.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);
+
+export const AccordionBorder: StoryFn<typeof Accordion> = () => (
+  <Accordion
+    border
+    color='subtle'
+  >
+    <Accordion.Item>
+      <Accordion.Header level={3}>Vedlegg</Accordion.Header>
+      <Accordion.Content>Vedlegg 1, vedlegg 2, vedlegg 3</Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);
+
+export const AccordionColor: StoryFn<typeof Accordion> = () => (
+  <Accordion
+    border
+    color='second'
+  >
+    <Accordion.Item>
+      <Accordion.Header level={3}>
+        Hvordan får jeg tildelt et jegernummer?
+      </Accordion.Header>
       <Accordion.Content>
-        Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien.
-        Lorem Ipsum har vært bransjens standard for dummytekst helt siden
-        1500-tallet, da en ukjent boktrykker stokket en mengde bokstaver for å
-        lage et prøveeksemplar av en bok.
+        Du vil automatisk få tildelt jegernummer og bli registrert i
+        Jegerregisteret når du har bestått jegerprøven.
       </Accordion.Content>
     </Accordion.Item>
     <Accordion.Item>
-      <Accordion.Header level={3}>Hvor kommer det fra?</Accordion.Header>
+      <Accordion.Header level={3}>
+        Jeg har glemt jegernummeret mitt. Hvor finner jeg dette?
+      </Accordion.Header>
       <Accordion.Content>
-        I motsetning til hva mange tror, er ikke Lorem Ipsum bare tilfeldig
-        tekst. Dets røtter springer helt tilbake til et stykke klassisk latinsk
-        litteratur fra 45 år f.kr., hvilket gjør det over 2000 år gammelt.
+        Du kan finne dette ved å logge inn på{' '}
+        <Link href='https://minjegerside.brreg.no/'>Min jegerside</Link>
       </Accordion.Content>
     </Accordion.Item>
   </Accordion>
@@ -41,22 +85,48 @@ Preview.args = {
 
 export const Controlled: StoryFn<typeof Accordion> = () => {
   const [open, setOpen] = useState(false);
-  const [open2, setOpen2] = useState(false);
 
   return (
-    <Accordion>
-      <Accordion.Item open={open}>
-        <Accordion.Header onHeaderClick={() => setOpen(!open)}>
-          Accordion header text
-        </Accordion.Header>
-        <Accordion.Content>Accordion content</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item open={open2}>
-        <Accordion.Header onHeaderClick={() => setOpen2(!open2)}>
-          Accordion header text
-        </Accordion.Header>
-        <Accordion.Content>Accordion content</Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
+    <>
+      <Button onClick={() => setOpen(!open)}>Toggle Accordions</Button>
+      <br />
+      <Accordion>
+        <Accordion.Item open={open}>
+          <Accordion.Header onHeaderClick={() => setOpen(!open)}>
+            Enkeltpersonforetak
+          </Accordion.Header>
+          <Accordion.Content>
+            Skal du starte for deg selv? Enkeltpersonforetak er ofte den
+            enkleste måten å etablere bedrift på. Denne organisasjonsformen har
+            både fordeler og ulemper. Det gir deg stor grad av frihet, men kan
+            også gi betydelig risiko fordi du har personlig ansvar for
+            økonomien.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item open={open}>
+          <Accordion.Header onHeaderClick={() => setOpen(!open)}>
+            Aksjeselskap (AS)
+          </Accordion.Header>
+          <Accordion.Content>
+            Planlegger du å starte næringsvirksomhet alene eller sammen med
+            andre? Innebærer næringsvirksomheten en økonomisk risiko? Vil du ha
+            rettigheter som arbeidstaker og muligheten til at andre kan
+            investere i selskapet ditt? Da kan aksjeselskap være en
+            hensiktsmessig organisasjonsform.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item open={open}>
+          <Accordion.Header onHeaderClick={() => setOpen(!open)}>
+            Ansvarlig selskap (ANS/DA)
+          </Accordion.Header>
+          <Accordion.Content>
+            Er dere minst to personer som skal starte opp egen virksomhet?
+            Samarbeider du godt med den/de som du skal starte opp sammen med?
+            Krever virksomheten få investeringer og tar du liten økonomisk
+            risiko? Da kan du vurdere å etablere et ansvarlig selskap.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </>
   );
 };
diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
index e8a0f626cb..642b688dc8 100644
--- a/packages/react/src/components/Accordion/Accordion.tsx
+++ b/packages/react/src/components/Accordion/Accordion.tsx
@@ -6,26 +6,27 @@ import classes from './Accordion.module.css';
 
 export type AccordionProps = {
   /** Accordion background color */
-  color?: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'subtle';
+  color?: 'first' | 'second' | 'third' | 'neutral' | 'subtle';
   /** Show border */
   border?: boolean;
   /** Instances of `Accordion.Item` */
   children: React.ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ border = false, color = 'neutral', className, ...rest }, ref) => (
-    <div
-      {...rest}
-      className={cn(
-        classes.accordion,
-        classes[color],
-        {
-          [classes.border]: border,
-        },
-        className,
-      )}
-      ref={ref}
-    />
-  ),
-);
+export const Accordion = forwardRef<
+  HTMLDivElement,
+  AccordionProps & { children: React.ReactNode }
+>(({ border = false, color = 'neutral', className, ...rest }, ref) => (
+  <div
+    {...rest}
+    className={cn(
+      classes.accordion,
+      classes[color],
+      {
+        [classes.border]: border,
+      },
+      className,
+    )}
+    ref={ref}
+  />
+));
diff --git a/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
index 930b1868a5..9716e4fb2b 100644
--- a/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
+++ b/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
@@ -29,7 +29,6 @@ export const AccordionContent = forwardRef<
     <AnimateHeight
       id={context.contentId}
       open={context.open}
-      className={classes.contentWrapper}
     >
       <Paragraph
         {...rest}
diff --git a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
index 6f5e917ad4..d100d78e9b 100644
--- a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
+++ b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -5,6 +5,7 @@ import React, { forwardRef, useContext } from 'react';
 
 import { Paragraph, Heading } from '../..';
 import classes from '../Accordion.module.css';
+import utilityClasses from '../../../utils/utility.module.css';
 import { AccordionItemContext } from '../AccordionItem';
 
 export type AccordionHeaderProps = {
@@ -44,6 +45,7 @@ export const AccordionHeader = forwardRef<
     >
       <button
         type='button'
+        className={utilityClasses.focusable}
         onClick={handleClick}
         aria-expanded={context.open}
         aria-controls={context.contentId}
diff --git a/packages/react/src/components/Accordion/index.ts b/packages/react/src/components/Accordion/index.ts
index 8330ed9e07..4de6eed936 100644
--- a/packages/react/src/components/Accordion/index.ts
+++ b/packages/react/src/components/Accordion/index.ts
@@ -29,4 +29,4 @@ export type {
   AccordionHeaderProps,
   AccordionItemProps,
 };
-export { Accordion };
+export { Accordion, AccordionItem, AccordionContent, AccordionHeader };
diff --git a/packages/react/src/components/Alert/Alert.mdx b/packages/react/src/components/Alert/Alert.mdx
index da5b6aceb7..4986d64cf5 100644
--- a/packages/react/src/components/Alert/Alert.mdx
+++ b/packages/react/src/components/Alert/Alert.mdx
@@ -1,5 +1,5 @@
 import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
-import { Information } from '../../../../../docs-components';
+import { Information, Do, Dont, Stack } from '../../../../../docs-components';
 import * as AlertStories from './Alert.stories';
 
 <Meta of={AlertStories} />
@@ -27,9 +27,9 @@ import { Alert } from '@digdir/design-system-react';
 <Alert>You are using the Alert component!</Alert>;
 ```
 
-## Varianter med eksempler
+## Eksempler
 
-`Alert` har flere varianter fordi den kan brukes til fire ulike budskap: Informasjon, advarsler, suksess og feilmelding.
+`Alert` kan brukes til fire ulike budskap: Informasjon, advarsler, suksess og feilmelding. Den kan også brukes sammen med andre komponenter og stiler. Her er noen eksempler.
 
 <br />
 
@@ -57,13 +57,7 @@ Bruk `danger` for å informere om noe som er kritisk eller som hindrer brukeren
 
 <Canvas of={AlertStories.VariantDanger} />
 
-## Andre eksempler
-
-`Alert` kan brukes sammen med andre komponenter og stiler. Her er noen eksempler.
-
-<br />
-
-### Med overskrift
+### Med og uten overskrift
 
 Hvis meldingen er lenger enn en setning kan det være nyttig å bruke en overskrift til å fremheve det viktigste. Dette kan gjøres ved bruk av [Typografi](/docs/felles-typography--docs)-komponentene. Husk å velge riktig overskriftsnivå ut fra plassen alert har i innholdsstrukturen på siden.
 
@@ -85,6 +79,28 @@ Kan brukes når alerten skal fremheves mer fra bakgrunnen, for eksempel dersom d
 
 <Canvas of={AlertStories.MedShadow} />
 
+## Retningslinjer
+
+### Ikke lag andre versjoner
+
+Det er viktig at Alerts har samme utseende og formspråk på tvers av produktene, så den skal ikke justeres.
+
+<Stack direction="row" style={{
+  justifyContent: 'unset',
+  alignItems: 'unset'
+}}>
+  <Do
+    description='Alert brukes på tvers av produkter og skal se like ut'
+    image='/img/component-guidelines/alert/alert-ex1-do.png'
+  />
+
+  <Dont
+    description='Ikke fjern border, bytt ikon, eller gjør andre visuelle endringer på alert'
+    image='/img/component-guidelines/alert/alert-ex1-dont.png'
+  />
+</Stack>
+<br />
+
 ## Tekst i komponenten
 
 Det er ikke alle som intuitivt forstår forskjellen på varslene selv om de har ulike ikoner og farger. Derfor er det viktig at ordene du bruker gjør det klart for brukerne hvordan de skal forholde seg til informasjonen i varselet.
diff --git a/packages/react/src/components/Button/Button.module.css b/packages/react/src/components/Button/Button.module.css
index d9ebfe0232..75fe2b3da7 100644
--- a/packages/react/src/components/Button/Button.module.css
+++ b/packages/react/src/components/Button/Button.module.css
@@ -2,10 +2,9 @@
   --fdsc-border-radius: var(--fds-border_radius-interactive);
   --fdsc-button-size: var(--fds-component-mode-height-small);
   --fdsc-button-padding: var(--fds-spacing-1) var(--fds-spacing-2);
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-on_action);
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-on_action);
   --fdsc-icon-size: var(--fds-sizing-4);
 
-  composes: focusable from '../../utils/utility.module.css';
   display: flex;
   align-items: center;
   border-radius: var(--fdsc-border-radius);
@@ -114,11 +113,11 @@
 
 /* Only use hover for non-touch devices to prevent sticky-hovering */
 @media (hover: hover) and (pointer: fine) {
-  .button.filled.primary:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-action-primary-hover);
+  .button.filled.first:not([aria-disabled='true'], :disabled):hover {
+    background: var(--fds-semantic-surface-action-first-hover);
   }
 
-  .button.filled.secondary:not([aria-disabled='true'], :disabled):hover {
+  .button.filled.second:not([aria-disabled='true'], :disabled):hover {
     /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
     background: #1a466d;
   }
@@ -137,15 +136,15 @@
     background: var(--fds-semantic-surface-on_inverted-hover);
   }
 
-  .button.outline.primary:not([aria-disabled='true'], :disabled):hover {
-    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-hover);
+  .button.outline.first:not([aria-disabled='true'], :disabled):hover {
+    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-hover);
 
-    border-color: var(--fds-semantic-border-action-primary-hover);
-    background: var(--fds-semantic-surface-action-primary-no_fill-hover);
+    border-color: var(--fds-semantic-border-action-first-hover);
+    background: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .button.outline.secondary:not([aria-disabled='true'], :disabled):hover {
-    border-color: var(--fds-semantic-border-action-secondary-hover);
+  .button.outline.second:not([aria-disabled='true'], :disabled):hover {
+    border-color: var(--fds-semantic-border-action-second-hover);
 
     /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
     background: #e5eaef;
@@ -169,13 +168,13 @@
     background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
   }
 
-  .button.quiet.primary:not([aria-disabled='true'], :disabled):hover {
-    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-hover);
+  .button.quiet.first:not([aria-disabled='true'], :disabled):hover {
+    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-hover);
 
-    background: var(--fds-semantic-surface-action-primary-no_fill-hover);
+    background: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .button.quiet.secondary:not([aria-disabled='true'], :disabled):hover {
+  .button.quiet.second:not([aria-disabled='true'], :disabled):hover {
     /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
     background: #e5eaef;
   }
@@ -200,19 +199,19 @@
 }
 
 /* Filled button colors */
-.button.filled.primary {
-  background: var(--fds-semantic-surface-action-primary-default);
+.button.filled.first {
+  background: var(--fds-semantic-surface-action-first-default);
 }
 
-.button.filled.primary:not([aria-disabled='true'], :disabled):active {
-  background: var(--fds-semantic-surface-action-primary-active);
+.button.filled.first:not([aria-disabled='true'], :disabled):active {
+  background: var(--fds-semantic-surface-action-first-active);
 }
 
-.button.filled.secondary {
-  background: var(--fds-semantic-surface-action-secondary-default);
+.button.filled.second {
+  background: var(--fds-semantic-surface-action-second-default);
 }
 
-.button.filled.secondary:not([aria-disabled='true'], :disabled):active {
+.button.filled.second:not([aria-disabled='true'], :disabled):active {
   /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
   background: #335a7d;
 }
@@ -246,31 +245,31 @@
 }
 
 /* Outline button colors */
-.button.outline.primary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-default);
+.button.outline.first {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-default);
 
-  border-color: var(--fds-semantic-border-action-primary-default);
-  background: var(--fds-semantic-surface-action-primary-no_fill);
+  border-color: var(--fds-semantic-border-action-first-default);
+  background: var(--fds-semantic-surface-action-first-no_fill);
 }
 
-.button.outline.primary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-active);
+.button.outline.first:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-active);
 
-  border-color: var(--fds-semantic-border-action-primary-active);
-  background: var(--fds-semantic-surface-action-primary-no_fill-active);
+  border-color: var(--fds-semantic-border-action-first-active);
+  background: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.button.outline.secondary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-default);
+.button.outline.second {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-default);
 
-  border-color: var(--fds-semantic-border-action-secondary-default);
-  background: var(--fds-semantic-surface-action-secondary-no_fill);
+  border-color: var(--fds-semantic-border-action-second-default);
+  background: var(--fds-semantic-surface-action-second-no_fill);
 }
 
-.button.outline.secondary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-active);
+.button.outline.second:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-active);
 
-  border-color: var(--fds-semantic-border-action-secondary-active);
+  border-color: var(--fds-semantic-border-action-second-active);
 
   /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
   background: #ccd6df;
@@ -318,22 +317,22 @@
 }
 
 /* Quiet button colors */
-.button.quiet.primary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-default);
+.button.quiet.first {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-default);
 }
 
-.button.quiet.primary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-active);
+.button.quiet.first:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-active);
 
-  background: var(--fds-semantic-surface-action-primary-no_fill-active);
+  background: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.button.quiet.secondary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-default);
+.button.quiet.second {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-default);
 }
 
-.button.quiet.secondary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-active);
+.button.quiet.second:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-active);
 
   /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
   background: #ccd6df;
diff --git a/packages/react/src/components/Button/Button.test.tsx b/packages/react/src/components/Button/Button.test.tsx
index 04d5d97014..dd928a1fa3 100644
--- a/packages/react/src/components/Button/Button.test.tsx
+++ b/packages/react/src/components/Button/Button.test.tsx
@@ -8,8 +8,8 @@ import { Button } from './Button';
 
 const sizes: ButtonProps['size'][] = ['small', 'medium', 'large'];
 const colors: ButtonProps['color'][] = [
-  'primary',
-  'secondary',
+  'first',
+  'second',
   'success',
   'danger',
   'inverted',
@@ -19,12 +19,12 @@ const variants: ButtonProps['variant'][] = ['filled', 'outline', 'quiet'];
 const user = userEvent.setup();
 
 describe('Button', () => {
-  it('should render a button with primary classname when no variant is specified', () => {
+  it('should render a button with first classname when no variant is specified', () => {
     render();
     const button = screen.getByRole('button');
 
-    expect(button.classList).toContain('primary');
-    expect(button.classList).not.toContain('secondary');
+    expect(button.classList).toContain('first');
+    expect(button.classList).not.toContain('second');
     expect(button.classList).not.toContain('submit');
     expect(button.classList).not.toContain('cancel');
   });
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index a0c6f71412..1ff2038089 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef, type ButtonHTMLAttributes } from 'react';
 import cn from 'classnames';
 
 import { SvgIcon } from '../SvgIcon';
+import utilityClasses from '../../utils/utility.module.css';
 
 import classes from './Button.module.css';
 
@@ -10,7 +11,7 @@ export type ButtonProps = {
   /** Specify which variant to use */
   variant?: 'filled' | 'outline' | 'quiet';
   /** Specify which color palette to use */
-  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'inverted';
+  color?: 'first' | 'second' | 'success' | 'danger' | 'inverted';
   /** Size */
   size?: 'small' | 'medium' | 'large';
   /** If `Button` should fill full width of its container */
@@ -30,7 +31,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
-      color = 'primary',
+      color = 'first',
       variant = 'filled',
       size = 'medium',
       fullWidth = false,
@@ -48,6 +49,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ref={ref}
       className={cn(
         classes.button,
+        utilityClasses.focusable,
         classes[size],
         classes[variant],
         classes[color],
diff --git a/packages/react/src/components/Chip/Group/Group.tsx b/packages/react/src/components/Chip/Group/Group.tsx
index 5a7260b79a..ac1f701639 100644
--- a/packages/react/src/components/Chip/Group/Group.tsx
+++ b/packages/react/src/components/Chip/Group/Group.tsx
@@ -29,7 +29,7 @@ export const Group = forwardRef<HTMLUListElement, ChipGroupProps>(
       <ChipGroupContext.Provider value={{ size }}>
         {React.Children.toArray(children).map((child, index) =>
           React.isValidElement(child) ? (
-            <li key={`${child.toString()}-${index}`}>{child}</li>
+            <li key={`chip-${index}`}>{child}</li>
           ) : null,
         )}
       </ChipGroupContext.Provider>
diff --git a/packages/react/src/components/Chip/Removable/Removable.module.css b/packages/react/src/components/Chip/Removable/Removable.module.css
index 2fb5660cf6..8cea28cd63 100644
--- a/packages/react/src/components/Chip/Removable/Removable.module.css
+++ b/packages/react/src/components/Chip/Removable/Removable.module.css
@@ -1,5 +1,5 @@
 .removable {
-  --fdsc-removable-background: var(--fds-semantic-surface-action-primary-active);
+  --fdsc-removable-background: var(--fds-semantic-surface-action-first-active);
   --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
   --fdsc-removable-chip-size: var(--fds-sizing-7);
   --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
@@ -33,7 +33,7 @@
   --fdsc-removable-background: linear-gradient(
     to left,
     var(--fds-semantic-surface-danger-default) var(--fdsc-removable-chip-xmark-wrapper-width),
-    var(--fds-semantic-surface-action-primary-active) var(--fdsc-removable-chip-xmark-wrapper-width)
+    var(--fds-semantic-surface-action-first-active) var(--fdsc-removable-chip-xmark-wrapper-width)
   );
   --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
 }
diff --git a/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css b/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css
index 166f8689f6..d0f653eab9 100644
--- a/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css
+++ b/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css
@@ -1,9 +1,9 @@
 .chipButton {
   --fdsc-chip-height: var(--fds-sizing-7);
   --fdsc-chip-padding: var(--fds-spacing-3);
-  --fdsc-chip-background: var(--fds-semantic-surface-action-primary-subtle);
+  --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle);
   --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
-  --fdsc-chip-border: var(--fds-semantic-border-action-primary-subtle);
+  --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle);
   --fdsc-chip-border-radius: var(--fds-border_radius-full);
 
   background: var(--fdsc-chip-background);
@@ -19,33 +19,24 @@
 /* Only use hover for non-touch devices to prevent sticky-hovering */
 @media (hover: hover) and (pointer: fine) {
   .chipButton:hover {
-    --fdsc-chip-background: var(--fds-semantic-surface-action-primary-subtle-hover);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle-hover);
     --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
-    --fdsc-chip-border: var(--fds-semantic-border-action-primary-subtle-hover);
+    --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle-hover);
 
     cursor: pointer;
   }
 
   .chipButton:is([aria-pressed='true']):hover {
-    --fdsc-chip-background: var(--fds-semantic-surface-action-primary-no_fill-active);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-no_fill-active);
     --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
   }
 }
 
-.chipButton:focus {
-  --fdsc-chip-background: var(--fds-semantic-surface-action-primary-subtle);
-  --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
-  --fdsc-chip-border: var(--fds-semantic-border-neutral-strong);
-
-  box-shadow: inset 0 0 0 2px var(--fdsc-chip-border);
-  outline: 2px solid var(--fds-semantic-border-focus-outline);
-}
-
 .chipButton:is([aria-pressed='true']),
 .chipButton:active {
-  --fdsc-chip-background: var(--fds-semantic-surface-action-primary-active);
+  --fdsc-chip-background: var(--fds-semantic-surface-action-first-active);
   --fdsc-chip-text-color: var(--fds-semantic-text-neutral-on_inverted);
-  --fdsc-chip-border: var(--fds-semantic-surface-action-primary-active);
+  --fdsc-chip-border: var(--fds-semantic-surface-action-first-active);
 }
 
 .chipButton .label {
diff --git a/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx b/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
index 033a6fb3b4..1794aad447 100644
--- a/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
+++ b/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
@@ -5,6 +5,7 @@ import cn from 'classnames';
 import { Paragraph } from '../../Typography';
 import type { OverridableComponent } from '../../../types/OverridableComponent';
 import { ChipGroupContext } from '../Group';
+import utilityClasses from '../../../utils/utility.module.css';
 
 import classes from './ChipBase.module.css';
 
@@ -40,6 +41,7 @@ export const ChipBase: OverridableComponent<ChipBaseProps, HTMLLabelElement> =
           aria-pressed={selected}
           className={cn(
             classes.chipButton,
+            utilityClasses.focusable,
             classes[group?.size || size],
             className,
           )}
diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/Chip/index.ts
index fa0bf88441..1ee2ba9d4b 100644
--- a/packages/react/src/components/Chip/index.ts
+++ b/packages/react/src/components/Chip/index.ts
@@ -1,8 +1,8 @@
-import { Group } from './Group';
+import { Group as ChipGroup } from './Group';
 import type { ChipGroupProps } from './Group';
-import { RemovableChip } from './Removable';
+import { RemovableChip as ChipRemovable } from './Removable';
 import type { RemovableChipProps } from './Removable';
-import { ToggleChip } from './Toggle';
+import { ToggleChip as ChipToggle } from './Toggle';
 import type { ToggleChipProps } from './Toggle/';
 
 type ChipComponent = {
@@ -14,15 +14,15 @@ type ChipComponent = {
    *    <Chip.Removable>Tekst</Chip.Removable>
    * </Chip.Group>
    */
-  Group: typeof Group;
-  Removable: typeof RemovableChip;
-  Toggle: typeof ToggleChip;
+  Group: typeof ChipGroup;
+  Removable: typeof ChipRemovable;
+  Toggle: typeof ChipToggle;
 };
 
 const Chip: ChipComponent = {
-  Group: Group,
-  Removable: RemovableChip,
-  Toggle: ToggleChip,
+  Group: ChipGroup,
+  Removable: ChipRemovable,
+  Toggle: ChipToggle,
 };
 
 Chip.Group.displayName = 'Chip.Group';
@@ -30,4 +30,4 @@ Chip.Removable.displayName = 'Chip.Removable';
 Chip.Toggle.displayName = 'Chip.Toggle';
 
 export type { RemovableChipProps, ToggleChipProps, ChipGroupProps };
-export { Chip };
+export { Chip, ChipGroup, ChipRemovable, ChipToggle };
diff --git a/packages/react/src/components/Link/Link.module.css b/packages/react/src/components/Link/Link.module.css
index 84f4fc6ae8..ea3e46ead7 100644
--- a/packages/react/src/components/Link/Link.module.css
+++ b/packages/react/src/components/Link/Link.module.css
@@ -1,7 +1,7 @@
 .link {
-  --fdsc-link-hover-underline-color: var(--fds-semantic-text-action-primary-default);
+  --fdsc-link-hover-underline-color: var(--fds-semantic-text-action-first-default);
 
-  color: var(--fds-semantic-text-action-primary-default);
+  color: var(--fds-semantic-text-action-first-default);
   cursor: pointer;
   text-decoration: underline;
   text-decoration-thickness: max(1px, 0.0625rem);
@@ -17,7 +17,7 @@
 }
 
 .link:hover {
-  color: var(--fds-semantic-text-action-primary-default);
+  color: var(--fds-semantic-text-action-first-default);
   text-decoration-thickness: max(2px, 0.125rem, 0.12em);
 }
 
@@ -25,7 +25,7 @@
 .link:focus {
   background: var(--fds-semantic-border-focus-outline);
   box-shadow: 0 max(3px, 0.1875rem, 0.18em) var(--fds-semantic-border-focus-boxshadow);
-  color: var(--fds-semantic-text-action-primary-active);
+  color: var(--fds-semantic-text-action-first-active);
   outline: none;
   text-decoration: none;
 }
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 8c6e06c4f9..31b4d9ef9f 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -102,7 +102,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 onChange(currentPage - 1);
               }}
               variant={'quiet'}
-              color={'primary'}
+              color={'first'}
               size={size}
               className={cn({ [classes.hidden]: currentPage === 1 })}
             >
@@ -129,7 +129,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 <Button
                   variant={currentPage === step ? 'filled' : 'quiet'}
                   aria-current={currentPage === step}
-                  color={'primary'}
+                  color={'first'}
                   size={size}
                   aria-label={itemLabel(step)}
                   onClick={() => {
@@ -144,7 +144,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           <li>
             <Button
               variant={'quiet'}
-              color={'primary'}
+              color={'first'}
               size={size}
               icon={<ChevronRightIcon aria-hidden />}
               aria-label={nextLabel}
diff --git a/packages/react/src/components/Popover/Popover.test.tsx b/packages/react/src/components/Popover/Popover.test.tsx
index 33804017fc..1ab051888f 100644
--- a/packages/react/src/components/Popover/Popover.test.tsx
+++ b/packages/react/src/components/Popover/Popover.test.tsx
@@ -35,22 +35,16 @@ describe('Popover', () => {
       const popoverTrigger = screen.getByRole('button', { name: 'Open' });
 
       expect(screen.queryByText('Popover text')).not.toBeInTheDocument();
-      await act(async () => {
-        await user.click(popoverTrigger);
-      });
+      await act(async () => user.click(popoverTrigger));
       expect(screen.queryByText('Popover text')).toBeInTheDocument();
     });
 
     it('should close popover on trigger click when open', async () => {
-      await act(() => {
-        render({ initialOpen: true });
-      });
+      render({ initialOpen: true });
       const popoverTrigger = screen.getByRole('button', { name: 'Open' });
 
       expect(screen.queryByText('Popover text')).toBeInTheDocument();
-      await act(async () => {
-        await user.click(popoverTrigger);
-      });
+      await act(async () => user.click(popoverTrigger));
       expect(screen.queryByText('Popover text')).not.toBeInTheDocument();
     });
 
@@ -67,9 +61,7 @@ describe('Popover', () => {
     });
 
     it('should close popover on ESC pressed click when open', async () => {
-      await act(() => {
-        render({ initialOpen: true });
-      });
+      render({ initialOpen: true });
 
       expect(screen.queryByText('Popover text')).toBeInTheDocument();
       await act(async () => {
@@ -79,10 +71,9 @@ describe('Popover', () => {
     });
   });
 
-  it('should show popover content when initialOpen=true', async () => {
-    await act(() => {
-      render({ initialOpen: true });
-    });
+  it('should show popover content when initialOpen=true', () => {
+    render({ initialOpen: true });
+
     expect(screen.queryByText('Popover text')).toBeInTheDocument();
   });
 
@@ -122,10 +113,8 @@ describe('Popover', () => {
 
   test.each(popoverVariants)(
     'should render popover with correct variant when variant is %s',
-    async (variant) => {
-      await act(() => {
-        render({ variant: variant, initialOpen: true });
-      });
+    (variant) => {
+      render({ variant: variant, initialOpen: true });
       const otherColors = popoverVariants.filter((v) => v !== variant);
 
       const popoverContent = screen.getByRole('dialog');
diff --git a/packages/react/src/components/Select/Select.test.tsx b/packages/react/src/components/Select/Select.test.tsx
index 023465090d..1249b9c47b 100644
--- a/packages/react/src/components/Select/Select.test.tsx
+++ b/packages/react/src/components/Select/Select.test.tsx
@@ -40,6 +40,7 @@ const sortedOptions: SingleSelectOption[] = [
   singleSelectOptions[2],
   singleSelectOptions[0],
 ];
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const optionSearch = jest.fn((_o, _k) => sortedOptions);
 jest.mock('./utils', () => ({
   optionSearch: (
diff --git a/packages/react/src/components/Spinner/Spinner.module.css b/packages/react/src/components/Spinner/Spinner.module.css
index ccbd973deb..edaf950468 100644
--- a/packages/react/src/components/Spinner/Spinner.module.css
+++ b/packages/react/src/components/Spinner/Spinner.module.css
@@ -11,7 +11,7 @@
 }
 
 .interactionForeground {
-  stroke: var(--fds-semantic-border-action-primary-default);
+  stroke: var(--fds-semantic-border-action-first-default);
 }
 
 .invertedForeground {
diff --git a/packages/react/src/components/Tabs/Tab/Tab.module.css b/packages/react/src/components/Tabs/Tab/Tab.module.css
new file mode 100644
index 0000000000..e121175637
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tab/Tab.module.css
@@ -0,0 +1,84 @@
+.tabItem {
+  --fdsc-icon-size: var(--fds-sizing-4);
+  --fdsc-typography-font-family: inherit;
+  --fdsc-bottom-border-color: transparent;
+
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  gap: var(--fds-spacing-1);
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--fds-semantic-text-neutral-subtle);
+  position: relative;
+}
+
+.icon > svg {
+  display: flex;
+  height: 1.75em;
+  width: auto;
+}
+
+.tabItem.small {
+  --fdsc-icon-size: var(--fds-sizing-5);
+
+  font: var(--fds-typography-interactive-small);
+  font-family: var(--fdsc-typography-font-family);
+  padding: var(--fds-spacing-2) var(--fds-spacing-4);
+}
+
+.tabItem.medium {
+  --fdsc-icon-size: var(--fds-sizing-6);
+
+  font: var(--fds-typography-interactive-medium);
+  font-family: var(--fdsc-typography-font-family);
+  padding: var(--fds-spacing-3) var(--fds-spacing-5);
+}
+
+.tabItem.large {
+  --fdsc-icon-size: var(--fds-sizing-7);
+
+  font: var(--fds-typography-interactive-large);
+  font-family: var(--fdsc-typography-font-family);
+  padding: var(--fds-spacing-4) var(--fds-spacing-6);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tabItem:hover {
+    --fdsc-bottom-border-color: var(--fds-semantic-border-neutral-subtle);
+
+    color: var(--fds-semantic-text-neutral-default);
+  }
+}
+
+.tabItem.isActive {
+  --fdsc-bottom-border-color: var(--fds-semantic-border-action-default);
+
+  color: var(--fds-semantic-text-action-default);
+}
+
+.tabItem:focus-visible {
+  --fdsc-bottom-border-color: var(--fds-semantic-text-neutral-default);
+
+  background: var(--fds-semantic-border-focus-outline);
+  color: var(--fds-semantic-text-neutral-default);
+  outline: none;
+}
+
+.tabItem::after {
+  content: '';
+  display: block;
+  height: 3px;
+  width: 100%;
+  border-radius: var(--fds-border_radius-full);
+  background-color: var(--fdsc-bottom-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
diff --git a/packages/react/src/components/Tabs/Tab/Tab.test.tsx b/packages/react/src/components/Tabs/Tab/Tab.test.tsx
new file mode 100644
index 0000000000..81336bd2f7
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tab/Tab.test.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { TabList } from '../TabList';
+import { Tabs } from '..';
+
+import { Tab } from '.';
+
+const user = userEvent.setup();
+
+describe('TabItem', () => {
+  test('item renders with correct aria attributes', async () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <TabList>
+          <Tab value='value1'>Tab 1</Tab>
+          <Tab value='value2'>Tab 2</Tab>
+        </TabList>
+      </Tabs>,
+    );
+
+    const tab = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab).toHaveAttribute('aria-selected', 'false');
+    await user.click(tab);
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+  });
+});
diff --git a/packages/react/src/components/Tabs/Tab/Tab.tsx b/packages/react/src/components/Tabs/Tab/Tab.tsx
new file mode 100644
index 0000000000..ec67d6f923
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tab/Tab.tsx
@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import { RovingTabindexItem } from '../../../utility-components/RovingTabIndex';
+
+import classes from './Tab.module.css';
+import { useTabItem } from './useTab';
+
+export type TabProps = {
+  /** Value that will be set in the `Tabs` components state when the tab is activated*/
+  value: string;
+  /** Icon to display */
+  icon?: React.ReactNode;
+} & Omit<HTMLAttributes<HTMLButtonElement>, 'value'>;
+
+export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
+  const { children, className, icon, ...rest } = props;
+  const { active, size = 'medium', ...useTabRest } = useTabItem(props);
+
+  return (
+    <RovingTabindexItem
+      {...rest}
+      {...useTabRest}
+      as={'button'}
+      className={cn(
+        classes.tabItem,
+        classes[size],
+        active && classes.isActive,
+        className,
+      )}
+      ref={ref}
+    >
+      {icon && <span className={classes.icon}>{icon}</span>}
+      {children}
+    </RovingTabindexItem>
+  );
+});
diff --git a/packages/react/src/components/Tabs/Tab/index.ts b/packages/react/src/components/Tabs/Tab/index.ts
new file mode 100644
index 0000000000..2e2986cb59
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tab/index.ts
@@ -0,0 +1 @@
+export * from './Tab';
diff --git a/packages/react/src/components/Tabs/Tab/useTab.ts b/packages/react/src/components/Tabs/Tab/useTab.ts
new file mode 100644
index 0000000000..0fc4f0f523
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tab/useTab.ts
@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react';
+import { useContext, useId } from 'react';
+
+import { TabsContext } from '../Tabs';
+
+import type { TabProps } from './Tab';
+
+type UseTab = (props: TabProps) => {
+  active: boolean;
+  size?: 'small' | 'medium' | 'large';
+} & Pick<
+  HTMLAttributes<HTMLButtonElement>,
+  'id' | 'aria-selected' | 'role' | 'onClick'
+>;
+
+/** Handles props for `Tab` in context with `Tabs` */
+export const useTabItem: UseTab = (props: TabProps) => {
+  const { value, ...rest } = props;
+  const tabs = useContext(TabsContext);
+  const active = tabs.value == value;
+  const buttonId = `tab-${useId()}`;
+
+  return {
+    ...rest,
+    active: active,
+    size: tabs?.size,
+    id: buttonId,
+    'aria-selected': active,
+    role: 'tab',
+    onClick: () => {
+      tabs.onChange?.(value);
+    },
+  };
+};
diff --git a/packages/react/src/components/Tabs/TabContent/TabContent.module.css b/packages/react/src/components/Tabs/TabContent/TabContent.module.css
new file mode 100644
index 0000000000..cbe1195e28
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabContent/TabContent.module.css
@@ -0,0 +1,32 @@
+.tabContent {
+  --fdsc-typography-font-family: inherit;
+
+  font-family: var(--fdsc-typography-font-family);
+}
+
+.tabContent.small {
+  padding: var(--fds-spacing-4);
+}
+
+.tabContent.medium {
+  padding: var(--fds-spacing-5);
+}
+
+.tabContent.large {
+  padding: var(--fds-spacing-6);
+}
+
+.tabContent.onlyText.small {
+  font: var(--fds-typography-interactive-small);
+  font-family: var(--fdsc-typography-font-family);
+}
+
+.tabContent.onlyText.medium {
+  font: var(--fds-typography-interactive-medium);
+  font-family: var(--fdsc-typography-font-family);
+}
+
+.tabContent.onlyText.large {
+  font: var(--fds-typography-interactive-large);
+  font-family: var(--fdsc-typography-font-family);
+}
diff --git a/packages/react/src/components/Tabs/TabContent/TabContent.test.tsx b/packages/react/src/components/Tabs/TabContent/TabContent.test.tsx
new file mode 100644
index 0000000000..812e9d81df
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabContent/TabContent.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Tabs } from '..';
+
+import { TabContent } from '.';
+
+describe('TabContent', () => {
+  test('renders ReactNodes as children when TabContents value is selected', () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <TabContent value='value1'>
+          <div>content 1</div>
+        </TabContent>
+      </Tabs>,
+    );
+
+    const content = screen.queryByText('content 1');
+    expect(content).toBeInTheDocument();
+  });
+});
diff --git a/packages/react/src/components/Tabs/TabContent/TabContent.tsx b/packages/react/src/components/Tabs/TabContent/TabContent.tsx
new file mode 100644
index 0000000000..f56daa6459
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabContent/TabContent.tsx
@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef, useContext } from 'react';
+import cn from 'classnames';
+
+import { TabsContext } from '../Tabs';
+
+import classes from './TabContent.module.css';
+
+export type TabContentProps = {
+  /** When this value is selected as the current state, render this `TabContent` component*/
+  value: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value'>;
+
+export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
+  ({ children, value, ...rest }, ref) => {
+    const { value: tabsValue, size = 'medium' } = useContext(TabsContext);
+    const active = value == tabsValue;
+    const onlyText = typeof children === 'string';
+
+    return (
+      <>
+        {active && (
+          <div
+            {...rest}
+            className={cn(
+              classes[size],
+              classes.tabContent,
+              onlyText && classes.onlyText,
+              rest.className,
+            )}
+            ref={ref}
+          >
+            {children}
+          </div>
+        )}
+      </>
+    );
+  },
+);
diff --git a/packages/react/src/components/Tabs/TabContent/index.ts b/packages/react/src/components/Tabs/TabContent/index.ts
new file mode 100644
index 0000000000..86e97c2b90
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabContent/index.ts
@@ -0,0 +1 @@
+export * from './TabContent';
diff --git a/packages/react/src/components/Tabs/TabList/TabList.module.css b/packages/react/src/components/Tabs/TabList/TabList.module.css
new file mode 100644
index 0000000000..aa205d876d
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabList/TabList.module.css
@@ -0,0 +1,5 @@
+.tabItemList {
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--fds-border_width-default) solid var(--fds-semantic-border-neutral-subtle);
+}
diff --git a/packages/react/src/components/Tabs/TabList/TabList.test.tsx b/packages/react/src/components/Tabs/TabList/TabList.test.tsx
new file mode 100644
index 0000000000..41eae43dcf
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabList/TabList.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tab } from '../Tab';
+
+import { TabList } from '.';
+
+const user = userEvent.setup();
+
+describe('TabItemList', () => {
+  test('can navigate tabs with keyboard', async () => {
+    render(
+      <TabList>
+        <Tab value='value1'>Tab 1</Tab>
+        <Tab value='value2'>Tab 2</Tab>
+      </TabList>,
+    );
+
+    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.tab();
+    expect(tab1).toHaveFocus();
+    await user.type(tab1, '{arrowright}');
+    expect(tab2).toHaveFocus();
+    await user.type(tab2, '{arrowleft}');
+    expect(tab1).toHaveFocus();
+  });
+});
diff --git a/packages/react/src/components/Tabs/TabList/TabList.tsx b/packages/react/src/components/Tabs/TabList/TabList.tsx
new file mode 100644
index 0000000000..4ea42b2d71
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabList/TabList.tsx
@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import { RovingTabindexRoot } from '../../../utility-components/RovingTabIndex';
+
+import classes from './TabList.module.css';
+
+export const TabList = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...rest }, ref) => {
+  return (
+    <RovingTabindexRoot
+      {...rest}
+      role='tablist'
+      className={cn(classes.tabItemList, rest.className)}
+      ref={ref}
+    >
+      {children}
+    </RovingTabindexRoot>
+  );
+});
diff --git a/packages/react/src/components/Tabs/TabList/index.ts b/packages/react/src/components/Tabs/TabList/index.ts
new file mode 100644
index 0000000000..ef986cbccc
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabList/index.ts
@@ -0,0 +1 @@
+export * from './TabList';
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index 7a7eef26e7..f00dc86dc8 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
 import { Information } from '../../../../../docs-components';
 import * as TabsStories from './Tabs.stories';
 
@@ -6,50 +6,37 @@ import * as TabsStories from './Tabs.stories';
 
 # Tabs
 
-<Information text='altinn' />
-
-## Egenskaper
-
-Egenskapen `items` er obligatorisk og skal inneholde en liste med `TabItem`-objekter.
-Disse objektene skal inneholde en `name`- og en `content`-egenskap.
-`name` er navnet som vises på selve fanen, mens `content` er innholdet som skal vises når fanen er aktiv.
-
-Objektene kan også inneholde en `value`-egenskap som kan brukes til å identifisere fanen.
-Dette er nyttig når man bruker `activeTab` og `onChange` til å kontrollere hva som vises.
-`activeTab` bestemmer hvilken fane som skal være aktiv, og `onChange` er en funksjon som kalles når en ny fane blir aktivert.
-Sistnevnte tar inn den gjeldende fanens `value` som parameter.
-Dersom `value` ikke er satt på fanene, vil `name` bli brukt som `value`.
-
-`TabItem` har også to ID-egenskaper, `tabId` og `panelId`, som kan brukes til å sette en ID på henholdsvis fanen og panelet.
-Disse blir automatisk generert dersom de ikke er satt.
+Description of the Tabs component.
 
 <Primary />
 <Controls />
 
 ## Bruk
 
+<Information text='token' />
+
 ```tsx
-import '@altinn/figma-design-tokens/dist/tokens.css'; // Importeres kun én gang i din applikasjon
+import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din.
 import { Tabs } from '@digdir/design-system-react';
 
-<Tabs
-  items={[
-    {
-      name: 'Donec finibus',
-      content: 'In vulputate libero et tellus.',
-    },
-    {
-      name: 'Curabitur a',
-      content: 'Nulla nec lobortis ipsum. Sed.',
-    },
-    {
-      name: 'Sed at',
-      content: 'Donec eu luctus dui, nec.',
-    },
-  ]}
-/>;
+  <Tabs
+    defaultValue='value1'
+  >
+    <Tabs.List>
+      <Tabs.Tab value='value1' >Tab 1</Tabs.Tab>
+      <Tabs.Tab value='value2' >Tab 2</Tabs.Tab>
+      <Tabs.Tab value='value3' >Tab 3</Tabs.Tab>
+    </Tabs.List>
+    <Tabs.Content value='value1'>content 1</Tabs.Content>
+    <Tabs.Content value='value2'>content 2</Tabs.Content>
+    <Tabs.Content value='value3'>content 3</Tabs.Content>
+  </Tabs>
 ```
 
-## Eksempel
+## Icons only
+
+<Canvas of={TabsStories.IconsOnly} />
+
+## Controlled
 
-<Canvas of={TabsStories.Eksempel} />
+<Canvas of={TabsStories.Controlled} />
diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/Tabs/Tabs.stories.tsx
index 4d5a5449f8..9a9fa0d54f 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/react/src/components/Tabs/Tabs.stories.tsx
@@ -1,89 +1,116 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
+import * as icons from '@navikt/aksel-icons';
 
-import { Tabs } from './Tabs';
+import { Button } from '../Button';
+
+import { Tabs } from '.';
+
+const icon = (
+  <svg
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm5.047 5.671 1.399 1.43-8.728 8.398L6 14.02l1.395-1.434 2.319 2.118 7.333-7.032Z'
+      fill='currentColor'
+    />
+  </svg>
+);
+
+const AkselIcon = icons.AirplaneIcon;
+const AkselIcon2 = icons.NewspaperIcon;
+const AkselIcon3 = icons.DogIcon;
+const AkselIcon4 = icons.BackpackIcon;
 
 export default {
-  title: 'Altinn/Tabs',
+  title: 'Felles/Tabs',
   component: Tabs,
 } as Meta;
 
-export const Eksempel: StoryFn<typeof Tabs> = (args) => <Tabs {...args} />;
+export const Preview: StoryFn<typeof Tabs> = (args) => (
+  <Tabs {...args}>
+    <Tabs.List>
+      <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+      <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+      <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+    </Tabs.List>
+    <Tabs.Content value='value1'>content 1</Tabs.Content>
+    <Tabs.Content value='value2'>content 2</Tabs.Content>
+    <Tabs.Content value='value3'>content 3</Tabs.Content>
+  </Tabs>
+);
+
+Preview.args = {
+  defaultValue: 'value1',
+  size: 'medium',
+};
+
+export const IconsOnly: StoryFn<typeof Tabs> = () => (
+  <Tabs defaultValue='value1'>
+    <Tabs.List>
+      <Tabs.Tab
+        value='value1'
+        icon={<AkselIcon title='Airplane' />}
+      />
+      <Tabs.Tab
+        value='value2'
+        icon={<AkselIcon2 title='Newspaper' />}
+      />
+      <Tabs.Tab
+        value='value3'
+        icon={<AkselIcon3 title='Dog' />}
+      />
+    </Tabs.List>
+    <Tabs.Content value='value1'>content 1</Tabs.Content>
+    <Tabs.Content value='value2'>content 2</Tabs.Content>
+    <Tabs.Content value='value3'>content 3</Tabs.Content>
+  </Tabs>
+);
+
+export const Controlled: StoryFn<typeof Tabs> = () => {
+  const [value, setValue] = useState('value1');
 
-Eksempel.args = {
-  items: [
-    {
-      name: 'Ild',
-      content: (
-        <p>
-          Nulla nec rutrum libero. Curabitur lorem est, tempor nec iaculis in,
-          egestas eu lacus. Ut malesuada risus ut ipsum consequat mattis. Donec
-          quis nunc ut lorem suscipit pharetra. Nulla ornare sed nisl nec
-          facilisis. Sed in lacinia elit. Sed et eleifend nisi. Sed egestas
-          nulla lobortis sapien scelerisque, at venenatis risus elementum.
-          Aliquam eleifend, metus non molestie viverra, erat sem ornare enim,
-          nec suscipit nulla nisi vel dolor. Etiam volutpat sapien arcu. Orci
-          varius natoque penatibus et magnis dis parturient montes, nascetur
-          ridiculus mus. Nulla sollicitudin molestie leo sit amet faucibus. Sed
-          interdum condimentum interdum. Praesent volutpat turpis mattis purus
-          venenatis egestas. In iaculis condimentum fringilla. Duis dignissim
-          turpis mattis tristique vulputate.
-        </p>
-      ),
-    },
-    {
-      name: 'Jord',
-      content: (
-        <p>
-          Vestibulum nisl diam, tempus sit amet justo eu, semper facilisis
-          dolor. Proin scelerisque tellus sit amet consectetur condimentum.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et
-          dui vehicula, semper arcu vitae, posuere odio. Pellentesque eu ante in
-          elit semper pellentesque. Donec cursus eros non diam condimentum
-          viverra. Pellentesque at odio lorem. Aenean ac enim et risus bibendum
-          scelerisque et a purus. Donec ultricies, ex et ornare fringilla,
-          turpis ex consectetur ante, ut porta libero metus quis magna. Nulla eu
-          hendrerit ex, non dapibus quam. Nulla dictum ligula tellus, et
-          elementum orci convallis sit amet. Class aptent taciti sociosqu ad
-          litora torquent per conubia nostra, per inceptos himenaeos. Fusce
-          dolor orci, sagittis vel elit eget, viverra ultrices nulla.
-        </p>
-      ),
-    },
-    {
-      name: 'Luft',
-      content: (
-        <p>
-          Integer dictum lacus vitae urna lobortis, scelerisque varius metus
-          maximus. Integer ornare pharetra metus, vel mattis urna. Interdum et
-          malesuada fames ac ante ipsum primis in faucibus. Nulla consectetur
-          ipsum ac magna sollicitudin, ac fermentum sem tempus. Proin rutrum
-          aliquam eros eu accumsan. Duis rhoncus urna a tellus sagittis, eu
-          aliquam dui pharetra. Praesent eu libero consectetur, varius urna
-          quis, volutpat magna. Vivamus ornare magna at vehicula pulvinar.
-          Curabitur risus lorem, placerat sit amet mollis venenatis, placerat
-          sed ligula. Donec pellentesque quis est nec viverra. Sed ultricies
-          aliquam nunc, sit amet faucibus augue tempor quis. Pellentesque
-          porttitor sapien quis risus placerat, in facilisis augue molestie.
-        </p>
-      ),
-    },
-    {
-      name: 'Vann',
-      content: (
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel
-          leo nibh. Fusce neque nulla, semper quis rutrum eu, volutpat nec
-          mauris. In lacinia iaculis venenatis. Aliquam pulvinar lectus lorem, a
-          congue nulla dictum vel. Donec augue eros, cursus ut porta eu, mollis
-          sodales odio. Vestibulum rutrum sollicitudin nisi, sed facilisis nibh
-          dictum at. Nulla arcu mi, iaculis quis luctus at, vulputate hendrerit
-          quam. Suspendisse condimentum pellentesque varius. Nullam molestie
-          dictum pellentesque. Nunc felis sem, elementum a sapien a, consectetur
-          ullamcorper tellus. Nullam porta tempus nisl, in vehicula quam congue
-          eget.
-        </p>
-      ),
-    },
-  ],
+  return (
+    <>
+      <Button
+        size='small'
+        onClick={() => setValue('value3')}
+      >
+        Choose Tab 3
+      </Button>
+      <br />
+      <Tabs
+        value={value}
+        onChange={setValue}
+      >
+        <Tabs.List>
+          <Tabs.Tab
+            value='value1'
+            icon={icon}
+          >
+            Tab 1
+          </Tabs.Tab>
+          <Tabs.Tab
+            value='value2'
+            icon={<AkselIcon2 />}
+          >
+            Tab 2
+          </Tabs.Tab>
+          <Tabs.Tab
+            value='value3'
+            icon={<AkselIcon4 />}
+          >
+            Tab 3
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Content value='value1'>content 1</Tabs.Content>
+        <Tabs.Content value='value2'>content 2</Tabs.Content>
+        <Tabs.Content value='value3'>content 3</Tabs.Content>
+      </Tabs>
+    </>
+  );
 };
diff --git a/packages/react/src/components/Tabs/Tabs.test.tsx b/packages/react/src/components/Tabs/Tabs.test.tsx
index 2c5578c11f..c1e9453fb8 100644
--- a/packages/react/src/components/Tabs/Tabs.test.tsx
+++ b/packages/react/src/components/Tabs/Tabs.test.tsx
@@ -1,331 +1,68 @@
-import assert from 'assert';
-
 import React from 'react';
-import { act, screen, render as renderRtl } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { lastItem } from '../../utils/arrayUtils';
-
-import type { TabItem, TabsProps } from './Tabs';
-import { Tabs } from './Tabs';
+import { Tabs } from '.';
 
 const user = userEvent.setup();
 
-// Test data:
-const itemInfo = [
-  {
-    name: 'Item 1',
-    textContent: 'Lorem ipsum dolor sit amet.',
-    value: 'item1',
-  },
-  {
-    name: 'Item 2',
-    textContent: 'Etiam ac magna pretium, laoreet.',
-    value: 'item2',
-  },
-  {
-    name: 'Item 3',
-    textContent: 'Phasellus convallis porta commodo. Vivamus.',
-    value: 'item3',
-  },
-];
-const items: TabItem[] = itemInfo.map((item) => ({
-  name: item.name,
-  content: <p>{item.textContent}</p>,
-}));
-const itemsWithValues: TabItem[] = itemInfo.map((item) => ({
-  name: item.name,
-  content: <p>{item.textContent}</p>,
-  value: item.value,
-}));
-const defaultProps: TabsProps = {
-  items,
-};
-
 describe('Tabs', () => {
-  it('Renders expected elements', () => {
-    render();
-    expect(getTablist()).toBeInTheDocument();
-    expect(getTabs()).toHaveLength(items.length);
-    expect(getTabpanel()).toBeInTheDocument();
-  });
-
-  it('Selects first tab by default', () => {
-    render();
-    expectSelected(getTab(0));
-    expectNotSelected(getTab(1));
-    expectNotSelected(getTab(2));
-    expect(getTabpanel()).toHaveTextContent(itemInfo[0].textContent);
-  });
-
-  it('Initially selects tab with name given in the activeTab property if values are not set', () => {
-    render({ activeTab: items[1].name });
-    expectSelected(getTab(1));
-    expectNotSelected(getTab(0));
-    expectNotSelected(getTab(2));
-    expect(getTabpanel()).toHaveTextContent(itemInfo[1].textContent);
-  });
-
-  it('Initially selects tab with value given in the activeTab property if values are set', () => {
-    render({ items: itemsWithValues, activeTab: itemsWithValues[1].value });
-    expectSelected(getTab(1));
-    expectNotSelected(getTab(0));
-    expectNotSelected(getTab(2));
-    expect(getTabpanel()).toHaveTextContent(itemInfo[1].textContent);
-  });
-
-  it('Sets given tab id on tab', () => {
-    const tabId = 'some-unique-tab-id';
-    render({ items: [...items, { tabId, name: 'Item 4', content: <span /> }] });
-    expect(getLastTab()).toHaveAttribute('id', tabId);
-  });
-
-  it('Sets given panel id on tab panel', () => {
-    const panelId = 'some-unique-panel-id';
-    const textContent = 'In dignissim risus enim, sed.';
-    const content = <p>{textContent}</p>;
-    const tabs = [...items, { panelId, name: 'Item 4', content }];
-    render({ items: tabs });
-    expect(document.getElementById(panelId)).toHaveTextContent(textContent);
-  });
-
-  it('Links corresponding tabs and panels to each other with accessibility attributes', () => {
-    render();
-    items.forEach((_, i) => {
-      const panelId = getTab(i).getAttribute('aria-controls');
-      const panel = screen.getByLabelText(items[i].name);
-      expect(panel).toHaveAttribute('id', panelId);
-    });
-  });
-
-  it('Selects and focuses on tab when user clicks on it', async () => {
-    render();
-    for (let i = 0; i < items.length; i++) {
-      await act(() => user.click(getTab(i)));
-      expectSelectedIndex(i);
-      expect(getTab(i)).toHaveFocus();
-    }
-  });
-
-  it('Does not focus on any tab by default', () => {
-    render();
-    getTabs().forEach((tab) => expect(tab).not.toHaveFocus());
-  });
-
-  it('Focuses on the first tab when user presses the tab key', async () => {
-    const { container } = render();
-    await act(() => user.click(container));
-    await act(() => user.tab());
-    expect(getTab(0)).toHaveFocus();
-  });
-
-  it('Moves focus out when one tab has focus and user presses the tab key', async () => {
-    render();
-    await act(() => user.click(getTab(1)));
-    expect(getTab(1)).toHaveFocus();
-    await act(() => user.tab());
-    getTabs().forEach((tab) => expect(tab).not.toHaveFocus());
-  });
-
-  it('Moves focus to the right when user presses the right arrow key', async () => {
-    render();
-    await act(() => user.click(getTab(0)));
-    expect(getTab(0)).toHaveFocus();
-    await act(() => user.keyboard('{ArrowRight}'));
-    expect(getTab(1)).toHaveFocus();
-    await act(() => user.keyboard('{ArrowRight}'));
-    expect(getTab(2)).toHaveFocus();
-  });
-
-  it('Moves focus to the left when user presses the left arrow key', async () => {
-    render();
-    await act(() => user.click(getTab(2)));
-    expect(getTab(2)).toHaveFocus();
-    await act(() => user.keyboard('{ArrowLeft}'));
-    expect(getTab(1)).toHaveFocus();
-    await act(() => user.keyboard('{ArrowLeft}'));
-    expect(getTab(0)).toHaveFocus();
-  });
-
-  it('Moves focus to the first tab when the last tab is focused and user presses the right arrow key', async () => {
-    render();
-    await act(() => user.click(getLastTab()));
-    expect(getLastTab()).toHaveFocus();
-    await act(() => user.keyboard('{ArrowRight}'));
-    expect(getTab(0)).toHaveFocus();
-  });
-
-  it('Moves focus to the last tab when the first tab is focused and user presses the left arrow key', async () => {
-    render();
-    await act(() => user.click(getTab(0)));
-    expect(getTab(0)).toHaveFocus();
-    await act(() => user.keyboard('{ArrowLeft}'));
-    expect(getLastTab()).toHaveFocus();
-  });
-
-  it('Selects tab when user navigates with arrow keys and presses the enter key', async () => {
-    render();
-    await act(() => user.click(getTab(0)));
-    await act(() => user.keyboard('{ArrowRight}'));
-    await act(() => user.keyboard('{Enter}'));
-    expectSelected(getTab(1));
-  });
-
-  it('Selects tab when user navigates with arrow keys and presses the space key', async () => {
-    render();
-    await act(() => user.click(getTab(0)));
-    await act(() => user.keyboard('{ArrowRight}'));
-    await act(() => user.keyboard('{Space}'));
-    expectSelected(getTab(1));
-  });
-
-  it('Throws error if item values are not set and names are not unique', () => {
-    const renderFn = () => {
-      render({ items: [...items, { name: items[0].name, content: <p /> }] });
-    };
-    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
-    expect(renderFn).toThrow('Each tab value must be unique.');
-  });
-
-  it('Throws error if item values are set, but not unique', () => {
-    const renderFn = () => {
-      render({
-        items: [
-          ...itemsWithValues,
-          { name: 'Item 4', content: <p />, value: itemsWithValues[0].value },
-        ],
-      });
-    };
-    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
-    expect(renderFn).toThrow('Each tab value must be unique.');
-  });
-
-  it('Throws error if the value given in activeTab is not present among the item names and item values are not given', () => {
-    const renderFn = () => {
-      render({ activeTab: 'Some name that is not in the list' });
-    };
-    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
-    const error = 'The given active tab value must exist in the list of items.';
-    expect(renderFn).toThrow(error);
-  });
-
-  it('Throws error if the value given in activeTab is not present among the item values if they are given', () => {
-    const renderFn = () => {
-      render({
-        items: itemsWithValues,
-        activeTab: 'Some value that is not in the list',
-      });
-    };
-    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
-    const error = 'The given active tab value must exist in the list of items.';
-    expect(renderFn).toThrow(error);
-  });
-
-  it('Switches selected tab when rerendered with a new name in the activeTab property and values are not set', () => {
-    const { rerender } = render();
-    rerender(
-      <Tabs
-        {...defaultProps}
-        activeTab={items[1].name}
-      />,
+  test('has passed size to TabItems', () => {
+    render(
+      <Tabs size='medium'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Content value='value1'>content 1</Tabs.Content>
+        <Tabs.Content value='value2'>content 2</Tabs.Content>
+      </Tabs>,
     );
-    expectSelected(getTab(1));
-  });
 
-  it('Switches selected tab when rerendered with a new value in the activeTab property and values are set', () => {
-    const { rerender } = render();
-    rerender(
-      <Tabs
-        {...defaultProps}
-        items={itemsWithValues}
-        activeTab={itemsWithValues[1].value}
-      />,
+    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab1).toHaveClass('medium');
+    expect(tab2).toHaveClass('medium');
+  });
+
+  test('can navigate tabs with keyboard', async () => {
+    render(
+      <Tabs>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Content value='value1'>content 1</Tabs.Content>
+        <Tabs.Content value='value2'>content 2</Tabs.Content>
+      </Tabs>,
     );
-    expectSelected(getTab(1));
-  });
-
-  it("Calls the onChange function with the selected tab's name as a parameter when user selects a tab using the mouse and values are not set", async () => {
-    const onChange = jest.fn();
-    render({ onChange });
-    await act(() => user.click(getTab(1)));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(items[1].name);
-  });
-
-  it("Calls the onChange function with the selected tab's value as a parameter when user selects a tab using the mouse and values are set", async () => {
-    const onChange = jest.fn();
-    render({ items: itemsWithValues, onChange });
-    await act(() => user.click(getTab(1)));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(itemsWithValues[1].value);
-  });
-
-  it("Calls the onChange function with the selected tab's name as a parameter when user selects a tab using the enter key and values are not set", async () => {
-    const onChange = jest.fn();
-    render({ onChange });
-    await act(() => user.click(getTab(0)));
-    await act(() => user.keyboard('{ArrowRight}'));
-    await act(() => user.keyboard('{Enter}'));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(items[1].name);
-  });
 
-  it("Calls the onChange function with the selected tab's value as a parameter when user selects a tab using the enter key and values are set", async () => {
-    const onChange = jest.fn();
-    render({ items: itemsWithValues, onChange });
-    await act(() => user.click(getTab(0)));
-    await act(() => user.keyboard('{ArrowRight}'));
-    await act(() => user.keyboard('{Enter}'));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(itemsWithValues[1].value);
-  });
-
-  it("Calls the onChange function with the selected tab's name as a parameter when user selects a tab using the space key and values are not set", async () => {
-    const onChange = jest.fn();
-    render({ onChange });
-    await act(() => user.click(getTab(0)));
-    await act(() => user.keyboard('{ArrowRight}'));
-    await act(() => user.keyboard('{Space}'));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(items[1].name);
-  });
+    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.tab();
+    expect(tab1).toHaveFocus();
+    await user.type(tab1, '{arrowright}');
+    expect(tab2).toHaveFocus();
+    await user.type(tab2, '{arrowleft}');
+    expect(tab1).toHaveFocus();
+  });
+
+  test('renders content based on value', async () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Content value='value1'>content 1</Tabs.Content>
+        <Tabs.Content value='value2'>content 2</Tabs.Content>
+      </Tabs>,
+    );
 
-  it("Calls the onChange function with the selected tab's value as a parameter when user selects a tab using the space key and values are set", async () => {
-    const onChange = jest.fn();
-    render({ items: itemsWithValues, onChange });
-    await act(() => user.click(getTab(0)));
-    await act(() => user.keyboard('{ArrowRight}'));
-    await act(() => user.keyboard('{Space}'));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(itemsWithValues[1].value);
+    expect(screen.queryByText('content 1')).toBeVisible();
+    expect(screen.queryByText('content 2')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('tab', { name: 'Tab 2' }));
+    expect(screen.queryByText('content 2')).toBeVisible();
+    expect(screen.queryByText('content 1')).not.toBeInTheDocument();
   });
 });
-
-const render = (props?: Partial<TabsProps>) => {
-  return renderRtl(
-    <Tabs
-      {...defaultProps}
-      {...props}
-    />,
-  );
-};
-
-const getTablist = () => screen.getByRole('tablist');
-const getTabs = () => screen.getAllByRole('tab');
-const getTab = (index: number) => getTabs()[index];
-const getLastTab = () => {
-  const last = lastItem(getTabs());
-  assert(last !== undefined);
-  return last;
-};
-const getTabpanel = () => screen.getByRole('tabpanel');
-
-const expectSelected = (tab: HTMLElement) =>
-  expect(tab).toHaveAttribute('aria-selected', 'true');
-const expectNotSelected = (tab: HTMLElement) =>
-  expect(tab).toHaveAttribute('aria-selected', 'false');
-const expectSelectedIndex = (index: number) =>
-  getTabs().forEach((tab, i) => {
-    if (index === i) expectSelected(tab);
-    else expectNotSelected(tab);
-  });
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 21d2bb15ed..d59e9d1bd1 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -1,141 +1,75 @@
-import type { KeyboardEventHandler } from 'react';
-import React, { useEffect, useId, useRef, useState } from 'react';
-import cn from 'classnames';
+import type { HTMLAttributes } from 'react';
+import React, { createContext, forwardRef, useState } from 'react';
 
-import { useUpdate } from '../../hooks';
-import { areItemsUnique } from '../../utils/arrayUtils';
-
-import classes from './Tabs.module.css';
-
-export interface TabItem {
-  name: string;
-  content: React.ReactNode;
-  tabId?: string;
-  panelId?: string;
+export type TabsProps = {
+  /** Controlled state for `Tabs` component. */
   value?: string;
-}
-
-export interface TabsProps {
-  activeTab?: string;
-  items: TabItem[];
-  onChange?: (name: string) => void;
-}
-
-const validId = (str: string) => str.replace(/\s/, '_');
-
-const Tabs = ({ activeTab, items, onChange }: TabsProps) => {
-  const idBase = useId();
-
-  // Generate values for undefined properties
-  const tabs: Required<TabItem>[] = items.map(
-    ({
-      name,
-      content,
-      value: optionalValue,
-      tabId: optionalTabId,
-      panelId: optionalPanelId,
-    }) => {
-      const value = optionalValue ?? name;
-      const tabId = optionalTabId ?? idBase + validId(value) + '-tab';
-      const panelId = optionalPanelId ?? idBase + validId(value) + '-panel';
-      return { name, content, value, tabId, panelId };
-    },
-  );
-
-  if (!areItemsUnique(tabs.map(({ value }) => value))) {
-    throw Error('Each tab value must be unique.');
-  }
-  if (activeTab !== undefined && !tabs.some((tab) => tab.value === activeTab)) {
-    throw Error('The given active tab value must exist in the list of items.');
-  }
-
-  const findTabIndexByValue = (value: string) =>
-    tabs.findIndex((tab) => tab.value === value);
-  const initialTab = activeTab ?? tabs[0].value;
-  const [visiblePanel, setVisiblePanel] = useState<string>(initialTab);
-  const [focusIndex, setFocusIndex] = useState<number>(
-    findTabIndexByValue(initialTab),
-  );
-  useEffect(() => setVisiblePanel(initialTab), [initialTab]);
-  const tablistRef = useRef<HTMLDivElement>(null);
-  const lastIndex = tabs.length - 1;
-
-  useUpdate(() => {
-    tablistRef.current
-      ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
-      [focusIndex].focus();
-  }, [focusIndex]);
-
-  const selectTab = (value: string) => {
-    visiblePanel !== value && onChange && onChange(value);
-    setVisiblePanel(value);
-    setFocusIndex(findTabIndexByValue(value));
-  };
-
-  const moveFocusRight = () =>
-    focusIndex !== undefined &&
-    setFocusIndex(focusIndex === lastIndex ? 0 : focusIndex + 1);
-  const moveFocusLeft = () =>
-    focusIndex !== undefined &&
-    setFocusIndex(focusIndex === 0 ? lastIndex : focusIndex - 1);
-
-  const onKeyDown =
-    (name: string) => (event: Parameters<KeyboardEventHandler>[0]) => {
-      switch (event.key) {
-        case 'ArrowRight':
-          moveFocusRight();
-          break;
-        case 'ArrowLeft':
-          moveFocusLeft();
-          break;
-        case 'Space':
-          selectTab(name);
-      }
-    };
+  /** Default value. */
+  defaultValue?: string;
+  /** Callback with selected `TabItem` `value` */
+  onChange?: (value: string) => void;
+  /** Changes items size and paddings */
+  size?: 'small' | 'medium' | 'large';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
+
+/** `Tabs` component.
+ * @example
+ * ```tsx
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Item value='1'>Tab 1</Tabs.Item>
+ *     <Tabs.Item value='2'>Tab 2</Tabs.Item>
+ *     <Tabs.Item value='3'>Tab 3</Tabs.Item>
+ *   </Tabs.List>
+ *   <Tabs.Content value='1'>content 1</Tabs.Content>
+ *   <Tabs.Content value='2'>content 2</Tabs.Content>
+ *   <Tabs.Content value='3'>content 3</Tabs.Content>
+ * </Tabs>
+ * ```
+ */
+export type TabsContextProps = {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  size?: 'small' | 'medium' | 'large';
+};
 
-  return (
-    <div className={classes.tabs}>
-      <div
-        className={classes.tablist}
-        ref={tablistRef}
-        role='tablist'
+export const TabsContext = createContext<TabsContextProps>({});
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  (
+    { children, value, defaultValue, onChange, size = 'medium', ...rest },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState<
+      string | undefined
+    >(defaultValue);
+
+    let onValueChange = onChange;
+    if (!isControlled) {
+      onValueChange = (newValue: string) => {
+        setUncontrolledValue(newValue);
+        onChange?.(newValue);
+      };
+      value = uncontrolledValue;
+    }
+    return (
+      <TabsContext.Provider
+        value={{
+          value,
+          defaultValue,
+          onChange: onValueChange,
+          size,
+        }}
       >
-        {tabs.map((tab, i) => {
-          const isSelected = tab.value === visiblePanel;
-          return (
-            <button
-              aria-controls={tab.panelId}
-              aria-selected={isSelected}
-              className={cn(classes.tab, isSelected && classes.selected)}
-              id={tab.tabId}
-              key={tab.value}
-              onClick={() => selectTab(tab.value)}
-              onKeyDown={onKeyDown(tab.value)}
-              role='tab'
-              tabIndex={focusIndex === i ? 0 : -1}
-            >
-              {tab.name}
-            </button>
-          );
-        })}
-      </div>
-      <hr className={classes.divider} />
-      {tabs.map((tab) => (
         <div
-          className={classes.tabpanel}
-          aria-labelledby={tab.tabId}
-          hidden={tab.value !== visiblePanel}
-          id={tab.panelId}
-          key={tab.panelId}
-          role='tabpanel'
+          {...rest}
+          ref={ref}
         >
-          {tab.content}
+          {children}
         </div>
-      ))}
-    </div>
-  );
-};
-
-Tabs.displayName = 'Tabs';
-
-export { Tabs };
+      </TabsContext.Provider>
+    );
+  },
+);
diff --git a/packages/react/src/components/Tabs/index.ts b/packages/react/src/components/Tabs/index.ts
index 10fb61972b..0623eae158 100644
--- a/packages/react/src/components/Tabs/index.ts
+++ b/packages/react/src/components/Tabs/index.ts
@@ -1,2 +1,26 @@
-export { Tabs } from './Tabs';
-export type { TabsProps, TabItem } from './Tabs';
+import { Tabs as TabsRoot } from './Tabs';
+import { Tab } from './Tab';
+import { TabList } from './TabList';
+import { TabContent } from './TabContent';
+
+export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tab';
+export type { TabContentProps } from './TabContent';
+
+type TabsComponent = typeof TabsRoot & {
+  Tab: typeof Tab;
+  List: typeof TabList;
+  Content: typeof TabContent;
+};
+
+const Tabs = TabsRoot as TabsComponent;
+
+Tabs.Tab = Tab;
+Tabs.List = TabList;
+Tabs.Content = TabContent;
+
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.List.displayName = 'Tabs.List';
+Tabs.Content.displayName = 'Tabs.Content';
+
+export { Tabs, Tab, TabList, TabContent };
diff --git a/packages/react/src/components/Tag/Tag.module.css b/packages/react/src/components/Tag/Tag.module.css
index 8537fd2f15..323ab48f5c 100644
--- a/packages/react/src/components/Tag/Tag.module.css
+++ b/packages/react/src/components/Tag/Tag.module.css
@@ -64,21 +64,21 @@
   --fdsc-tag-text: var(--fds-semantic-text-danger-on_danger_subtle);
 }
 
-.outlined.primary {
-  --fdsc-tag-border: var(--fds-semantic-surface-primary-dark);
-  --fdsc-tag-background: var(--fds-semantic-surface-primary-light);
+.outlined.first {
+  --fdsc-tag-border: var(--fds-semantic-surface-first-dark);
+  --fdsc-tag-background: var(--fds-semantic-surface-first-light);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
 }
 
-.outlined.secondary {
-  --fdsc-tag-border: var(--fds-semantic-surface-secondary-dark);
-  --fdsc-tag-background: var(--fds-semantic-surface-secondary-light);
+.outlined.second {
+  --fdsc-tag-border: var(--fds-semantic-surface-second-dark);
+  --fdsc-tag-background: var(--fds-semantic-surface-second-light);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
 }
 
-.outlined.tertiary {
-  --fdsc-tag-border: var(--fds-semantic-surface-tertiary-dark);
-  --fdsc-tag-background: var(--fds-semantic-surface-tertiary-light);
+.outlined.third {
+  --fdsc-tag-border: var(--fds-semantic-surface-third-dark);
+  --fdsc-tag-background: var(--fds-semantic-surface-third-light);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
 }
 
@@ -112,20 +112,20 @@
   --fdsc-tag-text: var(--fds-semantic-text-danger-on_danger);
 }
 
-.filled.primary {
-  --fdsc-tag-border: var(--fds-semantic-surface-primary-dark);
-  --fdsc-tag-background: var(--fds-semantic-surface-primary-dark);
+.filled.first {
+  --fdsc-tag-border: var(--fds-semantic-surface-first-dark);
+  --fdsc-tag-background: var(--fds-semantic-surface-first-dark);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted);
 }
 
-.filled.secondary {
-  --fdsc-tag-border: var(--fds-semantic-surface-secondary-dark);
-  --fdsc-tag-background: var(--fds-semantic-surface-secondary-dark);
+.filled.second {
+  --fdsc-tag-border: var(--fds-semantic-surface-second-dark);
+  --fdsc-tag-background: var(--fds-semantic-surface-second-dark);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted);
 }
 
-.filled.tertiary {
-  --fdsc-tag-border: var(--fds-semantic-surface-tertiary-dark);
-  --fdsc-tag-background: var(--fds-semantic-surface-tertiary-dark);
+.filled.third {
+  --fdsc-tag-border: var(--fds-semantic-surface-third-dark);
+  --fdsc-tag-background: var(--fds-semantic-surface-third-dark);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted);
 }
diff --git a/packages/react/src/components/Tag/Tag.stories.tsx b/packages/react/src/components/Tag/Tag.stories.tsx
index 45b509019d..ceefc449de 100644
--- a/packages/react/src/components/Tag/Tag.stories.tsx
+++ b/packages/react/src/components/Tag/Tag.stories.tsx
@@ -69,9 +69,9 @@ const colors: TagProps['color'][] = [
   'warning',
   'danger',
   'info',
-  'primary',
-  'secondary',
-  'tertiary',
+  'first',
+  'second',
+  'third',
 ];
 
 export const Colors: StoryFn<typeof Tag> = ({ ...rest }): JSX.Element => {
diff --git a/packages/react/src/components/Tag/Tag.test.tsx b/packages/react/src/components/Tag/Tag.test.tsx
index 1006a90ce8..202c0d1002 100644
--- a/packages/react/src/components/Tag/Tag.test.tsx
+++ b/packages/react/src/components/Tag/Tag.test.tsx
@@ -37,9 +37,9 @@ describe('Tag', () => {
       expect(screen.getByText('Beta')).toHaveClass('outlined');
     });
 
-    test('should render color primary', (): void => {
-      render(<Tag color='primary'>Beta</Tag>);
-      expect(screen.getByText('Beta')).toHaveClass('primary');
+    test('should render color first', (): void => {
+      render(<Tag color='first'>Beta</Tag>);
+      expect(screen.getByText('Beta')).toHaveClass('first');
     });
 
     test('should have custom className', () => {
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 28aef87160..c9ece3ac01 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -7,7 +7,7 @@ import { Paragraph } from '../Typography';
 
 import classes from './Tag.module.css';
 
-type BrandColor = 'primary' | 'secondary' | 'tertiary';
+type BrandColor = 'first' | 'second' | 'third';
 type VariantColor = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 type Size = Exclude<ParagraphProps['size'], 'large'>;
 
diff --git a/packages/react/src/components/TextArea/TextArea.mdx b/packages/react/src/components/TextArea/TextArea.mdx
deleted file mode 100644
index fcc0c2247f..0000000000
--- a/packages/react/src/components/TextArea/TextArea.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Meta, Canvas, Story, Primary, Controls } from '@storybook/blocks';
-import { TextArea } from './';
-import { Information, TokensTable } from '../../../../../docs-components';
-import { ArgsTable } from '@storybook/blocks';
-import * as TextAreaStories from './TextArea.stories';
-
-<Meta of={TextAreaStories} />
-
-# TextArea
-
-<Information text='altinn' />
-
-`TextArea` brukes til å ta imot lengre tekster, gjerne over flere linjer.
-
-## Bruk
-
-```tsx
-import { TextArea } from '@digdir/design-system-react';
-
-<TextArea {...props} />;
-```
-
-## Props
-
-<Primary />
-<Controls />
-
-## Eksempler
-
-### Standard
-
-<Canvas>
-  <Story of={TextAreaStories.Standard} />
-</Canvas>
-
-### Med feil
-
-<Canvas>
-  <Story of={TextAreaStories.MedFeil} />
-</Canvas>
-
-### Skrivebeskyttet
-
-<Canvas>
-  <Story of={TextAreaStories.Skrivebeskyttet} />
-</Canvas>
-
-### Bekreftelsesvisning
-
-<Canvas>
-  <Story of={TextAreaStories.Bekreftelsesvisning} />
-</Canvas>
-
-### Deaktivert
-
-<Canvas>
-  <Story of={TextAreaStories.Deaktivert} />
-</Canvas>
-
-### Viser antall tegn igjen å skrive
-
-<Canvas>
-  <Story of={TextAreaStories.AntallTegnIgjenASkrive} />
-</Canvas>
-
-## Tokens
-
-<TokensTable
-  jsonKey='component.textfield'
-  componentName='textfield'
-  showPreview={false}
-  description
-/>
diff --git a/packages/react/src/components/TextArea/index.ts b/packages/react/src/components/TextArea/index.ts
deleted file mode 100644
index 1c303c305c..0000000000
--- a/packages/react/src/components/TextArea/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { TextArea } from './TextArea';
-export type { TextAreaProps } from './TextArea';
diff --git a/packages/react/src/components/TextField/index.ts b/packages/react/src/components/TextField/index.ts
deleted file mode 100644
index 03fca4ab6a..0000000000
--- a/packages/react/src/components/TextField/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { TextField } from './TextField';
-export type { TextFieldProps, TextFieldFormatting } from './TextField';
diff --git a/packages/react/src/components/ToggleButtonGroup/index.ts b/packages/react/src/components/ToggleButtonGroup/index.ts
deleted file mode 100644
index 4de1e7ce09..0000000000
--- a/packages/react/src/components/ToggleButtonGroup/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { ToggleButtonGroup } from './ToggleButtonGroup';
-export type {
-  ToggleButtonGroupProps,
-  ToggleButtonProps,
-} from './ToggleButtonGroup';
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.mdx b/packages/react/src/components/ToggleGroup/ToggleGroup.mdx
new file mode 100644
index 0000000000..c703aa60aa
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.mdx
@@ -0,0 +1,35 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../docs-components';
+import * as ToggleGroupStories from './ToggleGroup.stories';
+
+<Meta of={ToggleGroupStories} />
+
+# ToggleGroup
+
+Description of the ToggleGroup component.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+<Information text='token' />
+
+```tsx
+import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din.
+import { ToggleGroup } from '@digdir/design-system-react';
+
+<ToggleGroup defaultValue="value1">
+  <ToggleGroup value="value1">Option 1</ToggleGroup.Item>
+  <ToggleGroup value="value2">Option 2</ToggleGroup.Item>
+  <ToggleGroup value="value3">Option 3</ToggleGroup.Item>
+</ToggleGroup>;
+```
+
+## Only Icons
+
+<Canvas of={ToggleGroupStories.OnlyIcons} />
+
+## Controlled
+
+<Canvas of={ToggleGroupStories.Controlled} />
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.module.css b/packages/react/src/components/ToggleGroup/ToggleGroup.module.css
new file mode 100644
index 0000000000..4b87541de4
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.module.css
@@ -0,0 +1,13 @@
+.toggleGroupContainer {
+  background-color: var(--fds-semantic-background-default);
+  border: var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);
+  border-radius: var(--fds-border_radius-medium);
+}
+
+.groupContent {
+  display: inline-grid;
+  gap: var(--fds-spacing-1);
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  padding: var(--fds-spacing-1);
+}
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx
new file mode 100644
index 0000000000..57ab1d4801
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import * as icons from '@navikt/aksel-icons';
+
+import { Button } from '../Button';
+
+import { ToggleGroup } from '.';
+
+const icon = (
+  <svg
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm5.047 5.671 1.399 1.43-8.728 8.398L6 14.02l1.395-1.434 2.319 2.118 7.333-7.032Z'
+      fill='currentColor'
+    />
+  </svg>
+);
+
+const AkselIcon = icons.AirplaneFillIcon;
+const AkselIcon2 = icons.NewspaperFillIcon;
+const AkselIcon3 = icons.BrailleIcon;
+const AkselIcon4 = icons.BackpackFillIcon;
+
+export default {
+  title: 'Felles/ToggleGroup',
+  component: ToggleGroup,
+} as Meta;
+
+export const Preview: StoryFn<typeof ToggleGroup> = (args) => {
+  return (
+    <ToggleGroup {...args}>
+      <ToggleGroup.Item>Peanut</ToggleGroup.Item>
+      <ToggleGroup.Item>Walnut</ToggleGroup.Item>
+      <ToggleGroup.Item>Pistachio 🤤</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+};
+
+Preview.args = {
+  defaultValue: 'Peanut',
+  size: 'medium',
+  name: 'toggle-group-nuts',
+};
+
+export const OnlyIcons: StoryFn<typeof ToggleGroup> = () => {
+  const handleChange = (value: string) => {
+    console.log(value);
+  };
+
+  return (
+    <ToggleGroup
+      defaultValue={'option-1'}
+      onChange={handleChange}
+    >
+      <ToggleGroup.Item
+        value={'option-1'}
+        icon={<AkselIcon3 title='Braille' />}
+      />
+      <ToggleGroup.Item
+        value={'option-2'}
+        icon={<AkselIcon2 title='Newspaper' />}
+      />
+      <ToggleGroup.Item
+        value={'option-3'}
+        icon={<AkselIcon4 title='Backpack' />}
+      />
+    </ToggleGroup>
+  );
+};
+
+export const Controlled: StoryFn<typeof ToggleGroup> = () => {
+  const [value, setValue] = useState<string>('peanut');
+  return (
+    <>
+      <div style={{ display: 'flex', gap: '4px' }}>
+        <Button
+          size='small'
+          onClick={() => setValue('peanut')}
+        >
+          Select Peanut
+        </Button>
+      </div>
+      <br />
+      <ToggleGroup
+        value={value}
+        size='medium'
+        onChange={setValue}
+      >
+        <ToggleGroup.Item
+          value='pistachio'
+          icon={<AkselIcon />}
+        >
+          Pistachio
+        </ToggleGroup.Item>
+        <ToggleGroup.Item
+          value='peanut'
+          icon={icon}
+        >
+          Peanut
+        </ToggleGroup.Item>
+        <ToggleGroup.Item
+          value='walnut'
+          icon={<AkselIcon2 />}
+        >
+          Walnut
+        </ToggleGroup.Item>
+      </ToggleGroup>
+      <br />
+      <span>You have chosen: {value}</span>
+    </>
+  );
+};
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx
new file mode 100644
index 0000000000..d06936c25c
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ToggleGroup } from '.';
+
+const user = userEvent.setup();
+
+describe('ToggleGroup', () => {
+  test('has generated name for ToggleGroupItem children', () => {
+    render(
+      <ToggleGroup>
+        <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item = screen.getByRole('radio');
+    expect(item).toHaveAttribute('name');
+  });
+
+  test('has passed name to ToggleGroupItem children', (): void => {
+    render(
+      <ToggleGroup name='my name'>
+        <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item = screen.getByRole<HTMLButtonElement>('radio');
+    expect(item.name).toEqual('my name');
+  });
+  test('has passed size to ToggleGroupItem children', (): void => {
+    render(
+      <ToggleGroup size='medium'>
+        <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item = screen.getByRole<HTMLButtonElement>('radio');
+    expect(item).toHaveClass('medium');
+  });
+  test('can navigate with tab and arrow keys', async () => {
+    render(
+      <ToggleGroup>
+        <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
+        <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
+        <ToggleGroup.Item value='test3'>test3</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item1 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test',
+    });
+    const item2 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test2',
+    });
+    const item3 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test3',
+    });
+    await user.tab();
+    expect(item1).toHaveFocus();
+    await user.type(item1, '{arrowright}');
+    expect(item2).toHaveFocus();
+    await user.type(item2, '{arrowright}');
+    expect(item3).toHaveFocus();
+    await user.type(item3, '{arrowleft}');
+    expect(item2).toHaveFocus();
+  });
+  test('has correct ToggleGroupItem defaultChecked & checked when defaultValue is used', () => {
+    render(
+      <ToggleGroup defaultValue='test2'>
+        <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
+        <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
+        <ToggleGroup.Item value='test3'>test3</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test2',
+    });
+    expect(item).toHaveAttribute('aria-checked', 'true');
+  });
+  test('has passed clicked ToggleGroupItem element to onChange', async () => {
+    let onChangeValue = '';
+
+    render(
+      <ToggleGroup onChange={(value) => (onChangeValue = value)}>
+        <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
+        <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test2',
+    });
+
+    expect(item).toHaveAttribute('aria-checked', 'false');
+
+    await user.click(item);
+
+    expect(onChangeValue).toEqual('test2');
+    expect(item).toHaveAttribute('aria-checked', 'true');
+  });
+  test('has passed clicked ToggleGroupItem element to onChange when defaultValue is used', async () => {
+    let onChangeValue = '';
+
+    render(
+      <ToggleGroup
+        defaultValue='test1'
+        onChange={(value) => (onChangeValue = value)}
+      >
+        <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
+        <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item1 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test1',
+    });
+    const item2 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test2',
+    });
+
+    expect(item1).toHaveAttribute('aria-checked', 'true');
+    expect(item2).toHaveAttribute('aria-checked', 'false');
+
+    await user.click(item2);
+
+    expect(onChangeValue).toEqual('test2');
+    expect(item2).toHaveAttribute('aria-checked', 'true');
+  });
+});
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
new file mode 100644
index 0000000000..9f01c90805
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -0,0 +1,89 @@
+import type { HTMLAttributes } from 'react';
+import React, { createContext, forwardRef, useId, useState } from 'react';
+import cn from 'classnames';
+
+import { RovingTabindexRoot } from '../../utility-components/RovingTabIndex';
+
+import classes from './ToggleGroup.module.css';
+
+export type ToggleGroupContextProps = {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  size?: 'small' | 'medium' | 'large';
+};
+
+export const ToggleGroupContext = createContext<ToggleGroupContextProps>({});
+
+export type ToggleGroupProps = {
+  /** Controlled state for `ToggleGroup` component. */
+  value?: string;
+  /** Default value. */
+  defaultValue?: string;
+  /** Callback with selected `ToggleGroupItem` `value` */
+  onChange?: (value: string) => void;
+  /** Form element name */
+  name?: string;
+  /** Changes items size and paddings */
+  size?: 'small' | 'medium' | 'large';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>;
+
+/** `ToggleGroup` component.
+ * @example
+ * ```tsx
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ * ```
+ */
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  (
+    { children, value, defaultValue, onChange, size = 'medium', name, ...rest },
+    ref,
+  ) => {
+    const nameId = useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState<
+      string | undefined
+    >(defaultValue);
+
+    let onValueChange = onChange;
+    if (!isControlled) {
+      onValueChange = (newValue: string) => {
+        setUncontrolledValue(newValue);
+        onChange?.(newValue);
+      };
+      value = uncontrolledValue;
+    }
+
+    return (
+      <div
+        {...rest}
+        className={cn(classes.toggleGroupContainer, rest.className)}
+        ref={ref}
+      >
+        <ToggleGroupContext.Provider
+          value={{
+            value,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+            size,
+          }}
+        >
+          <RovingTabindexRoot
+            as='div'
+            valueId={value}
+            className={classes.groupContent}
+            role='radiogroup'
+          >
+            {children}
+          </RovingTabindexRoot>
+        </ToggleGroupContext.Provider>
+      </div>
+    );
+  },
+);
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.module.css b/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.module.css
new file mode 100644
index 0000000000..ff805e0589
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.module.css
@@ -0,0 +1,15 @@
+.toggleGroupItem.small {
+  padding: var(--fds-spacing-1) var(--fds-spacing-2);
+}
+
+.toggleGroupItem.medium {
+  padding: var(--fds-spacing-2) var(--fds-spacing-3);
+}
+
+.toggleGroupItem.large {
+  padding: var(--fds-spacing-2) var(--fds-spacing-3);
+}
+
+.toggleGroupItem:focus-visible {
+  z-index: 1;
+}
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx b/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx
new file mode 100644
index 0000000000..6476b587a7
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx
@@ -0,0 +1,47 @@
+import type { ButtonHTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import { Button } from '../../Button';
+import { RovingTabindexItem } from '../../../utility-components/RovingTabIndex';
+
+import classes from './ToggleGroupItem.module.css';
+import { useToggleGroupItem } from './useToggleGroupitem';
+
+export type ToggleGroupItemProps = {
+  /** The value of the ToggleGroupItem. If not set, the string value of the items children will be used. */
+  value?: string;
+  /** Icon to be displayed on the ToggleGroupItem */
+  icon?: React.ReactNode;
+  /** The text to be displayed on the ToggleGroupItem */
+  children?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'children'>;
+
+export const ToggleGroupItem = forwardRef<
+  HTMLButtonElement,
+  ToggleGroupItemProps
+>((props, ref) => {
+  const { children, icon, ...rest } = props;
+  const { active, size = 'medium', buttonProps } = useToggleGroupItem(props);
+  return (
+    <RovingTabindexItem
+      {...rest}
+      {...buttonProps}
+      className={cn(
+        children && classes[size],
+        classes.toggleGroupItem,
+        rest.className,
+      )}
+      as={Button}
+      value={rest.value}
+      icon={icon}
+      color='first'
+      variant={active ? 'filled' : 'quiet'}
+      size={size}
+      iconPlacement='left'
+      ref={ref}
+    >
+      {children}
+    </RovingTabindexItem>
+  );
+});
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.ts b/packages/react/src/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.ts
new file mode 100644
index 0000000000..cc247c279b
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.ts
@@ -0,0 +1,43 @@
+import { useContext, useId } from 'react';
+
+import { ToggleGroupContext } from '../ToggleGroup';
+import type { ButtonProps } from '../../Button';
+
+import type { ToggleGroupItemProps } from './ToggleGroupItem';
+
+type UseToggleGroupItem = (props: ToggleGroupItemProps) => {
+  active: boolean;
+  size?: 'small' | 'medium' | 'large';
+  buttonProps?: Pick<
+    ButtonProps,
+    'id' | 'onClick' | 'role' | 'aria-checked' | 'aria-current' | 'name'
+  >;
+};
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingTabIndex` */
+export const useToggleGroupItem: UseToggleGroupItem = (
+  props: ToggleGroupItemProps,
+) => {
+  const { ...rest } = props;
+  const toggleGroup = useContext(ToggleGroupContext);
+  const itemValue =
+    props.value ?? (typeof props.children === 'string' ? props.children : '');
+  const active = toggleGroup.value == itemValue;
+  const buttonId = `togglegroup-item-${useId()}`;
+
+  return {
+    ...rest,
+    active: active,
+    size: toggleGroup?.size,
+    buttonProps: {
+      id: buttonId,
+      'aria-checked': active,
+      'aria-current': active,
+      role: 'radio',
+      name: toggleGroup.name,
+      onClick: () => {
+        toggleGroup.onChange?.(itemValue);
+      },
+    },
+  };
+};
diff --git a/packages/react/src/components/ToggleGroup/index.ts b/packages/react/src/components/ToggleGroup/index.ts
new file mode 100644
index 0000000000..5aedd6a78f
--- /dev/null
+++ b/packages/react/src/components/ToggleGroup/index.ts
@@ -0,0 +1,17 @@
+import { ToggleGroup as ToggleGroupRoot } from './ToggleGroup';
+import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem';
+
+export type { ToggleGroupProps } from './ToggleGroup';
+export type { ToggleGroupItemProps } from './ToggleGroupItem/ToggleGroupItem';
+
+type ToggleGroupComponent = typeof ToggleGroupRoot & {
+  Item: typeof ToggleGroupItem;
+};
+
+const ToggleGroup = ToggleGroupRoot as ToggleGroupComponent;
+
+ToggleGroup.Item = ToggleGroupItem;
+
+ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
index 831d41eb4e..1830300e98 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
@@ -13,6 +13,13 @@
   margin-bottom: var(--fdsc-bottom-spacing);
 }
 
+.errorMessage.large {
+  --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+  font: var(--fds-typography-error_message-large);
+  font-family: var(--fdsc-typography-font-family);
+}
+
 .errorMessage.medium {
   --fdsc-bottom-spacing: var(--fds-spacing-5);
 
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
index ed0d9fbefb..bf62c32f91 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
@@ -8,7 +8,7 @@ import classes from './ErrorMessage.module.css';
 
 export type ErrorMessageProps = {
   /** Changes text sizing */
-  size?: 'xsmall' | 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
   /** Adds margin-bottom */
   spacing?: boolean;
   /** Toggle error color */
diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx
new file mode 100644
index 0000000000..c123211dfc
--- /dev/null
+++ b/packages/react/src/components/form/CharacterCounter.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import utilityClasses from '../../utils/utility.module.css';
+import { ErrorMessage } from '../Typography';
+
+export type CharacterLimitProps = Omit<
+  CharacterCounterProps,
+  'id' | 'value' | 'size'
+>;
+
+type CharacterCounterProps = {
+  /** The message indicating the remaining character limit. */
+  label?: (count: number) => string;
+  /** The description of the maximum character limit for screen readers. */
+  srLabel?: string;
+  /** The maximum allowed character count. */
+  maxCount: number;
+  /** The current value. */
+  value: string;
+  /** The ID of the element that describes the maximum character limit for accessibility purposes. */
+  id: string;
+  /** Text size */
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
+};
+
+const defaultLabel: CharacterCounterProps['label'] = (count) =>
+  count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
+
+const defaultSrLabel = (maxCount: number) =>
+  `Tekstfelt med plass til ${maxCount} tegn`;
+
+export const CharacterCounter = ({
+  label = defaultLabel,
+  srLabel: propsSrLabel,
+  maxCount,
+  value,
+  id,
+  size,
+}: CharacterCounterProps): JSX.Element => {
+  const currentCount = maxCount - value.length;
+  const hasExceededLimit = value.length > maxCount;
+  const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
+
+  return (
+    <>
+      <span
+        className={utilityClasses.visuallyHidden}
+        id={id}
+      >
+        {srLabel}
+      </span>
+      <ErrorMessage
+        as='span'
+        size={size}
+        aria-live={hasExceededLimit ? 'polite' : 'off'}
+        error={hasExceededLimit}
+      >
+        {label(currentCount)}
+      </ErrorMessage>
+    </>
+  );
+};
diff --git a/packages/react/src/components/form/Checkbox/index.ts b/packages/react/src/components/form/Checkbox/index.ts
index 985e7afe60..8069d15009 100644
--- a/packages/react/src/components/form/Checkbox/index.ts
+++ b/packages/react/src/components/form/Checkbox/index.ts
@@ -26,4 +26,4 @@ Checkbox.Group.displayName = 'Checkbox.Group';
 
 export type { CheckboxProps, CheckboxGroupProps };
 
-export { Checkbox };
+export { Checkbox, CheckboxGroup };
diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
index f761062569..6716367d70 100644
--- a/packages/react/src/components/form/Fieldset/Fieldset.tsx
+++ b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -5,17 +5,15 @@ import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { Label, Paragraph, ErrorMessage } from '../../Typography';
 import utilityclasses from '../../../utils/utility.module.css';
+import type { FormFieldProps } from '../useFormField';
 
 import { useFieldset } from './useFieldset';
 import classes from './Fieldset.module.css';
 
-export type FieldsetContextType = {
-  error?: ReactNode;
-  errorId?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: 'xsmall' | 'small' | 'medium';
-};
+export type FieldsetContextType = Pick<
+  FormFieldProps,
+  'error' | 'errorId' | 'disabled' | 'readOnly' | 'size'
+>;
 
 export const FieldsetContext = createContext<FieldsetContextType | null>(null);
 
@@ -28,14 +26,13 @@ export type FieldsetProps = {
   error?: ReactNode;
   /** The legend of the fieldset. */
   legend?: ReactNode;
-  /** The size of the fieldset. */
-  size?: 'xsmall' | 'small' | 'medium';
   /** Toggle `readOnly` on fieldset context.
    * @note This does not prevent fieldset values from being submited */
   readOnly?: boolean;
   /** Visually hide `legend` and `description` (still available for screen readers)  */
   hideLegend?: boolean;
-} & FieldsetHTMLAttributes<HTMLFieldSetElement>;
+} & Pick<FormFieldProps, 'size'> &
+  FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {
diff --git a/packages/react/src/components/form/Radio/index.ts b/packages/react/src/components/form/Radio/index.ts
index f0de6d81f7..33a118a8dc 100644
--- a/packages/react/src/components/form/Radio/index.ts
+++ b/packages/react/src/components/form/Radio/index.ts
@@ -24,4 +24,4 @@ Radio.Group.displayName = 'Radio.Group';
 
 export type { RadioProps, RadioGroupProps };
 
-export { Radio };
+export { Radio, RadioGroup };
diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx
new file mode 100644
index 0000000000..f1c800787c
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/Textarea.mdx
@@ -0,0 +1,22 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../../docs-components';
+import * as TextareaStories from './Textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+<Primary />
+<Controls />
+
+## Antall tegn
+
+<Canvas of={TextareaStories.WithCharacterCounter} />
+
+## Kontrollert
+
+<Canvas of={TextareaStories.Controlled} />
+
+## Full bredde
+
+<Canvas of={TextareaStories.FullWidth} />
diff --git a/packages/react/src/components/form/Textarea/Textarea.module.css b/packages/react/src/components/form/Textarea/Textarea.module.css
new file mode 100644
index 0000000000..c2f3915f63
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/Textarea.module.css
@@ -0,0 +1,78 @@
+.formField {
+  display: grid;
+  gap: var(--fds-spacing-2);
+}
+
+.padlock {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+
+.errorMessage:empty {
+  display: none;
+}
+
+.label {
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--fds-spacing-1);
+  align-items: center;
+}
+
+.description {
+  color: var(--fds-semantic-text-neutral-subtle);
+  margin-top: calc(var(--fds-spacing-2) * -1);
+}
+
+.textarea {
+  font: inherit;
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 1 auto;
+  min-height: 2.5em;
+  width: 100%;
+  appearance: none;
+  padding: var(--fds-spacing-3);
+  border: solid 1px var(--fds-semantic-border-action-dark);
+  border-radius: var(--fds-border_radius-medium);
+  resize: vertical;
+}
+
+.textarea.xsmall,
+.textarea.small {
+  padding: var(--fds-spacing-2);
+}
+
+.textarea.medium {
+  padding: var(--fds-spacing-3);
+}
+
+.textarea.large {
+  padding: var(--fds-spacing-4);
+}
+
+.disabled {
+  opacity: 0.3;
+}
+
+.disabled .textarea {
+  cursor: not-allowed;
+}
+
+.readonly .textarea {
+  background: var(--fds-semantic-surface-neutral-subtle);
+  border-color: var(--fds-semantic-border-neutral-default);
+}
+
+.error > .textarea:not(:focus-visible) {
+  border-color: var(--fds-semantic-border-danger-default);
+  box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .textarea:not(:focus-visible, :disabled):hover {
+    border-color: var(--fds-semantic-border-action-hover);
+    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-action-hover);
+  }
+}
diff --git a/packages/react/src/components/form/Textarea/Textarea.stories.tsx b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000000..ff738ba3e3
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Button, Paragraph } from '../..';
+
+import { Textarea } from '.';
+
+type Story = StoryObj<typeof Textarea>;
+
+export default {
+  title: 'Felles/Textarea',
+  component: Textarea,
+} as Meta;
+
+export const Preview: Story = {
+  args: {
+    label: 'Label',
+    disabled: false,
+    readOnly: false,
+    size: 'medium',
+    description: '',
+    error: '',
+    cols: 40,
+  },
+};
+
+export const WithCharacterCounter: Story = {
+  args: {
+    label: 'Label',
+    cols: 40,
+    characterLimit: {
+      maxCount: 5,
+    },
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    label: 'Label',
+    rows: 10,
+    cols: 40,
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export const Controlled: StoryFn<typeof Textarea> = () => {
+  const [value, setValue] = useState<string>();
+  return (
+    <>
+      <Paragraph>Du har skrevet inn: {value}</Paragraph>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          marginTop: 'var(--fds-spacing-2)',
+          gap: 'var(--fds-spacing-2)',
+        }}
+      >
+        <Textarea
+          label='Kontroller meg!'
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          cols={40}
+        />
+        <Button onClick={() => setValue('Pizza')}>Jeg vil ha Pizza</Button>
+      </div>
+    </>
+  );
+};
diff --git a/packages/react/src/components/form/Textarea/Textarea.test.tsx b/packages/react/src/components/form/Textarea/Textarea.test.tsx
new file mode 100644
index 0000000000..41934fe19c
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/Textarea.test.tsx
@@ -0,0 +1,136 @@
+import { render as renderRtl, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+import type { TextareaProps } from './Textarea';
+import { Textarea } from './Textarea';
+
+const user = userEvent.setup();
+
+describe('Textarea', () => {
+  test('has correct value and label', () => {
+    render({ value: 'test', label: 'label' });
+    expect(screen.getByLabelText('label')).toBeDefined();
+    expect(screen.getByDisplayValue('test')).toBeDefined();
+  });
+
+  test('has correct description', () => {
+    render({ description: 'description' });
+    expect(
+      screen.getByRole('textbox', { description: 'description' }),
+    ).toBeDefined();
+  });
+
+  test('has correct description and label when label is hidden', () => {
+    render({ description: 'description', label: 'label', hideLabel: true });
+
+    expect(screen.getByLabelText('label')).toBeDefined();
+    expect(
+      screen.getByRole('textbox', { description: 'description' }),
+    ).toBeDefined();
+  });
+
+  test('is invalid with correct error message', () => {
+    render({ error: 'error-message' });
+
+    const textarea = screen.getByRole('textbox', {
+      description: 'error-message',
+    });
+    expect(textarea).toBeDefined();
+    expect(textarea).toBeInvalid();
+  });
+  test('is invalid with correct error message from errorId', () => {
+    renderRtl(
+      <>
+        <span id='my-error'>my error message</span>
+        <Textarea
+          errorId='my-error'
+          error
+        />
+      </>,
+    );
+
+    const textarea = screen.getByRole('textbox', {
+      description: 'my error message',
+    });
+    expect(textarea).toBeDefined();
+    expect(textarea).toBeInvalid();
+  });
+  it('should have max allowed characters label for screen readers', () => {
+    render({
+      characterLimit: {
+        maxCount: 10,
+        srLabel: 'Max 10 characters is allowed',
+        label: (count: number) => `${count} characters remaining`,
+      },
+    });
+    const screenReaderText = screen.getByText('Max 10 characters is allowed');
+    expect(screenReaderText).toBeInTheDocument();
+  });
+
+  it('should countdown remaining characters', async () => {
+    const user = userEvent.setup();
+    render({
+      label: 'First name',
+      characterLimit: {
+        maxCount: 10,
+        label: (count: number) => `${count} characters remaining`,
+        srLabel: 'characters remaining',
+      },
+    });
+    const textareaField = screen.getByLabelText('First name');
+    await user.type(textareaField, 'Peter');
+    expect(screen.getByText('5 characters remaining')).toBeInTheDocument();
+  });
+
+  it('Triggers onBlur event when field loses focus', async () => {
+    const onBlur = jest.fn();
+    render({ onBlur });
+    const element = screen.getByRole('textbox');
+    await user.click(element);
+    expect(element).toHaveFocus();
+    await user.tab();
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('Triggers onChange event for each keystroke', async () => {
+    const onChange = jest.fn();
+    const data = 'test';
+    render({ onChange });
+    const element = screen.getByRole('textbox');
+    await user.click(element);
+    expect(element).toHaveFocus();
+    await user.keyboard(data);
+    expect(onChange).toHaveBeenCalledTimes(data.length);
+  });
+
+  it('Sets given id on textarea field', () => {
+    const id = 'some-unique-id';
+    render({ id });
+    expect(screen.getByRole('textbox')).toHaveAttribute('id', id);
+  });
+
+  it('Focuses on textarea field when label is clicked and id is not given', async () => {
+    const label = 'Lorem ipsum';
+    render({ label });
+    await user.click(screen.getByText(label));
+    expect(screen.getByRole('textbox')).toHaveFocus();
+  });
+
+  it('Focuses on textarea field when label is clicked and id is given', async () => {
+    const label = 'Lorem ipsum';
+    render({ id: 'some-unique-id', label });
+    await user.click(screen.getByText(label));
+    expect(screen.getByRole('textbox')).toHaveFocus();
+  });
+});
+
+const render = (props: Partial<TextareaProps> = {}) =>
+  renderRtl(
+    <Textarea
+      {...{
+        onChange: jest.fn(),
+        ...props,
+      }}
+    />,
+  );
diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
new file mode 100644
index 0000000000..95cf378a66
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -0,0 +1,145 @@
+import type { ReactNode, TextareaHTMLAttributes } from 'react';
+import React, { useState, forwardRef } from 'react';
+import cn from 'classnames';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+
+import { omit } from '../../../utils';
+import { Label, Paragraph, ErrorMessage } from '../../Typography';
+import type { FormFieldProps } from '../useFormField';
+import type { CharacterLimitProps } from '../CharacterCounter';
+import { CharacterCounter } from '../CharacterCounter';
+
+import { useTextarea } from './useTextarea';
+import classes from './Textarea.module.css';
+import utilityClasses from './../../../utils/utility.module.css';
+
+export type TextareaProps = {
+  /** Label */
+  label?: ReactNode;
+  /** Visually hides `label` and `description` (still available for screen readers)  */
+  hideLabel?: boolean;
+  /** Changes field size and paddings */
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
+
+  /**
+   *  The characterLimit function calculates remaining characters based on `maxCount`
+   *
+   *  Provide a `label` function that takes count as parameter and returns a message.
+   *
+   *  Use `srLabel` to describe `maxCount` for screen readers.
+   *
+   *  Defaults to Norwegian if no labels are provided.
+   */
+  characterLimit?: CharacterLimitProps;
+} & Omit<FormFieldProps, 'size'> &
+  Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+
+/** Textarea field
+ *
+ * @example
+ * ```tsx
+ * <Textarea label="Textarea label">
+ * ```
+ */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { label, description, style, characterLimit, hideLabel, ...rest } =
+      props;
+
+    const {
+      textareaProps,
+      descriptionId,
+      hasError,
+      errorId,
+      size = 'medium',
+      readOnly,
+    } = useTextarea(props);
+
+    const [value, setValue] = useState(props.defaultValue);
+    const characterLimitId = `${textareaProps.id}-charactercount}`;
+    const hasCharacterLimit = characterLimit != null;
+
+    const describedBy = cn(
+      textareaProps['aria-describedby'],
+      hasCharacterLimit && characterLimitId,
+    );
+
+    return (
+      <Paragraph
+        as='div'
+        size={size}
+        style={style}
+        className={cn(
+          classes.formField,
+          textareaProps.disabled && classes.disabled,
+          readOnly && classes.readonly,
+          rest.className,
+        )}
+      >
+        {label && (
+          <Label
+            size={size}
+            weight='medium'
+            htmlFor={textareaProps.id}
+            className={cn(
+              classes.label,
+              hideLabel && utilityClasses.visuallyHidden,
+            )}
+          >
+            {readOnly && (
+              <PadlockLockedFillIcon
+                aria-hidden
+                className={classes.padlock}
+              />
+            )}
+            <span>{label}</span>
+          </Label>
+        )}
+        {description && (
+          <Paragraph
+            id={descriptionId}
+            as='div'
+            size={size}
+            className={cn(
+              classes.description,
+              hideLabel && utilityClasses.visuallyHidden,
+            )}
+          >
+            {description}
+          </Paragraph>
+        )}
+        <textarea
+          {...omit(['size', 'error', 'errorId'], rest)}
+          {...textareaProps}
+          className={cn(
+            classes.textarea,
+            utilityClasses.focusable,
+            classes[size],
+          )}
+          ref={ref}
+          aria-describedby={describedBy}
+          onChange={(e) => {
+            textareaProps?.onChange?.(e);
+            setValue(e.target.value);
+          }}
+        />
+        {hasCharacterLimit && (
+          <CharacterCounter
+            size={size}
+            value={value ? value.toString() : ''}
+            id={characterLimitId}
+            {...characterLimit}
+          />
+        )}
+        <div
+          className={classes.errorMessage}
+          id={errorId}
+          aria-live='polite'
+          aria-relevant='additions removals'
+        >
+          {hasError && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        </div>
+      </Paragraph>
+    );
+  },
+);
diff --git a/packages/react/src/components/form/Textarea/index.ts b/packages/react/src/components/form/Textarea/index.ts
new file mode 100644
index 0000000000..6449a4197e
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/index.ts
@@ -0,0 +1 @@
+export * from './Textarea';
diff --git a/packages/react/src/components/form/Textarea/useTextarea.ts b/packages/react/src/components/form/Textarea/useTextarea.ts
new file mode 100644
index 0000000000..8143ae7470
--- /dev/null
+++ b/packages/react/src/components/form/Textarea/useTextarea.ts
@@ -0,0 +1,46 @@
+import type { TextareaHTMLAttributes } from 'react';
+import { useContext } from 'react';
+
+import type { FormField } from '../useFormField';
+import { useFormField } from '../useFormField';
+import { FieldsetContext } from '../Fieldset';
+
+import type { TextareaProps } from './Textarea';
+
+type UseTextarea = (props: TextareaProps) => Omit<FormField, 'inputProps'> & {
+  textareaProps: Pick<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'readOnly' | 'name' | 'required' | 'onClick' | 'onChange'
+  > &
+    FormField['inputProps'];
+};
+
+/** Handles props for `Textarea` in context with `Fieldset` */
+export const useTextarea: UseTextarea = (props) => {
+  const fieldset = useContext(FieldsetContext);
+  const { inputProps, readOnly, ...rest } = useFormField(props, 'textarea');
+
+  return {
+    ...rest,
+    readOnly,
+    size: fieldset?.size ?? props.size,
+    textareaProps: {
+      ...inputProps,
+      readOnly,
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
+      onChange: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onChange?.(e);
+      },
+    },
+  };
+};
diff --git a/packages/react/src/components/form/Textfield/Textfield.mdx b/packages/react/src/components/form/Textfield/Textfield.mdx
new file mode 100644
index 0000000000..28eedb7072
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/Textfield.mdx
@@ -0,0 +1,22 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../../docs-components';
+import * as TextfieldStories from './Textfield.stories';
+
+<Meta of={TextfieldStories} />
+
+# Textfield
+
+<Primary />
+<Controls />
+
+## Antall tegn
+
+<Canvas of={TextfieldStories.WithCharacterCounter} />
+
+## Kontrollert
+
+<Canvas of={TextfieldStories.Controlled} />
+
+## Full bredde
+
+<Canvas of={TextfieldStories.FullWidth} />
diff --git a/packages/react/src/components/form/Textfield/Textfield.module.css b/packages/react/src/components/form/Textfield/Textfield.module.css
new file mode 100644
index 0000000000..3557142cda
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/Textfield.module.css
@@ -0,0 +1,125 @@
+.formField {
+  display: grid;
+  gap: var(--fds-spacing-2);
+}
+
+.adornment {
+  color: var(--fds-semantic-border-neutral-default);
+  background: var(--fds-semantic-surface-neutral-subtle);
+  padding: var(--fds-spacing-3);
+  border-radius: var(--fds-border_radius-medium);
+  border: solid 1px var(--fds-semantic-border-neutral-default);
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.label {
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--fds-spacing-1);
+  align-items: center;
+}
+
+.description {
+  color: var(--fds-semantic-text-neutral-subtle);
+  margin-top: calc(var(--fds-spacing-2) * -1);
+}
+
+.input {
+  font: inherit;
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 1 auto;
+  min-height: 2.5em;
+  width: 100%;
+  appearance: none;
+  padding: 0 var(--fds-spacing-3);
+  border: solid 1px var(--fds-semantic-border-action-dark);
+  border-radius: var(--fds-border_radius-medium);
+}
+
+.input.xsmall,
+.input.small {
+  padding: 0 var(--fds-spacing-2);
+}
+
+.input.medium {
+  padding: 0 var(--fds-spacing-3);
+}
+
+.input.large {
+  padding: 0 var(--fds-spacing-4);
+}
+
+.disabled {
+  opacity: 0.3;
+}
+
+.disabled .input {
+  cursor: not-allowed;
+}
+
+.readonly .input {
+  background: var(--fds-semantic-surface-neutral-subtle);
+  border-color: var(--fds-semantic-border-neutral-default);
+}
+
+.error > .input:not(:focus-visible) {
+  border-color: var(--fds-semantic-border-danger-default);
+  box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .input:not(:focus-visible, :disabled):hover {
+    border-color: var(--fds-semantic-border-action-hover);
+    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-action-hover);
+  }
+}
+
+.inputPrefix {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.inputSuffix {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.prefix {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.suffix {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.field {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--fds-border_radius-medium);
+}
+
+.field > *:first-child {
+  border-top-left-radius: var(--fds-border_radius-medium);
+  border-bottom-left-radius: var(--fds-border_radius-medium);
+}
+
+.field > *:last-child {
+  border-top-right-radius: var(--fds-border_radius-medium);
+  border-bottom-right-radius: var(--fds-border_radius-medium);
+}
+
+.padlock {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+
+.errorMessage:empty {
+  display: none;
+}
diff --git a/packages/react/src/components/form/Textfield/Textfield.stories.tsx b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
new file mode 100644
index 0000000000..81c8dd4481
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Button, Paragraph } from '../..';
+
+import { Textfield } from '.';
+
+type Story = StoryObj<typeof Textfield>;
+
+export default {
+  title: 'Felles/Textfield',
+  component: Textfield,
+} as Meta;
+
+export const Preview: Story = {
+  args: {
+    label: 'Label',
+    disabled: false,
+    readOnly: false,
+    size: 'medium',
+    description: '',
+  },
+};
+
+export const WithCharacterCounter: Story = {
+  args: {
+    label: 'Label',
+    characterLimit: {
+      maxCount: 5,
+    },
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    label: 'Label',
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export const Controlled: StoryFn<typeof Textfield> = () => {
+  const [value, setValue] = useState<string>();
+  return (
+    <>
+      <Paragraph>Du har skrevet inn: {value}</Paragraph>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'end',
+          marginTop: 'var(--fds-spacing-2)',
+          gap: 'var(--fds-spacing-2)',
+        }}
+      >
+        <Textfield
+          label='Kontroller meg!'
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Button onClick={() => setValue('Kake')}>Jeg vil ha Kake</Button>
+      </div>
+    </>
+  );
+};
diff --git a/packages/react/src/components/form/Textfield/Textfield.test.tsx b/packages/react/src/components/form/Textfield/Textfield.test.tsx
new file mode 100644
index 0000000000..0b41200576
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/Textfield.test.tsx
@@ -0,0 +1,145 @@
+import { render as renderRtl, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+import type { TextfieldProps } from './Textfield';
+import { Textfield } from './Textfield';
+
+const user = userEvent.setup();
+
+describe('Textfield', () => {
+  test('has correct value and label', () => {
+    render({ value: 'test', label: 'label' });
+    expect(screen.getByLabelText('label')).toBeDefined();
+    expect(screen.getByDisplayValue('test')).toBeDefined();
+  });
+
+  test('has correct description', () => {
+    render({ description: 'description' });
+    expect(
+      screen.getByRole('textbox', { description: 'description' }),
+    ).toBeDefined();
+  });
+
+  test('has correct description and label when label is hidden', () => {
+    render({ description: 'description', label: 'label', hideLabel: true });
+
+    expect(screen.getByLabelText('label')).toBeDefined();
+    expect(
+      screen.getByRole('textbox', { description: 'description' }),
+    ).toBeDefined();
+  });
+
+  test('is invalid with correct error message', () => {
+    render({ error: 'error-message' });
+
+    const input = screen.getByRole('textbox', { description: 'error-message' });
+    expect(input).toBeDefined();
+    expect(input).toBeInvalid();
+  });
+  test('is invalid with correct error message from errorId', () => {
+    renderRtl(
+      <>
+        <span id='my-error'>my error message</span>
+        <Textfield
+          errorId='my-error'
+          error
+        />
+      </>,
+    );
+
+    const input = screen.getByRole('textbox', {
+      description: 'my error message',
+    });
+    expect(input).toBeDefined();
+    expect(input).toBeInvalid();
+  });
+  it('should have max allowed characters label for screen readers', () => {
+    render({
+      characterLimit: {
+        maxCount: 10,
+        srLabel: 'Max 10 characters is allowed',
+        label: (count: number) => `${count} characters remaining`,
+      },
+    });
+    const screenReaderText = screen.getByText('Max 10 characters is allowed');
+    expect(screenReaderText).toBeInTheDocument();
+  });
+
+  it('should countdown remaining characters', async () => {
+    const user = userEvent.setup();
+    render({
+      label: 'First name',
+      characterLimit: {
+        maxCount: 10,
+        label: (count: number) => `${count} characters remaining`,
+        srLabel: 'characters remaining',
+      },
+    });
+    const inputField = screen.getByLabelText('First name');
+    await user.type(inputField, 'Peter');
+    expect(screen.getByText('5 characters remaining')).toBeInTheDocument();
+  });
+
+  it('Triggers onBlur event when field loses focus', async () => {
+    const onBlur = jest.fn();
+    render({ onBlur });
+    const element = screen.getByRole('textbox');
+    await user.click(element);
+    expect(element).toHaveFocus();
+    await user.tab();
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('Triggers onChange event for each keystroke', async () => {
+    const onChange = jest.fn();
+    const data = 'test';
+    render({ onChange });
+    const element = screen.getByRole('textbox');
+    await user.click(element);
+    expect(element).toHaveFocus();
+    await user.keyboard(data);
+    expect(onChange).toHaveBeenCalledTimes(data.length);
+  });
+
+  it('Sets given id on input field', () => {
+    const id = 'some-unique-id';
+    render({ id });
+    expect(screen.getByRole('textbox')).toHaveAttribute('id', id);
+  });
+
+  it('Focuses on input field when label is clicked and id is not given', async () => {
+    const label = 'Lorem ipsum';
+    render({ label });
+    await user.click(screen.getByText(label));
+    expect(screen.getByRole('textbox')).toHaveFocus();
+  });
+
+  it('Focuses on input field when label is clicked and id is given', async () => {
+    const label = 'Lorem ipsum';
+    render({ id: 'some-unique-id', label });
+    await user.click(screen.getByText(label));
+    expect(screen.getByRole('textbox')).toHaveFocus();
+  });
+
+  it('Has type attribute set to "text" by default', () => {
+    render();
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
+  });
+
+  it('Has given type attribute if set', () => {
+    const type = 'tel';
+    render({ type });
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', type);
+  });
+});
+
+const render = (props: Partial<TextfieldProps> = {}) =>
+  renderRtl(
+    <Textfield
+      {...{
+        onChange: jest.fn(),
+        ...props,
+      }}
+    />,
+  );
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
new file mode 100644
index 0000000000..3337793afd
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -0,0 +1,199 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import React, { useState, useId, forwardRef } from 'react';
+import cn from 'classnames';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+
+import { omit } from '../../../utils';
+import { Label, Paragraph, ErrorMessage } from '../../Typography';
+import type { FormFieldProps } from '../useFormField';
+import type { CharacterLimitProps } from '../CharacterCounter';
+import { CharacterCounter } from '../CharacterCounter';
+
+import { useTextfield } from './useTextfield';
+import classes from './Textfield.module.css';
+import utilityClasses from './../../../utils/utility.module.css';
+
+export type TextfieldProps = {
+  /** Label */
+  label?: ReactNode;
+  /** Visually hides `label` and `description` (still available for screen readers)  */
+  hideLabel?: boolean;
+  /** Changes field size and paddings */
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
+  /** Prefix for field. */
+  prefix?: string;
+  /** Suffix for field. */
+  suffix?: string;
+  /** Supported `input` types */
+  type?:
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'file'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week';
+  /**
+   *  The characterLimit function calculates remaining characters based on `maxCount`
+   *
+   *  Provide a `label` function that takes count as parameter and returns a message.
+   *
+   *  Use `srLabel` to describe `maxCount` for screen readers.
+   *
+   *  Defaults to Norwegian if no labels are provided.
+   */
+  characterLimit?: CharacterLimitProps;
+} & Omit<FormFieldProps, 'size'> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+/** Text input field
+ *
+ * @example
+ * ```tsx
+ * <Textfield label="Textfield label">
+ * ```
+ */
+export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
+  (props, ref) => {
+    const {
+      label,
+      description,
+      suffix,
+      prefix,
+      style,
+      characterLimit,
+      hideLabel,
+      type = 'text',
+      ...rest
+    } = props;
+
+    const {
+      inputProps,
+      descriptionId,
+      hasError,
+      errorId,
+      size = 'medium',
+      readOnly,
+    } = useTextfield(props);
+
+    const [inputValue, setInputValue] = useState(props.defaultValue);
+    const characterLimitId = `textfield-charactercount-${useId()}`;
+    const hasCharacterLimit = characterLimit != null;
+
+    const describedBy = cn(
+      inputProps['aria-describedby'],
+      hasCharacterLimit && characterLimitId,
+    );
+
+    return (
+      <Paragraph
+        as='div'
+        size={size}
+        style={style}
+        className={cn(
+          classes.formField,
+          inputProps.disabled && classes.disabled,
+          readOnly && classes.readonly,
+          rest.className,
+        )}
+      >
+        {label && (
+          <Label
+            size={size}
+            weight='medium'
+            htmlFor={inputProps.id}
+            className={cn(
+              classes.label,
+              hideLabel && utilityClasses.visuallyHidden,
+            )}
+          >
+            {readOnly && (
+              <PadlockLockedFillIcon
+                aria-hidden
+                className={classes.padlock}
+              />
+            )}
+            <span>{label}</span>
+          </Label>
+        )}
+        {description && (
+          <Paragraph
+            id={descriptionId}
+            as='div'
+            size={size}
+            className={cn(
+              classes.description,
+              hideLabel && utilityClasses.visuallyHidden,
+            )}
+          >
+            {description}
+          </Paragraph>
+        )}
+        <div className={cn(classes.field, hasError && classes.error)}>
+          {prefix && (
+            <Paragraph
+              as='div'
+              size={size}
+              className={cn(classes.adornment, classes.prefix)}
+              aria-hidden='true'
+              short
+            >
+              {prefix}
+            </Paragraph>
+          )}
+          <input
+            {...omit(['size', 'error', 'errorId'], rest)}
+            {...inputProps}
+            className={cn(
+              classes.input,
+              classes[size],
+              utilityClasses.focusable,
+              prefix && classes.inputPrefix,
+              suffix && classes.inputSuffix,
+            )}
+            ref={ref}
+            type={type}
+            aria-describedby={describedBy}
+            onChange={(e) => {
+              inputProps?.onChange?.(e);
+              setInputValue(e.target.value);
+            }}
+          />
+          {suffix && (
+            <Paragraph
+              as='div'
+              size={size}
+              className={cn(classes.adornment, classes.suffix)}
+              aria-hidden='true'
+              short
+            >
+              {suffix}
+            </Paragraph>
+          )}
+        </div>
+        {hasCharacterLimit && (
+          <CharacterCounter
+            size={size}
+            value={inputValue ? inputValue.toString() : ''}
+            id={characterLimitId}
+            {...characterLimit}
+          />
+        )}
+        <div
+          className={classes.errorMessage}
+          id={errorId}
+          aria-live='polite'
+          aria-relevant='additions removals'
+        >
+          {hasError && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        </div>
+      </Paragraph>
+    );
+  },
+);
diff --git a/packages/react/src/components/form/Textfield/index.ts b/packages/react/src/components/form/Textfield/index.ts
new file mode 100644
index 0000000000..4ece73e0b9
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/index.ts
@@ -0,0 +1 @@
+export * from './Textfield';
diff --git a/packages/react/src/components/form/Textfield/useTextfield.ts b/packages/react/src/components/form/Textfield/useTextfield.ts
new file mode 100644
index 0000000000..d3e50c436a
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/useTextfield.ts
@@ -0,0 +1,44 @@
+import type { InputHTMLAttributes } from 'react';
+import { useContext } from 'react';
+
+import type { FormField } from '../useFormField';
+import { useFormField } from '../useFormField';
+import { FieldsetContext } from '../Fieldset';
+
+import type { TextfieldProps } from './Textfield';
+
+type UseTextfield = (props: TextfieldProps) => FormField & {
+  inputProps?: Pick<
+    InputHTMLAttributes<HTMLInputElement>,
+    'readOnly' | 'type' | 'name' | 'required' | 'onClick' | 'onChange'
+  >;
+};
+/** Handles props for `Textfield` in context with `Fieldset` */
+export const useTextfield: UseTextfield = (props) => {
+  const fieldset = useContext(FieldsetContext);
+  const { inputProps, readOnly, ...rest } = useFormField(props, 'textfield');
+
+  return {
+    ...rest,
+    readOnly,
+    size: fieldset?.size ?? props.size,
+    inputProps: {
+      ...inputProps,
+      readOnly,
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
+      onChange: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onChange?.(e);
+      },
+    },
+  };
+};
diff --git a/packages/react/src/components/form/useFormField.ts b/packages/react/src/components/form/useFormField.ts
index e44806270d..6529b25487 100644
--- a/packages/react/src/components/form/useFormField.ts
+++ b/packages/react/src/components/form/useFormField.ts
@@ -20,20 +20,20 @@ export type FormFieldProps = {
   /** Toggle `readOnly` */
   readOnly?: boolean;
   /** Changes field size and paddings */
-  size?: 'xsmall' | 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
 } & Pick<HTMLAttributes<HTMLElement>, 'aria-describedby'>;
 
 export type FormField = {
   hasError: boolean;
   errorId: string;
   descriptionId: string;
-  inputProps: Pick<
+  inputProps: {
+    id: string;
+  } & Pick<
     InputHTMLAttributes<HTMLInputElement>,
-    'id' | 'disabled' | 'aria-invalid' | 'aria-describedby'
+    'disabled' | 'aria-invalid' | 'aria-describedby'
   >;
-  readOnly?: boolean;
-  size?: 'xsmall' | 'small' | 'medium';
-};
+} & Pick<FormFieldProps, 'size' | 'readOnly'>;
 
 /**
  * Handles props and their state for various form-fields in context with Fieldset
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 58a7d47ecb..a464a715ac 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -3,19 +3,19 @@ export * from './legacy/LegacyCheckbox';
 export * from './legacy/LegacyCheckboxGroup';
 export * from './legacy/LegacyRadioButton';
 export * from './legacy/LegacyRadioGroup';
+export * from './legacy/LegacyTextField';
+export * from './legacy/LegacyTextArea';
+export * from './legacy/LegacyToggleButtonGroup';
+export * from './legacy/LegacyTabs';
 
 export * from './Button';
-export * from './Tabs';
 export * from './HelpText';
 export * from './Popover';
 export * from './Select';
 export * from './Spinner';
-export * from './TextArea';
-export * from './TextField';
 export * from './Link';
 export * from './List';
 export * from './Table';
-export * from './ToggleButtonGroup';
 export * from './Typography/';
 export * from './Accordion';
 export * from './NativeSelect';
@@ -27,3 +27,5 @@ export * from './form/Checkbox';
 export * from './form/Radio';
 export * from './form/Fieldset';
 export * from './form/Switch';
+export * from './form/Textfield';
+export * from './form/Textarea';
diff --git a/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx b/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx
index c45b029f4c..5595236ed3 100644
--- a/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx
+++ b/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx
@@ -10,7 +10,7 @@ import { Controls, Primary } from '@storybook/blocks';
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Checkbox](/docs/felles-checkbox--docs) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Checkbox](/?path=/docs/felles-checkbox--docs) komponent.**'
 />
 
 `LegacyCheckbox` er en boks som brukeren kan krysse av i for bolske verdier. Den kan også brukes i en gruppe hvor brukeren kan velge flere verdier.
diff --git a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx
index 59b8630d5e..830b2fb1cb 100644
--- a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx
+++ b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx
@@ -80,7 +80,7 @@ export const Template = (args = {}) => (
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Checkbox.Group](/docs/felles-checkbox--docs#checkboxgroup) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Checkbox.Group](/?path=/docs/felles-checkbox--docs#checkboxgroup) komponent.**'
 />
 
 `LegacyCheckboxGroup` er en gruppe med sjekkbokser som gir brukeren mulighet til å velge flere verdier i en liste.
diff --git a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx
index 12408ca572..746748afac 100644
--- a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx
@@ -136,4 +136,9 @@ const LegacyCheckboxGroup = ({
 
 LegacyCheckboxGroup.displayName = 'LegacyCheckboxGroup';
 
+/**
+ *
+ * @note
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-checkbox-group--docs Checkbox.Group} component.
+ */
 export { LegacyCheckboxGroup };
diff --git a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx
index ad3e2ad41f..18e048ec67 100644
--- a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx
+++ b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx
@@ -8,7 +8,7 @@ import * as FieldSetStories from './FieldSet.stories';
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Fieldset](/docs/felles-fieldset--docs) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Fieldset](/?path=/docs/felles-fieldset--docs) komponent.**'
 />
 
 `LegacyFieldSet` brukes til å gruppere innhold i et skjema.
diff --git a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx
index 447273904f..d19d8e1ca7 100644
--- a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx
+++ b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { TextField } from '../../TextField';
+import { LegacyTextField } from '../LegacyTextField';
 
 import { LegacyFieldSet } from './FieldSet';
 
@@ -13,8 +13,8 @@ export default {
 export const Eksempel: StoryFn<typeof LegacyFieldSet> = (args) => (
   <LegacyFieldSet {...args}>
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <TextField label='Navn' />
-      <TextField
+      <LegacyTextField label='Navn' />
+      <LegacyTextField
         type='date'
         label='Fødselsdato'
       />
diff --git a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx
index ca29fb8465..629003da94 100644
--- a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx
+++ b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx
@@ -38,7 +38,7 @@ export type LegacyFieldSetProps = {
 /**
  *
  * @note
- * Will be replaced by new Fieldset component.
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-fieldset--docs Fieldset} component.
  */
 const LegacyFieldSet = forwardRef<HTMLFieldSetElement, LegacyFieldSetProps>(
   (
diff --git a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx
index 72b5a1f3dc..306501ad76 100644
--- a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx
+++ b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx
@@ -81,7 +81,7 @@ export const Template = (args = {}) => (
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Radio](/docs/felles-radio--docs) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Radio](/?path=/docs/felles-radio--docs) komponent.**'
 />
 
 `LegacyRadioButton` er en knapp som skal brukes i kombinasjon med andre radioknapper for å velge mellom flere alternativer.
diff --git a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx
index e4ab7b4d28..db9e00b493 100644
--- a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx
+++ b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx
@@ -26,7 +26,7 @@ export interface LegacyRadioButtonProps {
 /**
  *
  * @note
- * Will be replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio--docs Radio} component.
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio--docs Radio} component.
  */
 const LegacyRadioButton = forwardRef<HTMLInputElement, LegacyRadioButtonProps>(
   (
diff --git a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx
index 732d59f64a..385702fbef 100644
--- a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx
+++ b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx
@@ -83,7 +83,7 @@ export const Template = (args = {}) => (
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Radio.Group](/docs/felles-radio--docs#radiogroup) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Radio.Group](/?path=/docs/felles-radio--docs#radiogroup) komponent.**'
 />
 
 `LegacyRadioGroup` er en gruppe med radioknapper som gir brukeren mulighet til å velge ett av flere alternativer.
diff --git a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx
index fe2d76f6a7..84ab3125e2 100644
--- a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx
+++ b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx
@@ -33,7 +33,7 @@ export interface LegacyRadioGroupProps {
 /**
  *
  * @note
- * Will be replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio-group--docs Radio.Group} component.
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio-group--docs Radio.Group} component.
  */
 const LegacyRadioGroup = ({
   description,
diff --git a/packages/react/src/components/legacy/LegacyTabs/Tabs.mdx b/packages/react/src/components/legacy/LegacyTabs/Tabs.mdx
new file mode 100644
index 0000000000..bf1cd0d27c
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTabs/Tabs.mdx
@@ -0,0 +1,55 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../../docs-components';
+import * as TabsStories from './Tabs.stories';
+
+<Meta of={TabsStories} />
+
+# LegacyTabs
+
+<Information text='altinn' />
+
+## Egenskaper
+
+Egenskapen `items` er obligatorisk og skal inneholde en liste med `TabItem`-objekter.
+Disse objektene skal inneholde en `name`- og en `content`-egenskap.
+`name` er navnet som vises på selve fanen, mens `content` er innholdet som skal vises når fanen er aktiv.
+
+Objektene kan også inneholde en `value`-egenskap som kan brukes til å identifisere fanen.
+Dette er nyttig når man bruker `activeTab` og `onChange` til å kontrollere hva som vises.
+`activeTab` bestemmer hvilken fane som skal være aktiv, og `onChange` er en funksjon som kalles når en ny fane blir aktivert.
+Sistnevnte tar inn den gjeldende fanens `value` som parameter.
+Dersom `value` ikke er satt på fanene, vil `name` bli brukt som `value`.
+
+`TabItem` har også to ID-egenskaper, `tabId` og `panelId`, som kan brukes til å sette en ID på henholdsvis fanen og panelet.
+Disse blir automatisk generert dersom de ikke er satt.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```tsx
+import '@altinn/figma-design-tokens/dist/tokens.css'; // Importeres kun én gang i din applikasjon
+import { LegacyTabs } from '@digdir/design-system-react';
+
+<LegacyTabs
+  items={[
+    {
+      name: 'Donec finibus',
+      content: 'In vulputate libero et tellus.',
+    },
+    {
+      name: 'Curabitur a',
+      content: 'Nulla nec lobortis ipsum. Sed.',
+    },
+    {
+      name: 'Sed at',
+      content: 'Donec eu luctus dui, nec.',
+    },
+  ]}
+/>;
+```
+
+## Eksempel
+
+<Canvas of={TabsStories.Eksempel} />
diff --git a/packages/react/src/components/Tabs/Tabs.module.css b/packages/react/src/components/legacy/LegacyTabs/Tabs.module.css
similarity index 100%
rename from packages/react/src/components/Tabs/Tabs.module.css
rename to packages/react/src/components/legacy/LegacyTabs/Tabs.module.css
diff --git a/packages/react/src/components/legacy/LegacyTabs/Tabs.stories.tsx b/packages/react/src/components/legacy/LegacyTabs/Tabs.stories.tsx
new file mode 100644
index 0000000000..c8c531229c
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTabs/Tabs.stories.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { LegacyTabs } from './Tabs';
+
+export default {
+  title: 'Avviklet/LegacyTabs',
+  component: LegacyTabs,
+} as Meta;
+
+export const Eksempel: StoryFn<typeof LegacyTabs> = (args) => (
+  <LegacyTabs {...args} />
+);
+
+Eksempel.args = {
+  items: [
+    {
+      name: 'Ild',
+      content: (
+        <p>
+          Nulla nec rutrum libero. Curabitur lorem est, tempor nec iaculis in,
+          egestas eu lacus. Ut malesuada risus ut ipsum consequat mattis. Donec
+          quis nunc ut lorem suscipit pharetra. Nulla ornare sed nisl nec
+          facilisis. Sed in lacinia elit. Sed et eleifend nisi. Sed egestas
+          nulla lobortis sapien scelerisque, at venenatis risus elementum.
+          Aliquam eleifend, metus non molestie viverra, erat sem ornare enim,
+          nec suscipit nulla nisi vel dolor. Etiam volutpat sapien arcu. Orci
+          varius natoque penatibus et magnis dis parturient montes, nascetur
+          ridiculus mus. Nulla sollicitudin molestie leo sit amet faucibus. Sed
+          interdum condimentum interdum. Praesent volutpat turpis mattis purus
+          venenatis egestas. In iaculis condimentum fringilla. Duis dignissim
+          turpis mattis tristique vulputate.
+        </p>
+      ),
+    },
+    {
+      name: 'Jord',
+      content: (
+        <p>
+          Vestibulum nisl diam, tempus sit amet justo eu, semper facilisis
+          dolor. Proin scelerisque tellus sit amet consectetur condimentum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et
+          dui vehicula, semper arcu vitae, posuere odio. Pellentesque eu ante in
+          elit semper pellentesque. Donec cursus eros non diam condimentum
+          viverra. Pellentesque at odio lorem. Aenean ac enim et risus bibendum
+          scelerisque et a purus. Donec ultricies, ex et ornare fringilla,
+          turpis ex consectetur ante, ut porta libero metus quis magna. Nulla eu
+          hendrerit ex, non dapibus quam. Nulla dictum ligula tellus, et
+          elementum orci convallis sit amet. Class aptent taciti sociosqu ad
+          litora torquent per conubia nostra, per inceptos himenaeos. Fusce
+          dolor orci, sagittis vel elit eget, viverra ultrices nulla.
+        </p>
+      ),
+    },
+    {
+      name: 'Luft',
+      content: (
+        <p>
+          Integer dictum lacus vitae urna lobortis, scelerisque varius metus
+          maximus. Integer ornare pharetra metus, vel mattis urna. Interdum et
+          malesuada fames ac ante ipsum primis in faucibus. Nulla consectetur
+          ipsum ac magna sollicitudin, ac fermentum sem tempus. Proin rutrum
+          aliquam eros eu accumsan. Duis rhoncus urna a tellus sagittis, eu
+          aliquam dui pharetra. Praesent eu libero consectetur, varius urna
+          quis, volutpat magna. Vivamus ornare magna at vehicula pulvinar.
+          Curabitur risus lorem, placerat sit amet mollis venenatis, placerat
+          sed ligula. Donec pellentesque quis est nec viverra. Sed ultricies
+          aliquam nunc, sit amet faucibus augue tempor quis. Pellentesque
+          porttitor sapien quis risus placerat, in facilisis augue molestie.
+        </p>
+      ),
+    },
+    {
+      name: 'Vann',
+      content: (
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel
+          leo nibh. Fusce neque nulla, semper quis rutrum eu, volutpat nec
+          mauris. In lacinia iaculis venenatis. Aliquam pulvinar lectus lorem, a
+          congue nulla dictum vel. Donec augue eros, cursus ut porta eu, mollis
+          sodales odio. Vestibulum rutrum sollicitudin nisi, sed facilisis nibh
+          dictum at. Nulla arcu mi, iaculis quis luctus at, vulputate hendrerit
+          quam. Suspendisse condimentum pellentesque varius. Nullam molestie
+          dictum pellentesque. Nunc felis sem, elementum a sapien a, consectetur
+          ullamcorper tellus. Nullam porta tempus nisl, in vehicula quam congue
+          eget.
+        </p>
+      ),
+    },
+  ],
+};
diff --git a/packages/react/src/components/legacy/LegacyTabs/Tabs.test.tsx b/packages/react/src/components/legacy/LegacyTabs/Tabs.test.tsx
new file mode 100644
index 0000000000..0190b7a524
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTabs/Tabs.test.tsx
@@ -0,0 +1,331 @@
+import assert from 'assert';
+
+import React from 'react';
+import { act, screen, render as renderRtl } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { lastItem } from '../../../utils/arrayUtils';
+
+import type { LegacyTabItem, LegacyTabsProps } from './Tabs';
+import { LegacyTabs } from './Tabs';
+
+const user = userEvent.setup();
+
+// Test data:
+const itemInfo = [
+  {
+    name: 'Item 1',
+    textContent: 'Lorem ipsum dolor sit amet.',
+    value: 'item1',
+  },
+  {
+    name: 'Item 2',
+    textContent: 'Etiam ac magna pretium, laoreet.',
+    value: 'item2',
+  },
+  {
+    name: 'Item 3',
+    textContent: 'Phasellus convallis porta commodo. Vivamus.',
+    value: 'item3',
+  },
+];
+const items: LegacyTabItem[] = itemInfo.map((item) => ({
+  name: item.name,
+  content: <p>{item.textContent}</p>,
+}));
+const itemsWithValues: LegacyTabItem[] = itemInfo.map((item) => ({
+  name: item.name,
+  content: <p>{item.textContent}</p>,
+  value: item.value,
+}));
+const defaultProps: LegacyTabsProps = {
+  items,
+};
+
+describe('LegacyTabs', () => {
+  it('Renders expected elements', () => {
+    render();
+    expect(getTablist()).toBeInTheDocument();
+    expect(getTabs()).toHaveLength(items.length);
+    expect(getTabpanel()).toBeInTheDocument();
+  });
+
+  it('Selects first tab by default', () => {
+    render();
+    expectSelected(getTab(0));
+    expectNotSelected(getTab(1));
+    expectNotSelected(getTab(2));
+    expect(getTabpanel()).toHaveTextContent(itemInfo[0].textContent);
+  });
+
+  it('Initially selects tab with name given in the activeTab property if values are not set', () => {
+    render({ activeTab: items[1].name });
+    expectSelected(getTab(1));
+    expectNotSelected(getTab(0));
+    expectNotSelected(getTab(2));
+    expect(getTabpanel()).toHaveTextContent(itemInfo[1].textContent);
+  });
+
+  it('Initially selects tab with value given in the activeTab property if values are set', () => {
+    render({ items: itemsWithValues, activeTab: itemsWithValues[1].value });
+    expectSelected(getTab(1));
+    expectNotSelected(getTab(0));
+    expectNotSelected(getTab(2));
+    expect(getTabpanel()).toHaveTextContent(itemInfo[1].textContent);
+  });
+
+  it('Sets given tab id on tab', () => {
+    const tabId = 'some-unique-tab-id';
+    render({ items: [...items, { tabId, name: 'Item 4', content: <span /> }] });
+    expect(getLastTab()).toHaveAttribute('id', tabId);
+  });
+
+  it('Sets given panel id on tab panel', () => {
+    const panelId = 'some-unique-panel-id';
+    const textContent = 'In dignissim risus enim, sed.';
+    const content = <p>{textContent}</p>;
+    const tabs = [...items, { panelId, name: 'Item 4', content }];
+    render({ items: tabs });
+    expect(document.getElementById(panelId)).toHaveTextContent(textContent);
+  });
+
+  it('Links corresponding tabs and panels to each other with accessibility attributes', () => {
+    render();
+    items.forEach((_, i) => {
+      const panelId = getTab(i).getAttribute('aria-controls');
+      const panel = screen.getByLabelText(items[i].name);
+      expect(panel).toHaveAttribute('id', panelId);
+    });
+  });
+
+  it('Selects and focuses on tab when user clicks on it', async () => {
+    render();
+    for (let i = 0; i < items.length; i++) {
+      await act(() => user.click(getTab(i)));
+      expectSelectedIndex(i);
+      expect(getTab(i)).toHaveFocus();
+    }
+  });
+
+  it('Does not focus on any tab by default', () => {
+    render();
+    getTabs().forEach((tab) => expect(tab).not.toHaveFocus());
+  });
+
+  it('Focuses on the first tab when user presses the tab key', async () => {
+    const { container } = render();
+    await act(() => user.click(container));
+    await act(() => user.tab());
+    expect(getTab(0)).toHaveFocus();
+  });
+
+  it('Moves focus out when one tab has focus and user presses the tab key', async () => {
+    render();
+    await act(() => user.click(getTab(1)));
+    expect(getTab(1)).toHaveFocus();
+    await act(() => user.tab());
+    getTabs().forEach((tab) => expect(tab).not.toHaveFocus());
+  });
+
+  it('Moves focus to the right when user presses the right arrow key', async () => {
+    render();
+    await act(() => user.click(getTab(0)));
+    expect(getTab(0)).toHaveFocus();
+    await act(() => user.keyboard('{ArrowRight}'));
+    expect(getTab(1)).toHaveFocus();
+    await act(() => user.keyboard('{ArrowRight}'));
+    expect(getTab(2)).toHaveFocus();
+  });
+
+  it('Moves focus to the left when user presses the left arrow key', async () => {
+    render();
+    await act(() => user.click(getTab(2)));
+    expect(getTab(2)).toHaveFocus();
+    await act(() => user.keyboard('{ArrowLeft}'));
+    expect(getTab(1)).toHaveFocus();
+    await act(() => user.keyboard('{ArrowLeft}'));
+    expect(getTab(0)).toHaveFocus();
+  });
+
+  it('Moves focus to the first tab when the last tab is focused and user presses the right arrow key', async () => {
+    render();
+    await act(() => user.click(getLastTab()));
+    expect(getLastTab()).toHaveFocus();
+    await act(() => user.keyboard('{ArrowRight}'));
+    expect(getTab(0)).toHaveFocus();
+  });
+
+  it('Moves focus to the last tab when the first tab is focused and user presses the left arrow key', async () => {
+    render();
+    await act(() => user.click(getTab(0)));
+    expect(getTab(0)).toHaveFocus();
+    await act(() => user.keyboard('{ArrowLeft}'));
+    expect(getLastTab()).toHaveFocus();
+  });
+
+  it('Selects tab when user navigates with arrow keys and presses the enter key', async () => {
+    render();
+    await act(() => user.click(getTab(0)));
+    await act(() => user.keyboard('{ArrowRight}'));
+    await act(() => user.keyboard('{Enter}'));
+    expectSelected(getTab(1));
+  });
+
+  it('Selects tab when user navigates with arrow keys and presses the space key', async () => {
+    render();
+    await act(() => user.click(getTab(0)));
+    await act(() => user.keyboard('{ArrowRight}'));
+    await act(() => user.keyboard('{Space}'));
+    expectSelected(getTab(1));
+  });
+
+  it('Throws error if item values are not set and names are not unique', () => {
+    const renderFn = () => {
+      render({ items: [...items, { name: items[0].name, content: <p /> }] });
+    };
+    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
+    expect(renderFn).toThrow('Each tab value must be unique.');
+  });
+
+  it('Throws error if item values are set, but not unique', () => {
+    const renderFn = () => {
+      render({
+        items: [
+          ...itemsWithValues,
+          { name: 'Item 4', content: <p />, value: itemsWithValues[0].value },
+        ],
+      });
+    };
+    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
+    expect(renderFn).toThrow('Each tab value must be unique.');
+  });
+
+  it('Throws error if the value given in activeTab is not present among the item names and item values are not given', () => {
+    const renderFn = () => {
+      render({ activeTab: 'Some name that is not in the list' });
+    };
+    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
+    const error = 'The given active tab value must exist in the list of items.';
+    expect(renderFn).toThrow(error);
+  });
+
+  it('Throws error if the value given in activeTab is not present among the item values if they are given', () => {
+    const renderFn = () => {
+      render({
+        items: itemsWithValues,
+        activeTab: 'Some value that is not in the list',
+      });
+    };
+    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // Keeps the console output clean
+    const error = 'The given active tab value must exist in the list of items.';
+    expect(renderFn).toThrow(error);
+  });
+
+  it('Switches selected tab when rerendered with a new name in the activeTab property and values are not set', () => {
+    const { rerender } = render();
+    rerender(
+      <LegacyTabs
+        {...defaultProps}
+        activeTab={items[1].name}
+      />,
+    );
+    expectSelected(getTab(1));
+  });
+
+  it('Switches selected tab when rerendered with a new value in the activeTab property and values are set', () => {
+    const { rerender } = render();
+    rerender(
+      <LegacyTabs
+        {...defaultProps}
+        items={itemsWithValues}
+        activeTab={itemsWithValues[1].value}
+      />,
+    );
+    expectSelected(getTab(1));
+  });
+
+  it("Calls the onChange function with the selected tab's name as a parameter when user selects a tab using the mouse and values are not set", async () => {
+    const onChange = jest.fn();
+    render({ onChange });
+    await act(() => user.click(getTab(1)));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[1].name);
+  });
+
+  it("Calls the onChange function with the selected tab's value as a parameter when user selects a tab using the mouse and values are set", async () => {
+    const onChange = jest.fn();
+    render({ items: itemsWithValues, onChange });
+    await act(() => user.click(getTab(1)));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(itemsWithValues[1].value);
+  });
+
+  it("Calls the onChange function with the selected tab's name as a parameter when user selects a tab using the enter key and values are not set", async () => {
+    const onChange = jest.fn();
+    render({ onChange });
+    await act(() => user.click(getTab(0)));
+    await act(() => user.keyboard('{ArrowRight}'));
+    await act(() => user.keyboard('{Enter}'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[1].name);
+  });
+
+  it("Calls the onChange function with the selected tab's value as a parameter when user selects a tab using the enter key and values are set", async () => {
+    const onChange = jest.fn();
+    render({ items: itemsWithValues, onChange });
+    await act(() => user.click(getTab(0)));
+    await act(() => user.keyboard('{ArrowRight}'));
+    await act(() => user.keyboard('{Enter}'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(itemsWithValues[1].value);
+  });
+
+  it("Calls the onChange function with the selected tab's name as a parameter when user selects a tab using the space key and values are not set", async () => {
+    const onChange = jest.fn();
+    render({ onChange });
+    await act(() => user.click(getTab(0)));
+    await act(() => user.keyboard('{ArrowRight}'));
+    await act(() => user.keyboard('{Space}'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[1].name);
+  });
+
+  it("Calls the onChange function with the selected tab's value as a parameter when user selects a tab using the space key and values are set", async () => {
+    const onChange = jest.fn();
+    render({ items: itemsWithValues, onChange });
+    await act(() => user.click(getTab(0)));
+    await act(() => user.keyboard('{ArrowRight}'));
+    await act(() => user.keyboard('{Space}'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(itemsWithValues[1].value);
+  });
+});
+
+const render = (props?: Partial<LegacyTabsProps>) => {
+  return renderRtl(
+    <LegacyTabs
+      {...defaultProps}
+      {...props}
+    />,
+  );
+};
+
+const getTablist = () => screen.getByRole('tablist');
+const getTabs = () => screen.getAllByRole('tab');
+const getTab = (index: number) => getTabs()[index];
+const getLastTab = () => {
+  const last = lastItem(getTabs());
+  assert(last !== undefined);
+  return last;
+};
+const getTabpanel = () => screen.getByRole('tabpanel');
+
+const expectSelected = (tab: HTMLElement) =>
+  expect(tab).toHaveAttribute('aria-selected', 'true');
+const expectNotSelected = (tab: HTMLElement) =>
+  expect(tab).toHaveAttribute('aria-selected', 'false');
+const expectSelectedIndex = (index: number) =>
+  getTabs().forEach((tab, i) => {
+    if (index === i) expectSelected(tab);
+    else expectNotSelected(tab);
+  });
diff --git a/packages/react/src/components/legacy/LegacyTabs/Tabs.tsx b/packages/react/src/components/legacy/LegacyTabs/Tabs.tsx
new file mode 100644
index 0000000000..abaec168d4
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTabs/Tabs.tsx
@@ -0,0 +1,141 @@
+import type { KeyboardEventHandler } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import { useUpdate } from '../../../hooks';
+import { areItemsUnique } from '../../../utils/arrayUtils';
+
+import classes from './Tabs.module.css';
+
+export interface LegacyTabItem {
+  name: string;
+  content: React.ReactNode;
+  tabId?: string;
+  panelId?: string;
+  value?: string;
+}
+
+export interface LegacyTabsProps {
+  activeTab?: string;
+  items: LegacyTabItem[];
+  onChange?: (name: string) => void;
+}
+
+const validId = (str: string) => str.replace(/\s/, '_');
+
+const LegacyTabs = ({ activeTab, items, onChange }: LegacyTabsProps) => {
+  const idBase = useId();
+
+  // Generate values for undefined properties
+  const tabs: Required<LegacyTabItem>[] = items.map(
+    ({
+      name,
+      content,
+      value: optionalValue,
+      tabId: optionalTabId,
+      panelId: optionalPanelId,
+    }) => {
+      const value = optionalValue ?? name;
+      const tabId = optionalTabId ?? idBase + validId(value) + '-tab';
+      const panelId = optionalPanelId ?? idBase + validId(value) + '-panel';
+      return { name, content, value, tabId, panelId };
+    },
+  );
+
+  if (!areItemsUnique(tabs.map(({ value }) => value))) {
+    throw Error('Each tab value must be unique.');
+  }
+  if (activeTab !== undefined && !tabs.some((tab) => tab.value === activeTab)) {
+    throw Error('The given active tab value must exist in the list of items.');
+  }
+
+  const findTabIndexByValue = (value: string) =>
+    tabs.findIndex((tab) => tab.value === value);
+  const initialTab = activeTab ?? tabs[0].value;
+  const [visiblePanel, setVisiblePanel] = useState<string>(initialTab);
+  const [focusIndex, setFocusIndex] = useState<number>(
+    findTabIndexByValue(initialTab),
+  );
+  useEffect(() => setVisiblePanel(initialTab), [initialTab]);
+  const tablistRef = useRef<HTMLDivElement>(null);
+  const lastIndex = tabs.length - 1;
+
+  useUpdate(() => {
+    tablistRef.current
+      ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+      [focusIndex].focus();
+  }, [focusIndex]);
+
+  const selectTab = (value: string) => {
+    visiblePanel !== value && onChange && onChange(value);
+    setVisiblePanel(value);
+    setFocusIndex(findTabIndexByValue(value));
+  };
+
+  const moveFocusRight = () =>
+    focusIndex !== undefined &&
+    setFocusIndex(focusIndex === lastIndex ? 0 : focusIndex + 1);
+  const moveFocusLeft = () =>
+    focusIndex !== undefined &&
+    setFocusIndex(focusIndex === 0 ? lastIndex : focusIndex - 1);
+
+  const onKeyDown =
+    (name: string) => (event: Parameters<KeyboardEventHandler>[0]) => {
+      switch (event.key) {
+        case 'ArrowRight':
+          moveFocusRight();
+          break;
+        case 'ArrowLeft':
+          moveFocusLeft();
+          break;
+        case 'Space':
+          selectTab(name);
+      }
+    };
+
+  return (
+    <div className={classes.tabs}>
+      <div
+        className={classes.tablist}
+        ref={tablistRef}
+        role='tablist'
+      >
+        {tabs.map((tab, i) => {
+          const isSelected = tab.value === visiblePanel;
+          return (
+            <button
+              aria-controls={tab.panelId}
+              aria-selected={isSelected}
+              className={cn(classes.tab, isSelected && classes.selected)}
+              id={tab.tabId}
+              key={tab.value}
+              onClick={() => selectTab(tab.value)}
+              onKeyDown={onKeyDown(tab.value)}
+              role='tab'
+              tabIndex={focusIndex === i ? 0 : -1}
+            >
+              {tab.name}
+            </button>
+          );
+        })}
+      </div>
+      <hr className={classes.divider} />
+      {tabs.map((tab) => (
+        <div
+          className={classes.tabpanel}
+          aria-labelledby={tab.tabId}
+          hidden={tab.value !== visiblePanel}
+          id={tab.panelId}
+          key={tab.panelId}
+          role='tabpanel'
+        >
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+LegacyTabs.displayName = 'LegacyTabs';
+
+export { LegacyTabs };
diff --git a/packages/react/src/components/legacy/LegacyTabs/index.ts b/packages/react/src/components/legacy/LegacyTabs/index.ts
new file mode 100644
index 0000000000..2f7f2bc1e4
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTabs/index.ts
@@ -0,0 +1,2 @@
+export { LegacyTabs } from './Tabs';
+export type { LegacyTabsProps, LegacyTabItem } from './Tabs';
diff --git a/packages/react/src/components/legacy/LegacyTextArea/TextArea.mdx b/packages/react/src/components/legacy/LegacyTextArea/TextArea.mdx
new file mode 100644
index 0000000000..5739cfc562
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTextArea/TextArea.mdx
@@ -0,0 +1,76 @@
+import { Meta, Canvas, Story, Primary, Controls } from '@storybook/blocks';
+import { LegacyTextArea } from './';
+import { Information, TokensTable } from '../../../../../../docs-components';
+import { ArgsTable } from '@storybook/blocks';
+import * as LegacyTextAreaStories from './TextArea.stories';
+
+<Meta of={LegacyTextAreaStories} />
+
+# LegacyTextArea
+
+<Information
+  text='deprecated'
+  description='**Denne komponenten er erstattet av ny [Textarea](/?path=/docs/felles-textarea--docs) komponent.**'
+/>
+
+`LegacyTextArea` brukes til å ta imot lengre tekster, gjerne over flere linjer.
+
+## Bruk
+
+```tsx
+import { LegacyTextArea } from '@digdir/design-system-react';
+
+<LegacyTextArea {...props} />;
+```
+
+## Props
+
+<Primary />
+<Controls />
+
+## Eksempler
+
+### Standard
+
+<Canvas>
+  <Story of={LegacyTextAreaStories.Standard} />
+</Canvas>
+
+### Med feil
+
+<Canvas>
+  <Story of={LegacyTextAreaStories.MedFeil} />
+</Canvas>
+
+### Skrivebeskyttet
+
+<Canvas>
+  <Story of={LegacyTextAreaStories.Skrivebeskyttet} />
+</Canvas>
+
+### Bekreftelsesvisning
+
+<Canvas>
+  <Story of={LegacyTextAreaStories.Bekreftelsesvisning} />
+</Canvas>
+
+### Deaktivert
+
+<Canvas>
+  <Story of={LegacyTextAreaStories.Deaktivert} />
+</Canvas>
+
+### Viser antall tegn igjen å skrive
+
+<Canvas>
+  <Story of={LegacyTextAreaStories.AntallTegnIgjenASkrive} />
+</Canvas>
+
+## Tokens
+
+<TokensTable
+  jsonKey='component.textfield'
+  componentName='textfield'
+  showPreview={false}
+  description
+/>
diff --git a/packages/react/src/components/TextArea/TextArea.module.css b/packages/react/src/components/legacy/LegacyTextArea/TextArea.module.css
similarity index 100%
rename from packages/react/src/components/TextArea/TextArea.module.css
rename to packages/react/src/components/legacy/LegacyTextArea/TextArea.module.css
diff --git a/packages/react/src/components/TextArea/TextArea.stories.tsx b/packages/react/src/components/legacy/LegacyTextArea/TextArea.stories.tsx
similarity index 76%
rename from packages/react/src/components/TextArea/TextArea.stories.tsx
rename to packages/react/src/components/legacy/LegacyTextArea/TextArea.stories.tsx
index 45a919004b..7b29026604 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/react/src/components/legacy/LegacyTextArea/TextArea.stories.tsx
@@ -1,21 +1,23 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import type { TextAreaProps } from '.';
-import { TextArea } from '.';
+import type { LegacyTextAreaProps } from '.';
+import { LegacyTextArea } from '.';
 
-type Story = StoryObj<typeof TextArea>;
+type Story = StoryObj<typeof LegacyTextArea>;
 
 const meta: Meta = {
-  title: 'Altinn/TextArea',
-  component: TextArea,
+  title: 'Avviklet/TextArea',
+  component: LegacyTextArea,
 };
 
 export default meta;
 
-const Template = (args: TextAreaProps): JSX.Element => <TextArea {...args} />;
+const Template = (args: LegacyTextAreaProps): JSX.Element => (
+  <LegacyTextArea {...args} />
+);
 
-const createTemplate = (name: string, args?: TextAreaProps): Story => ({
+const createTemplate = (name: string, args?: LegacyTextAreaProps): Story => ({
   render: Template,
   name,
   args: { ...args },
diff --git a/packages/react/src/components/TextArea/TextArea.test.tsx b/packages/react/src/components/legacy/LegacyTextArea/TextArea.test.tsx
similarity index 92%
rename from packages/react/src/components/TextArea/TextArea.test.tsx
rename to packages/react/src/components/legacy/LegacyTextArea/TextArea.test.tsx
index 3abf91a5aa..c315336584 100644
--- a/packages/react/src/components/TextArea/TextArea.test.tsx
+++ b/packages/react/src/components/legacy/LegacyTextArea/TextArea.test.tsx
@@ -2,12 +2,12 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
-import { TextArea } from './TextArea';
-import type { TextAreaProps } from './TextArea';
+import { LegacyTextArea } from './TextArea';
+import type { LegacyTextAreaProps } from './TextArea';
 
 const user = userEvent.setup();
 
-describe('TextArea', () => {
+describe('LegacyTextArea', () => {
   it('Triggers onPaste when pasting into input', async () => {
     const onPaste = jest.fn();
     const data = 'Hello world';
@@ -83,9 +83,9 @@ describe('TextArea', () => {
   });
 });
 
-const render = (props: Partial<TextAreaProps> = {}) =>
+const render = (props: Partial<LegacyTextAreaProps> = {}) =>
   renderRtl(
-    <TextArea
+    <LegacyTextArea
       id='id'
       onChange={jest.fn()}
       {...props}
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/legacy/LegacyTextArea/TextArea.tsx
similarity index 86%
rename from packages/react/src/components/TextArea/TextArea.tsx
rename to packages/react/src/components/legacy/LegacyTextArea/TextArea.tsx
index 2911850ff4..12f41c25ac 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/legacy/LegacyTextArea/TextArea.tsx
@@ -1,12 +1,12 @@
 import React, { forwardRef, useId, useState } from 'react';
 import type { ChangeEvent, ForwardedRef, TextareaHTMLAttributes } from 'react';
 
-import { InputWrapper } from '../_InputWrapper';
-import type { ReadOnlyVariant_, CharacterLimit } from '../_InputWrapper';
+import { InputWrapper } from '../../_InputWrapper';
+import type { ReadOnlyVariant_, CharacterLimit } from '../../_InputWrapper';
 
 import classes from './TextArea.module.css';
 
-export type TextAreaProps = {
+export type LegacyTextAreaProps = {
   /** Whether the textarea value is valid. */
   isValid?: boolean;
   /** Whether the textarea is read-only. */
@@ -23,7 +23,12 @@ export type TextAreaProps = {
   label?: string;
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>;
 
-export const TextArea = forwardRef(
+/**
+ *
+ * @note
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-textarea--docs Textarea} component.
+ */
+export const LegacyTextArea = forwardRef(
   (
     {
       isValid = true,
@@ -36,7 +41,7 @@ export const TextArea = forwardRef(
       onChange,
       'aria-describedby': ariaDescribedBy,
       ...rest
-    }: TextAreaProps,
+    }: LegacyTextAreaProps,
     ref: ForwardedRef<HTMLTextAreaElement>,
   ): JSX.Element => {
     const [currentInputValue, setCurrentInputValue] = useState<string>(
diff --git a/packages/react/src/components/legacy/LegacyTextArea/index.ts b/packages/react/src/components/legacy/LegacyTextArea/index.ts
new file mode 100644
index 0000000000..a9da2606ca
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTextArea/index.ts
@@ -0,0 +1,2 @@
+export { LegacyTextArea } from './TextArea';
+export type { LegacyTextAreaProps } from './TextArea';
diff --git a/packages/react/src/components/TextField/TextField.mdx b/packages/react/src/components/legacy/LegacyTextField/TextField.mdx
similarity index 78%
rename from packages/react/src/components/TextField/TextField.mdx
rename to packages/react/src/components/legacy/LegacyTextField/TextField.mdx
index 4f3c9630ce..b2be251506 100644
--- a/packages/react/src/components/TextField/TextField.mdx
+++ b/packages/react/src/components/legacy/LegacyTextField/TextField.mdx
@@ -1,23 +1,26 @@
 import { Meta, Canvas, Story, Primary, Controls } from '@storybook/blocks';
 import { TextField } from './';
-import { Information, TokensTable } from '../../../../../docs-components';
+import { Information, TokensTable } from '../../../../../../docs-components';
 import { ArgsTable } from '@storybook/blocks';
 import * as TextFieldStories from './TextField.stories';
 
 <Meta of={TextFieldStories} />
 
-# TextField
+# LegacyTextField
 
-<Information text='altinn' />
+<Information
+  text='deprecated'
+  description='**Denne komponenten er erstattet av ny [Textfield](/?path=/docs/felles-textfield--docs) komponent.**'
+/>
 
 `TextField` er en tekstboks som tar imot korte, rene tekster uten linjeskift. For lengre tekster, bruk `TextArea`.
 
 ## Bruk
 
 ```tsx
-import { TextField } from '@digdir/design-system-react';
+import { LegacyTextField } from '@digdir/design-system-react';
 
-<TextField {...props} />;
+<LegacyTextField {...props} />;
 ```
 
 ## Props
diff --git a/packages/react/src/components/TextField/TextField.stories.tsx b/packages/react/src/components/legacy/LegacyTextField/TextField.stories.tsx
similarity index 78%
rename from packages/react/src/components/TextField/TextField.stories.tsx
rename to packages/react/src/components/legacy/LegacyTextField/TextField.stories.tsx
index a9808d2f7c..4082a8074d 100644
--- a/packages/react/src/components/TextField/TextField.stories.tsx
+++ b/packages/react/src/components/legacy/LegacyTextField/TextField.stories.tsx
@@ -1,20 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import type { TextFieldProps } from '.';
-import { TextField } from '.';
+import type { LegacyTextFieldProps } from '.';
+import { LegacyTextField } from '.';
 
-type Story = StoryObj<typeof TextField>;
+type Story = StoryObj<typeof LegacyTextField>;
 
-const meta: Meta<typeof TextField> = {
-  title: 'Altinn/TextField',
-  component: TextField,
+const meta: Meta<typeof LegacyTextField> = {
+  title: 'Avviklet/LegacyTextField',
+  component: LegacyTextField,
 };
 
 export default meta;
 
-const createTemplate = (name: string, args?: TextFieldProps): Story => ({
-  render: (args) => <TextField {...args} />,
+const createTemplate = (name: string, args?: LegacyTextFieldProps): Story => ({
+  render: (args) => <LegacyTextField {...args} />,
   args,
   name,
 });
diff --git a/packages/react/src/components/TextField/TextField.test.tsx b/packages/react/src/components/legacy/LegacyTextField/TextField.test.tsx
similarity index 97%
rename from packages/react/src/components/TextField/TextField.test.tsx
rename to packages/react/src/components/legacy/LegacyTextField/TextField.test.tsx
index eeb39582f9..ebd477d023 100644
--- a/packages/react/src/components/TextField/TextField.test.tsx
+++ b/packages/react/src/components/legacy/LegacyTextField/TextField.test.tsx
@@ -2,8 +2,8 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
-import type { TextFieldProps } from './TextField';
-import { TextField } from './TextField';
+import type { LegacyTextFieldProps } from './TextField';
+import { LegacyTextField } from './TextField';
 
 const user = userEvent.setup();
 
@@ -172,7 +172,7 @@ describe('TextField', () => {
       expect(screen.getByDisplayValue('$1 234')).toBeInTheDocument();
       expect(onChange).not.toHaveBeenCalled();
       rerender(
-        <TextField
+        <LegacyTextField
           onChange={onChange}
           value='12345'
           formatting={{ number: { prefix: '$', thousandSeparator: ' ' } }}
@@ -301,11 +301,11 @@ describe('TextField', () => {
   });
 });
 
-const render = (props: Partial<TextFieldProps> = {}) => {
+const render = (props: Partial<LegacyTextFieldProps> = {}) => {
   const allProps = {
     onChange: jest.fn(),
     ...props,
-  } as TextFieldProps;
+  } as LegacyTextFieldProps;
 
-  return renderRtl(<TextField {...allProps} />);
+  return renderRtl(<LegacyTextField {...allProps} />);
 };
diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/legacy/LegacyTextField/TextField.tsx
similarity index 90%
rename from packages/react/src/components/TextField/TextField.tsx
rename to packages/react/src/components/legacy/LegacyTextField/TextField.tsx
index 22f10cb4b6..4d76c23bd3 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/legacy/LegacyTextField/TextField.tsx
@@ -9,11 +9,11 @@ import type {
 } from 'react-number-format';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 
-import { isNumericFormat, isPatternFormat } from '../../utils';
-import { InputWrapper } from '../_InputWrapper';
-import type { ReadOnlyVariant_, CharacterLimit } from '../_InputWrapper';
+import { isNumericFormat, isPatternFormat } from '../../../utils';
+import { InputWrapper } from '../../_InputWrapper';
+import type { ReadOnlyVariant_, CharacterLimit } from '../../_InputWrapper';
 
-export type TextFieldProps = {
+export type LegacyTextFieldProps = {
   /**
    *  The characterLimit function calculates remaining characters.
    *  Provide a `label` function that takes count as parameter and returns a message.
@@ -25,7 +25,7 @@ export type TextFieldProps = {
   defaultValue?: string | number;
 
   /** The formatting options for the text field. */
-  formatting?: TextFieldFormatting;
+  formatting?: LegacyTextFieldFormatting;
 
   /** Specifies whether the value of the text field is valid. */
   isValid?: boolean;
@@ -65,7 +65,7 @@ export type TextFieldProps = {
   'readOnly' | 'value' | 'defaultValue' | 'type'
 >; // Todo: We should extend the props of <input> here, but it's complex because of the number format implementation. We should move that out to a separate component first.
 
-export type TextFieldFormatting = {
+export type LegacyTextFieldFormatting = {
   align?: 'right' | 'center' | 'left';
   number?: NumericFormatProps | PatternFormatProps;
 };
@@ -91,7 +91,16 @@ const replaceTargetValueWithUnformattedValue = ({
     },
   };
 };
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+
+/**
+ *
+ * @note
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-textfield--docs Textfield} component.
+ */
+export const LegacyTextField = forwardRef<
+  HTMLInputElement,
+  LegacyTextFieldProps
+>(
   (
     {
       id,
@@ -107,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       characterLimit,
       'aria-describedby': ariaDescribedBy,
       ...rest
-    }: TextFieldProps,
+    }: LegacyTextFieldProps,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const [currentValue, setCurrentValue] = useState<string>(
@@ -118,6 +127,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       values: NumberFormatValues,
       sourceInfo: SourceInfo,
     ): void => {
+      /* eslint-disable-next-line */
       if (sourceInfo.source === 'event' && onChange) {
         const parsedEvent = replaceTargetValueWithUnformattedValue({
           values,
diff --git a/packages/react/src/components/legacy/LegacyTextField/index.ts b/packages/react/src/components/legacy/LegacyTextField/index.ts
new file mode 100644
index 0000000000..521d578804
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyTextField/index.ts
@@ -0,0 +1,5 @@
+export { LegacyTextField } from './TextField';
+export type {
+  LegacyTextFieldProps,
+  LegacyTextFieldFormatting,
+} from './TextField';
diff --git a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.module.css
similarity index 100%
rename from packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
rename to packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.module.css
diff --git a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.mdx b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.stories.mdx
similarity index 69%
rename from packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.mdx
rename to packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.stories.mdx
index 24cf054b89..a6cb625106 100644
--- a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.mdx
+++ b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.stories.mdx
@@ -1,10 +1,10 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { TokensTable, Information } from '../../../../../docs-components';
-import { ToggleButtonGroup } from './ToggleButtonGroup';
+import { TokensTable, Information } from '../../../../../../docs-components';
+import { LegacyToggleButtonGroup } from '.';
 
 <Meta
-  title='Altinn/ToggleButtonGroup'
-  component={ToggleButtonGroup}
+  title='Avviklet/LegacyToggleButtonGroup'
+  component={LegacyToggleButtonGroup}
 />
 
 export const defaultArgs = {
@@ -26,10 +26,10 @@ export const defaultArgs = {
 };
 
 export const Template = (args = {}) => (
-  <ToggleButtonGroup {...{ ...defaultArgs, ...args }} />
+  <LegacyToggleButtonGroup {...{ ...defaultArgs, ...args }} />
 );
 
-# ToggleButtonGroup
+# LegacyToggleButtonGroup
 
 <Information text='altinn' />
 ## Variants
diff --git a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.test.tsx b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.test.tsx
similarity index 90%
rename from packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.test.tsx
rename to packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.test.tsx
index 0e4d7eb6d6..ad77d7e438 100644
--- a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.test.tsx
+++ b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.test.tsx
@@ -2,25 +2,22 @@ import React from 'react';
 import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ToggleButtonGroup } from './ToggleButtonGroup';
-import type {
-  ToggleButtonGroupProps,
-  ToggleButtonProps,
-} from './ToggleButtonGroup';
+import { LegacyToggleButtonGroup } from '.';
+import type { LegacyToggleButtonGroupProps, LegacyToggleButtonProps } from '.';
 
 const user = userEvent.setup();
 
 // Test data:
-const items: ToggleButtonProps[] = [
+const items: LegacyToggleButtonProps[] = [
   { value: 'value 1', label: 'Label 1' },
   { value: 'value 2', label: 'Label 2' },
   { value: 'value 3', label: 'Label 3' },
 ];
-const defaultProps: ToggleButtonGroupProps = {
+const defaultProps: LegacyToggleButtonGroupProps = {
   items,
 };
 
-describe('ToggleButtonGroup', () => {
+describe('LegacyToggleButtonGroup', () => {
   it('Renders all items', () => {
     render();
     expect(getAllButtons()).toHaveLength(items.length);
@@ -46,7 +43,7 @@ describe('ToggleButtonGroup', () => {
     const index = 1;
     const value = items[index].value;
     rerender(
-      <ToggleButtonGroup
+      <LegacyToggleButtonGroup
         {...defaultProps}
         selectedValue={value}
       />,
@@ -121,9 +118,9 @@ describe('ToggleButtonGroup', () => {
   };
 });
 
-const render = (props: Partial<ToggleButtonGroupProps> = {}) =>
+const render = (props: Partial<LegacyToggleButtonGroupProps> = {}) =>
   renderRtl(
-    <ToggleButtonGroup
+    <LegacyToggleButtonGroup
       {...defaultProps}
       {...props}
     />,
diff --git a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.tsx
similarity index 89%
rename from packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
rename to packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.tsx
index b9016d68e5..60bf7423ec 100644
--- a/packages/react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/packages/react/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.tsx
@@ -2,11 +2,11 @@ import type { ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 
-import { areItemsUnique } from '../../utils';
+import { areItemsUnique } from '../../../utils';
 
 import classes from './ToggleButtonGroup.module.css';
 
-export interface ToggleButtonProps {
+export interface LegacyToggleButtonProps {
   /**
    * The value of the toggle button. The onChange function will be called with this value when the button is selected.
    */
@@ -18,11 +18,11 @@ export interface ToggleButtonProps {
   label: ReactNode;
 }
 
-export interface ToggleButtonGroupProps {
+export interface LegacyToggleButtonGroupProps {
   /**
    * The list of toggle buttons to render.
    */
-  items: ToggleButtonProps[];
+  items: LegacyToggleButtonProps[];
 
   /**
    * Optional function to be called when the selected value changes.
@@ -40,11 +40,11 @@ export interface ToggleButtonGroupProps {
 /**
  * Component for rendering a group of toggle buttons. At any given time, only one button in the group can be selected.
  */
-export const ToggleButtonGroup = ({
+export const LegacyToggleButtonGroup = ({
   onChange,
   items,
   selectedValue,
-}: ToggleButtonGroupProps) => {
+}: LegacyToggleButtonGroupProps) => {
   const initiallySelected = selectedValue ?? items[0].value;
   const [selected, setSelected] = useState(initiallySelected);
 
diff --git a/packages/react/src/components/legacy/LegacyToggleButtonGroup/index.ts b/packages/react/src/components/legacy/LegacyToggleButtonGroup/index.ts
new file mode 100644
index 0000000000..454d8b5b11
--- /dev/null
+++ b/packages/react/src/components/legacy/LegacyToggleButtonGroup/index.ts
@@ -0,0 +1,5 @@
+export { LegacyToggleButtonGroup } from './ToggleButtonGroup';
+export type {
+  LegacyToggleButtonGroupProps,
+  LegacyToggleButtonProps,
+} from './ToggleButtonGroup';
diff --git a/packages/react/src/utility-components/AnimateHeight/AnimateHeight.test.tsx b/packages/react/src/utility-components/AnimateHeight/AnimateHeight.test.tsx
index 4ca2cbfe32..e434cbc32f 100644
--- a/packages/react/src/utility-components/AnimateHeight/AnimateHeight.test.tsx
+++ b/packages/react/src/utility-components/AnimateHeight/AnimateHeight.test.tsx
@@ -59,7 +59,7 @@ describe('AnimateHeight', () => {
     const { container, rerender } = render({ open: false });
     rerender(<AnimateHeight open />);
     expect(container.firstChild).toHaveClass('openingOrClosing');
-    await act(jest.runAllTimers);
+    await act(() => jest.runAllTimers);
     await waitFor(() => {
       expect(container.firstChild).not.toHaveClass('openingOrClosing');
     });
@@ -70,7 +70,7 @@ describe('AnimateHeight', () => {
     const { container, rerender } = render({ open: true });
     rerender(<AnimateHeight open={false} />);
     expect(container.firstChild).toHaveClass('openingOrClosing');
-    await act(jest.runAllTimers);
+    await act(() => jest.runAllTimers);
     await waitFor(() => {
       expect(container.firstChild).not.toHaveClass('openingOrClosing');
     });
diff --git a/packages/react/src/utility-components/RovingTabIndex/RovingTabindexItem.tsx b/packages/react/src/utility-components/RovingTabIndex/RovingTabindexItem.tsx
new file mode 100644
index 0000000000..6ba5b4d674
--- /dev/null
+++ b/packages/react/src/utility-components/RovingTabIndex/RovingTabindexItem.tsx
@@ -0,0 +1,75 @@
+// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
+// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
+
+import React, { forwardRef } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import type { OverridableComponent } from '../../types/OverridableComponent';
+
+import type { RovingTabindexElement } from './RovingTabindexRoot';
+
+import { useRovingTabindex } from '.';
+
+type RovingTabindexItemProps = {
+  /** The value of the `RovingTabindexItem` used to determine which item should have focus. */
+  value?: string;
+} & HTMLAttributes<HTMLElement>;
+
+/** Get the next focusable RovingTabindexItem */
+export function getNextFocusableValue(
+  items: RovingTabindexElement[],
+  value: string,
+): RovingTabindexElement | undefined {
+  const currIndex = items.findIndex((item) => item.value === value);
+  return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
+}
+
+/** Get the previous focusable RovingTabindexItem */
+export function getPrevFocusableValue(
+  items: RovingTabindexElement[],
+  value: string,
+): RovingTabindexElement | undefined {
+  const currIndex = items.findIndex((item) => item.value === value);
+  return items.at(currIndex === 0 ? -1 : currIndex - 1);
+}
+
+export const RovingTabindexItem: OverridableComponent<
+  RovingTabindexItemProps,
+  HTMLElement
+> = forwardRef(({ value, as: Component = 'div', ...rest }, ref) => {
+  const focusValue =
+    value ?? (typeof rest.children == 'string' ? rest.children : '');
+
+  const { getOrderedItems, getRovingProps } = useRovingTabindex(focusValue);
+
+  const rovingProps = getRovingProps<HTMLElement>({
+    onKeyDown: (e) => {
+      rest?.onKeyDown?.(e);
+      const items = getOrderedItems();
+      let nextItem: RovingTabindexElement | undefined;
+
+      if (e.key === 'ArrowRight') {
+        nextItem = getNextFocusableValue(items, focusValue);
+      }
+
+      if (e.key === 'ArrowLeft') {
+        nextItem = getPrevFocusableValue(items, focusValue);
+      }
+
+      nextItem?.element.focus();
+    },
+  });
+
+  const mergedRefs = useMergeRefs([ref, rovingProps.ref]);
+
+  return (
+    <Component
+      {...rest}
+      {...rovingProps}
+      ref={mergedRefs}
+    >
+      {rest.children}
+    </Component>
+  );
+});
diff --git a/packages/react/src/utility-components/RovingTabIndex/RovingTabindexRoot.test.tsx b/packages/react/src/utility-components/RovingTabIndex/RovingTabindexRoot.test.tsx
new file mode 100644
index 0000000000..d4b4e12d62
--- /dev/null
+++ b/packages/react/src/utility-components/RovingTabIndex/RovingTabindexRoot.test.tsx
@@ -0,0 +1,83 @@
+// tests for the RovingTabindexRoot component
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RovingTabindexRoot } from './RovingTabindexRoot';
+import { RovingTabindexItem } from './RovingTabindexItem';
+
+const user = userEvent.setup();
+
+describe('RovingTabindexRoot', () => {
+  test('can navigate with tab and arrow keys', async () => {
+    render(
+      <RovingTabindexRoot>
+        <RovingTabindexItem>test</RovingTabindexItem>
+        <RovingTabindexItem>test2</RovingTabindexItem>
+        <RovingTabindexItem>test3</RovingTabindexItem>
+      </RovingTabindexRoot>,
+    );
+
+    const item1 = screen.getByText('test');
+    const item2 = screen.getByText('test2');
+    const item3 = screen.getByText('test3');
+    await user.tab();
+    expect(item1).toHaveFocus();
+    await user.type(item1, '{arrowright}');
+    expect(item2).toHaveFocus();
+    await user.type(item2, '{arrowright}');
+    expect(item3).toHaveFocus();
+    await user.type(item3, '{arrowright}');
+    expect(item1).toHaveFocus();
+    await user.type(item1, '{arrowleft}');
+    expect(item3).toHaveFocus();
+    await user.type(item3, '{arrowleft}');
+    expect(item2).toHaveFocus();
+    await user.type(item2, '{arrowleft}');
+    expect(item1).toHaveFocus();
+  });
+
+  test('can navigate with tab and arrow keys with custom value', async () => {
+    render(
+      <RovingTabindexRoot>
+        <RovingTabindexItem
+          data-testid='id1'
+          value='banana'
+        >
+          test
+        </RovingTabindexItem>
+        <RovingTabindexItem
+          data-testid='id2'
+          value='strawberry'
+        >
+          test
+        </RovingTabindexItem>
+        <RovingTabindexItem
+          data-testid='id3'
+          value='chocolate'
+        >
+          test
+        </RovingTabindexItem>
+      </RovingTabindexRoot>,
+    );
+
+    const item1 = screen.getByTestId('id1');
+    const item2 = screen.getByTestId('id2');
+    const item3 = screen.getByTestId('id3');
+    await user.tab();
+    expect(item1).toHaveFocus();
+    await user.type(item1, '{arrowright}');
+    expect(item2).toHaveFocus();
+    await user.type(item2, '{arrowright}');
+    expect(item3).toHaveFocus();
+    await user.type(item3, '{arrowright}');
+    expect(item1).toHaveFocus();
+    await user.type(item1, '{arrowleft}');
+    expect(item3).toHaveFocus();
+    await user.type(item3, '{arrowleft}');
+    expect(item2).toHaveFocus();
+    await user.type(item2, '{arrowleft}');
+    expect(item1).toHaveFocus();
+  });
+});
diff --git a/packages/react/src/utility-components/RovingTabIndex/RovingTabindexRoot.tsx b/packages/react/src/utility-components/RovingTabIndex/RovingTabindexRoot.tsx
new file mode 100644
index 0000000000..3f90fa9337
--- /dev/null
+++ b/packages/react/src/utility-components/RovingTabIndex/RovingTabindexRoot.tsx
@@ -0,0 +1,113 @@
+// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
+// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
+
+import React, { createContext, useRef, useState, forwardRef } from 'react';
+import type { MutableRefObject, ReactNode, HTMLAttributes } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import type { OverridableComponent } from '../../types/OverridableComponent';
+
+type RovingTabindexRootBaseProps = {
+  /** The children of the `RovingTabindexRoot`. The children should get their roving-relevant props from the `useRovingTabIndex` hook. */
+  children: ReactNode;
+  /** The value of the element that should be focused when the `RovingTabindexRoot` receives focus. */
+  valueId?: string;
+} & HTMLAttributes<HTMLElement>;
+
+export type RovingTabindexElement = {
+  value: string;
+  element: HTMLElement;
+};
+
+export type RovingTabindexProps = {
+  elements: MutableRefObject<Map<string, HTMLElement>>;
+  getOrderedItems: () => RovingTabindexElement[];
+  setFocusableValue: (value: string) => void;
+  focusableValue: string | null;
+  onShiftTab: () => void;
+};
+
+export const RovingTabindexContext = createContext<RovingTabindexProps>({
+  elements: { current: new Map<string, HTMLElement>() },
+  getOrderedItems: () => [],
+  setFocusableValue: () => {
+    /* intentionally empty */
+  },
+  onShiftTab: () => {
+    /* intentionally empty */
+  },
+  focusableValue: null,
+});
+
+export const RovingTabindexRoot: OverridableComponent<
+  RovingTabindexRootBaseProps,
+  HTMLElement
+> = forwardRef(
+  (
+    { children, valueId, as: Component = 'div', onBlur, onFocus, ...rest },
+    ref,
+  ) => {
+    const [focusableValue, setFocusableValue] = useState<string | null>(null);
+    const [isShiftTabbing, setIsShiftTabbing] = useState(false);
+    const elements = useRef(new Map<string, HTMLElement>());
+    const myRef = useRef<HTMLElement>();
+
+    const refs = useMergeRefs([ref, myRef]);
+
+    const getOrderedItems = (): RovingTabindexElement[] => {
+      if (!myRef.current) return [];
+      const elementsFromDOM = Array.from(
+        myRef.current.querySelectorAll<HTMLElement>(
+          '[data-roving-tabindex-item]',
+        ),
+      );
+
+      return Array.from(elements.current)
+        .sort(
+          (a, b) =>
+            elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]),
+        )
+        .map(([value, element]) => ({ value, element }));
+    };
+
+    return (
+      <RovingTabindexContext.Provider
+        value={{
+          elements,
+          getOrderedItems,
+          focusableValue,
+          setFocusableValue,
+          onShiftTab: () => {
+            setIsShiftTabbing(true);
+          },
+        }}
+      >
+        <Component
+          {...rest}
+          tabIndex={isShiftTabbing ? -1 : 0}
+          onBlur={(e: React.FocusEvent<HTMLElement>) => {
+            onBlur?.(e);
+            setIsShiftTabbing(false);
+          }}
+          onFocus={(e: React.FocusEvent<HTMLElement>) => {
+            onFocus?.(e);
+            if (e.target !== e.currentTarget) return;
+            const orderedItems = getOrderedItems();
+            if (orderedItems.length === 0) return;
+
+            if (focusableValue != null) {
+              elements.current.get(focusableValue)?.focus();
+            } else if (valueId != null) {
+              elements.current.get(valueId)?.focus();
+            } else {
+              orderedItems.at(0)?.element.focus();
+            }
+          }}
+          ref={refs}
+        >
+          {children}
+        </Component>
+      </RovingTabindexContext.Provider>
+    );
+  },
+);
diff --git a/packages/react/src/utility-components/RovingTabIndex/index.ts b/packages/react/src/utility-components/RovingTabIndex/index.ts
new file mode 100644
index 0000000000..d870acc7a5
--- /dev/null
+++ b/packages/react/src/utility-components/RovingTabIndex/index.ts
@@ -0,0 +1,7 @@
+export { RovingTabindexRoot } from './RovingTabindexRoot';
+export { useRovingTabindex } from './useRovingTabindex';
+export {
+  RovingTabindexItem,
+  getNextFocusableValue,
+  getPrevFocusableValue,
+} from './RovingTabindexItem';
diff --git a/packages/react/src/utility-components/RovingTabIndex/useRovingTabindex.ts b/packages/react/src/utility-components/RovingTabIndex/useRovingTabindex.ts
new file mode 100644
index 0000000000..6be4aa1de1
--- /dev/null
+++ b/packages/react/src/utility-components/RovingTabIndex/useRovingTabindex.ts
@@ -0,0 +1,46 @@
+// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
+// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
+
+import type { HTMLAttributes } from 'react';
+import { useContext } from 'react';
+
+import { RovingTabindexContext } from './RovingTabindexRoot';
+
+/** Handles props for `RovingTabIndex` in context with `RovingTabIndexRoot` */
+export const useRovingTabindex = (value: string) => {
+  const {
+    elements,
+    getOrderedItems,
+    setFocusableValue,
+    focusableValue,
+    onShiftTab,
+  } = useContext(RovingTabindexContext);
+
+  return {
+    getOrderedItems,
+    isFocusable: focusableValue === value,
+    getRovingProps: <T extends HTMLElement>(props: HTMLAttributes<T>) => ({
+      ...props,
+      ref: (element: HTMLElement | null) => {
+        if (element) {
+          elements.current.set(value, element);
+        } else {
+          elements.current.delete(value);
+        }
+      },
+      onKeyDown: (e: React.KeyboardEvent<T>) => {
+        props?.onKeyDown?.(e);
+        if (e.shiftKey && e.key === 'Tab') {
+          onShiftTab();
+          return;
+        }
+      },
+      onFocus: (e: React.FocusEvent<T>) => {
+        props?.onFocus?.(e);
+        setFocusableValue(value);
+      },
+      ['data-roving-tabindex-item']: true,
+      tabIndex: focusableValue === value ? 0 : -1,
+    }),
+  };
+};
diff --git a/packages/react/src/utils/utility.module.css b/packages/react/src/utils/utility.module.css
index f7e705acbd..bb6b6ab989 100644
--- a/packages/react/src/utils/utility.module.css
+++ b/packages/react/src/utils/utility.module.css
@@ -13,9 +13,8 @@
 }
 
 /**
- * Apply a focus outline on an element when it is focused or one of its children is focused
+ * Apply a focus outline on an element when it is focused with keyboard
  */
-.focusable:focus-within,
 .focusable:focus-visible {
   --fds-inner-focus-border-color: #1e2b3c;
   --fds-outer-focus-border-color: #fadf4b;
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 7bc1f95587..907b82e5ab 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,10 +1,11 @@
 {
-    "extends": "../../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "declarationDir": "dist/types",
-        "emitDeclarationOnly": true
-    },
-    "include": ["./src", "declarations.d.ts"],
-    "rootDir": "./src",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./tsc-build",
+    "declarationDir": "./dist/types",
+    "emitDeclarationOnly": false,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./src", "declarations.d.ts"],
+  "rootDir": "./src"
 }
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index a6cbc0864c..2b7cf0362b 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/digdir/designsystem/compare/@digdir/design-system-tokens@0.7.0...@digdir/design-system-tokens@0.8.0) (2023-10-05)
+
+### Features
+
+- Change `color` names `primary`, `secondary`, `tertiary` to `first`, `second`, `third` ([#887](https://github.com/digdir/designsystem/issues/887)) ([50f4eee](https://github.com/digdir/designsystem/commit/50f4eee4bf2ce813001ad1e28fa12648149fe677))
+
+# [0.7.0](https://github.com/digdir/designsystem/compare/@digdir/design-system-tokens@0.6.1...@digdir/design-system-tokens@0.7.0) (2023-09-21)
+
+### Features
+
+- **ErrorMessage:** Add Large size token ([#839](https://github.com/digdir/designsystem/issues/839)) ([a5a7739](https://github.com/digdir/designsystem/commit/a5a7739d75de642ea6841b61ca4b719be91856b0))
+
 ## [0.6.1](https://github.com/digdir/designsystem/compare/@digdir/design-system-tokens@0.6.0...@digdir/design-system-tokens@0.6.1) (2023-09-19)
 
 **Note:** Version bump only for package @digdir/design-system-tokens
diff --git a/packages/tokens/brand/altinn/tokens.cjs.js b/packages/tokens/brand/altinn/tokens.cjs.js
index 051b5801f5..404e003a2a 100644
--- a/packages/tokens/brand/altinn/tokens.cjs.js
+++ b/packages/tokens/brand/altinn/tokens.cjs.js
@@ -22,22 +22,22 @@ module.exports = {
   "semantic_surface_action_no_fill_hover": "#e6eff8",
   "semantic_surface_action_no_fill_active": "#b3d0ea",
   "semantic_surface_action_checked": "#0062ba",
-  "semantic_surface_action_primary_subtle": "#e6eff8",
-  "semantic_surface_action_primary_subtle_hover": "#b3d0ea",
-  "semantic_surface_action_primary_default": "#0062ba",
-  "semantic_surface_action_primary_hover": "#004e95",
-  "semantic_surface_action_primary_active": "#00315d",
-  "semantic_surface_action_primary_no_fill": "#ffffff",
-  "semantic_surface_action_primary_no_fill_hover": "#e6eff8",
-  "semantic_surface_action_primary_no_fill_active": "#b3d0ea",
-  "semantic_surface_action_secondary_subtle": "#f4f5f6",
-  "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
-  "semantic_surface_action_secondary_default": "#00315d",
-  "semantic_surface_action_secondary_hover": "rgba(0, 49, 93, 0.9)",
-  "semantic_surface_action_secondary_active": "rgba(0, 49, 93, 0.8)",
-  "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
+  "semantic_surface_action_first_subtle": "#e6eff8",
+  "semantic_surface_action_first_subtle_hover": "#b3d0ea",
+  "semantic_surface_action_first_default": "#0062ba",
+  "semantic_surface_action_first_hover": "#004e95",
+  "semantic_surface_action_first_active": "#00315d",
+  "semantic_surface_action_first_no_fill": "#ffffff",
+  "semantic_surface_action_first_no_fill_hover": "#e6eff8",
+  "semantic_surface_action_first_no_fill_active": "#b3d0ea",
+  "semantic_surface_action_second_subtle": "#f4f5f6",
+  "semantic_surface_action_second_subtle_hover": "#e9eaec",
+  "semantic_surface_action_second_default": "#00315d",
+  "semantic_surface_action_second_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_second_active": "rgba(0, 49, 93, 0.8)",
+  "semantic_surface_action_second_no_fill": "#ffffff",
+  "semantic_surface_action_second_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_second_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",
@@ -65,18 +65,18 @@ module.exports = {
   "semantic_surface_on_inverted_no_fill": "#ffffff00",
   "semantic_surface_on_inverted_no_fill_hover": "#ffffff1a",
   "semantic_surface_on_inverted_no_fill_active": "#ffffff33",
-  "semantic_surface_primary_light": "#B3D0EA",
-  "semantic_surface_primary_light_hover": "#80B1DD",
-  "semantic_surface_primary_light_active": "#66A1D6",
-  "semantic_surface_primary_dark": "#004E95",
-  "semantic_surface_secondary_light": "#C5BBDD",
-  "semantic_surface_secondary_light_hover": "#A392C8",
-  "semantic_surface_secondary_light_active": "#806AB4",
-  "semantic_surface_secondary_dark": "#231B36",
-  "semantic_surface_tertiary_light": "#F3ABB6",
-  "semantic_surface_tertiary_light_hover": "#EC8292",
-  "semantic_surface_tertiary_light_active": "#E6586D",
-  "semantic_surface_tertiary_dark": "#5A121D",
+  "semantic_surface_first_light": "#B3D0EA",
+  "semantic_surface_first_light_hover": "#80B1DD",
+  "semantic_surface_first_light_active": "#66A1D6",
+  "semantic_surface_first_dark": "#004E95",
+  "semantic_surface_second_light": "#C5BBDD",
+  "semantic_surface_second_light_hover": "#A392C8",
+  "semantic_surface_second_light_active": "#806AB4",
+  "semantic_surface_second_dark": "#231B36",
+  "semantic_surface_third_light": "#F3ABB6",
+  "semantic_surface_third_light_hover": "#EC8292",
+  "semantic_surface_third_light_active": "#E6586D",
+  "semantic_surface_third_dark": "#5A121D",
   "semantic_border_info_default": "#004e95",
   "semantic_border_action_subtle": "#b3d0ea",
   "semantic_border_action_subtle_hover": "#66a1d6",
@@ -85,16 +85,16 @@ module.exports = {
   "semantic_border_action_active": "#00315d",
   "semantic_border_action_dark": "#00315d",
   "semantic_border_action_dark_hover": "#0062ba",
-  "semantic_border_action_primary_subtle": "#b3d0ea",
-  "semantic_border_action_primary_subtle_hover": "#66a1d6",
-  "semantic_border_action_primary_default": "#0062ba",
-  "semantic_border_action_primary_hover": "#004e95",
-  "semantic_border_action_primary_active": "#00315d",
-  "semantic_border_action_secondary_subtle": "#e9eaec",
-  "semantic_border_action_secondary_subtle_hover": "#d2d5d8",
-  "semantic_border_action_secondary_default": "#00315d",
-  "semantic_border_action_secondary_hover": "#00315d",
-  "semantic_border_action_secondary_active": "#00315d",
+  "semantic_border_action_first_subtle": "#e9eaec",
+  "semantic_border_action_first_subtle_hover": "#d2d5d8",
+  "semantic_border_action_first_default": "#00315d",
+  "semantic_border_action_first_hover": "#00315d",
+  "semantic_border_action_first_active": "#00315d",
+  "semantic_border_action_second_subtle": "#e9eaec",
+  "semantic_border_action_second_subtle_hover": "#d2d5d8",
+  "semantic_border_action_second_default": "#00315d",
+  "semantic_border_action_second_hover": "#00315d",
+  "semantic_border_action_second_active": "#00315d",
   "semantic_border_neutral_default": "#68707c",
   "semantic_border_neutral_subtle": "#d2d5d8",
   "semantic_border_neutral_strong": "#1e2b3c",
@@ -113,15 +113,15 @@ module.exports = {
   "semantic_border_on_inverted_default": "#ffffff",
   "semantic_border_input_default": "#00315d",
   "semantic_border_input_hover": "#0062ba",
-  "semantic_border_primary_default": "#1A72C1",
-  "semantic_border_primary_hover": "#0062BA",
-  "semantic_border_primary_active": "#004E95",
-  "semantic_border_secondary_default": "#594488",
-  "semantic_border_secondary_hover": "#3F3161",
-  "semantic_border_secondary_active": "#352951",
-  "semantic_border_tertiary_default": "#B3253A",
-  "semantic_border_tertiary_hover": "#861C2C",
-  "semantic_border_tertiary_active": "#5A121D",
+  "semantic_border_first_default": "#1A72C1",
+  "semantic_border_first_hover": "#0062BA",
+  "semantic_border_first_active": "#004E95",
+  "semantic_border_second_default": "#594488",
+  "semantic_border_second_hover": "#3F3161",
+  "semantic_border_second_active": "#352951",
+  "semantic_border_third_default": "#B3253A",
+  "semantic_border_third_hover": "#861C2C",
+  "semantic_border_third_active": "#5A121D",
   "semantic_text_success_default": "#0c6536",
   "semantic_text_success_hover": "#084826",
   "semantic_text_success_active": "#084826",
@@ -134,14 +134,14 @@ module.exports = {
   "semantic_text_action_hover": "#004e95",
   "semantic_text_action_active": "#00315d",
   "semantic_text_action_on_action": "#ffffff",
-  "semantic_text_action_primary_default": "#0062ba",
-  "semantic_text_action_primary_hover": "#004e95",
-  "semantic_text_action_primary_active": "#00315d",
-  "semantic_text_action_primary_on_action": "#ffffff",
-  "semantic_text_action_secondary_default": "#00315d",
-  "semantic_text_action_secondary_hover": "#00315d",
-  "semantic_text_action_secondary_active": "#00315d",
-  "semantic_text_action_secondary_on_action": "#ffffff",
+  "semantic_text_action_first_default": "#0062ba",
+  "semantic_text_action_first_hover": "#004e95",
+  "semantic_text_action_first_active": "#00315d",
+  "semantic_text_action_first_on_action": "#ffffff",
+  "semantic_text_action_second_default": "#00315d",
+  "semantic_text_action_second_hover": "#00315d",
+  "semantic_text_action_second_active": "#00315d",
+  "semantic_text_action_second_on_action": "#ffffff",
   "semantic_text_warning_default": "#995404",
   "semantic_text_warning_icon_warning": "#cc7005",
   "semantic_text_warning_on_warning": "#663802",
@@ -170,6 +170,7 @@ module.exports = {
   "typography_label_medium": "500 1.125rem/1.3 'Inter'",
   "typography_label_small": "500 0.9375rem/1.3 'Inter'",
   "typography_label_xsmall": "500 0.8125rem/1.3 'Inter'",
+  "typography_error_message_large": "400 1.3125rem/1.3 'Inter'",
   "typography_error_message_medium": "400 1.125rem/1.3 'Inter'",
   "typography_error_message_small": "400 0.9375rem/1.3 'Inter'",
   "typography_error_message_xsmall": "400 0.8125rem/1.3 'Inter'",
@@ -224,33 +225,33 @@ module.exports = {
   "shadow_medium": "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a",
   "shadow_large": "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a",
   "shadow_xlarge": "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a",
-  "brand_primary_100": "#E6EFF8",
-  "brand_primary_200": "#B3D0EA",
-  "brand_primary_300": "#80B1DD",
-  "brand_primary_400": "#66A1D6",
-  "brand_primary_500": "#3381C8",
-  "brand_primary_600": "#1A72C1",
-  "brand_primary_700": "#0062BA",
-  "brand_primary_800": "#004E95",
-  "brand_primary_900": "#00315D",
-  "brand_secondary_100": "#DCD6EA",
-  "brand_secondary_200": "#C5BBDD",
-  "brand_secondary_300": "#A392C8",
-  "brand_secondary_400": "#806AB4",
-  "brand_secondary_500": "#6A52A3",
-  "brand_secondary_600": "#594488",
-  "brand_secondary_700": "#3F3161",
-  "brand_secondary_800": "#352951",
-  "brand_secondary_900": "#231B36",
-  "brand_tertiary_100": "#F9D5DB",
-  "brand_tertiary_200": "#F3ABB6",
-  "brand_tertiary_300": "#EC8292",
-  "brand_tertiary_400": "#E6586D",
-  "brand_tertiary_500": "#E02E49",
-  "brand_tertiary_600": "#B3253A",
-  "brand_tertiary_700": "#861C2C",
-  "brand_tertiary_800": "#5A121D",
-  "brand_tertiary_900": "#480e17",
+  "brand_alt1_100": "#E6EFF8",
+  "brand_alt1_200": "#B3D0EA",
+  "brand_alt1_300": "#80B1DD",
+  "brand_alt1_400": "#66A1D6",
+  "brand_alt1_500": "#3381C8",
+  "brand_alt1_600": "#1A72C1",
+  "brand_alt1_700": "#0062BA",
+  "brand_alt1_800": "#004E95",
+  "brand_alt1_900": "#00315D",
+  "brand_alt2_100": "#DCD6EA",
+  "brand_alt2_200": "#C5BBDD",
+  "brand_alt2_300": "#A392C8",
+  "brand_alt2_400": "#806AB4",
+  "brand_alt2_500": "#6A52A3",
+  "brand_alt2_600": "#594488",
+  "brand_alt2_700": "#3F3161",
+  "brand_alt2_800": "#352951",
+  "brand_alt2_900": "#231B36",
+  "brand_alt3_100": "#F9D5DB",
+  "brand_alt3_200": "#F3ABB6",
+  "brand_alt3_300": "#EC8292",
+  "brand_alt3_400": "#E6586D",
+  "brand_alt3_500": "#E02E49",
+  "brand_alt3_600": "#B3253A",
+  "brand_alt3_700": "#861C2C",
+  "brand_alt3_800": "#5A121D",
+  "brand_alt3_900": "#480e17",
   "component_mode_height_small": "36px",
   "component_mode_height_medium": "45px",
   "component_mode_height_large": "54px",
diff --git a/packages/tokens/brand/altinn/tokens.css b/packages/tokens/brand/altinn/tokens.css
index 6f8700209c..17e0caf4da 100644
--- a/packages/tokens/brand/altinn/tokens.css
+++ b/packages/tokens/brand/altinn/tokens.css
@@ -26,22 +26,22 @@
   --fds-semantic-surface-action-no_fill-hover: #e6eff8;
   --fds-semantic-surface-action-no_fill-active: #b3d0ea;
   --fds-semantic-surface-action-checked: #0062ba;
-  --fds-semantic-surface-action-primary-subtle: #e6eff8;
-  --fds-semantic-surface-action-primary-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-action-primary-default: #0062ba;
-  --fds-semantic-surface-action-primary-hover: #004e95;
-  --fds-semantic-surface-action-primary-active: #00315d;
-  --fds-semantic-surface-action-primary-no_fill: #ffffff;
-  --fds-semantic-surface-action-primary-no_fill-hover: #e6eff8;
-  --fds-semantic-surface-action-primary-no_fill-active: #b3d0ea;
-  --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
-  --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
-  --fds-semantic-surface-action-secondary-default: #00315d;
-  --fds-semantic-surface-action-secondary-hover: rgba(0, 49, 93, 0.9);
-  --fds-semantic-surface-action-secondary-active: rgba(0, 49, 93, 0.8);
-  --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
+  --fds-semantic-surface-action-first-subtle: #e6eff8;
+  --fds-semantic-surface-action-first-subtle-hover: #b3d0ea;
+  --fds-semantic-surface-action-first-default: #0062ba;
+  --fds-semantic-surface-action-first-hover: #004e95;
+  --fds-semantic-surface-action-first-active: #00315d;
+  --fds-semantic-surface-action-first-no_fill: #ffffff;
+  --fds-semantic-surface-action-first-no_fill-hover: #e6eff8;
+  --fds-semantic-surface-action-first-no_fill-active: #b3d0ea;
+  --fds-semantic-surface-action-second-subtle: #f4f5f6;
+  --fds-semantic-surface-action-second-subtle-hover: #e9eaec;
+  --fds-semantic-surface-action-second-default: #00315d;
+  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
+  --fds-semantic-surface-action-second-no_fill: #ffffff;
+  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;
@@ -69,18 +69,18 @@
   --fds-semantic-surface-on_inverted-no_fill: #ffffff00;
   --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a;
   --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33;
-  --fds-semantic-surface-primary-light: #B3D0EA;
-  --fds-semantic-surface-primary-light-hover: #80B1DD;
-  --fds-semantic-surface-primary-light-active: #66A1D6;
-  --fds-semantic-surface-primary-dark: #004E95;
-  --fds-semantic-surface-secondary-light: #C5BBDD;
-  --fds-semantic-surface-secondary-light-hover: #A392C8;
-  --fds-semantic-surface-secondary-light-active: #806AB4;
-  --fds-semantic-surface-secondary-dark: #231B36;
-  --fds-semantic-surface-tertiary-light: #F3ABB6;
-  --fds-semantic-surface-tertiary-light-hover: #EC8292;
-  --fds-semantic-surface-tertiary-light-active: #E6586D;
-  --fds-semantic-surface-tertiary-dark: #5A121D;
+  --fds-semantic-surface-first-light: #B3D0EA;
+  --fds-semantic-surface-first-light-hover: #80B1DD;
+  --fds-semantic-surface-first-light-active: #66A1D6;
+  --fds-semantic-surface-first-dark: #004E95;
+  --fds-semantic-surface-second-light: #C5BBDD;
+  --fds-semantic-surface-second-light-hover: #A392C8;
+  --fds-semantic-surface-second-light-active: #806AB4;
+  --fds-semantic-surface-second-dark: #231B36;
+  --fds-semantic-surface-third-light: #F3ABB6;
+  --fds-semantic-surface-third-light-hover: #EC8292;
+  --fds-semantic-surface-third-light-active: #E6586D;
+  --fds-semantic-surface-third-dark: #5A121D;
   --fds-semantic-border-info-default: #004e95;
   --fds-semantic-border-action-subtle: #b3d0ea;
   --fds-semantic-border-action-subtle-hover: #66a1d6;
@@ -89,16 +89,16 @@
   --fds-semantic-border-action-active: #00315d;
   --fds-semantic-border-action-dark: #00315d;
   --fds-semantic-border-action-dark-hover: #0062ba;
-  --fds-semantic-border-action-primary-subtle: #b3d0ea;
-  --fds-semantic-border-action-primary-subtle-hover: #66a1d6;
-  --fds-semantic-border-action-primary-default: #0062ba;
-  --fds-semantic-border-action-primary-hover: #004e95;
-  --fds-semantic-border-action-primary-active: #00315d;
-  --fds-semantic-border-action-secondary-subtle: #e9eaec;
-  --fds-semantic-border-action-secondary-subtle-hover: #d2d5d8;
-  --fds-semantic-border-action-secondary-default: #00315d;
-  --fds-semantic-border-action-secondary-hover: #00315d;
-  --fds-semantic-border-action-secondary-active: #00315d;
+  --fds-semantic-border-action-first-subtle: #e9eaec;
+  --fds-semantic-border-action-first-subtle-hover: #d2d5d8;
+  --fds-semantic-border-action-first-default: #00315d;
+  --fds-semantic-border-action-first-hover: #00315d;
+  --fds-semantic-border-action-first-active: #00315d;
+  --fds-semantic-border-action-second-subtle: #e9eaec;
+  --fds-semantic-border-action-second-subtle-hover: #d2d5d8;
+  --fds-semantic-border-action-second-default: #00315d;
+  --fds-semantic-border-action-second-hover: #00315d;
+  --fds-semantic-border-action-second-active: #00315d;
   --fds-semantic-border-neutral-default: #68707c;
   --fds-semantic-border-neutral-subtle: #d2d5d8;
   --fds-semantic-border-neutral-strong: #1e2b3c;
@@ -117,15 +117,15 @@
   --fds-semantic-border-on_inverted-default: #ffffff;
   --fds-semantic-border-input-default: #00315d;
   --fds-semantic-border-input-hover: #0062ba;
-  --fds-semantic-border-primary-default: #1A72C1;
-  --fds-semantic-border-primary-hover: #0062BA;
-  --fds-semantic-border-primary-active: #004E95;
-  --fds-semantic-border-secondary-default: #594488;
-  --fds-semantic-border-secondary-hover: #3F3161;
-  --fds-semantic-border-secondary-active: #352951;
-  --fds-semantic-border-tertiary-default: #B3253A;
-  --fds-semantic-border-tertiary-hover: #861C2C;
-  --fds-semantic-border-tertiary-active: #5A121D;
+  --fds-semantic-border-first-default: #1A72C1;
+  --fds-semantic-border-first-hover: #0062BA;
+  --fds-semantic-border-first-active: #004E95;
+  --fds-semantic-border-second-default: #594488;
+  --fds-semantic-border-second-hover: #3F3161;
+  --fds-semantic-border-second-active: #352951;
+  --fds-semantic-border-third-default: #B3253A;
+  --fds-semantic-border-third-hover: #861C2C;
+  --fds-semantic-border-third-active: #5A121D;
   --fds-semantic-text-success-default: #0c6536;
   --fds-semantic-text-success-hover: #084826;
   --fds-semantic-text-success-active: #084826;
@@ -138,14 +138,14 @@
   --fds-semantic-text-action-hover: #004e95;
   --fds-semantic-text-action-active: #00315d;
   --fds-semantic-text-action-on_action: #ffffff;
-  --fds-semantic-text-action-primary-default: #0062ba;
-  --fds-semantic-text-action-primary-hover: #004e95;
-  --fds-semantic-text-action-primary-active: #00315d;
-  --fds-semantic-text-action-primary-on_action: #ffffff;
-  --fds-semantic-text-action-secondary-default: #00315d;
-  --fds-semantic-text-action-secondary-hover: #00315d;
-  --fds-semantic-text-action-secondary-active: #00315d;
-  --fds-semantic-text-action-secondary-on_action: #ffffff;
+  --fds-semantic-text-action-first-default: #0062ba;
+  --fds-semantic-text-action-first-hover: #004e95;
+  --fds-semantic-text-action-first-active: #00315d;
+  --fds-semantic-text-action-first-on_action: #ffffff;
+  --fds-semantic-text-action-second-default: #00315d;
+  --fds-semantic-text-action-second-hover: #00315d;
+  --fds-semantic-text-action-second-active: #00315d;
+  --fds-semantic-text-action-second-on_action: #ffffff;
   --fds-semantic-text-warning-default: #995404;
   --fds-semantic-text-warning-icon_warning: #cc7005;
   --fds-semantic-text-warning-on_warning: #663802;
@@ -174,6 +174,7 @@
   --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-label-xsmall: 500 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
+  --fds-typography-error_message-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
   --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-error_message-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-error_message-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
@@ -228,33 +229,33 @@
   --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a;
   --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a;
   --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a;
-  --fds-brand-primary-100: #E6EFF8;
-  --fds-brand-primary-200: #B3D0EA;
-  --fds-brand-primary-300: #80B1DD;
-  --fds-brand-primary-400: #66A1D6;
-  --fds-brand-primary-500: #3381C8;
-  --fds-brand-primary-600: #1A72C1;
-  --fds-brand-primary-700: #0062BA;
-  --fds-brand-primary-800: #004E95;
-  --fds-brand-primary-900: #00315D;
-  --fds-brand-secondary-100: #DCD6EA;
-  --fds-brand-secondary-200: #C5BBDD;
-  --fds-brand-secondary-300: #A392C8;
-  --fds-brand-secondary-400: #806AB4;
-  --fds-brand-secondary-500: #6A52A3;
-  --fds-brand-secondary-600: #594488;
-  --fds-brand-secondary-700: #3F3161;
-  --fds-brand-secondary-800: #352951;
-  --fds-brand-secondary-900: #231B36;
-  --fds-brand-tertiary-100: #F9D5DB;
-  --fds-brand-tertiary-200: #F3ABB6;
-  --fds-brand-tertiary-300: #EC8292;
-  --fds-brand-tertiary-400: #E6586D;
-  --fds-brand-tertiary-500: #E02E49;
-  --fds-brand-tertiary-600: #B3253A;
-  --fds-brand-tertiary-700: #861C2C;
-  --fds-brand-tertiary-800: #5A121D;
-  --fds-brand-tertiary-900: #480e17;
+  --fds-brand-alt1-100: #E6EFF8;
+  --fds-brand-alt1-200: #B3D0EA;
+  --fds-brand-alt1-300: #80B1DD;
+  --fds-brand-alt1-400: #66A1D6;
+  --fds-brand-alt1-500: #3381C8;
+  --fds-brand-alt1-600: #1A72C1;
+  --fds-brand-alt1-700: #0062BA;
+  --fds-brand-alt1-800: #004E95;
+  --fds-brand-alt1-900: #00315D;
+  --fds-brand-alt2-100: #DCD6EA;
+  --fds-brand-alt2-200: #C5BBDD;
+  --fds-brand-alt2-300: #A392C8;
+  --fds-brand-alt2-400: #806AB4;
+  --fds-brand-alt2-500: #6A52A3;
+  --fds-brand-alt2-600: #594488;
+  --fds-brand-alt2-700: #3F3161;
+  --fds-brand-alt2-800: #352951;
+  --fds-brand-alt2-900: #231B36;
+  --fds-brand-alt3-100: #F9D5DB;
+  --fds-brand-alt3-200: #F3ABB6;
+  --fds-brand-alt3-300: #EC8292;
+  --fds-brand-alt3-400: #E6586D;
+  --fds-brand-alt3-500: #E02E49;
+  --fds-brand-alt3-600: #B3253A;
+  --fds-brand-alt3-700: #861C2C;
+  --fds-brand-alt3-800: #5A121D;
+  --fds-brand-alt3-900: #480e17;
   --fds-component-mode-height-small: 36px;
   --fds-component-mode-height-medium: var(--fds-sizing-10);
   --fds-component-mode-height-large: var(--fds-sizing-12);
diff --git a/packages/tokens/brand/altinn/tokens.d.ts b/packages/tokens/brand/altinn/tokens.d.ts
index 1bea6c8114..7d87c4a3ec 100644
--- a/packages/tokens/brand/altinn/tokens.d.ts
+++ b/packages/tokens/brand/altinn/tokens.d.ts
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill : string;
 export const semantic_surface_action_no_fill_hover : string;
 export const semantic_surface_action_no_fill_active : string;
 export const semantic_surface_action_checked : string;
-export const semantic_surface_action_primary_subtle : string;
-export const semantic_surface_action_primary_subtle_hover : string;
-export const semantic_surface_action_primary_default : string;
-export const semantic_surface_action_primary_hover : string;
-export const semantic_surface_action_primary_active : string;
-export const semantic_surface_action_primary_no_fill : string;
-export const semantic_surface_action_primary_no_fill_hover : string;
-export const semantic_surface_action_primary_no_fill_active : string;
-export const semantic_surface_action_secondary_subtle : string;
-export const semantic_surface_action_secondary_subtle_hover : string;
-export const semantic_surface_action_secondary_default : string;
-export const semantic_surface_action_secondary_hover : string;
-export const semantic_surface_action_secondary_active : string;
-export const semantic_surface_action_secondary_no_fill : string;
-export const semantic_surface_action_secondary_no_fill_hover : string;
-export const semantic_surface_action_secondary_no_fill_active : string;
+export const semantic_surface_action_first_subtle : string;
+export const semantic_surface_action_first_subtle_hover : string;
+export const semantic_surface_action_first_default : string;
+export const semantic_surface_action_first_hover : string;
+export const semantic_surface_action_first_active : string;
+export const semantic_surface_action_first_no_fill : string;
+export const semantic_surface_action_first_no_fill_hover : string;
+export const semantic_surface_action_first_no_fill_active : string;
+export const semantic_surface_action_second_subtle : string;
+export const semantic_surface_action_second_subtle_hover : string;
+export const semantic_surface_action_second_default : string;
+export const semantic_surface_action_second_hover : string;
+export const semantic_surface_action_second_active : string;
+export const semantic_surface_action_second_no_fill : string;
+export const semantic_surface_action_second_no_fill_hover : string;
+export const semantic_surface_action_second_no_fill_active : string;
 export const semantic_surface_success_subtle : string;
 export const semantic_surface_success_subtle_hover : string;
 export const semantic_surface_success_default : string;
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active : string;
 export const semantic_surface_on_inverted_no_fill : string;
 export const semantic_surface_on_inverted_no_fill_hover : string;
 export const semantic_surface_on_inverted_no_fill_active : string;
-export const semantic_surface_primary_light : string;
-export const semantic_surface_primary_light_hover : string;
-export const semantic_surface_primary_light_active : string;
-export const semantic_surface_primary_dark : string;
-export const semantic_surface_secondary_light : string;
-export const semantic_surface_secondary_light_hover : string;
-export const semantic_surface_secondary_light_active : string;
-export const semantic_surface_secondary_dark : string;
-export const semantic_surface_tertiary_light : string;
-export const semantic_surface_tertiary_light_hover : string;
-export const semantic_surface_tertiary_light_active : string;
-export const semantic_surface_tertiary_dark : string;
+export const semantic_surface_first_light : string;
+export const semantic_surface_first_light_hover : string;
+export const semantic_surface_first_light_active : string;
+export const semantic_surface_first_dark : string;
+export const semantic_surface_second_light : string;
+export const semantic_surface_second_light_hover : string;
+export const semantic_surface_second_light_active : string;
+export const semantic_surface_second_dark : string;
+export const semantic_surface_third_light : string;
+export const semantic_surface_third_light_hover : string;
+export const semantic_surface_third_light_active : string;
+export const semantic_surface_third_dark : string;
 export const semantic_border_info_default : string;
 export const semantic_border_action_subtle : string;
 export const semantic_border_action_subtle_hover : string;
@@ -84,16 +84,16 @@ export const semantic_border_action_hover : string;
 export const semantic_border_action_active : string;
 export const semantic_border_action_dark : string;
 export const semantic_border_action_dark_hover : string;
-export const semantic_border_action_primary_subtle : string;
-export const semantic_border_action_primary_subtle_hover : string;
-export const semantic_border_action_primary_default : string;
-export const semantic_border_action_primary_hover : string;
-export const semantic_border_action_primary_active : string;
-export const semantic_border_action_secondary_subtle : string;
-export const semantic_border_action_secondary_subtle_hover : string;
-export const semantic_border_action_secondary_default : string;
-export const semantic_border_action_secondary_hover : string;
-export const semantic_border_action_secondary_active : string;
+export const semantic_border_action_first_subtle : string;
+export const semantic_border_action_first_subtle_hover : string;
+export const semantic_border_action_first_default : string;
+export const semantic_border_action_first_hover : string;
+export const semantic_border_action_first_active : string;
+export const semantic_border_action_second_subtle : string;
+export const semantic_border_action_second_subtle_hover : string;
+export const semantic_border_action_second_default : string;
+export const semantic_border_action_second_hover : string;
+export const semantic_border_action_second_active : string;
 export const semantic_border_neutral_default : string;
 export const semantic_border_neutral_subtle : string;
 export const semantic_border_neutral_strong : string;
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow : string;
 export const semantic_border_on_inverted_default : string;
 export const semantic_border_input_default : string;
 export const semantic_border_input_hover : string;
-export const semantic_border_primary_default : string;
-export const semantic_border_primary_hover : string;
-export const semantic_border_primary_active : string;
-export const semantic_border_secondary_default : string;
-export const semantic_border_secondary_hover : string;
-export const semantic_border_secondary_active : string;
-export const semantic_border_tertiary_default : string;
-export const semantic_border_tertiary_hover : string;
-export const semantic_border_tertiary_active : string;
+export const semantic_border_first_default : string;
+export const semantic_border_first_hover : string;
+export const semantic_border_first_active : string;
+export const semantic_border_second_default : string;
+export const semantic_border_second_hover : string;
+export const semantic_border_second_active : string;
+export const semantic_border_third_default : string;
+export const semantic_border_third_hover : string;
+export const semantic_border_third_active : string;
 export const semantic_text_success_default : string;
 export const semantic_text_success_hover : string;
 export const semantic_text_success_active : string;
@@ -133,14 +133,14 @@ export const semantic_text_action_default : string;
 export const semantic_text_action_hover : string;
 export const semantic_text_action_active : string;
 export const semantic_text_action_on_action : string;
-export const semantic_text_action_primary_default : string;
-export const semantic_text_action_primary_hover : string;
-export const semantic_text_action_primary_active : string;
-export const semantic_text_action_primary_on_action : string;
-export const semantic_text_action_secondary_default : string;
-export const semantic_text_action_secondary_hover : string;
-export const semantic_text_action_secondary_active : string;
-export const semantic_text_action_secondary_on_action : string;
+export const semantic_text_action_first_default : string;
+export const semantic_text_action_first_hover : string;
+export const semantic_text_action_first_active : string;
+export const semantic_text_action_first_on_action : string;
+export const semantic_text_action_second_default : string;
+export const semantic_text_action_second_hover : string;
+export const semantic_text_action_second_active : string;
+export const semantic_text_action_second_on_action : string;
 export const semantic_text_warning_default : string;
 export const semantic_text_warning_icon_warning : string;
 export const semantic_text_warning_on_warning : string;
@@ -169,6 +169,7 @@ export const typography_label_large : string;
 export const typography_label_medium : string;
 export const typography_label_small : string;
 export const typography_label_xsmall : string;
+export const typography_error_message_large : string;
 export const typography_error_message_medium : string;
 export const typography_error_message_small : string;
 export const typography_error_message_xsmall : string;
@@ -223,33 +224,33 @@ export const shadow_small : string;
 export const shadow_medium : string;
 export const shadow_large : string;
 export const shadow_xlarge : string;
-export const brand_primary_100 : string;
-export const brand_primary_200 : string;
-export const brand_primary_300 : string;
-export const brand_primary_400 : string;
-export const brand_primary_500 : string;
-export const brand_primary_600 : string;
-export const brand_primary_700 : string;
-export const brand_primary_800 : string;
-export const brand_primary_900 : string;
-export const brand_secondary_100 : string;
-export const brand_secondary_200 : string;
-export const brand_secondary_300 : string;
-export const brand_secondary_400 : string;
-export const brand_secondary_500 : string;
-export const brand_secondary_600 : string;
-export const brand_secondary_700 : string;
-export const brand_secondary_800 : string;
-export const brand_secondary_900 : string;
-export const brand_tertiary_100 : string;
-export const brand_tertiary_200 : string;
-export const brand_tertiary_300 : string;
-export const brand_tertiary_400 : string;
-export const brand_tertiary_500 : string;
-export const brand_tertiary_600 : string;
-export const brand_tertiary_700 : string;
-export const brand_tertiary_800 : string;
-export const brand_tertiary_900 : string;
+export const brand_alt1_100 : string;
+export const brand_alt1_200 : string;
+export const brand_alt1_300 : string;
+export const brand_alt1_400 : string;
+export const brand_alt1_500 : string;
+export const brand_alt1_600 : string;
+export const brand_alt1_700 : string;
+export const brand_alt1_800 : string;
+export const brand_alt1_900 : string;
+export const brand_alt2_100 : string;
+export const brand_alt2_200 : string;
+export const brand_alt2_300 : string;
+export const brand_alt2_400 : string;
+export const brand_alt2_500 : string;
+export const brand_alt2_600 : string;
+export const brand_alt2_700 : string;
+export const brand_alt2_800 : string;
+export const brand_alt2_900 : string;
+export const brand_alt3_100 : string;
+export const brand_alt3_200 : string;
+export const brand_alt3_300 : string;
+export const brand_alt3_400 : string;
+export const brand_alt3_500 : string;
+export const brand_alt3_600 : string;
+export const brand_alt3_700 : string;
+export const brand_alt3_800 : string;
+export const brand_alt3_900 : string;
 export const component_mode_height_small : string;
 export const component_mode_height_medium : string;
 export const component_mode_height_large : string;
diff --git a/packages/tokens/brand/altinn/tokens.esm.js b/packages/tokens/brand/altinn/tokens.esm.js
index 740d43317a..445a2b2275 100644
--- a/packages/tokens/brand/altinn/tokens.esm.js
+++ b/packages/tokens/brand/altinn/tokens.esm.js
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill = "#ffffff";
 export const semantic_surface_action_no_fill_hover = "#e6eff8";
 export const semantic_surface_action_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_checked = "#0062ba";
-export const semantic_surface_action_primary_subtle = "#e6eff8";
-export const semantic_surface_action_primary_subtle_hover = "#b3d0ea";
-export const semantic_surface_action_primary_default = "#0062ba";
-export const semantic_surface_action_primary_hover = "#004e95";
-export const semantic_surface_action_primary_active = "#00315d";
-export const semantic_surface_action_primary_no_fill = "#ffffff";
-export const semantic_surface_action_primary_no_fill_hover = "#e6eff8";
-export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
-export const semantic_surface_action_secondary_subtle = "#f4f5f6";
-export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
-export const semantic_surface_action_secondary_default = "#00315d";
-export const semantic_surface_action_secondary_hover = "rgba(0, 49, 93, 0.9)";
-export const semantic_surface_action_secondary_active = "rgba(0, 49, 93, 0.8)";
-export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
+export const semantic_surface_action_first_subtle = "#e6eff8";
+export const semantic_surface_action_first_subtle_hover = "#b3d0ea";
+export const semantic_surface_action_first_default = "#0062ba";
+export const semantic_surface_action_first_hover = "#004e95";
+export const semantic_surface_action_first_active = "#00315d";
+export const semantic_surface_action_first_no_fill = "#ffffff";
+export const semantic_surface_action_first_no_fill_hover = "#e6eff8";
+export const semantic_surface_action_first_no_fill_active = "#b3d0ea";
+export const semantic_surface_action_second_subtle = "#f4f5f6";
+export const semantic_surface_action_second_subtle_hover = "#e9eaec";
+export const semantic_surface_action_second_default = "#00315d";
+export const semantic_surface_action_second_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_second_active = "rgba(0, 49, 93, 0.8)";
+export const semantic_surface_action_second_no_fill = "#ffffff";
+export const semantic_surface_action_second_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_second_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active = "#ffffffcc";
 export const semantic_surface_on_inverted_no_fill = "#ffffff00";
 export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a";
 export const semantic_surface_on_inverted_no_fill_active = "#ffffff33";
-export const semantic_surface_primary_light = "#B3D0EA";
-export const semantic_surface_primary_light_hover = "#80B1DD";
-export const semantic_surface_primary_light_active = "#66A1D6";
-export const semantic_surface_primary_dark = "#004E95";
-export const semantic_surface_secondary_light = "#C5BBDD";
-export const semantic_surface_secondary_light_hover = "#A392C8";
-export const semantic_surface_secondary_light_active = "#806AB4";
-export const semantic_surface_secondary_dark = "#231B36";
-export const semantic_surface_tertiary_light = "#F3ABB6";
-export const semantic_surface_tertiary_light_hover = "#EC8292";
-export const semantic_surface_tertiary_light_active = "#E6586D";
-export const semantic_surface_tertiary_dark = "#5A121D";
+export const semantic_surface_first_light = "#B3D0EA";
+export const semantic_surface_first_light_hover = "#80B1DD";
+export const semantic_surface_first_light_active = "#66A1D6";
+export const semantic_surface_first_dark = "#004E95";
+export const semantic_surface_second_light = "#C5BBDD";
+export const semantic_surface_second_light_hover = "#A392C8";
+export const semantic_surface_second_light_active = "#806AB4";
+export const semantic_surface_second_dark = "#231B36";
+export const semantic_surface_third_light = "#F3ABB6";
+export const semantic_surface_third_light_hover = "#EC8292";
+export const semantic_surface_third_light_active = "#E6586D";
+export const semantic_surface_third_dark = "#5A121D";
 export const semantic_border_info_default = "#004e95";
 export const semantic_border_action_subtle = "#b3d0ea";
 export const semantic_border_action_subtle_hover = "#66a1d6";
@@ -84,16 +84,16 @@ export const semantic_border_action_hover = "#0062ba";
 export const semantic_border_action_active = "#00315d";
 export const semantic_border_action_dark = "#00315d";
 export const semantic_border_action_dark_hover = "#0062ba";
-export const semantic_border_action_primary_subtle = "#b3d0ea";
-export const semantic_border_action_primary_subtle_hover = "#66a1d6";
-export const semantic_border_action_primary_default = "#0062ba";
-export const semantic_border_action_primary_hover = "#004e95";
-export const semantic_border_action_primary_active = "#00315d";
-export const semantic_border_action_secondary_subtle = "#e9eaec";
-export const semantic_border_action_secondary_subtle_hover = "#d2d5d8";
-export const semantic_border_action_secondary_default = "#00315d";
-export const semantic_border_action_secondary_hover = "#00315d";
-export const semantic_border_action_secondary_active = "#00315d";
+export const semantic_border_action_first_subtle = "#e9eaec";
+export const semantic_border_action_first_subtle_hover = "#d2d5d8";
+export const semantic_border_action_first_default = "#00315d";
+export const semantic_border_action_first_hover = "#00315d";
+export const semantic_border_action_first_active = "#00315d";
+export const semantic_border_action_second_subtle = "#e9eaec";
+export const semantic_border_action_second_subtle_hover = "#d2d5d8";
+export const semantic_border_action_second_default = "#00315d";
+export const semantic_border_action_second_hover = "#00315d";
+export const semantic_border_action_second_active = "#00315d";
 export const semantic_border_neutral_default = "#68707c";
 export const semantic_border_neutral_subtle = "#d2d5d8";
 export const semantic_border_neutral_strong = "#1e2b3c";
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow = "#1e2b3c";
 export const semantic_border_on_inverted_default = "#ffffff";
 export const semantic_border_input_default = "#00315d";
 export const semantic_border_input_hover = "#0062ba";
-export const semantic_border_primary_default = "#1A72C1";
-export const semantic_border_primary_hover = "#0062BA";
-export const semantic_border_primary_active = "#004E95";
-export const semantic_border_secondary_default = "#594488";
-export const semantic_border_secondary_hover = "#3F3161";
-export const semantic_border_secondary_active = "#352951";
-export const semantic_border_tertiary_default = "#B3253A";
-export const semantic_border_tertiary_hover = "#861C2C";
-export const semantic_border_tertiary_active = "#5A121D";
+export const semantic_border_first_default = "#1A72C1";
+export const semantic_border_first_hover = "#0062BA";
+export const semantic_border_first_active = "#004E95";
+export const semantic_border_second_default = "#594488";
+export const semantic_border_second_hover = "#3F3161";
+export const semantic_border_second_active = "#352951";
+export const semantic_border_third_default = "#B3253A";
+export const semantic_border_third_hover = "#861C2C";
+export const semantic_border_third_active = "#5A121D";
 export const semantic_text_success_default = "#0c6536";
 export const semantic_text_success_hover = "#084826";
 export const semantic_text_success_active = "#084826";
@@ -133,14 +133,14 @@ export const semantic_text_action_default = "#0062ba";
 export const semantic_text_action_hover = "#004e95";
 export const semantic_text_action_active = "#00315d";
 export const semantic_text_action_on_action = "#ffffff";
-export const semantic_text_action_primary_default = "#0062ba";
-export const semantic_text_action_primary_hover = "#004e95";
-export const semantic_text_action_primary_active = "#00315d";
-export const semantic_text_action_primary_on_action = "#ffffff";
-export const semantic_text_action_secondary_default = "#00315d";
-export const semantic_text_action_secondary_hover = "#00315d";
-export const semantic_text_action_secondary_active = "#00315d";
-export const semantic_text_action_secondary_on_action = "#ffffff";
+export const semantic_text_action_first_default = "#0062ba";
+export const semantic_text_action_first_hover = "#004e95";
+export const semantic_text_action_first_active = "#00315d";
+export const semantic_text_action_first_on_action = "#ffffff";
+export const semantic_text_action_second_default = "#00315d";
+export const semantic_text_action_second_hover = "#00315d";
+export const semantic_text_action_second_active = "#00315d";
+export const semantic_text_action_second_on_action = "#ffffff";
 export const semantic_text_warning_default = "#995404";
 export const semantic_text_warning_icon_warning = "#cc7005";
 export const semantic_text_warning_on_warning = "#663802";
@@ -169,6 +169,7 @@ export const typography_label_large = "500 1.3125rem/1.3 'Inter'";
 export const typography_label_medium = "500 1.125rem/1.3 'Inter'";
 export const typography_label_small = "500 0.9375rem/1.3 'Inter'";
 export const typography_label_xsmall = "500 0.8125rem/1.3 'Inter'";
+export const typography_error_message_large = "400 1.3125rem/1.3 'Inter'";
 export const typography_error_message_medium = "400 1.125rem/1.3 'Inter'";
 export const typography_error_message_small = "400 0.9375rem/1.3 'Inter'";
 export const typography_error_message_xsmall = "400 0.8125rem/1.3 'Inter'";
@@ -223,33 +224,33 @@ export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a";
 export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a";
 export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a";
 export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a";
-export const brand_primary_100 = "#E6EFF8";
-export const brand_primary_200 = "#B3D0EA";
-export const brand_primary_300 = "#80B1DD";
-export const brand_primary_400 = "#66A1D6";
-export const brand_primary_500 = "#3381C8";
-export const brand_primary_600 = "#1A72C1";
-export const brand_primary_700 = "#0062BA";
-export const brand_primary_800 = "#004E95";
-export const brand_primary_900 = "#00315D";
-export const brand_secondary_100 = "#DCD6EA";
-export const brand_secondary_200 = "#C5BBDD";
-export const brand_secondary_300 = "#A392C8";
-export const brand_secondary_400 = "#806AB4";
-export const brand_secondary_500 = "#6A52A3";
-export const brand_secondary_600 = "#594488";
-export const brand_secondary_700 = "#3F3161";
-export const brand_secondary_800 = "#352951";
-export const brand_secondary_900 = "#231B36";
-export const brand_tertiary_100 = "#F9D5DB";
-export const brand_tertiary_200 = "#F3ABB6";
-export const brand_tertiary_300 = "#EC8292";
-export const brand_tertiary_400 = "#E6586D";
-export const brand_tertiary_500 = "#E02E49";
-export const brand_tertiary_600 = "#B3253A";
-export const brand_tertiary_700 = "#861C2C";
-export const brand_tertiary_800 = "#5A121D";
-export const brand_tertiary_900 = "#480e17";
+export const brand_alt1_100 = "#E6EFF8";
+export const brand_alt1_200 = "#B3D0EA";
+export const brand_alt1_300 = "#80B1DD";
+export const brand_alt1_400 = "#66A1D6";
+export const brand_alt1_500 = "#3381C8";
+export const brand_alt1_600 = "#1A72C1";
+export const brand_alt1_700 = "#0062BA";
+export const brand_alt1_800 = "#004E95";
+export const brand_alt1_900 = "#00315D";
+export const brand_alt2_100 = "#DCD6EA";
+export const brand_alt2_200 = "#C5BBDD";
+export const brand_alt2_300 = "#A392C8";
+export const brand_alt2_400 = "#806AB4";
+export const brand_alt2_500 = "#6A52A3";
+export const brand_alt2_600 = "#594488";
+export const brand_alt2_700 = "#3F3161";
+export const brand_alt2_800 = "#352951";
+export const brand_alt2_900 = "#231B36";
+export const brand_alt3_100 = "#F9D5DB";
+export const brand_alt3_200 = "#F3ABB6";
+export const brand_alt3_300 = "#EC8292";
+export const brand_alt3_400 = "#E6586D";
+export const brand_alt3_500 = "#E02E49";
+export const brand_alt3_600 = "#B3253A";
+export const brand_alt3_700 = "#861C2C";
+export const brand_alt3_800 = "#5A121D";
+export const brand_alt3_900 = "#480e17";
 export const component_mode_height_small = "36px";
 export const component_mode_height_medium = "45px";
 export const component_mode_height_large = "54px";
diff --git a/packages/tokens/brand/brreg/tokens.cjs.js b/packages/tokens/brand/brreg/tokens.cjs.js
index d9730098fc..619e26d370 100644
--- a/packages/tokens/brand/brreg/tokens.cjs.js
+++ b/packages/tokens/brand/brreg/tokens.cjs.js
@@ -22,22 +22,22 @@ module.exports = {
   "semantic_surface_action_no_fill_hover": "#e6eff8",
   "semantic_surface_action_no_fill_active": "#b3d0ea",
   "semantic_surface_action_checked": "#0062ba",
-  "semantic_surface_action_primary_subtle": "#e6eff8",
-  "semantic_surface_action_primary_subtle_hover": "#b3d0ea",
-  "semantic_surface_action_primary_default": "#0062ba",
-  "semantic_surface_action_primary_hover": "#004e95",
-  "semantic_surface_action_primary_active": "#00315d",
-  "semantic_surface_action_primary_no_fill": "#ffffff",
-  "semantic_surface_action_primary_no_fill_hover": "#e6eff8",
-  "semantic_surface_action_primary_no_fill_active": "#b3d0ea",
-  "semantic_surface_action_secondary_subtle": "#f4f5f6",
-  "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
-  "semantic_surface_action_secondary_default": "#00315d",
-  "semantic_surface_action_secondary_hover": "rgba(0, 49, 93, 0.9)",
-  "semantic_surface_action_secondary_active": "rgba(0, 49, 93, 0.8)",
-  "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
+  "semantic_surface_action_first_subtle": "#e6eff8",
+  "semantic_surface_action_first_subtle_hover": "#b3d0ea",
+  "semantic_surface_action_first_default": "#0062ba",
+  "semantic_surface_action_first_hover": "#004e95",
+  "semantic_surface_action_first_active": "#00315d",
+  "semantic_surface_action_first_no_fill": "#ffffff",
+  "semantic_surface_action_first_no_fill_hover": "#e6eff8",
+  "semantic_surface_action_first_no_fill_active": "#b3d0ea",
+  "semantic_surface_action_second_subtle": "#f4f5f6",
+  "semantic_surface_action_second_subtle_hover": "#e9eaec",
+  "semantic_surface_action_second_default": "#00315d",
+  "semantic_surface_action_second_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_second_active": "rgba(0, 49, 93, 0.8)",
+  "semantic_surface_action_second_no_fill": "#ffffff",
+  "semantic_surface_action_second_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_second_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",
@@ -65,18 +65,18 @@ module.exports = {
   "semantic_surface_on_inverted_no_fill": "#ffffff00",
   "semantic_surface_on_inverted_no_fill_hover": "#ffffff1a",
   "semantic_surface_on_inverted_no_fill_active": "#ffffff33",
-  "semantic_surface_primary_light": "#D1E4FF",
-  "semantic_surface_primary_light_hover": "#76ADFB",
-  "semantic_surface_primary_light_active": "#5391E9",
-  "semantic_surface_primary_dark": "#004785",
-  "semantic_surface_secondary_light": "#C9E7F4",
-  "semantic_surface_secondary_light_hover": "#70B3D7",
-  "semantic_surface_secondary_light_active": "#4E99BD",
-  "semantic_surface_secondary_dark": "#1F4B63",
-  "semantic_surface_tertiary_light": "#D7E5E7",
-  "semantic_surface_tertiary_light_hover": "#B9CACB",
-  "semantic_surface_tertiary_light_active": "#9FAEAF",
-  "semantic_surface_tertiary_dark": "#414849",
+  "semantic_surface_first_light": "#D1E4FF",
+  "semantic_surface_first_light_hover": "#76ADFB",
+  "semantic_surface_first_light_active": "#5391E9",
+  "semantic_surface_first_dark": "#004785",
+  "semantic_surface_second_light": "#C9E7F4",
+  "semantic_surface_second_light_hover": "#70B3D7",
+  "semantic_surface_second_light_active": "#4E99BD",
+  "semantic_surface_second_dark": "#1F4B63",
+  "semantic_surface_third_light": "#D7E5E7",
+  "semantic_surface_third_light_hover": "#B9CACB",
+  "semantic_surface_third_light_active": "#9FAEAF",
+  "semantic_surface_third_dark": "#414849",
   "semantic_border_info_default": "#004e95",
   "semantic_border_action_subtle": "#b3d0ea",
   "semantic_border_action_subtle_hover": "#66a1d6",
@@ -85,16 +85,16 @@ module.exports = {
   "semantic_border_action_active": "#00315d",
   "semantic_border_action_dark": "#00315d",
   "semantic_border_action_dark_hover": "#0062ba",
-  "semantic_border_action_primary_subtle": "#b3d0ea",
-  "semantic_border_action_primary_subtle_hover": "#66a1d6",
-  "semantic_border_action_primary_default": "#0062ba",
-  "semantic_border_action_primary_hover": "#004e95",
-  "semantic_border_action_primary_active": "#00315d",
-  "semantic_border_action_secondary_subtle": "#e9eaec",
-  "semantic_border_action_secondary_subtle_hover": "#d2d5d8",
-  "semantic_border_action_secondary_default": "#00315d",
-  "semantic_border_action_secondary_hover": "#00315d",
-  "semantic_border_action_secondary_active": "#00315d",
+  "semantic_border_action_first_subtle": "#e9eaec",
+  "semantic_border_action_first_subtle_hover": "#d2d5d8",
+  "semantic_border_action_first_default": "#00315d",
+  "semantic_border_action_first_hover": "#00315d",
+  "semantic_border_action_first_active": "#00315d",
+  "semantic_border_action_second_subtle": "#e9eaec",
+  "semantic_border_action_second_subtle_hover": "#d2d5d8",
+  "semantic_border_action_second_default": "#00315d",
+  "semantic_border_action_second_hover": "#00315d",
+  "semantic_border_action_second_active": "#00315d",
   "semantic_border_neutral_default": "#68707c",
   "semantic_border_neutral_subtle": "#d2d5d8",
   "semantic_border_neutral_strong": "#1e2b3c",
@@ -113,15 +113,15 @@ module.exports = {
   "semantic_border_on_inverted_default": "#ffffff",
   "semantic_border_input_default": "#00315d",
   "semantic_border_input_hover": "#0062ba",
-  "semantic_border_primary_default": "#005FAE",
-  "semantic_border_primary_hover": "#004785",
-  "semantic_border_primary_active": "#00315E",
-  "semantic_border_secondary_default": "#2C647E",
-  "semantic_border_secondary_hover": "#1F4B63",
-  "semantic_border_secondary_active": "#133349",
-  "semantic_border_tertiary_default": "#879394",
-  "semantic_border_tertiary_hover": "#6D7879",
-  "semantic_border_tertiary_active": "#576061",
+  "semantic_border_first_default": "#005FAE",
+  "semantic_border_first_hover": "#004785",
+  "semantic_border_first_active": "#00315E",
+  "semantic_border_second_default": "#2C647E",
+  "semantic_border_second_hover": "#1F4B63",
+  "semantic_border_second_active": "#133349",
+  "semantic_border_third_default": "#879394",
+  "semantic_border_third_hover": "#6D7879",
+  "semantic_border_third_active": "#576061",
   "semantic_text_success_default": "#0c6536",
   "semantic_text_success_hover": "#084826",
   "semantic_text_success_active": "#084826",
@@ -134,14 +134,14 @@ module.exports = {
   "semantic_text_action_hover": "#004e95",
   "semantic_text_action_active": "#00315d",
   "semantic_text_action_on_action": "#ffffff",
-  "semantic_text_action_primary_default": "#0062ba",
-  "semantic_text_action_primary_hover": "#004e95",
-  "semantic_text_action_primary_active": "#00315d",
-  "semantic_text_action_primary_on_action": "#ffffff",
-  "semantic_text_action_secondary_default": "#00315d",
-  "semantic_text_action_secondary_hover": "#00315d",
-  "semantic_text_action_secondary_active": "#00315d",
-  "semantic_text_action_secondary_on_action": "#ffffff",
+  "semantic_text_action_first_default": "#00315d",
+  "semantic_text_action_first_hover": "#00315d",
+  "semantic_text_action_first_active": "#00315d",
+  "semantic_text_action_first_on_action": "#ffffff",
+  "semantic_text_action_second_default": "#00315d",
+  "semantic_text_action_second_hover": "#00315d",
+  "semantic_text_action_second_active": "#00315d",
+  "semantic_text_action_second_on_action": "#ffffff",
   "semantic_text_warning_default": "#995404",
   "semantic_text_warning_icon_warning": "#cc7005",
   "semantic_text_warning_on_warning": "#663802",
@@ -170,6 +170,7 @@ module.exports = {
   "typography_label_medium": "500 1.125rem/1.3 'Inter'",
   "typography_label_small": "500 0.9375rem/1.3 'Inter'",
   "typography_label_xsmall": "500 0.8125rem/1.3 'Inter'",
+  "typography_error_message_large": "400 1.3125rem/1.3 'Inter'",
   "typography_error_message_medium": "400 1.125rem/1.3 'Inter'",
   "typography_error_message_small": "400 0.9375rem/1.3 'Inter'",
   "typography_error_message_xsmall": "400 0.8125rem/1.3 'Inter'",
@@ -224,39 +225,39 @@ module.exports = {
   "shadow_medium": "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a",
   "shadow_large": "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a",
   "shadow_xlarge": "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a",
-  "brand_primary_50": "#FFFFFF",
-  "brand_primary_100": "#D1E4FF",
-  "brand_primary_200": "#9ECAFF",
-  "brand_primary_300": "#76ADFB",
-  "brand_primary_400": "#5391E9",
-  "brand_primary_500": "#2B77CC",
-  "brand_primary_600": "#005FAE",
-  "brand_primary_700": "#004785",
-  "brand_primary_800": "#00315E",
-  "brand_primary_900": "#001C3A",
-  "brand_primary_950": "#001127",
-  "brand_secondary_50": "#FFFFFF",
-  "brand_secondary_100": "#E5F3F9",
-  "brand_secondary_200": "#C9E7F4",
-  "brand_secondary_300": "#70B3D7",
-  "brand_secondary_400": "#4E99BD",
-  "brand_secondary_500": "#3B7D9B",
-  "brand_secondary_600": "#2C647E",
-  "brand_secondary_700": "#1F4B63",
-  "brand_secondary_800": "#133349",
-  "brand_secondary_900": "#071D2C",
-  "brand_secondary_950": "#03121D",
-  "brand_tertiary_50": "#EBF2F3",
-  "brand_tertiary_100": "#D7E5E7",
-  "brand_tertiary_200": "#B9CACB",
-  "brand_tertiary_300": "#9FAEAF",
-  "brand_tertiary_400": "#879394",
-  "brand_tertiary_500": "#6D7879",
-  "brand_tertiary_600": "#576061",
-  "brand_tertiary_700": "#414849",
-  "brand_tertiary_800": "#2C3132",
-  "brand_tertiary_900": "#191C1C",
-  "brand_tertiary_950": "#0F1112",
+  "brand_alt1_50": "#FFFFFF",
+  "brand_alt1_100": "#D1E4FF",
+  "brand_alt1_200": "#9ECAFF",
+  "brand_alt1_300": "#76ADFB",
+  "brand_alt1_400": "#5391E9",
+  "brand_alt1_500": "#2B77CC",
+  "brand_alt1_600": "#005FAE",
+  "brand_alt1_700": "#004785",
+  "brand_alt1_800": "#00315E",
+  "brand_alt1_900": "#001C3A",
+  "brand_alt1_950": "#001127",
+  "brand_alt2_50": "#FFFFFF",
+  "brand_alt2_100": "#E5F3F9",
+  "brand_alt2_200": "#C9E7F4",
+  "brand_alt2_300": "#70B3D7",
+  "brand_alt2_400": "#4E99BD",
+  "brand_alt2_500": "#3B7D9B",
+  "brand_alt2_600": "#2C647E",
+  "brand_alt2_700": "#1F4B63",
+  "brand_alt2_800": "#133349",
+  "brand_alt2_900": "#071D2C",
+  "brand_alt2_950": "#03121D",
+  "brand_alt3_50": "#EBF2F3",
+  "brand_alt3_100": "#D7E5E7",
+  "brand_alt3_200": "#B9CACB",
+  "brand_alt3_300": "#9FAEAF",
+  "brand_alt3_400": "#879394",
+  "brand_alt3_500": "#6D7879",
+  "brand_alt3_600": "#576061",
+  "brand_alt3_700": "#414849",
+  "brand_alt3_800": "#2C3132",
+  "brand_alt3_900": "#191C1C",
+  "brand_alt3_950": "#0F1112",
   "component_mode_height_small": "36px",
   "component_mode_height_medium": "45px",
   "component_mode_height_large": "54px",
diff --git a/packages/tokens/brand/brreg/tokens.css b/packages/tokens/brand/brreg/tokens.css
index 124ed7da86..904cbb2c54 100644
--- a/packages/tokens/brand/brreg/tokens.css
+++ b/packages/tokens/brand/brreg/tokens.css
@@ -26,22 +26,22 @@
   --fds-semantic-surface-action-no_fill-hover: #e6eff8;
   --fds-semantic-surface-action-no_fill-active: #b3d0ea;
   --fds-semantic-surface-action-checked: #0062ba;
-  --fds-semantic-surface-action-primary-subtle: #e6eff8;
-  --fds-semantic-surface-action-primary-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-action-primary-default: #0062ba;
-  --fds-semantic-surface-action-primary-hover: #004e95;
-  --fds-semantic-surface-action-primary-active: #00315d;
-  --fds-semantic-surface-action-primary-no_fill: #ffffff;
-  --fds-semantic-surface-action-primary-no_fill-hover: #e6eff8;
-  --fds-semantic-surface-action-primary-no_fill-active: #b3d0ea;
-  --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
-  --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
-  --fds-semantic-surface-action-secondary-default: #00315d;
-  --fds-semantic-surface-action-secondary-hover: rgba(0, 49, 93, 0.9);
-  --fds-semantic-surface-action-secondary-active: rgba(0, 49, 93, 0.8);
-  --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
+  --fds-semantic-surface-action-first-subtle: #e6eff8;
+  --fds-semantic-surface-action-first-subtle-hover: #b3d0ea;
+  --fds-semantic-surface-action-first-default: #0062ba;
+  --fds-semantic-surface-action-first-hover: #004e95;
+  --fds-semantic-surface-action-first-active: #00315d;
+  --fds-semantic-surface-action-first-no_fill: #ffffff;
+  --fds-semantic-surface-action-first-no_fill-hover: #e6eff8;
+  --fds-semantic-surface-action-first-no_fill-active: #b3d0ea;
+  --fds-semantic-surface-action-second-subtle: #f4f5f6;
+  --fds-semantic-surface-action-second-subtle-hover: #e9eaec;
+  --fds-semantic-surface-action-second-default: #00315d;
+  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
+  --fds-semantic-surface-action-second-no_fill: #ffffff;
+  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;
@@ -69,18 +69,18 @@
   --fds-semantic-surface-on_inverted-no_fill: #ffffff00;
   --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a;
   --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33;
-  --fds-semantic-surface-primary-light: #D1E4FF;
-  --fds-semantic-surface-primary-light-hover: #76ADFB;
-  --fds-semantic-surface-primary-light-active: #5391E9;
-  --fds-semantic-surface-primary-dark: #004785;
-  --fds-semantic-surface-secondary-light: #C9E7F4;
-  --fds-semantic-surface-secondary-light-hover: #70B3D7;
-  --fds-semantic-surface-secondary-light-active: #4E99BD;
-  --fds-semantic-surface-secondary-dark: #1F4B63;
-  --fds-semantic-surface-tertiary-light: #D7E5E7;
-  --fds-semantic-surface-tertiary-light-hover: #B9CACB;
-  --fds-semantic-surface-tertiary-light-active: #9FAEAF;
-  --fds-semantic-surface-tertiary-dark: #414849;
+  --fds-semantic-surface-first-light: #D1E4FF;
+  --fds-semantic-surface-first-light-hover: #76ADFB;
+  --fds-semantic-surface-first-light-active: #5391E9;
+  --fds-semantic-surface-first-dark: #004785;
+  --fds-semantic-surface-second-light: #C9E7F4;
+  --fds-semantic-surface-second-light-hover: #70B3D7;
+  --fds-semantic-surface-second-light-active: #4E99BD;
+  --fds-semantic-surface-second-dark: #1F4B63;
+  --fds-semantic-surface-third-light: #D7E5E7;
+  --fds-semantic-surface-third-light-hover: #B9CACB;
+  --fds-semantic-surface-third-light-active: #9FAEAF;
+  --fds-semantic-surface-third-dark: #414849;
   --fds-semantic-border-info-default: #004e95;
   --fds-semantic-border-action-subtle: #b3d0ea;
   --fds-semantic-border-action-subtle-hover: #66a1d6;
@@ -89,16 +89,16 @@
   --fds-semantic-border-action-active: #00315d;
   --fds-semantic-border-action-dark: #00315d;
   --fds-semantic-border-action-dark-hover: #0062ba;
-  --fds-semantic-border-action-primary-subtle: #b3d0ea;
-  --fds-semantic-border-action-primary-subtle-hover: #66a1d6;
-  --fds-semantic-border-action-primary-default: #0062ba;
-  --fds-semantic-border-action-primary-hover: #004e95;
-  --fds-semantic-border-action-primary-active: #00315d;
-  --fds-semantic-border-action-secondary-subtle: #e9eaec;
-  --fds-semantic-border-action-secondary-subtle-hover: #d2d5d8;
-  --fds-semantic-border-action-secondary-default: #00315d;
-  --fds-semantic-border-action-secondary-hover: #00315d;
-  --fds-semantic-border-action-secondary-active: #00315d;
+  --fds-semantic-border-action-first-subtle: #e9eaec;
+  --fds-semantic-border-action-first-subtle-hover: #d2d5d8;
+  --fds-semantic-border-action-first-default: #00315d;
+  --fds-semantic-border-action-first-hover: #00315d;
+  --fds-semantic-border-action-first-active: #00315d;
+  --fds-semantic-border-action-second-subtle: #e9eaec;
+  --fds-semantic-border-action-second-subtle-hover: #d2d5d8;
+  --fds-semantic-border-action-second-default: #00315d;
+  --fds-semantic-border-action-second-hover: #00315d;
+  --fds-semantic-border-action-second-active: #00315d;
   --fds-semantic-border-neutral-default: #68707c;
   --fds-semantic-border-neutral-subtle: #d2d5d8;
   --fds-semantic-border-neutral-strong: #1e2b3c;
@@ -117,15 +117,15 @@
   --fds-semantic-border-on_inverted-default: #ffffff;
   --fds-semantic-border-input-default: #00315d;
   --fds-semantic-border-input-hover: #0062ba;
-  --fds-semantic-border-primary-default: #005FAE;
-  --fds-semantic-border-primary-hover: #004785;
-  --fds-semantic-border-primary-active: #00315E;
-  --fds-semantic-border-secondary-default: #2C647E;
-  --fds-semantic-border-secondary-hover: #1F4B63;
-  --fds-semantic-border-secondary-active: #133349;
-  --fds-semantic-border-tertiary-default: #879394;
-  --fds-semantic-border-tertiary-hover: #6D7879;
-  --fds-semantic-border-tertiary-active: #576061;
+  --fds-semantic-border-first-default: #005FAE;
+  --fds-semantic-border-first-hover: #004785;
+  --fds-semantic-border-first-active: #00315E;
+  --fds-semantic-border-second-default: #2C647E;
+  --fds-semantic-border-second-hover: #1F4B63;
+  --fds-semantic-border-second-active: #133349;
+  --fds-semantic-border-third-default: #879394;
+  --fds-semantic-border-third-hover: #6D7879;
+  --fds-semantic-border-third-active: #576061;
   --fds-semantic-text-success-default: #0c6536;
   --fds-semantic-text-success-hover: #084826;
   --fds-semantic-text-success-active: #084826;
@@ -138,14 +138,14 @@
   --fds-semantic-text-action-hover: #004e95;
   --fds-semantic-text-action-active: #00315d;
   --fds-semantic-text-action-on_action: #ffffff;
-  --fds-semantic-text-action-primary-default: #0062ba;
-  --fds-semantic-text-action-primary-hover: #004e95;
-  --fds-semantic-text-action-primary-active: #00315d;
-  --fds-semantic-text-action-primary-on_action: #ffffff;
-  --fds-semantic-text-action-secondary-default: #00315d;
-  --fds-semantic-text-action-secondary-hover: #00315d;
-  --fds-semantic-text-action-secondary-active: #00315d;
-  --fds-semantic-text-action-secondary-on_action: #ffffff;
+  --fds-semantic-text-action-first-default: #00315d;
+  --fds-semantic-text-action-first-hover: #00315d;
+  --fds-semantic-text-action-first-active: #00315d;
+  --fds-semantic-text-action-first-on_action: #ffffff;
+  --fds-semantic-text-action-second-default: #00315d;
+  --fds-semantic-text-action-second-hover: #00315d;
+  --fds-semantic-text-action-second-active: #00315d;
+  --fds-semantic-text-action-second-on_action: #ffffff;
   --fds-semantic-text-warning-default: #995404;
   --fds-semantic-text-warning-icon_warning: #cc7005;
   --fds-semantic-text-warning-on_warning: #663802;
@@ -174,6 +174,7 @@
   --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-label-xsmall: 500 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
+  --fds-typography-error_message-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
   --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-error_message-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-error_message-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
@@ -228,39 +229,39 @@
   --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a;
   --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a;
   --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a;
-  --fds-brand-primary-50: #FFFFFF;
-  --fds-brand-primary-100: #D1E4FF;
-  --fds-brand-primary-200: #9ECAFF;
-  --fds-brand-primary-300: #76ADFB;
-  --fds-brand-primary-400: #5391E9;
-  --fds-brand-primary-500: #2B77CC;
-  --fds-brand-primary-600: #005FAE;
-  --fds-brand-primary-700: #004785;
-  --fds-brand-primary-800: #00315E;
-  --fds-brand-primary-900: #001C3A;
-  --fds-brand-primary-950: #001127;
-  --fds-brand-secondary-50: #FFFFFF;
-  --fds-brand-secondary-100: #E5F3F9;
-  --fds-brand-secondary-200: #C9E7F4;
-  --fds-brand-secondary-300: #70B3D7;
-  --fds-brand-secondary-400: #4E99BD;
-  --fds-brand-secondary-500: #3B7D9B;
-  --fds-brand-secondary-600: #2C647E;
-  --fds-brand-secondary-700: #1F4B63;
-  --fds-brand-secondary-800: #133349;
-  --fds-brand-secondary-900: #071D2C;
-  --fds-brand-secondary-950: #03121D;
-  --fds-brand-tertiary-50: #EBF2F3;
-  --fds-brand-tertiary-100: #D7E5E7;
-  --fds-brand-tertiary-200: #B9CACB;
-  --fds-brand-tertiary-300: #9FAEAF;
-  --fds-brand-tertiary-400: #879394;
-  --fds-brand-tertiary-500: #6D7879;
-  --fds-brand-tertiary-600: #576061;
-  --fds-brand-tertiary-700: #414849;
-  --fds-brand-tertiary-800: #2C3132;
-  --fds-brand-tertiary-900: #191C1C;
-  --fds-brand-tertiary-950: #0F1112;
+  --fds-brand-alt1-50: #FFFFFF;
+  --fds-brand-alt1-100: #D1E4FF;
+  --fds-brand-alt1-200: #9ECAFF;
+  --fds-brand-alt1-300: #76ADFB;
+  --fds-brand-alt1-400: #5391E9;
+  --fds-brand-alt1-500: #2B77CC;
+  --fds-brand-alt1-600: #005FAE;
+  --fds-brand-alt1-700: #004785;
+  --fds-brand-alt1-800: #00315E;
+  --fds-brand-alt1-900: #001C3A;
+  --fds-brand-alt1-950: #001127;
+  --fds-brand-alt2-50: #FFFFFF;
+  --fds-brand-alt2-100: #E5F3F9;
+  --fds-brand-alt2-200: #C9E7F4;
+  --fds-brand-alt2-300: #70B3D7;
+  --fds-brand-alt2-400: #4E99BD;
+  --fds-brand-alt2-500: #3B7D9B;
+  --fds-brand-alt2-600: #2C647E;
+  --fds-brand-alt2-700: #1F4B63;
+  --fds-brand-alt2-800: #133349;
+  --fds-brand-alt2-900: #071D2C;
+  --fds-brand-alt2-950: #03121D;
+  --fds-brand-alt3-50: #EBF2F3;
+  --fds-brand-alt3-100: #D7E5E7;
+  --fds-brand-alt3-200: #B9CACB;
+  --fds-brand-alt3-300: #9FAEAF;
+  --fds-brand-alt3-400: #879394;
+  --fds-brand-alt3-500: #6D7879;
+  --fds-brand-alt3-600: #576061;
+  --fds-brand-alt3-700: #414849;
+  --fds-brand-alt3-800: #2C3132;
+  --fds-brand-alt3-900: #191C1C;
+  --fds-brand-alt3-950: #0F1112;
   --fds-component-mode-height-small: 36px;
   --fds-component-mode-height-medium: var(--fds-sizing-10);
   --fds-component-mode-height-large: var(--fds-sizing-12);
diff --git a/packages/tokens/brand/brreg/tokens.d.ts b/packages/tokens/brand/brreg/tokens.d.ts
index 8cd8e31fee..84f98352b1 100644
--- a/packages/tokens/brand/brreg/tokens.d.ts
+++ b/packages/tokens/brand/brreg/tokens.d.ts
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill : string;
 export const semantic_surface_action_no_fill_hover : string;
 export const semantic_surface_action_no_fill_active : string;
 export const semantic_surface_action_checked : string;
-export const semantic_surface_action_primary_subtle : string;
-export const semantic_surface_action_primary_subtle_hover : string;
-export const semantic_surface_action_primary_default : string;
-export const semantic_surface_action_primary_hover : string;
-export const semantic_surface_action_primary_active : string;
-export const semantic_surface_action_primary_no_fill : string;
-export const semantic_surface_action_primary_no_fill_hover : string;
-export const semantic_surface_action_primary_no_fill_active : string;
-export const semantic_surface_action_secondary_subtle : string;
-export const semantic_surface_action_secondary_subtle_hover : string;
-export const semantic_surface_action_secondary_default : string;
-export const semantic_surface_action_secondary_hover : string;
-export const semantic_surface_action_secondary_active : string;
-export const semantic_surface_action_secondary_no_fill : string;
-export const semantic_surface_action_secondary_no_fill_hover : string;
-export const semantic_surface_action_secondary_no_fill_active : string;
+export const semantic_surface_action_first_subtle : string;
+export const semantic_surface_action_first_subtle_hover : string;
+export const semantic_surface_action_first_default : string;
+export const semantic_surface_action_first_hover : string;
+export const semantic_surface_action_first_active : string;
+export const semantic_surface_action_first_no_fill : string;
+export const semantic_surface_action_first_no_fill_hover : string;
+export const semantic_surface_action_first_no_fill_active : string;
+export const semantic_surface_action_second_subtle : string;
+export const semantic_surface_action_second_subtle_hover : string;
+export const semantic_surface_action_second_default : string;
+export const semantic_surface_action_second_hover : string;
+export const semantic_surface_action_second_active : string;
+export const semantic_surface_action_second_no_fill : string;
+export const semantic_surface_action_second_no_fill_hover : string;
+export const semantic_surface_action_second_no_fill_active : string;
 export const semantic_surface_success_subtle : string;
 export const semantic_surface_success_subtle_hover : string;
 export const semantic_surface_success_default : string;
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active : string;
 export const semantic_surface_on_inverted_no_fill : string;
 export const semantic_surface_on_inverted_no_fill_hover : string;
 export const semantic_surface_on_inverted_no_fill_active : string;
-export const semantic_surface_primary_light : string;
-export const semantic_surface_primary_light_hover : string;
-export const semantic_surface_primary_light_active : string;
-export const semantic_surface_primary_dark : string;
-export const semantic_surface_secondary_light : string;
-export const semantic_surface_secondary_light_hover : string;
-export const semantic_surface_secondary_light_active : string;
-export const semantic_surface_secondary_dark : string;
-export const semantic_surface_tertiary_light : string;
-export const semantic_surface_tertiary_light_hover : string;
-export const semantic_surface_tertiary_light_active : string;
-export const semantic_surface_tertiary_dark : string;
+export const semantic_surface_first_light : string;
+export const semantic_surface_first_light_hover : string;
+export const semantic_surface_first_light_active : string;
+export const semantic_surface_first_dark : string;
+export const semantic_surface_second_light : string;
+export const semantic_surface_second_light_hover : string;
+export const semantic_surface_second_light_active : string;
+export const semantic_surface_second_dark : string;
+export const semantic_surface_third_light : string;
+export const semantic_surface_third_light_hover : string;
+export const semantic_surface_third_light_active : string;
+export const semantic_surface_third_dark : string;
 export const semantic_border_info_default : string;
 export const semantic_border_action_subtle : string;
 export const semantic_border_action_subtle_hover : string;
@@ -84,16 +84,16 @@ export const semantic_border_action_hover : string;
 export const semantic_border_action_active : string;
 export const semantic_border_action_dark : string;
 export const semantic_border_action_dark_hover : string;
-export const semantic_border_action_primary_subtle : string;
-export const semantic_border_action_primary_subtle_hover : string;
-export const semantic_border_action_primary_default : string;
-export const semantic_border_action_primary_hover : string;
-export const semantic_border_action_primary_active : string;
-export const semantic_border_action_secondary_subtle : string;
-export const semantic_border_action_secondary_subtle_hover : string;
-export const semantic_border_action_secondary_default : string;
-export const semantic_border_action_secondary_hover : string;
-export const semantic_border_action_secondary_active : string;
+export const semantic_border_action_first_subtle : string;
+export const semantic_border_action_first_subtle_hover : string;
+export const semantic_border_action_first_default : string;
+export const semantic_border_action_first_hover : string;
+export const semantic_border_action_first_active : string;
+export const semantic_border_action_second_subtle : string;
+export const semantic_border_action_second_subtle_hover : string;
+export const semantic_border_action_second_default : string;
+export const semantic_border_action_second_hover : string;
+export const semantic_border_action_second_active : string;
 export const semantic_border_neutral_default : string;
 export const semantic_border_neutral_subtle : string;
 export const semantic_border_neutral_strong : string;
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow : string;
 export const semantic_border_on_inverted_default : string;
 export const semantic_border_input_default : string;
 export const semantic_border_input_hover : string;
-export const semantic_border_primary_default : string;
-export const semantic_border_primary_hover : string;
-export const semantic_border_primary_active : string;
-export const semantic_border_secondary_default : string;
-export const semantic_border_secondary_hover : string;
-export const semantic_border_secondary_active : string;
-export const semantic_border_tertiary_default : string;
-export const semantic_border_tertiary_hover : string;
-export const semantic_border_tertiary_active : string;
+export const semantic_border_first_default : string;
+export const semantic_border_first_hover : string;
+export const semantic_border_first_active : string;
+export const semantic_border_second_default : string;
+export const semantic_border_second_hover : string;
+export const semantic_border_second_active : string;
+export const semantic_border_third_default : string;
+export const semantic_border_third_hover : string;
+export const semantic_border_third_active : string;
 export const semantic_text_success_default : string;
 export const semantic_text_success_hover : string;
 export const semantic_text_success_active : string;
@@ -133,14 +133,14 @@ export const semantic_text_action_default : string;
 export const semantic_text_action_hover : string;
 export const semantic_text_action_active : string;
 export const semantic_text_action_on_action : string;
-export const semantic_text_action_primary_default : string;
-export const semantic_text_action_primary_hover : string;
-export const semantic_text_action_primary_active : string;
-export const semantic_text_action_primary_on_action : string;
-export const semantic_text_action_secondary_default : string;
-export const semantic_text_action_secondary_hover : string;
-export const semantic_text_action_secondary_active : string;
-export const semantic_text_action_secondary_on_action : string;
+export const semantic_text_action_first_default : string;
+export const semantic_text_action_first_hover : string;
+export const semantic_text_action_first_active : string;
+export const semantic_text_action_first_on_action : string;
+export const semantic_text_action_second_default : string;
+export const semantic_text_action_second_hover : string;
+export const semantic_text_action_second_active : string;
+export const semantic_text_action_second_on_action : string;
 export const semantic_text_warning_default : string;
 export const semantic_text_warning_icon_warning : string;
 export const semantic_text_warning_on_warning : string;
@@ -169,6 +169,7 @@ export const typography_label_large : string;
 export const typography_label_medium : string;
 export const typography_label_small : string;
 export const typography_label_xsmall : string;
+export const typography_error_message_large : string;
 export const typography_error_message_medium : string;
 export const typography_error_message_small : string;
 export const typography_error_message_xsmall : string;
@@ -223,39 +224,39 @@ export const shadow_small : string;
 export const shadow_medium : string;
 export const shadow_large : string;
 export const shadow_xlarge : string;
-export const brand_primary_50 : string;
-export const brand_primary_100 : string;
-export const brand_primary_200 : string;
-export const brand_primary_300 : string;
-export const brand_primary_400 : string;
-export const brand_primary_500 : string;
-export const brand_primary_600 : string;
-export const brand_primary_700 : string;
-export const brand_primary_800 : string;
-export const brand_primary_900 : string;
-export const brand_primary_950 : string;
-export const brand_secondary_50 : string;
-export const brand_secondary_100 : string;
-export const brand_secondary_200 : string;
-export const brand_secondary_300 : string;
-export const brand_secondary_400 : string;
-export const brand_secondary_500 : string;
-export const brand_secondary_600 : string;
-export const brand_secondary_700 : string;
-export const brand_secondary_800 : string;
-export const brand_secondary_900 : string;
-export const brand_secondary_950 : string;
-export const brand_tertiary_50 : string;
-export const brand_tertiary_100 : string;
-export const brand_tertiary_200 : string;
-export const brand_tertiary_300 : string;
-export const brand_tertiary_400 : string;
-export const brand_tertiary_500 : string;
-export const brand_tertiary_600 : string;
-export const brand_tertiary_700 : string;
-export const brand_tertiary_800 : string;
-export const brand_tertiary_900 : string;
-export const brand_tertiary_950 : string;
+export const brand_alt1_50 : string;
+export const brand_alt1_100 : string;
+export const brand_alt1_200 : string;
+export const brand_alt1_300 : string;
+export const brand_alt1_400 : string;
+export const brand_alt1_500 : string;
+export const brand_alt1_600 : string;
+export const brand_alt1_700 : string;
+export const brand_alt1_800 : string;
+export const brand_alt1_900 : string;
+export const brand_alt1_950 : string;
+export const brand_alt2_50 : string;
+export const brand_alt2_100 : string;
+export const brand_alt2_200 : string;
+export const brand_alt2_300 : string;
+export const brand_alt2_400 : string;
+export const brand_alt2_500 : string;
+export const brand_alt2_600 : string;
+export const brand_alt2_700 : string;
+export const brand_alt2_800 : string;
+export const brand_alt2_900 : string;
+export const brand_alt2_950 : string;
+export const brand_alt3_50 : string;
+export const brand_alt3_100 : string;
+export const brand_alt3_200 : string;
+export const brand_alt3_300 : string;
+export const brand_alt3_400 : string;
+export const brand_alt3_500 : string;
+export const brand_alt3_600 : string;
+export const brand_alt3_700 : string;
+export const brand_alt3_800 : string;
+export const brand_alt3_900 : string;
+export const brand_alt3_950 : string;
 export const component_mode_height_small : string;
 export const component_mode_height_medium : string;
 export const component_mode_height_large : string;
diff --git a/packages/tokens/brand/brreg/tokens.esm.js b/packages/tokens/brand/brreg/tokens.esm.js
index 9e7ac8ee57..de690c94bc 100644
--- a/packages/tokens/brand/brreg/tokens.esm.js
+++ b/packages/tokens/brand/brreg/tokens.esm.js
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill = "#ffffff";
 export const semantic_surface_action_no_fill_hover = "#e6eff8";
 export const semantic_surface_action_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_checked = "#0062ba";
-export const semantic_surface_action_primary_subtle = "#e6eff8";
-export const semantic_surface_action_primary_subtle_hover = "#b3d0ea";
-export const semantic_surface_action_primary_default = "#0062ba";
-export const semantic_surface_action_primary_hover = "#004e95";
-export const semantic_surface_action_primary_active = "#00315d";
-export const semantic_surface_action_primary_no_fill = "#ffffff";
-export const semantic_surface_action_primary_no_fill_hover = "#e6eff8";
-export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
-export const semantic_surface_action_secondary_subtle = "#f4f5f6";
-export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
-export const semantic_surface_action_secondary_default = "#00315d";
-export const semantic_surface_action_secondary_hover = "rgba(0, 49, 93, 0.9)";
-export const semantic_surface_action_secondary_active = "rgba(0, 49, 93, 0.8)";
-export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
+export const semantic_surface_action_first_subtle = "#e6eff8";
+export const semantic_surface_action_first_subtle_hover = "#b3d0ea";
+export const semantic_surface_action_first_default = "#0062ba";
+export const semantic_surface_action_first_hover = "#004e95";
+export const semantic_surface_action_first_active = "#00315d";
+export const semantic_surface_action_first_no_fill = "#ffffff";
+export const semantic_surface_action_first_no_fill_hover = "#e6eff8";
+export const semantic_surface_action_first_no_fill_active = "#b3d0ea";
+export const semantic_surface_action_second_subtle = "#f4f5f6";
+export const semantic_surface_action_second_subtle_hover = "#e9eaec";
+export const semantic_surface_action_second_default = "#00315d";
+export const semantic_surface_action_second_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_second_active = "rgba(0, 49, 93, 0.8)";
+export const semantic_surface_action_second_no_fill = "#ffffff";
+export const semantic_surface_action_second_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_second_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active = "#ffffffcc";
 export const semantic_surface_on_inverted_no_fill = "#ffffff00";
 export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a";
 export const semantic_surface_on_inverted_no_fill_active = "#ffffff33";
-export const semantic_surface_primary_light = "#D1E4FF";
-export const semantic_surface_primary_light_hover = "#76ADFB";
-export const semantic_surface_primary_light_active = "#5391E9";
-export const semantic_surface_primary_dark = "#004785";
-export const semantic_surface_secondary_light = "#C9E7F4";
-export const semantic_surface_secondary_light_hover = "#70B3D7";
-export const semantic_surface_secondary_light_active = "#4E99BD";
-export const semantic_surface_secondary_dark = "#1F4B63";
-export const semantic_surface_tertiary_light = "#D7E5E7";
-export const semantic_surface_tertiary_light_hover = "#B9CACB";
-export const semantic_surface_tertiary_light_active = "#9FAEAF";
-export const semantic_surface_tertiary_dark = "#414849";
+export const semantic_surface_first_light = "#D1E4FF";
+export const semantic_surface_first_light_hover = "#76ADFB";
+export const semantic_surface_first_light_active = "#5391E9";
+export const semantic_surface_first_dark = "#004785";
+export const semantic_surface_second_light = "#C9E7F4";
+export const semantic_surface_second_light_hover = "#70B3D7";
+export const semantic_surface_second_light_active = "#4E99BD";
+export const semantic_surface_second_dark = "#1F4B63";
+export const semantic_surface_third_light = "#D7E5E7";
+export const semantic_surface_third_light_hover = "#B9CACB";
+export const semantic_surface_third_light_active = "#9FAEAF";
+export const semantic_surface_third_dark = "#414849";
 export const semantic_border_info_default = "#004e95";
 export const semantic_border_action_subtle = "#b3d0ea";
 export const semantic_border_action_subtle_hover = "#66a1d6";
@@ -84,16 +84,16 @@ export const semantic_border_action_hover = "#0062ba";
 export const semantic_border_action_active = "#00315d";
 export const semantic_border_action_dark = "#00315d";
 export const semantic_border_action_dark_hover = "#0062ba";
-export const semantic_border_action_primary_subtle = "#b3d0ea";
-export const semantic_border_action_primary_subtle_hover = "#66a1d6";
-export const semantic_border_action_primary_default = "#0062ba";
-export const semantic_border_action_primary_hover = "#004e95";
-export const semantic_border_action_primary_active = "#00315d";
-export const semantic_border_action_secondary_subtle = "#e9eaec";
-export const semantic_border_action_secondary_subtle_hover = "#d2d5d8";
-export const semantic_border_action_secondary_default = "#00315d";
-export const semantic_border_action_secondary_hover = "#00315d";
-export const semantic_border_action_secondary_active = "#00315d";
+export const semantic_border_action_first_subtle = "#e9eaec";
+export const semantic_border_action_first_subtle_hover = "#d2d5d8";
+export const semantic_border_action_first_default = "#00315d";
+export const semantic_border_action_first_hover = "#00315d";
+export const semantic_border_action_first_active = "#00315d";
+export const semantic_border_action_second_subtle = "#e9eaec";
+export const semantic_border_action_second_subtle_hover = "#d2d5d8";
+export const semantic_border_action_second_default = "#00315d";
+export const semantic_border_action_second_hover = "#00315d";
+export const semantic_border_action_second_active = "#00315d";
 export const semantic_border_neutral_default = "#68707c";
 export const semantic_border_neutral_subtle = "#d2d5d8";
 export const semantic_border_neutral_strong = "#1e2b3c";
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow = "#1e2b3c";
 export const semantic_border_on_inverted_default = "#ffffff";
 export const semantic_border_input_default = "#00315d";
 export const semantic_border_input_hover = "#0062ba";
-export const semantic_border_primary_default = "#005FAE";
-export const semantic_border_primary_hover = "#004785";
-export const semantic_border_primary_active = "#00315E";
-export const semantic_border_secondary_default = "#2C647E";
-export const semantic_border_secondary_hover = "#1F4B63";
-export const semantic_border_secondary_active = "#133349";
-export const semantic_border_tertiary_default = "#879394";
-export const semantic_border_tertiary_hover = "#6D7879";
-export const semantic_border_tertiary_active = "#576061";
+export const semantic_border_first_default = "#005FAE";
+export const semantic_border_first_hover = "#004785";
+export const semantic_border_first_active = "#00315E";
+export const semantic_border_second_default = "#2C647E";
+export const semantic_border_second_hover = "#1F4B63";
+export const semantic_border_second_active = "#133349";
+export const semantic_border_third_default = "#879394";
+export const semantic_border_third_hover = "#6D7879";
+export const semantic_border_third_active = "#576061";
 export const semantic_text_success_default = "#0c6536";
 export const semantic_text_success_hover = "#084826";
 export const semantic_text_success_active = "#084826";
@@ -133,14 +133,14 @@ export const semantic_text_action_default = "#0062ba";
 export const semantic_text_action_hover = "#004e95";
 export const semantic_text_action_active = "#00315d";
 export const semantic_text_action_on_action = "#ffffff";
-export const semantic_text_action_primary_default = "#0062ba";
-export const semantic_text_action_primary_hover = "#004e95";
-export const semantic_text_action_primary_active = "#00315d";
-export const semantic_text_action_primary_on_action = "#ffffff";
-export const semantic_text_action_secondary_default = "#00315d";
-export const semantic_text_action_secondary_hover = "#00315d";
-export const semantic_text_action_secondary_active = "#00315d";
-export const semantic_text_action_secondary_on_action = "#ffffff";
+export const semantic_text_action_first_default = "#00315d";
+export const semantic_text_action_first_hover = "#00315d";
+export const semantic_text_action_first_active = "#00315d";
+export const semantic_text_action_first_on_action = "#ffffff";
+export const semantic_text_action_second_default = "#00315d";
+export const semantic_text_action_second_hover = "#00315d";
+export const semantic_text_action_second_active = "#00315d";
+export const semantic_text_action_second_on_action = "#ffffff";
 export const semantic_text_warning_default = "#995404";
 export const semantic_text_warning_icon_warning = "#cc7005";
 export const semantic_text_warning_on_warning = "#663802";
@@ -169,6 +169,7 @@ export const typography_label_large = "500 1.3125rem/1.3 'Inter'";
 export const typography_label_medium = "500 1.125rem/1.3 'Inter'";
 export const typography_label_small = "500 0.9375rem/1.3 'Inter'";
 export const typography_label_xsmall = "500 0.8125rem/1.3 'Inter'";
+export const typography_error_message_large = "400 1.3125rem/1.3 'Inter'";
 export const typography_error_message_medium = "400 1.125rem/1.3 'Inter'";
 export const typography_error_message_small = "400 0.9375rem/1.3 'Inter'";
 export const typography_error_message_xsmall = "400 0.8125rem/1.3 'Inter'";
@@ -223,39 +224,39 @@ export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a";
 export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a";
 export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a";
 export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a";
-export const brand_primary_50 = "#FFFFFF";
-export const brand_primary_100 = "#D1E4FF";
-export const brand_primary_200 = "#9ECAFF";
-export const brand_primary_300 = "#76ADFB";
-export const brand_primary_400 = "#5391E9";
-export const brand_primary_500 = "#2B77CC";
-export const brand_primary_600 = "#005FAE";
-export const brand_primary_700 = "#004785";
-export const brand_primary_800 = "#00315E";
-export const brand_primary_900 = "#001C3A";
-export const brand_primary_950 = "#001127";
-export const brand_secondary_50 = "#FFFFFF";
-export const brand_secondary_100 = "#E5F3F9";
-export const brand_secondary_200 = "#C9E7F4";
-export const brand_secondary_300 = "#70B3D7";
-export const brand_secondary_400 = "#4E99BD";
-export const brand_secondary_500 = "#3B7D9B";
-export const brand_secondary_600 = "#2C647E";
-export const brand_secondary_700 = "#1F4B63";
-export const brand_secondary_800 = "#133349";
-export const brand_secondary_900 = "#071D2C";
-export const brand_secondary_950 = "#03121D";
-export const brand_tertiary_50 = "#EBF2F3";
-export const brand_tertiary_100 = "#D7E5E7";
-export const brand_tertiary_200 = "#B9CACB";
-export const brand_tertiary_300 = "#9FAEAF";
-export const brand_tertiary_400 = "#879394";
-export const brand_tertiary_500 = "#6D7879";
-export const brand_tertiary_600 = "#576061";
-export const brand_tertiary_700 = "#414849";
-export const brand_tertiary_800 = "#2C3132";
-export const brand_tertiary_900 = "#191C1C";
-export const brand_tertiary_950 = "#0F1112";
+export const brand_alt1_50 = "#FFFFFF";
+export const brand_alt1_100 = "#D1E4FF";
+export const brand_alt1_200 = "#9ECAFF";
+export const brand_alt1_300 = "#76ADFB";
+export const brand_alt1_400 = "#5391E9";
+export const brand_alt1_500 = "#2B77CC";
+export const brand_alt1_600 = "#005FAE";
+export const brand_alt1_700 = "#004785";
+export const brand_alt1_800 = "#00315E";
+export const brand_alt1_900 = "#001C3A";
+export const brand_alt1_950 = "#001127";
+export const brand_alt2_50 = "#FFFFFF";
+export const brand_alt2_100 = "#E5F3F9";
+export const brand_alt2_200 = "#C9E7F4";
+export const brand_alt2_300 = "#70B3D7";
+export const brand_alt2_400 = "#4E99BD";
+export const brand_alt2_500 = "#3B7D9B";
+export const brand_alt2_600 = "#2C647E";
+export const brand_alt2_700 = "#1F4B63";
+export const brand_alt2_800 = "#133349";
+export const brand_alt2_900 = "#071D2C";
+export const brand_alt2_950 = "#03121D";
+export const brand_alt3_50 = "#EBF2F3";
+export const brand_alt3_100 = "#D7E5E7";
+export const brand_alt3_200 = "#B9CACB";
+export const brand_alt3_300 = "#9FAEAF";
+export const brand_alt3_400 = "#879394";
+export const brand_alt3_500 = "#6D7879";
+export const brand_alt3_600 = "#576061";
+export const brand_alt3_700 = "#414849";
+export const brand_alt3_800 = "#2C3132";
+export const brand_alt3_900 = "#191C1C";
+export const brand_alt3_950 = "#0F1112";
 export const component_mode_height_small = "36px";
 export const component_mode_height_medium = "45px";
 export const component_mode_height_large = "54px";
diff --git a/packages/tokens/brand/digdir/tokens.cjs.js b/packages/tokens/brand/digdir/tokens.cjs.js
index b537bd9e66..11ede11c9a 100644
--- a/packages/tokens/brand/digdir/tokens.cjs.js
+++ b/packages/tokens/brand/digdir/tokens.cjs.js
@@ -22,22 +22,22 @@ module.exports = {
   "semantic_surface_action_no_fill_hover": "#e6eff8",
   "semantic_surface_action_no_fill_active": "#b3d0ea",
   "semantic_surface_action_checked": "#0062ba",
-  "semantic_surface_action_primary_subtle": "#e6eff8",
-  "semantic_surface_action_primary_subtle_hover": "#b3d0ea",
-  "semantic_surface_action_primary_default": "#0062ba",
-  "semantic_surface_action_primary_hover": "#004e95",
-  "semantic_surface_action_primary_active": "#00315d",
-  "semantic_surface_action_primary_no_fill": "#ffffff",
-  "semantic_surface_action_primary_no_fill_hover": "#e6eff8",
-  "semantic_surface_action_primary_no_fill_active": "#b3d0ea",
-  "semantic_surface_action_secondary_subtle": "#f4f5f6",
-  "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
-  "semantic_surface_action_secondary_default": "#00315d",
-  "semantic_surface_action_secondary_hover": "rgba(0, 49, 93, 0.9)",
-  "semantic_surface_action_secondary_active": "rgba(0, 49, 93, 0.8)",
-  "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
+  "semantic_surface_action_first_subtle": "#e6eff8",
+  "semantic_surface_action_first_subtle_hover": "#b3d0ea",
+  "semantic_surface_action_first_default": "#0062ba",
+  "semantic_surface_action_first_hover": "#004e95",
+  "semantic_surface_action_first_active": "#00315d",
+  "semantic_surface_action_first_no_fill": "#ffffff",
+  "semantic_surface_action_first_no_fill_hover": "#e6eff8",
+  "semantic_surface_action_first_no_fill_active": "#b3d0ea",
+  "semantic_surface_action_second_subtle": "#f4f5f6",
+  "semantic_surface_action_second_subtle_hover": "#e9eaec",
+  "semantic_surface_action_second_default": "#00315d",
+  "semantic_surface_action_second_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_second_active": "rgba(0, 49, 93, 0.8)",
+  "semantic_surface_action_second_no_fill": "#ffffff",
+  "semantic_surface_action_second_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_second_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",
@@ -65,18 +65,18 @@ module.exports = {
   "semantic_surface_on_inverted_no_fill": "#ffffff00",
   "semantic_surface_on_inverted_no_fill_hover": "#ffffff1a",
   "semantic_surface_on_inverted_no_fill_active": "#ffffff33",
-  "semantic_surface_primary_light": "#fddfe0",
-  "semantic_surface_primary_light_hover": "#fbbfc1",
-  "semantic_surface_primary_light_active": "#f89fa1",
-  "semantic_surface_primary_dark": "#c34c4f",
-  "semantic_surface_secondary_light": "#faeec2",
-  "semantic_surface_secondary_light_hover": "#f5dda6",
-  "semantic_surface_secondary_light_active": "#efcc79",
-  "semantic_surface_secondary_dark": "#A17717",
-  "semantic_surface_tertiary_light": "#d2eafd",
-  "semantic_surface_tertiary_light_hover": "#a5d6fb",
-  "semantic_surface_tertiary_light_active": "#78c1f9",
-  "semantic_surface_tertiary_dark": "#156aac",
+  "semantic_surface_first_light": "#fddfe0",
+  "semantic_surface_first_light_hover": "#fbbfc1",
+  "semantic_surface_first_light_active": "#f89fa1",
+  "semantic_surface_first_dark": "#c34c4f",
+  "semantic_surface_second_light": "#faeec2",
+  "semantic_surface_second_light_hover": "#f5dda6",
+  "semantic_surface_second_light_active": "#efcc79",
+  "semantic_surface_second_dark": "#A17717",
+  "semantic_surface_third_light": "#d2eafd",
+  "semantic_surface_third_light_hover": "#a5d6fb",
+  "semantic_surface_third_light_active": "#78c1f9",
+  "semantic_surface_third_dark": "#156aac",
   "semantic_border_info_default": "#004e95",
   "semantic_border_action_subtle": "#b3d0ea",
   "semantic_border_action_subtle_hover": "#66a1d6",
@@ -85,16 +85,16 @@ module.exports = {
   "semantic_border_action_active": "#00315d",
   "semantic_border_action_dark": "#00315d",
   "semantic_border_action_dark_hover": "#0062ba",
-  "semantic_border_action_primary_subtle": "#b3d0ea",
-  "semantic_border_action_primary_subtle_hover": "#66a1d6",
-  "semantic_border_action_primary_default": "#0062ba",
-  "semantic_border_action_primary_hover": "#004e95",
-  "semantic_border_action_primary_active": "#00315d",
-  "semantic_border_action_secondary_subtle": "#e9eaec",
-  "semantic_border_action_secondary_subtle_hover": "#d2d5d8",
-  "semantic_border_action_secondary_default": "#00315d",
-  "semantic_border_action_secondary_hover": "#00315d",
-  "semantic_border_action_secondary_active": "#00315d",
+  "semantic_border_action_first_subtle": "#b3d0ea",
+  "semantic_border_action_first_subtle_hover": "#66a1d6",
+  "semantic_border_action_first_default": "#0062ba",
+  "semantic_border_action_first_hover": "#004e95",
+  "semantic_border_action_first_active": "#00315d",
+  "semantic_border_action_second_subtle": "#e9eaec",
+  "semantic_border_action_second_subtle_hover": "#d2d5d8",
+  "semantic_border_action_second_default": "#00315d",
+  "semantic_border_action_second_hover": "#00315d",
+  "semantic_border_action_second_active": "#00315d",
   "semantic_border_neutral_default": "#68707c",
   "semantic_border_neutral_subtle": "#d2d5d8",
   "semantic_border_neutral_strong": "#1e2b3c",
@@ -113,15 +113,15 @@ module.exports = {
   "semantic_border_on_inverted_default": "#ffffff",
   "semantic_border_input_default": "#00315d",
   "semantic_border_input_hover": "#0062ba",
-  "semantic_border_primary_default": "#f45f63",
-  "semantic_border_primary_hover": "#dc5659",
-  "semantic_border_primary_active": "#c34c4f",
-  "semantic_border_secondary_default": "#e5aa20",
-  "semantic_border_secondary_hover": "#ce991d",
-  "semantic_border_secondary_active": "#b7881a",
-  "semantic_border_tertiary_default": "#1e98f5",
-  "semantic_border_tertiary_hover": "#1b88dd",
-  "semantic_border_tertiary_active": "#156aac",
+  "semantic_border_first_default": "#f45f63",
+  "semantic_border_first_hover": "#dc5659",
+  "semantic_border_first_active": "#c34c4f",
+  "semantic_border_second_default": "#e5aa20",
+  "semantic_border_second_hover": "#ce991d",
+  "semantic_border_second_active": "#b7881a",
+  "semantic_border_third_default": "#1e98f5",
+  "semantic_border_third_hover": "#1b88dd",
+  "semantic_border_third_active": "#156aac",
   "semantic_text_success_default": "#0c6536",
   "semantic_text_success_hover": "#084826",
   "semantic_text_success_active": "#084826",
@@ -134,14 +134,14 @@ module.exports = {
   "semantic_text_action_hover": "#004e95",
   "semantic_text_action_active": "#00315d",
   "semantic_text_action_on_action": "#ffffff",
-  "semantic_text_action_primary_default": "#0062ba",
-  "semantic_text_action_primary_hover": "#004e95",
-  "semantic_text_action_primary_active": "#00315d",
-  "semantic_text_action_primary_on_action": "#ffffff",
-  "semantic_text_action_secondary_default": "#00315d",
-  "semantic_text_action_secondary_hover": "#00315d",
-  "semantic_text_action_secondary_active": "#00315d",
-  "semantic_text_action_secondary_on_action": "#ffffff",
+  "semantic_text_action_first_default": "#0062ba",
+  "semantic_text_action_first_hover": "#004e95",
+  "semantic_text_action_first_active": "#00315d",
+  "semantic_text_action_first_on_action": "#ffffff",
+  "semantic_text_action_second_default": "#00315d",
+  "semantic_text_action_second_hover": "#00315d",
+  "semantic_text_action_second_active": "#00315d",
+  "semantic_text_action_second_on_action": "#ffffff",
   "semantic_text_warning_default": "#995404",
   "semantic_text_warning_icon_warning": "#cc7005",
   "semantic_text_warning_on_warning": "#663802",
@@ -170,6 +170,7 @@ module.exports = {
   "typography_label_medium": "500 1.125rem/1.3 'Inter'",
   "typography_label_small": "500 0.9375rem/1.3 'Inter'",
   "typography_label_xsmall": "500 0.8125rem/1.3 'Inter'",
+  "typography_error_message_large": "400 1.3125rem/1.3 'Inter'",
   "typography_error_message_medium": "400 1.125rem/1.3 'Inter'",
   "typography_error_message_small": "400 0.9375rem/1.3 'Inter'",
   "typography_error_message_xsmall": "400 0.8125rem/1.3 'Inter'",
@@ -224,33 +225,33 @@ module.exports = {
   "shadow_medium": "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a",
   "shadow_large": "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a",
   "shadow_xlarge": "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a",
-  "brand_primary_100": "#feefef",
-  "brand_primary_200": "#fddfe0",
-  "brand_primary_300": "#fbbfc1",
-  "brand_primary_400": "#f89fa1",
-  "brand_primary_500": "#f67f82",
-  "brand_primary_600": "#f45f63",
-  "brand_primary_700": "#dc5659",
-  "brand_primary_800": "#c34c4f",
-  "brand_primary_900": "#B83D41",
-  "brand_secondary_100": "#fcf7e9",
-  "brand_secondary_200": "#faeec2",
-  "brand_secondary_300": "#f5dda6",
-  "brand_secondary_400": "#efcc79",
-  "brand_secondary_500": "#eabb4d",
-  "brand_secondary_600": "#e5aa20",
-  "brand_secondary_700": "#ce991d",
-  "brand_secondary_800": "#b7881a",
-  "brand_secondary_900": "#A17717",
-  "brand_tertiary_100": "#e9f5ff",
-  "brand_tertiary_200": "#d2eafd",
-  "brand_tertiary_300": "#a5d6fb",
-  "brand_tertiary_400": "#78c1f9",
-  "brand_tertiary_500": "#4badf7",
-  "brand_tertiary_600": "#1e98f5",
-  "brand_tertiary_700": "#1b88dd",
-  "brand_tertiary_800": "#156aac",
-  "brand_tertiary_900": "#125A91",
+  "brand_alt1_100": "#feefef",
+  "brand_alt1_200": "#fddfe0",
+  "brand_alt1_300": "#fbbfc1",
+  "brand_alt1_400": "#f89fa1",
+  "brand_alt1_500": "#f67f82",
+  "brand_alt1_600": "#f45f63",
+  "brand_alt1_700": "#dc5659",
+  "brand_alt1_800": "#c34c4f",
+  "brand_alt1_900": "#B83D41",
+  "brand_alt2_100": "#fcf7e9",
+  "brand_alt2_200": "#faeec2",
+  "brand_alt2_300": "#f5dda6",
+  "brand_alt2_400": "#efcc79",
+  "brand_alt2_500": "#eabb4d",
+  "brand_alt2_600": "#e5aa20",
+  "brand_alt2_700": "#ce991d",
+  "brand_alt2_800": "#b7881a",
+  "brand_alt2_900": "#A17717",
+  "brand_alt3_100": "#e9f5ff",
+  "brand_alt3_200": "#d2eafd",
+  "brand_alt3_300": "#a5d6fb",
+  "brand_alt3_400": "#78c1f9",
+  "brand_alt3_500": "#4badf7",
+  "brand_alt3_600": "#1e98f5",
+  "brand_alt3_700": "#1b88dd",
+  "brand_alt3_800": "#156aac",
+  "brand_alt3_900": "#125A91",
   "component_mode_height_small": "36px",
   "component_mode_height_medium": "45px",
   "component_mode_height_large": "54px",
diff --git a/packages/tokens/brand/digdir/tokens.css b/packages/tokens/brand/digdir/tokens.css
index 682c2c4991..167a5ac347 100644
--- a/packages/tokens/brand/digdir/tokens.css
+++ b/packages/tokens/brand/digdir/tokens.css
@@ -26,22 +26,22 @@
   --fds-semantic-surface-action-no_fill-hover: #e6eff8;
   --fds-semantic-surface-action-no_fill-active: #b3d0ea;
   --fds-semantic-surface-action-checked: #0062ba;
-  --fds-semantic-surface-action-primary-subtle: #e6eff8;
-  --fds-semantic-surface-action-primary-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-action-primary-default: #0062ba;
-  --fds-semantic-surface-action-primary-hover: #004e95;
-  --fds-semantic-surface-action-primary-active: #00315d;
-  --fds-semantic-surface-action-primary-no_fill: #ffffff;
-  --fds-semantic-surface-action-primary-no_fill-hover: #e6eff8;
-  --fds-semantic-surface-action-primary-no_fill-active: #b3d0ea;
-  --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
-  --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
-  --fds-semantic-surface-action-secondary-default: #00315d;
-  --fds-semantic-surface-action-secondary-hover: rgba(0, 49, 93, 0.9);
-  --fds-semantic-surface-action-secondary-active: rgba(0, 49, 93, 0.8);
-  --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
+  --fds-semantic-surface-action-first-subtle: #e6eff8;
+  --fds-semantic-surface-action-first-subtle-hover: #b3d0ea;
+  --fds-semantic-surface-action-first-default: #0062ba;
+  --fds-semantic-surface-action-first-hover: #004e95;
+  --fds-semantic-surface-action-first-active: #00315d;
+  --fds-semantic-surface-action-first-no_fill: #ffffff;
+  --fds-semantic-surface-action-first-no_fill-hover: #e6eff8;
+  --fds-semantic-surface-action-first-no_fill-active: #b3d0ea;
+  --fds-semantic-surface-action-second-subtle: #f4f5f6;
+  --fds-semantic-surface-action-second-subtle-hover: #e9eaec;
+  --fds-semantic-surface-action-second-default: #00315d;
+  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
+  --fds-semantic-surface-action-second-no_fill: #ffffff;
+  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;
@@ -69,18 +69,18 @@
   --fds-semantic-surface-on_inverted-no_fill: #ffffff00;
   --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a;
   --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33;
-  --fds-semantic-surface-primary-light: #fddfe0;
-  --fds-semantic-surface-primary-light-hover: #fbbfc1;
-  --fds-semantic-surface-primary-light-active: #f89fa1;
-  --fds-semantic-surface-primary-dark: #c34c4f;
-  --fds-semantic-surface-secondary-light: #faeec2;
-  --fds-semantic-surface-secondary-light-hover: #f5dda6;
-  --fds-semantic-surface-secondary-light-active: #efcc79;
-  --fds-semantic-surface-secondary-dark: #A17717;
-  --fds-semantic-surface-tertiary-light: #d2eafd;
-  --fds-semantic-surface-tertiary-light-hover: #a5d6fb;
-  --fds-semantic-surface-tertiary-light-active: #78c1f9;
-  --fds-semantic-surface-tertiary-dark: #156aac;
+  --fds-semantic-surface-first-light: #fddfe0;
+  --fds-semantic-surface-first-light-hover: #fbbfc1;
+  --fds-semantic-surface-first-light-active: #f89fa1;
+  --fds-semantic-surface-first-dark: #c34c4f;
+  --fds-semantic-surface-second-light: #faeec2;
+  --fds-semantic-surface-second-light-hover: #f5dda6;
+  --fds-semantic-surface-second-light-active: #efcc79;
+  --fds-semantic-surface-second-dark: #A17717;
+  --fds-semantic-surface-third-light: #d2eafd;
+  --fds-semantic-surface-third-light-hover: #a5d6fb;
+  --fds-semantic-surface-third-light-active: #78c1f9;
+  --fds-semantic-surface-third-dark: #156aac;
   --fds-semantic-border-info-default: #004e95;
   --fds-semantic-border-action-subtle: #b3d0ea;
   --fds-semantic-border-action-subtle-hover: #66a1d6;
@@ -89,16 +89,16 @@
   --fds-semantic-border-action-active: #00315d;
   --fds-semantic-border-action-dark: #00315d;
   --fds-semantic-border-action-dark-hover: #0062ba;
-  --fds-semantic-border-action-primary-subtle: #b3d0ea;
-  --fds-semantic-border-action-primary-subtle-hover: #66a1d6;
-  --fds-semantic-border-action-primary-default: #0062ba;
-  --fds-semantic-border-action-primary-hover: #004e95;
-  --fds-semantic-border-action-primary-active: #00315d;
-  --fds-semantic-border-action-secondary-subtle: #e9eaec;
-  --fds-semantic-border-action-secondary-subtle-hover: #d2d5d8;
-  --fds-semantic-border-action-secondary-default: #00315d;
-  --fds-semantic-border-action-secondary-hover: #00315d;
-  --fds-semantic-border-action-secondary-active: #00315d;
+  --fds-semantic-border-action-first-subtle: #b3d0ea;
+  --fds-semantic-border-action-first-subtle-hover: #66a1d6;
+  --fds-semantic-border-action-first-default: #0062ba;
+  --fds-semantic-border-action-first-hover: #004e95;
+  --fds-semantic-border-action-first-active: #00315d;
+  --fds-semantic-border-action-second-subtle: #e9eaec;
+  --fds-semantic-border-action-second-subtle-hover: #d2d5d8;
+  --fds-semantic-border-action-second-default: #00315d;
+  --fds-semantic-border-action-second-hover: #00315d;
+  --fds-semantic-border-action-second-active: #00315d;
   --fds-semantic-border-neutral-default: #68707c;
   --fds-semantic-border-neutral-subtle: #d2d5d8;
   --fds-semantic-border-neutral-strong: #1e2b3c;
@@ -117,15 +117,15 @@
   --fds-semantic-border-on_inverted-default: #ffffff;
   --fds-semantic-border-input-default: #00315d;
   --fds-semantic-border-input-hover: #0062ba;
-  --fds-semantic-border-primary-default: #f45f63;
-  --fds-semantic-border-primary-hover: #dc5659;
-  --fds-semantic-border-primary-active: #c34c4f;
-  --fds-semantic-border-secondary-default: #e5aa20;
-  --fds-semantic-border-secondary-hover: #ce991d;
-  --fds-semantic-border-secondary-active: #b7881a;
-  --fds-semantic-border-tertiary-default: #1e98f5;
-  --fds-semantic-border-tertiary-hover: #1b88dd;
-  --fds-semantic-border-tertiary-active: #156aac;
+  --fds-semantic-border-first-default: #f45f63;
+  --fds-semantic-border-first-hover: #dc5659;
+  --fds-semantic-border-first-active: #c34c4f;
+  --fds-semantic-border-second-default: #e5aa20;
+  --fds-semantic-border-second-hover: #ce991d;
+  --fds-semantic-border-second-active: #b7881a;
+  --fds-semantic-border-third-default: #1e98f5;
+  --fds-semantic-border-third-hover: #1b88dd;
+  --fds-semantic-border-third-active: #156aac;
   --fds-semantic-text-success-default: #0c6536;
   --fds-semantic-text-success-hover: #084826;
   --fds-semantic-text-success-active: #084826;
@@ -138,14 +138,14 @@
   --fds-semantic-text-action-hover: #004e95;
   --fds-semantic-text-action-active: #00315d;
   --fds-semantic-text-action-on_action: #ffffff;
-  --fds-semantic-text-action-primary-default: #0062ba;
-  --fds-semantic-text-action-primary-hover: #004e95;
-  --fds-semantic-text-action-primary-active: #00315d;
-  --fds-semantic-text-action-primary-on_action: #ffffff;
-  --fds-semantic-text-action-secondary-default: #00315d;
-  --fds-semantic-text-action-secondary-hover: #00315d;
-  --fds-semantic-text-action-secondary-active: #00315d;
-  --fds-semantic-text-action-secondary-on_action: #ffffff;
+  --fds-semantic-text-action-first-default: #0062ba;
+  --fds-semantic-text-action-first-hover: #004e95;
+  --fds-semantic-text-action-first-active: #00315d;
+  --fds-semantic-text-action-first-on_action: #ffffff;
+  --fds-semantic-text-action-second-default: #00315d;
+  --fds-semantic-text-action-second-hover: #00315d;
+  --fds-semantic-text-action-second-active: #00315d;
+  --fds-semantic-text-action-second-on_action: #ffffff;
   --fds-semantic-text-warning-default: #995404;
   --fds-semantic-text-warning-icon_warning: #cc7005;
   --fds-semantic-text-warning-on_warning: #663802;
@@ -174,6 +174,7 @@
   --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-label-xsmall: 500 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
+  --fds-typography-error_message-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
   --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-error_message-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-error_message-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
@@ -228,33 +229,33 @@
   --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a;
   --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a;
   --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a;
-  --fds-brand-primary-100: #feefef;
-  --fds-brand-primary-200: #fddfe0;
-  --fds-brand-primary-300: #fbbfc1;
-  --fds-brand-primary-400: #f89fa1;
-  --fds-brand-primary-500: #f67f82;
-  --fds-brand-primary-600: #f45f63;
-  --fds-brand-primary-700: #dc5659;
-  --fds-brand-primary-800: #c34c4f;
-  --fds-brand-primary-900: #B83D41;
-  --fds-brand-secondary-100: #fcf7e9;
-  --fds-brand-secondary-200: #faeec2;
-  --fds-brand-secondary-300: #f5dda6;
-  --fds-brand-secondary-400: #efcc79;
-  --fds-brand-secondary-500: #eabb4d;
-  --fds-brand-secondary-600: #e5aa20;
-  --fds-brand-secondary-700: #ce991d;
-  --fds-brand-secondary-800: #b7881a;
-  --fds-brand-secondary-900: #A17717;
-  --fds-brand-tertiary-100: #e9f5ff;
-  --fds-brand-tertiary-200: #d2eafd;
-  --fds-brand-tertiary-300: #a5d6fb;
-  --fds-brand-tertiary-400: #78c1f9;
-  --fds-brand-tertiary-500: #4badf7;
-  --fds-brand-tertiary-600: #1e98f5;
-  --fds-brand-tertiary-700: #1b88dd;
-  --fds-brand-tertiary-800: #156aac;
-  --fds-brand-tertiary-900: #125A91;
+  --fds-brand-alt1-100: #feefef;
+  --fds-brand-alt1-200: #fddfe0;
+  --fds-brand-alt1-300: #fbbfc1;
+  --fds-brand-alt1-400: #f89fa1;
+  --fds-brand-alt1-500: #f67f82;
+  --fds-brand-alt1-600: #f45f63;
+  --fds-brand-alt1-700: #dc5659;
+  --fds-brand-alt1-800: #c34c4f;
+  --fds-brand-alt1-900: #B83D41;
+  --fds-brand-alt2-100: #fcf7e9;
+  --fds-brand-alt2-200: #faeec2;
+  --fds-brand-alt2-300: #f5dda6;
+  --fds-brand-alt2-400: #efcc79;
+  --fds-brand-alt2-500: #eabb4d;
+  --fds-brand-alt2-600: #e5aa20;
+  --fds-brand-alt2-700: #ce991d;
+  --fds-brand-alt2-800: #b7881a;
+  --fds-brand-alt2-900: #A17717;
+  --fds-brand-alt3-100: #e9f5ff;
+  --fds-brand-alt3-200: #d2eafd;
+  --fds-brand-alt3-300: #a5d6fb;
+  --fds-brand-alt3-400: #78c1f9;
+  --fds-brand-alt3-500: #4badf7;
+  --fds-brand-alt3-600: #1e98f5;
+  --fds-brand-alt3-700: #1b88dd;
+  --fds-brand-alt3-800: #156aac;
+  --fds-brand-alt3-900: #125A91;
   --fds-component-mode-height-small: 36px;
   --fds-component-mode-height-medium: var(--fds-sizing-10);
   --fds-component-mode-height-large: var(--fds-sizing-12);
diff --git a/packages/tokens/brand/digdir/tokens.d.ts b/packages/tokens/brand/digdir/tokens.d.ts
index 1bea6c8114..7d87c4a3ec 100644
--- a/packages/tokens/brand/digdir/tokens.d.ts
+++ b/packages/tokens/brand/digdir/tokens.d.ts
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill : string;
 export const semantic_surface_action_no_fill_hover : string;
 export const semantic_surface_action_no_fill_active : string;
 export const semantic_surface_action_checked : string;
-export const semantic_surface_action_primary_subtle : string;
-export const semantic_surface_action_primary_subtle_hover : string;
-export const semantic_surface_action_primary_default : string;
-export const semantic_surface_action_primary_hover : string;
-export const semantic_surface_action_primary_active : string;
-export const semantic_surface_action_primary_no_fill : string;
-export const semantic_surface_action_primary_no_fill_hover : string;
-export const semantic_surface_action_primary_no_fill_active : string;
-export const semantic_surface_action_secondary_subtle : string;
-export const semantic_surface_action_secondary_subtle_hover : string;
-export const semantic_surface_action_secondary_default : string;
-export const semantic_surface_action_secondary_hover : string;
-export const semantic_surface_action_secondary_active : string;
-export const semantic_surface_action_secondary_no_fill : string;
-export const semantic_surface_action_secondary_no_fill_hover : string;
-export const semantic_surface_action_secondary_no_fill_active : string;
+export const semantic_surface_action_first_subtle : string;
+export const semantic_surface_action_first_subtle_hover : string;
+export const semantic_surface_action_first_default : string;
+export const semantic_surface_action_first_hover : string;
+export const semantic_surface_action_first_active : string;
+export const semantic_surface_action_first_no_fill : string;
+export const semantic_surface_action_first_no_fill_hover : string;
+export const semantic_surface_action_first_no_fill_active : string;
+export const semantic_surface_action_second_subtle : string;
+export const semantic_surface_action_second_subtle_hover : string;
+export const semantic_surface_action_second_default : string;
+export const semantic_surface_action_second_hover : string;
+export const semantic_surface_action_second_active : string;
+export const semantic_surface_action_second_no_fill : string;
+export const semantic_surface_action_second_no_fill_hover : string;
+export const semantic_surface_action_second_no_fill_active : string;
 export const semantic_surface_success_subtle : string;
 export const semantic_surface_success_subtle_hover : string;
 export const semantic_surface_success_default : string;
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active : string;
 export const semantic_surface_on_inverted_no_fill : string;
 export const semantic_surface_on_inverted_no_fill_hover : string;
 export const semantic_surface_on_inverted_no_fill_active : string;
-export const semantic_surface_primary_light : string;
-export const semantic_surface_primary_light_hover : string;
-export const semantic_surface_primary_light_active : string;
-export const semantic_surface_primary_dark : string;
-export const semantic_surface_secondary_light : string;
-export const semantic_surface_secondary_light_hover : string;
-export const semantic_surface_secondary_light_active : string;
-export const semantic_surface_secondary_dark : string;
-export const semantic_surface_tertiary_light : string;
-export const semantic_surface_tertiary_light_hover : string;
-export const semantic_surface_tertiary_light_active : string;
-export const semantic_surface_tertiary_dark : string;
+export const semantic_surface_first_light : string;
+export const semantic_surface_first_light_hover : string;
+export const semantic_surface_first_light_active : string;
+export const semantic_surface_first_dark : string;
+export const semantic_surface_second_light : string;
+export const semantic_surface_second_light_hover : string;
+export const semantic_surface_second_light_active : string;
+export const semantic_surface_second_dark : string;
+export const semantic_surface_third_light : string;
+export const semantic_surface_third_light_hover : string;
+export const semantic_surface_third_light_active : string;
+export const semantic_surface_third_dark : string;
 export const semantic_border_info_default : string;
 export const semantic_border_action_subtle : string;
 export const semantic_border_action_subtle_hover : string;
@@ -84,16 +84,16 @@ export const semantic_border_action_hover : string;
 export const semantic_border_action_active : string;
 export const semantic_border_action_dark : string;
 export const semantic_border_action_dark_hover : string;
-export const semantic_border_action_primary_subtle : string;
-export const semantic_border_action_primary_subtle_hover : string;
-export const semantic_border_action_primary_default : string;
-export const semantic_border_action_primary_hover : string;
-export const semantic_border_action_primary_active : string;
-export const semantic_border_action_secondary_subtle : string;
-export const semantic_border_action_secondary_subtle_hover : string;
-export const semantic_border_action_secondary_default : string;
-export const semantic_border_action_secondary_hover : string;
-export const semantic_border_action_secondary_active : string;
+export const semantic_border_action_first_subtle : string;
+export const semantic_border_action_first_subtle_hover : string;
+export const semantic_border_action_first_default : string;
+export const semantic_border_action_first_hover : string;
+export const semantic_border_action_first_active : string;
+export const semantic_border_action_second_subtle : string;
+export const semantic_border_action_second_subtle_hover : string;
+export const semantic_border_action_second_default : string;
+export const semantic_border_action_second_hover : string;
+export const semantic_border_action_second_active : string;
 export const semantic_border_neutral_default : string;
 export const semantic_border_neutral_subtle : string;
 export const semantic_border_neutral_strong : string;
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow : string;
 export const semantic_border_on_inverted_default : string;
 export const semantic_border_input_default : string;
 export const semantic_border_input_hover : string;
-export const semantic_border_primary_default : string;
-export const semantic_border_primary_hover : string;
-export const semantic_border_primary_active : string;
-export const semantic_border_secondary_default : string;
-export const semantic_border_secondary_hover : string;
-export const semantic_border_secondary_active : string;
-export const semantic_border_tertiary_default : string;
-export const semantic_border_tertiary_hover : string;
-export const semantic_border_tertiary_active : string;
+export const semantic_border_first_default : string;
+export const semantic_border_first_hover : string;
+export const semantic_border_first_active : string;
+export const semantic_border_second_default : string;
+export const semantic_border_second_hover : string;
+export const semantic_border_second_active : string;
+export const semantic_border_third_default : string;
+export const semantic_border_third_hover : string;
+export const semantic_border_third_active : string;
 export const semantic_text_success_default : string;
 export const semantic_text_success_hover : string;
 export const semantic_text_success_active : string;
@@ -133,14 +133,14 @@ export const semantic_text_action_default : string;
 export const semantic_text_action_hover : string;
 export const semantic_text_action_active : string;
 export const semantic_text_action_on_action : string;
-export const semantic_text_action_primary_default : string;
-export const semantic_text_action_primary_hover : string;
-export const semantic_text_action_primary_active : string;
-export const semantic_text_action_primary_on_action : string;
-export const semantic_text_action_secondary_default : string;
-export const semantic_text_action_secondary_hover : string;
-export const semantic_text_action_secondary_active : string;
-export const semantic_text_action_secondary_on_action : string;
+export const semantic_text_action_first_default : string;
+export const semantic_text_action_first_hover : string;
+export const semantic_text_action_first_active : string;
+export const semantic_text_action_first_on_action : string;
+export const semantic_text_action_second_default : string;
+export const semantic_text_action_second_hover : string;
+export const semantic_text_action_second_active : string;
+export const semantic_text_action_second_on_action : string;
 export const semantic_text_warning_default : string;
 export const semantic_text_warning_icon_warning : string;
 export const semantic_text_warning_on_warning : string;
@@ -169,6 +169,7 @@ export const typography_label_large : string;
 export const typography_label_medium : string;
 export const typography_label_small : string;
 export const typography_label_xsmall : string;
+export const typography_error_message_large : string;
 export const typography_error_message_medium : string;
 export const typography_error_message_small : string;
 export const typography_error_message_xsmall : string;
@@ -223,33 +224,33 @@ export const shadow_small : string;
 export const shadow_medium : string;
 export const shadow_large : string;
 export const shadow_xlarge : string;
-export const brand_primary_100 : string;
-export const brand_primary_200 : string;
-export const brand_primary_300 : string;
-export const brand_primary_400 : string;
-export const brand_primary_500 : string;
-export const brand_primary_600 : string;
-export const brand_primary_700 : string;
-export const brand_primary_800 : string;
-export const brand_primary_900 : string;
-export const brand_secondary_100 : string;
-export const brand_secondary_200 : string;
-export const brand_secondary_300 : string;
-export const brand_secondary_400 : string;
-export const brand_secondary_500 : string;
-export const brand_secondary_600 : string;
-export const brand_secondary_700 : string;
-export const brand_secondary_800 : string;
-export const brand_secondary_900 : string;
-export const brand_tertiary_100 : string;
-export const brand_tertiary_200 : string;
-export const brand_tertiary_300 : string;
-export const brand_tertiary_400 : string;
-export const brand_tertiary_500 : string;
-export const brand_tertiary_600 : string;
-export const brand_tertiary_700 : string;
-export const brand_tertiary_800 : string;
-export const brand_tertiary_900 : string;
+export const brand_alt1_100 : string;
+export const brand_alt1_200 : string;
+export const brand_alt1_300 : string;
+export const brand_alt1_400 : string;
+export const brand_alt1_500 : string;
+export const brand_alt1_600 : string;
+export const brand_alt1_700 : string;
+export const brand_alt1_800 : string;
+export const brand_alt1_900 : string;
+export const brand_alt2_100 : string;
+export const brand_alt2_200 : string;
+export const brand_alt2_300 : string;
+export const brand_alt2_400 : string;
+export const brand_alt2_500 : string;
+export const brand_alt2_600 : string;
+export const brand_alt2_700 : string;
+export const brand_alt2_800 : string;
+export const brand_alt2_900 : string;
+export const brand_alt3_100 : string;
+export const brand_alt3_200 : string;
+export const brand_alt3_300 : string;
+export const brand_alt3_400 : string;
+export const brand_alt3_500 : string;
+export const brand_alt3_600 : string;
+export const brand_alt3_700 : string;
+export const brand_alt3_800 : string;
+export const brand_alt3_900 : string;
 export const component_mode_height_small : string;
 export const component_mode_height_medium : string;
 export const component_mode_height_large : string;
diff --git a/packages/tokens/brand/digdir/tokens.esm.js b/packages/tokens/brand/digdir/tokens.esm.js
index 759f1ea0c7..11c1a58c65 100644
--- a/packages/tokens/brand/digdir/tokens.esm.js
+++ b/packages/tokens/brand/digdir/tokens.esm.js
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill = "#ffffff";
 export const semantic_surface_action_no_fill_hover = "#e6eff8";
 export const semantic_surface_action_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_checked = "#0062ba";
-export const semantic_surface_action_primary_subtle = "#e6eff8";
-export const semantic_surface_action_primary_subtle_hover = "#b3d0ea";
-export const semantic_surface_action_primary_default = "#0062ba";
-export const semantic_surface_action_primary_hover = "#004e95";
-export const semantic_surface_action_primary_active = "#00315d";
-export const semantic_surface_action_primary_no_fill = "#ffffff";
-export const semantic_surface_action_primary_no_fill_hover = "#e6eff8";
-export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
-export const semantic_surface_action_secondary_subtle = "#f4f5f6";
-export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
-export const semantic_surface_action_secondary_default = "#00315d";
-export const semantic_surface_action_secondary_hover = "rgba(0, 49, 93, 0.9)";
-export const semantic_surface_action_secondary_active = "rgba(0, 49, 93, 0.8)";
-export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
+export const semantic_surface_action_first_subtle = "#e6eff8";
+export const semantic_surface_action_first_subtle_hover = "#b3d0ea";
+export const semantic_surface_action_first_default = "#0062ba";
+export const semantic_surface_action_first_hover = "#004e95";
+export const semantic_surface_action_first_active = "#00315d";
+export const semantic_surface_action_first_no_fill = "#ffffff";
+export const semantic_surface_action_first_no_fill_hover = "#e6eff8";
+export const semantic_surface_action_first_no_fill_active = "#b3d0ea";
+export const semantic_surface_action_second_subtle = "#f4f5f6";
+export const semantic_surface_action_second_subtle_hover = "#e9eaec";
+export const semantic_surface_action_second_default = "#00315d";
+export const semantic_surface_action_second_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_second_active = "rgba(0, 49, 93, 0.8)";
+export const semantic_surface_action_second_no_fill = "#ffffff";
+export const semantic_surface_action_second_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_second_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active = "#ffffffcc";
 export const semantic_surface_on_inverted_no_fill = "#ffffff00";
 export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a";
 export const semantic_surface_on_inverted_no_fill_active = "#ffffff33";
-export const semantic_surface_primary_light = "#fddfe0";
-export const semantic_surface_primary_light_hover = "#fbbfc1";
-export const semantic_surface_primary_light_active = "#f89fa1";
-export const semantic_surface_primary_dark = "#c34c4f";
-export const semantic_surface_secondary_light = "#faeec2";
-export const semantic_surface_secondary_light_hover = "#f5dda6";
-export const semantic_surface_secondary_light_active = "#efcc79";
-export const semantic_surface_secondary_dark = "#A17717";
-export const semantic_surface_tertiary_light = "#d2eafd";
-export const semantic_surface_tertiary_light_hover = "#a5d6fb";
-export const semantic_surface_tertiary_light_active = "#78c1f9";
-export const semantic_surface_tertiary_dark = "#156aac";
+export const semantic_surface_first_light = "#fddfe0";
+export const semantic_surface_first_light_hover = "#fbbfc1";
+export const semantic_surface_first_light_active = "#f89fa1";
+export const semantic_surface_first_dark = "#c34c4f";
+export const semantic_surface_second_light = "#faeec2";
+export const semantic_surface_second_light_hover = "#f5dda6";
+export const semantic_surface_second_light_active = "#efcc79";
+export const semantic_surface_second_dark = "#A17717";
+export const semantic_surface_third_light = "#d2eafd";
+export const semantic_surface_third_light_hover = "#a5d6fb";
+export const semantic_surface_third_light_active = "#78c1f9";
+export const semantic_surface_third_dark = "#156aac";
 export const semantic_border_info_default = "#004e95";
 export const semantic_border_action_subtle = "#b3d0ea";
 export const semantic_border_action_subtle_hover = "#66a1d6";
@@ -84,16 +84,16 @@ export const semantic_border_action_hover = "#0062ba";
 export const semantic_border_action_active = "#00315d";
 export const semantic_border_action_dark = "#00315d";
 export const semantic_border_action_dark_hover = "#0062ba";
-export const semantic_border_action_primary_subtle = "#b3d0ea";
-export const semantic_border_action_primary_subtle_hover = "#66a1d6";
-export const semantic_border_action_primary_default = "#0062ba";
-export const semantic_border_action_primary_hover = "#004e95";
-export const semantic_border_action_primary_active = "#00315d";
-export const semantic_border_action_secondary_subtle = "#e9eaec";
-export const semantic_border_action_secondary_subtle_hover = "#d2d5d8";
-export const semantic_border_action_secondary_default = "#00315d";
-export const semantic_border_action_secondary_hover = "#00315d";
-export const semantic_border_action_secondary_active = "#00315d";
+export const semantic_border_action_first_subtle = "#b3d0ea";
+export const semantic_border_action_first_subtle_hover = "#66a1d6";
+export const semantic_border_action_first_default = "#0062ba";
+export const semantic_border_action_first_hover = "#004e95";
+export const semantic_border_action_first_active = "#00315d";
+export const semantic_border_action_second_subtle = "#e9eaec";
+export const semantic_border_action_second_subtle_hover = "#d2d5d8";
+export const semantic_border_action_second_default = "#00315d";
+export const semantic_border_action_second_hover = "#00315d";
+export const semantic_border_action_second_active = "#00315d";
 export const semantic_border_neutral_default = "#68707c";
 export const semantic_border_neutral_subtle = "#d2d5d8";
 export const semantic_border_neutral_strong = "#1e2b3c";
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow = "#1e2b3c";
 export const semantic_border_on_inverted_default = "#ffffff";
 export const semantic_border_input_default = "#00315d";
 export const semantic_border_input_hover = "#0062ba";
-export const semantic_border_primary_default = "#f45f63";
-export const semantic_border_primary_hover = "#dc5659";
-export const semantic_border_primary_active = "#c34c4f";
-export const semantic_border_secondary_default = "#e5aa20";
-export const semantic_border_secondary_hover = "#ce991d";
-export const semantic_border_secondary_active = "#b7881a";
-export const semantic_border_tertiary_default = "#1e98f5";
-export const semantic_border_tertiary_hover = "#1b88dd";
-export const semantic_border_tertiary_active = "#156aac";
+export const semantic_border_first_default = "#f45f63";
+export const semantic_border_first_hover = "#dc5659";
+export const semantic_border_first_active = "#c34c4f";
+export const semantic_border_second_default = "#e5aa20";
+export const semantic_border_second_hover = "#ce991d";
+export const semantic_border_second_active = "#b7881a";
+export const semantic_border_third_default = "#1e98f5";
+export const semantic_border_third_hover = "#1b88dd";
+export const semantic_border_third_active = "#156aac";
 export const semantic_text_success_default = "#0c6536";
 export const semantic_text_success_hover = "#084826";
 export const semantic_text_success_active = "#084826";
@@ -133,14 +133,14 @@ export const semantic_text_action_default = "#0062ba";
 export const semantic_text_action_hover = "#004e95";
 export const semantic_text_action_active = "#00315d";
 export const semantic_text_action_on_action = "#ffffff";
-export const semantic_text_action_primary_default = "#0062ba";
-export const semantic_text_action_primary_hover = "#004e95";
-export const semantic_text_action_primary_active = "#00315d";
-export const semantic_text_action_primary_on_action = "#ffffff";
-export const semantic_text_action_secondary_default = "#00315d";
-export const semantic_text_action_secondary_hover = "#00315d";
-export const semantic_text_action_secondary_active = "#00315d";
-export const semantic_text_action_secondary_on_action = "#ffffff";
+export const semantic_text_action_first_default = "#0062ba";
+export const semantic_text_action_first_hover = "#004e95";
+export const semantic_text_action_first_active = "#00315d";
+export const semantic_text_action_first_on_action = "#ffffff";
+export const semantic_text_action_second_default = "#00315d";
+export const semantic_text_action_second_hover = "#00315d";
+export const semantic_text_action_second_active = "#00315d";
+export const semantic_text_action_second_on_action = "#ffffff";
 export const semantic_text_warning_default = "#995404";
 export const semantic_text_warning_icon_warning = "#cc7005";
 export const semantic_text_warning_on_warning = "#663802";
@@ -169,6 +169,7 @@ export const typography_label_large = "500 1.3125rem/1.3 'Inter'";
 export const typography_label_medium = "500 1.125rem/1.3 'Inter'";
 export const typography_label_small = "500 0.9375rem/1.3 'Inter'";
 export const typography_label_xsmall = "500 0.8125rem/1.3 'Inter'";
+export const typography_error_message_large = "400 1.3125rem/1.3 'Inter'";
 export const typography_error_message_medium = "400 1.125rem/1.3 'Inter'";
 export const typography_error_message_small = "400 0.9375rem/1.3 'Inter'";
 export const typography_error_message_xsmall = "400 0.8125rem/1.3 'Inter'";
@@ -223,33 +224,33 @@ export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a";
 export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a";
 export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a";
 export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a";
-export const brand_primary_100 = "#feefef";
-export const brand_primary_200 = "#fddfe0";
-export const brand_primary_300 = "#fbbfc1";
-export const brand_primary_400 = "#f89fa1";
-export const brand_primary_500 = "#f67f82";
-export const brand_primary_600 = "#f45f63";
-export const brand_primary_700 = "#dc5659";
-export const brand_primary_800 = "#c34c4f";
-export const brand_primary_900 = "#B83D41";
-export const brand_secondary_100 = "#fcf7e9";
-export const brand_secondary_200 = "#faeec2";
-export const brand_secondary_300 = "#f5dda6";
-export const brand_secondary_400 = "#efcc79";
-export const brand_secondary_500 = "#eabb4d";
-export const brand_secondary_600 = "#e5aa20";
-export const brand_secondary_700 = "#ce991d";
-export const brand_secondary_800 = "#b7881a";
-export const brand_secondary_900 = "#A17717";
-export const brand_tertiary_100 = "#e9f5ff";
-export const brand_tertiary_200 = "#d2eafd";
-export const brand_tertiary_300 = "#a5d6fb";
-export const brand_tertiary_400 = "#78c1f9";
-export const brand_tertiary_500 = "#4badf7";
-export const brand_tertiary_600 = "#1e98f5";
-export const brand_tertiary_700 = "#1b88dd";
-export const brand_tertiary_800 = "#156aac";
-export const brand_tertiary_900 = "#125A91";
+export const brand_alt1_100 = "#feefef";
+export const brand_alt1_200 = "#fddfe0";
+export const brand_alt1_300 = "#fbbfc1";
+export const brand_alt1_400 = "#f89fa1";
+export const brand_alt1_500 = "#f67f82";
+export const brand_alt1_600 = "#f45f63";
+export const brand_alt1_700 = "#dc5659";
+export const brand_alt1_800 = "#c34c4f";
+export const brand_alt1_900 = "#B83D41";
+export const brand_alt2_100 = "#fcf7e9";
+export const brand_alt2_200 = "#faeec2";
+export const brand_alt2_300 = "#f5dda6";
+export const brand_alt2_400 = "#efcc79";
+export const brand_alt2_500 = "#eabb4d";
+export const brand_alt2_600 = "#e5aa20";
+export const brand_alt2_700 = "#ce991d";
+export const brand_alt2_800 = "#b7881a";
+export const brand_alt2_900 = "#A17717";
+export const brand_alt3_100 = "#e9f5ff";
+export const brand_alt3_200 = "#d2eafd";
+export const brand_alt3_300 = "#a5d6fb";
+export const brand_alt3_400 = "#78c1f9";
+export const brand_alt3_500 = "#4badf7";
+export const brand_alt3_600 = "#1e98f5";
+export const brand_alt3_700 = "#1b88dd";
+export const brand_alt3_800 = "#156aac";
+export const brand_alt3_900 = "#125A91";
 export const component_mode_height_small = "36px";
 export const component_mode_height_medium = "45px";
 export const component_mode_height_large = "54px";
diff --git a/packages/tokens/brand/tilsynet/tokens.cjs.js b/packages/tokens/brand/tilsynet/tokens.cjs.js
index 37a0d8c8c3..03b35b5933 100644
--- a/packages/tokens/brand/tilsynet/tokens.cjs.js
+++ b/packages/tokens/brand/tilsynet/tokens.cjs.js
@@ -22,22 +22,22 @@ module.exports = {
   "semantic_surface_action_no_fill_hover": "#e6eff8",
   "semantic_surface_action_no_fill_active": "#b3d0ea",
   "semantic_surface_action_checked": "#0062ba",
-  "semantic_surface_action_primary_subtle": "#e6eff8",
-  "semantic_surface_action_primary_subtle_hover": "#b3d0ea",
-  "semantic_surface_action_primary_default": "#3339c6",
-  "semantic_surface_action_primary_hover": "#0008b8",
-  "semantic_surface_action_primary_active": "#00078F",
-  "semantic_surface_action_primary_no_fill": "#ffffff",
-  "semantic_surface_action_primary_no_fill_hover": "#e6eff8",
-  "semantic_surface_action_primary_no_fill_active": "#b3d0ea",
-  "semantic_surface_action_secondary_subtle": "#f4f5f6",
-  "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
-  "semantic_surface_action_secondary_default": "#407d6d",
-  "semantic_surface_action_secondary_hover": "#376C5E",
-  "semantic_surface_action_secondary_active": "#376C5E",
-  "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
+  "semantic_surface_action_first_subtle": "#f4f5f6",
+  "semantic_surface_action_first_subtle_hover": "#e9eaec",
+  "semantic_surface_action_first_default": "#00315d",
+  "semantic_surface_action_first_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_first_active": "rgba(0, 49, 93, 0.8)",
+  "semantic_surface_action_first_no_fill": "#ffffff",
+  "semantic_surface_action_first_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_first_no_fill_active": "rgba(0, 49, 93, 0.2)",
+  "semantic_surface_action_second_subtle": "#f4f5f6",
+  "semantic_surface_action_second_subtle_hover": "#e9eaec",
+  "semantic_surface_action_second_default": "#00315d",
+  "semantic_surface_action_second_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_second_active": "rgba(0, 49, 93, 0.8)",
+  "semantic_surface_action_second_no_fill": "#ffffff",
+  "semantic_surface_action_second_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_second_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",
@@ -65,18 +65,18 @@ module.exports = {
   "semantic_surface_on_inverted_no_fill": "#ffffff00",
   "semantic_surface_on_inverted_no_fill_hover": "#ffffff1a",
   "semantic_surface_on_inverted_no_fill_active": "#ffffff33",
-  "semantic_surface_primary_light": "#dedff6",
-  "semantic_surface_primary_light_hover": "#bec0ed",
-  "semantic_surface_primary_light_active": "#9da0e4",
-  "semantic_surface_primary_dark": "#0008b8",
-  "semantic_surface_secondary_light": "#ffdcc3",
-  "semantic_surface_secondary_light_hover": "#fdd4b7",
-  "semantic_surface_secondary_light_active": "#ffc296",
-  "semantic_surface_secondary_dark": "#9F6841",
-  "semantic_surface_tertiary_light": "#deece9",
-  "semantic_surface_tertiary_light_hover": "#bedad2",
-  "semantic_surface_tertiary_light_active": "#9dc7bc",
-  "semantic_surface_tertiary_dark": "#407d6d",
+  "semantic_surface_first_light": "#dedff6",
+  "semantic_surface_first_light_hover": "#bec0ed",
+  "semantic_surface_first_light_active": "#9da0e4",
+  "semantic_surface_first_dark": "#0008b8",
+  "semantic_surface_second_light": "#ffdcc3",
+  "semantic_surface_second_light_hover": "#fdd4b7",
+  "semantic_surface_second_light_active": "#ffc296",
+  "semantic_surface_second_dark": "#9F6841",
+  "semantic_surface_third_light": "#deece9",
+  "semantic_surface_third_light_hover": "#bedad2",
+  "semantic_surface_third_light_active": "#9dc7bc",
+  "semantic_surface_third_dark": "#407d6d",
   "semantic_border_info_default": "#004e95",
   "semantic_border_action_subtle": "#b3d0ea",
   "semantic_border_action_subtle_hover": "#66a1d6",
@@ -85,16 +85,16 @@ module.exports = {
   "semantic_border_action_active": "#00315d",
   "semantic_border_action_dark": "#00315d",
   "semantic_border_action_dark_hover": "#0062ba",
-  "semantic_border_action_primary_subtle": "#b3d0ea",
-  "semantic_border_action_primary_subtle_hover": "#66a1d6",
-  "semantic_border_action_primary_default": "#0062ba",
-  "semantic_border_action_primary_hover": "#004e95",
-  "semantic_border_action_primary_active": "#00315d",
-  "semantic_border_action_secondary_subtle": "#e9eaec",
-  "semantic_border_action_secondary_subtle_hover": "#d2d5d8",
-  "semantic_border_action_secondary_default": "#00315d",
-  "semantic_border_action_secondary_hover": "#00315d",
-  "semantic_border_action_secondary_active": "#00315d",
+  "semantic_border_action_first_subtle": "#b3d0ea",
+  "semantic_border_action_first_subtle_hover": "#66a1d6",
+  "semantic_border_action_first_default": "#0062ba",
+  "semantic_border_action_first_hover": "#004e95",
+  "semantic_border_action_first_active": "#00315d",
+  "semantic_border_action_second_subtle": "#e9eaec",
+  "semantic_border_action_second_subtle_hover": "#d2d5d8",
+  "semantic_border_action_second_default": "#00315d",
+  "semantic_border_action_second_hover": "#00315d",
+  "semantic_border_action_second_active": "#00315d",
   "semantic_border_neutral_default": "#68707c",
   "semantic_border_neutral_subtle": "#d2d5d8",
   "semantic_border_neutral_strong": "#1e2b3c",
@@ -113,15 +113,15 @@ module.exports = {
   "semantic_border_on_inverted_default": "#ffffff",
   "semantic_border_input_default": "#00315d",
   "semantic_border_input_hover": "#0062ba",
-  "semantic_border_primary_default": "#5c61d2",
-  "semantic_border_primary_hover": "#3339c6",
-  "semantic_border_primary_active": "#0008b8",
-  "semantic_border_secondary_default": "#ffa869",
-  "semantic_border_secondary_hover": "#e6975f",
-  "semantic_border_secondary_active": "#b3764a",
-  "semantic_border_tertiary_default": "#5ca28f",
-  "semantic_border_tertiary_hover": "#4c907e",
-  "semantic_border_tertiary_active": "#407d6d",
+  "semantic_border_first_default": "#5c61d2",
+  "semantic_border_first_hover": "#3339c6",
+  "semantic_border_first_active": "#0008b8",
+  "semantic_border_second_default": "#ffa869",
+  "semantic_border_second_hover": "#e6975f",
+  "semantic_border_second_active": "#b3764a",
+  "semantic_border_third_default": "#5ca28f",
+  "semantic_border_third_hover": "#4c907e",
+  "semantic_border_third_active": "#407d6d",
   "semantic_text_success_default": "#0c6536",
   "semantic_text_success_hover": "#084826",
   "semantic_text_success_active": "#084826",
@@ -134,14 +134,14 @@ module.exports = {
   "semantic_text_action_hover": "#004e95",
   "semantic_text_action_active": "#00315d",
   "semantic_text_action_on_action": "#ffffff",
-  "semantic_text_action_primary_default": "#0062ba",
-  "semantic_text_action_primary_hover": "#004e95",
-  "semantic_text_action_primary_active": "#00315d",
-  "semantic_text_action_primary_on_action": "#ffffff",
-  "semantic_text_action_secondary_default": "#00315d",
-  "semantic_text_action_secondary_hover": "#00315d",
-  "semantic_text_action_secondary_active": "#00315d",
-  "semantic_text_action_secondary_on_action": "#ffffff",
+  "semantic_text_action_first_default": "#0062ba",
+  "semantic_text_action_first_hover": "#004e95",
+  "semantic_text_action_first_active": "#00315d",
+  "semantic_text_action_first_on_action": "#ffffff",
+  "semantic_text_action_second_default": "#00315d",
+  "semantic_text_action_second_hover": "#00315d",
+  "semantic_text_action_second_active": "#00315d",
+  "semantic_text_action_second_on_action": "#ffffff",
   "semantic_text_warning_default": "#995404",
   "semantic_text_warning_icon_warning": "#cc7005",
   "semantic_text_warning_on_warning": "#663802",
@@ -170,6 +170,7 @@ module.exports = {
   "typography_label_medium": "500 1.125rem/1.3 'Inter'",
   "typography_label_small": "500 0.9375rem/1.3 'Inter'",
   "typography_label_xsmall": "500 0.8125rem/1.3 'Inter'",
+  "typography_error_message_large": "400 1.3125rem/1.3 'Inter'",
   "typography_error_message_medium": "400 1.125rem/1.3 'Inter'",
   "typography_error_message_small": "400 0.9375rem/1.3 'Inter'",
   "typography_error_message_xsmall": "400 0.8125rem/1.3 'Inter'",
@@ -224,33 +225,33 @@ module.exports = {
   "shadow_medium": "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a",
   "shadow_large": "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a",
   "shadow_xlarge": "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a",
-  "brand_primary_100": "#efeffb",
-  "brand_primary_200": "#dedff6",
-  "brand_primary_300": "#bec0ed",
-  "brand_primary_400": "#9da0e4",
-  "brand_primary_500": "#7d81db",
-  "brand_primary_600": "#5c61d2",
-  "brand_primary_700": "#3339c6",
-  "brand_primary_800": "#0008b8",
-  "brand_primary_900": "#00078F",
-  "brand_secondary_100": "#ffeee1",
-  "brand_secondary_200": "#ffdcc3",
-  "brand_secondary_300": "#fdd4b7",
-  "brand_secondary_400": "#ffc296",
-  "brand_secondary_500": "#ffb178",
-  "brand_secondary_600": "#ffa869",
-  "brand_secondary_700": "#e6975f",
-  "brand_secondary_800": "#b3764a",
-  "brand_secondary_900": "#9F6841",
-  "brand_tertiary_100": "#eff6f4",
-  "brand_tertiary_200": "#deece9",
-  "brand_tertiary_300": "#bedad2",
-  "brand_tertiary_400": "#9dc7bc",
-  "brand_tertiary_500": "#7db5a5",
-  "brand_tertiary_600": "#5ca28f",
-  "brand_tertiary_700": "#4c907e",
-  "brand_tertiary_800": "#407d6d",
-  "brand_tertiary_900": "#376C5E",
+  "brand_alt1_100": "#efeffb",
+  "brand_alt1_200": "#dedff6",
+  "brand_alt1_300": "#bec0ed",
+  "brand_alt1_400": "#9da0e4",
+  "brand_alt1_500": "#7d81db",
+  "brand_alt1_600": "#5c61d2",
+  "brand_alt1_700": "#3339c6",
+  "brand_alt1_800": "#0008b8",
+  "brand_alt1_900": "#00078F",
+  "brand_alt2_100": "#ffeee1",
+  "brand_alt2_200": "#ffdcc3",
+  "brand_alt2_300": "#fdd4b7",
+  "brand_alt2_400": "#ffc296",
+  "brand_alt2_500": "#ffb178",
+  "brand_alt2_600": "#ffa869",
+  "brand_alt2_700": "#e6975f",
+  "brand_alt2_800": "#b3764a",
+  "brand_alt2_900": "#9F6841",
+  "brand_alt3_100": "#eff6f4",
+  "brand_alt3_200": "#deece9",
+  "brand_alt3_300": "#bedad2",
+  "brand_alt3_400": "#9dc7bc",
+  "brand_alt3_500": "#7db5a5",
+  "brand_alt3_600": "#5ca28f",
+  "brand_alt3_700": "#4c907e",
+  "brand_alt3_800": "#407d6d",
+  "brand_alt3_900": "#376C5E",
   "component_mode_height_small": "36px",
   "component_mode_height_medium": "45px",
   "component_mode_height_large": "54px",
diff --git a/packages/tokens/brand/tilsynet/tokens.css b/packages/tokens/brand/tilsynet/tokens.css
index 8613065b1c..56461a7ae5 100644
--- a/packages/tokens/brand/tilsynet/tokens.css
+++ b/packages/tokens/brand/tilsynet/tokens.css
@@ -26,22 +26,22 @@
   --fds-semantic-surface-action-no_fill-hover: #e6eff8;
   --fds-semantic-surface-action-no_fill-active: #b3d0ea;
   --fds-semantic-surface-action-checked: #0062ba;
-  --fds-semantic-surface-action-primary-subtle: #e6eff8;
-  --fds-semantic-surface-action-primary-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-action-primary-default: #3339c6;
-  --fds-semantic-surface-action-primary-hover: #0008b8;
-  --fds-semantic-surface-action-primary-active: #00078F;
-  --fds-semantic-surface-action-primary-no_fill: #ffffff;
-  --fds-semantic-surface-action-primary-no_fill-hover: #e6eff8;
-  --fds-semantic-surface-action-primary-no_fill-active: #b3d0ea;
-  --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
-  --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
-  --fds-semantic-surface-action-secondary-default: #407d6d;
-  --fds-semantic-surface-action-secondary-hover: #376C5E;
-  --fds-semantic-surface-action-secondary-active: #376C5E;
-  --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
+  --fds-semantic-surface-action-first-subtle: #f4f5f6;
+  --fds-semantic-surface-action-first-subtle-hover: #e9eaec;
+  --fds-semantic-surface-action-first-default: #00315d;
+  --fds-semantic-surface-action-first-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-first-active: rgba(0, 49, 93, 0.8);
+  --fds-semantic-surface-action-first-no_fill: #ffffff;
+  --fds-semantic-surface-action-first-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-first-no_fill-active: rgba(0, 49, 93, 0.2);
+  --fds-semantic-surface-action-second-subtle: #f4f5f6;
+  --fds-semantic-surface-action-second-subtle-hover: #e9eaec;
+  --fds-semantic-surface-action-second-default: #00315d;
+  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
+  --fds-semantic-surface-action-second-no_fill: #ffffff;
+  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;
@@ -69,18 +69,18 @@
   --fds-semantic-surface-on_inverted-no_fill: #ffffff00;
   --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a;
   --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33;
-  --fds-semantic-surface-primary-light: #dedff6;
-  --fds-semantic-surface-primary-light-hover: #bec0ed;
-  --fds-semantic-surface-primary-light-active: #9da0e4;
-  --fds-semantic-surface-primary-dark: #0008b8;
-  --fds-semantic-surface-secondary-light: #ffdcc3;
-  --fds-semantic-surface-secondary-light-hover: #fdd4b7;
-  --fds-semantic-surface-secondary-light-active: #ffc296;
-  --fds-semantic-surface-secondary-dark: #9F6841;
-  --fds-semantic-surface-tertiary-light: #deece9;
-  --fds-semantic-surface-tertiary-light-hover: #bedad2;
-  --fds-semantic-surface-tertiary-light-active: #9dc7bc;
-  --fds-semantic-surface-tertiary-dark: #407d6d;
+  --fds-semantic-surface-first-light: #dedff6;
+  --fds-semantic-surface-first-light-hover: #bec0ed;
+  --fds-semantic-surface-first-light-active: #9da0e4;
+  --fds-semantic-surface-first-dark: #0008b8;
+  --fds-semantic-surface-second-light: #ffdcc3;
+  --fds-semantic-surface-second-light-hover: #fdd4b7;
+  --fds-semantic-surface-second-light-active: #ffc296;
+  --fds-semantic-surface-second-dark: #9F6841;
+  --fds-semantic-surface-third-light: #deece9;
+  --fds-semantic-surface-third-light-hover: #bedad2;
+  --fds-semantic-surface-third-light-active: #9dc7bc;
+  --fds-semantic-surface-third-dark: #407d6d;
   --fds-semantic-border-info-default: #004e95;
   --fds-semantic-border-action-subtle: #b3d0ea;
   --fds-semantic-border-action-subtle-hover: #66a1d6;
@@ -89,16 +89,16 @@
   --fds-semantic-border-action-active: #00315d;
   --fds-semantic-border-action-dark: #00315d;
   --fds-semantic-border-action-dark-hover: #0062ba;
-  --fds-semantic-border-action-primary-subtle: #b3d0ea;
-  --fds-semantic-border-action-primary-subtle-hover: #66a1d6;
-  --fds-semantic-border-action-primary-default: #0062ba;
-  --fds-semantic-border-action-primary-hover: #004e95;
-  --fds-semantic-border-action-primary-active: #00315d;
-  --fds-semantic-border-action-secondary-subtle: #e9eaec;
-  --fds-semantic-border-action-secondary-subtle-hover: #d2d5d8;
-  --fds-semantic-border-action-secondary-default: #00315d;
-  --fds-semantic-border-action-secondary-hover: #00315d;
-  --fds-semantic-border-action-secondary-active: #00315d;
+  --fds-semantic-border-action-first-subtle: #b3d0ea;
+  --fds-semantic-border-action-first-subtle-hover: #66a1d6;
+  --fds-semantic-border-action-first-default: #0062ba;
+  --fds-semantic-border-action-first-hover: #004e95;
+  --fds-semantic-border-action-first-active: #00315d;
+  --fds-semantic-border-action-second-subtle: #e9eaec;
+  --fds-semantic-border-action-second-subtle-hover: #d2d5d8;
+  --fds-semantic-border-action-second-default: #00315d;
+  --fds-semantic-border-action-second-hover: #00315d;
+  --fds-semantic-border-action-second-active: #00315d;
   --fds-semantic-border-neutral-default: #68707c;
   --fds-semantic-border-neutral-subtle: #d2d5d8;
   --fds-semantic-border-neutral-strong: #1e2b3c;
@@ -117,15 +117,15 @@
   --fds-semantic-border-on_inverted-default: #ffffff;
   --fds-semantic-border-input-default: #00315d;
   --fds-semantic-border-input-hover: #0062ba;
-  --fds-semantic-border-primary-default: #5c61d2;
-  --fds-semantic-border-primary-hover: #3339c6;
-  --fds-semantic-border-primary-active: #0008b8;
-  --fds-semantic-border-secondary-default: #ffa869;
-  --fds-semantic-border-secondary-hover: #e6975f;
-  --fds-semantic-border-secondary-active: #b3764a;
-  --fds-semantic-border-tertiary-default: #5ca28f;
-  --fds-semantic-border-tertiary-hover: #4c907e;
-  --fds-semantic-border-tertiary-active: #407d6d;
+  --fds-semantic-border-first-default: #5c61d2;
+  --fds-semantic-border-first-hover: #3339c6;
+  --fds-semantic-border-first-active: #0008b8;
+  --fds-semantic-border-second-default: #ffa869;
+  --fds-semantic-border-second-hover: #e6975f;
+  --fds-semantic-border-second-active: #b3764a;
+  --fds-semantic-border-third-default: #5ca28f;
+  --fds-semantic-border-third-hover: #4c907e;
+  --fds-semantic-border-third-active: #407d6d;
   --fds-semantic-text-success-default: #0c6536;
   --fds-semantic-text-success-hover: #084826;
   --fds-semantic-text-success-active: #084826;
@@ -138,14 +138,14 @@
   --fds-semantic-text-action-hover: #004e95;
   --fds-semantic-text-action-active: #00315d;
   --fds-semantic-text-action-on_action: #ffffff;
-  --fds-semantic-text-action-primary-default: #0062ba;
-  --fds-semantic-text-action-primary-hover: #004e95;
-  --fds-semantic-text-action-primary-active: #00315d;
-  --fds-semantic-text-action-primary-on_action: #ffffff;
-  --fds-semantic-text-action-secondary-default: #00315d;
-  --fds-semantic-text-action-secondary-hover: #00315d;
-  --fds-semantic-text-action-secondary-active: #00315d;
-  --fds-semantic-text-action-secondary-on_action: #ffffff;
+  --fds-semantic-text-action-first-default: #0062ba;
+  --fds-semantic-text-action-first-hover: #004e95;
+  --fds-semantic-text-action-first-active: #00315d;
+  --fds-semantic-text-action-first-on_action: #ffffff;
+  --fds-semantic-text-action-second-default: #00315d;
+  --fds-semantic-text-action-second-hover: #00315d;
+  --fds-semantic-text-action-second-active: #00315d;
+  --fds-semantic-text-action-second-on_action: #ffffff;
   --fds-semantic-text-warning-default: #995404;
   --fds-semantic-text-warning-icon_warning: #cc7005;
   --fds-semantic-text-warning-on_warning: #663802;
@@ -174,6 +174,7 @@
   --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-label-xsmall: 500 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
+  --fds-typography-error_message-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
   --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
   --fds-typography-error_message-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
   --fds-typography-error_message-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
@@ -228,33 +229,33 @@
   --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a;
   --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a;
   --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a;
-  --fds-brand-primary-100: #efeffb;
-  --fds-brand-primary-200: #dedff6;
-  --fds-brand-primary-300: #bec0ed;
-  --fds-brand-primary-400: #9da0e4;
-  --fds-brand-primary-500: #7d81db;
-  --fds-brand-primary-600: #5c61d2;
-  --fds-brand-primary-700: #3339c6;
-  --fds-brand-primary-800: #0008b8;
-  --fds-brand-primary-900: #00078F;
-  --fds-brand-secondary-100: #ffeee1;
-  --fds-brand-secondary-200: #ffdcc3;
-  --fds-brand-secondary-300: #fdd4b7;
-  --fds-brand-secondary-400: #ffc296;
-  --fds-brand-secondary-500: #ffb178;
-  --fds-brand-secondary-600: #ffa869;
-  --fds-brand-secondary-700: #e6975f;
-  --fds-brand-secondary-800: #b3764a;
-  --fds-brand-secondary-900: #9F6841;
-  --fds-brand-tertiary-100: #eff6f4;
-  --fds-brand-tertiary-200: #deece9;
-  --fds-brand-tertiary-300: #bedad2;
-  --fds-brand-tertiary-400: #9dc7bc;
-  --fds-brand-tertiary-500: #7db5a5;
-  --fds-brand-tertiary-600: #5ca28f;
-  --fds-brand-tertiary-700: #4c907e;
-  --fds-brand-tertiary-800: #407d6d;
-  --fds-brand-tertiary-900: #376C5E;
+  --fds-brand-alt1-100: #efeffb;
+  --fds-brand-alt1-200: #dedff6;
+  --fds-brand-alt1-300: #bec0ed;
+  --fds-brand-alt1-400: #9da0e4;
+  --fds-brand-alt1-500: #7d81db;
+  --fds-brand-alt1-600: #5c61d2;
+  --fds-brand-alt1-700: #3339c6;
+  --fds-brand-alt1-800: #0008b8;
+  --fds-brand-alt1-900: #00078F;
+  --fds-brand-alt2-100: #ffeee1;
+  --fds-brand-alt2-200: #ffdcc3;
+  --fds-brand-alt2-300: #fdd4b7;
+  --fds-brand-alt2-400: #ffc296;
+  --fds-brand-alt2-500: #ffb178;
+  --fds-brand-alt2-600: #ffa869;
+  --fds-brand-alt2-700: #e6975f;
+  --fds-brand-alt2-800: #b3764a;
+  --fds-brand-alt2-900: #9F6841;
+  --fds-brand-alt3-100: #eff6f4;
+  --fds-brand-alt3-200: #deece9;
+  --fds-brand-alt3-300: #bedad2;
+  --fds-brand-alt3-400: #9dc7bc;
+  --fds-brand-alt3-500: #7db5a5;
+  --fds-brand-alt3-600: #5ca28f;
+  --fds-brand-alt3-700: #4c907e;
+  --fds-brand-alt3-800: #407d6d;
+  --fds-brand-alt3-900: #376C5E;
   --fds-component-mode-height-small: 36px;
   --fds-component-mode-height-medium: var(--fds-sizing-10);
   --fds-component-mode-height-large: var(--fds-sizing-12);
diff --git a/packages/tokens/brand/tilsynet/tokens.d.ts b/packages/tokens/brand/tilsynet/tokens.d.ts
index 1bea6c8114..7d87c4a3ec 100644
--- a/packages/tokens/brand/tilsynet/tokens.d.ts
+++ b/packages/tokens/brand/tilsynet/tokens.d.ts
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill : string;
 export const semantic_surface_action_no_fill_hover : string;
 export const semantic_surface_action_no_fill_active : string;
 export const semantic_surface_action_checked : string;
-export const semantic_surface_action_primary_subtle : string;
-export const semantic_surface_action_primary_subtle_hover : string;
-export const semantic_surface_action_primary_default : string;
-export const semantic_surface_action_primary_hover : string;
-export const semantic_surface_action_primary_active : string;
-export const semantic_surface_action_primary_no_fill : string;
-export const semantic_surface_action_primary_no_fill_hover : string;
-export const semantic_surface_action_primary_no_fill_active : string;
-export const semantic_surface_action_secondary_subtle : string;
-export const semantic_surface_action_secondary_subtle_hover : string;
-export const semantic_surface_action_secondary_default : string;
-export const semantic_surface_action_secondary_hover : string;
-export const semantic_surface_action_secondary_active : string;
-export const semantic_surface_action_secondary_no_fill : string;
-export const semantic_surface_action_secondary_no_fill_hover : string;
-export const semantic_surface_action_secondary_no_fill_active : string;
+export const semantic_surface_action_first_subtle : string;
+export const semantic_surface_action_first_subtle_hover : string;
+export const semantic_surface_action_first_default : string;
+export const semantic_surface_action_first_hover : string;
+export const semantic_surface_action_first_active : string;
+export const semantic_surface_action_first_no_fill : string;
+export const semantic_surface_action_first_no_fill_hover : string;
+export const semantic_surface_action_first_no_fill_active : string;
+export const semantic_surface_action_second_subtle : string;
+export const semantic_surface_action_second_subtle_hover : string;
+export const semantic_surface_action_second_default : string;
+export const semantic_surface_action_second_hover : string;
+export const semantic_surface_action_second_active : string;
+export const semantic_surface_action_second_no_fill : string;
+export const semantic_surface_action_second_no_fill_hover : string;
+export const semantic_surface_action_second_no_fill_active : string;
 export const semantic_surface_success_subtle : string;
 export const semantic_surface_success_subtle_hover : string;
 export const semantic_surface_success_default : string;
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active : string;
 export const semantic_surface_on_inverted_no_fill : string;
 export const semantic_surface_on_inverted_no_fill_hover : string;
 export const semantic_surface_on_inverted_no_fill_active : string;
-export const semantic_surface_primary_light : string;
-export const semantic_surface_primary_light_hover : string;
-export const semantic_surface_primary_light_active : string;
-export const semantic_surface_primary_dark : string;
-export const semantic_surface_secondary_light : string;
-export const semantic_surface_secondary_light_hover : string;
-export const semantic_surface_secondary_light_active : string;
-export const semantic_surface_secondary_dark : string;
-export const semantic_surface_tertiary_light : string;
-export const semantic_surface_tertiary_light_hover : string;
-export const semantic_surface_tertiary_light_active : string;
-export const semantic_surface_tertiary_dark : string;
+export const semantic_surface_first_light : string;
+export const semantic_surface_first_light_hover : string;
+export const semantic_surface_first_light_active : string;
+export const semantic_surface_first_dark : string;
+export const semantic_surface_second_light : string;
+export const semantic_surface_second_light_hover : string;
+export const semantic_surface_second_light_active : string;
+export const semantic_surface_second_dark : string;
+export const semantic_surface_third_light : string;
+export const semantic_surface_third_light_hover : string;
+export const semantic_surface_third_light_active : string;
+export const semantic_surface_third_dark : string;
 export const semantic_border_info_default : string;
 export const semantic_border_action_subtle : string;
 export const semantic_border_action_subtle_hover : string;
@@ -84,16 +84,16 @@ export const semantic_border_action_hover : string;
 export const semantic_border_action_active : string;
 export const semantic_border_action_dark : string;
 export const semantic_border_action_dark_hover : string;
-export const semantic_border_action_primary_subtle : string;
-export const semantic_border_action_primary_subtle_hover : string;
-export const semantic_border_action_primary_default : string;
-export const semantic_border_action_primary_hover : string;
-export const semantic_border_action_primary_active : string;
-export const semantic_border_action_secondary_subtle : string;
-export const semantic_border_action_secondary_subtle_hover : string;
-export const semantic_border_action_secondary_default : string;
-export const semantic_border_action_secondary_hover : string;
-export const semantic_border_action_secondary_active : string;
+export const semantic_border_action_first_subtle : string;
+export const semantic_border_action_first_subtle_hover : string;
+export const semantic_border_action_first_default : string;
+export const semantic_border_action_first_hover : string;
+export const semantic_border_action_first_active : string;
+export const semantic_border_action_second_subtle : string;
+export const semantic_border_action_second_subtle_hover : string;
+export const semantic_border_action_second_default : string;
+export const semantic_border_action_second_hover : string;
+export const semantic_border_action_second_active : string;
 export const semantic_border_neutral_default : string;
 export const semantic_border_neutral_subtle : string;
 export const semantic_border_neutral_strong : string;
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow : string;
 export const semantic_border_on_inverted_default : string;
 export const semantic_border_input_default : string;
 export const semantic_border_input_hover : string;
-export const semantic_border_primary_default : string;
-export const semantic_border_primary_hover : string;
-export const semantic_border_primary_active : string;
-export const semantic_border_secondary_default : string;
-export const semantic_border_secondary_hover : string;
-export const semantic_border_secondary_active : string;
-export const semantic_border_tertiary_default : string;
-export const semantic_border_tertiary_hover : string;
-export const semantic_border_tertiary_active : string;
+export const semantic_border_first_default : string;
+export const semantic_border_first_hover : string;
+export const semantic_border_first_active : string;
+export const semantic_border_second_default : string;
+export const semantic_border_second_hover : string;
+export const semantic_border_second_active : string;
+export const semantic_border_third_default : string;
+export const semantic_border_third_hover : string;
+export const semantic_border_third_active : string;
 export const semantic_text_success_default : string;
 export const semantic_text_success_hover : string;
 export const semantic_text_success_active : string;
@@ -133,14 +133,14 @@ export const semantic_text_action_default : string;
 export const semantic_text_action_hover : string;
 export const semantic_text_action_active : string;
 export const semantic_text_action_on_action : string;
-export const semantic_text_action_primary_default : string;
-export const semantic_text_action_primary_hover : string;
-export const semantic_text_action_primary_active : string;
-export const semantic_text_action_primary_on_action : string;
-export const semantic_text_action_secondary_default : string;
-export const semantic_text_action_secondary_hover : string;
-export const semantic_text_action_secondary_active : string;
-export const semantic_text_action_secondary_on_action : string;
+export const semantic_text_action_first_default : string;
+export const semantic_text_action_first_hover : string;
+export const semantic_text_action_first_active : string;
+export const semantic_text_action_first_on_action : string;
+export const semantic_text_action_second_default : string;
+export const semantic_text_action_second_hover : string;
+export const semantic_text_action_second_active : string;
+export const semantic_text_action_second_on_action : string;
 export const semantic_text_warning_default : string;
 export const semantic_text_warning_icon_warning : string;
 export const semantic_text_warning_on_warning : string;
@@ -169,6 +169,7 @@ export const typography_label_large : string;
 export const typography_label_medium : string;
 export const typography_label_small : string;
 export const typography_label_xsmall : string;
+export const typography_error_message_large : string;
 export const typography_error_message_medium : string;
 export const typography_error_message_small : string;
 export const typography_error_message_xsmall : string;
@@ -223,33 +224,33 @@ export const shadow_small : string;
 export const shadow_medium : string;
 export const shadow_large : string;
 export const shadow_xlarge : string;
-export const brand_primary_100 : string;
-export const brand_primary_200 : string;
-export const brand_primary_300 : string;
-export const brand_primary_400 : string;
-export const brand_primary_500 : string;
-export const brand_primary_600 : string;
-export const brand_primary_700 : string;
-export const brand_primary_800 : string;
-export const brand_primary_900 : string;
-export const brand_secondary_100 : string;
-export const brand_secondary_200 : string;
-export const brand_secondary_300 : string;
-export const brand_secondary_400 : string;
-export const brand_secondary_500 : string;
-export const brand_secondary_600 : string;
-export const brand_secondary_700 : string;
-export const brand_secondary_800 : string;
-export const brand_secondary_900 : string;
-export const brand_tertiary_100 : string;
-export const brand_tertiary_200 : string;
-export const brand_tertiary_300 : string;
-export const brand_tertiary_400 : string;
-export const brand_tertiary_500 : string;
-export const brand_tertiary_600 : string;
-export const brand_tertiary_700 : string;
-export const brand_tertiary_800 : string;
-export const brand_tertiary_900 : string;
+export const brand_alt1_100 : string;
+export const brand_alt1_200 : string;
+export const brand_alt1_300 : string;
+export const brand_alt1_400 : string;
+export const brand_alt1_500 : string;
+export const brand_alt1_600 : string;
+export const brand_alt1_700 : string;
+export const brand_alt1_800 : string;
+export const brand_alt1_900 : string;
+export const brand_alt2_100 : string;
+export const brand_alt2_200 : string;
+export const brand_alt2_300 : string;
+export const brand_alt2_400 : string;
+export const brand_alt2_500 : string;
+export const brand_alt2_600 : string;
+export const brand_alt2_700 : string;
+export const brand_alt2_800 : string;
+export const brand_alt2_900 : string;
+export const brand_alt3_100 : string;
+export const brand_alt3_200 : string;
+export const brand_alt3_300 : string;
+export const brand_alt3_400 : string;
+export const brand_alt3_500 : string;
+export const brand_alt3_600 : string;
+export const brand_alt3_700 : string;
+export const brand_alt3_800 : string;
+export const brand_alt3_900 : string;
 export const component_mode_height_small : string;
 export const component_mode_height_medium : string;
 export const component_mode_height_large : string;
diff --git a/packages/tokens/brand/tilsynet/tokens.esm.js b/packages/tokens/brand/tilsynet/tokens.esm.js
index 1d93cf04d2..602eb55ad3 100644
--- a/packages/tokens/brand/tilsynet/tokens.esm.js
+++ b/packages/tokens/brand/tilsynet/tokens.esm.js
@@ -21,22 +21,22 @@ export const semantic_surface_action_no_fill = "#ffffff";
 export const semantic_surface_action_no_fill_hover = "#e6eff8";
 export const semantic_surface_action_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_checked = "#0062ba";
-export const semantic_surface_action_primary_subtle = "#e6eff8";
-export const semantic_surface_action_primary_subtle_hover = "#b3d0ea";
-export const semantic_surface_action_primary_default = "#3339c6";
-export const semantic_surface_action_primary_hover = "#0008b8";
-export const semantic_surface_action_primary_active = "#00078F";
-export const semantic_surface_action_primary_no_fill = "#ffffff";
-export const semantic_surface_action_primary_no_fill_hover = "#e6eff8";
-export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
-export const semantic_surface_action_secondary_subtle = "#f4f5f6";
-export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
-export const semantic_surface_action_secondary_default = "#407d6d";
-export const semantic_surface_action_secondary_hover = "#376C5E";
-export const semantic_surface_action_secondary_active = "#376C5E";
-export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
+export const semantic_surface_action_first_subtle = "#f4f5f6";
+export const semantic_surface_action_first_subtle_hover = "#e9eaec";
+export const semantic_surface_action_first_default = "#00315d";
+export const semantic_surface_action_first_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_first_active = "rgba(0, 49, 93, 0.8)";
+export const semantic_surface_action_first_no_fill = "#ffffff";
+export const semantic_surface_action_first_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_first_no_fill_active = "rgba(0, 49, 93, 0.2)";
+export const semantic_surface_action_second_subtle = "#f4f5f6";
+export const semantic_surface_action_second_subtle_hover = "#e9eaec";
+export const semantic_surface_action_second_default = "#00315d";
+export const semantic_surface_action_second_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_second_active = "rgba(0, 49, 93, 0.8)";
+export const semantic_surface_action_second_no_fill = "#ffffff";
+export const semantic_surface_action_second_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_second_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";
@@ -64,18 +64,18 @@ export const semantic_surface_on_inverted_active = "#ffffffcc";
 export const semantic_surface_on_inverted_no_fill = "#ffffff00";
 export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a";
 export const semantic_surface_on_inverted_no_fill_active = "#ffffff33";
-export const semantic_surface_primary_light = "#dedff6";
-export const semantic_surface_primary_light_hover = "#bec0ed";
-export const semantic_surface_primary_light_active = "#9da0e4";
-export const semantic_surface_primary_dark = "#0008b8";
-export const semantic_surface_secondary_light = "#ffdcc3";
-export const semantic_surface_secondary_light_hover = "#fdd4b7";
-export const semantic_surface_secondary_light_active = "#ffc296";
-export const semantic_surface_secondary_dark = "#9F6841";
-export const semantic_surface_tertiary_light = "#deece9";
-export const semantic_surface_tertiary_light_hover = "#bedad2";
-export const semantic_surface_tertiary_light_active = "#9dc7bc";
-export const semantic_surface_tertiary_dark = "#407d6d";
+export const semantic_surface_first_light = "#dedff6";
+export const semantic_surface_first_light_hover = "#bec0ed";
+export const semantic_surface_first_light_active = "#9da0e4";
+export const semantic_surface_first_dark = "#0008b8";
+export const semantic_surface_second_light = "#ffdcc3";
+export const semantic_surface_second_light_hover = "#fdd4b7";
+export const semantic_surface_second_light_active = "#ffc296";
+export const semantic_surface_second_dark = "#9F6841";
+export const semantic_surface_third_light = "#deece9";
+export const semantic_surface_third_light_hover = "#bedad2";
+export const semantic_surface_third_light_active = "#9dc7bc";
+export const semantic_surface_third_dark = "#407d6d";
 export const semantic_border_info_default = "#004e95";
 export const semantic_border_action_subtle = "#b3d0ea";
 export const semantic_border_action_subtle_hover = "#66a1d6";
@@ -84,16 +84,16 @@ export const semantic_border_action_hover = "#0062ba";
 export const semantic_border_action_active = "#00315d";
 export const semantic_border_action_dark = "#00315d";
 export const semantic_border_action_dark_hover = "#0062ba";
-export const semantic_border_action_primary_subtle = "#b3d0ea";
-export const semantic_border_action_primary_subtle_hover = "#66a1d6";
-export const semantic_border_action_primary_default = "#0062ba";
-export const semantic_border_action_primary_hover = "#004e95";
-export const semantic_border_action_primary_active = "#00315d";
-export const semantic_border_action_secondary_subtle = "#e9eaec";
-export const semantic_border_action_secondary_subtle_hover = "#d2d5d8";
-export const semantic_border_action_secondary_default = "#00315d";
-export const semantic_border_action_secondary_hover = "#00315d";
-export const semantic_border_action_secondary_active = "#00315d";
+export const semantic_border_action_first_subtle = "#b3d0ea";
+export const semantic_border_action_first_subtle_hover = "#66a1d6";
+export const semantic_border_action_first_default = "#0062ba";
+export const semantic_border_action_first_hover = "#004e95";
+export const semantic_border_action_first_active = "#00315d";
+export const semantic_border_action_second_subtle = "#e9eaec";
+export const semantic_border_action_second_subtle_hover = "#d2d5d8";
+export const semantic_border_action_second_default = "#00315d";
+export const semantic_border_action_second_hover = "#00315d";
+export const semantic_border_action_second_active = "#00315d";
 export const semantic_border_neutral_default = "#68707c";
 export const semantic_border_neutral_subtle = "#d2d5d8";
 export const semantic_border_neutral_strong = "#1e2b3c";
@@ -112,15 +112,15 @@ export const semantic_border_focus_boxshadow = "#1e2b3c";
 export const semantic_border_on_inverted_default = "#ffffff";
 export const semantic_border_input_default = "#00315d";
 export const semantic_border_input_hover = "#0062ba";
-export const semantic_border_primary_default = "#5c61d2";
-export const semantic_border_primary_hover = "#3339c6";
-export const semantic_border_primary_active = "#0008b8";
-export const semantic_border_secondary_default = "#ffa869";
-export const semantic_border_secondary_hover = "#e6975f";
-export const semantic_border_secondary_active = "#b3764a";
-export const semantic_border_tertiary_default = "#5ca28f";
-export const semantic_border_tertiary_hover = "#4c907e";
-export const semantic_border_tertiary_active = "#407d6d";
+export const semantic_border_first_default = "#5c61d2";
+export const semantic_border_first_hover = "#3339c6";
+export const semantic_border_first_active = "#0008b8";
+export const semantic_border_second_default = "#ffa869";
+export const semantic_border_second_hover = "#e6975f";
+export const semantic_border_second_active = "#b3764a";
+export const semantic_border_third_default = "#5ca28f";
+export const semantic_border_third_hover = "#4c907e";
+export const semantic_border_third_active = "#407d6d";
 export const semantic_text_success_default = "#0c6536";
 export const semantic_text_success_hover = "#084826";
 export const semantic_text_success_active = "#084826";
@@ -133,14 +133,14 @@ export const semantic_text_action_default = "#0062ba";
 export const semantic_text_action_hover = "#004e95";
 export const semantic_text_action_active = "#00315d";
 export const semantic_text_action_on_action = "#ffffff";
-export const semantic_text_action_primary_default = "#0062ba";
-export const semantic_text_action_primary_hover = "#004e95";
-export const semantic_text_action_primary_active = "#00315d";
-export const semantic_text_action_primary_on_action = "#ffffff";
-export const semantic_text_action_secondary_default = "#00315d";
-export const semantic_text_action_secondary_hover = "#00315d";
-export const semantic_text_action_secondary_active = "#00315d";
-export const semantic_text_action_secondary_on_action = "#ffffff";
+export const semantic_text_action_first_default = "#0062ba";
+export const semantic_text_action_first_hover = "#004e95";
+export const semantic_text_action_first_active = "#00315d";
+export const semantic_text_action_first_on_action = "#ffffff";
+export const semantic_text_action_second_default = "#00315d";
+export const semantic_text_action_second_hover = "#00315d";
+export const semantic_text_action_second_active = "#00315d";
+export const semantic_text_action_second_on_action = "#ffffff";
 export const semantic_text_warning_default = "#995404";
 export const semantic_text_warning_icon_warning = "#cc7005";
 export const semantic_text_warning_on_warning = "#663802";
@@ -169,6 +169,7 @@ export const typography_label_large = "500 1.3125rem/1.3 'Inter'";
 export const typography_label_medium = "500 1.125rem/1.3 'Inter'";
 export const typography_label_small = "500 0.9375rem/1.3 'Inter'";
 export const typography_label_xsmall = "500 0.8125rem/1.3 'Inter'";
+export const typography_error_message_large = "400 1.3125rem/1.3 'Inter'";
 export const typography_error_message_medium = "400 1.125rem/1.3 'Inter'";
 export const typography_error_message_small = "400 0.9375rem/1.3 'Inter'";
 export const typography_error_message_xsmall = "400 0.8125rem/1.3 'Inter'";
@@ -223,33 +224,33 @@ export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a";
 export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a";
 export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a";
 export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a";
-export const brand_primary_100 = "#efeffb";
-export const brand_primary_200 = "#dedff6";
-export const brand_primary_300 = "#bec0ed";
-export const brand_primary_400 = "#9da0e4";
-export const brand_primary_500 = "#7d81db";
-export const brand_primary_600 = "#5c61d2";
-export const brand_primary_700 = "#3339c6";
-export const brand_primary_800 = "#0008b8";
-export const brand_primary_900 = "#00078F";
-export const brand_secondary_100 = "#ffeee1";
-export const brand_secondary_200 = "#ffdcc3";
-export const brand_secondary_300 = "#fdd4b7";
-export const brand_secondary_400 = "#ffc296";
-export const brand_secondary_500 = "#ffb178";
-export const brand_secondary_600 = "#ffa869";
-export const brand_secondary_700 = "#e6975f";
-export const brand_secondary_800 = "#b3764a";
-export const brand_secondary_900 = "#9F6841";
-export const brand_tertiary_100 = "#eff6f4";
-export const brand_tertiary_200 = "#deece9";
-export const brand_tertiary_300 = "#bedad2";
-export const brand_tertiary_400 = "#9dc7bc";
-export const brand_tertiary_500 = "#7db5a5";
-export const brand_tertiary_600 = "#5ca28f";
-export const brand_tertiary_700 = "#4c907e";
-export const brand_tertiary_800 = "#407d6d";
-export const brand_tertiary_900 = "#376C5E";
+export const brand_alt1_100 = "#efeffb";
+export const brand_alt1_200 = "#dedff6";
+export const brand_alt1_300 = "#bec0ed";
+export const brand_alt1_400 = "#9da0e4";
+export const brand_alt1_500 = "#7d81db";
+export const brand_alt1_600 = "#5c61d2";
+export const brand_alt1_700 = "#3339c6";
+export const brand_alt1_800 = "#0008b8";
+export const brand_alt1_900 = "#00078F";
+export const brand_alt2_100 = "#ffeee1";
+export const brand_alt2_200 = "#ffdcc3";
+export const brand_alt2_300 = "#fdd4b7";
+export const brand_alt2_400 = "#ffc296";
+export const brand_alt2_500 = "#ffb178";
+export const brand_alt2_600 = "#ffa869";
+export const brand_alt2_700 = "#e6975f";
+export const brand_alt2_800 = "#b3764a";
+export const brand_alt2_900 = "#9F6841";
+export const brand_alt3_100 = "#eff6f4";
+export const brand_alt3_200 = "#deece9";
+export const brand_alt3_300 = "#bedad2";
+export const brand_alt3_400 = "#9dc7bc";
+export const brand_alt3_500 = "#7db5a5";
+export const brand_alt3_600 = "#5ca28f";
+export const brand_alt3_700 = "#4c907e";
+export const brand_alt3_800 = "#407d6d";
+export const brand_alt3_900 = "#376C5E";
 export const component_mode_height_small = "36px";
 export const component_mode_height_medium = "45px";
 export const component_mode_height_large = "54px";
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 5d76017805..cb5cbfea44 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/design-system-tokens",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Tokens for the Digdir Common Design System",
   "repository": "https://github.com/digdir/designsystem",
   "license": "MIT",
diff --git a/storefront/components/Footer/Footer.tsx b/storefront/components/Footer/Footer.tsx
index 5f7e2a06ee..0b5314ad10 100644
--- a/storefront/components/Footer/Footer.tsx
+++ b/storefront/components/Footer/Footer.tsx
@@ -31,7 +31,7 @@ const rightLinks = [
   },
   {
     text: 'Bli invitert til slack',
-    url: 'https://join.slack.com/t/designsystemet/shared_invite/zt-22v5yui1f-XlDpD9FKhWT7dyUy6NVCHA',
+    url: 'https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ',
     prefix: (
       <Image
         height={20}
diff --git a/storefront/components/MdxContent/MdxContent.module.css b/storefront/components/MdxContent/MdxContent.module.css
index 5d3e325886..591f234dcb 100644
--- a/storefront/components/MdxContent/MdxContent.module.css
+++ b/storefront/components/MdxContent/MdxContent.module.css
@@ -11,36 +11,15 @@
 }
 
 .content > p {
-  font-size: 18px;
-  line-height: 1.55em;
-  margin-bottom: 20px;
+  font: var(--fds-typography-paragraph-medium);
+  margin-bottom: var(--fds-spacing-5);
 }
 
+/* A <p> tag that comes directly after <h1> will be treated as an ingress */
 .content h1 + p {
-  font-size: 24px;
-  line-height: 1.7em;
-  margin-bottom: 36px;
-}
-
-.content > h2 {
-  margin-top: 40px;
-  margin-bottom: 16px;
-  line-height: 1.3em;
-  font-size: 28px;
-}
-
-.content > h3 {
-  margin-top: 40px;
-  margin-bottom: 16px;
-  line-height: 1.3em;
-  font-size: 24px;
-}
-
-.content > h4 {
-  margin-top: 40px;
-  margin-bottom: 16px;
-  line-height: 1.3em;
-  font-size: 20px;
+  font: var(--fds-typography-ingress-medium);
+  margin-top: 0;
+  margin-bottom: var(--fds-spacing-8);
 }
 
 /* Heading styling with anchor link */
@@ -53,6 +32,32 @@
   margin-left: -26px;
 }
 
+.content > h2,
+.content > h3,
+.content > h4 {
+  margin-top: var(--fds-spacing-10);
+  margin-bottom: var(--fds-spacing-3);
+}
+
+.content > h1 {
+  margin-top: 0;
+  margin-bottom: var(--fds-spacing-4);
+  font: var(--fds-typography-heading-xlarge);
+}
+
+.content > h2 {
+  font: var(--fds-typography-heading-large);
+}
+
+.content > h3 {
+  font: var(--fds-typography-heading-medium);
+}
+
+.content > h4 {
+  font: var(--fds-typography-heading-small);
+}
+
+/* Anchor link styling */
 .content > h1 a,
 .content > h2 a,
 .content > h3 a,
@@ -65,6 +70,7 @@
   transition: 0.08s all;
 }
 
+/* Anchor link styling for <h1> */
 .content > h1 a {
   height: 24px;
   width: 24px;
@@ -72,13 +78,15 @@
   left: -4px;
 }
 
+/* Styling for links */
 .content > p > a,
 .content > ul > li a,
 .content > ol > li a {
-  color: #0062ba;
+  color: var(--fds-semantic-text-action-default);
   text-underline-offset: 4px;
 }
 
+/* Anchor links appear on heading hover */
 .content > h1:hover a,
 .content > h2:hover a,
 .content > h3:hover a,
@@ -88,26 +96,26 @@
 
 .content img {
   width: 100%;
-  margin: 24px 0;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0 0 0 / 0.1);
+  margin: var(--fds-spacing-5) 0;
+  border-radius: var(--fds-border_radius-medium);
+  box-shadow: var(--fds-shadow-medium);
 }
 
 .content strong {
-  margin-top: 8px;
   display: inline-block;
+  margin-top: var(--fds-spacing-1);
   font-weight: 500;
 }
 
 .content > ul > li,
 .content > ol > li {
-  font-size: 18px;
+  font: var(--fds-typography-paragraph-medium);
   line-height: 1.9em;
 }
 
 .content > ul > li > ol,
 .content > ol > li > ul {
-  margin-top: 8px;
+  margin-top: var(--fds-spacing-1);
 }
 
 .content > p > a:hover,
@@ -117,35 +125,33 @@
 }
 
 .content pre {
-  background-color: #f4f4f4;
-  padding: 20px;
-  border-radius: 4px;
-  margin: 32px 0;
+  background-color: var(--fds-semantic-background-subtle);
+  padding: var(--fds-spacing-5);
+  margin: var(--fds-spacing-7) 0;
+  border-radius: var(--fds-border_radius-medium);
 }
 
 .content > iframe {
-  box-shadow: 0 2px 4px rgba(0 0 0 / 0.2);
-  border-radius: 4px;
-  margin: 24px 0;
+  box-shadow: var(--fds-shadow-medium);
+  margin: var(--fds-spacing-5);
+  border-radius: var(--fds-border_radius-medium);
 }
 
 .content > table {
-  border-collapse: collapse;
   width: 100%;
-  margin: 32px 0;
+  margin: var(--fds-spacing-7) 0;
+  border-collapse: collapse;
 }
 
 .content > table td,
 .content > table th {
-  border: 1px solid #ddd;
-  padding: 16px;
+  padding: var(--fds-spacing-4);
+  border: 1px solid var(--fds-semantic-border-neutral-subtle);
 }
 
 .content > table th {
-  padding-top: 12px;
-  padding-bottom: 12px;
   text-align: left;
-  background-color: #f4f4f4;
+  background-color: var(--fds-semantic-background-subtle);
   font-weight: 600;
 }
 
diff --git a/storefront/components/SidebarMenu/SidebarMenu.tsx b/storefront/components/SidebarMenu/SidebarMenu.tsx
index c9bd14a3bd..fbe81a6398 100644
--- a/storefront/components/SidebarMenu/SidebarMenu.tsx
+++ b/storefront/components/SidebarMenu/SidebarMenu.tsx
@@ -41,7 +41,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
             className={classes.toggleBtn}
             fullWidth
             size='medium'
-            color='secondary'
+            color='second'
             variant='outline'
             onClick={() => setShowMenu(!showMenu)}
             aria-expanded={showMenu}
diff --git a/storefront/components/Tokens/TokenColor/TokenColor.tsx b/storefront/components/Tokens/TokenColor/TokenColor.tsx
index 4bfa19bfe1..054e24f1b2 100644
--- a/storefront/components/Tokens/TokenColor/TokenColor.tsx
+++ b/storefront/components/Tokens/TokenColor/TokenColor.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import classes from './TokenColor.module.css';
-import cn from 'classnames';
 
 interface TokenColorProps {
   value: string;
diff --git a/storefront/globals.css b/storefront/globals.css
index 7157771312..a4c7c93978 100644
--- a/storefront/globals.css
+++ b/storefront/globals.css
@@ -28,6 +28,7 @@
   --grid-gap: var(--spacing-5);
   --page-spacing-top: var(--spacing-7);
   --page-spacing-bottom: var(--spacing-7);
+  --page-gap: var(--fds-spacing-7);
   --preview-min-height: 81px;
 }
 
diff --git a/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css b/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css
deleted file mode 100644
index ab49ccd7aa..0000000000
--- a/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.link {
-  color: inherit;
-  text-decoration: none;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  margin-top: 24px;
-  transition: 0.15s all;
-}
-
-.link:hover {
-  cursor: pointer;
-}
-
-.link span {
-  text-decoration: underline;
-  text-underline-offset: 6px;
-  font-size: 18px;
-}
-
-.link svg {
-  margin-right: 12px;
-}
diff --git a/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx b/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx
index 54551cd967..c4d73cbbba 100644
--- a/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx
+++ b/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx
@@ -1,68 +1,11 @@
 import React from 'react';
 
-import {
-  Section,
-  NavigationCard,
-  Banner,
-  ImageSection,
-} from '../../components';
-import type { NavigationCardProps, ImageSectionProps } from '../../components';
-
-interface FrontpageLayoutProps {
-  Content: React.ReactNode;
-  data: FrontpageData;
-}
-
-interface FrontpageData {
-  title: string;
-  description: string;
-  navigationCards: {
-    title: string;
-    description: string;
-    items: [];
-  };
-  contributeSection: ImageSectionProps;
-}
-
-const FrontpageLayout = ({ Content, data }: FrontpageLayoutProps) => {
-  return (
-    <main id='main'>
-      {Content}
-      <div className='max-width-container main'>
-        <Banner
-          title={data.title}
-          desc={data.description}
-        />
-
-        <Section title={data.navigationCards.title}>
-          {data.navigationCards.items.map(
-            (item: NavigationCardProps, index: number) => (
-              <NavigationCard
-                key={index}
-                url={item.url}
-                title={item.title}
-                color={item.color}
-                icon={item.icon}
-                description={item.description}
-              />
-            ),
-          )}
-        </Section>
+type FrontpageLayoutProps = {
+  content: React.ReactNode;
+};
 
-        <ImageSection
-          title={data.contributeSection.title}
-          description={data.contributeSection.description}
-          imgSrc={data.contributeSection.imgSrc}
-          imgAlt={data.contributeSection.imgAlt}
-          headingLevel={data.contributeSection.headingLevel}
-          imgWidth={data.contributeSection.imgWidth}
-          imgHeight={data.contributeSection.imgHeight}
-          buttons={data.contributeSection.buttons}
-        />
-      </div>
-    </main>
-  );
+const FrontpageLayout = ({ content }: FrontpageLayoutProps) => {
+  return <main id='main'>{content}</main>;
 };
 
 export { FrontpageLayout };
-export type { FrontpageData };
diff --git a/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
index 01125202f1..9209e888b8 100644
--- a/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
+++ b/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
@@ -1,10 +1,10 @@
 .page {
-  margin-top: var(--page-spacing-top);
-  margin-bottom: var(--page-spacing-bottom);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: var(--spacing-5);
+  gap: var(--page-gap);
+  margin-top: var(--page-spacing-top);
+  margin-bottom: var(--page-spacing-bottom);
 }
 
 .left {
@@ -17,56 +17,40 @@
   flex-grow: 500;
 }
 
-.title {
-  font-size: 36px;
-  margin-bottom: 0;
-  line-height: 1.3em;
-}
-
-.desc {
-  font-size: 18px;
-  line-height: 1.6em;
-  margin-bottom: -10px;
-}
-
 .header {
-  padding: 32px;
-  margin-bottom: 32px;
-  background-color: #f4f4f4;
-  border-radius: 8px;
-  width: 100%;
   position: relative;
   overflow: hidden;
+  margin-bottom: var(--fds-spacing-6);
+  padding: var(--fds-spacing-7);
+  width: 100%;
+  border-radius: var(--fds-border_radius-large);
+  background-color: var(--fds-semantic-background-subtle);
 }
 
 .header::after {
+  content: '';
   position: absolute;
   right: -0;
   bottom: -200px;
   transform: rotate(25deg);
-  content: '';
+  opacity: 0.2;
   height: 250px;
   width: 250px;
-  border-radius: 8px;
-  border: 8px solid #1e98f5;
-  opacity: 0.15;
+  border-radius: var(--fds-border_radius-large);
+  border: 8px solid var(--fds-brand-alt3-600);
 }
 
-.date {
-  margin-top: 12px;
-  font-size: 16px;
+.title {
+  margin-bottom: 0;
+  font: var(--fds-typography-heading-xlarge);
 }
 
-.content {
-  position: relative;
-  display: flex;
-  width: 100%;
+.date {
+  margin-top: var(--fds-spacing-3);
 }
 
-.content aside {
-  position: sticky;
-  top: 0;
-  height: 400px;
+.content {
+  padding: var(--fds-spacing-4) var(--fds-spacing-7) 0 var(--fds-spacing-7);
 }
 
 @media (max-width: 576px) {
diff --git a/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
index ee12a22891..605a9c6817 100644
--- a/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
+++ b/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -5,15 +5,14 @@ import { Container, SidebarMenu, MdxContent } from '../../components';
 
 import classes from './MenuPageLayout.module.css';
 
-interface PageLayoutProps {
+type PageLayoutProps = {
   content: React.ReactNode;
   data: PageLayoutData;
-}
+};
 
 type PageLayoutData = {
   title: string;
   date: string;
-  showMenu: boolean;
 };
 
 const MenuPageLayout = ({ content, data }: PageLayoutProps) => {
diff --git a/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
new file mode 100644
index 0000000000..45a5f01f51
--- /dev/null
+++ b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
@@ -0,0 +1,18 @@
+.page {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--fds-spacing-8);
+  margin-top: var(--page-spacing-top);
+  margin-bottom: var(--page-spacing-bottom);
+}
+
+.left {
+  flex-basis: 220px;
+  flex-grow: 1;
+}
+
+.right {
+  flex-basis: 600px;
+  flex-grow: 500;
+}
diff --git a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.tsx b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx
similarity index 60%
rename from storefront/layouts/NavigationPageLayout/NavigationPageLayout.tsx
rename to storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx
index 92d9e5ed32..c2c0ac0d62 100644
--- a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.tsx
+++ b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx
@@ -2,23 +2,14 @@ import React from 'react';
 import { useRouter } from 'next/router';
 
 import { Container, SidebarMenu, MdxContent } from '../../components';
-import type { NavigationCardProps } from '../../components/NavigationCard/NavigationCard';
 
-import classes from './NavigationPageLayout.module.css';
+import classes from './NavMenuPageLayout.module.css';
 
-type PageItem = NavigationCardProps;
-
-type PageSection = {
-  title: string;
-  description: string;
-  items: PageItem[];
-};
-
-interface PageLandingLayoutProps {
+type NavMenuPageLayoutProps = {
   content: React.ReactNode;
-}
+};
 
-const NavigationPageLayout = ({ content }: PageLandingLayoutProps) => {
+const NavMenuPageLayout = ({ content }: NavMenuPageLayoutProps) => {
   const router = useRouter();
 
   return (
@@ -40,4 +31,4 @@ const NavigationPageLayout = ({ content }: PageLandingLayoutProps) => {
   );
 };
 
-export { NavigationPageLayout };
+export { NavMenuPageLayout };
diff --git a/storefront/layouts/NavPageLayout/NavPageLayout.module.css b/storefront/layouts/NavPageLayout/NavPageLayout.module.css
index 593b334fe1..17fe152652 100644
--- a/storefront/layouts/NavPageLayout/NavPageLayout.module.css
+++ b/storefront/layouts/NavPageLayout/NavPageLayout.module.css
@@ -1,70 +1,4 @@
-.box {
-  position: relative;
-  z-index: 2;
-  max-width: 700px;
-  padding: 82px 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.title {
-  margin-bottom: var(--spacing-3);
-  font-size: var(--font-800);
-}
-
-.desc {
-  font-size: var(--font-300);
-  line-height: 1.6em;
-  margin-bottom: 0;
-}
-
 .content {
-  margin-bottom: 56px;
-  margin-top: 48px;
-}
-
-.content > div > h2 {
-  margin-top: 48px;
-  margin-bottom: 16px;
-  font-size: 28px;
-}
-
-.content > div > p > a {
-  text-underline-offset: 5px;
-  color: #0062ba;
-}
-
-.content > div > p {
-  margin-bottom: 16px;
-  max-width: 900px;
-  line-height: 1.7em;
-  font-size: 18px;
-}
-
-.element {
-  position: absolute;
-  top: -20px;
-  right: -20px;
-  height: 550px;
-  width: 550px;
-  border: 8px solid #f45f63;
-  border-top-color: #68707c;
-  border-left-color: #e5aa20;
-  border-bottom-color: #1e98f5;
-  border-radius: 10px;
-  opacity: 0.09;
-  z-index: 1;
-  animation: rotate 150s linear infinite;
-  pointer-events: none;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(45deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+  margin-bottom: var(--fds-spacing-12);
+  margin-top: var(--fds-spacing-12);
 }
diff --git a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css b/storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css
deleted file mode 100644
index 571c5f3b43..0000000000
--- a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.page {
-  margin-top: var(--page-spacing-top);
-  margin-bottom: var(--page-spacing-bottom);
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--spacing-5);
-}
-
-.left {
-  flex-basis: 220px;
-  flex-grow: 1;
-}
-
-.right {
-  flex-basis: 600px;
-  flex-grow: 500;
-}
-
-.content h1 {
-  font-size: var(--font-800);
-  margin-bottom: var(--spacing-3);
-}
-
-.content h2 {
-  margin-top: var(--spacing-6);
-}
-
-.content p {
-  margin-top: 16px;
-  margin-bottom: 24px;
-  font-size: var(--font-300);
-  line-height: 1.5em;
-}
-
-.content > h1 + p {
-  font-size: var(--font-400);
-  line-height: 1.6em;
-}
-
-.list {
-  margin-bottom: 32px;
-  color: #4d4d4d;
-}
-
-.list ul {
-  margin: 0;
-  padding: 0;
-}
-
-.list h3 {
-  font-size: 19px;
-  margin-bottom: 10px;
-}
-
-.list li {
-  list-style: none;
-}
-
-.list li a {
-  text-decoration: none;
-  color: inherit;
-  font-size: 15px;
-  display: block;
-  margin-bottom: 10px;
-}
diff --git a/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css b/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css
index d2ebfa7f7c..db703698a0 100644
--- a/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css
+++ b/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css
@@ -1,44 +1,35 @@
 .content {
   height: 100%;
+  padding: var(--fds-spacing-14) 0;
 }
 
 .container {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto;
   flex-wrap: wrap;
-  gap: var(--spacing-7);
-  margin-top: var(--spacing-8);
+  gap: var(--fds-spacing-14);
+  margin: 0 auto;
 }
 
 .imgContainer {
   flex-basis: 290px;
 }
 
-.textContainer {
-  flex-basis: 380px;
+.img {
+  max-width: 100%;
+  display: block;
 }
 
-.imgContainer img {
-  max-width: 100%;
+.textContainer {
+  flex-basis: 380px;
 }
 
 .title {
-  font-size: var(--font-700);
-  margin-bottom: var(--spacing-3);
+  font: var(--fds-typography-heading-large);
+  margin-bottom: var(--fds-spacing-4);
 }
 
 .desc {
-  font-size: var(--font-300);
-  line-height: 1.6em;
-}
-
-.link {
-  text-underline-offset: 5px;
-  font-size: var(--font-300);
-}
-
-.link:hover {
-  text-decoration-thickness: 2px;
+  font: var(--fds-typography-paragraph-medium);
 }
diff --git a/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx b/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx
index 5628d5e278..e77686f350 100644
--- a/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx
+++ b/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import Link from 'next/link';
+import NextLink from 'next/link';
+import { Link } from '@digdir/design-system-react';
+import Image from 'next/image';
 
 import { Container } from '../../components/Container/Container';
 
@@ -18,17 +20,19 @@ const NotFoundLayout = ({ content, data }: NotFoundLayoutProps) => {
     <div className={classes.content}>
       <Container className={classes.container}>
         <div className={classes.imgContainer}>
-          <img
+          <Image
+            className={classes.img}
             src='/img/man-binoculars.svg'
             alt='Mann med kikkert'
+            height={205}
+            width={290}
           />
         </div>
         <div className={classes.textContainer}>
-          <h1 className={classes.title}>
-            {data.title} <span></span>
-          </h1>
+          <h1 className={classes.title}>{data.title}</h1>
           <p className={classes.desc}>{data.description}</p>
           <Link
+            as={NextLink}
             className={classes.link}
             href='/'
             prefetch={false}
@@ -36,6 +40,7 @@ const NotFoundLayout = ({ content, data }: NotFoundLayoutProps) => {
             Gå til forsiden
           </Link>
         </div>
+        {content}
       </Container>
       ;
     </div>
diff --git a/storefront/layouts/PageLayout/PageLayout.module.css b/storefront/layouts/PageLayout/PageLayout.module.css
index fdbdcaa5be..f08b31f281 100644
--- a/storefront/layouts/PageLayout/PageLayout.module.css
+++ b/storefront/layouts/PageLayout/PageLayout.module.css
@@ -1,60 +1,48 @@
 .container {
   margin-top: var(--page-spacing-top);
   margin-bottom: var(--page-spacing-bottom);
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--spacing-5);
 }
 
 .header {
-  background-color: #c2e4fe;
-  padding-top: 32px;
+  background-color: var(--fds-brand-alt3-300);
+  padding-top: var(--fds-spacing-7);
 }
 
 .headerContent {
   max-width: 780px;
   margin: 0 auto;
-  padding-bottom: 72px;
+  padding-bottom: var(--fds-spacing-18);
 }
 
 .title {
-  font-size: 36px;
   margin-bottom: 0;
-  line-height: 1.3em;
   text-align: center;
+  font: var(--fds-typography-heading-xlarge);
 }
 
-.back {
-  margin-bottom: 40px;
-  display: flex;
-  align-items: center;
+.backBtn {
+  margin-bottom: var(--fds-spacing-10);
   color: inherit;
-  text-underline-offset: 5px;
 }
 
-.back:hover {
-  text-decoration-thickness: 2px;
+.backBtn:visited {
+  color: inherit !important;
 }
 
-.back svg {
-  margin-right: 8px;
-}
-
-.date {
-  font-size: 18px;
-  text-align: center;
+.backBtn svg {
+  margin-right: var(--fds-spacing-2);
 }
 
 .separator {
-  margin: 0 8px;
+  margin: 0 var(--fds-spacing-2);
 }
 
 .meta {
   display: flex;
   text-align: center;
   justify-content: center;
-  margin-bottom: 14px;
+  margin-bottom: var(--fds-spacing-3);
+  font: var(--fds-typography-paragraph-short-large);
 }
 
 .content {
diff --git a/storefront/layouts/PageLayout/PageLayout.tsx b/storefront/layouts/PageLayout/PageLayout.tsx
index 826b514e38..72b64ee199 100644
--- a/storefront/layouts/PageLayout/PageLayout.tsx
+++ b/storefront/layouts/PageLayout/PageLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import Link from 'next/link';
+import NextLink from 'next/link';
+import { Link } from '@digdir/design-system-react';
 import { ArrowLeftIcon } from '@navikt/aksel-icons';
 
 import { Container, MdxContent } from '../../components';
@@ -26,11 +27,12 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
       className={classes.page}
     >
       <div className={classes.header}>
-        <Container className={classes.headerContainer}>
+        <Container>
           <div className={classes.headerContent}>
             <Link
+              as={NextLink}
               href={'/' + data.backUrl}
-              className={classes.back}
+              className={classes.backBtn}
               prefetch={false}
             >
               <ArrowLeftIcon
diff --git a/storefront/layouts/index.tsx b/storefront/layouts/index.tsx
index 1028cc550c..36d20c39e0 100644
--- a/storefront/layouts/index.tsx
+++ b/storefront/layouts/index.tsx
@@ -1,6 +1,6 @@
+export * from './FrontpageLayout/FrontpageLayout';
 export * from './PageLayout/PageLayout';
 export * from './MenuPageLayout/MenuPageLayout';
 export * from './NavPageLayout/NavPageLayout';
-export * from './FrontpageLayout/FrontpageLayout';
-export * from './NavigationPageLayout/NavigationPageLayout';
+export * from './NavMenuPageLayout/NavMenuPageLayout';
 export * from './NotFoundLayout/NotFoundLayout';
diff --git a/storefront/package.json b/storefront/package.json
index ab0a14b54b..e33455366f 100644
--- a/storefront/package.json
+++ b/storefront/package.json
@@ -11,40 +11,25 @@
   "dependencies": {
     "@altinn/altinn-design-system": "^0.27.2",
     "@altinn/figma-design-tokens": "^5.0.0",
-    "@jsdevtools/rehype-toc": "^3.0.2",
     "@mdx-js/loader": "^2.0.0-rc.2",
     "@mdx-js/react": "^1.6.22",
     "@navikt/aksel-icons": "^2.8.4",
     "@navikt/ds-css": "^5.0.2",
     "@navikt/ds-react": "^5.0.2",
-    "@reach/disclosure": "^0.18.0",
     "@tanstack/react-query": "^4.29.5",
     "@tippyjs/react": "^4.2.6",
-    "@types/node": "18.11.17",
-    "@types/prettier": "^2.7.2",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
     "@types/react-syntax-highlighter": "^15.5.6",
     "@vercel/analytics": "^1.0.2",
-    "classnames": "^2.3.2",
-    "directory-tree": "^3.5.1",
-    "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
     "mdx-embed": "^1.1.2",
-    "moment": "^2.29.4",
     "next": "13.4.7",
     "normalize.css": "^8.0.1",
-    "prettier": "^2.8.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-element-to-jsx-string": "^15.0.0",
-    "react-number-format": "^5.1.3",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-highlight": "^6.0.0",
     "rehype-slug": "^5.1.0",
     "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "typescript": "4.9.4"
+    "remark-gfm": "^3.0.1"
   }
 }
diff --git a/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx b/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx
index d5bd92241f..918e7b4cea 100644
--- a/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx
+++ b/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx
@@ -24,8 +24,8 @@ Brønnøysundregistrene har med hjelp fra Blindeforbundet, undersøkt hvordan me
 <ResponsiveIframe
   src='https://player.vimeo.com/video/713674977?h=31aae91dc0'
   title='Video from Brregs vimeo accounting showing people with reduced vision use digital products'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
diff --git a/storefront/pages/grunnleggende/for-designere/kom-i-gang.mdx b/storefront/pages/grunnleggende/for-designere/kom-i-gang.mdx
index 97b9e61f9c..6e0910800b 100644
--- a/storefront/pages/grunnleggende/for-designere/kom-i-gang.mdx
+++ b/storefront/pages/grunnleggende/for-designere/kom-i-gang.mdx
@@ -48,9 +48,9 @@ Alle komponenter kommer med ulike varianter og egenskaper. I Button-komponenten
 <ResponsiveIframe
   src='/img/button-variant-properties.mp4'
   title='Skjermopptak av Figma som viser hvordan bytte mellom ulike varianter av en knapp.'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
@@ -65,9 +65,9 @@ Alle tokens er i sync med [Figma variabler](https://docs.tokens.studio/variables
 <ResponsiveIframe
   src='/img/brand-variables.mp4'
   title='Skjermopptak av Figma som viser hvordan man kan bytte mellom ulike brands i Figma'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
@@ -78,9 +78,9 @@ For admingrensesnitt eller ekspertverktøy kan compact-mode benyttes. Tekststør
 <ResponsiveIframe
   src='/img/density2.mp4'
   title='Skjermopptak av Figma som viser hvordan man kan bytte mellom normal og kompakt i Figma'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
@@ -93,9 +93,9 @@ Les mer om [typografi](/grunnleggende/designelementer/typografi).
 <ResponsiveIframe
   src='/img/fluid-text-size.mp4'
   title='Skjermopptak av Figma som viser hvordan størrelse og avstand på tekst blir mindre i en mindre viewport'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
diff --git a/storefront/pages/grunnleggende/index.mdx b/storefront/pages/grunnleggende/index.mdx
index 9bf73e479a..9b2351a01f 100644
--- a/storefront/pages/grunnleggende/index.mdx
+++ b/storefront/pages/grunnleggende/index.mdx
@@ -1,5 +1,5 @@
 import { Meta, NavigationCard, Grid } from '@components';
-import { NavigationPageLayout } from '@layouts';
+import { NavMenuPageLayout } from '@layouts';
 import {
   ImageIcon,
   TokenIcon,
@@ -13,9 +13,7 @@ import {
   LightBulbIcon,
   TerminalIcon,
 } from '@navikt/aksel-icons';
-export default ({ children, menu }) => (
-  <NavigationPageLayout content={children} />
-);
+export default ({ children, menu }) => <NavMenuPageLayout content={children} />;
 
 <Meta
   title='Grunnleggende'
diff --git a/storefront/pages/grunnleggende/introduksjon/slack.mdx b/storefront/pages/grunnleggende/introduksjon/slack.mdx
index 4428acc60a..063d74761b 100644
--- a/storefront/pages/grunnleggende/introduksjon/slack.mdx
+++ b/storefront/pages/grunnleggende/introduksjon/slack.mdx
@@ -22,4 +22,4 @@ Vi trenger et sted å diskutere alt som har med designsystemer å gjøre! Et ste
 
 For å gjøre det enklest mulig å få tilgang er det opprettet en egen Slack til formålet.
 
-[Bli med i Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-22v5yui1f-XlDpD9FKhWT7dyUy6NVCHA)
+[Bli med i Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ)
diff --git a/storefront/pages/index.mdx b/storefront/pages/index.mdx
index f6c43b8740..d55683364b 100644
--- a/storefront/pages/index.mdx
+++ b/storefront/pages/index.mdx
@@ -1,4 +1,10 @@
-import { Meta } from '@components';
+import {
+  Meta,
+  Banner,
+  Section,
+  NavigationCard,
+  ImageSection,
+} from '@components';
 import { FrontpageLayout } from '@layouts';
 import {
   ImageIcon,
@@ -8,76 +14,72 @@ import {
   BranchingIcon,
 } from '@navikt/aksel-icons';
 
+export default ({ children }) => <FrontpageLayout content={children} />;
+
 <Meta
   title='Velkommen'
   description='Velkommen til Felles designsystem. Her vil du finne grunnleggende designelementer og komponenter du kan bruke når du utvikler tjenester'
 />
 
-export default ({ children }) => (
-  <FrontpageLayout
-    Content={children}
-    data={{
-      title: 'Felles Designsystem',
-      description:
-        'Felles designsystem består av grunnleggende designelementer, komponenter og mønstre du kan bruke når du utvikler tjenester. Vi håper dette kan bli en felles verktøykasse der vi samarbeider på tvers om å lage det beste grunnlaget for offentlige tjenester.',
-      navigationCards: {
-        title: 'Kom i gang',
-        items: [
-          {
-            title: 'For designere',
-            description:
-              'Lær hvordan du kommer i gang med designsystemet som designer.',
-            color: 'blue',
-            url: '/grunnleggende/for-designere/kom-i-gang',
-            icon: <ImageIcon fontSize={34} />,
-          },
-          {
-            title: 'For utviklere',
-            description:
-              'Lær hvordan du kommer i gang med designsystemet som utvikler.',
-            color: 'yellow',
-            url: '/grunnleggende/for-utviklere/kom-i-gang',
-            icon: <WrenchIcon fontSize={36} />,
-          },
-          {
-            title: 'Komponenter',
-            description:
-              'Se oversikten over UI-komponentene som er laget i react.',
-            color: 'red',
-            url: 'https://digdir.github.io/designsystem',
-            icon: <ComponentIcon fontSize={34} />,
-          },
-        ],
-      },
-      contributeSection: {
-        title: 'Bli med på samarbeidet?',
-        description:
-          'Et samarbeid om designsystem kan bidra til mer helhetlige brukeropplevelser på tvers av offentlig sektor og samtidig spare oss for å gjøre de samme oppgavene flere ganger. Vi ønsker at dette skal bli et felles hjem for gjenbrukbare komponenter, god praksis, interaksjonsmønstre, brukerdialog, innsikt og mer. Vil du høre mer om dette, eller bli med på samarbeidet?',
-        imgSrc: '/img/people-holding-figures.svg',
-        imgWidth: 1195,
-        imgHeight: 270,
-        headingLevel: 'h2',
-        imgAlt: 'Bilde av 2 personer som går bortover med byggeklosser under armene',
-        buttons: [
-            {
-              text: 'Ta kontakt',
-              href: 'mailto:designsystem@digdir.no',
-              prefix: <EnvelopeClosedIcon fontSize={24} />,
-            },
-            {
-              text: 'Bli med i Slack-kanalen',
-              href: 'https://join.slack.com/t/designsystemet/shared_invite/zt-22v5yui1f-XlDpD9FKhWT7dyUy6NVCHA',
-              prefix: (<img src='img/slack-logo.png' alt='' />
-              ),
-            },
-            {
-              text: 'Github',
-              href: 'https://github.com/digdir/designsystem',
-              prefix: <BranchingIcon fontSize={24} />,
-            },
-          ]
-      },
-    }}
+<Banner
+  title='Felles Designsystem'
+  desc='Felles designsystem består av grunnleggende designelementer, komponenter og mønstre du kan bruke når du utvikler tjenester. Vi håper dette kan bli en felles verktøykasse der vi samarbeider på tvers om å lage det beste grunnlaget for offentlige tjenester.'
+></Banner>
+
+<Section title='Kom i gang'>
+  <NavigationCard
+    title='For designere'
+    description='Lær hvordan du kommer i gang med designsystemet som designer.'
+    color='blue'
+    url='/grunnleggende/for-designere/kom-i-gang'
+    icon={<ImageIcon fontSize={34} />}
+  ></NavigationCard>
+
+<NavigationCard
+  title='For utviklere'
+  description='Lær hvordan du kommer i gang med designsystemet som utvikler.'
+  color='yellow'
+  url='/grunnleggende/for-utviklere/kom-i-gang'
+  icon={<WrenchIcon fontSize={36} />}
+></NavigationCard>
+
+  <NavigationCard
+    title='Komponenter'
+    description='Se oversikten over UI-komponentene som er laget i react.'
+    color='red'
+    url='https://digdir.github.io/designsystem'
+    icon={<ComponentIcon fontSize={34} />}
+  ></NavigationCard>
+</Section>
 
+<ImageSection
+  title='Bli med på samarbeidet?'
+  description='Et samarbeid om designsystem kan bidra til mer helhetlige brukeropplevelser på tvers av offentlig sektor og samtidig spare oss for å gjøre de samme oppgavene flere ganger. Vi ønsker at dette skal bli et felles hjem for gjenbrukbare komponenter, god praksis, interaksjonsmønstre, brukerdialog, innsikt og mer. Vil du høre mer om dette, eller bli med på samarbeidet?'
+  imgSrc='/img/people-holding-figures.svg'
+  imgAlt='Bilde av 2 personer som går bortover med byggeklosser under armene'
+  headingLevel='h2'
+  imgWidth={1195}
+  imgHeight={270}
+  buttons={[
+    {
+      text: 'Ta kontakt',
+      href: 'mailto:designsystem@digdir.no',
+      prefix: <EnvelopeClosedIcon fontSize={24} />,
+    },
+    {
+      text: 'Bli med i Slack-kanalen',
+      href: 'https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ',
+      prefix: (
+        <img
+          src='img/slack-logo.png'
+          alt=''
+        />
+      ),
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/digdir/designsystem',
+      prefix: <BranchingIcon fontSize={24} />,
+    },
+  ]}
 />
-);
diff --git a/storefront/pages/monstre/index.mdx b/storefront/pages/monstre/index.mdx
index f5eb5f8127..116d516c92 100644
--- a/storefront/pages/monstre/index.mdx
+++ b/storefront/pages/monstre/index.mdx
@@ -1,9 +1,7 @@
 import { Meta, NavigationCard, Grid } from '@components';
-import { NavigationPageLayout } from '@layouts';
+import { NavMenuPageLayout } from '@layouts';
 import { ImageIcon } from '@navikt/aksel-icons';
-export default ({ children, menu }) => (
-  <NavigationPageLayout content={children} />
-);
+export default ({ children, menu }) => <NavMenuPageLayout content={children} />;
 
 <Meta
   title='Mønstre'
diff --git a/storefront/tokens/altinn.ts b/storefront/tokens/altinn.ts
index c95d2d85d1..9517461249 100644
--- a/storefront/tokens/altinn.ts
+++ b/storefront/tokens/altinn.ts
@@ -243,214 +243,214 @@ export const color = [
   {
     value: '#e6eff8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle',
+    name: '--fds-semantic-surface-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle'],
   },
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle-hover',
+    name: '--fds-semantic-surface-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle-hover'],
   },
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-default',
+    name: '--fds-semantic-surface-action-first-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'default'],
+    path: ['semantic', 'surface', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-hover',
+    name: '--fds-semantic-surface-action-first-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
     description: 'Standard farge for handlinger',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-primary-active',
+    name: '--fds-semantic-surface-action-first-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'active'],
+    path: ['semantic', 'surface', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill',
+    name: '--fds-semantic-surface-action-first-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill'],
   },
   {
     value: '#e6eff8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-hover',
+    name: '--fds-semantic-surface-action-first-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-hover'],
   },
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-active',
+    name: '--fds-semantic-surface-action-first-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-active'],
   },
   {
     value: '#f4f5f6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.grey.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle',
+    name: '--fds-semantic-surface-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle-hover',
+    name: '--fds-semantic-surface-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-default',
+    name: '--fds-semantic-surface-action-second-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'default'],
+    path: ['semantic', 'surface', 'action', 'second', 'default'],
   },
   {
     value: 'rgba(0, 49, 93, 0.9)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.9)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-hover',
+    name: '--fds-semantic-surface-action-second-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.8)',
     type: 'color',
     description: 'Standard farge for handlinger',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.8)',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-secondary-active',
+    name: '--fds-semantic-surface-action-second-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'active'],
+    path: ['semantic', 'surface', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill',
+    name: '--fds-semantic-surface-action-second-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill'],
   },
   {
     value: 'rgba(0, 49, 93, 0.1)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.1)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-hover',
+    name: '--fds-semantic-surface-action-second-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.2)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.2)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-active',
+    name: '--fds-semantic-surface-action-second-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-active'],
   },
   {
     value: '#d1f4e1',
@@ -809,12 +809,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.200}',
+      value: '{brand.alt1.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light',
+    name: '--fds-semantic-surface-first-light',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light'],
+    path: ['semantic', 'surface', 'first', 'light'],
   },
   {
     value: '#80B1DD',
@@ -822,12 +822,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.300}',
+      value: '{brand.alt1.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-hover',
+    name: '--fds-semantic-surface-first-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-hover'],
+    path: ['semantic', 'surface', 'first', 'light-hover'],
   },
   {
     value: '#66A1D6',
@@ -835,12 +835,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.400}',
+      value: '{brand.alt1.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-active',
+    name: '--fds-semantic-surface-first-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-active'],
+    path: ['semantic', 'surface', 'first', 'light-active'],
   },
   {
     value: '#004E95',
@@ -848,12 +848,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-dark',
+    name: '--fds-semantic-surface-first-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'dark'],
+    path: ['semantic', 'surface', 'first', 'dark'],
   },
   {
     value: '#C5BBDD',
@@ -861,12 +861,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.200}',
+      value: '{brand.alt2.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light',
+    name: '--fds-semantic-surface-second-light',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light'],
+    path: ['semantic', 'surface', 'second', 'light'],
   },
   {
     value: '#A392C8',
@@ -874,12 +874,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.300}',
+      value: '{brand.alt2.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-hover',
+    name: '--fds-semantic-surface-second-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-hover'],
+    path: ['semantic', 'surface', 'second', 'light-hover'],
   },
   {
     value: '#806AB4',
@@ -887,12 +887,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.400}',
+      value: '{brand.alt2.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-active',
+    name: '--fds-semantic-surface-second-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-active'],
+    path: ['semantic', 'surface', 'second', 'light-active'],
   },
   {
     value: '#231B36',
@@ -900,12 +900,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.900}',
+      value: '{brand.alt2.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-dark',
+    name: '--fds-semantic-surface-second-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'dark'],
+    path: ['semantic', 'surface', 'second', 'dark'],
   },
   {
     value: '#F3ABB6',
@@ -913,12 +913,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.200}',
+      value: '{brand.alt3.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light',
+    name: '--fds-semantic-surface-third-light',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light'],
+    path: ['semantic', 'surface', 'third', 'light'],
   },
   {
     value: '#EC8292',
@@ -926,12 +926,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.300}',
+      value: '{brand.alt3.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-hover',
+    name: '--fds-semantic-surface-third-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-hover'],
+    path: ['semantic', 'surface', 'third', 'light-hover'],
   },
   {
     value: '#E6586D',
@@ -939,12 +939,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.400}',
+      value: '{brand.alt3.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-active',
+    name: '--fds-semantic-surface-third-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-active'],
+    path: ['semantic', 'surface', 'third', 'light-active'],
   },
   {
     value: '#5A121D',
@@ -952,12 +952,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{brand.alt3.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-dark',
+    name: '--fds-semantic-surface-third-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'dark'],
+    path: ['semantic', 'surface', 'third', 'dark'],
   },
   {
     value: '#004e95',
@@ -1064,134 +1064,134 @@ export const color = [
     path: ['semantic', 'border', 'action', 'dark-hover'],
   },
   {
-    value: '#b3d0ea',
+    value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{colors.blue.200}',
+      value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle',
+    name: '--fds-semantic-border-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle'],
   },
   {
-    value: '#66a1d6',
+    value: '#d2d5d8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{colors.blue.400}',
+      value: '{colors.grey.300}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle-hover',
+    name: '--fds-semantic-border-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle-hover'],
   },
   {
-    value: '#0062ba',
+    value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{colors.blue.700}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-default',
+    name: '--fds-semantic-border-action-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'default'],
+    path: ['semantic', 'border', 'action', 'first', 'default'],
   },
   {
-    value: '#004e95',
+    value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{colors.blue.800}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-hover',
+    name: '--fds-semantic-border-action-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'hover'],
+    path: ['semantic', 'border', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-active',
+    name: '--fds-semantic-border-action-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'active'],
+    path: ['semantic', 'border', 'action', 'first', 'active'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle',
+    name: '--fds-semantic-border-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle'],
   },
   {
     value: '#d2d5d8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.grey.300}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle-hover',
+    name: '--fds-semantic-border-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-default',
+    name: '--fds-semantic-border-action-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'default'],
+    path: ['semantic', 'border', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-hover',
+    name: '--fds-semantic-border-action-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-active',
+    name: '--fds-semantic-border-action-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'active'],
+    path: ['semantic', 'border', 'action', 'second', 'active'],
   },
   {
     value: '#68707c',
@@ -1433,12 +1433,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.600}',
+      value: '{brand.alt1.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-default',
+    name: '--fds-semantic-border-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'default'],
+    path: ['semantic', 'border', 'first', 'default'],
   },
   {
     value: '#0062BA',
@@ -1446,12 +1446,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.700}',
+      value: '{brand.alt1.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-hover',
+    name: '--fds-semantic-border-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'hover'],
+    path: ['semantic', 'border', 'first', 'hover'],
   },
   {
     value: '#004E95',
@@ -1459,12 +1459,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-active',
+    name: '--fds-semantic-border-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'active'],
+    path: ['semantic', 'border', 'first', 'active'],
   },
   {
     value: '#594488',
@@ -1472,12 +1472,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.600}',
+      value: '{brand.alt2.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-default',
+    name: '--fds-semantic-border-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'default'],
+    path: ['semantic', 'border', 'second', 'default'],
   },
   {
     value: '#3F3161',
@@ -1485,12 +1485,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.700}',
+      value: '{brand.alt2.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-hover',
+    name: '--fds-semantic-border-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'second', 'hover'],
   },
   {
     value: '#352951',
@@ -1498,12 +1498,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.800}',
+      value: '{brand.alt2.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-active',
+    name: '--fds-semantic-border-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'active'],
+    path: ['semantic', 'border', 'second', 'active'],
   },
   {
     value: '#B3253A',
@@ -1511,12 +1511,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.600}',
+      value: '{brand.alt3.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-default',
+    name: '--fds-semantic-border-third-default',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'default'],
+    path: ['semantic', 'border', 'third', 'default'],
   },
   {
     value: '#861C2C',
@@ -1524,12 +1524,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.700}',
+      value: '{brand.alt3.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-hover',
+    name: '--fds-semantic-border-third-hover',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'hover'],
+    path: ['semantic', 'border', 'third', 'hover'],
   },
   {
     value: '#5A121D',
@@ -1537,12 +1537,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{brand.alt3.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-active',
+    name: '--fds-semantic-border-third-active',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'active'],
+    path: ['semantic', 'border', 'third', 'active'],
   },
   {
     value: '#0c6536',
@@ -1703,106 +1703,106 @@ export const color = [
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-default',
+    name: '--fds-semantic-text-action-first-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'default'],
+    path: ['semantic', 'text', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '#004e95',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-hover',
+    name: '--fds-semantic-text-action-first-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'hover'],
+    path: ['semantic', 'text', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '#00315d',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-active',
+    name: '--fds-semantic-text-action-first-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'active'],
+    path: ['semantic', 'text', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-on_action',
+    name: '--fds-semantic-text-action-first-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'first', 'on_action'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-default',
+    name: '--fds-semantic-text-action-second-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'default'],
+    path: ['semantic', 'text', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-hover',
+    name: '--fds-semantic-text-action-second-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'text', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-active',
+    name: '--fds-semantic-text-action-second-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'active'],
+    path: ['semantic', 'text', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Altinn.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-on_action',
+    name: '--fds-semantic-text-action-second-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'second', 'on_action'],
   },
   {
     value: '#995404',
@@ -1932,9 +1932,9 @@ export const color = [
       type: 'color',
       description: 'AAA 12.8 on grey 800\nAA 6.4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-100',
+    name: '--fds-brand-alt1-100',
     attributes: {},
-    path: ['brand', 'primary', '100'],
+    path: ['brand', 'alt1', '100'],
   },
   {
     value: '#B3D0EA',
@@ -1949,9 +1949,9 @@ export const color = [
       description:
         'Light error color\nAAA 11.4 on grey 800\nAA 5.7 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-200',
+    name: '--fds-brand-alt1-200',
     attributes: {},
-    path: ['brand', 'primary', '200'],
+    path: ['brand', 'alt1', '200'],
   },
   {
     value: '#80B1DD',
@@ -1964,9 +1964,9 @@ export const color = [
       type: 'color',
       description: 'AAA 9 on grey 800\nAA 4.5 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-300',
+    name: '--fds-brand-alt1-300',
     attributes: {},
-    path: ['brand', 'primary', '300'],
+    path: ['brand', 'alt1', '300'],
   },
   {
     value: '#66A1D6',
@@ -1979,9 +1979,9 @@ export const color = [
       type: 'color',
       description: 'AAA 7.1 on grey 800\nAA18 3.5 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-400',
+    name: '--fds-brand-alt1-400',
     attributes: {},
-    path: ['brand', 'primary', '400'],
+    path: ['brand', 'alt1', '400'],
   },
   {
     value: '#3381C8',
@@ -1994,9 +1994,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.6 on grey 800',
     },
-    name: '--fds-brand-primary-500',
+    name: '--fds-brand-alt1-500',
     attributes: {},
-    path: ['brand', 'primary', '500'],
+    path: ['brand', 'alt1', '500'],
   },
   {
     value: '#1A72C1',
@@ -2009,9 +2009,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.5 on grey 800',
     },
-    name: '--fds-brand-primary-600',
+    name: '--fds-brand-alt1-600',
     attributes: {},
-    path: ['brand', 'primary', '600'],
+    path: ['brand', 'alt1', '600'],
   },
   {
     value: '#0062BA',
@@ -2024,9 +2024,9 @@ export const color = [
       type: 'color',
       description: 'AA18 3.7 on grey 800',
     },
-    name: '--fds-brand-primary-700',
+    name: '--fds-brand-alt1-700',
     attributes: {},
-    path: ['brand', 'primary', '700'],
+    path: ['brand', 'alt1', '700'],
   },
   {
     value: '#004E95',
@@ -2039,9 +2039,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.7 on white',
     },
-    name: '--fds-brand-primary-800',
+    name: '--fds-brand-alt1-800',
     attributes: {},
-    path: ['brand', 'primary', '800'],
+    path: ['brand', 'alt1', '800'],
   },
   {
     value: '#00315D',
@@ -2054,9 +2054,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.7 on white',
     },
-    name: '--fds-brand-primary-900',
+    name: '--fds-brand-alt1-900',
     attributes: {},
-    path: ['brand', 'primary', '900'],
+    path: ['brand', 'alt1', '900'],
   },
   {
     value: '#DCD6EA',
@@ -2069,9 +2069,9 @@ export const color = [
       type: 'color',
       description: 'AAA 13.3 on grey 800\nAA 6.7 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-100',
+    name: '--fds-brand-alt2-100',
     attributes: {},
-    path: ['brand', 'secondary', '100'],
+    path: ['brand', 'alt2', '100'],
   },
   {
     value: '#C5BBDD',
@@ -2086,9 +2086,9 @@ export const color = [
       description:
         'Light warning color\nAAA 12.3 on grey 800\nAA 1.1 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-200',
+    name: '--fds-brand-alt2-200',
     attributes: {},
-    path: ['brand', 'secondary', '200'],
+    path: ['brand', 'alt2', '200'],
   },
   {
     value: '#A392C8',
@@ -2101,9 +2101,9 @@ export const color = [
       type: 'color',
       description: 'AAA 10 on grey 800\nAA 5.4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-300',
+    name: '--fds-brand-alt2-300',
     attributes: {},
-    path: ['brand', 'secondary', '300'],
+    path: ['brand', 'alt2', '300'],
   },
   {
     value: '#806AB4',
@@ -2116,9 +2116,9 @@ export const color = [
       type: 'color',
       description: 'AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-400',
+    name: '--fds-brand-alt2-400',
     attributes: {},
-    path: ['brand', 'secondary', '400'],
+    path: ['brand', 'alt2', '400'],
   },
   {
     value: '#6A52A3',
@@ -2131,9 +2131,9 @@ export const color = [
       type: 'color',
       description: 'AAA 7.9 on grey 800\nAA18 4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-500',
+    name: '--fds-brand-alt2-500',
     attributes: {},
-    path: ['brand', 'secondary', '500'],
+    path: ['brand', 'alt2', '500'],
   },
   {
     value: '#594488',
@@ -2146,9 +2146,9 @@ export const color = [
       type: 'color',
       description: 'AA 6.8 on grey 800\nAA18 3.4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-600',
+    name: '--fds-brand-alt2-600',
     attributes: {},
-    path: ['brand', 'secondary', '600'],
+    path: ['brand', 'alt2', '600'],
   },
   {
     value: '#3F3161',
@@ -2161,9 +2161,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.5 on grey 800',
     },
-    name: '--fds-brand-secondary-700',
+    name: '--fds-brand-alt2-700',
     attributes: {},
-    path: ['brand', 'secondary', '700'],
+    path: ['brand', 'alt2', '700'],
   },
   {
     value: '#352951',
@@ -2176,9 +2176,9 @@ export const color = [
       type: 'color',
       description: 'AA18 4.4 on grey 800\nAA18 3.2 on white',
     },
-    name: '--fds-brand-secondary-800',
+    name: '--fds-brand-alt2-800',
     attributes: {},
-    path: ['brand', 'secondary', '800'],
+    path: ['brand', 'alt2', '800'],
   },
   {
     value: '#231B36',
@@ -2191,9 +2191,9 @@ export const color = [
       type: 'color',
       description: 'AA18 4.4 on grey 800\nAA18 3.2 on white',
     },
-    name: '--fds-brand-secondary-900',
+    name: '--fds-brand-alt2-900',
     attributes: {},
-    path: ['brand', 'secondary', '900'],
+    path: ['brand', 'alt2', '900'],
   },
   {
     value: '#F9D5DB',
@@ -2206,9 +2206,9 @@ export const color = [
       type: 'color',
       description: 'AAA 12.9 on grey 800\nAA 6.5 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-100',
+    name: '--fds-brand-alt3-100',
     attributes: {},
-    path: ['brand', 'tertiary', '100'],
+    path: ['brand', 'alt3', '100'],
   },
   {
     value: '#F3ABB6',
@@ -2223,9 +2223,9 @@ export const color = [
       description:
         'Light information color \nAAA 11.5 on grey 800\nAA 5.8 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-200',
+    name: '--fds-brand-alt3-200',
     attributes: {},
-    path: ['brand', 'tertiary', '200'],
+    path: ['brand', 'alt3', '200'],
   },
   {
     value: '#EC8292',
@@ -2238,9 +2238,9 @@ export const color = [
       type: 'color',
       description: 'AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-300',
+    name: '--fds-brand-alt3-300',
     attributes: {},
-    path: ['brand', 'tertiary', '300'],
+    path: ['brand', 'alt3', '300'],
   },
   {
     value: '#E6586D',
@@ -2253,9 +2253,9 @@ export const color = [
       type: 'color',
       description: 'AAA 7.3 on grey 800\nAA18 3.7 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-400',
+    name: '--fds-brand-alt3-400',
     attributes: {},
-    path: ['brand', 'tertiary', '400'],
+    path: ['brand', 'alt3', '400'],
   },
   {
     value: '#E02E49',
@@ -2268,9 +2268,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.8 on grey 800',
     },
-    name: '--fds-brand-tertiary-500',
+    name: '--fds-brand-alt3-500',
     attributes: {},
-    path: ['brand', 'tertiary', '500'],
+    path: ['brand', 'alt3', '500'],
   },
   {
     value: '#B3253A',
@@ -2283,9 +2283,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.6 on grey 800',
     },
-    name: '--fds-brand-tertiary-600',
+    name: '--fds-brand-alt3-600',
     attributes: {},
-    path: ['brand', 'tertiary', '600'],
+    path: ['brand', 'alt3', '600'],
   },
   {
     value: '#861C2C',
@@ -2298,9 +2298,9 @@ export const color = [
       type: 'color',
       description: 'AA18 3.8 on grey 800',
     },
-    name: '--fds-brand-tertiary-700',
+    name: '--fds-brand-alt3-700',
     attributes: {},
-    path: ['brand', 'tertiary', '700'],
+    path: ['brand', 'alt3', '700'],
   },
   {
     value: '#5A121D',
@@ -2313,9 +2313,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.6 on white',
     },
-    name: '--fds-brand-tertiary-800',
+    name: '--fds-brand-alt3-800',
     attributes: {},
-    path: ['brand', 'tertiary', '800'],
+    path: ['brand', 'alt3', '800'],
   },
   {
     value: '#480e17',
@@ -2328,9 +2328,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.6 on white',
     },
-    name: '--fds-brand-tertiary-900',
+    name: '--fds-brand-alt3-900',
     attributes: {},
-    path: ['brand', 'tertiary', '900'],
+    path: ['brand', 'alt3', '900'],
   },
 ];
 
@@ -2784,6 +2784,29 @@ export const typography = [
     attributes: {},
     path: ['typography', 'label', 'xsmall'],
   },
+  {
+    value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'",
+    type: 'typography',
+    filePath: '../../design-tokens/Base/Semantic.json',
+    isSource: false,
+    original: {
+      value: {
+        fontFamily: '{fontFamilies.inter}',
+        fontWeight: '{fontWeights.regular}',
+        lineHeight: '{lineHeights.300}',
+        fontSize: '{font-size.f1}',
+        letterSpacing: '{letterSpacing.1}',
+        paragraphSpacing: '{paragraphSpacing.0}',
+        paragraphIndent: '{paragraphIndent.0}',
+        textCase: '{textCase.none}',
+        textDecoration: '{textDecoration.none}',
+      },
+      type: 'typography',
+    },
+    name: '--fds-typography-error_message-large',
+    attributes: {},
+    path: ['typography', 'error_message', 'large'],
+  },
   {
     value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'",
     type: 'typography',
diff --git a/storefront/tokens/brreg.ts b/storefront/tokens/brreg.ts
index 97372bc0b3..02dbf99ecc 100644
--- a/storefront/tokens/brreg.ts
+++ b/storefront/tokens/brreg.ts
@@ -243,214 +243,214 @@ export const color = [
   {
     value: '#e6eff8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle',
+    name: '--fds-semantic-surface-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle'],
   },
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle-hover',
+    name: '--fds-semantic-surface-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle-hover'],
   },
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-default',
+    name: '--fds-semantic-surface-action-first-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'default'],
+    path: ['semantic', 'surface', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-hover',
+    name: '--fds-semantic-surface-action-first-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
     description: 'Standard farge for handlinger',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-primary-active',
+    name: '--fds-semantic-surface-action-first-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'active'],
+    path: ['semantic', 'surface', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill',
+    name: '--fds-semantic-surface-action-first-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill'],
   },
   {
     value: '#e6eff8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-hover',
+    name: '--fds-semantic-surface-action-first-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-hover'],
   },
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-active',
+    name: '--fds-semantic-surface-action-first-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-active'],
   },
   {
     value: '#f4f5f6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.grey.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle',
+    name: '--fds-semantic-surface-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle-hover',
+    name: '--fds-semantic-surface-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-default',
+    name: '--fds-semantic-surface-action-second-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'default'],
+    path: ['semantic', 'surface', 'action', 'second', 'default'],
   },
   {
     value: 'rgba(0, 49, 93, 0.9)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.9)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-hover',
+    name: '--fds-semantic-surface-action-second-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.8)',
     type: 'color',
     description: 'Standard farge for handlinger',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.8)',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-secondary-active',
+    name: '--fds-semantic-surface-action-second-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'active'],
+    path: ['semantic', 'surface', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill',
+    name: '--fds-semantic-surface-action-second-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill'],
   },
   {
     value: 'rgba(0, 49, 93, 0.1)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.1)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-hover',
+    name: '--fds-semantic-surface-action-second-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.2)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.2)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-active',
+    name: '--fds-semantic-surface-action-second-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-active'],
   },
   {
     value: '#d1f4e1',
@@ -809,12 +809,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.100}',
+      value: '{brand.alt1.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light',
+    name: '--fds-semantic-surface-first-light',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light'],
+    path: ['semantic', 'surface', 'first', 'light'],
   },
   {
     value: '#76ADFB',
@@ -822,12 +822,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.300}',
+      value: '{brand.alt1.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-hover',
+    name: '--fds-semantic-surface-first-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-hover'],
+    path: ['semantic', 'surface', 'first', 'light-hover'],
   },
   {
     value: '#5391E9',
@@ -835,12 +835,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.400}',
+      value: '{brand.alt1.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-active',
+    name: '--fds-semantic-surface-first-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-active'],
+    path: ['semantic', 'surface', 'first', 'light-active'],
   },
   {
     value: '#004785',
@@ -848,12 +848,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.700}',
+      value: '{brand.alt1.700}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-dark',
+    name: '--fds-semantic-surface-first-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'dark'],
+    path: ['semantic', 'surface', 'first', 'dark'],
   },
   {
     value: '#C9E7F4',
@@ -861,12 +861,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.200}',
+      value: '{brand.alt2.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light',
+    name: '--fds-semantic-surface-second-light',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light'],
+    path: ['semantic', 'surface', 'second', 'light'],
   },
   {
     value: '#70B3D7',
@@ -874,12 +874,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.300}',
+      value: '{brand.alt2.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-hover',
+    name: '--fds-semantic-surface-second-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-hover'],
+    path: ['semantic', 'surface', 'second', 'light-hover'],
   },
   {
     value: '#4E99BD',
@@ -887,12 +887,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.400}',
+      value: '{brand.alt2.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-active',
+    name: '--fds-semantic-surface-second-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-active'],
+    path: ['semantic', 'surface', 'second', 'light-active'],
   },
   {
     value: '#1F4B63',
@@ -900,12 +900,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.700}',
+      value: '{brand.alt2.700}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-dark',
+    name: '--fds-semantic-surface-second-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'dark'],
+    path: ['semantic', 'surface', 'second', 'dark'],
   },
   {
     value: '#D7E5E7',
@@ -913,12 +913,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.100}',
+      value: '{brand.alt3.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light',
+    name: '--fds-semantic-surface-third-light',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light'],
+    path: ['semantic', 'surface', 'third', 'light'],
   },
   {
     value: '#B9CACB',
@@ -926,12 +926,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.200}',
+      value: '{brand.alt3.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-hover',
+    name: '--fds-semantic-surface-third-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-hover'],
+    path: ['semantic', 'surface', 'third', 'light-hover'],
   },
   {
     value: '#9FAEAF',
@@ -939,12 +939,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.300}',
+      value: '{brand.alt3.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-active',
+    name: '--fds-semantic-surface-third-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-active'],
+    path: ['semantic', 'surface', 'third', 'light-active'],
   },
   {
     value: '#414849',
@@ -952,12 +952,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.700}',
+      value: '{brand.alt3.700}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-dark',
+    name: '--fds-semantic-surface-third-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'dark'],
+    path: ['semantic', 'surface', 'third', 'dark'],
   },
   {
     value: '#004e95',
@@ -1064,134 +1064,134 @@ export const color = [
     path: ['semantic', 'border', 'action', 'dark-hover'],
   },
   {
-    value: '#b3d0ea',
+    value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{colors.blue.200}',
+      value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle',
+    name: '--fds-semantic-border-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle'],
   },
   {
-    value: '#66a1d6',
+    value: '#d2d5d8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{colors.blue.400}',
+      value: '{colors.grey.300}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle-hover',
+    name: '--fds-semantic-border-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle-hover'],
   },
   {
-    value: '#0062ba',
+    value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{colors.blue.700}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-default',
+    name: '--fds-semantic-border-action-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'default'],
+    path: ['semantic', 'border', 'action', 'first', 'default'],
   },
   {
-    value: '#004e95',
+    value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{colors.blue.800}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-hover',
+    name: '--fds-semantic-border-action-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'hover'],
+    path: ['semantic', 'border', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-active',
+    name: '--fds-semantic-border-action-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'active'],
+    path: ['semantic', 'border', 'action', 'first', 'active'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle',
+    name: '--fds-semantic-border-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle'],
   },
   {
     value: '#d2d5d8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.grey.300}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle-hover',
+    name: '--fds-semantic-border-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-default',
+    name: '--fds-semantic-border-action-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'default'],
+    path: ['semantic', 'border', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-hover',
+    name: '--fds-semantic-border-action-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-active',
+    name: '--fds-semantic-border-action-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'active'],
+    path: ['semantic', 'border', 'action', 'second', 'active'],
   },
   {
     value: '#68707c',
@@ -1433,12 +1433,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.600}',
+      value: '{brand.alt1.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-default',
+    name: '--fds-semantic-border-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'default'],
+    path: ['semantic', 'border', 'first', 'default'],
   },
   {
     value: '#004785',
@@ -1446,12 +1446,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.700}',
+      value: '{brand.alt1.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-hover',
+    name: '--fds-semantic-border-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'hover'],
+    path: ['semantic', 'border', 'first', 'hover'],
   },
   {
     value: '#00315E',
@@ -1459,12 +1459,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-active',
+    name: '--fds-semantic-border-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'active'],
+    path: ['semantic', 'border', 'first', 'active'],
   },
   {
     value: '#2C647E',
@@ -1472,12 +1472,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.600}',
+      value: '{brand.alt2.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-default',
+    name: '--fds-semantic-border-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'default'],
+    path: ['semantic', 'border', 'second', 'default'],
   },
   {
     value: '#1F4B63',
@@ -1485,12 +1485,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.700}',
+      value: '{brand.alt2.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-hover',
+    name: '--fds-semantic-border-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'second', 'hover'],
   },
   {
     value: '#133349',
@@ -1498,12 +1498,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.800}',
+      value: '{brand.alt2.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-active',
+    name: '--fds-semantic-border-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'active'],
+    path: ['semantic', 'border', 'second', 'active'],
   },
   {
     value: '#879394',
@@ -1511,12 +1511,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.400}',
+      value: '{brand.alt3.400}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-default',
+    name: '--fds-semantic-border-third-default',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'default'],
+    path: ['semantic', 'border', 'third', 'default'],
   },
   {
     value: '#6D7879',
@@ -1524,12 +1524,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.500}',
+      value: '{brand.alt3.500}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-hover',
+    name: '--fds-semantic-border-third-hover',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'hover'],
+    path: ['semantic', 'border', 'third', 'hover'],
   },
   {
     value: '#576061',
@@ -1537,12 +1537,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.600}',
+      value: '{brand.alt3.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-active',
+    name: '--fds-semantic-border-third-active',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'active'],
+    path: ['semantic', 'border', 'third', 'active'],
   },
   {
     value: '#0c6536',
@@ -1701,108 +1701,108 @@ export const color = [
     path: ['semantic', 'text', 'action', 'on_action'],
   },
   {
-    value: '#0062ba',
+    value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '{colors.blue.700}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-default',
+    name: '--fds-semantic-text-action-first-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'default'],
+    path: ['semantic', 'text', 'action', 'first', 'default'],
   },
   {
-    value: '#004e95',
+    value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '#004e95',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-hover',
+    name: '--fds-semantic-text-action-first-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'hover'],
+    path: ['semantic', 'text', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
-      value: '#00315d',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-active',
+    name: '--fds-semantic-text-action-first-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'active'],
+    path: ['semantic', 'text', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-on_action',
+    name: '--fds-semantic-text-action-first-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'first', 'on_action'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-default',
+    name: '--fds-semantic-text-action-second-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'default'],
+    path: ['semantic', 'text', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-hover',
+    name: '--fds-semantic-text-action-second-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'text', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-active',
+    name: '--fds-semantic-text-action-second-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'active'],
+    path: ['semantic', 'text', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Brreg.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-on_action',
+    name: '--fds-semantic-text-action-second-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'second', 'on_action'],
   },
   {
     value: '#995404',
@@ -1930,9 +1930,9 @@ export const color = [
       value: '#FFFFFF',
       type: 'color',
     },
-    name: '--fds-brand-primary-50',
+    name: '--fds-brand-alt1-50',
     attributes: {},
-    path: ['brand', 'primary', '50'],
+    path: ['brand', 'alt1', '50'],
   },
   {
     value: '#D1E4FF',
@@ -1943,9 +1943,9 @@ export const color = [
       value: '#D1E4FF',
       type: 'color',
     },
-    name: '--fds-brand-primary-100',
+    name: '--fds-brand-alt1-100',
     attributes: {},
-    path: ['brand', 'primary', '100'],
+    path: ['brand', 'alt1', '100'],
   },
   {
     value: '#9ECAFF',
@@ -1956,9 +1956,9 @@ export const color = [
       value: '#9ECAFF',
       type: 'color',
     },
-    name: '--fds-brand-primary-200',
+    name: '--fds-brand-alt1-200',
     attributes: {},
-    path: ['brand', 'primary', '200'],
+    path: ['brand', 'alt1', '200'],
   },
   {
     value: '#76ADFB',
@@ -1969,9 +1969,9 @@ export const color = [
       value: '#76ADFB',
       type: 'color',
     },
-    name: '--fds-brand-primary-300',
+    name: '--fds-brand-alt1-300',
     attributes: {},
-    path: ['brand', 'primary', '300'],
+    path: ['brand', 'alt1', '300'],
   },
   {
     value: '#5391E9',
@@ -1982,9 +1982,9 @@ export const color = [
       value: '#5391E9',
       type: 'color',
     },
-    name: '--fds-brand-primary-400',
+    name: '--fds-brand-alt1-400',
     attributes: {},
-    path: ['brand', 'primary', '400'],
+    path: ['brand', 'alt1', '400'],
   },
   {
     value: '#2B77CC',
@@ -1995,9 +1995,9 @@ export const color = [
       value: '#2B77CC',
       type: 'color',
     },
-    name: '--fds-brand-primary-500',
+    name: '--fds-brand-alt1-500',
     attributes: {},
-    path: ['brand', 'primary', '500'],
+    path: ['brand', 'alt1', '500'],
   },
   {
     value: '#005FAE',
@@ -2008,9 +2008,9 @@ export const color = [
       value: '#005FAE',
       type: 'color',
     },
-    name: '--fds-brand-primary-600',
+    name: '--fds-brand-alt1-600',
     attributes: {},
-    path: ['brand', 'primary', '600'],
+    path: ['brand', 'alt1', '600'],
   },
   {
     value: '#004785',
@@ -2021,9 +2021,9 @@ export const color = [
       value: '#004785',
       type: 'color',
     },
-    name: '--fds-brand-primary-700',
+    name: '--fds-brand-alt1-700',
     attributes: {},
-    path: ['brand', 'primary', '700'],
+    path: ['brand', 'alt1', '700'],
   },
   {
     value: '#00315E',
@@ -2034,9 +2034,9 @@ export const color = [
       value: '#00315E',
       type: 'color',
     },
-    name: '--fds-brand-primary-800',
+    name: '--fds-brand-alt1-800',
     attributes: {},
-    path: ['brand', 'primary', '800'],
+    path: ['brand', 'alt1', '800'],
   },
   {
     value: '#001C3A',
@@ -2047,9 +2047,9 @@ export const color = [
       value: '#001C3A',
       type: 'color',
     },
-    name: '--fds-brand-primary-900',
+    name: '--fds-brand-alt1-900',
     attributes: {},
-    path: ['brand', 'primary', '900'],
+    path: ['brand', 'alt1', '900'],
   },
   {
     value: '#001127',
@@ -2060,9 +2060,9 @@ export const color = [
       value: '#001127',
       type: 'color',
     },
-    name: '--fds-brand-primary-950',
+    name: '--fds-brand-alt1-950',
     attributes: {},
-    path: ['brand', 'primary', '950'],
+    path: ['brand', 'alt1', '950'],
   },
   {
     value: '#FFFFFF',
@@ -2073,9 +2073,9 @@ export const color = [
       value: '#FFFFFF',
       type: 'color',
     },
-    name: '--fds-brand-secondary-50',
+    name: '--fds-brand-alt2-50',
     attributes: {},
-    path: ['brand', 'secondary', '50'],
+    path: ['brand', 'alt2', '50'],
   },
   {
     value: '#E5F3F9',
@@ -2086,9 +2086,9 @@ export const color = [
       value: '#E5F3F9',
       type: 'color',
     },
-    name: '--fds-brand-secondary-100',
+    name: '--fds-brand-alt2-100',
     attributes: {},
-    path: ['brand', 'secondary', '100'],
+    path: ['brand', 'alt2', '100'],
   },
   {
     value: '#C9E7F4',
@@ -2099,9 +2099,9 @@ export const color = [
       value: '#C9E7F4',
       type: 'color',
     },
-    name: '--fds-brand-secondary-200',
+    name: '--fds-brand-alt2-200',
     attributes: {},
-    path: ['brand', 'secondary', '200'],
+    path: ['brand', 'alt2', '200'],
   },
   {
     value: '#70B3D7',
@@ -2112,9 +2112,9 @@ export const color = [
       value: '#70B3D7',
       type: 'color',
     },
-    name: '--fds-brand-secondary-300',
+    name: '--fds-brand-alt2-300',
     attributes: {},
-    path: ['brand', 'secondary', '300'],
+    path: ['brand', 'alt2', '300'],
   },
   {
     value: '#4E99BD',
@@ -2125,9 +2125,9 @@ export const color = [
       value: '#4E99BD',
       type: 'color',
     },
-    name: '--fds-brand-secondary-400',
+    name: '--fds-brand-alt2-400',
     attributes: {},
-    path: ['brand', 'secondary', '400'],
+    path: ['brand', 'alt2', '400'],
   },
   {
     value: '#3B7D9B',
@@ -2138,9 +2138,9 @@ export const color = [
       value: '#3B7D9B',
       type: 'color',
     },
-    name: '--fds-brand-secondary-500',
+    name: '--fds-brand-alt2-500',
     attributes: {},
-    path: ['brand', 'secondary', '500'],
+    path: ['brand', 'alt2', '500'],
   },
   {
     value: '#2C647E',
@@ -2151,9 +2151,9 @@ export const color = [
       value: '#2C647E',
       type: 'color',
     },
-    name: '--fds-brand-secondary-600',
+    name: '--fds-brand-alt2-600',
     attributes: {},
-    path: ['brand', 'secondary', '600'],
+    path: ['brand', 'alt2', '600'],
   },
   {
     value: '#1F4B63',
@@ -2164,9 +2164,9 @@ export const color = [
       value: '#1F4B63',
       type: 'color',
     },
-    name: '--fds-brand-secondary-700',
+    name: '--fds-brand-alt2-700',
     attributes: {},
-    path: ['brand', 'secondary', '700'],
+    path: ['brand', 'alt2', '700'],
   },
   {
     value: '#133349',
@@ -2177,9 +2177,9 @@ export const color = [
       value: '#133349',
       type: 'color',
     },
-    name: '--fds-brand-secondary-800',
+    name: '--fds-brand-alt2-800',
     attributes: {},
-    path: ['brand', 'secondary', '800'],
+    path: ['brand', 'alt2', '800'],
   },
   {
     value: '#071D2C',
@@ -2190,9 +2190,9 @@ export const color = [
       value: '#071D2C',
       type: 'color',
     },
-    name: '--fds-brand-secondary-900',
+    name: '--fds-brand-alt2-900',
     attributes: {},
-    path: ['brand', 'secondary', '900'],
+    path: ['brand', 'alt2', '900'],
   },
   {
     value: '#03121D',
@@ -2203,9 +2203,9 @@ export const color = [
       value: '#03121D',
       type: 'color',
     },
-    name: '--fds-brand-secondary-950',
+    name: '--fds-brand-alt2-950',
     attributes: {},
-    path: ['brand', 'secondary', '950'],
+    path: ['brand', 'alt2', '950'],
   },
   {
     value: '#EBF2F3',
@@ -2216,9 +2216,9 @@ export const color = [
       value: '#EBF2F3',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-50',
+    name: '--fds-brand-alt3-50',
     attributes: {},
-    path: ['brand', 'tertiary', '50'],
+    path: ['brand', 'alt3', '50'],
   },
   {
     value: '#D7E5E7',
@@ -2229,9 +2229,9 @@ export const color = [
       value: '#D7E5E7',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-100',
+    name: '--fds-brand-alt3-100',
     attributes: {},
-    path: ['brand', 'tertiary', '100'],
+    path: ['brand', 'alt3', '100'],
   },
   {
     value: '#B9CACB',
@@ -2242,9 +2242,9 @@ export const color = [
       value: '#B9CACB',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-200',
+    name: '--fds-brand-alt3-200',
     attributes: {},
-    path: ['brand', 'tertiary', '200'],
+    path: ['brand', 'alt3', '200'],
   },
   {
     value: '#9FAEAF',
@@ -2255,9 +2255,9 @@ export const color = [
       value: '#9FAEAF',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-300',
+    name: '--fds-brand-alt3-300',
     attributes: {},
-    path: ['brand', 'tertiary', '300'],
+    path: ['brand', 'alt3', '300'],
   },
   {
     value: '#879394',
@@ -2268,9 +2268,9 @@ export const color = [
       value: '#879394',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-400',
+    name: '--fds-brand-alt3-400',
     attributes: {},
-    path: ['brand', 'tertiary', '400'],
+    path: ['brand', 'alt3', '400'],
   },
   {
     value: '#6D7879',
@@ -2281,9 +2281,9 @@ export const color = [
       value: '#6D7879',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-500',
+    name: '--fds-brand-alt3-500',
     attributes: {},
-    path: ['brand', 'tertiary', '500'],
+    path: ['brand', 'alt3', '500'],
   },
   {
     value: '#576061',
@@ -2294,9 +2294,9 @@ export const color = [
       value: '#576061',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-600',
+    name: '--fds-brand-alt3-600',
     attributes: {},
-    path: ['brand', 'tertiary', '600'],
+    path: ['brand', 'alt3', '600'],
   },
   {
     value: '#414849',
@@ -2307,9 +2307,9 @@ export const color = [
       value: '#414849',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-700',
+    name: '--fds-brand-alt3-700',
     attributes: {},
-    path: ['brand', 'tertiary', '700'],
+    path: ['brand', 'alt3', '700'],
   },
   {
     value: '#2C3132',
@@ -2320,9 +2320,9 @@ export const color = [
       value: '#2C3132',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-800',
+    name: '--fds-brand-alt3-800',
     attributes: {},
-    path: ['brand', 'tertiary', '800'],
+    path: ['brand', 'alt3', '800'],
   },
   {
     value: '#191C1C',
@@ -2333,9 +2333,9 @@ export const color = [
       value: '#191C1C',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-900',
+    name: '--fds-brand-alt3-900',
     attributes: {},
-    path: ['brand', 'tertiary', '900'],
+    path: ['brand', 'alt3', '900'],
   },
   {
     value: '#0F1112',
@@ -2346,9 +2346,9 @@ export const color = [
       value: '#0F1112',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-950',
+    name: '--fds-brand-alt3-950',
     attributes: {},
-    path: ['brand', 'tertiary', '950'],
+    path: ['brand', 'alt3', '950'],
   },
 ];
 
@@ -2802,6 +2802,29 @@ export const typography = [
     attributes: {},
     path: ['typography', 'label', 'xsmall'],
   },
+  {
+    value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'",
+    type: 'typography',
+    filePath: '../../design-tokens/Base/Semantic.json',
+    isSource: false,
+    original: {
+      value: {
+        fontFamily: '{fontFamilies.inter}',
+        fontWeight: '{fontWeights.regular}',
+        lineHeight: '{lineHeights.300}',
+        fontSize: '{font-size.f1}',
+        letterSpacing: '{letterSpacing.1}',
+        paragraphSpacing: '{paragraphSpacing.0}',
+        paragraphIndent: '{paragraphIndent.0}',
+        textCase: '{textCase.none}',
+        textDecoration: '{textDecoration.none}',
+      },
+      type: 'typography',
+    },
+    name: '--fds-typography-error_message-large',
+    attributes: {},
+    path: ['typography', 'error_message', 'large'],
+  },
   {
     value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'",
     type: 'typography',
diff --git a/storefront/tokens/digdir.ts b/storefront/tokens/digdir.ts
index 7643ff3fbe..e90924fdf1 100644
--- a/storefront/tokens/digdir.ts
+++ b/storefront/tokens/digdir.ts
@@ -243,214 +243,214 @@ export const color = [
   {
     value: '#e6eff8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle',
+    name: '--fds-semantic-surface-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle'],
   },
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle-hover',
+    name: '--fds-semantic-surface-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle-hover'],
   },
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-default',
+    name: '--fds-semantic-surface-action-first-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'default'],
+    path: ['semantic', 'surface', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-hover',
+    name: '--fds-semantic-surface-action-first-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
     description: 'Standard farge for handlinger',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-primary-active',
+    name: '--fds-semantic-surface-action-first-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'active'],
+    path: ['semantic', 'surface', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill',
+    name: '--fds-semantic-surface-action-first-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill'],
   },
   {
     value: '#e6eff8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-hover',
+    name: '--fds-semantic-surface-action-first-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-hover'],
   },
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-active',
+    name: '--fds-semantic-surface-action-first-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-active'],
   },
   {
     value: '#f4f5f6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.grey.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle',
+    name: '--fds-semantic-surface-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle-hover',
+    name: '--fds-semantic-surface-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-default',
+    name: '--fds-semantic-surface-action-second-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'default'],
+    path: ['semantic', 'surface', 'action', 'second', 'default'],
   },
   {
     value: 'rgba(0, 49, 93, 0.9)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.9)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-hover',
+    name: '--fds-semantic-surface-action-second-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.8)',
     type: 'color',
     description: 'Standard farge for handlinger',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.8)',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-secondary-active',
+    name: '--fds-semantic-surface-action-second-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'active'],
+    path: ['semantic', 'surface', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill',
+    name: '--fds-semantic-surface-action-second-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill'],
   },
   {
     value: 'rgba(0, 49, 93, 0.1)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.1)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-hover',
+    name: '--fds-semantic-surface-action-second-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.2)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.2)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-active',
+    name: '--fds-semantic-surface-action-second-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-active'],
   },
   {
     value: '#d1f4e1',
@@ -809,12 +809,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.200}',
+      value: '{brand.alt1.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light',
+    name: '--fds-semantic-surface-first-light',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light'],
+    path: ['semantic', 'surface', 'first', 'light'],
   },
   {
     value: '#fbbfc1',
@@ -822,12 +822,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.300}',
+      value: '{brand.alt1.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-hover',
+    name: '--fds-semantic-surface-first-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-hover'],
+    path: ['semantic', 'surface', 'first', 'light-hover'],
   },
   {
     value: '#f89fa1',
@@ -835,12 +835,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.400}',
+      value: '{brand.alt1.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-active',
+    name: '--fds-semantic-surface-first-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-active'],
+    path: ['semantic', 'surface', 'first', 'light-active'],
   },
   {
     value: '#c34c4f',
@@ -848,12 +848,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-dark',
+    name: '--fds-semantic-surface-first-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'dark'],
+    path: ['semantic', 'surface', 'first', 'dark'],
   },
   {
     value: '#faeec2',
@@ -861,12 +861,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.200}',
+      value: '{brand.alt2.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light',
+    name: '--fds-semantic-surface-second-light',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light'],
+    path: ['semantic', 'surface', 'second', 'light'],
   },
   {
     value: '#f5dda6',
@@ -874,12 +874,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.300}',
+      value: '{brand.alt2.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-hover',
+    name: '--fds-semantic-surface-second-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-hover'],
+    path: ['semantic', 'surface', 'second', 'light-hover'],
   },
   {
     value: '#efcc79',
@@ -887,12 +887,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.400}',
+      value: '{brand.alt2.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-active',
+    name: '--fds-semantic-surface-second-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-active'],
+    path: ['semantic', 'surface', 'second', 'light-active'],
   },
   {
     value: '#A17717',
@@ -900,12 +900,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.900}',
+      value: '{brand.alt2.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-dark',
+    name: '--fds-semantic-surface-second-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'dark'],
+    path: ['semantic', 'surface', 'second', 'dark'],
   },
   {
     value: '#d2eafd',
@@ -913,12 +913,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.200}',
+      value: '{brand.alt3.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light',
+    name: '--fds-semantic-surface-third-light',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light'],
+    path: ['semantic', 'surface', 'third', 'light'],
   },
   {
     value: '#a5d6fb',
@@ -926,12 +926,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.300}',
+      value: '{brand.alt3.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-hover',
+    name: '--fds-semantic-surface-third-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-hover'],
+    path: ['semantic', 'surface', 'third', 'light-hover'],
   },
   {
     value: '#78c1f9',
@@ -939,12 +939,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.400}',
+      value: '{brand.alt3.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-active',
+    name: '--fds-semantic-surface-third-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-active'],
+    path: ['semantic', 'surface', 'third', 'light-active'],
   },
   {
     value: '#156aac',
@@ -952,12 +952,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{brand.alt3.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-dark',
+    name: '--fds-semantic-surface-third-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'dark'],
+    path: ['semantic', 'surface', 'third', 'dark'],
   },
   {
     value: '#004e95',
@@ -1066,132 +1066,132 @@ export const color = [
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle',
+    name: '--fds-semantic-border-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle'],
   },
   {
     value: '#66a1d6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.400}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle-hover',
+    name: '--fds-semantic-border-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle-hover'],
   },
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-default',
+    name: '--fds-semantic-border-action-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'default'],
+    path: ['semantic', 'border', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-hover',
+    name: '--fds-semantic-border-action-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'hover'],
+    path: ['semantic', 'border', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-active',
+    name: '--fds-semantic-border-action-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'active'],
+    path: ['semantic', 'border', 'action', 'first', 'active'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle',
+    name: '--fds-semantic-border-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle'],
   },
   {
     value: '#d2d5d8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.grey.300}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle-hover',
+    name: '--fds-semantic-border-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-default',
+    name: '--fds-semantic-border-action-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'default'],
+    path: ['semantic', 'border', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-hover',
+    name: '--fds-semantic-border-action-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-active',
+    name: '--fds-semantic-border-action-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'active'],
+    path: ['semantic', 'border', 'action', 'second', 'active'],
   },
   {
     value: '#68707c',
@@ -1433,12 +1433,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.600}',
+      value: '{brand.alt1.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-default',
+    name: '--fds-semantic-border-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'default'],
+    path: ['semantic', 'border', 'first', 'default'],
   },
   {
     value: '#dc5659',
@@ -1446,12 +1446,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.700}',
+      value: '{brand.alt1.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-hover',
+    name: '--fds-semantic-border-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'hover'],
+    path: ['semantic', 'border', 'first', 'hover'],
   },
   {
     value: '#c34c4f',
@@ -1459,12 +1459,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-active',
+    name: '--fds-semantic-border-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'active'],
+    path: ['semantic', 'border', 'first', 'active'],
   },
   {
     value: '#e5aa20',
@@ -1472,12 +1472,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.600}',
+      value: '{brand.alt2.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-default',
+    name: '--fds-semantic-border-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'default'],
+    path: ['semantic', 'border', 'second', 'default'],
   },
   {
     value: '#ce991d',
@@ -1485,12 +1485,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.700}',
+      value: '{brand.alt2.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-hover',
+    name: '--fds-semantic-border-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'second', 'hover'],
   },
   {
     value: '#b7881a',
@@ -1498,12 +1498,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.800}',
+      value: '{brand.alt2.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-active',
+    name: '--fds-semantic-border-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'active'],
+    path: ['semantic', 'border', 'second', 'active'],
   },
   {
     value: '#1e98f5',
@@ -1511,12 +1511,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.600}',
+      value: '{brand.alt3.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-default',
+    name: '--fds-semantic-border-third-default',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'default'],
+    path: ['semantic', 'border', 'third', 'default'],
   },
   {
     value: '#1b88dd',
@@ -1524,12 +1524,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.700}',
+      value: '{brand.alt3.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-hover',
+    name: '--fds-semantic-border-third-hover',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'hover'],
+    path: ['semantic', 'border', 'third', 'hover'],
   },
   {
     value: '#156aac',
@@ -1537,12 +1537,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{brand.alt3.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-active',
+    name: '--fds-semantic-border-third-active',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'active'],
+    path: ['semantic', 'border', 'third', 'active'],
   },
   {
     value: '#0c6536',
@@ -1703,106 +1703,106 @@ export const color = [
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-default',
+    name: '--fds-semantic-text-action-first-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'default'],
+    path: ['semantic', 'text', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '#004e95',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-hover',
+    name: '--fds-semantic-text-action-first-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'hover'],
+    path: ['semantic', 'text', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '#00315d',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-active',
+    name: '--fds-semantic-text-action-first-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'active'],
+    path: ['semantic', 'text', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-on_action',
+    name: '--fds-semantic-text-action-first-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'first', 'on_action'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-default',
+    name: '--fds-semantic-text-action-second-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'default'],
+    path: ['semantic', 'text', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-hover',
+    name: '--fds-semantic-text-action-second-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'text', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-active',
+    name: '--fds-semantic-text-action-second-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'active'],
+    path: ['semantic', 'text', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Digdir.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-on_action',
+    name: '--fds-semantic-text-action-second-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'second', 'on_action'],
   },
   {
     value: '#995404',
@@ -1932,9 +1932,9 @@ export const color = [
       type: 'color',
       description: 'AAA 12.8 on grey 800\nAA 6.4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-100',
+    name: '--fds-brand-alt1-100',
     attributes: {},
-    path: ['brand', 'primary', '100'],
+    path: ['brand', 'alt1', '100'],
   },
   {
     value: '#fddfe0',
@@ -1949,9 +1949,9 @@ export const color = [
       description:
         'Light error color\nAAA 11.4 on grey 800\nAA 5.7 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-200',
+    name: '--fds-brand-alt1-200',
     attributes: {},
-    path: ['brand', 'primary', '200'],
+    path: ['brand', 'alt1', '200'],
   },
   {
     value: '#fbbfc1',
@@ -1964,9 +1964,9 @@ export const color = [
       type: 'color',
       description: 'AAA 9 on grey 800\nAA 4.5 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-300',
+    name: '--fds-brand-alt1-300',
     attributes: {},
-    path: ['brand', 'primary', '300'],
+    path: ['brand', 'alt1', '300'],
   },
   {
     value: '#f89fa1',
@@ -1979,9 +1979,9 @@ export const color = [
       type: 'color',
       description: 'AAA 7.1 on grey 800\nAA18 3.5 as bkdg for interaction blue',
     },
-    name: '--fds-brand-primary-400',
+    name: '--fds-brand-alt1-400',
     attributes: {},
-    path: ['brand', 'primary', '400'],
+    path: ['brand', 'alt1', '400'],
   },
   {
     value: '#f67f82',
@@ -1994,9 +1994,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.6 on grey 800',
     },
-    name: '--fds-brand-primary-500',
+    name: '--fds-brand-alt1-500',
     attributes: {},
-    path: ['brand', 'primary', '500'],
+    path: ['brand', 'alt1', '500'],
   },
   {
     value: '#f45f63',
@@ -2009,9 +2009,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.5 on grey 800',
     },
-    name: '--fds-brand-primary-600',
+    name: '--fds-brand-alt1-600',
     attributes: {},
-    path: ['brand', 'primary', '600'],
+    path: ['brand', 'alt1', '600'],
   },
   {
     value: '#dc5659',
@@ -2024,9 +2024,9 @@ export const color = [
       type: 'color',
       description: 'AA18 3.7 on grey 800',
     },
-    name: '--fds-brand-primary-700',
+    name: '--fds-brand-alt1-700',
     attributes: {},
-    path: ['brand', 'primary', '700'],
+    path: ['brand', 'alt1', '700'],
   },
   {
     value: '#c34c4f',
@@ -2039,9 +2039,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.7 on white',
     },
-    name: '--fds-brand-primary-800',
+    name: '--fds-brand-alt1-800',
     attributes: {},
-    path: ['brand', 'primary', '800'],
+    path: ['brand', 'alt1', '800'],
   },
   {
     value: '#B83D41',
@@ -2052,9 +2052,9 @@ export const color = [
       value: '#B83D41',
       type: 'color',
     },
-    name: '--fds-brand-primary-900',
+    name: '--fds-brand-alt1-900',
     attributes: {},
-    path: ['brand', 'primary', '900'],
+    path: ['brand', 'alt1', '900'],
   },
   {
     value: '#fcf7e9',
@@ -2067,9 +2067,9 @@ export const color = [
       type: 'color',
       description: 'AAA 13.3 on grey 800\nAA 6.7 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-100',
+    name: '--fds-brand-alt2-100',
     attributes: {},
-    path: ['brand', 'secondary', '100'],
+    path: ['brand', 'alt2', '100'],
   },
   {
     value: '#faeec2',
@@ -2084,9 +2084,9 @@ export const color = [
       description:
         'Light warning color\nAAA 12.3 on grey 800\nAA 1.1 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-200',
+    name: '--fds-brand-alt2-200',
     attributes: {},
-    path: ['brand', 'secondary', '200'],
+    path: ['brand', 'alt2', '200'],
   },
   {
     value: '#f5dda6',
@@ -2099,9 +2099,9 @@ export const color = [
       type: 'color',
       description: 'AAA 10 on grey 800\nAA 5.4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-300',
+    name: '--fds-brand-alt2-300',
     attributes: {},
-    path: ['brand', 'secondary', '300'],
+    path: ['brand', 'alt2', '300'],
   },
   {
     value: '#efcc79',
@@ -2114,9 +2114,9 @@ export const color = [
       type: 'color',
       description: 'AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-400',
+    name: '--fds-brand-alt2-400',
     attributes: {},
-    path: ['brand', 'secondary', '400'],
+    path: ['brand', 'alt2', '400'],
   },
   {
     value: '#eabb4d',
@@ -2129,9 +2129,9 @@ export const color = [
       type: 'color',
       description: 'AAA 7.9 on grey 800\nAA18 4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-500',
+    name: '--fds-brand-alt2-500',
     attributes: {},
-    path: ['brand', 'secondary', '500'],
+    path: ['brand', 'alt2', '500'],
   },
   {
     value: '#e5aa20',
@@ -2144,9 +2144,9 @@ export const color = [
       type: 'color',
       description: 'AA 6.8 on grey 800\nAA18 3.4 as bkdg for interaction blue',
     },
-    name: '--fds-brand-secondary-600',
+    name: '--fds-brand-alt2-600',
     attributes: {},
-    path: ['brand', 'secondary', '600'],
+    path: ['brand', 'alt2', '600'],
   },
   {
     value: '#ce991d',
@@ -2159,9 +2159,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.5 on grey 800',
     },
-    name: '--fds-brand-secondary-700',
+    name: '--fds-brand-alt2-700',
     attributes: {},
-    path: ['brand', 'secondary', '700'],
+    path: ['brand', 'alt2', '700'],
   },
   {
     value: '#b7881a',
@@ -2174,9 +2174,9 @@ export const color = [
       type: 'color',
       description: 'AA18 4.4 on grey 800\nAA18 3.2 on white',
     },
-    name: '--fds-brand-secondary-800',
+    name: '--fds-brand-alt2-800',
     attributes: {},
-    path: ['brand', 'secondary', '800'],
+    path: ['brand', 'alt2', '800'],
   },
   {
     value: '#A17717',
@@ -2187,9 +2187,9 @@ export const color = [
       value: '#A17717',
       type: 'color',
     },
-    name: '--fds-brand-secondary-900',
+    name: '--fds-brand-alt2-900',
     attributes: {},
-    path: ['brand', 'secondary', '900'],
+    path: ['brand', 'alt2', '900'],
   },
   {
     value: '#e9f5ff',
@@ -2202,9 +2202,9 @@ export const color = [
       type: 'color',
       description: 'AAA 12.9 on grey 800\nAA 6.5 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-100',
+    name: '--fds-brand-alt3-100',
     attributes: {},
-    path: ['brand', 'tertiary', '100'],
+    path: ['brand', 'alt3', '100'],
   },
   {
     value: '#d2eafd',
@@ -2219,9 +2219,9 @@ export const color = [
       description:
         'Light information color \nAAA 11.5 on grey 800\nAA 5.8 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-200',
+    name: '--fds-brand-alt3-200',
     attributes: {},
-    path: ['brand', 'tertiary', '200'],
+    path: ['brand', 'alt3', '200'],
   },
   {
     value: '#a5d6fb',
@@ -2234,9 +2234,9 @@ export const color = [
       type: 'color',
       description: 'AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-300',
+    name: '--fds-brand-alt3-300',
     attributes: {},
-    path: ['brand', 'tertiary', '300'],
+    path: ['brand', 'alt3', '300'],
   },
   {
     value: '#78c1f9',
@@ -2249,9 +2249,9 @@ export const color = [
       type: 'color',
       description: 'AAA 7.3 on grey 800\nAA18 3.7 as bkdg for interaction blue',
     },
-    name: '--fds-brand-tertiary-400',
+    name: '--fds-brand-alt3-400',
     attributes: {},
-    path: ['brand', 'tertiary', '400'],
+    path: ['brand', 'alt3', '400'],
   },
   {
     value: '#4badf7',
@@ -2264,9 +2264,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.8 on grey 800',
     },
-    name: '--fds-brand-tertiary-500',
+    name: '--fds-brand-alt3-500',
     attributes: {},
-    path: ['brand', 'tertiary', '500'],
+    path: ['brand', 'alt3', '500'],
   },
   {
     value: '#1e98f5',
@@ -2279,9 +2279,9 @@ export const color = [
       type: 'color',
       description: 'AA 4.6 on grey 800',
     },
-    name: '--fds-brand-tertiary-600',
+    name: '--fds-brand-alt3-600',
     attributes: {},
-    path: ['brand', 'tertiary', '600'],
+    path: ['brand', 'alt3', '600'],
   },
   {
     value: '#1b88dd',
@@ -2294,9 +2294,9 @@ export const color = [
       type: 'color',
       description: 'AA18 3.8 on grey 800',
     },
-    name: '--fds-brand-tertiary-700',
+    name: '--fds-brand-alt3-700',
     attributes: {},
-    path: ['brand', 'tertiary', '700'],
+    path: ['brand', 'alt3', '700'],
   },
   {
     value: '#156aac',
@@ -2309,9 +2309,9 @@ export const color = [
       type: 'color',
       description: 'AA 5.6 on white',
     },
-    name: '--fds-brand-tertiary-800',
+    name: '--fds-brand-alt3-800',
     attributes: {},
-    path: ['brand', 'tertiary', '800'],
+    path: ['brand', 'alt3', '800'],
   },
   {
     value: '#125A91',
@@ -2322,9 +2322,9 @@ export const color = [
       value: '#125A91',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-900',
+    name: '--fds-brand-alt3-900',
     attributes: {},
-    path: ['brand', 'tertiary', '900'],
+    path: ['brand', 'alt3', '900'],
   },
 ];
 
@@ -2778,6 +2778,29 @@ export const typography = [
     attributes: {},
     path: ['typography', 'label', 'xsmall'],
   },
+  {
+    value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'",
+    type: 'typography',
+    filePath: '../../design-tokens/Base/Semantic.json',
+    isSource: false,
+    original: {
+      value: {
+        fontFamily: '{fontFamilies.inter}',
+        fontWeight: '{fontWeights.regular}',
+        lineHeight: '{lineHeights.300}',
+        fontSize: '{font-size.f1}',
+        letterSpacing: '{letterSpacing.1}',
+        paragraphSpacing: '{paragraphSpacing.0}',
+        paragraphIndent: '{paragraphIndent.0}',
+        textCase: '{textCase.none}',
+        textDecoration: '{textDecoration.none}',
+      },
+      type: 'typography',
+    },
+    name: '--fds-typography-error_message-large',
+    attributes: {},
+    path: ['typography', 'error_message', 'large'],
+  },
   {
     value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'",
     type: 'typography',
diff --git a/storefront/tokens/tilsynet.ts b/storefront/tokens/tilsynet.ts
index 6a3839df0b..15024f1ed6 100644
--- a/storefront/tokens/tilsynet.ts
+++ b/storefront/tokens/tilsynet.ts
@@ -241,216 +241,216 @@ export const color = [
     path: ['semantic', 'surface', 'action', 'checked'],
   },
   {
-    value: '#e6eff8',
+    value: '#f4f5f6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{colors.blue.100}',
+      value: '{colors.grey.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle',
+    name: '--fds-semantic-surface-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle'],
   },
   {
-    value: '#b3d0ea',
+    value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{colors.blue.200}',
+      value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-subtle-hover',
+    name: '--fds-semantic-surface-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'subtle-hover'],
   },
   {
-    value: '#3339c6',
+    value: '#00315d',
     type: 'color',
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.700}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-default',
+    name: '--fds-semantic-surface-action-first-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'default'],
+    path: ['semantic', 'surface', 'action', 'first', 'default'],
   },
   {
-    value: '#0008b8',
+    value: 'rgba(0, 49, 93, 0.9)',
     type: 'color',
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: 'rgba({colors.blue.900}, 0.9)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-hover',
+    name: '--fds-semantic-surface-action-first-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'hover'],
   },
   {
-    value: '#00078F',
+    value: 'rgba(0, 49, 93, 0.8)',
     type: 'color',
     description: 'Standard farge for handlinger',
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.900}',
+      value: 'rgba({colors.blue.900}, 0.8)',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-primary-active',
+    name: '--fds-semantic-surface-action-first-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'active'],
+    path: ['semantic', 'surface', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill',
+    name: '--fds-semantic-surface-action-first-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill'],
   },
   {
-    value: '#e6eff8',
+    value: 'rgba(0, 49, 93, 0.1)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{colors.blue.100}',
+      value: 'rgba({colors.blue.900}, 0.1)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-hover',
+    name: '--fds-semantic-surface-action-first-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-hover'],
   },
   {
-    value: '#b3d0ea',
+    value: 'rgba(0, 49, 93, 0.2)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{colors.blue.200}',
+      value: 'rgba({colors.blue.900}, 0.2)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-primary-no_fill-active',
+    name: '--fds-semantic-surface-action-first-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'primary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'first', 'no_fill-active'],
   },
   {
     value: '#f4f5f6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.grey.100}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle',
+    name: '--fds-semantic-surface-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-subtle-hover',
+    name: '--fds-semantic-surface-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'subtle-hover'],
   },
   {
-    value: '#407d6d',
+    value: '#00315d',
     type: 'color',
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-default',
+    name: '--fds-semantic-surface-action-second-default',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'default'],
+    path: ['semantic', 'surface', 'action', 'second', 'default'],
   },
   {
-    value: '#376C5E',
+    value: 'rgba(0, 49, 93, 0.9)',
     type: 'color',
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.900}',
+      value: 'rgba({colors.blue.900}, 0.9)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-hover',
+    name: '--fds-semantic-surface-action-second-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'hover'],
   },
   {
-    value: '#376C5E',
+    value: 'rgba(0, 49, 93, 0.8)',
     type: 'color',
     description: 'Standard farge for handlinger',
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.900}',
+      value: 'rgba({colors.blue.900}, 0.8)',
       type: 'color',
       description: 'Standard farge for handlinger',
     },
-    name: '--fds-semantic-surface-action-secondary-active',
+    name: '--fds-semantic-surface-action-second-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'active'],
+    path: ['semantic', 'surface', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill',
+    name: '--fds-semantic-surface-action-second-no_fill',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill'],
   },
   {
     value: 'rgba(0, 49, 93, 0.1)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.1)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-hover',
+    name: '--fds-semantic-surface-action-second-no_fill-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-hover'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-hover'],
   },
   {
     value: 'rgba(0, 49, 93, 0.2)',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: 'rgba({colors.blue.900}, 0.2)',
       type: 'color',
     },
-    name: '--fds-semantic-surface-action-secondary-no_fill-active',
+    name: '--fds-semantic-surface-action-second-no_fill-active',
     attributes: {},
-    path: ['semantic', 'surface', 'action', 'secondary', 'no_fill-active'],
+    path: ['semantic', 'surface', 'action', 'second', 'no_fill-active'],
   },
   {
     value: '#d1f4e1',
@@ -809,12 +809,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.200}',
+      value: '{brand.alt1.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light',
+    name: '--fds-semantic-surface-first-light',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light'],
+    path: ['semantic', 'surface', 'first', 'light'],
   },
   {
     value: '#bec0ed',
@@ -822,12 +822,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.300}',
+      value: '{brand.alt1.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-hover',
+    name: '--fds-semantic-surface-first-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-hover'],
+    path: ['semantic', 'surface', 'first', 'light-hover'],
   },
   {
     value: '#9da0e4',
@@ -835,12 +835,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.400}',
+      value: '{brand.alt1.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-light-active',
+    name: '--fds-semantic-surface-first-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'light-active'],
+    path: ['semantic', 'surface', 'first', 'light-active'],
   },
   {
     value: '#0008b8',
@@ -848,12 +848,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-primary-dark',
+    name: '--fds-semantic-surface-first-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'primary', 'dark'],
+    path: ['semantic', 'surface', 'first', 'dark'],
   },
   {
     value: '#ffdcc3',
@@ -861,12 +861,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.200}',
+      value: '{brand.alt2.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light',
+    name: '--fds-semantic-surface-second-light',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light'],
+    path: ['semantic', 'surface', 'second', 'light'],
   },
   {
     value: '#fdd4b7',
@@ -874,12 +874,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.300}',
+      value: '{brand.alt2.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-hover',
+    name: '--fds-semantic-surface-second-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-hover'],
+    path: ['semantic', 'surface', 'second', 'light-hover'],
   },
   {
     value: '#ffc296',
@@ -887,12 +887,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.400}',
+      value: '{brand.alt2.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-light-active',
+    name: '--fds-semantic-surface-second-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'light-active'],
+    path: ['semantic', 'surface', 'second', 'light-active'],
   },
   {
     value: '#9F6841',
@@ -900,12 +900,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.900}',
+      value: '{brand.alt2.900}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-secondary-dark',
+    name: '--fds-semantic-surface-second-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'secondary', 'dark'],
+    path: ['semantic', 'surface', 'second', 'dark'],
   },
   {
     value: '#deece9',
@@ -913,12 +913,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.200}',
+      value: '{brand.alt3.200}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light',
+    name: '--fds-semantic-surface-third-light',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light'],
+    path: ['semantic', 'surface', 'third', 'light'],
   },
   {
     value: '#bedad2',
@@ -926,12 +926,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.300}',
+      value: '{brand.alt3.300}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-hover',
+    name: '--fds-semantic-surface-third-light-hover',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-hover'],
+    path: ['semantic', 'surface', 'third', 'light-hover'],
   },
   {
     value: '#9dc7bc',
@@ -939,12 +939,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.400}',
+      value: '{brand.alt3.400}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-light-active',
+    name: '--fds-semantic-surface-third-light-active',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'light-active'],
+    path: ['semantic', 'surface', 'third', 'light-active'],
   },
   {
     value: '#407d6d',
@@ -952,12 +952,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{brand.alt3.800}',
       type: 'color',
     },
-    name: '--fds-semantic-surface-tertiary-dark',
+    name: '--fds-semantic-surface-third-dark',
     attributes: {},
-    path: ['semantic', 'surface', 'tertiary', 'dark'],
+    path: ['semantic', 'surface', 'third', 'dark'],
   },
   {
     value: '#004e95',
@@ -1066,132 +1066,132 @@ export const color = [
   {
     value: '#b3d0ea',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle',
+    name: '--fds-semantic-border-action-first-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle'],
   },
   {
     value: '#66a1d6',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.400}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-subtle-hover',
+    name: '--fds-semantic-border-action-first-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'first', 'subtle-hover'],
   },
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-default',
+    name: '--fds-semantic-border-action-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'default'],
+    path: ['semantic', 'border', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-hover',
+    name: '--fds-semantic-border-action-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'hover'],
+    path: ['semantic', 'border', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-primary-active',
+    name: '--fds-semantic-border-action-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'primary', 'active'],
+    path: ['semantic', 'border', 'action', 'first', 'active'],
   },
   {
     value: '#e9eaec',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.grey.200}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle',
+    name: '--fds-semantic-border-action-second-subtle',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle'],
   },
   {
     value: '#d2d5d8',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.grey.300}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-subtle-hover',
+    name: '--fds-semantic-border-action-second-subtle-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'subtle-hover'],
+    path: ['semantic', 'border', 'action', 'second', 'subtle-hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-default',
+    name: '--fds-semantic-border-action-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'default'],
+    path: ['semantic', 'border', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-hover',
+    name: '--fds-semantic-border-action-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-border-action-secondary-active',
+    name: '--fds-semantic-border-action-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'action', 'secondary', 'active'],
+    path: ['semantic', 'border', 'action', 'second', 'active'],
   },
   {
     value: '#68707c',
@@ -1433,12 +1433,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.600}',
+      value: '{brand.alt1.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-default',
+    name: '--fds-semantic-border-first-default',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'default'],
+    path: ['semantic', 'border', 'first', 'default'],
   },
   {
     value: '#3339c6',
@@ -1446,12 +1446,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.700}',
+      value: '{brand.alt1.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-hover',
+    name: '--fds-semantic-border-first-hover',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'hover'],
+    path: ['semantic', 'border', 'first', 'hover'],
   },
   {
     value: '#0008b8',
@@ -1459,12 +1459,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.primary.800}',
+      value: '{brand.alt1.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-primary-active',
+    name: '--fds-semantic-border-first-active',
     attributes: {},
-    path: ['semantic', 'border', 'primary', 'active'],
+    path: ['semantic', 'border', 'first', 'active'],
   },
   {
     value: '#ffa869',
@@ -1472,12 +1472,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.600}',
+      value: '{brand.alt2.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-default',
+    name: '--fds-semantic-border-second-default',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'default'],
+    path: ['semantic', 'border', 'second', 'default'],
   },
   {
     value: '#e6975f',
@@ -1485,12 +1485,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.700}',
+      value: '{brand.alt2.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-hover',
+    name: '--fds-semantic-border-second-hover',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'hover'],
+    path: ['semantic', 'border', 'second', 'hover'],
   },
   {
     value: '#b3764a',
@@ -1498,12 +1498,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.secondary.800}',
+      value: '{brand.alt2.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-secondary-active',
+    name: '--fds-semantic-border-second-active',
     attributes: {},
-    path: ['semantic', 'border', 'secondary', 'active'],
+    path: ['semantic', 'border', 'second', 'active'],
   },
   {
     value: '#5ca28f',
@@ -1511,12 +1511,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.600}',
+      value: '{brand.alt3.600}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-default',
+    name: '--fds-semantic-border-third-default',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'default'],
+    path: ['semantic', 'border', 'third', 'default'],
   },
   {
     value: '#4c907e',
@@ -1524,12 +1524,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.700}',
+      value: '{brand.alt3.700}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-hover',
+    name: '--fds-semantic-border-third-hover',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'hover'],
+    path: ['semantic', 'border', 'third', 'hover'],
   },
   {
     value: '#407d6d',
@@ -1537,12 +1537,12 @@ export const color = [
     filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
-      value: '{brand.tertiary.800}',
+      value: '{brand.alt3.800}',
       type: 'color',
     },
-    name: '--fds-semantic-border-tertiary-active',
+    name: '--fds-semantic-border-third-active',
     attributes: {},
-    path: ['semantic', 'border', 'tertiary', 'active'],
+    path: ['semantic', 'border', 'third', 'active'],
   },
   {
     value: '#0c6536',
@@ -1703,106 +1703,106 @@ export const color = [
   {
     value: '#0062ba',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.700}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-default',
+    name: '--fds-semantic-text-action-first-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'default'],
+    path: ['semantic', 'text', 'action', 'first', 'default'],
   },
   {
     value: '#004e95',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '#004e95',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-hover',
+    name: '--fds-semantic-text-action-first-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'hover'],
+    path: ['semantic', 'text', 'action', 'first', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '#00315d',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-active',
+    name: '--fds-semantic-text-action-first-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'active'],
+    path: ['semantic', 'text', 'action', 'first', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-primary-on_action',
+    name: '--fds-semantic-text-action-first-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'primary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'first', 'on_action'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-default',
+    name: '--fds-semantic-text-action-second-default',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'default'],
+    path: ['semantic', 'text', 'action', 'second', 'default'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-hover',
+    name: '--fds-semantic-text-action-second-hover',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'hover'],
+    path: ['semantic', 'text', 'action', 'second', 'hover'],
   },
   {
     value: '#00315d',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.blue.900}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-active',
+    name: '--fds-semantic-text-action-second-active',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'active'],
+    path: ['semantic', 'text', 'action', 'second', 'active'],
   },
   {
     value: '#ffffff',
     type: 'color',
-    filePath: '../../design-tokens/Base/Semantic.json',
+    filePath: '../../design-tokens/Brand/Tilsynet.json',
     isSource: false,
     original: {
       value: '{colors.white}',
       type: 'color',
     },
-    name: '--fds-semantic-text-action-secondary-on_action',
+    name: '--fds-semantic-text-action-second-on_action',
     attributes: {},
-    path: ['semantic', 'text', 'action', 'secondary', 'on_action'],
+    path: ['semantic', 'text', 'action', 'second', 'on_action'],
   },
   {
     value: '#995404',
@@ -1930,9 +1930,9 @@ export const color = [
       value: '#efeffb',
       type: 'color',
     },
-    name: '--fds-brand-primary-100',
+    name: '--fds-brand-alt1-100',
     attributes: {},
-    path: ['brand', 'primary', '100'],
+    path: ['brand', 'alt1', '100'],
   },
   {
     value: '#dedff6',
@@ -1943,9 +1943,9 @@ export const color = [
       value: '#dedff6',
       type: 'color',
     },
-    name: '--fds-brand-primary-200',
+    name: '--fds-brand-alt1-200',
     attributes: {},
-    path: ['brand', 'primary', '200'],
+    path: ['brand', 'alt1', '200'],
   },
   {
     value: '#bec0ed',
@@ -1956,9 +1956,9 @@ export const color = [
       value: '#bec0ed',
       type: 'color',
     },
-    name: '--fds-brand-primary-300',
+    name: '--fds-brand-alt1-300',
     attributes: {},
-    path: ['brand', 'primary', '300'],
+    path: ['brand', 'alt1', '300'],
   },
   {
     value: '#9da0e4',
@@ -1969,9 +1969,9 @@ export const color = [
       value: '#9da0e4',
       type: 'color',
     },
-    name: '--fds-brand-primary-400',
+    name: '--fds-brand-alt1-400',
     attributes: {},
-    path: ['brand', 'primary', '400'],
+    path: ['brand', 'alt1', '400'],
   },
   {
     value: '#7d81db',
@@ -1982,9 +1982,9 @@ export const color = [
       value: '#7d81db',
       type: 'color',
     },
-    name: '--fds-brand-primary-500',
+    name: '--fds-brand-alt1-500',
     attributes: {},
-    path: ['brand', 'primary', '500'],
+    path: ['brand', 'alt1', '500'],
   },
   {
     value: '#5c61d2',
@@ -1995,9 +1995,9 @@ export const color = [
       value: '#5c61d2',
       type: 'color',
     },
-    name: '--fds-brand-primary-600',
+    name: '--fds-brand-alt1-600',
     attributes: {},
-    path: ['brand', 'primary', '600'],
+    path: ['brand', 'alt1', '600'],
   },
   {
     value: '#3339c6',
@@ -2008,9 +2008,9 @@ export const color = [
       value: '#3339c6',
       type: 'color',
     },
-    name: '--fds-brand-primary-700',
+    name: '--fds-brand-alt1-700',
     attributes: {},
-    path: ['brand', 'primary', '700'],
+    path: ['brand', 'alt1', '700'],
   },
   {
     value: '#0008b8',
@@ -2021,9 +2021,9 @@ export const color = [
       value: '#0008b8',
       type: 'color',
     },
-    name: '--fds-brand-primary-800',
+    name: '--fds-brand-alt1-800',
     attributes: {},
-    path: ['brand', 'primary', '800'],
+    path: ['brand', 'alt1', '800'],
   },
   {
     value: '#00078F',
@@ -2034,9 +2034,9 @@ export const color = [
       value: '#00078F',
       type: 'color',
     },
-    name: '--fds-brand-primary-900',
+    name: '--fds-brand-alt1-900',
     attributes: {},
-    path: ['brand', 'primary', '900'],
+    path: ['brand', 'alt1', '900'],
   },
   {
     value: '#ffeee1',
@@ -2047,9 +2047,9 @@ export const color = [
       value: '#ffeee1',
       type: 'color',
     },
-    name: '--fds-brand-secondary-100',
+    name: '--fds-brand-alt2-100',
     attributes: {},
-    path: ['brand', 'secondary', '100'],
+    path: ['brand', 'alt2', '100'],
   },
   {
     value: '#ffdcc3',
@@ -2060,9 +2060,9 @@ export const color = [
       value: '#ffdcc3',
       type: 'color',
     },
-    name: '--fds-brand-secondary-200',
+    name: '--fds-brand-alt2-200',
     attributes: {},
-    path: ['brand', 'secondary', '200'],
+    path: ['brand', 'alt2', '200'],
   },
   {
     value: '#fdd4b7',
@@ -2073,9 +2073,9 @@ export const color = [
       value: '#fdd4b7',
       type: 'color',
     },
-    name: '--fds-brand-secondary-300',
+    name: '--fds-brand-alt2-300',
     attributes: {},
-    path: ['brand', 'secondary', '300'],
+    path: ['brand', 'alt2', '300'],
   },
   {
     value: '#ffc296',
@@ -2086,9 +2086,9 @@ export const color = [
       value: '#ffc296',
       type: 'color',
     },
-    name: '--fds-brand-secondary-400',
+    name: '--fds-brand-alt2-400',
     attributes: {},
-    path: ['brand', 'secondary', '400'],
+    path: ['brand', 'alt2', '400'],
   },
   {
     value: '#ffb178',
@@ -2099,9 +2099,9 @@ export const color = [
       value: '#ffb178',
       type: 'color',
     },
-    name: '--fds-brand-secondary-500',
+    name: '--fds-brand-alt2-500',
     attributes: {},
-    path: ['brand', 'secondary', '500'],
+    path: ['brand', 'alt2', '500'],
   },
   {
     value: '#ffa869',
@@ -2112,9 +2112,9 @@ export const color = [
       value: '#ffa869',
       type: 'color',
     },
-    name: '--fds-brand-secondary-600',
+    name: '--fds-brand-alt2-600',
     attributes: {},
-    path: ['brand', 'secondary', '600'],
+    path: ['brand', 'alt2', '600'],
   },
   {
     value: '#e6975f',
@@ -2125,9 +2125,9 @@ export const color = [
       value: '#e6975f',
       type: 'color',
     },
-    name: '--fds-brand-secondary-700',
+    name: '--fds-brand-alt2-700',
     attributes: {},
-    path: ['brand', 'secondary', '700'],
+    path: ['brand', 'alt2', '700'],
   },
   {
     value: '#b3764a',
@@ -2138,9 +2138,9 @@ export const color = [
       value: '#b3764a',
       type: 'color',
     },
-    name: '--fds-brand-secondary-800',
+    name: '--fds-brand-alt2-800',
     attributes: {},
-    path: ['brand', 'secondary', '800'],
+    path: ['brand', 'alt2', '800'],
   },
   {
     value: '#9F6841',
@@ -2151,9 +2151,9 @@ export const color = [
       value: '#9F6841',
       type: 'color',
     },
-    name: '--fds-brand-secondary-900',
+    name: '--fds-brand-alt2-900',
     attributes: {},
-    path: ['brand', 'secondary', '900'],
+    path: ['brand', 'alt2', '900'],
   },
   {
     value: '#eff6f4',
@@ -2164,9 +2164,9 @@ export const color = [
       value: '#eff6f4',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-100',
+    name: '--fds-brand-alt3-100',
     attributes: {},
-    path: ['brand', 'tertiary', '100'],
+    path: ['brand', 'alt3', '100'],
   },
   {
     value: '#deece9',
@@ -2177,9 +2177,9 @@ export const color = [
       value: '#deece9',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-200',
+    name: '--fds-brand-alt3-200',
     attributes: {},
-    path: ['brand', 'tertiary', '200'],
+    path: ['brand', 'alt3', '200'],
   },
   {
     value: '#bedad2',
@@ -2190,9 +2190,9 @@ export const color = [
       value: '#bedad2',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-300',
+    name: '--fds-brand-alt3-300',
     attributes: {},
-    path: ['brand', 'tertiary', '300'],
+    path: ['brand', 'alt3', '300'],
   },
   {
     value: '#9dc7bc',
@@ -2203,9 +2203,9 @@ export const color = [
       value: '#9dc7bc',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-400',
+    name: '--fds-brand-alt3-400',
     attributes: {},
-    path: ['brand', 'tertiary', '400'],
+    path: ['brand', 'alt3', '400'],
   },
   {
     value: '#7db5a5',
@@ -2216,9 +2216,9 @@ export const color = [
       value: '#7db5a5',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-500',
+    name: '--fds-brand-alt3-500',
     attributes: {},
-    path: ['brand', 'tertiary', '500'],
+    path: ['brand', 'alt3', '500'],
   },
   {
     value: '#5ca28f',
@@ -2229,9 +2229,9 @@ export const color = [
       value: '#5ca28f',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-600',
+    name: '--fds-brand-alt3-600',
     attributes: {},
-    path: ['brand', 'tertiary', '600'],
+    path: ['brand', 'alt3', '600'],
   },
   {
     value: '#4c907e',
@@ -2242,9 +2242,9 @@ export const color = [
       value: '#4c907e',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-700',
+    name: '--fds-brand-alt3-700',
     attributes: {},
-    path: ['brand', 'tertiary', '700'],
+    path: ['brand', 'alt3', '700'],
   },
   {
     value: '#407d6d',
@@ -2255,9 +2255,9 @@ export const color = [
       value: '#407d6d',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-800',
+    name: '--fds-brand-alt3-800',
     attributes: {},
-    path: ['brand', 'tertiary', '800'],
+    path: ['brand', 'alt3', '800'],
   },
   {
     value: '#376C5E',
@@ -2268,9 +2268,9 @@ export const color = [
       value: '#376C5E',
       type: 'color',
     },
-    name: '--fds-brand-tertiary-900',
+    name: '--fds-brand-alt3-900',
     attributes: {},
-    path: ['brand', 'tertiary', '900'],
+    path: ['brand', 'alt3', '900'],
   },
 ];
 
@@ -2724,6 +2724,29 @@ export const typography = [
     attributes: {},
     path: ['typography', 'label', 'xsmall'],
   },
+  {
+    value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'",
+    type: 'typography',
+    filePath: '../../design-tokens/Base/Semantic.json',
+    isSource: false,
+    original: {
+      value: {
+        fontFamily: '{fontFamilies.inter}',
+        fontWeight: '{fontWeights.regular}',
+        lineHeight: '{lineHeights.300}',
+        fontSize: '{font-size.f1}',
+        letterSpacing: '{letterSpacing.1}',
+        paragraphSpacing: '{paragraphSpacing.0}',
+        paragraphIndent: '{paragraphIndent.0}',
+        textCase: '{textCase.none}',
+        textDecoration: '{textDecoration.none}',
+      },
+      type: 'typography',
+    },
+    name: '--fds-typography-error_message-large',
+    attributes: {},
+    path: ['typography', 'error_message', 'large'],
+  },
   {
     value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'",
     type: 'typography',
diff --git a/tsconfig.json b/tsconfig.json
index 358db46575..1540551ee6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
   //  "exclude": ["src/components/*.test.tsx", "src/components/*.stories.tsx"],
   "compilerOptions": {
+    "target": "es2020",
     "module": "es2020",
     "lib": ["dom", "esnext"],
     "importHelpers": true,
@@ -23,7 +24,7 @@
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "target": "es2016",
+
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "ts-node": {
diff --git a/yarn.lock b/yarn.lock
index bd12acd6e4..a45cf3712a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,7 +5,14 @@ __metadata:
   version: 6
   cacheKey: 8
 
-"@adobe/css-tools@npm:^4.0.1":
+"@aashutoshrathi/word-wrap@npm:^1.2.3":
+  version: 1.2.6
+  resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
+  checksum: ada901b9e7c680d190f1d012c84217ce0063d8f5c5a7725bb91ec3c5ed99bb7572680eb2d2938a531ccbaec39a95422fcd8a6b4a13110c7d98dd75402f66a0cd
+  languageName: node
+  linkType: hard
+
+"@adobe/css-tools@npm:^4.0.1, @adobe/css-tools@npm:^4.3.0":
   version: 4.3.1
   resolution: "@adobe/css-tools@npm:4.3.1"
   checksum: ad43456379ff391132aff687ece190cb23ea69395e23c9b96690eeabe2468da89a4aaf266e4f8b6eaab53db3d1064107ce0f63c3a974e864f4a04affc768da3f
@@ -82,7 +89,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.22.10":
+"@babel/code-frame@npm:^7.22.10, @babel/code-frame@npm:^7.22.13":
   version: 7.22.13
   resolution: "@babel/code-frame@npm:7.22.13"
   dependencies:
@@ -101,7 +108,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.0, @babel/compat-data@npm:^7.20.1":
+"@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.0":
   version: 7.20.5
   resolution: "@babel/compat-data@npm:7.20.5"
   checksum: 523790c43ef6388fae91d1ca9acf1ab0e1b22208dcd39c0e5e7a6adf0b48a133f1831be8d5931a72ecd48860f3e3fb777cb89840794abd8647a5c8e5cfab484e
@@ -122,6 +129,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.22.20":
+  version: 7.22.20
+  resolution: "@babel/compat-data@npm:7.22.20"
+  checksum: efedd1d18878c10fde95e4d82b1236a9aba41395ef798cbb651f58dbf5632dbff475736c507b8d13d4c8f44809d41c0eb2ef0d694283af9ba5dd8339b6dab451
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.22.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9":
   version: 7.22.9
   resolution: "@babel/compat-data@npm:7.22.9"
@@ -175,6 +189,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.21.3":
+  version: 7.23.0
+  resolution: "@babel/core@npm:7.23.0"
+  dependencies:
+    "@ampproject/remapping": ^2.2.0
+    "@babel/code-frame": ^7.22.13
+    "@babel/generator": ^7.23.0
+    "@babel/helper-compilation-targets": ^7.22.15
+    "@babel/helper-module-transforms": ^7.23.0
+    "@babel/helpers": ^7.23.0
+    "@babel/parser": ^7.23.0
+    "@babel/template": ^7.22.15
+    "@babel/traverse": ^7.23.0
+    "@babel/types": ^7.23.0
+    convert-source-map: ^2.0.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.3
+    semver: ^6.3.1
+  checksum: cebd9b48dbc970a7548522f207f245c69567e5ea17ebb1a4e4de563823cf20a01177fe8d2fe19b6e1461361f92fa169fd0b29f8ee9d44eeec84842be1feee5f2
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:^7.22.0":
   version: 7.22.9
   resolution: "@babel/core@npm:7.22.9"
@@ -280,6 +317,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/generator@npm:7.23.0"
+  dependencies:
+    "@babel/types": ^7.23.0
+    "@jridgewell/gen-mapping": ^0.3.2
+    "@jridgewell/trace-mapping": ^0.3.17
+    jsesc: ^2.5.1
+  checksum: 8efe24adad34300f1f8ea2add420b28171a646edc70f2a1b3e1683842f23b8b7ffa7e35ef0119294e1901f45bfea5b3dc70abe1f10a1917ccdfb41bed69be5f1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
@@ -317,7 +366,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.18.9, @babel/helper-compilation-targets@npm:^7.20.0":
+"@babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.18.9":
   version: 7.20.0
   resolution: "@babel/helper-compilation-targets@npm:7.20.0"
   dependencies:
@@ -374,6 +423,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/helper-compilation-targets@npm:7.22.15"
+  dependencies:
+    "@babel/compat-data": ^7.22.9
+    "@babel/helper-validator-option": ^7.22.15
+    browserslist: ^4.21.9
+    lru-cache: ^5.1.1
+    semver: ^6.3.1
+  checksum: ce85196769e091ae54dd39e4a80c2a9df1793da8588e335c383d536d54f06baf648d0a08fc873044f226398c4ded15c4ae9120ee18e7dfd7c639a68e3cdc9980
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9":
   version: 7.22.9
   resolution: "@babel/helper-compilation-targets@npm:7.22.9"
@@ -389,7 +451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.20.2, @babel/helper-create-class-features-plugin@npm:^7.20.5":
+"@babel/helper-create-class-features-plugin@npm:^7.18.6":
   version: 7.20.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.20.5"
   dependencies:
@@ -424,6 +486,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-environment-visitor": ^7.22.5
+    "@babel/helper-function-name": ^7.22.5
+    "@babel/helper-member-expression-to-functions": ^7.22.15
+    "@babel/helper-optimise-call-expression": ^7.22.5
+    "@babel/helper-replace-supers": ^7.22.9
+    "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    semver: ^6.3.1
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 52c500d8d164abb3a360b1b7c4b8fff77bc4a5920d3a2b41ae6e1d30617b0dc0b972c1f5db35b1752007e04a748908b4a99bc872b73549ae837e87dcdde005a3
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.9
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.9"
@@ -513,6 +594,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-environment-visitor@npm:^7.22.20":
+  version: 7.22.20
+  resolution: "@babel/helper-environment-visitor@npm:7.22.20"
+  checksum: d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69
+  languageName: node
+  linkType: hard
+
 "@babel/helper-environment-visitor@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-environment-visitor@npm:7.22.5"
@@ -559,6 +647,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-function-name@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/helper-function-name@npm:7.23.0"
+  dependencies:
+    "@babel/template": ^7.22.15
+    "@babel/types": ^7.23.0
+  checksum: e44542257b2d4634a1f979244eb2a4ad8e6d75eb6761b4cfceb56b562f7db150d134bc538c8e6adca3783e3bc31be949071527aa8e3aab7867d1ad2d84a26e10
+  languageName: node
+  linkType: hard
+
 "@babel/helper-hoist-variables@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-hoist-variables@npm:7.18.6"
@@ -595,6 +693,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-member-expression-to-functions@npm:^7.22.15":
+  version: 7.23.0
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0"
+  dependencies:
+    "@babel/types": ^7.23.0
+  checksum: 494659361370c979ada711ca685e2efe9460683c36db1b283b446122596602c901e291e09f2f980ecedfe6e0f2bd5386cb59768285446530df10c14df1024e75
+  languageName: node
+  linkType: hard
+
 "@babel/helper-member-expression-to-functions@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-member-expression-to-functions@npm:7.22.5"
@@ -622,6 +729,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/helper-module-imports@npm:7.22.15"
+  dependencies:
+    "@babel/types": ^7.22.15
+  checksum: ecd7e457df0a46f889228f943ef9b4a47d485d82e030676767e6a2fdcbdaa63594d8124d4b55fd160b41c201025aec01fc27580352b1c87a37c9c6f33d116702
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-imports@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-module-imports@npm:7.22.5"
@@ -631,7 +747,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.18.6, @babel/helper-module-transforms@npm:^7.19.6":
+"@babel/helper-module-transforms@npm:^7.18.6":
   version: 7.20.2
   resolution: "@babel/helper-module-transforms@npm:7.20.2"
   dependencies:
@@ -694,6 +810,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/helper-module-transforms@npm:7.23.0"
+  dependencies:
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-module-imports": ^7.22.15
+    "@babel/helper-simple-access": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/helper-validator-identifier": ^7.22.20
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 6e2afffb058cf3f8ce92f5116f710dda4341c81cfcd872f9a0197ea594f7ce0ab3cb940b0590af2fe99e60d2e5448bfba6bca8156ed70a2ed4be2adc8586c891
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -733,7 +864,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-remap-async-to-generator@npm:^7.18.6, @babel/helper-remap-async-to-generator@npm:^7.18.9":
+"@babel/helper-remap-async-to-generator@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/helper-remap-async-to-generator@npm:7.18.9"
   dependencies:
@@ -800,7 +931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-simple-access@npm:^7.19.4, @babel/helper-simple-access@npm:^7.20.2":
+"@babel/helper-simple-access@npm:^7.20.2":
   version: 7.20.2
   resolution: "@babel/helper-simple-access@npm:7.20.2"
   dependencies:
@@ -827,7 +958,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-skip-transparent-expression-wrappers@npm:^7.18.9, @babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0":
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0":
   version: 7.20.0
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.20.0"
   dependencies:
@@ -891,6 +1022,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.22.20":
+  version: 7.22.20
+  resolution: "@babel/helper-validator-identifier@npm:7.22.20"
+  checksum: 136412784d9428266bcdd4d91c32bcf9ff0e8d25534a9d94b044f77fe76bc50f941a90319b05aafd1ec04f7d127cd57a179a3716009ff7f3412ef835ada95bdc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-validator-identifier@npm:7.22.5"
@@ -912,6 +1050,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/helper-validator-option@npm:7.22.15"
+  checksum: 68da52b1e10002a543161494c4bc0f4d0398c8fdf361d5f7f4272e95c45d5b32d974896d44f6a0ea7378c9204988879d73613ca683e13bd1304e46d25ff67a8d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-validator-option@npm:7.22.5"
@@ -986,6 +1131,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.23.0":
+  version: 7.23.1
+  resolution: "@babel/helpers@npm:7.23.1"
+  dependencies:
+    "@babel/template": ^7.22.15
+    "@babel/traverse": ^7.23.0
+    "@babel/types": ^7.23.0
+  checksum: acfc345102045c24ea2a4d60e00dcf8220e215af3add4520e2167700661338e6a80bd56baf44bb764af05ec6621101c9afc315dc107e18c61fa6da8acbdbb893
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/highlight@npm:7.18.6"
@@ -1055,6 +1211,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/parser@npm:7.23.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 453fdf8b9e2c2b7d7b02139e0ce003d1af21947bbc03eb350fb248ee335c9b85e4ab41697ddbdd97079698de825a265e45a0846bb2ed47a2c7c1df833f42a354
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.22.5, @babel/parser@npm:^7.22.7":
   version: 7.22.7
   resolution: "@babel/parser@npm:7.22.7"
@@ -1075,27 +1240,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.5"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.15"
   dependencies:
     "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 1e353a060fb2cd8f1256d28cd768f16fb02513f905b9b6d656fb0242c96c341a196fa188b27c2701506a6e27515359fbcc1a5ca7fa8b9b530cf88fbd137baefc
+  checksum: 8910ca21a7ec7c06f7b247d4b86c97c5aa15ef321518f44f6f490c5912fdf82c605aaa02b90892e375d82ccbedeadfdeadd922c1b836c9dd4c596871bf654753
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.18.9"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.5"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.18.9
-    "@babel/plugin-proposal-optional-chaining": ^7.18.9
+    "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
-    "@babel/core": ^7.13.0
-  checksum: 93abb5cb179a13db171bfc2cdf79489598f43c50cc174f97a2b7bb1d44d24ade7109665a20cf4e317ad6c1c730f036f06478f7c7e789b4240be1abdb60d6452f
+    "@babel/core": ^7.0.0
+  checksum: 1e353a060fb2cd8f1256d28cd768f16fb02513f905b9b6d656fb0242c96c341a196fa188b27c2701506a6e27515359fbcc1a5ca7fa8b9b530cf88fbd137baefc
   languageName: node
   linkType: hard
 
@@ -1112,30 +1275,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.22.5"
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.22.15"
   dependencies:
     "@babel/helper-plugin-utils": ^7.22.5
     "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
-    "@babel/plugin-transform-optional-chaining": ^7.22.5
+    "@babel/plugin-transform-optional-chaining": ^7.22.15
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 16e7a5f3bf2f2ac0ca032a70bf0ebd7e886d84dbb712b55c0643c04c495f0f221fbcbca14b5f8f8027fa6c87a3dafae0934022ad2b409384af6c5c356495b7bd
+  checksum: fbefedc0da014c37f1a50a8094ce7dbbf2181ae93243f23d6ecba2499b5b20196c2124d6a4dfe3e9e0125798e80593103e456352a4beb4e5c6f7c75efb80fdac
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-async-generator-functions@npm:^7.20.1":
-  version: 7.20.1
-  resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.20.1"
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.22.5"
   dependencies:
-    "@babel/helper-environment-visitor": ^7.18.9
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/helper-remap-async-to-generator": ^7.18.9
-    "@babel/plugin-syntax-async-generators": ^7.8.4
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
+    "@babel/plugin-transform-optional-chaining": ^7.22.5
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 518483a68c5618932109913eb7316ed5e656c575cbd9d22667bc0451e35a1be45f8eaeb8e2065834b36c8a93c4840f78cebf8f1d067b07c422f7be16d58eca60
+    "@babel/core": ^7.13.0
+  checksum: 16e7a5f3bf2f2ac0ca032a70bf0ebd7e886d84dbb712b55c0643c04c495f0f221fbcbca14b5f8f8027fa6c87a3dafae0934022ad2b409384af6c5c356495b7bd
   languageName: node
   linkType: hard
 
@@ -1165,19 +1327,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-static-block@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-class-static-block@npm:7.18.6"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/plugin-syntax-class-static-block": ^7.14.5
-  peerDependencies:
-    "@babel/core": ^7.12.0
-  checksum: b8d7ae99ed5ad784f39e7820e3ac03841f91d6ed60ab4a98c61d6112253da36013e12807bae4ffed0ef3cb318e47debac112ed614e03b403fb8b075b09a828ee
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-class-static-block@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/plugin-proposal-class-static-block@npm:7.21.0"
@@ -1227,18 +1376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-logical-assignment-operators@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/plugin-proposal-logical-assignment-operators@npm:7.18.9"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
-    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: dd87fa4a48c6408c5e85dbd6405a65cc8fe909e3090030df46df90df64cdf3e74007381a58ed87608778ee597eff7395d215274009bb3f5d8964b2db5557754f
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-logical-assignment-operators@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-logical-assignment-operators@npm:7.20.7"
@@ -1275,21 +1412,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-object-rest-spread@npm:^7.20.2":
-  version: 7.20.2
-  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.2"
-  dependencies:
-    "@babel/compat-data": ^7.20.1
-    "@babel/helper-compilation-targets": ^7.20.0
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
-    "@babel/plugin-transform-parameters": ^7.20.1
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 9764d1a4735fcd384fdb9b6c6ccb20d1bea2f88f648640d26ce5d9cd5880ce1e389d2f852d7bea7e86ff343726225dc16e1deb92c7b3dc5c5721ed905a602318
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7"
@@ -1330,19 +1452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-optional-chaining@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/plugin-proposal-optional-chaining@npm:7.18.9"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.18.9
-    "@babel/plugin-syntax-optional-chaining": ^7.8.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: f2db40e26172f07c50b635cb61e1f36165de3ba868fcf608d967642f0d044b7c6beb0e7ecf17cbd421144b99e1eae7ad6031ded92925343bb0ed1d08707b514f
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-private-methods@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-private-methods@npm:7.18.6"
@@ -1364,20 +1473,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-property-in-object@npm:^7.18.6":
-  version: 7.20.5
-  resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.20.5"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-create-class-features-plugin": ^7.20.5
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 513b5e0e2c1b2846be5336cf680e932ae17924ef885aa1429e1a4f7924724bdd99b15f28d67187d0a006d5f18a0c4b61d96c3ecb4902fed3c8fe2f0abfc9753a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-private-property-in-object@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.0"
@@ -1679,26 +1774,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6"
+"@babel/plugin-syntax-typescript@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-typescript@npm:7.22.5"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: a651d700fe63ff0ddfd7186f4ebc24447ca734f114433139e3c027bc94a900d013cf1ef2e2db8430425ba542e39ae160c3b05f06b59fd4656273a3df97679e9c
+    "@babel/core": ^7.0.0-0
+  checksum: 8ab7718fbb026d64da93681a57797d60326097fd7cb930380c8bffd9eb101689e90142c760a14b51e8e69c88a73ba3da956cb4520a3b0c65743aee5c71ef360a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.18.6":
+"@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6":
   version: 7.18.6
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.18.6"
+  resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6"
   dependencies:
+    "@babel/helper-create-regexp-features-plugin": ^7.18.6
     "@babel/helper-plugin-utils": ^7.18.6
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 900f5c695755062b91eec74da6f9092f40b8fada099058b92576f1e23c55e9813ec437051893a9b3c05cefe39e8ac06303d4a91b384e1c03dd8dc1581ea11602
+    "@babel/core": ^7.0.0
+  checksum: a651d700fe63ff0ddfd7186f4ebc24447ca734f114433139e3c027bc94a900d013cf1ef2e2db8430425ba542e39ae160c3b05f06b59fd4656273a3df97679e9c
   languageName: node
   linkType: hard
 
@@ -1738,16 +1833,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.18.6"
+"@babel/plugin-transform-async-generator-functions@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.22.15"
   dependencies:
-    "@babel/helper-module-imports": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/helper-remap-async-to-generator": ^7.18.6
+    "@babel/helper-environment-visitor": ^7.22.5
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-remap-async-to-generator": ^7.22.9
+    "@babel/plugin-syntax-async-generators": ^7.8.4
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: c2cca47468cf1aeefdc7ec35d670e195c86cee4de28a1970648c46a88ce6bd1806ef0bab27251b9e7fb791bb28a64dcd543770efd899f28ee5f7854e64e873d3
+  checksum: fad98786b446ce63bde0d14a221e2617eef5a7bbca62b49d96f16ab5e1694521234cfba6145b830fbf9af16d60a8a3dbf148e8694830bd91796fe333b0599e73
   languageName: node
   linkType: hard
 
@@ -1799,17 +1895,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.20.2":
-  version: 7.20.5
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.20.5"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.20.2
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 03606bc6710c15cd4e4d1163e1cbab08799f852a5dd55a1f7e115032e9406ac9430ddc0cb6d09a51a4095446985640411f60683c6fcea9bc1a7b202462022e1c
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-block-scoping@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/plugin-transform-block-scoping@npm:7.21.0"
@@ -1832,6 +1917,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-block-scoping@npm:^7.22.15":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.0"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0cfe925cc3b5a3ad407e2253fab3ceeaa117a4b291c9cb245578880872999bca91bd83ffa0128ae9ca356330702e1ef1dcb26804f28d2cef678239caf629f73e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-class-properties@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-class-properties@npm:7.22.5"
@@ -1844,35 +1940,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.22.5"
+"@babel/plugin-transform-class-static-block@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.22.11"
   dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.22.5
+    "@babel/helper-create-class-features-plugin": ^7.22.11
     "@babel/helper-plugin-utils": ^7.22.5
     "@babel/plugin-syntax-class-static-block": ^7.14.5
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: bc48b92dbaf625a14f2bf62382384eef01e0515802426841636ae9146e27395d068c7a8a45e9e15699491b0a01d990f38f179cbc9dc89274a393f85648772f12
+  checksum: 69f040506fad66f1c6918d288d0e0edbc5c8a07c8b4462c1184ad2f9f08995d68b057126c213871c0853ae0c72afc60ec87492049dfacb20902e32346a448bcb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.20.2":
-  version: 7.20.2
-  resolution: "@babel/plugin-transform-classes@npm:7.20.2"
+"@babel/plugin-transform-class-static-block@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.22.5"
   dependencies:
-    "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-compilation-targets": ^7.20.0
-    "@babel/helper-environment-visitor": ^7.18.9
-    "@babel/helper-function-name": ^7.19.0
-    "@babel/helper-optimise-call-expression": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/helper-replace-supers": ^7.19.1
-    "@babel/helper-split-export-declaration": ^7.18.6
-    globals: ^11.1.0
+    "@babel/helper-create-class-features-plugin": ^7.22.5
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-class-static-block": ^7.14.5
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 57f3467a8eb7853cdb61cda963cfb6c6568ad276d77c9de2ff5a2194650010217aa318ef3733975537c6fb906b73a019afb6ea650b01852e7d2e1fab4034361b
+    "@babel/core": ^7.12.0
+  checksum: bc48b92dbaf625a14f2bf62382384eef01e0515802426841636ae9146e27395d068c7a8a45e9e15699491b0a01d990f38f179cbc9dc89274a393f85648772f12
   languageName: node
   linkType: hard
 
@@ -1895,33 +1985,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.22.6":
-  version: 7.22.6
-  resolution: "@babel/plugin-transform-classes@npm:7.22.6"
+"@babel/plugin-transform-classes@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-classes@npm:7.22.15"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.22.5
-    "@babel/helper-compilation-targets": ^7.22.6
+    "@babel/helper-compilation-targets": ^7.22.15
     "@babel/helper-environment-visitor": ^7.22.5
     "@babel/helper-function-name": ^7.22.5
     "@babel/helper-optimise-call-expression": ^7.22.5
     "@babel/helper-plugin-utils": ^7.22.5
-    "@babel/helper-replace-supers": ^7.22.5
+    "@babel/helper-replace-supers": ^7.22.9
     "@babel/helper-split-export-declaration": ^7.22.6
     globals: ^11.1.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 8380e855c01033dbc7460d9acfbc1fc37c880350fa798c2de8c594ef818ade0e4c96173ec72f05f2a4549d8d37135e18cb62548352d51557b45a0fb4388d2f3f
+  checksum: d3f4d0c107dd8a3557ea3575cc777fab27efa92958b41e4a9822f7499725c1f554beae58855de16ddec0a7b694e45f59a26cea8fbde4275563f72f09c6e039a0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.18.9"
+"@babel/plugin-transform-classes@npm:^7.22.6":
+  version: 7.22.6
+  resolution: "@babel/plugin-transform-classes@npm:7.22.6"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-compilation-targets": ^7.22.6
+    "@babel/helper-environment-visitor": ^7.22.5
+    "@babel/helper-function-name": ^7.22.5
+    "@babel/helper-optimise-call-expression": ^7.22.5
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-replace-supers": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    globals: ^11.1.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: a6bfbea207827d77592628973c0e8cc3319db636506bdc6e81e21582de2e767890e6975b382d0511e9ec3773b9f43691185df90832883bbf9251f688d27fbc1d
+  checksum: 8380e855c01033dbc7460d9acfbc1fc37c880350fa798c2de8c594ef818ade0e4c96173ec72f05f2a4549d8d37135e18cb62548352d51557b45a0fb4388d2f3f
   languageName: node
   linkType: hard
 
@@ -1949,17 +2047,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.20.2":
-  version: 7.20.2
-  resolution: "@babel/plugin-transform-destructuring@npm:7.20.2"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.20.2
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 09033e09b28ca1b0d46a8d82f5a677b1d718a739b3c199886908c3ef1af23369317d0c429b21507d480ee82721c15892a9893be18e50ad6fc219e69312f4b097
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-destructuring@npm:^7.21.3":
   version: 7.21.3
   resolution: "@babel/plugin-transform-destructuring@npm:7.21.3"
@@ -1982,6 +2069,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-destructuring@npm:^7.22.15":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-destructuring@npm:7.23.0"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: cd6dd454ccc2766be551e4f8a04b1acc2aa539fa19e5c7501c56cc2f8cc921dd41a7ffb78455b4c4b2f954fcab8ca4561ba7c9c7bd5af9f19465243603d18cc3
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dotall-regex@npm:^7.18.6, @babel/plugin-transform-dotall-regex@npm:^7.4.4":
   version: 7.18.6
   resolution: "@babel/plugin-transform-dotall-regex@npm:7.18.6"
@@ -2028,6 +2126,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-dynamic-import@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-dynamic-import": ^7.8.3
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 78fc9c532210bf9e8f231747f542318568ac360ee6c27e80853962c984283c73da3f8f8aebe83c2096090a435b356b092ed85de617a156cbe0729d847632be45
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dynamic-import@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-dynamic-import@npm:7.22.5"
@@ -2064,6 +2174,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-export-namespace-from@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 73af5883a321ed56a4bfd43c8a7de0164faebe619287706896fc6ee2f7a4e69042adaa1338c0b8b4bdb9f7e5fdceb016fb1d40694cb43ca3b8827429e8aac4bf
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-export-namespace-from@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-export-namespace-from@npm:7.22.5"
@@ -2100,25 +2222,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.18.8":
-  version: 7.18.8
-  resolution: "@babel/plugin-transform-for-of@npm:7.18.8"
+"@babel/plugin-transform-for-of@npm:^7.21.5":
+  version: 7.21.5
+  resolution: "@babel/plugin-transform-for-of@npm:7.21.5"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.21.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: ca64c623cf0c7a80ab6f07ebd3e6e4ade95e2ae806696f70b43eafe6394fa8ce21f2b1ffdd15df2067f7363d2ecfe26472a97c6c774403d2163fa05f50c98f17
+  checksum: b6666b24e8ca1ffbf7452a0042149724e295965aad55070dc9ee992451d69d855fc9db832c1c5fb4d3dc532f4a18a2974d5f8524f5c2250dda888d05f6f3cadb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/plugin-transform-for-of@npm:7.21.5"
+"@babel/plugin-transform-for-of@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-for-of@npm:7.22.15"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.21.5
+    "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: b6666b24e8ca1ffbf7452a0042149724e295965aad55070dc9ee992451d69d855fc9db832c1c5fb4d3dc532f4a18a2974d5f8524f5c2250dda888d05f6f3cadb
+  checksum: f395ae7bce31e14961460f56cf751b5d6e37dd27d7df5b1f4e49fec1c11b6f9cf71991c7ffbe6549878591e87df0d66af798cf26edfa4bfa6b4c3dba1fb2f73a
   languageName: node
   linkType: hard
 
@@ -2159,6 +2281,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-json-strings@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-json-strings@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-json-strings": ^7.8.3
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 50665e5979e66358c50e90a26db53c55917f78175127ac2fa05c7888d156d418ffb930ec0a109353db0a7c5f57c756ce01bfc9825d24cbfd2b3ec453f2ed8cba
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-json-strings@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-json-strings@npm:7.22.5"
@@ -2193,6 +2327,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: c664e9798e85afa7f92f07b867682dee7392046181d82f5d21bae6f2ca26dfe9c8375cdc52b7483c3fc09a983c1989f60eff9fbc4f373b0c0a74090553d05739
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-logical-assignment-operators@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.22.5"
@@ -2227,18 +2373,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.19.6":
-  version: 7.19.6
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.19.6"
-  dependencies:
-    "@babel/helper-module-transforms": ^7.19.6
-    "@babel/helper-plugin-utils": ^7.19.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 4236aad970025bc10c772c1589b1e2eab8b7681933bb5ffa6e395d4c1a52532b28c47c553e3011b4272ea81e5ab39fe969eb5349584e8390e59771055c467d42
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-modules-amd@npm:^7.20.11":
   version: 7.20.11
   resolution: "@babel/plugin-transform-modules-amd@npm:7.20.11"
@@ -2276,19 +2410,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.19.6":
-  version: 7.19.6
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.19.6"
-  dependencies:
-    "@babel/helper-module-transforms": ^7.19.6
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/helper-simple-access": ^7.19.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 85d46945ab5ba3fff89e962d560a5d40253f228b9659a697683db3de07c0236e8cd60e5eb41958007359951a42bc268bf32350fcdb5b4a86f58dff1e032c096e
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-modules-commonjs@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.21.5"
@@ -2302,30 +2423,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.22.5"
+"@babel/plugin-transform-modules-commonjs@npm:^7.22.15, @babel/plugin-transform-modules-commonjs@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.0"
   dependencies:
-    "@babel/helper-module-transforms": ^7.22.5
+    "@babel/helper-module-transforms": ^7.23.0
     "@babel/helper-plugin-utils": ^7.22.5
     "@babel/helper-simple-access": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 2067aca8f6454d54ffcce69b02c457cfa61428e11372f6a1d99ff4fcfbb55c396ed2ca6ca886bf06c852e38c1a205b8095921b2364fd0243f3e66bc1dda61caa
+  checksum: 7fb25997194053e167c4207c319ff05362392da841bd9f42ddb3caf9c8798a5d203bd926d23ddf5830fdf05eddc82c2810f40d1287e3a4f80b07eff13d1024b5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.19.6":
-  version: 7.19.6
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.19.6"
+"@babel/plugin-transform-modules-commonjs@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.22.5"
   dependencies:
-    "@babel/helper-hoist-variables": ^7.18.6
-    "@babel/helper-module-transforms": ^7.19.6
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/helper-validator-identifier": ^7.19.1
+    "@babel/helper-module-transforms": ^7.22.5
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-simple-access": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 8526431cc81ea3eb232ad50862d0ed1cbb422b5251d14a8d6610d0ca0617f6e75f35179e98eb1235d0cccb980120350b9f112594e5646dd45378d41eaaf87342
+  checksum: 2067aca8f6454d54ffcce69b02c457cfa61428e11372f6a1d99ff4fcfbb55c396ed2ca6ca886bf06c852e38c1a205b8095921b2364fd0243f3e66bc1dda61caa
   languageName: node
   linkType: hard
 
@@ -2343,6 +2463,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-systemjs@npm:^7.22.11":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.0"
+  dependencies:
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-module-transforms": ^7.23.0
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-validator-identifier": ^7.22.20
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 2d481458b22605046badea2317d5cc5c94ac3031c2293e34c96f02063f5b02af0979c4da6a8fbc67cc249541575dc9c6d710db6b919ede70b7337a22d9fd57a7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-systemjs@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.22.5"
@@ -2381,7 +2515,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.19.1, @babel/plugin-transform-named-capturing-groups-regex@npm:^7.20.5":
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.20.5":
   version: 7.20.5
   resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.20.5"
   dependencies:
@@ -2427,6 +2561,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 167babecc8b8fe70796a7b7d34af667ebbf43da166c21689502e5e8cc93180b7a85979c77c9f64b7cce431b36718bd0a6df9e5e0ffea4ae22afb22cfef886372
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.22.5"
@@ -2439,6 +2585,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-numeric-separator@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-numeric-separator": ^7.10.4
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: af064d06a4a041767ec396a5f258103f64785df290e038bba9f0ef454e6c914f2ac45d862bbdad8fac2c7ad47fa4e95356f29053c60c100a0160b02a995fe2a3
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-numeric-separator@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-numeric-separator@npm:7.22.5"
@@ -2451,6 +2609,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-object-rest-spread@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.22.15"
+  dependencies:
+    "@babel/compat-data": ^7.22.9
+    "@babel/helper-compilation-targets": ^7.22.15
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
+    "@babel/plugin-transform-parameters": ^7.22.15
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 62197a6f12289c1c1bd57f3bed9f0f765ca32390bfe91e0b5561dd94dd9770f4480c4162dec98da094bc0ba99d2c2ebba68de47c019454041b0b7a68ba2ec66d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-rest-spread@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.22.5"
@@ -2490,6 +2663,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-catch-binding@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-optional-catch-binding": ^7.8.3
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: f17abd90e1de67c84d63afea29c8021c74abb2794d3a6eeafb0bbe7372d3db32aefca386e392116ec63884537a4a2815d090d26264d259bacc08f6e3ed05294c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-optional-catch-binding@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.22.5"
@@ -2515,27 +2700,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.22.5":
-  version: 7.22.6
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.22.6"
+"@babel/plugin-transform-optional-chaining@npm:^7.22.15":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.0"
   dependencies:
     "@babel/helper-plugin-utils": ^7.22.5
     "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
     "@babel/plugin-syntax-optional-chaining": ^7.8.3
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 9713f7920ed04090c149fc5ec024dd1638e8b97aa4ae3753b93072d84103b8de380afb96d6cf03e53b285420db4f705f3ac13149c6fd54f322b61dc19e33c54f
+  checksum: f702634f2b97e5260dbec0d4bde05ccb6f4d96d7bfa946481aeacfa205ca846cb6e096a38312f9d51fdbdac1f258f211138c5f7075952e46a5bf8574de6a1329
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.20.1":
-  version: 7.20.5
-  resolution: "@babel/plugin-transform-parameters@npm:7.20.5"
+"@babel/plugin-transform-optional-chaining@npm:^7.22.5":
+  version: 7.22.6
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.22.6"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
+    "@babel/plugin-syntax-optional-chaining": ^7.8.3
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: fa588b0d8551e3e0cfde5fcb9d63a7acd38da199bee1851dd7e2abb34b3d754684defb1209a5669ecf0076d3d17ddc375b3f107da770b550a30402e4b9d7aa2f
+  checksum: 9713f7920ed04090c149fc5ec024dd1638e8b97aa4ae3753b93072d84103b8de380afb96d6cf03e53b285420db4f705f3ac13149c6fd54f322b61dc19e33c54f
   languageName: node
   linkType: hard
 
@@ -2550,6 +2737,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-parameters@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-parameters@npm:7.22.15"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 541188bb7d1876cad87687b5c7daf90f63d8208ae83df24acb1e2b05020ad1c78786b2723ca4054a83fcb74fb6509f30c4cacc5b538ee684224261ad5fb047c1
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-parameters@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-parameters@npm:7.22.5"
@@ -2573,6 +2771,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-private-property-in-object@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.22.11"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-create-class-features-plugin": ^7.22.11
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 4d029d84901e53c46dead7a46e2990a7bc62470f4e4ca58a0d063394f86652fd58fe4eea1eb941da3669cd536b559b9d058b342b59300026346b7a2a51badac8
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-private-property-in-object@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-private-property-in-object@npm:7.22.5"
@@ -2609,14 +2821,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-constant-elements@npm:^7.18.12":
-  version: 7.20.2
-  resolution: "@babel/plugin-transform-react-constant-elements@npm:7.20.2"
+"@babel/plugin-transform-react-constant-elements@npm:^7.21.3":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-constant-elements@npm:7.22.5"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 7b041b726e7c14b8c26a0dd240defac5f93a1f449371c6bdc5e6b46d581211300cc1a79da4140bdf20347f49e175dcb4f469812399206864024d1fdc81171193
+  checksum: 596db90e37174dd703f4859fef3c86156a7c8564d8351168ac6fdca79c912ef8b8746ae04516ac3909d2cc750702d58d451badacb3c54ea998938ad05d99f9d2
   languageName: node
   linkType: hard
 
@@ -2718,18 +2930,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.18.6":
-  version: 7.20.5
-  resolution: "@babel/plugin-transform-regenerator@npm:7.20.5"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.20.2
-    regenerator-transform: ^0.15.1
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 13164861e71fb23d84c6270ef5330b03c54d5d661c2c7468f28e21c4f8598558ca0c8c3cb1d996219352946e849d270a61372bc93c8fbe9676e78e3ffd0dea07
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-regenerator@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/plugin-transform-regenerator@npm:7.21.5"
@@ -2791,22 +2991,10 @@ __metadata:
   version: 7.22.5
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.22.5"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.22.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: a5ac902c56ea8effa99f681340ee61bac21094588f7aef0bc01dff98246651702e677552fa6d10e548c4ac22a3ffad047dd2f8c8f0540b68316c2c203e56818b
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-spread@npm:^7.19.0":
-  version: 7.19.0
-  resolution: "@babel/plugin-transform-spread@npm:7.19.0"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.18.9
+    "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: e73a4deb095999185e70b524d0ff4e35df50fcda58299e700a6149a15bbc1a9b369ef1cef384e15a54b3c3ce316cc0f054dbf249dcd0d1ca59f4281dd4df9718
+  checksum: a5ac902c56ea8effa99f681340ee61bac21094588f7aef0bc01dff98246651702e677552fa6d10e548c4ac22a3ffad047dd2f8c8f0540b68316c2c203e56818b
   languageName: node
   linkType: hard
 
@@ -2900,19 +3088,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.18.6":
-  version: 7.20.2
-  resolution: "@babel/plugin-transform-typescript@npm:7.20.2"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.20.2
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-typescript": ^7.20.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 14434eb77cb3c8c4187a055eabdd5ff8b3e90a37ac95ecc7c9007ea8fc5660e0652c445646a2a25836a02d91944e0dc1e8b58ef55b063a901e54a24fdb4168af
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-typescript@npm:^7.21.3":
   version: 7.21.3
   resolution: "@babel/plugin-transform-typescript@npm:7.21.3"
@@ -2927,14 +3102,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.18.10":
-  version: 7.18.10
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.18.10"
+"@babel/plugin-transform-typescript@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-typescript@npm:7.22.15"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-create-class-features-plugin": ^7.22.15
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-typescript": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: f5baca55cb3c11bc08ec589f5f522d85c1ab509b4d11492437e45027d64ae0b22f0907bd1381e8d7f2a436384bb1f9ad89d19277314242c5c2671a0f91d0f9cd
+  checksum: c5d96cdbf0e1512707aa1c1e3ac6b370a25fd9c545d26008ce44eb13a47bd7fd67a1eb799c98b5ccc82e33a345fda55c0055e1fe3ed97646ed405dd13020b226
   languageName: node
   linkType: hard
 
@@ -3008,37 +3186,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.19.4":
-  version: 7.20.2
-  resolution: "@babel/preset-env@npm:7.20.2"
+"@babel/preset-env@npm:^7.20.2":
+  version: 7.22.20
+  resolution: "@babel/preset-env@npm:7.22.20"
   dependencies:
-    "@babel/compat-data": ^7.20.1
-    "@babel/helper-compilation-targets": ^7.20.0
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/helper-validator-option": ^7.18.6
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.18.6
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.18.9
-    "@babel/plugin-proposal-async-generator-functions": ^7.20.1
-    "@babel/plugin-proposal-class-properties": ^7.18.6
-    "@babel/plugin-proposal-class-static-block": ^7.18.6
-    "@babel/plugin-proposal-dynamic-import": ^7.18.6
-    "@babel/plugin-proposal-export-namespace-from": ^7.18.9
-    "@babel/plugin-proposal-json-strings": ^7.18.6
-    "@babel/plugin-proposal-logical-assignment-operators": ^7.18.9
-    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.18.6
-    "@babel/plugin-proposal-numeric-separator": ^7.18.6
-    "@babel/plugin-proposal-object-rest-spread": ^7.20.2
-    "@babel/plugin-proposal-optional-catch-binding": ^7.18.6
-    "@babel/plugin-proposal-optional-chaining": ^7.18.9
-    "@babel/plugin-proposal-private-methods": ^7.18.6
-    "@babel/plugin-proposal-private-property-in-object": ^7.18.6
-    "@babel/plugin-proposal-unicode-property-regex": ^7.18.6
+    "@babel/compat-data": ^7.22.20
+    "@babel/helper-compilation-targets": ^7.22.15
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-validator-option": ^7.22.15
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.22.15
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.22.15
+    "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2
     "@babel/plugin-syntax-async-generators": ^7.8.4
     "@babel/plugin-syntax-class-properties": ^7.12.13
     "@babel/plugin-syntax-class-static-block": ^7.14.5
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-export-namespace-from": ^7.8.3
-    "@babel/plugin-syntax-import-assertions": ^7.20.0
+    "@babel/plugin-syntax-import-assertions": ^7.22.5
+    "@babel/plugin-syntax-import-attributes": ^7.22.5
+    "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/plugin-syntax-json-strings": ^7.8.3
     "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
     "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
@@ -3048,48 +3214,65 @@ __metadata:
     "@babel/plugin-syntax-optional-chaining": ^7.8.3
     "@babel/plugin-syntax-private-property-in-object": ^7.14.5
     "@babel/plugin-syntax-top-level-await": ^7.14.5
-    "@babel/plugin-transform-arrow-functions": ^7.18.6
-    "@babel/plugin-transform-async-to-generator": ^7.18.6
-    "@babel/plugin-transform-block-scoped-functions": ^7.18.6
-    "@babel/plugin-transform-block-scoping": ^7.20.2
-    "@babel/plugin-transform-classes": ^7.20.2
-    "@babel/plugin-transform-computed-properties": ^7.18.9
-    "@babel/plugin-transform-destructuring": ^7.20.2
-    "@babel/plugin-transform-dotall-regex": ^7.18.6
-    "@babel/plugin-transform-duplicate-keys": ^7.18.9
-    "@babel/plugin-transform-exponentiation-operator": ^7.18.6
-    "@babel/plugin-transform-for-of": ^7.18.8
-    "@babel/plugin-transform-function-name": ^7.18.9
-    "@babel/plugin-transform-literals": ^7.18.9
-    "@babel/plugin-transform-member-expression-literals": ^7.18.6
-    "@babel/plugin-transform-modules-amd": ^7.19.6
-    "@babel/plugin-transform-modules-commonjs": ^7.19.6
-    "@babel/plugin-transform-modules-systemjs": ^7.19.6
-    "@babel/plugin-transform-modules-umd": ^7.18.6
-    "@babel/plugin-transform-named-capturing-groups-regex": ^7.19.1
-    "@babel/plugin-transform-new-target": ^7.18.6
-    "@babel/plugin-transform-object-super": ^7.18.6
-    "@babel/plugin-transform-parameters": ^7.20.1
-    "@babel/plugin-transform-property-literals": ^7.18.6
-    "@babel/plugin-transform-regenerator": ^7.18.6
-    "@babel/plugin-transform-reserved-words": ^7.18.6
-    "@babel/plugin-transform-shorthand-properties": ^7.18.6
-    "@babel/plugin-transform-spread": ^7.19.0
-    "@babel/plugin-transform-sticky-regex": ^7.18.6
-    "@babel/plugin-transform-template-literals": ^7.18.9
-    "@babel/plugin-transform-typeof-symbol": ^7.18.9
-    "@babel/plugin-transform-unicode-escapes": ^7.18.10
-    "@babel/plugin-transform-unicode-regex": ^7.18.6
-    "@babel/preset-modules": ^0.1.5
-    "@babel/types": ^7.20.2
-    babel-plugin-polyfill-corejs2: ^0.3.3
-    babel-plugin-polyfill-corejs3: ^0.6.0
-    babel-plugin-polyfill-regenerator: ^0.4.1
-    core-js-compat: ^3.25.1
-    semver: ^6.3.0
+    "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6
+    "@babel/plugin-transform-arrow-functions": ^7.22.5
+    "@babel/plugin-transform-async-generator-functions": ^7.22.15
+    "@babel/plugin-transform-async-to-generator": ^7.22.5
+    "@babel/plugin-transform-block-scoped-functions": ^7.22.5
+    "@babel/plugin-transform-block-scoping": ^7.22.15
+    "@babel/plugin-transform-class-properties": ^7.22.5
+    "@babel/plugin-transform-class-static-block": ^7.22.11
+    "@babel/plugin-transform-classes": ^7.22.15
+    "@babel/plugin-transform-computed-properties": ^7.22.5
+    "@babel/plugin-transform-destructuring": ^7.22.15
+    "@babel/plugin-transform-dotall-regex": ^7.22.5
+    "@babel/plugin-transform-duplicate-keys": ^7.22.5
+    "@babel/plugin-transform-dynamic-import": ^7.22.11
+    "@babel/plugin-transform-exponentiation-operator": ^7.22.5
+    "@babel/plugin-transform-export-namespace-from": ^7.22.11
+    "@babel/plugin-transform-for-of": ^7.22.15
+    "@babel/plugin-transform-function-name": ^7.22.5
+    "@babel/plugin-transform-json-strings": ^7.22.11
+    "@babel/plugin-transform-literals": ^7.22.5
+    "@babel/plugin-transform-logical-assignment-operators": ^7.22.11
+    "@babel/plugin-transform-member-expression-literals": ^7.22.5
+    "@babel/plugin-transform-modules-amd": ^7.22.5
+    "@babel/plugin-transform-modules-commonjs": ^7.22.15
+    "@babel/plugin-transform-modules-systemjs": ^7.22.11
+    "@babel/plugin-transform-modules-umd": ^7.22.5
+    "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.5
+    "@babel/plugin-transform-new-target": ^7.22.5
+    "@babel/plugin-transform-nullish-coalescing-operator": ^7.22.11
+    "@babel/plugin-transform-numeric-separator": ^7.22.11
+    "@babel/plugin-transform-object-rest-spread": ^7.22.15
+    "@babel/plugin-transform-object-super": ^7.22.5
+    "@babel/plugin-transform-optional-catch-binding": ^7.22.11
+    "@babel/plugin-transform-optional-chaining": ^7.22.15
+    "@babel/plugin-transform-parameters": ^7.22.15
+    "@babel/plugin-transform-private-methods": ^7.22.5
+    "@babel/plugin-transform-private-property-in-object": ^7.22.11
+    "@babel/plugin-transform-property-literals": ^7.22.5
+    "@babel/plugin-transform-regenerator": ^7.22.10
+    "@babel/plugin-transform-reserved-words": ^7.22.5
+    "@babel/plugin-transform-shorthand-properties": ^7.22.5
+    "@babel/plugin-transform-spread": ^7.22.5
+    "@babel/plugin-transform-sticky-regex": ^7.22.5
+    "@babel/plugin-transform-template-literals": ^7.22.5
+    "@babel/plugin-transform-typeof-symbol": ^7.22.5
+    "@babel/plugin-transform-unicode-escapes": ^7.22.10
+    "@babel/plugin-transform-unicode-property-regex": ^7.22.5
+    "@babel/plugin-transform-unicode-regex": ^7.22.5
+    "@babel/plugin-transform-unicode-sets-regex": ^7.22.5
+    "@babel/preset-modules": 0.1.6-no-external-plugins
+    "@babel/types": ^7.22.19
+    babel-plugin-polyfill-corejs2: ^0.4.5
+    babel-plugin-polyfill-corejs3: ^0.8.3
+    babel-plugin-polyfill-regenerator: ^0.5.2
+    core-js-compat: ^3.31.0
+    semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: ece2d7e9c7789db6116e962b8e1a55eb55c110c44c217f0c8f6ffea4ca234954e66557f7bd019b7affadf7fbb3a53ccc807e93fc935aacd48146234b73b6947e
+  checksum: 99357a5cb30f53bacdc0d1cd6dff0f052ea6c2d1ba874d969bba69897ef716e87283e84a59dc52fb49aa31fd1b6f55ed756c64c04f5678380700239f6030b881
   languageName: node
   linkType: hard
 
@@ -3370,16 +3553,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/preset-typescript@npm:7.18.6"
+"@babel/preset-typescript@npm:^7.21.0":
+  version: 7.23.0
+  resolution: "@babel/preset-typescript@npm:7.23.0"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/helper-validator-option": ^7.18.6
-    "@babel/plugin-transform-typescript": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-validator-option": ^7.22.15
+    "@babel/plugin-syntax-jsx": ^7.22.5
+    "@babel/plugin-transform-modules-commonjs": ^7.23.0
+    "@babel/plugin-transform-typescript": ^7.22.15
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 7fe0da5103eb72d3cf39cf3e138a794c8cdd19c0b38e3e101507eef519c46a87a0d6d0e8bc9e28a13ea2364001ebe7430b9d75758aab4c3c3a8db9a487b9dc7c
+  checksum: 3d5fce83e83f11c07e0ea13542bca181abb3b482b8981ec9c64e6add9d7beed3c54d063dc4bc9fd383165c71114a245abef89a289680833c5a8552fe3e7c4407
   languageName: node
   linkType: hard
 
@@ -3479,6 +3664,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/template@npm:7.22.15"
+  dependencies:
+    "@babel/code-frame": ^7.22.13
+    "@babel/parser": ^7.22.15
+    "@babel/types": ^7.22.15
+  checksum: 1f3e7dcd6c44f5904c184b3f7fe280394b191f2fed819919ffa1e529c259d5b197da8981b6ca491c235aee8dbad4a50b7e31304aa531271cb823a4a24a0dd8fd
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/template@npm:7.22.5"
@@ -3580,6 +3776,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/traverse@npm:7.23.0"
+  dependencies:
+    "@babel/code-frame": ^7.22.13
+    "@babel/generator": ^7.23.0
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-function-name": ^7.23.0
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/parser": ^7.23.0
+    "@babel/types": ^7.23.0
+    debug: ^4.1.0
+    globals: ^11.1.0
+  checksum: 0b17fae53269e1af2cd3edba00892bc2975ad5df9eea7b84815dab07dfec2928c451066d51bc65b4be61d8499e77db7e547ce69ef2a7b0eca3f96269cb43a0b0
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.2, @babel/types@npm:^7.20.5, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.20.5
   resolution: "@babel/types@npm:7.20.5"
@@ -3602,6 +3816,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/types@npm:7.23.0"
+  dependencies:
+    "@babel/helper-string-parser": ^7.22.5
+    "@babel/helper-validator-identifier": ^7.22.20
+    to-fast-properties: ^2.0.0
+  checksum: 215fe04bd7feef79eeb4d33374b39909ce9cad1611c4135a4f7fdf41fe3280594105af6d7094354751514625ea92d0875aba355f53e86a92600f290e77b0e604
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/types@npm:7.21.5"
@@ -3913,17 +4138,18 @@ __metadata:
   resolution: "@digdir/design-system-react@workspace:packages/react"
   dependencies:
     "@altinn/figma-design-tokens": ^6.0.1
-    "@digdir/design-system-tokens": ^0.6.1
+    "@digdir/design-system-tokens": ^0.8.0
     "@floating-ui/react": 0.25.2
     "@navikt/aksel-icons": ^3.2.4
+    copyfiles: ^2.4.1
     react-number-format: 5.2.2
   peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
+    react: ">=18.2.0"
+    react-dom: ">=18.2.0"
   languageName: unknown
   linkType: soft
 
-"@digdir/design-system-tokens@*, @digdir/design-system-tokens@^0.6.1, @digdir/design-system-tokens@workspace:packages/tokens":
+"@digdir/design-system-tokens@*, @digdir/design-system-tokens@^0.8.0, @digdir/design-system-tokens@workspace:packages/tokens":
   version: 0.0.0-use.local
   resolution: "@digdir/design-system-tokens@workspace:packages/tokens"
   dependencies:
@@ -4105,20 +4331,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^1.3.0":
-  version: 1.3.3
-  resolution: "@eslint/eslintrc@npm:1.3.3"
+"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "@eslint-community/eslint-utils@npm:4.4.0"
+  dependencies:
+    eslint-visitor-keys: ^3.3.0
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: cdfe3ae42b4f572cbfb46d20edafe6f36fc5fb52bf2d90875c58aefe226892b9677fef60820e2832caf864a326fe4fc225714c46e8389ccca04d5f9288aabd22
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.5.1, @eslint-community/regexpp@npm:^4.6.1":
+  version: 4.9.0
+  resolution: "@eslint-community/regexpp@npm:4.9.0"
+  checksum: 82411f0643ab9bfd271bf12c8c75031266b13595d9371585ee3b0d680d918d4abf37c7e94d0da22e45817c9bbc59b79dfcbd672050dfb00af88fb89c80fd420f
+  languageName: node
+  linkType: hard
+
+"@eslint/eslintrc@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@eslint/eslintrc@npm:2.1.2"
   dependencies:
     ajv: ^6.12.4
     debug: ^4.3.2
-    espree: ^9.4.0
-    globals: ^13.15.0
+    espree: ^9.6.0
+    globals: ^13.19.0
     ignore: ^5.2.0
     import-fresh: ^3.2.1
     js-yaml: ^4.1.0
     minimatch: ^3.1.2
     strip-json-comments: ^3.1.1
-  checksum: f03e9d6727efd3e0719da2051ea80c0c73d20e28c171121527dbb868cd34232ca9c1d0525a66e517a404afea26624b1e47895b6a92474678418c2f50c9566694
+  checksum: bc742a1e3b361f06fedb4afb6bf32cbd27171292ef7924f61c62f2aed73048367bcc7ac68f98c06d4245cd3fabc43270f844e3c1699936d4734b3ac5398814a7
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:8.50.0":
+  version: 8.50.0
+  resolution: "@eslint/js@npm:8.50.0"
+  checksum: 302478f2acaaa7228729ec6a04f56641590185e1d8cd1c836a6db8a6b8009f80a57349341be9fbb9aa1721a7a569d1be3ffc598a33300d22816f11832095386c
   languageName: node
   linkType: hard
 
@@ -4281,21 +4532,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.10.4":
-  version: 0.10.7
-  resolution: "@humanwhocodes/config-array@npm:0.10.7"
+"@humanwhocodes/config-array@npm:^0.11.11":
+  version: 0.11.11
+  resolution: "@humanwhocodes/config-array@npm:0.11.11"
   dependencies:
     "@humanwhocodes/object-schema": ^1.2.1
     debug: ^4.1.1
-    minimatch: ^3.0.4
-  checksum: 009d64be8d5bd098ff04e10af79e34f5633245250581fca032fac12a8667b2df8e7d169e69c05bff4d83ea3dd3c7d2d0e05ea9b94d89a7d092e26530caf6f8a3
+    minimatch: ^3.0.5
+  checksum: db84507375ab77b8ffdd24f498a5b49ad6b64391d30dd2ac56885501d03964d29637e05b1ed5aefa09d57ac667e28028bc22d2da872bfcd619652fbdb5f4ca19
   languageName: node
   linkType: hard
 
-"@humanwhocodes/gitignore-to-minimatch@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@humanwhocodes/gitignore-to-minimatch@npm:1.0.2"
-  checksum: aba5c40c9e3770ed73a558b0bfb53323842abfc2ce58c91d7e8b1073995598e6374456d38767be24ab6176915f0a8d8b23eaae5c85e2b488c0dccca6d795e2ad
+"@humanwhocodes/module-importer@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@humanwhocodes/module-importer@npm:1.0.1"
+  checksum: 0fd22007db8034a2cdf2c764b140d37d9020bbfce8a49d3ec5c05290e77d4b0263b1b972b752df8c89e5eaa94073408f2b7d977aed131faf6cf396ebb5d7fb61
   languageName: node
   linkType: hard
 
@@ -4673,6 +4924,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.4.13":
+  version: 1.4.15
+  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
+  checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:0.3.9":
   version: 0.3.9
   resolution: "@jridgewell/trace-mapping@npm:0.3.9"
@@ -4703,13 +4961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jsdevtools/rehype-toc@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@jsdevtools/rehype-toc@npm:3.0.2"
-  checksum: 80c5a898431d2ab3deceb187334fea1d71f217d6ebc6d65289208ebe0bf003d82cf5cdbd85180787b14a87e0357e4fc77063343dea9ec743eadfe565c34337fa
-  languageName: node
-  linkType: hard
-
 "@juggle/resize-observer@npm:^3.3.1":
   version: 3.4.0
   resolution: "@juggle/resize-observer@npm:3.4.0"
@@ -5027,7 +5278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3":
+"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
   version: 1.2.8
   resolution: "@nodelib/fs.walk@npm:1.2.8"
   dependencies:
@@ -5419,20 +5670,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pkgr/utils@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "@pkgr/utils@npm:2.3.1"
-  dependencies:
-    cross-spawn: ^7.0.3
-    is-glob: ^4.0.3
-    open: ^8.4.0
-    picocolors: ^1.0.0
-    tiny-glob: ^0.2.9
-    tslib: ^2.4.0
-  checksum: 118a1971120253740121a1db0a6658c21195b7da962acf9c124b507a3df707cfc97b0b84a16edcbd4352853b182e8337da9fc6e8e3d06c60d75ae4fb42321c75
-  languageName: node
-  linkType: hard
-
 "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.5":
   version: 0.5.10
   resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.10"
@@ -6453,51 +6690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/auto-id@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/auto-id@npm:0.18.0"
-  dependencies:
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 75a37a0a09c382dfc358d37f3212cffdea2b4c80c2f555b7fee857af59a46e959324234be8dbb51c476fba0874ed93694254079192b478ce3e9abba5ce63fdec
-  languageName: node
-  linkType: hard
-
-"@reach/disclosure@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "@reach/disclosure@npm:0.18.0"
-  dependencies:
-    "@reach/auto-id": 0.18.0
-    "@reach/polymorphic": 0.18.0
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 77866743202a87e1c608fb41a56180b6676894a71b9853a6ca45408c82962f85fb7c3405e10c296518fcba95b0e7a4848ca681a6d8beb6d4574d548e606316d9
-  languageName: node
-  linkType: hard
-
-"@reach/polymorphic@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/polymorphic@npm:0.18.0"
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-  checksum: 0d62260a55c71e0dc95f38867f24b3d699e0bb7ea2273c6fa5a1fa3d804269e2deb63a458f1f1eb7b74c32bc0add3ab31a1c2668c1dee6b2837187876d3c4cc2
-  languageName: node
-  linkType: hard
-
-"@reach/utils@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/utils@npm:0.18.0"
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: eeda20a74c1db71e95680c622371c6efc46e2c767b28902bc43b580654436a34ec7f8b5f63c51a7c4cc8fd48c94066e3215496ba5a053c96e65c7a9bdcdc2687
-  languageName: node
-  linkType: hard
-
 "@react-leaflet/core@npm:^2.1.0":
   version: 2.1.0
   resolution: "@react-leaflet/core@npm:2.1.0"
@@ -6509,26 +6701,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-commonjs@npm:^22.0.2":
-  version: 22.0.2
-  resolution: "@rollup/plugin-commonjs@npm:22.0.2"
+"@rollup/plugin-commonjs@npm:^25.0.4":
+  version: 25.0.4
+  resolution: "@rollup/plugin-commonjs@npm:25.0.4"
   dependencies:
-    "@rollup/pluginutils": ^3.1.0
+    "@rollup/pluginutils": ^5.0.1
     commondir: ^1.0.1
-    estree-walker: ^2.0.1
-    glob: ^7.1.6
-    is-reference: ^1.2.1
-    magic-string: ^0.25.7
-    resolve: ^1.17.0
+    estree-walker: ^2.0.2
+    glob: ^8.0.3
+    is-reference: 1.2.1
+    magic-string: ^0.27.0
   peerDependencies:
-    rollup: ^2.68.0
-  checksum: 70098a4b91afe3f164f5d27cba65edf148c5ed146ee0e07a964b66940681553ac77391083114cdcf9427e7f2706bf0d61eab310b3a2caeab83b7452c0292fcae
+    rollup: ^2.68.0||^3.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 073b92b765a1f8ab8db8e1aa216c1950e62f6c0c41210d10bb7530c4fc63670a16c19c0bbbf73e2752467c4468ad4c8134cf4724924388c3eed83df45630fda6
   languageName: node
   linkType: hard
 
-"@rollup/plugin-image@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@rollup/plugin-image@npm:3.0.1"
+"@rollup/plugin-image@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@rollup/plugin-image@npm:3.0.2"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
     mini-svg-data-uri: ^1.4.4
@@ -6537,13 +6731,13 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: a48e35f482189d27c608fb9ccc69128a70210cd3fa3ddcfa249fd99a337c9518bfd8bfce9da97cf4ee8c37833bdbfde76806603628036af79e4ea1d60c2e49f4
+  checksum: f9d8f587f10c51398fa8c23f1543e3073f969cf7e4acd7f401e02a3e3752702a9eb289ddb14009733ce37d04474c549aba9e7d13ebf50e26226266ba51546b69
   languageName: node
   linkType: hard
 
-"@rollup/plugin-json@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "@rollup/plugin-json@npm:5.0.2"
+"@rollup/plugin-json@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@rollup/plugin-json@npm:6.0.0"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
   peerDependencies:
@@ -6551,69 +6745,48 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 9b5f90ea311dfcfacf0f38af39bbb1954ea56d6faecdee3d528f73d0e02da96a0706ab21fae0c8eef9bb5d756f6f50b40b5a252ffd9800397012b5bac6764b6f
+  checksum: 77cfc941edaf77a5307977704ffaba706d83bea66f265b2b68f14be2a0af6d08b0fb1b04fdd773146c84cc70938ff64b00ae946808fd6ac057058af824d78128
   languageName: node
   linkType: hard
 
-"@rollup/plugin-node-resolve@npm:^14.0.0":
-  version: 14.1.0
-  resolution: "@rollup/plugin-node-resolve@npm:14.1.0"
+"@rollup/plugin-node-resolve@npm:^15.2.1":
+  version: 15.2.1
+  resolution: "@rollup/plugin-node-resolve@npm:15.2.1"
   dependencies:
-    "@rollup/pluginutils": ^3.1.0
-    "@types/resolve": 1.17.1
+    "@rollup/pluginutils": ^5.0.1
+    "@types/resolve": 1.20.2
     deepmerge: ^4.2.2
-    is-builtin-module: ^3.1.0
+    is-builtin-module: ^3.2.1
     is-module: ^1.0.0
-    resolve: ^1.19.0
-  peerDependencies:
-    rollup: ^2.78.0
-  checksum: 7c5bed3e5a511ee47172acd91da1a828383f7ef72d54d27d8050598ef9038df0f86a8559db455611e138e07b99d787fd7445b11f81129970d07104644576d80a
-  languageName: node
-  linkType: hard
-
-"@rollup/plugin-typescript@npm:^8.5.0":
-  version: 8.5.0
-  resolution: "@rollup/plugin-typescript@npm:8.5.0"
-  dependencies:
-    "@rollup/pluginutils": ^3.1.0
-    resolve: ^1.17.0
+    resolve: ^1.22.1
   peerDependencies:
-    rollup: ^2.14.0
-    tslib: "*"
-    typescript: ">=3.7.0"
+    rollup: ^2.78.0||^3.0.0
   peerDependenciesMeta:
-    tslib:
+    rollup:
       optional: true
-  checksum: 2f100a73cdeb9bf82feaf8665fe791dabf5dcc17f6e727eb7b1825e7c7cf815ccd3f79f9f43ca53d7806c50686565c71f35fffcfc773b811a5c1e39eab167529
+  checksum: e8f706db6ab826e80d1c9a85d2d1e736f2f78a34ea5d49dd0004d6603249a504696967674b2f021cd144536b88d24ffa058383f08b61b4b665be3c7bfacc006a
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@rollup/pluginutils@npm:3.1.0"
+"@rollup/pluginutils@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "@rollup/pluginutils@npm:5.0.2"
   dependencies:
-    "@types/estree": 0.0.39
-    estree-walker: ^1.0.1
-    picomatch: ^2.2.2
+    "@types/estree": ^1.0.0
+    estree-walker: ^2.0.2
+    picomatch: ^2.3.1
   peerDependencies:
-    rollup: ^1.20.0||^2.0.0
-  checksum: 8be16e27863c219edbb25a4e6ec2fe0e1e451d9e917b6a43cf2ae5bc025a6b8faaa40f82a6e53b66d0de37b58ff472c6c3d57a83037ae635041f8df959d6d9aa
-  languageName: node
-  linkType: hard
-
-"@rollup/pluginutils@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "@rollup/pluginutils@npm:4.2.1"
-  dependencies:
-    estree-walker: ^2.0.1
-    picomatch: ^2.2.2
-  checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12
+    rollup: ^1.20.0||^2.0.0||^3.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: edea15e543bebc7dcac3b0ac8bc7b8e8e6dbd46e2864dbe5dd28072de1fbd5b0e10d545a610c0edaa178e8a7ac432e2a2a52e547ece1308471412caba47db8ce
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^5.0.1":
-  version: 5.0.2
-  resolution: "@rollup/pluginutils@npm:5.0.2"
+"@rollup/pluginutils@npm:^5.0.2":
+  version: 5.0.4
+  resolution: "@rollup/pluginutils@npm:5.0.4"
   dependencies:
     "@types/estree": ^1.0.0
     estree-walker: ^2.0.2
@@ -6623,7 +6796,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: edea15e543bebc7dcac3b0ac8bc7b8e8e6dbd46e2864dbe5dd28072de1fbd5b0e10d545a610c0edaa178e8a7ac432e2a2a52e547ece1308471412caba47db8ce
+  checksum: 893d5805ac4121fc704926963a0ae4e79e9e2bc8d736c3b28499ab69a404cce5119ca3a4e0c3d3a81d62f1beb3966f35285c36935d94b061794f26e94fed4cd1
   languageName: node
   linkType: hard
 
@@ -7900,6 +8073,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 3fc8e35d16f5abe0af5efe5851f27581225ac405d6a1ca44cda0df064cddfcc29a428c48c2e4bef6cebf627c9ac2f652a096030edb02cf5a120ce28d3c234710
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1"
@@ -7918,6 +8100,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: ff992893c6c4ac802713ba3a97c13be34e62e6d981c813af40daabcd676df68a72a61bd1e692bb1eda3587f1b1d700ea462222ae2153bb0f46886632d4f88d08
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-remove-jsx-empty-expression@npm:*":
   version: 6.5.0
   resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:6.5.0"
@@ -7927,6 +8118,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0fb691b63a21bac00da3aa2dccec50d0d5a5b347ff408d60803b84410d8af168f2656e4ba1ee1f24dab0ae4e4af77901f2928752bb0434c1f6788133ec599ec8
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-replace-jsx-attribute-value@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 1edda65ef4f4dd8f021143c8ec276a08f6baa6f733b8e8ee2e7775597bf6b97afb47fdeefd579d6ae6c959fe2e634f55cd61d99377631212228c8cfb351b8921
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-replace-jsx-attribute-value@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-plugin-replace-jsx-attribute-value@npm:6.5.1"
@@ -7936,12 +8145,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-svg-dynamic-title@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-svg-dynamic-title@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 876cec891488992e6a9aebb8155e2bea4ec461b4718c51de36e988e00e271c6d9d01ef6be17b9effd44b2b3d7db0b41c161a5904a46ae6f38b26b387ad7f3709
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-svg-dynamic-title@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-plugin-svg-dynamic-title@npm:6.5.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 0fd42ebf127ae9163ef341e84972daa99bdcb9e6ed3f83aabd95ee173fddc43e40e02fa847fbc0a1058cf5549f72b7960a2c5e22c3e4ac18f7e3ac81277852ae
+  checksum: 0fd42ebf127ae9163ef341e84972daa99bdcb9e6ed3f83aabd95ee173fddc43e40e02fa847fbc0a1058cf5549f72b7960a2c5e22c3e4ac18f7e3ac81277852ae
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-svg-em-dimensions@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-svg-em-dimensions@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: be0e2d391164428327d9ec469a52cea7d93189c6b0e2c290999e048f597d777852f701c64dca44cd45b31ed14a7f859520326e2e4ad7c3a4545d0aa235bc7e9a
   languageName: node
   linkType: hard
 
@@ -7954,6 +8181,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-transform-react-native-svg@npm:8.1.0":
+  version: 8.1.0
+  resolution: "@svgr/babel-plugin-transform-react-native-svg@npm:8.1.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 85b434a57572f53bd2b9f0606f253e1fcf57b4a8c554ec3f2d43ed17f50d8cae200cb3aaf1ec9d626e1456e8b135dce530ae047eb0bed6d4bf98a752d6640459
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-transform-react-native-svg@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-plugin-transform-react-native-svg@npm:6.5.1"
@@ -7963,6 +8199,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-transform-svg-component@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-transform-svg-component@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 04e2023d75693eeb0890341c40e449881184663056c249be7e5c80168e4aabb0fadd255e8d5d2dbf54b8c2a6e700efba994377135bfa4060dc4a2e860116ef8c
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-transform-svg-component@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-plugin-transform-svg-component@npm:6.5.1"
@@ -7972,6 +8217,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-preset@npm:8.1.0":
+  version: 8.1.0
+  resolution: "@svgr/babel-preset@npm:8.1.0"
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute": 8.0.0
+    "@svgr/babel-plugin-remove-jsx-attribute": 8.0.0
+    "@svgr/babel-plugin-remove-jsx-empty-expression": 8.0.0
+    "@svgr/babel-plugin-replace-jsx-attribute-value": 8.0.0
+    "@svgr/babel-plugin-svg-dynamic-title": 8.0.0
+    "@svgr/babel-plugin-svg-em-dimensions": 8.0.0
+    "@svgr/babel-plugin-transform-react-native-svg": 8.1.0
+    "@svgr/babel-plugin-transform-svg-component": 8.0.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 3a67930f080b8891e1e8e2595716b879c944d253112bae763dce59807ba23454d162216c8d66a0a0e3d4f38a649ecd6c387e545d1e1261dd69a68e9a3392ee08
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-preset@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-preset@npm:6.5.1"
@@ -8009,6 +8272,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/core@npm:8.1.0":
+  version: 8.1.0
+  resolution: "@svgr/core@npm:8.1.0"
+  dependencies:
+    "@babel/core": ^7.21.3
+    "@svgr/babel-preset": 8.1.0
+    camelcase: ^6.2.0
+    cosmiconfig: ^8.1.3
+    snake-case: ^3.0.4
+  checksum: da4a12865c7dc59829d58df8bd232d6c85b7115fda40da0d2f844a1a51886e2e945560596ecfc0345d37837ac457de86a931e8b8d8550e729e0c688c02250d8a
+  languageName: node
+  linkType: hard
+
 "@svgr/core@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/core@npm:6.5.1"
@@ -8022,6 +8298,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/hast-util-to-babel-ast@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/hast-util-to-babel-ast@npm:8.0.0"
+  dependencies:
+    "@babel/types": ^7.21.3
+    entities: ^4.4.0
+  checksum: 88401281a38bbc7527e65ff5437970414391a86158ef4b4046c89764c156d2d39ecd7cce77be8a51994c9fb3249170cb1eb8b9128b62faaa81743ef6ed3534ab
+  languageName: node
+  linkType: hard
+
 "@svgr/hast-util-to-babel-ast@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/hast-util-to-babel-ast@npm:6.5.1"
@@ -8032,6 +8318,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/plugin-jsx@npm:8.1.0":
+  version: 8.1.0
+  resolution: "@svgr/plugin-jsx@npm:8.1.0"
+  dependencies:
+    "@babel/core": ^7.21.3
+    "@svgr/babel-preset": 8.1.0
+    "@svgr/hast-util-to-babel-ast": 8.0.0
+    svg-parser: ^2.0.4
+  peerDependencies:
+    "@svgr/core": "*"
+  checksum: 0418a9780753d3544912ee2dad5d2cf8d12e1ba74df8053651b3886aeda54d5f0f7d2dece0af5e0d838332c4f139a57f0dabaa3ca1afa4d1a765efce6a7656f2
+  languageName: node
+  linkType: hard
+
 "@svgr/plugin-jsx@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/plugin-jsx@npm:6.5.1"
@@ -8058,6 +8358,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/plugin-svgo@npm:8.1.0":
+  version: 8.1.0
+  resolution: "@svgr/plugin-svgo@npm:8.1.0"
+  dependencies:
+    cosmiconfig: ^8.1.3
+    deepmerge: ^4.3.1
+    svgo: ^3.0.2
+  peerDependencies:
+    "@svgr/core": "*"
+  checksum: 59d9d214cebaacca9ca71a561f463d8b7e5a68ca9443e4792a42d903acd52259b1790c0680bc6afecc3f00a255a6cbd7ea278a9f625bac443620ea58a590c2d0
+  languageName: node
+  linkType: hard
+
 "@svgr/plugin-svgo@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/plugin-svgo@npm:6.5.1"
@@ -8071,20 +8384,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@svgr/rollup@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/rollup@npm:6.5.1"
+"@svgr/rollup@npm:^8.1.0":
+  version: 8.1.0
+  resolution: "@svgr/rollup@npm:8.1.0"
   dependencies:
-    "@babel/core": ^7.19.6
-    "@babel/plugin-transform-react-constant-elements": ^7.18.12
-    "@babel/preset-env": ^7.19.4
+    "@babel/core": ^7.21.3
+    "@babel/plugin-transform-react-constant-elements": ^7.21.3
+    "@babel/preset-env": ^7.20.2
     "@babel/preset-react": ^7.18.6
-    "@babel/preset-typescript": ^7.18.6
-    "@rollup/pluginutils": ^4.2.1
-    "@svgr/core": ^6.5.1
-    "@svgr/plugin-jsx": ^6.5.1
-    "@svgr/plugin-svgo": ^6.5.1
-  checksum: 809198a655c280b434d762829aeab0c48e545daaa7a520ac87d5e7cfe96402eb4d0c01f8b25959fcc37a2ce4aa1a53c9e1c4ccb1206cd5833883a34db5799dd4
+    "@babel/preset-typescript": ^7.21.0
+    "@rollup/pluginutils": ^5.0.2
+    "@svgr/core": 8.1.0
+    "@svgr/plugin-jsx": 8.1.0
+    "@svgr/plugin-svgo": 8.1.0
+  checksum: 728e2d5ac9765e83852743c209663b4b32ca4182e42bfcf13a75d2205b041b14ee34013344589cd79ba9b0ba35cc86436524ffd4362b60d636305ffb2a3b4eb1
   languageName: node
   linkType: hard
 
@@ -8237,59 +8550,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.5.0":
-  version: 8.19.0
-  resolution: "@testing-library/dom@npm:8.19.0"
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.3
+  resolution: "@testing-library/dom@npm:9.3.3"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
-    "@types/aria-query": ^4.2.0
-    aria-query: ^5.0.0
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.1.3
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
-    lz-string: ^1.4.4
+    lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 6bb93fef96703b6c47cf1b7cc8f71d402a9576084a94ba4e9926f51bd7bb1287fbb4f6942d82bd03fc6f3d998ae97e60f6aea4618f3a1ce6139597d2a4ecb7b9
+  checksum: 34e0a564da7beb92aa9cc44a9080221e2412b1a132eb37be3d513fe6c58027674868deb9f86195756d98d15ba969a30fe00632a4e26e25df2a5a4f6ac0686e37
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:5.16.5":
-  version: 5.16.5
-  resolution: "@testing-library/jest-dom@npm:5.16.5"
+"@testing-library/jest-dom@npm:6.1.3":
+  version: 6.1.3
+  resolution: "@testing-library/jest-dom@npm:6.1.3"
   dependencies:
-    "@adobe/css-tools": ^4.0.1
+    "@adobe/css-tools": ^4.3.0
     "@babel/runtime": ^7.9.2
-    "@types/testing-library__jest-dom": ^5.9.1
     aria-query: ^5.0.0
     chalk: ^3.0.0
     css.escape: ^1.5.1
     dom-accessibility-api: ^0.5.6
     lodash: ^4.17.15
     redent: ^3.0.0
-  checksum: 94911f901a8031f3e489d04ac057cb5373621230f5d92bed80e514e24b069fb58a3166d1dd86963e55f078a1bd999da595e2ab96ed95f452d477e272937d792a
+  peerDependencies:
+    "@jest/globals": ">= 28"
+    "@types/jest": ">= 28"
+    jest: ">= 28"
+    vitest: ">= 0.32"
+  peerDependenciesMeta:
+    "@jest/globals":
+      optional: true
+    "@types/jest":
+      optional: true
+    jest:
+      optional: true
+    vitest:
+      optional: true
+  checksum: 5bd14ba31fd3d64cff8ca55cccd335bedadf1db1119643954ca8cd30af835defe6f3a21e7d7617d20205b07abba1b2e668be1b9d6743504800f17fdc4344db75
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^13.4.0":
-  version: 13.4.0
-  resolution: "@testing-library/react@npm:13.4.0"
+"@testing-library/react@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@testing-library/react@npm:14.0.0"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.5.0
+    "@testing-library/dom": ^9.0.0
     "@types/react-dom": ^18.0.0
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 51ec548c1fdb1271089a5c63e0908f0166f2c7fcd9cacd3108ebbe0ce64cb4351812d885892020dc37608418cfb15698514856502b3cab0e5cc58d6cc1bd4a3e
+  checksum: 4a54c8f56cc4a39b50803205f84f06280bb76521d6d5d4b3b36651d760c7c7752ef142d857d52aaf4fad4848ed7a8be49afc793a5dda105955d2f8bef24901ac
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^14.4.3":
-  version: 14.4.3
-  resolution: "@testing-library/user-event@npm:14.4.3"
+"@testing-library/user-event@npm:^14.5.1":
+  version: 14.5.1
+  resolution: "@testing-library/user-event@npm:14.5.1"
   peerDependencies:
     "@testing-library/dom": ">=7.21.4"
-  checksum: 852c48ea6db1c9471b18276617c84fec4320771e466cd58339a732ca3fd73ad35e5a43ae14f51af51a8d0a150dcf60fcaab049ef367871207bea8f92c4b8195e
+  checksum: 3e6bc9fd53dfe2f3648190193ed2fd4bca2a1bfb47f68810df3b33f05412526e5fd5c4ef9dc5375635e0f4cdf1859916867b597eed22bda1321e04242ea6c519
   languageName: node
   linkType: hard
 
@@ -8397,10 +8723,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^4.2.0":
-  version: 4.2.2
-  resolution: "@types/aria-query@npm:4.2.2"
-  checksum: 6f2ce11d91e2d665f3873258db19da752d91d85d3679eb5efcdf9c711d14492287e1e4eb52613b28e60375841a9e428594e745b68436c963d8bad4bf72188df3
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "@types/aria-query@npm:5.0.2"
+  checksum: 19394fea016e72da39dd5ef1cf1643e3252b7ee99d8f0b3a8740d3b72f874443fc1e00a41935b36fdfaf92cd735d4ae10dc5d6ab8f1192527d4c0471bb8ff8e4
   languageName: node
   linkType: hard
 
@@ -8566,13 +8892,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:0.0.39":
-  version: 0.0.39
-  resolution: "@types/estree@npm:0.0.39"
-  checksum: 412fb5b9868f2c418126451821833414189b75cc6bf84361156feed733e3d92ec220b9d74a89e52722e03d5e241b2932732711b7497374a404fad49087adc248
-  languageName: node
-  linkType: hard
-
 "@types/estree@npm:^0.0.51":
   version: 0.0.51
   resolution: "@types/estree@npm:0.0.51"
@@ -8698,6 +9017,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/json-schema@npm:^7.0.12":
+  version: 7.0.13
+  resolution: "@types/json-schema@npm:7.0.13"
+  checksum: 345df21a678fa72fb389f35f33de77833d09d4a142bb2bcb27c18690efa4cf70fc2876e43843cefb3fbdb9fcb12cd3e970a90936df30f53bbee899865ff605ab
+  languageName: node
+  linkType: hard
+
 "@types/json5@npm:^0.0.29":
   version: 0.0.29
   resolution: "@types/json5@npm:0.0.29"
@@ -8787,13 +9113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:18.11.17":
-  version: 18.11.17
-  resolution: "@types/node@npm:18.11.17"
-  checksum: 1933afd068d5c75c068c6c4df6d10edb3b0b2bb6503d544e2f0496ac007c90596e6a5e284a8ef032451bc16f871b7e46719d7d2bea60e9b25d13a77d52161cac
-  languageName: node
-  linkType: hard
-
 "@types/node@npm:^16.0.0":
   version: 16.18.23
   resolution: "@types/node@npm:16.18.23"
@@ -8840,13 +9159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prettier@npm:^2.7.2":
-  version: 2.7.2
-  resolution: "@types/prettier@npm:2.7.2"
-  checksum: b47d76a5252265f8d25dd2fe2a5a61dc43ba0e6a96ffdd00c594cb4fd74c1982c2e346497e3472805d97915407a09423804cc2110a0b8e1b22cffcab246479b7
-  languageName: node
-  linkType: hard
-
 "@types/pretty-hrtime@npm:^1.0.0":
   version: 1.0.1
   resolution: "@types/pretty-hrtime@npm:1.0.1"
@@ -8884,7 +9196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:18.0.9, @types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.0.4":
+"@types/react-dom@npm:^18.0.0":
   version: 18.0.9
   resolution: "@types/react-dom@npm:18.0.9"
   dependencies:
@@ -8893,6 +9205,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:^18.2.0":
+  version: 18.2.8
+  resolution: "@types/react-dom@npm:18.2.8"
+  dependencies:
+    "@types/react": "*"
+  checksum: d36264631028d021b73cd9e015f10b95c4959ae1ce8f7a7419f318d1f05b1d063e6afffcd2a349a6bccd64ccc9ee9d2d976e1f0437643f0e7db621fa035bca65
+  languageName: node
+  linkType: hard
+
 "@types/react-syntax-highlighter@npm:^15.5.6":
   version: 15.5.6
   resolution: "@types/react-syntax-highlighter@npm:15.5.6"
@@ -8902,7 +9223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:18.0.26, @types/react@npm:^18.0.9":
+"@types/react@npm:*":
   version: 18.0.26
   resolution: "@types/react@npm:18.0.26"
   dependencies:
@@ -8935,12 +9256,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/resolve@npm:1.17.1":
-  version: 1.17.1
-  resolution: "@types/resolve@npm:1.17.1"
+"@types/react@npm:^18.2.0":
+  version: 18.2.23
+  resolution: "@types/react@npm:18.2.23"
   dependencies:
-    "@types/node": "*"
-  checksum: dc6a6df507656004e242dcb02c784479deca516d5f4b58a1707e708022b269ae147e1da0521f3e8ad0d63638869d87e0adc023f0bd5454aa6f72ac66c7525cf5
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: efb9d1ed1940c0e7ba08a21ffba5e266d8dbbb8fe618cfb97bc902dfc96385fdd8189e3f7f64b4aa13134f8e61947d60560deb23be151253c3a97b0d070897ca
+  languageName: node
+  linkType: hard
+
+"@types/resolve@npm:1.20.2":
+  version: 1.20.2
+  resolution: "@types/resolve@npm:1.20.2"
+  checksum: 61c2cad2499ffc8eab36e3b773945d337d848d3ac6b7b0a87c805ba814bc838ef2f262fc0f109bfd8d2e0898ff8bd80ad1025f9ff64f1f71d3d4294c9f14e5f6
   languageName: node
   linkType: hard
 
@@ -8968,6 +9298,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/semver@npm:^7.5.0":
+  version: 7.5.3
+  resolution: "@types/semver@npm:7.5.3"
+  checksum: 349fdd1ab6c213bac5c991bac766bd07b8b12e63762462bb058740dcd2eb09c8193d068bb226f134661275f2022976214c0e727a4e5eb83ec1b131127c980d3e
+  languageName: node
+  linkType: hard
+
 "@types/serve-static@npm:*":
   version: 1.15.1
   resolution: "@types/serve-static@npm:1.15.1"
@@ -8985,7 +9322,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/testing-library__jest-dom@npm:^5.14.5, @types/testing-library__jest-dom@npm:^5.9.1":
+"@types/testing-library__jest-dom@npm:^5.14.5":
   version: 5.14.5
   resolution: "@types/testing-library__jest-dom@npm:5.14.5"
   dependencies:
@@ -9033,121 +9370,125 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.36.1"
+"@typescript-eslint/eslint-plugin@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/eslint-plugin@npm:6.7.3"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.36.1
-    "@typescript-eslint/type-utils": 5.36.1
-    "@typescript-eslint/utils": 5.36.1
+    "@eslint-community/regexpp": ^4.5.1
+    "@typescript-eslint/scope-manager": 6.7.3
+    "@typescript-eslint/type-utils": 6.7.3
+    "@typescript-eslint/utils": 6.7.3
+    "@typescript-eslint/visitor-keys": 6.7.3
     debug: ^4.3.4
-    functional-red-black-tree: ^1.0.1
-    ignore: ^5.2.0
-    regexpp: ^3.2.0
-    semver: ^7.3.7
-    tsutils: ^3.21.0
+    graphemer: ^1.4.0
+    ignore: ^5.2.4
+    natural-compare: ^1.4.0
+    semver: ^7.5.4
+    ts-api-utils: ^1.0.1
   peerDependencies:
-    "@typescript-eslint/parser": ^5.0.0
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    "@typescript-eslint/parser": ^6.0.0 || ^6.0.0-alpha
+    eslint: ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: a4c555688d840c3ff0d3d71ceca583291e206cc523eade45c56fb8e1c8af84ae50ef8d344cdf8e3f9c38f430bc03c95eb8d49870094e0e5b57e0fa3e61c0ec91
+  checksum: ac2790882199047abc59c0407a862f3339645623d03ea0aae5a73fd4bac6abfb753afcf9f23fd51cd1d5aa73f132ef94e2850774c4b2a3d99ebb83030b09429c
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/parser@npm:5.36.1"
+"@typescript-eslint/parser@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/parser@npm:6.7.3"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.36.1
-    "@typescript-eslint/types": 5.36.1
-    "@typescript-eslint/typescript-estree": 5.36.1
+    "@typescript-eslint/scope-manager": 6.7.3
+    "@typescript-eslint/types": 6.7.3
+    "@typescript-eslint/typescript-estree": 6.7.3
+    "@typescript-eslint/visitor-keys": 6.7.3
     debug: ^4.3.4
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    eslint: ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 0f0f94e56ae1d55b6e7223ce5a2b0c93e5cc082ef2951a2b24ae4b22bb8ffbeb90d2d16682bfa8bc972ba2c7fb4703aedd79b7dbd09bcee397e1ab90d11506d9
+  checksum: 658f3294b281db06ebb46884b92172d45eb402ec25c7d4a09cc2461eee359266029af7a49eb9006ee7c3e0003ba53a06f4bee84aa2e99d2d9a3507b9c84ff775
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/scope-manager@npm:5.36.1"
+"@typescript-eslint/scope-manager@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/scope-manager@npm:6.7.3"
   dependencies:
-    "@typescript-eslint/types": 5.36.1
-    "@typescript-eslint/visitor-keys": 5.36.1
-  checksum: c46497226af75baed7458838ec0bfbddf19f8084115d78b915b46a8ceb4c05619ac61da127dfd3c8ee11bc916896d57bf8b9f936b0306ce69658160f910e3ad0
+    "@typescript-eslint/types": 6.7.3
+    "@typescript-eslint/visitor-keys": 6.7.3
+  checksum: 08215444b7c70af5c45e185ba3c31c550a0a671ab464a67058cbee680c94aa9d1a062958976d8b09f7bcabf2f63114cdc7be2e4e32e2dfdcb2d7cc79961b7b32
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/type-utils@npm:5.36.1"
+"@typescript-eslint/type-utils@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/type-utils@npm:6.7.3"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.36.1
-    "@typescript-eslint/utils": 5.36.1
+    "@typescript-eslint/typescript-estree": 6.7.3
+    "@typescript-eslint/utils": 6.7.3
     debug: ^4.3.4
-    tsutils: ^3.21.0
+    ts-api-utils: ^1.0.1
   peerDependencies:
-    eslint: "*"
+    eslint: ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: d2905289e253a83a9eacbad765cfba03440663086c8beb1b19345b46593c9053fb051ee13d3cc27ccd800fe95ffbf3be2b1273b0f0ac6a59452fc94e6460898b
+  checksum: f30a5ab4f88f76457810d72e3ada79fefd94dbbb456069ac004bd7601c9b7f15689b906b66cd849c230f30ae65f6f7039fb169609177ab545b34bacab64f015e
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/types@npm:5.36.1"
-  checksum: 10c8965c64e16bc6920dc0c62aae2b139062aca945d03df2ad6fe7c299d2faa684621d571f8d9807a67643d4e9fa5217c69d5f538f9936fc757f9df5ded57623
+"@typescript-eslint/types@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/types@npm:6.7.3"
+  checksum: 4adb6177ec710e7438610fee553839a7abecc498dbb36d0170786bab66c5e5415cd720ac06419fd905458ad88c39b661603af5f013adc299137ccb4c51c4c879
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/typescript-estree@npm:5.36.1"
+"@typescript-eslint/typescript-estree@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/typescript-estree@npm:6.7.3"
   dependencies:
-    "@typescript-eslint/types": 5.36.1
-    "@typescript-eslint/visitor-keys": 5.36.1
+    "@typescript-eslint/types": 6.7.3
+    "@typescript-eslint/visitor-keys": 6.7.3
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
-    semver: ^7.3.7
-    tsutils: ^3.21.0
+    semver: ^7.5.4
+    ts-api-utils: ^1.0.1
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: acaf2938001673918dbbe690a353cf92e2cfabc79f74cd5946e303a8c24eb9c08ae2053dd261810ed0c9c471ebe879f386564c1b01dd2504dc84f4ce5f4dc696
+  checksum: eaba1feb0e6882b0bad292172c118aac43ba683d1f04b940b542a20035468d030b062b036ea49eca36aa21782e9b1019e87717003b3c3db7d12dc707466b7eb7
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/utils@npm:5.36.1"
+"@typescript-eslint/utils@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/utils@npm:6.7.3"
   dependencies:
-    "@types/json-schema": ^7.0.9
-    "@typescript-eslint/scope-manager": 5.36.1
-    "@typescript-eslint/types": 5.36.1
-    "@typescript-eslint/typescript-estree": 5.36.1
-    eslint-scope: ^5.1.1
-    eslint-utils: ^3.0.0
+    "@eslint-community/eslint-utils": ^4.4.0
+    "@types/json-schema": ^7.0.12
+    "@types/semver": ^7.5.0
+    "@typescript-eslint/scope-manager": 6.7.3
+    "@typescript-eslint/types": 6.7.3
+    "@typescript-eslint/typescript-estree": 6.7.3
+    semver: ^7.5.4
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 77853d526af86ac508d7938916046ed4ad6374c7414981064c5122a2baa96fa234751137f481ac264a07387fd4dcec1cd26b33e29732cc58e855aae77a001d7c
+    eslint: ^7.0.0 || ^8.0.0
+  checksum: 685b7c9fa95ad085f30e26431dc41b3059a42a16925defe2a94b32fb46974bfc168000de7d4d9ad4a1d0568a983f9d3c01ea6bc6cfa9a798e482719af9e9165b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.36.1":
-  version: 5.36.1
-  resolution: "@typescript-eslint/visitor-keys@npm:5.36.1"
+"@typescript-eslint/visitor-keys@npm:6.7.3":
+  version: 6.7.3
+  resolution: "@typescript-eslint/visitor-keys@npm:6.7.3"
   dependencies:
-    "@typescript-eslint/types": 5.36.1
-    eslint-visitor-keys: ^3.3.0
-  checksum: 45ab7c2fd455a8e4beff418bed6c9e7e1f9f66bcaad3bfaed868f97a3f8cfec1fa4faa45948af1a1c32ce573a7b1c6d10427119c257622445b06b488fefd8b49
+    "@typescript-eslint/types": 6.7.3
+    eslint-visitor-keys: ^3.4.1
+  checksum: cef64173a919107f420703e204d97d0afef0d9bd7a67570df5bdb39ac9464211c5a7b3af735d8f41e8004b443ab83e88b1d6fb951886aed4d3fe9d4778667199
   languageName: node
   linkType: hard
 
@@ -9478,7 +9819,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.1":
+"acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.1":
   version: 8.8.1
   resolution: "acorn@npm:8.8.1"
   bin:
@@ -9581,7 +9922,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.10.0, ajv@npm:^6.12.4, ajv@npm:^6.12.5":
+"ajv@npm:^6.12.4, ajv@npm:^6.12.5":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -9743,17 +10084,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^4.2.2":
-  version: 4.2.2
-  resolution: "aria-query@npm:4.2.2"
-  dependencies:
-    "@babel/runtime": ^7.10.2
-    "@babel/runtime-corejs3": ^7.10.2
-  checksum: 38401a9a400f26f3dcc24b84997461a16b32869a9893d323602bed8da40a8bcc0243b8d2880e942249a1496cea7a7de769e93d21c0baa439f01e1ee936fed665
-  languageName: node
-  linkType: hard
-
-"aria-query@npm:^5.0.0":
+"aria-query@npm:5.1.3, aria-query@npm:^5.0.0":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
   dependencies:
@@ -9762,17 +10093,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-back@npm:^3.0.1, array-back@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "array-back@npm:3.1.0"
-  checksum: 7205004fcd0f9edd926db921af901b083094608d5b265738d0290092f9822f73accb468e677db74c7c94ef432d39e5ed75a7b1786701e182efb25bbba9734209
-  languageName: node
-  linkType: hard
-
-"array-back@npm:^4.0.1, array-back@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "array-back@npm:4.0.2"
-  checksum: f30603270771eeb54e5aad5f54604c62b3577a18b6db212a7272b2b6c32049121b49431f656654790ed1469411e45f387e7627c0de8fd0515995cc40df9b9294
+"aria-query@npm:^4.2.2":
+  version: 4.2.2
+  resolution: "aria-query@npm:4.2.2"
+  dependencies:
+    "@babel/runtime": ^7.10.2
+    "@babel/runtime-corejs3": ^7.10.2
+  checksum: 38401a9a400f26f3dcc24b84997461a16b32869a9893d323602bed8da40a8bcc0243b8d2880e942249a1496cea7a7de769e93d21c0baa439f01e1ee936fed665
   languageName: node
   linkType: hard
 
@@ -10872,7 +11199,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.3.1, classnames@npm:^2.3.2":
+"classnames@npm:^2.3.1":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
@@ -11115,30 +11442,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"command-line-args@npm:^5.2.0":
-  version: 5.2.1
-  resolution: "command-line-args@npm:5.2.1"
-  dependencies:
-    array-back: ^3.1.0
-    find-replace: ^3.0.0
-    lodash.camelcase: ^4.3.0
-    typical: ^4.0.0
-  checksum: e759519087be3cf2e86af8b9a97d3058b4910cd11ee852495be881a067b72891f6a32718fb685ee6d41531ab76b2b7bfb6602f79f882cd4b7587ff1e827982c7
-  languageName: node
-  linkType: hard
-
-"command-line-usage@npm:^6.1.1":
-  version: 6.1.3
-  resolution: "command-line-usage@npm:6.1.3"
-  dependencies:
-    array-back: ^4.0.2
-    chalk: ^2.4.2
-    table-layout: ^1.0.2
-    typical: ^5.2.0
-  checksum: 8261d4e5536eb0bcddee0ec5e89c05bb2abd18e5760785c8078ede5020bc1c612cbe28eb6586f5ed4a3660689748e5aaad4a72f21566f4ef39393694e2fa1a0b
-  languageName: node
-  linkType: hard
-
 "commander@npm:^2.19.0, commander@npm:^2.20.0":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
@@ -11470,6 +11773,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"copyfiles@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "copyfiles@npm:2.4.1"
+  dependencies:
+    glob: ^7.0.5
+    minimatch: ^3.0.3
+    mkdirp: ^1.0.4
+    noms: 0.0.0
+    through2: ^2.0.1
+    untildify: ^4.0.0
+    yargs: ^16.1.0
+  bin:
+    copyfiles: copyfiles
+    copyup: copyfiles
+  checksum: aea69873bb99cc5f553967660cbfb70e4eeda198f572a36fb0f748b36877ff2c90fd906c58b1d540adbad8afa8ee82820172f1c18e69736f7ab52792c12745a7
+  languageName: node
+  linkType: hard
+
 "core-js-compat@npm:^3.25.1":
   version: 3.26.1
   resolution: "core-js-compat@npm:3.26.1"
@@ -11553,6 +11874,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^8.1.3":
+  version: 8.3.6
+  resolution: "cosmiconfig@npm:8.3.6"
+  dependencies:
+    import-fresh: ^3.3.0
+    js-yaml: ^4.1.0
+    parse-json: ^5.2.0
+    path-type: ^4.0.0
+  peerDependencies:
+    typescript: ">=4.9.5"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: dc339ebea427898c9e03bf01b56ba7afbac07fc7d2a2d5a15d6e9c14de98275a9565da949375aee1809591c152c0a3877bb86dbeaf74d5bd5aaa79955ad9e7a0
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^8.2.0":
   version: 8.2.0
   resolution: "cosmiconfig@npm:8.2.0"
@@ -11637,6 +11975,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "css-select@npm:5.1.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.1.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    nth-check: ^2.0.1
+  checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda
+  languageName: node
+  linkType: hard
+
 "css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
   version: 1.1.3
   resolution: "css-tree@npm:1.1.3"
@@ -11647,7 +11998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.3.1":
+"css-tree@npm:^2.2.1, css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
   dependencies:
@@ -11657,7 +12008,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-what@npm:^6.0.1":
+"css-tree@npm:~2.2.0":
+  version: 2.2.1
+  resolution: "css-tree@npm:2.2.1"
+  dependencies:
+    mdn-data: 2.0.28
+    source-map-js: ^1.0.1
+  checksum: b94aa8cc2f09e6f66c91548411fcf74badcbad3e150345074715012d16333ce573596ff5dfca03c2a87edf1924716db765120f94247e919d72753628ba3aba27
+  languageName: node
+  linkType: hard
+
+"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
   checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
@@ -11750,6 +12111,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csso@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "csso@npm:5.0.5"
+  dependencies:
+    css-tree: ~2.2.0
+  checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.5.0":
   version: 0.5.0
   resolution: "cssom@npm:0.5.0"
@@ -11933,13 +12303,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-extend@npm:~0.6.0":
-  version: 0.6.0
-  resolution: "deep-extend@npm:0.6.0"
-  checksum: 7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3, deep-is@npm:~0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -12156,18 +12519,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"directory-tree@npm:^3.5.1":
-  version: 3.5.1
-  resolution: "directory-tree@npm:3.5.1"
-  dependencies:
-    command-line-args: ^5.2.0
-    command-line-usage: ^6.1.1
-  bin:
-    directory-tree: bin/index.js
-  checksum: 14999d84f415c6c742c6d240d1fc9aa9d98f625df0f474cf12cc38f8784d10b1fbce782fd5591ef369c0337187728fab654a23dbbafa34bfb449c7e72363497f
-  languageName: node
-  linkType: hard
-
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -12213,7 +12564,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@@ -12238,6 +12600,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domhandler@npm:^5.0.2, domhandler@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.5.2, domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -12249,6 +12620,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "domutils@npm:3.1.0"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+  checksum: e5757456ddd173caa411cfc02c2bb64133c65546d2c4081381a3bafc8a57411a41eed70494551aa58030be9e58574fcc489828bebd673863d39924fb4878f416
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -12425,6 +12807,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.12.0":
+  version: 5.15.0
+  resolution: "enhanced-resolve@npm:5.15.0"
+  dependencies:
+    graceful-fs: ^4.2.4
+    tapable: ^2.2.0
+  checksum: fbd8cdc9263be71cc737aa8a7d6c57b43d6aa38f6cc75dde6fcd3598a130cc465f979d2f4d01bb3bf475acb43817749c79f8eef9be048683602ca91ab52e4f11
+  languageName: node
+  linkType: hard
+
 "enquirer@npm:~2.3.6":
   version: 2.3.6
   resolution: "enquirer@npm:2.3.6"
@@ -12441,6 +12833,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
+  languageName: node
+  linkType: hard
+
 "entities@npm:^4.4.0":
   version: 4.4.0
   resolution: "entities@npm:4.4.0"
@@ -12777,21 +13176,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-import-resolver-typescript@npm:3.5.0":
-  version: 3.5.0
-  resolution: "eslint-import-resolver-typescript@npm:3.5.0"
+"eslint-import-resolver-typescript@npm:3.6.1":
+  version: 3.6.1
+  resolution: "eslint-import-resolver-typescript@npm:3.6.1"
   dependencies:
     debug: ^4.3.4
-    enhanced-resolve: ^5.10.0
-    get-tsconfig: ^4.2.0
-    globby: ^13.1.2
-    is-core-module: ^2.10.0
+    enhanced-resolve: ^5.12.0
+    eslint-module-utils: ^2.7.4
+    fast-glob: ^3.3.1
+    get-tsconfig: ^4.5.0
+    is-core-module: ^2.11.0
     is-glob: ^4.0.3
-    synckit: ^0.8.3
   peerDependencies:
     eslint: "*"
     eslint-plugin-import: "*"
-  checksum: 9719d1f68b7bb0eaf8939cff2d3b02b526949f73db744877de781640650dd4d0a17d934222b9ac69e27d9f363ee4569c1aa1a2a2aab6500257517f9bf7d25976
+  checksum: 454fa0646533050fb57f13d27daf8c71f51b0bb9156d6a461290ccb8576d892209fcc6702a89553f3f5ea8e5b407395ca2e5de169a952c953685f1f7c46b4496
   languageName: node
   linkType: hard
 
@@ -12807,6 +13206,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-module-utils@npm:^2.7.4":
+  version: 2.8.0
+  resolution: "eslint-module-utils@npm:2.8.0"
+  dependencies:
+    debug: ^3.2.7
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: 74c6dfea7641ebcfe174be61168541a11a14aa8d72e515f5f09af55cd0d0862686104b0524aa4b8e0ce66418a44aa38a94d2588743db5fd07a6b49ffd16921d2
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-import@npm:2.26.0":
   version: 2.26.0
   resolution: "eslint-plugin-import@npm:2.26.0"
@@ -12901,7 +13312,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
+"eslint-scope@npm:5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
   dependencies:
@@ -12911,31 +13322,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "eslint-scope@npm:7.1.1"
+"eslint-scope@npm:^7.2.2":
+  version: 7.2.2
+  resolution: "eslint-scope@npm:7.2.2"
   dependencies:
     esrecurse: ^4.3.0
     estraverse: ^5.2.0
-  checksum: 9f6e974ab2db641ca8ab13508c405b7b859e72afe9f254e8131ff154d2f40c99ad4545ce326fd9fde3212ff29707102562a4834f1c48617b35d98c71a97fbf3e
-  languageName: node
-  linkType: hard
-
-"eslint-utils@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "eslint-utils@npm:3.0.0"
-  dependencies:
-    eslint-visitor-keys: ^2.0.0
-  peerDependencies:
-    eslint: ">=5"
-  checksum: 0668fe02f5adab2e5a367eee5089f4c39033af20499df88fe4e6aba2015c20720404d8c3d6349b6f716b08fdf91b9da4e5d5481f265049278099c4c836ccb619
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "eslint-visitor-keys@npm:2.1.0"
-  checksum: e3081d7dd2611a35f0388bbdc2f5da60b3a3c5b8b6e928daffff7391146b434d691577aa95064c8b7faad0b8a680266bcda0a42439c18c717b80e6718d7e267d
+  checksum: ec97dbf5fb04b94e8f4c5a91a7f0a6dd3c55e46bfc7bbcd0e3138c3a76977570e02ed89a1810c778dcd72072ff0e9621ba1379b4babe53921d71e2e4486fda3e
   languageName: node
   linkType: hard
 
@@ -12946,63 +13339,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:8.22.0":
-  version: 8.22.0
-  resolution: "eslint@npm:8.22.0"
+"eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 36e9ef87fca698b6fd7ca5ca35d7b2b6eeaaf106572e2f7fd31c12d3bfdaccdb587bba6d3621067e5aece31c8c3a348b93922ab8f7b2cbc6aaab5e1d89040c60
+  languageName: node
+  linkType: hard
+
+"eslint@npm:8.50.0":
+  version: 8.50.0
+  resolution: "eslint@npm:8.50.0"
   dependencies:
-    "@eslint/eslintrc": ^1.3.0
-    "@humanwhocodes/config-array": ^0.10.4
-    "@humanwhocodes/gitignore-to-minimatch": ^1.0.2
-    ajv: ^6.10.0
+    "@eslint-community/eslint-utils": ^4.2.0
+    "@eslint-community/regexpp": ^4.6.1
+    "@eslint/eslintrc": ^2.1.2
+    "@eslint/js": 8.50.0
+    "@humanwhocodes/config-array": ^0.11.11
+    "@humanwhocodes/module-importer": ^1.0.1
+    "@nodelib/fs.walk": ^1.2.8
+    ajv: ^6.12.4
     chalk: ^4.0.0
     cross-spawn: ^7.0.2
     debug: ^4.3.2
     doctrine: ^3.0.0
     escape-string-regexp: ^4.0.0
-    eslint-scope: ^7.1.1
-    eslint-utils: ^3.0.0
-    eslint-visitor-keys: ^3.3.0
-    espree: ^9.3.3
-    esquery: ^1.4.0
+    eslint-scope: ^7.2.2
+    eslint-visitor-keys: ^3.4.3
+    espree: ^9.6.1
+    esquery: ^1.4.2
     esutils: ^2.0.2
     fast-deep-equal: ^3.1.3
     file-entry-cache: ^6.0.1
     find-up: ^5.0.0
-    functional-red-black-tree: ^1.0.1
-    glob-parent: ^6.0.1
-    globals: ^13.15.0
-    globby: ^11.1.0
-    grapheme-splitter: ^1.0.4
+    glob-parent: ^6.0.2
+    globals: ^13.19.0
+    graphemer: ^1.4.0
     ignore: ^5.2.0
-    import-fresh: ^3.0.0
     imurmurhash: ^0.1.4
     is-glob: ^4.0.0
+    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.1
-    regexpp: ^3.2.0
+    optionator: ^0.9.3
     strip-ansi: ^6.0.1
-    strip-json-comments: ^3.1.0
     text-table: ^0.2.0
-    v8-compile-cache: ^2.0.3
   bin:
     eslint: bin/eslint.js
-  checksum: 2d84a7a2207138cdb250759b047fdb05a57fede7f87b7a039d9370edba7f26e23a873a208becfd4b2c9e4b5499029f3fc3b9318da3290e693d25c39084119c80
+  checksum: 9ebfe5615dc84700000d218e32ddfdcfc227ca600f65f18e5541ec34f8902a00356a9a8804d9468fd6c8637a5ef6a3897291dad91ba6579d5b32ffeae5e31768
   languageName: node
   linkType: hard
 
-"espree@npm:^9.3.3, espree@npm:^9.4.0":
-  version: 9.4.1
-  resolution: "espree@npm:9.4.1"
+"espree@npm:^9.6.0, espree@npm:^9.6.1":
+  version: 9.6.1
+  resolution: "espree@npm:9.6.1"
   dependencies:
-    acorn: ^8.8.0
+    acorn: ^8.9.0
     acorn-jsx: ^5.3.2
-    eslint-visitor-keys: ^3.3.0
-  checksum: 4d266b0cf81c7dfe69e542c7df0f246e78d29f5b04dda36e514eb4c7af117ee6cfbd3280e560571ed82ff6c9c3f0003c05b82583fc7a94006db7497c4fe4270e
+    eslint-visitor-keys: ^3.4.1
+  checksum: eb8c149c7a2a77b3f33a5af80c10875c3abd65450f60b8af6db1bfcfa8f101e21c1e56a561c6dc13b848e18148d43469e7cd208506238554fb5395a9ea5a1ab9
   languageName: node
   linkType: hard
 
@@ -13016,12 +13414,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esquery@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "esquery@npm:1.4.0"
+"esquery@npm:^1.4.2":
+  version: 1.5.0
+  resolution: "esquery@npm:1.5.0"
   dependencies:
     estraverse: ^5.1.0
-  checksum: a0807e17abd7fbe5fbd4fab673038d6d8a50675cdae6b04fbaa520c34581be0c5fa24582990e8acd8854f671dd291c78bb2efb9e0ed5b62f33bac4f9cf820210
+  checksum: aefb0d2596c230118656cd4ec7532d447333a410a48834d80ea648b1e7b5c9bc9ed8b5e33a89cb04e487b60d622f44cf5713bf4abed7c97343edefdc84a35900
   languageName: node
   linkType: hard
 
@@ -13114,14 +13512,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "estree-walker@npm:1.0.1"
-  checksum: 7e70da539691f6db03a08e7ce94f394ce2eef4180e136d251af299d41f92fb2d28ebcd9a6e393e3728d7970aeb5358705ddf7209d52fbcb2dd4693f95dcf925f
-  languageName: node
-  linkType: hard
-
-"estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2":
+"estree-walker@npm:^2.0.2":
   version: 2.0.2
   resolution: "estree-walker@npm:2.0.2"
   checksum: 6151e6f9828abe2259e57f5fd3761335bb0d2ebd76dc1a01048ccee22fabcfef3c0859300f6d83ff0d1927849368775ec5a6d265dde2f6de5a1be1721cd94efc
@@ -13265,15 +13656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend-shallow@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "extend-shallow@npm:2.0.1"
-  dependencies:
-    is-extendable: ^0.1.0
-  checksum: 8fb58d9d7a511f4baf78d383e637bd7d2e80843bd9cd0853649108ea835208fb614da502a553acc30208e1325240bb7cc4a68473021612496bb89725483656d8
-  languageName: node
-  linkType: hard
-
 "extend@npm:^3.0.0":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
@@ -13333,7 +13715,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.9":
+"fast-glob@npm:^3.2.9":
   version: 3.2.12
   resolution: "fast-glob@npm:3.2.12"
   dependencies:
@@ -13359,6 +13741,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "fast-glob@npm:3.3.1"
+  dependencies:
+    "@nodelib/fs.stat": ^2.0.2
+    "@nodelib/fs.walk": ^1.2.3
+    glob-parent: ^5.1.2
+    merge2: ^1.3.0
+    micromatch: ^4.0.4
+  checksum: b6f3add6403e02cf3a798bfbb1183d0f6da2afd368f27456010c0bc1f9640aea308243d4cb2c0ab142f618276e65ecb8be1661d7c62a7b4e5ba774b9ce5432e5
+  languageName: node
+  linkType: hard
+
 "fast-json-parse@npm:^1.0.3":
   version: 1.0.3
   resolution: "fast-json-parse@npm:1.0.3"
@@ -13529,15 +13924,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-replace@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "find-replace@npm:3.0.0"
-  dependencies:
-    array-back: ^3.0.1
-  checksum: 6b04bcfd79027f5b84aa1dfe100e3295da989bdac4b4de6b277f4d063e78f5c9e92ebc8a1fec6dd3b448c924ba404ee051cc759e14a3ee3e825fa1361025df08
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^2.0.0":
   version: 2.1.0
   resolution: "find-up@npm:2.1.0"
@@ -13831,13 +14217,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"functional-red-black-tree@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "functional-red-black-tree@npm:1.0.1"
-  checksum: ca6c170f37640e2d94297da8bb4bf27a1d12bea3e00e6a3e007fd7aa32e37e000f5772acf941b4e4f3cf1c95c3752033d0c509af157ad8f526e7f00723b9eb9f
-  languageName: node
-  linkType: hard
-
 "functions-have-names@npm:^1.2.2":
   version: 1.2.3
   resolution: "functions-have-names@npm:1.2.3"
@@ -13961,10 +14340,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-tsconfig@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "get-tsconfig@npm:4.2.0"
-  checksum: dfae3520bee20b71a651fdc93fd29901013dfc4df9fb41a423cf3efb4468c79087ef9d3bc3d0625b6486397730991d2a749eed4985d8ab411f481319c3e931e5
+"get-tsconfig@npm:^4.5.0":
+  version: 4.7.2
+  resolution: "get-tsconfig@npm:4.7.2"
+  dependencies:
+    resolve-pkg-maps: ^1.0.0
+  checksum: 172358903250eff0103943f816e8a4e51d29b8e5449058bdf7266714a908a48239f6884308bd3a6ff28b09f692b9533dbebfd183ab63e4e14f073cda91f1bca9
   languageName: node
   linkType: hard
 
@@ -14086,7 +14467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^6.0.1":
+"glob-parent@npm:^6.0.2":
   version: 6.0.2
   resolution: "glob-parent@npm:6.0.2"
   dependencies:
@@ -14160,7 +14541,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
+"glob@npm:^7.0.5, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -14235,19 +14616,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.15.0":
-  version: 13.18.0
-  resolution: "globals@npm:13.18.0"
+"globals@npm:^13.19.0":
+  version: 13.22.0
+  resolution: "globals@npm:13.22.0"
   dependencies:
     type-fest: ^0.20.2
-  checksum: 9fdaa74cfd5d4ac91319662f512c29b11d1d2deb9c8a20d3998097671deba83d195f20730b2345887de3ddab958a6fa68952feed9ae836ee4594a82ace62fdb4
-  languageName: node
-  linkType: hard
-
-"globalyzer@npm:0.1.0":
-  version: 0.1.0
-  resolution: "globalyzer@npm:0.1.0"
-  checksum: 419a0f95ba542534fac0842964d31b3dc2936a479b2b1a8a62bad7e8b61054faa9b0a06ad9f2e12593396b9b2621cac93358d9b3071d33723fb1778608d358a1
+  checksum: 64af5a09565341432770444085f7aa98b54331c3b69732e0de411003921fa2dd060222ae7b50bec0b98f29c4d00b4f49bf434049ba9f7c36ca4ee1773f60458c
   languageName: node
   linkType: hard
 
@@ -14265,19 +14639,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^13.1.2":
-  version: 13.1.2
-  resolution: "globby@npm:13.1.2"
-  dependencies:
-    dir-glob: ^3.0.1
-    fast-glob: ^3.2.11
-    ignore: ^5.2.0
-    merge2: ^1.4.1
-    slash: ^4.0.0
-  checksum: c148fcda0c981f00fb434bb94ca258f0a9d23cedbde6fb3f37098e1abde5b065019e2c63fe2aa2fad4daf2b54bf360b4d0423d85fb3a63d09ed75a2837d4de0f
-  languageName: node
-  linkType: hard
-
 "globjoin@npm:^0.1.4":
   version: 0.1.4
   resolution: "globjoin@npm:0.1.4"
@@ -14285,13 +14646,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globrex@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "globrex@npm:0.1.2"
-  checksum: adca162494a176ce9ecf4dd232f7b802956bb1966b37f60c15e49d2e7d961b66c60826366dc2649093cad5a0d69970cfa8875bd1695b5a1a2f33dcd2aa88da3c
-  languageName: node
-  linkType: hard
-
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -14315,22 +14669,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"grapheme-splitter@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "grapheme-splitter@npm:1.0.4"
-  checksum: 0c22ec54dee1b05cd480f78cf14f732cb5b108edc073572c4ec205df4cd63f30f8db8025afc5debc8835a8ddeacf648a1c7992fe3dcd6ad38f9a476d84906620
-  languageName: node
-  linkType: hard
-
-"gray-matter@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "gray-matter@npm:4.0.3"
-  dependencies:
-    js-yaml: ^3.13.1
-    kind-of: ^6.0.2
-    section-matter: ^1.0.0
-    strip-bom-string: ^1.0.0
-  checksum: 37717bd424344487d655392251ce8d8878a1275ee087003e61208fba3bfd59cbb73a85b2159abf742ae95e23db04964813fdc33ae18b074208428b2528205222
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: bab8f0be9b568857c7bec9fda95a89f87b783546d02951c40c33f84d05bb7da3fd10f863a9beb901463669b6583173a8c8cc6d6b306ea2b9b9d5d3d943c3a673
   languageName: node
   linkType: hard
 
@@ -14885,7 +15227,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
+"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -14961,7 +15303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3":
+"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.1, inherits@npm:~2.0.3":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -15147,12 +15489,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-builtin-module@npm:^3.1.0":
-  version: 3.2.0
-  resolution: "is-builtin-module@npm:3.2.0"
+"is-builtin-module@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "is-builtin-module@npm:3.2.1"
   dependencies:
     builtin-modules: ^3.3.0
-  checksum: 0315751b898feff0646511c896e88b608a755c5025d0ce9a3ad25783de50be870e47dafb838cebbb06fbb2a948b209ea55348eee267836c9dd40d3a11ec717d3
+  checksum: e8f0ffc19a98240bda9c7ada84d846486365af88d14616e737d280d378695c8c448a621dcafc8332dbf0fcd0a17b0763b845400709963fa9151ddffece90ae88
   languageName: node
   linkType: hard
 
@@ -15174,7 +15516,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.10.0, is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
+"is-core-module@npm:^2.11.0, is-core-module@npm:^2.13.0":
+  version: 2.13.0
+  resolution: "is-core-module@npm:2.13.0"
+  dependencies:
+    has: ^1.0.3
+  checksum: 053ab101fb390bfeb2333360fd131387bed54e476b26860dc7f5a700bbf34a0ec4454f7c8c4d43e8a0030957e4b3db6e16d35e1890ea6fb654c833095e040355
+  languageName: node
+  linkType: hard
+
+"is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
   version: 2.11.0
   resolution: "is-core-module@npm:2.11.0"
   dependencies:
@@ -15222,13 +15573,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "is-extendable@npm:0.1.1"
-  checksum: 3875571d20a7563772ecc7a5f36cb03167e9be31ad259041b4a8f73f33f885441f778cee1f1fe0085eb4bc71679b9d8c923690003a36a6a5fdf8023e6e3f0672
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -15371,7 +15715,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-path-inside@npm:^3.0.2":
+"is-path-inside@npm:^3.0.2, is-path-inside@npm:^3.0.3":
   version: 3.0.3
   resolution: "is-path-inside@npm:3.0.3"
   checksum: abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9
@@ -15415,7 +15759,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-reference@npm:^1.2.1":
+"is-reference@npm:1.2.1":
   version: 1.2.1
   resolution: "is-reference@npm:1.2.1"
   dependencies:
@@ -15571,6 +15915,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isarray@npm:0.0.1":
+  version: 0.0.1
+  resolution: "isarray@npm:0.0.1"
+  checksum: 49191f1425681df4a18c2f0f93db3adb85573bcdd6a4482539d98eac9e705d8961317b01175627e860516a2fc45f8f9302db26e5a380a97a520e272e2a40a8d4
+  languageName: node
+  linkType: hard
+
 "isarray@npm:^2.0.5":
   version: 2.0.5
   resolution: "isarray@npm:2.0.5"
@@ -16194,17 +16545,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^26.2.1":
-  version: 26.6.2
-  resolution: "jest-worker@npm:26.6.2"
-  dependencies:
-    "@types/node": "*"
-    merge-stream: ^2.0.0
-    supports-color: ^7.0.0
-  checksum: f9afa3b88e3f12027901e4964ba3ff048285b5783b5225cab28fac25b4058cea8ad54001e9a1577ee2bed125fac3ccf5c80dc507b120300cc1bbcb368796533e
-  languageName: node
-  linkType: hard
-
 "jest-worker@npm:^27.4.5":
   version: 27.5.1
   resolution: "jest-worker@npm:27.5.1"
@@ -16492,7 +16832,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
+"kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
   checksum: 3ab01e7b1d440b22fe4c31f23d8d38b4d9b91d9f291df683476576493d5dfd2e03848a8b05813dd0c3f0e835bc63f433007ddeceb71f05cb25c45ae1b19c6d3b
@@ -17037,30 +17377,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4":
-  version: 1.4.4
-  resolution: "lz-string@npm:1.4.4"
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
   bin:
     lz-string: bin/bin.js
-  checksum: 54e31238a61a84d8f664d9860a9fba7310c5b97a52c444f80543069bc084815eff40b8d4474ae1d93992fdf6c252dca37cf27f6adbeb4dbc3df2f3ac773d0e61
-  languageName: node
-  linkType: hard
-
-"magic-string@npm:^0.25.7":
-  version: 0.25.9
-  resolution: "magic-string@npm:0.25.9"
-  dependencies:
-    sourcemap-codec: ^1.4.8
-  checksum: 9a0e55a15c7303fc360f9572a71cffba1f61451bc92c5602b1206c9d17f492403bf96f946dfce7483e66822d6b74607262e24392e87b0ac27b786e69a40e9b1a
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.26.6":
-  version: 0.26.7
-  resolution: "magic-string@npm:0.26.7"
+"magic-string@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "magic-string@npm:0.27.0"
   dependencies:
-    sourcemap-codec: ^1.4.8
-  checksum: 89b0d60cbb32bbf3d1e23c46ea93db082d18a8230b972027aecb10a40bba51be519ecce0674f995571e3affe917b76b09f59d8dbc9a1b2c9c4102a2b6e8a2b01
+    "@jridgewell/sourcemap-codec": ^1.4.13
+  checksum: 273faaa50baadb7a2df6e442eac34ad611304fc08fe16e24fe2e472fd944bfcb73ffb50d2dc972dc04e92784222002af46868cb9698b1be181c81830fd95a13e
   languageName: node
   linkType: hard
 
@@ -17471,6 +17802,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.28":
+  version: 2.0.28
+  resolution: "mdn-data@npm:2.0.28"
+  checksum: f51d587a6ebe8e426c3376c74ea6df3e19ec8241ed8e2466c9c8a3904d5d04397199ea4f15b8d34d14524b5de926d8724ae85207984be47e165817c26e49e0aa
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.30":
   version: 2.0.30
   resolution: "mdn-data@npm:2.0.30"
@@ -18113,7 +18451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:^3.0.2, minimatch@npm:^3.0.3, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -18326,13 +18664,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"moment@npm:^2.29.4":
-  version: 2.29.4
-  resolution: "moment@npm:2.29.4"
-  checksum: 0ec3f9c2bcba38dc2451b1daed5daded747f17610b92427bebe1d08d48d8b7bdd8d9197500b072d14e326dd0ccf3e326b9e3d07c5895d3d49e39b6803b76e80e
-  languageName: node
-  linkType: hard
-
 "mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -18655,6 +18986,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"noms@npm:0.0.0":
+  version: 0.0.0
+  resolution: "noms@npm:0.0.0"
+  dependencies:
+    inherits: ^2.0.1
+    readable-stream: ~1.0.31
+  checksum: a05f056dabf764c86472b6b5aad10455f3adcb6971f366cdf36a72b559b29310a940e316bca30802f2804fdd41707941366224f4cba80c4f53071512245bf200
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -19121,17 +19462,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optionator@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "optionator@npm:0.9.1"
+"optionator@npm:^0.9.3":
+  version: 0.9.3
+  resolution: "optionator@npm:0.9.3"
   dependencies:
+    "@aashutoshrathi/word-wrap": ^1.2.3
     deep-is: ^0.1.3
     fast-levenshtein: ^2.0.6
     levn: ^0.4.1
     prelude-ls: ^1.2.1
     type-check: ^0.4.0
-    word-wrap: ^1.2.3
-  checksum: dbc6fa065604b24ea57d734261914e697bd73b69eff7f18e967e8912aa2a40a19a9f599a507fa805be6c13c24c4eae8c71306c239d517d42d4c041c942f508a0
+  checksum: 09281999441f2fe9c33a5eeab76700795365a061563d66b098923eb719251a42bdbe432790d35064d0816ead9296dbeb1ad51a733edf4167c96bd5d0882e428a
   languageName: node
   linkType: hard
 
@@ -19596,7 +19937,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -20147,47 +20488,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^7.0.30 || ^8.0.0":
-  version: 8.4.19
-  resolution: "postcss@npm:8.4.19"
-  dependencies:
-    nanoid: ^3.3.4
-    picocolors: ^1.0.0
-    source-map-js: ^1.0.2
-  checksum: 62782723a385f92b7525f66d29614624de7c5643855423db3a5efd9287e677650300192749adddbbb6734cea9b1d5f5fd4f6ea00ca3f9a95dbbb88f835f5ca64
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.0.0, postcss@npm:^8.4.16, postcss@npm:^8.4.21":
-  version: 8.4.21
-  resolution: "postcss@npm:8.4.21"
-  dependencies:
-    nanoid: ^3.3.4
-    picocolors: ^1.0.0
-    source-map-js: ^1.0.2
-  checksum: e39ac60ccd1542d4f9d93d894048aac0d686b3bb38e927d8386005718e6793dbbb46930f0a523fe382f1bbd843c6d980aaea791252bf5e176180e5a4336d9679
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.4.19":
-  version: 8.4.22
-  resolution: "postcss@npm:8.4.22"
-  dependencies:
-    nanoid: ^3.3.6
-    picocolors: ^1.0.0
-    source-map-js: ^1.0.2
-  checksum: 7473dfb7ac5b4cb03576c39d687d7fc02c826ab08af97df15b5d3970662532d44a18a0994f392a9c3658ee17c292e7a55990e586b90ca0afcc9f36df13e07029
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.4.24":
-  version: 8.4.25
-  resolution: "postcss@npm:8.4.25"
+"postcss@npm:^7.0.30 || ^8.0.0, postcss@npm:^8.0.0, postcss@npm:^8.4.16, postcss@npm:^8.4.19, postcss@npm:^8.4.21, postcss@npm:^8.4.24":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
   dependencies:
     nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 9ed3ab8af43ad5210c28f56f916fd9b8c9f94fbeaebbf645dcf579bc28bdd8056c2a7ecc934668d399b81fedb6128f0c4b299f931e50454964bc911c25a3a0a2
+  checksum: 1d8611341b073143ad90486fcdfeab49edd243377b1f51834dc4f6d028e82ce5190e4f11bb2633276864503654fb7cab28e67abdc0fbf9d1f88cad4a0ff0beea
   languageName: node
   linkType: hard
 
@@ -20232,15 +20540,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.8.3":
-  version: 2.8.3
-  resolution: "prettier@npm:2.8.3"
-  bin:
-    prettier: bin-prettier.js
-  checksum: 92f2ceb522d454370e02082aa74ad27388672f7cee8975028b59517c069fe643bdc73e322675c8faf2ff173d7a626d1a6389f26b474000308e793aa25fff46e5
-  languageName: node
-  linkType: hard
-
 "pretty-error@npm:^4.0.0":
   version: 4.0.0
   resolution: "pretty-error@npm:4.0.0"
@@ -20652,7 +20951,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:18.2.0, react-dom@npm:^18.0.0":
+"react-dom@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
   dependencies:
@@ -20766,7 +21065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-number-format@npm:^5.1.1, react-number-format@npm:^5.1.3":
+"react-number-format@npm:^5.1.1":
   version: 5.1.3
   resolution: "react-number-format@npm:5.1.3"
   dependencies:
@@ -20864,7 +21163,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:18.2.0, react@npm:^18.1.0":
+"react@npm:^18.1.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
   dependencies:
@@ -21004,6 +21303,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readable-stream@npm:~1.0.31":
+  version: 1.0.34
+  resolution: "readable-stream@npm:1.0.34"
+  dependencies:
+    core-util-is: ~1.0.0
+    inherits: ~2.0.1
+    isarray: 0.0.1
+    string_decoder: ~0.10.x
+  checksum: 85042c537e4f067daa1448a7e257a201070bfec3dd2706abdbd8ebc7f3418eb4d3ed4b8e5af63e2544d69f88ab09c28d5da3c0b77dc76185fddd189a59863b60
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -21058,13 +21369,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reduce-flatten@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "reduce-flatten@npm:2.0.0"
-  checksum: 64393ef99a16b20692acfd60982d7fdbd7ff8d9f8f185c6023466444c6dd2abb929d67717a83cec7f7f8fb5f46a25d515b3b2bf2238fdbfcdbfd01d2a9e73cb8
-  languageName: node
-  linkType: hard
-
 "refractor@npm:^3.6.0":
   version: 3.6.0
   resolution: "refractor@npm:3.6.0"
@@ -21128,13 +21432,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexpp@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "regexpp@npm:3.2.0"
-  checksum: a78dc5c7158ad9ddcfe01aa9144f46e192ddbfa7b263895a70a5c6c73edd9ce85faf7c0430e59ac38839e1734e275b9c3de5c57ee3ab6edc0e0b1bdebefccef8
-  languageName: node
-  linkType: hard
-
 "regexpu-core@npm:^5.2.1":
   version: 5.2.2
   resolution: "regexpu-core@npm:5.2.2"
@@ -21385,6 +21682,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-pkg-maps@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "resolve-pkg-maps@npm:1.0.0"
+  checksum: 1012afc566b3fdb190a6309cc37ef3b2dcc35dff5fa6683a9d00cd25c3247edfbc4691b91078c97adc82a29b77a2660c30d791d65dab4fc78bfc473f60289977
+  languageName: node
+  linkType: hard
+
 "resolve.exports@npm:^1.1.0":
   version: 1.1.0
   resolution: "resolve.exports@npm:1.1.0"
@@ -21392,7 +21696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0":
+"resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -21405,6 +21709,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:^1.22.1":
+  version: 1.22.6
+  resolution: "resolve@npm:1.22.6"
+  dependencies:
+    is-core-module: ^2.13.0
+    path-parse: ^1.0.7
+    supports-preserve-symlinks-flag: ^1.0.0
+  bin:
+    resolve: bin/resolve
+  checksum: d13bf66d4e2ee30d291491f16f2fa44edd4e0cefb85d53249dd6f93e70b2b8c20ec62f01b18662e3cd40e50a7528f18c4087a99490048992a3bb954cf3201a5b
+  languageName: node
+  linkType: hard
+
 "resolve@npm:^2.0.0-next.3":
   version: 2.0.0-next.4
   resolution: "resolve@npm:2.0.0-next.4"
@@ -21418,7 +21735,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
   dependencies:
@@ -21431,6 +21748,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>":
+  version: 1.22.6
+  resolution: "resolve@patch:resolve@npm%3A1.22.6#~builtin<compat/resolve>::version=1.22.6&hash=c3c19d"
+  dependencies:
+    is-core-module: ^2.13.0
+    path-parse: ^1.0.7
+    supports-preserve-symlinks-flag: ^1.0.0
+  bin:
+    resolve: bin/resolve
+  checksum: 9d3b3c67aefd12cecbe5f10ca4d1f51ea190891096497c43f301b086883b426466918c3a64f1bbf1788fabb52b579d58809614006c5d0b49186702b3b8fb746a
+  languageName: node
+  linkType: hard
+
 "resolve@patch:resolve@^2.0.0-next.3#~builtin<compat/resolve>":
   version: 2.0.0-next.4
   resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
@@ -21523,22 +21853,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-dts@npm:^4.2.2":
-  version: 4.2.3
-  resolution: "rollup-plugin-dts@npm:4.2.3"
-  dependencies:
-    "@babel/code-frame": ^7.18.6
-    magic-string: ^0.26.6
-  peerDependencies:
-    rollup: ^2.55
-    typescript: ^4.1
-  dependenciesMeta:
-    "@babel/code-frame":
-      optional: true
-  checksum: b1de94202d0574e7c12105bf0d013e7142c1b9b74d6b83d194d870dcdc281e90cff45ed47a0ab1c62280cc25e75f522e1278ec0ba89c8f75b8bcb56dc98c2c63
-  languageName: node
-  linkType: hard
-
 "rollup-plugin-peer-deps-external@npm:^2.2.4":
   version: 2.2.4
   resolution: "rollup-plugin-peer-deps-external@npm:2.2.4"
@@ -21571,20 +21885,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-terser@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "rollup-plugin-terser@npm:7.0.2"
-  dependencies:
-    "@babel/code-frame": ^7.10.4
-    jest-worker: ^26.2.1
-    serialize-javascript: ^4.0.0
-    terser: ^5.0.0
-  peerDependencies:
-    rollup: ^2.0.0
-  checksum: af84bb7a7a894cd00852b6486528dfb8653cf94df4c126f95f389a346f401d054b08c46bee519a2ab6a22b33804d1d6ac6d8c90b1b2bf8fffb097eed73fc3c72
-  languageName: node
-  linkType: hard
-
 "rollup-pluginutils@npm:^2.8.2":
   version: 2.8.2
   resolution: "rollup-pluginutils@npm:2.8.2"
@@ -21594,9 +21894,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^2.79.0":
-  version: 2.79.1
-  resolution: "rollup@npm:2.79.1"
+"rollup@npm:^3.29.4":
+  version: 3.29.4
+  resolution: "rollup@npm:3.29.4"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -21604,7 +21904,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 6a2bf167b3587d4df709b37d149ad0300692cc5deb510f89ac7bdc77c8738c9546ae3de9322b0968e1ed2b0e984571f5f55aae28fa7de4cfcb1bc5402a4e2be6
+  checksum: 8bb20a39c8d91130825159c3823eccf4dc2295c9a0a5c4ed851a5bf2167dbf24d9a29f23461a54c955e5506395e6cc188eafc8ab0e20399d7489fb33793b184e
   languageName: node
   linkType: hard
 
@@ -21623,11 +21923,10 @@ __metadata:
     "@digdir/design-system-tokens": "*"
     "@etchteam/storybook-addon-css-variables-theme": ^1.5.1
     "@next/eslint-plugin-next": ^13.2.4
-    "@rollup/plugin-commonjs": ^22.0.2
-    "@rollup/plugin-image": ^3.0.1
-    "@rollup/plugin-json": ^5.0.2
-    "@rollup/plugin-node-resolve": ^14.0.0
-    "@rollup/plugin-typescript": ^8.5.0
+    "@rollup/plugin-commonjs": ^25.0.4
+    "@rollup/plugin-image": ^3.0.2
+    "@rollup/plugin-json": ^6.0.0
+    "@rollup/plugin-node-resolve": ^15.2.1
     "@storybook/addon-a11y": ^7.4.0
     "@storybook/addon-essentials": ^7.4.0
     "@storybook/addon-interactions": ^7.4.0
@@ -21639,24 +21938,25 @@ __metadata:
     "@storybook/theming": ^7.4.0
     "@svgr/cli": ^6.5.1
     "@svgr/core": ^6.5.1
-    "@svgr/rollup": ^6.5.1
-    "@testing-library/jest-dom": 5.16.5
-    "@testing-library/react": ^13.4.0
-    "@testing-library/user-event": ^14.4.3
+    "@svgr/rollup": ^8.1.0
+    "@testing-library/jest-dom": 6.1.3
+    "@testing-library/react": ^14.0.0
+    "@testing-library/user-event": ^14.5.1
     "@types/jest": ^29.0.0
     "@types/node": ^18.11.11
-    "@types/react": ^18.0.9
-    "@types/react-dom": ^18.0.4
+    "@types/react": ^18.2.0
+    "@types/react-dom": ^18.2.0
     "@types/rimraf": ^3.0.2
     "@types/testing-library__jest-dom": ^5.14.5
-    "@typescript-eslint/eslint-plugin": 5.36.1
-    "@typescript-eslint/parser": 5.36.1
+    "@typescript-eslint/eslint-plugin": 6.7.3
+    "@typescript-eslint/parser": 6.7.3
     babel-jest: ^29.5.0
     babel-loader: ^9.1.2
     classnames: ^2.3.1
-    eslint: 8.22.0
+    copyfiles: ^2.4.1
+    eslint: 8.50.0
     eslint-config-prettier: 8.5.0
-    eslint-import-resolver-typescript: 3.5.0
+    eslint-import-resolver-typescript: 3.6.1
     eslint-plugin-import: 2.26.0
     eslint-plugin-jsx-a11y: 6.6.1
     eslint-plugin-prettier: 4.2.1
@@ -21674,11 +21974,9 @@ __metadata:
     react-markdown: ^8.0.5
     remark-gfm: ^3.0.1
     rimraf: ^5.0.0
-    rollup: ^2.79.0
-    rollup-plugin-dts: ^4.2.2
+    rollup: ^3.29.4
     rollup-plugin-peer-deps-external: ^2.2.4
     rollup-plugin-postcss: ^4.0.2
-    rollup-plugin-terser: ^7.0.2
     storybook: ^7.4.0
     storybook-css-modules: ^1.0.8
     stylelint: ^15.3.0
@@ -21686,11 +21984,10 @@ __metadata:
     stylelint-config-prettier: ^9.0.5
     stylelint-config-standard: ^31.0.0
     stylelint-prettier: ^3.0.0
-    terser: ^5.16.0
     ts-jest: ^29.1.0
     ts-node: ^10.9.1
     tslib: ^2.4.1
-    typescript: ^4.9.5
+    typescript: ^5.2.2
     typescript-plugin-css-modules: ^5.0.0
   languageName: unknown
   linkType: soft
@@ -21836,16 +22133,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"section-matter@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "section-matter@npm:1.0.0"
-  dependencies:
-    extend-shallow: ^2.0.1
-    kind-of: ^6.0.0
-  checksum: 3cc4131705493b2955729b075dcf562359bba66183debb0332752dc9cad35616f6da7a23e42b6cab45cd2e4bb5cda113e9e84c8f05aee77adb6b0289a0229101
-  languageName: node
-  linkType: hard
-
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -21906,7 +22193,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.5.3":
+"semver@npm:^7.5.3, semver@npm:^7.5.4":
   version: 7.5.4
   resolution: "semver@npm:7.5.4"
   dependencies:
@@ -21949,15 +22236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "serialize-javascript@npm:4.0.0"
-  dependencies:
-    randombytes: ^2.1.0
-  checksum: 3273b3394b951671fcf388726e9577021870dfbf85e742a1183fb2e91273e6101bdccea81ff230724f6659a7ee4cef924b0ff9baca32b79d9384ec37caf07302
-  languageName: node
-  linkType: hard
-
 "serialize-javascript@npm:^6.0.1":
   version: 6.0.1
   resolution: "serialize-javascript@npm:6.0.1"
@@ -22094,13 +22372,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slash@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "slash@npm:4.0.0"
-  checksum: da8e4af73712253acd21b7853b7e0dbba776b786e82b010a5bfc8b5051a1db38ed8aba8e1e8f400dd2c9f373be91eb1c42b66e91abb407ff42b10feece5e1d2d
-  languageName: node
-  linkType: hard
-
 "slice-ansi@npm:^4.0.0":
   version: 4.0.0
   resolution: "slice-ansi@npm:4.0.0"
@@ -22200,13 +22471,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sourcemap-codec@npm:^1.4.8":
-  version: 1.4.8
-  resolution: "sourcemap-codec@npm:1.4.8"
-  checksum: b57981c05611afef31605732b598ccf65124a9fcb03b833532659ac4d29ac0f7bfacbc0d6c5a28a03e84c7510e7e556d758d0bb57786e214660016fb94279316
-  languageName: node
-  linkType: hard
-
 "space-separated-tokens@npm:^1.0.0":
   version: 1.1.5
   resolution: "space-separated-tokens@npm:1.1.5"
@@ -22348,41 +22612,26 @@ __metadata:
   dependencies:
     "@altinn/altinn-design-system": ^0.27.2
     "@altinn/figma-design-tokens": ^5.0.0
-    "@jsdevtools/rehype-toc": ^3.0.2
     "@mdx-js/loader": ^2.0.0-rc.2
     "@mdx-js/react": ^1.6.22
     "@navikt/aksel-icons": ^2.8.4
     "@navikt/ds-css": ^5.0.2
     "@navikt/ds-react": ^5.0.2
-    "@reach/disclosure": ^0.18.0
     "@tanstack/react-query": ^4.29.5
     "@tippyjs/react": ^4.2.6
-    "@types/node": 18.11.17
-    "@types/prettier": ^2.7.2
-    "@types/react": 18.0.26
-    "@types/react-dom": 18.0.9
     "@types/react-syntax-highlighter": ^15.5.6
     "@vercel/analytics": ^1.0.2
-    classnames: ^2.3.2
-    directory-tree: ^3.5.1
-    gray-matter: ^4.0.3
     hastscript: ^7.2.0
     mdx-embed: ^1.1.2
-    moment: ^2.29.4
     next: 13.4.7
     normalize.css: ^8.0.1
-    prettier: ^2.8.3
-    react: 18.2.0
-    react-dom: 18.2.0
     react-element-to-jsx-string: ^15.0.0
-    react-number-format: ^5.1.3
     react-syntax-highlighter: ^15.5.0
     rehype-autolink-headings: ^6.1.1
     rehype-highlight: ^6.0.0
     rehype-slug: ^5.1.0
     remark-frontmatter: ^4.0.1
     remark-gfm: ^3.0.1
-    typescript: 4.9.4
   languageName: unknown
   linkType: soft
 
@@ -22494,6 +22743,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string_decoder@npm:~0.10.x":
+  version: 0.10.31
+  resolution: "string_decoder@npm:0.10.31"
+  checksum: fe00f8e303647e5db919948ccb5ce0da7dea209ab54702894dd0c664edd98e5d4df4b80d6fabf7b9e92b237359d21136c95bf068b2f7760b772ca974ba970202
+  languageName: node
+  linkType: hard
+
 "string_decoder@npm:~1.1.1":
   version: 1.1.1
   resolution: "string_decoder@npm:1.1.1"
@@ -22522,13 +22778,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-bom-string@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "strip-bom-string@npm:1.0.0"
-  checksum: 5635a3656d8512a2c194d6c8d5dee7ef0dde6802f7be9413b91e201981ad4132506656d9cf14137f019fd50f0269390d91c7f6a2601b1bee039a4859cfce4934
-  languageName: node
-  linkType: hard
-
 "strip-bom@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-bom@npm:3.0.0"
@@ -22568,7 +22817,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.0.1, strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:^3.0.1, strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
@@ -22899,6 +23148,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svgo@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "svgo@npm:3.0.2"
+  dependencies:
+    "@trysound/sax": 0.2.0
+    commander: ^7.2.0
+    css-select: ^5.1.0
+    css-tree: ^2.2.1
+    csso: ^5.0.5
+    picocolors: ^1.0.0
+  bin:
+    svgo: bin/svgo
+  checksum: 381ba14aa782e71ab7033227634a3041c11fa3e2769aeaf0df43a08a615de61925108e34f55af6e7c5146f4a3109e78deabb4fa9d687e36d45d1f848b4e23d17
+  languageName: node
+  linkType: hard
+
 "swc-loader@npm:^0.2.3":
   version: 0.2.3
   resolution: "swc-loader@npm:0.2.3"
@@ -22923,16 +23188,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"synckit@npm:^0.8.3":
-  version: 0.8.4
-  resolution: "synckit@npm:0.8.4"
-  dependencies:
-    "@pkgr/utils": ^2.3.1
-    tslib: ^2.4.0
-  checksum: 83e054fe4494dab42114fc4ed36a11b85e18742d304ade3f40d3afb4ba4145d76183adba1f29e2c36e9a0a453b93a83e2387505f96a0efd901f562927a968c44
-  languageName: node
-  linkType: hard
-
 "tabbable@npm:^6.0.1":
   version: 6.1.1
   resolution: "tabbable@npm:6.1.1"
@@ -22940,18 +23195,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"table-layout@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "table-layout@npm:1.0.2"
-  dependencies:
-    array-back: ^4.0.1
-    deep-extend: ~0.6.0
-    typical: ^5.2.0
-    wordwrapjs: ^4.0.0
-  checksum: 8f41b5671f101a5195747ec1727b1d35ea2cd5bf85addda11cc2f4b36892db9696ce3c2c7334b5b8a122505b34d19135fede50e25678df71b0439e0704fd953f
-  languageName: node
-  linkType: hard
-
 "table@npm:^6.8.1":
   version: 6.8.1
   resolution: "table@npm:6.8.1"
@@ -23115,7 +23358,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.0.0, terser@npm:^5.10.0, terser@npm:^5.16.0":
+"terser@npm:^5.10.0":
   version: 5.16.1
   resolution: "terser@npm:5.16.1"
   dependencies:
@@ -23168,7 +23411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through2@npm:^2.0.0, through2@npm:^2.0.3":
+"through2@npm:^2.0.0, through2@npm:^2.0.1, through2@npm:^2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
   dependencies:
@@ -23194,16 +23437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-glob@npm:^0.2.9":
-  version: 0.2.9
-  resolution: "tiny-glob@npm:0.2.9"
-  dependencies:
-    globalyzer: 0.1.0
-    globrex: ^0.1.2
-  checksum: aea5801eb6663ddf77ebb74900b8f8bd9dfcfc9b6a1cc8018cb7421590c00bf446109ff45e4b64a98e6c95ddb1255a337a5d488fb6311930e2a95334151ec9c6
-  languageName: node
-  linkType: hard
-
 "tiny-invariant@npm:^1.3.1":
   version: 1.3.1
   resolution: "tiny-invariant@npm:1.3.1"
@@ -23338,6 +23571,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^1.0.1":
+  version: 1.0.3
+  resolution: "ts-api-utils@npm:1.0.3"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: 441cc4489d65fd515ae6b0f4eb8690057add6f3b6a63a36073753547fb6ce0c9ea0e0530220a0b282b0eec535f52c4dfc315d35f8a4c9a91c0def0707a714ca6
+  languageName: node
+  linkType: hard
+
 "ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
   version: 2.2.0
   resolution: "ts-dedent@npm:2.2.0"
@@ -23446,7 +23688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.13.0, tslib@npm:^1.8.1":
+"tslib@npm:^1.13.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
@@ -23467,17 +23709,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsutils@npm:^3.21.0":
-  version: 3.21.0
-  resolution: "tsutils@npm:3.21.0"
-  dependencies:
-    tslib: ^1.8.1
-  peerDependencies:
-    typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-  checksum: 1843f4c1b2e0f975e08c4c21caa4af4f7f65a12ac1b81b3b8489366826259323feb3fc7a243123453d2d1a02314205a7634e048d4a8009921da19f99755cdc48
-  languageName: node
-  linkType: hard
-
 "tuf-js@npm:^1.1.7":
   version: 1.1.7
   resolution: "tuf-js@npm:1.1.7"
@@ -23629,16 +23860,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:4.9.4, typescript@npm:^4.6.4":
-  version: 4.9.4
-  resolution: "typescript@npm:4.9.4"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: e782fb9e0031cb258a80000f6c13530288c6d63f1177ed43f770533fdc15740d271554cdae86701c1dd2c83b082cea808b07e97fd68b38a172a83dbf9e0d0ef9
-  languageName: node
-  linkType: hard
-
 "typescript@npm:>=3 < 6":
   version: 5.1.6
   resolution: "typescript@npm:5.1.6"
@@ -23649,23 +23870,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.9.5":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
+"typescript@npm:^4.6.4":
+  version: 4.9.4
+  resolution: "typescript@npm:4.9.4"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
+  checksum: e782fb9e0031cb258a80000f6c13530288c6d63f1177ed43f770533fdc15740d271554cdae86701c1dd2c83b082cea808b07e97fd68b38a172a83dbf9e0d0ef9
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@4.9.4#~builtin<compat/typescript>, typescript@patch:typescript@^4.6.4#~builtin<compat/typescript>":
-  version: 4.9.4
-  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=23ec76"
+"typescript@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "typescript@npm:5.2.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 3e2ab0772908676d9b9cb83398c70003a3b08e1c6b3b122409df9f4b520f2fdaefa20c3d7d57dce283fed760ac94b3ce94d4a7fa875127b67852904425a1f0dc
+  checksum: 7912821dac4d962d315c36800fe387cdc0a6298dba7ec171b350b4a6e988b51d7b8f051317786db1094bd7431d526b648aba7da8236607febb26cf5b871d2d3c
   languageName: node
   linkType: hard
 
@@ -23679,27 +23900,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.9.5#~builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=23ec76"
+"typescript@patch:typescript@^4.6.4#~builtin<compat/typescript>":
+  version: 4.9.4
+  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=23ec76"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: ab417a2f398380c90a6cf5a5f74badd17866adf57f1165617d6a551f059c3ba0a3e4da0d147b3ac5681db9ac76a303c5876394b13b3de75fdd5b1eaa06181c9d
-  languageName: node
-  linkType: hard
-
-"typical@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "typical@npm:4.0.0"
-  checksum: a242081956825328f535e6195a924240b34daf6e7fdb573a1809a42b9f37fb8114fa99c7ab89a695e0cdb419d4149d067f6723e4b95855ffd39c6c4ca378efb3
+  checksum: 3e2ab0772908676d9b9cb83398c70003a3b08e1c6b3b122409df9f4b520f2fdaefa20c3d7d57dce283fed760ac94b3ce94d4a7fa875127b67852904425a1f0dc
   languageName: node
   linkType: hard
 
-"typical@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "typical@npm:5.2.0"
-  checksum: ccaeb151a9a556291b495571ca44c4660f736fb49c29314bbf773c90fad92e9485d3cc2b074c933866c1595abbbc962f2b8bfc6e0f52a8c6b0cdd205442036ac
+"typescript@patch:typescript@^5.2.2#~builtin<compat/typescript>":
+  version: 5.2.2
+  resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=1f5320"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 07106822b4305de3f22835cbba949a2b35451cad50888759b6818421290ff95d522b38ef7919e70fb381c5fe9c1c643d7dea22c8b31652a717ddbd57b7f4d554
   languageName: node
   linkType: hard
 
@@ -24191,7 +24408,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8-compile-cache@npm:2.3.0, v8-compile-cache@npm:^2.0.3":
+"v8-compile-cache@npm:2.3.0":
   version: 2.3.0
   resolution: "v8-compile-cache@npm:2.3.0"
   checksum: adb0a271eaa2297f2f4c536acbfee872d0dd26ec2d76f66921aa7fc437319132773483344207bdbeee169225f4739016d8d2dbf0553913a52bb34da6d0334f8e
@@ -24535,7 +24752,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"word-wrap@npm:^1.2.3, word-wrap@npm:~1.2.3":
+"word-wrap@npm:~1.2.3":
   version: 1.2.4
   resolution: "word-wrap@npm:1.2.4"
   checksum: 8f1f2e0a397c0e074ca225ba9f67baa23f99293bc064e31355d426ae91b8b3f6b5f6c1fc9ae5e9141178bb362d563f55e62fd8d5c31f2a77e3ade56cb3e35bd1
@@ -24549,16 +24766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wordwrapjs@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "wordwrapjs@npm:4.0.1"
-  dependencies:
-    reduce-flatten: ^2.0.0
-    typical: ^5.2.0
-  checksum: 3d927f3c95d0ad990968da54c0ad8cde2801d8e91006cd7474c26e6b742cc8557250ce495c9732b2f9db1f903601cb74ec282e0f122ee0d02d7abe81e150eea8
-  languageName: node
-  linkType: hard
-
 "wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -24742,7 +24949,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:16.2.0, yargs@npm:^16.2.0":
+"yargs@npm:16.2.0, yargs@npm:^16.1.0, yargs@npm:^16.2.0":
   version: 16.2.0
   resolution: "yargs@npm:16.2.0"
   dependencies: