Version Packages (#1816 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
📝 Changeset
2026-10-13 01:02:02 +00:00 · 2023-02-21 23:24:25 +01:00 · 2023-02-21 23:05:08 +01:00 · 2023-02-21 23:03:30 +01:00 · 2023-02-21 22:59:06 +01:00 · 2023-02-17 12:03:53 +01:00
867 changed files with 27049 additions and 27951 deletions
@@ -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,9 +16,9 @@
  ],
  "linked": [],
  "access": "public",
-  "baseBranch": "master",
+  "baseBranch": "main",
  "updateInternalDependencies": "patch",
-  "ignore": ["shadow-dom", "aksel.nav.no"],
+  "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],

  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "updateInternalDependents": "always"
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,25 +6,48 @@ 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
-          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
-          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> 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
@@ -43,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 }}
@@ -2,28 +2,84 @@ 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:
-  build_and_deploy:
-    name: Build and deploy to prod-gcp
-    runs-on: ubuntu-20.04
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
    steps:
-      - uses: actions/setup-node@v1
+      - 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:
-          node-version: "14"
-      - uses: actions/checkout@v2
+          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-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
-          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
-          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> 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
@@ -39,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 }}
@@ -68,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 }}
@@ -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 }}
@@ -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

@@ -22,18 +22,17 @@ jobs:
          key: ${{ runner.os }}-build-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-build-
-
      - name: Install dependencies
-        run: yarn
+        run: cd aksel.nav.no/website && yarn

      - name: Export dataset
-        run: SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn workspace aksel.nav.no sanity: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:
          credentials_json: "${{ secrets.gcp_credentials_prod }}"
      - uses: "google-github-actions/upload-cloud-storage@v0"
        with:
-          path: ./aksel.nav.no/sanity
+          path: ./aksel.nav.no/website
          destination: "aksel-website-prod/backups"
-          glob: "**/backup-*.tar.gz"
+          glob: "backup-*.tar.gz"
@@ -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
@@ -3,7 +3,7 @@ name: CI
 on:
  push:
    branches:
-      - master
+      - main
      - next
  pull_request:
  workflow_dispatch:
@@ -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"

@@ -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
@@ -21,9 +23,6 @@ jobs:
      - name: add tokens to .env
        run: |
          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
-          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> 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
@@ -39,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
+        run: yarn workspace website e2e:ci-full
      - uses: actions/upload-artifact@v3
        if: always()
        with:
@@ -4,7 +4,7 @@ on:
  workflow_dispatch:
  push:
    branches:
-      - "master"
+      - "main"
    paths:
      - "fonts/**"

@@ -20,9 +20,8 @@ jobs:
      - uses: "actions/checkout@v3"

      - id: upload
-        uses: nais/frontend-plattform-cdn-upload-action@main
+        uses: navikt/frontend/actions/cdn-upload/v1@main
        with:
-          cdn-environment: cdn.nav.no
          cdn-team-name: aksel
          source: ./fonts
          destination: "" # uploads folder to team root
@@ -3,7 +3,7 @@ name: Release
 on:
  push:
    branches:
-      - master
+      - main
  workflow_dispatch:

 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -1,25 +0,0 @@
-name: Indexing search
-on:
-  workflow_dispatch:
-  schedule:
-    # 01.00 & 12.00 every day
-    - cron: "00 01,12 * * *"
-
-jobs:
-  searchcrawl:
-    name: Search-indexing aksel.nav.no
-    runs-on: ubuntu-latest
-    env:
-      APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
-      API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
-    steps:
-      - uses: actions/checkout@v2
-      - name: Read crawler.json
-        id: algolia_config
-        run: echo "::set-output name=config::$(cat ./aksel.nav.no/crawler.json | jq -r tostring)"
-      - name: Push indices to Algolia
-        uses: signcl/docsearch-scraper-action@master
-        env:
-          APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
-          API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
-          CONFIG: ${{ steps.algolia_config.outputs.config }}
@@ -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
@@ -116,6 +116,7 @@ react-docgen.json
 react-docgen-docs.json
 cjs
 esm
+@navikt/community/navno/css
 .vercel
 _docs.json

@@ -147,3 +148,6 @@ tmp.json
 /playwright/.cache/
 playwright-report/
 /test-results/
+backup-*.tar.gz
+sitemap-urls.json
+*.tar.gz
@@ -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,
+    },
+  ];
+};
@@ -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
@@ -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);
+}
@@ -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"
+            ),
+          },
+        ],
+      },
+    });
+  },
+};
@@ -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,
-  },
-};
@@ -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); */
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
@@ -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];
@@ -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>
@@ -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',
@@ -1,24 +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"),
-    ],
-  });
-  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;
-};
@@ -1,12 +1,66 @@
 # @navikt/ds-codemod

+## 2.3.0
+
+## 2.2.0
+
+## 2.1.7
+
+## 2.1.6
+
+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
+## 2.1.0
+
+## 2.0.18
+
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
+## 2.0.12
+
+## 2.0.11
+
+## 2.0.10
+
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
+## 2.0.6
+
+## 2.0.5
+
+## 2.0.4
+
+## 2.0.3
+
+## 2.0.2
+
 ## 2.0.1

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

@@ -44,6 +98,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
@@ -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)

 #

@@ -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",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.0.1",
+  "version": "2.3.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",
@@ -0,0 +1,16 @@
+const template = require("./template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: false,
+  titleProp: false,
+  svgProps: {
+    focusable: false,
+    role: "img",
+  },
+  /* replaceAttrValues: {
+    "#262626": "currentColor",
+  }, */
+  template,
+};
@@ -0,0 +1,37 @@
+# NAV React-components for nav.no
+
+## Installation
+
+Install `@navikt/ds-navno` with yarn
+
+```bash
+  yarn add @navikt/ds-navno
+```
+
+Install `@navikt/ds-navno` with npm
+
+```bash
+  npm install @navikt/ds-navno
+```
+
+## Usage
+
+Remember to also import @navikt/ds-navno/css to apply styling!
+
+```javascript
+import "@navikt/ds-navno/css";
+import { PageHeader } from "@navikt/ds-navno";
+
+function App() {
+  return <PageHeader />;
+}
+```
+
+## Learn more
+
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)
+
+## License
+
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
@@ -0,0 +1,20 @@
+/**
+ * @type {import('@babel/core').TransformOptions}
+ */
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: "auto",
+        useBuiltIns: "entry",
+        corejs: 3,
+        debug: false,
+        bugfixes: true,
+      },
+    ],
+    ["@babel/preset-typescript", {}],
+    ["@babel/preset-react", { development: false, useBuiltIns: true }],
+  ],
+  babelrcRoots: ["."],
+};
@@ -0,0 +1,12 @@
+const path = require("path");
+
+function defaultIndexTemplate(filePaths) {
+  const exportEntries = filePaths.map((filePath) => {
+    const basename = path.basename(filePath, path.extname(filePath));
+    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename;
+    return `export { default as Pictogram${exportName} } from './${basename}'`;
+  });
+  return exportEntries.join("\n");
+}
+
+module.exports = defaultIndexTemplate;
@@ -0,0 +1,74 @@
+{
+  "name": "@navikt/ds-navno",
+  "version": "0.0.1",
+  "private": true,
+  "description": "nav.no + ds components",
+  "author": "Aksel | NAV designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript",
+    "javascript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/aksel.git"
+  },
+  "sideEffects": false,
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/css",
+    "/cjs",
+    "/esm",
+    "/src",
+    "_docs.json",
+    "!**/*.tsbuildinfo"
+  ],
+  "scripts": {
+    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
+    "clean": "rimraf cjs esm css",
+    "build": "yarn build-pict && concurrently \"tsc -b\" \"rollup -c\" && yarn css && yarn create-package-json-pointers-to-esm",
+    "css": "copyfiles -f esm/index.css css/ && rimraf esm/*.css cjs/*.css",
+    "test-ignore": "TZ=UTC jest",
+    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
+  },
+  "dependencies": {
+    "@navikt/ds-icons": "^2.3.0",
+    "@navikt/ds-react": "^2.3.0",
+    "clsx": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.19.4",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@rollup/plugin-babel": "6.0.2",
+    "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@svgr/cli": "6.2.1",
+    "concurrently": "7.2.1",
+    "copyfiles": "2.4.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-import": "14.1.0",
+    "rimraf": "^3.0.2",
+    "rollup": "3.2.3",
+    "rollup-plugin-node-externals": "5.0.1",
+    "rollup-plugin-postcss": "4.0.2",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  }
+}
@@ -0,0 +1,71 @@
+<svg
+  width="64"
+  height="64"
+  viewBox="0 0 64 64"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M31.3332 41.791C31.3332 35.3802 37.5554 24.1613 40.6665 24.1613C43.7777 24.1613 49.9999 35.3802 49.9999 41.791C49.9999 48.2017 45.8212 53.0098 40.6665 53.0098C35.5119 53.0098 31.3332 48.8721 31.3332 41.791Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M39.825 25.4844C40.2522 25.9492 40.9751 25.9796 41.4398 25.5525C41.9046 25.1254 41.935 24.4024 41.5079 23.9377L39.825 25.4844ZM30.4271 17.5238L23.3331 17.5238L23.3331 19.8095L30.4271 19.8095L30.4271 17.5238ZM6.19028 34.6666L6.19028 64L8.476 64L8.476 34.6666L6.19028 34.6666ZM37.439 22.8885L39.825 25.4844L41.5079 23.9377L39.1219 21.3417L37.439 22.8885ZM23.3331 17.5238C13.8654 17.5238 6.19028 25.1989 6.19028 34.6666L8.476 34.6666C8.47599 26.4612 15.1278 19.8095 23.3331 19.8095L23.3331 17.5238ZM30.4271 19.8095C33.0923 19.8095 35.6355 20.9262 37.439 22.8885L39.1219 21.3417C36.8855 18.9085 33.7319 17.5238 30.4271 17.5238L30.4271 19.8095Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M13.8571 42.744C13.8571 44.042 13.1875 45.9912 12.2658 47.6744C11.8135 48.5002 11.3322 49.2031 10.8996 49.6838C10.6824 49.9251 10.4999 50.0852 10.3619 50.178C10.331 50.1987 10.3057 50.2139 10.2857 50.2249C10.2658 50.2139 10.2404 50.1987 10.2095 50.178C10.0715 50.0852 9.88904 49.9251 9.67187 49.6838C9.23923 49.2031 8.75791 48.5002 8.30567 47.6744C7.38392 45.9912 6.71429 44.042 6.71429 42.744C6.71429 40.0533 8.45327 38.3334 10.2857 38.3334C11.273 38.3334 12.1413 38.718 12.7725 39.4244C13.4078 40.1352 13.8571 41.2363 13.8571 42.744Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M18.6667 47.6085C17.3979 47.6085 15.4832 48.2838 13.8244 49.2188C13.0115 49.6769 12.3196 50.1645 11.8462 50.603C11.6088 50.823 11.4505 51.0084 11.3582 51.1497C11.3312 51.1911 11.3135 51.2231 11.302 51.2462C11.3135 51.2693 11.3312 51.3012 11.3582 51.3426C11.4505 51.4839 11.6088 51.6694 11.8462 51.8894C12.3196 52.3278 13.0115 52.8155 13.8244 53.2736C15.4832 54.2085 17.3979 54.8839 18.6667 54.8839C21.2846 54.8839 23 53.1402 23 51.2462C23 50.2306 22.6149 49.3431 21.9188 48.7029C21.2203 48.0605 20.1423 47.6085 18.6667 47.6085Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M11.9764 50.0867V50.0867C8.85957 51.4986 6.85728 54.6037 6.85728 58.0254L6.85728 60.5216"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M3.87373e-05 64.0002V64.0002C3.08423 58.7853 10.6301 58.7853 13.7143 64.0002V64.0002"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M52.6224 26.9825V26.9825C57.4166 26.9258 61.3335 30.7966 61.3335 35.5912L61.3335 64.667"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M54.0742 15.5883C52.2506 15.5883 49.5767 16.527 47.2991 17.7872C46.1764 18.4083 45.2094 19.0755 44.5387 19.6854C44.2024 19.9911 43.9655 20.2602 43.8195 20.4797C43.6933 20.6694 43.6714 20.7672 43.6676 20.7852C43.6714 20.8032 43.6933 20.9011 43.8195 21.0908C43.9655 21.3103 44.2024 21.5793 44.5387 21.8851C45.2094 22.495 46.1764 23.1621 47.2991 23.7833C49.5767 25.0435 52.2506 25.9821 54.0742 25.9821C57.811 25.9821 60.3335 23.5243 60.3335 20.7852C60.3335 19.3455 59.7756 18.0698 58.7519 17.1456C57.7245 16.2179 56.1626 15.5883 54.0742 15.5883Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M31.2594 25.9823C33.0831 25.9823 35.757 25.0436 38.0346 23.7834C39.1573 23.1622 40.1243 22.4951 40.795 21.8852C41.1312 21.5795 41.3682 21.3104 41.5141 21.0909C41.6403 20.9012 41.6622 20.8034 41.666 20.7854C41.6622 20.7674 41.6403 20.6695 41.5141 20.4798C41.3682 20.2603 41.1312 19.9913 40.795 19.6855C40.1243 19.0756 39.1573 18.4085 38.0346 17.7873C35.757 16.5271 33.0831 15.5884 31.2594 15.5884C27.5226 15.5884 25.0002 18.0463 25.0002 20.7854C25.0002 22.2251 25.558 23.5007 26.5817 24.425C27.6092 25.3526 29.1711 25.9823 31.2594 25.9823Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M43.8491 8.75968C42.9384 10.3306 42.4176 13.1046 42.3746 15.699C42.3535 16.9776 42.45 18.145 42.645 19.0283C42.7427 19.4711 42.8582 19.8101 42.9762 20.046C43.0806 20.2547 43.1564 20.322 43.1689 20.3329C43.1847 20.3382 43.281 20.37 43.5147 20.3557C43.7789 20.3395 44.1314 20.2696 44.5653 20.1325C45.4309 19.859 46.4942 19.3586 47.5955 18.701C49.83 17.3667 51.9818 15.5306 52.8924 13.9597C54.7572 10.743 53.887 7.33688 51.4989 5.96367C50.2443 5.24233 48.8543 5.08606 47.5388 5.50687C46.2191 5.92903 44.8921 6.9604 43.8491 8.75968Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M52.892 28.4375C51.9813 26.8665 49.8296 25.0304 47.5951 23.6961C46.4938 23.0385 45.4304 22.5381 44.5648 22.2646C44.1309 22.1275 43.7784 22.0576 43.5143 22.0415C43.2806 22.0272 43.1842 22.0589 43.1685 22.0642C43.156 22.0751 43.0802 22.1424 42.9758 22.3511C42.8578 22.587 42.7423 22.926 42.6446 23.3688C42.4496 24.2521 42.353 25.4195 42.3742 26.6981C42.4172 29.2925 42.938 32.0665 43.8486 33.6374C45.7134 36.8541 49.1102 37.8066 51.4984 36.4334C52.7529 35.7121 53.5838 34.5913 53.8757 33.2463C54.1684 31.8969 53.9351 30.2367 52.892 28.4375Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M32.4416 28.4375C33.3523 26.8665 35.504 25.0304 37.7385 23.6961C38.8398 23.0385 39.9032 22.5381 40.7688 22.2646C41.2027 22.1275 41.5552 22.0576 41.8194 22.0415C42.053 22.0272 42.1494 22.0589 42.1651 22.0642C42.1776 22.0751 42.2534 22.1424 42.3578 22.3511C42.4758 22.587 42.5913 22.926 42.689 23.3688C42.884 24.2521 42.9806 25.4195 42.9594 26.6981C42.9164 29.2925 42.3957 32.0665 41.485 33.6374C39.6203 36.8541 36.2234 37.8066 33.8352 36.4334C32.5807 35.7121 31.7498 34.5913 31.458 33.2463C31.1652 31.8969 31.3985 30.2367 32.4416 28.4375Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M32.4416 13.9599C33.3523 15.5308 35.504 17.3669 37.7385 18.7012C38.8398 19.3588 39.9032 19.8592 40.7688 20.1327C41.2027 20.2698 41.5552 20.3397 41.8194 20.3558C42.053 20.3702 42.1494 20.3384 42.1651 20.3331C42.1776 20.3222 42.2534 20.2549 42.3578 20.0462C42.4758 19.8103 42.5913 19.4713 42.689 19.0285C42.884 18.1452 42.9806 16.9778 42.9594 15.6992C42.9164 13.1048 42.3957 10.3308 41.485 8.75988C39.6203 5.54323 36.2234 4.59067 33.8352 5.96387C32.5807 6.68522 31.7498 7.80597 31.458 9.15102C31.1652 10.5004 31.3985 12.1606 32.4416 13.9599Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+</svg>
@@ -0,0 +1,71 @@
+<svg
+  width="96"
+  height="96"
+  viewBox="0 0 96 96"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M47 62.6869C47 53.0707 56.3333 36.2424 61 36.2424C65.6667 36.2424 75 53.0707 75 62.6869C75 72.303 68.732 79.5151 61 79.5151C53.268 79.5151 47 73.3086 47 62.6869Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M60.2638 37.7434C60.6375 38.15 61.2701 38.1767 61.6768 37.8029C62.0834 37.4292 62.11 36.7966 61.7363 36.39L60.2638 37.7434ZM45.641 27L35.0001 27L35.0001 29L45.641 29L45.641 27ZM10.0001 52L10.0001 96L12.0001 96L12.0001 52L10.0001 52ZM56.6848 33.8494L60.2638 37.7434L61.7363 36.39L58.1573 32.496L56.6848 33.8494ZM35.0001 27C21.1929 27 10.0001 38.1929 10.0001 52L12.0001 52C12.0001 39.2974 22.2975 29 35.0001 29L35.0001 27ZM45.641 29C49.8386 29 53.8442 30.7589 56.6848 33.8494L58.1573 32.496C54.938 28.9934 50.3983 27 45.641 27L45.641 29Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M20.7856 64.116C20.7856 66.063 19.7812 68.9867 18.3986 71.5115C17.7202 72.7503 16.9982 73.8046 16.3493 74.5257C16.0235 74.8876 15.7498 75.1278 15.5428 75.2669C15.4964 75.2981 15.4584 75.3208 15.4285 75.3372C15.3986 75.3208 15.3606 75.2981 15.3142 75.2669C15.1072 75.1278 14.8335 74.8876 14.5077 74.5257C13.8588 73.8046 13.1368 72.7503 12.4585 71.5115C11.0758 68.9867 10.0714 66.063 10.0714 64.116C10.0714 60.0798 12.6798 57.5 15.4285 57.5C16.9095 57.5 18.2119 58.0769 19.1587 59.1365C20.1116 60.2028 20.7856 61.8545 20.7856 64.116Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M28 71.4127C26.0969 71.4127 23.2248 72.4257 20.7365 73.8281C19.5173 74.5153 18.4794 75.2467 17.7694 75.9045C17.4131 76.2344 17.1757 76.5126 17.0373 76.7246C16.9968 76.7866 16.9702 76.8346 16.953 76.8692C16.9702 76.9039 16.9968 76.9519 17.0373 77.0139C17.1757 77.2259 17.4131 77.5041 17.7694 77.834C18.4794 78.4917 19.5173 79.2232 20.7365 79.9104C23.2248 81.3128 26.0969 82.3258 28 82.3258C31.9269 82.3258 34.5 79.7102 34.5 76.8692C34.5 75.346 33.9224 74.0146 32.8781 73.0543C31.8304 72.0907 30.2134 71.4127 28 71.4127Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M17.9645 75.1302V75.1302C13.2893 77.248 10.2858 81.9057 10.2858 87.0383L10.2858 90.7825"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M2.61579e-05 96V96C4.62632 88.1777 15.9451 88.1777 20.5714 96V96"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M78.9333 40.4731V40.4731C86.1247 40.3881 92 46.1943 92 53.3862L92 97"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M81.1111 23.3827C78.3756 23.3827 74.3647 24.7907 70.9484 26.681C69.2643 27.6128 67.8138 28.6135 66.8077 29.5283C66.3034 29.987 65.948 30.3905 65.729 30.7197C65.5397 31.0044 65.5068 31.1511 65.5012 31.1781C65.5068 31.2051 65.5397 31.3519 65.729 31.6365C65.948 31.9657 66.3034 32.3692 66.8077 32.8279C67.8138 33.7428 69.2643 34.7434 70.9484 35.6752C74.3647 37.5655 78.3756 38.9735 81.1111 38.9735C86.7163 38.9735 90.4999 35.2867 90.4999 31.1781C90.4999 29.0185 89.6632 27.105 88.1276 25.7186C86.5865 24.3272 84.2436 23.3827 81.1111 23.3827Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M46.8889 38.9736C49.6243 38.9736 53.6352 37.5656 57.0516 35.6754C58.7356 34.7436 60.1861 33.7429 61.1922 32.828C61.6966 32.3694 62.052 31.9658 62.2709 31.6366C62.4602 31.352 62.4931 31.2052 62.4988 31.1782C62.4931 31.1513 62.4602 31.0045 62.2709 30.7199C62.052 30.3907 61.6966 29.9871 61.1922 29.5285C60.1861 28.6136 58.7356 27.6129 57.0516 26.6811C53.6352 24.7909 49.6243 23.3829 46.8889 23.3829C41.2837 23.3829 37.5 27.0697 37.5 31.1782C37.5 33.3379 38.3368 35.2513 39.8723 36.6377C41.4135 38.0292 43.7563 38.9736 46.8889 38.9736Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M65.7733 13.1394C64.4073 15.4957 63.6262 19.6567 63.5617 23.5483C63.5299 25.4663 63.6748 27.2173 63.9672 28.5423C64.1138 29.2065 64.2871 29.715 64.4641 30.0689C64.6207 30.382 64.7343 30.4828 64.7531 30.4992C64.7767 30.5072 64.9212 30.5548 65.2717 30.5333C65.668 30.509 66.1968 30.4042 66.8476 30.1986C68.146 29.7883 69.7411 29.0377 71.393 28.0513C74.7447 26.0499 77.9724 23.2957 79.3384 20.9393C82.1355 16.1143 80.8303 11.0052 77.248 8.94534C75.3662 7.86333 73.2812 7.62893 71.308 8.26014C69.3284 8.89337 67.3379 10.4404 65.7733 13.1394Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M79.3378 42.6561C77.9718 40.2997 74.7441 37.5455 71.3924 35.544C69.7405 34.5577 68.1454 33.8071 66.847 33.3968C66.1962 33.1912 65.6674 33.0863 65.2712 33.0621C64.9206 33.0406 64.7761 33.0882 64.7525 33.0962C64.7337 33.1126 64.6201 33.2134 64.4635 33.5265C64.2865 33.8804 64.1132 34.3889 63.9666 35.0531C63.6742 36.378 63.5293 38.1291 63.5611 40.047C63.6256 43.9387 64.4067 48.0996 65.7727 50.456C68.5698 55.281 73.6651 56.7098 77.2474 54.65C79.1292 53.568 80.3755 51.8869 80.8133 49.8693C81.2524 47.8453 80.9024 45.355 79.3378 42.6561Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M48.6621 42.6561C50.0281 40.2997 53.2558 37.5455 56.6076 35.544C58.2594 34.5577 59.8545 33.8071 61.1529 33.3968C61.8038 33.1912 62.3325 33.0863 62.7288 33.0621C63.0793 33.0406 63.2238 33.0882 63.2475 33.0962C63.2662 33.1126 63.3798 33.2134 63.5364 33.5265C63.7135 33.8804 63.8867 34.3889 64.0333 35.0531C64.3258 36.378 64.4706 38.1291 64.4388 40.047C64.3744 43.9387 63.5932 48.0996 62.2272 50.456C59.4301 55.281 54.3348 56.7098 50.7525 54.65C48.8708 53.568 47.6244 51.8869 47.1867 49.8693C46.7475 47.8453 47.0976 45.355 48.6621 42.6561Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M48.6621 20.9399C50.0281 23.2962 53.2558 26.0505 56.6076 28.0519C58.2594 29.0383 59.8545 29.7888 61.1529 30.1991C61.8038 30.4048 62.3325 30.5096 62.7288 30.5338C63.0793 30.5553 63.2238 30.5077 63.2475 30.4998C63.2662 30.4834 63.3798 30.3825 63.5364 30.0694C63.7135 29.7155 63.8867 29.2071 64.0333 28.5429C64.3258 27.2179 64.4706 25.4668 64.4388 23.5489C64.3744 19.6573 63.5932 15.4963 62.2272 13.1399C59.4301 8.31492 54.3348 6.88607 50.7525 8.94589C48.8708 10.0279 47.6244 11.709 47.1867 13.7266C46.7475 15.7506 47.0976 18.2409 48.6621 20.9399Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+</svg>
@@ -0,0 +1,65 @@
+import { babel } from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import glob from "glob";
+import * as path from "path";
+import postcssDuplicate from "postcss-combine-duplicated-selectors";
+import postcssImport from "postcss-import";
+import { externals } from "rollup-plugin-node-externals";
+import postcss from "rollup-plugin-postcss";
+
+import { readFileSync } from "fs";
+
+const pkg = JSON.parse(
+  readFileSync(new URL("./package.json", import.meta.url).pathname)
+);
+const extensions = [".js", ".jsx", ".ts", ".tsx"];
+const targets = [
+  "last 3 chrome versions",
+  "last 3 firefox versions",
+  "last 3 opera versions",
+  "last 3 edge versions",
+  "last 3 safari versions",
+  "last 3 chromeandroid versions",
+  "last 1 firefoxandroid versions",
+  "ios >= 13.4",
+  "node 12.20",
+];
+
+export default {
+  input: glob.sync("src/**/index.ts"),
+
+  plugins: [
+    externals({ deps: true, devDeps: true, packagePath: "./package.json" }),
+    nodeResolve({ extensions }),
+    postcss({
+      extract: "index.css",
+      plugins: [postcssImport(), postcssDuplicate()],
+    }),
+    commonjs(),
+    babel({
+      rootMode: "upward",
+      extensions,
+      exclude: "node_modules/**",
+      babelHelpers: "bundled",
+      envName: "production",
+      targets,
+    }),
+  ],
+  output: [
+    {
+      format: "cjs",
+      dir: path.dirname(pkg.main),
+      preserveModules: true,
+      entryFileNames: "[name].js",
+      exports: "named",
+    },
+    {
+      format: "esm",
+      dir: path.dirname(pkg.module),
+      preserveModules: true,
+      sourcemap: true,
+      entryFileNames: "[name].js",
+    },
+  ],
+};
@@ -0,0 +1,2 @@
+export * from "./page-header";
+export * from "./pictograms";
@@ -0,0 +1,17 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import "./page-header.css";
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ children, className, ...rest }, ref) => (
+    <div {...rest} ref={ref} className={cl(className, "navno-page-header")}>
+      {children}
+    </div>
+  )
+);
+
+export default PageHeader;
@@ -0,0 +1 @@
+export { default as PageHeader } from "./PageHeader";
@@ -0,0 +1,3 @@
+.navno-page-header {
+  color: red;
+}
@@ -0,0 +1,24 @@
+import React from "react";
+import { PageHeader } from ".";
+
+export default {
+  title: "ds-navno/PageHeader",
+  component: PageHeader,
+  argTypes: {
+    variant: {
+      defaultValue: "var1",
+      control: {
+        type: "radio",
+        options: ["var1", "var1"],
+      },
+    },
+  },
+};
+
+export const Default = {
+  render: (props) => <PageHeader>{props.children}</PageHeader>,
+
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+  },
+};
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgUtbetalingsdatoer = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => {
+    return (
+      <svg
+        width={96}
+        height={96}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        ref={ref}
+        {...props}
+      >
+        <path
+          d="M47 62.687c0-9.616 9.333-26.445 14-26.445s14 16.829 14 26.445-6.268 16.828-14 16.828-14-6.206-14-16.828Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M60.264 37.743a1 1 0 0 0 1.472-1.353l-1.472 1.353ZM45.64 27h-10.64v2h10.64v-2Zm-35.64 25v44h2V52h-2Zm46.684-18.15 3.579 3.893 1.472-1.353-3.579-3.894-1.472 1.353ZM35 27c-13.807 0-25 11.193-25 25h2c0-12.703 10.297-23 23-23v-2Zm10.641 2a15 15 0 0 1 11.044 4.85l1.472-1.354A17 17 0 0 0 45.641 27v2Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M20.786 64.116c0 1.947-1.005 4.87-2.387 7.395-.679 1.24-1.4 2.294-2.05 3.015-.326.362-.6.602-.806.74a1.493 1.493 0 0 1-.114.071 1.493 1.493 0 0 1-.115-.07c-.207-.14-.48-.38-.806-.741-.65-.721-1.371-1.776-2.05-3.014-1.382-2.525-2.387-5.449-2.387-7.396 0-4.036 2.609-6.616 5.357-6.616 1.482 0 2.784.577 3.73 1.636.954 1.067 1.628 2.718 1.628 4.98ZM28 71.413c-1.903 0-4.775 1.013-7.264 2.415-1.219.687-2.257 1.419-2.967 2.076-.356.33-.593.609-.732.82a1.44 1.44 0 0 0-.084.145c.017.035.044.083.084.145.139.212.376.49.732.82.71.658 1.748 1.39 2.968 2.076 2.488 1.403 5.36 2.416 7.263 2.416 3.927 0 6.5-2.616 6.5-5.457 0-1.523-.578-2.854-1.622-3.815-1.048-.963-2.665-1.641-4.878-1.641Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M17.965 75.13a13.073 13.073 0 0 0-7.68 11.908v3.745"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M0 96c4.626-7.822 15.945-7.822 20.571 0M78.933 40.473C86.125 40.388 92 46.194 92 53.386V97M81.111 23.383c-2.735 0-6.746 1.408-10.163 3.298-1.684.932-3.134 1.932-4.14 2.847-.505.459-.86.863-1.079 1.192-.19.284-.222.431-.228.458.006.027.039.174.228.459.219.329.574.732 1.079 1.19 1.006.916 2.456 1.916 4.14 2.848 3.417 1.89 7.428 3.299 10.163 3.299 5.605 0 9.389-3.687 9.389-7.796 0-2.16-.837-4.073-2.372-5.46-1.541-1.39-3.884-2.335-7.017-2.335ZM46.889 38.974c2.735 0 6.746-1.408 10.163-3.299 1.684-.931 3.134-1.932 4.14-2.847.505-.459.86-.862 1.079-1.191.19-.285.222-.432.228-.459-.006-.027-.039-.174-.228-.458-.219-.33-.574-.733-1.079-1.191-1.006-.915-2.456-1.916-4.14-2.848-3.417-1.89-7.428-3.298-10.163-3.298-5.605 0-9.389 3.687-9.389 7.795 0 2.16.837 4.073 2.372 5.46 1.541 1.391 3.884 2.336 7.017 2.336Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M65.773 13.14c-1.366 2.356-2.147 6.517-2.211 10.408-.032 1.918.113 3.67.405 4.994.147.664.32 1.173.497 1.527.157.313.27.414.29.43.023.008.167.056.518.034.396-.024.925-.129 1.576-.334 1.298-.41 2.893-1.161 4.545-2.148 3.352-2.001 6.58-4.755 7.945-7.112 2.797-4.825 1.492-9.934-2.09-11.994-1.882-1.082-3.967-1.316-5.94-.685-1.98.633-3.97 2.18-5.535 4.88ZM79.338 42.656c-1.366-2.356-4.594-5.11-7.946-7.112-1.651-.986-3.247-1.737-4.545-2.147-.65-.206-1.18-.31-1.576-.335-.35-.021-.495.026-.519.034-.018.017-.132.117-.288.43-.177.354-.35.863-.497 1.527-.293 1.325-.438 3.076-.406 4.994.065 3.892.846 8.053 2.212 10.409 2.797 4.825 7.892 6.254 11.474 4.194 1.882-1.082 3.129-2.763 3.566-4.78.44-2.025.09-4.515-1.475-7.214Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M48.662 42.656c1.366-2.356 4.594-5.11 7.946-7.112 1.651-.986 3.247-1.737 4.545-2.147.65-.206 1.18-.31 1.576-.335.35-.021.495.026.519.034.018.017.132.117.288.43.178.354.35.863.497 1.527.293 1.325.438 3.076.406 4.994-.065 3.892-.846 8.053-2.212 10.409-2.797 4.825-7.892 6.254-11.474 4.194-1.882-1.082-3.129-2.763-3.566-4.78-.44-2.025-.09-4.515 1.475-7.214ZM48.662 20.94c1.366 2.356 4.594 5.11 7.946 7.112 1.651.986 3.247 1.737 4.545 2.147.65.206 1.18.31 1.576.335.35.021.495-.026.519-.034.018-.017.132-.117.288-.43.178-.355.35-.863.497-1.527.293-1.325.438-3.076.406-4.994-.065-3.892-.846-8.053-2.212-10.41-2.797-4.824-7.892-6.253-11.474-4.193-1.882 1.082-3.129 2.763-3.566 4.78-.44 2.025-.09 4.515 1.475 7.214Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+      </svg>
+    );
+  }
+);
+export default SvgUtbetalingsdatoer;
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgUtbetalingsdatoerSmall = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => {
+    return (
+      <svg
+        width={64}
+        height={64}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        ref={ref}
+        {...props}
+      >
+        <path
+          d="M31.333 41.791c0-6.41 6.222-17.63 9.334-17.63 3.11 0 9.333 11.22 9.333 17.63 0 6.41-4.179 11.219-9.334 11.219-5.154 0-9.333-4.138-9.333-11.219Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M39.825 25.484a1.143 1.143 0 1 0 1.683-1.546l-1.683 1.546Zm-9.398-7.96h-7.094v2.285h7.094v-2.285ZM6.19 34.667V64h2.286V34.667H6.19ZM37.44 22.888l2.386 2.596 1.683-1.546-2.386-2.596-1.683 1.547Zm-14.106-5.364c-9.468 0-17.143 7.675-17.143 17.143h2.286c0-8.206 6.652-14.858 14.857-14.858v-2.285Zm7.094 2.285a9.523 9.523 0 0 1 7.012 3.08l1.683-1.547a11.81 11.81 0 0 0-8.695-3.818v2.285Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M13.857 42.744c0 1.298-.67 3.247-1.591 4.93-.453.826-.934 1.53-1.366 2.01-.218.241-.4.401-.538.494-.031.02-.056.036-.076.047a1.054 1.054 0 0 1-.076-.047 3.115 3.115 0 0 1-.538-.494c-.433-.48-.914-1.184-1.366-2.01-.922-1.683-1.592-3.632-1.592-4.93 0-2.69 1.74-4.41 3.572-4.41.987 0 1.855.384 2.487 1.09.635.711 1.084 1.812 1.084 3.32ZM18.667 47.608c-1.27 0-3.184.676-4.843 1.61-.813.459-1.504.946-1.978 1.385-.237.22-.396.405-.488.547a.97.97 0 0 0-.056.096.97.97 0 0 0 .056.097c.092.14.25.326.488.546.474.439 1.165.926 1.978 1.385 1.66.934 3.574 1.61 4.843 1.61 2.618 0 4.333-1.744 4.333-3.638 0-1.015-.385-1.903-1.081-2.543-.699-.643-1.777-1.095-3.252-1.095Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M11.976 50.087a8.715 8.715 0 0 0-5.119 7.938v2.497"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M0 64c3.084-5.215 10.63-5.215 13.714 0M52.622 26.983a8.61 8.61 0 0 1 8.712 8.608v29.076M54.074 15.588c-1.823 0-4.497.939-6.775 2.2-1.123.62-2.09 1.288-2.76 1.897-.337.306-.574.575-.72.795-.126.19-.148.287-.151.305.003.018.025.116.151.306.146.22.383.488.72.794.67.61 1.637 1.277 2.76 1.898 2.278 1.26 4.952 2.2 6.775 2.2 3.737 0 6.26-2.459 6.26-5.198 0-1.44-.558-2.715-1.582-3.64-1.028-.927-2.59-1.557-4.678-1.557ZM31.26 25.982c1.823 0 4.497-.938 6.775-2.199 1.122-.62 2.09-1.288 2.76-1.898.336-.306.573-.575.72-.794.125-.19.147-.288.151-.306-.004-.018-.026-.116-.152-.305-.146-.22-.383-.489-.719-.794-.67-.61-1.638-1.277-2.76-1.899-2.278-1.26-4.952-2.199-6.776-2.199-3.736 0-6.259 2.458-6.259 5.197 0 1.44.558 2.716 1.582 3.64 1.027.928 2.59 1.557 4.677 1.557Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M43.85 8.76c-.912 1.57-1.432 4.345-1.475 6.939-.022 1.279.075 2.446.27 3.33.098.442.213.781.331 1.017.105.209.18.276.193.287.016.005.112.037.346.023.264-.017.616-.086 1.05-.224.866-.273 1.93-.773 3.03-1.431 2.235-1.334 4.387-3.17 5.297-4.741 1.865-3.217.995-6.623-1.393-7.996-1.255-.722-2.645-.878-3.96-.457-1.32.422-2.647 1.453-3.69 3.253ZM52.892 28.438c-.91-1.572-3.062-3.408-5.297-4.742-1.101-.658-2.165-1.158-3.03-1.431-.434-.137-.787-.207-1.05-.224-.234-.014-.33.018-.346.023-.013.011-.089.078-.193.287-.118.236-.234.575-.331 1.018-.195.883-.292 2.05-.27 3.33.042 2.593.563 5.367 1.474 6.938 1.864 3.217 5.261 4.17 7.65 2.796 1.254-.72 2.085-1.842 2.377-3.187.292-1.35.06-3.01-.984-4.809Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M32.442 28.438c.91-1.572 3.062-3.408 5.297-4.742 1.1-.658 2.164-1.158 3.03-1.431.434-.137.786-.207 1.05-.224.234-.014.33.018.346.023.013.011.088.078.193.287.118.236.233.575.331 1.018.195.883.292 2.05.27 3.33-.043 2.593-.563 5.367-1.474 6.938-1.865 3.217-5.262 4.17-7.65 2.796-1.254-.72-2.085-1.842-2.377-3.187-.293-1.35-.06-3.01.984-4.809ZM32.442 13.96c.91 1.57 3.062 3.407 5.297 4.741 1.1.658 2.164 1.158 3.03 1.432.434.137.786.207 1.05.223.234.014.33-.018.346-.023.013-.01.088-.078.193-.287.118-.236.233-.575.331-1.017.195-.884.292-2.051.27-3.33-.043-2.594-.563-5.368-1.474-6.94-1.865-3.216-5.262-4.168-7.65-2.795-1.254.721-2.085 1.842-2.377 3.187-.293 1.35-.06 3.01.984 4.809Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+      </svg>
+    );
+  }
+);
+export default SvgUtbetalingsdatoerSmall;
@@ -0,0 +1,2 @@
+export { default as PictogramUtbetalingsdatoerSmall } from "./UtbetalingsdatoerSmall";
+export { default as PictogramUtbetalingsdatoer } from "./Utbetalingsdatoer";
@@ -0,0 +1,13 @@
+const template = (variables, { tpl }) => {
+  return tpl`
+${variables.imports};
+${variables.interfaces};
+
+const ${variables.componentName} = forwardRef((${variables.props}) => {
+  return ${variables.jsx};
+});
+export default ${variables.componentName}
+`;
+};
+
+module.exports = template;
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "noEmitHelpers": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "sourceMap": true,
+    "outDir": "./esm",
+    "isolatedModules": true
+  },
+  "include": ["./src"]
+}
@@ -1,16 +1,98 @@
 # @navikt/ds-css

+## 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
+
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+### Patch Changes
+
+- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+
+## 2.0.14
+
+## 2.0.13
+
+## 2.0.12
+
+### Patch Changes
+
+- [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
+
+## 2.0.11
+
+## 2.0.10
+
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
+## 2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Reverserte border-width endrind i button
+
+## 2.0.4
+
+## 2.0.3
+
+## 2.0.2
+
 ## 2.0.1

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

@@ -32,7 +114,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

@@ -56,9 +138,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

@@ -74,7 +156,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

@@ -82,6 +164,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
@@ -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)
@@ -14,7 +14,7 @@
  background: transparent;
  cursor: pointer;
  border: none;
-  border-bottom: 2px solid 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 {
@@ -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));
@@ -112,14 +112,40 @@
  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));
-  box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-border, var(--a-border-action));
+  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:hover {
@@ -128,7 +154,7 @@
 }

 .navds-button--secondary:focus {
-  box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }

 .navds-button--secondary:active {
@@ -144,8 +170,45 @@
 .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));
-  box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-border, var(--a-border-action));
+  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));
 }

 /****************************
@@ -162,7 +225,7 @@
 }

 .navds-button--tertiary:focus {
-  box-shadow: inset 0 0 0 1.5px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }

 .navds-button--tertiary:active {
@@ -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 *
 *************************/
@@ -77,6 +77,22 @@
  align-self: flex-end;
 }

+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
+
 .navds-chat__name {
  font-weight: var(--a-font-weight-bold);
 }
@@ -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,
@@ -143,27 +143,21 @@
 .navds-checkbox--error
  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }

 .navds-checkbox--error
  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
  + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
@@ -171,9 +165,7 @@
 .navds-checkbox--error
  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
@@ -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;
 }

 /**
@@ -52,7 +51,7 @@

 .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;
 }
@@ -27,7 +27,7 @@
 }

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

@@ -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);
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.0.1",
+  "version": "2.3.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.0.1",
+    "@navikt/ds-tokens": "^2.3.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -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;
@@ -10,12 +10,13 @@
    "--ac-alert-success-bg": "--a-surface-success-subtle"
  },
  "accordion": {
+    "--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",
@@ -24,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",
@@ -44,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",
@@ -220,14 +241,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",
@@ -252,7 +279,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",
@@ -268,7 +295,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"
  },
@@ -1,5 +1,234 @@
 # @navikt/ds-react

+## 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/aksel/commit/0873fe6520e817e462197c162b49c05826da4838) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Datepicker/Monthpicker støtter nå år med 2 siffer i input
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.0
+
+## 2.0.18
+
+### Patch Changes
+
+- [`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
+
+## 2.0.17
+
+### Patch Changes
+
+- 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/aksel/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
+  - @navikt/ds-icons@2.0.16
+
+## 2.0.15
+
+### Patch Changes
+
+- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.15
+
+## 2.0.14
+
+### Patch Changes
+
+- [`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
+
+## 2.0.13
+
+### Patch Changes
+
+- Updated dependencies [[`a6c339123`](https://github.com/navikt/aksel/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
+  - @navikt/ds-icons@2.0.13
+
+## 2.0.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.12
+
+## 2.0.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.11
+
+## 2.0.10
+
+### Patch Changes
+
+- Button submittet form i table
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.10
+
+## 2.0.9
+
+### Patch Changes
+
+- ShouldCloseOnEsc i Modal
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- Confirmationpanel wrappet med div
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.8
+
+## 2.0.7
+
+### Patch Changes
+
+- :bug: Fikset keyboard-click i monthpicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.7
+
+## 2.0.6
+
+### Patch Changes
+
+- DateInput hadde duplikat className satt
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.5
+
+## 2.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`e4b6237e1`](https://github.com/navikt/aksel/commit/e4b6237e1bbf13b1ce5415845d558831b47caf7c)]:
+  - @navikt/ds-icons@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- :sparkles: La til muligheten til å velge layout-strategi for datepicker-popover
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.3
+
+## 2.0.2
+
+### Patch Changes
+
+- :bug: Fikset click-event for datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.2
+
 ## 2.0.1

 ### Patch Changes
@@ -11,13 +240,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
@@ -67,7 +296,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
@@ -99,9 +328,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

@@ -137,7 +366,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
@@ -146,7 +375,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

@@ -157,14 +386,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
@@ -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)
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.0.1",
+  "version": "2.3.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",
@@ -36,8 +36,8 @@
    "test": "TZ=UTC jest"
  },
  "dependencies": {
-    "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^2.0.1",
+    "@floating-ui/react": "0.17.0",
+    "@navikt/ds-icons": "^2.3.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -52,7 +52,6 @@
    "@testing-library/user-event": "^14.2.0",
    "@types/faker": "5.5.8",
    "@types/jest": "^29.0.0",
-    "@types/node": "^17.0.35",
    "@types/react-modal": "^3.13.1",
    "concurrently": "7.2.1",
    "copyfiles": "^2.4.1",
@@ -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
@@ -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
@@ -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 = () => {
@@ -1 +1 @@
-export { AccordionProps, default as Accordion } from "./Accordion";
+export { type AccordionProps, default as Accordion } from "./Accordion";
@@ -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> {
  /**
@@ -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>
+  );
+};
@@ -1,2 +1,2 @@
 export { default as Alert } from "./Alert";
-export { AlertProps } from "./Alert";
+export { type AlertProps } from "./Alert";
@@ -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
@@ -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,35 @@ 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: { delay: 300 } },
+};

 export const Icon = () => (
  <div className="colgap">
@@ -217,28 +247,32 @@ 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: { delay: 300 } },
+};
@@ -1,2 +1,2 @@
 export { default as Button } from "./Button";
-export { ButtonProps } from "./Button";
+export { type ButtonProps } from "./Button";
@@ -19,6 +19,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   * Background color on bubble
   */
  backgroundColor?: string;
+  /**
+   * Overrides hoizontal position of toptext
+   */
+  toptextPosition?: "left" | "right";
 }

 export type BubbleType = React.ForwardRefExoticComponent<
@@ -26,7 +30,18 @@ export type BubbleType = React.ForwardRefExoticComponent<
 >;

 const Bubble: BubbleType = forwardRef(
-  ({ children, className, name, timestamp, backgroundColor, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      name,
+      timestamp,
+      backgroundColor,
+      toptextPosition,
+      ...rest
+    },
+    ref
+  ) => {
    return (
      <div
        ref={ref}
@@ -35,7 +50,12 @@ const Bubble: BubbleType = forwardRef(
        {...rest}
      >
        {(timestamp || name) && (
-          <div className="navds-chat__top-text">
+          <div
+            className={cl(
+              `navds-chat__top-text`,
+              toptextPosition && `navds-chat__top-text--${toptextPosition}`
+            )}
+          >
            {name && <Detail className="navds-chat__name">{name}</Detail>}
            {timestamp && (
              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
@@ -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> {
  /**
@@ -33,6 +33,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   * @default "left"
   */
  position?: "left" | "right";
+  /**
+   * Hoizontal position of toptext
+   * @default Same as chat
+   */
+  toptextPosition?: "left" | "right";
 }

 interface ChatComponent
@@ -53,6 +58,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
      position = "left",
      avatarBgColor,
      backgroundColor,
+      toptextPosition,
      ...rest
    },
    ref
@@ -60,7 +66,13 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
    return (
      <div
        ref={ref}
-        className={cl("navds-chat", className, `navds-chat--${position}`)}
+        className={cl(
+          "navds-chat",
+          className,
+          `navds-chat--${position} navds-chat--top-text-${
+            toptextPosition ?? position
+          }`
+        )}
        {...rest}
      >
        <BodyShort
@@ -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 = () => {
@@ -116,6 +118,57 @@ export const Position = () => {
  );
 };

+export const ToptextPosition = () => {
+  return (
+    <div className="colgap">
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        backgroundColor="rgba(255, 249, 240, 1)"
+        avatarBgColor="rgba(255, 236, 204, 1)"
+        toptextPosition="right"
+      >
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="KH"
+        name="Kari Høyli"
+        timestamp="01.01.21 14:32"
+        position="right"
+        backgroundColor="rgba(230, 240, 255, 1)"
+        avatarBgColor="rgba(204, 225, 255, 1)"
+        toptextPosition="left"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
+          est dolore incididunt. Occaecat cupidatat magna.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 15:00"
+        backgroundColor="rgba(255, 249, 240, 1)"
+        avatarBgColor="rgba(255, 236, 204, 1)"
+      >
+        <Chat.Bubble toptextPosition="right">
+          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
+          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+          labore sunt aute.
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};
+
 export const Avatar = () => {
  return (
    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
@@ -1 +1 @@
-export { default as Chat, ChatProps } from "./Chat";
+export { default as Chat, type ChatProps } from "./Chat";
@@ -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> {
@@ -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> {
@@ -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 = () => {
@@ -1 +1 @@
-export { default as Chips, ChipsProps } from "./Chips";
+export { default as Chips, type ChipsProps } from "./Chips";
@@ -108,7 +108,6 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
            autoComplete="off"
            aria-controls={ariaId}
            className={cl(
-              className,
              "navds-date__field-input",
              "navds-text-field__input",
              "navds-body-short",
@@ -107,6 +107,13 @@ export interface DatePickerDefaultProps
   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
   */
  onOpenToggle?: () => void;
+  /**
+   * Avoid using if possible!
+   * Changes what CSS position property to use
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
 }

 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
@@ -134,6 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      open: _open,
      onClose,
      onOpenToggle,
+      strategy = "absolute",
      ...rest
    },
    ref
@@ -204,6 +212,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
              id={ariaId}
              role="dialog"
              ref={ref}
+              strategy={strategy}
            >
              <DayPicker
                locale={getLocaleFromString(locale)}
@@ -18,7 +18,7 @@ import { Head } from "./Head";
 interface DatePickerStandaloneDefaultProps
  extends Omit<
    DatePickerDefaultProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName"
+    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
  > {
  /**
   * Datepicker classname
@@ -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")} />
 );
@@ -49,6 +49,18 @@ export interface UseDatepickerOptions
   * validation-callback
   */
  onValidate?: (val: DateValidationT) => void;
+  /**
+   * Allows input of with 'yy' year format.
+   * @default true
+   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * In 2023 this equals to 1943 - 2042
+   */
+  allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }

 interface UseDatepickerValue {
@@ -59,7 +71,10 @@ interface UseDatepickerValue {
  /**
   * Use: <DatePicker.Input {...inputProps}/>
   */
-  inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value">;
+  inputProps: Pick<
+    DateInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  > & { ref: React.RefObject<HTMLInputElement> };
  /**
   * Resets all states (callback)
   */
@@ -112,6 +127,8 @@ export const useDatepicker = (
    inputFormat,
    onValidate,
    defaultMonth,
+    allowTwoDigitYear = true,
+    openOnFocus = true,
  } = opt;

  const locale = getLocaleFromString(_locale);
@@ -164,10 +181,10 @@ export const useDatepicker = (

  useEffect(() => {
    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("click", handleFocusIn);
+    window.addEventListener("pointerdown", handleFocusIn);
    return () => {
      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("click", handleFocusIn);
+      window?.removeEventListener?.("pointerdown", handleFocusIn);
    };
  }, [handleFocusIn]);

@@ -187,8 +204,14 @@ export const useDatepicker = (
  };

  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
-    let day = parseDate(e.target.value, today, locale, "date");
+    !open && openOnFocus && setOpen(true);
+    let day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "date",
+      allowTwoDigitYear
+    );
    if (isValidDate(day)) {
      setMonth(day);
      setInputValue(formatDateForInput(day, locale, "date", inputFormat));
@@ -196,7 +219,13 @@ export const useDatepicker = (
  };

  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(e.target.value, today, locale, "date");
+    let day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "date",
+      allowTwoDigitYear
+    );
    isValidDate(day) &&
      setInputValue(formatDateForInput(day, locale, "date", inputFormat));
  };
@@ -227,7 +256,13 @@ export const useDatepicker = (
  // the calendar’s month.
  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setInputValue(e.target.value);
-    const day = parseDate(e.target.value, today, locale, "date");
+    const day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "date",
+      allowTwoDigitYear
+    );

    const isBefore =
      fromDate && day && differenceInCalendarDays(fromDate, day) > 0;
@@ -35,6 +35,18 @@ export interface UseMonthPickerOptions
   * Default shown year
   */
  defaultYear?: Date;
+  /**
+   * Allows input of with 'yy' year format.
+   * @default true
+   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * In 2023 this equals to 1943 - 2042
+   */
+  allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }

 interface UseMonthPickerValue {
@@ -45,7 +57,9 @@ interface UseMonthPickerValue {
  /**
   * Use: <MonthPicker.Input {...inputProps} />
   */
-  inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value">;
+  inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
+    ref: React.RefObject<HTMLInputElement>;
+  };
  /**
   * Currently selected Date
   * Up to user to validate value and extract month
@@ -94,6 +108,8 @@ export const useMonthpicker = (
    inputFormat,
    onValidate,
    defaultYear,
+    allowTwoDigitYear = true,
+    openOnFocus = true,
  } = opt;

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -101,7 +117,7 @@ export const useMonthpicker = (
  const today = new Date();
  const locale = getLocaleFromString(_locale);

-  const inputRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
  const monthpickerRef = useRef<HTMLDivElement>(null);

  // Initialize states
@@ -147,10 +163,10 @@ export const useMonthpicker = (

  useEffect(() => {
    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("click", handleFocusIn);
+    window.addEventListener("pointerdown", handleFocusIn);
    return () => {
      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("click", handleFocusIn);
+      window?.removeEventListener?.("pointerdown", handleFocusIn);
    };
  }, [handleFocusIn]);

@@ -170,16 +186,30 @@ export const useMonthpicker = (
  };

  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
-    let day = parseDate(e.target.value, today, locale, "month");
+    !open && openOnFocus && setOpen(true);
+    let day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "month",
+      allowTwoDigitYear
+    );
    if (isValidDate(day)) {
      setYear(day);
      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
+    } else {
+      setYear(defaultSelected ?? defaultYear ?? today);
    }
  };

  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(e.target.value, today, locale, "month");
+    let day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "month",
+      allowTwoDigitYear
+    );
    isValidDate(day) &&
      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
  };
@@ -189,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);
@@ -209,7 +241,13 @@ export const useMonthpicker = (
  // the calendar’s month.
  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setInputValue(e.target.value);
-    const month = parseDate(e.target.value, today, locale, "month");
+    const month = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "month",
+      allowTwoDigitYear
+    );

    const isBefore =
      fromDate &&
@@ -1,6 +1,7 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import isBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
 import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -71,14 +72,14 @@ interface UseRangeDatepickerValue {
  fromInputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  >;
+  > & { ref: React.RefObject<HTMLInputElement> };
  /**
   * Use: <DatePicker.Input label="to" {...toInputProps}/>
   */
  toInputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  >;
+  > & { ref: React.RefObject<HTMLInputElement> };
  /**
   * Resets all states (callback)
   */
@@ -202,12 +203,14 @@ export const useRangeDatepicker = (
    inputFormat,
    onValidate,
    defaultMonth,
+    allowTwoDigitYear = true,
+    openOnFocus = true,
  } = opt;

  const locale = getLocaleFromString(_locale);

-  const inputRefTo = useRef<HTMLDivElement>(null);
-  const inputRefFrom = useRef<HTMLDivElement>(null);
+  const inputRefTo = useRef<HTMLInputElement>(null);
+  const inputRefFrom = useRef<HTMLInputElement>(null);
  const datePickerRef = useRef<HTMLDivElement | null>(null);

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -276,10 +279,10 @@ export const useRangeDatepicker = (

  useEffect(() => {
    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("click", handleFocusIn);
+    window.addEventListener("pointerdown", handleFocusIn);
    return () => {
      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("click", handleFocusIn);
+      window?.removeEventListener?.("pointerdown", handleFocusIn);
    };
  }, [handleFocusIn]);

@@ -321,8 +324,14 @@ export const useRangeDatepicker = (
  };

  const handleFocus = (e, src: RangeT) => {
-    !open && setOpen(true);
-    let day = parseDate(e.target.value, today, locale, "date");
+    !open && openOnFocus && setOpen(true);
+    let day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "date",
+      allowTwoDigitYear
+    );
    if (isValidDate(day)) {
      setMonth(day);
      src === RANGE.FROM
@@ -334,7 +343,13 @@ export const useRangeDatepicker = (
  };

  const handleBlur = (e, src: RangeT) => {
-    let day = parseDate(e.target.value, today, locale, "date");
+    let day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "date",
+      allowTwoDigitYear
+    );
    if (!isValidDate(day)) {
      return;
    }
@@ -358,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 = (
@@ -426,7 +443,13 @@ export const useRangeDatepicker = (
    }

    if (toInputValue && !selectedRange?.to) {
-      const toDay = parseDate(toInputValue, today, locale, "date");
+      const toDay = parseDate(
+        toInputValue,
+        today,
+        locale,
+        "date",
+        allowTwoDigitYear
+      );
      if (validateDay(toDay)) {
        updateRange({ from: day, to: toDay });
        setMonth(day);
@@ -489,7 +512,13 @@ export const useRangeDatepicker = (

  /* live-update datepicker based on changes in inputfields */
  const handleChange = (e, src: RangeT) => {
-    const day = parseDate(e.target.value, today, locale, "date");
+    const day = parseDate(
+      e.target.value,
+      today,
+      locale,
+      "date",
+      allowTwoDigitYear
+    );
    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;

@@ -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";
@@ -74,7 +74,6 @@ export const MonthButton = ({
          : -1
      }
      onKeyDown={(e) => {
-        e.preventDefault();
        const next = nextEnabled(
          months,
          e.key,
@@ -79,6 +79,13 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   * Event fired when the user navigates between years.
   */
  onYearChange?: (y?: Date) => void;
+  /**
+   * Avoid using if possible!
+   * Changes what CSS position property to use
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
 }

 interface MonthPickerComponent
@@ -113,6 +120,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      defaultSelected,
      year,
      onYearChange,
+      strategy = "absolute",
    },
    ref
  ) => {
@@ -126,7 +134,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    );

    const handleSelect = (month?: Date) => {
-      setSelectedMonth(month);
+      !onMonthSelect && setSelectedMonth(month);
      onMonthSelect?.(month);
      month && (onClose?.() ?? setOpen(false));
    };
@@ -163,10 +171,11 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
              ref={ref}
              id={ariaId}
              className="navds-date"
+              strategy={strategy}
            >
              <RootProvider
                locale={getLocaleFromString(locale)}
-                selected={selected}
+                selected={selected ?? selectedMonth}
                toDate={toDate}
                fromDate={fromDate}
                month={selected ?? selectedMonth}
@@ -10,7 +10,7 @@ import MonthSelector from "./MonthSelector";
 export interface MonthPickerStandaloneProps
  extends Omit<
    MonthPickerProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName"
+    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
  > {
  /**
   * Monthpicker classname
@@ -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 = () => {
@@ -36,7 +36,7 @@ describe("Returns if year is at start or end of range", () => {
    expect(hasNextYear(new Date(), years, 1)).toBeTruthy();
  });
  test("Should have previous year (true)", () => {
-    expect(hasNextYear(new Date("Aug 3 2023"), years, -1)).toBeTruthy();
+    expect(hasNextYear(new Date("Aug 3 2024"), years, -1)).toBeTruthy();
  });
  test("Should not have next year (false)", () => {
    expect(hasNextYear(new Date("Aug 3 2029"), years, 1)).toBeFalsy();
@@ -2,7 +2,9 @@ import { parseDate } from "../parse-date";
 import nb from "date-fns/locale/nb";
 import { formatDateForInput } from "../format-date";

-const parse = (inp: string) => parseDate(inp, new Date(), nb, "date");
+const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);
+const parseTwoDigit = (inp: string) =>
+  parseDate(inp, new Date(), nb, "date", true);

 describe("Format date to correct output", () => {
  test("formatDateForInput", () => {
@@ -19,4 +21,12 @@ describe("Format date to correct output", () => {
      "15.05.2022"
    );
  });
+  test("formatDateForInput with twoDigitYears", () => {
+    expect(formatDateForInput(parseTwoDigit("15/05/22"), nb, "date")).toEqual(
+      "15.05.2022"
+    );
+    expect(formatDateForInput(parseTwoDigit("1/5/95"), nb, "date")).toEqual(
+      "01.05.1995"
+    );
+  });
 });
				`@@ -0,0 +1 @@`
				`export { default as PageHeader } from "./PageHeader";`