Version Packages (#2401 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Modal + Popover fix (#2400 )
2026-10-13 01:02:02 +00:00 · 2023-10-19 19:56:13 +02:00 · 2023-10-19 19:52:06 +02:00 · 2023-10-19 18:28:24 +02:00 · 2023-10-18 15:57:07 +02:00 · 2023-10-18 12:50:12 +02:00
35 changed files with 608 additions and 677 deletions
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 5.7.4
+
 ## 5.7.3

 ## 5.7.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.7.3",
+  "version": "5.7.4",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 5.7.4
+
 ## 5.7.3

 ## 5.7.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.7.3",
+  "version": "5.7.4",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.7.3",
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/ds-css": "^5.7.4",
+    "@navikt/ds-tokens": "^5.7.4",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 5.7.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.4
+
 ## 5.7.3

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

+## 5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.7.3",
+  "version": "5.7.4",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/ds-tokens": "^5.7.4",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,15 @@
 # @navikt/ds-react

+## 5.7.4
+
+### Patch Changes
+
+- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.4
+  - @navikt/aksel-icons@5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.7.3",
+  "version": "5.7.4",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.7.3",
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/aksel-icons": "^5.7.4",
+    "@navikt/ds-tokens": "^5.7.4",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,10 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
+import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { Button, HGrid, VStack } from "../..";
+import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
+
 import DatePicker, { DatePickerProps } from "./DatePicker";
-import isSameDay from "date-fns/isSameDay";

 const disabledDays = [
  new Date("Oct 10 2022"),
@@ -432,3 +433,42 @@ export const WeekDayClick = () => {
    </VStack>
  );
 };
+
+export const ModalDemo = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <Modal open header={{ heading: "Modal-demo" }} width="1024px">
+      <Modal.Body style={{ position: "relative" }}>
+        <BodyLong>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores nisi
+          incidunt ipsum cupiditate nostrum nesciunt, corrupti nihil at atque
+          animi ab aut. Quam iusto harum eligendi magnam nulla repudiandae
+          molestias.
+        </BodyLong>
+
+        <HGrid gap="6" columns={{ xs: 1, lg: 2 }}>
+          <HStack justify="center" align="start">
+            <DatePicker.Standalone
+              fromDate={new Date("Aug 23 2019")}
+              toDate={new Date("Feb 23 2024")}
+            />
+          </HStack>
+          <DatePicker {...datepickerProps} dropdownCaption>
+            <DatePicker.Input {...inputProps} label="Velg dato" />
+          </DatePicker>
+          <HStack justify="center">
+            <DatePicker.Standalone
+              fromDate={new Date("Aug 23 2019")}
+              toDate={new Date("Feb 23 2024")}
+            />
+          </HStack>
+        </HGrid>
+      </Modal.Body>
+    </Modal>
+  );
+};
@@ -133,6 +133,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
    const arrowRef = useRef<HTMLDivElement | null>(null);
    const isInModal = useContext(ModalContext) !== null;
    const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
+    const chosenFlip = isInModal ? true : _flip;

    const {
      x,
@@ -150,7 +151,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      onOpenChange: () => onClose(),
      middleware: [
        flOffset(offset ?? (arrow ? 16 : 4)),
-        _flip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        chosenFlip &&
+          flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
        shift({ padding: 12 }),
        flArrow({ element: arrowRef, padding: 8 }),
      ],
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 5.7.4
+
 ## 5.7.3

 ## 5.7.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.7.3",
+  "version": "5.7.4",
  "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": "^5.7.3",
+    "@navikt/ds-tokens": "^5.7.4",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.7.3",
+  "version": "5.7.4",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,12 +1,12 @@
 # Changelog

-## 5.7.3
+## 5.7.4

 ### @navikt/ds-react

- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400))

- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+## 5.7.3

 ### @navikt/ds-css

@@ -16,6 +16,12 @@

 - HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))

+### @navikt/ds-react
+
+- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
 ### @navikt/ds-tokens

 - Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
@@ -28,11 +34,11 @@

 ## 5.7.1

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

 - Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))

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

 - Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))

@@ -42,13 +48,13 @@

 - Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))

-### @navikt/ds-react
-
- Chores: Ryddet opp i sirkulære depdendencies ([#2366](https://github.com/navikt/aksel/pull/2366))
+### @navikt/ds-css

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

-### @navikt/ds-css
+### @navikt/ds-react
+
+- Chores: Ryddet opp i sirkulære depdendencies ([#2366](https://github.com/navikt/aksel/pull/2366))

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

@@ -92,6 +98,24 @@

 * Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))

+### @navikt/ds-css
+
+- Primitives: ny komponent Bleed ([#2278](https://github.com/navikt/aksel/pull/2278))
+
+* :recycle: Box: Forenkling av CSS-variabler ([#2279](https://github.com/navikt/aksel/pull/2279))
+
+* Accordion: Har nå 0.25rem padding-top mellom innhold og heading. ([#2310](https://github.com/navikt/aksel/pull/2310))
+
+* Added cursor:pointer to Select component ([#2293](https://github.com/navikt/aksel/pull/2293))
+
+* :bug: Box: sett border-radius riktig ([#2329](https://github.com/navikt/aksel/pull/2329))
+
+* Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`. ([#2286](https://github.com/navikt/aksel/pull/2286))
+
+* Datepicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
+
+* MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
+
 ### @navikt/ds-react

 - :recycle: Refaktorering og småfikser ([#2265](https://github.com/navikt/aksel/pull/2265))
@@ -112,33 +136,15 @@

 * Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover ([#2303](https://github.com/navikt/aksel/pull/2303))

-### @navikt/ds-css
-
- Primitives: ny komponent Bleed ([#2278](https://github.com/navikt/aksel/pull/2278))
-
-* :recycle: Box: Forenkling av CSS-variabler ([#2279](https://github.com/navikt/aksel/pull/2279))
-
-* Accordion: Har nå 0.25rem padding-top mellom innhold og heading. ([#2310](https://github.com/navikt/aksel/pull/2310))
-
-* Added cursor:pointer to Select component ([#2293](https://github.com/navikt/aksel/pull/2293))
-
-* :bug: Box: sett border-radius riktig ([#2329](https://github.com/navikt/aksel/pull/2329))
-
-* Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`. ([#2286](https://github.com/navikt/aksel/pull/2286))
-
-* Datepicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
-
-* MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
-
 ## 5.5.0

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

 - Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))

 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))

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

 - Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))

@@ -156,18 +162,18 @@

 ## 5.4.0

-### @navikt/ds-react
-
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
-
-* Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
-
 ### @navikt/ds-css

 - Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))

 * ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))

+### @navikt/ds-react
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+* Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
+
 ### @navikt/ds-tokens

 - Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
@@ -190,26 +196,32 @@

 ## 5.3.3

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

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

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

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

 ## 5.3.2

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

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

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

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

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

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

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

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

 ### @navikt/ds-react

@@ -236,10 +246,6 @@

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

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

 ### @navikt/ds-css
@@ -252,6 +258,12 @@

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

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

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

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

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

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

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

 ### @navikt/ds-react

@@ -276,24 +288,18 @@

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

-### @navikt/ds-css
-
- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
-
- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
-
 ## 5.0.3

-### @navikt/ds-react
-
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
-
 ### @navikt/ds-css

 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))

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

+### @navikt/ds-react
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
 ### @navikt/ds-tokens

 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
@@ -314,6 +320,17 @@

 ## 5.0.0

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

 - Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
@@ -326,17 +343,6 @@

 * Table: Har lagt til ny size: 'large'. ([#2178](https://github.com/navikt/aksel/pull/2178))

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

 - Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
@@ -345,16 +351,26 @@

 ## 4.12.1

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

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

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

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

 - Combobox: La til støtte for feilmeldinger i Combobox ([#2182](https://github.com/navikt/aksel/pull/2182))
@@ -373,16 +389,6 @@

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

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

 ### @navikt/ds-css
@@ -397,14 +403,6 @@

 ## 4.11.0

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

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

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

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

 ### @navikt/ds-css
@@ -421,56 +427,56 @@

 ## 4.10.0

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

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

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

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

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

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

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

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

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

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

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

 ## 4.8.0

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

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

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

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

 ## 4.7.4

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

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

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

 ### @navikt/ds-react
@@ -479,11 +485,11 @@

 ## 4.7.2

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

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

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

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

@@ -495,6 +501,10 @@

 ## 4.7.0

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

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

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

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

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

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

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

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

 ## 4.6.0

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

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

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

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

 ### @navikt/ds-css

@@ -539,6 +541,10 @@

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

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

 ### @navikt/ds-react
@@ -553,46 +559,46 @@

 ## 4.4.0

+### @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))
+
+### @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-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-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))
-
-### @navikt/ds-tokens
-
- Shadow-tokens er oppdatert til mer tydeligere varianter ([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))
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+
+## 4.2.0

 ### @navikt/ds-css

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

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

 ### @navikt/ds-react
@@ -645,13 +651,11 @@

 ## 4.1.0

-### @navikt/aksel-stylelint
+### @navikt/ds-css

- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))

-### @navikt/ds-tailwind
-
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))

 ### @navikt/ds-react

@@ -663,18 +667,20 @@

 * Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))

-### @navikt/ds-css
-
- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
-
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
-
 ### @navikt/ds-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-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+### @navikt/aksel-stylelint
+
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+
 ## 4.0.0

 ### @navikt/aksel
@@ -683,12 +689,6 @@

 - 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))

-### @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))
@@ -699,6 +699,12 @@

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

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

 ### @navikt/aksel-stylelint
@@ -713,17 +719,17 @@

 ## 3.4.0

-### @navikt/aksel-stylelint
+### @navikt/ds-css

- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

 ### @navikt/ds-react

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

-### @navikt/ds-css
+### @navikt/aksel-stylelint

- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))

 ## 3.3.1

@@ -749,18 +755,18 @@

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

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

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

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

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

 ### @navikt/ds-react
@@ -781,16 +787,16 @@

 ## 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))

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

 ### @navikt/ds-react
@@ -801,16 +807,16 @@

 ## 3.0.0

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

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

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

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

 ### @navikt/aksel-icons
@@ -905,14 +911,14 @@

 ## 2.8.7

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

 - Button: token for tertiary

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

 ### @navikt/ds-css
@@ -941,14 +947,14 @@

 ## 2.8.2

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

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

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

 ### @navikt/ds-react
@@ -1011,14 +1017,14 @@

 ## 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))

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

 ### @navikt/ds-css
@@ -1027,14 +1033,14 @@

 ## 2.4.2

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

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

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

 ### @navikt/ds-react
@@ -1063,18 +1069,18 @@

 ## 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-css

 - ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))

 - Button: `Neutral`-variant.

+### @navikt/ds-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- 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))
@@ -1195,24 +1201,24 @@

 ## 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-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.

+### @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-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ## 1.5.10

 ### @navikt/ds-react
@@ -1257,16 +1263,16 @@

 ## 1.5.0

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

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

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

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

 ### @navikt/ds-react
@@ -1293,6 +1299,10 @@

 ## 1.3.39

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

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

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

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

 ### @navikt/ds-css
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.7.3",
-    "@navikt/ds-css": "^5.7.3",
-    "@navikt/ds-react": "^5.7.3",
-    "@navikt/ds-tailwind": "^5.7.3",
-    "@navikt/ds-tokens": "^5.7.3"
+    "@navikt/aksel-icons": "^5.7.4",
+    "@navikt/ds-css": "^5.7.4",
+    "@navikt/ds-react": "^5.7.4",
+    "@navikt/ds-tailwind": "^5.7.4",
+    "@navikt/ds-tokens": "^5.7.4"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -13,7 +13,7 @@ const ContentSecurityPolicy = `
  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data: ${cdnUrl} ${hotjarUrl};
  script-src 'self' ${cdnUrl} ${hotjarUrl} https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
  style-src 'self' ${cdnUrl} ${hotjarUrl} 'unsafe-inline';
-  connect-src 'self' ${cdnUrl} ${hotjarUrl} https://raw.githubusercontent.com/navikt/ https://hnbe3yhs.apicdn.sanity.io wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://in2.taskanalytics.com/03346;
+  connect-src 'self' ${cdnUrl} ${hotjarUrl} https://*.hotjar.io wss://*.hotjar.com https://raw.githubusercontent.com/navikt/ https://hnbe3yhs.apicdn.sanity.io wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://in2.taskanalytics.com/03346;
  frame-ancestors 'self' localhost:3000;
  media-src 'self' ${cdnUrl} cdn.sanity.io;
  frame-src 'self' https://web.microsoftstream.com localhost:3000 https://aksel.ekstern.dev.nav.no;
@@ -42,9 +42,9 @@
    "date-fns": "2.29.3",
    "fuse.js": "^6.6.2",
    "lodash": "^4.17.21",
-    "next": "^13.5.0",
-    "next-logger": "^3.0.2",
-    "next-sanity": "^5.5.8",
+    "next": "^13.2.1",
+    "next-logger": "3.0.2",
+    "next-sanity": "5.5.8",
    "pino": "^8.14.1",
    "prism-react-renderer": "^2.0.0",
    "react": "^18.0.0",
@@ -63,8 +63,8 @@
  "devDependencies": {
    "@axe-core/playwright": "^4.5.2",
    "@babel/core": "^7.19.0",
-    "@next/bundle-analyzer": "^13.5.0",
-    "@next/eslint-plugin-next": "^12.2.0",
+    "@next/bundle-analyzer": "^13.2.1",
+    "@next/eslint-plugin-next": "^13.2.1",
    "@playwright/test": "1.35.1",
    "@sanity/block-tools": "^3.18.0",
    "@sanity/schema": "^3.18.0",
@@ -1,35 +1,27 @@
-import { DatePicker, useDatepicker, Button, Modal } from "@navikt/ds-react";
+import { DatePicker, Modal } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
-import { useRef } from "react";
 import format from "date-fns/format";
 import nbLocale from "date-fns/locale/nb";
+import { useState } from "react";

 const Example = () => {
-  const ref = useRef<HTMLDialogElement>(null);
-
-  const { datepickerProps, inputProps, selectedDay } = useDatepicker({
-    fromDate: new Date("Aug 23 2019"),
-    onDateChange: console.log,
-  });
+  const [date, setDate] = useState(null);

  return (
-    <>
-      <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
-
-      <Modal ref={ref} header={{ heading: "Heading" }}>
-        <Modal.Body>
-          <div className="min-h-96 min-w-96 max-w-full">
-            <DatePicker {...datepickerProps}>
-              <DatePicker.Input {...inputProps} label="Velg dato" />
-            </DatePicker>
-            <div className="pt-4">
-              {selectedDay &&
-                format(selectedDay, "dd.MM.yyyy", { locale: nbLocale })}
-            </div>
+    <Modal open header={{ heading: "Heading" }}>
+      <Modal.Body>
+        <div className="min-h-96 min-w-96 max-w-full">
+          <DatePicker.Standalone
+            onSelect={setDate}
+            fromDate={new Date("Aug 23 2019")}
+            fixedWeeks
+          />
+          <div className="pt-4">
+            {date && format(date, "dd.MM.yyyy", { locale: nbLocale })}
          </div>
-        </Modal.Body>
-      </Modal>
-    </>
+        </div>
+      </Modal.Body>
+    </Modal>
  );
 };

@@ -1,51 +1,28 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { Bleed, Box, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <>
-      <VStack gap="2">
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginInline="10 0" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
+    <DemoWrapper>
+      <Bleed marginInline="10" asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">Med asChild</HStack>
        </Box>
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginInline="0 10" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginBlock="10 0" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginBlock="0 10" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-      </VStack>
-    </>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -56,5 +33,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 4,
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
 };
@@ -1,92 +0,0 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <>
-      <VStack gap="2">
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginInline={{ xs: "10 0", md: "20 0" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginInline={{ xs: "0 10", md: "0 20" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-      </VStack>
-    </>
-  );
-};
-
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 0,
-};
@@ -1,49 +1,28 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { Bleed, Box, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <VStack gap="2">
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginInline="10 0">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
+    <DemoWrapper>
+      <Bleed marginInline="10" asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">marginInline</HStack>
        </Box>
-      </Box>
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginInline="0 10">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
-        </Box>
-      </Box>
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginBlock="10 0">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
-        </Box>
-      </Box>
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginBlock="0 10">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
-        </Box>
-      </Box>
-    </VStack>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -0,0 +1,60 @@
+import { Bleed, Box, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <DemoWrapper>
+        <Bleed marginInline="10 0" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginInline start</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+      <DemoWrapper>
+        <Bleed marginInline="0 10" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginInline end</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+      <DemoWrapper>
+        <Bleed marginBlock="10 0" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginBlock start</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+      <DemoWrapper>
+        <Bleed marginBlock="0 10" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginBlock end</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+    </VStack>
+  );
+};
+
+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};
@@ -1,42 +1,28 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { Bleed, Box, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <>
-      <VStack gap="2" align="center">
-        <Box background="surface-alt-1-subtle" padding="10">
-          <Box background="surface-alt-2-subtle" padding="10">
-            <Bleed marginInline="full">
-              <Box background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;full&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
+    <DemoWrapper>
+      <Bleed marginInline="full" asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">Full</HStack>
        </Box>
-        <Box background="surface-alt-1-subtle" padding="10">
-          <Box background="surface-alt-2-subtle" padding="10">
-            <Bleed marginInline="full 0">
-              <Box background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding="10">
-          <Box background="surface-alt-2-subtle" padding="10">
-            <Bleed marginInline="0 full">
-              <Box background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-      </VStack>
-    </>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -47,5 +33,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 3,
+  desc: "Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout",
 };
@@ -0,0 +1,49 @@
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Bleed, Box, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="6" align="start">
+      <HStack gap="2" align="center">
+        Med
+        <Box
+          paddingBlock="1"
+          paddingInline="2"
+          background="surface-alt-3-subtle"
+          borderRadius="full"
+        >
+          <Bleed marginBlock="px 0" asChild>
+            <MagnifyingGlassIcon aria-hidden fontSize="1.25rem" />
+          </Bleed>
+        </Box>
+      </HStack>
+
+      <HStack gap="2" align="center">
+        Uten
+        <Box
+          paddingBlock="1"
+          paddingInline="2"
+          background="surface-alt-3-subtle"
+          borderRadius="full"
+        >
+          <MagnifyingGlassIcon aria-hidden fontSize="1.25rem" />
+        </Box>
+      </HStack>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+  desc: "Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.",
+};
@@ -1,54 +0,0 @@
-import { Bleed, Box, HStack } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <>
-      <style>
-        {`
-        .circle {
-          width: 24px;
-          height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-        .scale {
-          transform: scale(5);
-        }
-        `}
-      </style>
-      <Box padding="32">
-        <HStack className="" gap="32">
-          <Box
-            className="circle scale"
-            background="surface-success-subtle"
-            borderRadius="full"
-          >
-            L
-          </Box>
-          <Box
-            className="circle scale"
-            background="surface-success-subtle"
-            borderRadius="full"
-          >
-            <Bleed marginInline="0 px">L</Bleed>
-          </Box>
-        </HStack>
-      </Box>
-    </>
-  );
-};
-
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 0,
-};
@@ -1,109 +1,33 @@
-import { Bleed, BodyLong, Box, HStack, VStack } from "@navikt/ds-react";
+import { Bleed, Box, VStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <>
-      <style>
-        {`
-      .navds-bleed {
-        background-color: var(--a-surface-success-subtle);
-        width: fit-content;
-      }
-      `}
-      </style>
-      <HStack gap="3">
-        <VStack gap="2">
-          <p>CSS string</p>
-          <Box background="surface-alt-1-subtle" padding="5">
-            <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed asChild>
-                <BodyLong>before Bleed</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box background="surface-alt-1-subtle" padding="5">
-            <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed marginInline="10 0" asChild>
-                <BodyLong>without reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box background="surface-alt-1-subtle" padding="5">
-            <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed marginInline="10 0" reflectivePadding asChild>
-                <BodyLong>with reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-        </VStack>
-
-        <VStack gap="2">
-          <p>breakpoints</p>
-          <Box
-            background="surface-alt-1-subtle"
-            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-          >
-            <Box
-              background="surface-alt-2-subtle"
-              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-            >
-              <Bleed asChild>
-                <BodyLong>before Bleed</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box
-            background="surface-alt-1-subtle"
-            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-          >
-            <Box
-              background="surface-alt-2-subtle"
-              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-            >
-              <Bleed
-                marginInline={{
-                  xs: "4 0",
-                  sm: "8 0",
-                  md: "12 0",
-                  lg: "16 0",
-                  xl: "20 0",
-                }}
-                asChild
-              >
-                <BodyLong>without reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box
-            background="surface-alt-1-subtle"
-            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-          >
-            <Box
-              background="surface-alt-2-subtle"
-              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-            >
-              <Bleed
-                marginInline={{
-                  xs: "4 0",
-                  sm: "8 0",
-                  md: "12 0",
-                  lg: "16 0",
-                  xl: "20 0",
-                }}
-                reflectivePadding
-                asChild
-              >
-                <BodyLong>with reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-        </VStack>
-      </HStack>
-    </>
+    <DemoWrapper>
+      <Bleed marginInline="10" asChild reflectivePadding>
+        <Box className="p" background="surface-alt-3-subtle">
+          reflectivePadding lar innhold forbli der det ville vært uten Bleed
+        </Box>
+      </Bleed>
+      <Bleed marginInline="10" asChild>
+        <Box className="p" background="surface-alt-3-subtle">
+          Uten reflectivePadding
+        </Box>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        <VStack gap="4">{children}</VStack>
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -114,5 +38,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
 };
@@ -0,0 +1,45 @@
+import { Bleed, BodyLong, Box, HStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <DemoWrapper>
+      <Bleed marginInline={{ xs: "8", md: "12", lg: "16" }} asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">
+            <BodyLong>xs: 8, md: 12, lg: 16</BodyLong>
+          </HStack>
+        </Box>
+      </Bleed>
+    </DemoWrapper>
+  );
+};
+
+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box
+      background="surface-alt-3"
+      paddingBlock="4"
+      paddingInline={{ xs: "4", md: "8", lg: "12" }}
+      borderRadius="large"
+    >
+      <Box background="surface-subtle" padding="4" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.",
+};
@@ -1,6 +1,6 @@
-import { Hide, HGrid } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
+import { HGrid, Hide } from "@navikt/ds-react";
 import cl from "clsx";
+import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
@@ -22,7 +22,7 @@ export const Demo = {

 export const args = {
  index: 0,
-  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Hide + child-komponent skal fungere må child kunne ta inn 'className' som prop.",
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Hide + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
 };

 const Placeholder = ({
@@ -1,6 +1,6 @@
-import { Show, HGrid } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
+import { HGrid, Show } from "@navikt/ds-react";
 import cl from "clsx";
+import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
@@ -22,7 +22,7 @@ export const Demo = {

 export const args = {
  index: 0,
-  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Show + child-komponent skal fungere må child kunne ta inn 'className' som prop.",
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Show + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
 };

 const Placeholder = ({
@@ -14,7 +14,6 @@ import Footer from "components/layout/footer/Footer";
 import { Header } from "components/layout/header/Header";
 import ComponentOverview from "components/sanity-modules/ComponentOverview";
 import { SEO } from "components/website-modules/seo/SEO";
-import { logger } from "logger";
 import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -36,11 +35,6 @@ export const getStaticProps: GetStaticProps = async ({
    type: "ds_artikkel",
  });

-  logger.info(
-    { sidebar: !!sidebar, page: !!page, links: !!links },
-    "getStaticProps in /grunnleggende"
-  );
-
  return {
    props: {
      page,
@@ -24,7 +24,6 @@ import { Header } from "components/layout/header/Header";
 import ComponentOverview from "components/sanity-modules/ComponentOverview";
 import { IntroCards } from "components/website-modules/IntroCards";
 import { SEO } from "components/website-modules/seo/SEO";
-import { logger } from "logger";
 import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
@@ -48,11 +47,6 @@ export const getStaticProps: GetStaticProps = async ({
    type: "komponent_artikkel",
  });

-  logger.info(
-    { sidebar: !!sidebar, page: !!page, links: !!links },
-    "getStaticProps in /komponenter"
-  );
-
  return {
    props: {
      page,
@@ -3415,7 +3415,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^5.7.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.7.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3442,8 +3442,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": ^5.7.2
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/ds-css": ^5.7.3
+    "@navikt/ds-tokens": ^5.7.3
    "@types/jest": ^29.0.0
    concurrently: 7.2.1
    copyfiles: 2.4.1
@@ -3461,7 +3461,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 5.7.2
+    "@navikt/ds-css": 5.7.3
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.3.6
@@ -3485,11 +3485,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@*, @navikt/ds-css@5.7.2, @navikt/ds-css@^5.7.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.7.3, @navikt/ds-css@^5.7.3, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/ds-tokens": ^5.7.3
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3502,13 +3502,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@*, @navikt/ds-react@^5.7.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^5.7.3, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.7.2
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/aksel-icons": ^5.7.3
+    "@navikt/ds-tokens": ^5.7.3
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3542,11 +3542,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^5.7.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.7.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/ds-tokens": ^5.7.3
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3557,7 +3557,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^5.7.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.7.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -3584,7 +3584,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@next/bundle-analyzer@npm:^13.5.0":
+"@next/bundle-analyzer@npm:^13.2.1":
  version: 13.5.5
  resolution: "@next/bundle-analyzer@npm:13.5.5"
  dependencies:
@@ -3600,12 +3600,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@next/eslint-plugin-next@npm:^12.2.0":
-  version: 12.3.4
-  resolution: "@next/eslint-plugin-next@npm:12.3.4"
+"@next/eslint-plugin-next@npm:^13.2.1":
+  version: 13.5.5
+  resolution: "@next/eslint-plugin-next@npm:13.5.5"
  dependencies:
    glob: 7.1.7
-  checksum: e4ae97062f3efe8f70904cf0da296ab501a2924423273352d01b18d8ffff1eb2e9a65c47dd6f9cfa0d696eada272486a3f519b2786918d0a9ab735b93f5ce4b3
+  checksum: 760747343864e9edfefbed686dba2b06319a62c327f5357c44b8f66f558f4a6696712e5ce88166cc6f637b2ed5cae3b7f8261f53c074776c778308912979db88
  languageName: node
  linkType: hard

@@ -8410,11 +8410,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^5.7.2
-    "@navikt/ds-css": ^5.7.2
-    "@navikt/ds-react": ^5.7.2
-    "@navikt/ds-tailwind": ^5.7.2
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/aksel-icons": ^5.7.3
+    "@navikt/ds-css": ^5.7.3
+    "@navikt/ds-react": ^5.7.3
+    "@navikt/ds-tailwind": ^5.7.3
+    "@navikt/ds-tokens": ^5.7.3
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -18902,7 +18902,7 @@ __metadata:
  languageName: node
  linkType: hard

-"next-logger@npm:^3.0.2":
+"next-logger@npm:3.0.2":
  version: 3.0.2
  resolution: "next-logger@npm:3.0.2"
  dependencies:
@@ -18914,7 +18914,7 @@ __metadata:
  languageName: node
  linkType: hard

-"next-sanity@npm:^5.5.8":
+"next-sanity@npm:5.5.8":
  version: 5.5.8
  resolution: "next-sanity@npm:5.5.8"
  dependencies:
@@ -18935,7 +18935,7 @@ __metadata:
  languageName: node
  linkType: hard

-"next@npm:^13.5.0":
+"next@npm:^13.2.1":
  version: 13.5.5
  resolution: "next@npm:13.5.5"
  dependencies:
@@ -26473,8 +26473,8 @@ __metadata:
    "@amplitude/analytics-browser": ^2.2.3
    "@axe-core/playwright": ^4.5.2
    "@babel/core": ^7.19.0
-    "@next/bundle-analyzer": ^13.5.0
-    "@next/eslint-plugin-next": ^12.2.0
+    "@next/bundle-analyzer": ^13.2.1
+    "@next/eslint-plugin-next": ^13.2.1
    "@playwright/test": 1.35.1
    "@portabletext/react": ^3.0.7
    "@sanity/block-tools": ^3.18.0
@@ -26504,9 +26504,9 @@ __metadata:
    jsdom: ^22.1.0
    json5: 2.2.1
    lodash: ^4.17.21
-    next: ^13.5.0
-    next-logger: ^3.0.2
-    next-sanity: ^5.5.8
+    next: ^13.2.1
+    next-logger: 3.0.2
+    next-sanity: 5.5.8
    pino: ^8.14.1
    pino-pretty: ^10.0.0
    postcss: ^8.4.31
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	7007d3c58e	Version Packages (#2401 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-19 19:56:13 +02:00
Ken	8524346044	🐛 Modal + Popover fix (#2400 ) * 🧪 SB-demo * 🐛 Datepicker-popover vises ikke ritkig i Modal * 📝 Modal + datepicker demo	2023-10-19 19:52:06 +02:00
Ken	d5d8898659	🐛 Riktig CSP for hotjar	2023-10-19 18:28:24 +02:00
Ken	1d635e1dbd	⬇️ reverted til gammel nextjs-versjon (#2393 )	2023-10-18 15:57:07 +02:00
Ken	6b3932b172	[aksel.nav.no] 📝 Oppdatert eksempler for Bleed og show/hide (#2385 ) * 📝 Oppdatert eksempler for Bleed og show/hide * ♻️ Refactor wrapper rundt bleed-eksempler	2023-10-18 12:50:12 +02:00
Ken	4d6ae1ae42	[aksel.nav.no] 🐛 Fikset next error ved redeploy av app (#2387 ) * 🐛 Fikset next error ved redeploy av app * 🎨 synket next-versjoner	2023-10-18 11:11:52 +02:00