Version Packages (#2275 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Width fungerte ikke med inline-variant av skeleton (#2273 )
2026-10-13 17:22:02 +00:00 · 2023-09-13 14:58:02 +02:00 · 2023-09-13 14:42:05 +02:00 · 2023-09-13 11:46:38 +02:00 · 2023-09-13 11:25:35 +02:00 · 2023-09-11 21:41:26 +02:00
224 changed files with 3921 additions and 1455 deletions
@@ -16,7 +16,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v3
        with:
-          node-version: "16"
+          node-version: "20"
      - uses: actions/checkout@v3
      - name: add tokens to .env
        run: |
@@ -16,7 +16,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v3
        with:
-          node-version: "16"
+          node-version: "20"
      - uses: actions/checkout@v3
      - name: add tokens to .env
        run: |
@@ -51,7 +51,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v3
        with:
-          node-version: "16"
+          node-version: "20"
      - uses: actions/checkout@v3
      - name: add tokens to .env
        run: |
@@ -21,7 +21,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v3
        with:
-          node-version: "16"
+          node-version: "20"
      - uses: actions/checkout@v3
      - name: Login to GitHub Container Registry
        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
@@ -13,7 +13,7 @@ jobs:
          fetch-depth: 0 # Required to retrieve git history
      - uses: actions/setup-node@v3
        with:
-          node-version: 14
+          node-version: "20"

      - name: Restore cache
        uses: actions/cache@v3
@@ -26,7 +26,7 @@ jobs:

      - uses: actions/setup-node@v3
        with:
-          node-version: 16.13.0
+          node-version: "20"
          cache: yarn

      - name: Restore cache
@@ -22,7 +22,7 @@ jobs:

      - uses: actions/setup-node@v3
        with:
-          node-version: 16.13.0
+          node-version: "20"
          cache: yarn

      - name: Restore cache
@@ -18,7 +18,7 @@ jobs:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
-          node-version: 16
+          node-version: "20"

      - name: add tokens to .env
        run: |
@@ -25,7 +25,7 @@ jobs:

      - uses: actions/setup-node@v3
        with:
-          node-version: 16.13.0
+          node-version: "20"
          cache: yarn

      - uses: denoland/setup-deno@v1
@@ -18,7 +18,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v3
        with:
-          node-version: "16"
+          node-version: "20"
      - uses: actions/checkout@v3
      - name: add tokens to .env
        run: |
@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 5.5.0
+
+## 5.4.1
+
+## 5.4.0
+
+## 5.3.5
+
 ## 5.3.4

 ### Patch Changes
@@ -27,7 +27,7 @@
    "@vitejs/plugin-react": "^3.1.0",
    "postcss": "^8.4.0",
    "postcss-url": "^10.1.3",
-    "typescript": "^4.8.0",
+    "typescript": "^5.1.6",
    "vite": "^4.2.0",
    "vite-plugin-singlefile": "^0.13.3",
    "vite-plugin-svgr": "^2.4.0"
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.3.4",
+  "version": "5.5.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -76,7 +76,7 @@
    "lodash.startcase": "4.4.0",
    "react": "^18.0.0",
    "rehype-parse": "8.0.4",
-    "typescript": "^4.8.0",
+    "typescript": "^5.1.6",
    "unified": "10.1.2"
  },
  "jest": {
@@ -1,5 +1,13 @@
 # @navikt/aksel-stylelint

+## 5.5.0
+
+## 5.4.1
+
+## 5.4.0
+
+## 5.3.5
+
 ## 5.3.4

 ## 5.3.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.3.4",
+  "version": "5.5.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": "^5.3.4",
-    "@navikt/ds-tokens": "^5.3.4",
+    "@navikt/ds-css": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -45,7 +45,8 @@
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
    "stylelint": "^14.8.5",
-    "typescript": "^4.8.0"
+    "ts-jest": "^29.0.0",
+    "typescript": "^5.1.6"
  },
  "jest": {
    "preset": "jest-preset-stylelint",
@@ -1,5 +1,33 @@
 # @navikt/aksel

+## 5.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`9f2052e1c`](https://github.com/navikt/aksel/commit/9f2052e1c2f31735896d082f3fece66b080a4f4e), [`83c9194a4`](https://github.com/navikt/aksel/commit/83c9194a480fd3d184f673815522f230ed5d77bb)]:
+  - @navikt/ds-css@5.5.0
+
+## 5.4.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.4.1
+
+## 5.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`bff7c836f`](https://github.com/navikt/aksel/commit/bff7c836f8b0c604da1bfac49f60d6ae07d04624), [`7be9dd88c`](https://github.com/navikt/aksel/commit/7be9dd88ca8751aa03ddb9f40c21990b6d81a26a)]:
+  - @navikt/ds-css@5.4.0
+
+## 5.3.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.3.5
+
 ## 5.3.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.3.4",
+  "version": "5.5.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": "5.3.4",
+    "@navikt/ds-css": "5.5.0",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -49,7 +49,7 @@
    "jest": "^29.0.0",
    "rimraf": "3.0.2",
    "ts-jest": "^29.0.0",
-    "typescript": "^4.8.0"
+    "typescript": "^5.1.6"
  },
  "sideEffects": false,
  "engines": {
@@ -7,6 +7,7 @@ import {
  componentDir,
  rootDir,
  globalDir,
+  primitivesCss,
 } from "@navikt/ds-css/config/_mappings";
 import { inquiry } from "./inquiry";
 import clipboard from "clipboardy";
@@ -143,6 +144,13 @@ function advancedOutput(
    componentImportsList.unshift(formCss);
  }

+  if (componentImportsList.find((x) => x === primitivesCss)) {
+    componentImportsList = componentImportsList.filter(
+      (x) => x !== primitivesCss
+    );
+    componentImportsList.unshift(primitivesCss);
+  }
+
  if (componentImportsList.find((x) => x === typoCss)) {
    componentImportsList = componentImportsList.filter((x) => x !== typoCss);
    componentImportsList.unshift(typoCss);
@@ -1,5 +1,29 @@
 # @navikt/ds-css

+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+### Patch Changes
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+## 5.4.1
+
+## 5.4.0
+
+### Minor Changes
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+### Patch Changes
+
+- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
+
+## 5.3.5
+
 ## 5.3.4

 ### Patch Changes
@@ -28,6 +28,7 @@
 .navds-sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
@@ -50,6 +51,7 @@
 .navds-sr-only.focusable:active,
 .navds-sr-only.focusable:focus {
  clip: auto;
+  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
@@ -1,18 +1,35 @@
 [data-theme="dark"] {
-  --ac-button-primary-text: var(--a-gray-900);
-  --ac-button-primary-bg: var(--a-blue-200);
-  --ac-button-primary-focus-border: var(--a-gray-900);
-  --ac-button-primary-hover-bg: var(--a-blue-300);
-  --ac-button-primary-active-bg: var(--a-blue-400);
-  --ac-button-secondary-text: var(--a-white);
-  --ac-button-secondary-hover-text: var(--a-white);
-  --ac-button-secondary-active-text: var(--a-white);
-  --ac-button-secondary-active-focus-border: var(--a-gray-900);
-  --ac-button-secondary-bg: var(--a-gray-900);
-  --ac-button-secondary-border: var(--a-blue-200);
-  --ac-button-secondary-hover-bg: var(--a-gray-800);
-  --ac-button-secondary-focus-border: var(--a-blue-200);
-  --ac-button-secondary-active-bg: var(--a-gray-700);
+  --__ac-button-primary-text: var(--a-gray-900);
+  --__ac-button-primary-bg: var(--a-blue-200);
+  --__ac-button-primary-focus-border: var(--a-gray-900);
+  --__ac-button-primary-hover-bg: var(--a-blue-300);
+  --__ac-button-primary-active-bg: var(--a-blue-400);
+  --__ac-button-secondary-text: var(--a-white);
+  --__ac-button-secondary-hover-text: var(--a-white);
+  --__ac-button-secondary-active-text: var(--a-white);
+  --__ac-button-secondary-active-focus-border: var(--a-gray-900);
+  --__ac-button-secondary-bg: var(--a-gray-900);
+  --__ac-button-secondary-border: var(--a-blue-200);
+  --__ac-button-secondary-hover-bg: var(--a-gray-800);
+  --__ac-button-secondary-focus-border: var(--a-blue-200);
+  --__ac-button-secondary-active-bg: var(--a-gray-700);
+}
+
+[data-theme="light"] {
+  --__ac-button-primary-text: initial;
+  --__ac-button-primary-bg: initial;
+  --__ac-button-primary-focus-border: initial;
+  --__ac-button-primary-hover-bg: initial;
+  --__ac-button-primary-active-bg: initial;
+  --__ac-button-secondary-text: initial;
+  --__ac-button-secondary-hover-text: initial;
+  --__ac-button-secondary-active-text: initial;
+  --__ac-button-secondary-active-focus-border: initial;
+  --__ac-button-secondary-bg: initial;
+  --__ac-button-secondary-border: initial;
+  --__ac-button-secondary-hover-bg: initial;
+  --__ac-button-secondary-focus-border: initial;
+  --__ac-button-secondary-active-bg: initial;
 }

 .navds-button {
@@ -109,25 +126,29 @@
 *************************/

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

 .navds-button--primary:hover {
-  background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
+  background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
 }

 .navds-button--primary:active {
-  background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
+  background-color: var(--ac-button-primary-active-bg, var(--__ac-button-primary-active-bg, var(--a-surface-action-active)));
 }

 .navds-button--primary:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px
+      var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+    var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
  .navds-button--primary:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px
+        var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+      var(--a-shadow-focus);
  }
 }

@@ -173,47 +194,58 @@
 **************************/

 .navds-button--secondary {
-  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
+  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
+  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
 }

 .navds-button--secondary:hover {
-  color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
+  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(
+    --ac-button-secondary-hover-bg,
+    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
+  );
 }

 .navds-button--secondary:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px
+      var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+    var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
  .navds-button--secondary:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 2px
+        var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+      var(--a-shadow-focus);
  }
 }

 .navds-button--secondary:active {
-  color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
-  background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
+  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
+  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
  box-shadow: none;
 }

 .navds-button--secondary:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px
+      var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
+    var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
  .navds-button--secondary:focus:active {
-    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px
+        var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
+      var(--a-shadow-focus);
  }
 }

 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
+  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
+  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
 }

 /**************************
@@ -3,6 +3,7 @@ export declare const globalDir = "dist/global";
 export declare const componentDir = "dist/component";
 export declare const typoCss = "typography.css";
 export declare const formCss = "form.css";
+export declare const primitivesCss = "primitives.css";
 export declare const componentsCss = "components.css";
 export declare const StyleMappings: {
  baseline: {
@@ -4,6 +4,7 @@ const componentDir = "dist/component";

 const typoCss = "typography.css";
 const formCss = "form.css";
+const primitivesCss = "primitives.css";
 const componentsCss = "components.css";

 const StyleMappings = {
@@ -30,6 +31,34 @@ const StyleMappings = {
    },
  ],
  components: [
+    {
+      component: "Box",
+      main: primitivesCss,
+    },
+    {
+      component: "HGrid",
+      main: primitivesCss,
+    },
+    {
+      component: "HStack",
+      main: primitivesCss,
+    },
+    {
+      component: "VStack",
+      main: primitivesCss,
+    },
+    {
+      component: "Spacer",
+      main: primitivesCss,
+    },
+    {
+      component: "Show",
+      main: primitivesCss,
+    },
+    {
+      component: "Hide",
+      main: primitivesCss,
+    },
    {
      component: "Accordion",
      main: "accordion.css",
@@ -99,10 +128,6 @@ const StyleMappings = {
      main: "help-text.css",
      dependencies: ["popover.css"],
    },
-    {
-      component: "HGrid",
-      main: "hgrid.css",
-    },
    { component: "Ingress", main: typoCss },
    {
      component: "InternalHeader",
@@ -138,18 +163,6 @@ const StyleMappings = {
    { component: "Select", main: formCss, dependencies: [typoCss] },
    { component: "Skeleton", main: "skeleton.css", dependencies: [] },
    { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
-    {
-      component: "HStack",
-      main: "stack.css",
-    },
-    {
-      component: "VStack",
-      main: "stack.css",
-    },
-    {
-      component: "Spacer",
-      main: "stack.css",
-    },
    { component: "Switch", main: formCss, dependencies: [typoCss] },
    { component: "Table", main: "table.css", dependencies: [typoCss] },
    { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
@@ -184,6 +197,7 @@ module.exports = {
  StyleMappings,
  typoCss,
  formCss,
+  primitivesCss,
  componentsCss,
  rootDir,
  globalDir,
@@ -16,6 +16,7 @@ const {
  rootDir,
  globalDir,
  componentDir,
+  primitivesCss,
 } = require("./_mappings.js");

 run();
@@ -123,6 +124,11 @@ function buildFragmentFiles() {
    output: `${componentDir}/${formCss}`,
  });

+  files.push({
+    input: "primitives/index.css",
+    output: `${componentDir}/${primitivesCss}`,
+  });
+
  return files;
 }

@@ -1,10 +1,17 @@
-[data-theme="dark"] .navds-copybutton,
-[data-theme="dark"].navds-copybutton {
-  --a-text-action: var(--a-blue-300);
-  --a-surface-hover: rgb(214 231 255 /0.13);
-  --a-icon-success: rgb(51 170 95 /1);
-  --a-text-subtle: rgb(231 240 254 /0.69);
-  --a-text-default: rgb(251 252 254 /0.96);
+[data-theme="dark"] {
+  --__ac-copybutton-action-text: var(--a-blue-300);
+  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
+  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
+  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
+  --__ac-copybutton-text: rgb(251 252 254 /0.96);
+}
+
+[data-theme="light"] {
+  --__ac-copybutton-action-text: initial;
+  --__ac-copybutton-bg-hover: initial;
+  --__ac-copybutton-icon-success: initial;
+  --__ac-copybutton-neutral-text: initial;
+  --__ac-copybutton-text: initial;
 }

 .navds-copybutton {
@@ -84,46 +91,46 @@

 /* Variant/action */
 .navds-copybutton--action {
-  color: var(--ac-copybutton-action-text, var(--a-text-action));
+  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
 }

 .navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
-  background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
+  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
+  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
 }

 .navds-copybutton--action:where(:disabled),
 .navds-copybutton--action:hover:where(:disabled) {
-  color: var(--ac-copybutton-action-text, var(--a-text-action));
+  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
  box-shadow: none;
 }

 .navds-copybutton--active.navds-copybutton--action {
-  color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
+  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
 }

 /* Variant/neutral */
 .navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
+  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
 }

 .navds-copybutton--neutral:hover {
-  color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
-  background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
+  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
+  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
 }

 .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
 .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
-  color: var(--ac-copybutton-neutral-text, var(--a-text-default));
+  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
  box-shadow: none;
 }

 .navds-copybutton--active.navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
+  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
 }

 .navds-copybutton__content {
@@ -2,6 +2,7 @@
  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
  padding: var(--a-spacing-5);
  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
+  border-radius: var(--a-border-radius-large);
 }

 .navds-error-summary--small {
@@ -1,5 +1,9 @@
 [data-theme="dark"] {
-  --ac-form-description: var(--a-text-on-inverted);
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
 }

 .navds-fieldset {
@@ -14,7 +18,7 @@
 }

 .navds-fieldset__description {
-  color: var(--ac-form-description, var(--a-text-subtle));
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }

 .navds-fieldset > .navds-fieldset__description:not(:empty) {
@@ -1,5 +1,9 @@
 [data-theme="dark"] {
-  --ac-form-description: var(--a-text-on-inverted);
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
 }

 .navds-form-field {
@@ -10,7 +14,7 @@

 .navds-form-field__description {
  margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--a-text-subtle));
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }

 .navds-form-field .navds-error-message,
@@ -1,9 +1,17 @@
 [data-theme="dark"] {
-  --ac-search-button-border: var(--a-border-on-inverted);
-  --ac-search-button-border-hover: var(--a-blue-200);
-  --ac-search-clear-icon: var(--a-white);
-  --ac-search-clear-icon-hover: var(--a-blue-200);
-  --ac-search-error-border: var(--a-red-300);
+  --__ac-search-button-border: var(--a-border-on-inverted);
+  --__ac-search-button-border-hover: var(--a-blue-200);
+  --__ac-search-clear-icon: var(--a-white);
+  --__ac-search-clear-icon-hover: var(--a-blue-200);
+  --__ac-search-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-search-button-border: initial;
+  --__ac-search-button-border-hover: initial;
+  --__ac-search-clear-icon: initial;
+  --__ac-search-clear-icon-hover: initial;
+  --__ac-search-error-border: initial;
 }

 .navds-search {
@@ -65,7 +73,7 @@
  position: absolute;
  right: 0.75rem;
  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--a-text-default));
+  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
  height: 32px;
  width: 32px;
  top: 50%;
@@ -87,7 +95,7 @@
 }

 .navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--a-text-action));
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
 }

 .navds-search__button-clear:focus-visible {
@@ -120,16 +128,17 @@
 }

 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
 }

 .navds-search__button-search.navds-button--secondary:hover {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
+      inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
  z-index: 1;
 }

@@ -138,11 +147,13 @@
 }

 .navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    var(--a-shadow-focus);
 }

 .navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    var(--a-shadow-focus);
 }

 .navds-search__button-search.navds-button--secondary:focus-visible:active {
@@ -151,11 +162,14 @@

@supports not selector(:focus-visible) {
  .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+      var(--a-shadow-focus);
  }

  .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
+        inset,
+      var(--a-shadow-focus);
  }

  .navds-search__button-search.navds-button--secondary:focus:active {
@@ -165,12 +179,13 @@

 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
-  border-color: var(--ac-search-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
+  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
 }

 .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    var(--a-shadow-focus);
 }

 /* Focus layering */
@@ -182,7 +197,8 @@

@supports not selector(:focus-visible) {
  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+      var(--a-shadow-focus);
  }

  .navds-search__input:focus,
@@ -1,21 +1,30 @@
 [data-theme="dark"] {
-  --ac-textfield-text: var(--a-text-on-inverted);
-  --ac-textfield-bg: var(--a-surface-inverted);
-  --ac-textfield-border: var(--a-border-on-inverted);
-  --ac-textfield-hover-border: var(--a-blue-200);
-  --ac-textfield-placeholder: var(--a-gray-500);
-  --ac-textfield-error-border: var(--a-red-300);
+  --__ac-textfield-text: var(--a-text-on-inverted);
+  --__ac-textfield-bg: var(--a-surface-inverted);
+  --__ac-textfield-border: var(--a-border-on-inverted);
+  --__ac-textfield-hover-border: var(--a-blue-200);
+  --__ac-textfield-placeholder: var(--a-gray-500);
+  --__ac-textfield-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textfield-text: initial;
+  --__ac-textfield-bg: initial;
+  --__ac-textfield-border: initial;
+  --__ac-textfield-hover-border: initial;
+  --__ac-textfield-placeholder: initial;
+  --__ac-textfield-error-border: initial;
 }

 .navds-text-field__input {
  appearance: none;
  padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--a-border-default));
+  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
  min-height: 3rem;
  width: 100%;
-  color: var(--ac-textfield-text, var(--a-text-default));
+  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
 }

 .navds-text-field__input[size] {
@@ -23,7 +32,7 @@
 }

 .navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--a-text-subtle));
+  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
 }

 .navds-form-field--small .navds-text-field__input {
@@ -32,7 +41,7 @@
 }

 .navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--a-border-action));
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
 }

 .navds-text-field__input:focus-visible {
@@ -51,8 +60,8 @@
  Error handling
 */
 .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
-  border-color: var(--ac-textfield-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
+  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }

 .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
@@ -67,8 +76,8 @@

 /* Disabled handling */
 .navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
-  border-color: var(--ac-textfield-border, var(--a-border-default));
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
  box-shadow: none;
  cursor: not-allowed;
 }
@@ -1,12 +1,23 @@
 [data-theme="dark"] {
-  --ac-textarea-text: var(--a-text-on-inverted);
-  --ac-textarea-bg: var(--a-transparent);
-  --ac-textarea-border: var(--a-border-on-inverted);
-  --ac-textarea-hover-border: var(--a-blue-200);
-  --ac-textarea-placeholder: var(--a-gray-500);
-  --ac-textarea-error-border: var(--a-red-300);
-  --ac-textarea-counter-text: var(--a-gray-300);
-  --ac-textarea-counter-error-text: var(--a-red-300);
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
 }

 .navds-textarea__wrapper {
@@ -17,13 +28,13 @@
 .navds-textarea__input {
  appearance: none;
  padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--a-border-default));
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
  resize: none;
  width: 100%;
  display: block;
-  color: var(--ac-textarea-text, var(--a-text-default));
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
 }

 .navds-textarea--counter {
@@ -31,11 +42,11 @@
 }

 .navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--a-text-subtle));
+  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
 }

 .navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--a-border-action));
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
 }

 .navds-textarea__input:focus-visible {
@@ -60,7 +71,7 @@

 .navds-textarea__counter {
  pointer-events: none;
-  color: var(--ac-textarea-counter-text, var(--a-text-subtle));
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
  font-style: italic;
  position: absolute;
  text-align: left;
@@ -70,7 +81,7 @@
 }

 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
 }

 .navds-textarea--resize .navds-textarea__input {
@@ -81,20 +92,20 @@
  Error handling
 */
 .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
-  border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }

@supports not selector(:focus-visible) {
  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
-    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
  }
 }

 .navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
  box-shadow: none;
  cursor: not-allowed;
 }
@@ -1,6 +1,7 @@
@charset "UTF-8";
@import "baseline/index.css";
@import "typography.css";
+@import "primitives/index.css";
@import "grid.css";
@import "accordion.css";
@import "alert.css";
@@ -14,7 +15,6 @@
@import "guide-panel.css";
@import "form/index.css";
@import "help-text.css";
-@import "hgrid.css";
@import "internalheader.css";
@import "link.css";
@import "loader.css";
@@ -30,7 +30,6 @@
@import "link-panel.css";
@import "read-more.css";
@import "skeleton.css";
-@import "stack.css";
@import "stepper.css";
@import "table.css";
@import "tabs.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.3.4",
+  "version": "5.5.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": "^5.3.4",
+    "@navikt/ds-tokens": "^5.5.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -0,0 +1,117 @@
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: initial;
+  --__ac-box-padding-md: initial;
+  --__ac-box-padding-lg: initial;
+  --__ac-box-padding-xl: initial;
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-block-sm: initial;
+  --__ac-box-padding-inline-sm: initial;
+  --__ac-box-padding-block-md: initial;
+  --__ac-box-padding-inline-md: initial;
+  --__ac-box-padding-block-lg: initial;
+  --__ac-box-padding-inline-lg: initial;
+  --__ac-box-padding-block-xl: initial;
+  --__ac-box-padding-inline-xl: initial;
+  --__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);
+  --__ac-box-background: initial;
+  --__ac-box-border-color: initial;
+  --__ac-box-shadow: initial;
+  --__ac-box-border-width: initial;
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: initial;
+  --__ac-box-border-radius-md: initial;
+  --__ac-box-border-radius-lg: initial;
+  --__ac-box-border-radius-xl: initial;
+  --__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);
+  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, var(--__ac-box-padding-xs));
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-md,
+      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-md,
+      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-md,
+      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
+    );
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-lg,
+      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-lg,
+      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-lg,
+      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-lg,
+      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+    );
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-xl,
+      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-xl,
+      var(
+        --__ac-box-padding-inline-lg,
+        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+      )
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-xl,
+      var(
+        --__ac-box-padding-block-lg,
+        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+      )
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-xl,
+      var(
+        --__ac-box-border-radius-lg,
+        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+      )
+    );
+  }
+}
@@ -0,0 +1,4 @@
+@import "box.css";
+@import "hgrid.css";
+@import "stack.css";
+@import "responsive.css";
@@ -0,0 +1,51 @@
+.navds-responsive {
+  display: none;
+}
+
+@media (min-width: 480px) {
+  .navds-responsive__above--sm {
+    display: revert;
+  }
+}
+
+@media (max-width: 479px) {
+  .navds-responsive__below--sm {
+    display: revert;
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-responsive__above--md {
+    display: revert;
+  }
+}
+
+@media (max-width: 767px) {
+  .navds-responsive__below--md {
+    display: revert;
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-responsive__above--lg {
+    display: revert;
+  }
+}
+
+@media (max-width: 1023px) {
+  .navds-responsive__below--lg {
+    display: revert;
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-responsive__above--xl {
+    display: revert;
+  }
+}
+
+@media (max-width: 1279px) {
+  .navds-responsive__below--xl {
+    display: revert;
+  }
+}
@@ -5,6 +5,10 @@
  pointer-events: none;
 }

+.navds-skeleton--inline {
+  display: inline-block;
+}
+
 .navds-skeleton--has-children {
  color: transparent;
 }
@@ -1,3 +1,13 @@
+[data-theme="dark"] {
+  --__ac-typo-error-text: var(--a-red-300);
+  --__ac-typo-text-subtle: var(--a-gray-300);
+}
+
+[data-theme="light"] {
+  --__ac-typo-error-text: initial;
+  --__ac-typo-text-subtle: initial;
+}
+
 /* Heading */
 .navds-heading {
  font-weight: var(--a-font-weight-bold);
@@ -202,13 +212,8 @@
  margin-bottom: var(--a-spacing-2);
 }

-[data-theme="dark"].navds-error-message,
-[data-theme="dark"] .navds-error-message {
-  --a-text-danger: var(--a-red-300);
-}
-
 .navds-error-message {
-  color: var(--ac-typo-error-text, var(--a-text-danger));
+  color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
 }

 .navds-typo--truncate {
@@ -247,10 +252,5 @@
 }

 .navds-typo--color-subtle {
-  color: var(--a-text-subtle);
-}
-
-[data-theme="dark"].navds-typo--color-subtle,
-[data-theme="dark"] .navds-typo--color-subtle {
-  --a-text-subtle: var(--a-gray-300);
+  color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
 }
@@ -1,5 +1,50 @@
 # @navikt/ds-react

+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+### Patch Changes
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+- Updated dependencies [[`83c9194a4`](https://github.com/navikt/aksel/commit/83c9194a480fd3d184f673815522f230ed5d77bb)]:
+  - @navikt/ds-tokens@5.5.0
+  - @navikt/aksel-icons@5.5.0
+
+## 5.4.1
+
+### Patch Changes
+
+- MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.4.1
+
+## 5.4.0
+
+### Minor Changes
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+### Patch Changes
+
+- Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.4.0
+
+## 5.3.5
+
+### Patch Changes
+
+- :bug: Popover: sjekk at det er et HTML-element som får fokus ([#2258](https://github.com/navikt/aksel/pull/2258))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.3.5
+
 ## 5.3.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.3.4",
+  "version": "5.5.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^5.3.4",
+    "@navikt/aksel-icons": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -63,8 +64,8 @@
    "rimraf": "3.0.2",
    "swr": "^1.1.2",
    "ts-jest": "^29.0.0",
-    "ts-node": "10.9.0",
-    "typescript": "^4.8.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6"
  },
  "peerDependencies": {
    "@types/react": "^17.0.30 || ^18.0.0",
@@ -1,7 +1,8 @@
 import cl from "clsx";
 import format from "date-fns/format";
 import isSameMonth from "date-fns/isSameMonth";
-import isSameYear from "date-fns/isSameYear";
+import compareAsc from "date-fns/compareAsc";
+import compareDesc from "date-fns/compareDesc";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
@@ -20,13 +21,13 @@ interface MonthType {
 const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {
  if (fromDate && toDate) {
    return (
-      (isSameMonth(month, fromDate) && isSameYear(month, fromDate)) ||
-      (isSameMonth(month, toDate) && isSameYear(month, toDate))
+      (compareAsc(month, fromDate) === -1 && !isSameMonth(month, fromDate)) ||
+      (compareDesc(month, toDate) === -1 && !isSameMonth(month, toDate))
    );
  } else if (fromDate) {
-    return isSameMonth(month, fromDate) && isSameYear(month, fromDate);
+    return compareAsc(month, fromDate) === -1 && !isSameMonth(month, fromDate);
  } else if (toDate) {
-    return isSameMonth(month, toDate) && isSameYear(month, toDate);
+    return compareDesc(month, toDate) === -1 && !isSameMonth(month, toDate);
  }
  return false;
 };
@@ -46,7 +46,7 @@ export const dropdownCaption = () => {
  return (
    <MonthPicker.Standalone
      dropdownCaption
-      fromDate={new Date("Jan 1 2019")}
+      fromDate={new Date("Feb 10 2019")}
      toDate={new Date("Sep 27 2032")}
    />
  );
@@ -8,14 +8,7 @@ import React, {
  useRef,
  useState,
 } from "react";
-import {
-  BodyShort,
-  ErrorMessage,
-  Label,
-  mergeRefs,
-  omit,
-  useEventListener,
-} from "../..";
+import { BodyShort, ErrorMessage, Label, mergeRefs, omit } from "../..";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";

@@ -135,7 +128,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(

    const searchRef = useRef<HTMLInputElement | null>(null);
    const mergedRef = useMemo(() => mergeRefs([searchRef, ref]), [ref]);
-    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);

    const [internalValue, setInternalValue] = useState(defaultValue ?? "");

@@ -156,27 +148,22 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
      [handleChange, onClear]
    );

-    useEventListener(
-      "keydown",
-      useCallback(
-        (e) => {
-          if (e.key === "Escape") {
-            e.preventDefault();
-            handleClear({ trigger: "Escape", event: e });
-          }
-        },
-        [handleClear]
-      ),
-      wrapperRef
-    );
-
    const handleClick = () => {
      onSearchClick?.(`${value ?? internalValue}`);
    };

    return (
      <div
-        ref={setWrapperRef}
+        onKeyDown={(e) => {
+          if (e.key !== "Escape") {
+            return;
+          }
+          searchRef.current?.value &&
+            searchRef.current?.value !== "" &&
+            e.preventDefault();
+
+          handleClear({ trigger: "Escape", event: e });
+        }}
        className={cl(
          className,
          "navds-form-field",
@@ -2,7 +2,7 @@ import * as React from "react";
 import { BodyLong, Grid, Cell, ContentContainer } from "../index";

 export default {
-  title: "ds-react/Grid",
+  title: "ds-react/Primitives/Grid",
  component: { Grid, Cell },
  parameters: {
    layout: "fullscreen",
@@ -32,6 +32,8 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
+export * from "./layout/responsive";
@@ -0,0 +1,384 @@
+import React, { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+import { BodyLong, Detail, Heading } from "../../typography";
+import { Box } from "./Box";
+import { HGrid, HStack, VStack } from "../..";
+import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+
+export default {
+  title: "ds-react/Primitives/Box",
+  component: Box,
+} satisfies Meta<typeof Box>;
+
+export const Default = {
+  render: () => (
+    <Box>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+        Proident pariatur proident pariatur magna consequat velit id commodo
+        quis sunt tempor ullamco aliquip pariatur.
+      </BodyLong>
+    </Box>
+  ),
+};
+
+const Card = ({
+  background,
+  borderRadius = "xlarge",
+  children,
+}: {
+  background?: BackgroundToken;
+  borderRadius?: BorderRadiiToken;
+  children: ReactNode;
+}) => (
+  <Box
+    padding="4"
+    background={background}
+    borderColor="border-subtle"
+    borderRadius={borderRadius}
+    shadow="xsmall"
+  >
+    <div style={{ width: "20rem" }}>{children}</div>
+  </Box>
+);
+
+export const AsCard = {
+  render: () => {
+    return (
+      <HStack gap="4" justify="center">
+        <Card>
+          <h1>Card one</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+        <Card>
+          <h1>Card two</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+        <Card>
+          <h1>Card three</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+      </HStack>
+    );
+  },
+};
+
+export const ThemingDemo = {
+  render: () => {
+    const LinkCard = () => {
+      return (
+        <>
+          <style>
+            {`
+            .link-card {
+              color: var(--navds-color-text-primary);
+              text-decoration: none;
+            }
+            .link-card:hover {
+              border-color: var(--a-border-action);
+              box-shadow: var(--a-shadow-small);
+            }
+            .link-card:hover .navds-heading {
+              color: var(--a-text-action);
+              text-decoration: underline;
+            }
+            .link-card:hover .link-card__chevron,
+            .link-card:focus-within .link-card__chevron {
+              transform: translateX(4px);
+            }
+            .link-card__chevron {
+              flex-shrink: 0;
+              font-size: 1.5rem;
+              transition: transform 200ms;
+            }
+          `}
+          </style>
+          <Box
+            as="a"
+            href="#"
+            className="link-card"
+            borderRadius="small"
+            borderColor="border-default"
+            padding="4"
+            onClick={() => alert("Clicked!")}
+          >
+            <HStack gap="4" align="center">
+              <VStack gap="2">
+                <Heading size="medium">
+                  LinkCard som bruker Box, HStack og VStack
+                </Heading>
+                <BodyLong>This truly is inside a box!</BodyLong>
+              </VStack>
+              <ChevronRightIcon fontSize={24} className="link-card__chevron" />
+            </HStack>
+          </Box>
+        </>
+      );
+    };
+
+    const ChatBubble = () => {
+      return (
+        <>
+          <Box
+            background="surface-neutral-subtle"
+            shadow="xsmall"
+            padding="4"
+            borderRadius="xlarge xlarge xlarge 0"
+          >
+            <VStack gap="2">
+              <Detail>BOX • 01.01.21 14:00</Detail>
+              <BodyLong>
+                Hei! Dette er en chatbobble som bruker Box som base!
+              </BodyLong>
+            </VStack>
+          </Box>
+        </>
+      );
+    };
+
+    const PricePill = () => {
+      return (
+        <>
+          <style>
+            {`
+              .old-price {
+                text-decoration: line-through;
+              }
+            `}
+          </style>
+          <HStack>
+            <Box
+              background="surface-success-subtle"
+              shadow="xsmall"
+              padding="4"
+              borderRadius="full 0 0 full"
+            >
+              <VStack align="center">
+                <Detail>Episk ny pris</Detail>
+                <Heading size="medium">889.99 kr</Heading>
+              </VStack>
+            </Box>
+            <Box
+              background="surface-danger-subtle"
+              shadow="xsmall"
+              padding="4"
+              borderRadius="0 full full 0"
+            >
+              <VStack align="center">
+                <Detail>Førpris</Detail>
+                <Heading className="old-price" size="medium">
+                  399.99 kr
+                </Heading>
+              </VStack>
+            </Box>
+          </HStack>
+        </>
+      );
+    };
+
+    return (
+      <VStack gap="8">
+        <Card>Dette er et Card som bruker Box som base</Card>
+        <LinkCard />
+        <ChatBubble />
+        <PricePill />
+      </VStack>
+    );
+  },
+};
+
+export const PaddingBreakpoints = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+
+export const PaddingBreakpointsInherit1 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2" }}
+        paddingInline={{ md: "24 0" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+export const PaddingBreakpointsInherit2 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3" }}
+        paddingInline={{ sm: "4 0", md: "24 0" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+
+export const Padding = {
+  render: () => (
+    <>
+      <style>
+        {`
+          .navds-box {
+            width: fit-content;
+          }
+        `}
+      </style>
+      <VStack align="center">
+        <Box padding="20" borderColor="border-default">
+          <BodyLong>Padding all around</BodyLong>
+        </Box>
+        <Box padding="1" paddingBlock="20 0" borderColor="border-default">
+          <BodyLong>Padding to the North</BodyLong>
+        </Box>
+        <Box padding="1" paddingInline="0 20" borderColor="border-default">
+          <BodyLong>Padding to the East</BodyLong>
+        </Box>
+        <Box padding="1" paddingBlock="0 20" borderColor="border-default">
+          <BodyLong>Padding to the South</BodyLong>
+        </Box>
+        <Box padding="1" paddingInline="20 0" borderColor="border-default">
+          <BodyLong>Padding to the West</BodyLong>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const WithHGrid = () => {
+  return (
+    <Box background="bg-subtle" padding="10">
+      <HGrid
+        gap="6"
+        columns={{ xs: "repeat(auto-fit, minmax(10rem, 1fr))", md: 4 }}
+      >
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+      </HGrid>
+    </Box>
+  );
+};
+
+export const BorderWidth = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="1 2 3 4"
+        borderColor="border-strong"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="5 2 4 1"
+        borderColor="border-strong"
+        borderRadius="large"
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
+
+export const BorderRadius = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+        borderRadius="small medium large xlarge"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+        borderRadius={{
+          xs: "small medium large xlarge",
+          md: "medium small large full",
+          lg: "xlarge large",
+        }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
+
+export const PaddingDemo = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="0"
+        paddingInline={{ xs: "20", lg: "10" }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
@@ -0,0 +1,148 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { BorderRadiiToken } from "../utilities/types";
+import {
+  SpaceDelimitedAttribute,
+  ResponsiveProp,
+  SpacingScale,
+  getResponsiveProps,
+} from "../utilities/css";
+import {
+  BackgroundToken,
+  BorderColorToken,
+  ShadowToken,
+} from "../utilities/types";
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Background color. Accepts a color token. */
+  background?: BackgroundToken;
+  /** Border color. Accepts a color token. */
+  borderColor?: BorderColorToken;
+  /** Border radius. Accepts a radius token, 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>>;
+  /**
+   * Border-width. 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">;
+  /** Spacing around children. Accepts a spacing token 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 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 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;
+}
+
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
+ * @see 🏷️ {@link BoxProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
+  (
+    {
+      as: Component = "div",
+      background,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      className,
+      padding,
+      paddingInline,
+      paddingBlock,
+      shadow,
+      style: _style,
+      ...rest
+    },
+    ref
+  ) => {
+    const style: React.CSSProperties = {
+      ..._style,
+      "--__ac-box-background": background
+        ? `var(--a-${background})`
+        : undefined,
+      "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined,
+      "--__ac-box-border-color": borderColor
+        ? `var(--a-${borderColor})`
+        : undefined,
+      "--__ac-box-border-width": borderWidth
+        ? borderWidth
+            .split(" ")
+            .map((x) => `${x}px`)
+            .join(" ")
+        : undefined,
+      ...getResponsiveProps(
+        "box",
+        "border-radius",
+        "border-radius",
+        borderRadius,
+        ["0"]
+      ),
+      ...getResponsiveProps("box", "padding", "spacing", padding),
+      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
+      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
+    };
+
+    return (
+      <Component
+        {...rest}
+        className={cl("navds-box", className)}
+        ref={ref}
+        style={style}
+      />
+    );
+  }
+);
@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";
@@ -34,7 +34,7 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
 /**
 * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
 *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
 * @see 🏷️ {@link HGridProps}
 *
 * @example
@@ -9,7 +9,7 @@ const columnsVariants = {
 };

 export default {
-  title: "ds-react/HGrid",
+  title: "ds-react/Primitives/HGrid",
  component: HGrid,
  parameters: {
    layout: "fullscreen",
@@ -0,0 +1,96 @@
+import cl from "clsx";
+import React, { forwardRef, HTMLAttributes } from "react";
+import { BreakpointsAlias } from "../utilities/css";
+
+export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * @example
+   * above='md'
+   */
+  above?: Exclude<BreakpointsAlias, "xs">;
+  /**
+   * @example
+   * below='md'
+   */
+  below?: Exclude<BreakpointsAlias, "xs">;
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: "div" | "span";
+}
+
+const Responsive = forwardRef<
+  HTMLDivElement,
+  ResponsiveProps & { variant: "show" | "hide" }
+>(
+  (
+    { as: Component = "div", className, above, below, variant, ...rest },
+    ref
+  ) => {
+    const aboveProp = variant === "show" ? above : below;
+    const belowProp = variant === "show" ? below : above;
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-responsive", className, {
+          [`navds-responsive__above--${aboveProp}`]: aboveProp,
+          [`navds-responsive__below--${belowProp}`]: belowProp,
+        })}
+      />
+    );
+  }
+);
+
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide below="md">
+ *      // Only visible above "md"
+ *   </Hide>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide above="md">
+ *      // Only visible below "md"
+ *   </Hide>
+ * </HGrid>
+ */
+export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
+  (props, ref) => <Responsive {...props} ref={ref} variant="hide" />
+);
+
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show below="md">
+ *      // Only visible below "md"
+ *   </Show>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show above="md">
+ *      // Only visible above "md"
+ *   </Show>
+ * </HGrid>
+ */
+export const Show = forwardRef<HTMLDivElement, ResponsiveProps>(
+  (props, ref) => <Responsive {...props} ref={ref} variant="show" />
+);
@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { Hide } from ".";
+import { Tag } from "../../tag";
+import { VStack } from "../stack";
+
+export default {
+  title: "ds-react/Primitives/Hide",
+  component: Hide,
+} satisfies Meta<typeof Hide>;
+
+export const Default = {
+  render: () => (
+    <VStack gap="12">
+      <VStack gap="2" align="center">
+        <Hide above="xl">
+          <Tag variant="neutral">Visible below xl</Tag>
+        </Hide>
+        <Hide above="lg">
+          <Tag variant="neutral">Visible below lg</Tag>
+        </Hide>
+        <Hide above="md">
+          <Tag variant="neutral">Visible below md</Tag>
+        </Hide>
+        <Hide above="sm">
+          <Tag variant="neutral">Visible below sm</Tag>
+        </Hide>
+      </VStack>
+      <VStack gap="2" align="center">
+        <Hide below="xl">
+          <Tag variant="alt3">Visible above xl</Tag>
+        </Hide>
+        <Hide below="lg">
+          <Tag variant="alt3">Visible above lg</Tag>
+        </Hide>
+        <Hide below="md">
+          <Tag variant="alt3">Visible above md</Tag>
+        </Hide>
+        <Hide below="sm">
+          <Tag variant="alt3">Visible above sm</Tag>
+        </Hide>
+      </VStack>
+    </VStack>
+  ),
+};
@@ -0,0 +1 @@
+export { Show, Hide, type ResponsiveProps } from "./Responsive";
@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { Show } from ".";
+import { Tag } from "../../tag";
+import { VStack } from "../stack";
+
+export default {
+  title: "ds-react/Primitives/Show",
+  component: Show,
+} satisfies Meta<typeof Show>;
+
+export const Default = {
+  render: () => (
+    <VStack gap="12">
+      <VStack gap="2" align="center">
+        <Show above="xl">
+          <Tag variant="neutral">Visible above xl</Tag>
+        </Show>
+        <Show above="lg">
+          <Tag variant="neutral">Visible above lg</Tag>
+        </Show>
+        <Show above="md">
+          <Tag variant="neutral">Visible above md</Tag>
+        </Show>
+        <Show above="sm">
+          <Tag variant="neutral">Visible above sm</Tag>
+        </Show>
+      </VStack>
+      <VStack gap="2" align="center">
+        <Show below="xl">
+          <Tag variant="alt3">Visible below xl</Tag>
+        </Show>
+        <Show below="lg">
+          <Tag variant="alt3">Visible below lg</Tag>
+        </Show>
+        <Show below="md">
+          <Tag variant="alt3">Visible below md</Tag>
+        </Show>
+        <Show below="sm">
+          <Tag variant="alt3">Visible below sm</Tag>
+        </Show>
+      </VStack>
+    </VStack>
+  ),
+};
@@ -7,7 +7,7 @@ export type HStackProps = Omit<StackProps, "direction">;
 /**
 * Layout-primitive for horizontal flexbox
 *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
 * @see 🏷️ {@link HStackProps}
 * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
 *
@@ -3,7 +3,7 @@ import React from "react";
 /**
 * Layout-primitive for auto-spacing between elements
 *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
 *
 * @example
 * <HStack gap="8">
@@ -7,7 +7,7 @@ export type VStackProps = Omit<StackProps, "direction" | "wrap">;
 /**
 * Layout-primitive for vetical flexbox
 *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
 * @see 🏷️ {@link VStackProps}
 * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
 *
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react";
 import { HStack, VStack, Spacer } from ".";

 export default {
-  title: "ds-react/Stack",
+  title: "ds-react/Primitives/Stack",
  component: HStack,
 } satisfies Meta<typeof HStack>;

@@ -1,4 +1,5 @@
 export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
 export type SpacingScale =
  | "0"
  | "05"
@@ -21,43 +22,23 @@ export type SpacingScale =
  | "24"
  | "32";

-type ResponsivePropConfig<T = string> = {
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+
+type FixedResponsiveT<T> = {
  // eslint-disable-next-line no-unused-vars
  [Breakpoint in BreakpointsAlias]?: T;
 };

-export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
-
-export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
-
-export function getResponsiveProps<T = string>(
-  componentName: string,
-  componentProp: string,
-  tokenSubgroup: string,
-  responsiveProp?: ResponsiveProp<T>
-) {
-  if (!responsiveProp) {
-    return {};
-  }
-
-  if (typeof responsiveProp === "string") {
-    return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
-    };
-  }
-
-  return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
-      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
-    ])
-  );
-}
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;

 export function getResponsiveValue<T = string>(
  componentName: string,
  componentProp: string,
-  responsiveProp?: ResponsiveValue<T>
+  responsiveProp?: ResponsiveProp<T>
 ) {
  if (!responsiveProp) {
    return {};
@@ -76,3 +57,40 @@ export function getResponsiveValue<T = string>(
    ])
  );
 }
+
+export function getResponsiveProps<T extends string>(
+  componentName: string,
+  componentProp: string,
+  tokenSubgroup: string,
+  responsiveProp?: ResponsiveProp<T>,
+  tokenExceptions: string[] = []
+) {
+  if (!responsiveProp) {
+    return {};
+  }
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
+        .split(" ")
+        .map((x) =>
+          tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+        )
+        .join(" "),
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
+      return [
+        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        aliasOrScale
+          .split(" ")
+          .map((x) =>
+            tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+          )
+          .join(" "),
+      ];
+    })
+  );
+}
@@ -0,0 +1,14 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
+import borderColors from "@navikt/ds-tokens/src/colors-border.json";
+import borderRadii from "@navikt/ds-tokens/src/border.json";
+import shadows from "@navikt/ds-tokens/src/shadow.json";
+
+export type BackgroundToken =
+  | keyof typeof bgColors.a
+  | keyof typeof surfaceColors.a;
+export type BorderColorToken = keyof typeof borderColors.a;
+export type BorderRadiiToken =
+  | keyof (typeof borderRadii.a)["border-radius"]
+  | "0";
+export type ShadowToken = keyof typeof shadows.a.shadow;
@@ -192,6 +192,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(

    const component = (
      <dialog
+        {...rest}
        ref={mergedRef}
        className={cl("navds-modal", className, {
          "navds-modal--polyfilled": needPolyfill,
@@ -213,7 +214,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
            ? ariaLabelId
            : ariaLabelledby
        }
-        {...rest}
      >
        <ModalContext.Provider
          value={{
@@ -16,7 +16,7 @@ export const WithUseRef = () => {
  const ref2 = useRef<HTMLDialogElement>(null);

  return (
-    <>
+    <div>
      <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
      <Modal
        open={ref.current ? undefined : true /* initially open */}
@@ -80,7 +80,7 @@ export const WithUseRef = () => {
          <Button variant="tertiary">Tertiary</Button>
        </Modal.Footer>
      </Modal>
-    </>
+    </div>
  );
 };
 WithUseRef.storyName = "With useRef";
@@ -184,6 +184,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      useCallback(
        (e: FocusEvent) => {
          if (
+            e.target instanceof HTMLElement &&
            ![anchorEl, refs?.floating?.current].some((element) =>
              element?.contains(e.target as Node)
            )
@@ -57,6 +57,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
            "navds-skeleton--has-children": Boolean(children),
            "navds-skeleton--no-height": !height,
            "navds-skeleton--no-width": !width,
+            "navds-skeleton--inline": As === "span",
          }
        )}
        style={{ ...style, width, height }}
@@ -121,9 +121,10 @@ export const InlineText = {
  render: () => (
    <BodyLong>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-      voluptas sint dolore <Skeleton as="span">omnis quia consequatur</Skeleton>{" "}
-      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis
-      rerum. Nulla, magnam? Saepe, eveniet?
+      voluptas sint dolore <Skeleton width="40px" as="span" variant="text" />{" "}
+      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis{" "}
+      <Skeleton as="span">test text</Skeleton> rerum. Nulla, magnam? Saepe,
+      eveniet?
    </BodyLong>
  ),
 };
@@ -85,7 +85,9 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({

  if (typeof initHeight === "number") {
    // Reset negative height to 0
-    initHeight = height < 0 ? 0 : height;
+    if (typeof height !== "string") {
+      initHeight = height < 0 ? 0 : height;
+    }
    initOverflow = "hidden";
  } else if (isPercentage(initHeight)) {
    // If value is string "0%" make sure we convert it to number 0
@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind

+## 5.5.0
+
+## 5.4.1
+
+## 5.4.0
+
+## 5.3.5
+
 ## 5.3.4

 ## 5.3.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.3.4",
+  "version": "5.5.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,14 +22,14 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.3.4",
+    "@navikt/ds-tokens": "^5.5.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
    "lodash": "^4.17.21",
    "ts-jest": "^29.0.0",
-    "ts-node": "10.9.0",
-    "typescript": "^4.8.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6"
  },
  "publishConfig": {
    "access": "public",
@@ -1,5 +1,21 @@
 # @navikt/ds-tokens

+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+## 5.4.1
+
+## 5.4.0
+
+### Patch Changes
+
+- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
+
+## 5.3.5
+
 ## 5.3.4

 ## 5.3.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.3.4",
+  "version": "5.5.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -36,8 +36,8 @@
    "nodemon": "^3.0.1",
    "style-dictionary": "^3.0.2",
    "ts-jest": "^29.0.0",
-    "ts-node": "10.9.0",
-    "typescript": "^4.8.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6"
  },
  "publishConfig": {
    "access": "public",
@@ -1,13 +1,11 @@
 {
  "a": {
-    "border": {
-      "radius": {
-        "small": { "value": "2px" },
-        "medium": { "value": "4px" },
-        "large": { "value": "8px" },
-        "xlarge": { "value": "12px" },
-        "full": { "value": "9999px" }
-      }
+    "border-radius": {
+      "small": { "value": "2px" },
+      "medium": { "value": "4px" },
+      "large": { "value": "8px" },
+      "xlarge": { "value": "12px" },
+      "full": { "value": "9999px" }
    }
  }
 }
@@ -0,0 +1,10 @@
+{
+  "a": {
+    "bg-default": {
+      "value": "{a.white.value}"
+    },
+    "bg-subtle": {
+      "value": "{a.gray.100.value}"
+    }
+  }
+}
@@ -0,0 +1,7 @@
+{
+  "a": {
+    "border-subtle-hover": {
+      "value": "{a.grayalpha.400.value}"
+    }
+  }
+}
@@ -0,0 +1,58 @@
+{
+  "a": {
+    "border-default": {
+      "value": "{a.grayalpha.500.value}"
+    },
+    "border-strong": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "border-divider": {
+      "value": "{a.grayalpha.300.value}"
+    },
+    "border-subtle": {
+      "value": "{a.grayalpha.300.value}"
+    },
+    "border-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "border-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "border-selected": {
+      "value": "{a.blue.500.value}"
+    },
+    "border-success": {
+      "value": "{a.green.500.value}"
+    },
+    "border-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "border-warning": {
+      "value": "{a.orange.600.value}"
+    },
+    "border-info": {
+      "value": "{a.lightblue.700.value}"
+    },
+    "border-focus-on-inverted": {
+      "value": "{a.blue.200.value}"
+    },
+    "border-focus": {
+      "value": "{a.blue.800.value}"
+    },
+    "border-on-inverted": {
+      "value": "{a.gray.200.value}"
+    },
+    "border-on-inverted-subtle": {
+      "value": "{a.gray.700.value}"
+    },
+    "border-alt-1": {
+      "value": "{a.purple.400.value}"
+    },
+    "border-alt-2": {
+      "value": "{a.limegreen.700.value}"
+    },
+    "border-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    }
+  }
+}
@@ -0,0 +1,61 @@
+{
+  "a": {
+    "icon-default": {
+      "value": "{a.gray.900.value}"
+    },
+    "icon-subtle": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "icon-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "icon-action-on-action-subtle": {
+      "value": "{a.blue.600.value}"
+    },
+    "icon-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "icon-success": {
+      "value": "{a.green.500.value}"
+    },
+    "icon-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "icon-warning": {
+      "value": "{a.orange.600.value}"
+    },
+    "icon-info": {
+      "value": "{a.lightblue.800.value}"
+    },
+    "icon-alt-1": {
+      "value": "{a.purple.500.value}"
+    },
+    "icon-alt-2": {
+      "value": "{a.limegreen.700.value}"
+    },
+    "icon-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    },
+    "icon-on-neutral": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-inverted": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-action": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-success": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-danger": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-warning": {
+      "value": "{a.gray.900.value}"
+    },
+    "icon-on-info": {
+      "value": "{a.gray.900.value}"
+    }
+  }
+}
@@ -0,0 +1,58 @@
+{
+  "a": {
+    "surface-hover": {
+      "value": "{a.grayalpha.100.value}"
+    },
+    "surface-active": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-inverted-hover": {
+      "value": "{a.gray.800.value}"
+    },
+    "surface-inverted-active": {
+      "value": "{a.gray.700.value}"
+    },
+    "surface-action-subtle-hover": {
+      "value": "{a.blue.100.value}"
+    },
+    "surface-action-hover": {
+      "value": "{a.blue.600.value}"
+    },
+    "surface-action-active": {
+      "value": "{a.blue.700.value}"
+    },
+    "surface-action-selected-hover": {
+      "value": "{a.blue.800.value}"
+    },
+    "surface-neutral-subtle-hover": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-neutral-active": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-neutral-hover": {
+      "value": "{a.gray.800.value}"
+    },
+    "surface-success-subtle-hover": {
+      "value": "{a.green.200.value}"
+    },
+    "surface-success-hover": {
+      "value": "{a.green.600.value}"
+    },
+    "surface-danger-subtle-hover": {
+      "value": "{a.red.200.value}"
+    },
+    "surface-danger-hover": {
+      "value": "{a.red.600.value}"
+    },
+    "surface-danger-active": {
+      "value": "{a.red.700.value}"
+    },
+    "surface-warning-subtle-hover": {
+      "value": "{a.orange.200.value}"
+    },
+    "surface-info-subtle-hover": {
+      "value": "{a.lightblue.200.value}"
+    }
+  }
+}
@@ -0,0 +1,109 @@
+{
+  "a": {
+    "surface-default": {
+      "value": "{a.white.value}"
+    },
+    "surface-selected": {
+      "value": "{a.blue.50.value}"
+    },
+    "surface-subtle": {
+      "value": "{a.gray.50.value}"
+    },
+    "surface-transparent": {
+      "value": "{a.transparent.value}"
+    },
+    "surface-backdrop": {
+      "value": "{a.grayalpha.500.value}"
+    },
+    "surface-inverted": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-action-subtle": {
+      "value": "{a.blue.50.value}"
+    },
+    "surface-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "surface-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "surface-neutral-subtle": {
+      "value": "{a.grayalpha.100.value}"
+    },
+    "surface-neutral-moderate": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-neutral-selected": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-neutral": {
+      "value": "{a.gray.700.value}"
+    },
+    "surface-success-subtle": {
+      "value": "{a.green.100.value}"
+    },
+    "surface-success-moderate": {
+      "value": "{a.green.200.value}"
+    },
+    "surface-success": {
+      "value": "{a.green.500.value}"
+    },
+    "surface-danger-subtle": {
+      "value": "{a.red.100.value}"
+    },
+    "surface-danger-moderate": {
+      "value": "{a.red.200.value}"
+    },
+    "surface-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "surface-warning-subtle": {
+      "value": "{a.orange.100.value}"
+    },
+    "surface-warning-moderate": {
+      "value": "{a.orange.200.value}"
+    },
+    "surface-warning": {
+      "value": "{a.orange.500.value}"
+    },
+    "surface-info-subtle": {
+      "value": "{a.lightblue.100.value}"
+    },
+    "surface-info-moderate": {
+      "value": "{a.lightblue.200.value}"
+    },
+    "surface-info": {
+      "value": "{a.lightblue.500.value}"
+    },
+    "surface-alt-1-subtle": {
+      "value": "{a.purple.100.value}"
+    },
+    "surface-alt-1-moderate": {
+      "value": "{a.purple.200.value}"
+    },
+    "surface-alt-1": {
+      "value": "{a.purple.400.value}"
+    },
+    "surface-alt-2-subtle": {
+      "value": "{a.limegreen.100.value}"
+    },
+    "surface-alt-2-moderate": {
+      "value": "{a.limegreen.200.value}"
+    },
+    "surface-alt-2": {
+      "value": "{a.limegreen.400.value}"
+    },
+    "surface-alt-3-subtle": {
+      "value": "{a.deepblue.100.value}"
+    },
+    "surface-alt-3-moderate": {
+      "value": "{a.deepblue.200.value}"
+    },
+    "surface-alt-3-strong": {
+      "value": "{a.deepblue.800.value}"
+    },
+    "surface-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    }
+  }
+}
@@ -0,0 +1,55 @@
+{
+  "a": {
+    "text-default": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-subtle": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "text-visited": {
+      "value": "{a.purple.500.value}"
+    },
+    "text-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "text-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "text-action-on-action-subtle": {
+      "value": "{a.blue.600.value}"
+    },
+    "text-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "text-on-inverted": {
+      "value": "{a.white.value}"
+    },
+    "text-on-neutral": {
+      "value": "{a.white.value}"
+    },
+    "text-on-action": {
+      "value": "{a.white.value}"
+    },
+    "text-on-success": {
+      "value": "{a.white.value}"
+    },
+    "text-on-danger": {
+      "value": "{a.white.value}"
+    },
+    "text-on-warning": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-info": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-alt-1": {
+      "value": "{a.white.value}"
+    },
+    "text-on-alt-2": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-alt-3": {
+      "value": "{a.white.value}"
+    }
+  }
+}
@@ -1,346 +0,0 @@
-{
-  "a": {
-    "text": {
-      "default": {
-        "value": "{a.gray.900.value}"
-      },
-      "subtle": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "visited": {
-        "value": "{a.purple.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "action": {
-        "selected": {
-          "value": "{a.blue.700.value}"
-        },
-        "on": {
-          "action": {
-            "subtle": {
-              "value": "{a.blue.600.value}"
-            }
-          }
-        },
-        "@": {
-          "value": "{a.blue.500.value}"
-        }
-      },
-      "on": {
-        "inverted": {
-          "value": "{a.white.value}"
-        },
-        "neutral": {
-          "value": "{a.white.value}"
-        },
-        "action": {
-          "value": "{a.white.value}"
-        },
-        "success": {
-          "value": "{a.white.value}"
-        },
-        "danger": {
-          "value": "{a.white.value}"
-        },
-        "warning": {
-          "value": "{a.gray.900.value}"
-        },
-        "info": {
-          "value": "{a.gray.900.value}"
-        },
-        "alt1": {
-          "value": "{a.white.value}"
-        },
-        "alt2": {
-          "value": "{a.gray.900.value}"
-        },
-        "alt3": {
-          "value": "{a.white.value}"
-        }
-      }
-    },
-    "bg": {
-      "default": {
-        "value": "{a.white.value}"
-      },
-      "subtle": {
-        "value": "{a.gray.100.value}"
-      }
-    },
-    "surface": {
-      "default": {
-        "value": "{a.white.value}"
-      },
-      "hover": {
-        "value": "{a.grayalpha.100.value}"
-      },
-      "active": {
-        "value": "{a.grayalpha.200.value}"
-      },
-      "selected": {
-        "value": "{a.blue.50.value}"
-      },
-      "subtle": {
-        "value": "{a.gray.50.value}"
-      },
-      "transparent": {
-        "value": "{a.transparent.value}"
-      },
-      "backdrop": {
-        "value": "{a.grayalpha.500.value}"
-      },
-      "inverted": {
-        "hover": {
-          "value": "{a.gray.800.value}"
-        },
-        "active": {
-          "value": "{a.gray.700.value}"
-        },
-        "@": {
-          "value": "{a.gray.900.value}"
-        }
-      },
-      "action": {
-        "subtle": {
-          "hover": {
-            "value": "{a.blue.100.value}"
-          },
-          "@": {
-            "value": "{a.blue.50.value}"
-          }
-        },
-        "hover": {
-          "value": "{a.blue.600.value}"
-        },
-        "active": {
-          "value": "{a.blue.700.value}"
-        },
-        "selected": {
-          "hover": {
-            "value": "{a.blue.800.value}"
-          },
-          "@": { "value": "{a.blue.700.value}" }
-        },
-        "@": {
-          "value": "{a.blue.500.value}"
-        }
-      },
-
-      "neutral": {
-        "subtle": {
-          "hover": {
-            "value": "{a.grayalpha.200.value}"
-          },
-          "@": {
-            "value": "{a.grayalpha.100.value}"
-          }
-        },
-        "moderate": {
-          "value": "{a.grayalpha.200.value}"
-        },
-        "hover": {
-          "value": "{a.gray.800.value}"
-        },
-        "selected": {
-          "value": "{a.gray.900.value}"
-        },
-        "active": {
-          "value": "{a.gray.900.value}"
-        },
-        "@": {
-          "value": "{a.gray.700.value}"
-        }
-      },
-
-      "success": {
-        "subtle": {
-          "hover": { "value": "{a.green.200.value}" },
-          "@": { "value": "{a.green.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.green.200.value}"
-        },
-        "@": { "value": "{a.green.500.value}" },
-        "hover": { "value": "{a.green.600.value}" }
-      },
-
-      "danger": {
-        "subtle": {
-          "hover": { "value": "{a.red.200.value}" },
-          "@": { "value": "{a.red.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.red.200.value}"
-        },
-        "hover": {
-          "value": "{a.red.600.value}"
-        },
-        "active": {
-          "value": "{a.red.700.value}"
-        },
-        "@": { "value": "{a.red.500.value}" }
-      },
-
-      "warning": {
-        "subtle": {
-          "hover": { "value": "{a.orange.200.value}" },
-          "@": { "value": "{a.orange.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.orange.200.value}"
-        },
-        "@": { "value": "{a.orange.500.value}" }
-      },
-
-      "info": {
-        "subtle": {
-          "hover": { "value": "{a.lightblue.200.value}" },
-          "@": { "value": "{a.lightblue.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.lightblue.200.value}"
-        },
-        "@": { "value": "{a.lightblue.500.value}" }
-      },
-
-      "alt1": {
-        "subtle": { "value": "{a.purple.100.value}" },
-        "moderate": { "value": "{a.purple.200.value}" },
-        "@": { "value": "{a.purple.400.value}" }
-      },
-      "alt2": {
-        "subtle": { "value": "{a.limegreen.100.value}" },
-        "moderate": { "value": "{a.limegreen.200.value}" },
-        "@": { "value": "{a.limegreen.400.value}" }
-      },
-      "alt3": {
-        "subtle": { "value": "{a.deepblue.100.value}" },
-        "moderate": { "value": "{a.deepblue.200.value}" },
-        "strong": { "value": "{a.deepblue.800.value}" },
-        "@": { "value": "{a.deepblue.500.value}" }
-      }
-    },
-    "border": {
-      "default": {
-        "value": "{a.grayalpha.500.value}"
-      },
-      "strong": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "divider": {
-        "value": "{a.grayalpha.300.value}"
-      },
-      "subtle": {
-        "hover": { "value": "{a.grayalpha.400.value}" },
-        "@": { "value": "{a.grayalpha.300.value}" }
-      },
-      "action": {
-        "selected": { "value": "{a.blue.700.value}" },
-        "@": { "value": "{a.blue.500.value}" }
-      },
-      "selected": {
-        "value": "{a.blue.500.value}"
-      },
-      "success": {
-        "value": "{a.green.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "warning": {
-        "value": "{a.orange.600.value}"
-      },
-      "info": {
-        "value": "{a.lightblue.700.value}"
-      },
-      "focus": {
-        "on": {
-          "inverted": {
-            "value": "{a.blue.200.value}"
-          }
-        },
-        "@": { "value": "{a.blue.800.value}" }
-      },
-      "on": {
-        "inverted": {
-          "@": { "value": "{a.gray.200.value}" },
-          "subtle": { "value": "{a.gray.700.value}" }
-        }
-      },
-      "alt1": {
-        "value": "{a.purple.400.value}"
-      },
-      "alt2": {
-        "value": "{a.limegreen.700.value}"
-      },
-      "alt3": {
-        "value": "{a.deepblue.500.value}"
-      }
-    },
-    "icon": {
-      "default": {
-        "value": "{a.gray.900.value}"
-      },
-      "subtle": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "action": {
-        "selected": { "value": "{a.blue.700.value}" },
-        "on": {
-          "action": {
-            "subtle": {
-              "value": "{a.blue.600.value}"
-            }
-          }
-        },
-        "@": { "value": "{a.blue.500.value}" }
-      },
-      "success": {
-        "value": "{a.green.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "warning": {
-        "value": "{a.orange.600.value}"
-      },
-      "info": {
-        "value": "{a.lightblue.800.value}"
-      },
-      "alt1": {
-        "value": "{a.purple.500.value}"
-      },
-      "alt2": {
-        "value": "{a.limegreen.700.value}"
-      },
-      "alt3": {
-        "value": "{a.deepblue.500.value}"
-      },
-      "on": {
-        "neutral": {
-          "value": "{a.white.value}"
-        },
-        "inverted": {
-          "value": "{a.white.value}"
-        },
-        "action": {
-          "value": "{a.white.value}"
-        },
-        "success": {
-          "value": "{a.white.value}"
-        },
-        "danger": {
-          "value": "{a.white.value}"
-        },
-        "warning": {
-          "value": "{a.gray.900.value}"
-        },
-        "info": {
-          "value": "{a.gray.900.value}"
-        }
-      }
-    }
-  }
-}
@@ -0,0 +1,12 @@
+{
+  "a": {
+    "shadow": {
+      "focus": {
+        "value": "0 0 0 3px {a.border-focus.value}"
+      },
+      "focus-inverted": {
+        "value": "0 0 0 3px {a.border-focus-on-inverted.value}"
+      }
+    }
+  }
+}
@@ -15,12 +15,6 @@
      },
      "xlarge": {
        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
-      },
-      "focus": {
-        "inverted": {
-          "value": "0 0 0 3px {a.border.focus.on.inverted.value}"
-        },
-        "@": { "value": "0 0 0 3px {a.border.focus.@.value}" }
      }
    }
  }
@@ -1,5 +1,61 @@
 # Changelog

+## 5.5.0
+
+### @navikt/ds-css
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+<!---->
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+### @navikt/ds-react
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+<!---->
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+### @navikt/ds-tokens
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+## 5.4.1
+
+### @navikt/ds-react
+
+- MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
+
+## 5.4.0
+
+### @navikt/ds-css
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+<!---->
+
+- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
+
+### @navikt/ds-react
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+<!---->
+
+- Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
+
+### @navikt/ds-tokens
+
+- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
+
+## 5.3.5
+
+### @navikt/ds-react
+
+- :bug: Popover: sjekk at det er et HTML-element som får fokus ([#2258](https://github.com/navikt/aksel/pull/2258))
+
 ## 5.3.4

 ### @navikt/aksel-icons
@@ -12,26 +68,32 @@

 ## 5.3.3

-### @navikt/ds-react
+### @navikt/ds-css

 - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))

-### @navikt/ds-css
+### @navikt/ds-react

 - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))

 ## 5.3.2

-### @navikt/ds-react
-
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
-
 ### @navikt/ds-css

 - Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))

+### @navikt/ds-react
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
 ## 5.3.1

+### @navikt/ds-css
+
+- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
+
+- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
+
 ### @navikt/ds-react

 - Fix bug in monthpicker, only compare year and month for equality on date object ([#2231](https://github.com/navikt/aksel/pull/2231))
@@ -40,13 +102,11 @@

 - :bug: DatePicker: Riktig skriftstørrelse på small input ([#2232](https://github.com/navikt/aksel/pull/2232))

+## 5.3.0
+
 ### @navikt/ds-css

- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
-
- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
-
-## 5.3.0
+- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))

 ### @navikt/ds-react

@@ -60,10 +120,6 @@

 - :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))

-### @navikt/ds-css
-
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
-
 ## 5.2.1

 ### @navikt/ds-css
@@ -76,6 +132,12 @@

 - Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))

+### @navikt/ds-css
+
+- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
+
+- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
+
 ### @navikt/ds-react

 - Button: Ved bruk av `as`-prop vil `role="button"` nå bli lagt til. Native `onKeyUp` for `Space` er også implementert slik at standard `button`-interaksjon vil være likere uansett html-tag. ([#2154](https://github.com/navikt/aksel/pull/2154))
@@ -84,13 +146,13 @@

 - Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))

+## 5.1.0
+
 ### @navikt/ds-css

- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))

- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
-
-## 5.1.0
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))

 ### @navikt/ds-react

@@ -102,13 +164,13 @@

 - Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))

+## 5.0.3
+
 ### @navikt/ds-css

- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))

- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
-
-## 5.0.3
+- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))

 ### @navikt/ds-react

@@ -120,12 +182,6 @@

 - Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))

-### @navikt/ds-css
-
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
-
- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))
-
 ## 5.0.2

 ### @navikt/ds-react
@@ -140,6 +196,19 @@

 ## 5.0.0

+### @navikt/ds-css
+
+- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
+
+  - :sparkles: Støtte for header og footer
+  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
+
+<!---->
+
+- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
+
+- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
+
 ### @navikt/ds-react

 - Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
@@ -160,30 +229,29 @@

 - Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))

+## 4.12.1
+
 ### @navikt/ds-css

- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
-
-  - :sparkles: Støtte for header og footer
-  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
-
-<!---->
-
- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
-
- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
-
-## 4.12.1
+- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))

 ### @navikt/ds-react

 - Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))

+## 4.12.0
+
 ### @navikt/ds-css

- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
+- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))

-## 4.12.0
+<!---->
+
+- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
+
+- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
+
+- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))

 ### @navikt/ds-react

@@ -205,18 +273,6 @@

 - Combobox: Lukker nå nedtrekksmeny hvis man legger til ny option i singleselect ([#2177](https://github.com/navikt/aksel/pull/2177))

-### @navikt/ds-css
-
- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
-
-<!---->
-
- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
-
- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
-
- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
-
 ## 4.11.2

 ### @navikt/ds-css
@@ -231,16 +287,6 @@

 ## 4.11.0

-### @navikt/ds-react
-
- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
-
-<!---->
-
- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
-
- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
-
 ### @navikt/ds-css

 - HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
@@ -251,6 +297,16 @@

 - Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))

+### @navikt/ds-react
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+<!---->
+
+- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
+
+- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
+
 ## 4.10.2

 ### @navikt/ds-css
@@ -259,56 +315,56 @@

 ## 4.10.0

-### @navikt/ds-react
-
- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
-
 ### @navikt/ds-css

 - Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))

+### @navikt/ds-react
+
+- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
+
 ## 4.9.1

+### @navikt/ds-css
+
+- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
+
 ### @navikt/ds-react

 - Button: Fikset aria-live bug der knapp alltid ble lest opp av skjermleser ved render ([#2143](https://github.com/navikt/aksel/pull/2143))

 - Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))

-### @navikt/ds-css
-
- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
-
 ## 4.9.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))

-### @navikt/ds-css
+### @navikt/ds-react

 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))

 ## 4.8.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))

-### @navikt/ds-css
+### @navikt/ds-react

 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))

 ## 4.7.4

-### @navikt/ds-react
-
- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
-
 ### @navikt/ds-css

 - Oppdatert bruk av REM i komponenter for forbedret utrykk ved font-scaling i browser ([#2126](https://github.com/navikt/aksel/pull/2126))

+### @navikt/ds-react
+
+- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
+
 ## 4.7.3

 ### @navikt/ds-react
@@ -317,11 +373,11 @@

 ## 4.7.2

-### @navikt/ds-react
+### @navikt/ds-css

 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))

-### @navikt/ds-css
+### @navikt/ds-react

 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))

@@ -333,6 +389,10 @@

 ## 4.7.0

+### @navikt/ds-css
+
+- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
+
 ### @navikt/ds-react

 - Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
@@ -343,35 +403,27 @@

 - Combobox post-release tweaks ([#2112](https://github.com/navikt/aksel/pull/2112))

-### @navikt/ds-css
-
- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
-
 ## 4.6.1

-### @navikt/ds-react
+### @navikt/ds-css

 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))

-### @navikt/ds-css
+### @navikt/ds-react

 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))

 ## 4.6.0

-### @navikt/ds-react
-
- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
-
 ### @navikt/ds-css

 - Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))

-## 4.5.0
-
 ### @navikt/ds-react

- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+## 4.5.0

 ### @navikt/ds-css

@@ -381,6 +433,10 @@

 - - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))

+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
 ## 4.4.2

 ### @navikt/ds-react
@@ -395,14 +451,6 @@

 ## 4.4.0

-### @navikt/ds-react
-
- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
-
-### @navikt/ds-tokens
-
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
-
 ### @navikt/ds-css

 - Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -413,11 +461,15 @@

 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

-## 4.3.0
-
 ### @navikt/ds-react

- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0

 ### @navikt/ds-css

@@ -427,16 +479,20 @@

 - ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))

-## 4.2.0
-
 ### @navikt/ds-react

- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+
+## 4.2.0

 ### @navikt/ds-css

 - Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))

+### @navikt/ds-react
+
+- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+
 ## 4.1.7

 ### @navikt/ds-react
@@ -493,6 +549,16 @@

 - Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))

+### @navikt/ds-css
+
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ### @navikt/ds-react

 - Chips: `neutral` og `action`-varianter for Chips.Toggle. `checkmark`-prop for Chips.Toggle ([PR](https://github.com/navikt/aksel/pull/2035))
@@ -511,24 +577,8 @@

 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

-### @navikt/ds-css
-
- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
-
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
-
-### @navikt/ds-tailwind
-
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
 ## 4.0.0

-### @navikt/ds-react
-
- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
-
- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
-
 ### @navikt/ds-css

 - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -539,6 +589,12 @@

 - Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)

+### @navikt/ds-react
+
+- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
 ### @navikt/aksel

 - Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -563,11 +619,11 @@

 - Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))

-### @navikt/ds-react
+### @navikt/ds-css

 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

-### @navikt/ds-css
+### @navikt/ds-react

 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

@@ -595,18 +651,18 @@

 - Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))

-### @navikt/ds-react
-
- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
-
- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
-
 ### @navikt/ds-css

 - Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))

 - CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))

+### @navikt/ds-react
+
+- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
 ## 3.2.2

 ### @navikt/ds-react
@@ -627,10 +683,6 @@

 ## 3.1.0

-### @navikt/ds-react
-
- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
-
 ### @navikt/ds-css

 - Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
@@ -639,6 +691,10 @@

 - Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))

+### @navikt/ds-react
+
+- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
 ## 3.0.1

 ### @navikt/ds-react
@@ -649,16 +705,16 @@

 ## 3.0.0

+### @navikt/ds-css
+
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
+
 ### @navikt/ds-react

 - Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))

 - Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))

-### @navikt/ds-css
-
- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
-
 ## 2.9.8

 ### @navikt/aksel-icons
@@ -753,14 +809,14 @@

 ## 2.8.7

-### @navikt/ds-react
-
- Fikset typografi-bruk for `Radio` og `Checkbox`.
-
 ### @navikt/ds-css

 - Button: token for tertiary

+### @navikt/ds-react
+
+- Fikset typografi-bruk for `Radio` og `Checkbox`.
+
 ## 2.8.6

 ### @navikt/ds-css
@@ -789,14 +845,14 @@

 ## 2.8.2

-### @navikt/ds-react
-
- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
-
 ### @navikt/ds-css

 - ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))

+### @navikt/ds-react
+
+- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
+
 ## 2.8.1

 ### @navikt/ds-react
@@ -859,14 +915,14 @@

 ## 2.5.0

-### @navikt/ds-tokens
-
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
-
 ### @navikt/ds-tailwind

 - Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))

+### @navikt/ds-tokens
+
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
+
 ## 2.4.3

 ### @navikt/ds-css
@@ -875,14 +931,14 @@

 ## 2.4.2

-### @navikt/ds-react
-
- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
-
 ### @navikt/ds-css

 - List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))

+### @navikt/ds-react
+
+- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
+
 ## 2.4.1

 ### @navikt/ds-react
@@ -913,6 +969,12 @@

 ## 2.2.0

+### @navikt/ds-css
+
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `Neutral`-variant.
+
 ### @navikt/ds-react

 - ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
@@ -925,12 +987,6 @@

 - Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))

-### @navikt/ds-css
-
- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
-
- Button: `Neutral`-variant.
-
 ## 2.1.7

 ### @navikt/ds-react
@@ -1045,14 +1101,6 @@

 ## 2.0.0

-### @navikt/ds-react
-
- Fonter blir bruk i all typografi blir nå lastet fra CDN
-
-### @navikt/ds-tokens
-
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
-
 ### @navikt/ds-css

 - Fontlasting: Fonter lastes nå fra NAV-CDN
@@ -1063,6 +1111,14 @@

 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))

+### @navikt/ds-react
+
+- Fonter blir bruk i all typografi blir nå lastet fra CDN
+
+### @navikt/ds-tokens
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ## 1.5.10

 ### @navikt/ds-react
@@ -1107,16 +1163,16 @@

 ## 1.5.0

+### @navikt/ds-css
+
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
 ### @navikt/ds-react

 - Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))

 - Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))

-### @navikt/ds-css
-
- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
-
 ## 1.4.4

 ### @navikt/ds-react
@@ -1143,6 +1199,10 @@

 ## 1.3.39

+### @navikt/ds-css
+
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
+
 ### @navikt/ds-react

 - useId-bug fikset ved bruk i både react 17 og 18
@@ -1165,10 +1225,6 @@

 - Stepper: `interactive` og `completed`-props for wizard-løsninger

-### @navikt/ds-css
-
- Fikset bruk av `:watch` for diverse parsere (less, parcel)
-
 ## 1.3.24

 ### @navikt/ds-css
@@ -1,6 +1,6 @@
 AZURE_APP_CLIENT_ID=notfound
-AZURE_OPENID_CONFIG_TOKEN_ENDPOINT=https://fakedings.dev-gcp.nais.io/fake/aad?NAVIdent=A123456&aud=testbruker-aksel"  >> website/.env
+AZURE_OPENID_CONFIG_TOKEN_ENDPOINT=https://fakedings.intern.dev.nav.no/fake/aad?NAVIdent=A123456&aud=testbruker-aksel"  >> website/.env
 AZURE_APP_CLIENT_SECRET=secret
-AZURE_OPENID_CONFIG_ISSUER=https://fakedings.dev-gcp.nais.io/fake
-AZURE_OPENID_CONFIG_JWKS_URI=https://fakedings.dev-gcp.nais.io/fake/jwks
-AZURE_APP_JWK=https://fakedings.dev-gcp.nais.io/fake/jwk
+AZURE_OPENID_CONFIG_ISSUER=https://fakedings.intern.dev.nav.no/fake
+AZURE_OPENID_CONFIG_JWKS_URI=https://fakedings.intern.dev.nav.no/fake/jwks
+AZURE_APP_JWK=https://fakedings.intern.dev.nav.no/fake/jwk
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.3.4",
-    "@navikt/ds-css": "^5.3.4",
-    "@navikt/ds-react": "^5.3.4",
-    "@navikt/ds-tailwind": "^5.3.4",
-    "@navikt/ds-tokens": "^5.3.4"
+    "@navikt/aksel-icons": "^5.5.0",
+    "@navikt/ds-css": "^5.5.0",
+    "@navikt/ds-react": "^5.5.0",
+    "@navikt/ds-tailwind": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -22,10 +22,10 @@ const config: StorybookConfig = {
    const exampleIndexer = async (fileName: string, opts) => {
      let code = readFileSync(fileName, "utf-8").toString();

-      code = code
-        .split("\n")
-        .filter((line) => !line.includes("withDsExample"))
-        .join("\n");
+      code = code.replace(
+        /^\s*export default withDsExample\(Example[\s\S]*?;\s*/gm,
+        ""
+      );

      code = code.replace("export const args =", "const args =");

@@ -11,12 +11,12 @@ import {
  Bilde,
  CodeExamples,
  DoDont,
-  Kode,
  LevelTwoHeading,
  logNav,
  PropsSeksjon,
  RelatertInnhold,
  SideModul,
+  Snippet,
  Tabell,
  TastaturModul,
  Tips,
@@ -38,7 +38,7 @@ const serializers = {
    bilde: ({ node }) => <Bilde node={node} />,
    alert: ({ node }) => <Alert node={node} />,
    expansioncard: ({ node }) => <ExpansionCard node={node} />,
-    kode: ({ node }) => <Kode node={node} />,
+    kode: ({ node }) => <Snippet node={node} />,
    tabell_v2: ({ node }) => <Tabell node={node} />,
    accordion: ({ node }) => <Accordion node={node} />,
    props_seksjon: ({ node }) => <PropsSeksjon node={node} />,
@@ -7,7 +7,6 @@ export * from "./sanity-modules/code";
 export * from "./sanity-modules/code-examples";
 export { default as DoDont } from "./sanity-modules/DoDont";
 export { default as IntroKomponent } from "./sanity-modules/IntroSeksjon";
-export { default as Kode } from "./sanity-modules/Kode";
 export { default as PropsSeksjon } from "./sanity-modules/props/PropsSeksjon";
 export { default as PropTable } from "./sanity-modules/props/PropTabell";
 export { default as SideModul } from "./sanity-modules/SideModul";
@@ -25,8 +25,8 @@ export const Error = () => {
      <div className="flex flex-wrap gap-2 px-4 pb-4 md:px-10">
        {Object.keys(searchOptions)
          .slice(0, Object.keys(searchOptions).length - 1)
-          .map((x) => (
-            <Skeleton variant="rounded" height="1.75rem">
+          .map((x, i) => (
+            <Skeleton variant="rounded" height="1.75rem" key={i}>
              {searchOptions[x].display}
            </Skeleton>
          ))}
@@ -1,13 +0,0 @@
-import { Snippet } from "@/components";
-import { withErrorBoundary } from "@/error-boundary";
-import { CodeSnippetT } from "@/types";
-
-const Kode = ({ node }: { node: CodeSnippetT }) => {
-  if (!node || !node.code) {
-    return null;
-  }
-
-  return <Snippet node={node} className="last:mb-0" />;
-};
-
-export default withErrorBoundary(Kode, "Kode");
@@ -34,7 +34,7 @@ const TokenTable = ({ node }: { node: TokenTableT }) => {
          ))}
        </AkselTable>
        {(open || !showMore) && (
-          <div className="border-border-subtle bg-surface-default relative -mt-8 w-full rounded-b-lg border border-t-0 p-2 pr-14">
+          <div className="border-border-subtle bg-surface-default relative -mt-9 w-full rounded-b-lg border border-t-0 p-2 pr-14">
            <CopyButton
              copyText={Object.entries(tokens).reduce(
                (prev, cur) =>
@@ -0,0 +1,46 @@
+import { getKey } from "@/sb-util";
+import type { Meta, StoryObj } from "@storybook/react";
+import CodeExample from "./Examples";
+
+const meta = {
+  title: "Sanity-modules/CodeExample",
+  component: CodeExample,
+  tags: ["autodocs"],
+} satisfies Meta<typeof CodeExample>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Designsystem: Story = {
+  args: {
+    node: {
+      title: "button",
+      dir: {
+        title: "button",
+        filer: [
+          {
+            _key: getKey(),
+            description: null,
+            innhold:
+              'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary">Primary</Button>\n      <Button variant="secondary">Secondary</Button>\n      <Button variant="tertiary">Tertiary</Button>\n      <Button variant="danger">Danger</Button>\n    </div>\n  );\n};',
+            navn: "default",
+          },
+          {
+            _key: getKey(),
+            description: "Testdescription",
+            innhold:
+              'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary-neutral">Primary</Button>\n      <Button variant="secondary-neutral">Secondary</Button>\n      <Button variant="tertiary-neutral">Tertiary</Button>\n    </div>\n  );\n};',
+            navn: "neutral",
+          },
+          {
+            _key: getKey(),
+            description: null,
+            innhold:
+              'import { PencilIcon } from "@navikt/aksel-icons";\nimport { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button size="small" variant="primary" icon={<PencilIcon aria-hidden />}>\n        Primary\n      </Button>\n      <Button size="small" variant="secondary">\n        Secondary\n      </Button>\n      <Button size="small" variant="tertiary">\n        Tertiary\n      </Button>\n      <Button size="small" variant="danger">\n        Danger\n      </Button>\n    </div>\n  );\n};',
+            navn: "small",
+          },
+        ],
+      },
+    },
+  },
+};
@@ -1,6 +1,6 @@
 import { capitalize, Snippet } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
-import { CodeExapmplesT } from "@/types";
+import { CodeExamplesT } from "@/types";
 import {
  ExternalLinkIcon,
  LaptopIcon,
@@ -15,7 +15,7 @@ import { CodeSandbox } from "./CodeSandbox";
 const iframePadding = 192;
 const iframeId = "example-iframe";

-const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
+const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
  const [activeExample, setActiveExample] = useState(null);
  const [frameState, setFrameState] = useState(300);
  const [unloaded, setUnloaded] = useState(true);
@@ -208,7 +208,7 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {

                <Snippet
                  node={{
-                    code: { code: fil.innhold.trim(), language: "jsx" },
+                    code: { code: fil.innhold.trim(), language: "tsx" },
                  }}
                />
              </>
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Snippet from "./Snippet";
+
+const meta = {
+  title: "Sanity-modules/CodeSnippet",
+  component: Snippet,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Snippet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const JSX: Story = {
+  args: {
+    node: {
+      code: {
+        code: 'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary">Primary</Button>\n      <Button variant="secondary">Secondary</Button>\n      <Button variant="tertiary">Tertiary</Button>\n      <Button variant="danger">Danger</Button>\n    </div>\n  );\n};',
+        language: "jsx",
+      },
+    },
+  },
+};
+
+export const Bash: Story = {
+  args: {
+    node: {
+      code: {
+        code: "yarn install @navikt/ds-react @navikt/ds-css\nnpm add @navikt/ds-react @navikt/ds-css",
+        language: "bash",
+      },
+    },
+  },
+};
+
+export const Terminal: Story = {
+  args: {
+    node: {
+      code: {
+        code: "npx cowsay moo",
+        language: "terminal",
+      },
+    },
+  },
+};
+
+export const JS: Story = {
+  args: {
+    node: {
+      code: {
+        code: "const numbers = [1, 2, 3, 4];\n\nnumbers.map(x => console.log(x))",
+        language: "js",
+      },
+    },
+  },
+};
+
+export const HTML: Story = {
+  args: {
+    node: {
+      code: {
+        code: "<button>Click me!</button>",
+        language: "html",
+      },
+    },
+  },
+};
@@ -1,19 +1,13 @@
 import { withErrorBoundary } from "@/error-boundary";
 import cl from "clsx";
-import Highlight, { defaultProps, Language } from "prism-react-renderer";
+import { Highlight, Language } from "prism-react-renderer";
 import React from "react";
 import { CodeSnippetT } from "@/types";
-import { CopyButton } from "@navikt/ds-react";
+import { CopyButton, Label } from "@navikt/ds-react";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+import theme from "./theme";

-const CodeSnippet = ({
-  node: { code },
-  className,
-  ...props
-}: {
-  node: CodeSnippetT;
-  className?: string;
-  style?: any;
-}) => {
+const CodeSnippet = ({ node: { code, title } }: { node: CodeSnippetT }) => {
  if (!code || !code.code) {
    return null;
  }
@@ -24,49 +18,75 @@ const CodeSnippet = ({
    case "js":
      language = "javascript";
      break;
-    case "html":
-      language = "markup";
+    case "jsx":
+      language = "tsx";
      break;
-    case "terminal":
-      language = "bash";
+    case "scss":
+      language = "css";
+      break;
+    case "less":
+      language = "css";
      break;
    default:
      break;
  }

+  const terminalStyling = (lang) => lang === "bash" || lang === "terminal";
+  const formatTitle = (input) => (input === "bash" ? "Terminal" : input);
+
  return (
-    <>
-      <div
-        className={cl(className, "relative mb-8 grid rounded-lg bg-[#0f172a]")}
-        {...props}
-      >
-        <div className="absolute right-4 top-2 z-10 rounded-lg bg-[#0f172a] p-1 group-[.aksel-artikkel]/aksel:hidden">
-          <CopyButton data-theme="dark" size="small" copyText={code.code} />
+    <section
+      aria-label="Kode"
+      className="aksel-codesnippet bg-surface-inverted relative mb-7 grid rounded-lg last:mb-0"
+    >
+      <div className="text-text-on-inverted text-medium relative flex leading-6">
+        <div className="mt-2 flex flex-none items-center border-b border-b-gray-200 border-t-transparent px-4 py-1.5 text-gray-100">
+          {!title ? (
+            <Label as="span" className="uppercase">
+              {formatTitle(language)}
+            </Label>
+          ) : (
+            <Label as="span">{title}</Label>
+          )}
        </div>
-        <Highlight
-          code={code.code}
-          language={language}
-          {...defaultProps}
-          theme={undefined}
-        >
-          {({ tokens, getLineProps, getTokenProps }) => (
-            <pre className="text-text-on-inverted min-h-14 relative m-0 max-h-96 overflow-x-auto overflow-y-auto rounded-lg bg-[#0f172a] p-4 font-mono group-[.aksel-artikkel]/aksel:mr-0">
+        <div className="mt-2 flex h-10 flex-auto rounded-tl bg-gray-100/10 shadow-inner" />
+
+        <CopyButton
+          data-theme="dark"
+          size="small"
+          copyText={code.code}
+          className="absolute right-2 top-3"
+        />
+      </div>
+      <Highlight code={code.code} language={language} theme={theme}>
+        {({ tokens, getLineProps, getTokenProps }) => (
+          <pre className="text-medium m-0 flex overflow-auto rounded-lg leading-6">
+            <code className="max-h-80 min-w-full flex-none p-4 pb-0">
              {tokens.map((line, i) => (
-                <div
+                <span
                  key={i}
                  {...getLineProps({ line, key: i })}
-                  className="text-medium whitespace-pre break-words"
+                  className={cl(
+                    "last-of-type:pb-4",
+                    terminalStyling(language) ? "flex items-center" : "block"
+                  )}
                >
+                  {terminalStyling(language) && (
+                    <ChevronRightIcon
+                      aria-hidden
+                      className="mr-2 h-5 w-auto flex-none overflow-visible text-pink-400"
+                    />
+                  )}
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
-                </div>
+                </span>
              ))}
-            </pre>
-          )}
-        </Highlight>
-      </div>
-    </>
+            </code>
+          </pre>
+        )}
+      </Highlight>
+    </section>
  );
 };

@@ -1,8 +1,5 @@
 import dynamic from "next/dynamic";

 export const Snippet = dynamic(() => import("./Snippet"), {
-  loading: () => (
-    <div className="mb-8 block min-h-32 w-full rounded-md bg-gray-900" />
-  ),
  ssr: false,
 });
@@ -0,0 +1,111 @@
+import { PrismTheme } from "prism-react-renderer";
+
+export const JetwaveDark: PrismTheme = {
+  plain: {
+    color: "#f8fafc",
+    backgroundColor: "#011627",
+  },
+  styles: [
+    {
+      types: ["prolog"],
+      style: {
+        color: "#000080",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "var(--a-gray-300)",
+      },
+    },
+    {
+      types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+      style: {
+        color: "#569CD6",
+      },
+    },
+    {
+      types: ["number", "inserted"],
+      style: {
+        color: "var(--a-gray-50)",
+      },
+    },
+    {
+      types: ["constant"],
+      style: {
+        color: "#f8fafc",
+      },
+    },
+    {
+      types: ["attr-name", "variable"],
+      style: {
+        color: "#9CDCFE",
+      },
+    },
+    {
+      types: ["deleted", "string", "attr-value", "template-punctuation"],
+      style: {
+        color: "#cbd5e1",
+      },
+    },
+    {
+      types: ["selector"],
+      style: {
+        color: "#D7BA7D",
+      },
+    },
+    {
+      types: ["tag"],
+      style: {
+        color: "var(--a-green-200)",
+      },
+    },
+    {
+      types: ["tag"],
+      languages: ["jsx"],
+      style: {
+        color: "var(--a-blue-200)",
+      },
+    },
+    {
+      types: ["tag"],
+      languages: ["markup"],
+      style: {
+        color: "var(--a-blue-200)",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#D4D4D4",
+      },
+    },
+    {
+      types: ["punctuation"],
+      languages: ["markup"],
+      style: {
+        color: "#808080",
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "#7dd3fc",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "var(--a-green-200)",
+      },
+    },
+    {
+      types: ["char"],
+      style: {
+        color: "#D16969",
+      },
+    },
+  ],
+};
+
+export default JetwaveDark;
@@ -33,7 +33,9 @@ const List = ({ prop, parent }: { prop: any; parent: string }) => {
        <span>{prop.type ? <>{Highlighter({ type: prop.type })}</> : ""}</span>
      </dt>
      {prop.description && (
-        <dd className="font-sans text-base">{prop.description}</dd>
+        <dd className="whitespace-pre-wrap font-sans text-base">
+          {prop.description}
+        </dd>
      )}
      {prop.name === "ref" && prop.type.includes("Ref<") && (
        <dd className="font-sans text-base">
@@ -151,7 +151,7 @@ export function TableOfContentsv2({
      <nav
        aria-labelledby="toc-heading"
        id="toc-scroll"
-        className="max-h-[80vh] overflow-y-auto"
+        className="max-h-[80vh] w-full overflow-y-auto"
      >
        <ul>
          {toc.map((link) => {
@@ -7,7 +7,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  height: 100vh;
+  min-height: 100vh;
  padding-left: 1rem;
  padding-right: 1rem;
 }
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	4742f2f580	Version Packages (#2275 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-13 14:58:02 +02:00
Ken	9f2052e1c2	🐛 Width fungerte ikke med inline-variant av skeleton (#2273 )	2023-09-13 14:42:05 +02:00
Julian Nymark	f6fcf0c4fd	:arrow-up: add missing typescript version bump in main (#2272 )	2023-09-13 11:46:38 +02:00
Julian Nymark Ken Lars Hansen Ken	83c9194a48	initial box (heavily inspired by shopify Box) (#2195 ) * initial box (heavily inspired by shopify Box) * 🎨 Theming-demo * rm printHidden prop * sr-only: clip is deprecated, adding clip-path * setting up padding story box primitive * 95% complete padding example for Box (dynamic css code unfolding with types) * WIP on padding/margin for box * working box padding/block/inline/margin? * remove console.log * story for Box, copy implementation from padding to apply to margin as well * remove unwanted props on Box * refactor semantic-colors.json, use json import for types in Box.tsx * squashme * Box: working border & background * 🔥 remove props on Box we will not implement in v1 * refactoring / less things needed (no margin) and things that are broken show up in stories * 🐛 fix erroneous padding assignment (a flipped index) * fully recreated LinkPanel * box: add all borderRadius props * box: complete example for chat bubbles * 📝 refactor box hover props to be an object instead * checkout main yarn.lock * yarn changeset * 📝 add jsdoc for Box * 📝 add token documentation * 🚧 Box: add barrel file * 🔥 remove overriding tokens for Box * ♻️ refactor the borderRadius API * 🔥 remove console.logs * bump ts version (make them all equal) * fix new type error that surfaced when upgrading TS * add yarn.lock * 🚧 testing with older TS version again * Revert "🚧 testing with older TS version again" This reverts commit `ca09f3c419`. * add minimum permissions check utility (official github action) * Revert "add minimum permissions check utility (official github action)" This reverts commit `f9dd5ea436`. * test with "read-all\|write-all" for a chromatic.yml action * remove unused comments * 🚧 try skip a test suite * Revert "🚧 try skip a test suite" This reverts commit `ccf4711c25`. * 🚧 update all node-version to 19 * 💥 Force-tester GHA * 💥 bump node-version to 20 * 💥 test with jsonModules again, but this time with node v20 * 🚧 revert type erasure (for tests) * 🔥 remove hover from Box * 🚧 test with module identifier import * 🚧 squashme * a working token type solution * 📝 group Primitives in storybook * no longer assert type, hint instead * 📝 improve jsdoc for Box * 📝 improve jsdoc for Box * 🚧 test relative import for github action * 🚧 test ordering of yarn builds * 🚧 test ordering of yarn workspaces * 🚧 test dependency for yarn workspaces * 🐛 fix human error in token refactoring * 📝 reword jsdoc * ♻️ refactor * 🚧 test again with module identifier import * squashme * 🚧 fully revert to importing .json * 🚧 remove duplicate types * 🔥 remove style-dicitonary format (now unused), fix shadow.json refs * remove devDependency on tokens (for react) * 📝♻️ update comments & naming * 🚚 Oppdatert CSS-config etter ny primitives gruppering * make border-color also control border-style * add examples for Box to aksel.nav.no * ⬆️ Yarn sort av dependencies * 🎨 BorderWidth tokens * 🎨 Css for borderRadius * 🎨 Setup responsiveRadius utility * ♻️ Forenklet borderRadius * 🎨 refactor padding in box * 🔥 Fjernet unødvendig kode * 🎨 Oppdatert token for borderWidth * 🐛 Default 0px border * 🏷️ Refactor types * 🐛 Fikset stories * ♻️ refactor away one of the getResponsiveProps(), renaming * ♻️ refactor + add token exceptions * 🐛 new props based on BoxProps * 📝 Oppdatert box-eksempler * 📝 border-eksempler * 📝 shadow-eksempel * 📝 header demo * 🔥 Fjernet theming demo, la til panel-demo * 🚚 Flyttet show/hide inn i primitives * 🚚 extract stateful colors to separate files * 🚚 move shadow stateful tokens as well * ♻️ rename some Box types * 🚚 re-add missing token * 🚚 move types file to utils, (bonus: fix some jsdoc) * ➕ add @navikt/ds-tokens to react * Update .changeset/happy-pianos-cheat.md --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-09-13 11:25:35 +02:00
github-actions[bot]andgithub-actions[bot]	f5f859f845	Version Packages (#2271 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-11 21:41:26 +02:00
Ken	2eaf531cfe	🐛 Fikset kalkulering av fromDate/toDate (#2269 )	2023-09-11 21:38:36 +02:00
Halvor Haugan	a9a17ce050	📝 Fjern desc på default eksempel på GuidePanel (#2267 )	2023-09-11 13:06:59 +02:00
Trong Huu Nguyen	c5644da130	chore: update fakedings url (#2268 )	2023-09-11 12:58:32 +02:00
Julian NymarkandKen	3af95c4c1f	Bump node and TS versions (#2249 ) * 🚧 update all node-version to 19 * 💥 bump node-version to 20 * bump ts version (make them all equal) * fix new type error that surfaced when upgrading TS * ⬆️ bump ts-node * 🚧 add ts-jest to aksel-stylelint (just a test) --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-09-11 09:58:13 +02:00
Ken	d1bd13f4d1	🐛 stories for aksel.nav.no indekserte ikke riktig	2023-09-08 14:49:55 +02:00
Ken	9f048877e4	🐛 Fikset sanity min title-felt	2023-09-07 18:47:03 +02:00
Ken	39b2ef49b2	📝 Bedre visning for typo-eksempler	2023-09-07 15:02:16 +02:00
Ken	ccf3f30ab4	🐛 Fikset eksempler for show/hide	2023-09-07 14:54:43 +02:00
Ken	3592f04eab	🐛 Fikset parsing av kodesnippet	2023-09-07 14:42:02 +02:00
github-actions[bot]andgithub-actions[bot]	fbc598529c	Version Packages (#2262 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-07 14:24:26 +02:00
Ken	1df8dcd857	🎨 Oppdatert prismjs og codeview (#2251 )	2023-09-07 14:02:10 +02:00
Ken	7be9dd88ca	Responsive Show/Hide-komponenter (#2222 )	2023-09-07 12:47:49 +02:00
Ken	4d9691413a	🐛 Fikset lightmode-theming (#2238 )	2023-09-07 12:45:31 +02:00
Ken	2989853f39	♻️ Oppdatert Search escape håndtering (#2245 )	2023-09-07 12:41:45 +02:00
Ken	bff7c836f8	🎨 ErrorSummary border-radius (#2256 )	2023-09-07 12:41:21 +02:00
github-actions[bot]andgithub-actions[bot]	b906ca469d	Version Packages (#2259 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-07 10:42:56 +02:00
Halvor Haugan	ed9286f75b	🐛 Popover: sjekk at det er et HTML-element som får fokus (#2258 )	2023-09-07 10:39:03 +02:00
				`@@ -0,0 +1 @@`
				`export { Box, type BoxProps } from "./Box";`
				`@@ -0,0 +1 @@`
				`export { Show, Hide, type ResponsiveProps } from "./Responsive";`