Version Packages (#2084 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
add close button to alert (#2079 )
2026-10-13 17:22:02 +00:00 · 2023-06-29 15:23:12 +02:00 · 2023-06-29 13:43:10 +02:00 · 2023-06-29 13:25:17 +02:00 · 2023-06-28 11:35:27 +02:00 · 2023-06-28 11:25:32 +02:00
218 changed files with 6614 additions and 6114 deletions
@@ -1,6 +1,9 @@
 {
  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "navikt/aksel" }],
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    { "repo": "navikt/aksel" }
+  ],
  "commit": false,
  "fixed": [
    [
@@ -1,17 +1,44 @@
-### :memo: PR Checklist
+### Description

-<!-- Remove non-relevant fields -->
+<!-- PR description/motivation
+add links to project-tasks, slack discussions etc here
+-->

- [ ] :sparkles: New component? Add CSS-mappings to `@navikt/core/css/config/_mappings.js`.
+### Change summary

- [ ] :wastebasket: Are you deprecating a CSS class? (are you removing the last known reference to a CSS class?). Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description.
+<!-- Short summary of changes in PR
+- added variant x
+- fixed bug in y
+-->

- [ ] :balance_scale: Is the feature/component/code sufficiently complex to warrant tests? Add some unit-tests :test_tube:
+### PR Checklist 📝 (Remove fields after check!)

- [ ] :balance_scale: Does the feature/component add some complex user-interactions? Consider adding some [interaction-tests with storybook](https://storybook.js.org/docs/react/writing-tests/interaction-testing) :test_tube:
+#### New component? ✨

- [ ] :boom: Are there breaking changes? Consider adding a codemod for easier migration.
+- Check that component-styling is correctly configured in `@navikt/core/css/config/_mappings.js`. This is needed for correct build and CDN upload.
+- Check that styling is correctly exported from `@navikt/core/css/index.css`
+- Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
+- 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.

- [ ] :test_tube: Are all variations and cases shown in the storybook stories? Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+#### Component-updates 🎉

- [ ] Run `yarn changeset` for version and changelog generation
+- Revalidate if everything under `New component` is still accounted for
+- Deprecating/removing a CSS class? Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description. This helps stylelint-users keep their code clean and bug-free.
+
+#### Documentation 📝
+
+- Add/update component-demos for component `aksel.nav.no/website/pages/eksempler`
+- Create/Update documentation in sanity if needed
+  Note: Props, tokens and examples only updates to sanity on merge to main
+
+#### Versioning 🏷️
+
+- Run `yarn changeset` to generate a version-entry for change.
+- - Bug/hotfix: Patch
+- - New feature: Minor
+- - Breaking change: Major
+- Adding breaking changes? Consider adding a codemod for easier migration.
+- Breaking changes also needs documentation under "Migration"-page on website
@@ -13,7 +13,7 @@ jobs:
  playwright:
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-jammy
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
@@ -28,6 +28,10 @@ jobs:
          node-version: 16.13.0
          cache: yarn

+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
      - name: Restore cache
        uses: actions/cache@v3
        with:
@@ -14,7 +14,7 @@ jobs:
    name: Smoketest Aksel
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-jammy
    steps:
      - uses: actions/setup-node@v3
        with:
@@ -150,4 +150,5 @@ playwright-report/
 /test-results/
 backup-*.tar.gz
 sitemap-urls.json
-*.tar.gz
+*.tar.gz
+searchindex.json
@@ -1,216 +1,91 @@
 # @navikt/aksel-icons

-## 4.1.3
+## 4.5.0

-## 4.1.2
+## 4.4.2

-## 4.1.1
+## 4.4.1

-## 4.1.0
+## 4.1.5

-## 4.0.0
+### Patch Changes

-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))

 ## 3.2.3

 ### Patch Changes

- [#1998](https://github.com/navikt/aksel/pull/1998) [`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner!
-
-  - :sparkles: FileParagraph
-  - :sparkles: FilePlus
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))

 ## 2.9.8

 ### Patch Changes

- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))

 ## 2.9.7

 ### Patch Changes

- :bug: CheckmarkIcon
+- Fikset `CheckmarkIcon`-bug

 ## 2.9.6

 ### Patch Changes

- [#1956](https://github.com/navikt/aksel/pull/1956) [`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset CheckmarkCircleIcon
-
-## 2.9.5
-
-## 2.9.4
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))

 ## 2.9.3

 ### Patch Changes

- [#1950](https://github.com/navikt/aksel/pull/1950) [`c03d53d5a`](https://github.com/navikt/aksel/commit/c03d53d5aa2dc7f06a223d48069fa21ee39bb396) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: BulletList
-  - :tada: NumberList
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
+- Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))

 ## 2.8.15

 ### Patch Changes

- [#1928](https://github.com/navikt/aksel/pull/1928) [`dfe923582`](https://github.com/navikt/aksel/commit/dfe923582a57b41c77cfb4fbfa7c56be047ef2b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Lagt til nye ikoner :tada:
-
-  - HandKnot.svg
-  - HandKnotFilled.svg
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))

 ## 2.8.13

 ### Patch Changes

- [#1921](https://github.com/navikt/aksel/pull/1921) [`ecd6241e5`](https://github.com/navikt/aksel/commit/ecd6241e5751519fbda800a5f41a613957dbf77c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner :tada:
-
-## 2.8.12
+- Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))

 ## 2.8.11

 ### Patch Changes

- [#1909](https://github.com/navikt/aksel/pull/1909) [`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
-
-## 2.8.10
-
-## 2.8.9
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))

 ## 2.8.8

 ### Patch Changes

- [`ed8e28454`](https://github.com/navikt/aksel/commit/ed8e284540a9e3a5be7d1d5e393f31db86962613) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: VideoSlash
-  - :tada: VideoSlashFill
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
+- Nye ikoner `VideoSlash` og `VideoSlashFill`

 ## 2.8.4

 ### Patch Changes

- Fikset Sourcemap-bug i Aksel-icons
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
+- Fikset Sourcemap-bug

 ## 2.7.7

 ### Patch Changes

- [`a22ac3eb7`](https://github.com/navikt/aksel/commit/a22ac3eb78135bf93d4771802475396849809c03) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :Sparkles: Nye ikoner
-
-  - :tada: CaretUpDownFilledDown
-  - :tada: CaretUpDownFilledUp
-  - :tada: CloudDown
-  - :tada: CloudDownFill
-  - :tada: CloudUp
-  - :tada: CloudUpFill
-  - :tada: HddDown
-  - :tada: HddDownFill
-  - :tada: HddUp
-  - :tada: HddUpFill
-  - :tada: Inbox
-  - :tada: InboxDown
-  - :tada: InboxDownFill
-  - :tada: InboxFill
-  - :tada: InboxUp
-  - :tada: InboxUpFill
-  - :tada: ShoppingBasket
-  - :tada: ShoppingBasketFill
-
-## 2.7.6
-
-## 2.7.5
+- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`

 ## 2.7.4

 ### Patch Changes

- [#1852](https://github.com/navikt/aksel/pull/1852) [`a4fd1dd22`](https://github.com/navikt/aksel/commit/a4fd1dd227b9b56b747f962aa0c2b2dc9b4e30a4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikonpakke med nye ikoner :rocket:
-
-  - :tada: CaretDownFill
-  - :tada: CaretLeft
-  - :tada: CaretLeftFill
-  - :tada: CaretLeftRight
-  - :tada: CaretLeftRightFill
-  - :tada: CaretRight
-  - :tada: CaretRightFill
-  - :tada: CaretUpDownFill
-  - :tada: CaretUpFill
-  - :tada: Escalator
-  - :tada: Moon
-  - :tada: MoonFill
-  - :fire: EscalatorStroke
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-### Patch Changes
-
- [`7d9517cf9`](https://github.com/navikt/aksel/commit/7d9517cf90331b57441a0787a04eef66efd1b9b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Public-access for ny ikonpakke i GPR
+- Nye ikoner, `CaretDownFill`, `CaretLeft`, `CaretLeftFill`, `CaretLeftRight`, `CaretLeftRightFill`, `CaretRight`, `CaretRightFill`, `CaretUpDownFill`, `CaretUpFill`, `Escalator`, `Moon`, `MoonFill`. Fjernet `EscalatorStroke` ([PR](https://github.com/navikt/aksel/pull/1852))

 ## 2.7.0

 ### Minor Changes

- [#1847](https://github.com/navikt/aksel/pull/1847) [`de291a972`](https://github.com/navikt/aksel/commit/de291a9722c262d40fecaec7be55b71f86e60160) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons`
+- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))
@@ -15,5 +15,5 @@ keywords:
  - Sammenføye
  - Kildekontroll
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - left
  - venstre
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 14.06.2023
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 6.25C7.5 5.83579 7.16421 5.5 6.75 5.5C6.33579 5.5 6 5.83579 6 6.25V17.75C6 18.1642 6.33579 18.5 6.75 18.5C7.16421 18.5 7.5 18.1642 7.5 17.75V6.25ZM17.7803 7.03033C18.0732 6.73744 18.0732 6.26256 17.7803 5.96967C17.4874 5.67678 17.0126 5.67678 16.7197 5.96967L11.2197 11.4697C11.079 11.6103 11 11.8011 11 12C11 12.1989 11.079 12.3897 11.2197 12.5303L16.7197 18.0303C17.0126 18.3232 17.4874 18.3232 17.7803 18.0303C18.0732 17.7374 18.0732 17.2626 17.7803 16.9697L12.8107 12L17.7803 7.03033Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: ChevronLeftFirst
+category: Arrows
+sub_category: Chevron
+keywords:
+  - left
+  - venstre
+  - side
+  - first
+  - først
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023
@@ -6,5 +6,5 @@ keywords:
  - høyre
  - side
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 09.06.2023
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.25C18 5.83579 17.6642 5.5 17.25 5.5C16.8358 5.5 16.5 5.83579 16.5 6.25V17.75C16.5 18.1642 16.8358 18.5 17.25 18.5C17.6642 18.5 18 18.1642 18 17.75V6.25ZM7.28033 6.21967C6.98744 5.92678 6.51256 5.92678 6.21967 6.21967C5.92678 6.51256 5.92678 6.98744 6.21967 7.28033L11.1893 12.25L6.21967 17.2197C5.92678 17.5126 5.92678 17.9874 6.21967 18.2803C6.51256 18.5732 6.98744 18.5732 7.28033 18.2803L12.7803 12.7803C13.0732 12.4874 13.0732 12.0126 12.7803 11.7197L7.28033 6.21967Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,10 @@
+name: ChevronRightLast
+category: Arrows
+sub_category: Chevron
+keywords:
+  - right
+  - høyre
+  - side
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023
@@ -15,5 +15,5 @@ keywords:
  - markup-språk
  - kildekode
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - dra og slippe
  - skifte
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 26.05.2023
 created_at: 07.03.2023
@@ -23,5 +23,5 @@ keywords:
  - milepæler
  - hendelser
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.05.2023
 created_at: 07.03.2023
@@ -7,5 +7,5 @@ keywords:
  - delete
  - slett
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - uploading
  - send
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 08.06.2023
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,36 +1,31 @@
 # @navikt/aksel-stylelint

-## 4.1.3
+## 4.5.0

-## 4.1.2
+## 4.4.2

-## 4.1.1
+## 4.4.1

 ## 4.1.0

 ### Minor Changes

- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
-
-  - Toggle Chips har nå varianter: neutral og action
-  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
-
-## 4.0.0
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))

 ## 3.4.2

 ### Patch Changes

- [#2017](https://github.com/navikt/aksel/pull/2017) [`7615dbbb5`](https://github.com/navikt/aksel/commit/7615dbbb54c7c96e2252366188547b27b2ac1142) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add missing dependency
+- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))

 ## 3.4.1

 ### Patch Changes

- :bug: Stylelint hotfix, inkluderer nå dist-mappe (kanskje..)
+- Inkluderer nå dist-mappe i release

 ## 3.4.0

 ### Minor Changes

- [#1973](https://github.com/navikt/aksel/pull/1973) [`61c411421`](https://github.com/navikt/aksel/commit/61c4114214841ec42f48e1abd0d72d2a42d265ab) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add stylelint plugin
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^4.1.3",
-    "@navikt/ds-tokens": "^4.1.3",
+    "@navikt/ds-css": "^4.5.0",
+    "@navikt/ds-tokens": "^4.5.0",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,243 +1,36 @@
 # @navikt/aksel

-## 4.1.3
+## 4.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5), [`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5)]:
+  - @navikt/ds-css@4.5.0
+
+## 4.4.2

 ### Patch Changes

 - Updated dependencies []:
-  - @navikt/ds-css@4.1.3
+  - @navikt/ds-css@4.4.2

-## 4.1.2
+## 4.4.1

 ### Patch Changes

- Updated dependencies []:
-  - @navikt/ds-css@4.1.2
-
-## 4.1.1
-
-### Patch Changes
-
- Updated dependencies [[`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af)]:
-  - @navikt/ds-css@4.1.1
-
-## 4.1.0
-
-### Patch Changes
-
- Updated dependencies [[`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420), [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add), [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854), [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040)]:
-  - @navikt/ds-css@4.1.0
+- Updated dependencies [[`415632675`](https://github.com/navikt/aksel/commit/4156326752eaf7a97855b33653850362dada8788)]:
+  - @navikt/ds-css@4.4.1

 ## 4.0.0

 ### Major Changes

- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))

-  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
-
-  ```bash
-  npx @navikt/aksel codemod v4-date
-  ```
-
- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
-
-  - `<Header />` er renamet til `<InternalHeader />`
-  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
-  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
-  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
-  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
-
-  Kjør codemod for migrering:
-
-  ```bash
-  // React
-  npx @navikt/aksel codemod v4-internal-react
-
-  // CSS
-  npx @navikt/aksel codemod v4-internal-css
-  ```
-
-### Patch Changes
-
- Updated dependencies [[`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c), [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c)]:
-  - @navikt/ds-css@4.0.0
-
-## 3.4.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.4.2
-
-## 3.4.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.4.1
-
-## 3.4.0
-
-### Patch Changes
-
- Updated dependencies [[`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a)]:
-  - @navikt/ds-css@3.4.0
-
-## 3.3.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.3.1
-
-## 3.3.0
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.3.0
-
-## 3.2.4
-
-### Patch Changes
-
- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
-  - @navikt/ds-css@3.2.4
-
-## 3.2.3
-
-### Patch Changes
-
- Updated dependencies [[`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969), [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221)]:
-  - @navikt/ds-css@3.2.3
-
-## 3.2.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.2.2
-
-## 3.2.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.2.1
-
-## 3.2.0
-
-### Patch Changes
-
- Updated dependencies [[`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7)]:
-  - @navikt/ds-css@3.2.0
-
-## 3.1.3
-
-### Patch Changes
-
- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
-  - @navikt/ds-css@3.1.3
-
-## 3.1.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.1.2
-
-## 3.1.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.1.1
-
-## 3.1.0
-
-### Patch Changes
-
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
-  - @navikt/ds-css@3.1.0
-
-## 3.0.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.0.1
-
-## 3.0.0
-
-### Patch Changes
-
- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
-  - @navikt/ds-css@3.0.0
-
-## 2.9.8
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.8
-
-## 2.9.7
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.7
-
-## 2.9.6
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.6
-
-## 2.9.5
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.5
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))

 ## 2.9.4

 ### Patch Changes

- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
-
-  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.4
-
-## 2.9.3
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.3
-
-## 2.9.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.2
-
-## 2.9.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.1
-
-## 2.9.0
-
-### Patch Changes
-
- Updated dependencies [[`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343)]:
-  - @navikt/ds-css@2.9.0
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "4.1.3",
+    "@navikt/ds-css": "4.5.0",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,484 +1,263 @@
 # @navikt/ds-css

-## 4.1.3
+## 4.5.0

-## 4.1.2
+### Minor Changes
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### Patch Changes
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+## 4.4.2
+
+## 4.4.1
+
+### Patch Changes
+
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+## 4.4.0
+
+### Minor Changes
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0
+
+### Minor Changes
+
+- Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))
+
+### Patch Changes
+
+- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
+
+## 4.2.0
+
+### Minor Changes
+
+- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
+
+## 4.1.4
+
+### Patch Changes
+
+- Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))

 ## 4.1.1

 ### Patch Changes

- [`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset markering av tekst i skeleton.
+- :bug: Fikset cursor-markering av tekst i skeleton.

 ## 4.1.0

 ### Minor Changes

- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))

-  - Toggle Chips har nå varianter: neutral og action
-  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
-
- [#2036](https://github.com/navikt/aksel/pull/2036) [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854) Thanks [@KenAJoh](https://github.com/KenAJoh)! - - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600).
-
-  - Icon-subtle bruker nå grayalpha.
-  - Alle description-felter på fieldsets har nå text-subtle som farge.
-
- [#1821](https://github.com/navikt/aksel/pull/1821) [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent Skeleton!
-
-  - varianter: text, circle, rounded og rectangle
-
-### Patch Changes
-
- [#2027](https://github.com/navikt/aksel/pull/2027) [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add) Thanks [@JulianNymark](https://github.com/JulianNymark)! - :sparkles: La til `indent`-prop på Accordion
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))

 ## 4.0.0

 ### Major Changes

- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+- All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))

-  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
+- classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter.

-  ```bash
-  npx @navikt/aksel codemod v4-date
-  ```
+- Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.

- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
-
-  - `<Header />` er renamet til `<InternalHeader />`
-  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
-  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
-  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
-  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
-
-  Kjør codemod for migrering:
-
-  ```bash
-  // React
-  npx @navikt/aksel codemod v4-internal-react
-
-  // CSS
-  npx @navikt/aksel codemod v4-internal-css
-  ```
-
-## 3.4.2
-
-## 3.4.1
+- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)

 ## 3.4.0

 ### Minor Changes

- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-### Patch Changes
-
- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

 ## 3.2.3

 ### Patch Changes

- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))

-  - :recycle: Refactored Datepicker.Input-button for bugfix
-
- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
-
-  - Kan nå lettere brukes i tabeller
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-### Minor Changes
-
- [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
-
-  - Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
-  - CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
+- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))

 ## 3.1.3

 ### Patch Changes

- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
-
-  - Medium og Small er begge 10px lavere
-  - Mindre border-radius
-
-## 3.1.2
-
-## 3.1.1
+- :lipstick: Oppdatert utseende for ToggleGroup. `Medium` og `Small`-size er begge 10px lavere, mindre border-radius ([PR](https://github.com/navikt/aksel/pull/1976))

 ## 3.1.0

 ### Minor Changes

- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
-  (Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
+- Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))

 ### Patch Changes

- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
-
-## 3.0.1
+- Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))

 ## 3.0.0

 ### Major Changes

- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
-
-  - Accordion oppdatet til å ha chevron left-aligned.
-  - Neutral-variant lagt til
-  - Diverse nye size-options for heading og paddinger.
-  - Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
-
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
-
-  **Sideeffects av ikonendringer**
-
-  - Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
-  - Alert bruker samme ikonstørrelse for alle størrelser
-  - Chips har justert padding/ikonstørrelser
-  - Datepicker hover-bug på knapper er fikset
-  - Helptekst bruker nå et custom-ikon.
-  - Select har fått justert padding rundt ikon
-  - Switch bruker samme checkmark som checkbox, er nå avrundet
-  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
-  - Tabs bruker default text-default nå
-  - Stepper har endret hvordan den styler checkmark-ikon.
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))

 ## 2.9.0

 ### Minor Changes

- [#1941](https://github.com/navikt/aksel/pull/1941) [`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CSS nå tilgjengelig som separate filer
-
-  - Kan lastest fra CDN
-  - Tilbys nå i minified-versjoner
-  - Kommandoline: `npx @navikt/aksel css-imports` for å raskt komme i gang med CSS-optimalisering
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-### Patch Changes
-
- [`f0d9a8853`](https://github.com/navikt/aksel/commit/f0d9a8853f56854a4049bd3f6cc34968e9d6c380) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fixes shown month on open in Datepicker/MonthPicker, better handling of out-of-range 'today'
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
+- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))

 ## 2.8.9

 ### Patch Changes

- [#1905](https://github.com/navikt/aksel/pull/1905) [`212194964`](https://github.com/navikt/aksel/commit/212194964c4dd576e1ffc031316dff8cbe5016a2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Padding/border-radius tokens for button.css
-
-## 2.8.8
+- Button: Padding/border-radius tokens ([PR](https://github.com/navikt/aksel/pull/1905))

 ## 2.8.7

 ### Patch Changes

- [`7f3f025db`](https://github.com/navikt/aksel/commit/7f3f025db2ad605df4240605a733d10d08db753a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset typografi for radio, checkbox. Button token for tertiary
+- Button: token for tertiary

 ## 2.8.6

 ### Patch Changes

- [`2eb358ad8`](https://github.com/navikt/aksel/commit/2eb358ad888979d21c385b3900973946f3f466be) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+- Alert, Chips og ErrorSummary har nå bedre utvalg av tokens

 ## 2.8.5

 ### Patch Changes

- [`f66437082`](https://github.com/navikt/aksel/commit/f664370826ed51bda7ad681e1f1799c26d2c1f0a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :art: Accordion-tokens for header bakgrunn
+- Accordion: tokens for header-bakgrunn

- [#1879](https://github.com/navikt/aksel/pull/1879) [`55b585618`](https://github.com/navikt/aksel/commit/55b585618341a4d8bf26ed9b9e129d897b1600dc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset tekstfarge i select på iphone
-
-## 2.8.4
-
-## 2.8.3
+- Select: Fikset tekstfarge på iphone ([PR](https://github.com/navikt/aksel/pull/1879))

 ## 2.8.2

 ### Patch Changes

- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
-
-## 2.8.1
-
-## 2.8.0
-
-### Minor Changes
-
- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))

 ## 2.7.8

 ### Patch Changes

- [#1863](https://github.com/navikt/aksel/pull/1863) [`7ace69f21`](https://github.com/navikt/aksel/commit/7ace69f215760bbb5bf997670c897403d8ee558d) Thanks [@it-vegard](https://github.com/it-vegard)! - Added focus indicator for tabpanel
-
-## 2.7.7
-
-## 2.7.6
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))

 ## 2.7.5

 ### Patch Changes

- :bug: Fikset token-bug i togglegroup
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
-
-## 2.5.0
+- ToggleGroup: Fikset token-bug

 ## 2.4.3

 ### Patch Changes

- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+- Select: Fikset disabled + opacity bug for Chrome

 ## 2.4.2

 ### Patch Changes

- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-### Minor Changes
-
- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))

 ## 2.3.1

 ### Patch Changes

- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+- Fikset feil bruk av fallback-tokens i Textarea og Timeline

 ## 2.3.0

 ### Minor Changes

- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+- Select: Fikset sentrering av tekst i Firefox ([PR](https://github.com/navikt/aksel/pull/1813))

 ### Patch Changes

- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+- Select: `small`-variant er nå 32px (var 34px)

 ## 2.2.0

 ### Minor Changes

- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))

-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
+- Button: `Neutral`-variant.

 ## 2.1.2

 ### Patch Changes

- [`62f36da5e`](https://github.com/navikt/aksel/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-### Patch Changes
-
- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
-
-## 2.0.14
-
-## 2.0.13
+- TextField: `small`-variant har nå 8px horisontal padding (før 4px)

 ## 2.0.12

 ### Patch Changes

- [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
+- Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))

 ## 2.0.5

 ### Patch Changes

- Reverserte border-width endrind i button
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
+- Button: Reverserte border-width endrinder (var 1.5px, nå 2px)

 ## 2.0.1

 ### Patch Changes

- [`e8007328d`](https://github.com/navikt/aksel/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
+- Bugfixer ved bruk av tokens oppdatert i v2.0.0

 ## 2.0.0

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- Fontlasting: Fonter lastes nå fra NAV-CDN

-## 1.5.10
+- Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.

 ## 1.5.9

 ### Patch Changes

- 4px -> 2px gap chips-toggle active
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-### Patch Changes
-
- [#1709](https://github.com/navikt/aksel/pull/1709) [`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+- Chips: 4px -> 2px gap mellom checkmark i Chips.Toggle

 ## 1.5.3

 ### Patch Changes

- Byttet om på alt-farge rekkefølge
-
-## 1.5.2
-
-### Patch Changes
-
- :memo: Rename FilterChips to ToggleChips
+- Tokens: Byttet om på rekkefølge av alt-farger

 ## 1.5.1

 ### Patch Changes

- Flex-wrap chips.css
+- Chips. Bruker nå standard flex-wrap

 ## 1.5.0

 ### Minor Changes

- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
-
- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
-
-## 1.4.4
-
-## 1.4.3
-
-### Patch Changes
-
- :sparkles: Validering og inputFormat i Date-komponenter
-
-## 1.4.2
-
-## 1.4.1
-
-### Patch Changes
-
- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
-
-## 1.4.0
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))

 ## 1.3.39

 ### Patch Changes

- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)

-## 1.3.38
+## 1.3.24
+
+### Patch Changes
+
+- Tokens tilgjengeligjøres nå også på `:host`. Dette lar shadow-dom brukere konsumere tokens direkte.
@@ -24,6 +24,7 @@
  font-size: 1.5rem;
  align-self: flex-start;
  height: var(--a-font-line-height-xlarge);
+  margin: var(--a-spacing-1);
  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }

@@ -73,3 +74,11 @@
  border: none;
  padding: 0;
 }
+
+.navds-alert__button-wrapper {
+  align-self: flex-start;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
@@ -294,7 +294,6 @@
 .navds-button--tertiary:active {
  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
-  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }

 .navds-button--tertiary:active:hover {
@@ -346,7 +345,6 @@
 .navds-button--tertiary-neutral:active {
  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
-  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }

 .navds-button--tertiary-neutral:active:hover {
@@ -1,14 +1,12 @@
 .navds-chat {
  display: flex;
  align-items: flex-end;
-  gap: var(--a-spacing-4);
-  padding-right: var(--a-spacing-16);
+  gap: var(--a-spacing-3);
+  max-width: 40.75rem;
 }

 .navds-chat--right {
  flex-direction: row-reverse;
-  padding-right: 0;
-  padding-left: var(--a-spacing-16);
 }

 .navds-chat__bubble-wrapper {
@@ -26,29 +24,33 @@

 .navds-chat__avatar {
  align-items: center;
-  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  box-shadow: var(--a-shadow-xsmall);
+  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
  border-radius: var(--a-border-radius-full);
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  overflow: hidden;
-  height: 3rem;
-  width: 3rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
 }

 .navds-chat__avatar svg {
  align-self: center;
-  height: 100%;
  width: 100%;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
 }

 .navds-chat__bubble {
-  padding: 1rem;
-  box-shadow: var(--a-shadow-small);
+  padding: var(--a-spacing-4);
+  box-shadow: var(--a-shadow-xsmall);
  width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
  border-radius: var(--a-border-radius-xlarge);
  border-bottom-left-radius: 2px;
  display: flex;
@@ -61,11 +63,27 @@
  border-bottom-right-radius: 2px;
 }

+.navds-chat--small .navds-chat__bubble {
+  padding: var(--a-spacing-3);
+}
+
+.navds-chat--info .navds-chat__bubble,
+.navds-chat--info .navds-chat__avatar {
+  background-color: var(--a-surface-info-subtle);
+}
+
+.navds-chat--subtle .navds-chat__bubble,
+.navds-chat--subtle .navds-chat__avatar {
+  background-color: var(--a-surface-default);
+}
+
 .navds-chat__top-text {
  color: var(--ac-chat-top-text, var(--a-text-default));
  display: flex;
  gap: var(--a-spacing-2);
  align-items: baseline;
+  font-weight: normal;
+  margin: 0;
 }

 .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
 .navds-chat--right .navds-chat__top-text--left {
  align-self: flex-start;
 }
-
-.navds-chat__name {
-  font-weight: var(--a-font-weight-bold);
-}
@@ -278,3 +278,7 @@
  visibility: hidden;
  pointer-events: none;
 }
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
@@ -77,7 +77,7 @@
  margin-top: var(--a-spacing-1);
 }

-.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
  margin-top: var(--a-spacing-05);
 }

@@ -115,7 +115,7 @@
  transition: transform 150ms ease-in-out;
 }

-.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
  transform: translateY(0) rotate(180deg);
 }

@@ -135,7 +135,10 @@
  }
 }

-.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
  transform: translateY(-1px) rotate(180deg);
 }

@@ -33,7 +33,7 @@

 .navds-help-text__popover.navds-popover {
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: 65ch;
+  max-width: min(65ch, calc(100vw - 1.5rem));

  --ac-popover-border: var(--a-border-info);
 }
@@ -13,7 +13,7 @@
 }

 .navds-link-panel:hover {
-  box-shadow: var(--a-shadow-medium);
+  box-shadow: var(--a-shadow-small);
  border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }

@@ -9,6 +9,7 @@
  position: relative;
  overflow: auto;
  max-height: 100%;
+  box-shadow: var(--a-shadow-xlarge);
 }

 .navds-modal__content {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.1.3",
+    "@navikt/ds-tokens": "^4.5.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -5,6 +5,7 @@
  border: 1px solid;
  border-color: var(--ac-popover-border, var(--a-border-default));
  border-radius: var(--a-border-radius-medium);
+  max-width: calc(100vw - var(--a-spacing-6));
 }

 .navds-popover__content {
@@ -41,6 +41,7 @@
  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
  margin-left: 13px;
  padding-left: 13px;
+  color: var(--a-text-default);
 }

 .navds-read-more--small .navds-read-more__content {
@@ -61,6 +61,10 @@
  list-style-type: none;
 }

+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
 .navds-timeline__period {
  height: 100%;
  border-radius: var(--a-border-radius-full);
@@ -80,9 +80,9 @@
    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
  },
  "chat": {
-    "--ac-chat-avatar-bg": "--a-bg-subtle",
+    "--ac-chat-avatar-bg": "--a-surface-neutral-subtle",
    "--ac-chat-avatar-color": "--a-text-default",
-    "--ac-chat-bubble-bg": "--a-bg-subtle",
+    "--ac-chat-bubble-bg": "--a-surface-neutral-subtle",
    "--ac-chat-top-text": "--a-text-default"
  },
  "chips": {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.1.3",
+    "@navikt/aksel-icons": "^4.5.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -3,10 +3,12 @@ import {
  CheckmarkCircleFillIcon,
  ExclamationmarkTriangleFillIcon,
  XMarkOctagonFillIcon,
+  XMarkIcon,
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
+import { Button } from "../button";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
@@ -32,6 +34,17 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   * @default false
   */
  inline?: boolean;
+  /**
+   * Removes close-button(X) when false
+   * Requires onClose to be set
+   * @default true
+   */
+  closeButton?: boolean;
+  /**
+   * Callback for alert wanting to close
+   * requires closeButton to be true
+   */
+  onClose?: () => void;
 }

 const Icon = ({ variant, ...props }) => {
@@ -71,27 +84,45 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
      size = "medium",
      fullWidth = false,
      inline = false,
+      closeButton = false,
+      onClose,
      ...rest
    },
    ref
-  ) => (
-    <div
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-alert",
-        `navds-alert--${variant}`,
-        `navds-alert--${size}`,
-        { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
-      )}
-    >
-      <Icon variant={variant} className="navds-alert__icon" />
-      <BodyLong as="div" size={size} className="navds-alert__wrapper">
-        {children}
-      </BodyLong>
-    </div>
-  )
+  ) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl(
+          className,
+          "navds-alert",
+          `navds-alert--${variant}`,
+          `navds-alert--${size}`,
+          {
+            "navds-alert--full-width": fullWidth,
+            "navds-alert--inline": inline,
+          }
+        )}
+      >
+        <Icon variant={variant} className="navds-alert__icon" />
+        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+          {children}
+        </BodyLong>
+        {closeButton && !inline && (
+          <div className="navds-alert__button-wrapper">
+            <Button
+              className="navds-alert__button"
+              size="small"
+              variant="tertiary-neutral"
+              onClick={onClose}
+              icon={<XMarkIcon title="Lukk Alert" />}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
 );

 export default Alert;
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
+import { within, userEvent } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";

 const meta: Meta<typeof Alert> = {
  title: "ds-react/Alert",
@@ -20,22 +22,14 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
 ];

 export const Default: Story = {
-  render: (props) => (
-    <Alert
-      variant={props.variant}
-      size={props.size}
-      fullWidth={props.fullWidth}
-      inline={props.inline}
-    >
-      {props.children}
-    </Alert>
-  ),
+  render: (props) => <Alert {...props} />,

  args: {
    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
    fullWidth: false,
    variant: "info",
    size: "medium",
+    closeButton: false,
  },
  argTypes: {
    variant: {
@@ -50,21 +44,39 @@ export const Default: Story = {
      },
      options: ["medium", "small"],
    },
+    closeButton: {
+      type: "boolean",
+    },
  },
 };

-export const Small = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-          )}
-        </Alert>
-      ))}
-    </div>
-  );
+export const Small = {
+  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,
+  },
+  argtypes: {
+    closeButton: {
+      type: "boolean",
+    },
+  },
 };

 export const FullWidth = () => {
@@ -147,3 +159,44 @@ export const Links = () => {
    </div>
  );
 };
+
+const AlertWithCloseButton = ({ children }: { children?: React.ReactNode }) => {
+  let [show, setShow] = React.useState(true);
+
+  return (
+    show && (
+      <Alert variant="success" closeButton onClose={() => setShow(false)}>
+        {children || "Content"}
+      </Alert>
+    )
+  );
+};
+
+export const WithCloseButton: Story = {
+  render: () => {
+    return (
+      <div className="colgap">
+        <AlertWithCloseButton />
+        <AlertWithCloseButton>
+          <BodyLong>
+            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+            sint commodo consequat eu aute.
+          </BodyLong>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </AlertWithCloseButton>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByTitle("Lukk Alert");
+
+    await step("click button", async () => {
+      await userEvent.click(buttons[0]);
+    });
+
+    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
+    expect(buttonsAfter.length).toBe(1);
+  },
+};
@@ -17,6 +17,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
  timestamp?: string;
  /**
   * Background color on bubble
+   * @deprecated Use `variant` on Chat instead
   */
  backgroundColor?: string;
  /**
@@ -46,17 +47,20 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
        {...rest}
      >
        {(timestamp || name) && (
-          <div
+          <h3
            className={cl(
              `navds-chat__top-text`,
              toptextPosition && `navds-chat__top-text--${toptextPosition}`
            )}
          >
-            {name && <Detail className="navds-chat__name">{name}</Detail>}
-            {timestamp && (
-              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
+            {name && <Detail as="span">{name}</Detail>}
+            {name && timestamp && (
+              <Detail as="span" aria-hidden>
+                &bull;
+              </Detail>
            )}
-          </div>
+            {timestamp && <Detail as="span">{timestamp}</Detail>}
+          </h3>
        )}
        {children}
      </div>
@@ -1,7 +1,10 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleProps } from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import Bubble from "./Bubble";
+import { BodyLong } from "../typography";
+
+export const POSITIONS = ["left", "right"] as const;
+export const SIZES = ["medium", "small"] as const;

 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
  /**
@@ -17,27 +20,40 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   */
  timestamp?: string;
  /**
-   * Avatar for messenger. Regular text for initials works to
+   * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
   */
-  avatar: React.ReactNode;
+  avatar?: React.ReactNode;
+  /**
+   * Changes background color on avatar and bubbles.
+   * Avoid using the same background as the surface behind Chat.
+   * @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
+   * Positions avatar and bubbles
   * @default "left"
   */
-  position?: "left" | "right";
+  position?: (typeof POSITIONS)[number];
  /**
   * Hoizontal position of toptext
-   * @default Same as chat
+   * @default Same as position
   */
-  toptextPosition?: "left" | "right";
+  toptextPosition?: (typeof POSITIONS)[number];
+  /**
+   * Affects padding and font size in bubbles
+   * @default "medium"
+   */
+  size?: (typeof SIZES)[number];
 }

 interface ChatComponent
@@ -47,24 +63,23 @@ interface ChatComponent
  /**
   * @see 🏷️ {@link BubbleProps}
   */
-  Bubble: React.ForwardRefExoticComponent<
-    BubbleProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Bubble: typeof Bubble;
 }

 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
 * @see 🏷️ {@link ChatProps}
 *
 * @example
 * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
 * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
 * </Chat>
 * ```
 */
@@ -77,51 +92,54 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
      timestamp,
      avatar,
      position = "left",
+      variant = "neutral",
      avatarBgColor,
      backgroundColor,
      toptextPosition,
+      size = "medium",
      ...rest
-    },
+    }: ChatProps,
    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-chat",
-          className,
-          `navds-chat--${position} navds-chat--top-text-${
-            toptextPosition ?? position
-          }`
-        )}
-        {...rest}
-      >
-        <BodyShort
-          as="div"
+  ) => (
+    <div
+      ref={ref}
+      className={cl(
+        "navds-chat",
+        className,
+        `navds-chat--${position}`,
+        `navds-chat--top-text-${toptextPosition ?? position}`,
+        `navds-chat--${size}`,
+        `navds-chat--${variant}`
+      )}
+      {...rest}
+    >
+      {avatar && (
+        <div
          className="navds-chat__avatar"
+          aria-hidden
          style={{ backgroundColor: avatarBgColor }}
        >
          {avatar}
-        </BodyShort>
-        <ol className="navds-chat__bubble-wrapper">
-          {React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-              return (
-                <BodyLong as="li">
-                  {React.cloneElement(child, {
-                    name: name && i === 0 ? name : undefined,
-                    timestamp: timestamp && i === 0 ? timestamp : undefined,
-                    backgroundColor,
-                    ...child.props,
-                  })}
-                </BodyLong>
-              );
-            }
-          })}
-        </ol>
-      </div>
-    );
-  }
+        </div>
+      )}
+      <ol className="navds-chat__bubble-wrapper">
+        {React.Children.map(children, (child, i) => {
+          if (React.isValidElement(child)) {
+            return (
+              <BodyLong as="li" size={size}>
+                {React.cloneElement(child, {
+                  name: name && i === 0 ? name : undefined,
+                  timestamp: timestamp && i === 0 ? timestamp : undefined,
+                  backgroundColor,
+                  ...child.props,
+                })}
+              </BodyLong>
+            );
+          }
+        })}
+      </ol>
+    </div>
+  )
 ) as ChatComponent;

 Chat.Bubble = Bubble;
@@ -1,6 +1,7 @@
 import React from "react";
 import { Chat } from "../index";
 import { Meta } from "@storybook/react";
+import { POSITIONS, SIZES } from "./Chat";

 export default {
  title: "ds-react/Chat",
@@ -16,19 +17,25 @@ export default {
        type: "text",
      },
    },
+    position: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    toptextPosition: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    size: {
+      control: { type: "radio" },
+      options: SIZES,
+    },
  },
-} as Meta;
+} satisfies Meta<typeof Chat>;

 export const Default = {
  render: (props) => {
    return (
-      <Chat
-        avatar={props?.avatar ?? "ON"}
-        name={props?.name ?? "Ola Normann"}
-        timestamp={props?.timestamp ?? "01.01.21 14:00"}
-        avatarBgColor={props?.avatarBgColor}
-        backgroundColor={props?.backgroundColor}
-      >
+      <Chat {...props}>
        <Chat.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
        </Chat.Bubble>
@@ -48,141 +55,156 @@ export const Default = {
  },
 };

-export const Farger = () => {
-  return (
+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 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 = () => (
+  <div className="colgap">
+    <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>
+    <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>
+);
+
+export const ToptextPosition = () => (
+  <div className="colgap">
    <Chat
      avatar="ON"
      name="Ola Normann"
      timestamp="01.01.21 14:00"
-      avatarBgColor="var(--a-lightblue-200)"
-      backgroundColor="var(--a-lightblue-100)"
+      toptextPosition="right"
    >
-      <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 Position = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <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"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-      >
-        <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"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <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>
-  );
-};
-
-export const ToptextPosition = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-        toptextPosition="right"
-      >
-        <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"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-        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"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <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 = () => {
-  return (
-    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+      toptextPosition="left"
+    >
      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        Reprehenderit pariatur officia exercitation laboris.
      </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.
+        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">
@@ -114,6 +114,11 @@ export interface DatePickerDefaultProps
   * @default "absolute"
   */
  strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
 }

 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
@@ -180,6 +185,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      onClose,
      onOpenToggle,
      strategy = "absolute",
+      bubbleEscape = false,
      ...rest
    },
    ref
@@ -251,6 +257,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
              role="dialog"
              ref={ref}
              strategy={strategy}
+              className="navds-date__popover"
+              bubbleEscape={bubbleEscape}
            >
              <DayPicker
                locale={getLocaleFromString(locale)}
@@ -319,6 +319,7 @@ export const useDatepicker = (
    onOpenToggle: () => handleOpen(!open),
    disabled,
    disableWeekends,
+    bubbleEscape: true,
    ref: setDaypickerRef,
  };

@@ -312,6 +312,7 @@ export const useMonthpicker = (
    open,
    onOpenToggle: () => handleOpen(!open),
    disabled,
+    bubbleEscape: true,
    ref: setMonthpickerRef,
  };

@@ -544,6 +544,7 @@ export const useRangeDatepicker = (
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
    disableWeekends,
+    bubbleEscape: true,
    ref: setDaypickerRef,
  };

@@ -86,6 +86,11 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   * @default "absolute"
   */
  strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
 }

 interface MonthPickerComponent
@@ -153,6 +158,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      year,
      onYearChange,
      strategy = "absolute",
+      bubbleEscape = false,
    },
    ref
  ) => {
@@ -202,8 +208,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
              role="dialog"
              ref={ref}
              id={ariaId}
-              className="navds-date"
+              className="navds-date navds-date__popover"
              strategy={strategy}
+              bubbleEscape={bubbleEscape}
            >
              <RootProvider
                locale={getLocaleFromString(locale)}
@@ -203,8 +203,8 @@ export const Counter = ({ maxLength, currentLength, size, i18n }) => {
      size={size}
    >
      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
+        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
    </BodyShort>
  );
 };
@@ -29,6 +29,18 @@ interface ErrorSummaryComponent
  extends React.ForwardRefExoticComponent<
    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
  > {
+  /**
+   * Link to error
+   *
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   *
+   * @example
+   * ```jsx
+   * <ErrorSummary.Item href="#1">
+   *   Felt må fylles ut med alder
+   * </ErrorSummary.Item>
+   * ```
+   */
  Item: ErrorSummaryItemType;
 }

@@ -8,6 +8,10 @@ export interface ErrorSummaryItemProps
   * Link text
   */
  children: React.ReactNode;
+  /**
+   * Link to errormessage
+   */
+  href?: string;
 }

 export type ErrorSummaryItemType = OverridableComponent<
@@ -29,6 +29,10 @@ export interface HelpTextProps
    | "right-end"
    | "left-start"
    | "left-end";
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
 }

 /**
@@ -53,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
      strategy = "absolute",
      title = "hjelp",
      onClick,
+      wrapperClassName,
      ...rest
    },
    ref
@@ -62,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
    const [open, setOpen] = useState(false);

    return (
-      <div className="navds-help-text">
+      <div className={cl("navds-help-text", wrapperClassName)}>
        <button
          {...rest}
          ref={mergedRef}
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { HelpText } from "..";
+import { BodyLong, Heading, HelpText } from "..";

 export default {
  title: "ds-react/HelpText",
@@ -65,3 +65,36 @@ export const Open = () => {
    </HelpText>
  );
 };
+
+export const WrapperClassName = {
+  render: () => {
+    return (
+      <div>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+
+        <Heading level="2" size="medium">
+          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+          <HelpText wrapperClassName="testClass">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            perspiciatis vero voluptatum, asperiores cumque, deserunt
+            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
+            culpa, ratione ab quam ea quas?
+          </HelpText>
+          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+        </Heading>
+
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+      </div>
+    );
+  },
+};
@@ -1,8 +1,8 @@
 import {
-  arrow as flArrow,
  autoUpdate,
-  flip,
+  arrow as flArrow,
  offset as flOffset,
+  flip,
  shift,
  useClick,
  useDismiss,
@@ -11,8 +11,8 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, {
-  forwardRef,
  HTMLAttributes,
+  forwardRef,
  useCallback,
  useMemo,
  useRef,
@@ -72,6 +72,11 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   * @default "absolute"
   */
  strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
 }

 interface PopoverComponent
@@ -113,6 +118,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      placement = "top",
      offset,
      strategy: userStrategy = "absolute",
+      bubbleEscape = false,
      ...rest
    },
    ref
@@ -135,15 +141,19 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      onOpenChange: onClose,
      middleware: [
        flOffset(offset ?? (arrow ? 16 : 4)),
-        shift(),
        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        shift({ padding: 12 }),
        flArrow({ element: arrowRef, padding: 8 }),
      ],
    });

    const { getFloatingProps } = useInteractions([
      useClick(context),
-      useDismiss(context),
+      useDismiss(context, {
+        bubbles: {
+          escapeKey: bubbleEscape,
+        },
+      }),
    ]);

    useClientLayoutEffect(() => {
@@ -11,15 +11,9 @@ import {
  useHover,
  useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../util";
 import { format } from "date-fns";
-import React, {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../util";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -83,22 +77,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
      [ref, refs.setReference]
    );

-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![refs.domReference.current, refs?.floating?.current].some(
-              (element) => element?.contains(e.target as Node)
-            )
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.domReference, refs?.floating]
-      )
-    );
-
    const staticSide = {
      top: "bottom",
      right: "left",
@@ -139,6 +117,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
            ref={refs.setFloating}
            {...getFloatingProps({
              tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
            })}
            style={{
              ...floatingStyles,
@@ -72,6 +72,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
        >
          <ol
            {...rest}
+            tabIndex={-1}
            ref={ref}
            aria-label={
              periods.length === 0
@@ -11,9 +11,9 @@ import {
  useHover,
  useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../../util";
 import cl from "clsx";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../../util";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -85,22 +85,6 @@ const ClickablePeriod = React.memo(
      [periodRef, refs.setReference]
    );

-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![refs.domReference.current, refs?.floating?.current].some(
-              (element) => element?.contains(e.target as Node)
-            )
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.domReference, refs?.floating]
-      )
-    );
-
    const staticSide = {
      top: "bottom",
      right: "left",
@@ -165,6 +149,10 @@ const ClickablePeriod = React.memo(
            ref={refs.setFloating}
            {...getFloatingProps({
              tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
            })}
            style={{
              ...floatingStyles,
@@ -7,6 +7,6 @@ export interface OverridableComponent<Component, Element extends HTMLElement> {
    props: {
      as: As;
    } & Component &
-      Omit<React.ComponentPropsWithRef<As>, keyof Component>
+      Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">
  ): ReturnType<React.FC>;
 }
@@ -1,247 +1,33 @@
 # @navikt/ds-tailwind

-## 4.1.3
+## 4.5.0

-## 4.1.2
+## 4.4.2

-## 4.1.1
+## 4.4.1
+
+## 4.4.0
+
+### Minor Changes
+
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

 ## 4.1.0

-## 4.0.0
+### Minor Changes

-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-## 3.2.3
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
-
-## 2.8.9
-
-## 2.8.8
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
-
-## 2.8.4
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
-
-## 2.7.7
-
-## 2.7.6
-
-## 2.7.5
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))

 ## 2.5.0

 ### Minor Changes

- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
-
-## 2.4.3
-
-## 2.4.2
-
-### Patch Changes
-
- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-## 2.3.1
-
-## 2.3.0
-
-## 2.2.0
-
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
-
-## 2.1.2
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-## 2.0.14
-
-## 2.0.13
-
-## 2.0.12
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
-
-## 2.0.5
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
-
-## 2.0.1
+- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))

 ## 2.0.0

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
-
-## 1.5.10
-
-## 1.5.9
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-## 1.5.3
-
-## 1.5.2
-
-## 1.5.1
-
-## 1.5.0
-
-## 1.4.4
-
-## 1.4.3
-
-## 1.4.2
-
-## 1.4.1
-
-## 1.4.0
-
-## 1.3.39
-
-### Patch Changes
-
- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
-
-## 1.3.38
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.1.3",
+    "@navikt/ds-tokens": "^4.5.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,277 +1,47 @@
 # @navikt/ds-tokens

-## 4.1.3
+## 4.5.0

-## 4.1.2
+## 4.4.2

-## 4.1.1
+## 4.4.1
+
+## 4.4.0
+
+### Minor Changes
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))

 ## 4.1.0

 ### Minor Changes

- [#2032](https://github.com/navikt/aksel/pull/2032) [`6aca0a4b6`](https://github.com/navikt/aksel/commit/6aca0a4b6aa063a2fdbb30f679c871898074dd74) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Fargetokens for datavisualisering.
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))

-  6 varianter for surface,surface-subtle og border.
-
-  ```css
-  background-color: var(--a-data-surface-1-subtle);
-  border-color: var(--a-data-1-border);
-  ```
-
- [#2036](https://github.com/navikt/aksel/pull/2036) [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854) Thanks [@KenAJoh](https://github.com/KenAJoh)! - - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600).
-  - Icon-subtle bruker nå grayalpha.
-  - Alle description-felter på fieldsets har nå text-subtle som farge.
-
-## 4.0.0
-
-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-### Minor Changes
-
- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-## 3.2.3
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
-
-## 2.8.9
-
-## 2.8.8
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
-
-## 2.8.4
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
-
-## 2.7.7
-
-## 2.7.6
-
-## 2.7.5
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

 ## 2.5.0

 ### Minor Changes

- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
-
-## 2.4.3
-
-## 2.4.2
-
-### Patch Changes
-
- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-## 2.3.1
-
-## 2.3.0
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))

 ## 2.2.0

 ### Minor Changes

- [#1787](https://github.com/navikt/aksel/pull/1787) [`43463444b`](https://github.com/navikt/aksel/commit/43463444b8a2d178bf1435b88ad2d8719b41e65b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Justeringer i semantiske fargetokens, statusfarger nå mer tydelig
+- Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))

- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
-
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
-
-## 2.1.2
-
-## 2.1.1
+- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))

 ## 2.1.0

 ### Patch Changes

- [#1665](https://github.com/navikt/aksel/pull/1665) [`6ab84e581`](https://github.com/navikt/aksel/commit/6ab84e581f8d3e850bcec340608354335506a051) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny Timeline-komponent for interne-flater
-  :bug: Fikset feil danger-hover token
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-## 2.0.14
-
-## 2.0.13
-
-## 2.0.12
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
-
-## 2.0.5
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
-
-## 2.0.1
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))

 ## 2.0.0

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
-
-## 1.5.10
-
-## 1.5.9
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-## 1.5.3
-
-## 1.5.2
-
-## 1.5.1
-
-## 1.5.0
-
-## 1.4.4
-
-## 1.4.3
-
-## 1.4.2
-
-## 1.4.1
-
-## 1.4.0
-
-## 1.3.39
-
-### Patch Changes
-
- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
-
-## 1.3.38
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
@@ -238,15 +238,15 @@
      "name": "--a-text-action-on-action-subtle",
      "value": "rgba(0, 86, 180, 1)"
    },
+    { "name": "--a-text-on-warning", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-text-on-info", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-text-on-alt-2", "value": "rgba(38, 38, 38, 1)" },
    { "name": "--a-text-on-inverted", "value": "rgba(255, 255, 255, 1)" },
    { "name": "--a-text-on-neutral", "value": "rgba(255, 255, 255, 1)" },
    { "name": "--a-text-on-action", "value": "rgba(255, 255, 255, 1)" },
    { "name": "--a-text-on-success", "value": "rgba(255, 255, 255, 1)" },
    { "name": "--a-text-on-danger", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-text-on-warning", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-text-on-info", "value": "rgba(38, 38, 38, 1)" },
    { "name": "--a-text-on-alt-1", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-text-on-alt-2", "value": "rgba(38, 38, 38, 1)" },
    { "name": "--a-text-on-alt-3", "value": "rgba(255, 255, 255, 1)" }
  ],
  "semantic-surface-default": [
@@ -317,15 +317,15 @@
  ],
  "semantic-surface-warning": [
    { "name": "--a-surface-warning-subtle", "value": "rgba(255, 236, 204, 1)" },
+    {
+      "name": "--a-surface-warning-subtle-hover",
+      "value": "rgba(255, 215, 153, 1)"
+    },
    {
      "name": "--a-surface-warning-moderate",
      "value": "rgba(255, 215, 153, 1)"
    },
-    { "name": "--a-surface-warning", "value": "rgba(255, 145, 0, 1)" },
-    {
-      "name": "--a-surface-warning-subtle-hover",
-      "value": "rgba(255, 215, 153, 1)"
-    }
+    { "name": "--a-surface-warning", "value": "rgba(255, 145, 0, 1)" }
  ],
  "semantic-surface-info": [
    { "name": "--a-surface-info-subtle", "value": "rgba(216, 249, 255, 1)" },
@@ -474,22 +474,25 @@
    { "name": "--a-border-radius-full", "value": "9999px" }
  ],
  "shadow": [
-    { "name": "--a-shadow-xsmall", "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)" },
+    {
+      "name": "--a-shadow-xsmall",
+      "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
+    },
    {
      "name": "--a-shadow-small",
-      "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+      "value": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)"
    },
    {
      "name": "--a-shadow-medium",
-      "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+      "value": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)"
    },
    {
      "name": "--a-shadow-large",
-      "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+      "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)"
    },
    {
      "name": "--a-shadow-xlarge",
-      "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
+      "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
    },
    { "name": "--a-shadow-focus", "value": "0 0 0 3px rgba(0, 52, 125, 1)" },
    {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "4.1.3",
+  "version": "4.5.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -2,19 +2,19 @@
  "a": {
    "shadow": {
      "xsmall": {
-        "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)"
+        "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
      },
      "small": {
-        "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+        "value": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)"
      },
      "medium": {
-        "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+        "value": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)"
      },
      "large": {
-        "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)"
      },
      "xlarge": {
-        "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
+        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
      },
      "focus": {
        "inverted": {
@@ -10,9 +10,8 @@ const Shadow = ({ token }) => (
    <div className="shadow" style={{ boxShadow: token }} />
    <style>{`
    .shadow {
-      width: 4rem;
-      height: 4rem;
-      background: #f7f7f7;
+      width: 12rem;
+      height: 6rem;
      border-radius: 16px;
    }
    `}</style>
@@ -23,7 +22,7 @@ export const XSmall = () => <Shadow token="var(--a-shadow-xsmall)" />;
 export const Small = () => <Shadow token="var(--a-shadow-small)" />;
 export const Medium = () => <Shadow token="var(--a-shadow-medium)" />;
 export const Large = () => <Shadow token="var(--a-shadow-large)" />;
-export const XxLarge = () => <Shadow token="var(--a-shadow-xlarge)" />;
+export const XLarge = () => <Shadow token="var(--a-shadow-xlarge)" />;
 export const Focus = () => <Shadow token="var(--a-shadow-focus)" />;
 export const FocusInverted = () => (
  <Shadow token="var(--a-shadow-focus-inverted)" />
@@ -0,0 +1,867 @@
+# Changelog
+
+## 4.5.0
+
+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### @navikt/ds-css
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+<!---->
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+## 4.4.2
+
+### @navikt/ds-react
+
+- Textarea: Fikset i18n for counter ([`718b3204d`](https://github.com/navikt/aksel/commit/718b3204d8714c4fc515dcad484424214bdc0c77))
+
+## 4.4.1
+
+### @navikt/ds-css
+
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+## 4.4.0
+
+### @navikt/ds-tailwind
+
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-react
+
+- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-css
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0
+
+### @navikt/ds-react
+
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+
+### @navikt/ds-css
+
+- Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))
+
+<!---->
+
+- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
+
+## 4.2.0
+
+### @navikt/ds-react
+
+- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+
+### @navikt/ds-css
+
+- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
+
+## 4.1.7
+
+### @navikt/ds-react
+
+- Fikset JSDom-problemer ved testing av Timeline
+
+- La til `wrapperClassname`-prop for HelpText ([PR](https://github.com/navikt/aksel/pull/2056))
+
+## 4.1.6
+
+### @navikt/ds-react
+
+- Timeline-period brakk ved bruk av JSDom i vitest og jest
+
+## 4.1.5
+
+### @navikt/ds-react
+
+- `OverridableComponent` fungerer nå med komponenter som allerede bruker 'as'-prop. ([PR](https://github.com/navikt/aksel/pull/2051))
+
+- Popover: `bubbleEscape`-prop tilbyr muligheten for escape-events til å sendes opp gjennom dom-treet. ([PR](https://github.com/navikt/aksel/pull/2052))
+
+### @navikt/aksel-icons
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
+
+## 4.1.4
+
+### @navikt/ds-css
+
+- Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))
+
+## 4.1.3
+
+### @navikt/ds-react
+
+- `className` ble ikke riktig forwardet til ikke-klikkbar Period i Timeline
+
+## 4.1.2
+
+### @navikt/ds-react
+
+- La til JSDoc for Skeleton-komponent
+
+## 4.1.1
+
+### @navikt/ds-css
+
+- :bug: Fikset cursor-markering av tekst i skeleton.
+
+## 4.1.0
+
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+### @navikt/ds-react
+
+- Chips: `neutral` og `action`-varianter for Chips.Toggle. `checkmark`-prop for Chips.Toggle ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Ny komponent Skeleton! ([PR](https://github.com/navikt/aksel/pull/1821))
+
+<!---->
+
+- La til JSDoc dokumentasjon for alle komponenter ([PR](https://github.com/navikt/aksel/pull/2034))
+
+- Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))
+
+### @navikt/ds-tokens
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-css
+
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/aksel-stylelint
+
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+
+## 4.0.0
+
+### @navikt/ds-react
+
+- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+### @navikt/ds-css
+
+- All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter.
+
+- Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
+
+- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)
+
+### @navikt/aksel
+
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+## 3.4.2
+
+### @navikt/aksel-stylelint
+
+- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))
+
+## 3.4.1
+
+### @navikt/aksel-stylelint
+
+- Inkluderer nå dist-mappe i release
+
+## 3.4.0
+
+### @navikt/ds-react
+
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
+
+### @navikt/ds-css
+
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
+
+### @navikt/aksel-stylelint
+
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
+
+## 3.3.1
+
+### @navikt/ds-react
+
+- CopyButton: native `Clipboard API` ([PR](https://github.com/navikt/aksel/pull/2005))
+
+## 3.3.0
+
+### @navikt/ds-react
+
+- Timeline: popover/tooltip vises nå på hover, ikke onClick. ([PR](https://github.com/navikt/aksel/pull/1995))
+
+## 3.2.4
+
+### @navikt/ds-react
+
+- Search: Støtter nå htmlSize-prop ([PR](https://github.com/navikt/aksel/pull/2000))
+
+## 3.2.3
+
+### @navikt/ds-react
+
+- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
+### @navikt/ds-css
+
+- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
+### @navikt/aksel-icons
+
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
+
+## 3.2.2
+
+### @navikt/ds-react
+
+- CopyButton: Fjernet use-client directive fra komponent. (warning i vite/rollup)
+
+## 3.2.0
+
+### @navikt/ds-react
+
+- Ny komponent CopyButton! Erstatter `CopyToClipboard` som nå er tagget som deprecated ([PR](https://github.com/navikt/aksel/pull/1982))
+
+## 3.1.3
+
+### @navikt/ds-css
+
+- :lipstick: Oppdatert utseende for ToggleGroup. `Medium` og `Small`-size er begge 10px lavere, mindre border-radius ([PR](https://github.com/navikt/aksel/pull/1976))
+
+## 3.1.0
+
+### @navikt/ds-react
+
+- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
+### @navikt/ds-css
+
+- Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
+
+<!---->
+
+- Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
+## 3.0.1
+
+### @navikt/ds-react
+
+- Fjernet `@navikt/ds-icons` fra dependencies
+
+- Accordion: Oppdatert default headingSize brukt i i Accordion.Header
+
+## 3.0.0
+
+### @navikt/ds-react
+
+- Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))
+
+- Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))
+
+### @navikt/ds-css
+
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
+
+## 2.9.8
+
+### @navikt/aksel-icons
+
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
+
+## 2.9.7
+
+### @navikt/aksel-icons
+
+- Fikset `CheckmarkIcon`-bug
+
+## 2.9.6
+
+### @navikt/aksel-icons
+
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
+
+## 2.9.4
+
+### @navikt/aksel
+
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
+
+## 2.9.3
+
+### @navikt/aksel-icons
+
+- Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
+
+## 2.9.1
+
+### @navikt/ds-react
+
+- ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))
+
+## 2.9.0
+
+### @navikt/ds-css
+
+- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
+
+## 2.8.16
+
+### @navikt/ds-react
+
+- ExpansionCard: ExpansionCard.Content sendte ikke `className` videre
+
+- Datepicker. Bedre håndtering av visning for out-of-range-datoer ([PR](https://github.com/navikt/aksel/pull/1929))
+
+## 2.8.15
+
+### @navikt/aksel-icons
+
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
+
+## 2.8.14
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: Oppdaterer vist måneder ved popover åpne/lukk. Fikser out-of-range håndtering av `today`
+
+## 2.8.13
+
+### @navikt/aksel-icons
+
+- Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
+
+## 2.8.11
+
+### @navikt/aksel-icons
+
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
+
+## 2.8.10
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: refaktorert event-handling i hooks ([PR](https://github.com/navikt/aksel/pull/1907))
+
+## 2.8.9
+
+### @navikt/ds-css
+
+- Button: Padding/border-radius tokens ([PR](https://github.com/navikt/aksel/pull/1905))
+
+## 2.8.8
+
+### @navikt/aksel-icons
+
+- Nye ikoner `VideoSlash` og `VideoSlashFill`
+
+## 2.8.7
+
+### @navikt/ds-react
+
+- Fikset typografi-bruk for `Radio` og `Checkbox`.
+
+### @navikt/ds-css
+
+- Button: token for tertiary
+
+## 2.8.6
+
+### @navikt/ds-css
+
+- Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+
+## 2.8.5
+
+### @navikt/ds-css
+
+- Accordion: tokens for header-bakgrunn
+
+- Select: Fikset tekstfarge på iphone ([PR](https://github.com/navikt/aksel/pull/1879))
+
+## 2.8.4
+
+### @navikt/aksel-icons
+
+- Fikset Sourcemap-bug
+
+## 2.8.3
+
+### @navikt/ds-react
+
+- Textarea: oppdatert counter-tekst + mulighet for lokalisering ([PR](https://github.com/navikt/aksel/pull/1875))
+
+## 2.8.2
+
+### @navikt/ds-react
+
+- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
+
+### @navikt/ds-css
+
+- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
+
+## 2.8.1
+
+### @navikt/ds-react
+
+- ExpansionCard: Oppdaetrt standard title-size til `medium`
+
+## 2.8.0
+
+### @navikt/ds-react
+
+- Ny komponent ExpansionCard! ([PR](https://github.com/navikt/aksel/pull/1820))
+
+## 2.7.8
+
+### @navikt/ds-css
+
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
+
+## 2.7.7
+
+### @navikt/aksel-icons
+
+- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
+
+## 2.7.5
+
+### @navikt/ds-css
+
+- ToggleGroup: Fikset token-bug
+
+## 2.7.4
+
+### @navikt/aksel-icons
+
+- Nye ikoner, `CaretDownFill`, `CaretLeft`, `CaretLeftFill`, `CaretLeftRight`, `CaretLeftRightFill`, `CaretRight`, `CaretRightFill`, `CaretUpDownFill`, `CaretUpFill`, `Escalator`, `Moon`, `MoonFill`. Fjernet `EscalatorStroke` ([PR](https://github.com/navikt/aksel/pull/1852))
+
+## 2.7.0
+
+### @navikt/aksel-icons
+
+- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))
+
+## 2.6.2
+
+### @navikt/ds-react
+
+- Textarea: Fikset React v18 problem med `TextareaAutosize`
+
+## 2.6.1
+
+### @navikt/ds-react
+
+- Search: `onSearchClick`-prop for lettere submit-handling
+
+## 2.5.1
+
+### @navikt/ds-react
+
+- List: Refaktorert nestede lister
+
+## 2.5.0
+
+### @navikt/ds-tailwind
+
+- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
+
+### @navikt/ds-tokens
+
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
+
+## 2.4.3
+
+### @navikt/ds-css
+
+- Select: Fikset disabled + opacity bug for Chrome
+
+## 2.4.2
+
+### @navikt/ds-react
+
+- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
+
+### @navikt/ds-css
+
+- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))
+
+## 2.4.1
+
+### @navikt/ds-react
+
+- Datepicker: la til `fixedWeeks`-prop for å alltid vise 6 uker i Datepicker.Standalone ([PR](https://github.com/navikt/aksel/pull/1827))
+
+## 2.4.0
+
+### @navikt/ds-react
+
+- Ny komponent List! ([PR](https://github.com/navikt/aksel/pull/1807))
+
+## 2.3.1
+
+### @navikt/ds-css
+
+- Fikset feil bruk av fallback-tokens i Textarea og Timeline
+
+## 2.3.0
+
+### @navikt/ds-css
+
+- Select: Fikset sentrering av tekst i Firefox ([PR](https://github.com/navikt/aksel/pull/1813))
+
+<!---->
+
+- Select: `small`-variant er nå 32px (var 34px)
+
+## 2.2.0
+
+### @navikt/ds-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+### @navikt/ds-tokens
+
+- Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
+
+- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))
+
+### @navikt/ds-css
+
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `Neutral`-variant.
+
+## 2.1.7
+
+### @navikt/ds-react
+
+- Datepicker: Fikset rekkefølge på `onValidate` og `onRangeChange` i useRangepicker-hook
+
+## 2.1.6
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: `openOnFocus`-prop for manuell håndtering av popover ([PR](https://github.com/navikt/aksel/pull/1777))
+
+## 2.1.5
+
+### @navikt/ds-react
+
+- Datepicker: ESM import fra date-fns fungerer nå
+
+## 2.1.4
+
+### @navikt/ds-react
+
+- Datepicker: Fikset edgecase i `useRangepicker` der valg av startdato etter sluttdato ga feil output
+
+## 2.1.3
+
+### @navikt/ds-react
+
+- Monthpicker: håndterer visning av år riktig ([PR](https://github.com/navikt/aksel/pull/1771))
+
+## 2.1.2
+
+### @navikt/ds-css
+
+- TextField: `small`-variant har nå 8px horisontal padding (før 4px)
+
+## 2.1.1
+
+### @navikt/ds-react
+
+- Fikset `@types/react` v18 feil introdusert i v2.0.6 ([PR](https://github.com/navikt/aksel/pull/1759))
+
+## 2.1.0
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: år med 2 siffer i input fungerer nå
+
+### @navikt/ds-tokens
+
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
+
+## 2.0.18
+
+### @navikt/ds-react
+
+- Datepicker: Bedre typer for `ref`
+
+## 2.0.15
+
+### @navikt/ds-react
+
+- Chat: `toptextPosition`-prop for horisontal plassering av navn og dato. ([PR](https://github.com/navikt/aksel/pull/1748))
+
+## 2.0.14
+
+### @navikt/ds-react
+
+- Oppdatert `@floating-ui/react`-versjon
+
+## 2.0.12
+
+### @navikt/ds-css
+
+- Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))
+
+## 2.0.7
+
+### @navikt/ds-react
+
+- Monthpicker: Fikset keyboard-click
+
+## 2.0.6
+
+### @navikt/ds-react
+
+- Datepicker: Datepicker.Input satt `className` flere ganger
+
+## 2.0.5
+
+### @navikt/ds-css
+
+- Button: Reverserte border-width endrinder (var 1.5px, nå 2px)
+
+## 2.0.3
+
+### @navikt/ds-react
+
+- Datepicker: `strategi`-prop for layout-strategi av popover
+
+## 2.0.2
+
+### @navikt/ds-react
+
+- Datepicker: onClick-event fikset
+
+## 2.0.1
+
+### @navikt/ds-css
+
+- Bugfixer ved bruk av tokens oppdatert i v2.0.0
+
+## 2.0.0
+
+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
+### @navikt/ds-react
+
+- Fonter blir bruk i all typografi blir nå lastet fra CDN
+
+### @navikt/ds-tokens
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
+### @navikt/ds-css
+
+- Fontlasting: Fonter lastes nå fra NAV-CDN
+
+- Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
+
+## 1.5.10
+
+### @navikt/ds-react
+
+- Modal: `parentSelector`-prop i Modal ([PR](https://github.com/navikt/aksel/pull/1717))
+
+## 1.5.9
+
+### @navikt/ds-css
+
+- Chips: 4px -> 2px gap mellom checkmark i Chips.Toggle
+
+## 1.5.7
+
+### @navikt/ds-react
+
+- Datepicker: `defaultMonth` og `Year` prop lagt til
+
+## 1.5.6
+
+### @navikt/ds-react
+
+- Datepicker: fungerer nå med `open` shadow-dom
+
+## 1.5.3
+
+### @navikt/ds-css
+
+- Tokens: Byttet om på rekkefølge av alt-farger
+
+## 1.5.2
+
+### @navikt/ds-react
+
+- Chips: `FilterChips` heter nå `ToggleChips`
+
+## 1.5.1
+
+### @navikt/ds-css
+
+- Chips. Bruker nå standard flex-wrap
+
+## 1.5.0
+
+### @navikt/ds-react
+
+- Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
+- Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))
+
+### @navikt/ds-css
+
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
+## 1.4.4
+
+### @navikt/ds-react
+
+- Datepicker: Eksponerer `onValidation`-typer
+
+## 1.4.3
+
+### @navikt/ds-react
+
+- Datepicker: Validering og inputFormat funksjonalitet
+
+## 1.4.1
+
+### @navikt/ds-react
+
+- Datepicker: Følger språkrådets dato-formatering for måneder.
+
+## 1.4.0
+
+### @navikt/ds-react
+
+- Ny komponent Provider! For håndtering av global config på tvers av komponenter
+
+## 1.3.39
+
+### @navikt/ds-react
+
+- useId-bug fikset ved bruk i både react 17 og 18
+
+- Datepicker: Patchet UX-bugs ved navigering til fortid/nåtid
+
+- HelpText: Reverserte til å tillate bruk av `React.ReactNode` som children
+
+- DatePicker og MonthPicker er tilgjengelig som Beta
+
+- Modal: `overlayClassName`-prop lagt til
+
+- ConfirmationPanel: Checkbox lenker nå til innholdet i `aria-describedby`
+
+- Table: `shadeOnHover`-prop for å skru av/på hover-effekt
+
+- Table: `colSpan`-prop på `Table.ExpandableRow`
+
+- HelpText: har nå standard max-width på `65ch`
+
+- Stepper: `interactive` og `completed`-props for wizard-løsninger
+
+### @navikt/ds-css
+
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
+
+## 1.3.24
+
+### @navikt/ds-css
+
+- Tokens tilgjengeligjøres nå også på `:host`. Dette lar shadow-dom brukere konsumere tokens direkte.
+
+## 1.2.0
+
+### @navikt/ds-react
+
+- Dropdown: `closeOnSelect`-prop for å skru av/på lukking av dropdown ved valg
+
+## 1.1.0
+
+### @navikt/ds-react
+
+- Dropdown: `onSelect`-prop for callback ved valg av element
+
+## 1.0.0
+
+### @navikt/ds-react
+
+- Samversjonering: Alle pakker fra Aksel har nå, og vil i fremtiden ha samme versjonsnummer.
+
+- Accordion/ReadMore: `renderContentWhenClosed`-prop fjernet
+
+- Button: `icon` og `iconPosition`-prop for bedre ikonplassering
+
+- Tabs: `loop`-prop er flyttet fra `Tabs.Tablist` til `Tabs`. `iconPosition`-prop er flyttet fra `Tabs.Tab` til `Tabs`
+
+- Chat: `SpeechBubble`-komponent er renamet til `Chat`.
+
+- Chat: `topText` heter nå `name` og `timestamp`, `illustration` heter nå `avatar` og `illustrationBgColor` heter nå `avatarBgColor`
+
+- Pagination: `medium` -> `small`, `small` -> `xsmall`
+
+- Popover: `auto`, `auto-start` og `auto-end` er fjernet som `placement`-prop
+
+- CopyToClipboard: `iconPlacement` er renamet til `iconPosition`
+
+- ConfirmationPanel: `ref` er flyttet fra wrapper-div til checkbox
+
+- Stepper: `StepIndicator` er refaktorert og renamet til `Stepper`. `StepIndicator`-komponenten er fjernet
+
+- MicroCard: er deprecated
+
+- PageHeader: er deprecated
+
+- Menu: er deprecated
+
+- Divider: er deprecated og renamet til `Dropdown.Menu.Divider`
+
+- `@material/ui` er fjernet som dependency
+
+- `react-popper` og `@popperjs/core` er fjernet som dependency. Bruker nå `@floating-ui/react-dom-interactive`
+
+- `classnames` er byttet ut med `clsx` internt
+
+- `react-collapse` er fjernet som dependency
+
+- `uuid` er fjernet som dependency. Bruker nå intern løsning for id-håndtering
+
+- Label: er nå standard `label`-tag (tidligere p-tag)
@@ -1,19 +1,12 @@
-FROM node:18.1-alpine3.14
-RUN apk add --no-cache libc6-compat
+FROM gcr.io/distroless/nodejs:18 as runtime

 ENV NODE_ENV production

 WORKDIR /app
 COPY aksel.nav.no/website/.next/standalone ./
-# COPY aksel.nav.no/website/package.json .
-# COPY aksel.nav.no/website/.next/ .next/
-# COPY aksel.nav.no/website/public/ public
-# COPY aksel.nav.no/website/.env .
-# COPY aksel.nav.no/website/next.config.js .
-# COPY node_modules/ node_modules/
-# COPY @navikt/ @navikt/
-# CMD yarn start
+COPY aksel.nav.no/website/next-logger.config.js ./
+
+ENV NODE_OPTIONS '-r next-logger'

 EXPOSE 3000
-CMD ["node", "aksel.nav.no/website/server.js"]
-
+CMD ["aksel.nav.no/website/server.js"]
@@ -17,14 +17,6 @@ spec:
    path: /api/isAlive
    initialDelay: 10

-  resources:
-    limits:
-      cpu: 2000m
-      memory: 2048Mi
-    requests:
-      cpu: 500m
-      memory: 1024Mi
-
  accessPolicy:
    outbound:
      external:
@@ -35,3 +27,7 @@ spec:
        - host: cdn.sanity.io
      rules: []
      env:
+  filesFrom:
+    - emptyDir:
+        medium: Memory
+      mountPath: /app/aksel.nav.no/website/.next/cache
@@ -21,13 +21,6 @@ spec:
    path: /api/isAlive
    initialDelay: 20
    timeout: 1
-  resources:
-    limits:
-      cpu: 2000m
-      memory: 2048Mi
-    requests:
-      cpu: 500m
-      memory: 1024Mi
  accessPolicy:
    outbound:
      external:
@@ -46,3 +39,7 @@ spec:
          age: 7
          numNewerVersions: 3
          withState: ANY
+  filesFrom:
+    - emptyDir:
+        medium: Memory
+      mountPath: /app/aksel.nav.no/website/.next/cache
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^4.1.3",
-    "@navikt/ds-css": "^4.1.3",
-    "@navikt/ds-react": "^4.1.3",
-    "@navikt/ds-tailwind": "^4.1.3",
-    "@navikt/ds-tokens": "^4.1.3"
+    "@navikt/aksel-icons": "^4.5.0",
+    "@navikt/ds-css": "^4.5.0",
+    "@navikt/ds-react": "^4.5.0",
+    "@navikt/ds-tailwind": "^4.5.0",
+    "@navikt/ds-tokens": "^4.5.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -101,6 +101,7 @@ const serializers = {
              spacing
              level="4"
              size="small"
+              id={`h${node._key}`}
              {...textProps}
            />
          );
@@ -1,13 +0,0 @@
-import "../dist/tw.css";
-import { Provider } from "@navikt/ds-react";
-import { IdContext } from "components/website-modules/utils/contexts";
-
-export const NextDecorator = ({ children }: { children: React.ReactNode }) => (
-  <Provider>
-    <IdContext.Provider value={{ id: "storybook-testid" }}>
-      <div id="__next" className="aksel antialiased">
-        {children}
-      </div>
-    </IdContext.Provider>
-  </Provider>
-);
@@ -13,15 +13,13 @@ export { default as PropTable } from "./sanity-modules/props/PropTabell";
 export { default as SideModul } from "./sanity-modules/SideModul";
 export { default as Tabell } from "./sanity-modules/Tabell";
 export { default as TastaturModul } from "./sanity-modules/TastaturTabell";
-export { default as Tips } from "./sanity-modules/tips";
+export { default as Tips } from "./sanity-modules/Tips";
 export { default as TokenTable } from "./sanity-modules/TokenTable";
 export * from "./sanity-modules/UuFeedback";
 export { default as Video } from "./sanity-modules/VideoEmbed";
 export * from "./website-modules/BreadCrumbs";
-export { default as EditButton } from "./website-modules/EditButton";
 export { default as Feedback } from "./website-modules/feedback";
 export * from "./website-modules/H2";
 export { default as PreviewBanner } from "./website-modules/PreviewBanner";
-export * from "./website-modules/TilToppen";
 export * from "./website-modules/TOC";
 export * from "./website-modules/utils";
@@ -75,13 +75,13 @@ export const WithSidebar = ({
    <>
      <Header />
      <div className="bg-bg-default">
-        <div className="mx-auto mt-6 mb-24 flex w-full max-w-screen-2xl gap-6">
+        <div className="mx-auto mb-24 mt-6 flex w-full max-w-screen-2xl gap-6">
          <Sidebar kategori={pageType.type} links={sidebar} />
          <div className="relative w-full">
            <main
              tabIndex={-1}
              id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative z-0 w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
            >
              <div
                className={cl(
@@ -89,7 +89,9 @@ export const WithSidebar = ({
                  {
                    "bg-surface-subtle flex items-center justify-between":
                      variant === "page",
-                    "bg-deepblue-700 grid py-[4.25rem] pb-6":
+                    "bg-deepblue-700/70 grid py-[4.25rem] pb-6":
+                      variant !== "page",
+                    "before:from-deepblue-700 before:absolute before:inset-0 before:-z-10 before:rounded-xl before:bg-gradient-to-br before:via-blue-500 before:to-violet-700":
                      variant !== "page",
                  }
                )}
@@ -115,18 +117,17 @@ export const WithSidebar = ({
                    size="xlarge"
                    className={cl({
                      "text-deepblue-800": variant === "page",
-                      "text-text-on-action bg-deepblue-700/80 w-fit":
-                        variant !== "page",
+                      "text-text-on-action  w-fit": variant !== "page",
                    })}
                  >
                    {pageType.title}
                  </Heading>
                  <div
                    className={cl({
-                      "bg-deepblue-700/80 w-fit": variant !== "page",
+                      "w-fit": variant !== "page",
                    })}
                  >
-                    {intro && intro}
+                    {intro}
                  </div>
                </div>
                {variant === "page" && pageProps.status?.bilde && (
@@ -149,17 +150,15 @@ export const WithSidebar = ({
                  </div>
                )}
                {variant === "landingPage" && (
-                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
-                    <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
+                  <div className="pointer-events-none absolute right-0 top-0 hidden sm:block">
+                    <HeaderCube className="text-deepblue-300 z-[-1] max-h-full" />
                  </div>
                )}
              </div>
+
              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                {withToc && (
-                  <TableOfContentsv2
-                    changedState={pageProps["content"]}
-                    hideToc={false}
-                  />
+                  <TableOfContentsv2 changedState={pageProps["content"]} />
                )}
                <div className="w-full">
                  {children}
@@ -2,8 +2,15 @@ import { BodyShort, Heading, Link } from "@navikt/ds-react";
 import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
 import Logo from "components/assets/Logo";
 import { logNav } from "components/website-modules/utils/amplitude";
-import { EditButton } from "../..";
 import FooterForm from "./FooterForm";
+import dynamic from "next/dynamic";
+
+export const EditButton = dynamic(
+  () => import("components/website-modules/EditButton"),
+  {
+    ssr: false,
+  }
+);

 const Footer = () => {
  return (
@@ -109,7 +116,7 @@ function FooterLink({ children, href }) {
  return (
    <li>
      <Link
-        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 no-underline hover:underline focus:bg-blue-200 focus:shadow-blue-200"
+        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 underline hover:no-underline focus:bg-blue-200 focus:shadow-blue-200"
        href={href}
        onClick={(e) =>
          logNav(
@@ -66,7 +66,7 @@ export const Hamburger = () => {
          aria={{ modal: true }}
          overlayClassName={styles.modalOverlay}
          contentLabel="Meny"
-          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] lg:hidden"
+          className="bg-surface-default shadow-xlarge absolute left-4 right-4 top-0 block rounded px-11 py-14 sm:left-auto sm:right-6 sm:w-96 sm:max-w-[90%] lg:hidden"
        >
          <nav aria-label="hovedmeny">
            <ul>
@@ -75,7 +75,7 @@ export const Hamburger = () => {
                onClick={() => setOpen(false)}
                className={cl(
                  styles.akselTertiaryButton,
-                  "absolute top-2 right-2"
+                  "absolute right-2 top-2"
                )}
                icon={<XMarkIcon title="lukk meny" fontSize="1.5rem" />}
              />
@@ -1,10 +1,33 @@
-import Logo from "components/assets/Logo";
-import Link from "next/link";
-import { logNav } from "../..";
 import cl from "clsx";
-import { useRouter } from "next/router";
+import Logo from "components/assets/Logo";
 import { Hamburger } from "components/layout/header/Hamburger";
-import { GlobalSearch } from "./search";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { logNav } from "../..";
+import { Button } from "@navikt/ds-react";
+import dynamic from "next/dynamic";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+
+export const GlobalSearch = dynamic(() => import("./search"), {
+  loading: () => (
+    <Button
+      variant="primary"
+      className="hover:bg-deepblue-700 bg-deepblue-600 h-11"
+      aria-keyshortcuts="Control+b"
+      icon={
+        <MagnifyingGlassIcon
+          className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
+          aria-label="Åpne meny"
+          aria-hidden
+        />
+      }
+      iconPosition="left"
+    >
+      Søk
+    </Button>
+  ),
+  ssr: false,
+});

 const LinkElement = ({ name, href, prefetch = undefined }) => {
  const { asPath } = useRouter();
@@ -59,7 +82,7 @@ export const Header = ({
            "mx-auto flex h-full max-w-screen-2xl items-center pr-4 lg:pr-6"
          )}
        >
-          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
+          <div className="flex h-11 items-center pl-4 pr-4 sm:pl-4 sm:pr-6">
            <Link
              href="/"
              passHref
@@ -88,7 +111,9 @@ export const Header = ({
              <LinkElement name="Bloggen" href="/produktbloggen" />
            </ul>
          </nav>
-          <GlobalSearch />
+          <div className="z-[1050] ml-auto mr-4 flex justify-center lg:ml-0 lg:mr-0">
+            <GlobalSearch />
+          </div>
          <div className="mr-2 h-full lg:hidden">
            <Hamburger />
          </div>
@@ -1,3 +1,4 @@
+/* stylelint-disable aksel/design-token-no-global-override */
 .modalOverlay {
  z-index: var(--a-z-index-modal);
  @apply bg-surface-backdrop fixed inset-0 grid place-items-center lg:hidden;
@@ -5,7 +6,7 @@

 .modalOverlaySearch {
  z-index: 3000;
-  @apply bg-surface-backdrop fixed inset-0 grid place-items-center;
+  @apply bg-deepblue-900/20 fixed inset-0 grid place-items-center;
 }

 .akselTertiaryButton {
@@ -0,0 +1,36 @@
+import { searchOptions } from "@/types";
+import { Skeleton } from "@navikt/ds-react";
+import { useContext } from "react";
+import { SearchResultContext } from "./providers";
+
+export const Error = () => {
+  const { isValidating, error } = useContext(SearchResultContext);
+
+  if (error) {
+    return (
+      <p aria-live="assertive" className="mx-auto w-fit px-6 py-24">
+        Noe gikk galt! Last siden på nytt eller ta kontakt med Aksel.
+      </p>
+    );
+  }
+
+  if (!isValidating) {
+    return null;
+  }
+
+  return (
+    <div className="grid w-full gap-2 p-1">
+      <Skeleton height="3rem" variant="rounded" />
+
+      <div className="flex flex-wrap gap-2 px-4 pb-4 md:px-10">
+        {Object.keys(searchOptions)
+          .slice(0, Object.keys(searchOptions).length - 1)
+          .map((x) => (
+            <Skeleton variant="rounded" height="1.75rem">
+              {searchOptions[x].display}
+            </Skeleton>
+          ))}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,110 @@
+import { searchOptions } from "@/types";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button, Chips, Search } from "@navikt/ds-react";
+import { KBD } from "components/website-modules/KBD";
+import { useContext, useRef } from "react";
+import { useShortcut } from "./hooks";
+import {
+  SearchContext,
+  SearchNavigationContext,
+  SearchResultContext,
+} from "./providers";
+
+export const SearchForm = () => {
+  const { open, setOpen, tags, setTags, query, setQuery, os } =
+    useContext(SearchContext);
+  const { update, results, reset, isValidating, error } =
+    useContext(SearchResultContext);
+  const { close } = useContext(SearchNavigationContext);
+  const inputRef = useRef(null);
+
+  useShortcut(open, setOpen, inputRef);
+
+  const handleSearchStart = (value: string) => {
+    setQuery(value);
+    value === "" ? reset() : update(value, tags);
+  };
+
+  const noHits = (key: string) => {
+    return !Object.hasOwn(results?.groupedHits ?? {}, key);
+  };
+
+  const noHitsAndQuery = (key: string) => {
+    return query.length > 0 && !tags.find((x) => x === key);
+  };
+
+  if (isValidating || error) {
+    return null;
+  }
+
+  const chipsToShow = Object.entries(searchOptions)
+    .filter((x) => !x[1].hidden)
+    .filter(
+      ([key]) =>
+        !(noHitsAndQuery(key) && noHits(key) && results?.hits[key] === 0)
+    );
+
+  return (
+    <form
+      role="search"
+      onSubmit={(e) => e.preventDefault()}
+      className="bg-surface-default grid w-full gap-2"
+    >
+      <div className="flex flex-row-reverse items-center gap-1 p-1">
+        <Button
+          variant="tertiary-neutral"
+          icon={<XMarkIcon title="Lukk søk" />}
+          onClick={close}
+          type="button"
+        />
+        <Search
+          label={
+            <span className="flex items-center gap-2">
+              <span>Søk i hele Aksel</span>
+              {os === "mac" ? <KBD>CMD + B</KBD> : <KBD>CTRL + B</KBD>}
+            </span>
+          }
+          aria-autocomplete="both"
+          variant="simple"
+          value={query}
+          onChange={(v) => handleSearchStart(v)}
+          onClear={() => {
+            setQuery("");
+            reset();
+          }}
+          ref={inputRef}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          autoFocus
+          id="aksel-search-input"
+          clearButton={false}
+          placeholder="Søk gjennom hele aksel"
+          className="border-none pr-0 focus:shadow-none"
+        />
+      </div>
+      {chipsToShow.length !== 0 && (
+        <Chips className="px-4 pb-4 md:px-10">
+          {chipsToShow.map(([key, val]) => (
+            <Chips.Toggle
+              key={key}
+              variant="neutral"
+              selected={tags.includes(key as keyof typeof searchOptions)}
+              type="button"
+              onClick={() => {
+                const newTags = (tags as string[]).includes(key)
+                  ? tags.filter((y) => y !== key)
+                  : [...tags, key];
+                setTags(newTags as Array<keyof typeof searchOptions>);
+                update(query, newTags);
+              }}
+            >
+              {val.display}
+            </Chips.Toggle>
+          ))}
+        </Chips>
+      )}
+    </form>
+  );
+};
@@ -1,109 +0,0 @@
-import { Label } from "@navikt/ds-react";
-import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
-import { Hit, IconHit, IconPageHit } from "./Hit";
-import React from "react";
-
-export function Group({
-  groups,
-  query,
-  startIndex,
-  logSuccess,
-}: {
-  groups: GroupedHitsT;
-  query: string;
-  startIndex: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (Object.keys(groups).length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {Object.entries(groups)
-        .sort((a, b) => searchOptions[a[0]].index - searchOptions[b[0]].index)
-        .map(([key, val], index, arr) => {
-          const prev = arr.slice(0, index);
-          const total =
-            prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
-
-          return (
-            <GroupComponent
-              logSuccess={logSuccess}
-              startIndex={total}
-              key={key}
-              heading={`${searchOptions[key].display} (${val.length})`}
-              hits={val}
-              query={query}
-            />
-          );
-        })}
-    </>
-  );
-}
-
-export function GroupComponent({
-  heading,
-  hits,
-  query,
-  startIndex,
-  logSuccess,
-}: {
-  heading: React.ReactNode;
-  hits: SearchHitT[];
-  query: string;
-  startIndex: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  return (
-    <div>
-      <div className="z-10 mt-4 rounded bg-teal-100 p-2">
-        <Label className="text-text-default" as="h3">
-          {heading}
-        </Label>
-      </div>
-      <ul className="mt-2">
-        {hits.map((x, xi) => {
-          switch (x.item._type) {
-            case "icon":
-              return (
-                <React.Fragment key={x.item.name + xi}>
-                  <IconHit
-                    key={x.item.name}
-                    hit={x}
-                    query={query}
-                    index={startIndex + xi}
-                    logSuccess={logSuccess}
-                  />
-                </React.Fragment>
-              );
-            case "icon_page":
-              return (
-                <React.Fragment key={x.item.heading + xi}>
-                  <IconPageHit
-                    key={x.item.heading}
-                    hit={x}
-                    query={query}
-                    index={startIndex + xi}
-                    logSuccess={logSuccess}
-                  />
-                </React.Fragment>
-              );
-            default:
-              return (
-                <React.Fragment key={x.item._id}>
-                  <Hit
-                    key={x.item._id}
-                    hit={x}
-                    query={query}
-                    index={startIndex + xi}
-                    logSuccess={logSuccess}
-                  />
-                </React.Fragment>
-              );
-          }
-        })}
-      </ul>
-    </div>
-  );
-}
@@ -1,212 +1,145 @@
-import { isNew } from "@/utils";
-import { Tag } from "@navikt/ds-react";
-import cl from "classnames";
-import Image from "next/legacy/image";
-import { StatusTag } from "components/website-modules/StatusTag";
-import { SearchHitT } from "@/types";
-import NextLink from "next/link";
 import { urlFor } from "@/sanity/interface";
+import { SearchHitT, searchOptions } from "@/types";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+import { Chips } from "@navikt/ds-react";
+import cl from "clsx";
+import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
+import { StatusTag } from "components/website-modules/StatusTag";
+import Image from "next/legacy/image";
+import { default as Link, default as NextLink } from "next/link";
+import { forwardRef, useContext } from "react";
+import { SearchContext, SearchLoggingContext } from "./providers";
+import { highlightMatches, highlightStr } from "./utils";

-export function Hit({
-  hit,
-  query,
-  index,
-  logSuccess,
-}: {
-  hit: SearchHitT;
-  query: string;
-  index: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (hit.item._type === "icon" || hit.item._type === "icon_page") {
-    return;
+export const Hit = forwardRef<
+  HTMLLIElement,
+  {
+    hit: SearchHitT | Omit<SearchHitT, "score" | "anchor">;
+    index: number;
+    simple?: boolean;
+    tag?: Partial<keyof typeof searchOptions>;
  }
+>(({ hit, index, simple = false, tag }, ref) => {
+  const { query } = useContext(SearchContext);
+  const { logSuccess } = useContext(SearchLoggingContext);
+
+  const getHref = () => {
+    if ("anchor" in hit) {
+      return `/${hit.item.slug}${hit?.anchor ? `#h${hit.anchor}` : ""}`;
+    }
+    return `/${hit.item.slug}`;
+  };

  return (
    <li
+      ref={ref}
      className={cl(
-        "focus-within:shadow-focus border-border-subtle group relative flex cursor-pointer scroll-mt-12 items-center justify-between gap-4 rounded border-b px-2 last-of-type:border-b-0 focus-within:z-10 hover:bg-gray-100"
+        "border-border-subtle relative flex scroll-my-10  items-center justify-between gap-3 border-b px-2 last-of-type:border-b-0"
      )}
    >
-      <div className="px-2 py-6">
-        <NextLink
-          href={`/${hit.item.slug}`}
-          passHref
-          onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
-          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-        >
-          <span className="group-hover:underline">
-            {highlightStr(hit.item.heading, query)}
-          </span>
-          <StatusTag status={hit?.item?.status?.tag} aria-hidden />
-        </NextLink>
-        <span className="font-regular text-text-subtle text-lg" aria-hidden>
-          {hit.highlight.shouldHightlight ? (
-            <div>{highlightStr(hit.highlight.description, query)}</div>
-          ) : (
-            <div>{hit.highlight.description}</div>
-          )}
-        </span>
-        <span className="mt-4 flex gap-2 empty:mt-0">
-          {hit.item?.tema &&
-            hit.item?.tema.map((x) => (
-              <Tag variant="neutral-moderate" size="xsmall" key={x}>
-                {x}
-              </Tag>
-            ))}
-        </span>
-      </div>
-
-      <div className="hidden aspect-square w-24 sm:block">
-        {hit.item?.status?.bilde && (
-          <Image
-            src={urlFor(hit.item.status.bilde).auto("format").url()}
-            decoding="sync"
-            width="96"
-            height="96"
-            layout="fixed"
-            objectFit="contain"
-            alt={hit.item?.heading + " thumbnail"}
-            aria-hidden
-          />
-        )}
-      </div>
-    </li>
-  );
-}
-
-export function IconHit({
-  hit,
-  query,
-  index,
-  logSuccess,
-}: {
-  hit: SearchHitT;
-  query: string;
-  index: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (hit.item._type !== "icon") {
-    return;
-  }
-
-  return (
-    <li
-      className={cl(
-        "focus-within:shadow-focus border-border-subtle group relative flex cursor-pointer scroll-mt-12 items-center justify-between gap-4 rounded border-b px-2 last-of-type:border-b-0 focus-within:z-10 hover:bg-gray-100"
-      )}
-    >
-      <div className="px-2 py-2">
-        <NextLink
-          href={`/ikoner/${hit.item.name}`}
-          passHref
-          onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
-          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-        >
-          <span className="group-hover:underline">
-            {highlightStr(`${hit.item.name}Icon`, query)}
-          </span>
-          {isNew(hit.item?.created_at ?? "") && (
-            <Tag variant="info" size="small" aria-hidden>
-              Ny
-            </Tag>
-          )}
-        </NextLink>
-        <span className="font-regular text-text-subtle text-lg" aria-hidden>
-          <div>{highlightStr(hit.item.sub_category, query)}</div>
-        </span>
-      </div>
-
-      <div className="hidden aspect-square w-24 place-content-center sm:grid">
-        <Image
-          src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/aksel-icons/icons/${hit.item.name}.svg`}
-          decoding="sync"
-          width="24"
-          height="24"
-          layout="fixed"
-          objectFit="contain"
-          alt={hit.item.name + " thumbnail"}
-          aria-hidden
-        />
-      </div>
-    </li>
-  );
-}
-
-export function IconPageHit({
-  hit,
-  query,
-  index,
-  logSuccess,
-}: {
-  hit: SearchHitT;
-  query: string;
-  index: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (hit.item._type !== "icon_page") {
-    return;
-  }
-
-  return (
-    <li
-      className={cl(
-        "focus-within:shadow-focus border-border-subtle group relative flex cursor-pointer scroll-mt-12 items-center justify-between gap-4 rounded border-b px-2 last-of-type:border-b-0 focus-within:z-10 hover:bg-gray-100"
-      )}
-    >
-      <div className="px-2 py-2">
-        <NextLink
-          href="/ikoner"
-          passHref
-          onClick={() => logSuccess(index, `/ikoner`)}
-          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-        >
-          <span className="group-hover:underline">
-            {highlightStr(`Ikoner`, query)}
-          </span>
-        </NextLink>
-        <span className="font-regular text-text-subtle text-lg" aria-hidden>
-          <div>{highlightStr(hit.item.description, query)}</div>
-        </span>
-      </div>
-
-      <div className="hidden aspect-square place-items-center sm:grid">
-        <Image
-          src="/images/thumbnail/ikoner/thumbnail.svg"
-          decoding="sync"
-          width="96"
-          height="96"
-          layout="fixed"
-          objectFit="contain"
-          alt=""
-          aria-hidden
-        />
-      </div>
-    </li>
-  );
-}
-
-function splitStr(str: string, query: string) {
-  const regexStr = query.split(" ").join("|");
-  return str.split(new RegExp(`(${regexStr})`, "gi"));
-}
-
-function highlightStr(str: string, query: string) {
-  return (
-    <span>
-      {splitStr(str, query).map((part, i) => (
+      <div className="w-full truncate px-2 py-4">
        <span
-          key={i}
          className={cl({
-            "text-text-default bg-teal-200/80": query
-              .split(" ")
-              .map((x) => x.toLowerCase())
-              .includes(part.toLowerCase()),
+            "flex flex-col gap-1": simple,
+            "flex items-center gap-2": !simple,
          })}
        >
-          {part}
+          <NextLink
+            href={getHref()}
+            onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
+            className="focus-visible:shadow-focus focus-visible:bg-border-focus focus-visible:text-text-on-action group scroll-my-32 text-xl font-semibold focus:outline-none"
+          >
+            <span className="group-hover:underline">
+              {highlightStr(hit.item.heading, query, tag)}
+            </span>
+          </NextLink>
+          {simple ? (
+            <Tag
+              type={hit.item._type}
+              size="xsmall"
+              text={hit.item.tema ? hit.item.tema[0] : undefined}
+              inline
+              aria-hidden
+            />
+          ) : (
+            <StatusTag status={hit?.item?.status?.tag} aria-hidden />
+          )}
        </span>
-      ))}
-    </span>
+
+        {!simple && <HeadingLinks index={index} hit={hit} />}
+      </div>
+
+      {!simple && (
+        <div className="hidden aspect-square w-24 sm:block">
+          {hit.item?.status?.bilde && (
+            <Image
+              src={urlFor(hit.item.status.bilde).auto("format").url()}
+              decoding="sync"
+              width="96"
+              height="96"
+              layout="fixed"
+              objectFit="contain"
+              alt={hit.item?.heading + " thumbnail"}
+              aria-hidden
+            />
+          )}
+        </div>
+      )}
+    </li>
  );
+});
+
+const highlightedHeadings = ["eksempler", "props", "tokens", "retningslinjer"];
+
+function HeadingLinks({
+  hit,
+  index,
+}: {
+  hit: SearchHitT | Omit<SearchHitT, "score" | "anchor">;
+  index: number;
+}) {
+  const { logSuccess } = useContext(SearchLoggingContext);
+
+  const Description = () => {
+    if (hit.matches[0].key !== "heading") {
+      return highlightMatches(hit.matches[0]);
+    }
+
+    return (
+      <span className="font-regular text-text-subtle max-w-full text-lg">
+        {hit.description}
+      </span>
+    );
+  };
+
+  if (hit.item._type === "komponent_artikkel") {
+    return (
+      <>
+        <Description />
+        <Chips className="mt-3" size="small">
+          {hit.item.lvl2
+            .filter(
+              (x) =>
+                !!x.id && highlightedHeadings.includes(x.text.toLowerCase())
+            )
+            .map((x) => (
+              <Link
+                prefetch={false}
+                key={x.text}
+                href={`/${hit.item.slug}${`#h${x.id}`}`}
+                onClick={() =>
+                  logSuccess(index, `/${(hit.item as any).slug}`, x.text)
+                }
+                className="min-h-6 bg-surface-neutral-subtle focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover ring-border-subtle flex items-center justify-center rounded-full px-2 ring-1 ring-inset focus:outline-none"
+              >
+                <span>{x.text}</span>
+                <ChevronRightIcon aria-hidden className="-mr-1" />
+              </Link>
+            ))}
+        </Chips>
+      </>
+    );
+  }
+
+  return <Description />;
 }
@@ -0,0 +1,132 @@
+import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
+import { Heading } from "@navikt/ds-react";
+import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Hit } from "./Hit";
+import cl from "clsx";
+
+export function CollectionMapper({
+  groups,
+  startIndex,
+}: {
+  groups: GroupedHitsT;
+  startIndex: number;
+}) {
+  if (Object.keys(groups).length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {Object.entries(groups)
+        .sort((a, b) => searchOptions[a[0]].index - searchOptions[b[0]].index)
+        .map(
+          (
+            [key, val]: [key: keyof typeof searchOptions, val: SearchHitT[]],
+            index,
+            arr
+          ) => {
+            const prev = arr.slice(0, index);
+            const total =
+              prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
+
+            return (
+              <Collection
+                startIndex={total}
+                key={key}
+                heading={`${searchOptions[key].display} (${val.length})`}
+                tag={key}
+                hits={val}
+              />
+            );
+          }
+        )}
+    </>
+  );
+}
+
+export function Collection({
+  heading,
+  hits,
+  startIndex,
+  simple = false,
+  tag,
+}: {
+  heading?: React.ReactNode;
+  hits: SearchHitT[] | Omit<SearchHitT, "score" | "anchor">[];
+  simple?: boolean;
+  startIndex: number;
+  tag?: Partial<keyof typeof searchOptions>;
+}) {
+  const [intersected, setIntersected] = useState(false);
+  const item = useRef(null);
+
+  const split = useMemo(() => {
+    if (hits.length <= (simple ? 20 : 5)) {
+      return { initial: hits, lazy: null };
+    }
+
+    return { initial: hits.slice(0, 4), lazy: hits.slice(4 + 1) };
+  }, [hits, simple]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      entry.isIntersecting && setIntersected(entry.isIntersecting);
+    });
+    item.current && observer.observe(item.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div>
+      {heading && tag && (
+        <h3
+          className={cl("sticky top-0 z-10 p-2 px-4 md:px-10", {
+            "bg-deepblue-50": ["komponent_artikkel", "ds_artikkel"].includes(
+              tag
+            ),
+            "bg-violet-50": ["aksel_prinsipp", "aksel_standalone"].includes(
+              tag
+            ),
+            "bg-teal-50": tag === "aksel_artikkel",
+            "bg-pink-50": tag === "aksel_blogg",
+          })}
+        >
+          <Tag hTag="span" type={tag} size="small" inline count={hits.length} />
+        </h3>
+      )}
+      {heading && !tag && (
+        <Heading
+          className="bg-surface-subtle sticky top-0 z-10 p-2 px-4  md:px-10"
+          size="small"
+          level="3"
+        >
+          {heading}
+        </Heading>
+      )}
+      <ul className="mt-2 px-0 md:px-6">
+        {split.initial.map((x, xi) => (
+          <Hit
+            key={xi}
+            hit={x}
+            index={startIndex + xi}
+            ref={xi === split.initial.length - 1 ? item : null}
+            simple={simple}
+            tag={tag}
+          />
+        ))}
+        {split.lazy &&
+          intersected &&
+          split.lazy.map((x, xi) => (
+            <Hit
+              key={xi}
+              hit={x}
+              index={startIndex + xi}
+              simple={simple}
+              tag={tag}
+            />
+          ))}
+      </ul>
+    </div>
+  );
+}
@@ -0,0 +1,89 @@
+import { searchOptions } from "@/types";
+import { ChangeLogIconOutline } from "components/assets";
+import { useContext } from "react";
+import { Collection, CollectionMapper } from "./HitCollection";
+import { SearchContext, SearchResultContext } from "./providers";
+import { Heading, Label } from "@navikt/ds-react";
+
+export const Results = () => {
+  const { tags, query } = useContext(SearchContext);
+  const { results, isValidating, error, mostResent } =
+    useContext(SearchResultContext);
+
+  if (isValidating || error) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto">
+      {!results && mostResent && (
+        <div id="aksel-search-results" aria-label="Nyeste artikler">
+          <Collection
+            startIndex={0}
+            heading={
+              <span className="flex items-center gap-2">
+                Nyeste artikler
+                <ChangeLogIconOutline className="shrink-0" aria-hidden />
+              </span>
+            }
+            simple
+            hits={mostResent}
+          />
+        </div>
+      )}
+      {!results?.totalHits && query && (
+        <Heading
+          size="medium"
+          as="p"
+          className="mx-auto w-fit px-6 py-24"
+          aria-live="polite"
+          aria-atomic
+        >
+          <span className="text-text-subtle">{`Ingen treff på "`}</span>
+          <span className="break-all">{query}</span>
+          <span className="text-text-subtle">"</span>
+          {tags.length > 0 && (
+            <span className="text-text-subtle">{` i ${tags
+              .map((x) => searchOptions[x].display.toLowerCase())
+              .join(", ")}`}</span>
+          )}
+        </Heading>
+      )}
+      {results?.totalHits > 0 && (
+        <div id="aksel-search-results" aria-label="Søkeresultater">
+          <Label as="p" className="sr-only" aria-live="polite">
+            {`${results?.totalHits} treff på "${results.query}"${
+              tags.length > 0
+                ? ` i ${tags
+                    .map((x) => searchOptions[x].display.toLowerCase())
+                    .join(", ")}`
+                : ""
+            }`}
+          </Label>
+          <div className="pb-4">
+            {results?.topResults.length > 0 && (
+              <Collection
+                startIndex={1}
+                heading={
+                  <span className="flex items-center gap-2">
+                    Beste treff
+                    <ChangeLogIconOutline className="shrink-0" />
+                  </span>
+                }
+                hits={results?.topResults}
+              />
+            )}
+            <CollectionMapper
+              startIndex={
+                results.topResults.length > 0
+                  ? results.topResults.length + 1
+                  : 1
+              }
+              groups={results.groupedHits}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,53 @@
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
+import cl from "clsx";
+import { useContext, useEffect } from "react";
+import ReactModal from "react-modal";
+import styles from "../header.module.css";
+import { Error } from "./Error";
+import { SearchForm } from "./Form";
+import { Results } from "./Results";
+import { SearchContext, SearchNavigationContext } from "./providers";
+
+export const Search = () => {
+  const { open, setOpen } = useContext(SearchContext);
+  const { close } = useContext(SearchNavigationContext);
+
+  useEffect(() => {
+    ReactModal.setAppElement("#__next");
+  }, []);
+
+  return (
+    <>
+      <Button
+        variant="primary"
+        className="hover:bg-deepblue-700 bg-deepblue-600 h-11"
+        aria-keyshortcuts="Control+b"
+        icon={
+          <MagnifyingGlassIcon
+            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
+            aria-label="Åpne meny"
+            aria-hidden
+          />
+        }
+        iconPosition="left"
+        onClick={() => setOpen(true)}
+      >
+        Søk
+      </Button>
+      <ReactModal
+        isOpen={open}
+        onRequestClose={close}
+        aria={{ modal: true }}
+        contentLabel="Søk"
+        className="bg-surface-default focus-visible:shadow-focus animate-searchModal shadow-xlarge absolute inset-0 mx-auto my-auto flex h-[90%] max-h-[52rem] w-full max-w-[90%] flex-col overflow-x-hidden rounded-lg focus:outline-none md:h-[80%] lg:max-w-4xl"
+        overlayClassName={cl(styles.modalOverlaySearch, "backdrop-blur-[2px]")}
+        htmlOpenClassName="overflow-hidden"
+      >
+        <Error />
+        <SearchForm />
+        <Results />
+      </ReactModal>
+    </>
+  );
+};
@@ -0,0 +1,102 @@
+import { SearchResultsT } from "@/types";
+import { createSearchResult } from "../utils";
+
+describe("createSearchResult", () => {
+  let result;
+  let rawResults;
+
+  beforeEach(() => {
+    result = [
+      {
+        item: { _type: "komponent_artikkel" },
+        score: 0.05,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_artikkel" },
+        score: 0.1,
+        matches: [],
+      },
+      {
+        item: { _type: "ds_artikkel" },
+        score: 0.15,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_blogg" },
+        score: 0.2,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_prinsipp" },
+        score: 0.25,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_standalone" },
+        score: 0.3,
+        matches: [],
+      },
+    ];
+    rawResults = [
+      { item: { _type: "komponent_artikkel" }, score: 0.05 },
+      { item: { _type: "aksel_artikkel" }, score: 0.1 },
+      { item: { _type: "ds_artikkel" }, score: 0.15 },
+      { item: { _type: "aksel_blogg" }, score: 0.2 },
+      { item: { _type: "aksel_prinsipp" }, score: 0.25 },
+      { item: { _type: "aksel_standalone" }, score: 0.3 },
+    ];
+  });
+
+  it("should group hits by type", () => {
+    const expected = {
+      komponent_artikkel: [
+        { item: { _type: "komponent_artikkel" }, score: 0.05, matches: [] },
+      ],
+      aksel_artikkel: [
+        { item: { _type: "aksel_artikkel" }, score: 0.1, matches: [] },
+      ],
+      ds_artikkel: [
+        { item: { _type: "ds_artikkel" }, score: 0.15, matches: [] },
+      ],
+      aksel_blogg: [
+        { item: { _type: "aksel_blogg" }, score: 0.2, matches: [] },
+      ],
+      aksel_prinsipp: [
+        { item: { _type: "aksel_prinsipp" }, score: 0.25, matches: [] },
+      ],
+      aksel_standalone: [
+        { item: { _type: "aksel_standalone" }, score: 0.3, matches: [] },
+      ],
+    };
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.groupedHits).toEqual(expected);
+  });
+
+  it("should return top 3 results with score < 0.1", () => {
+    const expected = [
+      { item: { _type: "komponent_artikkel" }, score: 0.05, matches: [] },
+    ];
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.topResults).toEqual(expected);
+  });
+
+  it("should return total number of hits", () => {
+    const expected = 6;
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.totalHits).toEqual(expected);
+  });
+
+  it("should return number of hits by type", () => {
+    const expected = {
+      komponent_artikkel: 1,
+      aksel_artikkel: 1,
+      ds_artikkel: 1,
+      aksel_blogg: 1,
+      aksel_prinsipp: 1,
+      aksel_standalone: 1,
+    };
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.hits).toEqual(expected);
+  });
+});
@@ -0,0 +1,2 @@
+export * from "./useSearch";
+export * from "./useShortcut";
@@ -0,0 +1,56 @@
+import { allArticleDocuments } from "@/sanity/config";
+import { SearchResultsT } from "@/types";
+import { useMemo, useState } from "react";
+import useSWRImmutable from "swr/immutable";
+import { createSearchResult, formatResults, fuseSearch } from "../utils";
+import { debounce } from "@navikt/ds-react";
+import { logSearch } from "@/utils";
+
+export const useSearch = () => {
+  const [fuseResults, setFuseResults] = useState<SearchResultsT>(null);
+
+  const { data, error, isValidating } = useSWRImmutable(
+    `/searchindex.json`,
+    (query) => fetch(query).then((res) => res.json())
+  );
+
+  const updateResults = useMemo(
+    () =>
+      debounce((value: string, tags: string[]) => {
+        if (!value) {
+          return;
+        }
+
+        const rawResults = fuseSearch(data, value);
+
+        const formatedResults = formatResults(
+          rawResults.filter((x) =>
+            (tags.length > 0 ? tags : allArticleDocuments).includes(
+              x.item._type
+            )
+          )
+        );
+
+        setFuseResults({
+          ...createSearchResult(formatedResults, rawResults),
+          query: value,
+        });
+        logSearch({
+          type: "standard",
+          searchedFromUrl: window.location.pathname,
+          query: value,
+          filter: tags,
+        });
+      }),
+    [data]
+  );
+
+  return {
+    results: fuseResults,
+    update: updateResults,
+    error,
+    isValidating,
+    reset: () => setFuseResults(null),
+    rawData: data,
+  };
+};
@@ -0,0 +1,28 @@
+import { MutableRefObject, useEffect } from "react";
+
+export const useShortcut = (
+  open: boolean,
+  setOpen: (value: boolean) => void,
+  inputRef: MutableRefObject<HTMLInputElement>
+) => {
+  useEffect(() => {
+    const listener = (event: KeyboardEvent) => {
+      if (
+        event.key === "b" &&
+        (event.metaKey || event.ctrlKey) &&
+        !event.shiftKey
+      ) {
+        event.preventDefault();
+        if (open) {
+          inputRef.current?.focus();
+        } else {
+          setOpen(true);
+        }
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return () => document.removeEventListener("keydown", listener);
+  }, [inputRef, open, setOpen]);
+};
@@ -1,370 +1,21 @@
-import { SearchLogT, SearchResultsT, searchOptions } from "@/types";
-import { logSearch, useDebounce } from "@/utils";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Search } from "./Search";
 import {
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  Loader,
-  Search,
-} from "@navikt/ds-react";
-import { ChangeLogIconOutline } from "components/assets";
-import { KBD } from "components/website-modules/KBD";
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useRef, useState } from "react";
-import ReactModal from "react-modal";
-import styles from "../header.module.css";
-import { Group, GroupComponent } from "./Group";
+  SearchProvider,
+  SearchResultProvider,
+  SearchLoggingProvider,
+  SearchNavigationProvider,
+} from "./providers";

-/**
- * https://www.figma.com/file/71Sm1h6VV23lbBbQ3CJJ9t/Aksel-v2?node-id=1861%3A186079&t=ARKgZcA6B7ysmG3V-0
- * TODO:
- * - Oppdatere url-query basert på query + filter: ?search=abcd&filter=god_praksis
- * - Oppdatere søkefelt og filter basert på url.
+const GlobalSearch = () => (
+  <SearchProvider>
+    <SearchLoggingProvider>
+      <SearchResultProvider>
+        <SearchNavigationProvider>
+          <Search />
+        </SearchNavigationProvider>
+      </SearchResultProvider>
+    </SearchLoggingProvider>
+  </SearchProvider>
+);

- */
-export const GlobalSearch = () => {
-  const [results, setResults] = useState<SearchResultsT>(null);
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [activeTags, setTags] = useState<Array<keyof typeof searchOptions>>([]);
-  const [os, setOs] = useState<"mac" | "windows">("windows");
-  const inputRef = useRef(null);
-
-  const session = useRef<{ retires: number; queries: string[] }>({
-    retires: 0,
-    queries: [],
-  });
-  const firstSearch = useRef<boolean>(true);
-  const prevSearch = useRef<string>("");
-
-  const router = useRouter();
-
-  const [query, setQuery] = useState("");
-  const debouncedSearchTerm = useDebounce(query);
-
-  useEffect(() => {
-    ReactModal.setAppElement("#__next");
-    navigator.userAgent?.indexOf("Mac OS X") !== -1
-      ? setOs("mac")
-      : setOs("windows");
-  }, []);
-
-  const logSearchAttempt = useCallback(
-    (hits: number, type: SearchLogT["type"]) => {
-      const data: SearchLogT = {
-        type,
-        searchedFromUrl: router.asPath,
-        hits: hits ?? 0,
-        retries: session.current.retires,
-        retriedQueries: session.current.queries,
-        query: debouncedSearchTerm,
-        filter: activeTags,
-      };
-
-      logSearch(data);
-    },
-    [router.asPath, debouncedSearchTerm, activeTags]
-  );
-
-  const logSuccessSearchAttempt = useCallback(
-    (index: number, url: string) => {
-      const data: SearchLogT = {
-        type: "suksess",
-        searchedFromUrl: router.asPath,
-        hits: results?.totalHits ?? 0,
-        retries: session.current.retires,
-        retriedQueries: session.current.queries,
-        query: debouncedSearchTerm,
-        filter: activeTags,
-
-        index,
-        url,
-        accuracy: (100 - index / results?.totalHits).toFixed(0),
-        topResult: index <= results?.topResults?.length,
-      };
-      logSearch(data);
-    },
-    [
-      router.asPath,
-      results?.totalHits,
-      results?.topResults,
-      debouncedSearchTerm,
-      activeTags,
-    ]
-  );
-
-  useEffect(() => {
-    if (debouncedSearchTerm && open) {
-      setLoading(true);
-      fetch(
-        `/api/search/v1?q=${encodeURIComponent(debouncedSearchTerm)}${
-          activeTags.length > 0 ? `&doc=${activeTags.join(",")}` : ""
-        }`
-      )
-        .then((x) => x.json())
-        .then((res) => {
-          setResults(res);
-          logSearchAttempt(res?.hits?.totalHits ?? 0, "standard");
-          setLoading(false);
-        })
-        .catch(() => {
-          setResults(null);
-          setLoading(false);
-        });
-      window.scrollTo(0, 0);
-    } else {
-      setLoading(false);
-      setResults(null);
-    }
-  }, [debouncedSearchTerm, activeTags, open, logSearchAttempt]);
-
-  useEffect(() => {
-    if (debouncedSearchTerm && open && !firstSearch.current) {
-      session.current = {
-        queries: [...session.current.queries, prevSearch.current],
-        retires: session.current.retires + 1,
-      };
-      prevSearch.current = debouncedSearchTerm;
-    } else if (debouncedSearchTerm && open) {
-      firstSearch.current = false;
-      prevSearch.current = debouncedSearchTerm;
-    }
-  }, [debouncedSearchTerm, activeTags, open]);
-
-  useEffect(() => {
-    const listener = (event: KeyboardEvent) => {
-      if (
-        event.key === "b" &&
-        (event.metaKey || event.ctrlKey) &&
-        !event.shiftKey
-      ) {
-        event.preventDefault();
-        if (open) {
-          inputRef.current?.focus();
-        } else {
-          setOpen(true);
-        }
-      }
-    };
-
-    document.addEventListener("keydown", listener);
-
-    return () => document.removeEventListener("keydown", listener);
-  }, [open]);
-
-  const handleClose = useCallback(() => {
-    if (session.current.retires > 0 || prevSearch.current !== "") {
-      logSearchAttempt(results?.totalHits, "feilet");
-    }
-
-    setOpen(false);
-    setQuery("");
-    setTags([]);
-    session.current = { queries: [], retires: 0 };
-    firstSearch.current = true;
-  }, [logSearchAttempt, results?.totalHits]);
-
-  useEffect(() => {
-    router.events.on("beforeHistoryChange", handleClose);
-    router.events.on("hashChangeComplete", handleClose);
-
-    return () => {
-      router.events.off("beforeHistoryChange", handleClose);
-      router.events.off("hashChangeComplete", handleClose);
-    };
-  }, [handleClose, router.events]);
-
-  const handleQueryChange = (v: string) => {
-    setQuery(v);
-    v !== debouncedSearchTerm && setLoading(!!v);
-  };
-
-  const noHits = (key: string) => {
-    return !Object.hasOwn(results?.groupedHits ?? {}, key);
-  };
-
-  const noHitsAndQuery = (key: string) => {
-    return debouncedSearchTerm.length > 0 && !activeTags.find((x) => x === key);
-  };
-
-  return (
-    <div className="z-[1050] ml-auto mr-4 flex justify-center lg:ml-0 lg:mr-0">
-      <Button
-        variant="primary"
-        className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
-        aria-keyshortcuts="Control+b"
-        icon={
-          <MagnifyingGlassIcon
-            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
-            aria-label="Åpne meny"
-            aria-hidden
-          />
-        }
-        iconPosition="left"
-        onClick={() => setOpen(true)}
-      >
-        Søk
-      </Button>
-      <ReactModal
-        isOpen={open}
-        onRequestClose={() => handleClose()}
-        aria={{ modal: true }}
-        contentLabel="Søk"
-        className="bg-surface-default absolute inset-0 block w-screen overflow-x-auto px-4 md:px-6"
-        overlayClassName={styles.modalOverlaySearch}
-      >
-        <div className="search-grid-wrapper relative mx-auto max-w-4xl gap-4 gap-x-8 py-24">
-          {/* <button
-            className="focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover absolute right-4 top-8 flex items-center justify-center gap-2 rounded px-2 py-3 text-lg focus:outline-none"
-
-          >
-            <span>Lukk søk</span>
-          </button> */}
-          <Button
-            className="absolute right-4 top-8"
-            variant="tertiary-neutral"
-            icon={<KBD>ESC</KBD>}
-            onClick={() => handleClose()}
-            iconPosition="right"
-          >
-            Lukk søk
-          </Button>
-          <div className="search-grid-filter mt-8">
-            <CheckboxGroup legend="Filter" onChange={setTags}>
-              {Object.entries(searchOptions)
-                .filter((x) => !x[1].hidden)
-                .map(([key, val]) => (
-                  <Checkbox
-                    disabled={
-                      noHitsAndQuery(key) &&
-                      noHits(key) &&
-                      results?.hits[key] === 0
-                    }
-                    key={key}
-                    value={key}
-                    className="whitespace-nowrap"
-                  >
-                    {`${val.display} ${
-                      results?.hits[key] > 0 ? `(${results?.hits[key]})` : ""
-                    }`}
-                  </Checkbox>
-                ))}
-            </CheckboxGroup>
-          </div>
-          <div className="search-grid-input w-full">
-            <form role="search" onSubmit={(e) => e.preventDefault()}>
-              <Search
-                label={
-                  <span className="flex items-center gap-2">
-                    <span>Søk i hele Aksel</span>
-                    {os === "mac" ? <KBD>CMD + B</KBD> : <KBD>CTRL + B</KBD>}
-                  </span>
-                }
-                variant="simple"
-                value={query}
-                hideLabel={false}
-                onChange={(v) => handleQueryChange(v)}
-                onClear={() => setQuery("")}
-                ref={inputRef}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                autoFocus
-                id="aksel-search-input"
-                clearButton={false}
-              />
-            </form>
-          </div>
-          <div
-            className="search-grid-results mt-8 w-full max-w-3xl"
-            aria-busy={loading}
-            role="status"
-          >
-            {loading && (
-              <div className="flex w-full justify-center p-4">
-                <Loader size="xlarge" variant="neutral" />
-              </div>
-            )}
-            {results && query && !loading && (
-              <div id="aksel-search-results" aria-label="Søkeresultater">
-                <p className="text-xl font-semibold">
-                  {`${results?.totalHits} treff på "${query}"${
-                    activeTags.length > 0
-                      ? ` i ${activeTags
-                          .map((x) => searchOptions[x].display.toLowerCase())
-                          .join(", ")}`
-                      : ""
-                  }`}
-                </p>
-                <div className="mt-4 pb-16 md:block">
-                  {results?.topResults.length > 0 && (
-                    <GroupComponent
-                      startIndex={1}
-                      heading={
-                        <span className="flex items-center gap-2">
-                          Beste treff
-                          <ChangeLogIconOutline className="shrink-0" />
-                        </span>
-                      }
-                      logSuccess={logSuccessSearchAttempt}
-                      hits={results?.topResults}
-                      query={query}
-                    />
-                  )}
-                  <Group
-                    startIndex={
-                      results?.topResults.length > 0
-                        ? results?.topResults.length + 1
-                        : 1
-                    }
-                    logSuccess={logSuccessSearchAttempt}
-                    groups={results?.groupedHits}
-                    query={debouncedSearchTerm}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        <style jsx>{`
-          .search-grid-wrapper {
-            display: grid;
-            grid-template-columns: 12rem auto;
-            grid-template-areas:
-              "input input"
-              "results results";
-          }
-
-          .search-grid-wrapper .search-grid-filter {
-            display: none;
-          }
-
-          .search-grid-wrapper .search-grid-input {
-            grid-area: input;
-          }
-
-          .search-grid-wrapper .search-grid-results {
-            grid-area: results;
-          }
-
-          @media (min-width: 768px) {
-            .search-grid-wrapper {
-              display: grid;
-              grid-template-columns: 12rem auto;
-              grid-template-areas:
-                "empty input"
-                "filter results";
-            }
-
-            .search-grid-wrapper .search-grid-filter {
-              display: block;
-              grid-area: filter;
-            }
-          }
-        `}</style>
-      </ReactModal>
-    </div>
-  );
-};
+export default GlobalSearch;
@@ -0,0 +1,50 @@
+import { logSearch } from "@/utils";
+import { createContext, useCallback, useContext } from "react";
+import { useSearch } from "../hooks";
+import { SearchContext } from "./SearchProvider";
+
+type SearchLoggingContextType = {
+  logSuccess: (index: number, url: string, tag?: string) => void;
+};
+
+export const SearchLoggingContext = createContext<SearchLoggingContextType>({
+  logSuccess: () => null,
+});
+
+export const SearchLoggingProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const context = useSearch();
+  const { query, tags } = useContext(SearchContext);
+
+  const logSuccess = useCallback(
+    (index: number, url: string, tag?: string) => {
+      const data = {
+        type: "suksess",
+        searchedFromUrl: window.location.pathname,
+        query,
+        filter: tags,
+        tag,
+        index,
+        url,
+        accuracy: (100 - index / context?.results?.totalHits).toFixed(0),
+        topResult: index <= context?.results?.topResults?.length,
+      };
+      logSearch(data);
+    },
+    [
+      query,
+      tags,
+      context?.results?.totalHits,
+      context?.results?.topResults?.length,
+    ]
+  );
+
+  return (
+    <SearchLoggingContext.Provider value={{ logSuccess }}>
+      {children}
+    </SearchLoggingContext.Provider>
+  );
+};
@@ -0,0 +1,52 @@
+import { createContext, useCallback, useContext, useEffect } from "react";
+import { SearchContext } from "./SearchProvider";
+import { SearchResultContext } from "./SearchResultProvider";
+import { useRouter } from "next/router";
+
+type SearchNavigationProviderT = { close: () => void };
+
+export const SearchNavigationContext = createContext<SearchNavigationProviderT>(
+  {
+    close: () => null,
+  }
+);
+
+export const SearchNavigationProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const router = useRouter();
+  const { setOpen, setQuery, setTags } = useContext(SearchContext);
+  const { reset } = useContext(SearchResultContext);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    reset();
+    setQuery("");
+    setTags([]);
+  }, [reset, setOpen, setQuery, setTags]);
+
+  /* Add a small delay to get a precieved smoother navigation */
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    const handler = () => {
+      timeout && clearTimeout(timeout);
+
+      setTimeout(() => close(), 100);
+    };
+    router.events.on("beforeHistoryChange", handler);
+    router.events.on("hashChangeComplete", handler);
+
+    return () => {
+      router.events.off("beforeHistoryChange", handler);
+      router.events.off("hashChangeComplete", handler);
+    };
+  }, [close, router.events]);
+
+  return (
+    <SearchNavigationContext.Provider value={{ close }}>
+      {children}
+    </SearchNavigationContext.Provider>
+  );
+};
@@ -0,0 +1,63 @@
+import { searchOptions } from "@/types";
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useShortcut } from "../hooks";
+
+type SearchContextType = {
+  os: "mac" | "windows";
+  open: boolean;
+  setOpen: (v) => void;
+  tags: Array<keyof typeof searchOptions>;
+  setTags: Dispatch<SetStateAction<Array<keyof typeof searchOptions>>>;
+  query: string;
+  setQuery: (v: string) => void;
+};
+
+export const SearchContext = createContext<SearchContextType>({
+  os: "windows",
+  open: false,
+  setOpen: () => null,
+  tags: [],
+  setTags: () => null,
+  query: "",
+  setQuery: () => null,
+});
+
+export const SearchProvider = ({ children }: { children: React.ReactNode }) => {
+  const [open, setOpen] = useState(false);
+  const [tags, setTags] = useState<SearchContextType["tags"]>([]);
+  const [os, setOs] = useState<SearchContextType["os"]>("windows");
+  const inputRef = useRef(null);
+
+  const [query, setQuery] = useState("");
+
+  useShortcut(open, setOpen, inputRef);
+
+  useEffect(() => {
+    navigator.userAgent?.indexOf("Mac OS X") !== -1
+      ? setOs("mac")
+      : setOs("windows");
+  }, []);
+
+  return (
+    <SearchContext.Provider
+      value={{
+        os,
+        open,
+        setOpen,
+        tags,
+        setTags,
+        query,
+        setQuery,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};
@@ -0,0 +1,53 @@
+import { allArticleDocuments } from "@/sanity/config";
+import { SearchHitT, SearchResultsT } from "@/types";
+import { createContext, useContext, useMemo } from "react";
+import { useSearch } from "../hooks";
+import { formatRawResults } from "../utils";
+import { SearchContext } from "./SearchProvider";
+
+type SearchResultContextType = {
+  results: SearchResultsT;
+  update: (value: string, tags: string[]) => void;
+  error: any;
+  isValidating: boolean;
+  reset: () => void;
+  mostResent: Omit<SearchHitT, "score" | "anchor" | "matches">[];
+};
+
+export const SearchResultContext = createContext<SearchResultContextType>({
+  results: null,
+  update: () => null,
+  error: false,
+  isValidating: false,
+  reset: () => null,
+  mostResent: [],
+});
+
+export const SearchResultProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const context = useSearch();
+  const { tags } = useContext(SearchContext);
+
+  const mostResent: Omit<SearchHitT, "score" | "anchor">[] = useMemo(() => {
+    if (!context.rawData) {
+      return null;
+    }
+
+    return formatRawResults(
+      context.rawData
+        .filter((x) =>
+          (tags.length > 0 ? tags : allArticleDocuments).includes(x._type)
+        )
+        .slice(0, 20)
+    );
+  }, [context.rawData, tags]);
+
+  return (
+    <SearchResultContext.Provider value={{ ...context, mostResent }}>
+      {children}
+    </SearchResultContext.Provider>
+  );
+};
@@ -0,0 +1,4 @@
+export * from "./SearchProvider";
+export * from "./SearchResultProvider";
+export * from "./SearchLoggingProvider";
+export * from "./SearchNavigationProvider";
@@ -0,0 +1,36 @@
+import { FuseItemT, SearchHitT } from "@/types";
+import { omit } from "@navikt/ds-react";
+import Fuse from "fuse.js";
+
+export function formatResults(res: Fuse.FuseResult<FuseItemT>[]): SearchHitT[] {
+  return res.map((x) => {
+    return {
+      ...x,
+      item: omit(x.item, ["intro", "ingress"]) as Omit<
+        FuseItemT,
+        "ingress" | "intro"
+      >,
+      anchor: resolveAnchor(x.matches[0], x.item),
+      description: x?.item.intro || x.item.ingress || "",
+    };
+  });
+}
+
+export function formatRawResults(
+  res: FuseItemT[]
+): Omit<SearchHitT, "score" | "anchor">[] {
+  return res.map((x) => ({
+    item: omit(x, ["intro", "ingress"]) as Omit<FuseItemT, "ingress" | "intro">,
+    description: x?.intro || x.ingress || "",
+  }));
+}
+
+function resolveAnchor(match: Fuse.FuseResultMatch, item: FuseItemT) {
+  if (match.key.includes("lvl")) {
+    return item[match.key.split(".")[0]][match.refIndex].id;
+  }
+  if (match.key === "content.text") {
+    return item[match.key.split(".")[0]][match.refIndex].id;
+  }
+  return null;
+}
@@ -0,0 +1,25 @@
+import { FuseItemT } from "@/types";
+import Fuse from "fuse.js";
+
+export function fuseSearch(results: any[], query: string) {
+  /* https://fusejs.io/api/options.html */
+  const fuse = new Fuse<FuseItemT>(results, {
+    keys: [
+      { name: "heading", weight: 100 },
+      { name: "lvl2.text", weight: 50 },
+      { name: "lvl3.text", weight: 40 },
+      { name: "lvl4.text", weight: 30 },
+      { name: "ingress", weight: 30 },
+      { name: "intro", weight: 30 },
+      { name: "tema", weight: 70 },
+      { name: "content.text", weight: 20 },
+    ],
+    includeScore: true,
+    shouldSort: true,
+    minMatchCharLength: 2,
+    includeMatches: true,
+    threshold: 0.3,
+    location: 120,
+  });
+  return fuse.search(query).filter((x) => x.score < 0.3);
+}
@@ -0,0 +1,42 @@
+import { FuseItemT, GroupedHitsT, SearchHitT, SearchResultsT } from "@/types";
+import Fuse from "fuse.js";
+
+export function createSearchResult(
+  result: SearchHitT[],
+  rawResults: Fuse.FuseResult<FuseItemT>[]
+) {
+  const groupedHits: GroupedHitsT = result?.reduce((prev, cur) => {
+    if (cur.item._type in prev) {
+      return { ...prev, [cur.item._type]: [...prev[cur.item._type], cur] };
+    } else {
+      return { ...prev, [cur.item._type]: [cur] };
+    }
+  }, {});
+
+  const response: SearchResultsT = {
+    groupedHits,
+    topResults:
+      result?.length > 4 ? result.slice(0, 4).filter((x) => x.score < 0.1) : [],
+    totalHits: result?.length ?? 0,
+    hits: {
+      komponent_artikkel: rawResults.filter(
+        (x: any) => x.item._type === "komponent_artikkel"
+      ).length,
+      aksel_artikkel: rawResults.filter(
+        (x: any) => x.item._type === "aksel_artikkel"
+      ).length,
+      ds_artikkel: rawResults.filter((x: any) => x.item._type === "ds_artikkel")
+        .length,
+      aksel_blogg: rawResults.filter((x: any) => x.item._type === "aksel_blogg")
+        .length,
+      aksel_prinsipp: rawResults.filter(
+        (x: any) => x.item._type === "aksel_prinsipp"
+      ).length,
+      aksel_standalone: rawResults.filter(
+        (x: any) => x.item._type === "aksel_prinsipp"
+      ).length,
+    },
+  };
+
+  return response;
+}
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	a67f61c33f	Version Packages (#2084 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-29 15:23:12 +02:00
Julian NymarkandKen	b05958863b	add close button to alert (#2079 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-06-29 13:43:10 +02:00
Ken	883ae00dfa	💄 Fikset sidebar :before-element	2023-06-29 13:25:17 +02:00
github-actions[bot]andgithub-actions[bot]	6eb8a79092	Version Packages (#2082 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-28 11:35:27 +02:00
Ken	718b3204d8	🐛 Fikset i18n for textarea	2023-06-28 11:25:32 +02:00
Ken	45970ac0fb	🐛 UU dukket ikke opp i søk	2023-06-28 10:39:54 +02:00
Ken	fe5e8ada74	🐛 Fikset capitalize på god-praksis tagger	2023-06-28 10:39:07 +02:00
Ken	3e625a5cb5	🐛 Underline brakk på windows for forside-kort	2023-06-28 10:06:23 +02:00
Ken	edc3495ce6	🐛 Fikset text-decoration for windows på aksel.nav.no	2023-06-27 20:26:59 +02:00
Ken	2520bc7ff5	🎨 Fikset lenker brukt på Aksel.nav.no 🎨 Intro-cards shadows 💄 Komponentoversikt-cards 💄 Oppdatert lenkevisning for cards på aksel.nav.no	2023-06-27 15:25:06 +02:00
github-actions[bot]andgithub-actions[bot]	44446e753a	Version Packages (#2078 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-26 13:38:24 +02:00
Halvor Haugan	4156326752	Chat: fjern border, gjør svg mindre, bytt om "subtle" og "neutral" (#2077 )	2023-06-26 13:27:25 +02:00
Ken	23970486ed	🐛 fikset date-handling for preview av god-praksis	2023-06-26 12:31:36 +02:00
Ken	a8f1069650	🎉 Automatisk changelog på aksel.nav.no 🔥 Fjernet unified fra dependencies 🐛 Fikset changelog-format, la inn støtte for emojies	2023-06-23 18:30:03 +02:00
Julian Nymark	f9c8320b74	sort + reverse the semver entries (#2074 )	2023-06-23 11:01:33 +02:00
Ken	c4839a12ed	📝 Oppdatert PR-template, Changelog-cleanup (#2073 )	2023-06-23 10:43:53 +02:00
Halvor Haugan	60f64d7f70	📝 Dropdown: Better Item examples (#2072 )	2023-06-22 17:21:12 +02:00
github-actions[bot]andgithub-actions[bot]	e32dbe5c5d	Version Packages (#2071 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-22 15:23:42 +02:00
Ken	de36269582	✨ Oppdaterte shadow-tokens (#2041 )	2023-06-22 15:12:42 +02:00
Julian Nymark	6cb6c52770	Changelog generator script (#2046 )	2023-06-22 15:10:03 +02:00
Ken	a877d24ed0	🐛 Fikset corder-bleed på komponentside-header	2023-06-21 17:10:43 +02:00
github-actions[bot]andgithub-actions[bot]	a1b6332fa1	Version Packages (#2070 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-21 13:48:45 +02:00
Ken	99c08b8e4a	Fikset bug i Popover/Helptext der popover gikk helt ut i kantene (#2069 )	2023-06-21 13:44:59 +02:00
Ken	d39ed906c6	🐛 Fikset ExpansionCard bug ved nesting (#2067 )	2023-06-21 13:40:48 +02:00
github-actions[bot]andgithub-actions[bot]	3b31bd3d75	Version Packages (#2066 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-21 11:59:33 +02:00
Halvor HauganandKen	b1625ba388	✨ Chat: ny small-variant, justert design, forbedret UU (#2048 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-06-21 09:40:50 +02:00
Ken	269d06c277	📝 ErrorSummary prop-dokumentasjon	2023-06-20 15:47:52 +02:00
Ken	0c56273f3b	🐛 Fikset rekkefølge på button-stories	2023-06-20 15:41:13 +02:00
Ken	ab6a96aed7	♻️ Oppdatert komponent demoer (#2063 )	2023-06-20 11:46:45 +02:00
Ken	9ee8a72082	🔥 Fjernet død kode, lazy-loader sanity-moduler bare brukt for preview	2023-06-19 19:53:50 +02:00
Ken	c2e5a92d8e	🎉 Oppdatert søk (#2062 )	2023-06-19 18:28:24 +02:00
Ken	6059aa59aa	🐛 Oppdatert playwright-config for mindre flaky tester	2023-06-19 16:21:13 +02:00
Ken	b877ada408	🐛 Fikset playwright-tester	2023-06-19 15:11:59 +02:00
Ken	4e339f183e	🔊 Oppdatert amplitude (#2061 )	2023-06-19 14:09:08 +02:00
Ken	1d62bf26ff	🛠️ Diverse småjustering for Aksel (#2060 )	2023-06-19 13:19:57 +02:00
github-actions[bot]andgithub-actions[bot]	da0fbc3299	Version Packages (#2057 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-19 13:02:23 +02:00
Ken	9f59e67e2a	⚡ Lazy-loading date-fns: sparer ~10kB first-load (#2058 )	2023-06-19 12:53:28 +02:00
Ken	ed7aafcac8	🎨 Oppdatert deploy image (#2059 )	2023-06-19 12:53:08 +02:00
Ken	dfbbe92a63	🎨 Helptext har nå en prop for wrapperClassName (#2056 )	2023-06-19 11:48:53 +02:00
Ken	42b5af64ab	🐛 Timeline Period brakk ved bruk av JSODOM	2023-06-17 10:25:45 +02:00
Ken	329119fa04	💄 DoDont-ikon er nå høyrestilt	2023-06-16 16:21:19 +02:00
Ken	0fc80f45cb	♿ Fikset regression der sanity ikke lengre støttet skjermlesere	2023-06-16 16:07:37 +02:00
Ken	337b9fda13	🐛 Fikset inlinecode bruk i heading	2023-06-16 12:58:26 +02:00
github-actions[bot]andgithub-actions[bot]	659e835da9	Version Packages (#2055 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-15 16:38:08 +02:00
Ken	e10f4375b1	Merge branch 'main' of https://github.com/navikt/aksel	2023-06-15 16:34:25 +02:00
Ken	9a8bb26c36	🐛 Timeline brakk ved bruk av JSDOM-tester	2023-06-15 16:33:40 +02:00
github-actions[bot]andgithub-actions[bot]	69aea38784	Version Packages (#2053 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-15 15:55:48 +02:00
Ken	8f16d1571e	🎨 Oppdatert ikoner (#2054 )	2023-06-15 15:51:47 +02:00
Marianne Røsvik	e2265c9a78	Added two new icons (#2047 )	2023-06-15 15:06:48 +02:00
Ken	925aa7a140	🐛 OverridableComponent omitter nå 'as' (#2051 )	2023-06-15 14:46:34 +02:00
Ken	7c17e40cac	🐛 Datepicker og Monthpicker lukker nå popover ved escape (#2052 )	2023-06-15 14:46:07 +02:00
github-actions[bot]andgithub-actions[bot]	3c8889ea88	Version Packages (#2050 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-13 16:49:54 +02:00
Ken	e060961050	🐛 Fikset bruk av text-subtle på skjemaelementer (#2049 )	2023-06-13 16:45:35 +02:00
Ken	18aa4ee7fb	Merge branch 'main' of https://github.com/navikt/aksel	2023-06-09 14:36:38 +02:00
Ken	f44edd76a2	Merge branch 'next'	2023-06-09 14:31:11 +02:00
Karl O	88b6174b0b	📝 La til next-logger så backend logging får rett log-level (#2042 )	2023-06-09 13:34:31 +02:00