Version Packages (#2401 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Modal + Popover fix (#2400 )
2026-10-14 01:32: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
97 changed files with 1629 additions and 1661 deletions
@@ -39,6 +39,7 @@ module.exports = {
      files: ["**/*.ts?(x)"],
      extends: ["plugin:@typescript-eslint/recommended"],
      rules: {
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
        "@typescript-eslint/no-explicit-any": "off", // Temporary
      },
    },
@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
+## 5.7.1
+
 ## 5.7.0

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

+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
+## 5.7.1
+
 ## 5.7.0

 ## 5.6.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.7.0",
+  "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.0",
-    "@navikt/ds-tokens": "^5.7.0",
+    "@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,7 +1,7 @@
-import stylelint from "stylelint";
-import valueParser from "postcss-value-parser";
 import { readFileSync } from "node:fs";
 import { Node as PostCSSNode } from "postcss";
+import valueParser from "postcss-value-parser";
+import stylelint from "stylelint";

 import { isCustomProperty, tokenExists } from "../../utils";

@@ -34,7 +34,6 @@ export const messages = stylelint.utils.ruleMessages(ruleName, {
 });

 const checkDeclValue = (
-  controlledPrefixes: string[],
  value: string,
  postcssResult: stylelint.PostcssResult,
  rootNode: PostCSSNode
@@ -58,7 +57,6 @@ const checkDeclValue = (
 };

 const checkDeclProp = (
-  controlledPrefixes: string[],
  prop: string,
  postcssResult: stylelint.PostcssResult,
  rootNode: PostCSSNode
@@ -81,8 +79,8 @@ const checkDeclProp = (
 const ruleFunction: stylelint.Rule = () => {
  return (postcssRoot, postcssResult) => {
    postcssRoot.walkDecls((node) => {
-      checkDeclValue(controlledPrefixes, node.value, postcssResult, node);
-      checkDeclProp(controlledPrefixes, node.prop, postcssResult, node);
+      checkDeclValue(node.value, postcssResult, node);
+      checkDeclProp(node.prop, postcssResult, node);
    });
  };
 };
@@ -92,16 +92,6 @@ const tokenJsonFile = "./tokens.json";

 const allowedTokenNames = [];

-export const addTokens = (
-  tokenJSONFile: string,
-  allowedTokenNames: string[]
-) => {
-  const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJSONFile}`);
-  const fileString = jsonFileBuffer.toString();
-  const flattened = flattenObject(JSON.parse(fileString));
-  flattened.forEach((token) => allowedTokenNames.push(token));
-};
-
 export const tokenExists = (
  controlledPrefixes: string[],
  inputToken: string
@@ -110,7 +100,6 @@ export const tokenExists = (
  if (!allowedTokenNames.length) {
    const cssFileBuffer = readFileSync(`${__dirname}/${tokenCSSFile}`);
    const cssFileString = cssFileBuffer.toString();
-
    valueParser(cssFileString).walk((node) => {
      if (
        node.type === "word" &&
@@ -121,7 +110,9 @@ export const tokenExists = (
      }
    });

-    addTokens(tokenJsonFile, allowedTokenNames);
+    const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJsonFile}`);
+    const flattened = flattenObject(JSON.parse(jsonFileBuffer.toString()));
+    flattened.forEach((token) => allowedTokenNames.push(token));
  }

  return allowedTokenNames.includes(inputToken);
@@ -1,5 +1,33 @@
 # @navikt/aksel

+## 5.7.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96), [`d8a4097c8`](https://github.com/navikt/aksel/commit/d8a4097c82ceee95bd216b36e1dc8eb99e75d7ee), [`a6b673386`](https://github.com/navikt/aksel/commit/a6b67338612b7944dc4e6b3d541244f521e94500)]:
+  - @navikt/ds-css@5.7.3
+
+## 5.7.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.2
+
+## 5.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`cb8c7cabe`](https://github.com/navikt/aksel/commit/cb8c7cabeec6ddcf08c06debd7ca889888b1f5e6)]:
+  - @navikt/ds-css@5.7.1
+
 ## 5.7.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.7.0",
+  "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.0",
+    "@navikt/ds-css": "5.7.4",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -111,9 +111,9 @@ export function getMigrationNames() {
 export function getMigrationString() {
  let str = "";

-  Object.entries(migrations).forEach(([version, migrations]) => {
+  Object.entries(migrations).forEach(([version, vMigrations]) => {
    str += `\n${chalk.underline(version)}\n`;
-    migrations.forEach((migration) => {
+    vMigrations.forEach((migration) => {
      str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
    });
  });
@@ -13,10 +13,10 @@ export default function transformer(file, api) {
  function addMigrationTag(node) {
    const attributes = node.openingElement.attributes;
    const isMigrated = attributes.find(
-      (node) =>
-        node.type === "JSXAttribute" &&
-        node.name.name === "data-version" &&
-        node.value.value === "v1"
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name.name === "data-version" &&
+        attr.value.value === "v1"
    );

    if (!isMigrated) {
@@ -30,7 +30,7 @@ export default function transformer(file, api) {
  function addExplicitStandardProp(node) {
    const attributes = node.openingElement.attributes;
    const variant = attributes.find(
-      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
    );

    if (!variant) {
@@ -1,12 +1,12 @@
 import type { JSCodeshift } from "jscodeshift";
+import { tokens } from "../../../tokens-map.mjs";
 import {
  getImportSpecifier,
  getImportSpecifierName,
  renameImportSpecifier,
 } from "../../../utils/imports";
-import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
 import { getLineTerminator } from "../../../utils/lineterminator";
+import { translateToken } from "../../../utils/translate-token";

 /**
 * @param {import('jscodeshift').FileInfo} file
@@ -29,9 +29,9 @@ export default function transformer(file: JSCodeshift, api) {
    return src;
  }

-  tokens.forEach((x) => {
-    const name = translateToken(x[0], "js");
-    const out = translateToken(x[1], "js");
+  tokens.forEach((token) => {
+    const name = translateToken(token[0], "js");
+    const out = translateToken(token[1], "js");

    let foundName: string = "";

@@ -1,5 +1,25 @@
 # @navikt/ds-css

+## 5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+- Select: Tokenstøtte for å endre chevronfarge sammen med tekst ([#2383](https://github.com/navikt/aksel/pull/2383))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
+## 5.7.2
+
+## 5.7.1
+
+### Patch Changes
+
+- Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))
+
 ## 5.7.0

 ### Patch Changes
@@ -160,11 +160,11 @@
 }

 .navds-chips--icon-left {
-  padding-left: 0.375rem;
+  padding-left: var(--a-spacing-1-alt);
 }

 .navds-chips--icon-right {
-  padding-right: 0.375rem;
+  padding-right: var(--a-spacing-1-alt);
 }

 .navds-chips--small .navds-chips--icon-right {
@@ -175,7 +175,7 @@
 }

 .navds-copybutton--small > .navds-copybutton__content {
-  gap: 0.375rem;
+  gap: var(--a-spacing-1-alt);
 }

 .navds-copybutton--xsmall > .navds-copybutton__content {
@@ -59,7 +59,7 @@

 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 0.375rem 0;
+  padding: var(--a-spacing-1-alt) 0;
 }

 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -101,7 +101,7 @@
  content: "";
  position: absolute;
  top: 50%;
-  transform: translate(0.375rem, -50%);
+  transform: translate(var(--a-spacing-1-alt), -50%);
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
  width: 0.75rem;
  height: 0.25rem;
@@ -126,7 +126,7 @@
  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
  position: absolute;
  height: 1.5rem;
-  transform: translate(0.375rem);
+  transform: translate(var(--a-spacing-1-alt));
  pointer-events: none;
 }

@@ -287,10 +287,8 @@
 .navds-checkbox--readonly
  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
  + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-radio__label::before,
-.navds-radio--readonly
-  > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
-  + .navds-radio__label::before {
+.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
  background-color: var(--__ac-radio-checkbox-readonly-bg);
  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
@@ -43,6 +43,7 @@
  right: var(--a-spacing-2);
  pointer-events: none;
  align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
 }

 .navds-form-field--small .navds-select__input {
@@ -51,7 +52,7 @@
 }

 .navds-form-field--small .navds-select__chevron {
-  right: 0.375rem;
+  right: var(--a-spacing-1-alt);
 }

 /**
@@ -62,7 +62,7 @@
 }

 .navds-form-field--small .navds-textarea__input {
-  padding: 0.375rem;
+  padding: var(--a-spacing-1-alt);
 }

 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -1,6 +1,5 @@
 .navds-help-text__button {
  margin: 0;
-  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
@@ -9,17 +8,19 @@
  justify-content: center;
  align-items: center;
  color: var(--ac-help-text-button-color, var(--a-surface-action));
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
 }

 .navds-help-text__button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-help-text__button:focus {
    outline: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
  }
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.7.0",
+  "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.0",
+    "@navikt/ds-tokens": "^5.7.4",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -52,8 +52,7 @@
 }

 .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
+  padding-inline: var(--a-spacing-1-alt);
 }

 .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
@@ -37,7 +37,7 @@
 }

 .navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
  width: 2rem;
 }

@@ -93,7 +93,7 @@

 .navds-tabs__tab--small {
  min-height: 2rem;
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
 }

 .navds-tabs__tab-icon--top,
@@ -11,7 +11,7 @@

 .navds-tag--small {
  min-height: 1.5rem;
-  padding: 0 0.375rem;
+  padding: 0 var(--a-spacing-1-alt);
 }

 .navds-tag--xsmall {
@@ -1,5 +1,47 @@
 # @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
+
+- 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))
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96)]:
+  - @navikt/ds-tokens@5.7.3
+  - @navikt/aksel-icons@5.7.3
+
+## 5.7.2
+
+### Patch Changes
+
+- MonthPicker: Fikset tastaturnavigasjon ([#2374](https://github.com/navikt/aksel/pull/2374))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.2
+  - @navikt/aksel-icons@5.7.2
+
+## 5.7.1
+
+### Patch Changes
+
+- Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.1
+  - @navikt/aksel-icons@5.7.1
+
 ## 5.7.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.7.0",
+  "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.0",
-    "@navikt/ds-tokens": "^5.7.0",
+    "@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,24 +1,12 @@
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";

-export default {
+const meta: Meta<typeof Chips> = {
  title: "ds-react/Chips",
  component: Chips,
-  argTypes: {
-    type: {
-      control: {
-        type: "radio",
-        options: ["toggle", "removable"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
+export default meta;

 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];

@@ -61,6 +49,16 @@ export const Default = (props) => {
    </Chips>
  );
 };
+Default.argTypes = {
+  type: {
+    control: { type: "radio" },
+    options: ["toggle", "removable"],
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};

 export const Toggle = () => {
  const [selected, setSelected] = useState<number[]>([2, 4]);
@@ -97,17 +97,17 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    const mode = rest.mode ?? ("single" as any);

    /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
     */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);

      if (rest.mode === "single") {
-        selected && (onClose?.() ?? setOpen(false));
+        newSelected && (onClose?.() ?? setOpen(false));
      } else if (rest.mode === "range") {
-        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+        newSelected?.from && newSelected?.to && (onClose?.() ?? setOpen(false));
      }
-      rest?.onSelect?.(selected);
+      rest?.onSelect?.(newSelected);
    };

    return (
@@ -71,11 +71,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
    const mode = rest.mode ?? ("single" as any);

    /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
     */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
-      onSelect?.(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);
+      onSelect?.(newSelected);
    };

    return (
@@ -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>
+  );
+};
@@ -164,9 +164,10 @@ export const useDatepicker = (
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
    },
    [defaultMonth, defaultSelected, selectedDay, today]
  );
@@ -310,7 +311,7 @@ export const useDatepicker = (

  const datepickerProps = {
    month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
    onDayClick: handleDayClick,
    selected: selectedDay ?? new Date("Invalid date"),
    locale: _locale,
@@ -161,9 +161,10 @@ export const useMonthpicker = (
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
    },
    [defaultSelected, defaultYear, selectedMonth, today]
  );
@@ -1,5 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isBefore from "date-fns/isBefore";
+import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
 import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -382,7 +382,7 @@ export const useRangeDatepicker = (
    const prevToRange =
      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;

-    const resetTo = isBefore(prevToRange, range?.from);
+    const resetTo = checkIsBefore(prevToRange, range?.from);

    range?.from
      ? setFromInputValue(
@@ -535,7 +535,7 @@ export const useRangeDatepicker = (

  const datepickerProps = {
    month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
    onSelect: handleSelect,
    selected: selectedRange,
    locale: _locale,
@@ -1,8 +1,8 @@
 import cl from "clsx";
-import format from "date-fns/format";
-import isSameMonth from "date-fns/isSameMonth";
 import compareAsc from "date-fns/compareAsc";
 import compareDesc from "date-fns/compareDesc";
+import format from "date-fns/format";
+import isSameMonth from "date-fns/isSameMonth";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
@@ -1,14 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { isAfter, isBefore } from "date-fns";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../context";
-import { labelNextYear, labelPrevYear } from "../utils";
-import { isAfter, isBefore } from "date-fns";
 import { Button } from "../../button";
 import { Select } from "../../form/Select";
+import { useSharedMonthContext } from "../context";
+import { labelNextYear, labelPrevYear } from "../utils";

 export const MonthCaption = () => {
  const {
@@ -24,9 +24,9 @@ export const MonthCaption = () => {

  if (hasDropdown && fromDate && toDate) {
    const fromYear = fromDate.getFullYear();
-    const toYear = toDate.getFullYear();
-    for (let year = fromYear; year <= toYear; year++) {
-      years.push(setYear(startOfYear(new Date()), year));
+    const toDateYear = toDate.getFullYear();
+    for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
+      years.push(setYear(startOfYear(new Date()), currYear));
    }

    if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
@@ -75,9 +75,9 @@ export const MonthCaption = () => {
          onChange={handleYearChange}
          className="navds-date__caption__year"
        >
-          {years.map((year) => (
-            <option key={year.getFullYear()} value={year.getFullYear()}>
-              {formatYearCaption(year, { locale })}
+          {years.map((yearOpt) => (
+            <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
+              {formatYearCaption(yearOpt, { locale })}
            </option>
          ))}
        </Select>
@@ -62,9 +62,9 @@ export const MonthSelector = () => {
  return (
    <BodyShort as="table" className="rdp-table">
      <tbody className="rdp-tbody">
-        {tableMonths.map((months, i) => (
+        {tableMonths.map((tableRow, i) => (
          <tr className="rdp-row" key={i}>
-            {months.map((month: Date) => {
+            {tableRow.map((month: Date) => {
              return (
                <td key={month.toDateString()} className="rdp-cell">
                  <MonthButton
@@ -1,13 +1,12 @@
 /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
-import { nb, enGB } from "date-fns/locale";
+import { enGB, nb } from "date-fns/locale";

 import { getMonthWeeks } from "../get-month-weeks";

 describe('when using the "nB" locale', () => {
  const locale = nb;
  describe("when getting the weeks for January 2022", () => {
-    const date = new Date(2022, 0);
-    const weeks = getMonthWeeks(date, { locale });
+    const weeks = getMonthWeeks(new Date(2022, 0), { locale });
    test("the first week should be the last of the previous year", () => {
      const weekNumbers = weeks.map((week) => week.weekNumber);
      expect(weekNumbers[0]).toEqual(52);
@@ -29,8 +28,10 @@ describe('when using the "enGB" locale', () => {
  describe("when using fixed weeks", () => {
    const useFixedWeeks = true;
    describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
      test("should return 48 - 1 week numbers", () => {
        const weekNumbers = weeks.map((week) => week.weekNumber);
        const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -67,8 +68,10 @@ describe('when using the "nb" locale', () => {
  describe("when using fixed weeks", () => {
    const useFixedWeeks = true;
    describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
      test("should return 48 - 1 week numbers", () => {
        const weekNumbers = weeks.map((week) => week.weekNumber);
        const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -15,27 +15,27 @@ export const nextEnabled = (
  const currentIndex = currentMonth.getMonth();

  if (key === "Home") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
      currentIndex,
      months,
      yearState,
      disabled,
      "home"
    );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
    }
  }
  if (key === "End") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
      currentIndex,
      months,
      yearState,
      disabled,
      "end"
    );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
    }
  }
  if (key === "PageUp") {
@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            className={cl(
              "navds-select__input",
              "navds-body-short",
-              `navds-body--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`
            )}
            size={htmlSize}
          >
@@ -116,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
          className={cl(
            "navds-text-field__input",
            "navds-body-short",
-            `navds-body-${size ?? "medium"}`
+            `navds-body-short--${size ?? "medium"}`
          )}
          size={htmlSize}
        />
@@ -162,7 +162,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            className={cl(
              "navds-textarea__input",
              "navds-body-short",
-              `navds-body-${size ?? "medium"}`,
+              `navds-body-short--${size ?? "medium"}`,
              {
                "navds-textarea--counter": hasMaxLength,
              }
@@ -176,7 +176,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          inputClassName,
          "navds-combobox__input",
          "navds-body-short",
-          `navds-body-${size}`
+          `navds-body-short--${size}`
        )}
      />
    );
@@ -8,8 +8,8 @@ import React, {
  useRef,
  useState,
 } from "react";
-import { useFormField, FormFieldType } from "../../useFormField";
 import { useClientLayoutEffect } from "../../../util";
+import { FormFieldType, useFormField } from "../../useFormField";

 interface InputContextType extends FormFieldType {
  clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
@@ -63,10 +63,10 @@ export const InputContextProvider = ({ children, value: props }) => {

  const onChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.currentTarget.value;
-      externalValue ?? setInternalValue(value);
+      const newValue = event.currentTarget.value;
+      externalValue ?? setInternalValue(newValue);
      externalOnChange?.(event);
-      setSearchTerm(value);
+      setSearchTerm(newValue);
    },
    [externalValue, externalOnChange]
  );
@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import usePrevious from "../../../util/usePrevious";
 import { useInputContext } from "../Input/inputContext";
-import { ComboboxProps } from "../types";
 import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";

 type SelectedOptionsContextType = {
  addSelectedOption: (option: string) => void;
@@ -71,8 +71,8 @@ export const SelectedOptionsProvider = ({
        allowNewValues && addCustomOption(option);
        !isMultiSelect && setSelectedOptions([]);
      } else if (isMultiSelect) {
-        setSelectedOptions((prevSelectedOptions) => [
-          ...prevSelectedOptions,
+        setSelectedOptions((oldSelectedOptions) => [
+          ...oldSelectedOptions,
          option,
        ]);
      } else {
@@ -97,8 +97,8 @@ export const SelectedOptionsProvider = ({
      if (isCustomOption) {
        removeCustomOption(option);
      } else {
-        setSelectedOptions((prevSelectedOptions) =>
-          prevSelectedOptions.filter(
+        setSelectedOptions((oldSelectedOptions) =>
+          oldSelectedOptions.filter(
            (selectedOption) => selectedOption !== option
          )
        );
@@ -1,9 +1,9 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { Accordion, Radio, RadioGroup } from "../../index";
-import AccordionItem from "../../accordion/AccordionItem";
-import AccordionHeader from "../../accordion/AccordionHeader";
 import AccordionContent from "../../accordion/AccordionContent";
+import AccordionHeader from "../../accordion/AccordionHeader";
+import AccordionItem from "../../accordion/AccordionItem";
+import { Accordion, Radio, RadioGroup } from "../../index";

 const meta: Meta<typeof Radio> = {
  title: "ds-react/Radio",
@@ -138,3 +138,26 @@ export const TestInsideAccordion = () => (
    </AccordionItem>
  </Accordion>
 );
+
+export const Readonly = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvilken frukt liker du?"
+      defaultValue={["banan"]}
+      readOnly
+    >
+      <Radio value="banan">Banan</Radio>
+      <Radio value="eple">Eple</Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Hvilken frukt liker du?"
+      error="feilmelding"
+      defaultValue="eple"
+      readOnly
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan">Banan</Radio>
+    </RadioGroup>
+  </div>
+);
@@ -212,7 +212,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                `navds-search__input--${variant}`,
                "navds-text-field__input",
                "navds-body-short",
-                `navds-body-${size}`
+                `navds-body-short--${size}`
              )}
              {...(htmlSize ? { size: Number(htmlSize) } : {})}
            />
@@ -1,52 +1,36 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
-export default {
+
+const meta: Meta<typeof Textarea> = {
  title: "ds-react/Textarea",
  component: Textarea,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-    maxRows: {
-      type: "number",
-    },
-    minRows: {
-      type: "number",
-    },
-  },
-} as Meta;
+};
+export default meta;

-export const Default = {
+export const Default: StoryObj<typeof Textarea> = {
  render: (props) => {
-    return (
-      <Textarea
-        {...props}
-        maxLength={props?.maxLength ?? 100}
-        label="Ipsum enim quis culpa"
-      />
-    );
+    return <Textarea {...props} />;
  },

  args: {
    maxLength: 100,
+    label: "Ipsum enim quis culpa",
    resize: false,
  },
+
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["medium", "small"],
+    },
+    description: { type: "string" },
+    error: { type: "string" },
+    hideLabel: { type: "boolean" },
+    disabled: { type: "boolean" },
+    maxRows: { type: "number" },
+    minRows: { type: "number" },
+  },
 };

 export const Small = () => {
@@ -90,6 +90,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
          anchorEl={buttonRef.current}
          placement={placement}
          strategy={strategy}
+          offset={12}
        >
          <Popover.Content className="navds-body-short">
            {children}
@@ -30,7 +30,7 @@ export const HelpTextIcon = ({
        cx="12"
        cy="12"
        r="11"
-        strokeWidth="2"
+        strokeWidth="1.5"
        stroke="currentColor"
        fill={filled ? "currentColor" : "transparent"}
      />
@@ -4,6 +4,7 @@ export type SpacingScale =
  | "0"
  | "05"
  | "1"
+  | "1-alt"
  | "2"
  | "3"
  | "4"
@@ -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,10 +1,10 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { useId } from "../util";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
-import { ChevronDownIcon } from "@navikt/aksel-icons";

 export interface ExpandableRowProps extends Omit<RowProps, "content"> {
  /**
@@ -76,7 +76,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
    const expansionHandler = (e) => {
      onOpenChange?.(!isOpen);
      if (open === undefined) {
-        setInternalOpen((open) => !open);
+        setInternalOpen((oldOpen) => !oldOpen);
      }
      e.stopPropagation();
    };
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import useSWR from "swr";
-import people from "./people.json";
-import { Table } from "../index";
 import { Loader, Pagination, SortState } from "../..";
+import { Table } from "../index";
+import peopleJson from "./people.json";

 export default {
  title: "ds-react/Table",
@@ -44,8 +44,8 @@ const updateData = async (url: string) => {
  );

  return {
-    count: people.length,
-    results: people
+    count: peopleJson.length,
+    results: peopleJson
      .slice()
      .sort((a, b) => {
        if (sort) {
@@ -19,15 +19,15 @@ export const Expandable = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
          <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
            togglePlacement="right"
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -49,22 +49,22 @@ export const ExpandableLarge = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
          <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
            open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -86,22 +86,22 @@ export const ExpandableSmall = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
          <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
            open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -247,16 +247,16 @@ export const ExpandableOpen = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
          <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
            togglePlacement="right"
            defaultOpen
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -161,10 +161,10 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
    return [
      list,
      (value) =>
-        setList((list) =>
-          list.includes(value)
-            ? list.filter((id) => id !== value)
-            : [...list, value]
+        setList((oldList) =>
+          oldList.includes(value)
+            ? oldList.filter((id) => id !== value)
+            : [...oldList, value]
        ),
    ];
  };
@@ -39,10 +39,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
          const showStartScroll = scrollLeft > 1;
          const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;

-          setDisplayScroll((displayScroll) =>
-            showStartScroll === displayScroll.start &&
-            showEndScroll === displayScroll.end
-              ? displayScroll
+          setDisplayScroll((oldDisplayScroll) =>
+            showStartScroll === oldDisplayScroll.start &&
+            showEndScroll === oldDisplayScroll.end
+              ? oldDisplayScroll
              : { start: showStartScroll, end: showEndScroll }
          );
        }),
@@ -1,6 +1,8 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { AxisLabels } from "./AxisLabels";
+import Pin, { PinType } from "./Pin";
+import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
 import { TimelineContext } from "./hooks/useTimelineContext";
 import {
@@ -9,11 +11,9 @@ import {
  useTimelineRows,
 } from "./hooks/useTimelineRows";
 import Period, { PeriodType } from "./period";
-import Pin, { PinType } from "./Pin";
-import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { parseRows } from "./utils/timeline";
-import Zoom, { ZoomType } from "./zoom";
 import { AxisLabelTemplates } from "./utils/types.external";
+import Zoom, { ZoomType } from "./zoom";

 export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
@@ -187,10 +187,10 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
      }
    };

-    const addFocusable = (ref: HTMLButtonElement | null, id: number) => {
+    const addFocusable = (btnRef: HTMLButtonElement | null, id: number) => {
      let items = firstFocusabled.current;
      items = items.filter((x) => x.id !== id);
-      items.push({ ref, id });
+      items.push({ ref: btnRef, id });
      firstFocusabled.current = items;
    };

@@ -212,8 +212,8 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
          <div className="navds-timeline">
            <AxisLabels templates={axisLabelTemplates} />

-            {pins.map((Pin, i) => (
-              <Pin key={`pin-${i}`} />
+            {pins.map((PinChild, i) => (
+              <PinChild key={`pin-${i}`} />
            ))}

            {processedRows.map((row, i) => {
@@ -238,7 +238,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
              );
            })}
          </div>
-          {zoomComponent && zoomComponent}
+          {zoomComponent}
        </div>
      </TimelineContext.Provider>
    );
@@ -101,8 +101,7 @@ export const useTimelineRows = (
 ): InternalSimpleTimeline[] =>
  useMemo(
    () =>
-      rows.map((periods: InternalSimpleTimeline, i: number) => {
-        const rowIndex = i;
+      rows.map((periods: InternalSimpleTimeline, rowIndex: number) => {
        const timelinePeriods = periods.periods
          .sort((a: Period, b: Period) => a.start.valueOf() - b.start.valueOf())
          .map((period: Period & { restProps?: any; ref?: any }, i) => ({
@@ -2,8 +2,8 @@ export const omit = (obj: object, props: string[]) =>
  Object.entries(obj)
    .filter(([key]) => !props.includes(key))
    .reduce(
-      (obj, [key, value]) => ({
-        ...obj,
+      (prevObj, [key, value]) => ({
+        ...prevObj,
        [key]: value,
      }),
      {}
@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind

+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
+## 5.7.1
+
 ## 5.7.0

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

+## 5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+## 5.7.2
+
+## 5.7.1
+
 ## 5.7.0

 ## 5.6.5
@@ -508,6 +508,7 @@
    { "name": "--a-spacing-0", "value": "0" },
    { "name": "--a-spacing-05", "value": "0.125rem" },
    { "name": "--a-spacing-1", "value": "0.25rem" },
+    { "name": "--a-spacing-1-alt", "value": "0.375rem" },
    { "name": "--a-spacing-2", "value": "0.5rem" },
    { "name": "--a-spacing-3", "value": "0.75rem" },
    { "name": "--a-spacing-4", "value": "1rem" },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.7.0",
+  "version": "5.7.4",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -10,6 +10,9 @@
      "1": {
        "value": "0.25rem"
      },
+      "1-alt": {
+        "value": "0.375rem"
+      },
      "2": {
        "value": "0.5rem"
      },
@@ -1,7 +1,7 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import * as tokens from "../dist/tokens.js";
 import { Tooltip } from "@navikt/ds-react";
+import { Meta } from "@storybook/react";
+import React from "react";
+import * as tokens from "../dist/tokens.js";

 export default {
  title: "ds-tokens/Spacing",
@@ -14,24 +14,15 @@ export const Spacing = () => {
    {}
  );

-  const sortObject = Object.fromEntries(
-    Object.entries(allSpacing).sort((a, b) => {
-      if (a[0].endsWith("05"))
-        return 0.5 - Number(b[0].replace("ASpacing", ""));
-      if (b[0].endsWith("05"))
-        return Number(a[0].replace("ASpacing", "")) - 0.5;
-      return (
-        Number(a[0].replace("ASpacing", "")) -
-        Number(b[0].replace("ASpacing", ""))
-      );
-    })
+  const sorted = Object.entries(allSpacing).sort(
+    (a, b) => Number(a[1].replace("rem", "")) - Number(b[1].replace("rem", ""))
  );

  const fontSize = 16;

  return (
    <div className="colgap">
-      {Object.entries(sortObject).map(([key, val]) => (
+      {sorted.map(([key, val]) => (
        <div
          key={key}
          style={{
@@ -1,18 +1,60 @@
 # Changelog

+## 5.7.4
+
+### @navikt/ds-react
+
+- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400))
+
+## 5.7.3
+
+### @navikt/ds-css
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+- Select: Tokenstøtte for å endre chevronfarge sammen med tekst ([#2383](https://github.com/navikt/aksel/pull/2383))
+
+- 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))
+
+## 5.7.2
+
+### @navikt/ds-react
+
+- MonthPicker: Fikset tastaturnavigasjon ([#2374](https://github.com/navikt/aksel/pull/2374))
+
+## 5.7.1
+
+### @navikt/ds-css
+
+- Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))
+
+### @navikt/ds-react
+
+- Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))
+
 ## 5.7.0

 ### @navikt/aksel-icons

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

@@ -56,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))
@@ -76,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))

@@ -120,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))
@@ -154,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))
@@ -182,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

@@ -200,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
@@ -216,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))
@@ -224,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

@@ -240,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))
@@ -278,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))
@@ -290,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))
@@ -309,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))
@@ -337,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
@@ -361,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))
@@ -377,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
@@ -385,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
@@ -443,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))

@@ -459,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))
@@ -467,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

@@ -503,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
@@ -517,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
@@ -609,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

@@ -627,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
@@ -647,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))
@@ -663,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
@@ -677,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

@@ -713,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
@@ -745,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
@@ -765,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
@@ -869,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
@@ -905,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
@@ -975,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
@@ -991,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
@@ -1027,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))
@@ -1159,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
@@ -1221,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
@@ -1257,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
@@ -1279,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.0",
-    "@navikt/ds-css": "^5.7.0",
-    "@navikt/ds-react": "^5.7.0",
-    "@navikt/ds-tailwind": "^5.7.0",
-    "@navikt/ds-tokens": "^5.7.0"
+    "@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"
@@ -1,9 +1,9 @@
 import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
 import { Heading } from "@navikt/ds-react";
+import cl from "clsx";
 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,
@@ -28,7 +28,8 @@ export function CollectionMapper({
          ) => {
            const prev = arr.slice(0, index);
            const total =
-              prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
+              prev.reduce((prev2, cur) => prev2 + cur[1].length, 0) +
+              startIndex;

            return (
              <Collection
@@ -5,26 +5,30 @@ import { Grid } from "../Grid";
 import { sanitizeName } from "../utilities";

 export const ZindexView = ({ cat }: { cat: string }) => {
-  const zindex = docs[cat];
+  const zindex = docs[cat] as { name: string; value: number }[];

  return (
    <Grid>
-      {zindex.map((x, y) => {
+      {zindex.map((token, index) => {
        return (
-          <div key={x.name} id={x.name} className="flex w-fit items-center">
+          <div
+            key={token.name}
+            id={token.name}
+            className="flex w-fit items-center"
+          >
            <div
              style={{ boxShadow: `inset 0 2px 4px 0 rgba(0,0,0,0.06)` }}
              className="bg-surface-subtle mr-3 flex h-16 w-16 flex-col-reverse justify-between overflow-hidden rounded-lg text-4xl leading-none"
            >
-              {zindex.map((x, xi) => (
+              {zindex.map((token2, index2) => (
                <div
                  aria-hidden
-                  key={x.value}
+                  key={token2.value}
                  className={cl(
                    "h-3 w-16 group-hover:opacity-10 peer-focus-visible:opacity-10",
                    {
-                      "bg-surface-alt-3-strong": y === xi,
-                      "bg-surface-neutral-subtle": y !== xi,
+                      "bg-surface-alt-3-strong": index === index2,
+                      "bg-surface-neutral-subtle": index !== index2,
                    }
                  )}
                />
@@ -33,12 +37,12 @@ export const ZindexView = ({ cat }: { cat: string }) => {
            <dl className="grid h-full">
              <dt className="inline-flex items-center gap-2">
                <Copy
-                  text={sanitizeName(x.name.replace("z-index-", ""))}
-                  copyText={x.name}
+                  text={sanitizeName(token.name.replace("z-index-", ""))}
+                  copyText={token.name}
                />
              </dt>
              <dd className="text-text-subtle text-medium mt-auto">
-                {x.value}
+                {token.value}
              </dd>
            </dl>
          </div>
@@ -34,15 +34,13 @@ class ErrorBoundary extends React.Component<Props, State> {
  }
 }

-export function withErrorBoundary<Props>(
-  Component: React.ComponentType<Props>,
+export function withErrorBoundary<T>(
+  Component: React.ComponentType<T>,
  boundaryName: string
 ) {
-  return (props: Props): any => {
-    return (
-      <ErrorBoundary boundaryName={boundaryName}>
-        <Component {...props} />
-      </ErrorBoundary>
-    );
-  };
+  return (props: T) => (
+    <ErrorBoundary boundaryName={boundaryName}>
+      <Component {...props} />
+    </ErrorBoundary>
+  );
 }
@@ -1,6 +1,6 @@
 import { useClientLayoutEffect } from "@navikt/ds-react";
 import throttle from "lodash/throttle";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";

 export const useToc = ({ changedState }: { changedState: any }) => {
  const [toc, setToc] = useState<
@@ -35,7 +35,7 @@ export const useToc = ({ changedState }: { changedState: any }) => {
            y.contains(x)
          )
      );
-      const toc: {
+      const newToc: {
        heading: string;
        id: string;
        lvl3: { heading: string; id: string }[];
@@ -43,17 +43,17 @@ export const useToc = ({ changedState }: { changedState: any }) => {
      for (const x in filtered) {
        if (!filtered[x]?.id) continue;
        filtered[x].tagName === "H2"
-          ? toc.push({
+          ? newToc.push({
              heading: filtered[x].textContent,
              id: decodeURI(filtered[x].id),
              lvl3: [],
            })
-          : toc[toc.length - 1].lvl3.push({
+          : newToc[newToc.length - 1].lvl3.push({
              heading: filtered[x].textContent,
              id: decodeURI(filtered[x].id),
            });
      }
-      setToc([...toc]);
+      setToc([...newToc]);
    }, 150);

    return () => clearTimeout(time);
@@ -77,8 +77,8 @@ export const useToc = ({ changedState }: { changedState: any }) => {
        }
        if (x?.lvl3) {
          for (const y of x.lvl3) {
-            const el = document.getElementById(y.id);
-            if (validPick(el)) {
+            const el2 = document.getElementById(y.id);
+            if (validPick(el2)) {
              activeSub = y.id;
            }
          }
@@ -5,14 +5,15 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 });

 const cdnUrl = "https://cdn.nav.no";
+const hotjarUrl = "https://*.hotjar.com";

 const ContentSecurityPolicy = `
  default-src 'self' 'unsafe-inline' ${cdnUrl};
-  font-src 'self' ${cdnUrl} data:;
-  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data: ${cdnUrl};
-  script-src 'self' ${cdnUrl} https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
-  style-src 'self' ${cdnUrl} 'unsafe-inline';
-  connect-src 'self' ${cdnUrl} 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;
+  font-src 'self' ${cdnUrl} ${hotjarUrl} data:;
+  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://*.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;
@@ -53,7 +54,7 @@ const useCdn = process.env.USE_CDN_ASSETS === "true";

 const config = () =>
  withBundleAnalyzer({
-    transpilePackages: ["@navikt/ds-tokens"],
+    transpilePackages: ["@navikt/ds-tokens", "react-hotjar"],
    publicRuntimeConfig: {
      NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
    },
@@ -30,28 +30,29 @@
  "dependencies": {
    "@amplitude/analytics-browser": "^2.2.3",
    "@portabletext/react": "^3.0.7",
-    "@sanity/client": "^6.4.6",
+    "@sanity/client": "^6.6.0",
    "@sanity/code-input": "4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/image-url": "1.0.2",
    "@sanity/table": "1.0.1",
-    "@sanity/vision": "3.16.2",
+    "@sanity/vision": "3.18.0",
    "boring-avatars": "1.10.1",
    "clsx": "^1.2.1",
    "codesandbox": "^2.2.3",
    "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.4.6",
+    "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",
    "react-dom": "^18.0.0",
+    "react-hotjar": "^6.1.0",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.16.2",
-    "sanity-plugin-asset-source-unsplash": "^1.1.0",
+    "sanity": "3.18.0",
+    "sanity-plugin-asset-source-unsplash": "^1.1.1",
    "sanity-plugin-media": "^2.2.2",
    "sharp": "0.32.5",
    "styled-components": "^6.0.0",
@@ -62,11 +63,11 @@
  "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.16.2",
-    "@sanity/schema": "^3.16.2",
+    "@sanity/block-tools": "^3.18.0",
+    "@sanity/schema": "^3.18.0",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.3.0",
    "@types/jest": "^29.0.0",
@@ -1,11 +1,12 @@
-import { AppProps } from "next/app";
 import { BaseSEO } from "components/website-modules/seo/BaseSEO";
 import {
  initAmplitude,
  usePageView,
 } from "components/website-modules/utils/amplitude";
 import { useScrollToHashOnPageLoad } from "components/website-modules/utils/util";
+import { AppProps } from "next/app";
 import { useEffect } from "react";
+import { hotjar } from "react-hotjar";
 import { IdContext } from "../components/website-modules/utils/contexts/id-context";
 import "../styles/index.css";

@@ -18,12 +19,13 @@ function App({ Component, pageProps, router }: AppProps) {
  useEffect(() => {
    window.location.host === "design.nav.no" &&
      window.location.replace(`http://aksel.nav.no`);
+
+    hotjar.initialize(148751, 6);
  }, []);

  return (
    <>
      <BaseSEO path={router.asPath} />
-
      <IdContext.Provider value={{ id: pageProps?.id ?? pageProps?.page?._id }}>
        <Component {...pageProps} />
      </IdContext.Provider>
@@ -23,8 +23,8 @@ const initialSelectedOptions = ["Norge"];

 export const Example = () => {
  const [value, setValue] = useState("");
-  const mockPersistUserAddedValues = (value, isSelected) => {
-    console.log("custom option", { value, isSelected });
+  const mockPersistUserAddedValues = (option, isSelected) => {
+    console.log("custom option", { option, isSelected });
  };

  const [selectedOptions, setSelectedOptions] = useState(
@@ -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 = ({
@@ -6,11 +6,7 @@ const Example = () => {
  const [val, setVal] = useState("20");

  return (
-    <RadioGroup
-      legend="Velg din aldersgruppe."
-      onChange={(val: any) => setVal(val)}
-      value={val}
-    >
+    <RadioGroup legend="Velg din aldersgruppe." onChange={setVal} value={val}>
      <Radio value="10">10-20 år</Radio>
      <Radio value="20">21-45 år</Radio>
      <Radio value="40">46-80 år</Radio>
@@ -20,20 +20,18 @@ const Example = () => {
    );
  };

-  let sortData = data;
+  const comparator = (a, b, orderBy) => {
+    if (b[orderBy] < a[orderBy] || b[orderBy] === undefined) {
+      return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+      return 1;
+    }
+    return 0;
+  };

-  sortData = sortData.slice().sort((a, b) => {
+  const sortedData = data.slice().sort((a, b) => {
    if (sort) {
-      const comparator = (a, b, orderBy) => {
-        if (b[orderBy] < a[orderBy] || b[orderBy] === undefined) {
-          return -1;
-        }
-        if (b[orderBy] > a[orderBy]) {
-          return 1;
-        }
-        return 0;
-      };
-
      return sort.direction === "ascending"
        ? comparator(b, a, sort.orderBy)
        : comparator(a, b, sort.orderBy);
@@ -56,7 +54,7 @@ const Example = () => {
          </Table.Row>
        </Table.Header>
        <Table.Body>
-          {sortData.map(({ name, fnr, start }, i) => {
+          {sortedData.map(({ name, fnr, start }, i) => {
            return (
              <Table.Row key={i + fnr}>
                <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
@@ -26,7 +26,7 @@ type PageProps = NextPageT<{
  articles: Array<ArticleT>;
 }>;

-export const query = (boundry = "") => {
+const getQuery = (boundry = "") => {
  return `{
    "articles": *[_type == "aksel_artikkel" && defined(publishedAt)] | order(publishedAt desc)${boundry} {
      _id,
@@ -50,7 +50,7 @@ export const getStaticProps: GetStaticProps = async ({
 }: {
  preview?: boolean;
 }): Promise<PageProps> => {
-  const { articles } = await getClient().fetch(query("[0..21]"));
+  const { articles } = await getClient().fetch(getQuery("[0..21]"));

  return {
    props: {
@@ -135,14 +135,15 @@ const Forside = ({ page, tema, blocks }: PageProps["props"]) => {
  }, []);

  const validatedTema = tema
-    .filter((t) => {
-      return (
+    .filter(
+      (t) =>
        t?.title &&
        t?.slug &&
        t?.pictogram &&
-        t?.seksjoner.find((s) => !!s?.sider.find((s: any) => s?._ref))
-      );
-    })
+        t?.seksjoner.some((seksjon) =>
+          seksjon?.sider.some((side: any) => side?._ref)
+        )
+    )
    .sort((a, b) => a.title.localeCompare(b.title));

  return (
@@ -24,9 +24,9 @@ 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 { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
-import { GetStaticProps } from "next/types";

 type PageProps = NextPageT<{
  page: AkselLandingPageDocT;
@@ -1,9 +1,9 @@
-import fs from "fs";
-import { JSDOM } from "jsdom";
 import { htmlToBlocks } from "@sanity/block-tools";
 import { Schema } from "@sanity/schema";
-import showdown from "showdown";
 import dotenv from "dotenv";
+import fs from "fs";
+import { JSDOM } from "jsdom";
+import showdown from "showdown";

 import { noCdnClient } from "../sanity/interface/client.server";

@@ -44,7 +44,7 @@ export async function main() {
    .fields.find((field) => field.name === "body").type;

  const blocks = htmlToBlocks(html, blockContentType, {
-    parseHtml: (html) => new JSDOM(html).window.document,
+    parseHtml: (htmlStr) => new JSDOM(htmlStr).window.document,
  });
  blocks.shift();

@@ -1,7 +1,7 @@
 import dotenv from "dotenv";

-import tokens from "@navikt/ds-tokens/docs.json";
 import core from "@navikt/ds-css/tokens.json";
+import tokens from "@navikt/ds-tokens/docs.json";
 import { noCdnClient } from "../sanity/interface/client.server";

 dotenv.config();
@@ -12,14 +12,14 @@ const allTokens: { title: string; kategori: string }[] = [
 ];

 export const updateTokens = async () => {
-  const token = process.env.SANITY_WRITE_KEY;
+  const writeKey = process.env.SANITY_WRITE_KEY;

  // this is our transactional client, it won't push anything until we say .commit() later
-  const transactionClient = noCdnClient(token).transaction();
+  const transactionClient = noCdnClient(writeKey).transaction();

  // first let's fetch the current state from sanity,
  // So that we can delete old/changed tokens
-  const remoteTokens = await noCdnClient(token).fetch(
+  const remoteTokens = await noCdnClient(writeKey).fetch(
    `*[_type == "token_kategori"]`
  );

@@ -44,7 +44,7 @@ Promise.all([
    ...esmvnext,
    ...cjsvnext,
    ...akselIconsSrc,
-  ].filter((path) => !path.includes("node_modules"));
+  ].filter((folder) => !folder.includes("node_modules"));

  folders.forEach((folder) => {
    console.log(`Deleting folder ${folder}`);
@@ -65,18 +65,18 @@ const processNode = (node: Root) => {
      const parent = ancestors.findLast(
        (ancestor) => ancestor.type === "paragraph"
      ) as Paragraph;
-      visit(parent, (node, index, parent) => {
+      visit(parent, (node2, index, parent2) => {
        if (
-          node.type === "link" ||
-          (node.type === "text" && node.value === " Thanks ")
+          node2.type === "link" ||
+          (node2.type === "text" && node2.value === " Thanks ")
        ) {
-          if (parent && index !== null) {
-            parent.children.splice(index, 1);
+          if (parent2 && index !== null) {
+            parent2.children.splice(index, 1);
            return [CONTINUE, index];
          }
        }
-        if (node.type === "text" && node.value.startsWith("! -")) {
-          node.value = node.value.replace(/! (- )+/, "");
+        if (node2.type === "text" && node2.value.startsWith("! -")) {
+          node2.value = node2.value.replace(/! (- )+/, "");
          return;
        }
      });
@@ -113,10 +113,10 @@ const parseMarkdownFiles = async (filePaths: string[]): Promise<Changelog> => {
        const indexWithinList = parent.children.findIndex((child: ListItem) => {
          return child.children.some((grandchild) => {
            let found = false;
-            visit(grandchild, (node) => {
+            visit(grandchild, (node2) => {
              if (
-                node.type === "text" &&
-                node.value.startsWith("Updated dependencies")
+                node2.type === "text" &&
+                node2.value.startsWith("Updated dependencies")
              ) {
                found = true;
                return EXIT;
@@ -229,6 +229,6 @@ const createMainChangelog = async (changelog: Changelog): Promise<string> => {
 const changelogFiles = getChangelogs("./@navikt");
 console.log("processing the following markdown files:", changelogFiles);
 const changelogJSON = await parseMarkdownFiles(changelogFiles);
-const changelog = await createMainChangelog(changelogJSON);
-writeFileSync("CHANGELOG.md", changelog);
+const changelogStr = await createMainChangelog(changelogJSON);
+writeFileSync("CHANGELOG.md", changelogStr);
 console.log("wrote to CHANGELOG.md");
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
github-actions[bot]andgithub-actions[bot]	6c29fa83dd	Version Packages (#2381 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-17 16:30:38 +02:00
Ken	a6b6733861	🎨 Mindre Helptext variant (#2376 ) * 🎨 Mindre Helptext variant * 🎨 small-variant er nå default helptext * 💄 Larger helptext circle stroke-width * Update .changeset/wild-rice-arrive.md	2023-10-17 16:23:14 +02:00
Halvor Haugan	3e54bd4f43	Ny eslint-regel no-shadow (#2377 )	2023-10-17 16:05:22 +02:00
Mathias S. MüllerandKen	ec205fbc5f	🐛 Fiks skrivefeil på size-klasse på form-komponenter (#2372 ) * Fiks skrivefeil på size-klasse på select-komponent * Fiks skrivefeil på size-klasse på form-komponenter * 📝 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-10-17 15:11:41 +02:00
Ken	d8a4097c82	💄 Endring av tekstfarge endrer også chevron nå (#2383 )	2023-10-17 14:55:53 +02:00
KenandHalvor Haugan	3a3a53f823	[Aksel.nav.no] Nextjs logging av getStaticProps (#2384 ) * 🎨 Caching in dev * 🎨 Logging getstaticprops * 🐛 Endret tilbake til gammel caching * Update aksel.nav.no/website/pages/komponenter/index.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-10-17 13:09:02 +02:00
Halvor Haugan	3d3e907608	Ny spacing token på 0.375rem (#2370 )	2023-10-17 09:13:39 +02:00
Ken	986d0e9740	[aksel.nav.no] ⬆️ Oppdatert sanity (#2379 ) * ⬆️ Oppdatert sanity * ⬆️ yarnlock	2023-10-16 18:58:28 +02:00
dependabot[bot]	50bb7d4ff8	⬆️ Bump @babel/traverse from 7.23.0 to 7.23.2 (#2380 ) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.23.0 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-16 18:51:53 +02:00
github-actions[bot]andgithub-actions[bot]	c2151e0514	Version Packages (#2378 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-16 16:19:27 +02:00
Ken	4bc4dea85f	🐛 Fikset tastaturnavigasjon i monthpicker (#2374 )	2023-10-16 14:33:23 +02:00
github-actions[bot]andgithub-actions[bot]	6b2547cec5	Version Packages (#2375 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-16 11:20:56 +02:00
Ken	5d4a46d1a8	[aksel.nav.no] Added hotjar (#2362 ) * 🔊 Added hotjar * ⬆️ Bump yarn lock	2023-10-16 10:29:40 +02:00
Ken	cb8c7cabee	🐛 Fikset hover på radio ved bruk av readonly (#2363 )	2023-10-16 09:36:11 +02:00