Version Packages (#3206 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
List: ✨ New size 'large' (#3207 )
2026-10-15 18:22:02 +00:00 · 2024-10-08 11:50:48 +02:00 · 2024-10-08 11:30:47 +02:00 · 2024-10-08 10:18:51 +02:00 · 2024-10-08 10:16:17 +02:00 · 2024-10-08 10:06:43 +02:00
96 changed files with 651 additions and 819 deletions
@@ -34,6 +34,9 @@ jobs:
      - name: Install dependencies
        run: yarn

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -32,6 +32,9 @@ jobs:
          yarn boot
          yarn docgen

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Update sanity sync
        env:
          SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
@@ -68,6 +71,9 @@ jobs:
      - name: Tests
        run: yarn workspace website test

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -23,6 +23,9 @@ jobs:
      - name: Install dependencies
        run: cd aksel.nav.no/website && yarn

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Export dataset
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -31,6 +31,9 @@ jobs:
        run: |
          yarn boot

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 7.2.0
+
 ## 7.1.2

 ## 7.1.1
@@ -1,6 +1,7 @@
 const file_key = "wEdyFjCQSBR3U7FvrMbPXa";

 export const fetchIcons = async () => {
+  console.info("Fetching new icons from Figma...");
  const data = await fetch(
    `https://api.figma.com/v1/files/${file_key}/components`,
    {
@@ -15,6 +16,10 @@ export const fetchIcons = async () => {
      throw e.message;
    });

+  if (data?.err) {
+    throw new Error(data.err);
+  }
+
  if (!data?.meta?.components || data?.meta?.components.length === 0) {
    throw new Error("Fant ingen publiserte ikoner");
  }
@@ -1,4 +1,3 @@
-import { config } from "dotenv";
 import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
 import { resolve } from "path";
 import { fetchDownloadUrls, fetchIcon, fetchIcons } from "./fetch-icons.mjs";
@@ -6,7 +5,6 @@ import { resolveName } from "./icon-name.mjs";
 import { makeConfig } from "./make-configs.mjs";
 import { paginate } from "./paginate.mjs";

-config();
 /* https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0 */

 const iconFolder = "./icons";
@@ -16,6 +14,7 @@ if (!process.env.FIGMA_TOKEN) {
 }

 async function main() {
+  console.info("Started icon-update from Figma");
  let icons = await fetchIcons();

  const totalIcons = icons.length;
@@ -109,7 +109,7 @@ const App = () => {
        icon.removeEventListener("dragend", dragEvent);
      }
    };
-  }, [categories]);
+  }, []);

  return (
    <main tabIndex={-1} className="wrapper">
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.1.2",
+  "version": "7.2.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -62,7 +62,7 @@
    "update-metadata": "node config/metadata.js",
    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
-    "fetch-new:icons": "node config/figma/index.mjs",
+    "fetch-new:icons": "tsx --env-file=.env config/figma/index.mjs",
    "zip:icons": "node config/zip.js",
    "test": "vitest run",
    "test:watch": "vitest watch"
@@ -73,7 +73,6 @@
    "concurrently": "7.2.1",
    "copyfiles": "^2.4.1",
    "cross-zip-cli": "1.0.0",
-    "dotenv": "^10.0.0",
    "fast-glob": "3.2.11",
    "hast-util-select": "5.0.5",
    "js-yaml": "^4.1.0",
@@ -83,6 +82,7 @@
    "react": "^18.0.0",
    "rehype-parse": "8.0.4",
    "tsc-alias": "1.8.8",
+    "tsx": "^4.7.1",
    "typescript": "^5.1.6",
    "unified": "10.1.2",
    "vitest": "^1.2.2"
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 7.2.0
+
 ## 7.1.2

 ## 7.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "7.1.2",
+  "version": "7.2.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^7.1.2",
-    "@navikt/ds-tokens": "^7.1.2",
+    "@navikt/ds-css": "^7.2.0",
+    "@navikt/ds-tokens": "^7.2.0",
    "concurrently": "7.2.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 7.2.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.2.0
+
 ## 7.1.2

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

+## 7.2.0
+
 ## 7.1.2

 ### Patch Changes
@@ -31,7 +31,6 @@
@media (forced-colors: active) {
  .navds-copybutton {
    background-color: ButtonFace;
-    border-color: ButtonText;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
@@ -10,7 +10,6 @@
@media (forced-colors: active) {
  .navds-internalheader {
    background-color: ButtonFace;
-    border-color: ButtonText;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "7.1.2",
+  "version": "7.2.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.1.2",
+    "@navikt/ds-tokens": "^7.2.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -19,7 +19,6 @@
@media (forced-colors: active) {
  .navds-read-more__button {
    background-color: ButtonFace;
-    border-color: ButtonText;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
@@ -1,5 +1,21 @@
 # @navikt/ds-react

+## 7.2.0
+
+### Minor Changes
+
+- FileUpload: :boom: Remove UNSAFE-prefix ([#3205](https://github.com/navikt/aksel/pull/3205))
+
+- List: :sparkles: New size 'large' ([#3207](https://github.com/navikt/aksel/pull/3207))
+
+### Patch Changes
+
+- Performance: :zap: Optimized memoization for rerendring in some components. ([#3197](https://github.com/navikt/aksel/pull/3197))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.2.0
+  - @navikt/aksel-icons@7.2.0
+
 ## 7.1.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.1.2",
+  "version": "7.2.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -583,7 +583,7 @@
    "./package.json": "./package.json"
  },
  "scripts": {
-    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
+    "docgen": "yarn tsx ../../../scripts/docgen.ts",
    "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
    "clean": "rimraf cjs esm",
    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
@@ -594,8 +594,8 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.1.2",
-    "@navikt/ds-tokens": "^7.1.2",
+    "@navikt/aksel-icons": "^7.2.0",
+    "@navikt/ds-tokens": "^7.2.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.0"
@@ -614,8 +614,8 @@
    "react-router-dom": "^6.3.0",
    "rimraf": "6.0.1",
    "swr": "^1.1.2",
-    "ts-node": "^10.9.1",
    "tsc-alias": "1.8.8",
+    "tsx": "^4.19.1",
    "typescript": "^5.1.6",
    "vitest": "^1.2.2"
  },
@@ -73,40 +73,35 @@ export const Default: StoryObj<DefaultStoryProps> = {
          locale={props.locale}
          disableWeekends={props.disableWeekends}
        >
-          {!props.standalone && (
-            <>
-              {props.inputfield && props.mode !== "multiple" ? (
-                <>
-                  {props.mode === "range" ? (
-                    <div style={{ display: "flex", gap: "1rem" }}>
-                      <DatePicker.Input
-                        label="Fra"
-                        size={props?.size}
-                        {...rangeCtx.fromInputProps}
-                      />
-                      <DatePicker.Input
-                        label="Til"
-                        size={props?.size}
-                        {...rangeCtx.toInputProps}
-                      />
-                    </div>
-                  ) : (
-                    <>
-                      <DatePicker.Input
-                        label="Velg dato"
-                        size={props?.size}
-                        {...singleCtx.inputProps}
-                      />
-                    </>
-                  )}
-                </>
-              ) : (
-                <Button onClick={() => setOpen((x) => !x)}>
-                  Åpne datovelger
-                </Button>
-              )}
-            </>
-          )}
+          {!props.standalone &&
+            (props.inputfield && props.mode !== "multiple" ? (
+              <>
+                {props.mode === "range" ? (
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <DatePicker.Input
+                      label="Fra"
+                      size={props?.size}
+                      {...rangeCtx.fromInputProps}
+                    />
+                    <DatePicker.Input
+                      label="Til"
+                      size={props?.size}
+                      {...rangeCtx.toInputProps}
+                    />
+                  </div>
+                ) : (
+                  <DatePicker.Input
+                    label="Velg dato"
+                    size={props?.size}
+                    {...singleCtx.inputProps}
+                  />
+                )}
+              </>
+            ) : (
+              <Button onClick={() => setOpen((x) => !x)}>
+                Åpne datovelger
+              </Button>
+            ))}
        </Comp>
      </div>
    );
@@ -54,6 +54,7 @@ const FilteredOptions = () => {
      )}

      {shouldRenderFilteredOptionsList && (
+        /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
        <ul
          ref={setFilteredOptionsRef}
          role="listbox"
@@ -99,7 +99,7 @@ const InputProvider = ({ children, value: props }: Props) => {
      setInternalValue("");
      setSearchTerm("");
    },
-    [externalOnChange, onClear, setInternalValue],
+    [externalOnChange, onClear],
  );

  const focusInput = useCallback(() => {
@@ -105,9 +105,10 @@ const SelectedOptionsProvider = ({
    (!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit) ||
    (!isMultiSelect && selectedOptions.length > 0);

+  // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this effect when selectedOptions changes to match the view with the selected options.
  useEffect(() => {
    setHideCaret(isLimitReached);
-  }, [selectedOptions, setHideCaret, isLimitReached]);
+  }, [isLimitReached, selectedOptions, setHideCaret]);

  const toggleOption = useCallback(
    (
@@ -35,7 +35,7 @@ const CustomOptionsProvider = ({
      );
      focusInput();
    },
-    [focusInput, setCustomOptions],
+    [focusInput],
  );

  const addCustomOption = useCallback(
@@ -47,7 +47,7 @@ const CustomOptionsProvider = ({
      }
      focusInput();
    },
-    [focusInput, isMultiSelect, setCustomOptions],
+    [focusInput, isMultiSelect],
  );

  const customOptionsState = {
@@ -2,11 +2,7 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { fireEvent, within } from "@storybook/test";
 import React from "react";
 import { ImageIcon } from "@navikt/aksel-icons";
-import {
-  type FileObject,
-  UNSAFE_FileUpload as FileUpload,
-  type FilesPartitioned,
-} from ".";
+import { type FileObject, FileUpload, type FilesPartitioned } from ".";

 const meta: Meta<typeof FileUpload.Dropzone> = {
  title: "ds-react/FileUpload/Dropzone",
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
-import { FileItem, UNSAFE_FileUpload as FileUpload } from ".";
+import { FileItem, FileUpload } from ".";
 import { VStack } from "../../layout/stack";

 const meta: Meta<typeof FileUpload.Item> = {
@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 import { UploadIcon } from "@navikt/aksel-icons";
-import { UNSAFE_FileUpload as FileUpload, FileUploadItemProps } from ".";
+import { FileUpload, FileUploadItemProps } from ".";
 import { Alert } from "../../alert";
 import { Button } from "../../button";
 import { VStack } from "../../layout/stack";
@@ -1,9 +1,9 @@
 "use client";
-export { default as UNSAFE_FileUpload } from "./FileUpload";
-export { default as UNSAFE_FileUploadDropzone } from "./parts/dropzone/Dropzone";
+export { default as FileUpload } from "./FileUpload";
+export { default as FileUploadDropzone } from "./parts/dropzone/Dropzone";
 export { type FileUploadDropzoneProps } from "./parts/dropzone/dropzone.types";
 export {
-  default as UNSAFE_FileUploadTrigger,
+  default as FileUploadTrigger,
  type FileUploadTriggerProps,
 } from "./parts/Trigger";
 export {
@@ -15,7 +15,7 @@ export {
  type FileRejectionReason,
 } from "./FileUpload.types";
 export {
-  default as UNSAFE_FileUploadItem,
+  default as FileUploadItem,
  type FileUploadItemProps,
 } from "./parts/item/Item";
 export { type FileItem, type FileMetadata } from "./parts/item/Item.types";
@@ -127,7 +127,7 @@ export {
 export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary";
 export { Fieldset, type FieldsetProps } from "./form/fieldset";
 export {
-  UNSAFE_FileUpload,
+  FileUpload,
  type FileAccepted,
  type FileItem,
  type FileMetadata,
@@ -1,11 +1,20 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyLong, BodyShort, Heading } from "../typography";
+import { BodyLong, BodyShort, Heading, HeadingProps } from "../typography";
 import { ListItem } from "./ListItem";
 import { ListContext } from "./context";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./types";

+const headingSizeMap: Record<
+  Exclude<ListProps["size"], undefined>,
+  HeadingProps["size"]
+> = {
+  small: "xsmall",
+  medium: "small",
+  large: "medium",
+};
+
 export interface ListComponent
  extends React.ForwardRefExoticComponent<
    ListProps & React.RefAttributes<HTMLDivElement>
@@ -58,15 +67,12 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
        <BodyLong
          as="div"
          {...rest}
-          size={size}
+          size={listSize}
          ref={ref}
          className={cl("navds-list", `navds-list--${listSize}`, className)}
        >
          {title && (
-            <Heading
-              size={listSize === "medium" ? "small" : "xsmall"}
-              as={headingTag}
-            >
+            <Heading size={headingSizeMap[listSize]} as={headingTag}>
              {title}
            </Heading>
          )}
@@ -64,7 +64,7 @@ export const Default: Story = {
    description: "",
  },
  argTypes: {
-    size: { control: { type: "radio" }, options: ["small", "medium"] },
+    size: { control: { type: "radio" }, options: ["small", "medium", "large"] },
    as: { control: { type: "radio" }, options: ["ul", "ol"] },
  },
 };
@@ -137,6 +137,21 @@ export const SizesUl: Story = {
  render: () => {
    return (
      <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+        >
+          <List.Item title="Lorem Ipsum Dolor Sit Amet">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item title="Consectetur Adipiscing Elit">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
        <List
          title="Medium list"
          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -176,6 +191,22 @@ export const SizesOl: Story = {
  render: () => {
    return (
      <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+          as="ol"
+        >
+          <List.Item title="Lorem Ipsum Dolor Sit Amet">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item title="Consectetur Adipiscing Elit">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
        <List
          title="Medium list"
          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -217,6 +248,27 @@ export const SizesIcons: Story = {
  render: () => {
    return (
      <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+        >
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Lorem Ipsum Dolor Sit Amet"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Consectetur Adipiscing Elit"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item icon={<HeadHeartIcon aria-hidden />}>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
        <List
          title="Medium list"
          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -328,6 +380,33 @@ export const Spacing: Story = {
  render: () => {
    return (
      <>
+        <h2>Large</h2>
+        <BodyLong size="large" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+        <List size="large">
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+        </List>
+        <BodyLong size="large" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
        <h2>Medium</h2>
        <BodyLong spacing>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
@@ -22,7 +22,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   * Changes margin-block on list and font size on items.
   * @default "medium"
   */
-  size?: "medium" | "small";
+  size?: "small" | "medium" | "large";
 }

 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
@@ -127,7 +127,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
      // We have to use JS because it doesn't work to set it with a prop (React bug?)
      // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
      if (modalRef.current && portalNode) modalRef.current.autofocus = true;
-    }, [modalRef, portalNode]);
+    }, [portalNode]);

    useEffect(() => {
      // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -140,7 +140,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
          modalRef.current.close();
        }
      }
-    }, [modalRef, portalNode, open]);
+    }, [portalNode, open]);

    useBodyScrollLock(modalRef, portalNode, isNested);

@@ -337,6 +337,8 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     * If `disableOutsidePointerEvents` is true,
     * we want to disable pointer events on the body when the first layer is opened.
     */
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Every time the descendants change, we want to update the body pointer events since we might have added or removed a layer.
    useEffect(() => {
      if (!node || !enabled || !disableOutsidePointerEvents) return;

@@ -362,6 +364,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
    /**
     * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM
     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this on unmount, including every time the node updates to make sure we don't lock the application behind pointer-events: none.
    useEffect(() => {
      return () => descendants.values().forEach((x) => x.forceUpdate());
    }, [descendants, node]);
@@ -107,6 +107,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
    }, [simulated?.seconds]);

    return (
+      /* biome-ignore lint/a11y/useFocusableInteractive: Progressbar is not interactive. */
      <div
        ref={ref}
        className={cl(
@@ -121,6 +122,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
            ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated?.seconds} sekunder`
            : `${Math.round(value)} av ${Math.round(valueMax)}`
        }
+        // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed
        role="progressbar"
        aria-labelledby={ariaLabelledBy}
        aria-label={ariaLabel}
@@ -74,37 +74,36 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
  const animationClassesTimeoutID = useRef<Timeout>();
  const timeoutID = useRef<Timeout>();

+  const initialHeight = useRef<Height>(height);
+  const initialOverflow = useRef<Overflow>("visible");
+
  const duration = prefersReducedMotion ? 0 : userDuration;

-  let initHeight: Height = height;
-  let initOverflow: Overflow = "visible";
-
-  if (typeof initHeight === "number") {
+  if (typeof initialHeight.current === "number") {
    // Reset negative height to 0
    if (typeof height !== "string") {
-      initHeight = height < 0 ? 0 : height;
+      initialHeight.current = height < 0 ? 0 : height;
    }
-    initOverflow = "hidden";
-  } else if (isPercentage(initHeight)) {
+    initialOverflow.current = "hidden";
+  } else if (isPercentage(initialHeight.current)) {
    // If value is string "0%" make sure we convert it to number 0
-    initHeight = height === "0%" ? 0 : height;
-    initOverflow = "hidden";
+    initialHeight.current = height === "0%" ? 0 : height;
+    initialOverflow.current = "hidden";
  }

-  const [currentHeight, setCurrentHeight] = useState<Height>(initHeight);
-  const [overflow, setOverflow] = useState<Overflow>(initOverflow);
+  const [currentHeight, setCurrentHeight] = useState<Height>(
+    initialHeight.current,
+  );
+  const [overflow, setOverflow] = useState<Overflow>(initialOverflow.current);
  const [useTransitions, setUseTransitions] = useState<boolean>(false);

-  // ------------------ Did mount
  useEffect(() => {
    // Hide content if height is 0 (to prevent tabbing into it)
-    hideContent(contentElement.current, currentHeight);
-
-    // This should be explicitly run only on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    hideContent(contentElement.current, initialHeight.current);
  }, []);

  // ------------------ Height update
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This should be explicitly run only on height change
  useEffect(() => {
    if (height !== prevHeight.current && contentElement.current) {
      showContent(contentElement.current, prevHeight.current);
@@ -98,61 +98,6 @@ export const SizeSmall = () => <TableComponent size="small" />;

 export const Buttons = () => <TableComponent size="small" button />;

-export const WithDivs = () => {
-  return (
-    <div className="navds-table" role="table">
-      <div className="navds-table__header" role="rowgroup">
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__header-cell" role="columnheader">
-            Fornavn
-          </div>
-          <div className="navds-table__header-cell" role="columnheader">
-            Etternavn
-          </div>
-          <div className="navds-table__header-cell" role="columnheader">
-            Rolle
-          </div>
-        </div>
-      </div>
-      <div className="navds-table__body" role="rowgroup">
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__data-cell" role="cell">
-            Jean-Luc
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Picard
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Kaptein
-          </div>
-        </div>
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__data-cell" role="cell">
-            William
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Riker
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Kommandør
-          </div>
-        </div>
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__data-cell" role="cell">
-            Geordi
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            La Forge
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Sjefsingeniør
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
  const useToggleList = (initialState) => {
    const [list, setList] = useState(initialState);
@@ -259,10 +204,6 @@ export const Chromatic = {
        <h3>With Buttons</h3>
        <Buttons />
      </div>
-      <div>
-        <h3>Custom with divs</h3>
-        <WithDivs />
-      </div>
      <div>
        <h3>Selection</h3>
        <Selection />
@@ -205,6 +205,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      syncHeight();
    });

+    // biome-ignore lint/correctness/useExhaustiveDependencies: Since value is an external prop, we want to reset the renders on every time it changes, even when it is undefined or empty.
    useEffect(() => {
      renders.current = 0;
    }, [value]);
@@ -43,8 +43,9 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
  const Provider = forwardRef<unknown, ProviderProps<T>>(
    ({ children, ...context }, ref) => {
      // Only re-memoize when prop values change
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      const value = React.useMemo(() => context, Object.values(context)) as T;
+
+      // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
+      const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps

      return (
        <Context.Provider value={ref ? { ...value, ref } : value}>
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Box } from "../../../layout/box";
 import { HStack } from "../../../layout/stack";
 import { createDescendantContext } from "./useDescendant";

@@ -16,12 +15,16 @@ const [
  _useDescendantsContext,
  useDescendants,
  useDescendant,
-] = createDescendantContext<HTMLDivElement, { value?: string }>();
+] = createDescendantContext<
+  HTMLButtonElement | HTMLInputElement,
+  { value?: string }
+>();

 function Select({ children }: { children?: React.ReactNode }) {
  const descendants = useDescendants();
  const count = descendants.count();

+  // biome-ignore lint/correctness/useExhaustiveDependencies: We want count to be a trigger for focusing the last descendant here.
  React.useEffect(() => {
    descendants.last()?.node.focus();
  }, [descendants, count]);
@@ -37,9 +40,8 @@ function Option({ value, disabled }: { value?: string; disabled?: boolean }) {
  });

  return (
-    <Box
+    <button
      ref={register}
-      role="button"
      tabIndex={0}
      data-value={value}
      onKeyDown={(event) => {
@@ -51,7 +53,7 @@ function Option({ value, disabled }: { value?: string; disabled?: boolean }) {
      }}
    >
      Option {index + 1}
-    </Box>
+    </button>
  );
 }

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 7.2.0
+
 ## 7.1.2

 ## 7.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "7.1.2",
+  "version": "7.2.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -15,7 +15,7 @@
    "tailwind.config.d.ts"
  ],
  "scripts": {
-    "build": "ts-node ./src",
+    "build": "yarn tsx ./src",
    "test": "vitest run",
    "test:watch": "vitest watch"
  },
@@ -25,11 +25,11 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.1.2",
+    "@navikt/ds-tokens": "^7.2.0",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.19.1",
    "typescript": "^5.1.6",
    "vitest": "^1.2.2"
  },
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 7.2.0
+
 ## 7.1.2

 ## 7.1.1
@@ -1,10 +1,10 @@
-import { contrastTokenConfig } from "./tokens/contrast";
 import { globalColorDarkModeConfig } from "./tokens/global-dark";
 import { globalColorLightModeConfig } from "./tokens/global-light";
 import { radiusTokenConfig } from "./tokens/radius";
 import { semanticTokenConfig } from "./tokens/semantic";
 import { semanticTokensForAllRolesConfig } from "./tokens/semantic-roles";
 import { spacingTokenConfig } from "./tokens/spacing";
+import { textContrastTokenConfig } from "./tokens/text-contrast";
 import { mergeConfigs, tokensWithPrefix } from "./util";

 /**
@@ -17,7 +17,7 @@ export const lightModeTokens = () => {
  return tokensWithPrefix(
    mergeConfigs([
      semanticTokensForAllRolesConfig(),
-      contrastTokenConfig(),
+      textContrastTokenConfig(),
      semanticTokenConfig("light"),
      globalColorLightModeConfig,
    ]),
@@ -32,7 +32,7 @@ export const darkModeTokens = () => {
  return tokensWithPrefix(
    mergeConfigs([
      semanticTokensForAllRolesConfig(),
-      contrastTokenConfig(),
+      textContrastTokenConfig(),
      semanticTokenConfig("dark"),
      globalColorDarkModeConfig,
    ]),
@@ -50,15 +50,22 @@ export const getTokensForCollection = async (
     */
    return reference.length > 0
      ? prepareToken(
-          { ...token, alias: createTokenName(reference[0]) },
+          {
+            ...(token as TransformedTokenWithScopes),
+            alias: createTokenName(reference[0]),
+          },
          dictionary,
        )
-      : prepareToken(token, dictionary);
+      : prepareToken(token as TransformedTokenWithScopes, dictionary);
  });
 };

+type TransformedTokenWithScopes = TransformedToken & {
+  scopes: StyleDictionaryToken<TokenTypes>["scopes"];
+};
+
 function prepareToken(
-  token: TransformedToken,
+  token: TransformedTokenWithScopes,
  dictionary: Dictionary,
 ): FigmaToken {
  const formatter = createPropertyFormatter({
@@ -109,35 +116,34 @@ export function figmaValue(token: TransformedToken): string | number {
 * Scopes allows us to define where in Figma the token can be used.
 * @see https://www.figma.com/plugin-docs/api/VariableScope
 */
-function figmaSettings(token: TransformedToken): {
+function figmaSettings(token: TransformedTokenWithScopes): {
  figmaType: VariableResolvedDataType;
  scopes: VariableScope[];
 } {
+  let setting: ReturnType<typeof figmaSettings> | undefined;
+
  if (isGlobalColor(token)) {
-    return createFigmaSettings("COLOR", ["ALL_FILLS", "STROKE_COLOR"]);
+    setting = createFigmaSettings("COLOR", ["ALL_FILLS", "STROKE_COLOR"]);
+  } else if (isTokenOfSemanticColorGroup(token, "background")) {
+    setting = createFigmaSettings("COLOR", ["FRAME_FILL", "SHAPE_FILL"]);
+  } else if (isTokenOfSemanticColorGroup(token, "border")) {
+    setting = createFigmaSettings("COLOR", ["STROKE_COLOR"]);
+  } else if (isTokenOfSemanticColorGroup(token, "text")) {
+    setting = createFigmaSettings("COLOR", ["SHAPE_FILL", "TEXT_FILL"]);
+  } else if (isRadiusToken(token)) {
+    setting = createFigmaSettings("FLOAT", ["CORNER_RADIUS"]);
+  } else if (isSpacingToken(token)) {
+    setting = createFigmaSettings("FLOAT", ["GAP"]);
  }

-  if (isTokenOfSemanticColorGroup(token, "background")) {
-    return createFigmaSettings("COLOR", ["FRAME_FILL", "SHAPE_FILL"]);
-  }
-  if (isTokenOfSemanticColorGroup(token, "border")) {
-    return createFigmaSettings("COLOR", ["STROKE_COLOR"]);
-  }
-  if (
-    isTokenOfSemanticColorGroup(token, "contrast") ||
-    isTokenOfSemanticColorGroup(token, "text")
-  ) {
-    return createFigmaSettings("COLOR", ["SHAPE_FILL", "TEXT_FILL"]);
-  }
-  if (isRadiusToken(token)) {
-    return createFigmaSettings("FLOAT", ["CORNER_RADIUS"]);
-  }
-  if (isSpacingToken(token)) {
-    return createFigmaSettings("FLOAT", ["GAP"]);
+  if (!setting) {
+    console.warn(`No fitting type or scope found for token: ${token.name}`);
+    return createFigmaSettings("STRING", []);
  }

-  console.warn(`No fitting type or scope found for token: ${token.name}`);
-  return createFigmaSettings("STRING", []);
+  token.scopes && setting.scopes.push(...token.scopes);
+
+  return setting;
 }

 function createFigmaSettings(
@@ -1,23 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { config as darkModeConfig } from "../tokens/global-dark";
-import { config as lightModeConfig } from "../tokens/global-light";
-
-describe("Validate global token config", () => {
-  describe("Lightmode should have correct colorKeys and ratios for each role", () => {
-    Object.entries(lightModeConfig).forEach(([role, { colorKeys, ratios }]) => {
-      test(`${role} should have correct colorKeys and ratios for each role`, () => {
-        expect(colorKeys.length).toBeGreaterThan(0);
-        expect(ratios.length).toEqual(10);
-      });
-    });
-  });
-
-  describe("Darkmode should have correct colorKeys and ratios for each role", () => {
-    Object.entries(darkModeConfig).forEach(([role, { colorKeys, ratios }]) => {
-      test(`${role} should have correct colorKeys and ratios for each role`, () => {
-        expect(colorKeys.length).toBeGreaterThan(0);
-        expect(ratios.length).toEqual(10);
-      });
-    });
-  });
-});
@@ -1,19 +1,25 @@
 import { describe, expect, test } from "vitest";
-import { globalScale } from "../create-configuration";
-import { contrastTokenConfig } from "../tokens/contrast";
-import { neutralTokenConfig } from "../tokens/neutral";
+import { globalColorDarkModeConfig } from "../tokens/global-dark";
+import { globalColorLightModeConfig } from "../tokens/global-light";
 import { radiusTokenConfig } from "../tokens/radius";
 import { semanticTokenConfig } from "../tokens/semantic";
 import { semanticTokensForAllRolesConfig } from "../tokens/semantic-roles";
 import { spacingTokenConfig } from "../tokens/spacing";
+import { textContrastTokenConfig } from "../tokens/text-contrast";

 const configKeysWithGroup = ["value", "type", "group"];
 const configKeys = ["value", "type"];

 describe("Validate token configurations", () => {
-  test(`Semantic tokens`, () => {
+  test(`Semantic tokens lightmode`, () => {
    expect(
-      validateConfig(semanticTokenConfig(), configKeysWithGroup),
+      validateConfig(semanticTokenConfig("light"), configKeysWithGroup),
+    ).toBeTruthy();
+  });
+
+  test(`Semantic tokens darkmode`, () => {
+    expect(
+      validateConfig(semanticTokenConfig("dark"), configKeysWithGroup),
    ).toBeTruthy();
  });

@@ -23,33 +29,21 @@ describe("Validate token configurations", () => {
    ).toBeTruthy();
  });

-  test(`Contrast tokens`, () => {
+  test(`Text-contrast tokens`, () => {
    expect(
-      validateConfig(contrastTokenConfig(), configKeysWithGroup),
+      validateConfig(textContrastTokenConfig(), configKeysWithGroup),
    ).toBeTruthy();
  });

  test(`Global lightmode scale`, () => {
    expect(
-      validateConfig(globalScale("light"), configKeysWithGroup),
+      validateConfig(globalColorLightModeConfig, configKeysWithGroup),
    ).toBeTruthy();
  });

  test(`Global darkmode scale`, () => {
    expect(
-      validateConfig(globalScale("dark"), configKeysWithGroup),
-    ).toBeTruthy();
-  });
-
-  test(`Neutral light unique tokens`, () => {
-    expect(
-      validateConfig(neutralTokenConfig("light"), configKeysWithGroup),
-    ).toBeTruthy();
-  });
-
-  test(`Neutral dark unique tokens`, () => {
-    expect(
-      validateConfig(neutralTokenConfig("dark"), configKeysWithGroup),
+      validateConfig(globalColorDarkModeConfig, configKeysWithGroup),
    ).toBeTruthy();
  });

@@ -67,7 +61,11 @@ function validateConfig(
  requiredKeys: string[],
 ): boolean {
  for (const key in obj) {
-    if (typeof obj[key] === "object" && obj[key] !== null) {
+    if (
+      typeof obj[key] === "object" &&
+      obj[key] !== null &&
+      !Array.isArray(obj[key])
+    ) {
      if (!validateConfig(obj[key], requiredKeys)) {
        return false;
      }
@@ -7,16 +7,16 @@ export const globalColorDarkModeConfig: GlobalConfigT = {
      type: "global-color",
      group: "neutral",
    },
-    "100": { value: "#1a1d21", type: "global-color", group: "neutral" },
-    "200": { value: "#202327", type: "global-color", group: "neutral" },
-    "300": { value: "#282b2f", type: "global-color", group: "neutral" },
-    "400": { value: "#33363a", type: "global-color", group: "neutral" },
-    "500": { value: "#666d77", type: "global-color", group: "neutral" },
-    "600": { value: "#787e89", type: "global-color", group: "neutral" },
-    "700": { value: "#8c929d", type: "global-color", group: "neutral" },
-    "800": { value: "#959ca5", type: "global-color", group: "neutral" },
-    "900": { value: "#a6acb4", type: "global-color", group: "neutral" },
-    "1000": { value: "#c5c9ce", type: "global-color", group: "neutral" },
+    "100": { value: "#161d28", type: "global-color", group: "neutral" },
+    "200": { value: "#1c232f", type: "global-color", group: "neutral" },
+    "300": { value: "#242b37", type: "global-color", group: "neutral" },
+    "400": { value: "#2e3641", type: "global-color", group: "neutral" },
+    "500": { value: "#656d7b", type: "global-color", group: "neutral" },
+    "600": { value: "#767e8c", type: "global-color", group: "neutral" },
+    "700": { value: "#8a92a0", type: "global-color", group: "neutral" },
+    "800": { value: "#949ba8", type: "global-color", group: "neutral" },
+    "900": { value: "#a5acb6", type: "global-color", group: "neutral" },
+    "1000": { value: "#c4c9d0", type: "global-color", group: "neutral" },
  },
  accent: {
    "100": { value: "#101d2d", type: "global-color", group: "accent" },
@@ -14,6 +14,11 @@ function semanticTokensDark(): StyleDictionaryTokenConfig<"color"> {
        value: "#0E151F",
        type: "color",
        group: "background",
+        /**
+         * Allows token to be used on 'effect' properties in Figma,
+         * Bg-default is used between element and focus-marking.
+         */
+        scopes: ["EFFECT_COLOR"],
      },
      raised: {
        value: "{a.neutral.200.value}",
@@ -53,6 +58,11 @@ function semanticTokensLight(): StyleDictionaryTokenConfig<"color"> {
        value: "{a.neutral.000.value}",
        type: "color",
        group: "background",
+        /**
+         * Allows token to be used on 'effect' properties in Figma,
+         * Bg-default is used between element and focus-marking.
+         */
+        scopes: ["EFFECT_COLOR"],
      },
      input: {
        value: "{a.neutral.000.value}",
@@ -99,6 +109,10 @@ function semanticTokensLight(): StyleDictionaryTokenConfig<"color"> {
        value: "{a.accent.700.value}",
        type: "color",
        group: "border",
+        /**
+         * Allows token to be used on 'effect' properties in Figma, used for creating focus markings.
+         */
+        scopes: ["EFFECT_COLOR"],
      },
    },
  };
@@ -1,69 +1,69 @@
 import { GlobalColorRoles, StyleDictionaryToken } from "../util";

-export const contrastTokenConfig = (): {
-  contrast: {
-    [key in GlobalColorRoles]: StyleDictionaryToken<"color">;
+export const textContrastTokenConfig = (): {
+  text: {
+    [key in `${GlobalColorRoles}-contrast`]: StyleDictionaryToken<"color">;
  };
 } => ({
-  contrast: {
+  text: {
    /* core */
-    accent: {
+    "accent-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    neutral: {
+    "neutral-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
    /* Status */
-    danger: {
+    "danger-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    info: {
+    "info-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    success: {
+    "success-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    warning: {
+    "warning-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
    /* Brand */
-    brandOne: {
+    "brandOne-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    brandTwo: {
+    "brandTwo-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    brandThree: {
+    "brandThree-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
    /* Data */
-    dataOne: {
+    "dataOne-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
-    dataTwo: {
+    "dataTwo-contrast": {
      value: "{a.neutral.000.value}",
      type: "color",
-      group: "contrast",
+      group: "text",
    },
  },
 });
@@ -51,19 +51,38 @@ export type TokenTypes =
  | "global-radius"
  | "global-spacing";

-export type SemanticTokenGroups = "background" | "border" | "text" | "contrast";
-type SemanticTokenGroupsWithRoles = Exclude<SemanticTokenGroups, "contrast">;
+export type SemanticTokenGroups = "background" | "border" | "text";

 export type TokenGroup =
  | GlobalColorRoles
  | SemanticTokenGroups
-  | `${SemanticTokenGroupsWithRoles}.${GlobalColorRoles}`;
+  | `${SemanticTokenGroups}.${GlobalColorRoles}`;

 export type StyleDictionaryToken<T extends TokenTypes> = {
+  /**
+   * Token value
+   * @example "#000000"
+   * @example "1px"
+   * @example "{a.neutral.100.value}"
+   */
  value: string;
+  /**
+   * Token type
+   */
  type: T;
+  /**
+   * Group the token belongs to. Used for auto-documentation and categorization in Figma.
+   */
  group?: TokenGroup;
+  /**
+   * Optional comment for the token. Will be included in the generated documentation and in Figma.
+   */
  comment?: string;
+  /**
+   * Optional extra scopes for the token.
+   * Token will include all default scopes based on `type`, and any extra specified here.
+   */
+  scopes?: VariableScope[];
 };

 export type StyleDictionaryTokenConfig<T extends TokenTypes> = {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "7.1.2",
+  "version": "7.2.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,15 @@
 # Changelog

+## 7.2
+
+### @navikt/ds-react
+
+- FileUpload: :boom: Remove UNSAFE-prefix ([#3205](https://github.com/navikt/aksel/pull/3205))
+
+- List: :sparkles: New size 'large' ([#3207](https://github.com/navikt/aksel/pull/3207))
+
+* Performance: :zap: Optimized memoization for rerendring in some components. ([#3197](https://github.com/navikt/aksel/pull/3197))
+
 ## 7.1

 ### @navikt/aksel-stylelint
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^7.1.2",
-    "@navikt/ds-css": "^7.1.2",
-    "@navikt/ds-react": "^7.1.2",
-    "@navikt/ds-tailwind": "^7.1.2",
-    "@navikt/ds-tokens": "^7.1.2"
+    "@navikt/aksel-icons": "^7.2.0",
+    "@navikt/ds-css": "^7.2.0",
+    "@navikt/ds-react": "^7.2.0",
+    "@navikt/ds-tailwind": "^7.2.0",
+    "@navikt/ds-tokens": "^7.2.0"
  }
 }
@@ -16,16 +16,13 @@ const PropsSeksjon = ({ node }: PropsSeksjonProps) => {

  return (
    <div className="mb-16">
-      {node?.komponenter?.length > 0 && (
-        <>
-          {node.komponenter.map((prop) => (
-            <PropTableV2
-              komponent={prop as unknown as PropTableT}
-              key={prop?._key}
-            />
-          ))}
-        </>
-      )}
+      {node?.komponenter?.length > 0 &&
+        node.komponenter.map((prop) => (
+          <PropTableV2
+            komponent={prop as unknown as PropTableT}
+            key={prop?._key}
+          />
+        ))}
    </div>
  );
 };
@@ -38,25 +38,6 @@ html:has(.globalstyles) {
  scroll-margin-block: 5rem;
 }

-/* Improves rendering of images for chrome on Windows */
-/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
-@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
-  .globalstyles img {
-    transform: translateZ(0);
-    /* stylelint-disable-next-line value-no-vendor-prefix */
-    image-rendering: -webkit-optimize-contrast !important;
-  }
-}
-
-/* Unset for Safari 11+ */
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .globalstyles img {
-      image-rendering: unset !important;
-    }
-  }
-}
-
 .skiplink {
  @apply absolute left-0 -translate-y-full bg-border-focus p-4 text-text-on-inverted no-underline focus-within:translate-y-0 focus-within:shadow-[inset_0_0_0_2px_white] focus-within:outline-none;
 }
@@ -155,23 +155,22 @@ export const FeedbackForm = ({ user }: { user: AuthUser }) => {
      >
        Send inn
      </Button>
-      <>
-        {state === "error" && (
-          <Alert variant="error" className="mt-4" role="alert">
-            Noe gikk galt. Hvis feilen oppstår flere ganger eller du har lyst
-            til å sende tilbakemeldingen direkte finner du oss under{" "}
-            <Link inlineText href="https://nav-it.slack.com/archives/C7NE7A8UF">
-              #aksel-designsystemet
-            </Link>{" "}
-            på slack.
-            <BodyShort
-              textColor="subtle"
-              size="small"
-              className="mt-3"
-            >{`Feil-id: ${APIError}`}</BodyShort>
-          </Alert>
-        )}
-      </>
+
+      {state === "error" && (
+        <Alert variant="error" className="mt-4" role="alert">
+          Noe gikk galt. Hvis feilen oppstår flere ganger eller du har lyst til
+          å sende tilbakemeldingen direkte finner du oss under{" "}
+          <Link inlineText href="https://nav-it.slack.com/archives/C7NE7A8UF">
+            #aksel-designsystemet
+          </Link>{" "}
+          på slack.
+          <BodyShort
+            textColor="subtle"
+            size="small"
+            className="mt-3"
+          >{`Feil-id: ${APIError}`}</BodyShort>
+        </Alert>
+      )}
    </form>
  );
 };
@@ -21,6 +21,7 @@ export const IconSidebar = ({
  const wrapperRef = useRef<HTMLDivElement>(null);
  const [blob, setBlob]: any = useState();
  const router = useRouter();
+  const prevNameRef = useRef<string | undefined>();

  const currentIcon = useMemo(
    () => Object.values(meta).find((x) => x.name === name),
@@ -44,12 +45,13 @@ export const IconSidebar = ({
  }

  useEffect(() => {
-    if (wrapperRef.current) {
+    if (prevNameRef.current !== name && wrapperRef.current) {
      wrapperRef.current.focus({ preventScroll: true });
    }
+    prevNameRef.current = name;
  }, [name]);

-  const logDownload = (icon, format) => {
+  const logDownload = (icon: string, format: "svg") => {
    amplitude.track(AmplitudeEvents.ikonnedlastning, {
      icon,
      format,
@@ -42,7 +42,8 @@ export function MenuUl({ children, id, className }: MenuListProps) {
    <ul
      className={cl(styles.menuList, className)}
      id={id}
-      role="list" // WebKit browsers remove list semantics when list-style-type is none
+      // biome-ignore lint/a11y/noRedundantRoles: WebKit browsers remove list semantics when list-style-type is none
+      role="list"
    >
      {children}
    </ul>
@@ -13,22 +13,23 @@
    "cp:static": "copyfiles -E -u 1 '.next/static/**' .next/standalone/aksel.nav.no/website/.next/",
    "cp:public": "copyfiles -E 'public/**' .next/standalone/aksel.nav.no/website/",
    "cp:assets": "yarn cp:playroom && yarn cp:public && yarn cp:static",
-    "update:searchindex": "ts-node --project tsconfig.json ./scripts/create-index",
+    "update:searchindex": "yarn tsx --env-file=.env ./scripts/create-index",
    "e2e": "yarn build && yarn start-server-and-test 'yarn start' http://localhost:3000 'yarn playwright'",
-    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "update:rss": "ts-node --project tsconfig.tsnode.json ./scripts/generate-rss-feed",
-    "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",
-    "update:tokens": "ts-node --project tsconfig.tsnode.json ./scripts/update-tokens",
-    "update:eksempler": "ts-node --project tsconfig.tsnode.json ./scripts/update-examples/update-sanity",
-    "validate:eksempler": "ts-node --project tsconfig.tsnode.json ./scripts/update-examples/validate",
-    "update:changelog": "ts-node --project tsconfig.tsnode.json ./scripts/changelog",
+    "e2e:full": "yarn build && yarn generate-testpaths && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:ci-full": "yarn generate-testpaths && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "update:rss": "yarn tsx --env-file=.env ./scripts/generate-rss-feed",
+    "update:props": "yarn tsx --env-file=.env ./scripts/update-props",
+    "update:tokens": "yarn tsx --env-file=.env ./scripts/update-tokens",
+    "update:eksempler": "yarn tsx --env-file=.env ./scripts/update-examples/update-sanity",
+    "validate:eksempler": "yarn tsx ./scripts/update-examples/validate",
+    "update:changelog": "yarn tsx --env-file=.env ./scripts/changelog",
    "update:sanity": "yarn update:tokens && yarn update:props && yarn update:eksempler && yarn update:changelog",
    "analyze": "cross-env ANALYZE=true yarn build",
    "test": "vitest run -c config/vitest.config.ts",
    "test:watch": "vitest watch -c config/vitest.config.ts",
    "playwright": "playwright test",
-    "backup": "ts-node scripts/backup.js",
+    "backup": "yarn tsx --env-file=.env scripts/backup.ts",
+    "generate-testpaths": "yarn tsx --env-file=.env ./scripts/generate-testpaths.ts",
    "watch:tw": "yarn tailwindcss -i ./components/styles/index.css -o ./dist/tw.css --watch"
  },
  "dependencies": {
@@ -67,6 +68,7 @@
    "react-rx": "^2.1.3",
    "remark-gfm": "^4.0.0",
    "sanity": "3.59.0",
+    "sanity-plugin-iframe-pane": "^3.1.6",
    "sanity-plugin-media": "^2.3.2",
    "sharp": "0.32.6",
    "styled-components": "^6.0.0",
@@ -90,7 +92,6 @@
    "babel-loader": "^8.2.0",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.0",
-    "dotenv": "^10.0.0",
    "jsdom": "^22.1.0",
    "json5": "2.2.1",
    "pino-pretty": "^10.0.0",
@@ -100,7 +101,7 @@
    "rss": "^1.2.2",
    "showdown": "^2.1.0",
    "start-server-and-test": "^2.0.3",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.19.1",
    "typescript": "^5.1.6",
    "vitest": "^1.2.2"
  }
@@ -7,7 +7,9 @@ const Example = () => {
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
-    errorRef.current && errorRef.current.focus();
+    if (hasError && errorRef.current) {
+      errorRef.current.focus();
+    }
  }, [hasError]);

  return (
@@ -3,8 +3,8 @@ import {
  FileObject,
  FileRejected,
  FileRejectionReason,
+  FileUpload,
  Heading,
-  UNSAFE_FileUpload,
  VStack,
 } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
@@ -21,7 +21,7 @@ const Example = () => {

  return (
    <VStack gap="6">
-      <UNSAFE_FileUpload.Dropzone
+      <FileUpload.Dropzone
        label="Last opp filer til søknaden"
        description={`Du kan laste opp Word- og PDF-filer. Maks 3 filer. Maks størrelse ${MAX_SIZE_MB} MB.`}
        accept=".doc,.docx,.pdf"
@@ -37,7 +37,7 @@ const Example = () => {
          </Heading>
          <VStack as="ul" gap="3">
            {acceptedFiles.map((file, index) => (
-              <UNSAFE_FileUpload.Item
+              <FileUpload.Item
                as="li"
                key={index}
                file={file.file}
@@ -57,7 +57,7 @@ const Example = () => {
          </Heading>
          <VStack as="ul" gap="3">
            {rejectedFiles.map((rejected, index) => (
-              <UNSAFE_FileUpload.Item
+              <FileUpload.Item
                as="li"
                key={index}
                file={rejected.file}
@@ -1,15 +1,15 @@
-import { UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => (
  <VStack gap="12">
-    <UNSAFE_FileUpload.Dropzone
+    <FileUpload.Dropzone
      label="Last opp filer"
      onSelect={console.info}
      disabled
    />

-    <UNSAFE_FileUpload.Dropzone
+    <FileUpload.Dropzone
      label="Last opp filer"
      onSelect={console.info}
      fileLimit={{ max: 1, current: 1 }}
@@ -1,15 +1,15 @@
-import { UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => (
  <VStack gap="12">
-    <UNSAFE_FileUpload.Dropzone
+    <FileUpload.Dropzone
      label="Last opp filer"
      onSelect={console.info}
      error="Du må laste opp en fil"
    />

-    <UNSAFE_FileUpload.Item
+    <FileUpload.Item
      file={{ name: "eksempel.png", size: 200000 }}
      error="Filformatet støttes ikke"
    />
@@ -1,11 +1,11 @@
-import { Heading, UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, Heading, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => (
  <VStack gap="6">
    <div>
      <Heading size="small">retry</Heading>
-      <UNSAFE_FileUpload.Item
+      <FileUpload.Item
        file={new File(["abc".repeat(100000)], "eksempel1.pdf")}
        button={{
          action: "retry",
@@ -15,7 +15,7 @@ const Example = () => (
    </div>
    <div>
      <Heading size="small">delete</Heading>
-      <UNSAFE_FileUpload.Item
+      <FileUpload.Item
        file={{ name: "eksempel2.pdf", size: 200000 }}
        href="#"
        button={{
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FileObject, UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileObject, FileUpload, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
@@ -7,14 +7,14 @@ const Example = () => {

  return (
    <VStack gap="6">
-      <UNSAFE_FileUpload.Dropzone
+      <FileUpload.Dropzone
        label="Last opp fødselsattest"
        fileLimit={{ max: 1, current: files.length }}
        multiple={false}
        onSelect={setFiles}
      />
      {files.map((file) => (
-        <UNSAFE_FileUpload.Item
+        <FileUpload.Item
          key={file.file.name}
          file={file.file}
          button={{
@@ -1,8 +1,8 @@
-import { Heading, UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, Heading, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => (
-  <UNSAFE_FileUpload
+  <FileUpload
    translations={{
      dropzone: {
        dragAndDropMultiple: "Dra og slipp bilder i format .png",
@@ -14,21 +14,18 @@ const Example = () => (
    }}
  >
    <VStack gap="6">
-      <UNSAFE_FileUpload.Dropzone
-        label="Last opp bilder"
-        onSelect={console.info}
-      />
+      <FileUpload.Dropzone label="Last opp bilder" onSelect={console.info} />
      <div>
        <Heading level="3" size="xsmall" spacing>
          Vedlegg
        </Heading>
        <VStack as="ul" gap="2">
-          <UNSAFE_FileUpload.Item
+          <FileUpload.Item
            as="li"
            file={{ name: "eksempel.png", size: 200000 }}
            status="uploading"
          />
-          <UNSAFE_FileUpload.Item
+          <FileUpload.Item
            as="li"
            file={{ name: "eksempel.png", size: 200000 }}
            status="uploading"
@@ -37,7 +34,7 @@ const Example = () => (
        </VStack>
      </div>
    </VStack>
-  </UNSAFE_FileUpload>
+  </FileUpload>
 );

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
@@ -1,14 +1,14 @@
 import { UploadIcon } from "@navikt/aksel-icons";
-import { Button, UNSAFE_FileUpload } from "@navikt/ds-react";
+import { Button, FileUpload } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
-    <UNSAFE_FileUpload.Trigger multiple={false} onSelect={console.info}>
+    <FileUpload.Trigger multiple={false} onSelect={console.info}>
      <Button variant="secondary" icon={<UploadIcon aria-hidden />}>
        Last opp filer
      </Button>
-    </UNSAFE_FileUpload.Trigger>
+    </FileUpload.Trigger>
  );
 };

@@ -28,5 +28,5 @@ export const Demo = {
 };

 export const args = {
-  index: 3,
+  index: 4,
 };
@@ -39,6 +39,6 @@ export const Demo = {
 };

 export const args = {
-  index: 5,
+  index: 6,
  desc: "Husk å sette aria-hidden på dekorative ikoner.",
 };
@@ -33,6 +33,6 @@ export const Demo = {
 };

 export const args = {
-  index: 4,
+  index: 5,
  desc: "Du kan også sette en tittel på hvert element i listen.",
 };
@@ -0,0 +1,33 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List as="ul" size="large" title="Det kan også være aktuelt hvis du:">
+      <List.Item>
+        står i fare for å miste jobben etter å ha vært sykmeldt helt eller
+        delvis i 12 måneder,
+      </List.Item>
+      <List.Item>
+        har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller
+      </List.Item>
+      <List.Item>
+        er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan
+        bli ansatt i en vanlig jobb.
+      </List.Item>
+    </List>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+};
@@ -26,6 +26,6 @@ export const Demo = {
 };

 export const args = {
-  index: 2,
+  index: 3,
  desc: "Du kan bruke 'as' for å endre til 'ol' (nummerert liste).",
 };
@@ -6,11 +6,11 @@ const Example = () => {
    <List as="ul" size="small" title="Det kan også være aktuelt hvis du:">
      <List.Item>
        står i fare for å miste jobben etter å ha vært sykmeldt helt eller
-        delvis i 12 måneder, eller
+        delvis i 12 måneder,
      </List.Item>
      <List.Item>
        har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
-        om andre arbeidsmarkedstiltak og virkemidler er aktuelle.
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller
      </List.Item>
      <List.Item>
        er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan
@@ -6,11 +6,11 @@ const Example = () => {
    <List as="ul" title="Det kan også være aktuelt hvis du:">
      <List.Item>
        står i fare for å miste jobben etter å ha vært sykmeldt helt eller
-        delvis i 12 måneder, eller
+        delvis i 12 måneder,
      </List.Item>
      <List.Item>
        har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
-        om andre arbeidsmarkedstiltak og virkemidler er aktuelle.
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller
      </List.Item>
      <List.Item>
        er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan
@@ -235,23 +235,21 @@ const Page = ({
        </a>
      )}
      {pack && (
-        <>
-          <a
-            target="_blank"
-            rel="noreferrer noopener"
-            href={pack.changelog}
-            className="flex items-center gap-1 underline hover:text-text-default hover:no-underline focus:bg-blue-800 focus:text-text-on-inverted focus:no-underline focus:shadow-focus focus:outline-none"
-            onClick={() =>
-              amplitude.track(AmplitudeEvents.link, {
-                kilde: "intro-lenker komponenter",
-                til: "endringslogg",
-              })
-            }
-          >
-            <ChangelogIcon />
-            Endringslogg
-          </a>
-        </>
+        <a
+          target="_blank"
+          rel="noreferrer noopener"
+          href={pack.changelog}
+          className="flex items-center gap-1 underline hover:text-text-default hover:no-underline focus:bg-blue-800 focus:text-text-on-inverted focus:no-underline focus:shadow-focus focus:outline-none"
+          onClick={() =>
+            amplitude.track(AmplitudeEvents.link, {
+              kilde: "intro-lenker komponenter",
+              til: "endringslogg",
+            })
+          }
+        >
+          <ChangelogIcon />
+          Endringslogg
+        </a>
      )}
    </BodyShort>
  );
@@ -59,7 +59,7 @@ const Example = () => {
  }

  useEffect(() => {
-    errorSummaryRef.current?.focus();
+    formState.tries > 0 && errorSummaryRef.current?.focus();
  }, [formState.tries]);

  if (formState.submitted)
@@ -1,129 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { SanityDocumentLike } from "sanity";
-import {
-  ArrowsCirclepathIcon,
-  LeaveIcon,
-  MobileSmallIcon,
-} from "@navikt/aksel-icons";
-import { Button, CopyButton, HStack, Loader, Spacer } from "@navikt/ds-react";
-
-export type IframeProps = {
-  document: {
-    displayed: SanityDocumentLike;
-  };
-  options: { url: (document: SanityDocumentLike) => unknown };
-};
-
-const sizes = {
-  desktop: {
-    width: `100%`,
-    height: `100%`,
-    maxHeight: `100%`,
-  },
-  mobile: {
-    width: 414,
-    height: `100%`,
-    maxHeight: 736,
-  },
-};
-
-export const Iframe = (props: IframeProps) => {
-  const { document: sanityDocument, options } = props;
-  const { displayed } = sanityDocument;
-  const { url } = options;
-  const [displayUrl, setDisplayUrl] = useState("");
-  const [iframeSize, setIframeSize] = useState("desktop");
-  const iframe = useRef<HTMLIFrameElement>(null);
-  const initialLoad = useRef(true);
-  const [loading, setLoading] = useState(true);
-
-  const reload = useCallback(() => {
-    if (!iframe?.current) {
-      return;
-    }
-
-    // Funky way to reload an iframe without CORS issuies
-    // eslint-disable-next-line no-self-assign
-    iframe.current.src = iframe.current.src;
-    setLoading(true);
-  }, []);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      !initialLoad.current && reload();
-    }, 1500);
-
-    return () => clearTimeout(timeout);
-  }, [displayed.slug, reload]);
-
-  useEffect(() => {
-    const getUrl = async () => {
-      const resolveUrl = await url(displayed);
-
-      // Only update state if URL has changed
-      if (
-        resolveUrl !== displayUrl &&
-        resolveUrl &&
-        typeof resolveUrl === "string"
-      ) {
-        initialLoad.current = false;
-        setDisplayUrl(resolveUrl);
-      }
-    };
-
-    getUrl();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [displayed._rev]);
-
-  return (
-    <div className="flex h-full w-full flex-col items-center">
-      <div className="place-self-stretch border-b border-b-border-subtle p-2">
-        <HStack align="center" gap="2">
-          <CopyButton copyText={displayUrl} size="small" text="Kopier url" />
-          <Spacer />
-          <HStack align="center" gap="2">
-            <Button
-              icon={<MobileSmallIcon title="Velg frame-størrelse" />}
-              onClick={() =>
-                setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
-              }
-              size="small"
-              variant="tertiary"
-            />
-
-            <Button
-              icon={<ArrowsCirclepathIcon title="reload side" />}
-              onClick={() => reload()}
-              size="small"
-              variant="tertiary"
-            />
-            <Button
-              size="small"
-              icon={<LeaveIcon aria-hidden />}
-              onClick={() => window.open(displayUrl)}
-              variant="tertiary"
-              iconPosition="right"
-            >
-              Åpne side
-            </Button>
-          </HStack>
-        </HStack>
-      </div>
-      <div className="h-full w-full">
-        {loading && (
-          <div className="absolute inset-0 grid h-full w-full place-content-center bg-surface-backdrop">
-            <Loader size="2xlarge" variant="inverted" />
-          </div>
-        )}
-
-        <iframe
-          ref={iframe}
-          title="preview"
-          style={sizes[iframeSize]}
-          src={displayUrl}
-          onLoad={() => setLoading(false)}
-        />
-      </div>
-    </div>
-  );
-};
@@ -1,4 +1,6 @@
 import Avatar from "boring-avatars";
+import { SanityDocument } from "sanity";
+import { Iframe } from "sanity-plugin-iframe-pane";
 import { StructureResolver } from "sanity/structure";
 import { LightBulbIcon } from "@navikt/aksel-icons";
 import {
@@ -7,7 +9,6 @@ import {
  previews,
  prinsippKategorier,
 } from "../../config";
-import { Iframe } from "./IFrame";
 import { adminStructure } from "./admin";
 import { gpStructure } from "./god-praksis";
 import { grunnleggendeStructure } from "./grunnleggende";
@@ -134,19 +135,17 @@ export const structure: StructureResolver = async (
    ]);
 };

-export const resolveProductionUrl = (doc) => {
-  const basePath = "https://aksel.nav.no";
-  const devPath = "http://localhost:3000";
-
+export const resolveProductionUrl = (
+  doc: SanityDocument & { slug?: { current?: string } },
+) => {
+  const rootPath = `${window.location.protocol}//${window.location.host}`;
  if (previews.includes(doc._type)) {
-    const slug = doc.slug?.current;
+    const slug = doc?.slug?.current;
    const previewUrl = `/preview/${slug}`;
    if (!slug) {
      return "";
    }
-    return process.env.NODE_ENV === "production"
-      ? `${basePath}${previewUrl}`
-      : `${devPath}${previewUrl}`;
+    return `${rootPath}${previewUrl}`;
  }
  if (landingsider.find((x) => x.name === doc._type)) {
    const slug = landingsider.find((x) => x.name === doc._type)?.url;
@@ -154,9 +153,7 @@ export const resolveProductionUrl = (doc) => {
    if (!slug) {
      return "";
    }
-    return process.env.NODE_ENV === "production"
-      ? `${basePath}${previewUrl}`
-      : `${devPath}${previewUrl}`;
+    return `${rootPath}${previewUrl}`;
  }

  if ("gp.tema" === doc._type) {
@@ -165,9 +162,7 @@ export const resolveProductionUrl = (doc) => {
    if (!slug) {
      return "";
    }
-    return process.env.NODE_ENV === "production"
-      ? `${basePath}${previewUrl}`
-      : `${devPath}${previewUrl}`;
+    return `${rootPath}${previewUrl}`;
  }
 };

@@ -179,7 +174,11 @@ export const defaultDocumentNode = (S, { schemaType }) => {
      S.view
        .component(Iframe)
        .options({
-          url: (doc) => resolveProductionUrl(doc),
+          url: (doc: SanityDocument) => resolveProductionUrl(doc),
+          reload: { button: true },
+          attributes: {
+            allow: "fullscreen",
+          },
        })
        .title("Forhåndsvisning"),
    ]);
@@ -1,13 +1,10 @@
 import { htmlToBlocks } from "@sanity/block-tools";
 import { Schema } from "@sanity/schema";
-import dotenv from "dotenv";
 import fs from "fs";
 import { JSDOM } from "jsdom";
 import showdown from "showdown";
 import { noCdnClient } from "../sanity/interface/client.server";

-dotenv.config();
-
 main();

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

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

@@ -1,15 +1,15 @@
-import dotenv from "dotenv";
 import fs from "fs";
 import { groupBy, omit } from "lodash";
 import { allArticleDocuments } from "../sanity/config";
 import { noCdnClient } from "../sanity/interface/client.server";

-dotenv.config();
-
 main();

 async function main() {
  await createIndex();
+  console.info(
+    "Successfully created searchindex and added it to public folder",
+  );
 }

 async function createIndex() {
@@ -1,12 +1,8 @@
-import dotenv from "dotenv";
 import fs from "fs";
 import path from "path";
 import RSS from "rss";
 import { noCdnClient } from "../sanity/interface/client.server";

-dotenv.config();
-dotenv.config({ path: `.env.local` });
-
 generateRssFeed();

 async function generateRssFeed() {
@@ -1,11 +1,16 @@
-import dotenv from "dotenv";
 import fs from "fs";
 import { sitemapPages } from "../sanity/interface/interface";

-dotenv.config();
-
 const token = process.env.SANITY_READ_NO_DRAFTS;

+if (!token) {
+  console.error("Missing SANITY_READ_NO_DRAFTS");
+  process.exit(1);
+}
+
+/**
+ * Generate a list of urls for e2e tests
+ */
 sitemapPages(token)
  .then((pages) =>
    fs.writeFileSync(
@@ -1,4 +1,3 @@
-import dotenv from "dotenv";
 import { CodeExampleSchemaT } from "../../components/types";
 import { noCdnClient } from "../../sanity/interface/client.server";
 import { extractMetadata } from "./parts/extract-metadata";
@@ -7,8 +6,6 @@ import { parseCodeFiles } from "./parts/parse-code-files";
 import { validateExamples } from "./parts/validate-examples";
 import { RootDirectoriesT, rootDirectories } from "./types";

-dotenv.config();
-
 const isDryRun = process.argv.includes("--dry-run");

 (async function () {
@@ -1,11 +1,7 @@
-import dotenv from "dotenv";
 import fs from "fs";
 import path from "path";
 import { noCdnClient } from "../sanity/interface/client.server";

-dotenv.config();
-dotenv.config({ path: `.env.local` });
-
 updateProps();

 async function updateProps() {
@@ -1,10 +1,7 @@
-import dotenv from "dotenv";
 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();
-
 const allTokens: { title: string; kategori: string }[] = [
  ...Object.keys(tokens).map((x) => ({ title: x, kategori: "core" })),
  ...Object.keys(core).map((x) => ({ title: x, kategori: "comp" })),
@@ -47,7 +44,7 @@ export const updateTokens = async () => {

  await transactionClient
    .commit()
-    .then(() => console.info(`Updated tokens`))
+    .then(() => console.info(`Updated tokens!`))
    .catch((e) => console.error(e.message));
 };

@@ -41,12 +41,6 @@
      }
    ]
  },
-  "ts-node": {
-    "compilerOptions": {
-      "module": "commonjs",
-      "lib": ["dom", "dom.iterable", "esnext", "ES2021.String"]
-    }
-  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules", "e2e", "./scripts/**"]
 }
@@ -1,26 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "baseUrl": ".",
-    "paths": {
-      "@/sb-util": ["./.storybook/utils.tsx"],
-      "@/types": ["./components/types/index.ts"],
-      "@/sanity-block": ["./components/website-modules/SanityBlockContent.tsx"],
-      "@/hooks/*": ["./components/hooks/*"],
-      "@/auth/*": ["./components/auth/*"],
-      "@/logging": ["./components/logging/index.ts"],
-      "@/utils": ["./components/utils/index.ts"],
-      "@/slack": ["./components/utils/slack/index.ts"],
-      "@/layout/*": ["./components/layout/*"],
-      "@/assets/*": ["./components/assets/*"],
-      "@/web/*": ["./components/website-modules/*"],
-      "@/cms/*": ["./components/sanity-modules/*"],
-      "@/error-boundary": ["./components/website-modules/ErrorBoundary.tsx"],
-      "@/sanity/config": ["./sanity/config.ts"],
-      "@/sanity/client.server": ["./sanity/interface/client.server.ts"],
-      "@/sanity/interface": ["./sanity/interface/interface.ts"],
-      "@/sanity/queries": ["./sanity/interface/queries.js"]
-    }
-  }
-}
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
@@ -25,7 +25,7 @@
        "useMediaCaption": "off",
        "useKeyWithClickEvents": "off",
        "noNoninteractiveTabindex": "off",
-        "useAriaPropsForRole": "off"
+        "useSemanticElements": "off"
      },
      "style": {
        "useImportType": "off",
@@ -53,7 +53,6 @@
        "noUselessTernary": "off"
      },
      "correctness": {
-        "useExhaustiveDependencies": "off",
        "noInnerDeclarations": "off",
        "useJsxKeyInIterable": "off",
        "noSelfAssign": "off"
@@ -11,7 +11,7 @@ const ScButton = styled.button`
  width: fit-content;

  &[data-variant="primary"] {
-    color: ${tokens.ContrastAccent};
+    color: ${tokens.TextAccentContrast};
    background-color: ${tokens.BgAccentStrong};

    &:hover {
@@ -25,10 +25,10 @@ const fgMap = {
  ["warning-moderate"]: tokens.TextDefault,
  ["success-moderate"]: tokens.TextDefault,
  ["neutral-moderate"]: tokens.TextDefault,
-  ["info-strong"]: tokens.ContrastNeutral,
-  ["warning-strong"]: tokens.ContrastNeutral,
-  ["success-strong"]: tokens.ContrastNeutral,
-  ["neutral-strong"]: tokens.ContrastNeutral,
+  ["info-strong"]: tokens.TextNeutralContrast,
+  ["warning-strong"]: tokens.TextNeutralContrast,
+  ["success-strong"]: tokens.TextNeutralContrast,
+  ["neutral-strong"]: tokens.TextNeutralContrast,
 };

 const borderMap = {
@@ -733,23 +733,23 @@ __metadata:
  linkType: hard

 "@navikt/aksel-icons@file:../../@navikt/aksel-icons::locator=referansesider%40workspace%3A.":
-  version: 7.1.0
-  resolution: "@navikt/aksel-icons@file:../../@navikt/aksel-icons#../../@navikt/aksel-icons::hash=930af0&locator=referansesider%40workspace%3A."
-  checksum: 10/0db942b848acf487433e5bd9763016bf15aa7c6b1ebb2ad1157c721c92b9cb79752d2595eaa8749c265f8be13b21f2e374d07538a0208cf8e9fbc67f774523e8
+  version: 7.1.2
+  resolution: "@navikt/aksel-icons@file:../../@navikt/aksel-icons#../../@navikt/aksel-icons::hash=177a11&locator=referansesider%40workspace%3A."
+  checksum: 10/566bd0c3428994d4d6b7070cc5d7596255d57da7f35b7fcb7012c64fef8348f451b35b58e1b2f40d3d11ed619932a87fa556468ada28826ff9dde65927ccbaf4
  languageName: node
  linkType: hard

 "@navikt/ds-css@file:../../@navikt/core/css::locator=referansesider%40workspace%3A.":
-  version: 7.1.0
-  resolution: "@navikt/ds-css@file:../../@navikt/core/css#../../@navikt/core/css::hash=3cc142&locator=referansesider%40workspace%3A."
-  checksum: 10/16735d65809b40695552d14395fbac0cc622a7f4574b4191d19b2a99a4da72b68bd70e740b1114870760406b622f0104145117f4c31cbdf3d2fbad31502bada1
+  version: 7.1.2
+  resolution: "@navikt/ds-css@file:../../@navikt/core/css#../../@navikt/core/css::hash=af51c3&locator=referansesider%40workspace%3A."
+  checksum: 10/1ec20e6677f1ec1cb0029d8661af9094a1e30190619c347a230bd3315c575cf59bfa10e83b3ea6f51b9f17321262167199412498eec4adf83da7a9a911d1d56c
  languageName: node
  linkType: hard

 "@navikt/ds-tokens@file:../../@navikt/core/tokens::locator=referansesider%40workspace%3A.":
-  version: 7.1.0
-  resolution: "@navikt/ds-tokens@file:../../@navikt/core/tokens#../../@navikt/core/tokens::hash=6f9fd4&locator=referansesider%40workspace%3A."
-  checksum: 10/ec73126080a44e8d37bf46dbae309a24d7a4ec1184ae3af9b72b534719862aa283bb90626c3b6ae75c6436d4cda72b68f84dda6a2ab280a1df0402667a70f6b7
+  version: 7.1.2
+  resolution: "@navikt/ds-tokens@file:../../@navikt/core/tokens#../../@navikt/core/tokens::hash=436890&locator=referansesider%40workspace%3A."
+  checksum: 10/42b905390ddd3b23c4aa7cae16ab261587d437e67e4bbbc20906cc45b8ed69c4c9b95cb90c3e38c33cd31cca9b4918fd1dd9b6bf25265fd6bb23b1e486b92404
  languageName: node
  linkType: hard

@@ -143,7 +143,7 @@
    "url": "https://github.com/navikt/aksel.git"
  },
  "devDependencies": {
-    "@biomejs/biome": "1.8.0",
+    "@biomejs/biome": "1.9.3",
    "@changesets/cli": "2.26.2",
    "@storybook/addon-a11y": "^8.3.4",
    "@storybook/addon-essentials": "^8.3.4",
@@ -1715,18 +1715,18 @@ __metadata:
  languageName: node
  linkType: hard

-"@biomejs/biome@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/biome@npm:1.8.0"
+"@biomejs/biome@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/biome@npm:1.9.3"
  dependencies:
-    "@biomejs/cli-darwin-arm64": "npm:1.8.0"
-    "@biomejs/cli-darwin-x64": "npm:1.8.0"
-    "@biomejs/cli-linux-arm64": "npm:1.8.0"
-    "@biomejs/cli-linux-arm64-musl": "npm:1.8.0"
-    "@biomejs/cli-linux-x64": "npm:1.8.0"
-    "@biomejs/cli-linux-x64-musl": "npm:1.8.0"
-    "@biomejs/cli-win32-arm64": "npm:1.8.0"
-    "@biomejs/cli-win32-x64": "npm:1.8.0"
+    "@biomejs/cli-darwin-arm64": "npm:1.9.3"
+    "@biomejs/cli-darwin-x64": "npm:1.9.3"
+    "@biomejs/cli-linux-arm64": "npm:1.9.3"
+    "@biomejs/cli-linux-arm64-musl": "npm:1.9.3"
+    "@biomejs/cli-linux-x64": "npm:1.9.3"
+    "@biomejs/cli-linux-x64-musl": "npm:1.9.3"
+    "@biomejs/cli-win32-arm64": "npm:1.9.3"
+    "@biomejs/cli-win32-x64": "npm:1.9.3"
  dependenciesMeta:
    "@biomejs/cli-darwin-arm64":
      optional: true
@@ -1746,62 +1746,62 @@ __metadata:
      optional: true
  bin:
    biome: bin/biome
-  checksum: 10/a83d41d3559de0c30aa91ddb603851440578cf76ebf5bb540c6b81679ccabfe5d92ba108d7321b84b87acac124fa581c6302ba8a7919f391b444ca6048a5e86f
+  checksum: 10/22278454245f3ca178762df09721389abb884fbce87f834f6979a6a9d8db397df160a6d5019a3c7f6bd7d54d136bfaf1b6d3e6852fd9cf45bebc2be0337cb7dd
  languageName: node
  linkType: hard

-"@biomejs/cli-darwin-arm64@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-darwin-arm64@npm:1.8.0"
+"@biomejs/cli-darwin-arm64@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-darwin-arm64@npm:1.9.3"
  conditions: os=darwin & cpu=arm64
  languageName: node
  linkType: hard

-"@biomejs/cli-darwin-x64@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-darwin-x64@npm:1.8.0"
+"@biomejs/cli-darwin-x64@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-darwin-x64@npm:1.9.3"
  conditions: os=darwin & cpu=x64
  languageName: node
  linkType: hard

-"@biomejs/cli-linux-arm64-musl@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-linux-arm64-musl@npm:1.8.0"
+"@biomejs/cli-linux-arm64-musl@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-linux-arm64-musl@npm:1.9.3"
  conditions: os=linux & cpu=arm64 & libc=musl
  languageName: node
  linkType: hard

-"@biomejs/cli-linux-arm64@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-linux-arm64@npm:1.8.0"
+"@biomejs/cli-linux-arm64@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-linux-arm64@npm:1.9.3"
  conditions: os=linux & cpu=arm64 & libc=glibc
  languageName: node
  linkType: hard

-"@biomejs/cli-linux-x64-musl@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-linux-x64-musl@npm:1.8.0"
+"@biomejs/cli-linux-x64-musl@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-linux-x64-musl@npm:1.9.3"
  conditions: os=linux & cpu=x64 & libc=musl
  languageName: node
  linkType: hard

-"@biomejs/cli-linux-x64@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-linux-x64@npm:1.8.0"
+"@biomejs/cli-linux-x64@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-linux-x64@npm:1.9.3"
  conditions: os=linux & cpu=x64 & libc=glibc
  languageName: node
  linkType: hard

-"@biomejs/cli-win32-arm64@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-win32-arm64@npm:1.8.0"
+"@biomejs/cli-win32-arm64@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-win32-arm64@npm:1.9.3"
  conditions: os=win32 & cpu=arm64
  languageName: node
  linkType: hard

-"@biomejs/cli-win32-x64@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@biomejs/cli-win32-x64@npm:1.8.0"
+"@biomejs/cli-win32-x64@npm:1.9.3":
+  version: 1.9.3
+  resolution: "@biomejs/cli-win32-x64@npm:1.9.3"
  conditions: os=win32 & cpu=x64
  languageName: node
  linkType: hard
@@ -2303,15 +2303,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@cspotcode/source-map-support@npm:^0.8.0":
-  version: 0.8.1
-  resolution: "@cspotcode/source-map-support@npm:0.8.1"
-  dependencies:
-    "@jridgewell/trace-mapping": "npm:0.3.9"
-  checksum: 10/b6e38a1712fab242c86a241c229cf562195aad985d0564bd352ac404be583029e89e93028ffd2c251d2c407ecac5fb0cbdca94a2d5c10f29ac806ede0508b3ff
-  languageName: node
-  linkType: hard
-
 "@csstools/selector-specificity@npm:^2.0.2":
  version: 2.2.0
  resolution: "@csstools/selector-specificity@npm:2.2.0"
@@ -3644,7 +3635,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0":
+"@jridgewell/resolve-uri@npm:^3.1.0":
  version: 3.1.2
  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
  checksum: 10/97106439d750a409c22c8bff822d648f6a71f3aa9bc8e5129efdc36343cd3096ddc4eeb1c62d2fe48e9bdd4db37b05d4646a17114ecebd3bbcacfa2de51c3c1d
@@ -3675,16 +3666,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@jridgewell/trace-mapping@npm:0.3.9":
-  version: 0.3.9
-  resolution: "@jridgewell/trace-mapping@npm:0.3.9"
-  dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.0.3"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
-  checksum: 10/83deafb8e7a5ca98993c2c6eeaa93c270f6f647a4c0dc00deb38c9cf9b2d3b7bf15e8839540155247ef034a052c0ec4466f980bf0c9e2ab63b97d16c0cedd3ff
-  languageName: node
-  linkType: hard
-
 "@jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
  version: 0.3.25
  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
@@ -3880,7 +3861,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@npm:^7.1.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@npm:^7.1.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3889,7 +3870,6 @@ __metadata:
    concurrently: "npm:7.2.1"
    copyfiles: "npm:^2.4.1"
    cross-zip-cli: "npm:1.0.0"
-    dotenv: "npm:^10.0.0"
    fast-glob: "npm:3.2.11"
    hast-util-select: "npm:5.0.5"
    js-yaml: "npm:^4.1.0"
@@ -3899,6 +3879,7 @@ __metadata:
    react: "npm:^18.0.0"
    rehype-parse: "npm:8.0.4"
    tsc-alias: "npm:1.8.8"
+    tsx: "npm:^4.7.1"
    typescript: "npm:^5.1.6"
    unified: "npm:10.1.2"
    vitest: "npm:^1.2.2"
@@ -3909,8 +3890,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": "npm:^7.1.1"
-    "@navikt/ds-tokens": "npm:^7.1.1"
+    "@navikt/ds-css": "npm:^7.1.2"
+    "@navikt/ds-tokens": "npm:^7.1.2"
    concurrently: "npm:7.2.1"
    postcss-selector-parser: "npm:^6.0.13"
    postcss-value-parser: "npm:^4.2.0"
@@ -3925,7 +3906,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": "npm:7.1.1"
+    "@navikt/ds-css": "npm:7.1.2"
    axios: "npm:1.7.4"
    chalk: "npm:4.1.0"
    clipboardy: "npm:^2.3.0"
@@ -3946,11 +3927,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.1.1, @navikt/ds-css@npm:^7.1.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.1.2, @navikt/ds-css@npm:^7.1.2, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": "npm:^7.1.1"
+    "@navikt/ds-tokens": "npm:^7.1.2"
    cssnano: "npm:6.0.0"
    fast-glob: "npm:3.2.11"
    lodash: "npm:4.17.21"
@@ -3963,14 +3944,14 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.1.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.1.2, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": "npm:0.25.4"
    "@floating-ui/react-dom": "npm:^2.0.9"
-    "@navikt/aksel-icons": "npm:^7.1.1"
-    "@navikt/ds-tokens": "npm:^7.1.1"
+    "@navikt/aksel-icons": "npm:^7.1.2"
+    "@navikt/ds-tokens": "npm:^7.1.2"
    "@testing-library/dom": "npm:9.3.4"
    "@testing-library/jest-dom": "npm:^5.16.0"
    "@testing-library/react": "npm:^15.0.7"
@@ -3987,8 +3968,8 @@ __metadata:
    react-router-dom: "npm:^6.3.0"
    rimraf: "npm:6.0.1"
    swr: "npm:^1.1.2"
-    ts-node: "npm:^10.9.1"
    tsc-alias: "npm:1.8.8"
+    tsx: "npm:^4.19.1"
    typescript: "npm:^5.1.6"
    vitest: "npm:^1.2.2"
  peerDependencies:
@@ -4000,21 +3981,21 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@npm:^7.1.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@npm:^7.1.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": "npm:^7.1.1"
+    "@navikt/ds-tokens": "npm:^7.1.2"
    color: "npm:4.2.3"
    lodash: "npm:^4.17.21"
    tailwindcss: "npm:^3.3.3"
-    ts-node: "npm:^10.9.1"
+    tsx: "npm:^4.19.1"
    typescript: "npm:^5.1.6"
    vitest: "npm:^1.2.2"
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@npm:^7.1.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@npm:^7.1.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -4711,7 +4692,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/icons@npm:^2.0.0, @sanity/icons@npm:^2.4.1":
+"@sanity/icons@npm:^2.0.0, @sanity/icons@npm:^2.4.1, @sanity/icons@npm:^2.7.0":
  version: 2.11.8
  resolution: "@sanity/icons@npm:2.11.8"
  peerDependencies:
@@ -4921,7 +4902,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/preview-url-secret@npm:^1.6.21":
+"@sanity/preview-url-secret@npm:^1.6.21, @sanity/preview-url-secret@npm:^1.6.4":
  version: 1.6.21
  resolution: "@sanity/preview-url-secret@npm:1.6.21"
  dependencies:
@@ -5015,7 +4996,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/ui@npm:^2.8.9":
+"@sanity/ui@npm:^2.0.10, @sanity/ui@npm:^2.8.9":
  version: 2.8.9
  resolution: "@sanity/ui@npm:2.8.9"
  dependencies:
@@ -6186,34 +6167,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@tsconfig/node10@npm:^1.0.7":
-  version: 1.0.11
-  resolution: "@tsconfig/node10@npm:1.0.11"
-  checksum: 10/51fe47d55fe1b80ec35e6e5ed30a13665fd3a531945350aa74a14a1e82875fb60b350c2f2a5e72a64831b1b6bc02acb6760c30b3738b54954ec2dea82db7a267
-  languageName: node
-  linkType: hard
-
-"@tsconfig/node12@npm:^1.0.7":
-  version: 1.0.11
-  resolution: "@tsconfig/node12@npm:1.0.11"
-  checksum: 10/5ce29a41b13e7897a58b8e2df11269c5395999e588b9a467386f99d1d26f6c77d1af2719e407621412520ea30517d718d5192a32403b8dfcc163bf33e40a338a
-  languageName: node
-  linkType: hard
-
-"@tsconfig/node14@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "@tsconfig/node14@npm:1.0.3"
-  checksum: 10/19275fe80c4c8d0ad0abed6a96dbf00642e88b220b090418609c4376e1cef81bf16237bf170ad1b341452feddb8115d8dd2e5acdfdea1b27422071163dc9ba9d
-  languageName: node
-  linkType: hard
-
-"@tsconfig/node16@npm:^1.0.2":
-  version: 1.0.4
-  resolution: "@tsconfig/node16@npm:1.0.4"
-  checksum: 10/202319785901f942a6e1e476b872d421baec20cf09f4b266a1854060efbf78cde16a4d256e8bc949d31e6cd9a90f1e8ef8fb06af96a65e98338a2b6b0de0a0ff
-  languageName: node
-  linkType: hard
-
 "@types/aria-query@npm:^5.0.1":
  version: 5.0.4
  resolution: "@types/aria-query@npm:5.0.4"
@@ -7765,7 +7718,7 @@ __metadata:
  languageName: node
  linkType: hard

-"acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.1.1, acorn-walk@npm:^8.3.2":
+"acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.3.2":
  version: 8.3.4
  resolution: "acorn-walk@npm:8.3.4"
  dependencies:
@@ -7783,7 +7736,7 @@ __metadata:
  languageName: node
  linkType: hard

-"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
  version: 8.12.1
  resolution: "acorn@npm:8.12.1"
  bin:
@@ -7914,11 +7867,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": "npm:^7.1.1"
-    "@navikt/ds-css": "npm:^7.1.1"
-    "@navikt/ds-react": "npm:^7.1.1"
-    "@navikt/ds-tailwind": "npm:^7.1.1"
-    "@navikt/ds-tokens": "npm:^7.1.1"
+    "@navikt/aksel-icons": "npm:^7.1.2"
+    "@navikt/ds-css": "npm:^7.1.2"
+    "@navikt/ds-react": "npm:^7.1.2"
+    "@navikt/ds-tailwind": "npm:^7.1.2"
+    "@navikt/ds-tokens": "npm:^7.1.2"
  languageName: unknown
  linkType: soft

@@ -7926,7 +7879,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel@workspace:."
  dependencies:
-    "@biomejs/biome": "npm:1.8.0"
+    "@biomejs/biome": "npm:1.9.3"
    "@changesets/cli": "npm:2.26.2"
    "@storybook/addon-a11y": "npm:^8.3.4"
    "@storybook/addon-essentials": "npm:^8.3.4"
@@ -8105,13 +8058,6 @@ __metadata:
  languageName: node
  linkType: hard

-"arg@npm:^4.1.0":
-  version: 4.1.3
-  resolution: "arg@npm:4.1.3"
-  checksum: 10/969b491082f20cad166649fa4d2073ea9e974a4e5ac36247ca23d2e5a8b3cb12d60e9ff70a8acfe26d76566c71fd351ee5e6a9a6595157eb36f92b1fd64e1599
-  languageName: node
-  linkType: hard
-
 "arg@npm:^5.0.2":
  version: 5.0.2
  resolution: "arg@npm:5.0.2"
@@ -10005,13 +9951,6 @@ __metadata:
  languageName: node
  linkType: hard

-"create-require@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "create-require@npm:1.1.1"
-  checksum: 10/a9a1503d4390d8b59ad86f4607de7870b39cad43d929813599a23714831e81c520bddf61bcdd1f8e30f05fd3a2b71ae8538e946eb2786dc65c2bbc520f692eff
-  languageName: node
-  linkType: hard
-
 "crelt@npm:^1.0.5":
  version: 1.0.6
  resolution: "crelt@npm:1.0.6"
@@ -10932,13 +10871,6 @@ __metadata:
  languageName: node
  linkType: hard

-"diff@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "diff@npm:4.0.2"
-  checksum: 10/ec09ec2101934ca5966355a229d77afcad5911c92e2a77413efda5455636c4cf2ce84057e2d7715227a2eeeda04255b849bd3ae3a4dd22eb22e86e76456df069
-  languageName: node
-  linkType: hard
-
 "dir-glob@npm:^3.0.1":
  version: 3.0.1
  resolution: "dir-glob@npm:3.0.1"
@@ -11144,13 +11076,6 @@ __metadata:
  languageName: node
  linkType: hard

-"dotenv@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "dotenv@npm:10.0.0"
-  checksum: 10/55f701ae213e3afe3f4232fae5edfb6e0c49f061a363ff9f1c5a0c2bf3fb990a6e49aeada11b2a116efb5fdc3bc3f1ef55ab330be43033410b267f7c0809a9dc
-  languageName: node
-  linkType: hard
-
 "dotenv@npm:^16.0.3":
  version: 16.4.5
  resolution: "dotenv@npm:16.4.5"
@@ -16346,13 +16271,6 @@ __metadata:
  languageName: node
  linkType: hard

-"make-error@npm:^1.1.1":
-  version: 1.3.6
-  resolution: "make-error@npm:1.3.6"
-  checksum: 10/b86e5e0e25f7f777b77fabd8e2cbf15737972869d852a22b7e73c17623928fccb826d8e46b9951501d3f20e51ad74ba8c59ed584f610526a48f8ccf88aaec402
-  languageName: node
-  linkType: hard
-
 "make-fetch-happen@npm:^13.0.0":
  version: 13.0.1
  resolution: "make-fetch-happen@npm:13.0.1"
@@ -21644,6 +21562,25 @@ __metadata:
  languageName: node
  linkType: hard

+"sanity-plugin-iframe-pane@npm:^3.1.6":
+  version: 3.1.6
+  resolution: "sanity-plugin-iframe-pane@npm:3.1.6"
+  dependencies:
+    "@sanity/icons": "npm:^2.7.0"
+    "@sanity/incompatible-plugin": "npm:^1.0.4"
+    "@sanity/preview-url-secret": "npm:^1.6.4"
+    "@sanity/ui": "npm:^2.0.10"
+    framer-motion: "npm:11.0.8"
+    suspend-react: "npm:0.1.3"
+    usehooks-ts: "npm:3.0.1"
+  peerDependencies:
+    react: ^18.2.0
+    sanity: ^3.20.0
+    styled-components: ^5.2 || ^6.0.0
+  checksum: 10/b12420270664d6bc6d7ec8ecb3031a02feda0e811c81928713d90ec556d9df0cc9edd2b586691412f2c4d7e2dc5042df01a1ac7525c5b9d4a00804f41390ca1f
+  languageName: node
+  linkType: hard
+
 "sanity-plugin-media@npm:^2.3.2":
  version: 2.3.2
  resolution: "sanity-plugin-media@npm:2.3.2"
@@ -24036,44 +23973,6 @@ __metadata:
  languageName: node
  linkType: hard

-"ts-node@npm:^10.9.1":
-  version: 10.9.2
-  resolution: "ts-node@npm:10.9.2"
-  dependencies:
-    "@cspotcode/source-map-support": "npm:^0.8.0"
-    "@tsconfig/node10": "npm:^1.0.7"
-    "@tsconfig/node12": "npm:^1.0.7"
-    "@tsconfig/node14": "npm:^1.0.0"
-    "@tsconfig/node16": "npm:^1.0.2"
-    acorn: "npm:^8.4.1"
-    acorn-walk: "npm:^8.1.1"
-    arg: "npm:^4.1.0"
-    create-require: "npm:^1.1.0"
-    diff: "npm:^4.0.1"
-    make-error: "npm:^1.1.1"
-    v8-compile-cache-lib: "npm:^3.0.1"
-    yn: "npm:3.1.1"
-  peerDependencies:
-    "@swc/core": ">=1.2.50"
-    "@swc/wasm": ">=1.2.50"
-    "@types/node": "*"
-    typescript: ">=2.7"
-  peerDependenciesMeta:
-    "@swc/core":
-      optional: true
-    "@swc/wasm":
-      optional: true
-  bin:
-    ts-node: dist/bin.js
-    ts-node-cwd: dist/bin-cwd.js
-    ts-node-esm: dist/bin-esm.js
-    ts-node-script: dist/bin-script.js
-    ts-node-transpile-only: dist/bin-transpile.js
-    ts-script: dist/bin-script-deprecated.js
-  checksum: 10/a91a15b3c9f76ac462f006fa88b6bfa528130dcfb849dd7ef7f9d640832ab681e235b8a2bc58ecde42f72851cc1d5d4e22c901b0c11aa51001ea1d395074b794
-  languageName: node
-  linkType: hard
-
 "tsc-alias@npm:1.8.8":
  version: 1.8.8
  resolution: "tsc-alias@npm:1.8.8"
@@ -24846,6 +24745,17 @@ __metadata:
  languageName: node
  linkType: hard

+"usehooks-ts@npm:3.0.1":
+  version: 3.0.1
+  resolution: "usehooks-ts@npm:3.0.1"
+  dependencies:
+    lodash.debounce: "npm:^4.0.8"
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 10/ad80424c4e7613118a1333af63220efb06a63368d1cd0b9baa96bf40615e656ab93429a32821061e86127f8de77058423accc959d7c06aa6e15823f4765d9e5b
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
  version: 1.0.2
  resolution: "util-deprecate@npm:1.0.2"
@@ -24916,13 +24826,6 @@ __metadata:
  languageName: node
  linkType: hard

-"v8-compile-cache-lib@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "v8-compile-cache-lib@npm:3.0.1"
-  checksum: 10/88d3423a52b6aaf1836be779cab12f7016d47ad8430dffba6edf766695e6d90ad4adaa3d8eeb512cc05924f3e246c4a4ca51e089dccf4402caa536b5e5be8961
-  languageName: node
-  linkType: hard
-
 "v8-compile-cache@npm:^2.3.0":
  version: 2.4.0
  resolution: "v8-compile-cache@npm:2.4.0"
@@ -25512,7 +25415,6 @@ __metadata:
    copyfiles: "npm:^2.4.1"
    cross-env: "npm:^7.0.0"
    date-fns: "npm:^3.0.0"
-    dotenv: "npm:^10.0.0"
    fuse.js: "npm:^7.0.0"
    jscodeshift: "npm:^0.15.1"
    jsdom: "npm:^22.1.0"
@@ -25538,6 +25440,7 @@ __metadata:
    remark-gfm: "npm:^4.0.0"
    rss: "npm:^1.2.2"
    sanity: "npm:3.59.0"
+    sanity-plugin-iframe-pane: "npm:^3.1.6"
    sanity-plugin-media: "npm:^2.3.2"
    sharp: "npm:0.32.6"
    showdown: "npm:^2.1.0"
@@ -25546,7 +25449,7 @@ __metadata:
    swr: "npm:^1.1.2"
    tailwindcss: "npm:^3.3.3"
    tinycolor2: "npm:^1.6.0"
-    ts-node: "npm:^10.9.1"
+    tsx: "npm:^4.19.1"
    typescript: "npm:^5.1.6"
    vitest: "npm:^1.2.2"
    zod: "npm:^3.22.4"
@@ -26086,13 +25989,6 @@ __metadata:
  languageName: node
  linkType: hard

-"yn@npm:3.1.1":
-  version: 3.1.1
-  resolution: "yn@npm:3.1.1"
-  checksum: 10/2c487b0e149e746ef48cda9f8bad10fc83693cd69d7f9dcd8be4214e985de33a29c9e24f3c0d6bcf2288427040a8947406ab27f7af67ee9456e6b84854f02dd6
-  languageName: node
-  linkType: hard
-
 "yocto-queue@npm:^0.1.0":
  version: 0.1.0
  resolution: "yocto-queue@npm:0.1.0"
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	a2e020d4f3	Version Packages (#3206 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-10-08 11:50:48 +02:00
Halvor Haugan	074c8da536	List: ✨ New size 'large' (#3207 )	2024-10-08 11:30:47 +02:00
KenandHalvor Haugan	bdbd6c24cc	[Dependencies] Replaced `ts-node` with `tsx`, removed `dotenv` (#3198 ) * refactor: ds-react uses tsx instead of ts-node * refactor: ds-tailwind uses tsx * refactor: Website backup and search uses tsx * refactor: Test urls and rss-feed uses tsx * refactor: Prop-updates uses tsx * refactor: All website scripts uses tsx * refactor: removed dotenv dependency from website * feat: removed all dependencies to dotenv * bug: Remove need for env in validate build script * test: Create empty env file * test: Scope env-file to build-dir * bug: Fallback to empty env when no env exsists * feat: Better error-messaging when fetching new icons * Update @navikt/aksel-icons/package.json Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-10-08 10:18:51 +02:00
Ken	f0e6c944d8	[Referansesider] Updated contrast tokens to new naming	2024-10-08 10:16:17 +02:00
Ken	22be148832	[Darkside] Moved contrast-tokens to text group feat: Moved contrast tokens to 'text' collection feat: Added support for adding custom scopes for each token	2024-10-08 10:06:43 +02:00
KenandHalvor Haugan	aac12fe44f	[Linting] Fixed useExhaustiveDependencies in biome (#3197 ) * feat: Update biome * feat: migrate biome config * misc: Ignore semantic-tag rule biome * refactor: resolved breaking changes after biome update * feat: remove old excluded biome rule * feat: Removed a11y/useFocusableInteractive ignore * refactor: Fix useExhaustiveDependencies biome * memo: changeset * memo: changeset gitmoji * bug: Re-add selectedOptions to dependency array * Update @navikt/core/react/src/overlays/dismissablelayer/DismissableLayer.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * bug: Fix initial focus for sidebar icon * ⚡ remove reduntant memoization of isLimitReached * bug: re-add sanity-plugin-iframe-pane --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-10-08 09:05:59 +02:00
Halvor Haugan	324358d086	FileUpload: 💥 Remove UNSAFE-prefix (#3205 )	2024-10-07 15:16:25 +02:00
Ken	946cbeb016	[Liniting] Updated to biome v1.9 (#3196 ) * feat: Update biome * feat: migrate biome config * misc: Ignore semantic-tag rule biome * refactor: resolved breaking changes after biome update * feat: remove old excluded biome rule * feat: Removed a11y/useFocusableInteractive ignore * refactor: Remove ariaRole rule * bug: Remove extra fragments in dartepicker stories * bug: Remove custom image rendering exception for safari on website	2024-10-05 15:41:23 +02:00
Sjur	f4d22dae68	Endret Neutral-farger Darth Mode (#3204 ) Neutral-fargene ble hentet fra fargene med lavere saturation, som gjorde at de mistet hintet av blått. Endret til den originale skalaen.	2024-10-04 22:09:27 +02:00
Ken	ce2f5a9b90	[Darkside] Fixed missing test updates	2024-10-04 16:01:58 +02:00