Version Packages (#3013 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Icons: FigureCombination icon adjusted (#3031 )
2026-10-16 10:42:03 +00:00 · 2024-06-25 15:39:57 +02:00 · 2024-06-25 12:32:37 +02:00 · 2024-06-25 12:27:35 +02:00 · 2024-06-25 09:52:07 +02:00 · 2024-06-24 15:03:36 +02:00
113 changed files with 1796 additions and 3187 deletions
@@ -1,5 +1,15 @@
 # @navikt/aksel-icons

+## 6.12.0
+
+### Minor Changes
+
+- Icons: New icon ChildHairEyes ([#3020](https://github.com/navikt/aksel/pull/3020))
+
+### Patch Changes
+
+- Icons: FigureCombination icon adjusted ([#3031](https://github.com/navikt/aksel/pull/3031))
+
 ## 6.11.0

 ## 6.10.1
@@ -8,5 +8,5 @@ keywords:
  - back
  - tilbake
 variant: Stroke
-updated_at: 21.05.2024
+updated_at: 31.05.2024
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - frem
  - fram
 variant: Stroke
-updated_at: 21.05.2024
+updated_at: 10.06.2024
 created_at: 07.03.2023
@@ -12,5 +12,5 @@ keywords:
  - ombestemt
  - back
 variant: Stroke
-updated_at: 10.01.2024
+updated_at: 11.06.2024
 created_at: 07.03.2023
@@ -10,5 +10,5 @@ keywords:
  - close
  - lukke
 variant: Stroke
-updated_at: 02.05.2024
+updated_at: 06.06.2024
 created_at: 07.03.2023
@@ -14,5 +14,5 @@ keywords:
  - opptak
  - gjenopptak
 variant: Stroke
-updated_at: 17.04.2024
+updated_at: 31.05.2024
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - fullføring
  - validering
 variant: Stroke
-updated_at: 17.04.2024
+updated_at: 10.06.2024
 created_at: 07.03.2023
@@ -10,5 +10,5 @@ keywords:
  - åpner
  - mer
 variant: Stroke
-updated_at: 21.05.2024
+updated_at: 19.06.2024
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - venstre
  - side
 variant: Stroke
-updated_at: 24.04.2024
+updated_at: 29.05.2024
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - høyre
  - side
 variant: Stroke
-updated_at: 17.04.2024
+updated_at: 10.06.2024
 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="M10.651 3.94427C8.68476 4.52559 7.25 6.34524 7.25 8.5C7.25 11.1234 9.37665 13.25 12 13.25C14.6234 13.25 16.75 11.1234 16.75 8.5C16.75 6.98351 16.0393 5.63301 14.9329 4.76335C14.9538 5.10864 14.9022 5.44954 14.7891 5.75643C14.1895 7.38197 12.1053 7.74555 10.677 6.5063C10.3641 6.23484 10.3305 5.76115 10.602 5.44829C10.8734 5.13543 11.3471 5.10186 11.66 5.37331C12.4681 6.07443 13.2206 5.67424 13.3817 5.23739C13.5006 4.91494 13.4405 4.49643 13.124 4.20959C12.8111 3.92606 12.1541 3.61035 10.651 3.94427ZM12 2.25C8.54822 2.25 5.75 5.04822 5.75 8.5C5.75 11.9518 8.54822 14.75 12 14.75C15.4518 14.75 18.25 11.9518 18.25 8.5C18.25 5.04822 15.4518 2.25 12 2.25ZM10.5 8.75C10.0858 8.75 9.75 9.08579 9.75 9.5C9.75 9.91421 10.0858 10.25 10.5 10.25H10.51C10.9242 10.25 11.26 9.91421 11.26 9.5C11.26 9.08579 10.9242 8.75 10.51 8.75H10.5ZM12.75 9.5C12.75 9.08579 13.0858 8.75 13.5 8.75H13.51C13.9242 8.75 14.26 9.08579 14.26 9.5C14.26 9.91421 13.9242 10.25 13.51 10.25H13.5C13.0858 10.25 12.75 9.91421 12.75 9.5ZM9.34835 18.3484C10.0516 17.6451 11.0054 17.25 12 17.25C12.9946 17.25 13.9484 17.6451 14.6516 18.3483C15.3549 19.0516 15.75 20.0054 15.75 21C15.75 21.4142 16.0858 21.75 16.5 21.75C16.9142 21.75 17.25 21.4142 17.25 21C17.25 19.6076 16.6969 18.2723 15.7123 17.2877C14.7277 16.3031 13.3924 15.75 12 15.75C10.6076 15.75 9.27226 16.3031 8.28769 17.2877C7.30312 18.2723 6.75 19.6076 6.75 21C6.75 21.4142 7.08579 21.75 7.5 21.75C7.91421 21.75 8.25 21.4142 8.25 21C8.25 20.0054 8.64509 19.0516 9.34835 18.3484Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,12 @@
+name: ChildHairEyes
+category: People
+sub_category: Children
+keywords:
+  - human
+  - menneske
+  - øyne
+  - barn
+  - baby
+variant: Stroke
+updated_at: 20.06.2024
+created_at: 20.06.2024
@@ -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="M14.7365 4.51074C14.9187 4.01666 14.9409 3.43431 14.7577 2.88768C16.8265 3.90652 18.25 6.036 18.25 8.49796C18.25 11.9497 15.4518 14.748 12 14.748C8.54822 14.748 5.75 11.9497 5.75 8.49796C5.75 5.62729 7.68536 3.20864 10.3225 2.47564L10.3228 2.4771C11.98 2.10394 12.8426 2.42231 13.2398 2.78233C13.6388 3.14395 13.7136 3.67177 13.5637 4.07821C13.3388 4.68809 12.3735 5.11262 11.4336 4.29706C11.1728 4.07085 10.7781 4.09882 10.5519 4.35954C10.3257 4.62027 10.3537 5.015 10.6144 5.24122C12.0712 6.50522 14.1463 6.11119 14.7365 4.51074ZM10.5 8.74796C10.0858 8.74796 9.75 9.08374 9.75 9.49796C9.75 9.91217 10.0858 10.248 10.5 10.248H10.51C10.9242 10.248 11.26 9.91217 11.26 9.49796C11.26 9.08374 10.9242 8.74796 10.51 8.74796H10.5ZM12.75 9.49796C12.75 9.08374 13.0858 8.74796 13.5 8.74796H13.51C13.9242 8.74796 14.26 9.08374 14.26 9.49796C14.26 9.91217 13.9242 10.248 13.51 10.248H13.5C13.0858 10.248 12.75 9.91217 12.75 9.49796ZM12 15.748C10.6076 15.748 9.27226 16.3011 8.28769 17.2856C7.30312 18.2702 6.75 19.6056 6.75 20.998C6.75 21.1969 6.82902 21.3876 6.96967 21.5283C7.11032 21.6689 7.30109 21.748 7.5 21.748L16.5 21.748C16.6989 21.748 16.8897 21.6689 17.0303 21.5283C17.171 21.3876 17.25 21.1969 17.25 20.998C17.25 19.6056 16.6969 18.2702 15.7123 17.2856C14.7277 16.3011 13.3924 15.748 12 15.748Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,12 @@
+name: ChildHairEyesFill
+category: People
+sub_category: Children
+keywords:
+  - human
+  - menneske
+  - øyne
+  - barn
+  - baby
+variant: Fill
+updated_at: 20.06.2024
+created_at: 20.06.2024
@@ -8,5 +8,5 @@ keywords:
  - gutt
  - barn
 variant: Stroke
-updated_at: 16.01.2024
+updated_at: 20.06.2024
 created_at: 16.01.2024
@@ -8,5 +8,5 @@ keywords:
  - gutt
  - barn
 variant: Fill
-updated_at: 16.01.2024
+updated_at: 20.06.2024
 created_at: 16.01.2024
@@ -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="M12 3.75C11.3096 3.75 10.75 4.30964 10.75 5C10.75 5.69036 11.3096 6.25 12 6.25C12.6904 6.25 13.25 5.69036 13.25 5C13.25 4.30964 12.6904 3.75 12 3.75ZM9.25 5C9.25 3.48122 10.4812 2.25 12 2.25C13.5188 2.25 14.75 3.48122 14.75 5C14.75 6.51878 13.5188 7.75 12 7.75C10.4812 7.75 9.25 6.51878 9.25 5ZM12.75 9C12.75 8.58579 13.0858 8.25 13.5 8.25H14.847C15.912 8.25 16.73 9.19323 16.5794 10.2475L15.7425 16.1061C15.6897 16.4756 15.3732 16.75 15 16.75H14.25V21C14.25 21.4142 13.9142 21.75 13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21V16C12.75 15.5858 13.0858 15.25 13.5 15.25H14.3495L15.0945 10.0354C15.116 9.88475 14.9991 9.75 14.847 9.75H13.5C13.0858 9.75 12.75 9.41421 12.75 9ZM9.96929 9.91592C10.0048 9.81642 10.0991 9.75 10.2047 9.75H10.5C10.9142 9.75 11.25 9.41421 11.25 9C11.25 8.58579 10.9142 8.25 10.5 8.25H10.2047C9.46515 8.25 8.80542 8.71492 8.55668 9.41141L6.2937 15.7477C6.21167 15.9774 6.24645 16.2327 6.38694 16.432C6.52744 16.6314 6.75611 16.75 7 16.75H9.75V21C9.75 21.4142 10.0858 21.75 10.5 21.75C10.9142 21.75 11.25 21.4142 11.25 21V16C11.25 15.5858 10.9142 15.25 10.5 15.25H8.06426L9.96929 9.91592Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.55 3.75C11.8596 3.75 11.3 4.30964 11.3 5C11.3 5.69036 11.8596 6.25 12.55 6.25C13.2404 6.25 13.8 5.69036 13.8 5C13.8 4.30964 13.2404 3.75 12.55 3.75ZM9.8 5C9.8 3.48122 11.0312 2.25 12.55 2.25C14.0688 2.25 15.3 3.48122 15.3 5C15.3 6.51878 14.0688 7.75 12.55 7.75C11.0312 7.75 9.8 6.51878 9.8 5ZM13.3 9C13.3 8.58579 13.6358 8.25 14.05 8.25H16.05C16.4642 8.25 16.8 8.58579 16.8 9V16.1061C16.8 16.5203 16.4642 16.8561 16.05 16.8561H14.8V21C14.8 21.4142 14.4642 21.75 14.05 21.75C13.6358 21.75 13.3 21.4142 13.3 21V16.1061C13.3 15.6919 13.6358 15.3561 14.05 15.3561H15.3V9.75H14.05C13.6358 9.75 13.3 9.41421 13.3 9ZM10.5193 9.91592C10.5548 9.81642 10.6491 9.75 10.7547 9.75H11.05C11.4642 9.75 11.8 9.41421 11.8 9C11.8 8.58579 11.4642 8.25 11.05 8.25H10.7547C10.0152 8.25 9.35542 8.71492 9.10668 9.41141L6.8437 15.7477C6.76167 15.9774 6.79645 16.2327 6.93695 16.432C7.07744 16.6314 7.30611 16.75 7.55001 16.75H10.3V21C10.3 21.4142 10.6358 21.75 11.05 21.75C11.4642 21.75 11.8 21.4142 11.8 21V16C11.8 15.5858 11.4642 15.25 11.05 15.25H8.61426L10.5193 9.91592Z" fill="#23262A"/>
 </svg>
@@ -7,6 +7,7 @@ keywords:
  - trans
  - intetkjønn
  - hen
+  - person
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 25.06.2024
 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="M9.25 5C9.25 3.48122 10.4812 2.25 12 2.25C13.5188 2.25 14.75 3.48122 14.75 5C14.75 6.51878 13.5188 7.75 12 7.75C10.4812 7.75 9.25 6.51878 9.25 5ZM13.5 8.25C13.3011 8.25 13.1103 8.32902 12.9697 8.46967C12.829 8.61032 12.75 8.80109 12.75 9V21C12.75 21.4142 13.0858 21.75 13.5 21.75C13.9142 21.75 14.25 21.4142 14.25 21V16.75H15C15.3732 16.75 15.6897 16.4756 15.7425 16.1061L16.5794 10.2475C16.73 9.19323 15.912 8.25 14.847 8.25H13.5ZM8.55668 9.41141C8.80542 8.71492 9.46515 8.25 10.2047 8.25H10.5C10.9142 8.25 11.25 8.58579 11.25 9L11.25 21C11.25 21.4142 10.9142 21.75 10.5 21.75C10.0858 21.75 9.75 21.4142 9.75 21V16.75H7C6.75611 16.75 6.52744 16.6314 6.38694 16.432C6.24645 16.2327 6.21167 15.9774 6.2937 15.7477L8.55668 9.41141Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.8 5C9.8 3.48122 11.0312 2.25 12.55 2.25C14.0688 2.25 15.3 3.48122 15.3 5C15.3 6.51878 14.0688 7.75 12.55 7.75C11.0312 7.75 9.8 6.51878 9.8 5ZM13.3 9C13.3 8.58579 13.6358 8.25 14.05 8.25H16.05C16.4642 8.25 16.8 8.58579 16.8 9V16C16.8 16.4142 16.4642 16.75 16.05 16.75H14.8V21C14.8 21.4142 14.4642 21.75 14.05 21.75C13.6358 21.75 13.3 21.4142 13.3 21V9ZM9.10668 9.41141C9.35542 8.71492 10.0152 8.25 10.7547 8.25H11.05C11.4642 8.25 11.8 8.58579 11.8 9L11.8 21C11.8 21.4142 11.4642 21.75 11.05 21.75C10.6358 21.75 10.3 21.4142 10.3 21V16.75H7.55001C7.30611 16.75 7.07744 16.6314 6.93695 16.432C6.79645 16.2327 6.76167 15.9774 6.8437 15.7477L9.10668 9.41141Z" fill="#23262A"/>
 </svg>
@@ -7,6 +7,7 @@ keywords:
  - trans
  - intetkjønn
  - hen
+  - person
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 25.06.2024
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - herre
  - han
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - herre
  - han
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023
@@ -8,5 +8,5 @@ keywords:
  - female
  - hun
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023
@@ -8,5 +8,5 @@ keywords:
  - female
  - hun
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - organisering
  - sosiale medier
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 05.06.2024
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - papir
  - kontorrekvisita
 variant: Stroke
-updated_at: 03.05.2024
+updated_at: 12.06.2024
 created_at: 07.03.2023
@@ -4,5 +4,5 @@ sub_category: Figure
 keywords:
  - silhuett
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023
@@ -4,5 +4,5 @@ sub_category: Figure
 keywords:
  - silhuett
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - avvis
  - avslå
 variant: Stroke
-updated_at: 15.04.2024
+updated_at: 13.06.2024
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 6.12.0
+
 ## 6.11.0

 ## 6.10.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^6.11.0",
-    "@navikt/ds-tokens": "^6.11.0",
+    "@navikt/ds-css": "^6.12.0",
+    "@navikt/ds-tokens": "^6.12.0",
    "concurrently": "7.2.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 6.12.0
+
+### Patch Changes
+
+- Updated dependencies [[`23ea3232f`](https://github.com/navikt/aksel/commit/23ea3232fab71fdca29d2f97f279fa4962c440c0), [`b38789b98`](https://github.com/navikt/aksel/commit/b38789b98d7e60eaf79a73433c6378f8644ee825)]:
+  - @navikt/ds-css@6.12.0
+
 ## 6.11.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "6.11.0",
+    "@navikt/ds-css": "6.12.0",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 6.12.0
+
+### Minor Changes
+
+- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. ([#3003](https://github.com/navikt/aksel/pull/3003))
+
+### Patch Changes
+
+- Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. ([#3007](https://github.com/navikt/aksel/pull/3007))
+
 ## 6.11.0

 ### Patch Changes
@@ -7,7 +7,11 @@
  align-items: center;
 }

-.navds-alert__wrapper {
+.navds-alert--small.navds-alert--close-button {
+  align-items: flex-start;
+}
+
+.navds-alert__wrapper--maxwidth {
  max-width: 43.5rem;
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^6.11.0",
+    "@navikt/ds-tokens": "^6.12.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -17,9 +17,9 @@
  --__ac-r-pi-lg: var(--__ac-r-pi-md);
  --__ac-r-pi-xl: var(--__ac-r-pi-lg);
  --__ac-r-pi-2xl: var(--__ac-r-pi-xl);
-  --__ac-r-pi: var(--__ac-r-p-xs);
+  --__ac-r-pi: var(--__ac-r-pi-xs);

-  padding-inline: var(--__ac-r-pi);
+  padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
 }

 .navds-r-pb {
@@ -29,9 +29,45 @@
  --__ac-r-pb-lg: var(--__ac-r-pb-md);
  --__ac-r-pb-xl: var(--__ac-r-pb-lg);
  --__ac-r-pb-2xl: var(--__ac-r-pb-xl);
-  --__ac-r-pb: var(--__ac-r-p-xs);
+  --__ac-r-pb: var(--__ac-r-pb-xs);

-  padding-block: var(--__ac-r-pb);
+  padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
+}
+
+.navds-r-m {
+  --__ac-r-m-xs: initial;
+  --__ac-r-m-sm: var(--__ac-r-m-xs);
+  --__ac-r-m-md: var(--__ac-r-m-sm);
+  --__ac-r-m-lg: var(--__ac-r-m-md);
+  --__ac-r-m-xl: var(--__ac-r-m-lg);
+  --__ac-r-m-2xl: var(--__ac-r-m-xl);
+  --__ac-r-margin: var(--__ac-r-m-xs);
+
+  margin: var(--__ac-r-margin);
+}
+
+.navds-r-mi {
+  --__ac-r-mi-xs: initial;
+  --__ac-r-mi-sm: var(--__ac-r-mi-xs);
+  --__ac-r-mi-md: var(--__ac-r-mi-sm);
+  --__ac-r-mi-lg: var(--__ac-r-mi-md);
+  --__ac-r-mi-xl: var(--__ac-r-mi-lg);
+  --__ac-r-mi-2xl: var(--__ac-r-mi-xl);
+  --__ac-r-mi: var(--__ac-r-mi-xs);
+
+  margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
+}
+
+.navds-r-mb {
+  --__ac-r-mb-xs: initial;
+  --__ac-r-mb-sm: var(--__ac-r-mb-xs);
+  --__ac-r-mb-md: var(--__ac-r-mb-sm);
+  --__ac-r-mb-lg: var(--__ac-r-mb-md);
+  --__ac-r-mb-xl: var(--__ac-r-mb-lg);
+  --__ac-r-mb-2xl: var(--__ac-r-mb-xl);
+  --__ac-r-mb: var(--__ac-r-mb-xs);
+
+  margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
 }

 .navds-r-w {
@@ -263,6 +299,18 @@
    --__ac-r-pb: var(--__ac-r-pb-sm);
  }

+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-sm);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-sm);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-sm);
+  }
+
  .navds-r-w {
    --__ac-r-w: var(--__ac-r-w-sm);
  }
@@ -349,6 +397,18 @@
    --__ac-r-pb: var(--__ac-r-pb-md);
  }

+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-md);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-md);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-md);
+  }
+
  .navds-r-w {
    --__ac-r-w: var(--__ac-r-w-md);
  }
@@ -435,6 +495,18 @@
    --__ac-r-pb: var(--__ac-r-pb-lg);
  }

+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-lg);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-lg);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-lg);
+  }
+
  .navds-r-w {
    --__ac-r-w: var(--__ac-r-w-lg);
  }
@@ -521,6 +593,18 @@
    --__ac-r-pb: var(--__ac-r-pb-xl);
  }

+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-xl);
+  }
+
  .navds-r-w {
    --__ac-r-w: var(--__ac-r-w-xl);
  }
@@ -607,6 +691,18 @@
    --__ac-r-pb: var(--__ac-r-pb-2xl);
  }

+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-2xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-2xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-2xl);
+  }
+
  .navds-r-w {
    --__ac-r-w: var(--__ac-r-w-2xl);
  }
@@ -1,29 +1,23 @@
-.navds-box {
-  --__ac-box-padding-xs: initial;
-  --__ac-box-padding-sm: var(--__ac-box-padding-xs);
-  --__ac-box-padding-md: var(--__ac-box-padding-sm);
-  --__ac-box-padding-lg: var(--__ac-box-padding-md);
-  --__ac-box-padding-xl: var(--__ac-box-padding-lg);
-  --__ac-box-padding-2xl: var(--__ac-box-padding-xl);
-  --__ac-box-padding-inline-xs: initial;
-  --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
-  --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
-  --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
-  --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
-  --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
-  --__ac-box-padding-block-xs: initial;
-  --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
-  --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
-  --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
-  --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
-  --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
-  --__ac-box-padding: var(--__ac-box-padding-xs);
-  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
-  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+.navds-box-bg {
  --__ac-box-background: initial;
+
+  background-color: var(--__ac-box-background);
+}
+
+.navds-box-border-color {
  --__ac-box-border-color: initial;
-  --__ac-box-shadow: initial;
+
+  border-color: var(--__ac-box-border-color);
+}
+
+.navds-box-border-width {
  --__ac-box-border-width: initial;
+
+  border-style: solid;
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+.navds-box-border-radius {
  --__ac-box-border-radius-xs: initial;
  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
@@ -32,57 +26,41 @@
  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);

-  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
-  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
-  background-color: var(--__ac-box-background);
-  border-style: solid;
-  border-color: var(--__ac-box-border-color);
  border-radius: var(--__ac-box-border-radius);
+}
+
+.navds-box-shadow {
+  --__ac-box-shadow: initial;
+
  box-shadow: var(--__ac-box-shadow);
-  border-width: var(--__ac-box-border-width, 0);
 }

@media (min-width: 480px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-sm);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
+  .navds-box-border-radius {
    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
  }
 }

@media (min-width: 768px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-md);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-md);
+  .navds-box-border-radius {
    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
  }
 }

@media (min-width: 1024px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-lg);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
+  .navds-box-border-radius {
    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
  }
 }

@media (min-width: 1280px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-xl);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
+  .navds-box-border-radius {
    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
  }
 }

@media (min-width: 1440px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-2xl);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
+  .navds-box-border-radius {
    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
  }
 }
@@ -1,5 +1,21 @@
 # @navikt/ds-react

+## 6.12.0
+
+### Minor Changes
+
+- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. ([#3003](https://github.com/navikt/aksel/pull/3003))
+
+### Patch Changes
+
+- ToggleGroup: Selecting already selected value now avoids sending extra event ([#3012](https://github.com/navikt/aksel/pull/3012))
+
+- Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. ([#3007](https://github.com/navikt/aksel/pull/3007))
+
+- Updated dependencies [[`ff8072e35`](https://github.com/navikt/aksel/commit/ff8072e352f4f84f802a6427e1692ff223af722c), [`f1d8e9c4d`](https://github.com/navikt/aksel/commit/f1d8e9c4d357226893da4fdc3feb8063d7d830bb)]:
+  - @navikt/aksel-icons@6.12.0
+  - @navikt/ds-tokens@6.12.0
+
 ## 6.11.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -594,8 +594,8 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.11.0",
-    "@navikt/ds-tokens": "^6.11.0",
+    "@navikt/aksel-icons": "^6.12.0",
+    "@navikt/ds-tokens": "^6.12.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.0"
@@ -29,6 +29,11 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   * @default false
   */
  fullWidth?: boolean;
+  /**
+   * Sets max-width on the content to 43.5rem.
+   * @default true
+   */
+  contentMaxWidth?: boolean;
  /**
   * Removes background from Alert.
   * @default false
@@ -85,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
      variant,
      size = "medium",
      fullWidth = false,
+      contentMaxWidth = true,
      inline = false,
      closeButton = false,
      onClose,
@@ -109,7 +115,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
        )}
      >
        <Icon variant={variant} className="navds-alert__icon" />
-        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        <BodyLong
+          as="div"
+          size={size}
+          className={cl(
+            "navds-alert__wrapper",
+            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          )}
+        >
          {children}
        </BodyLong>
        {closeButton && !inline && (
@@ -120,7 +133,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
              variant="tertiary-neutral"
              onClick={onClose}
              type="button"
-              icon={<XMarkIcon title="Lukk Alert" />}
+              icon={
+                <XMarkIcon
+                  title={
+                    ["error", "warning"].includes(variant)
+                      ? "Lukk varsel"
+                      : "Lukk melding"
+                  }
+                />
+              }
            />
          </div>
        )}
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React from "react";
 import { VStack } from "../layout/stack";
 import { Link } from "../link";
-import { BodyLong, Heading as DsHeading } from "../typography";
+import { BodyLong, Heading } from "../typography";
 import Alert, { AlertProps } from "./Alert";

 const meta: Meta<typeof Alert> = {
@@ -25,11 +25,10 @@ const variants: AlertProps["variant"][] = [
 ];

 export const Controls: Story = {
-  render: (props) => <Alert {...props} />,
-
  args: {
    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
    fullWidth: false,
+    contentMaxWidth: true,
    inline: false,
    variant: "info",
    size: "medium",
@@ -38,7 +37,7 @@ export const Controls: Story = {
  argTypes: {
    variant: {
      control: { type: "radio" },
-      options: ["info", "error", "warning", "success"],
+      options: variants,
    },
    size: {
      control: { type: "radio" },
@@ -47,28 +46,28 @@ export const Controls: Story = {
  },
 };

-export const Variants = () => {
+export const Variants: StoryFn = () => {
  return (
-    <div className="colgap">
+    <VStack gap="4">
      {variants.map((variant, i) => (
        <Alert key={variant} variant={variant}>
          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud. ",
          )}
        </Alert>
      ))}
      {variants.map((variant, i) => (
        <Alert key={variant} variant={variant} size="small">
          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud. ",
          )}
        </Alert>
      ))}
-    </div>
+    </VStack>
  );
 };

-export const FullWidth = () => {
+export const FullWidth: StoryFn = () => {
  return (
    <VStack gap="4">
      <Alert variant="info" fullWidth>
@@ -81,10 +80,16 @@ export const FullWidth = () => {
  );
 };

-export const Inline = () => {
+export const ContentMaxWidthOff: StoryFn = () => (
+  <Alert variant="info" contentMaxWidth={false}>
+    Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+    reprehenderit enim nisi.
+  </Alert>
+);
+
+export const Inline: StoryFn = () => {
  return (
    <VStack gap="4">
-      <h2>Inline</h2>
      <Alert variant="info" inline>
        Id elit esse enim reprehenderit enim nisi veniam nostrud.
      </Alert>
@@ -107,13 +112,13 @@ export const Inline = () => {
  );
 };

-export const Heading = () => {
+export const WithHeading: StoryFn = () => {
  return (
-    <div className="colgap">
+    <VStack gap="4">
      <Alert variant="info">
-        <DsHeading spacing size="small" level="3">
+        <Heading spacing size="small" level="3">
          Aliquip duis est in commodo pariatur
-        </DsHeading>
+        </Heading>
        <BodyLong>
          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
@@ -121,184 +126,90 @@ export const Heading = () => {
        </BodyLong>
      </Alert>
      <Alert variant="info" size="small">
-        <DsHeading spacing size="xsmall" level="3">
+        <Heading spacing size="xsmall" level="3">
          Aliquip duis est in commodo pariatur
-        </DsHeading>
+        </Heading>
        <BodyLong>
          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
          sint commodo consequat eu aute.
        </BodyLong>
      </Alert>
-    </div>
+    </VStack>
  );
 };

-export const CloseButton: Story = {
-  render: () => {
-    return (
-      <VStack gap="4">
-        <h2>CloseButton</h2>
-        <Alert variant="info" closeButton>
+export const CloseButton: StoryFn = () => {
+  return (
+    <VStack gap="4">
+      <Alert variant="info" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="success" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert size="small" variant="error" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert size="small" variant="warning" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" closeButton>
+        <Heading size="small" level="3">
+          Id elit esse enim reprehenderit
+        </Heading>
+        <BodyLong>
          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
+        </BodyLong>
+      </Alert>
+      <Alert variant="info" closeButton size="small">
+        <Heading size="xsmall" level="3">
+          Id elit esse enim reprehenderit
+        </Heading>
+        <BodyLong>
          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          <DsHeading size="small" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-        <Alert variant="info" closeButton size="small">
-          <DsHeading size="xsmall" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-      </VStack>
-    );
-  },
+        </BodyLong>
+      </Alert>
+    </VStack>
+  );
 };

 export const Chromatic: Story = {
  render: () => (
-    <VStack gap="6">
-      <VStack gap="2">
-        <h2>Variant</h2>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant}>
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-            )}
-          </Alert>
-        ))}
-      </VStack>
-      <VStack gap="2">
-        <h2>Small</h2>
-        <Alert variant="info" size="small">
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small">
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>FullWidth</h2>
-        <Alert variant="info" fullWidth>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small" fullWidth>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>Inline</h2>
-        <Alert variant="info" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>Heading</h2>
-        <Alert variant="info">
-          <DsHeading size="small" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-        <Alert variant="info" size="small">
-          <DsHeading size="xsmall" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong size="small">
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>CloseButton</h2>
-        <Alert variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          <DsHeading size="small" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-        <Alert variant="info" size="small" closeButton>
-          <DsHeading size="xsmall" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong size="small">
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-      </VStack>
+    <div>
+      <h2>Variants</h2>
+      <Variants />

+      <h2>FullWidth</h2>
+      <FullWidth />
+
+      <h2>ContentMaxWidthOff</h2>
+      <ContentMaxWidthOff />
+
+      <h2>Inline</h2>
+      <Inline />
+
+      <h2>Heading</h2>
+      <WithHeading />
+
+      <h2>CloseButton</h2>
+      <CloseButton />
+
+      <h2>Links</h2>
      <VStack gap="2">
-        <h2>Links</h2>
        {variants.map((variant) => (
          <Alert key={variant} variant={variant}>
            <Link href="#">Id elit esse enim reprehenderit</Link>
          </Alert>
        ))}
      </VStack>
-    </VStack>
+    </div>
  ),
  parameters: {
    chromatic: { disable: false },
@@ -85,6 +85,56 @@ export const Padding = () => (
  </VStack>
 );

+export const Margin = () => (
+  <VStack align="center" gap="2">
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="20">
+        <Box borderWidth="1">Margin all around</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginBlock="20 0">
+        <Box borderWidth="1">Margin to the North</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginInline="0 20">
+        <Box borderWidth="1">Margin to the East</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginBlock="0 20">
+        <Box borderWidth="1">Margin to the South</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginInline="20 0">
+        <Box borderWidth="1">Margin to the West</Box>
+      </BasePrimitive>
+    </Box>
+  </VStack>
+);
+
+export const MarginAuto = () => (
+  <Box width="400px" background="surface-alt-3-subtle">
+    <BasePrimitive marginInline="auto">
+      <Box borderWidth="1" width="200px">
+        MarginInline: auto
+      </Box>
+    </BasePrimitive>
+    <BasePrimitive marginInline="auto 0" marginBlock="2">
+      <Box borderWidth="1" width="200px">
+        MarginInline: auto 0
+      </Box>
+    </BasePrimitive>
+    <BasePrimitive marginInline="0 auto" marginBlock="2">
+      <Box borderWidth="1" width="200px">
+        MarginInline: 0 auto
+      </Box>
+    </BasePrimitive>
+  </Box>
+);
+
 export const HeightWidth = () => (
  <VStack align="center" gap="2">
    <BasePrimitive height="4rem">
@@ -216,6 +266,15 @@ export const Chromatic: Story = {
        <h2>Padding</h2>
        <Padding />
      </div>
+      <div>
+        <h2>Margin</h2>
+        <Margin />
+      </div>
+      <div>
+        <h2>MarginAuto</h2>
+        <MarginAuto />
+      </div>
+
      <div>
        <h2>Height & Width</h2>
        <HeightWidth />
@@ -4,8 +4,7 @@ import { Slot } from "../../slot/Slot";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";

-export interface BasePrimitiveProps {
-  children: React.ReactElement;
+export type PrimitiveProps = {
  className?: string;
  /**
   * Padding around children.
@@ -40,6 +39,47 @@ export interface BasePrimitiveProps {
  paddingBlock?: ResponsiveProp<
    SpacingScale | `${SpacingScale} ${SpacingScale}`
  >;
+  /**
+   * Margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * margin='4'
+   * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  margin?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginInline='4'
+   * marginInline='4 5'
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  marginInline?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
+  /**
+   * Vertical margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginBlock='4'
+   * marginBlock='4 5'
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  marginBlock?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
  /**
   * CSS `width`
   */
@@ -140,6 +180,38 @@ export interface BasePrimitiveProps {
   * CSS `flex-grow`
   */
  flexGrow?: ResponsiveProp<string>;
+};
+
+export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [
+  "className",
+  "padding",
+  "paddingInline",
+  "paddingBlock",
+  "margin",
+  "marginInline",
+  "marginBlock",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "position",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+];
+
+interface BasePrimitiveProps extends PrimitiveProps {
+  children: React.ReactElement;
 }

 export const BasePrimitive = ({
@@ -148,6 +220,9 @@ export const BasePrimitive = ({
  padding,
  paddingInline,
  paddingBlock,
+  margin,
+  marginInline,
+  marginBlock,
  width,
  minWidth,
  maxWidth,
@@ -172,6 +247,10 @@ export const BasePrimitive = ({
    ...getResponsiveProps("r", "p", "spacing", padding),
    ...getResponsiveProps("r", "pi", "spacing", paddingInline),
    ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    /* Margin */
+    ...getResponsiveProps("r", "m", "spacing", margin),
+    ...getResponsiveProps("r", "mi", "spacing", marginInline),
+    ...getResponsiveProps("r", "mb", "spacing", marginBlock),
    /* Width & height */
    ...getResponsiveValue("r", "w", width),
    ...getResponsiveValue("r", "minw", minWidth),
@@ -203,6 +282,9 @@ export const BasePrimitive = ({
        "navds-r-p": padding,
        "navds-r-pi": paddingInline,
        "navds-r-pb": paddingBlock,
+        "navds-r-m": margin,
+        "navds-r-mi": marginInline,
+        "navds-r-mb": marginBlock,
        "navds-r-w": width,
        "navds-r-minw": minWidth,
        "navds-r-maxw": maxWidth,
@@ -0,0 +1,42 @@
+export type PrimitiveAsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild: true;
+      /**
+       * Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent)
+       *
+       * When using asChild, the prop is not allowed as it would have no effect.
+       */
+      as?: never;
+    }
+  | {
+      children?: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };
@@ -368,11 +368,25 @@ export const BorderRadius = () => (
  </VStack>
 );

+export const MarginDemo = () => (
+  <VStack gap="4">
+    <Box borderWidth="1">
+      <Box
+        background="surface-info"
+        margin="5"
+        marginInline={{ xs: "20", lg: "10" }}
+      >
+        Box
+      </Box>
+    </Box>
+  </VStack>
+);
+
 export const PaddingDemo = () => (
  <VStack gap="4">
    <Box
      background="bg-subtle"
-      padding="0"
+      padding="5"
      paddingInline={{ xs: "20", lg: "10" }}
    >
      Box
@@ -380,6 +394,14 @@ export const PaddingDemo = () => (
  </VStack>
 );

+export const AsChild = () => (
+  <VStack gap="4">
+    <Box borderRadius="large" padding="4" asChild>
+      <button onClick={() => alert("clicked")}>Box is now a button</button>
+    </Box>
+  </VStack>
+);
+
 export const Chromatic: Story = {
  render: () => (
    <VStack gap="2">
@@ -1,6 +1,13 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps } from "../utilities/css";
 import {
  BackgroundColorToken,
@@ -9,77 +16,45 @@ import {
  ResponsiveProp,
  ShadowToken,
  SpaceDelimitedAttribute,
-  SpacingScale,
  SurfaceColorToken,
 } from "../utilities/types";

-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * CSS `background-color` property.
-   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-   */
-  background?: BackgroundColorToken | SurfaceColorToken;
-  /**
-   * CSS `border-color` property.
-   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
-   */
-  borderColor?: BorderColorToken;
-  /**
-   * CSS `border-radius` property.
-   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
-   * or an object of radius tokens for different breakpoints.
-   * @example
-   * borderRadius='full'
-   * borderRadius='0 full large small'
-   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
-   */
-  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
-  /**
-   * CSS `border-width` property. If this is not set there will be no border.
-   * @example
-   * borderWidth='2'
-   * borderWidth='1 2 3 4'
-   */
-  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-  /**
-   * Padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * padding='4'
-   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  padding?: ResponsiveProp<SpacingScale>;
-  /**
-   * Horizontal padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * paddingInline='4'
-   * paddingInline='4 5'
-   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
-   */
-  paddingInline?: ResponsiveProp<
-    SpacingScale | `${SpacingScale} ${SpacingScale}`
-  >;
-  /**
-   * Vertical padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * paddingBlock='4'
-   * paddingBlock='4 5'
-   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  paddingBlock?: ResponsiveProp<
-    SpacingScale | `${SpacingScale} ${SpacingScale}`
-  >;
-  /** Shadow on box. Accepts a shadow token.
-   * @example
-   * shadow='small'
-   */
-  shadow?: ShadowToken;
-}
+export type BoxProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS `background-color` property.
+     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+     */
+    background?: BackgroundColorToken | SurfaceColorToken;
+    /**
+     * CSS `border-color` property.
+     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+     */
+    borderColor?: BorderColorToken;
+    /**
+     * CSS `border-radius` property.
+     * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+     * or an object of radius tokens for different breakpoints.
+     * @example
+     * borderRadius='full'
+     * borderRadius='0 full large small'
+     * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+     */
+    borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+    /**
+     * CSS `border-width` property. If this is not set there will be no border.
+     * @example
+     * borderWidth='2'
+     * borderWidth='1 2 3 4'
+     */
+    borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+    /** Shadow on box. Accepts a shadow token.
+     * @example
+     * shadow='small'
+     */
+    shadow?: ShadowToken;
+  };

 /**
 * Foundational Layout-primitive for generic encapsulation & styling.
@@ -111,17 +86,16 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
 export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
  (
    {
+      children,
+      className,
      as: Component = "div",
      background,
      borderColor,
      borderWidth,
      borderRadius,
-      className,
-      padding,
-      paddingInline,
-      paddingBlock,
      shadow,
      style: _style,
+      asChild,
      ...rest
    },
    ref,
@@ -149,18 +123,27 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
        false,
        ["0"],
      ),
-      ...getResponsiveProps("box", "padding", "spacing", padding),
-      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
-      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
    };

+    const Comp = asChild ? Slot : Component;
+
    return (
-      <Component
-        {...rest}
-        className={cl("navds-box", className)}
-        ref={ref}
-        style={style}
-      />
+      <BasePrimitive {...rest}>
+        <Comp
+          {...omit(rest, PRIMITIVE_PROPS)}
+          ref={ref}
+          style={style}
+          className={cl("navds-box", className, {
+            "navds-box-bg": background,
+            "navds-box-border-color": borderColor,
+            "navds-box-border-width": borderWidth,
+            "navds-box-border-radius": borderRadius,
+            "navds-box-shadow": shadow,
+          })}
+        >
+          {children}
+        </Comp>
+      </BasePrimitive>
    );
  },
 );
@@ -1,34 +1,42 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
+import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { OverridableComponent, omit } from "../../util";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";

-export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
-   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
-   * @example
-   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * columns={3}
-   * columns="repeat(3, minmax(0, 1fr))"
-   */
-  columns?: ResponsiveProp<number | string>;
-  /**
-   * Spacing between columns.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * gap="6"
-   * gap="8 4"
-   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
-   */
-  gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-  /**
-   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
-   */
-  align?: "start" | "center" | "end";
-}
+export type HGridProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
+     * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+     * @example
+     * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+     * columns={3}
+     * columns="repeat(3, minmax(0, 1fr))"
+     */
+    columns?: ResponsiveProp<number | string>;
+    /**
+     * Spacing between columns.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * gap="6"
+     * gap="8 4"
+     * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+     */
+    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+     */
+    align?: "start" | "center" | "end";
+  };
 /**
 * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
 *
@@ -54,25 +62,45 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
 *   <div />
 * </HGrid>
 */
-export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
-  ({ className, columns, gap, style, align, ...rest }, ref) => {
-    const styles: React.CSSProperties = {
-      ...style,
-      "--__ac-hgrid-align": align,
-      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
-      ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
-    };
+export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        columns,
+        gap,
+        style,
+        align,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const styles: React.CSSProperties = {
+        ...style,
+        "--__ac-hgrid-align": align,
+        ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+      };

-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={cl("navds-hgrid", className)}
-        style={styles}
-      />
-    );
-  },
-);
+      const Comp = asChild ? Slot : Component;
+
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            className={cl("navds-hgrid", className)}
+            style={styles}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );

 function formatGrid(
  props?: ResponsiveProp<number | string>,
@@ -1,27 +0,0 @@
-import React from "react";
-import { PersonIcon } from "@navikt/aksel-icons";
-import { Box } from "../box";
-import { HStack } from "../stack";
-
-export function AvatarPanel({ children }: { children: React.ReactNode }) {
-  return (
-    <Box
-      background="bg-default"
-      paddingInline={{ xs: "4", md: "10" }}
-      paddingBlock={{ xs: "10 8", md: "12 10" }}
-      className="avatar-card"
-      borderRadius="medium"
-    >
-      <HStack justify="center">
-        <Box
-          borderRadius="full"
-          background="surface-success-moderate"
-          className="avatar"
-        >
-          <PersonIcon fontSize="2rem" />
-        </Box>
-      </HStack>
-      {children}
-    </Box>
-  );
-}
@@ -1,129 +0,0 @@
-import React from "react";
-import { LinkIcon } from "@navikt/aksel-icons";
-import { Accordion } from "../../accordion";
-import { CopyButton } from "../../copybutton";
-import { Link } from "../../link";
-import { List } from "../../list";
-import { ReadMore } from "../../read-more";
-import { BodyLong, Heading } from "../../typography";
-import { Box } from "../box";
-import { VStack } from "../stack";
-import { AvatarPanel } from "./AvatarPanel";
-
-export function Content() {
-  return (
-    <AvatarPanel>
-      <Box paddingBlock="0 6">
-        <VStack gap="3" align="start">
-          <Heading size="large">Hvem kan få?</Heading>
-          <CopyButton
-            copyText="#"
-            text="Kopier lenke"
-            size="small"
-            icon={<LinkIcon aria-hidden />}
-          />
-        </VStack>
-      </Box>
-      <BodyLong weight="semibold">
-        Har du blitt arbeidsledig eller permittert, kan du få dagpenger fra NAV
-        hvis alt dette gjelder for deg:
-      </BodyLong>
-      <List>
-        <List.Item>
-          Du har mistet minst 50 prosent av den totale arbeidstiden din.
-        </List.Item>
-        <List.Item>
-          Du har fått inntekten din helt eller delvis redusert.
-        </List.Item>
-        <List.Item>
-          Du har hatt en inntekt på minst 177 930 kroner (1,5 G - Grunnbeløp) de
-          siste 12 månedene, eller minst 355 860 kroner (3 G) de siste 36
-          månedene.
-        </List.Item>
-        <List.Item>Du er under 67 år.</List.Item>
-      </List>
-      <Box paddingBlock="0 7">
-        <ReadMore header="Hvilke inntekter gir rett til dagpenger?">
-          Vi bruker disse inntektene for å finne ut om du har rett til
-          dagpenger:
-          <List>
-            <List.Item>Arbeidsinntekt</List.Item>
-            <List.Item>Foreldrepenger som arbeidstaker</List.Item>
-            <List.Item>Svangerskapspenger som arbeidstaker</List.Item>
-            <List.Item>
-              Svangerskapsrelaterte sykepenger som arbeidstaker
-            </List.Item>
-          </List>
-          <BodyLong>
-            Inntekt som selvstendig næringsdrivende regnes ikke som
-            arbeidsinntekt.
-          </BodyLong>
-        </ReadMore>
-      </Box>
-      <BodyLong weight="semibold">For å få dagpenger må du:</BodyLong>
-      <List>
-        <List.Item>søke dagpenger</List.Item>
-        <List.Item>registrere deg som arbeidssøker</List.Item>
-        <List.Item>
-          oppholde deg i Norge og være medlem av folketrygden
-        </List.Item>
-        <List.Item>sende meldekort hver 14. dag</List.Item>
-        <List.Item>være reell arbeidssøker</List.Item>
-      </List>
-      <BodyLong spacing>
-        Les mer om <Link href="#">hva du må gjøre for å få dagpenger.</Link>
-      </BodyLong>
-      <Box paddingBlock="0 7">
-        <Accordion>
-          <Accordion.Item>
-            <Accordion.Header>Har du flere jobber?</Accordion.Header>
-            <Accordion.Content>
-              Det er den totale arbeidstiden din som må være redusert med minst
-              50 prosent. Har du flere jobber må du samlet sett ha mistet minst
-              50 prosent av arbeidstiden din for å kunne få dagpenger.
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>Oppholder du deg i utlandet?</Accordion.Header>
-            <Accordion.Content>
-              Det er den totale arbeidstiden din som må være redusert med minst
-              50 prosent. Har du flere jobber må du samlet sett ha mistet minst
-              50 prosent av arbeidstiden din for å kunne få dagpenger.
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>Mottar du annen pengestøtte?</Accordion.Header>
-            <Accordion.Content>
-              Det er den totale arbeidstiden din som må være redusert med minst
-              50 prosent. Har du flere jobber må du samlet sett ha mistet minst
-              50 prosent av arbeidstiden din for å kunne få dagpenger.
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
-      </Box>
-      <Heading spacing level="3" size="medium">
-        Hvis du er arbeidsledig
-      </Heading>
-      <BodyLong spacing>
-        Grunnen til at du mistet jobben din kan få betydning for dagpengene
-        dine. Sjekk hvilke regler som gjelder for disse situasjonene.
-      </BodyLong>
-      <Heading spacing level="3" size="medium">
-        Hvis du er permittert
-      </Heading>
-      <BodyLong spacing>
-        Som permittert har du rett til lønn fra arbeidsgiveren din de 15 første
-        arbeidsdagene du er permittert. Hvis du er delvis permittert, kan de 15
-        arbeidsdagene med lønn strekke seg over en lengre periode. Etter denne
-        perioden med lønn, kan du få dagpenger.
-      </BodyLong>
-      <BodyLong spacing>
-        For at du skal ha rett til dagpenger som permittert, må
-        permitteringsårsaken være mangel på arbeid i bedriften eller andre
-        forhold som arbeidsgiveren din ikke kan påvirke. Grunnen til at du
-        permitteres kan derfor ha betydning for din rett til dagpenger. NAV
-        vurderer om permitteringsårsaken gir deg rett til dagpenger.
-      </BodyLong>
-    </AvatarPanel>
-  );
-}
@@ -1,46 +0,0 @@
-import React, { useState } from "react";
-import { InformationSquareIcon } from "@navikt/aksel-icons";
-import { Checkbox, CheckboxGroup } from "../../form/checkbox";
-import { BodyLong, Detail, Heading } from "../../typography";
-import { Box } from "../box";
-import { HStack, VStack } from "../stack";
-
-export function FilterCard() {
-  const [filter, setFilter] = useState<any[]>([]);
-
-  return (
-    <Box
-      background="bg-default"
-      padding={{ xs: "4", md: "5" }}
-      borderWidth="5"
-      borderColor="border-alt-3"
-      borderRadius="medium"
-    >
-      <VStack gap="6">
-        <Heading size="large">Fortell oss om situasjonen din</Heading>
-        <BodyLong>
-          Fortell oss litt om situasjonen din, så viser vi bare den
-          informasjonen som er relevant for deg.
-        </BodyLong>
-        <div>
-          <CheckboxGroup
-            legend="Hva er situasjonen din?"
-            size="small"
-            onChange={setFilter}
-          >
-            <Checkbox value="box1">Jeg er arbeidsledig</Checkbox>
-            <Checkbox value="box2">Jeg er permittert</Checkbox>
-          </CheckboxGroup>
-          {!filter.length && (
-            <Box paddingBlock="2 0">
-              <HStack gap="2" align="center">
-                <InformationSquareIcon aria-hidden />
-                <Detail>Ingen filtre er valgt, så alt innhold vises.</Detail>
-              </HStack>
-            </Box>
-          )}
-        </div>
-      </VStack>
-    </Box>
-  );
-}
@@ -1,96 +0,0 @@
-import React from "react";
-import { BodyShort, Detail, Heading } from "../../typography";
-import { Box } from "../box";
-import { Hide, Show } from "../responsive";
-import { HStack, VStack } from "../stack";
-import { ContentBox } from "./content-box";
-
-export function Header() {
-  return (
-    <Box
-      as="header"
-      borderWidth="0 0 4 0"
-      borderColor="border-success"
-      paddingBlock="12 0"
-    >
-      <ContentBox maxWidth="lg">
-        <Box background="surface-default" paddingInline="4" paddingBlock="0 6">
-          <HStack align="start" gap="8">
-            <Hide below="md">
-              <Pictogram />
-            </Hide>
-
-            <VStack gap={{ xs: "4", md: "5" }}>
-              <Heading level="1" size="xlarge">
-                Dagpenger
-              </Heading>
-
-              <Hide below="md">
-                <HStack gap="4" align="center">
-                  <BodyShort size="small">PENGESTØTTE</BodyShort>
-                  <span aria-hidden="true">|</span>
-                  <Detail>Oppdatert 5. juli 2023</Detail>
-                </HStack>
-              </Hide>
-              <Show below="md">
-                <VStack gap="2">
-                  <BodyShort size="small">PENGESTØTTE</BodyShort>
-                  <Detail>Oppdatert 24. august 2023</Detail>
-                </VStack>
-              </Show>
-            </VStack>
-          </HStack>
-        </Box>
-      </ContentBox>
-    </Box>
-  );
-}
-
-function Pictogram() {
-  return (
-    <svg
-      aria-hidden
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      width="80"
-      height="80"
-      viewBox="0 0 96.45 96.44"
-    >
-      <g clipPath="url(#clip0_4486_7567)">
-        <path
-          d="M37.6276 55.6806L12.707 30.76L31.2599 12.2071L56.1805 37.1277L66.7031 26.6052L75.0165 74.5166L27.1051 66.2031L37.6276 55.6806Z"
-          fill="#CCF1D6"
-        />
-        <path d="M41 11V33H2L2 9H27.5072" stroke="#262626" strokeWidth="3" />
-        <circle cx="22" cy="16" r="6.5" stroke="#262626" strokeWidth="3" />
-        <circle cx="35" cy="9" r="6.5" stroke="#262626" strokeWidth="3" />
-        <circle cx="62" cy="63" r="22.5" stroke="#262626" strokeWidth="3" />
-        <path
-          d="M77.8105 77.7964L94.9534 94.9392"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-        <path
-          d="M47.6311 59.1036L72.7452 52.3743C73.0119 52.3028 73.2861 52.4611 73.3576 52.7279L75.1693 59.4894C75.3837 60.2896 74.9088 61.1121 74.1086 61.3265L50.9264 67.5381C50.1262 67.7525 49.3037 67.2777 49.0893 66.4775L47.2776 59.716C47.2061 59.4493 47.3644 59.1751 47.6311 59.1036Z"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-        <path
-          d="M52.3847 74.912L50.4436 67.6676L74.5917 61.1971L76.5329 68.4416C76.7473 69.2418 76.2724 70.0643 75.4722 70.2787L54.2218 75.9727C53.4216 76.1871 52.5991 75.7122 52.3847 74.912Z"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-        <path
-          d="M64.1814 55.1864L63.6638 53.2546C63.092 51.1207 60.8987 49.8544 58.7648 50.4261V50.4261C56.631 50.9979 55.3646 53.1913 55.9364 55.3251L56.454 57.257"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_4486_7567">
-          <rect width="96" height="96" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
@@ -1,91 +0,0 @@
-import React from "react";
-import { LinkIcon } from "@navikt/aksel-icons";
-import { CopyButton } from "../../copybutton";
-import { BodyLong, Detail, Heading, Label } from "../../typography";
-import { Box } from "../box";
-import { HStack, VStack } from "../stack";
-
-export function IntroCard() {
-  return (
-    <Box
-      background="bg-default"
-      padding={{ xs: "4", md: "10" }}
-      borderRadius="medium"
-    >
-      <VStack gap="6">
-        <VStack gap="3" align="start">
-          <Heading size="large">Kort om dagpenger</Heading>
-          <CopyButton
-            copyText="#"
-            text="Kopier lenke"
-            activeText="Lenken er kopiert"
-            size="small"
-            icon={<LinkIcon aria-hidden />}
-          />
-        </VStack>
-        <BodyLong>
-          Dagpenger er en pengestøtte du kan få hvis du er arbeidsledig eller
-          permittert.
-        </BodyLong>
-        <div>
-          <Label as="p" spacing>
-            Dagpenger er aktuelt for deg som
-          </Label>
-          <HStack wrap gap="4">
-            <Box
-              borderRadius="full"
-              shadow="small"
-              borderWidth="1"
-              borderColor="border-subtle"
-              paddingBlock="1"
-              paddingInline="2"
-            >
-              <HStack gap="2" align="center">
-                <Box
-                  borderRadius="full"
-                  background="surface-warning"
-                  padding="1"
-                />
-                <Detail as="span">Er arbeidsledig eller permitert</Detail>
-              </HStack>
-            </Box>
-            <Box
-              borderRadius="full"
-              shadow="small"
-              borderWidth="1"
-              borderColor="border-subtle"
-              paddingBlock="1"
-              paddingInline="2"
-            >
-              <HStack gap="2" align="center">
-                <Box
-                  borderRadius="full"
-                  background="surface-warning"
-                  padding="1"
-                />
-                <Detail as="span">Søker jobb</Detail>
-              </HStack>
-            </Box>
-            <Box
-              borderRadius="full"
-              shadow="small"
-              borderWidth="1"
-              borderColor="border-subtle"
-              paddingBlock="1"
-              paddingInline="2"
-            >
-              <HStack gap="2" align="center">
-                <Box
-                  borderRadius="full"
-                  background="surface-warning"
-                  padding="1"
-                />
-                <Detail as="span">Trenger hjelp til å komme i jobb</Detail>
-              </HStack>
-            </Box>
-          </HStack>
-        </div>
-      </VStack>
-    </Box>
-  );
-}
@@ -1,77 +0,0 @@
-import React from "react";
-import { Link } from "../../link";
-import { Heading, Label } from "../../typography";
-import { Box } from "../box";
-import { VStack } from "../stack";
-
-const LinkElement = ({ children }) => {
-  return (
-    <Label as="li" className="sidebarlink">
-      {children}
-    </Label>
-  );
-};
-
-export function Sidebar() {
-  return (
-    <VStack gap="4" className="sidebar">
-      <ContentPanel />
-      <NewsPanel />
-    </VStack>
-  );
-}
-
-export function ContentPanel() {
-  return (
-    <Box
-      as="nav"
-      aria-label="innhold"
-      paddingInline="2"
-      paddingBlock="8 4"
-      background="surface-default"
-      borderRadius="medium"
-    >
-      <Box paddingBlock="0 4" paddingInline="2 0">
-        <Heading size="medium">Innhold</Heading>
-      </Box>
-      <ul className="reset-list">
-        <LinkElement>Kort om dagpenger</LinkElement>
-        <LinkElement>Hvem kan få?</LinkElement>
-        <LinkElement>Hvor mye kan du få?</LinkElement>
-        <LinkElement>Når utbetales pengene?</LinkElement>
-        <LinkElement>Hvor lenge kan du få?</LinkElement>
-        <LinkElement>Slik søker du</LinkElement>
-        <LinkElement>Hva må du gjøre for å få dagpenger?</LinkElement>
-        <LinkElement>Gi beskjed om endringer</LinkElement>
-        <LinkElement>Jobb i kombinasjon med dagpenger</LinkElement>
-        <LinkElement>Utdanning og opplæring</LinkElement>
-        <LinkElement>Ferie og utenlandsopphold</LinkElement>
-        <LinkElement>Slik klager du</LinkElement>
-      </ul>
-    </Box>
-  );
-}
-
-export function NewsPanel() {
-  return (
-    <Box
-      paddingBlock="4"
-      paddingInline="2"
-      background="surface-default"
-      aria-label="Nyttig å vite"
-      as="section"
-      borderRadius="medium"
-    >
-      <Box paddingBlock="0 3" paddingInline="2">
-        <Heading size="small">Nyttig å vite</Heading>
-      </Box>
-      <nav aria-label="innhold">
-        <ul className="reset-list">
-          <Box paddingBlock="2" paddingInline="2">
-            <Link>Hva sier loven?</Link>
-          </Box>
-        </ul>
-      </nav>
-    </Box>
-  );
-}
@@ -1,46 +0,0 @@
-import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../../../util";
-
-export interface ContentBoxProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  maxWidth?: "3xl" | "2xl" | "xl" | "lg";
-}
-
-export const ContentBox: OverridableComponent<ContentBoxProps, HTMLDivElement> =
-  forwardRef(
-    ({ as: Component = "div", className, maxWidth = "xl", ...rest }, ref) => {
-      const getMaxWidth = () => {
-        return maxWidth === "3xl"
-          ? "1920px"
-          : maxWidth === "2xl"
-            ? "1440px"
-            : maxWidth === "xl"
-              ? "1280px"
-              : "1024px";
-      };
-
-      return (
-        <>
-          <Component
-            {...rest}
-            ref={ref}
-            style={{ "--__ac-contentbox--max-width": getMaxWidth() }}
-            className={cl("navds-contentbox", className)}
-          />
-          <style>
-            {`
-              .navds-contentbox {
-                --__ac-contentbox--max-width: initial;
-
-                margin: 0 auto;
-                max-width: var(--__ac-contentbox--max-width);
-              }
-            `}
-          </style>
-        </>
-      );
-    },
-  );
-
-export default ContentBox;
@@ -1 +0,0 @@
-export { default as ContentBox, type ContentBoxProps } from "./ContentBox";
@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Box } from "../box";
-import { HGrid } from "../grid";
-import { Hide, Show } from "../responsive";
-import { VStack } from "../stack";
-import { Content } from "./Content";
-import { FilterCard } from "./Filter";
-import { Header } from "./Header";
-import { IntroCard } from "./Intro";
-import { Sidebar } from "./Sidebar";
-import { ContentBox } from "./content-box";
-import "./styling.css";
-
-const meta = {
-  title: "kitchen sink/navno-sidemal",
-  parameters: {
-    layout: "fullscreen",
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Page: Story = {
-  render: () => {
-    return (
-      <div>
-        <Header />
-        <Box
-          style={{ minHeight: "calc(100vh - 10rem)" }}
-          background="surface-subtle"
-          paddingBlock="12 0"
-        >
-          <ContentBox maxWidth="lg">
-            <Box paddingInline="4">
-              <HGrid
-                align="start"
-                columns={{
-                  xs: "minmax(auto, 600px)",
-                  md: "288px minmax(auto, 600px)",
-                }}
-                gap={{ xs: "3", md: "6" }}
-              >
-                <Box style={{ position: "sticky", top: "1rem" }}>
-                  <Show above="md">
-                    <Sidebar />
-                  </Show>
-                </Box>
-                <VStack gap={{ xs: "6", md: "8" }}>
-                  <IntroCard />
-                  <FilterCard />
-                  <Hide above="md">
-                    <Sidebar />
-                  </Hide>
-                  <Content />
-                  <Content />
-                  <Content />
-                  <Content />
-                </VStack>
-              </HGrid>
-            </Box>
-          </ContentBox>
-        </Box>
-      </div>
-    );
-  },
-};
@@ -1,43 +0,0 @@
-.reset-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Sidebars */
-.sidebar {
-  position: sticky;
-  top: 1rem;
-  bottom: 1rem;
-  max-height: calc(100vh - 2rem);
-  overflow: auto;
-}
-
-.sidebarlink {
-  color: var(--a-text-action);
-  cursor: pointer;
-  padding: var(--a-spacing-3) var(--a-spacing-2);
-}
-
-.sidebarlink:hover {
-  text-decoration: underline;
-  background-color: var(--a-surface-action-subtle);
-  color: var(--a-text-default);
-}
-
-/* Cards */
-.avatar-card {
-  --avatar-size: 4rem;
-
-  position: relative;
-  margin-top: calc(var(--avatar-size) / 2);
-}
-
-.avatar {
-  position: absolute;
-  top: calc((var(--avatar-size) / 2) * -1);
-  height: var(--avatar-size);
-  width: var(--avatar-size);
-  display: grid;
-  place-content: center;
-}
@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";

-export type HStackProps = Omit<StackProps, "direction">;
+export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;

 /**
 * Layout-primitive for horizontal flexbox
@@ -1,73 +1,85 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";

-export interface StackProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * CSS `justify-content` property.
-   *
-   * @example
-   * justify='center'
-   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
-   */
-  justify?: ResponsiveProp<
-    | "start"
-    | "center"
-    | "end"
-    | "space-around"
-    | "space-between"
-    | "space-evenly"
-  >;
-  /**
-   * CSS `align-items` property.
-   *
-   * @example
-   * align='center'
-   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
-   */
-  align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
-  /**
-   * Sets the CSS `flex-wrap` property.
-   */
-  wrap?: boolean;
-  /**
-   * CSS `gap` property.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   *
-   * @example
-   * gap='4'
-   * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  gap?: ResponsiveProp<SpacingScale>;
-  /**
-   * CSS `flex-direction` property.
-   * @default "row"
-   *
-   * @example
-   * direction='row'
-   * direction={{xs: 'row', sm: 'column'}}
-   */
-  direction?: ResponsiveProp<
-    "row" | "column" | "row-reverse" | "column-reverse"
-  >;
-}
+export type StackProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS `justify-content` property.
+     *
+     * @example
+     * justify='center'
+     * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
+     */
+    justify?: ResponsiveProp<
+      | "start"
+      | "center"
+      | "end"
+      | "space-around"
+      | "space-between"
+      | "space-evenly"
+    >;
+    /**
+     * CSS `align-items` property.
+     * @default "stretch"
+     *
+     * @example
+     * align='center'
+     * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
+     */
+    align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
+    /**
+     * Sets the CSS `flex-wrap` property.
+     */
+    wrap?: boolean;
+    /**
+     * CSS `gap` property.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     *
+     * @example
+     * gap='4'
+     * gap='8 4'
+     * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * CSS `flex-direction` property.
+     * @default "row"
+     *
+     * @example
+     * direction='row'
+     * direction={{xs: 'row', sm: 'column'}}
+     */
+    direction?: ResponsiveProp<
+      "row" | "column" | "row-reverse" | "column-reverse"
+    >;
+  };

 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
  forwardRef(
    (
      {
-        as: Component = "div",
+        children,
        className,
-        align,
+        as: Component = "div",
+        align = "stretch",
        justify,
        wrap = true,
        gap,
        style: _style,
        direction = "row",
+        asChild,
        ...rest
      },
      ref,
@@ -81,16 +93,22 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
        ...getResponsiveValue(`stack`, "justify", justify),
      };

+      const Comp = asChild ? Slot : Component;
+
      return (
-        <Component
-          {...rest}
-          ref={ref}
-          style={style}
-          className={cl("navds-stack", className, {
-            "navds-vstack": direction === "column",
-            "navds-hstack": direction === "row",
-          })}
-        />
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            style={style}
+            className={cl("navds-stack", className, {
+              "navds-vstack": direction === "column",
+              "navds-hstack": direction === "row",
+            })}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
      );
    },
  );
@@ -1,8 +1,10 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";

-export type VStackProps = Omit<StackProps, "direction" | "wrap">;
+export type VStackProps = PrimitiveAsChildProps &
+  Omit<StackProps, "direction" | "wrap">;

 /**
 * Layout-primitive for vetical flexbox
@@ -50,6 +50,9 @@ const translateTokenStringToCSS = (
        const width = 100 / arr.length;
        return `calc((100vw - ${width}%)/2)`;
      }
+      if (["mi", "mb"].includes(componentProp) && x === "auto") {
+        return "auto";
+      }

      let output = `var(--a-${tokenSubgroup}-${x})`;
      if (tokenExceptions.includes(x)) {
@@ -65,7 +65,10 @@ export const Default = (props) => {
      size={props.size}
      variant={props.variant}
      value={activeValue}
-      onChange={setActiveValue}
+      onChange={(value) => {
+        setActiveValue(value);
+        console.log(value);
+      }}
      label={props.label ? "Proident minim dolor pariatur." : undefined}
    >
      {Items(props.icon, props.text && props.icon)}
@@ -97,7 +97,10 @@ export function useToggleItem<P extends UseToggleItemProps>(
    ref: mergeRefs([register, ref]),
    isSelected,
    isFocused: focusedValue === value,
-    onClick: composeEventHandlers(onClick, () => setSelectedValue(value)),
+    onClick: composeEventHandlers(
+      onClick,
+      () => selectedValue !== value && setSelectedValue(value),
+    ),
    onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
    onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
  };
@@ -16,6 +16,7 @@ export type AsChildProps =
       * ```
       */
      asChild: true;
+      as?: never;
    }
  | {
      children: React.ReactNode;
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 6.12.0
+
 ## 6.11.0

 ## 6.10.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -25,7 +25,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^6.11.0",
+    "@navikt/ds-tokens": "^6.12.0",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 6.12.0
+
 ## 6.11.0

 ## 6.10.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "6.11.0",
+  "version": "6.12.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^6.11.0",
-    "@navikt/ds-css": "^6.11.0",
-    "@navikt/ds-react": "^6.11.0",
-    "@navikt/ds-tailwind": "^6.11.0",
-    "@navikt/ds-tokens": "^6.11.0"
+    "@navikt/aksel-icons": "^6.12.0",
+    "@navikt/ds-css": "^6.12.0",
+    "@navikt/ds-react": "^6.12.0",
+    "@navikt/ds-tailwind": "^6.12.0",
+    "@navikt/ds-tokens": "^6.12.0"
  }
 }
@@ -5,8 +5,8 @@ import ShowMore from "@/web/ShowMore";

 type ExampletextBlockProps = {
  node: {
-    title: string;
-    text: string;
+    title?: string;
+    text?: string;
    readMore?: boolean;
  };
 };
@@ -5,7 +5,7 @@ import {
  PaperplaneIcon,
  TrashIcon,
 } from "@navikt/aksel-icons";
-import { BodyShort, Button, HGrid, VStack } from "@navikt/ds-react";
+import { BodyShort, Box, Button, HGrid, VStack } from "@navikt/ds-react";

 const FormNavigation = () => (
  <VStack gap="4">
@@ -13,9 +13,9 @@ const FormNavigation = () => (
      Sist lagret: 10. mars 2024 kl. 13.55
    </BodyShort>
    <HGrid
-      gap="8 4"
+      gap={{ xs: "4", sm: "8 4" }}
      columns={{ xs: 1, sm: 2 }}
-      style={{ width: "fit-content" }}
+      width={{ sm: "fit-content" }}
    >
      <Button
        variant="secondary"
@@ -32,13 +32,15 @@ const FormNavigation = () => (
        Send søknad
      </Button>

-      <Button
-        variant="tertiary"
-        icon={<FloppydiskIcon aria-hidden />}
-        iconPosition="left"
-      >
-        Fortsett senere
-      </Button>
+      <Box asChild marginBlock={{ xs: "4 0", sm: "0" }}>
+        <Button
+          variant="tertiary"
+          icon={<FloppydiskIcon aria-hidden />}
+          iconPosition="left"
+        >
+          Fortsett senere
+        </Button>
+      </Box>
      <Button
        variant="tertiary"
        icon={<TrashIcon aria-hidden />}
@@ -0,0 +1,57 @@
+import {
+  Alert,
+  BodyLong,
+  Button,
+  HStack,
+  Heading,
+  VStack,
+} from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="8">
+      <Alert variant="warning">
+        <Heading spacing size="small" level="3">
+          Informasjon om ansvaret ditt
+        </Heading>
+        <BodyLong spacing>
+          Det er viktig at du gjennomfører denne aktiviteten med NAV.
+        </BodyLong>
+        <BodyLong spacing>
+          Gjør du ikke det, kan det medføre at stønaden du mottar fra NAV
+          bortfaller for en periode eller stanses. Hvis du ikke kan gjennomføre
+          aktiviteten, ber vi deg ta kontakt med veilederen din så snart som
+          mulig.
+        </BodyLong>
+        <Button variant="secondary-neutral">Ok, jeg har lest beskjeden</Button>
+      </Alert>
+
+      <Alert size="small" variant="info">
+        <VStack gap="3">
+          Det har kommet nye opplysninger. Vil du ta dem i bruk?
+          <HStack gap="4">
+            <Button size="small" variant="secondary-neutral">
+              Ja
+            </Button>
+            <Button size="small" variant="secondary-neutral">
+              Nei
+            </Button>
+          </HStack>
+        </VStack>
+      </Alert>
+    </VStack>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
@@ -21,5 +21,5 @@ export const Demo = {

 export const args = {
  index: 2,
-  desc: "Skal formidle ren informasjon",
+  desc: "Skal formidle ren informasjon.",
 };
@@ -5,9 +5,9 @@ const Example = () => {
  return (
    <VStack gap="4">
      <Alert variant="info">
-        Hvilken aria-role og hvilken Alert-variant man bruker er knyttet til
+        Hvilken ARIA role og hvilken Alert-variant man bruker er knyttet til
        viktigheten av innholdet. I Info-varianten bør det ikke være nødvendig å
-        bruke aria-roles. Bruk role=&quot;status&quot; ved unntak.
+        bruke ARIA role. Bruk role=&quot;status&quot; ved unntak.
      </Alert>
      <Alert role="status" variant="success">
        Du gjorde noe rett! I Success-varianten kan du bruke
@@ -24,5 +24,5 @@ export const Demo = {

 export const args = {
  index: 7,
-  desc: "Husk riktig h-tag ved bruk av heading i Alert",
+  desc: "Husk riktig h-tag ved bruk av heading i Alert.",
 };
@@ -1,49 +0,0 @@
-import { useState } from "react";
-import { Chips } from "@navikt/ds-react";
-import { withDsExample } from "@/web/examples/withDsExample";
-
-const Example = () => {
-  const options = [
-    "Lillehammer",
-    "Nittedal",
-    "Enebakk",
-    "Hamar",
-    "Skedsmo",
-    "Arendal",
-    "Gjøvik",
-    "Vennesla",
-  ];
-
-  const [filter, setFilter] = useState(options);
-
-  return (
-    <Chips>
-      {filter.map((c) => (
-        <Chips.Removable
-          key={c}
-          variant="neutral"
-          onClick={() =>
-            setFilter((x) =>
-              x.length === 1 ? options : x.filter((y) => y !== c),
-            )
-          }
-        >
-          {c}
-        </Chips.Removable>
-      ))}
-    </Chips>
-  );
-};
-
-// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 5,
-  desc: "Removable chip viser valgte verdier som brukeren kan fjerne.",
-};
@@ -1,40 +1,56 @@
 import { useState } from "react";
-import { Chips } from "@navikt/ds-react";
+import { Chips, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const options = [
-    "Lillehammer",
-    "Nittedal",
-    "Enebakk",
-    "Hamar",
-    "Skedsmo",
-    "Arendal",
-    "Gjøvik",
-    "Vennesla",
-  ];
-
  const [filter, setFilter] = useState(options);

  return (
-    <Chips>
-      {filter.map((c) => (
-        <Chips.Removable
-          key={c}
-          variant="action"
-          onClick={() =>
-            setFilter((x) =>
-              x.length === 1 ? options : x.filter((y) => y !== c),
-            )
-          }
-        >
-          {c}
-        </Chips.Removable>
-      ))}
-    </Chips>
+    <VStack gap="10">
+      <Chips>
+        {filter.map((c) => (
+          <Chips.Removable
+            key={c}
+            onClick={() =>
+              setFilter((x) =>
+                x.length === 1 ? options : x.filter((y) => y !== c),
+              )
+            }
+          >
+            {c}
+          </Chips.Removable>
+        ))}
+      </Chips>
+
+      <Chips>
+        {filter.map((c) => (
+          <Chips.Removable
+            variant="neutral"
+            key={c}
+            onClick={() =>
+              setFilter((x) =>
+                x.length === 1 ? options : x.filter((y) => y !== c),
+              )
+            }
+          >
+            {c}
+          </Chips.Removable>
+        ))}
+      </Chips>
+    </VStack>
  );
 };

+const options = [
+  "Lillehammer",
+  "Nittedal",
+  "Enebakk",
+  "Hamar",
+  "Skedsmo",
+  "Arendal",
+  "Gjøvik",
+];
+
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

@@ -44,6 +60,6 @@ export const Demo = {
 };

 export const args = {
-  index: 4,
-  desc: "Removable chip viser valgte verdier som brukeren kan fjerne.",
+  index: 2,
+  desc: "Removable chips viser valgte verdier som brukeren kan fjerne, for eksempel valgte filter eller verdier som brukeren har skrevet i tekstfelt.",
 };
@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { Chips, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  const [selected, setSelected] = useState(["Arendal", "Nittedal"]);
+  const [filter, setFilter] = useState(options);
+
+  return (
+    <VStack gap="14">
+      <VStack gap="5">
+        <Chips size="medium">
+          {options.map((option) => (
+            <Chips.Toggle
+              selected={selected.includes(option)}
+              key={option}
+              onClick={() =>
+                setSelected(
+                  selected.includes(option)
+                    ? selected.filter((x) => x !== option)
+                    : [...selected, option],
+                )
+              }
+            >
+              {option}
+            </Chips.Toggle>
+          ))}
+        </Chips>
+        <Chips size="medium">
+          {filter.map((option) => (
+            <Chips.Removable
+              key={option}
+              onClick={() =>
+                setFilter((x) =>
+                  x.length === 1 ? options : x.filter((y) => y !== option),
+                )
+              }
+            >
+              {option}
+            </Chips.Removable>
+          ))}
+        </Chips>
+      </VStack>
+
+      <VStack gap="5">
+        <Chips size="small">
+          {options.map((option) => (
+            <Chips.Toggle
+              selected={selected.includes(option)}
+              key={option}
+              onClick={() =>
+                setSelected(
+                  selected.includes(option)
+                    ? selected.filter((x) => x !== option)
+                    : [...selected, option],
+                )
+              }
+            >
+              {option}
+            </Chips.Toggle>
+          ))}
+        </Chips>
+        <Chips size="small">
+          {filter.map((option) => (
+            <Chips.Removable
+              key={option}
+              onClick={() =>
+                setFilter((x) =>
+                  x.length === 1 ? options : x.filter((y) => y !== option),
+                )
+              }
+            >
+              {option}
+            </Chips.Removable>
+          ))}
+        </Chips>
+      </VStack>
+    </VStack>
+  );
+};
+
+const options = [
+  "Lillehammer",
+  "Nittedal",
+  "Enebakk",
+  "Hamar",
+  "Skedsmo",
+  "Arendal",
+  "Gjøvik",
+];
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+};
@@ -1,67 +0,0 @@
-import { useState } from "react";
-import { Chips, VStack } from "@navikt/ds-react";
-import { withDsExample } from "@/web/examples/withDsExample";
-
-const Example = () => {
-  const options = [
-    "Lillehammer",
-    "Nittedal",
-    "Enebakk",
-    "Hamar",
-    "Skedsmo",
-    "Arendal",
-    "Gjøvik",
-    "Vennesla",
-  ];
-
-  const [selected, setSelected] = useState(["Arendal", "Nittedal"]);
-  const [filter, setFilter] = useState(options);
-
-  return (
-    <VStack gap="10">
-      <Chips size="small">
-        {options.map((c) => (
-          <Chips.Toggle
-            selected={selected.includes(c)}
-            key={c}
-            onClick={() =>
-              setSelected(
-                selected.includes(c)
-                  ? selected.filter((x) => x !== c)
-                  : [...selected, c],
-              )
-            }
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-      <Chips size="small">
-        {filter.map((c) => (
-          <Chips.Removable
-            key={c}
-            onClick={() =>
-              setFilter((x) =>
-                x.length === 1 ? options : x.filter((y) => y !== c),
-              )
-            }
-          >
-            {c}
-          </Chips.Removable>
-        ))}
-      </Chips>
-    </VStack>
-  );
-};
-
-// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 6,
-};
@@ -1,52 +0,0 @@
-import { useState } from "react";
-import { Chips } from "@navikt/ds-react";
-import { withDsExample } from "@/web/examples/withDsExample";
-
-const Example = () => {
-  const options = [
-    "Lillehammer",
-    "Nittedal",
-    "Enebakk",
-    "Hamar",
-    "Skedsmo",
-    "Arendal",
-    "Gjøvik",
-    "Vennesla",
-  ];
-
-  const [selected, setSelected] = useState(["Gjøvik", "Hamar"]);
-
-  return (
-    <Chips>
-      {options.map((c) => (
-        <Chips.Toggle
-          selected={selected.includes(c)}
-          key={c}
-          variant="neutral"
-          onClick={() =>
-            setSelected(
-              selected.includes(c)
-                ? selected.filter((x) => x !== c)
-                : [...selected, c],
-            )
-          }
-        >
-          {c}
-        </Chips.Toggle>
-      ))}
-    </Chips>
-  );
-};
-
-// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 2,
-  desc: "Toggle chip brukes til filtrering av innhold og data.",
-};
@@ -1,37 +1,53 @@
 import { useState } from "react";
-import { Chips } from "@navikt/ds-react";
+import { Chips, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const options = [
-    "Lillehammer",
-    "Nittedal",
-    "Enebakk",
-    "Hamar",
-    "Skedsmo",
-    "Arendal",
-    "Gjøvik",
-    "Vennesla",
-  ];
-
  const [selected, setSelected] = useState(3);

  return (
-    <Chips>
-      {options.map((c, y) => (
-        <Chips.Toggle
-          selected={selected === y}
-          checkmark={false}
-          key={c}
-          onClick={() => setSelected(y)}
-        >
-          {c}
-        </Chips.Toggle>
-      ))}
-    </Chips>
+    <VStack gap="10">
+      <Chips>
+        {options.map((label, id) => (
+          <Chips.Toggle
+            checkmark={false}
+            key={label}
+            selected={selected === id}
+            onClick={() => setSelected(id)}
+          >
+            {label}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+
+      <Chips>
+        {options.map((label, id) => (
+          <Chips.Toggle
+            checkmark={false}
+            variant="neutral"
+            key={label}
+            selected={selected === id}
+            onClick={() => setSelected(id)}
+          >
+            {label}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </VStack>
  );
 };

+const options = [
+  "Lillehammer",
+  "Nittedal",
+  "Enebakk",
+  "Hamar",
+  "Skedsmo",
+  "Arendal",
+  "Gjøvik",
+  "Vennesla",
+];
+
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

@@ -41,5 +57,6 @@ export const Demo = {
 };

 export const args = {
-  index: 3,
+  index: 1,
+  desc: "Hvis du slår av checkmark må det være minst 3 chips, slik at det er mulig å se hvilken som er valgt.",
 };
@@ -1,42 +1,62 @@
 import { useState } from "react";
-import { Chips } from "@navikt/ds-react";
+import { Chips, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const options = [
-    "Lillehammer",
-    "Nittedal",
-    "Enebakk",
-    "Hamar",
-    "Skedsmo",
-    "Arendal",
-    "Gjøvik",
-    "Vennesla",
-  ];
-
  const [selected, setSelected] = useState(["Nittedal", "Arendal"]);

  return (
-    <Chips>
-      {options.map((c) => (
-        <Chips.Toggle
-          selected={selected.includes(c)}
-          key={c}
-          onClick={() =>
-            setSelected(
-              selected.includes(c)
-                ? selected.filter((x) => x !== c)
-                : [...selected, c],
-            )
-          }
-        >
-          {c}
-        </Chips.Toggle>
-      ))}
-    </Chips>
+    <VStack gap="10">
+      <Chips>
+        {options.map((option) => (
+          <Chips.Toggle
+            key={option}
+            selected={selected.includes(option)}
+            onClick={() =>
+              setSelected(
+                selected.includes(option)
+                  ? selected.filter((x) => x !== option)
+                  : [...selected, option],
+              )
+            }
+          >
+            {option}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+
+      <Chips>
+        {options.map((option) => (
+          <Chips.Toggle
+            variant="neutral"
+            key={option}
+            selected={selected.includes(option)}
+            onClick={() =>
+              setSelected(
+                selected.includes(option)
+                  ? selected.filter((x) => x !== option)
+                  : [...selected, option],
+              )
+            }
+          >
+            {option}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </VStack>
  );
 };

+const options = [
+  "Lillehammer",
+  "Nittedal",
+  "Enebakk",
+  "Hamar",
+  "Skedsmo",
+  "Arendal",
+  "Gjøvik",
+];
+
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

@@ -46,6 +66,6 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
-  desc: "Toggle chip brukes til filtrering av innhold og data.",
+  index: 0,
+  desc: "Toggle chip brukes til filtrering av innhold. Du velger selv om brukeren skal kunne velge én eller flere alternativer om gangen.",
 };
@@ -3,7 +3,7 @@ import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
-    <VStack gap="3">
+    <VStack gap="3" align="start">
      <Link href="#" variant="action">
        Action variant
      </Link>
@@ -0,0 +1,25 @@
+import { Radio, RadioGroup, Stack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <RadioGroup legend="Har du barn?">
+      <Stack gap="0 6" direction={{ xs: "column", sm: "row" }} wrap={false}>
+        <Radio value="1">Ja</Radio>
+        <Radio value="0">Nei</Radio>
+      </Stack>
+    </RadioGroup>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
@@ -1,5 +1,11 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { BodyShort, Box, Heading, Link, List, Page } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 const Example = () => {
  useDekorator();
@@ -31,49 +37,6 @@ const Example = () => {
  );
 };

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { BugIcon } from "@navikt/aksel-icons";
 import {
  BodyShort,
@@ -10,6 +10,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 const Example = () => {
  useDekorator();
@@ -65,49 +71,6 @@ const Example = () => {
  );
 };

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -9,6 +9,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 const Example = () => {
  useDekorator();
@@ -45,49 +51,6 @@ const Example = () => {
  );
 };

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { BugIcon } from "@navikt/aksel-icons";
 import {
  BodyShort,
@@ -9,6 +9,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 const Example = () => {
  useDekorator();
@@ -46,49 +52,6 @@ const Example = () => {
  );
 };

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -8,6 +8,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 const Example = () => {
  useDekorator();
@@ -54,49 +60,6 @@ const Example = () => {
  );
 };

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -8,6 +8,12 @@ import {
  List,
  Page,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -62,49 +68,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -10,6 +10,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -93,49 +99,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -10,6 +10,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -69,49 +75,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -9,6 +9,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -71,49 +77,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  BodyShort,
  Box,
@@ -9,6 +9,12 @@ import {
  Page,
  VStack,
 } from "@navikt/ds-react";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -84,49 +90,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import {
  Accordion,
@@ -16,6 +16,13 @@ import {
  Stack,
  VStack,
 } from "@navikt/ds-react";
+import ApplicationPictogram from "../../../components/website-modules/examples/__parts/ApplicationPictogram";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -128,7 +135,7 @@ function Example() {
            <BodyLong>
              Det er viktig at du gir oss riktige opplysninger slik at vi kan
              behandle saken din.{" "}
-              <Link href="#gi-riktige-opplysninger">
+              <Link href="https://www.nav.no/endringer">
                Les mer om viktigheten av å gi riktige opplysninger.
              </Link>
            </BodyLong>
@@ -152,145 +159,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
-const ApplicationPictogram = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="72"
-    height="72"
-    viewBox="0 0 72 72"
-    fill="none"
-    style={{ flexShrink: 0 }}
-    aria-hidden
-  >
-    <rect x="23.25" y="22.5" width="26.25" height="9" fill="#CCE2F0" />
-    <rect x="23.25" y="36.75" width="26.25" height="9" fill="#CCE2F0" />
-    <circle cx="36.75" cy="34.5" r="21" fill="#CCE2F0" />
-    <path
-      d="M23.7672 5.508L30.1202 11.8434M1.5 33.75H34.5M26.4706 2.81211L10.5882 18.6506L9 26.5699L16.9412 24.986L32.8235 9.14751C34.5778 7.39804 34.5778 4.56158 32.8235 2.81211C31.0692 1.06263 28.2249 1.06263 26.4706 2.81211Z"
-      stroke="#23262A"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 44.25L63.75 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 52.5L63.75 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 60.75L63.75 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 52.5L51 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 52.5L51 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 44.25L51 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 44.25L51 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 60.75L51 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 60.75L51 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <rect
-      x="41.25"
-      y="33"
-      width="29.25"
-      height="37.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import {
  Accordion,
@@ -16,6 +16,13 @@ import {
  Stack,
  VStack,
 } from "@navikt/ds-react";
+import ApplicationPictogram from "../../../components/website-modules/examples/__parts/ApplicationPictogram";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -175,7 +182,7 @@ function Example() {
            <BodyLong>
              Det er viktig at du gir oss riktige opplysninger slik at vi kan
              behandle saken din.{" "}
-              <Link href="#gi-riktige-opplysninger">
+              <Link href="https://www.nav.no/endringer">
                Les mer om viktigheten av å gi riktige opplysninger.
              </Link>
            </BodyLong>
@@ -199,145 +206,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
-const ApplicationPictogram = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="72"
-    height="72"
-    viewBox="0 0 72 72"
-    fill="none"
-    style={{ flexShrink: 0 }}
-    aria-hidden
-  >
-    <rect x="23.25" y="22.5" width="26.25" height="9" fill="#CCE2F0" />
-    <rect x="23.25" y="36.75" width="26.25" height="9" fill="#CCE2F0" />
-    <circle cx="36.75" cy="34.5" r="21" fill="#CCE2F0" />
-    <path
-      d="M23.7672 5.508L30.1202 11.8434M1.5 33.75H34.5M26.4706 2.81211L10.5882 18.6506L9 26.5699L16.9412 24.986L32.8235 9.14751C34.5778 7.39804 34.5778 4.56158 32.8235 2.81211C31.0692 1.06263 28.2249 1.06263 26.4706 2.81211Z"
-      stroke="#23262A"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 44.25L63.75 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 52.5L63.75 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 60.75L63.75 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 52.5L51 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 52.5L51 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 44.25L51 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 44.25L51 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 60.75L51 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 60.75L51 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <rect
-      x="41.25"
-      y="33"
-      width="29.25"
-      height="37.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import {
  Accordion,
@@ -17,6 +17,13 @@ import {
  Stack,
  VStack,
 } from "@navikt/ds-react";
+import ApplicationPictogram from "../../../components/website-modules/examples/__parts/ApplicationPictogram";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";

 function Example() {
  useDekorator();
@@ -131,7 +138,7 @@ function Example() {
            <BodyLong>
              Det er viktig at du gir oss riktige opplysninger slik at vi kan
              behandle saken din.{" "}
-              <Link href="#gi-riktige-opplysninger">
+              <Link href="https://www.nav.no/endringer">
                Les mer om viktigheten av å gi riktige opplysninger.
              </Link>
            </BodyLong>
@@ -155,145 +162,6 @@ function Example() {
  );
 }

-function Header() {
-  return <div id="decorator-header" />;
-}
-
-function Footer() {
-  return <div id="decorator-footer" />;
-}
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-function Env() {
-  return (
-    <div
-      id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
-    />
-  );
-}
-
-/**
- * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
- * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
- * @see https://github.com/navikt/nav-dekoratoren
- */
-function useDekorator() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `${MILJO_URL}/client.js`;
-    script.async = true;
-    document.body.appendChild(script);
-
-    const styles = document.createElement("link");
-    styles.href = `${MILJO_URL}/css/client.css`;
-    styles.rel = "stylesheet";
-    document.head.appendChild(styles);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(styles);
-    };
-  }, []);
-}
-
-const ApplicationPictogram = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="72"
-    height="72"
-    viewBox="0 0 72 72"
-    fill="none"
-    style={{ flexShrink: 0 }}
-    aria-hidden
-  >
-    <rect x="23.25" y="22.5" width="26.25" height="9" fill="#CCE2F0" />
-    <rect x="23.25" y="36.75" width="26.25" height="9" fill="#CCE2F0" />
-    <circle cx="36.75" cy="34.5" r="21" fill="#CCE2F0" />
-    <path
-      d="M23.7672 5.508L30.1202 11.8434M1.5 33.75H34.5M26.4706 2.81211L10.5882 18.6506L9 26.5699L16.9412 24.986L32.8235 9.14751C34.5778 7.39804 34.5778 4.56158 32.8235 2.81211C31.0692 1.06263 28.2249 1.06263 26.4706 2.81211Z"
-      stroke="#23262A"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 44.25L63.75 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 52.5L63.75 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M56.25 60.75L63.75 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 52.5L51 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 52.5L51 52.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 44.25L51 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 44.25L51 44.25"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 60.75L51 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M48 60.75L51 60.75"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <rect
-      x="41.25"
-      y="33"
-      width="29.25"
-      height="37.5"
-      stroke="#262626"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default Example;
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	86e52df680	Version Packages (#3013 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-06-25 15:39:57 +02:00
Halvor Haugan	ff8072e352	Icons: FigureCombination icon adjusted (#3031 )	2024-06-25 12:32:37 +02:00
Julian Nymark	5b033ab218	✨ start formatting with biome too (#2991 )	2024-06-25 12:27:35 +02:00
Halvor Haugan	6276b676d6	[aksel.nav.no] Validate unique title in exampletext_block (#3024 )	2024-06-25 09:52:07 +02:00
Halvor Haugan	c2ffd466af	Update link in form templates (#3022 )	2024-06-24 15:03:36 +02:00
Andreas Nordahl	d6d6fb06b1	start align link items (#3026 )	2024-06-24 13:05:47 +02:00
Halvor Haugan	e829753847	Example of Alert with buttons (#3019 )	2024-06-24 13:01:27 +02:00
Ken	f1d8e9c4d3	feat: New icon ChildHairEyes (#3020 )	2024-06-24 11:56:18 +02:00
Halvor Haugan	4d0f8067b7	Adjust examples of Chips	2024-06-24 10:00:34 +02:00
Halvor Haugan	4afe90122b	Add Chromatic modes on some templates (#3023 )	2024-06-24 09:23:49 +02:00
Halvor HauganandKen	350dfd3477	Adjust buttons in form summary page template (#2999 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-06-20 14:00:18 +02:00
Ken	9a74fecbfb	fire: Removed old testing-templates (#3011 )	2024-06-20 13:57:33 +02:00
Ken	7ec73f2008	[ToggleGroup] Selecting already selected value avoids sending extra `onChange` (#3012 ) * feat: Selecting already selected value avoids sending extra onChange-event * Update @navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx	2024-06-20 13:55:34 +02:00
Halvor Haugan	952655ed63	Refactor templates (#3017 )	2024-06-20 13:51:15 +02:00
Halvor Haugan	6af8cc526f	Adjust examples of Chips (#3016 )	2024-06-20 13:49:18 +02:00
Halvor Haugan	23ea3232fa	Alert: Misc. adjustments (#3007 )	2024-06-20 13:43:09 +02:00
Ken Halvor Haugan Julian Nymark	b38789b98d	Implement BasePrimitive for Box, Stack and HGrid (#3003 ) * feat: Implemented baseprimitive in box * refactor: segmented box-features into classes * feat: Implemented baseprimitive margin css * refactor: Correctly allow box with no children when no asChild is used * refactor: Implement BasePrimitive on Stack/HGrid, addef as-prop for hgrid * typo: Rename constant to a more 'content' nameing convention * bug: Fix slot-import * 🚧 --__ac-r-m.* * bug: Fixed nesting of className * feat: BasePrimitive now supports auto * memo: Changeset * bug: Added margin auto support for marginBlock * refactor: Redo naming of base props * bug: Typo * bug: Wrong css-token reference for pi and pb * Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * bug: Removed static padding representation * Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * refactor: Renamed AsChildProps used in Primitives * bug: Re-added fallback to padding/margin when using a subset of breakpoints for inline/block * Update @navikt/core/react/src/layout/base/BasePrimitive.stories.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * memo: JSDoc * refactor: Removed undefined as-props from docgen --------- Co-authored-by: Julian Nymark <julian.nymark@nav.no> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-06-19 11:17:08 +02:00
Halvor Haugan	cb304d0bb6	Add example of horizontal radios (#3009 )	2024-06-19 09:33:14 +02:00
				`@@ -1 +0,0 @@`
				`export { default as ContentBox, type ContentBoxProps } from "./ContentBox";`