Version Packages (#1837)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/config.json

@@ -1,9 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "navikt/Designsystemet" }
-  ],
+  "changelog": ["@changesets/changelog-github", { "repo": "navikt/aksel" }],
   "commit": false,
   "fixed": [
     [
@@ -19,7 +16,7 @@
   ],
   "linked": [],
   "access": "public",
-  "baseBranch": "master",
+  "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],
 

.github/ISSUE_TEMPLATE/new-component.yml

@@ -0,0 +1,24 @@
+name: Ny komponent
+description: Send et ønske om en eller flere nye komponenter
+title: "[Ny komponent]: "
+labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Navn på komponent
+      description: Hva er navnet på komponenten du ønsker deg?
+      placeholder: eks. datepicker
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Eksempel på komponenten
+      description: Send en lenke til eksempler på komponenten

.github/ISSUE_TEMPLATE/new-icon.yaml

@@ -0,0 +1,24 @@
+name: Nytt ikon
+description: Send et ønske om et eller flere nye ikoner
+title: "[Nytt ikon]: "
+labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Navn på ikonet
+      description: Hva er navnet på ikonet du ønsker deg?
+      placeholder: eks. send
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Eksempel på ikonet
+      description: Send en lenke til eksempler på ikonet

.github/ISSUE_TEMPLATE/update-component.yml

@@ -0,0 +1,16 @@
+name: Innspill til komponent
+description: Send inn innspill til komponent
+title: "[Innspill til komponent]: "
+labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: textarea
+    id: feeback
+    attributes:
+      label: Tilbakemelding
+      description: Beskriv hvilke tilbakemeldinger du har til komponenten

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -0,0 +1,16 @@
+name: Innspill til ikon
+description: Send inn innspill til ikon
+title: "[Tilbakemelding på ikon]: "
+labels: ["forespørsel 🥰", "ikoner 🖼️"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: textarea
+    id: feeback
+    attributes:
+      label: Tilbakemelding
+      description: Beskriv hvilke tilbakemeldinger du har til ikonet

.github/workflows/aksel-dev.yml

@@ -6,19 +6,45 @@ on:
       - next
 
 env:
-  IMAGE: ghcr.io/navikt/designsystemet
+  IMAGE: ghcr.io/navikt/aksel
 
 jobs:
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        continue-on-error: true
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: monitor
+          args: --org=designsystemet --severity-threshold=high
+  snyk-test:
+    name: analyze dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        continue-on-error: true
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test
+          args: --org=designsystemet --severity-threshold=high
   build_and_deploy:
     name: Build and deploy to dev-gcp
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: "14"
-      - uses: actions/checkout@v2
-        with:
-          ref: "next"
+          node-version: "16"
+      - uses: actions/checkout@v3
       - name: add tokens to .env
         run: |
           echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
@@ -40,11 +66,10 @@ jobs:
       - name: Build application
         run: |
           yarn boot
-          yarn docgen
           yarn workspace aksel.nav.no build:next
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

.github/workflows/aksel-prod.yml

@@ -2,22 +2,81 @@ name: Deploy aksel.nav.no
 on:
   push:
     branches:
-      - master
+      - main
     paths:
       - "aksel.nav.no/**"
 
 env:
-  IMAGE: ghcr.io/navikt/designsystemet
+  IMAGE: ghcr.io/navikt/aksel
 
 jobs:
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        continue-on-error: true
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: monitor
+          args: --org=designsystemet --severity-threshold=high
+  snyk-test:
+    name: analyze dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        continue-on-error: true
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test
+          args: --org=designsystemet --severity-threshold=high
+  sync_data_with_sanity:
+    name: Update component data
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - uses: actions/checkout@v3
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run docgen
+        run: |
+          yarn boot
+          yarn docgen
+
+      - name: Update sanity sync
+        run: yarn workspace aksel.nav.no sanity:update
+
   build_and_deploy:
     name: Build and deploy to prod-gcp
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: "14"
-      - uses: actions/checkout@v2
+          node-version: "16"
+      - uses: actions/checkout@v3
       - name: add tokens to .env
         run: |
           echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
@@ -36,25 +95,17 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - name: build packages
-        run: |
-          yarn boot
-          yarn docgen
+      - name: Build packages
+        run: yarn boot
 
       - name: Tests
         run: yarn workspace aksel.nav.no test
 
-      - name: E2E
-        run: NEXT_PUBLIC_TEST=true yarn workspace website e2e
-
-      - name: Update sanity sync
-        run: yarn workspace aksel.nav.no sanity:update
-
       - name: Build application
         run: yarn workspace aksel.nav.no build:next
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -65,6 +116,13 @@ jobs:
         run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ env.TAG }}" >> $GITHUB_ENV
       - name: Build docker image
         run: docker build -t ${{ env.DOCKER_TAG }} . -f aksel.nav.no/Dockerfile
+      - name: Wait for e2e-tests to succeed
+        uses: lewagon/wait-on-check-action@v1.2.0
+        with:
+          ref: ${{ github.ref }}
+          check-name: "Smoketest Aksel"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
       - name: Push docker image
         run: |
           docker push ${{ env.DOCKER_TAG }}

.github/workflows/aksel-redeploy.yml

@@ -12,19 +12,19 @@ on:
         default: "false"
 
 env:
-  IMAGE: ghcr.io/navikt/designsystemet
+  IMAGE: ghcr.io/navikt/aksel
 
 jobs:
   redeploy:
     name: Redeploy image
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: "14"
-      - uses: actions/checkout@v2
+          node-version: "16"
+      - uses: actions/checkout@v3
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

.github/workflows/backup-sanity.yml

@@ -8,10 +8,10 @@ jobs:
   execute:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Required to retrieve git history
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
 
@@ -26,7 +26,7 @@ jobs:
         run: cd aksel.nav.no/website && yarn
 
       - name: Export dataset
-        run: cd aksel.nav.no/website && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
+        run: cd aksel.nav.no/website && SANITY_PREVIEW_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v0"
         with:

.github/workflows/chromatic.yml

@@ -3,11 +3,11 @@ name: Visual Regression Tests
 on:
   push:
     branches:
-      - "master"
+      - "main"
     paths:
       - "@navikt/**"
   pull_request:
-    branches: [master, next]
+    branches: [main, next]
     paths:
       - "@navikt/**"
 
@@ -44,10 +44,11 @@ jobs:
         id: chromatic_tests
         continue-on-error: true
         with:
-          autoAcceptChanges: "master"
+          autoAcceptChanges: "main"
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: x3xqdfgkujg
           exitZeroOnChanges: false
+          buildScriptName: "build:storybook"
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
@@ -74,7 +75,7 @@ jobs:
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: "github-actions[bot]"
-          body-includes: Chromatic build-output
+          body-includes: github-comment-finder
 
       - name: Create or update comment
         if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
@@ -83,13 +84,9 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            Chromatic build-output:
+            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})
 
-            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
-            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :white_check_mark: No changes detected :white_check_mark:
-
-            commit: `${{ steps.vars.outputs.sha_short }}`
+            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace
 
       - name: Create or update failed comment
@@ -99,11 +96,9 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            **Chromatic build-output**:
+            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})
 
-            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
-            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :no_entry_sign: Changes detected :no_entry_sign:, review endringer.
+            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}
 
-            commit: `${{ steps.vars.outputs.sha_short }}`
+            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   push:
     branches:
-      - master
+      - main
       - next
   pull_request:
   workflow_dispatch:

.github/workflows/codeql.yml

@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [master, next]
+    branches: [main, next]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [master]
+    branches: [main]
   schedule:
     - cron: "41 8 * * 6"
 

.github/workflows/e2e.yml

@@ -1,17 +1,19 @@
 name: E2E / Playwright Tests
 on:
   push:
-    branches: [master, next]
+    branches: [main, next]
     paths:
       - "aksel.nav.no/**"
   pull_request:
-    branches: [master, next]
+    branches: [main, next]
     paths:
       - "aksel.nav.no/**"
 
 jobs:
   playwright:
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.30.0-focal
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -36,15 +38,15 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - name: build packages
+      - name: Build packages
         run: |
           yarn boot
-          yarn docgen
 
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
       - name: Run Playwright tests
-        run: yarn workspace website e2e:full
+        run: yarn workspace website e2e:ci-full
       - uses: actions/upload-artifact@v3
         if: always()
         with:

.github/workflows/push-to-cdn.yaml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - "master"
+      - "main"
     paths:
       - "fonts/**"
 

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     branches:
-      - master
+      - main
   workflow_dispatch:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/smoketest.yml

@@ -0,0 +1,49 @@
+name: Smoketest aksel.nav.no
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/aksel
+
+jobs:
+  smoketest:
+    name: Smoketest Aksel
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.30.0-focal
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - uses: actions/checkout@v3
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: build packages
+        run: |
+          yarn boot
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: E2E smoketest
+        run: yarn workspace website e2e:ci

.storybook/indexer.ts

@@ -0,0 +1,33 @@
+import { loadCsf } from "@storybook/csf-tools";
+import { readFileSync } from "fs";
+
+module.exports = (indexers) => {
+  const csfIndexer = async (fileName: string, opts) => {
+    const code = readFileSync(fileName, "utf-8").toString();
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  const exampleIndexer = async (fileName: string, opts) => {
+    let code = readFileSync(fileName, "utf-8").toString();
+
+    code = code.replace("export const args =", "const args =");
+
+    code += `\nexport default { title: "Eksempler/${fileName
+      .split("pages/eksempler/")[1]
+      .replace(".tsx", "")}"  };\n`;
+
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  return [
+    ...(indexers || []),
+    {
+      test: /(stories|story)\.[tj]sx?$/,
+      indexer: csfIndexer,
+    },
+    {
+      test: /pages\/eksempler\/|(".+")|(.+.tsx)$/,
+      indexer: exampleIndexer,
+    },
+  ];
+};

.storybook/intro.stories.mdx

@@ -1,15 +1,12 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 
-<Meta title="Intro/Velkommen" />
+<Meta title="Intro" />
 
 # Aksel, NAVs designsystem
 
-- [Dokumentasjon](https://aksel.nav.no/designsystem)
-- [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+- [Dokumentasjon](https://aksel.nav.no/komponenter)
 
-## Kom i gang
-
-### Kjernepakke
+### Core
 
 ```bash
 yarn add @navikt/ds-react @navikt/ds-css
@@ -21,7 +18,7 @@ yarn add @navikt/ds-react @navikt/ds-css
 yarn add @navikt/ds-react-internal @navikt/ds-css-internal
 ```
 
-### Ikonpakke
+### Ikoner
 
 ```bash
 yarn add @navikt/ds-icons

.storybook/layout.css

@@ -19,3 +19,13 @@
 .rowgap-wrap {
   flex-wrap: wrap;
 }
+
+.css-warning {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 6px;
+  padding: 1.5rem;
+  background-color: var(--a-surface-warning-subtle);
+  border: 1px solid var(--a-border-warning);
+}

.storybook/main.cjs

@@ -0,0 +1,81 @@
+const storyIndexers = require("./indexer");
+
+const path = require("path");
+const { mergeConfig } = require("vite");
+
+module.exports = {
+  storyIndexers,
+  devServer: {
+    stats: "errors-only",
+  },
+  staticDirs: ["./public"],
+
+  stories: () => [
+    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+    "./*.stories.mdx",
+    ...(process.env.STORYBOOK_STORIES === "all"
+      ? [
+          "../aksel.nav.no/website/components/**/*.stories.tsx",
+          "../aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        ]
+      : []),
+  ],
+  addons: [
+    "@storybook/addon-a11y",
+    "@whitespace/storybook-addon-html",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+        controls: {
+          hideNoControlsWarning: true,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: false,
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      define: { "process.env": {} },
+      resolve: {
+        alias: [
+          /*
+          // Example
+          {
+            find: "@components",
+            replacement: path.resolve(__dirname, "./src/components"),
+          }, */
+          {
+            find: "components",
+            replacement: path.resolve(
+              __dirname,
+              "../aksel.nav.no/website/components"
+            ),
+          },
+        ],
+      },
+    });
+  },
+};

.storybook/main.js

@@ -1,58 +0,0 @@
-const getStories = () => {
-  return process.env.stories
-    ? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
-    : ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
-};
-
-module.exports = {
-  webpackFinal: async (config, { configType }) => {
-    config.devServer = {
-      stats: "errors-only",
-    };
-    return config;
-  },
-  staticDirs: ["./public"],
-  devServer: {
-    stats: "errors-only",
-  },
-  stories: () => [...getStories(), "./*.stories.mdx"],
-  addons: [
-    "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
-    {
-      name: "@storybook/addon-storysource",
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
-    },
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        actions: false,
-        controls: {
-          hideNoControlsWarning: true,
-        },
-      },
-    },
-  ],
-  features: {
-    storyStoreV7: true,
-  },
-  core: {
-    builder: {
-      name: "webpack5",
-      options: {
-        lazyCompilation: false,
-        fsCache: true,
-      },
-    },
-  },
-  framework: "@storybook/react",
-  typescript: {
-    check: false,
-    checkOptions: {},
-    reactDocgen: false,
-  },
-};

.storybook/manager.js

@@ -1,12 +1,6 @@
 import { addons } from "@storybook/addons";
-import NavTheme from "./theme.js";
-/* import logoUrl from "./public/logo.svg"; */
+import AkselTheme from "./theme.js";
 
 addons.setConfig({
-  theme: NavTheme,
+  theme: AkselTheme,
 });
-
-/* const link = document.createElement("link");
-link.setAttribute("rel", "shortcut icon");
-link.setAttribute("href", logoUrl);
-document.head.appendChild(link); */

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.jsx

@@ -3,18 +3,15 @@ import "@navikt/ds-css-internal/index.css";
 import "./layout.css";
 
 export const parameters = {
-  /* actions: { argTypesRegex: "^on[A-Z].*" }, */
   options: {
     storySort: {
       method: "",
-      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
+      order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
       locales: "",
     },
   },
-  viewMode: "docs",
   layout: "centered",
   backgrounds: {
-    default: "Canvas",
     values: [
       {
         name: "Canvas",
@@ -32,7 +29,6 @@ export const globalTypes = {
   theme: {
     name: "Theme",
     description: "Global theme for components",
-    defaultValue: "light",
     toolbar: {
       icon: "circlehollow",
       items: [
@@ -44,10 +40,24 @@ export const globalTypes = {
   },
 };
 
-export const withTheme = (StoryFn, context) => (
-  <div data-theme={context.parameters.theme || context.globals.theme} lang="no">
-    <StoryFn />
-  </div>
-);
+export const withTheme = (StoryFn, context) => {
+  const foundCss =
+    context.parameters.fileName.startsWith("./@navikt") &&
+    document.querySelector('[data-vite-dev-id$="dist/tw.css"]');
+  return (
+    <div
+      data-theme={context.parameters.theme || context.globals.theme || "light"}
+      lang="no"
+      id="root"
+    >
+      {foundCss && (
+        <div className="css-warning">
+          OBS! Ser ut som CSS fra aksel.nav.no er lastet. Refresh siden!
+        </div>
+      )}
+      <StoryFn />
+    </div>
+  );
+};
 
 export const decorators = [withTheme];

.storybook/public/logo.svg

@@ -1,20 +1,38 @@
 <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="44"
-  height="44"
+  width="119"
+  height="26"
+  viewBox="0 0 119 26"
   fill="none"
-  viewBox="0 0 44 44"
+  xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    fill="rgba(153, 196, 221, 1)"
-    fill-rule="evenodd"
-    d="M9.07 3.03A10.33 10.33 0 0 1 16.37 0h17.3C39.37 0 44 4.62 44 10.33v17.3c0 2.73-1.09 5.36-3.03 7.3l-6.04 6.04a10.33 10.33 0 0 1-7.3 3.03h-17.3C4.63 44 0 39.38 0 33.67v-17.3c0-2.73 1.09-5.36 3.03-7.3l6.04-6.04Z"
-    clip-rule="evenodd"
-  ></path>
+    d="M56.9682 23.3413L48.1959 1.94542C47.9106 1.30354 47.2687 0.839966 46.5199 0.839966C45.8067 0.839966 45.1292 1.30354 44.8795 1.94542L36.1072 23.3413C36.0359 23.5196 36.0002 23.6623 36.0002 23.7692C36.0002 24.3398 36.4638 24.839 37.07 24.839C37.498 24.839 37.9259 24.5537 38.0685 24.1615L40.1724 18.8838H52.903L55.0069 24.1615C55.1496 24.5537 55.5418 24.839 56.0054 24.839C56.6116 24.839 57.0752 24.3398 57.0752 23.7692C57.0752 23.5909 57.0039 23.4483 56.9682 23.3413ZM40.9213 17.0295L46.5199 2.9439L52.1541 17.0295H40.9213Z"
+    fill="#004367"
+  />
+  <path
+    d="M75.0623 23.2343L68.1086 15.3179L74.884 8.93474C75.0623 8.75645 75.1693 8.50683 75.1693 8.29287C75.1693 7.82929 74.8127 7.40137 74.3135 7.40137C74.0995 7.40137 73.8855 7.47269 73.7072 7.61533L63.4729 17.3148V1.76712C63.4729 1.26788 63.045 0.839966 62.5457 0.839966C62.0465 0.839966 61.6186 1.26788 61.6186 1.76712V23.9119C61.6186 24.4111 62.0465 24.839 62.5457 24.839C63.045 24.839 63.4729 24.4111 63.4729 23.9119V19.5614L66.6823 16.5303L73.6003 24.5181C73.7786 24.732 74.0282 24.839 74.3491 24.839C74.884 24.839 75.2763 24.4111 75.2763 23.8762C75.2763 23.6266 75.205 23.4126 75.0623 23.2343Z"
+    fill="#004367"
+  />
+  <path
+    d="M79.0353 22.9491C80.747 24.5181 82.6726 25.16 85.1331 25.16C89.448 25.16 91.5876 22.8777 91.5876 20.0963C91.5876 16.4233 88.2712 15.6031 85.3114 14.8543C82.9222 14.2481 80.7113 13.7132 80.7113 11.7519C80.7113 9.96888 82.3517 8.64947 85.0262 8.64947C86.9518 8.64947 88.5565 9.327 89.6619 10.3968C89.7689 10.5038 89.9829 10.6108 90.1612 10.6108C90.6247 10.6108 90.9813 10.2185 90.9813 9.79058C90.9813 9.5053 90.8744 9.327 90.6961 9.1487C89.4123 7.93627 87.5937 7.08043 85.0262 7.08043C81.1392 7.08043 78.8927 9.22002 78.8927 11.8589C78.8927 15.2109 82.0664 15.9597 84.9548 16.6729C87.4154 17.3148 89.7689 17.9567 89.7689 20.1676C89.7689 22.1645 88.0572 23.5909 85.1688 23.5909C83.0649 23.5909 81.3532 22.7708 80.1408 21.6296C79.9981 21.487 79.8198 21.4157 79.6059 21.4157C79.1066 21.4157 78.7144 21.8079 78.7144 22.3072C78.7144 22.5568 78.857 22.8064 79.0353 22.9491Z"
+    fill="#004367"
+  />
+  <path
+    d="M95.2069 16.1024C95.2069 21.4157 98.8086 25.16 103.837 25.16C106.404 25.16 108.365 24.3398 110.077 22.8421C110.255 22.6638 110.362 22.4855 110.362 22.2359C110.362 21.7723 110.041 21.4513 109.614 21.4513C109.435 21.4513 109.257 21.487 109.15 21.594C107.688 22.9134 105.941 23.5553 103.979 23.5553C99.914 23.5553 97.4179 20.4529 97.2396 16.7086H110.541C111.254 16.7086 111.646 16.3163 111.646 15.6745C111.646 11.2526 108.758 7.08043 103.516 7.08043C98.7373 7.08043 95.2069 11.11 95.2069 16.1024ZM103.48 8.68513C107.795 8.68513 109.72 12.3224 109.756 15.2465H97.2396C97.3822 12.2511 99.4148 8.68513 103.48 8.68513Z"
+    fill="#004367"
+  />
+  <path
+    d="M117.365 24.839C117.865 24.839 118.293 24.4111 118.293 23.9119V1.76712C118.293 1.26788 117.865 0.839966 117.365 0.839966C116.866 0.839966 116.438 1.26788 116.438 1.76712V23.9119C116.438 24.4111 116.866 24.839 117.365 24.839Z"
+    fill="#004367"
+  />
   <path
-    fill="rgba(0, 36, 58, 1)"
     fill-rule="evenodd"
-    d="M12.96 6.92a4.82 4.82 0 0 1 3.42-1.42h17.29a4.83 4.83 0 0 1 4.83 4.83v17.29a4.8 4.8 0 0 1-1.42 3.42l-.37.37-6.65 6.65a1.5 1.5 0 1 1-2.12-2.12l6.64-6.64v-.01c.72-.72.72-1.87 0-2.59L17.3 9.42a1.83 1.83 0 0 0-2.6 0l-6.64 6.64a1.5 1.5 0 1 1-2.12-2.12l7.02-7.02Zm22.54 3.41v13.05L20.62 8.5h13.05c1 0 1.83.82 1.83 1.83ZM20.06 26.06a1.5 1.5 0 0 0-2.12-2.12l-11 11a1.5 1.5 0 1 0 2.12 2.12l11-11Z"
     clip-rule="evenodd"
-  ></path>
+    d="M0.292684 8.54331C-0.0977248 8.15267 -0.0975372 7.5195 0.293103 7.1291L5.44967 1.97558C5.47463 1.95063 5.4999 1.92606 5.52546 1.90187L5.52289 1.8993C6.03155 1.39065 6.65771 1.07111 7.314 0.9407C7.59976 0.874273 7.89433 0.839967 8.19243 0.839967L20.12 0.839966C22.2629 0.839967 24 2.5771 24 4.71997V16.6435C24 16.9198 23.9705 17.1931 23.9133 17.4591C23.7914 18.1347 23.4693 18.7813 22.9471 19.3035L22.9458 19.3022C22.9189 19.3309 22.8915 19.3592 22.8636 19.3871L17.7071 24.5435C17.3166 24.934 16.6834 24.934 16.2929 24.5435C15.9024 24.153 15.9024 23.5198 16.2929 23.1293L21.4494 17.9728C21.6986 17.7236 21.8706 17.4116 21.9501 17.074C22.0233 16.6182 21.8843 16.1349 21.5329 15.7835L9.06289 3.31352C8.70098 2.95161 8.20044 2.81283 7.73221 2.89716C7.40619 2.97949 7.10531 3.14852 6.86347 3.39021L1.7069 8.54373C1.31626 8.93414 0.683092 8.93395 0.292684 8.54331ZM11.4178 2.83997L22 13.4222V4.71997C22 3.68167 21.1583 2.83997 20.12 2.83997L11.4178 2.83997Z"
+    fill="#004367"
+  />
+  <path
+    d="M0.292893 24.5435C-0.0976311 24.153 -0.0976311 23.5198 0.292893 23.1293L9.29289 14.1293C9.68342 13.7388 10.3166 13.7388 10.7071 14.1293C11.0976 14.5198 11.0976 15.153 10.7071 15.5435L1.70711 24.5435C1.31658 24.934 0.683417 24.934 0.292893 24.5435Z"
+    fill="#004367"
+  />
 </svg>

.storybook/theme.js

@@ -1,8 +1,8 @@
 import { create } from "@storybook/theming";
-/* import logoUrl from "./public/logo.svg"; */
+import logoUrl from "./public/logo.svg";
 
 export default create({
-  /* brandImage: process.env.NODE_ENV === "production" ? logoUrl : "/logo.svg", */
+  brandImage: logoUrl,
   base: "light",
   // Typography
   fontBase: '"Source Sans Pro", sans-serif',

.storybook/webpack.config.js

@@ -1,25 +0,0 @@
-const path = require("path");
-
-module.exports = (baseConfig) => {
-  baseConfig.config.module.rules.push({
-    test: /\.css$/,
-    use: ["style-loader", "css-loader"],
-    include: [
-      path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
-      path.resolve(__dirname, "../node_modules/@navikt/internal/css/index.css"),
-    ],
-  });
-  baseConfig.config.resolve.alias = {
-    ...baseConfig.config.resolve.alias,
-    "./normalize.css": path.resolve(
-      __dirname,
-      "../node_modules/normalize.css/normalize.css"
-    ),
-    "./@navikt/ds-tokens": path.resolve(
-      __dirname,
-      "../node_modules/@navikt/ds-tokens/dist/tokens.css"
-    ),
-  };
-
-  return baseConfig.config;
-};

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @navikt/ds-codemod
 
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
+## 2.1.7
+
+## 2.1.6
+
+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
 ## 2.1.0
 
 ## 2.0.18
@@ -42,7 +80,7 @@
 
 ### Major Changes
 
-- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
 
 ## 1.5.10
 
@@ -80,6 +118,6 @@
 
 ### Patch Changes
 
-- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
 ## 1.3.38

@navikt/codemod/README.md

@@ -160,7 +160,7 @@ This codemod should only be ran once, since the size-scale will keep decreasing
 
 ## License
 
-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
 
 #
 

@navikt/codemod/bin/config.ts

@@ -6,7 +6,7 @@ export const cliConfig = createCLIConfig({
     {
       name: "migration",
       description:
-        "One of the choices from https://github.com/navikt/Designsystemet/blob/master/%40navikt/codemod/README.md",
+        "One of the choices from https://github.com/navikt/aksel/blob/main/%40navikt/codemod/README.md",
     },
     {
       name: "path",

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.1.0",
+  "version": "2.6.0",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -28,10 +28,10 @@
   "bin": "./bin/ds-codemod.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git",
+    "url": "git+https://github.com/navikt/aksel.git",
     "directory": "@navikt/codemod"
   },
-  "homepage": "https://github.com/navikt/Designsystemet/tree/master/@navikt/codemod",
+  "homepage": "https://github.com/navikt/aksel/tree/main/@navikt/codemod",
   "dependencies": {
     "chalk": "4.1.0",
     "cheerio": "1.0.0-rc.9",

@navikt/community/navno/README.md

@@ -29,10 +29,9 @@ function App() {
 
 ## Learn more
 
-- [Designsystem documentation](https://aksel.nav.no/designsystem)
-- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
-- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)
 
 ## License
 
-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

@navikt/community/navno/package.json

@@ -12,7 +12,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
   },
   "sideEffects": false,
   "main": "./cjs/index.js",
@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.1.0",
-    "@navikt/ds-react": "^2.1.0",
+    "@navikt/ds-icons": "^2.6.0",
+    "@navikt/ds-react": "^2.6.0",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/community/navno/src/page-header/page-header.stories.tsx

@@ -15,8 +15,10 @@ export default {
   },
 };
 
-export const Default = (props) => <PageHeader>{props.children}</PageHeader>;
+export const Default = {
+  render: (props) => <PageHeader>{props.children}</PageHeader>,
 
-Default.args = {
-  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+  },
 };

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @navikt/ds-css
 
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
+### Minor Changes
+
+- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+
+### Patch Changes
+
+- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
+## 2.1.7
+
+## 2.1.6
+
+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+### Patch Changes
+
+- [`62f36da5e`](https://github.com/navikt/aksel/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
+
+## 2.1.1
+
 ## 2.1.0
 
 ## 2.0.18
@@ -12,7 +78,7 @@
 
 ### Patch Changes
 
-- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
 
 ## 2.0.14
 
@@ -22,7 +88,7 @@
 
 ### Patch Changes
 
-- [#1737](https://github.com/navikt/Designsystemet/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/Designsystemet/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
+- [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
 
 ## 2.0.11
 
@@ -52,13 +118,13 @@
 
 ### Patch Changes
 
-- [`e8007328d`](https://github.com/navikt/Designsystemet/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
+- [`e8007328d`](https://github.com/navikt/aksel/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
 
 ## 2.0.0
 
 ### Major Changes
 
-- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
 
 ## 1.5.10
 
@@ -80,7 +146,7 @@
 
 ### Patch Changes
 
-- [#1709](https://github.com/navikt/Designsystemet/pull/1709) [`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+- [#1709](https://github.com/navikt/aksel/pull/1709) [`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
 
 ## 1.5.3
 
@@ -104,9 +170,9 @@
 
 ### Minor Changes
 
-- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
+- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
 
-- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
+- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
 
 ## 1.4.4
 
@@ -122,7 +188,7 @@
 
 ### Patch Changes
 
-- [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
+- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
 
 ## 1.4.0
 
@@ -130,6 +196,6 @@
 
 ### Patch Changes
 
-- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
 ## 1.3.38

@navikt/core/css/README.md

@@ -34,10 +34,10 @@ But you can import it in a .css-file
 
 ## Learn more
 
-- [Designsystem documentation](https://aksel.nav.no/designsystem)
-- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
-- [ds-react README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/react/README.md)
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)
+- [ds-react README](https://github.com/navikt/aksel/blob/main/%40navikt/core/react/README.md)
 
 ## License
 
-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

@navikt/core/css/accordion.css

@@ -14,7 +14,7 @@
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
 }
 
 .navds-accordion__header:focus {
@@ -24,7 +24,7 @@
 
 .navds-accordion__header:hover {
   color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
 }
 
 .navds-accordion__header-content {
@@ -39,11 +39,11 @@
 
 .navds-accordion__content {
   padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
 }
 
 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
 }
 
 .navds-accordion__expand-icon {

@navikt/core/css/alert.css

@@ -24,6 +24,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 
 .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
   background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+}
+
 .navds-alert--info {
   border-color: var(--ac-alert-info-border, var(--a-border-info));
   background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));

@navikt/core/css/button.css

@@ -112,13 +112,39 @@
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
 /**************************
 * .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
@@ -144,10 +170,47 @@
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--secondary-neutral:focus {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
 /****************************
  * .navds-button--tertiary *
  ****************************/
@@ -188,6 +251,46 @@
   box-shadow: none;
 }
 
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/

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

@@ -28,7 +28,7 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
   width: 1.5rem;
   height: 1.5rem;
   border-radius: var(--a-border-radius-medium);
@@ -67,7 +67,7 @@
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,

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

@@ -2,7 +2,7 @@
   appearance: none;
   background-color: var(--ac-select-bg, var(--a-surface-default));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -25,7 +25,6 @@
   position: relative;
   display: flex;
   width: 100%;
-  align-items: center;
   color: var(--a-text-default);
 }
 
@@ -34,12 +33,12 @@
   font-size: 1rem;
   right: 0.5rem;
   pointer-events: none;
+  align-self: center;
 }
 
 .navds-form-field--small .navds-select__input {
   min-height: 32px;
-  padding: 0.25rem;
-  padding-right: 2rem;
+  padding: 0 2rem 0 0.25rem;
 }
 
 /**
@@ -50,9 +49,21 @@
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+/**
+  Disabled
+*/
 .navds-select__input:disabled {
   background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
 }

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

@@ -27,7 +27,7 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 0.25rem;
+  padding: 0 0.5rem;
   min-height: 32px;
 }
 

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

@@ -63,7 +63,7 @@
 }
 
 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-surface-danger));
+  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
 }
 
 .navds-textarea--resize .navds-textarea__input {

@navikt/core/css/index.css

@@ -26,3 +26,4 @@
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";
+@import "list.css";

@navikt/core/css/link.css

@@ -6,12 +6,8 @@
   gap: var(--a-spacing-1);
 }
 
-.navds-alert--info .navds-link {
-  color: var(--a-text-default);
-}
-
-.navds-alert--error .navds-link,
-.navds-confirmation-panel--error .navds-link {
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }
 

@navikt/core/css/list.css

@@ -0,0 +1,66 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  margin-top: 6px;
+  grid-column: 1 / 2;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-medium);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.1.0",
+  "version": "2.6.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -12,7 +12,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
   },
   "main": "./dist/index.css",
   "scripts": {
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.0",
+    "@navikt/ds-tokens": "^2.6.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/css/toggle-group.css

@@ -6,7 +6,7 @@
 
 .navds-toggle-group {
   border-radius: 9px;
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
   padding: calc(var(--a-spacing-1) + 1px);
   gap: var(--a-spacing-1);
@@ -15,6 +15,11 @@
   grid-auto-columns: 1fr;
 }
 
+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
 .navds-toggle-group__button {
   display: inline-flex;
   align-items: center;
@@ -23,17 +28,27 @@
   min-height: 48px;
   border: none;
   cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
   color: var(--ac-toggle-group-button-text, var(--a-text-default));
   border-radius: var(--a-border-radius-medium);
   min-width: fit-content;
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(c));
+}
+
 .navds-toggle-group__button:hover {
   background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
   color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
 .navds-toggle-group__button:focus {
   outline: none;
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
@@ -43,6 +58,11 @@
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
@@ -59,6 +79,12 @@
   color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
 .navds-toggle-group--small > .navds-toggle-group__button {
   padding: 0.375rem;
   min-height: 32px;

@navikt/core/css/tokens.json

@@ -10,13 +10,13 @@
     "--ac-alert-success-bg": "--a-surface-success-subtle"
   },
   "accordion": {
-    "--ac-accordion-header-border": "--a-border-strong",
+    "--ac-accordion-header-border": "--a-border-divider",
     "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-strong",
+    "--ac-accordion-header-border-hover": "--a-border-default",
     "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
     "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-strong",
-    "--ac-accordion-content-border-open": "--a-border-strong"
+    "--ac-accordion-content-border": "--a-border-divider",
+    "--ac-accordion-content-border-open": "--a-border-default"
   },
   "button": {
     "--ac-button-primary-bg": "--a-surface-action",
@@ -25,7 +25,7 @@
     "--ac-button-primary-active-bg": "--a-surface-action-active",
     "--ac-button-primary-focus-border": "--a-surface-default",
     "--ac-button-secondary-text": "--a-text-action",
-    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-bg": "--a-surface-transparent",
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
@@ -45,7 +45,27 @@
     "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
     "--ac-button-danger-active-bg": "--a-surface-danger-active",
     "--ac-button-loader-stroke": "currentColor",
-    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
+    "--ac-button-primary-neutral-bg": "--a-surface-neutral",
+    "--ac-button-primary-neutral-text": "--a-text-on-neutral",
+    "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
+    "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-primary-neutral-focus-border": "--a-surface-default",
+    "--ac-button-secondary-neutral-text": "--a-text-default",
+    "--ac-button-secondary-neutral-bg": "--a-surface-transparent",
+    "--ac-button-secondary-neutral-border": "--a-border-strong",
+    "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-secondary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-neutral-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
   },
   "chat": {
     "--ac-chat-avatar-bg": "--a-bg-subtle",
@@ -109,6 +129,12 @@
     "--ac-link-active-bg": "--a-border-focus",
     "--ac-link-active-border": "--a-border-focus"
   },
+  "list": {
+    "--ac-list-marker-ul-color": "--ac-list-marker-color",
+    "--ac-list-marker-icon-color": "--ac-list-marker-color",
+    "--ac-list-marker-ol-color": "--ac-list-marker-color",
+    "--ac-list-marker-color": "--a-icon-default"
+  },
   "loader": {
     "--ac-loader-stroke": "--a-border-default",
     "--ac-loader-stroke-bg": "--a-surface-active",
@@ -221,14 +247,20 @@
     "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
   },
   "togglegroup": {
-    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-bg": "--a-surface-transparent",
     "--ac-toggle-group-border": "--a-border-default",
-    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-bg": "--a-surface-transparent",
     "--ac-toggle-group-button-text": "--a-text-default",
     "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
     "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
     "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
-    "--ac-toggle-group-selected-text": "--a-text-on-action"
+    "--ac-toggle-group-selected-text": "--a-text-on-action",
+    "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
+    "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text",
+    "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
   },
   "tooltip": {
     "--ac-tooltip-bg": "--a-surface-inverted",
@@ -253,7 +285,7 @@
   },
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
-    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-border": "--a-border-default",
     "--ac-radio-checkbox-action": "--a-surface-action",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
@@ -269,7 +301,7 @@
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",
-    "--ac-select-border": "--a-border-strong",
+    "--ac-select-border": "--a-border-default",
     "--ac-select-hover-bg": "--a-border-action",
     "--ac-select-error-border": "--a-surface-danger"
   },
@@ -298,7 +330,7 @@
     "--ac-textarea-placeholder": "--a-text-subtle",
     "--ac-textarea-hover-border": "--a-border-action",
     "--ac-textarea-counter-text": "--a-text-subtle",
-    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
   }
 }

@navikt/core/react/CHANGELOG.md

@@ -1,10 +1,155 @@
 # @navikt/ds-react
 
+## 2.6.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.0
+
+## 2.5.1
+
+### Patch Changes
+
+- [`ac1e69b34`](https://github.com/navikt/aksel/commit/ac1e69b342ae207db2e80e3058555c56902e5832) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :recycle: Refaktorert nested-list logikk
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.1
+
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- [#1827](https://github.com/navikt/aksel/pull/1827) [`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401) Thanks [@kschieren](https://github.com/kschieren)! - Added fixedWeeks prop to standalone datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.0
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.2.0
+
+## 2.1.7
+
+### Patch Changes
+
+- [`6ac97aeb3`](https://github.com/navikt/aksel/commit/6ac97aeb34735020e5a2083e51e836877abaefa3) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset rekkefølge på onValidate og onRangeChange i useRangepicker-hook
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.7
+
+## 2.1.6
+
+### Patch Changes
+
+- [#1777](https://github.com/navikt/aksel/pull/1777) [`cd1c93f9d`](https://github.com/navikt/aksel/commit/cd1c93f9d471fbbc38215d788a73f21b5b216c5b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Datepicker og monthpicker kan nå bestemme om popover skal dukke opp ved fokus
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.6
+
+## 2.1.5
+
+### Patch Changes
+
+- Hotfix: ESM import fra date-fns feilet
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.5
+
+## 2.1.4
+
+### Patch Changes
+
+- [`87f194c1d`](https://github.com/navikt/aksel/commit/87f194c1dc29b10a604de676b358d117e2dbf52f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset edgecase i useRangepicker der valg av startdato etter sluttdato ga feil output
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.4
+
+## 2.1.3
+
+### Patch Changes
+
+- [#1771](https://github.com/navikt/aksel/pull/1771) [`494566e60`](https://github.com/navikt/aksel/commit/494566e604e958363f75ebfa2adbc1669397636a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Monthpicker håndterer nå visning av År riktig
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.3
+
+## 2.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.2
+
+## 2.1.1
+
+### Patch Changes
+
+- [#1759](https://github.com/navikt/aksel/pull/1759) [`dcf5cfc06`](https://github.com/navikt/aksel/commit/dcf5cfc06b751341559ef30085bd974820531e57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset @types/react v18 feil introdusert i v2.0.6
+
+- Updated dependencies [[`dcf5cfc06`](https://github.com/navikt/aksel/commit/dcf5cfc06b751341559ef30085bd974820531e57)]:
+  - @navikt/ds-icons@2.1.1
+
 ## 2.1.0
 
 ### Minor Changes
 
-- [`0873fe652`](https://github.com/navikt/Designsystemet/commit/0873fe6520e817e462197c162b49c05826da4838) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Datepicker/Monthpicker støtter nå år med 2 siffer i input
+- [`0873fe652`](https://github.com/navikt/aksel/commit/0873fe6520e817e462197c162b49c05826da4838) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Datepicker/Monthpicker støtter nå år med 2 siffer i input
 
 ### Patch Changes
 
@@ -15,7 +160,7 @@
 
 ### Patch Changes
 
-- [`98177d0cd`](https://github.com/navikt/Designsystemet/commit/98177d0cd3802029dcf398ce93c1767d3b0860c5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bedre typer for ref i datepicker
+- [`98177d0cd`](https://github.com/navikt/aksel/commit/98177d0cd3802029dcf398ce93c1767d3b0860c5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bedre typer for ref i datepicker
 
 - Updated dependencies []:
   - @navikt/ds-icons@2.0.18
@@ -24,21 +169,21 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`27e3dfee0`](https://github.com/navikt/Designsystemet/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de)]:
+- Updated dependencies [[`27e3dfee0`](https://github.com/navikt/aksel/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de)]:
   - @navikt/ds-icons@2.0.17
 
 ## 2.0.16
 
 ### Patch Changes
 
-- Updated dependencies [[`54f8b0795`](https://github.com/navikt/Designsystemet/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
+- Updated dependencies [[`54f8b0795`](https://github.com/navikt/aksel/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
   - @navikt/ds-icons@2.0.16
 
 ## 2.0.15
 
 ### Patch Changes
 
-- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
 
 - Updated dependencies []:
   - @navikt/ds-icons@2.0.15
@@ -47,7 +192,7 @@
 
 ### Patch Changes
 
-- [`8e5c55443`](https://github.com/navikt/Designsystemet/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bumpet @floating-ui/react
+- [`8e5c55443`](https://github.com/navikt/aksel/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bumpet @floating-ui/react
 
 - Updated dependencies []:
   - @navikt/ds-icons@2.0.14
@@ -56,7 +201,7 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
+- Updated dependencies [[`a6c339123`](https://github.com/navikt/aksel/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
   - @navikt/ds-icons@2.0.13
 
 ## 2.0.12
@@ -129,7 +274,7 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`e4b6237e1`](https://github.com/navikt/Designsystemet/commit/e4b6237e1bbf13b1ce5415845d558831b47caf7c)]:
+- Updated dependencies [[`e4b6237e1`](https://github.com/navikt/aksel/commit/e4b6237e1bbf13b1ce5415845d558831b47caf7c)]:
   - @navikt/ds-icons@2.0.4
 
 ## 2.0.3
@@ -161,13 +306,13 @@
 
 ### Major Changes
 
-- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
 
 ## 1.5.10
 
 ### Patch Changes
 
-- [#1717](https://github.com/navikt/Designsystemet/pull/1717) [`d9352982d`](https://github.com/navikt/Designsystemet/commit/d9352982d42d5d12a9c5fc345e546f57c753738d) Thanks [@vebnor](https://github.com/vebnor)! - Fikset parentSelector prop i Modal
+- [#1717](https://github.com/navikt/aksel/pull/1717) [`d9352982d`](https://github.com/navikt/aksel/commit/d9352982d42d5d12a9c5fc345e546f57c753738d) Thanks [@vebnor](https://github.com/vebnor)! - Fikset parentSelector prop i Modal
 
 - Updated dependencies []:
   - @navikt/ds-icons@1.5.10
@@ -217,7 +362,7 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11)]:
+- Updated dependencies [[`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11)]:
   - @navikt/ds-icons@1.5.4
 
 ## 1.5.3
@@ -249,9 +394,9 @@
 
 ### Minor Changes
 
-- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
+- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
 
-- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
+- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
 
 ### Patch Changes
 
@@ -287,7 +432,7 @@
 
 ### Patch Changes
 
-- [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
+- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
 
 - Updated dependencies []:
   - @navikt/ds-icons@1.4.1
@@ -296,7 +441,7 @@
 
 ### Minor Changes
 
-- [`1bdb7e377`](https://github.com/navikt/Designsystemet/commit/1bdb7e3777ece28d153991b78dbdd289366fca57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - [#1702](https://github.com/navikt/Designsystemet/pull/1702) [`20bcc28cb`](https://github.com/navikt/Designsystemet/commit/20bcc28cb0a886aa40d2c1b042fb2706a144c014) Thanks [@andnorda](https://github.com/andnorda)! - Global Provider komponent for håndtering av global config
+- [`1bdb7e377`](https://github.com/navikt/aksel/commit/1bdb7e3777ece28d153991b78dbdd289366fca57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - [#1702](https://github.com/navikt/aksel/pull/1702) [`20bcc28cb`](https://github.com/navikt/aksel/commit/20bcc28cb0a886aa40d2c1b042fb2706a144c014) Thanks [@andnorda](https://github.com/andnorda)! - Global Provider komponent for håndtering av global config
 
 ### Patch Changes
 
@@ -307,14 +452,14 @@
 
 ### Patch Changes
 
-- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
-- Updated dependencies [[`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1)]:
+- Updated dependencies [[`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1)]:
   - @navikt/ds-icons@1.3.39
 
 ## 1.3.38
 
 ### Patch Changes
 
-- Updated dependencies [[`aa506975b`](https://github.com/navikt/Designsystemet/commit/aa506975b4466d4daa79c75f5f9faa255b7fae42)]:
+- Updated dependencies [[`aa506975b`](https://github.com/navikt/aksel/commit/aa506975b4466d4daa79c75f5f9faa255b7fae42)]:
   - @navikt/ds-icons@1.3.38

@navikt/core/react/README.md

@@ -27,11 +27,10 @@ function App() {
 
 ## Learn more
 
-- [Designsystem documentation](https://aksel.nav.no/designsystem)
-- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
-- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
-- [ds-css README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/css/README.md)
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)
+- [ds-css README](https://github.com/navikt/aksel/blob/main/%40navikt/core/css/README.md)
 
 ## License
 
-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.1.0",
+  "version": "2.6.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
   },
   "sideEffects": false,
   "main": "./cjs/index.js",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.1.0",
+    "@navikt/ds-icons": "^2.6.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

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

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import AnimateHeight from "../util/AnimateHeight";
-import { BodyLong } from "../typography";
+import { BodyLong } from "../typography/BodyLong";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps

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

@@ -1,7 +1,7 @@
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Heading } from "..";
+import { Heading } from "../typography/Heading";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionHeaderProps

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

@@ -50,21 +50,23 @@ const Item = (props) => {
   );
 };
 
-export const Default = (props) => {
-  return (
-    <div style={{ width: 500 }}>
-      <Accordion>
-        {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
-          <Item key={y} {...props} />
-        ))}
-      </Accordion>
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion>
+          {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+            <Item key={y} {...props} />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  nItems: 2,
+  args: {
+    controlled: false,
+    nItems: 2,
+  },
 };
 
 export const Controlled = () => {

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

@@ -1 +1 @@
-export { AccordionProps, default as Accordion } from "./Accordion";
+export { type AccordionProps, default as Accordion } from "./Accordion";

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

@@ -6,7 +6,7 @@ import {
 } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography/BodyLong";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

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

@@ -1,27 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading as DsHeading } from "..";
+import { BodyLong, Heading as DsHeading, Link } from "..";
 
-export default {
+const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
   component: Alert,
-  argTypes: {
-    variant: {
-      defaultValue: "info",
-      control: {
-        type: "radio",
-        options: ["error", "warning", "info", "success"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
 
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
 const variants: Array<"error" | "warning" | "info" | "success"> = [
   "error",
   "warning",
@@ -29,20 +19,38 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
   "success",
 ];
 
-export const Default = (props) => (
-  <Alert
-    variant={props.variant}
-    size={props.size}
-    fullWidth={props.fullWidth}
-    inline={props.inline}
-  >
-    {props.children}
-  </Alert>
-);
+export const Default: Story = {
+  render: (props) => (
+    <Alert
+      variant={props.variant}
+      size={props.size}
+      fullWidth={props.fullWidth}
+      inline={props.inline}
+    >
+      {props.children}
+    </Alert>
+  ),
 
-Default.args = {
-  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-  fullWidth: false,
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+    fullWidth: false,
+    variant: "info",
+    size: "medium",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["info", "error", "warning", "success"],
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["medium", "small"],
+    },
+  },
 };
 
 export const Small = () => {
@@ -127,3 +135,15 @@ export const Heading = () => {
     </div>
   );
 };
+
+export const Links = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant}>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </Alert>
+      ))}
+    </div>
+  );
+};

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

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

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

@@ -13,7 +13,14 @@ export interface ButtonProps
    * Changes design and interaction-visuals
    * @default "primary"
    */
-  variant?: "primary" | "secondary" | "tertiary" | "danger";
+  variant?:
+    | "primary"
+    | "primary-neutral"
+    | "secondary"
+    | "secondary-neutral"
+    | "tertiary"
+    | "tertiary-neutral"
+    | "danger";
   /**
    * Changes padding, height and font-size
    * @default medium

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

@@ -8,11 +8,72 @@ export default {
   parameters: {
     chromatic: { delay: 600 },
   },
+};
+
+const variants: Array<
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "primary-neutral"
+  | "secondary-neutral"
+  | "tertiary-neutral"
+  | "danger"
+> = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "danger",
+  "primary-neutral",
+  "secondary-neutral",
+  "tertiary-neutral",
+];
+
+const varSwitch = {
+  primary: "Primary",
+  secondary: "Secondary",
+  tertiary: "Tertiary",
+  danger: "Danger",
+  "primary-neutral": "Primary",
+  "secondary-neutral": "Secondary",
+  "tertiary-neutral": "Tertiary",
+};
+
+export const Default = {
+  render: (props) => {
+    return (
+      <Button
+        variant={props.variant}
+        size={props.size}
+        loading={props.loading}
+        icon={props.icon ? <Star /> : undefined}
+        iconPosition={props.iconPosition}
+      >
+        {props.children}
+      </Button>
+    );
+  },
+
+  args: {
+    icon: false,
+    loading: false,
+    iconPosition: "left",
+    children: "Knapp",
+    variant: "primary",
+    size: "medium",
+  },
   argTypes: {
     variant: {
       control: {
         type: "radio",
-        options: ["primary", "secondary", "tertiary", "danger"],
+        options: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "danger",
+          "primary-neutral",
+          "secondary-neutral",
+          "tertiary-neutral",
+        ],
       },
     },
     size: {
@@ -30,41 +91,6 @@ export default {
   },
 };
 
-const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "danger",
-];
-
-const varSwitch = {
-  primary: "Primary",
-  secondary: "Secondary",
-  tertiary: "Tertiary",
-  danger: "Danger",
-};
-
-export const Default = (props) => {
-  return (
-    <Button
-      variant={props.variant}
-      size={props.size}
-      loading={props.loading}
-      icon={props.icon ? <Star /> : undefined}
-      iconPosition={props.iconPosition}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-Default.args = {
-  icon: false,
-  loading: false,
-  iconPosition: "left",
-  children: "Knapp",
-};
-
 export const Small = () => (
   <div className="rowgap">
     {variants.map((variant) => (
@@ -95,31 +121,36 @@ export const Link = () => (
   </div>
 );
 
-export const Loading = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading>
-          {varSwitch[variant]}
-        </Button>
-      ))}
+export const Loading = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading>
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="small">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="xsmall">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
     </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="small">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="xsmall">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
+  ),
+
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
+};
 
 export const Icon = () => (
   <div className="colgap">
@@ -217,28 +248,33 @@ export const Disabled = () => (
   </div>
 );
 
-export const LoadingWithAs = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="small">
-          {varSwitch[variant]}
-        </Button>
-      ))}
+export const LoadingWithAs = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="small">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button
+            key={variant}
+            variant={variant}
+            loading
+            size="small"
+            as="a"
+            href="#"
+          >
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
     </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          loading
-          size="small"
-          as="a"
-          href="#"
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
+  ),
+
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
+};

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

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

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
 import Bubble, { BubbleType } from "./Bubble";
-import { BodyLong, BodyShort } from "..";
+import { BodyLong, BodyShort } from "../typography";
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Chat } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 
 export default {
   title: "ds-react/Chat",
@@ -19,31 +19,33 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return (
-    <Chat
-      avatar={props?.avatar ?? "ON"}
-      name={props?.name ?? "Ola Normann"}
-      timestamp={props?.timestamp ?? "01.01.21 14:00"}
-      avatarBgColor={props?.avatarBgColor}
-      backgroundColor={props?.backgroundColor}
-    >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Chat
+        avatar={props?.avatar ?? "ON"}
+        name={props?.name ?? "Ola Normann"}
+        timestamp={props?.timestamp ?? "01.01.21 14:00"}
+        avatarBgColor={props?.avatarBgColor}
+        backgroundColor={props?.backgroundColor}
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    );
+  },
 
-Default.args = {
-  name: "Ola Normann",
-  timestamp: "01.01.21 14:00",
-  avatar: "ON",
+  args: {
+    name: "Ola Normann",
+    timestamp: "01.01.21 14:00",
+    avatar: "ON",
+  },
 };
 
 export const Farger = () => {

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

@@ -1 +1 @@
-export { default as Chat, ChatProps } from "./Chat";
+export { default as Chat, type ChatProps } from "./Chat";

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

@@ -1,7 +1,7 @@
 import { Close } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

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

@@ -1,7 +1,7 @@
 import { SuccessStroke } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Chips } from ".";
 
@@ -22,44 +23,46 @@ export default {
 
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
-export const Default = (props) => {
-  const [selected, setSelected] = useState(["Dansk", "Svensk"]);
-  const [filter, setFilter] = useState(options);
+export const Default = {
+  render: (props) => {
+    const [selected, setSelected] = useState(["Dansk", "Svensk"]);
+    const [filter, setFilter] = useState(options);
+
+    if (props.type === "toggle") {
+      return (
+        <Chips size={props.size ?? "medium"}>
+          {options.map((c) => (
+            <Chips.Toggle
+              selected={selected.includes(c)}
+              key={c}
+              onClick={() =>
+                setSelected(
+                  selected.includes(c)
+                    ? selected.filter((x) => x !== c)
+                    : [...selected, c]
+                )
+              }
+            >
+              {c}
+            </Chips.Toggle>
+          ))}
+        </Chips>
+      );
+    }
 
-  if (props.type === "toggle") {
     return (
       <Chips size={props.size ?? "medium"}>
-        {options.map((c) => (
-          <Chips.Toggle
-            selected={selected.includes(c)}
+        {filter.map((c) => (
+          <Chips.Removable
             key={c}
-            onClick={() =>
-              setSelected(
-                selected.includes(c)
-                  ? selected.filter((x) => x !== c)
-                  : [...selected, c]
-              )
-            }
+            onClick={() => setFilter((x) => x.filter((y) => y !== c))}
           >
             {c}
-          </Chips.Toggle>
+          </Chips.Removable>
         ))}
       </Chips>
     );
-  }
-
-  return (
-    <Chips size={props.size ?? "medium"}>
-      {filter.map((c) => (
-        <Chips.Removable
-          key={c}
-          onClick={() => setFilter((x) => x.filter((y) => y !== c))}
-        >
-          {c}
-        </Chips.Removable>
-      ))}
-    </Chips>
-  );
+  },
 };
 
 export const Toggle = () => {

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

@@ -1 +1 @@
-export { default as Chips, ChipsProps } from "./Chips";
+export { default as Chips, type ChipsProps } from "./Chips";

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

@@ -24,6 +24,11 @@ interface DatePickerStandaloneDefaultProps
    * Datepicker classname
    */
   className?: string;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+   * @default true
+   */
+  fixedWeeks?: boolean;
 }
 
 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
@@ -50,6 +55,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       id,
       defaultSelected,
       onSelect,
+      fixedWeeks = true,
       ...rest
     },
     ref
@@ -113,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
             weekend: "rdp-day__weekend",
           }}
           showWeekNumber={showWeekNumber}
-          fixedWeeks
+          fixedWeeks={fixedWeeks}
           showOutsideDays
           {...omit(rest, ["onSelect"])}
         />

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useId, useState } from "react";
 import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
 import { Button } from "../..";
@@ -34,93 +35,95 @@ export default {
   },
 };
 
-export const Default = (props) => {
-  const [open, setOpen] = useState(false);
+export const Default = {
+  render: (props) => {
+    const [open, setOpen] = useState(false);
 
-  const rangeCtx = UNSAFE_useRangeDatepicker({
-    fromDate: new Date("Aug 23 2020"),
-    toDate: new Date("Aug 23 2023"),
-  });
+    const rangeCtx = UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2020"),
+      toDate: new Date("Aug 23 2023"),
+    });
 
-  const singleCtx = UNSAFE_useDatepicker({
-    fromDate: new Date("Aug 23 2020"),
-    toDate: new Date("Aug 23 2023"),
-  });
+    const singleCtx = UNSAFE_useDatepicker({
+      fromDate: new Date("Aug 23 2020"),
+      toDate: new Date("Aug 23 2023"),
+    });
 
-  const newProps = {
-    ...(!props.inputfield || props.mode === "multiple"
-      ? {
-          open,
-          onClose: () => setOpen(false),
-          fromDate: new Date("Aug 23 2020"),
-          toDate: new Date("Aug 23 2023"),
-        }
-      : {}),
-  };
+    const newProps = {
+      ...(!props.inputfield || props.mode === "multiple"
+        ? {
+            open,
+            onClose: () => setOpen(false),
+            fromDate: new Date("Aug 23 2020"),
+            toDate: new Date("Aug 23 2023"),
+          }
+        : {}),
+    };
 
-  const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
+    const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
 
-  return (
-    <div>
-      <Comp
-        locale={props?.locale}
-        dropdownCaption={props?.dropdownCaption}
-        disableWeekends={props?.disableWeekends}
-        showWeekNumber={props.showWeekNumber}
-        mode={props.mode}
-        {...(props.mode === "single"
-          ? singleCtx.datepickerProps
-          : props.mode === "range"
-          ? rangeCtx.datepickerProps
-          : {})}
-        {...newProps}
-      >
-        {!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>
-  );
-};
+    return (
+      <div>
+        <Comp
+          locale={props?.locale}
+          dropdownCaption={props?.dropdownCaption}
+          disableWeekends={props?.disableWeekends}
+          showWeekNumber={props.showWeekNumber}
+          mode={props.mode}
+          {...(props.mode === "single"
+            ? singleCtx.datepickerProps
+            : props.mode === "range"
+            ? rangeCtx.datepickerProps
+            : {})}
+          {...newProps}
+        >
+          {!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>
+    );
+  },
 
-Default.args = {
-  dropdownCaption: false,
-  disableWeekends: false,
-  showWeekNumber: false,
-  inputfield: true,
-  standalone: false,
-  openOnFocus: true,
+  args: {
+    dropdownCaption: false,
+    disableWeekends: false,
+    showWeekNumber: false,
+    inputfield: true,
+    standalone: false,
+    openOnFocus: true,
+  },
 };
 
 export const DropdownCaption = () => (
@@ -148,6 +151,7 @@ export const UseDatepicker = () => {
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,
     locale: "en",
+    openOnFocus: false,
   });
 
   return (
@@ -164,6 +168,7 @@ export const UseRangedDatepicker = () => {
     UNSAFE_useRangeDatepicker({
       fromDate: new Date("Aug 23 2019"),
       onRangeChange: console.log,
+      onValidate: console.log,
     });
 
   return (
@@ -178,12 +183,29 @@ export const UseRangedDatepicker = () => {
   );
 };
 
+export const OpenOnFocus = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    onDateChange: console.log,
+    openOnFocus: false,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
 export const NB = () => (
   <DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
 );
+
 export const NN = () => (
   <DatePicker.Standalone locale="nn" today={new Date("2006-07-01")} />
 );
+
 export const EN = () => (
   <DatePicker.Standalone locale="en" today={new Date("2006-07-01")} />
 );
@@ -195,6 +217,7 @@ export const Standalone = () => (
 export const StandaloneRange = () => (
   <DatePicker.Standalone mode="range" today={new Date("2006-07-01")} />
 );
+
 export const StandaloneMultiple = () => (
   <DatePicker.Standalone mode="multiple" today={new Date("2006-07-01")} />
 );

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

@@ -56,6 +56,11 @@ export interface UseDatepickerOptions
    * In 2023 this equals to 1943 - 2042
    */
   allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }
 
 interface UseDatepickerValue {
@@ -123,6 +128,7 @@ export const useDatepicker = (
     onValidate,
     defaultMonth,
     allowTwoDigitYear = true,
+    openOnFocus = true,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -198,7 +204,7 @@ export const useDatepicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,
       today,

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

@@ -42,6 +42,11 @@ export interface UseMonthPickerOptions
    * In 2023 this equals to 1943 - 2042
    */
   allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }
 
 interface UseMonthPickerValue {
@@ -104,6 +109,7 @@ export const useMonthpicker = (
     onValidate,
     defaultYear,
     allowTwoDigitYear = true,
+    openOnFocus = true,
   } = opt;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -180,7 +186,7 @@ export const useMonthpicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,
       today,
@@ -191,6 +197,8 @@ export const useMonthpicker = (
     if (isValidDate(day)) {
       setYear(day);
       setInputValue(formatDateForInput(day, locale, "month", inputFormat));
+    } else {
+      setYear(defaultSelected ?? defaultYear ?? today);
     }
   };
 
@@ -211,12 +219,14 @@ export const useMonthpicker = (
     if (month) {
       setOpen(false);
       inputRef.current && inputRef.current.focus();
+      setYear(month);
     }
 
     if (!required && !month) {
       updateMonth(undefined);
       updateValidation({ isValidMonth: false, isEmpty: true });
       setInputValue("");
+      setYear(defaultYear ?? today);
       return;
     }
     updateMonth(month);

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

@@ -1,4 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import isBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -203,6 +204,7 @@ export const useRangeDatepicker = (
     onValidate,
     defaultMonth,
     allowTwoDigitYear = true,
+    openOnFocus = true,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -322,7 +324,7 @@ export const useRangeDatepicker = (
   };
 
   const handleFocus = (e, src: RangeT) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,
       today,
@@ -371,24 +373,26 @@ export const useRangeDatepicker = (
     if (range?.from && range?.to) {
       setOpen(false);
     }
-    const prevToRange =
+    let prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
 
+    const resetTo = isBefore(prevToRange, range?.from);
+
     range?.from
       ? setFromInputValue(
           formatDateForInput(range?.from, locale, "date", inputFormat)
         )
       : setFromInputValue("");
-    prevToRange
+    prevToRange && !resetTo
       ? setToInputValue(
           formatDateForInput(prevToRange, locale, "date", inputFormat)
         )
       : setToInputValue("");
+    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
     updateValidation(
       { isValidDate: !!range?.from, isEmpty: !range?.from },
-      { isValidDate: !!range?.to, isEmpty: !prevToRange }
+      { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo }
     );
-    updateRange({ from: range?.from, to: prevToRange });
   };
 
   const fromChange = (

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

@@ -1,19 +1,19 @@
-export { DateInputProps } from "./DateInput";
+export { type DateInputProps } from "./DateInput";
 export {
-  DatePickerProps,
+  type DatePickerProps,
   default as UNSAFE_DatePicker,
 } from "./datepicker/DatePicker";
-export { DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
-export { MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
+export { type DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
+export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export {
   UNSAFE_useDatepicker,
   UNSAFE_useMonthpicker,
   UNSAFE_useRangeDatepicker,
-  RangeValidationT,
-  DateValidationT,
-  MonthValidationT,
+  type RangeValidationT,
+  type DateValidationT,
+  type MonthValidationT,
 } from "./hooks";
 export {
   default as UNSAFE_MonthPicker,
-  MonthPickerProps,
+  type MonthPickerProps,
 } from "./monthpicker/MonthPicker";

@navikt/core/react/src/date/monthpicker/MonthPicker.tsx

@@ -134,7 +134,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     );
 
     const handleSelect = (month?: Date) => {
-      setSelectedMonth(month);
+      !onMonthSelect && setSelectedMonth(month);
       onMonthSelect?.(month);
       month && (onClose?.() ?? setOpen(false));
     };
@@ -175,7 +175,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
             >
               <RootProvider
                 locale={getLocaleFromString(locale)}
-                selected={selected}
+                selected={selected ?? selectedMonth}
                 toDate={toDate}
                 fromDate={fromDate}
                 month={selected ?? selectedMonth}

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

@@ -54,17 +54,19 @@ export const NB = () => <MonthPicker.Standalone locale="nb" />;
 export const NN = () => <MonthPicker.Standalone locale="nn" />;
 export const EN = () => <MonthPicker.Standalone locale="en" />;
 
-export const DisabledMonths = (props) => {
-  return (
-    <MonthPicker.Standalone
-      disabled={[
-        { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
-        { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
-        new Date("Sep 5 2022"),
-        new Date("Jan 5 2023"),
-      ]}
-    />
-  );
+export const DisabledMonths = {
+  render: (props) => {
+    return (
+      <MonthPicker.Standalone
+        disabled={[
+          { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
+          { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
+          new Date("Sep 5 2022"),
+          new Date("Jan 5 2023"),
+        ]}
+      />
+    );
+  },
 };
 
 export const Standalone = () => {

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

@@ -17,5 +17,5 @@ export { disableDate } from "./dates-disabled";
 
 export { dateIsInCurrentMonth, isValidDate, hasNextYear } from "./check-dates";
 export { getInitialYear } from "./get-initial-year";
-export { isMatch, isDateInRange, Matcher } from "./is-match";
+export { isMatch, isDateInRange, type Matcher } from "./is-match";
 export { nextEnabled } from "./navigation";

@navikt/core/react/src/form/Fieldset/index.ts

@@ -1,5 +1,5 @@
 export {
   default as Fieldset,
-  FieldsetProps,
+  type FieldsetProps,
   FieldsetContext,
 } from "./Fieldset";

@navikt/core/react/src/form/checkbox/checkbox.stories.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 
 export default {
-  title: "ds-react/Form/Checkbox",
+  title: "ds-react/Checkbox",
   component: Checkbox,
   subcomponents: {
     CheckboxGroup,
@@ -13,69 +14,73 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState(["checkbox1"]);
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState(["checkbox1"]);
 
-  return (
-    <div>
-      <CheckboxGroup
-        legend={props.legend}
-        description={props.description}
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : undefined}
-        hideLegend={props.hideLegend}
-        error={props.errorGroup ? "Errormelding for checkboxgruppe" : undefined}
-        size={props?.size}
-      >
-        <Checkbox
-          value="checkbox1"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Apple"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox2"
-          error={props.errorSingle}
-          description={
-            props.checkboxDescription
-              ? "Quis laborum culpa enim amet cillum veniam."
-              : undefined
+    return (
+      <div>
+        <CheckboxGroup
+          legend={props.legend}
+          description={props.description}
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          hideLegend={props.hideLegend}
+          error={
+            props.errorGroup ? "Errormelding for checkboxgruppe" : undefined
           }
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
+          size={props?.size}
         >
-          {props.children || "Orange"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox3"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Banana"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox4"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Melon"}
-        </Checkbox>
-      </CheckboxGroup>
-    </div>
-  );
-};
+          <Checkbox
+            value="checkbox1"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Apple"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox2"
+            error={props.errorSingle}
+            description={
+              props.checkboxDescription
+                ? "Quis laborum culpa enim amet cillum veniam."
+                : undefined
+            }
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Orange"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox3"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Banana"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox4"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Melon"}
+          </Checkbox>
+        </CheckboxGroup>
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  legend: "Legend-tekst",
-  checkboxDescription: false,
-  hideLabel: false,
-  hideLegend: false,
-  errorSingle: false,
-  errorGroup: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    legend: "Legend-tekst",
+    checkboxDescription: false,
+    hideLabel: false,
+    hideLegend: false,
+    errorSingle: false,
+    errorGroup: false,
+    children: "",
+    description: "",
+  },
 };
 
 export const Group = () => (

@navikt/core/react/src/form/checkbox/index.ts

@@ -1,2 +1,5 @@
-export { default as Checkbox, CheckboxProps } from "./Checkbox";
-export { default as CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
+export { default as Checkbox, type CheckboxProps } from "./Checkbox";
+export {
+  default as CheckboxGroup,
+  type CheckboxGroupProps,
+} from "./CheckboxGroup";

@navikt/core/react/src/form/error-summary/error-summary.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { ErrorSummary } from "..";
 export default {
-  title: "ds-react/Form/Errorsummary",
+  title: "ds-react/Errorsummary",
   component: ErrorSummary,
   argTypes: {
     headingTag: {
@@ -19,18 +19,20 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => (
-  <ErrorSummary
-    heading="Feiloppsummering komponent"
-    headingTag={props.headingTag || "h2"}
-    size={props.size ?? undefined}
-  >
-    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-    <ErrorSummary.Item href="#2">
-      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummary.Item>
-  </ErrorSummary>
-);
+export const Default = {
+  render: (props) => (
+    <ErrorSummary
+      heading="Feiloppsummering komponent"
+      headingTag={props.headingTag || "h2"}
+      size={props.size ?? undefined}
+    >
+      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+      <ErrorSummary.Item href="#2">
+        Tekstfeltet må ha en godkjent e-mail
+      </ErrorSummary.Item>
+    </ErrorSummary>
+  ),
+};
 
 export const Small = () => (
   <ErrorSummary heading="Feiloppsummering komponent" size="small">

@navikt/core/react/src/form/error-summary/index.ts

@@ -1,2 +1,2 @@
 export { default as ErrorSummary } from "./ErrorSummary";
-export { ErrorSummaryProps } from "./ErrorSummary";
+export { type ErrorSummaryProps } from "./ErrorSummary";

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

@@ -1,18 +1,23 @@
 export {
   Checkbox,
   CheckboxGroup,
-  CheckboxGroupProps,
-  CheckboxProps,
+  type CheckboxGroupProps,
+  type CheckboxProps,
 } from "./checkbox";
 export {
-  ConfirmationPanelProps,
+  type ConfirmationPanelProps,
   default as ConfirmationPanel,
 } from "./ConfirmationPanel";
-export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
-export { Fieldset, FieldsetContext, FieldsetProps } from "./Fieldset";
-export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export { Search, SearchClearEvent, SearchProps } from "./search";
-export { default as Select, SelectProps } from "./Select";
-export { default as Switch, SwitchProps } from "./Switch";
-export { Counter, default as Textarea, TextareaProps } from "./Textarea";
-export { default as TextField, TextFieldProps } from "./TextField";
+export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
+export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
+export {
+  Radio,
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioProps,
+} from "./radio";
+export { Search, type SearchClearEvent, type SearchProps } from "./search";
+export { default as Select, type SelectProps } from "./Select";
+export { default as Switch, type SwitchProps } from "./Switch";
+export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
+export { default as TextField, type TextFieldProps } from "./TextField";

@navikt/core/react/src/form/radio/index.ts

@@ -1,2 +1,2 @@
-export { default as Radio, RadioProps } from "./Radio";
-export { default as RadioGroup, RadioGroupProps } from "./RadioGroup";
+export { default as Radio, type RadioProps } from "./Radio";
+export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";

@navikt/core/react/src/form/radio/radio.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Radio, RadioGroup } from "../../index";
 
 export default {
-  title: "ds-react/Form/Radio",
+  title: "ds-react/Radio",
   component: Radio,
   subcomponents: {
     RadioGroup,
@@ -13,41 +14,45 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState("radio1");
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("radio1");
 
-  return (
-    <RadioGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.error ? "Errormelding" : undefined}
-      size={props?.size}
-    >
-      <Radio value="radio1">{props.children || "Apple"}</Radio>
-      <Radio
-        value="radio2"
-        description={props.radioDescription ? "Orange description" : undefined}
+    return (
+      <RadioGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.error ? "Errormelding" : undefined}
+        size={props?.size}
       >
-        {props.children || "Orange"}
-      </Radio>
-      <Radio value="radio3">{props.children || "Banana"}</Radio>
-      <Radio value="radio4">{props.children || "Melon"}</Radio>
-    </RadioGroup>
-  );
-};
+        <Radio value="radio1">{props.children || "Apple"}</Radio>
+        <Radio
+          value="radio2"
+          description={
+            props.radioDescription ? "Orange description" : undefined
+          }
+        >
+          {props.children || "Orange"}
+        </Radio>
+        <Radio value="radio3">{props.children || "Banana"}</Radio>
+        <Radio value="radio4">{props.children || "Melon"}</Radio>
+      </RadioGroup>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  error: false,
-  size: "medium",
-  legend: "Legend-tekst",
-  radioDescription: false,
-  hideLegend: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    error: false,
+    size: "medium",
+    legend: "Legend-tekst",
+    radioDescription: false,
+    hideLegend: false,
+    children: "",
+    description: "",
+  },
 };
 
 export const Group = () => (

@navikt/core/react/src/form/search/index.ts

@@ -1 +1,5 @@
-export { default as Search, SearchProps, SearchClearEvent } from "./Search";
+export {
+  default as Search,
+  type SearchProps,
+  type SearchClearEvent,
+} from "./Search";

@navikt/core/react/src/form/search/search.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 
 import { Search } from "../index";
 export default {
-  title: "ds-react/Form/Search",
+  title: "ds-react/Search",
   component: Search,
   argTypes: {
     clearButton: {
@@ -31,28 +32,30 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState("");
-  return (
-    <div data-theme={props.darkmode ? "dark" : "light"}>
-      <Search
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : null}
-        label="Søk"
-        size={props.size}
-        clearButton={props.clearButton}
-        variant={props.variant}
-        hideLabel={props.hideLabel}
-        error={props.error}
-      />
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("");
+    return (
+      <div data-theme={props.darkmode ? "dark" : "light"}>
+        <Search
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          label="Søk"
+          size={props.size}
+          clearButton={props.clearButton}
+          variant={props.variant}
+          hideLabel={props.hideLabel}
+          error={props.error}
+        />
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  darkmode: false,
-  hideLabel: true,
+  args: {
+    controlled: false,
+    darkmode: false,
+    hideLabel: true,
+  },
 };
 
 export const Small = () => (

@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { ConfirmationPanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { Link } from "../..";
 export default {
-  title: "ds-react/form/ConfirmationPanel",
+  title: "ds-react/ConfirmationPanel",
   component: ConfirmationPanel,
   argTypes: {
     size: {
@@ -25,22 +25,24 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <ConfirmationPanel
-      error={props?.error}
-      size={props?.size}
-      checked={props?.checked ?? undefined}
-      label={props?.label ?? "Checkbox label text"}
-    >
-      {content}
-    </ConfirmationPanel>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <ConfirmationPanel
+        error={props?.error}
+        size={props?.size}
+        checked={props?.checked ?? undefined}
+        label={props?.label ?? "Checkbox label text"}
+      >
+        {content}
+      </ConfirmationPanel>
+    );
+  },
 
-Default.args = {
-  label: "Checkbox label text",
-  checked: false,
+  args: {
+    label: "Checkbox label text",
+    checked: false,
+  },
 };
 
 export const Small = () => {

@navikt/core/react/src/form/stories/fieldset.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Fieldset } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { TextField } from "../../index";
 export default {
-  title: "ds-react/form/Fieldset",
+  title: "ds-react/Fieldset",
   component: Fieldset,
   argTypes: {
     size: {
@@ -34,16 +34,18 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <Fieldset legend="Mollit eiusmod" {...props}>
-      {content}
-    </Fieldset>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Fieldset legend="Mollit eiusmod" {...props}>
+        {content}
+      </Fieldset>
+    );
+  },
 
-Default.args = {
-  errorPropagation: true,
+  args: {
+    errorPropagation: true,
+  },
 };
 
 export const Small = () => (

@navikt/core/react/src/form/stories/select.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Select } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
-  title: "ds-react/form/Select",
+  title: "ds-react/Select",
   component: Select,
   argTypes: {
     size: {
@@ -34,15 +34,17 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <Select {...props} label="Ipsum enim quis culpa">
-      {content}
-    </Select>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Select {...props} label="Ipsum enim quis culpa">
+        {content}
+      </Select>
+    );
+  },
 
-Default.args = {};
+  args: {},
+};
 
 export const Small = () => {
   return (

@navikt/core/react/src/form/stories/switch.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Switch } from "../index";
 
 export default {
-  title: "ds-react/form/Switch",
+  title: "ds-react/Switch",
   component: Switch,
   argTypes: {
     size: {
@@ -33,12 +33,14 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return <Switch {...props}>Label text</Switch>;
-};
+export const Default = {
+  render: (props) => {
+    return <Switch {...props}>Label text</Switch>;
+  },
 
-Default.args = {
-  position: "right",
+  args: {
+    position: "right",
+  },
 };
 
 export const Small = () => {

@navikt/core/react/src/form/stories/text-field.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { TextField } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
-  title: "ds-react/form/TextField",
+  title: "ds-react/TextField",
   component: TextField,
   argTypes: {
     size: {
@@ -26,11 +26,13 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return <TextField {...props} label="Ipsum enim quis culpa" />;
-};
+export const Default = {
+  render: (props) => {
+    return <TextField {...props} label="Ipsum enim quis culpa" />;
+  },
 
-Default.args = {};
+  args: {},
+};
 
 export const Small = () => {
   return <TextField size="small" label="Ipsum enim quis culpa" />;

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
 export default {
-  title: "ds-react/form/Textarea",
+  title: "ds-react/Textarea",
   component: Textarea,
   argTypes: {
     size: {
@@ -32,19 +32,21 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return (
-    <Textarea
-      {...props}
-      maxLength={props?.maxLength ?? 100}
-      label="Ipsum enim quis culpa"
-    />
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Textarea
+        {...props}
+        maxLength={props?.maxLength ?? 100}
+        label="Ipsum enim quis culpa"
+      />
+    );
+  },
 
-Default.args = {
-  maxLength: 100,
-  resize: false,
+  args: {
+    maxLength: 100,
+    resize: false,
+  },
 };
 
 export const Small = () => {

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

@@ -1,6 +1,6 @@
-export { default as Cell, CellProps } from "./Cell";
-export { default as Grid, GridProps } from "./Grid";
+export { default as Cell, type CellProps } from "./Cell";
+export { default as Grid, type GridProps } from "./Grid";
 export {
   default as ContentContainer,
-  ContentContainerProps,
+  type ContentContainerProps,
 } from "./ContentContainer";

@navikt/core/react/src/guide-panel/Illustration.tsx

@@ -6,11 +6,15 @@ interface SVGRProps {
   titleId?: string;
 }
 
-export const DefaultIllustration = ({
+export type DefaultIllustrationType = React.FunctionComponent<
+  SVGProps<SVGSVGElement> & SVGRProps
+>;
+
+export const DefaultIllustration: DefaultIllustrationType = ({
   title,
   titleId: _titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+}) => {
   let titleId: string | undefined = useId();
   titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;
 

@navikt/core/react/src/guide-panel/guidepanel.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BodyLong, GuidePanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
   title: "ds-react/GuidePanel",
   component: GuidePanel,
@@ -11,26 +11,28 @@ adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
 cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
 enim id.`;
 
-export const Default = (props) => {
-  const newProps = props?.colorOverride
-    ? {
-        style: {
-          ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
-          ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
-        },
-      }
-    : {};
+export const Default = {
+  render: (props) => {
+    const newProps = props?.colorOverride
+      ? {
+          style: {
+            ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
+            ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
+          },
+        }
+      : {};
 
-  return (
-    <GuidePanel {...newProps} poster={props?.poster}>
-      {panelText}
-    </GuidePanel>
-  );
-};
+    return (
+      <GuidePanel {...newProps} poster={props?.poster}>
+        {panelText}
+      </GuidePanel>
+    );
+  },
 
-Default.args = {
-  poster: false,
-  colorOverride: false,
+  args: {
+    poster: false,
+    colorOverride: false,
+  },
 };
 
 export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;

@navikt/core/react/src/guide-panel/index.ts

@@ -1,3 +1,3 @@
-export { default as GuidePanel, GuidePanelProps } from "./GuidePanel";
-export { GuideProps } from "./Guide";
+export { default as GuidePanel, type GuidePanelProps } from "./GuidePanel";
+export { type GuideProps } from "./Guide";
 export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration";

@navikt/core/react/src/help-text/help-text.stories.tsx

@@ -36,16 +36,18 @@ export default {
   },
 };
 
-export const Default = (props: any) => {
-  return (
-    <HelpText title="show tooltip" strategy="fixed" {...props}>
-      Id ullamco excepteur elit fugiat labore.
-    </HelpText>
-  );
-};
+export const Default = {
+  render: (props: any) => {
+    return (
+      <HelpText title="show tooltip" strategy="fixed" {...props}>
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+    );
+  },
 
-Default.args = {
-  title: "show tooltip",
+  args: {
+    title: "show tooltip",
+  },
 };
 
 export const Open = () => {

@navikt/core/react/src/help-text/index.ts

@@ -1,2 +1,2 @@
 export { default as HelpText } from "./HelpText";
-export { HelpTextProps } from "./HelpText";
+export { type HelpTextProps } from "./HelpText";