Version Packages (#1912 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
✨ Oppdatert ikoner (#1909 )
2026-10-13 01:02:02 +00:00 · 2023-04-03 18:49:10 +02:00 · 2023-04-03 16:08:52 +02:00 · 2023-03-31 13:41:44 +02:00 · 2023-03-31 13:26:53 +02:00 · 2023-03-31 12:47:17 +02:00
205 changed files with 3211 additions and 2571 deletions
@@ -3,7 +3,7 @@ description: Send et ønske om en eller flere nye komponenter
 title: "[Ny komponent]: "
 labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -3,7 +3,7 @@ description: Send et ønske om et eller flere nye ikoner
 title: "[Nytt ikon]: "
 labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -3,7 +3,7 @@ description: Send inn innspill til komponent
 title: "[Innspill til komponent]: "
 labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -3,7 +3,7 @@ description: Send inn innspill til ikon
 title: "[Tilbakemelding på ikon]: "
 labels: ["forespørsel 🥰", "ikoner 🖼️"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -1,5 +1,36 @@
 # @navikt/aksel-icons

+## 2.8.11
+
+### Patch Changes
+
+- [#1909](https://github.com/navikt/aksel/pull/1909) [`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+
+## 2.8.10
+
+## 2.8.9
+
+## 2.8.8
+
+### Patch Changes
+
+- [`ed8e28454`](https://github.com/navikt/aksel/commit/ed8e284540a9e3a5be7d1d5e393f31db86962613) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
+
+  - :tada: VideoSlash
+  - :tada: VideoSlashFill
+
+## 2.8.7
+
+## 2.8.6
+
+## 2.8.5
+
+## 2.8.4
+
+### Patch Changes
+
+- Fikset Sourcemap-bug i Aksel-icons
+
 ## 2.8.3

 ## 2.8.2
@@ -33,8 +33,8 @@ fs.writeFileSync(
    sub_category: "Time",
    keywords: string[];
    variant: "stroke" | "fill";
-    date_added: Date;
-    date_modified: Date;
+    updated_at: Date;
+    created_at: Date;
  }

  declare const metadata: {
@@ -1,5 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 9.5H12V17.5" stroke="#262626" stroke-width="1.5" stroke-miterlimit="3.99933" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.75 6.5V6.5C11.75 6.63807 11.8619 6.75 12 6.75V6.75C12.1381 6.75 12.25 6.63807 12.25 6.5V6.5C12.25 6.36193 12.1381 6.25 12 6.25V6.25C11.8619 6.25 11.75 6.36193 11.75 6.5V6.5ZM11.75 6.5H12.01H12" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 17.5H14" stroke="#262626" stroke-width="1.5" stroke-miterlimit="3.99933" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6.5C11 5.94772 11.4477 5.5 12 5.5C12.5523 5.5 13 5.94772 13 6.5C13 7.05228 12.5523 7.5 12 7.5C11.4477 7.5 11 7.05228 11 6.5ZM9.25 9.5C9.25 9.08579 9.58579 8.75 10 8.75H12C12.4142 8.75 12.75 9.08579 12.75 9.5V16.75H14C14.4142 16.75 14.75 17.0858 14.75 17.5C14.75 17.9142 14.4142 18.25 14 18.25H12H10C9.58579 18.25 9.25 17.9142 9.25 17.5C9.25 17.0858 9.58579 16.75 10 16.75H11.25V10.25H10C9.58579 10.25 9.25 9.91421 9.25 9.5Z" fill="#262626"/>
 </svg>
@@ -15,5 +15,5 @@ keywords:
  - beskrivelse
  - forklaring
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.03.2023
 created_at: 07.03.2023
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6248 2.35048C11.8568 2.21651 12.1427 2.21651 12.3748 2.35048L20.1578 6.84397C20.273 6.90772 20.3729 7.00264 20.4435 7.125C20.5142 7.24739 20.5465 7.38143 20.544 7.51313V16.5C20.544 16.7679 20.4011 17.0155 20.169 17.1495L12.3903 21.6405C12.2766 21.71 12.143 21.75 12 21.75H12C11.9837 21.75 11.9675 21.7495 11.9513 21.7484C11.8311 21.7407 11.7186 21.7047 11.6205 21.647L3.83057 17.1495C3.59852 17.0155 3.45557 16.7679 3.45557 16.5V7.513C3.45316 7.38134 3.48541 7.24735 3.55605 7.125C3.62669 7.00265 3.7266 6.90773 3.84183 6.84398L11.6248 2.35048ZM4.95557 8.79904V16.067L11.25 19.7011L11.25 12.4331L4.95557 8.79904ZM12.75 12.4329V19.7008L19.044 16.067V8.79904L12.75 12.4329ZM18.294 7.5L11.9998 11.134L5.70557 7.5L11.9998 3.86603L18.294 7.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.438 7.11571C20.3678 6.99792 20.2701 6.90625 20.1578 6.84415L12.3872 2.35776C12.3621 2.34263 12.3361 2.32904 12.3095 2.31701C12.2098 2.27163 12.1042 2.24991 11.9999 2.25C11.8955 2.24989 11.7899 2.27161 11.6901 2.31701C11.6635 2.32904 11.6375 2.34263 11.6124 2.35775L3.84183 6.84411C3.7266 6.90785 3.62669 7.00277 3.55605 7.12513C3.48541 7.24748 3.45316 7.38146 3.45557 7.51312V16.5001C3.45557 16.7681 3.59852 17.0157 3.83057 17.1496L11.6124 21.6425C11.6307 21.6535 11.6494 21.6637 11.6685 21.6731C11.6958 21.6866 11.7242 21.6985 11.7533 21.7086C11.8339 21.7368 11.9172 21.7503 11.9998 21.7503C12.0536 21.7503 12.1078 21.7445 12.1613 21.7327C12.2435 21.7147 12.3206 21.6832 12.3903 21.6407L20.169 17.1496C20.4011 17.0157 20.544 16.7681 20.544 16.5001V7.51305C20.5464 7.38481 20.5158 7.25437 20.4489 7.13462C20.4454 7.12826 20.4418 7.12196 20.438 7.11571ZM18.294 7.50013L11.9998 3.86615L5.70557 7.50012L11.9998 11.1341L18.294 7.50013ZM4.95557 8.79916V16.0671L11.25 19.7012L11.25 12.4332L4.95557 8.79916ZM12.75 12.433L19.044 8.79917V16.0671L12.75 19.701V12.433Z" fill="#262626"/>
 </svg>
@@ -14,5 +14,5 @@ keywords:
  - programmering
  - distribusjon
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 23.03.2023
 created_at: 07.03.2023
@@ -14,5 +14,5 @@ keywords:
  - programmering
  - distribusjon
 variant: Fill
-updated_at: 08.03.2023
+updated_at: 23.03.2023
 created_at: 07.03.2023
@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.5 9.5C9.5 8 10.5 7 12 7C13.5 7 14.5 8 14.5 9.5C14.5 11 12 12 12 13.5V14" stroke="#262626" stroke-width="1.5" stroke-miterlimit="3.99933" stroke-linecap="round"/>
-<path d="M11.75 16.5V16.5C11.75 16.6381 11.8619 16.75 12 16.75V16.75C12.1381 16.75 12.25 16.6381 12.25 16.5V16.5C12.25 16.3619 12.1381 16.25 12 16.25V16.25C11.8619 16.25 11.75 16.3619 11.75 16.5V16.5ZM11.75 16.5H12.01H12" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.25 9.5C10.25 8.92044 10.4399 8.49575 10.7178 8.21783C10.9957 7.93991 11.4204 7.75 12 7.75C12.5796 7.75 13.0043 7.93991 13.2822 8.21783C13.5601 8.49575 13.75 8.92044 13.75 9.5C13.75 9.65777 13.6859 9.84934 13.4991 10.1109C13.3076 10.379 13.0426 10.6467 12.7197 10.9697L12.6985 10.9909C12.4009 11.2884 12.0511 11.6381 11.7803 12.0172C11.4984 12.4118 11.25 12.9078 11.25 13.5V14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14V13.5C12.75 13.3422 12.8141 13.1507 13.0009 12.8891C13.1924 12.621 13.4574 12.3533 13.7803 12.0303L13.8015 12.0091C14.0991 11.7116 14.4489 11.3619 14.7197 10.9828C15.0016 10.5882 15.25 10.0922 15.25 9.5C15.25 8.57956 14.9399 7.75425 14.3428 7.15717C13.7457 6.56009 12.9204 6.25 12 6.25C11.0796 6.25 10.2543 6.56009 9.65717 7.15717C9.06009 7.75425 8.75 8.57956 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5ZM12 15.5C11.4477 15.5 11 15.9477 11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5C13 15.9477 12.5523 15.5 12 15.5Z" fill="#262626"/>
 </svg>
@@ -13,5 +13,5 @@ keywords:
  - veiledning
  - spørsmålstegn
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.03.2023
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5.25H7.875C7.46079 5.25 7.125 5.58579 7.125 6C7.125 6.41421 7.46079 6.75 7.875 6.75H15C15.1381 6.75 15.25 6.86193 15.25 7V9.6V14.4C15.25 14.5901 15.3207 14.7637 15.4373 14.8959C15.4739 14.9375 15.5152 14.975 15.5605 15.0078C15.6286 15.0571 15.7052 15.0952 15.7877 15.1195L20.7714 16.7143C20.9995 16.7873 21.2488 16.747 21.4422 16.6058C21.6356 16.4646 21.75 16.2395 21.75 16V8C21.75 7.76051 21.6356 7.53542 21.4422 7.39422C21.2488 7.25302 20.9995 7.21269 20.7714 7.28568L16.75 8.57254V7C16.75 6.0335 15.9665 5.25 15 5.25ZM20.25 14.9725L16.75 13.8525V10.1475L20.25 9.02746V14.9725ZM3.75 10.5C3.75 10.0858 3.41421 9.75 3 9.75C2.58579 9.75 2.25 10.0858 2.25 10.5V17C2.25 17.9665 3.0335 18.75 4 18.75H11.125C11.5392 18.75 11.875 18.4142 11.875 18C11.875 17.5858 11.5392 17.25 11.125 17.25H4C3.86193 17.25 3.75 17.1381 3.75 17V10.5ZM4.03033 5.46967C3.73744 5.17678 3.26256 5.17678 2.96967 5.46967C2.67678 5.76256 2.67678 6.23744 2.96967 6.53033L14.9697 18.5303C15.2626 18.8232 15.7374 18.8232 16.0303 18.5303C16.3232 18.2374 16.3232 17.7626 16.0303 17.4697L4.03033 5.46967Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,26 @@
+name: VideoSlash
+category: Media
+sub_category: Media
+keywords:
+  - record
+  - film
+  - video
+  - camera
+  - no camera
+  - no video
+  - no filming
+  - no recording
+  - opptak
+  - ta opp
+  - filme
+  - video
+  - kamera
+  - ingen filming
+  - ingen video
+  - ingen kamera
+  - ingen opptak
+  - unavailable
+  - utilgjengelig
+variant: Stroke
+updated_at: 31.03.2023
+created_at: 30.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.67678 8.35876C2.51929 8.20127 2.25 8.31281 2.25 8.53553V17C2.25 17.9665 3.0335 18.75 4 18.75H12.4645C12.6872 18.75 12.7987 18.4807 12.6412 18.3232L2.67678 8.35876ZM16.3232 15.6412C16.4807 15.7987 16.75 15.6872 16.75 15.4645V7C16.75 6.0335 15.9665 5.25 15 5.25H6.53553C6.31281 5.25 6.20127 5.51929 6.35876 5.67678L16.3232 15.6412ZM18.25 15.725C18.25 15.8337 18.3203 15.93 18.4238 15.9631L20.7714 16.7143C20.9995 16.7873 21.2488 16.747 21.4422 16.6058C21.6356 16.4646 21.75 16.2395 21.75 16V8.00001C21.75 7.76052 21.6356 7.53543 21.4422 7.39423C21.2488 7.25303 20.9995 7.2127 20.7714 7.28569L18.4238 8.03692C18.3203 8.07006 18.25 8.16631 18.25 8.27503V15.725ZM4.03033 5.46967C3.73744 5.17678 3.26256 5.17678 2.96967 5.46967C2.67678 5.76256 2.67678 6.23744 2.96967 6.53033L14.9697 18.5303C15.2626 18.8232 15.7374 18.8232 16.0303 18.5303C16.3232 18.2374 16.3232 17.7626 16.0303 17.4697L4.03033 5.46967Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,26 @@
+name: VideoSlashFill
+category: Media
+sub_category: Media
+keywords:
+  - record
+  - film
+  - video
+  - camera
+  - no camera
+  - no video
+  - no filming
+  - no recording
+  - opptak
+  - ta opp
+  - filme
+  - video
+  - kamera
+  - ingen filming
+  - ingen video
+  - ingen kamera
+  - ingen opptak
+  - unavailable
+  - utilgjengelig
+variant: Fill
+updated_at: 31.03.2023
+created_at: 30.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -3,7 +3,7 @@
  "compilerOptions": {
    "outDir": "./dist/react/esm",
    "module": "esnext",
-    "sourceMap": true,
+    "sourceMap": false,
    "declaration": true
  }
 }
@@ -2,7 +2,8 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist/react/cjs",
-    "module": "commonjs"
+    "module": "commonjs",
+    "skipLibCheck": true
  },
  "exclude": ["./util", "./__tests__", "**/*.stories.*"],
  "include": ["./src"]
@@ -1,5 +1,21 @@
 # @navikt/ds-codemod

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+## 2.8.8
+
+## 2.8.7
+
+## 2.8.6
+
+## 2.8.5
+
+## 2.8.4
+
 ## 2.8.3

 ## 2.8.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.8.3",
-    "@navikt/ds-react": "^2.8.3",
+    "@navikt/ds-icons": "^2.8.11",
+    "@navikt/ds-react": "^2.8.11",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,39 @@
 # @navikt/ds-css

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+### Patch Changes
+
+- [#1905](https://github.com/navikt/aksel/pull/1905) [`212194964`](https://github.com/navikt/aksel/commit/212194964c4dd576e1ffc031316dff8cbe5016a2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Padding/border-radius tokens for button.css
+
+## 2.8.8
+
+## 2.8.7
+
+### Patch Changes
+
+- [`7f3f025db`](https://github.com/navikt/aksel/commit/7f3f025db2ad605df4240605a733d10d08db753a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset typografi for radio, checkbox. Button token for tertiary
+
+## 2.8.6
+
+### Patch Changes
+
+- [`2eb358ad8`](https://github.com/navikt/aksel/commit/2eb358ad888979d21c385b3900973946f3f466be) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+
+## 2.8.5
+
+### Patch Changes
+
+- [`f66437082`](https://github.com/navikt/aksel/commit/f664370826ed51bda7ad681e1f1799c26d2c1f0a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :art: Accordion-tokens for header bakgrunn
+
+- [#1879](https://github.com/navikt/aksel/pull/1879) [`55b585618`](https://github.com/navikt/aksel/commit/55b585618341a4d8bf26ed9b9e129d897b1600dc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset tekstfarge i select på iphone
+
+## 2.8.4
+
 ## 2.8.3

 ## 2.8.2
@@ -11,7 +11,7 @@
  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
  margin: 0;
  text-align: left;
-  background: transparent;
+  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
  cursor: pointer;
  border: none;
  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
@@ -25,6 +25,7 @@
 .navds-accordion__header:hover {
  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
+  background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
 }

 .navds-accordion__header-content {
@@ -33,10 +34,14 @@
 }

 .navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle));
+  background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
 }

+.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
+  background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
+}
+
 .navds-accordion__content {
  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
@@ -37,6 +37,10 @@
  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
 }

+.navds-alert--error > .navds-alert__icon {
+  color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
+}
+
 .navds-alert--warning {
  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
@@ -44,6 +48,7 @@

 .navds-alert--warning > .navds-alert__icon {
  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+  color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
 }

 .navds-alert--info {
@@ -51,11 +56,19 @@
  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
 }

+.navds-alert--info > .navds-alert__icon {
+  color: var(--ac-alert-icon-info-color, var(--a-icon-info));
+}
+
 .navds-alert--success {
  border-color: var(--ac-alert-success-border, var(--a-border-success));
  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
 }

+.navds-alert--success > .navds-alert__icon {
+  color: var(--ac-alert-icon-success-color, var(--a-icon-success));
+}
+
 .navds-alert--inline {
  background-color: transparent;
  border: none;
@@ -16,38 +16,50 @@
 }

 .navds-button {
+  --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
+
  display: inline-flex;
  cursor: pointer;
  margin: 0;
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: var(--a-border-radius-medium);
-  padding: var(--a-spacing-3) var(--a-spacing-5);
+  border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
+  padding: var(--ac-button-padding, var(--__ac-button-padding));
  align-items: center;
  justify-content: center;
  gap: var(--a-spacing-2);
 }

 .navds-button--small {
-  padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-small, var(--__ac-button-padding));
 }

 .navds-button--xsmall {
-  padding: var(--a-spacing-05) var(--a-spacing-2);
+  --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
  gap: var(--a-spacing-1);
 }

 .navds-button--icon-only {
-  padding: var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
 }

 .navds-button--small.navds-button--icon-only {
-  padding: 0.375rem;
+  --__ac-button-padding: 0.375rem;
+
+  padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
 }

 .navds-button--xsmall.navds-button--icon-only {
-  padding: var(--a-spacing-1);
+  --__ac-button-padding: var(--a-spacing-1);
+
+  padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }

 .navds-button:focus {
@@ -217,6 +229,7 @@

 .navds-button--tertiary {
  color: var(--ac-button-tertiary-text, var(--a-text-action));
+  background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent));
 }

 .navds-button--tertiary:hover {
@@ -36,6 +36,7 @@
 .navds-chips__toggle {
  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-text, var(--a-text-default));
 }

 .navds-chips__toggle:hover {
@@ -23,7 +23,7 @@
 }

 .navds-error-summary__list > * {
-  color: var(--a-blue-500);
+  color: var(--ac-error-summary-list-dot, var(--a-text-action));
 }

 .navds-error-summary--small > .navds-error-summary__list {
@@ -3,6 +3,7 @@
  background-color: var(--ac-select-bg, var(--a-surface-default));
  border-radius: var(--a-border-radius-medium);
  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  color: var(--ac-select-text, var(--a-text-default));
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.3",
+    "@navikt/ds-tokens": "^2.8.11",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -2,23 +2,38 @@
  "alert": {
    "--ac-alert-error-border": "--a-border-danger",
    "--ac-alert-error-bg": "--a-surface-danger-subtle",
+    "--ac-alert-icon-error-color": "--a-icon-danger",
    "--ac-alert-warning-border": "--a-border-warning",
    "--ac-alert-warning-bg": "--a-surface-warning-subtle",
+    "--ac-alert-icon-warning-color": "--a-icon-warning",
    "--ac-alert-info-border": "--a-border-info",
    "--ac-alert-info-bg": "--a-surface-info-subtle",
+    "--ac-alert-icon-info-color": "--a-icon-info",
    "--ac-alert-success-border": "--a-border-success",
-    "--ac-alert-success-bg": "--a-surface-success-subtle"
+    "--ac-alert-success-bg": "--a-surface-success-subtle",
+    "--ac-alert-icon-success-color": "--a-icon-success"
  },
  "accordion": {
+    "--ac-accordion-header-bg": "--ac-surface-transparent",
+    "--ac-accordion-header-bg-hover": "--ac-surface-transparent",
    "--ac-accordion-header-border": "--a-border-divider",
    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
    "--ac-accordion-header-border-hover": "--a-border-default",
    "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
+    "--ac-accordion-header-bg-open": "--ac-accordion-item-bg-open",
+    "--ac-accordion-header-bg-open-hover": "--a-surface-action-subtle",
    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
    "--ac-accordion-content-border": "--a-border-divider",
    "--ac-accordion-content-border-open": "--a-border-default"
  },
  "button": {
+    "--ac-button-border-radius": "--a-border-radius-medium",
+    "--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
+    "--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
+    "--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
+    "--ac-button-padding-icon-only": "var(--a-spacing-3)",
+    "--ac-button-padding-icon-only-small": "0.375rem",
+    "--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
    "--ac-button-primary-bg": "--a-surface-action",
    "--ac-button-primary-text": "--a-text-on-action",
    "--ac-button-primary-hover-bg": "--a-surface-action-hover",
@@ -34,6 +49,7 @@
    "--ac-button-secondary-active-bg": "--a-surface-action-active",
    "--ac-button-secondary-active-focus-border": "--a-surface-default",
    "--ac-button-tertiary-text": "--a-text-action",
+    "--ac-button-tertiary-bg": "--a-surface-transparent",
    "--ac-button-tertiary-hover-text": "--a-text-action-on-action-subtle",
    "--ac-button-tertiary-hover-bg": "--a-surface-action-subtle-hover",
    "--ac-button-tertiary-focus-border": "--a-border-action",
@@ -76,6 +92,7 @@
  "chips": {
    "--ac-chip-toggle-border": "--a-border-default",
    "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-text": "--a-text-default",
    "--ac-chip-toggle-hover-border": "--a-border-strong",
    "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
    "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
@@ -292,7 +309,8 @@
  },
  "errorsummary": {
    "--ac-error-summary-bg": "--a-surface-default",
-    "--ac-error-summary-border": "--a-border-danger"
+    "--ac-error-summary-border": "--a-border-danger",
+    "--ac-error-summary-list-dot": "--a-text-action"
  },
  "checkbox-radio": {
    "--ac-radio-checkbox-bg": "--a-surface-default",
@@ -312,6 +330,7 @@
  },
  "select": {
    "--ac-select-bg": "--a-surface-default",
+    "--ac-select-text": "--a-text-default",
    "--ac-select-border": "--a-border-default",
    "--ac-select-hover-bg": "--a-border-action",
    "--ac-select-error-border": "--a-surface-danger"
@@ -1,5 +1,75 @@
 # @navikt/ds-react

+## 2.8.11
+
+### Patch Changes
+
+- Updated dependencies [[`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f)]:
+  - @navikt/aksel-icons@2.8.11
+  - @navikt/ds-icons@2.8.11
+
+## 2.8.10
+
+### Patch Changes
+
+- [#1907](https://github.com/navikt/aksel/pull/1907) [`63fdacf0f`](https://github.com/navikt/aksel/commit/63fdacf0f8fa09593c64b35b49381d6c8a1befd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :recycle: Refactor event-handling i datepicker-hooks
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.10
+  - @navikt/ds-icons@2.8.10
+
+## 2.8.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.9
+  - @navikt/ds-icons@2.8.9
+
+## 2.8.8
+
+### Patch Changes
+
+- Updated dependencies [[`ed8e28454`](https://github.com/navikt/aksel/commit/ed8e284540a9e3a5be7d1d5e393f31db86962613)]:
+  - @navikt/aksel-icons@2.8.8
+  - @navikt/ds-icons@2.8.8
+
+## 2.8.7
+
+### Patch Changes
+
+- [`7f3f025db`](https://github.com/navikt/aksel/commit/7f3f025db2ad605df4240605a733d10d08db753a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset typografi for radio, checkbox. Button token for tertiary
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.7
+  - @navikt/ds-icons@2.8.7
+
+## 2.8.6
+
+### Patch Changes
+
+- [`2eb358ad8`](https://github.com/navikt/aksel/commit/2eb358ad888979d21c385b3900973946f3f466be) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.6
+  - @navikt/ds-icons@2.8.6
+
+## 2.8.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.5
+  - @navikt/ds-icons@2.8.5
+
+## 2.8.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.4
+  - @navikt/ds-icons@2.8.4
+
 ## 2.8.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,8 +37,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.8.3",
-    "@navikt/ds-icons": "^2.8.3",
+    "@navikt/aksel-icons": "^2.8.11",
+    "@navikt/ds-icons": "^2.8.11",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,8 +1,8 @@
 import {
-  ErrorColored,
-  InformationColored,
-  SuccessColored,
-  WarningColored,
+  ErrorFilled,
+  InformationFilled,
+  SuccessFilled,
+  WarningFilled,
 } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
@@ -37,13 +37,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant, ...props }) => {
  switch (variant) {
    case "error":
-      return <ErrorColored title="Feil" {...props} />;
+      return <ErrorFilled title="Feil" {...props} />;
    case "warning":
-      return <WarningColored title="Advarsel" {...props} />;
+      return <WarningFilled title="Advarsel" {...props} />;
    case "info":
-      return <InformationColored title="Informasjon" {...props} />;
+      return <InformationFilled title="Informasjon" {...props} />;
    case "success":
-      return <SuccessColored title="Suksess" {...props} />;
+      return <SuccessFilled title="Suksess" {...props} />;
    default:
      return null;
  }
@@ -3,7 +3,7 @@ import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
-import { useDateInputContext } from "./hooks";
+import { useDateInputContext } from "./context";

 export interface DateInputProps
  extends FormFieldProps,
@@ -0,0 +1,5 @@
+export { useDateInputContext, DateContext } from "./useDateInputContext";
+export {
+  useSharedMonthContext,
+  SharedMonthProvider,
+} from "./useSharedMonthContext";
@@ -13,14 +13,14 @@ import {
 } from "react-day-picker";
 import { omit, Popover, useId } from "../..";
 import { DateInputType, DatePickerInput } from "../DateInput";
-import { DateContext } from "../hooks";
+import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
 import { Caption, DropdownCaption } from "./caption";
 import DatePickerStandalone, {
  DatePickerStandaloneType,
 } from "./DatePickerStandalone";
 import { DayButton } from "./DayButton";
-import { Head } from "./Head";
+import { TableHead } from "./TableHead";

 export type ConditionalModeProps =
  | {
@@ -221,7 +221,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                components={{
                  Caption: dropdownCaption ? DropdownCaption : Caption,
                  Day: DayButton,
-                  Head: Head,
+                  Head: TableHead,
                }}
                className={cl("navds-date", className)}
                classNames={{
@@ -13,7 +13,7 @@ import { omit } from "../..";
 import { getLocaleFromString, labels } from "../utils";
 import { Caption, DropdownCaption } from "./caption";
 import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
-import { Head } from "./Head";
+import { TableHead } from "./TableHead";

 interface DatePickerStandaloneDefaultProps
  extends Omit<
@@ -100,7 +100,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
          selected={selected ?? selectedDates}
          components={{
            Caption: dropdownCaption ? DropdownCaption : Caption,
-            Head: Head,
+            Head: TableHead,
          }}
          className="navds-date"
          classNames={{ vhidden: "navds-sr-only" }}
@@ -2,7 +2,7 @@ import React from "react";
 import { HeadRow, useDayPicker } from "react-day-picker";

 /** Render the table head. */
-export function Head(): JSX.Element {
+export function TableHead(): JSX.Element {
  const { classNames, styles, components } = useDayPicker();
  const HeadRowComponent = components?.HeadRow ?? HeadRow;
  return (
@@ -12,27 +12,6 @@ const disabledDays = [
 export default {
  title: "ds-react/Datepicker",
  component: DatePicker,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    locale: {
-      control: {
-        type: "radio",
-        options: ["nb", "nn", "en"],
-      },
-    },
-    mode: {
-      defaultValue: "single",
-      control: {
-        type: "radio",
-        options: ["single", "multiple", "range"],
-      },
-    },
-  },
 };

 export const Default = {
@@ -123,6 +102,27 @@ export const Default = {
    inputfield: true,
    standalone: false,
    openOnFocus: true,
+    mode: "single",
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    locale: {
+      control: {
+        type: "radio",
+        options: ["nb", "nn", "en"],
+      },
+    },
+    mode: {
+      control: {
+        type: "radio",
+        options: ["single", "multiple", "range"],
+      },
+    },
  },
 };

@@ -4,8 +4,3 @@ export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatep
 export type { RangeValidationT } from "./useRangeDatepicker";
 export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
 export type { MonthValidationT } from "./useMonthPicker";
-export { useDateInputContext, DateContext } from "./useDateInputContext";
-export {
-  useSharedMonthContext,
-  SharedMonthProvider,
-} from "./useSharedMonthContext";
@@ -1,6 +1,6 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
 import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -10,6 +10,8 @@ import {
  isValidDate,
  parseDate,
 } from "../utils";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseDatepickerOptions
  extends Pick<
@@ -134,7 +136,7 @@ export const useDatepicker = (
  const locale = getLocaleFromString(_locale);

  const inputRef = useRef<HTMLInputElement>(null);
-  const daypickerRef = useRef<HTMLDivElement>(null);
+  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -148,45 +150,21 @@ export const useDatepicker = (
    : "";
  const [inputValue, setInputValue] = useState(defaultInputValue);

+  useOutsideClickHandler(open, setOpen, [
+    daypickerRef,
+    inputRef.current,
+    inputRef.current?.nextSibling,
+  ]);
+
+  useEscape(open, setOpen, inputRef);
+
  const updateDate = (date?: Date) => {
    onDateChange?.(date);
    setSelectedDay(date);
  };

-  const updateValidation = (val: Partial<DateValidationT> = {}) => {
-    const msg = getValidationMessage(val);
-    onValidate?.(msg);
-  };
-
-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-
-      ![
-        daypickerRef.current,
-        inputRef.current,
-        inputRef.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
+  const updateValidation = (val: Partial<DateValidationT> = {}) =>
+    onValidate?.(getValidationMessage(val));

  const reset = () => {
    updateDate(defaultSelected);
@@ -300,24 +278,6 @@ export const useDatepicker = (
    setMonth(defaultMonth ?? day);
  };

-  const handleClose = useCallback(() => {
-    setOpen(false);
-    inputRef.current && inputRef.current.focus();
-  }, []);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
  const datepickerProps = {
    month,
    onMonthChange: (month) => setMonth(month),
@@ -331,7 +291,7 @@ export const useDatepicker = (
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
    disableWeekends,
-    ref: daypickerRef,
+    ref: setDaypickerRef,
  };

  const inputProps = {
@@ -0,0 +1,25 @@
+import React, { useCallback, useEffect } from "react";
+
+export const useEscape = (
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  focusRef: any
+) => {
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    focusRef?.current && focusRef.current.focus();
+  }, [focusRef, setOpen]);
+
+  const escape = useCallback(
+    (e) => open && e.key === "Escape" && handleClose(),
+    [handleClose, open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", escape, false);
+
+    return () => {
+      window.removeEventListener("keydown", escape, false);
+    };
+  }, [escape]);
+};
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DateInputProps } from "../DateInput";
 import { MonthPickerProps } from "../monthpicker/MonthPicker";
 import {
@@ -8,6 +8,8 @@ import {
  isValidDate,
  parseDate,
 } from "../utils";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseMonthPickerOptions
  extends Pick<
@@ -118,7 +120,7 @@ export const useMonthpicker = (
  const locale = getLocaleFromString(_locale);

  const inputRef = useRef<HTMLInputElement>(null);
-  const monthpickerRef = useRef<HTMLDivElement>(null);
+  const [monthpickerRef, setMonthpickerRef] = useState<HTMLDivElement>();

  // Initialize states
  const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
@@ -131,44 +133,21 @@ export const useMonthpicker = (

  const [inputValue, setInputValue] = useState(defaultInputValue);

+  useOutsideClickHandler(open, setOpen, [
+    monthpickerRef,
+    inputRef.current,
+    inputRef.current?.nextSibling,
+  ]);
+
+  useEscape(open, setOpen, inputRef);
+
  const updateMonth = (date?: Date) => {
    onMonthChange?.(date);
    setSelectedMonth(date);
  };

-  const updateValidation = (val: Partial<MonthValidationT> = {}) => {
-    const msg = getValidationMessage(val);
-    onValidate?.(msg);
-  };
-
-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      ![
-        monthpickerRef.current,
-        inputRef.current,
-        inputRef.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
+  const updateValidation = (val: Partial<MonthValidationT> = {}) =>
+    onValidate?.(getValidationMessage(val));

  const reset = () => {
    updateMonth(defaultSelected);
@@ -294,24 +273,6 @@ export const useMonthpicker = (
    setYear(month);
  };

-  const handleClose = useCallback(() => {
-    setOpen(false);
-    inputRef.current && inputRef.current.focus();
-  }, []);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
  const monthpickerProps = {
    year,
    onYearChange: (y?: Date) => setYear(y ?? today),
@@ -323,7 +284,7 @@ export const useMonthpicker = (
    open,
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
-    ref: monthpickerRef,
+    ref: setMonthpickerRef,
  };

  const inputProps = {
@@ -0,0 +1,34 @@
+import React, { useCallback, useEffect } from "react";
+
+export const useOutsideClickHandler = (
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  refs: Array<any>
+) => {
+  const handleFocusIn = useCallback(
+    (e) => {
+      const composed = e.composedPath?.()?.[0];
+      if (!e?.target || !e?.target?.nodeType || !composed) {
+        return;
+      }
+      if (
+        !refs.some(
+          (element) =>
+            element?.contains(e.target) || element?.contains(composed)
+        )
+      ) {
+        open && setOpen(false);
+      }
+    },
+    [open, refs, setOpen]
+  );
+
+  useEffect(() => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("pointerdown", handleFocusIn);
+    return () => {
+      window?.removeEventListener?.("focusin", handleFocusIn);
+      window?.removeEventListener?.("pointerdown", handleFocusIn);
+    };
+  }, [handleFocusIn]);
+};
@@ -1,7 +1,7 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
 import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -12,6 +12,8 @@ import {
  parseDate,
 } from "../utils";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export type RangeValidationT = {
  from: DateValidationT;
@@ -211,7 +213,7 @@ export const useRangeDatepicker = (

  const inputRefTo = useRef<HTMLInputElement>(null);
  const inputRefFrom = useRef<HTMLInputElement>(null);
-  const datePickerRef = useRef<HTMLDivElement | null>(null);
+  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -241,6 +243,20 @@ export const useRangeDatepicker = (

  const [open, setOpen] = useState(false);

+  useOutsideClickHandler(open, setOpen, [
+    daypickerRef,
+    inputRefTo.current,
+    inputRefFrom.current,
+    inputRefTo.current?.nextSibling,
+    inputRefFrom.current?.nextSibling,
+  ]);
+
+  useEscape(
+    open,
+    setOpen,
+    selectedRange?.from && !selectedRange?.to ? inputRefTo : inputRefFrom
+  );
+
  const updateRange = (range?: DateRange) => {
    onRangeChange?.(range);
    setSelectedRange(range);
@@ -255,37 +271,6 @@ export const useRangeDatepicker = (
    onValidate?.(msg);
  };

-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      ![
-        datePickerRef.current,
-        inputRefTo.current,
-        inputRefFrom.current,
-        inputRefTo.current?.nextSibling,
-        inputRefFrom.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
-
  const reset = () => {
    updateRange(defaultSelected ?? { from: undefined, to: undefined });
    setMonth(defaultSelected ? defaultSelected?.from : defaultMonth ?? today);
@@ -527,28 +512,6 @@ export const useRangeDatepicker = (
      : toChange(e.target.value, day, isBefore, isAfter);
  };

-  const handleClose = useCallback(() => {
-    setOpen(false);
-    if (selectedRange?.from && !selectedRange?.to) {
-      inputRefTo?.current?.focus();
-    } else {
-      inputRefFrom?.current?.focus();
-    }
-  }, [selectedRange]);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
  const datepickerProps = {
    month: month,
    onMonthChange: (month) => setMonth(month),
@@ -563,7 +526,7 @@ export const useRangeDatepicker = (
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
    disableWeekends,
-    ref: datePickerRef,
+    ref: setDaypickerRef,
  };

  const fromInputProps = {
@@ -6,7 +6,7 @@ import isSameMonth from "date-fns/isSameMonth";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { dateIsInCurrentMonth, isMatch, nextEnabled } from "../utils";

 interface MonthType {
@@ -6,7 +6,7 @@ import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Button, Select } from "../..";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { hasNextYear, labelNextYear, labelPrevYear } from "../utils";

 export const MonthCaption = () => {
@@ -3,7 +3,7 @@ import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
 import { Popover, useId } from "../..";
 import { DateInputType, MonthPickerInput } from "../DateInput";
-import { DateContext, SharedMonthProvider } from "../hooks";
+import { DateContext, SharedMonthProvider } from "../context";
 import { getLocaleFromString, Matcher } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone, {
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { SharedMonthProvider } from "../hooks";
+import { SharedMonthProvider } from "../context";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
 import { MonthPickerProps } from "./MonthPicker";
@@ -4,7 +4,7 @@ import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React, { useState } from "react";
 import { BodyShort } from "../..";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { isMatch } from "../utils";
 import MonthButton from "./MonthButton";

@@ -1,8 +1,9 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "clsx";
-import useCheckbox from "./useCheckbox";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyLong, BodyShort, Detail } from "../../typography";
+import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
-import { BodyShort, Detail, omit } from "../..";
+import useCheckbox from "./useCheckbox";

 export interface CheckboxProps
  extends FormFieldProps,
@@ -43,7 +44,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  (props, ref) => {
    const { inputProps, hasError, size } = useCheckbox(props);

-    const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyLong : Detail;

    return (
      <div
@@ -93,11 +94,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
              {props.children}
            </BodyShort>
            {props.description && (
-              <Description
-                as="span"
-                size="small"
-                className="navds-checkbox__description"
-              >
+              <Description as="span" className="navds-checkbox__description">
                {props.description}
              </Description>
            )}
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, Detail, omit } from "../..";
+import { BodyLong, BodyShort, Detail } from "../../typography";
+import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";

@@ -24,7 +25,7 @@ export interface RadioProps
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
  const { inputProps, size, hasError } = useRadio(props);

-  const Description = size === "medium" ? BodyShort : Detail;
+  const Description = size === "medium" ? BodyLong : Detail;

  return (
    <div
@@ -45,11 +46,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
            {props.children}
          </BodyShort>
          {props.description && (
-            <Description
-              as="span"
-              size="small"
-              className="navds-radio__description"
-            >
+            <Description as="span" className="navds-radio__description">
              {props.description}
            </Description>
          )}
@@ -1,5 +1,21 @@
 # @navikt/ds-tailwind

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+## 2.8.8
+
+## 2.8.7
+
+## 2.8.6
+
+## 2.8.5
+
+## 2.8.4
+
 ## 2.8.3

 ## 2.8.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.3",
+    "@navikt/ds-tokens": "^2.8.11",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,21 @@
 # @navikt/ds-tokens

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+## 2.8.8
+
+## 2.8.7
+
+## 2.8.6
+
+## 2.8.5
+
+## 2.8.4
+
 ## 2.8.3

 ## 2.8.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,21 @@
 # @navikt/ds-icons

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+## 2.8.8
+
+## 2.8.7
+
+## 2.8.6
+
+## 2.8.5
+
+## 2.8.4
+
 ## 2.8.3

 ## 2.8.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -2,7 +2,8 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./cjs",
-    "module": "commonjs"
+    "module": "commonjs",
+    "skipLibCheck": true
  },
  "exclude": ["./figma", "./util", "./tests", "./scripts", "**/*.stories.*"],
  "include": ["./src"]
@@ -1,5 +1,21 @@
 # @navikt/ds-css-internal

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+## 2.8.8
+
+## 2.8.7
+
+## 2.8.6
+
+## 2.8.5
+
+## 2.8.4
+
 ## 2.8.3

 ## 2.8.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,69 @@
 # @navikt/ds-react-internal

+## 2.8.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.11
+  - @navikt/ds-icons@2.8.11
+
+## 2.8.10
+
+### Patch Changes
+
+- Updated dependencies [[`63fdacf0f`](https://github.com/navikt/aksel/commit/63fdacf0f8fa09593c64b35b49381d6c8a1befd1)]:
+  - @navikt/ds-react@2.8.10
+  - @navikt/ds-icons@2.8.10
+
+## 2.8.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.9
+  - @navikt/ds-icons@2.8.9
+
+## 2.8.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.8
+  - @navikt/ds-icons@2.8.8
+
+## 2.8.7
+
+### Patch Changes
+
+- Updated dependencies [[`7f3f025db`](https://github.com/navikt/aksel/commit/7f3f025db2ad605df4240605a733d10d08db753a)]:
+  - @navikt/ds-react@2.8.7
+  - @navikt/ds-icons@2.8.7
+
+## 2.8.6
+
+### Patch Changes
+
+- Updated dependencies [[`2eb358ad8`](https://github.com/navikt/aksel/commit/2eb358ad888979d21c385b3900973946f3f466be)]:
+  - @navikt/ds-react@2.8.6
+  - @navikt/ds-icons@2.8.6
+
+## 2.8.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.5
+  - @navikt/ds-icons@2.8.5
+
+## 2.8.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.4
+  - @navikt/ds-icons@2.8.4
+
 ## 2.8.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.8.3",
+  "version": "2.8.11",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.8.3",
-    "@navikt/ds-react": "^2.8.3",
+    "@navikt/ds-icons": "^2.8.11",
+    "@navikt/ds-react": "^2.8.11",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -15,15 +15,15 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^2.8.3",
-    "@navikt/ds-codemod": "^2.8.3",
-    "@navikt/ds-css": "^2.8.3",
-    "@navikt/ds-css-internal": "^2.8.3",
-    "@navikt/ds-icons": "^2.8.3",
-    "@navikt/ds-react": "^2.8.3",
-    "@navikt/ds-react-internal": "^2.8.3",
-    "@navikt/ds-tailwind": "^2.8.3",
-    "@navikt/ds-tokens": "^2.8.3"
+    "@navikt/aksel-icons": "^2.8.11",
+    "@navikt/ds-codemod": "^2.8.11",
+    "@navikt/ds-css": "^2.8.11",
+    "@navikt/ds-css-internal": "^2.8.11",
+    "@navikt/ds-icons": "^2.8.11",
+    "@navikt/ds-react": "^2.8.11",
+    "@navikt/ds-react-internal": "^2.8.11",
+    "@navikt/ds-tailwind": "^2.8.11",
+    "@navikt/ds-tokens": "^2.8.11"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,4 +1,4 @@
-import { ExternalLink } from "@navikt/ds-icons";
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
 import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
 import BlockContent from "@sanity/block-content-to-react";
 import cl from "clsx";
@@ -220,7 +220,7 @@ const serializers = {
            )
          }
        >
-          {children} <ExternalLink title="åpner lenken i ny fane" />
+          {children} <ExternalLinkIcon title="åpner lenken i ny fane" />
        </Link>
      ) : (
        <NextLink href={href} passHref legacyBehavior>
@@ -1,7 +1,7 @@
 import React from "react";

 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Logo = (props): JSX.Element => (
+const Logo = (props) => (
  <svg
    width="119"
    height="26"
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const NAVLogoDark = (props): JSX.Element => (
+const NAVLogoDark = (props) => (
  <svg
    width="3.25em"
    height="3.25em"
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const NAVLogoWhite = (props): JSX.Element => (
+const NAVLogoWhite = (props) => (
  <svg
    width="3.25em"
    height="3.25em"
@@ -1,5 +1,4 @@
 export * from "./assets";
-export { default as LayoutPicker } from "./layout/TemplatePicker";
 export { default as Accordion } from "./sanity-modules/Accordion";
 export { default as Alert } from "./sanity-modules/Alert";
 export { default as Bilde } from "./sanity-modules/bilde/Bilde";
@@ -1,53 +0,0 @@
-import Error from "next/error";
-import React from "react";
-import { SanityT } from "@/lib";
-import AkselArtikkelTemplate from "./page-templates/AkselArtikkel";
-import AkselPrinsippTemplate from "./page-templates/AkselPrinsipp";
-
-type aksel_artikkel = {
-  aksel_artikkel: (props: {
-    data: SanityT.Schema.aksel_artikkel;
-    title: string;
-  }) => JSX.Element;
-};
-
-type aksel_prinsipp = {
-  aksel_prinsipp: (props: {
-    data: SanityT.Schema.aksel_prinsipp;
-    title: string;
-  }) => JSX.Element;
-};
-
-type templateT = aksel_artikkel | aksel_prinsipp;
-
-const templates: templateT = {
-  aksel_artikkel: (props) => <AkselArtikkelTemplate {...props} />,
-  aksel_prinsipp: (props) => <AkselPrinsippTemplate {...props} />,
-};
-
-const TemplatePicker = ({
-  data,
-  title,
-}: {
-  data: SanityT.Schema.aksel_artikkel | SanityT.Schema.aksel_prinsipp;
-  title: string;
-}): JSX.Element => {
-  if (!Object.keys(templates).includes(data?._type)) {
-    console.warn(
-      `${data?._type} does not have a valid template to use, please create one.`
-    );
-
-    return (
-      <Error
-        statusCode={404}
-        title="Sanity-side mangler template, kontakt utvikler"
-      />
-    );
-  }
-
-  const Template = templates[data?._type];
-
-  return <Template data={data} title={title} />;
-};
-
-export default TemplatePicker;
@@ -1,4 +1,4 @@
-import { PageTypeT, SidebarT, urlFor } from "@/lib";
+import { urlFor } from "@/lib";
 import { Detail, Heading, Link } from "@navikt/ds-react";
 import Footer from "components/layout/footer/Footer";
 import { Header } from "components/layout/header/Header";
@@ -10,6 +10,7 @@ import NextLink from "next/link";
 import { capitalize } from "@/utils";
 import Image from "next/legacy/image";
 import { TableOfContentsv2 } from "components/website-modules/TOCv2";
+import { AkselSidebarT } from "@/types";

 const HeaderCube = ({ ...props }) => (
  <svg
@@ -59,8 +60,11 @@ export const WithSidebar = ({
  footer,
 }: {
  children: ReactNode;
-  sidebar: SidebarT;
-  pageType: PageTypeT;
+  sidebar: AkselSidebarT;
+  pageType: {
+    type: "Komponenter" | "Grunnleggende";
+    title: string;
+  };
  pageProps: any;
  intro?: ReactNode;
  footer?: ReactNode;
@@ -52,6 +52,13 @@ function Snarveier() {
        <FooterLink href="/prinsipper/brukeropplevelse">
          Prinsipper for brukeropplevelse
        </FooterLink>
+        <FooterLink href="https://identitet.nav.no/">Identitet</FooterLink>
+        <FooterLink href="https://sikkerhet.nav.no/">
+          Security Playbook
+        </FooterLink>
+        <FooterLink href="https://etterlevelse.intern.nav.no/">
+          Etterlevelse
+        </FooterLink>
      </BodyShort>
    </div>
  );
@@ -1,6 +1,6 @@
 import { Button, Label, Textarea } from "@navikt/ds-react";
 import { IdContext } from "components/website-modules/utils/contexts/id-context";
-import { FeedbackT } from "lib/types/types";
+import { FeedbackT } from "@/types";
 import { useRouter } from "next/router";
 import { useContext, useEffect, useState } from "react";

@@ -1,4 +1,5 @@
-import { Close, Hamburger as HamburgerIcon } from "@navikt/ds-icons";
+import { MenuHamburgerIcon, XMarkIcon } from "@navikt/aksel-icons";
+
 import { Button } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
@@ -53,8 +54,9 @@ export const Hamburger = () => {
          aria-expanded={open}
          className="focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover ml-2 flex aspect-square items-center justify-center rounded px-3 py-3 focus:outline-none"
        >
-          <HamburgerIcon
-            className="pointer-events-none text-2xl"
+          <MenuHamburgerIcon
+            fontSize="2rem"
+            className="pointer-events-none"
            aria-label="Åpne meny"
          />
        </button>
@@ -75,7 +77,7 @@ export const Hamburger = () => {
                  styles.akselTertiaryButton,
                  "absolute top-2 right-2"
                )}
-                icon={<Close title="lukk meny" className="h-5 w-5" />}
+                icon={<XMarkIcon title="lukk meny" fontSize="1.5rem" />}
              />
              <LinkElement
                onClick={() => setOpen(false)}
@@ -1,5 +1,5 @@
 import { Label } from "@navikt/ds-react";
-import { GroupedHits, SearchHit, options } from "lib/types/search";
+import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
 import { Hit, IconHit, IconPageHit } from "./Hit";
 import React from "react";

@@ -9,7 +9,7 @@ export function Group({
  startIndex,
  logSuccess,
 }: {
-  groups: GroupedHits;
+  groups: GroupedHitsT;
  query: string;
  startIndex: number;
  logSuccess: (index: number, url: string) => void;
@@ -21,7 +21,7 @@ export function Group({
  return (
    <>
      {Object.entries(groups)
-        .sort((a, b) => options[a[0]].index - options[b[0]].index)
+        .sort((a, b) => searchOptions[a[0]].index - searchOptions[b[0]].index)
        .map(([key, val], index, arr) => {
          const prev = arr.slice(0, index);
          const total =
@@ -32,7 +32,7 @@ export function Group({
              logSuccess={logSuccess}
              startIndex={total}
              key={key}
-              heading={`${options[key].display} (${val.length})`}
+              heading={`${searchOptions[key].display} (${val.length})`}
              hits={val}
              query={query}
            />
@@ -50,7 +50,7 @@ export function GroupComponent({
  logSuccess,
 }: {
  heading: React.ReactNode;
-  hits: SearchHit[];
+  hits: SearchHitT[];
  query: string;
  startIndex: number;
  logSuccess: (index: number, url: string) => void;
@@ -4,7 +4,7 @@ import { Tag } from "@navikt/ds-react";
 import cl from "classnames";
 import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";
-import { SearchHit } from "lib/types/search";
+import { SearchHitT } from "@/types";
 import NextLink from "next/link";

 export function Hit({
@@ -13,7 +13,7 @@ export function Hit({
  index,
  logSuccess,
 }: {
-  hit: SearchHit;
+  hit: SearchHitT;
  query: string;
  index: number;
  logSuccess: (index: number, url: string) => void;
@@ -81,7 +81,7 @@ export function IconHit({
  index,
  logSuccess,
 }: {
-  hit: SearchHit;
+  hit: SearchHitT;
  query: string;
  index: number;
  logSuccess: (index: number, url: string) => void;
@@ -139,7 +139,7 @@ export function IconPageHit({
  index,
  logSuccess,
 }: {
-  hit: SearchHit;
+  hit: SearchHitT;
  query: string;
  index: number;
  logSuccess: (index: number, url: string) => void;
@@ -1,5 +1,4 @@
 import { SearchLogT, useDebounce, logSearch } from "@/utils";
-import { Search as SearchIcon } from "@navikt/ds-icons";
 import {
  Button,
  Checkbox,
@@ -9,12 +8,13 @@ import {
  Search,
 } from "@navikt/ds-react";
 import { ChangeLogIconOutline } from "components/assets";
-import { options, SearchResults } from "lib/types/search";
+import { searchOptions, SearchResultsT } from "@/types";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import ReactModal from "react-modal";
 import { Group, GroupComponent } from "./Group";
 import styles from "../header.module.css";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";

 /**
 * https://www.figma.com/file/71Sm1h6VV23lbBbQ3CJJ9t/Aksel-v2?node-id=1861%3A186079&t=ARKgZcA6B7ysmG3V-0
@@ -24,10 +24,10 @@ import styles from "../header.module.css";

 */
 export const GlobalSearch = () => {
-  const [results, setResults] = useState<SearchResults>(null);
+  const [results, setResults] = useState<SearchResultsT>(null);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
-  const [activeTags, setTags] = useState<Array<keyof typeof options>>([]);
+  const [activeTags, setTags] = useState<Array<keyof typeof searchOptions>>([]);
  const [os, setOs] = useState<"mac" | "windows">("windows");
  const inputRef = useRef(null);

@@ -195,8 +195,8 @@ export const GlobalSearch = () => {
        className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
        aria-keyshortcuts="Control+b"
        icon={
-          <SearchIcon
-            className="pointer-events-none -mt-[1px] shrink-0 text-xl"
+          <MagnifyingGlassIcon
+            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
            aria-label="Åpne meny"
            aria-hidden
          />
@@ -223,7 +223,7 @@ export const GlobalSearch = () => {
          </button>
          <div className="search-grid-filter mt-8">
            <CheckboxGroup legend="Filter" onChange={setTags}>
-              {Object.entries(options)
+              {Object.entries(searchOptions)
                .filter((x) => !x[1].hidden)
                .map(([key, val]) => (
                  <Checkbox
@@ -284,7 +284,7 @@ export const GlobalSearch = () => {
                  {`${results?.totalHits} treff på "${query}"${
                    activeTags.length > 0
                      ? ` i ${activeTags
-                          .map((x) => options[x].display.toLowerCase())
+                          .map((x) => searchOptions[x].display.toLowerCase())
                          .join(", ")}`
                      : ""
                  }`}
@@ -1,214 +0,0 @@
-import { SanityT, urlFor } from "@/lib";
-import { SanityBlockContent } from "@/sanity-block";
-import { Next } from "@navikt/ds-icons";
-import { BodyShort, Detail, Heading, Ingress, Label } from "@navikt/ds-react";
-import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
-import Head from "next/head";
-import NextLink from "next/link";
-
-import {
-  abbrName,
-  BreadCrumbs,
-  dateStr,
-  Feedback,
-  TableOfContents,
-} from "../..";
-import { NoSidebarLayout } from "./wrappers/NoSidebar";
-
-const AkselArtikkelTemplate = ({
-  data,
-  title,
-}: {
-  data: SanityT.Schema.aksel_artikkel;
-  title: string;
-}): JSX.Element => {
-  if (!data.content || !data.heading) {
-    console.warn(
-      `Artikkelen har ikke ${
-        !data.content ? "innhold" : "overskrift"
-      }, så den kan ikke vises.`
-    );
-    return null;
-  }
-
-  const date = data?.updateInfo?.lastVerified
-    ? data?.updateInfo?.lastVerified
-    : data?.publishedAt
-    ? data.publishedAt
-    : data._updatedAt;
-
-  const authors = (data?.contributors as any)?.map((x) => x?.title) ?? [];
-
-  const hasTema = "tema" in data && data.tema && data?.tema.length > 0;
-
-  const aside = data?.relevante_artikler?.length > 0 && (
-    <aside
-      className="overflow-x-clip py-8"
-      aria-labelledby="relevante-artikler-aside"
-    >
-      <div className="relativept-12 pb-16">
-        <div className="dynamic-wrapper">
-          <Heading
-            level="2"
-            size="medium"
-            className="text-deepblue-700 px-4"
-            id="relevante-artikler-aside"
-          >
-            {data?.relevante_artikler?.length === 1
-              ? `Les også`
-              : `Relevante artikler`}
-          </Heading>
-          <div className="card-grid-3-1 mt-6 px-4">
-            {data.relevante_artikler.map((x: any) =>
-              x && x?._id ? <ArtikkelCard level="3" {...x} key={x._id} /> : null
-            )}
-          </div>
-        </div>
-      </div>
-    </aside>
-  );
-
-  const filteredTema =
-    hasTema && data?.tema?.filter((x: any) => x?.title && x?.slug);
-
-  return (
-    <>
-      <Head>
-        <title>{`${data?.heading} - ${title}`}</title>
-        <meta
-          property="og:title"
-          content={`${data?.heading} - ${title}`}
-          key="ogtitle"
-        />
-        <meta
-          name="description"
-          content={data?.seo?.meta ?? data?.ingress}
-          key="desc"
-        />
-        <meta
-          property="og:description"
-          content={data?.seo?.meta ?? data?.ingress}
-          key="ogdesc"
-        />
-        <meta property="og:type" content="article" />
-        <meta
-          property="og:image"
-          content={
-            data?.seo?.image
-              ? urlFor(data?.seo?.image)
-                  .width(1200)
-                  .height(630)
-                  .fit("crop")
-                  .quality(100)
-                  .url()
-              : hasTema && (data.tema[0] as any)?.seo?.image
-              ? urlFor((data.tema[0] as any)?.seo?.image)
-                  .width(1200)
-                  .height(630)
-                  .fit("crop")
-                  .quality(100)
-                  .url()
-              : ""
-          }
-          key="ogimage"
-        />
-      </Head>
-      <NoSidebarLayout aside={aside}>
-        <div className="mx-auto mb-16 max-w-prose lg:ml-0">
-          <BreadCrumbs auto />
-          <Heading
-            level="1"
-            size="large"
-            className="text-deepblue-800 mt-4 md:text-5xl"
-          >
-            {data.heading}
-          </Heading>
-          {data?.ingress && (
-            <Ingress className="override-text-700 mt-4 text-2xl">
-              {data?.ingress}
-            </Ingress>
-          )}
-
-          <div className="mt-6 inline-flex flex-wrap items-center gap-2 text-base">
-            <Detail uppercase as="span">
-              {dateStr(date)}
-            </Detail>
-            {authors?.length > 0 && (
-              <>
-                <span className="bg-deepblue-700 h-2 w-2 rotate-45 rounded-[1px] opacity-25" />
-                <BodyShort
-                  size="small"
-                  as="div"
-                  className="flex flex-wrap gap-1"
-                >
-                  <address className="not-italic">{authors?.[0]}</address>
-                </BodyShort>
-              </>
-            )}
-          </div>
-          {hasTema && (
-            <div className="mt-8 flex flex-wrap gap-2">
-              {filteredTema.map(({ title, slug }: any) => (
-                <span key={title}>
-                  <NextLink
-                    key={title}
-                    href={`/god-praksis/${slug.current}`}
-                    passHref
-                    legacyBehavior
-                  >
-                    <BodyShort
-                      size="small"
-                      as="a"
-                      className="min-h-8 text-deepblue-800 focus-visible:shadow-focus flex items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize no-underline hover:underline focus:outline-none"
-                    >
-                      {title}
-                      <Next aria-hidden />
-                    </BodyShort>
-                  </NextLink>
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-        <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
-          <TableOfContents
-            changedState={data?.content ?? []}
-            hideToc={false}
-            aksel
-          />
-          <div className="max-w-prose lg:col-span-2 lg:col-start-1">
-            <SanityBlockContent blocks={data?.content ?? []} variant="aksel" />
-            <div className="mt-12">
-              {authors?.length > 0 && (
-                <Label className="text-deepblue-700 mb-2" as="p">
-                  Bidragsytere
-                </Label>
-              )}
-              {authors?.length > 0 && (
-                <BodyShort
-                  as="div"
-                  className="text-text-subtle mb-1 flex flex-wrap gap-1"
-                >
-                  {authors.map(abbrName).map((x, y) => (
-                    <address className="not-italic" key={x}>
-                      {x}
-                      {y !== authors.length - 1 && ", "}
-                    </address>
-                  ))}
-                </BodyShort>
-              )}
-              <BodyShort as="span" className="text-text-subtle">
-                Publisert: {dateStr(data?.publishedAt ?? data?._updatedAt)}
-              </BodyShort>
-            </div>
-            <div className="mt-12 md:mt-16">
-              <Feedback akselFeedback docId={data?._id} docType={data?._type} />
-            </div>
-          </div>
-        </div>
-      </NoSidebarLayout>
-    </>
-  );
-};
-
-export default AkselArtikkelTemplate;
@@ -1,189 +0,0 @@
-import { SanityT, urlFor } from "@/lib";
-import { SanityBlockContent } from "@/sanity-block";
-import { BodyShort, Heading, Ingress, Label } from "@navikt/ds-react";
-import cl from "clsx";
-import { Header } from "components/layout/header/Header";
-import Head from "next/head";
-import { Footer } from "..";
-import {
-  abbrName,
-  Bilde,
-  BreadCrumbs,
-  dateStr,
-  Feedback,
-  TableOfContents,
-} from "../..";
-
-const AkselPrinsippTemplate = ({
-  data,
-  title,
-}: {
-  data: SanityT.Schema.aksel_prinsipp;
-  title: string;
-}): JSX.Element => {
-  if (!data.content || !data.heading) {
-    console.warn(
-      `Artikkelen har ikke ${
-        !data.content ? "innhold" : "overskrift"
-      }, så den kan ikke vises.`
-    );
-    return null;
-  }
-
-  const authors = (data?.contributors as any)?.map((x) => x?.title) ?? [];
-  const mainPage = data?.prinsipp?.hovedside;
-
-  return (
-    <>
-      <Head>
-        <title>{`${data?.heading} - Prinsipp - ${title}`}</title>
-        <meta
-          property="og:title"
-          content={`${data?.heading} - ${title}`}
-          key="ogtitle"
-        />
-        <meta
-          property="og:description"
-          content={data?.seo?.meta ?? data?.ingress}
-          key="ogdesc"
-        />
-        <meta property="og:type" content="article" />
-        <meta
-          property="og:image"
-          content={
-            data?.seo?.image
-              ? urlFor(data?.seo?.image)
-                  .width(1200)
-                  .height(630)
-                  .fit("crop")
-                  .quality(100)
-                  .url()
-              : ""
-          }
-          key="ogimage"
-        />
-      </Head>
-      <Header variant={mainPage ? "default" : "subtle"} />
-      <main
-        tabIndex={-1}
-        id="hovedinnhold"
-        className={cl("aksel-artikkel pt-4 focus:outline-none", {
-          "bg-white": mainPage,
-          "bg-surface-subtle": !mainPage,
-        })}
-      >
-        <article className="overflow-x-clip">
-          <div
-            className={cl("max-w-aksel mx-auto px-4 sm:w-[90%]", {
-              "pb-32": mainPage,
-            })}
-          >
-            <div className="pt-12">
-              <div className="mx-auto mb-16 max-w-prose lg:ml-0 ">
-                {!mainPage && (
-                  <BreadCrumbs
-                    text={`Prinsipper for ${data?.prinsipp?.prinsippvalg}`}
-                    href={`/prinsipper/${data?.prinsipp?.prinsippvalg}`}
-                  />
-                )}
-                <Heading
-                  level="1"
-                  size="large"
-                  className="text-deepblue-700 mt-4 md:text-5xl"
-                >
-                  {data.heading}
-                </Heading>
-                {data?.ingress && (
-                  <Ingress className="override-text-700 mt-5 text-2xl">
-                    {data?.ingress}
-                  </Ingress>
-                )}
-                <div className="mt-6 flex gap-3 text-base">
-                  <BodyShort
-                    size="small"
-                    as="span"
-                    className="text-text-subtle "
-                  >
-                    {dateStr(data?._updatedAt)}
-                  </BodyShort>
-                  {authors?.length > 0 && (
-                    <BodyShort
-                      size="small"
-                      as="div"
-                      className="flex flex-wrap gap-1"
-                    >
-                      <address className="not-italic">{authors[0]}</address>
-                    </BodyShort>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className={cl("pt-32", {
-              "bg-gray-100": mainPage,
-            })}
-          >
-            <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
-              <div className="pb-16 md:pb-32">
-                <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
-                  <TableOfContents
-                    changedState={data?.content ?? []}
-                    hideToc={false}
-                    aksel
-                  />
-                  <div className="max-w-prose lg:col-span-2 lg:col-start-1">
-                    {data?.hero_bilde && (
-                      <Bilde
-                        node={data.hero_bilde as any}
-                        className="-mt-36 mb-10 sm:-mt-72"
-                      />
-                    )}
-                    <SanityBlockContent
-                      blocks={data?.content ?? []}
-                      variant="aksel"
-                    />
-                    <div className="mt-12">
-                      {authors?.length > 0 && (
-                        <Label className="text-deepblue-700 mb-2" as="p">
-                          Bidragsytere
-                        </Label>
-                      )}
-                      {authors?.length > 0 && (
-                        <BodyShort
-                          as="div"
-                          className="text-text-subtle mb-1 flex flex-wrap gap-1"
-                        >
-                          {authors.map(abbrName).map((x, y) => (
-                            <address className="not-italic" key={x}>
-                              {x}
-                              {y !== authors.length - 1 && ", "}
-                            </address>
-                          ))}
-                        </BodyShort>
-                      )}
-                      <BodyShort as="span" className="text-text-subtle ">
-                        Publisert:{" "}
-                        {dateStr(data?.publishedAt ?? data?._updatedAt)}
-                      </BodyShort>
-                    </div>
-                    <div className="mt-12 md:mt-16">
-                      <Feedback
-                        akselFeedback
-                        docId={data?._id}
-                        docType={data?._type}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </article>
-      </main>
-      <Footer />
-    </>
-  );
-};
-
-export default AkselPrinsippTemplate;
@@ -1,28 +0,0 @@
-import { Footer } from "@/layout";
-import { Header } from "components/layout/header/Header";
-import React from "react";
-
-export const NoSidebarLayout = ({
-  children,
-  aside = null,
-}: {
-  children: React.ReactNode;
-  aside?: React.ReactNode;
-}) => {
-  return (
-    <>
-      <Header variant="subtle" />
-      <main
-        tabIndex={-1}
-        id="hovedinnhold"
-        className="aksel-artikkel bg-surface-subtle pt-4 focus:outline-none"
-      >
-        <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
-          <article className="pt-12 pb-16 md:pb-32">{children}</article>
-        </div>
-        {aside}
-      </main>
-      <Footer />
-    </>
-  );
-};
@@ -1,6 +1,6 @@
-import { SidebarT } from "@/lib";
+import { AkselSidebarT } from "@/types";
 import { logNav } from "@/utils";
-import { Expand } from "@navikt/ds-icons";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, Detail, Tag } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
@@ -26,7 +26,7 @@ const NavItem = ({
        {
          "before:border-l-border-action-selected  before:top-1/2 before:h-6 before:-translate-y-1/2 before:rounded-full before:border-l-[4px]":
            isActive,
-          "before:h-full before:rounded-full before:border-l before:border-l-gray-200 hover:before:top-1/2 hover:before:h-6 hover:before:-translate-y-1/2 hover:before:border-l-2 hover:before:border-l-gray-400":
+          "before:h-full before:rounded-full before:border-l before:border-l-gray-200  hover:before:top-1/2 hover:before:h-6 hover:before:-translate-y-1/2 hover:before:border-l-2 hover:before:border-l-gray-400":
            !isActive,
        }
      )}
@@ -80,7 +80,13 @@ const NavItem = ({
  );
 };

-const Dropdown = ({ title, links }: { title: string; links: SidebarT }) => {
+const Dropdown = ({
+  title,
+  links,
+}: {
+  title: string;
+  links: AkselSidebarT;
+}) => {
  const [open, setOpen] = useState(true);
  const { asPath } = useRouter();

@@ -93,11 +99,11 @@ const Dropdown = ({ title, links }: { title: string; links: SidebarT }) => {
      >
        <Detail
          as="span"
-          className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold first:mt-0"
+          className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold transition first:mt-0"
        >
          {title}
-          <span className="flex h-6 w-6 items-center justify-center rounded">
-            <Expand
+          <span className="flex h-6 w-6  items-center justify-center rounded">
+            <ChevronDownIcon
              className={cl("text-base", { "rotate-180": open })}
              aria-hidden
              title={!open ? `åpne ${title}` : `lukk ${title}`}
@@ -125,7 +131,7 @@ export const Sidebar = ({
  links,
 }: {
  kategori: "Komponenter" | "Grunnleggende";
-  links: SidebarT;
+  links: AkselSidebarT;
 }) => {
  const sections = useMemo(
    () =>
@@ -4,11 +4,7 @@ import { SanityT } from "@/lib";
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";

-const Accordion = ({
-  node,
-}: {
-  node: SanityT.Schema.accordion;
-}): JSX.Element => {
+const Accordion = ({ node }: { node: SanityT.Schema.accordion }) => {
  if (!node || node.list.length === 0) {
    return null;
  }
@@ -3,11 +3,7 @@ import React from "react";
 import { SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";

-const Alert = ({
-  node,
-}: {
-  node: SanityT.Schema.alert & { _key: string };
-}): JSX.Element => {
+const Alert = ({ node }: { node: SanityT.Schema.alert & { _key: string } }) => {
  return (
    <div className="mb-7 max-w-2xl">
      <DsAlert variant={node.variant}>
@@ -1,21 +1,13 @@
 /* eslint-disable @next/next/no-img-element */
-import { SanityT, urlFor } from "@/lib";
+import { urlFor } from "@/lib";
 import { Heading } from "@navikt/ds-react";
 import Nextlink from "next/link";
 import cl from "clsx";
 import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";
+import { ArticleListT } from "@/types";

-const ComponentOverview = ({
-  node,
-}: {
-  node: {
-    _id: string;
-    heading: string;
-    slug: { current: string };
-    status?: SanityT.Schema.komponent_artikkel["status"];
-  }[];
-}): JSX.Element => {
+const ComponentOverview = ({ node }: { node: ArticleListT }) => {
  if (!node || node.length === 0) {
    return null;
  }
@@ -40,7 +32,7 @@ const ComponentOverview = ({

  return (
    <div className="mb-8">
-      <ul className="component-card-grid">
+      <ul className="grid grid-cols-[repeat(auto-fill,_minmax(min(17rem,_100%),_1fr))] gap-6">
        {sorted.map((x) => (
          <li key={x._id}>
            <div className="bg-surface-subtle focus-within:ring-border-focus ring-border-subtle hover:shadow-medium min-h-56 group relative rounded-2xl focus-within:ring-[3px] hover:ring-1">
@@ -1,7 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT, urlFor } from "@/lib";
-import { ErrorFilled, SuccessFilled, WarningFilled } from "@navikt/ds-icons";
+import {
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import React from "react";
@@ -10,23 +14,26 @@ const GetIcon = (s: string) => {
  switch (s) {
    case "do":
      return (
-        <SuccessFilled
+        <CheckmarkCircleFillIcon
          aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-green-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-green-500"
        />
      );
    case "dont":
      return (
-        <ErrorFilled
+        <XMarkOctagonFillIcon
          aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-red-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-red-500"
        />
      );
    case "warning":
      return (
-        <WarningFilled
+        <ExclamationmarkTriangleFillIcon
          aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-orange-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-orange-500"
        />
      );
    default:
@@ -38,7 +45,7 @@ const Element = ({
  block,
 }: {
  block: Sanity.Keyed<SanityT.Schema.do_dont_block>;
-}): JSX.Element => {
+}) => {
  if (!block.picture) return null;
  return (
    <figure
@@ -60,14 +67,18 @@ const Element = ({
          {
            "border-t-border-success": block.variant === "do",
            "border-t-border-danger": block.variant === "dont",
-            "border-t-border-warning": block.variant === "warning",
+            "border-t-surface-warning": block.variant === "warning",
          }
        )}
      />
      <figcaption data-variant={block.variant}>
        <div className="mt-3">
          {block.description && (
-            <BodyShort size="small" as="span" className="inline-flex gap-2">
+            <BodyShort
+              size="small"
+              as="span"
+              className="inline-flex items-center gap-2"
+            >
              {GetIcon(block.variant)}
              {block.description}
            </BodyShort>
@@ -11,7 +11,7 @@ const ExpansionCard = ({
    description?: string;
    body: any[];
  };
-}): JSX.Element => {
+}) => {
  if (!node.heading || !node.body || !node.heading_level) {
    return null;
  }
@@ -1,15 +1,15 @@
 import { LevelTwoHeading } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
-import { SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
+import { AkselGrunnleggendeDocT, AkselKomponentDocT } from "@/types";
 import { Label } from "@navikt/ds-react";
 import React from "react";

 const Intro = ({
  node,
 }: {
-  node: SanityT.Schema.intro_komponent;
-}): JSX.Element => {
+  node: AkselKomponentDocT["intro"] | AkselGrunnleggendeDocT["intro"];
+}) => {
  if (!node || !node.body || !node.brukes_til) {
    return null;
  }
@@ -2,7 +2,7 @@ import { Snippet } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";

-const Kode = ({ node }: { node: SanityT.Schema.kode }): JSX.Element => {
+const Kode = ({ node }: { node: SanityT.Schema.kode }) => {
  if (!node || !node.code) {
    return null;
  }
@@ -12,7 +12,7 @@ type SpesialT = {
  token?: { title: string; kategori: string };
 };

-const SideModul = ({ node }: { node: SpesialT }): JSX.Element => {
+const SideModul = ({ node }: { node: SpesialT }) => {
  if (!node || !node.modul) {
    return null;
  }
@@ -2,11 +2,7 @@ import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
 import { Table } from "@navikt/ds-react";

-const TableComponent = ({
-  node,
-}: {
-  node: SanityT.Schema.tabell_v2;
-}): JSX.Element => {
+const TableComponent = ({ node }: { node: SanityT.Schema.tabell_v2 }) => {
  if (!node || !node.rows || node.rows.length < 2) {
    return null;
  }
@@ -12,11 +12,7 @@ const KBD = (props: React.HTMLAttributes<HTMLElement>) => (
  />
 );

-const UuSeksjon = ({
-  node,
-}: {
-  node: SanityT.Schema.tastatur_modul;
-}): JSX.Element => {
+const UuSeksjon = ({ node }: { node: SanityT.Schema.tastatur_modul }) => {
  if (!node || !node?.tastatur) {
    return null;
  }
@@ -1,39 +1,16 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
-import { ClipboardIcon } from "@navikt/aksel-icons";
+import { ChevronDownCircleIcon } from "@navikt/aksel-icons";
 import internal from "@navikt/ds-css-internal/tokens.json";
 import core from "@navikt/ds-css/tokens.json";
-import { Expand, SuccessStroke } from "@navikt/ds-icons";
 import { BodyLong, Label, Link } from "@navikt/ds-react";
 import cl from "classnames";
-import copy from "copy-to-clipboard";
+import CopyButton from "components/sanity-modules/code/CopyButton";
 import NextLink from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";

 const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
  const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(false);
-
-  const timeoutRef = useRef<NodeJS.Timeout>();
-
-  const handleCopy = () => {
-    setActive(true);
-    timeoutRef.current && clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setActive(false), 2000);
-    const str = Object.entries(tokens).reduce(
-      (prev, cur) =>
-        prev +
-        `${cur[0]}: ${
-          cur[1].startsWith("--") ? `var(${cur[1]})` : `${cur[1]}`
-        };\n`,
-      ""
-    );
-    copy(str);
-  };
-
-  useEffect(() => {
-    return () => timeoutRef.current && clearTimeout(timeoutRef.current);
-  }, []);

  const tokens: { [key: string]: string } | null =
    node.title in core
@@ -77,22 +54,17 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
        </table>
        {(open || !showMore) && (
          <div className="border-border-divider bg-surface-neutral-subtle relative w-full rounded-b border border-t-0 p-2">
-            <button
-              onClick={handleCopy}
-              className="text-text-default hover:bg-surface-neutral-subtle-hover focus-visible:shadow-focus absolute top-2 right-2 rounded px-1 py-1 text-2xl focus:outline-none"
-            >
-              {active ? (
-                <>
-                  <SuccessStroke className="text-[1.5rem]" aria-hidden />
-                  <span className="sr-only">Kopier formarterte tokens</span>
-                </>
-              ) : (
-                <>
-                  <ClipboardIcon aria-hidden />
-                  <span className="sr-only">Kopier formarterte tokens</span>
-                </>
+            <CopyButton
+              variant="tokentable"
+              content={Object.entries(tokens).reduce(
+                (prev, cur) =>
+                  prev +
+                  `${cur[0]}: ${
+                    cur[1].startsWith("--") ? `var(${cur[1]})` : `${cur[1]}`
+                  };\n`,
+                ""
              )}
-            </button>
+            />
            <Label size="small" as="span" spacing>
              Hva er dette?
            </Label>
@@ -122,14 +94,15 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
      {!open && showMore && (
        <button
          onClick={() => setOpen(true)}
-          className="text-medium group mx-auto flex shrink-0 -translate-y-3/4 flex-col items-center focus:outline-none"
+          className="text-medium group mx-auto flex shrink-0 -translate-y-3/4 flex-col items-center gap-1 focus:outline-none"
        >
          <span className="group-focus-visible:bg-border-focus group-focus-visible:text-text-on-action group-focus-visible:shadow-focus">
            Se alle tokens
          </span>
-          <Expand
-            className="h-4 w-4 transition-all group-hover:translate-y-1"
+          <ChevronDownCircleIcon
+            className="transition-all group-hover:translate-y-1"
            aria-hidden
+            fontSize="1.5rem"
          />
        </button>
      )}
@@ -1,4 +1,4 @@
-import { FeedbackT } from "@/lib";
+import { FeedbackT } from "@/types";
 import { IdContext } from "@/utils";
 import { Button, Heading, Textarea } from "@navikt/ds-react";
 import cl from "classnames";
@@ -16,7 +16,7 @@ const Video = ({
    transkripsjon?: string;
    caption?: string;
  };
-}): JSX.Element => {
+}) => {
  const [open, setOpen] = useState(false);

  if (
@@ -19,7 +19,7 @@ const Bilde = ({
    dekorativt?: boolean;
  };
  className?: string;
-}): JSX.Element => {
+}) => {
  if (!node || !node.asset) {
    return null;
  }
@@ -1,5 +1,11 @@
 import { withErrorBoundary } from "@/error-boundary";
-import { SanityT } from "@/lib";
+
+import {
+  ResolveContributorsSingleT,
+  ResolveTemaT,
+  ResolveSlugT,
+  AkselGodPraksisDocT,
+} from "@/types";
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import NextLink from "next/link";
 import { abbrName, dateStr, logNav } from "../..";
@@ -16,16 +22,9 @@ const ArtikkelCard = ({
  tema,
  level = "2",
  ...rest
-}: Partial<
-  (SanityT.Schema.aksel_artikkel | SanityT.Schema.aksel_blogg) & {
-    slug: string;
-    tema: string[];
-    source?: string;
-    contributor: { title: string } | null;
-    variant?: "god-praksis" | "tema";
-    level?: "2" | "3" | "4";
-  }
->) => {
+}: ResolveContributorsSingleT<
+  ResolveTemaT<ResolveSlugT<AkselGodPraksisDocT>>
+> & { source: string; variant: string; level?: "2" | "3" }) => {
  const date = (rest as any)?.updateInfo?.lastVerified
    ? (rest as any)?.updateInfo?.lastVerified
    : publishedAt
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	fcec29fd60	Version Packages (#1912 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-04-03 18:49:10 +02:00
Ken	2704279107	✨ Oppdatert ikoner (#1909 )	2023-04-03 16:08:52 +02:00
github-actions[bot]andgithub-actions[bot]	46cbb4ba87	Version Packages (#1908 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-31 13:41:44 +02:00
Ken	63fdacf0f8	♻️ Refactor eventhandling i datepicker-hooks (#1907 )	2023-03-31 13:26:53 +02:00
github-actions[bot]andgithub-actions[bot]	b5c8a94378	Version Packages (#1906 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-31 12:47:17 +02:00
Ken	212194964c	✨ Bedre tokens-utvalg for button (#1905 )	2023-03-31 11:58:30 +02:00
Ken	d151cf4c07	🐛 Fikset bakgrunn på tips-modul	2023-03-30 15:30:14 +02:00
Ken	44ba7a3a79	♻️ Bruker flere nye aksel-icons på nettside, refactor Tips-modul	2023-03-30 15:26:36 +02:00
Ken	d94a636dc4	🐛 Fikset build-error på bakgrunn av ny sanity-dependency	2023-03-30 14:20:02 +02:00
github-actions[bot]andgithub-actions[bot]	36ae2e5005	Version Packages (#1903 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-30 10:37:10 +02:00
Ken	ed8e284540	📝 changeset	2023-03-30 10:10:44 +02:00
Ken	262d59cf98	✨ Nye ikoner	2023-03-30 10:09:39 +02:00
Ken	57705de77c	🎨 Sanity doc-creation tekster	2023-03-29 16:13:54 +02:00
Ken	4ec35a01ca	⬆️ Sanity v3.8.0	2023-03-29 14:09:59 +02:00
github-actions[bot]andgithub-actions[bot]	6113e6e59f	Version Packages (#1887 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-29 13:57:21 +02:00
Ken	7f3f025db2	🎨 Fikset typografi checkbox/radio, button-token	2023-03-29 13:54:17 +02:00
github-actions[bot]andgithub-actions[bot]	44671abb5f	Version Packages (#1885 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-29 13:27:04 +02:00
Ken	2eb358ad88	✨ Alert, Chips og ErrorSummary har nå bedre utvalg av tokens 📝 Token for Toggle-chips text 🎨 Alert bruker nye ikoner, token for ikonfarger 🎨 Alert bruker gamle ikoner, men nå med tokens 🎨 Error-summary bruker nå riktig token for listemarkering	2023-03-29 13:15:29 +02:00
Ken	6bdc02761b	Merge branch 'codeblock'	2023-03-29 12:48:34 +02:00
Ken	f52ef19be2	♻️ Refactor copy-button 💄 Copybutton animasjon 💄 dropdown bakgrunn-animert 💄 bakgrunnsfarge på snippet 💄 Toc-animasjon ♻️ bruker en samlet copybutton-implementasjon	2023-03-29 12:48:23 +02:00
github-actions[bot]andgithub-actions[bot]	989a97a8bc	Version Packages (#1880 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-29 10:53:19 +02:00
Ken	8de6ba22c3	🎨 Bedre tokens for accordion	2023-03-29 10:49:39 +02:00
Ken	f664370826	🎨 Accordion tokens for header-bakgrunn	2023-03-29 10:38:19 +02:00
Ken	55b5856183	🐛 Select text-color (#1879 )	2023-03-29 10:21:44 +02:00
Ken	5a72a62190	🐛 Fikset preview for komponentsider 🔥 Fjernet JSX.Element type fra gammel nextjs config	2023-03-28 10:46:37 +02:00
Ken	d89eaccd44	♻️ Refactor query-struktur og typer for /pages ♻️ refaktorert forside-setup 🏷️ Flyttet ts-typer 🚚 Inlinet Template-sider 🚚 Inlinet prinsipp-template ♻️ Refactor god-praksis sider ♻️ Refakorert typer for blogg, komponenter og grunnleggende	2023-03-27 16:56:10 +02:00
Ken	7cffc0bf12	♿ Bruker native ol-liste da skjermleser nå feilet	2023-03-24 16:12:09 +01:00
Ken	8d4966c83f	💄 Erstattet li-element med css	2023-03-24 16:06:50 +01:00
Ken	edcc4e5071	🐛 Sourcemap fungerte ikke i Aksel-icons	2023-03-24 15:43:22 +01:00
Ken	a5821578a0	📝 Etterlevelse i footer	2023-03-24 15:09:00 +01:00
Ken	7ff8ce7e3b	Merge branch 'next'	2023-03-24 14:20:07 +01:00
Ken	fa0c07e04a	📝 Tekst på /god-praksis	2023-03-24 13:06:57 +01:00
Ken	e97b31ea94	📝 Assigner issues til annen bruker	2023-03-24 12:49:15 +01:00
Ken	d1549cb5ff	🔥 Fjernet redaktør fra komponent/grunnleggende highlight	2023-03-24 12:45:41 +01:00
Ken	01bcbbf1ff	🐛 Fjernet duplikat footer-lenke	2023-03-24 12:36:26 +01:00
Ken	41fd9e7b25	♻️ Typer-refactor for blogg	2023-03-24 12:35:19 +01:00
Ken	e468f9d93e	♻️ Refaktorert standalone-page	2023-03-24 11:05:39 +01:00
Ken	ccd9e73446	🏷️ Egne typer for Artikler	2023-03-24 00:16:19 +01:00
Ken	eb2c7ab777	🔥 Fjernet ubrukte filer	2023-03-23 23:40:31 +01:00
Ken	0ccee41b7c	🔥 Fjernet stæsj kategori fra sanity	2023-03-23 23:37:33 +01:00
Ken	865a19c681	♻️ Rename plugins-folder	2023-03-23 23:32:12 +01:00
Ken	eabad5af35	♻️ inlinet css	2023-03-23 23:27:02 +01:00
Ken	7ab07f3f46	🐛 Fikset OL-lenker med 10+ elementer	2023-03-23 15:52:08 +01:00
Ken	5ead5f9cde	🎨 Flyttet masonary liste ut i egen func	2023-03-23 13:20:12 +01:00
Ken	1fb56a32d0	Merge branch 'main' into next	2023-03-23 13:13:52 +01:00
Ken	c88632d92c	🎨 Justert spacing mellom blokker	2023-03-22 15:55:29 +01:00
Ken	70bf09a4d6	🔥 Fjernet toolcard	2023-03-22 15:10:20 +01:00
Ken	0cce29182b	♿ Wrappet nyeste artikler seksjon i section	2023-03-22 14:54:07 +01:00
Ken	a7b619dd18	🎨 Dynamisk riktekst i expansioncard	2023-03-22 14:48:26 +01:00
Ken	945ea68414	🐛 Fikset lenker	2023-03-22 10:08:27 +01:00
Ken	9e5b5a461f	🎨 henter inn artikler fra grunnleggende også	2023-03-21 15:26:10 +01:00
Ken	66dc7e41ed	🎨 Bruker nå SEO-bilder for blogg-cards også	2023-03-21 15:11:27 +01:00
Ken	f85a2bd834	♿ Semantisk seksjonering av cards på forside	2023-03-21 14:32:10 +01:00
Ken	6812a18a34	🏗️ Query fjerner artikkel fra masonary hvis den er highlighted	2023-03-21 14:27:01 +01:00
Ken	721a315f67	🎨 riktig plassering av toolcard	2023-03-21 13:33:38 +01:00
Ken	d508423406	✨ v1 av ny rigg for forside-blokker	2023-03-21 13:27:22 +01:00
Ken	c9c8bf72e8	🎨 Card-visning med riktig tagg	2023-03-21 12:57:04 +01:00
Ken	d9bb32ace0	🎨 Card-komponent for masonary	2023-03-21 11:57:21 +01:00
Ken	6082485287	🎨 Card-komponent for masonary	2023-03-21 11:56:52 +01:00
Ken	2b2b3aa819	Merge branch 'main' into next	2023-03-21 11:27:03 +01:00
Ken	5628f1c4dd	🎨 Kortet ned aksel-icons script-lengde	2023-03-21 11:12:54 +01:00
Ken	72aa6325ed	🎨 Highlights støtter 2 artikler	2023-03-20 12:41:23 +01:00
Ken	e1f2a46ae0	🎨 Highlighting av siste fra aksel	2023-03-20 12:14:33 +01:00
Ken	489c6678d2	Merge branch 'main' into next	2023-03-20 09:27:41 +01:00
Ken	9c70200962	Merge branch 'main' into next	2023-03-17 13:53:31 +01:00
Ken	c1360da7d7	🎨 Oppdatert queries og lagt til masonary	2023-03-17 08:59:23 +01:00
Ken	de2a3990dc	🔥 Fjernet forside-variant av latestbloggposts	2023-03-16 23:23:43 +01:00
Ken	46433118b2	🔥 Fjernet forside-variant av latestbloggposts	2023-03-16 23:23:04 +01:00
Ken	de861e469c	Merge branch 'main' into next	2023-03-16 23:20:26 +01:00
Ken	ae64920a34	Merge branch 'main' into next	2023-03-16 20:47:24 +01:00
Ken	2221b2e01d	💄 Dodont wrapping fikset	2023-03-15 12:13:42 +01:00
Ken	b31b1b3533	💄 Inlinet blogg-cards	2023-03-14 14:58:52 +01:00
Ken	ff8bcb870e	💄 Bedre alignment av blogg-bilder	2023-03-14 14:47:23 +01:00
Ken	0a7e6311de	📝 Justert search-button, tekster	2023-03-14 14:26:04 +01:00
Ken	961d97ef0d	📝 Justert tekster på feedback i sanity	2023-03-14 14:05:39 +01:00
Ken	f2477e772d	🎨 Logging av footer-lenker	2023-03-14 13:56:30 +01:00
Ken	bad960be56	🎨 Oppdatert Footer til ny variant	2023-03-14 13:53:13 +01:00
Ken	c53e3a050b	💄 Fjernet maksbredde på intro-cards for komponentside	2023-03-14 13:09:59 +01:00
Ken	d9e40b71b1	💄 Justert bloggvisning og cards på forside	2023-03-14 13:06:35 +01:00
Ken	c1828f992f	🎉 Next router fungerer nå i storybook	2023-03-14 11:39:23 +01:00
Ken	522bb95ddb	🐛 Footer story funker ikke i storybook	2023-03-14 10:15:31 +01:00
Ken	7ab690d210	Merge branch 'main' into next	2023-03-14 10:11:56 +01:00
Ken	de741ce8a8	🎨 Footer story	2023-03-14 10:10:15 +01:00
Ken	918d21c3ba	🎨 Fikset kom i gang med kode lenke	2023-03-14 10:08:03 +01:00
Ken	121a678fa0	💄 Justert farger på headings fra 800 -> 700	2023-03-14 09:42:58 +01:00
Ken	576790a2ff	💄 Justert maksbredder	2023-03-14 09:36:22 +01:00
Ken	6609631f46	Merge branch 'main' into next	2023-03-14 09:28:50 +01:00
Ken	7c37e3af56	🔍 Gjemmer dev fra SEO	2023-03-13 16:54:32 +01:00
Ken	9703f082f1	🔍 Gjemmer dev fra SEO	2023-03-13 16:53:09 +01:00
Ken	18005f89a2	🔥 Fjernet ubrukt sanity-kode for ny forside	2023-03-13 16:34:35 +01:00
Ken	8a4321ebd3	🐛 Artikkelcard mistet padding på desktop	2023-03-13 16:31:27 +01:00
Ken	28938dd4a6	⚡ Filterer ut WIP-tema	2023-03-13 16:29:00 +01:00
Ken	bb3a431e2a	💄 mobiltilpasset cards	2023-03-13 16:24:19 +01:00
Ken	00e787a400	💄 Tekst-størrelser	2023-03-13 16:12:09 +01:00
Ken	04215daf7e	🎨 Ny visning for god-praksis lenker	2023-03-13 16:04:37 +01:00
Ken	2c722e3a7d	💄 Justert spacing forside-blokker	2023-03-13 15:58:00 +01:00
Ken	8d511c90f1	🎨 Nye forsidelenker god praksis	2023-03-13 15:53:33 +01:00
Ken	8be270c8c5	💄 Oppdatert visning av intro-lenker	2023-03-13 15:31:42 +01:00
Ken	426f4d54a1	🔥 Linter	2023-03-13 14:12:55 +01:00
Ken	8ff68266c8	🎨 Lenker på komponentside	2023-03-13 14:11:44 +01:00