📝 Patch-version

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

.changeset/README.md

@@ -1,34 +1,33 @@
 # Changesets
 
-To handle versioning and released, we use [Changesets](https://github.com/changesets/changesets) to [version](https://semver.org/) and publish our packages.
+For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for å [versjonering](https://semver.org/) og publisering av pakker.
 
 ## Howto
 
-- To create a new version, run `yarn changeset`
-- select versions to change with arrowkeys + spacebar
+- For å lage en ny versjons-entry: `yarn changeset`
+- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
 
 `🦋 Which packages would you like to include?`
 
-- Press the `Space` key to select `changed packages`, then press `Enter` to move to the next question.
+Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke `Enter` for å gå videre.
 
 `🦋 Which packages should have a major bump?`
 
-- Press the `Enter` key to select none and move to the next question, _*or*_ navigate packages using the arrow keys and press the `Space` key to select the packages with changes that should target a major version.
+Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
 
 `🦋 Which packages should have a minor bump?`
 
-- Press the `Enter` key to select none so that your changes automatically target a patch bump, _*or*_ select packages using the up and down arrow keys and space if your changes should target a minor version.
+Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
 
-- Commit and push up.
+Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
 
-## Fixed versioning
+- Commit og push.
 
-All our "base"-packages are has fixed versioning. This means a semver-bump on any of them will bump all of them. Take
+## Fixed versjonering
 
-Current fixed packages
+Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
 
-```
-[
+```sh
   "@navikt/ds-react",
   "@navikt/ds-css",
   "@navikt/ds-icons",
@@ -37,5 +36,4 @@ Current fixed packages
   "@navikt/ds-css-internal",
   "@navikt/ds-react-internal",
   "@navikt/ds-codemod"
-]
 ```

.changeset/config.json

@@ -21,7 +21,8 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["nextjs-demo", "shadow-dom"],
+  "ignore": ["nextjs-demo", "shadow-dom", "aksel.nav.no"],
+
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"
   }

.github/workflows/aksel-dev.yml

@@ -0,0 +1,71 @@
+name: Deploy aksel.dev.nav.no
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - next
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  build_and_deploy:
+    name: Build and deploy to dev-gcp
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+        with:
+          ref: "next"
+      - 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
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-dev-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-dev-
+
+      - name: Install dependencies
+        run: yarn
+
+      - 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
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Get complete tag
+        run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV
+      - name: Create docker image tags
+        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: Push docker image
+        run: |
+          docker push ${{ env.DOCKER_TAG }}
+
+      - name: Deploy to dev-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-dev.yaml
+          CLUSTER: dev-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}

.github/workflows/aksel-prod.yml

@@ -0,0 +1,81 @@
+name: Deploy aksel.nav.no
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  build_and_deploy:
+    name: Build and deploy to prod-gcp
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - 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
+
+      - 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
+          yarn docgen
+
+      - 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
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Get complete tag
+        run: echo "TAG=$( date +%s )" >> $GITHUB_ENV
+      - name: Create docker image tags
+        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: Push docker image
+        run: |
+          docker push ${{ env.DOCKER_TAG }}
+
+      - name: Deploy to prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-prod.yaml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}

.github/workflows/aksel-redeploy.yml

@@ -0,0 +1,41 @@
+name: Redeploy image to for aksel.nav.no
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Docker image tag"
+        required: true
+        default: ""
+      dry:
+        description: "Dry-run"
+        required: true
+        default: "false"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  redeploy:
+    name: Redeploy image
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create docker image tag
+        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ github.event.inputs.tag }}" >> $GITHUB_ENV
+      - name: Deploy to prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-prod.yaml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}
+          DRY_RUN: ${{ github.event.inputs.dry }}

.github/workflows/backup-sanity.yml

@@ -0,0 +1,39 @@
+name: Backup sanity dateset to gcp
+on:
+  workflow_dispatch:
+  schedule:
+    # 12.00 every 3 days
+    - cron: "0 0 */3 * *"
+jobs:
+  execute:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Export dataset
+        run: SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn workspace aksel.nav.no sanity: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
+          destination: "aksel-website-prod/backups"
+          glob: "**/backup-*.tar.gz"

.github/workflows/chromatic.yml

@@ -3,11 +3,11 @@ name: Visual Regression Tests
 on:
   push:
     branches:
-      - master
-      - next
+      - "master"
     paths:
       - "@navikt/**"
   pull_request:
+    branches: [master, next]
     paths:
       - "@navikt/**"
 
@@ -37,9 +37,7 @@ jobs:
         run: yarn
 
       - name: Build packages
-        run: |
-          yarn workspace @navikt/ds-tokens build
-          yarn workspace @navikt/ds-css build
+        run: yarn boot
 
       - name: Chromatic
         uses: chromaui/action@v1

.github/workflows/codeql.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master, next]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: "41 8 * * 6"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+      # - run: |
+      #   echo "Run, Build Application using script"
+      #   ./location_of_script_within_repo/buildscript.sh
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/e2e.yml

@@ -0,0 +1,56 @@
+name: E2E / Playwright Tests
+on:
+  push:
+    branches: [master, next]
+    paths:
+      - "aksel.nav.no/**"
+  pull_request:
+    branches: [master, next]
+    paths:
+      - "aksel.nav.no/**"
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - 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
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-e2e-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-e2e-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: build packages
+        run: |
+          yarn boot
+          yarn docgen
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn workspace website e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: aksel.nav.no/website/playwright-report/
+          retention-days: 10

.github/workflows/release.yml

@@ -27,13 +27,24 @@ jobs:
         uses: actions/cache@v3
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-test-${{ github.sha }}
+          key: ${{ runner.os }}-prod-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-test
+            ${{ runner.os }}-prod
 
       - name: Install dependencies
         run: yarn
 
+      - name: Create release Pull Request or publish to NPM
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: yarn version
+          publish: yarn release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+
       - name: Creating .npmrc
         run: |
           cat << EOF > "$HOME/.npmrc"
@@ -43,23 +54,9 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.GIT_REPO }}
 
-      - name: Create release Pull Request or publish to NPM
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          version: yarn version
-          publish: yarn release
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
-          GITHUB_TOKEN: ${{ secrets.GIT_REPO }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
-
-      - name: Delete .npmrc
-        run: rm -f .npmrc
-
-      - name: Publish to NPM
+      - name: Publish to GPR
         if: steps.changesets.outputs.published == 'true'
-        id: changesets-npm
+        id: changesets-gpr
         uses: changesets/action@v1
         with:
           publish: yarn changeset publish

.github/workflows/searchindex.yml

@@ -0,0 +1,25 @@
+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 }}

.github/workflows/update-icons.yml

@@ -26,7 +26,7 @@ jobs:
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
       - name: Update Icons
-        run: yarn update:icons
+        run: yarn workspace @navikt/ds-icons update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
       - name: Create Pull Request
@@ -39,4 +39,4 @@ jobs:
           author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: false
           delete-branch: true
-          title: "[FIX] Ikonsynk Figma"
+          title: "Ikonsynk Figma"

.github/workflows/update-tokens.yml

@@ -24,7 +24,7 @@ jobs:
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
       - name: Update tokens
-        run: yarn update:tokens
+        run: yarn workspace @navikt/ds-tokens update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
       - name: Create Pull Request
@@ -33,7 +33,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: figma-tokens-sync
           delete-branch: true
-          title: "[FEATURE] Tokens sync Figma"
+          title: "Tokens sync Figma"
           commit-message: "Tokens synket fra figma"
           committer: GitHub <noreply@github.com>
           signoff: false

.gitignore

@@ -128,4 +128,23 @@ _docs.json
 !.yarn/versions
 */icons/src
 */icons/png
-*/core/icons
+*/core/icons
+/storybook-static
+
+# Aksel.nav.no
+.next
+!*/website/lib/
+!*/website/public/
+!aksel.nav.no/**/*.d.ts
+!*/sanity/lib/
+!*/sanity/static/
+out
+test-urls.json
+videos
+sanity/scripts/renameField.js
+tmp.json
+/test-results/
+/playwright-report/
+/playwright/.cache/
+playwright-report/
+/test-results/

.prettierignore

@@ -0,0 +1,2 @@
+**/nais-dev.yaml
+**/nais-prod.yaml

.storybook/layout.css

@@ -15,3 +15,7 @@
 .rowgap[data-theme="dark"] {
   background-color: #262626;
 }
+
+.rowgap-wrap {
+  flex-wrap: wrap;
+}

.storybook/main.js

@@ -17,7 +17,6 @@ module.exports = {
   },
   stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
-    "@storybook/addon-docs",
     "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",

.yarnrc.yml

@@ -1,3 +1,5 @@
+enableImmutableInstalls: false
+
 nodeLinker: node-modules
 
 plugins:

@navikt/codemod/CHANGELOG.md

@@ -1,25 +1,25 @@
 # @navikt/ds-codemod
 
-## 1.3.36
+## 1.5.2
+
+## 1.5.1
+
+## 1.5.0
+
+## 1.4.4
+
+## 1.4.3
+
+## 1.4.2
+
+## 1.4.1
+
+## 1.4.0
+
+## 1.3.39
 
 ### Patch Changes
 
-- [`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034) Thanks [@KenAJoh](https://github.com/KenAJoh)! - changeset-demo
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
-## 1.3.35
-
-### Patch Changes
-
-- [`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367) Thanks [@KenAJoh](https://github.com/KenAJoh)! - demo-bump
-
-## 1.3.34
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Workflow-test
-
-## 1.3.31
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Initial changeset changelog
+## 1.3.38

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.3.36",
+  "version": "1.5.2",
   "description": "NAV designsystem codemods",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "globby": "11.0.1",
     "inquirer": "7.3.3",
     "is-git-clean": "1.1.0",
-    "jest": "^27.5.0",
+    "jest": "^29.0.0",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "1.0.10",
     "lodash": "4.17.21",
@@ -44,10 +44,12 @@
     "prettier": "2.7.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.0.0",
+    "@types/jest": "^29.0.0",
     "@types/jscodeshift": "0.11.5",
     "@types/react": "^18.0.0",
     "del": "7.0.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.8.0"
   },
   "sideEffects": false,
   "engines": {

@navikt/codemod/transforms/v1.0.0/chat.ts

@@ -28,7 +28,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     renameProps({
       root,
       componentName: localName,

@navikt/codemod/transforms/v1.0.0/pagination.ts

@@ -54,7 +54,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     root.findJSXElements(`${localName}`).forEach((parent) => {
       const skip = !!parent.value.openingElement?.attributes.find(
         (x) => x.name.name === "data-version" && x.value.value === "v1"

@navikt/codemod/transforms/v1.0.0/tabs.ts

@@ -23,7 +23,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     renameProps({
       root,
       componentName: `${localName}.List`,

@navikt/core/css/CHANGELOG.md

@@ -1,25 +1,47 @@
 # @navikt/ds-css
 
-## 1.3.36
+## 1.5.2
 
 ### Patch Changes
 
-- [`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034) Thanks [@KenAJoh](https://github.com/KenAJoh)! - changeset-demo
+- :memo: Rename FilterChips to ToggleChips
 
-## 1.3.35
+## 1.5.1
 
 ### Patch Changes
 
-- [`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367) Thanks [@KenAJoh](https://github.com/KenAJoh)! - demo-bump
+- Flex-wrap chips.css
 
-## 1.3.34
+## 1.5.0
+
+### 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
+
+- [#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:
+
+## 1.4.4
+
+## 1.4.3
 
 ### Patch Changes
 
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Workflow-test
+- :sparkles: Validering og inputFormat i Date-komponenter
 
-## 1.3.31
+## 1.4.2
+
+## 1.4.1
 
 ### Patch Changes
 
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Initial changeset changelog
+- [`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.
+
+## 1.4.0
+
+## 1.3.39
+
+### Patch Changes
+
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+
+## 1.3.38

@navikt/core/css/chips.css

@@ -0,0 +1,125 @@
+.navds-chips {
+  display: flex;
+  gap: var(--navds-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips :where(li) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  margin: 0;
+  padding: 0 var(--navds-spacing-3);
+  text-decoration: none;
+  border-radius: var(--navds-border-radius-full);
+  min-height: 32px;
+}
+
+.navds-chips--small .navds-chips__chip {
+  min-height: 24px;
+  padding: 0 var(--navds-spacing-2);
+}
+
+.navds-chips__toggle {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--navds-global-color-gray-500));
+  background-color: var(--ac-chip-toggle-bg, rgb(0 0 0 / 0.055));
+}
+
+.navds-chips__toggle:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border-hover, var(--navds-global-color-gray-600));
+  background-color: var(--ac-chip-toggle-bg-hover, rgb(0 0 0 / 0.1));
+}
+
+.navds-chips__toggle[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-bg-pressed, var(--navds-global-color-deepblue-500));
+  color: var(--ac-chip-toggle-text-pressed, var(--navds-global-color-white));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-bg-pressed-hover, var(--navds-global-color-deepblue-600));
+}
+
+.navds-chips__toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
+}
+
+.navds-chips__toggle[aria-pressed="true"]:focus-visible,
+.navds-chips__toggle:active:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
+}
+
+.navds-chips__removable--action {
+  background-color: var(--ac-chip-removable-action-bg, var(--navds-global-color-deepblue-500));
+  color: var(--ac-chip-removable-action-text, var(--navds-global-color-white));
+}
+
+.navds-chips__removable--neutral {
+  color: var(--ac-chip-removable-neutral-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-chip-removable-neutral-bg, rgb(0 0 0/ 0.055));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--navds-global-color-gray-500));
+}
+
+.navds-chips__removable-icon,
+.navds-chips__toggle-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--navds-border-radius-full);
+}
+
+.navds-chips--small .navds-chips__removable-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon > svg {
+  width: 0.75rem;
+}
+
+.navds-chips__removable--action:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
+}
+
+.navds-chips__removable--neutral:focus-visible {
+  box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
+}
+
+.navds-chips__removable--action:hover {
+  background-color: var(--ac-chip-removable-action-bg-hover, var(--navds-global-color-deepblue-700));
+}
+
+.navds-chips__removable--neutral:hover {
+  background-color: var(--ac-chip-removable-action-bg-hover, rgb(0 0 0 / 0.1));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border-hover, var(--navds-global-color-gray-600));
+}
+
+.navds-chips--icon-left {
+  padding-left: var(--navds-spacing-1);
+}
+
+.navds-chips--icon-right {
+  padding-right: var(--navds-spacing-1);
+}
+
+.navds-chips--small .navds-chips--icon-right {
+  padding-right: 0.125rem;
+}
+
+.navds-chips--small .navds-chips--icon-left {
+  padding-left: 0.125rem;
+}

@navikt/core/css/index.css

@@ -7,6 +7,7 @@
 @import "button.css";
 @import "content-container.css";
 @import "chat.css";
+@import "chips.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "1.3.36",
+  "version": "1.5.2",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,11 +20,11 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.3.36",
+    "@navikt/ds-tokens": "^1.5.2",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
+    "postcss": "^8.4.0",
+    "postcss-cli": "^9.0.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
-    "postcss-import": "^14.0.2"
+    "postcss-import": "^14.1.0"
   }
 }

@navikt/core/css/tag.css

@@ -14,38 +14,117 @@
 
 .navds-tag {
   border: 1px solid;
-  border-color: var(--navds-tag-color-border);
-  border-radius: var(--navds-border-radius-medium);
-  background-color: var(--navds-tag-color-background);
+  border-radius: var(--navds-border-radius-small);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem var(--navds-spacing-3);
+  padding: 0.125rem var(--navds-spacing-2);
   min-height: 32px;
+  line-height: 1;
 }
 
 .navds-tag--small {
   min-height: 24px;
-  padding-right: var(--navds-spacing-1);
-  padding-left: var(--navds-spacing-1);
+  padding: 0 0.375rem;
+}
+
+.navds-tag--xsmall {
+  min-height: 20px;
+  padding: 0 var(--navds-spacing-1);
 }
 
 .navds-tag--error {
-  background-color: var(--navds-tag-color-error-background);
-  border-color: var(--navds-tag-color-error-border);
+  border-color: var(--ac-tag-error-border, var(--navds-global-color-red-500));
+  background-color: var(--ac-tag-error-bg, var(--navds-global-color-red-50));
+  color: var(--ac-tag-error-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--error-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-error-filled-bg, var(--navds-global-color-red-500));
+  color: var(--ac-tag-error-filled-text, var(--navds-global-color-white));
 }
 
 .navds-tag--success {
-  background-color: var(--navds-tag-color-success-background);
-  border-color: var(--navds-tag-color-success-border);
+  border-color: var(--ac-tag-success-border, var(--navds-global-color-green-500));
+  background-color: var(--ac-tag-success-bg, var(--navds-global-color-green-50));
+  color: var(--ac-tag-success-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--success-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-success-filled-bg, var(--navds-global-color-green-500));
+  color: var(--ac-tag-success-filled-text, var(--navds-global-color-white));
 }
 
 .navds-tag--warning {
-  background-color: var(--navds-tag-color-warning-background);
-  border-color: var(--navds-tag-color-warning-border);
+  border-color: var(--ac-tag-warning-border, var(--navds-global-color-orange-600));
+  background-color: var(--ac-tag-warning-bg, var(--navds-global-color-orange-50));
+  color: var(--ac-tag-warning-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--warning-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-warning-filled-bg, var(--navds-global-color-orange-500));
+  color: var(--ac-tag-warning-filled-text, var(--navds-global-color-gray-900));
 }
 
 .navds-tag--info {
-  background-color: var(--navds-tag-color-info-background);
-  border-color: var(--navds-tag-color-info-border);
+  border-color: var(--ac-tag-info-border, var(--navds-global-color-lightblue-700));
+  background-color: var(--ac-tag-info-bg, var(--navds-global-color-lightblue-50));
+  color: var(--ac-tag-info-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--info-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-info-filled-bg, var(--navds-global-color-lightblue-500));
+  color: var(--ac-tag-info-filled-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--neutral {
+  border-color: var(--ac-tag-neutral-border, var(--navds-global-color-gray-500));
+  background-color: var(--ac-tag-neutral-bg, var(--navds-global-color-gray-100));
+  color: var(--ac-tag-neutral-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--neutral-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-neutral-filled-bg, var(--navds-global-color-gray-800));
+  color: var(--ac-tag-neutral-filled-text, var(--navds-global-color-white));
+}
+
+.navds-tag--alt1 {
+  border-color: var(--ac-tag-alt1-border, var(--navds-global-color-deepblue-400));
+  background-color: var(--ac-tag-alt1-bg, var(--navds-global-color-deepblue-100));
+  color: var(--ac-tag-alt1-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--alt1-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt1-filled-bg, var(--navds-global-color-deepblue-500));
+  color: var(--ac-tag-alt1-filled-text, var(--navds-global-color-white));
+}
+
+.navds-tag--alt2 {
+  border-color: var(--ac-tag-alt2-border, var(--navds-global-color-purple-400));
+  background-color: var(--ac-tag-alt2-bg, var(--navds-global-color-purple-100));
+  color: var(--ac-tag-alt2-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--alt2-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt2-filled-bg, var(--navds-global-color-purple-400));
+  color: var(--ac-tag-alt2-filled-text, var(--navds-global-color-white));
+}
+
+.navds-tag--alt3 {
+  border-color: var(--ac-tag-alt3-border, var(--navds-global-color-limegreen-500));
+  background-color: var(--ac-tag-alt3-bg, var(--navds-global-color-limegreen-100));
+  color: var(--ac-tag-alt3-text, var(--navds-global-color-gray-900));
+}
+
+.navds-tag--alt3-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt3-filled-bg, var(--navds-global-color-limegreen-400));
+  color: var(--ac-tag-alt3-filled-text, var(--navds-global-color-gray-900));
 }

@navikt/core/react/CHANGELOG.md

@@ -1,37 +1,93 @@
 # @navikt/ds-react
 
-## 1.3.36
+## 1.5.2
 
 ### Patch Changes
 
-- [`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034) Thanks [@KenAJoh](https://github.com/KenAJoh)! - changeset-demo
+- :memo: Rename FilterChips to ToggleChips
 
-- Updated dependencies [[`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034)]:
-  - @navikt/ds-icons@1.3.36
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.2
 
-## 1.3.35
+## 1.5.1
 
 ### Patch Changes
 
-- [`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367) Thanks [@KenAJoh](https://github.com/KenAJoh)! - demo-bump
+- Flex-wrap chips.css
 
-- Updated dependencies [[`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367)]:
-  - @navikt/ds-icons@1.3.35
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.1
 
-## 1.3.34
+## 1.5.0
+
+### 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
+
+- [#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:
 
 ### Patch Changes
 
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Workflow-test
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.0
 
-- Updated dependencies [[`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313)]:
-  - @navikt/ds-icons@1.3.34
-
-## 1.3.31
+## 1.4.4
 
 ### Patch Changes
 
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Initial changeset changelog
+- Eksponerer validation-typer
 
-- Updated dependencies [[`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe)]:
-  - @navikt/ds-icons@1.3.31
+- Updated dependencies []:
+  - @navikt/ds-icons@1.4.4
+
+## 1.4.3
+
+### Patch Changes
+
+- :sparkles: Validering og inputFormat i Date-komponenter
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.4.3
+
+## 1.4.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.4.2
+
+## 1.4.1
+
+### 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.
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.4.1
+
+## 1.4.0
+
+### 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
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.4.0
+
+## 1.3.39
+
+### Patch Changes
+
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+
+- Updated dependencies [[`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1)]:
+  - @navikt/ds-icons@1.3.39
+
+## 1.3.38
+
+### Patch Changes
+
+- Updated dependencies [[`aa506975b`](https://github.com/navikt/Designsystemet/commit/aa506975b4466d4daa79c75f5f9faa255b7fae42)]:
+  - @navikt/ds-icons@1.3.38

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.3.36",
+  "version": "1.5.2",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -24,19 +24,20 @@
     "/cjs",
     "/esm",
     "/src",
-    "_docs.json"
+    "_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",
-    "build": "yarn run clean && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
+    "build": "concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
     "watch": "tsc --watch -p tsconfig.esm.json",
-    "test": "jest"
+    "test": "TZ=UTC jest"
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.3.36",
+    "@navikt/ds-icons": "^1.5.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",
@@ -50,21 +51,22 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^29.0.0",
     "@types/node": "^17.0.35",
     "@types/react-modal": "^3.13.1",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",
     "faker": "5.5.3",
     "fast-glob": "3.2.11",
-    "jest": "^27.5.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "swr": "^1.1.2",
-    "ts-jest": "^27.1.0",
-    "ts-node": "10.7.0",
-    "typescript": "^4.7.2"
+    "ts-jest": "^29.0.0",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18.0.0",

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

@@ -32,7 +32,6 @@ const Bubble: BubbleType = forwardRef(
         ref={ref}
         className={cl("navds-chat__bubble", className)}
         style={{ backgroundColor: backgroundColor }}
-        tabIndex={0}
         {...rest}
       >
         {(timestamp || name) && (

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

@@ -0,0 +1,45 @@
+import cl from "clsx";
+import React, { forwardRef, HTMLAttributes } from "react";
+import ToggleChips, { ToggleChipsType } from "./Toggle";
+import RemovableChips, { RemovableChipsType } from "./Removable";
+
+export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-sizes
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+}
+
+interface ChipsComponent
+  extends React.ForwardRefExoticComponent<
+    ChipsProps & React.RefAttributes<HTMLUListElement>
+  > {
+  Toggle: ToggleChipsType;
+  Removable: RemovableChipsType;
+}
+
+export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
+  ({ className, size = "medium", children, ...rest }, ref) => {
+    return (
+      <ul
+        {...rest}
+        ref={ref}
+        className={cl("navds-chips", className, `navds-chips--${size}`, {
+          "navds-body-short navds-body-short--small": size === "medium",
+          "navds-detail navds-detail--small": size === "small",
+        })}
+      >
+        {React.Children.map(children, (chip, index) => {
+          return <li key={index + (chip?.toString() ?? "")}>{chip}</li>;
+        })}
+      </ul>
+    );
+  }
+) as ChipsComponent;
+
+Chips.Toggle = ToggleChips;
+Chips.Removable = RemovableChips;
+
+export default Chips;

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

@@ -0,0 +1,68 @@
+import { Close } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "..";
+
+export interface RemovableChipsProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: string;
+  /**
+   * Chip-variants
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Replaces label read for screen-readers
+   * @default "slett filter"
+   */
+  removeLabel?: string;
+  /**
+   * Click callback
+   */
+  onDelete?: () => void;
+}
+
+export interface RemovableChipsType
+  extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {}
+
+export const RemovableChips: OverridableComponent<
+  RemovableChipsProps,
+  HTMLButtonElement
+> = forwardRef(
+  (
+    {
+      className,
+      children,
+      variant = "action",
+      as: Component = "button",
+      removeLabel = "slett",
+      onDelete,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navds-chips__chip navds-chips__removable navds-chips--icon-right",
+          className,
+          `navds-chips__removable--${variant}`
+        )}
+        aria-label={`${children} ${removeLabel}`}
+        onClick={(e) => {
+          onDelete?.();
+          rest?.onClick?.(e);
+        }}
+      >
+        <span className="navds-chips__chip-text">{children}</span>
+        <span className="navds-chips__removable-icon">
+          <Close aria-hidden />
+        </span>
+      </Component>
+    );
+  }
+) as RemovableChipsType;
+
+export default RemovableChips;

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

@@ -0,0 +1,41 @@
+import { SuccessStroke } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "..";
+
+export interface ToggleChipsProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: string;
+  /**
+   * Toggles aria-pressed and visual-changes
+   */
+  selected?: boolean;
+}
+
+export interface ToggleChipsType
+  extends OverridableComponent<ToggleChipsProps, HTMLButtonElement> {}
+
+export const ToggleChips: ToggleChipsType = forwardRef(
+  (
+    { className, children, selected, as: Component = "button", ...rest },
+    ref
+  ) => {
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-chips__chip navds-chips__toggle", className, {
+          "navds-chips--icon-left": selected,
+        })}
+        aria-pressed={selected}
+      >
+        {selected && (
+          <SuccessStroke aria-hidden className="navds-chips__toggle-icon" />
+        )}
+        <span className="navds-chips__chip-text">{children}</span>
+      </Component>
+    );
+  }
+);
+
+export default ToggleChips;

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

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import { Chips } from ".";
+
+export default {
+  title: "ds-react/Chips",
+  component: Chips,
+  argTypes: {
+    type: {
+      control: {
+        type: "radio",
+        options: ["toggle", "removable"],
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
+};
+
+const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
+
+export const Default = (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>
+    );
+  }
+
+  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 = () => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <Chips>
+      {options.map((c, y) => (
+        <Chips.Toggle
+          selected={selected.includes(y)}
+          onClick={() =>
+            setSelected(
+              selected.includes(y)
+                ? selected.filter((x) => x !== y)
+                : [...selected, y]
+            )
+          }
+          key={y}
+        >
+          {c}
+        </Chips.Toggle>
+      ))}
+    </Chips>
+  );
+};
+
+export const Removable = () => {
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Removable key={y}>{c}</Chips.Removable>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Removable variant="neutral" key={y}>
+            {c}
+          </Chips.Removable>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const Regular = () => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Removable key={y}>{c}</Chips.Removable>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const Small = () => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <div className="colgap">
+      <Chips size="small">
+        {options.map((c, y) => (
+          <Chips.Removable key={y}>{c}</Chips.Removable>
+        ))}
+      </Chips>
+      <Chips size="small">
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
+  );
+};

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

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

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

@@ -1,4 +1,3 @@
-import isSaturday from "date-fns/isSaturday";
 import React, { useId, useState } from "react";
 import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
 import { Button } from "../..";
@@ -221,8 +220,13 @@ export const UserControlled = () => {
 };
 
 export const Validering = () => {
-  const { datepickerProps, selectedDay, inputProps } = UNSAFE_useDatepicker({
-    fromDate: new Date("Aug 23 2019"),
+  const [error, setError] = useState(false);
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 2 2019"),
+    onValidate: (val) => setError(val.isWeekend),
+    defaultSelected: new Date("Nov 26 2022"),
+    disableWeekends: true,
+    onDateChange: console.log,
   });
 
   return (
@@ -230,8 +234,8 @@ export const Validering = () => {
       <DatePicker {...datepickerProps}>
         <DatePicker.Input
           error={
-            selectedDay && isSaturday(selectedDay)
-              ? "NAV-kontoret er ikke åpent på lørdager. Velg en annen dag."
+            error
+              ? "NAV-kontoret er ikke åpent i helger. Velg en annen dag."
               : undefined
           }
           {...inputProps}
@@ -261,3 +265,24 @@ export const ErrorInput = () => {
     </div>
   );
 };
+
+export const UseRangedDatepickerValidation = () => {
+  const { datepickerProps, fromInputProps, toInputProps } =
+    UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+      disableWeekends: true,
+      disabled: [new Date("Oct 10 2022")],
+      onValidate: console.table,
+    });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};

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

@@ -1,6 +1,9 @@
 export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export type { DateValidationT } from "./useDatepicker";
 export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export type { RangeValidationT } from "./useRangeDatepicker";
 export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
+export type { MonthValidationT } from "./useMonthPicker";
 export { useDateInputContext, DateContext } from "./useDateInputContext";
 export {
   useSharedMonthContext,

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

@@ -36,6 +36,15 @@ export interface UseDatepickerOptions
    * Callback for changed state
    */
   onDateChange?: (val?: Date) => void;
+  /**
+   * Input-format
+   * @default "dd.MM.yyyy"
+   */
+  inputFormat?: string;
+  /**
+   * validation-callback
+   */
+  onValidate?: (val: DateValidationT) => void;
 }
 
 interface UseDatepickerValue {
@@ -62,6 +71,27 @@ interface UseDatepickerValue {
   setSelected: (date?: Date) => void;
 }
 
+export type DateValidationT = {
+  isDisabled: boolean;
+  isWeekend: boolean;
+  isEmpty: boolean;
+  isInvalid: boolean;
+  isValidDate: boolean;
+  isBefore: boolean;
+  isAfter: boolean;
+};
+
+const getValidationMessage = (val = {}): DateValidationT => ({
+  isDisabled: false,
+  isWeekend: false,
+  isEmpty: false,
+  isInvalid: false,
+  isBefore: false,
+  isAfter: false,
+  isValidDate: true,
+  ...val,
+});
+
 export const useDatepicker = (
   opt: UseDatepickerOptions = {}
 ): UseDatepickerValue => {
@@ -75,6 +105,8 @@ export const useDatepicker = (
     disabled,
     disableWeekends,
     onDateChange,
+    inputFormat,
+    onValidate,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -90,7 +122,7 @@ export const useDatepicker = (
   const [open, setOpen] = useState(false);
 
   const defaultInputValue = defaultSelected
-    ? formatDateForInput(defaultSelected, locale, "date")
+    ? formatDateForInput(defaultSelected, locale, "date", inputFormat)
     : "";
   const [inputValue, setInputValue] = useState(defaultInputValue);
 
@@ -99,6 +131,11 @@ export const useDatepicker = (
     setSelectedDay(date);
   };
 
+  const updateValidation = (val: Partial<DateValidationT> = {}) => {
+    const msg = getValidationMessage(val);
+    onValidate?.(msg);
+  };
+
   const handleFocusIn = useCallback(
     (e) => {
       if (!e?.target || !e?.target?.nodeType) {
@@ -134,7 +171,9 @@ export const useDatepicker = (
   const setSelected = (date: Date | undefined) => {
     updateDate(date);
     setMonth(date ?? today);
-    setInputValue(date ? formatDateForInput(date, locale, "date") : "");
+    setInputValue(
+      date ? formatDateForInput(date, locale, "date", inputFormat) : ""
+    );
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
@@ -143,13 +182,14 @@ export const useDatepicker = (
     let day = parseDate(e.target.value, today, locale, "date");
     if (isValidDate(day)) {
       setMonth(day);
-      setInputValue(formatDateForInput(day, locale, "date"));
+      setInputValue(formatDateForInput(day, locale, "date", inputFormat));
     }
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     let day = parseDate(e.target.value, today, locale, "date");
-    isValidDate(day) && setInputValue(formatDateForInput(day, locale, "date"));
+    isValidDate(day) &&
+      setInputValue(formatDateForInput(day, locale, "date", inputFormat));
   };
 
   /* Only allow de-selecting if not required */
@@ -162,11 +202,15 @@ export const useDatepicker = (
     if (!required && selected) {
       updateDate(undefined);
       setInputValue("");
+      updateValidation({ isValidDate: false, isEmpty: true });
       return;
     }
     updateDate(day);
+    updateValidation();
     setMonth(day);
-    setInputValue(day ? formatDateForInput(day, locale, "date") : "");
+    setInputValue(
+      day ? formatDateForInput(day, locale, "date", inputFormat) : ""
+    );
   };
 
   // When changing the input field, save its value in state and check if the
@@ -176,22 +220,39 @@ export const useDatepicker = (
     setInputValue(e.target.value);
     const day = parseDate(e.target.value, today, locale, "date");
 
+    const isBefore =
+      fromDate && day && differenceInCalendarDays(fromDate, day) > 0;
+    const isAfter = toDate && day && differenceInCalendarDays(day, toDate) > 0;
+
     if (
       !isValidDate(day) ||
-      (disabled &&
-        ((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
+      (disableWeekends && isWeekend(day)) ||
+      (disabled && isMatch(day, disabled))
     ) {
       updateDate(undefined);
+      updateValidation({
+        isInvalid: isValidDate(day),
+        isWeekend: disableWeekends && isWeekend(day),
+        isDisabled: disabled && isMatch(day, disabled),
+        isValidDate: false,
+        isEmpty: !e.target.value,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
       return;
     }
 
-    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
-    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
     if (isBefore || isAfter) {
       updateDate(undefined);
+      updateValidation({
+        isValidDate: false,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
       return;
     }
     updateDate(day);
+    updateValidation();
     setMonth(day);
   };
 
@@ -217,13 +278,15 @@ export const useDatepicker = (
     month,
     onMonthChange: (month) => setMonth(month),
     onDayClick: handleDayClick,
-    selected: selectedDay,
+    selected: selectedDay ?? new Date("Invalid date"),
     locale: _locale,
     fromDate,
     toDate,
     today,
     open,
     onOpenToggle: () => setOpen((x) => !x),
+    disabled,
+    disableWeekends,
     ref: daypickerRef,
   };
 

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

@@ -22,6 +22,15 @@ export interface UseMonthPickerOptions
    * Callback for month-change
    */
   onMonthChange?: (date?: Date) => void;
+  /**
+   * Input-format
+   * @default "MMMM yyyy"
+   */
+  inputFormat?: string;
+  /**
+   * validation-callback
+   */
+  onValidate?: (val: MonthValidationT) => void;
 }
 
 interface UseMonthPickerValue {
@@ -48,6 +57,25 @@ interface UseMonthPickerValue {
   reset: () => void;
 }
 
+export type MonthValidationT = {
+  isDisabled: boolean;
+  isEmpty: boolean;
+  isInvalid: boolean;
+  isValidMonth: boolean;
+  isBefore: boolean;
+  isAfter: boolean;
+};
+
+const getValidationMessage = (val = {}): MonthValidationT => ({
+  isDisabled: false,
+  isEmpty: false,
+  isInvalid: false,
+  isBefore: false,
+  isAfter: false,
+  isValidMonth: true,
+  ...val,
+});
+
 export const useMonthpicker = (
   opt: UseMonthPickerOptions = {}
 ): UseMonthPickerValue => {
@@ -59,6 +87,8 @@ export const useMonthpicker = (
     disabled,
     required,
     onMonthChange,
+    inputFormat,
+    onValidate,
   } = opt;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -75,7 +105,7 @@ export const useMonthpicker = (
   const [open, setOpen] = useState(false);
 
   const defaultInputValue = defaultSelected
-    ? formatDateForInput(defaultSelected, locale, "month")
+    ? formatDateForInput(defaultSelected, locale, "month", inputFormat)
     : "";
 
   const [inputValue, setInputValue] = useState(defaultInputValue);
@@ -85,6 +115,11 @@ export const useMonthpicker = (
     setSelectedMonth(date);
   };
 
+  const updateValidation = (val: Partial<MonthValidationT> = {}) => {
+    const msg = getValidationMessage(val);
+    onValidate?.(msg);
+  };
+
   const handleFocusIn = useCallback(
     (e) => {
       if (!e?.target || !e?.target?.nodeType) {
@@ -120,7 +155,9 @@ export const useMonthpicker = (
   const setSelected = (date: Date | undefined) => {
     updateMonth(date);
     setYear(date ?? today);
-    setInputValue(date ? formatDateForInput(date, locale, "month") : "");
+    setInputValue(
+      date ? formatDateForInput(date, locale, "month", inputFormat) : ""
+    );
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
@@ -128,13 +165,14 @@ export const useMonthpicker = (
     let day = parseDate(e.target.value, today, locale, "month");
     if (isValidDate(day)) {
       setYear(day);
-      setInputValue(formatDateForInput(day, locale, "month"));
+      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
     }
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     let day = parseDate(e.target.value, today, locale, "month");
-    isValidDate(day) && setInputValue(formatDateForInput(day, locale, "month"));
+    isValidDate(day) &&
+      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
   };
 
   /* Only allow de-selecting if not required */
@@ -146,11 +184,15 @@ export const useMonthpicker = (
 
     if (!required && !month) {
       updateMonth(undefined);
+      updateValidation({ isValidMonth: false, isEmpty: true });
       setInputValue("");
       return;
     }
     updateMonth(month);
-    setInputValue(month ? formatDateForInput(month, locale, "month") : "");
+    updateValidation();
+    setInputValue(
+      month ? formatDateForInput(month, locale, "month", inputFormat) : ""
+    );
   };
 
   // When changing the input field, save its value in state and check if the
@@ -160,32 +202,48 @@ export const useMonthpicker = (
     setInputValue(e.target.value);
     const month = parseDate(e.target.value, today, locale, "month");
 
-    if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
-      updateMonth(undefined);
-      return;
-    }
-
     const isBefore =
       fromDate &&
+      month &&
       (fromDate.getFullYear() > month.getFullYear() ||
         (fromDate.getFullYear() === month.getFullYear() &&
           fromDate.getMonth() > month.getMonth()));
 
     const isAfter =
       toDate &&
+      month &&
       (toDate.getFullYear() < month.getFullYear() ||
         (toDate.getFullYear() === month.getFullYear() &&
           toDate.getMonth() < month.getMonth()));
 
+    if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
+      updateMonth(undefined);
+      updateValidation({
+        isInvalid: isValidDate(month),
+        isDisabled: disabled && isMatch(month, disabled),
+        isValidMonth: false,
+        isEmpty: !e.target.value,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
+      return;
+    }
+
     if (
       isAfter ||
       isBefore ||
       (fromDate && toDate && !isMatch(month, [{ from: fromDate, to: toDate }]))
     ) {
       updateMonth(undefined);
+      updateValidation({
+        isValidMonth: false,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
       return;
     }
     updateMonth(month);
+    updateValidation();
     setYear(month);
   };
 

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

@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-pascal-case */
+import { act, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { UNSAFE_DatePicker, UNSAFE_useRangeDatepicker } from "..";
+
+const RangeDemo = () => {
+  const { datepickerProps, fromInputProps, selectedRange, toInputProps } =
+    UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+    });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <UNSAFE_DatePicker {...datepickerProps}>
+        <UNSAFE_DatePicker.Input {...fromInputProps} label="Fra" />
+        <UNSAFE_DatePicker.Input {...toInputProps} label="Til" />
+      </UNSAFE_DatePicker>
+      <div title="res">{JSON.stringify(selectedRange)}</div>
+    </div>
+  );
+};
+
+describe("Writing in input sets correct values", () => {
+  it("useRangeDatepicker same date", async () => {
+    const utils = render(<RangeDemo />);
+
+    const fraInput = utils.getByRole("textbox", { name: "Fra" });
+    const tilInput = utils.getByRole("textbox", { name: "Til" });
+    await act(async () => {
+      await userEvent.type(fraInput, "03.08.2022");
+      await userEvent.type(tilInput, "03.08.2022");
+    });
+    const res = utils.getByTitle("res");
+    expect(res.innerHTML).toEqual(
+      JSON.stringify({
+        from: "2022-08-03T00:00:00.000Z",
+        to: "2022-08-03T00:00:00.000Z",
+      })
+    );
+  });
+
+  it("useRangeDatepicker before after to ", async () => {
+    const utils = render(<RangeDemo />);
+
+    const fraInput = utils.getByRole("textbox", { name: "Fra" });
+    const tilInput = utils.getByRole("textbox", { name: "Til" });
+    await act(async () => {
+      await userEvent.type(fraInput, "03.08.2022");
+      await userEvent.type(tilInput, "02.08.2022");
+    });
+    const res = utils.getByTitle("res");
+    expect(res.innerHTML).toEqual(
+      JSON.stringify({
+        from: "2022-08-03T00:00:00.000Z",
+      })
+    );
+  });
+});

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

@@ -10,10 +10,42 @@ import {
   isValidDate,
   parseDate,
 } from "../utils";
-import { UseDatepickerOptions } from "./useDatepicker";
+import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
+
+export type RangeValidationT = {
+  from: DateValidationT;
+  to: DateValidationT & { isBeforeFrom?: boolean };
+};
+
+const getValidationMessage = (from = {}, to = {}): RangeValidationT => ({
+  from: {
+    isDisabled: false,
+    isWeekend: false,
+    isEmpty: false,
+    isInvalid: false,
+    isBefore: false,
+    isAfter: false,
+    isValidDate: true,
+    ...from,
+  },
+  to: {
+    isDisabled: false,
+    isWeekend: false,
+    isEmpty: false,
+    isInvalid: false,
+    isBefore: false,
+    isAfter: false,
+    isBeforeFrom: false,
+    isValidDate: true,
+    ...to,
+  },
+});
 
 interface UseRangeDatepickerOptions
-  extends Omit<UseDatepickerOptions, "defaultSelected" | "onDateChange"> {
+  extends Omit<
+    UseDatepickerOptions,
+    "defaultSelected" | "onDateChange" | "onValidate"
+  > {
   /**
    * The initially selected DateRange
    */
@@ -22,6 +54,10 @@ interface UseRangeDatepickerOptions
    * Callback for changed state
    */
   onRangeChange?: (val?: DateRange) => void;
+  /**
+   * validation-callback
+   */
+  onValidate?: (val: RangeValidationT) => void;
 }
 
 interface UseRangeDatepickerValue {
@@ -65,6 +101,92 @@ const RANGE = {
 
 type RangeT = typeof RANGE[keyof typeof RANGE];
 
+const fromValidation = (day: Date, opt?: UseRangeDatepickerOptions) => {
+  const isBefore =
+    opt?.fromDate && day && differenceInCalendarDays(opt?.fromDate, day) > 0;
+  const isAfter =
+    opt?.toDate && day && differenceInCalendarDays(day, opt?.toDate) > 0;
+
+  if (
+    isValidDate(day) &&
+    !(opt?.disableWeekends && isWeekend(day)) &&
+    !(opt?.disabled && isMatch(day, opt.disabled))
+  ) {
+    return {
+      isValidDate: false,
+      isInvalid: !isValidDate(day),
+      isWeekend: opt?.disableWeekends && isWeekend(day),
+      isDisabled: opt?.disabled && isMatch(day, opt.disabled),
+      isBefore: isBefore,
+      isAfter: isAfter,
+    };
+  }
+  if (isBefore || isAfter) {
+    return {
+      isValidDate: false,
+      isBefore: isBefore,
+      isAfter: isAfter,
+    };
+  }
+};
+
+const toValidation = (
+  day: Date,
+  from: Date,
+  opt?: UseRangeDatepickerOptions
+) => {
+  const isBefore =
+    opt?.fromDate && day && differenceInCalendarDays(opt?.fromDate, day) > 0;
+  const isAfter =
+    opt?.toDate && day && differenceInCalendarDays(day, opt?.toDate) > 0;
+
+  const isBeforeFrom =
+    (from && differenceInCalendarDays(from, day) > 0) ?? false;
+
+  if (
+    isValidDate(day) &&
+    !(opt?.disableWeekends && isWeekend(day)) &&
+    !(opt?.disabled && isMatch(day, opt.disabled))
+  ) {
+    return {
+      isValidDate: false,
+      isInvalid: !isValidDate(day),
+      isWeekend: opt?.disableWeekends && isWeekend(day),
+      isDisabled: opt?.disabled && isMatch(day, opt.disabled),
+      isBefore,
+      isAfter,
+      isBeforeFrom,
+    };
+  }
+  if (isBefore || isAfter || isBeforeFrom) {
+    return {
+      isValidDate: false,
+      isBefore,
+      isAfter,
+      isBeforeFrom,
+    };
+  }
+};
+
+const initialValidation = (
+  range?: DateRange,
+  opt?: UseRangeDatepickerOptions
+): RangeValidationT => {
+  if (!range || !range?.from) {
+    return getValidationMessage(
+      { isEmpty: true, isValidDate: false },
+      { isEmpty: true, isValidDate: false }
+    );
+  }
+
+  const fromVal = fromValidation(range.from, opt);
+  const toVal = range.to
+    ? toValidation(range.to, range.from, opt)
+    : { isEmpty: true, isValidDate: false };
+
+  return getValidationMessage({ ...fromVal }, { ...toVal });
+};
+
 export const useRangeDatepicker = (
   opt: UseRangeDatepickerOptions = {}
 ): UseRangeDatepickerValue => {
@@ -77,6 +199,8 @@ export const useRangeDatepicker = (
     disabled,
     disableWeekends,
     onRangeChange,
+    inputFormat,
+    onValidate,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -97,15 +221,20 @@ export const useRangeDatepicker = (
 
   const [fromInputValue, setFromInputValue] = useState(
     defaultSelected?.from
-      ? formatDateForInput(defaultSelected.from, locale, "date")
+      ? formatDateForInput(defaultSelected.from, locale, "date", inputFormat)
       : ""
   );
 
   const [toInputValue, setToInputValue] = useState(
     defaultSelected?.to
-      ? formatDateForInput(defaultSelected.to, locale, "date")
+      ? formatDateForInput(defaultSelected.to, locale, "date", inputFormat)
       : ""
   );
+
+  const [validation, setValidation] = useState<RangeValidationT>(
+    initialValidation(selectedRange, opt)
+  );
+
   const [open, setOpen] = useState(false);
 
   const updateRange = (range?: DateRange) => {
@@ -113,6 +242,15 @@ export const useRangeDatepicker = (
     setSelectedRange(range);
   };
 
+  const updateValidation = (
+    from: Partial<RangeValidationT["from"]> = {},
+    to: Partial<RangeValidationT["to"]> = {}
+  ) => {
+    const msg = getValidationMessage(from, to);
+    setValidation(msg);
+    onValidate?.(msg);
+  };
+
   const handleFocusIn = useCallback(
     (e) => {
       if (!e?.target || !e?.target?.nodeType) {
@@ -143,14 +281,20 @@ export const useRangeDatepicker = (
   const reset = () => {
     updateRange(defaultSelected ?? { from: undefined, to: undefined });
     setMonth(defaultSelected ? defaultSelected?.from : today);
+    setValidation(
+      initialValidation(
+        defaultSelected ?? { from: undefined, to: undefined },
+        opt
+      )
+    );
     setFromInputValue(
       defaultSelected?.from
-        ? formatDateForInput(defaultSelected.from, locale, "date")
+        ? formatDateForInput(defaultSelected.from, locale, "date", inputFormat)
         : ""
     );
     setToInputValue(
       defaultSelected?.to
-        ? formatDateForInput(defaultSelected.to, locale, "date")
+        ? formatDateForInput(defaultSelected.to, locale, "date", inputFormat)
         : ""
     );
     setDefaultSelected(_defaultSelected);
@@ -159,11 +303,16 @@ export const useRangeDatepicker = (
   const setSelected = (range?: DateRange) => {
     updateRange(range);
     setFromInputValue(
-      range?.from ? formatDateForInput(range.from, locale, "date") : ""
+      range?.from
+        ? formatDateForInput(range.from, locale, "date", inputFormat)
+        : ""
     );
     setToInputValue(
-      range?.to ? formatDateForInput(range?.to, locale, "date") : ""
+      range?.to
+        ? formatDateForInput(range?.to, locale, "date", inputFormat)
+        : ""
     );
+    setValidation(initialValidation(range, opt));
   };
 
   const handleFocus = (e, src: RangeT) => {
@@ -172,52 +321,10 @@ export const useRangeDatepicker = (
     if (isValidDate(day)) {
       setMonth(day);
       src === RANGE.FROM
-        ? setFromInputValue(formatDateForInput(day, locale, "date"))
-        : setToInputValue(formatDateForInput(day, locale, "date"));
-    }
-  };
-
-  const handleInputs = (day: Date, src: RangeT) => {
-    if (src === RANGE.FROM) {
-      const isAfter =
-        toInputValue &&
-        differenceInCalendarDays(
-          day,
-          parseDate(toInputValue, today, locale, "date")
-        ) > 0;
-
-      if (isAfter) {
-        setFromInputValue(
-          formatDateForInput(
-            parseDate(toInputValue, today, locale, "date"),
-            locale,
-            "date"
+        ? setFromInputValue(
+            formatDateForInput(day, locale, "date", inputFormat)
           )
-        );
-        setToInputValue(formatDateForInput(day, locale, "date"));
-      } else {
-        setFromInputValue(formatDateForInput(day, locale, "date"));
-      }
-    } else if (src === RANGE.TO) {
-      const isBefore =
-        fromInputValue &&
-        differenceInCalendarDays(
-          parseDate(fromInputValue, today, locale, "date"),
-          day
-        ) > 0;
-
-      if (isBefore) {
-        setToInputValue(
-          formatDateForInput(
-            parseDate(fromInputValue, today, locale, "date"),
-            locale,
-            "date"
-          )
-        );
-        setFromInputValue(formatDateForInput(day, locale, "date"));
-      } else {
-        setToInputValue(formatDateForInput(day, locale, "date"));
-      }
+        : setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
     }
   };
 
@@ -227,7 +334,19 @@ export const useRangeDatepicker = (
       return;
     }
 
-    handleInputs(day, src);
+    if (src === RANGE.FROM) {
+      setFromInputValue(formatDateForInput(day, locale, "date", inputFormat));
+    } else if (src === RANGE.TO) {
+      setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
+    }
+  };
+
+  const validateDay = (day: any) => {
+    return (
+      isValidDate(day) &&
+      !(disableWeekends && isWeekend(day)) &&
+      !(disabled && isMatch(day, disabled))
+    );
   };
 
   const handleSelect = (range) => {
@@ -238,68 +357,140 @@ export const useRangeDatepicker = (
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
 
     range?.from
-      ? setFromInputValue(formatDateForInput(range?.from, locale, "date"))
+      ? setFromInputValue(
+          formatDateForInput(range?.from, locale, "date", inputFormat)
+        )
       : setFromInputValue("");
     prevToRange
-      ? setToInputValue(formatDateForInput(prevToRange, locale, "date"))
+      ? setToInputValue(
+          formatDateForInput(prevToRange, locale, "date", inputFormat)
+        )
       : setToInputValue("");
+    updateValidation(
+      { isValidDate: !!range?.from, isEmpty: !range?.from },
+      { isValidDate: !!range?.to, isEmpty: !prevToRange }
+    );
     updateRange({ from: range?.from, to: prevToRange });
   };
 
-  /* live-update datepicker based on changes in inputfields */
-  const handleChange = (e, src: RangeT) => {
-    src === RANGE.FROM
-      ? setFromInputValue(e.target.value)
-      : setToInputValue(e.target.value);
-    const day = parseDate(e.target.value, today, locale, "date");
-
-    if (
-      !isValidDate(day) ||
-      (disabled &&
-        ((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
-    ) {
-      updateRange(
-        src === RANGE.FROM
-          ? { ...selectedRange, from: undefined }
-          : { from: selectedRange?.from, to: undefined }
+  const fromChange = (
+    val: string = "",
+    day: Date,
+    isBefore = false,
+    isAfter = false
+  ) => {
+    setFromInputValue(val);
+    if (!validateDay(day)) {
+      updateRange({ ...selectedRange, from: undefined });
+      updateValidation(
+        {
+          isEmpty: !val,
+          isValidDate: false,
+          isInvalid: !isValidDate(day),
+          isWeekend: disableWeekends && isWeekend(day),
+          isDisabled: disabled && isMatch(day, disabled),
+          isBefore,
+          isAfter,
+        },
+        validation.to
+      );
+      return;
+    }
+    if (isBefore || isAfter) {
+      updateRange({ ...selectedRange, from: undefined });
+      updateValidation(
+        {
+          isValidDate: false,
+          isBefore,
+          isAfter,
+        },
+        validation.to
       );
       return;
     }
 
+    if (
+      selectedRange?.to &&
+      differenceInCalendarDays(day, selectedRange?.to) > 0
+    ) {
+      updateRange({ to: day, from: day });
+      setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
+      setMonth(day);
+      updateValidation();
+      return;
+    }
+
+    if (toInputValue && !selectedRange?.to) {
+      const toDay = parseDate(toInputValue, today, locale, "date");
+      if (validateDay(toDay)) {
+        updateRange({ from: day, to: toDay });
+        setMonth(day);
+        updateValidation();
+        return;
+      }
+    }
+    updateRange({ ...selectedRange, from: day });
+    updateValidation({}, validation.to);
+    setMonth(day);
+  };
+
+  const toChange = (
+    val: string = "",
+    day: Date,
+    isBefore = false,
+    isAfter = false
+  ) => {
+    setToInputValue(val);
+    if (!validateDay(day)) {
+      updateRange({ from: selectedRange?.from, to: undefined });
+      updateValidation(validation.from, {
+        isEmpty: !val,
+        isValidDate: false,
+        isInvalid: !isValidDate(day),
+        isWeekend: disableWeekends && isWeekend(day),
+        isDisabled: disabled && isMatch(day, disabled),
+        isBefore,
+        isAfter,
+      });
+      return;
+    }
+
+    if (isBefore || isAfter) {
+      updateRange({ from: selectedRange?.from, to: undefined });
+      updateValidation(validation.from, {
+        isValidDate: false,
+        isBefore,
+        isAfter,
+      });
+      return;
+    }
+
+    /* If to-value < from-value */
+    if (
+      selectedRange?.from &&
+      differenceInCalendarDays(selectedRange?.from, day) > 0
+    ) {
+      updateRange({ from: selectedRange?.from, to: undefined });
+      updateValidation(validation.from, {
+        isValidDate: false,
+        isBeforeFrom: true,
+      });
+      return;
+    }
+    updateRange({ from: selectedRange?.from, to: day });
+    updateValidation(validation.from, {});
+    setMonth(day);
+  };
+
+  /* live-update datepicker based on changes in inputfields */
+  const handleChange = (e, src: RangeT) => {
+    const day = parseDate(e.target.value, today, locale, "date");
     const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
     const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
-    if (isBefore || isAfter) {
-      src === RANGE.FROM
-        ? updateRange({ ...selectedRange, from: undefined })
-        : updateRange({ from: selectedRange?.from, to: undefined });
-      return;
-    }
 
-    /* If to-value < from-value, switch places in state */
-    if (
-      src === RANGE.TO &&
-      selectedRange?.from &&
-      differenceInCalendarDays(selectedRange?.from, day) >= 0
-    ) {
-      updateRange({ from: day, to: selectedRange?.from });
-      setMonth(day);
-      return;
-    }
-
-    /* If from-value > to-value  , switch places in state */
-    if (
-      src === RANGE.FROM &&
-      selectedRange?.to &&
-      differenceInCalendarDays(day, selectedRange?.to) >= 0
-    ) {
-      updateRange({ to: day, from: selectedRange?.to });
-      setMonth(day);
-      return;
-    }
-
-    src === RANGE.FROM && updateRange({ ...selectedRange, from: day });
-    src === RANGE.TO && updateRange({ from: selectedRange?.from, to: day });
-    setMonth(day);
+    return src === RANGE.FROM
+      ? fromChange(e.target.value, day, isBefore, isAfter)
+      : toChange(e.target.value, day, isBefore, isAfter);
   };
 
   const handleClose = useCallback(() => {
@@ -336,6 +527,8 @@ export const useRangeDatepicker = (
     mode: "range" as const,
     open,
     onOpenToggle: () => setOpen((x) => !x),
+    disabled,
+    disableWeekends,
     ref: datePickerRef,
   };
 

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

@@ -9,6 +9,9 @@ export {
   UNSAFE_useDatepicker,
   UNSAFE_useMonthpicker,
   UNSAFE_useRangeDatepicker,
+  RangeValidationT,
+  DateValidationT,
+  MonthValidationT,
 } from "./hooks";
 export {
   default as UNSAFE_MonthPicker,

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

@@ -90,6 +90,26 @@ export const UseMonthpicker = () => {
   );
 };
 
+export const UseMonthpickerFormat = () => {
+  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    inputFormat: "MM.yyyy",
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps}>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </MonthPicker>
+    </div>
+  );
+};
+
 export const Required = () => {
   const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
     locale: "nb",

@navikt/core/react/src/date/utils/__tests__/format-dates.test.ts

@@ -6,16 +6,16 @@ const parse = (inp: string) => parseDate(inp, new Date(), nb, "date");
 
 describe("Format date to correct output", () => {
   test("formatDateForInput", () => {
-    expect(formatDateForInput(parse("15/05/22"), nb, "date")).toEqual(
+    expect(formatDateForInput(parse("15/05/2022"), nb, "date")).toEqual(
       "15.05.2022"
     );
-    expect(formatDateForInput(parse("1/5/22"), nb, "date")).toEqual(
+    expect(formatDateForInput(parse("1/5/2022"), nb, "date")).toEqual(
       "01.05.2022"
     );
-    expect(formatDateForInput(parse("1/05/22"), nb, "date")).toEqual(
+    expect(formatDateForInput(parse("1/05/2022"), nb, "date")).toEqual(
       "01.05.2022"
     );
-    expect(formatDateForInput(parse("15/5/22"), nb, "date")).toEqual(
+    expect(formatDateForInput(parse("15/5/2022"), nb, "date")).toEqual(
       "15.05.2022"
     );
   });

@navikt/core/react/src/date/utils/__tests__/parse-dates.test.ts

@@ -2,7 +2,6 @@ import { parseDate } from "..";
 import { isValidDate } from "..";
 import nb from "date-fns/locale/nb";
 import getMonth from "date-fns/getMonth";
-import getYear from "date-fns/getYear";
 
 const check = (inp: string) =>
   expect(isValidDate(parseDate(inp, new Date(), nb, "date")));
@@ -11,71 +10,32 @@ const parse = (inp: string) => parseDate(inp, new Date(), nb, "date");
 
 describe("Parse date-inputs", () => {
   test("No spaces", () => {
-    check("150522").toBeTruthy();
     check("11052022").toBeTruthy();
     check("15052022").toBeTruthy();
   });
 
   test(". divider", () => {
-    check("1.5.22").toBeTruthy();
     check("1.5.2022").toBeTruthy();
-    check("11.05.22").toBeTruthy();
     check("11.05.2022").toBeTruthy();
   });
 
   test("/ divider", () => {
-    check("1/5/22").toBeTruthy();
-    check("10/5/22").toBeTruthy();
     check("1/5/2022").toBeTruthy();
     check("10/5/2022").toBeTruthy();
-    check("1/05/22").toBeTruthy();
-    check("10/05/22").toBeTruthy();
     check("1/05/2022").toBeTruthy();
     check("10/05/2022").toBeTruthy();
   });
 
   test("- divider", () => {
-    check("1-5-22").toBeTruthy();
-    check("10-5-22").toBeTruthy();
     check("1-5-2022").toBeTruthy();
     check("10-5-2022").toBeTruthy();
-    check("1-05-22").toBeTruthy();
-    check("10-05-22").toBeTruthy();
     check("1-05-2022").toBeTruthy();
     check("10-05-2022").toBeTruthy();
   });
 });
 
-describe("Parse date-inputs to correct year", () => {
-  test("No spaces", () => {
-    expect(getYear(parse("150522"))).toEqual(2022);
-  });
-
-  test(". divider", () => {
-    expect(getYear(parse("1.05.22"))).toEqual(2022);
-    expect(getYear(parse("11.05.22"))).toEqual(2022);
-    expect(getYear(parse("1.5.22"))).toEqual(2022);
-    expect(getYear(parse("11.5.22"))).toEqual(2022);
-  });
-
-  test("/ divider", () => {
-    expect(getYear(parse("1/5/22"))).toEqual(2022);
-    expect(getYear(parse("10/5/22"))).toEqual(2022);
-    expect(getYear(parse("1/05/22"))).toEqual(2022);
-    expect(getYear(parse("10/05/22"))).toEqual(2022);
-  });
-
-  test("- divider", () => {
-    expect(getYear(parse("1-5-22"))).toEqual(2022);
-    expect(getYear(parse("10-5-22"))).toEqual(2022);
-    expect(getYear(parse("1-05-22"))).toEqual(2022);
-    expect(getYear(parse("10-05-22"))).toEqual(2022);
-  });
-});
-
 describe("Parse date-inputs to correct month", () => {
   test("No spaces", () => {
-    expect(getMonth(parse("150522"))).toEqual(4);
     expect(getMonth(parse("11052022"))).toEqual(4);
     expect(getMonth(parse("15052022"))).toEqual(4);
   });

@navikt/core/react/src/date/utils/format-date.ts

@@ -7,11 +7,13 @@ import {
 export const formatDateForInput = (
   date: Date,
   locale: Locale,
-  type: "date" | "month"
+  type: "date" | "month",
+  inputFormat?: string
 ) => {
   const INPUT_DATE_STRING_FORMAT =
-    type === "date"
+    inputFormat ??
+    (type === "date"
       ? INPUT_DATE_STRING_FORMAT_DATE
-      : INPUT_DATE_STRING_FORMAT_MONTH;
+      : INPUT_DATE_STRING_FORMAT_MONTH);
   return format(date, INPUT_DATE_STRING_FORMAT, { locale });
 };

@navikt/core/react/src/date/utils/parse-date.ts

@@ -6,16 +6,10 @@ export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";
 export const INPUT_DATE_STRING_FORMAT_MONTH = "MMMM yyyy";
 
 const ALLOWED_INPUT_FORMATS_DATE = [
-  "ddMMyy",
-  "d.M.yy",
-  "dd.MM.yy",
-  "dd/MM/yy",
-  "dd-MM-yy",
   INPUT_DATE_STRING_FORMAT_DATE,
   "ddMMyyyy",
   "dd/MM/yyyy",
   "dd-MM-yyyy",
-  "d.M.yyyy",
 ];
 
 const ALLOWED_INPUT_FORMATS_MONTH = [
@@ -28,20 +22,35 @@ const ALLOWED_INPUT_FORMATS_MONTH = [
   ...ALLOWED_INPUT_FORMATS_DATE,
 ];
 
+const isTwoDigitYear = (dateString, today, locale, formats) => {
+  let parsed;
+  const newFormat = formats.map((x) => x.replace("yyyy", "yy"));
+  for (const format of newFormat) {
+    parsed = parse(dateString, format, today, { locale });
+    if (isValidDate(parsed)) {
+      return true;
+    }
+  }
+  return false;
+};
+
 export const parseDate = (
   date: string,
   today: Date,
   locale: Locale,
   type: "date" | "month"
-) => {
+): Date => {
   let parsed;
   const ALLOWED_FORMATS =
     type === "date" ? ALLOWED_INPUT_FORMATS_DATE : ALLOWED_INPUT_FORMATS_MONTH;
   for (const format of ALLOWED_FORMATS) {
     parsed = parse(date, format, today, { locale });
-    if (isValidDate(parsed)) {
+    if (
+      isValidDate(parsed) &&
+      !isTwoDigitYear(date, today, locale, ALLOWED_FORMATS)
+    ) {
       return parsed;
     }
   }
-  return parsed;
+  return new Date("Invalid date");
 };

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

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import cl from "clsx";
 import { FieldsetContext } from "./index";
 import { useId } from "../index";

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { BodyLong } from "../..";
-import { Grid, Cell, ContentContainer } from "../index";
+import { BodyLong, Grid, Cell, ContentContainer } from "../index";
 
 export default {
   title: "ds-react/Grid",

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

@@ -1,5 +1,6 @@
 export * from "./accordion";
 export * from "./alert";
+export * from "./provider";
 export * from "./button";
 export * from "./date";
 export * from "./form";
@@ -15,6 +16,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./read-more";
 export * from "./chat";
+export * from "./chips";
 export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";

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

@@ -1,7 +1,11 @@
 import { Add } from "@navikt/ds-icons";
 import React from "react";
-import { ConfirmationPanel as DsConfirmationPanel, Link } from "..";
-import { Alert as DsAlert, BodyLong } from "../..";
+import {
+  ConfirmationPanel as DsConfirmationPanel,
+  Link,
+  Alert as DsAlert,
+  BodyLong,
+} from "..";
 export default {
   title: "ds-react/Link",
   component: Link,

@navikt/core/react/src/modal/Modal.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, useMemo, useRef } from "react";
+import React, { forwardRef, useEffect, useMemo, useRef } from "react";
 import cl from "clsx";
 import ReactModal from "react-modal";
 import { Close } from "@navikt/ds-icons";
-import { Button, mergeRefs } from "..";
+import { Button, mergeRefs, useProvider } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
 
 export interface ModalProps {
@@ -63,7 +63,7 @@ interface ModalComponent
 }
 
 type ModalLifecycle = {
-  setAppElement?: (element: any) => void;
+  setAppElement: (element: any) => void;
 };
 
 export const Modal = forwardRef<ReactModal, ModalProps>(
@@ -81,6 +81,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
       "aria-modal": ariaModal,
       "aria-label": contentLabel,
       style,
+      parentSelector,
       ...rest
     },
     ref
@@ -88,6 +89,12 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     const modalRef = useRef<ReactModal | null>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const buttonRef = useRef<HTMLButtonElement>(null);
+    const rootElement = useProvider()?.rootElement;
+    const appElement = useProvider()?.appElement;
+
+    useEffect(() => {
+      appElement && Modal.setAppElement(appElement);
+    }, [appElement]);
 
     const onModalCloseRequest = (e) => {
       if (shouldCloseOnOverlayClick || e.type === "keydown") {
@@ -100,6 +107,11 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     return (
       <ReactModal
         {...rest}
+        parentSelector={
+          parentSelector ?? rootElement !== undefined
+            ? () => rootElement as HTMLElement
+            : undefined
+        }
         style={style}
         isOpen={open}
         ref={mergedRef}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { BodyLong, Button, Heading } from "../..";
+import { BodyLong, Button, Heading } from "..";
 import Modal from "./Modal";
 
 export default {

@navikt/core/react/src/popover/Popover.test.tsx

@@ -114,7 +114,7 @@ describe("Popover", () => {
     expect(fn).toHaveBeenCalledTimes(0);
 
     cleanup();
-  });
+  }, 20000);
 
   it("keep open on popover-click", async () => {
     const fn = jest.fn();

@navikt/core/react/src/provider/Provider.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from "react";
+
+export interface ProviderContextType {
+  /**
+   * Global root-element to attach portals to (Modal, Tooltip)
+   */
+  rootElement?: HTMLElement;
+  /**
+   * Global config for appElement (Modal)
+   */
+  appElement?: HTMLElement;
+}
+
+export const ProviderContext = createContext<ProviderContextType | undefined>(
+  undefined
+);
+
+export interface ProviderProps {
+  children?: React.ReactNode;
+  rootElement?: HTMLElement;
+  appElement?: HTMLElement;
+}
+
+export const useProvider = () => useContext(ProviderContext);
+
+export const Provider = ({ children, ...rest }: ProviderProps) => {
+  return (
+    <ProviderContext.Provider value={rest}>{children}</ProviderContext.Provider>
+  );
+};
+
+export default Provider;

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

@@ -0,0 +1 @@
+export { default as Provider, useProvider } from "./Provider";

@navikt/core/react/src/tabs/TabList.tsx

@@ -37,7 +37,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       () =>
         debounce(() => {
           if (!listRef?.current) return;
-          const { scrollWidth, clientWidth } = listRef?.current;
+          const { scrollWidth, clientWidth } = listRef.current;
           let showStartScroll;
           let showEndScroll;
 

@navikt/core/react/src/tag/Tag.tsx

@@ -3,19 +3,31 @@ import cl from "clsx";
 import { BodyShort, Detail } from "..";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Tag label
-   */
   children: React.ReactNode;
   /**
-   * Changes background and border color
+   * Changes visual profile of tag
    */
-  variant: "warning" | "error" | "info" | "success";
+  variant:
+    | "warning"
+    | "warning-filled"
+    | "error"
+    | "error-filled"
+    | "info"
+    | "info-filled"
+    | "success"
+    | "success-filled"
+    | "neutral"
+    | "neutral-filled"
+    | "alt1"
+    | "alt1-filled"
+    | "alt2"
+    | "alt2-filled"
+    | "alt3"
+    | "alt3-filled";
   /**
-   * Changes padding and font-sizes
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "medium" | "small" | "xsmall";
 }
 
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
@@ -27,7 +39,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         {...rest}
         ref={ref}
         as="span"
-        size={size}
+        size={size === "medium" ? "medium" : "small"}
         className={cl(
           "navds-tag",
           className,

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

@@ -9,17 +9,70 @@ export default {
       defaultValue: "info",
       control: {
         type: "radio",
-        options: ["error", "warning", "info", "success"],
+        options: [
+          "warning",
+          "error",
+          "info",
+          "success",
+          "neutral",
+          "alt1",
+          "alt2",
+          "alt3",
+          "warning-filled",
+          "error-filled",
+          "info-filled",
+          "success-filled",
+          "neutral-filled",
+          "alt1-filled",
+          "alt2-filled",
+          "alt3-filled",
+        ],
+      },
+    },
+    size: {
+      defaultValue: "medium",
+      control: {
+        type: "radio",
+        options: ["xsmall", "small", "medium"],
       },
     },
   },
 };
 
-const variants: Array<"error" | "warning" | "info" | "success"> = [
-  "error",
+const variants: Array<
+  | "warning"
+  | "warning-filled"
+  | "error"
+  | "error-filled"
+  | "info"
+  | "info-filled"
+  | "success"
+  | "success-filled"
+  | "neutral"
+  | "neutral-filled"
+  | "alt1"
+  | "alt1-filled"
+  | "alt2"
+  | "alt2-filled"
+  | "alt3"
+  | "alt3-filled"
+> = [
   "warning",
+  "error",
   "info",
   "success",
+  "neutral",
+  "alt1",
+  "alt2",
+  "alt3",
+  "warning-filled",
+  "error-filled",
+  "info-filled",
+  "success-filled",
+  "neutral-filled",
+  "alt1-filled",
+  "alt2-filled",
+  "alt3-filled",
 ];
 
 export const Default = (props) => (
@@ -34,10 +87,34 @@ Default.args = {
 
 export const Small = () => {
   return (
-    <div className="rowgap">
+    <div className="rowgap rowgap-wrap">
       {variants.map((variant, i) => (
         <Tag key={variant} variant={variant} size="small">
-          {new Array(i + 1).fill("Id elit esse")}
+          {variant}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export const xSmall = () => {
+  return (
+    <div className="rowgap rowgap-wrap">
+      {variants.map((variant, i) => (
+        <Tag key={variant} variant={variant} size="xsmall">
+          {variant}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export const Variants = () => {
+  return (
+    <div className="rowgap rowgap-wrap">
+      {variants.map((variant, i) => (
+        <Tag key={variant} variant={variant}>
+          {variant}
         </Tag>
       ))}
     </div>

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -21,7 +21,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Detail } from "..";
+import { Detail, useProvider } from "..";
 import { mergeRefs, useId } from "../util";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
@@ -96,6 +96,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ) => {
     const [open, setOpen] = useState(defaultOpen);
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const rootElement = useProvider()?.rootElement;
 
     const {
       x,
@@ -170,7 +171,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 : children?.props["aria-describedby"],
           })
         )}
-        <FloatingPortal>
+        <FloatingPortal root={rootElement}>
           {(userOpen ?? open) && (
             <div
               {...getFloatingProps({

@navikt/core/react/src/tooltip/portal.tsx

@@ -1,15 +0,0 @@
-/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
-import ReactDOM from "react-dom";
-
-const Portal = ({ children }) => {
-  const hostElement = globalThis?.document?.body;
-
-  if (hostElement) {
-    return ReactDOM.createPortal(children, hostElement);
-  }
-
-  // bail out of ssr
-  return null;
-};
-
-export default Portal;

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

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/react/types-6-0";
 import React from "react";
-import { Alert, Button, Search } from "../..";
-import { Tooltip } from "../index";
+import { Tooltip, Alert, Button, Search } from "..";
 
 export default {
   title: "ds-react/Tooltip",

@navikt/core/react/src/util/OverridableComponent.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 export interface OverridableComponent<Component, Element extends HTMLElement> {
   (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
 

@navikt/core/react/src/util/mergeRefs.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 // https://github.com/gregberge/react-merge-refs
 export default function mergeRefs<T = any>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>

@navikt/core/tailwind/CHANGELOG.md

@@ -1,25 +1,25 @@
 # @navikt/ds-tailwind
 
-## 1.3.36
+## 1.5.2
+
+## 1.5.1
+
+## 1.5.0
+
+## 1.4.4
+
+## 1.4.3
+
+## 1.4.2
+
+## 1.4.1
+
+## 1.4.0
+
+## 1.3.39
 
 ### Patch Changes
 
-- [`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034) Thanks [@KenAJoh](https://github.com/KenAJoh)! - changeset-demo
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
-## 1.3.35
-
-### Patch Changes
-
-- [`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367) Thanks [@KenAJoh](https://github.com/KenAJoh)! - demo-bump
-
-## 1.3.34
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Workflow-test
-
-## 1.3.31
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Initial changeset changelog
+## 1.3.38

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "1.3.36",
+  "version": "1.5.2",
   "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -22,13 +22,13 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.3.36",
-    "@types/jest": "^27.0.1",
+    "@navikt/ds-tokens": "^1.5.2",
+    "@types/jest": "^29.0.0",
     "@types/node": "^17.0.35",
-    "jest": "^27.2.0",
+    "jest": "^29.0.0",
     "lodash": "^4.17.21",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^10.3.0",
-    "typescript": "^4.7.2"
+    "ts-jest": "^29.0.0",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
   }
 }

@navikt/core/tokens/CHANGELOG.md

@@ -1,25 +1,25 @@
 # @navikt/ds-tokens
 
-## 1.3.36
+## 1.5.2
+
+## 1.5.1
+
+## 1.5.0
+
+## 1.4.4
+
+## 1.4.3
+
+## 1.4.2
+
+## 1.4.1
+
+## 1.4.0
+
+## 1.3.39
 
 ### Patch Changes
 
-- [`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034) Thanks [@KenAJoh](https://github.com/KenAJoh)! - changeset-demo
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
-## 1.3.35
-
-### Patch Changes
-
-- [`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367) Thanks [@KenAJoh](https://github.com/KenAJoh)! - demo-bump
-
-## 1.3.34
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Workflow-test
-
-## 1.3.31
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Initial changeset changelog
+## 1.3.38

@navikt/core/tokens/figma/file-styles.ts

@@ -13,7 +13,7 @@ const styleFieldNames = {
 
 const findNodeWithStyle = (node: Node<any>, styleId: StyleId): Node<any> => {
   if (
-    node.hasOwnProperty("styles") &&
+    "styles" in node &&
     styleFieldNames[styleId.styleType]?.some(
       (name) => node.styles[name] === styleId.id
     )
@@ -31,8 +31,6 @@ const findNodeWithStyle = (node: Node<any>, styleId: StyleId): Node<any> => {
 
 const findStyleValue = (document: DOCUMENT, styleId: StyleId) => {
   const node = findNodeWithStyle(document, styleId);
-  if (styleId.id === "5249:11258") {
-  }
 
   switch (styleId.styleType) {
     case "FILL":

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "1.3.36",
+  "version": "1.5.2",
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -29,18 +29,18 @@
     "directory": "@navikt/core/tokens"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^29.0.0",
     "@types/node": "^17.0.35",
     "axios": "^0.21.3",
     "color": "4.2.3",
     "dotenv": "^10.0.0",
     "figma-api": "^1.7.0",
-    "jest": "^27.2.0",
+    "jest": "^29.0.0",
     "lodash": "^4.17.21",
     "nodemon": "^2.0.12",
     "style-dictionary": "^3.0.2",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^10.3.0",
-    "typescript": "^4.7.2"
+    "ts-jest": "^29.0.0",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
   }
 }

@navikt/icons/CHANGELOG.md

@@ -1,25 +1,29 @@
 # @navikt/ds-icons
 
-## 1.3.36
+## 1.5.2
+
+## 1.5.1
+
+## 1.5.0
+
+## 1.4.4
+
+## 1.4.3
+
+## 1.4.2
+
+## 1.4.1
+
+## 1.4.0
+
+## 1.3.39
 
 ### Patch Changes
 
-- [`5af875d98`](https://github.com/navikt/Designsystemet/commit/5af875d98133603eb6cdc8e83f2182d7087ba034) Thanks [@KenAJoh](https://github.com/KenAJoh)! - changeset-demo
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
 
-## 1.3.35
+## 1.3.38
 
 ### Patch Changes
 
-- [`dd92454d0`](https://github.com/navikt/Designsystemet/commit/dd92454d052386582cfbae28c3248886d70f6367) Thanks [@KenAJoh](https://github.com/KenAJoh)! - demo-bump
-
-## 1.3.34
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`2fa52b05e`](https://github.com/navikt/Designsystemet/commit/2fa52b05e75ef518f0725ef33ca1890c1b683313) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Workflow-test
-
-## 1.3.31
-
-### Patch Changes
-
-- [#1690](https://github.com/navikt/Designsystemet/pull/1690) [`89ac7f8e9`](https://github.com/navikt/Designsystemet/commit/89ac7f8e9200133170562608e3cbba9b8b6d1abe) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Initial changeset changelog
+- [#1692](https://github.com/navikt/Designsystemet/pull/1692) [`aa506975b`](https://github.com/navikt/Designsystemet/commit/aa506975b4466d4daa79c75f5f9faa255b7fae42) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdaterte kateogorisering for ikoner i Figma

@navikt/icons/figma/index.ts

@@ -78,8 +78,4 @@ const main = async () => {
   console.log("\nDownloaded all icons from Figma!\n");
 };
 
-try {
-  main();
-} catch (e) {
-  throw e;
-}
+main();

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "1.3.36",
+  "version": "1.5.2",
   "description": "Aksel icons",
   "repository": {
     "type": "git",
@@ -25,13 +25,14 @@
     "/esm",
     "/src",
     "/svg",
-    "/meta.json"
+    "/meta.json",
+    "!**/*.tsbuildinfo"
   ],
   "scripts": {
     "create-package-json-pointers-to-esm": "node ../../scripts/createPackageJsonsWithESMPointers.js",
-    "create-icons": "svgr --out-dir src svg",
+    "create-icons": "svgr --silent --out-dir src svg",
     "clean": "rimraf src cjs esm",
-    "build": "yarn clean && copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
+    "build": "copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
     "update": "ts-node figma/index.ts dotenv/config",
     "test": "jest"
   },
@@ -46,7 +47,7 @@
   },
   "devDependencies": {
     "@svgr/cli": "6.2.1",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^29.0.0",
     "@types/lodash.startcase": "^4.4.6",
     "@types/node": "^17.0.35",
     "@types/rimraf": "3.0.2",
@@ -54,13 +55,13 @@
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",
     "dotenv": "^10.0.0",
-    "jest": "^27.5.0",
+    "jest": "^29.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
     "react": "^18.0.0",
     "rimraf": "3.0.2",
-    "ts-jest": "^27.1.0",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.7.2"
+    "ts-jest": "^29.0.0",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
   }
 }

@navikt/icons/svg/Back.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.58578 12L14.2929 4.29289L15.7071 5.70711L9.41421 12L15.7071 18.2929L14.2929 19.7071L6.58578 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.58582 12L14.2929 4.29289L15.7071 5.70711L9.41424 12L15.7071 18.2929L14.2929 19.7071L6.58582 12Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/BackFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87868 12L13.9393 3.93934L16.0607 6.06066L10.1213 12L16.0607 17.9393L13.9393 20.0607L5.87868 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87866 12L13.9393 3.93934L16.0606 6.06066L10.1213 12L16.0606 17.9393L13.9393 20.0607L5.87866 12Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Bell.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11ZM12 6C9.23858 6 7 8.23858 7 11V12.3767C7 14.0885 6.47556 15.7593 5.49727 17.164L4.91504 18H19.085L18.5027 17.164C17.5244 15.7593 17 14.0885 17 12.3767V11C17 8.23857 14.7614 6 12 6Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96655 18.7341 2.1794 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11ZM12 6C9.23858 6 7 8.23858 7 11V12.3767C7 14.0885 6.47556 15.7593 5.49727 17.164L4.91504 18H19.085L18.5027 17.164C17.5244 15.7593 17 14.0885 17 12.3767V11C17 8.23857 14.7614 6 12 6Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/BellFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96655 18.7341 2.1794 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Cancel.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 4.7071C8.09763 4.31657 8.09763 3.68341 7.70711 3.29289C7.31658 2.90236 6.68342 2.90236 6.29289 3.29289L2.29289 7.29289C2.10535 7.48042 2 7.73478 2 8C2 8.26521 2.10535 8.51957 2.29289 8.7071L6.29289 12.7071C6.68342 13.0976 7.31658 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 8.99999H15C17.7614 8.99999 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 6.99999 15 6.99999H5.41421L7.70711 4.7071Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 4.70711C8.09763 4.31658 8.09763 3.68342 7.70711 3.29289C7.31659 2.90237 6.68342 2.90237 6.2929 3.29289L2.29289 7.2929C2.10536 7.48043 2 7.73479 2 8C2 8.26522 2.10536 8.51957 2.29289 8.70711L6.2929 12.7071C6.68342 13.0976 7.31659 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 9H15C17.7614 9 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 7 15 7H5.41422L7.70711 4.70711Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/CognitionFilled.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.48673 19V17H1.0044C0.237047 17 -0.244376 16.1714 0.135641 15.5048L2.98855 10.5C2.98855 4.70126 7.68936 0 13.4881 0C21.9282 0 26.9188 9.45374 22.1574 16.4226L21.4214 17.5V24H8.96676V22H6.48673C4.82988 22 3.48673 20.6569 3.48673 19ZM15.4447 7C15.7198 7 15.9428 6.77614 15.9428 6.5C15.9428 6.22386 15.7198 6 15.4447 6C15.1695 6 14.9465 6.22386 14.9465 6.5C14.9465 6.77614 15.1695 7 15.4447 7ZM15.4447 9C16.8204 9 17.9356 7.88071 17.9356 6.5C17.9356 5.11929 16.8204 4 15.4447 4C14.069 4 12.9537 5.11929 12.9537 6.5C12.9537 7.0739 13.1464 7.60264 13.4704 8.0246L13.1449 8.56898L10.9587 7.39873C10.9057 6.06497 9.81166 5 8.46976 5C7.09407 5 5.97884 6.11929 5.97884 7.5C5.97884 8.88071 7.09407 10 8.46976 10C9.15491 10 9.77545 9.72237 10.2258 9.27309L12.1184 10.2861L11.6856 11.0101C11.6112 11.0034 11.536 11 11.4599 11C10.0842 11 8.96899 12.1193 8.96899 13.5C8.96899 14.8807 10.0842 16 11.4599 16C12.8356 16 13.9508 14.8807 13.9508 13.5C13.9508 12.9257 13.7579 12.3966 13.4335 11.9745L13.8793 11.2287L15.9478 12.336C15.9443 12.3902 15.9425 12.4449 15.9425 12.5C15.9425 13.8807 17.0578 15 18.4335 15C19.8092 15 20.9244 13.8807 20.9244 12.5C20.9244 11.1193 19.8092 10 18.4335 10C17.8382 10 17.2916 10.2096 16.8631 10.5592L14.9059 9.51158L15.2178 8.98977C15.2925 8.99654 15.3682 9 15.4447 9ZM8.46976 8C8.7449 8 8.96795 7.77614 8.96795 7.5C8.96795 7.22386 8.7449 7 8.46976 7C8.19462 7 7.97158 7.22386 7.97158 7.5C7.97158 7.77614 8.19462 8 8.46976 8ZM18.4335 13C18.7086 13 18.9316 12.7761 18.9316 12.5C18.9316 12.2239 18.7086 12 18.4335 12C18.1583 12 17.9353 12.2239 17.9353 12.5C17.9353 12.7761 18.1583 13 18.4335 13ZM11.9581 13.5C11.9581 13.7761 11.7351 14 11.4599 14C11.1848 14 10.9617 13.7761 10.9617 13.5C10.9617 13.2239 11.1848 13 11.4599 13C11.7351 13 11.9581 13.2239 11.9581 13.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.48651 19V17H1.00418C0.236826 17 -0.244597 16.1714 0.13542 15.5048L2.98833 10.5C2.98833 4.70126 7.68914 0 13.4879 0C21.928 0 26.9185 9.45374 22.1572 16.4226L21.4211 17.5V24H8.96654V22H6.48651C4.82966 22 3.48651 20.6569 3.48651 19ZM15.4444 7C15.7196 7 15.9426 6.77614 15.9426 6.5C15.9426 6.22386 15.7196 6 15.4444 6C15.1693 6 14.9463 6.22386 14.9463 6.5C14.9463 6.77614 15.1693 7 15.4444 7ZM15.4444 9C16.8201 9 17.9354 7.88071 17.9354 6.5C17.9354 5.11929 16.8201 4 15.4444 4C14.0687 4 12.9535 5.11929 12.9535 6.5C12.9535 7.0739 13.1462 7.60264 13.4702 8.0246L13.1447 8.56898L10.9585 7.39873C10.9055 6.06497 9.81144 5 8.46954 5C7.09384 5 5.97862 6.11929 5.97862 7.5C5.97862 8.88071 7.09384 10 8.46954 10C9.15469 10 9.77523 9.72237 10.2256 9.27309L12.1181 10.2861L11.6853 11.0101C11.611 11.0034 11.5357 11 11.4597 11C10.084 11 8.96877 12.1193 8.96877 13.5C8.96877 14.8807 10.084 16 11.4597 16C12.8354 16 13.9506 14.8807 13.9506 13.5C13.9506 12.9257 13.7577 12.3966 13.4333 11.9745L13.8791 11.2287L15.9476 12.336C15.9441 12.3902 15.9423 12.4449 15.9423 12.5C15.9423 13.8807 17.0575 15 18.4332 15C19.8089 15 20.9242 13.8807 20.9242 12.5C20.9242 11.1193 19.8089 10 18.4332 10C17.8379 10 17.2914 10.2096 16.8629 10.5592L14.9057 9.51158L15.2176 8.98977C15.2923 8.99654 15.368 9 15.4444 9ZM8.46954 8C8.74468 8 8.96773 7.77614 8.96773 7.5C8.96773 7.22386 8.74468 7 8.46954 7C8.1944 7 7.97136 7.22386 7.97136 7.5C7.97136 7.77614 8.1944 8 8.46954 8ZM18.4332 13C18.7084 13 18.9314 12.7761 18.9314 12.5C18.9314 12.2239 18.7084 12 18.4332 12C18.1581 12 17.9351 12.2239 17.9351 12.5C17.9351 12.7761 18.1581 13 18.4332 13ZM11.9579 13.5C11.9579 13.7761 11.7348 14 11.4597 14C11.1846 14 10.9615 13.7761 10.9615 13.5C10.9615 13.2239 11.1846 13 11.4597 13C11.7348 13 11.9579 13.2239 11.9579 13.5Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/DecisionCross.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9997 7.99978C13.6565 7.99978 14.9996 6.65667 14.9996 4.99986C14.9996 3.34305 13.6565 1.99995 11.9997 1.99995C10.3429 1.99995 8.99975 3.34305 8.99975 4.99986C8.99975 6.65667 10.3429 7.99978 11.9997 7.99978ZM11.9997 9.99973C14.761 9.99973 16.9995 7.76121 16.9995 4.99986C16.9995 2.23851 14.761 0 11.9997 0C9.23832 0 6.99981 2.23851 6.99981 4.99986C6.99981 7.76121 9.23832 9.99973 11.9997 9.99973ZM18.4436 18.8862L15.4212 15.0002L16.9998 13.7724L19.7104 17.2574L22.421 13.7724L23.9996 15.0002L20.9772 18.8862L23.9996 22.7721L22.421 24L19.7104 20.515L16.9998 24L15.4211 22.7722L18.4436 18.8862ZM14.1342 13.4769L15.8355 12.1433C14.7339 11.4203 13.4159 10.9997 11.9997 10.9997C8.13378 10.9997 4.99986 14.1336 4.99986 17.9995H6.99981C6.99981 15.2382 9.23832 12.9996 11.9997 12.9996C12.7632 12.9996 13.4868 13.1708 14.1342 13.4769Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9997 7.99978C13.6565 7.99978 14.9996 6.65667 14.9996 4.99986C14.9996 3.34305 13.6565 1.99994 11.9997 1.99994C10.3429 1.99994 8.99975 3.34305 8.99975 4.99986C8.99975 6.65667 10.3429 7.99978 11.9997 7.99978ZM11.9997 9.99972C14.761 9.99972 16.9995 7.76121 16.9995 4.99986C16.9995 2.23851 14.761 0 11.9997 0C9.23832 0 6.9998 2.23851 6.9998 4.99986C6.9998 7.76121 9.23832 9.99972 11.9997 9.99972ZM18.4436 18.8862L15.4212 15.0002L16.9998 13.7724L19.7104 17.2574L22.4209 13.7724L23.9996 15.0002L20.9772 18.8862L23.9996 22.7721L22.421 24L19.7104 20.5149L16.9998 24L15.4211 22.7721L18.4436 18.8862ZM14.1342 13.4769L15.8355 12.1433C14.7339 11.4203 13.4159 10.9997 11.9997 10.9997C8.13378 10.9997 4.99986 14.1336 4.99986 17.9995H6.9998C6.9998 15.2381 9.23832 12.9996 11.9997 12.9996C12.7632 12.9996 13.4868 13.1708 14.1342 13.4769Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/DicisionCrossFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9995 4.99986C16.9995 7.76121 14.761 9.99973 11.9997 9.99973C9.23832 9.99973 6.99981 7.76121 6.99981 4.99986C6.99981 2.23851 9.23832 0 11.9997 0C14.761 0 16.9995 2.23851 16.9995 4.99986ZM11.9997 10.9997C8.13378 10.9997 4.99986 14.1336 4.99986 17.9995H15.3673L12.6852 14.5511L15.8705 12.1665C14.7618 11.4293 13.4309 10.9997 11.9997 10.9997ZM15.2605 15.0002L18.2829 18.8862L15.2605 22.7722L16.8392 24L19.5498 20.515L22.2603 24L23.839 22.7721L20.8166 18.8862L23.839 15.0002L22.2603 13.7724L19.5498 17.2574L16.8392 13.7724L15.2605 15.0002Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9995 4.99986C16.9995 7.76121 14.761 9.99972 11.9997 9.99972C9.23832 9.99972 6.9998 7.76121 6.9998 4.99986C6.9998 2.23851 9.23832 0 11.9997 0C14.761 0 16.9995 2.23851 16.9995 4.99986ZM11.9997 10.9997C8.13378 10.9997 4.99986 14.1336 4.99986 17.9995H15.3673L12.6852 14.5511L15.8705 12.1665C14.7618 11.4292 13.4309 10.9997 11.9997 10.9997ZM15.2605 15.0002L18.2829 18.8862L15.2605 22.7721L16.8392 24L19.5498 20.5149L22.2603 24L23.839 22.7721L20.8166 18.8862L23.839 15.0002L22.2603 13.7724L19.5497 17.2574L16.8392 13.7724L15.2605 15.0002Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/DirectionSignFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17L11 24H13V17H11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518211 4.77735C0.296693 4.44507 0.534889 4 0.934236 4H19.4648C19.7991 4 20.1114 4.1671 20.2968 4.4453L24 10L20.2968 15.5547C20.1114 15.8329 19.7991 16 19.4648 16H0.934238C0.53489 16 0.296693 15.5549 0.518211 15.2227L3.99998 10L0.518211 4.77735ZM11 17L11 24H13V17H11Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/DivideFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410728C4.84047 0.549224 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7802 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410728C18.2766 0.476383 22.5852 4.32556 23.712 9.37484C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410767C4.84047 0.549228 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7803 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410767C18.2766 0.476386 22.5852 4.32557 23.712 9.37485C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Down.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22L4.2929 14.2929L5.70711 12.8787L11 18.1716L11 1.58579L13 1.58579L13 18.1716L18.2929 12.8787L19.7071 14.2929L12 22Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22L4.29288 14.2929L5.70709 12.8787L11 18.1716L11 1.58579L13 1.58579L13 18.1716L18.2929 12.8787L19.7071 14.2929L12 22Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/EmailOpened.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.00873L24 7.60873V20C24 21.1046 23.1046 22 22 22H2C0.895432 22 0 21.1046 0 20V7.60873L12 1.00873ZM2 10.6845V18.1158L8.08008 14.0009L2 10.6845ZM10.056 15.0787L2.78419 20H21.2158L13.944 15.0787L12 16.1391L10.056 15.0787ZM15.9199 14.0009L22 18.1158V10.6845L15.9199 14.0009ZM21.6486 8.59802L12 3.29127L2.35136 8.59802L12 13.8609L21.6486 8.59802Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.00873L24 7.60873V20C24 21.1046 23.1046 22 22 22H2C0.895432 22 0 21.1046 0 20V7.60873L12 1.00873ZM2 10.6845V18.1157L8.08008 14.0009L2 10.6845ZM10.056 15.0787L2.78419 20H21.2158L13.944 15.0787L12 16.1391L10.056 15.0787ZM15.9199 14.0009L22 18.1157V10.6845L15.9199 14.0009ZM21.6486 8.59802L12 3.29127L2.35136 8.59802L12 13.8609L21.6486 8.59802Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Employer.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7ZM19 7C19 10.866 15.866 14 12 14C8.13401 14 5 10.866 5 7C5 3.13401 8.13401 0 12 0C15.866 0 19 3.13401 19 7ZM13 24V19H11V24L8.22198 15.666C7.58559 15.8987 6.97671 16.1885 6.40155 16.5292C3.71591 18.1202 1.7653 20.821 1.18137 24H3.22304C3.74422 21.7033 5.14388 19.7387 7.05195 18.4804L8.8918 24L11 24H13ZM20.7769 24H22.8186C22.2347 20.821 20.2841 18.1202 17.5984 16.5292C17.0233 16.1885 16.4144 15.8987 15.778 15.666L13 24L15.1082 24L16.948 18.4804C18.8561 19.7387 20.2558 21.7033 20.7769 24ZM13 16V18H11V16H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 7C17 9.76142 14.7615 12 12 12C9.23861 12 7.00003 9.76142 7.00003 7C7.00003 4.23858 9.23861 2 12 2C14.7615 2 17 4.23858 17 7ZM19 7C19 10.866 15.866 14 12 14C8.13404 14 5.00003 10.866 5.00003 7C5.00003 3.13401 8.13404 0 12 0C15.866 0 19 3.13401 19 7ZM13 24V19H11V24L8.22201 15.666C7.58562 15.8987 6.97674 16.1885 6.40158 16.5292C3.71594 18.1202 1.76533 20.821 1.1814 24H3.22307C3.74425 21.7033 5.14391 19.7387 7.05198 18.4804L8.89184 24L11 24H13ZM20.777 24H22.8186C22.2347 20.821 20.2841 18.1202 17.5985 16.5292C17.0233 16.1885 16.4144 15.8987 15.778 15.666L13 24L15.1082 24L16.9481 18.4804C18.8561 19.7387 20.2558 21.7033 20.777 24ZM13 16V18H11V16H13Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/ErrorColored.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.999 0C5.3948 0 0.0125453 5.37182 2.35603e-05 11.976C-0.0062373 15.1815 1.2355 18.1972 3.49776 20.4688C5.76001 22.7394 8.77148 23.9937 11.977 24H12C18.6031 24 23.9864 18.6271 24 12.0219C24.0125 5.40625 18.6396 0.0125217 11.999 0Z" fill="#BA3A26"/>
+<path d="M11.999 0C5.39479 0 0.0125453 5.37181 2.35603e-05 11.976C-0.00623729 15.1815 1.2355 18.1972 3.49775 20.4688C5.76001 22.7394 8.77148 23.9937 11.977 23.9999H12C18.6031 23.9999 23.9864 18.6271 24 12.0219C24.0125 5.40625 18.6396 0.0125217 11.999 0Z" fill="#BA3A26"/>
 <path d="M12 10.6512L15.3719 7.27932C15.7443 6.90687 16.3482 6.90687 16.7206 7.27932C17.0931 7.65177 17.0931 8.25563 16.7206 8.62808L13.3487 12L16.7206 15.3719C17.0931 15.7443 17.0931 16.3482 16.7206 16.7206C16.3482 17.0931 15.7443 17.0931 15.3719 16.7206L12 13.3487L8.62808 16.7206C8.25563 17.0931 7.65177 17.0931 7.27932 16.7206C6.90687 16.3482 6.90687 15.7443 7.27932 15.3719L10.6512 12L7.27932 8.62808C6.90687 8.25563 6.90687 7.65177 7.27932 7.27932C7.65177 6.90687 8.25563 6.90687 8.62808 7.27932L12 10.6512Z" fill="white"/>
 </svg>

@navikt/icons/svg/Eu.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.064 0.585362C12.0041 0.401105 11.7434 0.401105 11.6836 0.585361L11.2093 2.04506C11.1825 2.12746 11.1057 2.18325 11.019 2.18325H9.48435C9.29061 2.18325 9.21005 2.43117 9.3668 2.54505L10.6084 3.44712C10.6785 3.49805 10.7078 3.58833 10.6811 3.67074L10.2068 5.13036C10.1469 5.31462 10.3578 5.46785 10.5145 5.35397L11.7562 4.45183C11.8263 4.4009 11.9212 4.4009 11.9913 4.45183L13.2329 5.35394C13.3897 5.46783 13.6006 5.3146 13.5407 5.13034L13.0664 3.67074C13.0396 3.58833 13.069 3.49805 13.1391 3.44712L14.3807 2.54505C14.5374 2.43117 14.4569 2.18325 14.2631 2.18325H12.7285C12.6419 2.18325 12.5651 2.12746 12.5383 2.04506L12.064 0.585362ZM3.99083 3.72199C3.8182 3.63404 3.63389 3.81837 3.72184 3.991L4.43172 5.38417C4.47106 5.46138 4.45621 5.55513 4.39494 5.61639L3.28957 6.72177C3.15257 6.85877 3.27093 7.09104 3.46229 7.06072L5.00624 6.8161C5.09183 6.80254 5.17641 6.84564 5.21574 6.92284L5.92552 8.31588C6.01348 8.48851 6.27095 8.44773 6.30126 8.25637L6.54584 6.71219C6.5594 6.62661 6.62651 6.55949 6.71209 6.54594L8.25619 6.30136C8.44755 6.27105 8.48833 6.01358 8.3157 5.92562L6.92266 5.21584C6.84545 5.1765 6.80236 5.09192 6.81592 5.00634L7.06055 3.46236C7.09086 3.271 6.8586 3.15264 6.72159 3.28964L5.61621 4.39497C5.55494 4.45623 5.4612 4.47108 5.384 4.43175L3.99083 3.72199ZM0.585336 12.2186C0.401079 12.1587 0.40108 11.898 0.585336 11.8381L2.15736 11.3273C2.23976 11.3005 2.29555 11.2238 2.29555 11.1371V9.48437C2.29555 9.29062 2.54349 9.21007 2.65736 9.36682L3.62876 10.704C3.67969 10.7741 3.76997 10.8034 3.85238 10.7767L5.42437 10.2659C5.60863 10.206 5.76186 10.4169 5.64797 10.5737L4.67638 11.9108C4.62544 11.9809 4.62544 12.0758 4.67638 12.1459L5.64799 13.4831C5.76188 13.6398 5.60866 13.8507 5.42439 13.7909L3.85237 13.2801C3.76996 13.2533 3.67969 13.2827 3.62876 13.3528L2.65736 14.6899C2.54348 14.8467 2.29555 14.7661 2.29555 14.5724V12.9196C2.29555 12.8329 2.23976 12.7562 2.15736 12.7294L0.585336 12.2186ZM3.72183 19.8201C3.63388 19.9927 3.81821 20.177 3.99083 20.0891L5.38403 19.3793C5.46123 19.3399 5.55498 19.3548 5.61625 19.416L6.7217 20.5215C6.8587 20.6585 7.09096 20.5401 7.06066 20.3488L6.81614 18.8047C6.80259 18.7191 6.84567 18.6346 6.92287 18.5952L8.31577 17.8854C8.48839 17.7975 8.44761 17.54 8.25625 17.5097L6.71214 17.2651C6.62656 17.2516 6.55945 17.1845 6.54589 17.0989L6.30125 15.5548C6.27094 15.3634 6.01346 15.3226 5.92551 15.4953L5.21586 16.8883C5.17653 16.9655 5.09194 17.0086 5.00635 16.995L3.46229 16.7503C3.27093 16.72 3.15257 16.9523 3.28956 17.0893L4.39489 18.1947C4.45615 18.2559 4.471 18.3497 4.43167 18.4269L3.72183 19.8201ZM12.064 23.1204C12.0041 23.3047 11.7434 23.3047 11.6836 23.1205L11.2092 21.6608C11.1824 21.5784 11.1056 21.5226 11.019 21.5226H9.48438C9.29063 21.5226 9.21008 21.2746 9.36683 21.1608L10.6085 20.2587C10.6786 20.2078 10.7079 20.1175 10.6811 20.0351L10.2068 18.5756C10.1469 18.3914 10.3578 18.2381 10.5146 18.352L11.7562 19.254C11.8263 19.3049 11.9212 19.3049 11.9913 19.254L13.2329 18.352C13.3897 18.2381 13.6006 18.3914 13.5407 18.5756L13.0664 20.0351C13.0396 20.1175 13.069 20.2078 13.1391 20.2587L14.3807 21.1608C14.5374 21.2746 14.4569 21.5226 14.2631 21.5226H12.7284C12.6418 21.5226 12.565 21.5784 12.5382 21.6608L12.064 23.1204ZM19.8201 20.0892C19.9927 20.1771 20.177 19.9928 20.0891 19.8201L19.3792 18.4271C19.3399 18.3499 19.3547 18.2562 19.416 18.1949L20.5214 17.0893C20.6584 16.9523 20.54 16.72 20.3487 16.7504L18.8047 16.9951C18.7191 17.0086 18.6345 16.9655 18.5951 16.8883L17.8854 15.4953C17.7975 15.3226 17.54 15.3634 17.5097 15.5548L17.2651 17.0989C17.2515 17.1845 17.1844 17.2516 17.0989 17.2652L15.5548 17.5097C15.3634 17.54 15.3226 17.7975 15.4953 17.8855L16.8882 18.5952C16.9654 18.6345 17.0085 18.7191 16.9949 18.8047L16.7503 20.3489C16.72 20.5403 16.9522 20.6587 17.0892 20.5217L18.1948 19.4162C18.256 19.3549 18.3498 19.3401 18.427 19.3794L19.8201 20.0892ZM23.4144 11.8382C23.5987 11.8981 23.5987 12.1588 23.4144 12.2187L21.8424 12.7295C21.76 12.7563 21.7042 12.8331 21.7042 12.9197V14.5726C21.7042 14.7663 21.4563 14.8469 21.3424 14.6901L20.3708 13.3528C20.3199 13.2827 20.2296 13.2534 20.1472 13.2802L18.5754 13.791C18.3911 13.8508 18.2379 13.64 18.3518 13.4832L19.3233 12.146C19.3742 12.0759 19.3742 11.981 19.3233 11.9109L18.3518 10.5737C18.2379 10.4169 18.3911 10.206 18.5754 10.2659L20.1473 10.7767C20.2297 10.8035 20.32 10.7742 20.3709 10.7041L21.3424 9.36682C21.4562 9.21007 21.7042 9.29062 21.7042 9.48437V11.1373C21.7042 11.2239 21.76 11.3007 21.8424 11.3275L23.4144 11.8382ZM20.089 3.99102C20.177 3.8184 19.9926 3.63407 19.82 3.72203L18.427 4.43183C18.3498 4.47116 18.2561 4.45632 18.1948 4.39506L17.0892 3.28965C16.9522 3.15266 16.7199 3.27102 16.7503 3.46238L16.9949 5.00635C17.0085 5.09194 16.9654 5.17652 16.8882 5.21585L15.4952 5.92558C15.3226 6.01354 15.3634 6.271 15.5547 6.30132L17.0988 6.54597C17.1844 6.55952 17.2515 6.62664 17.2651 6.71221L17.5096 8.25629C17.5399 8.44765 17.7974 8.48842 17.8854 8.31578L18.595 6.92281C18.6343 6.8456 18.71Line truncated
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.064 0.585336C12.0041 0.40108 11.7434 0.401079 11.6836 0.585336L11.2093 2.04503C11.1825 2.12743 11.1057 2.18322 11.019 2.18322H9.48435C9.29061 2.18322 9.21005 2.43115 9.3668 2.54503L10.6084 3.4471C10.6785 3.49803 10.7078 3.5883 10.6811 3.67071L10.2068 5.13033C10.1469 5.31459 10.3578 5.46782 10.5145 5.35394L11.7562 4.4518C11.8263 4.40087 11.9212 4.40087 11.9913 4.4518L13.2329 5.35392C13.3897 5.4678 13.6006 5.31457 13.5407 5.13031L13.0664 3.67071C13.0396 3.5883 13.069 3.49803 13.1391 3.4471L14.3807 2.54503C14.5374 2.43115 14.4569 2.18322 14.2631 2.18322H12.7285C12.6419 2.18322 12.5651 2.12743 12.5383 2.04503L12.064 0.585336ZM3.99083 3.72196C3.8182 3.63402 3.63389 3.81835 3.72184 3.99097L4.43172 5.38415C4.47106 5.46135 4.45621 5.5551 4.39494 5.61637L3.28957 6.72174C3.15257 6.85874 3.27093 7.09102 3.46229 7.0607L5.00624 6.81608C5.09183 6.80252 5.17641 6.84561 5.21574 6.92282L5.92552 8.31585C6.01348 8.48848 6.27095 8.4477 6.30126 8.25634L6.54584 6.71216C6.5594 6.62658 6.62651 6.55947 6.71209 6.54591L8.25619 6.30133C8.44755 6.27102 8.48833 6.01355 8.3157 5.92559L6.92266 5.21581C6.84545 5.17648 6.80236 5.0919 6.81592 5.00632L7.06055 3.46233C7.09086 3.27097 6.8586 3.15261 6.72159 3.28961L5.61621 4.39494C5.55494 4.4562 5.4612 4.47105 5.384 4.43172L3.99083 3.72196ZM0.585336 12.2185C0.401079 12.1587 0.40108 11.898 0.585336 11.8381L2.15736 11.3273C2.23976 11.3005 2.29555 11.2237 2.29555 11.1371V9.48434C2.29555 9.29059 2.54349 9.21004 2.65736 9.3668L3.62876 10.704C3.67969 10.7741 3.76997 10.8034 3.85238 10.7766L5.42437 10.2659C5.60863 10.206 5.76186 10.4169 5.64797 10.5736L4.67638 11.9108C4.62544 11.9809 4.62544 12.0758 4.67638 12.1459L5.64799 13.4831C5.76188 13.6398 5.60866 13.8507 5.42439 13.7908L3.85237 13.2801C3.76996 13.2533 3.67969 13.2827 3.62876 13.3528L2.65736 14.6899C2.54348 14.8466 2.29555 14.7661 2.29555 14.5723V12.9196C2.29555 12.8329 2.23976 12.7561 2.15736 12.7294L0.585336 12.2185ZM3.72183 19.8201C3.63388 19.9927 3.81821 20.177 3.99083 20.0891L5.38403 19.3792C5.46123 19.3399 5.55498 19.3547 5.61625 19.416L6.7217 20.5215C6.8587 20.6585 7.09096 20.5401 7.06066 20.3488L6.81614 18.8047C6.80259 18.7191 6.84567 18.6346 6.92287 18.5952L8.31577 17.8854C8.48839 17.7975 8.44761 17.54 8.25625 17.5097L6.71214 17.2651C6.62656 17.2515 6.55945 17.1844 6.54589 17.0989L6.30125 15.5547C6.27094 15.3634 6.01346 15.3226 5.92551 15.4952L5.21586 16.8883C5.17653 16.9655 5.09194 17.0086 5.00635 16.995L3.46229 16.7503C3.27093 16.72 3.15257 16.9523 3.28956 17.0893L4.39489 18.1947C4.45615 18.2559 4.471 18.3497 4.43167 18.4269L3.72183 19.8201ZM12.064 23.1204C12.0041 23.3047 11.7434 23.3047 11.6836 23.1204L11.2092 21.6607C11.1824 21.5783 11.1056 21.5225 11.019 21.5225H9.48438C9.29063 21.5225 9.21008 21.2746 9.36683 21.1607L10.6085 20.2587C10.6786 20.2077 10.7079 20.1175 10.6811 20.035L10.2068 18.5756C10.1469 18.3913 10.3578 18.2381 10.5146 18.352L11.7562 19.254C11.8263 19.3049 11.9212 19.3049 11.9913 19.254L13.2329 18.352C13.3897 18.2381 13.6006 18.3913 13.5407 18.5756L13.0664 20.0351C13.0396 20.1175 13.069 20.2077 13.1391 20.2587L14.3807 21.1607C14.5374 21.2746 14.4569 21.5225 14.2631 21.5225H12.7284C12.6418 21.5225 12.565 21.5783 12.5382 21.6607L12.064 23.1204ZM19.8201 20.0891C19.9927 20.1771 20.177 19.9927 20.0891 19.8201L19.3792 18.4271C19.3399 18.3499 19.3547 18.2561 19.416 18.1949L20.5214 17.0893C20.6584 16.9523 20.54 16.72 20.3487 16.7503L18.8047 16.995C18.7191 17.0086 18.6345 16.9655 18.5951 16.8883L17.8854 15.4952C17.7975 15.3226 17.54 15.3634 17.5097 15.5547L17.2651 17.0989C17.2515 17.1845 17.1844 17.2516 17.0989 17.2651L15.5548 17.5097C15.3634 17.54 15.3226 17.7975 15.4953 17.8855L16.8882 18.5952C16.9654 18.6345 17.0085 18.7191 16.9949 18.8047L16.7503 20.3489C16.72 20.5403 16.9522 20.6586 17.0892 20.5216L18.1948 19.4162C18.256 19.3549 18.3498 19.34 18.427 19.3794L19.8201 20.0891ZM23.4144 11.8382C23.5987 11.8981 23.5987 12.1588 23.4144 12.2186L21.8424 12.7295C21.76 12.7562 21.7042 12.833 21.7042 12.9197V14.5725C21.7042 14.7663 21.4563 14.8468 21.3424 14.6901L20.3708 13.3528C20.3199 13.2827 20.2296 13.2534 20.1472 13.2801L18.5754 13.7909C18.3911 13.8508 18.2379 13.6399 18.3518 13.4832L19.3233 12.146C19.3742 12.0759 19.3742 11.981 19.3233 11.9109L18.3518 10.5737C18.2379 10.4169 18.3911 10.206 18.5754 10.2659L20.1473 10.7767C20.2297 10.8035 20.32 10.7741 20.3709 10.704L21.3424 9.3668C21.4562 9.21004 21.7042 9.29059 21.7042 9.48434V11.1372C21.7042 11.2239 21.76 11.3007 21.8424 11.3275L23.4144 11.8382ZM20.089 3.991C20.177 3.81837 19.9926 3.63405 19.82 3.722L18.427 4.4318C18.3498 4.47114 18.2561 4.45629 18.1948 4.39503L17.0892 3.28962C16.9522 3.15263 16.7199 3.271 16.7503 3.46235L16.9949 5.00633C17.0085 5.09191 16.9654 5.17649 16.8882 5.21583L15.4952 5.92556C15.3226 6.01351 15.3634 6.27098 15.5547 6.30129L17.0988 6.54594C17.1844 6.5595 17.2515 6.62661 17.2651 6.71219L17.5096 8.25626C17.5399 8.44763 17.7974 8.4884 17.8854 8.31576L18.595 6.92278C18.6343 6.84557 18.7189 6.80247 18.Line truncated
 </svg>

@navikt/icons/svg/Expand.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.4142L4.2929 9.7071L5.70711 8.29289L12 14.5858L18.2929 8.29289L19.7071 9.70711L12 17.4142Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.4142L4.29288 9.70711L5.70709 8.29289L12 14.5858L18.2929 8.2929L19.7071 9.70711L12 17.4142Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/ExpandFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.1213L3.93934 10.0607L6.06066 7.93934L12 13.8787L17.9393 7.93934L20.0607 10.0607L12 18.1213Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.1213L3.93935 10.0607L6.06067 7.93934L12 13.8787L17.9393 7.93934L20.0607 10.0607L12 18.1213Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/EyeScreened.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5334 6.88078L22.2071 3.20711L20.7929 1.79289L16.6584 5.92742C15.161 5.30914 13.6082 5 12 5C7.58172 5 3.58172 7.33333 0 12C1.72515 14.2477 3.54734 15.9541 5.46657 17.1192L1.79291 20.7929L3.20712 22.2071L7.34164 18.0726C8.83901 18.6909 10.3918 19 12 19C16.4183 19 20.4183 16.6667 24 12C22.2749 9.75228 20.4527 8.04588 18.5334 6.88078ZM15.1001 7.4857C14.0778 7.15691 13.0445 7 12 7C8.75272 7 5.6128 8.51665 2.58044 12C4.00639 13.638 5.45612 14.8411 6.92962 15.6562L7.82809 14.7577C6.54188 12.8163 6.754 10.1749 8.46447 8.46447C9.44078 7.48816 10.7204 7 12 7C12.9622 7 13.9245 7.27603 14.7577 7.82809L15.1001 7.4857ZM13.2935 9.29228C12.1784 8.75958 10.8023 8.95504 9.87868 9.87868C8.95504 10.8023 8.75957 12.1784 9.29228 13.2935L13.2935 9.29228ZM8.89992 16.5143L17.0704 8.34383C18.5439 9.15886 19.9936 10.362 21.4196 12C18.3872 15.4833 15.2473 17 12 17C10.9555 17 9.92217 16.8431 8.89992 16.5143Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5334 6.8808L22.2071 3.20712L20.7929 1.79291L16.6584 5.92744C15.161 5.30916 13.6082 5.00001 12 5.00001C7.58172 5.00001 3.58172 7.33335 0 12C1.72515 14.2477 3.54734 15.9541 5.46657 17.1192L1.79291 20.7929L3.20712 22.2071L7.34164 18.0726C8.83901 18.6909 10.3918 19 12 19C16.4183 19 20.4183 16.6667 24 12C22.2749 9.7523 20.4527 8.04589 18.5334 6.8808ZM15.1001 7.48571C14.0778 7.15692 13.0445 7.00001 12 7.00001C8.75272 7.00001 5.6128 8.51667 2.58044 12C4.00639 13.638 5.45612 14.8412 6.92962 15.6562L7.82809 14.7577C6.54188 12.8164 6.754 10.1749 8.46447 8.46448C9.44078 7.48817 10.7204 7.00001 12 7.00001C12.9622 7.00001 13.9245 7.27604 14.7577 7.8281L15.1001 7.48571ZM13.2935 9.2923C12.1784 8.75959 10.8023 8.95506 9.87868 9.87869C8.95504 10.8023 8.75957 12.1784 9.29228 13.2935L13.2935 9.2923ZM8.89992 16.5143L17.0704 8.34384C18.5439 9.15888 19.9936 10.362 21.4196 12C18.3872 15.4834 15.2473 17 12 17C10.9555 17 9.92217 16.8431 8.89992 16.5143Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/EyeScreenedFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2071 3.20711L18.5334 6.88078C20.4527 8.04588 22.2749 9.75228 24 12C20.4183 16.6667 16.4183 19 12 19C10.3918 19 8.83901 18.6909 7.34164 18.0726L3.20712 22.2071L1.79291 20.7929L5.46657 17.1192C3.54734 15.9541 1.72515 14.2477 0 12C3.58172 7.33333 7.58172 5 12 5C13.6082 5 15.161 5.30914 16.6584 5.92742L20.7929 1.79289L22.2071 3.20711ZM12 17C14.7614 17 17 14.7614 17 12C17 10.9809 16.6951 10.033 16.1716 9.24262L9.24262 16.1716C10.033 16.6951 10.9809 17 12 17ZM7.8284 14.7574L9.29238 13.2934C9.10495 12.9018 9 12.4632 9 12C9 10.3431 10.3431 9 12 9C12.4632 9 12.9018 9.10495 13.2934 9.29238L14.7574 7.8284C13.967 7.30488 13.0191 7 12 7C9.23858 7 7 9.23858 7 12C7 13.0191 7.30488 13.967 7.8284 14.7574Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2071 3.20712L18.5334 6.8808C20.4527 8.04589 22.2749 9.7523 24 12C20.4183 16.6667 16.4183 19 12 19C10.3918 19 8.83901 18.6909 7.34164 18.0726L3.20712 22.2071L1.79291 20.7929L5.46657 17.1192C3.54734 15.9541 1.72515 14.2477 0 12C3.58172 7.33335 7.58172 5.00002 12 5.00002C13.6082 5.00002 15.161 5.30916 16.6584 5.92744L20.7929 1.79291L22.2071 3.20712ZM12 17C14.7614 17 17 14.7614 17 12C17 10.9809 16.6951 10.0331 16.1716 9.24263L9.24262 16.1716C10.033 16.6951 10.9809 17 12 17ZM7.8284 14.7574L9.29238 13.2934C9.10495 12.9018 9 12.4632 9 12C9 10.3432 10.3431 9.00002 12 9.00002C12.4632 9.00002 12.9018 9.10497 13.2934 9.29239L14.7574 7.82842C13.967 7.30489 13.0191 7.00002 12 7.00002C9.23858 7.00002 7 9.23859 7 12C7 13.0191 7.30488 13.967 7.8284 14.7574Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/FeedingBottle.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1247 0.875328C24.2918 2.04243 24.2918 3.93468 23.1247 5.10179C22.6902 5.53626 22.1552 5.80899 21.5946 5.91999C22.0417 7.5822 21.6123 9.43175 20.307 10.7371C20.6961 11.1261 20.6961 11.7569 20.307 12.1459L19.6026 12.8503L18.8003 12.048L18.2601 14.3387C18.0051 15.4193 17.4542 16.4075 16.6692 17.1925L10.4453 23.4164C9.66722 24.1945 8.40572 24.1945 7.62765 23.4164L0.583552 16.3723C-0.194517 15.5943 -0.194517 14.3328 0.583552 13.5547L6.80745 7.33081C7.59251 6.54575 8.58071 5.99486 9.66127 5.7399L11.9513 5.199L11.1497 4.39738L11.8541 3.69297C12.2431 3.30393 12.8739 3.30393 13.2629 3.69297C14.5682 2.38765 16.4178 1.95827 18.0812 2.40483C18.191 1.84476 18.4637 1.3098 18.8982 0.875328C20.0653 -0.291776 21.9576 -0.291776 23.1247 0.875328ZM5 11.955L1.99237 14.9635L9.03647 22.0076L15.2604 15.7837C15.7256 15.3185 16.0675 14.7463 16.2571 14.1189L16.321 13.8812L16.764 12H5V11.955ZM13.6074 6.85506L10.1188 7.67902C9.47848 7.83011 8.8868 8.13708 8.39564 8.57101L8.21627 8.73963L6.955 10H16.753L13.6074 6.85506ZM14.6718 5.10179L18.8982 9.32825C20.0653 8.16114 20.0653 6.26889 18.8982 5.10179C17.7311 3.93468 15.8389 3.93468 14.6718 5.10179ZM20.307 2.28415C19.918 2.67318 19.918 3.30393 20.307 3.69297C20.6961 4.082 21.3268 4.082 21.7158 3.69297C22.1049 3.30393 22.1049 2.67318 21.7158 2.28415C21.3268 1.89511 20.6961 1.89511 20.307 2.28415Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1247 0.875328C24.2918 2.04243 24.2918 3.93468 23.1247 5.10179C22.6902 5.53626 22.1552 5.80899 21.5946 5.91999C22.0417 7.5822 21.6123 9.43175 20.307 10.7371C20.6961 11.1261 20.6961 11.7569 20.307 12.1459L19.6026 12.8503L18.8003 12.048L18.2601 14.3387C18.0051 15.4193 17.4542 16.4075 16.6692 17.1925L10.4453 23.4164C9.66722 24.1945 8.40572 24.1945 7.62765 23.4164L0.583552 16.3723C-0.194517 15.5943 -0.194517 14.3328 0.583552 13.5547L6.80745 7.33081C7.59251 6.54575 8.58071 5.99486 9.66127 5.7399L11.9513 5.199L11.1497 4.39738L11.8541 3.69297C12.2431 3.30393 12.8739 3.30393 13.2629 3.69297C14.5682 2.38765 16.4178 1.95827 18.0812 2.40483C18.191 1.84476 18.4637 1.3098 18.8982 0.875328C20.0653 -0.291776 21.9576 -0.291776 23.1247 0.875328ZM5 11.955L1.99237 14.9635L9.03647 22.0076L15.2604 15.7837C15.7256 15.3185 16.0675 14.7463 16.2571 14.1189L16.321 13.8812L16.764 12H5V11.955ZM13.6074 6.85506L10.1188 7.67902C9.47848 7.83011 8.8868 8.13708 8.39564 8.57101L8.21627 8.73963L6.955 10H16.753L13.6074 6.85506ZM14.6718 5.10179L18.8982 9.32825C20.0653 8.16114 20.0653 6.26889 18.8982 5.10179C17.7311 3.93468 15.8389 3.93468 14.6718 5.10179ZM20.307 2.28415C19.918 2.67318 19.918 3.30393 20.307 3.69297C20.6961 4.082 21.3268 4.082 21.7159 3.69297C22.1049 3.30393 22.1049 2.67318 21.7159 2.28415C21.3268 1.89511 20.6961 1.89511 20.307 2.28415Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Female.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 3.55228 12.5523 4 12 4C11.4477 4 11 3.55228 11 3C11 2.44772 11.4477 2 12 2C12.5523 2 13 2.44772 13 3ZM15 3C15 4.65685 13.6569 6 12 6C10.3431 6 9 4.65685 9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3ZM10.5739 7C9.86307 7 9.20562 7.37734 8.84704 7.99114L2.99985 18H9V24H11V16H6.48453L10.5739 9H13.4261L17.5155 16H13V24H15V18H21.0002L15.153 7.99114C14.7944 7.37734 14.1369 7 13.4261 7H10.5739Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 3.55228 12.5523 4 12 4C11.4477 4 11 3.55228 11 3C11 2.44772 11.4477 2 12 2C12.5523 2 13 2.44772 13 3ZM15 3C15 4.65685 13.6569 6 12 6C10.3432 6 9.00003 4.65685 9.00003 3C9.00003 1.34315 10.3432 0 12 0C13.6569 0 15 1.34315 15 3ZM10.574 7C9.8631 7 9.20565 7.37734 8.84707 7.99114L2.99988 18H9.00003V24H11V16H6.48456L10.574 9H13.4261L17.5155 16H13V24H15V18H21.0002L15.153 7.99114C14.7944 7.37734 14.137 7 13.4261 7H10.574Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/FemaleFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3C15 4.65685 13.6569 6 12 6C10.3431 6 9 4.65685 9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3ZM8.84704 7.99114C9.20562 7.37734 9.86307 7 10.5739 7H13.4261C14.1369 7 14.7944 7.37734 15.153 7.99114L21.0002 18H15V24H13V18H11V24H9V18H2.99985L8.84704 7.99114Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3C15 4.65685 13.6569 6 12 6C10.3432 6 9.00003 4.65685 9.00003 3C9.00003 1.34315 10.3432 0 12 0C13.6569 0 15 1.34315 15 3ZM8.84707 7.99114C9.20565 7.37734 9.8631 7 10.574 7H13.4261C14.137 7 14.7944 7.37734 15.153 7.99114L21.0002 18H15V24H13V18H11V24H9.00003V18H2.99988L8.84707 7.99114Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/FillForms.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0131 1.10889L18.0433 1.07797C19.2857 -0.193723 21.3537 -0.408751 22.7918 0.823966L22.8275 0.854537L22.9935 1.01096L23.0262 1.04481C24.2931 2.3565 24.3049 4.40707 23.1718 5.78656L21.6859 7.59415L14.1605 16.7559L6.9503 20.0199L8.82643 12.2761L15.1821 4.53889L15.1817 4.53857L16.3832 3.07665L16.4505 2.99468L17.8601 1.27963L18.0131 1.10889ZM17.9807 4.28L19.375 2.58351L19.4707 2.47669C20.0324 1.90179 20.9117 1.84497 21.4932 2.3434L21.5908 2.43534C22.1151 2.9782 22.1517 3.88027 21.6295 4.51599L20.2534 6.19L17.9807 4.28ZM10.6593 13.1929L16.7116 5.82501L18.9843 7.73501L12.9138 15.1254L9.85575 16.5098L10.6593 13.1929ZM0 24H23.965V22H0V24Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0131 1.10893L18.0433 1.07801C19.2857 -0.193679 21.3537 -0.408708 22.7918 0.824009L22.8275 0.85458L22.9935 1.01101L23.0262 1.04486C24.2931 2.35655 24.3049 4.40711 23.1718 5.78661L21.6859 7.5942L14.1605 16.7559L6.9503 20.02L8.82643 12.2762L15.1821 4.53893L15.1817 4.53862L16.3832 3.07669L16.4505 2.99472L17.8601 1.27967L18.0131 1.10893ZM17.9807 4.28005L19.375 2.58356L19.4707 2.47673C20.0324 1.90184 20.9117 1.84501 21.4932 2.34344L21.5908 2.43538C22.1151 2.97824 22.1517 3.88031 21.6295 4.51603L20.2534 6.19005L17.9807 4.28005ZM10.6593 13.193L16.7116 5.82506L18.9843 7.73506L12.9138 15.1254L9.85575 16.5098L10.6593 13.193ZM0 24H23.965V22H0V24Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/FillFormsFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1718 5.78656L21.7738 7.48718L16.4594 2.98382L17.8601 1.27963L18.013 1.10889L18.0432 1.07797C19.2857 -0.193725 21.3536 -0.408754 22.7918 0.823963L22.8274 0.854535L22.9935 1.01096L23.0262 1.04481C24.2931 2.3565 24.3049 4.40707 23.1718 5.78656ZM15.1902 4.52819L20.505 9.03187L14.1605 16.7559L6.9503 20.0199L8.82643 12.2761L15.1821 4.53889L15.1817 4.53857L15.1902 4.52819ZM0 24H23.965V22H0V24Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1718 5.78661L21.7738 7.48722L16.4594 2.98387L17.8601 1.27967L18.013 1.10893L18.0432 1.07801C19.2857 -0.193679 21.3536 -0.408708 22.7918 0.824009L22.8274 0.85458L22.9935 1.01101L23.0262 1.04486C24.2931 2.35655 24.3049 4.40711 23.1718 5.78661ZM15.1902 4.52823L20.505 9.03192L14.1605 16.7559L6.9503 20.02L8.82643 12.2762L15.1821 4.53894L15.1817 4.53862L15.1902 4.52823ZM0 24H23.965V22H0V24Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Filter2.svg

@@ -1,6 +1,3 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_4312_6358" fill="white">
-<path d="M0 3.5V4.67546C0 4.95187 0.114409 5.21595 0.316059 5.405L8.34783 12.9348V23.0384C8.34783 23.6911 8.96302 24.1689 9.59542 24.0073L15.4215 22.5184C15.8642 22.4052 16.1739 22.0064 16.1739 21.5495V12.9348L23.7071 5.40159C23.8946 5.21405 24 4.9597 24 4.69448V3.5C24 2.94772 23.5523 2.5 23 2.5H1C0.447715 2.5 0 2.94772 0 3.5Z"/>
-</mask>
-<path d="M23.7071 5.40159L25.1213 6.8158V6.8158L23.7071 5.40159ZM16.1739 12.9348L14.7597 11.5206L14.1739 12.1064V12.9348H16.1739ZM15.4215 22.5184L14.9263 20.5806H14.9263L15.4215 22.5184ZM9.59542 24.0073L10.0906 25.945L10.0906 25.945L9.59542 24.0073ZM8.34783 12.9348H10.3478V12.0683L9.71571 11.4757L8.34783 12.9348ZM0.316059 5.405L1.68394 3.94593L1.68394 3.94593L0.316059 5.405ZM2 4.67546V3.5H-2V4.67546H2ZM1 4.5H23V0.5H1V4.5ZM22 3.5V4.69448H26V3.5H22ZM22.2929 3.98737L14.7597 11.5206L17.5881 14.349L25.1213 6.8158L22.2929 3.98737ZM14.1739 12.9348V21.5495H18.1739V12.9348H14.1739ZM14.9263 20.5806L9.10023 22.0695L10.0906 25.945L15.9167 24.4561L14.9263 20.5806ZM10.3478 23.0384V12.9348H6.34783V23.0384H10.3478ZM9.71571 11.4757L1.68394 3.94593L-1.05182 6.86408L6.97994 14.3939L9.71571 11.4757ZM9.10023 22.0695C9.73263 21.9079 10.3478 22.3857 10.3478 23.0384H6.34783C6.34783 24.9966 8.19341 26.4298 10.0906 25.945L9.10023 22.0695ZM22 4.69448C22 4.42927 22.1054 4.17491 22.2929 3.98738L25.1213 6.8158C25.6839 6.25319 26 5.49013 26 4.69448H22ZM23 4.5C22.4477 4.5 22 4.05229 22 3.5H26C26 1.84314 24.6569 0.5 23 0.5V4.5ZM2 3.5C2 4.05228 1.55228 4.5 1 4.5V0.5C-0.656854 0.5 -2 1.84315 -2 3.5H2ZM14.1739 21.5495C14.1739 21.0926 14.4836 20.6938 14.9263 20.5806L15.9167 24.4561C17.2448 24.1167 18.1739 22.9203 18.1739 21.5495H14.1739ZM-2 4.67546C-2 5.50469 -1.65677 6.29693 -1.05182 6.86408L1.68394 3.94593C1.88559 4.13497 2 4.39905 2 4.67546H-2Z" fill="#262626" mask="url(#path-1-inside-1_4312_6358)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3478 12.0683V21.7507L14.1739 20.7729V12.1064L21.7803 4.5H2.27495L10.3478 12.0683ZM9.59542 24.0073L15.4215 22.5184C15.8642 22.4052 16.1739 22.0064 16.1739 21.5495V12.9348L23.7071 5.40159C23.8946 5.21405 24 4.9597 24 4.69448V3.5C24 2.94772 23.5523 2.5 23 2.5H1C0.447715 2.5 0 2.94772 0 3.5V4.67546C0 4.95187 0.114409 5.21595 0.316059 5.405L8.34783 12.9348V23.0384C8.34783 23.6911 8.96302 24.1689 9.59542 24.0073Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Findout.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.13102 0H14.8325L21.6878 5.71281V16.0077C21.6878 17.2031 21.3186 18.3123 20.6879 19.2273L25 23.5395L23.5395 25L19.2273 20.6879C18.3123 21.3186 17.2031 21.6878 16.0077 21.6878H4.13102V0ZM19.6223 8.26204V11.6259C18.6402 10.8148 17.3809 10.3275 16.0077 10.3275C12.8706 10.3275 10.3275 12.8706 10.3275 16.0077C10.3275 17.3809 10.8148 18.6402 11.6259 19.6223H6.19653V2.06551H12.3931V8.26204H19.6223ZM19.6223 16.0077C19.6223 18.004 18.004 19.6223 16.0077 19.6223C14.0114 19.6223 12.3931 18.004 12.3931 16.0077C12.3931 14.0114 14.0114 12.3931 16.0077 12.3931C18.004 12.3931 19.6223 14.0114 19.6223 16.0077ZM14.4586 2.3771V6.19653H19.0419L14.4586 2.3771Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.13102 0H14.8325L21.6879 5.71281V16.0077C21.6879 17.2031 21.3186 18.3123 20.6879 19.2273L25 23.5395L23.5395 25L19.2273 20.6879C18.3123 21.3186 17.2031 21.6879 16.0077 21.6879H4.13102V0ZM19.6223 8.26204V11.6259C18.6403 10.8148 17.3809 10.3276 16.0077 10.3276C12.8706 10.3276 10.3276 12.8706 10.3276 16.0077C10.3276 17.3809 10.8148 18.6403 11.6259 19.6223H6.19653V2.06551H12.3931V8.26204H19.6223ZM19.6223 16.0077C19.6223 18.004 18.004 19.6223 16.0077 19.6223C14.0114 19.6223 12.3931 18.004 12.3931 16.0077C12.3931 14.0114 14.0114 12.3931 16.0077 12.3931C18.004 12.3931 19.6223 14.0114 19.6223 16.0077ZM14.4586 2.3771V6.19653H19.0419L14.4586 2.3771Z" fill="#262626"/>
 </svg>