Oppdater stories for Link (#2770)

Designer ønsket å gjøre hero mer tydelig da dagens 'violet' forsvant mellom elementene

.eslintrc.js

@@ -46,7 +46,8 @@ module.exports = {
     },
     {
       files: ["**/*.test.*", "**/__tests__/*"],
-      extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
+      plugins: ["vitest"],
+      extends: ["plugin:vitest/recommended", "plugin:testing-library/react"],
     },
 
     {
@@ -71,7 +72,6 @@ module.exports = {
           "error",
           "aksel.nav.no/website/pages/",
         ],
-        "@typescript-eslint/ban-ts-comment": "off", // Temporary
       },
     },
     {

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,7 +21,7 @@ add links to project-tasks, slack discussions etc here
 - Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
 - Add JSDoc to component (see other components for reference)
 - Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
-- Is the component sufficiently complex to warrant tests? Add some unit-tests for jest.
+- Is the component sufficiently complex to warrant tests? Add some unit-tests for vitest.
 
 #### Component-updates 🎉
 

.github/workflows/aksel-prod.yml

@@ -75,7 +75,7 @@ jobs:
         run: yarn boot
 
       - name: Tests
-        run: yarn workspace aksel.nav.no test
+        run: yarn workspace website test
 
       - name: Build application
         run: yarn workspace aksel.nav.no build:next

.github/workflows/release.yml

@@ -2,6 +2,9 @@ name: Release
 
 on:
   push:
+    paths:
+      - ".changeset/**"
+      - "@navikt/**"
     branches:
       - main
   workflow_dispatch:

.storybook/main.ts

@@ -29,6 +29,7 @@ export default {
         },
       },
     },
+    "storybook-addon-pseudo-states",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.jsx

@@ -10,7 +10,7 @@ export const parameters = {
         "Getting started",
         "ds-react",
         ["Primitives"],
-        ["Default"],
+        ["Default", "Controls"],
         "Aksel-icons",
       ],
     },

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/aksel-icons
 
+## 6.1.1
+
+## 6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Minor Changes
+
+- SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+## 5.18.3
+
+## 5.18.2
+
+## 5.18.1
+
+## 5.18.0
+
 ## 5.17.5
 
 ## 5.17.4

@navikt/aksel-icons/__tests__/validate-config.test.ts

@@ -1,7 +1,8 @@
-const fastglob = require("fast-glob");
-const path = require("path");
-const jsYaml = require("js-yaml");
-const fs = require("fs");
+import fastglob from "fast-glob";
+import fs from "fs";
+import jsYaml from "js-yaml";
+import path from "path";
+import { describe, expect, test } from "vitest";
 
 const basePath = path.resolve(__dirname, "../icons");
 
@@ -11,7 +12,7 @@ const ymlList = fastglob
 
 describe(`Each icons YML-config is valid`, () => {
   ymlList.forEach((file) => {
-    it(`${file} has valid YML-config`, () => {
+    test(`${file} has valid YML-config`, () => {
       const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
         schema: jsYaml.JSON_SCHEMA,
       });

@navikt/aksel-icons/__tests__/validate-files.test.ts

@@ -1,5 +1,6 @@
-const fastglob = require("fast-glob");
-const path = require("path");
+import fastglob from "fast-glob";
+import path from "path";
+import { describe, expect, test } from "vitest";
 
 const basePath = path.resolve(__dirname, "../icons");
 
@@ -12,7 +13,7 @@ const ymlList = fastglob
   .map((fileN) => path.basename(fileN));
 
 describe(`Each SVG-file has a matching YML file`, () => {
-  it(`must have a corresponding YML file`, () => {
+  test(`must have a corresponding YML file`, () => {
     expect(
       ymlList
         .map((yml) => yml.replace(".yml", ".svg"))
@@ -22,7 +23,7 @@ describe(`Each SVG-file has a matching YML file`, () => {
 });
 
 describe(`Each YML-file has a matching SVG file`, () => {
-  it(`must have a corresponding SVG file`, () => {
+  test(`must have a corresponding SVG file`, () => {
     expect(
       svgList
         .map((svg) => svg.replace(".svg", ".yml"))

@navikt/aksel-icons/__tests__/validate-svg-parsing.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { parseIcon } from "../config/parse-svg";
 
 describe(`SVG should be correctly parsed`, () => {
@@ -27,7 +28,7 @@ describe(`SVG should be correctly parsed`, () => {
   </svg>
   `;
 
-  it("a", () => {
+  test("a", () => {
     expect(parseIcon(simpleSvg)).toEqual(simpleSvgResult);
     expect(parseIcon(advancedSvg)).toEqual(advancedSvgResult);
   });

@navikt/aksel-icons/__tests__/validate-svg.test.ts

@@ -4,6 +4,7 @@ import { select, selectAll } from "hast-util-select";
 import { basename } from "path";
 import parse from "rehype-parse";
 import { unified } from "unified";
+import { describe, expect, test } from "vitest";
 
 const basePath = "./icons";
 
@@ -18,39 +19,44 @@ describe(`Each icons has a valid code`, () => {
         .use(parse, { fragment: true, space: "svg" })
         .parse(readFileSync(`${basePath}/${file}`));
 
-      it(`has valid attributes on root-node`, () => {
-        const properties = Object.keys(
-          select(":root", iconAst).properties,
-        ).sort();
+      test(`has valid attributes on root-node`, () => {
+        const root = select(":root", iconAst);
+        const properties =
+          root && root.properties ? Object.keys(root.properties).sort() : [];
 
         expect(properties).toStrictEqual(
           ["viewBox", "xmlns", "height", "width", "fill"].sort(),
         );
       });
 
-      it(`has valid xml-attr`, () => {
-        const xmlns = select(":root", iconAst).properties.xmlns;
+      test(`has valid xml-attr`, () => {
+        const root = select(":root", iconAst);
+        const xmlns = root && root.properties ? root.properties.xmlns : null;
         expect(xmlns).toBe("http://www.w3.org/2000/svg");
       });
 
-      it(`has valid viewbox`, () => {
-        const viewbox = select(":root", iconAst).properties.viewBox;
+      test(`has valid viewbox`, () => {
+        const root = select(":root", iconAst);
+        const viewbox =
+          root && root.properties ? root.properties.viewBox : null;
         expect(viewbox).toBe("0 0 24 24");
       });
 
-      it(`root fill is none`, () => {
-        const fill = select(":root", iconAst).properties.fill;
+      test(`root fill is none`, () => {
+        const root = select(":root", iconAst);
+        const fill = root && root.properties ? root.properties.fill : null;
         expect(fill).toBe("none");
       });
 
-      it(`has valid width and height`, () => {
-        const width = select(":root", iconAst).properties.width;
-        const height = select(":root", iconAst).properties.height;
+      test(`has valid width and height`, () => {
+        const root = select(":root", iconAst);
+        const width = root && root.properties ? root.properties.width : null;
+        const height = root && root.properties ? root.properties.height : null;
         expect(width).toBe("24");
         expect(height).toBe("24");
       });
 
-      it(`has valid stroke`, () => {
+      test(`has valid stroke`, () => {
         const nodes = selectAll("*", iconAst);
 
         nodes.forEach((n) => {
@@ -59,7 +65,7 @@ describe(`Each icons has a valid code`, () => {
         });
       });
 
-      it(`has valid stroke-width`, () => {
+      test(`has valid stroke-width`, () => {
         const nodes = selectAll("*", iconAst);
         nodes.forEach((n) => {
           n.properties?.strokeWidth &&

@navikt/aksel-icons/config/template.js

@@ -25,6 +25,7 @@ const template = (variables, { tpl }) => {
   };
 
   return tpl`
+"use client";
 ${imports};
 
 ${variables.interfaces};

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.17.5",
+  "version": "6.1.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -20,24 +20,28 @@
     "access": "public",
     "provenance": true
   },
-  "sideEffects": [
-    "*.svg"
-  ],
+  "sideEffects": false,
   "license": "MIT",
   "main": "./dist/react/cjs/index.js",
   "module": "./dist/react/esm/index.js",
   "typings": "./dist/react/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/react/esm/index.d.ts",
-      "import": "./dist/react/esm/index.js",
-      "require": "./dist/react/cjs/index.js"
+      "import": {
+        "types": "./dist/react/esm/index.d.ts",
+        "default": "./dist/react/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/react/cjs/index.d.ts",
+        "default": "./dist/react/cjs/index.js"
+      }
     },
-    "./svg/*.svg": "./dist/svg/*.svg",
     "./metadata": {
       "types": "./dist/metadata.d.ts",
       "default": "./dist/metadata.js"
-    }
+    },
+    "./svg/*.svg": "./dist/svg/*.svg",
+    "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
@@ -55,10 +59,12 @@
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
-    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
     "fetch-new:icons": "node config/figma/index.mjs",
-    "zip:icons": "node config/zip.js"
+    "zip:icons": "node config/zip.js",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "devDependencies": {
     "@svgr/cli": "6.5.1",
@@ -69,22 +75,14 @@
     "dotenv": "^10.0.0",
     "fast-glob": "3.2.11",
     "hast-util-select": "5.0.5",
-    "jest": "^29.0.0",
     "js-yaml": "^4.1.0",
     "lodash.camelcase": "4.3.0",
     "lodash.startcase": "4.4.0",
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
+    "tsc-alias": "1.8.8",
     "typescript": "^5.1.6",
-    "unified": "10.1.2"
-  },
-  "jest": {
-    "transformIgnorePatterns": [
-      "node_modules/unified/*"
-    ],
-    "testMatch": [
-      "**/__tests__/*.js",
-      "**/__tests__/*.mjs"
-    ]
+    "unified": "10.1.2",
+    "vitest": "^1.2.2"
   }
 }

@navikt/aksel-icons/tsconfig.esm.json

@@ -3,7 +3,11 @@
   "compilerOptions": {
     "outDir": "./dist/react/esm",
     "module": "esnext",
-    "sourceMap": false,
+    "sourceMap": true,
     "declaration": true
+  },
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": false
   }
 }

@navikt/aksel-icons/tsconfig.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "./dist/react/cjs",
     "module": "commonjs",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "declaration": true,
+    "sourceMap": true
   },
   "exclude": ["./util", "./__tests__", "**/*.stories.*"],
   "include": ["./src"]

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/aksel-stylelint
 
+## 6.1.1
+
+## 6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+## 5.18.3
+
+## 5.18.2
+
+## 5.18.1
+
+## 5.18.0
+
 ## 5.17.5
 
 ## 5.17.4

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.17.5",
+  "version": "6.1.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -26,7 +26,7 @@
     "/dist"
   ],
   "scripts": {
-    "test": "jest",
+    "test": "yarn build && node --import tsx --test ./dist/**/*.test.js",
     "copy-css": "node -e \"require('fs').copyFileSync('../core/css/dist/index.css','dist/index.css')\"",
     "copy-tokens": "node -e \"require('fs').copyFileSync('../core/css/tokens.json','dist/tokens.json')\"",
     "copy": "yarn copy-css && yarn copy-tokens",
@@ -35,26 +35,14 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.17.5",
-    "@navikt/ds-tokens": "^5.17.5",
-    "@types/jest": "^29.0.0",
+    "@navikt/ds-css": "^6.1.1",
+    "@navikt/ds-tokens": "^6.1.1",
     "concurrently": "7.2.1",
-    "copyfiles": "2.4.1",
-    "jest": "^29.0.0",
-    "jest-preset-stylelint": "^6.1.0",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^14.8.5",
-    "ts-jest": "^29.0.0",
+    "stylelint-test-rule-node": "^0.2.1",
+    "tsx": "^4.7.1",
     "typescript": "^5.1.6"
-  },
-  "jest": {
-    "preset": "jest-preset-stylelint",
-    "testMatch": [
-      "**/*.test.ts"
-    ],
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    }
   }
 }

@navikt/aksel-stylelint/src/deprecations.ts

@@ -50,4 +50,14 @@ export const deprecations: DeprecatedList = [
     message:
       "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
   },
+  {
+    classes: ["navds-grid", "navds-content-container"],
+    deprecatePrefix: true,
+    message:
+      "Components were replaced by `HGrid` and `Page.Block` in version 6",
+  },
+  {
+    classes: ["navds-textarea__wrapper"],
+    message: "Removed in v6.0.0",
+  },
 ];

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-component-reference/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-global-override/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-no-class-override/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.test.ts

@@ -1,8 +1,8 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 import { deprecations } from "../../deprecations";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-no-internal-tokens/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/tsconfig.json

@@ -6,7 +6,7 @@
     "target": "es2020",
     "preserveWatchOutput": true,
     "declaration": false,
-    "types": ["node", "jest", "@types/jest"],
+    "types": ["node"],
     "outDir": "dist",
     "rootDir": "./src",
     "resolveJsonModule": true,

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @navikt/aksel
 
+## 6.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`9510327ab`](https://github.com/navikt/aksel/commit/9510327abe96142943c6e92bd7c7da93a9721fd5), [`3d2eab4fd`](https://github.com/navikt/aksel/commit/3d2eab4fda07cac8071822e1f8e8fc5f69e7d234)]:
+  - @navikt/ds-css@6.1.1
+
+## 6.1.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Patch Changes
+
+- Updated dependencies [[`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522)]:
+  - @navikt/ds-css@6.0.0
+
+## 5.18.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.3
+
+## 5.18.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.2
+
+## 5.18.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.1
+
+## 5.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.0
+
 ## 5.17.5
 
 ### Patch Changes

@navikt/aksel/jest.config.js

@@ -1,8 +0,0 @@
-const config = {
-  transform: { "^.+\\.js?$": "ts-jest", "^.+\\.ts?$": "ts-jest" },
-  testMatch: ["**/tests/*.test.ts"],
-  verbose: true,
-  rootDir: ".",
-};
-
-module.exports = config;

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.17.5",
+  "version": "6.1.1",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "clean": "rimraf dist",
     "build": "yarn clean && tsc -p tsconfig.json",
     "dev": "tsc --watch -p tsconfig.json",
-    "test": "yarn build && NODE_OPTIONS=--experimental-vm-modules yarn jest",
-    "test:watch": "NODE_OPTIONS=--experimental-vm-modules yarn jest --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "bin": "./dist/index.js",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.17.5",
+    "@navikt/ds-css": "6.1.1",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",
@@ -44,12 +44,9 @@
     "react-scanner": "^1.1.0"
   },
   "devDependencies": {
-    "@types/inquirer": "^9.0.3",
-    "@types/jest": "^29.0.0",
-    "jest": "^29.0.0",
     "rimraf": "3.0.2",
-    "ts-jest": "^29.0.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vitest": "^1.2.2"
   },
   "sideEffects": false,
   "engines": {

@navikt/aksel/src/codemod/migrations.ts

@@ -87,6 +87,16 @@ export const migrations: {
       path: "v4.0.0/date/date",
     },
   ],
+  "v6.0.0": [
+    {
+      description:
+        "Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`",
+      value: "v6-chat",
+      path: "v6.0.0/chat/chat",
+      warning:
+        "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {

@navikt/aksel/src/codemod/tests/migrations.test.ts

@@ -1,5 +1,6 @@
 import fs from "fs";
 import path from "path";
+import { describe, expect, test } from "vitest";
 import { getMigrationNames, getMigrationPath } from "../migrations";
 
 describe("migrations", () => {

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/chat.ts

@@ -0,0 +1,75 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  let localName = "Chat";
+
+  const root = j(file.source);
+
+  /* Finds used name for Chat component */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "Chat" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: localName,
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "avatarBgColor",
+          },
+        })
+        .remove();
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: "JSXMemberExpression",
+          object: {
+            name: localName,
+          },
+          property: {
+            name: "Bubble",
+          },
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+    });
+
+  return root.toSource(getLineTerminator(file.source));
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/chat.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "chat";
+const fixtures = ["import-alias", "idempotent"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble>Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/utils/check.ts

@@ -2,6 +2,7 @@ import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";
 import prettier from "prettier";
+import { describe, expect, test } from "vitest";
 
 interface TestT {
   fixture: string;
@@ -15,7 +16,7 @@ export function check(
   { fixture, migration, extension = "js", options = {} }: TestT,
 ) {
   describe(migration, () => {
-    it(fixture, async () => {
+    test(fixture, async () => {
       const fixtureDir = path.join(dirName);
       const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
       const parser = extension;

@navikt/aksel/src/codemod/utils/tests/translate-token.test.ts

@@ -1,7 +1,6 @@
+import { describe, expect, test } from "vitest";
 import { translateToken } from "../translate-token";
 
-jest.autoMockOff();
-
 const tokens = [
   {
     name: "--navds-global-color-red-100",

@navikt/aksel/tsconfig.json

@@ -6,12 +6,13 @@
     "target": "es2015",
     "preserveWatchOutput": true,
     "declaration": false,
-    "types": ["node", "jest"],
+    "types": ["node"],
     "outDir": "dist",
     "rootDir": "./src",
     "resolveJsonModule": true,
-    "allowJs": true
+    "allowJs": true,
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist", "jest.config.js", "**/tests/**"]
+  "exclude": ["node_modules", "dist", "**/tests/**"]
 }

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-css
 
+## 6.1.1
+
+### Patch Changes
+
+- Link: Fjern hover-farge ([#2767](https://github.com/navikt/aksel/pull/2767))
+
+- Modal: Får nå fokus når åpnes i Safari ([#2688](https://github.com/navikt/aksel/pull/2688))
+
+## 6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Grid, ContentContainer: Komponenter er fjernet fra systemet. [Se migreringsguide](https://aksel.nav.no/grunnleggende/kode/migrering#dd2cfa9fb1d1). ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- CSS: Oppdatert bruk av action-farger i systemet. Dette påvirker komponentene: Button, CopyButton, Dropdown, Combobox, ConfirmationPanel, Radio, Checkbox, Search, Select, TextField, Textarea, Helptext, LinkPanel, Link, ReadMore, Stepper og Tabs. Endringen skal ikke brekke noe så lenge man ikke har overskrevet farger manuelt. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Tokens: Nye tokens `--a-text-action-hover`,`--a-icon-action-hover` og `--a-border-action-hover` ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+## 5.18.3
+
+## 5.18.2
+
+## 5.18.1
+
+## 5.18.0
+
 ## 5.17.5
 
 ### Patch Changes

@navikt/core/css/button.css

@@ -130,6 +130,7 @@
   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)));
 }
+
 @media (forced-colors: active) {
   .navds-button.navds-button--primary {
     background-color: highlight;
@@ -227,6 +228,7 @@
     --ac-button-secondary-hover-bg,
     var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
   );
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
 }
 
 .navds-button--secondary:focus-visible {

@navikt/core/css/content-container.css

@@ -1,17 +0,0 @@
-:root,
-:host {
-  --navds-content-container-max-width: 79.5rem;
-}
-
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--a-spacing-6);
-  }
-}

@navikt/core/css/copybutton.css

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

@navikt/core/css/dropdown.css

@@ -50,6 +50,7 @@
 
 .navds-dropdown__item:hover {
   background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
+  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
 }
 
 .navds-dropdown__item:active {

@navikt/core/css/form/combobox.css

@@ -92,9 +92,6 @@
 }
 
 .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
   outline: 3px solid transparent;
   outline-offset: 2px;
@@ -113,9 +110,6 @@
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
     outline: 3px solid transparent;
     outline-offset: 2px;
@@ -129,9 +123,6 @@
 
 @supports not selector(:has) {
   .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
     outline: 3px solid transparent;
     outline-offset: 2px;
@@ -310,7 +301,7 @@
 
 .navds-combobox__list-item--focus,
 .navds-combobox__list--with-hover
-  .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
   background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
   cursor: pointer;
   border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));

@navikt/core/css/form/confirmation-panel.css

@@ -25,6 +25,10 @@
   background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
 }
 
+.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
+  color: var(--a-text-default);
+}
+
 @media (forced-colors: active) {
   .navds-confirmation-panel__inner::before {
     content: "";

@navikt/core/css/form/error-summary.css

@@ -9,11 +9,17 @@
   padding: var(--a-spacing-3);
 }
 
-.navds-error-summary:focus-visible {
-  box-shadow: var(--a-shadow-focus);
+.navds-error-summary__heading:focus {
   outline: none;
 }
 
+.navds-error-summary:focus-visible,
+.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
+  box-shadow:
+    0 0 0 1px var(--a-border-on-inverted),
+    0 0 0 4px var(--a-border-focus);
+}
+
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
     box-shadow: var(--a-shadow-focus);

@navikt/core/css/form/radio-checkbox.css

@@ -94,7 +94,7 @@
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
     0 0 0 4px var(--a-border-focus);
 }
 
@@ -102,16 +102,11 @@
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
     box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
       0 0 0 4px var(--a-border-focus);
   }
 }
 
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
-}
-
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;
@@ -128,9 +123,14 @@
   transform: translate(0.25rem, -50%);
 }
 
-.navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
 }
 
 .navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
@@ -144,7 +144,7 @@
   transform: translate(var(--a-spacing-1-alt));
   pointer-events: none;
 
-/* Fixed edcase where when using in shadow-dom, svg will not center */
+  /* Fixed edcase where when using in shadow-dom, svg will not center */
   display: flex;
   align-items: center;
 }
@@ -166,7 +166,7 @@
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow:
-    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
@@ -175,7 +175,7 @@
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
     box-shadow:
-      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
       0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
       0 0 0 4px var(--a-border-focus);
   }
@@ -183,14 +183,14 @@
 
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
@@ -206,19 +206,19 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
   .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
   }
 }
 

@navikt/core/css/form/search.css

@@ -95,7 +95,7 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, 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-hover)));
 }
 
 .navds-search__button-clear:focus-visible {
@@ -134,12 +134,12 @@
     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 {
+.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
   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)));
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
   z-index: 1;
 }
 
@@ -155,7 +155,7 @@
 
 .navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
     var(--a-shadow-focus);
 }
 

@navikt/core/css/form/select.css

@@ -29,12 +29,13 @@
 }
 
 .navds-select__input:hover {
-  border-color: var(--ac-select-hover-bg, var(--a-border-action));
+  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
   cursor: pointer;
 }
 
 .navds-select__input:focus-visible {
   outline: none;
+  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
   box-shadow: var(--a-shadow-focus);
 }
 

@navikt/core/css/form/text-field.css

@@ -41,13 +41,14 @@
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, 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-hover)));
 }
 
 .navds-text-field__input:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
 }
 
 @supports not selector(:focus-visible) {

@navikt/core/css/form/textarea.css

@@ -20,18 +20,9 @@
   --__ac-textarea-counter-error-text: initial;
 }
 
-.navds-textarea__wrapper {
-  --__ac-textarea-height: initial;
-
-  position: relative;
-  min-width: 100%;
-}
-
-.navds-textarea__input:first-child {
-  height: var(--__ac-textarea-height);
-}
-
 .navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
   appearance: none;
   padding: var(--a-spacing-2);
   background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
@@ -48,13 +39,14 @@
 }
 
 .navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, 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-hover)));
 }
 
 .navds-textarea__input:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
 }
 
 @supports not selector(:focus-visible) {
@@ -70,7 +62,7 @@
 }
 
 .navds-textarea__counter {
-  margin-top: var(--a-spacing-05);
+  margin-top: -0.375rem;
   color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
 }
 
@@ -82,7 +74,7 @@
   display: none;
 }
 
-.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
   display: initial;
 }
 

@navikt/core/css/grid.css

@@ -1,217 +0,0 @@
-/**************************
- * .navds-grid *
- **************************/
-
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--a-spacing-6);
-  }
-}
-
-/**************************
- * .navds-grid__cell *
- **************************/
-
-.navds-grid__cell--xs-1 {
-  grid-column: span 1;
-}
-
-.navds-grid__cell--xs-2 {
-  grid-column: span 2;
-}
-
-.navds-grid__cell--xs-3 {
-  grid-column: span 3;
-}
-
-.navds-grid__cell--xs-4 {
-  grid-column: span 4;
-}
-
-.navds-grid__cell--xs-5 {
-  grid-column: span 5;
-}
-
-.navds-grid__cell--xs-6 {
-  grid-column: span 6;
-}
-
-.navds-grid__cell--xs-7 {
-  grid-column: span 7;
-}
-
-.navds-grid__cell--xs-8 {
-  grid-column: span 8;
-}
-
-.navds-grid__cell--xs-9 {
-  grid-column: span 9;
-}
-
-.navds-grid__cell--xs-10 {
-  grid-column: span 10;
-}
-
-.navds-grid__cell--xs-11 {
-  grid-column: span 11;
-}
-
-.navds-grid__cell--xs-12 {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-grid__cell--sm-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--sm-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--sm-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--sm-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--sm-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--sm-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--sm-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--sm-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--sm-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--sm-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--sm-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--sm-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-grid__cell--md-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--md-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--md-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--md-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--md-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--md-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--md-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--md-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--md-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--md-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--md-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--md-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-grid__cell--lg-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--lg-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--lg-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--lg-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--lg-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--lg-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--lg-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--lg-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--lg-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--lg-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--lg-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--lg-12 {
-    grid-column: span 12;
-  }
-}

@navikt/core/css/help-text.css

@@ -53,6 +53,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
+  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
 }
 
 @supports not selector(:focus-visible) {

@navikt/core/css/index.css

@@ -1,11 +1,9 @@
 @charset "UTF-8";
 @import "baseline/index.css";
 @import "typography.css";
-@import "grid.css";
 @import "accordion.css";
 @import "alert.css";
 @import "button.css";
-@import "content-container.css";
 @import "chat.css";
 @import "chips.css";
 @import "copybutton.css";

@navikt/core/css/link-panel.css

@@ -9,12 +9,12 @@
 
 .navds-link-panel:hover .navds-link-panel__title {
   text-decoration: underline;
-  color: var(--ac-link-panel-hover-text, var(--a-text-action));
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
 }
 
 .navds-link-panel:hover {
   box-shadow: var(--a-shadow-small);
-  border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
 }
 
 .navds-link-panel:focus-visible {

@navikt/core/css/modal.css

@@ -146,7 +146,7 @@
 
 @keyframes akselModalFadeIn {
   from {
-    opacity: 0;
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
     transform: translate3d(0, calc(5% + 4px), 0);
   }
 

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.17.5",
+  "version": "6.1.1",
   "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.17.5",
+    "@navikt/ds-tokens": "^6.1.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/primitives/bleed.css

@@ -4,11 +4,13 @@
   --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
   --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
   --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
   --__ac-bleed-margin-block-xs: initial;
   --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
   --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
   --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
   --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
 
   /** defaults */
   --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
@@ -24,11 +26,13 @@
   --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
   --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
   --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
   --__ac-bleed-padding-block-xs: initial;
   --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
   --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
   --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
   --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
 
   /** defaults */
   --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
@@ -85,3 +89,15 @@
     --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}

@navikt/core/css/primitives/box.css

@@ -4,16 +4,19 @@
   --__ac-box-padding-md: var(--__ac-box-padding-sm);
   --__ac-box-padding-lg: var(--__ac-box-padding-md);
   --__ac-box-padding-xl: var(--__ac-box-padding-lg);
+  --__ac-box-padding-2xl: var(--__ac-box-padding-xl);
   --__ac-box-padding-inline-xs: initial;
   --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
   --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
   --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
   --__ac-box-padding-block-xs: initial;
   --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
   --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
   --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
   --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
+  --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
   --__ac-box-padding: var(--__ac-box-padding-xs);
   --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -26,6 +29,7 @@
   --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
   --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
   --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
   --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
 
   padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -73,3 +77,12 @@
     --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-2xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
+  }
+}

@navikt/core/css/primitives/hgrid.css

@@ -4,12 +4,14 @@
   --__ac-hgrid-columns-md: initial;
   --__ac-hgrid-columns-lg: initial;
   --__ac-hgrid-columns-xl: initial;
+  --__ac-hgrid-columns-2xl: initial;
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
   --__ac-hgrid-gap-xs: initial;
   --__ac-hgrid-gap-sm: initial;
   --__ac-hgrid-gap-md: initial;
   --__ac-hgrid-gap-lg: initial;
   --__ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap-2xl: initial;
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-align: initial;
 
@@ -55,3 +57,22 @@
     );
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-2xl,
+      var(
+        --__ac-hgrid-columns-xl,
+        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
+      )
+    );
+    --__ac-hgrid-gap: var(
+      --__ac-hgrid-gap-2xl,
+      var(
+        --__ac-hgrid-gap-xl,
+        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
+      )
+    );
+  }
+}

@navikt/core/css/primitives/responsive.css

@@ -45,3 +45,15 @@
     display: none !important;
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-responsive__below--2xl {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1439px) {
+  .navds-responsive__above--2xl {
+    display: none !important;
+  }
+}

@navikt/core/css/primitives/stack.css

@@ -5,24 +5,28 @@
   --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
   --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
   --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
+  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
   --__ac-stack-justify-xs: initial;
   --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
   --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
   --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
   --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
   --__ac-stack-justify: var(--__ac-stack-justify-xs);
   --__ac-stack-align-xs: initial;
   --__ac-stack-align-sm: var(--__ac-stack-align-xs);
   --__ac-stack-align-md: var(--__ac-stack-align-sm);
   --__ac-stack-align-lg: var(--__ac-stack-align-md);
   --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
   --__ac-stack-align: var(--__ac-stack-align-xs);
   --__ac-stack-direction-xs: initial;
   --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
   --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
   --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
   --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
   --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
@@ -78,3 +82,12 @@
     --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+    --__ac-stack-align: var(--__ac-stack-align-2xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-2xl);
+  }
+}

@navikt/core/css/read-more.css

@@ -33,6 +33,7 @@
 
 .navds-read-more__button:hover {
   background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
+  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
 }
 
 .navds-read-more__button:active {

@navikt/core/css/stepper.css

@@ -220,6 +220,10 @@ button.navds-stepper__step {
   color: var(--ac-stepper-active, var(--a-text-action-selected));
 }
 
+.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)) {
+  color: var(--ac-stepper-hover-active, var(--a-text-action-hover));
+}
+
 :where(.navds-stepper__step:hover) .navds-stepper__content {
   text-decoration: underline;
 }
@@ -239,8 +243,7 @@ button.navds-stepper__step {
 }
 
 :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
-  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
-  background-color: var(--ac-stepper-text, var(--a-surface-action));
+  background-color: var(--ac-stepper-text, var(--a-surface-action-hover));
 }
 
 /* Non-interactive */

@navikt/core/css/tabs.css

@@ -58,7 +58,7 @@
 }
 
 .navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
   color: var(--ac-tabs-selected-text, var(--a-text-default));
 }
 

@navikt/core/css/tokens.json

@@ -40,6 +40,7 @@
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-secondary-hover-border": "--a-border-action-hover",
     "--ac-button-secondary-focus-border": "--a-border-action",
     "--ac-button-secondary-active-text": "--a-text-on-action",
     "--ac-button-secondary-active-bg": "--a-surface-action-active",
@@ -117,7 +118,7 @@
     "--ac-copybutton-border-radius": "--a-border-radius-medium",
     "--ac-copybutton-action-text": "--a-text-action",
     "--ac-copybutton-action-bg": "--a-surface-transparent",
-    "--ac-copybutton-action-hover-text": "--a-text-action",
+    "--ac-copybutton-action-hover-text": "--a-text-action-hover",
     "--ac-copybutton-action-hover-bg": "--a-surface-hover",
     "--ac-copybutton-action-active-text": "--a-icon-success",
     "--ac-copybutton-neutral-text": "--a-text-subtle",
@@ -161,13 +162,15 @@
     "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle"
   },
   "helptext": {
+    "--ac-help-text-popover-bg": "--a-surface-info-subtle",
     "--ac-help-text-button-color": "--a-surface-action",
-    "--ac-help-text-popover-bg": "--a-surface-info-subtle"
+    "--ac-help-text-button-hover-color": "--a-surface-action-hover",
+    "--ac-help-text-button-active-color": "--a-surface-action-active"
   },
   "linkpanel": {
     "--ac-link-panel-text": "--a-text-default",
-    "--ac-link-panel-hover-text": "--a-text-action",
-    "--ac-link-panel-hover-border": "--a-border-action"
+    "--ac-link-panel-hover-text": "--a-text-action-hover",
+    "--ac-link-panel-hover-border": "--a-border-action-hover"
   },
   "link": {
     "--ac-link-text": "--a-text-action",
@@ -217,6 +220,7 @@
   "readmore": {
     "--ac-read-more-text": "--a-text-action",
     "--ac-read-more-hover-bg": "--a-surface-hover",
+    "--ac-read-more-hover-text": "--a-text-action-hover",
     "--ac-read-more-active-bg": "--a-surface-active",
     "--ac-read-more-line": "--a-border-divider"
   },
@@ -232,6 +236,7 @@
     "--ac-stepper-active-bg": "--a-surface-action-selected",
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
+    "--ac-stepper-hover-active": "--a-text-action-hover",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
@@ -258,7 +263,7 @@
     "--ac-tabs-border": "--a-border-divider",
     "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
-    "--ac-tabs-selected-border": "--a-border-action",
+    "--ac-tabs-selected-border": "--a-border-action-selected",
     "--ac-tabs-selected-text": "--a-text-default",
     "--ac-tabs-focus-text": "--a-text-default"
   },
@@ -361,7 +366,7 @@
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
     "--ac-radio-checkbox-border": "--a-border-default",
-    "--ac-radio-checkbox-action": "--a-surface-action",
+    "--ac-radio-checkbox-action": "--a-surface-action-selected",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
     "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
@@ -372,9 +377,9 @@
   },
   "search": {
     "--ac-search-button-border": "--a-border-default",
-    "--ac-search-button-border-hover": "--a-border-action",
+    "--ac-search-button-border-hover": "--a-border-action-hover",
     "--ac-search-clear-icon": "--a-text-default",
-    "--ac-search-clear-icon-hover": "--a-text-action",
+    "--ac-search-clear-icon-hover": "--a-text-action-hover",
     "--ac-search-button-focus-active-border": "--a-surface-default",
     "--ac-search-error-border": "--a-border-danger"
   },
@@ -400,7 +405,8 @@
     "--ac-select-bg": "--a-surface-default",
     "--ac-select-text": "--a-text-default",
     "--ac-select-border": "--a-border-default",
-    "--ac-select-hover-bg": "--a-border-action",
+    "--ac-select-hover-border": "--a-border-action-hover",
+    "--ac-select-active-border": "--a-border-action-selected",
     "--ac-select-error-border": "--a-surface-danger"
   },
   "switch": {
@@ -418,7 +424,8 @@
     "--ac-textfield-border": "--a-border-default",
     "--ac-textfield-text": "--a-text-default",
     "--ac-textfield-placeholder": "--a-text-subtle",
-    "--ac-textfield-hover-border": "--a-border-action",
+    "--ac-textfield-hover-border": "--a-border-action-hover",
+    "--ac-textfield-active-border": "--a-border-action-selected",
     "--ac-textfield-error-border": "--a-border-danger"
   },
   "textarea": {
@@ -426,7 +433,8 @@
     "--ac-textarea-border": "--a-border-default",
     "--ac-textarea-text": "--a-text-default",
     "--ac-textarea-placeholder": "--a-text-subtle",
-    "--ac-textarea-hover-border": "--a-border-action",
+    "--ac-textarea-hover-border": "--a-border-action-hover",
+    "--ac-textarea-active-border": "--a-border-action-selected",
     "--ac-textarea-counter-text": "--a-text-subtle",
     "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
@@ -435,6 +443,7 @@
     "--ac-dropdown-text": "--a-text-default",
     "--ac-dropdown-item-text": "--a-text-action",
     "--ac-dropdown-item-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-dropdown-item-hover-text": "--a-text-action-hover",
     "--ac-dropdown-item-active-bg": "--a-surface-action-active",
     "--ac-dropdown-item-active-text": "--a-text-on-active"
   },

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,107 @@
 # @navikt/ds-react
 
+## 6.1.1
+
+### Patch Changes
+
+- Modal: Fikser uønsket lukking ved klikk-og-dra mellom backdrop og modal (f.eks. ved markering av tekst) dersom `closeOnBackdropClick` er `true`. ([#2752](https://github.com/navikt/aksel/pull/2752))
+
+- Modal: Endre title på lukkeknapp til bare 'Lukk' ([#2688](https://github.com/navikt/aksel/pull/2688))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.1.1
+  - @navikt/aksel-icons@6.1.1
+
+## 6.1.0
+
+### Minor Changes
+
+- Komponenter støtter nå lokal import `@navikt/ds-react/Button`, [Dokumentasjon](https://aksel.nav.no/grunnleggende/kode/nextjs). ([#2745](https://github.com/navikt/aksel/pull/2745))
+
+### Patch Changes
+
+- Modal: Bedre feilmeldinger ved feil bruk av props ([#2744](https://github.com/navikt/aksel/pull/2744))
+
+- Modal: Ikke opphev scroll lock ved lukking av nesta modal (DatePicker) ([#2743](https://github.com/navikt/aksel/pull/2743))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.1.0
+  - @navikt/aksel-icons@6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Search: Fjern 'type' fra SearchProps ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- OverridableComponent: Fikset feil som tillot vilkårlige props ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Grid, ContentContainer: Komponenter er fjernet fra systemet. [Se migreringsguide](https://aksel.nav.no/grunnleggende/kode/migrering#dd2cfa9fb1d1). ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Table: SortState.direction har nå `none` tilgjengelig: `"ascending" | "descending" | "none"` ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Modal: Strengere prop-typer ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Minor Changes
+
+- SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Patch Changes
+
+- Updated dependencies [[`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522)]:
+  - @navikt/ds-tokens@6.0.0
+  - @navikt/aksel-icons@6.0.0
+
+## 5.18.3
+
+### Patch Changes
+
+- Tooltip: Fikset regresjon der bruk av Tooltip ga hydration-error i nextjs ([#2738](https://github.com/navikt/aksel/pull/2738))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.3
+  - @navikt/aksel-icons@5.18.3
+
+## 5.18.2
+
+### Patch Changes
+
+- Modal: Oppdatert intern håntering av context i komponent ([#2714](https://github.com/navikt/aksel/pull/2714))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.2
+  - @navikt/aksel-icons@5.18.2
+
+## 5.18.1
+
+### Patch Changes
+
+- Panel: Komponent er nå markert som deprecated. Bruk `Box` i fremtiden. ([#2712](https://github.com/navikt/aksel/pull/2712))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.1
+  - @navikt/aksel-icons@5.18.1
+
+## 5.18.0
+
+### Minor Changes
+
+- Portal: Ny komponent `Portal` som lar deg enkelt bruke `createPortal`, også på serversiden ([#2697](https://github.com/navikt/aksel/pull/2697))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.0
+  - @navikt/aksel-icons@5.18.0
+
 ## 5.17.5
 
 ### Patch Changes
@@ -1026,7 +1128,7 @@
 
 ### Patch Changes
 
-- CopyButton: Fjernet use-client directive fra komponent. (warning i vite/rollup)
+- CopyButton: Fjernet use client directive fra komponent. (warning i vite/rollup)
 
 ## 3.2.0
 

@navikt/core/react/jest-setup.ts

@@ -1,7 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));

@navikt/core/react/jest.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  transform: {
-    "^.+\\.tsx?$": "ts-jest",
-  },
-  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
-  testEnvironment: "jsdom",
-};

@navikt/core/react/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.17.5",
-  "description": "Aksel react-components for NAV designsystem",
-  "author": "Aksel | NAV designsystem team",
+  "version": "6.1.1",
+  "description": "React components from the Norwegian Labour and Welfare Administration.",
+  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
   "keywords": [
     "react",
     "typescript",
-    "javascript"
+    "javascript",
+    "NAV"
   ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/navikt/aksel.git"
   },
   "sideEffects": false,
-  "main": "./cjs/index.js",
-  "module": "./esm/index.js",
   "typings": "./esm/index.d.ts",
   "publishConfig": {
     "access": "public",
@@ -25,26 +24,541 @@
     "/cjs",
     "/esm",
     "/src",
-    "_docs.json",
     "!**/*.tsbuildinfo"
   ],
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      }
+    },
+    "./Accordion": {
+      "import": {
+        "types": "./esm/accordion/index.d.ts",
+        "default": "./esm/accordion/index.js"
+      },
+      "require": {
+        "types": "./cjs/accordion/index.d.ts",
+        "default": "./cjs/accordion/index.js"
+      }
+    },
+    "./Alert": {
+      "import": {
+        "types": "./esm/alert/index.d.ts",
+        "default": "./esm/alert/index.js"
+      },
+      "require": {
+        "types": "./cjs/alert/index.d.ts",
+        "default": "./cjs/alert/index.js"
+      }
+    },
+    "./Button": {
+      "import": {
+        "types": "./esm/button/index.d.ts",
+        "default": "./esm/button/index.js"
+      },
+      "require": {
+        "types": "./cjs/button/index.d.ts",
+        "default": "./cjs/button/index.js"
+      }
+    },
+    "./Chat": {
+      "import": {
+        "types": "./esm/chat/index.d.ts",
+        "default": "./esm/chat/index.js"
+      },
+      "require": {
+        "types": "./cjs/chat/index.d.ts",
+        "default": "./cjs/chat/index.js"
+      }
+    },
+    "./Chips": {
+      "import": {
+        "types": "./esm/chips/index.d.ts",
+        "default": "./esm/chips/index.js"
+      },
+      "require": {
+        "types": "./cjs/chips/index.d.ts",
+        "default": "./cjs/chips/index.js"
+      }
+    },
+    "./CopyButton": {
+      "import": {
+        "types": "./esm/copybutton/index.d.ts",
+        "default": "./esm/copybutton/index.js"
+      },
+      "require": {
+        "types": "./cjs/copybutton/index.d.ts",
+        "default": "./cjs/copybutton/index.js"
+      }
+    },
+    "./DatePicker": {
+      "import": {
+        "types": "./esm/date/datepicker/index.d.ts",
+        "default": "./esm/date/datepicker/index.js"
+      },
+      "require": {
+        "types": "./cjs/date/datepicker/index.d.ts",
+        "default": "./cjs/date/datepicker/index.js"
+      }
+    },
+    "./MonthPicker": {
+      "import": {
+        "types": "./esm/date/monthpicker/index.d.ts",
+        "default": "./esm/date/monthpicker/index.js"
+      },
+      "require": {
+        "types": "./cjs/date/monthpicker/index.d.ts",
+        "default": "./cjs/date/monthpicker/index.js"
+      }
+    },
+    "./Dropdown": {
+      "import": {
+        "types": "./esm/dropdown/index.d.ts",
+        "default": "./esm/dropdown/index.js"
+      },
+      "require": {
+        "types": "./cjs/dropdown/index.d.ts",
+        "default": "./cjs/dropdown/index.js"
+      }
+    },
+    "./ExpansionCard": {
+      "import": {
+        "types": "./esm/expansion-card/index.d.ts",
+        "default": "./esm/expansion-card/index.js"
+      },
+      "require": {
+        "types": "./cjs/expansion-card/index.d.ts",
+        "default": "./cjs/expansion-card/index.js"
+      }
+    },
+    "./GuidePanel": {
+      "import": {
+        "types": "./esm/guide-panel/index.d.ts",
+        "default": "./esm/guide-panel/index.js"
+      },
+      "require": {
+        "types": "./cjs/guide-panel/index.d.ts",
+        "default": "./cjs/guide-panel/index.js"
+      }
+    },
+    "./HelpText": {
+      "import": {
+        "types": "./esm/help-text/index.d.ts",
+        "default": "./esm/help-text/index.js"
+      },
+      "require": {
+        "types": "./cjs/help-text/index.d.ts",
+        "default": "./cjs/help-text/index.js"
+      }
+    },
+    "./InternalHeader": {
+      "import": {
+        "types": "./esm/internal-header/index.d.ts",
+        "default": "./esm/internal-header/index.js"
+      },
+      "require": {
+        "types": "./cjs/internal-header/index.d.ts",
+        "default": "./cjs/internal-header/index.js"
+      }
+    },
+    "./Bleed": {
+      "import": {
+        "types": "./esm/layout/bleed/index.d.ts",
+        "default": "./esm/layout/bleed/index.js"
+      },
+      "require": {
+        "types": "./cjs/layout/bleed/index.d.ts",
+        "default": "./cjs/layout/bleed/index.js"
+      }
+    },
+    "./Box": {
+      "import": {
+        "types": "./esm/layout/box/index.d.ts",
+        "default": "./esm/layout/box/index.js"
+      },
+      "require": {
+        "types": "./cjs/layout/box/index.d.ts",
+        "default": "./cjs/layout/box/index.js"
+      }
+    },
+    "./HGrid": {
+      "import": {
+        "types": "./esm/layout/grid/index.d.ts",
+        "default": "./esm/layout/grid/index.js"
+      },
+      "require": {
+        "types": "./cjs/layout/grid/index.d.ts",
+        "default": "./cjs/layout/grid/index.js"
+      }
+    },
+    "./Page": {
+      "import": {
+        "types": "./esm/layout/page/index.d.ts",
+        "default": "./esm/layout/page/index.js"
+      },
+      "require": {
+        "types": "./cjs/layout/page/index.d.ts",
+        "default": "./cjs/layout/page/index.js"
+      }
+    },
+    "./Responsive": {
+      "import": {
+        "types": "./esm/layout/responsive/index.d.ts",
+        "default": "./esm/layout/responsive/index.js"
+      },
+      "require": {
+        "types": "./cjs/layout/responsive/index.d.ts",
+        "default": "./cjs/layout/responsive/index.js"
+      }
+    },
+    "./Stack": {
+      "import": {
+        "types": "./esm/layout/stack/index.d.ts",
+        "default": "./esm/layout/stack/index.js"
+      },
+      "require": {
+        "types": "./cjs/layout/stack/index.d.ts",
+        "default": "./cjs/layout/stack/index.js"
+      }
+    },
+    "./Link": {
+      "import": {
+        "types": "./esm/link/index.d.ts",
+        "default": "./esm/link/index.js"
+      },
+      "require": {
+        "types": "./cjs/link/index.d.ts",
+        "default": "./cjs/link/index.js"
+      }
+    },
+    "./LinkPanel": {
+      "import": {
+        "types": "./esm/link-panel/index.d.ts",
+        "default": "./esm/link-panel/index.js"
+      },
+      "require": {
+        "types": "./cjs/link-panel/index.d.ts",
+        "default": "./cjs/link-panel/index.js"
+      }
+    },
+    "./List": {
+      "import": {
+        "types": "./esm/list/index.d.ts",
+        "default": "./esm/list/index.js"
+      },
+      "require": {
+        "types": "./cjs/list/index.d.ts",
+        "default": "./cjs/list/index.js"
+      }
+    },
+    "./Loader": {
+      "import": {
+        "types": "./esm/loader/index.d.ts",
+        "default": "./esm/loader/index.js"
+      },
+      "require": {
+        "types": "./cjs/loader/index.d.ts",
+        "default": "./cjs/loader/index.js"
+      }
+    },
+    "./Modal": {
+      "import": {
+        "types": "./esm/modal/index.d.ts",
+        "default": "./esm/modal/index.js"
+      },
+      "require": {
+        "types": "./cjs/modal/index.d.ts",
+        "default": "./cjs/modal/index.js"
+      }
+    },
+    "./Portal": {
+      "import": {
+        "types": "./esm/portal/index.d.ts",
+        "default": "./esm/portal/index.js"
+      },
+      "require": {
+        "types": "./cjs/portal/index.d.ts",
+        "default": "./cjs/portal/index.js"
+      }
+    },
+    "./Pagination": {
+      "import": {
+        "types": "./esm/pagination/index.d.ts",
+        "default": "./esm/pagination/index.js"
+      },
+      "require": {
+        "types": "./cjs/pagination/index.d.ts",
+        "default": "./cjs/pagination/index.js"
+      }
+    },
+    "./Popover": {
+      "import": {
+        "types": "./esm/popover/index.d.ts",
+        "default": "./esm/popover/index.js"
+      },
+      "require": {
+        "types": "./cjs/popover/index.d.ts",
+        "default": "./cjs/popover/index.js"
+      }
+    },
+    "./Provider": {
+      "import": {
+        "types": "./esm/provider/index.d.ts",
+        "default": "./esm/provider/index.js"
+      },
+      "require": {
+        "types": "./cjs/provider/index.d.ts",
+        "default": "./cjs/provider/index.js"
+      }
+    },
+    "./ReadMore": {
+      "import": {
+        "types": "./esm/read-more/index.d.ts",
+        "default": "./esm/read-more/index.js"
+      },
+      "require": {
+        "types": "./cjs/read-more/index.d.ts",
+        "default": "./cjs/read-more/index.js"
+      }
+    },
+    "./Skeleton": {
+      "import": {
+        "types": "./esm/skeleton/index.d.ts",
+        "default": "./esm/skeleton/index.js"
+      },
+      "require": {
+        "types": "./cjs/skeleton/index.d.ts",
+        "default": "./cjs/skeleton/index.js"
+      }
+    },
+    "./Stepper": {
+      "import": {
+        "types": "./esm/stepper/index.d.ts",
+        "default": "./esm/stepper/index.js"
+      },
+      "require": {
+        "types": "./cjs/stepper/index.d.ts",
+        "default": "./cjs/stepper/index.js"
+      }
+    },
+    "./Table": {
+      "import": {
+        "types": "./esm/table/index.d.ts",
+        "default": "./esm/table/index.js"
+      },
+      "require": {
+        "types": "./cjs/table/index.d.ts",
+        "default": "./cjs/table/index.js"
+      }
+    },
+    "./Tabs": {
+      "import": {
+        "types": "./esm/tabs/index.d.ts",
+        "default": "./esm/tabs/index.js"
+      },
+      "require": {
+        "types": "./cjs/tabs/index.d.ts",
+        "default": "./cjs/tabs/index.js"
+      }
+    },
+    "./Tag": {
+      "import": {
+        "types": "./esm/tag/index.d.ts",
+        "default": "./esm/tag/index.js"
+      },
+      "require": {
+        "types": "./cjs/tag/index.d.ts",
+        "default": "./cjs/tag/index.js"
+      }
+    },
+    "./Timeline": {
+      "import": {
+        "types": "./esm/timeline/index.d.ts",
+        "default": "./esm/timeline/index.js"
+      },
+      "require": {
+        "types": "./cjs/timeline/index.d.ts",
+        "default": "./cjs/timeline/index.js"
+      }
+    },
+    "./ToggleGroup": {
+      "import": {
+        "types": "./esm/toggle-group/index.d.ts",
+        "default": "./esm/toggle-group/index.js"
+      },
+      "require": {
+        "types": "./cjs/toggle-group/index.d.ts",
+        "default": "./cjs/toggle-group/index.js"
+      }
+    },
+    "./Tooltip": {
+      "import": {
+        "types": "./esm/tooltip/index.d.ts",
+        "default": "./esm/tooltip/index.js"
+      },
+      "require": {
+        "types": "./cjs/tooltip/index.d.ts",
+        "default": "./cjs/tooltip/index.js"
+      }
+    },
+    "./Typography": {
+      "import": {
+        "types": "./esm/typography/index.d.ts",
+        "default": "./esm/typography/index.js"
+      },
+      "require": {
+        "types": "./cjs/typography/index.d.ts",
+        "default": "./cjs/typography/index.js"
+      }
+    },
+    "./Utils": {
+      "import": {
+        "types": "./esm/util/index.d.ts",
+        "default": "./esm/util/index.js"
+      },
+      "require": {
+        "types": "./cjs/util/index.d.ts",
+        "default": "./cjs/util/index.js"
+      }
+    },
+    "./Checkbox": {
+      "import": {
+        "types": "./esm/form/checkbox/index.d.ts",
+        "default": "./esm/form/checkbox/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/checkbox/index.d.ts",
+        "default": "./cjs/form/checkbox/index.js"
+      }
+    },
+    "./Radio": {
+      "import": {
+        "types": "./esm/form/radio/index.d.ts",
+        "default": "./esm/form/radio/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/radio/index.d.ts",
+        "default": "./cjs/form/radio/index.js"
+      }
+    },
+    "./Combobox": {
+      "import": {
+        "types": "./esm/form/combobox/index.d.ts",
+        "default": "./esm/form/combobox/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/combobox/index.d.ts",
+        "default": "./cjs/form/combobox/index.js"
+      }
+    },
+    "./ConfirmationPanel": {
+      "import": {
+        "types": "./esm/form/confirmation-panel/index.d.ts",
+        "default": "./esm/form/confirmation-panel/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/confirmation-panel/index.d.ts",
+        "default": "./cjs/form/confirmation-panel/index.js"
+      }
+    },
+    "./ErrorSummary": {
+      "import": {
+        "types": "./esm/form/error-summary/index.d.ts",
+        "default": "./esm/form/error-summary/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/error-summary/index.d.ts",
+        "default": "./cjs/form/error-summary/index.js"
+      }
+    },
+    "./Fieldset": {
+      "import": {
+        "types": "./esm/form/fieldset/index.d.ts",
+        "default": "./esm/form/fieldset/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/fieldset/index.d.ts",
+        "default": "./cjs/form/fieldset/index.js"
+      }
+    },
+    "./Search": {
+      "import": {
+        "types": "./esm/form/search/index.d.ts",
+        "default": "./esm/form/search/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/search/index.d.ts",
+        "default": "./cjs/form/search/index.js"
+      }
+    },
+    "./Select": {
+      "import": {
+        "types": "./esm/form/select/index.d.ts",
+        "default": "./esm/form/select/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/select/index.d.ts",
+        "default": "./cjs/form/select/index.js"
+      }
+    },
+    "./Switch": {
+      "import": {
+        "types": "./esm/form/switch/index.d.ts",
+        "default": "./esm/form/switch/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/switch/index.d.ts",
+        "default": "./cjs/form/switch/index.js"
+      }
+    },
+    "./Textarea": {
+      "import": {
+        "types": "./esm/form/textarea/index.d.ts",
+        "default": "./esm/form/textarea/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/textarea/index.d.ts",
+        "default": "./cjs/form/textarea/index.js"
+      }
+    },
+    "./TextField": {
+      "import": {
+        "types": "./esm/form/textfield/index.d.ts",
+        "default": "./esm/form/textfield/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/textfield/index.d.ts",
+        "default": "./cjs/form/textfield/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "docgen": "yarn ts-node ../../../scripts/docgen.ts",
-    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
+    "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
+    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
     "watch": "tsc --watch -p tsconfig.esm.json",
-    "test": "TZ=UTC jest"
+    "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.17.5",
-    "@navikt/ds-tokens": "^5.17.5",
+    "@navikt/aksel-icons": "^6.1.1",
+    "@navikt/ds-tokens": "^6.1.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
-    "clsx": "^1.2.1",
-    "date-fns": "^2.30.0",
-    "react-day-picker": "8.3.4"
+    "clsx": "^2.1.0",
+    "date-fns": "^3.0.0",
+    "react-day-picker": "8.10.0"
   },
   "devDependencies": {
     "@testing-library/dom": "8.13.0",
@@ -52,20 +566,18 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
-    "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
-    "copyfiles": "^2.4.1",
     "faker": "5.5.3",
     "fast-glob": "3.2.11",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
+    "jsdom": "24.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "swr": "^1.1.2",
-    "ts-jest": "^29.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "tsc-alias": "1.8.8",
+    "typescript": "^5.1.6",
+    "vitest": "^1.2.2"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18.0.0",

@navikt/core/react/src/accordion/accordion.stories.tsx

@@ -1,6 +1,6 @@
+import { StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Accordion, AccordionProps } from ".";
-import { Table } from "..";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
@@ -13,13 +13,15 @@ export default {
     AccordionContent,
     AccordionHeader,
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
   decorators: [
     (Story) => (
       <div
         style={{
           width: "600px",
           minHeight: "100vh",
-          padding: "10rem 0",
           display: "flex",
           flexDirection: "column",
           gap: "1rem",
@@ -29,25 +31,10 @@ export default {
       </div>
     ),
   ],
-  argTypes: {
-    variant: {
-      options: ["default", "neutral"],
-      control: { type: "select" },
-    },
-    headingSize: {
-      options: ["large", "medium", "small", "xsmall"],
-      control: { type: "select" },
-    },
-    size: {
-      options: ["large", "medium", "small"],
-      control: { type: "select" },
-    },
-    nItems: {
-      control: { type: "number" },
-    },
-  },
 };
 
+type Story = StoryObj<typeof Accordion>;
+
 const Content = () => (
   <Accordion.Content>
     Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
@@ -103,22 +90,34 @@ const Item = (props) => {
   );
 };
 
-export const Default = {
-  render: ({ nItems, ...props }) => {
+export const Controls: Story = {
+  render: ({ ...props }) => {
     return (
       <div style={{ width: 500 }}>
         <Accordion {...props}>
-          {[...Array(nItems ? nItems : 2)].map((_, y) => (
+          {[...Array(4)].map((_, y) => (
             <Item key={y} {...props} />
           ))}
         </Accordion>
       </div>
     );
   },
+  argTypes: {
+    variant: {
+      options: ["default", "neutral"],
+      control: { type: "select" },
+    },
+    headingSize: {
+      options: ["large", "medium", "small", "xsmall"],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["large", "medium", "small"],
+      control: { type: "select" },
+    },
+  },
 
   args: {
-    controlled: false,
-    nItems: 2,
     variant: "default",
     headingSize: "medium",
     size: "medium",
@@ -126,37 +125,31 @@ export const Default = {
   },
 };
 
-export const DefaultOpen = {
-  render: ({ nItems, openItems, ...props }) => {
+export const DefaultOpen: Story = {
+  render: () => {
     return (
       <div style={{ width: 500 }}>
-        <Accordion {...props}>
-          {[...Array(nItems ? nItems : 2)].map((_, y) => (
-            <Item key={y} defaultOpen={openItems.includes(y)} {...props} />
+        <Accordion>
+          {[...Array(4)].map((_, y) => (
+            <Item key={y} defaultOpen={y === 2} />
           ))}
         </Accordion>
       </div>
     );
   },
-
-  args: {
-    openItems: [1, 2],
-    controlled: false,
-    nItems: 5,
-    variant: "neutral",
-    headingSize: "large",
-  },
 };
 
-export const Variants = {
+export const Variants: Story = {
   render: () => {
     return (
       <div style={{ width: 500 }} className="colgap">
+        <h3>Default</h3>
         <Accordion>
           {[...Array(2)].map((_, y) => (
             <Item key={y} defaultOpen />
           ))}
         </Accordion>
+        <h3>Neutral</h3>
         <Accordion variant="neutral">
           {[...Array(2)].map((_, y) => (
             <Item key={y} defaultOpen />
@@ -167,96 +160,32 @@ export const Variants = {
   },
 };
 
-export const Controlled = (props) => {
-  const [open, setOpen] = useState(false);
-  const [open2, setOpen2] = useState(false);
-
-  return (
-    <div style={{ width: 500 }}>
-      <Accordion {...props}>
-        <Accordion.Item open={open}>
-          <Accordion.Header onClick={() => setOpen(!open)}>
-            Accordion header text
-          </Accordion.Header>
-          <Content />
-        </Accordion.Item>
-        <Accordion.Item open={open2}>
-          <Accordion.Header onClick={() => setOpen2(!open2)}>
-            Accordion header text
-          </Accordion.Header>
-          <Content />
-        </Accordion.Item>
-      </Accordion>
-    </div>
-  );
-};
-
-export const WithTable = {
-  render: (props) => {
-    const ExampleTable = () => {
-      return (
-        <Table>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>ID</Table.HeaderCell>
-              <Table.HeaderCell>Fornavn</Table.HeaderCell>
-              <Table.HeaderCell>Etternavn</Table.HeaderCell>
-              <Table.HeaderCell>Rolle</Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            <Table.Row>
-              <Table.HeaderCell>1</Table.HeaderCell>
-              <Table.DataCell>Jean-Luc</Table.DataCell>
-              <Table.DataCell>Picard</Table.DataCell>
-              <Table.DataCell>Kaptein</Table.DataCell>
-            </Table.Row>
-            <Table.Row>
-              <Table.HeaderCell>2</Table.HeaderCell>
-              <Table.DataCell>William</Table.DataCell>
-              <Table.DataCell>Riker</Table.DataCell>
-              <Table.DataCell>Kommandør</Table.DataCell>
-            </Table.Row>
-            <Table.Row>
-              <Table.HeaderCell>3</Table.HeaderCell>
-              <Table.DataCell>Geordi</Table.DataCell>
-              <Table.DataCell>La Forge</Table.DataCell>
-              <Table.DataCell>Sjefsingeniør</Table.DataCell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      );
-    };
-
-    const ContentWithTable = () => {
-      return (
-        <Accordion.Content>
-          <ExampleTable />
-        </Accordion.Content>
-      );
-    };
+export const ControlledState: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open2, setOpen2] = useState(false);
 
     return (
       <div style={{ width: 500 }}>
-        <Accordion {...props}>
-          <Accordion.Item>
-            <Accordion.Header>Table of people</Accordion.Header>
-            <ContentWithTable />
+        <Accordion>
+          <Accordion.Item open={open}>
+            <Accordion.Header onClick={() => setOpen(!open)}>
+              Accordion header text
+            </Accordion.Header>
+            <Content />
           </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>Table of people</Accordion.Header>
-            <ContentWithTable />
+          <Accordion.Item open={open2}>
+            <Accordion.Header onClick={() => setOpen2(!open2)}>
+              Accordion header text
+            </Accordion.Header>
+            <Content />
           </Accordion.Item>
         </Accordion>
       </div>
     );
   },
-
-  args: {
-    variant: "default",
-    headingSize: "large",
-    indent: false,
-  },
 };
 
 const SingleHeaderAccordion = ({
@@ -269,9 +198,11 @@ const SingleHeaderAccordion = ({
         <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
         <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item>
+      <Accordion.Item open>
         <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
-        <Accordion.Content>a</Accordion.Content>
+        <Accordion.Content>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Accordion.Content>
       </Accordion.Item>
     </Accordion>
   );
@@ -285,18 +216,73 @@ const headingSizes: AccordionProps["headingSize"][] = [
   "xsmall",
 ];
 
-export const Size = (props) => (
-  <div style={{ width: 500 }} className="colgap">
-    {sizes.map((size) => (
-      <SingleHeaderAccordion key={size} size={size} {...props} />
-    ))}
-  </div>
-);
+export const Size: Story = {
+  render: () => (
+    <div style={{ width: 500 }} className="colgap">
+      {sizes.map((size) => (
+        <SingleHeaderAccordion key={size} size={size} />
+      ))}
+    </div>
+  ),
+};
 
-export const HeadingSize = (props) => (
-  <div style={{ width: 500 }} className="colgap">
-    {headingSizes.map((size) => (
-      <SingleHeaderAccordion key={size} headingSize={size} {...props} />
-    ))}
-  </div>
-);
+export const HeadingSize: Story = {
+  render: () => (
+    <div style={{ width: 500 }} className="colgap">
+      {headingSizes.map((size) => (
+        <SingleHeaderAccordion key={size} headingSize={size} />
+      ))}
+    </div>
+  ),
+};
+
+export const Indent: Story = {
+  render: () => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        <h3>No indent</h3>
+        <Accordion indent>
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+        <h3>Indent</h3>
+        <Accordion indent={false}>
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Variants</h2>
+        {Variants.render?.(...props)}
+      </div>
+      <div>
+        <h2>Size</h2>
+        {Size.render?.(...props)}
+      </div>
+      <div>
+        <h2>HeadingSize</h2>
+        {HeadingSize.render?.(...props)}
+      </div>
+      <div>
+        <h2>DefaultOpen</h2>
+        {DefaultOpen.render?.(...props)}
+      </div>
+      <div>
+        <h2>Indent</h2>
+        {Indent.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/accordion/index.ts

@@ -1 +1,14 @@
+"use client";
 export { type AccordionProps, default as Accordion } from "./Accordion";
+export {
+  default as AccordionHeader,
+  type AccordionHeaderProps,
+} from "./AccordionHeader";
+export {
+  default as AccordionContent,
+  type AccordionContentProps,
+} from "./AccordionContent";
+export {
+  default as AccordionItem,
+  type AccordionItemProps,
+} from "./AccordionItem";

@navikt/core/react/src/alert/alert.stories.tsx

@@ -1,12 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
-import { Alert, AlertProps } from ".";
-import { BodyLong, Heading as DsHeading, Link } from "..";
+import { VStack } from "../layout/stack";
+import { Link } from "../link";
+import { BodyLong, Heading as DsHeading } from "../typography";
+import Alert, { AlertProps } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
   component: Alert,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export default meta;
@@ -20,12 +24,13 @@ const variants: AlertProps["variant"][] = [
   "success",
 ];
 
-export const Default: Story = {
+export const Controls: Story = {
   render: (props) => <Alert {...props} />,
 
   args: {
     children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
     fullWidth: false,
+    inline: false,
     variant: "info",
     size: "medium",
     closeButton: false,
@@ -42,43 +47,18 @@ export const Default: Story = {
   },
 };
 
-export const Small: Story = {
-  render: (props) => {
-    return (
-      <div className="colgap">
-        {variants.map((variant, i) => (
-          <Alert
-            key={variant}
-            variant={variant}
-            size="small"
-            closeButton={props.closeButton}
-          >
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-            )}
-          </Alert>
-        ))}
-      </div>
-    );
-  },
-
-  args: {
-    closeButton: false,
-  },
-};
-
-export const FullWidth = () => {
+export const Variants = () => {
   return (
     <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth>
+        <Alert key={variant} variant={variant}>
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth size="small">
+        <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
@@ -88,24 +68,42 @@ export const FullWidth = () => {
   );
 };
 
+export const FullWidth = () => {
+  return (
+    <VStack gap="4">
+      <Alert variant="info" fullWidth>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" fullWidth size="small">
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
+  );
+};
+
 export const Inline = () => {
   return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline>
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-    </div>
+    <VStack gap="4">
+      <h2>Inline</h2>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
   );
 };
 
@@ -136,82 +134,173 @@ export const Heading = () => {
   );
 };
 
-export const Links = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant) => (
-        <Alert key={variant} variant={variant}>
-          <Link href="#">Id elit esse enim reprehenderit</Link>
-        </Alert>
-      ))}
-    </div>
-  );
-};
-
-const AlertWithCloseButton = ({
-  children,
-  size,
-}: {
-  size?: "medium" | "small";
-  children?: React.ReactNode;
-}) => {
-  const [show, setShow] = React.useState(true);
-
-  return show ? (
-    <Alert
-      variant="warning"
-      size={size}
-      closeButton
-      onClose={() => setShow(false)}
-    >
-      {children || "Content"}
-    </Alert>
-  ) : null;
-};
-
-export const WithCloseButton: Story = {
+export const CloseButton: Story = {
   render: () => {
     return (
-      <div className="colgap">
-        <AlertWithCloseButton />
-        <AlertWithCloseButton>
-          <BodyLong>Ullamco ullamco laborum et commodo sint culpa</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton>
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+      <VStack gap="4">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
           </DsHeading>
           <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
           </BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <BodyLong>Ullamco ullamco laborum et commodo</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+        </Alert>
+        <Alert variant="info" closeButton size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
           </DsHeading>
           <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
           </BodyLong>
-        </AlertWithCloseButton>
-      </div>
+        </Alert>
+      </VStack>
     );
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const buttons = canvas.getAllByTitle("Lukk Alert");
+};
 
-    await step("click button", async () => {
-      await userEvent.click(buttons[0]);
-    });
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="6">
+      <VStack gap="2">
+        <h2>Variant</h2>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant}>
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            )}
+          </Alert>
+        ))}
+      </VStack>
+      <VStack gap="2">
+        <h2>Small</h2>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>FullWidth</h2>
+        <Alert variant="info" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Inline</h2>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Heading</h2>
+        <Alert variant="info">
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small" closeButton>
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
 
-    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
-    expect(buttonsAfter.length).toBe(4);
+      <VStack gap="2">
+        <h2>Links</h2>
+        {variants.map((variant) => (
+          <Alert key={variant} variant={variant}>
+            <Link href="#">Id elit esse enim reprehenderit</Link>
+          </Alert>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
   },
 };

@navikt/core/react/src/alert/index.ts

@@ -1,2 +1,2 @@
-export { default as Alert } from "./Alert";
-export { type AlertProps } from "./Alert";
+"use client";
+export { default as Alert, type AlertProps } from "./Alert";

@navikt/core/react/src/button/button.stories.tsx

@@ -1,15 +1,21 @@
+import { StoryObj } from "@storybook/react";
 import React from "react";
-import { StarIcon } from "@navikt/aksel-icons";
+import { StarIcon as BaseStarIcon } from "@navikt/aksel-icons";
+import { HStack, VStack } from "../layout/stack";
 import { Button } from "./index";
 
 export default {
   title: "ds-react/Button",
   component: Button,
   parameters: {
-    chromatic: { delay: 600 },
+    chromatic: { disable: true },
   },
 };
 
+type Story = StoryObj<typeof Button>;
+
+const StarIcon = () => <BaseStarIcon aria-hidden />;
+
 const variants: (
   | "primary"
   | "secondary"
@@ -28,17 +34,7 @@ const variants: (
   "tertiary-neutral",
 ];
 
-const varSwitch = {
-  primary: "Primary",
-  secondary: "Secondary",
-  tertiary: "Tertiary",
-  danger: "Danger",
-  "primary-neutral": "Primary",
-  "secondary-neutral": "Secondary",
-  "tertiary-neutral": "Tertiary",
-};
-
-export const Default = {
+export const Controls: Story = {
   render: (props) => {
     return (
       <Button
@@ -57,7 +53,7 @@ export const Default = {
     icon: false,
     loading: false,
     iconPosition: "left",
-    children: "Knapp",
+    children: "Button",
     variant: "primary",
     size: "medium",
   },
@@ -91,192 +87,99 @@ export const Default = {
   },
 };
 
-export const Small = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} size="small">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
-
-export const XSmall = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} size="xsmall">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
-
-export const Link = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
-
-export const Loading = {
-  render: () => (
-    <div className="colgap chromatic-ignore">
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading>
-            {varSwitch[variant]}
+function ButtonGrid(props: any) {
+  return (
+    <VStack gap="2">
+      {variants.map((variant) => (
+        <HStack gap="2" key={variant}>
+          <Button variant={variant} {...props}>
+            Button
           </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="small">
-            {varSwitch[variant]}
+          <Button variant={variant} {...props} icon={<StarIcon />}>
+            Button
           </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="xsmall">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-    </div>
-  ),
-
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};
-
-export const Icon = () => (
-  <div className="colgap ">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="small"
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="xsmall"
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-  </div>
-);
-
-export const IconWText = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="small"
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="xsmall"
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} disabled>
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} disabled as="a" href="#">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
-
-export const LoadingWithAs = {
-  render: () => (
-    <div className="colgap chromatic-ignore">
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
           <Button
-            key={variant}
             variant={variant}
-            loading
-            size="small"
-            as="a"
-            href="#"
+            {...props}
+            icon={<StarIcon />}
+            iconPosition="right"
           >
-            {varSwitch[variant]}
+            Button
           </Button>
-        ))}
-      </div>
-    </div>
-  ),
+          <Button variant={variant} {...props} icon={<StarIcon />} />
+        </HStack>
+      ))}
+    </VStack>
+  );
+}
 
+export const Medium: Story = {
+  render: () => <ButtonGrid size="medium" />,
+};
+
+export const Small: Story = {
+  render: () => <ButtonGrid size="small" />,
+};
+
+export const XSmall: Story = {
+  render: () => <ButtonGrid size="xsmall" />,
+};
+
+export const AsLink: Story = {
+  render: () => (
+    <VStack gap="4">
+      <Button href="#" as="a">
+        Button as a-tag
+      </Button>
+      <Button href="#" as="a" disabled>
+        Disabled Button as a-tag
+      </Button>
+    </VStack>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => <ButtonGrid loading />,
+};
+
+export const LoadingAsLink: Story = {
+  render: () => <ButtonGrid loading href="#" as="a" />,
+};
+
+export const Disabled: Story = {
+  render: () => <ButtonGrid disabled />,
+};
+
+export const DisabledAsLink: Story = {
+  render: () => <ButtonGrid disabled href="#" as="a" />,
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="6" align="center">
+      <div>
+        <h2>Medium</h2>
+        <ButtonGrid size="medium" />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <ButtonGrid size="small" />
+      </div>
+      <div>
+        <h2>XSmall</h2>
+        <ButtonGrid size="xsmall" />
+      </div>
+      <div>
+        <h2>As Link</h2>
+        <ButtonGrid as="a" href="#" />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        <ButtonGrid disabled />
+      </div>
+    </VStack>
+  ),
   parameters: {
-    chromatic: { disableSnapshot: true },
+    chromatic: { disable: false },
   },
 };

@navikt/core/react/src/button/index.ts

@@ -1,2 +1,2 @@
-export { default as Button } from "./Button";
-export { type ButtonProps } from "./Button";
+"use client";
+export { default as Button, type ButtonProps } from "./Button";

@navikt/core/react/src/chat/Bubble.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Detail } from "../typography";
 
-export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Bubble text
    */
@@ -15,37 +15,16 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    * Timestamp for sent message
    */
   timestamp?: string;
-  /**
-   * Background color on bubble
-   * @deprecated Use `variant` on Chat instead
-   */
-  backgroundColor?: string;
   /**
    * Overrides hoizontal position of toptext
    */
   toptextPosition?: "left" | "right";
 }
 
-const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
-  (
-    {
-      children,
-      className,
-      name,
-      timestamp,
-      backgroundColor,
-      toptextPosition,
-      ...rest
-    },
-    ref,
-  ) => {
+const Bubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
+  ({ children, className, name, timestamp, toptextPosition, ...rest }, ref) => {
     return (
-      <div
-        ref={ref}
-        className={cl("navds-chat__bubble", className)}
-        style={{ backgroundColor }}
-        {...rest}
-      >
+      <div ref={ref} className={cl("navds-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <h3
             className={cl(

@navikt/core/react/src/chat/Chat.tsx

@@ -29,16 +29,6 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "neutral"
    */
   variant?: "subtle" | "info" | "neutral";
-  /**
-   * Background color on bubbles
-   * @deprecated Use `variant` instead
-   */
-  backgroundColor?: string;
-  /**
-   * Background color for avatar
-   * @deprecated Use `variant` instead
-   */
-  avatarBgColor?: string;
   /**
    * Positions avatar and bubbles
    * @default "left"
@@ -93,8 +83,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       avatar,
       position = "left",
       variant = "neutral",
-      avatarBgColor,
-      backgroundColor,
       toptextPosition,
       size = "medium",
       ...rest
@@ -114,11 +102,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       {...rest}
     >
       {avatar && (
-        <div
-          className="navds-chat__avatar"
-          aria-hidden
-          style={{ backgroundColor: avatarBgColor }}
-        >
+        <div className="navds-chat__avatar" aria-hidden>
           {avatar}
         </div>
       )}
@@ -130,7 +114,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
                 {React.cloneElement(child, {
                   name: name && i === 0 ? name : undefined,
                   timestamp: timestamp && i === 0 ? timestamp : undefined,
-                  backgroundColor,
                   ...child.props,
                 })}
               </BodyLong>

@navikt/core/react/src/chat/chat.stories.tsx

@@ -1,22 +1,12 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Chat } from "../index";
-import { POSITIONS, SIZES } from "./Chat";
+import { VStack } from "../layout/stack";
+import Chat, { POSITIONS, SIZES } from "./Chat";
 
 export default {
   title: "ds-react/Chat",
   component: Chat,
   argTypes: {
-    backgroundColor: {
-      control: {
-        type: "text",
-      },
-    },
-    avatarBgColor: {
-      control: {
-        type: "text",
-      },
-    },
     position: {
       control: { type: "radio" },
       options: POSITIONS,
@@ -30,9 +20,14 @@ export default {
       options: SIZES,
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Chat>;
 
-export const Default = {
+type Story = StoryObj<typeof Chat>;
+
+export const Controls: Story = {
   render: (props) => {
     return (
       <Chat {...props}>
@@ -55,219 +50,292 @@ export const Default = {
   },
 };
 
-export const Small = () => (
-  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00" size="small">
-    <Chat.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Chat.Bubble>
-    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
-    <Chat.Bubble>
-      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-      labore nisi ut.
-    </Chat.Bubble>
-  </Chat>
-);
+export const Size: Story = {
+  render: () => (
+    <VStack gap="4">
+      <h3>Medium</h3>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        size="medium"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Small</h3>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        size="small"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    </VStack>
+  ),
+};
 
-export const Colors = () => (
-  <Chat
-    avatar="NAV"
-    name="NAV"
-    timestamp="01.01.21 14:00"
-    avatarBgColor="var(--a-surface-alt-1-subtle)"
-    backgroundColor="var(--a-surface-warning-subtle)"
-  >
-    <Chat.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Chat.Bubble>
-    <Chat.Bubble backgroundColor="lightYellow">
-      Tempor fugiat amet eu sint in in ullamco.
-    </Chat.Bubble>
-    <Chat.Bubble>
-      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-      labore nisi ut.
-    </Chat.Bubble>
-  </Chat>
-);
+export const Variants: Story = {
+  render: () => (
+    <VStack gap="4">
+      <h3>Info</h3>
+      <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Neutral</h3>
+      <Chat
+        avatar="KN"
+        name="Kari Nordmann"
+        timestamp="01.01.21 14:03"
+        variant="neutral"
+        position="right"
+      >
+        <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+      </Chat>
+      <h3>Subtle</h3>
+      <Chat
+        avatar="ON"
+        name="Ola Nordmann"
+        timestamp="01.01.21 14:07"
+        variant="subtle"
+        position="right"
+      >
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    </VStack>
+  ),
+};
 
-export const Variants = () => (
-  <div className="colgap">
-    <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">
+export const Position: Story = {
+  render: () => (
+    <VStack gap="4">
+      <h3>Default</h3>
+      <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Right</h3>
+      <Chat
+        avatar="KH"
+        name="Kari Høyli"
+        timestamp="01.01.21 14:32"
+        position="right"
+        variant="info"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
+          est dolore incididunt. Occaecat cupidatat magna.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Left</h3>
+      <Chat
+        position="left"
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 15:00"
+      >
+        <Chat.Bubble>
+          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
+          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+          labore sunt aute.
+        </Chat.Bubble>
+      </Chat>
+    </VStack>
+  ),
+};
+
+export const ToptextPosition: Story = {
+  render: () => (
+    <VStack gap="4">
+      <h3>Right</h3>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        toptextPosition="right"
+      >
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Left</h3>
+      <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+        <Chat.Bubble toptextPosition="left">
+          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
+          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+          labore sunt aute.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Left</h3>
+      <Chat
+        name="Kari Høyli"
+        timestamp="01.01.21 14:32"
+        position="right"
+        toptextPosition="left"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
+          est dolore incididunt. Occaecat cupidatat magna.
+        </Chat.Bubble>
+      </Chat>
+      <h3>Right</h3>
+      <Chat
+        name="Kari Høyli"
+        timestamp="01.01.21 14:32"
+        position="right"
+        toptextPosition="right"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
+          est dolore incididunt. Occaecat cupidatat magna.
+        </Chat.Bubble>
+      </Chat>
+    </VStack>
+  ),
+};
+
+export const Avatar: Story = {
+  render: () => (
+    <Chat avatar={<Illustration />}>
       <Chat.Bubble>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </Chat.Bubble>
-    </Chat>
-    <Chat
-      avatar="KN"
-      name="Kari Nordmann"
-      timestamp="01.01.21 14:03"
-      variant="neutral"
-      position="right"
-    >
       <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
-    </Chat>
-    <Chat
-      avatar="ON"
-      name="Ola Nordmann"
-      timestamp="01.01.21 14:07"
-      variant="subtle"
-      position="right"
-    >
       <Chat.Bubble>
         Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
         labore nisi ut.
       </Chat.Bubble>
     </Chat>
-  </div>
-);
+  ),
+};
 
-export const Position = () => (
-  <div className="colgap">
-    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-    <Chat
-      avatar="KH"
-      name="Kari Høyli"
-      timestamp="01.01.21 14:32"
-      position="right"
-      variant="info"
-    >
-      <Chat.Bubble>
-        Reprehenderit pariatur officia exercitation laboris.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
-        dolore incididunt. Occaecat cupidatat magna.
-      </Chat.Bubble>
-    </Chat>
-    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
-      <Chat.Bubble>
-        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
-        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-        labore sunt aute.
-      </Chat.Bubble>
-    </Chat>
-  </div>
-);
+function Illustration() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
+      <path
+        fill="#e7e5e2"
+        d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"
+      />
+      <path
+        fill="#5c4378"
+        d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
+      />
+      <path
+        fill="#d2242a"
+        d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
+      />
+      <path
+        fill="#fff"
+        d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
+      />
+      <path
+        fill="#c52d35"
+        d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
+      />
+      <path
+        fill="#c52d35"
+        d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
+      />
+      <path
+        fill="#c52d35"
+        d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
+      />
+      <path
+        fill="#c52d35"
+        d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
+      />
+      <path
+        fill="#5a1f57"
+        d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
+      />
+      <path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z" />
+      <path
+        fill="#e7e5e2"
+        d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
+      />
+      <path
+        fill="#635e59"
+        d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
+      />
+      <path
+        fill="#d1bfa3"
+        d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
+      />
+      <path
+        fill="#593a32"
+        d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
+      />
+      <path
+        fill="#f6b873"
+        d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
+      />
+      <path
+        fill="#f6b873"
+        d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
+      />
+    </svg>
+  );
+}
 
-export const ToptextPosition = () => (
-  <div className="colgap">
-    <Chat
-      avatar="ON"
-      name="Ola Normann"
-      timestamp="01.01.21 14:00"
-      toptextPosition="right"
-    >
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-    <Chat
-      name="Kari Høyli"
-      timestamp="01.01.21 14:32"
-      position="right"
-      variant="info"
-      toptextPosition="left"
-    >
-      <Chat.Bubble>
-        Reprehenderit pariatur officia exercitation laboris.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
-        dolore incididunt. Occaecat cupidatat magna.
-      </Chat.Bubble>
-    </Chat>
-    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
-      <Chat.Bubble toptextPosition="right">
-        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
-        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-        labore sunt aute.
-      </Chat.Bubble>
-    </Chat>
-  </div>
-);
-
-export const Avatar = () => (
-  <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
-    <Chat.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Chat.Bubble>
-    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
-    <Chat.Bubble>
-      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-      labore nisi ut.
-    </Chat.Bubble>
-  </Chat>
-);
-
-const Illustration = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
-    <path
-      fill="#e7e5e2"
-      d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"
-    />
-    <path
-      fill="#5c4378"
-      d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
-    />
-    <path
-      fill="#d2242a"
-      d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
-    />
-    <path
-      fill="#fff"
-      d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
-    />
-    <path
-      fill="#c52d35"
-      d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
-    />
-    <path
-      fill="#c52d35"
-      d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
-    />
-    <path
-      fill="#c52d35"
-      d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
-    />
-    <path
-      fill="#c52d35"
-      d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
-    />
-    <path
-      fill="#5a1f57"
-      d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
-    />
-    <path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z" />
-    <path
-      fill="#e7e5e2"
-      d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
-    />
-    <path
-      fill="#635e59"
-      d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
-    />
-    <path
-      fill="#d1bfa3"
-      d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
-    />
-    <path
-      fill="#593a32"
-      d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
-    />
-    <path
-      fill="#f6b873"
-      d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
-    />
-    <path
-      fill="#f6b873"
-      d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
-    />
-  </svg>
-);
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Size</h2>
+        {Size.render?.(...props)}
+      </div>
+      <div>
+        <h2>Variants</h2>
+        {Variants.render?.(...props)}
+      </div>
+      <div>
+        <h2>Position</h2>
+        {Position.render?.(...props)}
+      </div>
+      <div>
+        <h2>Toptext</h2>
+        {ToptextPosition.render?.(...props)}
+      </div>
+      <div>
+        <h2>Avatar</h2>
+        {Avatar.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/chat/index.ts

@@ -1 +1,3 @@
+"use client";
 export { default as Chat, type ChatProps } from "./Chat";
+export { default as ChatBubble, type ChatBubbleProps } from "./Bubble";

@navikt/core/react/src/chips/Chips.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
-import RemovableChips, { RemovableChipsProps } from "./Removable";
-import ToggleChips, { ToggleChipsProps } from "./Toggle";
+import RemovableChips, { ChipsRemovableProps } from "./Removable";
+import ToggleChips, { ChipsToggleProps } from "./Toggle";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
@@ -22,13 +22,13 @@ interface ChipsComponent
    * @see 🏷️ {@link ToggleChipsProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Toggle: OverridableComponent<ToggleChipsProps, HTMLButtonElement>;
+  Toggle: OverridableComponent<ChipsToggleProps, HTMLButtonElement>;
   /**
    * Remove filter or the likes on click
    * @see 🏷️ {@link RemovableChipsProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Removable: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
+  Removable: OverridableComponent<ChipsRemovableProps, HTMLButtonElement>;
 }
 
 /**

@navikt/core/react/src/chips/Removable.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 
-export interface RemovableChipsProps
+export interface ChipsRemovableProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
@@ -24,7 +24,7 @@ export interface RemovableChipsProps
 
 export const RemovableChips = forwardRef<
   HTMLButtonElement,
-  RemovableChipsProps
+  ChipsRemovableProps
 >(
   (
     {

@navikt/core/react/src/chips/Toggle.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
-export interface ToggleChipsProps
+export interface ChipsToggleProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
@@ -22,7 +22,7 @@ export interface ToggleChipsProps
 }
 
 export const ToggleChips: OverridableComponent<
-  ToggleChipsProps,
+  ChipsToggleProps,
   HTMLButtonElement
 > = forwardRef(
   (

@navikt/core/react/src/chips/chips.stories.tsx

@@ -1,13 +1,18 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";
 
 const meta: Meta<typeof Chips> = {
   title: "ds-react/Chips",
   component: Chips,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof Chips>;
+
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
 export const Default = (props) => {
@@ -220,3 +225,36 @@ export const Small = () => {
     </div>
   );
 };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        <Default />
+      </div>
+      <div>
+        <h2>Toggle</h2>
+        <h3>Medium</h3>
+        <Toggle size="medium" />
+        <h3>Small</h3>
+        <Toggle size="small" />
+      </div>
+      <div>
+        <h2>Removable</h2>
+        <Removable />
+      </div>
+      <div>
+        <h2>Regular</h2>
+        <Regular />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/chips/index.ts

@@ -1 +1,7 @@
+"use client";
 export { default as Chips, type ChipsProps } from "./Chips";
+export {
+  RemovableChips as ChipsRemovable,
+  type ChipsRemovableProps,
+} from "./Removable";
+export { ToggleChips as ChipsToggle, type ChipsToggleProps } from "./Toggle";

@navikt/core/react/src/copybutton/copy-button.stories.tsx

@@ -32,6 +32,9 @@ export const Default: Story = {
     text: "",
     activeText: "",
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Interaction: Story = {
@@ -210,3 +213,49 @@ export const Disabled: Story = {
     </div>
   ),
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Variants</h2>
+        {Variants.render?.(...props)}
+      </div>
+      <div>
+        <h2>IconPosition</h2>
+        {IconPosition.render?.(...props)}
+      </div>
+      <div>
+        <h2>Sizes</h2>
+        {Sizes.render?.(...props)}
+      </div>
+      <div>
+        <h2>Texts</h2>
+        {Texts.render?.(...props)}
+      </div>
+      <div>
+        <h2>Icons</h2>
+        {Icons.render?.(...props)}
+      </div>
+      <div>
+        <h2>InlineDemo</h2>
+        {InlineDemo.render?.(...props)}
+      </div>
+      <div>
+        <h2>WithTooltip</h2>
+        {WithTooltip.render?.(...props)}
+      </div>
+      <div>
+        <h2>Duration</h2>
+        {Duration.render?.(...props)}
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        {Disabled.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/copybutton/index.ts

@@ -1 +1,2 @@
+"use client";
 export { default as CopyButton, type CopyButtonProps } from "./CopyButton";

@navikt/core/react/src/date/context/useSharedMonthContext.tsx

@@ -1,5 +1,4 @@
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
+import { setYear, startOfMonth } from "date-fns";
 import React, { createContext, useContext, useState } from "react";
 import { useDayPicker } from "react-day-picker";
 import { Matcher, getInitialYear } from "../utils";

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import isWeekend from "date-fns/isWeekend";
+import { isWeekend } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import isWeekend from "date-fns/isWeekend";
+import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -1,9 +1,13 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
-import isSameDay from "date-fns/isSameDay";
+import { isSameDay } from "date-fns";
 import React, { useId, useState } from "react";
-import { useDatepicker, useRangeDatepicker } from "..";
-import { BodyLong, Button, HGrid, Modal, VStack } from "../..";
+import { Button } from "../../button";
+import { HGrid } from "../../layout/grid";
+import { VStack } from "../../layout/stack";
+import Modal from "../../modal/Modal";
+import { BodyLong } from "../../typography";
+import { useDatepicker, useRangeDatepicker } from "../hooks";
 import DatePicker, { DatePickerProps } from "./DatePicker";
 
 const disabledDays = [
@@ -14,8 +18,13 @@ const disabledDays = [
 export default {
   title: "ds-react/Datepicker",
   component: DatePicker,
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof DatePicker>;
 
+type Story = StoryObj<typeof DatePicker>;
+
 type DefaultStoryProps = DatePickerProps & {
   size: "medium" | "small";
   inputfield: boolean;
@@ -470,3 +479,97 @@ export const ModalDemo = () => {
   );
 };
 ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>DropdownCaption</h2>
+        <DropdownCaption />
+      </div>
+      <div>
+        <h2>DisabledDays</h2>
+        <DisabledDays />
+      </div>
+      <div>
+        <h2>ShowWeekNumber</h2>
+        <ShowWeekNumber />
+      </div>
+      <div>
+        <h2>UseDatepicker</h2>
+        <UseDatepicker />
+      </div>
+      <div>
+        <h2>UseRangedDatepicker</h2>
+        <UseRangedDatepicker />
+      </div>
+      <div>
+        <h2>NB</h2>
+        <NB />
+      </div>
+      <div>
+        <h2>NN</h2>
+        <NN />
+      </div>
+      <div>
+        <h2>EN</h2>
+        <EN />
+      </div>
+      <div>
+        <h2>Standalone</h2>
+        <Standalone />
+      </div>
+      <div>
+        <h2>StandaloneRange</h2>
+        <StandaloneRange />
+      </div>
+      <div>
+        <h2>StandaloneMultiple</h2>
+        <StandaloneMultiple />
+      </div>
+      <div>
+        <h2>UserControlled</h2>
+        <UserControlled />
+      </div>
+      <div>
+        <h2>Validering</h2>
+        <Validering />
+      </div>
+      <div>
+        <h2>DisabledInput</h2>
+        <DisabledInput />
+      </div>
+      <div>
+        <h2>ErrorInput</h2>
+        <ErrorInput />
+      </div>
+      <div>
+        <h2>UseRangedDatepickerValidation</h2>
+        <UseRangedDatepickerValidation />
+      </div>
+      <div>
+        <h2>DefaultShownMonth</h2>
+        <DefaultShownMonth />
+      </div>
+      <div>
+        <h2>Size</h2>
+        <Size />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        <Readonly />
+      </div>
+      <div>
+        <h2>StandaloneOptions</h2>
+        <StandaloneOptions />
+      </div>
+      <div>
+        <h2>WeekDayClick</h2>
+        <WeekDayClick />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/date/datepicker/datepicker.test.tsx

@@ -1,7 +1,9 @@
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { DatePicker, useDatepicker } from "..";
+import { describe, test } from "vitest";
+import { useDatepicker } from "../hooks";
+import DatePicker from "./DatePicker";
 
 const App = () => {
   const { datepickerProps, inputProps } = useDatepicker({
@@ -17,8 +19,8 @@ const App = () => {
 };
 
 describe("Render datepicker", () => {
-  // eslint-disable-next-line jest/expect-expect
-  it("Should not crash when e.target is window", async () => {
+  // eslint-disable-next-line vitest/expect-expect
+  test("Should not crash when e.target is window", async () => {
     render(<App />);
 
     // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

@navikt/core/react/src/date/datepicker/index.ts

@@ -0,0 +1,13 @@
+"use client";
+export { default as DatePicker, type DatePickerProps } from "./DatePicker";
+export {
+  useDatepicker,
+  useRangeDatepicker,
+  type DateValidationT,
+  type RangeValidationT,
+} from "../hooks";
+export {
+  DatePickerStandalone,
+  type DatePickerStandaloneProps,
+} from "./DatePickerStandalone";
+export { DatePickerInput, type DateInputProps } from "../parts/DateInput";

@navikt/core/react/src/date/datepicker/parts/DayButton.tsx

@@ -1,4 +1,4 @@
-import format from "date-fns/format";
+import { format } from "date-fns";
 import React, { useRef } from "react";
 import { Button, DayProps, useDayPicker, useDayRender } from "react-day-picker";
 

@navikt/core/react/src/date/datepicker/parts/DropdownCaption.tsx

@@ -1,12 +1,9 @@
-import { max, min } from "date-fns";
-import setMonth from "date-fns/setMonth";
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
+import { max, min, setMonth, setYear, startOfMonth } from "date-fns";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
-import { Select } from "../../../form/Select";
+import { Select } from "../../../form/select";
 import { getMonths, getYears } from "../../utils/get-dates";
 import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
 import WeekRow from "./WeekRow";

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -1,5 +1,4 @@
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isWeekend from "date-fns/isWeekend";
+import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -53,14 +52,9 @@ export interface UseDatepickerOptions
    * Allows input of with 'yy' year format.
    * @default true
    * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
-  /**
-   * Will be removed in a future major-version
-   * @deprecated
-   */
-  openOnFocus?: false;
 }
 
 interface UseDatepickerValue {

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -39,14 +39,9 @@ export interface UseMonthPickerOptions
    * Allows input of with 'yy' year format.
    * @default true
    * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
-  /**
-   * Will be removed in a future major-version
-   * @deprecated
-   */
-  openOnFocus?: boolean;
 }
 
 interface UseMonthPickerValue {