Version Packages (#3613)

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

.changeset/README.md

@@ -1,31 +1,35 @@
 # Changesets
 
-For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
+Vi bruker [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
 
-## Howto
+## Lage ny versjon
 
-- For å lage en ny versjons-entry: `yarn changeset`
-- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
+1. `yarn changeset`
+2. Svar på spørsmålene som kommer opp:
 
 `🦋 Which packages would you like to include?`
 
-Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke `Enter` for å gå videre.
+Trykk `Space` for å velge pakkene som skal versjoneres, trykk så `Enter` for å gå videre.
 
 `🦋 Which packages should have a major bump?`
 
-Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+Trykk `Enter` for å gå videre _eller_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`.
 
 `🦋 Which packages should have a minor bump?`
 
-Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+Trykk `Enter` for å gå videre _eller_ velg pakkene som skal minor-bumpes med `arrowkeys` + `Space`.
 
-Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
+Hvis du ikke velger major eller minor, så vil pakkene få en patch-bump.
 
-- Commit og push.
+`Please enter a summary for this change`
+
+Skriv inn en kort beskrivelse av endringen på formatet `<Komponent>: <gitmoji?> <Beskrivelse>`, f.eks. "Button: ✨ Add feature xyz".
+
+3. Commit og push.
 
 ## Fixed versjonering
 
-Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
+Alle base-pakkene våre har `fixed versjonering`. Dette betyr at en bump på en av disse vil bumpe alle til samme versjon
 
 ```sh
   "@navikt/ds-react",

.eslintrc.js

@@ -1,4 +1,19 @@
-// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide
+/**
+ * TODO:
+ * - Convert to new format (v9): https://eslint.org/docs/latest/use/configure/migration-guide
+ * - Look into opinionated stylistic plugin
+ * - Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
+ * - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
+ * - Consider adding the rule "id-length"
+ */
+
+/**
+ * V9 migration WIP
+ * - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
+ * - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
+ * - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
+ * - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
+ */
 module.exports = {
   env: {
     browser: true,
@@ -8,15 +23,13 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:react/recommended",
-    //"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform
     "plugin:react-hooks/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
     "plugin:storybook/recommended",
-    // TODO: Look into opinionated stylistic plugin
-    // TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
   ],
+  /* Allows eslint-plugin-react to detect installed react-version */
   settings: { react: { version: "detect" } },
   rules: {
     "import/no-unresolved": "off",
@@ -26,12 +39,6 @@ module.exports = {
     ],
     "array-callback-return": "error",
     "object-shorthand": "error",
-    // TODO: Consider adding the rule "id-length"
-    // Temporary:
-    "react/prop-types": "off",
-    "react/display-name": "off",
-    "import/no-named-as-default": "off",
-    // "import/no-cycle": [1],
     "no-else-return": "error",
     "no-console": [
       "warn",
@@ -53,7 +60,12 @@ module.exports = {
         ],
       },
     ],
+    /* Temporarily turned off until code is updated */
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "import/no-named-as-default": "off",
   },
+  /* https://eslint.org/docs/latest/use/configure/rules#report-unused-eslint-disable-comments */
   reportUnusedDisableDirectives: true,
   overrides: [
     {
@@ -66,17 +78,27 @@ module.exports = {
       files: ["**/*.ts?(x)"],
       extends: ["plugin:@typescript-eslint/recommended"],
       rules: {
-        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
+        /*
+         * TODO:
+         * - Consider { builtinGlobals: true }
+         */
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }],
         "@typescript-eslint/no-explicit-any": "off", // Temporary
         "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          /* https://eslint.org/docs/latest/rules/no-unused-expressions#allowshortcircuit-and-allowternary */
+          { allowShortCircuit: true, allowTernary: true },
+        ],
       },
     },
     {
       files: ["**/*.test.*", "**/__tests__/*"],
       plugins: ["@vitest"],
       extends: [
-        "plugin:@vitest/legacy-recommended",
         "plugin:testing-library/react",
+        /* Needed to support v8 eslint config-syntax */
+        "plugin:@vitest/legacy-recommended",
       ],
     },
 
@@ -121,7 +143,11 @@ module.exports = {
       },
     },
     {
-      files: ["**/examples/__parts*/*.tsx"],
+      files: [
+        "**/examples/__parts*/*.tsx",
+        "**/pages/templates/**/*.tsx",
+        "**/pages/eksempler/**/*.tsx",
+      ],
       plugins: ["aksel-local"],
       rules: {
         "aksel-local/import-check": ["error"], // Only allow imports from @navikt and react

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,7 +6,7 @@
 
 - [ ] JSDoc
 - [ ] Examples
-- [ ] Documentation
+- [ ] Documentation / Decision Records
 - [ ] Storybook
 - [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
 - [ ] Component tokens (`@navikt/core/css/tokens.json`)

.github/actions/build-website/action.yml

@@ -0,0 +1,56 @@
+name: "Build website"
+description: "Builds Nextjs-website and published CDN-asssets to GCP if needed"
+inputs:
+  use_cdn_assets:
+    description: "Use CDN assets, and upload build to GCP"
+    required: true
+  npm_auth_token:
+    description: "NPM Auth Token"
+    required: true
+  nais_id_provider:
+    description: "NAIS_WORKLOAD_IDENTITY_PROVIDER token"
+    required: true
+  nais_project_id:
+    description: "NAIS_MANAGEMENT_PROJECT_ID token"
+    required: true
+  sanity_read_token:
+    description: "Sanity read-only token allowing published and un-published documents"
+    required: true
+  sanity_read_no_drafts_token:
+    description: "Sanity read-only token allowing only published documents"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Setup project
+      uses: ./.github/actions/setup
+      with:
+        npm_auth_token: ${{ inputs.npm_auth_token }}
+
+    - name: Run website tests
+      run: yarn workspace website test
+      shell: bash
+
+    - name: Make Next.js app use CDN assets
+      if: ${{ inputs.use_cdn_assets == 'true' }}
+      run: |
+        echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
+      shell: bash
+
+    - name: Build Next.js website
+      run: yarn build:next
+      env:
+        SANITY_READ: ${{ inputs.sanity_read_token }}
+        SANITY_READ_NO_DRAFTS: ${{ inputs.sanity_read_no_drafts_token }}
+      shell: bash
+
+    - name: Upload static files to Nav CDN
+      if: ${{ inputs.use_cdn_assets == 'true' }}
+      uses: nais/deploy/actions/cdn-upload/v2@master
+      with:
+        team: designsystem
+        source: ./aksel.nav.no/website/.next/static
+        destination: "/website/_next"
+        project_id: ${{ inputs.nais_project_id }}
+        identity_provider: ${{ inputs.nais_id_provider }}

.github/actions/setup/action.yml

@@ -0,0 +1,26 @@
+name: "Setup Project"
+description: "Checks out repo, sets up Node, installs dependencies and runs boot command."
+inputs:
+  npm_auth_token:
+    description: "NPM Auth Token"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: yarn
+        cache-dependency-path: "**/yarn.lock"
+
+    - name: Install dependencies
+      run: yarn
+      shell: bash
+      env:
+        NPM_AUTH_TOKEN: ${{ inputs.npm_auth_token }}
+
+    - name: Boot (build packages)
+      run: yarn boot
+      shell: bash

.github/dependabot.yml

@@ -0,0 +1,20 @@
+version: 2
+registries:
+  npm-github:
+    type: npm-registry
+    url: https://npm.pkg.github.com
+    token: ${{ secrets.READER_TOKEN }}
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+    registries:
+      - npm-github
+
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: weekly
+    registries:
+      - npm-github

.github/workflows/aksel-dev.yml

@@ -14,42 +14,20 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          fetch-depth: 1
 
-      - name: add tokens to .env
-        run: |
-          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
-
-      - name: Hide page from search engines
-        run: |
-          echo "User-agent: *\nDisallow: /" > aksel.nav.no/website/public/robots.txt
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build application
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: |
-          yarn boot
-          yarn workspace aksel.nav.no build:next
-
-      - name: Upload static files to NAV CDN
-        uses: nais/deploy/actions/cdn-upload/v2@master
+      - name: Setup and build Next.js application
+        uses: ./.github/actions/build-website
         with:
-          team: designsystem
-          source: ./aksel.nav.no/website/.next/static
-          destination: "/website/_next"
-          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
-          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          use_cdn_assets: true
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+          nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          sanity_read_token: ${{ secrets.SANITY_READ }}
+          sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
 
       - name: Get complete tag
         run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV

.github/workflows/aksel-prod.yml

@@ -16,21 +16,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
-      - name: Install dependencies
-        run: yarn
-
-      - name: Run docgen
-        run: |
-          yarn boot
-          yarn docgen
+      - name: Run ts-docgen
+        run: yarn docgen
 
       - name: Update sanity sync
         env:
@@ -45,43 +37,20 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          fetch-depth: 1
 
-      - name: add tokens to .env
-        run: |
-          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build packages
-        run: yarn boot
-
-      - name: Tests
-        run: yarn workspace website test
-
-      - name: Build application
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: yarn workspace aksel.nav.no build:next
-
-      - name: Upload static files to NAV CDN
-        uses: nais/deploy/actions/cdn-upload/v2@master
+      - name: Setup and build Next.js application
+        uses: ./.github/actions/build-website
         with:
-          team: designsystem
-          source: ./aksel.nav.no/website/.next/static
-          destination: "/website/_next"
-          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
-          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          use_cdn_assets: true
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+          nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          sanity_read_token: ${{ secrets.SANITY_READ }}
+          sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
 
       - name: Get complete tag
         run: echo "TAG=PROD-$( date +%s )" >> $GITHUB_ENV

.github/workflows/aksel-redeploy.yml

@@ -1,42 +0,0 @@
-name: Redeploy image 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/aksel
-
-jobs:
-  redeploy:
-    name: Redeploy image
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: yarn
-      - uses: actions/checkout@v4
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # 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

@@ -16,17 +16,18 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Install dependencies
         run: cd aksel.nav.no/website && yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Export dataset
+        run: cd aksel.nav.no/website && yarn backup
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}
-        run: cd aksel.nav.no/website && yarn backup
+
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v2"
         with:

.github/workflows/chromatic.yml

@@ -18,68 +18,49 @@ concurrency:
 
 jobs:
   chromatic:
-    if: ${{ !contains(github.event.pull_request.labels.*.name, 'ignore-chromatic') }}
     runs-on: ubuntu-latest
     permissions:
       issues: write
       pull-requests: write
       contents: write
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup
         with:
-          node-version: lts/*
-          cache: yarn
-
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build packages
-        run: yarn boot
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
       - name: Chromatic
         uses: chromaui/action@latest
         id: chromatic_tests
-        continue-on-error: true
+        continue-on-error: false
         with:
           autoAcceptChanges: "main"
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          exitZeroOnChanges: false
+          exitZeroOnChanges: true
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
           untraced: "**/package.json|yarn.lock|**/*.md"
-          externals: \@navikt/core/css/**/*.css
+          externals: "**/core/css/*.css|**/core/css/baseline/*.css|**/core/css/form/*.css|**/core/css/primitives/*.css"
           traceChanged: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
-      - name: replace storybook url
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: frabert/replace-string-action@v2
-        id: storybook_url
-        with:
-          pattern: "(iframe.html)"
-          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
-          replace-with: ""
-
       - name: Get commit sha
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
         id: vars
         shell: bash
         run: |
           echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
 
       - name: Find Comment
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: peter-evans/find-comment@v2
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        uses: peter-evans/find-comment@v3
         id: fc
         with:
           issue-number: ${{ github.event.pull_request.number }}
@@ -87,27 +68,17 @@ jobs:
           body-includes: Storybook demo
 
       - name: Create or update comment
-        if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
-        uses: peter-evans/create-or-update-comment@v3
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        uses: peter-evans/create-or-update-comment@v4
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}}) / [Chromatic](${{steps.chromatic_tests.outputs.url}})
 
-            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
-          edit-mode: replace
+            ${{ steps.chromatic_tests.outputs.changeCount > 0 && format('### 📝 Changes to review: {0}', steps.chromatic_tests.outputs.changeCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.errorCount > 0 && format('### ❌ Stories with errors: {0}', steps.chromatic_tests.outputs.errorCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.interactionTestFailuresCount > 0 && format('### ❌ Failed interaction tests: {0}', steps.chromatic_tests.outputs.interactionTestFailuresCount) || '' }}
 
-      - name: Create or update failed comment
-        if: steps.chromatic_tests.outcome != 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
-        uses: peter-evans/create-or-update-comment@v3
-        with:
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
-
-            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}
-
-            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
+            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} components | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace

.github/workflows/ci.yml

@@ -9,36 +9,53 @@ on:
   workflow_dispatch:
 
 jobs:
-  build:
-    name: "Validate build"
-    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+  lint:
+    name: "Linter: eslint, stylelint"
     runs-on: ubuntu-latest
-    permissions:
-      pull-requests: "write"
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: 1
 
-      - uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Boot (build packages)
-        run: yarn boot
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
       - name: Lint
         run: yarn lint
 
+  validate-examples:
+    name: "Validate Aksel.nav.no component examples"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+
       - name: Validate example code
         run: yarn validate:eksempler
 
+  test:
+    name: "Unit tests"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+
       - name: Test
         run: yarn test

.github/workflows/e2e-optimized.yml

@@ -0,0 +1,39 @@
+name: E2E / Playwright Tests
+on:
+  push:
+    branches: [main, next]
+    paths:
+      - "aksel.nav.no/**"
+  pull_request:
+    branches: [main, next]
+    paths:
+      - "aksel.nav.no/**"
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.1-jammy
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup and build Next.js application
+        uses: ./.github/actions/build-website
+        with:
+          use_cdn_assets: false
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+          nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          sanity_read_token: ${{ secrets.SANITY_READ }}
+          sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
+
+      - name: Run Playwright tests
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
+
+        run: yarn workspace website e2e:ci-full

.github/workflows/e2e.yml

@@ -1,50 +0,0 @@
-name: E2E / Playwright Tests
-on:
-  push:
-    branches: [main, next]
-    paths:
-      - "aksel.nav.no/**"
-  pull_request:
-    branches: [main, next]
-    paths:
-      - "aksel.nav.no/**"
-
-jobs:
-  playwright:
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.35.1-jammy
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build packages
-        run: |
-          yarn boot
-
-      - name: Build application
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: yarn workspace aksel.nav.no build:next
-
-      - name: Run Playwright tests
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: yarn workspace website e2e:ci-full
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: aksel.nav.no/website/playwright-report/
-          retention-days: 10

.github/workflows/figma-config.yml

@@ -25,12 +25,12 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Install dependencies
         run: yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Build tokens
         run: yarn workspace @navikt/ds-tokens build

.github/workflows/referansesider-spa-deploy.yml

@@ -15,16 +15,16 @@ jobs:
       id-token: "write"
 
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          node-version: lts/*
-          cache: yarn
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
-      - run: yarn install
-        env:
-          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
-      - run: yarn boot
       - run: cd ./examples/referansesider && yarn && yarn build
       - uses: nais/deploy/actions/spa-deploy/v2@master
         with:
@@ -35,3 +35,4 @@ jobs:
           environment: dev
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          cache_invalidation: true

.github/workflows/release.yml

@@ -30,9 +30,7 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - uses: denoland/setup-deno@v1
         with:
@@ -40,6 +38,8 @@ jobs:
 
       - name: Install dependencies
         run: yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Create release Pull Request or publish to NPM
         id: changesets
@@ -78,7 +78,7 @@ jobs:
         if: steps.changesets.outputs.published == 'true'
         run: yarn zip:icons
 
-      - name: Upload updated icon.zip to NAV CDN
+      - name: Upload updated icon.zip to Nav CDN
         if: steps.changesets.outputs.published == 'true'
         uses: nais/deploy/actions/cdn-upload/v2@master
         with:
@@ -94,7 +94,7 @@ jobs:
           echo "version=$VERSION" >> $GITHUB_ENV
           echo "Version of @navikt/ds-css: ${{ env.version }}"
 
-      - name: Upload CSS to NAV CDN
+      - name: Upload CSS to Nav CDN
         if: steps.changesets.outputs.published == 'true'
         uses: nais/deploy/actions/cdn-upload/v2@master
         with:

.github/workflows/update-article-views.yml

@@ -18,6 +18,7 @@ jobs:
           dockerfile: scripts/article-views/Dockerfile.update-article-views
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+
       - name: start naisjob prod-gcp
         uses: nais/deploy/actions/deploy@master
         env:

.husky/post-checkout

@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff $1 $2 --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi

.husky/post-merge

@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff HEAD@{1} --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn lint-staged
+yarn lint-staged && yarn tsx ./scripts/in-sync-versions.ts

.storybook/docs/PilotMigration.mdx

@@ -0,0 +1,112 @@
+import { Markdown, Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/3.Migration" />
+
+# Migration
+
+## Tokens
+
+[See tokens docs here](https://main--66b4b3beb91603ed0ab5c45e.chromatic.com/?path=/docs/docs-become-a-pilot-team-4-tokens--docs).
+
+## CSS
+
+- Most of our CSS is re-written. This could potentially affect most custom overrides targeting `.navds`-classes.
+- You will not be able to use the old CSS and the new CSS at the same time.
+
+As we strongly recommend avoiding custom
+overrides where possible, we would like to encourage opening an
+issue if you find that you have to override our CSS to achieve
+something! It's these cases we want to know about so that we can fix
+them for everyone.
+
+### Removed component-tokens
+
+All component-spesific tokens are no longer supported. That means all tokens like these from `Button` are removed:
+
+```css
+--ac-button-primary-bg
+--ac-button-primary-text
+--ac-button-primary-hover-bg
+--ac-button-primary-active-bg
+```
+
+All component-based tokens are prefixed with `--ac`, so a global search in your codebase should find all of them.
+
+## Tailwind CSS
+
+Since our Tailwind CSS config is tied to our tokens, most changes made to the tokens will affect the Tailwind CSS config.
+We have decided to prefix all our classes with `ax-` in the new config, so it should be possible to use both packages at the same time. We will develop tooling to hopefuly make the migrations easier in the future.
+
+### Removed classes
+
+z-index, maxWidth and spacing classes are removed from the new config.
+
+## React
+
+We have made some updates to `@navikt/ds-react` that you should be aware of before testing.
+
+### Accordion
+
+#### Props
+
+- `variant` is deprecated and will be removed in the future. We have not implemented it in the new system.
+- `headingSize` is deprecated and will be removed in the future. Accordion-size medium now equals `small` heading, and size small equals `xsmall` heading.
+
+#### Structural changes
+
+`<Accordion.Content/>` now has an extra nested `div` to allow for better animations. Custom CSS might break.
+
+### Datepicker
+
+Weeknumber-button uses our own button-component, and no longer a
+custom button.
+
+### GuidePanel
+
+Component got a complete overhaul. Custom overrides might break.
+
+### Popover, HelpText
+
+`arrow`-prop is removed. All of our floating dialog-elements except for `Tooltip` now comes without arrow.
+If you have custom `offset`-values, you might have to update them to accommodate this.
+
+### Pagination
+
+Button now uses our own button-component and `variant="tertiary-neutral".
+
+### Primitives
+
+Given that these are closely tied to our tokens, you will most
+likely have to update parts of them to test the new system.
+
+All primitives using our current `spacing`-tokens now has
+the new <code>space</code>-tokens. You can use the old tokens while
+testing, but the full release will remove them from the prop-list
+
+<Markdown>
+{`
+\`\`\`diff
+- <HStack gap="4">
++ <HStack gap="space-16">
+\`\`\`
+
+`}
+
+</Markdown>
+
+#### Page
+
+`background`-prop is removed. Now just uses `bg-default`-token.
+
+#### Box
+
+Since `<Box />` is directly tied to our tokens, we
+now offer `<Box.New />` as a temporary altenative. This
+component is based on our new tokens and can use the backgrounds,
+borders, border-radius and shadows from the new system. When the full release comes, we will update `<Box />` to use the new system, and provide tooling to handle this migration.
+
+**All instances of `<Box />` will break when using the new system if:**
+
+- `background`-prop is used
+- `shadow`-prop is used
+- `borderColor`-prop is used

.storybook/docs/PilotSetup.mdx

@@ -0,0 +1,128 @@
+import { Markdown, Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/2.Setup" />
+
+# Setup
+
+## Clean project
+
+For new projects, setup is just as easy as before, but now requires a `Theme`-component to be wrapped around your app.
+The component acts as a local feature-flag for the new implementation, with the added benefit of being able to switch between light and dark mode for you.
+
+Steps:
+
+- 1. Import new CSS `@navikt/ds-css/darkside`
+- 2. Import `Theme`-component from `@navikt/ds-react/Theme`
+- 3. Wrap your app in the `Theme`-component. You do not have to set the theme, but it defaults to `light`.
+
+```tsx
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react/Theme";
+
+export const App = () => (
+  <Theme theme="light">
+    <YourApp />
+  </Theme>
+);
+```
+
+### Only Tokens/CSS
+
+If you are not using any of our React-components, you can still switch between themes by setting `class="light"` or `class="dark"` on your root-element.
+
+## Theme switching
+
+The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `navds-theme` class), and the rest is handled by the CSS.
+
+You have the option of using `hasBackground` (defaults to true) to make `Theme` include a built on default background.
+
+Since theme-switching often is framework-spesific, we have not included a theme-toggle component or advanced logic for cookies/localstorage.
+You will have to implement this yourself using a custom setup, or use a library like [next-themes](https://github.com/pacocoursey/next-themes).
+
+We will continue to work on the whole `Theme` ecosystem, and might include more features in the future to handle this built in.
+
+### Theme-switch component
+
+This is context-based for what fits your application, but there are some general patterns you can follow.
+
+- **Light or Dark-mode**: Here you can use a simple Switch-component, or a Tertiary-button to toggle between them.
+
+- **Light, Dark or System-mode**: Here you can use a ToggleGroup or Select-component.
+
+```tsx
+isLightMode ? (
+  <Button
+    variant="tertiary-neutral"
+    icon={<SunIcon title="Switch to dark theme" />}
+  />
+) : (
+  <Button
+    variant="tertiary-neutral"
+    icon={<MoonIcon title="Switch to light theme" />}
+  />
+);
+```
+
+## I just want to test the new tokens
+
+Since you can use the new tokens alongside the old tokens, you can start by importing the new tokens as you would the old system.
+
+```css
+@import "@navikt/ds-tokens/darkside-css";
+```
+
+For SCSS, Less and JS they are also available under the paths
+
+```
+@navikt/ds-tokens/darkside-scss
+@navikt/ds-tokens/darkside-less
+@navikt/ds-tokens/darkside-js
+```
+
+**Note: To support theming, scss, less and js tokens are all now based on `css-variables`. This means you will have to import the css-version from `darkside-css` alongside them for everything to work.**
+
+## I want to test the new React-changes
+
+For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `ds-css/darkside`
+
+```tsx
+import "@navikt/ds-css/darkside;";
+import { Theme } from "@navikt/ds-react/Theme";
+
+export const App = () => (
+  <Theme theme="light">
+    <YourApp />
+  </Theme>
+);
+```
+
+You will not be able to use the old CSS and the new CSS at the same time.
+You will have to check on all your custom overrides when making this switch.
+
+## I have to make some custom changes in darkmode
+
+Since our implementation is based on CSS, you can easily make custom adjustments where necessary.
+
+```css
+.my-component {
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-neutral);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+}
+
+// Makes hover-state more visible only for darkmode
+.dark .my-component {
+  &:hover {
+    border-color: var(--ax-border-accent-default);
+  }
+}
+```
+
+## Tailwind CSS
+
+```
+// Tailwind v3
+module.exports = {
+  presets: [require("@navikt/ds-tailwind/darkside-tw3")],
+}
+```

.storybook/docs/PilotsChangelog.mdx

@@ -0,0 +1,7 @@
+import { Meta, Title } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/5.Changelog" />
+
+# Darkside changelog
+
+Nothing to see here yet.

.storybook/docs/PilotsIntro.mdx

@@ -0,0 +1,95 @@
+import { Meta, Title } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/1.Intro" />
+
+# Becoming a pilot team
+
+We are looking for teams wanting to test our new theming implementation and darkmode before we go live with them later in 2025.
+
+## What is a pilot team?
+
+- A pilot team is a team that tests new implementations before they are released.
+- The team will test the new implementation in a real-world scenario and provide us with feedback.
+- The feedback will be used to improve the implementation before it replaces the old system.
+
+As a pilot team, we want close communication to get
+feedback on the changes. We want to know all the unclear and bad parts
+of our implementations, so that we can fix them all up before the big release.
+
+## Who are we mainly looking for?
+
+We are focusing on applications meant for our internal systems and services for now. This line is often a little blurry,
+but in short, all the public facing applications including those using "Dekoratøren" will not be considered internal.
+Support for "Dekoratøren" is quite far down the road at the moment.
+
+For teams wanting to test the new implementation, there are some key points to consider:
+
+- You _probably_ want to be in the earlier stages of developing a new product or service (to more easily test something in isolation).
+- You can test _any_ smaller subset of the new system as it's not an "all or nothing" ordeal. This could be: design tokens, darkmode, updated CSS or a combination of these.
+- You have the capacity to test and provide feedback on the new implementation (You'll be saving Nav countless hours for every hour spent!).
+
+Everyone is welcome to test the new implementation, but for some larger applications, it might be a bit early to adopt the new system. Keep in mind that there might be breaking changes as we go,
+and we won't have all tooling ready for adoption yet so you might have to do some manual work.
+
+## How to give feedback
+
+We welcome all forms of feedback:
+
+- **Issues**: [Open an issue on Github](https://github.com/navikt/aksel/issues)
+- **Disussions**: [Start a discussion](https://github.com/navikt/aksel/discussions/categories/darkside).
+- **Slack**: [Reach out to us on Slack #Aksel-designsystemet](https://nav-it.slack.com/archives/C7NE7A8UF)
+
+## What's new?
+
+- **Design tokens**: A complete re-write of our design tokens to allow for dark mode.
+- **Dark mode**: A new dark mode implementation.
+- **Updated CSS**: Now uses new tokens, built-in CSS-layers support and most components are re-written.
+- **Updated Tailwind CSS config**: Now uses new tokens, now comes with built-in `ax`-prefix for easier separation between Aksel and your own config.
+- **Updated components**: Components use the new tokens and CSS.
+- **New Theme-component**: A new `<Theme/>`-component to handle the theming-switch locally.
+- **Updated documentation**: Updated documentation for the new implementation.
+
+## Documentation
+
+As we go, we will add more documentation to help you get started with the new implementation.
+
+- [Design i light og dark-mode](https://aksel.nav.no/god-praksis/artikler/design-i-dark-mode-og-light-mode)
+
+### Demo page
+
+We have a demo page to show off some of the new features and tokens. [You can find it here](https://aksel-referansesider.ansatt.dev.nav.no/aktivitetsplan/).
+We recommend using "inspect-tool" in browser to get a feel for the new tokens and CSS.
+
+## How testing could affect your application
+
+All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all-in.
+You will still be able to recieve updates to the old implementation while we are in the testing phase.
+
+### Tokens
+
+We have made a complete re-write of our design tokens to allow for dark mode.
+This includes new backgrounds, text-colors, border-colors and updated spacing-tokens.
+
+- All tokens have a new prefix `--ax` to avoid conflicts with old tokens.
+- You will be able to use the new tokens at the same time as the old tokens.
+- All background, text-colors and border-colors have new names and "concepts" to learn. Migration will not be a quick one to one with old system.
+- New spacing tokens are now named `space` and based on `px` values (most devs think and deal in `px` values first, no more on-the-fly mental arithmetic! WYSIWYG).
+
+### CSS
+
+We have updated our CSS to be based on the new tokens for theming.
+
+- Most of our CSS is re-written.
+- All custom overrides targeting `.navds`-classes might have to be updated locally.
+- You will not be able to use the old CSS and the new CSS at the same time.
+- Component-based tokens are no longer avaliable.
+
+### Tailwind CSS
+
+We have made a new Tailwind CSS config based on the new tokens. Based on previous iterations, we have decided to try prefixing all our classes with `ax-`.
+While this will be a little more verbose, it makes it easier to separate your own config from ours, and hopefully makes it easier to maintain.
+
+### React components
+
+We have made some prop-changes to some components to facilitate the new theming and updated CSS. You can read more about them under `migration` in the sidebar.
+We have hidden the changes behind a "feature-flag", so you will have to use the new `<Theme/>`-component when testing the new CSS.

.storybook/docs/PilotsTokens.mdx

@@ -0,0 +1,193 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/4.Tokens" />
+
+# Tokens
+
+## Spacing scale
+
+We have updated our spacing-scale to now be named `space` and for the values to reflect 1-1 the px-value.
+To migrate old `--a-spacing-X`-tokens, you can just take the value and 4x it to get the new `--ax-space-X`-token.
+
+```diff
+// Old
+--a-spacing-4: 1rem;
+
+// New
+--ax-space-16: 1rem;
+```
+
+```css
+--ax-space-0: 0rem;
+--ax-space-1: 0.0625rem;
+--ax-space-2: 0.125rem;
+--ax-space-4: 0.25rem;
+--ax-space-6: 0.375rem;
+--ax-space-8: 0.5rem;
+--ax-space-12: 0.75rem;
+--ax-space-16: 1rem;
+--ax-space-20: 1.25rem;
+--ax-space-24: 1.5rem;
+--ax-space-28: 1.75rem;
+--ax-space-32: 2rem;
+--ax-space-36: 2.25rem;
+--ax-space-40: 2.5rem;
+--ax-space-44: 2.75rem;
+--ax-space-48: 3rem;
+--ax-space-56: 3.5rem;
+--ax-space-64: 4rem;
+--ax-space-72: 4.5rem;
+--ax-space-80: 5rem;
+--ax-space-96: 6rem;
+--ax-space-128: 8rem;
+```
+
+## Global tokens
+
+Our global colors are Neutral, Accent, Success, Info, Warning, Danger, Brand-magenta, Brand-beige, Brand-blue, Meta-purple and Meta-lime.
+
+Beside `neutral` that has a `000`-token,
+all other color-tokens are named after the following pattern:
+
+```css
+--ax-[role]-000 // Neutral only
+--ax-[role]-100
+--ax-[role]-100A
+--ax-[role]-200
+--ax-[role]-200A
+--ax-[role]-300
+--ax-[role]-300A
+--ax-[role]-400
+--ax-[role]-400A
+--ax-[role]-500
+--ax-[role]-600
+--ax-[role]-700
+--ax-[role]-800
+--ax-[role]-900
+--ax-[role]-1000
+```
+
+## Semantic tokens
+
+We have two sets of semantic tokens, one for unique cases and one for all the roles.
+
+```css
+// Unique tokens
+--ax-bg-default   // Main page background.
+--ax-bg-input     // Background for input-fields.
+--ax-bg-overlay   // Background for overlays like Modal.
+--ax-bg-sunken    // Background for sunken sections to highlight ex. Cards.
+--ax-bg-raised    // Background for raised elements, like cards or dialogs.
+--ax-text-logo    // Nav-logo color.
+--ax-border-focus // Outline-color for focus-states.
+```
+
+For the remaning tokens, they are equal between all the global roles. This means that if you know the token for one role, you know it for all the roles.
+
+```css
+// Backgrounds
+
+// Soft is used for subtle backgrounds without state.
+--ax-bg-[role]-soft
+--ax-bg-[role]-softA
+
+// Moderate is used for subtle elements, with the option for states.
+// Should be used with a border in most cases to separate from the background.
+// Think Secondary-buttons, Alerts
+--ax-bg-[role]-moderate
+--ax-bg-[role]-moderateA
+--ax-bg-[role]-moderate-hover
+--ax-bg-[role]-moderate-hoverA
+--ax-bg-[role]-moderate-pressed
+--ax-bg-[role]-moderate-pressedA
+
+// Strong is used for elements that should stand out, with the option for states.
+// Think Primary-buttons, Checkbox, Chips
+// Text on strong should use contrast version of the color.
+--ax-bg-[role]-strong
+--ax-bg-[role]-strong-hover
+--ax-bg-[role]-strong-pressed
+
+// Text
+--ax-text-[role]
+--ax-text-[role]-subtle
+--ax-text-[role]-icon
+--ax-text-[role]-contrast
+
+// Borders
+--ax-border-[role]
+--ax-border-[role]-subtle
+--ax-border-[role]-subtleA
+--ax-border-[role]-strong
+```
+
+### Example use
+
+```css
+.alert--success {
+  background-color: var(--ax-bg-success-moderate);
+  border: var(--ax-border-success);
+}
+
+.alert--info {
+  background-color: var(--ax-bg-info-moderate);
+  border: var(--ax-border-info);
+}
+```
+
+## Shadows
+
+We now have only one shadow-token:
+
+```css
+--ax-shadow-dialog
+```
+
+## Z-index
+
+We have removed the `--a-z-index`-tokens.
+
+## Font-tokens, breakpoints etc
+
+The remaining tokens are kept the same as the old system, but now with updated prefix.
+
+```css
+--ax-font-weight-regular
+--ax-font-weight-bold
+--ax-font-size-small
+--ax-font-size-medium
+--ax-font-size-large
+--ax-font-size-xlarge
+--ax-font-size-heading-xsmall
+--ax-font-size-heading-small
+--ax-font-size-heading-medium
+--ax-font-size-heading-large
+--ax-font-size-heading-xlarge
+--ax-font-size-heading-2xlarge
+--ax-font-line-height-medium
+--ax-font-line-height-large
+--ax-font-line-height-xlarge
+--ax-font-line-height-heading-xsmall
+--ax-font-line-height-heading-small
+--ax-font-line-height-heading-medium
+--ax-font-line-height-heading-large
+--ax-font-line-height-heading-xlarge
+--ax-font-line-height-heading-2xlarge
+--ax-font-family
+--ax-breakpoint-2xl-down
+--ax-breakpoint-2xl
+--ax-breakpoint-xl-down
+--ax-breakpoint-xl
+--ax-breakpoint-lg-down
+--ax-breakpoint-lg
+--ax-breakpoint-md-down
+--ax-breakpoint-md
+--ax-breakpoint-sm-down
+--ax-breakpoint-sm
+--ax-breakpoint-xs
+--ax-border-radius-full
+--ax-border-radius-xlarge
+--ax-border-radius-large
+--ax-border-radius-medium
+--ax-border-radius-small
+```

.storybook/docs/getting-started.mdx

@@ -4,14 +4,14 @@ import AkselThumbnail from "./assets/aksel-thumbnail.png";
 import Components from "./assets/components.png";
 import Setup from "./assets/setup.png";
 
-<Meta title="Getting started" />
+<Meta title="Docs/Getting started" />
 
 <div className="sb-container">
   <div className='sb-section-title'>
 
     # Getting started
 
-    Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@NAV</a> (Norwegian Labour and Welfare Administration)
+    Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@Nav</a> (Norwegian Labour and Welfare Administration)
 
     This includes a designsystem, best practices for product-development, principles for user-experience and a blog. <a href="https://aksel.nav.no/god-praksis/artikler/om-aksel" target="_blank">
     Read more about Aksel.</a>
@@ -30,7 +30,7 @@ import Setup from "./assets/setup.png";
         target="_blank"
         className="sb-link"
       >Website</a></h3>
-      <p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for NAV today.</p>
+      <p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for Nav today.</p>
 
     </div>
     <div className="sb-section-item">
@@ -136,34 +136,34 @@ import Setup from "./assets/setup.png";
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-gap: var(--a-spacing-6);
+    grid-gap: 1.5rem;
   }
 
   .sb-link{
     text-decoration: underline;
-    color: var(--a-text-default);
+    color: #111;
   }
 
   img {
     object-fit: cover;
-    padding-bottom: var(--a-spacing-5);
+    padding-bottom: 1.25rem;
     border-radius: 8px;
   }
 
   .sb-section-title {
-    margin-bottom: var(--a-spacing-8);
+    margin-bottom: 2rem;
   }
 
 
 
   .sb-section-item-heading {
-    padding-bottom: var(--a-spacing-1);
+    padding-bottom: 0.25rem
     margin: 0 !important;
   }
 
   .sb-section-item-paragraph {
     margin: 0;
-    padding-bottom: var(--a-spacing-3);
+    padding-bottom: 0.75rem;
   }
 
   @media screen and (max-width: 768px) {

.storybook/layout.css

@@ -19,3 +19,15 @@
 .rowgap-wrap {
   flex-wrap: wrap;
 }
+
+.sbdocs-content:not(.sb-unstyled) :is(p, li) {
+  font-size: 1.125rem;
+}
+
+.sbdocs-content:not(.sb-unstyled) li > p {
+  margin-bottom: 0;
+}
+
+.sbdocs-content:not(.sb-unstyled) li > ul {
+  margin-top: 0.25rem;
+}

.storybook/main.ts

@@ -46,13 +46,14 @@ export default {
   staticDirs: ["./public"],
   stories: () => [
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-    "./*.mdx",
+    "./docs/*.mdx",
+    "./docs/*.stories.tsx",
     "../aksel.nav.no/website/pages/templates/**/*.tsx",
   ],
   addons: [
     "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes",
     {
       name: "@storybook/addon-storysource",
       options: {
@@ -70,7 +71,11 @@ export default {
         },
       },
     },
-    "storybook-addon-pseudo-states",
+    /**
+     * https://github.com/chromaui/storybook-addon-pseudo-states/issues/101
+     * Currently disabled to avoid interference with darkmode update
+     */
+    /* "storybook-addon-pseudo-states", */
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.jsx

@@ -1,59 +0,0 @@
-import React from "react";
-import "@navikt/ds-css/index.css";
-import "./layout.css";
-
-export const parameters = {
-  options: {
-    storySort: {
-      method: "alphabetical",
-      order: [
-        "Getting started",
-        "ds-react",
-        ["Primitives"],
-        ["Default", "Controls"],
-        "Aksel-icons",
-      ],
-    },
-  },
-  layout: "centered",
-  backgrounds: {
-    values: [
-      {
-        name: "Canvas",
-        value: "#ffffff",
-      },
-      {
-        name: "Darkmode",
-        value: "#23262a",
-      },
-    ],
-  },
-};
-
-export const globalTypes = {
-  theme: {
-    name: "Theme",
-    toolbar: {
-      icon: "circlehollow",
-      items: [
-        { value: "light", icon: "circlehollow", title: "light" },
-        { value: "dark", icon: "circle", title: "dark" },
-      ],
-      showName: true,
-    },
-  },
-};
-
-export const withTheme = (StoryFn, context) => {
-  return (
-    <div
-      data-theme={context.parameters.theme || context.globals.theme || "light"}
-      lang="no"
-      id="root"
-    >
-      <StoryFn />
-    </div>
-  );
-};
-
-export const decorators = [withTheme];

.storybook/preview.tsx

@@ -0,0 +1,127 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { Preview } from "@storybook/react";
+import React, { useLayoutEffect } from "react";
+// @ts-expect-error - Temporary
+import darksideCss from "../@navikt/core/css/darkside/index.css?inline";
+// @ts-expect-error - Temporary
+import defaultCss from "../@navikt/core/css/index.css?inline";
+import { Provider } from "../@navikt/core/react/src/provider";
+import { Theme } from "../@navikt/core/react/src/theme";
+import en from "../@navikt/core/react/src/util/i18n/locales/en";
+import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
+import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
+import "./layout.css";
+
+const ModeDecorator = ({ children, mode, theme }) => {
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
+    document.head.appendChild(style);
+
+    if (mode === "darkside") {
+      document.body.style.setProperty("background", "var(--ax-bg-default)");
+    }
+
+    return () => {
+      document.head.removeChild(style);
+      document.body.style.removeProperty("background");
+    };
+  }, [mode]);
+
+  return mode === "darkside" ? (
+    <Theme theme={theme || undefined} hasBackground={false}>
+      {children}
+    </Theme>
+  ) : (
+    children
+  );
+};
+
+const translations = {
+  nb,
+  nn,
+  en,
+};
+
+const LanguageDecorator = ({ children, language }) => {
+  if (language) {
+    return (
+      <Provider translations={translations[language]}>{children}</Provider>
+    );
+  }
+  return children;
+};
+
+export default {
+  parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [
+          "Docs",
+          ["Getting started"],
+          "ds-react",
+          ["Primitives"],
+          ["Default", "Controls"],
+          "Aksel-icons",
+        ],
+      },
+    },
+    layout: "centered",
+    backgrounds: { disable: true },
+  },
+
+  globalTypes: {
+    mode: {
+      name: "Darkside",
+      toolbar: {
+        items: [
+          {
+            value: "default",
+            icon: "hourglass",
+            title: "Legacy theme",
+          },
+          { value: "darkside", icon: "beaker", title: "Darkside theme" },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+    language: {
+      toolbar: {
+        icon: "globe",
+        items: [
+          { value: undefined, title: "Unset" },
+          { value: "nb", right: "🇳🇴", title: "Norsk bokmål" },
+          { value: "nn", right: "🇳🇴", title: "Norsk nynorsk" },
+          { value: "en", right: "🇬🇧", title: "English" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    mode: "default",
+  },
+
+  decorators: [
+    (StoryFn, context) => (
+      <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
+        <StoryFn />
+      </ModeDecorator>
+    ),
+    (StoryFn, context) => (
+      <LanguageDecorator language={context.globals.language}>
+        <StoryFn />
+      </LanguageDecorator>
+    ),
+    withThemeByClassName({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+} satisfies Preview;

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
-  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "cssVariables.lookupFiles": [
+    "@navikt/core/tokens/dist/tokens.css",
+    "@navikt/core/tokens/dist/darkside/tokens.css"
+  ],
   "eslint.problems.shortenToSingleLine": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.watcherExclude": {

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @navikt/aksel-icons
 
+## 7.14.3
+
+## 7.14.2
+
+## 7.14.1
+
+## 7.14.0
+
+### Minor Changes
+
+- Icons: :tada: New icons `LineHeight`, `SpaceHorizontal` and `SpaceVertical`. ([#3587](https://github.com/navikt/aksel/pull/3587))
+
+## 7.13.0
+
+### Minor Changes
+
+- Icons: :tada: New icons `ExpandVertical` and `QuestionmarkCircle` ([#3583](https://github.com/navikt/aksel/pull/3583))
+
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+### Minor Changes
+
+- Icons: Added new icons 'SortUp' and 'SortDown' 🎉. ([#3528](https://github.com/navikt/aksel/pull/3528))
+
+## 7.10.0
+
+## 7.9.2
+
+## 7.9.1
+
+## 7.9.0
+
+## 7.8.1
+
+## 7.8.0
+
+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
+
+## 7.5.3
+
+## 7.5.2
+
+## 7.5.1
+
+## 7.5.0
+
+### Minor Changes
+
+- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
+
+## 7.4.3
+
+## 7.4.2
+
+## 7.4.1
+
+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
+## 7.2.1
+
+## 7.2.0
+
 ## 7.1.2
 
 ## 7.1.1

@navikt/aksel-icons/README.md

@@ -1,6 +1,6 @@
 # Aksel icons
 
-800+ open source icons made by Aksel, NAVs designsystem-team
+800+ open source icons made by Aksel, Nav's design system team.
 
 - Designed for 24x24px
 - Available in React and SVG
@@ -30,7 +30,7 @@ Tip: Use the `title` prop for accessible icons.
 
 ### Sizing
 
-Each icons `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.
+Each icon's `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for the best possible visual representation.
 
 ```jsx
 <StarIcon fontSize="1.5rem" />

@navikt/aksel-icons/__tests__/figma.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+import { splitIntoParts } from "../config/figma/fetch-icons";
+
+describe("splitIntoParts", () => {
+  test("should split array into parts correctly with odd count array", () => {
+    const arr = ["a", "b", "c", "d", "e"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e"]);
+  });
+
+  test("should split array into parts correctly with even count array", () => {
+    const arr = ["a", "b", "c", "d", "e", "f"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e,f"]);
+  });
+});

@navikt/aksel-icons/__tests__/validate-config.test.ts

@@ -1,9 +1,9 @@
-/* eslint-disable import/no-named-as-default-member */
 import fastglob from "fast-glob";
 import fs from "fs";
-import jsYaml from "js-yaml";
+import { JSON_SCHEMA, load } from "js-yaml";
 import path from "path";
 import { describe, expect, test } from "vitest";
+import { IconYml } from "../config/figma/make-configs";
 
 const basePath = path.resolve(__dirname, "../icons");
 
@@ -14,9 +14,10 @@ const ymlList = fastglob
 describe(`Each icons YML-config is valid`, () => {
   ymlList.forEach((file) => {
     test(`${file} has valid YML-config`, () => {
-      const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
-        schema: jsYaml.JSON_SCHEMA,
-      });
+      const ymlData = load(fs.readFileSync(`${basePath}/${file}`).toString(), {
+        schema: JSON_SCHEMA,
+      }) as IconYml;
+
       expect(ymlData.name).toBeTruthy();
       expect(ymlData.category).toBeTruthy();
       expect(ymlData.sub_category).toBeTruthy();
@@ -31,7 +32,7 @@ describe(`Each icons YML-config is valid`, () => {
   });
 });
 
-function isDate(dateStr) {
+function isDate(dateStr: string) {
   return !Number.isNaN(
     new Date(dateStr.split(".").reverse().join(".")).getDate(),
   );

@navikt/aksel-icons/__tests__/validate-svg.test.ts

@@ -21,8 +21,7 @@ describe(`Each icons has a valid code`, () => {
 
       test(`has valid attributes on root-node`, () => {
         const root = select(":root", iconAst);
-        const properties =
-          root && root.properties ? Object.keys(root.properties).sort() : [];
+        const properties = Object.keys(root?.properties ?? []).sort();
 
         expect(properties).toStrictEqual(
           ["viewBox", "xmlns", "height", "width", "fill"].sort(),
@@ -31,45 +30,41 @@ describe(`Each icons has a valid code`, () => {
 
       test(`has valid xml-attr`, () => {
         const root = select(":root", iconAst);
-        const xmlns = root && root.properties ? root.properties.xmlns : null;
-        expect(xmlns).toBe("http://www.w3.org/2000/svg");
+        expect(root?.properties?.xmlns).toBe("http://www.w3.org/2000/svg");
       });
 
       test(`has valid viewbox`, () => {
         const root = select(":root", iconAst);
-        const viewbox =
-          root && root.properties ? root.properties.viewBox : null;
-        expect(viewbox).toBe("0 0 24 24");
+        expect(root?.properties?.viewBox).toBe("0 0 24 24");
       });
 
       test(`root fill is none`, () => {
         const root = select(":root", iconAst);
-        const fill = root && root.properties ? root.properties.fill : null;
-        expect(fill).toBe("none");
+        expect(root?.properties?.fill).toBe("none");
       });
 
       test(`has valid width and height`, () => {
         const root = select(":root", iconAst);
-        const width = root && root.properties ? root.properties.width : null;
-        const height = root && root.properties ? root.properties.height : null;
-        expect(width).toBe("24");
-        expect(height).toBe("24");
+        expect(root?.properties?.width).toBe("24");
+        expect(root?.properties?.height).toBe("24");
       });
 
       test(`has valid stroke`, () => {
         const nodes = selectAll("*", iconAst);
 
         nodes.forEach((n) => {
-          n.properties?.stroke &&
+          if (n.properties?.stroke) {
             expect(n.properties.stroke).toEqual("#23262A");
+          }
         });
       });
 
       test(`has valid stroke-width`, () => {
         const nodes = selectAll("*", iconAst);
         nodes.forEach((n) => {
-          n.properties?.strokeWidth &&
+          if (n.properties?.strokeWidth) {
             expect(n.properties?.strokeWidth).toEqual("1.5");
+          }
         });
       });
     });

@navikt/aksel-icons/config/figma/fetch-icons.mjs

@@ -1,58 +0,0 @@
-const file_key = "wEdyFjCQSBR3U7FvrMbPXa";
-
-export const fetchIcons = async () => {
-  const data = await fetch(
-    `https://api.figma.com/v1/files/${file_key}/components`,
-    {
-      headers: {
-        "Content-type": "application/json",
-        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-      },
-    },
-  )
-    .then((x) => x.json())
-    .catch((e) => {
-      throw e.message;
-    });
-
-  if (!data?.meta?.components || data?.meta?.components.length === 0) {
-    throw new Error("Fant ingen publiserte ikoner");
-  }
-
-  return data?.meta?.components;
-};
-
-export const fetchDownloadUrls = async (idArray) => {
-  const urls = { images: null };
-
-  for (let ids of idArray) {
-    await fetch(
-      `https://api.figma.com/v1/images/${file_key}/?ids=${ids}&format=svg`,
-      {
-        headers: {
-          "Content-type": "application/json",
-          "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-        },
-      },
-    )
-      .then((x) => x.json())
-      .then((x) => {
-        urls.images = {
-          ...urls.images,
-          ...x.images,
-        };
-      })
-      .catch((e) => {
-        throw e.message;
-      });
-  }
-  return urls;
-};
-
-export const fetchIcon = async (url) => {
-  return await fetch(url)
-    .then((x) => x.text())
-    .catch((e) => {
-      throw e.message;
-    });
-};

@navikt/aksel-icons/config/figma/fetch-icons.ts

@@ -0,0 +1,114 @@
+import {
+  BadRequestErrorResponseWithErrMessage,
+  ErrorResponsePayloadWithErrMessage,
+  GetFileComponentsResponse,
+  GetImagesResponse,
+  PublishedComponent,
+} from "@figma/rest-api-spec";
+
+/* https://www.figma.com/developers/api#library-items */
+const FIGMA_FILE_KEY = "wEdyFjCQSBR3U7FvrMbPXa";
+
+export const fetchIcons = async (): Promise<PublishedComponent[]> => {
+  console.group("Fetching list of published icons from Figma...");
+  const data:
+    | GetFileComponentsResponse
+    | BadRequestErrorResponseWithErrMessage = await fetch(
+    `https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/components`,
+    {
+      headers: {
+        "Content-type": "application/json",
+        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+      },
+    },
+  )
+    .then((x) => x.json())
+    .catch((e) => {
+      throw e.message;
+    });
+
+  if (data.status !== 200) {
+    throw new Error(data.err);
+  }
+
+  if (data.meta.components.length === 0) {
+    throw new Error("No published icons found");
+  }
+
+  /* Filtes out any 'random' icons not meant for the icon-library */
+  const validIcons = data.meta.components.filter((icon) => {
+    const validIcon =
+      !!icon.containing_frame?.pageName && !!icon.containing_frame?.name;
+
+    if (!validIcon) {
+      console.warn(`Ignoring icon '${icon.name}' as it is missing metadata`);
+    }
+    return validIcon;
+  });
+
+  console.info(
+    `Found ${validIcons.length} published icons in Figma. ${
+      data.meta.components.length - validIcons.length
+    } icons were ignored due to missing metadata.`,
+  );
+
+  console.groupEnd();
+
+  return validIcons;
+};
+
+export const fetchDownloadUrls = async (
+  nodeIds: string[],
+): Promise<Record<string, string>> => {
+  /* Would just using Record be better here? Yes. But is a self-referencing return kinda cool? Also yes */
+  const idUrlPairs: Awaited<ReturnType<typeof fetchDownloadUrls>> = {};
+
+  /* Figma accepts a comma-separated list of ids: GET /v1/images/:key?ids=1:2,1:3,1:4 */
+  const paginatedNodeIds = splitIntoParts(nodeIds, 5);
+
+  for (const ids of paginatedNodeIds) {
+    const data: GetImagesResponse | ErrorResponsePayloadWithErrMessage =
+      await fetch(
+        `https://api.figma.com/v1/images/${FIGMA_FILE_KEY}/?ids=${ids}&format=svg`,
+        {
+          headers: {
+            "Content-type": "application/json",
+            "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+          },
+        },
+      )
+        .then((x) => x.json())
+        .catch((e) => {
+          throw e.message;
+        });
+
+    if (data.err !== null) {
+      throw new Error(data.err);
+    }
+
+    for (const [key, value] of Object.entries(data.images)) {
+      if (!value) {
+        console.warn(`No image found for ${key}`);
+        continue;
+      }
+      idUrlPairs[key] = value;
+    }
+  }
+  return idUrlPairs;
+};
+
+/**
+ * Splits an array of strings into parts where each part is a comma-separated string of all the strings for that part.
+ * @returns An array of comma-separated strings.
+ */
+export function splitIntoParts(arr: string[], parts: number): string[] {
+  const partSize = Math.ceil(arr.length / parts);
+  const blocks: string[] = [];
+
+  for (let i = 0; i < parts && i * partSize < arr.length; i++) {
+    const part = arr.slice(i * partSize, (i + 1) * partSize);
+    blocks.push(part.join(","));
+  }
+
+  return blocks;
+}

@navikt/aksel-icons/config/figma/icon-name.mjs

@@ -1,15 +0,0 @@
-import camelCase from "lodash.camelCase";
-import startCase from "lodash.startcase";
-
-export const resolveName = (icon) => {
-  const isVariant = icon.name.startsWith("Variant=");
-
-  if (isVariant) {
-    const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
-    const actualName = icon["containing_frame"]?.["containingStateGroup"]?.name;
-    const name = `${actualName}${variant}`;
-    return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
-  }
-
-  return `${startCase(camelCase(icon.name)).replace(/ /g, "")}.svg`;
-};

@navikt/aksel-icons/config/figma/icon-name.ts

@@ -0,0 +1,17 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
+import { camelCase, startCase } from "lodash";
+
+export const resolveName = (icon: PublishedComponent) => {
+  const isVariant = icon.name.startsWith("Variant=");
+
+  if (isVariant) {
+    const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
+
+    /* @ts-expect-error Figma now includes the key:value pair `containingStateGroup: { name: string, nodeId: string }` */
+    const actualName = icon.containing_frame?.containingStateGroup?.name;
+    const name = `${actualName}${variant}`;
+    return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
+  }
+
+  return `${startCase(camelCase(icon.name)).replace(/ /g, "")}.svg`;
+};

@navikt/aksel-icons/config/figma/index.mjs

@@ -1,65 +0,0 @@
-import { config } from "dotenv";
-import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
-import { resolve } from "path";
-import { fetchDownloadUrls, fetchIcon, fetchIcons } from "./fetch-icons.mjs";
-import { resolveName } from "./icon-name.mjs";
-import { makeConfig } from "./make-configs.mjs";
-import { paginate } from "./paginate.mjs";
-
-config();
-/* https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0 */
-
-const iconFolder = "./icons";
-
-if (!process.env.FIGMA_TOKEN) {
-  throw new Error("FIGMA_TOKEN not set in .env");
-}
-
-async function main() {
-  let icons = await fetchIcons();
-
-  const totalIcons = icons.length;
-
-  const { images } = await fetchDownloadUrls(
-    paginate(
-      icons.map((x) => x.node_id),
-      400,
-    ).map((x) => x.join(",")),
-  );
-
-  if (existsSync(iconFolder)) {
-    rmSync(iconFolder, { recursive: true, force: true });
-  }
-
-  mkdirSync(iconFolder);
-
-  console.info(`Laster ned ${Object.keys(images).length} ikoner`);
-
-  for (const [key, value] of Object.entries(images)) {
-    const icon = await fetchIcon(value).catch((e) => {
-      throw e;
-    });
-    await new Promise((r) => setTimeout(r, 20));
-
-    icon &&
-      writeFileSync(
-        resolve(iconFolder, resolveName(icons.find((x) => x.node_id === key))),
-        icon,
-        {
-          encoding: "utf8",
-        },
-      );
-  }
-
-  makeConfig(icons, iconFolder);
-
-  readdirSync(iconFolder, (_, files) => {
-    if (files.length * 2 !== totalIcons) {
-      throw new Error(`Ikoner mangler!`);
-    }
-  });
-
-  console.info(`Success! ${Object.keys(images).length} ikoner lastet ned`);
-}
-
-main();

@navikt/aksel-icons/config/figma/index.ts

@@ -0,0 +1,106 @@
+import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
+import { resolve } from "path";
+import { fetchDownloadUrls, fetchIcons } from "./fetch-icons";
+import { resolveName } from "./icon-name";
+import { makeConfig } from "./make-configs";
+
+/**
+ * https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0
+ * This is the current source for all icons we are working with.
+ */
+
+const iconFolder = "./icons";
+
+if (!process.env.FIGMA_TOKEN) {
+  throw new Error("FIGMA_TOKEN not set in .env");
+}
+
+main();
+
+async function main() {
+  console.info("Started icon-update from Figma");
+  /* Icons are published as 'components' in Figma */
+  const publishedIconComponents = await fetchIcons();
+
+  /* When we have all the published icons, we can ask figma for URL's for downloading them as assets */
+  const imagesUrls = await fetchDownloadUrls(
+    publishedIconComponents.map((x) => x.node_id),
+  );
+
+  /* Lets do a clean install */
+  if (existsSync(iconFolder)) {
+    rmSync(iconFolder, { recursive: true, force: true });
+  }
+  mkdirSync(iconFolder);
+
+  console.group(`Processing ${Object.keys(imagesUrls).length} icons...`);
+
+  const fileNames = new Set<string>();
+
+  await Promise.all(
+    Object.entries(imagesUrls).map(async ([nodeId, iconUrl]) => {
+      /* Each icon is now a raw string for a complete SVG */
+      const iconSvg = await fetch(iconUrl)
+        .then((x) => x.text())
+        .catch((e) => {
+          throw e.message;
+        });
+
+      const matchingIcon = publishedIconComponents.find(
+        (x) => x.node_id === nodeId,
+      );
+
+      if (!matchingIcon) {
+        throw new Error(
+          `No matching icon found for ${nodeId}. It should not be possible to dowload icon without a matching icon in the list of icons fetched from Figma.`,
+        );
+      }
+
+      const fileName = resolveName(matchingIcon);
+
+      /*
+       * In some cases if multiple icons are published in Figma with the same name,
+       * we will end up overwriting the icon with the same name.
+       */
+      if (fileNames.has(fileName)) {
+        console.warn(`Duplicate name detected: ${fileName}.`);
+      }
+
+      fileNames.add(fileName);
+
+      writeFileSync(resolve(iconFolder, resolveName(matchingIcon)), iconSvg, {
+        encoding: "utf8",
+      });
+    }),
+  );
+
+  if (fileNames.size !== publishedIconComponents.length) {
+    console.warn(
+      `Duplicate icon names from Figma leads to them being overwritten. This will cause the icon-library to be out of sync with Figma.`,
+    );
+  }
+
+  console.info(`Completed processing 🎉`);
+  console.groupEnd();
+
+  makeConfig(publishedIconComponents, iconFolder);
+
+  const filesInDir = readdirSync(iconFolder);
+  const svgFiles = filesInDir.filter((x) => x.endsWith(".svg"));
+  const ymlFiles = filesInDir.filter((x) => x.endsWith(".yml"));
+
+  if (
+    svgFiles.length !== publishedIconComponents.length ||
+    ymlFiles.length !== publishedIconComponents.length
+  ) {
+    throw new Error(
+      `Icons (${svgFiles.length}) and configs (${ymlFiles.length}) written to directory does not match the expected amount of icons located in Figma (${publishedIconComponents.length}).\nThis is most likely caused by duplicate icon names from figma.`,
+    );
+  }
+
+  console.info(
+    `Success! A total of ${
+      Object.keys(imagesUrls).length
+    } were fetched and downloaded from Figma 🎉`,
+  );
+}

@navikt/aksel-icons/config/figma/make-configs.ts

@@ -1,17 +1,40 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
 import { writeFileSync } from "fs";
-import jsYaml from "js-yaml";
+import { dump } from "js-yaml";
 import { resolve } from "path";
-import { resolveName } from "./icon-name.mjs";
+import { resolveName } from "./icon-name";
 
-export const makeConfig = (icons, folder) => {
-  icons.forEach((icon) => {
+export type IconYml = {
+  name: string;
+  category: string;
+  sub_category: string;
+  keywords: string[];
+  variant: string;
+  updated_at: string;
+  created_at: string;
+};
+
+export const makeConfig = (
+  icons: PublishedComponent[],
+  dirLocation: string,
+) => {
+  console.group("Creating icon yml...");
+
+  let counter = 0;
+  for (const icon of icons) {
     const name = resolveName(icon).replace(".svg", "");
     const keywords = icon.description
       .split(",")
       .map((x) => x.trim())
       .filter(Boolean);
 
-    const config = {
+    if (!icon.containing_frame?.pageName || !icon.containing_frame?.name) {
+      throw new Error(
+        `Missing containing_frame.pageName or containing_frame.name for icon ${name}`,
+      );
+    }
+
+    const config: IconYml = {
       name,
       category: icon.containing_frame.pageName,
       sub_category: icon.containing_frame.name,
@@ -33,14 +56,18 @@ export const makeConfig = (icons, folder) => {
         .join("."),
     };
 
-    const yml = jsYaml.dump(config, {
+    const yml = dump(config, {
       noRefs: true,
       skipInvalid: false,
       quotingType: '"',
     });
 
-    writeFileSync(resolve(folder, `${config.name}.yml`), yml, {
+    writeFileSync(resolve(dirLocation, `${config.name}.yml`), yml, {
       encoding: "utf8",
     });
-  });
+    counter++;
+  }
+
+  console.info(`Created ${counter} icon yml files`);
+  console.groupEnd();
 };

@navikt/aksel-icons/config/figma/paginate.mjs

@@ -1,12 +0,0 @@
-export function paginate(arr, size) {
-  return arr.reduce((acc, val, i) => {
-    let idx = Math.floor(i / size);
-    if (!acc[idx]) {
-      acc[idx] = [];
-    }
-    let page = acc[idx];
-    page.push(val);
-
-    return acc;
-  }, []);
-}

@navikt/aksel-icons/config/metadata.js

@@ -15,6 +15,7 @@ ymlList.forEach((file) => {
   const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
     schema: jsYaml.JSON_SCHEMA,
   });
+  // biome-ignore lint/complexity/useOptionalChain: optional chain not supported in enviroment. Consider revriting to Typescript
   if (ymlData.keywords && ymlData.keywords.includes("[ignore-docs]")) {
     return;
   }

@navikt/aksel-icons/figma-plugin/README.md

@@ -2,9 +2,9 @@
 
 # Aksel Icons plugin
 
-Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene i fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
+Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
 
-Referer til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
+Gå til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
 Har du ønsker om nye ikoner, eller ønsker å bidra med å lage nye, lag et issue på [GitHub-repoet for designsystemet](https://github.com/navikt/aksel).
 
 ## Quickstart

@navikt/aksel-icons/figma-plugin/package.json

@@ -22,13 +22,13 @@
     "@svgr/core": "^8.1.0",
     "@types/node": "^18.15.11",
     "@types/postcss-url": "^10.0.4",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.31",
     "postcss-url": "^10.1.3",
-    "typescript": "^5.1.6",
-    "vite": "^5.4.6",
+    "typescript": "5.5.4",
+    "vite": "^5.4.12",
     "vite-plugin-singlefile": "^1.0.0",
     "vite-plugin-svgr": "^4.2.0"
   }

@navikt/aksel-icons/figma-plugin/src/ui/App.tsx

@@ -109,7 +109,7 @@ const App = () => {
         icon.removeEventListener("dragend", dragEvent);
       }
     };
-  }, [categories]);
+  }, []);
 
   return (
     <main tabIndex={-1} className="wrapper">

@navikt/aksel-icons/icons/ArrowRedo.yml

@@ -13,5 +13,5 @@ keywords:
   - forward
   - videresend
 variant: Stroke
-updated_at: 23.02.2024
+updated_at: 05.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/BoneBroken.yml

@@ -15,5 +15,5 @@ keywords:
   - risiko
   - forsiktighet
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 27.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Code.yml

@@ -15,5 +15,5 @@ keywords:
   - markup-språk
   - kildekode
 variant: Stroke
-updated_at: 01.03.2024
+updated_at: 18.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Density3.yml

@@ -12,5 +12,5 @@ keywords:
   - struktur
   - innhold
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 10.02.2025
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Equals.yml

@@ -6,5 +6,5 @@ keywords:
   - sann
   - resultat
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 24.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Expand.yml

@@ -9,5 +9,5 @@ keywords:
   - open
   - åpne
 variant: Stroke
-updated_at: 24.01.2024
+updated_at: 16.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ExpandVertical.svg

@@ -0,0 +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.5303 2.21967C12.2374 1.92678 11.7626 1.92678 11.4697 2.21967L7.46967 6.21967C7.17678 6.51256 7.17678 6.98744 7.46967 7.28033C7.76256 7.57322 8.23744 7.57322 8.53033 7.28033L11.25 4.56066L11.25 10C11.25 10.4142 11.5858 10.75 12 10.75C12.4142 10.75 12.75 10.4142 12.75 10L12.75 4.56066L15.4697 7.28033C15.7626 7.57322 16.2374 7.57322 16.5303 7.28033C16.8232 6.98744 16.8232 6.51256 16.5303 6.21967L12.5303 2.21967ZM11.4697 21.7803C11.7626 22.0732 12.2374 22.0732 12.5303 21.7803L16.5303 17.7803C16.8232 17.4874 16.8232 17.0126 16.5303 16.7197C16.2374 16.4268 15.7626 16.4268 15.4697 16.7197L12.75 19.4393L12.75 14C12.75 13.5858 12.4142 13.25 12 13.25C11.5858 13.25 11.25 13.5858 11.25 14L11.25 19.4393L8.53033 16.7197C8.23744 16.4268 7.76256 16.4268 7.46967 16.7197C7.17678 17.0126 7.17678 17.4874 7.46967 17.7803L11.4697 21.7803Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/ExpandVertical.yml

@@ -0,0 +1,13 @@
+name: ExpandVertical
+category: Arrows
+sub_category: Arrow
+keywords:
+  - arrows
+  - piler
+  - fullscreen
+  - fullskjerm
+  - open
+  - åpne
+variant: Stroke
+updated_at: 30.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/FileJpeg.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.20973 16.193H9.90274C10.1267 16.193 10.3041 16.1323 10.4347 16.011C10.5701 15.885 10.6377 15.7193 10.6377 15.514C10.6377 15.3087 10.5701 15.1453 10.4347 15.024C10.3041 14.898 10.1267 14.835 9.90274 14.835H9.20973V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.18047 19.077C4.6438 19.077 4.2168 18.9323 3.89947 18.643C3.5868 18.349 3.43047 17.9547 3.43047 17.46H4.48047C4.48047 17.6747 4.54347 17.8473 4.66947 17.978C4.79547 18.104 4.9658 18.167 5.18047 18.167C5.39514 18.167 5.56547 18.1063 5.69147 17.985C5.81747 17.859 5.88047 17.6887 5.88047 17.474V14.87H4.72547V13.89H6.93047V17.474C6.93047 17.9687 6.77414 18.3607 6.46147 18.65C6.1488 18.9347 5.7218 19.077 5.18047 19.077ZM8.15973 19V13.89H9.90274C10.2621 13.89 10.5747 13.9577 10.8407 14.093C11.1114 14.2283 11.3191 14.4173 11.4637 14.66C11.6131 14.9027 11.6877 15.1873 11.6877 15.514C11.6877 15.836 11.6131 16.1207 11.4637 16.368C11.3144 16.6107 11.1067 16.7997 10.8407 16.935C10.5747 17.0703 10.2621 17.138 9.90274 17.138H9.20973V19H8.15973ZM12.665 19V13.89H15.815V14.786H13.694V15.934H15.57V16.83H13.694V18.104H15.815V19H12.665ZM18.6403 19.07C18.2996 19.07 18.0009 19.007 17.7443 18.881C17.4876 18.7503 17.2869 18.5707 17.1423 18.342C17.0023 18.1087 16.9323 17.838 16.9323 17.53V15.36C16.9323 15.0473 17.0023 14.7767 17.1423 14.548C17.2869 14.3193 17.4876 14.142 17.7443 14.016C18.0009 13.8853 18.2996 13.82 18.6403 13.82C18.9856 13.82 19.2843 13.8853 19.5363 14.016C19.7929 14.142 19.9913 14.3193 20.1313 14.548C20.2759 14.7767 20.3483 15.0473 20.3483 15.36H19.2983C19.2983 15.1547 19.2399 14.9983 19.1233 14.891C19.0113 14.7837 18.8503 14.73 18.6403 14.73C18.4303 14.73 18.2669 14.7837 18.1503 14.891C18.0383 14.9983 17.9823 15.1547 17.9823 15.36V17.53C17.9823 17.7307 18.0383 17.887 18.1503 17.999C18.2669 18.1063 18.4303 18.16 18.6403 18.16C18.8503 18.16 19.0113 18.1063 19.1233 17.999C19.2399 17.887 19.2983 17.7307 19.2983 17.53V17.089H18.5423V16.2H20.3483V17.53C20.3483 17.838 20.2759 18.1087 20.1313 18.342C19.9913 18.5707 19.7929 18.7503 19.5363 18.881C19.2843 19.007 18.9856 19.07 18.6403 19.07Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/FileJpeg.yml

@@ -0,0 +1,13 @@
+name: FileJpeg
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024

@navikt/aksel-icons/icons/FileJpegFill.svg

@@ -0,0 +1,5 @@
+<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 3.25C13.1381 3.25 13.25 3.36193 13.25 3.5V7.5C13.25 8.19036 13.8096 8.75 14.5 8.75H18.5C18.6381 8.75 18.75 8.86193 18.75 9V10.5C18.75 10.6381 18.6381 10.75 18.5 10.75H5.5C5.36193 10.75 5.25 10.6381 5.25 10.5V4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H13ZM15.1768 4.11612C15.0193 3.95863 14.75 4.07017 14.75 4.29289V7C14.75 7.13807 14.8619 7.25 15 7.25H17.7071C17.9298 7.25 18.0414 6.98072 17.8839 6.82322L15.1768 4.11612Z" fill="#23262A"/>
+<path d="M9.90274 16.193H9.20973V14.835H9.90274C10.1267 14.835 10.3041 14.898 10.4347 15.024C10.5701 15.1453 10.6377 15.3087 10.6377 15.514C10.6377 15.7193 10.5701 15.885 10.4347 16.011C10.3041 16.1323 10.1267 16.193 9.90274 16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12.25C2.58579 12.25 2.25 12.5858 2.25 13V20C2.25 20.4142 2.58579 20.75 3 20.75H21C21.4142 20.75 21.75 20.4142 21.75 20V13C21.75 12.5858 21.4142 12.25 21 12.25H3ZM3.89947 18.643C4.2168 18.9323 4.6438 19.077 5.18047 19.077C5.7218 19.077 6.1488 18.9347 6.46147 18.65C6.77414 18.3607 6.93047 17.9687 6.93047 17.474V13.89H4.72547V14.87H5.88047V17.474C5.88047 17.6887 5.81747 17.859 5.69147 17.985C5.56547 18.1063 5.39514 18.167 5.18047 18.167C4.9658 18.167 4.79547 18.104 4.66947 17.978C4.54347 17.8473 4.48047 17.6747 4.48047 17.46H3.43047C3.43047 17.9547 3.5868 18.349 3.89947 18.643ZM8.15973 13.89V19H9.20973V17.138H9.90274C10.2621 17.138 10.5747 17.0703 10.8407 16.935C11.1067 16.7997 11.3144 16.6107 11.4637 16.368C11.6131 16.1207 11.6877 15.836 11.6877 15.514C11.6877 15.1873 11.6131 14.9027 11.4637 14.66C11.3191 14.4173 11.1114 14.2283 10.8407 14.093C10.5747 13.9577 10.2621 13.89 9.90274 13.89H8.15973ZM12.665 13.89V19H15.815V18.104H13.694V16.83H15.57V15.934H13.694V14.786H15.815V13.89H12.665ZM17.7443 18.881C18.0009 19.007 18.2996 19.07 18.6403 19.07C18.9856 19.07 19.2843 19.007 19.5363 18.881C19.7929 18.7503 19.9913 18.5707 20.1313 18.342C20.2759 18.1087 20.3483 17.838 20.3483 17.53V16.2H18.5423V17.089H19.2983V17.53C19.2983 17.7307 19.2399 17.887 19.1233 17.999C19.0113 18.1063 18.8503 18.16 18.6403 18.16C18.4303 18.16 18.2669 18.1063 18.1503 17.999C18.0383 17.887 17.9823 17.7307 17.9823 17.53V15.36C17.9823 15.1547 18.0383 14.9983 18.1503 14.891C18.2669 14.7837 18.4303 14.73 18.6403 14.73C18.8503 14.73 19.0113 14.7837 19.1233 14.891C19.2399 14.9983 19.2983 15.1547 19.2983 15.36H20.3483C20.3483 15.0473 20.2759 14.7767 20.1313 14.548C19.9913 14.3193 19.7929 14.142 19.5363 14.016C19.2843 13.8853 18.9856 13.82 18.6403 13.82C18.2996 13.82 18.0009 13.8853 17.7443 14.016C17.4876 14.142 17.2869 14.3193 17.1423 14.548C17.0023 14.7767 16.9323 15.0473 16.9323 15.36V17.53C16.9323 17.838 17.0023 18.1087 17.1423 18.342C17.2869 18.5707 17.4876 18.7503 17.7443 18.881Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/FileJpegFill.yml

@@ -0,0 +1,13 @@
+name: FileJpegFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024

@navikt/aksel-icons/icons/FilePng.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/FilePng.yml

@@ -0,0 +1,12 @@
+name: FilePng
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024

@navikt/aksel-icons/icons/FilePngFill.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.25 3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V10.5C5.25 10.6381 5.36193 10.75 5.5 10.75H18.5C18.6381 10.75 18.75 10.6381 18.75 10.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V3.5Z" fill="#23262A"/>
+<path d="M14.75 4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98072 17.9298 7.25 17.7071 7.25H15C14.8619 7.25 14.75 7.13807 14.75 7V4.29289Z" fill="#23262A"/>
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 13C2.25 12.5858 2.58579 12.25 3 12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/FilePngFill.yml

@@ -0,0 +1,12 @@
+name: FilePngFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024

@navikt/aksel-icons/icons/Hanger.yml

@@ -10,5 +10,5 @@ keywords:
   - wardrobe
   - kleshenger
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 12.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Kroner.yml

@@ -7,5 +7,5 @@ keywords:
   - penger
   - norske kroner
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 03.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Leave.yml

@@ -15,5 +15,5 @@ keywords:
   - avslutt
   - avslutt
 variant: Stroke
-updated_at: 25.04.2024
+updated_at: 06.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/LineHeight.svg

@@ -0,0 +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="M3.75 3.25C3.33579 3.25 3 3.58579 3 4C3 4.41421 3.33579 4.75 3.75 4.75H20.25C20.6642 4.75 21 4.41421 21 4C21 3.58579 20.6642 3.25 20.25 3.25H3.75ZM12.6855 6.9454C12.5652 6.67455 12.2966 6.5 12.0002 6.5C11.7038 6.5 11.4352 6.67455 11.3148 6.9454L7.31483 15.9454C7.1466 16.3239 7.31707 16.7671 7.69558 16.9354C8.0741 17.1036 8.51732 16.9331 8.68555 16.5546L9.5987 14.5H14.4017L15.3148 16.5546C15.4831 16.9331 15.9263 17.1036 16.3048 16.9354C16.6833 16.7671 16.8538 16.3239 16.6855 15.9454L12.6855 6.9454ZM13.735 13L12.0002 9.09666L10.2654 13H13.735ZM3 20C3 19.5858 3.33579 19.25 3.75 19.25H20.25C20.6642 19.25 21 19.5858 21 20C21 20.4142 20.6642 20.75 20.25 20.75H3.75C3.33579 20.75 3 20.4142 3 20Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/LineHeight.yml

@@ -0,0 +1,9 @@
+name: LineHeight
+category: Interface
+sub_category: Design
+keywords:
+  - linjehøyde
+  - linjeavstand
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/MedicalThermometer.svg

@@ -0,0 +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.7626 3.17678C16.446 2.49336 17.554 2.49336 18.2374 3.17678L20.8232 5.76257C21.5066 6.44598 21.5066 7.55402 20.8232 8.23744L13.409 15.6517C12.7057 16.3549 11.7519 16.75 10.7574 16.75H8.31066L7.03033 18.0303C6.73744 18.3232 6.26256 18.3232 5.96967 18.0303C5.67678 17.7374 5.67678 17.2626 5.96967 16.9697L7.25 15.6893V13.2426C7.25 12.2481 7.64509 11.2943 8.34835 10.591L15.7626 3.17678ZM17.1768 4.23744C17.0791 4.13981 16.9209 4.13981 16.8232 4.23744L9.40901 11.6517C8.98705 12.0736 8.75 12.6459 8.75 13.2426V15.25H10.7574C11.3541 15.25 11.9264 15.0129 12.3483 14.591L19.7626 7.17678C19.8602 7.07915 19.8602 6.92086 19.7626 6.82323L17.1768 4.23744ZM17.0303 6.96967C17.3232 7.26256 17.3232 7.73744 17.0303 8.03033L14.0303 11.0303C13.7374 11.3232 13.2626 11.3232 12.9697 11.0303C12.6768 10.7374 12.6768 10.2626 12.9697 9.96967L15.9697 6.96967C16.2626 6.67678 16.7374 6.67678 17.0303 6.96967ZM5.03033 18.9697C5.32322 19.2626 5.32322 19.7374 5.03033 20.0303L4.03033 21.0303C3.73744 21.3232 3.26256 21.3232 2.96967 21.0303C2.67678 20.7374 2.67678 20.2626 2.96967 19.9697L3.96967 18.9697C4.26256 18.6768 4.73744 18.6768 5.03033 18.9697Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/MedicalThermometer.yml

@@ -0,0 +1,15 @@
+name: MedicalThermometer
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Stroke
+updated_at: 14.10.2024
+created_at: 07.03.2023

@navikt/aksel-icons/icons/MedicalThermometerFill.svg

@@ -0,0 +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.2374 3.17687C17.554 2.49345 16.446 2.49345 15.7626 3.17687L8.34835 10.5911C7.64509 11.2943 7.25 12.2482 7.25 13.2427V15.6893L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L8.31057 16.7501H10.7574C11.7519 16.7501 12.7057 16.355 13.409 15.6517L20.8232 8.23753C21.5066 7.55411 21.5066 6.44608 20.8232 5.76266L18.2374 3.17687ZM17.0303 8.03033C17.3232 7.73744 17.3232 7.26256 17.0303 6.96967C16.7374 6.67678 16.2626 6.67678 15.9697 6.96967L12.9697 9.96967C12.6768 10.2626 12.6768 10.7374 12.9697 11.0303C13.2626 11.3232 13.7374 11.3232 14.0303 11.0303L17.0303 8.03033ZM5.03033 20.0303C5.32322 19.7374 5.32322 19.2626 5.03033 18.9697C4.73744 18.6768 4.26256 18.6768 3.96967 18.9697L2.96967 19.9697C2.67678 20.2626 2.67678 20.7374 2.96967 21.0303C3.26256 21.3232 3.73744 21.3232 4.03033 21.0303L5.03033 20.0303Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/MedicalThermometerFill.yml

@@ -0,0 +1,15 @@
+name: MedicalThermometerFill
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Fill
+updated_at: 14.10.2024
+created_at: 07.03.2023

@navikt/aksel-icons/icons/Paragraph.yml

@@ -20,5 +20,5 @@ keywords:
   - ansvar
   - paragraf
 variant: Stroke
-updated_at: 04.01.2024
+updated_at: 18.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/QuestionmarkCircle.svg

@@ -0,0 +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 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9ZM10.25 9.5C10.25 8.5335 11.0335 7.75 12 7.75H12.1361C13.0274 7.75 13.75 8.47255 13.75 9.36387C13.75 9.85413 13.5271 10.3178 13.1443 10.6241L12.7028 10.9773C11.7845 11.7119 11.25 12.8241 11.25 14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14C12.75 13.2797 13.0774 12.5985 13.6398 12.1486L14.0814 11.7954C14.82 11.2045 15.25 10.3098 15.25 9.36387C15.25 7.64413 13.8559 6.25 12.1361 6.25H12C10.2051 6.25 8.75 7.70507 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/QuestionmarkCircle.yml

@@ -0,0 +1,17 @@
+name: QuestionmarkCircle
+category: Status
+sub_category: Guidance
+keywords:
+  - assistance
+  - support
+  - information
+  - guidance
+  - question mark
+  - hjelp
+  - støtte
+  - informasjon
+  - veiledning
+  - spørsmålstegn
+variant: Stroke
+updated_at: 29.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/QuestionmarkCircleFill.svg

@@ -0,0 +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 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM12 7.75C11.0335 7.75 10.25 8.5335 10.25 9.5C10.25 9.91421 9.91421 10.25 9.5 10.25C9.08579 10.25 8.75 9.91421 8.75 9.5C8.75 7.70507 10.2051 6.25 12 6.25H12.1361C13.8559 6.25 15.25 7.64413 15.25 9.36387C15.25 10.3098 14.82 11.2045 14.0814 11.7954L13.6398 12.1486C13.0774 12.5985 12.75 13.2797 12.75 14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14C11.25 12.8241 11.7845 11.7119 12.7028 10.9773L13.1443 10.6241C13.5271 10.3178 13.75 9.85413 13.75 9.36387C13.75 8.47255 13.0274 7.75 12.1361 7.75H12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/QuestionmarkCircleFill.yml

@@ -0,0 +1,17 @@
+name: QuestionmarkCircleFill
+category: Status
+sub_category: Guidance
+keywords:
+  - assistance
+  - support
+  - information
+  - guidance
+  - question mark
+  - hjelp
+  - støtte
+  - informasjon
+  - veiledning
+  - spørsmålstegn
+variant: Fill
+updated_at: 29.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/SealXMark.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="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24698 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15853 8.95601 3.89487 9.20243L3.05127 9.99087C1.88828 11.0778 1.88828 12.9221 3.05127 14.0091L3.89487 14.7975C4.15853 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09295 19.7483L8.24698 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.907 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.907 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.75619 18.5008 8.98982 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.0755 12.9132C3.54687 12.4192 3.54687 11.5808 4.0755 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.01239 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.01239 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24699 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15854 8.95601 3.89488 9.20243L3.05128 9.99087C1.88828 11.0778 1.88828 12.9221 3.05128 14.0091L3.89488 14.7975C4.15854 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09296 19.7483L8.24699 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.9071 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.9071 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.7562 18.5008 8.98983 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.07551 12.9132C3.54687 12.4192 3.54687 11.5808 4.07551 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.0124 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.0124 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
 </svg>

@navikt/aksel-icons/icons/ShieldCheckmark.svg

@@ -0,0 +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="M19.75 4.01992C19.75 3.53224 19.3003 3.16875 18.8235 3.27093L18.4572 3.34943C14.2007 4.26153 9.79929 4.26153 5.54282 3.34943L5.17649 3.27093C4.69967 3.16875 4.25 3.53223 4.25 4.01992V13.0001C4.25 17.2803 7.71979 20.7501 12 20.7501C16.2802 20.7501 19.75 17.2803 19.75 13.0001V4.01992ZM5.75 4.92339C9.87693 5.73687 14.1231 5.73687 18.25 4.92339V13.0001C18.25 16.4519 15.4518 19.2501 12 19.2501C8.54822 19.2501 5.75 16.4519 5.75 13.0001V4.92339ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/ShieldCheckmark.yml

@@ -0,0 +1,14 @@
+name: ShieldCheckmark
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Stroke
+updated_at: 29.11.2024
+created_at: 18.11.2024

@navikt/aksel-icons/icons/ShieldCheckmarkFill.svg

@@ -0,0 +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="M19.75 4.01971C19.75 3.53202 19.3003 3.16854 18.8235 3.27071L18.4572 3.34921C14.2007 4.26131 9.79929 4.26131 5.54282 3.34921L5.17649 3.27071C4.69967 3.16854 4.25 3.53202 4.25 4.01971V12.9999C4.25 17.2801 7.71979 20.7499 12 20.7499C16.2802 20.7499 19.75 17.2801 19.75 12.9999V4.01971ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/ShieldCheckmarkFill.yml

@@ -0,0 +1,14 @@
+name: ShieldCheckmarkFill
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Fill
+updated_at: 29.11.2024
+created_at: 18.11.2024

@navikt/aksel-icons/icons/ShieldLock.yml

@@ -9,6 +9,7 @@ keywords:
   - låst
   - kryptert
   - encrypted
+  - locked
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ShieldLockFill.yml

@@ -9,6 +9,7 @@ keywords:
   - låst
   - kryptert
   - encrypted
+  - locked
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Snow.yml

@@ -6,5 +6,5 @@ keywords:
   - crystal
   - snø
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 23.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/SortDown.svg

@@ -0,0 +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.0303 18.5303C17.8897 18.671 17.6989 18.75 17.5 18.75C17.3011 18.75 17.1103 18.671 16.9697 18.5303L13.4697 15.0303C13.1768 14.7374 13.1768 14.2626 13.4697 13.9697C13.7626 13.6768 14.2374 13.6768 14.5303 13.9697L16.75 16.1893V6C16.75 5.58579 17.0858 5.25 17.5 5.25C17.9142 5.25 18.25 5.58579 18.25 6V16.1893L20.4697 13.9697C20.7626 13.6768 21.2374 13.6768 21.5303 13.9697C21.8232 14.2626 21.8232 14.7374 21.5303 15.0303L18.0303 18.5303ZM2.75 6.25C2.33579 6.25 2 6.58579 2 7C2 7.41421 2.33579 7.75 2.75 7.75L12.25 7.75C12.6642 7.75 13 7.41421 13 7C13 6.58579 12.6642 6.25 12.25 6.25L2.75 6.25ZM2.75 11.25C2.33579 11.25 2 11.5858 2 12C2 12.4142 2.33579 12.75 2.75 12.75L10.25 12.75C10.6642 12.75 11 12.4142 11 12C11 11.5858 10.6642 11.25 10.25 11.25H2.75ZM2 17C2 16.5858 2.33579 16.25 2.75 16.25H8.25C8.66421 16.25 9 16.5858 9 17C9 17.4142 8.66421 17.75 8.25 17.75H2.75C2.33579 17.75 2 17.4142 2 17Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SortDown.yml

@@ -0,0 +1,11 @@
+name: SortDown
+category: Interface
+sub_category: Filtering and sorting
+keywords:
+  - sort
+  - sortering
+  - synkende
+  - descending
+variant: Stroke
+updated_at: 27.01.2025
+created_at: 27.01.2025

@navikt/aksel-icons/icons/SortUp.svg

@@ -0,0 +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.0303 5.46967C17.8897 5.32902 17.6989 5.25 17.5 5.25C17.3011 5.25 17.1103 5.32902 16.9697 5.46967L13.4697 8.96967C13.1768 9.26256 13.1768 9.73744 13.4697 10.0303C13.7626 10.3232 14.2374 10.3232 14.5303 10.0303L16.75 7.81066V18C16.75 18.4142 17.0858 18.75 17.5 18.75C17.9142 18.75 18.25 18.4142 18.25 18V7.81066L20.4697 10.0303C20.7626 10.3232 21.2374 10.3232 21.5303 10.0303C21.8232 9.73744 21.8232 9.26256 21.5303 8.96967L18.0303 5.46967ZM2.75 17.75C2.33579 17.75 2 17.4142 2 17C2 16.5858 2.33579 16.25 2.75 16.25L12.25 16.25C12.6642 16.25 13 16.5858 13 17C13 17.4142 12.6642 17.75 12.25 17.75L2.75 17.75ZM2.75 12.75C2.33579 12.75 2 12.4142 2 12C2 11.5858 2.33579 11.25 2.75 11.25L10.25 11.25C10.6642 11.25 11 11.5858 11 12C11 12.4142 10.6642 12.75 10.25 12.75H2.75ZM2 7C2 7.41421 2.33579 7.75 2.75 7.75H8.25C8.66421 7.75 9 7.41421 9 7C9 6.58579 8.66421 6.25 8.25 6.25H2.75C2.33579 6.25 2 6.58579 2 7Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SortUp.yml

@@ -0,0 +1,11 @@
+name: SortUp
+category: Interface
+sub_category: Filtering and sorting
+keywords:
+  - sort
+  - sortering
+  - stigende
+  - ascending
+variant: Stroke
+updated_at: 27.01.2025
+created_at: 27.01.2025

@navikt/aksel-icons/icons/SpaceHorizontal.svg

@@ -0,0 +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="M4 4C4.41421 4 4.75 4.33579 4.75 4.75V11.25H6.75C7.16421 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.16421 12.75 6.75 12.75H4.75V19.25C4.75 19.6642 4.41421 20 4 20C3.58579 20 3.25 19.6642 3.25 19.25V4.75C3.25 4.33579 3.58579 4 4 4ZM9.25 11.25C8.83579 11.25 8.5 11.5858 8.5 12C8.5 12.4142 8.83579 12.75 9.25 12.75H10.75C11.1642 12.75 11.5 12.4142 11.5 12C11.5 11.5858 11.1642 11.25 10.75 11.25H9.25ZM12.5 12C12.5 11.5858 12.8358 11.25 13.25 11.25H14.75C15.1642 11.25 15.5 11.5858 15.5 12C15.5 12.4142 15.1642 12.75 14.75 12.75H13.25C12.8358 12.75 12.5 12.4142 12.5 12ZM17.25 11.25C16.8358 11.25 16.5 11.5858 16.5 12C16.5 12.4142 16.8358 12.75 17.25 12.75H19.25V19.25C19.25 19.6642 19.5858 20 20 20C20.4142 20 20.75 19.6642 20.75 19.25V4.75C20.75 4.33579 20.4142 4 20 4C19.5858 4 19.25 4.33579 19.25 4.75V11.25H17.25Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SpaceHorizontal.yml

@@ -0,0 +1,12 @@
+name: SpaceHorizontal
+category: Interface
+sub_category: Design
+keywords:
+  - avstand
+  - padding
+  - margin
+  - horisontal
+  - luft
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/SpaceVertical.svg

@@ -0,0 +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="M4.75 3.25C4.33579 3.25 4 3.58579 4 4C4 4.41421 4.33579 4.75 4.75 4.75H11.25V6.75C11.25 7.16421 11.5858 7.5 12 7.5C12.4142 7.5 12.75 7.16421 12.75 6.75V4.75H19.25C19.6642 4.75 20 4.41421 20 4C20 3.58579 19.6642 3.25 19.25 3.25H4.75ZM12 11.5C11.5858 11.5 11.25 11.1642 11.25 10.75V9.25C11.25 8.83579 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.83579 12.75 9.25V10.75C12.75 11.1642 12.4142 11.5 12 11.5ZM11.25 14.75C11.25 15.1642 11.5858 15.5 12 15.5C12.4142 15.5 12.75 15.1642 12.75 14.75V13.25C12.75 12.8358 12.4142 12.5 12 12.5C11.5858 12.5 11.25 12.8358 11.25 13.25V14.75ZM4.75 19.25H11.25V17.25C11.25 16.8358 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.8358 12.75 17.25V19.25H19.25C19.6642 19.25 20 19.5858 20 20C20 20.4142 19.6642 20.75 19.25 20.75H4.75C4.33579 20.75 4 20.4142 4 20C4 19.5858 4.33579 19.25 4.75 19.25Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SpaceVertical.yml

@@ -0,0 +1,12 @@
+name: SpaceVertical
+category: Interface
+sub_category: Design
+keywords:
+  - avstand
+  - padding
+  - margin
+  - vertikal
+  - luft
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/StarsEu.yml

@@ -6,5 +6,5 @@ keywords:
   - europa
   - europe
 variant: Stroke
-updated_at: 08.07.2024
+updated_at: 23.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/TrendDown.yml

@@ -12,5 +12,5 @@ keywords:
   - diagram
   - analyse
 variant: Stroke
-updated_at: 05.07.2024
+updated_at: 18.09.2024
 created_at: 07.03.2023